/* 2026 クリスマスケーキ特設LP
   PC(768px以上)とSP(767px以下)で画像を切替。リンクは画像上の透明領域(%指定)。 */

.xmas26 {
    line-height: 0;
    overflow: hidden;
}

.xmas26__sec {
    overflow: hidden;
}

.xmas26__inner {
    position: relative;
}

/* PC：原寸(1920px)のまま左右の背景だけ切り、コンテンツ幅(--safe)が
   画面に収まらなくなってから縮小。1920px超の画面では画面幅に合わせる */
@media screen and (min-width: 768px) {
    .xmas26__inner {
        --w: max(min(1920px, 100% * 1920 / var(--safe, 1920)), 100%);
        width: var(--w);
        margin-left: calc((100% - var(--w)) / 2);
    }
}

.xmas26__sec picture,
.xmas26__sec img {
    display: block;
    width: 100%;
    height: auto;
}

/* 透明リンク領域：座標は元画像に対する%なので画面幅が変わってもずれない */
.xmas26__hs {
    position: absolute;
    z-index: 1;
    display: block;
}

.xmas26__hs:not([href]) {
    cursor: default;
}

.xmas26__hs:focus-visible {
    outline: 3px solid #c8a24a;
    outline-offset: 2px;
}

@media screen and (max-width: 767px) {
    .xmas26__hs--pc {
        display: none;
    }
}

@media screen and (min-width: 768px) {
    .xmas26__hs--sp {
        display: none;
    }
}

/* 確認用：URLの末尾に ?debug=1 を付けるとリンク領域を可視化（青=リンク済 / 赤=URL未設定） */
.xmas26.is-debug .xmas26__hs {
    background: rgba(0, 150, 255, 0.25);
    outline: 2px dashed #0096ff;
}

.xmas26.is-debug .xmas26__hs:not([href]) {
    background: rgba(255, 0, 0, 0.25);
    outline-color: #f00;
}