@charset "utf-8";
footer{background-color: #ffffff;}
header .logo{top:2px;left: 5px; position: fixed;}

h2{
	position: relative;
	margin: 25px auto 0 auto;
	display: block;
	padding: 50px 0 20px 0;
	background-image: url("../img/common/flag.png"),  url("../img/common/flag01.png");
	background-position: 0 0, 100% 0;
	background-repeat: no-repeat, no-repeat;
	background-size: calc(50% - 5px) auto, calc(50% - 5px) auto;
}
h2 img{
	position: relative;
	margin: 0 auto;
	width: 100%;
	max-width: 600px;
}
h2::before{
	position: absolute;
	top:-25px;
	left: 0;
	width: 100%;
	height: 25px;
	content: '';
	display: block;
	background-color: #ffffff;
	border-top: solid 1px #0070dc;
	border-bottom: solid 1px #0070dc;
	background-image: url("../img/common/bar02.png");
	background-position: 50% 50%;
	background-repeat: repeat-x;
	background-size: auto 11px;
}
#tokuten h2::before{background-position: 80px 50%;}
#about h2::before{display: none;}
#story h2::before{background-position: 200px 50%;}

/* tokyocity */
#tokyocity{
	position: relative;
	margin: 0 auto;
	padding: 0 0 60px 0;
	background-image: url("../img/common/bar_blue.png");
	background-repeat: repeat-x;
	background-position: 50% 100%;
	background-size: auto 15px;
}
#tokyocity h2 .ttl01{
	position: relative;
	margin: 15px auto 10px auto;
	width: calc(100% - 60px);
	max-width: 480px;
}
#tokyocity .lead{
	position: relative;
	margin: 0 auto;
	text-align: center;
	font-weight: bold;
	font-size: 110%;
}

#tokyocity .play{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 10px);
}
#tokyocity .play h3{
	position: relative;
	margin: 40px auto 10px auto;
	width: calc(100% - 20px);
	max-width: 400px;
}
#tokyocity .play ul{
	position: relative;
	margin:  0 auto;
	width: 100%;
	max-width: 500px;
	gap: 0;
}
#tokyocity .play ul li{
	position: relative;
	margin: 0;
	width: 25%;
}
#tokyocity .play ul li .playImg{
	position: relative;
	margin:  0 auto;
	width: 80%;
}
#tokyocity .play ul li p{
	padding-top: 5px;
	font-size: min(2.7vw, .14rem);
	text-align: center;
	line-height: 1.4em;
	font-weight: bold;
}
#tokyocity .play ul li p.caution{font-size: min(2.5vw, .12rem);line-height: 1.4em;}
#tokyocity .play .cautionWrap{
	position: relative;
	margin: 10px auto;
	width: calc(100% - 30px);
}
#tokyocity .play .cautionWrap.nmargin{margin: 5px auto 10px auto;}
#tokyocity .play .cautionWrap p{
	position: relative;
	text-align: left;
	padding-left: 1.1em;
	font-size: 80%;
	line-height: 1.5em;
}
#tokyocity .play .cautionWrap p::before{
	position: absolute;
	top:0;
	left: 0;
	content: '※';
}
#tokyocity .play .about{
	position: relative;
	margin: 10px auto;
	text-align: center;
	font-size: 90%;
	line-height: 1.5em;
	font-weight: bold;
}

/* tokuten */
#tokuten{
	position: relative;
	margin: 0 auto;
	padding: 0 0 50px 0;
	background-color: #fff3c8;
	border-bottom: solid 5px #ff8c27;
}
#tokuten h2 {padding: 60px 0 20px 0;}
#tokuten .tokutenWrap{
	position: relative;
	margin:0 auto ;
	padding: 30px;
	width: calc(100% - 90px);
	max-width: 960px;
	background-color: #ffffff;
	border-radius: 30px;
}
#tokuten .tokutenWrap .Img{
	position: relative;
	margin: 0 auto;
	width: 70%;
	max-width: 240px;
}
#tokuten .tokutenWrap .Img p{
	text-align: center;
	font-size: 80%;
}
#tokuten .tokutenWrap .Txt{
	position: relative;
	margin: 15px auto 0 auto;
	width: 100%;
}
#tokuten .tokutenWrap .cautionWrap{
	position: relative;
	margin: 5px auto;
	width: 100%;
}
#tokuten .tokutenWrap .cautionWrap p{
	position: relative;
	text-align: left;
	padding-left: 1.1em;
	font-size: 80%;
	line-height: 1.5em;
}
#tokuten .tokutenWrap .cautionWrap p::before{
	position: absolute;
	top:0;
	left: 0;
	content: '※';
}

/* about */
#about {
	position: relative;
	margin: 0 auto;
	background-color: #fdf1e7;
	padding: 40px 0 30px 0;
	background-image: url("../img/common/bar.png"), url("../img/common/bar01.png");
	background-repeat: repeat-x, repeat-x;
	background-position: 50% 0, -10px 100%;
	background-size: auto 23px, auto 5px;
}
#about h2{
	margin: 0 auto;
	padding: 0 0 20px 0;
	background-image:none;
}
#about .aboutWrap{
	position: relative;
	margin: 0 auto;
	padding: 30px;
	width: calc(100% - 90px);
	max-width: 960px;
	background-color: #ffffff;
	border-radius: 30px;
}

/* story */
#story{
	position: relative;
	margin: 0 auto;
	padding: 0 0 60px 0;
	background-image: url("../img/common/bar_blue.png");
	background-repeat: repeat-x;
	background-position: 50% 100%;
	background-size: auto 15px;
}
#story .storyWrap{
	position: relative;
	margin: 0 auto;
	width: calc(100% - 30px);
	max-width: 960px;
	text-align: center;
}

/* FAQ */
#precautions {
  position: relative;
  margin: 0 auto;
  padding: 50px 0 60px 0;
	background-color: #ffe16c;
	background-image: url("../img/common/bar04.png"), url("../img/common/bg_footer.svg");
	background-repeat: repeat-x, no-repeat;
	background-position: 50% 0, 0 100%;
	background-size: auto 23px, 100% auto;
}
#precautions::before{
	position: absolute;
	top:-25px;
	left: 0;
	width: 100%;
	height: 25px;
	content: '';
	display: block;
	background-color: #ffffff;
	border-top: solid 1px #0070dc;
	border-bottom: solid 1px #0070dc;
	background-image: url("../img/common/bar02.png");
	background-position: 30px 50%;
	background-repeat: repeat-x;
	background-size: auto 11px;
}
#precautions .precautionWrap{
	position: relative;
	margin: 0 auto 10px auto;
	width: calc(100% - 30px);
	max-width: 960px;
	padding: 2px;
	background-color: #ff8c27;
	border: solid 1.5px #ab5a13;
	border-radius: 10px;
	box-sizing: inherit;
}
#precautions .precautionWrap .precautionInner{
	position: relative;
	margin: 0 auto;
	border-radius: 10px;
	border: solid 2px #ffffff;
	box-sizing: inherit;
}
#precautions .precautionWrap .precautionInner .ttl{
	position: relative;
	margin: 0 auto;
	padding: 12px 0;
	background-image: url("../img/common/icon_star.png");
	background-position: 5px 5px;
	background-repeat: no-repeat;
	background-size: 22px auto;
	text-align: center;
	color: #ffffff;
	font-weight: bold;
	cursor: pointer;
}
#precautions .precautionWrap .precautionInner .ttl::after{
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	height: 17px;
	width: 17px;
	content: '';
	display: block;
	background-image: url("../img/common/arrow.png");
	background-position: 0 0;
	background-repeat: no-repeat;
	background-size: contain;
	transition: all .3s ease-out;
}
#precautions .precautionWrap .precautionInner .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;
	color: #ffffff;
}
#precautions .CatTtl{
	position: relative;
	margin: 0 auto;
	padding: 3px 10px;
	width: calc(100% - 45px);
	max-width: 800px;
	background-color: #ffffff;
	text-align: center;
	font-size: 102%;
	font-weight: 700;
	color: #ff8c27;
}
#precautions .CatTtl.marginTop{margin: 20px auto 0 auto;}
#precautions  #limitlist .CatTtl{margin: 30px auto 0 auto;}
#precautions  #limitlist .CatTtl.margin{margin: 30px auto 15px 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 .faqWrap dl dd p{
	position: relative;
	width: calc(100% - 45px);
	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;
	padding-bottom: 3px;
	text-align: left;
	font-weight: bold;
	color: #FFFE29;
}
#precautions #cautionlist.faqWrap dl dd p, #precautions #limitlist dd p, #precautions .attWrap p{padding-left: 1.2em;}
#precautions #cautionlist.faqWrap dl dd p::before, #precautions #limitlist dd p::before, #precautions .attWrap p::before{
	position: absolute;
	content: '・';
	left: 0;
}
#precautions .attWrap{margin: -0.6em 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% - 40px);
	max-width: 800px;
}
#precautions  #limitlist dl{margin: 0 auto;}
#precautions a{color: #FFFFFF;}


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

	h2{
		margin: 35px auto 0 auto;
		padding: 100px 0 40px 0;
		background-image: url("../img/common/flag.png"),  url("../img/common/flag01.png"), url("../img/common/flag.png"),  url("../img/common/flag01.png");
		background-position: calc(50% - 130px) 0, calc(50% + 135px) 0, calc(50% + 380px) 0, calc(50% - 380px) 0;
		background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
		background-size: 250px auto, 255px auto, 250px auto, 255px auto;
	}
	h2::before{
		top:-35px;
		height: 35px;
		background-size: auto 20px;
	}
	
	/* tokyocity */
	#tokyocity{
		padding: 0 0 100px 0;
		background-size: auto 22px;
	}
	#tokyocity .lead{font-size: 130%;line-height: 1.8em;}

	#tokyocity .play h3{
		margin: 60px auto 10px auto;
		max-width: 480px;
	}
	#tokyocity .play{margin: 40px auto 0 auto;}
	#tokyocity .play ul{margin: 20px auto 0 auto;}
	#tokyocity .play .cautionWrap{text-align: center;}
	#tokyocity .play .cautionWrap p{
		padding-left: 1.1em;
		font-size: 86%;
		line-height: 1.5em;
		display: inline-block;
		width: auto;
	}
	#tokyocity .play .about{
		margin: 20px auto 10px auto;
		font-size: 100%;
		line-height: 1.5em;
	}

	/* tokuten */
	#tokuten{
		padding: 0 0 100px 0;
		border-bottom: solid 7px #ff8c27;
	}
	#tokuten h2 {padding: 120px 0 20px 0;}
	#tokuten .tokutenWrap{
		padding: 50px;
		max-width: 700px;
	}
	#tokuten .tokutenWrap .Img{
		width: 30%;
	}
	#tokuten .tokutenWrap .Txt{
		line-height: 2em;
		text-align: center;
	}
	#tokyocity .play .cautionWrap.nmargin{margin: 0 auto 20px auto;}
	#tokuten .tokutenWrap .cautionWrap p{
		display: inline-block;
		width: auto;
		text-align: center;
	}

	/* about */
	#about {
		padding: 70px 0 100px 0;
		background-size: auto 43px, auto 8px;
	}
	#about h2{
		padding: 40px 0 30px 0;
		background-image:none;
	}
	#about .aboutWrap{
		padding: 50px;
		text-align: center;
	}

	/* story */
	#story{
		padding: 0 0 150px 0;
		background-size: auto 22px;
	}
	#story .storyWrap{text-align: center;}

	
	/* FAQ */
	#precautions {
		padding: 80px 0 60px 0;
		background-size: auto 40px, 100% 120px;
	}
	#precautions::before{
		top:-35px;
		height: 35px;
		background-size: auto 20px;
	}
	#precautions .precautionWrap{margin: 0 auto 20px auto;}
#precautions .precautionWrap .precautionInner{
	position: relative;
	margin: 0 auto;
	border-radius: 10px;
	border: solid 2px #ffffff;
	box-sizing: inherit;
}
	#precautions .precautionWrap .precautionInner .ttl{
		padding: 15px 0;
		background-size: 30px auto;
		font-size: 140%;
	}
	#precautions .precautionWrap .precautionInner .ttl::after{
		right: 15px;
		height: 22px;
		width: 22px;
	}
	#precautions .CatTtl.marginTop{margin: 30px auto 0 auto;}
	#precautions  #limitlist .CatTtl{margin: 40px auto 10px auto;}
	#precautions  #limitlist .CatTtl.margin{margin:20px auto;}
	#precautions .faqWrap dl dd .title{
		margin:8px auto 0 auto;
		padding-bottom: 5px;
	}

}