@charset "UTF-8";
/* =============================================================
   category.css — カテゴリトップ共通（renovation.html / reform.html）
   構成：ワイヤー wf_riso.html・wf_komarigoto_v4.html ／ トーンはTOP を踏襲
   共通部品（追従SNS・事例カード・約束・声・イベント・CTA）は common.css
   ※新しいカテゴリトップを作るときは、このCSSをそのまま読み込む
   ============================================================= */

/* ---- 1 ページタイトル帯（FV・全面動画） -------------------- */
.page-hero{position:relative;height:100svh;min-height:560px;overflow:hidden;background:var(--ink)}
.page-hero__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,18,16,.46) 0%,rgba(20,18,16,.30) 45%,rgba(20,18,16,.46) 100%)}
.page-hero__inner{position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;
  padding-inline:var(--gut);padding-top:64px;max-width:var(--maxw);margin-inline:auto}
/* ブランド行（英字＋タグライン・小さく従に） */
.page-hero__brand{font-family:var(--en);color:rgba(255,255,255,.9);
  font-size:clamp(12px,1.3vw,14px);letter-spacing:.18em;line-height:1.6;
  text-shadow:0 1px 12px rgba(0,0,0,.4)}
.page-hero__title{color:#fff;font-family:var(--sans);font-weight:500;
  font-size:clamp(24px,3.6vw,44px);line-height:1.5;letter-spacing:.08em;margin-top:18px;
  text-shadow:0 2px 24px rgba(0,0,0,.45)}
.page-hero__lead{color:rgba(255,255,255,.92);font-size:clamp(15px,1.6vw,17px);
  line-height:2;letter-spacing:.08em;margin-top:20px;font-weight:300;
  text-shadow:0 1px 16px rgba(0,0,0,.4)}

/* ---- 1a FV（全面動画）の左寄せ・明朝バリエーション ---------- */
/* 書体はサイト既定の Noto Sans JP（明朝は使わない＝全社の厳守事項） */
.page-hero--left .page-hero__inner{align-items:flex-start;text-align:left}
/* 15px / 300 */
.page-hero--left .page-hero__brand{font-size:clamp(12px,1.3vw,15px);letter-spacing:.16em;font-weight:300}
/* 40px / 300 / 行間70px(=1.75) */
.page-hero--left .page-hero__title{font-size:clamp(24px,3.2vw,40px);font-weight:300;
  line-height:1.75;letter-spacing:.08em;margin-top:clamp(16px,1.8vw,26px)}
/* 20px / 300 */
.page-hero--left .page-hero__lead{font-size:clamp(15px,1.7vw,20px);font-weight:300;
  line-height:1.9;letter-spacing:.1em;margin-top:clamp(16px,1.8vw,26px)}

/* ---- 1b FV：見出し → 左上角丸の動画（明るい版・core-am 参考） ---- */
/* 上に見出しブロック、その下に「左は本文位置・右は画面端まで抜ける」メディア。
   背景が明るいので、このページの <header> には solid を付けること。 */
.page-hero--split{height:auto;min-height:0;overflow:visible;background:var(--bg) var(--grain) repeat;background-size:var(--grain-size);
  padding-top:clamp(132px,13vw,208px)}
.page-hero--split::after{display:none}
/* キャッチコピー（左）と円形バッジ（右）を横並びに */
.phead{display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,4vw,64px)}
.phead__text{max-width:1000px}
.phead__cat{display:block;font-size:clamp(13px,1.4vw,15px);letter-spacing:.18em;
  color:var(--sub);line-height:1.6}
/* /2026-08-29：**全ページ共通**でヒーローの見出しを細く小さく。
   見出し 68px/500/行間91.8px → **50px/300/行間80px(=1.6)**、タグ 24px/400 → **20px/300**。
   ⚠ 行間は px ではなく比率（1.6）で入れる。font-size が clamp で可変なので、
     px で固定すると狭い画面（30px）で行がぶつかる。50px×1.6＝80px で指示どおり。 */
.phead__title{font-family:var(--sans);font-weight:300;color:var(--ink);
  font-size:clamp(30px,5.2vw,50px);line-height:1.6;letter-spacing:.06em;
  margin-top:clamp(14px,1.6vw,22px)}
.phead__tag{font-size:clamp(15px,1.9vw,20px);line-height:1.8;letter-spacing:.08em;
  color:var(--ink);font-weight:300;margin-top:clamp(16px,1.8vw,26px)}

/* ヒーローのリード文（修正 2026-08-17・空間・デザインリフォームトップ）。
   もとは1行の `.phead__tag` だったところに、指示どおり長い本文が入る。
   ⚠ タグ用の字送り（letter-spacing .08em）のままだと読みづらいので本文用にほどく。
   ⚠ 器（.phead__text）は max-width:1000px。行が長すぎると読めないので 42em で止める。 */
.phead__lead{margin-top:clamp(18px,2vw,28px);max-width:42em;
  font-size:clamp(14.5px,1.15vw,16px);line-height:2.05;letter-spacing:.04em;color:var(--sub)}
@media (max-width:768px){ .phead__lead{font-size:14.5px;line-height:1.95;margin-top:16px} }/* メディア：左は本文と同じ位置、右は画面端まで。左上だけ大きく角丸 */
.phero__media{position:relative;overflow:hidden;
  margin:clamp(40px,5vw,72px) 0 0 var(--gut);
  height:clamp(300px,42vw,620px);background:var(--ink);
  border-top-left-radius:clamp(28px,4.5vw,72px)}
.phero__media video,
.phero__media img{width:100%;height:100%;object-fit:cover}

/* 円形の回転バッジ（見出しの英訳）。明るい地の上なので墨文字 */
.circle-badge{position:relative;flex:none;pointer-events:none;
  width:clamp(168px,18vw,258px);aspect-ratio:1;
  display:grid;place-items:center}
.circle-badge svg{position:absolute;inset:0;width:100%;height:100%;
  animation:circle-badge-spin 22s linear infinite}
/* 2026-08-29：円形バッジの文字は**細字**に（全ページ共通）。600 → 400。
   ⚠⚠ **300 と書いてはいけない。** バッジは `--en`＝Google Sans で、
      Google Fonts が配信しているのは **400／500／700 だけ**（300 は存在しない）。
      300 を指定してもブラウザは合成細字を作らず 400 で描くので、書いた値と出る値がずれる。
      `document.fonts.check('300 13px "Google Sans"')` は true を返すので**当てにならない**。
      配信の実体は css2 API を叩いて確かめる。**Google Sans の最細は 400。**
      （`--sans`＝Noto Sans JP には 300 があるので `.phead__title` の 300 は効いている） */
.circle-badge text{fill:var(--ink);font-family:var(--en);
  font-size:13px;font-weight:400;letter-spacing:.02em}
.circle-badge__mark{position:relative;color:var(--accent2);
  font-size:clamp(16px,1.6vw,22px);line-height:1}
@keyframes circle-badge-spin{from{rotate:0deg}to{rotate:360deg}}
@media (prefers-reduced-motion:reduce){.circle-badge svg{animation:none}}

/* ---- 2 叶えたい暮らしから選ぶ（全幅・縦長タイル5連） ------- */
/* 画面幅いっぱいに5枚を隙間なく連ねる。ラベルは写真の下端に白抜き */
.choose__strip{
  width:100vw;margin-inline:calc(50% - 50vw);
  display:grid;grid-template-columns:repeat(5,1fr);gap:0;
  margin-top:clamp(40px,5vw,64px);
}
.choosecard{
  position:relative;display:block;overflow:hidden;
  height:clamp(420px,44vw,760px);background:var(--ink);
}
.choosecard img{width:100%;height:100%;object-fit:cover}
/* 下端を沈ませて文字を読ませる（hover拡大は使わない＝共通方針） */
.choosecard::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,18,16,.10) 0%,rgba(20,18,16,0) 30%,rgba(20,18,16,.38) 64%,rgba(20,18,16,.76) 100%);
  transition:background .4s ease}
.choosecard:hover::after{
  background:linear-gradient(180deg,rgba(20,18,16,.16) 0%,rgba(20,18,16,.06) 34%,rgba(20,18,16,.40) 66%,rgba(20,18,16,.74) 100%)}
.choosecard__label{position:absolute;z-index:2;left:clamp(18px,1.6vw,28px);right:clamp(14px,1.4vw,24px);
  bottom:clamp(22px,2vw,34px);display:flex;flex-direction:column;gap:8px}
.choosecard__en{font-family:var(--en);font-size:clamp(12px,.9vw,13px);letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.82);font-weight:600;line-height:1.4;
  text-shadow:0 1px 8px rgba(0,0,0,.4)}
.choosecard__ja{font-size:clamp(15px,1.25vw,20px);font-weight:500;line-height:1.6;
  letter-spacing:.08em;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.45)}
.choosecard__ja::after{content:"";display:block;width:0;height:1px;background:var(--accent);
  margin-top:10px;transition:width .4s cubic-bezier(.2,.7,.2,1)}
.choosecard:hover .choosecard__ja::after{width:36px}

/* ---- 横一列の見出し（英字 ─ 罫 ─ リード） ------------------ */
.sec-head--row{display:flex;align-items:center;gap:clamp(16px,2.4vw,36px);
  margin-bottom:clamp(44px,6vw,80px)}
.sec-head--row__en{font-family:var(--en);font-size:clamp(20px,2.2vw,28px);
  font-weight:400;letter-spacing:.06em;color:var(--ink);line-height:1;flex:none}
.sec-head--row__rule{flex:none;width:clamp(48px,8vw,132px);height:1px;background:var(--ink);opacity:.5}
.sec-head--row__lead{font-size:clamp(15px,1.6vw,16px);line-height:1.9;
  letter-spacing:.06em;color:var(--ink)}

/* ---- メニューカード（写真 → 見出し＋丸矢印） --------------- */
/* 4枚を 2×2 で。写真が大きく出るぶん余白も広めに取る */
.qcards{display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(34px,4.5vw,72px) clamp(26px,3.4vw,56px)}
.qcard{display:block}
.qcard__media{aspect-ratio:16/6;overflow:hidden;   /* 高さを従来の60%に */
  border-radius:var(--radius)}   /* 写真は角丸に */
.qcard__media img{width:100%;height:100%;object-fit:cover}
.qcard__foot{display:flex;align-items:center;justify-content:space-between;
  gap:16px;margin-top:clamp(18px,1.8vw,24px)}
/* 18px / 300（クラス共通） */
.qcard__title{font-size:clamp(15px,1.6vw,18px);font-weight:300;line-height:1.6;letter-spacing:.06em}
.qcard:hover .qcard__title{color:var(--accent)}
.qcard__arw{flex:none;width:clamp(34px,3vw,40px);aspect-ratio:1;border-radius:50%;
  background:#4A4A4A;color:#fff;display:grid;place-items:center;font-size:13px;
  transition:background .3s ease}
.qcard:hover .qcard__arw{background:var(--accent)}

/* ---- リード＋写真（コンセプト型） ---------------------------------------- */
/* 組版は common.css の .concept__overlap（TOPのコンセプトと共通）。
   このページは白背景なので、重なる白ボックスだけ paper 側に振って分離させる */
.intro .concept__box{background:var(--bg)}
/* このページのリード文だけ本文色を濃く（TOPの .concept__lead は従来どおり） */
.intro .concept__lead{color:var(--ink)}
/* 白ボックス内の導線＝縦積みの2ボタン（テキスト左・矢印右） */
.intro__links{display:flex;flex-direction:column;gap:12px;max-width:360px}
.intro__btn{width:100%;justify-content:space-between;padding:16px 22px;
  font-size:14px;letter-spacing:.06em}
.intro__btn .btn__arrow{transition:transform .3s ease}
.intro__btn:hover .btn__arrow{transform:translateX(4px)}

/* ---- メニューカード（写真→細い罫→見出し＋矢印→説明） ----- */
/* lives-group の ABOUT US 型。カード面は敷かず、写真と文字だけで組む */
.mcards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.6vw,40px)}
.mcard{display:block}
/* 写真の左に英字ラベルを縦書きで添える（参考デザイン） */
.mcard__top{display:flex;flex-direction:row-reverse;align-items:flex-start;
  gap:clamp(10px,1vw,16px);margin-bottom:clamp(16px,1.6vw,22px)}
.mcard__top .mcard__cat{writing-mode:vertical-rl;text-orientation:mixed;
  flex:none;letter-spacing:.22em;line-height:1;padding-top:2px}
.mcard__top .mcard__media{flex:1;min-width:0}
.mcard__media{aspect-ratio:3/4;overflow:hidden}
.mcard__media img{width:100%;height:100%;object-fit:cover}
.mcard--washroom .mcard__media img{object-position:0 50%}
.mcard__cat{display:block;font-family:var(--en);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);font-weight:600;line-height:1.4}
/* 見出し行：右端に矢印（上罫線は削除） */
.mcard__head{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:0;margin-top:10px;padding-top:14px}
.mcard__title{font-size:clamp(17px,1.7vw,21px);font-weight:500;letter-spacing:.06em;line-height:1.5}
.mcard__arw{flex:none;font-size:15px;color:var(--ink);transition:transform .3s ease,color .3s ease}
.mcard:hover .mcard__title{color:var(--accent)}
.mcard:hover .mcard__arw{color:var(--accent);transform:translateX(5px)}
.mcard__desc{font-size:15px;color:var(--ink);line-height:1.95;margin-top:12px}

/* ---- その他・まとめて（カードの下の別セクション） ---------- */
/* 上の choose と地続きに見せるため、このセクションだけ上余白を0にする */
.choose-other{padding-top:0}
.other{position:relative;
  display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(28px,4vw,64px);align-items:center;
  background:var(--white);padding:clamp(24px,2.6vw,40px)}
/* 白い面から上に吹き出す▲（上のカード群とつながって見せる） */
.other::before{content:"";position:absolute;left:50%;top:0;
  transform:translate(-50%,-100%);
  width:clamp(30px,3.2vw,46px);height:clamp(15px,1.6vw,23px);
  background:var(--white);
  clip-path:polygon(50% 0, 100% 100%, 0 100%)}
.other__media{aspect-ratio:4/3;overflow:hidden}
.other__media img{width:100%;height:100%;object-fit:cover}
.other__title{font-size:clamp(20px,2.4vw,30px);font-weight:500;line-height:1.6;
  letter-spacing:.06em;margin:12px 0 18px}
.other__desc{font-size:15px;color:var(--ink);line-height:2.1;margin-bottom:clamp(24px,3vw,34px)}

/* ---- お客様の声：Googleクチコミカード ---------------------- */
/* 面（白背景）と外線は持たせず、区切りは各カードの右罫のみ。
   共有の .quote には触らない */
.voice__sub{font-size:clamp(15px,1.6vw,17px);color:var(--ink);letter-spacing:.08em;margin-top:14px}
.vcards{display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  margin-top:clamp(40px,5vw,72px)}
.vcard{display:flex;flex-direction:column;background:transparent;border:0;border-radius:0;
  border-right:1px solid var(--line);
  padding:clamp(4px,.6vw,10px) clamp(22px,2.6vw,44px)}
.vcard:first-child{padding-left:0}
.vcard__head{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.vcard__g{width:30px;height:30px;border-radius:50%;flex:none;
  display:grid;place-items:center;background:var(--white);border:1px solid var(--line);
  font-family:var(--en);font-size:14px;font-weight:600;color:var(--ink);line-height:1}
.vcard__stars{color:var(--accent);font-size:14px;letter-spacing:.14em}
/* 本文（いまはダミー。data-dummy="voice-body" が実データ差し替えの目印） */
.vcard__body{flex:1;font-size:15px;line-height:2.05;color:var(--ink);letter-spacing:.04em}
.vcard__name{margin-top:22px;font-size:15px;color:var(--sub);letter-spacing:.06em;line-height:1.8}

/* ---- 事例の絞り込みタブ ------------------------------------
   ※ .worktabs / .worktab / [data-tabpanel][hidden] は
      トップページでも使うため common.css に移設した（2026-09-07）。 */
/* 洗面タイル＝写真の左に洗面化粧台があるので左寄せで見せる */
.choosecard--washroom img{object-position:8% 50%}

/* ---- 流れ（9ステップ・自動スライド） ----------------------- */
/* 全幅の横スクロール枠。右端フェード（.is-end で消す）＋送りボタン＋進捗バー */
.flow__scroller{position:relative;width:100vw;margin-inline:calc(50% - 50vw)}
.flow__scroller::after{content:"";position:absolute;z-index:2;pointer-events:none;
  top:0;bottom:40px;right:0;width:clamp(56px,8vw,140px);
  background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.96));
  opacity:1;transition:opacity .3s ease}
.flow__scroller.is-end::after{opacity:0}
.flow__nav{position:absolute;z-index:3;top:calc(50% - 30px);transform:translateY(-50%);
  width:clamp(40px,3.4vw,52px);aspect-ratio:1;border-radius:50%;
  border:1px solid var(--ink);background:rgba(255,255,255,.92);color:var(--ink);
  display:grid;place-items:center;font-size:15px;line-height:1;
  transition:background .3s ease,color .3s ease,border-color .3s ease,opacity .3s ease}
.flow__nav:hover{background:var(--accent);border-color:var(--accent);color:#fff}
.flow__nav--prev{left:clamp(10px,1.4vw,24px)}
.flow__nav--next{right:clamp(10px,1.4vw,24px)}
.flow__scroller.is-start .flow__nav--prev,
.flow__scroller.is-end .flow__nav--next{opacity:0;pointer-events:none}

/* スクロール本体。scroll-snap は"引っかかり"の原因になるので使わない */
.flow__grid{
  list-style:none;display:flex;align-items:stretch;
  gap:clamp(16px,1.8vw,28px);
  padding:4px var(--gut) 0;
  overflow-x:auto;overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none}
.flow__grid::-webkit-scrollbar{display:none}
/* 横スクロールでカードが現れるたびに reveal の上下アニメが再生され、
   「つっかかる／上下に動く」ように見えるため、この中では無効化する */
.flow__grid .flowstep.reveal{opacity:1;transform:none;transition:none}

/* PCは3カラムで上から順に並べる（2026-08-17）。SPは横スライドのまま。
   ⚠ .flow__scroller は part.css の別の節（部位別のラインナップ）でも使い回している。
      必ず .flow（この節）に絞ってから上書きすること。全体に当てると向こうが崩れる。
   ⚠ .flow__grid は <ol> の flex。grid に変えると flex-* は無視されるので
      .flowstep の flex 指定はそのままでよい。 */
@media (min-width:769px){
  .flow .flow__scroller{width:auto;margin-inline:0}
  .flow .flow__scroller::after{content:none}   /* 右端のフェード＝「続きがある」合図は不要 */
  .flow .flow__nav,
  .flow .flow__bar{display:none}               /* 送りボタンと進捗バーも不要 */
  .flow .flow__grid{display:grid;grid-template-columns:repeat(3,1fr);
    overflow:visible;padding-inline:0;
    gap:clamp(22px,2.4vw,34px)}
}

/* カード下の進捗バー＝横スクロールできることの合図 */
.flow__bar{position:relative;height:3px;border-radius:999px;background:var(--line);
  margin:clamp(22px,2.4vw,32px) var(--gut) 0}
.flow__bar span{position:absolute;inset:0 auto 0 0;width:30%;
  border-radius:999px;background:var(--accent);transition:transform .15s linear}

/* ステップカード：写真の左に番号＋見出しを縦書き、説明は写真の下 */
.flowstep{position:relative;background:var(--white);border:1px solid var(--line);
  flex:0 0 clamp(280px,26vw,362px);
  display:flex;flex-direction:column;gap:clamp(16px,1.6vw,22px);
  padding:clamp(20px,1.8vw,26px)}
/* 縦書き見出しの長さで写真の高さが変わらないよう、
   stretch をやめて写真自体に固定の高さを持たせる */
.flowstep__top{display:flex;align-items:flex-start;gap:clamp(10px,1vw,16px)}
.flowstep__media{flex:1;min-width:0;height:clamp(158px,14vw,196px);
  overflow:hidden;border-radius:var(--radius)}
.flowstep__media img{width:100%;height:100%;object-fit:cover}
/* 縦書きなので交差軸＝水平方向。center で STEP・番号・見出しの中心を揃える */
.flowstep__label{flex:none;display:flex;align-items:center;gap:10px;
  writing-mode:vertical-rl;text-orientation:mixed}
.flowstep__en{font-family:var(--en);font-size:12px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--sub);line-height:1}
.flowstep__no{font-family:var(--num);font-size:clamp(22px,2.2vw,28px);font-weight:300;
  line-height:1;color:var(--accent2);letter-spacing:.06em}
.flowstep__title{font-size:clamp(15px,1.5vw,17px);font-weight:500;line-height:1.6;
  letter-spacing:.1em;margin:0}
/* 本文色を濃く（.flowstep__desc 共通・全ページ） */
.flowstep__desc{flex:1;font-size:15px;color:var(--ink);line-height:2}

/* ---- 角丸（カテゴリトップ固有の要素） ---------------------- */
.mcard__media{border-radius:var(--radius)}
.other{border-radius:var(--radius-lg)}
.other__media{border-radius:var(--radius)}
.flowstep{border-radius:var(--radius)}
.worktab{border-radius:999px}

/* ---- お客様の声：一覧への写真バナー（reform専用の新クラス） ----
   参考：aristo1994 の VOICE ブロックの"装置"のみ採用。
   共有部品（.voice / .vcards / .center-more）には手を入れない。 */
.voice-banner{position:relative;display:block;overflow:hidden;
  border-radius:var(--radius-lg);   /* イベント帯（.event__band）と同じ角丸に揃える */
  margin-top:clamp(40px,5vw,72px);
  min-height:clamp(320px,32vw,460px);
  background:var(--ink);isolation:isolate}
.voice-banner__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
/* 暗幕：白文字のコントラスト比4.5:1以上を確保する */
.voice-banner::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(18,16,14,.62),rgba(18,16,14,.68))}
.voice-banner__inner{position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  min-height:inherit;padding:clamp(48px,6vw,88px) var(--gut)}
.voice-banner__en{font-family:var(--en);font-size:16px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:#fff;line-height:1.4}
.voice-banner__title{color:#fff;font-family:var(--sans);font-weight:700;
  font-size:clamp(28px,4.4vw,53px);line-height:1.4;letter-spacing:.06em;margin-top:clamp(12px,1.4vw,20px)}
.voice-banner__sub{color:#fff;font-weight:700;font-size:clamp(17px,2.1vw,26px);
  line-height:1.7;letter-spacing:.08em;margin-top:clamp(10px,1.2vw,16px)}
.voice-banner__desc{color:#fff;font-weight:500;font-size:16px;line-height:2;
  letter-spacing:.06em;margin-top:clamp(14px,1.6vw,22px);max-width:44em}
/* 白の丸枠＋矢印 */
.voice-banner__arw{margin-top:clamp(22px,2.6vw,34px);
  width:clamp(48px,4vw,58px);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(255,255,255,.9);color:#fff;
  display:grid;place-items:center;font-size:16px;
  transition:background .3s ease,color .3s ease,border-color .3s ease}
.voice-banner:hover .voice-banner__arw{background:#fff;color:var(--ink);border-color:#fff}
.voice-banner:hover{color:#fff}
@media (max-width:600px){
  .voice-banner__en{font-size:14px}
  .voice-banner__desc{font-size:15px;line-height:1.95}
}

/* ---- レスポンシブ ----------------------------------------- */
@media (max-width:1180px){
  /* リノベの全幅タイル帯：5列は窮屈なので3列＋2列に折り返す */
  .choose__strip{grid-template-columns:repeat(3,1fr)}
  .choosecard{height:clamp(320px,38vw,460px)}
}
@media (max-width:880px){
  .mcards{grid-template-columns:1fr 1fr}
  .vcards{grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,40px) 0}
  .vcard:nth-child(odd){padding-left:0}
  .other{grid-template-columns:1fr;gap:24px}
}
@media (max-width:768px){
  .circle-badge{width:clamp(132px,19.5vw,168px)}
  .intro__links{max-width:none}
  .choose__strip{grid-template-columns:repeat(2,1fr)}
  .choosecard{height:clamp(240px,42vw,340px)}
  .page-hero__inner{padding-top:48px}
}
@media (max-width:600px){
  /* /くるくる回るバッジをキャッチの右に配置＋現状の80%サイズに */
  .phead{flex-direction:row;align-items:flex-end;gap:14px}
  .circle-badge{width:clamp(72px,21.6vw,99px)}
  /* //ヒーローの文字サイズをスマホで縮小 */
  .phead__title{font-size:23px;line-height:40px} /* 行間40／24→23 */
  /* スマホでは文節の切れ目で折る。長い見出しが「い。」だけの行を作るのを防ぐ
     （2026-09-05 renovation の新しい h1 で発生）。1〜2行で収まる見出しには影響しない。 */
  .phead__title{word-break:auto-phrase}
  .phead__tag{font-size:15px}
  .phead__cat{font-size:12px}
  /* /splitヒーローの高さ（TOP用 .page-hero{height:88svh} の誤適用を打ち消す）→約570px */
  .page-hero.page-hero--split{height:auto;padding-top:90px;margin-bottom:60px} /* ヒーロー下に60px */
  .page-hero--split .phero__media{height:303px;margin-top:24px}
  /* ヒーローのテキスト列を広く（固定300pxは狭幅機で溢れるため利用可能幅いっぱいに） */
  .phead__text{flex:1;min-width:0;max-width:none}
  /* カテゴリ intro のコンセプト見出しを縮小 */
  .intro .concept__title{font-size:26px;line-height:44px}
  /* 場所選びカードの説明 14→13・行間24 */
  .mcard__desc{font-size:15px;line-height:24px}
  /* 場所選びカードの間隔 20→25 */
  .mcards{gap:25px}
  /* 声バナーの見出し 28→26 */
  .voice-banner__title{font-size:26px}
  /* 「その他」ボタンを下のボタンと幅統一（縦積み時） */
  .choose-other .btn-row .btn{width:100%}
}
@media (max-width:560px){
  .qcards{grid-template-columns:1fr}
  .sec-head--row{flex-wrap:wrap;gap:12px}
  .sec-head--row__lead{flex:1 0 100%}
  .choose__strip{grid-template-columns:1fr}
  .choosecard{height:clamp(220px,58vw,300px)}
  /* 流れは全幅で1段横スクロール（カード幅だけ詰める）。送りボタンは出さない */
  .flowstep{flex-basis:78vw}
  .flow__nav{display:none}
  /* 声のカードは縦積みなので右罫ではなく下罫で区切る */
  .vcards{grid-template-columns:1fr;gap:clamp(30px,7vw,44px)}
  .vcard{padding-inline:0;border-right:0;
    border-bottom:1px solid var(--line);padding-bottom:clamp(26px,6vw,34px)}
  .vcard:last-child{border-bottom:0}
  .page-hero{height:88svh}
}

/* ============================================================
   装飾イラスト（reform専用 / ）
   .rf-* 要素は reform.html にのみ存在＝category.css 共有でも renovation には出ない。
   ============================================================ */
.rf-ill-host{position:relative}
.rf-ill-host>.wrap{position:relative;z-index:3}          /* 本文を装飾より前面に */
.rf-ill{position:absolute;z-index:2;pointer-events:none;line-height:0}
.rf-ill img,.rf-ill svg{display:block;width:100%;height:auto}

/* 位置・サイズ（PC）。ピン位置に合わせて配置 */
.rf-ill--kitchen{left:clamp(16px,6vw,150px);top:clamp(96px,12vw,176px);width:clamp(64px,7vw,102px)}   /* 左 */
.rf-ill--stool  {right:clamp(12px,5vw,140px);top:clamp(64px,8vw,132px);width:clamp(64px,7vw,102px)}   /* 右・見出し脇 */
.rf-ill--woman  {right:clamp(10px,4vw,88px);top:clamp(20px,4vw,52px);width:clamp(116px,15vw,180px)}     /* 右 */
.rf-ill--light  {left:clamp(20px,9vw,150px);top:0;width:clamp(72px,9vw,114px)}                          /* 境界から吊り下げ・左 */

/* Flow のアイブロウをノートのイラストに置換 */
.rf-note-eyebrow{display:block;margin:0 auto clamp(10px,1.4vw,16px)}
.rf-note-eyebrow img{height:clamp(44px,5.2vw,62px);width:auto;display:block;margin:0 auto}

/* アニメーション（モーション許容時のみ） */
@media (prefers-reduced-motion:no-preference){
  .rf-ill--kitchen{transform-origin:50% 92%;animation:rf-sway   3.4s ease-in-out infinite}  /* 左右にゆれる */
  .rf-ill--stool  {transform-origin:50% 96%;animation:rf-swaysm 3.8s ease-in-out infinite}  /* 左右にゆれる */
  .rf-ill--light  {transform-origin:50% 5%; animation:rf-pend   4.2s ease-in-out infinite}  /* 吊り下げの振り子 */
  .rf-dog{transform-box:fill-box;transform-origin:50% 100%;animation:rf-dogtrot 1.15s ease-in-out infinite} /* 犬だけ動く */
}
@keyframes rf-sway  {0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes rf-swaysm{0%,100%{transform:rotate(-2.2deg)}50%{transform:rotate(2.6deg)}}
@keyframes rf-pend  {0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes rf-dogtrot{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(-3deg)}}

/* タブレット以下は少し縮小 */
@media (max-width:1024px){
  .rf-ill--woman{width:clamp(100px,13vw,148px)}
  .rf-ill--stool{width:clamp(58px,7vw,88px)}
  .rf-ill--kitchen{width:clamp(58px,7vw,88px)}
}
/* SP：側面の装飾イラストは本文と干渉するため非表示（ノートは中央インラインなので残す） */
@media (max-width:768px){
  .rf-ill--kitchen,.rf-ill--stool,.rf-ill--woman,.rf-ill--light{display:none}
}

/* ============================================================
   施工事例 一覧/詳細（works.html / works-detail.html）
   ============================================================ */
/* 下層ページ先頭：固定ヘッダーのクリアランス（先頭sectionの上余白を上書き） */
.works-index{padding-top:clamp(116px,13vw,180px)}

/* パンくず */
.crumb{font-size:12.5px;color:var(--sub);letter-spacing:.06em;line-height:1.9;
  display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;margin-bottom:clamp(28px,4vw,52px)}
.crumb a{color:var(--sub)}
.crumb a:hover{color:var(--accent)}
.crumb .sep{opacity:.5}
.crumb .cur{color:var(--ink)}

/* ---- 一覧：サイドバー＋本体 ---- */
/* ---- 施工事例一覧の絞り込み（.wfbar）--------------------------------
   2026-08-28：左サイドバーをやめ、ヒーロー下の横並びにする。
   見出し＋丸いチップを行で並べる。
   ⚠ 高さが出るので**開閉式**。PCは開いた状態・SPは閉じた状態で始める（js/main.js）。
   ⚠ **立体的な箱にしない**（2026-08-28）。座布団・影・角丸・左の色罫は使わず、
      上下の細い罫1本ずつだけで区切る。囲みは「薄い線1本」がうちの作法。
   ⚠ 旧 .works-layout（248pxのサイドバー＋本体の2カラム）は廃止した。works.html 専用だった。 */
.wfbar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-bottom:clamp(26px,3.2vw,40px)}
/* 見出し行＝開閉ボタン。ボタンらしい塗りは持たせず、行そのものを押せるようにする。 */
.wfbar__head{display:flex;align-items:center;gap:clamp(10px,1.4vw,20px);width:100%;
  background:none;border:0;border-radius:0;cursor:pointer;text-align:left;
  padding:clamp(16px,1.8vw,22px) 0;color:var(--ink)}
.wfbar__ttl{font-size:clamp(15px,1.5vw,17px);font-weight:500;letter-spacing:.08em;flex:none}
.wfbar__hint{font-size:13px;color:var(--sub);letter-spacing:.06em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.wfbar__head .wf-toggle__icon{margin-left:auto}
/* 行ごとに「見出し｜チップ」。⚠ 見出し列は固定幅にして、行頭のチップを縦にそろえる。 */
.wfgrp{display:grid;grid-template-columns:clamp(88px,8vw,118px) minmax(0,1fr);
  gap:clamp(12px,1.4vw,20px);align-items:baseline;
  padding:clamp(14px,1.5vw,18px) 0;border-top:1px solid var(--line)}
.wfgrp h5{font-size:14px;font-weight:500;letter-spacing:.08em;color:var(--ink)}
.wfgrp__chips{display:flex;flex-wrap:wrap;gap:8px}
/* .filter-chip は margin で間を作っているので、flex の gap と二重にならないよう殺す */
.wfgrp__chips .filter-chip{margin:0}
.wfbar__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;
  gap:clamp(12px,1.6vw,20px);padding:clamp(16px,1.8vw,22px) 0;border-top:1px solid var(--line)}
.wfbar__clear{background:none;border:0;padding:0;cursor:pointer;
  font-size:13px;color:var(--sub);letter-spacing:.06em;
  border-bottom:1px solid var(--line);line-height:1.9}
.wfbar__clear:hover{color:var(--accent);border-bottom-color:var(--accent)}
@media (max-width:600px){
  /* 見出しを上に、チップを下に積む（見出し列を固定すると、狭い幅ではチップが2文字で折り返す） */
  .wfgrp{grid-template-columns:1fr;gap:10px}
  .wfbar__actions{justify-content:stretch}
  .wfbar__actions .btn{flex:1;justify-content:center}
}
.filter-chip{display:inline-block;font-size:12.5px;letter-spacing:.04em;color:var(--ink);
  background:var(--white);border:1px solid var(--line);border-radius:999px;
  padding:7px 14px;margin:0 6px 8px 0;cursor:pointer;transition:border-color .2s,color .2s,background .2s}
.filter-chip:hover,.filter-chip.is-on{border-color:var(--accent);color:var(--accent)}
.filter-chip.is-on{background:rgba(217,122,38,.06)}

/* 件数・並び替えバー */
.works-bar{display:flex;align-items:center;gap:14px;margin-bottom:clamp(22px,2.6vw,32px);
  padding-bottom:16px;border-bottom:1px solid var(--line)}
.works-bar__count{font-size:14px;letter-spacing:.06em}
.works-bar__count b{color:var(--accent);font-family:var(--num);font-size:19px;margin:0 3px}
.works-bar__sort{margin-left:auto;font-size:13px;color:var(--sub);
  border:1px solid var(--line);border-radius:999px;padding:8px 16px;cursor:pointer}
.works-bar__sort:hover{border-color:var(--accent);color:var(--accent)}

/* カードの完成年（.workcard 流用に追記） */
.workcard__year{font-family:var(--en);font-size:12px;color:var(--sub);margin-top:6px;letter-spacing:.1em}

/* ページャ */
.pager{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:clamp(40px,5vw,64px)}
.pager a,.pager span{min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:50%;font-family:var(--num);font-size:14px;color:var(--ink);transition:.2s}
.pager a:hover{border-color:var(--accent);color:var(--accent)}
.pager .on{background:var(--accent);border-color:var(--accent);color:var(--white)}
.pager .dots{border:0;color:var(--sub)}

/* ---- 詳細 ---- */
.detail-head{margin-bottom:clamp(30px,4vw,48px)}
.detail-head .sec-title{margin-top:6px}
.detail-head__cat{font-size:15px;color:var(--sub);letter-spacing:.08em;margin-top:16px}

/* Before/After */
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,24px)}
/* ⚠ wpautop が図版の間に空の <p> を差し込む（本文がHTML直書きのため）。
      グリッドの升目をひとつ食って、下に余白が残る。ここには <p> は要らない。 */
.ba-grid > p{display:none}
.ba{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--line);margin:0}
.ba img{width:100%;height:100%;object-fit:cover;display:block}
.ba__label{position:absolute;top:16px;left:16px;z-index:2;font-family:var(--en);
  font-size:12px;letter-spacing:.2em;color:var(--white);background:rgba(42,42,42,.72);padding:6px 14px}
.ba-note{font-size:15px;color:var(--sub);margin-top:14px;letter-spacing:.04em}

/* 仕様テーブル＋物語 */
.spec-split{display:grid;grid-template-columns:minmax(300px,400px) 1fr;gap:clamp(32px,5vw,72px);align-items:start}
.spec-table{width:100%;border-collapse:collapse;font-size:15px}
.spec-table th,.spec-table td{text-align:left;padding:15px 4px;border-bottom:1px solid var(--line);
  letter-spacing:.05em;line-height:1.7;vertical-align:top}
.spec-table th{width:34%;color:var(--sub);font-weight:500;white-space:nowrap}
.story__title{font-size:clamp(19px,2.2vw,24px);font-weight:500;letter-spacing:.06em;margin-bottom:18px}
.story__body{font-size:15px;line-height:2.05;letter-spacing:.05em}
.story__note{display:block;font-size:15px;color:var(--sub);margin-top:16px}

/* 担当スタッフ */
.staff-card{display:flex;gap:24px;align-items:center;max-width:600px;
  background:var(--white);border:1px solid var(--line);padding:clamp(22px,3vw,32px)}
.staff-card__av{flex:none;width:88px;height:88px;border-radius:50%;overflow:hidden;background:var(--line)}
.staff-card__av img{width:100%;height:100%;object-fit:cover}
.staff-card__name{font-size:17px;font-weight:500;letter-spacing:.06em}
.staff-card__role{font-size:15px;color:var(--sub);margin-top:5px;letter-spacing:.05em}
.staff-card__msg{font-size:15px;line-height:1.9;letter-spacing:.04em;margin-top:12px}
.staff-card .btn{margin-top:16px}

/* 関連事例 4列
   ⚠ `1fr` は `minmax(auto,1fr)`＝**列が min-content より小さくならない**。
     `.infocard__en`（"Channel 02" は英字で分割できず142px）のような子がいると
     列がそこまで膨らみ、器からはみ出す（contact.html が375pxで scrollWidth 428 だった）。
     必ず `minmax(0,1fr)` で下限を切る。 */
.cards4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,26px)}
.cards4 .workcard__title{font-size:15px}

/* ---- レスポンシブ ---- */
@media (max-width:900px){
  .spec-split{grid-template-columns:1fr;gap:clamp(28px,6vw,40px)}
  .cards4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  /* SPでも BEFORE / AFTER は2カラムのまま（2026-08-17）。
     1カラムに落とすと1枚が画面いっぱいになり、見比べるのに縦に長くなりすぎる。
     並べたまま間隔と角丸だけ詰めてコンパクトに見せる。 */
  .ba-grid{grid-template-columns:1fr 1fr;gap:8px}
  .ba__label{top:8px;left:8px;font-size:12px;letter-spacing:.14em;padding:4px 8px}
  .cards4{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .staff-card{flex-direction:column;text-align:center;align-items:center}
}

/* リノベ事例一覧：種類で絞り込み（横並び・サイドバー無し / works-renovation.html） */
.type-filter{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin-bottom:clamp(26px,3.4vw,40px);padding-bottom:18px;border-bottom:1px solid var(--line)}
.type-filter__label{font-size:13px;font-weight:500;letter-spacing:.08em;margin-right:4px}
.type-filter .filter-chip{margin:0}
.type-filter__count{margin-left:auto;font-size:13px;color:var(--sub);letter-spacing:.06em;white-space:nowrap}
.type-filter__count b{color:var(--accent);font-family:var(--num);font-size:17px;margin:0 3px}
@media (max-width:560px){
  .type-filter__count{margin-left:0;width:100%;order:9}
}

/* ============================================================
   事例詳細：カテゴリタグ・価格表示（リフォーム=大 / リノベ=控えめ）
   ============================================================ */
.detail-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.detail-tags .tag{margin:0;font-size:12px;padding:5px 12px}

/* リフォーム詳細：費用を大きく見せる */
.price-hero{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(24px,5vw,64px);
  background:var(--white);border:1px solid var(--line);
  padding:clamp(26px,3.4vw,44px) clamp(24px,4vw,56px)}
.price-hero__main{display:flex;flex-direction:column;gap:6px}
.price-hero__label{font-family:var(--en);font-size:12px;letter-spacing:.16em;color:var(--sub);text-transform:uppercase}
.price-hero__amount{font-weight:500;color:var(--accent);letter-spacing:.01em;line-height:1;font-size:clamp(42px,7.4vw,74px)}
.price-hero__amount .u{font-size:.4em;margin-left:5px;color:var(--ink);font-weight:500}
.price-hero__note{font-size:15px;color:var(--sub);letter-spacing:.04em}
.price-hero__meta{display:flex;flex-wrap:wrap;gap:clamp(22px,3vw,46px);margin:0}
.price-hero__meta div{display:flex;flex-direction:column;gap:7px}
.price-hero__meta dt{font-family:var(--en);font-size:12px;letter-spacing:.12em;color:var(--sub);text-transform:uppercase}
.price-hero__meta dd{margin:0;font-size:17px;font-weight:500;letter-spacing:.04em}
@media(max-width:560px){.price-hero{gap:20px;padding:24px}.price-hero__meta{gap:18px}}

/* リノベ詳細：費用は控えめ（仕様表の一行＋小さな内訳） */
.price-break{margin-top:14px;border-top:1px dashed var(--line);padding-top:14px}
.price-break summary{font-size:12.5px;color:var(--sub);letter-spacing:.05em;cursor:pointer;list-style:none}
.price-break summary::-webkit-details-marker{display:none}
.price-break summary::before{content:"＋ ";color:var(--accent)}
.price-break[open] summary::before{content:"− "}
.price-break__list{margin-top:12px;display:grid;grid-template-columns:1fr auto;gap:7px 18px;
  font-size:15px;color:var(--sub);letter-spacing:.04em}
.price-break__list dt{margin:0}
.price-break__list dd{margin:0;font-family:var(--num);color:var(--ink)}

/* ============================================================
   施工事例 詳細（作り込み版・2026-07-24）
   リフォーム部位詳細／リノベ詳細で共有。箇所別Before/After・
   After箇所グリッド・性能カード・間取り・お客様の声・
   ★リフォーム↔リノベ相互リンクバナー
   ============================================================ */
.detail-hero{border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:3/2;background:var(--line)}
.detail-hero img{width:100%;height:100%;object-fit:cover;display:block}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,1vw,14px);margin-top:clamp(8px,1vw,14px)}
.thumbs figure{margin:0;aspect-ratio:1/1;border-radius:var(--radius);overflow:hidden;background:var(--line)}
.thumbs img{width:100%;height:100%;object-fit:cover;display:block}

/* 箇所別 Before/After（見出し＋写真対＋説明＋使用商品） */
.ba-items{display:flex;flex-direction:column;gap:clamp(40px,5vw,72px)}
/* 見出しは2段（大見出し／説明文） */
.ba-item__head{display:flex;flex-direction:column;gap:5px;margin-bottom:clamp(14px,1.6vw,20px)}
.ba-item__place{font-size:clamp(18px,2.1vw,22px);font-weight:500;letter-spacing:.04em;line-height:1.4}
.ba-item__lead{font-size:15px;color:var(--sub);letter-spacing:.05em;line-height:1.7}
.ba-item__desc{margin-top:clamp(14px,1.6vw,20px);font-size:15px;line-height:1.95;letter-spacing:.04em;max-width:920px}
/* 使用商品ラベルは長方形・白文字／背景 #8c8c8c（全ページ共通） */
.ba-item__prod{display:inline-block;margin-top:14px;font-size:12.5px;color:#fff;background:#8c8c8c;border:0;border-radius:0;padding:7px 16px;letter-spacing:.04em}

/* After 箇所グリッド（リノベ詳細） */
.after-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(18px,2.2vw,30px)}
.after-card figure{margin:0;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:var(--line)}
.after-card img{width:100%;height:100%;object-fit:cover;display:block}
.after-card h3{font-size:20px;font-weight:500;margin-top:14px;letter-spacing:1px}
.after-card__lead{font-size:16px;color:var(--accent);margin-top:4px;letter-spacing:.06em}
.after-card p{font-size:15px;line-height:1.85;color:var(--ink);margin-top:8px;letter-spacing:.03em}
.after-card__prod{font-size:12px;color:var(--sub);margin-top:10px;padding-top:10px;border-top:1px solid var(--line);letter-spacing:.03em}

/* Before ギャラリー（リノベ詳細） */
.pgallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px)}
.pgallery figure{margin:0;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:var(--line);position:relative}
.pgallery img{width:100%;height:100%;object-fit:cover;display:block}
.pgallery .ba__label{position:absolute;left:12px;top:12px}

/* 性能カード（断熱・耐震・減築・全館空調） */
.perf-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,24px)}
.perf-card{border:1px solid var(--line);border-radius:var(--radius);padding:clamp(22px,2.4vw,30px);text-align:center;background:var(--bg)}
.section-paper .perf-card{background:var(--white)}
.perf-card__en{font-family:var(--en);font-size:12px;letter-spacing:.14em;color:var(--accent);text-transform:uppercase}
.perf-card h3{font-size:16px;font-weight:500;margin-top:10px;letter-spacing:.04em}
.perf-card p{font-size:15px;color:var(--sub);margin-top:8px;line-height:1.8}

/* 間取り（Before/After のプレースホルダ） */
.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,24px)}
.plan-ph{aspect-ratio:4/3;border:1px dashed var(--line);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;background:var(--white);color:var(--sub);font-size:13px;letter-spacing:.06em;text-align:center;padding:20px}
.plan-fig{margin:0;position:relative;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.plan-fig img{width:100%;height:auto;display:block}
.plan-fig .ba__label{position:absolute;left:12px;top:12px}
.section-paper .plan-ph{background:var(--bg)}

/* お客様の声（詳細） */
.detail-voice{max-width:820px;margin-inline:auto;text-align:center}
.detail-voice__body{font-size:clamp(16px,2vw,20px);line-height:2.1;letter-spacing:.04em;font-weight:300}
.detail-voice__by{font-size:15px;color:var(--sub);margin-top:26px;letter-spacing:.08em}
/* /お客様の声＝お名前に向けた吹き出し（白地・薄いドロップシャドウ・18px/行間36px） */
.detail-voice .voice-bubble{position:relative;display:inline-block;max-width:680px;text-align:left;
  background:#fff;border-radius:14px;padding:clamp(24px,3vw,36px);margin-bottom:16px;
  font-size:18px;line-height:2;font-weight:300;
  box-shadow:0 8px 28px rgba(0,0,0,.07)}
.detail-voice .voice-bubble::after{content:"";position:absolute;left:50%;bottom:-13px;transform:translateX(-50%);
  border:14px solid transparent;border-bottom:0;border-top-color:#fff}

/* ★ リフォーム↔リノベ 相互リンクバナー */
/* 2026-08-28：立体的な箱をやめる。
   ⚠ 「座布団＋全周1px枠＋左に色の太罫＋大きな角丸」は AI が作った資料・サイトの定番の顔になる。
      うちの囲みの作法は「薄い線1本」（[[no-emoji-tinted-callout-use-thin-outline]] と同じ考え方）。
   → 地に直接置き、上の細い罫1本だけで前の節と切る。写真の角丸はサイト共通なので残す。 */
.reno-link__wrap{display:flex;gap:clamp(24px,3vw,44px);align-items:center;flex-wrap:wrap;
  background:none;border:0;border-top:1px solid var(--line);border-radius:0;
  padding:clamp(28px,3.2vw,44px) 0 0}
.reno-link__media{flex:none;width:min(300px,38%);aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:var(--line)}
.reno-link__media img{width:100%;height:100%;object-fit:cover;display:block}
.reno-link__body{flex:1;min-width:260px}
.reno-link__en{font-family:var(--en);font-size:12px;letter-spacing:.14em;color:var(--accent);text-transform:uppercase}
.reno-link__ttl{font-size:clamp(18px,2.2vw,24px);font-weight:500;line-height:1.5;margin:8px 0 12px;letter-spacing:.03em}
.reno-link__txt{font-size:15px;line-height:1.95;color:var(--ink);letter-spacing:.04em;margin-bottom:18px}
.note-sub{font-size:15px;color:var(--sub);margin-top:14px;letter-spacing:.04em}

/* モアセレクト（費用は事前に） */
.cost-promise{display:flex;gap:clamp(24px,3vw,48px);align-items:center;flex-wrap:wrap}
.cost-promise__body{flex:1;min-width:280px}
.cost-promise__media{flex:none;width:min(360px,42%);aspect-ratio:4/3;border-radius:var(--radius-lg);overflow:hidden;background:var(--line)}
.cost-promise__media img{width:100%;height:100%;object-fit:cover;display:block}

@media(max-width:900px){.after-grid,.pgallery{grid-template-columns:1fr 1fr}}
@media(max-width:768px){.perf-grid{grid-template-columns:1fr 1fr}.reno-link__media,.cost-promise__media{width:100%}.plan-grid{grid-template-columns:1fr}}
@media(max-width:560px){.after-grid,.pgallery,.perf-grid{grid-template-columns:1fr}.thumbs{grid-template-columns:1fr 1fr}}

/* ===== ヒーロー写真ギャラリー（主写真＋自動スライド／矢印はサムネ左右・2026-07-24） ===== */
.gallery__stage{border-radius:var(--radius-lg);overflow:hidden;background:var(--line)}
.gallery__main{aspect-ratio:3/2}
.gallery__main img{width:100%;height:100%;object-fit:cover;display:block}
/* サムネ行：[←] サムネ6枚 [→] を横並び */
.gallery__thumbrow{display:flex;align-items:center;gap:clamp(10px,1.4vw,18px);margin-top:clamp(12px,1.4vw,18px)}
.gallery__nav{flex:none;width:clamp(40px,3.4vw,52px);height:clamp(40px,3.4vw,52px);border-radius:50%;
  background:rgba(42,42,42,.68);color:#fff;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .25s}
.gallery__nav:hover{background:var(--accent)}
.gallery__nav svg{width:42%;height:42%}
.gallery__thumbs{flex:1;min-width:0;display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(8px,1vw,14px)}
.gallery__thumb{padding:0;border:0;cursor:pointer;aspect-ratio:4/3;border-radius:var(--radius);
  overflow:hidden;background:var(--line);opacity:.5;transition:opacity .25s,outline-color .25s;outline:2px solid transparent;outline-offset:-2px}
.gallery__thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gallery__thumb:hover{opacity:.85}
.gallery__thumb.is-active{opacity:1;outline-color:var(--accent)}
@media(max-width:640px){.gallery__thumbs{grid-template-columns:repeat(4,1fr)}}

/* ヒーロー見出し（スライダー上）は中央寄せ／パンくずは右寄せ */
.works-index .detail-head{text-align:center}
.works-index .detail-tags{justify-content:center}
.works-index .crumb{justify-content:flex-end;text-align:right}
/* ヒーローの英語ラベル＝Salonica・小文字・左-3度傾け／h1との間に余白 */
.works-index .detail-head .eyebrow{
  font-family:"Salonica","Salonica Trial",var(--en),serif;
  text-transform:lowercase;font-weight:400;
  display:inline-block;rotate:-3deg;
  font-size:clamp(44px,8vw,80px);letter-spacing:.01em;line-height:1;
  margin-bottom:clamp(10px,1.4vw,20px)}
.works-index .detail-head .sec-title{margin-top:0}

/* ===== reveal をスクロール追従型に（事例詳細・body.reveal-follow のみ） =====
   view タイムラインで、各要素がビューポートに入る量に連動してフェードアップ。
   対応ブラウザ（Chrome等）のみ適用。非対応はJSの一度きりrevealにフォールバック。 */
@supports (animation-timeline: view()){
  /* story（spec-split＝2番目のsection）より下のコンテンツにだけ追従revealを適用。
     ヒーロー・見出し（1〜2番目）は即表示のまま。 */
  body.reveal-follow main > section:nth-of-type(n+3) .reveal{
    opacity:0;transform:translateY(38px);transition:none;
    animation:revealFollow linear both;
    animation-timeline:view();
    animation-range:entry 2% cover 24%;
  }
  body.reveal-follow main > section:nth-of-type(n+3) .reveal.d1{animation-range:entry 8% cover 28%}
  body.reveal-follow main > section:nth-of-type(n+3) .reveal.d2{animation-range:entry 12% cover 32%}
  body.reveal-follow main > section:nth-of-type(n+3) .reveal.d3{animation-range:entry 16% cover 36%}
  @keyframes revealFollow{to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){
    body.reveal-follow main > section:nth-of-type(n+3) .reveal{animation:none;opacity:1;transform:none}
  }
}

/* ===== 事例詳細：スライダー以下 2カラム（左=追従sticky／右=コンテンツ・2026-07-24） ===== */
.detail-2col{display:grid;grid-template-columns:minmax(200px,25%) minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:start}
/* 部位事例（部分リフォーム）＝左にアフター写真・右にspec＋コンテンツ */
.detail-2col--media{grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr)}
/* お知らせ詳細は1カラム（サムネイルと相談ボタンを出さない・2026-09-26）。
   .wrap は1680pxまで広がるので、見出し（.detail-head--lg）と同じ960pxに絞って1行の長さをそろえる。
   ⚠ 内側は .detail-2col__main のまま＝段落間の余白（gap）と長いURLの折り返しをそのまま使う。 */
.detail-2col--single{grid-template-columns:minmax(0,1fr);max-width:960px;margin-inline:auto}
.side-photo{margin:0;border-radius:var(--radius-lg);overflow:hidden;background:var(--line)}
.side-photo img{width:100%;height:auto;display:block}
.detail-2col__side{position:sticky;top:100px;align-self:start;display:flex;flex-direction:column;gap:clamp(20px,2.4vw,30px)}
.detail-2col__main{min-width:0;display:flex;flex-direction:column;gap:clamp(48px,6vw,84px)}
/* 移植した本文には、URLをそのまま文字として貼ったリンクが混ざることがある（例：出典の参照URL）。
   折り返せない長い文字列を逃がす（コラム移植でSPの横あふれとして実測。2026-09-25）。
   ⚠⚠ 2026-09-26：ここは `anywhere` だった。**`anywhere` は行に入るかどうかに関係なく割りに行く**ので、
     日本語まで「臨／時」「シン／プル」「プラズマク／ラスター」のように**語の途中で改行される**
     （お知らせ・コラム・イベント・事例の全詳細ページで発生。スマホで実測）。
     `break-word` は**入りきらないときだけ**割るので、日本語は禁則処理で普通に折り返し、
     長いURLだけが割れる。あわせて日本語は文節で折る（auto-phrase）。 */
.detail-2col__main{overflow-wrap:break-word;word-break:auto-phrase}
.side-cta{display:flex;flex-direction:column;gap:10px}
.side-cta .btn{width:100%;justify-content:center}
.dblock{min-width:0}
.dblock > .sec-head{margin-bottom:clamp(18px,2vw,26px)}
/* 右カラムの担当ボックスは幅いっぱいに */
.detail-2col__main .staff-card{max-width:none;width:100%}
/* 見出し（eyebrow）の前にオレンジ● */
.dblock .sec-head .eyebrow{display:inline-flex;align-items:center}
.dblock .sec-head .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--accent);margin-right:9px;flex:none}
.dblock .cost-promise .eyebrow{display:inline-flex;align-items:center}
.dblock .cost-promise .eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--accent);margin-right:9px;flex:none}
@media(max-width:900px){
  .detail-2col{grid-template-columns:1fr;gap:clamp(40px,6vw,56px)}
  .detail-2col__side{position:static;top:auto}
}

/* ===== リノベTOP ヒーローのフェード・スライドショー（2026-07-24） ===== */
.page-hero__slideshow{position:absolute;inset:0}
.page-hero .hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1.6s ease}
.page-hero .hero-slide.is-active{opacity:1}
@media (prefers-reduced-motion:reduce){.page-hero .hero-slide{transition:none}}

/* =============================================================
   スマホ調整（末尾＝ベース定義の後・ソース順で勝たせる）
   ============================================================= */
/* works-detail 見出し下余白（PCは広め100px・SPは@600で60） */
.detail-head--lg{margin-bottom:100px}
/* 2026-09-25：詳細ページの見出し（news/event/works/blog共通）は、器（.wrap）いっぱいの
   幅で折り返すと1行が長すぎて読みにくい（長いタイトルで実測：1440pxで1行約30字）。
   ヒーロー見出し（.phero__center）と同じ960pxの読みやすい幅に絞る。中央寄せなので
   見出しだけでなく英字ラベル・タグ・日付の行も一緒に狭まり、記事ヘッダーとしてまとまる。 */
.detail-head--lg{max-width:960px;margin-inline:auto}
/* パンくずをSPでフッター上へ複製表示（PCは非表示） */
.crumb-foot{display:none}
/* works一覧 絞り込みの開閉。⚠ 2026-08-28 に「SPだけ」から**全幅**へ広げた。 */
.wf-toggle__icon{position:relative;width:15px;height:15px;flex:none}
.wf-toggle__icon::before,.wf-toggle__icon::after{content:"";position:absolute;top:50%;left:50%;
  width:13px;height:1.5px;background:var(--ink);transform:translate(-50%,-50%);transition:transform .3s ease}
.wf-toggle__icon::after{transform:translate(-50%,-50%) rotate(90deg)}
.wf-toggle.open .wf-toggle__icon::after{transform:translate(-50%,-50%) rotate(0)}
/* ⚠ 高さのアニメは grid-template-rows の 0fr→1fr で作る（max-height の当て推量を使わない）。
      中身は .wf-inner で overflow:hidden・min-height:0 にしないと畳めない。 */
.wf-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease}
.wf-body.open{grid-template-rows:1fr}
.wf-inner{overflow:hidden;min-height:0}

@media (max-width:600px){
  .detail-head{margin-bottom:60px}      /* 事例詳細見出しの下余白 100→60 */
  .detail-2col__main{gap:60px}          /* 詳細2カラム本文の間隔 48→60 */
  /* パンくずを上部で隠し、フッター上の複製を表示 */
  .crumb--top{display:none}
  .crumb-foot{display:block;margin-top:28px;margin-bottom:40px}  /* 下に40px */
  .crumb-foot .crumb{justify-content:flex-start;text-align:left;margin-bottom:0}
  /* 事例詳細の大eyebrow（装飾）44→70 */
  .works-index .detail-head .eyebrow{font-size:70px}
  /* ⚠ 2026-09-05：リノベの事例は「renovation works」と字数が倍になり、70px だと
     スマホで横に18pxはみ出した。長い方だけ画面幅から決める（短い方は70pxのまま）。 */
  .works-index .detail-head .eyebrow{font-size:min(70px, 15vw)}
}

@media (max-width:600px){
  /* 狭い幅では補助の一言を落とす（見出しとアイコンだけ残す） */
  .wfbar__hint{display:none}
}

/* 施工事例一覧のリード：2文を段落で分け、あいだは1行ぶんの軽い余白に
   （2026-08-29。既定の24pxだと離れすぎる） */
.works-index .sec-lead + .sec-lead{margin-top:14px}

/* ---- 詳細ページの本文（works / works-renovation / blog / news / features / event の6本）----
   ：本文の上下に余白を入れる（0 → 100px）。
   ⚠ 5本は `style="padding:0"` を直に持っていて、ヒーローの直下に本文が詰まっていた。
     インラインを撤去して、ここで6本そろえる（works-renovation-detail は 150px だった＝これも100pxに統一）。
   ⚠ 地色はヒーローと同じベージュ（.section-paper）。2026-08-29「揃えて」。 */
/* ⚠⚠ 地色をベージュに揃えたことで、ヒーロー節と本文節が「同色連続」になり、
   全社のリズム規則 `.section-paper + .section-paper{padding:75px}`(0,2,0) が効くようになった。
   クラス1つ(0,1,0)では勝てない。**同じ詳細度(0,2,0)にして、後ろに書いて勝つ。** */
.section.detail-body{padding-block:100px}

/* お客様の声の吹き出しを 18px/36px → 16px/32px。
   ⚠ 指示は works-detail の1要素だが、**同じ部品が works-renovation-detail にもある**。
     対になる2本で文字の大きさが違うと不揃いになるので両方に当てた（に報告済み）。 */
.detail-voice .voice-bubble{font-size:16px;line-height:2}