/*
Theme Name: Tajima Koumuten
Theme URI: https://tajiko-reform.com/
Author: MAREMI Inc.
Author URI: https://maremi.co.jp/
Description: 有限会社田島工務店（秩父・皆野町／創業1923年）のオリジナルテーマ。和モダン・白＋木目基調。施工事例をカスタム投稿タイプで管理する。設計の正は maremi-clients 側 01_Clients/有限会社田島工務店/hp-renewal-requirements.md（v1.3）。
Version: 0.1.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: Proprietary
Text Domain: tajima
*/

:root{
  --bg:#F8F5EF;
  --panel:#FFFFFF;
  --ink:#2A2521;
  --ink-soft:#5C5348;
  --wood:#9C7A4D;
  --wood-deep:#6E5230;
  --wood-pale:#EFE6D8;
  --shu:#A63D2F;
  --line-green:#06C755;
  --serif:'Noto Serif JP',"Hiragino Mincho ProN",serif;
  --sans:'Noto Sans JP',"Hiragino Kaku Gothic ProN",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.9;letter-spacing:.04em}
img{max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* ===== 写真枠（写真が入る前はプレースホルダー、入ったら同じ寸法で画像に差し替わる） ===== */
.ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  color:#8a7c66;font-size:13px;letter-spacing:.1em;text-align:center;
  background:
    linear-gradient(135deg,#e9e0cf 0%,#dccfb8 45%,#cfc0a5 100%);
  border:1px dashed #b8a888;position:relative;overflow:hidden}
.ph::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,transparent 0 46px,rgba(255,255,255,.25) 46px 48px)}
.ph span{position:relative;z-index:1;background:rgba(255,255,255,.75);padding:4px 14px;border-radius:2px}
.ph--dark{background:linear-gradient(135deg,#7d7263 0%,#6b6153 50%,#59503f 100%);color:#e8e0d2}
.ph--dark span{background:rgba(0,0,0,.35)}
/* 実写真が入ったとき: 枠の装飾を消し、同じ寸法いっぱいに敷く */
.ph.has-img{border:none;background:none;padding:0}
.ph.has-img::after{display:none}
.ph.has-img img{width:100%;height:100%;object-fit:cover;display:block}

/* クリック・タップで拡大できる写真（buttonなのでボタンの既定スタイルを消す） */
/* ★拡大できる写真は <button> で出している。ボタンは既定で「中身の幅」までしか広がらないため、
   .ph を別の要素で包んでいる箇所（.akiya-shot / .single-shot / .wcard-solo / .flow-photo など）で
   写真が枠を使い切らず、左に寄って大きな空白ができる不具合が出た（2026-08-17に実測）。
   個別に直すと入れ忘れるので、ボタン全体に効く一般則としてここで幅を通す。
   高さ基準で並べたい箇所（詳細ページ）は、より具体的なセレクタで width:auto に戻している。 */
button.ph{font:inherit;color:inherit;cursor:pointer;width:100%}
.ph.is-zoomable{padding:0;border:none;background:none;overflow:hidden}
.ph.is-zoomable img{transition:transform .35s ease}
.ph.is-zoomable:hover img,.ph.is-zoomable:focus-visible img{transform:scale(1.04)}
.ph.is-zoomable:focus-visible{outline:3px solid var(--wood);outline-offset:2px}
/* 拡大できることは、写真に記号を重ねずカーソルの形で伝える
   （＋バッジは許可証のような文字が主役の画像を隠すため2026-08-17に廃止） */
.ph.is-zoomable{cursor:zoom-in}
.zoom-hint{text-align:center;font-size:12.5px;color:var(--ink-soft);margin-bottom:32px}

/* --- 拡大表示（ライトボックス） --- */
.lightbox{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;
  background:rgba(24,20,16,.9);padding:24px}
.lightbox.is-open{display:flex}
.lightbox-figure{max-width:min(1400px,94vw);max-height:90vh;margin:0;display:flex;flex-direction:column;gap:12px}
.lightbox-figure img{max-width:100%;max-height:82vh;object-fit:contain;border-radius:4px;
  box-shadow:0 20px 60px rgba(0,0,0,.5)}
.lightbox-figure figcaption{color:#EDE4D3;font-size:13px;letter-spacing:.1em;text-align:center}
.lightbox-close{position:absolute;top:16px;right:20px;width:48px;height:48px;border:none;cursor:pointer;
  background:rgba(255,255,255,.12);color:#F6EFDF;border-radius:50%;font-size:26px;line-height:1}
.lightbox-close:hover{background:rgba(255,255,255,.24)}
body.lb-open{overflow:hidden}

/* ===== ヘッダー ===== */
header{position:sticky;top:0;z-index:100;background:rgba(248,245,239,.95);
  border-bottom:1px solid #e3dacb;backdrop-filter:blur(6px)}
/* ログイン中はWordPressの管理バー（固定・高さ32px）が上に居るので、その下に付ける。
   これが無いと追従ヘッダーが管理バーの裏に潜り込んで見切れる。
   782px以下では管理バーが position:absolute になりスクロールで消えるため top:0 に戻す。 */
.admin-bar header{top:32px}
@media screen and (max-width:782px){
  .admin-bar header{top:0}
}
.h-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;
  gap:24px;padding:10px 20px;max-width:1180px;margin:0 auto}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0;white-space:nowrap}
.brand-mark{width:46px;height:46px;flex-shrink:0;border-radius:50%;background:var(--wood-deep);color:#F6EFDF;
  display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:11px;
  line-height:1.25;text-align:center;letter-spacing:.05em}
.brand-name{font-family:var(--serif);line-height:1.35}
.brand-name b{display:block;font-size:20px;letter-spacing:.12em;white-space:nowrap}
.brand-name small{display:block;font-size:10.5px;color:var(--wood-deep);letter-spacing:.1em;white-space:nowrap}
nav.gnav{display:flex;gap:24px;font-size:13.5px;flex-shrink:0}
nav.gnav a{padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap}
nav.gnav a:hover{border-color:var(--wood)}
.h-cta{display:flex;align-items:center;gap:12px;flex-shrink:0}
.h-tel{text-align:right;font-family:var(--serif);line-height:1.25;white-space:nowrap}
.h-tel b{display:block;font-size:19px;letter-spacing:.04em}
.h-tel small{display:block;font-size:10.5px;color:var(--ink-soft);letter-spacing:.08em}
/* --- LINE「友だち追加」ボタン ---
   LINE配布の公式アセット（画像）を使う。自作のロゴ風マークは商標の観点で使わない
   （2026-08-09 田端の指摘）。画像は改変せず、大きさだけ用途に応じて変える。 */
.line-btn{display:inline-flex;align-items:center;flex-shrink:0;line-height:0;transition:.2s}
.line-btn img{display:block;height:36px;width:auto}
.line-btn:hover{opacity:.85}
.line-btn--big img{height:48px}
.line-btn--inline{margin-top:12px}

/* --- スマホ・タブレットのメニュー（960px以下でナビが隠れるため必須） --- */
.nav-toggle{display:none;width:44px;height:44px;flex-shrink:0;background:none;border:none;cursor:pointer;
  padding:10px;flex-direction:column;justify-content:space-between}
.nav-toggle span{display:block;height:2px;width:100%;background:var(--ink);border-radius:2px;transition:.25s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(11px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-11px) rotate(-45deg)}
/* 開閉は max-height のアニメーションでなく単純な表示切替にする。
   高さの補間に依存すると、閉じたままに見える事故が起きるため（2026-08-07に実測で発生）。 */
.sp-nav{display:none;flex-direction:column;background:var(--panel);border-top:1px solid #e3dacb;
  padding:8px 20px 18px;max-height:72vh;overflow-y:auto}
.sp-nav a{display:block;padding:15px 4px;border-bottom:1px solid #efe7d8;font-size:15px;letter-spacing:.06em}
.sp-nav a:last-child{border-bottom:none}
.sp-nav-tel{color:var(--wood-deep);font-weight:700}
body.nav-open{overflow:hidden}

/* ===== ヒーロー ===== */
.hero{position:relative;background:#3a332a}
.hero-shot{height:520px}
.hero-shot .ph{height:100%;border:none;justify-content:flex-start;padding-top:96px}
.hero-shot .ph.has-img{padding-top:0}
.hero-cover{position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,25,20,.15) 0%,rgba(30,25,20,.55) 65%,rgba(30,25,20,.8) 100%);
  display:flex;align-items:flex-end}
.hero-copy{padding:0 20px 62px;color:#F7F1E4;max-width:1080px;margin:0 auto;width:100%}
.hero-copy .em{display:inline-block;background:var(--shu);color:#fff;font-family:var(--serif);
  font-size:13px;letter-spacing:.3em;padding:4px 14px;margin-bottom:14px}
.hero-copy h1{font-family:var(--serif);font-size:clamp(26px,4.6vw,44px);font-weight:600;
  letter-spacing:.1em;line-height:1.5;text-shadow:0 2px 14px rgba(0,0,0,.45)}
.hero-copy p.sub{font-family:var(--serif);font-size:clamp(14px,1.8vw,18px);letter-spacing:.14em;margin-top:12px;opacity:.95}

/* ===== 帯・セクション共通 ===== */
section{padding:76px 0}
/* 追従ヘッダーの下にアンカー先が隠れないようにする */
section[id],div[id]{scroll-margin-top:88px}
/* ログイン中は管理バー32pxぶん余分に逃がす */
.admin-bar section[id],.admin-bar div[id]{scroll-margin-top:120px}
@media screen and (max-width:782px){
  .admin-bar section[id],.admin-bar div[id]{scroll-margin-top:88px}
}
.sec-head{text-align:center;margin-bottom:44px}
.sec-head .en{font-size:11.5px;letter-spacing:.35em;color:var(--wood);font-weight:700}
.sec-head h2{font-family:var(--serif);font-size:clamp(22px,3.2vw,30px);letter-spacing:.14em;font-weight:600;margin-top:6px}
.sec-head .lead{font-size:14.5px;color:var(--ink-soft);margin-top:14px}

/* ===== 創業100年 ===== */
.trust{background:var(--panel);border-top:1px solid #eee5d6;border-bottom:1px solid #eee5d6}
.trust-grid{display:grid;grid-template-columns:auto 1fr;gap:48px;align-items:center}
.emblem{width:190px;height:190px;border-radius:50%;background:var(--wood-deep);color:#F6EFDF;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  font-family:var(--serif);box-shadow:0 0 0 6px var(--panel),0 0 0 7px var(--wood)}
.emblem b{font-size:34px;letter-spacing:.08em}
.emblem span{font-size:12px;letter-spacing:.2em}
.trust-body h3{font-family:var(--serif);font-size:22px;letter-spacing:.1em;font-weight:600;margin-bottom:12px}
.trust-body p{font-size:14.5px;color:var(--ink-soft)}
.trust-nums{display:flex;gap:36px;margin-top:22px;flex-wrap:wrap}
.tnum{border-left:3px solid var(--wood);padding-left:14px}
.tnum b{font-family:var(--serif);font-size:24px;display:block;line-height:1.4}
.tnum small{font-size:12px;color:var(--ink-soft)}

/* ===== まるっとお任せ ===== */
.scope-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.scard{background:var(--panel);border:1px solid #e8dfd0;border-radius:6px;padding:22px 10px;text-align:center}
.scard .ic{width:52px;height:52px;margin:0 auto 10px;border-radius:50%;background:var(--wood-pale);
  display:flex;align-items:center;justify-content:center;color:var(--wood-deep)}
/* Material Symbols のインラインSVG。色は currentColor で親から継承する */
.icon{width:26px;height:26px;display:block}
.scard b{font-size:13.5px;display:block;letter-spacing:.06em}
.scard small{font-size:11px;color:var(--ink-soft)}
.est-note{margin-top:34px;text-align:center;background:var(--panel);border:1px solid #e8dfd0;
  border-radius:8px;padding:26px 20px}
.est-note b{font-family:var(--serif);font-size:17px;letter-spacing:.08em}
.est-note p{font-size:13.5px;color:var(--ink-soft);margin-top:6px}

/* ===== 施工事例 ===== */
.works{background:linear-gradient(180deg,var(--bg) 0%,#F1EADD 100%)}
/* 写真を主役にするため2列。1枚あたりの面積が3列時の約2倍になる（2026-08-07 吉岡の指摘） */
.works-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.wcard{background:var(--panel);border-radius:8px;overflow:hidden;box-shadow:0 4px 18px rgba(90,70,40,.08)}
.wcard-ba{display:grid;grid-template-columns:1fr 1fr;position:relative}
.wcard-ba .ph{height:240px;font-size:12px}
/* Beforeが無い事例は1枚を大きく見せる（2026-08-17「A案」）。
   高さを2枚組と揃えているので、一覧に混在してもカードの背丈がそろう。 */
.wcard-solo{position:relative}
.wcard-solo .ph{height:240px;font-size:12px}
.wcard-body h3 a:hover{color:var(--wood-deep)}
.wcard-link{display:inline-block;margin-top:14px;font-size:13px;font-weight:700;letter-spacing:.08em;
  color:var(--wood-deep);border-bottom:1px solid var(--wood-pale);padding-bottom:2px}
.wcard-link::after{content:" →"}
.wcard-link:hover{border-color:var(--wood)}
.ba-badge{position:absolute;top:8px;font-size:10px;letter-spacing:.12em;color:#fff;padding:2px 10px;z-index:2}
.ba-badge.before{left:8px;background:#6b6153}
.ba-badge.after{right:8px;background:var(--shu)}
.wcard-body{padding:18px 18px 20px}
.wcard-cat{font-size:11px;color:var(--wood-deep);letter-spacing:.14em;font-weight:700}
.wcard-body h3{font-family:var(--serif);font-size:16.5px;letter-spacing:.06em;margin:4px 0 10px;font-weight:600}
.kodawari{background:var(--wood-pale);border-radius:4px;padding:10px 12px;font-size:12.5px;color:var(--ink-soft)}
.kodawari b{color:var(--wood-deep);font-size:11px;letter-spacing:.14em;display:block;margin-bottom:2px}
.kodawari ul{margin:0;padding-left:1.1em}
.kodawari li{margin-bottom:2px}
.wcard-meta{display:flex;gap:14px;margin-top:10px;font-size:11.5px;color:var(--ink-soft);flex-wrap:wrap}
.more{display:block;width:fit-content;margin:38px auto 0;font-family:var(--serif);letter-spacing:.2em;
  font-size:14px;border:1px solid var(--ink);padding:13px 46px;transition:.2s}
.more:hover{background:var(--ink);color:#F6EFDF}

/* ===== 施工事例：一覧・詳細ページ ===== */
.page-head{background:var(--panel);border-bottom:1px solid #eee5d6;padding:56px 0 46px;text-align:center}
.page-head .en{font-size:11.5px;letter-spacing:.35em;color:var(--wood);font-weight:700}
.page-head h1{font-family:var(--serif);font-size:clamp(24px,3.4vw,32px);letter-spacing:.14em;font-weight:600;margin-top:6px}
.page-head .lead{font-size:14.5px;color:var(--ink-soft);margin-top:14px}
.cat-filter{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:40px}
.cat-filter a{font-size:12.5px;font-weight:700;letter-spacing:.06em;padding:7px 18px;border-radius:999px;
  border:1px solid #d8cdb8;background:var(--panel);color:var(--ink-soft)}
.cat-filter a:hover,.cat-filter a.is-current{background:var(--wood-deep);color:#F6EFDF;border-color:var(--wood-deep)}
/* 詳細ページのBefore/After。
   ★グリッドで列幅を固定していたが、拡大できる写真は <button> で出しているため
     ボタンが中身の幅までしか広がらず、写真が列の中央に寄って左右に大きな余白ができていた
     （2026-08-17に実測。枠の幅が0pxだった）。
     列を埋める（object-fit:cover）と今度は縦長写真が大きく欠けるので、
     **高さを揃えて隣に並べる**方式にした。縦位置がそろい、写真どうしの隙間も詰まる。 */
.single-ba{display:flex;justify-content:center;align-items:flex-start;gap:20px;margin-bottom:36px}
.single-ba .single-shot{flex:0 1 auto;min-width:0}
.single-ba .ph{height:auto;width:auto}
.single-ba .ph img{height:440px;width:auto;max-width:100%;object-fit:contain}
.single-ba .ph:not(.has-img){height:440px;width:320px}

/* 詳細ページで写真が1枚だけのとき。同じく高さ基準で中央に置く */
.single-solo{display:flex;justify-content:center;margin:0 auto 36px}
.single-solo .ph{height:auto;width:auto}
.single-solo .ph img{height:520px;width:auto;max-width:100%;object-fit:contain}
.single-solo .ph:not(.has-img){height:460px;width:640px;max-width:100%}
.single-shot{position:relative}
.single-shot .ph{height:340px;border-radius:8px}
.single-shot .ba-badge{left:12px;right:auto;top:12px;font-size:11px;padding:3px 14px}
.single-body{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:start}
.single-body h2{font-family:var(--serif);font-size:20px;letter-spacing:.1em;font-weight:600;margin-bottom:12px}
.single-body p{font-size:14.5px;color:var(--ink-soft)}
.spec-table{width:100%;border-collapse:collapse;font-size:13.5px}
.spec-table th,.spec-table td{text-align:left;vertical-align:top;padding:12px 8px;border-bottom:1px solid #e8dfd0}
.spec-table th{width:120px;font-weight:700;color:var(--wood-deep);letter-spacing:.06em;white-space:nowrap}
.spec-table td{color:var(--ink-soft)}
.pager{display:flex;justify-content:center;gap:12px;margin-top:44px;font-size:13.5px}
.pager .page-numbers{border:1px solid #d8cdb8;background:var(--panel);padding:8px 16px;border-radius:4px}
.pager .page-numbers.current{background:var(--wood-deep);color:#F6EFDF;border-color:var(--wood-deep)}
.empty-note{text-align:center;color:var(--ink-soft);font-size:14px;padding:40px 0}

/* ===== 空き家再生 ===== */
.akiya{background:#332C24;color:#F0E8D8}
.akiya .sec-head .en{color:#C9A86C}
.akiya .sec-head h2{color:#F6EFDF}
.akiya-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center}
/* ★Before/Afterを横に並べる（2026-08-17）。
   もとは縦積みだったが、拡大できる写真は <button> で出しているため、
   ボタンが親（.akiya-shot）の幅まで広がらず、左に小さく寄って右に大きな空白ができていた。
   幅を埋めるだけだと縦長写真が帯状に切られるので、2枚を横に並べて1枚あたりの
   縦横比を写真本来の形に近づける。 */
.akiya-ba{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.akiya-shot{position:relative}
.akiya-shot .ph{width:100%;height:330px;border-radius:8px}
.akiya-shot .ba-badge{left:10px;right:auto;top:10px}
.akiya-body p{font-size:14.5px;opacity:.92}
.akiya-body .story{font-family:var(--serif);font-size:18px;letter-spacing:.08em;line-height:2;margin-bottom:16px}
.akiya-list{margin:18px 0 26px;display:grid;gap:8px;font-size:13.5px}
.akiya-list li{list-style:none;padding-left:22px;position:relative}
.akiya-list li::before{content:"";position:absolute;left:4px;top:12px;width:8px;height:8px;background:var(--shu)}
.akiya-cta{display:inline-block;background:#F6EFDF;color:var(--wood-deep);font-weight:700;
  font-size:14px;padding:13px 30px;border-radius:4px}
.akiya-sub{font-size:12px;opacity:.75;margin-top:12px}

/* ===== 流れ ===== */
.flow-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;counter-reset:step}
.fstep{background:var(--panel);border:1px solid #e8dfd0;border-radius:6px;padding:22px 14px;text-align:center;position:relative}
.fstep::before{counter-increment:step;content:"0" counter(step);font-family:var(--serif);
  font-size:20px;color:var(--wood);display:block;margin-bottom:6px}
.fstep b{font-size:14px;display:block;letter-spacing:.06em;margin-bottom:6px}
.fstep small{font-size:11.5px;color:var(--ink-soft);line-height:1.7;display:block}

/* ===== 会社概要 ===== */
.company{background:var(--panel);border-top:1px solid #eee5d6}
.comp-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:40px}
.comp-photos .ph{height:300px;border-radius:6px}
/* ★会社概要の3枚だけ、切り取らず全体を見せる（cover ではなく contain）。
   大工職許可証は縦長、うめの名刺画像は横長で、枠の比率と合わない。
   cover のままだと札の中央の帯しか映らず、創業100年の裏づけという役割を果たせない。
   余白は木目色で埋めて意匠に馴染ませる。 */
.comp-photos .ph.has-img{background:var(--wood-pale);padding:8px}
.comp-photos .ph.has-img img{object-fit:contain}
.comp-table{width:100%;border-collapse:collapse;font-size:14px}
.comp-table th,.comp-table td{text-align:left;vertical-align:top;padding:16px 10px;border-bottom:1px solid #e8dfd0}
.comp-table th{width:180px;font-weight:700;color:var(--wood-deep);letter-spacing:.08em;white-space:nowrap}
.comp-table td{color:var(--ink-soft)}
.comp-table td ul{margin:0;padding-left:1.1em}
.comp-table td li{margin-bottom:2px}
.sns{display:flex;gap:12px;margin-top:26px}
.sns a{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;
  border:1px solid #d8cdb8;border-radius:999px;padding:7px 16px}
.sns a:hover{background:var(--wood-pale)}

/* ===== お問い合わせ ===== */
.contact{background:linear-gradient(180deg,var(--bg),#EFE7D8)}
.contact-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:24px}
.c-line{background:var(--panel);border-radius:10px;padding:36px;text-align:center;border-top:5px solid var(--line-green)}
.c-line h3{font-family:var(--serif);font-size:20px;letter-spacing:.08em;margin-bottom:8px}
.c-line p{font-size:13.5px;color:var(--ink-soft);margin-bottom:20px}
.c-others{display:grid;gap:16px}
.c-box{background:var(--panel);border-radius:10px;padding:22px 26px}
.c-box b{font-family:var(--serif);font-size:15px;letter-spacing:.1em;display:block;margin-bottom:4px}
.c-box .tel{font-family:var(--serif);font-size:26px;letter-spacing:.05em}
.c-box .c-link{font-family:var(--serif);font-size:17px;letter-spacing:.05em;display:inline-block;margin-bottom:6px}
.c-box small{font-size:12px;color:var(--ink-soft);display:block}
/* 押せるボタンではなく「約束の提示」。ボタン風にしない（2026-08-07 吉岡の指摘） */
.offer-list{list-style:none;margin:34px auto 0;max-width:640px;display:grid;gap:10px}
.offer-list li{position:relative;padding-left:30px;font-size:14.5px;color:var(--ink-soft);line-height:1.8}
.offer-list li::before{content:"✔";position:absolute;left:0;top:0;color:var(--wood);font-weight:700}
.offer-list strong{color:var(--ink)}
.c-note{font-size:12px;color:var(--ink-soft);margin-top:14px}
/* 電話の大ボタン（LINE未取得のあいだの主導線） */
.btn-tel--big{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:var(--wood-deep);color:#F6EFDF;font-family:var(--serif);font-size:24px;letter-spacing:.06em;
  padding:14px 36px;border-radius:999px;box-shadow:0 3px 10px rgba(110,82,48,.3)}
.btn-tel--big::before{content:"☎";font-size:18px}
.btn-tel--big:hover{filter:brightness(1.08)}

/* ===== 固定ページ本文 ===== */
.entry{background:var(--panel);padding:76px 0}
.entry-body{max-width:820px;margin:0 auto;padding:0 20px;font-size:15px;color:var(--ink-soft)}
.entry-body h2{font-family:var(--serif);font-size:22px;color:var(--ink);letter-spacing:.1em;
  font-weight:600;margin:36px 0 14px;padding-bottom:8px;border-bottom:1px solid #e8dfd0}
.entry-body h3{font-family:var(--serif);font-size:18px;color:var(--ink);letter-spacing:.08em;font-weight:600;margin:26px 0 10px}
.entry-body p{margin-bottom:16px}
.entry-body ul,.entry-body ol{margin:0 0 16px 1.4em}
.entry-body li{margin-bottom:6px}
.entry-body a{color:var(--wood-deep);border-bottom:1px solid var(--wood-pale)}
.entry-body table{width:100%;border-collapse:collapse;font-size:14px;margin-bottom:20px}
.entry-body th,.entry-body td{text-align:left;vertical-align:top;padding:14px 10px;border-bottom:1px solid #e8dfd0}
.entry-body th{width:180px;font-weight:700;color:var(--wood-deep);white-space:nowrap}

/* ===== フッター ===== */
footer{background:#2A2521;color:#CFC5B4;padding:44px 0 90px;font-size:13px}
.f-grid{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap}
.f-brand{font-family:var(--serif);color:#F6EFDF;font-size:17px;letter-spacing:.14em;margin-bottom:10px}
footer .sns a{border-color:#57503f;color:#CFC5B4}
.f-addr{display:inline-flex;flex-wrap:wrap;align-items:center;gap:10px}
.f-addr:hover,footer a[href^="tel:"]:hover{color:#F6EFDF}
.map-ic{font-size:11px;letter-spacing:.1em;border:1px solid #57503f;border-radius:999px;padding:2px 12px;white-space:nowrap}
.f-addr:hover .map-ic{border-color:#8d8471}
footer a[href^="tel:"]{border-bottom:1px dotted #6a6252}
.f-nav{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;font-size:12.5px}
.f-nav a:hover{color:#F6EFDF}
.f-copy{text-align:center;margin-top:34px;font-size:11px;opacity:.6}

/* ===== モバイル固定CTA ===== */
.sp-cta{position:fixed;bottom:0;left:0;right:0;z-index:120;display:none;
  grid-template-columns:1fr 1fr;box-shadow:0 -4px 16px rgba(0,0,0,.18)}
.sp-cta a{padding:15px 0;text-align:center;font-weight:700;font-size:14px;color:#fff}
.sp-cta .a-line{background:var(--line-green)}
.sp-cta .a-tel{background:var(--wood-deep)}

/* ===== レスポンシブ ===== */
@media(max-width:1120px){
  nav.gnav{gap:18px;font-size:13px}
  .h-inner{gap:16px}
  .h-tel b{font-size:17px}
}
@media(max-width:960px){
  nav.gnav{display:none}
  .nav-toggle{display:flex}
  /* 960px以下で、かつ開いているときだけ出す。PC幅では is-open が残っていても隠れる */
  .sp-nav.is-open{display:flex}
  .scope-grid{grid-template-columns:repeat(3,1fr)}
  .flow-grid{grid-template-columns:1fr 1fr}
  .single-body{grid-template-columns:1fr;gap:28px}
  .wcard-ba .ph{height:200px}
  .wcard-solo .ph{height:200px}
  .single-ba .ph img{height:340px}
  .single-solo .ph img{height:400px}
  .akiya-shot .ph{height:260px}
}
@media(max-width:680px){
  section{padding:56px 0}
  /* ヘッダーの電話番号とLINEボタンは、幅が足りないので下げる。
     .brand と .h-cta はどちらも flex-shrink:0 のため、375px では収まらず
     33px はみ出して全ページに横スクロールが出ていた（2026-08-17 実測）。
     この幅では下部固定バー（.sp-cta）がLINEと電話を常時出しているので導線は減らない。 */
  .h-tel{display:none}
  .line-btn--header{display:none}
  .hero-shot{height:400px}
  .hero-copy{padding-bottom:44px}
  .trust-grid{grid-template-columns:1fr;text-align:center;gap:26px}
  .emblem{margin:0 auto}
  .tnum{text-align:left}
  .trust-nums{justify-content:center}
  .works-grid{grid-template-columns:1fr}
  .wcard-ba .ph{height:170px}
  .wcard-solo .ph{height:210px}
  .single-solo .ph img{height:300px}
  .akiya-grid{grid-template-columns:1fr}
  .akiya-shot .ph{height:190px}
  .contact-grid{grid-template-columns:1fr}
  .btn-tel--big{font-size:21px;padding:13px 26px}
  .lightbox{padding:12px}
  .lightbox-close{top:8px;right:10px}
  .scope-grid{grid-template-columns:repeat(2,1fr)}
  .comp-photos{grid-template-columns:1fr}
  /* スマホでは2枚を縦に積む（横に並べると1枚が小さくなりすぎるため） */
  .single-ba{flex-direction:column;align-items:center;gap:14px}
  .single-ba .ph img{height:260px}
  .entry{padding:48px 0}
  /* 指でタップできる大きさ（約44px）を確保する */
  .comp-table a[href^="tel:"],footer a[href^="tel:"]{display:inline-block;padding:12px 0}
  .comp-table th,.comp-table td{display:block;width:auto;border-bottom:none;padding:10px 0 0}
  .comp-table td{padding:0 0 14px;border-bottom:1px solid #e8dfd0}
  .entry-body th,.entry-body td{display:block;width:auto;border-bottom:none;padding:10px 0 0}
  .entry-body td{padding:0 0 14px;border-bottom:1px solid #e8dfd0}
  .sp-cta{display:grid}
}

/* =========================================================
   下層ページ（空き家再生・流れ・会社概要・お問い合わせ）
   ========================================================= */

/* --- 共通のCTA帯（各ページ末尾で行き止まりを作らない） --- */
.cta-band{background:linear-gradient(180deg,var(--bg),#EFE7D8);text-align:center;border-top:1px solid #eee5d6}
.cta-band h2{font-family:var(--serif);font-size:clamp(21px,3vw,27px);letter-spacing:.12em;font-weight:600}
.cta-lead{font-size:14.5px;color:var(--ink-soft);margin-top:14px}
.cta-actions{display:flex;justify-content:center;align-items:center;gap:24px;flex-wrap:wrap;margin-top:28px}
.cta-tel{font-family:var(--serif);line-height:1.3;text-align:left}
.cta-tel small{display:block;font-size:11px;color:var(--ink-soft);letter-spacing:.1em}
.cta-tel b{display:block;font-size:28px;letter-spacing:.04em}
.cta-tel:hover b{color:var(--wood-deep)}
.cta-note{font-size:13px;color:var(--ink-soft);margin-top:22px}
.cta-note a{color:var(--wood-deep);border-bottom:1px solid var(--wood-pale)}

/* --- 空き家再生ページ --- */
.akiya-ba--wide{grid-template-columns:1fr 1fr;gap:20px}
.akiya-ba--wide .ph{height:340px}
.stories{background:var(--panel);border-top:1px solid #eee5d6;border-bottom:1px solid #eee5d6}
.story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.story-card{background:var(--bg);border:1px solid #e8dfd0;border-radius:8px;padding:28px 24px}
.story-card h3{font-family:var(--serif);font-size:17px;letter-spacing:.08em;font-weight:600;line-height:1.7;margin-bottom:12px}
.story-card p{font-size:13.5px;color:var(--ink-soft)}
.svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.svc-card{background:var(--panel);border:1px solid #e8dfd0;border-radius:8px;padding:24px 26px}
.svc-card b{font-family:var(--serif);font-size:16.5px;letter-spacing:.08em;display:block;margin-bottom:8px}
.svc-card p{font-size:13.5px;color:var(--ink-soft)}
.svc-card small{display:block;font-size:12px;margin-top:6px;opacity:.85}
.btob{margin-top:32px;background:var(--wood-pale);border-radius:8px;padding:24px 28px}
.btob b{font-family:var(--serif);font-size:15px;letter-spacing:.1em;color:var(--wood-deep);display:block;margin-bottom:6px}
.btob p{font-size:13.5px;color:var(--ink-soft)}

/* --- ご相談の流れページ --- */
.flow-steps{list-style:none;margin:0;padding:0;display:grid;gap:48px;counter-reset:none}
.flow-step{display:grid;grid-template-columns:64px 1fr 1.2fr;gap:28px;align-items:start;position:relative}
.flow-step::after{content:"";position:absolute;left:31px;top:74px;bottom:-48px;width:2px;background:#e3dacb}
.flow-step:last-child::after{display:none}
.flow-num{width:64px;height:64px;border-radius:50%;background:var(--wood-deep);color:#F6EFDF;
  font-family:var(--serif);font-size:22px;display:flex;align-items:center;justify-content:center;
  position:relative;z-index:1;box-shadow:0 0 0 5px var(--bg)}
.flow-photo .ph{height:180px;border-radius:8px}
/* 挿絵（線画）。写真枠と同じ寸法・角丸に揃える。
   viewBox の縦横比（480:180）を保ったまま幅いっぱいに伸びる。 */
.flow-photo .art{display:block;width:100%;max-width:480px;height:auto;border-radius:8px;border:1px solid #e3dacb}
.flow-text h2{font-family:var(--serif);font-size:21px;letter-spacing:.1em;font-weight:600}
.flow-lead{font-size:14px;color:var(--wood-deep);font-weight:700;margin:6px 0 12px}
.flow-text p{font-size:14.5px;color:var(--ink-soft)}

/* --- 会社概要ページ --- */
.comp-map{margin-top:28px;text-align:center}
.comp-map-link{display:inline-block;border:1px solid var(--wood);color:var(--wood-deep);font-weight:700;
  font-size:13.5px;letter-spacing:.08em;padding:11px 30px;border-radius:999px}
.comp-map-link:hover{background:var(--wood-deep);color:#F6EFDF;border-color:var(--wood-deep)}

/* --- お問い合わせページ --- */
.contact-quick{background:var(--panel);border-bottom:1px solid #eee5d6}
.quick-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.quick-card{background:var(--bg);border:1px solid #e8dfd0;border-radius:10px;padding:32px 30px;text-align:center}
.quick-card--line{border-top:5px solid var(--line-green)}
.quick-card b{font-family:var(--serif);font-size:19px;letter-spacing:.08em;display:block;margin-bottom:10px}
.quick-card p{font-size:13.5px;color:var(--ink-soft);margin-bottom:20px}
.quick-tel{display:block;font-family:var(--serif);font-size:30px;letter-spacing:.04em;color:var(--wood-deep)}
.quick-card small{display:block;font-size:12px;color:var(--ink-soft);margin-top:4px}
.contact-form-sec{background:linear-gradient(180deg,var(--bg),#F1EADD)}
.form-wrap{max-width:720px;margin:0 auto;background:var(--panel);border:1px solid #e8dfd0;border-radius:10px;padding:36px 40px}
.form-note{max-width:720px;margin:20px auto 0;font-size:12.5px;color:var(--ink-soft);text-align:center}
.form-note a{color:var(--wood-deep);border-bottom:1px solid var(--wood-pale)}
.form-fallback{text-align:center;color:var(--ink-soft);font-size:14px}
.form-todo{background:#FDF6E7;border:1px solid #E5D3A8;border-radius:6px;padding:20px 22px;font-size:13.5px;color:var(--ink-soft)}
.form-todo b{display:block;color:var(--shu);margin-bottom:8px}
.form-todo code{background:rgba(0,0,0,.05);padding:2px 6px;border-radius:3px;font-size:12.5px}
.contact-access{background:var(--panel);border-top:1px solid #eee5d6}

/* --- Contact Form 7 の見た目（プラグイン側のマークアップに当てる） --- */
.form-wrap label{display:block;margin-bottom:20px;font-size:14px;font-weight:700;letter-spacing:.06em}
.form-wrap .req{background:var(--shu);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.1em;
  padding:2px 8px;border-radius:3px;margin-left:8px;vertical-align:2px}
.form-wrap input[type=text],.form-wrap input[type=email],.form-wrap input[type=tel],.form-wrap textarea{
  display:block;width:100%;margin-top:8px;font-family:inherit;font-size:15px;color:var(--ink);
  background:#fff;border:1px solid #d8cdb8;border-radius:5px;padding:12px 14px;font-weight:400;
  line-height:1.7;transition:.15s}
.form-wrap input:focus,.form-wrap textarea:focus{outline:none;border-color:var(--wood);
  box-shadow:0 0 0 3px rgba(156,122,77,.15)}
.form-wrap textarea{min-height:160px;resize:vertical}
.form-consent{font-size:13.5px;color:var(--ink-soft);margin:24px 0}
.form-consent a{color:var(--wood-deep);border-bottom:1px solid var(--wood-pale)}
.form-wrap input[type=submit],.form-wrap button[type=submit]{display:block;margin:8px auto 0;cursor:pointer;
  background:var(--wood-deep);color:#F6EFDF;font-family:var(--serif);font-size:17px;letter-spacing:.16em;
  border:none;border-radius:999px;padding:15px 60px;transition:.2s;box-shadow:0 3px 10px rgba(110,82,48,.28)}
.form-wrap input[type=submit]:hover,.form-wrap button[type=submit]:hover{filter:brightness(1.1)}
.wpcf7-not-valid-tip{color:var(--shu);font-size:12.5px;font-weight:700;margin-top:6px;display:block}
.wpcf7 form .wpcf7-response-output{margin:24px 0 0;padding:14px 18px;border-radius:6px;font-size:13.5px;
  border-width:1px}
.wpcf7 form.sent .wpcf7-response-output{border-color:var(--line-green);background:#F2FBF5;color:#1a6b38}
.wpcf7 form.invalid .wpcf7-response-output,.wpcf7 form.failed .wpcf7-response-output{
  border-color:var(--shu);background:#FCF4F2;color:var(--shu)}
.wpcf7-spinner{margin:12px auto 0;display:block}

@media(max-width:960px){
  .story-grid{grid-template-columns:1fr}
  .flow-step{grid-template-columns:52px 1fr;gap:20px}
  .flow-step::after{left:25px;top:62px}
  .flow-num{width:52px;height:52px;font-size:19px}
  .flow-photo{grid-column:2}
  .flow-text{grid-column:2}
  .akiya-ba--wide .ph{height:240px}
}
@media(max-width:680px){
  .quick-grid{grid-template-columns:1fr}
  .svc-grid{grid-template-columns:1fr}
  .akiya-ba--wide{grid-template-columns:1fr}
  .akiya-ba--wide .ph{height:210px}
  .form-wrap{padding:26px 20px}
  .cta-actions{gap:18px}
  .cta-tel{text-align:center}
  .flow-steps{gap:36px}
  .flow-step::after{bottom:-36px}
}

/* ===== 印刷（PDF化・紙レビュー用） ===== */
@media print{
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  @page{size:A4;margin:8mm}
  header{position:static;backdrop-filter:none}
  .sp-cta{display:none!important}
  html{scroll-behavior:auto}
  body{letter-spacing:.02em}
  section{padding:34px 0}
  .hero-shot{height:340px}
  .wcard,.fstep,.scard,.c-line,.c-box,.est-note,.emblem,.kodawari,.akiya-shot{break-inside:avoid}
  .comp-table tr{break-inside:avoid}
  .works,.akiya,.company{break-before:page}
  .more,.akiya-cta{box-shadow:none}
}