@charset "utf-8";
/* CSS Document */
html{scroll-padding-top: 50px;}
body {font-size: 16px;letter-spacing: 0.05rem;}
.f1 {font-size: 1.3rem; line-height: 2.2rem;}
.f2 {font-size: 1.1rem;}
.f3 {font-size: 1.4rem;}
.fc {text-align: center;}
h2 {margin: 0 auto;max-width: 435px;margin-bottom: 1.5rem;}
.content {max-width: 1100px;width: 96%;margin: 0 auto;}
a:hover {cursor: pointer;}
a {color: inherit;text-decoration: none;}
.br600, .br400{display: none;}
h3 {margin: 0 auto; margin-bottom: 1.5rem; text-align: center;color: #182889; font-size: 2.5rem; text-shadow: 3px 3px 2px #fff, -3px -3px 2px #fff,  -3px 3px 2px #fff, 3px -3px 2px #fff, 3px 0px 2px #fff, -3px -0px 2px #fff, 0px 3px 2px #fff, 0px -3px 2px #fff;}
h4 {text-align: center;font-size: 1.4rem;}
article {background: #182889;}
section {padding: 5rem 0;}
.pink {color: #D6739E;}
.br1100, .br770{display: none;}

/*bg*/
header{position: relative;z-index:3;}
h2, p{position: relative;z-index:1;}
#global-nav .inner { z-index: 3;}

/*gaiyo*/
#gaiyo {background: url("../img/denim.webp") repeat;background-size: contain;padding: 3rem 0 5rem; color: #fff;}
.order-toku {/*border-image: url("../img/Orderbenefits_back.webp") 100 fill / 100px / 0px round;*/ background: #19288957; padding: 6rem 8rem; position: relative; margin-top: 2rem;}
.menu{margin-bottom: 5rem;padding: 4rem 6rem;}
.present {position: absolute;top: -2%; left: 5%;}
.present img {max-width: 85%}
#gaiyo p {text-align: center; font-weight: bold;}
.order-toku div:last-of-type {margin-top: 2rem;}

/*schedule*/
#schedule {padding: 3rem 0 5rem;}
#schedule .fb {text-align: center; padding: 2rem 0;font-size: 1.2rem; line-height: 1.9rem;}
#schedule a {text-decoration: none;}
.how-to {background: rgba(255,255,255,0.80);color:#192889;padding: 3rem 6rem; font-weight: bold; margin-top: 2rem;}
.how-to dd {padding-bottom: 0.3rem;}
.how-to dl:first-of-type {margin-top: 2rem;}
#schedule dl:first-of-type {margin-bottom: 1.5rem; }
#schedule dl {margin-right: 6rem; margin-left: 6rem;align-items: center;}
#schedule p {margin-top: 2rem; line-height: 1.8rem;}
#schedule ul { margin-top: 2rem; line-height: 1.8rem;text-indent: -1em; padding-left: 1em;}
.dl1 {display: flex; font-weight: bold;}
.dl1 dt {color: #192889; background-color: #fff;width: 13%; text-align: center;
 margin-right: 2rem;height: 2.5rem;  /*align-self: self-end;*/ align-content: center;}
.dl1 dd {color: #fff;}
.date {font-size: 2.1rem;}
/*onlineshop*/
#online {background: url("../img/tile.webp") repeat;background-size: contain; }
.online22 {max-width: 480px; margin: 0 auto;padding: 2rem 0;}
#online .content {padding: 3rem 6rem; background-color: rgba(255, 255, 255, 0.80);color: #192889; font-weight: bold;position: relative;}
#online dl {display: flex;align-items: center;}
#online dt {color: #fff; background: #192889;height: 2.5rem;  align-self: self-end;width: 15%;text-align: center;margin-right: 2rem; align-content: center;}
#online ul {text-indent: -1em; padding-left: 1em;line-height: 1.8rem;margin: 2rem 0;}
#online p {margin-top: 1rem;}
#online dl:first-of-type {margin-bottom: 1.5rem;}
/*X*/
#X {text-align: center; color: #fff; font-weight: bold; background: url("../img/denim.webp") repeat;background-size: contain;}
#X p{font-size: 1.8rem;padding-bottom: 1.8rem;}
#X p:last-of-type {padding-bottom: 0;}
/*tokuten*/
.wood {border-image: url(../img/_grain.webp) 100 fill / 100px / 0px round;  margin: 0 5rem; padding: 5rem;max-width: 96%;}
#tokuten .content {padding: 4rem 6rem; background-color: rgba(255, 255, 255, 0.80);width: 100%;position: relative;font-weight: bold;color: #192889; border-radius: 20px;}
#tokuten h2 {max-width: 200px;}
#tokuten p {text-align: center; font-size: 1.8rem;}
.bg-wh {color: #fff; background-color:#192889;padding: 0.1rem 3rem;}
#tokuten li {text-indent: -1em; padding-left: 1em;line-height: 1.8rem;}
.toku-img {margin: 2rem 0;}
#tokuten .present {position: absolute;top: -6%; left: 5%;}
/*items*/
#items {position: relative; padding-top: 0;}
.foot1 {position: absolute;max-width: 80px; top:10%; left: 2%;}
.foot2 {position: absolute;max-width: 80px; top:14%; left: 3%; transform: rotateZ(-45deg);}
.foot3 {position: absolute;max-width: 80px; top:18%; left: 2%;}
.foot4 {position: absolute;max-width: 80px; top:32%; right: 2%;}
.foot5 {position: absolute;max-width: 80px; top:36%; right: 3%;transform: rotateZ(-45deg);}
.foot6 {position: absolute;max-width: 80px; top:40%; right: 2%;}
.foot7 {position: absolute;max-width: 80px; top:62%; left: 2%;}
.foot8 {position: absolute;max-width: 80px; top:66%; left: 3%;transform: rotateZ(-45deg);}
.foot9 {position: absolute;max-width: 80px; top:70%; left: 2%;}
.foot10 {position: absolute;max-width: 80px; top:87%; right: 2%;}
.foot11 {position: absolute;max-width: 80px; top:91%; right: 3%;transform: rotateZ(-45deg);}
.foot12 {position: absolute;max-width: 80px; top:95%; right: 2%;}
#items ul {display: flex; justify-content: space-between;flex-wrap: wrap;max-width: 96%;  margin: 0 auto;z-index: 1; position: relative;}
#items li {width: calc(96%/4);text-align: center;padding: 1rem 0rem;}
#items li:last-child{ margin-right: 50.6%;}
#items li div {background: #AA8346; color: #fff; font-weight: bold;margin-top: 0.5rem;}
.condition {font-size: 0.7rem;}
.term1 {font-size: 0.8rem; border-bottom: #fff 1px solid; padding-bottom: 0.5rem; margin-bottom: 0.5rem; padding-top: 0.5rem; max-width: 96%;  margin: 0 auto 0.5rem;}
.itemname1 {line-height: 1rem; font-size: 0.8rem;padding-bottom: 0.5rem;height: 2.5rem;}
.itemname1-add{height: 3.7rem;}
.prices1 {font-size: 0.9rem;line-height: 1.1rem; padding-bottom: 0.5rem;height: 2.8rem;align-content: flex-end;}
.prices1 span{font-size: 0.65rem; font-weight: normal;}
.prices1 small{font-weight: normal;}
.itemname1 span.onsale{color: #fff;background:#ab0300;font-size: 0.8rem;padding: 0 1rem;font-weight: bold;line-height: 1.3rem;}

/*attention*/
#attention {padding: 3rem 0; background: url("../img/tile.webp") repeat;background-size: contain;}
#attention .content { padding: 3rem 6rem;  background-color: rgba(255, 255, 255, 0.80); position: relative;}
.ribbon {position: absolute; top: -7%;width: 108%; left: 50%;transform: translate(-50%, 0px);}
#attention ul {z-index: 2;margin: 0 auto;line-height: 1.5rem;font-size: 0.9rem;color: #182889;font-weight: bold;}
#attention li {text-indent: -1em; padding-left: 1em;line-height: 1.8rem;}
.top1 {position: fixed; bottom: 7%; max-width: 90px; right: 3%; z-index:6;}
.top2 {width: 100%;max-width: 1800px;margin-right: auto;margin-left: 0px;display: block;}
.top2 a {float: right; color: #182889; border: #182889 solid 3px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); padding: 10px;}
.top2 span {display: block;}
.top1 i {font-size: 2rem;}

/*footer*/
main{position: relative;}
footer {z-index: 5;color: #fff; font-size: 0.7rem;}
.copyright {background:#182889;padding: 1rem 0;}

@media screen and (max-width:1200px) {
	.dl1 dt {width: 17%;}
	#online dt{width: 20%;}
}
@media screen and (max-width:1100px) {
	.br1100{display: block;}
	#online dt{height: 67px;}
	#tokuten p{font-size: 1.5rem;}
	#tokuten .content {padding: 4rem 3rem;}

}
@media screen and (max-width:950px) {
	#items li {width:calc(98%/2);}
	#items li:last-child {margin-right: 0;}
	.order-toku {padding: 6rem 4rem;}
	.menu{margin-bottom: 5rem;padding: 3rem 4rem;}
	.how-to, #online .content,#attention .content {padding: 3rem 3rem;}
	#schedule dl {margin-right: 1rem;margin-left: 1rem;}
	.wood {padding: 2rem;margin: 0 2rem;}
	#tokuten .content{padding: 4rem 2rem;}
	.foot1, .foot2,.foto3,.foot4,.foot5,.foot6,.foot7,.foot8,.foot9,.foot10,.foot11,.foot12 {max-width: 60px;}
	.foot1 {top:5%; left: -1%;}
	.foot2 {top:6%; left: 0%; transform: rotateZ(-45deg);}
	.foot3 { top:7%; left: -1%;}
	.foot4 { top:20%; right: -1%;}
	.foot5 { top:21%; right: 0%;transform: rotateZ(-45deg);}
	.foot6 { top:22%; right: -1%;}
	.foot7 {top:55%; left: -1%;}
	.foot8 {top:56%; left: 0%;transform: rotateZ(-45deg);}
	.foot9 { top:57%; left: -1%;}
	.foot10 { top:80%; right: -1%;}
	.foot11 { top:81%; right: 0%;transform: rotateZ(-45deg);}
	.foot12 { top:82%; right: -1%;}
}
@media screen and (max-width:870px) {
	#X p, #tokuten p {font-size: 1.5rem;}
	.present img {max-width: 75%;}
	h2 {max-width: 335px; margin-bottom: 1rem;}
	#tokuten h2 {max-width: 160px;}
	.f1 {font-size: 1.2rem;}
	.f2{font-size: 1.05rem;}
	.f3 {font-size: 1.3rem}
	h3 {font-size: 2.2rem}
	.date {font-size: 1.8rem;}
	#tokuten p {font-size: 1.5rem;}
	.bg-wh {padding: 0.1rem 1.5rem;}
	#schedule ul,#online ul, #online p,#tokuten li, #attention li {font-size: 0.9rem;line-height: 1.7rem;}
	#schedule p {line-height: 1.7rem;}
	#schedule dl {margin-right: 0rem;margin-left: 0rem;}
	.present img {max-width: 60%;}
	.present {left: 0%!important;}
}
@media screen and (max-width:770px) {
	#schedule dl,#online dl {flex-direction: column;}
	#online dt, .dl1 dt {align-self: center; margin-bottom: 1rem; margin-right: 0; width: 160px;}
	.dl1 dd {align-self: center; text-align: -webkit-center;}
	.br770{display: block;}
	#online dt{height: 2.5rem;}
}
@media screen and (max-width:750px){
	html{scroll-padding-top: 50px;}
}
@media screen and (max-width:680px){
	.top2 a {font-size: 0.62rem!important;}
	#gaiyo, #schedule {padding: 2rem 0 4rem;}
	#online, #tokuten {padding: 4rem 0;}
	#X{padding: 3rem 0 4rem;}
	.order-toku {padding: 5rem 2rem;}
	.menu{margin-bottom: 5rem;padding: 3rem 2rem;}
	.how-to, #online .content,#attention .content {padding: 3rem 1rem;}
	.wood {padding: 2rem;margin: 0 0.5rem;}
	#tokuten .content{padding: 4rem 0.5rem;}
}
@media screen and (max-width:650px){
	.top1 {max-width: 65px;}
	.present {left: -4%!important;}
	.present img {max-width: 50%;}
	.top1 i {font-size: 1.5rem;}
}
@media screen and (max-width:600px){
	body {	font-size: 14px;}
	.br600 {display: block;}
	.f1 {font-size: 1.05rem;line-height: 1.8rem;}
	.f2{font-size: 0.95rem;}
	.f3 {font-size: 1.1rem}
	h3 {font-size: 1.9rem}
	#X p, #tokuten p {font-size: 1.1rem;}
	.date {font-size: 1.4rem;}
	#schedule ul,#online ul, #online p,#tokuten li, #attention li {font-size: 0.81rem;line-height: 1.5rem;}
	.how-to, #online .content,#attention .content {padding: 3rem 0.5rem;}
	.wood {padding: 2rem 0.5rem;margin: 0 0.5rem;}
	#tokuten .content{padding: 4rem 0.5rem;}
	#items ul {max-width: 100%;}
}
@media screen and (max-width:460px){
	.br400 {display: block;}
	html{scroll-padding-top: 80px;}
	footer {font-size: 0.6rem;}
	body {font-size: 13px;}
	.f1 {font-size: 1.05rem;line-height: 1.7rem;}
	.f2{font-size: 0.95rem;}
	h3 {font-size: 1.9rem}
	#X p, #tokuten p {font-size: 1.1rem;}
	.date {font-size: 1.4rem;}
	.bg-wh {padding: 0.1rem 0.4rem;}
	#tokuten .present {top: -3%;}
	#items ul {font-size: 0.76}
	#items .content {width: 98%;}
	#items li{ width: calc(99% / 2);}
	.ribbon {top: -2%;}
	h2 {max-width: 300px; margin-bottom: 1rem;}
	#tokuten h2 {max-width: 140px;}

}