@charset "UTF-8";
/* =============================================================
   石橋菜園 ブランドサイト
   デザイン: 明朝×余白×低彩度アースカラー×大判写真×縦書き×散らしコラージュ
   ============================================================= */

/* ---------- デザイントークン（低彩度・暖色アース） ---------- */
:root {
  --color-bg: #e8e4db;          /* 基調(暖かいベージュ) */
  --color-bg-alt: #efeae0;      /* 明るい暖色(交互配置) */
  --color-ink: #4a463c;         /* 本文(暖かいグレーブラウン) */
  --color-heading: #483f31;     /* 見出し(暖かい焦茶) */
  --color-soft: #8d8678;        /* 補助テキスト */
  --color-line: #d4cec2;        /* 罫線 */
  --color-accent: #837c4e;      /* 低彩度オリーブ(石橋ねぎの緑を抑えた earthy) */
  --color-accent-dark: #5b552f; /* 濃オリーブ・テキスト/枠 */
  --color-dark: #3b372e;        /* 濃色面・フッター(暖かい焦茶黒) */
  --color-white: #ffffff;

  --font-serif: "Noto Serif JP", serif;
  --font-sans: "Noto Sans JP", sans-serif;

  --content: 1240px;
}

/* ---------- リセット/ベース ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: hidden; scroll-behavior: smooth; }
:where(section[id], [id]) { scroll-margin-top: 88px; }
body {
  font-family: var(--font-sans);
  color: var(--color-ink);
  background: var(--color-bg);
  line-height: 2.0;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
/* キーボード操作時のフォーカス表示（マウス操作時は出ない） */
a:focus-visible, button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.footer a:focus-visible, .footer button:focus-visible,
.reccon__col--accent a:focus-visible, .reccon__col--accent button:focus-visible { outline-color: var(--color-bg-alt); }

/* ---------- 共通ユーティリティ ---------- */
.container { width: 100%; max-width: var(--content); margin-inline: auto; padding-inline: 40px; }
.section { padding-block: clamp(88px, 13vw, 176px); }   /* たっぷり余白 */

/* 控えめな英字ラベル（Swiss的な罫は使わない） */
.label {
  display: inline-block;
  font-size: 11px; font-weight: 500; letter-spacing: 0.32em;
  color: var(--color-accent-dark);
}
.label--light { color: rgba(255,255,255,.78); }

.sec-title {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(28px, 3.2vw, 42px); letter-spacing: 0.14em;
  line-height: 1.5; color: var(--color-heading); margin-top: 22px;
}
.sec-desc { margin-top: 20px; color: var(--color-soft); font-size: 15px; letter-spacing: 0.05em; line-height: 2; }
.sec-desc a { color: var(--color-accent-dark); border-bottom: 1px solid var(--color-line); padding-bottom: 1px; }

/* ボタン（細め・上品） */
.btn-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-width: 232px; height: 60px; padding: 0 32px;
  border: 1px solid var(--color-accent-dark); border-radius: 999px;
  color: var(--color-accent-dark); font-size: 15px; font-weight: 400; letter-spacing: 0.12em;
  transition: background-color .4s, color .4s;
}
.btn-pill:hover { background: var(--color-accent-dark); color: #fff; }
.btn-pill--light { border-color: rgba(255,255,255,.7); color: #fff; }
.btn-pill--light:hover { background: #fff; color: var(--color-dark); }
.btn-line { display: inline-block; margin-top: 20px; font-size: 14px; letter-spacing: .08em; border-bottom: 1px solid currentColor; padding-bottom: 3px; opacity: .85; }

/* ---------- スクロール連動フェードイン（静かに） ---------- */
.js .reveal { opacity: 0; transform: translateY(14px); }
.reveal.is-visible { animation: fadeUp 1.4s cubic-bezier(.2,.6,.2,1) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .js .reveal, .reveal.is-visible { opacity: 1; transform: none; animation: none; } }

/* =============================================================
   Header
   ============================================================= */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: 84px;
  display: flex; align-items: center; color: #fff;
  transition: background-color .5s ease, color .5s ease, box-shadow .5s ease;
}
.header.is-scrolled { background: rgba(232,228,219,.94); color: var(--color-heading); box-shadow: 0 1px 16px rgba(60,50,30,.07); }
.header__inner { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: 44px; display: flex; align-items: center; justify-content: space-between; }
.header__logo { display: inline-flex; align-items: center; }
.header__logo img {
  height: 38px; width: auto; display: block;
  filter: brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0,0,0,.3));
  transition: filter .5s ease;
}
.header.is-scrolled .header__logo img { filter: none; }
.header__nav ul { display: flex; gap: 30px; }
.header__nav a { font-size: 13.5px; letter-spacing: 0.1em; position: relative; padding-bottom: 4px; }
.header__nav a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: currentColor; transition: width .4s; }
.header__nav a:hover::after { width: 100%; }
.nav-toggle { display: none; }
body.nav-open { overflow: hidden; }

/* =============================================================
   Hero（大判写真で情緒を）
   ============================================================= */
.hero { position: relative; height: 92vh; min-height: 580px; max-height: 880px; overflow: hidden; background: #d8d2c6; }
.hero__slides, .hero__slide { position: absolute; inset: 0; }
.hero__slide { opacity: 0; transition: opacity 2s ease, transform 3s ease; background-size: cover; background-position: center; transform: scale(1.04); }
.hero__slide.is-active { opacity: 1; transform: scale(1); transition: opacity 2s ease, transform 7s ease; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(40,34,22,.18), rgba(40,34,22,0) 34%, rgba(40,34,22,0) 56%, rgba(40,34,22,.42)); }
.hero__copy { position: absolute; z-index: 2; left: max(44px, calc((100% - var(--content)) / 2)); bottom: 16%; color: #fff; }
.hero__sub { font-size: 12px; font-weight: 400; letter-spacing: 0.4em; margin-bottom: 24px; opacity: .92; }
.hero__catch { font-family: var(--font-serif); font-weight: 400; font-size: clamp(32px, 4.6vw, 58px); line-height: 1.6; letter-spacing: 0.14em; text-shadow: 0 1px 3px rgba(0,0,0,.32), 0 2px 16px rgba(0,0,0,.26); }
.hero__brand { margin-top: 26px; font-size: 14px; letter-spacing: 0.16em; opacity: .92; }
.hero__dots { position: absolute; z-index: 3; left: 50%; bottom: 34px; transform: translateX(-50%); display: flex; gap: 16px; }
.hero__dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(255,255,255,.85); background: transparent; cursor: pointer; padding: 0; transition: background-color .4s; }
.hero__dot.is-active { background: #fff; }

/* =============================================================
   Concept（中央・余白を大きく）
   ============================================================= */
.concept { text-align: center; }
.concept__title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(28px, 4vw, 50px); line-height: 1.7; letter-spacing: 0.14em; color: var(--color-heading); margin-top: 26px; }
.concept__lead { font-family: var(--font-serif); font-weight: 400; font-size: clamp(16px, 1.9vw, 21px); line-height: 2.4; letter-spacing: 0.1em; color: var(--color-accent-dark); margin: 42px auto 0; max-width: 760px; }
.concept__intro { margin: 32px auto 0; max-width: 660px; color: var(--color-ink); font-size: 15px; line-height: 2.3; }
.concept__stats { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(32px, 8vw, 96px); margin-top: 70px; padding-top: 54px; border-top: 1px solid var(--color-line); }
.concept__stat { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.concept__num { font-family: var(--font-serif); font-weight: 400; font-size: clamp(30px, 4vw, 44px); color: var(--color-accent-dark); letter-spacing: 0.06em; line-height: 1; }
.concept__num small { font-size: 0.4em; margin-left: 6px; color: var(--color-soft); letter-spacing: 0.1em; }
.concept__cap { font-size: 11px; letter-spacing: 0.26em; color: var(--color-soft); }

/* =============================================================
   Story（想い）— 縦書きキャッチ＋大判写真
   ============================================================= */
.story { background: var(--color-bg-alt); overflow: hidden; }
.story__grid { max-width: 1240px; margin-inline: auto; padding-inline: 40px; display: grid; grid-template-columns: auto minmax(0, 1fr) 1.05fr; grid-template-areas: "catch body media"; column-gap: clamp(40px, 6vw, 84px); align-items: center; }
.story__catch { grid-area: catch; align-self: center; writing-mode: vertical-rl; font-family: var(--font-serif); font-weight: 400; font-size: clamp(26px, 3vw, 40px); letter-spacing: 0.24em; line-height: 1.95; color: var(--color-heading); margin-right: clamp(-44px, -2.8vw, -22px); }
.story__body { grid-area: body; }
.story__media { grid-area: media; }
.story__title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(27px, 2.9vw, 38px); letter-spacing: 0.16em; color: var(--color-heading); margin: 14px 0 28px; }
.story__text { font-size: 15px; line-height: 2.35; margin-bottom: 22px; }
.story__quote { font-family: var(--font-serif); font-weight: 400; font-size: clamp(19px, 2.1vw, 26px); line-height: 1.9; letter-spacing: 0.08em; color: var(--color-accent-dark); margin: 28px 0; }
.story__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; }
/* プロフィール（想いセクションの末尾＝筆者紹介） */
.story__profile { max-width: 1240px; margin: clamp(60px, 8vw, 100px) auto 0; padding: clamp(40px, 5vw, 56px) 40px 0; border-top: 1px solid var(--color-line); display: flex; gap: clamp(28px, 4vw, 48px); align-items: center; }
.story__profile-photo { flex: 0 0 auto; width: clamp(180px, 25vw, 360px); }
.story__profile-photo img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 2px; }
.story__profile-body { flex: 1; }
.story__profile-name { font-family: var(--font-serif); font-weight: 400; font-size: clamp(21px, 2.4vw, 28px); letter-spacing: 0.1em; color: var(--color-heading); margin: 12px 0 6px; }
.story__profile-name span { font-size: 0.48em; letter-spacing: 0.2em; color: var(--color-soft); margin-left: 12px; }
.story__profile-role { font-size: 13px; letter-spacing: 0.08em; color: var(--color-accent-dark); margin-bottom: 16px; }
.story__profile-text { font-size: 14.5px; line-height: 2.15; }

/* =============================================================
   Lineup（商品）— 写真主導・余白多め
   ============================================================= */
.lineup__head { max-width: 740px; margin-bottom: clamp(48px, 7vw, 84px); }
.product__media { position: relative; overflow: hidden; border-radius: 2px; background: #ded7c9; }
.product__media img { width: 100%; height: 100%; object-fit: cover; }
.product__tag { position: absolute; top: 18px; left: 18px; background: rgba(91,85,47,.9); color: #fff; font-size: 11px; letter-spacing: 0.18em; padding: 7px 16px; border-radius: 999px; }
.product__en { font-size: 11px; letter-spacing: 0.3em; color: var(--color-accent); }
.product__name { font-family: var(--font-serif); font-weight: 400; font-size: clamp(27px, 3vw, 38px); letter-spacing: 0.1em; color: var(--color-heading); margin: 14px 0 20px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 16px; }
.product__yomi { font-size: 15px; letter-spacing: 0.14em; color: var(--color-soft); }
.product__desc { font-size: 15px; line-height: 2.2; }
.product--feature { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(36px, 6vw, 80px); align-items: center; margin-bottom: clamp(60px, 9vw, 108px); }
.product--feature .product__media img { aspect-ratio: 5 / 4; }
.lineup__sub { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 72px); }
.product--card { display: flex; flex-direction: column; }
.product--card .product__media { margin-bottom: 28px; }
.product--card .product__media img { aspect-ratio: 4 / 3; }
.product--card .product__name { font-size: clamp(23px, 2.4vw, 29px); margin: 6px 0 14px; }
.product--card .product__desc { font-size: 14.5px; }

/* =============================================================
   Quality（こだわり）
   ============================================================= */
.quality { overflow: hidden; }
.quality__grid { max-width: 1240px; margin-inline: auto; padding-inline: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 88px); align-items: center; }
.quality__title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(27px, 3.2vw, 42px); letter-spacing: 0.14em; color: var(--color-heading); margin: 14px 0 28px; }
.quality__text { font-size: 15px; line-height: 2.35; margin-bottom: 22px; }
.quality__quote { font-family: var(--font-serif); font-weight: 400; font-size: clamp(24px, 3vw, 38px); line-height: 1.7; letter-spacing: 0.08em; color: var(--color-accent-dark); margin: 32px 0; }
.quality__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; }

/* =============================================================
   Message — 全面バナー（暖色オーバーレイ）
   ============================================================= */
.message { position: relative; padding-block: clamp(100px, 15vw, 200px); color: #fff; overflow: hidden; }
.message__bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.message::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(110deg, rgba(45,38,26,.82), rgba(45,38,26,.48)); }
.message__inner { position: relative; z-index: 2; max-width: var(--content); margin-inline: auto; padding-inline: 40px; }
.message__title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(28px, 4.4vw, 52px); line-height: 1.65; letter-spacing: 0.12em; margin: 22px 0 30px; }
.message__text { max-width: 680px; font-size: 15px; line-height: 2.4; color: rgba(255,255,255,.9); }

/* =============================================================
   Buy（お取り扱い）
   ============================================================= */
.buy { background: var(--color-bg-alt); overflow: hidden; }
.buy__grid { max-width: 1240px; margin-inline: auto; padding-inline: 40px; display: grid; grid-template-columns: minmax(0, 400px) 1fr; gap: clamp(40px, 6vw, 84px); align-items: center; }
.buy__media img { width: 100%; max-width: 400px; margin-inline: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 2px; }
.buy__text { font-size: 15px; line-height: 2.2; margin: 16px 0 30px; }
.buy__list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; }
.buy__list li { display: flex; align-items: flex-start; gap: 18px; padding-bottom: 16px; border-bottom: 1px solid var(--color-line); font-size: 14.5px; }
.buy__where { flex: 0 0 auto; min-width: 92px; font-size: 12px; letter-spacing: 0.12em; color: var(--color-accent-dark); border: 1px solid var(--color-accent); padding: 6px 14px; border-radius: 999px; text-align: center; }
.buy__where--brand { background: var(--color-accent-dark); border-color: var(--color-accent-dark); color: #fff; } /* ブランド行を強調 */
.buy__route { flex: 1; line-height: 1.9; }
.buy__channel { display: block; font-weight: 500; font-size: 12px; letter-spacing: 0.06em; color: var(--color-accent-dark); margin-bottom: 1px; }
.buy__note { font-size: 12.5px; color: var(--color-soft); }

/* =============================================================
   Gallery（畑の風景）— 画像を交互にずらす散らし配置
   ============================================================= */
.gallery { background: var(--color-bg); overflow: hidden; padding-top: clamp(100px, 15vw, 240px); padding-bottom: clamp(60px, 10vw, 160px); } /* 上=贅沢／下=やや詰める */
/* 見出しなし・画像のみの編集的な散らしコラージュ（12列グリッド・小さめ画像＋大きめ余白） */
.gallery__collage { position: relative; display: flex; flex-direction: column; align-items: flex-start; max-width: 740px; margin-inline: auto; }
/* 縦書きコピー（PC＝左の余白に縦書き／STORYのcatch系を流用） */
.gallery__catch { position: absolute; top: clamp(-36px, -2.6vw, -16px); right: calc(100% + clamp(24px, 3vw, 56px)); margin: 0; writing-mode: vertical-rl; font-family: var(--font-serif); font-weight: 400; font-size: clamp(20px, 2.1vw, 30px); letter-spacing: 0.26em; line-height: 1; color: var(--color-heading); white-space: nowrap; }
.gallery__fig { margin: 0; overflow: hidden; border-radius: 2px; background: #ded7c9; }
.gallery__fig img { width: 100%; object-fit: cover; display: block; transition: transform .7s ease; }
.gallery__fig:hover img { transform: scale(1.04); }
/* 入場はフェードのみ（動き=transformはスクロールパララックスで制御＝main.js） */
@keyframes galleryFade { from { opacity: 0; } to { opacity: 1; } }
.js .gallery__fig.reveal { opacity: 0; }
.gallery__fig.reveal.is-visible { animation: galleryFade 1.2s ease both; }
@media (prefers-reduced-motion: reduce) { .js .gallery__fig.reveal, .gallery__fig.reveal.is-visible { opacity: 1; animation: none; } }
/* スマホ用：左右から出てくる入場（適用は ≤900px のメディアクエリ内） */
@keyframes gallerySlideL { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes gallerySlideR { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
/* 左右交互＋サイズ差＋大きな縦ずれ＝上から下へギザギザに流す（大きすぎないサイズに調整） */
.gallery__fig--1 { width: 46%; align-self: flex-start; }                                    /* 左 */
.gallery__fig--1 img { aspect-ratio: 4 / 5; }
.gallery__fig--2 { width: 44%; align-self: flex-end;   margin-top: clamp(-110px, -8vw, -64px); } /* 右・下げる */
.gallery__fig--2 img { aspect-ratio: 3 / 2; }
.gallery__fig--3 { width: 36%; align-self: flex-start; margin-top: clamp(-36px, -2.5vw, -16px); } /* 左・小 */
.gallery__fig--3 img { aspect-ratio: 4 / 5; }
.gallery__fig--4 { width: 46%; align-self: flex-end;   margin-top: clamp(-100px, -7vw, -60px); }  /* 右・下げる */
.gallery__fig--4 img { aspect-ratio: 4 / 5; }

/* =============================================================
   Instagram — 整然グリッド（実装はフィードプラグイン想定）
   ============================================================= */
.insta { background: var(--color-bg); }
.insta__head { text-align: center; margin-bottom: clamp(44px, 5.5vw, 66px); }
.insta__grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; max-width: var(--content); margin-inline: auto; }
.insta__item { aspect-ratio: 1 / 1; overflow: hidden; border-radius: 2px; background: #ded7c9; }
.insta__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease, opacity .3s; }
.insta__item:hover img { transform: scale(1.05); opacity: .92; }
.insta__more { text-align: center; margin-top: clamp(36px, 5vw, 56px); }
.insta__note { font-size: 12px; color: var(--color-soft); margin-top: 16px; letter-spacing: 0.04em; line-height: 1.7; }

/* =============================================================
   Recruit / Contact
   ============================================================= */
.reccon { background: var(--color-bg-alt); }
.reccon__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 44px); }
/* 採用カード非表示時：お問い合わせカードを幅広の中央ブロックに */
.reccon__grid--solo { grid-template-columns: minmax(0, 820px); justify-content: center; }
.reccon__col { background: rgba(255,255,255,.5); border: 1px solid var(--color-line); border-radius: 3px; padding: clamp(40px, 4.5vw, 60px); }
.reccon__col--accent { background: var(--color-dark); border-color: var(--color-dark); color: #fff; }
.reccon__title { font-family: var(--font-serif); font-weight: 400; font-size: clamp(24px, 3vw, 34px); letter-spacing: 0.1em; color: var(--color-heading); line-height: 1.6; margin: 18px 0 24px; }
.reccon__col--accent .reccon__title { color: #fff; }
.reccon__text { font-size: 15px; line-height: 2.2; margin-bottom: 20px; }
.reccon__col--accent .reccon__text { color: rgba(255,255,255,.85); }
.reccon__note { font-size: 12.5px; color: var(--color-soft); margin-bottom: 28px; }
.reccon__col--accent .reccon__note { color: rgba(255,255,255,.55); }

/* =============================================================
   Footer
   ============================================================= */
.footer { background: var(--color-dark); color: rgba(255,255,255,.82); }
.footer__inner { max-width: var(--content); margin-inline: auto; padding: clamp(60px, 7vw, 90px) 40px clamp(36px, 4vw, 48px); display: grid; grid-template-columns: 1.2fr 1fr 1.2fr; gap: 48px; }
.footer__logo { height: 44px; width: auto; filter: brightness(0) invert(1); opacity: .92; margin-bottom: 20px; }
.footer__tagline { font-size: 13.5px; letter-spacing: 0.1em; color: rgba(255,255,255,.66); }
.footer__nav ul { display: grid; gap: 13px; }
.footer__nav a { font-size: 13.5px; letter-spacing: 0.08em; color: rgba(255,255,255,.82); transition: opacity .3s; }
.footer__nav a:hover { opacity: .55; }
.footer__nav-toggle { display: none; }
.footer__info { font-size: 13px; line-height: 2; color: rgba(255,255,255,.72); }
.footer__company { color: #fff; margin-bottom: 6px; }
.footer__info a { border-bottom: 1px solid rgba(255,255,255,.28); }
.footer__sns { margin-top: 16px; }
.footer__sns a { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; color: rgba(255,255,255,.82); transition: background .3s, color .3s, border-color .3s; }
.footer__sns a:hover { background: #fff; color: var(--color-dark); border-color: #fff; }
.footer__copy { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 18px; padding: 18px; font-size: 11.5px; letter-spacing: 0.08em; border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.55); }
.footer__legal { color: rgba(255,255,255,.72); transition: color .3s; }
.footer__legal:hover { color: #fff; }
.footer__toptop { color: rgba(255,255,255,.72); letter-spacing: 0.08em; transition: color .3s; }
.footer__toptop:hover { color: #fff; }

/* トップへ戻る：浮くボタン（右下・少しスクロールで出現／全サイズ） */
.to-top { position: fixed; right: clamp(16px, 2vw, 28px); bottom: clamp(16px, 2vw, 28px); z-index: 70; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: rgba(59,55,46,.82); color: #fff; box-shadow: 0 4px 16px rgba(40,34,22,.22); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease, visibility .35s ease, background-color .3s ease; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover, .to-top:active { background: var(--color-accent-dark); }
body.nav-open .to-top { opacity: 0; visibility: hidden; }

/* =============================================================
   Legal / 下層テキストページ（プライバシーポリシー等）
   ーー トップと同じトークン・余白リズムで統一
   ============================================================= */
/* 下層は共通ヘッダーを流用。固定解除（本文と重ねない＝relativeで在来配置）＋常に「スクロール時」の見た目に固定（main.jsのis-scrolledトグルで透明化しないように） */
.legal-page .header { position: relative; background: rgba(232,228,219,.94); color: var(--color-heading); box-shadow: none; }
.legal-page .header__logo img { filter: none; }

/* ヘッダー内「トップへ戻る」リンク */
.legal-back {
  font-size: 13px; letter-spacing: 0.04em; color: var(--color-heading);
  border: 1px solid var(--color-line); border-radius: 999px;
  padding: 9px 20px; white-space: nowrap;
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
.legal-back:hover { background: var(--color-accent-dark); color: #fff; border-color: var(--color-accent-dark); }

.legal { background: var(--color-bg); }
.legal__inner {
  max-width: 820px;                 /* 読みやすい本文幅（散文向けにトップより絞る） */
  margin-inline: auto;
  padding: clamp(56px, 8vw, 96px) 40px clamp(80px, 11vw, 132px);
}
/* お問い合わせ：見出し〜フォームを同じ幅の中央ブロックにし、フォーム右側の余りを解消（文字は左揃えのまま） */
.legal--contact .legal__inner { max-width: 740px; }
.legal--contact .form-wrap .wpcf7-form { max-width: 100%; }

/* 見出し周り */
.legal__eyebrow {
  font-size: 11px; font-weight: 500; letter-spacing: 0.32em;
  color: var(--color-accent-dark); margin-bottom: 16px;
}
.legal__title {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(28px, 4vw, 46px); line-height: 1.5; letter-spacing: 0.14em;
  color: var(--color-heading); margin-bottom: 18px;
}
/* 見出し直下の説明文（contact / 404 で使用） */
.legal__desc {
  font-size: 15px; line-height: 2.0; color: var(--color-ink);
  max-width: 640px; margin-bottom: clamp(30px, 4vw, 40px);
}
.legal__updated {
  font-size: 13px; letter-spacing: 0.05em; color: var(--color-soft);
  margin-bottom: clamp(30px, 4vw, 40px);
}

/* 注記（仮内容バナー） */
.legal__note {
  background: var(--color-bg-alt); border: 1px solid var(--color-line); border-radius: 3px;
  padding: 18px 24px; font-size: 14px; line-height: 1.95; color: var(--color-ink);
  margin-bottom: clamp(48px, 7vw, 76px);
}

/* 本文 */
.legal__body h2 {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(21px, 2.8vw, 28px); line-height: 1.6; letter-spacing: 0.08em;
  color: var(--color-heading);
  margin: clamp(48px, 6vw, 64px) 0 20px;
  padding-bottom: 14px; border-bottom: 1px solid var(--color-line);
}
.legal__body h2:first-child { margin-top: 0; }
.legal__body h3 {
  font-family: var(--font-serif); font-weight: 500;
  font-size: 18px; letter-spacing: 0.06em; color: var(--color-heading);
  margin: 30px 0 10px;
}
.legal__body p { font-size: 15px; line-height: 2.15; color: var(--color-ink); margin-bottom: 18px; }
.legal__body ul { padding-left: 1.4em; margin-bottom: 20px; }
.legal__body li { font-size: 15px; line-height: 2.1; margin-bottom: 8px; }
.legal__body a,
.legal__desc a {
  color: var(--color-accent-dark);
  border-bottom: 1px solid var(--color-line); padding-bottom: 1px; word-break: break-all;
}
.legal__body > *:last-child { margin-bottom: 0; }

/* 特商法表記の定義リスト（項目名｜内容の2列。狭い画面では縦積み） */
.legal__dl { display: grid; grid-template-columns: 190px 1fr; border-top: 1px solid var(--color-line); margin-bottom: 44px; }
.legal__dl dt { font-size: 14px; font-weight: 500; line-height: 1.9; color: var(--color-heading); padding: 18px 20px 18px 0; border-bottom: 1px solid var(--color-line); }
.legal__dl dd { font-size: 15px; line-height: 2.05; color: var(--color-ink); padding: 18px 0; border-bottom: 1px solid var(--color-line); }
.legal__small { font-size: 13px; color: var(--color-soft); }
.legal__flow { padding-left: 1.3em; margin-bottom: 0; }
.legal__flow li { font-size: 15px; line-height: 2.1; margin-bottom: 10px; }
@media (max-width: 640px) {
  .legal__dl { grid-template-columns: 1fr; }
  .legal__dl dt { padding: 16px 0 0; border-bottom: none; }
  .legal__dl dd { padding: 4px 0 16px; }
  .legal__dl dt br { display: none; }
}

/* 下層フッター（簡易・トップのフッターと同トーン） */
.legal-footer { background: var(--color-dark); color: rgba(255,255,255,.82); }
.legal-footer__inner {
  max-width: var(--content); margin-inline: auto;
  padding: clamp(48px, 6vw, 64px) 40px;
  display: flex; flex-wrap: wrap; gap: 24px 48px;
  align-items: flex-start; justify-content: space-between;
}
.legal-footer__company { font-family: var(--font-serif); font-size: 16px; letter-spacing: 0.06em; color: #fff; margin-bottom: 8px; }
.legal-footer__address { font-size: 13px; line-height: 1.9; color: rgba(255,255,255,.66); }
.legal-footer__links { display: flex; gap: 28px; align-items: center; }
.legal-footer__links a { font-size: 13px; letter-spacing: 0.06em; color: rgba(255,255,255,.82); transition: opacity .3s; }
.legal-footer__links a:hover { opacity: .55; }
.legal-footer__copy { display: block; text-align: center; padding: 18px; font-size: 11.5px; letter-spacing: 0.08em; border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.55); }

/* お問い合わせフォーム（contact.html・CF7想定のHTML雛形） */
.form { max-width: 660px; margin-top: clamp(28px, 4vw, 44px); }
.form__row { margin-bottom: clamp(18px, 2.6vw, 26px); }
.form__row--2col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 26px); }
.form__label { display: block; font-size: 14px; letter-spacing: 0.04em; color: var(--color-heading); margin-bottom: 8px; }
.form__req { font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em; color: #fff; background: var(--color-accent-dark); padding: 2px 9px; border-radius: 999px; margin-left: 8px; vertical-align: 2px; }
.form__opt { font-size: 10.5px; letter-spacing: 0.1em; color: var(--color-soft); border: 1px solid var(--color-line); padding: 2px 9px; border-radius: 999px; margin-left: 8px; vertical-align: 2px; }
.form__input { width: 100%; font-family: inherit; font-size: 15px; line-height: 1.6; color: var(--color-ink); background: #fff; border: 1px solid var(--color-line); border-radius: 3px; padding: 12px 14px; transition: border-color .3s, box-shadow .3s; }
.form__input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(131,124,78,.12); }
.form__textarea { resize: vertical; min-height: 150px; line-height: 1.9; }
.form__select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5l5-5' fill='none' stroke='%235b552f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
.form__privacy { font-size: 13px; line-height: 1.9; color: var(--color-soft); margin: 4px 0 26px; }
.form__privacy a { color: var(--color-accent-dark); border-bottom: 1px solid var(--color-line); padding-bottom: 1px; }
.form__submit { min-width: 280px; }
/* =============================================================
   レスポンシブ
   - 768px（タブレット）：PC配置を維持。ナビをハンバーガー化し、文字をほどほどに縮小
   - 420px（スマホ）：横並び（2カラム）を縦積み（1カラム）に切り替え
   ============================================================= */

/* ---------- タブレット：PC配置を維持＋ナビをハンバーガー化＋文字をほどほど縮小 ---------- */
@media (max-width: 768px) {
  /* ナビ → ハンバーガー */
  .nav-toggle { display: flex; flex-direction: column; justify-content: space-between; width: 30px; height: 18px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; z-index: 60; }
  .nav-toggle__bar { display: block; width: 100%; height: 2px; background: #fff; border-radius: 2px; transition: transform .35s ease, opacity .25s ease, background-color .4s ease; }
  .header.is-scrolled .nav-toggle__bar, .header.is-open .nav-toggle__bar { background: var(--color-heading); }
  .header.is-open .nav-toggle__bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .header.is-open .nav-toggle__bar:nth-child(2) { opacity: 0; }
  .header.is-open .nav-toggle__bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  /* ロゴを中央／ハンバーガーは右（index・privacy共通ヘッダー） */
  .header__inner { justify-content: flex-end; }
  .header__logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 60; }
  .header.is-open .header__logo img { filter: none; }
  .header__nav { position: fixed; inset: 0; background: var(--color-bg); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .45s ease, visibility .45s ease; z-index: 55; }
  .header.is-open .header__nav { opacity: 1; visibility: visible; pointer-events: auto; }
  .header__nav ul { flex-direction: column; align-items: center; gap: clamp(20px, 4.5vh, 36px); }
  .header__nav a { font-family: var(--font-serif); font-size: 21px; letter-spacing: 0.12em; color: var(--color-heading); padding-bottom: 6px; }
  .header__nav a::after { background: var(--color-accent); height: 1px; }
  /* 2カラムが狭まる分、本文をほどほどに縮小して可読性を確保（配置はPCのまま維持） */
  .story__text, .quality__text, .message__text { font-size: 14.5px; }
  /* お取り扱い：画像が400px固定だとテキストが窮屈なため、タブレットでは画像幅を縮小 */
  .buy__grid { grid-template-columns: minmax(0, 280px) 1fr; }
  /* Instagram：6列はサムネが小さすぎるため、タブレット以下は3列に統一（420pxでも継承） */
  .insta__grid { grid-template-columns: repeat(3, 1fr); }
  /* gallery：縦書きキャッチを横書き・セクション上部中央（タイトル風）へ。コラージュ配置は維持し左右余白を他セクションと統一 */
  .gallery { padding-inline: 40px; }
  .gallery__catch { position: static; right: auto; top: auto; writing-mode: horizontal-tb; align-self: center; width: 100%; margin: 0 0 clamp(24px, 4vw, 44px); text-align: center; white-space: normal; font-size: clamp(21px, 5.6vw, 30px); letter-spacing: 0.16em; line-height: 1.6; }
  /* story：本文を上に全幅、その下に「縦書きキャッチ｜画像」を2カラム配置（長文セクションのバランス対策） */
  .story__grid { grid-template-columns: 1fr 56px minmax(0, 320px) 1fr; grid-template-areas: "body body body body" ". catch media ."; align-items: start; column-gap: clamp(16px, 2.5vw, 28px); row-gap: clamp(28px, 4vw, 44px); }
  .story__catch { align-self: start; justify-self: center; margin-right: 0; }
  /* quality：長文のため768で1カラム化（画像を上に） */
  .quality__grid { grid-template-columns: 1fr; }
  .quality__media { order: -1; }
}
/* ---------- スマホ：横並び（2カラム）を縦積み（1カラム）に切り替え ---------- */
@media (max-width: 420px) {
  /* 2カラム → 1カラム（横→縦） */
  .buy__grid, .product--feature, .lineup__sub, .reccon__grid, .footer__inner { grid-template-columns: 1fr; }
  /* ギャラリー：コラージュ → 縦積み（写真が左右交互にスライドイン）。左右余白を統一（キャッチは768ブロックで横書き・上部中央化済＝継承） */
  .gallery { padding-inline: 24px; }
  .gallery__collage { gap: clamp(16px, 4vw, 24px); max-width: 100%; }
  .gallery__fig--1, .gallery__fig--2, .gallery__fig--3, .gallery__fig--4 { width: 100%; align-self: stretch; margin-top: 0; }
  .gallery__fig--1.reveal.is-visible, .gallery__fig--3.reveal.is-visible { animation: gallerySlideL 1s cubic-bezier(.2,.6,.2,1) both; }
  .gallery__fig--2.reveal.is-visible, .gallery__fig--4.reveal.is-visible { animation: gallerySlideR 1s cubic-bezier(.2,.6,.2,1) both; }
  @media (prefers-reduced-motion: reduce) {
    .gallery__fig--1.reveal.is-visible, .gallery__fig--2.reveal.is-visible, .gallery__fig--3.reveal.is-visible, .gallery__fig--4.reveal.is-visible { animation: none; opacity: 1; }
  }
  /* 縦積み時の間隔・順序（画像を上に） */
  .footer__inner { gap: 32px; }
  .quality__media, .buy__media { order: -1; }
  .story__profile { flex-direction: column; align-items: flex-start; }
  /* 左右の余白 */
  .container, .story__grid, .quality__grid, .buy__grid, .message__inner, .story__profile, .footer__inner { padding-inline: 24px; }
  .header__inner { padding-inline: 24px; }
  .legal__inner, .legal-footer__inner { padding-inline: 24px; }
  .hero__copy { left: 24px; right: 24px; }
  /* Instagram：768pxブロックの3列指定をそのまま継承（2列指定は廃止し統一） */
  /* フォントサイズ（スマホ：本格縮小） */
  .concept__title { font-size: 24px; }
  .story__text, .quality__text { font-size: 14px; }
  .story__profile-photo { align-self: center; } /* スマホはプロフィール画像を中央寄せ */
  .story__quote, .quality__quote { font-size: 16px; }
  .message__text { font-size: 14px; }
  /* フォーム：2列 → 1列 */
  .form__row--2col { grid-template-columns: 1fr; }
  .form__submit { width: 100%; min-width: 0; }
  /* フッターメニュー＝アコーディオン */
  .footer__nav-toggle { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 14px 0; background: none; border: 0; border-top: 1px solid rgba(255,255,255,.14); border-bottom: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.82); font-family: inherit; font-size: 13.5px; letter-spacing: 0.1em; cursor: pointer; }
  .footer__nav-toggle::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .3s ease; margin-bottom: 3px; }
  .footer__nav.is-open .footer__nav-toggle::after { transform: rotate(-135deg); margin-bottom: -3px; }
  .footer__nav-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s ease; }
  .footer__nav.is-open .footer__nav-panel { grid-template-rows: 1fr; }
  .footer__nav-panel > ul { overflow: hidden; min-height: 0; }
  .footer__nav.is-open .footer__nav-panel > ul { padding-top: 14px; }
  /* Instagram アイコンを中央配置 */
  .footer__sns { text-align: center; }
}

/* ============ Contact Form 7 互換 ============ */
/* CF7は <form class="wpcf7-form"> を出力するため .form の代わりに適用 */
.form-wrap .wpcf7-form {
  max-width: 660px;
  margin-top: clamp(28px, 4vw, 44px);
}
/* CF7がラベル直後に挿入する <br> を消す（ラベルとinputの間の余白を詰める） */
.form-wrap .wpcf7-form br { display: none; }
/* CF7が各行を <p> でラップするため既定マージンをリセット（行間は .form__row が管理） */
.form-wrap .wpcf7-form .form__row p,
.form-wrap .wpcf7-form .form__actions p { margin: 0; }
/* ラベル直下の余白（label の margin-bottom のみで制御） */
.form-wrap .wpcf7-form .form__label { margin-bottom: 6px; }
/* honeypot（スパム対策）を視覚的に隠す＝人間には見せず画面外へ。ボットはHTML解析で入力するため検知は機能する */
.form-wrap [data-cf7apps-honeypot] {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
}
/* CF7のスパム警告テキストをリセット */
.form-wrap .wpcf7-not-valid-tip {
  font-size: 12px;
  color: #c0392b;
  margin-top: 4px;
}
.form-wrap .wpcf7-response-output {
  font-size: 14px;
  margin: 16px 0 0;
  padding: 12px 16px;
  border-radius: 4px;
}
/* 送信成功 */
.form-wrap .wpcf7-mail-sent-ok {
  background: #f0f7f0;
  border-color: #4caf50;
  color: #2e7d32;
}
/* 送信失敗 */
.form-wrap .wpcf7-mail-sent-ng,
.form-wrap .wpcf7-validation-errors {
  background: #fff5f5;
  border-color: #e57373;
  color: #c62828;
}
/* ラジオ（お問い合わせ種別・領収書）＝横並び。狭い画面では自然に折り返す */
.form-wrap .wpcf7-radio { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.form-wrap .wpcf7-list-item { margin: 0; }
.form-wrap .wpcf7-list-item label { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; line-height: 1.6; color: var(--color-ink); cursor: pointer; }
.form-wrap .wpcf7-list-item input[type="radio"] { flex: 0 0 auto; width: 17px; height: 17px; accent-color: var(--color-accent-dark); cursor: pointer; }
/* 入力欄の下に添える補足（数量の下限・納期の目安など） */
.form__note { font-size: 12.5px; line-height: 1.8; color: var(--color-soft); margin-top: 6px; }
/* 通信販売の項目群（Conditional Fields のグループ）＝罫線で括って「条件付きの区画」だと分かるようにする */
.form-wrap .wpcf7cf-group {
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  padding: clamp(20px, 2.6vw, 28px) 0;
  margin-bottom: clamp(18px, 2.6vw, 26px);
}
.form__group-note { font-size: 13px; letter-spacing: 0.04em; color: var(--color-accent-dark); margin-bottom: clamp(16px, 2.2vw, 22px); }