/* ==========================================================================
   学校マイページ - ご利用の流れ
   .flowGuide 配下に完結する新規スタイル。このファイル単体で表示を再現できる。

   【目次】
   1. ページ全体・リンク・ページ見出し
   2. ステップの並び（左の番号と縦ライン）
   3. ステップカード（枠・ヘッダー・本文）
   4. STEP1：リンクボタンと注意ボックス
   5. STEP2：期日タイムライン
   6. STEP3〜5：アイコン付きの行・提出締切アラート
   7. 学校マイページに戻る
   8. 箇条書き・小見出し・時間ラベル（GREEN SPRINGS 版で追加した部品）
   9. GREEN SPRINGS 用の色切り替え（.flowGuide に .-greensprings を付ける）
   10. スマートフォン用（736px 以下）
   ========================================================================== */

/* ---------- 1. ページ全体・リンク ---------- */
.flowGuide { padding:80px 0 100px; 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%; background:url(/school/static/25/images/mypage/bg-head.png) 0 0 no-repeat; background-size:100% auto; }
.flowGuide a { color:inherit; }
.flowGuide__link { color:#0790F3; text-decoration:underline; }
.flowGuide__link:hover { opacity:.8; }

/* ページ見出し */
.flowGuide__title { margin-bottom:30px; color:var(--color-flow); font-size:30px; font-weight:600; text-align:center; }
.flowGuide__title::after { content:""; display:block; width:44px; height:4px; margin:20px auto 0; background:var(--color-flow); }
.flowGuide__lead { margin-bottom:80px; font-size:20px; font-weight:600; text-align:center; }


/* ==========================================================================
   2. ステップの並び（左の番号と縦ライン）
   ========================================================================== */
.flowGuide__steps { margin:0; padding:0; list-style:none; }
.flowGuide__step { position:relative; display:flex; align-items:flex-start; gap:40px; padding-bottom:70px; scroll-margin-top:131px; }
.flowGuide__step:last-child { padding-bottom:0; }
/* 番号同士をつなぐ縦ライン（最後のステップには引かない） */
.flowGuide__step:not(:last-child)::before { content:""; position:absolute; left:33px; top:33px; height:100%; width:4px; background:var(--color-flow); }
.flowGuide__stepNum { position:relative; z-index:1; flex-shrink:0; display:flex; align-items:center; justify-content:center; width:70px; height:70px; margin-top:12px; border-radius:50%; background:var(--color-flow); color:var(--color-white); font-size:40px; font-weight:700; }

/* ==========================================================================
   3. ステップカード（枠・ヘッダー・本文）
   ========================================================================== */
.flowGuide__card { flex:1; min-width:0; border-radius:16px; background:var(--color-white); box-shadow:0 4px 14px var(--shadow-10); overflow:hidden; }
.flowGuide__cardHead { display:flex; align-items:center; gap:20px; min-height:100px; padding:0 40px; background:var(--color-flow); box-sizing:border-box; }
.flowGuide__stepBadge { display:flex; align-items:center; justify-content:center; flex-shrink:0; height:40px; padding:0 20px; border-radius:999px; background:var(--color-white); color:var(--color-flow); font-size:20px; font-weight:700; }
.flowGuide__cardTitle { color:var(--color-white); font-size:40px; font-weight:700; }
.flowGuide__cardBody { padding:36px 40px 40px; }

/* ==========================================================================
   4. STEP1：リンクボタンと注意ボックス
   ========================================================================== */
.flowGuide__text { margin-bottom:40px; font-size:20px; line-height:1.5; font-weight:600; }
.flowGuide__btns { display:flex; flex-wrap:wrap; gap:20px; margin:0 0 40px; padding:0; list-style:none; }
.flowGuide__btns > li { width:calc(50% - 10px); box-sizing:border-box; }
.flowGuide__btn { position:relative; display:flex; align-items:center; height:70px; padding:0 48px 4px 24px; border:1px solid var(--color-flow-sub); border-radius:4px; background:var(--color-white); box-shadow:inset 0px -4px 0px 0px var(--color-flow-sub), 3px 3px 4px var(--shadow-15); box-sizing:border-box; color:var(--color-flow-sub); font-size:24px; font-weight:600; text-decoration:none; color:var(--color-flow-sub) !important; }
.flowGuide__btn::after { content:""; position:absolute; right:22px; top:50%; width:9px; height:9px; margin-top:-8px; border-top:3px solid #6978FB; border-right:3px solid #6978FB; transform:rotate(45deg); }
.flowGuide__btn:hover { background:#F5F7FF; }

/* 注意ボックス（児童・生徒／引率教員） */
.flowGuide__notice { display:flex; align-items:center; gap:40px; padding:20px; margin-bottom:20px; }
.flowGuide__notice:last-child { margin-bottom:0; }
.flowGuide__notice.-blue { background:#E7F3FB; }
.flowGuide__notice.-pink { background:#FBE9EC; }
.flowGuide__noticeLabel { flex-shrink:0; display:flex; align-items:center; gap:20px; width:200px; font-size:19px; font-weight:600; line-height:1.4; }
.flowGuide__noticeIcon { flex-shrink:0; width:50px; height:50px; }
.flowGuide__noticeIcon img { width:100%; height:100%; }
.flowGuide__notice.-blue .flowGuide__noticeIcon { color:#0BA0EF; }
.flowGuide__notice.-pink .flowGuide__noticeIcon { color:#E8506B; }
.flowGuide__noticeList { margin:0; padding:0; list-style:none; font-size:16px; line-height:2; position:relative; }
.flowGuide__noticeList::after { content:""; display:block; background:var(--color-border); width:1px; height:100%; position:absolute; top:0; left:-20px; }

/* ==========================================================================
   5. STEP2：期日タイムライン（左に丸と縦線、黄色いラベルが期日）
   ========================================================================== */
.flowGuide__timeline { position:relative; margin:0; padding:0 0 0 40px; list-style:none; }
.flowGuide__timeline::before { content:""; position:absolute; left:2px; top:44px; bottom:44px; width:2px; background:var(--color-flow); }
.flowGuide__timelineItem { position:relative; display:flex; align-items:center; gap:40px; padding:20px 0; border-bottom:1px solid #EDEDED; }
.flowGuide__timelineItem:last-child { border-bottom:none; }
.flowGuide__timelineItem::before { content:""; position:absolute; left:-46px; top:50%; width:9px; height:9px; margin-top:-7px; border:5px solid var(--color-flow); border-radius:50%; background:var(--color-white); }
.flowGuide__timelineLabel { flex-shrink:0; width:240px; padding:16px 10px; border-radius:4px; background:#FCF2B4; font-size:20px; font-weight:600; text-align:center; box-sizing:border-box; color:var(--color-flow); }
.flowGuide__timelineBody { flex:1; min-width:0; position:relative; }
.flowGuide__timelineBody::after { content:""; display:block; background:var(--color-border); width:1px; height:100%; position:absolute; top:0; left:-20px; }

/* タイムライン・アイコン付きの行で共通の本文（タイトル・補足・リンク） */
.flowGuide__itemTitle { font-size:16px; font-weight:600; line-height:1.6; width:100%; }
.flowGuide__note { margin-top:4px; font-size:14px; font-weight:400; line-height:1.6; }
.flowGuide__link { color:var(--color-flow) !important; }
.flowGuide__note.w100p { width:100%; }

/* ==========================================================================
   6. STEP3〜5：アイコン付きの行・提出締切アラート
   ========================================================================== */
.flowGuide__items { margin:0; padding:0; list-style:none; }
.flowGuide__item { display:flex; align-items:center; align-items:stretch; gap:40px; padding:24px 0; border-bottom:1px solid #E7E7E7; }
.flowGuide__item:first-child { padding-top:6px; }
.flowGuide__item:last-child { padding-bottom:6px; border-bottom:none; }
.flowGuide__itemLabel { flex-shrink:0; display:flex; align-items:center; gap:16px; width:320px; color:var(--color-flow); font-size:20px; font-weight:600; line-height:1.5; }
.flowGuide__itemIcon { flex-shrink:0; display:flex; align-items:center; justify-content:center; width:50px; height:50px; }
.flowGuide__itemIcon img { width:100%; height:100%; }
.flowGuide__itemIcon.-num { font-size:34px; font-weight:700; }
/* 項目名の下に「必須」ラベルと期限を添える（GREEN SPRINGS：行程確認書の提出）。「必須」は予約フォームの赤枠ラベルと同じ見た目 */
.flowGuide__itemText { display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.flowGuide__itemMeta { display:flex; align-items:center; gap:8px; color:var(--color-danger); font-size:15px; font-weight:600; line-height:1.4; }
.flowGuide__must { display:inline-block; padding:0 6px; border:1px solid var(--color-danger); border-radius:3px; background:var(--color-white); color:var(--color-danger); font-size:12px; font-weight:600; line-height:1.6; }
.flowGuide__itemBody { flex:1; min-width:0; position:relative; display:flex; flex-wrap:wrap; align-items:center; text-align:left; }
.flowGuide__itemBody::after { content:""; display:block; background:var(--color-border); width:1px; height:100%; position:absolute; top:0; left:-20px; }

/* 提出締切アラート */
.flowGuide__alert { display:flex; align-items:center; gap:16px; margin-top:24px; padding:8px 40px; border-radius:4px; background:#FEE1E1; color:#FF0000; font-size:20px; font-weight:600; }
.flowGuide__alertIcon { flex-shrink:0; display:flex; width:40px; height:40px; }
.flowGuide__alertIcon img { width:100%; height:100%; }

/* ==========================================================================
   7. 学校マイページに戻る（ページ下部のグレーのボタン）
   ========================================================================== */
.flowGuide__back { display:flex; align-items:center; justify-content:center; gap:16px; width:400px; height:64px; margin:80px auto 0; border-radius:5px; background:#9E9E9E; box-shadow:inset 0px -2px 0px 0px var(--shadow-25); box-sizing:border-box; color:var(--color-white) !important; font-size:20px; font-weight:600; text-decoration:none; }
.flowGuide__backIcon { flex-shrink:0; display:flex; width:26px; }
.flowGuide__backIcon svg { width:100%; height:auto; }
.flowGuide__back:hover { opacity:.85; }


/* ==========================================================================
   8. 箇条書き・小見出し・時間ラベル（GREEN SPRINGS 版で追加した部品）
   ========================================================================== */
/* 行の本文の中の箇条書き（「・」は .Mark で1文字分ぶら下げる） */
.flowGuide__list { width:100%; margin:0; padding:0; list-style:none; font-size:16px; font-weight:600; line-height:1.6; }
.flowGuide__list > li { margin-top:6px; }
.flowGuide__list > li:first-child { margin-top:0; }
.flowGuide__list .flowGuide__note { margin-top:2px; padding-left:1em; }
/* 注意ボックスの中の箇条書きに補足（※）が付く場合 */
.flowGuide__noticeList .flowGuide__note { margin-top:0; padding-left:1em; line-height:1.6; }

/* 棟名の色付け（施設概要の「E1-4F」「W2-3F」）。色は tokens.css のロゴ色 */
.flowGuide__bldg.-red { color:var(--color-logo-red); }
.flowGuide__bldg.-blue { color:var(--color-logo-blue); }

/* カード内の小見出し（「館内での過ごし方」「キャンセルポリシー」など） */
.flowGuide__subhead { display:flex; align-items:center; gap:12px; margin:32px 0 16px; color:var(--color-flow); font-size:20px; font-weight:600; line-height:1.5; }
.flowGuide__subhead::before { content:""; flex-shrink:0; display:block; width:6px; height:24px; border-radius:3px; background:var(--color-flow); }
.flowGuide__items + .flowGuide__subhead { margin-top:28px; padding-top:28px; border-top:1px solid #E7E7E7; }

/* タイムラインの下に置く補足（※） */
.flowGuide__note.-block { margin-top:12px; padding-left:40px; }

/* 時間のラベル（入館時間・体験終了時間） */
.flowGuide__times { display:flex; flex-wrap:wrap; gap:8px 12px; width:100%; margin:10px 0 0; padding:0; list-style:none; }
.flowGuide__times > li { display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border:1px solid var(--color-flow); border-radius:999px; font-size:14px; font-weight:600; line-height:1.4; }
.flowGuide__times > li b { color:var(--color-flow); font-size:16px; }
.flowGuide__times + .flowGuide__note { margin-top:10px; }

/* 注釈の色付け */
.flowGuide__note.-red { color:var(--color-logo-red); }
.flowGuide__itemTitle > .Mark.flowGuide__note { margin-left:8px; }

/* ==========================================================================
   9. GREEN SPRINGS 用の色切り替え
   .flowGuide に .-greensprings を付けると、青紫の部分が tokens.css の緑に切り替わる
   （ページ見出し・番号・縦ライン・カードヘッダー・リンク・タイムラインなど）
   ========================================================================== */
.flowGuide.-greensprings { --color-flow:var(--color-flow-green); --color-flow-sub:var(--color-flow-sub-green); background-image:url(/school/static/25/images/mypage/bg-head-green.png); }
.flowGuide.-greensprings .flowGuide__btn::after { border-color:var(--color-flow-sub-green); }
.flowGuide.-greensprings .flowGuide__btn:hover { background:var(--color-flow-bg-green); }
/* 注意ボックスの緑版（児童・生徒） */
.flowGuide__notice.-green { background:var(--color-flow-bg-green); }
.flowGuide__notice.-green .flowGuide__noticeIcon { color:var(--color-flow-green); }


/* ==========================================================================
   9-2. オーバーレイ（.flowModal）— 「こちら」を押すと画面の上に重ねて表を表示する
   開閉は school/static/25/js/flow-guide.js。開いている間は .is-open が付く
   ========================================================================== */
.flowModal { display:none; position:fixed; inset:0; z-index:10000; align-items:center; justify-content:center; padding:24px; box-sizing:border-box; }
.flowModal.is-open { display:flex; }
.flowModal__overlay { position:absolute; inset:0; background:var(--shadow-50); cursor:pointer; }
.flowModal__dialog { position:relative; width:100%; max-width:720px; max-height:calc(100vh - 48px); overflow:auto; padding:40px 40px 32px; border-radius:8px; background:var(--color-white); box-shadow:0 8px 32px var(--shadow-25); box-sizing:border-box; }
.flowModal__close { position:absolute; top:12px; right:12px; display:flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; border:none; border-radius:50%; background:transparent; color:var(--color-text-sub); font-size:28px; line-height:1; cursor:pointer; }
.flowModal__close:hover { background:var(--color-bg-gray); }
.flowModal__title { display:flex; align-items:center; gap:12px; margin:0 0 20px; color:var(--color-flow); font-size:20px; font-weight:600; line-height:1.5; }
.flowModal__title::before { content:""; flex-shrink:0; display:block; width:6px; height:24px; border-radius:3px; background:var(--color-flow); }
.flowModal__tableWrap { overflow-x:auto; }
.flowModal__table { width:100%; border-collapse:collapse; font-size:16px; line-height:1.5; text-align:center; }
.flowModal__table th, .flowModal__table td { padding:12px 8px; border:1px solid var(--color-border-light); }
.flowModal__table thead th { background:var(--color-flow); color:var(--color-white); font-weight:600; }
.flowModal__table tbody th { width:22%; background:var(--color-bg-gray); font-weight:600; }
.flowModal__table tbody td { font-weight:600; color:var(--color-flow); font-size:18px; }
.flowModal__table .red { color:red; }
.flowModal__note { margin:16px 0 0; color:var(--color-text-sub); font-size:14px; line-height:1.6; }
.flowModal__note.-tight { margin-top:2px; }
/* 設備の一覧（項目と○×のマス目。PC は3列、スマホは2列。空きマスはスマホでは出さない） */
.flowModal__facility { display:grid; grid-template-columns:repeat(3, 1fr); margin:0; padding:0; list-style:none; border-top:1px solid var(--color-border-light); border-left:1px solid var(--color-border-light); }
.flowModal__facility > li { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:52px; padding:10px 14px; border-right:1px solid var(--color-border-light); border-bottom:1px solid var(--color-border-light); box-sizing:border-box; font-size:15px; font-weight:600; line-height:1.4; }
.flowModal__facilityMark { flex-shrink:0; color:var(--color-flow); font-size:20px; line-height:1; }
.flowModal__facilityMark small { font-size:14px; }
.flowModal__facilityMark.-ng { color:var(--color-danger); }
.flowGuide.-greensprings ~ .flowModal, .flowModal.-greensprings { --color-flow:var(--color-flow-green); }
body.is-modalOpen { overflow:hidden; }

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

	.flowGuide { padding:40px 0 60px; }
	.flowGuide__title { margin-bottom:16px; font-size:22px; }
	.flowGuide__title::after { width:36px; height:3px; margin-top:14px; }
	.flowGuide__lead { margin-bottom:40px; font-size:14px; }

	/* ---------- ステップの並び ---------- */
	/* スマホでは左の番号・縦ラインは表示しない */
	.flowGuide__step { gap:0; padding-bottom:30px; scroll-margin-top:40px; }
	.flowGuide__step:not(:last-child)::before { display:none; }
	.flowGuide__stepNum { display:none; }

	/* ---------- ステップカード ---------- */
	.flowGuide__card { border-radius:10px; }
	.flowGuide__cardHead { flex-wrap:wrap; gap:10px; min-height:52px; padding:10px 14px; }
	.flowGuide__stepBadge { height:26px; padding:0 12px; font-size:12px; }
	.flowGuide__cardTitle { font-size:17px; line-height:1.3; }
	.flowGuide__cardBody { padding:20px 14px 22px; }

	/* ---------- STEP1 ---------- */
	.flowGuide__text { margin-bottom:20px; font-size:14px; }
	.flowGuide__btns { gap:10px; margin-bottom:24px; }
	.flowGuide__btns > li { width:100%; }
	.flowGuide__btn { height:52px; padding:0 36px 3px 14px; font-size:15px; }
	.flowGuide__btn::after { right:14px; width:7px; height:7px; margin-top:-6px; border-width:2px; }

	/* 注意ボックスは縦積みにし、ラベルと本文の間の縦線は非表示にする */
	.flowGuide__notice { flex-direction:column; align-items:flex-start; gap:12px; padding:16px 14px; margin-bottom:12px; }
	.flowGuide__noticeLabel { width:auto; gap:10px; font-size:15px; }
	.flowGuide__noticeIcon { width:34px; height:34px; }
	.flowGuide__noticeList { font-size:13px; line-height:1.8; }
	.flowGuide__noticeList::after { display:none; }

	/* ---------- STEP2 ---------- */
	.flowGuide__timeline { padding-left:24px; }
	/* 項目ごとの高さが変わるため、1本線ではなく「丸から次の丸まで」を項目ごとに引く
	   （最後の丸の下に線が突き抜けないようにするため） */
	.flowGuide__timeline::before { display:none; }
	.flowGuide__timelineItem:not(:last-child)::after { content:""; position:absolute; left:-22px; top:37px; bottom:-24px; width:2px; background:var(--color-flow); }
	.flowGuide__timelineItem { flex-direction:column; align-items:flex-start; gap:10px; padding:14px 0; }
	.flowGuide__timelineItem::before { left:-28px; top:24px; width:7px; height:7px; margin-top:0; border-width:3px; }
	.flowGuide__timelineLabel { width:auto; padding:8px 16px; font-size:14px; }
	.flowGuide__timelineBody::after { display:none; }
	.flowGuide__itemTitle { font-size:14px; }
	.flowGuide__note { font-size:12px; }

	/* ---------- STEP3〜5（行は縦積みにし、縦線は非表示にする） ---------- */
	.flowGuide__item { flex-direction:column; align-items:flex-start; gap:8px; padding:14px 0; }
	.flowGuide__item:first-child { padding-top:2px; }
	.flowGuide__item:last-child { padding-bottom:2px; }
	.flowGuide__itemLabel { width:100%; gap:10px; font-size:15px; }
	.flowGuide__itemIcon { width:30px; height:30px; }
	.flowGuide__itemIcon.-num { font-size:24px; }
	.flowGuide__itemText { gap:4px; }
	.flowGuide__itemMeta { font-size:13px; }
	.flowGuide__must { font-size:11px; }
	.flowGuide__itemBody { width:100%; }
	.flowGuide__itemBody::after { display:none; }

	/* 提出締切アラート */
	.flowGuide__alert { gap:10px; margin-top:16px; padding:10px 14px; font-size:14px; line-height:1.5; }
	.flowGuide__alertIcon { width:26px; height:26px; }

	/* ---------- 戻るボタン ---------- */
	.flowGuide__back { gap:14px; width:100%; max-width:400px; height:52px; margin-top:40px; font-size:16px; }
	.flowGuide__backIcon { width:20px; }

	/* ---------- 箇条書き・小見出し・時間ラベル ---------- */
	.flowGuide__list { font-size:14px; }
	.flowGuide__list > li { margin-top:4px; }
	.flowGuide__subhead { gap:8px; margin:20px 0 10px; font-size:15px; }
	.flowGuide__subhead::before { width:4px; height:18px; }
	.flowGuide__items + .flowGuide__subhead { margin-top:16px; padding-top:16px; }
	.flowGuide__note.-block { margin-top:8px; padding-left:24px; }
	.flowModal { padding:16px; }
	.flowModal__dialog { max-height:calc(100vh - 32px); padding:44px 16px 20px; }
	.flowModal__title { margin-bottom:14px; font-size:16px; }
	.flowModal__title::before { height:20px; }
	.flowModal__table { table-layout:fixed; font-size:12px; }
	.flowModal__table th, .flowModal__table td { padding:8px 2px; }
	.flowModal__table thead th { font-size:11px; }
	.flowModal__table tbody th { width:auto; }
	.flowModal__table tbody td { font-size:14px; }
	.flowModal__table .red { color:red; }
	.flowModal__note { margin-top:12px; font-size:12px; }
	.flowModal__facility { grid-template-columns:repeat(2, 1fr); }
	.flowModal__facility > li { min-height:44px; padding:8px 10px; font-size:13px; }
	.flowModal__facility > li.-empty { display:none; }
	.flowModal__facilityMark { font-size:18px; }
	.flowGuide__times { gap:6px 8px; margin-top:8px; }
	.flowGuide__times > li { gap:6px; padding:4px 10px; font-size:12px; }
	.flowGuide__times > li b { font-size:14px; }

}