@charset "utf-8";
/* CSS Document */
html{scroll-padding-top: 50px;}
body {font-size: 16px;letter-spacing: 0.05rem;}
h2 {margin: 0 auto;max-width: 335px;}
.content {max-width: 1008px;width: 96%;margin: 0 auto;}
a:hover {cursor: pointer;}
a {color: inherit;text-decoration: none;}
.br600, .br950{display: none;}
h4 {text-align: center;font-size: 1.4rem;}
section {padding: 5rem 0;}

/*bg*/
header{position: relative;z-index:3;}
h2, p{position: relative;z-index:1;}
#global-nav .inner { z-index: 3;}
.global-item a {font-family: "vdl-logog", sans-serif;font-weight: 400;font-style: normal;}
/*gaiyo*/
#gaiyo {padding: 5rem 0; background: url('../img/dot-bg.png'),#E0433E;background-size: cover;}
#gaiyo .content {display: flex; max-width: 800px;}
#gaiyo p {/*border-image: url("../img/bubble.png") 100 fill/100px / 0px round; /*background:url("../img/bubble.png") no-repeat;*/ text-align: center;background-size: contain; padding: 5rem;border-image: url('../img/bubble.webp') 100 fill / 42px/21px;font-family: "vdl-logog", sans-serif;font-weight: 400;font-style: normal; max-width: 514px;}
#gaiyo h2 {margin-right: -56px;z-index: 2;max-width: 341px}

/*schedule*/
#schedule {padding: 5rem 0; position: relative;}
#schedule h2 {margin-bottom: 3rem;max-width: 323px}
#schedule .content {z-index: 2;position: relative;}
.dot-blue1 {position: absolute; top: 0; left: 0;transform: rotate(180deg); max-width: 30%;}
.dot-blue2 {position: absolute; bottom: 0; right: 0;max-width: 30%;} 
.dl1 { height: 8.5rem;display: flex; border: #BE2E77 solid 5px;margin-bottom:2rem;}
.place{align-content: center;background: #BE2E77; color: #fff; width: 30%;font-size: 1.6rem;text-align: center;padding: 0.5rem;}
.place span {font-size: 1rem;display: inline-block;}
.date {align-content: center;color: #E0433E;padding-left: 2rem;}
.date span {font-size: 1.3rem;}
.dl1 dd {width: 70%;}
.dl2 {display: flex; height: 50%;}
.sche {align-content: center;border-right: #BE2E77 solid 6px;  display: inline-block; margin-left: 10px;  position: relative; transform: skewX(-30deg);}
.sche span {display: inline-block; padding: 5px 10px; transform: skewX(30deg); width: 100px;}
.dl1 i {color: #D3433C; font-size: 1.1rem;}
.dl1 ul { margin-right: -0.1px;display: flex; justify-content: space-between;height: 50%;background: #BE2E77;/*border-top: 5px solid #BE2E77;*/align-items: center;padding-top: 5px;}
.dl1 li {font-size: 1rem; width: calc(98%/3); text-align: center;align-content: center;font-weight: bold;}
.dl1 li:hover{filter: brightness(1.10); }
.dl1 li:first-child{/*border-image: url("../img/bg-blue.webp") 100 fill / 100px / 0px ;*/background: url("../img/blue.png")  no-repeat center / cover;color: #050505;height: 60px;border: 4px solid #000;}
.dl1 li:nth-child(2){/*border-image: url("../img/dot-red.webp") 90 fill / 100px / 0px ;*/background: url("../img/red.png")  no-repeat center / cover;color: #fff;height: 60px;border: 4px solid #000;}
.dl1 li:last-child{/*border-image: url("../img/dot-yel.webp") 91 fill / 100px / 0px ; */background: url("../img/yel.png")  no-repeat center / cover;margin-right: -0.1px;color: #050505;text-shadow: 0px 0px 7px #fff;height: 60px;border: 4px solid #000;}
.dl1 li a {display: block; align-content: center; /*height: 100%;*/padding-top: 1rem;padding-bottom: 1rem;}
/*online shop*/
#online {background: #000; padding: 0;}
#online h2 {max-width: 210px; margin-bottom: 3rem;}
#online .content {position: relative;color: #fff; max-width: 680px;}
#online dl {display: flex;align-items: center; height: 4rem;}
#online dt {width: 24%;text-align: center;margin-right: 2rem; align-content: center;border-right: #000 solid 6px;  display: inline-block; margin-left: 10px;  position: relative; transform: skewX(-30deg); height: 100%;}
#online dd { width: 62%; text-align: -webkit-center;}
#online dt span {display: inline-block; padding: 5px 10px; transform: skewX(30deg);}
#online ul:first-of-type {font-size: 0.9rem;text-indent: -1em; padding-left: 1em;margin: 2rem 0;}
#online ul:last-of-type {font-size: 0.9rem;text-indent: -1em; padding-left: 1em; margin-top: 2rem;}
#online dl{background: #fff; color: #000;margin-bottom: 2rem;}
.date2 {font-size: 1.3rem;}
.redbar{padding: 5rem 0;margin: 0 7rem; border-right: #C7051F 90px solid;  border-left: #C7051F 90px solid;}
#online p {color: #fff; text-align: center; font-size: 1.3rem;margin: 0 auto 1rem;max-width: 30rem;width: 100%;}
#online .toy-p {border-bottom: 4px solid #D72229; font-weight:700;}
.toy {color: #D72229; text-shadow:
#FFF 1px 1px 0, #FFF -1px -1px 0,/*右下、左上*/
        #FFF -1px 1px 0, #FFF 1px -1px 0,/*右上、左下*/
        #FFF 0px 1px 0, #FFF  0-1px 0,/*右、左*/
        #FFF -1px 0 0, #FFF 1px 0 0;/*上、下*/}
/*X*/
#X h2 {max-width: 223px;}
#X .content {display: flex; max-width: 800px; text-align: center;align-items: center;}
#X .content div {margin-right: 3rem;}
#X {position: relative;}
#X p {font-size: 1.4rem;}
#X a img {max-width: 400px;margin-top: 1rem;}
.dot-gray {position: absolute; bottom: 0; left: 0;transform: rotate(180deg);max-width: 25%;}
.dot-gray2 {position: absolute; top: 0; right: 0; max-width: 25%;}
/*tokuten*/
#tokuten {background: #000;padding:0;}
.red1 {left: -16%;position: absolute;  top: 0; transform: scale(-1, 1);}
.red2 {right: -16%; position: absolute;  top: 0;}
#tokuten .content {color: #fff; padding: 5rem;background: #E02228;position: relative;}
#tokuten h2 {max-width: 288px; margin-bottom: 3rem;}
#tokuten p {text-align: center; font-family: "vdl-logog", sans-serif;font-weight: 400;font-style: normal;}
#tokuten span {font-size: 1.4rem;}
#tokuten li {text-indent: -1em; padding-left: 1em;}
.toku-img {  position: relative;border: solid 2rem #E5C26A;outline: solid 2rem #000; outline-offset: -26px; max-width: 720px;margin: 3rem auto;}
.toku-img img {max-height: 400px;}
#tokuten ul {max-width:720px;margin: 0 auto;font-size: 0.9rem;}
/*items*/
#items {position: relative;background:url('../img/dot-bg.png'), #72C9DD;background-size: contain;}
#items h2 {max-width: 218px;margin-bottom: 3rem;}
#items .content {background: #fff; max-width: 1100px;}
#items ul {padding: 3rem; display: flex; justify-content: space-between;flex-wrap: wrap;max-width: 96%;  margin: 0 auto;z-index: 1; position: relative;}
#items li {width: calc(93%/4);text-align: center;padding: 1rem 0rem;}
/*#items li:last-child{margin-right: 26%;}*/
#items li div { margin-top: 0.5rem;}
.condition {font-size: 0.75rem;background: #E12F35;color: #fff; padding: 0.3rem; margin-bottom: 0.5rem;}
.condition span{font-size: 0.85rem;}
.itemname1 {line-height: 1rem; font-size: 0.85rem;padding-bottom: 0.5rem;height: 3rem;font-family: "vdl-logog", sans-serif;font-weight: 400;font-style: normal;}
.prices1 {font-size: 0.9rem;line-height: 1.1rem;color: #E02228;font-weight: 700;}
.name {font-size: 0.7rem;}
.prices1 span{font-size: 0.65rem; font-weight: normal;}
.prices1 small{font-weight: normal;}
.prices1 small:last-child {color: #000;padding-left: 0.3rem;}

.new {position: relative;margin-top:0 !important;}
.new span {position: absolute;background-color: #E12F35; color:#fff;border-radius:50%; top: -5px; left: -15px;width: 65px; height: 40px; transform: rotate(-20deg);line-height: 1.1rem; display: flex; align-items: center;  justify-content: center;z-index: 2;font-size: 0.8rem;}

/*attention*/
#attention {padding: 5rem 0;background:#E02228;color: #fff;}
#attention .content {max-width: 800px;width: 96%;}
#attention h2 {max-width: 236px; margin-bottom: 3rem;}
#attention ul {padding: 0 1rem; z-index: 2;margin: 0 auto;font-size: 0.9rem;}
#attention li {text-indent: -1em; padding-left: 1em;}
#attention p {text-align: center; margin-top: 3rem;  font-size: 0.9rem;}
.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: #C7051F; border: #C7051F 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:#000;padding: 1rem 0;}

@media screen and (max-width:1100px) {
	.redbar {margin: 0 2rem;border-right: #C7051F 70px solid; border-left: #C7051F 70px solid;}
}
@media screen and (max-width:950px) {
	.br950 {display: block;}
	#items li {width:calc(98%/2);}
	.place {width: 25%;font-size: 1.4rem;}
	.dl1 dd {width: 75%}
	.redbar {margin: 0 1rem;border-right: #C7051F 50px solid; border-left: #C7051F 50px solid;}
}
@media screen and (max-width:850px) {
	.dl1 {flex-direction: column;height: inherit; border: none;align-items: center;background: #BE2E77;max-width: 80%;margin: 0 auto 2rem;padding-bottom: 1rem;}
	.dl1 dd{width: 95%;}
	.br950 {display: none;}
	.place {width: 50%;padding-top: 1rem;}
	.dl2 {background: #fff;}
	.dl1 li {height: 3.3rem;}
	#X .content {flex-direction: column;}
	#X .content div {margin-right: 0;}
	#X h2 {margin-bottom: 2rem;}
	/*.dl1 li:first-child{border-image: url(../img/bg-blue.webp) 87 fill / 100px / 0px;}
	.dl1 li:nth-child(2){ border-image: url(../img/dot-red.webp) 87 fill / 100px / 0px;}
	.dl1 li:last-child{border-image: url(../img/dot-yel.webp) 87 fill / 100px / 0px;}*/
	.small850 a{font-size: 0.8rem;}
}
@media screen and (max-width:750px){
	html{scroll-padding-top: 50px;}
	#gaiyo p{padding: 5rem 2rem;border-image: url("../img/bubble.webp") 100 fill / 42px / 31px;}
}
@media screen and (max-width:700px){
	#gaiyo {padding: 4rem 0 5rem 0;}
	#gaiyo .content {flex-direction: column;}
	#gaiyo h2 {margin-left: 2rem;max-width:300px;}
	#gaiyo p {margin-left: auto;align-self: self-end; margin-right: 4rem;margin-top: -3rem;}
	#schedule h2 {max-width: 290px;}
	#X h2 {max-width: 180px;}
	#tokuten h2 {max-width: 250px;}
	#items h2 {max-width: 189px;}
	#attention h2 {max-width: 199px;}
	.dl1 {max-width: 95%;}
	.dot-blue1, .dot-blue2 {max-width: 45%;}
	#tokuten .content{padding: 5rem 1rem;}
	#items ul {padding: 3rem 0;}
	
}
@media screen and (max-width:680px){
	.top2 a {font-size: 0.62rem!important;}
	.top1 {max-width: 65px;}
	.top1 i {font-size: 1.5rem;}
	.redbar {margin: 0 0.3rem;border-right: #C7051F 8px solid; border-left: #C7051F 8px solid;}
}

@media screen and (max-width:600px){
	.br600{display: block;}
	body {	font-size: 14px;}
	.dl1 ul{flex-direction: column;align-items: center;}
	.dl1 li {margin-bottom: 0.5rem;width: 50%;}
	.dl2 { max-width: 65%;margin: 0 auto;}
	.place{width: 100%;}
	.sche span {width: 85px;}
	.sche, #online dt {margin-left: 0;}
	#online dt {width: 25%;margin-right: 0;}
	#online dd {width: 70%;}
	.date2, .date span {font-size: 1.1rem;}
	#online ul, #tokuten ul,#attention ul, #attention p{font-size: 0.85rem!important;}
	.dl1 ul {margin-top: 0.5rem;}
	.small850 a{font-size: 1rem;}
	#X p{font-size: 1.125rem;}
	#online p {max-width: 18rem;}
	
}
@media screen and (max-width:550px){
	#gaiyo p{margin-right: 2rem; margin-top: -2rem;}
	#gaiyo h2{margin-left: 0;}
	.dl2 {max-width: 75%;}
	.dl1 li {width: 57%;}
}
@media screen and (max-width:500px){
	.dl1 li {height: 4.3rem;}
	.dl2 {height: 4rem;}

}
@media screen and (max-width:460px){
	html{scroll-padding-top: 80px;}
	footer {font-size: 0.6rem;}
	body {font-size: 13px;}
	#gaiyo p{margin-right: 0; margin-top: -1rem;}
	.dl2 {max-width:80%;}
	.dl1 li{width: 80%;}
	#online dd {width: 76%;}
	#online dt span {padding: 5px 0;}
	#gaiyo h2 {max-width:220px;bottom: -2rem;}
	#schedule h2 {max-width: 200px;}
	#online h2 {max-width: 175px;}
	#X h2 {max-width: 140px;}
	#tokuten h2 {max-width: 180px;}
	#items h2 {max-width: 150px;}
	#attention h2 {max-width: 150px;}
	/*.dl1 li:nth-child(2){ border-image: url(../img/dot-red.webp) 91 fill / 100px / 0px;}
	.dl1 li:last-child{border-image: url(../img/dot-yel.webp) 91 fill / 100px / 0px;}*/
	#X a img{width: 85%;margin: 0 auto;}
	#X p{padding-bottom: 1rem;}


}
@media screen and (max-width:420px){
	.dl2 {max-width:100%;}
	.dl1 li{width: 100%;}
	.dl1 li {height: 4.4rem;}
	.dl2 {height: 4.1rem;}
	.letter-spacing{letter-spacing: -0.03rem;}
	
}

.syuryo{position: relative;}

.syuryo .syuryo-img {
    position: absolute;
    line-height: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    max-width: 170px;
    transform: rotate(7deg);
	top: 25%;
	left: 18%;
}
dd.syuryo .syuryo-img{top: -16%;left: 26%;}

@media screen and (max-width:950px) {
	.syuryo .syuryo-img {max-width: 140px;}
	
}
@media screen and (max-width:850px) {
	.syuryo .syuryo-img {left: 25%;}
	.syuryo .syuryo-img.umeda-img{top: 0;}
	
}
@media screen and (max-width:600px) {
	.syuryo .syuryo-img {left: 34%;}
	
}
@media screen and (max-width:420px) {
	.syuryo .syuryo-img {left: 30%;}
	
}