#land-base{
	min-height		: 100vh;
	position		: relative;
	width			: 100%;
}

.section-inner{
	position			: relative;
	height				: 100%;
	width				: 100%;
	display				: block;	
}


/*----------------------------------------------------------
#title
----------------------------------------------------------*/
#title{
	font-weight		: 900;
	font-size		: 2rem;
	padding			: 2rem 0;
	line-height		: 4rem;
}

@media (min-width:576px) {
	#title{
		font-size		: 6rem;
		padding			: 6rem 0;
		line-height		: 7rem;
	}
}

/*---------------------------------------------------
logo
---------------------------------------------------*/
#logo{
	width				: 100%;
	max-width			: 300px;
	margin				: auto;
	position			: relative;
	padding				:0 
	
}

#logo img{
	display				: block;
	width				: 100%;
	max-width			: 280px;
	position			: absolute;
	left				: 50%;
	top				: 50%;
	transform			: translate(-50%,-50%);	
	padding-top			: 3rem;
}

#logo.hidden {
	opacity				: 0;
}

/*---------------------------------------------------
#temple
---------------------------------------------------*/
#temple{
	position			: absolute;
	width				: 100%;
	height				: 550px;
	display				: block;	
	bottom				: 0;
	left				: 0;	
}

#btn_box{
	display		: none;
}

#comment-body #btn_box{
	padding				: 1rem;
	margin-top			: 2rem;
	display				: block;
	position			: relative;
}

.btn-link,
.btn-kuji{
	position			: relative;
	z-index				: 3;
	background			: #ffe300;
	line-height			: 1.3;
	padding				: 1rem;
	border-radius			: 4px;
	font-size			: 1.75rem;
	cursor				: pointer;
	display				: block;
}



#btn_no{
	background			: #ddd;
}

/*---------------------------------------------------
#chara_box,
---------------------------------------------------*/
#chara_box{
	position			: absolute;
	width				: 320px;
	height				: 550px;
	display				: block;	
	bottom				: 0;
	left				: 50%;	
	transform			: translateX(-50%);
}

#comment.hidden {
	opacity				: 0;
}


#room{
	position			: absolute;
	height				: 100%;
	width				: 100%;
	display				: block;
	bottom				: 0;
}



/*---------------------------------------------------
chara
---------------------------------------------------*/

#chara{
	width					: 200px;
	height					: 260px;
	background-image			: url('../../images/chara_default.png');
	background-repeat			: no-repeat;
	margin					: 0 auto;
	background-position			: 0 0;
	position				: absolute;
	left					: 50%;
	bottom					: 260px;
	margin-left				: -100px;
	display					: block;
}

#chara.fly_down{
	background-position			: -600px 0;
}



#comment{
	display				: block;
	padding				: 15px 20px;
	min-width			: 100px;
	max-width			: 320px;
	width				: 100%;
	height				: 170px;
	font-size			: 16px;
	padding-top			: 3rem;
	background			: #fff;
	box-sizing			: border-box;
	border-radius			: 1rem;
	text-align			: center;
	position			: absolute;
	left				: 50%;
	bottom				: 40px;
	transform			: translateX(-50%);
	-webkit-transform		: translateX(-50%);
	z-index		: 3;
}



#comment .hitokoto{
	padding-top	: 1rem;
	font-size:	 1.4rem;
}

#comment .otsuge{
	font-size:	 1.6rem;
}
	
#comment-body{
	height		: 105px;
	overflow	: hidden;
}

#comment-body ul li{
	height		: 105px;
	overflow	: hidden;
	display		: none;
}

#comment-body ul li.active{
	display		: block;
}

#badge{
	width		: 130px;
	height		: 30px;
	position	: absolute;
	bottom		: 150px;
	left		: 20px;
	border-radius	: 15px;
	font-size	: 1.2rem;
	line-height	: 30px;
}
#badge:after{
	position	: relative;
}

.me #badge{
	background	: #ffe300;
}

.me #badge:after{
	content		: "ハリーさん";
	position	: relative;
}

.you #badge{
	background	:#73d5b5;

}

.you #badge:after{
	content		: "あなた";
}

.kami #badge{
	background	: #333;
	color		: #fff;
}

.kami #badge:after{
	content		: "かんだり様";
	
}

.b .kami #badge:after{
	content		: "黒ハリーさん";
	
}


#more{
	position	: relative;
	height		: 90px;
	width		: 100%;
	cursor		: pointer;
	display		: block;
}

#close{
	position	: relative;
	height		: 90px;
	width		: 100%;
	cursor		: pointer;
	display		: block;
}

#more i{
	position	: absolute;
	width		: 60px;
	top		: 0;
	left		: 50%;
	margin-left	: -30px;
	font-size	: 6rem;
	color		: #5c6669;
	-webkit-animation-duration		: 1s;
	animation-duration			: 1s;
	-webkit-animation-name			: more;
	animation-name				: more;
	animation-timing-function		: ease-in;	
	-webkit-animation-timing-function	: ease-in;
	-webkit-animation-iteration-count	: infinite;
	animation-iteration-count		: infinite;
	pointer-events				: none;	
}


/*---------------------------------------------------
kami
---------------------------------------------------*/
#chara.kami{
	background			: url('../../images/kami.png') left center;
}

.b #chara.kami{
	background			: url('../../images/kami_b.png') left center;
}


/*---------------------------------------------------
sky
---------------------------------------------------*/
#sky{
	position	: absolute;
	width		: 100%;
}





/*---------------------------------------------------
#comment
---------------------------------------------------*/

#comment{
	font-size			: 2rem;
	line-height			: 1.3;
	font-weight			: bold;
}
#comment h2{
	font-size			: 5rem;
	line-height			: 1.2;
}


/*----------------------------------------------------------
#screen
----------------------------------------------------------*/
#screen{
	display				: block;
	height				: 100%;
	width				: 100%;
	position			: relative;
	overflow			: hidden;
}
/*----------------------------------------------------------
.scroll-contents{
----------------------------------------------------------*/
.scroll-contents{
	display				: block;
	height				: 100%;
	width				: 100%;
	position			: relative;
	margin-right			: -17px; /* オーバーレイスクロールバーを消す */
	padding-right			: 17px; /* オーバーレイスクロールバーを消す */
	overflow			: hidden;
}


.scroll-contents.is-scrollbar {
  padding-right: 0;
}

.section{
	padding				: 0;
	width				: 100%;
	height				: 100%;
	position			: relative;
	display				: block;
}
.scroll-contents .section{
	z-index				: 2;
}


#contents-1{
	position	 		: absolute;
	top				: 0;
	left				: 0;
	display				: block;
}

#sky{
	background-image		: linear-gradient(to top, #b2dfff 0%, #ffde7b 100%);
}


#sky-1:after{
	content				: "";
	height				: 191px;
	width				: 100%;	
	position			: absolute;
	bottom				: 142px;
	left				: 0;
	z-index				: 1;
	background-image		: url(../../images/border-image.png);
	background-repeat		: repeat-x;
	background-position		: top center;
}


#sky-1:before{
	content				: "";
	height				: 332px;
	width				: 100%;	
	bottom				: 0;
	left				: 0;
	position			: absolute;
	background			:#6fbf82;
	background-position		: right 0% bottom 45%;
}

#sky-5{
	background			: #fff;
	z-index				: 2;
}

#sky-4{
	background-image		: url(../../images/heaven_bottom.png);
	background-repeat		: repeat-x;	
	background-position		: top center;
	z-index				: 2;
}

.result1 #heaven{
	background			: #ffc8c8;
}
.result2 #heaven{
	background			: #ffe3dd;
}
.result3 #heaven{
	background			: #beebc9
}
.result4 #heaven{
	background			: #4eb79a;
}

.result5 #heaven{
	background			: #33a283;
}
.result6 #heaven{
	background			: #3389a2;
}
.result7 #heaven{
	background			: #486770;
}

.result8 #heaven{
	background			: #a80202;
}


#heaven:after{
	content				: "";
	height				: 120px;
	width				: 100%;
	position			: absolute;
	bottom				: 60px;
	left				: 0;
	z-index				: 1;
	background-image		: url(../../images/heaven_top.png);
	background-repeat		: repeat-x;	
	background-position		: bottom center;
}

#heaven:before{
	content				: "";
	height				: 120px;
	width				: 100%;
	position			: absolute;
	bottom				: 0px;
	left				: 0;
	z-index				: 3;
	background-image		: url(../../images/heaven_top.png);
	background-repeat		: repeat-x;	
	background-position		: bottom center;
}


/*----------------------------------------------------------
#footer
----------------------------------------------------------*/
#footer a{
	display: inline-block;
}