/* =========================================================
   KATSUKEN theme — 「快適より、心地よさを。」
   生成り × 墨色 × 木の茶。写真主導・余白・明朝の静けさ。
   ========================================================= */
:root{
  --bg:#f7f5f1;
  --ink:#2b2a26;
  --ink-soft:#5c584f;
  --line:#dcd7cd;
  --wood:#8c6f4e;
  --green:#4a5548;
  --white:#fdfcfa;
  --serif:"Shippori Mincho","Yu Mincho",serif;
  --sans:"Zen Kaku Gothic New","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);font-size:16px;line-height:2;letter-spacing:.06em;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}

/* ===== ヘッダー（常時背景あり・ロゴ表示） ===== */
.header{position:fixed;inset:0 0 auto 0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:14px 32px;background:rgba(247,245,241,.95);box-shadow:0 1px 0 var(--line)}
.brand{display:flex;align-items:center}
.brand-logo{height:34px;width:auto;display:block}
.gnav{display:flex;gap:28px;font-size:13px;letter-spacing:.14em;color:var(--ink);align-items:center}
.gnav li,.foot-nav li,.drawer-nav li{list-style:none}
.gnav a{opacity:.9}
.gnav a:hover{opacity:.55}
.nav-cta{border:1px solid currentColor;padding:6px 18px;border-radius:2px}
.menu-btn{display:none;background:none;border:none;cursor:pointer;width:44px;height:44px;position:relative;z-index:130}
.menu-btn span{position:absolute;left:10px;right:10px;height:1.5px;background:var(--ink);transition:.3s}
.menu-btn span:nth-child(1){top:17px}
.menu-btn span:nth-child(2){top:26px}
body.drawer-open .menu-btn span{background:var(--ink)}
body.drawer-open .menu-btn span:nth-child(1){top:22px;transform:rotate(20deg)}
body.drawer-open .menu-btn span:nth-child(2){top:22px;transform:rotate(-20deg)}
@media(max-width:900px){.gnav{display:none}.menu-btn{display:block}}

/* ドロワー */
.drawer{position:fixed;inset:0;background:var(--bg);z-index:120;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:8px;opacity:0;visibility:hidden;transition:.35s}
body.drawer-open .drawer{opacity:1;visibility:visible}
.drawer-nav{display:flex;flex-direction:column;text-align:center;gap:4px}
.drawer-nav a{font-family:var(--serif);font-size:19px;letter-spacing:.2em;padding:10px 40px}
.drawer-tel{margin-top:28px;font-size:14px;letter-spacing:.1em;color:var(--ink-soft)}
.drawer-tel a{border-bottom:1px solid var(--wood);color:var(--wood)}

/* ===== ファーストビュー ===== */
.fv{position:relative;height:100svh;min-height:560px;overflow:hidden}
.fv img{width:100%;height:100%;object-fit:cover}
.fv-slides{position:absolute;inset:0}
.fv-slides img{position:absolute;inset:0;opacity:0;transition:opacity 1.8s ease}
.fv-slides img.on{opacity:1}
.fv::after{content:"";position:absolute;inset:0;background:linear-gradient(15deg,rgba(20,18,14,.52) 0%,rgba(20,18,14,.08) 45%,rgba(20,18,14,0) 70%)}
.fv-copy{position:absolute;left:6%;bottom:14%;z-index:2;color:#fff}
.fv-copy h1{font-family:var(--serif);font-weight:500;font-size:clamp(30px,4.6vw,56px);letter-spacing:.14em;line-height:1.7;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.fv-copy p{margin-top:18px;font-family:var(--serif);font-size:13px;letter-spacing:.3em;opacity:.9}
.fv-tag{position:absolute;right:5%;bottom:12%;z-index:2;background:rgba(253,252,250,.92);color:var(--ink);font-size:12px;letter-spacing:.12em;padding:14px 22px;border-radius:2px;display:flex;flex-direction:column;gap:2px;line-height:1.7}
.fv-tag strong{font-family:var(--serif);font-size:14px;font-weight:500}
.fv-tag span{color:var(--wood)}
.scroll-cue{position:absolute;left:6.5%;bottom:4%;z-index:2;color:#fff;font-size:10px;letter-spacing:.3em;writing-mode:vertical-rl;display:flex;align-items:center;gap:10px;opacity:.8}
.scroll-cue::after{content:"";width:1px;height:56px;background:#fff;animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:700px){.fv-copy{left:7%;bottom:20%}.fv-tag{right:auto;left:7%;bottom:6%;padding:10px 16px}}
@media(prefers-reduced-motion:reduce){.scroll-cue::after{animation:none}}

/* ===== 共通 ===== */
.sec{padding:110px 6%;max-width:1240px;margin:0 auto}
.label{font-size:12px;letter-spacing:.34em;color:var(--wood);margin-bottom:14px}
.h2{font-family:var(--serif);font-weight:500;font-size:clamp(24px,3vw,36px);letter-spacing:.1em;line-height:1.9;margin-bottom:34px}
.lead{max-width:640px;color:var(--ink-soft);font-size:15px}
.btn{display:inline-block;margin-top:40px;font-size:13px;letter-spacing:.2em;border:1px solid var(--ink);padding:16px 44px;border-radius:2px;transition:.3s;background:transparent;cursor:pointer}
.btn:hover{background:var(--ink);color:var(--bg)}
.btn--fill{background:var(--green);border-color:var(--green);color:#fff}
.btn--fill:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.bridge{margin-top:56px;font-family:var(--serif);font-size:17px;letter-spacing:.14em;color:var(--ink-soft)}
@media(max-width:700px){.sec{padding:72px 7%}}

/* ===== イベント帯 ===== */
.event{background:var(--white);border-block:1px solid var(--line)}
.event-in{max-width:1240px;margin:0 auto;padding:34px 6%;display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.event-date{font-family:var(--serif);color:var(--green);font-size:15px;letter-spacing:.12em;white-space:nowrap}
.event-txt{flex:1;min-width:240px;font-size:14px;color:var(--ink-soft);line-height:1.9}
.event .btn{margin-top:0;padding:13px 30px;white-space:nowrap}

/* ===== 考え方 ===== */
.concept-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center}
.concept-photos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.concept-photos figure{position:relative;overflow:hidden;margin:0}
.concept-photos img{width:100%;height:auto}
.concept-photos figcaption{position:absolute;left:0;bottom:0;background:rgba(43,42,38,.72);color:#fff;font-size:11px;letter-spacing:.2em;padding:6px 14px}
@media(max-width:900px){.concept-grid{grid-template-columns:1fr}}

/* ===== WORKS ===== */
.works{background:var(--white);border-block:1px solid var(--line)}
.works-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:44px 36px;margin-top:16px}
.work-card figure{overflow:hidden;margin:0}
.work-card img{aspect-ratio:16/10;object-fit:cover;width:100%;transition:transform .6s}
.work-card:hover img{transform:scale(1.03)}
.work-name{font-family:var(--serif);font-size:18px;letter-spacing:.12em;margin-top:18px}
.work-copy{font-size:13.5px;color:var(--ink-soft);margin-top:4px;letter-spacing:.08em}
@media(max-width:700px){.works-grid{grid-template-columns:1fr;gap:40px}}

/* ===== VOICE ===== */
.voice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:10px}
.voice-card{background:var(--white);border:1px solid var(--line);padding:38px 30px;display:flex;flex-direction:column;gap:18px;transition:.3s}
.voice-card:hover{border-color:var(--wood)}
.voice-mark{font-family:var(--serif);font-size:34px;color:var(--wood);line-height:1}
.voice-body{font-size:14.5px;line-height:2.1;flex:1}
.voice-name{font-size:12px;letter-spacing:.2em;color:var(--ink-soft)}
@media(max-width:900px){.voice-grid{grid-template-columns:1fr}}

/* ===== PERFORMANCE ===== */
.perf{background:var(--ink);color:var(--bg)}
.perf .label{color:#c8b18c}
.perf .h2{color:#fff;font-size:clamp(28px,3.6vw,44px)}
.perf-sub{font-family:var(--serif);letter-spacing:.18em;font-size:16px;color:#c8b18c;margin:-16px 0 28px}
.perf .lead{color:#c9c5bb}
.perf-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:56px}
.perf-card{border:1px solid #4a4842;padding:30px 22px;text-align:center;display:flex;flex-direction:column;gap:8px}
.perf-card b{font-family:var(--serif);font-size:16px;letter-spacing:.1em;font-weight:500}
.perf-card span{font-size:12px;color:#a09b8e;letter-spacing:.14em}
.perf-all{font-size:11px;letter-spacing:.3em;color:#c8b18c}
.perf .btn{border-color:#8f8a7e;color:#e8e4da}
.perf .btn:hover{background:#e8e4da;color:var(--ink)}
.perf .bridge{color:#a09b8e}
@media(max-width:900px){.perf-cards{grid-template-columns:repeat(2,1fr)}}

/* ===== SHOWHOME ===== */
.show-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.show-grid figure{margin:0}
.show-grid img{aspect-ratio:4/3;object-fit:cover;width:100%}
.btn-row{display:flex;gap:16px;flex-wrap:wrap}
.btn-row .btn{margin-top:32px}
@media(max-width:900px){.show-grid{grid-template-columns:1fr;gap:36px}}

/* ===== MESSAGE ===== */
.msg{background:var(--white);border-block:1px solid var(--line)}
.msg-grid{display:grid;grid-template-columns:.9fr 1.4fr;gap:64px;align-items:start}
.msg-grid figure{margin:0}
.msg-grid figure img{aspect-ratio:3/4;object-fit:cover;width:100%}
.msg-photo{background:#e6e1d6;aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;color:var(--ink-soft);font-size:12px;letter-spacing:.24em;text-align:center;line-height:2.4}
.qa{margin-bottom:30px}
.qa dt{font-family:var(--serif);font-size:16.5px;letter-spacing:.08em;margin-bottom:8px;color:var(--green)}
.qa dd{font-size:14.5px;color:var(--ink-soft);padding-left:1em;border-left:2px solid var(--line);margin-left:0}
.creds{font-size:11.5px;color:var(--ink-soft);letter-spacing:.1em;line-height:2.2;border-top:1px solid var(--line);padding-top:22px;margin-top:34px}
@media(max-width:900px){.msg-grid{grid-template-columns:1fr}.msg-photo{max-width:320px}}

/* ===== COLUMN ===== */
.col-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:10px}
.col-card{background:var(--white);border:1px solid var(--line);transition:.3s}
.col-card:hover{border-color:var(--wood)}
.col-card img{aspect-ratio:16/9;object-fit:cover;width:100%}
.col-card .in{padding:22px 24px 28px}
.col-date{font-size:11px;letter-spacing:.2em;color:var(--wood)}
.col-title{font-family:var(--serif);font-size:16px;letter-spacing:.08em;margin-top:8px;line-height:1.9}
.mag{margin-top:64px;background:var(--green);color:#fff;padding:48px 6%;text-align:center}
.mag p{font-size:14px;letter-spacing:.1em;opacity:.92}
.mag .btn{border-color:#fff;color:#fff;margin-top:26px}
.mag .btn:hover{background:#fff;color:var(--green)}
.insta{margin-top:26px;text-align:center;font-size:13px;letter-spacing:.16em}
.insta a{border-bottom:1px solid var(--wood);padding-bottom:3px;color:var(--wood)}
@media(max-width:900px){.col-grid{grid-template-columns:1fr}}

/* ===== CTA ===== */
.cta{background:var(--white);border-top:1px solid var(--line);text-align:center}
.cta .h2{margin-bottom:10px}
.cta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px;text-align:left}
.cta-card{border:1px solid var(--line);padding:40px 32px;display:flex;flex-direction:column;background:var(--bg)}
.cta-for{font-size:12px;letter-spacing:.2em;color:var(--wood);margin-bottom:12px}
.cta-card h3{font-family:var(--serif);font-weight:500;font-size:19px;letter-spacing:.1em;margin-bottom:14px}
.cta-card p{font-size:13.5px;color:var(--ink-soft);flex:1}
.cta-card .btn{width:100%;text-align:center;padding:15px 0}
@media(max-width:900px){.cta-grid{grid-template-columns:1fr}}

/* ===== フッター ===== */
.footer{background:var(--ink);color:#b9b4a8;padding:72px 6% 120px;font-size:13px}
.foot-in{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:1.2fr 1fr;gap:48px}
.foot-brand{font-family:var(--serif);font-size:20px;letter-spacing:.2em;color:#fff}
.foot-brand small{display:block;font-size:10px;letter-spacing:.3em;margin-top:6px;color:#b9b4a8}
.foot-addr{margin-top:22px;line-height:2.2}
.foot-addr a{color:#e8e4da;border-bottom:1px solid #6a665c}
.foot-nav{display:grid;grid-template-columns:1fr 1fr;gap:6px 32px;align-content:start}
.foot-nav a:hover{color:#fff}
.foot-sns{margin-top:24px;display:flex;gap:20px}
.foot-sns a{color:#e8e4da;letter-spacing:.14em}
.copy{max-width:1240px;margin:56px auto 0;border-top:1px solid #4a4842;padding-top:24px;font-size:11px;letter-spacing:.14em}
@media(max-width:900px){.foot-in{grid-template-columns:1fr}}

/* ===== スマホ追従バー ===== */
.stickybar{position:fixed;left:0;right:0;bottom:0;z-index:110;display:none;grid-template-columns:1fr 1fr;box-shadow:0 -4px 18px rgba(0,0,0,.14)}
.stickybar a{padding:16px 0;text-align:center;font-size:14px;letter-spacing:.16em;color:#fff}
.stickybar .s1{background:var(--green)}
.stickybar .s2{background:var(--wood)}
@media(max-width:900px){.stickybar{display:grid}}

/* ===== フェードイン ===== */
.fadein{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s ease}
.fadein.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.fadein{opacity:1;transform:none;transition:none}}

/* =========================================================
   下層ページ共通
   ========================================================= */
.page-head{padding:170px 6% 70px;max-width:1240px;margin:0 auto}
.page-head .label{margin-bottom:10px}
.page-title{font-family:var(--serif);font-weight:500;font-size:clamp(26px,3.4vw,40px);letter-spacing:.12em;line-height:1.8}
.content-area{max-width:840px;margin:0 auto;padding:0 6% 110px}

/* 記事本文（ブロックエディタ出力） */
.entry-body{font-size:15.5px;line-height:2.3}
.entry-body p{margin-bottom:1.6em}
.entry-body h2{font-family:var(--serif);font-weight:500;font-size:24px;letter-spacing:.08em;margin:2.4em 0 1em;padding-bottom:.5em;border-bottom:1px solid var(--line)}
.entry-body h3{font-family:var(--serif);font-weight:500;font-size:19px;margin:2em 0 .8em;padding-left:.8em;border-left:3px solid var(--wood)}
.entry-body img{margin:2em auto}
.entry-body blockquote{border-left:3px solid var(--line);padding-left:1.4em;color:var(--ink-soft);margin:1.6em 0}
.entry-body ul,.entry-body ol{padding-left:1.6em;margin-bottom:1.6em}
.entry-meta{font-size:12px;letter-spacing:.2em;color:var(--wood);margin-bottom:16px}
.entry-thumb{margin:0 0 40px}
.entry-thumb img{width:100%;aspect-ratio:16/9;object-fit:cover}

/* 記事末尾の誘導 */
.entry-cta{margin-top:70px;border:1px solid var(--line);background:var(--white);padding:40px 36px;text-align:center}
.entry-cta p{font-size:14px;color:var(--ink-soft)}
.entry-cta .btn{margin-top:20px}

/* 前後の記事 */
.post-nav{display:flex;justify-content:space-between;gap:20px;margin-top:56px;font-size:13px}
.post-nav a{color:var(--ink-soft);max-width:46%}
.post-nav a:hover{color:var(--wood)}

/* アーカイブ（施工事例・声・ブログ一覧） */
.archive-grid{max-width:1240px;margin:0 auto;padding:0 6% 110px;display:grid;grid-template-columns:repeat(3,1fr);gap:36px}
.archive-grid--2col{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.archive-grid,.archive-grid--2col{grid-template-columns:1fr}}
.pagination{max-width:1240px;margin:0 auto;padding:0 6% 90px;text-align:center;font-size:14px;letter-spacing:.2em}
.pagination .page-numbers{display:inline-block;padding:8px 14px;border:1px solid var(--line);margin:0 4px;border-radius:2px}
.pagination .current{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* 施工事例詳細：スペック表 */
.spec-table{width:100%;border-collapse:collapse;margin:2em 0;font-size:14px}
.spec-table th,.spec-table td{border:1px solid var(--line);padding:12px 18px;text-align:left}
.spec-table th{background:var(--white);font-weight:500;font-family:var(--serif);width:200px;letter-spacing:.1em}
.works-voice-link{margin-top:40px;border-left:3px solid var(--wood);background:var(--white);padding:28px 32px}
.works-voice-link .label{margin-bottom:6px}
.works-voice-link a{font-family:var(--serif);font-size:17px;border-bottom:1px solid var(--wood)}
.youtube-wrap{position:relative;aspect-ratio:16/9;margin:2em 0}
.youtube-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ===== FAQ（AEO用ショートコード） ===== */
.faq-item{border:1px solid var(--line);background:var(--white);margin-bottom:16px}
.faq-q{font-family:var(--serif);font-size:16px;letter-spacing:.06em;padding:18px 24px;border-bottom:1px solid var(--line);position:relative;padding-left:52px}
.faq-q::before{content:"Q";position:absolute;left:22px;color:var(--wood);font-size:18px}
.faq-a{padding:18px 24px 18px 52px;font-size:14.5px;color:var(--ink-soft);position:relative}
.faq-a::before{content:"A";position:absolute;left:22px;color:var(--green);font-family:var(--serif);font-size:18px}

/* SNSアイコン */
.sns-ico{width:19px;height:19px;vertical-align:-4px;margin-right:6px}

/* ===== スマホ調整(見切れ対策) ===== */
@media(max-width:700px){
  .fv{height:auto;min-height:0}
  .fv-slides{position:relative;aspect-ratio:1/1}
  .fv::after{display:none}
  .fv-copy{position:static;color:var(--ink);padding:26px 7% 4px}
  .fv-copy h1{text-shadow:none;font-size:32px}
  .fv-copy p{opacity:.7;font-size:12px}
  .fv-tag{position:static;display:inline-flex;margin:12px 7% 8px;border:1px solid var(--line)}
  .scroll-cue{display:none}
  .concept-photos{grid-template-columns:1fr}
  .concept-photos img{aspect-ratio:auto}
}



/* ===== 見出しを一行に収める ===== */
.perf .h2{font-size:clamp(18px,3vw,38px);white-space:nowrap}
@media(max-width:700px){
  .h2{white-space:nowrap;letter-spacing:.06em}
  #showhome .h2{font-size:5.4vw}
  #voice .h2{font-size:7vw}
  .perf .h2{font-size:6.2vw}
  #message .h2{font-size:5.9vw}
  #column .h2{font-size:5.2vw}
  .cta .h2{font-size:6.6vw}
  #concept .h2{font-size:6vw}
}

/* ===== 施工事例アーカイブ：種別選択UI ===== */
.works-archive{max-width:1180px;margin:0 auto;padding:0 6% 100px}
.wchooser{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:10px}
@media(max-width:700px){.wchooser{grid-template-columns:1fr}}
.wch{position:relative;display:block;aspect-ratio:16/7;overflow:hidden;border-radius:2px;background:#e6e1d6}
.wch img{width:100%;height:100%;object-fit:cover;filter:brightness(.62);transition:.4s}
.wch:hover img{filter:brightness(.78);transform:scale(1.03)}
.wch-l{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-family:var(--serif);font-size:20px;letter-spacing:.22em;text-shadow:0 1px 14px rgba(0,0,0,.4)}
.wch-l small{font-size:11px;letter-spacing:.28em;margin-top:6px;opacity:.85}
.wch.on{outline:2px solid var(--wood);outline-offset:2px}
.wsec[hidden]{display:none}
.cat-h{font-family:var(--serif);font-size:21px;letter-spacing:.16em;margin:64px 0 24px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.wgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 28px}
@media(max-width:900px){.wgrid{grid-template-columns:1fr}}
.wcard figure{overflow:hidden;aspect-ratio:16/11;background:#e6e1d6;margin:0}
.wcard img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.wcard:hover img{transform:scale(1.04)}
.wcard .nm{font-family:var(--serif);font-size:16.5px;letter-spacing:.1em;margin-top:14px}
.wcard .sp{font-size:11.5px;color:var(--ink-soft);letter-spacing:.06em;margin-top:2px}