/* ==========================================================================
   学校マイページ - ご予約情報一覧
   .reserveList 配下に完結する新規スタイル。このファイル単体で表示を再現できる。
   カード・アコーディオンの開閉状態はクラスの付け替えで切り替わる（動作は未実装）。

   【目次】
   1. ページ全体・セクション見出し
   2. 予約カードの並び（1列／3列）
   3. 施設テーマ（予約カードの配色：Blue Ocean／GREEN SPRINGS）
   4. 予約カード（大）
   5. 予約カード（小・3列）
   6. 過去のご予約（年度アコーディオン）
   7. お役立ちメニュー（4列）
   8. スマートフォン用（736px 以下）
   ========================================================================== */

/* ---------- 1. ページ全体・セクション見出し ---------- */
.reserveList { padding:80px 0; color:var(--color-text); font-family:"Helvetica Neue", Arial, "Hiragino Sans", "Noto Sans JP", sans-serif; font-size:100%; line-height:1; font-feature-settings:'palt' 1; -webkit-text-size-adjust:100%; }

.reserveList__section { margin-bottom:80px; }
.reserveList__section:last-child { margin-bottom:0; }
.reserveList__heading { margin-bottom:40px; font-size:30px; font-weight:700; }
.reserveList__heading::before { content:""; display:inline-block; width:24px; height:24px; margin-right:.2em; border-radius:24px; background:var(--color-text); }/* 見出し先頭の黒丸 */

/* ---------- 2. 予約カードの並び ---------- */
/* 基本は1列（縦に並ぶ） */
.reserveList__cards { list-style:none; }
.reserveList__cards > li { margin-bottom:30px; }
.reserveList__cards > li:last-child { margin-bottom:0; }
/* 3列（年度ごとの一覧） */
.reserveList__cards.-col3 { display:flex; flex-wrap:wrap; gap:30px; }
.reserveList__cards.-col3 > li { width:calc((100% - 60px) / 3); margin-bottom:0; box-sizing:border-box; }


/* ==========================================================================
   3. 施設テーマ（予約カードの配色）
   既定は Blue Ocean（青）。GREEN SPRINGS のカードには
   class="reserveCard -greensprings" のようにクラスを追加すると緑になる。
   色そのものは tokens.css で定義。
   ========================================================================== */
.reserveCard,
.reserveCardSm { --reserve-theme:var(--color-blueocean); --reserve-theme-bg:var(--color-blueocean-bg); }
.reserveCard.-greensprings,
.reserveCardSm.-greensprings { --reserve-theme:var(--color-greensprings); --reserve-theme-bg:var(--color-greensprings-bg); }
/* 過去のご予約：年度アコーディオン内のカードは施設を問わずグレー配色にする
   ※上の .-greensprings の指定より後に書くこと（同じ強さのため、書いた順で上書きしている） */
.reserveList__accordionBody .reserveCard,
.reserveList__accordionBody .reserveCardSm { --reserve-theme:var(--color-past); --reserve-theme-bg:var(--color-past-bg); }


/* ==========================================================================
   4. 予約カード（大）
   直近の予約を大きく見せるカード。左に施設名と利用日、右に予約内容。
   ========================================================================== */
.reserveCard { padding:36px 36px 40px; border-radius:20px; background:var(--reserve-theme-bg); box-shadow:inset 0px -10px 0px 0px var(--shadow-15), 8px 8px 8px 0px var(--shadow-15); box-sizing:border-box; }
.reserveCard__body { display:flex; align-items:flex-start; gap:45px; margin-bottom:36px; }

/* 左側：施設名と利用日 */
.reserveCard__summary { width:520px; flex-shrink:0; color:var(--color-white); }
/* 区切り線は日付より短く、施設名の幅に合わせる */
.reserveCard__place { width:320px; padding-bottom:22px; margin-bottom:40px; border-bottom:2px solid rgba(255, 255, 255, .6); font-size:34px; font-weight:700; letter-spacing:.06em; }
.reserveCard__date { font-family:'Din', "Helvetica Neue", Arial, "Hiragino Sans", "Noto Sans JP", sans-serif; font-size:132px; font-weight:700; line-height:1; white-space:nowrap; }
.reserveCard__year { display:block; margin-bottom:0px; font-size:40px; }
.reserveCard__yearUnit { font-size:24px; }
.reserveCard__dateUnit { font-size:56px; }
.reserveCard__dateWeek { font-size:56px; }

/* 右側：予約内容 */
.reserveCard__detail { flex:1; padding:10px 26px; border-radius:10px; background:var(--color-white); box-sizing:border-box; }
.reserveCard__detailList { list-style:none; }
.reserveCard__detailItem { display:flex; align-items:center; gap:16px; padding:8px 0; border-bottom:1px dotted #B4B4B4; font-size:22px; line-height:1.5; }
.reserveCard__detailItem:last-child { border-bottom:none; }
/* アイコン画像は白抜きのため、外側のタグで青い丸の背景を付ける */
.reserveCard__detailIcon { flex-shrink:0; display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; background:var(--reserve-theme); }
.reserveCard__detailIcon img { width:22px; height:22px; }

/* 行程確認書のステータス */
.reserveCard__status { display:flex; align-items:center; gap:14px; margin:12px 0 18px; padding:14px 26px; border-radius:5px; background:#EFEFEF; font-size:22px; font-weight:700; }
/* 元画像が縦長のため、高さを基準にして縦横比を保つ */
.reserveCard__status img { flex-shrink:0; width:auto; height:42px; }
.reserveCard__status.-todo { color:var(--color-danger); }/* 未入力 */
.reserveCard__status.-done { color:var(--color-gray); font-weight:500; }/* 入力済 */

/* 確認・変更ボタン */
.reserveCard__link { display:flex; align-items:center; justify-content:center; gap:20px; width:73%; max-width:760px; height:90px; margin:0 auto; border-radius:999px; background:var(--color-white); box-sizing:border-box; color:var(--reserve-theme); font-size:40px; font-weight:700; text-decoration:none; }
/* 矢印は白抜き画像のため、外側のタグで青い丸の背景を付ける */
.reserveCard__linkIcon { display:flex; align-items:center; justify-content:center; flex-shrink:0; width:36px; height:36px; border-radius:50%; background:var(--reserve-theme); }
.reserveCard__linkIcon img { width:20px; height:auto; }
.reserveCard__link:hover { opacity:.85; }


/* ==========================================================================
   5. 予約カード（小・3列）
   年度アコーディオン内などで使う小さめのカード。カード全体がリンクになる。
   ========================================================================== */
.reserveCardSm { display:block; height:100%; padding:26px 18px 24px; border-radius:14px; background:var(--reserve-theme-bg); box-shadow:inset 0px -6px 0px 0px var(--shadow-15), 6px 6px 6px 0px var(--shadow-15); box-sizing:border-box; text-decoration:none; }
.reserveCardSm__place { display:block; width:60%; margin:0 auto 26px; padding:6px 0; border-radius:4px; background:var(--color-white); color:var(--reserve-theme); font-size:16px; font-weight:700; letter-spacing:.06em; text-align:center; }
.reserveCardSm__date { display:block; margin-bottom:24px; color:var(--color-white); font-family:'Din', "Helvetica Neue", Arial, "Hiragino Sans", "Noto Sans JP", sans-serif; font-size:56px; font-weight:700; line-height:1; text-align:center; white-space:nowrap; }
.reserveCardSm__dateYear { font-size:28px; }
.reserveCardSm__dateUnit { font-size:24px; }
.reserveCardSm__dateWeek { font-size:24px; }
.reserveCardSm__detail { display:block; padding:16px 20px; margin-bottom:20px; border-radius:8px; background:var(--shadow-10); }
.reserveCardSm__detailList { display:block; list-style:none; color:var(--color-white); font-size:14px; line-height:1.75; }
.reserveCardSm__detailItem { position:relative; display:block; padding-left:.9em; }
.reserveCardSm__detailItem::before { content:"・"; position:absolute; left:-.1em; }
.reserveCardSm__link { display:flex; align-items:center; justify-content:center; gap:8px; width:70%; height:36px; margin:0 auto; border-radius:999px; background:var(--color-white); color:var(--reserve-theme); font-size:15px; font-weight:600; }
.reserveCardSm__linkIcon { display:flex; align-items:center; justify-content:center; flex-shrink:0; width:18px; height:18px; border-radius:50%; background:var(--reserve-theme); }
.reserveCardSm__linkIcon img { width:10px; height:auto; }
.reserveCardSm:hover { opacity:.85; }


/* ==========================================================================
   6. 過去のご予約（年度アコーディオン）
   「2025年度」などのボタンを押すと中身が開閉する。開閉の動作は JS 側で実装。
   ========================================================================== */
.reserveList__accordion { margin-bottom:20px; }
.reserveList__accordion:last-child { margin-bottom:0; }
.reserveList__accordionHead { display:flex; align-items:center; justify-content:space-between; width:100%; height:52px; padding:0 24px; border:1px solid var(--accordion-color); border-radius:8px; background:var(--accordion-bg); box-sizing:border-box; color:var(--accordion-color); font-family:inherit; font-size:18px; font-weight:700; line-height:1; text-align:left; cursor:pointer; }
.reserveList__accordionHead:hover { background:var(--accordion-bg-hover); }
/* GREEN SPRINGS 用:.-greensprings クラスを付けると緑系に切り替わる(色は tokens.css で定義) */
.reserveList__accordion.-greensprings .reserveList__accordionHead { --accordion-color:var(--color-greensprings); --accordion-bg-hover:var(--accordion-bg-hover-green); }
/* 開閉アイコン（＋／−） */
.reserveList__accordionIcon { position:relative; display:block; width:18px; height:18px; flex-shrink:0; }
.reserveList__accordionIcon::before,
.reserveList__accordionIcon::after { content:""; position:absolute; top:50%; left:0; width:18px; height:2px; margin-top:-1px; background:var(--accordion-color); }
.reserveList__accordionIcon::after { transform:rotate(90deg); }
/* 開いている状態は縦棒を消して「−」にする */
.reserveList__accordion.-open .reserveList__accordionIcon::after { display:none; }

/* 開閉の表示・非表示は JS が行うため、ここでは指定しない。
   （CSS で display を切り替えるとアニメーションできないため）
   閉じた状態の初期値は HTML 側の style="display:none;" で指定する。 */
.reserveList__accordionBody { padding-top:30px; }


/* ==========================================================================
   7. お役立ちメニュー（4列）
   ========================================================================== */
.reserveList__quick { display:flex; flex-wrap:wrap; gap:20px; list-style:none; }
.reserveList__quickItem { width:calc((100% - 60px) / 4); box-sizing:border-box; }
.reserveList__quickLink { display:flex; flex-direction:column; height:212px; border-radius:12px; box-sizing:border-box; box-shadow:inset 0px -7px 0px 0px var(--shadow-15), 6px 6px 6px 0px var(--shadow-15); text-decoration:none; }
/* アイコン枠は高さを固定し、残りの余白に文字を中央配置する */
.reserveList__quickIcon { display:flex; align-items:center; justify-content:center; flex:none; height:80px; margin:20px 20px 0; padding:8px; box-sizing:border-box; border-radius:8px; background:var(--shadow-10); }
.reserveList__quickIcon img { width:58px; height:58px; }
.reserveList__quickText { display:flex; align-items:center; justify-content:center; flex:1; padding:10px 8px 24px; box-sizing:border-box; color:var(--color-white); font-size:22px; font-weight:700; text-align:center; }
.reserveList__quickLink:hover img { opacity:1; }

/* ボタンごとの背景色（単色。HTML 側でクラスを付けて色分け） */
.reserveList__quickLink.-blue { background:#0495D6; }
.reserveList__quickLink.-teal { background:#1BC34C; }
.reserveList__quickLink.-orange { background:#E9A43A; }
.reserveList__quickLink.-green { background:#B00088; }


/* ==========================================================================
   8. スマートフォン用（サイト共通のブレイクポイント 736px に合わせる）
   PC 用の値をスマホ向けに上書きしているだけ（項目の並びは上と同じ）
   ========================================================================== */
@media only screen and (max-width:736px) {

	/* ---------- ページ全体・セクション見出し ---------- */
	.reserveList { padding:30px 0; }
	.reserveList__section { margin-bottom:40px; }
	.reserveList__heading { margin-bottom:24px; font-size:18px; }
	.reserveList__heading::before { width:14px; height:14px; }

	/* ---------- 予約カードの並び ---------- */
	.reserveList__cards > li { margin-bottom:32px; }
	/* 3列は横幅が足りないため1列に切り替える */
	.reserveList__cards.-col3 { flex-direction:column; gap:24px; }
	.reserveList__cards.-col3 > li { width:100%; }

	/* ---------- 予約カード（大） ---------- */
	.reserveCard { padding:15px 15px 18px; border-radius:10px; box-shadow:inset 0px -5px 0px 0px var(--shadow-15), 5px 5px 5px 0px var(--shadow-15); }
	.reserveCard__body { flex-direction:column; gap:15px; margin-bottom:15px; }
	.reserveCard__summary { width:100%; text-align:center; }
	.reserveCard__place { width:100%; padding-bottom:10px; margin-bottom:16px; font-size:19px; }
	.reserveCard__date { font-size:56px; }
	.reserveCard__year { margin-bottom:8px; font-size:24px; }
	.reserveCard__yearUnit { font-size:16px; }
	.reserveCard__dateUnit { font-size:24px; }
	.reserveCard__dateWeek { font-size:24px; }
	.reserveCard__detail { padding:4px 14px; width:100%; }
	.reserveCard__detailItem { gap:9px; padding:11px 0; font-size:14px; }
	.reserveCard__detailIcon { width:22px; height:22px; }
	.reserveCard__detailIcon img { width:16px; height:16px; }
	.reserveCard__status { gap:9px; margin:8px 0 10px; padding:10px 16px; font-size:14px; }
	.reserveCard__status img { width:auto; height:27px; }
	.reserveCard__link { width:100%; height:48px; gap:10px; font-size:17px; }
	.reserveCard__linkIcon { width:22px; height:22px; }
	.reserveCard__linkIcon img { width:12px; }

	/* ---------- 予約カード（小） ---------- */
	.reserveCardSm { padding:20px 14px 18px; border-radius:12px; box-shadow:inset 0px -5px 0px 0px var(--shadow-15), 5px 5px 5px 0px var(--shadow-15); }
	.reserveCardSm__place { min-width:120px; width:fit-content; margin-bottom:10px; font-size:12px; }
	.reserveCardSm__date { margin-bottom:12px; font-size:32px; }
	.reserveCardSm__dateYear { font-size:20px; }
	.reserveCardSm__dateUnit { font-size:18px; }
	.reserveCardSm__dateWeek { font-size:18px; }
	.reserveCardSm__detail { padding:13px 16px; margin-bottom:15px; }
	.reserveCardSm__link { width:80%; font-size:14px; }
	.reserveCardSm__detailItem { font-size:12px; }

	/* ---------- 年度アコーディオン ---------- */
	.reserveList__accordion { margin-bottom:24px; }
	.reserveList__accordionHead { height:42px; padding:0 15px; font-size:14px; }
	.reserveList__accordionIcon { width:14px; height:14px; }
	.reserveList__accordionIcon::before,
	.reserveList__accordionIcon::after { width:14px; }
	.reserveList__accordionBody { padding-top:15px; }

	/* ---------- お役立ちメニュー ---------- */
	/* 4列は横幅が足りないため2列に切り替える */
	.reserveList__quick { gap:10px; }
	.reserveList__quickItem { width:calc(50% - 5px); }
	.reserveList__quickLink { height:150px; border-radius:10px; box-shadow:inset 0px -5px 0px 0px var(--shadow-15), 5px 5px 5px 0px var(--shadow-15); }
	.reserveList__quickIcon { flex:1; height:auto; margin:10px 10px 0; padding:5px; border-radius:5px; }
	.reserveList__quickIcon img { width:44px; height:44px; }
	.reserveList__quickText { padding:10px 8px 15px; font-size:15px; line-height:1.3; }

}