@charset 'utf-8';


/*=======================================================
	泣き止みハグ動画 ハグ～ンのハグハグソング
=======================================================*/

/* chrome対応 */
img{
	backface-visibility: hidden;
}

#song_top{
	background-color: #fff;
	position: relative;
}


/*** header ***/

#song_header{
	background-image: url("../img/main_bg.jpg");
	background-repeat: no-repeat;
	background-position: center top -35px;
	position: relative;
}

#song_header #hugoon_ttl{
	text-align: center;
	margin-bottom: 25px;
	position: relative;
}

#hugoon_ttl .ttl_main{
	width: 100%;
	max-width: 645px;
	margin: 0 auto;
	padding: 30px 0 0 0;
}

#hugoon_ttl .ttl_main img{
	width: 90%;
	height: auto;
}

#hugoon_ttl .ttl_up{
	display: inline-block;
	position: absolute;
	top: 30px;
	left: 65px;
}

.cm_cont{
	margin: 0 auto;
	width: 90%;
	box-sizing: border-box;
}

.video-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	border: solid 4px #3cbfed;
	box-sizing: border-box;
}

.video-container iframe, 
.video-container object, 
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#song_header nav#header_nav{
}

#header_nav ul li{
	display: inline-block;
	position: absolute;
	transition: 0.5s;
}

#header_nav ul li.header_nav_result{
	width: 154px;
	top: 150px;
	left: 30px;
}

#header_nav ul li.header_nav_comment{
	width: 220px;
	top: 20px;
	right: 42px;
}

#header_nav ul li.header_nav_song{
	width: 144px;
	top: 165px;
	right: 30px;
}

.header_nav_result img,
.header_nav_comment img,
.header_nav_song img{
	width: 100%;
	height: auto;
}

#header_nav ul li:hover{
	transform: translate(0, 10%);
}


#song_header .top_lead{
	width: 90%;
	text-align: center;
	margin: 50px auto 0 auto;
}


/*** article common ***/

article{}

section.article_area{
	color: #4e4e4e;
	width: 90%;
	max-width: 810px;
	padding: 50px 30px 30px 30px;
	border: solid 2px #7ecef4;
	border-radius: 20px;
	box-sizing: border-box;
}


/*** 検証結果 ***/

#result_area{
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 1.8;
	margin: 170px auto 0 auto;
	position: relative;
}

#result_area h2{
	display: inline-block;
	position: absolute;
	top: -60px;
	left: -48px;
}

#result_area .result_ttl{
	text-align: center;
	font-size: 20px;
	font-size: 2rem;
	font-weight: bold;
	color: #7ecef4;
	margin: 0 auto 1.5em auto;
}

.result_column{
	font-size: 16px;
	font-size: 1.6rem;
	color: #fff;
	width: 100%;
	margin: 20px auto 0 auto;
	padding: 2em;
	border-radius: 10px;
	background-image: url("../img/result_column_bg.jpg");
	box-sizing: border-box;
}

.result_column .quest{
	text-indent: -1.75em;
	margin-bottom: 20px;
	padding: 0 0 10px 1.75em;
	border-bottom: solid 1px #fff;
}

.result_column .graph{
	text-align: center;
	margin-bottom: 2em;
	position: relative;
}

.result_column .graph .icon_graph_left{
	position: absolute;
	bottom: 0;
	left: 0;
}

.result_column .graph .icon_graph_right{
	position: absolute;
	bottom: 0;
	right: 0;
}

.result_column ul{
	margin-right: -14px;
}

.result_column ul:after{
	content: "";
	display: block;
	clear: both;
	height: 0;
}

.result_column li{
	float: left;
	font-size: 16px;
	font-size: 1.6rem;
	color: #3cbfed;
	width: 334px;
	margin: 15px 14px 0 0;
	padding: 15px;
	border-radius: 10px;
	background-color: #fff;
	box-sizing: border-box;
}

.result_column .answer{}

.result_column .result_more{
	text-align: center;
}

.result_column .result_more_btn{
	cursor: pointer;
	display: inline-block;
	padding: 0.5em 1em;
	border: solid 2px #fff;
	border-radius: 2em;
	box-sizing: border-box;
}

.result_column .close{
	margin-top: 2em;
	padding: 0.5em 2em;
}

.note_indent1{
	font-size: 80%;
}

#result_area .result_detail_ttl{
	text-align: center;
	font-size: 20px;
	font-size: 2rem;
	font-weight: bold;
	line-height: 1;
	color: #7ecef4;
	width: 8em;
	margin: 40px auto 20px auto;
	padding: 10px;
	border: solid 2px #7ecef4;
	border-radius: 22px;
	box-sizing: border-box;
}

.result_detail{
	width: 100%;
	max-width: 490px;
	margin: 0 auto;
	position: relative;
}

.result_detail .research{
	display: inline-block;
}

.result_detail .icon_hugoon{
	display: inline-block;
	position: absolute;
	top: -150px;
	right: -120px;
}

#result_area .icon_resuit{
	width: 50%;
	position: absolute;
	top: -140px;
	right: 5%;
}

#result_area .icon_resuit img{
	width: 100%;
	height: auto;
}


/*** 先生・制作陣のコメント ***/

#comment_area{
	line-height: 1.8;
	position: relative;
	margin: 120px auto 0 auto;
}

 #comment_area h2{
	display: inline-block;
	position: absolute;
	top: -115px;
	left: -70px;
}

#comment_area .comment_single{
	margin: 60px auto 0 auto;
}

#comment_area .comment_single:first-of-type{
	margin: 0 auto 0 auto;
}

.comment_single .comment_profile_wrap{}

.comment_single .comment_profile_wrap:after{
	content: "";
	display: block;
	clear: both;
	height: 0;
}

.comment_single .comment_profile_just{
	width: 100%;
	padding: 15px 0 0 0;
}

.comment_single .comment_photo{
	float: left;
	width: 200px;
}

.comment_single .comment_profile{
	float: right;
	width: 100%;
	max-width: 510px;
	padding: 15px 0 0 0;
}

.comment_profile_just h3,
.comment_profile h3{
	font-size: 18px;
	font-size: 1.8rem;
	margin: 0 0 10px 0;
}

.comment_profile_just h3 span,
.comment_profile h3 span{
	font-size: 85%;
	font-weight: normal;
}

.comment_profile_just b,
.comment_profile b{
	color: #7ecef4;
}

.comment_single .comment_text{
	clear: both;
	font-size: 16px;
	font-size: 1.6rem;
	margin: 20px 0 0 0;
	padding: 1em 0;
	border-top: solid 2px #7ecef4;
	border-bottom: solid 2px #7ecef4;
	box-sizing: border-box;
	position: relative;
}

.comment_single .comment_text:before{
	content: '';
	display: inline-block;
	width: 0;
	height: 0;
	margin: -1em 0 0 -1em;
	border-style: solid;
	border-width: 0 1em 1em 1em;
	border-color: transparent transparent #7ecef4 transparent;
	position: absolute;
	top: 0;
	left: 100px;
}

.comment_single .pc_read_more{
	display: none;
}

.comment_single .read_more{
}

#comment_area .icon_comment{
	width: 40%;
	position: absolute;
	top: -140px;
	right: -5%;
}

#comment_area .icon_comment img{
	width: 100%;
	height: auto;
}


/*** 歌詞 ***/

#song_area{
	text-align: center;
	position: relative;
	margin: 100px auto 0 auto;
	padding-top: 60px;
}

#song_area h2{
	display: inline-block;
	position: absolute;
	top: -50px;
	left: -46px;
}

#song_area .song_img{
	overflow: hidden;
}

#song_area .song_img img{
	width: 100%;
	max-width: 673px;
	height: auto;
}

#song_area .item_hide{
	height: 735px;
}

#song_area .item_visible{
	height: auto;
}

#song_area .song_more{
	cursor: pointer;
	display: inline-block;
	font-size: 16px;
	font-size: 1.6rem;
	font-weight: bold;
	text-align: center;
	color: #7ecef4;
	width: 200px;
	margin: 1em 0;
	padding: 0.5em 1em;
	border: solid 1px #7ecef4;
	border-radius: 2em;
	box-sizing: border-box;
}

#song_area .song_more.more_trigger{}

#song_area .icon_song{
	width: 75%;
	position: absolute;
	top: -165px;
	right: 5%;
}

#song_area .icon_song img{
	width: 100%;
	height: auto;
}


/*** バナーエリア ***/

#hugoon_info{
	text-align: center;
	margin: 40px auto 0 auto;
	padding: 25px 25px 40px;
	border: 1px solid #fff;
	background-color: #eafbff;
	box-sizing: border-box;
}

#hugoon_info .hugoon_info_ttl{
	width: 100%;
	max-width: 187px;
	margin: 0 auto 15px auto;
}
#hugoon_info .hugoon_info_ttl img{
	width: 100%;
	height: auto;
}

#hugoon_info .banner_img{
	margin: 0 auto 10px auto;
}

#hugoon_info a:hover{
	opacity: 0.8;
}


/* 他にも */
.recommend_cont{
	margin: -25px auto 55px;
	padding: 0;
	display: block;
	box-sizing: border-box;
	width: 970px;
	background-color: #fff;
	border-radius: 5px;
	border: 2px solid #fff;
	position: relative;
}
.recommend_cont:before{
	content: ' ';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	border: 1px solid #caf2fc;
	border-radius: 5px;
	display: block;
}
.recommend_ttl{
	margin: 0 0 5px;
	padding: 15px 0 0;
	text-align: center;
	font-size: 15px; /* ie8 */
	font-size: 1.5rem;
	color: #5b9cce;
}
.recommend_list{
	margin: 0 auto;
	padding: 0 40px 15px;
	position: relative;
	z-index: 1;
}
.recommend_list li{
	margin: 0 15px 5px 0 ;
	padding: 0 0 5px;
	border-bottom: 1px dotted #97cdf7;
}
.recommend_list li:first-child{
	padding-top: 5px;
	border-top: 1px dotted #aad8fc;
}
.recommend_list li a:before{
	content: ' ';
	text-align: center;
	background: url(/img/arrow01.png) no-repeat left center;
	display: inline-block;
	height: 15px;
	width: 14px;
	vertical-align: middle;
}



/* ===========================================
	MediaQueries
=========================================== */


/* PC----------------------------- */
@media screen and (min-width: 768px){
	
}

/* スマホ----------------------------- */
@media screen and (max-width: 767px){
	
	/*** header ***/
	
	#song_header{
		background-image: url("../img/s/main_bg.jpg");
		background-position: center top;
		background-size: contain;
	}
	
	#song_header #hugoon_ttl{
		width: 100%;
		margin-bottom: 20px;
		padding: 25% 0 0 0;
	}

#hugoon_ttl .ttl_main{
	padding: 5% 0 0 0;
}
	
	#hugoon_ttl .ttl_main img{
		width: 95%;
		height: auto;
	}

#hugoon_ttl .ttl_up{
	display: inline-block;
	width: 40%;
	position: absolute;
	top: 32%;
	left: 5%;
}
	
	#hugoon_ttl .ttl_up img{
		width: 100%;
		height: auto;
	}
	
	.cm_cont{
		margin: 0 auto;
		padding: 0;
	}

#song_header nav#header_nav{
	position: absolute;
	top: 5px;
	left: 20px;
}

#header_nav ul li{
	position: static;
}

#header_nav ul li.header_nav_song{
	width: 26%;
}

#header_nav ul li.header_nav_result{
	width: 26%;
}

#header_nav ul li.header_nav_comment{
	width: 38%;
}
	
	#song_header .top_lead{
		margin: 30px auto 0 auto;
	}
	
	/*** article common ***/
	section.article_area{
		padding: 30px 10px;
		border: solid 2px #7ecef4;
		border-radius: 20px;
		box-sizing: border-box;
}
	
	#result_area,
	#comment_area,
	#song_area{
		margin: 40px auto 0 auto;
	}
	
	
	/*** 検証結果 ***/
	
	#result_area{
		font-size: 1.4rem;
		margin-top: 60px;
	}
	
	#result_area h2{
		width: 30%;
		max-width: 195px;
		top: 0;
		left: -5%;
		transform: translate(0, -35%);
	}
	
	#result_area h2 img{
	width: 100%;
	height: auto;
}
	
.result_column{
	font-size: 1.4rem;
	padding: 1em;
	background-size: cover;
}

.result_column ul{
	margin-right: 0;
}

.result_column li{
	float: none;
	font-size: 1.4rem;
	width: 100%;
	margin: 15px auto 0 auto;
	padding: 10px;
}
	
	.result_column .graph .icon_graph_left{
		display: none;
}

.result_column .graph .icon_graph_right{
	display: none;
}
	
	#result_area .result_ttl{
		font-size: 1.6rem;
	}
	
	#result_area .result_detail_ttl{
		font-size: 1.4rem;
	}
	
	.result_detail .icon_hugoon{
	display: inline-block;
		width: 20%;
	position: absolute;
	top: -10px;
	right: 5px;
}
	
	#result_area .icon_resuit{
		top: 0;
		transform: translate(0, -65%);
	}
	
	
	/*** 先生・制作陣のコメント ***/
	
	#comment_area h2{
		width: 40%;
		max-width: 284px;
		top: 0;
		left: -5%;
		transform: translate(0, -50%);
	}
	
	#comment_area h2 img{
	width: 100%;
	height: auto;
}

#comment_area .comment_single{
	margin: 40px auto 0 auto;
}

.comment_single .comment_photo{
	float: none;
	margin: 0 auto;
}

.comment_single .comment_profile{
	float: none;
}

.comment_profile h3{
	text-align: center;
}

.comment_single .comment_text{
	font-size: 1.4rem;
}

.comment_single .comment_text:before{
	margin: -1em 0 0 -1em;
	top: 0;
	left: 50%;
}
	
	.comment_single .pc_read_more{
		display: block;
	}
	
	.comment_single .read_more{
		display: block;
		text-align: center;
		font-weight: bold;
		color: #7ecef4;
		width: 100%;
		margin: 1em 0;
		padding: 0.5em 0;
		border: solid 1px #7ecef4;
		border-radius: 2em;
		box-sizing: border-box;
}
	
	#comment_area .icon_comment{
		top: 0;
		right: 5%;
		transform: translate(0, -70%);
	}
	
	
	/*** 歌詞 ***/
	
	#song_area{
		padding-top: 40px;
	}
	
	#song_area h2{
		width: 30%;
		max-width: 186px;
		top: 0;
		left: -5%;
		transform: translate(0, -50%);
	}
	
	#song_area h2 img{
	width: 100%;
	height: auto;
}
	
	#song_area .song_img{
		position: relative;
	}
	
	#song_area .item_hide::after{
		content: "";
		display: block;
		width: 100%;
		height: 20%;
		background: linear-gradient( rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 90% );
		position: absolute;
		bottom: 0;
		left: 0;
	}
	
	#song_area .item_hide{
		height: 380px;
	}
	
	#song_area .icon_song{
		width: 70%;
		top: 0;
		right: 0%;
		transform: translate(0, -65%);
	}

	/* 他にも */
	.recommend_cont{
		margin: 0 0 50px;
		padding: 5px 20px 15px;
		width: auto;
		border-radius: 0;
		border: none;
		border-top: 4px solid #caf2fc;
	}
	.recommend_cont:before{
		content: none;
	}
	.recommend_ttl{
		margin: 0 0 7px;
		font-size: 1.3rem;
	}
	.recommend_list{
		margin: 0;
		padding: 0;
		border: none;
	}
	.recommend_list li{
		margin: 0 0 5px 0 ;
	}
	.recommend_list li a{
		padding-left: 16px;
		display: block;
		position: relative;
	}
	.recommend_list li a:before{
		position: absolute;
		left: 0;
		top: 3px;
		display: block;
	}
}