@charset "UTF-8";
/* CSS Document */

/*******common*******/
.is_sp{
	display: none;
}

.contents__inner{
    flex-wrap: wrap;
}
.contents__inner #contact{
    width: 100%;
	margin-top: 8%;
}

.u-bg-cream{
	background: #fcf4ea;
	border-radius: 5px;
	padding: 15px 20px;
}

section.row{
	margin-bottom: 8%;
}

.main img + p{    
	font-family: 'TBUDゴシック B', 'TBUDGothic B';
}

.anchor-link .anchor-link__item a{
	font-family: 'TBUDゴシック B', 'TBUDGothic B';
}


/*よくある質問*/
.q_list_content {
	border-bottom: dashed 1px #dcdcdc;
}
.q_list_content dl{
	display: table;
	padding: 10px 0;
}

.q_list_content dl a{
	color: #333;
}
.q_list_content dl a:hover{
    color: #e8380d;
    opacity: 1;
}

.q_list_content dt,.q_list_content dd{
	display: table-cell;
	vertical-align: middle;
}

.q_list_content dt{
padding-right: 10px;
}


/*お問い合わせ窓口*/
.contact_area{
	display:-webkit-box;
  	display:-ms-flexbox;
	display: flex;
    justify-content: space-between;
	margin: 2% auto;
    border: solid 1px #dcdcdc;
    border-radius: 8px;
	padding: 3%;

}

.contact_area .contact-center__phone{
	max-width: 456px;
    width: 100%;
    margin: 0 10px;
}

.contact_area .contact-center__phone a{
	color: #e8380d;
}

.contact_area .contact-center__phone .contact-center__phone__mobile a{
	color: #404544;
}

.contact_area > .img,.contact_area > .box{
	width: 49%;
	padding: 0;
}
.contact_area > .box .text{
	margin: 5% auto;
	font-weight: bold;
	font-family: 'TBUDゴシック B', 'TBUDGothic B';
	text-align: center;
}
.contact_area .img{
	width: 90%;
    border: solid 1px #dcdcdc;
	border-radius: 8px;
	height: 65px;
	display: table;
	text-align: center;
	margin: auto;
}
.contact_area .img:hover{
	background: #e7380d;
}
.contact_area .img a{
	padding: 20px 0;
	display: table-cell;
    padding-right: 2vw;
	font-weight: bold;
	color: #333333;
	font-size: 16px;
}
.contact_area .img a:hover{
	color: #ffffff!important;
	opacity: inherit;
}
.contact_area .img a::before{

	float: right;
	content: "";
	display: block;
	  width: 8px;
	  height: 8px;
	  border-top: 2px solid #e7380d;
	  border-right: 2px solid #e7380d;
	  -webkit-transform: rotate(45deg);
	  transform: rotate(45deg);
	    margin-top: 9px;


}

.contact_area .img:hover a::before{
	float: right;
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    margin-top: 9px;
}

/*******リンク・トップページ*******/


/*ピックアップ*/
.index_list .main{
	width: 100%;
}

.index_list .bold{
	font-family: 'TBUDゴシック B', 'TBUDGothic B';
}
.index_list .pickup_list .list_cont {
	display: flex;
    align-items: center;
    justify-content: space-between;
	border: solid 1px #dcdcdc;
	border-radius: 8px;
	padding: 3% 5.53%;
}
.index_list .pickup_list .list_cont .img {
	width: 38.2%;
	margin-bottom: 0;
}

.index_list .pickup_list .list_cont .cont {
	width: 51.8%;
}
.index_list .pickup_list .list_cont .cont .tt {
	font-size: 2.5rem;
	font-family: 'TBUDゴシック B', 'TBUDGothic B';
	text-align: center;

}

/*季節にご注意いただきたいこと一覧*/
.index_list .season_icon{
	background: #f0f0f0;
	font-size: 1.4rem;
	height: 56px;
    padding: 1% 1.5%;
	border-radius: 8px;
}

.index_list .season_icon .icon_list{
	display: table;
    height: 100%;
	width: 70%;
	max-width: 400px;
}
.index_list .season_icon .icon_list span{
	display: table-cell;
	vertical-align: middle;
}

.index_list .attention_list .list_cont a{
	display: block;
}

.index_list .season_icon .icon_list span img{
	width: 32px;
}

.index_list .season_icon .icon_list span.season{
	padding-left: 4%;
}

.index_list .attention_list{
	display:-webkit-box;
  	display:-ms-flexbox;
	display: flex;
    justify-content: space-between;
	flex-wrap: wrap;
}

.index_list .attention_list:after{
	content:"";
	display: block;
	width: 32.1%;
}


.index_list .attention_list .list_cont{
	width: 32.1%;
}
.index_list .attention_list .list_cont .img{
	position: relative;
	margin-bottom: 10px;
}

.index_list .attention_list .list_cont .img .tt{
	display: flex;
    align-items: center;
    left: 30px;
    color: #fff;
    font-size: 2.4rem;
    text-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    line-height: 1.4;
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
}
.index_list .attention_list .list_cont .txt .season_attention span img{
	height: 30px;
}




/*******教えて！夏の給湯機器*******/

/*＃content1 ＃content2*/
.s_waterheater .bold{
	font-family: 'TBUDゴシック B', 'TBUDGothic B';
}

.s_waterheater .q_a .question{
	width: 100%;
	display: table;
}
.s_waterheater .q_a .question >span{
	display: table-cell;
    vertical-align: middle;
}

.s_waterheater .q_a .question >span.img{
	width: 27.5%;
}
.s_waterheater .q_a .question >span.txt{
	width: 67.7%;
    padding: 0 2%;
}

.s_waterheater .q_a .answer .title{
    padding: 0 0 0 20px;
    border-left: 3px solid #f39b87;
    font-size: 2.2rem;
    font-family: 'TBUDゴシック B', 'TBUDGothic B';
}

.s_waterheater .q_a .answer .title .img img{
	vertical-align: middle;
}



.s_waterheater .q_a .answer .title .txt{
	padding-left: 5px;
	font-size: 2.2rem;
	vertical-align: middle;
}

.s_waterheater .q_a .answer .title .txt span{
	display: inline-block;
}

.s_waterheater .q_a .answer .txt .sub_tt span{
	font-family: 'TBUDゴシック B', 'TBUDGothic B';
	font-size: 1.8rem;
	background: linear-gradient(transparent 30%, #ffff00 30%);
}
.s_waterheater #cont02.q_a .answer .txt .sub_tt > span,
.s_waterheater #cont03.q_a .answer .txt .sub_tt > span{
	font-family: 'TBUDゴシック B', 'TBUDGothic B';
	font-size: 1.8rem;
	background: none;
}

.s_waterheater #cont03.q_a .answer .txt .sub_tt > span.aside{
	font-size: 1.2rem;
}

/*
.s_waterheater .q_a .answer .txt .txt span{
	display: inline-block;
}
*/

.s_waterheater .q_a .answer .main_answer{
	display: flex;
    justify-content: space-between;
}

.s_waterheater .q_a .answer .main_answer .txt{
	width: 50%;
}

.s_waterheater .q_a .answer .main_answer .img{
	padding-left: 1%;
}

.s_waterheater .q_a .board_cont{
	background: url(/aftersupport/assets/board_bg.png) no-repeat;
    background-size: 100% 100%;
    padding: 9% 5% 4.5%;
}

.s_waterheater .q_a#cont02 .board_cont{
    padding: 9% 5% 1.5%;
}
.s_waterheater .q_a .board_cont .txt{
	text-align: center;
}
.s_waterheater .q_a .board_cont .txt .bold_size{
	font-size: 1.8rem;
	font-weight: bold;
}
.s_waterheater .q_a .board_cont .txt .under_line{
	text-decoration: underline;
}

.s_waterheater .q_a .board_cont .cont{
	display: flex;
    align-items: center;
    justify-content: space-between;
	border-radius: 8px;
    padding: 1% 5%;
}

.s_waterheater #cont02.q_a .board_cont .cont{
    padding: 3% 5%;
}
.s_waterheater .q_a .board_cont .cont.top{
	background: #fff0dc;
}
.s_waterheater .q_a .board_cont .cont.bottom{
	background: #e1f2ff;
}

.s_waterheater .q_a .board_cont .cont > .img{
	width: 25%;
	margin-bottom: 0;
}
.s_waterheater .q_a .board_cont .cont > .text{
	width: 70%;
}
.s_waterheater .q_a .board_cont .cont .text .tt{
	font-family: 'TBUDゴシック B', 'TBUDGothic B';
	display: table;
	vertical-align: middle;
    margin-bottom: 5px;
}
.s_waterheater .q_a .board_cont .cont .text .tt span{
	display: table-cell;
}
.s_waterheater .q_a .board_cont .cont .text .tt span.img{
	padding-right: 10px;
}
.s_waterheater .q_a .board_cont .cont.top .text .tt{
	color: #de7300;
}
.s_waterheater .q_a .board_cont .cont.top .text .main_txt a{
	text-decoration: underline;
}
.s_waterheater .q_a .board_cont .cont.bottom .text .tt{
	color: #4197d9;
}
.s_waterheater .q_a .board_cont .cont .text .tt .bold_size{
	font-size: 2.2rem;
}

.s_waterheater .q_a .board_cont .cont .text .main_txt .bold .size{
	font-size: 1.8rem;
}

.s_waterheater #cont02.q_a .under_line{
	background: linear-gradient(transparent 30%, #ffd200 30%);
}

.s_waterheater .q_a .board_cont .sub_tt{
	text-align: center;
}
.s_waterheater .q_a .board_cont .sub_tt span{
    font-size: 1.8rem;
    background: linear-gradient(transparent 30%, #ffff00 30%);
	
}
.s_waterheater .q_a .board_cont .sub_tt .bold_size{
	font-family: 'TBUDゴシック B', 'TBUDGothic B';
	font-size: 1.8rem;
	
}

/*#content3*/
.s_waterheater #cont04 .cautiontt{
	width: 100%;
	display: table;
}

}
.s_waterheater #cont04 .cautiontt >span{
	display: table-cell;
    vertical-align: middle;

}

.s_waterheater #cont04 .cautiontt >span.img{
	width: 27.5%;
}
.s_waterheater #cont04 .cautiontt >span.txt{
	width: 67.7%;
    padding: 0 2%;
}

.s_waterheater #cont04 .caution{
	border: solid #f39800 10px;
	border-radius: 10px;
    padding: 3%;
}
.s_waterheater #cont04 .caution .tt_area .tt{
	color: #de7300;
	font-size: 2.2rem;
	font-family: 'TBUDゴシック B', 'TBUDGothic B';
	text-align: center;
	border-bottom: solid #eeeeee 5px;
	
}
.s_waterheater #cont04 .caution .img_txt{
	display: flex;
    align-items: center;
    justify-content: space-between;
}
.s_waterheater #cont04 .caution .img_txt .img{
	width: 45.2%;
}
.s_waterheater #cont04 .caution .img_txt .txt{
	width: 51.2%;
}

.s_waterheater #cont04 .caution .img_txt .txt .tt{
	font-size: 1.8rem;
	font-family: 'TBUDゴシック B', 'TBUDGothic B';
	
}

/*#content4*/



.s_waterheater #cont05 .caution{
	border: solid #eeeeee 10px;
	border-radius: 10px;
    padding: 3%;
}
.s_waterheater #cont05 .caution .tt_area .tt{
	font-size: 2.2rem;
	font-family: 'TBUDゴシック B', 'TBUDGothic B';
	text-align: center;
	border-bottom: solid #eeeeee 5px;
	
}

.s_waterheater #cont05 .caution .img_txt .txt{
	background: #fff0dc;
	padding: 15px;
}
.s_waterheater #cont05 .caution .img_txt .txt dl dt{
	color: #de7300;
	font-size: 1.6rem;
}
.s_waterheater #cont05 .caution .img_txt .txt dl dd{
}

.s_waterheater #cont05 .caution .img_txt .txt dl dd:before{
	content: "●";
	display: inline-block;
	width: 10px;
	height: 10px;
	color: #de7300;
	padding-right: 8px;

}
.s_waterheater #cont05 .caution .img_txt{
	position: relative;

}

.s_waterheater #cont05 .caution .img_txt .img{
	position: absolute;
	right: 0;    
	top: -17%;
    width: 41.24%;

}
.s_waterheater #cont05 .caution .way img{
    display: inline;
    vertical-align: middle;
    width: 18%;
}

.s_waterheater #cont05 .caution .way p{
    display: inline-block;
    vertical-align: middle;
    width: 80%;
    padding: 0 1%;
}
.s_waterheater #cont05 .caution .way p a{
	text-decoration: underline;
}








/*ヒートショック*/
#check .u-mb15{
	background: url(/aftersupport/assets/heat_shock_item05.jpg) no-repeat;
	background-size: 100% auto;
}

#check .u-mb15 .check_list{
	width: 100%;
	display: flex;
	justify-content: space-around;
	height: auto;
	padding-top: 21%;
	padding-bottom: 13%;
}

#check .u-mb15 .check_list ul li:before{
	content: url(/aftersupport/assets/icon-check.jpg);
	display: inline-block;
    vertical-align: middle;
    -webkit-transform: scale(0.7);
    transform: scale(0.7);
}

#check .u-mb15 .check_list ul li{
	line-height: 1.3;
}


#check .u-pc-mw100p img{
	width: 100%;
	
}


@media screen and (max-width: 767px) {
	
/*****common*****/
	.is_pc{
	display: none;
}
	
	.is_sp{
	display: inherit;
}

	
	section.row{
	margin-bottom: 16%;
	}
	
	.contents__inner #contact{
	margin-top: 16%;
	}
	

	/*お問い合わせ窓口*/
	.contact_area{
	display: block;
    justify-content: space-between;
	margin: 2% auto;
    border: solid 1px #dcdcdc;
    border-radius: 8px;
	padding: 15px;

	}

	.contact_area > .img,.contact_area > .box{
		width: 100%;
	}

	.contact_area > .img{
		text-align: center;
	}
	.contact_area > .box .img{
		text-align: center;
	}
	.contact_area > .box .text{
		margin: 5% auto;
		font-weight: bold;
		font-family: 'TBUDゴシック B', 'TBUDGothic B';
		text-align: inherit;
	}


	.contact_area .contact-center__phone {

		margin: 0 auto;
	}

	.contact_area .box .img{
		width: 100%;
	}

	.contact_area .img a{
		padding-right: 3vw;
	}	
	
	/*******リンク・トップページ*******/


	/*ピックアップ*/

	.index_list .pickup_list .list_cont {
		display: inherit;
	}
	.index_list .pickup_list .list_cont .img {
		width: 100%;
	}

	.index_list .pickup_list .list_cont .cont {
		width: 100%;
	}
	.index_list .pickup_list .list_cont .cont .tt {
		font-size: 2.0rem;
	}

	/*季節にご注意いただきたいこと一覧*/
	.index_list .season_icon{
		font-size: 1.3rem;
		height: 50px;
		padding: 1% 1.5%;
		border-radius: 8px;
	}

	.index_list .season_icon .icon_list{
		width: 100%;
	}
	.index_list .season_icon .icon_list span img{
		width: 25px;
	}

	.index_list .season_icon .icon_list span.season{
		padding-left: 1%;
	}


	.index_list .attention_list .list_cont{
		width: 100%;
	}
	




	
	
	

/*******教えて！夏の給湯機器*******/


/*＃content1 ＃content2*/
	.s_waterheater .q_a .question >span.img {
		vertical-align: top;
	}
	.s_waterheater .q_a .answer .main_answer{
		flex-flow: column nowrap;
	}
	
	.s_waterheater .q_a .answer .title .txt{
		font-size: 1.8rem;
	}
	
	.s_waterheater .q_a .answer .main_answer .txt{
		width: 100%;
		order: 2;
		
	}	
	
	.s_waterheater .q_a .board_cont .sub_tt span{
		font-size: 1.5rem;
	}	
	.s_waterheater .q_a .answer .txt .sub_tt span{
		font-size: 1.6rem;
	}
	
	.s_waterheater .q_a .answer .main_answer .img{
		width: 100%;
		order: 1;
		text-align: center;
		
	}
	
	.s_waterheater .q_a .board_cont .sub_tt .bold_size{
		font-size: 1.6rem;
	}
	
	.s_waterheater .q_a .board_cont .cont{
		flex-flow: column nowrap;
		padding: 5%;
	}
	
	.s_waterheater .q_a .board_cont .cont .text .tt{
		margin: auto;
		margin-bottom: 5px;
	}
	
	.s_waterheater .q_a .board_cont .cont > .img{
		width: 60%;
		order: 2;
	}
	.s_waterheater .q_a .board_cont .cont > .text{
		width: 100%;
		order: 1;
		margin-bottom: 10px;
	}
	
	.s_waterheater .q_a .board_cont{
	    position: relative;
		background: url(/aftersupport/assets/board_bg_middle.png) center repeat-y;
		background-size: contain;
		padding: 13vw 5% 12vw;	
	}
	
	.s_waterheater .q_a#cont02 .board_cont {
    padding: 13vw 5% 7vw;
	}
	
	.s_waterheater .q_a .board_cont::before{
    width: 100%;
    height: 50px;
    display: block;
    content: "";
    background: url(/aftersupport/assets/board_bg_top.png) top center no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: -1vw;
    left: 0;
	}
	.s_waterheater .q_a .board_cont::after{
    width: 100%;
    height: 50px;
    display: block;
    content: "";
    background: url(/aftersupport/assets/board_bg_bottom.png) bottom center no-repeat;
    background-size: 100% 100%;
    position: absolute;
    bottom: -1vw;
    left: 0;
	}

	
	
	
	/*#content3*/
	.s_waterheater #cont04 .cautiontt{
		display: table;
	    width: 100%;
	}
	
	.s_waterheater #cont04 .cautiontt >span.img img{
    	width: auto;
		height: 25px;
	}
	
	.s_waterheater #cont04 .caution .tt_area .tt{
	    font-size: 1.8rem;

	}
	
	.s_waterheater #cont04 .caution .img_txt{
		flex-flow: column nowrap;
	}
	
	.s_waterheater #cont04 .caution .img_txt .img{
		width: 60%;
		order: 1;
	}
	.s_waterheater #cont04 .caution .img_txt .txt{
		width: 100%;
		order: 1;
	}
	
	
	/*#content4*/
	.s_waterheater #cont05 .caution .tt_area .tt{
	    font-size: 1.8rem;

	}
	
	.s_waterheater #cont05 .caution .img_txt .img{
		position: inherit;
	    float: right;
		margin-top: -22vw;
	}
	
	
	.s_waterheater #cont05 .caution .way{
	}
	
	.s_waterheater #cont05 .caution .way img{
		display: block;
		margin: auto
	}	

	.s_waterheater #cont05 .caution .way p{
		display: block;
		width: inherit;
		
	}
	
	
/*****ヒートショック*****/
	.column > div:first-child{
		order: 2;
	}
	.column > div:last-child{
		order: 1;
	}
	
#check .u-mb15{
	background: url(/aftersupport/assets/heat_shock_item05_sp.jpg) no-repeat;
	background-size: 100% auto;
}	
	
	#check .u-mb15 .check_list{
		display: inherit;
		padding-top: 26%;
		padding-bottom: 13%;
		padding-left: 4%;
	}
	
	#check .u-mb15 .check_list ul li:before{
    -webkit-transform: scale(0.4);
    transform: scale(0.4);
}

	
	#check .u-mb15 .check_list ul li{
	line-height: 0;
	font-size: 12px;
	padding-left: 1em;
	text-indent: -1em;
}
	

}


@media screen and (min-width: 767.5px) {
/*******教えて！夏の給湯機器*******/
.s_waterheater .anchor-link {
justify-content: flex-start;
flex-wrap: wrap;
}
.s_waterheater .anchor-link .anchor-link__item:nth-child(-n+3) {
	margin-bottom: 15px;
}
.s_waterheater .anchor-link .anchor-link__item:first-child {
	border-left: 1px solid #d2d2d2;
}
.s_waterheater .anchor-link .anchor-link__item:last-child {
	border-right: 1px solid #d2d2d2;
}
.s_waterheater .anchor-link .anchor-link__item {
border-right: none;
border-left: 1px solid #d2d2d2;
}

}