@charset "utf-8";
/* =========================================================
   南部経木 nambu-Kegi  concept site
   LP デザイン（nambukegi_LP250730）を踏襲
   ========================================================= */

:root{
  --bg:        #f5f8f4;
  --bg-white:  #ffffff;
  --gray:      #646865;
  --dark:      #201e1a;
  --ink:       #2b2b2b;
  --txt:       #535553;
  --line:      #c7c9c7;
  --line-soft: #e2e2e2;

  --nav-w: 126px;
  --pad: clamp(24px, 5vw, 90px);
  --gap: 16px;

  --mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --gothic: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --latin:  "Cormorant Garamond", "Shippori Mincho", serif;
}

*,*::before,*::after{box-sizing:border-box;}
[hidden]{display:none !important;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--bg);color:var(--txt);
  font-family:var(--gothic);font-weight:300;font-size:15px;line-height:2;
  letter-spacing:.06em;overflow-x:hidden;
}
img,video,svg{max-width:100%;display:block;}
img{height:auto;}
ul{list-style:none;margin:0;padding:0;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}

.skip{position:absolute;left:-9999px;}
.skip:focus{left:8px;top:8px;z-index:999;background:#fff;padding:8px 14px;}

/* 目には見せないが、読み上げと検索エンジンには届くテキスト */
.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

rt{ font-size:.5em;letter-spacing:.05em;font-weight:400;color:#8d8f8d; }

/* =========================================================
   名前のこと（読み・表記ゆれ）
   ========================================================= */
.naming{ background:var(--bg-white);padding:clamp(60px,8vw,110px) 0; }
.naming .inner{ margin-inline:auto; }
.naming__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(30px,4vw,56px);
}
.naming__src{
  font-size:11px;color:#9a9c9a;line-height:1.9;letter-spacing:.02em;margin-top:2em;
}
.naming__lig{ margin:0 0 1.8em; }
.naming__lig img{ width:clamp(58px,6vw,78px);height:auto; }
.naming__lig figcaption{
  margin-top:.9em;font-size:11px;color:#9a9c9a;letter-spacing:.08em;line-height:1.8;
}
.naming__h{ font-size:clamp(19px,2.2vw,26px);margin-bottom:1.3em; }
.naming .body-txt{ margin-bottom:1.6em; }
.naming .body-txt:last-child{ margin-bottom:0; }
.naming strong{ font-weight:400;color:var(--ink);border-bottom:1px solid var(--line); }
.naming em{
  font-family:var(--latin);font-style:italic;font-size:1.08em;
  color:var(--ink);letter-spacing:.03em;
}

/* ---------- 共通 ---------- */
main{ padding-left:var(--nav-w); }
.inner{ padding:0 var(--pad);max-width:1180px; }
.inner--narrow{ max-width:860px;margin-inline:auto; }

.h-mincho{
  font-family:var(--mincho);font-weight:400;color:var(--ink);
  line-height:1.9;letter-spacing:.1em;margin:0 0 1.6em;
  font-size:clamp(20px,2.5vw,30px);
}
.h-center{ text-align:center; }

.sec-label{ display:flex;align-items:baseline;gap:14px;margin:0 0 3.4em;line-height:1.4; }
.sec-label .ja{ font-size:12px;letter-spacing:.18em;color:var(--ink); }
.sec-label .en{ font-family:var(--latin);font-size:11px;letter-spacing:.22em;color:#8d8f8d; }
.sec-label::after{ content:"";flex:0 0 68px;height:1px;background:var(--ink);opacity:.6;margin-left:6px; }
.sec-label--light .ja{ color:#fff; }
.sec-label--light .en{ color:rgba(255,255,255,.7); }
.sec-label--light::after{ background:#fff; }

.body-txt{ margin:0 0 2em;font-size:14px;line-height:2.3;max-width:44em; }
.body-txt--wide{ max-width:64em; }
.note{ font-size:12px;color:#8d8f8d;line-height:2;margin:.6em 0 0; }

.btn-wrap{ text-align:center;margin:clamp(40px,6vw,72px) 0 0; }
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-width:250px;padding:17px 34px;border:1px solid var(--ink);
  font-family:var(--mincho);font-size:15px;letter-spacing:.16em;color:var(--ink);
  transition:background .35s ease,color .35s ease;
}
.btn:hover{ background:var(--ink);color:#fff; }
.btn__ico{ width:15px;height:15px;flex:none; }
.btn-note{ font-size:11.5px;color:#8d8f8d;margin:1.2em 0 0;letter-spacing:.06em; }

.zoom-note{
  text-align:center;font-size:11.5px;color:#9a9c9a;letter-spacing:.1em;margin:1.6em 0 0;
}

/* =========================================================
   固定サイドナビ
   ========================================================= */
.side-nav{
  position:fixed;inset:0 auto 0 0;z-index:60;width:var(--nav-w);
  display:flex;flex-direction:column;align-items:center;padding:24px 8px;
  background:rgba(255,255,255,.85);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-right:1px solid rgba(0,0,0,.06);
}
.side-nav__logo{ display:block;width:84px;margin:0 0 auto; }
.side-nav__logo img{ width:100%;height:auto; }

.side-nav__list{ display:flex;flex-direction:column;gap:30px;text-align:center;margin:auto 0; }
.side-nav__list a{ display:block;line-height:1.3;position:relative;padding-bottom:3px; }
.side-nav__list .ja{ display:block;font-size:11.5px;letter-spacing:.1em;color:var(--ink); }
.side-nav__list .en{ display:block;font-family:var(--latin);font-size:9px;letter-spacing:.14em;color:#9a9c9a;margin-top:2px; }
.side-nav__list a::after{
  content:"";position:absolute;left:50%;bottom:-4px;translate:-50% 0;
  width:0;height:1px;background:var(--ink);transition:width .35s ease;
}
.side-nav__list a:hover::after,.side-nav__list a.is-active::after{ width:26px; }

.side-nav__shop{
  margin:auto 0 0;padding:10px 3px;width:98px;text-align:center;
  border:1px solid var(--ink);line-height:1.4;transition:background .3s,color .3s;
}
.side-nav__shop .ja{ display:block;font-size:9.5px;letter-spacing:0;color:var(--ink);white-space:nowrap; }
.side-nav__shop .en{ display:block;font-family:var(--latin);font-size:8.5px;letter-spacing:.2em;color:#9a9c9a; }
.side-nav__shop:hover{ background:var(--ink); }
.side-nav__shop:hover .ja,.side-nav__shop:hover .en{ color:#fff; }

.nav-toggle{ display:none; }
.nav-overlay{ display:none; }

/* =========================================================
   ヒーロー
   ========================================================= */
.hero{ position:relative;height:100svh;min-height:560px;overflow:hidden;background:#cfd4d2; }
.hero__media{ position:absolute;inset:0; }
.hero__video{ width:100%;height:100%;object-fit:cover; }
.hero__inner{ position:absolute;inset:0;display:grid;place-items:center;padding:0 6vw; }
.hero__logo{ margin:0;width:min(340px,52vw); }
.hero__logo img{ width:100%;height:auto;filter:drop-shadow(0 2px 14px rgba(0,0,0,.22)); }

.hero__scroll{
  position:absolute;left:50%;bottom:34px;translate:-50% 0;
  font-family:var(--latin);font-size:10px;letter-spacing:.26em;color:#fff;
  text-shadow:0 1px 8px rgba(0,0,0,.4);padding-bottom:74px;
}
.hero__scroll::after{
  content:"";position:absolute;left:50%;bottom:0;translate:-50% 0;
  width:1px;height:62px;background:rgba(255,255,255,.75);
  animation:scrollLine 2.4s ease-in-out infinite;transform-origin:top;
}
@keyframes scrollLine{
  0%{transform:translateX(-50%) scaleY(0);}
  45%{transform:translateX(-50%) scaleY(1);}
  100%{transform:translateX(-50%) scaleY(1);opacity:0;}
}

/* =========================================================
   コンセプトムービー
   ========================================================= */
.movie{ padding:clamp(60px,10vw,140px) var(--pad); }
.movie__frame{ max-width:1000px;margin-inline:auto; }
.movie__player{
  position:relative;aspect-ratio:16/9;background-size:cover;background-position:center;
  cursor:pointer;overflow:hidden;
}
.movie__player::after{ content:"";position:absolute;inset:0;background:rgba(20,18,15,.24);transition:background .4s; }
.movie__player:hover::after{ background:rgba(20,18,15,.34); }
.movie__btn{
  position:absolute;inset:0;margin:auto;z-index:2;
  width:clamp(96px,11vw,130px);aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(255,255,255,.85);color:#fff;
  font-family:var(--latin);font-size:clamp(13px,1.4vw,16px);letter-spacing:.14em;line-height:1.5;
  backdrop-filter:blur(2px);transition:background .35s ease,scale .35s ease;
}
.movie__player:hover .movie__btn{ background:rgba(255,255,255,.16);scale:1.06; }
.movie__player iframe{ position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3; }
.movie__player.is-playing::after,.movie__player.is-playing .movie__btn{ display:none; }
.movie__fallback{
  position:absolute;right:10px;bottom:-34px;z-index:4;
  font-size:11.5px;letter-spacing:.1em;color:#8d8f8d;
  border-bottom:1px solid var(--line);padding-bottom:2px;
}
.movie__fallback:hover{ color:var(--ink);border-color:var(--ink); }

/* =========================================================
   南部経木とは / 南部エリア
   ========================================================= */
.about{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  align-items:center;gap:clamp(30px,5vw,70px);
  padding:clamp(30px,5vw,60px) 0 clamp(70px,10vw,140px);
}
.about__lead{ padding-left:var(--pad); }
.about__img img{ width:100%;aspect-ratio:4/3;object-fit:cover; }

.tags{ display:flex;flex-wrap:wrap;gap:9px;margin-top:2.6em; }
.tags li{
  min-width:88px;text-align:center;padding:7px 14px;
  border:1px solid var(--line-soft);background:#fff;
  font-size:11.5px;letter-spacing:.14em;color:var(--ink);line-height:1.6;
}

.area{
  display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
  align-items:center;gap:clamp(30px,6vw,80px);
  padding:0 var(--pad) clamp(70px,10vw,130px);max-width:1280px;
}
.area__map img{ width:100%;max-width:300px;margin-inline:auto; }

/* =========================================================
   横スクローラー（共通）
   ネイティブスクロール＋スナップ。スワイプ・ドラッグ・矢印・
   キーボードすべてで操作できる。
   ========================================================= */
.scroller{ position:relative;padding:0 var(--pad); }

.scroller__track{
  display:flex;gap:var(--gap);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-bottom:2px;cursor:grab;
}
.scroller__track::-webkit-scrollbar{ display:none; }
.scroller__track.is-dragging{ cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto; }
.scroller__track:focus-visible{ outline:2px solid var(--ink);outline-offset:4px; }

.scroller__item{
  flex:0 0 auto;scroll-snap-align:start;
  width:calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  --cols:var(--n,3);
}
.scroller__item img{ width:100%;aspect-ratio:4/3;object-fit:cover; }
.scroller--wide .scroller__item img{ aspect-ratio:3/2; }

/* 矢印：常時表示。端では薄くなる */
.scroller__arw{
  position:absolute;top:calc(50% - 26px);translate:0 -50%;z-index:5;
  width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.94);
  box-shadow:0 2px 12px rgba(0,0,0,.14);
  transition:opacity .3s,background .3s,scale .2s;
}
.scroller__arw::before{
  content:"";position:absolute;inset:0;margin:auto;
  width:10px;height:10px;border-top:1px solid var(--ink);border-right:1px solid var(--ink);
}
.scroller__arw--prev{ left:calc(var(--pad) - 23px); }
.scroller__arw--prev::before{ rotate:-135deg;translate:2px 0; }
.scroller__arw--next{ right:calc(var(--pad) - 23px); }
.scroller__arw--next::before{ rotate:45deg;translate:-2px 0; }
.scroller__arw:hover{ background:#fff;scale:1.08; }
.scroller__arw[disabled]{ opacity:.22;cursor:default;box-shadow:none; }

/* 端のフェード（続きがあることを示す） */
.scroller::before,.scroller::after{
  content:"";position:absolute;top:0;bottom:44px;width:clamp(24px,5vw,90px);
  pointer-events:none;z-index:3;opacity:0;transition:opacity .35s;
}
.scroller::before{ left:0;background:linear-gradient(to right,var(--fade,var(--bg)),transparent); }
.scroller::after{ right:0;background:linear-gradient(to left,var(--fade,var(--bg)),transparent); }
.scroller.can-prev::before{ opacity:1; }
.scroller.can-next::after{ opacity:1; }

.scroller__foot{
  display:flex;align-items:center;justify-content:center;gap:20px;
  margin-top:20px;flex-wrap:wrap;
}
.scroller__hint{
  margin:0;font-size:11px;letter-spacing:.1em;color:#9a9c9a;
  display:flex;align-items:center;gap:7px;
}
.scroller__hint::before{
  content:"";width:16px;height:16px;flex:none;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9c9a' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M3 12h18M7 8l-4 4 4 4M17 8l4 4-4 4'/%3E%3C/svg%3E");
}
.scroller__hint .sp{ display:none; }
/* スクロールバー（現在位置） */
.scroller__bar{ position:relative;width:min(300px,38vw);height:2px;background:var(--line);border-radius:2px; }
.scroller__bar span{
  position:absolute;left:0;top:0;height:100%;width:30%;
  background:var(--ink);border-radius:2px;transition:left .18s linear,width .25s;
}

/* =========================================================
   経木づくりの流れ
   ========================================================= */
.flow{ padding:0 0 clamp(56px,8vw,100px); }
.flow .h-mincho{ font-size:clamp(19px,2.1vw,25px);margin-bottom:2em; }
.flow__cap{
  margin:1.1em 0 0;font-size:12.5px;letter-spacing:.16em;color:var(--ink);
  display:flex;align-items:baseline;gap:9px;
}
.flow__cap .no{ font-family:var(--latin);font-size:11px;color:#9a9c9a;letter-spacing:.1em; }

/* ---------- パノラマ ---------- */
.panorama img{ width:100%;height:clamp(230px,32vw,460px);object-fit:cover;object-position:center 30%; }

/* =========================================================
   使い方
   ========================================================= */
.howto{ background:var(--bg-white);padding:clamp(70px,10vw,140px) 0; }
.howto .inner{ margin-bottom:clamp(40px,6vw,70px); }
.mosaic-wrap{ padding:0 var(--pad); }

.mosaic{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:minmax(0,auto);gap:12px;
}
.mosaic figure{ margin:0;overflow:hidden; }
.mosaic img{ width:100%;height:100%;object-fit:cover;transition:scale .6s ease; }
.mosaic figure:hover img{ scale:1.04; }
.m-a{ grid-column:1 / span 2;grid-row:1 / span 2; }
.m-a img{ aspect-ratio:1/1; }
.m-b,.m-c{ grid-column:span 1; }
.m-b img,.m-c img{ aspect-ratio:1/1; }
.m-d{ grid-column:3 / span 2; }
.m-d img{ aspect-ratio:2/1; }
.m-e,.m-f,.m-g,.m-h{ grid-column:span 1; }
.m-e img,.m-f img,.m-g img,.m-h img{ aspect-ratio:1/1; }

/* =========================================================
   商品紹介
   ========================================================= */
.product{ background:var(--bg-white);padding:0 0 clamp(70px,9vw,120px); }
.product .inner{ margin-inline:auto; }
.product__grid{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(34px,5vw,72px); }
.product__name{
  font-family:var(--latin);font-weight:400;font-size:clamp(20px,2.2vw,26px);
  color:var(--ink);letter-spacing:.06em;margin:0 0 1.1em;
}
.product__name em{ font-family:var(--mincho);font-style:normal;font-size:.86em; }
.product__name span{ font-size:.58em;font-style:italic;color:#8d8f8d;margin-left:.5em;letter-spacing:.04em; }

.product__item .scroller{ padding:0;margin-bottom:1.8em;--fade:#fff; }
.product__item .scroller__item img{ aspect-ratio:3/2; }
.product__item .scroller__arw--prev{ left:10px; }
.product__item .scroller__arw--next{ right:10px; }
.product__item .scroller::before,.product__item .scroller::after{ width:26px; }
.product__item .scroller__bar{ width:100%; }
.product__item .scroller__foot{ margin-top:14px; }

/* ---------- その他の樹種 ---------- */
.species{ background:var(--bg);padding:clamp(60px,8vw,110px) 0 clamp(70px,9vw,120px); }
.species .inner{ margin-inline:auto; }
.species__ttl{ font-size:clamp(19px,2.2vw,26px);margin-bottom:1.2em; }
.species__lead{ max-width:52em;margin-inline:auto;text-align:center;margin-bottom:3em; }

.species__grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,3vw,44px) clamp(20px,2.6vw,38px);
}
.species__grid > li{ margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 clamp(14px,1.8vw,22px);align-items:start; }
.species__grid picture{ display:block;overflow:hidden;grid-row:1 / span 2;width:clamp(86px,9vw,118px); }
.species__grid img{ width:100%;aspect-ratio:1/1;object-fit:cover;transition:scale .6s ease; }
.species__grid li:hover img{ scale:1.06; }
.species__name{
  margin:0 0 .7em;font-family:var(--mincho);font-size:clamp(16px,1.7vw,20px);
  letter-spacing:.14em;color:var(--ink);line-height:1.4;align-self:start;
}
.species__name .en{
  display:block;font-family:var(--latin);font-size:12px;font-style:italic;
  color:#9a9c9a;letter-spacing:.1em;margin-top:4px;
}
.species__feat{ margin:0;font-size:12px;line-height:2;color:var(--txt); }
.species__feat li{ position:relative;padding-left:12px;letter-spacing:.04em; }
.species__feat li::before{
  content:"";position:absolute;left:0;top:.95em;width:5px;height:1px;background:var(--line);
}
.species__note{ text-align:center;margin-top:3em; }

/* =========================================================
   経木ノ名刺
   ========================================================= */
.meishi{ background:var(--bg-white);padding:0 0 clamp(80px,11vw,150px); }
.meishi__hero{
  position:relative;overflow:hidden;margin-bottom:clamp(50px,8vw,100px);
  /* 幅広の画面でも上下が痩せすぎないよう、比率で高さを決める。
     width を明示しないと、min-height を満たすために「幅」が伸びて横に溢れる */
  width:100%;
  aspect-ratio:1.9 / 1;
  min-height:420px;max-height:800px;
  background:#1b1d19;
}
/* ---- 2枚の写真をクロスフェード ---- */
.mh-slide{
  position:absolute;inset:0;opacity:0;
  transition:opacity 1.6s ease;
  will-change:opacity;
}
.mh-slide.is-on{ opacity:1; }
.mh-slide picture{ display:block;width:100%;height:100%; }
.mh-slide img{ width:100%;height:100%;object-fit:cover;object-position:center 50%; }
/* 縦位置の写真は名刺が切れない位置で見せる */
.mh-slide--tall img{ object-position:center 52%; }

/* 上下に薄い暗幕。白抜きの文字とロゴを読みやすく */
.meishi__hero::before,
.meishi__hero::after{
  content:"";position:absolute;left:0;right:0;z-index:2;pointer-events:none;
}
.meishi__hero::before{
  top:0;height:38%;
  background:linear-gradient(to bottom,rgba(10,12,8,.55),rgba(10,12,8,.16) 55%,rgba(10,12,8,0));
}
.meishi__hero::after{
  bottom:0;height:44%;
  background:linear-gradient(to top,rgba(10,12,8,.58),rgba(10,12,8,.18) 55%,rgba(10,12,8,0));
}

/* ---- 経木ノ名刺（左上・固定） ---- */
.meishi__badge{
  position:absolute;z-index:4;
  left:clamp(20px,4vw,54px);top:clamp(20px,4vw,48px);
  color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.5);
}
.meishi__badge-ja{
  margin:0;font-family:var(--mincho);font-weight:400;
  font-size:clamp(24px,3.1vw,40px);letter-spacing:.22em;text-indent:.22em;line-height:1.4;
}

/* ---- 南部経木ロゴ（左下・固定） ---- */
.meishi__hero-logo{
  position:absolute;z-index:4;
  left:clamp(20px,4vw,54px);bottom:clamp(20px,3.4vw,44px);
  width:clamp(64px,7vw,96px);height:auto;opacity:.94;
  filter:drop-shadow(0 1px 8px rgba(0,0,0,.5));
}

/* ---- 1枚目のみ：CO2 表記（右寄せ・大きめ） ---- */
.mh-co2{
  position:absolute;z-index:3;
  right:clamp(22px,5vw,84px);bottom:clamp(26px,4.4vw,58px);
  margin:0;text-align:right;color:#fff;
  font-family:var(--mincho);font-weight:400;
  font-size:clamp(16px,2.1vw,27px);letter-spacing:.14em;line-height:1.85;
  /* 明るい被写体の上でも読めるように、にじませた影を重ねる */
  text-shadow:0 2px 12px rgba(0,0,0,.65), 0 0 30px rgba(0,0,0,.6), 0 0 60px rgba(0,0,0,.45);
}
.mh-co2 strong{ font-weight:500;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:2px; }

/* ---- 2枚目のみ：透き通る美しさ。 ---- */
.mh-vertical{
  position:absolute;z-index:3;
  right:clamp(22px,5vw,84px);top:50%;translate:0 -50%;
  writing-mode:vertical-rl;white-space:nowrap;   /* 縦組みが2列に折り返さないように */
  font-family:var(--mincho);
  font-size:clamp(22px,3.2vw,42px);letter-spacing:.28em;
  color:#fff;margin:0;text-shadow:0 2px 16px rgba(0,0,0,.5);
}

@media (prefers-reduced-motion:reduce){
  .mh-slide{ transition:none; }
}
.meishi .inner{ margin-inline:auto; }

.meishi__specs{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:0 clamp(24px,4vw,56px);margin:2.6em 0 0;border-top:1px solid var(--line-soft);
}
.meishi__specs li{
  display:flex;gap:16px;align-items:baseline;padding:13px 2px;
  border-bottom:1px solid var(--line-soft);font-size:13px;line-height:1.9;
}
.meishi__specs .k{ flex:0 0 62px;color:var(--ink);letter-spacing:.14em;font-size:12px; }
.meishi__specs .v{ flex:1; }
.meishi__specs .v small{ display:block;font-size:11.5px;color:#8d8f8d;line-height:1.9;margin-top:1px; }
.meishi__specs li.wide{ grid-column:1 / -1; }

.meishi__sub{
  font-family:var(--mincho);font-weight:400;font-size:clamp(15px,1.7vw,19px);
  color:var(--ink);letter-spacing:.1em;margin:clamp(40px,6vw,70px) 0 1.4em;
}
.meishi__cards{ display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(10px,1.4vw,18px); }
.meishi__cards li{ margin:0; }
.meishi__cards picture{ display:block;overflow:hidden;border:1px solid var(--line-soft); }
.meishi__cards img{ width:100%;aspect-ratio:91/55;object-fit:cover;transition:scale .6s ease; }
.meishi__cards li:hover img{ scale:1.05; }
.meishi__cards .cap{
  margin:.9em 0 0;font-family:var(--mincho);font-size:14px;
  letter-spacing:.1em;color:var(--ink);line-height:1.5;
}
.meishi__cards .cap span{
  display:block;font-family:var(--gothic);font-size:10.5px;
  letter-spacing:.1em;color:#9a9c9a;margin-top:3px;
}

/* ギャラリー：縦位置の写真は切らずに、そのままの比率で見せる */
.meishi__gallery{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:auto;gap:clamp(10px,1.4vw,18px);margin-top:clamp(34px,5vw,58px);
}
.meishi__gallery figure{ margin:0;overflow:hidden; }
.meishi__gallery img{ width:100%;height:100%;object-fit:cover;aspect-ratio:3/2;transition:scale .6s ease; }
.meishi__gallery figure:hover img{ scale:1.04; }
.g-tall{ grid-row:1 / span 2; }
.g-tall img{ aspect-ratio:2/3; }
.g-wide{ grid-column:2 / span 2; }

.meishi .btn-wrap{ margin-top:clamp(46px,7vw,84px); }

/* =========================================================
   生産者紹介
   ========================================================= */
.craftman{ background:var(--gray);color:#fff;padding:clamp(70px,10vw,140px) 0 clamp(60px,8vw,100px);--fade:#646865; }
.craftman__body{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.72fr);
  gap:clamp(34px,5vw,80px);align-items:start;
  padding:0 var(--pad) clamp(60px,8vw,110px);max-width:1240px;
}
.craftman .body-txt{ color:rgba(255,255,255,.86);font-size:13.5px; }
.craftman__quote{ margin:0 0 2.2em;color:#fff;font-size:clamp(19px,2.3vw,27px);line-height:2;letter-spacing:.1em; }
.craftman__sub{ color:rgba(255,255,255,.9);font-size:clamp(15px,1.6vw,18px);margin:0 0 1.6em;line-height:2; }
.craftman__photo{ margin:0;position:relative;overflow:hidden; }
.craftman__photo img{ width:100%;aspect-ratio:3/4;object-fit:cover; }
.craftman__photo::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:38%;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,0));
}
.craftman__photo figcaption{
  position:absolute;z-index:1;left:18px;bottom:18px;color:#fff;line-height:1.8;
  text-shadow:0 1px 8px rgba(0,0,0,.55);
}
.craftman__photo .c{ display:block;font-size:11.5px;letter-spacing:.14em; }
.craftman__photo .n{ display:block;font-size:11.5px;letter-spacing:.1em; }
.craftman__photo .n b{ font-weight:500;font-size:14px; }

.craftman .scroller__arw{ background:rgba(255,255,255,.9); }
.craftman .scroller__bar{ background:rgba(255,255,255,.28); }
.craftman .scroller__bar span{ background:#fff; }
.craftman .scroller__hint{ color:rgba(255,255,255,.6); }

/* =========================================================
   お問い合わせ
   ========================================================= */
.contact{ background:var(--bg);padding:clamp(70px,10vw,140px) 0 clamp(80px,11vw,150px); }
.contact .h-center{ margin-bottom:1.6em; }
.produced{ display:flex;align-items:center;justify-content:center;gap:14px;margin:0 0 .4em; }
.produced span{ font-family:var(--latin);font-size:13px;letter-spacing:.08em;color:var(--ink); }
.produced img{ width:112px; }
.produced__txt{ text-align:center;font-size:12px;color:var(--txt);margin:0 0 4em; }
.form-lead{ text-align:center;font-size:13px;margin:0 0 3em; }

.form__row{ display:grid;grid-template-columns:186px minmax(0,1fr);gap:18px;align-items:start;margin-bottom:22px; }
.form__row label{ font-size:12.5px;letter-spacing:.08em;color:var(--ink);padding-top:12px;line-height:1.8;white-space:nowrap; }
.req{ display:inline-block;margin-left:8px;padding:1px 7px;background:var(--ink);color:#fff;font-size:9.5px;letter-spacing:.1em;vertical-align:2px; }
.form input[type=text],.form input[type=email],.form input[type=tel],.form textarea{
  width:100%;padding:12px 14px;border:1px solid var(--line-soft);background:#fff;color:var(--ink);
  font:inherit;font-size:14px;line-height:1.8;border-radius:0;transition:border-color .3s;
}
.form input:focus,.form textarea:focus{ outline:none;border-color:var(--ink); }
.form textarea{ resize:vertical;min-height:170px; }
.form__hp{ position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden; }
.form__privacy{ margin:26px 0 0;text-align:center;font-size:12px; }
.form__privacy input{ margin-right:8px;accent-color:var(--ink); }
.form__error{ margin:18px 0 0;text-align:center;font-size:13px;color:#a3402f; }
.btn--submit{ min-width:200px; }

/* =========================================================
   フッター
   ========================================================= */
.footer{
  position:relative;color:#fff;
  background:url("../assets/img/footer-bark.jpg") center/cover no-repeat;
  /* 固定サイドナビの下にコンテンツが隠れないよう、左に逃がす */
  padding:clamp(52px,7vw,80px) var(--pad) 26px calc(var(--nav-w) + var(--pad));
}
.footer::before{ content:"";position:absolute;inset:0;background:rgba(18,16,13,.72); }
.footer__inner{
  position:relative;z-index:1;display:grid;
  grid-template-columns:minmax(0,180px) minmax(0,1fr);
  gap:clamp(30px,6vw,80px);align-items:start;max-width:1120px;
}
.footer__logo img{ width:clamp(112px,13vw,150px); }
.footer__nav{ display:flex;flex-wrap:wrap;gap:16px clamp(22px,3.4vw,46px);margin-bottom:2.6em; }
.footer__nav a{ line-height:1.4;display:block; }
.footer__nav .ja{ display:block;font-size:12px;letter-spacing:.1em; }
.footer__nav .en{ display:block;font-family:var(--latin);font-size:9.5px;letter-spacing:.16em;color:rgba(255,255,255,.6);margin-top:3px; }
.footer__nav a:hover .ja{ text-decoration:underline;text-underline-offset:4px; }
.footer__addr{ font-style:normal;font-size:12px;line-height:2.1;color:rgba(255,255,255,.82); }
.footer__addr b{ font-weight:400;font-size:13.5px;color:#fff;letter-spacing:.12em; }
.footer__addr a:hover{ text-decoration:underline; }
.footer__copy{
  position:relative;z-index:1;text-align:right;max-width:1120px;
  font-family:var(--latin);font-size:10.5px;letter-spacing:.1em;
  color:rgba(255,255,255,.55);margin:2.6em 0 0;
}

/* =========================================================
   ライトボックス（写真の拡大表示）
   ========================================================= */
[data-zoom] img{ cursor:zoom-in; }

.lightbox{
  position:fixed;inset:0;z-index:200;
  background:rgba(14,13,11,.97);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:grid;place-items:center;padding:clamp(16px,4vw,56px);
  opacity:0;transition:opacity .3s ease;
}
.lightbox[hidden]{ display:none; }
.lightbox.is-open{ opacity:1; }
.lb__stage{ margin:0;max-width:100%;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:14px; }
.lb__stage img{
  max-width:100%;max-height:calc(100svh - clamp(110px,18vw,190px));
  width:auto;height:auto;object-fit:contain;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
  animation:lbIn .35s ease;
}
@keyframes lbIn{ from{opacity:0;scale:.97;} to{opacity:1;scale:1;} }
.lb__stage figcaption{
  display:flex;align-items:center;gap:16px;
  color:rgba(255,255,255,.8);font-size:12px;letter-spacing:.1em;text-align:center;
}
.lb__stage figcaption em{ font-family:var(--latin);font-style:normal;color:rgba(255,255,255,.5);font-size:12px; }

.lb__close{
  position:absolute;top:clamp(12px,2.4vw,26px);right:clamp(12px,2.4vw,26px);z-index:3;
  width:46px;height:46px;border-radius:50%;color:#fff;font-size:17px;
  background:rgba(255,255,255,.1);transition:background .25s;
}
.lb__close:hover{ background:rgba(255,255,255,.22); }

.lb__nav{
  position:absolute;top:0;bottom:0;width:clamp(70px,22vw,240px);z-index:2;
  display:grid;place-items:center;
}
.lb__nav--prev{ left:0;cursor:w-resize; }
.lb__nav--next{ right:0;cursor:e-resize; }
.lb__nav span{
  width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,.12);position:relative;transition:background .25s,scale .2s;
}
.lb__nav span::before{
  content:"";position:absolute;inset:0;margin:auto;width:12px;height:12px;
  border-top:1.4px solid #fff;border-right:1.4px solid #fff;
}
.lb__nav--prev span::before{ rotate:-135deg;translate:3px 0; }
.lb__nav--next span::before{ rotate:45deg;translate:-3px 0; }
.lb__nav:hover span{ background:rgba(255,255,255,.26);scale:1.08; }
.lb__nav[disabled]{ opacity:0;pointer-events:none; }

body.lb-open{ overflow:hidden; }

/* =========================================================
   フェードイン
   ========================================================= */
.fade{ opacity:0;transform:translateY(26px);transition:opacity 1s ease,transform 1s ease; }
.fade.is-in{ opacity:1;transform:none; }
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .fade{opacity:1;transform:none;transition:none;}
  .scroller__track{scroll-behavior:auto;}
}

/* =========================================================
   タブレット（〜1024px）
   ========================================================= */
@media (max-width:1024px){
  :root{ --nav-w:100px; }
  .side-nav__logo{ width:70px; }
  .species__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .side-nav__list{ gap:24px; }
  .side-nav__shop{ width:84px;padding:9px 2px; }
  .side-nav__shop .ja{ font-size:9px; }

  .scroller__item{ --cols:var(--n-tb,var(--n,2)); }

  .about{ grid-template-columns:1fr;gap:36px; }
  .about__lead{ padding-inline:var(--pad); }
  .about__img{ padding-left:var(--pad); }
  .area{ grid-template-columns:1fr;gap:30px; }
  .area__map img{ max-width:250px; }
  .naming__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .product__grid{ grid-template-columns:1fr;gap:56px; }
  .species__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .meishi__cards{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .craftman__body{ grid-template-columns:1fr; }
  .craftman__photo{ max-width:380px; }
  .form__row{ grid-template-columns:1fr;gap:6px; }
  .form__row label{ padding-top:0; }
}

/* =========================================================
   スマートフォン（〜768px）
   ========================================================= */
@media (max-width:768px){
  :root{ --nav-w:0px;--gap:10px; }
  body{ font-size:14px; }
  main{ padding-left:0; }

  .nav-toggle{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    position:fixed;top:12px;right:12px;z-index:80;
    width:46px;height:46px;padding:0 12px;
    background:rgba(255,255,255,.9);backdrop-filter:blur(4px);border-radius:2px;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
  }
  .nav-toggle span{ display:block;height:1px;background:var(--ink);transition:transform .35s,opacity .3s; }
  .nav-toggle[aria-expanded=true] span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded=true] span:nth-child(2){ opacity:0; }
  .nav-toggle[aria-expanded=true] span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

  .side-nav{
    width:min(272px,80vw);left:auto;right:0;
    transform:translateX(100%);transition:transform .45s cubic-bezier(.4,.05,.2,1);
    background:rgba(255,255,255,.97);padding:78px 26px 34px;align-items:flex-start;
    border-right:0;border-left:1px solid rgba(0,0,0,.06);overflow-y:auto;
  }
  .side-nav.is-open{ transform:none; }
  .side-nav__logo{ width:64px;margin:0 0 34px; }
  .side-nav__list{ gap:24px;text-align:left;margin:0 0 34px; }
  .side-nav__list a::after{ left:0;translate:0 0; }
  .side-nav__shop{ margin:0;width:100%;padding:12px 4px; }
  .nav-overlay{
    display:block;position:fixed;inset:0;z-index:55;
    background:rgba(20,18,15,.4);opacity:0;transition:opacity .4s;
  }
  .nav-overlay.is-show{ opacity:1; }

  .hero{ min-height:480px; }
  .hero__logo{ width:min(260px,68vw); }
  .hero__scroll{ bottom:24px;padding-bottom:56px; }
  .hero__scroll::after{ height:46px; }

  .movie{ padding:56px var(--pad); }
  .about{ padding-bottom:60px; }
  .about__img{ padding-left:0; }
  .about__img img{ aspect-ratio:3/2; }

  .sec-label{ margin-bottom:2.4em; }
  .sec-label::after{ flex-basis:44px; }

  /* --- スクローラー：スマホ --- */
  .scroller__item{ --cols:var(--n-sp,var(--n,1.2)); }
  .scroller__arw{ width:38px;height:38px; }
  .scroller__arw--prev{ left:6px; }
  .scroller__arw--next{ right:6px; }
  .scroller__hint .pc{ display:none; }
  .scroller__hint .sp{ display:inline; }
  .scroller__foot{ gap:12px;margin-top:16px; }
  .scroller__bar{ width:52vw; }
  .product__item .scroller__arw--prev{ left:6px; }
  .product__item .scroller__arw--next{ right:6px; }

  /* --- 使い方モザイク --- */
  .mosaic{ grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
  .m-a{ grid-column:1 / span 2;grid-row:auto; }
  .m-a img{ aspect-ratio:4/3; }
  .m-d{ grid-column:1 / span 2; }
  .m-d img{ aspect-ratio:2/1; }

  .naming__grid{ grid-template-columns:1fr;gap:34px; }
  .species__grid{ grid-template-columns:1fr;gap:20px; }
  .species__grid picture{ width:92px; }
  .species__name{ font-size:16px;margin-bottom:.5em; }
  .species__name .en{ font-size:11px; }
  .species__feat{ font-size:11.5px;line-height:1.9; }

  .meishi__hero{ aspect-ratio:3 / 4;min-height:0;max-height:78svh; }
  .meishi__hero::before{ height:34%; }
  .meishi__hero::after{ height:40%; }
  /* 縦画面では被写体に重なって読みにくいので、上部の暗い帯へ逃がす */
  .mh-co2{ font-size:15px;letter-spacing:.1em;bottom:auto;top:84px;right:20px; }
  .mh-vertical{ font-size:23px;right:18px;top:44%; }
  .meishi__hero-logo{ width:70px;bottom:22px; }
  .meishi__cards{ grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
  .meishi__cards .cap{ font-size:13px; }
  .meishi__gallery{ grid-template-columns:repeat(2,minmax(0,1fr));gap:8px; }
  .g-tall{ grid-row:auto;grid-column:span 2; }
  .g-tall img{ aspect-ratio:3/4; }
  .g-wide{ grid-column:span 2; }

  .craftman__photo{ max-width:none; }

  /* --- ライトボックス：スマホ --- */
  .lb__nav{ width:26%; }
  .lb__nav span{ width:40px;height:40px; }
  .lb__close{ width:40px;height:40px;font-size:15px; }

  .footer{ padding-inline:24px; }
  .footer__inner{ grid-template-columns:1fr;gap:34px; }
  .footer__nav{ gap:14px 26px; }
  .footer__copy{ text-align:left; }
}