/* ==========================================================================
   MASSADA
   - 欧文見出し : Cormorant Garamond（細身のディスプレイセリフ、グリーン）
   - 小さな欧文 : Jost
   - 和文       : Shippori Mincho（細めの明朝）
   - 色は元サイト（massada.jp）のクリーム色の背景とブランドグリーン
   ========================================================================== */
:root {
  --bg: #fcf9f6;
  --bg-2: #f3eee8;
  --ink: #1f1e1c;
  --sub: #4f4c47;
  --line: rgba(43, 42, 40, .12);
  --green: #5f756d;
  --deep: rgb(95, 117, 109);
  --ff-jp: "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  --ff-en: "Cormorant Garamond", "Shippori Mincho", serif;
  --ff-sans: "Jost", "Helvetica Neue", "Yu Gothic", sans-serif;
  /* 読ませる本文はゴシック、明朝は見出しとコピーだけ（FAS と同じ考え方） */
  --ff-body: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --gutter: clamp(20px, 5vw, 80px);
  --max: 1240px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--ff-jp);
  font-size: 14px;
  line-height: 2.2;
  letter-spacing: .08em;
  -webkit-font-smoothing: antialiased;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, ul, dl { margin: 0; padding: 0; }
ul { list-style: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.wrap { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Type parts ---------- */
.label {
  font-family: var(--ff-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  line-height: 1;
}
.display { font-family: var(--ff-en); font-weight: 300; line-height: 1; letter-spacing: .02em; }
.sec-head .label { display: flex; align-items: center; gap: 16px; color: var(--green); }
.sec-head .label::after { content: ""; width: 40px; height: 1px; background: currentColor; opacity: .5; }
.sec-head .display { font-size: clamp(52px, 7vw, 88px); margin-top: 22px; color: var(--green); }
.sec-head .jp { margin-top: 16px; font-size: 13px; letter-spacing: .14em; color: var(--sub); line-height: 1.6; }
/* ラベルを置かない見出しは、大きな英字＋すぐ下に小さな日本語（英字の左の余白ぶん右にずらす） */
.sec-head .display:first-child { margin-top: 0; }
.sec-head .display:first-child + .jp { margin-top: 12px; padding-left: .85em; }
.lead { font-size: clamp(19px, 2vw, 24px); line-height: 2; letter-spacing: .14em; font-weight: 400; }
.body-text { font-family: var(--ff-body); color: #2a2926; line-height: 2.1; letter-spacing: .05em; }

.link-more {
  display: inline-flex; align-items: center; gap: 18px;
  font-family: var(--ff-sans); font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  padding-bottom: 10px; border-bottom: 1px solid currentColor;
  transition: gap .3s ease;
}
.link-more::after { content: ""; width: 28px; height: 1px; background: currentColor; }
.link-more:hover { gap: 26px; }

/* メニュー内の Contact ボタン */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 24px;
  min-width: 200px; padding: 16px 22px; border: 1px solid rgba(255, 255, 255, .6);
  font-family: var(--ff-sans); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; line-height: 1;
  transition: background-color .3s, color .3s;
}
.btn::after { content: ""; width: 28px; height: 1px; background: currentColor; }
.btn:hover { background: #fff; color: var(--green); }

/* ---------- Header ---------- */
.header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  color: #fff;
  transition: background-color .4s ease, border-color .4s ease;
  border-bottom: 1px solid transparent;
}
/* ロゴは色を変えず、背景側をロゴが映えるブランドグリーンに切り替える */
.header.is-solid { background: rgba(95, 117, 109, .96); backdrop-filter: blur(10px); border-bottom-color: rgba(255, 255, 255, .08); }
.header__inner { height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.header__logo img { height: 46px; width: auto; }
.header__right { display: flex; align-items: center; gap: 36px; }
.header__nav { display: flex; align-items: center; gap: 32px; }
.header__nav a { font-family: var(--ff-sans); font-size: 12px; letter-spacing: .06em; position: relative; padding-block: 6px; }
.header__nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: currentColor; transition: width .3s ease; }
.header__nav a:hover::after { width: 100%; }
.header__nav .sep { width: 1px; height: 12px; background: currentColor; opacity: .4; }
/* FAS と同じく、横長の2本線を細い間隔で（幅36px・線の間隔6px） */
.menu-btn { width: 36px; height: 7px; position: relative; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }
.menu-btn span { position: absolute; left: 0; width: 100%; height: 1px; background: currentColor; transition: transform .3s, top .3s; }
/* 見た目は細いので、押せる範囲だけ上下左右に広げる */
.menu-btn::before { content: ""; position: absolute; inset: -18px -10px; }
.menu-btn span:first-child { top: 0; }
.menu-btn span:last-child { top: 6px; }
.menu-open .menu-btn span:first-child { top: 3px; transform: rotate(20deg); }
.menu-open .menu-btn span:last-child { top: 3px; transform: rotate(-20deg); }
.menu-open { overflow: hidden; }

/* ---------- Drawer（PC：右からのパネル / SP：全画面） ---------- */
.drawer-backdrop { position: fixed; inset: 0; z-index: 39; background: rgba(20, 24, 22, .35); opacity: 0; visibility: hidden; transition: opacity .5s, visibility .5s; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 40; width: min(480px, 100%);
  background: var(--deep); color: #fff; overflow-y: auto;
  /* 閉じている間も画面の外に押し出さず、画面内で切り抜いて隠す
     （画面外に置くとスマホでページ幅が広がり、横にずれてしまうため） */
  clip-path: inset(0 0 0 100%); visibility: hidden;
  transition: clip-path .7s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .7s;
}
.drawer::before {
  content: ""; position: absolute; right: -80px; bottom: -40px; width: 340px; height: 420px;
  background: url(../images/legacy/common/flower-white.webp) no-repeat center / contain;
  opacity: .08; pointer-events: none;
}
.menu-open .drawer { clip-path: inset(0); visibility: visible; transition: clip-path .7s cubic-bezier(.2, .7, .2, 1), visibility 0s; }
.menu-open .drawer-backdrop { opacity: 1; visibility: visible; }
.drawer__inner { position: relative; min-height: 100%; display: flex; flex-direction: column; padding: 120px 44px 40px; }
.drawer .label { color: rgba(255, 255, 255, .6); }
.drawer__nav { margin-top: 22px; border-top: 1px solid rgba(255, 255, 255, .14); }
.drawer__nav a { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 12px; padding: 18px 2px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.drawer__nav .en { font-family: var(--ff-en); font-weight: 300; font-size: 32px; line-height: 1; letter-spacing: .02em; }
.drawer__nav .jp { font-size: 11px; letter-spacing: .14em; line-height: 1; opacity: .65; }
.drawer__feature { margin-top: 36px; display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: center; padding: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.drawer__feature img { width: 96px; height: 96px; object-fit: cover; object-position: 46% 50%; }
.drawer__feature .t { font-family: var(--ff-en); font-size: 21px; line-height: 1.2; margin-top: 10px; }
.drawer__feature .j { font-size: 11px; line-height: 1.6; opacity: .7; margin-top: 6px; letter-spacing: .12em; }
.drawer__foot { margin-top: auto; padding-top: 40px; }
.drawer__foot .btn { width: 100%; }
.drawer__legal { margin-top: 24px; display: flex; gap: 28px; font-family: var(--ff-sans); font-size: 11px; letter-spacing: .06em; opacity: .6; }
.drawer [data-i] { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.menu-open .drawer [data-i] { opacity: 1; transform: none; transition-delay: calc(var(--i) * 60ms + 160ms); }

/* ---------- Hero ---------- */
.hero { position: relative; height: 100svh; min-height: 600px; overflow: hidden; }
.hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* 上部はヘッダーの視認性のためだけに薄く暗くする */
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,0) 20%); }

/* ---------- Hero story（画面中央よりやや下で、一文字ずつ語る） ---------- */
.story { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.story__scene {
  position: absolute; left: 50%; top: 52%; transform: translateX(-50%);
  isolation: isolate; white-space: nowrap;
  color: #fff; font-size: clamp(15px, 1.3vw, 19px); line-height: 2; letter-spacing: .24em;
  text-shadow: 0 0 18px rgba(0, 0, 0, .42), 0 1px 3px rgba(0, 0, 0, .34);
}
/* 白い場面でも読めるよう、文字の後ろにごく薄い影のにじみを敷く */
.story__scene::before {
  content: ""; position: absolute; inset: -60px -90px; z-index: -1;
  background: radial-gradient(closest-side, rgba(20, 28, 25, .34), rgba(20, 28, 25, 0));
  opacity: 0; transition: opacity 1.2s ease;
}
.story__scene.is-active::before { opacity: 1; }
/* 最後のロゴの場面は白背景なので、ブランドグリーンの文字でロゴの下に置く（影は付けない） */
.story__scene--logo { top: 72%; color: var(--green); text-shadow: none; }
.story__scene--logo::before { display: none; }
.story__scene .ch { display: inline-block; opacity: 0; filter: blur(8px); transform: translateY(6px); transition: opacity .6s ease, filter .6s ease, transform .6s ease; }
.story__scene.is-active .ch { opacity: 1; filter: none; transform: none; transition-duration: 1s, 1s, 1.2s; transition-delay: calc(var(--c) * 75ms); }

/* ---------- Concept ---------- */
.concept { position: relative; overflow: hidden; padding-block: clamp(120px, 16vw, 200px); text-align: center; }
.concept .label { color: var(--green); }
.concept .lead { margin-top: 40px; }
/* 見出しを意味の切れ目でだけ折り返す（「エイジン／グケア」のような分断を防ぐ） */
.nw { display: inline-block; }
/* 見出しは行の長さをそろえ、最終行に1〜2文字だけ残る折り返しを防ぐ。本文は最終行の孤立だけ防ぐ */
h1, h2, h3, .lead, .detail__catch, .message__sub, .news__title { text-wrap: balance; word-break: auto-phrase; }
/* 商品名は語ごとにまとめて空白でだけ折り返し、特長のひと言は行いっぱいまで流す
   （iPhone の Safari は auto-phrase 非対応のため、balance だと語の途中で短く折れる） */
.detail__title, .detail__catch { text-wrap: wrap; }
.detail__title .nw { max-width: 100%; } /* 1語が行より長いときだけ語の中で折り返す */
/* 本文は text-wrap: pretty を使わない（iPhone の Safari では段落ごとに行幅が縮み、右側が不揃いに空くため） */
.concept .body-text { margin-top: 36px; }
/* 表記上の注釈（エイジングケア等）。本文の流れを邪魔しないよう小さく控えめに */
.fn { font-size: .45em; vertical-align: super; margin-left: .1em; letter-spacing: 0; color: var(--sub); }
.fn-note { margin-top: 28px; font-family: var(--ff-body); font-size: 10px; letter-spacing: .06em; color: var(--sub); opacity: .8; }

/* ---------- About ---------- */
.about { padding-bottom: clamp(120px, 14vw, 180px); }
.about__grid { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(40px, 7vw, 110px); align-items: end; }
.about__img { aspect-ratio: 4 / 3; overflow: hidden; }
/* 縦長の写真を横長の枠で切り抜くので、上の壁ではなく商品と器具が写る下寄りを見せる */
.about__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 88%; }
/* 写真を重ねて置き、表示中の1枚だけをフェードで見せる。表示中はごくゆっくり寄っていく */
.about__slides { position: relative; }
.about__slides img { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease, transform 7s linear; transform: scale(1.0); }
.about__slides img.is-active { opacity: 1; transform: scale(1.05); }
.about__slides img:not(:first-child) { object-position: 50% 50%; }
@media (prefers-reduced-motion: reduce) { .about__slides img, .about__slides img.is-active { transform: none; transition: opacity 1.6s ease; } }
.about__text .body-text { margin-top: 36px; }
.about__copy { margin-top: 28px; font-size: clamp(22px, 2.3vw, 30px); line-height: 1.9; }
.about__text .link-more { margin-top: 48px; }

/* ---------- Products ---------- */
.products { position: relative; overflow: hidden; padding-block: clamp(110px, 13vw, 170px); background: var(--bg-2); }
.products__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
/* 元サイトと同じく横にスライド（PC：約4.4枚、SP：約1.6枚が見える） */
.products__slider { position: relative; margin-top: 72px; }
.products__slider::after {
  content: ""; position: absolute; top: 0; right: -24px; bottom: 0; width: 96px; pointer-events: none; z-index: 1;
  background: linear-gradient(to right, rgba(243, 238, 232, 0), var(--bg-2));
  transition: opacity .3s;
}
.products__slider.is-end::after { opacity: 0; }
.products__grid {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 28px * 4) / 4.4); gap: 28px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* 横スクロール枠でカードの影が切れないよう、内側に余白をとって外側の余白で相殺 */
  padding: 20px 24px 48px; margin: -20px -24px -48px; scroll-padding-left: 24px;
}
.products__grid::-webkit-scrollbar { display: none; }
.product { scroll-snap-align: start; }
.slider-btn {
  position: absolute; z-index: 2; top: calc((100% - 74px) / 2); transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%; border: 1px solid #e0e0e0; background: #fff; cursor: pointer;
  display: grid; place-items: center; transition: opacity .3s, border-color .3s;
}
.slider-btn::before { content: ""; width: 8px; height: 8px; border-top: 1px solid var(--ink); border-right: 1px solid var(--ink); }
.slider-btn--prev { left: -26px; }
.slider-btn--prev::before { transform: translateX(2px) rotate(-135deg); }
.slider-btn--next { right: -26px; }
.slider-btn--next::before { transform: translateX(-2px) rotate(45deg); }
.slider-btn:hover { border-color: var(--green); }
.slider-btn:disabled { opacity: 0; pointer-events: none; }
/* 商品はボトル中心なので縦長の4:5。正方形の商品写真は左右の白地を少しだけ切って、上下に余白を残す */
/* カードそのものを浮かせて立体感を出す（背景はフラット、影で台紙が浮いて見える） */
.product__img { aspect-ratio: 4 / 5; display: grid; place-items: center; position: relative; overflow: hidden; background: #fdfcfa;
  box-shadow: 0 22px 44px -22px rgba(60, 50, 40, .28), 0 2px 8px rgba(60, 50, 40, .06);
  transition: box-shadow .5s, transform .5s cubic-bezier(.2,.7,.2,1); }
/* トップのスライダーはさらに縦長（2:3）。ボトルの縦の伸びを生かす */
.products__grid .product__img { aspect-ratio: 2 / 3; }
.products__grid .product__img img { width: 114%; }
.product:hover .product__img { transform: translateY(-4px); box-shadow: 0 30px 56px -24px rgba(60, 50, 40, .34), 0 2px 10px rgba(60, 50, 40, .08); }
.product__img img { width: 108%; max-width: none; height: auto; aspect-ratio: 1 / 1; object-fit: contain; mix-blend-mode: multiply; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.product:hover .product__img img { transform: scale(1.05); }
.product__tag { position: absolute; top: 18px; left: 18px; font-size: 11px; line-height: 1; letter-spacing: .14em; color: var(--green); }
/* Cormorant は小文字が小さく細いので、商品名は大きめ・やや太めで読みやすく */
.product__name { margin-top: 20px; font-family: var(--ff-en); font-size: 24px; font-weight: 500; letter-spacing: .04em; line-height: 1.25; color: var(--ink); }
.product__jp { margin-top: 8px; font-size: 13px; color: #5d5953; letter-spacing: .12em; line-height: 1.6; }

/* ---------- Icon item ---------- */
.icon { padding-block: clamp(120px, 14vw, 190px); }
.icon__grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(40px, 8vw, 120px); align-items: center; }
.icon__img { aspect-ratio: 1 / 1; overflow: hidden; }
.icon__img img { width: 100%; height: 100%; object-fit: cover; object-position: 46% 50%; }
.icon__text .label { color: var(--green); }
.icon__text .display { font-size: clamp(40px, 4.6vw, 64px); margin-top: 26px; letter-spacing: .04em; }
.icon__text .jp-name { margin-top: 18px; font-size: 15px; letter-spacing: .18em; }
.icon__text .body-text { margin-top: 32px; }
.icon__text .link-more { margin-top: 44px; }

/* ---------- Laboratory（元サイトのグリーンのグラデーション） ---------- */
/* 元サイトのグリーンを生かしたメッシュ風グラデーション：霧のような光、ロゴのシャンパン色、深い森の緑。
   光の位置はスクロールに合わせて JS が --p（0〜1）で動かす。白文字が読めるよう光は控えめにし、地の色をやや深く */
.lab { --p: 0; position: relative; overflow: hidden; color: #fff; padding-block: clamp(120px, 14vw, 190px);
  text-shadow: 0 1px 14px rgba(28, 44, 37, .22);
  background:
    radial-gradient(55% 40% at calc(8% + 58% * var(--p)) calc(4% + 70% * var(--p)), rgba(214, 224, 218, .34) 0%, rgba(214, 224, 218, 0) 72%),
    radial-gradient(42% 34% at calc(92% - 46% * var(--p)) calc(30% + 46% * var(--p)), rgba(221, 205, 176, .26) 0%, rgba(221, 205, 176, 0) 70%),
    radial-gradient(70% 50% at calc(80% - 50% * var(--p)) calc(100% - 64% * var(--p)), rgba(40, 61, 52, .8) 0%, rgba(40, 61, 52, 0) 72%),
    linear-gradient(162deg, #869a93 0%, #73897f 42%, #5f7a6d 72%, #526d60 100%); }
.lab::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.lab > *:not(.botanical) { position: relative; z-index: 1; }
.lab .sec-head .label, .lab .sec-head .display { color: #fff; }
/* 「Science」の下に小さな日本語を添える（上の英字ラベルは見出しと重なるので置かない） */
.lab .sec-head .display { margin-top: 0; }
.lab .sec-head .jp { margin-top: 12px; padding-left: .85em; color: rgba(255, 255, 255, .85); }
.lab__intro { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(40px, 7vw, 110px); align-items: end; }
.lab__intro .body-text { color: rgba(255,255,255,.85); margin-top: 28px; }
.lab__cards { margin-top: clamp(80px, 9vw, 120px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 64px); }
.lab-card__img { aspect-ratio: 3 / 2; overflow: hidden; }
.lab-card__img img { width: 100%; height: 100%; object-fit: cover; }
.lab-card__body { display: grid; grid-template-columns: 56px 1fr; gap: 0 20px; margin-top: 32px; }
.lab-card__no { font-family: var(--ff-en); font-size: 28px; line-height: 1; opacity: .7; }
.lab-card__body .label { opacity: .75; align-self: end; padding-bottom: 3px; }
/* 英語ラベルと日本語見出しはひと組に見えるよう近づける */
.lab-card__body h3 { grid-column: 2; font-size: 20px; font-weight: 400; letter-spacing: .14em; line-height: 1.6; margin-top: 4px; }
.lab-card__body p.t { grid-column: 2; color: rgba(255,255,255,.85); line-height: 2.3; margin-top: 16px; }
.quality { margin-top: clamp(100px, 11vw, 150px); padding-top: clamp(60px, 7vw, 90px); border-top: 1px solid rgba(255,255,255,.2); display: grid; grid-template-columns: 4fr 5fr; gap: clamp(40px, 7vw, 110px); align-items: center; }
.quality__img { aspect-ratio: 4 / 5; overflow: hidden; }
.quality__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.quality .display { font-size: clamp(40px, 4.4vw, 60px); margin-top: 0; }
/* 英字の大見出しに、意味が伝わる日本語を小さく添える（FAS の「Fermentation／発酵」の組み方） */
.display-jp { margin-top: 12px; padding-left: .85em; font-size: 14px; letter-spacing: .16em; line-height: 1.7; opacity: .85; }
.quality .display-jp + .body-text { margin-top: 28px; }
.quality .body-text { color: rgba(255,255,255,.85); margin-top: 28px; }

/* ---------- Craft ---------- */
.craft { padding-block: clamp(120px, 14vw, 190px); }
.craft__grid { display: grid; grid-template-columns: 5fr 6fr; gap: clamp(40px, 8vw, 120px); align-items: start; }
.craft__text { position: sticky; top: 140px; }
/* 見出しは「大きな英字＋小さな日本語」のひと組。上の英字ラベル（Craftsmanship）は日本語に置き換えて重ねない */
.craft .sec-head .display { margin-top: 0; }
.craft .sec-head .jp { margin-top: 12px; padding-left: .85em; }
.craft__text .body-text { margin-top: 40px; }
.craft__img { max-width: 480px; justify-self: end; width: 100%; }
.craft__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 560px; width: 100%; justify-self: end; }
.craft__step { position: relative; overflow: hidden; aspect-ratio: 4 / 5; }
.craft__step:first-child { grid-row: span 2; aspect-ratio: auto; }
.craft__step img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.craft__step::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(transparent, rgba(0,0,0,.38)); }
.craft__cap { position: absolute; left: 16px; bottom: 14px; z-index: 1; color: #fff; font-family: var(--ff-jp); font-size: 15px; letter-spacing: .18em; display: flex; align-items: baseline; gap: 10px; }
.craft__no { font-family: var(--ff-en); font-size: 14px; letter-spacing: .12em; opacity: .85; }

/* ---------- News ---------- */
.news { padding-bottom: clamp(120px, 14vw, 190px); }
.news__grid { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(40px, 7vw, 110px); }
.news__grid .link-more { margin-top: 40px; }
.news__list { border-top: 1px solid var(--line); }
.news__item { display: grid; grid-template-columns: 130px 1fr 24px; gap: 24px; align-items: center; padding: 30px 4px; border-bottom: 1px solid var(--line); transition: padding .3s ease, background-color .3s; }
.news__item:hover { padding-inline: 16px; background: rgba(255,255,255,.5); }
.news__date { font-family: var(--ff-sans); font-size: 12px; letter-spacing: .16em; color: var(--sub); line-height: 1; }
.news__title { font-size: 15px; line-height: 1.9; letter-spacing: .1em; }
.news__arrow { width: 24px; height: 1px; background: currentColor; position: relative; }
.news__arrow::after { content: ""; position: absolute; right: 0; top: -3px; width: 7px; height: 7px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }

/* ---------- Visit ---------- */
.visit { position: relative; color: #fff; padding-block: clamp(120px, 14vw, 180px); overflow: hidden; }
.visit__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 30%; }
.visit::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(36,38,35,.6) 0%, rgba(36,38,35,.25) 55%, rgba(36,38,35,0) 100%); }
.visit .wrap { position: relative; z-index: 2; }
.visit h2 { font-size: clamp(24px, 2.6vw, 34px); font-weight: 400; line-height: 1.9; letter-spacing: .16em; margin-top: 0; }
.visit__links { margin-top: 56px; display: grid; gap: 1px; max-width: 520px; background: rgba(255,255,255,.3); border: 1px solid rgba(255,255,255,.3); }
.visit__link { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 30px 32px; background: rgba(247,244,239,.08); backdrop-filter: blur(6px); transition: background-color .3s, color .3s; }
.visit__link:hover { background: var(--bg); color: var(--ink); }
.visit__link .display { font-size: 34px; }
.visit__link .jp { font-size: 12px; letter-spacing: .14em; margin-top: 8px; line-height: 1.6; opacity: .85; }

/* ---------- 元サイトの植物画（ボタニカルの線画） ---------- */
.botanical { position: absolute; pointer-events: none; z-index: 0; }
.products > .wrap, .concept > .wrap, .lab > .wrap { position: relative; z-index: 1; }
.concept .botanical { right: -40px; top: 60px; width: clamp(180px, 20vw, 300px); opacity: .5; }
.products .botanical { right: 24%; top: 36px; width: clamp(110px, 11vw, 160px); opacity: .6; }
.lab .botanical { left: 0; top: 52%; width: clamp(140px, 15vw, 220px); opacity: .32; }

/* ---------- Footer（左右2パネル） ---------- */
.footer { display: grid; grid-template-columns: 1fr 1fr; color: #fff; }
.footer__brand { position: relative; padding: 80px var(--gutter); display: flex; flex-direction: column; justify-content: flex-start; gap: 44px; min-height: 520px; overflow: hidden; }
.footer__brand-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.footer__brand::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(92, 120, 106, .72), rgba(70, 92, 82, .82)); }
.footer__brand > *:not(img) { position: relative; z-index: 2; }
.footer__logo img { height: 84px; width: auto; }
.footer__tagline { margin-top: 22px; font-family: var(--ff-sans); font-size: 12px; letter-spacing: .06em; opacity: .8; }
.footer__msg { font-size: 15px; line-height: 2; letter-spacing: .14em; }
.footer__links { background: var(--deep); padding: 80px var(--gutter) 36px; display: flex; flex-direction: column; }
.footer__group { display: grid; grid-template-columns: 140px 1fr; gap: 20px; padding-block: 26px; border-bottom: 1px solid rgba(255,255,255,.14); }
.footer__group:first-child { padding-top: 0; }
.footer__group h2, .footer__group h3 { font-family: var(--ff-en); font-size: 21px; font-weight: 400; letter-spacing: .02em; line-height: 1.4; }
.footer__group ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 24px; }
.footer__group a { font-family: var(--ff-sans); font-size: 12px; letter-spacing: .06em; line-height: 1.6; opacity: .82; transition: opacity .3s; }
.footer__group a:hover { opacity: 1; }
.footer__bottom { margin-top: auto; padding-top: 48px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-family: var(--ff-sans); font-size: 11px; letter-spacing: .06em; }
.footer__legal { display: flex; gap: 28px; }
.footer__legal a { opacity: .8; }
.footer__legal a:hover { opacity: 1; }
.footer__bottom small { opacity: .5; font-size: 11px; }

/* ---------- Sub pages ---------- */
.page-head { padding-top: clamp(170px, 18vw, 230px); padding-bottom: clamp(56px, 7vw, 90px); }
/* ページ名は「大きな英字＋小さな日本語」のひと組だけ（上の小ラベルは英字と重なるので置かない） */
.page-head .display, .contact-head .display { margin-top: 0; }
.page-head .jp, .contact-head .jp { margin-top: 10px; }
/* 大きな英字は文字の左に余白があるため、小さな日本語を少し右にずらして縦の線をそろえる（目の錯覚の補正） */
.page-head .jp, .contact-head .jp, .about-hero__head .jp { padding-left: .85em; }
/* 商品ラインナップ：見出しの右に肌の写真を添える（SP では見出しの下に全幅） */
.page-head--img { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
/* 写真は右端まで裁ち落として、見出しは写真の縦の中央にそろえる */
.page-head__img { aspect-ratio: 16 / 9; overflow: hidden; margin-right: calc((var(--gutter) + max(0px, (100vw - var(--max) - var(--gutter) * 2) / 2)) * -1); }
.page-head__img img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 38%; }
@media (max-width: 768px) {
  .page-head--img { grid-template-columns: 1fr; gap: 40px; }
  .page-head__img { aspect-ratio: 4 / 3; margin-inline: calc(var(--gutter) * -1); }
}
.page-body { padding-bottom: clamp(120px, 14vw, 180px); }
.page-grid { display: grid; grid-template-columns: 3fr 9fr; gap: clamp(32px, 6vw, 96px); }
.page-grid > .label { color: var(--green); padding-top: 34px; }
.def-list { border-top: 1px solid var(--line); }
.def-list > div { display: grid; grid-template-columns: 180px 1fr; gap: 24px; padding: 28px 4px; border-bottom: 1px solid var(--line); }
.def-list dt { font-size: 13px; letter-spacing: .14em; color: var(--sub); line-height: 2.2; }
.def-list dd { margin: 0; line-height: 2.2; letter-spacing: .1em; }
.def-list dd small { display: block; font-size: 12px; color: var(--sub); }
.map { margin-top: clamp(64px, 7vw, 96px); aspect-ratio: 16 / 7; background: var(--bg-2); }
.map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(.85) contrast(.95); }
.policy { max-width: 760px; }
.policy > p.body-text { padding-bottom: 40px; border-bottom: 1px solid var(--line); }
.policy section { padding-block: 36px; border-bottom: 1px solid var(--line); }
.policy h2 { display: flex; gap: 20px; align-items: baseline; font-size: 16px; font-weight: 500; letter-spacing: .14em; line-height: 1.8; }
.policy h2 span { font-family: var(--ff-en); font-size: 22px; color: var(--green); font-weight: 400; }
.policy section .body-text { margin-top: 16px; }
.policy .contact-box { margin-top: 20px; padding: 24px 28px; background: var(--bg-2); line-height: 2.1; letter-spacing: .1em; }

/* ---------- Contact form ---------- */
/* PC：左に見出し、右にフォーム */
.contact-page { padding-top: clamp(170px, 18vw, 230px); padding-bottom: clamp(120px, 14vw, 180px); }
.contact-grid { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.contact-head { position: sticky; top: 140px; }
.contact-head .body-text { margin-top: 36px; }
@media (max-width: 1100px) { .contact-grid { grid-template-columns: 1fr; gap: 56px; } .contact-head { position: static; } }
.form { border-top: 1px solid var(--line); }
.field { display: grid; grid-template-columns: 236px 1fr; gap: 24px; align-items: start; padding: 28px 0; border-bottom: 1px solid var(--line); }
.field__label { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 17px; font-size: 14px; letter-spacing: .1em; line-height: 1.6; }
.field__label .req, .field__label .opt { font-family: var(--ff-jp); font-size: 10px; letter-spacing: .1em; line-height: 1; padding: 5px 7px; }
.field__label .req { background: var(--green); color: #fff; }
.field__label .opt { border: 1px solid var(--line); color: var(--sub); }
.field input, .field textarea {
  width: 100%; padding: 16px 18px; border: 1px solid rgba(43, 42, 40, .16); border-radius: 2px; background: #fff;
  font: inherit; font-size: 15px; letter-spacing: .06em; line-height: 1.7; color: var(--ink);
  transition: border-color .25s, box-shadow .25s;
}
.field textarea { resize: vertical; min-height: 200px; }
.field input::placeholder, .field textarea::placeholder { color: #b3aea6; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(95, 117, 109, .15); }
.field__error { min-height: 0; margin-top: 8px; font-size: 12px; letter-spacing: .06em; line-height: 1.6; color: #a4523f; }
.field__error:empty { display: none; }
.field.is-error input, .field.is-error textarea { border-color: #c97b68; background: #fffaf8; }
.consent { margin-top: 44px; display: flex; justify-content: center; align-items: center; gap: 12px; cursor: pointer; font-size: 14px; letter-spacing: .08em; position: relative; }
.consent input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.consent__box { width: 20px; height: 20px; border: 1px solid rgba(43, 42, 40, .3); background: #fff; display: grid; place-items: center; transition: background-color .2s, border-color .2s; }
.consent__box::after { content: ""; width: 9px; height: 5px; border-left: 1.5px solid #fff; border-bottom: 1.5px solid #fff; transform: translateY(-1px) rotate(-45deg); opacity: 0; }
.consent input:checked + .consent__box { background: var(--green); border-color: var(--green); }
.consent input:checked + .consent__box::after { opacity: 1; }
.consent input:focus-visible + .consent__box { box-shadow: 0 0 0 3px rgba(95, 117, 109, .25); }
.consent a { text-decoration: underline; text-underline-offset: 4px; color: var(--green); }
.consent__error { text-align: center; }
.submit {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: min(320px, 100%); margin: 40px auto 0; padding: 22px 28px;
  border: 0; border-radius: 2px; background: var(--green); color: #fff; cursor: pointer;
  font-family: var(--ff-jp); font-size: 15px; letter-spacing: .2em; transition: background-color .3s;
}
/* 文字は中央、右端に短い線 */
.submit::after { content: ""; position: absolute; right: 28px; top: 50%; width: 28px; height: 1px; background: currentColor; transition: width .3s; }
.submit:hover { background: #4d6159; }
.submit:hover::after { width: 40px; }
.form-done { padding: 64px 0; border-top: 1px solid var(--line); }
.form-done .display { font-size: clamp(44px, 5vw, 64px); color: var(--green); }
.form-done .lead { margin-top: 32px; }
.form-done .body-text { margin-top: 16px; }
.form-done__note { margin-top: 24px; font-size: 12px; color: var(--sub); letter-spacing: .08em; }
.form-done .link-more { margin-top: 40px; }

/* ---------- Lower pages: shared ---------- */
.page-banner { margin-inline: var(--gutter); aspect-ratio: 21 / 8; overflow: hidden; }
.page-banner img, .page-banner video { width: 100%; height: 100%; object-fit: cover; }
.back-link { margin-top: 64px; }
.line__tag { display: inline-flex; align-items: center; gap: 14px; font-size: 12px; letter-spacing: .14em; color: var(--green); line-height: 1; }
.line__tag .line__tag-jp { font-family: inherit; font-size: inherit; letter-spacing: inherit; text-transform: none; color: inherit; }
.line__tag-jp::before { content: "─"; margin-right: 12px; opacity: .5; }
.line__tag span { font-family: var(--ff-sans); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--sub); }
.product__jp-name { margin-top: 18px; font-size: 14px; letter-spacing: .06em; line-height: 1.8; color: var(--ink); }

/* line-nav：ラインへのリンク（About / Products 共通）。3列の横長カードで写真と文字を大きく見せる */
.line-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.line-nav li { display: flex; }
.line-nav a { flex: 1; display: grid; grid-template-columns: clamp(96px, 9vw, 132px) 1fr; grid-template-rows: auto auto; column-gap: clamp(16px, 2vw, 28px); row-gap: 6px; align-content: center; align-items: center; padding: 16px clamp(16px, 2vw, 28px) 16px 12px; background: #fff; transition: box-shadow .3s, transform .3s; }
.line-nav a:hover { box-shadow: 0 10px 28px -6px rgba(0,0,0,.1); transform: translateY(-2px); }
/* 商品画像は白背景つきなので、乗算で白をカードの色になじませる */
.line-nav img { grid-row: 1 / 3; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; mix-blend-mode: multiply; }
.line-nav__tag { align-self: end; font-size: 12px; letter-spacing: .12em; color: var(--green); line-height: 1.4; }
.line-nav__name { align-self: start; font-family: var(--ff-en); font-size: clamp(20px, 1.7vw, 24px); letter-spacing: .03em; line-height: 1.2; }

/* ---------- About ---------- */
/* ファーストビューに文字と写真が収まるよう、上下中央そろえにして写真の高さを画面の高さで抑える */
.about-hero { padding-top: clamp(120px, 11vw, 150px); display: grid; grid-template-columns: 6fr 5fr; gap: clamp(40px, 6vw, 96px); align-items: center; }
/* FAS のような強弱：英字タイトル＋小さな日本語をひと組に → 細い線 → 大きな明朝のコピー → 小さな英字キャプション */
.about-hero .sec-head .display { margin-top: 0; font-size: clamp(36px, 4vw, 54px); line-height: 1.05; letter-spacing: .01em; }
.about-hero__about { font-size: .5em; letter-spacing: .06em; margin-right: .1em; }
.about-hero__head .jp { margin-top: 8px; font-size: 12px; letter-spacing: .2em; }
.about-hero__lead { position: relative; margin-top: clamp(56px, 6vw, 88px); padding-top: clamp(28px, 3vw, 40px); font-size: clamp(30px, 3.3vw, 44px); font-weight: 500; line-height: 1.6; letter-spacing: .1em; color: var(--ink); }
.about-hero__lead::before { content: ""; position: absolute; top: 0; left: 0; width: 48px; height: 1px; background: var(--green); opacity: .6; }
.about-hero__en { margin-top: 24px; font-family: var(--ff-sans); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--green); }
/* PC：見出しは写真の上端にそろえ、主役のコピーは写真の上下中央に来るよう 1fr / コピー / 英字 / 1fr の4段で組む */
@media (min-width: 1101px) {
  .about-hero { align-items: stretch; }
  .about-hero__text { display: grid; grid-template-rows: 1fr auto auto 1fr; }
  .about-hero__head { align-self: start; }
  .about-hero__lead { margin-top: 0; }
}
.about-hero__media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--bg-2); width: 100%; max-width: calc((100vh - 200px) * .8); justify-self: end; }
.about-hero__media video { width: 100%; height: 100%; object-fit: cover; }
.about-intro { padding-block: clamp(100px, 12vw, 160px); }
.message { position: relative; overflow: hidden; padding-block: clamp(100px, 12vw, 160px); background: var(--bg-2); }
.message > .wrap { position: relative; z-index: 1; }
.message .botanical { right: -40px; top: 40px; width: clamp(180px, 20vw, 300px); opacity: .45; }
.message__head { text-align: center; }
.message__head .label { color: var(--green); }
.message__head .lead { margin-top: 32px; font-size: clamp(22px, 2.6vw, 32px); }
.message__sub { margin-top: 18px; font-size: 14px; letter-spacing: .16em; color: var(--green); }
.message__rows { margin-top: clamp(64px, 8vw, 110px); display: grid; gap: clamp(56px, 7vw, 96px); }
.message__row { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.message__row--rev .message__img { order: 2; }
/* 物語の章立て：小さな章番号 → 語りの見出し → 本文 */
/* 段落の見出し：「01 ─ ORGANIC」（Reason の「01 / 03 ── RESEARCH」と同じ組み方） */
.message__no { display: flex; align-items: baseline; gap: 14px; color: var(--green); }
.message__num { font-family: var(--ff-en); font-size: 26px; line-height: 1; }
.message__key { display: flex; align-items: center; gap: 12px; font-family: var(--ff-sans); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; }
.message__key::before { content: ""; width: 24px; height: 1px; background: currentColor; opacity: .6; }
.message__title { margin-top: 6px; font-size: clamp(20px, 2vw, 26px); font-weight: 400; line-height: 1.8; letter-spacing: .12em; }
.message__text .body-text { margin-top: 28px; }
.message__text .body-text + .body-text { margin-top: 18px; }
.message__img { aspect-ratio: 3 / 2; overflow: hidden; }
.message__img img { width: 100%; height: 100%; object-fit: cover; }
.reason-head { position: relative; overflow: hidden; padding-block: clamp(100px, 11vw, 150px); color: #fff; background: linear-gradient(180deg, #9eacad 0%, #8d9f9c 25%, #7d928b 50%, #6c857b 75%, #5c786a 100%); }
.reason-head > .wrap { position: relative; z-index: 1; }
.reason-head .botanical { right: 0; top: 0; width: clamp(200px, 22vw, 320px); opacity: .4; }
.reason-head .sec-head .label, .reason-head .sec-head .display, .reason-head .sec-head .jp { color: #fff; }
.reason-head__title { margin-top: 28px; color: #fff; font-size: clamp(24px, 2.8vw, 34px); line-height: 1.8; }
.reason { padding-block: clamp(90px, 10vw, 140px); }
.reason__item + .reason__item { margin-top: clamp(100px, 12vw, 160px); padding-top: clamp(80px, 10vw, 120px); border-top: 1px solid var(--line); }
/* 特徴の見出し：左に番号とキーワード、細い縦線をはさんで右に日本語の見出し */
.reason__title { display: grid; grid-template-columns: clamp(150px, 16vw, 210px) 1fr; align-items: start; }
.reason__no { display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 10px; row-gap: 14px; color: var(--green); }
.reason__num { font-family: var(--ff-en); font-weight: 300; font-size: clamp(44px, 4.4vw, 60px); line-height: .9; }
.reason__of { font-family: var(--ff-en); font-size: 16px; letter-spacing: .08em; opacity: .6; }
.reason__key { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; font-family: var(--ff-sans); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; }
.reason__key::before { content: ""; width: 24px; height: 1px; background: currentColor; opacity: .6; }
.reason__title h2 { margin: 0; padding-left: clamp(28px, 4vw, 56px); border-left: 1px solid var(--line); font-size: clamp(20px, 2.2vw, 28px); font-weight: 400; line-height: 1.9; letter-spacing: .12em; }
.reason__img { margin-top: 48px; aspect-ratio: 21 / 9; overflow: hidden; }
.reason__img img { width: 100%; height: 100%; object-fit: cover; }
.reason__cards { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 64px); }
.reason-card__img { aspect-ratio: 3 / 2; overflow: hidden; margin-bottom: 24px; }
.reason-card__img img { width: 100%; height: 100%; object-fit: cover; }
/* 人物写真は顔が切れないよう右寄せで切り抜く */
.reason-card__img--person img { object-position: 50% 17%; }
.reason-card .label, .reason__formulation .label { color: var(--green); }
/* 英語ラベルに日本語の意味を添える（例：FORMULATION ─ 処方） */
.label__jp { margin-left: 10px; font-size: 12px; font-family: var(--ff-jp); letter-spacing: .14em; text-transform: none; }
.label__jp::before { content: "─"; margin-right: 10px; opacity: .6; }
/* 英語ラベルだけでは意味が伝わらないので、日本語の小見出しを添える */
.reason-sub { margin-top: 12px; font-size: clamp(17px, 1.5vw, 20px); font-weight: 400; line-height: 1.7; letter-spacing: .1em; }
.reason-card .body-text, .reason__formulation .body-text { margin-top: 16px; }
/* 処方：左に見出し、右に短く区切った本文。補足は「バイオテクノロジーとは」を開いたときだけ表示して文字量を抑える */
.reason__formulation { margin-top: 64px; padding: clamp(36px, 4.5vw, 64px); background: var(--bg-2); display: grid; grid-template-columns: 4fr 7fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
.reason__formulation-body { max-width: 36em; }
.reason__formulation-body .body-text:first-child { margin-top: 0; }
.reason__more { margin-top: 24px; border-top: 1px solid var(--line); }
.reason__more summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; padding-top: 18px; font-family: var(--ff-body); font-size: 13px; letter-spacing: .06em; color: var(--green); }
.reason__more summary::-webkit-details-marker { display: none; }
.reason__more summary::after { content: "+"; font-family: var(--ff-sans); font-size: 18px; line-height: 1; transition: transform .3s; }
.reason__more[open] summary::after { transform: rotate(45deg); }
.reason__quality-text { max-width: 34em; }
.reason__quality-text .label { color: var(--green); }
.reason__quality-text .body-text { margin-top: 16px; }
.reason__formulation .note { margin-top: 12px; font-size: 12px; line-height: 2; color: var(--sub); }
.reason__quality { margin-top: 64px; display: grid; grid-template-columns: 4fr 6fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.reason__quality-img { aspect-ratio: 4 / 5; overflow: hidden; }
.reason__quality-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
/* 取得認証：画像ではなく文字で。認証名を英字で大きく、意味を日本語で小さく添え、細い線で区切る */
/* 証明書と ECOCERT ロゴは、白い紙に影を落として実物のように見せる */
.certs__figs { display: flex; gap: 20px; margin-top: 36px; }
.certs__fig { margin: 0; }
.certs__paper { width: 132px; aspect-ratio: 396 / 590; background: #fff; box-shadow: 0 16px 32px -16px rgba(40, 34, 28, .35), 0 1px 3px rgba(40, 34, 28, .08); display: grid; place-items: center; overflow: hidden; }
.certs__paper img { width: 100%; height: 100%; object-fit: cover; }
.certs__paper--logo { padding: 18px; }
.certs__paper--logo img { height: auto; object-fit: contain; }
.certs__fig figcaption { margin-top: 12px; font-family: var(--ff-body); font-size: 11px; letter-spacing: .06em; color: var(--sub); }
.certs__figs--light figcaption { color: rgba(255, 255, 255, .78); }
.certs { list-style: none; margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.certs li { display: grid; gap: 6px; padding: 20px 20px 20px 0; border-bottom: 1px solid var(--line); }
.certs li:nth-child(odd) { border-right: 1px solid var(--line); }
.certs li:nth-child(even) { padding-left: 24px; }
.certs__name { font-family: var(--ff-en); font-variant-numeric: lining-nums; font-size: clamp(22px, 2vw, 28px); line-height: 1.1; letter-spacing: .02em; color: var(--green); }
.certs__jp { font-family: var(--ff-body); font-size: 12px; letter-spacing: .06em; line-height: 1.6; color: var(--sub); }
.certs--light, .certs--light li { border-color: rgba(255, 255, 255, .32); }
/* 縦線は .certs li:nth-child(odd) の指定が優先されて暗い線のままだったので、明示的に白線にする */
.certs--light li:nth-child(odd) { border-right-color: rgba(255, 255, 255, .4); }
.certs--light .certs__name { color: #fff; }
.certs--light .certs__jp { color: rgba(255, 255, 255, .78); }
.reason__split { margin-top: 48px; display: grid; grid-template-columns: 6fr 5fr; gap: clamp(32px, 5vw, 80px); align-items: center; }
.reason__split .reason__img { margin-top: 0; aspect-ratio: 3 / 2; }
.reason .line-nav { margin-top: 56px; }
.reason .line-nav a { background: var(--bg-2); }

/* ---------- Products list ---------- */
.line-nav--top { margin-bottom: clamp(40px, 5vw, 72px); }
.line { padding-block: clamp(80px, 9vw, 120px); border-top: 1px solid var(--line); scroll-margin-top: 80px; }
.line:nth-of-type(even) { background: var(--bg-2); }
.line__grid { display: grid; grid-template-columns: 4fr 8fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.line__head { position: sticky; top: 130px; }
.line__head .display { margin-top: 20px; font-size: clamp(40px, 4.4vw, 60px); color: var(--green); }
.line__head .jp { margin-top: 10px; font-size: 13px; letter-spacing: .14em; color: var(--sub); }
.line__head .body-text { margin-top: 28px; font-size: 13px; }
.line__items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 28px; }

/* ---------- Product detail ---------- */
.detail { padding-top: clamp(140px, 14vw, 180px); padding-bottom: clamp(100px, 11vw, 150px); }
.breadcrumb { display: flex; gap: 12px; font-family: var(--ff-sans); font-size: 11px; letter-spacing: .14em; color: var(--sub); }
.breadcrumb a:hover { color: var(--green); }
.detail__grid { margin-top: 40px; display: grid; grid-template-columns: 6fr 5fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.detail__img { background: #fff; aspect-ratio: 1 / 1; display: grid; place-items: center; position: sticky; top: 120px; }
.detail__img img { width: 86%; height: 86%; object-fit: contain; }
.detail__title { margin-top: 24px; font-size: clamp(22px, 2.2vw, 28px); font-weight: 400; line-height: 1.7; letter-spacing: .1em; }
.detail__catch { margin-top: 16px; font-size: 15px; line-height: 1.9; letter-spacing: .12em; color: var(--green); }
@media (max-width: 768px) { .detail__catch { letter-spacing: .05em; } }
.detail__desc { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--line); }
.detail__desc .body-text + .body-text { margin-top: 16px; }
.detail__specs { margin: 40px 0 0; border-top: 1px solid var(--line); }
.detail__specs > div { display: grid; grid-template-columns: 120px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.detail__specs dt { font-size: 13px; color: var(--sub); letter-spacing: .14em; }
.detail__specs dd { margin: 0; font-size: 15px; letter-spacing: .08em; }
.ingredients { border-bottom: 1px solid var(--line); }
.ingredients summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; padding: 18px 0; font-size: 13px; color: var(--sub); letter-spacing: .14em; }
.ingredients summary::-webkit-details-marker { display: none; }
.ingredients summary::after { content: "+"; font-family: var(--ff-sans); font-size: 18px; line-height: 1; color: var(--green); transition: transform .3s; }
.ingredients[open] summary::after { transform: rotate(45deg); }
.ingredients p { padding-bottom: 20px; font-family: var(--ff-body); font-size: 12px; line-height: 2.1; letter-spacing: .04em; color: var(--sub); }
.detail__actions { margin-top: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.detail__btn { display: flex; align-items: center; justify-content: center; padding: 20px 16px; background: var(--green); color: #fff; border: 1px solid var(--green); border-radius: 2px; font-size: 14px; letter-spacing: .14em; transition: background-color .3s, color .3s; }
.detail__btn:hover { background: #4d6159; }
.detail__btn--line { background: transparent; color: var(--green); }
.detail__btn--line:hover { background: var(--green); color: #fff; }
.related { padding-block: clamp(90px, 10vw, 130px); background: var(--bg-2); }
.related .sec-head .display { font-size: clamp(40px, 4.4vw, 60px); }
.related__items { margin-top: 56px; grid-template-columns: repeat(4, 1fr); }

/* ---------- News list / article ---------- */
.news__list--page { max-width: 960px; }
.article { padding-top: clamp(150px, 15vw, 200px); padding-bottom: clamp(100px, 11vw, 150px); max-width: calc(800px + var(--gutter) * 2); }
.article__head .label { color: var(--green); }
.article__date { margin-top: 28px; font-family: var(--ff-sans); font-size: 12px; letter-spacing: .16em; color: var(--sub); }
.article__title { margin-top: 14px; font-size: clamp(22px, 2.4vw, 30px); font-weight: 400; line-height: 1.8; letter-spacing: .1em; padding-bottom: 40px; border-bottom: 1px solid var(--line); }
.article__body { margin-top: 48px; }
.article__body p { font-family: var(--ff-body); line-height: 2.2; letter-spacing: .05em; color: #2a2926; }
.article__body p + p { margin-top: 1.6em; }
.article__body strong { font-weight: 500; color: var(--ink); background: linear-gradient(transparent 70%, rgba(95, 117, 109, .18) 70%); }
.pager { margin-top: 80px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border-block: 1px solid var(--line); }
.pager > * { background: var(--bg); padding: 26px 24px; font-size: 13px; line-height: 1.8; letter-spacing: .08em; }
.pager a { display: grid; gap: 10px; transition: background-color .3s; }
.pager a:hover { background: var(--bg-2); }
.pager .label { color: var(--green); }
.pager__next { text-align: right; }

/* ---------- Shop List ---------- */
.shop-empty { position: relative; overflow: hidden; padding: clamp(64px, 8vw, 110px) var(--gutter); background: var(--bg-2); text-align: center; }
.shop-empty > *:not(.botanical) { position: relative; z-index: 1; }
.shop-empty .botanical { right: 6%; top: 24px; width: clamp(90px, 10vw, 140px); opacity: .6; }
.shop-empty .display { font-size: clamp(40px, 5vw, 64px); color: var(--green); }
.shop-empty .lead { margin-top: 28px; }
.shop-empty .body-text { margin-top: 12px; }
.shop-empty .detail__btn { display: inline-flex; margin-top: 40px; min-width: 260px; }

/* ---------- Reveal ---------- */
.js .rv { opacity: 0; transform: translateY(24px); transition: opacity 1.1s ease, transform 1.1s cubic-bezier(.2,.7,.2,1); }
.js .rv.in { opacity: 1; transform: none; }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .header__nav { display: none; }
  .products__grid { grid-auto-columns: calc((100% - 32px * 2) / 2.5); }
  .footer { grid-template-columns: 1fr; }
  .line-nav { grid-template-columns: repeat(2, 1fr); }
  .line__grid { grid-template-columns: 1fr; gap: 40px; }
  .line__head { position: static; }
  .related__items { grid-template-columns: repeat(3, 1fr); }
}
/* ---------- SP ---------- */
@media (max-width: 768px) {
  body { font-size: 15px; }
  .header__inner { height: 64px; }
  .header__logo img { height: 34px; }
  .drawer { width: 100%; }
  .drawer__inner { padding: 100px var(--gutter) 40px; }
  /* 375px以上は16px、それより狭い端末では1行に収まるよう少しずつ小さく */
  .story__scene { font-size: min(16px, 4.6vw); letter-spacing: .16em; }
  /* SP も PC と同じく中央ぞろえ。本文は語のまとまり（.nw）ごとに折り返して、行の途中で切れないようにする */
  .concept .body-text br { display: none; }
  /* SP は縦に間延びしないよう、上下の余白と行間を詰める */
  .concept { padding-block: 80px 64px; }
  .concept .lead { margin-top: 24px; line-height: 1.75; }
  .concept .body-text { margin-top: 24px; }
  .concept .fn-note { margin-top: 16px; }
  .about__grid, .icon__grid, .lab__intro, .lab__cards, .quality, .craft__grid, .news__grid { grid-template-columns: 1fr; }
  .about__text { order: -1; }
  /* Icon Item は SP で「ラベル → 商品名 → 写真 → 説明 → リンク」の順に組み替える */
  .icon__grid { row-gap: 0; }
  .icon__text { display: contents; }
  .icon__text .label { order: 1; }
  .icon__text .display { order: 2; }
  .icon__text .jp-name { order: 3; }
  .icon__img { order: 4; margin-top: 32px; }
  .icon__text .body-text { order: 5; }
  .icon__text .body-text br { display: none; } /* PC 用の改行は SP では「で、」だけが残るので外す */
  .icon__text .link-more { order: 6; justify-self: start; }

  .products__top { flex-direction: column; align-items: flex-start; }
  .products__slider { margin-top: 48px; margin-right: calc(var(--gutter) * -1); }
  .products__slider::after { right: 0; width: 56px; }
  .products__grid { grid-auto-columns: 62%; gap: var(--gutter); scroll-padding-left: 16px; padding: 16px var(--gutter) 40px 16px; margin: -16px 0 -40px -16px; }
  /* 商品画像（カード幅 62%・縦横比 2:3）の上下中央に矢印を置く */
  .slider-btn { width: 40px; height: 40px; top: calc((100vw - var(--gutter) * 2) * .62 * 1.5 / 2 + 16px); }
  .slider-btn--prev { left: -12px; }
  .slider-btn--next { right: 8px; }
  .product__name { font-size: 22px; }
  .product__tag { top: 12px; left: 12px; font-size: 10px; }
  .craft__text { position: static; }
  .craft__img, .craft__steps { justify-self: stretch; max-width: none; }
  .craft__steps { gap: 8px; }
  .craft__cap { left: 12px; bottom: 10px; font-size: 14px; }
  .news__item { grid-template-columns: 1fr 24px; gap: 10px 16px; padding: 24px 0; }
  .news__date { grid-column: 1 / -1; }
  .visit__link { padding: 24px; }
  .concept .botanical { width: 150px; top: 20px; right: -50px; opacity: .35; }
  .products .botanical { width: 170px; top: 12px; right: -24px; opacity: .8; }
  /* SP は区切り線と重ならないよう、見出しの右上の空きに置く */
  .lab .botanical { width: 120px; opacity: .3; top: 28px; left: auto; right: -30px; }
  .footer__brand { min-height: 360px; padding-block: 64px; }
  .footer__logo img { height: 60px; }
  .footer__links { padding-top: 56px; }
  .footer__group { grid-template-columns: 1fr; gap: 14px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 20px; }
  .page-grid { grid-template-columns: 1fr; gap: 0; }
  .page-grid > .label { padding: 0 0 24px; }
  .def-list > div { grid-template-columns: 1fr; gap: 4px; padding: 22px 0; }
  .map { aspect-ratio: 4 / 3; }
  .page-banner { aspect-ratio: 4 / 3; }
  .about-hero { grid-template-columns: 1fr; gap: 40px; }
  .about-hero__media { max-width: none; justify-self: stretch; }
  .about-hero__lead { margin-top: 44px; padding-top: 24px; font-size: clamp(25px, 7.2vw, 29px); }
  /* SP は2列の縦型カード（写真の下にラベルと名前）。数が奇数なら最後の1枚は横長にして段を埋める */
  .line-nav { grid-template-columns: 1fr 1fr; gap: 8px; }
  .line-nav a { grid-template-columns: 1fr; grid-template-rows: auto auto auto 1fr; justify-items: center; align-content: stretch; text-align: center; row-gap: 4px; padding: 14px 10px 16px; }
  .line-nav img { grid-row: auto; width: 62%; margin-bottom: 6px; }
  .line-nav__tag, .line-nav__name { align-self: auto; }
  .line-nav__name { font-size: 19px; }
  .line-nav li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .line-nav li:last-child:nth-child(odd) a { grid-template-columns: 96px 1fr; grid-template-rows: auto auto; justify-items: start; align-content: center; text-align: left; column-gap: 16px; padding: 10px 16px 10px 8px; }
  .line-nav li:last-child:nth-child(odd) img { grid-row: 1 / 3; width: 100%; margin-bottom: 0; }
  .line-nav li:last-child:nth-child(odd) .line-nav__tag { align-self: end; }
  .line-nav li:last-child:nth-child(odd) .line-nav__name { align-self: start; }
  .line-nav__tag { font-size: 11px; }
  .message__row { grid-template-columns: 1fr; gap: 24px; }
  .message__row--rev .message__img { order: 0; }
  .message__text .body-text br { display: none; }
  .reason__cards, .reason__quality, .reason__split, .reason__formulation { grid-template-columns: 1fr; }
  .reason__title { grid-template-columns: 1fr; row-gap: 20px; }
  .reason__no { grid-template-columns: auto auto 1fr; column-gap: 12px; }
  .reason__key { grid-column: auto; }
  .reason__title h2 { padding-left: 0; border-left: 0; }
  .reason__img { aspect-ratio: 4 / 3; }
  .line__items, .related__items { grid-template-columns: repeat(2, 1fr); gap: 32px 14px; }
  .product__jp-name { font-size: 14px; margin-top: 12px; line-height: 1.7; }
  .detail__grid { grid-template-columns: 1fr; gap: 32px; }
  .detail__img { position: static; }
  .detail__actions { grid-template-columns: 1fr; }
  .pager { grid-template-columns: 1fr; }
  .pager__next { text-align: left; }
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .contact-head { position: static; }
  .field { grid-template-columns: 1fr; gap: 12px; padding: 24px 0; }
  .field__label { padding-top: 0; }
  .field input, .field textarea { font-size: 16px; }
  .submit { width: 100%; }
}

/* ---------- SP の読みやすさ（本文15px基準。字間と行間を少し詰めて、小さい補足文字も底上げ） ---------- */
@media (max-width: 768px) {
  .body-text, .article__body p { line-height: 2; letter-spacing: .04em; }
  .label, .link-more { font-size: 12px; }
  .jp { font-size: 14px; }
  .note, .footer__tagline, .news__date, .article__date { font-size: 13px; }
  .product__tag { font-size: 11px; }
  .product__jp { font-size: 13px; }
  .line__tag { font-size: 13px; }
  .line-nav__tag { font-size: 12px; }
  .breadcrumb { font-size: 12px; }
  .detail__specs dt, .ingredients summary { font-size: 14px; }
  .detail__specs > div { grid-template-columns: 88px 1fr; }
  .ingredients p { font-size: 13px; }
  .pager > * { font-size: 14px; }
  .footer__links a { font-size: 14px; }
  .req, .opt { font-size: 11px; }
}

/* ---------- 文字組みの仕上げ（全ページ）：本文以外の補足もゴシックに、見出しは字間を詰めて言葉のかたまりで読ませる ---------- */
.note, .lab-card__body p.t, .detail__specs dd, .company dd, dl dd { font-family: var(--ff-body); letter-spacing: .04em; }
main :is(h1, h2, h3, .lead):not(.display) { letter-spacing: .08em; }
.display { font-weight: 400; }
.label { letter-spacing: .18em; }
.about-hero__en { letter-spacing: .2em; }
.line-nav__name { font-weight: 500; }


/* SP：証明書とロゴの2枚は画面の中央にそろえる */
@media (max-width: 768px) {
  .certs__figs { justify-content: center; gap: 24px; }
  .certs__fig figcaption { text-align: center; }
}

/* ---------- About のメインビジュアル（FAS の About を参考に、写真3枚＋縦書きコピー） ---------- */
.about-mv { position: relative; height: 100svh; min-height: 600px; overflow: hidden; color: #fff; background: #2c3a33; }
/* 写真は絶対配置で3等分（iPhone の Safari ではグリッドの行に対する height:100% が効かず、写真が拡大されてしまうため） */
.about-mv__panels { position: absolute; inset: 0; }
.about-mv__panels img { position: absolute; top: 0; width: calc(100% / 3 + 1px); height: 100%; object-fit: cover; }
.about-mv__panels img:nth-child(1) { left: 0; }
.about-mv__panels img:nth-child(2) { left: calc(100% / 3); }
.about-mv__panels img:nth-child(3) { left: calc(200% / 3); }
.about-mv::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(20, 28, 25, .35) 0%, rgba(20, 28, 25, .12) 35%, rgba(20, 28, 25, .18) 65%, rgba(20, 28, 25, .55) 100%); }
.about-mv__copy { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max-content; max-width: calc(100% - var(--gutter) * 2); display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; text-shadow: 0 1px 18px rgba(0, 0, 0, .35); }
.about-mv__lead { font-size: clamp(28px, 3vw, 42px); font-weight: 500; letter-spacing: .16em; line-height: 1.7; }
.about-mv__en { font-family: var(--ff-sans); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; opacity: .9; }
.about-mv__title { position: absolute; z-index: 1; left: var(--gutter); bottom: clamp(32px, 5vw, 56px); }
.about-mv__title .display { margin: 0; font-size: clamp(30px, 3vw, 42px); color: #fff; line-height: 1.1; }
.about-mv__title .jp { margin-top: 8px; padding-left: .85em; font-size: 12px; letter-spacing: .2em; color: rgba(255, 255, 255, .85); }
.about-mv + .about-intro { padding-top: clamp(100px, 11vw, 150px); }
/* 風景写真で終わるので、下の余白をなくして次のセクションの色面に直接つなげる */
.about-intro:has(> .about-photos:last-child) { padding-bottom: 0; }
@media (max-width: 768px) {
  .about-mv { min-height: 560px; }
  /* SP は写真を縦に3段重ね、コピーは横書きのまま中央に */
  .about-mv__panels img { left: 0 !important; width: 100%; height: calc(100% / 3 + 1px); }
  .about-mv__panels img:nth-child(2) { top: calc(100% / 3); }
  .about-mv__panels img:nth-child(3) { top: calc(200% / 3); }
  /* 横長に切り抜くので、それぞれの見せ場（滝・キュウリの断面・森の木々）に位置を合わせる */
  .about-mv__panels img:nth-child(1) { object-position: 50% 55%; }
  .about-mv__panels img:nth-child(2) { object-position: 40% 42%; }
  .about-mv__panels img:nth-child(3) { object-position: 50% 78%; }
  .about-mv__lead { font-size: clamp(22px, 6.4vw, 26px); letter-spacing: .1em; }
  .about-mv__en { font-size: 10px; }
}

/* ---------- About 冒頭下：自然と研究所の写真が横にゆっくり流れる帯（FAS 参考） ---------- */
.about-intro__inner .about__text { max-width: 760px; }
.about-photos { margin-top: clamp(56px, 7vw, 96px); display: grid; grid-template-columns: repeat(4, 1fr); }
.about-photos img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; filter: saturate(.62) sepia(.12) contrast(.96) brightness(.98); background: #e6e2da; }
@media (max-width: 768px) { .about-photos { grid-template-columns: repeat(2, 1fr); } }
.about-strip { margin-top: clamp(56px, 7vw, 96px); overflow: hidden; }
.about-strip__track { display: flex; width: max-content; animation: about-strip 70s linear infinite; }
/* 写真同士は隙間なしでつなげる */
.about-strip img { flex: none; height: clamp(360px, 38vw, 580px); aspect-ratio: 4 / 5; width: auto; object-fit: cover; }
@keyframes about-strip { to { transform: translateX(-50%); } }
/* 色味をそろえる：彩度を落として少し温かく、シックなトーンに */
.about-strip img { filter: saturate(.62) sepia(.12) contrast(.96) brightness(.98); background: #e6e2da; }

/* Cormorant の数字は旧字体（01 が「OI」に見える）なので、工程番号は揃った数字で表示する */
.craft__no { font-variant-numeric: lining-nums; }

/* ---------- Page hero（商品ラインナップ） ---------- */
.page-hero { position: relative; height: clamp(460px, 64vh, 660px); color: #fff; overflow: hidden; background: #6b6a62; margin-bottom: clamp(56px, 7vw, 96px); }
.page-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 72%; }
.page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(30, 30, 27, .74) 0%, rgba(30, 30, 27, .55) 32%, rgba(30, 30, 27, .12) 62%, rgba(30, 30, 27, 0) 80%); }
.page-hero__inner { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: center; padding-top: 70px; text-shadow: 0 1px 14px rgba(0, 0, 0, .25); }
.page-hero .display { margin: 0; color: #fff; font-size: clamp(52px, 6vw, 84px); }
.page-hero .jp { margin-top: 10px; padding-left: .85em; font-size: 13px; letter-spacing: .2em; color: rgba(255, 255, 255, .9); }
.page-hero__lead { margin-top: 32px; max-width: 30em; font-size: 15px; line-height: 2.1; letter-spacing: .08em; }
@media (max-width: 768px) {
  .page-hero { height: 62svh; min-height: 440px; max-height: 560px; }
  .page-hero > img { object-position: 38% 70%; }
  .page-hero::after { background: linear-gradient(0deg, rgba(30, 30, 27, .82) 0%, rgba(30, 30, 27, .6) 38%, rgba(30, 30, 27, .1) 70%, rgba(30, 30, 27, .25) 100%); }
  .page-hero__inner { justify-content: flex-end; padding-bottom: 44px; }
  .page-hero__lead { margin-top: 20px; font-size: 13px; letter-spacing: .04em; line-height: 2; }
}

/* line-nav：押せることが分かるよう、カードの右に小さな丸いボタン（中に山形の矢印）を置く。
   商品ページ内は下へ移るので下向き、ほかのページからは右向き。ホバーで丸が緑に塗られる */
.line-nav a { position: relative; padding-right: 64px; }
.line-nav a::before { content: ""; position: absolute; right: 22px; top: calc(50% - 15px); width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(95, 117, 109, .35); transition: background-color .3s, border-color .3s; }
.line-nav a::after { content: ""; position: absolute; right: 35px; top: calc(50% - 3px); width: 5px; height: 5px; border-top: 1px solid var(--green); border-right: 1px solid var(--green); transform: rotate(45deg); transition: border-color .3s; }
.line-nav--top a::after { right: 34.5px; top: calc(50% - 4px); transform: rotate(135deg); }
.line-nav a:hover::before { background: var(--green); border-color: var(--green); }
.line-nav a:hover::after { border-color: #fff; }
@media (max-width: 768px) {
  /* 隣のカードに高さをそろえても、中身はカードの中で上下中央に置く（1行の名前だけ上に寄らないように） */
  .line-nav a { padding-right: 10px; padding-bottom: 46px; grid-template-rows: auto auto auto; align-content: center; }
  .line-nav a::before { top: auto; right: auto; left: calc(50% - 13px); bottom: 12px; width: 26px; height: 26px; }
  .line-nav a::after { top: auto; right: auto; left: calc(50% - 4px); bottom: 22.5px; }
  .line-nav--top a::after { left: calc(50% - 2.5px); bottom: 24px; }
  .line-nav li:last-child:nth-child(odd) a { padding-right: 52px; padding-bottom: 10px; }
  .line-nav li:last-child:nth-child(odd) a::before { left: auto; right: 16px; bottom: auto; top: calc(50% - 13px); }
  .line-nav li:last-child:nth-child(odd) a::after { left: auto; right: 27px; bottom: auto; top: calc(50% - 2.5px); }
  .line-nav--top li:last-child:nth-child(odd) a::after { right: 26.5px; top: calc(50% - 4px); }
}

/* ---------- Products: ライン見出しを上に横長で置き、その下に商品を4列で並べる（Aesop の一覧のような構成） ---------- */
.line__grid { display: block; }
.line__head { position: static; display: grid; grid-template-columns: 5fr 7fr; column-gap: clamp(40px, 6vw, 96px); align-items: end; padding-bottom: clamp(28px, 3vw, 40px); margin-bottom: clamp(36px, 4vw, 56px); border-bottom: 1px solid var(--line); }
.line__head .line__tag, .line__head .display { grid-column: 1; }
.line__head .body-text { grid-column: 2; grid-row: 1 / 3; margin-top: 0; max-width: 44em; }
.line__items { grid-template-columns: repeat(4, 1fr); gap: 56px 24px; }

/* 商品カード：商品名 → 特長のひと言 → 容量と価格 → 「詳しく見る」ボタン。文字はすべてゴシックで読みやすく */
.product a { display: flex; flex-direction: column; height: 100%; }
.line__items .product__jp-name, .related__items .product__jp-name { margin-top: 20px; font-family: var(--ff-body); font-size: 15px; font-weight: 500; letter-spacing: .04em; line-height: 1.65; }
.product__catch { margin-top: 8px; font-family: var(--ff-body); font-size: 12px; line-height: 1.75; letter-spacing: .04em; color: var(--sub); }
.product__catch:empty, .product__meta:empty { display: none; }
.product__meta { margin-top: 10px; font-family: var(--ff-body); font-size: 13px; letter-spacing: .06em; color: var(--ink); }
.product__more { font-family: var(--ff-body); margin-top: auto; display: grid; place-items: center; height: 42px; margin-block-start: 18px; border: 1px solid rgba(95, 117, 109, .45); font-size: 12px; letter-spacing: .16em; color: var(--green); transition: background-color .3s, color .3s, border-color .3s; }
.product__meta, .product__catch { flex: none; }
.product a > .product__more { margin-top: auto; }
.product a > p:last-of-type { margin-bottom: 18px; }
.product:hover .product__more { background: var(--green); border-color: var(--green); color: #fff; }
@media (max-width: 1100px) { .line__items { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) {
  .line__head { grid-template-columns: 1fr; row-gap: 0; }
  .line__head .body-text { grid-column: 1; grid-row: auto; margin-top: 20px; }
  .line__items { grid-template-columns: repeat(2, 1fr); gap: 40px 14px; }
  .line__items .product__jp-name, .related__items .product__jp-name { margin-top: 14px; font-size: 13px; line-height: 1.6; letter-spacing: .02em; }
  .product__catch { font-size: 11px; line-height: 1.7; letter-spacing: .02em; }
  .product__meta { font-size: 12px; margin-top: 8px; letter-spacing: .02em; }
  .product__more { height: 36px; font-size: 11px; letter-spacing: .12em; }
  .product a > p:last-of-type { margin-bottom: 14px; }
}

/* 同じ行のカードで、商品名・特長・価格・ボタンの高さをそろえる（各カードを親グリッドの5行に乗せる subgrid） */
@supports (grid-template-rows: subgrid) {
  .line__items, .related__items { row-gap: 0; }
  .line__items .product, .related__items .product { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
  .line__items .product a, .related__items .product a { grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; row-gap: 0; height: auto; }
  .product a > .product__img { grid-row: 1; }
  .product a > .product__jp-name { grid-row: 2; }
  .product a > .product__catch { grid-row: 3; }
  .product a > .product__meta { grid-row: 4; align-self: start; }
  .product a > .product__more { grid-row: 5; align-self: end; margin-bottom: 56px; }
  .product a > p:last-of-type { margin-bottom: 0; }
  .product__more { margin-block-start: 18px; }
}
@media (max-width: 768px) { @supports (grid-template-rows: subgrid) { .product a > .product__more { margin-bottom: 40px; } } }
/* スマホはホバーがないので、指で押した瞬間にボタンを緑にして反応を返す */
.product a:active .product__more { background: var(--green); border-color: var(--green); color: #fff; }

/* ---------- Contact Form 7（フォーム ID 44）をデモのフォームと同じ見た目にする ----------
   CF7 側の HTML（.form > .gr > .item > .left / .right）は管理画面のフォーム設定のまま使う */
.contact-page .wpcf7 .form { border-top: 1px solid var(--line); }
.contact-page .wpcf7 .item { display: grid; grid-template-columns: 236px 1fr; gap: 24px; align-items: start; padding: 28px 0; border-bottom: 1px solid var(--line); }
.contact-page .wpcf7 .item .left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 17px; font-size: 14px; letter-spacing: .1em; line-height: 1.6; }
.contact-page .wpcf7 .item .left p { margin: 0; }
/* 「※」は必須の印。文字を消して「必須」の札にする */
.contact-page .wpcf7 .item .note p { font-size: 0; }
.contact-page .wpcf7 .item .note p::before { content: "必須"; display: inline-block; font-family: var(--ff-jp); font-size: 10px; letter-spacing: .1em; line-height: 1; padding: 5px 7px; background: var(--green); color: #fff; }
.contact-page .wpcf7 .item .right p { margin: 0; }
.contact-page .wpcf7 .form-input__item {
  width: 100%; padding: 16px 18px; border: 1px solid rgba(43, 42, 40, .16); border-radius: 2px; background: #fff;
  font: inherit; font-size: 15px; letter-spacing: .06em; line-height: 1.7; color: var(--ink); transition: border-color .25s, box-shadow .25s;
}
.contact-page .wpcf7 textarea.form-input__item { resize: vertical; min-height: 200px; }
.contact-page .wpcf7 .form-input__item:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(95, 117, 109, .15); }
.contact-page .wpcf7 .form-input__item[aria-invalid="true"] { border-color: #c97b68; background: #fffaf8; }
.contact-page .wpcf7-not-valid-tip { margin-top: 8px; font-size: 12px; letter-spacing: .06em; line-height: 1.6; color: #a4523f; }
.contact-page .wpcf7 .see-more {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: min(320px, 100%); margin: 40px auto 0; padding: 22px 28px;
  border: 0; border-radius: 2px; background: var(--green); color: #fff; cursor: pointer;
  font-family: var(--ff-jp); font-size: 15px; letter-spacing: .2em; transition: background-color .3s;
}
.contact-page .wpcf7 .see-more br, .contact-page .wpcf7 .see-more svg { display: none; }
.contact-page .wpcf7 .see-more::after { content: ""; position: absolute; right: 28px; top: 50%; width: 28px; height: 1px; background: currentColor; transition: width .3s; }
.contact-page .wpcf7 .see-more:hover { background: #4d6159; }
.contact-page .wpcf7 .see-more:hover::after { width: 40px; }
.contact-page .wpcf7-spinner { display: block; margin: 16px auto 0; }
.contact-page .wpcf7-response-output { margin: 32px 0 0 !important; padding: 16px 20px !important; border: 1px solid var(--line) !important; font-size: 14px; letter-spacing: .06em; line-height: 1.8; }
.contact-page .wpcf7 form.sent .wpcf7-response-output { border-color: var(--green) !important; color: var(--green); }
.contact-page .wpcf7 form.invalid .wpcf7-response-output, .contact-page .wpcf7 form.failed .wpcf7-response-output { border-color: #c97b68 !important; color: #a4523f; }
.contact-note { margin-top: 24px; font-size: 13px; letter-spacing: .06em; line-height: 1.9; color: var(--sub); }
.contact-note a { color: var(--green); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 768px) {
  .contact-page .wpcf7 .item { grid-template-columns: 1fr; gap: 12px; padding: 24px 0; }
  .contact-page .wpcf7 .item .left { padding-top: 0; }
  .contact-page .wpcf7 .form-input__item { font-size: 16px; }
  .contact-page .wpcf7 .see-more { width: 100%; }
}

/* ---------- WordPress だけにある部品 ---------- */
.pagination { margin-top: 56px; display: flex; justify-content: center; gap: 8px; font-family: var(--ff-en); font-size: 16px; }
.pagination .page-numbers { min-width: 40px; height: 40px; display: grid; place-items: center; padding: 0 10px; border: 1px solid var(--line); color: var(--ink); }
.pagination .page-numbers.current { background: var(--green); border-color: var(--green); color: #fff; }
.article__body > * + * { margin-top: 1.6em; }
.article__body img { max-width: 100%; height: auto; }
.shop-map { margin-top: 8px; aspect-ratio: 16 / 9; background: var(--bg-2); }
.shop-map iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 768px) { .shop-map { aspect-ratio: 4 / 5; } }

/* Worldwide：導入サロンでの施術風景を4枚並べる（SP は 2×2） */
.reason__gallery { list-style: none; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(8px, 1vw, 14px); }
.reason__gallery li { aspect-ratio: 4 / 5; overflow: hidden; }
.reason__gallery img { width: 100%; height: 100%; object-fit: cover; }
.reason__gallery li:nth-child(1) img { object-position: 30% 50%; }
.reason__gallery li:nth-child(4) img { object-position: 40% 50%; }
@media (max-width: 768px) { .reason__gallery { grid-template-columns: repeat(2, 1fr); } }

/* Lab のカード：番号と英字ラベルは置かず、見出しと本文だけ。SP は横長の写真の下に、全幅で見出しと本文を置く */
.lab-card__body { display: block; }
.lab-card__body h3, .lab-card__body p.t { grid-column: auto; }
@media (max-width: 768px) {
  .lab__cards { margin-top: 56px; gap: 48px; }
  .lab-card__img { aspect-ratio: 16 / 10; }
  .lab-card__body { margin-top: 20px; }
  .lab-card__body h3 { margin-top: 0; font-size: 18px; letter-spacing: .1em; line-height: 1.6; }
  .lab-card__body p.t { margin-top: 10px; font-size: 14px; line-height: 2; letter-spacing: .04em; }
  .lab .quality { margin-top: 72px; padding-top: 56px; }
}

/* Worldwide（SP）：文章を先に置き、店舗と施術風景の写真5枚を横にスワイプして見る1列にまとめる */
.reason__gallery .sp-only { display: none; }
@media (max-width: 768px) {
  .reason__split--worldwide .reason__img { display: none; }
  .reason__gallery { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-right: calc(var(--gutter) * -1); padding-right: var(--gutter); }
  .reason__gallery::-webkit-scrollbar { display: none; }
  .reason__gallery li { flex: none; width: 58%; scroll-snap-align: start; }
  .reason__gallery .sp-only { display: block; }
  .reason__gallery .sp-only img { object-position: 30% 50%; }
}

/* ---------- Banner（Lab と Craftsmanship の間）：全幅の写真の空にコピーを重ねる ---------- */
.banner { position: relative; height: clamp(560px, 56vw, 820px); overflow: hidden; background: #c9cdd0; }
.banner__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.banner__copy { position: absolute; left: 0; right: 0; top: clamp(56px, 7vw, 104px); text-align: center; padding-inline: var(--gutter); }
.banner__lead { font-family: var(--ff-jp); font-size: clamp(24px, 2.6vw, 38px); letter-spacing: .14em; line-height: 1.7; color: var(--ink); }
.banner__en { margin-top: 14px; font-family: var(--ff-en); font-size: clamp(15px, 1.3vw, 19px); letter-spacing: .12em; color: #3e3c38; }
.sp-br { display: none; }
@media (max-width: 768px) {
  .banner { height: auto; aspect-ratio: 3 / 4; }
  .banner__img { object-position: 52% 30%; }
  .banner__copy { top: 44px; }
  .banner__lead { font-size: 22px; letter-spacing: .1em; }
  .sp-br { display: inline; }
}

/* Banner 調整：PC は空の広い左側にコピーを置き、人物と重ならないようにする */
@media (min-width: 769px) {
  .banner__copy { right: auto; left: max(var(--gutter), calc((100vw - var(--max)) / 2)); top: 50%; transform: translateY(-80%); text-align: left; padding: 0; }
  .banner__img { object-position: 50% 30%; }
}
@media (max-width: 768px) {
  .banner { aspect-ratio: 1200 / 1596; }
  .banner__img { object-position: 50% 0; }
  .banner__copy { top: 36px; }
  /* Icon Item の写真は SP では横長にして、縦の長さを抑える */
  .icon__img { aspect-ratio: 4 / 3; }
  .icon__img img { object-position: 50% 58%; }
}

/* Banner 読みやすさ：PC は左上の空にコピーを2行で置く。文字は濃い色・やや太く、背後にごく薄い白のにじみを敷く */
.banner__lead { font-weight: 500; color: #23221f; text-shadow: 0 0 18px rgba(255, 255, 255, .85), 0 0 4px rgba(255, 255, 255, .6); }
.banner__en { color: #2f2e2b; text-shadow: 0 0 12px rgba(255, 255, 255, .9); }
@media (min-width: 769px) {
  .banner__copy { top: clamp(72px, 8vw, 120px); transform: none; }
  .banner__lead { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.8; }
}

/* 1文字ずつ現れるテキスト（data-split）。ぼかしから輪郭が立ち上がるように、少しずつ遅らせて表示する */
.js .rv:has([data-split]) { opacity: 1; transform: none; }
.split-char { display: inline-block; opacity: 0; filter: blur(8px); transform: translateY(.35em);
  transition: opacity .9s ease, filter .9s ease, transform 1.1s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i) * 70ms + .15s); }
.rv.in .split-char { opacity: 1; filter: none; transform: none; }
/* 動きを減らす設定では、ぼかしと移動はやめて、ふわっと順に現れるだけにする */
@media (prefers-reduced-motion: reduce) { .split-char { filter: none; transform: none; transition: opacity .8s ease; transition-delay: calc(var(--i) * 50ms); } }

/* Banner（PC）：写真の解像度に合わせて全幅にはせず、左にコピー・右に写真を並べる（SP は全幅のまま） */
@media (min-width: 769px) {
  .banner { height: auto; overflow: visible; background: none; display: grid; grid-template-columns: 1fr minmax(0, 600px); gap: clamp(48px, 7vw, 120px); align-items: center;
    max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding: clamp(110px, 12vw, 170px) var(--gutter); }
  .banner picture { order: 2; display: block; }
  .banner__img { position: static; display: block; width: 100%; height: auto; aspect-ratio: 1200 / 1176; object-position: 50% 50%; }
  .banner__copy { position: static; order: 1; transform: none; padding: 0; text-align: left; }
  .banner__lead { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.9; color: var(--ink); text-shadow: none; }
  .banner__en { margin-top: 24px; color: var(--green); text-shadow: none; }
}

/* Worldwide（SP）：写真は切り取らず元の縦横比のまま、隙間なく横にゆっくり流す */
@media (max-width: 768px) {
  .reason__gallery-wrap { margin-top: 32px; margin-inline: calc(var(--gutter) * -1); overflow: hidden; }
  .reason__gallery { display: flex; width: max-content; gap: 0; margin: 0; padding: 0; overflow: visible; scroll-snap-type: none;
    animation: reason-gallery 48s linear infinite; }
  .reason__gallery li { flex: none; width: auto; height: 240px; aspect-ratio: auto; scroll-snap-align: none; }
  .reason__gallery img, .reason__gallery .sp-only img { width: auto; height: 100%; object-fit: contain; object-position: center; }
}
@keyframes reason-gallery { to { transform: translateX(-50%); } }

/* Pick Up：Icon Item のすぐ下に、左右を入れ替えて置く。動画は縦長なので 4:5 に切り取り、幅を抑える */
.icon + .icon--pickup { padding-top: 0; }
@media (min-width: 769px) { .icon--pickup .icon__grid { grid-template-columns: 6fr 5fr; } }
.icon--pickup .icon__img { order: 2; aspect-ratio: 4 / 5; width: 100%; max-width: 460px; justify-self: center; }
.icon__img--video video { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 768px) {
  .icon--pickup .icon__img { order: 4; aspect-ratio: 4 / 5; max-width: none; }
}

/* Visit のリンク：ぼかしガラス（backdrop-filter）は、親を透明から表示させる演出と重なると Safari で一瞬白く光るため、
   リンクの枠は最初から表示し、見出しだけをふわっと出す。ぼかしも専用の層に固定する */
.visit__link { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transform: translateZ(0); }

/* Message の写真：ふわっと出すのではなく、写真のある側から幕を引くように現れる（左の写真は左から、右の写真は右から）。
   文章は少し遅れて下からふわっと出す */
.js .message__row.rv { opacity: 1; transform: none; }
.js .message__row .message__img { clip-path: inset(0 100% 0 0); transform: translateX(-48px); transition: clip-path 1.5s cubic-bezier(.7, 0, .2, 1), transform 1.5s cubic-bezier(.2, .7, .2, 1); }
.js .message__row--rev .message__img { clip-path: inset(0 0 0 100%); transform: translateX(48px); }
.js .message__row .message__img img { transform: scale(1.15); transition: transform 2.2s cubic-bezier(.2, .7, .2, 1); }
.js .message__row .message__text { opacity: 0; transform: translateY(24px); transition: opacity 1.1s ease .45s, transform 1.1s cubic-bezier(.2, .7, .2, 1) .45s; }
.js .message__row.in .message__img { clip-path: inset(0); transform: none; }
.js .message__row.in .message__img img { transform: none; }
.js .message__row.in .message__text { opacity: 1; transform: none; }

/* ---------- Pick Up 動画（イソップのトップのような見せ方） ----------
   縦長の動画を全幅で見せる。PC は動画を中央に置き、左右は同じ場面の静止画を大きくぼかして埋める（引き伸ばして粗くしない）。
   下から暗くして、白い文字とボタンを中央下に重ねる */
.feature-video { position: relative; overflow: hidden; height: clamp(640px, 92vh, 900px); background: #2b2d2c; color: #fff; }
.feature-video__fill { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(36px) brightness(.62) saturate(.8); }
.feature-video__frame { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); aspect-ratio: 9 / 16; height: 100%; }
.feature-video__video { width: 100%; height: 100%; object-fit: cover; display: block; }
.feature-video::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(20, 20, 18, .72) 0%, rgba(20, 20, 18, .4) 34%, rgba(20, 20, 18, 0) 62%); }
.feature-video__copy { position: absolute; z-index: 1; text-shadow: 0 1px 12px rgba(0, 0, 0, .3); left: 0; right: 0; bottom: clamp(48px, 6vw, 80px); text-align: center; padding-inline: var(--gutter); }
.feature-video__eyebrow { font-family: var(--ff-sans); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; opacity: .85; }
.feature-video__title { margin-top: 14px; font-family: var(--ff-en); font-size: clamp(38px, 4vw, 56px); letter-spacing: .03em; line-height: 1.1; }
.feature-video__text { margin-top: 16px; font-size: 14px; letter-spacing: .08em; line-height: 2; opacity: .92; }
.feature-video__btn { margin-top: 28px; display: inline-flex; align-items: center; gap: 14px; padding: 14px 34px; border: 1px solid rgba(255, 255, 255, .75); font-size: 13px; letter-spacing: .16em; color: #fff; transition: background-color .3s, color .3s; }
.feature-video__btn::after { content: ""; width: 22px; height: 1px; background: currentColor; }
.feature-video__btn:hover { background: #fff; color: var(--ink); }
.feature-video__toggle { position: absolute; z-index: 2; left: var(--gutter); bottom: 24px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .6); background: rgba(0, 0, 0, .15); cursor: pointer; display: grid; place-items: center; }
/* 再生中は「一時停止」の二本線、止めているときは「再生」の三角 */
.feature-video__toggle::before { content: ""; width: 10px; height: 12px; border-left: 2px solid #fff; border-right: 2px solid #fff; }
.feature-video__toggle.is-paused::before { width: 0; height: 0; border-style: solid; border-width: 6px 0 6px 10px; border-color: transparent transparent transparent #fff; margin-left: 3px; }
@media (max-width: 768px) {
  .feature-video { height: auto; aspect-ratio: 9 / 16; max-height: 92svh; }
  .feature-video__fill { display: none; }
  .feature-video__frame { left: 0; right: 0; transform: none; width: 100%; aspect-ratio: auto; }
  .feature-video__text br { display: none; }
  .feature-video__toggle { bottom: 16px; width: 36px; height: 36px; }
}

/* ---------- Pick Up 動画（改）：動画の上に文字を重ねず、商品写真と紹介を隣に置く ---------- */
.feature-video { height: auto; overflow: visible; background: var(--bg-2); color: var(--ink); display: grid; grid-template-columns: 1fr 1fr; }
.feature-video::after { display: none; }
.feature-video__fill, .feature-video__frame, .feature-video__copy { display: none; }
.feature-video__media { position: relative; background: #2b2d2c; display: grid; place-items: center; height: clamp(600px, 88vh, 860px); overflow: hidden; }
.feature-video__video { height: 100%; width: auto; aspect-ratio: 9 / 16; object-fit: cover; }
.feature-video__info { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(56px, 6vw, 96px) var(--gutter); }
.feature-video__pack { width: min(300px, 70%); aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; }
.feature-video__eyebrow { margin-top: 28px; font-family: var(--ff-sans); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--green); opacity: 1; }
.feature-video__title { margin-top: 12px; font-family: var(--ff-en); font-size: clamp(38px, 3.6vw, 52px); letter-spacing: .03em; line-height: 1.1; color: var(--green); }
.feature-video__jp { margin-top: 10px; font-size: 13px; letter-spacing: .14em; color: var(--sub); }
.feature-video__text { margin-top: 22px; font-family: var(--ff-body); font-size: 14px; letter-spacing: .06em; line-height: 2; opacity: 1; }
.feature-video__btn { margin-top: 28px; border-color: rgba(95, 117, 109, .55); color: var(--green); }
.feature-video__btn:hover { background: var(--green); color: #fff; }
.feature-video__toggle { left: 20px; bottom: 20px; }
@media (max-width: 768px) {
  .feature-video { grid-template-columns: 1fr; aspect-ratio: auto; max-height: none; }
  /* 幅は常に画面いっぱい。高さは縦長動画の比率から決め、長すぎるときだけ画面の8割で止める */
  .feature-video__media { height: min(calc(100vw * 16 / 9), 80svh); }
  .feature-video__video { width: 100%; height: 100%; aspect-ratio: auto; }
  .feature-video__info { padding: 48px var(--gutter) 64px; }
  .feature-video__pack { width: 56%; }
  .feature-video__text br { display: none; }
}

/* Pick Up（PC）：動画は縦長の比率のまま、枠の高さに合わせた幅で中央に置く（拡大して粗くしない） */
@media (min-width: 769px) {
  .feature-video__video { height: 100%; width: calc(clamp(600px, 88vh, 860px) * 9 / 16); max-width: 100%; }
}
/* About「品質管理」の写真は SP で縦長すぎるので、横長に切り取って短くする */
@media (max-width: 768px) {
  .reason__quality-img { aspect-ratio: 4 / 3; overflow: hidden; }
  .reason__quality-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
}

/* Pick Up（SP）：動画は上下を均等に切り取り、最後のロゴが画面の真ん中に来るようにする */
/* 動画を枠いっぱいに重ねて置く（枠より背の高い動画が上揃えではみ出し、ロゴが下にずれるのを防ぐ） */
@media (max-width: 768px) { .feature-video__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; } }

/* Pick Up（PC）：左に文章（商品写真・見出し・紹介・リンク）、右に 4:5 の枠で動画。背景は地のまま */
@media (min-width: 769px) {
  .feature-video { background: none; grid-template-columns: 5fr 6fr; gap: clamp(48px, 8vw, 120px); align-items: center;
    max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding: clamp(110px, 12vw, 170px) var(--gutter); }
  .feature-video__info { order: 1; align-items: flex-start; text-align: left; padding: 0; }
  .feature-video__media { order: 2; height: auto; aspect-ratio: 4 / 5; width: 100%; max-width: 460px; justify-self: end; background: none; }
  .feature-video__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
  .feature-video__pack { width: 150px; margin-left: -12px; }
  .feature-video__eyebrow { margin-top: 20px; }
  .feature-video__title { margin-top: 20px; font-size: clamp(40px, 4.6vw, 64px); color: var(--ink); letter-spacing: .04em; }
  .feature-video__jp { margin-top: 18px; font-size: 15px; letter-spacing: .18em; color: var(--ink); }
  .feature-video__text { margin-top: 32px; }
}
.feature-video__more { margin-top: 40px; }
@media (max-width: 768px) { .feature-video__more { margin-top: 28px; } }

/* Pick Up：商品写真は動画の左下に重ねた小さなカードにする（文章の上に浮かせない） */
.feature-video__media { overflow: visible; }
.feature-video__pack { position: absolute; z-index: 1; margin: 0; background: #fff; padding: 10px; aspect-ratio: 1; object-fit: contain; mix-blend-mode: normal;
  box-shadow: 0 18px 40px -16px rgba(40, 36, 30, .35); }
@media (min-width: 769px) {
  .feature-video__pack { width: 170px; left: -64px; bottom: 40px; margin-left: 0; }
  .feature-video__eyebrow { margin-top: 0; }
}
@media (max-width: 768px) {
  .feature-video__pack { width: 112px; left: var(--gutter); bottom: -36px; padding: 8px; }
  .feature-video__info { padding-top: 72px; }
}

/* Pick Up：商品写真は商品名のすぐ下に置く（カード表示・動画への重ねはやめる） */
.feature-video__pack { position: static; z-index: auto; background: none; padding: 0; box-shadow: none; mix-blend-mode: multiply; aspect-ratio: 1; object-fit: contain; }
@media (min-width: 769px) { .feature-video__pack { width: 180px; margin: 24px 0 0 -16px; } }
@media (max-width: 768px) { .feature-video__pack { width: 46%; margin: 20px auto 0; } .feature-video__info { padding-top: 48px; } }

/* PC：直前の Pick Up（文章左・動画右）と同じ並びが続かないよう、人物写真のバナーは左右を入れ替えて写真を左に置く */
@media (min-width: 769px) {
  .banner { grid-template-columns: minmax(0, 600px) 1fr; }
  .banner picture { order: 1; }
  .banner__copy { order: 2; padding-left: clamp(0px, 3vw, 40px); }
}
/* Pick Up とバナーが続くときは、間の余白が二重にならないようにバナーの上側を詰める */
@media (min-width: 769px) { .feature-video + .banner { padding-top: clamp(32px, 4vw, 64px); } }
/* 商品写真は余白を切り詰めた縦長の写真にしたので、比率はそのまま、PC では高さで大きさをそろえる */
.feature-video__pack { aspect-ratio: auto; object-fit: contain; }
@media (min-width: 769px) { .feature-video__pack { width: auto; height: 240px; margin: 32px 0 0; } }
@media (max-width: 768px) { .feature-video__pack { width: auto; height: 200px; margin: 24px auto 0; } }
/* Pick Up（PC）：文章と動画を中央に寄せて、間の余白を詰める */
@media (min-width: 769px) {
  .feature-video { grid-template-columns: minmax(0, 540px) minmax(0, 460px); justify-content: center; gap: clamp(56px, 7vw, 120px); }
  .feature-video__media { justify-self: stretch; }
}
/* Pick Up（PC）：商品写真は文章の列の中央に置く */
@media (min-width: 769px) { .feature-video__pack { align-self: center; } }

/* Banner のコピー：1文字ずつ出すのをやめ、表示されたら光の筋が文字の上をキラッと走る（約7秒ごとにもう一度） */
.banner__lead, .banner__en {
  background-image: linear-gradient(105deg, var(--shine-base) 0%, var(--shine-base) 42%, #c8b386 47%, #fffaf0 50%, #c8b386 53%, var(--shine-base) 58%, var(--shine-base) 100%);
  background-size: 300% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.banner__lead { --shine-base: #23221f; }
.banner__en { --shine-base: var(--green); }
.banner__copy.in .banner__lead, .banner__copy.in .banner__en { animation: banner-shine 7s ease-in-out .4s infinite; }
.banner__copy.in .banner__en { animation-delay: .7s; }
@keyframes banner-shine { 0% { background-position: 100% 0; } 22%, 100% { background-position: 0 0; } }
@media (max-width: 768px) { .banner__lead { text-shadow: none; filter: drop-shadow(0 0 10px rgba(255, 255, 255, .7)); } .banner__en { text-shadow: none; } }
/* 文章の列は中身の幅に合わせ、商品写真が見出し・紹介文のまとまりの中央に来るようにする */
@media (min-width: 769px) { .feature-video__info { justify-self: start; width: fit-content; max-width: 100%; } }

/* Craftsmanship の工程写真：まとめてふわっと出すのではなく、01 → 02 → 03 の順にパッ、パッ、パッと現れる */
.js .craft__steps.rv { opacity: 1; transform: none; }
.js .craft__step { opacity: 0; transform: scale(.96); transition: opacity .35s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
.js .craft__steps.in .craft__step { opacity: 1; transform: none; }
.js .craft__steps.in .craft__step:nth-child(2) { transition-delay: .45s; }
.js .craft__steps.in .craft__step:nth-child(3) { transition-delay: .9s; }
/* 商品写真は背景を透過した PNG にしたので、白背景を溶かす合成（multiply）は使わない（Safari で表示の瞬間に白い四角が残るため） */
.feature-video__pack { mix-blend-mode: normal; }
/* キラッとする光を控えめに：白く飛ばさず、文字色が少し明るい金色に移ろう程度の幅広い光にして、表示されたときに一度だけゆっくり流す */
.banner__lead, .banner__en {
  background-image: linear-gradient(100deg, var(--shine-base) 0%, var(--shine-base) 35%, var(--shine-light) 50%, var(--shine-base) 65%, var(--shine-base) 100%);
  background-size: 260% 100%;
}
.banner__lead { --shine-light: #9a8559; }
.banner__en { --shine-light: #b5a37a; }
.banner__copy.in .banner__lead, .banner__copy.in .banner__en { animation: banner-shine-soft 2.6s cubic-bezier(.45, 0, .25, 1) .5s 1 both; }
.banner__copy.in .banner__en { animation-delay: .9s; }
@keyframes banner-shine-soft { from { background-position: 100% 0; } to { background-position: 0 0; } }
/* 光はさらにゆっくり流す（約4.5秒） */
.banner__copy.in .banner__lead, .banner__copy.in .banner__en { animation-duration: 4.5s; }
.banner__copy.in .banner__en { animation-delay: 1.3s; }

/* About MV のコピー：ページを開くと、英字がふわっと出たあと、日本語が1行ずつ左から右へ筆でなぞるように現れる。最後に見出しが出る */
.about-mv__en { animation: mv-fade 1.4s ease .3s both; }
.about-mv__line { display: inline-block; clip-path: inset(0 100% 0 0); animation: mv-wipe 1.8s cubic-bezier(.65, 0, .25, 1) both; }
.about-mv__line:nth-of-type(1) { animation-delay: .9s; }
.about-mv__line:nth-of-type(2) { animation-delay: 1.7s; }
.about-mv__title { animation: mv-fade 1.4s ease 2.9s both; }
@keyframes mv-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes mv-wipe { from { clip-path: inset(0 100% 0 0); filter: blur(4px); } to { clip-path: inset(0 0 0 0); filter: blur(0); } }
/* About MV のコピーを少し速く（全体で約2.5秒） */
.about-mv__en { animation-duration: 1s; animation-delay: .15s; }
.about-mv__line { animation-duration: 1.1s; }
.about-mv__line:nth-of-type(1) { animation-delay: .45s; }
.about-mv__line:nth-of-type(2) { animation-delay: .9s; }
.about-mv__title { animation-duration: 1s; animation-delay: 1.7s; }

/* About の風景写真4枚：左から順に、下から幕が上がるように1枚ずつ「ぬっ」と現れる */
.js .about-photos.rv { opacity: 1; transform: none; }
.js .about-photos img { clip-path: inset(100% 0 0 0); transform: translateY(40px) scale(1.06); transition: clip-path 1.2s cubic-bezier(.7, 0, .2, 1), transform 1.6s cubic-bezier(.2, .7, .2, 1); }
.js .about-photos.in img { clip-path: inset(0); transform: none; }
.js .about-photos.in img:nth-child(2) { transition-delay: .18s; }
.js .about-photos.in img:nth-child(3) { transition-delay: .36s; }
.js .about-photos.in img:nth-child(4) { transition-delay: .54s; }
/* 風景写真は幕を開けるのをやめ、ぼんやりとしたぼかしの中から、1枚ずつ順に浮かび上がるように現れる */
.js .about-photos img { clip-path: none; opacity: 0; filter: blur(18px) saturate(.62) sepia(.12) contrast(.96) brightness(.98); transform: scale(1.05);
  transition: opacity 1.8s ease, filter 2s ease, transform 2.4s cubic-bezier(.2, .7, .2, 1); }
.js .about-photos.in img { opacity: 1; filter: blur(0) saturate(.62) sepia(.12) contrast(.96) brightness(.98); transform: none; }
.js .about-photos.in img:nth-child(2) { transition-delay: .3s; }
.js .about-photos.in img:nth-child(3) { transition-delay: .6s; }
.js .about-photos.in img:nth-child(4) { transition-delay: .9s; }

/* 風景写真は枠（about-photos__item）の中でぼかすので、ぼけた端が枠の外に出て白い線にならない。
   ぼかしている間は写真を大きめにして、にじむ縁を枠の外へ逃がす */
.about-photos__item { overflow: hidden; aspect-ratio: 4 / 5; }
.about-photos__item img { display: block; width: 100%; height: 100%; aspect-ratio: auto; }
.js .about-photos img { transform: scale(1.22); }
.js .about-photos.in img { transform: none; }
.js .about-photos.in .about-photos__item:nth-child(2) img { transition-delay: .3s; }
.js .about-photos.in .about-photos__item:nth-child(3) img { transition-delay: .6s; }
.js .about-photos.in .about-photos__item:nth-child(4) img { transition-delay: .9s; }

/* Product images from the media library carry width/height attributes (for srcset); keep their square box */
.line-nav img { height: auto; }

/* Line description (entered in the admin): right of the line name on PC, under it on phones. ※ notes are smaller */
.line__head .line__desc { grid-column: 2; grid-row: 1 / 3; max-width: 44em; }
.line__desc .body-text { margin-top: 0; font-size: 13px; }
.line__desc > * + * { margin-top: .9em; }
.line__note { font-size: 11px; line-height: 1.8; letter-spacing: .04em; color: var(--sub); }
@media (max-width: 768px) {
  .line__head .line__desc { grid-column: 1; grid-row: auto; margin-top: 20px; }
}

/* Instagram への動線（FAS の Instagram／FAQ／Store の案内にならい、英字・日本語・丸枠のアイコン・ひと言を中央に縦に並べる） */
.follow { padding-block: clamp(80px, 9vw, 120px); background: var(--bg-2); text-align: center; }
.follow__link { display: inline-flex; flex-direction: column; align-items: center; }
.follow__en { font-size: clamp(32px, 3.2vw, 42px); }
.follow__jp { margin-top: 12px; font-size: 12px; letter-spacing: .2em; color: var(--sub); }
.follow__icon { display: grid; place-items: center; width: 64px; height: 64px; margin-top: 30px; border: 1px solid rgba(43, 42, 40, .28); border-radius: 50%; color: var(--ink); transition: background-color .3s, border-color .3s, color .3s; }
.follow__link:hover .follow__icon { background: var(--deep); border-color: var(--deep); color: #fff; }
.follow__desc { margin-top: 30px; font-size: 13px; line-height: 2.1; letter-spacing: .08em; }
@media (max-width: 768px) {
  .follow { padding-block: 72px; }
  .follow__icon { width: 58px; height: 58px; margin-top: 26px; }
  .follow__desc { margin-top: 24px; }
}