/* ========================================================================
   たかしま農場 ジャーナル「夏号」— OKAWARI
   新聞風レイアウト。シートは 144rem (1440px) で中央寄せ、左右はページ背景色のみ。
   px は基本 rem 換算（1px = 0.1rem。global.css の html font-size でスケール）。
   ======================================================================== */

/* --- Foundation: ジャーナルのパレット／フォント変数（html・body でも使うため :root に置く） --- */
:root {
  --j-ink: #231815;
  --j-paper: #f4f3ed;
  --j-side: #dcd9d0;
  --j-blue1: #b5dfe2;   /* Figma 調整版（Rectangle 2）に合わせて更新 */
  --j-blue2: #a0e5f0;
  --j-grey: #d9d9d9;
  --j-soft: #f2f2f2;

  --j-gothic: "YuGothic", "Yu Gothic", "Hiragino Kaku Gothic ProN", "Zen Kaku Gothic Antique", "Noto Sans JP", sans-serif;
  --j-mincho: "Zen Old Mincho", serif;
  --j-shippori: "Shippori Mincho", serif;
  --j-display: "Aoboshi One", serif;
  --j-en: "EB Garamond", Georgia, serif;
}

/* Project: ジャーナル全体のベース */
.p-journal {
  font-family: var(--j-gothic);
  color: var(--j-ink);
  -webkit-font-smoothing: antialiased;
}
.p-journal img { display: inline-block; max-width: 100%; margin-bottom: 10px; }
.p-journal a { color: inherit; text-decoration: none; }

/* ページ背景（シートの外側＝左右の余白）は背景色だけ */
html:has(.l-sheet) { background: var(--j-side); }
/* body は透過必須：負の z-index の ::before は body 背景より下に描画されるため、
   body に色を敷くとテクスチャが隠れる（ペイント順） */
body:has(.l-sheet) { background: transparent; }
/* 紙テクスチャは fixed 疑似要素で常にビューポート基準に敷く。
   （body 直の background-attachment: fixed は iOS Safari で効かず、
   cover がページ全高基準になってテクスチャが粗く巨大化するため） */
body:has(.l-sheet)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: url(../img/journal/body-bg.webp) top center / cover no-repeat;
  pointer-events: none;
}

/* Layout: 新聞シート。max-width で中央寄せ、左右は背景色のみ。 */
.l-sheet {
  max-width: 144rem;
  margin-inline: auto;
  padding-top: 0;             /* 固定ヘッダー用の余白を打ち消す */
  /* background: var(--j-paper); */  /* body の紙テクスチャを透かす */
  display: flow-root;         /* BFC を維持しつつ、子のフルブリード（100vw）はクリップしない */
}

/* 共通：赤い印章スタンプ */
.c-stamp,
.p-okawari__stamp {
  display: grid;
  place-items: center;
  width: 11rem;
  height: 13.5rem;
  border: 1px solid #c0392b;
  border-radius: 50%;
  transform: rotate(-14deg);
  color: #c0392b;
  font-family: var(--j-en);
  font-size: 1rem;
  letter-spacing: .1em;
  line-height: 1.4;
  text-align: center;
}

/* ============================================================
   01 / Masthead — Hero
   ============================================================ */
.p-mv {
  position: relative;
  /* background: #fff; */      /* body の紙テクスチャを透かす */
  height: 95rem;
  overflow: visible;          /* 水色背景を画面幅までブリードさせるためクリップしない（子は全て絶対配置） */
}
/* 下部の水色背景：コンテンツ幅（1440）を逸脱して画面横幅いっぱいにブリード */
.p-mv__bg {
  position: absolute;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  top: 42.2rem;
  bottom: 0;
  min-height: 98.8rem;        /* エッセイタイトルの直下（タイトル下端＋2rem）で帯を切る（先方指示）。
                                 ※ 旧 882px（px 固定）はタブレットで帯がスケールせず本文まで水色が伸びていた */
  background: var(--j-band);
  transition: background-color .8s ease;
}
/* 帯にも紙のざらざらテクスチャを重ねる（multiply で色は帯色のまま粒子だけ乗せる） */
.p-mv__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url(../img/journal/body-bg.webp) top center / cover repeat;
  mix-blend-mode: multiply;
  opacity: .45;
  pointer-events: none;
}

/* --- 季節切り替え：.p-journal[data-season] で帯色を変え、.is-hirari でコンテンツをひらりと転換 --- */
.p-journal { --j-band: #a0e5f0; }                        /* 既定＝夏（フッター画像 ft-bg.webp の青 A0E5F0 に統一。旧 A0E2ED） */
.p-journal[data-season="spring"] { --j-band: #e8f3a1; }  /* Figma 春 (290:9990) */
.p-journal[data-season="autumn"] { --j-band: #fff1a7; }  /* Figma 秋 (290:11955) */
.p-journal[data-season="winter"] { --j-band: #caf1ff; }  /* Figma 冬 (290:12008) */
/* 切り替えはその場フェードのみ（移動・回転なし） */
.js-season-swap { transition: opacity .4s ease; }
.js-season-swap.is-hirari { opacity: 0; }
/* メイン写真（左上・右下を大きく角丸／左は画面外へブリード） */
.p-mv__photo {
  position: absolute;
  top: 0;
  /* 右端（86.3rem）はそのまま、左端だけ画面左端までブリード（>1440時）。tagline 位置に影響なし。 */
  left: min(0rem, calc((144rem - 100vw) / 2));
  width: calc(86.3rem + max(0rem, (100vw - 144rem) / 2));
  height: 94.7rem;
  z-index: 1;
  overflow: hidden;                      /* ズームアウト演出時のはみ出しをクリップ */
  border-bottom-right-radius: 37rem;     /* クリップ側にも角丸（img と同値） */
}
.p-mv__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 46% top;
  border-bottom-right-radius: 37rem;
}
/* ロード時の「季節カラーのカーテン」演出（journal-anim.js が右方向へ開く。
   JS 無効・reduced-motion 時は JS 側で display:none にする） */
/* カーテン自体は四角（先方指示）。写真側の overflow:hidden ＋角丸が外形をクリップする */
.p-mv__curtain {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--j-band);
  pointer-events: none;
}

/* OKAWARI ロゴ（縦組みロックアップ） */
.p-okawari {
  position: relative;
  display: inline-grid;
  justify-items: center;
  row-gap: 1rem;
}
.p-okawari__o { width: 8rem; }
.p-okawari__o svg { width: 100%; height: auto; }
.p-okawari__word {
  writing-mode: vertical-lr;
  text-orientation: upright;
  font-family: var(--j-display);
  font-size: 7.2rem;
  line-height: .92;
  letter-spacing: .02em;
}
.p-okawari__paren { text-orientation: mixed; }
.p-okawari__cap {
  writing-mode: vertical-lr;
  font-family: var(--j-en);
  font-size: 1.1rem;
  letter-spacing: .25em;
  position: absolute;
  top: 9rem;
  left: -2.4rem;
}
.p-okawari__stamp {
  position: absolute;
  bottom: -2rem;
  left: -1rem;
}

/* OKAWARI マストヘッドロゴ（1枚画像）— Figma: 250902takashima x=1167 y=60 112×627 */
.p-mv__brand {
  position: absolute;
  top: 6rem;
  left: 116.7rem;
  width: 11.2rem;
  z-index: 2;
}
.p-mv__brand img { width: 100%; height: auto; display: block; }

/* タグライン（写真右上・縦組み 2列：JP左／SUMMER右上）— Figma: Vertical Text Container x=878 y=60 */
.p-mv__tagline {
  position: absolute;
  top: 6rem;
  left: 87.8rem;
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: .4rem;
  font-family: var(--j-gothic);
  font-weight: 700;
}
.p-mv__tagline-jp {
  writing-mode: vertical-rl;
  font-size: 2rem;
  line-height: 1.5;
  letter-spacing: .12em;
}
.p-mv__tagline-en {
  writing-mode: vertical-rl;
  font-family: var(--j-display);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.9;
  letter-spacing: .13em;
}

/* 季節リスト（右側・縦並び） */
.p-mv__seasons {
  position: absolute;
  top: 70.3rem;
  left: 116.5rem;
  z-index: 2;
  width: 13rem;
  display: grid;
  font-family: var(--j-display);
  font-size: 1.35rem;
  letter-spacing: .08em;
}
.p-mv__seasons a {
  position: relative;
  display: block;
  padding: .2rem 1.6rem;
  text-align: right;
  transition: opacity .15s;
}
.p-mv__seasons a.is-off { opacity: .5; }
.p-mv__seasons a.is-current { text-decoration: underline; text-underline-offset: .3rem; }
.p-mv__seasons a:hover { opacity: 1; }

/* ホバー（／デフォルトは現在の季節）でテキスト右に出る丸い矢印 — Figma: Icon x=1319 y=733 24×24 */
.p-mv__seasons a::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-left: .4rem;
  width: 2.4rem;
  height: 2.4rem;
  transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='none' stroke='%23231815'/%3E%3Cpath d='M14 7l-5 5 5 5' fill='none' stroke='%23231815' stroke-width='1.2'/%3E%3C/svg%3E") no-repeat center / contain;
  opacity: 0;
  transition: opacity .15s;
  pointer-events: none;
}
.p-mv__seasons a.is-current::after { opacity: 1; }       /* 既定では SUMMER に表示 */
.p-mv__seasons:hover a.is-current::after { opacity: 0; } /* ホバー中は現在分を隠す */
.p-mv__seasons a:hover::after { opacity: 1; }            /* ホバーした季節に表示 */

/* MENU ボタン（おわん型画像＝MENU文字込み＋赤い梅干し）— Figma: Button x=1193 y=862 71×44 */
.p-mv__menu {
  position: absolute;
  top: 53.8rem;
  left: 119.3rem;        /* x=1193 */
  z-index: 3;            /* ナビパネルより前面 */
  display: block;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  /* 初期状態では非表示。スクロールで fix したときにじわっと現れる */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .5s ease, visibility 0s linear .5s;
}
.p-mv__menu.is-fixed {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .5s ease;
}
.p-mv__menu-img { position: relative; display: block; width: 7.1rem; }
.p-mv__menu-bowl {
  position: relative;
  z-index: 1;            /* 種はこの後ろから顔を出す */
  width: 100%;
  height: 2.2rem;        /* viewBox 167.34×51.89 を 7.1rem 幅に縮小 */
  display: block;
  margin: 0;
}
/* MENU / CLOSE ラベル（Figma 458 系: クリックで切り替え）。
   通常時は非表示で、スクロール固定時（またはナビ展開時）にふわっと表示 */
.p-mv__menu-label {
  position: relative;
  display: block;
  height: 1rem;
  margin-top: -1rem;   /* 先方指示：テキストをお椀にさらに寄せる（DevTools 実測 -10px） */
  opacity: 0;
  transform: translateY(-.4rem);
  transition: opacity .4s ease, transform .4s ease;
}
.p-mv__menu.is-fixed .p-mv__menu-label,
.p-mv__menu.is-open .p-mv__menu-label {
  opacity: 1;
  transform: none;
}
.p-mv__menu-label img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  transition: opacity .2s ease;
}
.p-mv__menu-label--menu  { width: 3.48rem; height: .94rem; }
.p-mv__menu-label--close { width: 4.08rem; height: 1.03rem; }
.p-mv__menu-label--close { opacity: 0; }
.p-mv__menu.is-open .p-mv__menu-label--menu { opacity: 0; }
.p-mv__menu.is-open .p-mv__menu-label--close { opacity: 1; }
/* 種：通常はお椀の後ろに隠れ、ホバー／オープン時にぴょこっと顔を出す */
.p-mv__menu-seed {
  position: absolute;
  top: -.64rem;
  left: 4.24rem;
  width: 1.74rem;
  height: 1.74rem;
  z-index: 0;
  opacity: 0;
  transform: translateY(1rem) rotate(-20deg);
  transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), opacity .18s ease;
}
.p-mv__menu.is-open .p-mv__menu-seed { opacity: 1; transform: translateY(0) rotate(0deg); }
/* ホバーでの種ぴょこはホバー可能なデバイス限定（タッチ端末はタップ後に :hover が
   固着し、閉じた後も開いているときと同じ見た目になってしまうため） */
@media (hover: hover) {
  .p-mv__menu:hover .p-mv__menu-seed { opacity: 1; transform: translateY(0) rotate(0deg); }
}
.p-mv__menu-seed svg { width: 100%; height: 100%; display: block; }
/* スクロール追従：見切れる直前で fixed に切り替え（top/left は JS が設定） */
.p-mv__menu.is-fixed { position: fixed; z-index: 101; }
.p-mv__nav.is-fixed  { position: fixed; z-index: 100; }

/* MENU ナビパネル（Figma: Rectangle 119 = 365×509 / メニュー6項目＋外部リンク3件） */
.p-mv__nav {
  position: absolute;
  top: 50.7rem;          /* ボタン（53.8rem）の 3.1rem 上（Figma の重なり位置） */
  left: 93.3rem;
  width: 36.5rem;
  height: 50.9rem;
  background: #fff;
  border-radius: 1rem;
  padding: 7.8rem 0 0 4.7rem;
  box-shadow: 0 .6rem 2.8rem rgba(35, 24, 21, .12);   /* 先方指示：ほんのりドロップシャドウ */
  z-index: 2;            /* MV写真(1)より前・MENUボタン(3)より後ろ */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-1rem);
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
.p-mv__nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .25s ease, transform .25s ease;
}
.p-mv__nav ul { list-style: none; margin: 0; padding: 0; }
.p-mv__nav-list li {
  font-size: 1.8rem;
  line-height: 1.2;      /* li 側で行箱を確定（body の 1.75 継承で行ピッチが膨らむのを防ぐ） */
}
.p-mv__nav-list a {
  font-weight: 700;
  letter-spacing: .11em;
}
.p-mv__nav-list li + li { margin-top: 2.55rem; }   /* 行ピッチ47px */
.p-mv__nav a:hover { text-decoration: underline; text-underline-offset: .4rem; }
.p-mv__nav-links { margin-top: 3.7rem !important; }
.p-mv__nav-links li { font-size: 1.4rem; line-height: 1.2; }
.p-mv__nav-links li + li { margin-top: 1.4rem; }   /* 行ピッチ31px */
.p-mv__nav-links a {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  font-weight: 700;
  letter-spacing: .07em;
}
.p-mv__nav-links img { width: 1.3rem; height: 1.55rem; margin: 0; transform: rotate(45deg); }   /* 上矢印を45°回転で「↗」に */

/* ============================================================
   02 / Essay — 青嵐を見送って
   ============================================================ */
.p-essay { /* background: var(--j-paper); */ padding: 11rem 0 9rem; position: relative; z-index: 1; }
/* Figma: Content Container x=162 / w=1277（左インセット・右端まで） */
.p-essay__inner {
  display: grid;
  grid-template-columns: 53.6rem 1fr;   /* Text Column 569 / Image Column（写真は ml=536 から） */
  gap: 0;
  width: 127.7rem;
  margin-left: 16.2rem;
  margin-right: 0;
}
.p-essay__text { padding-top: 15rem; }
.p-essay__title {
  font-family: var(--j-mincho);
  font-weight: 500;
  font-size: 5.6rem;
  letter-spacing: .12em;
  line-height: 1.6;
  margin-bottom: 6rem;                   /* gap 60 */
}
.p-essay__body {
  font-family: var(--j-mincho);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 2.7;
}
.p-essay__note {
  margin-top: 6rem;
  font-family: var(--j-shippori);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--j-ink);
}
.p-essay__photo-lg { overflow: hidden; }   /* パララックスで img が動くためクリップ */
.p-essay__photo-lg img { width: 100%; height: 51rem; object-fit: cover; }
.p-essay__en {
  position: relative;
  display: flex;
  gap: 6.6rem;
  width: 62.3rem;                        /* Figma: design rule 623 */
  margin-top: 3.4rem;
  padding-bottom: 1.4rem;
  font-family: var(--j-en);
  font-size: 1.45rem;
  letter-spacing: .05em;
  line-height: 2;
}
/* 二重罫線（上=細 0.71px / 下=太 2.83px） — Figma: design */
.p-essay__en::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: .74rem;
  border-top: 1px solid var(--j-ink);
  border-bottom: .2rem solid var(--j-ink);   /* 罫線太さを全体（2px）に統一 */
}
/* 赤い印章（画像）— Figma: 250902takashima2 1 144×225・罫線右端に重なる */
.p-essay__stamp {
  position: absolute;
  right: -.5rem;
  bottom: -7rem;
  width: 14.4rem;
  height: auto;
  pointer-events: none;
}

/* ============================================================
   03 / Reading — 縦組み記事（新聞風・Figma「Frame 627549」1443×1058 準拠）
   各記事は2枠に分けて流す：A=上段→中段右 / B=中段左→下段右 / C=下段中→下段左。
   位置は rem（=Figma px ÷10）で絶対配置。シートの rem スケールで全体が等比に縮む。
   ============================================================ */
.p-reading { padding: 4rem 0 6rem; }
.p-reading__cols {
  position: relative;
  width: 127.66rem;
  height: 108.06rem;
  margin-inline: auto;
  font-family: var(--j-gothic);
  font-weight: 700;   /* 先方指示：フォントは全体（他セクションの太さ）に合わせて太く */
  font-size: 1.9rem;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: justify;
}
.p-reading__photo {
  position: absolute;
  left: 0; top: 0;
  width: 47rem; height: 71rem;
  background: var(--j-grey); overflow: hidden;
}
.p-reading__photo img { width: 100%; height: 100%; object-fit: cover; }

/* 本文ブロック（縦組み・矩形固定）— Illustrator: YuGothic 16pt / leading 28.35 / tracking 220 */
.p-reading__t { position: absolute; writing-mode: vertical-rl; margin: 0; font-family: var(--j-gothic); font-size: 1.6rem; line-height: 2.835rem; letter-spacing: .22em; }
.p-reading__t > p { margin: 0; }
/* SP 用の「写真＋記事A末尾」行。PC では箱を作らず透過（写真の絶対配置を維持） */
.p-reading__arow { display: contents; }

/* 見出しピル（縦組み・角丸枠・1列） */
.p-reading__head {
  position: absolute;
  writing-mode: vertical-rl;
  margin: 0;
  display: flex; align-items: center; justify-content: center;
  box-sizing: border-box;
  padding: 1.4rem .55rem;
  border: 1px solid var(--j-ink);
  border-radius: 2rem;
  font-family: var(--j-gothic);
  font-size: 2.005rem; font-weight: 700; letter-spacing: .25em;
  white-space: nowrap;
}

/* 配置座標 — Illustrator 選択グループ(701) の実 bbox（1pt = 0.1rem）を写像 */
.p-reading__t--a1   { left: 54.03rem;  top: 4.70rem;  width: 65.34rem; height: 32rem; }
.p-reading__t--a2   { left: 77.66rem;  top: 41.60rem; width: 49.96rem; height: 29rem; }
.p-reading__head--a { left: 123.32rem; top: 4.60rem;  width: 4.33rem;  height: 29.75rem; }
.p-reading__t--b1   { left: 55.70rem;  top: 41.90rem; width: 12.23rem; height: 29.61rem; }   /* a1/a2 の高さ変更（32rem化）に伴いピルごと右へ寄せて間隔を維持 */
.p-reading__t--b2   { left: 91.92rem;  top: 78.35rem; width: 35.67rem; height: 29.61rem; }
.p-reading__head--b { left: 71.50rem;  top: 41.57rem; width: 4.33rem;  height: 29.75rem; letter-spacing: .1em; }
.p-reading__t--c    { left: 16.33rem;  top: 78.35rem; width: 64.19rem; height: 29.62rem; }
.p-reading__head--c { left: 84.09rem;  top: 78.32rem; width: 4.33rem;  height: 29.75rem; }

/* 03.5 / Reading sub — 2枚組写真（Figma「Group 128」923.94×454・中央揃え） */
.p-readingpair {
  position: relative;
  width: 92.4rem;
  height: 45.4rem;
  margin: 0 auto;
}
.p-readingpair__img { position: absolute; margin: 0; overflow: hidden; background: var(--j-grey); }
.p-readingpair__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 先方指示（夏）：写真の位置を左右反転（風景=右上・草刈り=左下） */
.p-readingpair__img--l { left: 55.9rem; top: 0;       width: 36.5rem;  height: 24.5rem; z-index: 1; }
.p-readingpair__img--r { left: 0;       top: 8.9rem;  width: 57.73rem; height: 36.5rem; z-index: 2; }

/* ============================================================
   03s / Reading — SPRING（Illustrator 選択グループ実測 1pt=0.1rem）
   コンテンツは data-season で夏／春を表示切り替え
   ============================================================ */
/* display を直接指定せず「隠す」だけにする（SP の flex 表示を壊さないため）
   夏＝data-season 未指定/summer、他季節は各 --xxx を表示 */
.p-journal:not([data-season="spring"]) .p-reading__season--spring { display: none; }
.p-journal:not([data-season="autumn"]) .p-reading__season--autumn { display: none; }
.p-journal:not([data-season="winter"]) .p-reading__season--winter { display: none; }
.p-journal[data-season="spring"] .p-reading__season--summer,
.p-journal[data-season="autumn"] .p-reading__season--summer,
.p-journal[data-season="winter"] .p-reading__season--summer { display: none; }

/* 春はシート全幅（写真が左右端までブリード）。基準原点＝左上写真の左上 */
.p-reading__cols--spring {
  width: 144rem;
  height: 198.8rem;
}
/* 本文ブロック（AI 実 bbox 写像） */
.p-reading__t--sa1 { left: 52.75rem; top: 4.70rem;   width: 61.87rem; height: 30.55rem; }
.p-reading__t--sa2 { left: 53.80rem; top: 41.15rem;  width: 74.03rem; height: 29.55rem; }
.p-reading__t--sa3 { left: 48.14rem; top: 77.94rem;  width: 41.66rem; height: 29.55rem; }
.p-reading__t--sb1 { left: 16.00rem; top: 77.94rem;  width: 21.58rem; height: 29.62rem; }
.p-reading__t--sb2 { left: 16.17rem; top: 115.11rem; width: 73.63rem; height: 29.61rem; }
/* 見出しピル（A は2行） */
.p-reading__head--sa { left: 118.18rem; top: 4.60rem;  width: 9.68rem; height: 29.68rem; line-height: 2.6rem; }
.p-reading__head--sb { left: 40.78rem;  top: 78.32rem; width: 4.33rem; height: 29.75rem; }
/* 写真（AI クリップ矩形写像） */
.p-reading__photo--s1 { left: 0;        top: 0;         width: 46.6rem;  height: 71rem; }
.p-reading__photo--s2 { left: 97rem;    top: 77.94rem;  width: 47rem;    height: 71rem; }
.p-reading__photo--s3 { left: 79.99rem; top: 155.97rem; width: 36.5rem;  height: 24.5rem; }
.p-reading__photo--s4 { left: 27.46rem; top: 162.22rem; width: 54.38rem; height: 36.5rem; }

/* ============================================================
   03a / Reading — AUTUMN（Illustrator 選択グループ実測 1pt=0.1rem）
   ============================================================ */
.p-reading__cols--autumn {
  width: 144rem;
  height: 161.9rem;
}
/* 本文ブロック（AI 実 bbox 写像。テキストは各枠の右端から流し込まれる） */
.p-reading__t--aa1 { left: 52.95rem; top: 4.84rem;  width: 66.83rem; height: 29.55rem; }
.p-reading__t--aa2 { left: 52.55rem; top: 41.29rem; width: 75.48rem; height: 29.55rem; }
.p-reading__t--aa3 { left: 84.50rem; top: 78.08rem; width: 43.51rem; height: 32.55rem; }
.p-reading__t--ab1 { left: 22.47rem; top: 78.08rem; width: 78.29rem; height: 29.61rem; }
/* 見出しピル */
.p-reading__head--aa { left: 123.73rem; top: 4.52rem;  width: 4.33rem; height: 29.74rem; }
.p-reading__head--ab { left: 104rem; top: 78.04rem; width: 4.33rem; height: 29.75rem; }
/* 写真（AI クリップ矩形写像。下段2枚は左が手前） */
.p-reading__photo--au1 { left: 0;        top: 0;         width: 47rem;    height: 71rem; }
.p-reading__photo--au2 { left: 24.96rem; top: 125.13rem; width: 57.43rem; height: 36.71rem; z-index: 2; }
.p-reading__photo--au3 { left: 75.58rem; top: 118.88rem; width: 38.46rem; height: 26.42rem; z-index: 1; }

/* ============================================================
   03w / Reading — WINTER（Illustrator 選択グループ実測 1pt=0.1rem）
   ============================================================ */
.p-reading__cols--winter {
  width: 144rem;
  height: 201rem;
}
/* 本文ブロック（AI 実 bbox 写像） */
.p-reading__t--wa1 { left: 54.20rem; top: 4.70rem;   width: 65.58rem; height: 29.55rem; }
.p-reading__t--wa2 { left: 54.20rem; top: 41.15rem;  width: 73.83rem; height: 29.55rem; }
.p-reading__t--wb1 { left: 16.00rem; top: 76.10rem;  width: 66.08rem; height: 29.62rem; }
.p-reading__t--wb2 { left: 16.00rem; top: 113.20rem; width: 73.90rem; height: 29.61rem; }
/* 見出しピル */
.p-reading__head--wa { left: 123.73rem; top: 4.38rem;  width: 4.33rem; height: 29.74rem; }
.p-reading__head--wb { left: 85.61rem;  top: 76.11rem; width: 4.33rem; height: 29.74rem; }
/* 写真（AI クリップ矩形写像。下段2枚は左が手前） */
.p-reading__photo--w1 { left: 0;        top: 0;         width: 47rem;    height: 71rem; }
.p-reading__photo--w2 { left: 97rem;    top: 76.10rem;  width: 47rem;    height: 71rem; }
.p-reading__photo--w3 { left: 24.96rem; top: 164.24rem; width: 57.43rem; height: 36.71rem; z-index: 2; }
.p-reading__photo--w4 { left: 75.53rem; top: 158.21rem; width: 38.46rem; height: 26.42rem; z-index: 1; }

/* ============================================================
   04 / Gallery — SUMMER
   ============================================================ */
/* Figma「Summer collection」1443×1296 準拠。シート幅を超えて画面幅100vwへブリード。 */
.p-gallery {
  padding: 6rem 0 0;
  position: relative;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
}
/* 見出し：SUMMER 中央＋下に二重罫線 */
.p-gallery__head {
  position: relative;
  text-align: center;
  padding-bottom: 1.3rem;
  /* 上の罫線は ::before に移設（線ドローアニメのため。見た目は従来と同一） */
}
.p-gallery__head::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--j-ink);
}
.p-gallery__head::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -.7rem;
  height: .2rem;   /* 二重罫線の太さをエッセイ下（細1px＋太2px）と統一 */
  background: var(--j-ink);
}

/* --- GSAP 線ドロー用：--rule-x（0→1）で罫線が左からスーッと引かれる --- */
.p-gallery__head::before,
.p-gallery__head::after,
.p-essay__en::after {
  transform: scaleX(var(--rule-x, 1));
  transform-origin: left center;
}
.p-gallery__label {
  font-family: var(--j-display);
  font-size: 1.6rem;
  letter-spacing: 1.82px;
}
.p-gallery__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 2rem;
}
.p-gallery__cell { background: var(--j-grey); aspect-ratio: 480 / 304; overflow: hidden; }
.p-gallery__cell img { width: 100%; height: 100%; object-fit: cover; }
/* 右下（最後）の画像のみ右下角丸 */
.p-gallery__cell.is-round { border-bottom-right-radius: 10rem; }

/* ============================================================
   05 / Onmusubi — つながる恩結び
   ============================================================ */
.p-onmusubi { padding: 7rem 0 6rem; position: relative; }
.p-onmusubi::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 2px;
  background: var(--j-ink);
}
/* 見出し装飾はSVG画像（Figma「Group 129」1200×170.8・テキスト/紋/アーチ罫線を含む） */
.p-onmusubi__ornament {
  width: 130rem;
  max-width: calc(100% - 12rem);
  margin: 0 auto 5rem;
}
.p-onmusubi__ornament img { width: 100%; height: auto; display: block; }
.p-onmusubi__cards { display: grid; transition: height .4s ease; overflow: hidden; }   /* 高さは JS が表示中カードに合わせて可変 */
.p-onmusubi__card {
  grid-area: 1 / 1;
  align-self: start;   /* stretch させない（各カードを自身の内容の高さに。JS の高さ計測の基準） */
  width: 120rem;
  max-width: calc(100% - 12rem);
  margin-inline: auto;
  border: 2px solid var(--j-ink);
  border-top: 0;
  padding: 3.6rem 6.4rem;
  display: flex;
  flex-direction: column;
  gap: 2.3rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.p-onmusubi__card.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.4s ease, visibility 0s linear 0s;
}
.p-onmusubi__feature { display: grid; grid-template-columns: 39.8rem 47rem; gap: 4.8rem; align-items: start; margin-inline: auto; }
.p-onmusubi__photo { margin-top: 3rem; }
.p-onmusubi__photo img {
  width: 100%; height: 37.1rem; object-fit: cover;
  clip-path: url(#clip-onmusubi);
}
/* 写真フェードスライダー（img を重ねて opacity 切り替え。JS 側で .is-show を巡回） */
.p-onmusubi__photo--slider { position: relative; height: 37.1rem; }
.p-onmusubi__photo--slider img {
  position: absolute; left: 0; top: 0;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.p-onmusubi__photo--slider img.is-show { opacity: 1; }
.p-onmusubi__detail { display: flex; flex-direction: column; gap: 2.4rem; }
.p-onmusubi__info-header { display: flex; flex-direction: column; gap: 2.4rem; }
.p-onmusubi__owner-details { display: flex; flex-direction: column; gap: 1.6rem; }
.p-onmusubi__info-text { display: flex; flex-direction: column; gap: 1.8rem; }
.p-onmusubi__eyebrow { font-weight: 700; font-size: 2.4rem; letter-spacing: .08em; line-height: 1.8; }
.p-onmusubi__shop { font-weight: 700; font-size: 3.2rem; line-height: 1; }
.p-onmusubi__owner { font-weight: 700; font-size: 1.6rem; line-height: 1.8; letter-spacing: .08em; }
/* 店主名がない店舗でも行高を確保してレイアウトを揃える（空の p は行ボックスが立たず高さ0になるため） */
.p-onmusubi__owner:empty::before { content: "\00a0"; }
.p-onmusubi__rule { display: block; line-height: 0; overflow: visible; }
.p-onmusubi__rule svg { display: block; width: 100%; height: 1.8rem; overflow: visible; }
.p-onmusubi__text { font-size: 1.6rem; line-height: 1.8; letter-spacing: .08em; font-weight: 700; }
.p-onmusubi__shopinfo { display: grid; grid-template-columns: auto 1fr; gap: 2.4rem; align-items: start; max-width: 95.6rem; margin-inline: auto; }
.p-onmusubi__badge {
  display: grid; place-items: center;
  width: 12rem; height: 12rem;
  border: 2px solid var(--j-ink);
  border-radius: 50%;
  font-weight: 700; font-size: 1.6rem;
}
.p-onmusubi__shopbody { display: flex; flex-direction: column; gap: 1.8rem; }
.p-onmusubi__shopbody-desc { display: flex; flex-direction: column; gap: .8rem; }
.p-onmusubi__shopname { font-weight: 700; font-size: 2.4rem; letter-spacing: .04em; line-height: 1.25; }
.p-onmusubi__shopbody p { font-size: 1.6rem; line-height: 1.8; letter-spacing: .08em; font-weight: 700; }
.p-onmusubi__icons { display: flex; gap: 2rem; }
.p-onmusubi__icons img { width: 2.8rem; height: 2.8rem; transition: opacity .25s ease; }
.p-onmusubi__icons a:hover img { opacity: .5; }   /* 先方指示：ホバーで薄く */
.p-onmusubi__foot {
  width: 120rem;
  max-width: calc(100% - 12rem);
  margin: 3rem auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.p-onmusubi__dots { display: flex; gap: 2.4rem; align-items: center; }
.p-onmusubi__dots span {
  display: block;
  width: 1.6rem; height: 2.2rem;
  background: url(../img/journal/svg-dot-inactive.svg) center / contain no-repeat;
  transition: filter .2s ease;
}
/* 先方指示：ホバーで黒系に（サイズはそのまま・クリック後の見た目も従来どおり） */
.p-onmusubi__dots span:hover { filter: brightness(0); }
.p-onmusubi__dots span.is-active {
  width: 3.1rem; height: 4.8rem;
  background: url(../img/journal/svg-dot-active.svg) center / contain no-repeat;
}
.p-onmusubi__map {
  position: absolute;
  right: -1rem; bottom: -3rem;
  width: 22.9rem; height: 20rem;
  display: block;
}
.p-onmusubi__map img { width: 100%; height: 100%; object-fit: contain; }
/* 先方指示：いただきまっぷはホバーで一瞬ぷるぷるっとふるえる */
@keyframes j-purupuru {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(3deg); }
  40%  { transform: rotate(-2.6deg); }
  60%  { transform: rotate(1.8deg); }
  80%  { transform: rotate(-1deg); }
  100% { transform: rotate(0deg); }
}
.p-onmusubi__map:hover img { animation: j-purupuru .5s ease-in-out; }

/* ============================================================
   06 / Itadakimasu — ごはんのおとも
   ============================================================ */
.p-otomo { padding: 8rem 0 9rem; position: relative; }
.p-otomo::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 2px;
  background: var(--j-ink);
}
.p-otomo__roof {
  display: block;
  width: 120rem;
  max-width: calc(100% - 12rem);
  height: 20.5rem;
  margin-inline: auto;
  overflow: visible;
}
.p-otomo__house {
  width: 114rem;
  max-width: calc(100% - 12rem);
  margin-inline: auto;
  position: relative;
  border: 2px solid var(--j-ink);
  border-top: 0;
  padding: 7rem 6rem 8rem;
  margin-top: -.9rem;   /* px 固定だとタブレットで屋根線と枠が繋がらずズレるため rem 指定 */
}
.p-otomo__head { text-align: center; padding: 6rem 0 4rem; position: relative; top: 11rem; margin-top: -10rem; }
.p-otomo__lead { font-weight: 700; font-size: 2.5rem; letter-spacing: .04em; margin-bottom: 1.5rem; }
.p-otomo__wordmark { width: 63rem; max-width: 100%; margin-inline: auto; height: auto; }
.p-otomo__list { width: 100rem; max-width: 100%; margin: 4rem auto 0; }
.p-otomo__item {
  display: grid;
  grid-template-columns: 16rem 1fr auto 4.2rem;
  align-items: center;
  gap: 0 3rem;
  padding-right: 4.2rem;
  border-top: 2px solid var(--j-ink);
  cursor: pointer;
}
/* 先頭行の常時背景は先方指示で削除（背景はホバー時のみ） */
.p-otomo__item { transition: background-color .25s ease; }
.p-otomo__item:hover { background: #E8E8E8; }
.p-otomo__item:hover .p-otomo__more circle { fill: var(--j-ink); }
.p-otomo__item:hover .p-otomo__more path { fill: #fff; }
.p-otomo__list .p-otomo__item:last-child { border-bottom: 2px solid var(--j-ink); }
.p-otomo__thumb { width: 16rem; height: 16rem; overflow: hidden; }
.p-otomo__thumb img { width: 100%; height: 100%; object-fit: cover; }
.p-otomo__jp { font-weight: 700; font-size: 2.4rem; letter-spacing: .12em; }
.p-otomo__en { font-family: var(--j-display); font-size: 1.4rem; letter-spacing: .12em; margin-top: .8rem; }
.p-otomo__badge { width: 8rem; height: auto; }
.p-otomo__more svg { width: 4.2rem; height: 4.2rem; }
.p-otomo__bottom { text-align: center; margin-top: 5rem; }
.p-otomo__showmore {
  display: inline-block;
  font-weight: 700; font-size: 1.6rem; letter-spacing: .08em; line-height: 1.8;
  border-bottom: 2px solid var(--j-ink);
  padding-bottom: .2rem;
}

/* ============================================================
   07 / History — ものがたり
   ============================================================ */
.p-history { padding: 3rem 0 6rem; }   /* 先方指示：上の余白をデザインに合わせて狭く */
.p-history__scroll {
  width: 120rem;
  max-width: calc(100% - 12rem);
  margin-inline: auto;
  position: relative;
}
/* 巻物の左端 */
.p-history__scroll::before {
  content: '';
  position: absolute;
  left: -3.4rem;
  top: 11rem;
  bottom: 0;
  width: 11.3rem;
  background: url('../img/journal/history-line.svg') center / contain no-repeat;
}
.p-history__band { padding: 0rem 6rem 0 6rem; }
.p-history__year-row { display: flex; justify-content: flex-end; position: relative; top: 7rem; right: 4rem; }
.p-history__year-rule { display: none; }
.p-history__year {
  font-family: var(--j-display);
  font-size: 7.2rem;
  line-height: 1.986;
  white-space: nowrap;
  background: #F8F8F8;
  padding: 0 20px;
}
.p-history__body {
  display: flex;
  align-items: flex-start;
  gap: 2.6rem;
  border-top: 2px solid var(--j-ink);
  border-right: 2px solid var(--j-ink);
  border-bottom: 2px solid var(--j-ink);
  padding: 6rem 4rem;
}
.p-history__vtitle { display: flex; justify-content: space-between; width: 12.7rem; height: 28.8rem; margin-left: auto; align-items: flex-start; position: relative; z-index: 1; }
.p-history__vtitle-en { writing-mode: vertical-rl; font-family: var(--j-display); font-size: 1.4rem; line-height: 1.903; letter-spacing: .182rem; width: 2.7rem; margin-right: 1.8rem; margin-top: .4rem; margin-left: .2rem; }
.p-history__vtitle-jp { writing-mode: vertical-rl; font-weight: 700; font-size: 3.2rem; line-height: 1.1875; width: 8rem; letter-spacing: .6rem; }
/* 字送り・列間は rem 指定（px だと 1440px 未満で相対的に広がり、本文が左に見切れる） */
.p-history__text { writing-mode: vertical-rl; height: 31.8rem; display: flex; flex-direction: column; align-items: flex-start; gap: 2.6rem; overflow: hidden; }   /* 1列18字（最長170字の1代目が収まる深さ） */
.p-history__subtitle { font-weight: 700; font-size: 2.4rem; line-height: 1.6; letter-spacing: .7rem; }   /* 行間（縦組みの列間）をデザインに寄せて広く */
.p-history__copy { font-weight: 700; font-size: 1.5rem; line-height: 1.9; letter-spacing: .26rem; text-align: justify; }   /* 本原稿（最長170字）が箱に収まる字送り */
/* 縦書き（和文）内の半角数字が横倒しにならないよう正立させる */
.p-mv__tagline-jp,
.p-reading__t,
.p-reading__head,
.p-reading__art,
.p-history__text,
.p-history__vtitle-jp {
  text-orientation: upright;
}
.p-history__illust { width: 39.2rem; height: 30rem; flex-shrink: 0; margin-right: 9px; }
.p-history__illust img { width: 100%; height: 100%; object-fit: contain; }
.p-history__gens {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 5rem;
}
.p-history__gens a {
  display: grid; place-items: center;
  width: 7rem; height: 7rem;
  border: 1px solid var(--j-ink);
  border-radius: 50%;
  font-weight: 700; font-size: 1.4rem; letter-spacing: .06em;
  transition: background-color .2s ease, color .2s ease;
}
.p-history__gens a.is-current { background: var(--j-ink); color: #fff; }
.p-history__gens a:hover { background: var(--j-ink); color: #fff; }   /* 先方指示：ホバーで色を反転 */

/* ============================================================
   08 / Footer
   ============================================================ */
.p-foot {
  position: relative;
  isolation: isolate;
  background: url(../img/journal/ft-bg.webp) top center / cover no-repeat;
  margin-top: 10rem;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  border-radius: 50% 50% 0 0 / 14rem 14rem 0 0;
  padding: 12rem 0 4rem;
}
/* MV帯と同じく紙のざらざらテクスチャを重ねる（multiply で色は背景のまま粒子だけ乗せる） */
.p-foot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: url(../img/journal/body-bg.webp) top center / cover repeat;
  mix-blend-mode: multiply;
  opacity: .45;
  pointer-events: none;
}
.p-foot__inner {
  width: 115rem;
  max-width: calc(100% - 12rem);
  margin-inline: auto;
}
.p-foot__top { display: flex; justify-content: center; align-items: flex-start; gap: 6rem; }
.p-foot__menu {
  display: flex;
  align-items: flex-start;   /* 区切り線を各項目のテキスト長に合わせる（Figma） */
  gap: 2.2rem;
  margin: .5rem 0 0 1.9rem;
}
.p-foot__menu a {
  writing-mode: vertical-rl;
  font-weight: 700;
  font-size: 1.8rem;
  letter-spacing: .6rem;   /* Figma: 字送り24px（18px＋6px） */
  position: relative;
  padding-right: 0.4rem;
}
.p-foot__menu a::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 1px;
  background: var(--j-ink);
}
.p-foot__menu a.is-en { writing-mode: vertical-rl; text-orientation: sideways; letter-spacing: .36rem; }   /* Figma: tracking 3.6px */
.p-foot__brand-logo { height: 45.9rem; cursor: pointer; }   /* クリックでページトップへ（JS） */
.p-foot__brand-logo img { width: auto; height: 100%; display: block; }

.p-foot__links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 12rem;
  position: relative;
  left: 1rem;
}
.p-foot__link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20rem;
  overflow: hidden;
  color: #fff;
  text-align: center;
}
.p-foot__link img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.p-foot__link::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.4); transition: background-color .3s ease; }
.p-foot__link:hover::after { background: rgba(0,0,0,.15); }   /* 先方指示：ホバーで少し明るく */
.p-foot__link-texts {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
}
.p-foot__link-jp { font-weight: 700; font-size: 1.8rem; line-height: 1.8; letter-spacing: .12em; }
.p-foot__link-en { font-family: var(--j-display); font-size: 1.4rem; line-height: 1.9; letter-spacing: .13em; }

.p-foot__info { display: flex; align-items: center; gap: 5rem; margin-top: 12rem; justify-content: center; }
.p-foot__logo { width: 255px; flex-shrink: 0; }
.p-foot__logo img { width: 100%; height: auto; display: block; }
.p-foot__address { font-style: normal; font-weight: 700; font-size: 1.6rem; line-height: 1.8; letter-spacing: .1rem; position: relative; left: 3.1rem; }

.p-foot__copy { text-align: center; margin-top: 18rem; font-size: 1rem; line-height: 1.7; color: #1c3c44; }

/* ============================================================
   p-otomo Modal
   ============================================================ */
.p-otomo-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
  /* 閉じるボタンの position: absolute 基準 */
  isolation: isolate;
}
.p-otomo-modal.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease, visibility 0s linear 0s;
}
.p-otomo-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  border: 0;
  cursor: pointer;
  width: 100%;
}
.p-otomo-modal__inner {
  position: relative;
  display: flex;
  width: 118.3rem;
  max-width: calc(100vw - 8rem);
  height: 69.7rem;
  max-height: calc(100vh - 8rem);
  background: #faf9f5;
  overflow: hidden;
}
.p-otomo-modal__wrap {
  position: relative;
}
.p-otomo-modal__close {
  position: absolute;
  top: -7rem;
  right: -8rem;
  width: 6rem;
  height: 6rem;
  border: 0;
  background: none;
  cursor: pointer;
  z-index: 1;
  padding: 0;
}
.p-otomo-modal__close svg { width: 100%; height: 100%; }
.p-otomo-modal__image {
  width: 46.5rem;
  flex-shrink: 0;
  overflow: hidden;
}
.p-otomo-modal__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-otomo-modal__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  min-width: 0;
}
.p-otomo-modal__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  padding: 4.8rem;
}
.p-otomo-modal__label-wrap { display: flex; justify-content: center; }
.p-otomo-modal__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0.2rem solid var(--j-ink);
  border-radius: 5.1rem;
  padding: 0.8rem 3.2rem;
  font-family: var(--j-gothic);
  font-weight: 700;
  font-size: 2.8rem;
  color: var(--j-ink);
}
.p-otomo-modal__text {
  font-family: var(--j-gothic);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.8;
  letter-spacing: 0.08em;
  color: var(--j-ink);
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}
.p-otomo-modal__rule { border: 0; border-top: 1px solid #ccc; margin: 0; }
.p-otomo-modal__detail {
  display: flex;
  align-items: center;
  gap: 3.6rem;
  padding: 4rem;
  height: 25.2rem;
  flex-shrink: 0;
}
.p-otomo-modal__product {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  width: 27.4rem;
  flex-shrink: 0;
}
.p-otomo-modal__product-info { display: flex; align-items: center; gap: 1.8rem; }
.p-otomo-modal__product-badge { width: 7rem; height: 8.5rem; object-fit: contain; display: block; }
.p-otomo-modal__product-jp { font-family: var(--j-gothic); font-weight: 700; font-size: 2rem; color: var(--j-ink); }
.p-otomo-modal__product-en { font-family: "Copperplate", "Copperplate Gothic Light", serif; font-size: 1.4rem; letter-spacing: 0.04em; }
.p-otomo-modal__product-desc { font-family: var(--j-gothic); font-weight: 700; font-size: 1.4rem; letter-spacing: 0.04em; line-height: 2; color: var(--j-ink); }
.p-otomo-modal__chart { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 1.8rem; }
.p-otomo-modal__chart-row {}
/* Figma: guide（280:2344）— 目盛りラベルはセルの上、【】ラベルはセル行と垂直センター */
.p-otomo-modal__chart-bar {
  display: flex;
  align-items: flex-end;
  gap: 1rem;
  font-family: var(--j-gothic);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--j-ink);
}
.p-otomo-modal__chart-label {
  font-size: 1.4rem;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  height: 2.1rem;   /* セルと同じ高さにしてセル行と垂直センター */
}
.p-otomo-modal__chart-scale { flex: 1; }
.p-otomo-modal__chart-ends { display: flex; justify-content: space-between; margin-bottom: .4rem; }
.p-otomo-modal__chart-min,
.p-otomo-modal__chart-max { white-space: nowrap; }
.p-otomo-modal__chart-cells {
  display: flex;
}
.p-otomo-modal__chart-cells span {
  flex: 1;
  height: 2.1rem;
  border: 1px solid var(--j-ink);
  background: transparent;
}
.p-otomo-modal__chart-cells span + span { border-left: 0; }   /* 隣接セルは枠線を共有 */
.p-otomo-modal__chart-cells span.is-fill {
  background: #1d3994;   /* Figma: 塗りは中面のみ、枠線は黒のまま */
}
/* 先方指示：グラフの塗りは各品種のロゴカラーに合わせる（icon01〜04 から実測） */
#otomo-modal-1 .p-otomo-modal__chart-cells span.is-fill {
  background: #015c40;   /* ふっくりんこ（深緑） */
}
#otomo-modal-2 .p-otomo-modal__chart-cells span.is-fill {
  background: #1d3a94;   /* ななつぼし（青） */
}
#otomo-modal-3 .p-otomo-modal__chart-cells span.is-fill {
  background: #d01224;   /* ゆめぴりか（赤） */
}
#otomo-modal-4 .p-otomo-modal__chart-cells span.is-fill {
  background: #ea618f;   /* ゆきさやか（ピンク） */
}

/* ============================================================
   SP レイアウト（< 743px）— sp_調整.jpg（375px アートボード）準拠
   rem を 375px 基準に切り替え（1rem = 100vw/37.5 ≒ 10px @375）、
   各セクションを SP 専用レイアウトに再構成する。
   ============================================================ */
@media (max-width: 743px) {
  html:has(.l-sheet) { font-size: calc(100vw / 37.5); }
  /* iOS Safari はステータスバー／ダイナミックアイランド周りを html 背景で塗る。
     SP ではシートが全幅で --j-side（左右余白色）は見えないため、白に差し替える */
  html:has(.l-sheet) { background: var(--color-surface-body); }

  /* --- 01 / MV（Figma SP フレーム準拠）---
     水色帯は y=203 から敷かれ、写真（幅 28.55rem・右下角丸 12rem）の
     右側は上が白・y=203 以降が水色。タグラインは写真下の水色帯上。 */
  .p-mv { height: 64.9rem; padding-bottom: 0; }  /* エッセイ写真 y=649 に接続 */
  .p-mv__bg { top: 20.3rem; min-height: 0; }
  /* relative（静的フロー＋ z-index:1 を有効化）にして絶対配置の水色帯より前面へ */
  .p-mv__photo { position: relative; left: auto; width: 28.55rem; height: 53.2rem; border-bottom-right-radius: 12rem; }
  .p-mv__photo img { border-bottom-right-radius: 12rem; }
  .p-mv__brand { top: 2.1rem; left: auto; right: 1.8rem; width: 5.4rem; }
  /* SP：MENU ボタンは季節ナビの下（MV 内の定位置）。追従は PC と同じ JS 制御 */
  .p-mv__menu {
    display: block;
    top: 24.8rem;
    left: auto;
    right: 2.5rem;
  }
  .p-mv__menu-img { width: 3.6rem; }
  .p-mv__menu-bowl { height: 1.12rem; }
  /* ラベルはお椀の直下・中央（デザイン合わせで PC と同じ組み方に） */
  .p-mv__menu-label { height: .8rem; margin-top: .1rem; }
  .p-mv__menu-label .p-mv__menu-label--menu { width: 2.5rem; height: .68rem; }
  .p-mv__menu-label .p-mv__menu-label--close { width: 2.9rem; height: .73rem; }
  .p-mv__menu-seed { left: 2.15rem; top: -.32rem; width: .88rem; height: .88rem; }
  /* SP：開いたナビは画面上部に固定（パネルが縦長のため、ボタン位置から開くと収まらない）。
     サイズ・文字はデザイン（Group 156 実測 259×398）に忠実に */
  .p-mv__nav {
    position: fixed;
    top: .7rem;
    left: auto;
    right: 1rem;
    width: 25.4rem;
    height: auto;
    padding: 6rem 0 3.8rem 2.6rem;
  }
  /* CLOSE ボタンは JS の inline top/left（追従位置）をそのまま維持し、
     開閉で位置が飛ばないようにする（上書きルールなし） */
  .p-mv__nav-list li { font-size: 1.45rem; }
  .p-mv__nav-list li + li { margin-top: 1.9rem; }
  .p-mv__nav-links { margin-top: 3.7rem !important; }
  .p-mv__nav-links li { font-size: 1.2rem; }
  .p-mv__nav-links li + li { margin-top: 1rem; }
  .p-mv__nav-links img { width: 1.1rem; height: 1.3rem; }
  /* 季節ナビ：写真右側・墨色ローマ字（Figma: Aoboshi 14px / 右端 x=323 / 行送り25px） */
  .p-mv__seasons {
    top: 39.7rem;
    left: auto;
    right: 4.3rem;
    width: auto;
    font-size: 1.4rem;
    letter-spacing: .08em;
  }
  .p-mv__seasons a { padding: .5rem 0; line-height: 1.1; }
  /* 矢印は輪郭円＋シャフト付き「←」（Figma: Group 134 20×20） */
  .p-mv__seasons a::after {
    width: 2rem;
    height: 2rem;
    margin-left: 1.1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='none' stroke='%23231815' stroke-width='1.5'/%3E%3Cpath d='M7 12h10M7 12l4-4M7 12l4 4' fill='none' stroke='%23231815' stroke-width='1.5'/%3E%3C/svg%3E");
  }
  /* タグライン：写真の上（下部左）に重ねる — Figma: Frame 627567 y=547 */
  .p-mv__tagline {
    top: 54.7rem;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: .8rem;
    padding: 0 2rem;
  }
  .p-mv__tagline-jp { writing-mode: horizontal-tb; font-size: 2rem; line-height: 1.05; letter-spacing: .12em; }
  .p-mv__tagline-en { writing-mode: horizontal-tb; order: -1; font-family: var(--j-display); font-weight: 400; font-size: 1.2rem; line-height: 1.55; letter-spacing: .13em; }

  /* --- 02 / Essay：写真・クレジット → タイトル → 本文 の順に縦積み ---
     水色帯は y=961（タイトルの中央あたり）で終わる（Figma: Rectangle 2 y=203 h=758） */
  .p-essay {
    position: relative;
    isolation: isolate;
    background: none;
    padding: 0 0 1rem;
  }
  /* 帯：グラデーションのハードストップは端末により境界へ水色の1pxフリンジ線が出るため、
     実要素（::before）のベタ塗りに変更。上へ1px重ねて MV 帯との継ぎ目のヘアラインも防ぐ */
  .p-essay::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: calc(31.2rem + 1px);
    background: var(--j-band);
    transition: background-color .8s ease;
    z-index: -1;
    pointer-events: none;
  }
  .p-essay__inner {
    display: flex;
    flex-direction: column;
    width: auto;
    margin: 0;
    gap: 0;
  }
  .p-essay__media { order: -1; }
  .p-essay__text { padding: 1.7rem 2rem 0; }
  /* Figma: Zen Old Mincho 36px / lh1.6 / ls .12em・1行表示（タイトル上端 y=923） */
  .p-essay__title { font-size: 3.6rem; line-height: 1.6; letter-spacing: .12em; margin-bottom: 2.4rem; }
  .p-essay__title br { display: none; }   /* 夏・春は1行に収まる */
  /* 秋・冬はタイトルが長く1行に収まらないため、データ内の <br> 位置で改行させる */
  .p-journal[data-season="autumn"] .p-essay__title br,
  .p-journal[data-season="winter"] .p-essay__title br { display: inline; }
  .p-essay__body { font-size: 1.4rem; line-height: 2.4; letter-spacing: .04em; }
  .p-essay__note { margin-top: 2.4rem; font-size: 1rem; }
  /* 写真：左 9.9rem オフセット・右端まで（Figma: x=99 w=276 h=180.5）
     .p-journal img の margin-bottom:10px を打ち消して図版高さを 180.5px に固定 */
  .p-essay__photo-lg { margin-left: 9.9rem; }
  .p-essay__photo-lg img { display: block; height: 18.05rem; margin-bottom: 0; }
  /* クレジット：写真と同じ左 9.9rem 起点・幅 27.5rem（二重罫線 w=275・右端 x=374） */
  .p-essay__en {
    width: auto;
    margin: 1.05rem .1rem 0 9.9rem;
    gap: 0;
    justify-content: space-between;
    font-size: 1rem;
    line-height: 1.8;
    padding-bottom: 1.2rem;
  }
  /* 赤い印章：写真右下に重なる（Figma: x=311 y=776 w=63.6） */
  .p-essay__stamp { right: 0; top: -6.4rem; bottom: auto; width: 6.36rem; }

  /* --- 03 / Reading（Figma SP フレーム準拠）---
     ピルは幅 25.6rem 中央、縦組みは行送り 2.5rem・字送り ~1.54rem。
     記事Aは本体（13列）→ 写真（左ブリード 22.9rem）＋右横に続き4列。 */
  .p-reading { padding: 1.5rem 0 0; }   /* sp_調整22: エッセイ→ピルの間隔 */
  .p-reading__cols {
    display: flex;
    flex-direction: column;
    width: auto;
    height: auto;
    margin: 0 2.5rem;   /* 13列 × 2.5rem = 32.5rem がちょうど収まる余白 */
  }
  /* 見出しピル：横組み・幅 25.6rem 中央（Figma: x=54..310 h=40） */
  .p-reading__head--a,
  .p-reading__head--b,
  .p-reading__head--c,
  .p-reading__head--sa,
  .p-reading__head--sb,
  .p-reading__head--aa,
  .p-reading__head--ab,
  .p-reading__head--wa,
  .p-reading__head--wb {
    position: static;
    writing-mode: horizontal-tb;
    width: 25.6rem;
    align-self: center;
    height: 4rem;
    padding: 0 1rem;
    font-size: 1.5rem;
    letter-spacing: .25em;
    line-height: 1.3;
  }
  /* 春ピルAは文言が長いので幅を内容に合わせる */
  .p-reading__head--sa { width: auto; min-width: 25.6rem; padding: 0 1.6rem; }
  .p-reading__head--a { order: 1; margin-bottom: 2.6rem; }
  .p-reading__art--a  { order: 2; }
  .p-reading__arow    { order: 3; }
  .p-reading__head--b { order: 4; margin: 4rem 0 2.6rem; }
  .p-reading__art--b  { order: 5; }
  .p-reading__spphoto--field { order: 6; }
  .p-reading__head--c { order: 7; margin: 2rem 0 2.6rem; }   /* sp_調整22 */
  .p-reading__art--c  { order: 8; }
  .p-reading__crow    { order: 9; }

  /* --- 03s / Reading SPRING（SP）— Illustrator「Spring_sp」アートボード実測 ---
     本文: YuGothic 14px・字送り.22em・行送り A=25.5px / B=28.35px・段間36px。
     コンテンツ幅は他より広い 333px（x=21..354）。 */
  .p-reading__head--sa {
    order: 1;
    width: calc(100% + .8rem);
    margin: 0 -.4rem 2.4rem;
    height: 9.7rem;              /* 全幅・2行ピル（AI: 335×96.8） */
    font-size: 2rem;
    line-height: 1.36;
    border-radius: 7rem;
  }
  .p-reading__head--sb {
    order: 4;
    width: calc(100% + .8rem);
    margin: 7.2rem -.4rem 2.4rem;   /* 記事A写真行の下 72px（AI実測） */
    height: 4.3rem;              /* 全幅・1行ピル（AI: 333×43.3） */
    font-size: 2rem;
  }
  .p-reading__cols--spring .p-reading__art {
    font-size: 1.4rem;
    letter-spacing: .22em;
    text-align: justify;         /* AI: 均等揃え（各列を天地いっぱいに） */
    width: calc(100% + .8rem);
    margin-left: -.4rem;
  }
  /* 段は上から順に満杯にする（既定の balance だと全段に均等配分されて左が空く） */
  .p-reading__cols--spring .p-reading__art--a  { height: 134rem; column-count: 4; column-gap: 3.6rem; column-fill: auto; line-height: 1.822; }
  .p-reading__cols--spring .p-reading__arow    { margin-top: 3.6rem; }
  .p-reading__cols--spring .p-reading__arow .p-reading__photo { width: 25.1rem; height: 38.3rem; }   /* AI: 251×383 左端付け */
  .p-reading__cols--spring .p-reading__art--a2 { height: 30.8rem; margin-top: 0; line-height: 1.822; width: auto; margin-left: 0; }
  .p-reading__cols--spring .p-reading__art--b  { height: 62.8rem; column-count: 2; column-gap: 3.6rem; column-fill: auto; line-height: 1.978; }
  /* 結び：テキスト左端付け＋ハウス内写真右（右端ブリード） */
  .p-reading__cols--spring .p-reading__crow { margin: 3.6rem -2.5rem 0 0; justify-content: space-between; }
  .p-reading__cols--spring .p-reading__art--c2 { flex: none; width: max-content; max-width: 12rem; height: 29.6rem; margin: 0 auto 0 0; line-height: 1.822; }
  .p-reading__cols--spring .p-reading__spphoto--shouse { width: 25.1rem; height: 38.3rem; margin-top: 1.1rem; flex-shrink: 0; }
  /* コラージュ：水田（右上・137×92）＋集合写真（左下・204×137、7pxほど重なり集合が前面） */
  .p-reading__scollage { order: 10; position: relative; margin: 0 -2.5rem; height: 18.5rem; }
  .p-reading__spphoto--sfield { position: absolute; left: 21.8rem; top: 2.4rem; width: 13.7rem; height: 9.2rem; }
  .p-reading__spphoto--sgroup { position: absolute; left: 2.05rem; top: 4.75rem; width: 20.4rem; height: 13.7rem; }

  /* --- 03a / Reading AUTUMN（SP）— Illustrator「Autumn_sp」実測 ---
     ピルは全幅1行（h43.3）。記事Aは4段で完結し写真は単独・左端付け。
     記事Bは2段＋末尾「す。」1列が右端に残り、下にコラージュ2枚。 */
  .p-reading__head--aa {
    order: 1;
    width: calc(100% + .8rem);
    margin: 0 -.4rem 2.4rem;
    height: 4.3rem;
    font-size: 2rem;
  }
  .p-reading__head--ab {
    order: 4;
    width: calc(100% + .8rem);
    margin: 7.2rem -.4rem 2.4rem;
    height: 4.3rem;
    font-size: 2rem;
  }
  .p-reading__cols--autumn .p-reading__art {
    font-size: 1.4rem;
    letter-spacing: .22em;
    text-align: justify;
    width: calc(100% + .8rem);
    margin-left: -.4rem;
  }
  .p-reading__cols--autumn .p-reading__art--a { height: 129rem; column-count: 4; column-gap: 3.6rem; column-fill: auto; line-height: 1.822; }
  .p-reading__cols--autumn .p-reading__arow { margin-top: 5.1rem; }
  .p-reading__cols--autumn .p-reading__arow .p-reading__photo { width: 25.1rem; height: 38.3rem; }
  .p-reading__cols--autumn .p-reading__art--b { height: 65.2rem; column-count: 2; column-gap: 3.6rem; column-fill: auto; line-height: 1.978; }
  /* コラージュ（稲穂137×92右上・収穫204×137左下。結び「す。」は本文2段目に統合済み） */
  .p-reading__acollage { order: 9; position: relative; margin: -4rem -2.5rem 0; height: 24.4rem; }
  .p-reading__spphoto--afield { position: absolute; left: 21.8rem; top: 8.4rem; width: 13.7rem; height: 9.2rem; }
  .p-reading__spphoto--agroup { position: absolute; left: 2.05rem; top: 10.7rem; width: 20.4rem; height: 13.7rem; }

  /* --- 03w / Reading WINTER（SP）— Illustrator「Winter_sp」実測 ---
     記事A=3段＋写真行（写真左・結び右）。記事B=1段 →〈本文3列＋写真右〉→
     2段 →〈写真左＋結び2列〉→ 全幅写真、の5パート構成。 */
  .p-reading__head--wa {
    order: 1;
    width: calc(100% + .8rem);
    margin: 0 -.4rem 2.4rem;
    height: 4.3rem;
    font-size: 2rem;
  }
  .p-reading__head--wb {
    order: 4;
    width: calc(100% + .8rem);
    margin: 7rem -.4rem 2.4rem;
    height: 4.3rem;
    font-size: 2rem;
  }
  .p-reading__cols--winter .p-reading__art {
    font-size: 1.4rem;
    letter-spacing: .22em;
    text-align: justify;
    width: calc(100% + .8rem);
    margin-left: -.4rem;
  }
  .p-reading__cols--winter .p-reading__art--a { height: 99.6rem; column-count: 3; column-gap: 3.6rem; column-fill: auto; line-height: 1.822; }   /* 1列18字（不足すると4段目が写真行に重なる） */
  .p-reading__cols--winter .p-reading__arow { margin-top: 3.6rem; }
  .p-reading__cols--winter .p-reading__arow .p-reading__photo { width: 25.1rem; height: 38.3rem; }
  .p-reading__cols--winter .p-reading__art--a2 { height: 29.6rem; margin-top: 0; line-height: 1.822; width: auto; margin-left: 0; }
  .p-reading__cols--winter .p-reading__art--b { height: 30.8rem; line-height: 1.978; }   /* 1段のみ（1列18字にして12列に収め、左あふれを防ぐ） */
  /* 本文続き（左3列）＋写真右（右端ブリード） */
  .p-reading__wrow1 { order: 6; display: flex; align-items: flex-start; justify-content: space-between; margin: 2.6rem -2.5rem 0 0; }   /* b1を12px高くした分を相殺 */
  .p-reading__cols--winter .p-reading__art--wmid { flex: none; width: max-content; max-width: 12rem; height: 29.6rem; margin: 0; line-height: 1.978; }
  .p-reading__spphoto--wkitchen { width: 25.1rem; height: 38.3rem; flex-shrink: 0; }
  /* 本文2段組（続き） */
  .p-reading__art--b2 { order: 7; }
  .p-reading__cols--winter .p-reading__art--b2 { height: 65.2rem; column-count: 2; column-gap: 3.6rem; column-fill: auto; line-height: 1.978; margin-top: 3.6rem; }
  /* 倉庫写真（左端付け）＋結び（右2列） */
  .p-reading__wrow2 { order: 8; display: flex; align-items: flex-start; margin: 3.6rem 0 0 -2.5rem; }
  .p-reading__spphoto--wwork { width: 24rem; height: 16.1rem; flex-shrink: 0; }
  .p-reading__cols--winter .p-reading__art--wtail { flex: 1; height: 29.6rem; margin: 0; line-height: 1.978; width: auto; }
  /* 下段写真（AI: 334×219 中央） */
  .p-reading__cols--winter .p-reading__spphoto--group { order: 10; width: 33.4rem; height: 21.9rem; margin: 3.8rem auto 0; }

  /* 縦組み本文（SP）— Figma: 字送り15.4px（fs1.35 × ls.14em）・列ピッチ25px
     ※ margin-inline: auto は縦書きボックスでは stretch を無効化して
       max-content 幅ではみ出すため使わない（width: 100% 固定） */
  .p-reading__art,
  .p-reading__t--c {
    writing-mode: vertical-rl;
    font-family: var(--j-gothic);
    font-size: 1.35rem;
    line-height: 1.852;
    letter-spacing: .14em;   /* 先方指示：文字間を少し詰める（.16em→.14em）。
                                ※ 1列の字数が変わらないよう各ボックスの height も同率で詰めている */
    text-align: start;
    width: 100%;
  }
  /* 本文A：縦書きを上下2段組みに（縦書きでは column が段として上下に積まれる）。
     季節ごとの height 上書きはそのまま各季節の2段に適用される。
     ※ height は段間ギャップ3rem＋端数分を単段時より広めに取る（不足すると
       あふれた3段目が下の要素に重なって文字が二重に見える） */
  .p-reading__art--a { height: 68.8rem; column-count: 2; column-gap: 3rem; }
  .p-reading__art--b { height: 33.9rem; }
  .p-reading__art--c { height: 34.4rem; }
  /* 写真＋記事A末尾の2カラム行（写真は左端までブリード） */
  .p-reading__arow {
    display: flex;
    align-items: flex-start;
    margin: 2rem 0 0 -2.5rem;
  }
  .p-reading__photo {
    position: static;
    width: 22.9rem;
    height: 37.7rem;
    margin: 0;
    flex-shrink: 0;
  }
  .p-reading__photo img { height: 100%; margin-bottom: 0; }
  .p-reading__art--a2 {
    flex: 1;
    width: auto;
    height: 31.4rem;
    margin-top: 2.8rem;
  }
  /* 草刈り写真＋記事C末尾の2カラム行（写真は左端から。Figma: 写真 x0..203 h158） */
  .p-reading__crow {
    display: flex;
    align-items: flex-start;
    margin: 2.4rem 0 0 -2.5rem;
  }
  .p-reading__crow .p-reading__spphoto--mow {
    width: 20.3rem;
    height: 15.8rem;
    margin: 0;
    flex-shrink: 0;
  }
  .p-reading__art--c2 {
    flex: 1;
    width: auto;
    height: 33.4rem;
    margin-top: 0;
  }
  /* SP 写真 */
  .p-reading__spphoto { margin: 0; overflow: hidden; background: var(--j-grey); }
  .p-reading__spphoto img { width: 100%; height: 100%; object-fit: cover; display: block; margin-bottom: 0; }
  /* B下の風景写真：幅 31.14rem 中央・角丸なし（Figma: x=31.8 w=311.4 h=195） */
  /* B下の風景写真：本文下 3.2rem・中央寄せ（.p-reading__spphoto の margin:0 より後で指定して勝たせる） */
  .p-reading__spphoto--field { width: 31.14rem; height: 19.5rem; margin: 3.2rem auto 0; }
  /* PC の2枚組写真は SP では各記事下に分割表示 */
  .p-readingpair { display: none; }

  /* --- 04 / Gallery（Figma SP フレーム準拠）---
     SUMMER 中央（Aoboshi 12px）＋ 12px 下に全幅二重罫線（上0.5px／下1px）、
     罫線の 5px 下から 2列グリッド。最終セルのみ右下角丸 3.9rem。 --- */
  .p-gallery { padding: 3rem 0 0; }   /* sp_調整22 */
  .p-gallery__head { border-bottom: 0; padding: 0; text-align: center; }
  .p-gallery__head::before { display: none; }  /* SP は ::after の二重罫線のみ */
  .p-gallery__head::after {
    content: "";
    position: static;
    display: block;
    height: .33rem;
    margin-top: 1.2rem;
    background: none;
    border-top: .05rem solid var(--j-ink);
    border-bottom: .1rem solid var(--j-ink);
  }
  .p-gallery__label { font-size: 1.2rem; letter-spacing: .13em; }
  .p-gallery__grid { grid-template-columns: repeat(2, 1fr); margin-top: .5rem; }
  .p-gallery__cell.is-round { border-bottom-right-radius: 3.9rem; }

  /* --- 05 / Onmusubi（Figma SP フレーム Group 152 準拠）--- */
  .p-onmusubi { padding: 3.3rem 0 15rem; }   /* まっぷ（拡大後）が境界線の手前で収まる高さ */
  .p-onmusubi::after { display: none; }  /* 境界線は次セクションの白カード上辺に置換 */
  /* .p-journal img の margin-bottom:10px とベースライン余白を打ち消し */
  .p-onmusubi img { margin-bottom: 0; display: block; }
  /* オーナメント：SP 専用書き出し（600×85.4）を全幅ブリードで中央配置 */
  .p-onmusubi__ornament {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 60rem;
    max-width: none;
    margin-bottom: .5rem;
  }
  .p-onmusubi__card {
    width: auto;
    max-width: none;
    margin: 0;
    border: 0;
    padding: 0 1.7rem 0 2.2rem;
    gap: 2.1rem;
  }
  .p-onmusubi__feature { display: flex; flex-direction: column; gap: 3.3rem; margin: 0; }
  /* 写真：おにぎり型クリップのまま 21.3rem × 19.8rem・中央（Figma: x=81 213×198） */
  .p-onmusubi__photo { margin: 0 auto; width: 21.3rem; }
  .p-onmusubi__photo img { width: 100%; height: 19.8rem; }
  .p-onmusubi__photo--slider { height: 19.8rem; }
  .p-onmusubi__detail { gap: 2.15rem; }
  .p-onmusubi__info-header { gap: 3.8rem; align-items: center; text-align: center; }
  .p-onmusubi__eyebrow { font-size: 1.6rem; line-height: 1.5; letter-spacing: .08em; }
  .p-onmusubi__owner-details { gap: .45rem; align-items: center; }
  .p-onmusubi__shop { font-size: 2.4rem; letter-spacing: .04em; }
  .p-onmusubi__owner { font-size: 1.4rem; letter-spacing: .08em; }
  /* ギザギザ罫線：SP でも表示（Figma: x=21 w=332 h=12） */
  .p-onmusubi__rule svg { height: 1.2rem; }
  .p-onmusubi__info-text { gap: 1.6rem; }
  .p-onmusubi__text { font-size: 1.4rem; line-height: 2; letter-spacing: .08em; }
  .p-onmusubi__shopinfo { grid-template-columns: 5.8rem 1fr; gap: 0 2.2rem; max-width: none; }
  .p-onmusubi__badge { width: 5.8rem; height: 5.7rem; font-size: 1.2rem; line-height: 1.4; letter-spacing: .08em; text-align: center; }
  .p-onmusubi__shopbody { display: contents; }
  .p-onmusubi__shopname { display: none; }
  .p-onmusubi__shopbody p { font-size: 1.4rem; line-height: 1.8; letter-spacing: .08em; }
  /* アイコン：説明文と同じ左位置に左寄せ（Figma: x=103 36×36 gap14） */
  .p-onmusubi__icons { grid-column: 2; justify-content: flex-start; gap: 1.4rem; margin-top: 1.6rem; }
  .p-onmusubi__icons img { width: 3.6rem; height: 3.6rem; }
  /* 前後矢印（Figma 491:164: 26×26 / 店名ブロックの中央・左16・右17。
     画像は Figma 書き出しの svg-onmusubi-arrow.svg（viewBox 29 に円のはみ出し分を含む） */
  .p-onmusubi__arrow {
    position: absolute;
    top: 43.4rem;
    width: 2.6rem;
    height: 2.6rem;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    z-index: 3;
  }
  .p-onmusubi__arrow img {
    position: absolute;
    top: -.15rem;
    left: -.15rem;
    width: 2.9rem;
    height: 2.9rem;
    max-width: none;   /* ボタン幅 2.6rem の max-width:100% に潰されて縦に歪むのを防ぐ */
    margin: 0;
  }
  .p-onmusubi__arrow--prev { left: 1.6rem; }
  .p-onmusubi__arrow--next { right: 1.7rem; }
  .p-onmusubi__arrow--next img { transform: scaleX(-1); }
  /* ドット：中央寄せ。アクティブ＝種形（下線は先方指示で削除） */
  .p-onmusubi__foot {
    width: auto;
    max-width: none;
    margin: 4.2rem 2.2rem 0;
    justify-content: center;
  }
  .p-onmusubi__dots { gap: 1.35rem; align-items: flex-end; }
  .p-onmusubi__dots span { width: 2.07rem; height: 2.27rem; }
  .p-onmusubi__dots span.is-active { width: 2.96rem; height: 3.25rem; position: relative; }
  /* いただきまっぷ：ドット下・右寄せ（DevTools 実測値を反映。height は基本ルールの 20rem のまま） */
  .p-onmusubi__map { right: -1rem; bottom: auto; top: 5rem; width: 12rem; height: 15rem; }

  /* --- 06 / Itadakimasu（Figma SP フレーム Group 153 準拠）---
     セクション全体が白背景カード（極細ボーダー・左右は画面外までブリード）。
     リード文なし・SP専用屋根（2本線＋小窓＋右煙突）・バッジは品名の直後。 */
  .p-otomo {
    padding: 2rem 0 2.6rem;   /* sp_調整22: リード文をカード上辺の直下に */
    background: #fff;
    border-top: .06rem solid var(--j-ink);
    border-bottom: .06rem solid var(--j-ink);
  }
  .p-otomo::after { display: none; }  /* 旧セパレータはカードの境界線に置換 */
  .p-otomo img { margin-bottom: 0; display: block; }
  .p-otomo__head { top: 0; margin-top: 0; padding: 0; }
  /* リード文はワードマーク（英語ロゴ画像）と同幅に両端揃え（先方指示：ロゴ的な扱い） */
  .p-otomo__lead {
    font-size: 1.25rem;
    letter-spacing: .04em;
    margin-bottom: 1.2rem;
    width: 33.53rem;
    max-width: 100%;
    margin-inline: auto;
    text-align: justify;
    text-align-last: justify;
  }
  .p-otomo__wordmark { width: 33.53rem; }
  .p-otomo__roof { display: none; }   /* PC 用屋根は非表示（_pc でも二重に保険） */
  .p-otomo__roof-sp {
    display: block;
    width: 35.8rem;
    height: auto;
    margin: .4rem auto -.49rem;
    overflow: visible;
  }
  .p-otomo__house {
    width: 33.4rem;
    max-width: none;
    border: .11rem solid var(--j-ink);
    border-top: 0;              /* 上辺は屋根が閉じるためボーダーなし */
    padding: 6.2rem 0 0;
    margin-top: 0;
  }
  .p-otomo__list { width: 100%; margin-top: 0; }
  /* 行：サムネ | テキスト（品名＋英字のブロック） | バッジ | 矢印
     テキストブロックは上下 28.1px（行パディング）＋左右 1rem。
     names は 1fr だが minmax(0,1fr) で縮められるようにし、はみ出しを防ぐ */
  .p-otomo__item {
    grid-template-columns: 7.77rem minmax(0, 1fr) auto 2.2rem;
    align-items: center;
    gap: 0;
    padding: 2.81rem 1.2rem 2.81rem 0;
    border-top: .11rem solid var(--j-ink);
  }
  .p-otomo__list .p-otomo__item:last-child { border-bottom: .11rem solid var(--j-ink); }
  .p-otomo__thumb {
    width: 7.77rem;
    height: auto;
    align-self: stretch;   /* 行の上下罫線までぴったり（負マージンでpadding分も埋める） */
    margin: -2.81rem 0 -2.81rem 0;
  }
  .p-otomo__names { display: block; min-width: 0; padding: 0 1rem; }
  .p-otomo__jp { font-size: 1.53rem; letter-spacing: .068em; line-height: 1.3; }
  .p-otomo__en { font-family: var(--j-display); font-size: .8rem; letter-spacing: .23em; margin-top: .88rem; }
  .p-otomo__badge { width: auto; height: 3.47rem; margin: 0 1rem 0 0; }
  .p-otomo__more svg { width: 2rem; height: 4rem; }
  /* 先頭（アクティブ）行は矢印を黒塗りに（Figma: 行1の矢印） */
  .p-otomo__item.is-first .p-otomo__more circle { fill: var(--j-ink); }
  .p-otomo__item.is-first .p-otomo__more path { fill: #fff; }
  /* さらに表示：中央寄せ（display:table）＋下線は border-bottom で */
  .p-otomo__bottom {
    display: table;
    margin: 1em auto;
    border-bottom: 1px solid var(--j-ink);
  }
  .p-otomo__showmore {
    font-size: 1.4rem;
    letter-spacing: .08em;
    line-height: 1.8;
    border-bottom: 0;
    text-decoration: none;
    padding-bottom: 0;
  }

  /* --- 07 / History（Figma SP フレーム Group 154 準拠）---
     カード 312×745（x=30）。年号は右端からはみ出す縦組み、
     巻物カールはカード下に横向き配置、世代円はその下。 */
  .p-history { padding: 3rem 0 2rem; }   /* sp_調整22 */
  .p-history__scroll {
    width: 31.2rem;
    max-width: none;
    margin: 0 auto 0 3rem;
    border: .1rem solid var(--j-ink);
    border-bottom: 0;
  }
  /* 巻物カール：カード左下の外側（Figma: x=6 y=カード下+29.4 335×77.4） */
  .p-history__scroll::before {
    content: "";
    display: block;
    position: absolute;
    left: -2.4rem;
    top: calc(100% - .6rem);
    width: 33.55rem;
    height: 7.79rem;
    background: url('../img/journal/svg-history-curl-sp.svg') left top / contain no-repeat;
  }
  .p-history__band { padding: 0; }
  /* 年号：Aoboshi 50px 縦組み・カード右辺を跨いで画面右端の外へ */
  .p-history__year-row { position: absolute; top: 2.5rem; right: -4.04rem; }
  .p-history__year {
    writing-mode: vertical-rl;
    font-family: var(--j-display);
    font-size: 5rem;
    line-height: 8.07rem;
    letter-spacing: 0;
    background: none;
    padding: 0;
  }
  .p-history__body {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    border: 0;
    padding: 2.48rem 3rem 2.6rem 2.2rem;   /* 先方指示：下を詰めて1画面に世代ボタンまで見えるように */
  }
  /* 見出し：たかしま農場ものがたり（YuGothic Bold 25px/lh40.7/ls.2em）＋ EN */
  .p-history__vtitle {
    order: -1;
    width: auto;
    height: auto;
    margin: 0 0 0 .4rem;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: 0;
  }
  .p-history__vtitle-jp { writing-mode: horizontal-tb; width: auto; font-size: 2.5rem; line-height: 1.628; letter-spacing: .2em; }
  .p-history__vtitle-en { writing-mode: horizontal-tb; width: auto; margin: 0; font-family: var(--j-display); font-size: 1.1rem; line-height: 1.9; letter-spacing: .13em; }
  /* イラスト：226×141 */
  .p-history__illust { order: 1; width: 22.6rem; height: 14.1rem; margin: 1.2rem 0 0 .4rem; }
  .p-history__text { order: 2; writing-mode: horizontal-tb; height: auto; width: 100%; overflow: visible; gap: 0; margin-top: 2.6rem; }
  /* 小見出し：番号ブラケット＋テキスト（YuGothic Bold 18px/lh1.28/ls.21em） */
  .p-history__subtitle {
    display: flex;
    align-items: flex-start;
    gap: 1.4rem;
    font-size: 1.8rem;
    line-height: 1.28;
    letter-spacing: .21em;
  }
  .p-history__num-img { height: 4.2rem; width: auto; margin-bottom: 0; }   /* 下線は SVG 内蔵のみ（border だと二重線になる） */
  /* 本文：縦組み・左右余白は狭い方に揃えて中央寄せ（先方指示） */
  .p-history__copy {
    writing-mode: vertical-rl;
    width: 25.8rem;
    height: 24.8rem;   /* 本原稿（最長170字）が横にあふれない高さ */
    margin: 1.6rem auto 0;
    font-size: 1.35rem;
    line-height: 1.6;
    letter-spacing: .15em;
    text-align: start;
  }
  /* 年号の背景：カード罫線と重なる部分を実際のページ背景色でマスク
     （--j-paper だと色味が違って四角が見えてしまう） */
  .p-history__year-row { background: #f6f5f5; }
  /* 世代円：67px・間隔12px（巻物カール分を確保しつつ詰める） */
  .p-history__gens { gap: 1.2rem; margin-top: 10.2rem; }
  .p-history__gens a { width: 6.7rem; height: 6.7rem; font-size: 1.17rem; letter-spacing: .05em; }

  /* --- 08 / Footer（Figma SP フレーム Group 155 準拠）---
     背景は巨大な円（1409×1409 #B5DFE2）の上弧。メニューは左から
     「ものがたり→エッセイ」の6列、右にマストヘッドと同じ縦ロゴ。 */
  .p-foot {
    margin-top: 3.6rem;   /* sp_調整22 */
    border-radius: 0;
    background: none;
    padding: 7.9rem 0 2rem;
    overflow: hidden;
    z-index: 0;
  }
  .p-foot::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 140.9rem;
    height: 140.9rem;
    border-radius: 50%;
    background: var(--j-band);
    transition: background-color .8s ease;
    z-index: -1;
  }
  .p-foot__inner { max-width: none; width: auto; margin: 0; }
  .p-foot__top { position: relative; justify-content: flex-start; gap: 0; padding-left: 4.9rem; }
  /* メニュー：SP は左から ものがたり→エッセイ の順（row-reverse を解除） */
  .p-foot__menu { flex-direction: row; gap: 2rem; padding-top: 0; margin: 0; }
  .p-foot__menu a { font-size: 1.4rem; letter-spacing: .25em; line-height: 1.25; padding-right: .45rem; }
  /* 縦ロゴ：マストヘッドと同じ画像（Figma: x=273 y=-1.8rem 49×277） */
  .p-foot__brand-logo { position: absolute; top: -1.8rem; left: 30.3rem; height: auto; width: 4.9rem; }
  .p-foot__brand-logo img { width: 100%; height: auto; margin-bottom: 0; }
  /* リンクカード：169.3×92 の2列（gap 8.7/12） */
  .p-foot__links {
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem .87rem;
    margin: 11.8rem 1.37rem 0 1.4rem;
    left: 0;
  }
  .p-foot__link { height: 9.2rem; }
  .p-foot__link img { margin-bottom: 0; }
  .p-foot__link-jp { font-size: 1.4rem; line-height: 1.8; letter-spacing: .12em; }
  .p-foot__link-en { font-family: var(--j-display); font-size: 1rem; letter-spacing: .13em; margin-top: 0; }
  /* 農場ロゴ＋住所 */
  .p-foot__info { flex-direction: column; gap: 2.4rem; margin-top: 4.6rem; }
  .p-foot__logo { width: 18.9rem; }
  .p-foot__logo img { margin-bottom: 0; }
  .p-foot__address { font-size: 1.4rem; line-height: 1.8; letter-spacing: .08em; text-align: center; left: 0; }
  /* クレジット：左寄せ 10px/lh15・© は行間を空けて最後 */
  .p-foot__copy {
    margin-top: 2.7rem;
    padding: 0 2.7rem;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 500;
    color: var(--j-ink);
    text-align: left;
  }
  .p-foot__copyright { margin-top: 1.5rem; }

  /* --- p-otomo Modal --- */
  .p-otomo-modal__inner {
    flex-direction: column;
    width: calc(100vw - 4rem);
    max-width: none;
    height: auto;
    max-height: calc(100vh - 12rem);
    overflow-y: auto;
  }
  /* 閉じるボタン：SP は円を消して白いバツだけに（nami-nami.jp 参考。MENU ボタンとの混同を防ぐ） */
  .p-otomo-modal__close { top: -4.8rem; right: 0; width: 3.8rem; height: 3.8rem; }
  body.is-modal-open .p-mv__menu { display: none; }   /* モーダル中は MENU を隠してバツだけにする */
  .p-otomo-modal__close circle { display: none; }
  .p-otomo-modal__close line { stroke: #fff; }
  .p-otomo-modal__close svg { transform: scale(1.7); }   /* 円がない分、バツを大きく */
  .p-otomo-modal__image { width: 100%; height: 31rem; flex-shrink: 0; }
  .p-otomo-modal__body { overflow-y: visible; }
  .p-otomo-modal__main { padding: 2.4rem; gap: 1.6rem; }
  .p-otomo-modal__label { font-size: 1.8rem; padding: .6rem 2.4rem; }
  .p-otomo-modal__text { font-size: 1.25rem; }
  .p-otomo-modal__detail {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    padding: 2.4rem 2.4rem 4.8rem;   /* 先方指示：下の白余白を上（品種名の上）と揃えて広めに */
    gap: 2rem;
  }
  .p-otomo-modal__product { width: 100%; }
}

/* ============================================================
   追加調整（2026-07 先方フィードバック）
   ============================================================ */
/* Lenis（慣性スクロール）公式推奨：CSS スムーススクロールとの競合防止 */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
/* 「さらに表示」は掲載数が増えるまで非表示（マークアップは残す） */
.p-otomo__bottom { display: none; }