/* =========================================================
   TOKIWA – 共通スタイル
   カラーは :root の変数で一括管理（テーマ切替は html[data-theme]）
   ========================================================= */
/* =========================================================
   TOKIWA – Common Styles (WordPress / ACF 前提)
   カラーテーマは html[data-theme] で切替
   ========================================================= */
:root{
  /* ACF: brand colors —— テーマ「金茶」= 標準 */
  --c-base:#ffffff; --c-ivory:#faf8f3; --c-beige:#ece5d8;
  --c-ink:#1d1b18; --c-ink-soft:#55524c;
  --c-gold:#a68a5b; --c-gold-pale:#cdbb9a;
  --c-line:#e3ddd1; --c-dark:#1d1b18;
  --f-en:"Cormorant Garamond","Times New Roman",serif;
  --f-jp:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN",sans-serif;
  --w-content:1160px; --w-narrow:820px;
  --pad-x:clamp(20px,5vw,56px); --sec-y:clamp(88px,12vw,168px);
  --ease:cubic-bezier(.22,.61,.21,1);
}
/* ---- おすすめカラーバリエーション（営業デモ用） ---- */
html[data-theme="tokiwa"]{ --c-gold:#4f6151; --c-gold-pale:#a3b19a; --c-ivory:#f7f9f4; --c-beige:#e2e8da; --c-dark:#242e23; --c-line:#dde3d5; }
html[data-theme="ruri"]{   --c-gold:#3f5a80; --c-gold-pale:#a4b5cc; --c-ivory:#f6f8fa; --c-beige:#e1e6ec; --c-dark:#1b2432; --c-line:#dce2e9; }
html[data-theme="suou"]{   --c-gold:#8c4a52; --c-gold-pale:#c9a0a5; --c-ivory:#faf6f5; --c-beige:#ecdedb; --c-dark:#2b1e20; --c-line:#e7d9d7; }
html[data-theme="sumi"]{   --c-gold:#7d7d7b; --c-gold-pale:#c4c4c2; --c-ivory:#f7f7f6; --c-beige:#e8e7e4; --c-dark:#181818; --c-line:#e2e1de; }

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--c-base); color:var(--c-ink);
  font-family:var(--f-jp); font-weight:300; font-size:15px;
  line-height:2.1; letter-spacing:.08em; -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
ul,ol{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure{ margin:0; }

.ph{ background:var(--c-beige); overflow:hidden; }
.ph img{ width:100%; height:100%; object-fit:cover; transition:transform 1.6s var(--ease); }
a:hover .ph img{ transform:scale(1.045); }

.inner{ width:min(var(--w-content),100% - var(--pad-x)*2); margin-inline:auto; }
.inner--narrow{ width:min(var(--w-narrow),100% - var(--pad-x)*2); margin-inline:auto; }

/* ---- 横幅いっぱい(フルブリード)ユーティリティ：下層の写真主役レイアウト用 ---- */
.bleed{ width:100%; }
.cap{
  display:flex; align-items:center; gap:12px;
  padding:14px var(--pad-x) 0;
  font-size:11px; letter-spacing:.24em; color:var(--c-ink-soft);
}
.cap::before{ content:""; width:28px; height:1px; background:var(--c-gold); }

.sec{ padding-block:var(--sec-y); }
.sec--ivory{ background:var(--c-ivory); }
.sec--dark{ background:var(--c-dark); color:#fff; }
.sec--dark .sec-en{ color:#fff; }
.sec--dark .sec-jp{ color:rgba(255,255,255,.7); }
.sec--dark .sec-lead{ color:rgba(255,255,255,.74); }
.sec-head{ margin-bottom:clamp(44px,6vw,76px); }
.sec-en{ font-family:var(--f-en); font-weight:400; font-size:clamp(34px,4.6vw,58px); line-height:1.1; letter-spacing:.06em; color:var(--c-ink); }
.sec-en i{ font-style:italic; color:var(--c-gold); }
.sec-jp{ display:flex; align-items:center; gap:14px; margin-top:14px; font-size:12.5px; letter-spacing:.34em; color:var(--c-ink-soft); }
.sec-jp::before{ content:""; width:38px; height:1px; background:var(--c-gold); }
.sec-lead{ max-width:640px; margin-top:26px; color:var(--c-ink-soft); }

.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:space-between; gap:28px;
  min-width:250px; padding:17px 26px; border:1px solid var(--c-ink);
  font-size:13px; letter-spacing:.22em;
  transition:background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}
.btn::after{ content:"→"; font-family:var(--f-en); transition:transform .5s var(--ease); }
.btn:hover{ background:var(--c-ink); color:#fff; }
.btn:hover::after{ transform:translateX(6px); }
.btn--gold{ border-color:var(--c-gold); }
.btn--gold:hover{ background:var(--c-gold); border-color:var(--c-gold); }
.btn--white{ border-color:rgba(255,255,255,.75); color:#fff; }
.btn--white:hover{ background:#fff; color:var(--c-ink); }

.rv{ opacity:0; transform:translateY(28px); transition:opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.rv.is-in{ opacity:1; transform:none; }
.rv-d1{ transition-delay:.12s; } .rv-d2{ transition-delay:.24s; } .rv-d3{ transition-delay:.36s; }
@media (prefers-reduced-motion:reduce){
  .rv{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ---------------- HEADER ---------------- */
.header{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(18px,3vw,40px); height:88px;
  transition:background .6s var(--ease), box-shadow .6s var(--ease), height .6s var(--ease);
}
.header.is-solid{ background:rgba(255,255,255,.94); backdrop-filter:blur(8px); box-shadow:0 1px 0 var(--c-line); height:72px; }
.brand{ display:flex; flex-direction:column; line-height:1.2; }
.brand-en{ font-family:var(--f-en); font-size:26px; letter-spacing:.3em; color:#fff; transition:color .6s; }
.brand-jp{ font-size:10px; letter-spacing:.42em; color:rgba(255,255,255,.85); transition:color .6s; }
.header.is-solid .brand-en{ color:var(--c-ink); }
.header.is-solid .brand-jp{ color:var(--c-ink-soft); }
.gnav{ display:flex; align-items:center; gap:clamp(18px,2.2vw,30px); }
.gnav a{ font-size:12.5px; letter-spacing:.18em; color:#fff; white-space:nowrap; transition:color .6s, opacity .4s; }
.gnav a:hover{ opacity:.6; }
.header.is-solid .gnav a{ color:var(--c-ink); }
.gnav .nav-cta{ border:1px solid var(--c-gold); padding:11px 22px; letter-spacing:.2em; background:rgba(29,27,24,.25); transition:background .5s, color .5s; }
.gnav .nav-cta:hover{ background:var(--c-gold); color:#fff; opacity:1; }
.header.is-solid .gnav .nav-cta{ background:transparent; }
.header.is-solid .gnav .nav-cta:hover{ background:var(--c-gold); color:#fff; }
.menu-btn{ display:none; }
@media (max-width:1140px){
  .gnav{ display:none; }
  .menu-btn{ display:flex; flex-direction:column; justify-content:center; gap:7px; width:52px; height:52px; padding:0 10px; background:transparent; border:0; cursor:pointer; }
  .menu-btn span{ height:1px; background:#fff; transition:transform .5s var(--ease), opacity .4s, background .6s; }
  .header.is-solid .menu-btn span{ background:var(--c-ink); }
  .menu-btn.is-open span:nth-child(1){ transform:translateY(8px) rotate(20deg); background:var(--c-ink); }
  .menu-btn.is-open span:nth-child(2){ opacity:0; }
  .menu-btn.is-open span:nth-child(3){ transform:translateY(-8px) rotate(-20deg); background:var(--c-ink); }
}
.drawer{
  position:fixed; inset:0; z-index:40; background:var(--c-ivory);
  display:flex; flex-direction:column; justify-content:center;
  padding:0 clamp(28px,8vw,60px);
  opacity:0; visibility:hidden; transition:opacity .6s var(--ease), visibility .6s;
}
.drawer.is-open{ opacity:1; visibility:visible; }
.drawer a{ display:flex; align-items:baseline; gap:16px; padding:13px 0; border-bottom:1px solid var(--c-line); font-size:15px; letter-spacing:.16em; }
.drawer a small{ font-family:var(--f-en); font-size:11px; letter-spacing:.22em; color:var(--c-gold); }

/* ---------------- 下層ページヒーロー ---------------- */
.p-hero{ position:relative; height:min(72vh,680px); min-height:460px; background:var(--c-dark); overflow:hidden; }
.p-hero > .ph{ position:absolute; inset:0; }
.p-hero > .ph img{ opacity:.82; }
.p-hero::after{ content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(15,14,12,.42), rgba(15,14,12,.06) 45%, rgba(15,14,12,.5)); }
.p-hero-body{ position:absolute; z-index:2; left:var(--pad-x); right:var(--pad-x); bottom:clamp(40px,7vh,72px); color:#fff; }
.p-hero-body .en{ font-family:var(--f-en); font-weight:400; font-size:clamp(40px,6vw,76px); line-height:1.05; letter-spacing:.05em; }
.p-hero-body .en i{ font-style:italic; color:var(--c-gold-pale); }
.p-hero-body .jp{ display:flex; align-items:center; gap:14px; margin-top:16px; font-size:13px; letter-spacing:.34em; color:rgba(255,255,255,.88); }
.p-hero-body .jp::before{ content:""; width:38px; height:1px; background:var(--c-gold-pale); }
.crumb{ position:absolute; z-index:2; top:104px; left:var(--pad-x); display:flex; gap:12px; font-family:var(--f-en); font-size:11px; letter-spacing:.22em; color:rgba(255,255,255,.75); }
.crumb span::before{ content:"/"; margin-right:12px; opacity:.5; }

/* ---------------- CTA / FOOTER ---------------- */
.cta{ position:relative; padding:0; background:var(--c-dark); }
.cta .ph{ height:clamp(560px,74vh,720px); opacity:.5; }
.cta-body{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#fff; padding:0 var(--pad-x); }
.cta-body .en{ font-family:var(--f-en); font-style:italic; font-size:15px; letter-spacing:.3em; color:var(--c-gold-pale); }
.cta-body h2{ margin-top:22px; font-weight:300; font-size:clamp(20px,3vw,30px); letter-spacing:.3em; line-height:2; }
.cta-btns{ margin-top:44px; display:flex; flex-wrap:wrap; gap:16px; justify-content:center; }
.cta-tel{ margin-top:34px; font-size:12px; letter-spacing:.2em; color:rgba(255,255,255,.8); }
.cta-tel b{ display:block; font-family:var(--f-en); font-weight:400; font-size:30px; letter-spacing:.12em; color:#fff; }

.footer{ background:var(--c-base); padding:clamp(64px,8vw,104px) 0 0; }
.footer-grid{ display:grid; grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr)); gap:clamp(30px,4vw,64px); }
.footer .brand-en{ color:var(--c-ink); }
.footer .brand-jp{ color:var(--c-ink-soft); }
.footer-addr{ margin-top:22px; font-size:12px; line-height:2.2; color:var(--c-ink-soft); }
.footer-sns{ margin-top:18px; display:flex; gap:18px; font-family:var(--f-en); font-size:12px; letter-spacing:.2em; }
.footer-sns a{ color:var(--c-gold); }
.footer h4{ margin:0 0 16px; font-weight:400; font-size:12px; letter-spacing:.28em; color:var(--c-gold); font-family:var(--f-en); }
.footer-nav li{ margin-bottom:10px; }
.footer-nav a{ font-size:12.5px; letter-spacing:.14em; color:var(--c-ink-soft); transition:color .4s; }
.footer-nav a:hover{ color:var(--c-ink); }
.footer-bottom{ margin-top:clamp(48px,6vw,72px); padding:26px 0; border-top:1px solid var(--c-line); display:flex; flex-wrap:wrap; gap:12px 28px; justify-content:space-between; font-size:11px; letter-spacing:.16em; color:var(--c-ink-soft); }
.footer-bottom small{ font-family:var(--f-en); letter-spacing:.14em; }

/* ---------------- カラーチェンジ（営業デモ用・左下固定） ---------------- */
.theme-switch{ position:fixed; left:18px; bottom:18px; z-index:60; }
.ts-toggle{
  width:54px; height:54px; border-radius:50%;
  border:1px solid var(--c-gold); background:rgba(255,255,255,.92); backdrop-filter:blur(6px);
  cursor:pointer; display:grid; place-items:center;
  box-shadow:0 6px 24px rgba(0,0,0,.14);
  transition:transform .4s var(--ease);
}
.ts-toggle:hover{ transform:translateY(-2px); }
.ts-icon{ width:22px; height:22px; border-radius:50%; border:1px solid rgba(0,0,0,.08);
  background:conic-gradient(var(--c-gold) 0 25%, var(--c-dark) 25% 50%, var(--c-beige) 50% 75%, var(--c-gold-pale) 75% 100%); }
.ts-panel{
  position:absolute; left:0; bottom:66px; min-width:200px;
  background:rgba(255,255,255,.97); backdrop-filter:blur(8px);
  border:1px solid var(--c-line); padding:16px 14px;
  box-shadow:0 14px 44px rgba(0,0,0,.16);
  opacity:0; visibility:hidden; transform:translateY(10px);
  transition:opacity .45s var(--ease), transform .45s var(--ease), visibility .45s;
}
.theme-switch.is-open .ts-panel{ opacity:1; visibility:visible; transform:none; }
.ts-title{ margin:0 0 10px; font-family:var(--f-en); font-style:italic; font-size:12px; letter-spacing:.24em; color:var(--c-gold); }
.ts-panel button{
  display:flex; align-items:center; gap:12px; width:100%; padding:9px 8px;
  background:none; border:0; cursor:pointer;
  font-family:var(--f-jp); font-size:12.5px; letter-spacing:.14em; color:var(--c-ink);
  transition:background .3s;
}
.ts-panel button:hover, .ts-panel button.is-active{ background:var(--c-ivory); }
.ts-panel button i{ width:16px; height:16px; border-radius:50%; background:var(--sw); border:1px solid rgba(0,0,0,.06); }
.ts-panel button small{ margin-left:auto; font-family:var(--f-en); font-size:10px; letter-spacing:.16em; color:var(--c-ink-soft); }
.ts-note{ margin:10px 0 0; font-size:9.5px; letter-spacing:.12em; color:var(--c-ink-soft); line-height:1.7; }

/* ---------------- responsive base ---------------- */
@media (max-width:960px){
  .footer-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:720px){
  body{ font-size:14px; letter-spacing:.06em; }
  .cta-btns{ flex-direction:column; width:100%; max-width:340px; }
  .cta-btns .btn{ width:100%; }
  .theme-switch{ left:14px; bottom:14px; }
}

/* =========================================================
   下層共通パターン（v2 追加分）
   ========================================================= */
/* 一覧系の低めヒーロー */
.p-hero--low{ height:min(54vh,500px); min-height:380px; }

/* フルブリード大判写真 */
.g-full{ padding:0; }
.g-full .ph{ height:clamp(420px,86vh,820px); }

/* 写真が画面端まで伸びるポイント型レイアウト */
.point{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); align-items:center; }
.point + .point{ margin-top:clamp(64px,9vw,128px); }
.point .ph{ grid-column:1 / span 7; height:clamp(320px,52vw,620px); }
.point-body{ grid-column:8 / span 4; padding-right:var(--pad-x); padding-left:clamp(32px,4.5vw,80px); }
.point--rev .ph{ grid-column:6 / span 7; grid-row:1; }
.point--rev .point-body{ grid-column:2 / span 4; grid-row:1; padding-right:clamp(32px,4.5vw,80px); padding-left:var(--pad-x); }
.point-body em{ display:block; font-family:var(--f-en); font-style:italic; font-size:14px; letter-spacing:.22em; color:var(--c-gold); }
.point-body h3{ margin-top:12px; font-weight:300; font-size:clamp(18px,2vw,22px); letter-spacing:.2em; line-height:1.9; }
.point-body p{ margin-top:18px; font-size:13px; color:var(--c-ink-soft); }
@media (max-width:720px){
  .point, .point--rev{ display:block; }
  .point .ph{ height:64vw; }
  .point-body, .point--rev .point-body{ padding:28px var(--pad-x) 0; }
}

/* 中央寄せの導入文 */
.intro-c{ text-align:center; }
.intro-c .en{ font-family:var(--f-en); font-style:italic; font-size:14px; letter-spacing:.3em; color:var(--c-gold); }
.intro-c h2{ margin-top:26px; font-weight:300; font-size:clamp(20px,2.8vw,30px); letter-spacing:.26em; line-height:2.2; }
.intro-c p{ max-width:620px; margin:32px auto 0; color:var(--c-ink-soft); text-align:left; }
@media (min-width:721px){ .intro-c p{ text-align:center; } }

/* 定義テーブル */
.data-table{ width:100%; border-collapse:collapse; }
.data-table th, .data-table td{ padding:18px 6px; border-bottom:1px solid var(--c-line); text-align:left; vertical-align:top; font-weight:300; }
.data-table th{ width:30%; font-size:12px; letter-spacing:.24em; color:var(--c-gold); white-space:nowrap; }
.data-table td{ font-size:13.5px; letter-spacing:.1em; }

/* FAQアコーディオン */
.faq details{ border-bottom:1px solid var(--c-line); }
.faq details:first-of-type{ border-top:1px solid var(--c-line); }
.faq summary{ display:flex; align-items:baseline; gap:20px; padding:24px 8px; cursor:pointer; list-style:none; font-size:14px; letter-spacing:.12em; transition:opacity .4s; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary:hover{ opacity:.6; }
.faq summary::before{ content:"Q"; font-family:var(--f-en); font-style:italic; font-size:19px; color:var(--c-gold); }
.faq summary::after{ content:"＋"; margin-left:auto; color:var(--c-gold); font-weight:300; transition:transform .4s var(--ease); }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq .a{ display:flex; gap:20px; padding:0 8px 26px; font-size:13px; color:var(--c-ink-soft); }
.faq .a::before{ content:"A"; font-family:var(--f-en); font-style:italic; font-size:19px; color:var(--c-ink); line-height:1.6; }

/* 絞り込みタブ */
.tabs{ display:flex; flex-wrap:wrap; gap:8px 28px; margin-bottom:clamp(36px,5vw,60px); }
.tabs button{
  background:none; border:0; cursor:pointer; padding:6px 2px;
  font-family:var(--f-jp); font-size:12.5px; letter-spacing:.22em; color:var(--c-ink-soft);
  border-bottom:1px solid transparent; transition:color .4s, border-color .4s;
}
.tabs button.is-active, .tabs button:hover{ color:var(--c-ink); border-color:var(--c-gold); }

/* GoogleMap 枠（グレースケールで世界観を統一） */
.map-frame{ border:1px solid var(--c-line); }
.map-frame iframe{ display:block; width:100%; height:clamp(320px,42vw,460px); border:0; filter:grayscale(1) contrast(.92) brightness(1.04); }

/* フォーム（お問い合わせ・資料請求） */
.form-grid{ display:grid; gap:26px; }
.form-row label{ display:flex; align-items:baseline; gap:12px; font-size:12.5px; letter-spacing:.2em; margin-bottom:10px; }
.form-row label .req{ font-size:10px; letter-spacing:.16em; color:#fff; background:var(--c-gold); padding:2px 8px; }
.form-row label .opt{ font-size:10px; letter-spacing:.16em; color:var(--c-ink-soft); border:1px solid var(--c-line); padding:2px 8px; }
.form-row input[type="text"], .form-row input[type="email"], .form-row input[type="tel"],
.form-row select, .form-row textarea{
  width:100%; padding:14px 16px; border:1px solid var(--c-line); background:var(--c-base);
  font-family:var(--f-jp); font-size:14px; letter-spacing:.08em; color:var(--c-ink);
  transition:border-color .4s;
}
.form-row :is(input,select,textarea):focus{ outline:none; border-color:var(--c-gold); }
.form-row textarea{ min-height:170px; resize:vertical; }
.radio-row{ display:flex; flex-wrap:wrap; gap:12px 28px; font-size:13px; }
.radio-row label{ display:flex; align-items:center; gap:8px; cursor:pointer; letter-spacing:.12em; }
.radio-row input{ accent-color:var(--c-gold); }
.form-submit{ text-align:center; margin-top:20px; }
.form-submit .btn{ min-width:320px; justify-content:center; gap:16px; cursor:pointer; background:var(--c-ink); color:#fff; font-family:var(--f-jp); }
.form-submit .btn:hover{ background:var(--c-gold); border-color:var(--c-gold); }

/* 記事本文タイポグラフィ（お知らせ詳細ほか） */
.article{ max-width:var(--w-narrow); margin-inline:auto; }
.article > * + *{ margin-top:1.6em; }
.article h2{ margin-top:2.6em; padding-bottom:14px; border-bottom:1px solid var(--c-line); font-weight:400; font-size:19px; letter-spacing:.18em; line-height:1.9; }
.article h3{ margin-top:2.2em; display:flex; align-items:center; gap:12px; font-weight:400; font-size:16px; letter-spacing:.16em; }
.article h3::before{ content:""; width:22px; height:1px; background:var(--c-gold); }
.article p{ font-size:14px; color:var(--c-ink-soft); }
.article ul{ padding-left:2px; }
.article ul li{ position:relative; padding-left:20px; font-size:14px; color:var(--c-ink-soft); }
.article ul li::before{ content:""; position:absolute; left:0; top:.95em; width:8px; height:1px; background:var(--c-gold); }
.article blockquote{ margin:2em 0; padding:22px 28px; border-left:2px solid var(--c-gold); background:var(--c-ivory); font-size:13.5px; color:var(--c-ink-soft); }
.article .ph{ margin:2.4em 0; }