@charset "UTF-8";

/* =========================================================
   クレジットカード情報変更方法のご案内 ページ専用スタイル

   ・既存サイトへ影響しないよう、すべてのスタイルを
     .card-change-page 配下に限定しています。
   ・クラス名の接頭辞は「cc-」（card change）です。
   ・スマートフォンファーストで記述し、画面幅に応じて
     min-width のメディアクエリで上書きしています。
     （ブレイクポイント：640px / 768px / 960px）

   【目次】
    0. 単体ページ用 body リセット
    1. 基本設定（色・文字・幅）
    2. ページ内リセット
    3. 補助クラス
    4. ヘッダー
    5. メイン・共通レイアウト（パンくず・タイトル）
    6. お知らせ枠（現在の状況について）
    7. カードの有効期限更新に伴うお手続きについて
    8. 現在のお手続き方法
       8-1. セクション見出し
       8-2. 振り分けボタン（A / B）
       8-3. お手続き方法カード（A / B 共通）
       8-4. A. LINEをご利用の方
       8-5. B. LINEをご利用でない方
    9. ボタン（CTA）
   10. 安心してお手続きいただくために
   11. お詫び・お願い／戻るリンク
   12. フッター
   13. 動きを減らす設定への対応
   ========================================================= */


/* ---------------------------------------------------------
   0. 単体ページ用 body リセット
      （既存サイトのテンプレートに組み込む場合は不要）
   --------------------------------------------------------- */
.card-change-body {
  margin: 0;
}


/* ---------------------------------------------------------
   1. 基本設定（色・文字・幅）
   --------------------------------------------------------- */
.card-change-page {
  /* カラー（よかエネ公式サイトの配色を基準） */
  --cc-color-text: #545252;          /* 本文 */
  --cc-color-heading: #231815;       /* 見出し */
  --cc-color-brand: #ff4d14;         /* ブランドカラー（アクセントのみ使用） */
  --cc-color-orange: #fd9401;        /* サブカラー（装飾） */
  --cc-color-blue: #0475c0;          /* リンク・フォーム導線 */
  --cc-color-blue-dark: #035a94;     /* フォーム導線 hover */
  --cc-color-blue-light: #eef6fc;    /* フォーム導線 背景 */
  --cc-color-line: #06c755;          /* LINE（装飾用） */
  --cc-color-line-dark: #00753a;     /* LINEボタン背景（白文字とのコントラスト確保） */
  --cc-color-line-darker: #005c2d;   /* LINEボタン hover */
  --cc-color-line-light: #eefaf2;    /* LINE導線 背景 */
  --cc-color-bg: #ffffff;
  --cc-color-bg-soft: #f7f6f4;       /* お知らせ枠・補足の背景 */
  --cc-color-border: #dedad6;
  --cc-color-footer: #4b4240;
  --cc-color-focus: #231815;

  /* レイアウト */
  --cc-content-width: 1040px;
  --cc-gutter: 1rem;
  --cc-radius: 0.75rem;

  /* 文字 */
  --cc-font: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP",
             "BIZ UDPGothic", "Yu Gothic", "Meiryo", sans-serif;

  font-family: var(--cc-font);
  font-size: 1.0625rem;              /* 17px：高齢のお客さまにも読みやすいサイズ */
  line-height: 1.9;
  letter-spacing: 0.03em;
  color: var(--cc-color-text);
  background-color: var(--cc-color-bg);
  line-break: strict;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (min-width: 768px) {
  .card-change-page {
    --cc-gutter: 1.25rem;
    font-size: 1.125rem;             /* 18px */
  }
}


/* ---------------------------------------------------------
   2. ページ内リセット（.card-change-page 配下のみ）
   --------------------------------------------------------- */
.card-change-page *,
.card-change-page *::before,
.card-change-page *::after {
  box-sizing: border-box;
}

.card-change-page h1,
.card-change-page h2,
.card-change-page h3,
.card-change-page p,
.card-change-page ul,
.card-change-page ol,
.card-change-page figure {
  margin: 0;
  padding: 0;
}

.card-change-page img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border: 0;
}

.card-change-page strong {
  font-weight: 700;
  color: var(--cc-color-heading);
}

/* リンク共通 */
.card-change-page a {
  color: var(--cc-color-blue);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.card-change-page a:hover {
  color: var(--cc-color-blue-dark);
  text-decoration-thickness: 2px;
}

.card-change-page a:focus-visible {
  outline: 3px solid var(--cc-color-focus);
  outline-offset: 3px;
  border-radius: 2px;
}


/* ---------------------------------------------------------
   3. 補助クラス
   --------------------------------------------------------- */

/* 本文へスキップ（キーボード操作時のみ表示） */
.card-change-page .cc-skip-link {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  background-color: #ffffff;
  color: var(--cc-color-heading);
  font-weight: 700;
  transform: translateY(-200%);
}

.card-change-page .cc-skip-link:focus {
  transform: translateY(0);
}

/* 表示切り替え：スマートフォンのみ／PCのみ */
.card-change-page .cc-only-pc {
  display: none;
}

/* PCのみ改行 */
.card-change-page .cc-br-pc {
  display: none;
}

@media (min-width: 768px) {
  .card-change-page .cc-br-pc {
    display: inline;
  }
}

@media (min-width: 960px) {
  .card-change-page .cc-only-sp {
    display: none;
  }

  .card-change-page .cc-only-pc {
    display: block;
  }
}


/* ---------------------------------------------------------
   4. ヘッダー
   --------------------------------------------------------- */
.card-change-page .cc-header {
  border-top: 4px solid var(--cc-color-brand);
  border-bottom: 1px solid var(--cc-color-border);
  background-color: #ffffff;
}

.card-change-page .cc-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: calc(var(--cc-content-width) + var(--cc-gutter) * 2);
  min-height: 4rem;
  margin: 0 auto;
  padding: 0.5rem var(--cc-gutter);
}

.card-change-page .cc-header__logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.card-change-page .cc-header__logo img {
  width: 140px;
}

.card-change-page .cc-header__nav {
  display: none;
}

@media (min-width: 768px) {
  .card-change-page .cc-header__inner {
    min-height: 5rem;
  }

  .card-change-page .cc-header__logo img {
    width: 160px;
  }

  .card-change-page .cc-header__nav {
    display: block;
  }

  .card-change-page .cc-header__nav-list {
    display: flex;
    gap: 0.5rem 1.75rem;
    list-style: none;
  }

  .card-change-page .cc-header__nav-list a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--cc-color-text);
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none;
  }

  .card-change-page .cc-header__nav-list a:hover {
    color: var(--cc-color-heading);
    text-decoration: underline;
  }
}


/* ---------------------------------------------------------
   5. メイン・共通レイアウト（パンくず・タイトル）
   --------------------------------------------------------- */
.card-change-page .cc-main {
  padding: 1rem 0 4rem;
}

.card-change-page .cc-container {
  max-width: calc(var(--cc-content-width) + var(--cc-gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--cc-gutter);
}

/* パンくずリスト */
.card-change-page .cc-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5rem;
  list-style: none;
  font-size: 0.875rem;
  line-height: 1.6;
}

.card-change-page .cc-breadcrumb__item + .cc-breadcrumb__item::before {
  content: "›";
  margin-right: 0.5rem;
  color: #8a8584;
}

.card-change-page .cc-breadcrumb__item a {
  display: inline-block;
  padding: 0.5rem 0;
}

.card-change-page .cc-breadcrumb__item[aria-current="page"] {
  padding: 0.5rem 0;
}

/* ページタイトル */
.card-change-page .cc-title {
  margin-top: 1.25rem;
  color: var(--cc-color-heading);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.card-change-page .cc-title::after {
  content: "";
  display: block;
  width: 3rem;
  height: 4px;
  margin-top: 0.75rem;
  border-radius: 2px;
  background-color: var(--cc-color-orange);
}

.card-change-page .cc-lead {
  margin-top: 1.25rem;
}

@media (min-width: 768px) {
  .card-change-page .cc-main {
    padding: 1.5rem 0 5rem;
  }

  .card-change-page .cc-title {
    margin-top: 2rem;
    font-size: 2rem;
  }
}


/* ---------------------------------------------------------
   6. お知らせ枠（現在の状況について）
      ※「カードの有効期限更新…」の枠でも共通で使用
   --------------------------------------------------------- */
.card-change-page .cc-notice {
  margin-top: 2rem;
  padding: 1.25rem 1.25rem 1.5rem;
  border-left: 5px solid var(--cc-color-orange);
  border-radius: 0 var(--cc-radius) var(--cc-radius) 0;
  background-color: var(--cc-color-bg-soft);
}

.card-change-page .cc-notice__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--cc-color-heading);
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.5;
}

/* 「i」マーク（お知らせの意味を示す装飾） */
.card-change-page .cc-notice__title::before {
  content: "i";
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background-color: var(--cc-color-blue);
  color: #ffffff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1;
}

.card-change-page .cc-notice__text {
  margin-top: 0.75rem;
}

/* お知らせ枠が続く場合の間隔 */
.card-change-page .cc-notice + .cc-notice {
  margin-top: 1.5rem;
}

@media (min-width: 768px) {
  .card-change-page .cc-notice {
    padding: 1.75rem 2rem 2rem;
  }
}


/* ---------------------------------------------------------
   7. カードの有効期限更新に伴うお手続きについて
      ※枠・見出し・本文は 6.（.cc-notice）と共通
   --------------------------------------------------------- */

/* 文章が折り返す場合は、語句の切れ目で改行
   （対応ブラウザ：Chrome / Edge など。非対応では通常どおり折り返し） */
.card-change-page .cc-expiry .cc-notice__text {
  word-break: auto-phrase;
}

/* 「お手続き不要」「お手続きが必要」のまとまり（間に区切り線） */
.card-change-page .cc-expiry__group {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--cc-color-border);
}

/* 小見出し */
.card-change-page .cc-expiry__sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.625rem;
  color: var(--cc-color-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.6;
}

/* ラベル（お手続き不要／お手続きが必要） */
.card-change-page .cc-expiry__label {
  display: inline-block;
  padding: 0 0.625rem;
  border: 1px solid var(--cc-color-heading);
  border-radius: 0.25rem;
  background-color: #ffffff;
  font-size: 0.875rem;
  line-height: 1.7;
}

/* カード一覧
   ・●は本文の左端にそろえる
   ・カード名は本文の左端から2文字分右から始める */
.card-change-page .cc-expiry__list {
  margin-top: 0.75rem;
  list-style: none;
}

.card-change-page .cc-expiry__list li {
  position: relative;
  padding-left: 2em;
  color: var(--cc-color-heading);
  font-weight: 700;
}

.card-change-page .cc-expiry__list li + li {
  margin-top: 0.25rem;
}

.card-change-page .cc-expiry__list li::before {
  content: "●";
  position: absolute;
  top: 0;
  left: 0;
  color: var(--cc-color-orange);
  font-size: 0.75em;
  line-height: 2.5;
}


/* ---------------------------------------------------------
   8. 現在のお手続き方法
   --------------------------------------------------------- */

/* --- 8-1. セクション見出し --- */
.card-change-page .cc-methods {
  margin-top: 3.5rem;
}

.card-change-page .cc-section-title {
  color: var(--cc-color-heading);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.card-change-page .cc-section-title::after {
  content: "";
  display: block;
  width: 3rem;
  height: 4px;
  margin: 0.75rem auto 0;
  border-radius: 2px;
  background-color: var(--cc-color-orange);
}

.card-change-page .cc-methods__intro {
  margin-top: 1.25rem;
  text-align: center;
}

@media (min-width: 768px) {
  .card-change-page .cc-methods {
    margin-top: 4.5rem;
  }

  .card-change-page .cc-section-title {
    font-size: 1.75rem;
  }
}

/* --- 8-2. 振り分けボタン（A / B） --- */
.card-change-page .cc-chooser {
  display: grid;
  gap: 0.75rem;
  margin-top: 1.5rem;
  list-style: none;
}

.card-change-page .cc-chooser__item {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 0.875rem;
  height: 100%;
  min-height: 5rem;
  padding: 0.875rem 3rem 0.875rem 1rem;
  border: 2px solid;
  border-radius: var(--cc-radius);
  background-color: #ffffff;
  color: var(--cc-color-heading);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.card-change-page .cc-chooser__item--line {
  border-color: var(--cc-color-line-dark);
}

.card-change-page .cc-chooser__item--form {
  border-color: var(--cc-color-blue);
}

/* 下向き矢印（ページ内移動を示す） */
.card-change-page .cc-chooser__item::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.25rem;
  width: 0.625rem;
  height: 0.625rem;
  border-right: 2px solid var(--cc-color-heading);
  border-bottom: 2px solid var(--cc-color-heading);
  transform: translateY(-75%) rotate(45deg);
}

.card-change-page .cc-chooser__badge {
  grid-row: 1 / 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  color: #ffffff;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
}

.card-change-page .cc-chooser__item--line .cc-chooser__badge {
  background-color: var(--cc-color-line-dark);
}

.card-change-page .cc-chooser__item--form .cc-chooser__badge {
  background-color: var(--cc-color-blue);
}

.card-change-page .cc-chooser__text {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;
}

.card-change-page .cc-chooser__sub {
  color: var(--cc-color-text);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.card-change-page .cc-chooser__item--line:hover {
  background-color: var(--cc-color-line-light);
  color: var(--cc-color-heading);
}

.card-change-page .cc-chooser__item--form:hover {
  background-color: var(--cc-color-blue-light);
  color: var(--cc-color-heading);
}

.card-change-page .cc-chooser__item:hover .cc-chooser__text {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.card-change-page .cc-chooser__item:focus-visible {
  outline: 3px solid var(--cc-color-focus);
  outline-offset: 3px;
}

@media (min-width: 640px) {
  .card-change-page .cc-chooser {
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
  }
}

/* --- 8-3. お手続き方法カード（A / B 共通） --- */
.card-change-page .cc-method {
  margin-top: 2.5rem;
  border: 2px solid;
  border-radius: 1rem;
  overflow: hidden;
  background-color: #ffffff;
  scroll-margin-top: 1rem;
}

.card-change-page .cc-method--line {
  border-color: var(--cc-color-line-dark);
}

.card-change-page .cc-method--form {
  border-color: var(--cc-color-blue);
}

.card-change-page .cc-method__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1.25rem;
  color: #ffffff;
}

.card-change-page .cc-method--line .cc-method__head {
  background-color: var(--cc-color-line-dark);
}

.card-change-page .cc-method--form .cc-method__head {
  background-color: var(--cc-color-blue);
}

.card-change-page .cc-method__badge {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: #ffffff;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1;
}

.card-change-page .cc-method--line .cc-method__badge {
  color: var(--cc-color-line-dark);
}

.card-change-page .cc-method--form .cc-method__badge {
  color: var(--cc-color-blue);
}

.card-change-page .cc-method__title {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
}

.card-change-page .cc-method__body {
  padding: 1.5rem 1.25rem 1.75rem;
}

@media (min-width: 768px) {
  .card-change-page .cc-method {
    margin-top: 3rem;
  }

  .card-change-page .cc-method__head {
    padding: 1rem 2rem;
  }

  .card-change-page .cc-method__title {
    font-size: 1.5rem;
  }

  .card-change-page .cc-method__body {
    padding: 2rem 2.5rem 2.5rem;
  }
}

/* --- 8-4. A. LINEをご利用の方 --- */

/* レイアウト（スマートフォン：縦並び／PC：左に手順・右に二次元バーコード） */
.card-change-page .cc-line-layout {
  display: grid;
  gap: 2rem;
  margin-top: 1.5rem;
}

/* 友だち追加ボックス */
.card-change-page .cc-line-access {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 1rem;
  border: 1px solid #bfe6cc;
  border-radius: var(--cc-radius);
  background-color: var(--cc-color-line-light);
  text-align: center;
}

.card-change-page .cc-line-access__title {
  color: var(--cc-color-heading);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;
}

.card-change-page .cc-line-access__hint {
  font-size: 1rem;
  line-height: 1.7;
}

.card-change-page .cc-line-access__btn {
  width: 100%;
}

.card-change-page .cc-line-access__id {
  font-size: 1rem;
}

/* 表示順（スマートフォン：ボタンを先、二次元バーコードを後） */
.card-change-page .cc-line-access__title { order: 1; }
.card-change-page .cc-line-access__hint  { order: 2; }
.card-change-page .cc-line-access__btn   { order: 3; }
.card-change-page .cc-qr                 { order: 4; }
.card-change-page .cc-line-access__id    { order: 5; }

/* 二次元バーコード（周囲に十分な余白を確保） */
.card-change-page .cc-qr {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.card-change-page .cc-qr__img {
  width: 160px;
  padding: 1rem;
  border: 1px solid var(--cc-color-border);
  border-radius: 0.5rem;
  background-color: #ffffff;
  box-sizing: content-box;
}

.card-change-page .cc-qr__caption {
  max-width: 20rem;
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* お手続きの流れ：見出し */
.card-change-page .cc-line-steps__title {
  color: var(--cc-color-heading);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;
}

/* はじめにご確認ください */
.card-change-page .cc-callout {
  margin: 1rem 0 0.5rem;
  padding: 1rem 1.125rem 1.125rem;
  border: 1px solid #f3d5a3;
  border-radius: var(--cc-radius);
  background-color: #fffaf0;
}

.card-change-page .cc-callout__title {
  color: var(--cc-color-heading);
  font-weight: 700;
  line-height: 1.6;
}

.card-change-page .cc-callout__text {
  margin-top: 0.5rem;
  font-size: 1rem;
  line-height: 1.8;
}

/* STEP一覧 */
.card-change-page .cc-steps {
  margin-top: 0.75rem;
  list-style: none;
}

.card-change-page .cc-step {
  display: grid;
  grid-template-columns: 4.25rem 1fr;
  align-items: start;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px dashed var(--cc-color-border);
}

.card-change-page .cc-step:first-child {
  padding-top: 0.5rem;
}

.card-change-page .cc-step:last-child {
  border-bottom: 0;
}

/* STEP番号 */
.card-change-page .cc-step__num {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 0;
  border: 2px solid var(--cc-color-line-dark);
  border-radius: 0.5rem;
  background-color: #ffffff;
  color: var(--cc-color-line-dark);
  font-weight: 700;
  line-height: 1.1;
}

.card-change-page .cc-step__num-label {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}

.card-change-page .cc-step__num-digit {
  font-size: 1.625rem;
}

/* STEP本文 */
.card-change-page .cc-step__title {
  color: var(--cc-color-heading);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.6;
}

.card-change-page .cc-step__text {
  margin-top: 0.25rem;
}

.card-change-page .cc-step__note {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  line-height: 1.7;
}

/* STEP内の細かい操作（1, 2, 3 …） */
.card-change-page .cc-substeps {
  margin-top: 0.5rem;
  padding-left: 1.5em;
}

.card-change-page .cc-substeps li {
  padding-left: 0.25em;
}

.card-change-page .cc-substeps li + li {
  margin-top: 0.375rem;
}

.card-change-page .cc-substeps li::marker {
  color: var(--cc-color-line-dark);
  font-weight: 700;
}

/* 入力する文字の強調（「よかエネカード変更」など） */
.card-change-page .cc-mark {
  padding: 0.1em 0.4em;
  border-radius: 0.25rem;
  background-color: #fff1d6;
  color: var(--cc-color-heading);
  font-weight: 700;
}

.card-change-page .cc-mark::before {
  content: "「";
}

.card-change-page .cc-mark::after {
  content: "」";
}

/* 補足（契約番号・供給地点特定番号について） */
.card-change-page .cc-hint {
  margin-top: 1rem;
  padding: 1rem 1.125rem;
  border-radius: 0.5rem;
  background-color: var(--cc-color-bg-soft);
}

.card-change-page .cc-hint__title {
  color: var(--cc-color-heading);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
}

.card-change-page .cc-hint__text {
  margin-top: 0.375rem;
  font-size: 1rem;
  line-height: 1.8;
}

.card-change-page .cc-hint__link {
  margin-top: 0.25rem;
}

.card-change-page .cc-hint__link a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
}

/* 手順全体の注記 */
.card-change-page .cc-note {
  margin-top: 1rem;
  font-size: 0.9375rem;
  line-height: 1.7;
}

@media (min-width: 960px) {
  .card-change-page .cc-line-layout {
    grid-template-columns: 1fr 19rem;
    gap: 2.5rem;
    align-items: start;
  }

  /* 二次元バーコード枠は右列。手順が長いためスクロールに追従 */
  .card-change-page .cc-line-access {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: 1.5rem;
    padding: 2rem 1.5rem;
  }

  .card-change-page .cc-line-steps {
    grid-column: 1;
    grid-row: 1;
  }

  /* 表示順（PC：二次元バーコードを先、ボタンを後） */
  .card-change-page .cc-qr                 { order: 3; }
  .card-change-page .cc-line-access__btn   { order: 4; }

  .card-change-page .cc-qr {
    margin-top: 0;
  }

  .card-change-page .cc-qr__img {
    width: 200px;
    padding: 1.25rem;
  }
}

/* --- 8-5. B. LINEをご利用でない方 --- */
.card-change-page .cc-form-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding: 1.75rem 1rem;
  border-radius: var(--cc-radius);
  background-color: var(--cc-color-blue-light);
  text-align: center;
}

.card-change-page .cc-form-cta__note {
  font-size: 0.9375rem;
  line-height: 1.7;
}

@media (min-width: 768px) {
  .card-change-page .cc-form-cta {
    padding: 2.25rem 2rem;
  }
}


/* ---------------------------------------------------------
   9. ボタン（CTA）
   --------------------------------------------------------- */
.card-change-page .cc-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 24rem;
  min-height: 3.75rem;
  margin: 0 auto;
  padding: 0.875rem 3rem 0.875rem 2rem;
  border: 2px solid transparent;
  border-radius: 31.25rem;
  color: #ffffff;
  font-size: 1.1875rem;              /* 19px 太字：白文字のコントラスト基準（大きな文字）を満たすサイズ */
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

/* 右向き矢印 */
.card-change-page .cc-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.5rem;
  width: 0.625rem;
  height: 0.625rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}

.card-change-page .cc-btn:hover {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.card-change-page .cc-btn:focus-visible {
  outline: 3px solid var(--cc-color-focus);
  outline-offset: 3px;
}

/* LINE */
.card-change-page .cc-btn--line {
  background-color: var(--cc-color-line-dark);
}

.card-change-page .cc-btn--line:hover {
  background-color: var(--cc-color-line-darker);
}

/* 専用フォーム */
.card-change-page .cc-btn--form {
  background-color: var(--cc-color-blue);
}

.card-change-page .cc-btn--form:hover {
  background-color: var(--cc-color-blue-dark);
}

@media (min-width: 768px) {
  .card-change-page .cc-btn {
    min-height: 4.25rem;
  }
}


/* ---------------------------------------------------------
   10. 安心してお手続きいただくために
   --------------------------------------------------------- */
.card-change-page .cc-safety {
  margin-top: 3rem;
  padding: 1.25rem 1.25rem 1.5rem;
  border: 1px solid var(--cc-color-border);
  border-radius: var(--cc-radius);
  background-color: #ffffff;
}

.card-change-page .cc-safety__title {
  color: var(--cc-color-heading);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;
}

.card-change-page .cc-safety__list {
  margin-top: 0.75rem;
  padding-left: 1.25em;
}

.card-change-page .cc-safety__list li + li {
  margin-top: 0.5rem;
}

@media (min-width: 768px) {
  .card-change-page .cc-safety {
    margin-top: 4rem;
    padding: 1.75rem 2rem 2rem;
  }
}


/* ---------------------------------------------------------
   11. お詫び・お願い／戻るリンク
   --------------------------------------------------------- */
.card-change-page .cc-apology {
  margin-top: 2rem;
  padding: 1.5rem 1.25rem;
  border-radius: var(--cc-radius);
  background-color: var(--cc-color-bg-soft);
}

.card-change-page .cc-apology__text {
  color: var(--cc-color-heading);
}

.card-change-page .cc-back {
  margin-top: 2.5rem;
  text-align: center;
}

.card-change-page .cc-back a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.25rem 0.5rem;
}

@media (min-width: 768px) {
  .card-change-page .cc-apology {
    padding: 2rem;
    text-align: center;
  }
}


/* ---------------------------------------------------------
   12. フッター
   --------------------------------------------------------- */
.card-change-page .cc-footer {
  background-color: var(--cc-color-footer);
  color: #ffffff;
}

.card-change-page .cc-footer__inner {
  max-width: calc(var(--cc-content-width) + var(--cc-gutter) * 2);
  margin: 0 auto;
  padding: 2.5rem var(--cc-gutter) 1.5rem;
}

.card-change-page .cc-footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.25rem 1.5rem;
  list-style: none;
}

.card-change-page .cc-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: #ffffff;
  font-size: 0.9375rem;
  text-decoration: none;
}

.card-change-page .cc-footer a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.card-change-page .cc-footer a:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

.card-change-page .cc-footer__copy {
  margin-top: 1.5rem;
  color: #e8e4e1;
  font-size: 0.875rem;
  text-align: center;
}

.card-change-page .cc-footer__copy small {
  font-size: inherit;
}


/* ---------------------------------------------------------
   13. 動きを減らす設定への対応
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .card-change-page *,
  .card-change-page *::before,
  .card-change-page *::after {
    transition: none;
  }
}