/*
  ==========================================================================
  style.css
  セクションごとにコメントで区切って管理する。ファイルは分割しない方針。
  今回は「全体構造と大まかな配置」の実装であり、
  カンプとのピクセル単位の一致・装飾の作り込みは次段階で行う。
  ==========================================================================
*/

/* ==========================================================================
   Base
   ========================================================================== */

/* 1remを10pxとして扱いやすくするための調整（rem指定を10進数で扱うための一般的な手法） */
html {
  font-size: 62.5%;
  overflow-x: clip;
}

/* overflow-x:clipは横方向のはみ出しに対する安全策（縦方向は無指定のため
   Heroへ重ねるIntroductionメイン写真の演出や、AGO Storyの装飾はみ出しには
   影響しない）。背景は白（AGO Story含む、Introduction全体で統一）。 */
body {
  font-family: var(--font-family-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  letter-spacing: var(--letter-spacing-body);
  color: var(--color-text-base);
  background-color: var(--color-bg-white);
  overflow-x: clip;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-family-heading);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-heading);
}

/* 本文コンテンツを中央寄せし、最大幅を制限する共通クラス */
.l-container {
  max-width: var(--container-max-width);
  margin-inline: auto;
  padding-inline: var(--container-padding-pc);
}

/* 各セクション共通の上下余白 */
.l-section {
  padding-block: var(--space-section-pc);
}

/* 見た目には表示しないが、支援技術には読み上げさせたいテキスト用 */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* PC専用の改行。カンプどおりの意味のまとまりで改行させたい見出しに使う。
   SP（Responsive参照）ではdisplay:noneにして解除し、狭い画面幅で
   不自然な位置の改行が増えないようブラウザ標準の折り返しに任せる。 */
.u-br-pc {
  display: inline;
}

/* フォーカスを受け取ったときだけ表示する「メインコンテンツへスキップ」リンク用 */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  z-index: var(--z-menu-overlay);
  padding: var(--space-xs) var(--space-md);
  background-color: var(--color-bg-dark);
  color: var(--color-text-inverse);
  transition: top var(--transition-duration-base) var(--transition-easing-base);
}

.skip-link:focus {
  top: 0;
}

/* SPハンバーガーメニューを開いている間、背景（htmlごと）のスクロールを止める */
.u-scroll-locked {
  overflow: hidden;
}

/* ==========================================================================
   Placeholder Image
   画像が未準備の箇所に表示する仮領域。
   実画像に差し替える際は、このdivを picture / img タグに置き換えるだけでよい
   構造にしている（周囲のクラス名・ラッパー構造は変更不要）。
   ========================================================================== */

.img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 20rem;
  width: 100%;
  background-color: var(--color-placeholder-bg);
  border: 2px dashed var(--color-placeholder-border);
  color: var(--color-placeholder-text);
  font-size: var(--font-size-sm);
  text-align: center;
  padding: var(--space-sm);
}

/* ロゴ用の仮領域は、写真用より小さく横長で表示する */
.img-placeholder--logo {
  min-height: 4.8rem;
  max-width: 16rem;
  font-size: var(--font-size-xs);
}

/* メイン写真は他のサムネイルより背を高くする */
.img-placeholder--main {
  min-height: 32rem;
}

/* ==========================================================================
   Header
   ========================================================================== */

.header {
  position: sticky;
  top: 0;
  background-color: var(--color-bg-white);
  box-shadow: var(--shadow-sm);
  z-index: var(--z-header);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  /* カンプに合わせてヘッダーをコンパクトにしつつ、窮屈にならない高さに調整する
     （line-height stratの除去でロゴ実高さ28pxが基準になったため、
     28px + 1.5rem(15px)×2 ≒ 58pxを狙った値。旧: 0.7rem）。
     変更した場合はvariables.cssの--header-height-sp（SP版Heroの高さ計算用）も
     合わせて調整する。 */
  padding-block: 1.5rem;
}

/* pタグ（.header__logo）はブロック要素として通常の行送り（line-height）分の
   余白（strut）を自分の中に持ってしまい、中のaの実際の高さ（28px）より
   数px分背が高くなる。それがヘッダー全体の高さにも影響し、ロゴが視覚的に
   ヘッダー中央からズレて見える原因になっていたため、line-height:0で
   その余白を消す。 */
.header__logo {
  line-height: 0;
}

.header__logo a {
  display: inline-flex;
  align-items: center;
}

/* 実ロゴ（横組み、viewBox比率340:40）を歪めずに表示する。
   heightのみ指定し、widthはautoで比率を維持する（暫定値、PC/SP共通）。
   display:blockのため、img自身にはline-height由来の余白は発生しない。 */
.header__logo-image {
  display: block;
  height: 2.8rem;
  width: auto;
}

.header__nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
}

/* 区切り線を差し込むための基準位置。線は各項目の右側（次の項目とのgapの中央）に
   絶対配置で重ねるため、liごとにposition:relativeが必要。
   line-height:0は.header__logoと同じ理由（liのstrut由来のわずかな余白を消し、
   中のaの高さと一致させる）。 */
.header__nav-item {
  position: relative;
  line-height: 0;
}

/* 項目間の細い点線区切り。最後の項目の後ろには付けない。
   gapのちょうど中央に来るよう、gapの半分だけ右にずらして配置する。
   高さはメニュー文字の実際の行の高さ（.header__nav-linkのline-height）に
   揃え、文字と上下位置が合うようにする。控えめな配色（淡いグレー系）。 */
.header__nav-item:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(var(--space-lg) / -2);
  transform: translate(50%, -50%);
  width: 0;
  height: 1em;
  border-right: 1px dotted #c9c2b4;
  pointer-events: none;
}

/* カンプに合わせて明朝体へ変更。英字用の広い字間（--letter-spacing-en）は
   和文には広すぎるため、見出し用の字間（--letter-spacing-heading）を使う。
   line-heightは本文用の1.9のままだと1行のメニュー項目としては間延びするため、
   タイトなline-heightに調整する。 */
.header__nav-link {
  display: inline-block;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-sm);
  line-height: 1.3;
  letter-spacing: var(--letter-spacing-heading);
}

/* ハンバーガーメニューのボタン */
.header__menu-button {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 3.2rem;
}

.header__menu-line {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-text-base);
  transition: transform var(--transition-duration-base) var(--transition-easing-base),
              opacity var(--transition-duration-base) var(--transition-easing-base);
}

/* 開いている状態：3本線を×字に変形する */
.header__menu-button--active .header__menu-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.header__menu-button--active .header__menu-line:nth-child(2) {
  opacity: 0;
}

.header__menu-button--active .header__menu-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ==========================================================================
   Hero
   ========================================================================== */

/* --hero-content-bottom / --hero-body-block-sizeは.hero直下で定義し、
   .hero__body（本文）と.hero__scroll-line（縦罫線）の両方から参照できる
   ようにしている（PC版のみ使用。SP版はGridで本文行の実高さに追従するため
   これらの値を使用しない。Responsive参照）。 */
.hero {
  position: relative;
  background-color: var(--color-bg-dark);
  --hero-content-bottom: clamp(6rem, 7vh, 12rem);
  --hero-body-block-size: clamp(20rem, 24vh, 26rem);
  --hero-heading-body-gap: 3.6rem;
  --hero-body-scroll-gap: 2.4rem;
  /* 縦罫線をHero最下部まで延長する距離。PC版は.hero__contentの
     bottomオフセット（--hero-content-bottom）をそのまま再利用する。
     hero__content自体がこの距離だけHero下端より上に位置しているため、
     本文の下端からこの距離だけ罫線を延ばせば正確にHero最下部へ届く。 */
  --hero-scroll-line-extension: var(--hero-content-bottom);
  /* Hero中央ロゴセット（家紋＋キャッチコピー一体、縦長画像）の表示高さ。
     カンプではHeroの主役として大きく扱われているため、28remからさらに拡大した
     （指定レンジ34〜38remの中間値を起点に、スクリーンショットで見出し・本文・
     ドット・SCROLL DOWNとの干渉がないことを確認して調整）。
     PC/SPで個別調整できるよう、この1つのカスタムプロパティの値だけを
     ブレークポイントごとに上書きする（Responsive参照）。幅はimg側の
     width:auto（実画像の比率242:488）で自動的に決まる。 */
  --hero-emblem-height: 40rem;
}

/* 全スライド共通で表示するロゴセット（家紋ロゴ＋キャッチコピー一体の完成画像）。
   スライドの上に常に重ねて表示する。PC版は右側中央付近、SPは中央上寄りに配置する
   （PC/SPで同じ画像を使い、位置のみ変更。SPの上書きはResponsive参照）。 */
.hero__common {
  position: absolute;
  inset: 0;
  z-index: var(--z-hero-controls);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: var(--space-xl);
  padding-right: clamp(7rem, 7vw, 11rem);
  pointer-events: none;
}

/* h1のデフォルトmargin/font-sizeを打ち消し、ロゴ画像1枚分のボックスとして扱う。
   PC版はカンプに合わせてHero中央よりやや下寄りに見せるため、translateYで
   ロゴだけを下方向へずらす（見出し・本文など他要素は動かさない、局所的な調整）。
   SP版はこの下寄せを行わないため、Responsive側でtransform:noneに戻す。 */
.hero__logo-set {
  margin: 0;
  font-size: 0;
  line-height: 0;
  /* カンプに合わせ、ロゴ全体の下端が左側本文ブロック（見出し＋本文）の
     下端とおおよそ揃う位置まで下げている（実測して調整した値）。
     ドット・SCROLL DOWNとは水平方向の位置が離れているため干渉しない。 */
  transform: translateY(12.7rem);
}

/* 実画像（縦長のロゴセット）を歪めずに表示する。heightのみ指定し、
   widthはautoのままにすることで、img自体のwidth/height属性（242×488）
   由来の実際の縦横比を維持したまま拡大縮小される。 */
.hero__emblem {
  display: block;
  height: var(--hero-emblem-height);
  width: auto;
  pointer-events: none;
}

/* 複数スライドを同じ位置に重ねて配置し、opacityでフェード切り替えできるようにする。
   grid-area:1/1をスライド全員に指定することで同じセルに重なり、
   .hero__slidesの高さは一番背の高いスライドに合わせて自動的に決まる。 */
.hero__slides {
  display: grid;
}

.hero__slide {
  grid-area: 1 / 1;
  position: relative;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--transition-duration-base) var(--transition-easing-base),
              visibility 0s linear var(--transition-duration-base);
}

.hero__slide--active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--transition-duration-base) var(--transition-easing-base),
              visibility 0s linear 0s;
}

.hero__slide-photo {
  position: relative;
  min-height: 74rem;
}

/* 写真全体に半透明の黒を重ね、明度を均一に下げる。
   左右どちらかだけを暗くするのではなく、写真全体の質感を保ちながら
   白文字・白ロゴが読める濃度にする（PC/SP共通の基本値）。
   スライドごとに写真の明るさが異なるため、.hero__slide--01〜04の
   修飾クラスで濃度を個別調整できるようにしている（値は暫定）。 */
.hero__slide-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: var(--z-decoration);
  background: rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

.hero__slide--01 .hero__slide-photo::after {
  background: rgba(0, 0, 0, 0.25);
}

/* スライド02（あご漁）の実写真は空・海が明るく霞んでおり、特に文章が
   重なる左側が白に近い明度のため、他スライドより濃いめに設定している。 */
.hero__slide--02 .hero__slide-photo::after {
  background: rgba(0, 0, 0, 0.45);
}

/* スライド3/4の内容入れ替え（content.md最新版に合わせる）に伴い、
   写真ごとに調整していた暗幕の濃さも実際の写真に合わせて入れ替えている
   （--03=料理写真、--04=水揚げ写真）。 */
.hero__slide--03 .hero__slide-photo::after {
  background: rgba(0, 0, 0, 0.3);
}

.hero__slide--04 .hero__slide-photo::after {
  background: rgba(0, 0, 0, 0.35);
}

/* 背景写真（picture要素）をスライド写真エリアいっぱいに敷く */
.hero__picture {
  position: absolute;
  inset: 0;
  z-index: var(--z-base);
}

/* 写真自体は歪ませず、コンテナいっぱいにcoverで敷く。
   object-positionはスライドごとのカスタムプロパティ（--hero-object-position-pc）
   を参照し、.hero__slide--01〜04側で値を定義する（下記参照・PC用）。
   SP版は--hero-object-position-spを参照するよう上書きする（Responsive参照）。 */
.hero__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-object-position-pc, center center);
}

/* 各スライドのobject-position（実画像を確認した上での初期値）。
   PC：4点とも被写体が極端に偏っていないためcenter centerで統一。
   SP：4点とも下部に本文オーバーレイ用の暗部があるため、被写体のある
   上部を優先して見せるcenter topで統一。いずれも暫定値。 */
.hero__slide--01 {
  --hero-object-position-pc: center center;
  --hero-object-position-sp: center top;
}

.hero__slide--02 {
  --hero-object-position-pc: center center;
  --hero-object-position-sp: center top;
}

.hero__slide--03 {
  --hero-object-position-pc: center center;
  --hero-object-position-sp: center top;
}

.hero__slide--04 {
  --hero-object-position-pc: center center;
  --hero-object-position-sp: center top;
}

/* PC：見出し・本文をそれぞれ独立した縦書き要素として扱い、
   flex-direction:row-reverseで「本文が左・見出しが右（本文列の右端）」
   の並びを作る。
   left/bottom基準でHero左下へ配置し、Hero全体の下半分程度に収める
   固定的な情報ブロックとする（top:50%centeringは使用しない）。
   子要素はDOM順に見出し→本文→SCROLL DOWNで、row-reverseにより
   視覚的には「SCROLL DOWN（左）→本文（中央）→見出し（右）」の順に並ぶ。
   SCROLL DOWNを.hero__content内部の子要素にしたことで、本文と同じ
   flexコンテキストで上端が揃う（Hero全体に対するabsoluteでの
   独自のleft/bottom管理はしない）。
   コンテナのgapは「本文⇔SCROLL DOWN」の間隔（控えめ）とし、
   「見出し⇔本文」の間隔は見出し側のmargin-leftで追加する
   （2種類の間隔を分けて管理するため）。
   leftとbottomはclamp()で1440〜1280px程度の間を自然に可変させる
   （数値はすべて暫定値、カンプとの目視比較で調整）。
   SP版はこの構造をGridベースの2カラムへ切り替える（Responsive参照）。 */
.hero__content {
  position: absolute;
  left: clamp(12rem, 14vw, 22rem);
  bottom: var(--hero-content-bottom);
  z-index: var(--z-content);
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: var(--hero-body-scroll-gap);
  color: var(--color-text-inverse);
}

/* 見出しは本文の高さとは連動させず、自身の文字量に合わせた自然な高さで
   表示する。align-self:flex-startにより本文と同じ上端（文章ブロックの
   先頭）に揃うため、結果として本文の開始位置と一致する。
   margin-leftで「見出し⇔本文」の間隔を追加する（コンテナのgapは
   「本文⇔SCROLL DOWN」用のため、その差分をここで補う）。
   写真・ロゴセットより主張しすぎない大きさに縮小し、字間をやや広めに
   取ることで見出しらしい落ち着いた印象にする。4スライド共通の1サイズ。
   font-familyはh2への共通指定（Base）によりすでに明朝体（--font-family-heading）。 */
.hero__heading {
  writing-mode: vertical-rl;
  align-self: flex-start;
  margin-left: calc(var(--hero-heading-body-gap) - var(--hero-body-scroll-gap));
  font-size: clamp(2.6rem, 2vw, 3.2rem);
  letter-spacing: 0.1em;
  flex-shrink: 0;
}

/* 本文は縦書きで、--hero-body-block-size（inline-size＝列の高さ）を
   縦罫線と共有する基準そのもの。align-self:flex-startで文章ブロックの
   先頭（上端）に揃え、この上端を縦罫線の上端の基準にする。
   明朝体（--font-family-heading）に変更し、字間をやや広げつつ、
   line-heightを詰めて列同士の間隔を狭くする。段落間はmargin-block-start
   （vertical-rlではblock-startは右方向＝前の段落側）でやや広めに取る。
   max-block-sizeは本文が横方向（列数）に広がりすぎないための目安であり、
   overflow:hiddenは使用していないため、文字を隠すことはない。 */
.hero__body {
  writing-mode: vertical-rl;
  align-self: flex-start;
  inline-size: var(--hero-body-block-size);
  max-block-size: 42rem;
  font-family: var(--font-family-heading);
  line-height: 1.7;
  letter-spacing: 0.04em;
}

.hero__body p + p {
  margin-block-start: var(--space-md);
}

/* ドットUI：Hero全体で共通の1組。PC/SPともに左下付近に固定配置する */
.hero__controls {
  position: absolute;
  left: var(--space-xl);
  bottom: var(--space-lg);
  z-index: var(--z-hero-controls);
  display: flex;
  gap: var(--space-2xs);
}

/* ボタン自体はタップ領域確保のため一回り大きく取り、見た目の四角は
   ::beforeで中央に小さく描く（見た目のサイズとクリック領域を分離する）。 */
.hero__dot {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__dot::before {
  content: "";
  width: 1rem;
  height: 1rem;
  /* var(--radius-sm)（4px）だとこのサイズでは丸く見えすぎるため、
     正方形と分かる最小限の角丸（1px）にとどめる。 */
  border-radius: 1px;
  background-color: rgba(255, 255, 255, 0.5);
  transition: background-color var(--transition-duration-base) var(--transition-easing-base);
}

.hero__dot:hover::before {
  background-color: rgba(255, 255, 255, 0.8);
}

/* アクティブ状態は赤系にする。Phase2で--color-brand-redを#c7161dへ統一したため、
   ここでも共通変数を参照する（以前はサイト全体の赤とは別の暫定値だった）。 */
.hero__dot--active::before {
  background-color: var(--color-brand-red);
}

.hero__dot:focus-visible {
  outline: 2px solid var(--color-text-inverse);
  outline-offset: 2px;
}

/* スクロール誘導：「縦罫線」と「ラベル（テキスト＋矢印）」のまとまり。
   PC版では.hero__content内部の子要素（DOM順は見出し→本文→SCROLL DOWN）
   として扱い、Hero全体に対するabsoluteでの独自配置はしない。
   align-self:stretchで.hero__bodyと同じ高さの箱になる（本文と上端・下端が
   一致する）。この箱自体をposition:relativeにし、縦罫線だけを
   position:absoluteで箱の外（下方向）へ延長する（下記.hero__scroll-line参照）。
   ラベル（テキスト＋矢印）はこの箱の中で通常のflow配置のままのため、
   位置は変更されない。
   SP版はGridの2列目に配置し、本文と同じ行の実高さへ追従させる（Responsive参照）。
   a要素化（Introductionへのスクロール操作）に伴い、下線が付かないようリンクの
   装飾を明示的に消しておく。 */
.hero__scroll-cue {
  position: relative;
  align-self: stretch;
  z-index: var(--z-hero-controls);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  color: var(--color-text-inverse);
  text-decoration: none;
  opacity: 0.9;
}

.hero__scroll-cue:focus-visible {
  outline: 2px solid var(--color-text-inverse);
  outline-offset: 4px;
}

/* 縦罫線：上端(top:0)は.hero__scroll-cue（＝本文）の上端に固定したまま、
   下端だけを--hero-scroll-line-extensionの分だけ箱の外へ延長し、
   Hero最下部まで届かせる。本文・操作UIより背面（--z-decoration）に置き、
   pointer-eventsをnoneにしてドットのクリック領域を妨げないようにする。 */
.hero__scroll-line {
  position: absolute;
  left: 0;
  top: 0;
  bottom: calc(-1 * var(--hero-scroll-line-extension));
  width: 1px;
  background-color: currentColor;
  z-index: var(--z-decoration);
  pointer-events: none;
}

/* ラベル：SCROLL DOWNのテキストと矢印を縦に並べたまとまり。
   縦罫線がposition:absoluteになった分、罫線との間隔はここでの
   margin-leftに置き換えている（値は従来のgapと同じ0.4rem）。
   罫線の高さいっぱいには広げず、上寄りに収める（現在位置を維持）。 */
.hero__scroll-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  margin-left: 0.4rem;
}

/* テキストは装飾要素のため主張しすぎない小ささにする（機能性より意匠優先）。
   writing-mode:vertical-rl + text-orientation:sidewaysで単語全体を
   90度回転させる（1文字ずつの縦積みにはしない）。
   フォントはHero見出し・本文と同じ明朝体（--font-family-heading）に統一し、
   font-weightは通常の400、字間をやや広めにして細身で上品な印象にする。 */
.hero__scroll-text {
  writing-mode: vertical-rl;
  text-orientation: sideways;
  font-family: var(--font-family-heading);
  font-weight: 400;
  font-size: clamp(0.9rem, 0.7vw, 1.1rem);
  letter-spacing: 0.14em;
  white-space: nowrap;
}

/* 矢印は線画（枠線のみ）で小さく表現する。正方形を45度回転させ、
   右辺・下辺の枠線だけを見せることで「下向きの山形」を作る。
   縦罫線とは接続せず、テキスト直下にラベル内の要素として配置する。 */
.hero__scroll-arrow {
  width: 0.6rem;
  height: 0.6rem;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
}

/* ==========================================================================
   Introduction / Story
   ========================================================================== */

/* 縦書きキャッチコピー（.introduction__vertical-copy）や地図（.introduction__map）を
   absoluteで配置するための基準。z-index:0を明示し、このセクション自身を
   独立したスタッキングコンテキストにすることで、地図の負のz-index（背面化）が
   このセクション内だけで完結し、ページ全体の重なり順に影響しないようにする。
   背景は白（カンプ準拠）。ただしAGO Story（.introduction__stories）は
   このセクションの子要素だが対象外のため、そちらだけ個別にベージュへ戻す
   （下記.introduction__stories参照）。 */
/* z-indexはvar(--z-content)を明示し、Heroの背景写真/暗幕（z:1/10）より必ず
   前面に、Heroのドット等（z:110）より背面になるようにしている（Heroはz-index未指定の
   ためスタッキングコンテキストを作らず、内部要素のz値がルートまで届くため）。 */
.introduction {
  position: relative;
  z-index: var(--z-content);
  background-color: var(--color-bg-white);
}

/* 左端の縦書きキャッチコピー「あご風薫る島から」。
   本文・写真より背面の装飾として、薄く目立ちすぎない濃さに調整する
   （SVG自体の塗りは#333333のため、カンプの淡い印象はopacityで作る）。
   Introduction内でposition:absoluteを使用するのはこの装飾要素と地図のみ。
   PC版のみ表示し、SP版では非表示にする（Responsive参照）。
   z-indexは.introduction__main-visual（写真、20）より低い値にしている。
   写真の左隣に一部が見え、写真の下へ回り込む部分はその背後に隠れる
   ＝カンプの「写真の背後に薄く見える透かし」という見え方を再現するため。
   実測の結果、要素自体は非表示・クリップ・画面外のいずれでもなく、
   高さ40rem・opacity 0.14という値がカンプ比で小さく薄すぎたために
   実質視認できなかったことが根本原因だった。カンプは写真・本文・地図の
   行の高さいっぱいに大きく、はっきり視認できる濃さで表示されているため、
   その比率に合わせて拡大・増量する。 */
.introduction__vertical-copy {
  position: absolute;
  left: 3rem;
  top: 6rem;
  z-index: var(--z-decoration);
  height: 58rem;
  opacity: 0.35;
  pointer-events: none;
  user-select: none;
}

/* SVGの実際の縦横比（73:596）を保ったまま、親要素の高さいっぱいに表示する */
.introduction__vertical-copy-image {
  display: block;
  height: 100%;
  width: auto;
}

/* 上部レイアウト：写真列と本文列の2カラムGrid。地図（.introduction__map）は
   このGridに含めず、.introduction直下の兄弟要素として独立させている
   （地図はグリッド列ではなく、セクション全体を基準にした背景装飾のため）。 */
.introduction__layout {
  display: grid;
  grid-template-columns: calc((100% - 3 * var(--space-sm)) / 4) 1fr;
  gap: var(--space-lg);
  align-items: start;
  margin-bottom: var(--space-xl);
}

/* メイン写真の列幅：下段ギャラリー1枚分の幅と揃える計算式
   （.introduction__galleryのrepeat(4, 1fr) + gap: var(--space-sm)と同じ式）。
   カンプで「メイン写真が細身」に見える点を、ギャラリーと同じ基準幅で再現する。 */

/* メイン写真：Introduction所属の通常フロー要素のまま、PC版のみ上方向へ
   せり出させてHero下端に重ねる。
   ・--introduction-main-overlap-pc：Hero内部へ実際に入り込む量
   ・実際のmargin-block-startは、これに加えてセクション自身の上部余白
   　（--space-section-pc）分も打ち消す必要があるため両方を合算する
   ・写真の可視部分の高さはそのまま後続要素（本文・ギャラリーの手前）へ反映される
   ・z-indexはHeroの背景・暗幕（--z-base/--z-decoration）より上、
   　Heroのドット・SCROLL DOWN（--z-hero-controls）より下にすることで、
   　それらを不自然に隠さないようにする */
.introduction__main-visual {
  position: relative;
  --introduction-main-overlap-pc: var(--space-lg);
  margin-block-start: calc(-1 * (var(--space-section-pc) + var(--introduction-main-overlap-pc)));
  margin-inline-start: calc(-1 * var(--space-sm));
  z-index: var(--z-content);
}

.introduction__main-image {
  width: 100%;
  height: auto;
}

.introduction__label {
  font-family: var(--font-family-en);
  color: var(--color-brand-red);
  letter-spacing: var(--letter-spacing-en);
  margin-bottom: var(--space-2xs);
}

.introduction__heading {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-sm);
}

.introduction__intro p + p {
  margin-top: var(--space-sm);
}

/* 本文が地図側まで広がって衝突しないよう、読みやすい行長に幅を制限する。
   地図を左へ広げたことに伴い、本文側も少し狭めて領域を明確に分けている
   （旧: 56rem）。 */
.introduction__intro {
  max-width: 46rem;
}

/* Phase2でカンプに合わせ明朝体へ統一し、可読性のためひと回り大きくした
   （旧: 指定なし＝bodyの--font-size-base=1.6rem/ゴシックを継承） */
.introduction__intro p {
  font-family: var(--font-family-heading);
  font-size: 1.7rem;
}

/* 地図（PC版）：Introduction本文からギャラリー付近まで続く「背景装飾」。
   rightを0にし画面内に収めることで、横スクロールの原因にならないようにしている
   （bodyのoverflow-x:clipは安全策であり、これ単体には依存しない）。
   z-indexは負の値にし、本文・ギャラリー（どちらもposition指定なしの通常フロー
   要素）より確実に背面へ回す。
   以前は幅を絞った分ズームを235%まで上げていたため、平戸周辺だけが大写しになり
   九州全体の輪郭が分からなくなっていた。カンプのように島の形が認識できる比率へ
   近づけるため、表示窓を左へ大きく広げ、ズームも下げている。 */
.introduction__map {
  position: absolute;
  top: 0;
  right: 0;
  width: clamp(50rem, 44vw, 68rem);
  height: 78rem;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}

/* 地図画像本体：長崎県平戸市の注記・平戸の赤い部分・ブランドマークに加え、
   九州本土の輪郭も表示窓に収まるよう、拡大率を下げて調整する（暫定値）。
   reset.cssのimg{max-width:100%}を上書きするため、max-width:noneが必須。 */
.introduction__map-image {
  position: absolute;
  top: -2%;
  left: -2%;
  width: 145%;
  max-width: none;
  height: auto;
}

/* 4枚のグループ全体を一回り縮小し、画面端・写真同士の余白を広げる
   （個々のグリッド比率・aspect-ratioはそのまま、外側にmax-widthを掛けて
   グループごと縮小し中央寄せする）。
   .l-containerのmax-width（--container-max-width）と同じ詳細度のセレクタが
   この要素に重なっているため、単純な%指定では.l-container側のmax-widthを
   丸ごと上書きしてしまう（ビューポート基準になり広がる事故があった）。
   calc()で--container-max-width自体を基準にした値にすることで、
   常にコンテナ幅の90%として機能するようにしている。 */
.introduction__gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  max-width: calc(var(--container-max-width) * 0.9);
  margin-inline: auto;
  margin-bottom: var(--space-xl);
}

/* ギャラリー4枚は実画像の比率（600:492）でaspect-ratioを揃え、
   object-fit:coverで見た目の比率を統一する（内容は切り抜かれる） */
.introduction__gallery-item {
  aspect-ratio: 600 / 492;
  overflow: hidden;
}

.introduction__gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* AGO Story（.introduction__stories）：背景は白（親.introductionと同じ）。
   3つのStoryを縦に並べる。間隔はカンプの見た目に合わせ均一にしない
   （各.story--01〜03のmargin-block-endで個別に調整する）。 */
.introduction__stories {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Story共通：写真・タイトル（ラベル＋見出し）・本文を囲む、
   淡い赤茶色の点線角丸枠。写真や装飾が枠の外へはみ出す構成を許容するため
   overflow:hiddenは指定しない。z-index:0でスタッキングコンテキストを作り、
   背面装飾（.story__decoration、z-index:-1）をこのStory内だけに閉じ込める。 */
.story {
  position: relative;
  z-index: 0;
  width: 100%;
  display: grid;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-xl);
  border: 1px dashed color-mix(in srgb, var(--color-brand-red) 35%, white);
  border-radius: var(--radius-md);
}

.story--01 {
  margin-bottom: var(--space-2xl);
}

.story--02 {
  margin-bottom: var(--space-xl);
}

/* タイトルユニット（赤地タグ＋縦書き見出し）：カンプではタグと見出しが
   別々の要素として浮かぶのではなく、見出し列の右上（縦書きの読み始め位置）に
   タグが寄り添う、ひとつながりの構成になっている。
   DOM順は「タグ→見出し」だが、flex-direction:row-reverseで見た目の並びを
   「見出し（左）→タグ（右）」に反転させ、align-items:flex-startで
   両者の上端をそろえる。これにより、タグを見た視線がそのまま右上を起点に
   縦書き見出しへ流れる関係を、transformを使わずGrid/Flexだけで再現する。
   Story 01〜03で共通のルールとし、写真位置が変わっても
   タグ・見出しの基本関係は変えない。
   Storyボックス内での縦位置は中央ではなく上寄り（カンプの視覚的な起点）
   にするため、align-self:startをここでまとめて指定する
   （以前は.story--02側だけの個別指定だった）。 */
.story__title-group {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: var(--space-3xs);
  justify-self: center;
  align-self: start;
}

/* ラベル：「AGO Story」＋番号を1本の縦書き文字列として扱う。
   以前はlabel-text／label-numberを別要素にした上でdisplay:inline-flex；
   flex-direction:columnで並べていたが、vertical-rl文脈でのflex-direction:
   columnは主軸がブロック軸（＝横方向）になるため、2つが横に並ぶ＝
   縦書きの別列として分かれて見える不具合の原因になっていた。
   flexを使わず、通常のテキストフロー（1本のvertical-rlブロック）に
   戻すことで、両方を1列で確実に流す。角丸は使わず、直角のタグにする
   （カンプ指定）。赤色は既存の--color-brand-redをそのまま使う。 */
.story__label {
  writing-mode: vertical-rl;
  background-color: var(--color-brand-red);
  color: var(--color-text-inverse);
  padding: var(--space-xs) var(--space-3xs);
  border-radius: 0;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xs);
  letter-spacing: var(--letter-spacing-en);
  white-space: nowrap;
}

/* 「01」等の番号：text-orientation:uprightで正立のまま表示する
   （「AGO Story」は親のtext-orientation:mixed（初期値）により横倒しになる）。
   display:inline-blockにするのは、margin-block-startを確実に効かせるため
   （インライン要素のままだとブロック方向の余白が無視される場合がある）。
   「AGO Story」と数字の間だけに適度な間隔を設ける。
   数字の縦中横（text-orientation:upright）は断念し、「AGO Story」と同じ
   横向き（親から継承するtext-orientation:mixedの初期値）に統一する。 */
.story__label-number {
  display: inline-block;
  font-size: var(--font-size-sm);
  margin-block-start: var(--space-2xs);
  white-space: nowrap;
}

/* 見出し：PC版は縦書き。列数・折り返し位置はheightによる自動折り返しではなく、
   HTML側の<br class="u-br-pc">で意味のまとまりごとに明示している
   （カンプの列構成に合わせた実測値、Story別の内訳は完了報告を参照）。 */
.story__heading {
  writing-mode: vertical-rl;
  font-size: var(--font-size-lg);
}

/* 本文：横書き。読みやすい行長に幅を制限する。
   Phase2でカンプに合わせ明朝体へ統一し、可読性のためひと回り大きくした
   （旧: var(--font-size-sm)=1.5rem）。 */
.story__body {
  max-width: 38rem;
  font-family: var(--font-family-heading);
  font-size: 1.7rem;
}

.story__body p + p {
  margin-top: var(--space-sm);
}

.story__image {
  display: block;
  width: 100%;
  height: auto;
}

/* 背面装飾（流水紋・ブランドマーク）共通：写真・本文より背面、
   クリック等の操作対象にならないようpointer-eventsを無効化する。 */
.story__decoration {
  position: absolute;
  z-index: -1;
  display: block;
  max-width: none;
  pointer-events: none;
}

/* SP専用装飾（Story03、Brandロゴマーク使用）。PCでは非表示にし、
   SPでのみ表示する（Responsive参照）。 */
.story__decoration--brand-mark-sp {
  display: none;
}

/* ==========================================================================
   AGO Story 01：本文（左）／タイトル（中央・縦書き）／写真（右）
   左下に流水紋装飾が枠の外へ大きくはみ出す
   ========================================================================== */

.story--01 {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.15fr);
  grid-template-areas: "body title media";
}

.story--01 .story__body {
  grid-area: body;
}

.story--01 .story__title-group {
  grid-area: title;
}

.story--01 .story__media {
  grid-area: media;
}

.story--01 .story__image {
  border-radius: var(--radius-md);
}

.story--01 .story__decoration--pattern {
  width: 50rem;
  left: -16rem;
  bottom: -8rem;
}

/* ==========================================================================
   AGO Story 02：写真（左・枠外へはみ出す）／タイトル（中央・縦書き）／本文（右）
   タイトル下〜写真右下付近に平戸市の地図インセットを配置する
   ========================================================================== */

.story--02 {
  grid-template-columns: minmax(0, 1.2fr) auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  grid-template-areas:
    "media title body"
    "media map   body";
}

.story--02 .story__media {
  grid-area: media;
  /* 写真をStory枠の左側（padding+border）を越えて外側へはみ出させる */
  margin-inline-start: calc(-1 * (var(--space-xl) + 6rem));
  width: calc(100% + var(--space-xl) + 6rem);
  /* mediaはtitle+mapの2行分の高さを持つグリッド行にまたがるため、
     .story{align-items:center}のままだと写真が縦方向で中央寄りになる。
     カンプのようにStory枠の左上を起点に写真を強く見せるため、上揃えにする。 */
  align-self: start;
}

/* Story 01・03の写真（--radius-md）より控えめな角丸にし、
   角丸なしだったことによるシリーズ感の途切れを解消する（PC/SP共通） */
.story--02 .story__image {
  border-radius: 7px;
}

.story--02 .story__title-group {
  grid-area: title;
}

.story--02 .story__body {
  grid-area: body;
  align-self: start;
}

.story--02 .story__map {
  grid-area: map;
  align-self: end;
  width: 20rem;
  /* 地図が枠の下側へ一部はみ出す */
  margin-block-end: -4rem;
}

.story--02 .story__map-image {
  display: block;
  width: 100%;
  height: auto;
}

/* ==========================================================================
   AGO Story 03：メイン写真（左・縦長）／タイトル（中央・縦書き）／
   サブ写真（右上・横長）＋本文（右下）
   右下にブランド装飾が枠の外へ大きくはみ出す
   ========================================================================== */

/* メイン写真列（main）をカンプに合わせて明確に拡大し、Story03のビジュアルの
   中心にする（旧: 0.75fr、右列1.15frより小さく写真の存在感が弱かった）。
   右列（サブ写真＋本文）はメインより控えめな比率にし、主従関係をはっきりさせる。 */
.story--03 {
  grid-template-columns: minmax(0, 1.3fr) auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: start;
  grid-template-areas:
    "main title sub"
    "main title body";
}

/* .story__media-groupはSP表示順を決めるための入れ物としてのみ使用し、
   PC版ではdisplay:contentsで箱を消して子要素を直接グリッドへ配置する */
.story--03 .story__media-group {
  display: contents;
}

.story--03 .story__media--main {
  grid-area: main;
}

.story--03 .story__media--sub {
  grid-area: sub;
}

.story--03 .story__title-group {
  grid-area: title;
}

.story--03 .story__body {
  grid-area: body;
  /* 本文幅をサブ写真とおおむね揃える */
  max-width: none;
}

.story--03 .story__media--main .story__image,
.story--03 .story__media--sub .story__image {
  border-radius: var(--radius-md);
}

/* 1280px幅は.l-containerが外側マージンなしでビューポートいっぱいになるため、
   はみ出し量が-12remのままだと装飾がビューポート右端を超えて横スクロールの
   原因になっていた（1440pxでは外側マージンがあるため顕在化しない）。
   1280pxでも収まる量（-6rem）へ調整し、はみ出す演出自体は維持する。 */
.story--03 .story__decoration--brand {
  width: 42rem;
  right: -6rem;
  bottom: -14rem;
  opacity: 0.8;
}

/* ==========================================================================
   Brand
   上段（明るい背景写真＋白系オーバーレイ）と下段（暗い背景写真＋暗色オーバーレイ）
   の2トーン構成。上段＝塗りつぶしピル、下段＝輪郭線ピルで書式を区別する
   （open-decisions.md #3・#4）。上下の余白は.brand__upper/.brand__lower側で
   individually持つため、.l-section由来の共通paddingはここで打ち消す。
   ========================================================================== */

.brand {
  position: relative;
  padding-block: 0;
}

/* 左端の縦書き英字（装飾のみのためaria-hidden）。Introductionの縦書き
   キャッチコピーと同じ役割だが、英字テキストのため画像を使わず実装する。 */
.brand__vertical-label {
  position: absolute;
  left: var(--space-lg);
  top: var(--space-lg);
  z-index: var(--z-content);
  writing-mode: vertical-rl;
  font-family: var(--font-family-en);
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-en);
  color: var(--color-border);
  pointer-events: none;
}

/* ---------- 上段（明） ---------- */

.brand__upper {
  background-image: linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)),
    url("../images/brand/brand-background-bright.jpg");
  background-size: cover;
  background-position: center;
  padding-block: var(--space-section-pc);
  color: var(--color-text-base);
}

.brand__intro {
  text-align: center;
  margin-bottom: var(--space-2xl);
}

.brand__label {
  font-family: var(--font-family-en);
  color: var(--color-brand-red);
  letter-spacing: var(--letter-spacing-en);
  margin-bottom: var(--space-2xs);
}

.brand__heading {
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-lg);
}

/* ブランドマークと、左右に添える縦書きの短いコピー。
   セクション内で最も存在感を持たせる要素のため、マーク・コピーとも
   Introduction/Storyの装飾テキストより一回り大きく扱う。 */
.brand__mark-group {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
}

/* ブランド説明の一部として認識できる大きさにする。PC版は「このマークが／
   目印です。」のように2つのspanへ明示的に分けて2列の縦書きにする
   （heightによる自動折り返しは、文字数次第で不自然な位置に送られるため
   使用しない）。
   注意：この要素自体がwriting-mode:vertical-rlのため、Flexboxのrow/columnは
   画面上の見た目ではなく「その書字方向における」主軸で決まる。vertical-rlでは
   inline軸が上下方向になるため、flex-direction:rowは上下積みになってしまう。
   左右に列を並べたい場合はflex-direction:column（block軸=右→左）を使う。
   これにより1つ目のspanが右（読み始め）、2つ目のspanが左に来る。
   align-items:flex-start（cross軸=inline軸=上下方向の開始側）で上揃えになる。 */
.brand__caption {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  writing-mode: vertical-rl;
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  line-height: var(--line-height-heading);
}

.brand__mark img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 32rem;
}

.brand__pills {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  max-width: 104rem;
  margin: 0 auto var(--space-2xl);
}

/* 見出しピルは中央、本文は左揃え（カンプ準拠） */
.brand__pill-block {
  text-align: left;
}

/* 親がtext-align:leftになっても見出しピル自体は中央に来るよう、
   display:block + margin-inline:autoで単独に中央寄せする
   （下段の輪郭線ピルもこのルールを共有する） */
.brand__pill-heading {
  display: block;
  width: fit-content;
  margin-inline: auto;
  background-color: var(--color-brand-red);
  color: var(--color-text-inverse);
  font-weight: bold;
  padding: var(--space-2xs) var(--space-md);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-sm);
}

/* 協議会・ロゴマークの見出しは、定義項目内の見出しより一回り大きく見せる */
.brand__council .brand__pill-heading,
.brand__logomark .brand__pill-heading {
  font-size: var(--font-size-md);
  padding: var(--space-xs) var(--space-lg);
}

.brand__pill-block p + p {
  margin-top: var(--space-2xs);
}

/* 上段の説明2カラム（.brand__pills）と左右端を揃えるため、同じmax-widthを共有する */
.brand__photos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  max-width: 104rem;
  margin-inline: auto;
}

.brand__photo img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- 下段（暗） ---------- */

.brand__lower {
  background-image: linear-gradient(rgba(10, 8, 6, 0.72), rgba(10, 8, 6, 0.72)),
    url("../images/brand/brand-background-dark.jpg");
  background-size: cover;
  background-position: center;
  padding-block: var(--space-section-pc);
  color: var(--color-text-inverse);
}

.brand__definition {
  margin-bottom: var(--space-2xl);
}

.brand__definition > h3 {
  text-align: center;
  font-size: var(--font-size-lg);
  margin-bottom: var(--space-lg);
}

/* 上段の.brand__pills／.brand__photosと同じmax-widthを共有し、
   上段エリアの幅感に揃える（旧: 指定なしでl-containerの全幅まで広がっていた）。
   行間（上下）はカンプに合わせて列間（左右）より詰める。本文の行数が項目ごとに
   異なるため多少の差は残るが、行間を詰めることで2×2全体が整って見えるようにする。 */
.brand__definition-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md) var(--space-lg);
  max-width: 104rem;
  margin-inline: auto;
}

.brand__definition-item {
  text-align: left;
}

/* このセクションのみ本文をゴシック体で統一する（サイト全体の本文は
   明朝体だが、Brandエリアは対象外という既存方針を踏襲）。 */
.brand__council p,
.brand__logomark p,
.brand__definition-item p {
  font-family: var(--font-family-body);
}

/* 定義項目の本文はサイト共通の行間（1.9）だと間延びして見えるため、
   カンプに近い詰まった行間にする */
.brand__definition-item p {
  line-height: var(--line-height-heading);
}

/* 下段の見出しは輪郭線ピル（塗りつぶしなし）にし、上段と書式を区別する。
   display:block等の中央寄せは.brand__pill-heading（共通）を継承する。
   文字サイズ・paddingは協議会/ロゴマークの見出しと同じ大きさにし、
   窮屈に見えないようにする。 */
.brand__definition-item .brand__pill-heading {
  background-color: transparent;
  border: 1px solid var(--color-text-inverse);
  color: var(--color-text-inverse);
  font-size: var(--font-size-md);
  padding: var(--space-xs) var(--space-lg);
  text-align: center;
}

.brand__definition-item p + p {
  margin-top: var(--space-2xs);
}

/* ポスター2枚も.brand__pills/.brand__photosと左右端を揃える */
.brand__poster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  max-width: 104rem;
  margin-inline: auto;
}

.brand__poster-item img {
  display: block;
  width: 100%;
  height: auto;
}

.brand__poster-item figcaption {
  text-align: left;
  margin-top: var(--space-2xs);
  font-size: var(--font-size-xs);
}

/* ==========================================================================
   Products / Cuisine / Events（.feature-block 共通コンポーネント）
   本文(左)＋メイン写真(右・画面右端までフルブリード)の2カラム構成。
   HTML上のDOM順は「メイン写真→本文一式」だが、grid-columnで見た目の
   左右を入れ替えている（SP表示順をDOM順のまま自然に成立させるため）。
   3セクションで共通のレイアウト・文字サイズ・余白はここでまとめて管理し、
   写真枚数・object-positionなどセクション固有差分のみ.feature-block--◯◯側に置く。
   ========================================================================== */

/* .l-section由来のpadding-block（上下とも同じ値）は使わず、
   .feature-block側でpadding-block-start/endを個別に管理する。
   なお、メイン写真が本文より背が高いGrid構造（変更しない）により、
   本文側には写真との差分（実測約100〜140px）だけ内部の余白が自然に生じる。
   Products→Cuisine・Cuisine→Eventsはこの内部余白＋控えめな加算値のままとし、
   変更しない。Brand境界（Products側）・Antenna Shop境界（Events側）だけは、
   隣接する対象外セクション任せにせず、自分自身の側に通常のセクション間余白を
   明示的に持たせる（Brand・Antenna Shop側は変更しない）。 */
.feature-block {
  background-color: var(--color-bg-cream);
  padding-block: 0;
}

/* Brandとの境界：Products自身がpadding-topを持つ */
.feature-block--products {
  padding-block-start: var(--space-section-pc);
}

.feature-block--cuisine {
  padding-block-start: var(--space-sm);
}

/* CuisineサムネイルからEVENTS開始位置までの余白をカンプに合わせて少し広げる */
.feature-block--events {
  padding-block-start: var(--space-md);
}

/* Antenna Shopとの境界 */
.feature-block--events {
  padding-block-end: 3rem;
}

/* 画面右端までのフルブリードを成立させるため、.l-containerは使わず
   このラッパー自体をビューポート幅いっぱいのGridにする。
   本文側の左右幅は.feature-block__content・.feature-block__bodyの
   max-widthで制御する（コンテンツが画面幅いっぱいに広がるのを防ぐ）。
   左右比率はカンプに合わせ、本文をやや広く・メイン写真をやや小さくしている（暫定値）。 */
.feature-block__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.25fr);
  column-gap: var(--space-xl);
  align-items: stretch;
}

.feature-block__content {
  grid-column: 1;
  grid-row: 1;
  /* 本文エリアを広げ、改行位置をカンプへ近づけるための調整（暫定値） */
  max-width: 60rem;
  padding-inline-start: var(--container-padding-pc);
  /* 画像上端との余白をカンプに合わせて少し下げる（暫定値） */
  margin-top: 3.2rem;
}

.feature-block__main-media {
  grid-column: 2;
  grid-row: 1;
  /* メイン写真をセクションの主役として十分な存在感を持たせるための下限高さ（暫定値） */
  min-height: 58rem;
}

.feature-block__main-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* PRODUCTS／CUISINE／EVENTSの英字ラベル。Brand以前の赤系ラベルとは異なり、
   カンプ上では落ち着いた緑系の色で統一されている（暫定値、要確認） */
.feature-block__label {
  font-family: var(--font-family-en);
  color: #5b8272;
  letter-spacing: var(--letter-spacing-en);
  margin-bottom: var(--space-2xs);
}

/* 見出しは写真を主役にするため控えめな存在感にする。
   カンプに合わせ、太すぎない中間ウェイト・詰まった行間にする（暫定値） */
.feature-block__heading {
  font-family: var(--font-family-body);
  font-size: 2.6rem;
  font-weight: 600;
  line-height: var(--line-height-heading);
  margin-bottom: var(--space-md);
}

.feature-block__subcopy {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-md);
  margin-bottom: var(--space-sm);
}

/* Phase2でカンプに合わせ明朝体へ統一し、可読性のためひと回り大きくした
   （旧: 指定なし＝bodyの--font-size-base=1.6rem/ゴシックを継承） */
.feature-block__body {
  font-family: var(--font-family-heading);
  font-size: 1.7rem;
  margin-bottom: var(--space-lg);
}

.feature-block__gallery {
  display: grid;
  gap: var(--space-sm);
}

.feature-block__gallery-image {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- Products（サムネイル4枚・1段） ---------- */

.feature-block--products .feature-block__gallery {
  grid-template-columns: repeat(4, 1fr);
}

/* 本文とサムネイル列の間隔をカンプに合わせて少し広げる（暫定値） */
.feature-block--products .feature-block__body {
  margin-bottom: 6.4rem;
}

/* ---------- Cuisine（サムネイル3枚・1段） ---------- */

.feature-block--cuisine .feature-block__gallery {
  grid-template-columns: repeat(3, 1fr);
}

/* 料理写真の主役（丼）が中央よりやや右にあるため、object-positionで調整する */
.feature-block--cuisine .feature-block__main-image {
  object-position: 60% center;
}

/* ---------- Events（サムネイル3枚・1段） ---------- */

.feature-block--events .feature-block__gallery {
  grid-template-columns: repeat(3, 1fr);
}

/* 左カラム開始位置をカンプに合わせてわずかに下げる（共通のmargin-topに加算・暫定値） */
.feature-block--events .feature-block__content {
  margin-top: 4.4rem;
}

/* ==========================================================================
   Antenna Shop
   ========================================================================== */

.antenna-shop {
  position: relative;
  margin-top: 0;
  padding-block: 12rem 8rem;
  background:
    linear-gradient(
      to bottom,
      var(--color-bg-cream) 0,
      var(--color-bg-cream) 7.9rem,
      #f1ebda 7.9rem,
      #f1ebda 100%
    );
}

/* Events側へ大きく張り出す、緩やかな曲線境界 */
.antenna-shop::before {
  content: "";
  position: absolute;
  top: 0;
  left: -5%;
  width: 110%;
  height: 8rem;
  background-color: #f1ebda;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  pointer-events: none;
}

.antenna-shop__inner {
  max-width: 108rem;
}

.antenna-shop__header {
  margin-bottom: 2.8rem;
}

.antenna-shop__label {
  margin-bottom: var(--space-2xs);
  font-family: var(--font-family-en);
  color: var(--color-brand-red);
  letter-spacing: var(--letter-spacing-en);
}

.antenna-shop__heading {
  font-family: var(--font-family-body);
  font-size: 2.6rem;
  font-weight: 600;
}

.antenna-shop__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  column-gap: 4rem;
  align-items: start;
}

.antenna-shop__content {
  min-width: 0;
}

.antenna-shop__body {
  font-family: var(--font-family-heading);
  font-size: 1.7rem;
  line-height: 1.85;
  letter-spacing: 0.02em;
}

.antenna-shop__info {
  margin-top: 2.2rem;
  padding-top: 1.8rem;
  border-top: 1px dotted #9b8065;
  font-family: var(--font-family-heading);
  font-size: 1.5rem;
  line-height: 1.65;
  letter-spacing: 0.01em;
}

.antenna-shop__info p:first-child {
  margin-bottom: 0.8rem;
  font-weight: 600;
}

.antenna-shop__info p + p {
  margin-top: 0.3rem;
}

.antenna-shop__info a {
  display: inline;
  border-bottom: 1px dotted #9b8065;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.antenna-shop__button {
  display: block;
  width: 100%;
  min-width: 0;
  margin-top: 1.8rem;
  padding: 1.2rem 1.6rem;
  border: 1px solid var(--color-text-base);
  color: var(--color-text-base);
  font-size: 1.5rem;
  line-height: 1.4;
  white-space: nowrap;
  text-align: center;
}

.antenna-shop__media {
  min-width: 0;
}

.antenna-shop__slides {
  display: grid;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.antenna-shop__slide {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--transition-duration-base) var(--transition-easing-base),
    visibility 0s linear var(--transition-duration-base);
}

.antenna-shop__slide--active {
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--transition-duration-base) var(--transition-easing-base),
    visibility 0s linear 0s;
}

.antenna-shop__controls {
  display: flex;
  justify-content: center;
  gap: var(--space-2xs);
  margin-top: var(--space-2xs);
}

.antenna-shop__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
}

.antenna-shop__dot::before {
  content: "";
  width: 1rem;
  height: 1rem;
  border-radius: 1px;
  background-color: var(--color-border);
  transition: background-color var(--transition-duration-base) var(--transition-easing-base);
}

.antenna-shop__dot--active::before {
  background-color: var(--color-brand-red);
}


/* ==========================================================================
   PR Character
   ========================================================================== */

.pr-character {
  position: relative;
  padding-block: 3rem 7rem;
  background-color: #f1ebda;
}

.pr-character__inner {
  max-width: 108rem;
}

.pr-character__header {
  position: relative;
  z-index: var(--z-content);
  margin-bottom: 2.2rem;
}

.pr-character__label {
  margin-bottom: var(--space-2xs);
  font-family: var(--font-family-en);
  color: var(--color-brand-red);
  letter-spacing: var(--letter-spacing-en);
}

.pr-character__heading {
  font-family: var(--font-family-body);
  font-size: 2.6rem;
  font-weight: 600;
}

.pr-character__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  column-gap: 5rem;
  align-items: end;
}

.pr-character__content {
  position: relative;
  z-index: var(--z-content);
  padding-bottom: 2rem;
}

.pr-character__body {
  max-width: 42rem;
  margin-bottom: 0;
  font-family: var(--font-family-heading);
  font-size: 1.7rem;
}

.pr-character__goods {
  width: 26rem;
  margin-top: 3.2rem;
  margin-inline-start: 3rem;
}

.pr-character__goods-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.pr-character__character {
  position: relative;
  z-index: var(--z-content);
  width: min(100%, 76rem);
  justify-self: end;
  transform: translate(1rem, -12rem);
  --pr-character-overlap-pc: 10rem;
  margin-block-end: calc(-1 * (7rem + var(--pr-character-overlap-pc)));
}

.pr-character__character-image {
  width: 120%;
  max-width: none;
  height: auto;
  display: block;
}

.pr-character__character-caption {
  position: absolute;
  top: 31%;
  left: 4%;
  transform: translateX(-42%);
  width: max-content;
  padding: 0;
  background: none;
  color: var(--color-text-base);
  font-family: var(--font-family-body);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: var(--letter-spacing-body);
  text-align: left;
}


/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
  position: relative;
  --footer-bg: #333333;
  background-color: var(--footer-bg);
  color: var(--color-text-inverse);
  --footer-logo-height: 40rem;
  --footer-wave-height: 7rem;
}

.footer__wave {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: var(--footer-wave-height);
  overflow: hidden;
  line-height: 0;
  pointer-events: none;
  z-index: var(--z-decoration);
}

.footer__wave svg {
  display: block;
  width: 100%;
  height: 100%;
}

.footer__wave path {
  fill: var(--footer-bg);
}

.footer__inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  column-gap: var(--space-2xl);
  row-gap: var(--space-lg);
  align-items: center;
  padding-block: var(--space-2xl);
}

.footer__brand {
  position: relative;
  top: -2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: 3.5rem;
}

/* 実画像（縦長のロゴセット）を歪めずに表示する。Hero(.hero__emblem)と同じ
   「heightのみ指定・widthはauto」の手法で、img自体のwidth/height属性
   （242×488）由来の縦横比を維持する。Hero側の.hero__emblemは別クラスの
   ため、この指定はFooter側の表示にのみ影響する。 */
.footer__logo-image {
  display: block;
  height: var(--footer-logo-height);
  width: auto;
}

/* メニュー・問い合わせ・リンクバナー・コピーライトをまとめる右カラム */
.footer__main {
  position: relative;
  top: 0.8rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
  text-align: left;
}


.footer__nav-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

/* Phase2でカンプに合わせ、Footer内テキストを明朝体へ統一（サイズは変更しない） */
.footer__nav-list a {
  font-family: var(--font-family-heading);
  letter-spacing: var(--letter-spacing-en);
}

/* カンプに合わせ、項目間に縦の区切り線を入れる（最後の項目には付けない）。
   区切り線は::afterでテキストの高さに近い短い線として描き、
   border-inline-endのような行全体の長さの線にならないようにする（暫定値）。 */
.footer__nav-list li {
  position: relative;
  padding-inline: var(--space-md);
}

.footer__nav-list li:first-child {
  padding-inline-start: 0;
}

.footer__nav-list li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 1.4rem;
  background-color: rgba(255, 255, 255, 0.5);
}

/* カンプに合わせ、塗りつぶしピルではなくシンプルな線枠ボタンにする */
.footer__cta {
  display: inline-block;
  align-self: center;
  font-family: var(--font-family-heading);
  padding: 1.2rem 2.4rem;
  border: 1px solid var(--color-text-inverse);
  border-radius: 0;
  line-height: 1.5;
  letter-spacing: var(--letter-spacing-body);
  text-align: center;
}

/* リンクバナー3件。カンプに合わせ、正方形に近い仮画像枠ではなく
   横に細長い比率にする（暫定値） */
.footer__links-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  width: 100%;
}

.footer__links-item a {
  display: block;
}

/* 実画像（バナー）表示用。枠のサイズ比は実画像素材（500:100=5:1）に合わせる。
   画像本体は歪ませずobject-fit:containで枠内に収める（5:1同士のためほぼ
   余白なく収まるが、将来違う比率の画像に差し替わった場合の保険として
   containのまま維持する）。 */
.footer__links-banner {
  display: block;
  width: 100%;
  /* HTML側のheight属性（レイアウトシフト防止用）がそのままだと固定高さとして
     扱われaspect-ratioが効かないため、heightをautoに戻したうえで5:1を効かせる */
  height: auto;
  aspect-ratio: 5 / 1;
  background-color: var(--color-bg-white);
  object-fit: contain;
}

.footer__copyright {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-xs);
  opacity: 0.8;
}

/* ==========================================================================
   Responsive
   PC（1440px基準）をデフォルトとし、タブレット・スマホ向けに
   max-widthのメディアクエリで上書きするデスクトップファースト構成。
   今回は 1024px（ナビゲーションの切り替え）と 768px（SP版の並び替え）を
   主要なブレークポイントとして実装し、375〜430px付近は相対単位により
   追加のブレークポイントなしで自然に収まることを想定している。
   1280px / 576px / 430px は、今後の細かな調整用に予約している。
   ========================================================================== */

@media (max-width: 1024px) {
  .l-container {
    padding-inline: var(--container-padding-sp);
  }

  /* ナビゲーションをハンバーガーメニューに切り替える。
     開閉はJS（main.js内initHamburgerMenu）でis-openクラスを付け外しして行う。 */
  .header__nav-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    background-color: var(--color-bg-white);
    box-shadow: var(--shadow-md);
    padding: 0 var(--container-padding-sp);
  }

  .header__nav-list.is-open {
    display: flex;
  }

  /* ドロワー内では横並び用の点線区切りは使わず、項目ごとの下線に置き換える */
  .header__nav-item:not(:last-child)::after {
    display: none;
  }

  .header__nav-item {
    width: 100%;
    border-bottom: 1px solid var(--color-border);
  }

  .header__nav-item:last-child {
    border-bottom: none;
  }

  .header__nav-link {
    display: block;
    padding: var(--space-sm) 0;
  }

  .header__menu-button {
    display: flex;
  }

  /* Introduction：3カラムのminmax()下限（合計約76rem+gap）が、
     768〜1024px幅ではl-containerの実幅を上回り横スクロールの原因になるため、
     768pxを待たずこの時点で1カラムへ切り替える。
     Hero下端への重なりもPC専用の演出のため、ここで解除しておく。
     SP版デザインカンプに合わせ、写真は画面幅いっぱいにせず一回り小さく左寄せにし、
     写真から見出しまでの間隔もPC用のgapより詰めて、スクロール後すぐ本文へ
     入れる構成にする。 */
  .introduction__layout {
    grid-template-columns: 1fr;
    gap: var(--space-2xs);
  }

  .introduction__main-visual {
    margin-block-start: 0;
    margin-inline-start: 0;
    z-index: auto;
    width: 62%;
  }

  .introduction__vertical-copy {
    display: none;
  }

  /* 地図（SP版）：SP用デザインカンプに合わせ、九州全体を収めるのではなく
     平戸市周辺・赤い平戸エリア・ブランドマークを大きく見せる部分拡大表示に
     戻す（画像ファイル自体は加工せず、CSSの拡大・位置調整のみで再現する）。
     .introduction__map自体を「表示窓」として高さを固定し、はみ出した部分は
     overflow:hiddenで隠すことで、地図の右側・下側が自然に画面外へ続く
     構図にする（横スクロールは発生させない）。 */
  .introduction__map {
    position: relative;
    inset: auto;
    top: auto;
    right: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    height: 40rem;
    margin-inline: 0;
    margin-block-end: 0;
    overflow: hidden;
    background-color: var(--color-bg-white);
    pointer-events: auto;
    z-index: auto;
  }

  /* 白グラデーション：地図下部30〜40%程度から緩やかに白へ溶け込ませ、
     ギャラリーへ自然につなげる（表示窓の高さいっぱいに重ね、
     55%までは透明のまま地図をはっきり見せる）。数値は暫定値。 */
  .introduction__map::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 55%,
      rgba(255, 255, 255, 0.7) 80%,
      var(--color-bg-white) 100%
    );
    pointer-events: none;
  }

  /* 画像本体：平戸市の赤いエリア・ブランドマークが中央よりやや左上・左に
     来るよう拡大して配置する（暫定値。表示窓に対する比率のためpx換算は
     ビューポート幅に依存しない）。 */
  .introduction__map-image {
    position: absolute;
    top: -4%;
    left: -8%;
    width: 165%;
    max-width: none;
    height: auto;
  }
}

@media (max-width: 768px) {
  .l-section {
    padding-block: var(--space-section-sp);
  }

  /* ==========================================================================
     Hero（SP版：1画面いっぱいのビジュアルとして再構成）
     背景写真・ロゴセット・見出し・本文・ドットUI・SCROLL DOWNをすべて
     Hero内に重ねて配置する。本文を写真の外に出す構成にはしない。
     ========================================================================== */

  /* 本文の開始位置を「ロゴ下端＋間隔」に固定するため、.hero__slide自体に
     その分のpadding-topを持たせる。.hero__content側はmargin-top:autoを
     やめて通常フローで配置するため、本文量に関わらず開始位置はロゴ下端より
     下から動かない（スライドごとに本文量が違っても、本文の「先頭位置」が
     ロゴへ迫り上がることはない）。box-sizing:border-boxのため、
     padding-topはmin-heightの中に含まれる形になり、通常の縦長SPでは
     従来とほぼ同じ高さのまま収まる。本文が長いスライドだけ、
     min-heightを超えて自然に縦へ伸びる（heightは固定しない）。 */
  .hero__slide {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-height: calc(100svh - var(--header-height-sp));
    height: auto;
    padding-top: var(--hero-content-start);
  }

  /* 写真は背景としてスライド全体に敷き、flexの高さ計算には関与させない */
  .hero__slide-photo {
    position: absolute;
    inset: 0;
    min-height: 0;
  }

  /* PC/SP共通の均一な暗さ（basicの.hero__slide-photo::after）をSPでも使用する。
     本文エリアの読みやすさは、.hero__content自体の下部グラデーションで別途補強する
     （このためSPではPCの::afterを上書きしない）。 */

  /* SP版の縦罫線の延長距離：.hero__contentの下部padding
     （--space-2xl、ドットUI用に確保している余白）と同じ値を再利用する。
     ロゴセットの表示高さは通常時は元のサイズ（32rem）を維持する
     （画面高が低い端末向けの縮小は下記の高さメディアクエリでのみ行う）。
     --hero-content-startは「ロゴ下端＋間隔」＝本文が開始してよい最上位置。
     .hero__common（ロゴのpadding-top）と.hero__slide（本文のpadding-top）の
     両方がこの値を参照するため、ロゴサイズや位置を変えても本文側は
     常にロゴ下端より下から始まり、重ならない。 */
  .hero {
    --hero-scroll-line-extension: var(--space-2xl);
    --hero-emblem-height: 32rem;
    --hero-logo-padding-top: 12vh;
    --hero-content-start: calc(var(--hero-logo-padding-top) + var(--hero-emblem-height) + var(--space-md));
  }

  /* ロゴセットはHero中央付近（やや上寄り）に配置する。
     .hero__commonはflex-direction:row（横並び）のままのため、
     水平方向はjustify-content、垂直方向はalign-itemsで制御する。 */
  .hero__common {
    justify-content: center;
    align-items: flex-start;
    padding: 0 var(--container-padding-sp);
    padding-top: var(--hero-logo-padding-top);
  }

  /* PC限定の下寄せ（translateY）をSPでは解除し、位置を変更しない */
  .hero__logo-set {
    transform: none;
  }

  /* 背景写真のobject-positionをSP用に切り替える
     （各.hero__slide--01〜04の--hero-object-position-spを参照） */
  .hero__image {
    object-position: var(--hero-object-position-sp, center top);
  }

  /* 見出し・本文・SCROLL DOWNをCSS Gridの2カラム構成にする。
     1行目：見出し（grid-column:1/-1で全幅）
     2行目：本文（1列目）とSCROLL DOWN（2列目、grid-auto-flowの自動配置により
     　　　　同じ行へ収まる。grid-rowは明示指定していない）
     SCROLL DOWNを本文と同じGrid行に配置することで、罫線の高さ・上端位置は
     本文の実際の高さへ自動的に追従する（--hero-body-block-sizeのような
     clamp推測値・固定height・bottomからの逆算は一切使用しない）。
     column-gapが「本文⇔SCROLL DOWNレーン」の間隔（読みやすさ優先で広め）。
     開始位置は.hero__slide側のpadding-top（--hero-content-start）で
     固定しているため、ここでのmargin-topは0（通常フロー）にする。
     本文量が少なくても本文がロゴ側へせり上がることはない。
     下部にはドットUI用の余白を確保する。 */
  .hero__content {
    position: relative;
    left: auto;
    bottom: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(1.4rem, 3.5vw, 2rem);
    z-index: var(--z-content);
    margin-top: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 40%, rgba(0, 0, 0, 0) 100%);
    padding: var(--space-xl) var(--container-padding-sp) var(--space-2xl);
  }

  .hero__heading {
    grid-column: 1 / -1;
    writing-mode: horizontal-tb;
    letter-spacing: 0.02em;
    margin: 0 0 var(--space-xs);
    font-size: var(--font-size-lg);
  }

  /* 本文は明朝体へ変更。文字サイズは現状維持し、字間をごく軽微に加えるのみ。
     Gridの1列目に配置し、SCROLL DOWN（2列目）と行の高さを共有する。 */
  .hero__body {
    grid-column: 1;
    writing-mode: horizontal-tb;
    inline-size: auto;
    max-block-size: none;
    font-family: var(--font-family-heading);
    line-height: var(--line-height-base);
    letter-spacing: 0.02em;
  }

  .hero__body p {
    font-size: var(--font-size-sm);
  }

  .hero__body p + p {
    margin-block-start: var(--space-sm);
  }

  /* ドットUI：Hero全体で共通の1組のみ。左下寄りに固定配置し、
     本文の分量差は.hero__contentの下部余白で吸収する。
     SCROLL DOWNとは別要素・別Gridのため、同じ行へは配置しない。 */
  .hero__controls {
    left: var(--container-padding-sp);
    bottom: var(--space-lg);
  }

  /* SCROLL DOWN：Gridの2列目、本文と同じ行に配置する。
     align-self:stretch（Base共通ルール）で本文の行の実高さいっぱいに
     広がるため、.hero__scroll-lineのtop:0が本文の先頭と一致する。
     下端は--hero-scroll-line-extension（このブレークポイントでは
     --space-2xl）分だけ延び、Hero最下部まで届く。 */
  .hero__scroll-cue {
    grid-column: 2;
  }

  /* 画面高が低い端末のみ、ロゴをやや縮小して余白に無理が出ないようにする
     （通常の縦長SPには影響しない。.hero__slideのmin-heightがmax()で
     74remを下回らないよう保証しているため、これは重なり防止の必須条件
     ではなく見た目を整えるための軽微な調整）。 */
  @media (max-height: 720px) {
    .hero {
      --hero-emblem-height: 27rem;
      --hero-logo-padding-top: 6vh;
    }
  }

  /* Introduction：1カラム化・Hero重なり解除・縦書きキャッチコピー非表示・
     地図のクローズアップ表示は1024px側のメディアクエリで既に適用済み
     （768px以下にも継続して効く）ため、ここではギャラリーの列数のみ調整する。
     地図の白グラデーションから写真が現れる見え方にするため、
     地図とギャラリーの間隔は詰める（画像サイズ・列数・並び順は変更しない）。 */
  .introduction__gallery {
    grid-template-columns: repeat(2, 1fr);
    margin-top: calc(-1 * var(--space-md));
  }

  /* 見出し下の余白を詰める（PC用margin-bottom:var(--space-sm)より少し狭くする） */
  .introduction__heading {
    margin-bottom: var(--space-xs);
    font-size: 2.7rem;
    line-height: 1.5;
  }

  /* 本文サイズ（1.7rem、Phase2で確定）はそのまま維持し、行間・段落間隔だけを
     詰めてページの縦の長さを抑える。 */
  .introduction__intro p {
    line-height: 1.7;
  }

  .introduction__intro p + p {
    margin-top: var(--space-xs);
  }

  /* Story：SP専用デザインカンプに合わせて再構築する。PC版のCSS Grid配置は
     やめ、単純なflex縦積みにする。PC版の点線角丸枠はSPでは廃止し
     （シンプルな紙面構成にするため）、Story間は余白のみで区切る。
     grid-area／align-self／justify-selfはflexコンテキストでは効力を持たないが、
     ブラウザ差異に依存しないよう、各Storyの子要素ごとに明示的にも解除しておく
     （position・transform・負のmargin・固定heightなど、PC専用の指定を残さない）。
     paddingは0にし、写真をフルブリードにできるようにする。文章側
     （title-group／body、後述）には個別にpadding-inlineを与えて読みやすい
     余白を確保する。 */
  .story {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
    padding: 0;
    border: none;
    border-radius: 0;
    height: auto;
    min-height: 0;
  }

  .story--01,
  .story--02 {
    margin-bottom: var(--space-lg);
  }

  /* Story 01：本文・タイトル・写真のPC専用Grid配置を明示的に解除する */
  .story--01 .story__body,
  .story--01 .story__title-group,
  .story--01 .story__media {
    grid-area: auto;
    align-self: auto;
    justify-self: auto;
    position: static;
    inset: auto;
    transform: none;
    width: 100%;
    margin: 0;
  }

  /* Story 02：写真・タイトル・本文・地図のPC専用Grid配置・はみ出しを明示的に解除する */
  .story--02 .story__media,
  .story--02 .story__title-group,
  .story--02 .story__body,
  .story--02 .story__map {
    grid-area: auto;
    align-self: auto;
    justify-self: auto;
    position: static;
    inset: auto;
    transform: none;
    width: 100%;
    margin: 0;
  }

  /* Story01・02の写真：フルブリード表示は採用しない。写真は.story
     （paddingなし）の幅＝親.l-containerの左右padding分だけ画面端より
     内側に収まる状態のままとし、本文・ラベルと同じ左右位置に揃える
     （角丸・トリミング意図は既存のまま変更しない）。 */

  /* Story02の地図：PC版（16rem固定）より大きく、文章・写真と同じ左右位置の中で
     十分大きなサイズ感で表示する（カンプ準拠）。gapで生まれる間隔のみを使い、
     二重の余白にならないよう独自のmargin-block-startは持たせない。 */
  .story--02 .story__map {
    width: 100%;
    max-width: none;
  }

  /* Story 03：SPのみ構成を「メイン写真→タイトル→本文→サブ写真」に変更する
     （PC版のcolumn構成・DOM順は変更しない）。.story__media-groupを
     display:contentsにして箱を消し、中のメイン写真・サブ写真を.story--03の
     直接のflexアイテムにした上で、orderで実際の見た目の並び順だけを変える。 */
  .story--03 .story__media-group {
    display: contents;
  }

  .story--03 .story__media--main,
  .story--03 .story__media--sub,
  .story--03 .story__title-group,
  .story--03 .story__body {
    grid-area: auto;
    align-self: auto;
    justify-self: auto;
    position: static;
    inset: auto;
    transform: none;
    width: 100%;
    margin: 0;
  }

  .story--03 .story__media--main {
    order: 1;
  }

  .story--03 .story__title-group {
    order: 2;
  }

  .story--03 .story__body {
    order: 3;
  }

  .story--03 .story__media--sub {
    order: 4;
  }

  /* タイトル（ラベル＋見出し）：PC版の縦書きから横書きへ変更し、左寄せにする。
     PC版で追加したalign-self:startはSPのflex-direction:columnでは
     横方向の揃え（stretch解除）に作用してしまうため、ここで明示的に
     stretchへ戻し、SPの見た目（変更前と同じ）を維持する。 */
  .story__title-group {
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
    gap: var(--space-xs);
  }

  /* ラベル：丸いピル型ではなく横向きの小さな長方形にする。
     PC版はflexを使わない1本のテキストフローに変更したため、SP側で
     従来の横並び（「AGO Story」＋番号）に戻すには、ここでdisplay:flexを
     明示する必要がある（PC側のdisplay指定に依存できなくなったため）。
     書体はPC版に合わせ明朝体（--font-family-heading）を使用する。 */
  .story__label {
    display: flex;
    writing-mode: horizontal-tb;
    flex-direction: row;
    align-items: center;
    gap: var(--space-3xs);
    padding: var(--space-3xs) var(--space-sm);
    font-family: var(--font-family-heading);
    white-space: normal;
  }

  .story__label-number {
    display: inline;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    font-family: var(--font-family-heading);
    white-space: normal;
    margin-block-start: 0;
  }

  /* 見出し：横書きに変更する（heightはPC版の縦書き列数制御用のため不要）。
     文字サイズはIntroduction見出し（--font-size-lg=3.2rem）よりわずかに
     小さい3remにし、両者に若干の差をつける（旧: --font-size-md=2.2remでは
     差が大きすぎたため調整）。 */
  .story--01 .story__heading,
  .story--02 .story__heading,
  .story--03 .story__heading {
    writing-mode: horizontal-tb;
    height: auto;
    font-size: 2.6rem;
    line-height: 1.5;
  }

  /* PC専用の改行を解除し、狭い画面幅ではブラウザ標準の折り返しに任せる */
  .u-br-pc {
    display: none;
  }

  .story__body {
    font-size: 1.7rem;
    line-height: var(--line-height-base);
    max-width: none;
  }

  /* Story 01の流水紋：本文の背後に回り込む大きな背景装飾として見せるため、
     サイズ・濃さを上げ、Story01全体の中央〜下寄りに配置する。
     .story自体は.l-containerの左右paddingぶん画面端より内側にあるため、
     はみ出し量はそのpadding（--container-padding-sp=2rem）ちょうどまでに
     とどめ、画面端に達しても横スクロールが発生しないようにする。 */
  .story--01 .story__decoration--pattern {
    display: block;
    width: 32rem;
    left: -2rem;
    bottom: 10%;
    opacity: 0.65;
  }

  /* Story 03のPC専用ブランド装飾（story-brand-decoration.svg）は非表示にし、
     SP専用のBrandロゴマーク装飾（.story__decoration--brand-mark-sp）に差し替える。 */
  .story--03 .story__decoration--brand {
    display: none;
  }

  /* SP専用装飾：Brandのロゴマーク（家紋）を、Story01の流水紋と対になるよう
     画面右側へはみ出す配置で表示する。本文の主要な文字列とは重ならないよう、
     bottom位置を本文よりさらに下（サブ写真の直前）に寄せ、不透明度も
     控えめにする。.story__decoration--patternと同じ理由で、はみ出し量は
     --container-padding-spを超えない範囲にとどめる。 */
  .story--03 .story__decoration--brand-mark-sp {
    display: block;
    width: 15rem;
    right: -2rem;
    bottom: 0;
    opacity: 0.16;
  }

  /* .brand{padding-block:0}（.l-section由来のpaddingの打ち消し）は、
     詳細度が同じこのSP用.l-sectionルールより前方（非@media）に書かれているため、
     ここで上書きされてBrandセクション外側にpadding-bottom:80pxが復活してしまう。
     .brand__lower側の正規の下余白（直後のルール）はそのまま維持しつつ、
     セクション外側の余白だけを再度0に戻す。 */
  .brand {
    padding-block: 0;
  }

  /* Brand：上下段のpaddingをSP用の余白に縮める（.l-section由来のpaddingは
     .brandで打ち消し済みのため、ここで個別に指定し直す） */
  .brand__upper,
  .brand__lower {
    padding-block: var(--space-section-sp);
  }

  /* 装飾のみの縦書き英字は、SPでは主張が強すぎるため非表示にする */
  .brand__vertical-label {
    display: none;
  }

  /* マークと左右コピー：縦書きから横書きへ変更し、縦積みにする。
     マークとの一体感を保つため、コピーとマークの間隔は詰め気味にする。 */
  .brand__mark-group {
    flex-direction: column;
    gap: var(--space-sm);
  }

  /* SPでは「このマークが　目印です。」のように1行の横書きへ戻す。
     PC版の縦書き用flex-direction:row-reverseを解除し、2つのspanが
     通常の横並びで読める順序に戻す。 */
  .brand__caption {
    writing-mode: horizontal-tb;
    flex-direction: row;
    align-items: baseline;
    gap: var(--space-sm);
    /* PC版で拡大したfont-size-lgがそのまま届くとSPで窮屈になるため、
       従来どおりfont-size-mdに戻す。 */
    font-size: var(--font-size-md);
  }

  .brand__mark img {
    max-width: 18rem;
  }

  /* 協議会・ロゴマークは1カラムに、写真3枚も1カラムに積む。
     写真は画面幅いっぱいにせず、左右に余白を持たせる。 */
  .brand__pills {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .brand__photos {
    grid-template-columns: 1fr;
    padding-inline: var(--space-md);
  }

  /* ポスター：PCの2列表示をやめ、01→02の順で縦積みにする。
     画面幅いっぱいにはせず、左右に余白を持たせる。 */
  .brand__poster {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    padding-inline: var(--space-md);
  }

  /* Brand：定義の2×2グリッドを1カラムに、ポスターは2枚並びのまま維持 */
  .brand__definition-list {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  /* Brand：本文・定義項目の文字サイズを一段階小さくする */
  .brand__council p,
  .brand__logomark p,
  .brand__definition-item p {
    font-size: var(--font-size-sm);
  }

  /* 赤いピル見出し：高さと左右paddingを縮小し、2行になっても帯が
     過度に大きくならないよう行間も詰める */
  .brand__pill-heading {
    padding: var(--space-3xs) var(--space-sm);
    line-height: 1.3;
    margin-bottom: var(--space-xs);
  }

  .brand__council .brand__pill-heading,
  .brand__logomark .brand__pill-heading {
    font-size: var(--font-size-base);
    padding: var(--space-2xs) var(--space-md);
  }

  /* 定義タイトルは読みやすいよう協議会/ロゴマークの見出しと同じ大きさにする */
  .brand__definition-item .brand__pill-heading {
    font-size: var(--font-size-base);
    padding: var(--space-2xs) var(--space-md);
  }

  .brand__definition-item p + p {
    margin-top: var(--space-3xs);
  }

  /* Products / Cuisine / Events：セクション間の縦余白もPCと同じ考え方。
     【診断で判明した実際の原因】.feature-block{padding-block:0}は、直後の
     .l-section{padding-block:var(--space-section-sp)}（この@media内でより
     後方に書かれており、詳細度も同じ）に上書きされてpadding-block-endが
     8rem残ってしまっていた。これがProducts側のbottomとCuisine側のtopで
     二重取りされ、実測160px（本来の2倍）の空白になっていた。
     ここでpadding-block-endを明示的に0へ戻すことで解消する。
     SPは本文・写真が縦積み（別々の行）になりPC側のような写真起因の
     内部余白は発生しないため、中間の余白はtop側の値だけで完結する。 */
  .feature-block {
    padding-block: 0;
    padding-block-start: var(--space-section-sp);
  }

  /* Brandとの境界：Products自身がpadding-topを持つ */
  .feature-block--products {
    padding-block-start: var(--space-section-sp);
  }

  .feature-block--cuisine,
  .feature-block--events {
    padding-block-start: var(--space-lg);
  }

  /* Antenna Shopとの境界：Events自身がpadding-bottomを持つ */
  .feature-block--events {
    padding-block-end: var(--space-section-sp);
  }

  /* Products / Cuisine / Events：SP表示順は「メイン写真→ラベル・見出し→
     サブコピー→本文→補助写真」。DOM順が既にこの並びのため、
     grid-column/grid-rowをautoへ明示的に戻すだけでDOM順の1カラム表示になる
     （PC専用のgrid-column指定・max-width・padding・min-heightの
     解除漏れを防ぐため、それぞれ個別にリセットする）。 */
  .feature-block__inner {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: var(--space-lg);
  }

  .feature-block__content,
  .feature-block__main-media {
    grid-column: auto;
    grid-row: auto;
  }

  .feature-block__content {
    max-width: none;
    padding-inline-start: var(--container-padding-sp);
    padding-inline-end: var(--container-padding-sp);
  }

  .feature-block__main-media {
    min-height: 0;
  }

  /* SPでは写真の主張が強くなりすぎないよう、object-fit:coverによる
     引き伸ばし・切り抜きをやめ、実画像の比率のまま表示する。
     .feature-block--cuisine .feature-block__main-image（object-position指定）
     より詳細度を上げて確実に上書きするため、同じ複合セレクタで指定する。 */
  .feature-block--products .feature-block__main-image,
  .feature-block--cuisine .feature-block__main-image,
  .feature-block--events .feature-block__main-image {
    height: auto;
    object-fit: initial;
    object-position: initial;
  }

  /* サムネイルは横スクロールにせず2列グリッドを維持する。
     3枚の場合は最後の1枚が自動的に1列目・左寄せになる（grid標準の挙動）。
     PC用の.feature-block--◯◯ .feature-block__galleryは詳細度が高いため、
     同じ詳細度のセレクタで明示的に上書きする（.feature-block__galleryだけの
     上書きでは負けてしまい、4列/3列のままになる）。 */
  .feature-block--products .feature-block__gallery,
  .feature-block--cuisine .feature-block__gallery,
  .feature-block--events .feature-block__gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Antenna Shop：写真を先頭に、以降の内容を縦積みにする。
     PC専用のgrid-column指定をautoへ明示的に戻し、DOM順（写真→本文）の
     1カラム表示にする（解除漏れ防止のため個別にリセット）。 */
  .antenna-shop__layout {
    grid-template-columns: 1fr;
  }

  /* SPは画面幅が狭く曲線の存在感が相対的に大きくなるため、PCよりさらに薄くする */
  .antenna-shop::before {
    height: 1.6rem;
  }

  .antenna-shop__media,
  .antenna-shop__content {
    grid-column: auto;
    grid-row: auto;
  }

  /* PR Character：DOM順（本文→キャラクター→グッズ）のまま縦積みにする。
     PC専用のgrid-row/grid-column・Footerへのはみ出し（負のmargin・z-index）を
     すべて明示的に解除し、通常フロー内に収める（決定済み、open-decisions #7）。
     この直前の「.l-section（SP用）」がpadding-blockを一括指定しており、
     ここより前に書いた.pr-character側のpadding-block-startは詳細度が同じため
     負けて無効化されていた（Antenna Shopボタン下の余白が広がっていた原因）。
     そのため、ここで改めてSP用の値を明示し直す。 */
  .pr-character {
    padding-block-start: var(--space-sm);
  }

  .pr-character__layout {
    grid-template-columns: 1fr;
  }

  .pr-character__content,
  .pr-character__character,
  .pr-character__goods {
    grid-column: auto;
    grid-row: auto;
  }

  .pr-character__character {
    margin-block-end: 0;
    z-index: auto;
  }

  /* Footer：PC専用の非対称2カラム（左:ロゴ／右:左寄せ）をやめ、
     ロゴ→メニュー→問い合わせ→リンクバナー→コピーライトの順でDOM順のまま
     1カラム・中央寄せの縦積みに戻す。リンクバナーは横に細長い比率のまま
     1列で縦に並べる。ロゴが波形直下で欠けて見えないよう、PC版より
     ひとまわり小さくし、波形との間に十分な余白を持たせる（暫定値）。 */
  .footer {
    --footer-logo-height: 20rem;
    --footer-wave-height: 5rem;
  }

  /* SP1カラムでは.footer__innerのpadding-block-start（96px、PC用の値）が
     波形直後の空白としてそのまま残ってしまうため個別に縮めるが、
     ロゴが波形に近すぎて欠けて見えないよう、波形の高さより
     明確に大きい余白を確保する（padding-block-endはコピーライト側の
     余白のため変更しない）。 */
  .footer__inner {
    grid-template-columns: 1fr;
    padding-block-start: var(--space-xl);
    justify-items: center;
    text-align: center;
  }

  .footer__main {
    top: 0;
    align-items: center;
    text-align: center;
  }

  .footer__nav-list {
    flex-direction: column;
    justify-content: center;
    gap: var(--space-sm);
  }

  /* PCの横並び用の区切り線・左右paddingは縦積みでは不要なため解除する。
     タップ領域を確保するため、行の上下方向にpaddingを持たせる。
     区切り線の解除はベース側（:not(:last-child)::after）と詳細度を揃える必要がある。 */
  .footer__nav-list li {
    padding-inline: 0;
    padding-block: var(--space-2xs);
  }

  .footer__nav-list li:not(:last-child)::after {
    display: none;
  }

  .footer__links-list {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   Phase5 SP layout fix
   ========================================================================== */

@media (max-width: 768px) {

  /* ---------- Antenna Shop ---------- */

  .antenna-shop {
    margin-top: 0;
    padding-block: 7rem 5rem;
    background: #f1ebda;
  }

  .antenna-shop::before {
    top: 0;
    left: -10%;
    width: 120%;
    height: 3rem;
  }

  .antenna-shop__inner {
    max-width: none;
  }

  .antenna-shop__header {
    margin-bottom: 2.4rem;
  }

  .antenna-shop__label {
    font-size: 1.2rem;
  }

  .antenna-shop__heading {
    font-size: 2.4rem;
    line-height: 1.55;
  }

  .antenna-shop__layout {
    display: flex;
    flex-direction: column;
    gap: 3rem;
  }

  .antenna-shop__content,
  .antenna-shop__media {
    width: 100%;
    min-width: 0;
  }

  .antenna-shop__media {
    order: 1;
  }

  .antenna-shop__content {
    order: 2;
  }

  .antenna-shop__body {
    font-size: 1.6rem;
    line-height: 1.9;
    letter-spacing: 0.02em;
  }

  .antenna-shop__info {
    margin-top: 2.4rem;
    padding: 1.8rem 0 0;
    font-size: 1.45rem;
    line-height: 1.7;
    letter-spacing: 0.01em;
  }

  .antenna-shop__info p:first-child {
    margin-bottom: 1rem;
    line-height: 1.6;
  }

  .antenna-shop__info p + p {
    margin-top: 0.5rem;
  }

  .antenna-shop__button {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .antenna-shop__slide {
    width: 100%;
    aspect-ratio: 3 / 2;
  }

  /* ---------- PR Character ---------- */

  .pr-character {
    padding-block: 5rem 4rem;
  }

  .pr-character__inner {
    max-width: none;
  }

  .pr-character__header {
    margin-bottom: 1.8rem;
  }

  .pr-character__label {
    font-size: 1.2rem;
  }

  .pr-character__heading {
    font-size: 2.4rem;
    line-height: 1.55;
  }

  .pr-character__layout {
    display: flex;
    flex-direction: column;
    gap: 3rem;
  }

  .pr-character__content {
    width: 100%;
    padding-bottom: 0;
  }

  .pr-character__body {
    max-width: none;
    font-size: 1.6rem;
  }

  .pr-character__goods {
    width: min(82%, 34rem);
    margin: 3rem auto 0;
  }

  .pr-character__character {
    width: 100%;
    max-width: 48rem;
    margin: 0 auto;
    transform: none;
  }

  .pr-character__character-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .pr-character__character-caption {
    position: static;
    width: auto;
    margin-top: 1.8rem;
    transform: none;
    font-size: 1.2rem;
    text-align: center;
  }

  /* ---------- Footer ---------- */

  .footer {
    --footer-logo-height: 35rem;
    --footer-wave-height: 3.2rem;
  }

  .footer__inner {
    display: flex;
    flex-direction: column;
    gap: 2.8rem;
    padding-block: 4.5rem 5rem;
  }

  .footer__brand,
  .footer__main {
    width: 100%;
  }

  .footer__brand {
    top: 0;
  }

  .footer__nav-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

.footer__cta {
  display: block;
  width: 90%;
  max-width: 34rem;
  margin: 3rem auto 0;
  text-align: center;
  box-sizing: border-box;
}

  .footer__links-list {
    grid-template-columns: 1fr;
    width: 86%;
    margin-inline: auto;
  }

  .footer__copyright {
    text-align: center;
    margin-top: 5rem;
    padding-bottom: 2rem;
  }
  
    .footer__main {
    gap: 2.8rem;
  }

  .footer__nav-list li {
    padding-block: 0.4rem;
  }

  .footer__links-list {
    gap: 1.8rem;
  }
  
    .footer__links-banner {
    display: block;
    width: 100%;
    height: auto;
  }
  
}


/* ==========================================================================
   Scroll Animation
   ========================================================================== */

.js-scroll-reveal {
  opacity: 0;
  transform: translateY(2.4rem);
  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}

.js-scroll-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.js-scroll-reveal--image {
  transform: translateY(2.8rem);
  transition-duration: 0.95s;
}

.js-scroll-reveal--image.is-revealed {
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .js-scroll-reveal,
  .js-scroll-reveal--image {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   Lightbox
   ========================================================================== */

.is-lightbox-open {
  overflow: hidden;
}

.introduction__gallery img,
.brand__photos img,
.brand__poster img,
.feature-block__gallery-image,
.pr-character__goods-image {
  cursor: zoom-in;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  padding: 4rem 7rem;
  background-color: rgba(12, 12, 12, 0.92);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s ease,
    visibility 0s linear 0.25s;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.lightbox__figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
}

.lightbox__image {
  display: block;
  max-width: min(110rem, 80vw);
  max-height: 78vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 1.2rem 4rem rgba(0, 0, 0, 0.35);
}

.lightbox__caption {
  color: var(--color-text-inverse);
  font-family: var(--font-family-heading);
  font-size: 1.4rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
  text-align: center;
}

.lightbox__counter {
  color: rgba(255, 255, 255, 0.65);
  font-family: var(--font-family-en);
  font-size: 1.2rem;
  letter-spacing: 0.12em;
}

.lightbox__close,
.lightbox__arrow {
  position: absolute;
  border: 0;
  background: none;
  color: var(--color-text-inverse);
  cursor: pointer;
}

.lightbox__close {
  top: 2rem;
  right: 2.5rem;
  width: 4.8rem;
  height: 4.8rem;
  font-size: 0;
}

.lightbox__close::before,
.lightbox__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3rem;
  height: 1px;
  background-color: currentColor;
}

.lightbox__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.lightbox__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.lightbox__arrow {
  top: 50%;
  width: 5rem;
  height: 7rem;
  transform: translateY(-50%);
  font-size: 0;
}

.lightbox__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 2.2rem;
  height: 2.2rem;
  border-top: 1px solid currentColor;
  border-left: 1px solid currentColor;
}

.lightbox__arrow--prev {
  left: 1.5rem;
}

.lightbox__arrow--prev::before {
  left: 1.8rem;
  transform: translateY(-50%) rotate(-45deg);
}

.lightbox__arrow--next {
  right: 1.5rem;
}

.lightbox__arrow--next::before {
  right: 1.8rem;
  transform: translateY(-50%) rotate(135deg);
}

.lightbox__arrow[hidden] {
  display: none;
}

@media (hover: hover) {
  .introduction__gallery img:hover,
  .brand__photos img:hover,
  .brand__poster img:hover,
  .feature-block__gallery-image:hover,
  .pr-character__goods-image:hover {
    opacity: 0.82;
  }

  .lightbox__close:hover,
  .lightbox__arrow:hover {
    opacity: 0.65;
  }
}

@media (max-width: 768px) {
  .lightbox {
    padding: 6rem 1.5rem 3rem;
  }

  .lightbox__image {
    max-width: calc(100vw - 3rem);
    max-height: 72vh;
  }

  .lightbox__close {
    top: 0.8rem;
    right: 0.8rem;
  }

  .lightbox__arrow {
    top: auto;
    bottom: 1rem;
    width: 5.5rem;
    height: 5.5rem;
    transform: none;
    background-color: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.45);
  }

  .lightbox__arrow--prev {
    left: 1.5rem;
  }

  .lightbox__arrow--next {
    right: 1.5rem;
  }

  .lightbox__caption {
    padding-inline: 5rem;
    font-size: 1.3rem;
  }
}

/* ==========================================================================
   Splash Screen
   ========================================================================== */

.splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  overflow: hidden;
  background-color: #090909;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.8s ease,
    visibility 0s linear 0.8s;
}

.is-splash-pending {
  overflow: hidden;
}

.is-splash-pending .splash {
  display: grid;
  place-items: center;
}

.splash__background {
  position: absolute;
  inset: 0;
  background-image: url("../images/splash/bg-teaser.jpg");
  background-size: cover;
  background-position: center center;
  transform: scale(1.02);
  animation: splashBackgroundIn 1.2s ease both;
}

.splash__logo {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  height: clamp(18rem, 25vh, 26rem);
  opacity: 0;
  animation: splashLogoIn 0.9s ease 0.2s forwards;
}

.splash.is-splash-leaving {
  opacity: 0;
  visibility: hidden;
}

@keyframes splashBackgroundIn {
  from {
    opacity: 0;
    transform: scale(1.04);
  }

  to {
    opacity: 1;
    transform: scale(1.02);
  }
}

@keyframes splashLogoIn {
  from {
    opacity: 0;
    transform: translateY(0.8rem) scale(0.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 768px) {
  .splash__background {
    background-position: 58% center;
  }

  .splash__logo {
    height: clamp(15rem, 22vh, 20rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .splash,
  .splash__background,
  .splash__logo {
    animation: none;
    transition-duration: 0.01ms;
  }

  .splash__logo {
    opacity: 1;
  }
}

/* ==========================================================================
   Page Top
   ========================================================================== */

.page-top {
  position: fixed;
  right: 2.4rem;
  bottom: 2.4rem;
  z-index: 9000;
  display: grid;
  place-items: center;
  width: 4.8rem;
  height: 4.8rem;
  padding: 0;
  border: 0;
  border-radius: 0.8rem;
  background-color: rgba(34, 34, 34, 0.20);
  color: var(--color-text-inverse);
  opacity: 0;
  visibility: hidden;
  transform: translateY(1rem);
  cursor: pointer;
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    visibility 0s linear 0.3s,
    transform 0.3s ease,
    background-color 0.25s ease;
}

.page-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
}

.page-top__arrow {
  display: block;
  width: 1.2rem;
  height: 1.2rem;
  border-top: 1px solid currentColor;
  border-left: 1px solid currentColor;
  transform: translateY(0.4rem) rotate(45deg);
}

.page-top:focus-visible {
  outline: 2px solid var(--color-text-inverse);
  outline-offset: 3px;
}

@media (hover: hover) {
  .page-top:hover {
    background-color: rgba(34, 34, 34, 0.32);
    transform: translateY(-0.2rem);
  }
}

@media (max-width: 768px) {
  .page-top {
    right: 1.6rem;
    bottom: 1.6rem;
    width: 4rem;
    height: 4rem;
    border-radius: 0.7rem;
  }

  .page-top__arrow {
    width: 1.2rem;
    height: 1.2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-top {
    transition: none;
  }
}

/* ==========================================================================
   Scroll Animation
   ========================================================================== */

/* JavaScriptが動作した場合だけ初期状態を非表示にする */
.js-scroll-animation .js-reveal-up,
.js-scroll-animation .js-reveal-fade {
  opacity: 0;
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}

.js-scroll-animation .js-reveal-up {
  transform: translateY(3rem);
}

.js-scroll-animation .js-reveal-fade {
  transform: none;
}

.js-scroll-animation .js-reveal-up.is-revealed,
.js-scroll-animation .js-reveal-fade.is-revealed {
  opacity: 1;
  transform: none;
}

@media (max-width: 768px) {
  .js-scroll-animation .js-reveal-up {
    transform: translateY(2rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js-scroll-animation .js-reveal-up,
  .js-scroll-animation .js-reveal-fade {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   Wide PC adjustment
   ========================================================================== */

@media (min-width: 1281px) {
  .feature-block__content {
    width: 60rem;
    max-width: 60rem;
    justify-self: end;
    padding-inline-start: 0;
  }
}

/* ==========================================================================
   Interaction / Hover Effects（PCのみ）
   ========================================================================== */

@media (hover: hover) {

  /* 共通：位置は動かさず、明度変化だけで統一 */

  .header__nav-link,
  .footer__nav-list a,
  .footer__cta,
  .footer__links-banner,
  .antenna-shop__button,
  .page-top,
  .introduction__gallery img,
  .brand__photos img,
  .brand__poster img,
  .feature-block__gallery-image,
  .pr-character__goods-image {
    transition:
      opacity 0.28s ease,
      background-color 0.28s ease;
  }

  /* テキストリンク・線枠ボタン */

  .header__nav-link:hover,
  .footer__nav-list a:hover,
  .footer__cta:hover,
  .antenna-shop__button:hover {
    opacity: 0.65;
    transform: none;
    box-shadow: none;
  }

  /* 関連サイトバナー */

  .footer__links-banner:hover {
    opacity: 0.78;
    transform: none;
  }

  /* ライトボックス対象画像 */

  .introduction__gallery img:hover,
  .brand__photos img:hover,
  .brand__poster img:hover,
  .feature-block__gallery-image:hover,
  .pr-character__goods-image:hover {
    opacity: 0.78;
    transform: none;
  }

  /* Heroスライド切替ドット */

  .hero__dot:hover::before {
    background-color: rgba(255, 255, 255, 0.8);
  }

  /* アンテナショップ切替ドット */

  .antenna-shop__dot:hover::before {
    background-color: #a89f91;
  }

  .antenna-shop__dot--active:hover::before {
    background-color: var(--color-brand-red);
  }

  /* ページ上部へ戻るボタン */

  .page-top:hover {
    background-color: rgba(34, 34, 34, 0.32);
    transform: translateY(0);
  }

}