@charset "UTF-8";
/*-----------------------------------------------------
  Quality
----------------------------------------------------- */
#main { background: #fbfaf8;}
.head_area p.cp { color: var(--main-font-color); }
.head_area {background:url("../img/quality/head.png") no-repeat;background-size:cover;background-position:center;margin-bottom:60px;}
.pages .intro p.intro_ttl { font-size: clamp(18px, 4vw, 23px); line-height: 2; margin-bottom: clamp(15px, 3vw, 45px); }
.pages .intro p.intro_txt { font-size: clamp(13px, 3vw, 15px); line-height: 1.8; }
.pages .intro p.intro_txt .red { color: #d56a63; }
.pages .intro .intro_inner { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 45px; }

.anchor_menu_wrap { background: #ece5be; padding: clamp(20px, 6vw, 50px) 0; }
.anchor_menu_wrap .ttl { color: var(--mossgreen-color); font-size: clamp(20px, 6vw, 30px); text-align: center; margin-bottom: clamp(10px, 3vw, 20px); line-height: 1; }

.anchor_menu_wrap ul.menu { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.anchor_item { display: flex; text-decoration: none; }
.anchor_item__label { flex: 1; padding: 15px; background: #ffffff; color: #8e6c63; font-size: clamp(12px, 3vw, 16px); transition: background-color .3s, color .3s; }
.anchor_item__arrow { width: clamp(25px, 6vw, 48px); display: flex; align-items: center; justify-content: center; background: #6b8a77; transition: background-color .3s; }
/* 矢印（CSSで描画） */
.anchor_item__arrow::before { content: ""; display: block; width: 8px; height: 8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); }
/* hover時（＋キーボードフォーカス） */
.anchor_item:hover .anchor_item__label,.anchor_item:focus-visible .anchor_item__label { background: #e4ede7; }
/* 最初の「選択中」状態用 */
.anchor_item.is-current .anchor_item__label { background: #e4ede7; }
.sec_ttl { text-align: center; font-size: clamp(16px, 4vw, 23px); margin-bottom: 10px; }
.sec_txt { text-align: center; font-size: clamp(13px, 2vw, 15px); line-height: 1.8; }
.sec_cp { text-align: center; font-size: clamp(10px, 2vw, 13px); margin-bottom: clamp(15px, 3vw, 30px);; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 4vw, 30px); }
.grid.col-3 { grid-template-columns: 1fr 1fr 1fr; }
/*.grid.col-3 { grid-template-columns: repeat(3, minmax(260px, 1fr)); }*/


.woods { background: url("../img/plan/woods_bg.png")no-repeat; padding: clamp(60px, 3vw, 80px) 0; background-size: 100%; position: relative; }
.woods > .cp { position: absolute; right: 1%; top: 1%; }
.woods .woods_ttl { text-align: center; }
.woods .woods_ttl img { max-width: 100px; margin: 0 auto 25px; }
.woods .grid { display:grid; grid-template-columns: 1fr 1fr; }
.woods .grid img { margin: 20px 0 5px; }
.woods .obi_ttl { background: #b18c81; border-radius: 10px; padding: 8px 10px; box-sizing: border-box; text-align: center; margin-bottom: clamp(15px, 4vw, 35px); margin-top: 40px; }
.woods .obi_ttl img { max-width: min(15% , 66px); margin: 0 auto; vertical-align: 1px; }
.woods .txt_area { background: #fcf9f0; padding: 40px; box-sizing: border-box; margin-top: 25px; position: relative; }
.woods .txt_area ::before { content: ""; position: absolute; inset: 12px; border: 1px solid #b18c81; }
.woods .txt_area p { text-align: center; }
.woods .txt_area .ttl { color: #b18c81; font-size: clamp(16px, 3vw, 23px); margin-bottom: 13px; }
.woods .txt_area .txt { font-size: clamp(13px, 3vw, 15px); line-height: 1.8; }
.woods .beam picture.beam_ph { margin-top: 30px; }
.woods .beam picture.beam_ph + .cp { text-align: right; margin-top: 5px; }

/*キッチン*/
.kitchen { padding: clamp(60px, 3vw, 80px) 0; }
.kitchen .anchor_ttl { max-width: min(30% , 123px); margin: 0 auto clamp(25px, 4vw, 45px); }
.kitchen .head { display: grid; grid-template-columns: repeat(2, minmax(260px, 1fr)); gap: 20px; margin-bottom: 20px; }
.kitchen .head .anchor_subttl { color: var(--mossgreen-color); margin-bottom: 20px; font-size: clamp(17px, 3vw, 23px); }
.kitchen .head .anchor_txt { font-size: clamp(13px, 3vw, 15px); }
.kitchen .main { margin-bottom: 5px; }
.kitchen .main + .cp { text-align: right; }
.kitchen .kitchen90 { background: #fff; padding: clamp(25px, 3vw, 30px) clamp(15px, 3vw, 30px); box-sizing: border-box; margin: 30px 0; }
.kitchen .kitchen90 .kitchen90_txt { width: 100%; margin-bottom: 20px; }
.kitchen .kitchen90 .grid { grid-template-columns: 1fr 1fr; }
.kitchen .kitchen90 .grid .txt { font-size: clamp(13px, 3vw, 15px); margin: 10px 0 0;}

.kitchen .box { position: relative; width: 48%; }
.kitchen .box:first-child::after { position: absolute; content: ''; display: inline-block; height: 100%; width: 1px; background: #3c3c3c; right: -19px; top: 0; }
.kitchen p.obi { text-align: center; background: #fff; font-size: clamp(0.875rem, 0.813rem + 0.31vw, 1.125rem); font-family: var(--font-gothic-bold); padding: 10px; margin-bottom: 10px; }
.kitchen p.obi span { font-size: 80%; }
.kitchen .img { width:min(100% , 220px); }

.worktop { padding: 40px 35px 35px; background: url("../img/quality/worktop_bg.png")no-repeat; background-size: cover; width: 100%; height: 100%; position: relative; box-sizing: border-box; margin-bottom: clamp(30px, 3vw, 40px); }
.worktop__title { font-size: clamp(18px, 3vw, 23px); line-height: 1.6; text-align: center; margin-bottom: clamp(10px, 3vw, 16px); }
.worktop__lead { font-size: clamp(13px, 3vw, 15px); text-align: center; margin-bottom: clamp(20px, 3vw, 30px); }
.worktop__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; position: relative; }
.worktop__cols::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: #3c3c3c; transform: translateX(-50%); }
.worktop__col { font-size: clamp(12px, 3vw, 14px); }

/*.worktop-block { background: rgba(255, 255, 255, 0.8); padding: 16px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.08); margin-bottom: 24px; }*/
.worktop-block__title { background: #fff; padding: 10px; font-size:clamp(14px, 3vw, 16px); margin-bottom: 12px; text-align: center; }
.worktop-block__image { margin-bottom: 5px; }
.worktop-block__image img { width: 100%; height: auto; display: block; }
.worktop-block__text { font-size: clamp(13px, 3vw, 15px); line-height: 1.5; font-feature-settings: "palt"; }
.worktop-block__sub { margin-top: 12px; }
.worktop-block__sub-title { font-size: clamp(12px, 3vw, 14px); font-weight: 700; margin-bottom: 4px; font-feature-settings: "palt"; }
.worktop-block__sub-text { font-size: 12px; line-height: 1.5; font-feature-settings: "palt"; }
.worktop-block .flex { display: flex; justify-content: space-between; gap: 15px; margin: 10px 0 15px; }
.worktop-block .flex .flexbox{ width: 50%; }

.worktop__col--left .worktop-block .grid { display: grid; grid-template-columns: 3fr 5fr; gap: 12px; margin-bottom: 10px; }

.worktop-feature-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(8px, 3vw, 15px); }
.worktop-feature { display: flex; gap: 12px; }
.worktop-feature__image { flex: 0 0 50%; }
.worktop-feature__image img { width: 100%; height: auto; display: block; }
.worktop-feature__body { flex: 1; }
.worktop-feature__title { font-weight: 700; margin-bottom: 4px; border-bottom: 1px solid #3c3c3c; padding-bottom: 3px; }
.worktop-feature__text { font-size: clamp(12px, 3vw, 13px); line-height: 1.7; font-feature-settings: "palt"; }

.worktop-sink__catch { margin-bottom: 8px; background: #fff; padding: 5px 10px; font-size: clamp(12px, 3vw, 14px); text-align: center; }
.worktop-sink__color { margin-left: auto; }
.worktop-sink__main-image { margin-bottom: 12px; }
.worktop-sink__main-image img { width: 100%; height: auto; display: block; }
.worktop-sink__sub-text { font-size: 12px; line-height: 1.5; }
.worktop__col--right .cp { text-align: right; margin-top: 5px;}

/*.equipment { }*/
.equipment { padding: clamp(0, 3vw, 40px) 0; }
.equipment__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.equipment__grid .cp { text-align: right; margin-top: 5px; }

.equipment-card { font-size: clamp(12px, 3vw, 14px); }
.equipment-card__head { background: #e4ede7; padding: 8px 12px; margin-bottom: 10px; }
.equipment-card__title { font-size: clamp(14px, 3vw, 16px); color: var(--mossgreen-color); }

/*.equipment-card__body { padding: 12px; }*/
.equipment-card__body--horizontal { display: flex; gap: 16px; align-items: flex-start; }
.equipment-card__body--horizontal .equipment-card__text-block , .equipment-card__body--horizontal .equipment-capacity-img { flex: 1; }

/*.equipment-card__text-block { flex: 1; }*/
.equipment-card__lead { font-size: 12px; margin-bottom: 10px; }
.equipment-card__text--bold { font-weight: 700; }

.equipment-card__image { flex: 0 0 auto; text-align: center; }
.equipment-card__image img { display: block; width: 100%; height: auto; }

/*.cp { font-size: 11px; text-align: right; margin-top: 4px; }*/
.equipment-capacity { margin: 0; }

/* サブ画像付きテキスト（レンジフード） */
.equipment-sub-figure { margin-bottom: 8px; }
.equipment-sub-figure img { display: block; width: 100%; height: auto; }

/* グリッド内での配置（PC） */
.equipment-card--dishwasher { grid-column: 1 / span 2; }
.equipment-card--stove { grid-column: 3 / span 2; }
.equipment-card--cabinet { grid-column: 1 / span 2; }
.equipment-card--hood { grid-column: 3 / span 2; }
.equipment-card--handle { grid-column: 1 / span 1; }
.equipment-card--softclose { grid-column: 2 / span 1; }
.equipment-card--ebcoat { grid-column: 3 / span 1; }
.equipment-card--shower { grid-column: 4 / span 1; }


.laundry { padding: clamp(60px, 3vw, 80px) 0; }
.laundry__header { text-align: center; margin-bottom: clamp(20px, 3vw, 40px); }
.laundry__icon img { width:230px; height: auto; display: block; margin: 0 auto 8px; }
.laundry__lead { margin-bottom:clamp(0, 3vw, 40px); }
.laundry__catch { font-size: clamp(16px, 3vw, 22px); color: var(--mossgreen-color); line-height: 1.6; margin-bottom: 12px; }
.laundry__text { font-size: clamp(12px, 3vw, 14px); }
.laundry__contents { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: start; gap: clamp(20px, 3vw, 40px); }
.laundry__img--main { position: relative; }
.laundry__img--main img { width: 100%; height: auto; display: block; border-radius: 8px; }
.laundry__caption { font-size: 11px; text-align: right; margin-top: 4px; position: absolute; top: 0; right: 0; }
.laundry__madori img { width: 100%; height: auto; display: block; }
.laundry__madori figcaption { font-size: 12px; margin-top: 4px;  }
.laundry__info .cp { text-align: right; margin-top: 5px; }

.washstand { background: #f0f6f5; margin-bottom: clamp(60px, 3vw, 100px); }
.washstand__inner { padding: clamp(15px, 3vw, 35px); box-sizing: border-box; }
.washstand__header { text-align: center; margin-bottom: 20px; }
.washstand__title { font-size: clamp(18px, 3vw, 20px); line-height: 1.4; color: #5aa1a9; margin-bottom: 8px; }
.washstand__lead { font-size: clamp(12px, 3vw, 14px); line-height: 1.8;  }
.washstand__body { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: flex-start; }
.washstand__main img { display: block; width: 100%; height: auto; margin-bottom: 5px; }
.washstand__features { display: flex; flex-direction: column; gap: 16px; }
.washstand-box__head { background: #6db5c0; color: #fff; font-size: 15px; font-weight: 700; padding: 8px 14px; margin-bottom: 5px; }
.washstand-box__body { display: flex; gap: 12px; align-items: flex-start; }
.washstand-box__text { flex: 1; font-size: 13px; line-height: 1.7; }
.washstand-box__text p { margin-bottom: 6px; }
.washstand-box__text p:last-child { margin-bottom: 0; }
.washstand-box__text > .washstand-box__image { width: 100%; margin-top: 5px; }
.washstand-box__image { flex: 0 0 120px; text-align: right; }
.washstand-box__image img { display: block; width: 100%; height: auto; margin-bottom: 4px; }

.bath { padding: clamp(60px, 3vw, 80px) 0; }
.bath__header { text-align: center; margin-bottom:clamp(20px, 3vw, 30px); }
.bath__icon img { display: block; width: 160px; height: auto; margin: 0 auto 50px; }
.bath__title { font-size: clamp(18px, 3vw, 20px); color: #7da88a; margin-bottom: 10px; line-height: 1.7; }
.bath__lead { font-size: clamp(12px, 3vw, 14px);  line-height: 1.8; }
.bath__main-image { position: relative; margin-bottom: clamp(20px, 7vw, 55px); }
.bath__main-image img { display: block; width: 100%; height: auto; }
.bath__caption--main { position: absolute; left: 16px; bottom: 12px; }
.bath__blow { text-align: center; }
.bath__blow-title { font-size: clamp(15px, 3vw, 18px); color: #c89a8c; margin-bottom: 10px; letter-spacing: 0.05em; }
.bath__blow-text { font-size: clamp(12px, 3vw, 14px); margin-bottom: clamp(10px, 2vw, 25px); }
.bath__blow-image { position: relative; }
.bath__blow-image img { display: block; width: 100%; height: auto; }
.bath__caption--blow { position: absolute; font-size: 10px; line-height: 1.3; }

/* --- 浴室設備ブロック --- */
.bath-feature { margin-top: 50px; }
.bath-feature__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-bottom: 60px; }
.bath-feature__grid--bottom { grid-template-columns: repeat(2, 1fr); justify-content: center; }
.bath-feature__grid .item__flex { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.bath-feature__grid .item__flex .logo { max-width: 130px; margin: 0 0 0 auto; }

.bath-feature__title { font-size: 16px; color: #b48e7e; font-weight: 700; background: #e8dcd9; padding: 8px 12px; margin-bottom: 10px; }
.bath-feature__text { font-size: 12px; margin-bottom: 12px; }

.bath-feature .cp { text-align: right; }
.cp img { width: 100%; height: auto; display: block; margin-bottom: 4px; }
.bath-feature__image--logo img { display: block; width: 100%; max-width: 420px; margin: 0 auto 4px; }

.toilet { padding: clamp(60px, 3vw, 80px) 0; }
.toilet__header { text-align: center; margin-bottom: clamp(20px, 3vw, 40px); }
.toilet__icon img { width: 92px; margin: 0 auto 30px; display: block; }
.toilet__title { font-size: clamp(18px, 3vw, 20px); color: #7fa48a; margin-bottom: 8px; line-height: 1.4; }
.toilet__lead { font-size: clamp(12px, 3vw, 14px); line-height: 1.8; }

.toilet__body { display: flex; align-items: flex-start; gap: clamp(20px, 3vw, 40px); margin-bottom: clamp(0, 5vw, 100px);}

.toilet__main { flex: 1; }
.toilet__main img { width: 100%; height: auto; display: block; }
.toilet__main .cp { font-size: 11px; text-align: right; color: #777; margin-top: 4px; }

.toilet__features { flex: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.toilet__features .toilet__kirei { grid-column: 1 / -1; text-align: center; }
.toilet__kirei img { width: 100%; height: auto; max-width: 800px; margin: 0 auto; display: block; }

.toilet-box__head { background: #7fb9c2; color: #fff; font-size: clamp(12px, 3vw, 14px); font-weight: 700; padding: 8px 12px; margin-bottom: 5px; }
.toilet-box__body { display: flex; flex-direction: column; gap: 10px; }
.toilet-box__text { font-size: 13px; }
.toilet-box__image { text-align: center; }
.toilet-box__image img { width: 100%; height: auto; margin-bottom: 4px; }
.toilet-box__image .cp { text-align: right; }

.toilet__kirei { text-align: center; }
.toilet__kirei img { width: 100%; height: auto; max-width: 800px; margin: 0 auto; display: block; }


.window { padding: clamp(60px, 3vw, 80px) 0; }
.window__header { text-align: center; margin-bottom: clamp(20px, 5vw, 40px); }
.window__icon img { width: 135px; margin: 0 auto 30px; display: block; }

.glass_wrap { background: url("../img/quality/glass_bg.png")no-repeat; background-size: cover; padding: 50px 30px; box-sizing: border-box; margin-bottom: 50px; }
.glass_wrap p.glass_ttl { text-align: center; color: #3894a0; font-size: clamp(17px, 3vw, 23px); line-height: 1.4; margin-bottom: 20px; font-family: var(--font-gothic-bold);}
.glass_wrap .blk { background: #fff; padding: 30px; margin-bottom: 30px; }
.glass_wrap .blk p.blk_ttl { font-size: clamp(15px, 3vw, 20px); background: #7ab8c0; color: #fff; text-align: center; padding: 10px; line-height: 1.4; margin-bottom: 30px; border-radius: 20px; font-family: var(--a1gothic-font); }
.glass_wrap .blk:nth-of-type(2) p.blk_ttl { background: #52b189; }
.glass_wrap .blk:nth-of-type(2) { margin-bottom: 0; }
.glass_wrap .blk p.sub_ttl { font-size:clamp(15px, 3vw, 20px); color: #3894a0; text-align: center; line-height: 1.4; margin-bottom: clamp(5px, 2vw, 30px); }
.glass_wrap .blk p.txt { font-size: clamp(12px, 3vw, 15px); line-height: 1.5; text-align: center; margin-bottom: 20px; }
.glass_wrap .blk .blk_img { max-width: min(100%,220px); width: 100%; margin-right: 30px; }
.glass_wrap .blk .txt_wrap { max-width: min(100% , 577px); width: 100%; }
.glass_wrap p.low_ttl { background: #e8f3eb; color: #7ab8c0; display: flex; justify-content: center; padding: 10px; max-width: min(100% , 160px); width: 100%; font-size: 17px; text-align: center; margin-right:10px; line-height: 1.5; font-family: var(--a1gothic-font); box-sizing: border-box; }
.glass_wrap p.low_txt { font-size: 13px; line-height: 1.5; width: calc(100% - 160px); }
.glass_wrap .blk_flex { display: flex; justify-content: space-between; margin-bottom: 20px;}
.glass_wrap .blk_flex picture.blk_img { max-width: 220px; width: 100%; }
.glass_wrap .blk_flex .inner_flex { display: flex; align-items: center; margin-bottom: 10px; }
.glass_wrap .blk_flex p.low_bg_txt { background: #7ab8c0; color: #fff; font-size: 13px; padding: 10px 30px; line-height: 1.5; margin-bottom: 20px; font-family: var(--a1gothic-font); }
.glass_wrap .blk_flex .blk01_img02 { max-width: min(100% , 215px); margin-right: 10px; }
.glass_wrap .blk p.ttl { text-align: center; font-size: clamp(18px, 3vw, 20px); color: #52b189; margin-bottom: 20px; }
.glass_wrap p.blk02_img02_ttl { color: #52b189; margin-bottom: 10px; }
.glass_wrap picture.blk02_img01 + p.small { text-align: right;}
.glass_wrap picture.blk02_img02 { margin-bottom: 10px; }
.glass_wrap picture.blk02_img02 + p.small { text-align: right; }
.glass_wrap .point_wrap { background: #f5fcf0; padding: clamp(15px, 5vw, 30px); border: 1px solid #52b189; }
.glass_wrap .point_wrap p.point_ttl { font-size: clamp(18px, 3vw, 28px); position: relative; display: inline-block; color: #52b189; margin-bottom: 30px; font-family: var(--a1gothic-font); font-weight: 700; }
.glass_wrap .point_wrap p.point_ttl::before { position: absolute; content: ''; display: inline-block; left: -20px; top: -5px; width: 3px; height: 150%; background: #52b189; border-radius: 3px; transform: rotate(-25deg); }
.glass_wrap .point_wrap p.point_ttl::after { position: absolute; content: ''; display: inline-block; right: -15px; top: -5px; width: 3px; height: 150%; background: #52b189; border-radius: 3px; transform: rotate(25deg); }
.glass_wrap .point_wrap .grid p.point_sec_ttl { line-height: 1.3; margin-bottom: 10px; color: #fff; background: #52b189; font-family: var(--a1gothic-font); padding: 5px 10px; box-sizing: border-box; font-size: clamp(13px, 3vw, 15px); }
.glass_wrap .point_wrap .grid picture.others_img04_gas , .glass_wrap .point_wrap .grid picture.others_img05_gas { margin-bottom: 10px; }
.glass_wrap .point_wrap .grid picture.others_img05_gas { width: 75%; }
.glass_wrap .point_wrap .grid picture.others_img05_gas + p.small { text-align: right; }
.glass_wrap .point_wrap .grid p.txt { font-size: 13px; text-align: left; }
.glass_wrap .point_wrap .harf { position: relative; }
.glass_wrap .point_wrap .harf:first-child::after { position: absolute; content: ''; background: url("../img/quality/bouhan_arrow.svg")no-repeat; width: 35px; height: 44px; display: inline-block; background-size: contain; top:50%; right: -55px; }
.glass_wrap .point_wrap span.orange { font-size: clamp(0.688rem, 0.625rem + 0.31vw, 0.938rem); color: #f17e1c; text-decoration: underline; }
.glass_wrap .point_wrap + .point_last { width: 100%; }
.glass_wrap p.mark_ttl { font-family: var(--a1gothic-font); line-height: 1.4; background: #52b189; color: #fff; text-align: center; font-size:clamp(15px, 3vw, 19px); padding: 10px; margin-bottom: 20px; }
.glass_wrap .point_wrap p.txt_ttl { font-size: clamp(0.813rem, 0.755rem + 0.24vw, 1rem); }
.glass_wrap .point_wrap .mark { max-width: 100px; width: 100%; margin-right: 20px; }
.glass_wrap .cpmark_wrap .flex { align-items: center; max-width: 660px; margin: 0 auto 20px; }
.glass_wrap .cpmark_wrap .txt_wrap { width: 100%; }
.glass_wrap .cpmark_wrap .txt_ttl { font-weight: 500; line-height: 1.5; font-size: clamp(0.813rem, 0.703rem + 0.55vw, 1.25rem); color: #52b189; margin-bottom: 10px; font-family: var(--a1gothic-font); }
.glass_wrap .cpmark_wrap .con_txt_wrap .txt { font-size: clamp(0.688rem, 0.625rem + 0.31vw, 0.938rem); text-align: left; margin-bottom: 0; }
.glass_wrap .cpmark_wrap .mark { max-width: 100px; margin-right: 20px; }
.glass_wrap .cpmark_wrap .con_txt_wrap .txt span.orange { color: #f1491c; border-bottom: 1px solid #f1491c; }
.glass_wrap .cpmark_wrap .last { font-size: clamp(0.875rem, 0.781rem + 0.47vw, 1.25rem); color: #52b189; text-align: center; line-height: 1.4; font-family: var(--a1gothic-font); }
.glass_wrap .sassi .flex , .glass_wrap .shutter .flex { justify-content: flex-start; align-items: center; margin-bottom: 20px; }
.glass_wrap .sassi .flex_box { justify-content: space-between; display: flex; margin-bottom: 30px; }
.glass_wrap .sassi p.sassi_ttl , .glass_wrap .shutter p.shutter_ttl { color: #fff; background: #6ebcd4; text-align: center; width: 180px; padding: 5px 0; margin-right: 10px; font-size: clamp(0.875rem, 0.844rem + 0.16vw, 1rem); }
.glass_wrap .sassi p.sassi_lead , .glass_wrap .shutter p.shutter_lead { font-size: clamp(0.813rem, 0.781rem + 0.16vw, 0.938rem); font-family: var(--a1gothic-font); }
.glass_wrap .sassi p.sassi_subttl { font-size: 15px; color: #509fbe; margin-bottom: 10px; font-family: var(--font-gothic-bold); }
.glass_wrap .sassi p.sassi_txt , .glass_wrap .shutter p.shutter_txt { font-size: 13px; line-height: 1.5; margin-bottom: 20px; }
.glass_wrap .sassi picture { margin-bottom: 5px; }
.glass_wrap .sassi p.small { text-align: right;}
.glass_wrap .blk_flex .flex p.small { text-align: right; }
.glass_wrap .shutter .flex_box { display: flex; justify-content: space-between; }

/* サッシ */
.window-sash { margin-bottom: 60px; }
.window-sash__head { margin-bottom: 25px; }
.window-sash__label , .window-shutter__label { background: #7fb9c2; color: #fff; text-align: center; padding: 3px 0; font-size: clamp(18px, 3vw, 23px); margin-bottom: 10px; }
.window-sash__lead , .window-shutter__lead { font-size: clamp(16px, 3vw, 20px); text-align: center; line-height: 1.6; }

.window-sash__grid { display: flex; gap: 40px; justify-content: space-between; }
.window-sash__item { flex: 1; }
.window-sash__sub { font-size: 15px; color: #3894a0; margin-bottom: 10px; }
.window-sash__text { font-size: 13px; line-height: 1.7; margin-bottom: 15px; }
.window-sash__image img { width: 100%; height: auto; display: block; margin-bottom: 4px; }
.window-sash__image .cp { font-size: 11px; text-align: right; color: #777; }

/* 電動シャッター */
.window-shutter { margin-top: 40px; }
.window-shutter__head { margin-bottom: 10px; }

.window-shutter__grid { display: grid; grid-template-columns: 2fr 1fr; /* ← 2:1 の比率 */ gap: 30px; }
.window-shutter__item { font-size: 13px; line-height: 1.7; }
.window-shutter__image img { width: 100%; height: auto; display: block; margin-bottom: 4px; }
.window-shutter__image .cp , .window-shutter__image + .cp { text-align: right; }
.window-shutter__text { font-size: 13px; margin-bottom: 15px; line-height: 1.7;}


.entrance { padding: clamp(60px, 3vw, 80px) 0; }
.entrance__header { text-align: center; margin-bottom: 40px; }
.entrance__icon img { width: 235px; margin: 0 auto 30px; display: block; }
.entrance__main-image { max-width: 785px; width: 100%; margin: 0 auto  clamp(25px, 3vw, 55px); }
.entrance__main-image img { display: block; width: 100%; height: auto; margin-bottom: 10px; }
.entrance__caption { font-size: 11px; }

/*.familock { background: #f9f1ec; padding: 35px 30px 40px; box-sizing: border-box; margin-top: 40px; }*/
.familock__head { margin-bottom: 20px; }
.familock__label { display: inline-block; background: #b18c81; color: #fff; padding: 8px 18px; font-size:clamp(16px, 3vw, 20px); letter-spacing: 0.06em; margin-bottom: 10px; width: 100%; box-sizing: border-box; }
.familock__lead { font-size: clamp(16px, 3vw, 20px); }
.familock__top { display: flex; gap: 32px; align-items: flex-start; margin-bottom: 20px; justify-content: space-between; }
.familock__devices { flex: 0 0 360px; max-width: 360px; }
.familock__devices img { width: 100%; height: auto; display: block; }
.familock__devices .cp { font-size: 11px; text-align: left; margin-top: 6px; }
.familock__text { flex: 1; font-size: 13px; line-height: 1.9; }
.familock__family { text-align: center; margin: 10px 0 0; }
.familock__family img { max-width: 440px; width: 100%; height: auto; display: inline-block; }
.familock__myapp img { margin-bottom: 4px; }
.familock__myapp .cp { font-size: 11px; text-align: right; }

.tenkey_block { margin-top: 40px; }
.tenkey_head { margin-bottom: clamp(10px, 3vw, 25px); }
.tenkey_head_ttl { background: #b68a79; color: #fff; font-size: clamp(16px, 3vw, 18px); padding: 10px 18px; letter-spacing: 0.06em; }
.tenkey_head_lead { font-size: clamp(12px, 3vw, 14px); margin-top: 14px; }

.tenkey_cols { display: flex; justify-content: space-between; gap: 40px; }
.tenkey_col { flex: 1; font-size: 13px; line-height: 1.8; }
.tenkey_img img { width: 100%; height: auto; display: block; margin-bottom: 4px; }
.tenkey_txt { font-size: 12px; line-height: 1.6; margin-bottom: 10px; }

.lock_block { padding: clamp(30px, 3vw, 50px) 0 0; }
.lock_title { text-align: center; color: #b68a79; font-size: clamp(15px, 3vw, 20px); letter-spacing: 0.06em; margin-bottom: clamp(10px, 3vw, 20px); }
.lock_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-bottom: 28px; }
.lock_card { font-size: clamp(12px, 3vw, 14px); line-height: 1.8; display: flex; flex-direction: column; justify-content: space-between; }
.lock_card_head { display: inline-block; background: #b68a79; color: #fff; padding: 8px 14px; font-size: clamp(16px, 3vw, 18px); margin-bottom: 10px; width: 100%; box-sizing: border-box; }
.lock_card_lead { font-size: 13px; margin-bottom: 12px; }
.lock_img img { width: 100%; height: auto; display: block; margin-bottom: 4px; }
.lock_img .cp { text-align: right; }

.lock_feature_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
.lock_feature { display: flex; flex-direction: column; background: transparent; height: 100%; }
.lock_feature_head { background: #b68a79; color: #fff; font-size: clamp(16px, 3vw, 18px); line-height: 1.3; padding: 12px 18px; letter-spacing: 0.06em; }
.lock_feature_body { background: #efe7c7; padding: 18px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.lock_feature_txt { font-size: 15px; line-height: 1.6; color: #3a3a3a; }
.lock_feature_note { font-size: 12px;  margin-top: 10px; }

.careful_block { padding: clamp(40px, 3vw, 60px) 0; }
.careful_title { text-align: center; color: #b68a79; font-size: clamp(14px, 3vw, 18px); letter-spacing: 0.06em; margin-bottom: clamp(15px, 3vw, 25px); }
.careful_grid { display: grid; gap: 30px; }
.careful_grid--3 { grid-template-columns: repeat(3, 1fr); margin-bottom: 28px; }
.careful_grid--2 { grid-template-columns: repeat(2, 1fr); }
.careful_card { display: flex; flex-direction: column; font-size: clamp(12px, 3vw, 14px); line-height: 1.8; }
.careful_txt span { display: block; color: #b18c81; font-size: 15px; }
.careful_txt span:last-of-type { margin-top: 10px; }
.careful_head { display: inline-block; background: #b68a79; color: #fff; padding: 8px 14px; font-size: 16px; margin-bottom: 10px; }
.careful_txt { font-size: 13px; margin-bottom: 12px; }
.careful_img img { width: 100%; height: auto; display: block; margin-bottom: 4px; }
.careful_img .cp { text-align: right; }

.comfort_title { text-align: center; color: #b68a79; font-size: clamp(16px, 3vw, 18px); letter-spacing: 0.06em; margin-bottom: clamp(10px, 3vw, 25px); }
.comfort_grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; align-items: start; }
.comfort_col { font-size: clamp(12px, 3vw, 14px); line-height: 1.8; }
.comfort_head { display: inline-block; background: #b18c81; color: #fff; padding: 10px 16px; font-size: clamp(16px, 3vw, 18px); margin-bottom: 10px; box-sizing: border-box; width: 100%; }
.comfort_lead { font-size: 13px; margin-bottom: 12px; }
.comfort_img img { width: 100%; height: auto; display: block; margin-bottom: 4px; }
.comfort_img .cp { text-align: right; }

.others { padding: clamp(60px, 3vw, 80px) 0 clamp(30px, 3vw, 80px); }
.others__icon img { width: 110px; margin: 0 auto 30px; display: block; }
.others__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap:30px; }
.others-card__head { background: #e4ede7; padding: 8px 12px; margin-bottom: 10px; }
.others-card__title { font-size: 16px; color: var(--mossgreen-color); }
.others-card__lead { font-size: 12px; }
.others-card picture { margin: 15px 0 5px;; }
.others-card:last-child .cp { text-align: right; }


@media only screen and (max-width: 980px){
  #main { padding-bottom: 80px; }
}

@media only screen and (max-width: 600px) {
  #main { padding-bottom: 100px; }
  .head_area { background: url("../img/quality/head_sp.png") no-repeat; background-size: 100%; }
  .pages .intro p.intro_ttl { line-height: 1.7; }
  .pages .intro p.intro_txt { line-height: 1.6; }
  .pages .intro .intro_inner { grid-template-columns: 1fr; }
  .anchor_menu_wrap ul.menu { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .anchor_item__arrow::before { content: ""; display: block; width: 5px; height: 5px; }
  .kitchen .head { display: grid; grid-template-columns: 1fr; }
  
  .kitchen .kitchen90 .grid { grid-template-columns: 1fr; }
  .worktop { padding: 35px 15px; }
  .worktop__inner { padding: 0 16px; }
  .worktop__cols { grid-template-columns: 1fr; gap:25px; }
  .worktop__cols::before { display: none; }
  .worktop-feature { flex-direction: row; }
  .worktop-sink__color { margin-left: 0; }
  .worktop-feature__image { flex: 0 0 30%; }
  .worktop__col--left .worktop-block .grid { grid-template-columns: 3fr 3fr; }

  
  .equipment__grid { grid-template-columns: 1fr; gap: 16px; }
/*  .equipment-multi-images { flex-direction: column; }*/
  .equipment-card--dishwasher { grid-column: auto; }
  .equipment-card--stove { grid-column: auto; }
  .equipment-card--cabinet { grid-column: auto; }
  .equipment-card--hood { grid-column: auto; }
  .equipment-card--handle { grid-column: auto; }
  .equipment-card--softclose { grid-column: auto; }
  .equipment-card--ebcoat { grid-column: auto; }
  .equipment-card--shower { grid-column: auto; }

  .equipment__grid--bottom { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 10px; }
  
  .laundry { padding-bottom: 30px; }
  .laundry__contents { grid-template-columns: 1fr; }
  
  .washstand__body { grid-template-columns: 1fr; gap: 24px; }
  .washstand-box__image { flex: 0 0 auto; width: 40%; margin-left: auto; }
  
  .bath__inner { padding: 0 16px; }
  .bath__title { text-align: left; }
  .bath__lead { text-align: left; }
  .bath__header { text-align: left; }
  .bath__icon img { width: 130px; margin-bottom: 8px; }
  .bath-feature__grid { grid-template-columns: 1fr; gap: clamp(15px, 3vw, 32px); margin-bottom: 40px; }
  .bath-feature__grid--bottom { grid-template-columns: 1fr; margin-bottom: 0; }
  .pc__flex { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px;}

  .toilet-box__head { padding: 8px; }
  .toilet__header { text-align: left; }
  .toilet__body { flex-direction: column; gap: 32px; }
  .toilet__features { gap: 15px; }
  
	.glass_wrap { padding: 40px 10px 10px; }
  .glass_wrap .point_wrap p.point_ttl::before , .glass_wrap .point_wrap p.point_ttl::after { top: 0px; height: 100%; }
  .glass_wrap .point_wrap .harf { width: 100%; }
  .glass_wrap .point_wrap .harf:first-child { margin-bottom: 60px; }
  .glass_wrap .point_wrap .harf:first-child::after { top: inherit; right: 45%; bottom: -50px; transform: rotate(90deg); }
  .glass_wrap .sassi p.sassi_ttl, .glass_wrap .shutter p.shutter_ttl { width: 100%; margin-bottom: 10px; }
  .glass_wrap .point_wrap .flex picture.others_img05_gas { width: 90%; margin: 0 auto 10px; }
  .glass_wrap .shutter .flex_box { display: block; }
  .glass_wrap .sassi .flex, .glass_wrap .shutter .flex { display: block; margin-bottom: 10px; }
  .glass_wrap .sassi .flex_box { display: block; }
  .glass_wrap .point_wrap .flex { display: block; }
  .glass_wrap .point_wrap p.mark_ttl { text-align: left; }
  .glass_wrap .point_wrap p.point_ttl { margin-bottom: 10px; }
  #Quality .quality_flex .txt { margin-right: 10px; }
  .glass_wrap .blk { padding: 30px 15px 20px; }
  .glass_wrap .point_wrap .flex p.point_sec_ttl { text-align: center; }
  .glass_wrap .blk p.blk_ttl { margin-bottom: 20px; }
	.glass_wrap .obi_txt { text-align: left; }
  .glass_wrap .blk_flex { display: block; }
  .glass_wrap .blk p.txt { text-align: left; }
  .glass_wrap .blk .blk_img { width: 50%; margin: 0 auto 20px; }
	.glass_wrap img.mark { max-width: 70px; }
	.glass_wrap .txt_wrap { width: 100%; }
  .glass_wrap .blk_flex .blk01_img02 { max-width: inherit; margin-right: 0; }
	.glass_wrap .others_img { display: block; max-width: inherit; width: 100%; margin-bottom: 20px; }
  .glass_wrap .blk_flex .inner_flex { display: block; }
	.glass_wrap .glass_wrap_syanetu_img { max-width: initial; margin: 10px 0 25px; }
  .glass_wrap p.low_ttl { max-width: inherit; width: 100%; padding: 5px 10px; margin-bottom: 10px; }
  .glass_wrap .blk_flex .grid { display: block; }
  .glass_wrap .blk_flex .grid div:first-child picture { width: 50%; margin: 0 auto 20px; }
  .glass_wrap .blk_flex .grid div:first-child { margin-bottom: 20px; }
  .glass_wrap .blk_flex p.low_bg_txt { padding: 10px; }
  .glass_wrap p.low_txt { width: 100%; }
	.glass_wrap p.obi { padding: 5px 0; }
	.glass_wrap p.small_ttl { text-align: center; margin-bottom: 5px; }
  .glass_wrap picture.blk02_img02 + p.small { text-align: left; }
  .glass_wrap .point_wrap .grid { grid-template-columns: 1fr; }
  .glass_wrap .point_wrap .grid p.point_sec_ttl { text-align: center; }
  
  .window-sash__grid { flex-direction: column; gap: 30px; }
  .window-shutter__grid { grid-template-columns: 1fr; }
  
  .familock__label { display: block; width: 100%; text-align: center; }
  .familock__top { flex-direction: column; gap: 20px; }
  .familock__devices { flex: none; max-width: 260px; margin: 0 auto; }
  .familock__family { margin: 10px 0; }
  
  .tenkey_block { margin-top: 30px; }
  .tenkey_cols { flex-direction: column; gap: 30px; }
  
  .lock_grid { grid-template-columns: 1fr; gap: 25px; }
  .lock_feature_grid { grid-template-columns: 1fr; gap: 16px; }

  .lock_feature_grid { grid-template-columns: 1fr; gap: 16px; }
  .lock_feature_head { padding: 5px 15px; text-align: center; }
  .lock_feature_body { padding: 15px; }

  .careful_grid--3 { grid-template-columns: 1fr; gap: 22px; }
  .careful_grid--2 { grid-template-columns: 1fr; gap: 22px; }
  
  .comfort_grid { grid-template-columns: 1fr; gap: 26px; }
  .comfort_head { padding: 8px 14px; }
  .others__icon img { width: 113px; }
  .others__grid { grid-template-columns: 1fr; }  
}