/*
Theme Name: Crafteriaux Stock
Author: Crafteriaux
Author URI: http://crafteriaux.co.jp/
Version: 0.1.0
Text Domain: crafstock
*/


/*--------------------------------------------------------------
1.0 Normalize
-------------------------------------------------------------*/

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {display:block;}

ul,ol {list-style:none;}

blockquote, q {quotes:none;}
blockquote:before, blockquote:after,q:before, q:after {content:''; content:none;}

a {margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; outline:none;}
a:hover{opacity: 0.8;}
a:active{opacity: 0.7;}

del {text-decoration:line-through;}

abbr[title], dfn[title] {border-bottom:1px dotted; cursor:help;}

table {border-collapse:collapse; border-spacing:0;}

input, select {vertical-align:middle;}

img {vertical-align:bottom; border:none; font-size:0; line-height:0;}

em {font-style:normal;}

address {font-style:normal;}

/*--------------------------------------------------------------
2.0 Desktop
--------------------------------------------------------------*/

html{scroll-behavior: smooth;}

.mob{display: none;}
.tab{display: none;}
.pc{display: inline;}

body {-webkit-text-size-adjust:none; font-family: Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'sans-serif'; font-size:14px; background: #BDF;}

header{ padding: 20px; line-height: 30px; font-size: 20px; color: #FFF; background: #08F; text-align: center; box-shadow: 0px 5px 5px #666;}
header p{margin: 0; padding: 0; color: #fff; text-align: center; font-size: 16px; /*border-top:2px solid #fff;*/}
h1 {color: #fff; text-align: center; font-size: 34px; line-height: 1.2;}
h1 img {width: 30%;}
.sportsday-title img {width: 60%;}
p.crafteriaux{ position: absolute; top: 0; left:0; width: 15%; height: 1em; text-align:left; margin: 10px; }
p.crafteriaux img{width: 100%;}

main{ width: 100%; min-height:70vh; margin: 0 auto;}
main article{ width: 90%; margin: 20px auto;  padding: 20px 20px 50px; background: #fff;}
main article section.searchNavi{text-align: center; font-size: 140%;}

header nav.search{display: flex; margin: 0 auto 1%; padding-top: 1%; border-top:1px solid #fff;}
header nav.search p{width: 39%; margin-right: 1%; text-align: right; font-size: 110%;}
header form{width: 60%; text-align: left;}
header input{ width: 50%; height: 1.8em; box-shadow: 1px 1px 1px inset #ccc; }
header button{ padding: 2px 5px; color: #08f; background: #fff; font-size: 90%;}
header button:hover{opacity: 0.9;}

section.headinfo{ width: 90%; margin: 0 auto; padding: 5px; background: #fff; color: #000;}
section.headinfo h2{ font-size: 120%; text-align: center; border: none; margin: 0;  padding: 0; color:#DD6577; background: none;}
section.headinfo p{color: #000;}

main input[type=text],
main input[type=number],
main input[type=email],
main input[type=tel],
main input[type=password] { width: 40%; height: 2.5em; box-shadow: 1px 1px 1px inset #ccc; }
main button{ padding: 5px 10px; color: #fff; background: #08F; font-size: 120%; text-indent: 1.5em; letter-spacing: 1.5em;}
main button:hover{opacity: 0.9;}
main p.searchResult{font-size: 160%; text-align: left; font-weight: bold;}

h2{line-height: 1.2; text-align: left; margin: 5px 0; padding: 10px; color: #fff; font-size: 180%; background: #009CE5;}
h3{width: 95%; font-size: 140%;}
.retop{margin: 10px 20px 10px; text-align: right;}
.retop a{color: #08f; font-size: 110%;}

/* ------------ home.php ------------ */

nav.home_nav ul{display: flex; flex-wrap: nowrap; width: 100%;}
nav.home_nav ul li{margin: 1% auto 0; width: 30%;}
nav.home_nav ul li a{display: block; margin: 0 auto; padding: 2%; background: #fff; border-radius: 10px; color:#08F; font-weight: bold; text-decoration: none;}

nav.home_nav p{position: fixed; bottom:1%; right:1%; width: 10%; z-index: 1000;}
nav.home_nav p a{display: block; width:100%; padding: 15% 0; border-radius: 50%; background: #08F; color: #fff; line-height: 1.2; text-decoration: none;}

ul.category{ display: flex; flex-wrap: wrap;}
ul.category li{margin: 1%; padding: 0.5%; width: 29.5%; border: 3px solid #08f; box-shadow: 3px 3px 3px #999;text-align: center; }
ul.category li h3{margin: 0 auto; padding: 5px; width: 90%; height: 2.2em; background: #fff; text-align: center; color: #08f; line-height: 1.1;}
ul.category li p.img{width: 100%; height: 25vh; margin: 0 auto;overflow: hidden;}
ul.category li p.img a{border: none; background: none;}
ul.category li img{width: 100%; margin: 0; transition: all 0.5s;}
ul.category li img:hover{width: 101%; overflow: hidden; opacity: 0.8; transform:scale(1.1,1.1);}
ul.category li a{display: block; width: 90%; margin: 10px auto; padding: 5px; font-size: 130%; color: #fff; background: #08f; font-weight: 600; letter-spacing: 0.1em; text-decoration: none; border-radius: 10px;}


section.menu ul{display: flex; flex-wrap: wrap; width: 100%; margin: 0 auto;}
section.menu li{width: 23.8%; padding-top: 10px;  border-right-width: 1px; border-style: solid;}
section.menu li:nth-child(4n){border-right: none;}
section.menu li a{display: block; height: 100%; text-align: center; font-size: 100%; font-weight: bold;  border-bottom-width: 1px; border-bottom-style: solid;}
section.menu li a:hover{opacity: 0.7}
section.menu li img{height: 8vw;}

div.item-image{display: flex;}
div.item-image div.item-info{width: 30%; margin: 20px auto;}
div.item-image h3{width: 100%; margin: 0px; text-align: center;}
div.item-image h3 img{width: 100%;}
div.item-image div.item-info p{margin-top: 10px;}
div.item-image div.item-info p img{max-width: 96%; height: auto;}
div.item-image table{border-collapse: collapse; width: 68%; margin: 1%; text-align: center; font-size: 120%;}
div.item-image th,td {padding: 10px; border: 1px solid #08f; vertical-align: middle;}
div.item-image tr:nth-child(2n+1){background: #bdf;}
div.item-image th {text-align: center; font-weight: bold; color: #fff; background: #009CE5;}
div.item-image td{line-height: 1.1;}
div.item-image td img {max-height: 80px; margin: 0;}
div.item-image td:nth-child(1){width: 20%;}
div.item-image td:nth-child(2){width: 15%; white-space: normal;}
div.item-image td:nth-child(3){width: 15%;}
div.item-image td:nth-child(4){width: 20%; font-size: 120%;}
div.item-image td:nth-child(5){width: 20%;}

.thanks{ margin:30px 0; }
.thanks strong{font-size: 200%; }

.calendar ul{padding: 0 1em 1em;}
.calendar div.calendarData{display: flex; width: 100%;}
.calendar table{width: 22%; margin: 0 1% 1%; font-size:100%;}
.calendar table caption{text-align: left; font-weight: bold; font-size: 90%;}
.calendar table th,.calendar table td{padding: 5px 0.5%; font-size: 50%; text-align: center; border: 1px solid #08F; background: #fff;}
.calendar table th{color: #fff; background: #009CE5;}
.calendar table th:first-child,.calendar table td:first-child{color:#f00;}
.calendar table td:last-child{color:#1583BE;}
.calendar table td:first-child,.calendar table td.closed{background: #F8BBD0; color:red;}
.calendar table td.null{background: #ccc;}
.red{color:#F8BBD0;}
.nostock{color: red; font-weight: bold;}

.line_contact h3{margin:0 0 10px; padding: 0; background: #fff; color: #000; font-size: 250%; }
.line_contact h3 img{ font-size: 110%; height: 1.2em; line-height: 1.5em; }
.line_contact p.qrtxt{float: left; width: 70%; margin-top:0;  padding-top: 0;}
.line_contact p.qrtxt img{width: 80%;}
.line_contact p.qr img{width: auto;}

aside.tanoden{width: 85%; margin: 10px auto 20px;}
aside.tanoden img{width: 100%; margin: 0 auto 3px; box-shadow: 1px 3px 3px #333;}
aside.tanoden img:hover{opacity: 0.9; margin: 2px auto 1px; box-shadow: 1px 1px 1px #333;}

footer {width: 100%; padding: 10px 0 5px; background: #888; text-align: center; box-shadow: 0px -5px 5px #666;}
footer a {font-size: 120%; color: #FFF;}

small{color: #fff; font-weight: normal;}


/*--------------------------------------------------------------
2.1 tab
--------------------------------------------------------------*/

@media (min-width: 600px) and (max-width: 999px) {

.mob{display: none;}
.tab{display: inline;}
.pc{display: inline;}

header{padding: 10px; line-height: 20px; font-size: 16px;}
header p{font-size: 14px;}
h1 {color: #fff; text-align: center; font-size: 30px; line-height: 1.2;}
h1 img {width: 45%;}
p.crafteriaux{ margin: 1%; }
p.crafteriaux img{width: 100%;}

main{ min-height:70vh;}
main article{padding: 10px 10px 50px;}
main article section.searchNavi{font-size: 120%;}

header nav.search{display: flex; margin: 0 auto 1%; padding-top: 1%; border-top:1px solid #fff;}
header nav.search p{width: 44%; height: 2em; line-height: 2em; margin-right: 1%; text-align: right; font-size: 100%; }
header form{width: 55%; text-align: left;}
header input{ width: 70%; height: 1.4em;}
header button{ padding: 2px 5px; color: #08f; background: #fff; font-size: 90%;}
header button:hover{opacity: 0.9;}

main input{ width: 60%; height: 2em; box-shadow: 1px 1px 1px inset #ccc; }
main button{ padding: 5px 10px; color: #fff; background: #08F; font-size: 120%; text-indent: 1.5em; letter-spacing: 1.5em;}

h2{padding: 10px; color: #fff; font-size: 140%;}
h3{font-size: 120%;}

ul.category li{margin: 0.5%;width: 47%; border: 2px solid #08f; box-shadow: 2px 2px 2px #999;}
ul.category li h3{font-size: 160%;}
ul.category li a{display: block; width: 80%;padding: 5px; font-size: 110%; color: #fff; background: #08f; font-weight: 600; letter-spacing: 0em;}


div.item-image div.item-info{width: 35%;}
div.item-image table{width: 63%; margin:1%; font-size: 100%;}
div.item-image th,td {padding: 5px;}
div.item-image tr:nth-child(2n+1){background: #bdf;}
div.item-image th {white-space: nowrap; text-align: center; font-weight: bold; color: #fff; background: #009CE5;}
div.item-image td{line-height: 1.1;}
div.item-image td img {max-height: 60px; margin: 0;}

.line_contact h3{margin: 10px 0 0 10px; padding: 0; background: #fff; color: #000; font-size: 180%; }
.line_contact h3 img{height: 1.2em;}
.line_contact p.qrtxt{float: none; width: auto; margin-top:0;  padding-top: 0;}
.line_contact p.qrtxt img{width: 100%;}
.line_contact p.qr img{width: auto;}
.line_contact p.qr{display: none;}

aside.tanoden{width: 94%;}

footer {width: 100%; padding: 10px 0 5px; background: #888; text-align: center; box-shadow: 0px -5px 5px #666;}
footer a {font-size: 120%; color: #FFF;}

small{color: #fff; font-weight: normal;}


}

/*--------------------------------------------------------------
2.2 mobile
--------------------------------------------------------------*/

@media (max-width: 599px) {

.mob{display: inline;}
.tab{display: none;}
.pc{display: none;}

header{padding: 1%; line-height: 1.6; font-size: 14px;}
header p{font-size: 12px;}
h1 {color: #fff; margin-top: 0.8em; text-align: center; font-size: 120%; line-height: 1.2;}
h1 img {width: 60%;}
p.crafteriaux{ margin: 1%; width: 20%;  height: 1em;}
p.crafteriaux img{width: 100%;}

main{ min-height:60vh;}
main article{width: 94%; padding: 1% 1% 3%;}
main article section.searchNavi{font-size: 100%;}

header nav.search{display:block;}
header nav.search p{width: 100%; height: auto; line-height: auto; margin-right: 0; text-align: center; font-size: 100% }
header form{width: 100%; text-align: center;}
header input{ width: 70%; height: 1.4em;}
header button{ padding: 2px 5px; color: #08f; background: #fff; font-size: 90%;}
header button:hover{opacity: 0.9;}

main input{ width: 75%; height: 1.5em;}
main button{ width: 15%; font-size: 100%; text-indent: 0; letter-spacing: 0;}

h2{padding: 3% 2%; color: #fff; font-size: 140%;}
h3{font-size: 100%;}
.retop{margin: 1vw 0 4vw; width: 95%; font-size: 90%}

nav.home_nav ul{margin-bottom: 2%;}
nav.home_nav ul li{margin: 1% auto 0; width: 30%;}
nav.home_nav ul li a{padding: 5% 0; background: #fff; border-radius: 10px;  font-size: 90%; line-height: 1.2; }

nav.home_nav p{width: 20%;}

ul.category li{width: 90%; margin: 2% auto;}
ul.category li h3{font-size: 160%;;}
ul.category li a{display: block; width: 80%;padding: 5px; font-size: 120%; color: #fff; background: #08f; font-weight: 600; letter-spacing: 0em;}

section.menu ul{width: 100%;}
section.menu li{width: 47.8%; }
section.menu li:nth-child(4n){border-right-width: 1px; border-right-style: solid;}
section.menu li:nth-child(2n){border-right:none;}
section.menu li a{font-size: 90%;}
section.menu li img{height: 22vw; }

div.item-image{display: block;}
div.item-image div.item-info{width: 100%; margin: 0 auto;}
div.item-image h3{width: 80%; margin: 0 auto; text-align: center;}
div.item-image div.item-info p{margin-top: 10px;}
div.item-image table{width: 98%; margin: 1% auto; font-size: 90%;}
div.item-image th,td {padding: 5px;}
div.item-image tr:nth-child(2n+1){background: #bdf;}
div.item-image td{line-height: 1.1;}
div.item-image td img {max-height: 40px; margin: 0;}

.calendar div.calendarData{display: flex; flex-wrap: wrap;}
.calendar table{width: 47%; margin: 0 1% 5%;}
.calendar table th,.calendar table td{padding: 5px 1px; font-size: 80%;}

.line_contact h3{margin: 10px 0 0 10px; padding: 0; background: #fff; color: #000; font-size: 110%; }
.line_contact h3 img{height: 1.1em;}
.line_contact p.qrtxt{float: none; width: auto; margin-top:0;  padding-top: 0;}
.line_contact p.qrtxt img{width: 100%;}
.line_contact p.qr{display: none;}

aside.tanoden{width: 85%; margin: 10px auto 20px;}
aside.tanoden img{width: 100%; margin: 0 auto 3px; box-shadow: 1px 3px 3px #333;}
aside.tanoden img:hover{opacity: 0.8; margin: 2px auto 1px; box-shadow: 1px 1px 1px #333;}

aside.tanoden{width: 98%;}

footer {padding: 5px 0 60px; text-align: center;}
footer a {color: #fff; text-decoration: none;}

small{color: #fff; font-weight: normal;}

}