:root {
    --pink: #f8c6b8;
    --pink2: #ef856d;
    --brown: #c9caca;
    --gray: #f0ebeb;
    --x: 2;
    --sx: 213;

    --sp1: 10px;
}

@media screen and (max-width: 768px) {
    :root {
        --sp1: calc(10 / 375 * 100vw);
        /* 幅375pxの時に10px */
    }
}

/* animation */
@keyframes rotate {
    0% {
        rotate: 0deg;
    }

    100% {
        rotate: 360deg;
    }
}

@keyframes hoverCircle {
    0% {
        width: 0%;
        height: 0%;
    }

    100% {
        width: 100%;
        height: 100%;
    }
}

@keyframes floating {
    0% {
        scale: 1;
        rotate: 0deg;
        translate: 0 0;
    }

    25% {
        scale: 1.02;
        rotate: 10deg;
        translate: 1px 2px;
    }

    50% {
        scale: 1;
        rotate: 0;
        translate: 2px 1px;
    }

    75% {
        scale: .98;
        rotate: -10deg;
        translate: 1px 0;
    }

    100% {
        scale: 1;
        rotate: 0deg;
        translate: 0 0;
    }
}

/* /animation */
.block-top-section {
    padding: 0 !important;
}

.pane-main {
    overflow: visible;
}

#nozomihada {
    display: flex;
    justify-content: center;
    column-gap: calc(12px * var(--x));
}

@media screen and (max-width: 768px) {
    #nozomihada .pc {
        display: none !important;
    }
}

@media screen and (min-width: 768px) {
    #nozomihada .sp {
        display: none !important;
    }
}

#nozomihada * {
    box-sizing: border-box;
}

#nozomihada img {
    /* display: block; */
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center center;
}

html {
    scroll-behavior: smooth;
}


.js-fadeIn:not([data-animation-type]) {
    opacity: 0;
    transform: translate(0, 30px);
    transition: .7s;
}

.js-fadeIn:not([data-animation-type]).fadeIn {
    opacity: 1;
    transform: translate(0, 0);
}

.js-fadeIn[data-animation-type="fadeIn"] {
    opacity: 0;
    transition: .7s;
}

.js-fadeIn[data-animation-type="fadeIn"].fadeIn {
    opacity: 1;
}


.page-top main.pane-main,
#main {
    overflow: visible;
}

#nozomihada {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background: #fce8e9;
}


#nozomihada .nozomihada-nav {
    display: contents;
}

#nozomihada .nozomihada-nav--left {
    order: 1;
    flex: 1;
    position: sticky;
    top: 0;
    height: 100dvh;
}

#nozomihada .nozomihada-nav--right {
    order: 3;
    flex: 1;
    position: sticky;
    top: 0;
    height: 100dvh;
}

#nozomihada .nozomihada-main {
    order: 2;
    width: 530px;
    background: #ffffff;
}

@media screen and (max-width: 768px) {
    #nozomihada .nozomihada-main {
        width: 100%;
    }


}

/* left(PC) */
#nozomihada .nozomihada-nav--left ul {
    padding: 10px 0 40px;
    margin-left: 14%;
}

#nozomihada .nozomihada-nav--left ul li {
    margin-top: 45px;
}

#nozomihada .nozomihada-nav--left ul li img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: left center;
    max-height: 55px;
}

#nozomihada .nozomihada-nav--left ul li:last-child img {
    /* height: 30px; */
}

/* right(PC) */
#nozomihada .nozomihada-nav--right {}

#nozomihada .nozomihada-nav--right .nozomihada-nav--logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 250px;
    width: 100%;
}

.nozomihada--section {
    position: relative;
    margin: 0;
    padding: 0;
}


/* contents [MV] */
#mv.nozomihada--section h1 {
    margin: 0 auto;
}

#mv.nozomihada--section h1 img {
    display: block;
}


/* contents [caption] */
#caption.nozomihada--section {
    padding: calc(4.5 * var(--sp1)) calc(3.4 * var(--sp1)) calc(6.2 * var(--sp1));
    background: url(../img/caption_bg.png) center top / 100% auto no-repeat;
}

#caption.nozomihada--section h2 {
    margin: 0 auto calc(2.0 * var(--sp1));
    width: calc(60.3 / 2 * var(--sp1));
}

#caption.nozomihada--section .nozomihada-pv {
    text-align: center;
}

#caption.nozomihada--section .nozomihada-pv iframe {
    text-align: center;
}

.nozomihada-pv .sp-iframe iframe {
    width: calc(60.6 / 2 * var(--sp1));
    height: calc(39.6 / 2 * var(--sp1));
}

/* スマホ表示時のデフォルト */
.nozomihada-pv .pc-iframe {
    display: none;
}

.nozomihada-pv .sp-iframe {
    display: block;
}

/* PCサイズ（768px以上）の場合 */
@media screen and (min-width: 768px) {
    .nozomihada-pv .pc-iframe {
        display: block;
    }

    .nozomihada-pv .sp-iframe {
        display: none;
    }
}

#caption.nozomihada--section figure {
    margin: 0 0 calc(2.4 * var(--sp1));
}

#caption.nozomihada--section .caption-p01 {
    /* width: calc(62.6 / 2 * var(--sp1)); */
    margin: 0 auto calc(4.4 * var(--sp1));
}

#caption.nozomihada--section .caption-p02 {
    width: calc(42.9 / 2 * var(--sp1));
    margin: 0;
}

/* contents [ambassador] */
#ambassador.nozomihada--section {
    background: url(../img/ambassador_bg.png) center top / 110% auto no-repeat;
    margin-top: calc(-3.8 * var(--sp1));
    padding: calc(2.6 * var(--sp1)) calc(3.2 * var(--sp1)) calc(3.8 * var(--sp1));
}

#ambassador.nozomihada--section h2 {
    margin: 0 auto calc(3.0 * var(--sp1));
    width: calc(39.0 / 2 * var(--sp1));
}

#ambassador.nozomihada--section figure {
    margin: 0 auto calc(3.0 * var(--sp1));
    width: calc(45.4 / 2 * var(--sp1));
}

#ambassador.nozomihada--section p {
    margin: 0 auto;
    /* width: calc(62.5 / 2 * var(--sp1)); */
}

/* contents [allpurpose1] */
#allpurpose1.nozomihada--section,
#allpurpose1_02.nozomihada--section {
    padding: calc(3.3 * var(--sp1)) calc(3.0 * var(--sp1)) calc(3.0 * var(--sp1));
}

.allpurpose1-box {
    position: relative;
}

.allpurpose1-box .allpurpose1-p01 {
    position: static;
    margin-bottom: calc(11.5 / 2 * var(--sp1));
}

.allpurpose1-box .allpurpose1-p02 {
    position: absolute;
    z-index: 99;
    bottom: calc(3.5 / 2 * var(--sp1));
    left: calc(4.5 / 2 * var(--sp1));
    width: calc(27.5 / 2 * var(--sp1)) !important;
}

.allpurpose1_p03 {
    margin-bottom: calc(5.5 / 2 * var(--sp1));
}

/* contents [two-experiences] */
#two-experiences.nozomihada--section {
    background: url(../img/two-experiences_bg.png) center top / 100% 100% no-repeat;
    padding: calc(2.8 * var(--sp1)) calc(3.2 * var(--sp1)) calc(2.8 * var(--sp1));
}

#two-experiences.nozomihada--section h2 {
    width: calc(61.5 / 2 * var(--sp1));
    margin: 0 auto;
}

#two-experiences.nozomihada--section .two-experiences-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc(1.0 * var(--sp1));
    margin-top: calc(4.5 / 2 * var(--sp1));

}

#two-experiences.nozomihada--section .two-experiences-box .choose_btn01 {
    flex: 1;
    display: block;
    width: 50%;
}


/* contents [monitor] */
#monitor.nozomihada--section {
    background: url(../img/monitor_bg.png) center top / 100% 102% no-repeat;
    margin-top: -5px;
    padding: calc(2.6 * var(--sp1)) calc(3.2 * var(--sp1)) calc(3.8 * var(--sp1));
}

#monitor.nozomihada--section h2 {
    margin-top: calc(0 / 2 * var(--sp1));
}

#monitor.nozomihada--section .monitor_t02 {
    margin: calc(5.5 / 2 * var(--sp1)) 0;
}

/* スマホ表示時のデフォルト */
#monitor.nozomihada--section .sp-on figure {
    position: relative;
    width: 122%;
    left: -36px;
}

#monitor.nozomihada--section .pc-on {
    display: none;
}

#monitor.nozomihada--section .sp-on {
    display: block;
}

/* PCサイズ（768px以上）の場合 */
@media screen and (min-width: 768px) {
    #monitor.nozomihada--section .pc-on figure {
        position: relative;
        width: 114%;
        left: -33px;
    }

    #monitor.nozomihada--section .pc-on {
        display: block;
    }

    #monitor.nozomihada--section .sp-on {
        display: none;
    }
}

.monitor-box {
    position: relative;
    margin-top: calc(25.5 / 2 * var(--sp1));
}

.monitor-box .monitor_t04 {
    position: static;
}


/* スマホ表示時のデフォルト */
#monitor.nozomihada--section .monitor-box .reservation_btn {
    position: absolute;
    z-index: 99;
    bottom: calc(2.5 / 2 * var(--sp1));
    right: calc(1 / 2 * var(--sp1));
    width: calc(26.5 / 2 * var(--sp1));
}

#monitor.nozomihada--section .monitor-box .pc-on {
    display: none;
}

#monitor.nozomihada--section .monitor-box .sp-on {
    display: block;
}

/* PCサイズ（768px以上）の場合 */
@media screen and (min-width: 768px) {
    #monitor.nozomihada--section .monitor-box .reservation_btn {
        position: absolute;
        z-index: 99;
        bottom: calc(2.5 / 2 * var(--sp1));
        right: calc(2 / 2 * var(--sp1));
        width: calc(37.5 / 2 * var(--sp1));
    }

    #monitor.nozomihada--section .monitor-box .pc-on {
        display: block;
    }

    #monitor.nozomihada--section .monitor-box .sp-on {
        display: none;
    }
}



/* contents [one-month] */
#one-month.nozomihada--section {
    background: url(../img/one-month_bg.png) center top / 100% auto;
    padding: calc(2.6 * var(--sp1)) calc(3.2 * var(--sp1)) calc(3.8 * var(--sp1));
}

#one-month.nozomihada--section h2 {
    margin-top: calc(1.5 / 2 * var(--sp1));
    margin-bottom: calc(4.5 / 2 * var(--sp1));
}

#one-month.nozomihada--section .one-month_t02 {
    margin-bottom: calc(3.5 / 2 * var(--sp1));
}

/* スマホ表示時のデフォルト */
#one-month.nozomihada--section .sp-on figure {
    position: relative;
    width: 122%;
    left: -36px;
}

#one-month.nozomihada--section .pc-on {
    display: none;
}

#one-month.nozomihada--section .sp-on {
    display: block;
}

/* PCサイズ（768px以上）の場合 */
@media screen and (min-width: 768px) {
    #one-month.nozomihada--section .pc-on figure {
        position: relative;
        width: 114%;
        left: -33px;
    }

    #one-month.nozomihada--section .pc-on {
        display: block;
    }

    #one-month.nozomihada--section .sp-on {
        display: none;
    }
}


#one-month.nozomihada--section .one-month_t04 {
    margin-bottom: calc(3.5 / 2 * var(--sp1));
}


/* contents [allpurpose2] */
#allpurpose2.nozomihada--section {
    padding: calc(3.3 * var(--sp1)) calc(1.0 * var(--sp1)) calc(3.0 * var(--sp1));
}

#allpurpose2.nozomihada--section h2 {
    margin-bottom: calc(5.5 / 2 * var(--sp1));
    padding: 0 calc(3.0 * var(--sp1));
}

#allpurpose2.nozomihada--section .allpurpose2_t02 {
    margin-bottom: calc(5.5 / 2 * var(--sp1));
}

#allpurpose2.nozomihada--section .allpurpose2_t03 {
    margin-bottom: calc(5.5 / 2 * var(--sp1));
}

#allpurpose2.nozomihada--section .allpurpose2_t05 {
    padding: 0 calc(3.0 * var(--sp1));
}


/* contents [monitor2] */
#monitor2.nozomihada--section {
    background: url(../img/monitor2_bg.png) center top / 102% 99.5% no-repeat;
    padding: calc(2.6 * var(--sp1)) calc(3.2 * var(--sp1)) calc(3.8 * var(--sp1));
}

#monitor2.nozomihada--section h2 {
    width: calc(49.5 / 2 * var(--sp1));
    margin: calc(6 / 2 * var(--sp1)) auto calc(6 / 2 * var(--sp1))
}

#monitor2.nozomihada--section .monitor_t02 {
    margin: calc(0 / 7 * var(--sp1)) 0 calc(4.2 / 2 * var(--sp1)) 0;
}

/* スマホ表示時のデフォルト */
#monitor2.nozomihada--section .sp-on figure {
    position: relative;
    width: 122%;
    left: -36px;
}

#monitor2.nozomihada--section .pc-on {
    display: none;
}

#monitor2.nozomihada--section .sp-on {
    display: block;
}

/* PCサイズ（768px以上）の場合 */
@media screen and (min-width: 768px) {
    #monitor2.nozomihada--section .pc-on figure {
        position: relative;
        width: 114%;
        left: -33px;
    }

    #monitor2.nozomihada--section .pc-on {
        display: block;
    }

    #monitor2.nozomihada--section .sp-on {
        display: none;
    }
}

#monitor2.nozomihada--section .monitor-box {
    margin: (3 / 2 * var(--sp1)) 0 0;
}


/* スマホ表示時のデフォルト */
#monitor2.nozomihada--section .monitor-box .reservation_btn {
    margin: 0;
    position: absolute;
    z-index: 99;
    bottom: calc(2.5 / 2 * var(--sp1));
    right: calc(1 / 2 * var(--sp1));
    width: calc(26.5 / 2 * var(--sp1));
}

#monitor2.nozomihada--section .monitor-box .pc-on {
    display: none;
}

#monitor2.nozomihada--section .monitor-box .sp-on {
    display: block;
}

/* PCサイズ（768px以上）の場合 */
@media screen and (min-width: 768px) {
    #monitor2.nozomihada--section .monitor-box .reservation_btn {
        margin: 0;
        position: absolute;
        z-index: 99;
        bottom: calc(2.5 / 2 * var(--sp1));
        right: calc(2 / 2 * var(--sp1));
        width: calc(37.5 / 2 * var(--sp1));
    }

    #monitor2.nozomihada--section .monitor-box .pc-on {
        display: block;
    }

    #monitor2.nozomihada--section .monitor-box .sp-on {
        display: none;
    }
}

/* contents [one-month2] */
#one-month2.nozomihada--section {
    background: url(../img/one-month2_bg.png) center top / 100% auto;
    margin-top: -5px;
    padding: calc(2.6 * var(--sp1)) calc(3.2 * var(--sp1)) calc(3.8 * var(--sp1));
}

#one-month2.nozomihada--section h2 {
    width: calc(45.5 / 2 * var(--sp1));
    margin: calc(4 * var(--sp1)) auto calc(2 * var(--sp1));
}

#one-month2.nozomihada--section .one-month2_t04 {
    margin: calc(0 / 2 * var(--sp1)) 0 calc(1.5 / 2 * var(--sp1)) 0;
}



#one-month2.nozomihada--section .sp-on figure {
    position: relative;
    width: 122%;
    left: -36px;
}

#one-month2.nozomihada--section .pc-on {
    display: none;
}

#one-month2.nozomihada--section .sp-on {
    display: block;
}

/* PCサイズ（768px以上）の場合 */
@media screen and (min-width: 768px) {
    #one-month2.nozomihada--section .pc-on figure {
        position: relative;
        width: 114%;
        left: -33px;
    }

    #one-month2.nozomihada--section .pc-on {
        display: block;
    }

    #one-month2.nozomihada--section .sp-on {
        display: none;
    }
}

/* contents [sns] */
#sns.nozomihada--section {
    /* background: url(../img/sns_bg.png) center top / 100% auto no-repeat; */
    margin-top: calc(-3.8 * var(--sp1));
    padding: calc(2.6 * var(--sp1)) calc(3.2 * var(--sp1)) calc(3.8 * var(--sp1));
}

#sns00 h2 {
    margin-bottom: calc(9.5 / 2 * var(--sp1));
    margin-top: -3px;
}

#sns.nozomihada--section .sns_t02 {
    width: calc(41.5 / 2 * var(--sp1));
    margin: 0 auto;
}

#sns.nozomihada--section .sns-box {
    display: flex;
    width: calc(62.5 / 2 * var(--sp1));
    text-align: center;
    gap: calc(1.5 * var(--sp1));
    flex-wrap: nowrap;
    flex-direction: row;
    margin: calc(2.5 / 2 * var(--sp1)) auto;
}

#sns.nozomihada--section .sns-box .sns_btn02 {
    margin: 0 5px;
}

#sns.nozomihada--section .sns_t03 {
    margin-bottom: calc(4.5 / 2 * var(--sp1));
}

#sns.nozomihada--section .sns_p02 {
    margin-bottom: calc(4.5 / 2 * var(--sp1));
}

/* アコーディオン */
/* 全体の枠組み */
.accordion {
    max-width: 500px;
    margin: 20px auto;

}

/* 各アコーディオンの枠 */
details {
    margin-bottom: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    overflow: hidden;
}

/* タイトル部分（クリックできる場所） */
summary {
    display: flex;
    /* padding: 14px 16px;
    font-weight: bold;
    background-color: #f7f7f7;
    cursor: pointer;
    transition: background-color 0.2s;
    justify-content: space-between;
    align-items: center; */
}

/* ホバー時の背景色 */
summary:hover {
    background-color: #e9e9e9;
}

/* デフォルトの矢印を消す */
summary::-webkit-details-marker {
    display: none;
}

summary {
    list-style: none;
}

/* 右側に「＋」「ー」のアイコンを表示 */
/* summary::after {
    content: "+";
    font-size: 1.2rem;
    font-weight: normal;
} */

/* 開いている時のスタイリング */
/* details[open] summary {
    background-color: #e2e8f0;
}

/* 開いている時はアイコンを「ー」にする */
/* details[open] summary::after {
    content: "−";
} */


/* 中身のコンテンツ */
.content {
    padding: 16px;
    background-color: #ffffff;
    border-top: 1px solid #ddd;
}

.content p {
    margin: 0;
    line-height: 1.6;
}

/* NBA code */
.purchase-code {
    /* padding-top: calc(20px * var(--x)); */
    position: relative;
}

.purchase-code::before {
    display: block;
    content: "";
    width: calc(15.8px * var(--x));
    aspect-ratio: 15.8 / 7.4;
    background: url(../img/purchase_code_icon.png) no-repeat center / contain;
    position: absolute;
    top: 0;
    left: calc(50% - ((15.8px * var(--x)) / 2));
}

.purchase-code--text {
    width: calc(160px * var(--x));
    aspect-ratio: 160 / 31;
    margin: 0 auto;
}

.purchase-code--error {
    display: none;
    width: calc(185px * var(--x));
    aspect-ratio: 885 / 86;
    margin: calc(10px * var(--x)) auto calc(-10px * var(--x));
}

.purchase-code--form {
    display: flex;
    flex-direction: column;
    row-gap: calc(5px * var(--x));
    width: calc(183px * var(--x));
    margin: calc(10px * var(--x)) auto 0;
}

.purchase-code--input {
    display: flex;
    column-gap: calc(8px * var(--x));
}

.purchase-code--input input {
    width: calc(120px * var(--x));
    aspect-ratio: 120 / 33;
    font-size: calc(12px * var(--x));
    letter-spacing: .25em;
    color: #595757;
    border-radius: calc(5px * var(--x));
    background-image: url(../img/input_pink.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    overflow: hidden;
    padding: 0 calc(15px * var(--x));
    border: none;
}

.purchase-code--input input::placeholder {
    color: #b4b4b4;
}

.purchase-code--input .purchase-code--btn {
    width: calc(58px * var(--x));
    aspect-ratio: 58 / 32;
    border-radius: calc(5px * var(--x));
    overflow: hidden;
    border: none;
    cursor: pointer;
}

.purchase-code--input .purchase-code--btn .btn-applied {
    width: calc(72px * var(--x)) !important;
    display: block !important;
    position: relative;
    top: calc(-8px * var(--x));
    left: calc(-12px * var(--x));
}

.purchase-code--input .purchase-code--btn .btn-apply {
    width: calc(72px * var(--x)) !important;
    display: block !important;
    position: relative;
    top: calc(-5px * var(--x));
    left: calc(-10px * var(--x));
}

.purchase-code--input .pc-on {
    display: none;
}

.purchase-code--input .sp-on {
    display: block;
}

.purchase-code--input .purchase-code--btn:not(.applied) {
    transition: .1s;
}

.purchase-code--input .purchase-code--btn:not(.applied):hover {
    scale: .99;
    translate: 0 1px;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, .1);
    opacity: 0.8;
}

/* --- 修正箇所：ボタン画像切り替えの正しい指定 --- */
/* 適用前（:not(.applied)）は「適用済」を隠す */
.purchase-code--input .purchase-code--btn:not(.applied) .btn-apply {
    display: none !important;
}

/* 適用前（:not(.applied)）は「適用」を表示する */
.purchase-code--input .purchase-code--btn:not(.applied) .btn-applied {
    display: block !important;
}

/* 適用後（.applied）は「適用」を隠す */
.purchase-code--input .purchase-code--btn.applied .btn-applied {
    display: none !important;
}

/* 適用後（.applied）は「適用済」を表示する */
.purchase-code--input .purchase-code--btn.applied .btn-apply {
    display: block !important;
}

.purchase-code--purchase-btn {
    width: 100%;
    border-radius: calc(5px * var(--x));
    overflow: hidden;
    border: none;
    background: none;
}

.purchase-code--purchase-btn:hover {
    scale: .99;
    translate: 0 1px;
    opacity: 0.8;
}

.purchase-code--purchase-btn img {
    width: 109% !important;
    position: relative;
    left: -12px;
}

.purchase-code--purchase-btn:disabled .btn-able {
    display: none;
}

.purchase-code--purchase-btn:not(:disabled) .btn-disable {
    display: none;
}

.purchase-code--purchase-btn:not(:disabled) {
    transition: .1s;
    cursor: pointer;
}

.purchase-code--purchase-btn:not(:disabled):hover {
    scale: .99;
    translate: 0 1px;
    opacity: 0.8;
}


/* ===============================================
 * NBA Code ボタン＆表示制御
 * =============================================== */

/* --- 未入力時：適用ボタンを押せなくする --- */
.purchase-code--input input:placeholder-shown~.purchase-code--btn {
    pointer-events: none;
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- 入力あり：適用ボタンを押せるようにする --- */
.purchase-code--input input:not(:placeholder-shown)~.purchase-code--btn {
    pointer-events: auto;
    opacity: 1;
    cursor: pointer;
}

/* --- 適用前（:not(.applied)）の画像切り替え --- */
.purchase-code--input .purchase-code--btn:not(.applied) .btn-apply {
    display: none !important;
    /* 「適用済」を隠す */
}

.purchase-code--input .purchase-code--btn:not(.applied) .btn-applied {
    display: block !important;
    /* 「適用」を表示 */
}

/* --- 適用後（.applied）の画像切り替え --- */
.purchase-code--input .purchase-code--btn.applied .btn-applied {
    display: none !important;
    /* 「適用」を隠す */
}

.purchase-code--input .purchase-code--btn.applied .btn-apply {
    display: block !important;
    /* 「適用済」を表示 */
}



@media screen and (max-width: 768px) {
    .purchase-code {
        padding-top: 0;
    }

    .purchase-code::before {
        width: calc((15.8 / var(--sx)) * 100vw);
        left: calc(50% - (((15.8 / var(--sx)) * 100vw) / 2))
    }

    .purchase-code--text {
        width: calc((160 / var(--sx)) * 100vw);
    }

    .purchase-code--error {
        width: calc((185 / var(--sx)) * 100vw);
        margin: calc((10 / var(--sx)) * 100vw) auto calc((-10 / var(--sx)) * 100vw);
    }

    .purchase-code--form {
        row-gap: calc((5 / var(--sx)) * 100vw);
        width: calc((183 / var(--sx)) * 100vw);
        margin: calc((11 / var(--sx)) * 100vw) auto 0;
    }

    .purchase-code--input {
        column-gap: calc((8 / var(--sx)) * 100vw);
    }

    .purchase-code--input input {
        width: calc((120 / var(--sx)) * 100vw);
        font-size: calc((12 / var(--sx)) * 100vw);
        border-radius: calc((5 / var(--sx)) * 100vw);
        padding: 0 calc((15 / var(--sx)) * 100vw);
    }

    .purchase-code--input .purchase-code--btn {
        width: calc((58 / var(--sx)) * 100vw);
        border-radius: calc((5 / var(--sx)) * 100vw);
    }

    .purchase-code--purchase-btn {
        border-radius: calc((5 / var(--sx)) * 100vw);
    }

    .purchase-code--input .purchase-code--btn .btn-applied {
        width: calc(67px * var(--x)) !important;
        display: block !important;
        position: relative;
        top: calc(-7px * var(--x));
        left: calc(-10px * var(--x));
    }

    .purchase-code--input .purchase-code--btn .btn-apply {
        width: calc(66px * var(--x)) !important;
        display: block !important;
        position: relative;
        top: calc(-5px * var(--x));
        left: calc(-10px * var(--x));
    }

    .purchase-code--input .pc-on {
        display: none;
    }

    .purchase-code--input .sp-on {
        display: block;
    }
}

/* ===============================================
 * 未入力時のボタン無効化処理
 * =============================================== */

/* --- 1. 未入力のとき（placeholderが表示されているとき） --- */
.purchase-code--input input:placeholder-shown~.purchase-code--btn {
    pointer-events: none;
    /* クリックを不可にする */
    opacity: 0.5;
    /* 見た目を薄くする（必要に応じて調整） */
    cursor: not-allowed;
}

/* --- 2. 入力されたとき --- */
.purchase-code--input input:not(:placeholder-shown)~.purchase-code--btn {
    pointer-events: auto;
    /* クリックを許可 */
    opacity: 1;
    cursor: pointer;
}


/* ===============================================
 * floating banner
 * =============================================== */
.nozomihada-floating {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 100%);
    /* 初期状態は画面下に隠す */
    opacity: 0;
    visibility: hidden;
    z-index: 999;
    width: 100%;
    max-width: 530px;
    padding: calc(2.2 * var(--sp1)) calc(1.5 * var(--sp1)) calc(1.0 * var(--sp1));
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    transition: transform .3s ease, opacity .3s ease, visibility .3s ease;
}

/* MVを過ぎたら表示 */
.nozomihada-floating.is-show {
    transform: translate(-50%, 0);
    opacity: 1;
    visibility: visible;
}

/* 閉じるボタンが押された時 */
.nozomihada-floating.is-closed {
    display: none !important;
}

/* 閉じるボタン（右上配置） */
.nozomihada-floating--close {
    position: absolute;
    top: calc(3.2 * var(--sp1));
    right: calc(0.8 * var(--sp1));
    width: calc(2.4 * var(--sp1));
    height: calc(2.4 * var(--sp1));
    border: 2px solid #F29C9F;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .1s;
}

.nozomihada-floating--close::before,
.nozomihada-floating--close::after {
    content: '';
    position: absolute;
    width: calc(1.2 * var(--sp1));
    height: 2px;
    background-color: #F29C9F;
}

.nozomihada-floating--close::before {
    transform: rotate(45deg);
}

.nozomihada-floating--close::after {
    transform: rotate(-45deg);
}

.nozomihada-floating--close:hover {
    scale: .95;
    /* background: #333333; */
}

.nozomihada-floating--inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: calc(1.0 * var(--sp1));
}

.nozomihada-floating--text {
    width: calc(25.2 * var(--sp1));
    margin: 0 auto calc(1.2 * var(--sp1));
}

.nozomihada-floating--btn {
    flex: 1;
    display: block;
    width: 50%;
    transition: .1s;
}

.nozomihada-floating--btn img {
    width: 200px;
}

.nozomihada-floating--btn:hover {
    scale: .99;
    translate: 0 1px;
}