@charset "UTF-8";

/* ==========================================================================
   Reset
   カンプ再現を前提とした最小構成のリセット。
   ブラウザ既定の装飾を落としつつ、アクセシビリティ上必要な挙動は残す。
   ========================================================================== */

/* box-sizing
   padding と border を width に含める。
   これが無いと「幅300pxにpadding20px」で実寸340pxになり、カンプと合わなくなる。 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 既定マージンの除去
   見出し・段落・リストの上下マージンはブラウザごとに値が違う。
   余白は CSS変数のスケールで統一管理するため、一度ゼロに戻す。 */
body,
h1, h2, h3, h4, h5, h6,
p,
figure,
blockquote,
dl, dd {
  margin: 0;
}

/* 見出しのフォントサイズ・太さ
   既定の h1=2em などはカンプと一致しないため継承に戻す。
   サイズは各セクションの CSS で明示する。 */
h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

/* リストの装飾除去
   role="list" を付けたリストは読み上げ対象として残る。
   装飾を消すと一部スクリーンリーダーがリストとして認識しなくなるため、
   マークアップ側で role="list" を付けること。 */
ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ルート要素 */
html {
  /* ページ内リンクでスクロールを滑らかに */
  scroll-behavior: smooth;
  /* iOS で横向きにしたとき文字が拡大されるのを防ぐ */
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100svh;
  /* line-height は日本語では 1.7〜1.8 が読みやすい。
     英語圏のリセットでよく使われる 1.5 は日本語には詰まって見える。 */
  line-height: 1.8;
  /* 約物（括弧・句読点）の余分な空きを詰める */
  font-feature-settings: "palt";
  /* 単語途中での改行を避けつつ、長い英単語ははみ出させない */
  word-break: normal;
  overflow-wrap: anywhere;
  /* 文字の描画を滑らかに */
  -webkit-font-smoothing: antialiased;
}

/* 見出しやボタンなど短い文字列は行間を詰める */
h1, h2, h3, h4, h5, h6,
button {
  line-height: 1.4;
}

/* メディア要素
   inline 既定だと下に4pxの隙間ができる。これが「なぜか余白が残る」の原因になりやすい。 */
img,
picture,
video,
canvas,
svg,
iframe {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

/* フォーム要素
   フォントは既定で継承されないため明示する。
   これが無いとフォーム内だけ別の書体になる。 */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  margin: 0;
}

button {
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

textarea {
  resize: vertical;
}

/* リンク
   色とアンダーラインは各所で指定する。 */
a {
  color: inherit;
  text-decoration: none;
}

/* テーブル */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* キーボード操作時のフォーカス表示
   マウス操作では出さず、Tabキー操作時のみ表示する。
   outline を全消しするとキーボードだけで操作する人が現在地を見失う。 */
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* アニメーションを減らす設定をしている人への配慮
   OS側で「視差効果を減らす」を有効にしている場合、動きを抑制する。 */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 視覚的には隠すが読み上げには残す
   ロゴ画像内のテキストや、アイコンのみのボタンの説明文に使う。 */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   デザイン値（CSS変数）
   色・余白・文字サイズは必ずここを経由する。各セクションで直値を書かない。
   「やっぱり色を変えたい」となったとき、この1か所を直すだけで全体に反映される。
   ========================================================================== */

:root {
  /* --- 色：カンプから抽出 --- */
  --color-orange: #f2972a;          /* メインカラー／ボタン・帯 */
  --color-orange-deep: #e85504;     /* ロゴの橙・濃いアクセント */
  --color-orange-decor: #d77d1a;    /* 飾り罫（山形）の橙 */
  --color-green: #75bd48;           /* 「あそぶ」 */
  --color-green-lead: #63b975;      /* 「あそぶ」のサブ見出し */
  --color-green-olive: #8ca832;     /* 「お知らせ」帯の背景 */
  --color-green-soft: #7cc48f;      /* 「かなえる」 */
  --color-pink: #f65496;            /* 「つながる」 */
  --color-blue: #6dbce2;            /* 「そなえる」 */
  --color-blue-deep: #287bbe;       /* ロゴの青 */
  --color-blue-lead: #25639f;       /* 「そなえる」のサブ見出し・バッジ */
  --color-green-lead-deep: #62a139; /* 「かなえる」のサブ見出し */
  --color-orange-lead: #f0931f;     /* 「まなぶ」のサブ見出し・バッジ */
  --color-orange-band: #f0931f;     /* 「ご利用案内」の帯の背景（値は上と同じだが役割が別） */
  --color-green-deep: #4eb033;      /* ロゴの緑 */
  --color-teal: #379b9b;            /* 「ご利用案内」ボタン */
  --color-mint: #73c4b0;            /* 緑のギザギザ飾り */
  --color-yellow: #ffe142;          /* 黄色の飾り */
  --color-yellow-deep: #fac500;     /* ロゴの黄 */
  --color-purple: #5f1984;          /* ロゴの紫 */

  --color-text: #2f2e2e;            /* 本文の文字色 */
  --color-text-orange: #e79012;     /* 本文中で強調する語の橙 */
  --color-beige: #eeebde;           /* イベント欄の背景 */
  --color-office: #424142;          /* フッターの「Oita Office」「Tokyo Office」 */
  --color-office-rule: #efdcc0;     /* その下の細い罫 */
  --color-related: #372825;         /* フッターの「関連法人」 */
  --color-related-rule: #ddb372;    /* その下の罫 */
  --color-header-rule: #5f5f5f;     /* 下層ページのヘッダー下の区切り線（カンプ実測） */
  --color-white: #ffffff;
  --color-black: #000000;

  /* --- フォント --- */
  --font-base: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
               "Yu Gothic", "Meiryo", sans-serif;

  /* 本文サイズ。カンプ（横800px）の実測は 13.5px。
     ＠2xのカンプ上で27pxだったものの半分にあたる。
     スマホでもこのサイズを下回らせない（比例縮小すると読めなくなるため）。 */
  --font-size-base: 13.5px;
  --font-size-sm: 12px;
  --font-size-sm-plus: 13.25px;     /* 想い（下層ページ）の本文（実測） */
  --font-size-base-md: 14px;        /* そなえるの本文（実測） */
  --font-size-md: 15px;              /* つながるの本文（実測） */
  --font-size-md-lg: 15.25px;       /* かなえるの本文（実測） */
  --font-size-md-plus: 15.75px;    /* イベントの開催日リスト（実測） */
  --font-size-lg: 16px;
  --font-size-lg-plus: 16.5px;      /* まなぶの本文（実測） */
  --font-size-lg-plus2: 19.5px;     /* ご利用案内の帯の本文（実測） */
  /* 各セクションのサブ見出し。カンプ実測（あそぶ「親子の時間を全力で楽しむ」の
     インク幅317px）に合わせた値。 */
  --font-size-lead: 24.5px;
  /* つながるのサブ見出し。カンプ実測（インク幅261.5px）に合わせた値。 */
  --font-size-lead-sm: 22px;
  /* まなぶのサブ見出し。カンプ実測（インク幅295.5px）に合わせた値。 */
  --font-size-lead-md: 24px;
  --font-size-lg-md: 19px;         /* お知らせの案内文（下段2行・実測） */
  --font-size-xl: 20px;
  --font-size-xxl: 26.5px;         /* お知らせの案内文（上段2行・実測） */
  --font-size-btn: 18px;           /* ご利用案内ボタンのラベル（実測） */
  --font-size-lg-md2: 19.25px;     /* 施設概要の住所・電話（実測） */
  --font-size-goen-text: 18.25px;  /* GOENの紹介の本文（実測） */
  --font-size-xxl-plus: 29.5px;    /* GOENの紹介の見出し（実測） */
  --font-size-footer-company: 15px;         /* フッターの「GOEN株式会社」（実測・後で詰める） */
  --font-size-footer-address: 20px;         /* フッターの住所・電話（実測・後で詰める） */
  --font-size-footer-office: 15.5px;        /* フッターのオフィス名（実測・後で詰める） */
  --font-size-footer-related-title: 15.5px; /* フッターの「関連法人」（実測・後で詰める） */
  --font-size-footer-related: 14.5px;       /* 関連法人の本文（実測・後で詰める） */
  --font-size-footer-related-small: 11px;   /* 「一般社団法人」だけ小さい（実測・後で詰める） */

  /* --- レイアウト --- */
  --site-width: 800px;              /* カンプの横幅。PCではこの幅で中央表示 */
  --gutter: 24px;                   /* 画面端と中身のあいだの余白 */

  /* 「画面幅」と「カンプ幅800px」の小さいほう。
     カンプ実測値を画面幅に比例させたいときの基準にする。
       例: calc(var(--fit-width) * 38 / 800)
           → 画面800px以上なら38px、画面400pxなら19px
     画面幅そのもの(vw)を基準にすると、画面が800pxより広いときに
     値が大きくなりすぎる／小さくなりすぎるため、必ずこれを経由する。 */
  --fit-width: min(100vw, var(--site-width));

  /* --- 余白スケール（8px基準） --- */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 48px;
  --space-xl: 96px;

  /* --- グローバルナビ（ハンバーガーメニュー） --- */
  --color-nav-overlay: rgb(0 0 0 / 45%);   /* 開いたときに背景へかぶせる暗幕 */
  --color-nav-shadow: rgb(0 0 0 / 12%);    /* パネルの左側に落ちる影 */
  --nav-width: 320px;                      /* スライドインするパネルの幅 */
  --nav-duration: 0.32s;                   /* 開閉アニメーションの長さ */
  /* スクロールバーの実測幅。メニューを開くとき JS が書き込む。
     環境によって違う（Windowsのブラウザは約15px、Macやスマホは0px）ので、
     決め打ちにできない。開いていないあいだは 0px のまま使われない。 */
  --scrollbar-width: 0px;

  /* --- ヒーローの動画（音声ボタン） ---
     映像の上に重ねるので、どんな絵柄でも白文字が読めるように黒を薄く敷く。 */
  --color-movie-btn-bg: rgb(0 0 0 / 50%);
  --color-movie-btn-bg-strong: rgb(0 0 0 / 72%);

  /* 「読み込み中」の回る輪。回っていない側（背面の円）の色 */
  --color-movie-loading-ring: rgb(255 255 255 / 35%);
}

/* ==========================================================================
   ベース
   ========================================================================== */

body {
  font-family: var(--font-base);
  font-size: var(--font-size-base);
  font-weight: 400;
  color: var(--color-text);
  background-color: var(--color-white);
}

/* ==========================================================================
   共通レイアウト
   ========================================================================== */

/* 中身を 800px 幅で中央に置く箱。全セクションで使う。 */
.container {
  width: 100%;
  max-width: var(--site-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* 画面いっぱいに色を敷きたい帯（中身だけ 800px に収める）用 */
.band {
  width: 100%;
}

@media (max-width: 480px) {
  :root {
    --gutter: 16px;
  }
}

/* 800px以上のときだけ改行する <br>。
   カンプの改行位置をそのまま縦並びに持ち込むと、
   1行が短くなりすぎて読みにくくなる箇所で使う。 */
.br-wide {
  display: none;
}

@media (min-width: 800px) {
  .br-wide {
    display: inline;
  }
}

/* 800px未満のときだけ改行する <br>。
   カンプでは1行に収まっている見出しが、狭い画面では長すぎるときに使う。 */
.br-narrow {
  display: inline;
}

@media (min-width: 800px) {
  .br-narrow {
    display: none;
  }
}

/* ==========================================================================
   01 ヘッダー

   カンプ（横800px）での実測値
     ロゴ          左端 38px / 幅 298.5px / 下端 109.5px
     営業時間ボタン  左端 484.5px / 幅 186.5px / 上端 31.5px（キリンの頭）
     ハンバーガー   右端 760.5px / 幅 46.5px / 高さ 40px（線6px・間隔11px）
     ヘッダー高さ   111.5px

   800px未満では各要素を画面幅に比例して縮める（min() の第2引数が縮小側）。
   ただし営業時間ボタンは文字が画像に焼き込まれているため、
   ロゴより縮小率をゆるくして読める大きさを保っている。
   ========================================================================== */

.site-header {
  /* カンプ実測値を画面幅に比例させる。
     max() の第1引数は「これ以上は小さくしない」下限。
     営業時間ボタンは文字が画像に焼き込まれているため下限を高めにしている。 */
  --header-gutter: calc(var(--fit-width) * 38 / 800);
  --header-pad-top: calc(var(--fit-width) * 32 / 800);
  --logo-width:    max(132px, calc(var(--fit-width) * 307.5 / 800));
  --hours-width:   max(120px, calc(var(--fit-width) * 186.5 / 800));
  --toggle-width:  max(28px,  calc(var(--fit-width) * 46.5 / 800));
  --toggle-bar:    max(4px,   calc(var(--fit-width) * 6 / 800));
  --toggle-gap:    max(7px,   calc(var(--fit-width) * 11 / 800));
  --toggle-space:  max(10px,  calc(var(--fit-width) * 44 / 800));

  background-color: var(--color-white);
}

.site-header__inner {
  display: flex;
  align-items: flex-end;
  width: 100%;
  max-width: var(--site-width);
  margin-inline: auto;
  padding-inline: var(--header-gutter);
  padding-block: var(--header-pad-top) 0;
}

/* ロゴ
   logo.png は上下左右に 4.5px ぶんの透明な余白を含んでいる。
   カンプの位置に合わせるため、その分だけ外側へずらしている。 */
.site-header__logo {
  margin-inline-start: -4px;
  margin-block-end: -2px;
  /* 画面が極端に狭いときは、ボタンとメニューより先にロゴが縮む */
  min-width: 0;
  flex-shrink: 1;
}

.site-header__logo img {
  width: var(--logo-width);
  height: auto;
}

/* 本日の営業時間はこちら
   auto で左側に余白を寄せ、ボタンとハンバーガーを右端にまとめる。 */
.site-header__hours {
  margin-inline-start: auto;
  flex-shrink: 0;
  transition: opacity 0.2s;
}

.site-header__hours:hover {
  opacity: 0.75;
}

.site-header__hours img {
  width: var(--hours-width);
  height: auto;
}

/* メニューボタン（3本線）
   線はロゴと同じ緑・橙・黄。画像ではなくCSSで描いている。 */
.menu-toggle {
  display: flex;
  flex-direction: column;
  gap: var(--toggle-gap);
  width: var(--toggle-width);
  margin-inline-start: var(--toggle-space);
  flex-shrink: 0;
}

.menu-toggle__bar {
  display: block;
  width: 100%;
  height: var(--toggle-bar);
  border-radius: 1px;
}

.menu-toggle__bar:nth-child(1) { background-color: var(--color-green-deep); }
.menu-toggle__bar:nth-child(2) { background-color: var(--color-orange-deep); }
.menu-toggle__bar:nth-child(3) { background-color: var(--color-yellow-deep); }

.menu-toggle:hover .menu-toggle__bar {
  opacity: 0.75;
}

/* ==========================================================================
   01-2 グローバルナビ（ハンバーガーメニュー）

   ハンバーガーをクリックすると、画面の右からパネルがスライドインする。
   閉じる手段は3つ用意している：×ボタン／背景の暗幕をクリック／Escキー。

   開いているかどうかは JS が .is-open を付け外しして表す。
   CSS側は「開いた状態」と「閉じた状態」の見た目だけを持ち、
   どちらに切り替えるかの判断は持たない。

   display:none で隠していないのは、それだとスライドの動きが効かないため。
   閉じているあいだは画面の右外に逃がしておき、読み上げとキーボードのTabからは
   inert（HTML側の属性。JSが開閉に合わせて付け外しする）で切り離している。
   ========================================================================== */

/* --- 背景の暗幕 ---
   パネルの外側をクリックして閉じるための受け皿も兼ねている。
   閉じているあいだは opacity:0 で見えなくするだけなので、
   pointer-events:none でクリックを素通りさせないと本文が押せなくなる。 */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background-color: var(--color-nav-overlay);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--nav-duration) ease;
}

.nav-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* --- パネル本体 --- */
.global-nav {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: 100;
  /* 狭い画面では画面幅の86%まで。背景が少しのぞいていると
     「外側をタップすれば閉じられる」ことが伝わりやすい */
  width: min(var(--nav-width), 86vw);
  padding-inline: var(--space-md);
  padding-block-end: var(--space-lg);
  overflow-y: auto;
  /* パネルを端までスクロールしたとき、続けて背景が動いてしまうのを防ぐ */
  overscroll-behavior: contain;
  background-color: var(--color-white);
  box-shadow: -8px 0 24px var(--color-nav-shadow);
  /* 閉じているあいだは、パネル1枚ぶん右の画面外に逃がしておく。
     visibility:hidden で隠していないのは、隠したままだと開いた直後に
     閉じるボタンへフォーカスを移せないため。キーボードと読み上げ対策は
     HTML側の inert（JSが開閉に合わせて付け外し）が受け持つ。 */
  translate: 100% 0;
  transition: translate var(--nav-duration) ease;
}

.global-nav.is-open {
  translate: 0 0;
}

/* メニューを開いているあいだは背景をスクロールさせない。
   スクロールバーが消えるぶん本文が右にずれるので、
   消えた幅と同じ余白を右側に足して位置を保つ。 */
body.is-nav-open {
  overflow: hidden;
  padding-inline-end: var(--scrollbar-width);
}

/* --- パネル上部（ロゴ＋閉じるボタン） ---
   項目が多いので、下までスクロールしても閉じるボタンが上に残るようにしている。 */
.global-nav__head {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-block: var(--space-md) var(--space-sm);
  background-color: var(--color-white);
}

.global-nav__logo img {
  width: 180px;
  height: auto;
}

/* 閉じるボタン
   ヘッダーの3本線と同じ考え方で、×もCSSで描いている（画像を増やさない）。 */
.nav-close {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.nav-close:hover {
  /* ベージュを白で薄めた色。新しい色を増やさずに済ませている */
  background-color: color-mix(in srgb, var(--color-beige) 55%, var(--color-white));
}

.nav-close__bar {
  position: absolute;
  inset-inline: 9px;
  inset-block-start: 50%;
  height: 4px;
  border-radius: 2px;
  /* まず上下中央にそろえ、そのあと逆向きに傾けて × を作る */
  translate: 0 -50%;
}

.nav-close__bar:nth-child(1) {
  background-color: var(--color-green-deep);
  rotate: 45deg;
}

.nav-close__bar:nth-child(2) {
  background-color: var(--color-orange-deep);
  rotate: -45deg;
}

/* --- メニューの項目 --- */
.global-nav__list {
  border-block-start: 1.5px solid var(--color-beige);
}

.global-nav__link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
  padding-inline: var(--space-xs);
  font-size: var(--font-size-lg);
  font-weight: 500;
  line-height: 1.5;
  border-block-end: 1.5px solid var(--color-beige);
  transition: background-color 0.2s;
}

/* 項目の左に置く丸。色は下の --nav-accent（li側で指定）で決まる。
   クラスの付け忘れで色が消えないよう、既定値としてメインカラーを入れてある。 */
.global-nav__link::before {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--nav-accent, var(--color-orange));
}

/* ホバーは背景をうっすら色づけるだけにする。
   文字色まで変えると、水色や薄緑の項目で本文が読みにくくなるため。 */
.global-nav__link:hover {
  background-color: color-mix(in srgb,
                              var(--nav-accent, var(--color-orange)) 12%,
                              var(--color-white));
}

/* 今いるページの項目 */
.global-nav__link[aria-current="page"] {
  font-weight: 700;
  background-color: color-mix(in srgb,
                              var(--nav-accent, var(--color-orange)) 12%,
                              var(--color-white));
}

/* 項目ごとの色。各セクションで使っている色をそのまま持ってきている */
.global-nav__item--omoi      { --nav-accent: var(--color-orange-deep); }
.global-nav__item--asobu     { --nav-accent: var(--color-green); }
.global-nav__item--tsunagaru { --nav-accent: var(--color-pink); }
.global-nav__item--sonaeru   { --nav-accent: var(--color-blue); }
.global-nav__item--kanaeru   { --nav-accent: var(--color-green-soft); }
.global-nav__item--manabu    { --nav-accent: var(--color-orange-lead); }
.global-nav__item--news      { --nav-accent: var(--color-green-olive); }
.global-nav__item--info      { --nav-accent: var(--color-teal); }
.global-nav__item--facility  { --nav-accent: var(--color-purple); }
.global-nav__item--goen      { --nav-accent: var(--color-blue-deep); }

/* ==========================================================================
   02 ヒーロー（メインビジュアル）

   カンプ（横800px）での実測値
     画像 左端 1px（＝コンテナの左端ぴったり）/ 幅 746.5px / 高さ 362.5px
     画像 上端 187.5px … ヘッダー下端(111.5px)から 76px あける
     右側には 52.5px の白が残る

   2026-09-19 変更: 静止画から動画に差し替えたのに合わせ、
   右の52.5pxをやめてコンテナ幅いっぱい（800px）にした。
   静止画のスライドに戻すときは .hero__viewport の width を
   calc(100% * 746.5 / 800) に戻す

   将来スライドにする前提の構造:
     .hero__viewport  はみ出しを隠す窓
     .hero__slides    横一列に並ぶレール（ここを translateX で動かす）
     .hero__slide     1枚ぶん。<li> を増やすだけで枚数を増やせる
   ========================================================================== */

.hero {
  width: 100%;
  max-width: var(--site-width);
  margin-inline: auto;
  padding-block-start: calc(var(--fit-width) * 76 / 800);
}

.hero__viewport {
  width: 100%;
  overflow: hidden;
}

.hero__slides {
  display: flex;
}

.hero__slide {
  flex: 0 0 100%;
}

.hero__slide img {
  width: 100%;
  height: auto;
}

/* --- ヒーローの動画 --------------------------------------------------------
   2026-09-28 に YouTube 埋め込み（iframe）から <video> に差し替えた。
   枠の作りは同じなので、このブロックの指定はそのまま使える。

   カンプの写真枠は 746.5 × 362.5px（約 2.06 : 1）で、
   動画の 16 : 9（約 1.78 : 1）より横長。そのまま入れると合わないので、
   ここでは「動画を切らずに全部見せる」ほうを既定にしている。
   幅を800pxいっぱいに広げたため、高さは 450px（カンプの362.5pxより87.5px高い）。

   カンプどおりの高さに揃えたいときは、HTML の
   <div class="hero__movie"> に hero__movie--fit-comp を足す。
   高さは合うが、動画の上下が合わせて約 14% 切れる。
   -------------------------------------------------------------------------- */

.hero__movie {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: var(--color-text);

  /* 映像の上をタップ（クリック）すると操作ボタンが出る。
     押せる場所だと分かるように指の形にしておく */
  cursor: pointer;

  /* 枠の下じきに置くごく粗い静止画（32×18px）。
     2026-10-09 追加。静止画（hero-poster.jpg / 約42KB）が届くまでの
     数秒を、真っ暗ではなく「ぼやけた本編の絵」で埋めるため。

     画像ファイルではなく文字列として CSS に埋め込んである（約370バイト）。
     ダウンロードが発生しないので、CSSが読めた瞬間にはもう出ている。

     作り直しかた（動画を差し替えたときだけ）:
       ffmpeg -i design/images_original/hero-poster_1280x720.jpg \
         -vf "scale=32:18:flags=area,gblur=sigma=0.8" -q:v 8 tiny.jpg
       base64 -w0 tiny.jpg
     出てきた文字列を下の base64, のうしろと差し替える。
     これより小さく／粗くすると、JPEGのにじみで元の絵に無い色が出る */
  background-image: url("data:image/jpeg;base64,/9j//gAQTGF2YzYyLjI4LjEwMQD/2wBDAAgQEBMQExYWFhYWFhoYGhsbGxoaGhobGxsdHR0iIiIdHR0bGx0dICAiIiUmJSMjIiMmJigoKDAwLi44ODpFRVP/xABtAAEBAQEAAAAAAAAAAAAAAAAFAwcEAQEAAwEAAAAAAAAAAAAAAAAEAgADBRAAAQMDAwQCAwEAAAAAAAAAAQIAAwQRIXFBMxJCcsFRMROhMiMRAAICAwEBAQAAAAAAAAAAAAACEQEDMYFxQTP/wAARCAASACADASIAAhEAAxEA/9oADAMBAAIRAxEAPwBVM4iCulRwvI3Nw41NlUqr6/tgKhWqQnJuo6turQpMaYu4/Y+GfLklo9FY0ipDaepC1mPpI6Qc/OXrq8RHxeM09IUyp/2KrbC+Bve71iaQfgOjskLrQLTAXRgMeq5JW1Tf0jRi1XJM+W36dHprhWMAIVYdnt9KSTGc7OCONXh7dk8Z0aV3Zg/w/9k=");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero__movie-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;

  /* video は既定で inline 扱いになり、下に数pxの隙間ができる */
  display: block;

  /* 枠と動画の比率がずれたときに、伸び縮みではなく切り抜きで合わせる */
  object-fit: cover;
}

/* カンプの写真と同じ横長比（約 2.06 : 1）に収めたい場合。
   幅800pxなら高さ388.5pxになり、動画の上下が合わせて約14%切れる */
.hero__movie--fit-comp {
  aspect-ratio: 746.5 / 362.5;
}

.hero__movie--fit-comp .hero__movie-frame {
  /* 枠の幅から求めた 16:9 の高さ = 枠の高さの 115.8% */
  top: 50%;
  height: 115.8%;
  translate: 0 -50%;

  /* ここでは自分で高さを決めて上下を切っているので、
     object-fit による切り抜きは重ねない */
  object-fit: fill;
}

/* --- 読み込み中の表示 ------------------------------------------------------
   2026-10-09 追加。スマホの回線では、動画の1コマ目が出るまでに数秒かかる。
   そのあいだ何も出ないと「壊れている」ように見えるので、
   静止画の上に「読み込み中」と回る輪を重ねておく。

   画像は使わず、文字と枠線だけで描く。読み込むものが無いので
   「読み込み中の表示そのものが読み込み待ちになる」ことが起きない。

   出し入れは JS が hidden を付け外しして行う。
   -------------------------------------------------------------------------- */

.hero__loading {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;

  display: flex;
  align-items: center;
  gap: var(--space-xs);

  margin: 0;
  padding: var(--space-xs) var(--space-sm);
  border-radius: 999px;

  /* 静止画の上に重なるので、下じきを敷いて文字を読めるようにする */
  background-color: var(--color-movie-btn-bg);
  color: var(--color-white);
  font-size: var(--font-size-base-md);
  line-height: 1;
  white-space: nowrap;

  /* 出るときにふっと現れる。消すのは JS（hidden） */
  animation: hero-loading-in 0.4s ease both;
}

.hero__loading[hidden] {
  display: none;
}

/* 回る輪。上側だけ色を変えた円を回している */
.hero__loading-mark {
  width: 16px;
  height: 16px;
  border: 2px solid var(--color-movie-loading-ring);
  border-top-color: var(--color-white);
  border-radius: 50%;
  animation: hero-loading-spin 0.9s linear infinite;
}

@keyframes hero-loading-spin {
  to {
    rotate: 360deg;
  }
}

@keyframes hero-loading-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* --- 動画の操作ボタン ------------------------------------------------------
   動画そのものには controls を付けず、「再生／停止」と「音」の2つだけを置く。
   2つとも同じ形なので、共通の見た目は .hero__control にまとめてある。

   「今どちらの状態か」は .is-unmuted / .is-playing の有無で表す。
   付け外しは JS が行い、どう見えるかはここだけで決める。
   -------------------------------------------------------------------------- */

/* 2026-10-09 変更: 右下から**右上**へ移した。
   動画の字幕は焼き込みで、必ず画面下端から 5.7〜10.6% の帯に出る。
   右下（下端から16〜52px）はこの帯と重なるため、長い字幕が隠れていた。
   スマホだけの問題に見えていたが、800px表示でも同じだけ重なっていた。
   右下に戻したいときは top を bottom に書き換える。 */
.hero__controls {
  position: absolute;
  right: var(--space-sm);
  top: var(--space-sm);
  display: flex;
  align-items: center;
  gap: var(--space-xs);

  /* ふだんは消しておき、動画をタップ（PCはマウスを乗せる）したときだけ出す。
     2026-10-09 追加。映像に何も重ねない時間を作るため。

     display: none ではなく opacity で消している。
     display: none にするとキーボードのTabキーで辿り着けなくなり、
     マウスを使わない人がボタンを押せなくなるため。
     見えていないあいだは pointer-events: none で押せなくしておき、
     Tabキーで中のボタンに入った瞬間（:focus-within）に出す。 */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

/* 出ている状態
     .is-visible   … JS が付ける（タップした直後・一時停止中・読み込み直後の数秒）
     :hover        … PCでマウスを乗せているあいだ
     :focus-within … キーボードで中のボタンに入っているあいだ */
.hero__movie:hover .hero__controls,
.hero__controls:focus-within,
.hero__controls.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* JS が準備できるまでは隠す。
   上の display が勝ってしまうので、ここで打ち消しておく。 */
.hero__controls[hidden] {
  display: none;
}

.hero__control {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border: 0;
  border-radius: 999px;
  background-color: var(--color-movie-btn-bg);
  color: var(--color-white);
  font-family: var(--font-base);
  font-size: var(--font-size-base-md);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

.hero__control:hover,
.hero__control:focus-visible {
  background-color: var(--color-movie-btn-bg-strong);
}

/* --- 再生／停止 --- */

.hero__play-icon {
  display: block;
  width: 18px;
  height: 18px;
}

/* 止まっているあいだは「▶」、再生中は「❚❚」を出す */
.hero__play-icon--pause {
  display: none;
}

.hero__play.is-playing .hero__play-icon--play {
  display: none;
}

.hero__play.is-playing .hero__play-icon--pause {
  display: block;
}

/* --- 音声 --- */

.hero__sound-icon {
  display: block;
  width: 20px;
  height: 20px;
}

/* 無音のあいだは「スピーカー×」、音が出ているあいだは「スピーカー波」 */
.hero__sound-icon--on {
  display: none;
}

.hero__sound.is-unmuted .hero__sound-icon--off {
  display: none;
}

.hero__sound.is-unmuted .hero__sound-icon--on {
  display: block;
}

/* ==========================================================================
   03 作戦会議

   カンプ（横800px）での実測値。y はカンプ全体での絶対位置。
     山形罫      左532   上592    258×17
     橙の丸      左-48.5 上613    113×105（左端で見切れる）
     タイトル     左74    上732.5  265×128
     遊具写真     左318   上696    482×359（右端が800pxぴったり）
     本文 1行目   左81.5  上914.5  行送り33.5px / 段落間はさらに10px
     黄リング     左0.5   上1030.5 80×104
     想いボタン   左415   上1039   367×128（画像の周囲18pxは透明）
     緑ギザギザ   左303.5 上1095   87×20
   セクション上端は山形罫の上端(592)とする。高さ556px。

   レイアウトの方針
     800px以上 … カンプどおりに重ねて配置する（絶対配置・実寸px）
     800px未満 … 重ねると文字が写真にかぶって読めなくなるため、
                 タイトル→写真→本文→ボタンの縦並びに切り替える
   ========================================================================== */

.kaigi {
  position: relative;
  width: 100%;
  max-width: var(--site-width);
  margin-inline: auto;
  /* 縦並びのときのヒーローとの間隔。
     カンプ相当の42.5pxだと詰まって見えるため広げている。 */
  --kaigi-pad-top: calc(var(--fit-width) * 102 / 800);
  /* 橙の丸の上にとる余白。ヒーローとの間が詰まって見えたため追加した。 */
  --kaigi-blob-top: calc(var(--fit-width) * 64 / 800);

  padding-inline: var(--gutter);
  padding-block: var(--kaigi-pad-top) calc(var(--fit-width) * 60 / 800);
  /* 左にはみ出す橙の丸を、カンプと同じくコンテナの端で切る */
  overflow: hidden;
}

/* --- 飾り（800px未満） --- */

.kaigi__deco {
  position: absolute;
  z-index: 0;
  height: auto;
}

.kaigi__deco--chevron {
  top: var(--kaigi-pad-top);
  right: var(--gutter);
  width: calc(var(--fit-width) * 257.5 / 800);
}

/* 縦並びのときはタイトルの真上に置く。
   カンプと同じ高さに置くとタイトルの1文字目に重なって読めなくなるため。 */
.kaigi__deco--blob {
  top: var(--kaigi-blob-top);
  left: calc(var(--fit-width) * -48.5 / 800);
  width: calc(var(--fit-width) * 113 / 800);
}

.kaigi__deco--ring {
  bottom: calc(var(--fit-width) * 40 / 800);
  left: 0;
  width: calc(var(--fit-width) * 80 / 800);
}

.kaigi__deco--squiggle {
  bottom: calc(var(--fit-width) * 8 / 800);
  right: calc(var(--fit-width) * 40 / 800);
  width: calc(var(--fit-width) * 87 / 800);
}

/* --- 中身（800px未満は縦並び） --- */

/* 縦並びのときは、見出しの右にキリンを並べる（ユーザー指示）。
   キリンは施設写真から抜いた別素材（kaigi_img_sp01.png）。 */
.kaigi__heading {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: var(--space-xs);
  /* 上の橙の丸（高さ113px相当）をよけるだけの余白をとる。
     丸を下げた分（--kaigi-blob-top）も足して、重ならないようにする。 */
  margin-block-start: calc(var(--kaigi-blob-top) + var(--fit-width) * 95 / 800);
}

.kaigi__title {
  /* 素材は@2x（実寸530px）なので265pxを超えない範囲なら拡大してもぼやけない。
     画面が狭いときはキリンの分だけ縮む。 */
  flex: 0 1 265px;
  min-width: 0;
}

.kaigi__giraffe {
  flex: 0 0 auto;
  width: 70px;
  height: auto;
}

.kaigi__title img {
  width: 100%;
}

.kaigi__photo {
  position: relative;
  z-index: 1;
  margin-block-start: var(--space-md);
  /* 縦並びのときは、画面の端まで広げていたときの80%の大きさで中央に置く（ユーザー指示）。
     「100% + gutter」が以前の幅（右端を画面の右端に付けていたときの幅）。 */
  width: calc((100% + var(--gutter)) * 0.8);
  margin-inline: auto;
}

.kaigi__photo img {
  width: 100%;
}

.kaigi__text {
  position: relative;
  z-index: 2;
  margin-block-start: var(--space-md);
  font-size: var(--font-size-base);
  line-height: 33.5px;
}

.kaigi__text p + p {
  margin-block-start: 10px;
}

/* 強調語。em の既定の斜体は日本語では崩れるので解除する */
.kaigi__text em {
  font-style: normal;
  color: var(--color-text-orange);
}

.kaigi__btn {
  position: relative;
  z-index: 3;
  display: block;
  width: min(367px, 100%);
  margin-block-start: var(--space-sm);
  margin-inline: auto;
  transition: opacity 0.2s;
}

.kaigi__btn:hover {
  opacity: 0.8;
}

.kaigi__btn img {
  width: 100%;
}

/* --- 800px以上：カンプどおりに重ねて配置 --- */

@media (min-width: 800px) {

  .kaigi {
    height: 556px;
    padding-inline: 0;
    padding-block-start: 0;
    margin-block-start: 42.5px;
  }

  .kaigi__deco--chevron  { top: 0;     left: 532px;   right: auto;  width: 257.5px; }
  .kaigi__deco--blob     { top: 21px;  left: -48.5px;               width: 113px; }
  .kaigi__deco--ring     { top: 438.5px; left: 0.5px; bottom: auto; width: 80px; }
  .kaigi__deco--squiggle { top: 503px; left: 303.5px; right: auto; bottom: auto; width: 87px; }

  /* PCではキリンは施設写真の中にいるので、見出し脇のキリンは出さない */
  .kaigi__heading {
    display: block;
    margin-block-start: 0;
  }

  .kaigi__giraffe {
    display: none;
  }

  .kaigi__title {
    position: absolute;
    top: 140.5px;
    left: 74px;
    width: 265px;
    flex: none;
  }

  .kaigi__photo {
    position: absolute;
    top: 104px;
    left: 318px;
    width: 482px;
    margin-block-start: 0;
    margin-inline: 0;
  }

  .kaigi__text {
    position: absolute;
    top: 312px;
    left: 80px;
    margin-block-start: 0;
  }

  .kaigi__btn {
    position: absolute;
    top: 447px;
    left: 415px;
    width: 367px;
    margin-block-start: 0;
    margin-inline: 0;
  }

}

/* ==========================================================================
   04 あそぶ
   作戦会議と同じ考え方。
     800px以上 … カンプどおりに絶対配置（実寸px）
     800px未満 … 見出し→サブ見出し→イラスト→本文→ボタンの縦並び
   イラストのまわりの飾りは asobu_img.png に含まれているので個別配置は不要。
   ========================================================================== */

.asobu {
  /* カンプ実測から出した、このセクションだけの値。
     ink＝文字の見た目の上端。CSSの top はそれより少し上になるので、
     ブラウザで実測して補正した値を入れている。 */
  --asobu-line-height: 22.3px;   /* 本文の行送り（実測） */
  --asobu-lead-spacing: 2px;     /* サブ見出しの字間（実測） */
  --asobu-lead-top: 43px;
  --asobu-lead-left: 348px;
  --asobu-text-left: 77px;
  --asobu-text1-top: 177px;
  --asobu-text2-top: 266.5px;

  position: relative;
  width: 100%;
  max-width: var(--site-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: calc(var(--fit-width) * 60 / 800);
  /* スマホでは中身をすべて中央揃えにする（ユーザー指示） */
  text-align: center;
}

.asobu__title {
  /* スマホではカンプの203pxより10%小さくする（ユーザー指示） */
  width: 182.5px;
  max-width: 100%;
  /* スマホでは中央に置く（ユーザー指示） */
  margin-inline: auto;
}

.asobu__title img,
.asobu__photo img,
.asobu__label img,
.asobu__btn img {
  width: 100%;
  height: auto;
}

/* サブ見出し。カンプ実測（インク幅317px）に合わせて 24.5px＋字間2px にしている */
.asobu__lead {
  margin-block-start: var(--space-sm);
  font-size: var(--font-size-lead);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: var(--asobu-lead-spacing);
  color: var(--color-green-lead);
}

.asobu__photo {
  position: relative;
  z-index: 0;
  width: 438.5px;
  max-width: 100%;
  margin-inline: auto;
  /* イラストは上から15.05%分が透明。そのままだと本文との間が空きすぎるので、
     その分を引き上げて、いちばん上の絵（黄緑の走り書き）が本文の10px下に来るようにする。
     0.1505 は asobu_img.png の透明部分を実測して出した比率。 */
  margin-block-start: calc(10px - min(438.5px, 100%) * 0.1505);
}

.asobu__body {
  position: relative;
  z-index: 1;   /* イラストを引き上げたとき、文字が上に来るようにする */
  margin-block-start: var(--space-md);
}

/* スマホではラベルを約1.35倍に拡大する（ユーザー指示）。
   素材は2倍解像度なので、この大きさでもぼやけない。 */
.asobu__label {
  width: 200px;
  max-width: 100%;
  margin-inline: auto;
}

.asobu__label--2 {
  width: 169px;
  margin-block-start: var(--space-md);
}

.asobu__text {
  margin-block-start: var(--space-xs);
  font-size: var(--font-size-base);
  line-height: var(--asobu-line-height);
}

.asobu__btn {
  display: block;
  width: 320.5px;
  max-width: 100%;
  margin-block-start: var(--space-sm);
  margin-inline: auto;
  transition: opacity 0.2s;
}

.asobu__btn:hover {
  opacity: 0.8;
}

/* --- 800px以上：カンプどおりに配置 --- */

@media (min-width: 800px) {

  .asobu {
    height: 392px;
    padding-inline: 0;
    padding-block: 0;
    /* カンプどおりの配置に戻すので、中央揃えは解除する */
    text-align: left;
  }

  .asobu__title {
    position: absolute;
    top: 36px;
    left: 73.5px;
    width: 203px;
    margin-inline: 0;
  }

  .asobu__lead {
    position: absolute;
    top: var(--asobu-lead-top);
    left: var(--asobu-lead-left);
    margin-block-start: 0;
    white-space: nowrap;
  }

  .asobu__photo {
    position: absolute;
    top: 45.5px;
    left: 341.5px;
    width: 438.5px;
    margin-block-start: 0;
    margin-inline: 0;
  }

  .asobu__body {
    margin-block-start: 0;
  }

  .asobu__label {
    position: absolute;
    top: 152.5px;
    left: 59px;
    width: 148px;
    margin-inline: 0;
  }

  .asobu__label--2 {
    top: 244.5px;
    left: 64.5px;
    width: 125px;
    margin-block-start: 0;
  }

  .asobu__text {
    position: absolute;
    left: var(--asobu-text-left);
    margin-block-start: 0;
    white-space: nowrap;
  }

  .asobu__text--1 { top: var(--asobu-text1-top); }
  .asobu__text--2 { top: var(--asobu-text2-top); }

  .asobu__btn {
    position: absolute;
    top: 264.5px;
    left: 441px;
    width: 320.5px;
    margin-block-start: 0;
    margin-inline: 0;
  }

}

/* ==========================================================================
   05 つながる
   カンプではイラストが左・文章が右。あそぶの左右逆の配置。
     800px以上 … カンプどおりに絶対配置（実寸px）
     800px未満 … 見出し→サブ見出し→本文→イラスト→ロゴ の縦並び・中央揃え
   ロゴの右に重なる水色の三角は tunagaru_bglogo.png に含まれている。
   ========================================================================== */

.tsunagaru {
  /* カンプ実測から出した、このセクションだけの値。
     ink＝文字の見た目の上端。CSSの top はそれより少し上になるので、
     ブラウザで実測して補正した値を入れている。 */
  --tsunagaru-line-height: 23.75px;   /* 本文の行送り（実測） */
  --tsunagaru-lead-spacing: 2px;      /* サブ見出しの字間（実測） */
  --tsunagaru-indent: 5.5px;          /* 各段落1行目の字下げ（実測） */
  --tsunagaru-lead-top: 66.5px;
  --tsunagaru-lead-left: 420.5px;
  --tsunagaru-text-left: 396px;
  --tsunagaru-text1-top: 181px;
  --tsunagaru-text2-top: 275px;

  position: relative;
  width: 100%;
  max-width: var(--site-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: calc(var(--fit-width) * 60 / 800);
  text-align: center;
  /* 左にはみ出す青い三角を、カンプと同じくコンテナの端で切る */
  overflow: hidden;
}

/* --- 飾り --- */

.tsunagaru__deco {
  position: absolute;
  z-index: 0;
  height: auto;
}

.tsunagaru__deco--triangle {
  top: calc(var(--fit-width) * 23.5 / 800);
  left: calc(var(--fit-width) * -5 / 800);
  width: calc(var(--fit-width) * 57.5 / 800);
}

.tsunagaru__deco--chevron {
  top: calc(var(--fit-width) * 41 / 800);
  right: var(--gutter);
  width: calc(var(--fit-width) * 179 / 800);
}

/* --- 中身（800px未満は縦並び・中央揃え） --- */

.tsunagaru__title {
  position: relative;
  z-index: 1;
  /* スマホではカンプの280.5pxより10%小さくする（ユーザー指示） */
  width: 252.5px;
  max-width: 100%;
  margin-inline: auto;
  /* 右上の山形罫との間隔を空ける（ユーザー指示） */
  margin-block-start: var(--space-sm);
}

.tsunagaru__title img,
.tsunagaru__photo img,
.tsunagaru__label img,
.tsunagaru__logo img {
  width: 100%;
  height: auto;
}

/* サブ見出し。カンプ実測（インク幅261.5px）に合わせて 22px＋字間2px にしている */
.tsunagaru__lead {
  position: relative;
  z-index: 1;
  margin-block-start: var(--space-sm);
  font-size: var(--font-size-lead-sm);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: var(--tsunagaru-lead-spacing);
  color: var(--color-pink);
}

.tsunagaru__body {
  position: relative;
  z-index: 1;
  margin-block-start: var(--space-md);
}

/* スマホではラベルを約1.35倍に拡大する（あそぶに合わせた）。
   素材は2倍解像度なので、この大きさでもぼやけない。 */
.tsunagaru__label {
  width: 180px;
  max-width: 100%;
  margin-inline: auto;
}

.tsunagaru__label--2 {
  margin-block-start: var(--space-md);
}

.tsunagaru__text {
  margin-block-start: var(--space-xs);
  font-size: var(--font-size-md);
  line-height: var(--tsunagaru-line-height);
}

.tsunagaru__photo {
  position: relative;
  z-index: 0;
  /* スマホでは、画面いっぱいに広げたときの80%の大きさにする（ユーザー指示） */
  width: calc(min(374px, 100%) * 0.8);
  margin-block-start: var(--space-md);
  margin-inline: auto;
}

.tsunagaru__logo {
  width: 221.5px;
  max-width: 100%;
  margin-block-start: var(--space-md);
  margin-inline: auto;
}

/* --- 800px以上：カンプどおりに配置 --- */

@media (min-width: 800px) {

  .tsunagaru {
    height: 463px;
    padding-inline: 0;
    padding-block: 0;
    /* カンプどおりの配置に戻すので、中央揃えは解除する */
    text-align: left;
  }

  .tsunagaru__deco--triangle { top: 23.5px; left: -5px;  width: 57.5px; }
  .tsunagaru__deco--chevron  { top: 41px;   left: 559px; right: auto; width: 179px; }

  .tsunagaru__title {
    position: absolute;
    top: 43.5px;
    left: 109px;
    width: 280.5px;
    margin-block-start: 0;
    margin-inline: 0;
  }

  .tsunagaru__lead {
    position: absolute;
    top: var(--tsunagaru-lead-top);
    left: var(--tsunagaru-lead-left);
    margin-block-start: 0;
    white-space: nowrap;
  }

  .tsunagaru__body {
    margin-block-start: 0;
  }

  .tsunagaru__label {
    position: absolute;
    width: 132.5px;
    margin-inline: 0;
  }

  .tsunagaru__label--1 { top: 159px;   left: 377px; }
  .tsunagaru__label--2 { top: 252.5px; left: 374px; width: 133px; margin-block-start: 0; }

  .tsunagaru__text {
    position: absolute;
    left: var(--tsunagaru-text-left);
    margin-block-start: 0;
    white-space: nowrap;
    /* カンプでは各段落の1行目だけ約5.5px右にずれている（実測）。
       中央揃えになるスマホでは意味がないので、ここでだけ効かせる。 */
    text-indent: var(--tsunagaru-indent);
  }

  .tsunagaru__text--1 { top: var(--tsunagaru-text1-top); }
  .tsunagaru__text--2 { top: var(--tsunagaru-text2-top); }

  .tsunagaru__photo {
    position: absolute;
    top: 125.5px;
    left: 68.5px;
    width: 374px;
    margin-block-start: 0;
    margin-inline: 0;
  }

  .tsunagaru__logo {
    position: absolute;
    top: 382px;
    left: 495.5px;
    width: 221.5px;
    margin-block-start: 0;
    margin-inline: 0;
  }

}

/* ==========================================================================
   06 そなえる
   イラストが下に大きく広がり、その上に文章が乗る構成。
     800px以上 … カンプどおりに絶対配置（実寸px）
     800px未満 … 見出し→サブ見出し→本文→イラスト の縦並び・中央揃え
   「家計の見直し相談室」のロゴは sonaeru_img.png に含まれている。
   ========================================================================== */

.sonaeru {
  /* カンプ実測から出した、このセクションだけの値。
     ink＝文字の見た目の上端。CSSの top はそれより少し上になるので、
     ブラウザで実測して補正した値を入れている。 */
  --sonaeru-line-height: 23px;     /* 本文の行送り（実測） */
  --sonaeru-lead-spacing: 2px;     /* サブ見出しの字間（実測） */
  --sonaeru-lead-top: 79.5px;
  --sonaeru-lead-left: 291.5px;
  --sonaeru-text-left: 236.5px;
  --sonaeru-text1-top: 149px;
  --sonaeru-text2-top: 240.5px;

  position: relative;
  width: 100%;
  max-width: var(--site-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: calc(var(--fit-width) * 60 / 800);
  text-align: center;
  /* 左にはみ出すオレンジのハッチを、カンプと同じくコンテナの端で切る */
  overflow: hidden;
}

/* --- 飾り --- */

.sonaeru__deco {
  position: absolute;
  z-index: 0;
  height: auto;
}

.sonaeru__deco--hatch-green {
  top: calc(var(--fit-width) * 102.5 / 800);
  /* 見出しの右へ大きく寄せる。画面からはみ出した分は
     .sonaeru の overflow: hidden で切られる */
  right: calc(var(--fit-width) * -40 / 800);
  width: calc(var(--fit-width) * 120 / 800);
}

.sonaeru__deco--hatch-orange {
  top: calc(var(--fit-width) * 132.5 / 800);
  left: calc(var(--fit-width) * -28.5 / 800);
  width: calc(var(--fit-width) * 131.5 / 800);
}

/* 水色の格子。スマホでは置き場所がないので隠す */
.sonaeru__deco--grid {
  display: none;
}

/* --- 中身（800px未満は縦並び・中央揃え） --- */

.sonaeru__title {
  position: relative;
  z-index: 1;
  /* スマホではカンプの245pxより10%小さくする（あそぶ・つながるに合わせた） */
  width: 220.5px;
  max-width: 100%;
  margin-inline: auto;
}

.sonaeru__title img,
.sonaeru__photo img,
.sonaeru__label img {
  width: 100%;
  height: auto;
}

/* サブ見出し。カンプ実測（インク幅331px）に合わせて 22px＋字間2px にしている */
.sonaeru__lead {
  position: relative;
  z-index: 1;
  margin-block-start: var(--space-sm);
  font-size: var(--font-size-lead-sm);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: var(--sonaeru-lead-spacing);
  color: var(--color-blue-lead);
}

.sonaeru__body {
  position: relative;
  z-index: 1;
  margin-block-start: var(--space-md);
}

/* スマホではラベルを約1.35倍に拡大する（あそぶ・つながるに合わせた）。
   素材は2倍解像度なので、この大きさでもぼやけない。 */
.sonaeru__label {
  width: 197px;
  max-width: 100%;
  margin-inline: auto;
}

.sonaeru__label--2 {
  width: 174px;
  margin-block-start: var(--space-md);
}

.sonaeru__text {
  margin-block-start: var(--space-xs);
  font-size: var(--font-size-base-md);
  line-height: var(--sonaeru-line-height);
}

.sonaeru__photo {
  position: relative;
  z-index: 0;
  /* スマホ用に切り出された sonaeru_img_sp.png を使うので、幅いっぱいに置く */
  width: 416.5px;
  max-width: 100%;
  margin-block-start: var(--space-md);
  margin-inline: auto;
}

/* --- 800px以上：カンプどおりに配置 --- */

@media (min-width: 800px) {

  .sonaeru {
    height: 526px;
    padding-inline: 0;
    padding-block: 0;
    /* カンプどおりの配置に戻すので、中央揃えは解除する */
    text-align: left;
  }

  .sonaeru__deco--hatch-green  { top: 102.5px; left: 644.5px; right: auto; width: 120px; }
  .sonaeru__deco--hatch-orange { top: 132.5px; left: -28.5px;              width: 131.5px; }

  .sonaeru__deco--grid {
    display: block;
    top: 190px;
    left: 622.5px;
    width: 51.5px;
  }

  .sonaeru__title {
    position: absolute;
    top: 26.5px;
    left: 81px;
    width: 245px;
    margin-inline: 0;
  }

  .sonaeru__lead {
    position: absolute;
    top: var(--sonaeru-lead-top);
    left: var(--sonaeru-lead-left);
    margin-block-start: 0;
    white-space: nowrap;
  }

  .sonaeru__body {
    margin-block-start: 0;
  }

  .sonaeru__label {
    position: absolute;
    margin-inline: 0;
  }

  .sonaeru__label--1 { top: 125.5px; left: 214px; width: 146px; }
  .sonaeru__label--2 { top: 218px;   left: 218px; width: 129px; margin-block-start: 0; }

  .sonaeru__text {
    position: absolute;
    left: var(--sonaeru-text-left);
    margin-block-start: 0;
    white-space: nowrap;
  }

  .sonaeru__text--1 { top: var(--sonaeru-text1-top); }
  .sonaeru__text--2 { top: var(--sonaeru-text2-top); }

  .sonaeru__photo {
    position: absolute;
    top: 205px;
    left: 57.5px;
    width: 620.5px;
    margin-block-start: 0;
    margin-inline: 0;
  }

}

/* ==========================================================================
   07 かなえる
   左にイラスト、右にラベル＋本文の2カラム。下端に「おうちの買い方相談室」ロゴ。
     800px以上 … カンプどおりに絶対配置（実寸px）
     800px未満 … 見出し→サブ見出し→ラベル＋本文×3→イラスト→ロゴ の縦並び・中央揃え
   ========================================================================== */

.kanaeru {
  /* カンプ実測から出した、このセクションだけの値。
     ink＝文字の見た目の上端。CSSの top はそれより少し上になるので、
     ブラウザで実測して補正した値を入れている。 */
  --kanaeru-line-height: 23px;     /* 本文の行送り（実測） */
  --kanaeru-lead-spacing: 2.5px;   /* サブ見出しの字間（実測） */
  --kanaeru-lead-top: 113.5px;
  --kanaeru-lead-left: 115px;
  --kanaeru-text-left: 391.5px;
  --kanaeru-text1-top: 143px;
  --kanaeru-text2-top: 235px;
  --kanaeru-text3-top: 328px;

  position: relative;
  width: 100%;
  max-width: var(--site-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: calc(var(--fit-width) * 60 / 800);
  text-align: center;
  /* 右にはみ出すオレンジのハッチを、カンプと同じくコンテナの端で切る */
  overflow: hidden;
}

/* --- 飾り --- */

/* オレンジの斜めハッチ。素材240pxのうち右6.5pxがカンプの外に出ている */
.kanaeru__deco--hatch {
  position: absolute;
  z-index: 0;
  top: calc(var(--fit-width) * 28 / 800);
  right: calc(var(--fit-width) * -6.5 / 800);
  width: calc(var(--fit-width) * 240 / 800);
  height: auto;
}

/* --- 中身（800px未満は縦並び・中央揃え） --- */

.kanaeru__title {
  position: relative;
  z-index: 1;
  /* スマホではカンプの287pxより20%小さくする（ユーザー指示） */
  width: 229.5px;
  max-width: 100%;
  margin-inline: auto;
  /* 右上のオレンジの斜めハッチとの間隔を空ける（ユーザー指示） */
  margin-block-start: var(--space-sm);
}

.kanaeru__title img,
.kanaeru__photo img,
.kanaeru__label img,
.kanaeru__logo img {
  width: 100%;
  height: auto;
}

/* サブ見出し。カンプ実測（インク幅229.5px）に合わせて 22px＋字間2.5px にしている */
.kanaeru__lead {
  position: relative;
  z-index: 1;
  margin-block-start: var(--space-sm);
  font-size: var(--font-size-lead-sm);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: var(--kanaeru-lead-spacing);
  color: var(--color-green-lead-deep);
}

.kanaeru__body {
  position: relative;
  z-index: 1;
  margin-block-start: var(--space-md);
}

/* スマホではラベルを約1.35倍に拡大する（あそぶ〜そなえるに合わせた）。
   素材は2倍解像度なので、この大きさでもぼやけない。 */
.kanaeru__label {
  max-width: 100%;
  margin-inline: auto;
}

.kanaeru__label--1 { width: 157px; }
.kanaeru__label--2 { width: 139px; margin-block-start: var(--space-md); }
.kanaeru__label--3 { width: 176px; margin-block-start: var(--space-md); }

.kanaeru__text {
  margin-block-start: var(--space-xs);
  font-size: var(--font-size-md-lg);
  line-height: var(--kanaeru-line-height);
}

.kanaeru__photo {
  position: relative;
  z-index: 0;
  /* sp版の素材がないので、カンプ幅の80%で中央に置く（つながると同じ扱い） */
  width: calc(min(312.5px, 100%) * 0.8);
  margin-block-start: var(--space-md);
  margin-inline: auto;
}

.kanaeru__logo {
  position: relative;
  z-index: 1;
  width: 219px;
  max-width: 100%;
  margin-block-start: var(--space-md);
  margin-inline: auto;
}

/* --- 800px以上：カンプどおりに配置 --- */

@media (min-width: 800px) {

  .kanaeru {
    height: 493px;
    padding-inline: 0;
    padding-block: 0;
    /* カンプどおりの配置に戻すので、中央揃えは解除する */
    text-align: left;
  }

  .kanaeru__deco--hatch {
    top: 28px;
    left: 566.5px;
    right: auto;
    width: 240px;
  }

  .kanaeru__title {
    position: absolute;
    top: 39.5px;
    left: 112.5px;
    width: 287px;
    margin-block-start: 0;
    margin-inline: 0;
  }

  .kanaeru__lead {
    position: absolute;
    top: var(--kanaeru-lead-top);
    left: var(--kanaeru-lead-left);
    margin-block-start: 0;
    white-space: nowrap;
  }

  .kanaeru__body {
    margin-block-start: 0;
  }

  .kanaeru__label {
    position: absolute;
    margin-inline: 0;
  }

  .kanaeru__label--1 { top: 119.5px; left: 374.5px; width: 116.5px; }
  .kanaeru__label--2 { top: 212px;   left: 373px;   width: 103px;   margin-block-start: 0; }
  .kanaeru__label--3 { top: 303px;   left: 375.5px; width: 130.5px; margin-block-start: 0; }

  .kanaeru__text {
    position: absolute;
    left: var(--kanaeru-text-left);
    margin-block-start: 0;
    white-space: nowrap;
  }

  .kanaeru__text--1 { top: var(--kanaeru-text1-top); }
  .kanaeru__text--2 { top: var(--kanaeru-text2-top); }
  .kanaeru__text--3 { top: var(--kanaeru-text3-top); }

  .kanaeru__photo {
    position: absolute;
    top: 154px;
    left: 78px;
    width: 312.5px;
    margin-block-start: 0;
    margin-inline: 0;
  }

  .kanaeru__logo {
    position: absolute;
    top: 435.5px;
    left: 491.5px;
    width: 219px;
    margin-block-start: 0;
    margin-inline: 0;
  }

}

/* ==========================================================================
   08 まなぶ
   かなえるとは左右が逆で、左にラベル＋本文、右にイラスト。
   イラストのオレンジの水彩が本文の背面まで伸びるので、本文を前面に置く。
     800px以上 … カンプどおりに絶対配置（実寸px）
     800px未満 … 見出し→サブ見出し→ラベル＋本文×2→イラスト→ロゴ の縦並び・中央揃え
   ========================================================================== */

.manabu {
  /* カンプ実測から出した、このセクションだけの値。
     ink＝文字の見た目の上端。CSSの top はそれより少し上になるので、
     ブラウザで実測して補正した値を入れている。 */
  --manabu-line-height: 29px;      /* 本文の行送り（実測） */
  --manabu-lead-spacing: 4px;      /* サブ見出しの字間（実測） */
  --manabu-lead-top: 103px;
  --manabu-lead-left: 73px;
  --manabu-text-left: 89.5px;
  --manabu-text1-top: 194px;
  --manabu-text2-top: 310px;
  --manabu-indent: 5.5px;          /* 2つ目の本文の1行目だけ右にずれている（実測） */

  position: relative;
  width: 100%;
  max-width: var(--site-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: calc(var(--fit-width) * 60 / 800);
  text-align: center;
  overflow: hidden;
}

/* --- 飾り --- */

/* オレンジの山形罫。カンプでは右端から89.5pxのところで終わる */
.manabu__deco--chevron {
  position: absolute;
  z-index: 0;
  top: calc(var(--fit-width) * 73 / 800);
  right: calc(var(--fit-width) * 89.5 / 800);
  width: calc(var(--fit-width) * 298.5 / 800);
  height: auto;
}

/* --- 中身（800px未満は縦並び・中央揃え） --- */

.manabu__title {
  position: relative;
  z-index: 1;
  /* スマホではカンプの226.5pxより20%小さくする（かなえるに合わせた） */
  width: 181px;
  max-width: 100%;
  margin-inline: auto;
  /* 右上の山形罫との間隔を空ける */
  margin-block-start: var(--space-md);
}

.manabu__title img,
.manabu__photo img,
.manabu__label img,
.manabu__logo img {
  width: 100%;
  height: auto;
}

/* サブ見出し。カンプ実測（インク幅295.5px）に合わせて 24px＋字間4px にしている */
.manabu__lead {
  position: relative;
  z-index: 1;
  margin-block-start: var(--space-sm);
  font-size: var(--font-size-lead-md);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: var(--manabu-lead-spacing);
  color: var(--color-orange-lead);
}

.manabu__body {
  position: relative;
  z-index: 1;
  margin-block-start: var(--space-md);
}

/* スマホではラベルを約1.35倍に拡大する（あそぶ〜かなえるに合わせた）。
   素材は2倍解像度なので、この大きさでもぼやけない。 */
.manabu__label {
  max-width: 100%;
  margin-inline: auto;
}

.manabu__label--1 { width: 256px; }
.manabu__label--2 { width: 226px; margin-block-start: var(--space-md); }

.manabu__text {
  margin-block-start: var(--space-xs);
  font-size: var(--font-size-lg-plus);
  line-height: var(--manabu-line-height);
}

.manabu__photo {
  position: relative;
  z-index: 0;
  /* sp版の素材がないので、カンプ幅の80%で中央に置く（つながる・かなえると同じ扱い） */
  width: calc(min(368px, 100%) * 0.8);
  margin-block-start: var(--space-md);
  margin-inline: auto;
}

.manabu__logo {
  position: relative;
  z-index: 1;
  width: 255.5px;
  max-width: 100%;
  margin-block-start: var(--space-md);
  margin-inline: auto;
}

/* --- 800px以上：カンプどおりに配置 --- */

@media (min-width: 800px) {

  .manabu {
    height: 478px;
    padding-inline: 0;
    padding-block: 0;
    /* カンプどおりの配置に戻すので、中央揃えは解除する */
    text-align: left;
  }

  .manabu__deco--chevron {
    top: 73px;
    left: 412px;
    right: auto;
    width: 298.5px;
  }

  .manabu__title {
    position: absolute;
    top: 16.5px;
    left: 90.5px;
    width: 226.5px;
    margin-block-start: 0;
    margin-inline: 0;
  }

  /* サブ見出しだけ見出し・本文より16px左に出ている。カンプどおり */
  .manabu__lead {
    position: absolute;
    top: var(--manabu-lead-top);
    left: var(--manabu-lead-left);
    margin-block-start: 0;
    white-space: nowrap;
  }

  .manabu__body {
    margin-block-start: 0;
  }

  .manabu__label {
    position: absolute;
    margin-inline: 0;
  }

  .manabu__label--1 { top: 167px; left: 75px;   width: 189.5px; }
  .manabu__label--2 { top: 282px; left: 75.5px; width: 167.5px; margin-block-start: 0; }

  .manabu__text {
    position: absolute;
    left: var(--manabu-text-left);
    margin-block-start: 0;
    white-space: nowrap;
  }

  .manabu__text--1 { top: var(--manabu-text1-top); }

  /* カンプでは2つ目の本文の1行目だけ約5.5px右にずれている（実測）。
     中央揃えになるスマホでは意味がないので、ここでだけ効かせる。 */
  .manabu__text--2 {
    top: var(--manabu-text2-top);
    text-indent: var(--manabu-indent);
  }

  .manabu__photo {
    position: absolute;
    top: 124px;
    left: 319.5px;
    width: 368px;
    margin-block-start: 0;
    margin-inline: 0;
  }

  .manabu__logo {
    position: absolute;
    top: 390.5px;
    left: 456px;
    width: 255.5px;
    margin-block-start: 0;
    margin-inline: 0;
  }

}

/* ==========================================================================
   10 お知らせ
   白地の見出しの下に、黄緑のベタ帯。帯の中は
     案内文2行 → イベント予約ボタン → 案内文2行 → Instagramの枠2つ。
   末尾のご利用案内ボタンは帯の下辺をまたいで、次のオレンジ帯の上まで出る。
     800px以上 … カンプどおりに絶対配置（実寸px）
     800px未満 … 見出し → 帯（案内文 → 予約ボタン → 案内文 → 枠2つ）
                  → ご利用案内ボタン の縦並び・中央揃え
   2026-10-09 に「今月開催予定のイベント」セクションを廃止し、
   そこにあった予約ボタンをこの帯の中（1つ目の案内文の下）へ移した。
   カンプではボタンの中心が412.25（ページ中心400より12px右）だが、
   ズレとみて中央（400）に揃えている。
   ========================================================================== */

.news {
  /* カンプ実測から出した、このセクションだけの値 */
  --news-line-height: 37px;       /* 案内文の行送り（実測） */
  --news-lead-top: 32.5px;        /* 帯の上端から案内文1行目まで。ブラウザで実測して補正 */
  --news-btn-spacing: 2px;        /* ボタンのラベルの字間（実測） */

  position: relative;
  width: 100%;
  max-width: var(--site-width);
  margin-inline: auto;
  /* スマホでは、前のセクション（まなぶ）との間隔をしっかり取る。
     カンプの27.5pxをそのまま比例縮小すると幅375pxで13pxしかなくなり、詰まって見える */
  padding-block-start: var(--space-lg);
  text-align: center;
}

/* --- 中身（800px未満は縦並び・中央揃え） --- */

.news__title {
  /* スマホではカンプの180pxより10%小さくする（右上に飾りはない） */
  width: 162px;
  max-width: 100%;
  margin-inline: auto;
}

.news__title img {
  width: 100%;
  height: auto;
}

/* 黄緑のベタ帯。スマホでも画面の端まで伸ばす */
.news__band {
  margin-block-start: var(--space-md);
  padding-block: var(--space-lg);
  padding-inline: var(--gutter);
  background-color: var(--color-green-olive);
  color: var(--color-white);
}

/* 案内文。カンプ実測のインク幅に合わせたサイズ。
   カンプの書体は Noto Sans JP より字面が大きいため、
   インクの高さは合わないが、幅を合わせる方針（第5章）に従っている */
.news__lead {
  /* スマホでは、いちばん長い行（16文字）が1行に収まる大きさを上限にする。
     カンプの26.5pxのままだと幅375pxで「中♪」だけが3行目に落ちてしまう。
     画面が800px以上あるときはカンプどおりの26.5pxになる */
  font-size: min(var(--font-size-xxl), calc((var(--fit-width) - var(--gutter) * 2) / 16.3));
  line-height: var(--news-line-height);
}

/* イベント予約ボタン（LINEへ）。2026-10-09 に廃止したイベントセクションから
   ここへ移した。上の案内文「毎月たくさんのイベントを開催中♪」と対になるので、
   上の余白は狭め（24px）、下の余白は広め（48px）にして、
   「案内文＋予約ボタン」「SNSの案内＋Instagram」の2かたまりに見えるようにしている。
   帯に左右24pxの余白が付いているので、ボタン側では引かなくてよい */
.news__reserve {
  display: block;
  width: min(399px, 100%);
  margin-block-start: var(--space-md);
  margin-inline: auto;
  transition: opacity 0.2s;
}

.news__reserve img {
  width: 100%;
  height: auto;
}

.news__reserve:hover {
  opacity: 0.8;
}

.news__sub {
  /* 上の予約ボタンとの間は広めに取り、ここから下（SNSの案内＋Instagram）が
     ひとかたまりに見えるようにする */
  margin-block-start: var(--space-lg);
  /* 同上。こちらはいちばん長い行が全角18文字＋半角3文字ぶん */
  font-size: min(var(--font-size-lg-md), calc((var(--fit-width) - var(--gutter) * 2) / 20.2));
  line-height: var(--news-line-height);
}

/* --- 公式Instagramへのリンク -------------------------------------------------
   2026-10-09 に SnapWidget の埋め込み（最新投稿2件）をやめ、
   リンク1本に置き換えた。埋め込んだ投稿をタップすると Instagram ではなく
   SnapWidget 側の広告ページへ飛んでしまうため。

   黄緑の帯の上に置くので、白地＋濃い文字の丸いボタンにする。
   形は下の「ご利用案内」ボタン（.news__btn）とそろえてある。
   -------------------------------------------------------------------------- */

.news__instagram {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  /* 上の案内文「SNSでイベントのお知らせ…」とひとかたまりに見せるため、
     あいだは狭め（24px）にする */
  margin-block-start: var(--space-md);
  margin-inline: auto;
  width: min(309px, 100%);
  height: 54.5px;
  border-radius: 22px;
  background-color: var(--color-white);
  color: var(--color-text);
  font-size: var(--font-size-btn);
  text-decoration: none;
  transition: opacity 0.2s;
}

/* 文字と同じ濃さの線で描いたInstagramのマーク（images/icon_instagram.svg）。
   色はSVGの中に直接書いてある。文字色を変えるときは両方そろえること */
.news__instagram-icon {
  width: 24px;
  height: 24px;
}

.news__instagram:hover {
  opacity: 0.8;
}

/* ボタン。単色＋白文字なので画像ではなくCSSで組んでいる */
.news__btn {
  /* 次のセクション（オレンジの帯）の上に重なるので、前面に出しておく。
     これが無いと、あとから描かれる帯にボタンの下半分が隠れる */
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(309px, calc(100% - var(--gutter) * 2));
  height: 54.5px;
  /* PCと同じく、黄緑帯の下辺をまたがせる。
     上に15px引き上げて黄緑帯に食い込ませ、下は39.5px詰めて
     次のオレンジ帯がボタンの下半分の背面に来るようにする */
  margin-block-start: -15px;
  margin-block-end: -39.5px;
  margin-inline: auto;
  border-radius: 22px;
  background-color: var(--color-teal);
  color: var(--color-white);
  font-size: var(--font-size-btn);
  letter-spacing: var(--news-btn-spacing);
  text-decoration: none;
  transition: opacity 0.2s;
}

.news__btn:hover {
  opacity: 0.8;
}

/* --- 800px以上：カンプどおりに配置 --- */

@media (min-width: 800px) {

  .news {
    /* カンプ（942.5px）から変わっている。経緯は handover 第7章の10。
       内訳: 帯の上端90 + 帯の高さ474 */
    height: 564px;
    padding-block-start: 0;
  }

  .news__title {
    position: absolute;
    top: 27.5px;
    left: 0;
    right: 0;
    width: 180px;
    margin-inline: auto;
  }

  .news__band {
    position: absolute;
    top: 90px;
    left: 0;
    width: 100%;
    /* 内訳: Instagramボタンの上端347.5 + ボタンの高さ54.5 + 下の余白72（カンプと同じ） */
    height: 474px;
    margin-block-start: 0;
    padding-block: 0;
    padding-inline: 0;
  }

  .news__lead {
    position: absolute;
    top: var(--news-lead-top);
    left: 0;
    right: 0;
  }

  /* 案内文1つ目の下端106.5 ＋ 余白24。幅はカンプの実寸に戻す */
  .news__reserve {
    position: absolute;
    top: 130.5px;
    left: 0;
    right: 0;
    width: 399px;
    margin-block-start: 0;
  }

  .news__sub {
    position: absolute;
    /* 案内文1つ目の下端（上端32.5 ＋ 行送り37×2行 ＝ 106.5）
       ＋ ボタンまでの余白24 ＋ ボタンの高さ71 ＋ ボタン下の余白48
       ＝ 249.5 */
    top: 249.5px;
    left: 0;
    right: 0;
    margin-block-start: 0;
  }

  .news__instagram {
    position: absolute;
    /* 案内文2つ目の下端（249.5 ＋ 行送り37×2行 ＝ 323.5）＋ 余白24 */
    top: 347.5px;
    left: 0;
    right: 0;
    margin-block-start: 0;
  }

  /* 帯の下辺をまたいで、次のオレンジ帯の上まで出る（カンプどおり） */
  .news__btn {
    position: absolute;
    /* セクションの下端(564)から15px 上。カンプと同じ重なり方 */
    top: 549px;
    left: 0;
    right: 0;
    width: 309px;
    margin-block-start: 0;
    margin-block-end: 0;
    margin-inline: auto;
  }

}

/* ==========================================================================
   11 ご利用案内の帯
   オレンジのベタ帯。左にキリン、右に利用時間・入場料・営業時間。
     800px以上 … カンプどおりに絶対配置（実寸px）
     800px未満 … ラベル＋値を1組ずつ中央に積む
   カンプに見出しの文字はないので、h2 は読み上げ用に隠してある。
   キリンは素材待ち。CSSだけ先に用意してある。
   ========================================================================== */

.info {
  /* カンプ実測から出した、このセクションだけの値 */
  --info-row1-top: 118.2px;      /* 1行目。カンプのインク上端119.5に合わせて補正した値 */
  --info-row2-top: 154.2px;      /* 同 155.5 */
  --info-row3-top: 199.7px;      /* 同 201 */
  --info-row4-top: 235.7px;      /* 同 237 */
  --info-note-top: 285.1px;      /* 同 291 */
  --info-fee-spacing: 7.25px;    /* 「入場料」の字間。4文字ラベルと幅をそろえるため */
  /* 中身全体の横ずれ。トップは 0。
     下層ページ（想い）ではカンプの位置が 12.5px 右にずれているので、
     そちらで 12.5px を入れて使い回す。 */
  --info-shift: 0px;

  position: relative;
  width: 100%;
  max-width: var(--site-width);
  margin-inline: auto;
  padding-block: var(--space-lg);
  padding-inline: var(--gutter);
  background-color: var(--color-orange-band);
  color: var(--color-white);
  text-align: center;
}

/* --- キリン（素材が届いたら効く） --- */

/* スマホでは本文と重なってしまうので、絶対配置をやめて本文の上に中央で置く */
.info__kirin {
  display: block;
  width: min(141px, 40%);
  height: auto;
  margin-inline: auto;
  margin-block-end: var(--space-sm);
}

/* --- 中身（800px未満はラベル＋値を1組ずつ中央に積む） --- */

.info__list {
  /* カンプの19.5pxのままだと幅375pxで行が折り返すので、
     いちばん長い行が1行に収まる大きさを上限にする（お知らせと同じ考え方）。
     画面が800px以上あるときはカンプどおりの19.5pxになる */
  font-size: min(var(--font-size-lg-plus2), calc((var(--fit-width) - var(--gutter) * 2) / 19.6));
  line-height: 1.7;
}

.info__pair {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 1em;
  margin-block-start: var(--space-sm);
}

.info__pair--play {
  margin-block-start: 0;
}

/* 土日祝の行は、必ず自分だけで1行にする */
.info__value--play2 {
  flex-basis: 100%;
}

.info__note {
  margin-block-start: var(--space-md);
  font-size: var(--font-size-base-md);
  line-height: 1.7;
}

/* --- 800px以上：カンプどおりに配置 --- */

@media (min-width: 800px) {

  .info {
    height: 350.5px;
    padding-block: 0;
    padding-inline: 0;
    /* カンプどおりの配置に戻すので、中央揃えは解除する */
    text-align: left;
  }

  /* 素材の透明余白（左11.5 / 上16.5）を引いた値。
     これで絵の左上がカンプの 左26 / 上37 に来る */
  .info__kirin {
    position: absolute;
    top: 20.5px;
    left: calc(14.5px + var(--info-shift));
    width: 141px;
    margin-inline: 0;
    margin-block-end: 0;
  }

  .info__list {
    font-size: var(--font-size-lg-plus2);
    line-height: 1;
  }

  .info__pair,
  .info__pair--play {
    display: block;
    margin-block-start: 0;
  }

  /* ラベルと値をカンプの座標にひとつずつ置く。
     ラベル列は x152 でそろい、値は行によって x252.5 / x311.5 と違う */
  .info__label,
  .info__value {
    position: absolute;
    white-space: nowrap;
  }

  .info__label--play  { top: var(--info-row1-top); left: calc(152.5px + var(--info-shift)); }
  .info__value--play1 { top: var(--info-row1-top); left: calc(311.5px + var(--info-shift)); }
  .info__value--play2 { top: var(--info-row2-top); left: calc(313px   + var(--info-shift)); }

  /* 「入場料」だけ字間を開けて、「対象年齢」「営業時間」と幅をそろえている（カンプどおり） */
  .info__label--fee {
    top: var(--info-row3-top);
    left: calc(152px + var(--info-shift));
    letter-spacing: var(--info-fee-spacing);
  }

  .info__value--fee   { top: var(--info-row3-top); left: calc(252.5px + var(--info-shift)); }
  .info__label--age   { top: var(--info-row3-top); left: calc(352.5px + var(--info-shift)); }
  .info__value--age   { top: var(--info-row3-top); left: calc(453px   + var(--info-shift)); }

  .info__label--hours { top: var(--info-row4-top); left: calc(152px   + var(--info-shift)); }
  .info__value--hours { top: var(--info-row4-top); left: calc(252.5px + var(--info-shift)); }

  .info__note {
    position: absolute;
    top: var(--info-note-top);
    left: 0;
    right: 0;
    margin-block-start: 0;
    text-align: center;
    white-space: nowrap;
  }

}

/* ==========================================================================
   12 施設概要
   白地のセクション。左に住所・電話、右にロゴとQRコード、右下にキリン。
     800px以上 … カンプどおりに絶対配置（実寸px）
     800px未満 … 見出し → 住所・電話 → QR → キリン の順に中央へ縦積み
   見出し（リボン＋店名＋下線）とロゴ＋QRは、それぞれ1枚の画像で届いている。
   キリンはカンプでは下のオレンジのセクションにまたがるので、PCでは
   はみ出させたまま置く。下のセクションの背景に塗りつぶされないよう
   セクションごと z-index を上げている（お知らせのボタンで踏んだのと同じ話）。
   ========================================================================== */

.facility {
  /* カンプ実測から出した、このセクションだけの値 */
  --facility-title-top: 35px;        /* 見出し画像（リボンの左上） */
  --facility-title-left: 123.5px;
  --facility-qr-top: 40px;           /* ロゴ＋公式ホームページ＋QRの画像 */
  --facility-qr-left: 583.5px;
  --facility-icon-left: 128px;       /* ピン・受話器のアイコン列 */
  --facility-pin-top: 109.5px;
  --facility-tel-icon-top: 174.5px;
  --facility-text-left: 152.5px;     /* 文字列の左端 */
  --facility-address-top: 100.5px;   /* 1行目。カンプのインク上端108.5に合わせて補正した値 */
  --facility-tel-top: 164.5px;       /* 同 174.5（数字だけの行なので補正量が違う） */
  --facility-line-height: 32px;      /* 住所2行の行送り（カンプ実測） */
  --facility-icon-gap: 9px;          /* アイコンと文字のあいだ（カンプ実測） */
  --facility-kirin-top: 156px;
  --facility-kirin-left: 670px;

  position: relative;
  /* キリンが下のオレンジのセクションにまたがるため、
     あとから描かれる背景に隠されないよう重ね順を上げる */
  z-index: 1;
  width: 100%;
  max-width: var(--site-width);
  margin-inline: auto;
  padding-block: var(--space-lg);
  padding-inline: var(--gutter);
  background-color: var(--color-white);
  color: var(--color-text);
  text-align: center;
}

/* --- 見出し --- */

/* スマホでは共通ルールどおりカンプの10%小さく。
   画面が狭いときは画面幅に収める */
.facility__title img {
  width: min(405.5px, 100%);
  height: auto;
}

/* --- 住所・電話 --- */

.facility__data {
  /* カンプの19.25pxのままだと、住所の2行目が幅375pxで折り返して
     「階」だけが3行目に落ちるので、1行に収まる大きさを上限にする
     （お知らせ・ご利用案内の帯と同じ考え方）。
     引いている25pxはアイコンの幅16pxとアイコンと文字のすき間9px。
     画面が800px以上あるときはカンプどおりの19.25pxになる */
  margin-block-start: var(--space-md);
  font-size: min(var(--font-size-lg-md2),
                 calc((var(--fit-width) - var(--gutter) * 2 - 25px) / 17.3));
  line-height: 1.7;
}

/* アイコンと文字を1組にして、組ごと中央に置く。
   文字は左そろえのままにして、折り返しても頭がそろうようにする */
.facility__address,
.facility__tel {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--facility-icon-gap);
  text-align: left;
}

.facility__tel {
  margin-block-start: var(--space-xs);
}

/* アイコンは縮めない。1行目の文字の高さに合わせて少し下げる */
.facility__icon {
  flex: none;
  margin-block-start: 0.35em;
}

.facility__tel-link {
  color: inherit;
  text-decoration: none;
}

/* --- ロゴ＋QRコード --- */

/* スマホではQRを出さない（ユーザー指示）。
   見ている端末でQRを読み取ることはできないため。
   ロゴと「公式ホームページ」も同じ1枚の画像なので一緒に隠れる */
.facility__qr {
  display: none;
  margin-block-start: var(--space-md);
}

.facility__qr img {
  width: 134px;
  height: auto;
  margin-inline: auto;
}

/* --- キリン --- */

/* スマホでは絶対配置をやめ、電話番号の下に中央で置く（QRは隠している）。
   素材は上から24%（=幅の0.425倍）が透明なので、その分をマイナスマージンで
   引き上げて、電話番号とのすき間が見た目で48pxになるようにしている */
.facility__kirin {
  display: block;
  width: min(123.5px, 33%);
  height: auto;
  margin-inline: auto;
  margin-block-start: calc(var(--space-lg) - min(123.5px, 33%) * 0.425);
}

/* --- 800px以上：カンプどおりに配置 --- */

@media (min-width: 800px) {

  .facility {
    height: 255px;
    padding-block: 0;
    padding-inline: 0;
    /* カンプどおりの配置に戻すので、中央揃えは解除する */
    text-align: left;
  }

  .facility__title {
    position: absolute;
    top: var(--facility-title-top);
    left: var(--facility-title-left);
  }

  .facility__title img {
    width: 450.5px;
  }

  .facility__data {
    margin-block-start: 0;
    font-size: var(--font-size-lg-md2);
    line-height: var(--facility-line-height);
  }

  /* アイコンも文字も、セクションを基準にカンプの座標へ直接置く。
     dd 自体を絶対配置にすると、中のアイコンが dd を基準にしてしまうので、
     dd は素のまま（高さ0）にして中身だけを置く */
  .facility__address,
  .facility__tel {
    display: block;
    margin-block-start: 0;
  }

  .facility__address-text,
  .facility__tel-link {
    position: absolute;
    left: var(--facility-text-left);
    white-space: nowrap;
  }

  .facility__address-text {
    top: var(--facility-address-top);
  }

  .facility__tel-link {
    top: var(--facility-tel-top);
  }

  /* アイコンは文字とは別に、カンプの座標へ直接置く */
  .facility__icon {
    position: absolute;
    left: var(--facility-icon-left);
    margin-block-start: 0;
  }

  .facility__icon--pin {
    top: var(--facility-pin-top);
  }

  .facility__icon--tel {
    top: var(--facility-tel-icon-top);
  }

  .facility__qr {
    display: block;
    position: absolute;
    top: var(--facility-qr-top);
    left: var(--facility-qr-left);
    margin-block-start: 0;
  }

  .facility__qr img {
    width: 134px;
    margin-inline: 0;
  }

  /* セクションの下端（255px）を超えて、下のオレンジのセクションにまたがる */
  .facility__kirin {
    position: absolute;
    top: var(--facility-kirin-top);
    left: var(--facility-kirin-left);
    width: 123.5px;
    margin-inline: 0;
    margin-block-start: 0;
  }

}

/* ==========================================================================
   13 GOENの紹介
   オレンジの水彩テクスチャの上に、白文字の見出しと本文6行。
     800px以上 … カンプどおりに絶対配置（実寸px）
     800px未満 … 素の流れのまま中央ぞろえ。本文はカンプの改行を捨てて流す
   背景は 200×200 のタイル（`goen_bg.png`）の繰り返し。
   カンプではこのテクスチャがフッターの最下部まで続いているので、
   **このセクションの下端をタイルの境目にそろえて**（`background-position: left bottom`）
   フッター側と模様が連続するようにしてある。
   800px以上ではカンプと同じ位相にしたいので `left top` に戻し、
   高さ445.5px（＝タイル2枚＋45.5px）ぶんだけフッター側でずらす。
   ========================================================================== */

.goen {
  /* カンプ実測から出した、このセクションだけの値 */
  --goen-title-top: 124.75px;    /* 見出し。カンプのインク上端127.5に合わせて補正した値 */
  --goen-text-top: 161.5px;      /* 本文1行目。同 170.5 */
  --goen-line-height: 33.5px;    /* 本文の行送り（カンプ実測・等間隔） */

  position: relative;
  width: 100%;
  max-width: var(--site-width);
  margin-inline: auto;
  padding-block: var(--space-lg);
  padding-inline: var(--gutter);
  /* 画像が読み込まれる前も白文字が読めるように、下に水彩と同系の色を置く */
  background-color: var(--color-orange);
  background-image: url("../images/goen_bg.png");
  background-repeat: repeat;
  background-size: 200px 200px;
  background-position: left bottom;
  color: var(--color-white);
  text-align: center;
}

/* --- 見出し --- */

.goen__title {
  /* 2行に折り返したときの1行目「＼パパママの「生の声」が、」が
     1行に収まる大きさを上限にする。375pxではカンプの29.5pxのまま、
     320pxで25.7pxまで小さくなる */
  font-size: min(var(--font-size-xxl-plus),
                 calc((var(--fit-width) - var(--gutter) * 2) / 11.2));
  font-weight: 500;
  line-height: 1.5;
}

/* --- 本文 --- */

.goen__text {
  margin-block-start: var(--space-md);
  font-size: var(--font-size-goen-text);
  font-weight: 500;
  line-height: 1.76;
}

/* --- 800px以上：カンプどおりに配置 --- */

@media (min-width: 800px) {

  .goen {
    height: 445.5px;
    padding-block: 0;
    padding-inline: 0;
    /* カンプと同じ位相（テクスチャはこのセクションの上端から始まる） */
    background-position: left top;
  }

  .goen__title {
    position: absolute;
    top: var(--goen-title-top);
    left: 0;
    right: 0;
    line-height: 1;
  }

  .goen__text {
    position: absolute;
    top: var(--goen-text-top);
    left: 0;
    right: 0;
    margin-block-start: 0;
    line-height: var(--goen-line-height);
  }

}

/* ==========================================================================
   14 フッター
   オレンジの水彩テクスチャの上に、白いカード（カンプ 682.5×813）。
   中身は 運営会社（リボン・社名・2つのオフィス・GOENロゴ・QR）と
   運営事業（リボン・事業ロゴ5点・関連法人）。
     800px以上 … カンプどおりにカード内で絶対配置（実寸px）
     800px未満 … 素の流れのまま中央ぞろえで縦積み
   背景はGOENの紹介と同じタイル。模様が途切れないよう、
   800px以上ではGOENの紹介の高さ445.5px ぶん（タイル2枚＋45.5px）だけ位相をずらす。
   800px未満はGOEN側が下端をタイルの境目にそろえてあるので left top でつながる。
   事業ロゴは「ロゴ＋検索窓＋矢印」が1枚の画像になっている（CSSで枠を組む必要はない）。
   ========================================================================== */

.site-footer {
  /* カード内の配置（カンプのカード左上 x62 / y6018 からの相対値） */
  --footer-ribbon-left: 69.5px;
  --footer-company-top: 83.6px;        /* 「GOEN株式会社」インク上端90.5に合わせて補正 */
  --footer-oita-top: 120.1px;          /* 「Oita Office」インク上端122 */
  --footer-tokyo-top: 253.6px;         /* 「Tokyo Office」インク上端255.5 */
  --footer-addr1-top: 144.6px;         /* 大分「〒870-0951」インク上端153 */
  --footer-addr-line: 30.5px;          /* 住所の行送り（インク上端の差は28.5） */
  --footer-addr2-top: 281.6px;         /* 東京「〒105-7508…」インク上端287 */
  --footer-tel1-top: 207.6px;          /* 大分の電話 インク上端215 */
  --footer-tel2-top: 315.6px;          /* 東京の電話 インク上端323 */
  --footer-text-left: 72px;            /* 大分の電話の左端 */
  --footer-zip-left: 73px;             /* 住所（〒で始まる行）の左端 */
  --footer-tel2-left: 74.5px;          /* 東京の電話の左端 */
  --footer-icon-left: 44px;            /* ピン・受話器の列 */
  --footer-related-title-top: 673.6px; /* 「関連法人」インク上端674.5 */
  --footer-related-top: 711.6px;       /* 関連法人1行目 インク上端715 */

  position: relative;
  width: 100%;
  max-width: var(--site-width);
  margin-inline: auto;
  padding-block-end: var(--space-lg);
  background-color: var(--color-orange);
  background-image: url("../images/goen_bg.png");
  background-repeat: repeat;
  background-size: 200px 200px;
  /* GOENの紹介が下端をタイルの境目にそろえているので、ここは上端から敷けば連続する */
  background-position: left top;
  color: var(--color-text);
}

/* --- 白いカード --- */

.footer__card {
  position: relative;
  margin-inline: var(--gutter);
  padding-block: var(--space-lg);
  padding-inline: var(--gutter);
  background-color: var(--color-white);
  text-align: center;
}

/* --- 運営会社・運営事業のリボン --- */

.footer__ribbon img {
  width: 212.5px;
  height: auto;
  margin-inline: auto;
}

.footer__ribbon--business {
  margin-block-start: var(--space-xl);
}

.footer__company {
  margin-block-start: var(--space-sm);
  font-size: var(--font-size-footer-company);
  font-weight: 500;
  letter-spacing: 4.5px;
  /* 字間は最後の文字の右にも付くので、その分を戻して中央に見せる */
  text-indent: 4.5px;
  color: var(--color-orange-lead);
}

/* --- オフィス --- */

.footer__office {
  margin-block-start: var(--space-md);
}

.footer__office-name {
  /* カンプの書体は不明。端末のセリフ体で代用している */
  font-family: "Times New Roman", "Noto Serif JP", serif;
  font-size: var(--font-size-footer-office);
  color: var(--color-office);
}

/* 名前の下の細い罫 */
.footer__office-name::after {
  content: "";
  display: block;
  width: 84px;
  height: 1px;
  margin: 6.5px auto 0;
  background-color: var(--color-office-rule);
}

.footer__office-address,
.footer__office-tel {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 9px;
  margin-block-start: var(--space-xs);
  font-size: var(--font-size-footer-address);
  line-height: 1.5;
  text-align: left;
}

.footer__icon {
  flex: none;
  margin-block-start: 0.3em;
}

.footer__tel-link {
  color: inherit;
  text-decoration: none;
}

/* --- GOENのロゴとQR --- */

.footer__goen-logo {
  margin-block-start: var(--space-lg);
}

.footer__goen-logo img {
  width: 178px;
  height: auto;
  margin-inline: auto;
}

.footer__goen-qr {
  margin-block-start: var(--space-sm);
}

.footer__goen-qr img {
  width: 171px;
  height: auto;
  margin-inline: auto;
}

/* --- 事業ロゴ --- */

.footer__business-list {
  margin-block-start: var(--space-md);
}

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

.footer__business img {
  width: min(245px, 100%);
  height: auto;
  margin-inline: auto;
}

.footer__business--hoikuen img {
  width: min(244.5px, 100%);
}

.footer__business--kids img {
  width: min(249px, 100%);
}

/* --- 関連法人 --- */

.footer__related {
  margin-block-start: var(--space-lg);
}

.footer__related-title {
  font-size: var(--font-size-footer-related-title);
  font-weight: 500;
  letter-spacing: 3px;
  text-indent: 3px;
  color: var(--color-related);
}

.footer__related-title::after {
  content: "";
  display: block;
  width: 129.5px;
  height: 2.5px;
  margin: 5px auto 0;
  background-color: var(--color-related-rule);
}

.footer__related-list {
  margin-block-start: var(--space-xs);
  font-size: var(--font-size-footer-related);
  line-height: 1.45;
}

.footer__related-small {
  font-size: var(--font-size-footer-related-small);
}

/* かっこ書きの行。カンプはこの行だけ字間が広い（かっこ・中黒・長音が詰まっていない）。
   同じ文字サイズのまま字間で幅を合わせている */
.footer__related-note {
  letter-spacing: 1px;
}

/* --- プライバシーポリシーへのリンク ------------------------------------------
   2026-10-10 追加。GOEN株式会社のサイトにあるページへ別タブで飛ばす。

   白いカードの**外**（オレンジのテクスチャの上）に置いている。
   カードの中は800px以上でカンプどおりの絶対配置になっていて、
   あとから1行足せる隙間が無いため。

   そのぶんフッターが約40px 背が高くなる。カンプには無い要素なので、
   どこに置いても多少は伸びる。下の余白（PCは114px）の中に収めると
   数字を2か所で合わせ続けることになるので、素直に積んでいる。

   文字色は本文と同じ濃いグレー。オレンジの上で白文字にすると薄くて読めない。
   リンクだと分かるように下線を引く（このサイトの `a` は既定で下線なし）。
   -------------------------------------------------------------------------- */

.footer__privacy {
  margin-block-start: var(--space-md);
  font-size: var(--font-size-footer-related);
  text-align: center;
}

.footer__privacy-link {
  color: var(--color-text);
  text-decoration: underline;
  /* 下線を文字から少し離す。日本語は下にはみ出す字が少ないので近すぎて見える */
  text-underline-offset: 3px;
  transition: opacity 0.2s;
}

.footer__privacy-link:hover {
  opacity: 0.7;
}

/* --- 800px以上：カンプどおりに配置 --- */

@media (min-width: 800px) {

  .site-footer {
    padding-block-end: 114px;
    /* GOENの紹介（高さ445.5px＝タイル2枚＋45.5px）から模様を続ける */
    background-position: left -45.5px;
  }

  .footer__card {
    width: 682.5px;
    height: 813px;
    margin-inline: 62px 55.5px;
    padding: 0;
    /* カンプどおりの配置に戻すので、中央ぞろえは解除する */
    text-align: left;
  }

  .footer__card img {
    margin-inline: 0;
  }

  /* リボン2つ */
  .footer__ribbon {
    position: absolute;
    left: var(--footer-ribbon-left);
  }

  .footer__ribbon--company  { top: 27.5px; }
  .footer__ribbon--business { top: 380.5px; margin-block-start: 0; }

  /* 社名。リボンと同じ軸で中央ぞろえ（カンプ実測 約239＝カード内177） */
  .footer__company {
    position: absolute;
    top: var(--footer-company-top);
    /* カンプの社名の中心は、リボンの中心より2.5px右にある */
    left: calc(var(--footer-ribbon-left) + 2.5px);
    width: 212.5px;
    margin-block-start: 0;
    text-align: center;
  }

  /* オフィス2つ。文字とアイコンをカンプの座標にひとつずつ置く */
  .footer__office {
    margin-block-start: 0;
  }

  .footer__office-name {
    position: absolute;
    left: 45.5px;
    line-height: 1;
  }

  .footer__office--oita  .footer__office-name { top: var(--footer-oita-top); }
  .footer__office--tokyo .footer__office-name { top: var(--footer-tokyo-top); }

  .footer__office-name::after {
    position: absolute;
    left: -3.5px;
    margin: 0;
  }

  .footer__office--oita  .footer__office-name::after { top: 21.9px; width: 84px; }
  .footer__office--tokyo .footer__office-name::after { top: 23.4px; width: 87.5px; }

  .footer__office-address,
  .footer__office-tel {
    display: block;
    margin-block-start: 0;
    white-space: nowrap;
  }

  /* 住所・電話の文字。行送りは28.5px（カンプ実測） */
  .footer__office-address > span,
  .footer__office-tel > span {
    position: absolute;
    left: var(--footer-zip-left);
    line-height: var(--footer-addr-line);
  }

  .footer__office--oita  .footer__office-address > span { top: var(--footer-addr1-top); }
  .footer__office--tokyo .footer__office-address > span { top: var(--footer-addr2-top); }
  .footer__office--oita  .footer__office-tel > span     { top: var(--footer-tel1-top); left: var(--footer-text-left); }
  .footer__office--tokyo .footer__office-tel > span     { top: var(--footer-tel2-top); left: var(--footer-tel2-left); }

  .footer__icon {
    position: absolute;
    left: var(--footer-icon-left);
    margin-block-start: 0;
  }

  .footer__office--oita  .footer__icon--pin { top: 149px;   left: 45.5px; }
  .footer__office--oita  .footer__icon--tel { top: 209.5px; }
  .footer__office--tokyo .footer__icon--pin { top: 285px;   left: 44.5px; }
  .footer__office--tokyo .footer__icon--tel { top: 323px;   left: 43px; }

  /* GOENのロゴとQR */
  .footer__goen-logo {
    position: absolute;
    top: 40.5px;
    left: 476px;
    margin-block-start: 0;
  }

  .footer__goen-qr {
    position: absolute;
    top: 162.5px;
    left: 479.5px;
    margin-block-start: 0;
  }

  /* 事業ロゴ5点 */
  .footer__business-list {
    margin-block-start: 0;
  }

  .footer__business {
    position: absolute;
  }

  .footer__business + .footer__business {
    margin-block-start: 0;
  }

  .footer__business--ouchi   { top: 475.5px; left: 74.5px; }
  .footer__business--kakei   { top: 465.5px; left: 338px; }
  .footer__business--gfp     { top: 580px;   left: 74.5px; }
  .footer__business--hoikuen { top: 554.5px; left: 337.5px; }
  .footer__business--kids    { top: 676.5px; left: 74.5px; }

  /* width: auto にすると素材の実寸（@2xなので2倍）で出てしまうため、
     表示サイズを明示する */
  .footer__business img {
    width: 245px;
  }

  .footer__business--hoikuen img {
    width: 244.5px;
  }

  .footer__business--kids img {
    width: 249px;
  }

  /* 関連法人 */
  .footer__related {
    margin-block-start: 0;
  }

  .footer__related-title {
    position: absolute;
    top: var(--footer-related-title-top);
    left: 353px;
    line-height: 1;
  }

  .footer__related-title::after {
    position: absolute;
    top: 20.5px;
    left: -4px;
    margin: 0;
  }

  .footer__related-note {
    position: relative;
    top: -2px;
    margin-inline-start: 12px;
  }

  .footer__related-list {
    position: absolute;
    top: var(--footer-related-top);
    left: 338px;
    margin-block-start: 0;
    line-height: 19.75px;
    white-space: nowrap;
  }

}

/* ==========================================================================
   15 ごえんファミリーパークの想い（下層ページ / omoi.html）

   カンプ: design/GFP_website_3@2x.png（1601×6017 ＝ 実寸 800×3008.5）
   このページは上から
     ヘッダー（149）→ 想い（917）→ ご利用案内（332.5）→ 施設概要（242.5）
     → GOENの紹介（445.5）→ フッター
   のうち、ご利用案内から下はトップページと同じ部品を使い回している。

   カンプ（横800px）での実測値。すべてセクション上端（＝ヘッダー下149px）からの相対値。
     見出し画像 omoi_title      左61.5  上98.5   392×81.5
     斜線飾り   omoi_bg01       左222.5 上168.5  217.5×39.5
     写真1      omoi_img01      左345.5 上116.5  455×425.5（右端でカンプの端に接する）
     橙の丸     omoi_bg02       左-10   上289    64×59（左端で切れる）
     本文A 1行目（インク）      左70    上254.5  行送り33.75 / 段落間は2行ぶん
     橙の四角   omoi_bg03       左298.5 上529.5  52×54.5
     緑のギザギザ omoi_bg04     左433.5 上550    87×20
     黄緑の三角 omoi_bg05       左690   上544    57.5×61.5
     写真2      omoi_img02      左-7.5  上552.5  380.5×246.5（左端で切れる）
     黄色の飾り omoi_bg06       左5     上747.5  136.5×177.5
     積み木     omoi_bg07       左187.5 上782.5  167.5×112
     本文B 1行目（インク）      左408   上613    行送り29.75 / 段落間は2行ぶん

     800px以上 … カンプどおりに絶対配置（実寸px）
     800px未満 … 見出し → 写真1 → 本文A → 写真2 → 本文B の縦並び・中央揃え
   ========================================================================== */

.omoi {
  /* カンプ実測から出した、このセクションだけの値。
     ink＝文字の見た目の上端。CSSの top はそれより少し上になるので、
     ブラウザで実測して補正した値を入れている。 */
  --omoi-text1-top: 244px;        /* 本文A。カンプのインク上端254.5に合わせて補正した値 */
  --omoi-text1-left: 70px;
  --omoi-text1-line: 33.75px;     /* 本文Aの行送り（カンプ実測・等間隔） */
  --omoi-text2-top: 605.4px;      /* 本文B。同 613 */
  --omoi-text2-left: 408px;
  --omoi-text2-line: 29.75px;     /* 本文Bの行送り（カンプ実測・等間隔） */
  /* スマホでの飾りの縮小率（カンプ比）。800px以上では使わない */
  --omoi-deco-scale: 0.45;

  position: relative;
  /* 本文Bの最後の段落は、このセクションの下端（1066px）を70pxほど超えて
     次のセクションにはみ出す。あとから描かれる .info の白い背景に
     塗りつぶされないよう、重ね順を上げておく（施設概要のキリンと同じ話） */
  z-index: 1;
  width: 100%;
  max-width: var(--site-width);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: calc(var(--fit-width) * 48 / 800);
  text-align: center;
}

/* --- 飾り（800px未満は流れの中に置く） --- */

/* スマホではカンプの座標が使えない（中身が縦に積まれて別の並びになるため）。
   絶対配置をやめ、HTMLの並び順のまま流し込む。
   大きさはカンプの10%減（見出し・写真と同じ共通ルール） */
.omoi__deco {
  display: block;
  z-index: 0;
  height: auto;
  margin-inline: auto;
}

/* 見出しの斜線は見出しとセットなので、見出しと同じ10%減にする */
.omoi__deco--scribble { width: 195.75px; margin-block-start: var(--space-xs); }

/* ばらばらに置く飾りは、スマホではカンプの45%まで小さくする（ユーザー指示）。
   倍率を変えたいときは --omoi-deco-scale だけ直せばよい */
.omoi__deco--square   { width: calc(52px   * var(--omoi-deco-scale)); }
.omoi__deco--zigzag   { width: calc(87px   * var(--omoi-deco-scale)); }
.omoi__deco--triangle { width: calc(57.5px * var(--omoi-deco-scale)); }
.omoi__deco--blocks   { width: calc(167.5px * var(--omoi-deco-scale)); }

/* 黄色の弧だけは写真の「上」に乗る。
   カンプを拡大すると、かすれた筆あとのすき間から写真の床が見えている。
   ほかの飾りは写真と重ならないので `z-index: 0` のままでよい */
.omoi__deco--ring {
  width: calc(136.5px * var(--omoi-deco-scale));
  z-index: 2;
  /* 素材の上端15px（幅の11%）が透明。そのぶん引き上げて、
     写真2との見た目のすき間を詰める */
  margin-block-start: calc(136.5px * var(--omoi-deco-scale) * -0.11);
}

/* 橙の丸はカンプでは左端で切れているので、スマホでも左端に寄せる。
   写真1の下端には素材自体の透明な余白（幅の3.8%）があるので、
   ここでは上の余白を足さない */
.omoi__deco--dot {
  width: calc(64px * var(--omoi-deco-scale));
  margin-block-start: 0;
  margin-inline: calc(var(--gutter) * -1) auto;
}

/* 横一列に並べる飾り。狭い画面では自然に縮む */
.omoi__deco-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-md);
  margin-block-start: var(--space-xs);
}

/* 黄色の弧の行は、弧を画面の左端にくっつける（ユーザー指示）。
   セクションの左の余白ぶん外に出し、積み木を右端に振り分ける */
.omoi__deco-row--2 {
  justify-content: space-between;
  width: calc(100% + var(--gutter));
  margin-inline-start: calc(var(--gutter) * -1);
}

.omoi__deco-row .omoi__deco {
  margin-inline: 0;
  flex-shrink: 1;
  min-width: 0;
}

/* --- 中身（800px未満は縦並び・中央揃え） --- */

.omoi__title,
.omoi__photo {
  position: relative;
  z-index: 1;
  margin-inline: auto;
}

.omoi__title img,
.omoi__photo img {
  width: 100%;
  height: auto;
}

/* スマホでは共通ルールどおりカンプの10%小さく */
.omoi__title {
  width: 352.75px;
  max-width: 100%;
}

/* カンプでは写真1が右端、写真2が左端で切れている。
   スマホでも同じ側を画面の端まで伸ばす（セクションの左右の余白を打ち消す） */
.omoi__photo {
  width: calc(100% + var(--gutter));
  /* 写真の上下にも素材の透明な余白があるので、ここは詰めておく
     （写真1は上4.7% / 下3.8%、写真2は下1.2%） */
  margin-block-start: var(--space-xs);
}

.omoi__photo--1 {
  margin-inline: 0 calc(var(--gutter) * -1);
}

.omoi__photo--2 {
  margin-inline: calc(var(--gutter) * -1) 0;
}

.omoi__body {
  position: relative;
  z-index: 1;
  margin-block-start: var(--space-md);
}

/* カンプの実測は13.25pxだが、狭い画面ではサイト共通の下限（13.5px）まで戻す。
   800px以上ではカンプどおりの13.25pxになる（下の @media 参照） */
.omoi__text {
  font-size: var(--font-size-base);
  line-height: 1.9;
}

.omoi__text + .omoi__text {
  margin-block-start: 1.9em;
}

/* 本文中で橙に色を変えている部分 */
.omoi__accent {
  color: var(--color-orange);
}

/* --- 800px以上：カンプどおりに配置 --- */

@media (min-width: 800px) {

  .omoi {
    /* ヘッダー下端149 から ご利用案内の上端1066 まで */
    height: 917px;
    padding-inline: 0;
    padding-block: 0;
    /* カンプどおりの配置に戻すので、中央揃えは解除する */
    text-align: left;
    /* 左右にはみ出す写真と飾りを、カンプと同じくコンテナの端で切る。
       overflow:hidden だと下にはみ出す本文まで切れてしまうので、
       下だけ余裕を持たせた clip-path で切っている */
    clip-path: inset(0 0 -120px 0);
  }

  /* 飾りはカンプの座標に絶対配置する。
     並べるための箱（.omoi__deco-row）は中身が絶対配置になるので高さを持たない */
  .omoi__deco {
    position: absolute;
    margin: 0;
  }

  .omoi__deco-row,
  .omoi__deco-row--2 {
    display: block;
    width: auto;
    margin: 0;
  }

  .omoi__deco--scribble { top: 168.5px; left: 222.5px; width: 217.5px; }
  .omoi__deco--dot      { top: 289px;   left: -10px;   width: 64px; }
  .omoi__deco--square   { top: 529.5px; left: 298.5px; width: 52px; }
  .omoi__deco--zigzag   { top: 550px;   left: 433.5px; width: 87px; }
  .omoi__deco--triangle { top: 544px;   left: 690px;   width: 57.5px; }
  .omoi__deco--ring     { top: 747.5px; left: 5px;     width: 136.5px; }
  .omoi__deco--blocks   { top: 782.5px; left: 187.5px; width: 167.5px; }

  .omoi__title {
    position: absolute;
    top: 98.5px;
    left: 61.5px;
    width: 392px;
    margin-inline: 0;
  }

  .omoi__photo {
    position: absolute;
    margin-block-start: 0;
    margin-inline: 0;
  }

  /* カンプでは右端いっぱいまで伸びている。
     幅を指定すると 0.5px はみ出して横スクロールが出るので、
     左右を止めて幅をブラウザに決めさせる */
  .omoi__photo--1 {
    top: 116.5px;
    left: 345.5px;
    right: 0;
    width: auto;
  }

  .omoi__photo--2 {
    top: 552.5px;
    left: -7.5px;
    width: 380.5px;
  }

  .omoi__body {
    position: absolute;
    margin-block-start: 0;
    white-space: nowrap;
  }

  .omoi__body--1 {
    top: var(--omoi-text1-top);
    left: var(--omoi-text1-left);
  }

  .omoi__body--2 {
    top: var(--omoi-text2-top);
    left: var(--omoi-text2-left);
  }

  .omoi__text {
    font-size: var(--font-size-sm-plus);
  }

  .omoi__body--1 .omoi__text {
    line-height: var(--omoi-text1-line);
  }

  .omoi__body--2 .omoi__text {
    line-height: var(--omoi-text2-line);
  }

  /* カンプでは段落のあいだが、ちょうど1行ぶん空いている */
  .omoi__body--1 .omoi__text + .omoi__text {
    margin-block-start: var(--omoi-text1-line);
  }

  .omoi__body--2 .omoi__text + .omoi__text {
    margin-block-start: var(--omoi-text2-line);
  }

}

/* ==========================================================================
   下層ページ用の上書き
   ヘッダーの区切り線と、使い回している部品のこのページだけの違い。
   ========================================================================== */

/* 下層ページのヘッダーには、下に細い区切り線が入る（カンプ実測 1.5px / #5f5f5f）。
   線はコンテナの幅いっぱい（800px）に引くので、
   左右の余白（--header-gutter）の外側にあたる .site-header__inner に付ける */
.site-header--line .site-header__inner {
  padding-block-end: 36.5px;
  border-block-end: 1.5px solid var(--color-header-rule);
}

/* --- ご利用時間・入場料（このページでは帯の色が付かない） --- */

.page-omoi .info {
  /* カンプではオレンジの帯ではなく、白地に黒文字 */
  background-color: var(--color-white);
  color: var(--color-text);
  /* カンプの位置がトップより 12.5px 右にずれている */
  --info-shift: 12.5px;
}

/* スマホのキリンは、まわりの飾りに合わせて小さくする（ユーザー指示）。
   共通部品なので、トップページに影響しないよう .page-omoi で絞っている。
   800px以上はカンプどおり141pxのままなので、狭い画面だけに効かせる */
@media (max-width: 799.98px) {

  .page-omoi .info__kirin {
    width: min(92px, 28%);
  }

}

/* --- 施設概要（このページでは下の余白が12.5px狭い） --- */

.page-omoi .facility {
  /* キリンの絵がオレンジのセクションにはみ出す量（120px）は
     トップと同じなので、セクションが縮んだぶんだけ上に詰める */
  --facility-kirin-top: 143.5px;
}

@media (min-width: 800px) {

  .page-omoi .info {
    height: 332.5px;
  }

  .page-omoi .facility {
    height: 242.5px;
  }

}