/* ===========================================================================

HEATGRAN

=========================================================================== */
article#main img,
article#main picture,
article#main source{
	display:block;
	max-width:100%;
	min-height:auto;
}
article#main img.inline{
	display:inline-block;
}
article#main{
	color:#000;
}
article#main .alpha{
	transition:opacity 0.2s ease 0s;
}
article#main .alpha:hover{
	opacity:0.7;
}
article#main .inner{
	max-width:1108px;
}

/* heatgran_header
------------------------------------------------------ */
article#main .heatgran_header{
	width:100%;
	padding:30px 2% 70px;
	box-sizing:border-box;
}
.heatgran_header_image{
	max-width:1108px;
	margin:0 auto;
}

/* heatgran_intro
------------------------------------------------------ */
.heatgran_intro{
	background:#fff;
}
.heatgran_intro .inner{
	padding-bottom:50px;
	text-align:center;
}
.heatgran_intro_arrow{
	margin:0 auto 55px;
}
.heatgran_intro_slogan_01{
	margin:0 auto 50px;
	font-size:46px;
	font-weight:bold;
	line-height:1;
	letter-spacing:0.05em;
}
.heatgran_intro_slogan_02{
	display:inline-block;
	margin:0 auto 30px;
	padding: 0 0 5px 0;
	font-size:43px;
	font-weight:bold;
	line-height:1;
	letter-spacing:0.05em;
	background:url(../img/heatgran_extra/img_heatgran_intro_grad.png) no-repeat center bottom/contain;
}
.heatgran_intro_slogan_03{
	font-size:30px;
	font-weight:bold;
	line-height:1;
	letter-spacing:0.1em;
}

/* heatgran_problem
------------------------------------------------------ */
.heatgran_problem .inner{
	padding-bottom:65px;
	text-align:center;
}
.heatgran_problem_title{
	max-width:513px;
	margin:0 auto 60px;
}
.heatgran_problem_flex{
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	flex-direction:row;
	margin:0 auto 40px;
}
.heatgran_problem_item{
	width:32%;
	max-width:330px;
	margin:0 0 4%;
	background:#fff;
	border:solid 1px #000;
}
.heatgran_problem_item figure{
	padding:4px;
	box-sizing:border-box;
	border-bottom:solid 1px #000;
}
.heatgran_problem_item p{
	padding:14px 4px;
	box-sizing:border-box;
	line-height:1;
	font-size:13px;
	font-weight:bold;
}
.heatgran_problem_cv a{
	display:inline-block;
	filter: drop-shadow(5px 5px 4px rgba(0,0,0,0.3));
}

/* heatgran_question
------------------------------------------------------ */
.heatgran_question{
	background:#eae5e3;
}
.heatgran_question .inner,
.heatgran_answer .inner{
	padding-top:65px;
	padding-bottom:65px;
}
.heatgran_question_header{
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin:0 0 100px;
}
.heatgran_question_header_icon{
	width:30%;
	padding:0 20px 0 0;
	box-sizing:border-box;
}
.heatgran_question_header_icon img{
	width:100%;
	max-width:200px !important;
	margin:0 auto;
}
.heatgran_question_header_text{
	width:70%;
}
.heatgran_question_header_title{
	margin:0 auto 40px;
	font-size:43px;
	font-weight:bold;
	line-height:1;
	letter-spacing:0.1em;
}
.heatgran_question_header_desc{
	font-size:16px;
	line-height:2em;
}

/* heatgran_answer
------------------------------------------------------ */
.heatgran_answer{
	background:#fce4d6;
}
.heatgran_answer .heatgran_question_header_title{
	font-size:33px;
	line-height:1.4em;
}
.heatgran_answer_image{
	max-width:980px;
	margin:0 auto;
}

/* heatgran_grade
------------------------------------------------------ */
.heatgran_grade{
	background:#eae5e3;
}
.heatgran_grade_header{
	padding-top:80px;
	padding-bottom:80px;
	background:#fff;
}
.heatgran_grade_slogan{
	margin:0 auto 50px;
	font-size:30px;
	font-weight:bold;
	line-height:1.4em;
	letter-spacing:0.15em;
}
.heatgran_grade_slogan span{
	font-weight:bold;
	background: linear-gradient(transparent 60%, #eab7bb 0%);
}
.heatgran_grade_title{
	max-width:734px;
	margin:0 auto;
}
.heatgran_grade .inner{
	padding-top:90px;
	padding-bottom:80px;
	text-align:center;
}
.heatgran_grade_spec_image{
	max-width:736px;
	margin:0 auto 50px;
}
.heatgran_grade_spec{
	margin:0 auto 50px;
	font-size:23px;
	font-weight:bold;
	line-height:1.6em;
	letter-spacing:0.1em;
}
.heatgran_grade_house{
	max-width:570px;
	margin:0 auto 50px;
}
.heatgran_grade_detail{
	padding:30px 0 20px;
	margin:0 0 40px;
	background:#fff;
}
.heatgran_grade_detail_title{
	margin:0 auto 27px;
	font-size:25px;
	font-weight:bold;
	line-height:1;
}
.heatgran_grade_detail_title strong{
	color:#bb0611;
	font-weight:bold;
}
.heatgran_grade_detail_inner{
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
	flex-direction:row;
	padding:0 20px 0 0;
	box-sizing:border-box;
}
.heatgran_grade_detail_item{
	width:22%;
}
.heatgran_grade_detail_item figcaption{
	margin:6px 0 0;
	text-align:right;
	font-size:12px;
}
.heatgran_grade_detail_item.large{
	width:31%;
}
.heatgran_grade_detail_item.large figcaption{
	padding:0 0 0 1em;
	box-sizing:border-box;
	text-align:left;
}
.heatgran_grade_notice{
	margin:0 0 70px;
	font-size:11px;
	line-height:1;
}

/* heatgran_voice
------------------------------------------------------ */
.heatgran_voice .inner{
	padding-top:80px;
	padding-bottom:80px;
}
.heatgran_voice_title{
	max-width:316px;
	margin:0 auto 55px;
}
.heatgran_voice_item:not(:last-child){
	margin:0 auto 90px;
}
.heatgran_voice_item_image{
	max-width:500px;
	margin:0 auto 60px;
}
.heatgran_voice_item_text_wrap{
	display:flex;
	justify-content:space-between;
}
.heatgran_voice_item_text_split{
	width:48%;
}
.heatgran_voice_item_text:not(:last-child){
	margin:0 0 50px;
}
.heatgran_voice_item_text_q{
	margin:0 auto 30px;
	padding:0 0 0 36px;
	box-sizing:border-box;
	position:relative;
	font-size:18px;
	font-weight:bold;
	line-height:1.2em;
	background:url(../img/heatgran_extra/img_heatgran_voice_icon_Q.svg) no-repeat top left/24px;
}
.heatgran_voice_item_text_q:after{
	content: "";
	display: block;
	width: 40px;
	height: 1px;
	position: absolute;
	left: 37px;
	bottom: -11px;
	background: #222;
}
.heatgran_voice_item_text_a{
	padding:0 0 0 36px;
	box-sizing:border-box;
	background:url(../img/heatgran_extra/img_heatgran_voice_icon_A.svg) no-repeat top left/24px;
}
.heatgran_voice_item_text_a figure{
	margin:30px 0 0;
	text-align:right;
}
.heatgran_voice_item_text_a figure img{
	width:100%;
	max-width:390px !important;
}
.heatgran_voice_item_text_a figcaption{
	margin:6px 0 0;
	text-align:right;
	font-size:12px;
}

/* heatgran_contversion
------------------------------------------------------ */
.heatgran_conversion{
	padding:200px 0 70px;
	background:url(../img/heatgran_extra/img_heatgran_contversion_bg.jpg) no-repeat center center/cover;
}
.heatgran_conversion_slogan{
	margin:0 auto 530px;
	font-size:28px;
	font-weight:bold;
	line-height:1.8em;
}

@media screen and (min-width:851px) {
	.pc_hide{
		display:none !important;
	}
}
@media screen and (max-width:850px) {
	.sp_hide{
		display:none !important;
	}
	.inner{
		padding-left:5%;
		padding-right:5%;
		box-sizing:border-box;
	}
	
	/* heatgran_header
	------------------------------------------------------ */
	article#main .heatgran_header{
		padding:0;
		box-sizing:border-box;
	}
	.heatgran_header_image{
		max-width:100%;
	}
	
	/* heatgran_intro
	------------------------------------------------------ */
	.heatgran_intro .inner{
		padding-top:30px;
		padding-bottom:30px;
	}
	.heatgran_intro_arrow{
		margin:0 auto 20px;
	}
	.heatgran_intro_slogan_01{
		margin:0 auto 30px;
		font-size:25px;
		line-height:1.4em;
	}
	.heatgran_intro_slogan_02{
		margin:0 auto 10px;
		padding: 0 0 1px 0;
		font-size:20px;
	}
	.heatgran_intro_slogan_03{
		font-size:15px;
	}
	
	/* heatgran_problem
	------------------------------------------------------ */
	.heatgran_intro,
	.heatgran_problem{
		background:#f2f2f2;
	}
	.heatgran_problem .inner{
		padding-bottom:40px;
		text-align:center;
	}
	.heatgran_problem_title{
		max-width:260px;
		margin:0 auto 30px;
	}
	.heatgran_problem_flex{
		display:block;
		max-width:100%;
		margin:0 auto 40px;
	}
	.heatgran_problem_item{
		width:100%;
		margin:0 0 20px;
	}
	.heatgran_problem_cv.middle{
		margin:0 0 30px;
	}
	
	/* heatgran_question
	------------------------------------------------------ */
	.heatgran_question .inner,
	.heatgran_answer .inner{
		padding-top:40px;
		padding-bottom:40px;
	}
	.heatgran_question_header{
		display:flex;
		justify-content:space-between;
		align-items:center;
		margin:0 0 30px;
	}
	.heatgran_question_header_icon{
		width:28%;
	}
	.heatgran_question_header_text{
		width:72%;
	}
	.heatgran_question_header_title{
		margin:0;
		font-size:25px;
		line-height:1.3em;
		letter-spacing:0.15em;
	}
	.heatgran_question_header_desc{
		margin:0 0 30px;
		font-size:14px;
	}
	
	/* heatgran_answer
	------------------------------------------------------ */
	.heatgran_answer .heatgran_question_header_title{
		font-size:25px;
		line-height:1.3em;
	}
	.heatgran_answer_image{
		max-width:980px;
		margin:0 auto;
	}
	
	/* heatgran_grade
	------------------------------------------------------ */
	.heatgran_grade{
		background: linear-gradient(to bottom,  #ffffff 0%,#ffffff 50%,#eae5e3 50%,#eae5e3 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	}
	.heatgran_grade_header{
		padding:40px 5% 0;
		
	}
	.heatgran_grade_slogan{
		margin:0 auto 30px;
		font-size:20px;
	}
	.heatgran_grade_title{
		max-width:90%;
		margin:0 auto;
	}
	.heatgran_grade .inner{
		padding-top:40px;
		padding-bottom:40px;
	}
	.heatgran_grade_spec_image{
		margin:0 auto 30px;
	}
	.heatgran_grade_spec{
		margin:0 auto 40px;
		font-size:18px;
	}
	.heatgran_grade_house{
		max-width:570px;
		margin:0 auto 50px;
	}
	.heatgran_grade_detail{
		padding:20px 0 10px;
		margin:0 0 20px;
	}
	.heatgran_grade_detail_title{
		margin:0 auto 20px;
		font-size:19px;
		line-height:1.4em;
	}
	.heatgran_grade_detail_inner{
		padding:0 10px;
	}
	.heatgran_grade_detail_item{
		width:32%;
	}
	.heatgran_grade_detail_item figcaption,
	.heatgran_grade_detail_caption{
		margin:4px 0 0;
		font-size:11px;
	}
	.heatgran_grade_detail_item.large{
		width:100%;
		margin:0 0 15px;
	}
	.heatgran_grade_notice{
		margin:0 0 40px;
		text-align:left;
	}
	
	/* heatgran_voice
	------------------------------------------------------ */
	.heatgran_voice .inner{
		padding-top:60px;
		padding-bottom:0px;
	}
	.heatgran_voice_title{
		width:80%;
		margin:0 auto 40px;
	}
	.heatgran_voice_item:not(:last-child){
		margin:0 auto 40px;
	}
	.heatgran_voice_item_image{
		margin:0 auto 40px;
	}
	.heatgran_voice_item_text_wrap{
		display:block;
	}
	.heatgran_voice_item_text_split{
		width:100%;
	}
	.heatgran_voice_item_text:not(:last-child),
	.heatgran_voice_item_text{
		margin:0 0 40px;
	}
	.heatgran_voice_item_text_q{
		font-size:17px;
		line-height:1.4em;
	}

	
	/* heatgran_contversion
	------------------------------------------------------ */
	.heatgran_conversion{
		padding:0;
		background:#fff;
	}
	.heatgran_conversion .inner{
		padding:0 0 30px !important;
		position:relative;
	}
	.heatgran_conversion_slogan{
		position:absolute;
		top:30px;
		left:5%;
		margin:0;
		font-size:20px;
	}
	.heatgran_conversion_image{
		margin:0 0 30px;
	}
	.heatgran_conversion .heatgran_problem_cv{
		width:90%;
		margin:0 5%;
	}
}