@charset "UTF-8";
/*!*
	--------------------------------
	Created: 2018.01.15
	Last Modified:
	--------------------------------
	- Table of Contents -
	初期化
	--------------------------------
*!*/
/*!* -------------------------------
	main_visual
------------------------------- *!*/
.main_visual.features{background-image:url(../img/renew/img_main_visual_features.jpg);background-position: 80% 50%}
/*!* -------------------------------
	product head image
------------------------------- *!*/
.product_tab_nav .upper_nav .product_wrap .head_img{width:170px;padding:0 5px 0 25px}
/*!* -------------------------------
	product feature image
------------------------------- *!*/
.content.renew #section01 .products_has_3col{display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-top:30px}
.content.renew #section01 .products_has_3col .col{flex-basis:45%}
.content.renew #section01 .products_has_3col .col:nth-of-type(2){display:flex;justify-content:center;align-self:center;flex-basis:10%;margin-bottom:38px}
.content.renew #section01 .products_has_3col .col .products_img{margin-top:0}
.content.renew #section01 .products_has_3col .col .products_img.arr_image{transform:rotate(-90deg);max-width:68px;width:100%;margin-left:20%;margin-right:10%}
.content.renew #section01 .products_topic .products_has_2col{margin-top:20px}
.content.renew #section01 .products_topic .products_has_2col .col .products_img{margin-top:0}
.content.renew #section01 .products_topic .products_has_2col .col:nth-child(odd){width: 30%}
.content.renew #section01 .products_topic .products_has_2col .col:nth-child(even){width: 65%}
.content.renew #section01 .products_topic .text_size{font-size:1.8em}
.content.renew #section01 .products_topic .text_color{color:#cf1010}
.content.renew #section01 .check_mark,
.content.renew #section01 .check_mark+.bold{margin-top:30px}
.content.renew #section01 .align_center .note{display:inline-block}
.content.renew #section01 .products_button_wrap.shoplist{margin-top: 30px;}
.content.renew #section01 .products_button_wrap.lineup,
.content.renew #section02 .products_button_wrap.lineup{background-color:#f2f2f2;padding:30px 0;margin-top:50px}
.content.renew #section02 .products_button_column{display: flex; justify-content: space-between;}
.content.renew #section02 .products_button_column .products_button_wrap{ width: calc(50% - 20px);}
.content.renew #section02 .section_table{margin-top:30px}
.content.renew #section02 .section_table img{max-width:100%}
.content.renew #section02 .section_table .note .indent{position: static;}
.content.renew #section02 .section_table p+img{margin-top:10px}
.content.renew #section02 .section_table .button{margin-top:10px}
.content.renew #section02 .section_table .products_text.text_left{text-indent:-0.6em;font-size:0.81em}
.content.renew #section02 .section_table .products_text.text_left .bold{font-size:1.24em}
.content.renew #section02 .section_table table.basic_table tr td{vertical-align: middle}
.content.renew #section02 .section_table .small_icon{vertical-align: middle;padding-right: 5px;}
.content.renew #section02 .section_table .products_has_2col{align-items: center}
.content.renew #section02 .products_topic .products_has_3col{display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}
.content.renew #section02 .products_topic .products_has_3col .col{width:32%;margin-left:4.46%}
.content.renew #section02 .products_topic .products_has_3col .col:first-child{margin-left:0}
.content.renew #section02 .products_topic .products_has_3col .col .products_text{text-align:center}
.content.renew #section02 .products_topic .note .text_color{color:#cf1010}
.content.renew #section02_01 .section_table .basic_table th{text-align: center;vertical-align: middle;}
.content.renew #section02_01 .section_table .basic_table td{padding-top: 20px;padding-bottom: 20px;}
.content.renew #section02_01 .section_table .basic_table td .image_logo{white-space: nowrap;display:inline-block;margin-left:12px}
.content.renew #section02_01 .section_table .basic_table td .image_logo img{vertical-align:middle}
.content.renew #section02_01 .section_table .basic_table td .logo{margin-top: 15px;white-space: nowrap;}
.content.renew #section02_01 .section_table .basic_table td .button{margin-top: 20px;}
.content.renew #section02_01 .section_table .basic_table td sup{vertical-align: top;top: 0;}
.content.renew #section02_01 .section_table .basic_table td .caption{margin-top: 5px;}
.content.renew #section02_01 .section_table .basic_table td .note{margin-top: 0;margin-left: 0.5em;text-indent: -1em;}
.content.renew #section03 .products_topic .text_bold {font-weight: bold}
.content.renew .products_button_wrap.lineup .button a{padding: 0 0 0 15px;border: none;background-position: 0 .3em;background-color: inherit;border-radius:0}
.content.renew .products_button_wrap.lineup .button a:hover{color: inherit;text-decoration: underline;background-image: url(../../shared/img/arr_angle_red.png);}
.content.renew .products_button_wrap.lineup .button+.button{margin-left: 62px;}
.content.renew .foot_banner {max-width:1200px;margin-left:auto;margin-right:auto;margin-top:100px}
.content.renew .foot_banner img {width:100%}
.content.renew .text_f20{font-size: 1.25em}
.content.renew .link_wrap{display:flex;flex-wrap: wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;}
.content.renew .link_wrap a{display: block;}
.content.renew .w-31-33{width: 31.8246%;}
.content.renew .w-53-58{width: 53.0410%;}
.content.renew .strong {font-weight: 700;font-size: 1.375em;}
.content.renew .column {display: flex;}
.content.renew .column.justify-between{justify-content: space-between;}
.content.renew .column.justify-between .cell+.cell {margin-left: 10px;}
.content.renew .column.justify-between .cell.flex-1 {flex: 1;}
.content.renew .cell{display: flex ; flex-direction: column;align-items: center;}
.content.renew .cell.is-block{display: block;}
.content.renew .cell+.cell {margin-left: 40px;}
.content.renew .mt-15 {margin-top: 15px;}
.content.renew .mt-30 {margin-top: 30px;}
.content.renew .logo-item{flex: 1; display: flex ; align-items: center; justify-content: center;}
.content.renew .logo-item + p {margin-top: 15px;}
.content.renew .line{position: relative;}
.content.renew .line::before{position: absolute;content: "";width: 12px;height: 1px;background-color: #333333;}


@media only screen and (max-width: 1300px){
.content.renew .sp_swipe_inner {overflow-y: auto;}
.content.renew .basic_table { min-width: 1200px; }
}
@media print, screen and (min-width: 768px){
.content.renew #section02_01 .section_table .basic_table td{padding: 36px 24px;}
}
@media only screen and (max-width:767px){
.main_visual.features{background-image:url(../img/renew/img_main_visual_features_sp.jpg)}
.main_visual.features{background-position: 50% 50%}
.main_visual.features .main_visual_wrap {padding-bottom: 100.344828%}
.main_visual.features .main_visual_inner{top: 20px}
.product_tab_nav .upper_nav .product_wrap .head_img{width:42.59%;padding:0 15px 0 0}
.content.renew #section01 .products_has_3col{display:block;margin-top:30px}
.content.renew #section01 .products_has_3col .col{flex-basis:100%}
.content.renew #section01 .products_has_3col .col:nth-of-type(2){display:block;flex-basis:100%;margin-top:20px;margin-bottom:0}
.content.renew #section01 .products_has_3col .col .products_img{margin-top:0}
.content.renew #section01 .products_has_3col .col .products_img.arr_image{transform:rotate(0deg);max-width:40px;width:auto;margin-left:auto;margin-right:auto}
.content.renew #section01 .products_topic .products_has_2col .col+.col{margin-top:20px}
.content.renew #section01 .products_topic .products_has_2col .col:nth-child(odd),
.content.renew #section01 .products_topic .products_has_2col .col:nth-child(even){width: 100%}
.content.renew #section02 .section_table .products_has_2col{display:flex}
.content.renew #section02 .section_table .products_has_2col .col{width:47.5%}
.content.renew #section02 .section_table .products_has_2col .col+.col{margin-left:5%}
.content.renew #section02 .section_table .note{display:block}
.content.renew #section02 .products_topic .products_has_3col{display:block}
.content.renew #section02 .products_topic .products_has_3col .col{width:100%;margin-left:0}
.content.renew #section02 .products_topic .products_has_3col .col .products_text{text-align:center}
.content.renew #section02_01 .section_table .sp_swipe:after{display: none;}
.content.renew #section02 .products_button_column{display: block;}
.content.renew #section02 .products_button_column .products_button_wrap{ width: auto;}
.content.renew #section02 .products_button_column .products_button_wrap + .products_button_wrap{ margin-top: 15px; }
.content.renew .products_button_wrap .button+.button{margin-left: 0;margin-top: 5px}
.content.renew .foot_banner{margin-top:60px;margin-bottom:-40px}
.content.renew .strong {font-size: 0.87719298245614em;}
.content.renew .w-31-33{width: 33%;}
.content.renew .w-53-58{width: 58%;}

}

/*!* -------------------------------
	simulation
------------------------------- *!*/
#section02 { overflow: hidden; }
.section_simulation { background-color: #eaf1f3; margin-top: 80px; padding-bottom: 100px; }
.section_simulation select { box-sizing: border-box; border: 1px solid #808080; border-radius: 5px; cursor: pointer; font-size: 87.5%; outline: none; appearance: none; padding: 10px 45px 10px 20px; width: 100%; }
.section_simulation select::-ms-expand { display: none; }
.section_simulation .simulation_select { display: block; position: relative; width: 100%; max-width: 372px; }
.section_simulation .simulation_select::after { box-sizing: border-box; border-right: 2px solid #cc0000; border-bottom: 2px solid #cc0000; content: ""; position: absolute; top: calc(50% - 6px); right: 20px; width: 8px; height: 8px; transform: rotate(45deg); }
.section_simulation .simulation_heading { font-size: 0; line-height: 0; position: relative; padding-top: 7.0721%; }
.section_simulation .simulation_heading span { display: block; width: 62.164%; }
.section_simulation .simulation_heading span > img { display: none; width: 100%; }
.section_simulation .simulation_heading span > img:nth-of-type(1) { display: inline; }
.section_simulation .simulation_heading > img { display: none; position: absolute; bottom: 0px; right: 2.1216%; margin-bottom: -1.4144%; width: 31.5417%; }
.section_simulation .simulation_heading > img:nth-of-type(1) { display: inline; }
.section_simulation .simulation_block { background-color: #ffffff; box-shadow: 2px 2px 8px 0 rgba(0,0,0,0.2); margin-top: 45px; padding: 4.2432%; }
.section_simulation .simulation_input .input_heading { font-size: 225%; font-weight: bold; line-height: 1.3611; text-align: center; }
.section_simulation .simulation_input dl { border-bottom: 2px solid #f3a808; display: flex; align-items: center; position: relative; padding: 55px 0; }
.section_simulation .simulation_input dl:nth-of-type(1) { border-top: 2px solid #f3a808; margin-top: 30px; }
.section_simulation .simulation_input dl::before { box-sizing: border-box; background-color: #ffffff; border-radius: 50%; border: 2px solid #f3a808; content: ""; position: absolute; bottom: -25px; left: calc(50% - 25px); width: 50px; height: 50px; z-index: +1; }
.section_simulation .simulation_input dl::after { box-sizing: border-box; border-bottom: 3px solid #f3a808; border-right: 3px solid #f3a808; content: ""; position: absolute; bottom: -5px; left: calc(50% - 7px); width: 14px; height: 14px; transform: rotate(45deg); z-index: +2; }
.section_simulation .simulation_input dl dt { flex: 1; display: flex; align-items: center; justify-content: center; padding-right: 10px; }
.section_simulation .simulation_input dl dt small { display: block; font-size: 0; line-height: 0; text-align: right; margin-right: 25px; width: 109px; }
.section_simulation .simulation_input dl:nth-of-type(1) dt small img { width: 82px; }
.section_simulation .simulation_input dl:nth-of-type(2) dt small img { width: 109px; }
.section_simulation .simulation_input dl dt span { display: block; font-size: 137.5%; font-weight: bold; width: 12.5em; }
.section_simulation .simulation_input dl dd { flex: 1; display: flex; align-items: center; justify-content: center; padding-left: 10px; }
.section_simulation .simulation_btn { text-align: center; margin-top: 80px; }
.section_simulation .simulation_btn button { box-sizing: border-box; background-color: #f3a808; border-radius: 5px; color: #ffffff; display: inline-block; font-size: 175%; font-weight: bold; text-align: center; vertical-align: bottom; padding: 15px; outline: none; border: none; width: 100%; max-width: 800px; transition: background-color .25s ease-out, opacity .25s ease-out; }
.section_simulation .simulation_btn button:disabled { opacity: 0.3; }
.section_simulation .simulation_result { border: 3px solid #f3a808; display: none; overflow: hidden; margin-top: 70px; padding: 50px 4.2503% 4.2503% 4.2503%; }
.section_simulation .simulation_result > p { display: flex; align-items: center; justify-content: center; opacity: 0; }
.section_simulation .simulation_result > p > small { font-size: 0; line-height: 0; margin-right: 15px; width: 71px; }
.section_simulation .simulation_result > p > small img { width: 100%; }
.section_simulation .simulation_result > p > span { color: #ee4848; font-size: 212.5%; font-weight: bold; }
.section_simulation .simulation_result .result_conditions { background-color: #f2f2f2; margin-top: 30px; padding: 25px 30px 30px 30px; }
.section_simulation .simulation_result .result_conditions dt { font-size: 87.5%; font-weight: 700; text-align: center; }
.section_simulation .simulation_result .result_conditions dd { color: #757575; font-size: 75%; line-height: 1.5; margin-top: 10px; }
.section_simulation .simulation_result .result_conditions dd li { position: relative; padding-left: 1em; }
.section_simulation .simulation_result .result_conditions dd li > span { position: absolute; top: 0px; left: 0px; }
.section_simulation .simulation_result .result_graph { box-sizing: border-box; background: url("/home/ecocute/introduction/img/renew/simulation_line.png") repeat-x; display: flex; align-items: flex-end; justify-content: space-around; margin-top: 45px; padding: 1px 0 3px 0; height: 414px; }
.section_simulation .simulation_result .graph_old,
.section_simulation .simulation_result .graph_now { box-sizing: border-box; display: flex; align-items: center; justify-content: center; text-align: center; margin: 0 20px; width: 100%; max-width: 470px; height: 0; }
.section_simulation .simulation_result .graph_old small,
.section_simulation .simulation_result .graph_now small { font-size: 137.5%; font-weight: bold; }
.section_simulation .simulation_result .graph_old span,
.section_simulation .simulation_result .graph_now span { font-size: 193.75%; font-weight: bold; }
.section_simulation .simulation_result .graph_old { background-color: #ddedf3; }
.section_simulation .simulation_result .graph_now { background-color: #ee4848; color: #ffffff; }
.section_simulation .simulation_result .result_text { display: flex; justify-content: space-around; margin-top: 20px; }
.section_simulation .simulation_result .result_text p { box-sizing: border-box; font-size: 137.5%; font-weight: bold; line-height: 1.3636; text-align: center; margin: 0 20px; width: 100%; max-width: 470px; }
@media only screen and (min-width:768px){
.section_simulation .simulation_btn button:hover { background-color: #c00; }
}
@media only screen and (max-width:767px){
.section_simulation { margin-top: 130px; padding-bottom: 70px; }
.section_simulation select { border-radius: 3px; font-size: 16px; }
.section_simulation .simulation_select { max-width: none; }
.section_simulation .simulation_heading { padding-top: 87px; }
.section_simulation .simulation_heading span { display: block; text-align: center; position: relative; width: auto; z-index: +1; }
.section_simulation .simulation_heading span > img { display: inline; width: 352px; max-width: 100%; }
.section_simulation .simulation_heading span > img:nth-of-type(1) { display: none; }
.section_simulation .simulation_heading > img { display: inline; bottom: 66px; right: calc(50% - 112px); margin-bottom: 0; width: 225px; }
.section_simulation .simulation_heading > img:nth-of-type(1) { display: none; }
.section_simulation .simulation_block { box-shadow: none; position: relative; margin: 23px -15px 0 -15px; padding: 30px 0 0 0; }
.section_simulation .simulation_block::after { background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.03) 100%); content: ""; position: absolute; top: -4px; left: 0px;width: 100%; height: 4px; }
.section_simulation .simulation_input .input_heading { font-size: 125%; line-height: 1.5; padding: 0 15px; }
.section_simulation .simulation_input dl { border-bottom: 1px solid #f3a808; display: block; padding: 25px 15px 35px 15px; }
.section_simulation .simulation_input dl:nth-of-type(1) { border-top: 1px solid #f3a808; margin-top: 13px; }
.section_simulation .simulation_input dl::before { border: 1px solid #f3a808; bottom: -13px; left: calc(50% - 13px); width: 26px; height: 26px; }
.section_simulation .simulation_input dl::after { border-bottom: 2px solid #f3a808; border-right: 2px solid #f3a808; bottom: -3px; left: calc(50% - 4px); width: 8px; height: 8px; }
.section_simulation .simulation_input dl dt { flex: initial; padding-right: 0; }
.section_simulation .simulation_input dl dt small { margin-right: 15px; width: 50px; }
.section_simulation .simulation_input dl:nth-of-type(1) dt small img { width: 40px; }
.section_simulation .simulation_input dl:nth-of-type(2) dt small img { width: 50px; }
.section_simulation .simulation_input dl dt span { font-size: 100%; }
.section_simulation .simulation_input dl dd { flex: initial; display: block; margin-top: 13px; padding-left: 0; }
.section_simulation .simulation_btn { margin-top: 35px; padding: 0 15px 50px 15px; }
.section_simulation .simulation_btn button { border-radius: 3px; font-size: 112.5%; padding: 25px; max-width: none; }
.section_simulation .simulation_result { margin-top: 0; padding: 25px 12px 30px 12px; }
.section_simulation .simulation_result > p > small { margin-right: 6px; width: 35px; }
.section_simulation .simulation_result > p > span { font-size: 118.75%; }
.section_simulation .simulation_result .result_conditions { margin-top: 20px; padding: 20px 25px; }
.section_simulation .simulation_result .result_conditions dt { font-size: 75%; }
.section_simulation .simulation_result .result_conditions dd { font-size: 68.75%; }
.section_simulation .simulation_result .result_graph { background: url("/home/ecocute/introduction/img/renew/simulation_line_sp.png") repeat-x; background-size: auto 100%; justify-content: space-between; margin-top: 20px; height: 226px; }
.section_simulation .simulation_result .graph_old,
.section_simulation .simulation_result .graph_now { margin: 0; width: 44.9275%; max-width: none; }
.section_simulation .simulation_result .graph_old small,
.section_simulation .simulation_result .graph_now small { font-size: 81.25%; }
.section_simulation .simulation_result .graph_old span,
.section_simulation .simulation_result .graph_now span { font-size: 112.5%; }
.section_simulation .simulation_result .result_text { justify-content: space-between; margin-top: 8px; }
.section_simulation .simulation_result .result_text p { font-size: 75%; line-height: 1.4166; margin: 0; width: 44.9275%; max-width: none; }
}

/*!* -------------------------------
	warranty
------------------------------- *!*/
.section_warranty { margin-top: 45px; }
.section_warranty .warranty_block { border: 1px solid #d9d9d9; padding: 40px 60px 45px 60px; }
.section_warranty .warranty_block dt { line-height: 1.75; }
.section_warranty .warranty_block dd { margin-top: 10px; }
.section_warranty .warranty_block dd .button a small { font-size: 100%; }
@media only screen and (max-width:767px){
.section_warranty { margin-top: 25px; }
.section_warranty .warranty_block { padding: 15px 25px 20px 25px; }
.section_warranty .warranty_block dt { font-size: 87.5%; }
.section_warranty .warranty_block dd { margin-top: 10px; }
.section_warranty .warranty_block dd .button { display: block; text-align: center; }
.section_warranty .warranty_block dd .button a { background: none; }
.section_warranty .warranty_block dd .button a:hover { color: #333; }
.section_warranty .warranty_block dd .button a small { background: url(../../shared/img/arr_angle_red.png) #fff no-repeat left center/8px auto; display: inline-block; vertical-align: bottom; padding: 0 15px; }
}