@charset "UTF-8";
/* ==========================================================================
 * 2カラム構成 + 中央カラム上部に黒帯ヘッダー
 *   上部帯  : .header をフル幅黒帯化、ロゴのみセンタリング表示
 *             （左カラムのナビゲーション機能は削除）
 *   中央カラム : メインコンテンツ全般（ヒーロー / scroll-logos / about / programs / outline 等）
 *   右カラム  : .application（フォーム + プライバシーポリシー）
 *
 * 適用条件: min-width: 1200px のときのみ 2 カラム化。
 *           それ未満は既存 main.css / style.css のレイアウトを維持。
 *           SP (max-width: 767px) は既存ルールがそのまま有効。
 *
 * 各幅は CSS 変数で調整可能。
 * ========================================================================== */

@media (min-width: 1200px) {

  :root {
    --col-right-w: 420px;   /* 右サイドバー（フォーム）幅 */
    --topbar-h: 64px;       /* 中央カラム上部黒帯ヘッダーの高さ */
  }

  /* --------------------------------------------------------------------------
   * body 側に右サイドバー幅ぶんの余白を確保
   * 中央カラム = body の content-box（右 padding 分を除いた領域）
   * -------------------------------------------------------------------------- */
  body {
    width: 100%;
    padding-left: 0;
    padding-right: var(--col-right-w);
    overflow-x: hidden;
  }

  /* 100vw 指定の要素はビューポート全幅を取って右カラムを覆うので、
     中央カラム幅 = 100% に揃える */
  .main,
  .container,
  .main-title,
  .scroll-logos,
  .scroll-parent,
  .area,
  .section-entry,
  .about,
  .programs,
  .outline {
    width: 100%;
    max-width: 100%;
  }

  /* --------------------------------------------------------------------------
   * 背景レイヤー
   * .bg は固定全画面のため、右サイドバー領域を侵食しないよう右側を寄せる
   * -------------------------------------------------------------------------- */
  .bg {
    left: 0;
    right: var(--col-right-w);
  }

  /* ==========================================================================
   * 上部黒帯ヘッダー : .header を中央カラム幅でフル幅化、ロゴのみセンタリング
   * ========================================================================== */
  .header {
    position: fixed;
    top: 0;
    left: 0;
    right: var(--col-right-w);
    bottom: auto;
    width: auto;       /* left + right で幅を決める */
    height: var(--topbar-h);
    padding: 0 24px;
    flex-direction: row;
    align-items: center;
    justify-content: center;   /* ロゴをセンタリング */
    gap: 0;
    overflow: visible;
    box-sizing: border-box;
    z-index: 500;
    background-color: #030303;
    display: flex;
    justify-content: space-between;
  }

  /* ロゴをセンタリング */
  .header > .logo {
    margin: 0 auto;
    text-align: center;
  }
  .header > .logo > div {
    width: auto;
    margin: 0;
  }
  .header > .logo > div > img {
    width: auto;
    height: 36px;
    max-height: 100%;
    display: block;
  }
  .header > .logo > div > a > img {
    height: 25px;
  }

  /* メニュー / CTA / ハンバーガーは完全非表示 */
  .header > .menus-entry,
  #hamburger {
    display: none !important;
  }

  /* ==========================================================================
   * 右カラム : .application をサイドバー化
   * ========================================================================== */
  .application {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: var(--col-right-w);
    max-width: var(--col-right-w);
    height: 100vh;
    padding: 32px 24px;
    margin: 0;
    overflow-y: auto;
    background: #ffffff;
    box-sizing: border-box;
    z-index: 400;
    text-align: center;
  }

  /* APPLICATION ヘッドライン */
  .application > .session.section {
    padding: 0;
    margin: 0 0 16px;
  }

  /* お申し込み見出し */
  .application-entry {
    font-size: 22px;
    margin-bottom: 16px;
  }

  /* フォーム本体 */
  .application-form {
    max-width: 100%;
    padding: 0;
    margin: 0;
  }
  .application-form iframe {
    min-height: 1000px;
    width: 100%;
  }

  /* プライバシーポリシー */
  .privacy {
    width: 100%;
    margin-top: 32px;
    padding-top: 20px;
    font-size: 12px;
    line-height: 1.6;
  }
  .privacy p {
    width: 100% !important;
    word-break: break-all;
  }
  .privacy a {
    word-break: break-all;
  }

  /* ==========================================================================
   * その他の補正
   * ========================================================================== */

  /* セクション横幅の補正：100vw / 大きな padding 前提で組まれているものを
     中央カラム幅に収まるよう緩める */
  .about,
  .theme,
  .outline,
  .programs,
  .sponsor {
    padding-left: 60px;
    padding-right: 60px;
  }
  /* .section-entry は元々 52px 180px と padding が大きいので圧縮 */
  .section-entry {
    padding: 40px 24px;
  }
  .section-entry > .button {
    width: 100%;
    max-width: 344px;
  }
  .section-entry > .button > a img {
    width: 100%;
    height: auto;
  }
  /* present 文言が大きいので調整 */
  .section-entry > .present {
    font-size: 24px;
    letter-spacing: 0.3px;
  }

  /* outline 内のラベル幅は元 115px。中央カラム狭め時に詰まりすぎないよう微調整 */
  .outline .label {
    flex-shrink: 0;
  }
  .outline-item {
    flex-wrap: wrap;
  }

  /* 横スクロール禁止の保険 */
  html, body {
    overflow-x: hidden;
  }
}

/* ==========================================================================
 * タブレット帯 (768px 〜 1199px) では 2 カラム化しない
 * 何も書かない = 既存の main.css / style.css がそのまま効く
 * ========================================================================== */

/* ==========================================================================
 * 修正追加 — 2カラム時のヘッダー上書き
 * ========================================================================== */
@media (min-width: 1200px) {
  /* ロゴを左寄せに変更 */
  .header > .logo {
    margin: 0;
    text-align: left;
  }
  .header > .logo > div {
    justify-content: flex-start;
  }
  /* 右側ナビゲーションを表示（hamburger非表示ルールは既存で対応済み） */
  .header-nav {
    display: flex;
  }
}