/* フォント */ @import url(//fonts.googleapis.com/earlyaccess/notosansjp.css); /* サイトカラーパレット */ :root { --color-primary: #0077C8; --color-secondary: #004B8D; --color-accent: #28A745; --color-price: #D93025; --color-bg: #F5FAFF; --color-text: #333333; } /* EC-CUBE 標準テーマ色の上書き */ body { background-color: var(--color-bg); color: var(--color-text); line-height: 1.8; } a { color: var(--color-primary); } a:hover, a:focus, a:active { color: var(--color-secondary); } .text-default, .item_box .item_detail, .sm.caution { color: var(--color-text); } .text-primary { color: var(--color-primary); } a.text-primary:hover { color: var(--color-secondary); } .text-success { color: var(--color-accent); } a.text-success:hover { color: #218838; } .bg-primary, a.bg-primary:hover { background-color: var(--color-primary); } .bg-primary-border { color: var(--color-primary); border-color: var(--color-primary); } .btn-primary, .badge { background-color: var(--color-primary); border-color: var(--color-primary); } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary { background-color: var(--color-secondary); border-color: var(--color-secondary); } .btn-success { background-color: var(--color-accent); border-color: var(--color-accent); } .btn-success:hover, .btn-success:focus, .btn-success:active { background-color: #218838; border-color: #1e7e34; } .item_price, #item_detail_area .item_detail .sale_price, .cart .item_box .item_price, .historylist_column .item_box .item_detail .item_price, .modal-body .item_price { color: var(--color-price); } #contents { background-color: #fff; } /* グローバル要素 */ .container-fluid { width: 100%; max-width: 100%;} #contents { max-width: 1500px; margin-left: auto; margin-right: auto; height: auto !important; min-height: auto !important;} /* トップ main_visual：#main 幅に依存せず PC でブラウザ幅いっぱいに表示 */ @media (min-width: 768px) { .front_page #wrapper { overflow-x: hidden; } .front_page #main_middle .main_visual-bleed { width: 100vw; max-width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } .front_page #main_middle .main_visual-bleed .main_visual { width: 100%; max-width: none; } .front_page #main_middle .main_visual-bleed .main_visual .item a { display: block; } .front_page #main_middle .main_visual-bleed .main_visual .item img { width: 100%; height: auto; display: block; vertical-align: bottom; } } /* ヘッダー要素 */ #header { padding-top: 0px; background-color: #F5FAFF;} #header .top_colum { background-color: #FFF;} #header #category { padding-top: 0px;} #header #category .category-nav { border-top: none; border-bottom: 1px solid #F5FAFF; position: relative; top: -5px;} #header #member { margin-top: 45px;} #header .full { background-color: #0077C8; height: 10px;} #header .full .callcenter { font-family: 'Noto Sans JP', sans-serif; letter-spacing: 3px; line-height: 56px; color: #FFF; font-weight: bold; font-size: 18px;} #header #cart_area { margin-top: 20px; background-color: #FFF;} #header #cart_area .cart_price { color: #333;} #header #cart_area .inner { min-width: 460px !important;} #header #cart_area .inner .item_box .item_name { line-height: 28px;} #header #cart_area .inner .item_box .item_pattern { line-height: 24px; font-weight: normal;} #header #cart_area .inner .item_box .item_price { line-height: 24px; font-weight: normal;} #header #cart_area .inner .item_box .item_quantity { line-height: 24px; font-weight: normal;} #header .top_colum { padding-top: 20px; max-width: 1500px;} /* 横长 logo（约 5:1）在 PC 需更宽；仅移动端限制 h1 宽度 */ #header .top_colum h1 { max-width: none;} #header .search_inner { width: 100%; background-color: #0077C8; padding-top: 5px; padding-bottom: 5px;} #header .search_inner #category_id { display: none; float: none;} #header .search_inner .input_search { width: 70%; display: block; margin-left: auto; margin-right: auto; float: none; border-bottom: none;} #header .search_inner .input_search #name { background-color: #FFF; height: 40px; margin-top: 5px; padding-left: 5px; text-align: center;} .item_box .item_detail { color: #333333;} .bt_search .cb-search { fill: #FFF;} h2.title { background-color: #f8f8f8; padding: 16px;} .fullbottom { width: 100%;} .footer_logo_area { margin-top: 40px;} .row.banner { border-top: 1px solid #F6F6F6; margin-top: 0px; padding-top: 20px;} @media (min-width: 767px) { #header .search_inner .input_search { margin-left: 0; margin-right: 0; } #header .search_inner { display: flex; align-items: center; justify-content: center;} #header .category-button{ position: relative; height: 40px; line-height: 40px; color: #ffffff; border: 1px #fff solid; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; padding: 0 1.4em 0 48px; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; transition: all .4s ease; z-index: 100;} #header .category-button:hover{ cursor: pointer;} #header .category-button:after, #header .category-button span:before, #header .category-button span:after{ content: ""; display: block; position: absolute; width: 20px; height: 3px; background-color: #ffffff; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -webkit-transition: all .4s ease; -moz-transition: all .4s ease; transition: all .4s ease;} #header .category-button span:before{ transform-origin: left top;} #header .category-button span:after{ transform-origin: left bottom;} #header .category-button:after{ top: 50%; left: 15px; margin-top: -1px;} #header .category-button span:before{ top: 50%; left: 15px; margin-top: -7px;} #header .category-button span:after{ top: 50%; left: 15px; margin-top: 5px;} #header #category_block { position: absolute; background: #fff; border: 1px solid #dadada; border-radius: 3px; box-shadow: 2px 2px 11px -2px rgba(0,0,0,0.4); left: 9%; top: 190px; z-index: 99; transition: .3s; opacity: 0; visibility: hidden;} #header #category_block.active { visibility: visible; opacity: 1; } #header #category_block .mega-menu { margin-bottom: 0; border: none!important; } #header #category_block .mega-menu > ul { width: 255px!important; } #header #category_block .mega-menu > ul > li { display: block!important; } #header #category_block .mega-menu > ul > li > a { display: flex!important; -webkit-align-items: center; align-items: center; -webkit-justify-content: space-between; justify-content: space-between; text-align: left!important;} #header #category_block .mega-menu > ul > li > a:after { content: ""; border-top: 2px solid #686868; border-right: 2px solid #686868; width: 7px; height: 7px; transform: rotate(45deg); display: inline-block; margin-left: 5px; position: relative;} #header #category_block .mega-menu > ul > li > ul { left: 100%!important; top: 0; width: 600px!important; } #header #category_block .mega-menu > ul > li > ul > li { width: 100%!important; display: block!important; float: none!important; } #header #category_block .mega-menu > ul > li > ul > li a { width: 100%!important; padding: .5em 1em 1em!important;} } /* 头部 logo：保持宽高比，避免 max-width:100% + 固定高度导致 PC 端拉伸 */ #header .top_colum h1 img { width: auto; height: auto; max-width: none; } @media (min-width: 992px) { #header .header_logo_area { width: auto !important; flex: 0 0 auto; } #header .top_colum h1 img { height: 8.6rem; width: auto; max-width: none; } } @media (max-width: 991px) { #header .top_colum h1 { max-width: 295px; } #header .top_colum h1 img { height: 40px !important; width: auto; max-width: 100%; } } /* 一覧 */ #page_product_list #topicpath { padding-top: 0px;} #page_product_list #contents { padding-top: 0px;} #page_product_detail .row.banner { margin-top: 20px;} /* 詳細 */ .item_free_text img { max-width: 100%;} .product-detail_text { margin-bottom: ; } .product-detail_text label { background: #f8f8f8; display: block; padding: 10px 15px; margin-bottom: 15px; } #other-banner { background: #f8f8f8; padding: 1em; margin-bottom: 20px;} #other-banner li { display: inline-block; margin-right: 5px;} #other-banner li:last-child { margin-right: 0; } .sm.caution { font-size: 1.2rem; color: #333333; font-weight: normal; display: block; padding-bottom: 5px;} #page_product_detail { overflow-x: hidden;} #page_product_detail .accordion { padding-left: 8px; padding-right: 8px;} #item_detail_area .item_detail .sale_price { padding-bottom: 25px;} #item_detail_area .review_wrap { max-width: 470px; margin-bottom: 30px;} #item_detail_area .item_detail .item_comment { line-height: 1.7; } #page_product_detail #product_review_area dl dt { font-size: 1.6rem; line-height: 2.1rem;} #page_product_detail #product_review_area dl dt svg { display: none;} #page_product_detail #product_review_area dl dd { display: block!important; height: auto!important;} #page_product_detail #product_review_area dl dd ul { padding-top: 30px;} #page_product_detail #product_review_area dl dd li { padding-bottom: 30px;} #page_product_detail .review_date { font-size: 1.4rem; font-weight: normal!important;} #page_product_detail .review_date + strong { font-size: 1.3rem; line-height: 1.9rem; padding-top: 5px; padding-bottom: 5px; display: block;} #page_product_detail #product_review_area strong + p { font-size: 1.3rem; line-height: 1.9rem; letter-spacing: .05em;} @media (max-width: 767px) { #other-banner .mgb20 { margin-bottom: 8px; } #page_product_detail .relative_cat li { font-size: 11px; } #page_product_detail .cart_area .quantity { margin-bottom: 14px; } #item_detail_area .item_detail .sale_price { font-size: 24px; } #detail_cart_box__button_area .row { padding-bottom: 10px; } } /* ログインボックス */ #login_box .column { height: auto;} #header .category-nav li a { font-size: 14px; padding-left: 10px; padding-right: 10px;} /* レスポンシブの設定 */ @media screen and (max-width: 1540px) { #header .category-nav li a { font-size: 14px; padding-left: 10px; padding-right: 10px;} } @media screen and (max-width: 1140px) { #header .category-nav li a { font-size: 12px; padding-left: 10px; padding-right: 10px;} } @media screen and (max-width: 768px) { /*.item_photo img { max-width: 218px;}*/ #page_product_detail #detail_description_box__sale_price .caution { font-size: 1rem;} } /* slick */ .slick-track { height: auto !important;} .slick-track .slick-slide { height: auto !important;} /* swiper */ .swiper-container { width: 100%; max-height: 300px; margin-left: auto; margin-right: auto;} .swiper-wrapper { width: 100%; max-height: 300px; margin-left: auto; margin-right: auto;} .swiper-slide { text-align: center; font-size: 18px; background: #fff; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;} /* 特殊効果 */ body { animation: fadeIn 2s ease 0s 1 normal; -webkit-animation: fadeIn 2s ease 0s 1 normal;} @keyframes fadeIn { 0% { opacity: 0;} 100% { opacity: 1;} } @-webkit-keyframes fadeIn { 0% { opacity: 0;} 100% { opacity: 1;} } /* sumida */ h3#detail_description_box__name { margin-top: 20px;} #plg_alterclass.alter-mode-1 th { background-color: #fff !important; width: 70% !important;} #plg_alterclass.alter-mode-1 { width: 100% !important;} #plg_alterclass__body tr:last-child th { color: #D93025; font-size: 2.8rem;} #plg_alterclass__body tr:first-child th { color: #333333; font-size: 2.8rem;} #plg_alterclass { border-radius: 5px;} @media screen and (max-width: 480px) { #plg_alterclass__body tr:last-child th { color: #D93025; font-size: 1.8rem;} #plg_alterclass__body tr:first-child th { color: #333333; font-size: 1.8rem;} } /*-------------------------------------- デザインブロックより追加 --------------------------------------*/ /* free_area */ #detail_free_box__freearea { margin-top: 30px; font-size: 1.3rem; line-height: 2.3rem;} #detail_free_box__freearea h4 { margin-bottom: 10px; font-size: 2rem; margin-top: 5rem; margin-bottom: 1.5rem;} #detail_free_box__freearea h4 strong { background: #004B8D; color: #fff; padding: 10px; border-radius: 5px; font-size: 1.6rem; line-height: 1.8rem; display: inline-block;} #detail_free_box__freearea h4 + h4 { margin-top: 5px;} #detail_free_box__freearea .product_free_row { margin-left: -3px; margin-right: -3px;} #detail_free_box__freearea .product_free_row [class*="col"] { padding: 0 3px;} #detail_free_box__freearea .lp_ruby.t-center { text-align: center; margin-top: 35px; margin-bottom: 30px; padding: 0; border: 1px solid #eee; padding-bottom: 10px;} #detail_free_box__freearea .lp_ruby.t-center span { display: block; padding: 5px; margin-bottom: 20px; background: #eee;} #detail_free_box__freearea .lp_ruby strong { font-size: 3.2rem;} #detail_free_box__freearea .lp_ruby small { display: block;} #detail_free_box__freearea table { max-width: 100%; background-color: transparent; border-collapse: collapse; border-spacing: 0; width: 100%;} .owl-carousel.owl-theme .owl-wrapper-outer .owl-item { box-sizing: border-box; padding-right: 16px; padding-left: 16px;} #guide_wrap .caution_list li { margin-bottom: 0; margin-left: 0;} #guide_wrap .mgt-20 { margin-top: 30px;} #contents { padding-bottom: 5rem;} #detail_free_box__freearea .table { width: 100%; margin-bottom: 20px;} #detail_free_box__freearea .table-inline { width: auto;} #detail_free_box__freearea .table th, #detail_free_box__freearea .table td { padding: 8px; line-height: 20px; text-align: left; vertical-align: top; border-top: 1px solid #dddddd;} #detail_free_box__freearea .table th.text-right, #detail_free_box__freearea .table td.text-right { text-align: right;} #detail_free_box__freearea .table th { font-weight: bold;} #detail_free_box__freearea .table thead th { vertical-align: bottom;} #detail_free_box__freearea .table caption + thead tr:first-child th, #detail_free_box__freearea .table caption + thead tr:first-child td, #detail_free_box__freearea .table colgroup + thead tr:first-child th, #detail_free_box__freearea .table colgroup + thead tr:first-child td, #detail_free_box__freearea .table thead:first-child tr:first-child th, #detail_free_box__freearea .table thead:first-child tr:first-child td { border-top: 0;} #detail_free_box__freearea .table tbody + tbody { border-top: 2px solid #dddddd;} #detail_free_box__freearea .table .table { background-color: #ffffff;} #detail_free_box__freearea .table-condensed th, #detail_free_box__freearea .table-condensed td { padding: 4px 5px;} #detail_free_box__freearea .table-bordered { border: 1px solid #dddddd; border-collapse: separate; *border-collapse: collapse; border-left: 0; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; margin-top: 50px; margin-bottom: 50px;} #detail_free_box__freearea .table-bordered.no-round, #detail_free_box__freearea .table-bordered.no-round tr, #detail_free_box__freearea .table-bordered.no-round th, #detail_free_box__freearea .table-bordered.no-round td, #detail_free_box__freearea .table-bordered.no-round tbody { border-radius: 0!important;} #detail_free_box__freearea .table-bordered th, #detail_free_box__freearea .table-bordered td { border-left: 1px solid #dddddd;} #detail_free_box__freearea .table-bordered th { background: #F5F5F5; vertical-align: middle;} #detail_free_box__freearea .table-bordered caption + thead tr:first-child th, #detail_free_box__freearea .table-bordered caption + tbody tr:first-child th, #detail_free_box__freearea .table-bordered caption + tbody tr:first-child td, #detail_free_box__freearea .table-bordered colgroup + thead tr:first-child th, #detail_free_box__freearea .table-bordered colgroup + tbody tr:first-child th, #detail_free_box__freearea .table-bordered colgroup + tbody tr:first-child td, #detail_free_box__freearea .table-bordered thead:first-child tr:first-child th, #detail_free_box__freearea .table-bordered tbody:first-child tr:first-child th, #detail_free_box__freearea .table-bordered tbody:first-child tr:first-child td { border-top: 0;} #detail_free_box__freearea .table-bordered thead:first-child tr:first-child > th:first-child, #detail_free_box__freearea .table-bordered tbody:first-child tr:first-child > td:first-child, #detail_free_box__freearea .table-bordered tbody:first-child tr:first-child > th:first-child { -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-topleft: 4px;} #detail_free_box__freearea .table-bordered thead:first-child tr:first-child > th:last-child, #detail_free_box__freearea .table-bordered tbody:first-child tr:first-child > td:last-child, #detail_free_box__freearea .table-bordered tbody:first-child tr:first-child > th:last-child { -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; -moz-border-radius-topright: 4px;} #detail_free_box__freearea .table-bordered thead:last-child tr:last-child > th:first-child, #detail_free_box__freearea .table-bordered tbody:last-child tr:last-child > td:first-child, #detail_free_box__freearea .table-bordered tbody:last-child tr:last-child > th:first-child, #detail_free_box__freearea .table-bordered tfoot:last-child tr:last-child > td:first-child, #detail_free_box__freearea .table-bordered tfoot:last-child tr:last-child > th:first-child { -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; -moz-border-radius-bottomleft: 4px;} #detail_free_box__freearea .table-bordered thead:last-child tr:last-child > th:last-child, #detail_free_box__freearea .table-bordered tbody:last-child tr:last-child > td:last-child, #detail_free_box__freearea .table-bordered tbody:last-child tr:last-child > th:last-child, #detail_free_box__freearea .table-bordered tfoot:last-child tr:last-child > td:last-child, #detail_free_box__freearea .table-bordered tfoot:last-child tr:last-child > th:last-child { -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; -moz-border-radius-bottomright: 4px;} #detail_free_box__freearea .table-bordered tfoot + tbody:last-child tr:last-child td:first-child { -webkit-border-bottom-left-radius: 0; border-bottom-left-radius: 0; -moz-border-radius-bottomleft: 0;} #detail_free_box__freearea .table-bordered tfoot + tbody:last-child tr:last-child td:last-child { -webkit-border-bottom-right-radius: 0; border-bottom-right-radius: 0; -moz-border-radius-bottomright: 0;} #detail_free_box__freearea .table-bordered caption + thead tr:first-child th:first-child, #detail_free_box__freearea .table-bordered caption + tbody tr:first-child td:first-child, #detail_free_box__freearea .table-bordered colgroup + thead tr:first-child th:first-child, #detail_free_box__freearea .table-bordered colgroup + tbody tr:first-child td:first-child { -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; -moz-border-radius-topleft: 4px;} #detail_free_box__freearea .table-bordered caption + thead tr:first-child th:last-child, #detail_free_box__freearea .table-bordered caption + tbody tr:first-child td:last-child, #detail_free_box__freearea .table-bordered colgroup + thead tr:first-child th:last-child, #detail_free_box__freearea .table-bordered colgroup + tbody tr:first-child td:last-child { -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; -moz-border-radius-topright: 4px;} #detail_free_box__freearea .table-striped tbody > tr:nth-child(odd) > td, #detail_free_box__freearea .table-striped tbody > tr:nth-child(odd) > th { background-color: #f9f9f9;} #detail_free_box__freearea .table-hover tbody tr:hover > td, #detail_free_box__freearea .table-hover tbody tr:hover > th { background-color: #f5f5f5;} #detail_free_box__freearea .table-hover .active > td { background-color: #e8efff!important;} #detail_free_box__freearea table td { width: 40%;} #detail_free_box__freearea table th { width: 10%;} @media only screen and (max-width: 767px) { #detail_free_box__freearea .lp_ruby { text-align: left;} #detail_free_box__freearea table { display: block!important; float: left;} #detail_free_box__freearea table tr,#detail_free_box__freearea table td, #detail_free_box__freearea table th { display: block!important; width: 100%!important; float: left;} #detail_free_box__freearea .product_free_row { margin-top: 25px;} #detail_free_box__freearea .lp_ruby.t-center { margin-top: 5px; margin-bottom: 0;} #detail_free_box__freearea .lp_ruby.t-center:nth-child(2) { margin-top: 5px;} } /*.pickup_item .item_photo, #item_list .item_photo, #checkeditem .item_photo { margin: 0 0 5px; width: 100%; height: 200px; margin-left: auto; margin-right: auto;}*/ /*.pickup_item .item_photo img, #item_list .item_photo img , #checkeditem .item_photo img { margin: auto; width: 100%; height: auto; padding: 10%;}*/ @media only screen and (max-width: 991px) { /*.pickup_item .item_photo img, #item_list .item_photo img , #checkeditem .item_photo img { width: 100%; height: auto;}*/ } @media only screen and (max-width: 767px) { #header #cart_area .inner { width: 100%; min-width: initial!important;} } /*body { font-family: "Hiragino Kaku Gothic Pro W3", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;}*/ body { font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif; } .category-nav a:hover, .category-nav li > a:hover, .category-nav li > a.active { color: var(--color-primary); } .item_price { font-weight: normal; color: #D93025!important;} .row-fluid::after, .row-fluid::before { content: ""; display: table;} .mw-225 { max-width: 225px;} .mx-auto { margin-left: auto; margin-right: auto;} .list-style-none { list-style: none;} ul.list-style-none li { list-style: none;} ul.list-style-none li span { display: block;} .guide_link svg { width: 25.83px; height: 25.83px; position: relative; top: 7px; margin-right: 2px;} .row-fluid::after { clear: both;} .row-eq-height { display: flex !important; flex-wrap: wrap;} .mgt20 { margin-top: 20px !important; display: block;} .mgb50 { margin-bottom: 50px !important; display: block;} .cntr { display: block; margin: 0 auto;} .pd0 { padding-left: 0 !important; padding-right: 0 !important;} .item_name { margin-bottom: 0; font-size: 1.5rem;} .item_comment { margin-bottom: 0;} .item_comment a { font-size: 1.2rem;} .product_page .product_item a { padding-bottom: 0;} .item_price { margin-top: 6px; font-weight: bold; font-size: 1.4rem;} .row-eq-height .col-sm-6 { width: 49.8%;} header .cb-shopping-cart use { fill: #333333; color: #333333;} @media only screen and (max-width: 991px) { .front_page #contents .row > div { padding-bottom: 30px;} } @media only screen and (min-width: 768px) { .front_page #main_middle { padding-bottom: 20px;} } @media (max-width: 767px) { body { font-size: 14px;} .item_name { font-size: 11px; } .news_contents { margin-top: 0; } } .front_page #main_middle .row { padding-bottom: 0!important;} .front_page #main_middle .row > div { padding-bottom: 5px!important;} .front_page #item_list { padding-bottom: 0;} .front_page #item_list .row > div { padding-bottom: 0;} #item_list.new_item_list .row .col-lg-2.col-md-2:nth-child(7) { display: none;} #item_list.new_item_list .row .col-lg-2.col-md-2:nth-child(8) { display: none;} .front_page #contents_top .item_comment.text-warning, .front_page #contents_top .item_name.text-warning { font-feature-settings: "palt"; font-size: 1.2rem; margin-bottom: 0;} /* #header .category-nav li { position: static;} #header .category-nav li ul { display: flex; flex-wrap: wrap; width: 100%;} #header .category-nav > li:hover > ul > li { width: 12.5%; position: relative;} #header .category-nav li ul li ul { top: 100%; left: 0;} */ /* header category */ @media only screen and (min-width: 991px) { .front_page #item_list .row .col-lg-2.col-lg-2.col-md-2 { padding-bottom: 3rem;} } @media only screen and (min-width: 768px) { #header .category-nav li ul li ul:before { content: "";} #header .category-nav li:last-child ul li ul:before { content: "";} #guide_wrap .construction .col-sm-4 { margin-bottom: 16px;} } @media only screen and (max-width: 767px) { .row-eq-height .col-sm-6 { width: 100%;} } #guide_wrap { font-size: 14px;} #guide_wrap .title { background-color: #0077C8; color: #fff; line-height: 22px; font-size: 22px; padding: 10px; margin-bottom: 10px;} #guide_wrap ul { list-style: disc;} #guide_wrap li { margin-left: 20px; margin-bottom: 20px; line-height: 24px; letter-spacing: 0.1rem;} #guide_wrap h2 { margin: 0; margin-bottom: 8px; font-size: 20px;} #guide_wrap h3 { font-size: 16px; font-weight: normal; letter-spacing: 0.1rem; margin: 0; margin-bottom: 20px; background-color: #f7f7f7; padding: 5px;} #guide_wrap .border { border-bottom: 1px dotted #000; height: 1px; margin: 20px 0;} #guide_wrap .afborder { display: inline;} #guide_wrap .afborder:after { content: "｜"} #guide_wrap .afborder a { color: #333333;} #guide_wrap .guide { margin-bottom: 50px;} #guide_wrap .guide img { width: 60%; display: block; margin: 0 auto; margin-bottom: 30px; margin-top: 20px;} #guide_wrap .guide .title { background-color: #fff; color: #333333; text-align: center; font-weight: bold; font-size: 22px; line-height: 25px;} #guide_wrap .guide p { text-align: left;} #guide_wrap .guide a { color: #333333; display: block; padding: 5px;} #guide_wrap .guide a:hover { transition: 0.3s; background-color: #f7f7f7;} #guide_wrap .construction h1 { margin-top: 15px; margin-bottom: 13px;} #guide_wrap .construction .s_title { letter-spacing: 0.4rem; font-size: 5px; padding-left: 15px; display: none;} #guide_wrap .construction .wrap { border: 5px solid #ce0000; border-radius: 10px; position: relative;} #guide_wrap .construction .category_title { position: absolute; left: 2px; top: 2px; display: inline; background-color: #ce0000; padding: 5px; border-radius: 5px;} #guide_wrap .construction img { display: block; padding: 30px 0 20px;} #guide_wrap .construction a { color: #fff; letter-spacing: 0.1rem; display: block;} #guide_wrap .construction .wrap { margin-top: 15px;} #guide_wrap .cache table.df { border-spacing: 0 3px; border-collapse: inherit; font-size: 14px !important; width: 100%;} #guide_wrap .cache table.df>tbody>tr>td:first-child { background-color: #eee; padding: 5px; width: 25%; position: relative;} #guide_wrap .cache table.df>tbody>tr>td:last-child { padding-left: 15px !important;} #guide_wrap .cache table.df>tbody>tr>td:first-child::after { content: ' '; height: 0; position: absolute; width: 0; border: 10px solid transparent; border-left-color: #eee; left: 100%;} #guide_wrap .cache table.df>tbody>tr>td:last-child { border: 1px solid #eee; padding: 5px; font-size: 12px;} #guide_wrap .cache table.df>tbody>tr table { font-size: 12px !important; table-layout: fixed; text-align: center;} #guide_wrap .cache table.df>tbody>tr table tr td { padding: 5px;} #guide_wrap .cache table.df>tbody>tr table tr:first-child { background-color: #eee;} #guide_wrap .cache table.daibiki { font-size: 12px !important; table-layout: fixed; text-align: center; width: 100%;} #guide_wrap .cache table.daibiki tr td { padding: 5px;} #guide_wrap .cache table.daibiki tr:first-child, #guide_wrap .cache table.daibiki tr:nth-child(3) { background-color: #eee;} #guide_wrap table.df section { margin-bottom: 15px;} #guide_wrap table.df section img { display: block; margin: 0 auto; width: 70%;} #guide_wrap .cache .smartpid { background-color: #ecf3c6; padding: 10px; font-size: 10px; font-weight: bold; margin-bottom: 6px; text-align: center;} #guide_wrap .cache .txt_right a { background: #e1f1ff; padding: 5px; border-radius: 5px;} #guide_wrap .deli-tab { font-size: 14px; text-align: center; width: 100%; table-layout: fixed; margin: 10px 0;} #guide_wrap .deli-tab td { border: 1px solid #eee; padding: 3px;} #guide_wrap .center { text-align: center; margin: 60px 50px; font-weight: bold;} /* ご利用案内（guide.twig） */ #guide_wrap.guide-help-page .guide-help-quicklinks { margin-bottom: 32px; } #guide_wrap.guide-help-page .shop-intro-greeting { background: #f0f7fc; border: 1px solid #cce4f3; border-left: 6px solid #0077C8; margin-bottom: 32px; } #guide_wrap.guide-help-page .guide-help-nav { background: #f5f7fb; border: 1px solid #e2e8f0; border-radius: 8px; padding: 16px 20px; margin-bottom: 40px; } #guide_wrap.guide-help-page .guide-help-nav__list { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; } #guide_wrap.guide-help-page .guide-help-nav__list li { margin: 0; } #guide_wrap.guide-help-page .guide-help-nav__link { display: inline-block; padding: 10px 18px; background: #fff; border: 1px solid #0077C8; border-radius: 6px; color: #0077C8; font-weight: bold; text-decoration: none; transition: background 0.2s, color 0.2s; } #guide_wrap.guide-help-page .guide-help-nav__link:hover { background: #0077C8; color: #fff; } #guide_wrap.guide-help-page .guide-help-contents { max-width: 900px; margin: 0 auto; } #guide_wrap.guide-help-page .guide-help-section { scroll-margin-top: 80px; margin-bottom: 48px; padding-bottom: 48px; border-bottom: 1px solid #e8e8e8; } #guide_wrap.guide-help-page .guide-help-section:last-child { border-bottom: none; } #guide_wrap.guide-help-page .guide-help-section__title { background-color: #0077C8; color: #fff; font-size: 20px; line-height: 1.4; padding: 12px 16px; margin: 0 0 20px; border-radius: 4px; } #guide_wrap.guide-help-page .guide-help-subtitle { font-size: 16px; font-weight: bold; color: #0077C8; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid #e2e8f0; } #guide_wrap.guide-help-page .guide-help-card { background: #fff; border: 1px solid #e8e8e8; border-radius: 8px; padding: 20px 24px; margin-bottom: 16px; line-height: 1.8; letter-spacing: 0.05em; } #guide_wrap.guide-help-page .guide-help-card p { margin: 0 0 12px; } #guide_wrap.guide-help-page .guide-help-card p:last-child { margin-bottom: 0; } #guide_wrap.guide-help-page .guide-help-alert { color: #c00; font-weight: bold; } #guide_wrap.guide-help-page .guide-help-note { margin-top: 12px; } #guide_wrap.guide-help-page .guide-help-em { color: #c00; } #guide_wrap.guide-help-page .guide-help-dl { margin: 16px 0 0; } #guide_wrap.guide-help-page .guide-help-dl dt { font-weight: bold; margin-bottom: 4px; } #guide_wrap.guide-help-page .guide-help-dl dd { margin: 0 0 0 1em; } #guide_wrap.guide-help-page .guide-help-steps { list-style: none; margin: 0; padding: 0; counter-reset: none; } #guide_wrap.guide-help-page .guide-help-step { display: flex; gap: 16px; margin: 0 0 0; padding: 0 0 24px 0; position: relative; } #guide_wrap.guide-help-page .guide-help-step:not(:last-child)::before { content: ''; position: absolute; left: 19px; top: 44px; bottom: 0; width: 2px; background: #d0daf0; } #guide_wrap.guide-help-page .guide-help-step__num { flex-shrink: 0; width: 40px; height: 40px; background: #0077C8; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 16px; z-index: 1; } #guide_wrap.guide-help-page .guide-help-step__body { flex: 1; background: #f9fafc; border: 1px solid #e8e8e8; border-radius: 8px; padding: 16px 20px; } #guide_wrap.guide-help-page .guide-help-step__title { font-size: 15px; font-weight: bold; margin: 0 0 8px; color: #333; } #guide_wrap.guide-help-page .guide-help-step__body p { margin: 0; line-height: 1.7; } #guide_wrap.guide-help-page .guide-help-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 14px; } #guide_wrap.guide-help-page .guide-help-table th, #guide_wrap.guide-help-page .guide-help-table td { border: 1px solid #e0e0e0; padding: 10px 14px; text-align: left; vertical-align: top; } #guide_wrap.guide-help-page .guide-help-table th { background: #f0f4fa; width: 28%; font-weight: bold; color: #333; } #guide_wrap.guide-help-page .guide-help-table--browser th { width: 35%; } #guide_wrap.guide-help-page .guide-help-notice { background: #fff9f0; border-left: 4px solid #f0a020; padding: 14px 16px; margin-top: 16px; font-size: 13px; } #guide_wrap.guide-help-page .guide-help-notice--important { background: #fff5f5; border-left-color: #c00; } #guide_wrap.guide-help-page .guide-help-notice p { margin-bottom: 10px; } #guide_wrap.guide-help-page .guide-help-example { font-family: monospace; background: #f5f5f5; padding: 6px 10px; border-radius: 4px; display: inline-block; } @media only screen and (max-width: 767px) { #guide_wrap.guide-help-page .guide-help-nav__list { flex-direction: column; } #guide_wrap.guide-help-page .guide-help-nav__link { display: block; text-align: center; } #guide_wrap.guide-help-page .guide-help-step { flex-direction: column; gap: 10px; } #guide_wrap.guide-help-page .guide-help-step:not(:last-child)::before { display: none; } #guide_wrap.guide-help-page .guide-help-table th, #guide_wrap.guide-help-page .guide-help-table td { display: block; width: 100%; } #guide_wrap.guide-help-page .guide-help-table th { border-bottom: none; } } /* よくあるご質問（question.twig） */ #guide_wrap.guide-help-page .guide-faq-lead { max-width: 900px; margin: 0 auto 32px; line-height: 1.8; letter-spacing: 0.05em; } #guide_wrap.guide-help-page .guide-faq-lead a { color: #0077C8; text-decoration: underline; } #guide_wrap.guide-help-page .guide-faq__item { background: #fff; border: 1px solid #e8e8e8; border-radius: 8px; margin-bottom: 12px; overflow: hidden; } #guide_wrap.guide-help-page .guide-faq__q { display: flex; align-items: flex-start; gap: 12px; padding: 14px 44px 14px 16px; font-weight: bold; line-height: 1.6; cursor: pointer; position: relative; list-style: none; transition: background 0.2s; } #guide_wrap.guide-help-page .guide-faq__q::-webkit-details-marker { display: none; } #guide_wrap.guide-help-page .guide-faq__q:hover { background: #f0f6fc; } #guide_wrap.guide-help-page .guide-faq__q::after { content: ''; position: absolute; right: 18px; top: 24px; width: 9px; height: 9px; border-right: 2px solid #0077C8; border-bottom: 2px solid #0077C8; transform: rotate(45deg); transition: transform 0.2s; } #guide_wrap.guide-help-page .guide-faq__item[open] > .guide-faq__q::after { transform: translateY(5px) rotate(225deg); } #guide_wrap.guide-help-page .guide-faq__q-text { flex: 1; padding-top: 2px; } #guide_wrap.guide-help-page .guide-faq__icon { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 14px; color: #fff; line-height: 1; } #guide_wrap.guide-help-page .guide-faq__icon--q { background: #0077C8; } #guide_wrap.guide-help-page .guide-faq__icon--a { background: #99cb13; } #guide_wrap.guide-help-page .guide-faq__a { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px 16px; background: #f9fafc; border-top: 1px dashed #d9e2ec; line-height: 1.8; letter-spacing: 0.05em; } #guide_wrap.guide-help-page .guide-faq__a-text { flex: 1; padding-top: 2px; } #guide_wrap.guide-help-page .guide-faq__a-text p { margin: 0 0 10px; } #guide_wrap.guide-help-page .guide-faq__a-text p:last-child { margin-bottom: 0; } #guide_wrap.guide-help-page .guide-faq__a-text a { color: #0077C8; text-decoration: underline; word-break: break-all; } #guide_wrap.guide-help-page .guide-faq__note { color: #777; font-size: 13px; } #guide_wrap.guide-help-page .guide-faq__contact { text-align: center; background: #f5f7fb; border: 1px solid #e2e8f0; border-radius: 8px; padding: 28px 20px; } #guide_wrap.guide-help-page .guide-faq__contact p { margin: 0 0 16px; font-weight: bold; } @media only screen and (max-width: 767px) { #guide_wrap.guide-help-page .guide-faq__q { padding: 12px 36px 12px 12px; font-size: 14px; } #guide_wrap.guide-help-page .guide-faq__q::after { right: 14px; top: 20px; } #guide_wrap.guide-help-page .guide-faq__a { padding: 12px; font-size: 13px; } #guide_wrap.guide-help-page .guide-faq__icon { width: 24px; height: 24px; font-size: 13px; } } /* 設置工事詳細 */ #guide_wrap .pink { padding: 50px; background: #ffefef;} #guide_wrap .pink h1 { color: #ea0000; text-align: center;} #guide_wrap .refrigerator .col-sm-4 { margin-bottom: 20px;} #guide_wrap .refrigerator .flow .pink>div { background: #fff; padding: 20px; margin-bottom: 20px;} #guide_wrap .refrigerator .flow .pink>div>div { font-size: 2.4rem;} #guide_wrap .refrigerator .flow .pink>div>div span { background: #ea0000; padding: 5px 10px; color: #fff; border-radius: 20px; margin-right: 15px;} #guide_wrap .refrigerator h2 { margin: 0;} #guide_wrap .refrigerator section { margin-bottom: 20px; padding-bottom: 40px;} #guide_wrap .refrigerator h2+p { padding: 10px; margin-top: 0;} /* 設置工事各ページ */ .topimage img { width: 100%; max-width: none;} .mark { color: #ea0000; text-align: center; font-size: 20px;} @media only screen and (max-width: 768px) { #guide_wrap .guide img { margin-top: 30px;} #guide_wrap .guide .col-sm-3 { background-color: #f7f7f7; padding: 5px; margin-bottom: 30px;} #guide_wrap .construction .col-sm-4 { margin-bottom: 20px;} #guide_wrap .construction .wrap { margin-top: 0;} #guide_wrap .deli-tab { font-size: 10px;} .refrigerator .flow .pink { padding: 30px 16px;} } @media only screen and (max-width: 992px) { #guide_wrap .cache .row>.col-md-4 { margin-bottom: 20px;} } .makerlink { display: block;} .makerlink:nth-child(2) { display: none;} #page_help_privacy h3 { margin-top: 50px;} .service span { font-weight: bolder; font-size: 16px; color: #000; border-bottom: 1px solid #000; display: block; margin-top: 50px; padding-bottom: 8px;} #guide_wrap .service .title { background-color: #0077C8; color: #fff; line-height: 12px; padding: .8em 1em; margin-bottom: 30px;} /* 商品詳細ページ */ #page_product_detail .relative_cat + .relative_cat { border-top: none;} #page_product_detail .price_area { margin-bottom: 15px;} #page_product_detail .price_area .price .eraser { display: inline-block; text-decoration: line-through;} #page_product_detail .price_area .price .dl-horizontal dt { margin-top: 5px; display: inline-block; background: #D93025; padding: 3px 10px; color: #fff; letter-spacing: .2rem; font-weight: bold; margin-right: 10px; margin-bottom: 6px; border: 1px solid #D93025;} #page_product_detail .price_area .price .dl-horizontal dd { font-weight: bold; letter-spacing: .1em; display: inline-block; padding-left: 1rem; font-size: 2.3rem; position: relative; top: 3px;} #page_product_detail .price_area .price .dl-horizontal dd span { font-size: 1.2rem; letter-spacing: 0; padding-left: 5px;} #page_product_detail .price_area .price.font-sm dt { background: #ffffff; color: #333333; border: 1px solid #333333;} #page_product_detail .price_area .price.font-sm dd { font-size: 1.5rem; top: 0;} #page_product_detail .price_area .price .font-red { color: #D93025;} @media (max-width: 767px) { #page_product_detail .slick-slider { margin-bottom: 30px;} } /* 工事費込み：商品説明下の説明画像 */ .kojiset-images { margin: 1.25rem 0 0; } .kojiset-images__block { margin-bottom: 12px; } .kojiset-images__block:last-child { margin-bottom: 0; } .kojiset-images__block--cta { margin-bottom: 20px; } .kojiset-images__cta-wrap { display: block; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 75, 141, 0.18); border: 2px solid #0077C8; } .kojiset-images__item { display: block; width: 100%; max-width: 100%; height: auto; margin: 0 auto; vertical-align: bottom; } .kojiset-images__cta-wrap .kojiset-images__item { margin-bottom: 0; } .kojiset-images__btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin: 0; padding: 18px 24px; background: linear-gradient(180deg, #0096e0 0%, #0077C8 45%, #0060a8 100%); border: none; border-top: 3px solid #004B8D; color: #fff !important; font-size: 17px; font-weight: bold; text-align: center; text-decoration: none !important; line-height: 1.4; letter-spacing: 0.06em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); transition: background 0.25s, transform 0.2s, box-shadow 0.25s; } .kojiset-images__btn--fees { background: linear-gradient(180deg, #0088d4 0%, #0077C8 40%, #004B8D 100%); } .kojiset-images__btn-text { display: inline-block; } .kojiset-images__btn::after { content: ''; display: inline-block; width: 10px; height: 10px; border-right: 3px solid #fff; border-top: 3px solid #fff; transform: rotate(45deg); flex-shrink: 0; margin-top: 1px; transition: transform 0.2s; } .kojiset-images__btn:hover { background: linear-gradient(180deg, #0060a8 0%, #004B8D 50%, #003a6e 100%); color: #fff !important; text-decoration: none !important; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 6px 16px rgba(0, 75, 141, 0.35); } .kojiset-images__btn:hover::after { transform: rotate(45deg) translate(3px, -3px); } .kojiset-images__btn:active { transform: translateY(0); } @media (max-width: 767px) { .kojiset-images__btn { padding: 16px 18px; font-size: 15px; letter-spacing: 0.04em; } } /* 商品詳細オプション */ /* 標準取付工事の有無（货号ペア切替） */ .product-selection { margin: 20px 0 16px; padding: 16px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; } .product-selection__label { margin-bottom: 12px; font-size: 1.4rem; font-weight: 600; color: #333; line-height: 1.5; } .product-selection__selected-value { display: inline-block; margin-left: 8px; padding: 2px 10px; font-size: 1.2rem; font-weight: 600; color: #0077C8; background: #e8f4fc; border-radius: 4px; } .product-selection__options { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; } .product-selection__options.col-2 .product-selection__option { flex: 1 1 calc(50% - 5px); min-width: 140px; } .product-selection__option { margin: 0; } .product-selection__button { display: block; width: 100%; padding: 12px 14px; font-size: 1.3rem; font-weight: 600; line-height: 1.4; text-align: center; text-decoration: none; color: #333; background: #fff; border: 2px solid #d1d5db; border-radius: 6px; transition: border-color 0.2s, color 0.2s, background 0.2s; } .product-selection__button:hover { color: #0077C8; border-color: #0077C8; text-decoration: none; } .product-selection__option.selected .product-selection__button { color: #fff; background: #0077C8; border-color: #0077C8; pointer-events: none; cursor: default; } @media (max-width: 767px) { .product-selection__options.col-2 .product-selection__option { flex: 1 1 100%; } } /* 工事費込み：設置オプション（参考 tantan ec-summaryRole） */ .cart_page .item_product_option { margin-top: 8px; padding: 8px 10px; background: #f7f7f7; border-left: 3px solid #5c6bc0; color: #333; line-height: 1.6; white-space: normal; } .cart_page .item_product_option__title { margin-bottom: 6px; font-weight: bold; font-size: 1.3rem; color: #333; } .cart_page .item_product_option__body { font-size: 1.2rem; } .koji-option-summary { margin: 20px 0 16px; padding: 16px; background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; } .koji-option-summary__inner { display: block; } .koji-option-item { margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px solid #e8e8e8; } .koji-option-item--error { margin-left: -10px; padding: 12px 10px 18px; background: #fff5f5; border-left: 3px solid #d9534f; border-radius: 4px; } .koji-option-item--error .form-control { border-color: #d9534f; } .koji-option-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } .koji-option-item__title { margin-bottom: 10px; font-size: 1.6rem; font-weight: 700; line-height: 1.55; color: #333; } .koji-option-item__title p { margin: 0; font-size: inherit; line-height: inherit; } @media (max-width: 767px) { .koji-option-item__title { font-size: 1.5rem; line-height: 1.5; } } .koji-option-item__body { font-size: 1.3rem; line-height: 1.6; } .koji-option-item__text { margin: 0 0 6px; color: #333; } .koji-option-item__note { margin: 0; font-size: 1.2rem; color: #666; } .koji-option-item__form { position: relative; } .koji-option-required { display: inline-block; margin-bottom: 6px; padding: 2px 8px; font-size: 1.1rem; font-weight: 700; color: #fff; background: #d93025; border-radius: 3px; } .koji-option-summary .form-control { width: 100%; max-width: 100%; } @media (min-width: 768px) { #detail_cart_box .koji-option-summary .form-control { max-width: 360px; } } #detail_cart_box .option_list { margin-top: 30px;} #detail_cart_box .option_list li:nth-child(2n - 1) { color: #333; padding: .5rem 1.5rem .5rem 0; position: relative;} #detail_cart_box .option_list li:nth-child(2n - 1) label { font-weight: bold; letter-spacing: .1em;} #detail_cart_box .option_list li:nth-child(2n - 1) span.required { background: #fff; border-radius: 10%; padding: 3px; font-weight: bold !important; position: relative; bottom: 1px;} #detail_cart_box .option_list li:nth-child(2n - 1)>a { padding: 10px 0 0; font-size: 14px; display: block;} #detail_cart_box .option_list li:nth-child(2n - 1)>a:after { content: "はこちら";} #detail_cart_box .option_list li:before { display: block; display: inline-block; background: #f9a84d; border-radius: 10px; padding: 3px 10px; color: #fff; letter-spacing: .2rem; font-weight: bold; margin-right: 10px;} #detail_cart_box .option_list li:nth-child(1):before { content: "STEP1";} #detail_cart_box .option_list li:nth-child(3):before { content: "STEP2";} #detail_cart_box .option_list li:nth-child(5):before { content: "STEP3";} #detail_cart_box .option_list li:nth-child(7):before { content: "STEP4";} #detail_cart_box .option_list li:nth-child(9):before { content: "STEP5";} #detail_cart_box .option_list li:nth-child(11):before { content: "STEP6";} #detail_cart_box .option_list li:nth-child(13):before { content: "STEP7";} #detail_cart_box .option_list li:nth-child(15):before { content: "STEP8";} #detail_cart_box .option_list li:nth-child(17):before { content: "STEP9";} #detail_cart_box .option_list li:nth-child(19):before { content: "STEP10";} #detail_cart_box .option_list li:nth-child(2n) { margin-top: 0; padding: 7px 0 1px;} #detail_cart_box .option_list li:nth-child(2n) .radio label { margin-bottom: 10px; font-size: 13px; border: 1px solid #d6d6d6; padding: 15px; border-radius: 5px; position: relative; width: 100%; display: block;} #detail_cart_box .option_list li:nth-child(2n) .radio input { margin-right: 10px;} #detail_cart_box .option_list li:nth-child(2n) .radio input:checked { opacity: 1;} #detail_cart_box .option_list li:nth-child(2n) .checkbox label { border: 1px solid #d6d6d6; margin-bottom: 10px; padding: 7px 15px; font-size: 13px; border-radius: 5px; position: relative; width: 100%; display: block;} #detail_cart_box .option_list li:nth-child(2n) .checkbox input { margin-right: 10px;} @media (max-width: 767px) { #detail_cart_box .option_list li { padding-right: 0!important;} #detail_cart_box .option_list li:nth-child(2n - 1) label { display: block;} #detail_cart_box .option_list li:before { display: block; text-align: center; margin-right: 0; margin-bottom: 15px;} } /*0416*/ .cf:before, .cf:after { content: " "; display: table;} .cf:after { clear: both;} .cf { *zoom: 1;} .visible-xs { display: none;} .table_area { overflow: scroll; width: 100%;} #guide_wrap .deli-tab { margin: 20px 0 10px; height: auto;} #guide_wrap .deli-tab td { padding: 10px; width: 157px;} #guide_wrap h3 { padding: 15px;} #guide_wrap .title { margin-bottom: 25px;} #main_middle #help_about_box { margin-bottom: 32px;} #guide_wrap .pink h3 { color: #ea0000; margin-bottom: 16px; font-size: 2rem; text-align: center; background: none; font-weight: bold;} #main .topimage { padding-right: 16px; padding-left: 16px;} #guide_wrap .refrigerator h2 { display: inline-block;} .refrigerator.delivery_tv .table_area { overflow: auto;} .refrigerator.delivery_tv .table_area .deli-tab td { width: auto !important;} .refrigerator.delivery_tv .col-md-4 { padding-left: 0; padding-right: 0;} .refrigerator.delivery_tv .prl8 { padding-left: 8px; padding-right: 8px;} #guide_wrap h3.head { font-size: 1.6rem; letter-spacing: 0.1rem; margin: 0; padding: 0; padding-bottom: 5px; margin-top: 20px; font-weight: normal; background: none;} #guide_wrap section .col-md-12 .table_area table.deli-tab { margin-top: 0;} #guide_wrap section .row .table_area .deli-tab { margin-bottom: 0; margin-top: 0;} #guide_wrap .table_area.recycle .deli-tab { margin-top: 20px;} #guide_wrap .refrigerator h2+p { margin-bottom: 0;} #guide_wrap .refrigerator h2 { margin-bottom: 15px;} #guide_wrap h2+.rl8 { margin-top: 20px;} #guide_wrap .cache table.daibiki tr td { padding: 10px;} #guide_wrap .cache table.df>tbody>tr>td:first-child { padding: 10px;} #guide_wrap .cache table.df>tbody>tr table tr td { padding: 10px;} .login_cart .column .column_inner { position: initial; top: initial; -webkit-transform: initial; -ms-transform: initial; transform: initial;} #guide_wrap .guide a:hover .title { background: none !important;} #guide_wrap .delivery .deli-tab td { width: 100px;} #guide_wrap .guide .wrap { border: 5px solid #0077C8; position: relative; margin-bottom: 15px;} #guide_wrap .guide .title { font-weight: bold; color: #ce0000;} #guide_wrap .guide a:hover { background: none;} #guide_wrap .guide .col-sm-3 { background: none;} #footer { margin-top: 0px;} footer .container-fluid { max-width: 1530px;} footer .container-fluid .bg-fff { background: #fff; padding: 20px 40px; margin-bottom: 30px;} footer .container-fluid .border-dotted { border-bottom: 1px dotted #ddd;} footer .container-fluid .border-dotted:last-child { border: none;} footer .container-fluid .row img { float: left; padding-right: 20px; -webkit-backface-visibility: hidden !important;} footer#footer .container-fluid .row .col-sm-4 { position: relative; padding-bottom: 30px;} footer#footer .container-fluid .row p a { display: block; padding-top: 15px; padding-right: 15px; padding-left: 15px; color: #004B8D; text-align: right; text-decoration: #004B8D; text-decoration: underline; right: 0; bottom: 15px;} footer#footer .container-fluid .row p a::after { content: ">>";} .refrigerator-position .col-sm-4 img { width: 100%;} #guide_wrap .guide img { max-height: 165px;} #guide_wrap .mgb0_li li { margin-bottom: 0;} .row.row-eq-height .col-sm-4 { width:33.2%; } @media (max-width: 991px) { #guide_wrap .guide .wrap { margin-bottom: 15px;} #guide_wrap .guide .wrap .title { font-size: 18px;} footer#footer .container-fluid .row .col-sm-4 { padding-bottom: 60px;} #item_list .col-lg-2.col-sm-4 { padding-bottom: 3rem!important} } @media (max-width: 767px) { .row.row-eq-height .col-sm-4 { width: 100%;} #header .top_colum { padding: 12px 10px; height: 67px; } #cart_area p.cart-trigger { position: absolute; right: 55px; top: -2px;} #cart .inner { top: 10px;} p.cart-trigger .badge { right: 1px; top: 7px; font-size: 10px; } p.cart-trigger .cb-close { left: 17px; top: 3px; } #btn_menu { right: 5px; top: 12px; } html { overflow-x: hidden;} footer .container-fluid .row img { float: initial; padding-right: 0; max-width: 100%; display: block; margin: 0 auto; margin-bottom: 5px;} footer .container-fluid .border-dotted-sm { border-bottom: 1px dotted #ddd;} footer#footer .container-fluid .row p a { text-align: left;} .hidden-xs { display: none;} .page-heading { margin: 8px 0 16px;} #guide_wrap .construction h1 { font-size: 2.6rem; text-align: center; margin: 0; line-height: 3.2rem;} #guide_wrap .construction .s_title { text-align: center; padding-left: 0;} #guide_wrap .center { margin: 30px 25px;} div#guide_box__body { margin-bottom: 0px !important;} #guide_box__body_inner .construction p { padding-bottom: 16px;} #guide_wrap .deli-tab { font-size: 12px;} #guide_wrap .title { margin-bottom: 16px;} #main_middle #help_about_box { margin-bottom: 0px;} #guide_wrap .refrigerator h2 { font-size: 1.6rem;} #guide_wrap .pink { padding: 16px;} #main .topimage { padding-right: 8px; padding-left: 8px;} #guide_wrap .pink .row .col-sm-4 { text-align: center;} #guide_wrap .flow .pink>div>div span { margin-right: 0px; text-align: center; display: block; font-size: 1.4rem; margin-bottom: 10px;} #guide_wrap .flow .pink h2 { display: block;} .refrigerator.delivery_tv .table_area .deli-tab { margin: 0 !important;} #guide_wrap .refrigerator section h2 { margin-bottom: 10px;} #guide_wrap .refrigerator .flow .pink>div>div span { margin-right: 0;} .visible-xs { display: block;} #guide_wrap h3.head { font-size: 1.4rem;} #guide_wrap .refrigerator.air_con section h2 { margin-bottom: 0;} #guide_wrap .cache table.df, #guide_wrap .cache table.df > tbody, #guide_wrap .cache table.df > tbody > tr, #guide_wrap .cache table.df > tbody > tr > td, #guide_wrap .cache table.df > tbody > tr > th { display: grid; width: 100%; } #guide_wrap .cache table.df>tbody>tr>td:first-child { display: block; width: 100%; text-align: center; padding: 10px 5px !important;} #guide_wrap .cache table.df>tbody>tr>td:last-child { display: block; width: 100%; text-align: center; padding: 10px 5px !important;} #guide_wrap .cache table.df>tbody>tr>td:after { display: none;} #guide_wrap .guide .wrap .title { font-size: 14px;} } @media (max-width: 480px) { #main_middle .main_visual { height: auto;} footer#footer .container-fluid .row .col-sm-4 { padding-bottom: 45px;} } /* product list */ /* 商品一覧の各アイテムにライン */ @media screen and (min-width: 992px) { .product_page #item_list [id*="result_list_box"] { border-left: 1px solid #eee; border-bottom: 1px solid #eee;} .product_page #item_list [id*="result_list_box"]:first-child,.product_page #item_list [id*="result_list_box"]:nth-child(6n + 1) { border-left: none;} .product_page #item_list [id*="result_list_box"]:nth-child(1),.product_page #item_list [id*="result_list_box"]:nth-child(2),.product_page #item_list [id*="result_list_box"]:nth-child(3),.product_page #item_list [id*="result_list_box"]:nth-child(4),.product_page #item_list [id*="result_list_box"]:nth-child(5),.product_page #item_list [id*="result_list_box"]:nth-child(6) { border-top: 1px solid #eee;} .product_page #item_list [id*="result_list_box"]:last-child { border-right: 1px solid #eee;} .product_page #item_list [id*="result_list_box"]:nth-child(6n) { border-right: none!important;} /*.pickup_item .item_photo, #item_list .item_photo, #checkeditem .item_photo { position: relative;}*/ /*.pickup_item .item_photo img, #item_list .item_photo img, #checkeditem .item_photo img { margin: auto; width: auto; padding: 10%; position: absolute; left: 0; right: 0; top: 0; bottom: 0; max-height: 100%;}*/ } @media screen and (max-width: 991px) { .product_page #item_list [id*="result_list_box"] { padding-bottom: 10px;} /*.pickup_item .item_photo, #item_list .item_photo, #checkeditem .item_photo { height: 180px; position: relative;}*/ /*.pickup_item .item_photo img, #item_list .item_photo img, #checkeditem .item_photo img { margin: auto; width: auto; height: 100%; padding: 10%; position: absolute; left: 0; right: 0; top: 0; bottom: 0;}*/ } @media screen and (max-width: 767px) { /*.pickup_item .item_photo img, #item_list .item_photo img, #checkeditem .item_photo img { width: 100%; height: auto;}*/ } /* mega menu */ #header #category_block { padding-top: 0!important;} #header #category_block .mega-menu { border-top: none!important; padding-bottom: 2px!important;} #header #category_block .mega-menu > ul > li:first-child { display: none;} #header #category_block .mega-menu > ul > li a { padding: 1.2em 1.1em!important;} #header #category_block .mega-menu > ul > li > ul > li > ul { display: none!important;} #header #category_block .mega-menu { border-bottom: 1px solid #D93025!important;} /* realtime order */ #s8_nowOrder { margin-bottom: 0!important; max-width: 1530px; margin-left: auto!important; margin-right: auto!important; padding: 0 15px!important;} #s8_nowOrder .col-sm-12 { padding-top: 15px; background: #fff;} /* 10_19 */ .p-absolute { position: absolute;} .banner_block { right: 280px; top: 18px; z-index: 1; } .banner_block_badge { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 12px; background: linear-gradient(135deg, #f7f9ff 0%, #eef3fc 100%); border: 1px solid rgba(0, 119, 200, 0.18); border-left: 3px solid #0077C8; border-radius: 6px; box-shadow: 0 1px 4px rgba(0, 119, 200, 0.1); font-family: 'Noto Sans JP', sans-serif; } .banner_block_badge__icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: #0077C8; } .banner_block_badge__icon svg { display: block; width: 24px; height: 24px; } .banner_block_badge__text { margin: 0; font-size: 13px; font-weight: 600; color: #333; letter-spacing: 0.03em; line-height: 1.45; white-space: nowrap; } .banner_block_badge__emph { color: #0077C8; font-weight: 700; } .banner_block_badge__sub { display: block; font-size: 11px; font-weight: 500; color: #666; letter-spacing: 0.02em; } .banner_block_badge__sub::before { content: '✓ '; color: #28A745; font-weight: 700; } @media (max-width: 1400px) and (min-width: 768px) { #header .top_colum h1 { text-align: left; } #header .container-fluid { display: flex; flex-wrap: wrap; align-items: center; } #header .header_logo_area { float: none; width: 25%; text-align: center; } #header .banner_block { width: 100%; position: static; text-align: center; margin: 8px 0 4px; } #header .banner_block_badge { max-width: 100%; } #header #member { float: none; width: 75%; text-align: right; } #header .header_bottom_area { width: 100%; margin-top: 15px; } } @media (max-width: 767px) { .banner_block { position: static; width: 100%; text-align: center; margin: 10px 0 6px; } .banner_block_badge { white-space: normal; } .banner_block_badge__text { white-space: normal; font-size: 12px; } #header .top_colum { height: auto; } } @media (max-width: 575px) { #header .banner_block { padding: 0 10px; } #header .banner_block_badge { width: 100%; justify-content: center; padding: 10px 14px; box-sizing: border-box; } #header .banner_block_badge__text { text-align: left; line-height: 1.5; } } @media only screen and (max-width: 767px) { #drawer .mega-menu ul li a { border-bottom: 1px solid #ccc; font-weight: bold;} #drawer .mega-menu > ul > li a { padding: 1em; width: 100%; display: block;} #drawer .mega-menu > ul > li { width: 100%; float: none; display: block; text-align: left; background: #fff; position: relative;} #drawer .mega-menu h2 { font-size: 14px; font-size: 1.4rem; display: block; line-height: 1.5; padding: 0.2em 1em; margin: 0; padding: 1em;} #drawer .menu-dropdown-icon:before { content: "+"; display: inline-block; cursor: pointer; margin: 1px; padding: 0.7em 1.2em; color: #333; background: #fff; position: absolute; right: 0; z-index: 999;} } /* 11 */ .c-red { color: #D93025; font-weight: bold;} .shipped_out { padding: 7px 0;} .shipped_out span { color: #D93025;} .option_description .modal-body > div > p.plus { display: none;} @media only screen and (min-width: 768px){ #item_detail_area .item_detail .item_code { padding: 14px 0 7px;} } header .banner_block_badge { vertical-align: middle; } @media (max-width:874px) { /*.banner_block { right: 15px; top: 80px;}*/ } /* large category */ .main-category .row { margin: 0; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;} .main-category .row:before { display: none; } .main-category .row:after { display: none; } .main-category .col { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; padding-bottom: 0!important; min-height: 1px; width: 100%;} .main-category .category-block { position: relative; display: flex; -webkit-align-items: center; align-items: center; border-bottom: 1px solid #eee; border-right: 1px solid #eee; padding: 2% 4%; } .main-category .category-block:before { content: ""; position: absolute; left: 3px; top: 3px; width: calc(100% - 6px); height: calc(100% - 6px); border: 2px solid #0077C8; opacity: 0; pointer-events: none;} .main-category .category-block:hover:before { opacity: 1; } .main-category .category-block figure { width: 30%; } .main-category .category-block figure img { width: 100%; height: auto; } .main-category .category-title { width: 70%; padding-left: 15px; font-size: 18px;text-decoration: underline; } @media (max-width: 1199px) { .main-category .category-large-title { font-size: 2.4rem; margin-bottom: 10px; margin-top: 10px; } .main-category .category-title { font-size: 14px; } } @media (min-width: 768px) { .main-category .row > .col:nth-child(1),.main-category .row > .col:nth-child(2),.main-category .row > .col:nth-child(3),.main-category .row > .col:nth-child(4) { border-top: 1px solid #eee; } .main-category .row > .col:nth-child(1),.main-category .row > .col:nth-child(4n + 1) { border-left: 1px solid #eee; } } @media (max-width: 767px) { .main-category .category-large-title { font-size: 18px; } .main-category .col { -ms-flex: 0 0 33.3333%; flex: 0 0 33.3333%; max-width: 33.3333%; } } @media (min-width: 576px) { .main-category .row > .col:nth-child(1),.main-category .row > .col:nth-child(2),.main-category .row > .col:nth-child(3) { border-top: 1px solid #eee; } .main-category .row > .col:nth-child(1),.main-category .row > .col:nth-child(3n + 1) { border-left: 1px solid #eee; } } @media (max-width: 575px) { .main-category .col { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; } .main-category .row > .col:nth-child(1),.main-category .row > .col:nth-child(2) { border-top: 1px solid #eee; } .main-category .row > .col:nth-child(1),.main-category .row > .col:nth-child(2n + 1) { border-left: 1px solid #eee; } .main-category .category-title { font-size: 10px; } } .other_shops { padding: 0 0 20px; } .other_shops label { background: #f8f8f8; display: block; padding: 10px 15px; margin-bottom: 15px; } .other_shops ul { font-size: 0; letter-spacing: 0; margin: 0 -5px; } .other_shops li { display: inline-block; padding: 5px; } .other_shops li a { border: 1px solid #ddd; display: block; } .other_shops li a:hover { opacity: .7; } .other_shops .caution { color: #D93025; font-size: 12px; font-weight: bold; margin-top: 10px; } /* override 202010 */ #item_list .product_item { padding-top: 24px; } #item_list .item_photo, .pickup_item .item_photo { padding-top: 100%; position: relative; overflow: hidden; } #item_list .item_photo img, .pickup_item .item_photo img { position: absolute; left: 0; right: 0; top: 0; bottom: 0; width: auto; height: auto; margin: auto; } #item_photo_area .slick-slide { height: 500px!important; } #item_photo_area .slick-slide img { max-height: 100%; } #page_contact .column p { color: #D93025; } .news_contents { margin-top: 0; margin-bottom: 30px; } .anime-btn { position: relative; width: 125px; transition: .2s; display: inline-block;} .anime-btn:before, .anime-btn:after { content: ""; position: absolute; z-index: -10; width: 100%; height: 100%; top: 0; left: 0; border-radius: 5px; background: #ffaaae; border: 1px solid #ff999e; transform: translate3d(0,0,0); } /*.anime-btn:before { animation: btnanime 2s ease-out infinite; } .anime-btn:after { animation: btnanime 2s ease-out 1s infinite; }*/ .anime-btn a { display: block; border-radius: 5px; color: #000; text-align: center; text-decoration: none; background: #fff; border: 1px solid #c81c14; font-size: 12px; font-weight: bold; } .anime-btn a span { display: block; position: relative; padding: 5px 21px 5px 5px; } .anime-btn a span:before { content: ""; position: absolute; right: 0; top: 0; height: 100%; width: 18px; background: #c81c14; } .anime-btn a span:after { content: ""; position: absolute; top: 0; bottom: 0; right: 12px; width: 7px; height: 7px; margin: auto 0; border-right: 2px solid #fff; border-top: 2px solid #fff; transform: translateX(5px) rotate(45deg); } @keyframes btnanime{ 0%{transform:scale(.95); opacity:1} 90%{opacity:.1}to{transform:scale(1.2,1.5); opacity:0} } #detail_cart_box .checkbox { border: 1px solid #c4ccce; padding: 10px 15px; margin-bottom: 10px; color: #000; } #detail_cart_box .checkbox input { margin-right: 5px; } @media (max-width: 767px) { #item_photo_area .slick-slide { height: 300px!important; } } /* 一時的非表示 */ #item_detail_area .item_detail .shipped_out { display: none; } /* differentiation */ .dif { padding: 0 60px; color: #000000; } .dif p { margin: auto; } .dif .fv { margin-bottom: 80px; margin-left: -60px; margin-right: -60px; } .dif .small { font-size: 14px; } .dif .cmnlist > li:first-child { margin-bottom: 50px; padding-bottom: 50px; border-bottom: 1px solid #999999; } .dif .cmnlist > li > div { display: flex; flex-wrap: wrap; align-items: center; margin-left: -20px; margin-right: -20px; } .dif .cmnlist > li > div .contents { width: 50%; padding: 0 20px; } .dif .cmnlist > li > div .contents h2 { margin-bottom: 50px; margin-top: 0; } .dif .cmnlist > li > div .contents h3 { margin-bottom: 30px; } .dif .cmnlist > li > div .contents h4 { font-weight: bold; color: #af2819; font-size: 40px; margin: 0 0 20px; } .dif .cmnlist > li > div .contents .wrap { font-size: 36px; line-height: 2; font-weight: bold; letter-spacing: 0; letter-spacing: -.02em; } .dif .cmnlist > li > div .photo { width: 50%; padding: 0 20px; } .dif .cmnlist > li:nth-child(2) .contents { order: 2; } .dif .cmnlist > li:nth-child(2) .photo { order: 1; } .dif .tigai { padding: 0 20px; order: 3; margin: 100px 0 60px; width: 100%; } .dif .tigai > div { border: 1px solid #af2819; padding: 20px; text-align: center; } .dif .tigai img { margin: auto; } .dif .pointlist li { margin-bottom: 12px; position: relative; display: flex; align-items: center; flex-wrap: wrap; padding: 40px 0; } .dif .pointlist li:before { content: ""; background: #f7f7f7; position: absolute; left: 0; right: 0; top: 0; height: 100%; width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); } .dif .pointlist li > * { position: relative; } .dif .pointlist li .contents { width: 70%; } .dif .pointlist li .contents h3 { display: flex; font-size: 38px; font-weight: bold; line-height: 1.4; align-items: center; } .dif .pointlist li .contents h3 img { width: 95px; } .dif .pointlist li .contents h3 span { width: calc(100% - 95px); padding-left: 25px; } .dif .pointlist li .contents .wrap { font-size: 23px; line-height: 2; } .dif .pointlist li .photo { width: 30%; } .dif .pointlist li:nth-child(even) .contents { order: 2; } .dif .pointlist li:nth-child(even) .photo { order: 1; } .dif .cmnlist.v3 .last .contents .wrap { font-size: 36px; font-weight: bold; } .dif .blank_banner { margin-top: 30px; } .dif .blank_banner a { display: flex; padding: 10px 20px; align-items: center; width: 100%; border: 1px solid #cccccc; color: #808080; font-size: 24px; font-weight: bold; } .dif .blank_banner a .banner { width: 180px; } .dif .blank_banner a div { width: calc(100% - 95px); padding-left: 50px; display: flex; align-items: center; } .dif .blank_banner a div span { padding-left: 10px; } .dif .contacts { text-align: center; position: relative; padding: 30px 0; } .dif .contacts:before { content: ""; background: #f7f7f7; position: absolute; left: 0; right: 0; top: 0; height: 100%; width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); } .dif .contacts * { position: relative; } .dif .contacts .p1 { font-weight: bold; font-size: 20px; letter-spacing: .5em; } .dif .contacts .p2 { font-weight: bold; font-size: 20px; letter-spacing: .15em; } .dif .contacts .tel { margin: 15px 0 10px; } .dif .contacts .links { margin-top: 20px; } .dif .contacts .links a { width: 800px; max-width: 100%; line-height: 1; color: #fff!important; background: #f18d00; padding: 20px; border-radius: 50px; font-size: 20px; letter-spacing: .15em; display: block; margin: 0 auto; } .dif .contacts .f_logo { margin-top: 40px; } .dif .last_link { text-align: center; padding: 50px 0 30px; } .dif .last_link a { background: #0077C8; font-size: 1.8rem; padding: 15px 16px; font-weight: bold; display: inline-block; color: #fff!important; width: 800px; max-width: 100%; } .dif .dif_top ul { display: flex; flex-wrap: wrap; margin: -20px; } .dif .dif_top ul li { width: 100%; padding: 20px; } .dif .dif_top ul li a { display: flex; border: 3px solid #ae2819; flex-wrap: wrap; align-items: center; transition: .3s; background: #fff; } .dif .dif_top ul li a .icon { width: 65%; padding: 30px; text-align: center; } .dif .dif_top ul li a .photo { width: 35%; padding: 30px; } .dif .dif_top ul li a .photo div { background-position: center; background-size: cover; padding-top: 67.5%; } .dif .dif_top ul li a:hover { background: #F8F8F8; } @media (max-width: 991px) { .dif { padding: 0 0; overflow: hidden; } .dif .fv { margin: 0 -8px 30px; } .dif .small { font-size: 12px; } .dif .cmnlist > li > div .contents { width: 100%; order: 1!important; margin-bottom: 30px; } .dif .cmnlist > li > div .contents h2 { margin-bottom: 30px; } .dif .cmnlist > li > div .contents h3 { padding: 0 20%; margin-bottom: 25px; } .dif .cmnlist > li > div .contents h4 { font-size: 24px; } .dif .cmnlist > li > div .contents .wrap { font-size: 16px; } .dif .cmnlist > li > div .photo { width: 100%; order: 2!important; } .dif .cmnlist > li:first-child { margin-bottom: 30px; padding-bottom: 30px; } .dif .cmnlist.v3 .last .contents .wrap { font-size: 16px; } .dif .blank_banner a { padding: 20px 15px 15px; font-size: 16px; text-align: center; flex-wrap: wrap; display: block; } .dif .blank_banner a div { width: 100%; padding: 0; display: block; } .dif .blank_banner a div img { display: block; margin: 10px auto; transform: rotate(90deg); } .dif .blank_banner a div span { padding-left: 0; } .dif .blank_banner a .banner { margin: 0 auto; } .dif .tigai { margin: 40px 0 20px; } .dif .dif_top ul { margin: -10px; } .dif .dif_top ul li { padding: 10px; } .dif .dif_top ul li a { padding: 0 10px; } .dif .dif_top ul li a .icon { padding: 0; } .dif .dif_top ul li a .icon img { max-width: none; width: 120%; position: relative; } .dif .dif_top ul li a .photo { padding: 15px 10px; } .dif .pointlist li { padding: 30px 15px; } .dif .pointlist li .contents { width: 100%; order: 2!important; } .dif .pointlist li .contents h3 { font-size: 21px; margin: 0 0 20px; } .dif .pointlist li .contents h3 img { width: 70px; } .dif .pointlist li .contents h3 span { width: calc(100% - 70px); } .dif .pointlist li .contents .wrap { font-size: 16px; } .dif .pointlist li .photo { width: 100%; order: 1!important; margin-bottom: 30px; text-align: center; } .dif .pointlist li .photo img { width: 50%; } } .option_description .campaign-banner { display: block; width: 100%; text-align: center; } .option_description .campaign-banner img { display: inline-block; width: 500px; max-width: 100%; margin: 20px auto; float: none; } /* 法人配送 */ #guide_wrap .corp_guide .main-image { margin-bottom: 50px; } #guide_wrap .corp_guide .contents-wrapper { max-width: 1000px; margin: 0 auto; } #guide_wrap .corp_guide h2 strong { color: #f5303f; margin: 0 5px; } #guide_wrap .corp_guide h3 { background: none!important; display: flex; align-items: center; font-weight: bold; } #guide_wrap .corp_guide h3 img { height: 30px; margin-right: 15px; } #guide_wrap .corp_guide ul.flex { display: flex; flex-wrap: wrap; } #guide_wrap .corp_guide ul.flex > li { width: 180px; } @media (min-width: 768px) { #guide_wrap .corp_guide h2 { font-size: 22px; } #guide_wrap .corp_guide p { font-size: 16px; line-height: 1.8; } .pc-none { display: none!important; } } @media (max-width: 767px) { #guide_wrap .corp_guide h2 { text-align: center; } #guide_wrap .corp_guide h2 br { display: block!important; } #guide_wrap .corp_guide h3 img { height: 20px; } .sp-none { display: none!important; } } /* 2023.08〜 */ .air_container p { margin: 0; } .air_container .text_red { color: #ec0000; } .air_container .main_photo { margin-bottom: 50px;} .air_container .air_title { background-color: #0077C8; color: #fff; line-height: 22px; font-size: 22px; padding: 10px; margin-bottom: 10px; } .air_container .checkpoint { margin-bottom: 50px; } .air_container .checkpoint .air_title { text-align: center; } .air_container .checkpoint .photo_wrap { border: 1px solid #0077C8; } .air_container .checkpoint .text .sub { margin-top: 0; margin-bottom: 0; font-size: 18px; color: #0077C8; margin-top: 10px; } .air_container .checkpoint .text.text_one p { margin-top: 0; } .air_container .checkpoint .text p { margin-top: 10px; } .air_container .checkpoint .text .text_red.small { font-size: 12px; } .air_container .reputation { margin-bottom: 50px; } .air_container .reputation .repu_wrap .wrap { border: solid 1px #dfdfdf; padding: 10px; margin-bottom: 10px; } .air_container .reputation .wrap .aircon_container { display: flex; margin-bottom: 10px; } .air_container .reputation .wrap .aircon_container .icon { width: 50px; height: 50px; } .air_container .reputation .wrap .icon_wrap { margin-left: 10px; width: 80%; } .air_container .reputation .wrap .icon_wrap h6 { margin: 0; font-size: 16px; color: #0077C8; line-height: 25px; } .air_container .reputation .wrap .icon_wrap ul { display: flex; } .air_container .reputation .wrap .icon_wrap ul li { margin: 0 10px 0 0!important; list-style: none; } .air_container .price { margin-bottom: 50px; } .air_container .air_work { margin-bottom: 40px; } .air_container .air_work h4 { margin-top: 0; background-color: #e3f2fd; padding: 5px; font-weight: normal; margin-bottom: 20px; display: inline-block; } .air_container .air_work .num_wrap { display: flex; margin-bottom: 10px; color: #0077C8; font-size: 16px; line-height: 20px; } .air_container .air_work .num_wrap .num { color: #fff; background-color: #0077C8; border: 1px solid #0077C8; border-radius: 5px; margin: 0; padding: 0 7px; margin-right: 5px; font-size: 12px; } .air_container .air_work .work_text { margin-top: 10px; } .air_container .question { margin-bottom: 50px; } .air_container .question .que_wrap { border-bottom: 1px solid #d9d9d9; padding-bottom: 10px; padding-top: 15px; } .air_container .question .que_wrap .q_title { display: flex; align-items: baseline; margin-bottom: 10px;} .air_container .question .que_wrap .q_title .que_icon { font-weight: bold; color: #fff; background-color: #99cb13; border: 1px solid #99cb13; border-radius: 5px; padding: 0 4px; font-size: 12px; } .air_container .question .que_wrap .q_title .text { color: #0077C8; text-decoration:underline; text-decoration-color: #0077C8; margin-left: 5px; font-size: 17px; } .air_container .question .que_wrap .q_text { border: 1px solid #cacaca; background-color: #eeeeee; padding: 10px; } .air_container_bunner { display: flex; justify-content: space-between; } /* .air_container_bunner a { width: 49%; } */ .other-banner_large { margin-bottom: 20px; } .guarantee { margin-bottom: 20px; } .cart_area { padding-top: 0; } .cart_area .classcategory_list li select { background: #F5FAFF; } .cart_area .classcategory_list li .control-label { margin-top: 40px; display: block; border-bottom: 1px solid #000; font-weight: bold; padding-bottom: 3px; margin-bottom: 10px; } /* 規格見出し行：ラベルと「詳しくはこちら」を横並び（商品詳細と同様） */ .cart_area .classcategory_list > li.option_li_1 .control-label, .cart_area .classcategory_list > li.option_li_2 .control-label { display: inline-block; vertical-align: middle; width: auto; max-width: calc(100% - 135px); margin-bottom: 10px; } .cart_area .classcategory_list > li.option_li_1 .anime-btn, .cart_area .classcategory_list > li.option_li_2 .anime-btn { vertical-align: middle; } /* 規格が1件のみのときの checkbox（hidden と併用） */ .cart_area .classcategory_list .classcategory-checkbox, #classcategory_id2_widget .classcategory-checkbox { margin-top: 0; margin-bottom: 0; } .cart_area .classcategory_list .classcategory-checkbox label, #classcategory_id2_widget .classcategory-checkbox label { font-weight: normal; margin-bottom: 6px; display: block; } .cart_area .classcategory_list .classcategory-checkbox input[type=checkbox], #classcategory_id2_widget .classcategory-checkbox input[type=checkbox] { margin-right: 8px; vertical-align: middle; } .cart_area .classcategory_option_control .checkbox { margin-bottom: 0; } #other-banner.large_items { padding: 0; background: transparent; } #detail_cart_box .checkbox { background: #F5FAFF; } @media (max-width: 991px) { .air_container .merit { margin-bottom: 20px; } .air_container .checkpoint .check_wrap .check_box { margin-bottom: 30px; } .air_container .price .price_text { margin-top: 10px; } .air_container .air_work .work_text { margin-bottom: 20px; } .air_container .air_work .work_text.last { margin-bottom: 0; } } @media (max-width: 767px) { .mgb20 { margin-bottom: 20px; } .mark { margin: 10px 0 ;} .air_container .air_title { font-size: 18px; } .air_container .checkpoint, .air_container .price, .air_container .reputation, .air_container .question { margin-bottom: 30px; } .air_container .checkpoint .check_wrap { margin-top: 20px; } .air_container .checkpoint .check_wrap .check_box:last-child { margin-bottom: 0; } .air_container .checkpoint .check_wrap.check_box .text { margin-bottom: 10px; } .air_container .reputation .wrap .icon_wrap h6 { font-size: 15px; } .air_container .air_work { margin-bottom: 20px; } .air_container .question .que_wrap .q_title .text { font-size: 15px; } .air_container.air_container_sp { flex-direction: column-reverse; display: flex; } .large_items_detail { flex-direction: column-reverse; display: flex; } #item_photo_area { margin-bottom: 20px; } } /* 新着情報一覧ページ (/news) */ #page_news .news-page { margin-bottom: 40px; } #page_news .news-page__inner { max-width: 900px; margin: 0 auto; padding: 0 15px 30px; } #page_news .news-page__list { list-style: none; margin: 0; padding: 0; } #page_news .news-page__item { margin-bottom: 20px; } #page_news .news-page__item:last-child { margin-bottom: 0; } #page_news .news-page__card { background-color: #fff; border: 1px solid #e8e8e8; border-left: 4px solid #0077C8; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); padding: 24px 28px; } #page_news .news-page__header { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid #f0f0f0; } #page_news .news-page__date { display: inline-block; background-color: #0077C8; color: #fff; font-size: 13px; font-weight: bold; line-height: 1; padding: 6px 12px; border-radius: 3px; margin-bottom: 12px; } #page_news .news-page__title { margin: 0; font-size: 18px; font-weight: bold; color: #333; line-height: 1.5; } #page_news .news-page__body { color: #333333; font-size: 15px; line-height: 1.85; word-break: break-word; } #page_news .news-page__body p { margin: 0 0 1em; } #page_news .news-page__body p:last-child { margin-bottom: 0; } #page_news .news-page__footer { margin: 20px 0 0; padding-top: 16px; border-top: 1px dashed #e0e0e0; } #page_news .news-page__link { display: inline-block; color: #0077C8; font-weight: bold; text-decoration: none; font-size: 14px; } #page_news .news-page__link:hover { text-decoration: underline; color: #004B8D; } #page_news .news-page__link-icon { margin-left: 4px; font-size: 12px; } #page_news .news-page__empty { background-color: #fff; border: 1px solid #e8e8e8; border-radius: 4px; padding: 48px 24px; text-align: center; color: #333333; } #page_news .news-page__empty p { margin: 0; font-size: 15px; } @media (max-width: 767px) { #page_news .news-page__card { padding: 18px 16px; } #page_news .news-page__title { font-size: 16px; } #page_news .news-page__body { font-size: 14px; } } /* LINEお問い合わせボタン */ .line-contact-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 10px 18px; background-color: #06C755; color: #fff !important; font-weight: bold; font-size: 14px; line-height: 1.4; text-decoration: none !important; border-radius: 6px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); transition: opacity 0.2s ease, transform 0.2s ease; } .line-contact-btn:hover { opacity: 0.9; color: #fff !important; text-decoration: none !important; transform: translateY(-1px); } .line-contact-btn__icon { flex: 0 0 auto; width: 22px; height: 22px; fill: currentColor; } #footer .line-contact-item { display: block; margin-top: 10px; } .line-contact-wrap { margin-bottom: 20px; } /* 商品詳細：LINE問い合わせ */ #page_product_detail .line-contact-product { margin: 16px 0 12px; padding: 14px 16px; background: #f7fbf8; border: 1px solid #d9f0df; border-radius: 6px; } #page_product_detail .line-contact-product__text { margin: 0 0 10px; font-size: 13px; line-height: 1.7; color: #333; } #page_product_detail .line-contact-product .line-contact-btn { margin-top: 0; width: 100%; max-width: 100%; justify-content: center; } /* エアコン設置・工事料金一覧表（setup_fees.twig） */ #guide_wrap.setup-fees-page { font-size: 14px; padding-bottom: 60px; } #guide_wrap.setup-fees-page ul { list-style: none; margin: 0; padding: 0; } #guide_wrap.setup-fees-page li { margin: 0 0 8px; line-height: 1.7; letter-spacing: 0.03em; } #guide_wrap.setup-fees-page .sf-lead { max-width: 960px; margin: 0 auto 28px; padding: 0 16px; line-height: 1.8; color: #333; } #guide_wrap.setup-fees-page .sf-nav { max-width: 960px; margin: 0 auto 40px; padding: 16px 20px; background: #f5f7fb; border: 1px solid #e2e8f0; border-radius: 8px; } #guide_wrap.setup-fees-page .sf-nav__list { display: flex; flex-wrap: wrap; gap: 10px; } #guide_wrap.setup-fees-page .sf-nav__link { display: inline-block; padding: 10px 16px; background: #fff; border: 1px solid #0077C8; border-radius: 6px; color: #0077C8; font-weight: bold; text-decoration: none; transition: background 0.2s, color 0.2s; } #guide_wrap.setup-fees-page .sf-nav__link:hover { background: #0077C8; color: #fff; } #guide_wrap.setup-fees-page .sf-contents { max-width: 960px; margin: 0 auto; padding: 0 16px; } #guide_wrap.setup-fees-page .sf-section { scroll-margin-top: 80px; margin-bottom: 48px; padding-bottom: 48px; border-bottom: 1px solid #e8e8e8; } #guide_wrap.setup-fees-page .sf-section:last-child { border-bottom: none; } #guide_wrap.setup-fees-page .sf-section__title { background: linear-gradient(135deg, #0077C8 0%, #004B8D 100%); color: #fff; font-size: 20px; line-height: 1.4; padding: 14px 20px; margin: 0 0 24px; border-radius: 6px; } #guide_wrap.setup-fees-page .sf-subtitle { font-size: 17px; font-weight: bold; color: #004B8D; margin: 0 0 20px; padding-left: 12px; border-left: 4px solid #0077C8; } #guide_wrap.setup-fees-page .sf-label { font-size: 15px; font-weight: bold; color: #0077C8; text-align: center; margin: 24px 0 12px; } #guide_wrap.setup-fees-page .sf-card { background: #fff; border: 1px solid #e8e8e8; border-radius: 8px; padding: 24px; margin-bottom: 20px; line-height: 1.8; } #guide_wrap.setup-fees-page .sf-emphasis { font-size: 18px; font-weight: bold; text-align: center; color: #004B8D; margin: 0 0 20px; line-height: 1.6; } #guide_wrap.setup-fees-page .sf-figure { margin: 16px 0; } #guide_wrap.setup-fees-page .sf-figure img { display: block; width: 100%; height: auto; border-radius: 6px; } #guide_wrap.setup-fees-page .sf-figure--center { max-width: 400px; margin-left: auto; margin-right: auto; } #guide_wrap.setup-fees-page .sf-text-danger { color: #D93025; } #guide_wrap.setup-fees-page .sf-text-accent { color: #0077C8; } #guide_wrap.setup-fees-page .sf-text-right { text-align: right; font-size: 13px; } #guide_wrap.setup-fees-page .sf-notice { border-radius: 6px; padding: 16px 20px; margin-top: 16px; } #guide_wrap.setup-fees-page .sf-notice__title { font-weight: bold; margin: 0 0 10px; font-size: 15px; } #guide_wrap.setup-fees-page .sf-notice--warn { background: #fff9f0; border-left: 4px solid #f0a020; } #guide_wrap.setup-fees-page .sf-notice--warn .sf-notice__title { color: #c07000; } #guide_wrap.setup-fees-page .sf-notice--info { background: #eef5fb; border-left: 4px solid #0077C8; } #guide_wrap.setup-fees-page .sf-notice--info .sf-notice__title { color: #004B8D; } #guide_wrap.setup-fees-page .sf-notice p { margin: 0 0 8px; } #guide_wrap.setup-fees-page .sf-notice p:last-child { margin-bottom: 0; } #guide_wrap.setup-fees-page .sf-flow-steps { list-style: none; margin: 0; padding: 0; } #guide_wrap.setup-fees-page .sf-flow-step { display: flex; gap: 16px; margin-bottom: 0; padding-bottom: 24px; position: relative; } #guide_wrap.setup-fees-page .sf-flow-step:not(:last-child)::before { content: ''; position: absolute; left: 19px; top: 44px; bottom: 0; width: 2px; background: #c5ddf0; } #guide_wrap.setup-fees-page .sf-flow-step__num { flex-shrink: 0; width: 40px; height: 40px; background: #0077C8; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 13px; z-index: 1; } #guide_wrap.setup-fees-page .sf-flow-step__body { flex: 1; background: #f9fbfd; border: 1px solid #e2eaf2; border-radius: 8px; padding: 16px 20px; } #guide_wrap.setup-fees-page .sf-flow-step__title { font-size: 15px; font-weight: bold; margin: 0 0 10px; color: #333; } #guide_wrap.setup-fees-page .sf-flow-step__body p { margin: 8px 0 0; font-size: 13px; color: #555; } #guide_wrap.setup-fees-page .sf-flow-step__img { max-width: 120px; height: auto; display: block; margin-top: 8px; } #guide_wrap.setup-fees-page .sf-pay-box { background: #fff; border: 1px dashed #c5ddf0; border-radius: 6px; padding: 12px 16px; margin-top: 10px; } #guide_wrap.setup-fees-page .sf-pay-box__label { font-size: 12px; color: #666; margin: 0 0 4px; } #guide_wrap.setup-fees-page .sf-pay-box__text { margin: 0; font-size: 14px; } #guide_wrap.setup-fees-page .sf-pay-box__text--free { color: #0077C8; font-weight: bold; } #guide_wrap.setup-fees-page .sf-accordion { border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 12px; overflow: hidden; background: #fff; } #guide_wrap.setup-fees-page .sf-accordion__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; font-weight: bold; font-size: 15px; color: #004B8D; background: #f5faff; cursor: pointer; list-style: none; transition: background 0.2s; } #guide_wrap.setup-fees-page .sf-accordion__head::-webkit-details-marker { display: none; } #guide_wrap.setup-fees-page .sf-accordion__head::after { content: '+'; font-size: 20px; font-weight: normal; color: #0077C8; flex-shrink: 0; margin-left: 12px; } #guide_wrap.setup-fees-page .sf-accordion[open] .sf-accordion__head { background: #0077C8; color: #fff; } #guide_wrap.setup-fees-page .sf-accordion[open] .sf-accordion__head::after { content: '−'; color: #fff; } #guide_wrap.setup-fees-page .sf-accordion__body { padding: 20px 24px; border-top: 1px solid #e2e8f0; line-height: 1.8; } #guide_wrap.setup-fees-page .sf-feature-list { margin: 20px 0; } #guide_wrap.setup-fees-page .sf-feature { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; padding: 16px; background: #f9fbfd; border-radius: 8px; border: 1px solid #e8eef5; } #guide_wrap.setup-fees-page .sf-feature__icon { flex-shrink: 0; width: 48px; height: 48px; background: #0077C8; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 10px; } #guide_wrap.setup-fees-page .sf-feature__icon--lg { width: 56px; height: 56px; } #guide_wrap.setup-fees-page .sf-feature__icon img { width: 100%; height: auto; filter: brightness(0) invert(1); } #guide_wrap.setup-fees-page .sf-feature__title { font-size: 15px; font-weight: bold; margin: 0 0 6px; color: #333; } #guide_wrap.setup-fees-page .sf-feature__body p { margin: 0; font-size: 13px; color: #555; } #guide_wrap.setup-fees-page .sf-feature__num { display: inline-block; background: #0077C8; color: #fff; width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 50%; font-size: 12px; margin-right: 6px; } #guide_wrap.setup-fees-page .sf-check-box { border: 2px dashed #c5ddf0; border-radius: 8px; padding: 20px 24px; margin: 20px 0; background: #fafcff; } #guide_wrap.setup-fees-page .sf-check-box__title { font-weight: bold; color: #004B8D; margin: 0 0 12px; text-align: center; } #guide_wrap.setup-fees-page .sf-check-list li { position: relative; padding-left: 24px; margin-bottom: 8px; } #guide_wrap.setup-fees-page .sf-check-list li::before { content: '✓'; position: absolute; left: 0; color: #0077C8; font-weight: bold; } #guide_wrap.setup-fees-page .sf-check-list li span { font-size: 12px; color: #888; } #guide_wrap.setup-fees-page .sf-table-wrap { overflow-x: auto; margin: 20px 0; -webkit-overflow-scrolling: touch; } #guide_wrap.setup-fees-page .sf-table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 14px; } #guide_wrap.setup-fees-page .sf-table th, #guide_wrap.setup-fees-page .sf-table td { border: 1px solid #e0e6ed; padding: 12px 14px; vertical-align: top; text-align: left; } #guide_wrap.setup-fees-page .sf-table th { background: #e8f2fa; color: #004B8D; font-weight: bold; white-space: nowrap; } #guide_wrap.setup-fees-page .sf-table__item { font-weight: bold; background: #f9fbfd; color: #333; } #guide_wrap.setup-fees-page .sf-table__price { color: #D93025; font-weight: bold; font-size: 16px; white-space: nowrap; } #guide_wrap.setup-fees-page .sf-table__price span { font-size: 12px; font-weight: normal; } #guide_wrap.setup-fees-page .sf-table__estimate { color: #004B8D; font-weight: bold; } #guide_wrap.setup-fees-page .sf-table__note { display: block; font-size: 12px; color: #888; font-weight: normal; } #guide_wrap.setup-fees-page .sf-tax { font-size: 11px; font-weight: normal; } #guide_wrap.setup-fees-page .sf-hr { border: none; border-top: 1px dashed #ccc; margin: 12px 0; } #guide_wrap.setup-fees-page .sf-pc-only { display: inline; } #guide_wrap.setup-fees-page .sf-sp-only { display: none; } @media only screen and (max-width: 767px) { #guide_wrap.setup-fees-page .sf-nav__list { flex-direction: column; } #guide_wrap.setup-fees-page .sf-nav__link { display: block; text-align: center; } #guide_wrap.setup-fees-page .sf-flow-step { flex-direction: column; gap: 10px; } #guide_wrap.setup-fees-page .sf-flow-step:not(:last-child)::before { display: none; } #guide_wrap.setup-fees-page .sf-feature { flex-direction: column; align-items: center; text-align: center; } #guide_wrap.setup-fees-page .sf-section__title { font-size: 17px; padding: 12px 16px; } #guide_wrap.setup-fees-page .sf-emphasis { font-size: 16px; } #guide_wrap.setup-fees-page .sf-pc-only { display: none; } #guide_wrap.setup-fees-page .sf-sp-only { display: inline; } #guide_wrap.setup-fees-page .sf-accordion__body { padding: 16px; } } /* 工事料金シミュレーション（setup_fees_simulator.twig） */ #guide_wrap.setup-simulator-page .ss-progress { max-width: 960px; margin: 0 auto 32px; padding: 0 16px; } #guide_wrap.setup-simulator-page .ss-progress__track { height: 8px; background: #e2e8f0; border-radius: 4px; overflow: hidden; } #guide_wrap.setup-simulator-page .ss-progress__bar { height: 100%; width: 0; background: linear-gradient(90deg, #0077C8 0%, #004B8D 100%); border-radius: 4px; transition: width 0.35s ease; } #guide_wrap.setup-simulator-page .ss-progress__text { margin: 8px 0 0; font-size: 13px; color: #666; text-align: right; } #guide_wrap.setup-simulator-page .ss-intro { margin-bottom: 32px; } #guide_wrap.setup-simulator-page .ss-intro__list { margin: 0; padding-left: 1.2em; } #guide_wrap.setup-simulator-page .ss-intro__list li { margin-bottom: 8px; list-style: disc; } #guide_wrap.setup-simulator-page .ss-item { background: #fff; border: 2px solid #e2e8f0; border-radius: 10px; padding: 24px; margin-bottom: 20px; transition: border-color 0.25s, box-shadow 0.25s, opacity 0.25s; } #guide_wrap.setup-simulator-page .ss-item.is-active { border-color: #0077C8; box-shadow: 0 4px 16px rgba(0, 119, 200, 0.1); } #guide_wrap.setup-simulator-page .ss-item.is-done { border-color: #c5ddf0; } #guide_wrap.setup-simulator-page .ss-item.is-done .ss-item__badge { background: #28A745; } #guide_wrap.setup-simulator-page .ss-item.is-disabled { opacity: 0.45; pointer-events: none; border-color: #e8e8e8; box-shadow: none; } #guide_wrap.setup-simulator-page .ss-item__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; } #guide_wrap.setup-simulator-page .ss-item__badge { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; background: #0077C8; color: #fff; font-weight: bold; font-size: 15px; border-radius: 50%; } #guide_wrap.setup-simulator-page .ss-item__title { flex: 1; margin: 0; padding-top: 8px; font-size: 17px; font-weight: bold; color: #004B8D; line-height: 1.5; } #guide_wrap.setup-simulator-page .ss-item__note { margin: -8px 0 16px 58px; font-size: 13px; color: #666; line-height: 1.7; } #guide_wrap.setup-simulator-page .ss-item__figure { margin: 0 0 20px; text-align: center; } #guide_wrap.setup-simulator-page .ss-item__figure img { max-width: 100%; height: auto; border-radius: 6px; } #guide_wrap.setup-simulator-page .ss-item__figure--sm { max-width: 500px; margin-left: auto; margin-right: auto; } #guide_wrap.setup-simulator-page .ss-sub { display: none; margin-top: 24px; padding: 20px; background: #f5faff; border: 1px dashed #c5ddf0; border-radius: 8px; } #guide_wrap.setup-simulator-page .ss-sub.is-visible { display: block; } #guide_wrap.setup-simulator-page .ss-sub__title { margin: 0 0 16px; font-size: 15px; font-weight: bold; color: #333; padding-left: 10px; border-left: 3px solid #0077C8; } #guide_wrap.setup-simulator-page .ss-attention { margin: 0 0 12px; padding: 10px 14px; background: #fff9f0; border-left: 3px solid #f0a020; font-size: 13px; color: #c07000; border-radius: 0 4px 4px 0; } #guide_wrap.setup-simulator-page .ss-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } #guide_wrap.setup-simulator-page .ss-options--stack { grid-template-columns: 1fr; } #guide_wrap.setup-simulator-page .ss-option { display: block; cursor: pointer; margin: 0; } #guide_wrap.setup-simulator-page .ss-option input { position: absolute; opacity: 0; pointer-events: none; } #guide_wrap.setup-simulator-page .ss-option__inner { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; background: #fff; border: 2px solid #d7e3ef; border-radius: 8px; text-align: center; transition: border-color 0.2s, background 0.2s, color 0.2s; min-height: 52px; justify-content: center; } #guide_wrap.setup-simulator-page .ss-option__text { font-size: 14px; font-weight: bold; color: #333; line-height: 1.4; } #guide_wrap.setup-simulator-page .ss-option__price { font-size: 12px; line-height: 1.4; } #guide_wrap.setup-simulator-page .ss-option__price-amount { color: #D93025; font-weight: bold; } #guide_wrap.setup-simulator-page .ss-option__price-estimate { color: #888; } #guide_wrap.setup-simulator-page .ss-option__price-note { display: block; color: #888; font-size: 11px; font-weight: normal; } #guide_wrap.setup-simulator-page .ss-option input:checked + .ss-option__inner { border-color: #0077C8; background: #eef5fb; } #guide_wrap.setup-simulator-page .ss-option input:checked + .ss-option__inner .ss-option__text { color: #004B8D; } #guide_wrap.setup-simulator-page .ss-option:hover .ss-option__inner { border-color: #0077C8; } #guide_wrap.setup-simulator-page .ss-total { display: none; margin: 32px 0; } #guide_wrap.setup-simulator-page .ss-total.is-visible { display: block; } #guide_wrap.setup-simulator-page .ss-total__card { background: linear-gradient(135deg, #0077C8 0%, #004B8D 100%); color: #fff; border-radius: 12px; padding: 28px 32px; text-align: center; } #guide_wrap.setup-simulator-page .ss-total__label { margin: 0 0 8px; font-size: 16px; font-weight: bold; } #guide_wrap.setup-simulator-page .ss-total__label-sub { font-size: 13px; font-weight: normal; opacity: 0.85; } #guide_wrap.setup-simulator-page .ss-total__amount { margin: 0 0 20px; line-height: 1.2; } #guide_wrap.setup-simulator-page .ss-total__number { font-size: 42px; font-weight: bold; letter-spacing: 0.02em; } #guide_wrap.setup-simulator-page .ss-total__yen { font-size: 22px; font-weight: bold; } #guide_wrap.setup-simulator-page .ss-total__wave { font-size: 22px; font-weight: bold; } #guide_wrap.setup-simulator-page .ss-total__tax { display: block; margin-top: 6px; font-size: 13px; opacity: 0.85; } #guide_wrap.setup-simulator-page .ss-total__breakdown { list-style: none; margin: 0; padding: 16px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.25); text-align: left; } #guide_wrap.setup-simulator-page .ss-total__item { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 13px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); } #guide_wrap.setup-simulator-page .ss-total__item:last-child { border-bottom: none; } #guide_wrap.setup-simulator-page .ss-total__item--estimate { opacity: 0.75; } #guide_wrap.setup-simulator-page .ss-total__item-label { flex: 1; } #guide_wrap.setup-simulator-page .ss-total__item-price { flex-shrink: 0; font-weight: bold; } #guide_wrap.setup-simulator-page .ss-outro { margin-top: 32px; } #guide_wrap.setup-simulator-page .ss-actions { text-align: center; margin: 32px 0 48px; } #guide_wrap.setup-simulator-page .ss-actions__btn { display: inline-block; padding: 14px 40px; background: #fff; border: 2px solid #0077C8; border-radius: 8px; color: #0077C8; font-size: 15px; font-weight: bold; text-decoration: none; transition: background 0.2s, color 0.2s; } #guide_wrap.setup-simulator-page .ss-actions__btn:hover { background: #0077C8; color: #fff; text-decoration: none; } @media only screen and (max-width: 767px) { #guide_wrap.setup-simulator-page .ss-item { padding: 18px 16px; } #guide_wrap.setup-simulator-page .ss-item__head { flex-direction: column; gap: 8px; } #guide_wrap.setup-simulator-page .ss-item__title { padding-top: 0; font-size: 15px; } #guide_wrap.setup-simulator-page .ss-item__note { margin-left: 0; } #guide_wrap.setup-simulator-page .ss-options { grid-template-columns: 1fr; } #guide_wrap.setup-simulator-page .ss-total__card { padding: 24px 20px; } #guide_wrap.setup-simulator-page .ss-total__number { font-size: 34px; } #guide_wrap.setup-simulator-page .ss-actions__btn { display: block; padding: 14px 20px; } } /* フッター下部：エアコンテーマ（クールブルー） */ #footer .footer-aircon { position: relative; overflow: hidden; margin-top: 30px; padding: 30px 24px 26px; background: linear-gradient(135deg, #063a6e 0%, #0a5ca8 55%, #3fa9e0 100%); border-radius: 10px; } #footer .footer-aircon::before { content: "\2744"; position: absolute; top: -40px; right: -16px; font-size: 180px; line-height: 1; color: rgba(255, 255, 255, 0.07); pointer-events: none; } #footer .footer-aircon::after { content: "\2744"; position: absolute; bottom: -50px; left: -20px; font-size: 150px; line-height: 1; color: rgba(255, 255, 255, 0.05); pointer-events: none; } #footer .footer-aircon__nav { position: relative; z-index: 1; text-align: center; margin-bottom: 8px; } #footer .footer-aircon__nav li { display: inline-block; margin: 0 4px 8px; } #footer .footer-aircon__nav li a { display: inline-block; padding: 6px 16px; color: #fff; font-size: 13px; line-height: 1.5; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; text-decoration: none; transition: background 0.2s ease, transform 0.2s ease; } #footer .footer-aircon__nav li a:hover { color: #fff; background: rgba(255, 255, 255, 0.22); transform: translateY(-1px); } #footer .footer-aircon .line-contact-item { display: inline-block; margin: 0 4px 8px; vertical-align: middle; } #footer .footer-aircon .line-contact-item .line-contact-btn { margin-top: 0; padding: 6px 16px; font-size: 13px; border-radius: 999px; box-shadow: none; } #footer .footer-aircon__divider { position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; max-width: 480px; margin: 6px auto 14px; color: rgba(255, 255, 255, 0.85); font-size: 14px; } #footer .footer-aircon__divider::before, #footer .footer-aircon__divider::after { content: ""; flex: 1; height: 1px; background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.5)); } #footer .footer-aircon__divider::after { background: linear-gradient(to left, transparent, rgba(255, 255, 255, 0.5)); } #footer .footer-aircon .footer_logo_area { position: relative; z-index: 1; margin-top: 0; color: #fff; } #footer .footer-aircon .footer_logo_area .logo a { color: #fff; } #footer .footer-aircon .footer_logo_area .logo a:hover { color: #dff3ff; } #footer .footer-aircon__tagline { margin: 4px 0 6px; color: #cfeaff; font-size: 12px; letter-spacing: 0.08em; } #footer .footer-aircon .footer_logo_area .copyright { color: rgba(255, 255, 255, 0.75); } #footer .footer-aircon .footer_logo_area img { margin-top: 10px; padding: 4px; background: #fff; border-radius: 4px; } /* フッター サイトマップナビ（footer.twig） */ footer .container-fluid .bg-fff.footer-sitemap { padding: 30px 40px; } #footer .footer-sitemap__nav { display: flex; flex-wrap: wrap; gap: 30px 24px; list-style: none; margin: 0; padding: 0; } #footer .footer-sitemap__col { flex: 1 1 0; min-width: 160px; margin: 0; } #footer .footer-sitemap__col--calendar { flex: 0 1 300px; min-width: 260px; } #footer .footer-sitemap__title { font-size: 14px; font-weight: bold; color: #0077C8; padding-bottom: 8px; margin-bottom: 14px; border-bottom: 2px solid #0077C8; } #footer .footer-sitemap__list { list-style: none; margin: 0; padding: 0; } #footer .footer-sitemap__list li { margin: 0 0 10px; } #footer .footer-sitemap__list li:last-child { margin-bottom: 0; } #footer .footer-sitemap__list a { position: relative; display: inline-block; padding-left: 14px; color: #555; font-size: 13px; line-height: 1.6; text-decoration: none; transition: color 0.2s; } #footer .footer-sitemap__list a::before { content: ''; position: absolute; left: 2px; top: 50%; width: 6px; height: 6px; border-top: 2px solid #99cb13; border-right: 2px solid #99cb13; transform: translateY(-50%) rotate(45deg); } #footer .footer-sitemap__list a:hover { color: #0077C8; text-decoration: underline; } #footer .footer-sitemap__calendar-note { margin-top: 10px; font-size: 11px; line-height: 1.7; color: #777; } @media only screen and (max-width: 991px) { #footer .footer-sitemap__col { flex: 1 1 40%; } #footer .footer-sitemap__col--calendar { flex: 1 1 100%; max-width: 360px; } } @media only screen and (max-width: 767px) { footer .container-fluid .bg-fff.footer-sitemap { padding: 24px 20px; } #footer .footer-sitemap__nav { gap: 24px 16px; } #footer .footer-sitemap__col { flex: 1 1 100%; min-width: 0; } #footer .footer-sitemap__col--calendar { max-width: none; } } @media only screen and (max-width: 767px) { #footer .footer-aircon { margin-top: 20px; padding: 24px 14px 20px; border-radius: 8px; } #footer .footer-aircon__nav li a { font-size: 12px; padding: 6px 12px; } #footer .footer-aircon .footer_logo_area .logo { font-size: 20px; font-size: 2rem; } #footer .footer-aircon .footer_logo_area .copyright { font-size: 11px; font-size: 1.1rem; } }