/* =========================================================
   tanagokoro ― 木の道具
   生成り × 温墨 × 蜜色 / 明朝リード主役 / 静かな余白
   ========================================================= */

:root{
  --paper:      #F4EFE6;   /* 生成り和紙 */
  --paper-2:    #EDE5D6;   /* 一段深い生成り */
  --paper-3:    #E6DCC9;   /* さらに深い面 */
  --ink:        #3A342A;   /* 見出しの温墨 */
  --text:       #5B5344;   /* 本文の温墨ブラウン */
  --text-soft:  #8A8073;   /* 補助テキスト */
  --accent:     #B67C46;   /* 蜜色（木の体温） */
  --accent-deep:#92602F;   /* 濃い蜜色 */
  --line:       rgba(90,83,68,0.16);
  --line-soft:  rgba(90,83,68,0.10);
  --dark:       #2A241C;   /* ダーク面 */

  --serif: "Shippori Mincho", serif;
  --sans:  "Zen Kaku Gothic New", sans-serif;
  --latin: "Cormorant Garamond", serif;

  --wrap: 1200px;
  --gut: clamp(22px, 5vw, 64px);
  --ease: cubic-bezier(.16,1,.3,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  color:var(--text);
  background:var(--paper);
  line-height:1.9;
  font-weight:400;
  letter-spacing:.02em;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  line-break:strict;
  word-break:normal;
  overflow-wrap:anywhere;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
::selection{ background:rgba(182,124,70,.22); }

.wrap{ max-width:var(--wrap); margin:0 auto; padding-inline:var(--gut); }

/* ---------- Typographic primitives ---------- */
.eyebrow{
  font-family:var(--latin);
  font-size:15px;
  letter-spacing:.18em;
  color:var(--accent-deep);
  text-transform:uppercase;
  display:flex; align-items:center; gap:14px;
  margin-bottom:26px;
}
.eyebrow .num{
  font-family:var(--sans);
  font-size:11px; font-weight:500;
  letter-spacing:.24em;
  color:var(--text-soft);
}
.eyebrow .jp{
  font-family:var(--sans);
  font-size:12px; font-weight:500;
  letter-spacing:.28em;
  color:var(--text-soft);
  text-transform:none;
}
.eyebrow.center{ justify-content:center; }
.eyebrow.light{ color:#E4B584; }
.eyebrow.light .num,.eyebrow.light .jp{ color:rgba(244,239,230,.7); }

.sec-title{
  font-family:var(--serif);
  font-weight:600;
  color:var(--ink);
  font-size:clamp(29px, 4.6vw, 52px);
  line-height:1.4;
  letter-spacing:.04em;
}
.sub-title{
  font-family:var(--serif);
  font-weight:600;
  color:var(--ink);
  font-size:clamp(21px, 2.6vw, 27px);
  line-height:1.5;
  letter-spacing:.05em;
  margin-bottom:22px;
}
.sec-lead{
  font-family:var(--serif);
  font-size:clamp(16px,1.7vw,19px);
  color:var(--text);
  line-height:2;
  margin-top:24px;
  max-width:56ch;
}
.body{
  font-size:clamp(14.5px,1.15vw,16px);
  line-height:2.15;
  color:var(--text);
  margin-bottom:20px;
}
.body:last-child{ margin-bottom:0; }
.lead-quote{
  font-family:var(--serif);
  font-size:clamp(19px,2.3vw,26px);
  line-height:1.95;
  color:var(--ink);
  font-weight:500;
  letter-spacing:.03em;
  margin-bottom:32px;
}
.mark{
  font-family:var(--serif);
  font-size:clamp(18px,2.1vw,24px);
  color:var(--accent-deep);
  font-weight:500;
  letter-spacing:.06em;
  line-height:1.7;
  margin:8px 0 26px;
  padding-left:22px;
  border-left:2px solid var(--accent);
}

.sec-head{ margin-bottom:clamp(44px,6vw,72px); }

.section{ padding-block:clamp(84px,11vw,148px); position:relative; }
section[id]{ scroll-margin-top:74px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;
  font-family:var(--sans);
  font-size:14px; font-weight:500;
  letter-spacing:.14em;
  padding:17px 40px;
  border-radius:2px;
  transition:all .5s var(--ease);
}
.btn-solid{ background:var(--accent); color:#fff; }
.btn-solid:hover{ background:var(--accent-deep); transform:translateY(-2px); }
.btn-ghost{ border:1px solid rgba(244,239,230,.55); color:var(--paper); }
.btn-ghost:hover{ background:rgba(244,239,230,.1); }
.btn-line{ border:1px solid var(--accent); color:var(--accent-deep); }
.btn-line:hover{ background:var(--accent); color:#fff; }

/* =========================================================
   Header
   ========================================================= */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--gut);
  transition:background .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease);
}
.site-header.solid{
  background:rgba(244,239,230,.92);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  padding-block:15px;
  box-shadow:0 1px 0 var(--line-soft);
}
.brand{ display:flex; align-items:baseline; gap:12px; }
.brand-name{
  font-family:var(--latin);
  font-size:27px; font-weight:500;
  letter-spacing:.04em;
  color:var(--paper);
  transition:color .5s var(--ease);
}
.brand-sub{
  font-family:var(--sans);
  font-size:11px; font-weight:500;
  letter-spacing:.3em;
  color:rgba(244,239,230,.8);
  transition:color .5s var(--ease);
}
.site-header.solid .brand-name{ color:var(--ink); }
.site-header.solid .brand-sub{ color:var(--text-soft); }

.nav-desktop{ display:flex; align-items:center; gap:clamp(18px,2vw,34px); }
.nav-desktop a{
  font-size:14px; font-weight:500;
  letter-spacing:.1em;
  color:rgba(244,239,230,.92);
  position:relative;
  transition:color .4s var(--ease);
}
.nav-desktop a:not(.nav-cta)::after{
  content:""; position:absolute; left:0; bottom:-6px;
  width:0; height:1px; background:currentColor;
  transition:width .4s var(--ease);
}
.nav-desktop a:not(.nav-cta):hover::after{ width:100%; }
.site-header.solid .nav-desktop a{ color:var(--text); }
.site-header.solid .nav-desktop a:hover{ color:var(--ink); }
.nav-cta{
  border:1px solid rgba(244,239,230,.5);
  padding:9px 20px; border-radius:2px;
  transition:all .4s var(--ease)!important;
}
.nav-cta:hover{ background:var(--accent); border-color:var(--accent); color:#fff!important; }
.site-header.solid .nav-cta{ border-color:var(--line); }
.site-header.solid .nav-cta:hover{ background:var(--accent); border-color:var(--accent); color:#fff!important; }

/* Burger */
.burger{
  display:none; flex-direction:column; gap:6px;
  background:none; border:none; cursor:pointer; padding:8px;
}
.burger span{
  width:26px; height:1.6px; background:var(--paper);
  transition:all .4s var(--ease);
}
.site-header.solid .burger span{ background:var(--ink); }

/* =========================================================
   Drawer (mobile)
   ========================================================= */
.drawer{
  position:fixed; top:0; right:0; z-index:200;
  width:min(84vw,360px); height:100vh; height:100dvh;
  background:var(--paper);
  padding:78px 32px 32px;
  transform:translateX(100%);
  transition:transform .55s var(--ease);
  overflow-y:auto;
  box-shadow:-20px 0 60px rgba(42,36,28,.16);
}
.drawer.open{ transform:translateX(0); }
.drawer-close{
  position:absolute; top:22px; right:24px;
  background:none; border:none; cursor:pointer;
  font-size:34px; line-height:1; color:var(--ink);
  font-family:var(--serif); font-weight:300;
}
.drawer-brand{
  font-family:var(--latin); font-size:26px;
  letter-spacing:.04em; color:var(--ink);
  margin-bottom:34px;
  padding-bottom:22px; border-bottom:1px solid var(--line);
}
.drawer-nav{ display:flex; flex-direction:column; }
.drawer-nav a{
  padding:16px 0;
  font-size:17px; font-weight:500; color:var(--ink);
  border-bottom:1px solid var(--line-soft);
  display:flex; align-items:baseline; gap:14px;
}
.dn-en{
  font-family:var(--latin); font-style:italic;
  font-size:13px; color:var(--accent-deep);
  min-width:88px; letter-spacing:.03em;
}
.drawer-scrim{
  position:fixed; inset:0; z-index:150;
  background:rgba(42,36,28,.42);
  opacity:0; visibility:hidden;
  transition:opacity .5s var(--ease), visibility .5s var(--ease);
}
.drawer-scrim.show{ opacity:1; visibility:visible; }

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position:relative;
  min-height:100vh; min-height:100svh;
  display:flex; align-items:center;
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0;
  background:var(--paper-3) url('../images/hero-pc.jpg') center/cover no-repeat;
  transform:scale(1.06);
  animation:heroZoom 14s var(--ease) forwards;
}
@keyframes heroZoom{ to{ transform:scale(1); } }
.hero-veil{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(38,32,24,.5) 0%, rgba(38,32,24,.28) 38%, rgba(38,32,24,0) 68%),
    linear-gradient(0deg, rgba(38,32,24,.28) 0%, rgba(38,32,24,0) 40%);
}
.hero-inner{
  position:relative; z-index:2;
  padding-inline:var(--gut);
  max-width:var(--wrap); margin:0 auto; width:100%;
}
.hero-eyebrow{
  font-family:var(--sans);
  font-size:13px; font-weight:500;
  letter-spacing:.3em;
  color:rgba(244,239,230,.9);
  margin-bottom:30px;
}
.hero-title{
  font-family:var(--serif);
  font-weight:600;
  color:#fff;
  font-size:clamp(48px, 9vw, 112px);
  line-height:1.18;
  letter-spacing:.06em;
  text-shadow:0 2px 40px rgba(28,22,14,.4);
}
.hero-title span{ display:block; }
.hero-lead{
  margin-top:34px;
  font-family:var(--serif);
  font-size:clamp(15px,1.7vw,19px);
  line-height:2.1;
  color:rgba(244,239,230,.94);
  letter-spacing:.05em;
  text-shadow:0 1px 20px rgba(28,22,14,.35);
}
.hero-latin{
  position:absolute; right:var(--gut); bottom:40px; z-index:2;
  font-family:var(--latin); font-style:italic;
  font-size:15px; letter-spacing:.2em;
  color:rgba(244,239,230,.55);
  writing-mode:vertical-rl;
}

/* =========================================================
   Philosophy
   ========================================================= */
.philosophy{ background:var(--paper); }
.phi-grid{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:clamp(40px,6vw,88px); align-items:center;
  margin-bottom:clamp(64px,9vw,120px);
}
.phi-fig{ position:relative; }
.phi-fig img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border-radius:2px;
}
.phi-fig figcaption{
  margin-top:16px;
  font-family:var(--serif); font-size:14px;
  color:var(--text-soft); letter-spacing:.05em;
  text-align:right;
}
.phi-split{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(40px,6vw,80px);
  padding-top:clamp(48px,6vw,72px);
  border-top:1px solid var(--line);
}
.feat-list{ list-style:none; }
.feat-list li{
  display:grid; grid-template-columns:auto 1fr; gap:18px;
  padding:20px 0;
  border-bottom:1px solid var(--line-soft);
  font-size:15.5px; line-height:1.85;
}
.feat-list li:last-child{ border-bottom:none; }
.feat-list span{
  font-family:var(--latin); font-size:15px;
  color:var(--accent); font-style:italic;
  padding-top:2px;
}

/* =========================================================
   Craft
   ========================================================= */
.craft{ background:var(--paper-2); }
.craft-grid{
  display:grid; grid-template-columns:1.15fr .85fr;
  gap:clamp(36px,5vw,72px); align-items:start;
}
.craft-main img{
  width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:2px;
}
.craft-body{ padding-top:20px; }
.craft-sub{ margin-top:36px; }
.craft-sub img{
  width:100%; aspect-ratio:16/10; object-fit:cover; border-radius:2px;
}

/* =========================================================
   Products
   ========================================================= */
.products{ background:var(--paper); }
.products-hero{ margin-bottom:clamp(48px,6vw,80px); }
.products-hero img{
  width:100%; aspect-ratio:16/8; object-fit:cover; border-radius:2px;
}
.prod-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(28px,3.5vw,48px);
}
.prod-card{ }
.prod-img{ overflow:hidden; border-radius:2px; }
.prod-img img{
  width:100%; aspect-ratio:1/1; object-fit:cover;
  transition:transform 1.1s var(--ease);
}
.prod-card:hover .prod-img img{ transform:scale(1.05); }
.prod-name{
  font-family:var(--serif); font-weight:600;
  font-size:20px; color:var(--ink);
  letter-spacing:.04em; line-height:1.5;
  margin:24px 0 12px;
}
.prod-desc{ font-size:14.5px; line-height:1.95; color:var(--text); }
.prod-note{
  background:var(--paper-3);
  padding:clamp(30px,3vw,44px);
  border-radius:2px;
  display:flex; flex-direction:column; justify-content:center;
}
.prod-note .prod-name{ margin-top:0; color:var(--accent-deep); }

/* =========================================================
   Care (signature 経年変化)
   ========================================================= */
.care{ background:var(--paper-2); padding-bottom:0; }
.grain-band{
  position:relative;
  height:clamp(320px,46vw,560px);
  overflow:hidden;
  margin-top:clamp(20px,3vw,40px);
}
.grain-img{
  position:absolute; inset:-4%;
  background-size:cover; background-position:center;
  filter:saturate(.55) brightness(1.14) contrast(.95);
  will-change:filter;
}
.grain-band::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(42,36,28,.34), rgba(42,36,28,0) 40%, rgba(42,36,28,0) 60%, rgba(42,36,28,.34));
  pointer-events:none;
}
.grain-labels{
  position:absolute; inset:0; z-index:2;
  display:flex; align-items:center; justify-content:space-between;
  padding-inline:clamp(28px,7vw,90px);
  pointer-events:none;
}
.grain-label{
  font-family:var(--serif);
  font-size:clamp(16px,2.2vw,26px);
  color:#fff; letter-spacing:.08em;
  text-shadow:0 2px 24px rgba(20,14,8,.55);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.grain-label.is-new{ opacity:.9; }
.grain-label.is-aged{ opacity:.35; }

.care-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(40px,6vw,84px);
  padding-block:clamp(64px,9vw,120px);
  align-items:start;
}
.care-fig{ margin-bottom:40px; }
.care-fig img{
  width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:2px;
}
.care-list{ list-style:none; margin:8px 0 24px; }
.care-list li{
  position:relative; padding:14px 0 14px 26px;
  border-bottom:1px solid var(--line-soft);
  font-size:14.5px; line-height:1.9;
}
.care-list li::before{
  content:""; position:absolute; left:0; top:24px;
  width:7px; height:7px; border-radius:50%;
  background:var(--accent);
}
.care-note{
  font-family:var(--serif); font-size:15px;
  color:var(--text-soft); line-height:1.9; letter-spacing:.03em;
}

/* =========================================================
   Experience
   ========================================================= */
.experience{
  position:relative; color:var(--paper);
  display:flex; align-items:center;
  min-height:clamp(520px,72vw,720px);
  overflow:hidden;
}
.exp-bg{ position:absolute; inset:0; z-index:0; }
.exp-bg img{ width:100%; height:100%; object-fit:cover; }
.experience::before{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(30,24,16,.72) 0%, rgba(30,24,16,.5) 46%, rgba(30,24,16,.15) 100%);
}
.experience .wrap{ position:relative; z-index:2; width:100%; }
.exp-card{ max-width:540px; }
.experience .sec-title{ color:#fff; margin-bottom:26px; }
.experience .body{ color:rgba(244,239,230,.92); }
.exp-list{ list-style:none; margin:28px 0 36px; }
.exp-list li{
  padding:13px 0 13px 24px; position:relative;
  border-bottom:1px solid rgba(244,239,230,.16);
  font-size:15px; color:rgba(244,239,230,.94);
}
.exp-list li::before{
  content:""; position:absolute; left:0; top:22px;
  width:8px; height:1px; background:var(--accent);
}

/* =========================================================
   Store
   ========================================================= */
.store{ background:var(--paper); }
.store-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(40px,5vw,72px); align-items:center;
  margin-bottom:clamp(48px,6vw,72px);
}
.store-fig img{ width:100%; aspect-ratio:16/11; object-fit:cover; border-radius:2px; }
.store-list{ list-style:none; }
.store-list li{
  padding:24px 0; border-bottom:1px solid var(--line);
}
.store-list li:first-child{ padding-top:0; }
.store-list li:last-child{ border-bottom:none; }
.store-list h3{
  font-family:var(--serif); font-weight:600;
  font-size:19px; color:var(--ink);
  letter-spacing:.04em; margin-bottom:8px;
}
.store-list p{ font-size:14.5px; color:var(--text); line-height:1.85; }
.gift-row{
  border-top:1px solid var(--line);
  padding-top:clamp(36px,4vw,52px);
  display:flex; flex-wrap:wrap; align-items:center; gap:20px 40px;
}
.gift-eyebrow{
  font-family:var(--serif); font-size:17px;
  color:var(--accent-deep); letter-spacing:.06em;
  white-space:nowrap;
}
.gift-items{ display:flex; flex-wrap:wrap; gap:12px; }
.gift-items span{
  font-size:13.5px; letter-spacing:.05em;
  padding:9px 20px; border:1px solid var(--line);
  border-radius:999px; color:var(--text);
}

/* =========================================================
   Message
   ========================================================= */
.message{ background:var(--paper-2); }
.msg-grid{
  display:grid; grid-template-columns:.85fr 1.15fr;
  gap:clamp(40px,6vw,84px); align-items:center;
}
.msg-fig img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:2px; }
.sign{
  margin-top:36px; font-family:var(--serif);
  font-size:15px; color:var(--text); letter-spacing:.05em; line-height:1.9;
}
.sign strong{ font-size:22px; color:var(--ink); font-weight:600; }

/* =========================================================
   Company
   ========================================================= */
.company{ background:var(--paper); }
.company-table{
  border-top:1px solid var(--line);
  max-width:900px;
}
.company-table > div{
  display:grid; grid-template-columns:220px 1fr;
  gap:24px;
  padding:20px 4px;
  border-bottom:1px solid var(--line-soft);
}
.company-table dt{
  font-family:var(--serif); font-weight:500;
  color:var(--ink); font-size:15px; letter-spacing:.06em;
}
.company-table dd{ font-size:15px; color:var(--text); }
.company-table a{ color:var(--accent-deep); border-bottom:1px solid var(--line); }
.company-table a:hover{ color:var(--accent); }

/* =========================================================
   Contact
   ========================================================= */
.contact{
  background:var(--dark);
  color:var(--paper);
  text-align:center;
}
.contact-inner{ max-width:760px; margin:0 auto; }
.contact-title{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(26px,4vw,44px); line-height:1.55;
  color:#fff; letter-spacing:.05em; margin-bottom:26px;
}
.contact-lead{
  font-size:15px; color:rgba(244,239,230,.78);
  line-height:2; margin-bottom:44px;
}
.contact-actions{
  display:flex; gap:18px; justify-content:center; flex-wrap:wrap;
}
.contact .btn-solid{ font-size:16px; letter-spacing:.1em; }

/* =========================================================
   Footer
   ========================================================= */
.site-footer{
  background:#231E17; color:rgba(244,239,230,.72);
  padding-block:clamp(52px,6vw,72px) 30px;
}
.footer-inner{
  display:flex; flex-wrap:wrap; align-items:flex-end;
  justify-content:space-between; gap:30px;
  padding-bottom:38px; border-bottom:1px solid rgba(244,239,230,.12);
}
.footer-brand{ display:flex; flex-direction:column; gap:8px; }
.footer-name{ font-family:var(--latin); font-size:30px; color:var(--paper); letter-spacing:.04em; }
.footer-sub{ font-size:11px; letter-spacing:.34em; color:rgba(244,239,230,.6); }
.footer-nav{ display:flex; flex-wrap:wrap; gap:12px 26px; max-width:520px; }
.footer-nav a{ font-size:13.5px; color:rgba(244,239,230,.72); transition:color .3s; }
.footer-nav a:hover{ color:var(--accent); }
.footer-addr{ width:100%; font-size:13px; color:rgba(244,239,230,.5); letter-spacing:.04em; }
.copyright{
  margin-top:26px; text-align:center;
  font-family:var(--latin); font-size:13px;
  letter-spacing:.16em; color:rgba(244,239,230,.42);
}

/* =========================================================
   Reveal
   ========================================================= */
.reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.reveal.in{ opacity:1; transform:none; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:980px){
  .phi-grid,.craft-grid,.care-grid,.store-grid,.msg-grid{ grid-template-columns:1fr; }
  .phi-split{ grid-template-columns:1fr; gap:44px; }
  .prod-grid{ grid-template-columns:repeat(2,1fr); }
  .phi-fig{ order:-1; }
  .phi-fig img,.craft-main img,.care-fig img,.msg-fig img{ aspect-ratio:4/3; }
  .msg-fig{ max-width:460px; }
  .company-table > div{ grid-template-columns:150px 1fr; gap:16px; }
}

@media (max-width:680px){
  .nav-desktop{ display:none; }
  .burger{ display:flex; }
  .hero-bg{ background-image:url('../images/hero-sp.jpg'); background-position:center 30%; }
  .hero-veil{
    background:linear-gradient(0deg, rgba(30,24,16,.66) 0%, rgba(30,24,16,.12) 46%, rgba(30,24,16,.32) 100%);
  }
  .hero-latin{ display:none; }
  .prod-grid{ grid-template-columns:1fr; max-width:420px; margin-inline:auto; }
  .gift-row{ flex-direction:column; align-items:flex-start; gap:18px; }
  .btn{ width:100%; text-align:center; }
  .contact-actions{ flex-direction:column; }
  .company-table > div{ grid-template-columns:1fr; gap:4px; padding-block:16px; }
  .company-table dt{ color:var(--accent-deep); }
  .footer-inner{ flex-direction:column; align-items:flex-start; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none!important; transition:none!important; }
  .reveal{ opacity:1; transform:none; }
}