/* =========================================================
   ファーストビュー（parts/fv.php）
   PC基準 1625×968 / SP基準 1207×1303。
   位置は %、文字サイズは cqw（FVの幅基準）で指定し、画面幅に合わせて全体を拡縮する。
   見出し・電話の吹き出し・価格・リボンは、FVの左右中央（50%）を軸にそろえる。
   ========================================================= */
.yfs-fvwrap {
    --yfv-navy: #0d7096;
    --yfv-navy-bg: #0d7096;
    --yfv-pay-bg: #0a5574;
    --yfv-red: #e0143c;
    --yfv-price: #e0315a;
    --yfv-yellow: #f7c300;
    --yfv-marker: #fbd400;
    --yfv-cream: #fdf2cc;
    --yfv-ss: #3a9ad9;
    --yfv-border: #0d7096;
    --yfv-text: #1b2a5a;
    position: relative;
    overflow: hidden;
    background: #e6f3ff;
}

.yfv {
    position: relative;
    width: 100%;
    max-width: 1625px;
    margin: 0 auto;
    aspect-ratio: 1625 / 968;
    overflow: hidden;
    container-type: inline-size;
    background: url("../img/fv/fv-bg-pc.webp") center top / cover no-repeat;
    font-family: "M PLUS Rounded 1c", "Noto Sans JP", "Hiragino Maru Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    color: var(--yfv-text);
    line-height: 1.4;
}

.yfv>* {
    position: absolute;
    margin: 0;
    padding: 0;
}

.yfv ul,
.yfv li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.yfv p {
    margin: 0;
}

.yfv img {
    display: block;
    max-width: 100%;
}

/* 1625pxより広い画面：FVの左右に背景を左右反転して並べ、継ぎ目が出ないようにする */
@media (min-width: 1626px) {

    .yfs-fvwrap::before,
    .yfs-fvwrap::after {
        content: "";
        position: absolute;
        top: 0;
        width: 1625px;
        /* 決済バーより上だけ（968px × 83.2%） */
        height: 805.4px;
        background: url("../img/fv/fv-bg-pc.webp") center top / 1625px 968px no-repeat;
        transform: scaleX(-1);
    }

    .yfs-fvwrap::before {
        right: calc(50% + 812.5px);
    }

    .yfs-fvwrap::after {
        left: calc(50% + 812.5px);
    }

    /* 決済バーは画面の端まで伸ばす */
    .yfs-fvwrap {
        background: linear-gradient(to bottom, transparent 83.2%, var(--yfv-pay-bg) 83.2%);
    }
}

/* ---------- 画像：左右の不用品 / キャラクター（縦横比を保ち、下端でそろえる） ---------- */
.yfv__goods-l {
    left: 0;
    bottom: 17.4%;
    width: 17%;
    z-index: 1;
}

.yfv__goods-r {
    right: 0;
    bottom: 16.8%;
    width: 14.2%;
    z-index: 1;
}

.yfv__chara {
    left: 73.5%;
    top: 19.6%;
    width: 15.1%;
    z-index: 6;
}

.yfv__goods-l img,
.yfv__goods-r img,
.yfv__chara img {
    width: 100%;
    height: auto;
}

/* ---------- 最短25分到着 メダル ---------- */
.yfv__medal {
    left: 20.5%;
    top: 3.1%;
    width: 11.8%;
    z-index: 5;
}

.yfv__medal img {
    width: 100%;
    height: auto;
}

/* 文字はメダルの円の中心に置く（リボンの分だけ上寄り） */
.yfv__medal .txt {
    position: absolute;
    left: 50%;
    top: 39%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    color: #2b2622;
}

.yfv__medal .row {
    display: flex;
    align-items: center;
}

.yfv__medal .s {
    display: flex;
    flex-direction: column;
    font-size: 1.4cqw;
    line-height: 1.05;
    margin-right: .15em;
}

.yfv__medal .n {
    font-size: 2.95cqw;
    color: var(--yfv-red);
    letter-spacing: -.02em;
    -webkit-text-stroke: .25cqw #fff;
    paint-order: stroke fill;
}

.yfv__medal .b {
    font-size: 2.65cqw;
    margin-top: .15em;
    letter-spacing: .04em;
}

/* ---------- 電話1本 吹き出し ---------- */
.yfv__tel {
    left: 50%;
    top: 6.7%;
    transform: translateX(-50%);
    height: 7.7%;
    padding: 0 3.2cqw;
    background: var(--yfv-navy-bg);
    border-radius: 10cqw;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1cqw;
    color: #fff;
    font-size: 1.97cqw;
    font-weight: 800;
    white-space: nowrap;
    letter-spacing: .03em;
    z-index: 4;
}

.yfv__tel::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 99%;
    transform: translateX(-50%);
    width: 2cqw;
    height: 34%;
    background: var(--yfv-navy-bg);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.yfv__tel .y {
    color: var(--yfv-yellow);
}

.yfv__tel .ic {
    display: none;
}

/* ---------- 安心（SPのみ） ---------- */
.yfv__anshin {
    display: none;
}

/* ---------- 見出し ---------- */
.yfv__h1 {
    left: 50%;
    top: 20.2%;
    transform: translateX(-50%);
    font-size: 5.7cqw;
    font-weight: 900;
    color: var(--yfv-navy);
    line-height: 1;
    white-space: nowrap;
    z-index: 3;
}

.yfv__h1 .dot {
    margin: 0 -.25em;
}

.yfv__h2 {
    left: 50%;
    top: 30.8%;
    transform: translateX(-50%);
    font-size: 3.65cqw;
    font-weight: 900;
    color: var(--yfv-navy);
    line-height: 1;
    white-space: nowrap;
    z-index: 3;
}

/* 「！」の右側の余白を詰めて、文字の見た目の中心を軸に合わせる */
.yfv__h2 .ex {
    margin-left: -.2em;
    margin-right: -.35em;
}

.yfv__h2 .em {
    font-size: 4cqw;
    background: linear-gradient(transparent 72%, var(--yfv-marker) 72%, var(--yfv-marker) 92%, transparent 92%);
    padding: 0 .1em;
}

/* ---------- 価格バー ---------- */
.yfv__price {
    left: 50%;
    top: 41.8%;
    transform: translateX(-50%);
    width: 46.6%;
    height: 13.1%;
    background: var(--yfv-cream);
    border-radius: 1cqw;
    display: flex;
    align-items: center;
    z-index: 4;
}

.yfv__price .web {
    position: relative;
    flex: 0 0 23.8%;
    height: 100%;
    background: var(--yfv-navy-bg);
    border-radius: 1cqw 0 0 1cqw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 900;
    line-height: 1.1;
}

.yfv__price .web::after {
    content: "";
    position: absolute;
    left: 99.5%;
    top: 0;
    width: 17%;
    height: 100%;
    background: var(--yfv-navy-bg);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.yfv__price .web .l {
    font-size: 3.1cqw;
    letter-spacing: .02em;
}

.yfv__price .web .m {
    font-size: 1.5cqw;
    margin-top: .2em;
    letter-spacing: .04em;
}

/* SSパックと金額は、矢印の先からバーの右端までの間で中央にそろえる */
.yfv__price .ss {
    flex: 0 0 auto;
    width: 15.2%;
    aspect-ratio: 1;
    margin-left: calc(4% + 1.5cqw);
    border-radius: 50%;
    background: var(--yfv-ss);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 900;
    line-height: 1.05;
}

.yfv__price .ss .l {
    font-size: 2.1cqw;
}

.yfv__price .ss .m {
    font-size: 1.2cqw;
}

.yfv__price .num {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5cqw;
    padding-right: 1cqw;
}

.yfv__price .num b {
    font-size: 7.5cqw;
    font-weight: 900;
    color: var(--yfv-price);
    line-height: 1;
    letter-spacing: -.04em;
}

.yfv__price .num .u {
    display: flex;
    flex-direction: column;
    font-weight: 900;
    line-height: 1.1;
    color: var(--yfv-text);
    padding-top: .6cqw;
}

.yfv__price .num .u .t {
    font-size: 1cqw;
}

.yfv__price .num .u .y {
    font-size: 1.85cqw;
}

/* ---------- リボン ---------- */
.yfv__ribbon {
    left: 50%;
    top: 58.7%;
    transform: translateX(-50%);
    width: 56.1%;
    height: 7.4%;
    z-index: 4;
}

.yfv__ribbon .fold {
    position: absolute;
    top: 14%;
    width: 5%;
    height: 100%;
    background: #0d7096;
}

.yfv__ribbon .fold--l {
    left: 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 45% 50%);
}

.yfv__ribbon .fold--r {
    right: 0;
    clip-path: polygon(0 0, 100% 0, 55% 50%, 100% 100%, 0 100%);
}

.yfv__ribbon .band {
    position: absolute;
    inset: 0 1.5%;
    background: var(--yfv-navy-bg);
    clip-path: polygon(0 0, 100% 0, 97.5% 50%, 100% 100%, 0 100%, 2.5% 50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.85cqw;
    font-weight: 800;
    white-space: nowrap;
    letter-spacing: .04em;
    line-height: 1;
}

.yfv__ribbon .y {
    color: var(--yfv-yellow);
    font-size: 2.5cqw;
    font-weight: 900;
    margin: 0 .1em;
}

/* ---------- 特徴4つ ---------- */
.yfv__features {
    left: 50%;
    top: 69.2%;
    transform: translateX(-50%);
    width: 72.9%;
    height: 11.4%;
    display: flex;
    gap: 1.1%;
    z-index: 4;
}

.yfv .feat {
    flex: var(--g) 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .9cqw;
    background: #fff;
    border: .13cqw solid var(--yfv-border);
    border-radius: .7cqw;
    padding: 0 1cqw;
}

.yfv .feat__icon {
    width: 4.4cqw;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.4cqw;
    line-height: 1;
    color: var(--yfv-navy-bg);
}

.yfv .feat__txt {
    font-size: 1.4cqw;
    font-weight: 800;
    color: var(--yfv-navy);
    line-height: 1.45;
    white-space: nowrap;
}

.yfv .feat__txt .r {
    color: var(--yfv-red);
    font-size: 1.12em;
}

.yfv .feat__txt>span {
    display: block;
}

.yfv .f1 {
    --g: 279;
}

.yfv .f2 {
    --g: 275;
}

.yfv .f3 {
    --g: 302;
}

.yfv .f4 {
    --g: 275;
}

/* ---------- 決済バー ---------- */
.yfv__pay {
    left: 0;
    top: 83.2%;
    width: 100%;
    height: 16.8%;
    background: var(--yfv-pay-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4cqw;
    z-index: 7;
}

.yfv__pay .ttl {
    font-size: 2.35cqw;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    letter-spacing: .04em;
}

.yfv__pay .panel {
    width: 62.4%;
    height: 67.5%;
    background: #fff;
    border-radius: .9cqw;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.2cqw;
    padding: 0 2.5cqw;
}

.yfv__pay .logo {
    height: 64%;
    min-width: 0;
}

.yfv__pay .logo img {
    width: auto;
    height: 100%;
    object-fit: contain;
}

.yfv__pay .bank {
    flex-shrink: 0;
    border-left: .1cqw solid #c9d3e3;
    padding-left: 2.2cqw;
    font-size: 1.55cqw;
    font-weight: 700;
    color: var(--yfv-text);
    text-align: center;
    line-height: 1.55;
    white-space: nowrap;
}

/* =========================================================
   SP（768px以下）基準 1207×1303
   ========================================================= */
@media (max-width: 768px) {
    .yfv {
        aspect-ratio: 1207 / 1303;
        background-image: url("../img/fv/fv-bg-sp.webp");
    }

    .yfv__goods-l {
        bottom: 26%;
        width: 19.5%;
    }

    .yfv__goods-r {
        bottom: 15%;
        width: 17.1%;
    }

    .yfv__chara {
        left: 76.2%;
        top: 24.6%;
        width: 20.7%;
    }

    .yfv__medal {
        left: 13.7%;
        top: 5.4%;
        width: 16.6%;
    }

    .yfv__medal .s {
        font-size: 2.15cqw;
    }

    .yfv__medal .n {
        font-size: 4cqw;
        -webkit-text-stroke: .35cqw #fff;
    }

    .yfv__medal .b {
        font-size: 3.6cqw;
    }

    .yfv__tel {
        left: 56.4%;
        top: 8.8%;
        height: 7.3%;
        padding: 0 3cqw;
        font-size: 2.75cqw;
        gap: 1.6cqw;
    }

    .yfv__tel::after {
        width: 2.4cqw;
        height: 36%;
    }

    .yfv__tel .ic {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 4.6cqw;
        aspect-ratio: 1;
        flex-shrink: 0;
        font-size: 3.4cqw;
        color: var(--yfv-yellow);
    }

    .yfv__anshin {
        display: flex;
        align-items: center;
        justify-content: center;
        left: 2.5%;
        top: 18.8%;
        width: 12.4%;
        aspect-ratio: 1;
        background: var(--yfv-navy-bg);
        border-radius: 50%;
        color: #fff;
        font-size: 3.3cqw;
        font-weight: 900;
        letter-spacing: .04em;
        line-height: 1;
        z-index: 5;
    }

    .yfv__anshin::after {
        content: "";
        position: absolute;
        right: -4%;
        bottom: -4%;
        width: 34%;
        height: 34%;
        background: var(--yfv-navy-bg);
        clip-path: polygon(0 0, 100% 100%, 40% 0);
    }

    .yfv__h1 {
        top: 21.6%;
        font-size: 7.5cqw;
    }

    .yfv__h2 {
        top: 30.2%;
        font-size: 4.75cqw;
    }

    .yfv__h2 .em {
        font-size: 5.25cqw;
    }

    .yfv__price {
        top: 43%;
        width: 56.3%;
        height: 12.1%;
        border-radius: 1.4cqw;
    }

    .yfv__price .web {
        flex-basis: 24.3%;
        border-radius: 1.4cqw 0 0 1.4cqw;
    }

    .yfv__price .web::after {
        width: 18%;
    }

    .yfv__price .web .l {
        font-size: 4.3cqw;
    }

    .yfv__price .web .m {
        font-size: 2.5cqw;
    }

    .yfv__price .ss {
        width: 14.7%;
        margin-left: calc(4.4% + 1.5cqw);
    }

    .yfv__price .ss .l {
        font-size: 2.65cqw;
    }

    .yfv__price .ss .m {
        font-size: 1.8cqw;
    }

    .yfv__price .num {
        gap: .7cqw;
    }

    .yfv__price .num b {
        font-size: 9cqw;
    }

    .yfv__price .num .u {
        padding-top: 1cqw;
    }

    .yfv__price .num .u .t {
        font-size: 1.5cqw;
    }

    .yfv__price .num .u .y {
        font-size: 2.5cqw;
    }

    .yfv__ribbon {
        top: 57.6%;
        width: 61.5%;
        height: 5.4%;
    }

    .yfv__ribbon .band {
        font-size: 2.25cqw;
    }

    .yfv__ribbon .y {
        font-size: 3.2cqw;
    }

    .yfv__features {
        top: 66.2%;
        width: 73.4%;
        height: 16.6%;
        gap: 1.1%;
    }

    .yfv .feat {
        flex-direction: column;
        justify-content: center;
        gap: 1.4cqw;
        padding: 0 .6cqw;
        border-width: .2cqw;
        border-radius: 1cqw;
    }

    .yfv .feat__icon {
        width: 7.5cqw;
        font-size: 6cqw;
    }

    .yfv .feat__txt {
        font-size: 2.25cqw;
        text-align: center;
    }

    .yfv .f1 {
        --g: 204;
    }

    .yfv .f2 {
        --g: 200;
    }

    .yfv .f3 {
        --g: 213;
    }

    .yfv .f4 {
        --g: 222;
    }

    .yfv__pay {
        top: 85.2%;
        height: 14.8%;
        gap: 2.5cqw;
    }

    .yfv__pay .ttl {
        font-size: 2.9cqw;
    }

    .yfv__pay .panel {
        width: 71.9%;
        height: 59.6%;
        border-radius: 1.2cqw;
        gap: 1.8cqw;
        padding: 0 1.8cqw;
    }

    .yfv__pay .logo {
        height: 62%;
    }

    .yfv__pay .bank {
        font-size: 2.15cqw;
        border-left: 0;
        padding-left: 0;
    }
}