@charset "UTF-8";

/* =========================================================
   50周年イベント（2026.10.4）期間限定スタイル
   トップページのヒーローを 1枚バナー（リンク付き）に差し替え
   ※ このファイルは期間限定テーマ apls2024_50th 専用
   ※ 期間終了後は通常テーマ「apls2024」に戻すだけでOK
   ========================================================= */

/* スライダー時は画面高に固定していたが、バナーの高さに合わせて可変にする */
.hero {
    height: auto;
}

/* お知らせバーはバナーに重ねず、上に並べて表示
   （重ねるとバナー上部の「おかげさまで50周年」が隠れるため） */
.head-topics {
    position: static;
}

.gentei-hero {
    width: 100%;
    position: relative;
    line-height: 0;
}
.gentei-hero a {
    display: block;
}
.gentei-hero img {
    display: block;
    width: 100%;
    height: auto;
    /* PC画像 1948 × 974（2:1） */
    aspect-ratio: 1948 / 974;
    /* 比率が変わる画像に差し替えられても切れないように */
    object-fit: contain;
}

/* SP（767.98px 以下）
   ここの条件は index.php の <source media="..."> と必ず同じ値にすること。
   ずれると読み込まれる画像と表示比率が食い違います。 */
@media only screen and (max-width: 767.98px) {
    .gentei-hero img {
        /* SP画像 595 × 787 */
        aspect-ratio: 595 / 787;
    }
}