@font-face {
    font-family: "Noto Sans JP";
    font-style: normal;
    font-weight: 500;
    src: url("https://static.figma.com/font/NotoSansJP-VF_2") format("woff2");
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    --header-h: 0px;
    --content-offset: 0px;
}

body {
    width: 100%;
    min-width: 0;
    /* reset_pc.cssのbody{min-width:1024px}を打ち消す（狭い画面で右側がはみ出すのを防止） */
    height: 100dvh;
    overflow: hidden;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
}

/* ── 共通ヘッダー（#appHeadはcommon_sp/pc.css側でposition:fixed） ── */
/* JSで実際の高さを計測し --header-h に反映、コンテナをその下に配置する */
.container {
    position: absolute;
    top: calc(var(--header-h) + var(--content-offset));
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    width: 100%;
    transition: top 0.3s ease-in-out;
}

/* ── ヘッダー画像（中央state限定。展開すると上にスクロールして隠れる） ── */
.center-kv {
    position: fixed;
    top: var(--header-h);
    z-index: 11;
    overflow: hidden;
    height: auto;
    padding: 10px 10px 0;
    transform: translateY(0);
    transition: transform 0.3s ease-in-out, top 0.3s ease-in-out;
}

.center-kv img {
    display: block;
    width: 100%;
    animation: kvPulse 1.5s ease-in-out infinite;
}

@keyframes kvPulse {

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

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

/* PCでは中身を650px幅・中央配置に ===== */
@media screen and (min-width: 641px) {
    .container {
        max-width: 650px;
        margin: 0 auto;
    }
}

/* ── パネル共通 ── */
.panel {
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;
    transition: flex-basis 0.5s ease-in-out;
    flex-shrink: 0;
}

.panel--left {
    flex-basis: 50%;
    background: #b60181;
}

.panel--right {
    flex-basis: 50%;
    background: #5e318f;
}

/* ボタン分の高さだけ白帯を敷く（ボタンの角丸・隙間から色が透けないよう画面幅いっぱいに敷く）===== */
.cta-bg {
    position: fixed;
    top: calc(var(--header-h) + var(--content-offset));
    left: 0;
    right: 0;
    height: 48px;
    background: #fff;
    z-index: 9;
    transition: top 0.3s ease-in-out;
}

/* 展開状態 */
.panel--left.is-expanded {
    flex-basis: 95%;
    overflow-y: auto;
}

.panel--right.is-expanded {
    flex-basis: 95%;
    overflow-y: auto;
}

/* 縮小状態（反対側は5%だけ見える）===== */
.panel--left.is-collapsed {
    flex-basis: 5%;
}

.panel--right.is-collapsed {
    flex-basis: 5%;
}

/* ── コンテンツ ── */
.panel__content {
    padding: 0 0 40px;
    margin-top: 48px;
    /* 上部固定CTAボタン（高さ48px）と重ならないように */
    color: #fff;
    min-width: 0;
}

.panel__content h1 {
    font-size: 1.5rem;
    margin-bottom: 24px;
}

.panel__content p {
    font-size: 16px;
    line-height: 1.75;
    margin-bottom: 16px;
    opacity: 0.9;
}

.panel__kv {
    display: block;
    width: calc(100% + 48px);
    height: auto;
    margin: 0 auto;
    border-radius: 0;
}

@media screen and (min-width: 641px) {
    .panel__kv {
        width: calc(100%);
        border-radius: 0;
    }
}

/* 横幅5%（縮小状態）の時はKVを非表示に ===== */
.panel--left.is-collapsed .panel__kv,
.panel--right.is-collapsed .panel__kv {
    display: none;
}

/* 半分（初期）状態はKVのみ表示。展開時のみh1以下を表示 ===== */
.panel__body {
    display: none;
    padding: 4%;
}

.panel--left.content-open .panel__body,
.panel--right.content-open .panel__body {
    display: block;
}

.panel__banner {
    display: block;
    width: 100%;
    height: 120px;
    margin-top: 16px;
    border-radius: 4px;
}

/* ── キャンペーン本文（index.htmlから流用した見出し・注意事項） ── */
.panel__body h3 {
    margin: 0 0 16px;
    padding: 12px 8px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
    color: #fff;
    font-size: 20px;
    line-height: 1.6;
    text-align: center;
    font-weight: 700;
}

.panel__body img {
    display: block;
    width: 100%;
    margin-bottom: 16px;
    border-radius: 4px;
}

.panel__body sup {
    font-size: 0.7em;
}

.panel__body .txtRed {
    color: #ff8a80;
}

.panel__body .list li {
    line-height: 1.7;
    text-indent: -1em;
    padding-left: 1em;
    margin-bottom: 8px;
    opacity: 0.9;
}

.accordion {
    margin-bottom: 24px;
}

.accordion summary {
    list-style: none;
    cursor: pointer;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    padding: 12px 32px 12px 0;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.accordion summary::-webkit-details-marker {
    display: none;
}

.accordion summary::after {
    content: "+";
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 3rem;
}

.accordion[open] summary::after {
    content: "−";
}

.accordion-body {
    padding-top: 16px;
}

.accordion-body h3:not(:first-child) {
    margin-top: 24px;
}

/* ── ご利用方法 STEP2（左右パネル共通コンポーネント） ── */
.panel--left {
    --step-accent: #b60181;
}

.panel--right {
    --step-accent: #5e318f;
}

.step2-card {
    margin-top: 8px;
}

.step2-pink-box {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    box-sizing: border-box;
}

.step2-tab-menu {
    display: flex;
    gap: 4px;
    margin-bottom: 0;
}

.step2-tab-btn {
    flex: 1;
    color: #fff;
    border: none;
    border-bottom: 4px solid transparent;
    padding: 10px 8px;
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
    background: rgba(255, 255, 255, 0.15);
    line-height: 1.4;
    text-align: center;
    border-radius: 10px 10px 0 0;
}

.step2-tab-btn.active {
    background: #fff;
    color: var(--step-accent);
    border-bottom-color: #fff;
}

.step2-tab-content {
    display: none;
}

.step2-tab-content.active {
    display: block;
}

.keyword-swiper {
    width: 100%;
    margin-top: 0;
    padding: 0;
    background: #fff;
    border: 10px solid #fff;
    box-sizing: border-box;
    position: relative;
}

.keyword-swiper .swiper-slide {
    background: #fff;
    padding: 16px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}

.keyword-swiper .swiper-slide img {
    display: block;
    max-width: 100%;
    height: auto;
}

.keyword-swiper .swiper-pagination {
    position: static;
    margin: 8px 0 0;
    text-align: center;
}

.keyword-swiper .swiper-pagination-bullet {
    background: var(--step-accent);
    opacity: 0.4;
}

.keyword-swiper .swiper-pagination-bullet-active {
    opacity: 1;
}

.keyword-swiper .swiper-button-next,
.keyword-swiper .swiper-button-prev {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 30px !important;
    height: 30px !important;
    color: var(--step-accent) !important;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    z-index: 1000;
}

.keyword-swiper .swiper-button-next::after,
.keyword-swiper .swiper-button-prev::after {
    font-size: 14px !important;
    font-weight: bold;
}

.keyword-swiper .swiper-button-next {
    right: 8px;
}

.keyword-swiper .swiper-button-prev {
    left: 8px;
}

.step2-common-img {
    margin-top: 16px;
}

.step2-common-img img {
    width: 100%;
    display: block;
    margin-bottom: 0;
}

.footer-mount {
    padding: 100px 0 0;
}

.panel__body .footer-mount img {
    display: inherit;
    width: inherit;
    max-width: 100%;
}

/* ── 共通フッター（本番footer.htmlをそのまま流し込むため上書き） ──
   common_pc.css は幅1024px固定、common_sp.css はvw基準のため、
   幅約480pxのパネル内にそのまま出すと崩れる（アイコン巨大化・二段組み崩壊等）。
   ここで幅・サイズをこのパネル幅に合わせた固定値に上書きする。 */
#appFooter {
    padding: 32px 24px 40px;
}

#appFooter .appFooter-wrapper {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#appFooter .appFooter-inner {
    display: block;
    margin-bottom: 20px;
}

#appFooter .appFooter-inner .appFooter-listbox {
    width: 100%;
}

#appFooter .appFooter-inner .appFooter-title {
    margin-bottom: 16px;
    width: auto;
}

#appFooter .appFooter-inner .appFooter-list {
    margin-bottom: 16px;
}

#appFooter .appFooter-inner .appFooter-list li {
    font-size: 11px;
    margin: 0 12px 12px 0;
}

#appFooter .appFooter-inner .appFooter-list li:after {
    width: 1px;
    height: 11px;
}

#appFooter .appFooter-inner .appFooter-list li>a {
    padding-right: 12px;
}

#appFooter .footblank {
    width: 12px;
    height: 12px;
    margin: 0 0 0 3px;
}

#appFooter .appFooter-company {
    width: 100%;
    height: auto;
    padding: 16px;
    box-sizing: border-box;
    margin-bottom: 16px;
}

#appFooter .appFooter-aeonlist-wrapper {
    margin-bottom: 16px;
}

#appFooter .appFooter-aeonlist-wrapper .appFooter-aeonlist li {
    display: block;
    width: 100%;
    font-size: 11px;
    margin: 0 0 4px;
}

#appFooter .appFooter-copyright .appFooter-copyright-inner {
    align-items: center;
    margin-bottom: 12px;
}

#appFooter .appFooter-copyright .appFooter-copyright-inner .Footer-tree {
    width: 120px;
}

#appFooter .appFooter-copyright .copyright {
    font-size: 10px;
}

/* ── 上部CTAボタン（画面上部に固定。常時表示、アクティブ側が70%に広がる） ── */
.btn-cta {
    position: fixed;
    z-index: 10;
    top: calc(var(--header-h) + var(--content-offset));
    height: 48px;
    background: #fff;
    border-radius: 10px 10px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    font-size: 1.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: left 0.3s ease-in-out, width 0.3s ease-in-out, font-size 0.3s ease-in-out, top 0.3s ease-in-out;
}

.btn-cta:focus {
    outline: none;
}

.btn-cta--pink {
    color: #b60181;
    border: 2px solid #b60181;
}

.btn-cta--purple {
    color: #5e318f;
    border: 2px solid #5e318f;
}

.cta-arrow {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 7px solid currentColor;
}

/* 画面下部固定のフローティングボタン ===== */
.btn-floating {
    position: fixed;
    bottom: 70px;
    z-index: 20;
    text-align: center;
}

.btn-floating img {
    display: inline-block;
    width: 95%;
}

/* 画面最下部固定バナー ===== */
.bottom-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 1%;
    z-index: 21;
    display: flex;
    align-items: center;
    padding: 20px 16px 10px;
    background: #fff;
    border: solid 4px #b60081;
    color: #333;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
    margin-right: 0;
    margin-left: auto;
    text-align: center;
    border-radius: 99px;
    margin: 0 auto;
    width: 98%;
}

@media screen and (min-width: 641px) {
    .bottom-banner {
        left: auto;
        right: 20px;
        bottom: 20px;
        width: 360px;
        margin: 0;
    }
}

.bottom-banner img {
    display: block;
    width: 100%;
    height: auto;
}

.bottom-banner__arrow {
    margin-left: auto;
}

.btn-shop {
    display: inline-block;
    box-sizing: border-box;
    margin: 0 auto 4%;
    padding: 3% 4%;
    background: #fff;
    color: #93006B;
    border-radius: 90px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
}

.link-white {
    color: #fff !important;
    text-decoration: underline !important;
    font-weight: bold !important;
    display: block;
    margin-bottom: 15px;
}
#appHead {
    transition: transform 0.3s ease-in-out;
}

/* 予告タブ（campaign/index.htmlと同じ見た目） ===== */
.yokoku_tab {
    position: fixed;
    top: calc(var(--header-h) + var(--content-offset) + 24px);
    left: 0;
    transition: top 0.3s ease-in-out;
    background: #e60012;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    padding: 5px 12px;
    z-index: 12;
}

.panel--left.is-collapsed .yokoku_tab {
    display: none;
}