@charset "utf-8";

/* ========================== GLOBAL ========================== */
*{
	margin: 0;
	padding: 0;
}
html{
	height: 100%;
}
body{
	height: 100%;
	background: #222;
	color: #fff;
	font-family: "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}

a{
	outline: none;
	text-decoration: none;
	cursor: pointer;
}
img{
	max-width: 100%;
	border: none;
}

ul, ol{
    list-style: none;
}

#wrap{
	position: relative;
	max-width: 500px;
	min-height: 100vh;
	margin: 0 auto;
    background: #fff url("img/BG.jpg") repeat fixed center top / 500px auto;
	overflow: hidden;
    transition: background-position 3s;
}
#wrapInner{
	position: relative;
	min-height: 100vh;
    padding-bottom: 80px;
    z-index: 1;
    transition: height 1s;
}
/* jiggle */
#wrapInner.jigA1 #wrapMain{ transform: translate(-1px, -3px); }
#wrapInner.jigB1 #wrapMain{ transform: translate(0px, 3px); }
#wrapInner.jigA2 #wrapMain{ transform: translate(1px, -2px); }
#wrapInner.jigB2 #wrapMain{ transform: translate(0px, 2px); }
#wrapInner.jigA3 #wrapMain{ transform: translate(-0.3px, -1px); }
#wrapInner.jigB3 #wrapMain{ transform: translate(0.3px, 0.5px); }
#wrapInner.jigA4 #wrapMain{ transform: translate(0px, -0.5px); }
#wrapInner.jigB4 #wrapMain{ transform: translate(0px, 0.2px); }



/* -------------------------- COMMON CLASSES -------------------------- */
.serif{
	font-family:"游明朝体", "Yu Mincho", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "HG明朝E", "メイリオ", Meiryo, serif;
	font-weight: 500;
}

.w470{
    width: 470px;
    margin: 0 auto;
}
.w440{
    width: 440px;
    margin: 0 auto;
}

.postit{
    background: #f8f3a8;
}



/* -------------------------- SA -------------------------- */
.sa{
	opacity: 0;
	transform: translateY(10px);
	transition: 0.75s ease;
}
.on .sa.show{
	opacity: 1;
	transform: translateY(0px);
}
/*
.sItem{
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}
.on > .sItem{
    opacity: 1;
    transform: translateY(0px);
}

.sItem2{
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.5s ease;
}
.on2 .sItem2{
    opacity: 1;
    transform: translateY(0px);
}
*/






/* ========================== HEADER ========================== */
#pageTitle{
	position: relative;
	width: 100%;
	z-index: 101;
}

#pageTitle h1{
	max-width: 500px;
	margin: 0 auto;
}
#pageTitle h1 img{
	display: block;
}




/* ========================== BG GEARS ========================== */
#bgGears{
	position: fixed;
	top: 0;
	left: 50%;
	z-index: -1;
	width: 500px;
	height: 100%;
	opacity: 0.3;
	overflow: hidden;
	transform: translateX(-250px);
}
#bgGears .gear{
	display: block;
	position: absolute;
}
#gear01{ left:-26px; top:58px; width:106px; }
#gear02{ left:-18px; top:161px; width:142px; }
#gear03{ left:358px; top:275px; width:168px; }
#gear04{ left:440px; top:428px; width:140px; }
#gear05{ left:-39px; top:297px; width:105px; }
#gear06{ left:390px; top:555px; width:121px; }
#gear07{ left:-72px; top:603px; width:145px; }
#gear08{ left:-14px; top:733px; width:158px; }
#gear09{ left:-61px; top:876px; width:127px; }


#bgGears.on .gear{
	transition: 7s cubic-bezier(0.2, 0, 0.75, 1);
}
#bgGears.on .R{ transform: rotate(360deg); }
#bgGears.on .L{ transform: rotate(-360deg); }
#bgGears.on #gear01{ transition-delay:0.3s; }
#bgGears.on #gear02{ transition-delay:0.3s; }
#bgGears.on #gear03{ transition-delay:0s; }
#bgGears.on #gear04{ transition-delay:0s; }
#bgGears.on #gear05{ transition-delay:0.3s; }
#bgGears.on #gear06{ transition-delay:0s; }
#bgGears.on #gear07{ transition-delay:0.2s; }
#bgGears.on #gear08{ transition-delay:0.2s; }
#bgGears.on #gear09{ transition-delay:0.2s; }



/* ========================== WRAP MAIN ========================== */
#wrapMain{
	position: relative;
	min-height: 60vh;
	margin: 0 auto;
}
#wrapMainInner{
	max-width: 500px;
}

.stage{
    position: relative;
    text-align: center;
}

.sItem{
    display: block;
}

.step{
	display: block;
	width: 320px;
	margin: 15px auto;
	
}


/* ========================== STAGE0 ========================== */
#stage0{
    /*display: none;*/
}
#stage0 div.lead{
	background: url("img/00_leadBG.png") no-repeat 50% 50% / 100% auto;
}
#stage0 .guide{
	margin: auto;
}
#stage0 .guide img{
    display: block;
    margin: 0 auto;
}





/* ========================== MISSION STAGES ========================== */



/* ========================== STAGE 01 ========================== */
#stage1{
    /**/display: none;
    padding-top: 15px;
}
#stage1.on{
	display: block;
}

#signs{
	position: relative;
	height: 360px;
	background: url("img/01_signsBG.png?1") no-repeat 50% 50% / 100% auto;
}

#signs .sign{
	display: block;
	position: absolute;
	box-shadow: 0.5px 0.75px 1.1px rgb(0,0,0,0.35);
}
#signs .rect270{
	width: 135px;
	height: 85px;
}
#signs .rect160{
	width: 80px;
	height: 100px;
}
#signs .rect200{
	width: 100px;
	height: 46px;
}
#signs .og{ background:#eb974f; }
#signs .pr{ background:#cfc1dd; }
#signs .wh{ background:#fdf6dd; }
#signs .pn{ background:#f1bec0; }
#signs .gr{ background:#78c6aa; }
#signs .bg{ background:#e7d39b; }
#signs .mt{ background:#d5e3cb; }
#signs .br{ background:#c99e8d; }

#sign01{ left:25px; top:40px; transform:rotate(-1deg); }
#sign02{ left:185px; top:35px; transform:rotate(1deg); }
#sign03{ left:290px; top:35px; transform:rotate(-1deg); }
#sign04{ left:40px; top:160px; transform:rotate(1deg); }
#sign05{ left:190px; top:160px; transform:rotate(-1deg); }
#sign06{ left:407px; top:160px; transform:rotate(1deg) translateX(-50%); }
#sign06::before, #sign06::after{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
}
#sign06::before{ background:linear-gradient(to right, rgba(0,0,0,0.3), rgba(0,0,0,0.1)); }
#sign06::after{ background:linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0.3)); }

#sign07{ left:25px; top:35px; box-shadow:none!important; }
#sign08{ left:90px; top:170px; transform:rotate(-1.5deg); }
#sign09{ left:200px; top:195px; transform:rotate(-1deg); }

#sign07, #sign08, #sign09{ display:none; opacity:0; }


.m1 #sign01, .m1 #sign02, .m1 #sign03{ opacity:0; }
.m1 #sign01{ transition: 0.5s ease 0s; left:-5px; }
.m1 #sign02{ transition: 0.5s ease 0.2s; left:155px; }
.m1 #sign03{ transition: 0.5s ease 0.4s; left:265px; }

.m2 #sign07{ display:block; transition: opacity 0.8s ease 0s; opacity:1; background:url("img/sign07.png") no-repeat 50% 50% / 140px auto; }

.m2 #sign04{ transition: 0.85s ease 0.5s; left:188px; top:38px; transform:rotate(-2deg); }
.m2 #sign05{ transition: 0.75s ease 0.2s; left:342px; top:42px; transform:rotate(0.5deg); }

.m3 #sign08{ transition: 0.5s ease 0.4s; left:120px; top:150px; opacity:1; }
.m3 #sign09{ transition: 0.7s ease 0.7s; left:230px; top:175px; opacity:1; }

.m4 #sign06{ transition: width 0.3s ease-in 0s; width:0px; }
.m4_ #sign06{ transition: width 0.3s ease-out 0s; width:80px; height: 100px; top:150px; background-color:#c5da70; }
.m4 #sign06::before{
	opacity: 0.5;
	transition: 0.3s ease-in 0s;
}
.m4 #sign06::after{
	opacity: 0.5;
	transition: 0.01s ease-in 0.29s;
}
.m4_ #sign06::before{
	display: none;
	transition: 0s;
}
.m4_ #sign06::after{
	opacity: 0;
	transition: 0.3s ease-out 0s;
}

#signs .note{
	position: absolute;
	left: 15px;
}
#signs .note img{
	display: block;
}
#signsNote{
	bottom: 55px;
}
#signsNote2{
	bottom: 25px;
	opacity: 1;
	cursor: pointer;
	transition: 0.3s;
}
#signsNote2::after{
	content: "";
	display: block;
	position: absolute;
	bottom: 0px;
	left: 129px;
	width: 50px;
	height: 2px;
	background: #6c430b;
	transform: translateX(-50%);
	transition: 0.3s;
}
#signsNote2:hover{
	opacity: 0.7;
}
#signsNote2:hover::after{
	left: 138px;
	width: 260px;
}


/* ========================== STAGE2 ========================== */
#form2{
    display: none;
	position: relative;
	transition: 0.75s ease;
}
#form2.standby{
	display: block;
	opacity: 0;
}
#form2.show{
	opacity: 1;
}

#step03note{
	position: absolute;
	top: -12px;
	left: 20px;
	width: 460px;
	opacity: 0;
	transform: translateX(-50px);
	transition: 0.75s ease-out;
}
#step03note.show{
	opacity: 1;
	transform: translateX(0px);
}





/* ========================== FORM ========================== */
.form{
    margin: 0;
	padding: 30px 30px;
	transition: transform 0.05s;
}

.form .inner{
	display: flex;
	position: relative;
	justify-content: space-between;
	transition: transform 0.05s;
}
.form .inner::before,
.form .inner::after{
	content: "";
	display: block;
	position: absolute;
	left: 300px;
	width: 0px;
	height: 0px;
}
.form .inner::before{
	top: 0px;
	border-top: 10px solid #3bb7d8;
	border-left: 10px solid transparent;
}
.form .inner::after{
	bottom: 0px;
	border-bottom: 10px solid #3bb7d8;
	border-left: 10px solid transparent;
}

.form input{
	display: block;
	position: relative;
	width: 300px;
	height: 65px;
	background: rgba(255,255,255,0.75);
	border: solid 5px #3bb7d8;
	border-radius: 10px;
    outline: none;
    text-indent: 10px;
	color: #111;
	font-size: 36px;
	z-index: 1;
    transition: 0.8s;
}
.form input:focus{
    background: rgba(255,255,255,0.95);
}
.form input::placeholder{
    font-size: 32px;
    color: rgba(0,0,0,0.15);
}
.form .btn{
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 130px;
	height: 75px;
	background: #3bb7d8;
	border-radius: 0 15px 15px 0;
	z-index: 2;
	cursor: pointer;
}
.form .btn img{
	width: 100px;
	height: 50px;
	padding-bottom: 3px;
	transition: ease 0.1s;
}
.form .btn:hover img{
	transform: scale(1.05);
}
#form1 .note, #form2 .note{
	display: block;
	position: relative;
	top: -15px;
}

/* jiggle */
.form.L .inner{
	transform: translateX(-5px);
}
.form.R .inner{
	transform: translateX(5px);
}

.form .cleared{
    opacity: 0;
    -webkit-filter: brightness(10) blur(2px);
    -moz-filter: brightness(10) blur(2px);
    -ms-filter: brightness(10) blur(2px);
    filter: brightness(10) blur(2px);
    transform: scale(1.5);
    transition: 0.7s ease 0.1s, opacity 0.6s ease 0.1s;
}
.form .cleared input{
    background: #fff;
    transition: 0.5s ease 0.1s
}



/* ========================== FORM B ========================== */
.formB{
     padding: 20px 0px;
}
.formB .inner{
    display: block;
}
.formB .inner::before, .formB .inner::after{
    display: none;
}
.formB input{
	width: 280px;
	height: 64px;
	background: rgba(120,137,120,0.75);
	border: solid 5px #fff;
	border-radius: 15px;
    text-indent: 10px;
	color: #fff;
	font-size: 32px;
    font-weight: bold;
	z-index: 1;
}
.formB input::placeholder{
    text-align: center;
    text-indent: 0;
    color: rgba(255,255,255,0.25);
    font-size: 29px;
    letter-spacing: -0.01em;
}
.formB .btn{
	width: 180px;
	height: 60px;
    margin: 20px auto;
    padding: 10px 60px;
	background: #f78236;
	border-radius: 15px;
    box-shadow: 0px 0px 0px rgba(247, 130, 54, 0.0), 0px 7px 0px rgba(0,0,0,0.5);
    transform: translateY(-3px);
    transition: 0.3s;
}
.formB .btn:hover{
    background: #f78236;
    box-shadow: 0px 0px 25px rgba(247, 130, 54, 0.5), 0px 6px 0px rgba(0,0,0,0.5);
    transform: translateY(−2px);
}
.formB .btn:active{
    box-shadow: 0px 0px 15px rgba(247, 130, 54, 0.7), 0px 1px 0px rgba(0,0,0,0.3);
    transform: translateY(1px);
}
.formB .btn img{
	width: 180px;
	height: 60px;
}




/* ========================== DIALOG ========================== */
.dialog{
    display: none;
}
.dialog{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(51,51,51,0.95);
    overflow: auto;
    z-index: 102;
}
.dialog .inner{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 480px;
    height: 100%;
    margin: 0 auto;
    opacity: 0;
	overflow: auto;
    transform: translateY(10px);
    transition: 0.5s ease;
}
.dialog.on .inner{
    opacity: 1;
    transform: translateY(0px);
}
.dialog .main{
    position: relative;
	max-height: 90%;
	max-height: calc(100% - 60px);
	background: #f2eddb;
	border-radius: 10px;
	overflow: auto;
}

.dialog .btnBack{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 140px;
    height: 50px;
    margin: 10px auto;
    padding: 5px 10px;
    background: #3bb7d8 url("img/btnBack.png") no-repeat 50% 50% / 80px auto;
    border-radius: 10px;
    box-shadow: 0px 2px 0px rgba(0,0,0,0.35);
	z-index: 1;
    cursor: pointer;
    transform: translateY(-2px);
    transition: 0.3s;
}
.dialog .btnBack:hover{
    box-shadow: 0px 0px 0px rgba(0,0,0,0.1);
	transform: translateY(0px);
}


/* ========================== HELP ========================== */
#dialogHelp .main{
	background: #f2eddb url("img/01_signsBG.png") no-repeat local 50% -40px / 100% auto;
}
#dialogHelp .title, #dialogHelp .image{
	display: block;
	width: 440px;
	margin: 0 auto;
}
#dialogHelp .title{
	padding: 10px 0 5px 0;
}
#helpImg{
	padding: 0 0 25px 0;
}

#dialogHelp .btnBack{
    margin: 20px auto 30px auto;
}


/* ========================== X ========================== */
#dialogX .main{
    position: relative;
	padding: 25px 10px;
	background: #f2eddb;
	border-radius: 10px;
}
#dialogX .main::before{
	content: "";
	display: block;
	position: absolute;
	top: 8px;
	left: 8px;
	width: calc(100% - 20px);
	height: calc(100% - 20px);
	border: solid 2px #937c5f;
	border-radius: 6px;
	z-index: 0;
}
#dialogX .main .lead{
	width: 440px;
}




/* ========================== FOOTER ========================== */
footer{
    position: absolute;
    bottom: 0;
	width: 100%;
    margin: 20px 0 0 0;
	padding: 30px 0px;
    background: #3bb7d8;
	z-index: 100;
}
footer ul{
    max-width: 97%;
    margin: 0 auto;
	text-align: center;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	opacity: 0.75;
}
footer ul li{
	display: inline-block;
    white-space: nowrap;
}
footer ul li::after{
	content: ", ";
    display: inline-block;
    padding: 0 0.5em 0 0;
}
footer ul li:first-child::after,
footer ul li:last-child::after{
	content: "";
    display: none;
}


#holyLight{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 200vh;
	background: #fff;
	z-index: 999;
}