@charset "UTF-8";
/*--------------------------------------------------
   申込フォーム（レイアウト hangaku_sub_main の 6 画面）だけの見た目（T-06L）

   2026-09-30 に届いたデザイン見本から、見た目だけを採った。
   このファイルは hangaku_sub_main だけが読む。募集ページ・固定ページには効かない。
   枠の色は確定チラシ（差し替え版）の枠の色：生徒・学生＝紺 #2f4f8f、高齢者・障がい者＝橙 #e8703a。
   文字は地の色との明るさの比が 4.5:1 以上になる色にする（橙は文字には薄いので、濃い橙 #a64b14 を使う）
 --------------------------------------------------*/

/* 進み具合（1 確認事項 ▶ 2 申込者情報 ▶ …）
----------------------------------------------------*/
.form_steps {
list-style: none;
margin: 0 0 16px 0;
padding: 0;
font-size: 13px;
line-height: 1.8;
color: #555;
text-align: center;
}
.form_steps li {
display: inline;
}
.form_steps li + li::before {
content: "▶";
/* 区切りの印は読み上げない（2 行目を知らないブラウザは 1 行目を使う） */
content: "▶" / "";
margin: 0 .4em;
color: #555;
font-weight: normal;
}
.form_steps li[aria-current="step"] {
color: #0076b5;
font-weight: bold;
}

/* 募集期間・応募条件の案内（規約同意の画面）
----------------------------------------------------*/
.form_period {
border: solid 2px #0076b5;
border-radius: 10px;
background: #fff;
padding: 10px 14px;
margin: 0 0 20px 0;
text-align: left;
font-size: 14px;
line-height: 1.7;
}
.form_period_item + .form_period_item {
border-top: dashed 1px #9cc3dc;
margin: 8px 0 0 0;
padding: 8px 0 0 0;
}
.form_period .error {
color: #c00000;
margin-left: .5em;
}
/* 障がいのある生徒・学生の申込先の注記（県の修正依頼 2026-10-01。区分の並びの下に 1 つ） */
.form_period_note {
border-top: dashed 1px #9cc3dc;
margin: 8px 0 0 0;
padding: 8px 0 0 0;
}

/* 募集バナー（T-06M。partials/form_banner）：toplayout.css が「.top-schedule img { width: 70% !important; }」で
   固定している。スマホ幅は縦型の画像に切り替わるので、広く見せる（上書きにも !important が要る）
----------------------------------------------------*/
@media screen and (max-width: 767px) {
.top-schedule .form_banner img {
width: 92% !important;
}
}

/* 区分の選択（カード）。スマホ幅は縦に、それより広い幅は横に並べる
----------------------------------------------------*/
.kind_select {
display: flex;
flex-direction: column;
gap: 10px;
margin: 0 0 6px 0;
}
@media screen and (min-width: 768px) {
.kind_select {
flex-direction: row;
}
.kind_card {
flex: 1;
}
}
.kind_card {
display: block;
border: solid 3px #bbb;
border-radius: 12px;
padding: 12px 14px;
background: #fff;
cursor: pointer;
}
/* キーボードで選んでいるカードが分かるように（中のラジオは小さい）。
   タップやクリックでは出さない（区分の色の枠と二重になる）。:has を知らないブラウザでは、ラジオ自身の枠だけが出る */
.kind_card:has(.monitor_type:focus-visible) {
outline: 3px solid #0076b5;
outline-offset: 2px;
}
.kind_title {
font-size: 18px;
font-weight: bold;
color: #0076b5;
}
.kind_text {
display: block;
font-size: 13px;
line-height: 1.6;
margin: 4px 0 0 0;
color: #333;
}
.kind_card_1 .kind_title {
color: #2f4f8f;
}
.kind_card_2 .kind_title {
color: #a64b14;
}
/* 選んだカード。区分の色が無い区分（3 つ目以降が増えたとき）は青で強調する */
.kind_card.kind_on {
border-color: #0076b5;
background: #f3f9fd;
}
.kind_card_1.kind_on {
border-color: #2f4f8f;
background: #eef2fb;
}
.kind_card_2.kind_on {
border-color: #e8703a;
background: #fff3ec;
}
/* 締切を過ぎた区分。「受付は終了しました」は読めるように、薄くせず地の色で示す。
   選んでいた区分でも強調はしない（印 kind_on はサーバも JS も付けない。枠の色はここで固定する） */
.kind_card.kind_closed {
border-color: #ccc;
background: #f0f0f0;
cursor: not-allowed;
}
.kind_card.kind_closed .kind_title,
.kind_card.kind_closed .kind_text {
color: #595959;
}
.kind_card .error {
display: block;
margin: 4px 0 0 0;
}
.kind_card.kind_closed .error {
color: #c00000;
}

/* 選べない選択肢（質問３。選んだ区分で選べないものは薄くして、選べなくする）
----------------------------------------------------*/
.option_off {
opacity: .4;
}

/* 補足の小さい文字 */
.form_note {
font-size: 12px;
color: #555;
}

/* 区分ごとの欄の見出し（❶・❷。チラシの申込書の色。橙は白い文字が読めるように濃くしてある）
----------------------------------------------------*/
.block_head {
color: #fff;
font-size: 17px;
font-weight: bold;
text-align: left;
padding: 8px 12px;
border-radius: 6px;
margin: 20px 0 12px 0;
}
.block_head_student {
background: #2f4f8f;
}
/* 区画の見出しのすぐ下の注記（T-06P。❶ の「購入場所は事務局より指定する可能性があります」） */
.block_note {
text-align: left;
font-size: 14px;
line-height: 1.6;
margin: -4px 0 8px 0;
}
/* 乗車区間の上の案内（県の修正依頼 2026-10-01。乗り継ぎは 3 つまで） */
.route_note {
font-size: 14px;
line-height: 1.6;
margin: 0;
}
.block_head_senior {
background: #b8510f;
}

/* 区分ごとの欄は、JS が動くときだけ初めに隠す（入力画面の先頭で html に js の印を付ける）。
   JS が選んだ区分の欄を出す。JS が動かない端末では、両方とも出したままにする */
.js .block_student,
.js .block_senior,
.js .block_bank {
display: none;
}

/* 半分の幅の入力欄（乗車区間・コード・口座番号） */
.ui-45-width {
width: 45%;
min-width: 130px;
box-sizing: border-box;
}

/* 完了の画面の応募番号
----------------------------------------------------*/
.application_no {
text-align: center;
margin: 0 0 20px 0;
}
.application_no_value {
display: inline-block;
font-size: 44px;
font-weight: bold;
letter-spacing: 4px;
color: #0076b5;
border: solid 3px #0076b5;
border-radius: 12px;
padding: 6px 26px;
margin: 4px;
background: #f3f9fd;
}

/* 枠の下の余白（枠が下の帯やフッターにくっつかないように）。
   70px の隙間 ＋ 帯の高さ。帯はこの余白の上に重なる
----------------------------------------------------*/
.top-schedule {
padding-bottom: 150px;
}
@media screen and (max-width: 767px) {
.top-schedule {
padding-bottom: 136px;
}
}

/* バスが走る帯：背景の模様の上をそのまま走る版。
   白い帯 moving-bus-stage2（sublayout.css）と同じ作りで、背景を透明にし、
   自分の高さぶん上へずらして、模様のある区画（.top-schedule）の下端に重ねる
----------------------------------------------------*/
.moving-bus-stage3 {
position: relative;
width: 100%;
height: 80px;
top: 0px;
margin-top: -80px;
display: block;
background-color: transparent;
/* バスが右端からはみ出して、スマホで横スクロールが出るのを止める（縦には切らない） */
overflow-x: clip;
overflow-y: visible;
border-bottom: solid #777 1px;
}
@media screen and (max-width: 767px) {
.moving-bus-stage3 {
height: 66px;
margin-top: -66px;
}
}
/* overflow-x: clip を知らないブラウザ（iOS 15 以前など）は、帯の外を切って横スクロールを止める。
   バスの絵は帯の中に収まっている（スマホ幅で車輪の下 2px が切れるだけ） */
@supports not (overflow-x: clip) {
.moving-bus-stage3 {
overflow: hidden;
}
}

/* ===================================================
   通学定期購入にあたり（T-06AB D17。横山さんの申込フォーム修正 1007。確認用の版 1006 の v1006.css 139〜182 行目の写し）
   申込フォームの学生の区画、乗り継ぎの案内の下・乗車区間 1 の上の箱
--------------------------------------------------- */
.pass_purchase_note {
    text-align: left;
    font-size: 14px;
    line-height: 1.7;
    border: solid 1px #9cc3dc;
    border-radius: 8px;
    background: #f3f9fd;
    padding: 10px 14px;
    margin: 0 0 16px;
}
.pass_purchase_note .lead {
    font-weight: bold;
}
.pass_purchase_note a {
    font-weight: bold;
    color: #0076b5;
}
/* 「路線とバス会社を調べる」はボタンの形に（横山さん 10/7：文字のリンクだと見逃す）。別タブで開くので、重なった窓の印 */
.pass_purchase_note .route_button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 10px 22px;
    border: solid 3px #0076b5;
    border-radius: 999px;
    background: #fff;
    color: #0076b5;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    line-height: 1.3;
}
.pass_purchase_note .route_button svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}
.pass_purchase_note .route_button small {
    font-size: 12px;
    font-weight: normal;
    color: #555;
}

/* 路線とバス会社を調べる（別タブの小さなページ /hangaku/routes。T-06AB D18。v1006.css 184〜194 行目の写し。
   リンクの格子と会社の帯は hangaku_top_1006.css の .route_links） */
.route_page {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px 16px 40px;
    font-family: sans-serif;
    text-align: center;
}
.route_page h1 {
    font-size: 20px;
    color: #04407d;
    margin: 10px 0 16px;
}
.route_page .route_page_note {
    font-size: 14px;
}

@media screen and (max-width: 767px) {
    /* ボタンは横いっぱい。「別タブで開く」は下の行に */
    .pass_purchase_note .route_button {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
        padding: 10px 12px;
    }
    .pass_purchase_note .route_button small {
        flex: 0 0 100%;
        text-align: center;
    }
}