:root {

    /* 文字間 */
    --lsp-120: 0.12em;
    --lsp-110: 0.11em;
    --lsp-100: 0.1em;
    --lsp-80: 0.08em;
    --lsp-70: 0.07em;
    --lsp-60: 0.06em;
    --lsp-50: 0.05em;
    --lsp-40: 0.04em;
    --lsp-30: 0.03em;
    --lsp-20: 0.02em;
    --lsp-10: 0.01em;

    /* 固有の余白 */
    --p1100-spa: 57.3vw;
    --p410-spa: 21.3vw;
    --p340-spa: 17.7vw;
    --p310-spa: 16.1vw;
    --p260-spa: 13.5vw;
    --p250-spa: 13vw;
    --p200-spa: 10.4vw;
    --p190-spa: 9.9vw;
    --p180-spa: 9.3vw;
    --p170-spa: 8.9vw;
    --p160-spa: 8.3vw;
    --p150-spa: 7.8vw;
    --p140-spa: 7.3vw;
    --p130-spa: 6.8vw;
    --p120-spa: 6.3vw;
    --p110-spa: 5.7vw;
    --p100-spa: 5.2vw;
    --p90-spa: 4.7vw;
    --p80-spa: 4.1vw;
    --p85-spa: 4.4vw;
    --p75-spa: 3.9vw;
    --p70-spa: 3.6vw;
    --p65-spa: 3.4vw;
    --p60-spa: 3.1vw;
    --p55-spa: 2.9vw;
    --p50-spa: 2.7vw;
    --p45-spa: 2.3vw;
    --p40-spa: 2.1vw;
    --p35-spa: 1.8vw;
    --p30-spa: 1.5vw;
    --p25-spa: 1.3vw;
    --p20-spa: 1vw;
    --p15-spa: 0.8vw;
    --p10-spa: 0.52vw;

    /* 文字サイズ */
    /* 38〜65px */
    --38to65: clamp(38px, 3.4vw, 65px);
    /* 30〜60px */
    --30to60: clamp(30px, 3.1vw, 60px);
    /* 25〜55px */
    --25to55: clamp(25px, 2.9vw, 55px);
    /* 35〜50px */
    --35to50: clamp(35px, 2.6vw, 50px);
    /* 30〜45px */
    --30to45: clamp(30px, 2.3vw, 45px);
    /* 24〜48px */
    --24to48: clamp(24px, 2.5vw, 48px);
    /* 22〜48px */
    --22to48: clamp(22px, 2.5vw, 48px);
    /* 22〜45px */
    --22to45: clamp(22px, 2.3vw, 45px);
    /* 30〜45px */
    --30to45: clamp(30px, 2.3vw, 45px);
    /* 26〜40px */
    --26to40: clamp(26px, 2vw, 40px);
    /* 25〜40px */
    --25to40: clamp(25px, 2vw, 40px);
    /* 22〜40px */
    --22to40: clamp(22px, 2vw, 40px);
    /* 22〜36px */
    --22to36: clamp(22px, 1.9vw, 36px);
    /* 20〜38px */
    --20to38: clamp(20px, 1.98vw, 38px);
    /* 20〜36px */
    --20to36: clamp(20px, 1.9vw, 36px);
    /* 22〜35px */
    --22to35: clamp(22px, 1.8vw, 35px);
    /* 20〜35px */
    --20to35: clamp(20px, 1.8vw, 35px);
    /* 18〜35px */
    --18to35: clamp(18px, 1.8vw, 35px);
    /* 20〜32px */
    --20to32: clamp(20px, 1.6vw, 32px);
    /* 18〜36px */
    --18to36: clamp(18px, 1.9vw, 36px);
    /* 18〜32px */
    --18to32: clamp(18px, 1.6vw, 32px);
    /* 16〜32px */
    --16to32: clamp(16px, 1.6vw, 32px);
    /* 20〜30px */
    --20to30: clamp(20px, 1.6vw, 30px);
    /* 18〜30px */
    --18to30: clamp(18px, 1.6vw, 30px);
    /* 15〜30px */
    --15to30: clamp(15px, 1.6vw, 30px);
    /* 18〜28px */
    --18to28: clamp(18px, 1.4vw, 28px);
    /* 16〜28px */
    --16to28: clamp(16px, 1.4vw, 28px);
    /* 14〜28px */
    --14to28: clamp(14px, 1.4vw, 28px);
    /* 18〜26px */
    --18to26: clamp(18px, 1.35vw, 26px);
    /* 14〜26px */
    --14to26: clamp(14px, 1.35vw, 26px);
    /* 16〜26px */
    --16to26: clamp(16px, 1.35vw, 26px);
    /* 14〜25px */
    --14to25: clamp(14px, 1.3vw, 25px);
    /* 15〜25px */
    --15to25: clamp(15px, 1.3vw, 25px);
    /* 16〜24px */
    --16to24: clamp(16px, 1.2vw, 24px);
    /* 15〜24px */
    --15to24: clamp(15px, 1.2vw, 24px);
    /* 14〜24px */
    --14to24: clamp(14px, 1.2vw, 24px);
    /* 16〜22px */
    --16to22: clamp(16px, 1.1vw, 22px);
    /* 14〜22px */
    --14to22: clamp(14px, 1.1vw, 22px);
    /* 12〜22px */
    --12to22: clamp(12px, 1.1vw, 22px);
    /* 15〜21px */
    --15to21: clamp(15px, 1vw, 21px);
    /* 14〜20px */
    --14to20: clamp(14px, 1vw, 20px);
    /* 12〜20px */
    --12to20: clamp(12px, 1vw, 20px);
    /* 14〜18px */
    --14to18: clamp(14px, 0.9vw, 18px);
    /* 12〜18px */
    --12to18: clamp(12px, 0.9vw, 18px);
    /* 10〜18px */
    --10to18: clamp(10px, 0.9vw, 18px);
    /* 14〜16px */
    --14to16: clamp(14px, 0.8vw, 16px);
    /* 12〜16px */
    --12to16: clamp(12px, 0.8vw, 16px);
    /* 10〜16px */
    --10to16: clamp(10px, 0.8vw, 16px);
    /* 12〜14px */
    --12to14: clamp(12px, 0.73vw, 14px);
    /* 10〜14px */
    --10to14: clamp(10px, 0.73vw, 14px);
    /* 10〜12px */
    --10to12: clamp(10px, 0.62vw, 12px);

    /* 行送り */
    --lh-33: 3.3;
    --lh-30: 3;
    --lh-27: 2.7;
    --lh-26: 2.6;
    --lh-25: 2.5;
    --lh-24: 2.4;
    --lh-23: 2.3;
    --lh-22: 2.2;
    --lh-21: 2.1;
    --lh-20: 2;
    --lh-19: 1.9;
    --lh-18: 1.8;
    --lh-16: 1.6;
    --lh-14: 1.4;

    /* 太さ */
    --fw-900: 900;
    --fw-800: 800;
    --fw-700: 700;
    --fw-600: 600;
    --fw-500: 500;
    --fw-400: 400;

    /* カラー */
    --black: #231815;
    --red: #E60020;
    --pink: #F4B4D0;
    --d-pink: #E9528E;
    --gray: #C0C0C0;
    --d-gray: #AAAAAA;
    --l-gray: #F5F5F5;
    --blue: #0075C2;
    --yellow: #FFE100;


    /* フォント */
    --ff-noto: "Noto Sans JP", sans-serif;
    --ff-zmaru: "Zen Maru Gothic", sans-serif;
    --ff-mplus: "M PLUS Rounded 1c", sans-serif;

}

html {
    font-size: 62.5%;
    overflow-y: scroll;
    overflow-x: visible;
}

body {
    font-family: var(--ff-noto);
    color: var(--black);
    line-height: 1.6;
    font-weight: var(--fw-500);
}

a {
    display: block;
}

img {
    display: block;
}

.l-view {
    display: none;
}

.sp-view {
    display: none;
}

.spm-view {
    display: none;
}

picture {
    display: contents;
}

.c-red {
    color: var(--red);
}

.link-btn {
    background-color: var(--yellow);
    border-radius: 100px;
    position: relative;
}

.link-btn::after {
    content: "";
    display: block;
    width: 2.1vw;
    height: 1vw;
    background-image: url(../images/arrow.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: var(--p40-spa);
    transition: transform 0.3s;
}

.link-btn:hover::after {
    transform: translateY(-50%) translateX(8px);
}

.link-btn a {
    display: block;
    width: 100%;
    color: var(--blue);
    font-family: var(--ff-mplus);
    text-align: center;
}

@media screen and (max-width:1600px) {
    .l-view {
        display: block;
    }

}

@media screen and (max-width:768px) {

    :root {
        --p200-spa: 53.3vw;
        --p190-spa: 50.6vw;
        --p180-spa: 48vw;
        --p170-spa: 45.3vw;
        --p160-spa: 42.6vw;
        --p150-spa: 40vw;
        --p140-spa: 37.3vw;
        --p130-spa: 34.6vw;
        --p120-spa: 32vw;
        --p110-spa: 29.3vw;
        --p100-spa: 26.5vw;
        --p95-spa: 25.3vw;
        --p90-spa: 24vw;
        --p85-spa: 22.6vw;
        --p80-spa: 21vw;
        --p70-spa: 18.6vw;
        --p65-spa: 17.3vw;
        --p60-spa: 16vw;
        --p55-spa: 14.6vw;
        --p50-spa: 13.3vw;
        --p45-spa: 12vw;
        --p40-spa: 10.5vw;
        --p35-spa: 9.3vw;
        --p30-spa: 8vw;
        --p25-spa: 6.5vw;
        --p20-spa: 5.3vw;
        --p15-spa: 4vw;
        --p10-spa: 2.6vw;
        --p5-spa: 1.3vw;
    }

    .pc-view {
        display: none;
    }

    .sp-view {
        display: block;
    }

    .link-btn::after {
        width: 6.4vw;
        height: 3vw;
        right: var(--p20-spa);
    }
}

@media screen and (max-width:500px) {

    .spm-view {
        display: block;
    }

}

/* loading */

.loading {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    background-image: url(../images/bg-dots_pc.png);
    background-repeat: repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 1s ease-out, visibility 1s ease-out;
}

.loading.js-loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loading-inner {
    position: relative;
    width: clamp(280px, 28.4vw, 545px);
    aspect-ratio: 1 / 1;
}

.loading-letters,
.loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
}

.loading-letters {
    width: 100%;
    animation: loading-letters-spin 14s linear infinite;
}

.loading-icon {
    /* loading.png(400px) / loading-letters.png(545px) */
    width: 73.4%;
    animation: loading-icon-step 7s infinite;
}

@keyframes loading-letters-spin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes loading-icon-step {

    /* stop 1 → 120° */
    0%,
    23% {
        transform: translate(-50%, -50%) rotate(0deg);
        animation-timing-function: ease-in;
    }

    25% {
        transform: translate(-50%, -50%) rotate(-4deg);
        animation-timing-function: ease-out;
    }

    30% {
        transform: translate(-50%, -50%) rotate(125deg);
    }

    31.5% {
        transform: translate(-50%, -50%) rotate(118deg);
    }

    32.5% {
        transform: translate(-50%, -50%) rotate(121deg);
    }

    /* stop 2 → 240° */
    33%,
    56% {
        transform: translate(-50%, -50%) rotate(120deg);
        animation-timing-function: ease-in;
    }

    58% {
        transform: translate(-50%, -50%) rotate(116deg);
        animation-timing-function: ease-out;
    }

    63% {
        transform: translate(-50%, -50%) rotate(245deg);
    }

    64.5% {
        transform: translate(-50%, -50%) rotate(238deg);
    }

    65.5% {
        transform: translate(-50%, -50%) rotate(241deg);
    }

    /* stop 3 → 360° */
    66%,
    89% {
        transform: translate(-50%, -50%) rotate(240deg);
        animation-timing-function: ease-in;
    }

    91% {
        transform: translate(-50%, -50%) rotate(236deg);
        animation-timing-function: ease-out;
    }

    96% {
        transform: translate(-50%, -50%) rotate(365deg);
    }

    97.5% {
        transform: translate(-50%, -50%) rotate(358deg);
    }

    98.5% {
        transform: translate(-50%, -50%) rotate(361deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@media screen and (max-width:768px) {
    .loading {
        background-image: url(../images/bg-dots_sp.png);
        background-size: 6.4vw;
    }

    .loading-inner {
        width: 72.5vw;
    }
}

/* MV */

/* ---------- 共通ラッパ ---------- */
.mv {
    position: relative;
    width: 100%;
    height: 56.25vw;
    overflow: hidden;
    --mv-panel-h: 56.25vw;
    --mv-curve: 23vw;
}

/* ---------- 左側ロゴ（3デザイン共通・最前面） ---------- */
.mv-logo {
    position: absolute;
    top: var(--p100-spa);
    left: var(--p110-spa);
    width: 27.6vw;
    z-index: 10;
}

.mv-logo img {
    width: 100%;
    height: auto;
    display: block;
}

/* ---------- ステージ（背景層 + ビジュアル層のラッパ） ---------- */
.mv-stage {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.mv-bg-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.mv-bg-panel {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.mv-bg-current {
    z-index: 1;
}

.mv-bg-next {
    z-index: 2;
    transform: translateY(100%);
    transition: transform 0.8s ease;
}

.mv-bg-next.is-rising {
    transform: translateY(0);
    animation: mvCurveFlatten 0.5s ease-out forwards;
}

@keyframes mvCurveFlatten {
    0% {
        border-top-left-radius: 50% var(--mv-curve);
        border-top-right-radius: 50% var(--mv-curve);
    }

    55% {
        border-top-left-radius: 50% calc(var(--mv-curve) * 0.75);
        border-top-right-radius: 50% calc(var(--mv-curve) * 0.75);
    }

    100% {
        border-top-left-radius: 50% 0;
        border-top-right-radius: 50% 0;
    }
}

/* 背景色（背景パネル側） */
.bg-d1 {
    background-color: var(--red);
}

.bg-d2 {
    background-color: var(--pink);
}

.bg-d3 {
    background-color: var(--gray);
}

.mv-slider {
    position: absolute;
    inset: 0;
    z-index: 1;
    height: 100%;
}

.mv-slider .slick-list,
.mv-slider .slick-track {
    height: 100%;
}

.mv-slider:not(.slick-initialized) .mv-design {
    display: none;
}

.mv-slider:not(.slick-initialized) .mv-design:first-child {
    display: block;
}

.mv-design {
    position: relative;
    width: 100vw;
    max-width: 100%;
    height: var(--mv-panel-h);
}

/* ---------- 左右の帯画像（デザインごと固有） ---------- */
.mv-line {
    position: absolute;
    top: 0;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}

.mv-line img {
    height: 100%;
    width: var(--p60-spa);
    display: block;
}

.mv-line-left {
    left: 0;
}

.mv-line-right {
    right: 0;
}

.mv-visual {
    position: absolute;
    top: 0;
    right: var(--p140-spa);
    width: 60vw;
    height: 100%;
    z-index: 2;
}

.mv-cell {
    position: absolute;
}

.mv-cell::before,
.mv-cell::after {
    content: "";
    display: block;
    position: absolute;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 10;
}

.mv-bg {
    position: relative;
    width: 100%;
    height: 100%;
}

.mv-bg.sp-view {
    display: none;
}

.mv-item {
    position: absolute;
    display: block;
    z-index: 1;
    pointer-events: none;
    object-fit: cover;
}

/* ---------- D1 + D2 + D3 共通：セル位置 + サイズ ---------- */

.mv-d1_item1,
.mv-d2_item1,
.mv-d3_item1 {
    top: var(--p100-spa);
    left: 3vw;
    width: 33.8vw;
    height: 26vw;
}

.mv-d1_item2,
.mv-d2_item2,
.mv-d3_item2 {
    top: var(--p100-spa);
    right: 0;
    width: 21.3vw;
    height: 26vw;
}

.mv-d1_item3,
.mv-d2_item3,
.mv-d3_item3 {
    top: 33vw;
    left: 3vw;
    width: 17.7vw;
    height: 17.7vw;
}

.mv-d1_item4,
.mv-d2_item4,
.mv-d3_item4 {
    top: 33vw;
    left: 22.5vw;
    width: 17.7vw;
    height: 17.7vw;
}

.mv-d1_item5,
.mv-d2_item5,
.mv-d3_item5 {
    top: 33vw;
    right: 0;
    width: 17.7vw;
    height: 17.7vw;
}

/* ---------- D1 個別：deco + item ---------- */

.mv-d1_item1::before {
    background-image: url(../images/mv-d1_deco1.png);
    width: 10.7vw;
    height: 9.3vw;
    top: -2.9vw;
    left: -5vw;
}

.mv-d1_item1::after {
    background-image: url(../images/mv-d1_deco2.png);
    width: 4.6vw;
    height: 9.4vw;
    top: 6vw;
    right: -0.8vw;
}

.mv-d1_item1 .mv-item {
    width: 21.6vw;
    height: 29.2vw;
    top: -3.9vw;
    left: 8vw;
}

.mv-d1_item2::before {
    background-image: url(../images/mv-d1_deco3.png);
    width: 4vw;
    height: var(--p80-spa);
    top: -2vw;
    left: 8vw;
}

.mv-d1_item2 .mv-item {
    width: 20vw;
    height: 14.2vw;
    top: 6.5vw;
    left: 1.5vw;
}

.mv-d1_item3::before {
    background-image: url(../images/mv-d1_deco4.png);
    width: 5.3vw;
    height: var(--p110-spa);
    bottom: -0.8vw;
    left: 0;
}

.mv-d1_item3 .mv-item {
    width: 8vw;
    height: 13.8vw;
    top: 2vw;
    left: 5.5vw;
}

.mv-d1_item4::before {
    background-image: url(../images/mv-d1_deco5.png);
    width: 3vw;
    height: 3.4vw;
    top: 0.5vw;
    left: 0.5vw;
}

.mv-d1_item4 .mv-item {
    width: 11.6vw;
    height: 11.4vw;
    top: 3.5vw;
    left: 3.5vw;
}

.mv-d1_item5::before {
    background-image: url(../images/mv-d1_deco6.png);
    width: 11vw;
    height: var(--p100-spa);
    bottom: -1vw;
    right: -3vw;
}

.mv-d1_item5 .mv-item {
    width: 15.4vw;
    height: 12.7vw;
    top: 3.5vw;
    left: 1.5vw;
}

/* ---------- D2 個別：item ---------- */

.mv-d2_item1 .mv-item {
    width: 21vw;
    height: 28.4vw;
    top: -3.5vw;
    left: 7vw;
}

.mv-d2_item1::before {
    background-image: url(../images/mv-d2_deco1.png);
    width: 9.7vw;
    height: var(--p160-spa);
    top: -2.5vw;
    left: -3vw;
}

.mv-d2_item2 .mv-item {
    width: 17vw;
    height: 19.4vw;
    top: 2.5vw;
    left: 2.5vw;
}

.mv-d2_item2::before {
    background-image: url(../images/mv-d2_deco2.png);
    width: var(--p190-spa);
    height: var(--p160-spa);
    top: -2vw;
    left: -3.5vw;
}

.mv-d2_item3 .mv-item {
    width: 14.7vw;
    height: 13vw;
    top: 2vw;
    left: 1.5vw;
}

.mv-d2_item3::before {
    background-image: url(../images/mv-d2_deco4.png);
    width: 3.8vw;
    height: var(--p70-spa);
    bottom: 2vw;
    left: -1.5vw;
}

.mv-d2_item4 .mv-item {
    width: 13.5vw;
    height: 11.5vw;
    top: 3.5vw;
    left: 3vw;
}

.mv-d2_item5 .mv-item {
    width: 17.4vw;
    height: 13vw;
    top: 2.5vw;
    left: 0.5vw;
}

.mv-d2_item5::before {
    background-image: url(../images/mv-d2_deco3.png);
    width: 8vw;
    height: 7vw;
    top: -3vw;
    right: -2.5vw;
}

.mv-d2_item5::after {
    background-image: url(../images/mv-d2_deco5.png);
    width: 4.7vw;
    height: 9vw;
    bottom: -6vw;
    right: -2vw;
}

/* ---------- D3 個別：item ---------- */

.mv-d3_item1 .mv-item {
    width: 22vw;
    height: 29vw;
    top: -3.5vw;
    left: 7vw;
}

.mv-d3_item1::before {
    background-image: url(../images/mv-d3_deco1.png);
    width: 7vw;
    height: var(--p100-spa);
    top: -3vw;
    left: -4.5vw;
}

.mv-d3_item1::after {
    background-image: url(../images/mv-d3_deco2.png);
    width: 9.2vw;
    height: var(--p150-spa);
    top: 9vw;
    right: -5vw;
}

.mv-d3_item2 .mv-item {
    width: var(--p190-spa);
    height: 19.3vw;
    top: 2.5vw;
    left: 6.5vw;
}

.mv-d3_item2::before {
    background-image: url(../images/mv-d3_deco3.png);
    width: 2.1vw;
    height: var(--p70-spa);
    top: 2.5vw;
    right: 2.5vw;
}

.mv-d3_item3 .mv-item {
    width: 13.4vw;
    height: 13vw;
    top: 2.3vw;
    left: 2.3vw;
}

.mv-d3_item3::before {
    background-image: url(../images/mv-d3_deco4.png);
    width: 4.3vw;
    height: var(--p120-spa);
    top: -5vw;
    left: 0;
}

.mv-d3_item4 .mv-item {
    width: 13vw;
    height: 11vw;
    top: 3.5vw;
    left: 3vw;
}

.mv-d3_item4::before {
    background-image: url(../images/mv-d3_deco7.png);
    width: 5.7vw;
    height: 4.4vw;
    bottom: -1vw;
    left: -0.5vw;
}

.mv-d3_item4::after {
    background-image: url(../images/mv-d3_deco5.png);
    width: 1.5vw;
    height: var(--p50-spa);
    top: -1vw;
    right: 1.5vw;
}

.mv-d3_item5 .mv-item {
    width: 12.7vw;
    height: 14vw;
    top: 2.5vw;
    left: 2.8vw;
}

.mv-d3_item5::before {
    background-image: url(../images/mv-d3_deco6.png);
    width: 6vw;
    height: 8vw;
    top: -6vw;
    right: -1vw;
}

/* ---------- MV エントランスアニメーション ---------- */

.mv-bg,
.mv-item,
.mv-cell::before,
.mv-cell::after {
    opacity: 0;
}

.mv-bg,
.mv-cell::before,
.mv-cell::after {
    transition: opacity 0.3s ease;
}

.mv-item {
    transform: scale(0.9);
    transition: opacity 0.35s ease, transform 0.6s ease;
}

.mv-shown .mv-bg,
.mv-shown .mv-cell::before,
.mv-shown .mv-cell::after {
    opacity: 1;
}

.mv-shown .mv-item {
    opacity: 1;
    transform: scale(1);
    transition: opacity 1.5s ease, transform 0.6s ease;
}

.mv-shown .mv-d1_item1 .mv-item,
.mv-shown .mv-d2_item1 .mv-item,
.mv-shown .mv-d3_item1 .mv-item {
    transition-delay: 0.3s;
}

.mv-shown .mv-d1_item2 .mv-item,
.mv-shown .mv-d2_item2 .mv-item,
.mv-shown .mv-d3_item2 .mv-item {
    transition-delay: 0.7s;
}

.mv-shown .mv-d1_item3 .mv-item,
.mv-shown .mv-d2_item3 .mv-item,
.mv-shown .mv-d3_item3 .mv-item {
    transition-delay: 1.1s;
}

.mv-shown .mv-d1_item4 .mv-item,
.mv-shown .mv-d2_item4 .mv-item,
.mv-shown .mv-d3_item4 .mv-item {
    transition-delay: 1.5s;
}

.mv-shown .mv-d1_item5 .mv-item,
.mv-shown .mv-d2_item5 .mv-item,
.mv-shown .mv-d3_item5 .mv-item {
    transition-delay: 1.9s;
}

/* ---------- 装飾（擬似要素）の継続アニメーション ---------- */

/* --- 共通キーフレーム（種類別） --- */

/* ぐるぐる回転 */
@keyframes mvRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* 左右ゆらゆら（傾き） */
@keyframes mvSway {

    0%,
    100% {
        transform: rotate(-10deg);
    }

    50% {
        transform: rotate(10deg);
    }
}

/* 上下にふわふわ */
@keyframes mvFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-22px);
    }
}

/* 左右にスライド */
@keyframes mvDrift {

    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(20px);
    }
}

/* 拡大縮小で鼓動 */
@keyframes mvPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.28);
    }
}

@keyframes mvWiggle {

    0%,
    100% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(12deg);
    }

    75% {
        transform: rotate(-12deg);
    }
}

@keyframes mvTwinkle {

    0%,
    20% {
        opacity: 1;
    }

    25% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* --- アニメーション割り当て --- */

/* D1 */
.mv-shown .mv-d1_item1::before {
    animation: mvSway 3.3s ease-in-out 0.3s infinite both;
}

.mv-shown .mv-d1_item1::after {
    animation: mvFloat 2.5s ease-in-out 0.3s infinite both;
}

.mv-shown .mv-d1_item2::before {
    animation: mvFloat 2.8s ease-in-out 0.3s infinite both;
}

.mv-shown .mv-d1_item3::before {
    animation: none;
}

.mv-shown .mv-d1_item4::before {
    animation: mvWiggle 2.1s ease-in-out 0.3s infinite both;
}

.mv-shown .mv-d1_item5::before {
    animation: none;
}

/* D2 */
.mv-shown .mv-d2_item1::before {
    animation: none;
}

.mv-shown .mv-d2_item2::before {
    animation: mvSway 2.5s ease-in-out 0.3s infinite both;
}

.mv-shown .mv-d2_item3::before {
    animation: mvRotate 10s linear 0.3s infinite both;
}

.mv-shown .mv-d2_item5::before {
    animation: none;
}

.mv-shown .mv-d2_item5::after {
    animation: mvFloat 2.5s ease-in-out 0.3s infinite both;
}

/* D3 */
.mv-shown .mv-d3_item1::before {
    animation: mvFloat 2.8s ease-in-out 0.3s infinite both;
}

.mv-shown .mv-d3_item1::after {
    animation: mvSway 2.8s ease-in-out 0.3s infinite both;
}

.mv-shown .mv-d3_item2::before {
    animation: mvPulse 2.1s ease-in-out 0.3s infinite both;
}

.mv-shown .mv-d3_item3::before {
    animation: mvTwinkle 3s ease 0.3s infinite forwards;
}

.mv-shown .mv-d3_item4::before {
    animation: mvPulse 2.5s ease-in-out 0.3s infinite both;
}

.mv-shown .mv-d3_item4::after {
    animation: mvPulse 2.1s ease-in-out 0.3s infinite both;
}

.mv-shown .mv-d3_item5::before {
    animation: none;
}

/* ---------- SP用 MV（768px 以下） ---------- */

@media screen and (max-width: 768px) {

    .mv {
        height: auto;
        overflow: visible;
        --mv-panel-h: 124vw;
    }

    .mv-stage {
        position: relative;
    }

    .mv-line {
        display: none;
    }

    .mv-slider .slick-list {
        overflow-x: clip;
        overflow-y: visible;
    }

    .mv-bg.pc-view {
        display: none;
    }

    .mv-bg.sp-view {
        display: block;
    }

    .mv-logo-sp {
        position: relative;
        width: 46vw;
        margin: var(--p15-spa) auto;
        z-index: 5;
    }

    .mv-logo-sp img {
        width: 100%;
        height: auto;
        display: block;
    }

    .mv-slider {
        position: relative;
        inset: auto;
        width: 100%;
        height: auto;
    }

    .mv-slider .slick-list,
    .mv-slider .slick-track {
        height: auto;
    }

    .mv-design {
        width: 100vw;
        max-width: 100%;
    }

    .mv-visual {
        position: relative;
        inset: auto;
        right: auto;
        top: auto;
        width: 100%;
        height: 100%;
    }

    .mv-d1_item1,
    .mv-d2_item1,
    .mv-d3_item1 {
        top: var(--p25-spa);
        left: var(--p25-spa);
        width: 49.3vw;
        height: var(--p200-spa);
    }

    .mv-d1_item1::before {
        width: 22.1vw;
        height: 19.2vw;
        top: -9.9vw;
        left: -4vw;
    }

    .mv-d1_item1::after {
        width: 10.4vw;
        height: var(--p80-spa);
        top: 19vw;
        right: -6.7vw;
    }

    .mv-d1_item1 .mv-item {
        width: 37.6vw;
        height: 51.5vw;
        top: -2.9vw;
        left: 8vw;
    }

    .mv-d1_item2,
    .mv-d2_item2,
    .mv-d3_item2 {
        top: 66.6vw;
        left: var(--p25-spa);
        width: 49.3vw;
        height: 43.5vw;
    }

    .mv-d1_item2::before {
        width: 9.1vw;
        height: var(--p35-spa);
        top: -54vw;
        left: auto;
        right: -41vw;
    }

    .mv-d1_item2 .mv-item {
        width: 40.7vw;
        height: 27.6vw;
        top: 8vw;
        left: 5vw;
    }

    .mv-d1_item3,
    .mv-d2_item3,
    .mv-d3_item3 {
        top: var(--p25-spa);
        right: var(--p30-spa);
        left: auto;
        width: 31.2vw;
        height: 31.2vw;
    }

    .mv-d1_item3::before {
        width: 13.6vw;
        height: var(--p55-spa);
        bottom: -74vw;
        left: -58vw;
    }

    .mv-d1_item3 .mv-item {
        width: 13.8vw;
        height: 23.4vw;
        top: 4vw;
        left: 9vw;
    }

    .mv-d1_item4,
    .mv-d2_item4,
    .mv-d3_item4 {
        top: 41.9vw;
        right: var(--p30-spa);
        left: auto;
        width: 33.3vw;
        height: 33.3vw;
    }

    .mv-d1_item4::before {
        width: 7.7vw;
        height: 8.5vw;
        bottom: -37vw;
        top: auto;
        left: 30vw;
    }

    .mv-d1_item4 .mv-item {
        width: 21.4vw;
        height: 20.3vw;
        top: 7vw;
        left: 7vw;
    }

    .mv-d1_item5,
    .mv-d2_item5,
    .mv-d3_item5 {
        top: 79.5vw;
        right: var(--p30-spa);
        left: auto;
        width: 30.6vw;
        height: 30.6vw;
    }

    .mv-d1_item5::before {
        display: none;
    }

    .mv-d1_item5 .mv-item {
        width: 27.9vw;
        height: 20vw;
        top: 5vw;
        left: 2vw;
    }

    .mv-d2_item1 .mv-item {
        width: 36.5vw;
        height: 50vw;
        top: -2.6vw;
        left: 7vw;
    }

    .mv-d2_item1::before {
        width: 19.8vw;
        height: 16.7vw;
        top: -5vw;
        left: -4vw;
    }

    .mv-d2_item2 .mv-item {
        width: 34.7vw;
        height: 37.6vw;
        top: 3.1vw;
        left: 8.3vw;
    }

    .mv-d2_item2::before {
        width: 22.3vw;
        height: 18.7vw;
        top: 30vw;
        left: -3vw;
    }

    .mv-d2_item3 .mv-item {
        width: 25.4vw;
        height: 22.1vw;
        top: 4vw;
        left: 2.5vw;
    }

    .mv-d2_item3::before {
        width: 8.6vw;
        height: 8.1vw;
        bottom: 22vw;
        left: 27vw;
    }

    .mv-d2_item4 .mv-item {
        width: 25vw;
        height: 20.5vw;
        top: 7vw;
        left: 6vw;
    }

    .mv-d2_item5 .mv-item {
        width: 31.5vw;
        height: 20.5vw;
        top: 3.6vw;
        left: 0.7vw;
    }

    .mv-d2_item5::before {
        width: 16vw;
        height: 13.8vw;
        top: -10vw;
        right: -4vw;
    }

    .mv-d2_item5::after {
        display: none;
    }

    .mv-d3_item1 .mv-item {
        width: 38.3vw;
        height: 51vw;
        top: -2.6vw;
        left: 7vw;
    }

    .mv-d3_item1::before {
        background-image: url(../images/mv-d3_deco1_sp.png);
        width: 7.7vw;
        height: 9.6vw;
        top: -2vw;
        left: 54vw;
    }

    .mv-d3_item1::after {
        width: 19.2vw;
        height: 15.9vw;
        top: 57vw;
        right: -9vw;
    }

    .mv-d3_item2 .mv-item {
        width: 19.2vw;
        height: 37.4vw;
        top: 3.1vw;
        left: 15.6vw;
    }

    .mv-d3_item2::before {
        width: 5.8vw;
        height: 9.3vw;
        top: -10vw;
        right: -39vw;
    }

    .mv-d3_item3 .mv-item {
        width: 23.2vw;
        height: 22.1vw;
        top: 4.6vw;
        left: 3.8vw;
    }

    .mv-d3_item3::before {
        width: 9.9vw;
        height: 14.5vw;
        top: -11vw;
        left: -53vw;
    }

    .mv-d3_item4 .mv-item {
        width: 24.1vw;
        height: 19.6vw;
        top: 7vw;
        left: 5vw;
    }

    .mv-d3_item4::before {
        width: 13.1vw;
        height: 10.1vw;
        bottom: -24vw;
        left: -56vw;
    }

    .mv-d3_item4::after {
        display: none;
    }

    .mv-d3_item5 .mv-item {
        width: 23vw;
        height: 25.1vw;
        top: 3.6vw;
        left: 3.7vw;
    }

    .mv-d3_item5::before {
        width: 13.8vw;
        height: 18.4vw;
        top: -12vw;
        right: -2vw;
    }


    .mv-underbar {
        position: relative;
        top: -8vw;
        margin-bottom: -8vw;
        width: 100%;
        z-index: 5;
    }

    .mv-underbar img {
        width: 100%;
        height: auto;
        display: block;
    }

}


/* menu */

.menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 34vw;
    height: 100vh;
    background-color: #fff;
    background-image: url(../images/bg-dots_pc.png);
    background-repeat: repeat;
    transition: 0.7s;
    z-index: 555;
    border-radius: 0 0 0 var(--p60-spa);
}

.menu.open {
    right: 0;
    transition: 0.5s;
}

.hamburger {
    width: var(--p90-spa);
    height: var(--p90-spa);
    min-width: 50px;
    min-height: 50px;
    background-color: var(--black);
    border-radius: 50%;
    position: fixed;
    top: var(--p20-spa);
    right: 1.7vw;
    z-index: 1200;
    cursor: pointer;
}

.hamburger span {
    content: "";
    display: block;
    width: 50%;
    height: 3px;
    background-color: #fff;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.hamburger span:nth-child(1) {
    top: calc(37% - 1.5px);
    transition: 0.5s;
}

.hamburger span:nth-child(2) {
    top: calc(50% - 1.5px);
    transition: 0.5s;
}

.hamburger span:nth-child(3) {
    top: calc(63% - 1.5px);
    transition: 0.5s;
}

.hamburger.close span:nth-child(1) {
    transform: translateX(-50%) rotate(35deg);
    top: calc(50% - 1.5px);
    transition: 0.5s;
}

.hamburger.close span:nth-child(2) {
    opacity: 0;
    transition: 0.5s;
}

.hamburger.close span:nth-child(3) {
    transform: translateX(-50%) rotate(-35deg);
    top: calc(50% - 1.5px);
    transition: 0.5s;
}

.menu .menu-lists {
    padding: min(8.9vw, 15.74vh) var(--p120-spa) 0 var(--p130-spa);
}

.menu .menu-lists ul li {
    margin-bottom: var(--p55-spa);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: 0.3s;
    font-family: var(--ff-mplus);
}

.menu .menu-lists ul li::after {
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    background-image: url(../images/menu-arrow_b.png);
    background-repeat: no-repeat;
    background-size: contain;
    transition: 0.3s;
}

.menu .menu-lists ul li a {
    color: var(--blue);
    font-family: var(--ff-showa);
    font-size: var(--30to45);
    letter-spacing: var(--lsp-50);
    transition: 0.3s;
    width: 100%;
    padding-left: 58px;
    position: relative;
}

.menu .menu-lists ul li a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 2.2vw;
    height: 1.3vw;
    background-image: url(../images/hbg-rbn.png);
    background-size: contain;
    background-repeat: no-repeat;
    margin-top: 1.2vw;
    min-width: 35px;
    min-height: 20px;
}

.menu .menu-lists ul li:hover a {
    color: var(--yellow);
    transition: 0.3s;
}

.menu .menu-lists ul li:hover {
    color: var(--yellow);
    transition: 0.3s;
}

.menu .menu-lists ul li:hover::after {
    background-image: url(../images/menu-arrow.png);
    background-repeat: no-repeat;
}

.menu .menu-lists ul li a span {
    font-family: var(--ff-mplus);
    font-weight: 900;
    font-size: var(--16to24);
    letter-spacing: var(--lsp-50);
    display: block;
    margin-bottom: 15px;
}


@media screen and (max-width:1500px) {

    .menu .menu-lists ul li {
        margin-bottom: var(--p55-spa);
    }

}

@media screen and (max-width:1200px) {

    .menu {
        width: 45vw;
    }

    .menu .menu-lists {
        padding: min(8.9vw, 15.74vh) var(--p60-spa) 0 var(--p60-spa);
    }
}

@media screen and (max-width:1100px) {

    .menu .menu-lists {
        padding: var(--p170-spa) var(--p20-spa) 0 var(--p60-spa);
    }

}

@media screen and (max-width:768px) {

    .hamburger {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        top: 18px;
        right: 18px;
        border-radius: 50%;
    }

    .hamburger span {
        height: 2px;
    }

    .hamburger span:nth-child(1) {
        top: calc(50% - 7px);
    }

    .hamburger span:nth-child(2) {
        top: calc(50% - 1px);
    }

    .hamburger span:nth-child(3) {
        top: calc(50% + 5px);
    }

    .hamburger.close span:nth-child(1) {
        top: calc(50% - 1px);
    }

    .hamburger.close span:nth-child(3) {
        top: calc(50% - 1px);
    }

    .menu {
        width: 100%;
        background-image: url(../images/bg-dots_sp.png);
        background-size: 6.4vw;
        border-radius: 0;
    }

    .menu .menu-lists {
        padding: 29vw 6.5% 0 6.5%;
    }

    .menu .menu-lists ul li {
        margin-bottom: var(--p35-spa);
    }

    .menu .menu-lists ul li a {
        font-size: 8vw;
    }

    .menu .menu-lists ul li a::before {
        width: 8vw;
        height: 4.8vw;
        margin-top: 4vw;
        min-width: 30px;
        min-height: 18px;
    }

    .menu .menu-lists ul li a span {
        font-size: 4.3vw;
        margin-bottom: 0;
    }


}


/* 共通 */


/* about */

.about {
    padding: var(--p170-spa) 7.8vw 2vw;
    background-color: var(--blue);
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.2) 2px, transparent 2px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 2px, transparent 2px);
    background-size: var(--p80-spa) var(--p80-spa);
    background-position: -2px 0, 0 -2px;
    position: relative;
}

.about h2 {
    position: absolute;
    top: 0;
    right: 28.6vw;
    width: var(--p250-spa);
    z-index: 20;
}

.about h2 img {
    width: 100%;
}

.about .wrap {
    position: relative;
    z-index: 10;
    text-align: center;
    background-color: #fff;
    width: 73vw;
    border-radius: var(--p60-spa);
    margin-left: auto;
    margin-right: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 3.4vw;
    padding: 4.9vw var(--p50-spa) var(--p80-spa) var(--p130-spa);
}

.about .wrap::before {
    content: "";
    display: block;
    width: 100%;
    height: var(--p130-spa);
    background-color: var(--red);
    border-radius: 0 0 var(--p60-spa) var(--p60-spa);
    position: absolute;
    bottom: 0;
    left: 0;
}

.about .wrap>img {
    width: 25.8vw;
    position: relative;
    z-index: 5;
}

.about .wrap .inner .m-copy {
    color: var(--blue);
    font-family: var(--ff-mplus);
    margin-bottom: var(--p20-spa);
}

.about .wrap .inner .m-copy .fs-50 {
    font-size: var(--35to50);
}

.about .wrap .inner .m-copy .fs-30 {
    font-size: var(--20to30);
}

.about .wrap .inner .m-copy .fs-35 {
    font-size: var(--20to35);
}

.about .wrap .inner .m-copy .fs-65 {
    font-size: var(--38to65);
}

.about .wrap .inner .m-copy .fs-40 {
    font-size: var(--25to40);
}

.about .wrap .inner .m-copy .fs-55 {
    font-size: var(--25to55);
}

.about .wrap .inner .sub-copy {
    color: var(--black);
    font-family: var(--ff-zmaru);
    font-size: var(--18to30);
    font-weight: var(--fw-600);
    line-height: var(--lh-20);
}

@media screen and (max-width:1100px) {
    .about .wrap {
        gap: 2.5vw;
        padding: 4.9vw var(--p50-spa) var(--p80-spa) var(--p50-spa);
        min-height: 400px;
    }
}

@media screen and (max-width:768px) {

    .about {
        padding: var(--p85-spa) 0 0;
        background-image:
            linear-gradient(to right, rgba(255, 255, 255, 0.2) 2px, transparent 2px),
            linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 2px, transparent 2px);
        background-size: 11.2vw 11.2vw;
        background-position: -1px 0, 0 -1px;
        position: relative;
    }

    .about h2 {
        right: auto;
        left: 50%;
        transform: translateX(-50%);
        width: 35.2vw;
    }

    .about .wrap {
        width: 100%;
        border-radius: var(--p40-spa) var(--p40-spa) 0 0;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
        gap: var(--p30-spa);
        padding: var(--p50-spa) var(--p30-spa) var(--p90-spa);
        z-index: auto;
    }

    .about .wrap::before {
        height: var(--p140-spa);
        border-radius: 0;
    }

    .about .wrap>img {
        width: 68vw;
    }

    .about .wrap .inner .m-copy {
        margin-bottom: var(--p20-spa);
    }

    .about .wrap .inner .sub-copy {
        color: var(--black);
        font-family: var(--ff-zmaru);
        font-size: var(--18to30);
        font-weight: var(--fw-600);
        line-height: var(--lh-20);
    }

}

/* notice */

.notice,
.items,
.information {
    position: relative;
    z-index: 1;
    border-radius: var(--p120-spa) var(--p120-spa) 0 0;
    margin-top: calc(var(--p120-spa) * -1);
}

.notice {
    background-image: url(../images/bg-kitty.png);
    background-repeat: repeat;
    padding-top: 4vw;
    padding-left: 13.5vw;
    padding-right: 13.5vw;
    padding-bottom: 16vw;
    z-index: 1;
}

.notice h2 {
    width: var(--p250-spa);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--p60-spa);
}

.notice h2 img {
    width: 100%;
}

.notice-ttl {
    margin-bottom: var(--p120-spa);
    position: relative;
}

.notice-ttl::before,
.notice-ttl::after {
    content: "";
    display: block;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
}

.notice-ttl::before {
    background-image: url(../images/notice-deco1.png);
    width: 12.1vw;
    height: var(--p200-spa);
    top: -1.2vw;
    left: 11vw;
}

.notice-ttl::after {
    background-image: url(../images/notice-deco2.png);
    width: 13vw;
    height: 11.5vw;
    top: -2.1vw;
    right: 11vw;
}


.notice-ttl p {
    font-size: var(--26to40);
    font-family: var(--ff-mplus);
    font-weight: var(--fw-900);
    text-align: center;
    color: var(--blue);
    letter-spacing: var(--lsp-50);
}

.notice-ttl p .c-red>span {
    position: relative;
    display: inline-block;
}

.notice-ttl p .c-red>span::before {
    content: "";
    position: absolute;
    top: -0.15em;
    left: 50%;
    transform: translateX(-50%);
    width: 0.25em;
    height: 0.25em;
    background-color: var(--red);
    border-radius: 50%;
}

.notice .wrap {
    width: 100%;
    background-color: #fff;
    border-radius: 30px;
    position: relative;
    padding: var(--p80-spa) var(--p110-spa) var(--p120-spa);
}

.notice .wrap1 {
    margin-bottom: var(--p60-spa);
}

.notice .wrap h3 {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    position: relative;
    cursor: pointer;
    padding-bottom: var(--p50-spa);
}

.notice .wrap .acc-body {
    padding-top: var(--p60-spa);
}

.notice .wrap h3.is-open+.acc-body {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 7'><circle cx='3.5' cy='3.5' r='2.5' fill='%230075C2'/></svg>");
    background-size: 14px 7px;
    background-repeat: repeat-x;
    background-position: top center;
}

.notice .wrap h3 .ttl {
    grid-column: 2;
    text-align: center;
    font-size: var(--18to35);
    font-family: var(--ff-mplus);
    color: var(--blue);
    font-weight: var(--fw-900);
    letter-spacing: var(--lsp-50);
}

.notice .wrap h3 .acc-btn {
    grid-column: 3;
    justify-self: end;
    width: var(--p50-spa);
    height: var(--p50-spa);
    min-width: 50px;
    min-height: 50px;
    border: none;
    padding: 0;
    border-radius: 50%;
    background-color: var(--blue);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23fff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;
    cursor: pointer;
    transition: transform 0.3s;
}

.notice .wrap h3.is-open .acc-btn {
    transform: rotate(180deg);
}

.notice .wrap h3.acc-head:not(.is-open) {
    padding-bottom: 0;
}

.notice .wrap:has(.acc-head:not(.is-open)) {
    padding-bottom: var(--p80-spa);
}

.notice .wrap h3 img {
    width: 100%;
}

.notice .wrap .desc {
    font-size: var(--16to26);
    line-height: var(--lh-22);
    letter-spacing: var(--lsp-80);
    text-align: center;
    font-weight: var(--fw-600);
    margin-bottom: var(--p50-spa);
}

.notice .wrap .desc.desc-upper {
    margin-bottom: var(--p20-spa);
}

.notice .wrap .desc .red {
    color: var(--red);
    font-weight: var(--fw-900);
}

.notice .wrap .term {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 60px;
}

.notice .wrap .term dl {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--p40-spa);
    margin-bottom: var(--p20-spa);
    width: 100%;
}

.notice .wrap .term dl dt {
    width: 16.6vw;
}

.notice .wrap .term dl dt img {
    width: 100%;
}

.notice .wrap .term dl dd {
    font-size: var(--14to22);
    letter-spacing: var(--lsp-50);
    line-height: var(--lh-22);
}

.notice .link-btn {
    margin-bottom: var(--p80-spa);
    width: 31.2vw;
    margin-left: auto;
    margin-right: auto;
}

.notice .link-btn a {
    font-size: var(--16to26);
    padding: var(--p45-spa) var(--p20-spa);
}

.notice .points1 {
    background-color: var(--l-gray);
    padding: var(--p60-spa);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    column-gap: var(--p40-spa);
    border-radius: var(--p40-spa);
}

.notice .points1 ul li {
    color: var(--d-gray);
    font-size: var(--14to18);
    letter-spacing: var(--lsp-30);
    line-height: var(--lh-20);
    margin-bottom: var(--p15-spa);
    text-indent: -1.5em;
    position: relative;
}

.notice .points1 ul li::before {
    content: "※";
    margin-right: 5px;
}

.notice .wrap .points2 {
    background-color: var(--l-gray);
    padding: var(--p40-spa) var(--p60-spa);
    border-radius: var(--p40-spa);
}

.notice .points2 ul li {
    color: var(--d-gray);
    font-size: var(--14to18);
    letter-spacing: var(--lsp-30);
    line-height: var(--lh-20);
    text-indent: -1em;
    position: relative;
}

.notice .points2 ul li::before {
    content: "※";
    margin-right: 5px;
}

@media screen and (max-width:1700px) {
    .notice .wrap .term {
        width: 90%;
    }

    .notice .wrap .term dl dt {
        width: 35%;
    }

    .notice .wrap .term dl dd {
        width: 65%;
    }
}

@media screen and (max-width:1200px) {

    .notice-ttl::before {
        left: 4vw;
    }

    .notice-ttl::after {
        right: 4vw;
    }

}

@media screen and (max-width:768px) {

    .notice,
    .items,
    .information {
        border-radius: var(--p40-spa) var(--p40-spa) 0 0;
        margin-top: calc(var(--p40-spa) * -1);
    }

    .notice {
        padding-left: var(--p25-spa);
        padding-right: var(--p25-spa);
        padding-bottom: var(--p80-spa);
        padding-top: 0;
        background-image: url(../images/bg-kitty_sp.png);
    }

    .notice h2 {
        width: 35.2vw;
        margin-bottom: var(--p30-spa);
    }

    .notice-ttl {
        margin-bottom: 48vw;
    }

    .notice-ttl::before {
        width: 31.2vw;
        height: var(--p100-spa);
        left: 8vw;
        top: 22.8vw;
    }

    .notice-ttl::after {
        width: 33.6vw;
        height: 29.3vw;
        right: 8vw;
        top: 19.9vw;
    }

    .notice .wrap {
        padding: var(--p30-spa) var(--p25-spa) var(--p50-spa);
        border-radius: 10px;
        margin-bottom: var(--p30-spa);
    }

    .notice .wrap .acc-body {
        padding-top: var(--p35-spa);
    }

    .notice .wrap h3.is-open+.acc-body {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'><circle cx='4' cy='2.5' r='1.5' fill='%230075C2'/></svg>");
        background-size: 8px 5px;
    }

    .notice .wrap:has(.acc-head:not(.is-open)) {
        padding-bottom: 9vw;
    }

    .notice .wrap h3 {
        padding-bottom: var(--p20-spa);
    }

    .notice .wrap h3 .acc-btn {
        width: 6.9vw;
        height: 6.9vw;
        min-width: 26px;
        min-height: 26px;
    }

    .notice .wrap .desc {
        margin-bottom: var(--p25-spa);
        letter-spacing: var(--lsp-10);
    }

    .notice .wrap .term {
        width: 100%;
        margin-bottom: 35px;
    }

    .notice .wrap .term dl {
        flex-direction: column;
        gap: var(--p15-spa);
    }

    .notice .wrap .term dl dt {
        width: 73.3vw;
    }

    .notice .wrap .term dl dd {
        width: 100%;
        letter-spacing: var(--lsp-10);
        text-align: center;
    }

    .notice .link-btn {
        width: 100%;
        margin-bottom: var(--p40-spa);
    }

    .notice .link-btn a {
        padding: 4.8vw var(--p20-spa);
    }

    .notice .points1 {
        flex-direction: column;
        background-color: #fff;
        padding: 0 0 0 14px;

    }

    .notice .points1 ul li {
        font-size: 1.2rem;
        margin-bottom: 15px;
    }

    .notice .wrap .points2 {
        background-color: #fff;
        padding: 0 0 0 14px;
    }

    .notice .points2 ul li {
        font-size: 1.2rem;
    }

}

@media screen and (max-width:500px) {
    .notice-ttl::before {
        top: 33.8vw;
    }

    .notice-ttl::after {
        top: 30.9vw;
    }
}

/* items */

.items {
    background-image: url(../images/bg-dots_pc.png);
    padding: 0;
}

.items section {
    padding-bottom: 24.4vw;
}

.items h2 {
    width: var(--p250-spa);
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--p60-spa);
}

.items h2 img {
    width: 100%;
}

.items-intro {
    margin-bottom: var(--p150-spa);
}

.items-intro>p {
    font-size: var(--16to32);
    font-family: var(--ff-mplus);
    font-weight: var(--fw-800);
    line-height: var(--lh-20);
    text-align: center;
    margin-bottom: var(--p80-spa);
}

.card-wrap {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: var(--p85-spa);
    perspective: 1000px;
}

.card-wrap .card {
    width: 22vw;
    height: 32.7vw;
    border-radius: var(--p50-spa);
    padding: var(--p50-spa) var(--p20-spa) 0;
    text-align: center;
    position: relative;
    display: block;
    text-decoration: none;
    color: inherit;
    transform-style: preserve-3d;
    transition: 0.3s ease;
}

.card-wrap .card::before {
    content: '';
    position: absolute;
    left: -1vw;
    bottom: -3vw;
    width: 25vw;
    height: 34.7vw;
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: contain;
    transform: translateZ(-1px);
    transition: 0.3s ease;
    pointer-events: none;
}

.card-wrap .card:hover {
    transform: scale(1.01);
    transition: 0.3s ease;
}

.card-wrap .card .face,
.card-wrap .card .age {
    margin-left: auto;
    margin-right: auto;
}

.card-wrap .card .face {
    margin-bottom: var(--p35-spa);
    object-fit: contain;
}

.card-wrap .card-d1 .face {
    width: 11.82vw;
    height: 7.6vw;
}

.card-wrap .card-d2 .face {
    width: 10.31vw;
    height: 7.6vw;
}

.card-wrap .card-d3 .face {
    width: 10.22vw;
    height: 7.6vw;
}

.card-wrap .card .age {
    width: 12.9vw;
    margin-bottom: var(--p30-spa);
    position: relative;
}

.card-wrap .card .age-line {
    display: block;
    width: 100%;
    height: 5px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 5'><circle cx='6.5' cy='2.5' r='2.5' fill='%23ffffff'/></svg>");
    background-size: 13px 5px;
    background-repeat: round no-repeat;
    background-position: left center;
    margin-bottom: var(--p35-spa);
}

.card-wrap .card-d1 {
    background-color: var(--red);
}

.card-wrap .card-d2 {
    background-color: var(--pink);
}

.card-wrap .card-d3 {
    background-color: var(--gray);
}

.card-wrap .card-d1::before {
    background-image: url(../images/items-d1-cardbg.png);
}

.card-wrap .card-d2::before {
    background-image: url(../images/items-d2-cardbg.png);
}

.card-wrap .card-d3::before {
    background-image: url(../images/items-d3-cardbg.png);
}

.card-wrap .card p {
    font-size: var(--12to18);
    color: #fff;
    font-family: var(--ff-zmaru);
    font-weight: var(--fw-900);
    line-height: var(--lh-20);
    letter-spacing: var(--lsp-50);
}


/* items1 / items2 / items3 共通 */

.items1,
.items2,
.items3 {
    position: relative;
    background-color: transparent;
}

.items1 h3 img,
.items2 h3 img,
.items3 h3 img {
    width: 100%;
}


.items1-group,
.items2-group,
.items3-group {
    position: relative;
}

.items1-group::before,
.items2-group::before,
.items3-group::before {
    content: '';
    position: absolute;
    top: -18vw;
    left: 50%;
    transform: translateX(-50%);
    width: 47px;
    height: 45px;
    background-image: none;
    -webkit-mask-image: url(../images/items-heart.svg);
    mask-image: url(../images/items-heart.svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    z-index: 2;
    pointer-events: none;
}

.items .pd-group h3 {
    margin-bottom: var(--p80-spa);
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.items .pd-group h3::before {
    content: "";
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
}

.items .pd-group .items-mv {
    width: 78vw;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: var(--p85-spa);
}

.items .pd-group .main-items .group {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--p120-spa);
    margin-bottom: var(--p40-spa);
    width: 62.5vw;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.items .pd-group .main-items .group::before,
.items .pd-group .main-items .group::after {
    content: "";
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
}

.items .pd-group .main-items .group:nth-child(2) {
    flex-direction: row-reverse;
    text-align: right;
}

.items .pd-group .main-items .group:nth-child(3) {
    margin-bottom: var(--p120-spa);
}

.items .pd-group .main-items .group .item-img {
    width: 26vw;
    height: 26vw;
    border-radius: 50%;
    position: relative;
}

.items .pd-group .main-items .group .item-img img {
    object-fit: cover;
}

.items .pd-group .main-items .group .item-cont {
    font-family: var(--ff-mplus);
    color: #fff;
}

.items .pd-group .main-items .group .item-cont h4 {
    font-size: var(--20to38);
    margin-bottom: var(--p20-spa);
}

.items .pd-group .main-items .group .item-cont .price {
    font-size: var(--22to35);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: var(--p20-spa);
}

.items .pd-group .main-items .group:nth-child(2) .item-cont .price {
    justify-content: flex-end;
}

.items .pd-group .main-items .group .item-cont .price .tax {
    font-size: var(--12to20);
    margin-left: 5px;
}

.items .pd-group .main-items .group .item-cont .size {
    font-size: var(--12to16);
    font-family: var(--ff-noto);
    letter-spacing: var(--lsp-50);
    margin-bottom: var(--p25-spa);
}

.items .pd-group .main-items .group .item-cont .buy {
    width: 15.6vw;
    border-radius: 100px;
    transition: 0.3s;
}

.items .pd-group .main-items .group:nth-child(2) .item-cont .buy {
    margin-left: auto;
}

.items .pd-group .main-items .group .item-cont .buy a {
    display: block;
    width: 100%;
    padding: var(--p30-spa);
    font-size: var(--16to24);
    text-align: center;
    letter-spacing: var(--lsp-30);
}

.items .pd-group .main-items .group .item-cont .buy:hover {
    transition: 0.3s;
    opacity: 0.8;
}

.items .more-btn {
    width: 31.25vw;
    margin-left: auto;
    margin-right: auto;
    padding: var(--p50-spa);
    background-color: inherit;
    border: 2px solid #fff;
    border-radius: 100px;
}

.items .more-btn::after {
    background-image: url(../images/arrow-white.png);
}

.items .more-btn p {
    color: #fff;
    font-size: var(--16to26);
    font-family: var(--ff-mplus);
    font-weight: var(--fw-900);
    text-align: center;
}

.items .more-btn.is-open {
    margin-top: var(--p100-spa);
}

/* 商品詳細共通 */

.items .pd-group .wrap {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--p120-spa) var(--p75-spa);
    width: 62.5vw;
    margin-left: auto;
    margin-right: auto;
}

.items .pd-group .wrap .inner {
    max-width: 380px;
    width: 18.2vw;
    position: relative;
}

.items .pd-group .wrap .inner a {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.items .pd-group .wrap .inner a .slides {
    background-color: #fff;
    border-radius: 20px;
    margin-bottom: 40px;
    aspect-ratio: 38 / 47;
}

.items .pd-group .wrap .inner a .slides div {
    border-radius: 20px;
    overflow: hidden;
}

.items .pd-group .wrap .inner a .slides div ul li img {
    width: 100%;
    aspect-ratio: 380 / 425;
}

.items .pd-group .wrap .inner a h4 {
    font-size: var(--14to24);
    font-weight: var(--fw-900);
    letter-spacing: var(--lsp-50);
    line-height: var(--lh-16);
    text-align: center;
    color: #fff;
    margin-bottom: 5px;
}

.items .pd-group .wrap .inner a .price {
    color: #fff;
    font-size: var(--22to35);
    font-family: var(--ff-mplus);
    font-weight: var(--fw-800);
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--p10-spa);
}

.items .pd-group .wrap .inner a .price .tax {
    font-size: var(--12to20);
    font-weight: var(--fw-900);
    letter-spacing: var(--lsp-50);
    display: block;
    margin-left: 5px;
}

.items .pd-group .wrap .inner a .size {
    font-size: var(--12to16);
    letter-spacing: var(--lsp-50);
    color: #fff;
    text-align: center;
    /* ▼▼▼ 一時対応：購入ボタン非表示中のサイズ表記下の余白詰め（PC）▼▼▼
       ボタン表示時は下の margin-bottom: 0; をコメントアウトし、
       margin-bottom: var(--p40-spa); を有効化してください。 */
    /* margin-bottom: 0; */
    margin-bottom: var(--p40-spa);
    /* ▲▲▲ 一時対応ここまで ▲▲▲ */
}

.items .pd-group .wrap .inner a .buy {
    font-size: var(--16to24);
    font-family: var(--ff-mplus);
    letter-spacing: var(--lsp-30);
    font-weight: var(--fw-800);
    padding: var(--p30-spa);
    border-radius: 50px;
    width: 15.6vw;
    text-align: center;
    margin-top: auto;
    margin-left: auto;
    margin-right: auto;
    transition: 0.3s;
}

.items .pd-group .wrap .inner a .buy:hover {
    transition: 0.3s;
    opacity: 0.7;
}


/* ============================================================
   ▼▼▼ 一時対応：購入ボタン非表示 ▼▼▼
   「商品を見る」ボタンを表示させる場合は、このブロックを
   丸ごとコメントアウトしてください。
   ※リンクの無効化は js/slider.js 側にあります。両方を合わせて切り替えてください
   ============================================================ */
/* .items .pd-group .main-items .group .item-cont .buy,
.items .pd-group .wrap .inner a .buy {
    display: none;
} */

/* ▲▲▲ 一時対応ここまで ▲▲▲ */


/* slick調整 */

.slick-dots {
    bottom: -15px;
}

.slick-slide img {
    width: 100%;
}

.slick-dots li {
    margin: 0;
}

.slick-dots li button:before {
    font-size: 0;
    color: inherit;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    transform: translateX(-50%)translateY(-50%);
    border-radius: 50%;
}

.slick-dots li.slick-active button:before {
    opacity: 1;
}


/* ITEMS1 */

.items1 {
    background-image:
        url(../images/item-d1_line.png),
        url(../images/item-d1_line.png),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 15.6' preserveAspectRatio='none'><path d='M 0 0 A 87.93 87.93 0 0 1 50 15.6 A 87.93 87.93 0 0 1 100 0 L 100 15.6 L 0 15.6 Z' fill='%23E60020'/></svg>"),
        linear-gradient(var(--red), var(--red));
    background-position: top left, top right, top, bottom;
    background-size: var(--p60-spa) auto, var(--p60-spa) auto, 100% 15.6vw, 100% calc(100% - 15.6vw + 1px);
    background-repeat: repeat-y, repeat-y, no-repeat, no-repeat;
    padding-top: 23.4vw;
    padding-bottom: 23.4vw;
}

.items1-group::before {
    background-color: var(--red);
}

.items1 h3 {
    width: 29.6vw;
}

.items1 h3::before {
    background-image: url(../images/items-d1_deco_birds1.png);
    width: 10.1vw;
    height: 6.5vw;
    top: -6.5vw;
    right: -15vw;
}

.items1 .pd-group .main-items .group:nth-child(1):after {
    background-image: url(../images/items-d1_deco_baloon.png);
    width: 10vw;
    height: 17vw;
    right: -7vw;
    top: 0;
}

.items1 .pd-group .main-items .group:nth-child(2):before {
    background-image: url(../images/items-d1_deco_birds2.png);
    width: 9.2vw;
    height: 8.8vw;
    left: -4.5vw;
    top: 12vw;
}

.items1 .pd-group .main-items .group:nth-child(3):after {
    background-image: url(../images/items-d1_deco_train_pc.png);
    width: 14.8vw;
    height: var(--p150-spa);
    right: -8.5vw;
    bottom: -1vw;
}

.items1 .pd-group .main-items .group .item-img {
    background: rgba(0, 0, 0, 0.1)
}

.items1 .pd-group .main-items .group:nth-child(1) .item-img img {
    width: 24.3vw;
    height: 23.9vw;
    position: absolute;
    top: 1vw;
    left: 1vw;
}

.items1 .pd-group .main-items .group:nth-child(2) .item-img img {
    width: 22.7vw;
    height: 14.3vw;
    position: absolute;
    top: 6vw;
    left: 1.5vw;
}

.items1 .pd-group .main-items .group:nth-child(3) .item-img img {
    width: 21vw;
    height: 14.9vw;
    position: absolute;
    top: 5.5vw;
    left: 2.5vw;
}

.items1 .pd-group .main-items .group .item-cont .buy {
    background-color: var(--yellow);
}

.items1 .pd-group .main-items .group .item-cont .buy a {
    color: var(--red);
}

.items1 .pd-group .wrap .inner a .buy {
    background-color: var(--yellow);
    color: var(--red);
}

.items1 .slick-dots li button:before {
    background-color: var(--red);
}

.items1 .slick-dots li.slick-active button:before {
    background-color: var(--red);
}

/* ITEMS2 */

.items2 {
    background-image:
        url(../images/item-d2_line.png),
        url(../images/item-d2_line.png),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 15.6' preserveAspectRatio='none'><path d='M 0 0 A 87.93 87.93 0 0 1 50 15.6 A 87.93 87.93 0 0 1 100 0 L 100 15.6 L 0 15.6 Z' fill='%23F4B4D0'/></svg>"),
        linear-gradient(var(--pink), var(--pink));
    background-position: top left, top right, top, bottom;
    background-size: var(--p60-spa) auto, var(--p60-spa) auto, 100% 15.6vw, 100% calc(100% - 15.6vw + 1px);
    background-repeat: repeat-y, repeat-y, no-repeat, no-repeat;
    margin-top: -16vw;
    padding-top: 23.4vw;
    padding-bottom: 23.4vw;
}

.items2-group::before {
    background-color: var(--pink);
}

.items2 h3 {
    width: 21vw;
}

.items2 h3::before {
    background-image: url(../images/items-d2_deco_flower1.png);
    width: var(--p190-spa);
    height: var(--p170-spa);
    top: -6.5vw;
    left: -15vw;
}

.items2 .pd-group .main-items .group .item-img {
    background: rgba(239, 161, 195, 0.5)
}

.items2 .pd-group .main-items .group:nth-child(1):after {
    background-image: url(../images/items-d2_deco_flower2.png);
    width: 7.6vw;
    height: 10.1vw;
    right: -11vw;
    top: 0;
}

.items2 .pd-group .main-items .group:nth-child(2):before {
    background-image: url(../images/items-d2_deco_flower3.png);
    width: var(--p180-spa);
    height: var(--p160-spa);
    left: -4.5vw;
    top: 14vw;
}

.items2 .pd-group .main-items .group:nth-child(2):after {
    background-image: url(../images/items-d2_deco_flower4.png);
    width: 4.5vw;
    height: var(--p90-spa);
    right: -2.5vw;
    bottom: -6vw;
}

.items2 .pd-group .main-items .group:nth-child(3):after {
    background-image: url(../images/items-d2-deco_heart_pc.png);
    width: 22.5vw;
    height: var(--p120-spa);
    right: -5.5vw;
    bottom: -3vw;
}

.items2 .pd-group .main-items .group:nth-child(1) .item-img img {
    width: 19.6vw;
    height: 14.8vw;
    position: absolute;
    top: 6vw;
    left: 4vw;
}

.items2 .pd-group .main-items .group:nth-child(2) .item-img img {
    width: 15.4vw;
    height: 25.6vw;
    position: absolute;
    top: -2.6vw;
    left: 5vw;
}

.items2 .pd-group .main-items .group:nth-child(3) .item-img img {
    width: 18.7vw;
    height: 19vw;
    position: absolute;
    top: 2.5vw;
    left: 4vw;
}

.items2 .pd-group .main-items .group .item-cont .buy {
    background-color: var(--d-pink);
}

.items2 .pd-group .main-items .group .item-cont .buy a {
    color: #fff;
}

.items2 .pd-group .wrap .inner a .buy {
    background-color: var(--d-pink);
    color: #fff;
}

.items2 .slick-dots li button:before {
    background-color: var(--d-pink);
}

.items2 .slick-dots li.slick-active button:before {
    background-color: var(--d-pink);
}

/* ITEMS3 */

.items3 {
    margin-bottom: 0;
    background-image:
        url(../images/item-d3_line.png),
        url(../images/item-d3_line.png),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 15.6' preserveAspectRatio='none'><path d='M 0 0 A 87.93 87.93 0 0 1 50 15.6 A 87.93 87.93 0 0 1 100 0 L 100 15.6 L 0 15.6 Z' fill='%23C0C0C0'/></svg>"),
        linear-gradient(var(--gray), var(--gray));
    background-position: top left, top right, top, bottom;
    background-size: var(--p60-spa) auto, var(--p60-spa) auto, 100% 15.6vw, 100% calc(100% - 15.6vw + 1px);
    background-repeat: repeat-y, repeat-y, no-repeat, no-repeat;
    padding-top: 23.4vw;
    margin-top: -16vw;
}

#items3 {
    padding-bottom: 11.5vw;
}

.items3-group::before {
    background-color: var(--black);
}

.items3 h3 {
    width: 26.6vw;
}

.items3 h3::before {
    background-image: url(../images/items-d3_deco_twincle2.png);
    width: 6.1vw;
    height: var(--p150-spa);
    top: -7.5vw;
    right: -10vw;
}

.items3 .pd-group .main-items .group:nth-child(1):after {
    background-image: url(../images/items-d3_deco_bu1.png);
    width: 7.9vw;
    height: 6vw;
    left: 24vw;
    top: -2vw;
}

.items3 .pd-group .main-items .group:nth-child(2):before {
    background-image: url(../images/items-d3_deco_twincle.png);
    width: 6.2vw;
    height: var(--p150-spa);
    left: -4.5vw;
    top: 3vw;
}

.items3 .pd-group .main-items .group:nth-child(2):after {
    background-image: url(../images/items-d3_deco_bu2.png);
    width: 7vw;
    height: var(--p130-spa);
    right: -6.5vw;
    top: -8vw;
}

.items3 .pd-group .main-items .group:nth-child(3):after {
    background-image: url(../images/items-d3_deco_heart_pc.png);
    width: 9.2vw;
    height: var(--p200-spa);
    right: -3.5vw;
    bottom: -2vw;
}

.items3 .pd-group .main-items .group .item-img {
    background: rgba(129, 129, 129, 0.2)
}

.items3 .pd-group .main-items .group:nth-child(1) .item-img img {
    width: 22.5vw;
    height: 14.9vw;
    position: absolute;
    top: 5vw;
    left: 2vw;
}

.items3 .pd-group .main-items .group:nth-child(2) .item-img img {
    width: 21.8vw;
    height: 13.8vw;
    position: absolute;
    top: 6vw;
    left: 0;
}

.items3 .pd-group .main-items .group:nth-child(3) .item-img img {
    width: 13.8vw;
    height: 27.3vw;
    position: absolute;
    top: -3.2vw;
    left: 5.3vw;
}

.items3 .pd-group .main-items .group .item-cont .buy {
    background-color: var(--black);
}

.items3 .pd-group .main-items .group .item-cont .buy a {
    color: #fff;
}

.items3 .pd-group .wrap .inner a .buy {
    background-color: var(--black);
    color: #fff;
}

.items3 .slick-dots li button:before {
    background-color: var(--black);
}

.items3 .slick-dots li.slick-active button:before {
    background-color: var(--black);
}

/* ITEMS-ALL */

section.items-all {
    background-image: url(../images/bg-kitty.png);
    padding: var(--p250-spa) var(--p260-spa) 12.5vw;
}

.items-all .wrap {
    background-color: #fff;
    width: 72.9vw;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    padding: var(--p150-spa) var(--p100-spa) var(--p120-spa);
    border-radius: var(--p60-spa);
}

.items-all .wrap::before {
    content: "";
    display: block;
    width: 40.1vw;
    height: var(--p160-spa);
    background-image: url(../images/ec-ttl.png);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: -5vw;
    left: 50%;
    transform: translateX(-50%);
}

.items-all .wrap .inner {
    font-family: var(--ff-mplus);
    color: var(--black);
    font-weight: var(--fw-900);
    text-align: center;
}

.items-all .wrap .inner h4 {
    font-size: var(--20to36);
    letter-spacing: var(--lsp-50);
}

.items-all .wrap .inner .sub {
    font-size: var(--16to28);
}

.items-all .wrap .inner .price {
    font-size: var(--18to35);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--p35-spa);
}

.items-all .wrap .inner .price .tax {
    font-size: var(--12to18);
    margin-left: 5px;
}

.items-all .wrap .inner .buy {
    background-color: var(--yellow);
    width: 15.6vw;
    border-radius: 50px;
    transition: 0.3s;
}

.items-all .wrap .inner .buy:hover {
    transition: 0.3s;
    opacity: 0.7;
}

.items-all .wrap .inner .buy a {
    width: 100%;
    display: block;
    padding: var(--p30-spa);
    color: var(--blue);
    font-size: var(--14to24);
    letter-spacing: var(--lsp-30);
}


/* ============================================================
   ▼▼▼ 一時対応：購入ボタン非表示（items-all）▼▼▼
   「商品を見る」ボタンを表示させる場合は、このブロックを
   丸ごとコメントアウトしてください。
   ============================================================ */
/* .items-all .wrap .inner .buy {
    display: none;
} */

/* ▲▲▲ 一時対応ここまで ▲▲▲ */


.items-all .coaster {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--p100-spa);
    margin-bottom: var(--p140-spa);
}

.items-all .coaster img {
    width: 35.4vw;
}

.items-all .ec {
    border: 3px solid var(--blue);
    border-radius: var(--p30-spa);
    background-image: url(../images/bg-dots_pc.png);
    position: relative;
    padding: var(--p140-spa) var(--p70-spa) var(--p110-spa);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--p100-spa);
}

.items-all .ec .ec-ttl {
    background-color: var(--blue);
    color: #fff;
    font-size: var(--15to30);
    font-family: var(--ff-mplus);
    position: absolute;
    top: 0;
    left: 0;
    border-radius: var(--p20-spa) var(--p20-spa) 0 0;
    width: 100%;
    text-align: center;
    padding: var(--p25-spa);
}

.items-all .ec .ec-ttl::before,
.items-all .ec .ec-ttl::after {
    content: "";
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
}

.items-all .ec .ec-ttl::before {
    background-image: url(../images/ec-deco1.png);
    width: 4.5vw;
    height: var(--p120-spa);
    left: 5vw;
    top: -2.5vw;
}

.items-all .ec .ec-ttl::after {
    background-image: url(../images/ec-deco2.png);
    width: 6vw;
    height: 5.5vw;
    right: 5vw;
    top: -1.5vw;
}

.items-all .ec>img {
    width: 25.5vw;
}

@media screen and (max-width:1100px) {
    .card-wrap .card {
        width: 26vw;
        min-height: 360px;
    }
}


@media screen and (max-width:768px) {

    .items {
        padding: 0;
        margin-bottom: var(--p90-spa);
        background-image: url(../images/bg-dots_sp.png);
        background-size: 6.4vw;
    }

    .items section {
        padding-bottom: 45.3vw;
    }

    .items h2 {
        width: 35.2vw;
        min-width: 132px;
        margin-bottom: var(--p25-spa);
    }

    .items-intro {
        margin-bottom: var(--p95-spa);
    }

    .items-intro>p {
        margin-bottom: var(--p40-spa);
    }

    .card-wrap {
        display: block;
        gap: 0;
        perspective: none;
    }

    .card-wrap .slick-slide {
        box-sizing: border-box;
        background-clip: padding-box;
    }

    .card-wrap .card::before {
        display: none;
    }

    .card-wrap .card {
        width: 100%;
        height: 102vw;
        transform-style: flat;
        padding: var(--p25-spa) var(--p25-spa) var(--p40-spa);
        border-radius: var(--p25-spa);
        margin-left: var(--p15-spa);
        margin-right: var(--p15-spa);
        min-height: auto;
    }

    .card-wrap .card:hover {
        transform: scale(1);
    }

    .card-wrap .card .face {
        margin-bottom: var(--p20-spa);
    }

    .card-wrap .card-d1 .face {
        width: 36.56vw;
        height: 23.5vw;
    }

    .card-wrap .card-d2 .face {
        width: 31.89vw;
        height: 23.5vw;
    }

    .card-wrap .card-d3 .face {
        width: 31.6vw;
        height: 23.5vw;
    }

    .card-wrap .card .age {
        width: 44vw;
        margin-bottom: var(--p20-spa);
    }

    .card-wrap .card .age-line {
        height: 3px;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 3'><circle cx='4' cy='1.5' r='1.5' fill='%23ffffff'/></svg>");
        background-size: 8px 3px;
        margin-bottom: var(--p15-spa);
    }

    .card-wrap .card p {
        color: #fff;
        font-family: var(--ff-zmaru);
        font-size: var(--12to18);
        line-height: var(--lh-20);
    }

    .items1 {
        background-image:
            url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 15.6' preserveAspectRatio='none'><path d='M 0 0 A 87.93 87.93 0 0 1 50 15.6 A 87.93 87.93 0 0 1 100 0 L 100 15.6 L 0 15.6 Z' fill='%23E60020'/></svg>"),
            linear-gradient(var(--red), var(--red));
        background-position: top, bottom;
        background-size: 100% 15.6vw, 100% calc(100% - 15.6vw + 1px);
        background-repeat: no-repeat, no-repeat;
    }

    .items2 {
        background-image:
            url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 15.6' preserveAspectRatio='none'><path d='M 0 0 A 87.93 87.93 0 0 1 50 15.6 A 87.93 87.93 0 0 1 100 0 L 100 15.6 L 0 15.6 Z' fill='%23F4B4D0'/></svg>"),
            linear-gradient(var(--pink), var(--pink));
        background-position: top, bottom;
        background-size: 100% 15.6vw, 100% calc(100% - 15.6vw + 1px);
        background-repeat: no-repeat, no-repeat;
    }

    .items .items3 {
        background-image:
            url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 15.6' preserveAspectRatio='none'><path d='M 0 0 A 87.93 87.93 0 0 1 50 15.6 A 87.93 87.93 0 0 1 100 0 L 100 15.6 L 0 15.6 Z' fill='%23C0C0C0'/></svg>"),
            linear-gradient(var(--gray), var(--gray));
        background-position: top, bottom;
        background-size: 100% 15.6vw, 100% calc(100% - 15.6vw + 1px);
        background-repeat: no-repeat, no-repeat;
    }

    .items1-group,
    .items2-group,
    .items3-group {
        padding-top: 9vw;
    }

    .items1-group::before,
    .items2-group::before,
    .items3-group::before {
        top: -31vw;
        width: 6.9vw;
        height: 6.7vw;
    }

    .items .pd-group h3 {
        margin-bottom: var(--p40-spa);
    }

    .items .pd-group .items-mv {
        width: 100%;
        margin-bottom: 0;
    }

    .items .pd-group .main-items {
        padding-top: var(--p55-spa);
        overflow: hidden;
    }

    .items .pd-group .main-items .group {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--p25-spa);
        margin-bottom: var(--p50-spa);
        width: 73.3vw;
    }

    .items .pd-group .main-items .group:nth-child(2) {
        flex-direction: column;
        text-align: center;
    }

    .items .pd-group .main-items .group:nth-child(3) {
        margin-bottom: var(--p70-spa);
    }

    .items .pd-group .main-items .group .item-img {
        width: 73.3vw;
        height: 73.3vw;
    }

    .items .pd-group .main-items .group .item-cont h4 {
        margin-bottom: 0;
        text-align: center;
    }

    .items .pd-group .main-items .group .item-cont .price {
        justify-content: center;
        margin-bottom: var(--p5-spa);
    }

    .items .pd-group .main-items .group:nth-child(2) .item-cont .price {
        justify-content: center;
    }

    .items .pd-group .main-items .group .item-cont .size {
        margin-bottom: var(--p25-spa);
        text-align: center;
    }

    .items .pd-group .main-items .group .item-cont .buy {
        width: var(--p200-spa);
        transition: 0s;
    }

    .items .pd-group .main-items .group .item-cont .buy a {
        padding: var(--p20-spa) var(--p10-spa);
    }

    .items .pd-group .main-items .group .item-cont .buy:hover {
        transition: 0s;
        opacity: 1;
    }

    .items .more-btn {
        width: 73.3vw;
        padding: var(--p25-spa);
        border: 1px solid #fff;
    }

    .items .pd-group .wrap {
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        flex-wrap: wrap;
        grid-template-columns: auto;
        gap: var(--p55-spa) var(--p25-spa);
        padding-left: var(--p25-spa);
        padding-right: var(--p25-spa);
        width: 100%;
    }

    .items .pd-group .wrap .inner {
        width: 40vw;
        max-width: none;
        min-width: 150px;
    }

    .items .pd-group .wrap .inner a .slides {
        border-radius: var(--p10-spa);
        margin-bottom: var(--p20-spa);
    }

    .items .pd-group .wrap .inner a .price {
        margin-bottom: var(--p5-spa);
    }

    .items .pd-group .wrap .inner a .size {
        /* ▼▼▼ 一時対応：購入ボタン非表示中のサイズ表記下の余白詰め（SP）▼▼▼
           ボタンを表示させる場合は、下の記述のコメントを解除してください。 */
        margin-bottom: var(--p15-spa);
        /* ▲▲▲ 一時対応ここまで ▲▲▲ */
    }

    .items .pd-group .wrap .inner a .buy,
    .items .pd-group .wrap2 .inner a .buy {
        padding: var(--p15-spa);
        width: 100%;
    }

    /* slick調整 */

    .slick-dots {
        bottom: -15px;
    }

    .slick-dots li {
        width: 10px;
        height: 10px;
    }

    .slick-dots li button {
        width: 10px;
        height: 10px;
    }

    .items .slick-dots li button:before {
        width: 4px;
        height: 4px;
    }

    .items .more-btn.is-open {
        margin-top: var(--p50-spa);
    }

    /* ITEMS1 */

    .items1 h3 {
        width: 81.6vw;
    }

    .items1 h3::before {
        width: 25vw;
        height: 33.3vw;
        top: -32.5vw;
        right: -1vw;
    }

    .items1 .pd-group .main-items .group:nth-child(1):after {
        width: 25vw;
        height: var(--p160-spa);
        right: -16vw;
        top: -8vw;
    }

    .items1 .pd-group .main-items .group:nth-child(2):before {
        width: var(--p90-spa);
        height: 19.9vw;
        left: -4.5vw;
        top: -12vw;
    }

    .items1 .pd-group .main-items .group:nth-child(3):after {
        width: 37.9vw;
        height: var(--p70-spa);
        right: -21.5vw;
        bottom: 99vw;
    }

    .items1 .pd-group .main-items .group:nth-child(1) .item-img img {
        width: 68.5vw;
        height: 67.4vw;
        top: 2.8vw;
        left: 2.8vw;
    }

    .items1 .pd-group .main-items .group:nth-child(2) .item-img img {
        width: 66.5vw;
        height: 41.4vw;
        top: 15.8vw;
        left: 3.2vw;
    }

    .items1 .pd-group .main-items .group:nth-child(3) .item-img img {
        width: 59.2vw;
        height: 42vw;
        top: 15.5vw;
        left: 7vw;
    }

    /* ITEMS2 */

    .items2 h3 {
        width: 53.8vw;
    }

    .items2 h3::before {
        width: var(--p90-spa);
        height: 20vw;
        top: -31.5vw;
        left: -8vw;
    }

    .items2 .pd-group .main-items .group:nth-child(1):after {
        width: 16.3vw;
        height: 22.6vw;
        right: -7vw;
        top: -5vw;
    }

    .items2 .pd-group .main-items .group:nth-child(2):before {
        background-image: url(../images/items-d2_deco_flower2.png);
        width: 16.3vw;
        height: 22.6vw;
        transform: rotateY(-180deg);
        left: -7.5vw;
        top: -4vw;
        z-index: 5;
    }

    .items2 .pd-group .main-items .group:nth-child(2):after {
        display: none;
    }

    .items2 .pd-group .main-items .group:nth-child(3)::before {
        background-image: url(../images/items-d2_deco_flower4.png);
        width: 10.4vw;
        height: var(--p40-spa);
        right: -5.5vw;
        top: -3vw;
    }

    .items2 .pd-group .main-items .group:nth-child(3):after {
        width: 57.6vw;
        height: var(--p60-spa);
        right: -21vw;
        bottom: -16vw;
        z-index: 0;
    }

    .items2 .pd-group .main-items .group:nth-child(1) .item-img img {
        width: 55.3vw;
        height: 41.7vw;
        top: 16.9vw;
        left: 11.3vw;
    }

    .items2 .pd-group .main-items .group:nth-child(2) .item-img img {
        width: 41.3vw;
        height: 67.7vw;
        top: -4.1vw;
        left: 15.3vw;
    }

    .items2 .pd-group .main-items .group:nth-child(3) .item-img img {
        width: 52.7vw;
        height: 53.6vw;
        top: 7vw;
        left: 11.3vw;
    }

    /* ITEMS3 */

    #items3 {
        padding-bottom: var(--p90-spa);
    }

    .items3 h3 {
        width: 69.3vw;
    }

    .items3 h3::before {
        width: 14.9vw;
        height: 20vw;
        top: -31.5vw;
        right: -5vw;
    }

    .items3 .pd-group .main-items .group:nth-child(1):after {
        width: var(--p80-spa);
        height: 15.7vw;
        left: -5vw;
        top: -2vw;
    }

    .items3 .pd-group .main-items .group:nth-child(2):before {
        width: 13.6vw;
        height: var(--p80-spa);
        left: -8.5vw;
        top: 49vw;
    }

    .items3 .pd-group .main-items .group:nth-child(2):after {
        background-image: url(../images/items-d3_deco_bu2_sp.png);
        width: 14.6vw;
        height: var(--p80-spa);
        right: -5.5vw;
        top: -23vw;
    }

    .items3 .pd-group .main-items .group:nth-child(3):after {
        width: 20.8vw;
        height: 20vw;
        right: -10.5vw;
        bottom: auto;
        top: -14vw;
    }

    .items3 .pd-group .main-items .group:nth-child(1) .item-img img {
        width: 63.4vw;
        height: 42vw;
        top: 14.1vw;
        left: 5.6vw;
    }

    .items3 .pd-group .main-items .group:nth-child(2) .item-img img {
        width: 61.5vw;
        height: 38.9vw;
        top: 16.9vw;
        left: 4vw;
    }

    .items3 .pd-group .main-items .group:nth-child(3) .item-img img {
        width: 32.5vw;
        height: 73.9vw;
        top: -6vw;
        left: 20vw;
    }

    /* ITEMS-ALL */

    section.items-all {
        background-image: url(../images/bg-kitty_sp.png);
        padding: var(--p90-spa) 0 0
    }

    .items-all .wrap {
        width: 100%;
        padding: 20.5vw var(--p25-spa) var(--p75-spa);
        border-radius: var(--p40-spa) var(--p40-spa) 0 0;
    }

    .items-all .wrap::before {
        width: 92vw;
        height: 20.5vw;
        top: -9vw;
    }

    .items-all .wrap .inner .price {
        margin-bottom: var(--p20-spa);
    }

    .items-all .wrap .inner .buy {
        width: var(--p150-spa);
        transition: 0s;
        margin-left: auto;
        margin-right: auto;
    }

    .items-all .wrap .inner .buy:hover {
        transition: 0s;
        opacity: 1;
    }

    .items-all .wrap .inner .buy a {
        padding: var(--p15-spa);
    }

    .items-all .coaster {
        flex-direction: column-reverse;
        gap: var(--p25-spa);
        margin-bottom: var(--p60-spa);
    }

    .items-all .coaster img {
        width: 100%;
    }

    .items-all .ec {
        border-radius: var(--p20-spa);
        background-image: url(../images/bg-dots_sp.png);
        background-size: 6.4vw;
        padding: 28vw var(--p25-spa) var(--p50-spa);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: var(--p25-spa);
    }

    .items-all .ec .ec-ttl {
        border-radius: var(--p10-spa) var(--p10-spa) 0 0;
        width: 100%;
        padding: var(--p20-spa);
    }

    .items-all .ec .ec-ttl::before {
        width: var(--p50-spa);
        height: var(--p70-spa);
        left: 4vw;
        top: -15.5vw;
    }

    .items-all .ec .ec-ttl::after {
        width: var(--p70-spa);
        height: 17.3vw;
        right: 2vw;
        top: -14.5vw;
    }

    .items-all .ec>img {
        width: 73.3vw;
    }

}


@media screen and (max-width:500px) {
    .items1 .pd-group .main-items .group:nth-child(3):after {
        bottom: 110vw;
    }
}

/* information */

.information {
    background-color: var(--blue);
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.2) 2px, transparent 2px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 2px, transparent 2px);
    background-size: var(--p80-spa) var(--p80-spa);
    background-position: -2px 0, 0 -2px;
    padding-top: 0;
    padding-left: 13.5vw;
    padding-right: 13.5vw;
    padding-bottom: 11.5vw;
}

.information::before {
    background-image: url(../images/notice-bg_bf.png);
}

.information h2 {
    margin-bottom: var(--p100-spa);
    width: 15.2vw;
    margin-left: auto;
    margin-right: auto;
}

.information h2 img {
    width: 100%;
}

.information .wrap {
    background-color: #fff;
    border-radius: var(--p30-spa);
    padding: var(--p100-spa) var(--p110-spa) var(--p120-spa);
}

.information .wrap .inner {
    margin-bottom: var(--p60-spa);
}

.information .wrap .inner::after {
    content: "";
    display: block;
    width: 100%;
    height: 5px;
    background-image: radial-gradient(circle, var(--gray) 2.5px, transparent 2.5px);
    background-size: 15px 5px;
    background-repeat: repeat-x;
    background-position: center;
    margin-top: var(--p80-spa);
}

.information .wrap .inner:last-child {
    margin-bottom: 0;
}

.information .wrap .inner:last-child::after {
    display: none;
}

.information .wrap .inner h3 {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: var(--p25-spa);
    font-size: var(--18to35);
    font-weight: var(--fw-900);
    color: var(--blue);
    letter-spacing: var(--lsp-50);
    font-family: var(--ff-mplus);
}

.information .wrap .inner h3 img {
    margin-right: var(--p15-spa);
    width: 2.2vw;
}

.information .wrap .inner .lists {
    margin-bottom: var(--p40-spa);
}

.information .wrap .inner .lists ul {
    margin-bottom: var(--p35-spa);
}

.information .wrap .inner li {
    text-indent: -1.5em;
    padding-left: 1.5em;
}

.information .wrap .inner li:before {
    content: "※";
    margin-right: 10px;
}

.information .wrap .inner .lists ul li {
    font-size: var(--14to20);
    letter-spacing: var(--lsp-50);
    line-height: var(--lh-22);
    margin-bottom: var(--p20-spa);
}

.information .wrap .inner .lists ul li .red {
    color: var(--red);
    font-weight: var(--fw-900);
}

.information .wrap .inner .lists .info-btn {
    width: 27vw;
    margin-right: auto;
    margin-left: 0;
}

.information .wrap .inner .lists .info-btn a {
    padding: var(--p40-spa);
    font-size: var(--16to22);
    line-height: var(--lh-16);
}

.information .wrap .inner .texts li {
    font-size: var(--14to20);
    letter-spacing: var(--lsp-50);
    line-height: var(--lh-22);
    margin-bottom: var(--p20-spa);
}

.information .wrap .inner .texts li:last-child {
    margin-bottom: 0;
}


@media screen and (max-width:768px) {

    .information {
        padding-bottom: var(--p100-spa);
        margin-bottom: 37vw;
        background-size: 11.2vw 11.2vw;
        background-position: -1px 0, 0 -1px;
        padding-left: var(--p25-spa);
        padding-right: var(--p25-spa);
        margin-bottom: 0;
    }

    .information::before {
        background-image: url(../images/notice-bg_bf.png);
    }

    .information h2 {
        margin-bottom: var(--p25-spa);
        width: 42.9vw;
    }

    .information .wrap {
        width: 100%;
        border-radius: var(--p20-spa);
        padding: var(--p40-spa) var(--p20-spa) var(--p50-spa);
    }

    .information .wrap .inner {
        margin-bottom: var(--p35-spa);
    }

    .information .wrap .inner::after {
        height: 4px;
        background-image: radial-gradient(circle, var(--gray) 2px, transparent 2px);
        background-size: 12px 4px;
        background-repeat: round no-repeat;
        background-position: left center;
        margin-top: var(--p40-spa);
    }

    .information .wrap .inner h3 {
        margin-bottom: var(--p15-spa);
    }

    .information .wrap .inner h3 img {
        min-width: 20px;
        width: 20px;
        margin-right: 10px;
        line-height: var(--lh-16);
    }

    .information .wrap .inner .lists ul {
        margin-bottom: var(--p25-spa);
    }

    .information .wrap .inner .lists ul li {
        margin-bottom: var(--p15-spa);
    }

    .information .wrap .inner li:before {
        margin-right: 5px;
    }

    .information .wrap .inner .lists .info-btn {
        width: 100%;
    }

    .information .wrap .inner .lists .info-btn a {
        padding: var(--p15-spa);
    }

    .information .wrap .inner .texts li {
        margin-bottom: var(--p15-spa);
    }

}

/* footer */

footer {
    background-color: #fff;
    padding: var(--p120-spa) 0;
    text-align: center;
    position: relative;
    z-index: 10;
}

footer::before,
footer::after {
    content: "";
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
}

footer::before {
    background-image: url(../images/footer-bg_pc.png);
    width: 100%;
    height: 8vw;
    position: absolute;
    top: -2vw;
    left: 0;
}

footer::after {
    background-image: url(../images/footer-rbn.png);
    width: 11vw;
    height: var(--p120-spa);
    position: absolute;
    top: -4vw;
    left: 12vw;
}

.footer-logo {
    margin-bottom: var(--p60-spa);
    width: 10.2vw;
    margin-left: auto;
    margin-right: auto;
}

footer .wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--p60-spa);
}

footer .wrap li {
    margin-left: var(--p30-spa);
    margin-right: var(--p30-spa);
}

footer .wrap li:nth-child(1) img {
    width: var(--p60-spa);
}

footer .wrap li:nth-child(2) img {
    width: 2.7vw;
}

footer .wrap li:nth-child(3) img {
    width: 4.5vw;
}

footer .copy ul li {
    text-align: center;
    font-size: var(--12to16);
    letter-spacing: var(--lsp-50);
    font-weight: var(--fw-500);
    color: var(--black);
}

footer .copy ul li:nth-child(1) {
    margin-bottom: var(--p10-spa);
}

@media screen and (max-width:768px) {

    footer {
        padding: var(--p70-spa) 0 var(--p60-spa);
    }

    footer::before {
        background-image: url(../images/footer-bg_sp.png);
        width: 100%;
        height: 16.1vw;
        position: absolute;
        top: -4vw;
        left: 0;
    }

    footer::after {
        width: var(--p90-spa);
        height: 14.6vw;
        top: -8vw;
        left: 7vw;
    }

    .footer-logo {
        margin-bottom: var(--p35-spa);
        width: 28.8vw;
    }

    footer .wrap {
        margin-bottom: var(--p30-spa);
    }

    footer .wrap li {
        margin-left: var(--p20-spa);
        margin-right: var(--p20-spa);
    }

    footer .wrap li:nth-child(1) img {
        width: var(--p35-spa);
    }

    footer .wrap li:nth-child(2) img {
        width: 7.5vw;
    }

    footer .wrap li:nth-child(3) img {
        width: var(--p50-spa);
    }

    footer .copy ul li:nth-child(1) {
        margin-bottom: var(--p5-spa);
    }

}

/* CTA固定ボタン */

#cta-fixed {
    position: fixed;
    right: 0;
    bottom: 8.5vw;
    width: 8.1vw;
    opacity: 0;
    transition: opacity 0.8s ease;
    z-index: 100;
}

#cta-fixed.show {
    opacity: 1;
    transition: opacity 0.3s ease;
}

#cta-fixed a,
#cta-fixed img {
    display: block;
    width: 100%;
    height: 100%;
}

@media screen and (max-width:768px) {

    #cta-fixed {
        width: 22.6vw;
        height: 23.5vw;
        bottom: 28vw;
    }

}

/* ページトップ */

#pagetop {
    position: fixed;
    bottom: var(--p35-spa);
    right: var(--p20-spa);
    opacity: 0;
    transition: opacity 0.8s ease;
    z-index: 100;
    width: 6vw;
}

#pagetop img {
    width: 100%;
}

#pagetop.show {
    opacity: 1;
    transition: opacity 0.3s ease;
}

@media screen and (max-width:768px) {

    #pagetop {
        right: var(--p10-spa);
        width: var(--p60-spa);
        bottom: 5vw;
    }

}


.js-fadeup {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.js-fadeup.is-shown {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .js-fadeup {
        opacity: 1;
        transform: none;
        transition: none;
    }
}