/**
 * 古いブラウザ（Safari 14未満等）用 CSS フォールバック
 * gap / aspect-ratio / grid 非対応でもレイアウトが崩れないようにする
 * モダンブラウザでは @supports によりこれらのルールは適用されない
 */

/* gap 未対応: 子要素に margin で余白を再現 */
@supports not (gap: 1px) {
    .opening-skip-btn {
        margin: -0.25rem;
    }
    .opening-skip-btn > * {
        margin: 0.25rem;
    }

    .main-nav > ul {
        margin: -1rem;
    }
    .main-nav > ul > li {
        margin: 1rem;
    }
    .main-nav .has-submenu > a > * {
        margin: 0 0.175rem;
    }

    .hero-buttons {
        margin: -1rem;
    }
    .hero-buttons > * {
        margin: 1rem;
    }

    .footer-content {
        margin: -1.5rem;
    }
    .footer-content > * {
        margin: 1.5rem;
    }
    .footer-section.footer-nap .footer-map-link,
    .footer-section.footer-nap .footer-contact-link {
        margin-top: 0.5rem;
        display: inline-block;
    }

    .header-content {
        margin: -0.5rem;
    }
    .header-content > * {
        margin: 0.5rem;
    }
}

/* aspect-ratio 未対応: padding-bottom で高さを確保（ラッパー使用時用） */
@supports not (aspect-ratio: 16 / 9) {
    .aspect-ratio-16-9 {
        position: relative;
        padding-bottom: 56.25%;
        height: 0;
        overflow: hidden;
    }
    .aspect-ratio-16-9 > img,
    .aspect-ratio-16-9 > picture,
    .aspect-ratio-16-9 > picture > img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

/* inset 未対応（古い Safari）: 個別指定で代替 */
@supports not (inset: 0) {
    .inset-0 {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
}

/* backdrop-filter 未対応時: 背景を不透明に（オープニングスキップボタン） */
@supports not ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
    .opening-skip-btn {
        background: rgba(30, 30, 30, 0.95);
    }
}