/* 募集ページ：横山さんの「HP修正1006〜1009」の部品（2026-10-09 本番へ）。学生と高齢者・障がい者で道を分ける構成。
   - 募集バナー：チラシの2つの枠（PC は横並び・スマホは縦積み）
   - 募集バナーの下の、区分ごとの区画へのボタン2つ
   - 区分ごとの区画（見出し・ひとこと・箇条書き・路線と料金表のリンク・使い方の箱・申込のボタン）
   区分の値ごとの色：1＝生徒・学生（紺 #04407d）、2＝高齢者・障がい者（オレンジ #ea7525）。
   確認用の版（hero_2026/v1006/v1006.css・banner_full.css・pass_howto.css）から、募集ページの分だけを移した */

/* ---- 募集バナー（チラシの2つの枠） ---- */
.monitor-banner .monitor_banner_pair {
    display: flex;
    justify-content: center;
    width: 75%;
    margin: 30px auto 20px;
}
/* toplayout.css の「.monitor-banner img { width: 75% !important; margin: -60px auto 10px; }」を、この組の中だけ打ち消す */
.monitor-banner .monitor_banner_pair img {
    width: 50% !important;
    height: auto;
    margin: 0 !important;
}
/* 受付の終わった区分の絵は出さないので、1枚だけのときは半分の幅で真ん中に */
.monitor-banner .monitor_banner_pair img:only-child {
    width: 50% !important;
}

/* ---- 区分ごとの区画へのボタン ---- */
.type_buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: 0 auto 30px;
}
.type_buttons a.btn-flat {
    font-size: 18px;
    padding: 12px 20px;
    min-width: 300px;
}
.type_buttons a.type_button_1 {
    border: solid 4px #04407d !important;
    color: #04407d;
}
.type_buttons a.type_button_2 {
    border: solid 4px #ea7525 !important;
    color: #ea7525;
}

/* ---- 区分ごとの区画 ---- */
.type_section {
    border-top: solid 6px #04407d;
    margin: 0 auto 50px;
    padding-top: 20px;
}
.type_section_2 {
    border-top-color: #ea7525;
}
.type_section h2 {
    margin-bottom: 6px;
}
.type_section_chip {
    display: inline-block;
    background: #04407d;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    border-radius: 999px;
    padding: 4px 18px;
    margin: 0 0 18px;
}
.type_section_2 .type_section_chip {
    background: #ea7525;
}
.type_section_text {
    max-width: 860px;
    margin: 0 auto 10px;
    text-align: left;
    font-size: 16px;
    line-height: 1.8;
}
.type_section_text p {
    margin: 0 0 12px;
}
.type_section_text .lead {
    font-weight: bold;
}
.type_section_text .indent {
    display: block;
    padding-left: 1em;
}
.type_section_text .note {
    font-size: 14px;
    color: #555;
}

/* ---- 路線と定期料金表のリンク（7つ）。バス会社ごとの色の帯 ---- */
.route_links {
    display: grid;
    grid-template-columns: repeat(6, 1fr);   /* 調べる2つは3列ずつ、料金表は 2列×3＋3列×2 */
    gap: 12px;
    max-width: 860px;
    margin: 10px auto 30px;
}
.route_links a {
    display: flex;              /* 縦に並べ、帯を底に揃える（箱の高さは grid で揃う） */
    flex-direction: column;
    border: solid 2px #5b8fc9;
    border-radius: 6px;
    background: #fff;
    color: #222;
    text-decoration: none;
    font-size: 15px;
    font-weight: bold;
    padding: 12px 8px 0;
    text-align: center;
    line-height: 1.4;
}
.route_links a .sub {
    display: block;
    font-size: 14px;
    font-weight: bold;
}
.route_links a small {
    display: block;
    font-weight: normal;
    font-size: 13px;
    color: #555;
}
/* 名前は company_bar（サイトのスマホ用メニューの .bar と衝突するため。position:absolute・幅36px にされる） */
.route_links .company_bar {
    display: block;
    height: 10px;
    flex: 0 0 10px;
    margin-top: auto;           /* 文の行数が違っても帯は底 */
    padding-top: 10px;
    box-sizing: content-box;
    background-clip: content-box;
    border-radius: 0 0 4px 4px;
}
.route_links .bar_naha { background: #5b8fc9; }
/* 琉球バス交通の虹色は横山さん支給の画像（第一交通グループのロゴの帯）から切り出したもの（2026-10-08） */
.route_links .bar_ryukyu { background: url(../img/hangaku/2026/rainbow_daiichi.png) center / 100% 100% no-repeat; }
/* 沖縄バス：濃い方は黒ではなく濃いめの青（横山さん 10/8、車体の写真） */
.route_links .bar_okinawa { background: linear-gradient(180deg, #4aa3df 0 50%, #1f4e9a 50% 100%); }
.route_links .bar_toyo { background: linear-gradient(180deg, #ea7525 0 50%, #3f9f4e 50% 100%); }
.route_links .bar_yui { background: linear-gradient(180deg, #d41e1e 0 50%, #888 50% 100%); }
.route_links .bar_yahoo { background: #eee; }
.route_links .route_link_search { grid-column: span 3; }
.route_links .route_link_fare { grid-column: span 2; }
.route_links .route_link_fare_wide { grid-column: span 3; }
.route_links .route_logo { display: block; margin: 4px auto 0; }
.route_links .route_logo img { display: block; width: 150px; max-width: 100%; height: auto; margin: 0 auto; }

/* ---- 使い方の箱（半額定期券の買い方・半額OKICAの使い方） ---- */
.video-box h2 .howto_target {
    display: block;
    font-size: 55%;
    font-weight: normal;
    margin-top: 4px;
}
/* ③の下の混雑の注記（横山さん 10/9「小さい文字で良いので追加」） */
.video-box .howto_crowd {
    display: block;
    margin-top: 6px;
    color: #555;
}

/* ---- 区画の中の申込のボタン ---- */
.type_section .apply_block p {
    font-size: 22px;
    font-weight: bold;
    margin: 10px 0;
}
.type_section .apply_block .mgb40 {
    margin-bottom: 20px;
}

@media (max-width: 767px) {
    .monitor-banner .monitor_banner_pair {
        flex-direction: column;
        align-items: center;
        width: 94%;
    }
    .monitor-banner .monitor_banner_pair img,
    .monitor-banner .monitor_banner_pair img:only-child {
        width: 100% !important;
    }
    .monitor-banner .monitor_banner_pair img + img {
        margin-top: 6px !important;
    }
    .type_buttons a.btn-flat {
        min-width: 0;
        width: 100%;
    }
    .type_section_text {
        font-size: 15px;
    }
    .route_links {
        grid-template-columns: repeat(2, 1fr);
    }
    .route_links .route_link_search,
    .route_links .route_link_fare,
    .route_links .route_link_fare_wide { grid-column: span 1; }
    .route_links .route_link_fare_wide:last-child { grid-column: 1 / -1; }
}