@charset "UTF-8";

/* =========================================================
   style.css  ―  ハローキティ × 三井住友カード キャンペーンLP（PP）
   ========================================================= */

/* ---- カラートークン（色のみ変数化） ---- */
:root {
  /* MAIN */
  --color-black: #2e3033;        /* PP/MAIN/BLACK */
  --color-gray: #6b6b6b;         /* PP/MAIN/GRAY */
  --color-white: #ffffff;        /* PP/MAIN/WHITE */
  --color-light-grey: #f0f2f5;   /* PP/MAIN/LIGHT_GREY */
  /* BG */
  --color-bg-light-blue: #edf0f7; /* PP/BG/LIGHT_BLUE */
  /* ダーク系（ボタン・濃色面で使用） */
  --color-dark-1: #3e444a;
  --color-dark-2: #3d4247;
  /* アクセント（ピンク系） */
  --color-pink: #fed0fb;
  --color-pink-border: #fed6ef;
  /* ボーダー・区切り */
  --color-border: #eeeeee;
  --color-pill-bg: #e4e5e5;      /* 申し込みモーダル 小見出しピル背景 */
  /* フッター／追従CTA */
  --color-gray-2: #5e5e5e;       /* お問い合わせ受付時間テキスト */
  --color-footer-bg: #242527;    /* サイトフッター背景 */
  --color-float-1: #423e3e;      /* 追従CTAグラデ左 */
  --color-float-2: #302e2e;      /* 追従CTAグラデ右 */
  --color-red: #e60020;          /* 注意事項の強調（kitty_numberless_series と同値） */
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  /* ---- レイアウト寸法（複数箇所で共有する値のみ） ---- */
  --w-content-sp: 343px;         /* SPのコンテンツ幅 */
  --w-content-pc: 880px;         /* PCのコンテンツ幅 */
  --modal-pad-y: 48px;           /* .modal の上下padding（.modal__panel の max-height と連動） */
}

/* ---- ベース ---- */
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--color-black);
  background-color: var(--color-white);
  font-family: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-weight: 500;
  line-height: 1.45;
  overflow-x: hidden;
}

/* ---- ページ幅コンテナ（SP基準で流動、実機幅で破綻させない） ---- */
.l-page {
  width: 100%;
  margin-inline: auto;
  /* 追従CTA（fixed）でフッター末尾が隠れないための余白 */
  padding-bottom: calc(59px + env(safe-area-inset-bottom, 0px));
}

/* =========================================================
   共通基底クラス
   ========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px 24px;
  border-radius: 999px;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s var(--ease-soft),
    box-shadow 0.2s var(--ease-soft),
    opacity 0.2s var(--ease-soft);
}

.sp {
  display: block !important;
}
.red {
  color: var(--color-red);
}

.pc {
  display: none !important;
}

@media (min-width: 768px) {
  .pc {
    display: block !important;
  }
  .sp {
    display: none !important;
  }
}

/* =========================================================
   追従CTA（プラチナプリファードを申し込む）
   ========================================================= */
.cta-fixed {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  width: 100%;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  /* セーフエリア分の余白は .cta-card の外側にできるため、ラッパー側にも
     同じグラデーションを敷いて地が透けないようにする（iPhoneでの隙間対策） */
  background-image: linear-gradient(to right, var(--color-float-1), var(--color-float-2));
  pointer-events: none;
}

.cta-card {
  height: 59px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 12px 10px;
  border: 0;
  border-top: 2px solid var(--color-pink-border);
  border-image: linear-gradient(to right, var(--color-pink), #f1d9ff, #bce4ff) 1;
  background-image: linear-gradient(to right, var(--color-float-1), var(--color-float-2));
  box-shadow: 0 -6px 12.5px rgba(0, 0, 0, 0.2);
  text-decoration: none;
  font: inherit;
  cursor: pointer;
  pointer-events: auto;
}

.cta-card__thumb img {
  display: block;
  width: 100%;
  max-width: 48px;
  height: auto;
}

.cta-card__body {
  line-height: .9;
  white-space: nowrap;
}

.cta-card__name {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 14px;
  background-image: url(/camp/kitty_platinum-preferred/assets/img/bg-gold.png);
  background-position: 40% 32%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cta-card__action {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  font-size: 11px;
  color: var(--color-white);
}

/* =========================================================
   HEADER
   ========================================================= */
.header {
  display: flex;
  align-items: center;
  margin: 11px 16px;
}

.header__logo {
  max-width: 167px;
}

/* =========================================================
   FV（ファーストビュー）
   ========================================================= */
.fv {
  position: relative;
  width: 100%;
  background-color: #fcfbf9;
  overflow: hidden;
}

.fv__ribbon {
  position: absolute;
  justify-self: center;
  z-index: 0;
  width: 100%;
  min-width: 767px;
  pointer-events: none;
}

.fv__kv-band {
  display: contents;
}

.fv__kitty,
.fv__kv-deco {
  display: none;
}

.fv__title {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 375 / 520;
  max-width: 376px;
  margin-inline: auto;
}

.fv__title img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fv__kv-pc {
  display: none;
}

.fv__floor {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px 56px;
}

.benefit {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 340px;
  padding: 24px 0 8px;
}

.benefit__item {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  min-height: 86px;
  padding: 8px 12px;
  background-image: url(/camp/kitty_platinum-preferred/assets/img/cloud.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  filter: drop-shadow(0 0 5px rgba(35, 24, 21, 0.1));
}

.benefit__tag {
  border-radius: 9999px;
  background-color: var(--color-bg-light-blue);
  color: var(--color-black);
  font-family: "Zen Maru Gothic", sans-serif;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex-shrink: 0;
  width: 82px;
  min-height: 43px;
  padding: 6px 12px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 1px;
}

.benefit__tag-line--lg {
  font-size: 14px;
  line-height: 1.1;
}

.benefit__tag-line--sm {
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: -.5px;
}

.offer__tag--two {
  position: relative;
  height: 46px;
}

.benefit__tag-line {
  font-size: 13px;
  line-height: 1.2;
}

.benefit__tag-mark {
  position: absolute;
  font-size: 9px;
  line-height: 1;
  text-wrap: nowrap;
  letter-spacing: 1px;
  font-weight: 700;
}

.benefit__body {
  font-family:  "Zen Maru Gothic", "M PLUS Rounded 1c", sans-serif;
display: flex;
  flex-direction: column;
  gap: 3px;
  justify-content: center;
  flex: 1;
  min-width: 0;
  align-items: flex-start;
}

.benefit__cond {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-wrap: nowrap;
}

.benefit__amount {
  display: flex;
  align-items: flex-end;
  gap: 3px;
}

.benefit__amount-unit {
  font-size: 14px;
  font-weight: 900;
  line-height: 1;
  padding-bottom: 4px;
  writing-mode: vertical-rl;
}

.benefit__amount-num {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1px;
}

.benefit__amount-suffix {
  display: flex;
  flex-direction: column;
  padding-bottom: 2px;
  font-weight: 900;
  line-height: 1.2;
  font-family: "M PLUS Rounded 1c", sans-serif;
}

.benefit__amount-yen {
  font-size: 14px;
}

.benefit__amount-gift {
  font-size: 13px;
  letter-spacing: -1px;
  text-wrap: nowrap;
}

.offer__text--gift {
  gap: 3px;
  justify-content: center;
}

.benefit__lead-big {
  font-size: 21px;
  font-weight: 900;
  line-height: 1;
  text-wrap: nowrap;
  letter-spacing: -1px;
}

.benefit__lead-sm {
  position: relative;
  font-size: 13px;
  font-weight: 700;
  line-height: 17px;
}

.benefit__mascot {
  flex-shrink: 0;
  width: 43.533px;
  height: 60px;
  object-fit: contain;
}

.notes__anchor {
  text-decoration: underline;
  position: relative;
  padding-right: 10px;
}

.notes__anchor::before {
  content: "";
  position: absolute;
  right: 4px;
  top: 29%;
  width: 1px;
  height: 9px;
  transform: translateX(-50%);
  background-color: currentColor;
}

.notes__anchor::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 70%;
  width: 6px;
  height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
}


/* ---- PC差分（min-width: 768px）：FV（ファーストビュー） ---- */
@media (min-width: 768px) {
  .header {
    margin: 15px 48px;
  }

  .header__logo {
    max-width: 266px;
    width: 30%;
  }

  .fv__ribbon{
    min-width: 1920px;
    max-width: none;
  }

  .fv__floor {
    padding: 24px 16px 64px;
    gap: 16px;
  }

  /* メインビジュアル（KV）：PCはFvPcの合成ヒーロー（1440×449基準）
     キティ・ロックアップ・左右デコを絶対配置で再現 */
  .fv__kv-band {
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    margin-inline: auto;
    aspect-ratio: 1440 / 449;
    overflow: hidden;
  }

  .fv__kitty {
    display: block;
    position: absolute;
    left: 20.14%;
    top: 8.65%;
    z-index: 1;
    width: 26.25%;
    height: auto;
  }

  .fv__kv-deco {
    display: block;
    position: absolute;
    top: 65.25%;
    z-index: 1;
    height: auto;
  }

  .fv__kv-deco--left {
    left: -9.93%;
    width: 25.69%;
  }

  .fv__kv-deco--right {
    left: 81.08%;
    width: 24.48%;
  }

  .fv__title {
    position: absolute;
    left: 48.4%;
    top: 6.68%;
    z-index: 2;
    width: 37.43%;
    max-width: 732px;
    margin: 0;
    aspect-ratio: auto;
  }

  .fv__kv-sp {
    display: none;
  }

  .fv__kv-pc {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
  }

  .benefit {
    flex-direction: row;
    gap: min(40px, 2.8vw);
    max-width: 890px;
    padding: 0;
  }

  .benefit__item{
    flex: 1 0 0;
    min-width: 0;
    max-width: 100%;
    padding: 14px min(20px, 1.9vw);
    gap: min(17px, 1.18vw);
  }

  .benefit__tag {
    width: min(102px, 12.89vw);
    min-height: 54px;
  }

  .benefit__tag-line--sm{
    font-size: 13px;
    letter-spacing: -0.5px;
  }

  .offer__tag--two {
    height: 54px;
  }

  .benefit__tag-line--lg {
    font-size: 18px;
  }

  .benefit__tag-line {
    font-size: min(16px, 1.8vw);
    letter-spacing: 1.25px;
  }

  .benefit__tag-mark {
    font-size: 10px;
    letter-spacing: .9px;
  }

  .benefit__cond {
    font-size: min(17px, 1.89vw);
  }

  .benefit__lead-big {
    font-size: min(26px, 2.5vw);
    letter-spacing: -2.25px;
  }

  .benefit__lead-sm{
    font-size: 16px;
  }

  .benefit__amount-unit {
    font-size: 17px;
  }

  .benefit__amount-num {
    font-size: min(48px, 4.9vw);
  }

  .benefit__amount-yen {
    font-size: 16px;
  }

  .benefit__amount-gift {
    font-size: min(16px, 1.44vw);
  }

  .benefit__mascot {
    width: 50.789px;
    height: 70px;
  }
}

/* =========================================================
   hover / focus-visible の共通挙動
   ========================================================= */
a:hover,
a:focus-visible,
button:not(.cta-card, .flip__card):hover,
button:not(.cta-card, .flip__card):focus-visible {
  opacity: 0.7;
}

.cta-card:hover .cta-card__name,
.cta-card:hover .cta-card__action,
.cta-card:focus-visible .cta-card__name,
.cta-card:focus-visible .cta-card__action {
  opacity: 0.7;
}


/* =========================================================
   注釈リスト（共通）
   ========================================================= */
.notelist {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
}

.notelist__item {
  display: flex;
  gap: 4px;
  align-items: flex-start;
  width: 100%;
}

.notelist__item--gap {
  margin-top: 8px;
}

.notelist__mark,
.applymodal__subnote-mark {
  flex-shrink: 0;
  white-space: nowrap;
}

.notelist__body {
  min-width: 0;
}

.notelist--sm {
  font-size: 11px;
  line-height: 1.45;
  color: var(--color-gray);
}

.notelist--modal {
  gap: 8px;
  font-size: 14px;
  line-height: 1.4;
}

.notelist--sub {
  color: var(--color-black);
}

.notelist--tight > .notelist__item {
  gap: 2px;
}

.notelist--muted{
  color: var(--color-gray);
  font-size: 12px;
}

.notes {
  max-width: 340px;
}

.cautions__text {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 16px;
  color: var(--color-black);
}

.inquiry-notes {
  max-width: 100%;
  padding-top: 24px;
  list-style: none;
}

.inquiry-notes .notelist__body {
  text-align: justify;
}

/* =========================================================
   外部リンク / モーダル起動リンク
   ========================================================= */
.exlink {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 10%;
}

.modallink {
  display: inline;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 10%;
  cursor: pointer;
}

.ncp-modallink {
  display: inline;
  text-decoration: underline;
}

.ncp-modallink::after {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 2px;
  vertical-align: -1px;
  background-image: url("/camp/kitty_platinum-preferred/assets/img/icon-modal-blk.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.exlink__icon {
  position: relative;
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 2px;
  vertical-align: -1px;
}

.exlink__icon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("/camp/kitty_platinum-preferred/assets/img/icon-link-blk.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.notelist--sm:not(.notelist--sub) .exlink__icon::before,
.cardinfo__panel .exlink__icon::before,
.cautions .exlink__icon::before {
  background-image: url("/camp/kitty_platinum-preferred/assets/img/icon-link-gr.svg");
}


.modallink__icon {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin-left: 2px;
  vertical-align: -1px;
}

.modallink__icon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("/camp/kitty_platinum-preferred/assets/img/icon-modal-gr.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.cardinfo__panel .exlink,
.cardinfo__panel .modallink {
  color: var(--color-gray);
}

.applymodal__notes {
  margin: 0;
  padding: 0;
  list-style: none;
}

.applymodal__notes > .notelist__item {
  gap: 0;
}

.applymodal__notes > .notelist__item > .notelist__mark {
  width: 16px;
}

.applymodal__notes .notelist__body p {
  margin: 0;
}

.applymodal__notes .notelist__body p + p {
  margin-top: 4px;
}


@media (min-width: 768px) {
  .notelist--sm {
    font-size: 12px;
  }

  .notelist--muted{
    font-size: 14px;
  }

  .notes {
    max-width: var(--w-content-pc);
  }

  .cautions__text {
    font-size: 12px;
  }

  .inquiry-notes {
    width: 100%;
    max-width: var(--w-content-pc);
    padding-block: 16px;
  }

  .applymodal__notes {
    font-size: 16px;
  }
}

/* =========================================================
   CHARM（デザインの魅力）
   ========================================================= */
.about {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0 16px 56px;
  background-color: var(--color-light-grey);
}

.about__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 72px;
}

.about__icon img,
.plan__icon {
  width: 73.6px;
  height: 54.448px;
  object-fit: contain;
}

.about__cv {
  display: flex;
  justify-content: center;
  width: 100%;
  padding-bottom: 24px;
}

.btn--cv {
  gap: 0;
  width: 279px;
  max-width: 100%;
  padding: 16px 8px 16px 12px;
  border-radius: 5px;
  background-color: var(--color-gray);
  color: var(--color-white);
}

.btn__label {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.16px;
  text-align: center;
}

.btn__anchor-icon,
.btn__arrow,
.modal__acc-icon,
.ncp-card__icon,
.telbtn__arrow,
.detail-btn__arrow {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.btn__anchor-icon::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 50%;
  width: 2px;
  height: 11px;
  border-radius: 1px;
  background-color: currentColor;
  transform: translateX(-50%);
}

.btn__anchor-icon::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translate(-50%, 0) rotate(45deg);
}


.btn__arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 40%;
  width: 6px;
  height: 6px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}

.btn--apply {
  gap: 0;
  width: 279px;
  max-width: 100%;
  padding: 16px 8px 16px 12px;
  border-radius: 5px;
  background-image: linear-gradient(to right, var(--color-float-1), var(--color-float-2));
  color: var(--color-white);
}

.btn--apply .btn__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.btn__brand {
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.16px;
  background-image: url("/camp/kitty_platinum-preferred/assets/img/bg-gold.png");
  background-position: 40% 32%;
  background-size: 101% 385%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.btn__sub {
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-white);
}

.btn--outline {
  gap: 0;
  width: 279px;
  max-width: 100%;
  padding: 16px 8px 16px 12px;
  border-radius: 5px;
  background-color: var(--color-white);
  border: 1px solid var(--color-black);
  color: var(--color-black);
}

/* =========================================================
   CHARM カード（charm_1）
   ========================================================= */
.charm__cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.cardblk {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  border-radius: 8px;
  background-color: var(--color-white);
  overflow: hidden;
  padding-bottom: 40px;
}

.h3line {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-bottom: 24px;
}

.h3line__title {
  padding: 40px 0 16px;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  text-align: center;
  color: var(--color-black);
}

.h3line__bar {
  display: block;
  width: 83.998px;
  height: 2px;
}

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

.cardblk__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.cardblk__name {
  padding-bottom: 16px;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  text-align: center;
  color: var(--color-black);
}

.cardblk__cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  width: 100%;
  padding-bottom: 24px;
}

.flip {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 250px;
  max-width: 100%;
}

.flip__labels {
  perspective: 1200px;
}

.flip__labels-inner {
  position: relative;
  display: block;
  transform-style: preserve-3d;
  transition: transform 0.6s var(--ease-soft);
}

.flip.is-flipped .flip__labels-inner {
  transform: rotateY(180deg);
}

.flip__label {
  display: flex;
  gap: 8px;
  justify-content: center;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-black);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip__label--back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
}

.flip__card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 250 / 158;
  background: none;
  cursor: pointer;
  perspective: 1200px;
}

.flip__inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s var(--ease-soft);
}

.flip.is-flipped .flip__inner {
  transform: rotateY(180deg);
}

.flip__face {
  position: absolute;
  inset: 0;
  display: block;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip__face--back {
  transform: rotateY(180deg);
}

.flip__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.flip__tap {
  position: absolute;
  top: -8px;
  right: -6.5px;
  width: 54px;
  height: 54px;
}

.flip__caption {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .flip__inner,
  .flip__labels-inner {
    transition: none;
  }
}

.charm-hr {
  width: var(--w-content-sp);
  max-width: calc(100% - 32px);
  height: 1px;
  margin: 40px 0 32px;
  border: 0;
  background-color: var(--color-border);
}

.charm__owned {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  width: 100%;
  padding-inline: 24px;
}

.charm__owned-title {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 900;
  font-size: 16px;
  line-height: 1.3;
  text-align: center;
  color: var(--color-black);
}

.charm__owned-list {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: center;
}

.charm__owned-list .notelist__item {
  width: auto;
}

.cardblk__lead {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 24px;
}

.cardblk__lead-text {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-black);
}

.gift__benefit {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  padding: 24px 16px 0;
}

.gift__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  width: 100%;
}

.gift__ttl {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  text-align: center;
}

.gift__ttl-strong {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 900;
  font-size: 20px;
  line-height: 1.4;
  color: var(--color-black);
}

.gift__ttl-sub {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-black);
}

.gift__img {
  height: auto;
  max-width: 440px;
  padding-bottom: 16px;
  width: 100%;
}

.gift__figure{
  width: 100%;
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  border-radius: 30px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: -0.11px;
  color: var(--color-black);
  background-color: var(--color-bg-light-blue);
}

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

/* ---- モーダル起動ボタン内アイコン（装飾） ---- */
.btn__modal-icon,
.notice-link__icon,
.telbtn__icon {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.btn__modal-icon::before,
.notice-link__icon--modal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("/camp/kitty_platinum-preferred/assets/img/icon-modal-blk.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}


/* ---- PC差分（min-width: 768px）：CHARM（デザインの魅力）／各セクション見出しアイコン（ncp・promo・steps・cardinfo・faq） ---- */
@media (min-width: 768px) {
  .about{
    padding: 0 24px 80px;
  }
  .about__cv {
    padding: 0 16px 32px;
  }

  .btn--cv {
    width: 314px;
  }

  .charm-hr{
    width: 672px;
    margin: 56px 0 40px;
  }
  .charm__cards {
    gap: 32px;
    max-width: var(--w-content-pc);
    margin-inline: auto;
  }

  .cardblk {
    border-radius: 12px;
    padding: 0 16px 48px;
  }

  .h3line{
    padding-bottom: 32px;
  }

  .h3line__title {
    padding: 48px 0 16px;
    font-size: 24px;
  }

  .cardblk__name{
    font-size: 18px;
  }

  .cardblk__body .btn--apply {
    width: 314px;
  }

  .cardblk__lead-text{
    font-size: 18px;
  }

  .charm__owned-title{
    font-size: 20px;
  }

  .charm__owned .btn--outline {
    width: 314px;
  }
}

/* ---- PC差分（min-width: 768px）：券面（WHITE／BLACK）：PCは回転せずオモテ面・ウラ面を横並び ---- */
@media (min-width: 768px) {
  .cardblk__cards {
    gap: 24px;
  }

  .flip {
    gap: 16px;
    width: 100%;
    max-width: 640px;
    margin-inline: auto;
  }

  /* PCは回転しないため、ラベルの3D回転も解除 */
  .flip__labels {
    perspective: none;
  }

  .flip__labels-inner {
    transform: none;
    transform-style: flat;
    transition: none;
  }

  .flip.is-flipped .flip__labels-inner {
    transform: none;
  }

  /* ラベルはWHITE／BLACKの見出しのみ（20px中央）・「オモテ面」は非表示 */
  .flip__label {
    font-size: 20px;
    font-family: "Zen Maru Gothic", sans-serif;
    font-weight: 900;
  }

  /* オモテ／ウラは横並びで両方見えるため、ウラ面ラベルは不要 */
  .flip__label--back {
    display: none;
  }

  .flip__label-sub {
    display: none;
  }

  /* カード：3D回転を解除し、静的な2カラムに */
  .flip__card {
    aspect-ratio: auto;
    perspective: none;
    cursor: default;
  }

  .flip__inner {
    display: flex;
    gap: 32px;
    height: auto;
    transform: none;
    transform-style: flat;
    transition: none;
  }

  .flip.is-flipped .flip__inner {
    transform: none;
  }

  .flip__face {
    position: static;
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    inset: auto;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
  }

  .flip__face--back {
    transform: none;
  }

  .flip__img {
    height: auto;
  }

  /* タップ誘導アイコンはPC横並びでは不要 */
  .flip__tap {
    display: none;
  }

  .flip__caption {
    text-align: left;
    display: block;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    font-size: 12px;
    line-height: 21px;
    color: var(--color-black);
  }

  .gift__figure {
    max-width: 424.5px;
    margin-inline: auto;
  }
}

/* =========================================================
   モーダル（特典の受け取りに関して）
   ========================================================= */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--modal-pad-y) 16px;
}

.modal[hidden] {
  display: none;
}

.modal__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-height: calc(100vh - var(--modal-pad-y) * 2);
  padding: 64px 16px 40px;
  border-radius: 10px;
  background-color: var(--color-white);
  overflow-y: auto;
}

.modal__title {
  width: 100%;
  padding-bottom: 24px;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 900;
  font-size: 20px;
  line-height: 1.5;
  text-align: center;
  color: var(--color-black);
}

/* 閉じるボタン（× を疑似要素で描画） */
.modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.modal__close::before,
.modal__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  background-color: var(--color-black);
}

.modal__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.modal__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.modal__body {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.modal-info {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
}

.modal-info__text {
  width: 100%;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-black);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.modal-info__text-ttl {
  font-family: "Zen Kaku Gothic New", sans-serif;
  margin-top: 12px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-black);
}

/* モーダル内の縦並びリスト（カード一覧・注意事項グループ） */
.modal-cards,
.applymodal__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

/* モーダル内リストの1行（サムネ＋テキスト） */
.modal-cards__item,
.applymodal__doc {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
}

.modal-cards__thumb {
  flex-shrink: 0;
  width: 54px;
  height: 34px;
  object-fit: cover;
}

.modal-cards__name {
  flex: 1 0 0;
  min-width: 0;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-black);
}


/* ---- PC差分（min-width: 768px）：共通ダイアログ ---- */
@media (min-width: 768px) {
  /* 上下paddingを切り替えるだけで .modal__panel の max-height も追従する */
  .modal {
    --modal-pad-y: 64px;
  }

  .modal__panel {
    max-width: var(--w-content-pc);
    padding: 80px 32px;
    border-radius: 15px;
  }

  .modal__title {
    padding-bottom: 32px;
    font-size: 24px;
  }

  .modal__close {
    top: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
  }

  .modal__close::before,
  .modal__close::after {
    width: 26px;
    height: 3px;
  }

  .modal-info__text {
    font-size: 16px;
  }

  .modal-info__text-ttl{
    font-size: 17px;
  }

  .modal-info {
    gap: 8px;
  }

  .modal-info .pill {
    font-size: 16px;
  }

  .pill{
    padding: 4px 20px;
  }

  .modal-cards__thumb {
    width: 80px;
    height: 50.56px;
  }

  .modal-cards__name {
    font-size: 16px;
  }
}

/* =========================================================
   アコーディオン（指定カード一覧）
   ========================================================= */
.modal__accordion {
  width: 100%;
  border: 1px solid var(--color-gray);
  border-radius: 8px;
  padding: 16px 12px;
}

.modal__acc-toggle {
  display: flex;
  gap: 16px;
  width: 100%;
  background-color: var(--color-white);
  cursor: pointer;
}

.modal__accordion .modal__acc-toggle[aria-expanded="true"] {
    border-bottom: 1px solid var(--color-border);
}

.modal__acc-label {
  flex: 1 0 0;
  min-width: 0;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.4;
  text-align: left;
  color: var(--color-black);
}

/* 開閉アイコン（＋／−）：モーダル内アコーディオンとFAQで共通 */
.modal__acc-icon::before,
.modal__acc-icon::after,
.faq-item__toggle::before,
.faq-item__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--color-black);
}

.modal__acc-icon::before,
.faq-item__toggle::before {
  width: 16px;
  height: 2px;
  transform: translate(-50%, -50%);
}

.modal__acc-icon::after,
.faq-item__toggle::after {
  width: 2px;
  height: 16px;
  transform: translate(-50%, -50%);
}

.modal__acc-toggle[aria-expanded="true"] .modal__acc-icon::after {
  height: 0;
}

.modal__acc-toggle[aria-expanded="true"] .modal__acc-label{
  padding-bottom: 16px;
}

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

.modal__acc-body[hidden] {
  display: none;
}

.modal__acc-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  list-style-type: disc;
  padding-left: 18px;
}

.modal__acc-list li {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 1.45;
  color: var(--color-gray);
}

/* ---- モーダル表示中は背面スクロールを固定 ---- */
.is-modal-open {
  overflow: hidden;
}


/* ---- PC差分（min-width: 768px）：指定カード一覧アコーディオン ---- */
@media (min-width: 768px) {
  .modal__acc-label {
    font-size: 16px;
  }

  .modal__acc-list {
    padding-left: 24px;
  }

  .modal__acc-list li {
    font-size: 16px;
    line-height: 1.5;
  }
}

/* =========================================================
   CHARM：プラチナプリファードのかしこい使い方
   ========================================================= */
.smart {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.feature {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  width: 100%;
  padding: 24px 16px;
  border-radius: 8px;
  background-color: var(--color-white);
}

.feature--reward .feature__title{
  padding-bottom: 8px;
}

.feature--reward{
  gap: 16px;
}

.feature__kitty {
  position: absolute;
  top: -54.62px;
  right: 8px;
  width: 80px;
  height: 60.568px;
}

.feature__title {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 900;
  font-size: 20px;
  line-height: 1.5;
  text-align: center;
  color: #333333;
}

.feature__desc {
  width: 100%;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  color: #333333;
}

.rate-badge__value,
.benefit-item__amount,
.rw-card__value,
.rw-card__lead,
.acc-reward__cell-rate,
.tsumitate-rate .rw-card__lead,
.ncp-banner__yen,
.ncp-banner__equiv,
.steptab__lead-num {
  background-image: linear-gradient(to bottom, var(--color-dark-1), var(--color-dark-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.rate-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 24px;
  border-radius: 5px;
  background-color: var(--color-light-grey);
}

.rate-badge__label {
  padding-bottom: 4px;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.3;
  color: #333333;
  text-align: center;
}

.rate-badge__value {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
}

.rate-badge__num {
  font-size: 40px;
  line-height: 1;
}

.rate-badge__unit,
.acc-rate__pct {
  font-size: 24px;
  line-height: 1.3;
  margin-left: 1.5px;
}

.plus-sep {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
}

.plus-sep::before,
.plus-sep::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--color-dark-1);
}

.plus-sep::before {
  width: 18px;
  height: 3px;
  transform: translate(-50%, -50%);
}

.plus-sep::after {
  width: 3px;
  height: 18px;
  transform: translate(-50%, -50%);
}

.plus-sep--sm {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.plus-sep--sm::before {
  width: 12px;
  height: 2px;
}

.plus-sep--sm::after {
  width: 2px;
  height: 12px;
}

/* ---- 特典ボックス（3特典） ---- */
.benefit-box {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  width: 311px;
  max-width: 100%;
  padding: 24px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.benefit-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 8px;
}

.tag-blue {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 29px;
  padding: 0 20px;
  border-radius: 30px;
  background-color: var(--color-bg-light-blue);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.35;
  text-align: center;
  color: var(--color-black);
}

.benefit-item__amount {
  display: flex;
  gap: 3px;
  align-items: baseline;
  justify-content: center;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
}

.benefit-item__max {
  align-self: center;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 900;
  font-size: 14px;
  line-height: 1;
  writing-mode: vertical-rl;
}

.benefit-item__plus {
  font-size: 30px;
  line-height: 1;
}

.benefit-item__num {
  font-size: 44px;
  line-height: 1;
  letter-spacing: -1.35px;
}

.benefit-item__pt {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
}

.benefit-item__desc {
  width: 100%;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-black);
}

.benefit-hr {
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background-color: var(--color-border);
}

/* ---- 注意事項リンク ---- */
.notice-link {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}

.notice-link--right {
  justify-content: flex-end;
}

.notice-link__anchor,
.notice-link__btn {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-black);
  text-decoration: underline;
  text-underline-offset: 10%;
  cursor: pointer;
}

/* アンカー（下向き矢印＋下線） */
.notice-link__icon--anchor::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("/camp/kitty_platinum-preferred/assets/img/icon-anchor-blk.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}


.notice-link__icon--arrow::before,
.detail-btn__arrow::before,
.telbtn__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 40%;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid var(--color-black);
  border-right: 1.5px solid var(--color-black);
  transform: translate(-50%, -50%) rotate(45deg);
}

/* ---- リワードアップ カード群 ---- */
.acc-rewards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  width: 100%;
}

.acc-reward {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  width: 311px;
  max-width: 100%;
  padding: 24px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.acc-rate,
.tsumitate-rate {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 0 2px;
  width: auto;
  max-width: 200px;
}

.acc-rate::after,
.tsumitate-rate::after {
  content: "";
  flex: 0 0 100%;
  height: 2px;
  margin-top: 4px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 2px;
}

.acc-reward:nth-of-type(1) .acc-rate::after {
  background-image: url("/camp/kitty_platinum-preferred/assets/img/rate-line-1.png");
}

.acc-reward:nth-of-type(2) .acc-rate::after {
  background-image: url("/camp/kitty_platinum-preferred/assets/img/rate-line-2.png");
}

.tsumitate-rate::after {
  margin-top: 4px;
  background-image: url("/camp/kitty_platinum-preferred/assets/img/rate-line-3.png");
}

.rw-card__lead {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
}

.rw-card__value {
  display: flex;
  gap: 2px;
  align-items: flex-end;
  justify-content: center;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  margin-left: -3px;
}

.acc-rate__num {
  font-size: 48px;
  line-height: 1;
  letter-spacing: -1.76px;
}

.rw-card__num--lg {
  font-size: 52px;
  letter-spacing: -1.24px;
}


.tsumitate-rate {
  align-items: flex-end;
}

.acc-reward__calc {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 4px;
}

.acc-reward__cell {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  min-width: 0;
  padding: 6px 0;
  border-radius: 5px;
  background-color: var(--color-light-grey);
  text-align: center;
}

.acc-reward__cell-title {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 1.35;
  color: var(--color-black);
}

.acc-reward__cell-rate {
  display: flex;
  gap: 1px;
  align-items: flex-end;
  justify-content: center;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
}

.acc-reward__cell-pre {
  align-self: flex-end;
  padding-bottom: 2px;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 11px;
  line-height: 1.35;
}

.acc-reward__cell-num {
  font-size: 24px;
  line-height: 1;
  letter-spacing: -.88px;
}

.acc-reward__cell-pct {
  font-size: 14px;
  line-height: 1.3;
}

.acc-icons {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}

.acc-icons__item {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  min-width: 0;
}

.acc-icons:not(.rw-icons--multi) .acc-icons__item {
  flex: 0 1 auto;
}

.rw-icon__img {
  width: 48px;
  height: 48px;
}

.rw-icon__name {
  width: 100%;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: -0.44px;
  text-align: center;
  color: var(--color-black);
}

.linkbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 279px;
  max-width: 100%;
  padding: 16px 8px 16px 12px;
  border: 1px solid var(--color-black);
  border-radius: 5px;
  background-color: var(--color-white);
  text-decoration: none;
}

.linkbtn__text {
  flex: 1 0 0;
  min-width: 0;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.16px;
  text-align: center;
  color: var(--color-black);
}


.svc-list {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-top: 8px;
}

.svc-item {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--color-border);
}

.svc-item:first-child {
  padding-top: 0;
}

.svc-item--last {
  padding-bottom: 0;
  border-bottom: 0;
}

.svc-item__icon {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
}

.svc-item__body {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.svc-item__title {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: 0.18px;
  color: var(--color-black);
}

.svc-item__desc {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-black);
}


/* ---- PC差分（min-width: 768px）：CHARM：プラチナプリファードのかしこい使い方 ---- */
@media (min-width: 768px) {
  .smart {
    max-width: var(--w-content-pc);
    margin-inline: auto;
  }

  .feature-list {
    gap: 32px;
  }

  .feature {
    gap: 32px;
    padding: 48px 40px;
    border-radius: 12px;
  }

  .feature--reward{
    gap: 16px;
  }
  .feature__kitty {
    top: -78.98px;
    right: 36px;
    width: 120px;
    height: 90.852px;
  }

  .feature__title {
    font-size: 24px;
  }

  .feature__desc {
    font-size: 18px;
    text-align: center;
  }

  .feature--reward .feature__title{
    padding-bottom: 16px;
  }

  .rate-badge{
    flex-direction: row;
    gap: 8px;
    padding: 16px 24px;
    max-width: 240px;
    width: 100%;
    justify-content: center;
  }
  .rate-badge__num {
    font-size: 48px;
  }

  .rate-badge__label{
    font-size: 15px;
  }

  .benefit-box {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    width: 100%;
    max-width: none;
    padding: 24px 12px;
  }

  .tag-blue{
    padding: 8px 16px;
    height: 38px;
    width: 100%;
    font-size: min(16px, 1.5vw);
    margin-bottom: 16px;
  }

  .benefit-item {
    flex: 1 0 0;
    min-width: 0;
    padding: 0 16px;
    gap: 0px;
  }

  .benefit-hr {
    display: none;
  }

  .benefit-item__desc {
    font-size: 14px;
    padding-bottom: 24px;
  }

  .benefit-item__max{
    font-size: 16px;
  }

  .notice-link{
    font-size: 14px;
  }

  .benefit-item .notice-link{
    padding-top: 16px;
  }

  .benefit-item .notelist--sm{
    margin-block: -16px 16px;
  }


  .benefit-item__num {
    font-size: min(50px, 5vw);
  }

  .benefit-item__amount{
    padding-bottom: 24px;
  }

  .acc-rewards {
    flex-direction: row;
    gap: 24px;
    align-items: stretch;
  }

  .acc-reward {
    flex: 1 0 0;
    gap: 24px;
    width: auto;
    min-width: 0;
  }

  .rw-card__lead {
    font-size: 24px;
  }

  .acc-rate__num {
    font-size: 64px;
    letter-spacing: -3.68px;
    margin-left: -3px;
    margin-bottom: -3px;
  }

  .rw-card__num--lg {
    font-size: 64px;
    letter-spacing: -.68px;
  }

  .acc-reward__cell {
    padding: 8px 0;
  }

  .acc-reward__cell-title {
    font-size: 13px;
  }

  .acc-reward__cell-num {
    font-size: 28px;
    letter-spacing: -.36px;
  }

  .rw-icon__img {
    width: 50px;
    height: 50px;
  }

  .linkbtn {
    width: 314px;
  }

  .svc-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
    row-gap: 24px;
    padding-top: 0;
  }

  .svc-item {
    padding: 0 0 24px;
    border-bottom: 1px solid var(--color-border);
  }

  .svc-item:first-child {
    padding-top: 0;
  }

  .svc-item--last {
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-border);
  }

  .svc-item__icon {
    width: 67px;
    height: 67px;
  }

  .svc-item__title {
    font-size: 20px;
  }

  .svc-item__desc {
    font-size: 14px;
  }
}

/* =========================================================
   モーダル追加要素（継続特典／外貨ショッピング）
   ========================================================= */
.modal__lead {
  width: 100%;
  padding-bottom: 16px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-black);
}

.modal-subnote {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}

/* =========================================================
   新規ご入会プレゼント（New Campaign）
   ========================================================= */
.ncp {
  position: relative;
  width: 100%;
  padding-bottom: 64px;
  overflow: hidden;
}

.ncp__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ncp__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.ncp__icon,
.steps__iconwrap,
.cardinfo__iconwrap,
.faq__iconwrap {
  width: 80px;
  height: 72px;
}

.ncp__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0 16px;
}

.ncp-hero__lead {
  padding-bottom: 8px;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  text-align: center;
  color: var(--color-black);
}

/* 注釈記号。SP/PCで同じサイズに揃えるためメディアクエリ外で指定する */
.ncp sup {
  font-size: .8rem;
}

/* ---- バナー（最大65,000円相当） ---- */
.ncp-banner {
  position: relative;
  width: 100%;
  max-width: 308px;
  margin-bottom: 16px;
}

.ncp-banner__frame {
  display: block;
  width: 100%;
  height: auto;
}

.ncp-banner__amount {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  padding: 11px 15px;
}

.ncp-banner__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 7px;
  border-radius: 23px;
  background-color: #f6f0f4;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.1;
  writing-mode: vertical-rl;
  color: var(--color-dark-1);
}

.ncp-banner__num {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  font-size: 60.936px;
  line-height: 1.1;
  letter-spacing: -3.45px;
  color: #df7994;
}

.ncp-banner__suffix {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ncp-banner__yen {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  font-size: 29.017px;
  line-height: 1.1;
  margin-bottom: -5px;
}

.ncp-banner__equiv {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.5;
}

/* ---- 特典カード群 ---- */
.ncp-cards {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  width: 100%;
  padding-bottom: 16px;
}

.ncp-card {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 12px 12px 12px 16px;
  border: 0;
  border-radius: 8px;
  background-color: var(--color-white);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.ncp-card__main {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  min-width: 0;
}

.ncp-card__badges {
  display: flex;
  gap: 5px;
  align-items: stretch;
}

.ncp-card__ttl {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  color: var(--color-black);
}

.ncp-card__period {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 18px;
  color: var(--color-black);
}


.ncp-card__modal-icon {
  background-image: url("/camp/kitty_platinum-preferred/assets/img/icon-modal-gr.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.ncp-card__arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 40%;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid var(--color-gray);
  border-right: 1.5px solid var(--color-gray);
  transform: translate(-50%, -50%) rotate(45deg);
}

/* 番号バッジ（①②③）：グラデ地＋星アイコン */
.ncp-card__badge {
  position: relative;
  display: inline-flex;
  gap: 2px;
  align-items: center;
  justify-content: center;
  padding: 3px 6px 3px 24px;
  border-radius: 4px;
  background-image: url("/camp/kitty_platinum-preferred/assets/img/bg-gold.png");
  background-position: center;
  background-size: cover;
}

.ncp-card__badge::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  width: 16.966px;
  height: 16.269px;
  background-image: url("/camp/kitty_platinum-preferred/assets/img/badge-icon.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  transform: translateY(-50%);
}

.ncp-card__num {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.35;
  color: var(--color-black);
}

.ncp-card__entry {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 6px;
  border-radius: 4px;
  background-color: var(--color-light-grey);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.35;
  color: var(--color-black);
}


/* ---- PC差分（min-width: 768px）：新規ご入会プレゼント ---- */
@media (min-width: 768px) {
  .ncp {
    padding-bottom: 80px;
  }

  .ncp__inner{
    padding-inline: 24px;
  }

  .ncp__body {
    max-width: var(--w-content-pc);
    margin-inline: auto;
    padding: 0;
  }

  .ncp-hero__lead {
    font-size: 24px;
  }

  .ncp-banner {
    width: 650px;
    max-width: 100%;
    margin: 0 auto 24px;
  }

  .ncp-banner__suffix{
    flex-direction: row;
    align-items: baseline;
    margin-bottom: -25px;
  }

  .ncp-banner__amount {
    gap: 8px;
  }

  .ncp-banner__badge {
    padding: 8px 24px 11px;
    border-radius: 56px;
    font-size: 24px;
    writing-mode: horizontal-tb;
  }

  .ncp-banner__num {
    font-size: 80px;
    letter-spacing: -4.6px;
  }

  .ncp-banner__yen {
    font-size: 40px;
  }

  .ncp-banner__equiv {
    font-size: 32px;
  }

  .ncp-cards {
    gap: 8px;
  }

  .ncp-card {
    gap: 16px;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.05);
  }

  .ncp-card__ttl {
    font-size: 20px;
  }

  .ncp-card__period {
    font-size: 12px;
  }
}

/* =========================================================
   プラン紹介
   ========================================================= */

.plans{
  margin-inline: auto;
  box-sizing: border-box;
  padding: 0 16px 56px;
  background-color: var(--color-white);
}

.plan {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.plan__intro {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  width: 100%;
}

.plan__lead {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  text-align: center;
  color: var(--color-black);
}

.plan__banner {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 24px 0;
}

.plan__banner-img {
  display: block;
  width: 300px;
  height: 250px;
  object-fit: contain;
}


/* ---- PC差分（min-width: 768px）：プラン紹介 ---- */
@media (min-width: 768px) {
  .plans {
    max-width: 726px;
    padding: 0 24px 80px;
  }

  .plan__intro {
    gap: 16px;
    max-width: 726px;
  }

  .plan__lead {
    font-size: 20px;
    line-height: 1.5;
  }

  .plan__banner {
    max-width: 726px;
  }

  .plan > .notelist--sm .notelist__item {
    justify-content: center;
  }

  .plan__banner-img {
    width: 100%;
    max-width: 728px;
    height: 90px;
  }

  .plan--korea .plan__banner-img {
    content: url("/camp/kitty_platinum-preferred/assets/img/banner1-pc.png");
  }

  .plan--cosme .plan__banner-img {
    content: url("/camp/kitty_platinum-preferred/assets/img/banner2-pc.png");
  }
}

/* =========================================================
   カンタン5ステップでカードデビュー（Steps / タブ）
   ========================================================= */
.steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0 16px 72px;
  background-color: var(--color-bg-light-blue);
  background-image: url("/camp/kitty_platinum-preferred/assets/img/dot.svg");
  background-repeat: repeat;
}


.steps__icon,
.cardinfo__icon,
.faq__icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.steps__subttl {
  padding-bottom: 32px;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  text-align: center;
  color: var(--color-black);
}

/* ---- タブ本体 ---- */
.steptab {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  width: 100%;
  padding-bottom: 32px;
  overflow: hidden;
  border-radius: 5px;
  background-color: var(--color-white);
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.06);
}

.steptab__menu {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.steptab__tab {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  padding: 24px 4px 16px;
  border: 0;
  border-bottom: 2px solid var(--color-border);
  background-color: var(--color-white);
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  text-align: center;
  color: var(--color-gray);
  cursor: pointer;
}

.steptab__tab[aria-selected="true"] {
  font-weight: 900;
  color: var(--color-black);
}

.steptab__tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 3px;
  border-image: linear-gradient(to right, var(--color-pink), #f1d9ff, #bce4ff) 1;
  border-bottom: 3px solid;
}

/* ---- タブパネル ---- */
.steptab__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0 16px;
}

.steptab__panel[hidden] {
  display: none;
}

.steptab__ttl {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  width: 100%;
}

.steptab__lead {
  display: flex;
  gap: 3px;
  align-items: baseline;
  justify-content: center;
  white-space: nowrap;
}

.steptab__lead-word {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  color: var(--color-black);
  margin-bottom: -1px;
}

.steptab__lead-num {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  font-size: 36px;
  line-height: 0.96;
}

.steptab__lead-num--sm {
  font-size: 24px;
}

.steptab__desc {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 21px;
  text-align: center;
  color: var(--color-black);
}

/* ---- ステップ一覧 ---- */
.steplist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding-block: 24px 8px;
}

.steplist__row {
  display: flex;
  align-items: stretch;
}

.steplist__num {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-right: 1px solid;
  background-color: var(--color-black);
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.3;
  text-align: center;
  color: var(--color-white);
  border-image: linear-gradient(to bottom, var(--color-pink), #f1d9ff, #bce4ff) 1;
}

.steplist__text {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  min-width: 0;
  padding: 4px 10px;
  background-color: var(--color-light-grey);
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.35;
  color: var(--color-black);
}

.steplist__notes {
  width: 100%;
}


/* ---- PC差分（min-width: 768px）：カンタン5ステップでカードデビュー ---- */
@media (min-width: 768px) {
  .steps {
    padding: 0 24px 80px;
  }

  .steps__subttl {
    padding-bottom: 24px;
    font-size: 20px;
    line-height: 1.5;
  }

  .steptab {
    gap: 0;
    max-width: var(--w-content-pc);
    padding-bottom: 0;
  }

  .steptab__tab {
    font-size: 20px;
  }

  .steptab__panel {
    padding: 40px 16px;
  }

  .steptab__ttl,
  .steplist,
  .steplist__notes {
    max-width: 686px;
  }

  .steptab__lead-word {
    font-size: 24px;
    margin-bottom: -4px;
  }

  .steptab__lead-num {
    font-size: 40px;
    margin-bottom: -1px;
  }

  .steptab__lead-num--sm{
    font-size: 32px;
  }

  .steptab__desc {
    font-size: 16px;
    line-height: 1.3;
  }

  .steplist {
    gap: 12px;
    padding-block: 40px 16px;
  }

  .steplist__text {
    padding: 8px 10px;
    font-size: 16px;
    line-height: 21px;
  }
}

/* =========================================================
   かしこく、かわいく、わたしらしく（Concept）
   ========================================================= */
.concept {
  position: relative;
  width: 100%;
  min-height: 705px;
  padding-bottom: 151px;
  overflow: hidden;
  background-image: linear-gradient(150.72deg, #fcfbf9 2.9%, #f0efed 97.1%);
}

.concept__inner {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  width: 328px;
  max-width: calc(100% - 32px);
  margin: 0 auto;
  padding-top: 64px;
  position: relative;
  z-index: 3;
}

.concept__title {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 900;
  font-size: 26px;
  line-height: 1.4;
  letter-spacing: 2px;
  color: var(--color-black);
}

.concept__body {
  display: flex;
  flex-direction: column;
  gap: 21px;
  width: 100%;
}

.concept__text {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 21px;
  color: var(--color-black);
}

.concept__stamp {
  position: absolute;
  top: 34px;
  right: -29px;
  width: 168px;
  height: auto;
}

.concept__deco {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 375px;
  height: 151px;
  transform: translateX(-50%);
}

.concept__deco-gifts {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 79.5px;
  width: auto;
}

.concept__deco-suitcase {
  position: absolute;
  left: 30%;
  bottom: 0;
  height: 74px;
  width: auto;
}

.concept__deco-kitty {
  position: absolute;
  left: 228px;
  top: 1px;
  width: 163px;
  height: 151px;
}


/* ---- PC差分（min-width: 768px）：かしこく、かわいく、わたしらしく（コンセプト） ---- */
@media (min-width: 768px) {
  .concept {
    height: max(771px, 43vw);
    padding-bottom: 0;
    background-image:
      url("/camp/kitty_platinum-preferred/assets/img/concept-deco-pc.png"),
      linear-gradient(150.72deg, #fcfbf9 2.9%, #f0efed 97.1%);
    background-repeat: no-repeat, no-repeat;
    background-position: bottom center, center;
    background-size: 100%;
  }

  .concept__inner {
    width: auto;
    max-width: 640px;
    text-wrap: nowrap;
    gap: 40px;
    padding-top: 70px;
    left: 14%;
    position: absolute;
    right: 34%;
  }

  .concept__title {
    font-size: min(40px, 4vw);
    line-height: 1.35;
  }

  .concept__body {
    gap: 24px;
  }

  .concept__text {
    font-size: min(21px, 2.5vw);
    line-height: 1.5;
  }

  .br-sp {
    display: none;
  }

  .concept__stamp {
    top: 40px;
    right: 177px;
    width: 252px;
  }

  .concept__deco {
    display: none;
  }
}

/* =========================================================
   ハローキティマップ（Map）
   ========================================================= */
.kittymap {
  width: 100%;
}

/* ---- タグライン帯（マーキー） ---- */
.marquee {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100px;
  padding-top: 2px;
  overflow: hidden;
  background-image: linear-gradient(90deg, var(--color-float-1) 0%, var(--color-float-2) 100%);
}

.marquee__track {
  display: flex;
  gap: 40px;
  align-items: center;
  flex-shrink: 0;
  animation: marquee-scroll 24s linear infinite;
}

.marquee__img {
  flex-shrink: 0;
  width: 313px;
  height: 20px;
  object-fit: contain;
}

@keyframes marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-50% - 20px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track {
    animation: none;
  }
}

/* ---- マップバナー ---- */
.kittymap__inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 40px 0 24px;
  background-color: var(--color-light-grey);
}

.kittymap__banner {
  display: block;
  width: 300px;
  max-width: calc(100% - 32px);
}

.kittymap__banner-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}


/* ---- PC差分（min-width: 768px）：ハローキティマップ ---- */
@media (min-width: 768px) {
  .marquee {
    height: 150px;
  }

  .marquee__img {
    width: 470px;
    height: 30px;
  }

  .kittymap__inner {
    padding: 80px 0 40px;
  }

  .kittymap__banner {
    width: 728px;
    max-width: calc(100% - 48px);
  }

  .kittymap__banner-img {
    content: url("/camp/kitty_platinum-preferred/assets/img/kitty-map-pc.png");
    width: 100%;
    max-width: 728px;
    height: 90px;
    border-radius: 0;
  }
}

/* =========================================================
   もっとおトクなキャンペーンもチェック（バナーカルーセル）
   ========================================================= */
.promo {
  background-color: var(--color-light-grey);
  padding-bottom: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* セクション見出しテキスト（全セクション共通のH2） */
.sec-title {
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.5;
  text-align: center;
  color: var(--color-black);
}

/* セクション見出しブロック（アイコン＋H2・全セクション共通） */
.sec-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 48px 0 32px;
}

.promo__icon {
  width: 80px;
  height: 72px;
  object-fit: contain;
}

.promo__carousel {
  width: 100%;
  max-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.promo__viewport {
  width: 100%;
  overflow: hidden;
  padding-block: 4px;
}

.promo__track {
  display: flex;
  transition: transform 0.4s var(--ease-soft);
  gap: 16px;
}

.promo__slide {
  flex: 0 0 100%;
  display: block;
}

.promo__slide img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 2px rgba(0, 0, 0, 0.1);
}

.promo__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding-top: 16px;
}

.promo__arrow {
  position: relative;
  width: 48px;
  height: 48px;
  border: none;
  background: none;
  cursor: pointer;
  appearance: none;
}

.promo__arrow--prev::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-image: url("/camp/kitty_platinum-preferred/assets/img/swiper-button-prev.svg");
  transform: translate(-50%, -50%);
}

.promo__arrow--next::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url("/camp/kitty_platinum-preferred/assets/img/swiper-button-next.svg");
  background-size: contain;
  transform: translate(-50%, -50%);
}

@media (min-width: 768px) {
  .promo__track {
    flex-direction: row;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    gap: 24px;
  }

  .promo__slide {
    flex: 0 0 auto;
    width: auto;
    max-width: 277px;
  }
}


/* ---- PC差分（min-width: 768px）：セクション見出し（全セクション共通）／もっとおトクなキャンペーンもチェック ---- */
@media (min-width: 768px) {
  .sec-head {
    gap: 16px;
    padding: 64px 0 48px;
  }

  .sec-title {
    font-size: 32px;
  }
  
  .promo {
    padding: 0 24px 40px;
  }


  .promo__carousel {
    position: relative;
    max-width: 578px;
  }

  .promo__slide img {
    border-radius: 12px;
  }

  .promo__nav {
    position: absolute;
    top: 50%;
    left: -10%;
    right: -10%;
    transform: translateY(-50%);
    justify-content: space-between;
    gap: 0;
    padding-top: 0;
  }
}

/* =========================================================
   Vpassアプリでもっと便利に
   ========================================================= */
.vpass {
  background-color: var(--color-light-grey);
  padding-bottom: 16px;
}


.vpass__icon {
  display: block;
  width: 80px;
  height: auto;
  flex-shrink: 0;
}


.vpass__slider {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-inline: 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.vpass__slider::-webkit-scrollbar {
  display: none;
}

.vpass__intro {
  flex: 0 0 auto;
  width: 308px;
  scroll-snap-align: center;
}

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

.vpass__cv {
  display: flex;
  justify-content: center;
  padding-inline: 16px;
  margin-top: 24px;
}

.vpass__btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  max-width: 279px;
  padding-block: 16px;
  border: 1px solid var(--color-black);
  border-radius: 5px;
  background-color: var(--color-white);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--color-black);
  text-decoration: none;
}

.vpass__btn-arrow {
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--color-black);
  border-right: 2px solid var(--color-black);
  transform: rotate(45deg);
  flex-shrink: 0;
}


/* ---- PC差分（min-width: 768px） ---- */
@media (min-width: 768px) {
  .vpass {
    padding: 0 24px 40px;
  }


  .vpass__icon {
    width: auto;
    height: 90px;
  }


  .vpass__slider {
    max-width: var(--w-content-pc);
    margin-inline: auto;
    justify-content: center;
    gap: 24px;
    overflow-x: visible;
    padding-inline: 24px;
  }

  .vpass__intro {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: 300px;
  }

  .vpass__cv {
    margin-top: 32px;
  }

  .vpass__btn {
    max-width: 314px;
  }
}

/* =========================================================
   基本情報（Info）
   ========================================================= */
.cardinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background-color: var(--color-light-grey);
  padding: 0 16px 16px;
}


/* ---- カード枠 ---- */
.cardinfo__panel {
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: center;
  padding: 32px 16px 24px;
  border-radius: 10px;
  background-color: var(--color-white);
}

.cardinfo-ttl {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  width: 100%;
}

.cardinfo-ttl__text {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  text-align: center;
  color: var(--color-black);
}

.cardinfo-ttl__img {
  display: block;
  width: 310px;
  max-width: 100%;
  height: auto;
}

/* ---- 仕様テーブル ---- */
.spec {
  width: 100%;
  border: 1px solid var(--color-border);
  border-collapse: collapse;
  table-layout: fixed;
}

.spec__label {
  width: 91px;
  padding: 10px 8px;
  border: 1px solid var(--color-border);
  background-color: var(--color-light-grey);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  vertical-align: middle;
  color: var(--color-gray);
}

.spec__value {
  padding: 10px 8px;
  border: 1px solid var(--color-border);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
  text-align: left;
  vertical-align: middle;
  color: var(--color-black);
}

.spec__value--sm {
  font-size: 11px;
}

.spec__text {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-black);
}

.spec__text + .spec__text,
.spec__notes {
  margin-top: 2px;
}


/* ---- セクション注釈・CV ---- */
.cardinfo-notes {
  width: 100%;
  padding: 16px 0 24px;
}

.cardinfo__cv {
  display: flex;
  justify-content: center;
  width: 100%;
}


/* ---- PC差分（min-width: 768px）：基本情報 ---- */
@media (min-width: 768px) {
  .cardinfo {
    padding: 0 24px 40px;
  }

  .cardinfo__panel {
    max-width: var(--w-content-pc);
    margin-inline: auto;
    padding: 40px 80px 24px;
  }

  .cardinfo-ttl__text {
    font-size: 24px;
  }

  .spec{
    max-width: 720px;
  }

  .spec__label {
    width: 170px;
    font-size: 16px;
  }

  .spec__value {
    padding: 16px;
    font-size: 15px;
  }

  .spec__value--sm {
    font-size: 15px;
  }

  .spec__text {
    font-size: 15px;
  }

  .cardinfo-notes {
    max-width: var(--w-content-pc);
    margin-inline: auto;
    padding: 24px 0 32px;
  }
}

/* =========================================================
   よくあるご質問（FAQ / アコーディオン）
   ========================================================= */
.faq {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0 16px 85px;
  background-color: var(--color-light-grey);
}


.faq__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  width: 100%;
}

/* ---- アコーディオン項目 ---- */
.faq-item {
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
  background-color: var(--color-white);
}

.faq-item__q {
  display: flex;
  gap: 16px;
  align-items: center;
  width: 100%;
  padding: 24px 16px;
  border: 0;
  background-color: var(--color-white);
  text-align: left;
  cursor: pointer;
}

.faq-item__mark {
  flex-shrink: 0;
  width: 32px;
  height: 36px;
  object-fit: contain;
}

.faq-item__question {
  flex: 1 0 0;
  min-width: 0;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.35;
  color: var(--color-black);
}

.faq-item__toggle {
  position: relative;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}

.faq-item__q[aria-expanded="true"] .faq-item__toggle::after {
  opacity: 0;
}

/* ---- 回答パネル ---- */
.faq-item__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  padding: 0 16px 24px;
}

.faq-item__body[hidden] {
  display: none;
}

.faq-item__divider {
  display: block;
  width: 100%;
  height: 1px;
  background-color: var(--color-border);
}

.faq-item__a {
  display: flex;
  gap: 16px;
  align-items: center;
  width: 100%;
}

.faq-item__answer {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  min-width: 0;
}

.faq-item__answer-text {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.35;
  color: var(--color-black);
}

.faq-item__link {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 16px;
  color: var(--color-black);
  text-decoration: underline;
  text-underline-offset: 10%;
}

.faq-item__link::after {
  content: "";
  flex-shrink: 0;
  width: 12px;
  height: 13px;
  background-image: url("/camp/kitty_platinum-preferred/assets/img/icon-link-blk.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}


/* ---- PC差分（min-width: 768px）：よくあるご質問 ---- */
@media (min-width: 768px) {
  .faq {
    padding-inline: 24px;
  }

  .faq__list {
    max-width: var(--w-content-pc);
    margin-inline: auto;
  }

  .faq-item {
    max-width: var(--w-content-pc);
  }

  .faq-item__q {
    gap: 20px;
    padding: 24px 40px;
  }

  .faq-item__question {
    font-size: 16px;
  }

  .faq-item__body {
    padding: 0 40px 24px;
  }

  .faq-item__answer-text {
    font-size: 16px;
  }

  .faq-item__link {
    font-size: 12px;
  }
}

/* =========================================================
   フッター
   ========================================================= */

.footer{
  align-items: center;
  padding-top: 68px;
  background-color: var(--color-light-grey);
  background-image: url(/camp/kitty_platinum-preferred/assets/img/footer_bg.svg);
  background-size: 240% auto;
  background-repeat: no-repeat;
}


/* ---- 認証・コピーライト表記 ---- */
.approval {
  position: relative;
  padding-top: 40px;
  background-color: var(--color-white);
  width: 100%;
}

.approval__band{
  position: relative;
}

.approval__copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 23px 16px;
  background-color: var(--color-white);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 21px;
  text-align: center;
  color: var(--color-gray);
}

.approval__kitty {
  z-index: 2;
  position: absolute;
  width: 76px;
  height: auto;
  right: 10%;
  top: -98px;
}

/* ---- お問い合わせ ---- */
.inquiry {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 16px 24px;
  background-color: var(--color-white);
}

/* ---- 金融商品に関するご注意事項 ---- */
.cautions {
  display: flex;
  justify-content: center;
  padding: 24px 16px;
  background-color: var(--color-border);
}

.cautions__inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 100%;
}

.cautions__group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cautions__title {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.35;
  color: var(--color-black);
}

.cautions__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 16px;
  list-style: none;
}

.cautions__linkrow {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding-top: 4px;
  font-size: 11px;
}

/* ---- サイト共通フッター ---- */
.copyright {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 24px 16px;
  background-color: var(--color-footer-bg);
}

.copyright__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  list-style: none;
}

.copyright__anchor {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 10px;
  line-height: 1.5;
  color: var(--color-white);
  text-decoration: underline;
  text-underline-offset: 10%;
}

.copyright__icon {
  position: relative;
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 4px;
  vertical-align: -2px;
}

.copyright__icon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("/camp/kitty_platinum-preferred/assets/img/icon-link-wt.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.copyright__copy {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-size: 10px;
  line-height: 1.5;
  text-align: center;
  color: var(--color-white);
}

/* ---- お問い合わせモーダル ---- */
.telcv {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.telcv__label {
  padding-bottom: 24px;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 21px;
  text-align: center;
  color: var(--color-black);
}

.telbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 240px;
  max-width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--color-black);
  border-radius: 5px;
  text-decoration: none;
}

.telbtn__icon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("/camp/kitty_platinum-preferred/assets/img/icon-tel.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.telbtn__num {
  flex: 1 0 0;
  min-width: 0;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  text-align: center;
  color: var(--color-black);
}


.telcv__note {
  padding-top: 16px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  color: var(--color-gray-2);
}


/* ---- PC差分（min-width: 768px）：フッター（認証／お問い合わせ／注意事項／サイトフッター） ---- */
@media (min-width: 768px) {
  .footer{
    background-size: 100% auto;
  }

  .approval__copy {
    padding: 16px 16px 34px;
    font-size: 16px;
  }

  .approval__kitty {
    right: 10%;
    top: -85px;
    width: 109px;
  }

  .inquiry {
    gap: 10px;
    padding: 60px 16px 32px;
  }

  .cautions__inner {
    width: 100%;
    max-width: var(--w-content-pc);
  }

  .cautions__title {
    font-size: 16px;
  }

  .cautions {
    padding-block: 64px;
  }

  .copyright {
    padding: 64px 16px;
  }

  .copyright__anchor {
    font-size: 12px;
  }

  .copyright__copy {
    font-size: 12px;
  }

  .cautions__linkrow {
    font-size: 12px;
  }

  .cta-card{
    height: 80px;
  }

  .cta-card__thumb img{
    width: auto;
    max-width: 70px;
  }

  .cta-card__name{
    font-size: 16px;
  }

  .cta-card__action{
    font-size: 14px;
  }
}

/* ---- PC差分（min-width: 768px）：お問い合わせモーダル ---- */
@media (min-width: 768px) {
  .telcv__label {
    padding-bottom: 24px;
    font-size: 16px;
  }

  .telcv__note {
    font-size: 12px;
  }
}

/* =========================================================
   申し込みモーダル（注意事項確認前）
   ========================================================= */
.applymodal {
  align-items: flex-start;
  max-width: var(--w-content-sp);
  padding: 64px 16px 160px;
  text-align: left;
}

.applymodal__sections {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
}

.applymodal__section {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.applymodal__subtitle {
  width: 100%;
  margin: 0;
  padding-bottom: 16px;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-black);
}


.applymodal__group + .applymodal__group {
  margin-top: 24px;
}

.applymodal__badge {
  align-self: flex-start;
  margin: 0;
  padding: 4px 12px;
  border-radius: 30px;
  background-color: var(--color-pill-bg);
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: -0.11px;
  color: var(--color-black);
}

.applymodal__lead {
  width: 100%;
  margin: 0;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-black);
}

.applymodal__sup {
  font-size: 9px;
  vertical-align: super;
}

.applymodal__subnote {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.applymodal__subnote-item {
  display: flex;
  gap: 4px;
  font-weight: 500;
  font-size: 11px;
  line-height: 1.45;
  color: var(--color-gray);
}


.applymodal__docs {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}


.applymodal__doc-thumb {
  flex-shrink: 0;
  width: 115px;
  height: 72px;
  object-fit: cover;
}

.applymodal__doc-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.apply-prepare__title {
  margin: 0;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
  color: var(--color-black);
}

.applymodal__doc-note {
  margin: 0;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 1.45;
  color: var(--color-gray);
}

/* 追従フッター（チェック＋申込ボタン）：position: fixed で画面下部に全幅固定 */
.applymodal__bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  padding: 8px 16px;
  background-color: var(--color-white);
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2);
}

.applymodal__bar-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  width: 100%;
}

.applymodal__agree {
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
  cursor: pointer;
}

.applymodal__checkbox {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
  white-space: nowrap;
}

.apply-check__box {
  position: relative;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: 1px solid var(--color-gray);
  border-radius: 5px;
  background-color: var(--color-white);
}

.applymodal__checkbox:checked + .apply-check__box {
  border-color: var(--color-border);
  background-color: var(--color-black);
}

.apply-check__box::after {
  content: "";
  position: absolute;
  top: 45%;
  left: 50%;
  width: 14px;
  height: 8px;
  border-left: 2px solid var(--color-white);
  border-bottom: 2px solid var(--color-white);
  transform: translate(-50%, -50%) rotate(-45deg);
  opacity: 0;
}

.applymodal__checkbox:checked + .apply-check__box::after {
  opacity: 1;
}

.applymodal__checkbox:focus-visible + .apply-check__box {
  outline: 2px solid var(--color-black);
  outline-offset: 2px;
}

.applymodal__agree-text {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-black);
}

.applymodal__actions {
  display: flex;
  gap: 8px;
  align-items: stretch;
  width: 100%;
}

.applymodal__actions .applybtn {
  opacity: 0.3;
  pointer-events: none;
  transition: opacity 0.2s var(--ease-soft);
}

.applymodal__actions .applybtn[aria-disabled="false"] {
  opacity: 1;
  pointer-events: auto;
}

.applymodal__action {
  display: flex;
  flex: 1 0 0;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.applymodal__action-cap {
  margin: 0;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 1.3;
  text-align: center;
  color: var(--color-black);
}

.applybtn {
  align-items: center;
  width: 100%;
  text-align: center;
  padding: 16px 12px;
  border: 1px solid var(--color-black);
  border-radius: 5px;
  background-color: var(--color-white);
  text-decoration: none;
  position: relative;
}

.applybtn__text {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.16px;
  color: var(--color-black);
}

.applybtn__arrow {
  width: 16px;
  height: 16px;
}

.applybtn__arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 8px;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid var(--color-black);
  border-right: 1.5px solid var(--color-black);
  transform: translate(-50%, -50%) rotate(45deg);
}


/* ---- PC差分（min-width: 768px）：申し込みモーダル（追従ボタン） ---- */
@media (min-width: 768px) {
  .applymodal {
    max-width: var(--w-content-pc);
    padding: 80px 32px 200px;
  }

  .applymodal__subtitle {
    padding-bottom: 24px;
    font-size: 20px;
  }

  .applymodal__sections {
    gap: 40px;
  }

  .applymodal__lead{
    font-size: 16px;
  }

  .apply-prepare__title {
    font-size: 18px;
  }

  /* 追従フッター：PCは内側余白のみ拡大（固定方法はSPと共通） */
  .applymodal__bar {
    padding: 16px 32px;
  }

  .applymodal__bar-inner {
    gap: 16px;
    max-width: var(--w-content-pc);
    margin: 0 auto;
  }

  .apply-check__box {
    width: 32px;
    height: 32px;
  }

  .apply-check__box::after {
    width: 18px;
    height: 10px;
  }

  .applymodal__agree-text {
    font-size: 16px;
  }

  .applymodal__actions {
    gap: 32px;
    justify-content: center;
    max-width: var(--w-content-pc);
    margin: 0 auto;
  }

  .applymodal__action {
    flex: 1 0 0;
    max-width: 320px;
  }

  .applymodal__action-cap {
    font-size: 12px;
  }

  .applybtn {
    min-height: 56px;
    padding: 16px 16px 16px 24px;
  }

  .l-page{
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  }
}

/* =========================================================
   コピーページ専用：FV注意事項帯・同意ブロック
   （affiliate / kakaku / line / point の各index.jspでのみ使用）
   ========================================================= */
.fv__attention {
  color: var(--color-white);
  font-family: "Zen Kaku Gothic New", sans-serif;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 24px;
  align-items: center;
  background: linear-gradient(
    90deg,
    var(--color-float-1) 0%,
    var(--color-float-2) 100%
  );
}

.fv__attention-items{
  gap: 8px;
  display: grid;
  max-width: 800px;
}

.fv__attention-txt {
  display: flex;
  gap: 8px;
  align-items: center;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.3;
}

.fv__attention-txt::before {
  content: "";
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  background-image: url("/camp/kitty_platinum-preferred/assets/img/icon-attention.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.fv__attention-note {
  font-weight: 500;
  font-size: 11px;
  line-height: 1.45;
  color: var(--color-white);
}

.agree{
  display: flex;
  padding: 12px;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  align-self: stretch;
  background: rgba(240, 242, 245, 0.08);
}

.agree__ttl{
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.45;
}

.agree__txt{
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.45;
}

.fv__attention .notelist{
  color: var(--color-white);
}

.fv__floor--attention {
  padding-bottom: 40px;
}

.header__logo-kakaku{
  max-width: 321px;
}

@media (min-width: 768px) {
  .fv__attention-txt, .agree__ttl {
    font-size: 14px;
  }

  .fv__attention-note, .agree__txt{
    font-size: 12px;
  }
}

/* =========================================================
   PC差分 — 全セクション共通の上書き（min-width: 768px）
   ここに置く理由：対象セレクタは SP 側の指定が後方のセクションに
   あるため、各セクション内に書くと SP 指定に後勝ちされてしまう。
   （詳細度が同じ＝記述順で決まるので、必ず SP 指定より後に置く）
   ========================================================= */
@media (min-width: 768px) {
  /* セクション見出しアイコン（CHARM／ncp／promo／steps／基本情報／FAQ 共通） */
  .about__icon,
  .about__icon img,
  .ncp__icon,
  .promo__icon,
  .steps__iconwrap,
  .cardinfo__iconwrap,
  .faq__iconwrap {
    width: 100px;
    height: 90px;
  }

  /* モーダル共通 */
  .modal__accordion {
    padding: 16px 24px;
  }

  .applymodal__badge {
    font-size: 16px;
  }

  .modal__lead {
    font-size: 16px;
  }
}