@charset "UTF-8";
/* ==========================================================================
   株式会社曽田 公式サイト スタイル
   ---------------------------------------------------------------------------
   配色の考え方：
     高岡は銅器のまち。銅（あかがね）と緑青（ろくしょう）を差し色に、
     生成りの紙色を地にした落ち着いた内装屋の色。
   写真について：
     写真をお預かりする前でも成立するよう、素材見本（クロス・木・タイル等）を
     CSSで描いています。写真をいただいたら .swatch を <img> に差し替えるだけで
     そのまま同じレイアウトに収まります。
   ========================================================================== */

:root{
  --paper:#F7F3EC;
  --paper-2:#F0E9DD;
  --paper-3:#E7DDCB;
  --white:#FDFCF9;
  --ink:#23211D;
  --ink-2:#57524A;
  --ink-3:#87806F;
  --line:#DFD6C4;
  --line-2:#C8BCA4;
  --copper:#9E5A32;
  --copper-l:#BE7C4C;
  --verdigris:#4B6F61;
  --maxw:1180px;
  --gut:clamp(20px,5vw,56px);
  --sp:clamp(76px,9vw,136px);
  --shadow:0 24px 60px -34px rgba(35,33,29,.5);
  --serif:"Noto Serif JP",-apple-system,"Yu Mincho","YuMincho",serif;
  --sans:"Noto Sans JP",-apple-system,"Hiragino Kaku Gothic ProN","Meiryo",sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--sans);
  font-size:16.5px;
  line-height:2;
  color:var(--ink);
  background:var(--paper);
  letter-spacing:.03em;
  overflow-x:hidden;
}
/* 紙のざらつき。画面全体に薄くのせて印刷物のような質感を出す */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:300;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
img,svg{max-width:100%;display:block}
img{height:auto}
a{color:inherit}
h1,h2,h3,h4{
  font-family:var(--serif);font-weight:600;line-height:1.5;
  letter-spacing:.08em;font-feature-settings:"palt" 1;
}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
.wrap.narrow{max-width:860px}
section{padding:var(--sp) 0}

/* ---------- デモ告知 ------------------------------------------------------ */
.demo-notice{
  background:#F3E9D2;color:#6C5426;border-bottom:1px solid #E0CFA8;
  font-size:.74rem;line-height:1.75;letter-spacing:.02em;
  padding:9px var(--gut);text-align:center;
}

/* ---------- ヘッダー ------------------------------------------------------ */
header{
  position:sticky;top:0;z-index:200;
  background:rgba(247,243,236,.92);
  -webkit-backdrop-filter:saturate(140%) blur(8px);backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
}
.header-inner{
  max-width:var(--maxw);margin:0 auto;padding:14px var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.brand .mark{
  width:34px;height:34px;flex:none;border:1.5px solid var(--copper);
  display:grid;place-items:center;font-family:var(--serif);font-size:1.05rem;
  color:var(--copper);line-height:1;padding-bottom:2px;
}
.brand .txt{font-family:var(--serif);font-size:1.16rem;letter-spacing:.16em;line-height:1.35}
.brand .txt small{
  display:block;font-family:var(--sans);font-size:.56rem;
  letter-spacing:.3em;color:var(--ink-3);font-weight:500;
}
.header-right{display:flex;align-items:center;gap:22px}
.gnav{display:flex;gap:26px}
.gnav a{
  position:relative;text-decoration:none;font-size:.86rem;font-weight:500;
  letter-spacing:.09em;padding:6px 0;color:var(--ink);
}
.gnav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--copper);transform:scaleX(0);transform-origin:left;
  transition:transform .3s ease;
}
.gnav a:hover::after,.gnav a.is-current::after{transform:scaleX(1)}
.head-tel{
  display:flex;align-items:center;gap:9px;text-decoration:none;
  border:1px solid var(--line-2);padding:8px 16px;
  font-family:var(--serif);font-size:1.02rem;letter-spacing:.06em;
  transition:border-color .25s,background .25s;
}
.head-tel:hover{border-color:var(--copper);background:var(--white)}
.head-tel svg{stroke:var(--copper);flex:none}
.nav-toggle{
  display:none;width:42px;height:42px;border:1px solid var(--line-2);
  background:none;cursor:pointer;position:relative;
}
.nav-toggle .bar{
  display:block;width:18px;height:1px;background:var(--ink);
  margin:4px auto;transition:transform .3s,opacity .3s;
}
.nav-toggle[aria-expanded="true"] .bar:nth-child(1){transform:translateY(5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .bar:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .bar:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

@media (max-width:1040px){
  .nav-toggle{display:block}
  .gnav{
    position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);
    padding:8px var(--gut) 20px;
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .25s,transform .25s,visibility .25s;
  }
  .gnav.is-open{opacity:1;visibility:visible;transform:none}
  .gnav a{padding:15px 2px;border-bottom:1px solid var(--line);font-size:.95rem}
  .gnav a::after{display:none}
  .head-tel{display:none}
}

/* ---------- 見出しの共通パーツ -------------------------------------------- */
.sec-label{
  font-size:.66rem;font-weight:700;letter-spacing:.34em;color:var(--copper);
  display:flex;align-items:center;gap:12px;
}
.sec-label::before{content:"";width:7px;height:7px;background:var(--copper);flex:none}
.sec-title{font-size:clamp(1.55rem,3.4vw,2.45rem);margin-top:20px}
.sec-title .jp-sub{
  display:block;font-family:var(--sans);font-size:.72rem;font-weight:500;
  letter-spacing:.26em;color:var(--ink-3);margin-top:14px;
}
.sec-lead{margin-top:26px;color:var(--ink-2);font-size:.97rem;max-width:40em}
.sec-head{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;
  gap:20px;padding-bottom:26px;border-bottom:1px solid var(--line);
}
.sec-head.center{grid-template-columns:1fr;justify-items:center;text-align:center}
.sec-head.center .sec-label{justify-content:center}
.sec-head.center .sec-lead{margin-inline:auto}

/* ---------- ボタン -------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:12px;text-decoration:none;
  padding:15px 30px;font-size:.9rem;font-weight:700;letter-spacing:.1em;
  border:1px solid var(--ink);background:none;transition:.28s;
}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn .arw{transition:transform .28s}
.btn:hover .arw{transform:translateX(5px)}
.btn-copper{border-color:var(--copper);color:var(--copper)}
.btn-copper:hover{background:var(--copper);color:#fff}
.btn-fill{background:var(--copper);border-color:var(--copper);color:#fff}
.btn-fill:hover{background:#8A4C28;border-color:#8A4C28;color:#fff}

/* 電話の大きいCTA */
.tel-block{display:inline-block;text-decoration:none}
.tel-block .cap{
  font-size:.7rem;letter-spacing:.24em;color:var(--ink-3);font-weight:700;
  display:flex;align-items:center;gap:10px;
}
.tel-block .cap::before,.tel-block .cap::after{content:"";height:1px;background:var(--line-2);flex:1;min-width:16px}
.tel-block .num{
  font-family:var(--serif);font-size:clamp(1.9rem,5vw,2.9rem);letter-spacing:.04em;
  line-height:1.25;margin-top:8px;display:flex;align-items:center;gap:14px;
}
.tel-block .num svg{stroke:var(--copper);flex:none;width:.7em;height:.7em}
.tel-block .note{font-size:.78rem;color:var(--ink-2);margin-top:6px;letter-spacing:.06em}

/* ---------- 素材見本（写真の代わり／写真が来たら差し替え） ---------------- */
.swatch{position:relative;overflow:hidden;background:var(--paper-2)}
.swatch::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(255,255,255,.34),rgba(35,33,29,.1));
}
.sw-cloth{ /* クロス（壁紙） */
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.5) 0 1px,transparent 1px 7px),
    repeating-linear-gradient(0deg,rgba(160,148,126,.16) 0 1px,transparent 1px 7px),
    #EFEAE0;
}
.sw-wood{ /* フローリング */
  background:
    repeating-linear-gradient(91deg,rgba(120,86,52,.16) 0 1px,transparent 1px 5px,rgba(120,86,52,.08) 5px 6px,transparent 6px 14px),
    repeating-linear-gradient(0deg,rgba(90,62,36,.22) 0 1.5px,transparent 1.5px 46px),
    linear-gradient(180deg,#CBA97C,#BC9666);
}
.sw-tile{ /* 水まわり（タイル） */
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.85) 0 2px,transparent 2px 34px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.85) 0 2px,transparent 2px 34px),
    linear-gradient(150deg,#DCE3E1,#C6D2CE);
}
.sw-tatami{ /* 畳 */
  background:
    repeating-linear-gradient(0deg,rgba(88,96,52,.2) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.2) 0 1px,transparent 1px 5px),
    linear-gradient(180deg,#B9BE86,#A7AE72);
}
.sw-plaster{ /* 塗り壁 */
  background:
    radial-gradient(circle at 20% 30%,rgba(255,255,255,.7),transparent 42%),
    radial-gradient(circle at 72% 68%,rgba(160,148,126,.24),transparent 46%),
    #E6DFD2;
}
.sw-copper{ /* 銅・金物 */
  background:
    repeating-linear-gradient(105deg,rgba(255,255,255,.18) 0 2px,transparent 2px 9px),
    linear-gradient(150deg,#C08050,#96552D);
}

/* ---------- ヒーロー ------------------------------------------------------ */
.hero{position:relative;padding:clamp(56px,8vw,104px) 0 clamp(48px,6vw,80px);overflow:hidden}
.hero-inner{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,5vw,72px);align-items:center;
}
.hero-eyebrow{
  display:flex;align-items:center;gap:14px;
  font-size:.72rem;letter-spacing:.24em;color:var(--copper);font-weight:700;
}
.hero-eyebrow::before{content:"";width:38px;height:1px;background:var(--copper)}
.hero h1{
  font-size:clamp(1.95rem,5.2vw,3.5rem);line-height:1.55;letter-spacing:.06em;
  margin-top:28px;font-weight:600;
}
.hero h1 .thin{color:var(--ink-2);font-size:.62em;display:block;letter-spacing:.12em;margin-bottom:14px}
.hero p.lead{margin-top:30px;color:var(--ink-2);font-size:.98rem;max-width:30em}
.hero-cta{margin-top:40px;display:flex;flex-wrap:wrap;gap:26px;align-items:flex-end}
.hero-art{position:relative}
.hero-art .panel{
  background:var(--paper-2);border:1px solid var(--line);
  padding:clamp(24px,4vw,44px);color:var(--copper);position:relative;z-index:1;
}
.hero-art::before{
  content:"";position:absolute;right:-16px;bottom:-16px;width:62%;height:62%;
  border:1px solid var(--copper);opacity:.4;z-index:0;
}
.hero-art .cap{
  position:absolute;left:-10px;top:16px;z-index:2;
  writing-mode:vertical-rl;font-family:var(--serif);font-size:.8rem;
  letter-spacing:.4em;color:var(--ink-3);
  background:var(--paper);padding:14px 4px;
}
.hero-facts{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  margin-top:clamp(48px,6vw,80px);
}
.hero-facts ul{
  max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);list-style:none;
  display:grid;grid-template-columns:repeat(3,1fr);
}
.hero-facts li{
  padding:22px 8px;text-align:center;font-size:.84rem;letter-spacing:.1em;color:var(--ink-2);
  border-left:1px solid var(--line);
}
.hero-facts li:first-child{border-left:0}
.hero-facts b{
  display:block;font-family:var(--serif);font-size:1.15rem;color:var(--ink);
  letter-spacing:.08em;margin-bottom:2px;font-weight:600;
}
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr}
  .hero-art{order:-1;max-width:520px;margin-inline:auto;width:100%}
  .hero-art .cap{display:none}
  .hero-facts ul{grid-template-columns:1fr;}
  .hero-facts li{border-left:0;border-top:1px solid var(--line);display:flex;gap:14px;justify-content:center;align-items:baseline;padding:15px 8px}
  .hero-facts li:first-child{border-top:0}
  .hero-facts b{margin-bottom:0}
}

/* ---------- 下層ページの見出し -------------------------------------------- */
.page-head{
  background:var(--paper-2);border-bottom:1px solid var(--line);
  padding:clamp(48px,7vw,84px) 0 clamp(40px,6vw,68px);
}
.page-head .wrap{display:grid;gap:22px}
.page-head h1{font-size:clamp(1.7rem,4.4vw,2.8rem);letter-spacing:.1em}
.page-head .en{font-size:.66rem;letter-spacing:.34em;color:var(--copper);font-weight:700}
.page-head p{color:var(--ink-2);font-size:.95rem;max-width:38em}
.crumb{font-size:.74rem;color:var(--ink-3);letter-spacing:.08em}
.crumb a{text-decoration:none;color:var(--ink-3)}
.crumb a:hover{color:var(--copper)}

/* ---------- 3つの柱（トップ：仕事） --------------------------------------- */
.pillar-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(266px,1fr));
  gap:clamp(20px,2.6vw,34px);margin-top:clamp(40px,5vw,64px);
}
.pillar{background:var(--white);border:1px solid var(--line);display:flex;flex-direction:column}
.pillar .swatch{height:150px;flex:none}
.pillar-body{padding:28px clamp(20px,2.4vw,30px) 32px;display:flex;flex-direction:column;flex:1}
.pillar-no{
  font-family:var(--serif);font-size:.8rem;letter-spacing:.2em;color:var(--copper);
  display:block;
}
.pillar h3{font-size:1.24rem;margin-top:10px}
.pillar p{font-size:.9rem;color:var(--ink-2);margin-top:16px;line-height:1.95}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin-top:20px}
.tags li{
  font-size:.72rem;letter-spacing:.06em;color:var(--ink-2);
  border:1px solid var(--line-2);padding:4px 11px;background:var(--paper);
}

/* ---------- 引用（お客様の声） -------------------------------------------- */
.voice{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.voice-quote{max-width:780px;margin:0 auto;text-align:center}
.voice-quote .mark{font-family:var(--serif);font-size:3.4rem;color:var(--copper);opacity:.34;line-height:1}
.voice-quote blockquote{
  font-family:var(--serif);font-size:clamp(1.25rem,3vw,1.95rem);
  line-height:2;letter-spacing:.1em;margin-top:8px;font-feature-settings:"palt" 1;
}
.voice-quote .src{margin-top:26px;font-size:.78rem;color:var(--ink-3);letter-spacing:.1em}
.stars{color:var(--copper);letter-spacing:.24em;font-size:.95rem;margin-top:14px}

/* ---------- お悩み一覧 ---------------------------------------------------- */
.need-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  gap:1px;background:var(--line);border:1px solid var(--line);
  margin-top:clamp(40px,5vw,60px);
}
.need{background:var(--paper);padding:26px 26px 28px;font-size:.93rem;line-height:1.9}
.need .n{
  font-family:var(--serif);font-size:.76rem;letter-spacing:.16em;color:var(--copper);
  display:block;margin-bottom:12px;
}
.need-note{margin-top:34px;font-size:.9rem;color:var(--ink-2);text-align:center}

/* ---------- 交互組み（サービス詳細） -------------------------------------- */
.alt-row{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);align-items:center;
  padding:clamp(40px,5vw,64px) 0;border-bottom:1px solid var(--line);
}
.alt-row:last-child{border-bottom:0}
.alt-row:nth-child(even) .alt-visual{order:2}
.alt-visual{position:relative}
.alt-visual .swatch{aspect-ratio:4/3;border:1px solid var(--line)}
.alt-visual .idx{
  position:absolute;left:-6px;top:-26px;
  font-family:var(--serif);font-size:clamp(2.6rem,6vw,4.4rem);
  color:var(--copper);opacity:.28;line-height:1;letter-spacing:.02em;
}
.alt-body h3{font-size:clamp(1.3rem,2.6vw,1.75rem)}
.alt-body .en{font-size:.64rem;letter-spacing:.3em;color:var(--copper);font-weight:700;display:block;margin-bottom:14px}
.alt-body p{margin-top:20px;color:var(--ink-2);font-size:.95rem}
.alt-body .list{list-style:none;margin-top:24px;display:grid;gap:10px}
.alt-body .list li{
  font-size:.9rem;padding-left:20px;position:relative;color:var(--ink);line-height:1.85;
}
.alt-body .list li::before{
  content:"";position:absolute;left:0;top:.82em;width:9px;height:1px;background:var(--copper);
}
@media (max-width:820px){
  .alt-row{grid-template-columns:1fr;gap:28px}
  .alt-row:nth-child(even) .alt-visual{order:0}
  .alt-visual .idx{top:auto;bottom:8px;left:10px;opacity:.5;color:#fff;mix-blend-mode:soft-light}
}

/* ---------- 施工事例 ------------------------------------------------------ */
.works-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:clamp(20px,2.6vw,32px);margin-top:clamp(40px,5vw,60px);
}
.work{background:var(--white);border:1px solid var(--line)}
/* background は指定しないこと。ショートハンドを書くと .sw-* の素材見本が消える */
.work .frame{
  aspect-ratio:4/3;position:relative;display:grid;place-items:center;
  border-bottom:1px solid var(--line);
}
.work .frame:not(.swatch){background-color:var(--paper-2)}
/* 写真をお預かりするまでの仮の枠。写真が届いたら .frame ごと <img> に差し替える */
.work .frame .ph{
  position:relative;z-index:1;text-align:center;padding:16px 20px;
  background:rgba(247,243,236,.93);border:1px solid var(--line-2);
}
.work .frame .ph svg{margin:0 auto 10px;stroke:var(--copper);opacity:.7}
.work .frame .ph span{display:block;font-size:.72rem;letter-spacing:.14em;color:var(--ink-2);line-height:1.7}
.work img{aspect-ratio:4/3;object-fit:cover;width:100%;cursor:zoom-in}
.work .cap{padding:20px 22px 24px}
.work .cat{
  font-size:.68rem;letter-spacing:.18em;color:var(--copper);font-weight:700;
  display:block;margin-bottom:8px;
}
.work .cap h3{font-size:1.02rem;line-height:1.7}
.work .meta{list-style:none;margin-top:14px;font-size:.78rem;color:var(--ink-3);display:grid;gap:5px}
.work .meta li{display:flex;gap:12px;border-top:1px dotted var(--line-2);padding-top:5px}
.work .meta li span{flex:none;width:4.5em;color:var(--ink-2)}
.photo-ask{
  background:var(--paper-2);border:1px solid var(--line-2);border-left:3px solid var(--copper);
  padding:clamp(26px,3.6vw,40px);margin-top:clamp(40px,5vw,60px);
}
.photo-ask h3{font-size:1.14rem}
.photo-ask p{font-size:.92rem;color:var(--ink-2);margin-top:14px}
.photo-ask ul{margin-top:20px;display:grid;gap:9px;list-style:none}
.photo-ask li{font-size:.9rem;padding-left:22px;position:relative}
.photo-ask li::before{
  content:"";position:absolute;left:2px;top:.78em;width:8px;height:8px;
  border-left:1px solid var(--copper);border-bottom:1px solid var(--copper);
  transform:rotate(-45deg);
}

/* ---------- 流れ ---------------------------------------------------------- */
.flow{margin-top:clamp(40px,5vw,64px);counter-reset:st}
.flow-item{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(20px,3vw,44px);
  padding:clamp(26px,3.4vw,40px) 0;border-top:1px solid var(--line);position:relative;
}
.flow-item:last-child{border-bottom:1px solid var(--line)}
.flow-item .no{
  counter-increment:st;font-family:var(--serif);color:var(--copper);
  font-size:clamp(1.5rem,3.4vw,2.2rem);line-height:1.2;letter-spacing:.04em;min-width:2.6em;
}
.flow-item .no::before{content:"0" counter(st)}
.flow-item .no small{display:block;font-family:var(--sans);font-size:.6rem;letter-spacing:.22em;color:var(--ink-3);margin-top:6px}
.flow-item h3{font-size:1.16rem}
.flow-item p{margin-top:12px;color:var(--ink-2);font-size:.93rem}

/* ---------- FAQ ----------------------------------------------------------- */
.faq-list{margin-top:clamp(36px,4.6vw,56px);border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line);background:none}
.faq-list summary{
  cursor:pointer;list-style:none;padding:24px 44px 24px 40px;position:relative;
  font-weight:700;font-size:.98rem;line-height:1.8;letter-spacing:.05em;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::before{
  content:"Q";position:absolute;left:0;top:23px;
  font-family:var(--serif);color:var(--copper);font-size:1.06rem;font-weight:600;
}
.faq-list summary::after{
  content:"";position:absolute;right:10px;top:33px;width:11px;height:11px;
  border-right:1px solid var(--ink-3);border-bottom:1px solid var(--ink-3);
  transform:rotate(45deg);transition:transform .3s;
}
.faq-list details[open] summary::after{transform:rotate(-135deg);top:38px}
.faq-list .a{padding:0 44px 26px 40px;color:var(--ink-2);font-size:.93rem;position:relative}
.faq-list .a::before{
  content:"A";position:absolute;left:0;top:-2px;
  font-family:var(--serif);color:var(--verdigris);font-size:1.06rem;font-weight:600;
}

/* ---------- 会社概要テーブル ---------------------------------------------- */
dl.table{margin-top:clamp(30px,4vw,48px);border-top:1px solid var(--line)}
dl.table>div{
  display:grid;grid-template-columns:9.5em minmax(0,1fr);gap:10px 24px;
  padding:17px 4px;border-bottom:1px solid var(--line);font-size:.93rem;
}
dl.table dt{color:var(--ink-3);font-size:.84rem;letter-spacing:.12em;font-weight:700}
dl.table dd a{color:var(--copper);text-decoration:none}
dl.table dd a:hover{text-decoration:underline}
@media (max-width:600px){dl.table>div{grid-template-columns:1fr;gap:4px}}

.map-frame{
  margin-top:26px;border:1px solid var(--line);aspect-ratio:16/10;background:var(--paper-2);
}
.map-frame iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.72) contrast(.96)}
.map-link{
  display:inline-flex;align-items:center;gap:9px;margin-top:16px;
  font-size:.84rem;color:var(--copper);text-decoration:none;letter-spacing:.06em;
}
.map-link:hover{text-decoration:underline}

/* ---------- お問い合わせ帯 ------------------------------------------------ */
.contact-band{background:var(--ink);color:var(--paper)}
.contact-band .sec-title,.contact-band h2{color:var(--paper)}
.contact-band .sec-label{color:var(--copper-l)}
.contact-band .sec-label::before{background:var(--copper-l)}
.contact-band .sec-lead{color:#BFB8AB}
.contact-inner{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(30px,5vw,72px);align-items:center;margin-top:clamp(36px,4.6vw,56px);
}
.contact-band .tel-block .cap{color:#A79E90}
.contact-band .tel-block .cap::before,.contact-band .tel-block .cap::after{background:#4A453D}
.contact-band .tel-block .num{color:var(--paper)}
.contact-band .tel-block .num svg{stroke:var(--copper-l)}
.contact-band .tel-block .note{color:#BFB8AB}
.contact-band .btn{border-color:#5E574C;color:var(--paper)}
.contact-band .btn:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.contact-note{
  border:1px solid #3B372F;padding:clamp(24px,3.4vw,34px);font-size:.9rem;color:#BFB8AB;
}
.contact-note h3{color:var(--paper);font-size:1.06rem;margin-bottom:14px}
.contact-note dl{display:grid;gap:12px}
.contact-note dl>div{display:grid;grid-template-columns:6em 1fr;gap:14px}
.contact-note dt{color:#8E8677;font-size:.8rem;letter-spacing:.1em}
@media (max-width:820px){
  .contact-inner{grid-template-columns:1fr}
  .contact-note dl>div{grid-template-columns:5.5em 1fr}
}

/* ---------- 次のページへ -------------------------------------------------- */
.next-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-block:1px solid var(--line)}
@media (max-width:820px){.next-nav{grid-template-columns:1fr}}
.next-nav a{
  background:var(--paper);padding:clamp(30px,3.6vw,44px) clamp(22px,2.6vw,34px);
  text-decoration:none;display:grid;gap:10px;transition:background .28s;
}
.next-nav a:hover{background:var(--white)}
.next-nav .en{font-size:.62rem;letter-spacing:.3em;color:var(--copper);font-weight:700}
.next-nav h3{font-size:1.14rem}
.next-nav p{font-size:.83rem;color:var(--ink-2);line-height:1.85}
.next-nav .arw{color:var(--copper);font-size:.9rem}

/* ---------- フッター ------------------------------------------------------ */
footer{background:var(--paper-2);border-top:1px solid var(--line);padding:clamp(48px,6vw,72px) 0 0}
.foot-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:34px;padding-bottom:38px;border-bottom:1px solid var(--line)}
.foot-brand{font-family:var(--serif);font-size:1.3rem;letter-spacing:.2em}
.foot-brand small{display:block;font-family:var(--sans);font-size:.58rem;letter-spacing:.3em;color:var(--ink-3);margin-top:8px}
.foot-addr{margin-top:20px;font-size:.85rem;color:var(--ink-2);line-height:2}
.fnav{display:grid;grid-template-columns:repeat(2,auto);gap:10px 44px;align-content:start}
.fnav a{text-decoration:none;font-size:.84rem;color:var(--ink-2);letter-spacing:.08em}
.fnav a:hover{color:var(--copper)}
.copy{padding:24px 0 30px;font-size:.72rem;color:var(--ink-3);text-align:center;letter-spacing:.06em;line-height:1.9}
@media (max-width:700px){
  .foot-top{grid-template-columns:1fr}
  .fnav{grid-template-columns:repeat(2,1fr)}
}

/* ---------- スマホ追従の電話バー ------------------------------------------ */
.mobile-cta{display:none}
@media (max-width:820px){
  .mobile-cta{
    display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:250;
    border-top:1px solid var(--line-2);
  }
  .mobile-cta a{
    text-decoration:none;text-align:center;padding:13px 6px;font-size:.9rem;font-weight:700;
    letter-spacing:.06em;display:flex;align-items:center;justify-content:center;gap:8px;
  }
  .mobile-cta .m-tel{background:var(--copper);color:#fff}
  .mobile-cta .m-sub{background:var(--paper);color:var(--ink)}
  .mobile-cta svg{flex:none}
  body{padding-bottom:58px}
}

/* ---------- ふわっと表示 -------------------------------------------------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.3,1)}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---------- 写真の拡大表示 ------------------------------------------------ */
body.lb-lock{overflow:hidden}
.lightbox{
  position:fixed;inset:0;z-index:1000;background:rgba(24,22,19,.94);
  display:none;place-items:center;padding:clamp(16px,4vw,48px);
}
.lightbox.is-open{display:grid}
.lb-figure{max-width:min(1100px,94vw);max-height:86vh;display:grid;gap:14px;justify-items:center}
.lb-figure img{max-height:74vh;width:auto;object-fit:contain}
.lb-figure figcaption{color:#DDD6C9;font-size:.84rem;text-align:center;letter-spacing:.06em}
.lb-btn{
  position:absolute;background:none;border:1px solid rgba(255,255,255,.34);color:#fff;
  width:46px;height:46px;font-size:1.4rem;cursor:pointer;line-height:1;
}
.lb-btn:hover{border-color:#fff}
.lb-close{top:16px;right:16px}
.lb-prev{left:16px;top:50%;transform:translateY(-50%)}
.lb-next{right:16px;top:50%;transform:translateY(-50%)}