@charset "utf-8";

/* メニューバーの高さをここで管理 */
:root {
  --menu-height: 48px;
}

section {
  padding-top: calc(var(--menu-height) + 32px);
}

/* ▼ メニューバー全体 */
.menu-bar {
  max-width: 1000px;
  display: flex;              /* 子要素（ボタン）を横並びにする */
  justify-content: center;    /* 全体を中央寄せに配置 */
  align-items: stretch;       /* 各ボタンの高さを揃える（縦方向に伸ばす） */
  flex-wrap: nowrap;          /* 折り返さず1行に収める（PC用） */

  gap: 6px;                   /* ボタン間の隙間（iPhoneでも安全な値） */
  padding: 0 8px;             /* 左右に少し余白を入れて切れ防止 */
  margin: 12px auto 28px;        /* 上12px、下28px、左右は0（中央寄せのため） */

  background-color: transparent; /* 背景は透明（ページデザインに馴染ませる） */
  
  position: sticky;           /* スクロールしても上に固定される */
  top: 0;                     /* 画面上端に固定 */
}

/* ▼ すべての項目を同じ幅にする */
.menu-item {
  flex: 1 1 0;
  display: flex;
}

/* ▼ a, dropbtn, back-btn を共通化 */
.menu-item a,
.menu-item .dropbtn,
.menu-item .back-btn {
  flex: 1;                     /* 親の .menu-item 内で均等に幅を取る */
  display: flex;               /* 中のテキストを中央寄せするため flex に */
  justify-content: center;     /* 横方向の中央寄せ */
  align-items: center;         /* 縦方向の中央寄せ */
  text-align: center;          /* テキストを中央揃えにする */

  background: #ffeef7;         /* 優しいピンク背景（サイトの世界観に合わせる） */
  padding: 8px 6px;            /* 内側の余白（上下8px・左右6px） */
  border-radius: 10px;         /* 角を丸くして柔らかい印象に */
  border: 1px solid #f3d7f3;   /* 薄いピンクの枠線で統一感を出す */
  color: #3a3399;              /* 文字色：落ち着いた青紫 */
  font-weight: 600;            /* 少し太字にしてボタンらしさを出す */
  font-size: 0.85rem;          /* 小さめの文字で可読性とデザインの両立 */
  text-decoration: none;       /* aタグの下線を消す */
  box-shadow: 0 2px 6px rgba(0,0,0,0.05); /* ふんわり影で浮かせる */
  white-space: nowrap;         /* ボタン内の文字が折り返されないようにする */
  cursor: pointer;             /* ホバー時に「指カーソル」にしてクリック感を出す */

  height: 100%;                /* 親の .menu-item の高さに合わせて伸ばす */
}

/* ▼ ホバー */
.menu-item a:hover,
.menu-item .dropbtn:hover,
.menu-item .back-btn:hover {
  background-color: #ffdff0;
  transform: translateY(-2px);
}

/* ▼ 戻るボタンだけ色を変える */
.menu-item .back-btn {
  background-color: #ffe0f1;
  border: 1px solid #f0c7f0;
  font-weight: bold;
}

.menu-item .back-btn:hover {
  background-color: #ffcce7;
}

/* ----------------------------------------
   ドロップダウンの基礎設定
   → 子要素（dropdown-content）の絶対配置の基準にする
---------------------------------------- */
.dropdown {
  position: relative; /* ドロップダウンメニューの基準位置 */
}

/* ----------------------------------------
   メニュー項目がドロップダウンを持つ場合の設定
   → 他の .dropdown より優先して前面に出す
---------------------------------------- */
.menu-item.dropdown {
  position: relative; /* 絶対配置の基準にする */
}

/* ----------------------------------------
   ドロップダウンを開くボタン（dropbtn）
   → 最前面にしてクリックしやすくする
---------------------------------------- */
.dropbtn {
  position: relative; /* ボタン自身の位置基準 */
  pointer-events: auto; /* クリック可能にする（念のため明示） */
}

/* ----------------------------------------
   ドロップダウンが「開いた状態」
   → display: block で表示、クリックも可能に
---------------------------------------- */
.dropdown-content.show {
  display: block;      /* ドロップダウンを表示 */
  pointer-events: auto; /* 開いたときだけクリック可能にする */
}


/* ----------------------------------------
   ドロップダウン中身（縦に並ぶピンクボタン）
   初期状態では非表示
---------------------------------------- */
.dropdown-content {
  display: none;        /* 初期状態では非表示 */
  position: absolute;   /* 親 (.dropdown) を基準に絶対配置 */
  top: 100%;            /* ボタンの真下に配置 */
  left: 0;              /* 左端を揃える */

  width: max-content;   /* 中身に合わせて横幅を広げる */
  min-width: 100%;      /* ただし最低でも親ボタンと同じ幅にする */

  pointer-events: auto; /* クリック可能（JS制御と併用） */
  padding-top: 6px;     /* ボタンとの間に少し余白 */
  background: transparent; /* 背景は透明（影や枠は子要素で表現） */
  border: none;         /* 外枠なし */
  box-shadow: none;     /* 影なし（子要素に影をつける） */
  overflow: visible;    /* はみ出しを隠さず表示 */
}


/* ----------------------------------------
   ドロップダウン内の項目（ピンクのボタン）
---------------------------------------- */
.dropdown-content div {
  background: #ffeef7;        /* 優しいピンク背景 */
  border: 1px solid #f3d7f3;  /* 薄いピンクの枠線 */
  border-radius: 10px;        /* 角を丸くして柔らかい印象に */

  padding: 7px;
  margin-top: 7px;

  display: block;             /* ブロック要素として幅いっぱいに */
  text-align: center;         /* テキスト中央揃え */
  color: #3a3399;             /* 落ち着いた青紫の文字色 */
  font-weight: 600;           /* 少し太字で見やすく */
  text-decoration: none;      /* 下線なし */

  box-shadow: 0 2px 6px rgba(0,0,0,0.05); /* ふんわり影で浮かせる */
  cursor: pointer;            /* クリック可能に見せる */
}

/* ----------------------------------------
   ドロップダウン項目のホバー時
   → 薄い青で「選択中」を分かりやすく
---------------------------------------- */
.dropdown-content a:hover,
.dropdown-content div:hover {
  background: #e8f3ff; /* ホバー時は薄い青に変化 */
}

/* ----------------------------------------
   PC（画面幅 601px 以上）のレイアウト調整
   → スマホとは別の構造でメニューを横一列に並べる
---------------------------------------- */
@media screen and (min-width: 601px) {

  /* ----------------------------------------
     menu-top / menu-bottom の2段構造を
     PC では「段として扱わず」中身だけ並べる
     → display: contents が決定打
  ---------------------------------------- */
  .menu-top,
  .menu-bottom {
    display: contents; /* 親のボックスを消し、子要素だけを並べる */
  }

  /* ----------------------------------------
     PC 時の button（dropbtn など）の完全リセット
     → ブラウザ標準のボタンスタイルを全削除して
        a タグと同じデザインに統一する
  ---------------------------------------- */
  .menu-item button,
  .menu-item a {
    width: 100%;               /* 親 .menu-item の幅いっぱい */
    display: flex;             /* 中央寄せ */
    align-items: center;
    justify-content: center;
    text-decoration: none;     /* 下線なし */
    box-sizing: border-box;    /* 枠線を含めてサイズ計算 */
  }
}

/* ▼ モバイル（〜600px） */
@media screen and (max-width: 600px) {

  .menu-bar {
    gap: 10px;
    padding: 0 6px;
  }

  .menu-item a,
  .menu-item .dropbtn,
  .menu-item .back-btn,
  .jumpLink {
    height: 40px;
    font-size: 0.8rem;        /* 小さめ文字で収まりを良くする */
    padding: 0 4px;            /* 横の余白を少しだけ確保 */
  }

  /* ----------------------------------------
  スマホ時のドロップダウン配置
  → ボタンの真下に全幅で表示
  ---------------------------------------- */
  .dropdown-content {
    position: absolute;        /* 親 .dropdown を基準に配置 */
    width: 100%;               /* ボタンと同じ幅に広げる */
    left: 0;                   /* 左端を揃える */
    top: 100%;                 /* ボタンの真下に表示 */
    box-sizing: content-box;   /* 枠線を含めないサイズ計算 */
  }

    /* ----------------------------------------
        ドロップダウン内の項目（スマホ版）
    ---------------------------------------- */
  .dropdown-content div {
    display: flex;             /* 中央寄せ */
    align-items: center;
    justify-content: center;

    background: #ffeef7;       /* ピンク背景 */
    border: 1px solid #f3d7f3; /* 薄いピンクの枠線 */
    border-radius: 10px;       /* 角丸 */

    margin-bottom: 6px;        /* 項目同士の間隔 */

    color: #3a3399;            /* 青紫の文字色 */
    font-weight: 600;          /* 少し太字 */
    text-decoration: none;     /* 下線なし */
    box-shadow: 0 2px 6px rgba(0,0,0,0.05); /* ふんわり影 */
    cursor: pointer;           /* クリック可能 */
  }
}