@charset "utf-8";
.logo{
	position: absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 70%;
	max-width: 280px;
}

.attWrap{
	position: relative;
	margin: 0 auto;
	padding: 5px 10px;
	background-color: #FF4E83;
	text-align: center;
	color: #ffffff;
	z-index: 10;
}
.attWrap a{color: #ffffff;}

/* ヘッダー */
header {
	position: relative;
	margin: 0 auto;
	display: block;
	width: 100%;
	height: 0;
	padding-top: 141.40625%;
}
header #keymovie {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
	height: 177.777vw;
	min-height: 100%;
	min-width: 100%;
	overflow: hidden;
}
header #keymovie::after{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	content: '';
	display: block;
}
header #keymovie  iframe{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.6;
}
header #keyvisual {
	position: absolute;
	top:0;
	left: 0;
	background-image: url("../img/main.jpg");
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: cover;
	width: 100%;
	height: 100%;
	display: none;
}

/* kikan */
#kikan{
	position: relative;
	margin: 0 auto;
	background-color: #f4b5cf;
	padding: 15px 0 20px 0;
}
#kikan dl{
	position: relative;
	margin: 0 auto;
	gap: 10px 0;
}
#kikan dl dt{
	position: relative;
	margin: 0;
	width: 100%;
}
#kikan dl dt p{
	position: relative;
	margin: 0 auto;
	width: 4.7em;
	padding: 5px 3em;
	background-color: #ffffff;
}
#kikan dl dd{
	position: relative;
	margin: 0;
	width: 100%;
}
#kikan dl dd img{
	margin: 0 auto;
	width: 58%;
	max-width: 335px;
}

/* catch */
#catch  {
	position: relative;
	margin: 0 auto;
	padding: 0 0 30% 0;
}
#catch .Txt {
	position: relative;
	margin: 0 auto;
	padding: 10% 0 20% 0;
	background-color: #eeeeee;
}
#catch .Txt img{
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 640px;
	display: block;
	z-index: 10;
}

/* icon */
.iconArea{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom:0;
	width: 100%;
	max-width: 900px;
	height: 126%;
}
.icon{position: absolute;}
.icon01{
	top:0;
	left: -2%;
	width: 22%;
	max-width: 147px;
	animation: ani03 3s ease-in 0s infinite normal forwards;
}
.icon02{
	top:8%;
	right: -6%;
	width: 30%;
	max-width: 205px;
	animation: ani02 4s ease-in 1s infinite normal forwards;
}
.icon11{
	bottom:8%;
	left: -1%;
	width: 27%;
	max-width: 157px;
	animation: ani03 4s ease-in 0s infinite normal forwards;
}
.icon12{
	bottom:38%;
	left: 14%;
	width: 10%;
	max-width: 72px;
	animation: ani01 6s ease-in 0.5s infinite normal forwards;
}
.icon13{
	top:0;
	left: -2%;
	width: 20%;
	max-width: 121px;
	animation: ani01 5s ease-in 0s infinite normal forwards;
}
.icon05{
	bottom:9%;
	left: 13%;
	width: 30%;
	max-width: 201px;
	animation: ani02 5s ease-in 1.2s infinite normal forwards;
}
.icon04{
	bottom:4%;
	left: 13%;
	width: 10%;
	max-width: 88px;
	animation: ani04 5s ease-in 1.4s infinite normal forwards;
}
.icon10{
	bottom:9%;
	left: 56%;
	width: 34%;
	max-width: 232px;
	animation: ani02 7s ease-in 0.6s infinite normal forwards;
}
.icon06{
	bottom:18%;
	left: 43%;
	width: 25%;
	max-width: 156px;
	animation: ani04 6s ease-in 0.2s infinite normal forwards;
}
.icon09{
	bottom:30%;
	right: -3%;
	width: 32%;
	max-width: 218px;
	animation: ani06 6s ease-in 1.2s infinite normal forwards;
}
.icon03{
	bottom:27%;
	right: 9%;
	width: 8%;
	max-width: 62px;
	animation: ani01 6s ease-in 1.2s infinite normal forwards;
}
.icon08{
	bottom:4%;
	right:-4%;
	width: 28%;
	max-width: 180px;
	animation: ani04 5s ease-in 0.5s infinite normal forwards;
}
.icon07{
	bottom:0;
	right: 12%;
	width: 22%;
	max-width: 118px;
	animation: ani05 4s ease-in 1s infinite normal forwards;
}
@keyframes ani01 {
	0%{opacity: 0;}
	5%, 100% { opacity: 1;}
}
@keyframes ani02 {
	0%, 16%, 100%{transform: rotate(0);}
	3%, 5% { transform: rotate(3deg);}
	6%, 8% { transform: rotate(-3deg);}
	9%, 11% { transform: rotate(3deg);}
	12%, 14% { transform: rotate(-3deg);}
}
@keyframes ani03 {
	0%, 9%, 100%{transform: translateY(0);}
	6%, 8% { transform: translateY(-5px);}
}
@keyframes ani04 {
	0%, 9%, 100%{transform: translate(0);}
	6%, 8% { transform: translate(2px, -5px);}
}
@keyframes ani05 {
	0%, 6%, 100%{transform: scale(1, 1);}
	1%, 4% {transform: scale(1.08, 01.08);}
}
@keyframes ani06 {
	0%, 10%, 40%, 50%, 100%{transform: translateX(0);}
	6%, 8% { transform: translateX(-5px);}
	46%, 48% { transform: translateX(-5px);}
}

/* とは */
#about {
	position: relative;
	margin: 0 auto;
	padding:0 0 60px 0;
}
#about .lead{
	position: relative;
	margin: 30px auto;
	width: calc(100% - 30px);
	font-size: 110%;
	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;
}
#about .bg{
	position: absolute;
	top: 59%;
	transform: translateY(-50%);
	left: 0;
	width: 100%;
	height: 0;
	padding-top: 170%;
	background-image: url("../img/bg01.jpg");
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: cover;
	clip-path: polygon(0 20%, 100% 0%, 100% 100%, 0 80%);
}
#about .bg::after{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	content: '';
	display: block;
	 background-color   : rgba(255, 102, 255, 0);
	background-image   : radial-gradient(#ffffff 3%, transparent 23%),
                       radial-gradient(#ffffff 3%, transparent 23%);
	background-position: 0 0, 3px 3px;
	background-size    : 6px 6px;
}
/* ポイント */
#point{
	position: relative;
	margin: 0 auto;
	padding: 0;
	gap: 30px 0;
}
#point .pointBox{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 20px);
	max-width: 960px;
}
#point .pointBox h3{
	position: relative;
	width: 80%;
	max-width: 580px;
	background-color: #000000;
	color: #ffffff;
	text-align: center;
	font-weight: bold;
	font-size: min(4.3vw, .18rem);
	line-height: 1.3em;
	padding: 5px 1em;
}
#point .pointBox:first-child h3{
	transform: rotate(-2deg);
	margin: -10px 0 0 -5px;
}
#point .pointBox:last-child h3{
	transform: rotate(2deg);
	margin: -10px 0 0 calc(20% - 2em + 5px);
}
#point .pointBox .Img{
	position: relative;
	width: calc(100% - 20px);
	outline: solid 3px #ffffff;
}
#point .pointBox:first-child .Img{
	margin: 0 0 0 auto;
	box-shadow: -10px 10px 0px 0px #f8559c;
}
#point .pointBox:last-child .Img{
	margin: 0;
	box-shadow: 10px 10px 0px 0px #78ef6f;
}
#point .pointBox p{
	position: relative;
	margin: 20px auto 0 auto;
	text-align: center;
	font-size: min(3.6vw, .16rem);
	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;
}

/* ストーリー */
#story {
	position: relative;
	margin: 0 auto;
	padding: 0 0 60px 0;
}
#story p {
	position: relative;
	margin: 0 auto;
	width: calc(100% - 30px);
	text-align: center;
	line-height: 2em;
	font-size: min(3.6vw, .16rem);
	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;
}
#story .bg{
	position: absolute;
	top: 60%;
	left: 0;
	width: 100%;
	height: 0;
	padding-top: 131.25%;
	background-image: url("../img/bg02.jpg");
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: cover;
	clip-path: polygon(0 20%, 100% 0%, 100% 100%, 0 80%);
}
#story .bg::after{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	content: '';
	display: block;
	 background-color   : rgba(255, 102, 255, 0);
	background-image   : radial-gradient(#ffffff 3%, transparent 23%),
                       radial-gradient(#ffffff 3%, transparent 23%);
	background-position: 0 0, 3px 3px;
	background-size    : 6px 6px;
}

/* 参加方法 */
#howto {
	position: relative;
	margin: 0 auto;
	padding:0 0  60px 0;
}
#howto .howtoWrap {
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 1000px;
}
#howto .howtoWrap .splide__arrows .splide__arrow--prev {left: 0;transform: rotate(180deg);}
#howto .howtoWrap .splide__arrows .splide__arrow--next {right: 0;}
#howto .howtoWrap .splide__arrow {
	background: transparent;
	border-radius: 0;
	height: 30px;
	width: 30px;
	opacity: 1;
	transform: translateY(0);
}
#howto .howtoWrap .splide__arrow:disabled {opacity: 0;}

#howto .howtoWrap ul li{
	position: relative;
	margin: 0;
	width: 100%;
	display: flex;
	align-items: stretch;
}
#howto .howtoWrap .txtWrap {
	position: relative;
	margin: 0 auto 10px auto;
	border: solid 3px #181d61;
	background-color: #ffffff;
	padding: 43px 0 30px 0;
	box-sizing: border-box;
	width: calc(100% - 60px);
	box-shadow: -10px 10px 0px 0px #3eb8ea;
	background-size: auto 40px;
	background-repeat: no-repeat;
	background-position: -2px -2px;
}
#howto .howtoWrap li:nth-child(1) .txtWrap{background-image: url("../img/step01.png");}
#howto .howtoWrap li:nth-child(2) .txtWrap{background-image: url("../img/step02.png");}
#howto .howtoWrap li:nth-child(3) .txtWrap{background-image: url("../img/step03.png");}
#howto .howtoWrap li:nth-child(4) .txtWrap{background-image: url("../img/step04.png");}
#howto .howtoWrap h3 {
	position: relative;
	margin: 0 auto 10px auto;
	width: calc(100% - 30px);
	text-align: center;
	font-weight: bold;
	font-size: 110%;
}
#howto .howtoWrap .Img {
	position: relative;
	margin: 0 auto 20px auto;
	width: calc(100% - 30px);
}
#howto .howtoWrap .Img img{position: relative;margin: 0 auto;}
#howto .howtoWrap p{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 35px);
}
#howto .howtoWrap a{color: #191E62;}
#howto .first{
	position: relative;
	margin: 40px auto 0 auto;
	width: calc(100% - 30px);
	max-width: 800px;
	border: solid 1px #221306;
}

/* お試し謎 */
#nazo {
	position: relative;
	margin: 0 auto;
	padding:0 0  60px 0;
}
#nazo .btn_nazo{
	position: relative;
	cursor: pointer;
	margin: 0 auto;
	width: 100%;
	max-width: 580px;
}
#nazo .nazoArea{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 30px);
	max-width: 800px;
}
#nazo .nazoImages{
	position: relative;
	margin: 10px auto 0 auto;
	width: 100%;
	max-width: 708px;
	border: solid 1px #221306;
}
#nazo #err{
	position: relative;
	margin: 0 auto;
}
#nazo #err p{
	position: relative;
	margin: 0 auto;
	padding: 5px 10px;
	color: #FF73AD;
	text-align: center;
}
#nazo .hintWrap{
	position: relative;
	margin: 20px auto;
}
#nazo .hintInWrap{
	position: relative;
	margin: 0 auto 10px auto;
	width: calc(100% - 80px);
	max-width: 600px;
	border: solid 1px #f4b5cf;
	background-color: #f4b5cf;
}
#nazo .hintWrap .Btnhint{
	position: relative;
	margin: 0 auto;
	padding: 3px 20px;
	text-align: center;
	color: #ffffff;
	cursor: pointer;
	font-size: .13rem;
	transition: all .3s ease-out;
}
#nazo .hintWrap .Btnhint:hover{background-color: #FF73AD;}
#nazo .hintWrap .hintTxt{
	position: relative;
	margin: 0 auto;
	padding: 10px;
	font-size: .13rem;
	display: none;
	background-color: #ffffff;
	color: #000000;
}
#nazo .inputArea{
	margin: 0 auto;
	padding-bottom: 10px;
	width: calc(100% - 20px);
}
/* form */
.inputArea .inputTxt{
	position: relative;
    display: block;
	margin:  0 auto 20px auto !important;
	padding: 0 8px;
	border: solid 1px #757d92;
	background-color: #FFFCF4;
	width: calc(100% - 16px);
	max-width: 686px;
	border-radius: 5px;
	height: 2.5em;
	line-height: 3em;
	font-size: .16rem;
}
.inputArea .inputTxt.disabled{background-color: #B0CFD7; color: #708392;pointer-events : none;}
::placeholder {color: #cecece;}
input::-webkit-contacts-auto-fill-button, 
input::-webkit-credentials-auto-fill-button {
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  right: 0;
}
#nazo .button{max-width: 15em; color: #ffffff;cursor: pointer;}
.button::after{display: none;}
#nazo .button:hover{background-color: #AFE9E3;}

#opwinO{
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 100vh;
	display: none;
	overflow-y: scroll;
	background-color: #FFE9F5;
	z-index: 19000;
}
.close_win1 {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 19001;
	overflow: hidden;
 }
.btn_win1{
	position: fixed;
	top:0;
	right: 0;
	display: block;
	width: 50px;
	height: 50px;
	z-index: 19004;
}
#opwinO .result{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 40px);
	padding: 50px 0;
	z-index: 19003;
}
#opwinO .result .clearImg{
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 519px;
}
#opwinO .result p{
	position: relative;
	margin: 0 auto;
	padding-top: 30px;
	font-size: 110%;
	text-align:center;
}
#opwinO .result h3{
	position: relative;
	margin: 30px auto 10px auto;
	text-align: center;
}
#opwinO .result ul{
	position: relative;
	margin: 0 auto;
	width: 70%;
	max-width: 400px;
	gap:0 10px;
}
#opwinO .result ul li{
	position: relative;
	margin: 0;
	width: calc(33.333% - 10px);
	max-width: 40px;
}
#opwinO .result ruby{padding-top: .5em;}
#opwinO .result ruby[data-ruby]::before{
	top:.1em;
	font-size: 50%;
	font-weight: normal;
}


/* プレイ形式 */
#play{
	position: relative;
	margin:0 auto;
	padding: 10px 0 30px 0;
}
#play .bg{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #eeeeee;
	clip-path: polygon(67% 12%, 100% 6%, 100% 100%, 0 100%, 0 0);
}
#play ul{
	position: relative;
	margin:0 auto;
	width: calc(100% - 100px);
	max-width: 560px;
	gap: 20px 30px;
}
#play ul li{
	position: relative;
	margin: 0;
	width: calc(50% - 15px);
	text-align: center;
	line-height: 1.5em;
}
#play ul li img{margin: 0 auto 5px auto;}
#play ul li .caution{
	position: relative;
	padding-top: 5px;
	display: inline;
	width: auto;
	font-size: 84%;
	line-height: 1.4em;
	padding-left: 0.5em;
}
#play ul li .caution::before{
	position: absolute;
	top:4px;
	left: 0;
	content: '※';
}
#play .needs{
	position: relative;
	margin: 30px auto;
	padding: 20px;
	width: calc(100% - 70px);
	max-width: 800px;
	border-radius: 10px;
	background-color: #F6F6F6;
	text-align: center;
}
#play h4{
	position: relative;
	margin: 0 auto 20px auto;
	padding: 8px 0;
	line-height: 1em;
	background-color: #f4b5cf;
	text-align: center;
	font-weight: bold;
}
#play h4::after{
	position: absolute;
	top:calc(-50% - 2px);
	left: 20px;
	display: block;
	width: 30px;
	height: 60px;
	content: '';
	background-image: url("../img/icon_line.png");
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: contain;
}
#play h3{
	position: relative;
	margin: 30px auto 10px auto;
	width: 12em;
	padding: 5px 0;
	line-height: 1em;
	background-color: #191E62;
	border-radius: 100px;
	color: #ffffff;
	text-align: center;
	font-size: 96%;
}
#play .playtime{
	position: relative;
	margin: 0 auto;
	text-align: center;
	font-size: 130%;
}
#play .cautionWrap{text-align: center;line-height: 1.4em;padding-top: 10px;}
#play .cautionWrap p{
	display: inline;
	padding-top: 3px;
	padding-left: 1em;
}

#kit{
	position: relative;
	margin: 0 auto;
	padding: 60px 0;
}
#kit h3{
	position: relative;
	margin: 0 auto 15px auto;
	width: calc(100% - 30px);
	background-color: #f4b5cf;
	text-align: center;
	font-size: 120%;
	font-weight: bold;
	padding: 8px 0;
	max-width: 800px;
}
#kit .caution{
	position: relative;
	padding-top: 5px;
	display: inline;
	width: auto;
	font-size: 84%;
	line-height: 1.4em;
	padding-left: 0.8em;
}
#kit .caution::before{
	position: absolute;
	top:4px;
	left: 0;
	content: '※';
}
#kit .cautionWrap{margin: 10px auto;}
#kit .cautionWrap p{display: inline;width: auto;}
#kit .cautionWrap p::before{top:-0.2em;}

/* release */
#release{
	position: relative;
	margin: 0 auto;
}
#release .releaseBox{
	position: relative;
	margin: 0 auto;
	text-align: center;
	padding-bottom: 20px;
	width: calc(100% - 30px);
	max-width: 800px;
}
#release .releaseBox.margin{margin: 20px auto 0 auto;}
#release .ttlR{
	position: relative;
	margin: 0 auto 15px auto;
	padding: 7px 0;
	line-height: 1em;
	font-weight: bold;
	background-color: #ececec;
}
#release p{
	position: relative;
	margin: 0 auto;
}
#release p.red{
	font-size: 120%;
	font-weight: bold;
	color: #F20048;
}
.scraptantei{
	position: relative;
	margin: 15px auto 10px auto;
	font-size: 80%;
	text-align: center;
}
.scraptantei img{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 60px);
	max-width: 320px;
}

/* 料金 */
#price {
	position: relative;
	margin: 0 auto;
	padding: 25px 0 60px 0;
	text-align: center;
}
#price .price{
	position: relative;
	margin: 0 auto;
}
#price .price span {
	font-size: 200%;
	font-weight: bold;
}
#kit .u22 {
  position: relative;
  margin: 0 auto 10px auto;
  width: calc(100% - 30px);
  max-width: 800px;
	border: solid 1px #f4b5cf;
}
#kit .u22 .ttlU22 {
  position: relative;
  margin: 0 auto;
  width: 120px;
  transform: translateY(-30px);
}
#kit .u22 .u22Txt {
  position: relative;
  margin: -20px auto 0 auto;
  padding: 0 20px 20px 20px;
	text-align: center;
}
#kit .u22 .u22Txt a {color: #191E62;}
#kit .u22 .u22Txt .priceu22{
	position: relative;
	margin: 20px auto;
	width: calc(100% - 20px);
	max-width: 250px;
}
#kit .kids {
  position: relative;
  margin: 50px auto 10px auto;
  width: calc(100% - 30px);
  max-width: 800px;
	border: solid 1px #f4b5cf;
}
#kit .kids .ttlkids {
  position: relative;
  margin: 0 auto;
  width: 170px;
  transform: translateY(-30px);
}
#kit .kids .kidsTxt {
  position: relative;
  margin: -20px auto 0 auto;
  padding: 0 20px 20px 20px;
	text-align: center;
}
#kit .kids .kidsTxt .text{padding-bottom: 10px;}
#kit .kids .kidsTxt a {color: #191E62;}

/* sale */
#sale{
    position: relative;
    margin: 0 auto;
	padding: 0 0 20px 0;
}
#sale .lead{
	position: relative;
	margin: 0 auto;
}
#sale .bg{
	position: absolute;
	top: 7%;
	left: 0;
	width: 100%;
	height: 0;
	padding-top: 131.25%;
	background-image: url("../img/bg03.jpg");
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: cover;
	clip-path: polygon(0 20%, 100% 0%, 100% 100%, 0 80%);
}
#sale .bg1{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0;
	padding-top: 131.25%;
	background-image: url("../img/bg04.jpg");
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: cover;
	clip-path: polygon(0 20%, 100% 0%, 100% 100%, 0 80%);
}
#sale .bg::after, #sale .bg1::after{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	content: '';
	display: block;
	 background-color   : rgba(255, 102, 255, 0);
	background-image   : radial-gradient(#ffffff 3%, transparent 23%),
                       radial-gradient(#ffffff 3%, transparent 23%);
	background-position: 0 0, 3px 3px;
	background-size    : 6px 6px;
}
#sale .lead{
	position: relative;
	margin: 0 auto;
	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;
}
#sale .saleWrap{
	position: relative;
	margin:20px auto 40px auto;
	width: calc(100% - 30px);
	padding: 35px 15px;
	max-width: 960px;
	border: solid 2px #1a1a1a;
	background-color: rgba(255,255,255,0.8);
	box-sizing: border-box;
	text-align: center;
}
#sale .saleWrap.type01{box-shadow: -7px 7px 0px 0px #07c4b2;}
#sale .saleWrap.type02{box-shadow: -7px 7px 0px 0px #fd5591;}
#sale .saleWrap.type03{box-shadow: -7px 7px 0px 0px #00d8ff;}
#sale .saleWrap h3{
	position: relative;
	margin: 0 auto 20px auto;
	font-size: 130%;
	font-weight: bold;
	display: inline-block;
	width: auto;
	line-height: 1em;
	padding: 0 0 3px 0;
}
#sale .saleWrap h3::before{
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 10px;
	content: '';
}
#sale .saleWrap.type01 h3::before{background-color: #8ee1d9;}
#sale .saleWrap.type02 h3::before{background-color: #ffb3ce;}
#sale .saleWrap.type03 h3::before{background-color: #88d4f5;}
#sale .saleWrap h3 p{position: relative;}
#sale .saleWrap h4{
	position: relative;
	margin: 20px auto 10px auto;
	background-color: #000000;
	color: #ffffff;
	font-size: 90%;
	line-height: 1em;
	width: 15em;
	padding: 5px 0;
}
#sale .saleWrap ul{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 10px);
	max-width: 400px;
}
#sale .saleWrap ul li{
	position: relative;
	margin: 0 auto 30px auto;
	text-align: left;
}
#sale .saleWrap ul li:last-child{margin: 0 auto;}
#sale .saleWrap ul li .badge{
	position: relative;
	margin: 0 auto 1em auto;
	width: 15em;
	background-color: #E52F7D;
	padding: 5px 0;
	font-size: 82%;
	color: #ffffff;
	text-align: center;
	line-height: 1em;
	border-radius: 100px;
	transform: translate(-5em, 0.5em);
}
#sale .saleWrap ul li .badge::after{
	position: absolute;
	bottom: -0.8em;
	left: 40%;
	content: '▼';
	transform: scale(0.7, 1.2);
	color: #E52F7D;
}
#sale .saleWrap ul li .shop{
	position: relative;
	display: inline;
	width: auto;
	margin: 0 auto;
	padding-left: 13px;
	font-size: min(86%, .14rem);
}
#sale .saleWrap ul li .shop::before{
	position: absolute;
	top:0.2em;
	left: 0;
	content: '';
	display: block;
	width: 10px;
	height: 10px;
}
#sale .saleWrap.type01 ul li .shop::before{background-color: #07c4b2;}
#sale .saleWrap.type02 ul li .shop::before{background-color: #fd5591;}
#sale .saleWrap.type03 ul li .shop::before{background-color: #00d8ff;}
#sale .saleWrap ul li p{font-size: 86%;line-height: 1.4em;}
#sale .saleWrap ul li .map{
	position: relative;
	margin: 0 0 0 5px;
	display: inline-block;
	width:23px;
}
#sale .saleWrap .button{
	margin: 10px auto 0 auto; 
	width: calc(100% - 50px);
	font-size: min(3.8vw, 110%);
	padding: 8px 0;
}
#sale .saleWrap .caution{
	position: relative;
	padding-top: 5px;
	display: inline-block;
	width: auto;
	font-size: 84%;
	line-height: 1.4em;
	padding-left: 1em;
}
#sale .saleWrap .caution::before{
	position: absolute;
	top:4px;
	left: 0;
	content: '※';
}

/* FAQ */
#precautions {
  position: relative;
  margin: 0 auto;
  padding:0;
	z-index: 10;
}
#precautions .bnr_report{
	position: relative;
	margin: 5px auto 40px auto;
	width: calc(100% - 30px);
	max-width: 960px;
	display: block;
	border: solid 2px #1a1a1a;
}
#precautions .bnr_report.closed{pointer-events: none;border: solid 2px #C6CDD5;}
#precautions .bnr_report.closed::after{
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(255,255,255,0.85);
	background-image: url("../img/closed.png");
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: min(60%, 392px) auto;
	content: '';
	display: block;
}

#precautions .precautionWrap{
	position: relative;
	margin: 0 auto 21px auto;
	width: calc(100% - 30px);
	max-width: 960px;
	background-color: #f4b5cf;
	box-shadow: -7px 7px 0px 0px #000000;
}
#precautions .precautionWrap .ttl{
	position: relative;
	margin: 0 auto;
	padding: 20px 0;
	text-align: center;
	font-size: 120%;
	font-weight: bold;
	line-height: 1em;
	cursor: pointer;
}
#precautions .ttl::after{
	position: absolute;
	top:50%;
	right: 10px;
	content: '';
	display: block;
	transition: all .3s ease-out;
	transform: translateY(-50%);
	height: 25px;
	width: 25px;
	background-image: url("../img/arrow02.png");
	background-repeat: no-repeat;
	background-size: 60% auto;
	background-position: 50% 50%;
	background-color: #ffffff;
}
#precautions .ttl.disp::after{transform: translateY(-50%) scale(1, -1);}
#precautions .faqWrap{
	position: relative;
	margin: 0 auto;
	padding: 0;
	height: 0;
	overflow: hidden;
	transition: all .3s ease-out;
	z-index: 9;
}
#precautions .CatTtl{
	position: relative;
	margin: 0 auto;
	padding: 3px 10px;
	width: calc(100% - 45px);
	max-width: 800px;
	text-align: center;
	font-size: 102%;
	font-weight: 600;
	color: #191E62;
	background-color: #ffffff;
}
#precautions .CatTtl.marginTop{margin: 10px auto 0 auto;}
#precautions  #limitlist .CatTtl{margin: 10px auto 0 auto;}
#precautions  #limitlist .CatTtl.margin{margin: 30px auto 15px auto;}
#precautions .faqWrap.disp{height: auto !important;padding: 10px 0; margin: 0 auto; }
#precautions  #faq.faqWrap.disp, #precautions  #limitlist.faqWrap.disp {padding: 10px 0 30px 0;}
#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% - 50px);
	max-width: 800px;
	margin: 0 auto;
	padding-bottom: .8em;
	text-align: left;
	line-height: 1.5em;
}
#precautions .faqWrap dl dd .title{
	position: relative;
	width: calc(100% - 50px);
	margin: 5px auto 0 auto;
	text-align: left;
	font-weight: bold;
}
#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 #faq.faqWrap dl dt p{
	position: relative;
	text-align: left;
	margin: 0 auto;
	width: calc(100% - 50px);
	max-width: 800px;
	line-height: 1.6em;
	font-weight: bold;
}
#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;padding-left: 1em !important;line-height: 1.4em !important;}
#precautions h3{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 50px);
	font-weight: bold;
	text-align: center;
	border-bottom: solid 1px #191E62;
}
#precautions h3.marginTop{margin: 20px auto 0 auto;}
#precautions #limitlist .lead{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 50px);
	max-width: 800px;
}
#precautions #limitlist .lead.marginTop{margin: 15px auto 0 auto;}
#precautions  #limitlist dl{margin: 0 auto;width: calc(100% - 10px);padding: 0;}

/* btnabout*/
#btnabout{
	position: relative;
	margin:0 auto;
	padding: 50px 0 70px 0;
}
#btnabout .bg{
	position: absolute;
	top:-35px;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #eeeeee;
	clip-path: polygon(68% 25%, 100% 10%, 100% 100%, 0 100%, 0 0);
}
#btnabout ul{
	position: relative;
	margin:0 auto;
	width: calc(100% - 30px);
	max-width: 560px;
	gap: 0 20px;
}
#btnabout ul li{
	position: relative;
	margin: 0;
	width: calc(50% - 10px);
}

/* banner*/
#banner{
	position: relative;
	margin:0 auto;
	padding: 0 0 35px 0;
}
#banner ul{
	position: relative;
	margin:0 auto;
	width: calc(100% - 30px);
	max-width: 560px;
	gap: 20px;
}
#banner ul li{
	position: relative;
	margin: 0;
	width: 100%;
}
#banner p{
	position: relative;
	margin: 30px auto 0 auto;
	text-align: center;
}


/* ----- pc ----- */
@media screen and (min-width: 641px) {

	/* ヘッダー */
	header #keyvisual {background-image: url("../img/main_pc.jpg");}

	/* ヘッダー */
	header {padding-top: 56.25%;}
	header #keymovie {
		width: 100%;
		height: 70vw;
	}
	header #keyvisual {background-image: url("../img/main_pc.jpg");}

	/* kikan */
	#kikan{padding: 25px 0 40px 0;}

	/* とは */
	#about .lead{font-size: 130%;line-height: 1.8em;padding-bottom: 20px;}
	#about .bg{
		top: 70%;
		padding-top: 58.33%;
		background-image: url("../img/bg01_pc.jpg");
		background-repeat: no-repeat;
		background-position: 50% 0;
		background-size: cover;
		clip-path: polygon(0 20%, 100% 0%, 100% 100%, 0 80%);
	}

	/* ポイント */
	#point{gap: 0 50px;max-width: 1100px;}
	#point .pointBox{
		margin: 0;
		width: calc(50% - 25px);
		max-width: 520px;
	}
	#point .pointBox h3{padding: 8px 1em;}
	#point .pointBox:first-child h3{margin: -20px 0 0 -15px;}
	#point .pointBox:last-child h3{margin: -20px 0 0 calc(20% - 2em + 15px);}
	#point .pointBox .Img{outline: solid 4px #ffffff;max-width: 500px;}
	#point .pointBox:first-child .Img{box-shadow: -15px 15px 0px 0px #f8559c;}
	#point .pointBox:last-child .Img{box-shadow: 15px 15px 0px 0px #78ef6f;}
	#point .pointBox p{margin: 40px auto 0 auto;}

	/* ストーリー */
	#story {padding: 100px 0;}
	#story p {
		font-size: min(3.6vw, .19rem);
		line-height: 2em;
	}
	#story .bg{
		top: 70%;
		padding-top: 58.33%;
		background-image: url("../img/bg02_pc.jpg");
	}

	/* 参加方法 */
	#howto {padding:0 0 130px 0;}
	#howto .howtoWrap {max-width: 1200px;}
	#howto .howtoWrap .txtWrap {width: calc(100% - 20px);}
	#howto .first{
		margin: 60px auto 0 auto;
		border: solid 2px #221306;
	}
	
	/* お試し謎 */
	#nazo {padding:0 0 130px 0;}
	#nazo .nazoImages{
		margin: 20px auto 0 auto;
		max-width: 601px;
		border: solid 2px #221306;
	}
	#nazo .hintWrap{margin: 40px auto;}

	/* form */
	.inputArea .inputTxt{
		width: calc(100% - 16px);
		max-width: 582px;
	}
	#nazo .button{font-size: 120%;padding: 10px 20px;}

	.btn_win1{
		width: 60px;
		height: 60px;
		cursor: pointer;
	}
	#opwinO .result{
		padding: 80px 0 50px 0;
		max-width: 800px;
	}
	#opwinO .result p{padding-top: 60px;}
	#opwinO .result h3{margin: 50px auto 15px auto;}
	#opwinO .result ul li{max-width: 60px;}


	/* プレイ形式 */
	#play{padding: 10px 0 60px 0;}
	#play .bg{clip-path: polygon(67% 20%, 100% 10%, 100% 100%, 0 100%, 0 0);}
	#play ul{
		max-width: 880px;
		gap: 0 15px;
	}
	#play ul li{width: calc(20% - 15px);}
	#play ul li:last-child{width:20%;}
	#play ul li:last-child img{width: calc(100% - 15px);}
	#play ul li .caution{padding-left: 0.8em;}
	#play .needs{
		margin: 60px auto;
		padding: 30px 30px 50px 30px;
		max-width: 740px;
		border-radius: 15px;
	}
	#play h4{
		margin: 0 auto 30px auto;
		padding: 10px 0;
	}
	#play h4::after{
		top: calc(-50% + 7px);
		left: calc(50% - 8em);
	}
	#play h3{
		margin: 40px auto 20px auto;
		padding: 8px 0;
	}
	#play .playtime{font-size: 140%;}
	#play .cautionWrap p{
		padding-top: 5px;
		padding-left: 0.8em;
	}

	#kit{padding: 100px 0;}

	/* release */
	#release .releaseBox{padding-bottom: 40px;}
	#release .releaseBox.margin{margin: 40px auto 0 auto;}

	/* 料金 */
	#price {padding: 25px 0 80px 0;}
	#price .price span {font-size: 220%;}

	#kit .u22 .ttlU22 {
	  width: 160px;
	  transform: translateY(-50px);
	}
	#kit .u22 .u22Txt {
	  margin: -30px auto 0 auto;
	  padding: 0 40px 40px 40px;
	}
	#kit .kids {margin: 80px auto 10px auto;}
	#kit .kids .ttlkids {
	  width: 210px;
	  transform: translateY(-50px);
	}
	#kit .kids .kidsTxt {
	  margin: -30px auto 0 auto;
	  padding: 0 40px 40px 40px;
	}

	/* sale */
	#sale{padding: 0 0 40px 0;}
	#sale .bg{top: 0;
		padding-top: 58.33%;
		background-image: url("../img/bg03_pc.jpg");}
	#sale .bg1{
		padding-top: 58.33%;
		background-image: url("../img/bg04_pc.jpg");
	}
	#sale .lead{font-size: 120%;line-height: 1.8em;}
	#sale .saleWrap{
		margin:50px auto 40px auto;
		padding: 45px 35px 60px 35px;
		border: solid 3px #1a1a1a;
	}
	#sale .saleWrap.type01{box-shadow: -10px 10px 0px 0px #07c4b2;}
	#sale .saleWrap.type02{box-shadow: -10px 10px 0px 0px #fd5591;}
	#sale .saleWrap.type03{box-shadow: -10px 10px 0px 0px #00d8ff;}
	#sale .saleWrap ul li .shop{padding-left: 15px;font-size: min(96%, .16rem);}
	#sale .saleWrap ul li .shop::before{top:0.3em;}
	#sale .saleWrap ul li p{font-size: 86%;line-height: 1.8em;}
	#sale .saleWrap h4{margin: 40px auto 20px auto;}
	#sale .saleWrap .button{
		font-size: min(3.8vw, 120%);
		padding: 15px 0;
	}
	#sale .saleWrap ul li .badge{
		margin: 0 auto;
		transform: translate(-8em, 0.2em);
	}

	/* FAQ */
	#precautions .bnr_report{
		margin: 10px auto 60px auto;
		border: solid 3px #1a1a1a;
	}
	#precautions .bnr_report.closed{border: solid 3px #C6CDD5;}

	#precautions .precautionWrap{
		margin: 0 auto 30px auto;
		box-shadow: -10px 10px 0px 0px #000000;
	}
	#precautions .precautionWrap .ttl{
		padding: 25px 0;
		font-size: 140%;
	}
	#precautions .ttl::after{;
		right: 20px;
		height: 30px;
		width: 30px;
	}
	#precautions .CatTtl{padding: 5px 10px;}
	#precautions .attWrap{width: 100% !important;}
	#precautions .attWrap p{width: 100% !important;}
	#precautions h3{max-width: 800px;}
	#precautions h3.marginTop{margin: 40px auto 0 auto;}


	/* btnabout*/
	#btnabout{padding: 80px 0 100px 0;}

	/* banner*/
	#banner{padding: 30px 0 55px 0;}
	#banner ul{
		max-width: 1200px;
		gap: 20px;
	}
	#banner ul li{width: calc(50% - 10px);max-width: 500px;}
	#banner p{margin: 50px auto 0 auto;}
	
}

@media screen and (min-width: 345px) {
	#sale .saleWrap ul li .badge{margin: 0 auto;}
}
@media screen and (min-width: 700px) {
	
	/* catch */
	#catch  {padding: 0 0 min(8%, 80px) 0;}
	#catch .Txt {padding: min(2%, 20px) 0 min(5%, 60px) 0;}


	/* icon */
	.icon01{
		top:-5%;
		left: 6%;
		width: 12%;
	}
	.icon02{
		top:4%;
		right: -1%;
		width: 15%;
	}
	.icon11{
		bottom:max(8%, 50px);
		left: max(-1%, -10px);
		width: 13%;
	}
	.icon12{
		bottom:max(48%, 120px);
		left: max(5%, 80px);
		width: 5%;
	}
	.icon13{
		top:-5%;
		left: 6%;
		width: 9%;
	}
	.icon05{
		bottom:max(1%, 20px);
		left: max(8%, 50px);
		width: 15%;
	}
	.icon04{
		bottom:max(0.5%, 10px);
		left: max(8%, 70px);
		width: 5%;
	}
	.icon10{
		bottom:max(3%, 20px);
		left: max(60%, 380px);
		width: 17%;
	}
	.icon06{
		bottom:max(5%,40px);
		left: max(50%, 300px);
		width: 12%;
	}
	.icon09{
		bottom:max(22%, 100px);
		right: max(1%, -10px);
		width:16%;
	}
	.icon03{
		bottom:max(11%, 120px);
		right: max(16%, 80px);
		width: 4%;
	}
	.icon08{
		bottom:max(3%, 10px);
		right:max(8%, 5px);
		width: 14%;
	}
	.icon07{
		right: max(19%, 30px);
		width:11%;
	}

}