/* ==========================================================================
   学校マイページ - MenuArea リニューアル
   .mypageMenu 配下に完結する新規スタイル。既存の .MenuArea 系スタイルとは
   独立しているため、このファイル単体で表示を再現できる。

   【目次】
   ■ MenuArea リニューアル（.mypageMenu）
     1. ページ全体・タイトル
     2. 予約情報を確認する（大ボタン）
     3. セクション共通（見出し・リード文）
     4. ご利用日までの流れ（STEP1-5）
     5. お役立ちメニュー
     6. ログアウト
     7. スマートフォン用（736px 以下）
   ■ 営業日カレンダー（.bizCalendar）※ファイル後半
   ========================================================================== */

/* ---------- 1. ページ全体・タイトル ---------- */
.mypageMenu { padding:80px 0; background:var(--color-white); 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%; }
.mypageMenu__title { margin-bottom:80px; color:#0790F3; font-size:40px; font-weight:700; }

/* ---------- 2. 予約情報を確認する（大ボタン） ---------- */
.mypageMenu__cta { display:flex; align-items:center; height:400px; gap:20px; padding:20px 20px 30px; margin-bottom:80px; border-radius:20px; background:var(--color-blueocean-bg); /* 予約カードと同じ濃い青(単色) */ box-shadow:inset 0px -10px 0px 0px var(--shadow-15), 10px 10px 10px 0px var(--shadow-15); box-sizing:border-box; text-decoration:none; }
.mypageMenu__cta:hover img { opacity:1; }
.mypageMenu__ctaIcon { display:flex; align-items:center; justify-content:center; width:415px; height:100%; background:var(--shadow-10); border-radius:10px; }
.mypageMenu__ctaIcon img { width:240px; height:240px; }
.mypageMenu__ctaText { flex:1; display:flex; justify-content:center; font-size:80px; color:var(--color-white); font-weight:700; line-height:1.25; }

/* ---------- 3. セクション共通（見出し・リード文） ---------- */
.mypageMenu__section { margin-bottom:80px; }
.mypageMenu__heading { font-size:30px; margin-bottom:40px; }
.mypageMenu__heading::before { content:""; display:inline-block; width:24px; height:24px; border-radius:24px; background:var(--color-text); margin-right:.2em; }/* 見出し先頭の黒丸 */
.mypageMenu__lead { font-size:16px; line-height:2; margin-bottom:40px; }

/* ---------- 4. ご利用日までの流れ（STEP1-5） ---------- */
.mypageMenu__flow { display:flex; align-items:center; width:100%; }
.mypageMenu__flowStepItem { width:100%; height:160px; overflow:hidden; border:1px solid var(--color-blueocean-bg); background:var(--color-white); box-shadow:inset 0px -10px 0px 0px var(--color-blueocean-bg), 10px 10px 10px 0px var(--shadow-15); border-radius:20px; }
.mypageMenu__flowStep { text-decoration:none; padding:20px; display:flex; flex-direction:column; align-items:center; height:100%; box-sizing:border-box; }
.mypageMenu__flowBadge { background:var(--color-blueocean-bg); color:var(--color-white); font-size:14px; border-radius:10px; display:block; text-align:center; width:100%; height:30px; padding-top:5px; box-sizing:border-box; font-weight:500; }
.mypageMenu__flowBadgeNum { font-size:20px; margin-left:.2em; }
.mypageMenu__flowText { display:flex; align-items:center; justify-content:center; width:100%; flex:1; font-size:18px; color:var(--color-blueocean-bg); font-weight:700; line-height:1.25; }
.mypageMenu__flowArrow { padding:0 10px 10px; }
.mypageMenu__flowArrow img { width:30px; height:34px; }

.mypageMenu__flowBadge.lead { font-size:16px; line-height: 1; margin-left: 5px;margin-right: 5px; width:7em; display:inline-block; }
.mypageMenu__flowBadge.lead:first-child { margin-left: 0px; }
.mypageMenu__flowStepItem { overflow: visible; }
.mypageMenu__flowStepItem .flowGuide__itemMeta { margin-top:16px; }
.mypageMenu__flowText.lead { display:inline; width: auto; font-size:16px; color:var(--color-blueocean-bg); font-weight:700; line-height:1.25; }

/* ---------- 5. お役立ちメニュー（2列のカードボタン） ---------- */
.mypageMenu__quick { display:flex; flex-wrap:wrap; gap:20px; }
.mypageMenu__quickItem { width:calc(50% - 10px); box-sizing:border-box; }
.mypageMenu__quickLink { display:flex; flex-direction:column; height:310px; border-radius:20px; box-sizing:border-box; box-shadow:inset 0px -10px 0px 0px var(--shadow-15), 10px 10px 10px 0px var(--shadow-15); text-decoration:none; }
.mypageMenu__quickIcon { display:flex; align-items:center; justify-content:center; height:130px; flex:1; margin:20px 20px 0; padding:10px; box-sizing:border-box; border-radius:10px; background:var(--shadow-10); }
.mypageMenu__quickIcon img { width:100px; height:100px; }
.mypageMenu__quickText { flex:1; display:flex; align-items:center; justify-content:center; padding:24px 16px 34px; box-sizing:border-box; color:var(--color-white); font-size:48px; font-weight:700; text-align:center; }
.mypageMenu__quickLink:hover img { opacity:1; }

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

/* ---------- 6. ログアウト（グレーのカードボタン） ---------- */
.mypageMenu__logout { display:flex; flex-direction:column; width:260px; height:210px; margin:0 auto; border-radius:20px; box-sizing:border-box; background-image:linear-gradient(0deg, #646464, #727272); box-shadow:inset 0px -10px 0px 0px var(--shadow-15), 10px 10px 10px 0px var(--shadow-15); text-decoration:none; }
.mypageMenu__logoutIcon { display:flex; align-items:center; justify-content:center; height:130px; flex:1; margin:20px 20px 0; padding:10px; box-sizing:border-box; border-radius:10px; background:var(--shadow-10); }
.mypageMenu__logoutIcon img { width:60px; height:60px; }
.mypageMenu__logoutText { flex:1; display:flex; align-items:center; justify-content:center; padding:24px 16px 34px; box-sizing:border-box; color:var(--color-white); font-size:24px; font-weight:700; text-align:center; }
.mypageMenu__logout:hover img { opacity:1; }

/* ==========================================================================
   7. スマートフォン用（サイト共通のブレイクポイント 736px に合わせる）
   737px 以上は #container が固定幅 1100px のため、PC 用の指定をそのまま使う。
   ※ここから下は PC 用の値をスマホ向けに上書きしているだけ（項目の並びは上と同じ）
   ========================================================================== */
@media only screen and (max-width:736px) {

	/* ---------- ページ全体・タイトル ---------- */
	.mypageMenu { padding:30px 0; }
	.mypageMenu__title { margin-bottom:25px; font-size:20px; }

	/* ---------- 予約情報を確認する（大ボタン） ---------- */
	.mypageMenu__cta { height:130px; gap:10px; padding:10px 10px 15px; margin-bottom:40px; border-radius:10px; box-shadow:inset 0px -5px 0px 0px var(--shadow-15), 5px 5px 5px 0px var(--shadow-15); }
	.mypageMenu__ctaIcon { width:38%; border-radius:5px; }
	.mypageMenu__ctaIcon img { width:72px; height:72px; }
	.mypageMenu__ctaText { font-size:22px; }

	/* ---------- セクション共通（見出し・リード文） ---------- */
	.mypageMenu__section { margin-bottom:40px; }
	.mypageMenu__heading { margin-bottom:20px; font-size:18px; }
	.mypageMenu__heading::before { width:14px; height:14px; }
	.mypageMenu__lead { margin-bottom:20px; font-size:13px; line-height:1.8; }

	/* ---------- ご利用日までの流れ（STEP1-5） ---------- */
	/* 横5列だと潰れるため縦並びにし、矢印を下向きに回転する */
	.mypageMenu__flow { flex-direction:column; }
	.mypageMenu__flowStepItem { height:auto; border-radius:10px; box-shadow:inset 0px -5px 0px 0px var(--color-blueocean-bg), 5px 5px 5px 0px var(--shadow-15); }
	.mypageMenu__flowStep { flex-direction:row; align-items:center; gap:12px; height:auto; padding:12px 15px 17px; }
	.mypageMenu__flowBadge { flex-shrink:0; width:76px; height:24px; padding-top:4px; border-radius:6px; font-size:11px; }
	.mypageMenu__flowBadgeNum { font-size:15px; }
	.mypageMenu__flowText { justify-content:flex-start; width:auto; font-size:15px; text-align:left; }
	.mypageMenu__flowText br { display:none; }/* 横並びになるため改行を無効化 */
	.mypageMenu__flowArrow { padding:8px 0; transform:rotate(90deg); }
	.mypageMenu__flowArrow img { width:18px; height:20px; }

	.mypageMenu__flowBadge.lead { margin-left:5px; font-size:11px; }
	.mypageMenu__flowBadge.lead:first-child { margin-left: 0px; }
	.mypageMenu__flowStepItem { overflow: visible; }
	.mypageMenu__flowStepItem .flowGuide__itemMeta { margin-top: -6px; margin-bottom: 14px; margin-left: 16px; }
	.mypageMenu__flowText.lead { display:inline; width: auto; font-size:15px; }

	/* ---------- お役立ちメニュー ---------- */
	.mypageMenu__quick { gap:10px; }
	.mypageMenu__quickItem { width:calc(50% - 5px); }
	.mypageMenu__quickLink { height:150px; border-radius:10px; box-shadow:inset 0px -5px 0px 0px var(--shadow-15), 5px 5px 5px 0px var(--shadow-15); }
	.mypageMenu__quickIcon { height:auto; margin:10px 10px 0; padding:5px; border-radius:5px; }
	.mypageMenu__quickIcon img { width:44px; height:44px; }
	.mypageMenu__quickText { padding:10px 8px 15px; font-size:15px; line-height:1.3; }

	/* ---------- ログアウト ---------- */
	.mypageMenu__logout { width:180px; height:150px; border-radius:10px; box-shadow:inset 0px -5px 0px 0px var(--shadow-15), 5px 5px 5px 0px var(--shadow-15); }
	.mypageMenu__logoutIcon { height:auto; margin:10px 10px 0; padding:5px; border-radius:5px; }
	.mypageMenu__logoutIcon img { width:44px; height:44px; }
	.mypageMenu__logoutText { padding:10px 8px 15px; font-size:18px; }

}


/* ==========================================================================
   学校マイページ - 営業日カレンダー
   .bizCalendar 配下に完結する静的スタイル。年月・日付・休館日はマークアップに
   直接記述しているため、月送りや日付の出し分けは別途実装が必要。

   【目次】
   1. カレンダー全体の枠
   2. 年月の切り替え（前月・翌月ボタン）
   3. カレンダー本体（表・日付）
   4. 休業日マーク・休館日バッジ
   5. 凡例
   6. カレンダー下の注記
   7. スマートフォン用（736px 以下）
   ========================================================================== */

/* ---------- 1. カレンダー全体の枠 ---------- */
.bizCalendar { padding:40px 50px 45px; border:1px solid #D5D5D5; border-radius:20px; background:var(--color-white); box-sizing:border-box; }

/* ---------- 2. 年月の切り替え（前月・翌月ボタン） ---------- */
.bizCalendar__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:45px; }
/* 前月・翌月ボタンは月によって文字数が変わるため、最も広い「12月」に合わせて幅を固定する */
.bizCalendar__nav { display:inline-flex; align-items:center; justify-content:center; gap:.5em; width:150px; height:64px; padding:0 26px; border:1px solid var(--color-text); border-radius:999px; background:var(--color-white); box-sizing:border-box; color:var(--color-text); font-family:inherit; font-size:24px; font-weight:500; line-height:1; cursor:pointer; }
.bizCalendar__nav:hover { background:var(--color-bg-gray); }
.bizCalendar__navArrow { display:block; width:14px; height:14px; border-top:2px solid var(--color-text); border-right:2px solid var(--color-text); }
.bizCalendar__nav.-prev .bizCalendar__navArrow { transform:rotate(-135deg); }
.bizCalendar__nav.-next .bizCalendar__navArrow { transform:rotate(45deg); }
.bizCalendar__nav.-prev, .bizCalendar__nav.-next {text-decoration: none;}
.bizCalendar__title { display:flex; align-items:baseline; color:#000; font-weight:700; line-height:1; }
.bizCalendar__year { font-size:36px; }
.bizCalendar__month { margin-left:.1em; font-size:60px; }
.bizCalendar__year .bizCalendar__unit { font-size:24px; }
.bizCalendar__month .bizCalendar__unit { font-size:32px; }

/* ---------- 3. カレンダー本体（表・日付） ---------- */
.bizCalendar__table { width:100%; border-collapse:collapse; table-layout:fixed; }
.bizCalendar__weekday { padding-bottom:22px; color:var(--color-gray); font-size:30px; font-weight:700; line-height:1; text-align:center; }
.bizCalendar__cell { position:relative; height:70px; padding:12px 16px; border:1px solid #C8C8C8; background:var(--color-white); vertical-align:top; }
.bizCalendar__day { color:var(--color-text); font-size:30px; font-weight:400; line-height:1; }
.bizCalendar__day.-red { color:#FA5064; }/* 日曜・祝日の日付 */
.bizCalendar__day.-blue { color:#3BB9F5; }/* 土曜の日付 */
.bizCalendar__day.-blue.-red { color:#FA5064; }/* 土曜日かつ祝日 */

/* 休業日（土日祝） */
.bizCalendar__cell.-closed { background:#EFEFEF; }
/* 当月外（前月・翌月） */
.bizCalendar__cell.-other { background:#C9C9C9; }
.bizCalendar__cell.-other .bizCalendar__day { color:#A6A6A6; }

/* ---------- 4. 休業日マーク・休館日バッジ ---------- */
.bizCalendar__mark { display:inline-block; width:26px; height:4px; border-radius:2px; background:#8C8C8C; vertical-align:middle; }
.bizCalendar__cell .bizCalendar__mark { position:absolute; left:0; right:0; bottom:16px; margin:0 auto; }
.bizCalendar__badge { display:inline-flex; align-items:center; justify-content:center; height:32px; padding:0 14px; border-radius:999px; background:#0790F3; color:var(--color-white); font-size:18px; font-weight:700; line-height:1; white-space:nowrap; }
/* 列幅が狭いと折り返すため、セル幅いっぱいを使って中央寄せする */
.bizCalendar__cell .bizCalendar__badge { position:absolute; left:0; right:0; bottom:10px; width:fit-content; margin:0 auto; }

/* ---------- 5. 凡例（カレンダー下の色の説明） ---------- */
.bizCalendar__legend { display:flex; align-items:center; gap:36px; margin-top:32px; padding-left:8px; list-style:none; }
.bizCalendar__legendItem { display:inline-flex; align-items:center; gap:10px; color:var(--color-text); font-size:18px; line-height:1; }
.bizCalendar__legendBox { display:block; width:20px; height:20px; border:1px solid var(--color-gray); background:var(--color-white); }

/* ---------- 6. カレンダー下の注記（・付きのリスト） ---------- */
.bizCalendar__notes { margin-top:30px; list-style:none; }
.bizCalendar__notesItem { position:relative; padding-left:1em; color:var(--color-text); font-size:20px; line-height:1.8; }
.bizCalendar__notesItem::before { content:"・"; position:absolute; left:0; }
.bizCalendar__notesSub { font-size:16px; }
.bizCalendar__notesItem.-spOnly { display:none; }/* SP のみ表示（「休：休館日」の説明） */

/* 画面には出さず読み上げにのみ渡すテキスト */
.bizCalendar__srOnly { position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

/* ---------- 7. スマートフォン用（736px 以下） ----------
   PC 用の値をスマホ向けに上書きしているだけ（項目の並びは上と同じ） */
@media only screen and (max-width:736px) {
	.bizCalendar { padding:20px 15px 25px; border-radius:10px; }
	.bizCalendar__head { margin-bottom:20px; }
	.bizCalendar__nav { width:70px; height:34px; padding:0 10px; gap:.3em; font-size:13px; }
	.bizCalendar__navArrow { width:8px; height:8px; border-width:1px; }
	.bizCalendar__year { font-size:18px; }
	.bizCalendar__month { font-size:30px; }
	.bizCalendar__year .bizCalendar__unit { font-size:12px; }
	.bizCalendar__month .bizCalendar__unit { font-size:16px; }
	.bizCalendar__weekday { padding-bottom:10px; font-size:14px; }
	.bizCalendar__cell { height:48px; padding:6px 6px; }
	.bizCalendar__day { font-size:15px; }
	.bizCalendar__mark { width:14px; height:3px; }
	.bizCalendar__cell .bizCalendar__mark { bottom:8px; }
	/* セル幅が狭いため「休」の一文字だけを表示する（説明は下の注記に記載） */
	.bizCalendar__badgeSub { display:none; }
	.bizCalendar__badge { height:18px; padding:0 5px; font-size:11px; }
	.bizCalendar__cell .bizCalendar__badge { bottom:5px; }
	.bizCalendar__notesItem.-spOnly { display:block; }
	.bizCalendar__legend { flex-wrap:wrap; gap:8px 16px; margin-top:18px; padding-left:0; }
	.bizCalendar__legendItem { gap:6px; font-size:12px; }
	.bizCalendar__legendBox { width:14px; height:14px; }
	.bizCalendar__notes { margin-top:18px; }
	.bizCalendar__notesItem { font-size:13px; }
	.bizCalendar__notesSub { font-size:11px; }
}