/* ==========================================================================
   トップページ ヒーロー：ポスター版のスマホ・タブレット（1064px以下）
   ・js が html に .hp-sp を付けたときだけ効く。PC（1065px以上）には一切掛からない
   ・中身は css/hero-poster.css（PC）と同じ。違いは、沈みのグラデーションとぼかしの範囲を js が文字の位置から付けることと、
     ヒーロー下端の波線を沈み・四隅の締めより手前に出していること
   ・斜め線のあしらい（hero-tone.css の .item::after）と背景の色の揺らぎ（.banner-style01::after）はそのまま
   ========================================================================== */

@media screen and (max-width: 1064px) {
    .hp-sp .banner-style01 {
        position: relative;
    }

    .hp-sp .banner-style01 .item .page_noizy2 {
        background: #FFF7F7 !important;
    }

    .hp-sp .banner-style01 .item > .container {
        opacity: 0 !important;
        pointer-events: none;
    }

    .hp-sp .hp {
        display: block;
        position: absolute;
        inset: 0;
        pointer-events: none;
        overflow: hidden;
        --hp-u: 1px;
        --hp-wave: 0px;
    }

    .hp-sp .hp-fx {
        position: absolute;
        inset: 0;
        z-index: 5;
        opacity: 0;
        transition: opacity 1.7s ease;
    }

    .hp-sp .hp-mul {
        mix-blend-mode: multiply;
    }

    .hp-sp .hp[data-slide="0"] .hp-fx--1,
    .hp-sp .hp[data-slide="1"] .hp-fx--2,
    .hp-sp .hp[data-slide="2"] .hp-fx--3 {
        opacity: 1;
    }

    /* 波線（次のセクションの ::before）を沈み・文字（z-index 5・6）より手前に出す。
       沈みを波線の手前で消すと、その境目が横線に見える */
    .hp-sp .service-section {
        z-index: 7;
    }

    .hp-sp .hp-scrim,
    .hp-sp .hp-lift {
        position: absolute;
        inset: 0;
    }

    .hp-sp .hp-vignette {
        position: absolute;
        inset: 0;
        z-index: 5;
        background: radial-gradient(ellipse 62% 62% at 50% 50%, rgb(0 0 0 / 0.0000) 0.0%, rgb(0 0 0 / 0.0000) 50.0%, rgb(0 0 0 / 0.0008) 62.5%, rgb(0 0 0 / 0.0197) 75.0%, rgb(0 0 0 / 0.0620) 87.5%, rgb(0 0 0 / 0.1136) 100.0%, rgb(0 0 0 / 0.1400) 112.5%, rgb(0 0 0 / 0.1400) 125.0%);
    }

    /* 縦長の3枚目は、スマホが左に来る写真に差し替える（位置・大きさは js の spBgVars）。
       スライダーが style 属性に書く画像を差し替えるので、背景を受け継ぐ .hp-soft も同じ写真になる */
    @media (orientation: portrait) {
        .hp-sp .banner-style01 [style*="portrait/slide-03.jpg"] {
            background-image: url(../img/banner/portrait/slide-03-left-ext.jpg) !important;
        }
    }

    .hp-sp .hp-soft {
        position: absolute;
        inset: 0;
        background-image: inherit;
        background-size: inherit;
        background-position: inherit;
        background-repeat: no-repeat;
        filter: blur(4px);
        opacity: 0.85;
        pointer-events: none;
    }

    .hp-sp .hp-text {
        position: absolute;
        inset: 0;
        z-index: 6;
    }

    .hp-sp .hp-ch {
        position: absolute;
        left: 0;
        top: 0;
        white-space: pre;
        line-height: 1;
        letter-spacing: 0;
        font-size: var(--hp-fs, 60px);
        transform-origin: 0 0;
        opacity: 0;
    }

    .hp-sp .hp-r {
        display: block;
        position: relative;
        transform-origin: 50% 65%;
    }

    .hp-sp .hp-ch--jp {
        font-family: "Noto Sans JP", sans-serif;
        font-weight: 600;
        font-feature-settings: "palt" 1;
    }

    .hp-sp .hp-ch--en {
        font-family: "Bricolage Grotesque", sans-serif;
        font-weight: 600;
        font-variation-settings: "opsz" 96;
        font-kerning: none;
    }

    .hp-sp .hp-ch--sub {
        font-family: "Bricolage Grotesque", sans-serif;
        font-weight: 700;
        font-variation-settings: "opsz" 18;
        font-kerning: none;
        font-size: calc(var(--hp-fs, 60px) * var(--hp-sub, 0.2447));
    }

    .hp-sp .hp-s {
        color: transparent;
        text-shadow:
            0 calc(2 * var(--hp-u)) calc(5 * var(--hp-u)) rgb(30 25 20 / 0.22),
            0 calc(6 * var(--hp-u)) calc(30 * var(--hp-u)) rgb(30 25 20 / 0.20),
            0 calc(12 * var(--hp-u)) calc(90 * var(--hp-u)) rgb(30 25 20 / 0.14);
    }

    .hp-sp .hp-f {
        position: absolute;
        left: 0;
        top: 0;
        color: transparent;
        background-size: 300px 300px;
        -webkit-background-clip: text;
        background-clip: text;
    }

    .hp-sp .hp-c--ink .hp-f {
        background-image: url(../img/hero-poster/ink.jpg);
    }

    .hp-sp .hp-c--accent .hp-f {
        background-image: url(../img/hero-poster/accent.jpg);
    }

    .hp-sp .hp-ch--sub .hp-f {
        opacity: 0.9;
    }
}