/* =========================================================
   _index-inline.css — Phase 1 で index.html <style> から切り出し
   中身は未整理。Phase 2 以降で components.css / pages/home.css 等へ振り分ける
   ========================================================= */


    /* =========================================================
       過ごし方カードの画像枠 / Story の大きな画像
       ========================================================= */
    .way-card__media {
      width: 100%;
      aspect-ratio: 16/10;
      border-radius: 10px;
      overflow: hidden;
      margin: 0 0 22px;
      background: linear-gradient(135deg, var(--paper-2), var(--rule-soft));
    }
    .way-card__media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.6s ease;
    }
    .way-card:hover .way-card__media img {
      transform: scale(1.04);
    }

    /* Coming Soon（無効化されたCTA） */
    .way-card__cta--coming,
    .btn--coming {
      opacity: 0.55;
      cursor: not-allowed;
      pointer-events: none;
      user-select: none;
    }

    .story__hero-media {
      width: 100%;
      aspect-ratio: 16/9;
      border-radius: 14px;
      overflow: hidden;
      margin: 32px 0 48px;
      background: linear-gradient(135deg, var(--paper-2), var(--rule-soft));
    }
    .story__hero-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    @media (min-width: 768px) {
      .story__hero-media {
        aspect-ratio: 21/9;
        margin: 48px 0 64px;
        border-radius: 18px;
      }
    }

    /* =========================================================
       PC（1024px以上）で横幅を広く使う
       ========================================================= */
    @media (min-width: 1024px) {
      /* コンテンツ幅を 1200px → 1440px に拡大 */
      .wrap { max-width: 1440px; }

      /* 過ごし方カードを 2カラム → 3カラムに */
      .ways__grid { grid-template-columns: repeat(3, 1fr); gap: 24px; }

      /* カードのパディングを3カラムに合わせて調整 */
      .way-card { padding: 32px 28px 36px; }

      /* Story の幅制限を緩和（760px → 900px） */
      .story__inner { max-width: 900px; }
    }

    @media (min-width: 1440px) {
      /* 超大型ディスプレイ（1440px以上）でコンテンツをさらに広げる */
      .wrap { max-width: 1600px; }
    }

    /* =========================================================
       Access map iframe（Google Maps 埋め込み）
       ========================================================= */
    .access__map iframe {
      width: 100%;
      height: 100%;
      min-height: 420px;
      border: 0;
      display: block;
      filter: grayscale(0.15) contrast(0.95);
      transition: filter 0.3s ease;
    }
    .access__map:hover iframe {
      filter: grayscale(0) contrast(1);
    }


    /* =========================================================
       Page Loader（鯉のぼり：加須間ロゴ完全準拠）
       実ロゴのピクセル解析に基づく：
         ・8 体すべての旗は、V字切り欠きが「右側」（深さ 21%）
         ・サイズ比: 全体 540×390 (約 1.38:1)
         ・各旗: 180×77 (約 2.34:1)
         ・配置: 9 等分の列のうち、左旗=col 1-3 / 中央旗=col 4-6 / 右旗=col 7-9
       Timeline:
         0.15s - 1.70s : 下段（行5）→ 上段（行1）へ段階的に出現
         2.20s - 2.80s : ローダーフェードアウト
       ========================================================= */
    .page-loader {
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: var(--paper, #F6F1E8);
      display: grid;
      place-items: center;
      color: var(--ink, #2A241D);
      animation: loader-fadeout 0.6s cubic-bezier(0.65, 0, 0.35, 1) 2.20s forwards;
    }

    /* 実ロゴと同じアスペクト比 540:390（≒ 1.38:1） */
    .koi-stack {
      width: clamp(280px, 36vw, 380px);
      aspect-ratio: 540 / 390;
      display: grid;
      grid-template-columns: repeat(9, 1fr);
      grid-template-rows: repeat(5, 1fr);
      row-gap: 1.3%;     /* 約 5px / 390px */
      column-gap: 0;
    }

    /* 鯉のぼり旗：V字切り欠きが右側、深さ 21% */
    .koi {
      background: currentColor;
      clip-path: polygon(0 0, 100% 0, 79% 50%, 100% 100%, 0 100%);
      opacity: 0;
      transform: translateY(40px);
      animation: koi-appear 0.55s cubic-bezier(0.34, 1.2, 0.64, 1) forwards;
    }

    /* 8 体の配置：下段（行5）から順に「1段、2段、3段…」と上方向へ出現
       同じ段の旗は同時に出現する（左右対称の演出） */
    .koi--7 { grid-column: 1 / 4;  grid-row: 5; animation-delay: 0.15s; } /* 1段目（最下段） */
    .koi--8 { grid-column: 7 / 10; grid-row: 5; animation-delay: 0.15s; }
    .koi--6 { grid-column: 4 / 7;  grid-row: 4; animation-delay: 0.40s; } /* 2段目 */
    .koi--4 { grid-column: 1 / 4;  grid-row: 3; animation-delay: 0.65s; } /* 3段目 */
    .koi--5 { grid-column: 7 / 10; grid-row: 3; animation-delay: 0.65s; }
    .koi--3 { grid-column: 4 / 7;  grid-row: 2; animation-delay: 0.90s; } /* 4段目 */
    .koi--1 { grid-column: 1 / 4;  grid-row: 1; animation-delay: 1.15s; } /* 5段目（最上段） */
    .koi--2 { grid-column: 7 / 10; grid-row: 1; animation-delay: 1.15s; }

    @keyframes koi-appear {
      to {
        opacity: 1;
        transform: translate(0, 0);
      }
    }
    @keyframes loader-fadeout {
      to { opacity: 0; visibility: hidden; }
    }

    /* 即スキップ用 */
    .skip-intro .page-loader { display: none; }
    @media (prefers-reduced-motion: reduce) {
      .page-loader { display: none; }
    }

    /* =========================================================
       ロゴ画像（nav / footer / hero）
       ── 全部 透過PNG（加須間ロゴ_透過 - コピー.png）に統一。
          色は CSS フィルタで白／黒を切替。
       ========================================================= */
    /* Nav: フルロゴ（シンボル + 加須間 文字）を表示。
       右側のテキストラベルは削除済みなので、ロゴ自体を主役に。
       初期=白（hero上）／scroll後=黒（クリーム背景） */
    .nav__logo-img {
      height: 48px;
      width: auto;
      object-fit: contain;
      display: block;
      filter: brightness(0) invert(1);
      transition: filter 0.3s ease;
    }
    .nav.scrolled .nav__logo-img {
      filter: brightness(0);
    }
    @media (max-width: 600px) {
      .nav__logo-img { height: 40px; }
    }

    /* Footer: 黒背景に白ロゴ。テキスト削除分、ロゴを大きく */
    .footer__logo-img {
      height: 80px;
      width: auto;
      object-fit: contain;
      display: block;
      filter: brightness(0) invert(1);
    }

    /* Hero: フルロゴ（透過PNG）を白で */
    .hero__logo {
      display: block;
      width: clamp(120px, 16vw, 170px);
      height: auto;
      margin: 0 0 28px;
      filter: brightness(0) invert(1);
      opacity: 0.96;
    }
    @media (max-width: 768px) {
      .hero__logo { margin-bottom: 20px; }
    }

    /* =========================================================
       開発時：プレースホルダ／仮配置の可視化
       リリース時はこのブロック (.ph-todo*) を削除すること
       ========================================================= */
    .ph-todo {
      position: relative;
      display: block;
      width: 100%;
      height: 100%;
    }
    .ph-todo > img {
      outline: 4px dashed #d62828;
      outline-offset: -4px;
      display: block;
      width: 100%;
      height: 100%;
    }
    .ph-todo::before {
      content: attr(data-todo);
      position: absolute;
      top: 8px;
      left: 8px;
      background: #d62828;
      color: #fff;
      font: 700 10px/1.3 system-ui, "Hiragino Sans", sans-serif;
      letter-spacing: 0.06em;
      padding: 4px 8px;
      border-radius: 2px;
      z-index: 10;
      pointer-events: none;
      white-space: nowrap;
    }

    /* =========================================================
       ways-cafe 画像は他カードと同じく cover で枠いっぱいに表示
       （以前 contain で縮小表示にしていたが、拡大表示に変更）
       ========================================================= */
    .way-card__media img[src*="ways-cafe"] {
      object-fit: cover !important;
    }

    /* =========================================================
       メニュー開閉時の nav ロゴ位置ずれ対策（改訂版）
       - 旧版で padding を 18px に強制していたが、scrolled (12px) からの遷移で
         逆にロゴが上下にズレていたため、padding は触らない方針に変更。
       - 背景・ロゴ色・ハンバーガー色だけを overlay 用に強制（透明/白）。
       - これで開閉時にロゴは一切動かなくなる。
       ========================================================= */
    html { scrollbar-gutter: stable; }
    body.menu-open { overflow: hidden; }
    body.menu-open .nav,
    body.menu-open .nav.scrolled {
      background: transparent !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      border-bottom: none !important;
    }
    body.menu-open .nav__logo-img,
    body.menu-open .nav.scrolled .nav__logo-img {
      filter: brightness(0) invert(1) !important;
    }
    body.menu-open .nav__menu,
    body.menu-open .nav.scrolled .nav__menu {
      color: var(--paper) !important;
    }

    /* ハンバーガーメニュー目次タイトル：少し小さめに調整 */
    .menu-overlay__intro h3 {
      font-size: clamp(22px, 2.8vw, 28px) !important;
      line-height: 1.55 !important;
    }

    /* gallery__card-tag（"Toi-no-Ma" "e-Bike Tour" など）の英語フォント調整
       現状: italic でやや読みにくかったので、直立 + やや太めに */
    .gallery__card-tag {
      font-style: normal !important;
      font-weight: 600 !important;
      letter-spacing: 0.12em !important;
    }

    /* =========================================================
       Nav キャッチコピー（inlight-website-claude 同等のスタイル）
       - ロゴ画像の右隣（左寄せ）に main + sub の2行構成
       - 区切り線 border-left で視覚分離
       - 「つながる」だけ koi色（黄色）でアクセント
       - 900px以下では非表示
       ========================================================= */
    .nav__logo {
      gap: 14px !important;
    }
    .nav__tagline {
      display: flex !important;
      flex-direction: column !important;
      line-height: 1.2 !important;
      padding-left: 14px !important;
      border-left: 1px solid rgba(42, 36, 29, 0.2);
      white-space: nowrap;
      transition: padding 0.3s ease, border-color 0.3s ease;
    }
    .nav__tagline-main {
      font-family: var(--serif);
      font-size: 13.5px;
      font-weight: 600;
      letter-spacing: 0.06em;
      color: var(--ink);
    }
    .nav__tagline-main .koi-accent {
      color: var(--koi) !important;
      font-weight: 700;
    }
    .nav__tagline-sub {
      font-family: var(--serif);
      font-size: 10px;
      font-weight: 500;
      letter-spacing: 0.14em;
      color: var(--koi-deep);
      margin-top: 3px;
    }
    .nav__tagline-sub .en {
      font-family: var(--en-serif);
      letter-spacing: 0.12em;
      margin-left: 4px;
    }
    /* hero上（is-light）は白文字 */
    .nav.is-light .nav__tagline { border-left-color: rgba(246, 241, 232, 0.35); }
    .nav.is-light .nav__tagline-main { color: var(--paper); }
    .nav.is-light .nav__tagline-sub { color: var(--koi); }
    /* スクロール後（scrolled）は少し小さく + 黒 */
    .nav.scrolled .nav__tagline-main { font-size: 12px; color: var(--ink); }
    .nav.scrolled .nav__tagline-sub { font-size: 9px; color: var(--koi-deep); }
    /* メニュー開いている時は白 */
    body.menu-open .nav__tagline { border-left-color: rgba(246, 241, 232, 0.35) !important; }
    body.menu-open .nav__tagline-main { color: var(--paper) !important; }
    body.menu-open .nav__tagline-sub { color: var(--koi) !important; }
    @media (max-width: 900px) {
      /* スマホでもタイトル「加須でつながるカフェ」を必ず残す（小さめに表示） */
      .nav__tagline { display: flex !important; padding-left: 10px !important; }
      .nav__tagline-main { font-size: 11px !important; }
      .nav__tagline-sub { font-size: 8px !important; }
    }

    /* セクションタイトル下のバー（section-rule）を横に伸ばす
       現状 40px → 80px。タイトル左寄せのセクション用に margin 左寄せ変種も用意。 */
    .section-rule {
      width: 80px !important;
    }
    .section-rule--left {
      margin-left: 0 !important;
      margin-right: auto !important;
    }
    /* about セクションのバーだけ、下の本文と同じ幅にフィットさせる
       （about__copy = タイトル+本文の親要素の幅100%に揃える） */
    .about .section-rule--left {
      width: 100% !important;
      margin: 18px 0 28px !important;
    }
    /* story セクションのバーも本文と同じ幅にフィット */
    .story .section-rule--left {
      width: 100% !important;
      margin: 18px 0 32px !important;
    }

    /* =========================================================
       過ごし方カード（way-card）の CTA ボタン位置を揃える
       - カードを flex column にして、ボタンを margin-top: auto で
         カード下端へプッシュ。
       - 各カードで本文の長さが違っても、CTA が同じ高さに揃う。
       - align-self: flex-start でボタンの横幅は文字幅のまま左寄せ維持。
       ========================================================= */
    .way-card {
      display: flex !important;
      flex-direction: column !important;
    }
    .way-card__cta,
    .way-card__cta--coming {
      margin-top: auto !important;
      align-self: flex-start !important;
    }

    /* =========================================================
       .btn--primary の光彩エフェクト除去
       - styles.css で box-shadow による黄色い光彩がついていたが、
         少しダサく見えるのでフラットなボタンに変更。
       - 色のみで状態を伝える（hover で少し濃くなる + 1px上昇のみ）。
       ========================================================= */
    .btn--primary {
      box-shadow: none !important;
      transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease !important;
    }
    .btn--primary:hover {
      box-shadow: none !important;
      transform: translateY(-1px) !important;
      background: var(--koi-deep) !important;
    }

    /* =========================================================
       ハンバーガーメニュー内のSNSアイコン位置ずれ対策
       - 既存CSSは place-items: center だが、SVGが右下にズレる症状。
       - inline-flex + 明示的な justify/align で確実に中央配置。
       - サイズも 36px→40px に拡大して見やすく。
       ========================================================= */
    .menu-overlay__socials {
      display: inline-flex !important;
      align-items: center !important;
      gap: 12px !important;
    }
    .menu-overlay__socials a {
      width: 40px !important;
      height: 40px !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      padding: 0 !important;
      border-radius: 50% !important;
      box-sizing: border-box !important;
      border: 1px solid rgba(246,241,232,0.25) !important;
      color: rgba(246,241,232,0.85) !important;
      transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }
    .menu-overlay__socials a:hover {
      background: var(--koi) !important;
      border-color: var(--koi) !important;
      color: var(--ink) !important;
    }
    .menu-overlay__socials a svg {
      width: 16px !important;
      height: 16px !important;
      display: block !important;
      flex-shrink: 0 !important;
    }