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

support

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

/*-- メインタイトル --*/
#support .main-title span { width: 250px; height: 36px; background: url(../img/title.png) top left no-repeat;}


/*-- 見出しタイトル --*/
#support .contents-header { margin-bottom: 3.5em; padding: 3em 0; background-color: #f8f5eb; background-position: right center; background-repeat: no-repeat;}
#support .contents-header h2,
#support .contents-header p { text-align: center; color: #0d3896;}
#support .contents-header p { font-size: 1.26em;}


/*-- ボーダー付き見出し --*/
#support .contents h3 { margin-bottom: 1em; font-weight: normal; color: #0D3896;}
#support .contents h3:before { content: "〇";}
#support .contents h3 span { background: linear-gradient(transparent 70%, #ffff66 70%);}


/*-- 用意するもの --*/
#support .preparation { overflow: hidden; margin-bottom: 2.5em;}
#support .preparation > img { float: right; padding-left: 5.5em;}
#support .preparation p { font-size: 1.071em;}


/*-- トピック --*/
#support .topic { margin-bottom: 3.5em; border-radius: 5px; background: #f7f8ff;}
#support .topic .inner { overflow: hidden; width: 96%; margin: 0 auto;}


/*-- 作業の流れ --*/
#support .flow ol { overflow: hidden; width: 105%;}
#support .flow ol li { display: inline-block; position: relative; width: 19.5%; padding-right: 5%; vertical-align: top; background: url(../img/flow_arrow.png) 97% 8em no-repeat;}
#support .flow ol li:nth-last-of-type(1) { background: none;}
#support .flow ol li .photo { display: block;}
#support .flow ol li .photo img { display: block; width: 100%;}
#support .flow ol li p { font-size: .929em;}
#support .flow ol li p span { font-size: .857em;}


/*-- ヘルプ --*/
#support .help { width: 95%; max-width: 800px; padding-left: 1em; box-sizing: border-box; border: 1px solid #f33821;}
#support .help span { display: inline-block; padding-right: .5em; font-weight: 600; color: #F33821;}
#support .help span > img { display: inline-block; vertical-align: middle;}
#support .help p > img { display: inline-block; vertical-align: middle;}

/*-- メンテナンス --*/
#support .maintenance { position: relative; border-radius: 10px; border: 2px solid #e73b84;}
#support .maintenance h3 { position: absolute; top: -1.2em; left: 0; width: 100%;}
#support .maintenance h3 img { display: block; width: 45%; max-width: 230px; margin: 0 auto;}
#support .maintenance h3:before { content: none;}
#support .maintenance .banner { width: 95%; max-width: 520px; margin: 2em auto 1em;}
#support .maintenance .banner img { display: block; width: 100%;}
#support .maintenance .banner + p { margin-bottom: 2em;}


#support .maintenance .attention { overflow: hidden;}
#support .maintenance .attention ul { padding-bottom: .5em; font-size: .786em;}
#support .maintenance .attention p { font-weight: 600;}
#support .maintenance .attention p span { width: 100%; max-width: 420px; padding-left: 2%;}
@media screen and (max-width: 960px) {
#support .preparation > img { float: none; width: 100%; max-width: 470px; padding: 0 0 1em 0;}
#support .maintenance .attention ul { padding-bottom: 0;}
#support .maintenance .attention p { font-size: .929em;}
}
@media screen and (max-width: 750px) {
#support .contents-header { background-size: 35%;}
#support .contents-header h2,
#support .contents-header p { padding-left: 1em; text-align: left; color: #0d3896;}
	
#support .flow ol li { display:block; overflow: hidden; width: 95%; padding-right: 0; vertical-align: top; background: none;}
#support .flow ol li .photo { float: left; width: 40%; padding-right: 1em;}
#support .flow ol li p { overflow: auto; padding-top: 3em;}
	
#support .help { padding-left: 0;}
#support .help p { width: 92%; margin: 0 auto; padding: .5em;}
#support .help span { display: block; padding: 0;}
}

/*
index
=====================================================================*/
#support .item-wrap { overflow: hidden;}
#support .item-wrap ul { overflow: hidden;}
#support .item-wrap ul li { float: left; overflow: hidden; position: relative; width: 48%; min-height: 200px; margin-bottom: 2.5em; background: #f8f5eB;}
#support .item-wrap ul li:nth-child(odd) { margin-right: 3.2%;}
#support .item-wrap ul li a { display: block; text-decoration: none;}
#support .item-wrap ul li:hover a { color: #0d3896;}
#support .item-wrap ul li .inner { overflow: hidden; width: 90%; margin: 0 auto;}
#support .item-wrap ul li .inner img { float: right; width: auto; padding: .8em 0 0;}
#support .item-wrap ul li .text-wrap { padding: 2.5em 0 0 2.6%;}
#support .item-wrap ul li .text-wrap p { font-size: .929em; white-space: nowrap;}
#support .item-wrap ul li .text-wrap h2 { margin-bottom: .5em;}
#support .item-wrap ul li .text-wrap .link-btn { padding-left: 20px; background: url(../img/index/btn.png) left center no-repeat;}
#support .item-wrap ul li .text-wrap .link-btn span { border-bottom: 1px dashed; border-color: #323232;}
#support .item-wrap ul li:hover .text-wrap .link-btn { background: url(../img/index/btn-hover.png) left center no-repeat;}
#support .item-wrap ul li:hover .text-wrap .link-btn span { border-color: #0d3896;}
@media screen and (max-width: 1040px) {
#support .item-wrap ul li .text-wrap { padding: 10% 0 0 1%;}
#support .item-wrap ul li .text-wrap h2 { font-size: 1.2em;}
}

@media screen and (max-width: 750px) {
#support .item-wrap ul li { float: none; width: 100%; margin-bottom: 1em; min-height: inherit; padding-bottom: .4em;}
#support .item-wrap ul li .inner img { width: 35%;}
}


/*
air
=====================================================================*/
#support .air .contents-header { background-image: url(../img/air/heading-area_illust.png);}
#support .air .ondo { margin-bottom: 4.5em;}
#support .air .ondo .ondo-inner {}
#support .air .ondo > p { font-weight: normal; color: #db3232;}

#support .air table,
#support .air table th,
#support .air table td { border: 1px solid #0d3896;}
#support .air table th,
#support .air table td { padding: .5em;}
#support .air table th { vertical-align: middle;}

#support .air table { width: 100%; min-width: 920px;}
#support .air table caption { padding-bottom: 1em; text-align: left;}
#support .air table thead th { text-align: center;}
#support .air table thead th:nth-of-type(2),
#support .air table thead th:nth-of-type(3),
#support .air table thead th:nth-of-type(4),
#support .air table thead th:nth-of-type(5) { width: 20%; max-width: 206px;}

#support .air table thead th:nth-of-type(2) { background: #fce9f2;}
#support .air table thead th:nth-of-type(3) { background: #e8f0c5;}
#support .air table thead th:nth-of-type(4) { background: #fbd7b6;}
#support .air table thead th:nth-of-type(5) { background: #d3edf9;}

#support .air table tbody th { max-width: 130px; padding-left: 2.5%; font-weight: normal;}
#support .air table tbody td { text-align: center;}

#support .air table tbody .heating,
#support .air table tbody .cooling { display: inline-block; min-width: 38px; height: 20px; margin-right: .5%; font-size: .929em; text-align: center; line-height: 20px; color: #fff; border-radius: 5px;}
#support .air table tbody .heating { background: #ea5504;}
#support .air table tbody .cooling { background: #00a0df;}
#support .air table tbody td p { width: 90%; margin: 0 auto; font-size: .857em;}
#support .air table tbody td p .s-text { font-size: .929em;}
#support .air table tbody td p .detail { display: block; margin-bottom: .5em; text-align: center; background: #f8f868;}
#support .air table tbody td p b { font-weight: normal; color: #db3232;}

#support .air .heed { overflow: hidden; width: 103%; margin-bottom: 4.5em;}
#support .air .heed .inner { float: left; width: 30%; max-width: 303px; margin-right: 3%;}
#support .air .heed .inner:nth-last-of-type(1) { margin-right: 0;}
#support .air .heed .inner h4 { width: 100%; height: 44px; margin-bottom: 1em; font-size: 1.057em; font-weight: normal; text-align: center; line-height: 44px; color: #0d3896; border-radius: 5px; border: 1px solid #0d3896;}
#support .air .heed .inner p b { font-weight: normal; color: #db3232;}

#support .air .eco-point h3:before { display: inline-block; content: url(../img/air/eco-point_icon.png); vertical-align: middle; padding-right: .5em;}
#support .air .eco-point .inner { overflow: hidden;}
#support .air .eco-point .inner > img { float: right; width: auto; padding-left: 2.2em;}
#support .air .eco-point .inner p b { font-weight: normal; color: #db3232;}
@media screen and (max-width: 960px) {
#support .air .ondo .ondo-inner { overflow-x: scroll;}
}
@media screen and (max-width: 750px) {
#support .air .heed .inner,
#support .air .heed .inner:nth-last-of-type(1) { float: none; width: 96%; max-width: inherit; margin: 0 0 2.5em 0;}
#support .air .eco-point .inner > img { float: none; width: 50%; margin-bottom: 1.5em; padding-left: 0;}
}


/*
system
=====================================================================*/
#support .system .contents-header { background-image: url(../img/system/heading-area_illust.png);}

#support .system .topic .inner > img { display: inline-block; width: 50%; max-width: 397px;}
#support .system .topic span { display: inline-block;}
#support .system .topic span { font-size: .857em;}
#support .system .topic span img { display: inline-block; float: left; vertical-align: text-top;}
#support .system .topic span b { display: inline-block; font-weight: normal; padding-top: 15%;}

#support .system .flow-outer { margin-bottom: 2.5em;}
#support .system .flow-outer h3,
#support .system .flow-outer > p { width: 100%; max-width: 740px; margin: 0 auto; text-align: center;}
#support .system .flow-outer h3 img,
#support .system .flow-outer > p img { display: block; width: 100%;}
#support .system .flow-outer h3:before { content: none;}

#support .system .flow-outer p { margin-bottom: 3.5em;}
#support .system .flow-outer > ul { margin-bottom: 3.5em; text-align: center;}
#support .system .flow-outer > ul li { display: inline-block; position: relative; margin: 0 1.5%; border-radius: 5px; border: 2px solid #e73b84; background: #fffcdb;}
#support .system .flow-outer > ul li a { display: block; padding: .2em 0;}
#support .system .flow-outer > ul li img { display: block; width: 100%;}
#support .system .flow-outer > ul li:after { position: absolute; bottom: -1.8em; left: 0; width: 100%; content: url(../img/system/arrow.png); text-align: center;}

#support .system .type-header { overflow: hidden; margin-bottom: 2.5em; padding: 0 .6%; border-radius: 5px; background: #fffcdb;}
#support .system .type-header h4 { float: left;}
#support .system .type-header > img { display: block; float: left; padding-right: .5em;}
#support .system .type-header span { display: inline-block; padding-top: 2em; font-size: .726em;}
#support .system .type-header span b { display: inline-block; padding: .25em; font-weight: normal; color: #fff; border-radius: 5px; background: #000;}

#support .system .caution { overflow: hidden; margin-bottom: 2.5em; padding: .5em 2%; background: #f7f8ff;}
#support .system .caution > img { float: left; padding-right: 2%;}
#support .system .caution ul { float: left; overflow: hidden; padding-top: 1.4em;}
#support .system .caution ul li { display: inline-block; padding-right: 1em;}
#support .system .caution ul li:before { content: "・"; padding-right: .5em; color: #0d3896;}

#support .system .interested { overflow: hidden; margin-bottom: 3.5em; padding: .25em 0 1em; background: #d5e7f7;}
#support .system .interested .inner { width: 96%; margin: 0 0 0 auto;}
#support .system .interested .inner > img { float: right;}
#support .system .interested .inner .text-outer { padding-top: 1.5em;}
#support .system .interested .inner p { margin-bottom: 1em; font-size: .929em;}
#support .system .interested .inner p br { display: none;}
#support .system .interested .inner p img { display: block; width: 100%; max-width: 601px; padding-bottom: .5em;}

#support .system .maintenance .inner { overflow: hidden; margin: 0 auto 1.5em;} 
#support .system .maintenance .item-list { text-align: center;}
#support .system .maintenance .item-list li { display: inline-block; margin: 0 1%;}

#support .system .maintenance .attention { width: 96%; margin: 0 auto; padding-top: 1.5em; border-top: 1px dashed #323232;}
#support .system .maintenance .attention ul,
#support .system .maintenance .attention p { width: 85%; max-width: 730px; margin: 0 auto;}

@media screen and (max-width: 1024px) {
	#support .system .topic .inner > img { display: inline-block; width: 40%;}
}

@media screen and (max-width: 960px) {
	#support .system .topic .inner > img { display: block; width: 80%;}

	#support .system .flow-outer > ul { margin-bottom: 3.5em; text-align: center;}
	#support .system .flow-outer > ul li { width: 45%;}
	#support .system .flow-outer > ul li a { display: block; padding: .2em 0;}
	#support .system .flow-outer > ul li:after { content: none;}

	#support .system .type-header h4 { float: none; margin-bottom: 1em;}
	#support .system .type-header h4 img{ display: block; width: 100%; max-width: 450px;}
	#support .system .type-header span { padding-top: 0; font-size: .929em;}
	#support .system .type-header span b { display: inline-block; padding: .25em; font-weight: normal; color: #fff; border-radius: 5px; background: #000;}
	
	#support .system .caution { overflow: hidden; margin-bottom: 2.5em; padding: .5em 2%; background: #f7f8ff;}
	#support .system .caution > img { display: block; width: 20%; max-width: 82px;}
	#support .system .caution ul { float: left; overflow: hidden; padding-top: 0em;}
	#support .system .caution ul li { display: inline-block; padding-right: 1em;}
	#support .system .caution ul li:before { content: "・"; padding-right: .5em; color: #0d3896;}

	#support .system .interested .inner { width: 92%; margin: 0 auto;}
	#support .system .interested .inner > img { width:35%;}
	#support .system .interested .inner .text-outer { width:60%; padding-top: .5em;}
	#support .system .interested .inner p { margin-bottom: .25em;}
	
	
	#support .system .maintenance .item-list li { width: 25%; margin: 0 1%;}
	#support .system .maintenance .item-list li img { display: block; width: 100%;}

}
@media screen and (max-width: 750px) {
	#support .system .topic .inner span { width: 45%; float: left;}
	
	#support .system .interested .inner .text-outer { width:100%;}
	#support .system .interested .inner > img { display: block; float: none; width: 60%; margin: 0 auto;}
	#support .system .interested .inner p { text-align: center;}
}

/*
solidwood
=====================================================================*/
#support .solidwood .contents-header { margin-bottom: 3.5em; background-image: url(../img/solidwood/heading-area_illust.png);}
#support .solidwood .preparation,
#support .solidwood .topic { margin-bottom: 2.5em;}
#support .solidwood .flow { margin-bottom: 5.5em;}

#support .solidwood .topic span { display: block; float: left; width: 50%; max-width: 340px; padding-right: 1%;}
#support .solidwood .topic span img { display: block; width: 100%;}
#support .solidwood .topic p { padding-top: 1.8em;}

#support .solidwood .maintenance .inner { overflow: hidden; width: 92%; margin: 0 auto;}
#support .solidwood .maintenance .inner > img { float: left; padding-right: 1.5em;}
#support .solidwood .maintenance .inner .attention { width: 96%; margin: 0 auto 2em; padding-top: 1.5em; border-top: 1px dashed #323232;}
#support .solidwood .maintenance .inner .attention ul { margin-bottom: 1em;}

@media screen and (max-width: 960px) {
#support .solidwood .topic span { float: none; width: 50%;}
#support .solidwood .topic p { padding: 0 1em 1em;}
#support .solidwood .topic p br { display: none;}
#support .solidwood .maintenance .inner > img { display: block; width: 20%;}

}
@media screen and (max-width: 750px) {
#support .solidwood .topic span { width: 80%;}
#support .solidwood .maintenance .inner > img { float: none; width: 40%; margin: 0 auto; padding: 3.2em 0 0;}
#support .solidwood .maintenance .inner .attention { padding-top: 1.5em;}
}


/*
repair
=====================================================================*/
#support .repair .contents-header {  margin-bottom: 4.5em; background-image: url(../img/repair/heading-area_illust.png);}
#support .repair .preparation { margin-bottom: 3.5em;}


/*
frozen
=====================================================================*/
#support .frozen .contents-header { background-image: url(../img/frozen/heading-area_illust.png);}
#support .frozen .point { width: 90%; margin-bottom: 2.5em;}
#support .frozen .point1  img { float: right; width: auto; padding-left: 1em;}

#support .frozen .point1 p b { display:inline-block; color: #0d3896; padding-top: 0.5em;} 
#support .frozen .point1 p span { font-size: .929em;}
#support .frozen .point3 p a { display: block; max-width: 300px;}
#support .frozen .point3 p a img { display: block; width: 80%; max-width: 224px;}

#support .frozen .help { max-width: 560px;}
@media screen and (max-width: 960px) {
#support .frozen .point1 > img { float: none;}
}


/*
gas
=====================================================================*/
#support .gas .contents-header { margin-bottom: 1.5em; background-image: url(../img/gas/heading-area_illust.png);}
#support .gas .contents > p { margin-bottom: 4.5em;}
#support .gas .contents ul { overflow: hidden; margin-bottom: 2.5em;}
#support .gas .contents ul li { float: left; overflow: hidden; width: 20%; max-width: 155px; margin-right: 5%; font-size: .86em;}
#support .gas .contents ul li img { display: block; width: 100%; margin-bottom: 1em;}
@media screen and (max-width: 750px) {
#support .gas .contents > p { margin-bottom: 2.5em;}
#support .gas .contents ul { width: 100%;}
#support .gas .contents ul li { overflow: hidden; width: 100%; max-width: inherit; margin-bottom: 1.5em;}
#support .gas .contents ul li img { float: left; width: 25%; padding-right: 1em;}
}


/*
hurricane
=====================================================================*/
#support .hurricane .contents-header { margin-bottom: 2.5em; background-image: url(../img/hurricane/heading-area_illust.png);}
#support .hurricane .contents > p { margin-bottom: 3.5em;}
#support .hurricane .contents section { margin-bottom: 2.5em;}
#support .hurricane .point2 p { margin-bottom: 2.5em;}
#support .hurricane .point2 .inner p { margin-bottom: .5em;}
#support .hurricane .point2 .inner ul { overflow: hidden;}
#support .hurricane .point2 .inner ul li { float: left; width: 32%; margin-right: 1%;}
#support .hurricane .point2 .inner ul li img { display: block; width: 90%; max-width: 224px;}
#support .hurricane .point2 .inner ul li a { text-decoration: none;}

#support .hurricane .point3 h3 { color: #f33821;}
#support .hurricane .help { max-width: 560px;}

@media screen and (max-width: 960px) {
#support .hurricane .point2 p br { display: none;}
}

@media screen and (max-width: 750px) {
#support .hurricane .point2 .inner ul { max-width: inherit;}
#support .hurricane .point2 .inner ul li { float: none; width: 100%; margin-bottom: 1em;}
#support .hurricane .point2 .inner ul li img { width:80%; }
}


/*
wooddeck
=====================================================================*/
#support .wooddeck .contents-header { margin-bottom: 2.5em; background-image: url(../img/wooddeck/heading-area_illust.png);}

#support .wooddeck .movieBox {
  position: relative;
  padding: 4em 0 1em; margin: 4em 0 ;
  text-align: center;
  background: url(../img/wooddeck/movieBg.jpg);
}
#support .wooddeck .movieBox a {
  padding: 0 2%;
}
#support .wooddeck .movieBox a img {
  width: 40%; max-width: 366px;
}
#support .wooddeck .movieBox::before { 
  content: "";
  display: block;
  position: absolute; top: -3em; left: 5%;
  width: 120px; height: 120px;
  background:url(../img/wooddeck/movieBefore.png);
  background-size: cover;
}

#support .wooddeck .flow-outer { margin-bottom: 2.5em;}
#support .wooddeck .flow-outer h3,
#support .wooddeck .flow-outer > p { width: 100%; max-width: 740px; margin: 0 auto; text-align: center;}
#support .wooddeck .flow-outer h3 img,
#support .wooddeck .flow-outer > p img { display: block; width: 100%;}
#support .wooddeck .flow-outer h3:before { content: none;}

#support .wooddeck .type-header { overflow: hidden; margin-bottom: 2.5em; padding: 0 .6%; border-radius: 5px; background: #fffcdb;}
#support .wooddeck .type-header h4 { float: left;}
#support .wooddeck .type-header > img { display: block; float: left; padding-right: .5em;}
#support .wooddeck .type-header span { display: inline-block; padding-top: 2em; font-size: .726em; color: #E73B84;}
#support .wooddeck .type-header span b { display: inline-block; padding: .25em; font-weight: normal; color: #fff; border-radius: 5px; background: #E73B84;}

#support .wooddeck .type-header + img { display: block; margin: 0 auto 2em; max-width: 100%;}

#support .wooddeck .caution { overflow: hidden; margin-bottom: 2.5em; padding: .5em 2%; background: #f7f8ff;}
#support .wooddeck .caution > img { float: left; padding-right: 2%;}
#support .wooddeck .caution ul { overflow: hidden; padding-top: 1.4em;}
#support .wooddeck .caution ul li { display: inline-block; padding-right: 1em;}
#support .wooddeck .caution ul li:before { content: "・"; padding-right: .5em; color: #0d3896;}

#support .wooddeck .maintenance { margin: 0 auto; padding: 2.5em 2% 0;}
#support .wooddeck .maintenance .inner { overflow: hidden; margin: 0 auto 1.5em;} 
#support .wooddeck .maintenance .inner > img { float: left; display: block; margin: auto; max-width: 40%;}
#support .wooddeck .maintenance .attention p { word-break: break-all; }

#support .wooddeck .maintenance + p { color: #DB3232; font-size: 1.1em; padding: 2em 0}

@media screen and (max-width: 1024px) {
}

@media screen and (max-width: 960px) {
	#support .wooddeck .type-header h4 { float: none; }
	#support .wooddeck .type-header h4 img{ display: block; }
	#support .wooddeck .type-header span { padding-top: 0; font-size: .929em;}
	
	#support .wooddeck .caution { }
	#support .wooddeck .caution > img { float: none; display: block; width: 20%; max-width: 82px;}
	#support .wooddeck .caution ul { float: left; overflow: hidden; padding-top: 0em;}
	
	#support .wooddeck .maintenance .item-list li { width: 25%; margin: 0 1%;}
	#support .wooddeck .maintenance .item-list li img { display: block; width: 100%;}

}
@media screen and (max-width: 750px) {
  #support .wooddeck .movieBox {
    padding: 2em 0 1em;
  }
	#support .wooddeck .movieBox::before { 
    width: 70px; height: 70px;
  }

#support .wooddeck .maintenance .inner > img { float: none; }

}


/*
tile
=====================================================================*/
#support .tile .contents-header { margin-bottom: 2.5em; background-image: url(../img/tile/heading-tile_illust.png);}

#support .tile .flow ol { margin-bottom: 2em;}
#support .tile .flowtwin ol { overflow: hidden; width: 110%; margin-bottom: 2em;}
#support .tile .flowtwin ol .twin { width: 36%;}
#support .tile .flowtwin ol li:first-child { overflow: hidden; width: 19%;}
#support .tile .flowtwin .showpc { display: block;}
#support .tile .flowtwin .showsp { display: none;}

#support .tile .caution ul li:before { content: ""; padding-right: .5em; color: #0d3896;}

@media screen and (max-width: 750px) {
#support .tile .flowtwin ol { overflow: hidden; width: 110%; margin-bottom: 2em;}
#support .tile .flowtwin ol .twin { display:block; overflow: hidden; width: 95%; padding-right: 0; vertical-align: top; background: none;}
#support .tile .flowtwin ol li:first-child { display:block; overflow: hidden; width: 95%; padding-right: 0; vertical-align: top; background: none;}
#support .tile .flowtwin .showpc { display: none;}
#support .tile .flowtwin .showsp { display: block;}
}


/*
bath
=====================================================================*/
#support .bath .contents-header { margin-bottom: 2.5em; background-image: url(../img/bath/heading-bath_illust.png);}

#support .bath .flow ol li { margin-bottom: 2em;}
#support .bath .point { display: block; position: relative; margin-top: .5em;}
#support .bath .point::before { display: block; content: "POINT"; position: absolute; left: 0; top:.1em; padding: 0.02em 3%; border-radius: 5px; background: #E50012; color: #fff; font-size: 10px;   }

#support .bath .caution ul li:before { content: ""; padding-right: .5em; color: #0d3896;}


/*
winter
=====================================================================*/
#support .winter .contents-header { background-image: url("../img/winter/heading-area_illust.png");}
#support .winter .point { margin-bottom: 5em;}
#support .winter .yobou { box-sizing: border-box; padding: 2em; margin: 1em 0 2em; background-color: #F2F3F3;}
#support .winter .yobou h4 { font-size: 1.2em; color: #036EB8;}
#support .winter .yobou h4::before { display: inline-block; content: ""; width: 14px; height: 14px; margin-right: 0.5em; vertical-align: middle;background: url("../img/winter/icon.png") center no-repeat; background-size: contain;}
#support .winter .yobou h4 span { display: inline-block; margin-bottom: 1em; border-bottom: 5px solid #FFBF00;}

#support .winter .yobou .inner { overflow: hidden;}
#support .winter .yobou p { float: left; width: 58%;}
#support .winter .yobou .photo { float: right; width: 40%; max-width: 300px;}
#support .winter .yobou .photo img { display: block; width: 100%;}
@media screen and (max-width: 750px) {
#support .winter .yobou p { float: none; width: 90%; margin-bottom: 1em;}
#support .winter .yobou .photo { float: none; width: 90%; max-width: 250px;}
}


#support .winter .detail { box-sizing: border-box; padding: 2em; margin: 1em 0 2em; background-color: #FFF67F;}
#support .winter .detail h4 { font-size: 1.2em; color: #036EB8;}
#support .winter .detail h4::before { display: inline-block; content: ""; width: 14px; height: 14px; margin-right: 0.5em; vertical-align: middle;background: url("../img/winter/icon.png") center no-repeat; background-size: contain;}
#support .winter .detail h4 span { display: inline-block; margin-bottom: 1em; border-bottom: 5px solid #036EB8;}

#support .winter .detail  .inner { overflow: hidden;}
#support .winter .detail  p { float: left; width: 58%;}
#support .winter .detail  .illust { float: right; width: 40%; max-width: 180px;}
#support .winter .detail  .illust img { display: block; width: 100%;}
@media screen and (max-width: 750px) {
#support .winter .detail p { float: none; width: 90%; margin-bottom: 1em;}
#support .winter .detail .illust { float: none; width: 90%; max-width: 150px;}
}


/*
summer
=====================================================================*/
#support .summer .contents-header { background-image: url("../img/summer/heading-area_illust.png");}
#support .summer .contents-header + p { margin-bottom: 2em; text-align: center;}
#support .summer .contents__inner { }
#support .summer h3::before { display: none;}
#support .summer .point { box-sizing: border-box; width: 100%; margin-bottom: 2em; padding: 2em; border-radius: 15px; border: 2px solid #1d2088;}
#support .summer .point h3 { font-weight: bold;}
#support .summer .text-outer { display: flex; justify-content: space-between; flex-wrap: wrap;}
#support .summer .text-outer .flBtn { display: block;}
#support .summer .text-outer p { width: 65%; margin-bottom: 1em; letter-spacing: 0.04em;}
#support .summer .text-outer p b { display: block; margin-top: 10px; color: #DD2023;}
#support .summer .text-outer p b::before { display: inline-block; content: ""; width: 21px; height: 19px; margin-right: 5px; vertical-align: middle; background: url("../img/summer/icon.gif") center no-repeat; background-size: contain;}
#support .summer .photo { max-width: 239px;}
#support .summer .photo img { display: block; width: 100%;}
@media screen and (max-width: 980px) {
#support .summer .text-outer { display: block;}
#support .summer .text-outer p { width: 100%;}
}
@media screen and (max-width: 768px) {
#support .summer .contents-header + p { text-align: left;}
#support .summer .photo { margin: auto;}
}

#support .summer .text-outer p span { display: block; margin-top: 10px; color: #DD2023;}

#support .summer .oteire { box-sizing: border-box; margin-top: 5em; padding: 2em; background-color: rgba(186,227,249,0.5);}
#support .summer .oteire h3 { padding-bottom: 0.5em; font-weight: bold; border-bottom: 2px solid #1d2088;}
#support .summer .oteire p { width: 54%;}
@media screen and (max-width: 980px) {
#support .summer .oteire { display: block;}
#support .summer .oteire p { width: 100%;}
}
#support .summer .oteire .photo { max-width: 400px;}
#support .summer .oteire .photo img { display: block; width: 100%;}