@charset "UTF-8";
/* ==========================================================================
   合同会社YK PEOPLE コーポレートサイト
   style.css  —  CSSはこの1枚のみ（要件定義書 v2.1 / 8章）
   16進数の直書きは :root の定義部のみ。以降はすべて var() を使うこと。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. トークン
   -------------------------------------------------------------------------- */
:root{
  /* 色（要件定義書 2.2） */
  --cream:      #FAF6EC;
  --cream-alt:  #F3EDE0;
  --white:      #FFFFFF;
  --green:      #1B3A2B;
  --green-deep: #12271D;
  --gold:       #C0A05C;
  --gold-dark:  #7D6229;  /* 明地の小さな金文字は必ずこちら（cream地 5.33:1） */
  --ink:        #2E2A24;
  --ink-soft:   #5C574E;

  /* 細罫（面の境界にのみ使用） */
  --line-light: #E4DCC9;  /* クリーム / 白地の上 */
  --line-green: #34523F;  /* 濃緑地の上 */

  /* スペーシング（8px基数） */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 48px;
  --sp-6: 64px;
  --sp-7: 96px;
  --sp-8: 128px;

  /* 書体 */
  --font-heading: "Shippori Mincho B1", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-body:    "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-en:      "Cormorant Garamond", "Times New Roman", serif;
  --font-script:  "Parisienne", cursive;

  /* 寸法 */
  --header-h: 76px;
  --container: 1200px;
  --radius: 2px;
}

/* --------------------------------------------------------------------------
   2. リセットと基本
   -------------------------------------------------------------------------- */
*,
*::before,
*::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1rem;            /* 16px — 本文は15px未満にしない */
  font-weight:400;
  line-height:2.0;
  line-break:strict;
}

img,
svg{ display:block; max-width:100%; }
img{ height:auto; }

a{ color:inherit; }

ul,
ol{ margin:0; padding:0; list-style:none; }

p{ margin:0 0 1.4em; }
p:last-child{ margin-bottom:0; }

h1,
h2,
h3,
h4{
  margin:0;
  font-family:var(--font-heading);
  font-weight:600;
  line-height:1.6;
  letter-spacing:0.04em;
  text-wrap:balance;
}
h1{ font-size:clamp(1.9rem, 1.1rem + 3.4vw, 3.4rem); }
h2{ font-size:clamp(1.5rem, 1.15rem + 1.4vw, 2.1rem); }
h3{ font-size:clamp(1.15rem, 1.02rem + 0.6vw, 1.45rem); }
h4{ font-size:1.0625rem; font-weight:500; }

:focus-visible{
  outline:2px solid var(--gold-dark);
  outline-offset:3px;
}

/* 濃緑地では --gold-dark が 2.16:1 と不足するため --gold に切り替える */
.site-header .shop-link:focus-visible,
.site-footer :focus-visible,
.shop-card :focus-visible{ outline-color:var(--gold); }

/* 固定ヘッダーの下にアンカー先（products.html#jam など）が潜らないようにする */
[id]{ scroll-margin-top:calc(var(--header-h) + var(--sp-3)); }

.skip-link{
  position:absolute;
  left:var(--sp-2);
  top:-100px;
  z-index:100;
  padding:var(--sp-1) var(--sp-3);
  background:var(--green);
  color:var(--cream);
  font-family:var(--font-heading);
  font-size:0.9375rem;
  text-decoration:none;
}
.skip-link:focus{ top:var(--sp-2); }

.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  border:0;
  clip-path:inset(50%);
  overflow:hidden;
  white-space:nowrap;
}

/* --------------------------------------------------------------------------
   3. 共通パーツ
   -------------------------------------------------------------------------- */
.container{
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:var(--sp-3);
}

.section{ padding-block:var(--sp-7); }
.section--tight{ padding-block:var(--sp-6); }
.section--alt{ background:var(--cream-alt); }

@media (min-width:1200px){
  .section{ padding-block:var(--sp-8); }
  .section--tight{ padding-block:var(--sp-7); }
}

/* eyebrow：明地は --gold-dark、濃緑地は --gold（2.2節の実測値による） */
.eyebrow{
  display:block;
  margin:0 0 var(--sp-1);
  font-family:var(--font-en);
  font-weight:600;
  font-size:0.75rem;
  letter-spacing:0.2em;
  line-height:1.4;
  text-transform:uppercase;
  color:var(--gold-dark);
}
.eyebrow--on-green{ color:var(--gold); }

/* セクション見出し：中央揃え＋下の短い金罫 */
.section-head{
  margin:0 0 var(--sp-6);
  text-align:center;
}
.section-head h1::after,
.section-head h2::after{
  content:"";
  display:block;
  width:40px;
  height:1px;
  margin:var(--sp-3) auto 0;
  background:var(--gold);
}

.lead{
  max-width:36em;
  font-size:1.0625rem;
}

/* 中央揃えの section-head の直下に本文を置くとき、36emの段を中央に寄せる
   （文字組み自体は左揃えのまま） */
.prose--center > *{ margin-inline:auto; }

/* セクション内の小見出し。section-head より一段小さい扱い */
.sub-head{
  margin:var(--sp-6) 0 var(--sp-3);
  text-align:center;
}

.prose p,
.prose li{ max-width:36em; }
.prose h3{ margin:var(--sp-5) 0 var(--sp-2); }
.prose h3:first-child{ margin-top:0; }

.note{
  margin-top:var(--sp-4);
  padding-top:var(--sp-3);
  border-top:1px solid var(--line-light);
  color:var(--ink-soft);
  font-size:0.9375rem;
}

/* 線画イラスト（2.5） */
.line-art{
  fill:none;
  stroke:var(--gold);
  stroke-width:1.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ボタン（2.6：ホバーは色の変化のみ。拡大・回転・影は変化させない） */
.btn{
  display:inline-flex;
  align-items:center;
  gap:0.9em;
  padding:14px 28px;
  border:1px solid transparent;
  border-radius:var(--radius);
  font-family:var(--font-heading);
  font-size:0.9375rem;
  font-weight:500;
  letter-spacing:0.06em;
  line-height:1.5;
  text-decoration:none;
  transition:background-color .3s ease, color .3s ease, border-color .3s ease;
}
.btn .arrow{ font-family:var(--font-en); }
.btn .cart-icon{ flex:0 0 auto; width:20px; height:20px; }

.btn--solid{ background:var(--green); border-color:var(--green); color:var(--cream); }
.btn--solid:hover{ background:var(--green-deep); border-color:var(--green-deep); }

.btn--outline{ background:transparent; border-color:var(--gold); color:var(--ink); }
.btn--outline:hover{ border-color:var(--gold-dark); color:var(--gold-dark); }

/* 濃緑カードの上に置く枠線ボタン。濃緑地では --gold-dark が 2.16:1 と不足するため
   枠と文字に --gold（4.99:1）を使い、ホバーでは --cream（11.54:1）へ変える。 */
.btn--gold{ background:transparent; border-color:var(--gold); color:var(--gold); }
.btn--gold:hover{ border-color:var(--cream); color:var(--cream); }

/* --------------------------------------------------------------------------
   4. ヘッダー
   -------------------------------------------------------------------------- */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--white);
  border-bottom:1px solid var(--line-light);
}

.header-bar{
  display:flex;
  align-items:stretch;
  min-height:var(--header-h);
}

.brand{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  padding-inline:var(--sp-3);
  color:var(--ink);
  text-decoration:none;
}
.brand .crest{ flex:0 0 auto; }
/* 紋章はロゴ画像（透過WebP）。濃緑のフッター上では緑の線が沈むため少し明るくする。 */
img.crest{ display:block; object-fit:contain; }
.footer-brand .crest{ filter:brightness(1.22) saturate(1.08); }
.brand-text{ display:flex; flex-direction:column; justify-content:center; }
.brand-ja{
  font-family:var(--font-heading);
  font-weight:500;
  font-size:1.0625rem;
  letter-spacing:0.04em;
  line-height:1.4;
  white-space:nowrap;
}
.brand-en{
  font-family:var(--font-en);
  font-weight:500;
  font-size:0.75rem;
  letter-spacing:0.18em;
  line-height:1.4;
  text-transform:uppercase;
  color:var(--ink-soft);
  white-space:nowrap;
}

.gnav{
  flex:1 1 auto;
  display:flex;
  align-items:center;
  justify-content:center;
}
.gnav-list{
  display:flex;
  align-items:center;
  gap:clamp(12px, 1.6vw, 26px);
}
.gnav-list a{
  position:relative;
  display:block;
  padding:6px 2px;
  color:var(--ink);
  font-family:var(--font-heading);
  font-size:0.9375rem;
  font-weight:500;
  letter-spacing:0.04em;
  line-height:1.6;
  white-space:nowrap;
  text-decoration:none;
  transition:color .3s ease;
}
.gnav-list a:hover,
.gnav-list a[aria-current="page"]{ color:var(--gold-dark); }
.gnav-list a[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:var(--gold);
}

/* オンラインショップ：ヘッダーの高さいっぱいの矩形。右端まで届かせるため
   .header-bar に右paddingを置かず、これを最後のフレックス項目にしている。 */
.shop-link{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  padding-inline:var(--sp-4);
  background:var(--green);
  color:var(--cream);
  text-decoration:none;
  transition:background-color .3s ease;
}
.shop-link:hover{ background:var(--green-deep); }
.shop-link .cart-icon{ flex:0 0 auto; width:22px; height:22px; }
.shop-text{ display:flex; flex-direction:column; justify-content:center; }
.shop-ja{
  font-family:var(--font-heading);
  font-weight:500;
  font-size:0.9375rem;
  letter-spacing:0.04em;
  line-height:1.4;
  white-space:nowrap;
}
.shop-en{
  display:flex;
  align-items:center;
  gap:0.6em;
  font-family:var(--font-en);
  font-weight:600;
  font-size:0.8125rem;
  letter-spacing:0.2em;
  line-height:1.4;
  text-transform:uppercase;
  white-space:nowrap;
}
.shop-en .bar{ width:26px; height:1px; background:var(--gold); }
.shop-link .arrow{ font-family:var(--font-en); font-size:1rem; }

/* ハンバーガー */
.nav-toggle{
  flex:0 0 auto;
  display:none;
  align-items:center;
  justify-content:center;
  width:56px;
  margin:0;
  padding:0;
  border:0;
  border-left:1px solid var(--line-light);
  background:var(--white);
  color:var(--ink);
  cursor:pointer;
}
.nav-toggle .bars{ display:block; width:22px; }
.nav-toggle .bars span{
  display:block;
  height:1px;
  background:var(--ink);
  transition:transform .3s ease, opacity .3s ease;
}
.nav-toggle .bars span + span{ margin-top:6px; }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .bars span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav-drawer{
  background:var(--white);
  border-top:1px solid var(--line-light);
}
.nav-drawer[hidden]{ display:none; }
.nav-drawer a{
  display:block;
  padding:14px var(--sp-3);
  color:var(--ink);
  font-family:var(--font-heading);
  font-weight:500;
  font-size:1rem;
  letter-spacing:0.04em;
  text-decoration:none;
}
.nav-drawer li + li a{ border-top:1px solid var(--line-light); }
.nav-drawer a[aria-current="page"]{ color:var(--gold-dark); }

/* --------------------------------------------------------------------------
   5. ヒーロー（画面端まで届く2分割）
   -------------------------------------------------------------------------- */
.hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  background:var(--cream);
}
.hero-body{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(48px, 6vw, 104px) clamp(24px, 4.5vw, 80px);
}
/* h1のグローバル定義 clamp(1.9rem, 1.1rem + 3.4vw, 3.4rem) はビューポート全幅を前提に
   しているため、幅が半分のヒーロー左カラムでは 1300px 付近で「北海道・夕張から、」が
   折り返し、要件の2行が崩れる。最小値・最大値は要件定義書のまま、傾きだけを
   カラム幅（約50vw）に合わせて緩めている。 */
.hero-body h1{
  margin-bottom:var(--sp-4);
  font-size:clamp(1.9rem, 0.85rem + 2.3vw, 3.4rem);
}
.hero-body p{ max-width:32em; }
.hero-script{
  margin-top:var(--sp-5);
  color:var(--gold);
  font-family:var(--font-script);
  font-size:clamp(1.5rem, 0.9rem + 2.2vw, 2.6rem);
  line-height:1.5;
}
.hero-script span{ display:block; }
.hero-script span + span{ margin-left:2.4em; }

.hero-figure{
  position:relative;
  min-height:380px;
  background:var(--cream-alt);
}
.hero-figure img{ width:100%; height:100%; object-fit:cover; }

/* --------------------------------------------------------------------------
   6. 私たちについて（画面端まで届く2分割）
   -------------------------------------------------------------------------- */
.about-split{ display:grid; grid-template-columns:1fr 1fr; }

.about-figure{
  position:relative;
  min-height:360px;
  background:var(--cream-alt);
}
.about-figure img{ width:100%; height:100%; object-fit:cover; }

.about-panel{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(40px, 4.5vw, 80px) clamp(24px, 4vw, 72px);
  background:var(--cream-alt);
}

/* 線画は背面の透かし。本文と衝突させないため中身を z-index:1 に上げる（v2.1） */
.about-panel > *{ position:relative; z-index:1; }
.about-panel .deco-melon{
  position:absolute;
  right:clamp(8px, 2vw, 40px);
  bottom:var(--sp-3);
  z-index:0;
  width:clamp(150px, 17vw, 250px);
  opacity:0.4;
  pointer-events:none;
}
.about-panel h2{ margin-bottom:var(--sp-3); }
.about-panel .btn{ align-self:flex-start; margin-top:var(--sp-3); }

/* --------------------------------------------------------------------------
   7. 商品紹介
   -------------------------------------------------------------------------- */
.product-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:var(--sp-4);
}
.product-card{
  display:grid;
  grid-template-columns:1fr 1fr;
  overflow:hidden;
  border-radius:var(--radius);
  background:var(--cream-alt);
}
.product-card__media{ min-height:240px; background:var(--cream-alt); }
.product-card__media img{ width:100%; height:100%; object-fit:cover; }
.product-card__body{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:var(--sp-4) var(--sp-3);
}
/* 商品名（8文字）が語中で折り返さないよう、カード内では見出しを固定サイズにする */
.product-card__body h3{ margin-bottom:var(--sp-2); font-size:1.25rem; }
.product-card__body p{ font-size:0.9375rem; }
.product-card__body .btn{ align-self:flex-start; margin-top:var(--sp-2); }

/* --------------------------------------------------------------------------
   8. オンラインショップ＋2カード
   -------------------------------------------------------------------------- */
.shop-row{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:var(--sp-4);
  align-items:stretch;
}
.shop-card{
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  overflow:hidden;
  border-radius:var(--radius);
  background:var(--green);
  color:var(--cream);
}
.shop-card__body{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:var(--sp-5) var(--sp-4);
}
/* 「オンラインショップ」9文字が語中で折り返さないサイズに抑える */
.shop-card__body h2{ margin-bottom:var(--sp-2); font-size:clamp(1.35rem, 1.1rem + 0.9vw, 1.75rem); }
.shop-card__body p{ font-size:0.9375rem; }
.shop-card__body .btn{ align-self:flex-start; margin-top:var(--sp-2); }
.shop-card__media{ min-height:220px; background:var(--green-deep); }
.shop-card__media img{ width:100%; height:100%; object-fit:cover; }

.mini-cards{
  display:grid;
  grid-template-columns:1fr 1fr;
  border-radius:var(--radius);
  background:var(--cream-alt);
}
.mini-card{
  display:flex;
  flex-direction:column;
  padding:var(--sp-4) var(--sp-3);
}
.mini-card + .mini-card{ border-left:1px solid var(--gold); }
.mini-card h3{ margin-bottom:var(--sp-2); }
.mini-card p{ font-size:0.9375rem; }
.mini-card .btn{ align-self:flex-start; }
.mini-card__icon{
  align-self:flex-end;
  margin-top:var(--sp-4);
  width:clamp(84px, 9vw, 118px);
  opacity:0.75;
}

/* --------------------------------------------------------------------------
   9. CONTACT帯
   -------------------------------------------------------------------------- */
.contact-band{
  padding-block:var(--sp-5);
  background:var(--cream-alt);
}
.contact-band__inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-4);
  flex-wrap:wrap;
}
.contact-band__icon{ flex:0 0 auto; width:72px; }
.contact-band__text .eyebrow{ margin-bottom:0; }
.contact-band__text h2{
  margin:0;
  font-family:var(--font-heading);
  font-weight:500;
  font-size:clamp(1.0625rem, 0.95rem + 0.5vw, 1.3rem);
  letter-spacing:0.04em;
}

/* --------------------------------------------------------------------------
   10. 下層ページ共通
   -------------------------------------------------------------------------- */
.page-head{
  padding-block:var(--sp-6);
  background:var(--cream-alt);
  text-align:center;
}
.page-head h1{ font-size:clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem); }
.page-head h1::after{
  content:"";
  display:block;
  width:40px;
  height:1px;
  margin:var(--sp-3) auto 0;
  background:var(--gold);
}

.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp-6);
  align-items:center;
}
.split__media{
  overflow:hidden;
  min-height:280px;
  border-radius:var(--radius);
  background:var(--cream-alt);
}
.split__media img{ width:100%; height:100%; object-fit:cover; }

/* 横長のイメージ帯（商品紹介のリード下など） */
.banner-figure{
  overflow:hidden;
  margin-top:var(--sp-5);
  aspect-ratio:5 / 2;
  border-radius:var(--radius);
  background:var(--cream-alt);
}
.banner-figure img{ width:100%; height:100%; object-fit:cover; }

/* 画面端まで届くイメージ帯（HOME の私たちについて直下）。.container の外に置く。
   メロンが下寄りの構図のため、切り出し位置を中央より下にずらしている。 */
.image-band{
  margin:0;
  overflow:hidden;
  aspect-ratio:3 / 1;
  background:var(--cream-alt);
}
.image-band img{ width:100%; height:100%; object-fit:cover; object-position:center 68%; }

/* 会社概要ページのロゴ */
.company-logo{
  display:block;
  width:100%;
  max-width:200px;
  height:auto;
  margin:0 auto var(--sp-5);
}

/* Google フォームの埋め込み枠 */
.form-embed{
  display:block;
  background:var(--cream);
  width:100%;
  min-height:900px;
  margin-top:var(--sp-4);
  border:0;
}
.form-note{
  margin-bottom:0;
  color:var(--ink-soft);
  font-size:0.9375rem;
  text-align:center;
}
/* 定義リストの値に添える注記（.note は区切り線を持つ独立ブロック用のため別に定義） */
.dd-note{
  display:block;
  margin-top:4px;
  color:var(--ink-soft);
  font-size:0.875rem;
}

/* 選ぶ / 運ぶ / 炊く、相談の流れ など */
.steps{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--sp-4);
}
.steps--flow{ grid-template-columns:repeat(4, 1fr); }
.step{
  padding:var(--sp-4) var(--sp-3);
  border-top:1px solid var(--gold);
  background:var(--cream-alt);
}
.step h3{ margin-bottom:var(--sp-2); }
.step p{ margin-bottom:0; font-size:0.9375rem; }

/* 定義リスト（会社概要・商品仕様） */
.spec{
  margin:0;
  border-top:1px solid var(--line-light);
}
.spec > div{
  display:grid;
  grid-template-columns:14em 1fr;
  gap:var(--sp-3);
  padding:var(--sp-2) 0;
  border-bottom:1px solid var(--line-light);
}
.spec dt{
  color:var(--ink-soft);
  font-family:var(--font-heading);
  font-weight:500;
  font-size:0.9375rem;
  letter-spacing:0.04em;
}
.spec dd{ margin:0; font-size:0.9375rem; }
/* 1項目に複数行を並べる場合（会社概要の「事業内容」など）。
   ul はグローバルに list-style:none のため、中黒を ::before で補う。
   テキストではなく擬似要素なので、読み上げには含まれない。 */
.spec dd ul{ display:grid; gap:4px; }
.spec dd li{ padding-left:1em; text-indent:-1em; }
.spec dd li::before{ content:"・"; }

.card-list{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:var(--sp-4);
}
.card{
  display:flex;
  flex-direction:column;
  padding:var(--sp-4) var(--sp-3);
  border:1px solid var(--line-light);
  border-radius:var(--radius);
  background:var(--white);
}
.card h3{ margin-bottom:var(--sp-2); }
.card p{ font-size:0.9375rem; }
.card .btn{ align-self:flex-start; margin-top:auto; }

.btn-row{ margin-top:var(--sp-4); }

.contact-links{ display:grid; gap:var(--sp-1); }
.contact-links a{ color:var(--gold-dark); }

.product-detail + .product-detail{
  margin-top:var(--sp-7);
  padding-top:var(--sp-7);
  border-top:1px solid var(--line-light);
}
.product-detail h2{ margin-bottom:var(--sp-3); }

/* --------------------------------------------------------------------------
   11. フッター
   -------------------------------------------------------------------------- */
.site-footer{
  padding-block:var(--sp-5) var(--sp-3);
  background:var(--green);
  color:var(--cream);
}
.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-4);
  flex-wrap:wrap;
}
.footer-brand{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  color:var(--cream);
  text-decoration:none;
}
/* .brand-en は --ink-soft を持つが、濃緑地では 1.74:1 しかないため上書きする
   （--gold は濃緑地で 4.99:1） */
.footer-brand .brand-en{ color:var(--gold); }
.footer-nav ul{ display:flex; align-items:center; flex-wrap:wrap; }
.footer-nav li + li{ border-left:1px solid var(--line-green); }
.footer-nav a{
  display:block;
  padding:2px var(--sp-2);
  color:var(--cream);
  font-family:var(--font-heading);
  font-weight:500;
  font-size:0.9375rem;
  letter-spacing:0.04em;
  text-decoration:none;
  transition:color .3s ease;
}
.footer-nav a:hover{ color:var(--gold); }

.footer-social{ display:flex; gap:var(--sp-2); }
.footer-social a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  color:var(--cream);
  transition:color .3s ease;
}
.footer-social a:hover{ color:var(--gold); }
.footer-social svg{ width:24px; height:24px; }

.footer-copy{
  margin-top:var(--sp-4);
  padding-top:var(--sp-3);
  border-top:1px solid var(--line-green);
  color:var(--cream);
  font-family:var(--font-en);
  font-weight:500;
  font-size:0.875rem;
  letter-spacing:0.1em;
  line-height:1.6;
  text-align:center;
}

/* --------------------------------------------------------------------------
   12. モーション（2.6）
   -------------------------------------------------------------------------- */
.reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .4s ease-out, transform .4s ease-out;
}
.reveal.is-visible{ opacity:1; transform:none; }

/* JSが無効・未実行でも内容が読めるようにする */
.no-js .reveal{ opacity:1; transform:none; }

/* --------------------------------------------------------------------------
   13. レスポンシブ（ブレイクポイントは 1024px と 768px）
   -------------------------------------------------------------------------- */
/* 1200px 未満ではカード内の和文見出しが語中で折り返すため、横並びをやめる */
@media (max-width:1200px){
  .product-grid{ grid-template-columns:1fr; }
  .shop-row{ grid-template-columns:1fr; }
}

@media (max-width:1024px){
  .gnav{ display:none; }
  .nav-toggle{ display:flex; }
  .brand{ flex:1 1 auto; }

  .card-list{ grid-template-columns:repeat(2, 1fr); }
  .steps--flow{ grid-template-columns:repeat(2, 1fr); }
  .split{ gap:var(--sp-5); }
}

/* ハンバーガーへの切り替えは1024px。その直上（1025〜1100px）は、社名＋ナビ6項目＋
   ショップの合計幅がビューポートを超えて横スクロールが出るため、ここで詰める。
   1085px以上は通常サイズで収まることを実測済み（v2.2でナビが6項目になった分の余裕）。 */
@media (min-width:1025px) and (max-width:1100px){
  .brand{ padding-inline:var(--sp-2); }
  .brand-ja{ font-size:0.9375rem; }
  .gnav-list{ gap:12px; }
  .gnav-list a{ font-size:0.875rem; }
  .shop-link{ padding-inline:var(--sp-3); }
  .shop-ja{ display:none; }
}

/* 1101〜1250pxは余白だけを詰め、ナビの和文は15pxのまま保つ（明朝体の可読性のため）。
   この段階でショップの和文ラベルを落とせば横スクロールは出ない（実測）。 */
@media (min-width:1101px) and (max-width:1250px){
  .brand{ padding-inline:var(--sp-2); }
  .gnav-list{ gap:12px; }
  .shop-link{ padding-inline:var(--sp-3); }
  .shop-ja{ display:none; }
}

@media (max-width:768px){
  :root{ --header-h:60px; }

  /* ヘッダーの折り返し対策（要件定義書 v2.1 / 4章） */
  .brand{ padding-inline:var(--sp-2); gap:var(--sp-1); min-width:0; }
  .brand .crest{ width:34px; height:34px; }
  .brand-ja{ font-size:0.875rem; white-space:nowrap; }
  .brand-en{ display:none; }
  .shop-link{ padding-inline:var(--sp-2); gap:var(--sp-1); }
  .shop-ja{ display:none; }
  .shop-en{ letter-spacing:0.14em; }
  .shop-en .bar{ display:none; }
  .nav-toggle{ width:48px; }

  .btn{ padding:12px 22px; }

  .hero{ grid-template-columns:1fr; }
  .hero-figure{ min-height:0; aspect-ratio:4 / 3; }
  .hero-script span + span{ margin-left:1.6em; }

  .about-split{ grid-template-columns:1fr; }
  .about-figure{ min-height:0; aspect-ratio:4 / 3; }
  .about-panel .deco-melon{ width:140px; }

  .product-card{ grid-template-columns:1fr; }
  .product-card__media{ min-height:0; aspect-ratio:4 / 3; }

  .shop-card{ grid-template-columns:1fr; }
  /* ギフト写真は横位置（およそ3:2）。同じ比率で枠を取り、化粧箱の左右が切れないようにする */
  .shop-card__media{ min-height:0; aspect-ratio:3 / 2; }
  .mini-cards{ grid-template-columns:1fr; }
  .mini-card + .mini-card{ border-left:0; border-top:1px solid var(--gold); }

  .contact-band__inner{ flex-direction:column; text-align:center; }

  .steps,
  .steps--flow,
  .card-list,
  .split{ grid-template-columns:1fr; }
  .split{ gap:var(--sp-4); }
  .split__media{ min-height:0; aspect-ratio:4 / 3; }
  /* 幅が詰まると被写体（メロン）が画面右外に外れるため、右寄せで見切れを防ぐ */
  .image-band{ aspect-ratio:2 / 1; }
  .banner-figure{ aspect-ratio:2 / 1; }
  .banner-figure img{ object-position:right center; }

  .spec > div{ grid-template-columns:1fr; gap:0; }

  .footer-inner{ flex-direction:column; align-items:flex-start; }
  .footer-nav li:first-child{ border-left:0; }
  .footer-nav a{ padding-inline:var(--sp-1) var(--sp-2); }
}

/* 375px幅では社名・ハンバーガー・ショップの合計がぎりぎり収まらないため、
   余白とアイコン寸法をさらに詰める。 */
@media (max-width:400px){
  .brand{ padding-inline:var(--sp-1) 4px; gap:6px; }
  .brand .crest{ width:30px; height:30px; }
  .brand-ja{ font-size:0.8125rem; }
  .nav-toggle{ width:42px; }
  .shop-link{ padding-inline:var(--sp-1) 12px; gap:6px; }
  .shop-link .cart-icon{ width:18px; height:18px; }
  .shop-en{ font-size:0.75rem; letter-spacing:0.1em; }
}

/* --------------------------------------------------------------------------
   14. prefers-reduced-motion（2.6）
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }

  *,
  *::before,
  *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }

  .reveal{ opacity:1 !important; transform:none !important; }
}