@charset "UTF-8"; #main-content img{ width: 100%; height: auto; } #main-content .section-quality{ max-width: 1400px; padding: 120px 5% 0; margin: 0 auto; } #main-content .en-ttl{ font-size: 24px; line-height: 1.5; font-family: 'YakuHanMP', 'EB Garamond', 'Cormorant Garamond', 'Lora', 'Noto Serif JP', serif; color: #ada076; letter-spacing: 0.2em; font-weight: normal; padding-bottom: 60px; display: flex; display: -ms-flex; align-items: center; } #main-content .en-ttl:before, #main-content .en-ttl:after{ content: ""; height: 1px; flex: 1; background-color: #ada076; } #main-content .en-ttl .word{ position: relative; padding: 0 1em; } #main-content .en-ttl .word::before, #main-content .en-ttl .word::after{ content: ""; position: absolute; top: 50%; height: 30px; width: 1px; background-color: #ada076; transform: translateY(-50%); } #main-content .en-ttl .word::before{ left: 0; } #main-content .en-ttl .word::after{ right: 0; } #main-content .anchor{ position: absolute; transform: translateY(-250px); } #main-content .cat-navi{ display: flex; display: -ms-flex; justify-content: space-between; max-width: 1090px; margin: 0 auto 50px; } #main-content .cat-navi .navi{ width: 19.2661%; } #main-content .cat-navi .navi a{ width: 100%; height: 84px; display: flex; display: -ms-flex; justify-content: center; align-items: center; font-size: 18px; line-height: 1.22; text-decoration: none; background-color: #796a56; color: #ffffff; border-radius: 3px; position: relative; } #main-content .cat-navi .navi a .word{ text-align: center; } #main-content .cat-navi .navi a .word::before{ content: ""; position: absolute; left: 50%; bottom: 0; border: 1px solid rgba(255,255,255,0.5); border-width: 0 1px 1px 0; width: 8px; height: 8px; transform: translateX(-50%) translateY(-80%) rotate(45deg); } #main-content .cat-navi .navi a .word .s-size{ display: block; font-size: 80%; } #main-content .section-quality .equipment{ overflow: hidden; } #main-content .section-quality .equipment .cat{ max-width: 1090px; margin: 0 auto; position: relative; padding-top: 80px; } #main-content .section-quality .equipment .cat+.cat{ margin-top: 80px; } #main-content .section-quality .equipment .cat::before{ content: ""; position: absolute; left: 50%; top: 0; width: 1400px; padding-top: 210px; background-color: #eeeae4; margin-left: -700px; } #main-content .section-quality .equipment .cat .ttl{ font-family: 'YakuHanMP', 'EB Garamond', 'Cormorant Garamond', 'Lora', 'Noto Serif JP', serif; font-size: 26px; line-height: 1.5; color: #796a56; font-weight: normal; margin-bottom: 10px; position: relative; } #main-content .section-quality .equipment .cat .ttl .sub{ font-size: 44.4444%; } #main-content .section-quality .equipment .cat .list-item .item .photo{ position: relative; } #main-content .section-quality .equipment .cat .list-item .item .photo .caption{ position: absolute; left: 0; bottom: 0; padding: 2px 7px; background-color: rgba(0,0,0,0.8); color: #ffffff; } #main-content .section-quality .equipment .cat .list-item .item p{ color: #796a56; } #main-content .section-quality .equipment .cat .list-item .item .head{ font-size: 18px; line-height: 1.25; font-weight: normal; margin-top: 5px; color: #796a56; } #main-content .section-quality .equipment .cat .list-item .item .txt{ font-size: 14px; line-height: 1.25; margin-top: 5px; } #main-content .section-quality .equipment .list-item{ display: grid; column-gap: 2.7522%; row-gap: 40px; grid-template-columns: repeat(4, 1fr); margin-top: 10px; } #main-content .section-quality .equipment .cat01 .list-item .item01{ grid-column: 1 / 5; } #main-content .section-quality .equipment .cat02 .list-item .item01{ grid-column: 1 / 3; grid-row: 1 / 4; } #main-content .section-quality .equipment .cat03 .list-item .item01{ grid-column: 1 / 3; grid-row: 1 / 4; } #main-content .section-quality .quality{ margin-top: 100px; } #main-content .section-quality .quality a{ word-break: break-all; overflow-wrap: break-word; } #main-content .section-quality .quality .quality-body{ background-color: #f0eeeb; padding: 70px 80px; max-width: 1100px; margin: 0 auto; box-sizing: border-box; } #main-content .section-quality .quality .quality-body .quality-ttl{ font-size: 24px; line-height: 1.3; color: #796a56; font-weight: normal; text-align: center; } #main-content .section-quality .quality .quality-body .quality-item01 > *+*{ margin-top: 20px; } #main-content .section-quality .quality .quality-body .quality-item02{ margin-top: 50px; } #main-content .section-quality .quality .quality-body .quality-item02 .list-item{ display: flex; display: -ms-flex; justify-content: space-between; max-width: 884px; margin: 0 auto; } #main-content .section-quality .quality .quality-body .quality-item02 .list-item .item{ width: 29.9773%; } #main-content .section-quality .quality .quality-body .quality-item02 .list-item .item .photo{ width: 89.0566%; margin: 0 auto; } #main-content .section-quality .quality .quality-body .quality-item02 .list-item .item .caption{ text-align: right; } #main-content .section-quality .quality .quality-body .quality-item02 .list-item .item .head{ font-size: 24px; line-height: 1.5; color: #796a56; text-align: center; } #main-content .section-quality .quality .quality-body .quality-item02 .list-item .item .txt{ line-height: 1.8571; margin-top: 5px; } #main-content .section-quality .quality .quality-body .quality-item02 .note{ margin-top: 20px; background-color: #ffffff; border-radius: 10px; padding: 20px 40px; } #main-content .section-quality .quality .quality-body .quality-item02 .note .head{ font-size: 24px; line-height: 1.5; text-align: center; } #main-content .section-quality .quality .quality-body .quality-item02 .note .head .s-size{ font-size: 66.6666%; } #main-content .section-quality .quality .quality-body .quality-item02 .note .txt{ margin-top: 10px; } #main-content .section-quality .quality .quality-body .quality-item02 .split-view{ display: flex; display: -ms-flex; justify-content: space-between; max-width: 920px; margin: 30px auto 0; align-items: center; } #main-content .section-quality .quality .quality-body .quality-item02 .split-view .bels{ width: 43.4783%; } #main-content .section-quality .quality .quality-body .quality-item02 .split-view .bels .bnr{ max-width: 308px; margin: 0 auto 10px; } #main-content .section-quality .quality .quality-body .quality-item02 .split-view .casbee{ width: 51.0869%; padding: 30px 3.8043%; box-sizing: border-box; background-color: #e0dedc; } #main-content .section-quality .quality .quality-body .quality-item02 .split-view .casbee .bnr{ max-width: 305px; margin: 0 auto 10px; } #main-content .section-quality .quality .quality-body .quality-item02 .split-view .casbee .name{ font-size: 20px; line-height: 1.5; color: #796a56; } #main-content .section-quality .quality .quality-body .quality-item02 .split-view .casbee .name .s-size{ font-size: 70%; } #main-content .section-quality .quality .quality-body .quality-item02 .split-view .casbee .txt{ line-height: 1.85; } #main-content .section-quality .quality .quality-body .quality-item03{ margin-top: 50px; padding-top: 50px; border-top: 1px solid #b5ada3; } #main-content .section-quality .quality .quality-body .quality-item03 > *+*{ margin-top: 20px; } #main-content .section-quality .quality .quality-body .quality-item03 .list-item{ display: flex; display: -ms-flex; justify-content: space-between; } #main-content .section-quality .quality .quality-body .quality-item03 .list-item .item{ width: 30.8511%; } #main-content .section-quality .quality .quality-body .quality-item03 .list-item .item .head{ font-size: 16px; line-height: 1.5; color: #231815; } #main-content .section-quality .quality .quality-body .quality-item03 .list-item .item .head::first-letter{ color: #796a56; } #main-content .section-quality .quality .quality-body .quality-item03 .note{ background-color: #ffffff; border-radius: 12px; display: flex; display: -ms-flex; align-items: center; padding: 15px 3%; } #main-content .section-quality .quality .quality-body .quality-item03 .note .photo-body{ width: 19.5922%; } #main-content .section-quality .quality .quality-body .quality-item03 .note .txt-body{ flex: 1; margin-left: 5%; } #main-content .section-quality .quality .quality-body .quality-item03 .note .txt-body .head{ font-size: 20px; line-height: 1.5; color: #796a56; border-bottom: 1px solid #ccc6be; } #main-content .section-quality .quality .quality-body .quality-item03 .note .txt-body .txt{ margin-top: 10px; } #main-content .section-quality .quality .quality-body .quality-item04{ margin-top: 50px; } #main-content .section-quality .quality .quality-body .quality-item04 > *+*{ margin-top: 20px; } #main-content .section-quality .quality .quality-body .quality-item04 .ttl{ font-size: 18px; line-height: 1.3; color: #796a56; font-weight: normal; text-align: center; border: solid #b5ada3; border-width: 1px 0; padding: 15px 0; } #main-content .section-quality .quality .quality-body .quality-item04 .list-item{ display: flex; display: -ms-flex; justify-content: space-between; } #main-content .section-quality .quality .quality-body .quality-item04 .list-item .item{ width: 30.8511%; } #main-content .section-quality .quality .quality-body .quality-item04 .list-item .item .head{ font-size: 18px; line-height: 1.5; color: #796a56; } #main-content .section-quality .quality .quality-body .quality-item04 .list-item .item .photo{ margin: 10px auto; } #main-content .section-quality .quality .quality-body .quality-item04 .list-item .item01 .photo{ max-width: 287px; } #main-content .section-quality .quality .quality-body .quality-item04 .list-item .item02 .photo{ max-width: 272px; } #main-content .section-quality .quality .quality-body .quality-item04 .list-item .item03 .photo{ max-width: 293px; } #main-content .section-quality .quality .quality-body .quality-item05{ margin-top: 50px; padding-top: 50px; border-top: 1px solid #b5ada3; } #main-content .section-quality .quality .quality-body .quality-item05 > *+*{ margin-top: 20px; } #main-content .section-quality .quality .quality-body .quality-item05 .split-view{ display: flex; display: -ms-flex; justify-content: space-between; flex-direction: row-reverse; } #main-content .section-quality .quality .quality-body .quality-item05 .split-view .photo{ width: 23.7234%; margin-left: 5%; } #main-content .section-quality .quality .quality-body .quality-item05 .split-view .txt{ flex: 1; } #main-content .section-quality .quality .quality-body .quality-item05 .ttl{ font-size: 18px; line-height: 1.3; color: #796a56; font-weight: normal; text-align: center; border: solid #b5ada3; border-width: 1px 0; padding: 15px 0; margin-top: 40px; } #main-content .section-quality .quality .quality-body .quality-item05 .ds-item{ margin-top: 40px; } #main-content .section-quality .quality .quality-body .quality-item06{ margin-top: 50px; padding-top: 50px; border-top: 1px solid #b5ada3; } #main-content .section-quality .quality .quality-body .quality-item06 > *+*{ margin-top: 20px; } #main-content .section-quality .quality .quality-body .quality-item07{ margin-top: 50px; padding-top: 50px; border-top: 1px solid #b5ada3; } #main-content .section-quality .quality .quality-body .quality-item07 > *+*{ margin-top: 20px; } #main-content .section-quality .quality .quality-body .quality-item07 .quality-ttl .sub{ font-size: 75%; display: block; } #main-content .section-quality .quality .quality-body .quality-item07 .suumo{ width: 75.1064%; margin: 20px auto 0; } /*--レスポンシブ追加プロパティ--------------------------------------*/ @media screen and (max-width: 1112px){ /*1112px以下のcss*/ #main-content .section-quality .quality .quality-body{ padding: 70px 7.2727%; } } @media screen and (max-width: 768px){ /*768px以下のcss*/ #main-content .en-ttl{ font-size: 4.8vw; padding-bottom: 7%; } #main-content .cat-navi{ flex-wrap: wrap; justify-content: flex-start; margin-bottom: 7%; } #main-content .cat-navi .navi{ width: 32%; padding-top: 15%; margin-left: 2%; position: relative; } #main-content .cat-navi .navi:nth-child(3n+1){ margin-left: 0; } #main-content .cat-navi .navi:nth-child(n+4){ margin-top: 2%; } #main-content .cat-navi .navi a{ position: absolute; left: 0; top: 0; height: 100%; font-size: 16px; } #main-content .section-quality{ padding: 0; } #main-content .section-quality .equipment{ padding: 10% 5% 10%; } #main-content .section-quality .equipment .copy{ font-size: 5vw; } #main-content .section-quality .equipment .cat{ padding-top: 10%; } #main-content .section-quality .equipment .cat+.cat{ margin-top: 15%; } #main-content .section-quality .equipment .cat::before{ padding-top: 56%; } #main-content .section-quality .equipment .cat .list-item .item .head{ font-size: 16px; } #main-content .section-quality .equipment .list-item{ grid-template-columns: repeat(2, 1fr); margin-top: 10px; } #main-content .section-quality .equipment .cat01 .list-item .item01{ grid-column: 1 / 3; } #main-content .section-quality .equipment .cat02 .list-item .item01{ grid-column: 1 / 3; grid-row: 1; } #main-content .section-quality .equipment .cat03 .list-item .item01{ grid-column: 1 / 3; grid-row: 1; } #main-content .section-quality .quality{ margin-top: 15%; } #main-content .section-quality .quality .quality-body{ padding: 10% 5%; } #main-content .section-quality .quality .quality-body .quality-ttl{ font-size: 18px; } #main-content .section-quality .quality .quality-body .quality-item01 > *+*{ margin-top: 5%; } #main-content .section-quality .quality .quality-body .quality-item02{ margin-top: 10%; } #main-content .section-quality .quality .quality-body .quality-item02 .list-item{ flex-wrap: wrap; justify-content: flex-start; } #main-content .section-quality .quality .quality-body .quality-item02 .list-item .item{ width: 48%; } #main-content .section-quality .quality .quality-body .quality-item02 .list-item .item:nth-child(2n+2){ margin-left: 4%; } #main-content .section-quality .quality .quality-body .quality-item02 .list-item .item:nth-child(n+3){ margin-top: 4%; } #main-content .section-quality .quality .quality-body .quality-item02 .list-item .item .head{ font-size: 5%; } #main-content .section-quality .quality .quality-body .quality-item02 .note{ margin-top: 5%; padding: 7% 5%; } #main-content .section-quality .quality .quality-body .quality-item02 .note .head{ font-size: 18px; } #main-content .section-quality .quality .quality-body .quality-item02 .split-view{ display: block; margin-top: 10%; } #main-content .section-quality .quality .quality-body .quality-item02 .split-view .bels{ width: 100%; } #main-content .section-quality .quality .quality-body .quality-item02 .split-view .casbee{ width: 100%; margin-top: 10%; padding: 7% 5%; } #main-content .section-quality .quality .quality-body .quality-item02 .split-view .casbee .name{ font-size: 18px; } #main-content .section-quality .quality .quality-body .quality-item03{ margin-top: 15%; padding-top: 15%; } #main-content .section-quality .quality .quality-body .quality-item03 > *+*{ margin-top: 5%; } #main-content .section-quality .quality .quality-body .quality-item03 .list-item{ display: block; } #main-content .section-quality .quality .quality-body .quality-item03 .list-item .item{ width: 100%; } #main-content .section-quality .quality .quality-body .quality-item03 .list-item .item:nth-child(n+2){ margin-top: 4%; } #main-content .section-quality .quality .quality-body .quality-item03 .list-item .item .head{ font-size: 14px; } #main-content .section-quality .quality .quality-body .quality-item03 .note{ display: block; padding: 7% 5%; } #main-content .section-quality .quality .quality-body .quality-item03 .note .photo-body{ width: 50%; max-width: 173px; margin: 0 auto; } #main-content .section-quality .quality .quality-body .quality-item03 .note .txt-body{ margin: 10px 0 0; } #main-content .section-quality .quality .quality-body .quality-item03 .note .txt-body .head{ font-size: 18px; } #main-content .section-quality .quality .quality-body .quality-item04{ margin-top: 15%; } #main-content .section-quality .quality .quality-body .quality-item04 > *+*{ margin-top: 5%; } #main-content .section-quality .quality .quality-body .quality-item04 .list-item{ display: block; } #main-content .section-quality .quality .quality-body .quality-item04 .list-item .item{ width: 100%; } #main-content .section-quality .quality .quality-body .quality-item04 .list-item .item:nth-child(n+2){ margin-top: 10%; } #main-content .section-quality .quality .quality-body .quality-item05{ margin-top: 15%; padding-top: 15%; } #main-content .section-quality .quality .quality-body .quality-item05 > *+*{ margin-top: 5%; } #main-content .section-quality .quality .quality-body .quality-item05 .split-view{ display: block; } #main-content .section-quality .quality .quality-body .quality-item05 .split-view .photo{ width: 50%; max-width: 223px; margin: 0 auto; } #main-content .section-quality .quality .quality-body .quality-item05 .split-view .txt{ margin-top: 10px; } #main-content .section-quality .quality .quality-body .quality-item05 .ttl{ margin-top: 15%; } #main-content .section-quality .quality .quality-body .quality-item05 .ds-item{ margin-top: 5%; } #main-content .section-quality .quality .quality-body .quality-item06{ margin-top: 15%; padding-top: 15%; } #main-content .section-quality .quality .quality-body .quality-item06 > *+*{ margin-top: 5%; } #main-content .section-quality .quality .quality-body .quality-item07{ margin-top: 15%; padding-top: 15%; } #main-content .section-quality .quality .quality-body .quality-item07 > *+*{ margin-top: 5%; } #main-content .section-quality .quality .quality-body .quality-item07 .suumo{ margin: 5% auto 0; } } @media screen and (max-width: 480px){ /*480px以下のcss*/ #main-content .cat-navi .navi{ padding-top: 18%; } #main-content .cat-navi .navi a{ font-size: 12px; } #main-content .cat-navi .navi a .word::before{ width: 5%; height: 0; padding-top: 5%; } }