@charset "utf-8";

#wrap{position: relative; height: auto; overflow: auto;}
#bg{
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: #000000;
	background-image: url("../img/bg_main.jpg");
	background-size: cover;
	background-position: 50% 0;
	background-repeat: no-repeat;
}

/* ヒント */
#hint{
	position: relative;
	margin: 0 auto;
	font-size: .14rem;
	color: #ffffff;
}
#hint .hintWrap{
	position: relative;
	margin: 0 auto;
    padding: 0;
    opacity: 0;
    height: 0;
	display:none;
	width: calc(100% - 50px);
}
#hint .hintWrap.dispAnimate{display: block; opacity: 1;height: auto;}
#hint .hintInner{
	position: relative;
	margin: 20px auto;
	padding: 30px;
	background-color: rgba(255,255,255,.25);
}
#hint .ttl{
	position: relative;
	margin: 0 auto 20px auto;
	font-size: .16rem;
	font-weight: 900;
}
#hint .hintTxt {
	position: relative;
	margin: 0 auto;
	padding: 0;
    opacity: 0;
    height: 0;
	display:none;
    overflow: hidden;
}
#hint .hintTxt.dispAnimate{display: block; opacity: 1;height: auto;overflow:visible;padding: 5px 0;}
#hint .hintTxt.border{border-top: solid 1px #ffffff;}
#hint .hintTxt p{text-align: left;padding: 5px 0;}
#hint .hintTxt img{
	position: relative;
	margin: 10px auto 0 auto;
	width: calc(100% - 30px);
	display: block;
}
#hint .hintTxt .ttlT{
	position: relative;
	margin: 10px auto;
	font-size: .14rem;
	font-weight: 900;
	padding: 20px 0 0 0;
	text-align: center;
}
#hint .btnhint, #hint .btnhint01, .closeBtn{
	position: relative;
	margin: 10px auto;
	display: block;
}
#hint .btnhint:hover, #hint .btnhint01:hover, .closeBtn:hover{cursor: pointer;}
#hint .btnhint span, #hint .btnhint01 span, .closeBtn span{
	position: relative;
	margin: 0 auto;
	border: solid 2px #ffffff;
	font-size: .14rem;
	font-weight: 900;
	display: inline-block;
	width: auto;
	padding: 5px 3em;
	color: #ffffff !important;
	transition: all .3s ease-out;
}
#hint .btnhint span.hintDisp{display: none;}
#hint .btnhint01 span.hintDisp{display: block; padding: 20px 0 0 0; border: none; font-size: .14rem;font-weight: 900 !important;}

/* ----- pc ----- */
@media screen and (min-width: 641px) {
    
    /* ヒント */
   #hint .hintWrap{width: 640px;}
	#hint .hintInner{
		margin: 40px auto;
		padding: 50px;
	}
	#hint .ttl{font-size: .24rem;margin: 0 auto 40px auto;}
	#hint .hintTxt img{
		margin: 20px auto 0 auto;
		width: calc(100% - 50px);
	}
	#hint .btnhint, #hint .btnhint01{
	position: relative;
	margin: 20px auto;
}

}