/* =========================================================
   下層ページ（/consulting・/design）の追加デザイン
   色・フォント・余白は style.css の :root の変数をそのまま使う（ここで色を直接書かない）
   style.css のあとに読み込む
   ========================================================= */

/* ---------- 【事業ごとの差し色】（2026-10-11） ----------
   ページごとに --accent-hl（強調の文字・FAQの＋・進め方の番号・After の札・カードの線）を差し替える
   ほかの色とかぶらないように：ブランド＝深い森の緑 #29463D（2026-10-16 から。旧：錆鉄御納戸 #405B55）／東川町の青 #23A0DA（ロゴの横線・トップ）／Yasai＝赤土 #B4553A
   ※ ロゴの Ū の横線は --logo-bar で、下の .page-○○ で事業の色に差し替える（トップ ubaku.jp は東川町の青） */
:root{
  /* 色は NIPPON COLORS（nipponcolors.com）から選ぶ。候補は仮公開の colors/（差し色を選ぶページ）で見比べられる */
  --c-consult:#77428D;   /* Consulting：江戸紫（EDOMURASAKI）。2026-10-12 mashuさん決定 */
  --c-design:#CA7A2C;    /* Design：琥珀（KOHAKU）。2026-10-12 mashuさん決定 */
}
.page-consulting{--accent-hl:var(--c-consult);--logo-bar:var(--c-consult)}   /* ロゴ UBAKŪ の Ū の横線も、その事業の色に（2026-10-16 mashuさん「そのほうが可愛らしい」） */
.page-design{--accent-hl:var(--c-design);--logo-bar:var(--c-design)}
.page-consulting,.page-design{--accent:var(--accent-hl)}   /* ラベル（Consult｜支える・01｜開業前 など）と Strength の番号も事業の色に（2026-10-16。緑のままだと強調の文字と2色が混ざって見えた） */
.page-consulting .cross{--accent:var(--c-design)}   /* 相手の事業へ案内する帯は、相手の色で */
.page-design .cross{--accent:var(--c-consult)}

/* ---------- ページの頭（左上の小さなロゴとメニュー → 事業名と見出し → 写真） ---------- */
.sub-hero{padding-top:36px}
.sub-nav{display:flex;justify-content:space-between;align-items:center;gap:24px;font-size:12px;letter-spacing:.18em}
.sub-nav .sub-logo{width:120px;flex:none}
.sub-nav ul{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 28px;list-style:none;margin:0;padding:0}
.sub-nav .is-current{color:var(--green)}
.crumb{margin-top:56px;font-family:var(--f-en);font-size:12px;letter-spacing:.14em;color:var(--sub)}
.crumb a{border-bottom:1px solid var(--rule-short)}
.sub-title{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 64px;align-items:end;margin-top:20px}
.sub-title .biz-name{font-size:clamp(44px,5.4vw,72px)}
.sub-title .label{display:block;margin-bottom:16px}
.sub-title h1{font-family:var(--f-heading);font-size:clamp(20px,2vw,28px);line-height:1.7}
.sub-lead{margin-top:16px;font-size:15px;line-height:2.1;color:var(--muted)}

/* 写真（上端をトップページと同じ丘のカーブで切り抜く） */
.sub-photo{position:relative;aspect-ratio:2.8 / 1;max-height:520px;margin-top:56px;overflow:hidden;background:var(--ph1);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 54 C 320 92, 620 90, 880 62 C 1080 40, 1280 42, 1440 64 L1440 121 L0 121 Z'/%3E%3C/svg%3E") top / 100% var(--ridge-h) no-repeat,linear-gradient(#000,#000) 0 calc(var(--ridge-h) - 1px) / 100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 54 C 320 92, 620 90, 880 62 C 1080 40, 1280 42, 1440 64 L1440 121 L0 121 Z'/%3E%3C/svg%3E") top / 100% var(--ridge-h) no-repeat,linear-gradient(#000,#000) 0 calc(var(--ridge-h) - 1px) / 100% 100% no-repeat}
.sub-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- セクションの余白（トップページと同じ値） ---------- */
.sub-sec{padding-top:var(--sec-y);padding-bottom:var(--sec-y)}
.sub-sec + .sub-sec{padding-top:0}   /* 同じ地色が続くときは、上の余白を足さない */
.sub-band{background:var(--kraft)}   /* 淡いグレーの面 */
.sub-band .sub-sec{padding-top:var(--sec-y)}
.sec-lead{max-width:760px;margin:-32px 0 56px;font-size:15px;line-height:2.1;color:var(--muted)}

/* ---------- カードを並べる箱（2列・3列） ---------- */
.cards{display:grid;gap:48px 64px}
.cards--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--rule-short);padding-top:28px}
.card .label{display:block}
.card h3{font-family:var(--f-heading);font-size:20px;color:var(--ink)}
.card .body{line-height:2.1}
.card ul{list-style:none;margin:4px 0 0;padding:0;font-size:14px;line-height:1.9;color:var(--muted)}
.card li{padding:8px 0;border-top:1px solid var(--rule-short)}
.card li:first-child{border-top:0}
.card:not(.reveal){transition:transform .45s cubic-bezier(.2,.7,.2,1),border-color .45s ease}
@media (hover:hover){
  .card:hover{transform:translateY(var(--lift));border-top-color:var(--accent-hl)}
}
.price-note{margin-top:40px;font-size:13px;color:var(--sub)}

/* ---------- 進め方（番号つきの横並び） ---------- */
.flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:32px;list-style:none;margin:0;padding:0;counter-reset:step}
.flow li{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--rule-short);padding-top:20px;counter-increment:step}
.flow li::before{content:counter(step,decimal-leading-zero);font-family:var(--f-title);font-weight:300;font-size:28px;line-height:1;color:var(--accent-hl)}
.flow h3{font-family:var(--f-heading);font-size:17px}
.flow p{font-size:13px;line-height:1.9;color:var(--muted)}

/* ---------- 事例（写真＋文章の2列） ---------- */
.case{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:48px}
.case .photo{grid-column:span 6;min-height:420px}
.case-text{grid-column:span 6;display:flex;flex-direction:column;justify-content:center;gap:20px}
.case-text .biz-name{font-size:36px}
.case-text .catch{font-size:20px}
.timeline{list-style:none;margin:0;padding:0;font-size:14px;color:var(--muted)}
.timeline li{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:16px;padding:10px 0;border-top:1px solid var(--rule-short)}
.timeline li span:first-child{font-family:var(--f-en);font-size:12px;letter-spacing:.1em;color:var(--accent);padding-top:3px}

/* ---------- 実績の物件名と説明（Before / After の上） ---------- */
.case-intro{display:flex;flex-direction:column;gap:14px;max-width:760px;margin-bottom:64px}
.case-intro .biz-name{font-size:36px}
#works .minami{margin-top:var(--block-gap);max-width:760px}

/* ---------- Before / After（2枚を左右に並べる） ---------- */
.ba-list{display:flex;flex-direction:column;gap:var(--block-gap)}
.ba{display:flex;flex-direction:column;gap:20px}
.ba-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ba figure{position:relative;margin:0}
.ba .photo{aspect-ratio:3 / 2;padding:0}
.ba--tall .photo{aspect-ratio:2 / 3;max-height:640px}
.ba figcaption{position:absolute;left:12px;top:12px;padding:2px 10px;font-family:var(--f-en);font-size:11px;letter-spacing:.16em;color:var(--ink);background:var(--cream)}
.ba figure:last-child figcaption{color:var(--cream);background:var(--accent-hl)}
.ba-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px}
.ba-head h3{font-family:var(--f-heading);font-size:18px}
.ba-head p{font-size:14px;color:var(--muted)}

/* ---------- もう一方の事業へ案内する帯（Consulting ⇄ Design） ---------- */
.cross{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px 64px;border-top:1px solid var(--rule-long);border-bottom:1px solid var(--rule-long);padding:48px 0}
.cross .label{display:block;margin-bottom:12px}
.cross .biz-name{font-size:36px}
.cross p.body{margin-top:12px;max-width:640px;font-size:15px}
.cross .more{font-size:14px}
.cross-inline{display:inline-block;margin-top:8px}

/* ---------- よくあるご質問（開いて読む） ---------- */
.faq{border-top:1px solid var(--rule-long)}
.faq details{border-bottom:1px solid var(--rule-short)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:24px;padding:24px 0;font-family:var(--f-body);font-weight:400;font-size:16px;letter-spacing:.06em;color:var(--ink)}   /* 小見出しのフォント（Murecho）には「旭」などがなく1字だけ字体が変わるため、本文のゴシックにする */
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"＋";color:var(--accent-hl);flex:none}
.faq details[open] summary::after{content:"－"}
.faq details p{padding:0 0 28px;max-width:820px;font-size:14px;line-height:2.1;color:var(--muted)}

/* ---------- プライバシーポリシー（/privacy。文字を読むページなので幅を絞る） ---------- */
.policy{max-width:820px}
.policy-item{padding:40px 0;border-top:1px solid var(--rule-short)}
.policy-item:first-child{border-top:1px solid var(--rule-long)}
.policy-item h2{font-family:var(--f-body);font-weight:400;font-size:18px;letter-spacing:.08em;color:var(--ink);margin-bottom:20px}
.policy-item p,.policy-item li,.policy-dl dd{font-size:14px;line-height:2.1;color:var(--muted)}
.policy-item p + p,.policy-item ul + p,.policy-dl + p{margin-top:12px}
.policy-item ul{margin:0;padding-left:1.2em}
.policy-dl{display:grid;grid-template-columns:12em minmax(0,1fr);gap:0 24px;margin:0}
.policy-dl dt,.policy-dl dd{padding:10px 0;border-top:1px solid var(--rule-short)}
.policy-dl dt:first-of-type,.policy-dl dd:first-of-type{border-top:0}
.policy-dl dt{font-size:13px;letter-spacing:.06em;color:var(--sub)}
.policy-dl dd{margin:0}
.policy-item a{color:var(--accent);border-bottom:1px solid var(--rule-short)}
.policy-date{margin-top:40px;font-size:13px;color:var(--sub)}
.footer-privacy{color:var(--on-green-sub);border-bottom:1px solid var(--rule-short-on-green)}

/* ---------- タブレット（幅1000px以下） ---------- */
@media (max-width: 1000px){
  .sub-title{grid-template-columns:minmax(0,1fr)}
  .cards--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flow{grid-template-columns:repeat(3,minmax(0,1fr))}
  .case .photo,.case-text{grid-column:span 12}
  .case .photo{min-height:320px}
  .case{gap:32px}
}

/* ---------- スマホ（幅640px以下） ---------- */
@media (max-width: 640px){
  .sub-hero{padding-top:20px}
  .sub-nav .sub-logo{width:96px}
  .sub-nav ul{display:none}   /* スマホは上の帯の「Menu」から開く */
  .sub-title h1 .sp-br{display:inline}   /* 見出しの大事な言葉の前で改行（言葉の途中で折り返さない） */
  .crumb{margin-top:40px}
  .sub-photo{aspect-ratio:4 / 3;margin-top:36px;margin-left:calc(var(--pad-x) * -1);margin-right:calc(var(--pad-x) * -1)}
  .sec-lead{margin:-16px 0 40px}
  .cards--2,.cards--3{grid-template-columns:minmax(0,1fr)}
  .flow{grid-template-columns:minmax(0,1fr);gap:0}
  .flow li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:12px;row-gap:4px;padding:16px 0}
  .flow li::before{grid-row:span 2;font-size:22px}
  .ba-pair{gap:8px}
  .cross{grid-template-columns:minmax(0,1fr);padding:36px 0}
  .cross .biz-name,.case-text .biz-name{font-size:30px}
  .timeline li{grid-template-columns:6.5em minmax(0,1fr);gap:10px}
  .faq summary{font-size:15px;padding:20px 0}
  .policy-dl{grid-template-columns:minmax(0,1fr)}
  .policy-dl dt{padding-bottom:0}
  .policy-dl dd{border-top:0;padding-top:4px}
  .policy-item{padding:32px 0}
}


/* =========================================================
   トップページと同じ構成の下層ページ（/consulting・/design。2026-10-12）
   ヒーロー → 考え方＋強み（横並び）→ 淡いグレーの帯（上端に稜線）→ 白 → 丘の帯 → 白 … → Contact
   部品はトップと同じ（.hero・.cv-grid・.value・.work-grid・.villa・.numbers）。ここではその違いだけを書く
   ========================================================= */

/* ---------- ① ヒーロー：左はロゴの代わりに事業名（写真は1枚・切り替えなし） ---------- */
.nav-place a{border-bottom:1px solid var(--rule-short)}
.hero-biz{flex:none;display:flex;flex-direction:column;gap:12px}
.hero-biz .biz-name{font-size:clamp(52px,6.2vw,96px);line-height:1}
.hero-biz .biz-name span{display:block;font-size:.3em;letter-spacing:.3em;color:var(--sub);margin-bottom:.5em}
.hero-copy .hero-lead{font-size:14px;line-height:2;letter-spacing:.04em;color:var(--muted)}
.panorama .slide img{object-position:50% 60%}

/* ---------- ② 考え方（左）：Concept の図の代わりに、言葉と短い文章 ---------- */
.approach{display:flex;flex-direction:column;gap:24px}
.approach .concept-catch{margin-top:0;font-size:clamp(20px,2vw,28px)}
.approach .body{font-size:15px;line-height:2.1;max-width:560px}
.approach .tags{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:8px 0 0;padding:0}
.approach .tags li{font-size:12px;letter-spacing:.1em;color:var(--accent-hl);border:1px solid currentColor;padding:4px 12px}

/* ---------- ③ 淡いグレーの帯（トップの What We Do と同じ形。事業の色を差す） ---------- */
.dark.light-band{--panel:var(--kraft);--on-green:var(--ink);--on-green-sub:var(--muted);--rule-long-on-green:var(--rule-long);--rule-short-on-green:#E0E3E1;--accent-sand:var(--accent-hl);--rule-hover-on-green:var(--accent-hl)}
.light-band .sec-head h2{color:var(--green)}
.light-band .work-grid--3 h3{font-size:22px}

/* ---------- ⑤ 丘の帯（トップの Numbers と同じ形）：数字の色を事業の色に ---------- */
.numbers .num{color:var(--accent-hl)}
.numbers-grid--steps .num{font-size:32px}
.numbers-grid--steps strong{font-family:var(--f-heading);font-weight:400;font-size:16px;color:var(--ink)}
.numbers + .sub-sec{padding-top:var(--sec-y)}

/* ---------- 料金の目安（項目と金額を左右に） ---------- */
.price-list{margin:4px 0 0;padding:0}
.price-list > div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 0;border-top:1px solid var(--rule-short);font-size:14px}
.price-list > div:first-child{border-top:0}
.price-list dt{color:var(--ink)}
.price-list dt small{display:block;font-size:11px;color:var(--sub);letter-spacing:.04em}
.price-list dd{margin:0;flex:none;font-family:var(--f-title);font-weight:300;font-size:15px;letter-spacing:.04em;color:var(--accent-hl);white-space:nowrap}
.price-list dd.free{font-family:var(--f-body);font-size:13px;letter-spacing:.1em}
.support-note{margin-top:20px;padding:16px 18px;background:var(--kraft);font-size:13px;line-height:1.9;color:var(--muted)}
.support-note strong{font-weight:400;color:var(--ink)}
.notes{margin-top:40px;padding:0;list-style:none;font-size:13px;line-height:1.9;color:var(--sub)}
.notes li::before{content:"※ "}

/* ---------- 事例（トップの Villa と同じ形）の中の流れ ---------- */
.villa-text .timeline{margin-top:4px}

@media (max-width: 640px){
  .hero-biz .biz-name{font-size:52px}
  .price-list > div{font-size:13px}
  .price-list dd{font-size:14px}
}
.sub-sec + .business{padding-top:0}   /* Menu（白）→ Case（白）のように同じ地色が続くときは、上の余白を足さない */


/* =========================================================
   2026-10-16 追加：ヒーローの曲線・写真の切り替え・Before / After
   ========================================================= */

/* ---------- ヒーローの曲線（トップと同じ考え方の丘のカーブ。事業ごとに少しだけ形を変える） ----------
   トップ：左が低く、真ん中で沈み、右で少し上がる
   Design：左から右へ、ゆるやかに一度ふくらんで下がる
   Consulting：左が高く、真ん中でゆったり沈み、右でまた上がる */
.page-design .hero .panorama{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 72 C 260 50, 520 34, 780 52 C 1040 70, 1260 88, 1440 60 L1440 121 L0 121 Z'/%3E%3C/svg%3E") top / 100% var(--ridge-h) no-repeat,linear-gradient(#000,#000) 0 calc(var(--ridge-h) - 1px) / 100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 72 C 260 50, 520 34, 780 52 C 1040 70, 1260 88, 1440 60 L1440 121 L0 121 Z'/%3E%3C/svg%3E") top / 100% var(--ridge-h) no-repeat,linear-gradient(#000,#000) 0 calc(var(--ridge-h) - 1px) / 100% 100% no-repeat}
.page-consulting .hero .panorama{-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 44 C 240 44, 460 86, 720 84 C 980 82, 1200 46, 1440 50 L1440 121 L0 121 Z'/%3E%3C/svg%3E") top / 100% var(--ridge-h) no-repeat,linear-gradient(#000,#000) 0 calc(var(--ridge-h) - 1px) / 100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 44 C 240 44, 460 86, 720 84 C 980 82, 1200 46, 1440 50 L1440 121 L0 121 Z'/%3E%3C/svg%3E") top / 100% var(--ridge-h) no-repeat,linear-gradient(#000,#000) 0 calc(var(--ridge-h) - 1px) / 100% 100% no-repeat}

/* ---------- 写真の切り替えボタン（写真のタイトル）：枚数に合わせて並べる・選んでいる線は事業の色 ---------- */
.slide-tabs--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.slide-tabs--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.page-consulting .slide-tabs button[aria-selected="true"]::before,.page-design .slide-tabs button[aria-selected="true"]::before{background:var(--accent-hl)}
@media (max-width: 640px){
  .slide-tabs--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .slide-tabs--4{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ---------- Before / After の並べ方 ----------
   横長の写真：1組ずつ（左 Before・右 After）
   縦長の写真：2組ずつ横に並べる（1行に Before・After・Before・After）。写真は列の幅いっぱい＝中央がそろう */
.ba--tall .photo{aspect-ratio:2 / 3;max-height:none}
.ba-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--block-gap) 48px}
.ba-row .ba-pair{gap:12px}
.ba-row .ba-head{flex-direction:column;gap:4px}
.ba .photo img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){
  .ba figure:hover .photo img{transform:scale(1.04)}
}
/* 動き：画面に入ると、Before がふわっと現れ（ほかの写真と同じ）、少し遅れて After が左から右へ現れる。After の札は最後に
   （main.js が .js-reveal に .reveal → .is-visible を付ける。「動きを減らす」設定の人は最初から全部見える） */
.ba.reveal .ba-after .photo{clip-path:inset(0 100% 0 0);transition:clip-path 1.3s cubic-bezier(.65,0,.25,1) .55s}
.ba.reveal.is-visible .ba-after .photo{clip-path:inset(0 0 0 0)}
.ba.reveal .ba-after figcaption{opacity:0;transform:translateY(6px);transition:opacity .6s ease 1.5s,transform .6s ease 1.5s}
.ba.reveal.is-visible .ba-after figcaption{opacity:1;transform:none}
@media (max-width: 640px){
  .ba-row{grid-template-columns:minmax(0,1fr)}   /* スマホだけ1組ずつ（縦写真2枚が横に並ぶ）。タブレット以上は4枚並び */
}

/* 2026-10-16：縦写真は細長いので、タブレット以上は4枚並び（2組ずつ）。組と組のあいだの上下の余白をはっきり取る */
.ba-row{row-gap:calc(var(--block-gap) * .8)}
.ba-list > .ba,.ba-row > .ba{margin:0}
.ba-head{margin-bottom:4px}

/* ---------- Consulting：ヒーローの写真が1枚のときは、事業名と見出しを中央そろいにする。写真は下の部分を見せる ---------- */
.hero--center .hero-main{flex-direction:column;align-items:center;text-align:center;gap:28px}
.hero--center .hero-biz{align-items:center}
.hero--center .hero-copy{align-items:center;max-width:720px}
.hero--center .hero-copy h1{white-space:normal}
.page-consulting .hero .panorama .slide img{object-position:50% 100%}
/* 横に並んだ2組の説明文の行数が違っても、写真の上端をそろえる（2組で行の高さを共有する） */
.ba-row{grid-auto-rows:auto}
.ba-row > .ba{display:grid;grid-row:span 2;grid-template-rows:subgrid;row-gap:20px}


/* =========================================================
   2026-10-17 追加：Design の Works を「Space｜空間」と「Brand｜ブランド」の2つに
   ブランドは、ビジュアルアイデンティティ一式を小さなタイル（ロゴ・色・書体・名刺・案内・Web）で見せる
   各ブランドの色は article の style（--b-main＝そのブランドの主な色、--b-sub＝差し色）で渡す
   ========================================================= */

/* ---------- Works の中の小見出し（Space / Brand） ---------- */
.works-sub{display:flex;align-items:baseline;gap:16px;margin:0 0 40px;padding-bottom:14px;border-bottom:1px solid var(--rule-short)}
.works-sub-en{font-family:var(--f-title);font-weight:200;font-size:clamp(28px,3vw,40px);letter-spacing:.05em;color:var(--accent-hl);line-height:1}
.works-sub-ja{font-size:13px;letter-spacing:.16em;color:var(--muted)}
#brand{margin-top:var(--block-gap)}

/* ---------- 1つのブランド ---------- */
.brand{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:48px;margin-bottom:var(--block-gap)}
.brand-head{display:flex;flex-direction:column;gap:16px;align-self:start;position:sticky;top:calc(var(--topbar-h) + 24px)}
.brand-head .biz-name{font-size:40px}
.brand-head .body{line-height:2.1}
.brand-made{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.brand-made li{font-size:11px;letter-spacing:.08em;color:var(--muted);border:1px solid var(--rule-short);padding:3px 10px}
.brand-credit{font-family:var(--f-en);font-size:12px;letter-spacing:.14em;color:var(--accent-hl)}

/* ---------- タイルを並べる箱（6列） ---------- */
.vi-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;align-content:start}
.vi{margin:0;display:flex;flex-direction:column;gap:8px}
.vi--w2{grid-column:span 2}.vi--w3{grid-column:span 3}.vi--w4{grid-column:span 4}.vi--w6{grid-column:span 6}
.vi figcaption{font-family:var(--f-en);font-size:11px;letter-spacing:.1em;color:var(--sub)}
.vi-face{position:relative;flex:1;min-height:180px;display:flex;align-items:center;justify-content:center;padding:28px;background:var(--cream);outline:1px solid var(--rule-short);outline-offset:-1px;overflow:hidden}
.vi-face--main{background:var(--b-main);outline:0}
.vi--logo .vi-face{min-height:220px}

/* ロゴ */
.vi-wordmark{width:min(78%,360px)}
.vi-wordmark--light{--logo-color:#fff;width:min(82%,220px)}
.vi-face--system{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;align-items:end}
.vi-face--system div{display:flex;flex-direction:column;align-items:center;gap:10px}
.vi-face--system .wordmark{width:100%;max-width:150px}
.vi-face--system small{font-family:var(--f-en);font-size:11px;letter-spacing:.1em;color:var(--sub)}
.vi-villa{width:min(78%,200px);height:auto;aspect-ratio:1}
/* UBAKU Villa の金色のロゴ：白いロゴの形を型にして、金色で塗る */
.vi-villa--gold{display:block;background:var(--b-sub);-webkit-mask:url(../img/works/03-logo-white.webp) center / contain no-repeat;mask:url(../img/works/03-logo-white.webp) center / contain no-repeat}

/* カラー */
.vi-face--palette{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:stretch;padding:16px}
.vi-face--palette3{grid-template-columns:minmax(0,1fr)}
.vi-face--palette span{display:flex;flex-direction:column;justify-content:flex-end;min-height:64px;padding:8px;background:var(--c);color:#fff;font-size:11px;letter-spacing:.06em;line-height:1.5}
.vi-face--palette span.is-light{color:var(--ink);outline:1px solid var(--rule-short);outline-offset:-1px}
.vi-face--palette b{font-family:var(--f-en);font-weight:400;letter-spacing:.1em}

/* 書体 */
.vi-face--type{flex-direction:column;align-items:flex-start;justify-content:center;gap:2px}
.vi-face--type p{margin:0;line-height:1.4;color:var(--ink)}
.vi-face--type .t-en{font-family:var(--f-title);font-weight:200;font-size:30px;letter-spacing:.05em}
.vi-face--type .t-jp{font-family:var(--f-heading);font-size:20px;letter-spacing:.08em;margin-top:10px}
.vi-face--type .t-body{font-family:var(--f-body);font-weight:300;font-size:14px;margin-top:10px}
.vi-face--type small{font-family:var(--f-en);font-size:10px;letter-spacing:.1em;color:var(--sub)}

/* 名刺（見本。名前・住所はダミー） */
.vi-face--cards{gap:16px;background:var(--kraft);outline:0;padding:28px 20px}
.bcard{flex:none;width:46%;aspect-ratio:91 / 55;background:#fff;box-shadow:0 6px 18px rgba(0,0,0,.08);padding:5% 6%;display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden;font-size:6px;line-height:1.6;color:var(--ink)}
.bcard small,.bcard b{display:block;font-weight:300}
.bcard--ubaku .wordmark{width:42%}
.bcard--ubaku .bc-tag{font-size:5px;letter-spacing:.06em;color:var(--muted);margin-top:3%}
.bcard--ubaku .bc-bar{display:block;width:8%;height:1px;background:#23A0DA;margin:8% 0 4%}
.bcard--ubaku .bc-name{font-family:var(--f-heading);font-size:11px;letter-spacing:.12em}
.bcard--ubaku .bc-role{font-size:5px;color:var(--muted)}
.bcard--ubaku .bc-info{font-size:4.6px;line-height:1.7;color:var(--muted);margin-top:auto}
.bcard--ubaku-back{align-items:center;justify-content:center;text-align:center;gap:4%}
.bcard--ubaku-back .bc-copy{margin:0;font-family:var(--f-display);font-style:italic;font-size:12px;color:var(--ink)}
.bcard--ubaku-back small{font-size:5px;color:var(--muted)}
.bcard--ubaku-back svg{width:70%;height:auto;margin-top:6%}
.bcard--ubaku-back path{fill:none;stroke:#23A0DA;stroke-width:1.2}
.vi-face--cards-tall{flex-direction:column;padding:20px}
.vi-face--cards-tall .bcard{width:78%}
.bcard--villa-back{background:var(--b-main);align-items:center;justify-content:center}
.bcard--villa-back .vi-villa{width:44%}
.bcard--villa{align-items:center;text-align:center}
.bcard--villa img{width:20%;height:auto;margin-bottom:2%}
.bcard--villa .bc-role{font-size:4.6px;letter-spacing:.2em;color:var(--muted)}
.bcard--villa .bc-name{font-family:var(--f-serif-jp);font-size:10px;letter-spacing:.2em}
.bcard--villa .bc-en{font-family:var(--f-display);font-size:6px;letter-spacing:.14em;color:var(--muted)}
.bcard--villa .bc-info{font-size:4.4px;line-height:1.7;color:var(--muted);margin-top:auto}

/* アイコン */
.vi-face--icon{background:var(--kraft);outline:0}
.vi-face--icon img{width:min(56%,140px);height:auto;border-radius:22%;box-shadow:0 6px 18px rgba(0,0,0,.1)}

/* 写真・画像そのまま（OGP・バナー・アイコン表・レターヘッド・Webサイト） */
.vi-face--photo{padding:0;min-height:0}
.vi-face--photo img{display:block;width:100%;height:100%;object-fit:cover}
.vi-face--paper{background:var(--kraft);outline:0;padding:20px 28px}
.vi-face--paper img{width:auto;height:100%;max-height:360px;object-fit:contain;box-shadow:0 6px 18px rgba(0,0,0,.08)}
.vi--tall .vi-face{min-height:360px}
.vi-face--web{max-height:360px;align-items:flex-start}
.vi-face--web img{object-position:top}
.vi .vi-face img{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
@media (hover:hover){ .vi:hover .vi-face--photo img{transform:scale(1.03)} }

/* ---------- Flow：改修とブランドの2通り ---------- */
.flow-label{display:flex;align-items:baseline;gap:14px;margin:0 0 20px;font-size:13px;letter-spacing:.16em;color:var(--muted)}
.flow-label span{font-family:var(--f-title);font-weight:300;font-size:20px;letter-spacing:.06em;color:var(--accent-hl)}
.numbers-grid--steps + .flow-label{margin-top:56px}

/* ---------- Consulting の料金表：デザインの仕事は Design のページへ ---------- */
.price-list dd.to-design{font-family:var(--f-en);font-size:12px;letter-spacing:.08em}
.price-list dd.to-design a{color:var(--c-design);border-bottom:1px solid currentColor}

@media (max-width: 1000px){
  .brand{grid-template-columns:minmax(0,1fr);gap:32px}
  .brand-head{position:static}
}
@media (max-width: 640px){
  .vi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .vi--w2,.vi--w3{grid-column:span 1}
  .vi--w4,.vi--w6{grid-column:span 2}
  .vi-face{min-height:140px;padding:18px}
  .vi-face--system{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .vi-face--palette{grid-template-columns:repeat(2,minmax(0,1fr))}
  .vi-face--palette3{grid-template-columns:minmax(0,1fr)}
  .vi-face--palette span{min-height:44px}
  .bcard{width:48%}
  .vi-face--cards-tall .bcard{width:88%}
  .vi--tall .vi-face{min-height:240px}
}
/* 横長のバナーは元の比率のまま。設備アイコンの表は切らずに全体を見せる（地はそのブランドの緑） */
.vi-face--banner{flex:none;aspect-ratio:2400 / 878}
.vi-face--contain{background:var(--b-main);outline:0}
.vi-face--photo.vi-face--contain img{object-fit:contain}
.vi--tall .vi-face{height:390px;flex:none}
.vi-face--web{max-height:none}
@media (max-width: 640px){
  .vi--tall{grid-column:span 2}
  .vi--tall .vi-face{height:300px}
}
/* UBAKU Villa のロゴの画像は周りの余白が広いので、タイルの中では大きめに置く */
.vi-face > .vi-villa{width:min(118%,280px);max-width:none}
.vi-face--cards .bcard--villa-back .vi-villa{width:70%}


/* =========================================================
   2026-10-17 追加（2）
   ========================================================= */

/* ---------- 考え方の図（トップの Concept と同じ3つの円）：円の色に事業の色を少し混ぜる ---------- */
.approach .tomoe--sub{max-width:420px;margin:8px auto 0}
.page-consulting .tomoe--sub{--c-top:#D7C6DE;--c-br:#CBD6D2;--c-bl:#E6DBC8}   /* 上＝江戸紫をうすく */
.page-design .tomoe--sub{--c-top:#EBCDAA;--c-br:#CBD6D2;--c-bl:#E6DBC8}      /* 上＝琥珀をうすく */
.tomoe .lbl-jp--center{font-family:var(--f-heading);font-size:26px;letter-spacing:.06em}
.approach{gap:20px}
.approach .body{font-size:14px}

/* ---------- 丘の帯（Numbers・Flow）：下層ページでは白い区切りのあとに来るので、
   トップの昔の形と同じく「丘より上＝白、下＝淡いグレー」にする（トップは今、白の帯） ---------- */
.page-consulting .numbers,.page-design .numbers{background:var(--kraft)}
.page-consulting .numbers .hill-fill,.page-design .numbers .hill-fill{fill:var(--cream)}
/* 丘の帯のあと（Fee・FAQ）の余白を詰める */
.page-consulting .numbers .wrap,.page-design .numbers .wrap{padding-bottom:calc(var(--sec-y) * .6)}
.numbers + .sub-sec{padding-top:calc(var(--sec-y) * .6)}

/* ---------- Design の Before / After：組と組のあいだを詰める ---------- */
.ba-list{gap:64px}
.ba-row{row-gap:56px}
.ba{gap:14px}
#brand{margin-top:96px}

/* ---------- Consulting の Case：写真は横3：縦2 ---------- */
.page-consulting #case .villa .photo{min-height:0;aspect-ratio:3 / 2;align-self:center}

@media (max-width: 640px){
  .ba-list{gap:48px}
  .ba-row{row-gap:44px}
  .approach .tomoe--sub{max-width:320px}
}

/* ---------- ヒーロー案D（2026-10-17 決定）：事業名は小さく上に、見出しを主役に ----------
   見出しは PC では1行（style.css の nowrap）、スマホだけ「、」のあとで改行（h1 の中の br.sp-br） */
.hero-main--d{display:block;padding-top:76px}   /* ロゴとの間をあける（2026-10-25 48px→76px） */
.hero-main--d .hero-copy{max-width:none;gap:0;padding-top:0}
.hero-name{display:inline-block;align-self:flex-start;font-family:var(--f-title);font-weight:300;font-size:15px;letter-spacing:.2em;line-height:1;color:var(--accent-hl);border:1px solid var(--accent-hl);padding:10px 16px 9px}   /* 事業名は事業の色の細い枠で囲み、左上のロゴと見分けがつくように（2026-10-25） */
.hero-name span{color:var(--sub);margin-right:.5em}
.hero-main--d .hero-copy h1{font-size:clamp(28px,3.4vw,48px);line-height:1.5;margin-top:22px}
.hero-main--d .hero-lead{margin-top:14px}
.hero-main--d ~ .panorama{margin-top:8px}
@media (max-width: 640px){
  .hero-main--d{padding-top:44px}
  .hero-name{font-size:13px;padding:8px 12px 7px}
  .hero-main--d .hero-copy h1{font-size:26px;margin-top:16px}
}

/* ---------- 左上のロゴ（2026-10-17）：文字の「UBAKU / Consulting」をやめて UBAKŪ のロゴに。横線はこのページの色（--logo-bar） ---------- */
.nav-logo{display:block;flex:none;width:120px}
@media (max-width: 640px){ .nav-logo{width:96px} }
/* Consulting のヒーロー写真：テーブルの上の本（AALTO）が見える位置で切り抜く */
.page-consulting .hero .panorama .slide img{object-position:50% 30%}   /* アアルトの本が上下の真ん中に来る位置（2026-10-25） */

/* 左上：ロゴの横に名乗り（2026-10-25） */
.nav-brand{display:flex;align-items:center;gap:18px;min-width:0}
.nav-tagline{font-size:11px;letter-spacing:.1em;line-height:1.6;color:var(--sub);white-space:nowrap}
@media (max-width: 1000px){.nav-tagline{white-space:normal}}
@media (max-width: 640px){.nav-brand{flex-direction:column;align-items:flex-start;gap:6px}.nav-tagline{font-size:10px}.nav-tagline .sp-br{display:inline}}

/* メニューの下の「ご相談・お見積り」（2026-10-25：金額は載せない） */
.menu-cta{margin-top:32px;font-size:14px;line-height:2;color:var(--muted)}
.menu-cta .more{margin-left:12px}
/* スマホ：Before / After の札を小さく（2026-10-25） */
@media (max-width: 640px){.ba figcaption{left:8px;top:8px;padding:1px 7px;font-size:9px;letter-spacing:.12em}.ba{gap:12px}}

/* ---------- 考え方の図（Consulting＝合流する2本の線、Design＝重なる3つの層。2026-10-25）：画面に入ると線が描かれる ---------- */
.sub-diagram{max-width:460px;margin:28px 0 8px}
.sub-diagram svg{display:block;width:100%;height:auto;overflow:visible}
.sub-diagram .d-en{font-family:var(--f-title);font-weight:300;font-size:11px;letter-spacing:.1em;fill:var(--sub)}
.sub-diagram .d-jp{font-family:var(--f-heading);font-size:15px;letter-spacing:.06em;fill:var(--ink)}
.sub-diagram .d-accent{fill:var(--accent-hl)}
.sub-diagram .draw{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1)}
.sub-diagram .draw--2{transition-delay:.3s}
.sub-diagram .draw--late{transition-delay:.9s}
.sub-diagram .d-fade{opacity:0;transition:opacity .8s ease 1.6s}
.is-visible .sub-diagram .draw,.sub-diagram.is-visible .draw,.no-js .sub-diagram .draw{stroke-dashoffset:0}
.is-visible .sub-diagram .d-fade,.sub-diagram.is-visible .d-fade{opacity:1}   /* 図そのものが画面に入ったときにも描く（Design は外側の箱が display:contents で、画面に入ったかを測れないため。2026-10-25） */
@media (prefers-reduced-motion: reduce){.sub-diagram .draw{stroke-dashoffset:0;transition:none}.sub-diagram .d-fade{opacity:1;transition:none}}

/* ---------- Design の強み：建物から Web までの1本の線（2026-10-25） ---------- */
.reach{margin-top:8px}
.reach-line{display:flex;justify-content:space-between;list-style:none;margin:0;padding:0;position:relative;font-size:13px;letter-spacing:.06em;color:var(--ink)}
.reach-line::before{content:"";position:absolute;left:8%;right:8%;top:6px;height:1px;background:var(--accent-hl)}
.reach-line li{position:relative;flex:1;padding-top:24px;text-align:center}
.reach-line li::before{content:"";position:absolute;left:50%;top:0;width:13px;height:13px;margin-left:-6.5px;border-radius:50%;background:#fff;border:1px solid var(--accent-hl)}
.reach-cap{margin:28px 0 0;text-align:center;font-family:var(--f-heading);font-size:18px;letter-spacing:.1em;color:var(--accent-hl)}
.reach-notes{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:32px;font-size:13px;line-height:2;color:var(--muted)}
.reach-notes b{display:block;font-weight:400;font-size:15px;color:var(--ink);margin-bottom:4px}
@media (max-width: 640px){.reach-line{flex-wrap:wrap;row-gap:18px}.reach-line li{flex:0 0 33.3%}.reach-line::before{display:none}.reach-notes{grid-template-columns:1fr}.reach-cap{font-size:16px}.reach-cap .sp-br{display:inline}}

/* Consulting の考え方：強みの欄をなくしたので、1列にして「言葉と文章（左）」「図（右）」を並べる（2026-10-25） */
.cv-grid--single{grid-template-columns:minmax(0,1fr)}
.cv-grid--single .approach{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"catch diagram" "body diagram";column-gap:96px;align-items:center}
.cv-grid--single .concept-catch{grid-area:catch;align-self:end}
.cv-grid--single .sub-diagram{grid-area:diagram;margin:0;justify-self:center;width:100%}
.cv-grid--single .approach > .body{grid-area:body;align-self:start}
@media (max-width: 1000px){.cv-grid--single .approach{grid-template-columns:minmax(0,1fr);grid-template-areas:"catch" "diagram" "body"}.cv-grid--single .sub-diagram{margin:24px 0}}
/* Design：考え方の下に、建物から Web までの1本の線（強み）を横いっぱいに（2026-10-25） */
.cv-grid--single .reach{margin-top:clamp(56px,6vw,96px);padding-top:clamp(40px,4vw,56px);border-top:1px solid var(--rule-short)}
.cv-grid--single .reach-notes{max-width:880px;margin-left:auto;margin-right:auto}
/* 名刺：本物の名刺のデータ（表・裏）を2枚並べる（2026-10-25） */
.vi-face--card-img{display:flex;align-items:center;justify-content:center;gap:6%;padding:8% 10%}
.vi-face--card-img img{width:38%;height:auto;box-shadow:0 10px 24px rgba(43,36,28,.14)}
.vi-face--card-img img.is-wide{width:46%}   /* 宿泊のご案内のカードは少し大きい */
.vi-face--shot img{box-shadow:none}
.vi-face--top img{object-position:50% 0}   /* メールの画面は上から見せる */

/* ---------- Design の Flow：番号の丸を1本の線でつなぐ形に（2026-10-25「普通だね」を受けて）。Space と Brand の2本の線 ---------- */
#flow .numbers-grid--steps{position:relative;gap:24px}
#flow .numbers-grid--steps::before{content:"";position:absolute;left:28px;right:calc(20% - 28px);top:28px;height:1px;background:var(--accent-hl);opacity:.55}   /* 丸と丸をつなぐ線 */
#flow .numbers-grid--steps li{border-top:0;padding-top:0;gap:8px;position:relative}
#flow .numbers-grid--steps .num{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;border:1px solid var(--accent-hl);background:var(--cream);color:var(--accent-hl);font-size:18px;margin-bottom:10px}
#flow .numbers-grid--steps li:last-child .num{background:var(--accent-hl);color:#fff}   /* 最後（仕上がり）は塗りつぶし */
#flow .numbers-grid--steps strong{font-family:var(--f-heading);font-weight:400;font-size:17px;color:var(--ink)}
@media (hover:hover){#flow .numbers-grid--steps li:hover .num{background:var(--accent-hl);color:#fff}}
@media (max-width: 640px){
  #flow .numbers-grid--steps{grid-template-columns:minmax(0,1fr);gap:0}
  #flow .numbers-grid--steps::before{left:22px;right:auto;top:22px;bottom:22px;width:1px;height:auto}   /* スマホは縦の線 */
  #flow .numbers-grid--steps li{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:16px;row-gap:2px;padding:0 0 18px}
  #flow .numbers-grid--steps .num{width:44px;height:44px;font-size:15px;grid-row:span 2;margin:0}
}

/* ---------- Design の Concept のバランス（2026-10-25 作り直し）----------
   左の列＝文字（言葉 → 説明文 → 使う人の目線で／数字まで見る）、右の列＝絵（3つの層の図 → 建物から Web までの1本の線）。
   左右の重さをそろえるため、.approach と .reach の箱をなくして（display:contents）、中身を1つの格子に並べ直す */
.page-design .cv-grid--single .cv-concept{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(48px,7vw,112px);
  grid-template-areas:"head head" "catch diagram" "body diagram" "notes line" "notes cap";align-items:start}
.page-design .cv-concept > .sec-head{grid-area:head}
.page-design .cv-grid--single .approach,.page-design .cv-grid--single .reach{display:contents}
.page-design .cv-concept .concept-catch{grid-area:catch;align-self:end;margin:0}
.page-design .cv-concept .approach > .body{grid-area:body;margin-top:24px}
.page-design .cv-concept .sub-diagram{grid-area:diagram;align-self:center;justify-self:center;max-width:480px;margin:0}
.page-design .cv-concept .reach-line{grid-area:line;margin-top:64px}
.page-design .cv-concept .reach-cap{grid-area:cap;margin-top:24px}
.page-design .cv-concept .reach-notes{grid-area:notes;grid-template-columns:minmax(0,1fr);gap:20px;margin:56px 0 0;padding-top:28px;border-top:1px solid var(--rule-short);max-width:none}
@media (max-width: 1000px){
  .page-design .cv-grid--single .cv-concept{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "catch" "diagram" "body" "line" "cap" "notes"}
  .page-design .cv-concept .sub-diagram{margin:32px 0}
  .page-design .cv-concept .reach-line{margin-top:48px}
  .page-design .cv-concept .reach-notes{margin-top:36px}
}
/* 2026-10-25：宇莫別荘の新しいロゴは横長なので、正方形に押し込まない（縦横比を保つ） */
.vi-face > img.vi-villa{aspect-ratio:auto;height:auto;width:min(80%,260px);object-fit:contain}
.vi-villa--gold{aspect-ratio:1381 / 918;width:min(80%,260px)}
/* メッセージカード・宿泊のご案内（1枚ずつ） */
.vi-face--one img,.vi-face--one img.is-wide{width:auto;max-width:72%;max-height:86%}
/* サイトの画面：切り抜かず、画面全体を見せる */
.vi-face--shot:not(.vi-face--top){aspect-ratio:1440 / 900;flex:none;min-height:0;height:auto}
.vi-face--shot:not(.vi-face--top) img{object-fit:contain}
/* 宇莫別荘の Webサイト：横いっぱいに（上から見せる） */
.vi--wide-web .vi-face{height:440px;min-height:0;flex:none}
.vi--wide-web .vi-face img{object-fit:cover;object-position:50% 0}
@media (max-width: 640px){.vi--wide-web .vi-face{height:240px}}

/* 2026-10-25：Flow の Space と Brand のあいだを少し広く */
#flow .numbers-grid--steps + .flow-label{margin-top:88px}
/* 2026-10-25：UBAKU Letter の画面は、横の ubaku.jp の画面と同じ高さに（画像は高さに関係させず、上から見せる） */
.vi-face--shot.vi-face--top{flex:1;min-height:0;height:auto;position:relative}
.vi-face--shot.vi-face--top img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0}
/* 2026-10-25：宇莫別荘のロゴ（白地・緑の地・金）は3つとも同じ大きさで、少し小さく */
.vi-face > img.vi-villa,.vi-face > .vi-villa.vi-villa--gold{width:min(60%,190px);max-width:none;height:auto;aspect-ratio:1381 / 918}
/* 2026-10-26：スマホでも「建物 → 内装 → 家具 → サイン → 印刷物 → Web」は折り返さず1本の線のまま（文字を小さく） */
@media (max-width: 640px){
  .reach-line{flex-wrap:nowrap;font-size:11px;letter-spacing:0}
  .reach-line li{flex:1;padding-top:20px}
  .reach-line li::before{width:11px;height:11px;margin-left:-5.5px}
  .reach-line::before{display:block;top:5px}
}

/* ---------- スマホのブランド実績（2026-10-26）：6つに分けた格子で、半分（vi-m3）・3分の1（vi-m2）・横いっぱい（vi-m6）を決める ---------- */
@media (max-width: 640px){
  .vi-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
  .vi.vi-m2{grid-column:span 2}
  .vi.vi-m3{grid-column:span 3}
  .vi.vi-m6{grid-column:span 6}
  .vi.vi-m-last{order:1}   /* サイトの画面は最後に横いっぱい（アイコンの見本とメールの画面を横に並べるため） */
  .vi-face--system{gap:28px 18px;padding:28px 20px}   /* 事業ごとの4つは、あいだを広く */
  .vi-face--shot.vi-face--top,.vi-face--phone{flex:none;aspect-ratio:3 / 4;height:auto}   /* メールの画面とアイコンの見本は同じ形で並べる */
  .vi-face > img.vi-villa,.vi-face > .vi-villa.vi-villa--gold{width:78%}
  .vi-face--card-img{padding:8% 6%}
  .vi-face--card-img:not(.vi-face--one),.vi-face--icon{aspect-ratio:1;flex:none;height:auto;min-height:0}   /* 名刺とアイコンは同じ大きさの正方形で横並び */
}

/* ---------- スマホのホーム画面の見本（iPhone のアプリが並ぶ画面。2026-10-26） ---------- */
.vi-face--phone{background:#EEF1F2}
.phone{position:relative;width:min(56%,150px);aspect-ratio:9 / 19;border-radius:20px;border:5px solid #1D1D1F;background:linear-gradient(160deg,#BFD4E0,#E9EFF2 60%,#D9E4E9);padding:18% 9% 0;box-shadow:0 10px 24px rgba(43,36,28,.16);overflow:hidden}
.phone-apps,.phone-dock{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12% 14%}
.phone i,.phone-ubaku img{display:block;aspect-ratio:1;border-radius:24%;background:var(--a)}
.phone-ubaku{display:flex;flex-direction:column;align-items:center;gap:2px}
.phone-ubaku img{width:100%;height:auto;background:#fff}
.phone-ubaku small{font-size:5px;letter-spacing:0;color:#1D1D1F;line-height:1}
.phone-dock{position:absolute;left:6%;right:6%;bottom:4%;padding:5% 5%;border-radius:12px;background:rgba(255,255,255,.45)}

/* ---------- Flow（スマホ）：01〜05 の丸の間隔をそろえる ---------- */
@media (max-width: 640px){ #flow .numbers-grid--steps{grid-auto-rows:1fr} }

/* ---------- 線を減らす（2026-10-26：「全体的に線が多い」。Design・Consulting 共通） ---------- */
/* メニュー：項目のあいだの線をなくし、文字の大きさをそろえる */
.price-list > div{border-top:0;padding:6px 0;font-size:15px}
.price-list dt small{font-size:12px;margin-top:2px}
.card li{border-top:0;padding:4px 0}
/* よくある質問：質問ごとの線をやめ、質問の頭に「Q」。開いた答えは淡い面の上に */
.faq{border-top:0}
.faq details{border-bottom:0;margin-bottom:8px;background:var(--kraft)}   /* 白い地の上に、淡いグレーの面 */
.faq summary{padding:20px 22px}
.faq summary::before{content:"Q";font-family:var(--f-title);font-weight:300;color:var(--accent-hl);margin-right:14px;flex:none}
.faq summary{justify-content:flex-start}
.faq summary::after{margin-left:auto}
.faq details p{padding:0 22px 22px 50px}
/* ほかの事業への案内：上下の線はやめ、リンクの下線は文字の長さだけに */
.cross{border-top:0;border-bottom:0;background:var(--kraft);padding:48px clamp(24px,4vw,56px)}
.cross .more{justify-self:start}
@media (max-width: 640px){.faq summary{padding:16px 16px}.faq details p{padding:0 16px 18px 40px}.cross{padding:32px 20px}}
/* ---------- スマホの調整（2026-10-26 精査） ---------- */
.flow-label,.card h3,.case-text h3{text-wrap:balance}
.timeline li{border-top:0;padding:8px 0}   /* 事例の流れも線をなくす */
@media (max-width: 640px){
  .vi--logo .vi-face,.vi-face--main,.vi-m2 .vi-face,.vi-m3 > .vi-face:not(.vi-face--top):not(.vi-face--phone):not(.vi-face--one){min-height:0;aspect-ratio:1;flex:none;height:auto}   /* ロゴの枠は縦に長くせず正方形に */
  .sub-diagram .d-en{font-size:15px}   /* 図はスマホで縮むので、図の中の文字は大きめに */
  .sub-diagram .d-jp{font-size:21px}
  .sub-diagram{margin:28px auto}
}

/* ---------- 2026-10-26 ---------- */
@media (max-width: 640px){
  .hero .panorama{aspect-ratio:4 / 5}   /* 下層ページのスマホの写真は決まった形（縦に少し長い） */
  .nav-brand .nav-logo{margin-top:1px}
  .vi-face--shot.vi-face--top{aspect-ratio:4 / 3}   /* メールの画面は横いっぱいで、上の部分を見せる */
}
/* 「建物 → … → Web」の線：画面に入ると左から右へ伸びる */
.reach-line::before{transform:scaleX(0);transform-origin:left center;transition:transform 1.6s cubic-bezier(.4,0,.2,1) .2s}
.reach-line.is-visible::before,.no-js .reach-line::before{transform:scaleX(1)}
.reach-line li::before{transition:background .3s ease}
@media (prefers-reduced-motion: reduce){.reach-line::before{transform:none;transition:none}}
/* 事業ごとの4つのロゴは少し小さく、あいだを広く */
.vi-face--system{gap:36px 40px;padding:40px 48px}
.vi-face--system .wordmark{max-width:118px}
@media (max-width: 640px){.vi-face--system{gap:30px 26px;padding:32px 26px}.vi-face--system .wordmark{max-width:96px}}
/* よくある質問と、その下の案内の面は、もっと薄いグレーに */
.faq details,.cross{background:#F9F9F8}
/* ---------- 2026-10-26 ---------- */
.menu-cta{margin-top:28px}
/* メッセージカードは実物どおり、宿泊のご案内より小さく */
.vi-face--one img[src*="03-card-front"]{max-width:40%;max-height:66%}
.vi-face--one img[src*="03-card-welcome"]{max-width:76%;max-height:88%}
/* Consulting：事例と Numbers のあいだを詰める */
.page-consulting #case{padding-bottom:calc(var(--sec-y) * .45)}
@media (max-width: 640px){
  /* Design のスマホのヒーロー写真：見せたいもの（窓・ダイニング／ベッドと窓）が左右の真ん中に来るように */
  .page-design #slide-0 img{object-position:45% 50%}   /* 照明が左右の真ん中に来る位置（写真の幅の約47%の所にある） */
  .page-design #slide-2 img{object-position:51% 50%}   /* 窓が左右の真ん中に来る位置（写真の幅の約51%の所にある） */
  .contact-lead-title .sp-br{display:inline}   /* 「建物のこと、ブランドのこと、／お聞かせください。」の位置で改行 */
}