/* 募集ページ（/hangaku）のトップの絵と、その下の旗ロゴ・緑の吹き出しの並べ方（2026 年度。2026-10-06）。
   hangaku.css・toplayout.css の後に読み込む（top/index.blade.php・index2.blade.php）。
   別のファイルにしてあるのは、hangaku.css の読み込みに版の印（?v=）が無く、前に訪れた人のブラウザに古い hangaku.css が
   残るため。古い CSS だけが効くと、去年の写真（main_img_lo.jpg）が出てしまう。このファイルは ?v= 付きで読む。

   絵（img/hangaku/2026/hero_2026_pc.jpg・hero_2026_sp.jpg）は、今年のチラシの元データから作った1枚絵
   （背景のイラスト・白い波・キャッチコピー・モデル）。緑の吹き出し（balloon_2026.png）もチラシから取り出したもの。

   去年までの作りとの違い
   - 枠の高さを、窓の高さ（100vh）ではなく、絵の縦横比で決める。窓の大きさで絵やキャッチコピーが切れない
     （去年は、窓の縦が短いと、下の旗ロゴがキャッチコピーに重なった）
   - キャッチコピーは絵の中に入っている（catch.png を上に重ねない）
   - 旗ロゴ（左）と緑の吹き出し（右）を、モデルの左右に同じ高さ・同じ距離で並べる。
     緑の吹き出しは、去年のオレンジの吹き出し（「モニターに選ばれると…半額！」）の場所に入れた
   - その2つの食い込み（絵の下端からどれだけ上に重ねるか）を、窓の幅に比例させる。
     チラシと同じく、絵と白い波の境目をまたぐ高さ（旗ロゴの上端が、バスのナンバーのすぐ下） */

div#hangaku-topmain-img {
    width: 100%;
    min-height: 0;
    aspect-ratio: 1920 / 1000;
    margin-top: 92px; /* 固定のヘッダーの高さ。キャッチコピーが絵の上端にあるので、ヘッダーの下に潜らせない */
    background-image: url("../img/hangaku/2026/hero_2026_pc.jpg");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
    /* 下の区画（.top-schedule）は、toplayout.css が 160px 上へ食い込ませている。
       それを「窓の幅の 10.5%」（絵の高さの約 2 割）にそろえる。旗ロゴの上端が、バスのナンバーのすぐ下に来る */
    margin-bottom: calc(160px - 10.5vw);
}

/* 1500px 以上：toplayout.css の食い込みは 20px */
@media (min-width: 1500px) {
    div#hangaku-topmain-img {
        margin-bottom: calc(20px - 10.5vw);
    }
}

/* 1079px 以下：toplayout.css の食い込みは 80px */
@media (max-width: 1079px) {
    div#hangaku-topmain-img {
        margin-bottom: calc(80px - 10.5vw);
    }
}

/* 旗ロゴ（.ban）と緑の吹き出し（.cal）：左右を半分ずつにして、それぞれの真ん中に置く。
   2つの中心が、モデル（絵の中央）から同じ距離になる。上端もそろえる（画像ごとの上の余白を 0 に） */
.top-schedule .ban,
.top-schedule .cal {
    width: 50%;
}
.top-schedule .ban img,
.top-schedule .cal img {
    display: block;
    margin: 0 auto 10px;
}
.top-schedule .ban img {
    width: 56% !important;
}
.top-schedule .cal img {
    width: 46% !important; /* 吹き出しは旗より縦長なので、幅を狭くして高さをそろえる */
}

/* スマホ：縦長の絵に切り替える */
@media (max-width: 767px) {
    div#hangaku-topmain-img {
        aspect-ratio: 1080 / 1400;
        background-image: url("../img/hangaku/2026/hero_2026_sp.jpg");
        /* 絵の下のほう（モデルの腰から下が白へ溶ける所）の左右に重ねる */
        margin-bottom: calc(80px - 29vw);
    }
    .top-schedule .ban img {
        width: 92% !important;
    }
    .top-schedule .cal img {
        width: 76% !important;
    }
}

/* aspect-ratio を知らないブラウザ（iOS 14 以前の Safari など）：上の指定だけだと枠の高さが 0 になり、絵が出ず、
   旗ロゴと緑の吹き出しが固定のヘッダーの裏へ潜る。同じ縦横比を、上の余白（padding-top の % は枠の幅が基準）で与える。
   数字は絵の大きさ（高さ ÷ 幅）。絵を替えたら、上の aspect-ratio と一緒に直す（HangakuTopDisplayTest が絵の大きさと
   比べている）。hangaku_form.css の @supports not (overflow-x: clip) と同じやり方（T-06W レビュー H-1。2026-10-06） */
@supports not (aspect-ratio: 1 / 1) {
    div#hangaku-topmain-img {
        padding-top: 52.0833%; /* 1000 ÷ 1920 */
    }
    @media (max-width: 767px) {
        div#hangaku-topmain-img {
            padding-top: 129.6296%; /* 1400 ÷ 1080 */
        }
    }
}