@charset "utf-8";

/* ------------------------------------------------------------ common */

h3 { font-size: 27px; font-weight: 700; line-height: 170%; }

#intro_game .box p,
#save .box p,
#space .box p,
#step p.lead,
#place p.lead { font-size: 14px; line-height: 200%; }

#step ul li p,
#theme ul li p,
#place ul li p { font-size: 14px; line-height: 178.6%; }

#step ul li h4,
#theme ul li h4,
#place ul li h5 { font-size: 20px; font-weight: 700; line-height: 140%; text-align: center; }

/* ------------------------------------------------------------ fv */
#fv { background: url(../images/game/fv.jpg) center top no-repeat; background-size: 1390px; padding: 138px 0; position: relative; }
#fv h2 { position: relative; z-index: 2; }
#fv h2 img { display: block; margin: 0 auto; padding: 0 0 21px; }

/* ------------------------------------------------------------ intro_game */
#intro_game { padding: 77px 0 85px; }
#intro_game img.photo { float: left; width: 482px; height: auto; }
#intro_game .box { float: left; width: 482px; padding: 0 0 0 36px; }
#intro_game .box h3 { padding: 10px 0 9px; }
#intro_game .box p { width: 450px; }   /* 比率どおりの436pxだと4行に割れるため、カンプと同じ3行を保てる幅にしている */
#intro_game .box p.time { width: 241px; background: #000; color: #fff; margin: 26px 0 0; padding: 14px 17px 15px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
#intro_game .box p.time span { font-size: 13px; font-weight: 700; display: inline-block; vertical-align: top; line-height: 100%; padding: 5px 0 0px;}
#intro_game .box p.time em { font-size: 22px; font-weight: 700; padding: 0 0 0 8px; display: inline-block; vertical-align: top; line-height: 100%;}

/* ------------------------------------------------------------ step */
#step { background: #efefec; padding: 45px 0 51px; overflow: hidden;}
#step h3 { text-align: center; }
#step p.lead { text-align: center; padding: 0 0 49px; }
#step ul { margin: 0 0 0 -65px; }
#step ul li { float: left; width: 290px; margin: 0 0 0 65px; position: relative; }
#step ul li .photo { position: relative; }
#step ul li .photo img { width: 100%; height: auto; }
#step ul li .photo .num { position: absolute; top: -18px; left: -11px; line-height: 0;box-shadow: 3px 3px 10px 1px rgba(0,0,0,0.16); }
#step ul li .photo .num img { width: 55px; height: auto; }
#step ul li + li:before { content: ""; position: absolute; top: 88px; left: -45px; margin: -12px 0 0; width: 0; height: 0; border-left: 24px solid #000; border-top: 12px solid transparent; border-bottom: 12px solid transparent; }
#step ul li h4 { padding: 12px 0 7px; }

/* ------------------------------------------------------------ theme */
#theme { padding: 73px 0 95px; }
#theme h3 { text-align: center; padding: 0 0 23px; }
#theme ul { margin: 0 0 0 -29px; }
#theme ul li { float: left; width: 314px; margin: 0 0 0 29px; }
#theme ul li .photo img { width: 100%; height: auto; }
#theme ul li h4 { padding: 10px 0 7px; }

/* ------------------------------------------------------------ save */
#save { padding: 0 0 98px; }
#save img.photo { float: right; width: 482px; height: auto; }
#save .box { float: left; width: 436px; padding: 18px 0 0 45px; }
#save .box h3 { padding: 0 0 15px; }
#save .box p { width: 436px; line-height: 214.3%;}
#save .box ul { padding: 25px 0 0; }
#save .box ul li { font-size: 18px; line-height: 138.9%; min-height: 25px; padding: 0 0 0 35px; font-weight: 500; position: relative;}
#save .box ul li:not(:last-child) {margin: 0 0 17px;}
#save .box ul li:before{content: ""; display: block; width: 25px; height: 25px; background: url(../images/game/icn_1.svg) left top no-repeat; background-size: 100%; position: absolute; top: 50%; transform: translateY(-50%); left: 0px;}

/* ------------------------------------------------------------ place */
#place { background: #efefec; padding: 50px 0 55px; }
#place h3 { text-align: center; padding: 0 0 21px; }
#place h4 { font-size: 16px; font-weight: 700; line-height: 161.1%; text-align: center; }
#place p.lead { text-align: center; padding: 0 0 32px; }
#place ul { margin: 0 0 0 -20px; }
#place ul li { float: left; width: 235px; margin: 0 0 0 20px; }
#place ul li .photo img { width: 100%; height: auto; }
#place ul li h5 { padding: 8px 0 7px; }

/* ------------------------------------------------------------ space */
#space { padding: 93px 0 0; }
#space img.photo { float: left; width: 482px; height: auto; }
#space .box { float: right; width: 482px; }
#space .box h3 { padding: 18px 0 7px; }
#space .box p { width: 436px; line-height: 214.3%;}
#space .box p .marker { font-size: 16px; line-height: 187.5%; font-weight: 700; padding: 0 0 6px; background: -webkit-linear-gradient(to bottom, transparent 53%, #ffe200 53%); background: linear-gradient(to bottom, transparent 53%, #ffe200 53%); }

#space .btn_box { padding: 27px 0 0; }
#space .btn_box p { float: left; width: 209px; margin: 0 18px 0 0; }
#space .btn_box p:last-child { margin: 0; }
#space .btn_box a { display: block; position: relative; width: 209px; height: auto; text-align: center; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }
#space .btn_box a:after { content: ""; position: absolute; top: 50%; right: 16px; margin: -4px 0 0; width: 8px; height: 8px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
#space .btn_box p.consult a { background: #1db7a3; color: #fff; font-size: 14px; font-weight: 700; line-height: 200%; padding: 11px 0 12px;}
#space .btn_box p.consult a:after { border-top: 2px solid #fff; border-right: 2px solid #fff; }
#space .btn_box p.tel a { background: #fff; border: 1px solid #4e4e4e; color: #4e4e4e; padding: 6px 0 4px; }
#space .btn_box p.tel a:after { border-top: 2px solid #4e4e4e; border-right: 2px solid #4e4e4e; }
#space .btn_box p.tel a span { display: block; font-family: "DIN Alternate", Arial, sans-serif; font-size: 22px; font-weight: 700; line-height: 24px; letter-spacing: 0.03em; }
#space .btn_box p.tel a em { display: block; font-size: 9px; color: #888888; line-height: 15px; letter-spacing: 0.03em; }

/* ------------------------------------------------------------ price */
#price { padding: 93px 0 44px; }
#price h3.h3 { padding: 0 0 14px; }
#price h3.h3 img { width: 139px; height: auto; }
#price .price { font-size: 16px; line-height: 166.7%; text-align: center; }


@media only screen and (max-width:640px){
	.inner{padding: 0 7%; width: 86%;}
	#intro_game .box h3,
	#step h3,
	#theme h3,
	#save .box h3,
	#place h3,
	#space .box h3 { font-size: 20px; text-align: center; }

	#intro_game .box p,
	#save .box p,
	#space .box p,
	#step p.lead,
	#place p.lead { font-size: 13px; }

	#step ul li p,
	#theme ul li p,
	#place ul li p { font-size: 13px; line-height: 25px; }

	#step ul li h4,
	#theme ul li h4,
	#place ul li h5 { font-size: 18px; }

	/* ------------------------------------------------------------ fv */
	#fv { padding: 80px 0; background-size: cover; }
	#fv h2 img { width: auto; height: 45px; padding: 0 0 15px; }

	/* ------------------------------------------------------------ intro_game */
	#intro_game { padding: 35px 0 40px; }
	#intro_game img.photo { float: none; width: 100%; height: auto; }
	#intro_game .box { float: none; width: 100%; padding: 15px 0 0; }
	#intro_game .box h3 { padding: 0 0 10px; }
	#intro_game .box p { width: 100%; }
	#intro_game .box p.time { width: 100%; margin: 20px auto 0; padding: 10px 10px 11px; text-align: center; }
	#intro_game .box p.time span { font-size: 14px; padding: 6px 0 0; }
	#intro_game .box p.time em { font-size: 24px; padding: 0 0 0 10px; }

	/* ------------------------------------------------------------ step */
	#step { padding: 40px 0 30px; }
	#step h3 { padding: 0 0 10px; }
	#step p.lead { text-align: left; padding: 0 0 30px; }
	#step ul { margin: 0; }
	#step ul li { float: none; width: 100%; margin: 0 0 75px; }
	#step ul li:last-child { margin: 0; }
	#step ul li .photo .num { top: -12px; left: -6px; width: 12%; height: auto;}
	#step ul li .photo .num img { width: 100%; height: auto; }
	#step ul li + li:before { top: auto; left: 0; right: 0; bottom: 100%; margin: 0 auto 26px; border-left: 26px solid transparent; border-right: 26px solid transparent; border-top: 26px solid #000; border-bottom: 0; }
	#step ul li h4 { padding: 12px 0 5px; }

	/* ------------------------------------------------------------ theme */
	#theme { padding: 40px 0; }
	#theme h3 { padding: 0 0 20px; }
	#theme ul { margin: 0; }
	#theme ul li { float: none; width: 100%; margin: 0 0 25px; }
	#theme ul li:last-child { margin: 0; }
	#theme ul li h4 { padding: 12px 0 5px; }

	/* ------------------------------------------------------------ save */
	#save { padding: 0 0 40px; }
	#save img.photo { float: none; width: 100%; height: auto; }
	#save .box { float: none; width: 100%; padding: 20px 0 0; }
	#save .box h3 { padding: 0 0 15px; }
	#save .box p { width: 100%; }
	#save .box ul { padding: 15px 0 0; }
	#save .box ul li { font-size: 15px; line-height: 22px; min-height: 22px; padding: 0 0 0 30px; background-size: 22px auto; }
	#save .box ul li:not(:last-child) {margin: 0 0 12px;}
	#save .box ul li:before{width: 22px; height: 22px;}

	/* ------------------------------------------------------------ place */
	#place { padding: 40px 0 30px; }
	#place h3 { padding: 0 0 15px; }
	#place h4 { font-size: 16px; }
	#place p.lead { text-align: left; padding: 0 0 25px; }
	#place ul { margin: 0; }
	#place ul li { float: left; width: calc((100% - 10px) / 2); margin: 0 10px 20px 0; }
	#place ul li:nth-of-type(2n) { margin: 0 0 20px; }
	#place ul li h5 { font-size: 16px; padding: 10px 0 5px; }

	/* ------------------------------------------------------------ space */
	#space { padding: 40px 0 0; }
	#space img.photo { float: none; width: 100%; height: auto; }
	#space .box { float: none; width: 100%; }
	#space .box h3 { padding: 20px 0 15px; }
	#space .box p { width: 100%; }
	#space .box p .marker { font-size: 14px; padding: 0 0 2px; background: -webkit-linear-gradient(to bottom, transparent 48%, #ffe200 48%); background: linear-gradient(to bottom, transparent 48%, #ffe200 48%);}

	#space .btn_box { padding: 25px 0 0; text-align: center; }
	#space .btn_box p { float: none; margin: 0 auto 10px; width: 260px; }
	#space .btn_box p:last-child { margin: 0 auto; }
	#space .btn_box a { width: 260px; }
	#space .btn_box p.consult a { font-size: 15px; padding: 12px 0 13px; }
	#space .btn_box p.tel a { padding: 7px 0 4px; }
	#space .btn_box p.tel a span { font-size: 24px; line-height: 26px; }
	#space .btn_box p.tel a em { font-size: 10px; line-height: 16px; }

	/* ------------------------------------------------------------ price */
	#price { padding: 45px 0 20px; }
	#price h3.h3 img { height: auto; width: 125px; }
	#price .price { font-size: 16px; }

}

@media only screen and (orientation : portrait) {
	#navigation{ position: fixed; top:0; margin: 0 0 0; right: 0; left: 0; }
}