@media screen and (max-width: 768px) { .pc { display: none !important; } .sp { display: block !important; } .fs_24 { font-size: 24px; } .fs_18 { font-size: 18px; } .fs_14 { font-size: 14px; } .fc_red { color: #cc0000; } .fc_black { color: #444444; } .fc_green { color: #006600; } br.line { content: "\A"; white-space: pre; } .sub { vertical-align: sub; font-size: smaller; } #global_navigation { border-bottom: 1px solid #69ad00; color: #fff; } #global_navigation_inner h1 { background-color: #69ad00; } #global_navigation_inner .gnav_ico span.top { border-top: 2px solid #ffffff; } #global_navigation_inner .gnav_ico span.mid { border-top: 2px solid #ffffff; } #global_navigation_inner .gnav_ico.on span { border-color: #ffffff; } #gnav_list_inner { /*overflow-y: scroll;*/ } #gnav_list_inner li { background-color: #69ad00; border-top: 1px solid #ffffff; } #gnav_list_inner li.current { background-color: #67ab00; } #gnav_list_inner li a { color: #ffffff; } #gnav_list_inner li a:after { display: none; } #contents_area { padding: 55px 0; } .rect_nav li { cursor: pointer; } .section_inner h3 { background-color: #577558; color: #ffffff; text-align: center; line-height: 1.4; font-size: 24px; margin: 50px 0 20px 0; padding: 15px; } .section_inner p.eco_txt { padding: 0 15px; margin-bottom: 50px; } .btn_accordion_detail.on:after { background-image: url(../common/image_common/parts_ico_btn_detail_arrow_on.png) !important; } .accordion_inner { height: 0; } } #contents_area .section_inner #electric_car { z-index: 52; } #contents_area .section_inner #hybrid_car { z-index: 51; } #contents_area .section_inner #c_car { z-index: 50; } #contents_area .section_inner #minivan_car { z-index: 49; } #contents_area .section_inner #sedan_car { z-index: 48; } #contents_area .section_inner #sport_car { z-index: 47; } #contents_area .section_inner #k_car { z-index: 46; } #contents_area .section_inner #modulo_car { z-index: 45; } #contents_area .section_inner #commercial_car { z-index: 44; } #contents_area .section_inner #plugin_car { z-index: 43; } #contents_area .section_inner #passenger-seat_car { z-index: 42; } #contents_area .section_inner #side-seat_car { z-index: 41; } #contents_area .section_inner #wheelchair_car { z-index: 39; } #contents_area .section_inner #rotation-seat_car { z-index: 38; } @media screen and (max-width: 768px) { /*------------------------------------------------------------------------------------------ Responsive / SP ------------------------------------------------------------------------------------------ */ /* ------------------------------------------------------------ .contents_area mainvisual ------------------------------------------------------------ */ .b_sp { display: block !important; } .hide { display: none; } .mt2em { margin-top: 2em !important; } #welfare_sp { margin-top: -60px; padding-top: 60px; } #contents_area { width: 100%; padding: 56px 0 0 0; font-size: 16px; /* ------------------------------------------------------------ * .contents_area section_inner * ------------------------------------------------------------ */ } #contents_area #main_visual { background-image: url(../image/main_sp_copy.png); background-color: #54b8d5; padding: 20px 0 0 0; background-size: 82%; background-repeat: no-repeat; background-position: top; background-position-y: 20px; } #contents_area #main_visual #main_visual_inner { padding: 0 15px; } #contents_area #main_visual #main_visual_inner .pic_visual img { display: none; } #contents_area #main_visual #main_visual_inner .main_copy { color: #ffffff; padding-top: 40%; } #contents_area #main_visual #main_visual_inner .main_copy .copy { font-size: 18px; line-height: 28px; margin-bottom: 10px; } #contents_area #main_visual #main_visual_inner .main_copy .sub_copy { font-size: 16px; line-height: 26px; margin-bottom: 20px; } #contents_area #main_visual #main_visual_inner .main_copy p.btn_eco { max-width: 640px; background-color: #ffffff; padding: 10px 40px 10px 10px; position: relative; } #contents_area #main_visual #main_visual_inner .main_copy p.btn_eco a { color: #0064a1; transition: opacity .1s ease; display: block; width: 100%; } #contents_area #main_visual #main_visual_inner .main_copy p.btn_eco:after { content: ''; width: 20px; height: 20px; line-height: 1em; background-image: url(../common/image_common/icon_blank.png); background-repeat: no-repeat; background-position: center top; background-size: 20px 20px; position: absolute; top: 25px; right: 10px; } #contents_area #main_visual:after { content: ""; display: block; background-image: url(../image/main_sp_illust.png); background-repeat: no-repeat; background-size: auto 100%; padding-top: 28%; background-position: 0px 5px; } #contents_area .section_inner p.eco_txt { margin: 30px; font-size: 18px; line-height: 1.6; } #contents_area .section_inner .title_type_car { width: 100%; } #contents_area .section_inner .title_type_car p { background-color: #ededed; padding: 5px 10px; } #contents_area .section_inner .title_type_car p a { text-align: left; } #contents_area .section_inner .accordion_content { border: none; margin-top: -60px; padding-top: 60px; } #contents_area .section_inner .accordion_content .btn_accordion_detail { width: auto !important; text-align: left; height: auto; background-color: #ededed; padding: 10px 40px; color: #444; margin: 2px 0 0 0; } #contents_area .section_inner .accordion_content .btn_accordion_detail:before { content: '' !important; position: inherit; width: 100%; height: 100%; display: block; position: inherit; top: 0; left: 0; } #contents_area .section_inner .accordion_content .btn_accordion_detail:after { content: '' !important; width: 20px; height: 100%; display: block; background-image: url(../common/image_common/parts_ico_btn_detail_arrow_btm.png); background-repeat: no-repeat; background-position: center; background-size: 20px 20px; position: absolute; top: -1px; right: 20px; } #contents_area .section_inner .accordion_content .type_car { width: 100%; margin: 0 auto; } #contents_area .section_inner .accordion_content .type_car ul.type_car_inner { width: 100%; } #contents_area .section_inner .accordion_content .type_car ul.type_car_inner li { width: 100%; display: inline-block; border-bottom: solid #ccc 1px; vertical-align: top; margin: 0 0 30px 0; } #contents_area .section_inner .accordion_content .type_car ul.type_car_inner li p.type_car_link { text-align: left; margin: 0; font-size: 16px; } #contents_area .section_inner .accordion_content .type_car ul.type_car_inner li p.type_car_link .note { font-size: 80%; } #contents_area .section_inner .accordion_content .type_car ul.type_car_inner li p.type_car_link a:after { content: ''; width: 20px; height: 20px; display: inline-block; line-height: 1em; background-image: url(../common/image_common/parts_ico_btn_detail_arrow.png); background-repeat: no-repeat; background-position: center top; background-size: 20px 20px; position: relative; top: 3px; left: 5px; } #contents_area .section_inner .accordion_content .type_car ul.type_car_inner li .type_tax { margin: 0; padding: 0; display: table; vertical-align: top; } #contents_area .section_inner .accordion_content .type_car ul.type_car_inner li .type_tax .car_img { max-width: 61%; margin: 0; display: table-cell; padding-right: 4%; } #contents_area .section_inner .accordion_content .type_car ul.type_car_inner li .type_tax .car_img img { width: 100%; } #contents_area .section_inner .accordion_content .type_car ul.type_car_inner li .type_tax .type_tax_inner { display: table-cell; vertical-align: top; /*padding-left: 30px;*/ } #contents_area .section_inner .accordion_content .type_car ul.type_car_inner li .type_tax .type_tax_inner p { margin: 0; line-height: 17px; } #contents_area .section_inner .accordion_content .type_car ul.type_car_inner li .type_tax .type_tax_inner p img { max-width: 100px; width: 100%; } #contents_area .section_inner .accordion_content .type_car ul.type_car_inner li .type_tax .type_tax_inner table.tax_image { width: 65px; font-size: 12px; font-family: "HondaGlobalFontJP-Light", sans-serif; } #contents_area .section_inner .accordion_content .type_car ul.type_car_inner li .type_tax .type_tax_inner table.tax_image thead th { width: 50%; text-align: center; line-height: 16px; } #contents_area .section_inner .accordion_content .type_car ul.type_car_inner li .type_tax .type_tax_inner table.tax_image thead th.tax01 { color: #009844; } #contents_area .section_inner .accordion_content .type_car ul.type_car_inner li .type_tax .type_tax_inner table.tax_image thead th.tax02 { color: #0064a1; } #contents_area .section_inner .accordion_content .type_car ul.type_car_inner li .type_tax .type_tax_inner table.tax_image tbody tr { border-bottom: solid 1px #fff; } #contents_area .section_inner .accordion_content .type_car ul.type_car_inner li .type_tax .type_tax_inner table.tax_image tbody td { color: #fff; text-align: center; padding: 0; margin: 0; line-height: 20px; } #contents_area .section_inner .accordion_content .type_car ul.type_car_inner li .type_tax .type_tax_inner table.tax_image tbody td strong { line-height: 16px; font-size: 14px; } #contents_area .section_inner .accordion_content .type_car ul.type_car_inner li .type_tax .type_tax_inner table.tax_image tbody td.tax01 { background-color: #009844; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } #contents_area .section_inner .accordion_content .type_car ul.type_car_inner li .type_tax .type_tax_inner table.tax_image tbody td.tax02 { background-color: #0064a1; -moz-border-radius: 0px 3px 3px 0px; -webkit-border-radius: 0px; border-radius: 0px 3px 3px 0px; } #contents_area .section_inner .accordion_content .type_car ul.type_car_inner li:nth-child(3n) { margin-right: 0 !important; } #contents_area .section_inner .welfare_car .btn_accordion_detail { background-color: #e99054 !important; color: #ffffff; } #contents_area .section_inner .welfare_car .btn_accordion_detail:after { content: '' !important; width: 20px; height: 100%; display: block; background-image: url(../common/image_common/parts_ico_btn_detail_arrow_btm_w.png); background-repeat: no-repeat; background-position: center; background-size: 20px 20px; position: absolute; top: -1px; right: 20px; } #contents_area .section_inner .welfare_car .on:after { background-image: url(../common/image_common/parts_ico_btn_detail_arrow_on_w.png) !important; } #contents_area .mbmt_none { margin: 5px 0; padding: 0; } /* -----------contents_area----------- */ /* ------------------------------------------------------------------------------------------ .rect_nav_index ------------------------------------------------------------------------------------------ */ .rect_nav_index { margin: 0 15px 50px 15px; font-size: 14px; color: #666; position: relative; z-index: 1; } .rect_nav_index.on { z-index: 65535 !important; } .rect_nav_index .sp_current { height: 40px; padding: 0 13px; line-height: 40px; display: block; border: 1px solid #999999; position: relative; z-index: 10; -webkit-tap-highlight-color: transparent; } .rect_nav_index .sp_current:after { content: ''; width: 42px; height: 42px; background-color: #0064a1; display: block; position: absolute; top: -1px; right: -1px; } .rect_nav_index .sp_current:before { content: ''; width: 42px; height: 42px; background-image: url(../common/image_common/parts_rect_nav_arrow.png); background-repeat: no-repeat; background-position: center; background-size: 12px; display: block; position: absolute; top: -1px; right: -1px; transition: all .1s ease; z-index: 1; } .rect_nav_index .sp_current.on:before { transform: rotate(-180deg); -webkit-transform: rotate(-180deg); } .rect_nav_index .sp_current.none:after { display: none; } .rect_nav_index .sp_current.none:before { display: none; } .rect_nav_index ul { width: 100% !important; padding: 0 43px 0 0; box-sizing: border-box; display: none; position: absolute; top: 1px; left: 0; z-index: 2; } .rect_nav_index li { width: inherit !important; margin: -1px 0 0 0; height: 40px; line-height: 40px; background-color: #fff; border: 1px solid #999999; border-bottom: 1px solid #999999; position: relative; z-index: 2; cursor: pointer; } .rect_nav_index li.current a { background-color: #dadada; color: #222 !important; cursor: default; pointer-events: none; } .rect_nav_index li a { padding: 0 13px; display: block; background-color: #fff; color: #666 !important; transition: all .1s ease !important; position: relative; } .rect_nav_index li a:hover { opacity: 1 !important; background-color: #dadada; color: #222 !important; } }