/* 事業ページ（新築・リフォーム・不動産）だけで読む見た目。2026-10-31 受領のデザインどおり。
   仕様 = サイト仕様書。既存ページには読み込まれない（page-official.php）
   共通の部品は .svc- で始まる名前、新築だけの色・飾りは .svc--shinchiku の中に書く（あとでリフォーム・不動産を追加する） */

.svc {
	--svc-orange: #f2632a;
	--svc-orange-dark: #d9531f;
	--svc-text: #4a3b2f;
	--svc-sub: #7b6a5b;
	--svc-cream: #fbf7f1;
	--svc-line: #eadfd0;
	--svc-heading: #3e2a1e;
	--sdl-max: 1250px; /* 2026-11-08 先方デザイン比率合わせ: 本文幅 1180→約1250px（.svc の中だけに効く） */
	color: var(--svc-text);
	background: var(--svc-cream);
}
.svc img { max-width: 100%; display: block; }

/* ---------- 共通の部品 ---------- */
.svc-section { padding: 28px 0; position: relative; }
.svc-eyebrow { display: inline-block; color: var(--svc-orange); font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; font-size: clamp(15px, 1.3vw, 18px); letter-spacing: .16em; }
.svc-head-center { text-align: center; margin-bottom: 26px; }
.svc-head-center .svc-eyebrow { display: block; margin-bottom: 10px; font-size: clamp(15px, 1.61vw, 22px); }
.svc-head-inline { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin: 0 0 6px; }
.svc-head-inline .svc-eyebrow { font-size: clamp(15px, 2.42vw, 33px); }
.svc-head-inline--lg .svc-eyebrow { font-size: clamp(15px, 2.57vw, 35px); }
.svc-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
.svc-head-ja { font-family: "Shippori Mincho", serif; font-weight: 700; color: var(--svc-heading); font-size: clamp(18px, 1.9vw, 26px); line-height: 1.5; }
.svc-head-inline--lg .svc-head-ja { font-size: clamp(28px, 3.2vw, 44px); }
.svc-heading { font-family: "Shippori Mincho", serif; font-weight: 700; color: var(--svc-heading); font-size: clamp(28px, 3.2vw, 44px); line-height: 1.6; margin: 0; }
.svc-lead { font-size: clamp(17px, 1.7vw, 23px); color: var(--svc-text); line-height: 1.9; margin: 18px 0 0; }
.svc-lead--center { text-align: center; max-width: 1040px; margin-left: auto; margin-right: auto; }
.svc-lead p { margin: 0; }
.svc-more { display: inline-flex; align-items: center; gap: 8px; font-size: clamp(15px, 1.25vw, 17px); font-weight: 700; color: var(--svc-heading); white-space: nowrap; transition: color .2s, transform .2s; }
.svc-more:hover { color: var(--svc-orange); }
.svc-more span { transition: transform .2s; }
.svc-more:hover span { transform: translateX(4px); }

.svc-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6em; border-radius: 999px; padding: .95em 1.9em; min-height: 66px; box-sizing: border-box; font-weight: 700; font-size: 16px; transition: opacity .2s ease, transform .2s ease; }
.svc-btn:hover { transform: translateY(-2px); }
.svc-btn--primary { background: var(--svc-orange); color: #fff !important; }
.svc-btn--primary:hover { background: var(--svc-orange-dark); }
.svc-btn--white { background: #fff; color: var(--svc-heading) !important; }
.svc-btn--white:hover { background: #f8efe3; }
.svc-btn__icon { width: 1.25em; height: 1.25em; flex: none; filter: brightness(0) invert(1); }

.svc-img-label { position: absolute; right: 10px; bottom: 10px; background: rgba(20, 14, 8, .55); color: #fff; font-size: 15px; line-height: 1; padding: 5px 12px; border-radius: 999px; }

/* ---------- ヒーロー ---------- */
.svc-hero { position: relative; min-height: clamp(480px, 58vw, 640px); display: flex; align-items: flex-end; overflow: hidden; }
.svc-hero__photo { position: absolute; inset: 0; }
.svc-hero__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-hero__scrim { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(20, 14, 8, .58) 0%, rgba(20, 14, 8, .2) 52%, rgba(20, 14, 8, 0) 74%); }
.svc-hero__inner { position: relative; z-index: 2; padding: 60px 0 76px; color: #fff; }
.svc-hero__title { font-family: "Shippori Mincho", serif; font-weight: 700; font-size: clamp(34px, 5.64vw, 77px); line-height: 1.45; margin: 0 0 22px; text-shadow: 0 2px 14px rgba(0, 0, 0, .25); }
.svc-hero__lead { font-size: clamp(16px, 1.55vw, 21px); line-height: 1.9; margin: 0 0 30px; text-shadow: 0 1px 10px rgba(0, 0, 0, .3); max-width: 600px; }
.svc-hero__btns { display: flex; flex-wrap: wrap; gap: 16px; }
.svc-hero__wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: auto; z-index: 3; }

/* ---------- CONCEPT ---------- */
.svc-concept { overflow: hidden; }
.svc-concept .svc-lead { margin-top: 24px; }
.svc-concept__wash { position: absolute; top: -40px; right: -60px; width: 360px; pointer-events: none; z-index: 0; }
.svc-concept .sdl-inner { position: relative; z-index: 1; }
.svc-photos { display: grid; grid-template-columns: 2.12fr 1fr; gap: 13px; margin-top: 24px; }
.svc-photos__main, .svc-photos__item { position: relative; overflow: hidden; border-radius: 2px; }
.svc-photos__main img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 843 / 380; }
.svc-photos__sub { display: grid; grid-template-rows: 1fr 1fr; gap: 7px; }
/* 2026-11-08: height:100% が参照先（行の高さ）とお互いに依存し合い、実際の高さが崩れていた（不具合）。
   写真ごとの比率を直接指定して解消 */
.svc-photos__item img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 397 / 186; }
.svc-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 44px; }
.svc-feature { display: flex; align-items: flex-start; gap: 12px; padding: 4px 16px; }
.svc-feature:not(:first-child) { border-left: 1px solid var(--svc-line); }
/* 2026-11-08: img は align-items の初期値 stretch で行の高さいっぱいに伸び、中の数字が小さく見えていた（不具合）。
   素材の SVG（viewBox 140×100）は数字のまわりに余白が多い（数字が見えるのは x 10〜104・y 34〜81 だけ）。
   1.2 倍（168×120）にして、余白の分を負のマージンで外へ逃がし、見える数字の高さ約 57px・占める幅約 113px にした。
   Georgia の数字は横に広く、デザインの高さ（約 72px）にすると見出しが 2 行に折り返すため、ここまでにとどめた */
.svc-feature__num { width: 168px; height: auto; flex: none; margin: -40px -43px -22px -12px; }
/* 2026-11-08 経営者指示: 01〜03 をもう少し細長く（横を 80%）・文字の右にもう少し余白（横を縮めた分だけ見出しとの間が空く。
   場所の幅は変えないので見出しの折り返しは前と同じ） */
.svc--shinchiku .svc-feature__num { transform: scaleX(.8); transform-origin: left center; }
.svc-feature h3 { font-family: "Zen Kaku Gothic New", sans-serif; font-size: clamp(19px, 2.05vw, 28px); font-weight: 700; color: var(--svc-heading); margin: 0 0 8px; }
.svc-feature p { font-size: clamp(15px, 1.25vw, 17px); color: var(--svc-sub); margin: 0; line-height: 1.8; }

/* ---------- WORKS ---------- */
.svc-works__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 26px; }
.svc-work { margin: 0; }
.svc-work img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }
.svc--shinchiku .svc-works__grid { gap: 25px; }
.svc--shinchiku .svc-work img { aspect-ratio: 1.587; }
.svc-work figcaption { margin-top: 12px; font-size: clamp(15px, 1.4vw, 19px); font-weight: 700; color: var(--svc-heading); }

/* ---------- SUPPORT ---------- */
.svc-support { overflow: hidden; }
.svc-support__wash { position: absolute; top: -30px; left: -80px; width: 340px; pointer-events: none; z-index: 0; transform: scaleX(-1); }
.svc-support .sdl-inner { position: relative; z-index: 1; }
.svc-support__grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 20px; }
.svc-support__item { padding: 26px 30px; text-align: center; border-left: 1px solid var(--svc-line); }
.svc-support__item:nth-child(3n+1) { border-left: none; }
.svc-support__item:nth-child(n+4) { border-top: 1px solid var(--svc-line); }
.svc-support__icon { width: 104px; height: 104px; margin: 0 auto 16px; }
.svc-support__item h3 { font-family: "Shippori Mincho", serif; font-size: clamp(19px, 2.12vw, 29px); color: var(--svc-heading); margin: 0 0 10px; }
.svc-support__item p { font-size: clamp(15px, 1.25vw, 17px); color: var(--svc-sub); line-height: 1.8; margin: 0; text-align: left; }

/* ---------- FLOW ---------- */
.svc-flow__row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; margin-top: 12px; }
.svc-flow__row::before { content: ""; position: absolute; top: 28px; left: 28px; right: calc(20% - 28px); height: 2px; background: var(--svc-orange); z-index: 0; }
.svc-flow__step { position: relative; z-index: 1; padding-right: 6px; }
.svc-flow__num { width: 56px; height: 56px; display: block; margin-bottom: 16px; }
/* 2026-11-08 経営者指示（新築）: 番号を各段の真ん中に置き、題と説明も中央揃え。段の間を空ける。
   オレンジの線は 1 段目の中央から 5 段目の中央まで（段の幅 = (全体 - 間 4 つ) / 5 → 中央 = その半分） */
.svc--shinchiku .svc-flow__row { --flow-gap: clamp(16px, 2.2vw, 30px); column-gap: var(--flow-gap); }
.svc--shinchiku .svc-flow__row::before { left: calc((100% - 4 * var(--flow-gap)) / 10); right: calc((100% - 4 * var(--flow-gap)) / 10); }
.svc--shinchiku .svc-flow__step { padding-right: 0; text-align: center; }
.svc--shinchiku .svc-flow__num { margin-left: auto; margin-right: auto; }
.svc--shinchiku .svc-flow__step h3 .svc-nb { display: inline-block; } /* 「・」の後ろだけで改行（「打ち合わ／せ」と割れないように） */
.svc-flow__step h3 { font-family: "Zen Kaku Gothic New", sans-serif; font-size: clamp(15px, 1.61vw, 22px); font-weight: 700; color: var(--svc-heading); margin: 0 0 8px; }
.svc-flow__step p { font-size: clamp(15px, 1.3vw, 18px); color: var(--svc-sub); margin: 0; line-height: 1.7; }

/* ---------- FAQ ---------- */
.svc-faq__list { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.svc-faq__item { background: #fff; border: 1px solid var(--svc-line); border-radius: 12px; }
.svc-faq__item summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 6px 50px 6px 20px; position: relative; font-size: clamp(16px, 1.76vw, 24px); line-height: 1.3; font-weight: 700; color: var(--svc-heading); }
.svc-faq__item summary::-webkit-details-marker { display: none; }
/* 2026-11-08: デザインどおり常に「＋」（開いていても「−」にしない） */
.svc-faq__item summary::after { content: "+"; position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--svc-orange); font-weight: 700; }
.svc-faq__q { width: 50px; height: 50px; flex: none; }
.svc-faq__a { margin: 0; padding: 0 20px 6px 70px; font-size: 15px; color: var(--svc-sub); line-height: 1.8; }

/* ---------- 相談欄（写真背景） ---------- */
.svc-cta { position: relative; overflow: hidden; padding: 84px 0; }
.svc-cta__bg { position: absolute; inset: 0; }
.svc-cta__bg img { width: 100%; height: 100%; object-fit: cover; }
.svc-cta__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 14, 8, .35), rgba(20, 14, 8, .68)); }
.svc-cta__inner { position: relative; z-index: 2; text-align: center; color: #fff; }
.svc-cta__title { font-family: "Shippori Mincho", serif; font-size: clamp(22px, 2.1vw, 28px); line-height: 1.7; margin: 0 0 16px; text-shadow: 0 2px 12px rgba(0, 0, 0, .3); }
.svc-cta__lead { font-size: clamp(16px, 1.5vw, 20px); margin: 0 0 32px; text-shadow: 0 1px 8px rgba(0, 0, 0, .3); }
.svc-cta__btns { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }

/* ---------- 新築（.svc--shinchiku）だけの相談欄・ヒーローのボタン幅（2026-11-08・デザイン比率合わせ） ---------- */
.svc--shinchiku .svc-cta { padding: 40px 0; }
.svc--shinchiku .svc-cta__title { font-size: clamp(22px, 2.93vw, 40px); }
.svc--shinchiku .svc-cta__btns .svc-btn { width: 255px; }
/* 2026-11-08 経営者指示: 相談欄の電話・メールのアイコンを白塗り（*-fill.svg。色はファイルの中で決めるのでフィルターなし）・ボタンの上に余白（32→46px） */
.svc--shinchiku .svc-cta .svc-btn__icon:not(.svc-btn__icon--line) { filter: none; width: 26px; height: 26px; }
.svc--shinchiku .svc-cta__lead { margin-bottom: clamp(34px, 3.4vw, 46px); }
/* 2026-11-08 経営者指示: FAQ の上下の余白を少し増やす（問い 6→12px、答えの下 6→14px） */
.svc--shinchiku .svc-faq__item summary { padding-top: 12px; padding-bottom: 12px; }
.svc--shinchiku .svc-faq__a { padding-bottom: 14px; }
/* 2026-11-08 経営者指示: CONCEPT・WORKS・SUPPORT・FLOW・FAQ の英字見出しをセリフ体に（読み込み済みの Shippori Mincho の欧文） */
.sdl .svc--shinchiku .svc-eyebrow { font-family: "Shippori Mincho", serif; font-weight: 500; letter-spacing: .1em; }
/* 2026-11-08 経営者指示: CONCEPT の文字を大きく（22→30px）・その上の余白を減らす（ヘッダーの波の白い部分に少し重ねる。文字は波より前） */
.svc--shinchiku .svc-concept .svc-head-center .svc-eyebrow { font-size: clamp(18px, 2.2vw, 30px); }
.svc--shinchiku .svc-concept { padding-top: 0; margin-top: clamp(-34px, -2.5vw, -8px); }
.svc--shinchiku .svc-concept .sdl-inner { z-index: 4; }
/* 2026-11-08 経営者指示: 背景は白に、ベージュの水彩のにじみ（CONCEPT・WORKS は四隅に淡く、SUPPORT は上から白へ抜ける）。
   SUPPORT の上の境目は波線（白い波を上に重ねる） */
.svc.svc--shinchiku { background: #fff; }
.svc--shinchiku .svc-concept { background: url("img/svc/shinchiku/decorations/wash-concept.webp") center top / 100% auto no-repeat; }
.svc--shinchiku .svc-works { background: url("img/svc/shinchiku/decorations/wash-works.webp") center top / 100% auto no-repeat; }
.svc--shinchiku .svc-support { background: url("img/svc/shinchiku/decorations/wash-support.webp") center top / 100% auto no-repeat; padding-top: clamp(40px, 5.5vw, 76px); }
.svc--shinchiku .svc-support__wash { display: none; }
.svc--shinchiku .svc-support::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: clamp(22px, 3.5vw, 48px); z-index: 0; pointer-events: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 60' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1600V22C1420 52 1240 8 1010 24S560 58 330 34 90 18 0 32Z' fill='%23fff'/%3E%3C/svg%3E") center top / 100% 100% no-repeat; }
/* 2026-11-08 経営者指示: 相談欄の LINE ボタンに LINE 公式アイコン（色そのまま・高さ 40px＝スマホの最小の高さ） */
.svc--shinchiku .svc-btn__icon--line { filter: none; width: 40px; height: 40px; }
.svc--shinchiku .svc-hero__btns .svc-btn--primary { width: 426px; }
.svc--shinchiku .svc-hero__btns .svc-btn--white { width: 314px; }
/* 2026-11-08 経営者指示: ボタンの文字を大きく（16→18px）・ボタンの上に余白（30→44px）・波（デザインの形に描き直し）にボタンがかからないよう下の余白を広げる */
.svc--shinchiku .svc-hero__btns .svc-btn { font-size: 18px; }
.svc--shinchiku .svc-hero__lead { margin-bottom: clamp(32px, 3.22vw, 44px); }
.svc--shinchiku .svc-hero__inner { padding-bottom: clamp(64px, 11vw, 150px); } /* 22:5x 経営者指示: ボタンの下にもう少し写真が見えるように（波の高さ 約7.5vw ＋ 写真 約3.5vw） */
.svc--shinchiku .svc-hero__wave { pointer-events: none; } /* 波の画像の透明な部分がボタンのクリックをじゃましないように */

/* ==========================================================================
   リフォーム（.svc--reform）だけの部分。新築（.svc--shinchiku）の見た目は変えない。
   文字の大きさはリフォームのデザイン画像（725幅・倍率1366/725≈1.884）を実測して合わせた
   ========================================================================== */
.svc--reform { --svc-green-bg: #eef3e6; --svc-green-text: #3f7a3a; --svc-blue-bg: #e9f3f8; --svc-orange-bg: #fdf1e8; }
/* 2026-11-08 デザイン比率合わせ: WORKS・FLOW・FAQ の見出し 32→約38px */
.svc--reform .svc-head-ja { font-size: clamp(24px, 2.78vw, 38px); }
/* 2026-11-08 デザイン比率合わせ: CONCEPT・SERVICE・SUPPORT の大見出し 44→約49px（新築は変えない） */
.svc--reform .svc-heading { font-size: clamp(28px, 3.59vw, 49px); }

/* ---------- ヒーロー（左に文字・右にBEFORE/AFTER写真。写真はビューポート右端まで大きく） ---------- */
.svc-hero--split { display: block; position: relative; min-height: 540px; overflow: hidden; background: var(--svc-cream); align-items: initial; }
.svc-hero--split__text { width: 50%; padding: 30px 8px 70px max(40px, calc((100vw - var(--sdl-max)) / 2)); display: flex; flex-direction: column; justify-content: center; min-height: 540px; position: relative; z-index: 2; box-sizing: border-box; }
/* 2026-11-08 デザイン比率合わせ: 見出し 53→約58px（2行に収まる幅で調整） */
.svc-hero--split__text .svc-hero__title { color: var(--svc-heading); text-shadow: none; font-size: clamp(28px, 4.25vw, 58px); }
.svc-hero--split__text .svc-hero__lead { color: var(--svc-sub); text-shadow: none; max-width: none; }
/* 2026-11-08 デザイン比率合わせ: ボタン幅・白ボタンの枠線 */
.svc-hero--split__text .svc-hero__btns .svc-btn--primary { width: 352px; }
.svc-hero--split__text .svc-hero__btns .svc-btn--white { width: 235px; border: 1.5px solid rgba(74, 59, 47, .35); }
.svc-hero--split__photo { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; }
.svc-hero--split__photo img.svc-hero--split__after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 16px 0 0 16px; }
.svc-hero--split__label { position: absolute; background: #fff; color: var(--svc-heading); font-weight: 700; letter-spacing: .06em; font-size: 15px; padding: 7px 14px; border-radius: 4px; box-shadow: 0 2px 10px rgba(0, 0, 0, .14); }
/* 2026-11-08 デザイン比率合わせ: AFTER札を右上→右下へ（波の飾りより手前に出す） */
.svc-hero--split__label--after { bottom: 20px; right: 40px; z-index: 3; }
.svc-hero--split__label--before { position: absolute; left: 10px; bottom: 10px; font-size: 15px; padding: 6px 12px; }
.svc-hero--split__before { position: absolute; left: -8%; bottom: 8%; width: 40%; border: 6px solid #fff; border-radius: 10px; box-shadow: 0 12px 26px rgba(0, 0, 0, .2); overflow: hidden; z-index: 3; }
.svc-hero--split__before img { width: 100%; display: block; }
/* 2026-11-08 デザイン比率合わせ: 曲線矢印を大きく目立たせる */
.svc-hero--split__arrow { position: absolute; width: 150px; left: 32%; bottom: 30%; z-index: 3; }
/* 2026-11-08 経営者指示: 「施工事例を見る」ボタンを BEFORE の写真より前に（文字の側を 2→4 に上げる。文字の側は背景が透明なので写真は隠れない） */
.svc-hero--split .svc-hero--split__text { z-index: 4; }
/* 2026-11-08 経営者指示: ボタンの上にもう少し余白（30→44px）・BEFORE の写真を右上がりに少し傾ける（-4°） */
.svc-hero--split__text .svc-hero__lead { margin-bottom: clamp(32px, 3.22vw, 44px); }
.svc-hero--split__before { transform: rotate(-4deg); transform-origin: center; }
.svc-hero--split__photo .svc-img-label { right: 40px; bottom: 74px; z-index: 2; }
.svc-hero__wave { z-index: 2; }

/* ---------- CONCEPT 葉の飾り（2026-11-08: 悩みの箱の下側→本文の左右へ） ---------- */
.svc-concept__leaf { position: absolute; top: 128px; width: 86px; opacity: .9; pointer-events: none; z-index: 0; }
.svc-concept__leaf--left { left: max(8px, calc((100vw - var(--sdl-max)) / 2 - 10px)); }
.svc-concept__leaf--right { right: max(8px, calc((100vw - var(--sdl-max)) / 2 - 10px)); transform: scaleX(-1); }
/* 2026-11-08 経営者指示: 葉を水彩の新しい画像（デザインの絵柄・背景透明）に。左は斜めの枝、右はまっすぐの枝（左右反転しない）。大きさはデザインの比率 */
.svc--reform .svc-concept__leaf { opacity: 1; }
.svc--reform .svc-concept__leaf--left { width: clamp(100px, 11vw, 150px); top: 40px; }
.svc--reform .svc-concept__leaf--right { width: clamp(76px, 8vw, 110px); top: 150px; transform: none; }
.svc--reform .svc-cta--box__leaf { width: clamp(110px, 10.5vw, 145px); left: -6px; top: auto; bottom: -6px; opacity: 1; }

/* ---------- こんなお悩みありませんか？（2026-11-08: 箱の幅・題・人物・吹き出しをデザイン比率に合わせる） ---------- */
.svc-concern { background: var(--svc-green-bg); border-radius: 20px; padding: 26px 24px; margin-top: 30px; margin-left: -23px; margin-right: -23px; position: relative; z-index: 1; }
.svc-concern__title { text-align: center; font-family: "Shippori Mincho", serif; font-weight: 700; color: var(--svc-heading); font-size: clamp(20px, 2.78vw, 38px); margin: 0 0 18px; }
.svc-concern__grid { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.svc-concern__item { display: flex; align-items: center; gap: 0; flex: 0 1 auto; }
.svc-concern__photo { width: clamp(84px, 11.05vw, 151px); height: clamp(84px, 11.05vw, 151px); border-radius: 50%; object-fit: cover; flex: none; position: relative; z-index: 1; }
.svc-concern__bubble { background: #fff; border-radius: 999px; padding: 18px 26px; font-size: clamp(16px, 1.61vw, 22px); font-weight: 700; color: var(--svc-heading); line-height: 1.5; box-shadow: 0 3px 10px rgba(0, 0, 0, .06); margin: 0 0 0 -16px; white-space: nowrap; position: relative; z-index: 0; }

/* ---------- SERVICE ご相談いただけること（2026-11-08: アイコン+見出しを横並びに・カードを低く） ---------- */
.svc-service__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 30px; }
.svc-service__item { background: #fff; border-radius: 16px; padding: 24px 24px 23px; }
.svc-service__item--orange { background: var(--svc-orange-bg); }
.svc-service__item--orange h3 { color: #1e4d2b; }
.svc-service__item--blue { background: var(--svc-blue-bg); }
.svc-service__item--blue h3 { color: #1e4a5c; }
/* 2026-11-08: 「間取り・外まわり」(9文字)がカード幅で1行に収まるよう、アイコンと見出しをやや詰める */
.svc-service__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.svc-service__icon { width: clamp(40px, 4.5vw, 60px); height: clamp(40px, 4.5vw, 60px); margin-bottom: 0; flex: none; }
.svc-service__item h3 { font-family: "Shippori Mincho", serif; font-size: clamp(20px, 2.15vw, 29px); color: var(--svc-heading); margin: 0; white-space: nowrap; }
/* 写真の上端をそろえる: 本文の行数が2〜3行でばらつくため、3行ぶんの高さを確保 */
.svc-service__item p { font-size: clamp(16px, 1.5vw, 22px); color: var(--svc-sub); line-height: 1.7; margin: 0 0 14px; min-height: calc(1.7em * 3); }
.svc-service__photo { border-radius: 12px; overflow: hidden; aspect-ratio: 358 / 224; }
.svc-service__photo--wide { aspect-ratio: 358 / 224; } /* 2026-11-08 経営者指示: 窓・断熱の写真の高さを他の 2 枚にそろえる（358/160 → 358/224） */
.svc-service__photo img { width: 100%; height: 100%; object-fit: cover; }
.svc-service__item .svc-img-label { position: static; display: inline-block; margin-top: 10px; background: none; color: var(--svc-sub); padding: 0; font-size: 15px; }
.svc-service__item .svc-more { margin-top: 10px; }
.svc-service__item--blue .svc-more { color: #3d7a94; }
.svc-service__item--blue .svc-more:hover { color: var(--svc-orange); }
/* 2026-11-08 経営者指示（リフォーム）: 「リフォームイメージ」「窓・断熱の専門サイトへ →」をカードの左右中央に */
.svc--reform .svc-service__item .svc-img-label { display: block; text-align: center; }
.svc--reform .svc-service__item .svc-more { display: flex; justify-content: center; }

/* ---------- WORKS 施工事例（2段・T様邸。2026-11-08: 上段は左狭め右広め、下段は等幅） ---------- */
.svc-works__row { display: flex; gap: 20px; }
.svc-works__row--top { margin-top: 26px; }
.svc-works__row--bottom { margin-top: 19px; }
.svc-works__row--top .svc-work { flex: 501 1 0; margin: 0; }
.svc-works__row--top .svc-work:nth-child(2) { flex: 684 1 0; }
.svc-works__row--top .svc-work img { width: 100%; height: clamp(180px, 21.53vw, 294px); object-fit: cover; border-radius: 2px; }
.svc-works__row--bottom .svc-work { flex: 1; margin: 0; }
.svc-works__row--bottom .svc-work img { width: 100%; height: clamp(160px, 19.18vw, 262px); object-fit: cover; border-radius: 2px; }
.svc-works__caption { margin-top: 18px; text-align: center; font-size: clamp(16px, 1.4vw, 19px); font-weight: 700; color: var(--svc-heading); }
/* 2026-11-08 経営者指示: 「T様邸 マンションリノベーション」の上に余白（.sdl p の margin 0 に負けて 0px だった → 24px） */
.sdl .svc .svc-works__caption { margin-top: clamp(18px, 1.76vw, 24px); }

/* ---------- SUPPORT（緑の帯・2列・アイコン左。2026-11-08: 導入文の間隔・カード・文字をデザイン比率に合わせる） ---------- */
.svc-support.svc-support--band { background: #f3f7ee; }
.svc--reform .svc-support .svc-lead--center { margin-top: 10px; }
/* 2026-11-08 経営者指示: SUPPORT の説明文を横幅いっぱい・左右に適度な余白で中央に、タイトルのすぐ下に（デザインどおり「整理。」の後ろで改行。スマホは改行なし）。
   1040px の箱が左寄せのまま（既存の .sdl p の margin 0 が auto に勝っていた）だったのを直す */
.sdl .svc--reform .svc-support .svc-lead--center { max-width: none; margin: -8px 0 0; padding: 0 clamp(8px, 4vw, 60px); }
.svc-br-pc { display: inline; }
@media (max-width: 860px) { .svc-br-pc { display: none; } }
.svc-support__grid.svc-support__grid--2col { grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 24px; }
.svc-support__grid--2col .svc-support__item { display: flex; align-items: flex-start; gap: 16px; text-align: left; background: #fff; border-radius: 14px; padding: 16px 22px; border-left: 0; border-top: 0 !important; box-shadow: 0 2px 10px rgba(74, 59, 47, .05); }
.svc-support__grid--2col .svc-support__icon { width: clamp(44px, 6.22vw, 85px); height: clamp(44px, 6.22vw, 85px); margin: 2px 0 0; flex: none; }
.svc-support__grid--2col .svc-support__item h3 { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; font-size: clamp(19px, 2.05vw, 28px); color: var(--svc-heading); margin: 0 0 6px; }
.svc-support__grid--2col .svc-support__item p { font-size: clamp(15px, 1.35vw, 18px); color: var(--svc-sub); line-height: 1.6; margin: 0; text-align: left; }

/* ---------- FLOW リフォームの流れ（›でつなぐ） ---------- */
/* 2026-11-08 デザイン比率合わせ: セクションの上下余白を詰める（新築は変えない） */
.svc--reform .svc-flow.svc-section { padding: 20px 0; }
.svc--reform .svc-faq.svc-section { padding: 20px 0; }
.svc-flow2__row { display: flex; align-items: flex-start; gap: 2px; margin-top: 20px; }
.svc-flow2__step { flex: 1; min-width: 0; }
.svc-flow2__step-head { display: flex; align-items: flex-start; gap: 7px; margin-bottom: 10px; }
.svc-flow2__num { width: clamp(34px, 4.1vw, 56px); height: clamp(34px, 4.1vw, 56px); flex: none; border-radius: 50%; background: var(--svc-orange); color: #fff; font-weight: 700; font-size: clamp(15px, 1.6vw, 20px); display: grid; place-items: center; margin-top: 1px; }
.svc-flow2__step-title { font-size: clamp(15px, 1.39vw, 19px); font-weight: 700; color: var(--svc-heading); line-height: 1.4; }
.svc-flow2__step-desc { font-size: clamp(15px, 1.2vw, 16px); color: var(--svc-sub); margin: 0; line-height: 1.7; }
.svc-flow2__chevron { flex: none; color: var(--svc-orange); font-size: 20px; font-weight: 700; padding: 0 2px; margin-top: 6px; }
/* 2026-11-08 経営者指示（リフォーム）: › を大きく太く（20→34px・番号の丸の高さの真ん中）・番号と題を上下中央・段の間を空ける（2→14px）
   ＋ 相談欄のボタンの上に余白（26→40px）・「こんなお悩みありませんか？」の下に余白（18→32px） */
.svc--reform .svc-flow2__row { gap: clamp(8px, 1vw, 14px); }
.svc--reform .svc-flow2__step-head { align-items: center; }
.svc--reform .svc-flow2__step-title .svc-nb { display: inline-block; } /* 題は「・」の後ろだけで改行（「ヒア／リング」のように割れない） */
.svc--reform .svc-flow2__chevron { font-size: clamp(26px, 2.5vw, 34px); font-weight: 900; line-height: 1; margin-top: 0; height: clamp(34px, 4.1vw, 56px); display: flex; align-items: center; -webkit-text-stroke: 1px currentColor; }
@media (max-width: 860px) { .svc--reform .svc-flow2__chevron { display: none; } } /* スマホは縦に並ぶので › は出さない（上の display:flex がスマホ用の none に勝ってしまっていた） */
.sdl .svc--reform .svc-cta--box__lead { margin-bottom: clamp(28px, 2.93vw, 40px); }
.sdl .svc--reform .svc-concern__title { margin-bottom: clamp(22px, 2.34vw, 32px); }

/* ---------- FAQ（2列・常に表示） ---------- */
.svc-faq2__list { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.svc-faq2__item { background: #fff; border: 1px solid var(--svc-line); border-radius: 12px; padding: 16px 20px; }
.svc-faq2__q, .svc-faq2__a { display: flex; align-items: flex-start; gap: 12px; margin: 0; }
.svc-faq2__q { font-size: clamp(16px, 1.54vw, 21px); font-weight: 700; color: var(--svc-heading); margin-bottom: 12px; }
.svc-faq2__a { font-size: clamp(15px, 1.2vw, 17px); color: var(--svc-sub); line-height: 1.75; }
.svc-faq2__q img, .svc-faq2__a img { width: clamp(28px, 3.3vw, 45px); height: clamp(28px, 3.3vw, 45px); flex: none; margin-top: 2px; }

/* ---------- 相談欄（淡いオレンジの角丸の箱。2026-11-08: 幅を画面いっぱいに近づけ、中央1行・低い高さに） ---------- */
.svc-cta.svc-cta--box { padding: 0 0 13px; overflow: visible; }
.svc-cta--box__inner { position: relative; background: var(--svc-orange-bg); border-radius: 24px; padding: 36px 48px; overflow: hidden; min-height: 235px; display: flex; align-items: center; margin-left: -47px; margin-right: -47px; }
.svc-cta--box__leaf { position: absolute; left: -24px; top: -16px; bottom: auto; width: 170px; opacity: .9; pointer-events: none; z-index: 1; }
.svc-cta--box__text { position: relative; z-index: 2; max-width: none; width: 100%; text-align: center; margin: 0 auto; }
.svc-cta--box__title { font-family: "Shippori Mincho", serif; font-weight: 700; color: #d94b1f; font-size: clamp(24px, 2.78vw, 38px); line-height: 1.6; margin: 0 0 14px; }
.svc-cta--box__lead { font-size: clamp(16px, 1.4vw, 19px); color: var(--svc-text); margin: 0 0 26px; text-align: center; }
.svc-cta--box .svc-cta__btns { justify-content: center; }
.svc-cta--box .svc-cta__btns .svc-btn { min-height: 77px; }
.svc-cta--box .svc-cta__btns .svc-btn:nth-child(1) { width: 290px; }
.svc-cta--box .svc-cta__btns .svc-btn:nth-child(2) { width: 371px; }
.svc-cta--box .svc-cta__btns .svc-btn:nth-child(3) { width: 294px; }
.svc-cta--box .svc-btn__icon { width: 41px; height: 41px; }
.svc-cta--box__photo { position: absolute; top: 0; right: 0; bottom: 0; width: 20%; z-index: 0; }
.svc-cta--box__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-cta--box__photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, var(--svc-orange-bg) 0%, rgba(253, 241, 232, .75) 18%, rgba(253, 241, 232, 0) 48%); }
.svc-btn--line { background: #06c755; color: #fff !important; }
.svc-btn--line:hover { background: #05b34c; }

/* ---------- タブレット・スマホ（リフォーム）：すべて縦に積む ---------- */
@media (max-width: 860px) {
	.svc-hero--split { min-height: 0; }
	.svc-hero--split__text { width: 100%; min-height: 0; padding: 44px 20px 40px; }
	.svc-hero--split__photo { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: calc(100% - 40px); aspect-ratio: 4 / 3; margin: 0 20px 50px; }
	.svc-hero--split__after { border-radius: 16px; }
	.svc-hero--split__before { left: -4%; bottom: -8%; width: 46%; }
	.svc-hero--split__arrow { left: 14%; bottom: 10%; width: 46px; }
	.svc-hero--split__photo .svc-img-label { bottom: 16px; }
	img.svc-concept__leaf { display: none; }
	.svc-concern { padding: 28px 22px; margin-left: 0; margin-right: 0; }
	.svc-concern__grid { flex-direction: column; }
	/* 2026-11-08 経営者指示: スマホで人と吹き出しの位置を一番上のものと左揃えに（3 組をまとめて真ん中に置き、中は左揃え） */
	.svc-concern__grid { align-items: flex-start; width: fit-content; max-width: 100%; margin-left: auto; margin-right: auto; }
	/* 2026-11-08 経営者指示: スマホでリフォームの SUPPORT のカードの題が中央寄せで右寄りに見えていた → 説明文と同じ左揃えに */
	.svc-support__grid--2col .svc-support__item h3, .svc-support__grid--2col .svc-support__item p { text-align: left; }
	.svc-concern__item { gap: 12px; }
	.svc-concern__bubble { margin-left: 0; white-space: normal; }
	.svc-service__grid { grid-template-columns: 1fr; }
	.svc-works__row, .svc-works__row--top, .svc-works__row--bottom { flex-direction: column; }
	.svc-works__row--top .svc-work, .svc-works__row--top .svc-work:nth-child(2), .svc-works__row--bottom .svc-work { flex: none; }
	.svc-works__row--top .svc-work img, .svc-works__row--bottom .svc-work img { height: auto; aspect-ratio: 4 / 3; }
	.svc-support__grid.svc-support__grid--2col { grid-template-columns: 1fr; }
	.svc-flow2__row { flex-direction: column; gap: 24px; }
	.svc-flow2__chevron { display: none; }
	.svc-faq2__list { grid-template-columns: 1fr; }
	.svc-cta--box__inner { flex-direction: column; align-items: flex-start; padding-bottom: 220px; margin-left: 0; margin-right: 0; }
	.svc-cta--box__text { max-width: none; text-align: left; }
	.svc-cta--box__title, .svc-cta--box__lead { text-align: left; }
	.svc-cta--box .svc-cta__btns { justify-content: flex-start; }
	.svc-cta--box__photo { top: auto; bottom: 0; left: 0; right: 0; width: 100%; height: 200px; }
	.svc-cta--box__photo::before { background: linear-gradient(to top, var(--svc-orange-bg) 0%, rgba(253, 241, 232, .6) 14%, rgba(253, 241, 232, 0) 42%); }
}
@media (max-width: 520px) {
	.svc-cta--box__inner { padding: 32px 24px; }
	.svc-cta--box .svc-cta__btns { flex-direction: column; align-items: stretch; }
	.svc-cta--box .svc-cta__btns .svc-btn { text-align: center; width: auto; min-height: 66px; }
}

/* ---------- タブレット・スマホ：すべて縦に積む ---------- */
@media (max-width: 860px) {
	.svc-photos { grid-template-columns: 1fr; }
	.svc-photos__sub { grid-template-rows: none; display: flex; flex-direction: column; gap: 16px; }
	.svc-photos__sub .svc-photos__item img { aspect-ratio: 3 / 2; }
	.svc-features { grid-template-columns: 1fr; gap: 24px; }
	.svc-feature:not(:first-child) { border-left: none; border-top: 1px solid var(--svc-line); padding-top: 22px; }
	.svc-feature { padding-left: 4px; padding-right: 4px; }
	.svc-works__grid { grid-template-columns: 1fr; }
	.svc-support__grid { grid-template-columns: 1fr; }
	.svc-support__item { border-left: none !important; border-top: 1px solid var(--svc-line); padding: 24px 4px; }
	.svc-support__item:first-child { border-top: none; }
	.svc-support__item h3, .svc-support__item p { text-align: center; }
	.svc-flow__row { grid-template-columns: 1fr; gap: 28px; }
	.svc-flow__row::before { display: none; }
	.svc-hero__lead { max-width: none; }
}
@media (max-width: 520px) {
	.svc-hero { min-height: 560px; }
	.svc-hero__btns { flex-direction: column; align-items: stretch; }
	.svc-hero__btns .svc-btn { text-align: center; }
	.svc--shinchiku .svc-hero__btns .svc-btn--primary, .svc--shinchiku .svc-hero__btns .svc-btn--white { width: auto; } /* 2026-11-08: PC の固定幅 426px がスマホで右に切れていた */
	.svc-cta { padding: 56px 0; }
	.svc-cta__btns { flex-direction: column; }
	.svc-cta__btns .svc-btn { width: 100%; }
	.svc-head-row { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ==========================================================================
   不動産（.svc--realestate）だけの部分。新築・リフォーム（.svc--shinchiku/.svc--reform）の見た目は変えない。
   文字の大きさは不動産のデザイン画像（725幅・倍率1366/725≈1.884）を実測し、同じ725幅で書き出された
   新築・リフォームの既存クラス（.svc-hero__title 等）と比率照合して校正した（仕様 = サイト仕様書.md 2026-11-03）
   ========================================================================== */
.svc--realestate {
	--svc-cream: #fff;
	--svc-heading: #1d3570;
	--svc-navy: #1d3570;
	--svc-blue: #3d8ee6;
	--svc-blue-bg: #eaf4fd;
	--svc-sell-bg: #fdf1e8;
}
.svc--realestate .svc-eyebrow--blue { color: var(--svc-blue); }
.svc--realestate .svc-btn--outline-navy { background: #fff; color: var(--svc-navy) !important; border: 2px solid var(--svc-navy); }
.svc--realestate .svc-btn--outline-navy:hover { background: var(--svc-blue-bg); }
.svc--realestate .svc-btn__icon--navy { filter: none; }

/* ---------- ヒーロー（左50%＝淡い青の地に文字・右50%＝写真。波なし） ---------- */
.svc-hero--realestate { display: flex; align-items: stretch; min-height: clamp(460px, 50vw, 600px); background: var(--svc-blue-bg); overflow: hidden; }
/* 2026-11-08 デザイン比率合わせ: 左余白72px・見出し53→約84px・英字35→約28px。position:relativeは右のボタンが右写真にまたがる際、写真(position:relative)の下敷きにならないよう重ね順を上にするため */
.svc-hero--realestate__text { width: 50%; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; padding: 44px 12px 44px max(72px, calc((100vw - var(--sdl-max)) / 2)); position: relative; z-index: 2; }
.svc-hero--realestate__text .svc-eyebrow { font-size: clamp(16px, 2.05vw, 28px); letter-spacing: .14em; display: block; margin-bottom: 14px; }
.svc-hero--realestate__text .svc-hero__title { color: var(--svc-heading); text-shadow: none; font-size: clamp(32px, 6.15vw, 84px); }
/* 2026-11-08 経営者指示: 説明文はタイトルと同じ色、ボタンとの間を広げる（30→46px） */
.svc-hero--realestate__text .svc-hero__lead { color: var(--svc-heading); text-shadow: none; max-width: none; margin-bottom: 46px; }
/* 2026-11-08 デザイン比率合わせ: ボタンを横長にし、2つ目がデザインどおり右の写真にまたがる幅まで伸びるようにする */
.svc-hero--realestate__text .svc-hero__btns { gap: 14px; flex-wrap: nowrap; }
/* 2026-11-08 経営者指示: ボタンの文字をもう少し大きく（15→18px） */
.svc-hero--realestate__text .svc-hero__btns .svc-btn { flex: none; padding: .85em 1.4em; font-size: 18px; white-space: nowrap; min-height: 64px; }
.svc-hero--realestate__text .svc-hero__btns .svc-btn--primary { width: 356px; }
.svc-hero--realestate__text .svc-hero__btns .svc-btn--outline-navy { width: 399px; }
.svc-hero--realestate__photo { width: 50%; position: relative; }
.svc-hero--realestate__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- CONCEPT（左に文字・右に写真） ---------- */
/* 2026-11-08 デザイン比率合わせ: 写真を横長(約1.52:1)に。stretchで本文の高さに引き伸ばされていたのをやめる（本文幅52/42は変えない。見出しの折り返しが崩れるため） */
.svc-concept2__row { display: flex; align-items: center; gap: 48px; }
.svc-concept2__text { flex: 1 1 52%; min-width: 0; }
.svc-concept2__photo { flex: 1 1 42%; aspect-ratio: 633 / 416; border-radius: 16px; overflow: hidden; }
.svc-concept2__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svc-concept2__heading { font-family: "Shippori Mincho", serif; font-weight: 700; color: var(--svc-heading); font-size: clamp(26px, 3.6vw, 48px); line-height: 1.6; margin: 14px 0 20px; }

/* ---------- SERVICE（淡い青のカード3枚・アイコン上） ---------- */
.svc-service2__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 32px; }
.svc-service2__item { background: var(--svc-blue-bg); border-radius: 16px; padding: 32px 26px; text-align: center; }
/* 2026-11-08 デザイン比率合わせ: アイコン・見出しを拡大、本文は左揃えに（大きさは今のまま） */
.svc-service2__icon { width: clamp(60px, 8.93vw, 122px); height: clamp(60px, 8.93vw, 122px); margin: 0 auto 18px; }
.svc-service2__item h3 { font-family: "Shippori Mincho", serif; font-weight: 700; font-size: clamp(22px, 2.34vw, 32px); color: var(--svc-heading); margin: 0 0 10px; }
.svc-service2__item p { font-size: clamp(15px, 1.2vw, 16px); color: var(--svc-sub); line-height: 1.75; margin: 0; text-align: left; }
/* 2026-11-08 経営者指示（不動産）: CONCEPT の本文を小さく（17.8→16px）・文の幅を狭め・右の写真を大きく／SERVICE のカードの説明文を大きく（16→18px） */
.svc--realestate .svc-concept2__text { flex: 1 1 46%; }
.svc--realestate .svc-concept2__photo { flex: 1 1 54%; }
.sdl .svc--realestate .svc-concept2__text p { font-size: clamp(15px, 1.17vw, 16px); }
.svc--realestate .svc-concept2__heading { font-size: clamp(24px, 3.07vw, 42px); }
/* 2026-11-08 経営者指示: CONCEPT の英字を SERVICE などと同じ大きさに（16→33px）。本文の p の指定より強く書く */
.sdl .svc--realestate .svc-concept2__text p.svc-eyebrow { font-size: clamp(15px, 2.42vw, 33px); } /* 文の幅を狭めた分、見出しを 48→42px にして 2 行に収める */
.sdl .svc--realestate .svc-service2__item p { font-size: clamp(15px, 1.32vw, 18px); }

/* ---------- PROPERTY（写真3枚・イメージ表示はプレーンな文字） ---------- */
.svc-property__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 30px; }
.svc-property__photo { position: relative; margin-bottom: 26px; }
/* 2026-11-08 デザイン比率合わせ: 写真を横長(約1.75:1)に・角丸はデザインどおり控えめ・見出し拡大 */
.svc-property__photo img { width: 100%; aspect-ratio: 1.75; object-fit: cover; display: block; border-radius: 2px; }
.svc-img-label--plain { position: absolute; right: 2px; bottom: -22px; background: none; color: var(--svc-sub); padding: 0; font-size: 15px; border-radius: 0; }
.svc-property__item h3 { font-family: "Shippori Mincho", serif; font-weight: 700; font-size: clamp(24px, 2.49vw, 34px); color: var(--svc-heading); margin: 0 0 8px; }
.svc-property__item p { font-size: clamp(15px, 1.2vw, 16px); color: var(--svc-sub); line-height: 1.7; margin: 0; }

/* ---------- SUPPORT（白いカード 2列×3段・青い丸番号＋題を同じ行、本文は下に全幅） ---------- */
.svc-support__grid--numbered { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 36px; }
/* 2026-11-08 デザイン比率合わせ: 番号を左端に固定し見出し・説明を右の列にそろえる（説明の左端が見出しの左端と一致する）。番号の丸も拡大 */
.svc-support__grid--numbered .svc-support__item { background: #fff; border: 1px solid var(--svc-line); border-left: 1px solid var(--svc-line) !important; border-top: 1px solid var(--svc-line) !important; border-radius: 14px; padding: 26px 28px; text-align: left; box-shadow: 0 2px 10px rgba(29, 53, 112, .05); display: flex; align-items: flex-start; gap: 16px; }
.svc-support__num { width: clamp(54px, 5.49vw, 75px); height: clamp(54px, 5.49vw, 75px); flex: none; margin-top: 2px; }
.svc-support__item-body { flex: 1; min-width: 0; }
/* 2026-11-08 経営者指示: SUPPORT のカード見出しはゴシック系に（明朝→Zen Kaku Gothic New） */
.svc-support__item-body h3 { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; font-size: clamp(18px, 2.2vw, 30px); color: var(--svc-heading); margin: 0 0 10px; }
.svc-support__grid--numbered .svc-support__item p { font-size: clamp(15px, 1.3vw, 17px); color: var(--svc-sub); line-height: 1.75; margin: 0; text-align: left; }
/* 2026-11-08 デザイン比率合わせ: 章見出し「物件選びから、お引き渡しまで。」44→約38px（新築は変えない） */
.svc--realestate .svc-head-inline--lg .svc-head-ja { font-size: clamp(24px, 2.78vw, 38px); }
/* 2026-11-08 経営者指示: ご相談いただけること・取り扱いの住まい・土地・ご相談の流れ・よくあるご質問 を「物件選びから、お引き渡しまで。」と同じ大きさに（26→38px） */
.svc--realestate .svc-head-ja { font-size: clamp(24px, 2.78vw, 38px); }
.svc--realestate .svc-head-inline { column-gap: clamp(16px, 2.05vw, 28px); } /* 2026-11-08 経営者指示: 英字（SERVICE 等）の右に余白（16→28px） */

/* ---------- FLOW（購入の流れ／売却の流れ の2つの箱） ---------- */
.svc-flow3__row { display: flex; align-items: stretch; gap: 14px; margin-top: 24px; }
.svc-flow3__box { flex: 1; min-width: 0; border-radius: 20px; padding: 22px 8px; }
.svc-flow3__box--buy { background: var(--svc-blue-bg); }
.svc-flow3__box--sell { background: var(--svc-sell-bg); }
/* 2026-11-08 デザイン比率合わせ: 題30→約40px・丸46→約60px・題の高さを2行ぶん確保して説明の開始位置をそろえる */
.svc-flow3__title { font-family: "Shippori Mincho", serif; font-weight: 700; font-size: clamp(26px, 2.93vw, 40px); margin: 0 0 24px; padding-left: 8px; }
.svc-flow3__box--buy .svc-flow3__title { color: var(--svc-navy); }
.svc-flow3__box--sell .svc-flow3__title { color: var(--svc-orange-dark); }
.svc-flow3__steps { display: flex; align-items: flex-start; gap: 0; }
.svc-flow3__step { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 0; }
.svc-flow3__num { width: clamp(44px, 4.39vw, 60px); height: clamp(44px, 4.39vw, 60px); border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: clamp(15px, 1.5vw, 19px); flex: none; }
.svc-flow3__box--buy .svc-flow3__num { background: var(--svc-blue); }
.svc-flow3__box--sell .svc-flow3__num { background: var(--svc-orange); }
.svc-flow3__step-title { font-family: "Zen Kaku Gothic New", sans-serif; font-weight: 700; font-size: clamp(15px, 1.61vw, 22px); color: var(--svc-heading); line-height: 1.3; min-height: calc(1.3em * 2); display: flex; align-items: center; justify-content: center; }
/* 題は「・」の後ろだけで改行する（デザインどおり。.svc-nb のかたまりの途中では割らない）。
   売却は 6 列で 1 列 約 94px しかなく「価格のご提案」を 1 行に収めるため 15px。購入は差が目立たないよう 18px */
.svc-flow3__step-title { flex-wrap: wrap; align-content: center; font-size: clamp(15px, 1.32vw, 18px); }
.svc-flow3__step-title .svc-nb { display: inline-block; }
.svc-flow3__box--sell .svc-flow3__step-title { font-size: 15px; }
.svc-flow3__step-desc { font-size: 15px; color: var(--svc-sub); line-height: 1.35; }
.svc-flow3__chevron { flex: none; align-self: flex-start; margin-top: 12px; font-weight: 700; font-size: 15px; width: 8px; text-align: center; }
.svc-flow3__box--buy .svc-flow3__chevron { color: var(--svc-blue); }
.svc-flow3__box--sell .svc-flow3__chevron { color: var(--svc-orange); }
/* 2026-11-08 経営者指示（不動産）: 購入の流れ・売却の流れの › を大きく太く（15→28px・番号の丸の高さの真ん中）。
   売却は 6 列で狭いので › の場所の幅は 8px のまま（文字ははみ出して描く）＝題の折り返しを変えない */
.svc--realestate .svc-flow3__chevron { font-size: clamp(20px, 2.05vw, 28px); font-weight: 900; -webkit-text-stroke: 1px currentColor; line-height: 1; margin-top: 0; height: clamp(44px, 4.39vw, 60px); display: flex; align-items: center; justify-content: center; overflow: visible; }
@media (max-width: 860px) { .svc--realestate .svc-flow3__chevron { display: none; } } /* スマホは縦に並ぶので › は出さない（前と同じ） */

/* ---------- 窓・断熱の専門サイトへ（横長の帯） ---------- */
/* 2026-11-08 経営者指示: 題｜説明文 の左右に余白（間隔 20→34px）。→ は線を太くした arrow-right-bold.svg に */
.svc-mado__band { display: flex; align-items: center; gap: 34px; background: var(--svc-blue-bg); border-radius: 16px; padding: 18px 32px; text-decoration: none; }
/* 2026-11-08 デザイン比率合わせ: アイコン拡大・説明文の幅を絞ってデザインどおり2行に収める（文字の大きさは今のまま） */
.svc-mado__icon { width: 60px; height: 60px; flex: none; }
.svc-mado__title { font-family: "Shippori Mincho", serif; font-weight: 700; font-size: clamp(18px, 1.7vw, 23px); color: var(--svc-heading); white-space: nowrap; }
.svc-mado__divider { width: 1px; align-self: stretch; background: var(--svc-line); flex: none; }
.svc-mado__desc { font-size: clamp(15px, 1.15vw, 16px); color: var(--svc-sub); line-height: 1.7; flex: 1 1 450px; max-width: 450px; } /* 460→450: 「について／詳しくは」で改行させる */
.svc-mado__arrow { width: 22px; height: 22px; flex: none; transition: transform .2s; }
.svc-mado__band:hover .svc-mado__arrow { transform: translateX(4px); }

/* ---------- FAQ（丸を拡大。reform と共用の .svc-faq2 なので .svc--realestate を付けて書く。答えは今のまま） ---------- */
.svc--realestate .svc-faq2__q img, .svc--realestate .svc-faq2__a img { width: clamp(32px, 3.73vw, 51px); height: clamp(32px, 3.73vw, 51px); }
/* 2026-11-08 経営者指示: Q と A の間を広げる（12→22px）・Q の丸と文字を縦の中央揃え・Q は明朝で少し小さく（21→19px。長い問いも PC で 1 行） */
.sdl .svc--realestate .svc-faq2__q { align-items: center; margin-bottom: clamp(14px, 1.61vw, 22px); font-family: "Shippori Mincho", serif; font-size: clamp(15px, 1.39vw, 19px); }
.sdl .svc--realestate .svc-faq2__q img { margin-top: 0; }

/* ---------- 相談欄（写真背景・左に白っぽい重ね・紺の明朝・左寄せ） ---------- */
.svc-cta--realestate .svc-cta__scrim { background: linear-gradient(90deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .58) 38%, rgba(255, 255, 255, 0) 62%); }
/* 2026-11-08 デザイン比率合わせ: 見出し28→約56px・ボタンを横長に（幅いっぱい）・アイコン拡大・背景の高さは保つため上下の余白を縮小 */
.svc-cta--realestate { padding: 38px 0; }
.svc-cta--realestate .svc-cta__inner { text-align: left; }
.svc-cta--realestate .svc-cta__lead { max-width: 600px; }
.svc-cta--realestate .svc-cta__title { max-width: 780px; color: var(--svc-heading); text-shadow: none; font-size: clamp(30px, 4.1vw, 56px); }
.svc-cta--realestate .svc-cta__lead { color: var(--svc-heading); text-shadow: none; } /* 2026-11-08 経営者指示: タイトルと同じ色（紺）に */
.sdl .svc-cta--realestate .svc-cta__title { margin-bottom: clamp(18px, 2.05vw, 28px); } /* 2026-11-08 経営者指示: 説明文の上にもう少し余白 */
.svc-cta--realestate .svc-cta__btns { justify-content: flex-start; }
.svc-cta--realestate .svc-cta__btns .svc-btn { min-height: 81px; flex: none; }
.svc-cta--realestate .svc-cta__btns .svc-btn:nth-child(1) { width: 381px; }
.svc-cta--realestate .svc-cta__btns .svc-btn:nth-child(2) { width: 398px; }
.svc-cta--realestate .svc-cta__btns .svc-btn:nth-child(3) { width: 405px; }
.svc-cta--realestate .svc-btn__icon { width: 49px; height: 49px; }
/* 2026-11-08 経営者指示: ボタンの上に余白（32→48px）・ボタンの文字を大きく（16→19px）・LINE は公式アイコンを色そのままで
   （LINE のガイドライン: 色の変更・加工は禁止。高さは PC 20px／スマホ 40px 以上 → 49px） */
.sdl .svc-cta--realestate .svc-cta__lead { margin-bottom: clamp(36px, 3.52vw, 48px); }
.svc-cta--realestate .svc-cta__btns .svc-btn { font-size: 19px; }
.svc--realestate .svc-btn__icon--line { filter: none; }
/* 2026-11-08 経営者指示: リフォームの緑のボタンにも LINE 公式アイコン。色そのまま（フィルターなし）。
   緑の上だと四角が溶けて見えにくい（ガイドラインの「視認性を低下させる背景」）ので、アイコンは加工せず後ろに白い台を敷く */
.svc--reform .svc-btn--line .svc-btn__icon--line { filter: none; background: #fff; border-radius: 10px; padding: 4px; box-sizing: border-box; width: 48px; height: 48px; } /* アイコン本体 40px（スマホの最小の高さ 40px を満たす） */
@media (min-width: 900px) {
	.svc-cta--realestate .svc-cta__btns { flex-wrap: nowrap; }
}

/* ---------- タブレット・スマホ（不動産）：すべて縦に積む ---------- */
@media (max-width: 860px) {
	.svc-hero--realestate { flex-direction: column; min-height: 0; }
	.svc-hero--realestate__text { width: 100%; padding: 44px 20px 32px; }
	.svc-hero--realestate__photo { width: 100%; height: 280px; position: relative; }
	/* 2026-11-08: PCで固定幅にしたボタン・帯の幅をスマホでは元の自動幅に戻す（横のはみ出し防止） */
	.svc-hero--realestate__text .svc-hero__btns { flex-wrap: wrap; }
	.svc-hero--realestate__text .svc-hero__btns .svc-btn { width: auto; flex: initial; }
	.svc-cta--realestate .svc-cta__btns .svc-btn:nth-child(1),
	.svc-cta--realestate .svc-cta__btns .svc-btn:nth-child(2),
	.svc-cta--realestate .svc-cta__btns .svc-btn:nth-child(3) { width: auto; }
	.svc-mado__desc { max-width: none; }
	.svc-concept2__row { flex-direction: column; gap: 28px; }
	.svc-concept2__photo { aspect-ratio: 4 / 3; }
	.svc-service2__grid { grid-template-columns: 1fr; }
	.svc-property__grid { grid-template-columns: 1fr; }
	.svc-support__grid--numbered { grid-template-columns: 1fr; }
	.svc-support__grid--numbered .svc-support__item { border-left: 1px solid var(--svc-line) !important; border-top: 1px solid var(--svc-line) !important; }
	.svc-support__grid--numbered .svc-support__item h3, .svc-support__grid--numbered .svc-support__item p { text-align: left; }
	.svc-flow3__row { flex-direction: column; }
	.svc-flow3__steps { flex-direction: column; gap: 18px; }
	.svc-flow3__step { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 14px; row-gap: 4px; align-items: start; text-align: left; }
	.svc-flow3__num { grid-row: 1 / 3; grid-column: 1; }
	.svc-flow3__step-title { grid-column: 2; grid-row: 1; justify-content: flex-start; min-height: 0; }
	.svc-flow3__step-desc { grid-column: 2; grid-row: 2; }
	.svc-flow3__chevron { display: none; }
	.svc-mado__band { flex-wrap: wrap; gap: 14px 20px; } /* 縦に積むときの間隔は元の大きさに近く */
	.svc-mado__divider { display: none; }
	.svc-cta--realestate .svc-cta__inner { max-width: none; }
}
@media (max-width: 520px) {
	.svc-hero--realestate__text .svc-hero__btns { flex-direction: column; align-items: stretch; }
	.svc-hero--realestate__text .svc-hero__btns .svc-btn { text-align: center; }
}

/* 見出しの明朝: 既存の official.css の「.sdl h1〜h3＝丸ゴシック」の方が強く、明朝が効いていなかった（2026-11-03 メインが修正）。
   大見出し・カードの題だけ明朝にする（仕様書 2-③） */
.sdl .svc .svc-hero__title, .sdl .svc .svc-heading, .sdl .svc .svc-head-ja, .sdl .svc .svc-cta__title, .sdl .svc .svc-cta--box__title,
.sdl .svc .svc-concern__title, .sdl .svc .svc-support__item h3, .sdl .svc .svc-service__item h3, .sdl .svc .svc-feature h3,
.sdl .svc .svc-concept2__heading, .sdl .svc .svc-flow3__title,
.sdl .svc .svc-service2__item h3, .sdl .svc .svc-property__item h3, .sdl .svc .svc-support__item-head h3 { font-family: "Shippori Mincho", serif; }

/* 2026-11-08 経営者指示（不動産）: 上の明朝の指定・既存の .sdl h3 の余白 0 より強く書く
   - SUPPORT（01〜06 のカード）の見出しはゴシック系
   - FLOW の「購入の流れ」「売却の流れ」は小さく（40→32px）、題と図の間を空ける（0→22px） */
.sdl .svc .svc-support__grid--numbered .svc-support__item h3 { font-family: "Zen Kaku Gothic New", sans-serif; }
.sdl .svc .svc-flow3__title { font-size: clamp(22px, 2.34vw, 32px); margin-bottom: clamp(16px, 1.61vw, 22px); }

/* 2026-11-08 スマホの見直し（経営者「スマホレイアウトもチェックできてる？」→ ステージングを 375px で全体確認して見つけた不具合） */
@media (max-width: 860px) {
	/* 見出しを単語の途中で割らず、行の長さをそろえる（「家づく／り。」「視点／で。」のような 1〜2 文字だけの行を出さない） */
	.svc .svc-hero__title, .svc .svc-heading, .svc .svc-head-ja, .svc .svc-cta__title, .svc .svc-cta--box__title, .svc .svc-concept2__heading, .svc .svc-concern__title {
		word-break: auto-phrase; text-wrap: balance;
	}
	/* 説明文も単語の途中で割らない（「育／む。」のような割れ方をしない） */
	.svc .svc-hero__lead, .svc .svc-cta__lead, .svc .svc-cta--box__lead { word-break: auto-phrase; }
	/* 不動産の相談欄: 文字が写真に重なって読みにくい → スマホは白い重ねを全面に */
	.svc-cta--realestate .svc-cta__scrim { background: rgba(255, 255, 255, .86); }
}
@media (max-width: 520px) {
	/* リフォームのヘッダー: 固定幅 352px のボタンが右端まで出ていた → 幅を自動に */
	.svc-hero--split__text .svc-hero__btns .svc-btn--primary, .svc-hero--split__text .svc-hero__btns .svc-btn--white { width: auto; }
	/* リフォームの相談欄: PC 用の固定幅（371px など）がスマホ用の auto に勝って右で切れていた・写真がボタンに重なっていた */
	.svc-cta--box .svc-cta__btns .svc-btn:nth-child(1), .svc-cta--box .svc-cta__btns .svc-btn:nth-child(2), .svc-cta--box .svc-cta__btns .svc-btn:nth-child(3) { width: auto; }
	.svc-cta--box__inner { padding-bottom: 220px; }
	/* 新築の相談欄: 255px の細いボタンが左に寄っていた → 横いっぱい */
	.svc--shinchiku .svc-cta__btns .svc-btn { width: auto; }
	/* リフォームの相談欄:「フォームで問い合わせる」が 2 行に割れていた → アイコンと左右の余白を小さく・1 行に */
	.svc-cta--box .svc-cta__btns .svc-btn { padding-left: 14px; padding-right: 14px; white-space: nowrap; }
	.svc-cta--box .svc-btn__icon { width: 30px; height: 30px; }
	.svc--reform .svc-cta--box .svc-btn--line .svc-btn__icon--line { width: 44px; height: 44px; }
}

/* 2026-11-08 経営者指示（3 ページ・スマホ）: 相談欄のボタンの幅をそろえ、アイコンと文字を左揃えに。
   ボタンは横いっぱい・同じ高さ。アイコンは 48px の枠に入れて文字の始まりをそろえる（LINE は加工せず枠いっぱい＝40px 以上） */
@media (max-width: 520px) {
	.sdl .svc .svc-cta .svc-cta__btns { flex-direction: column; align-items: stretch; width: 100%; }
	.sdl .svc .svc-cta .svc-cta__btns .svc-btn { width: 100%; max-width: none; min-height: 68px; justify-content: flex-start; text-align: left; padding: 8px 22px; gap: 14px; font-size: 17px; white-space: nowrap; box-sizing: border-box; }
	.sdl .svc .svc-cta .svc-cta__btns .svc-btn--outline-navy { padding-left: 20px; } /* 枠線 2px のぶん、アイコンと文字の位置を他のボタンにそろえる */
	.sdl .svc .svc-cta .svc-btn__icon { width: 48px; height: 48px; padding: 4px; box-sizing: border-box; object-fit: contain; flex: none; margin: 0; } /* 見える大きさは 3 つとも 40px（LINE はスマホの最小の高さ 40px ちょうど） */
	.sdl .svc--reform .svc-cta .svc-btn--line .svc-btn__icon--line { padding: 4px; background: #fff; border-radius: 10px; }
	/* リフォーム: 箱の左右の余白のぶんボタンが狭かった → スマホは箱を画面の端まで広げ、他の 2 ページと同じ幅に */
	.sdl .svc--reform .svc-cta--box__inner { margin-left: -20px; margin-right: -20px; border-radius: 0; padding-left: 20px; padding-right: 20px; }
}

/* 2026-11-11 先方依頼 */
/* 不動産の題「住まい探しの、」を「探し」の後ろで割らない */
.svc-hero__title .svc-nb { display: inline-block; white-space: nowrap; }
/* 納品前チェック 3 回目の指摘（実測で確認）: 画面幅 861〜1208px で題の 7 文字が文字欄（50vw − 左右の余白 84px）より広くなり
   「住まい探し／の、」と割れていた。文字の大きさを欄に収まる値までに抑える（1209px 以上はデザインどおり最大 84px のまま） */
@media (min-width: 861px) {
	.svc-hero--realestate__text .svc-hero__title { font-size: clamp(32px, min(6.15vw, calc((50vw - 84px) / 7.15)), 84px); }
}
/* リフォーム: LIXIL リフォームショップへのリンク（施工事例の下・別タブ） */
.sdl .svc .svc-lixil { text-align: center; margin: clamp(14px, 1.46vw, 20px) 0 0; }
.svc-lixil a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: clamp(15px, 1.17vw, 16px); color: var(--svc-heading); text-decoration: underline; text-underline-offset: 4px; }
.svc-lixil a:hover { color: var(--svc-orange); }

/* 納品前チェックの指摘（1024px のリフォームのはみ出し 27px）: 悩み欄と相談欄の箱を左右に広げる負の余白（-23px・-47px）が、
   画面幅 861〜1300px ほどで画面の左右の余白（20px〜）より大きくなり、横にはみ出していた。左右の余白（スクロールバー分 10px を残す）までに抑える */
@media (min-width: 861px) {
	.svc-concern { margin-left: max(-23px, calc((100% - 100vw) / 2 + 10px)); margin-right: max(-23px, calc((100% - 100vw) / 2 + 10px)); }
	.svc-cta--box__inner { margin-left: max(-47px, calc((100% - 100vw) / 2 + 10px)); margin-right: max(-47px, calc((100% - 100vw) / 2 + 10px)); }
}

/* 2026-11-12 納品前チェックの指摘 */
/* 新築の題: スマホ（〜375px）で 2 行目が「私たちらしい／家づくり。」のように割れて 3 行になっていた → 割らず、文字欄（画面幅 − 左右 20px）に収まる大きさまでに抑える */
.svc--shinchiku .svc-hero__title { font-size: clamp(22px, min(max(34px, 5.64vw), calc((100vw - 40px) / 11.3)), 77px); }
/* 不動産の相談ボタン 3 つ（幅 381/398/405px 固定・900px 以上は 1 列）: 900〜1280px で枠に収まらず、3 つ目（LINE）が枠の外に出て切れていた。
   1000px 以上: 1 列のまま、枠に収まるよう幅の割合を保って縮める（枠が広い幅ではデザインどおり）。
   900〜999px: 縮めると「フォームで相談／する」とボタンの中の文字が割れるので、縮めずに 2 段に折り返す */
@media (min-width: 1000px) {
	.svc-cta--realestate .svc-cta__btns .svc-btn { flex: 0 1 auto; min-width: 0; white-space: nowrap; }
}
@media (min-width: 900px) and (max-width: 999px) {
	.svc-cta--realestate .svc-cta__btns { flex-wrap: wrap; }
}