@charset "utf-8";
/* ヘッダー */
header {
	position: relative;
	margin: 0 auto;
	display: block;
	width: 100%;
}
header #keyvisual {
	position: relative;
	margin: 0 auto;
	display: block;
	background-image: url("../img/main.jpg");
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: cover;
	width: 100%;
	padding-top: 141.25%;
}

/* kikan */
#kikan {
	position: relative;
	margin: -30px auto -58px auto;
}
#kikan .wave01, #kikan .wave02{
	position: relative;
	margin: 0 auto;
	width: 100%;
	background-image: url("../img/waves3.svg");
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: 625px 100%;
	z-index: 100;
}
#kikan .wave01{
    height: 30px;
	background-position: 50% 0;
	transform: rotate(180deg);
}
#kikan .wave02{
    height:58px;
	background-position: 0 0;
}
#kikan .kikanWrap{
	position: relative;
	margin: 0 auto;
	padding: 40px 0 25px 0;
	background-color: #faeed6;
	width: 100%;
}
#kikan .kikanWrap .ttl{
	position: absolute;
	top:15%;
	left: 50%;
	transform: translateX(-50%);
	width: 30%;
	max-width: 110px;
	z-index: 101;
}
#kikan .kikanWrap .text{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 30px);
	background-color: #ffffff;
	border-radius: 15px;
	padding: 30px 0 20px 0;
	text-align: center;
	color: #0d357b;
	font-weight: 700;
	font-size: min(3.8vw, 100%);
}
#kikan .icon01, #kikan .icon02, #kikan .icon03{
	position: absolute;
	height: 0;
	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: contain;
	z-index: 102;
}
#kikan .icon01{
	right: 0;
	top: -3%;
	width: 15%;
	padding-top: 16.7%;
	background-image: url("../img/bg_kikann01.png");
}
#kikan .icon02{
	left: 0;
	bottom: 45px;
	width: 15.5%;
	padding-top: 15.5%;
	background-image: url("../img/bg_kikan02.png");
}
#kikan .icon03{
	left: 18%;
	top: 50px;
	width: 9.5%;
	padding-top: 9.5%;
	background-image: url("../img/bg_kikann03.png");
}

/* innerWrap */
#innerWrap{position: relative;}
#innerWrap #innerBg{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100vh;
	height: 100dvh;
	min-height: 100%;
	clip-path: inset(0);
	z-index: -4;
}
#innerWrap #innerBg #bg, .chilBg{
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("../img/bg.jpg");
	 background-repeat: no-repeat;
	 background-size: cover;
	 background-position: 50% 0;
}
.contBg{position: relative;}
.chilBg{background-size: 100% auto; background-position: 0 100%; z-index: -1;opacity: 0;}
.chilBg.bgDisp{animation: fadeBg .4s ease-in 0.1s 1 normal forwards;}
.chilBg.bgDispR{animation: fadeRBg .2s ease-in 0s 1 normal forwards;}
@keyframes fadeBg {
	0%{opacity: 0;}
	100% { opacity: 1;}
}
@keyframes fadeRBg {
	0%{opacity: 1;}
	100% { opacity: 0;}
}
#story .chilBg{background-image: url("../img/bg_story.png");}
#howto #howtoBg .chilBg{background-image: url("../img/bg_howto01.png");}
#howto #howtoBg1 .chilBg{background-image: url("../img/bg_howto02.png");}
#event #eventBg .chilBg{background-image: url("../img/bg_event01.png");}
#event #eventBg1 .chilBg{background-image: url("../img/bg_event02.png");}
#release #releaseBg .chilBg{background-image: url("../img/bg_release01.png");}
#release #releaseBg1 .chilBg{background-image: url("../img/bg_release02.png");}
#tokuten .chilBg{background-image: url("../img/bg_tokuten.png");}
#price .chilBg{background-image: url("../img/bg_price.png");}
#kit .chilBg{background-image: url("../img/bg_kit.png");}
#btm .chilBg{background-image: url("../img/bg_faq.png");}

#bgLst{position: relative;}
#bgLst #bgL{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url("../img/bg.jpg"), url("../img/bg01.jpg");
	 background-repeat: no-repeat, repeat-y;
	 background-size: 100% auto, 100% auto;
	 background-position: 50% 0, 0 0;
	z-index: -2;
	opacity: 0;
}
#bgLst #bgL.disp{opacity: 1;}

/* ストーリー */
#story {
	position: relative;
	margin: 0 auto;
	padding-top: 60px;
}
#story h2{
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 640px;
	z-index: 20;
}
#story h2 img{
	position: relative;
	margin: 0 auto;
	transform: translateX(-10px);
}
#story .storyWrap{
	position: relative;
	margin: 0 auto;
	transform: translateY(-80px);
	width: calc(100% - 70px);
	padding: 100px 20px 50px 20px;
	background-color: rgba(255,255,255,0.8);
	box-shadow: 3px 5px 10px -5px rgba(97,82,106,0.4);
}
#story .storyWrap p {
	position: relative;
	margin: 0 auto;
	padding-bottom: 2.2em;
	line-height: 2em;
	text-align: center;
}


/* CM */
#cm{
	position: relative;
	margin: -20px auto 0 auto;
}
#cm .cmBox{
	position: relative;
	margin:0 auto ;
	width: 100%;
	height: auto;
}
#cm .cmBox .thumBg svg, #cm .cmBox .thum .thumIng svg{width: 100%; height: 100%;}
#cm .cmBox .thum{position: relative;}
#cm .cmBox .thum .thumBg{
	position: relative;
	margin: 0 auto;
	width: 100%;
	height :0;
	padding-top: 56.25%;
	background-image: url('../img/cm.svg');
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 100% 100%;
	transform: scale(1.1, 1.1);
}
#cm .cmBox .thum .thumBg{
	filter:drop-shadow(0px 0px 3px rgba(138,101,27,0.37));
}
#cm .cmBox .thum .thumIng{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 0;
	opacity: 0.3;
	transform:  scale(1.1, 1.1);
	padding-top: 56.25%;
	background-image: url('http://i.ytimg.com/vi/NL62aDY6Ozs/maxresdefault.jpg');
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: cover;
}
#cm .cmBox .thum .mBtn{
	position: absolute;
	top:-5px;
	left: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
}
#cm .cmBox .thum .mBtn img{
	position: absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 50%;
	max-width: 110px;
}
.clip {
	-webkit-clip-path:url(#cpath);
	clip-path:url(#cpath);
}

/* バナー */
#banner{
	position: relative;
	margin: 0 auto;
	padding: 40px 0;
}
#banner ul{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 30px);
}
#banner ul li{
	position: relative;
	margin: 0;
	width: 100%;
}

/* 参加方法 */
#howto {
	position: relative;
	margin: 0 auto;
	padding-top: 40px;/* バナーなしの時 */
}
#howto h2{
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 640px;
}
#howto h2 img{
	position: relative;
	margin: 0 auto;
	transform: translateX(-10px);
}
#howto .howtoWrap {
	position: relative;
	margin: 20px auto 0 auto;
	width: 100%;
	max-width: 1200px;
}
#howto .howtoWrap .splide__arrows .splide__arrow--prev {left: 3px;transform: rotate(180deg) translateY(50%);}
#howto .howtoWrap .splide__arrows .splide__arrow--next {right: 3px;}
#howto .howtoWrap .splide__arrow {
	background: transparent;
	border-radius: 0;
	height: 40px;
	width: 40px;
	opacity: 1;
}
#howto .howtoWrap .splide__arrow:disabled {opacity: 0;}

#howto .howtoWrap ul li{
	position: relative;
	margin: 0;
	width: 100%;
	padding-bottom: 10px;
	display: flex;
	align-items: stretch;
}
#howto .howtoWrap .txtWrap {
	position: relative;
	margin: 0 auto;
	width: calc(100% - 80px);
	padding: 20px 0;
	box-sizing: border-box;
	background-color: rgba(255,255,255,0.8);
	box-shadow: 4px 5px 5px 0px rgba(97,82,106,0.4);
}
#howto .howtoWrap .Img {
	position: relative;
	margin: 0 auto;
	width: calc(100% - 20px);
}
#howto .howtoWrap .Txt {
	position: relative;
	margin: 0;
	color: #000000;
	padding: 20px 20px 10px 20px;
	line-height: 1.6em;
}
.iconnuma{
	position: relative;
	margin: 10px auto 5px auto;
	width: 50%;
	max-width: 80px;
}

#howto .cloth{
	position: relative;
	margin: 50px auto 0 auto;
	width: calc(100% - 30px);
	background-color: rgba(255,255,255,0.6);
	box-shadow: 4px 5px 5px 0px rgba(97,82,106,0.4);
}
#howto .cloth::before{
	position: absolute;
	top:10px;
	left: 8px;
	width: 100%;
	height: 100%;
	content: '';
	display: block;
	background-color: rgba(255,255,255,0.6);
	transform: rotate(-1.2deg) translate3d(0, 0, 0);
	box-shadow: 4px 5px 5px 0px rgba(97,82,106,0.4);
}
#howto .cloth h3{
	position: relative;
	margin: 0;
	width: 55%;
	max-width: 368px;
	transform: translate(-8px, -8px);
}
#howto .cloth p{
	position: relative;
	text-align: center;
	padding: 0 10px 40px 10px;
}
#howto .first{
	position: relative;
	margin: 40px auto 0 auto;
	width: calc(100% - 30px);
	max-width: 780px;
}


/* イベント情報 */
#event{
	position: relative;
	margin:  40px auto 0 auto;
}
#event h2{
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 640px;
	z-index: 300;
}
#event h2 img{
	position: relative;
	margin: 0 auto;
	transform: translateX(10px);
}
#event h3{
	position: relative;
	margin: 0 auto 15px auto;
	width: 100%;
	max-width: 540px;
}
#event .eventWrap{
	position: relative;
	margin: -35px auto 0 auto;
	width: calc(100% - 70px);
	padding: 40px 20px;
	background-color: rgba(255,255,255,0.8);
	box-shadow: 4px 5px 5px 0px rgba(97,82,106,0.4);
}
#event ul#play{
	position: relative;
	margin:0 auto 30px auto;
	gap: 30px 20px;
}
#event ul#play li{
	position: relative;
	margin: 0;
	width: calc(50% - 10px);
}
#event ul#play li  img{
	position: relative;
	width: 80%;
	max-width: 130px;
	display: block;
	margin: 0 auto;
}
#event ul#play li p{
	position: relative;
	text-align: center;
	font-size: 90%;
}
#event ul#play li p.ttl{
	padding: 10px 0;
	font-weight: 800;
	font-size: min(3.5vw, 105%);
	line-height: 1.5em;
}
#event ul#play li .cautionWrap p{font-size: 80%;text-align: left;}
.dl{
	position: relative;
	margin: 0 auto 50px auto;
	text-align: center;
}
.dl ul{
	position: relative;
	margin: 15px auto;
	width: 100%;
	gap:10px;
}
.dl ul li{
	position: relative;
	margin: 0;
	width: auto;
}
.dl ul li img{height: 44px;width: auto;}
#precautions dl dd div.dl{padding-top: 20px;width: 100%;}
#precautions dl dd div.dl div{width: 100%;}
#precautions .dl ul{margin: 5px auto;}
#precautions .dl ul li img{height: 40px;width: auto;}
.logonuma{
	position: relative;
	margin: 0 auto 5px auto;
	transform: translateX(-20%);
	width:45%;
	max-width: 160px;
}

#event .map{
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 800px;
}
#event #eventBg1 .cautionWrap{max-width: 800px;}

/* 販売日程 */
#release{
	position: relative;
	margin: 40px auto 0 auto;
}
#release h2{
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 640px;
	z-index: 300;
}
#release h2 img{
	position: relative;
	margin: 0 auto;
	transform: translateX(-10px);
}
#release .releaseWrap{
	position: relative;
	margin: -35px auto 0 auto;
	width: calc(100% - 70px);
	padding: 40px 15px 10px 15px;
	background-color: rgba(255,255,255,0.8);
	box-shadow: 4px 5px 5px 0px rgba(97,82,106,0.4);
}
#release .relBox{
	position: relative;
	margin: 10px auto 40px auto;
	text-align: center;
}
#release .relBox.closed::after{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	content: '';
	background-color: rgba(255,255,255,0.9);
	background-image: url("../img/closed.png");
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: 200px auto;
}
#release .ttl{
	position: relative;
	margin: 0 auto 10px auto;
	padding: 10px 0;
	font-weight: 700;
	line-height: 1em;
	background-color: #22c3eb;
	color: #ffffff;
}
#release p{
	position: relative;
	margin: 0 auto;
	color: #000000;
}
#release .tokuten{
	position: relative;
	padding: 20px 0 5px 0;
	color:#5a92ca;
}
#release .Img{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 50px);
	max-width: 400px;
	border: solid 2px #22c3eb;
}
#release .cautionWrap{margin: 10px auto 0 auto; text-align: left;}
#release .cautionWrap p{font-size: 82%;}
.scraptantei{
	position: relative;
	margin: 15px auto 20px auto;
	font-size: 82%;
	text-align: center;
}
.scraptantei img{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 60px);
	max-width: 320px;
}

/* 料金 */
#price{
	position: relative;
	margin: 40px auto 0 auto;
}
#price h2{
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 640px;
	z-index: 300;
}
#price h2 img{
	position: relative;
	margin: 0 auto;
	transform: translateX(10px);
}
#price .priceWrap{
	position: relative;
	margin: -25px auto 0 auto;
	width: calc(100% - 70px);
	padding: 40px 15px 20px 15px;
	background-color: rgba(255,255,255,0.8);
	box-shadow: 4px 5px 5px 0px rgba(97,82,106,0.4);
	text-align: center;
}
#price .priceBox{
	position: relative;
	margin: 20px auto;
}
#price .ttl{
	position: relative;
	margin: 0 auto 10px auto;
	padding: 10px 0;
	font-weight: 700;
	line-height: 1em;
	background-color: #22c3eb;
	color: #ffffff;
}
#price p{
	position: relative;
	margin: 0 auto;
	color: #000000;
}

/* 特典 */
#tokuten{
	position: relative;
	margin: 40px auto 0 auto;
	padding-bottom: 30px;
	text-align: center;
}
#tokuten h2{
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 640px;
	z-index: 300;
}
#tokuten h2 img{
	position: relative;
	margin: 0 auto -40px auto;
}
#tokuten h3{
	position: relative;
	margin: 0 auto 20px auto;
	font-size: 130%;
	line-height: 1.6em;
	text-shadow: 
    #ffffff 2px 0px,  #ffffff -2px 0px,
    #ffffff 0px -2px, #ffffff 0px 2px,
    #ffffff 2px 2px , #ffffff -2px 2px,
    #ffffff 2px -2px, #ffffff -2px -2px,
    #ffffff 1px 2px,  #ffffff -1px 2px,
    #ffffff 1px -2px, #ffffff -1px -2px,
    #ffffff 2px 1px,  #ffffff -2px 1px,
    #ffffff 2px -1px, #ffffff -2px -1px;
	padding-bottom: 20px;
	background-image: url("../img/bar.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 50% 100%;
}
#tokuten h3 span{font-size: 80%;}
#tokuten .tokutenWrap.tokuten01 h3{color: #23665c;}
#tokuten .tokutenWrap.tokuten02 h3{color: #740f80;}
#tokuten .tokutenWrap.tokuten03 h3{color: #FF6300;}
#tokuten h4{
	position: relative;
	margin: 40px auto 15px auto;
	width: 100%;
	max-width: 540px;
}
#tokuten .Img{
	position: relative;
	margin: 5px auto 0 auto;
	width: 100%;
	max-width: 800px;
}
#tokuten .tokutenImgWrap {
	position: relative;
	margin: 0 auto 5px auto;
	width: calc(100% - 30px);
	max-width: 600px;
}
#tokuten .tokutenImgWrap .splide__arrows .splide__arrow--prev {left: -25px;transform: rotate(180deg) translateY(50%);}
#tokuten .tokutenImgWrap .splide__arrows .splide__arrow--next {right: -25px;}
#tokuten .tokutenImgWrap .splide__arrow {
	background: transparent;
	border-radius: 0;
	height: 30px;
	width: 30px;
	opacity: 1;
}
#tokuten .tokutenImgWrap .splide__arrow:disabled {opacity: 0;}
#tokuten .tokutenBox{
	position: relative;
	margin: 20px auto;
}
#tokuten .tokutenBox .closed{
	position: relative;
	margin: 0 auto;
	opacity: 0.2;
}
#tokuten .tokutenBox .closeTxt{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	content: '';
	background-image: url("../img/closed01.png");
	background-position: 50% 50%;
	background-repeat: no-repeat;
	background-size: 160px auto;
	opacity: 1;
}
#tokuten .tokuten02 .tokutenBox .closeTxt{	background-image: url("../img/closed02.png");}
#tokuten .ttl{
	position: relative;
	margin: 0 auto 10px auto;
	padding: 10px 0;
	font-weight: 700;
	line-height: 1em;
	background-color: #ffffff;
}
#tokuten  .tokutenWrap.tokuten01 .ttl{color: #23665c;}
#tokuten  .tokutenWrap.tokuten02 .ttl{color: #740f80;}
#tokuten .bgSVG{
	position: relative;
	margin: 0 auto;
	height: 30px;
	z-index: 10;
}
#tokuten .bgSVG.topB1{z-index: 7;}
#tokuten .bgSVG.topR{transform: scale(1, -1);}
#tokuten .bgSVG img{
	position: relative;
	width: 100%;
	height: 100%;
	filter: drop-shadow(0px 2px 0px rgba(255,255,255,1)) drop-shadow(0px 1px 0px rgba(255,255,255,1));
}
#tokuten .bgSVG.topB img{filter: drop-shadow(0px 2px 0px rgba(255,255,255,1)) drop-shadow(0px 1px 0px rgba(255,255,255,1))drop-shadow(0px 5px 4px rgba(46,7,74,0.6));}
#tokuten .bgSVG.topB1 img{filter: drop-shadow(0px 2px 0px rgba(255,255,255,1)) drop-shadow(0px 1px 0px rgba(255,255,255,1))drop-shadow(0px 5px 4px rgba(6,56,79,0.4));}
#tokuten .tokutenWrap{
	position: relative;
	margin: 0 auto;
	padding: 25px 15px 30px 15px;
	z-index: 20;
}
#tokuten .tokutenWrap.tokuten01{
	margin: -29px auto 0 auto;
	padding: 60px 15px 30px 15px;
	background: linear-gradient(0deg,#caf98b 0%, #85cca8 100%);
	z-index: 9;
}
#tokuten .tokutenWrap.tokuten02{
	margin: -29px auto 0 auto; 
	padding: 60px 15px 30px 15px;
	z-index: 8;
	background: linear-gradient(0deg,#eedbff 0%, #9664cf 100%);
}
#tokuten .tokutenWrap.tokuten03{background: linear-gradient(0deg,#FFCA9F 0%, #FFA452 100%);z-index: 11;}

#tokuten .cautionWrap{margin: 10px auto 0 auto; text-align: left;}

#tokuten .ticCautionWrap {
	position: relative;
	margin: 20px auto 0 auto;
	width: calc(100% - 30px);
	max-width: 800px;
	background-color: #ffffff;
	padding: 2px;
}
#tokuten .ticCautionInner{
	position: relative;
	margin: 0 auto;
	border: solid 2px #5a92ca;
}
#tokuten .ticCautionWrap .btn_ticCaution {
	position: relative;
	margin: 0 auto;
	color: #5a92ca;
	padding: 8px 0;
}
#tokuten .ticCautionWrap .btn_ticCaution p.arrow{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 50px);
	border-bottom: solid 1px #5a92ca;
}
#tokuten .ticCautionWrap .btn_ticCaution p.shop{
	position: relative;
	margin: 10px auto;
	width: calc(100% - 50px);
	text-align: left;
	font-size: 100%;
}
#tokuten .ticCautionWrap .btn_ticCaution p.shop a{color: #5a92ca;}
#tokuten .ticCautionWrap .btn_ticCaution p.arrow.margin{margin: 20px auto 0 auto;}
#tokuten .ticCautionWrap .btn_ticCaution .cautionWrap{width: calc(100% - 50px);}
#tokuten .ticCautionWrap .btn_ticCaution .cautionWrap div{font-size: 76%;line-height: 1.6em;padding-top: 1em;}
#tokuten .ticCaution {
  position: relative;
  margin: 0 auto;
  font-size: 0.13rem;
  line-height: 1.6em;
  padding: 10px;
  text-align: left;
  display: none;
}
#tokuten .ticCaution p {
	position: relative;
	padding-left: 1.2em;
	padding-bottom: 8px;
	line-height: 1.6em;
	text-align: left;
}
#tokuten .ticCaution p::before {
  position: absolute;
  content: "・";
  left: 0;
}
#tokuten .ticCautionWrap p.ttlC{font-weight: 700; color: #5a92ca;}
#tokuten .cautionWrap.w500{max-width: 600px;}
#tokuten .cautionWrap.w300{max-width: 20em;}

/* 販売 */
#kit {
	position: relative;
	margin: 0 auto;
}
#kit h2{
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 640px;
	z-index: 300;
}
#kit h2 img{
	position: relative;
	margin: 0 auto;
	transform: translateX(-10px);
}
#kit h3{
	position: relative;
	margin: 0 auto 15px auto;
	width: 100%;
	max-width: 540px;
}
#kit .kitWrap{
	position: relative;
	margin: -25px auto 0 auto;
	width: calc(100% - 70px);
	padding: 40px 15px;
	background-color: rgba(255,255,255,0.8);
	box-shadow: 4px 5px 5px 0px rgba(97,82,106,0.4);
	text-align: center;
}
#kit .cautionWrap{margin: 10px auto 40px auto; text-align: left;}
#kit dl{
	position: relative;
	margin: 20px auto 0 auto;
	gap: 15px 10px;
}
#kit dl dt{
	position: relative;
	margin: 0;
	width: 7em;
	background-color: #22c3eb;
	color: #ffffff;
	font-size: 80%;
	border-radius: 5px;
	line-height: 1em;
	padding: 0.5em 0;
}
#kit dl dd{
	position: relative;
	margin: 0;
	width: calc(100% - 7em - 10px);
	text-align: left;
}
#kit .cautionWrap.shop{margin: -10px auto 5px auto; width: calc(100% - 30px);}

#kit .linkArea{
	position: relative;
	margin: 20px auto;
	width: calc(100% - 34px);
	padding: 2px;
	background-color: #35b998;
	border-radius: 100px;
	background-image: url("../img/star.png");
	background-position: 15px calc(100% - 10px);
	background-repeat: no-repeat;
	background-size: 20px auto;
	transition: all 0.3s ease-out;
}
#kit .linkArea:hover{background-color: #8f6bd9;}
#kit .linkArea a{
	position: relative;
	margin: 0 auto;
	padding: 10px 0;
	display: block;
	border: solid 2px #ffffff;
	color: #ffffff;
	border-radius: 100px;
}
#kit .linkArea::after{
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	content: "";
	display: block;
	width: 14px;
	height: 12px;
	background-image: url("../img/arrow01.png");
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: contain;
}
#kit .linkArea.soon{opacity: 0.2;pointer-events: none;}
#kit .linkArea.soon a{pointer-events: none;}
#kit .ticketBtn{
	position: relative;
	margin: 30px auto 0 auto;
}
#kit .ticketBtn ul{
	position: relative;
	margin: 20px auto 0 auto;
	width: calc(100% - 30px);
	gap: 20px 0;
}
#kit .ticketBtn ul li{
	position: relative;
	margin: 0;
	width: 100%;
	font-size: 90%;
}
#kit .ticketBtn ul li img{
	position: relative;
	display: block;
	margin: 0 auto 5px auto;
	width: 70%;
}
#kit .ticketen{
	position: relative;
	margin: 0 auto 40px auto;
}
#kit s{opacity: 0.2;}
#kit .red{color: #EE0956; text-decoration: underline;}

/* FAQ */
#precautions {
  position: relative;
  margin: 0 auto;
  padding: 70px 0 40px 0;
}
#precautions .precautionWrap{
	position: relative;
	margin: 0 auto 21px auto;
	width: calc(100% - 30px);
	max-width: 960px;
	background-color: rgba(11,165,236,0.6);
	outline: 1px solid #ffffff;
	outline-offset: -3px;
}
#precautions .precautionWrap .ttl{
	position: relative;
	margin: 0 auto;
	padding: 0 ;
	text-align: center;
	cursor: pointer;
}
#precautions .precautionWrap .ttl img{
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 580px;
}
#precautions .ttl::after{
	position: absolute;
	top:50%;
	right: 15px;
	content: '';
	display: block;
	transition: all .3s ease-out;
	transform: translateY(-50%);
	height: 14px;
	width: 16px;
	background-image: url("../img/arrow02.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 50% 50%;
}
#precautions .ttl.disp::after{transform: translateY(-50%) rotate(-180deg);}
#precautions .faqWrap{
	position: relative;
	margin: 0 auto;
	padding: 0;
	height: 0;
	overflow: hidden;
	transition: all .3s ease-out;
	z-index: 9;
	color: #ffffff;
}
#precautions .CatTtl{
	position: relative;
	margin: 0 auto;
	padding: 8px 10px;
	width: calc(100% - 45px);
	max-width: 800px;
	background-color: #ffffff;
	text-align: center;
	font-size: 102%;
	font-weight: 700;
	line-height: 1em;
	color: #0E93CB;
}
#precautions .CatTtl.marginTop{margin: 20px auto 0 auto;}
#precautions  #limitlist .CatTtl{margin: 30px auto 0 auto;}
#precautions  #limitlist .CatTtl.margin{margin: 30px auto 10px auto;}
#precautions .faqWrap.disp{height: auto !important;padding: 20px 0; margin: 0 auto; }
#precautions .faqWrap dl{position: relative;}
#precautions .faqWrap dl dd{padding: 15px 0;}
#precautions #faq.faqWrap dl dd{padding: 5px 0 0 0;}
#precautions .faqWrap dl dd p, #precautions .faqWrap dl dd div{
	position: relative;
	width: calc(100% - 45px);
	max-width: 800px;
	margin: 0 auto;
	padding-bottom: .8em;
	text-align: left;
	line-height: 1.5em;
}
#precautions #cautionlist.faqWrap dl dd p, #precautions #faq.faqWrap dl dt p, #precautions #faq.faqWrap dl dd p, #precautions #limitlist dd p, #precautions .attWrap p{padding-left: 1.2em;}
#precautions #cautionlist.faqWrap dl dt{position: relative;}
#precautions #cautionlist.faqWrap dl dt.margin{margin: 20px auto 0 auto;}
#precautions #cautionlist.faqWrap dl dt p{
	position: relative;
	color: #015375;
	border-bottom: solid 1px #015375;
	font-weight: 700;
	text-align: left;
	margin: 0 auto;
	width: calc(100% - 50px);
	max-width: 800px;
	line-height: 1.6em;
}
#precautions #faq.faqWrap dl dt p{
	position: relative;
	color: #015375;
	font-weight: 700;
	text-align: left;
	margin: 0 auto;
	width: calc(100% - 50px);
	max-width: 800px;
	line-height: 1.6em;
}
#precautions #cautionlist.faqWrap dl dd p::before, #precautions #faq.faqWrap dl dt p::before, #precautions #faq.faqWrap dl dd p::before, #precautions #limitlist dd p::before, #precautions .attWrap p::before{
	position: absolute;
	content: '・';
	left: 0;
}
#precautions #faq.faqWrap dl dt p::before{content: 'Q.';}
#precautions #faq.faqWrap dl dd p::before{content: 'A.';}
#precautions .attWrap{margin: 0 auto 10px auto; width: calc(100% - 1.5em) !important;transform: translateX(.5em);}
#precautions .attWrap p::before{content: '※' !important;}
#precautions .attWrap p{font-size: 88% !important;padding-bottom: .2em !important;}

#precautions #limitlist .lead{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 50px);
	max-width: 800px;
}
#precautions  #limitlist dl{margin: 0 auto;width: calc(100% - 20px);}
#precautions a{color: #ffffff;}

#precautions .realdgame{
	position: relative;
	margin: 40px auto 0 auto;
	width: calc(100% - 30px);
}
#precautions #limitlist .lead{margin: 10px auto 5px auto;}

/* about */
#about .btn{
	position: relative;
	margin: 0 auto 21px auto;
	width: calc(100% - 30px);
	max-width: 960px;
	background-color: rgba(8,156,144,0.6);
	outline: 1px solid #ffffff;
	outline-offset: -3px;
}
#about .btn::after{
	position: absolute;
	top:50%;
	right: 15px;
	content: '';
	display: block;
	transition: all .3s ease-out;
	transform: translateY(-50%);
	height: 14px;
	width: 16px;
	background-image: url("../img/arrow02.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: 50% 50%;
}

/* ----- pc ----- */
@media screen and (min-width: 641px) {
	
	/* ヘッダー */
	header #keyvisual {
		background-image: url("../img/main_pc.jpg");
		padding-top: 58.333%;
	}

	/* kikan */
	#kikan {margin: -60px auto -90px auto;}
	#kikan .wave01, #kikan .wave02{background-size: 100% 100%;}
	#kikan .wave01{height: 60px;}
	#kikan .wave02{height:90px;}
	#kikan .kikanWrap{padding: 60px 0 45px 0;}
	#kikan .kikanWrap .ttl{
		top:8%;
		max-width: 200px;
	}
	#kikan .kikanWrap .text{
		max-width: 960px;
		border-radius: 20px;
		padding: 60px 0 35px 0;
		font-size: min(6.8vw, .24rem);
	}
	#kikan .icon01{
		width: 100%;
		max-width: 1100px;
		right: 50%;
		transform: translateX(50%);
		top: 2%;
		padding-top: 96px;
		background-image: url("../img/bg_kikann01_pc.png");
		background-position: 100% 0;
	}
	#kikan .icon02{
		width: 100%;
		max-width: 1100px;
		left: 50%;
		transform: translateX(-50%);
		bottom: 70px;
		padding-top: 92px;
	}
	#kikan .icon03{
		top: 24%;
		width: 60%;
		max-width: 600px;
		left: 50%;
		transform: translateX(-50%);
		padding-top: 55px;
	}

	/* innerWrap */
	#innerWrap #innerBg #bg, .chilBg{background-image: url("../img/bg_pc.jpg");background-position: 50% 100%;}
	#story .chilBg{background-image: url("../img/bg_story_pc.png");}
	#howto #howtoBg .chilBg{background-image: url("../img/bg_howto01_pc.png");}
	#howto #howtoBg1 .chilBg{background-image: url("../img/bg_howto02_pc.png");}
	#event #eventBg .chilBg{background-image: url("../img/bg_event01_pc.png");}
	#event #eventBg1 .chilBg{background-image: url("../img/bg_event02_pc.png");}
	#release #releaseBg .chilBg{background-image: url("../img/bg_release01_pc.png");}
	#release #releaseBg1 .chilBg{background-image: url("../img/bg_release02_pc.png");}
	#tokuten .chilBg{background-image: url("../img/bg_tokuten_pc.png");}
	#price .chilBg{background-image: url("../img/bg_price_pc.png");}
	#kit .chilBg{background-image: url("../img/bg_kit_pc.png");}
	#btm .chilBg{background-image: url("../img/bg_faq_pc.png");}

	#bgLst #bgL{
		background-image: url("../img/bg_pc.jpg"), url("../img/bg01_pc.jpg");
		 background-size: 100% auto, 100% auto;
		 background-position: 50% 0, 0 0;
	}

	/* ストーリー */
	#story h2{max-width: 1100px;}
	#story h2 img{
		margin: 0;
		transform: translateX(0);
		max-width: 640px
	}
	#story .storyWrap{
		transform: translateY(-120px);
		max-width: 960px;
		width: calc(100% - 160px);
		padding: 100px 40px 50px 40px;
	}

	/* CM */
	#cm .cmBox .thum .thumBg{padding-top: 400px;}
	#cm .cmBox .thum .thumIng{padding-top: 400px;}
	#cm .cmBox .thum .mBtn img{max-width: 140px;}

/* バナー */
#banner{
	position: relative;
	margin: 0 auto;
	padding: 40px 0;
}
#banner ul{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 30px);
}
#banner ul li{
	position: relative;
	margin: 0;
	width: 100%;
}

	/* 参加方法 */
	#howto h2{max-width: 1100px;}
	#howto h2 img{
		margin: 0;
		transform: translateX(0);
		max-width: 640px
	}
	#howto .howtoWrap {
		margin: 20px auto 0 auto;
		width: calc(100% - 120px);
		max-width: 1000px;
	}
	#howto .howtoWrap .splide__arrows .splide__arrow--prev {left: -35px;}
	#howto .howtoWrap .splide__arrows .splide__arrow--next {right: -35px;}
	#howto .howtoWrap .splide__arrow {
		height: 50px;
		width: 50px;
	}
	#howto .howtoWrap .txtWrap {
		width: calc(100% - 20px);
		padding: 20px 0;
	}

	#howto .cloth{
		margin: 60px auto 0 auto;
		max-width: 400px;
	}
	#howto .cloth h3{transform: translate(-18px, -18px);}
	#howto .cloth p{padding: 0 10px 60px 10px;}
	#howto .first{
		margin: 70px auto 0 auto;
		max-width: 740px;
	}


	/* イベント情報 */
	#event{margin: 60px auto 0 auto;}
	#event h2{max-width: 1100px;}
	#event h2 img{
		margin: 0 0 0 auto;
		transform: translateX(0);
		max-width: 640px;
	}
	#event .eventWrap{
		margin: -65px auto 0 auto;
		max-width: 960px;
		padding: 60px 0 90px 0;
	}
	#event ul#play{
		margin:0 auto 30px auto;
		width: calc(100% - 160px);
		gap: 0 20px;
	}
	#event ul#play li{width: calc(25% - 15px);}

	.dl{margin: 40px auto 90px auto;}
	.dl ul{margin: 15px auto;}
	.dl ul li img{height: 64px;width: auto;}
	#precautions .dl ul{justify-content: flex-start;}
	#precautions .dl ul li img{height: 60px;width: auto;}


	/* 販売日程 */
	#release{margin:  60px auto 0 auto;}
	#release h2{max-width: 1100px;}
	#release h2 img{
		margin: 0;
		transform: translateX(0);
		max-width: 640px;
	}
	#release .releaseWrap{
		margin: -65px auto 0 auto;
		width: calc(100% - 160px);
		max-width: 960px;
		padding: 60px 0 90px 0;
	}
	#release .relBox{
		margin: 30px auto 60px auto;
		width: calc(100% - 60px);
		max-width: 600px;
	}
	#release .ttl{font-size: 110%;}
	#release .Img{border: solid 4px #22c3eb;}
	#release .cautionWrap{max-width: 430px;}

	/* 料金 */
	#price{margin: 60px auto 0 auto;}
	#price h2{max-width: 1100px;}
	#price h2 img{
		margin: 0 0 0 auto;
		transform: translateX(0);
		max-width: 640px;
	}
	#price .priceWrap{
		margin: -65px auto 0 auto;
		width: calc(100% - 160px);
		max-width: 960px;
		padding: 100px 0 90px 0;
	}
	#price .priceBox{
		margin: 30px auto 0 auto;
		width: calc(100% - 60px);
		max-width: 600px;
	}
	#price .ttl{font-size: 110%;}
	#price .priceWrap .fontSmall{padding-top: 40px;}

	/* 特典 */
	#tokuten{
		margin: 60px auto 0 auto;
		padding-bottom: 30px;
	}
	#tokuten h2 img{margin: 0 auto -80px auto;}
	#tokuten h3{
		margin: 0 auto 40px auto;
		font-size: 150%;
		padding-bottom: 30px;
		background-size: auto auto;
	}
	#tokuten .Img{margin: 15px auto 0 auto;}
	#tokuten .tokutenBox{
		margin: 20px auto 50px auto;
		width: calc(100% - 60px);
		max-width: 600px;
	}
	#tokuten .ttl{font-size: 110%;}
	#tokuten .bgSVG{height:60px;}
	#tokuten .tokutenWrap{padding: 60px 15px 60px 15px;}
	#tokuten .tokutenWrap.tokuten02{
		margin: -60px auto 0 auto; 
		padding: 80px 15px 50px 15px;
	}
	#tokuten .tokutenWrap.tokuten01{
		margin: -60px auto 0 auto; 
		padding: 80px 15px 50px 15px;
	}
	#tokuten .cautionWrap{
		width: calc(100% - 60px);
		max-width: 800px;
	}
	#tokuten .ticCautionWrap {
		margin: 40px auto 0 auto;
		padding: 4px;
	}
	#tokuten .ticCautionWrap .btn_ticCaution {padding: 10px 0;}
	#tokuten .ticCaution {
	  font-size: 0.14rem;
	  line-height: 1.6em;
	  padding: 15px;
	}

	/* 販売 */
	#kit {margin: 60px auto 0 auto;}
	#kit h2{max-width: 1100px;}
	#kit h2 img{
		margin: 0;
		transform: translateX(0);
		max-width: 640px;
	}
	#kit .kitWrap{
		margin: -65px auto 0 auto;
		width: calc(100% - 160px);
		max-width: 960px;
		padding: 60px 0 90px 0;
	}
	#kit .cautionWrap{width: calc(100% - 60px);max-width: 600px; margin: 10px auto 60px auto;}
	#kit dl{
		margin: 40px auto 0 auto;
		gap: 15px 10px;
		width: calc(100% - 60px);
		max-width: 600px; 
	}
	#kit .linkArea{
		margin: 40px auto 30px auto;
		width: calc(100% - 34px);
		max-width: 600px;
		padding: 2px;
		background-position: 18px calc(100% - 10px);
		background-size: 24px auto;
	}
	#kit .linkArea::after{
		right: 20px;
		width: 16px;
		height: 14px;
	}
	#kit .ticketBtn{margin: 50px auto 0 auto;}
	#kit .ticketBtn ul{
		margin: 30px auto;
		gap: 0 20px;
		max-width: 800px;
	}
	#kit .ticketBtn ul li{width: calc(33.333% - 15px);}
	#kit .ticketBtn ul li img{width: 80%;}
	#kit .ticketen{margin: 0 auto 90px auto;}

	/* FAQ */
	#precautions {padding: 90px 0 60px 0;}
	#precautions .precautionWrap .ttl img{max-width: 960px;}
	#precautions .ttl::after{
		right: 25px;
		height: 16px;
		width: 18px;
	}
	#precautions .faqWrap.disp{padding: 20px 0 40px 0; }
	#precautions #limitlist .lead{margin: 10px auto 5px auto;}

	/* about */
	#about .btn::after{
		right: 25px;
		height: 16px;
		width: 18px;
	}

}