@charset "UTF-8";

/* ===============================================
   ほたる炭 - style.css
   富山県朝日町 笹川
   =============================================== */

:root{
  /* 色 */
  --sumi:        #14110f;   /* 墨 */
  --sumi-2:      #221d19;
  --sumi-3:      #332c26;
  --washi:       #f5efe4;   /* 和紙 */
  --washi-2:     #ebe1d1;
  --washi-3:     #ddcfb8;
  --kraft:       #c9a97c;   /* クラフト紙 */
  --hotaru:      #d9e070;   /* 蛍の光 */
  --hotaru-dim:  #a8b04a;
  --moss:        #5f6b43;
  --accent-ink:  #566224;   /* 和紙色の上で文字に使える濃いオリーブ */
  --ink-body:    #332d27;
  --ink-mute:    #665a4e;   /* 和紙色の上で 6:1 以上を確保 */

  /* 書体 */
  --mincho: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", "游明朝", serif;
  --gothic: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;

  /* レイアウト */
  --header-h: 76px;
  --pad: clamp(20px, 5vw, 40px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- リセット ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top: var(--header-h); -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family: var(--mincho);
  color: var(--ink-body);
  background: var(--washi);
  line-height: 2;
  font-size: clamp(15px, 1.02vw, 16.5px);
  letter-spacing: .04em;
  overflow-x: hidden;
  font-feature-settings: "palt" 1;
}
img,video{ max-width:100%; height:auto; display:block; }
h1,h2,h3,h4,p,figure,ul,ol,dl{ margin:0; padding:0; }
ul,ol{ list-style:none; }
a{ color:inherit; text-decoration:none; }
table{ border-collapse:collapse; width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
ruby{ ruby-position: over; }
ruby rt{ font-size: max(9.5px, .5em); font-weight:400; letter-spacing:.02em; line-height:1.1; }

::selection{ background: var(--hotaru); color: var(--sumi); }

/* ---------- 共通パーツ ---------- */
.container{ width:min(1180px, 100% - var(--pad)*2); margin-inline:auto; }
.container--narrow{ width:min(820px, 100% - var(--pad)*2); }

.section{ padding: clamp(76px, 11vw, 140px) 0; position:relative; }
.section--dark{ background: var(--sumi); color: var(--washi-2); }
.section--dark .sec-head__title,
.section--dark .craft__title{ color: var(--washi); }

.rule{
  display:inline-block; width:34px; height:1px;
  background: currentColor; opacity:.55;
  margin-right:.8em; vertical-align:middle;
}

.sec-head{ margin-bottom: clamp(40px, 5vw, 64px); }
.sec-head--center{ text-align:center; }
.sec-head--center .sec-head__desc{ margin-inline:auto; }
.sec-head__label{
  font-family: var(--gothic);
  font-size:11px; font-weight:500; letter-spacing:.28em;
  color: var(--ink-mute); margin-bottom:1.1em;
}
.section--dark .sec-head__label,
.section--maker .sec-head__label{ color: var(--kraft); }
.sec-head__title{
  font-size: clamp(24px, 3.9vw, 46px);
  font-weight:600; line-height:1.55; letter-spacing:.07em;
  color: var(--sumi);
  text-wrap: balance;
}
.sec-head__desc{
  margin-top:1.6em; max-width:44em;
  color: var(--ink-mute); font-size:.97em;
}
.section--dark .sec-head__desc{ color: var(--washi-3); }

/* ボタン */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  font-family: var(--gothic); font-size:13px; font-weight:500; letter-spacing:.14em;
  padding: 1.1em 2.4em;
  background: var(--sumi); color: var(--washi);
  border:1px solid var(--sumi); border-radius:2px;
  cursor:pointer; position:relative; overflow:hidden;
  transition: color .45s var(--ease), border-color .45s var(--ease), background .45s var(--ease);
}
.btn::after{
  content:""; position:absolute; inset:0;
  background: var(--hotaru); transform: translateY(101%);
  transition: transform .45s var(--ease); z-index:0;
}
.btn > *{ position:relative; z-index:1; }
.btn:hover{ color: var(--sumi); border-color: var(--hotaru); }
.btn:hover::after{ transform: translateY(0); }
.btn--ghost{ background:transparent; color: var(--washi); border-color: rgba(245,239,228,.55); }
.btn--ghost:hover{ color: var(--sumi); }
.btn--sm{ padding:.85em 1.7em; font-size:12px; }
.btn--lg{ padding:1.25em 3em; font-size:14px; }
.section--dark .btn{ background: var(--hotaru); color: var(--sumi); border-color: var(--hotaru); }
.section--dark .btn::after{ background: var(--washi); }

/* スクロール表示アニメーション
   ※ JS が動いている時だけ隠す（JS 無効・エラー時も本文は必ず表示される） */
.js .reveal{ opacity:0; transform: translateY(28px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .reveal.is-in{ opacity:1; transform:none; }

/* ===============================================
   ヘッダー
   =============================================== */
.header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height: var(--header-h);
  display:flex; align-items:center;
  transition: background .5s var(--ease), box-shadow .5s var(--ease), height .5s var(--ease);
}
.header::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(20,17,15,.62), transparent);
  transition: opacity .5s var(--ease);
}
.header.is-stuck{ background: rgba(20,17,15,.94); backdrop-filter: blur(10px); height:64px; box-shadow:0 1px 0 rgba(245,239,228,.12); }
.header.is-stuck::before{ opacity:0; }

.header__inner{
  position:relative; z-index:2;
  width:min(1360px, 100% - var(--pad)*1.6); margin-inline:auto;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}

.logo{ display:flex; align-items:center; gap:.7em; color: var(--washi); position:relative; z-index:3; }
.logo__mark{
  width:26px; height:26px; border-radius:50%; flex:none;
  background: radial-gradient(circle at 50% 50%, var(--hotaru) 0%, var(--hotaru-dim) 45%, transparent 72%);
  box-shadow:0 0 16px rgba(217,224,112,.55);
  animation: glow 3.4s ease-in-out infinite;
}
@keyframes glow{ 0%,100%{ opacity:.55; transform:scale(.9);} 50%{ opacity:1; transform:scale(1.06);} }
.logo__ja{ display:block; font-size:19px; font-weight:600; letter-spacing:.16em; line-height:1.2; }
.logo__en{ display:block; font-family: var(--gothic); font-size:9px; letter-spacing:.3em; opacity:.62; }

.nav{ display:flex; align-items:center; gap: clamp(18px, 2vw, 34px); }
.nav__list{ display:flex; gap: clamp(14px, 1.8vw, 30px); }
.nav__list a{
  color: var(--washi); font-size:13.5px; letter-spacing:.09em;
  position:relative; padding-bottom:5px; white-space:nowrap;
}
.nav__list a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:1px;
  background: var(--hotaru); transform: scaleX(0); transform-origin:right;
  transition: transform .4s var(--ease);
}
.nav__list a:hover::after{ transform: scaleX(1); transform-origin:left; }
.nav__cta{ background: transparent; color: var(--washi); border-color: rgba(245,239,228,.5); }
.nav__cta:hover{ color: var(--sumi); }

.burger{ display:none; width:44px; height:44px; background:none; border:0; cursor:pointer; padding:0; position:relative; z-index:3; }
.burger span{
  position:absolute; left:10px; width:24px; height:1.5px; background: var(--washi);
  transition: transform .4s var(--ease), opacity .3s;
}
.burger span:nth-child(1){ top:15px; }
.burger span:nth-child(2){ top:21px; }
.burger span:nth-child(3){ top:27px; }
.burger.is-open span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* ===============================================
   ヒーロー
   =============================================== */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:flex-end;
  padding: calc(var(--header-h) + 40px) 0 clamp(70px, 10vh, 110px);
  color: var(--washi); overflow:hidden;
}
.hero__media{ position:absolute; inset:0; overflow:hidden; background: var(--sumi); }
.hero__poster,
.hero__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 60%;
}
.hero__poster{ animation: heroZoom 20s var(--ease) forwards; }
.hero__video{ opacity:0; transition: opacity 1.4s var(--ease); }
.hero__video.is-playing{ opacity:1; }
@keyframes heroZoom{ from{ transform:scale(1.12);} to{ transform:scale(1);} }
.hero__veil{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(20,17,15,.94) 0%, rgba(20,17,15,.6) 42%, rgba(20,17,15,.3) 72%, rgba(20,17,15,.6) 100%),
    linear-gradient(to right, rgba(20,17,15,.72) 0%, rgba(20,17,15,.3) 45%, transparent 78%),
    radial-gradient(120% 70% at 20% 90%, rgba(20,17,15,.55), transparent 70%);
}
.hero__body{ position:relative; z-index:3; width:min(1180px, 100% - var(--pad)*2); margin-inline:auto; }
.hero__place{
  font-family: var(--gothic); font-size:12px; letter-spacing:.3em;
  color: var(--washi-3); margin-bottom:1.4em;
}
.hero__title{ margin-bottom:.9em; }
.hero__title-main{
  display:block;
  font-size: clamp(58px, 12vw, 132px);
  font-weight:700; line-height:1.02; letter-spacing:.05em;
  text-shadow: 0 4px 44px rgba(0,0,0,.55);
}
.hero__title-sub{
  display:block; margin-top:.7em;
  font-size: clamp(16px, 2.3vw, 25px); font-weight:400; letter-spacing:.16em;
  color: var(--hotaru);
}
.hero__lead{
  font-size: clamp(14px, 1.15vw, 16px); line-height:2.35;
  color: var(--washi-2); max-width:34em; margin-bottom:2.6em;
  text-shadow:0 2px 18px rgba(0,0,0,.5);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:14px; }

.hero__scroll{
  position:absolute; z-index:3; right: clamp(20px, 4vw, 54px); bottom:0;
  display:flex; flex-direction:column; align-items:center; gap:12px; color: var(--washi-3);
}
.hero__scroll-text{ font-family: var(--gothic); font-size:9.5px; letter-spacing:.3em; writing-mode: vertical-rl; }
.hero__scroll-line{ width:1px; height:76px; background: rgba(245,239,228,.35); position:relative; overflow:hidden; }
.hero__scroll-line::after{
  content:""; position:absolute; inset:0; background: var(--hotaru);
  animation: scrollLine 2.4s var(--ease) infinite;
}
@keyframes scrollLine{ 0%{ transform: translateY(-100%);} 60%,100%{ transform: translateY(100%);} }

/* 蛍のひかり */
.hotaru{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.hotaru i{
  position:absolute; display:block; width:4px; height:4px; border-radius:50%;
  background: var(--hotaru);
  box-shadow: 0 0 10px 3px rgba(217,224,112,.75);
  opacity:0; animation: fly linear infinite;
}
@keyframes fly{
  0%   { opacity:0; transform: translate(0,0) scale(.6); }
  12%  { opacity:.95; }
  50%  { opacity:.35; transform: translate(26px,-46px) scale(1.15); }
  72%  { opacity:.9; }
  100% { opacity:0; transform: translate(-16px,-118px) scale(.5); }
}

/* ===============================================
   ABOUT
   =============================================== */
.section--about{ background:
  linear-gradient(to bottom, var(--washi) 0%, var(--washi) 60%, var(--washi-2) 100%);
}
.about__grid{
  display:grid; grid-template-columns: 1.35fr .85fr; gap: clamp(36px, 6vw, 80px);
  align-items:start;
}
.lead-jp{
  font-size: clamp(18px, 1.9vw, 23px); font-weight:500; line-height:2;
  color: var(--sumi); margin-bottom:1.6em; letter-spacing:.06em;
}
.about__text p + p{ margin-top:1.7em; }

.about__facts{
  border-top:1px solid var(--washi-3);
  padding-top:8px;
}
.about__facts li{
  display:grid; grid-template-columns:auto 1fr; column-gap:1.2em;
  padding: 1.7em 0; border-bottom:1px solid var(--washi-3);
}
.fact__num{
  font-family: var(--gothic); font-size:11px; letter-spacing:.16em;
  color: var(--accent-ink); padding-top:.9em; grid-row:span 2;
}
.fact__ja{ font-size:1.16em; font-weight:600; color: var(--sumi); letter-spacing:.09em; }
.fact__desc{ font-size:.9em; color: var(--ink-mute); line-height:1.95; margin-top:.35em; }

.about__band{
  margin-top: clamp(56px, 8vw, 96px);
  display:grid; grid-template-columns:1fr 1fr; gap: 4px;
}
.band-fig{ position:relative; overflow:hidden; }
.band-fig img{ width:100%; height: clamp(280px, 42vw, 560px); object-fit:cover; transition: transform 1.4s var(--ease); }
.band-fig:hover img{ transform: scale(1.05); }
.band-fig figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding: 3.5em 1.6em 1.4em;
  background: linear-gradient(to top, rgba(20,17,15,.88), transparent);
  color: var(--washi-2); font-size:.83em; line-height:1.85; letter-spacing:.05em;
}

/* ===============================================
   CRAFT
   =============================================== */
.craft__list{ display:grid; gap: clamp(34px, 4vw, 48px); }
.craft{
  display:grid; grid-template-columns: 96px 1fr; gap: clamp(20px, 3vw, 44px);
  align-items:start;
  padding: clamp(28px, 3.4vw, 44px) 0;
  border-top:1px solid rgba(245,239,228,.16);
}
.craft:last-child{ border-bottom:1px solid rgba(245,239,228,.16); }
.craft__no{
  font-size: clamp(30px, 3.4vw, 44px); font-weight:600; line-height:1;
  color: var(--hotaru); opacity:.85; letter-spacing:.04em;
}
.craft__title{
  font-size: clamp(19px, 2.1vw, 26px); font-weight:600; letter-spacing:.08em;
  margin-bottom:.9em; line-height:1.7;
}
.craft__body p{ color: var(--washi-3); max-width:44em; }
.craft__note{
  margin-top:1.3em; padding-left:1.2em; border-left:2px solid var(--hotaru-dim);
  font-size:.92em; color: var(--kraft);
}

/* ---------- 明るい背景の「こだわり」 ---------- */
.craft__list--light .craft{ border-top-color: var(--washi-3); }
.craft__list--light .craft:last-child{ border-bottom-color: var(--washi-3); }
.craft__list--light .craft__no{ color: var(--accent-ink); opacity:1; }
.craft__list--light .craft__title{ color: var(--sumi); }
.craft__list--light .craft__body p{ color: var(--ink-body); }
.craft__list--light .craft__note{ color: var(--ink-mute); border-left-color: var(--accent-ink); }

/* ===============================================
   市販炭との違い
   =============================================== */
.diff{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap:1px; background: rgba(245,239,228,.16);
  border:1px solid rgba(245,239,228,.16);
}
.diff__item{ background: var(--sumi); padding: clamp(28px, 3.2vw, 42px); }
.diff__item--hero{ grid-column: 1 / -1; background: var(--sumi-2); }
.diff__no{
  font-family: var(--gothic); font-size:11px; letter-spacing:.22em;
  color: var(--hotaru); margin-bottom:1.5em;
}
.diff__title{
  font-size: clamp(19px, 2.1vw, 25px); font-weight:600; letter-spacing:.09em;
  color: var(--washi); margin-bottom:.9em; line-height:1.6;
}
.diff__item p:not(.diff__no){ color: var(--washi-3); font-size:.94em; }
.diff__item--hero .diff__title{ color: var(--hotaru); }
.diff__item--hero p:not(.diff__no){ max-width:46em; }
.diff__note{
  margin-top: clamp(30px, 4vw, 46px); text-align:center;
  font-size:1.02em; color: var(--kraft); line-height:2.2;
}

/* ===============================================
   樹種
   =============================================== */
.wood{
  margin-top: clamp(56px, 7vw, 90px);
  padding: clamp(32px, 4.4vw, 56px);
  background: var(--washi-2); border:1px solid var(--washi-3);
}
.wood__head{
  font-size: clamp(20px, 2.3vw, 27px); font-weight:600; color: var(--sumi);
  letter-spacing:.08em; margin-bottom:.8em;
}
.wood__lead{ color: var(--ink-mute); font-size:.94em; max-width:48em; margin-bottom:2.4em; }
.wood__list{ display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 30px); }
.wood__item{ background: var(--washi); border:1px solid var(--washi-3); padding: clamp(22px, 2.6vw, 30px); }
.wood__name{
  font-size:1.3em; font-weight:600; color: var(--sumi); letter-spacing:.1em;
  display:flex; align-items:baseline; gap:.6em;
}
.wood__name span{ font-size:.55em; font-weight:400; color: var(--ink-mute); letter-spacing:.14em; }
.wood__mark{
  font-size:1.9em; line-height:1; color: var(--accent-ink);
  margin:.5em 0 .6em;
}
.wood__desc{ font-size:.88em; color: var(--ink-mute); line-height:2; }

/* ===============================================
   PROCESS
   =============================================== */
.section--process{ background: var(--washi-2); }
.section--process .step{ background: var(--washi); }
.step__no--accent span{ color: var(--accent-ink); }
.step__no--accent{ color: var(--sumi); }
.step__no--accent::after{
  content:""; display:inline-block; width:6px; height:6px; border-radius:50%;
  background: var(--accent-ink); margin-left:.2em; transform: translateY(-.9em);
}

.steps{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--washi-3); border:1px solid var(--washi-3);
}
@media (max-width: 1000px){ .steps{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .steps{ grid-template-columns: 1fr; } }
.step{ background: var(--washi); padding: clamp(28px, 3vw, 40px); }
.step__no{
  font-family: var(--gothic); font-weight:500;
  font-size:26px; letter-spacing:.06em; color: var(--sumi);
  display:flex; align-items:baseline; gap:.6em; margin-bottom:1.1em;
}
.step__no span{ font-size:10px; letter-spacing:.24em; color: var(--accent-ink); }
.step__body h3{
  font-size:1.16em; font-weight:600; color: var(--sumi);
  letter-spacing:.07em; margin-bottom:.85em; line-height:1.65;
}
.step__body p{ font-size:.92em; color: var(--ink-mute); line-height:2.05; }

.process__media{
  margin-top: clamp(46px, 6vw, 72px);
  display:grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 30px);
}
.video-fig video, .process__media img{
  width:100%; height: clamp(300px, 44vw, 540px); object-fit:cover; background: var(--sumi);
}
.process__media figcaption{
  margin-top:1em; font-size:.83em; color: var(--ink-mute); letter-spacing:.05em;
}

/* ===============================================
   MAKER
   =============================================== */
.section--maker{ background: var(--sumi-2); color: var(--washi-2); }
.maker{ display:grid; grid-template-columns: .9fr 1.1fr; gap: clamp(34px, 6vw, 80px); align-items:center; }
.maker__media{ position:relative; }
.maker__media img{ width:100%; aspect-ratio: 3/4; object-fit:cover; object-position:center 45%; }
.maker__caption{
  position:absolute; right:18px; bottom:18px;
  writing-mode: vertical-rl;
  font-size:.8em; letter-spacing:.28em; color: var(--washi);
  background: var(--sumi); padding:1.4em .55em;
}
.maker__title{
  font-size: clamp(25px, 3.4vw, 40px); font-weight:600; line-height:1.6;
  letter-spacing:.06em; color: var(--washi); margin-bottom:.7em;
}
.maker__name-note{ font-size:.9em; color: var(--kraft); margin-bottom:2.2em; letter-spacing:.06em; }
.maker__person{ display:flex; align-items:center; gap:1.1em; margin-bottom:2.2em; }
.maker__face{
  width:74px; height:74px; flex:none; border-radius:50%;
  object-fit:cover; object-position:center 32%;
  border:1px solid rgba(245,239,228,.28);
}
.maker__person .maker__name-note{ margin-bottom:0; }
@media (max-width:560px){ .maker__face{ width:62px; height:62px; } }

.maker__text p + p{ margin-top:1.7em; }
.maker__text p{ color: var(--washi-3); }
.maker__closing{
  margin-top:2.2em !important; padding-top:2em;
  border-top:1px solid rgba(245,239,228,.18);
  color: var(--washi) !important; font-size:1.06em; line-height:2.2;
}

/* ===============================================
   炭化とは（本文組み）
   =============================================== */
.prose p{ color: var(--washi-3); }
.prose p + p{ margin-top:1.7em; }
.prose strong{ color: var(--washi); font-weight:600; }
.prose__h3{
  margin: 2.6em 0 1.1em;
  font-size: clamp(18px, 2vw, 23px); font-weight:600;
  color: var(--washi); letter-spacing:.08em; line-height:1.7;
}
.quote{
  margin: 1.8em 0; padding: 1.4em 0 1.4em 1.6em;
  border-left:2px solid var(--hotaru);
  font-size:1.1em; line-height:2.1; color: var(--hotaru);
  letter-spacing:.05em;
}
.prose__note{
  margin-top:2.2em !important; padding-top:1.8em;
  border-top:1px solid rgba(245,239,228,.16);
  font-size:.92em; color: var(--kraft) !important;
}

/* ===============================================
   歴史（タイムライン）
   =============================================== */
.timeline{ border-top:1px solid var(--washi-3); }
.timeline__item{
  display:grid; grid-template-columns: 230px 1fr; gap: clamp(20px, 3vw, 50px);
  padding: clamp(30px, 3.6vw, 46px) 0;
  border-bottom:1px solid var(--washi-3);
}
.timeline__when{ display:flex; flex-direction:column; gap:.9em; align-items:flex-start; }
.timeline__era{
  font-size:1.16em; font-weight:600; color: var(--sumi); letter-spacing:.07em;
}
.timeline__tag{
  font-family: var(--gothic); font-size:10.5px; letter-spacing:.14em;
  padding:.5em 1em; border-radius:2px;
  background: var(--washi-3); color: var(--ink-body);
}
.timeline__tag--dim{ background:transparent; border:1px solid var(--washi-3); color: var(--ink-mute); }
.timeline__tag--on{ background: var(--hotaru); color: var(--sumi); }
.timeline__body h3{
  font-size: clamp(18px, 2vw, 24px); font-weight:600; color: var(--sumi);
  letter-spacing:.07em; margin-bottom:.9em; line-height:1.7;
}
.timeline__body p{ color: var(--ink-mute); max-width:46em; }

.history__note{
  margin-top: clamp(46px, 6vw, 76px);
  padding: clamp(30px, 4vw, 52px);
  background: var(--sumi); color: var(--washi-3);
}
.history__note h3{
  font-size: clamp(18px, 2vw, 23px); font-weight:600; color: var(--hotaru);
  letter-spacing:.08em; margin-bottom:1.3em;
}
.history__note p + p{ margin-top:1.6em; }
.history__note strong{ color: var(--washi); font-weight:600; }

/* ===============================================
   VILLAGE
   =============================================== */
.section--village{
  display:grid; grid-template-columns: 1fr 1fr; align-items:stretch;
  padding:0; background: var(--washi-2);
}
.village__media{ position:relative; min-height: clamp(360px, 56vw, 720px); }
.village__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.village__body{
  padding: clamp(56px, 8vw, 110px) clamp(28px, 6vw, 88px);
  display:flex; align-items:center;
}
.village__body p{ margin-top:1.7em; color: var(--ink-body); }
.village__body .sec-head__title{ margin-bottom:.2em; }

/* ===============================================
   USAGE
   =============================================== */
.use__band{
  margin-top:0; margin-bottom: clamp(46px, 6vw, 72px);
  grid-template-columns: 1.32fr .88fr;
}
.use__band .band-fig img{ height: clamp(260px, 36vw, 480px); }

.uses{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
}
.use{
  background:#fff; border:1px solid var(--washi-3);
  padding: clamp(26px, 3vw, 36px); position:relative;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.use:hover{ transform: translateY(-5px); box-shadow: 0 18px 40px -24px rgba(20,17,15,.4); }
.use__title{
  font-size:1.08em; font-weight:600; color: var(--sumi);
  letter-spacing:.07em; margin-bottom:.9em; padding-bottom:.9em;
  border-bottom:1px solid var(--washi-3); line-height:1.6;
}
.use p{ font-size:.9em; color: var(--ink-mute); line-height:2.05; }

.tips{
  margin-top: clamp(38px, 5vw, 60px);
  display:grid; grid-template-columns:1fr 1fr; gap: clamp(28px, 4vw, 56px);
  background: var(--sumi); color: var(--washi-2);
  padding: clamp(32px, 4.4vw, 56px);
}
.tips__title{
  font-size:1.12em; font-weight:600; color: var(--hotaru);
  letter-spacing:.09em; margin-bottom:1.3em;
}
.tips__list li{
  position:relative; padding-left:1.4em; font-size:.9em;
  line-height:2.05; color: var(--washi-3);
}
.tips__list li + li{ margin-top:.9em; }
.tips__list li::before{
  content:""; position:absolute; left:0; top:.95em;
  width:5px; height:5px; border-radius:50%; background: var(--hotaru-dim);
}

/* ===============================================
   PRODUCT
   =============================================== */
.product{
  display:grid; grid-template-columns: .95fr 1.05fr;
  gap: clamp(30px, 5vw, 66px); align-items:center;
}
.product__media img{ width:100%; aspect-ratio:3/4; object-fit:cover; object-position:center 45%; }
.product__tag{
  font-size:.82em; letter-spacing:.2em; color: var(--kraft); margin-bottom:.9em;
}
.product__name{
  font-size: clamp(26px, 3.2vw, 38px); font-weight:600; color: var(--washi);
  letter-spacing:.09em; margin-bottom:.8em;
}
.product__name span{ font-size:.42em; font-weight:400; letter-spacing:.14em; color: var(--washi-3); margin-left:.8em; }
.product__price{
  display:flex; align-items:baseline; gap:.15em;
  color: var(--hotaru); letter-spacing:.04em;
  margin-bottom:1.3em; padding-bottom:1.3em;
  border-bottom:1px solid rgba(245,239,228,.17);
}
.product__price-num{ font-size: clamp(38px, 4.6vw, 56px); font-weight:700; line-height:1; }
.product__price-tax{
  font-size:.42em; color: var(--washi-3); letter-spacing:.1em; margin-left:.9em;
}
.product__desc{ color: var(--washi-3); margin-bottom:2em; font-size:.96em; }

.spec{ margin-bottom:1.8em; font-size:.9em; }
.spec th, .spec td{
  text-align:left; padding:.95em .4em; vertical-align:top;
  border-bottom:1px solid rgba(245,239,228,.17);
}
.spec th{ width:6.5em; font-weight:500; color: var(--kraft); letter-spacing:.1em; white-space:nowrap; }
.spec td{ color: var(--washi-2); }
.spec__todo{
  display:inline-block; margin-left:.7em; padding:.1em .7em;
  font-family: var(--gothic); font-size:10px; letter-spacing:.08em;
  color:#8a6d2b; background: var(--hotaru); border-radius:2px; vertical-align:middle;
}
.product__note{ font-size:.83em; color: var(--washi-3); opacity:.8; margin-bottom:2.2em; line-height:1.95; }

.package{ margin-top: clamp(46px, 6vw, 78px); position:relative; }
.package img{ width:100%; height: clamp(280px, 38vw, 480px); object-fit:cover; object-position:center 45%; }
.package figcaption{
  margin-top:1.1em; text-align:center; font-size:.85em; color: var(--washi-3); letter-spacing:.06em;
}

/* ===============================================
   FAQ
   =============================================== */
.faq{ border-top:1px solid var(--washi-3); }
.faq__item{ border-bottom:1px solid var(--washi-3); }
.faq__item summary{
  list-style:none; cursor:pointer; position:relative;
  padding: 1.6em 3em 1.6em 2.2em;
  font-size:1.02em; font-weight:500; color: var(--sumi); letter-spacing:.06em;
  line-height:1.8; transition: color .3s;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::before{
  content:"Q"; position:absolute; left:0; top:1.55em;
  font-family: var(--gothic); font-size:12px; letter-spacing:.1em; color: var(--accent-ink);
}
.faq__item summary::after{
  content:""; position:absolute; right:.6em; top:50%;
  width:11px; height:11px; margin-top:-7px;
  border-right:1.5px solid var(--ink-mute); border-bottom:1.5px solid var(--ink-mute);
  transform: rotate(45deg); transition: transform .4s var(--ease);
}
.faq__item[open] summary::after{ transform: rotate(-135deg); margin-top:-2px; }
.faq__item summary:hover{ color: var(--accent-ink); }
.faq__a{ padding: 0 2em 1.9em 2.2em; }
.faq__a p{ font-size:.93em; color: var(--ink-mute); line-height:2.1; }

/* ===============================================
   CONTACT
   =============================================== */
.section--contact{ background: var(--washi-2); }
.contact-info{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr));
  gap:1px; background: var(--washi-3); border:1px solid var(--washi-3);
  margin-bottom: clamp(36px, 5vw, 56px);
}
.contact-info__item{ background: var(--washi); padding: 1.9em 1.6em; text-align:center; }
.contact-info__label{
  font-family: var(--gothic); font-size:10.5px; letter-spacing:.24em;
  color: var(--ink-mute); margin-bottom:.9em;
}
.contact-info__value{ font-size:1.05em; color: var(--sumi); letter-spacing:.05em; }

.form__row{ margin-bottom:1.7em; }
.form__row label{
  display:block; font-size:.88em; font-weight:500; color: var(--sumi);
  letter-spacing:.1em; margin-bottom:.7em;
}
.req{
  display:inline-block; margin-left:.8em; padding:.1em .7em;
  font-family: var(--gothic); font-size:10px; letter-spacing:.08em;
  background: var(--sumi); color: var(--washi); border-radius:2px; vertical-align:middle;
}
.form input, .form select, .form textarea{
  width:100%; padding:1em 1.1em;
  background:#fff; border:1px solid var(--washi-3); border-radius:2px;
  font-family: var(--mincho); font-size:.97em; line-height:1.8;
  transition: border-color .3s, box-shadow .3s;
}
.form input:focus, .form select:focus, .form textarea:focus{
  outline:none; border-color: var(--hotaru-dim);
  box-shadow:0 0 0 3px rgba(217,224,112,.28);
}
.form input.is-error, .form textarea.is-error{ border-color:#b4553f; box-shadow:0 0 0 3px rgba(180,85,63,.14); }
.form textarea{ resize:vertical; }
.form__row--half{ display:grid; grid-template-columns:1fr 1fr; gap:1.2em; }
.form__hint{ margin-top:.7em; font-size:.78em; color: var(--ink-mute); line-height:1.8; }
.form__note{ font-size:.8em; color: var(--ink-mute); margin-bottom:1.8em; line-height:1.9; }
.form__status{ display:none; }
.form__status.is-shown{
  display:block; margin-bottom:1.6em; padding:1em 1.2em;
  background:#fff; border-left:3px solid var(--hotaru-dim);
  font-size:.9em; color: var(--ink-body); line-height:1.9;
}

/* ===============================================
   フッター
   =============================================== */
.footer{ background: var(--sumi); color: var(--washi-3); padding: clamp(56px,7vw,84px) 0 30px; }
.footer__inner{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:44px;
  padding-bottom: 44px; border-bottom:1px solid rgba(245,239,228,.14);
}
.footer__brand .logo__mark{ display:block; margin-bottom:1.2em; }
.footer__ja{ font-size:24px; font-weight:600; letter-spacing:.18em; color: var(--washi); margin-bottom:.5em; }
.footer__en{ font-family: var(--gothic); font-size:10px; letter-spacing:.24em; opacity:.6; margin-bottom:1.6em; }
.footer__addr{ font-size:.88em; letter-spacing:.06em; }
.footer__nav{ display:flex; gap: clamp(34px, 5vw, 76px); }
.footer__nav a{ font-size:.88em; letter-spacing:.07em; transition: color .3s; }
.footer__nav a:hover{ color: var(--hotaru); }
.footer__nav li + li{ margin-top:.95em; }
.copyright{
  margin-top:26px; text-align:center;
  font-family: var(--gothic); font-size:10.5px; letter-spacing:.16em; opacity:.5;
}

/* トップへ戻る */
.to-top{
  position:fixed; right:22px; bottom:22px; z-index:90;
  width:48px; height:48px; display:grid; place-items:center;
  background: var(--sumi); color: var(--washi); border-radius:50%;
  opacity:0; visibility:hidden; transform: translateY(12px);
  transition: opacity .4s, visibility .4s, transform .4s, background .3s, color .3s;
}
.to-top.is-show{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ background: var(--hotaru); color: var(--sumi); }

/* ===============================================
   レスポンシブ
   =============================================== */
@media (max-width: 1080px){
  .nav__list{ gap:16px; }
  .nav__list a{ font-size:12.5px; }
  .about__grid{ grid-template-columns:1fr; }
  .maker{ grid-template-columns:1fr; }
  .maker__media img{ aspect-ratio:4/5; object-position:center 45%; }
  .product{ grid-template-columns:1fr; }
}

@media (max-width: 1080px){
  .diff{ grid-template-columns: repeat(2, 1fr); }
  .wood__list{ grid-template-columns:1fr; }
  .timeline__item{ grid-template-columns:1fr; gap:14px; }
  .timeline__when{ flex-direction:row; align-items:center; gap:1em; }
}

@media (max-width: 860px){
  :root{ --header-h: 64px; }
  .diff{ grid-template-columns:1fr; }
  .burger{ display:block; }
  .nav{
    position:fixed; inset:0; z-index:-1;
    flex-direction:column; justify-content:center; gap:34px;
    background: rgba(20,17,15,.98); backdrop-filter: blur(8px);
    opacity:0; visibility:hidden; transition: opacity .45s var(--ease), visibility .45s;
  }
  .nav.is-open{ opacity:1; visibility:visible; z-index:1; }
  .nav__list{ flex-direction:column; align-items:center; gap:26px; }
  .nav__list a{ font-size:17px; letter-spacing:.14em; }

  .about__band{ grid-template-columns:1fr; gap:3px; }
  .process__media{ grid-template-columns:1fr; }
  .section--village{ grid-template-columns:1fr; }
  .village__media{ min-height: 58vw; }
  .tips{ grid-template-columns:1fr; }
  .craft{ grid-template-columns:1fr; gap:14px; }
  .craft__no{ font-size:28px; }
  .footer__inner{ flex-direction:column; }
}

@media (max-width: 560px){
  /* 文字を詰めすぎず、1行の文字数を稼ぐ */
  body{ font-size:15.5px; line-height:1.9; letter-spacing:.01em; }

  /* 縦の余白を締めて、スクロール量を減らす */
  .section{ padding: 62px 0; }
  .sec-head{ margin-bottom:30px; }
  .sec-head__desc{ margin-top:1.2em; }

  .hero{ min-height: 90svh; }
  .hero__lead br{ display:none; }
  .hero__lead{ line-height:2.1; }
  .hero__actions{ flex-direction:column; align-items:stretch; }
  .btn{ justify-content:center; }
  .hero__scroll{ display:none; }

  .lead-jp{ font-size:17px; line-height:1.9; }
  .about__facts li{ padding:1.4em 0; }
  .about__band{ margin-top:40px; }
  .band-fig figcaption{ font-size:.8em; padding:2.8em 1.1em 1.1em; }

  .craft{ padding:26px 0; }
  .craft__list{ gap:0; }
  .craft__no{ font-size:24px; }
  .craft__title{ font-size:18px; margin-bottom:.7em; }
  .craft__note{ padding-left:1em; }

  .diff__item{ padding:26px 22px; }
  .diff__title{ font-size:19px; }
  .diff__note{ margin-top:26px; font-size:.96em; }

  .wood{ padding:26px 22px; margin-top:44px; }
  .step{ padding:26px 22px; }
  .step__no{ font-size:22px; margin-bottom:.8em; }

  .quote{ font-size:1em; padding-left:1.1em; }
  .prose__h3{ margin-top:2em; }

  .timeline__body h3{ font-size:18px; }
  .history__note{ padding:26px 22px; margin-top:40px; }

  .maker__caption{ display:none; }
  .maker__title{ font-size:24px; }
  .maker__closing{ font-size:1em; }

  .village__body{ padding:52px 22px; }
  .use{ padding:24px 22px; }
  .tips{ padding:26px 22px; }

  .product__price-num{ font-size:40px; }
  .package img{ height:230px; }
  .spec th{ width:5.2em; }
  .spec th, .spec td{ padding:.8em .2em; }

  .faq__item summary{ padding:1.3em 2.4em 1.3em 1.9em; font-size:.97em; }
  .faq__a{ padding:0 .2em 1.6em 1.9em; }

  .contact-info__item{ padding:1.5em 1.2em; }
  .form__row--half{ grid-template-columns:1fr; gap:1.7em; }
  .footer__nav{ flex-direction:column; gap:18px; }
  .to-top{ right:14px; bottom:14px; width:44px; height:44px; }
}

/* アニメーションを抑える設定 */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .js .reveal{ opacity:1; transform:none; }
  .hotaru{ display:none; }
}

/* 印刷 */
@media print{
  .header,.to-top,.hero__scroll,.hotaru,.form,.nav{ display:none !important; }
  body{ background:#fff; color:#000; }
  .section--dark,.section--maker{ background:#fff !important; color:#000 !important; }
}

/* ===============================================
   ブログ（読みもの）
   =============================================== */
.is-article{ background: var(--washi); }
.is-article .header{ background: rgba(20,17,15,.96); backdrop-filter: blur(10px); }
.is-article .header::before{ opacity:0; }

.article{ padding: calc(var(--header-h) + clamp(38px,6vw,70px)) 0 clamp(70px,9vw,120px); }
.article__crumbs{
  font-family: var(--gothic); font-size:11.5px; letter-spacing:.1em;
  color: var(--ink-mute); margin-bottom:1.8em;
}
.article__crumbs a:hover{ color: var(--accent-ink); text-decoration:underline; }
.article__title{
  font-size: clamp(25px, 3.4vw, 42px); font-weight:600; line-height:1.6;
  letter-spacing:.05em; color: var(--sumi); text-wrap: balance;
}
.article__date{
  margin-top:1.4em; font-family: var(--gothic); font-size:12px;
  letter-spacing:.14em; color: var(--ink-mute);
}
.article__hero{ margin: clamp(32px,4.5vw,56px) 0 clamp(38px,5vw,64px); }
.article__hero img{
  width:100%; height: clamp(230px, 40vw, 520px); object-fit:cover;
}

.article__body h2{
  margin: 2.6em 0 1em; padding-top:1.2em;
  border-top:1px solid var(--washi-3);
  font-size: clamp(20px, 2.3vw, 27px); font-weight:600;
  color: var(--sumi); letter-spacing:.06em; line-height:1.7;
}
.article__body h2:first-child{ margin-top:0; padding-top:0; border-top:0; }
.article__body h3{
  margin: 2.1em 0 .9em;
  font-size: clamp(17px, 1.9vw, 21px); font-weight:600;
  color: var(--sumi); letter-spacing:.06em; line-height:1.7;
}
.article__body p{ margin-bottom:1.7em; }
.article__body strong{ font-weight:600; color: var(--sumi); }
.article__body a{ color: var(--accent-ink); text-decoration:underline; text-underline-offset:.25em; }

.article__list{ margin:0 0 1.9em; padding-left:1.3em; }
.article__list li{ position:relative; margin-bottom:.7em; }
.article__list li::before{
  content:""; position:absolute; left:-1.1em; top:.92em;
  width:5px; height:5px; border-radius:50%; background: var(--accent-ink);
}
.article__list--num{ counter-reset: n; }
.article__list--num li::before{
  counter-increment:n; content: counter(n) "."; width:auto; height:auto;
  background:none; border-radius:0; top:0; left:-1.3em;
  font-family: var(--gothic); font-size:.85em; color: var(--accent-ink);
}
.article__quote{
  margin:2em 0; padding:1.2em 0 1.2em 1.5em;
  border-left:2px solid var(--accent-ink);
  font-size:1.06em; line-height:2.1; color: var(--sumi);
}
.article__fig{ margin:2.4em 0; }
.article__fig img{ width:100%; }
.article__fig figcaption{
  margin-top:1em; font-size:.83em; color: var(--ink-mute); letter-spacing:.04em;
}
.article__hr{ margin:2.6em 0; border:0; border-top:1px solid var(--washi-3); }

.article__cta{
  margin-top: clamp(46px,6vw,72px); padding: clamp(28px,3.6vw,42px);
  background: var(--sumi); color: var(--washi-2);
}
.article__cta-label{
  font-family: var(--gothic); font-size:10.5px; letter-spacing:.24em;
  color: var(--kraft); margin-bottom:1.2em;
}
.article__cta-name{ font-size:1.3em; font-weight:600; color: var(--washi); letter-spacing:.06em; }
.article__cta-desc{ margin:.9em 0 1.9em; font-size:.92em; color: var(--washi-3); }
.article__cta .btn{ background: var(--hotaru); color: var(--sumi); border-color: var(--hotaru); }
.article__cta .btn::after{ background: var(--washi); }

.article__nav{ margin-top: clamp(38px,5vw,60px); display:grid; grid-template-columns:1fr 1fr; gap:1px; background: var(--washi-3); border:1px solid var(--washi-3); }
.article__nav-item{
  background: var(--washi); padding:1.6em 1.4em; font-size:.92em; line-height:1.8;
  color: var(--sumi); transition: background .3s;
}
.article__nav-item:hover{ background: var(--washi-2); }
.article__nav-item span{
  display:block; font-family: var(--gothic); font-size:10px;
  letter-spacing:.18em; color: var(--ink-mute); margin-bottom:.7em;
}
.article__nav-item--next{ text-align:right; }

/* 一覧 */
.posts{ display:grid; gap:1px; background: var(--washi-3); border:1px solid var(--washi-3); }
.post__link{ display:grid; grid-template-columns: 240px 1fr; gap: clamp(18px,2.6vw,34px); background: var(--washi); padding: clamp(18px,2.2vw,26px); transition: background .35s; }
.post__link:hover{ background: var(--washi-2); }
.post__media img{ width:100%; height:150px; object-fit:cover; }
.post__body{ display:flex; flex-direction:column; justify-content:center; }
.post__date{ font-family: var(--gothic); font-size:11px; letter-spacing:.14em; color: var(--ink-mute); margin-bottom:.8em; }
.post__title{ font-size:1.18em; font-weight:600; color: var(--sumi); letter-spacing:.05em; line-height:1.7; margin-bottom:.6em; }
.post__desc{ font-size:.88em; color: var(--ink-mute); line-height:1.95; }

@media (max-width: 720px){
  .post__link{ grid-template-columns:1fr; }
  .post__media img{ height:180px; }
  .article__nav{ grid-template-columns:1fr; }
  .article__nav-item--next{ text-align:left; }
}