@charset "UTF-8";

/* =========================================================
   三井のカーシェアーズ メンバーズプログラム LP
   PC: ≥768px / SP: <768px
   ========================================================= */

:root {
  /* Figma tokens */
  --color-text: #0A0A0A;          /* Text/Normal */
  --color-text-sub: #474747;       /* Text/Supporting */
  --color-heading: #004098;        /* Web/lp h2 = Web/lp strong text */
  --color-link: #003A89;           /* Text/Link / Icon/On Light */
  --color-point: #FF0002;          /* Web/point */
  --color-bg: #FFFFFF;             /* Background/Normal */
  --color-bg-soft: #F5F7FB;        /* セクション補助背景 */
  --color-accent-bg: #CCD9EA;      /* Schemes/Primary Fixed */
  --color-strong-under: #EBF0F7;   /* Web/lp strong text under */

  --color-rank-regular: #004098;
  --color-rank-silver: #B8BCCC;
  --color-rank-gold: #CEB362;

  --font-base: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;

  /* タイポ（Figma：Typography トークン） */
  --fs-h2: 32px;       /* Typography/Text XLarge LP */
  --fs-xl: 26px;       /* Typography/Text XLarge */
  --fs-lg: 18px;
  --fs-md: 16px;       /* Typography/Text Medium */
  --fs-sm: 14px;       /* Typography/Text Small */
  --fs-xs: 12px;       /* Typescale/Body Small/Size */

  /* スペース（Figma：Size トークン） */
  --space-text: 8px;   /* Size/Text space */
  --space-box: 16px;   /* Size/Box space */
  --space-box-lp: 20px;/* Size/Box space LP */
  --space-div: 32px;   /* Size/Div space */

  --container-max: 960px;
  --section-gap-pc: 96px;
  --section-gap-sp: 64px;

  --floating-h-pc: 120px;
  --floating-h-sp: 88px;

  --anchor-offset: 80px;
}

/* --------- reset --------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-base);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--floating-h-pc);
}
img, picture, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--color-link); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3, h4, p { margin: 0; }
button { font: inherit; }

section p { margin:0; }

/* スクロール先のアンカーオフセット（ヘッダー固定時の調整は確定後に値変更） */
[id] { scroll-margin-top: var(--anchor-offset); }

/* --------- layout --------- */
.lp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--section-gap-pc);
  padding-block: 96px;
}

.section {
  width: 100%;
  display: flex;
  justify-content: center;
  padding:0;
}
.section__inner {
  width: 100%;
  max-width: var(--container-max);
  padding-inline: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.section__heading {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-heading);
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 0.25em;
}
.section__heading span { display: inline-block; font-weight: 700; }

.section__lead {
  text-align: center;
  font-size: var(--fs-sm);
  line-height: 1.8;
}
.section__supplement {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--color-text-sub);
  line-height: 1.5;
}

.figure { width: 100%; display: flex; justify-content: center; }
.figure img { width: 100%; max-width: 960px; }
.figure--rank-table img,
.figure--timeline img,
.figure--flow img { max-width: 960px; }
.figure--graph img { max-width: 550px; }

/* --------- intro card（レギュラー→シルバー条件） --------- */
.intro-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.intro-card__triangle {
  display: flex;
  justify-content: center;
}
.intro-card__inner {
  width: 100%;
  background: var(--color-bg);
  border-top: 4px solid var(--color-rank-silver);
  border-bottom: 4px solid var(--color-rank-silver);
  padding: 32px 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
}
.intro-card__title {
  font-size: 18px;
  color: var(--color-text);
  text-align: center;
  line-height: 1.5;
}
.intro-card__lists {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.intro-card__list {
  list-style: none;
  margin: 0;
  padding: 0 16px 0 0;
  border-right: 2px solid var(--color-rank-silver);
  display: flex;
  flex-direction: column;
  gap: var(--space-text);
}
.intro-card__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-text);
}
.intro-card__check {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-accent-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.intro-card__text {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
  font-weight: 700;
}
.intro-card__label {
  width:13em;
  font-size: var(--fs-sm);
  color: var(--color-text);
  font-weight: 700;
  position:relative;
}
.intro-card__label::after{
	display:block;
	content:"：";
	width:1em;
	margin:auto 0;
	position:absolute;
	top:0;
	bottom:0;
	right:0;
}
.intro-card__point {
  display: inline-flex;
  align-items: baseline;
  color: var(--color-point);
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
}
.intro-card__point-num { font-size: 26px; line-height: 1; }
.intro-card__point-s { font-size: 18px; line-height: 1; }
.intro-card__point-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}
.intro-card__sub {
  font-size: var(--fs-sm);
  font-weight: 400;
  font-family: 'Roboto', 'Noto Sans JP', sans-serif;
  color: var(--color-text);
}
.intro-card__sum {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  margin: 0;
  font-weight: 700;
}
.intro-card__sum-label {
  font-size: var(--fs-sm);
  color: var(--color-text);
}
.intro-card__sum-point {
  display: inline-flex;
  align-items: baseline;
  color: var(--color-point);
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
}
.intro-card__sum-num { font-size: 32px; line-height: 1; }
.intro-card__sum-s { font-size: 20px; line-height: 1; }
.intro-card__rank {
  display: flex;
  justify-content: center;
  width: 208px;
  height: auto;
}
.intro-card__rank img { width: 208px; height: auto; }

/* 横スクロール可能領域（画面幅が足りない時のみスクロール、足りる時は中央表示） */
.figure-scroll {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.figure-scroll .figure {
  min-width: min-content;
  justify-content: center;
}
.figure-scroll img {
  width: 786px;
  max-width: none;
  flex-shrink: 0;
}
/* 剥奪条件テーブル画像：PC はコンテナ幅にフィット（SVGなので鮮明）、SP は実寸で横スクロール */
.figure-scroll--deduct { overflow-x: auto; }
.figure-scroll--deduct .figure { min-width: 0; }
.figure-scroll .figure--deduct-table img {
  width: auto;
  max-width: 100%;
  min-width: 0;
  flex-shrink: 1;
}
/* 角を角丸に（特典テーブルの rx=15.5 と合わせる） */
.figure--deduct-table img { border-radius: 15.5px; }

/* 表 / タイムライン / フロー画像を含むセクションは inner の max-width を拡張 */
.section--benefits .section__inner,
.section--howto .section__inner,
.section--flow .section__inner {
  max-width: 1024px;
}

/* --------- hero --------- */
.hero {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  padding-inline: 32px;
}
.hero__inner {
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px; /* Size/Div space */
}
.hero__title { width: 100%; display: flex; justify-content: center; }
.hero__title img { width: 100%; max-width: 560px; }
.hero__visual { width: 100%; display: flex; justify-content: center; max-width: 550px; }
.hero__visual img { width: 100%; max-width: 550px; }

/* hero リード（各単語に下線 10px #EBF0F7） */
.hero__lead {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px; /* Size/Text space */
  align-items: center;
}
.hero__lead-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  margin: 0;
}
.hero__lead-word {
  display: inline-block;
  font-size: 26px;
  font-weight: 700;
  color: var(--color-link);
  line-height: 1.3;
  border-bottom: 10px solid #EBF0F7;
  white-space: nowrap;
  padding-bottom: 2px;
}

/* --------- toc（目次） --------- */
.toc {
  width: 100%;
  max-width: 760px;
}
.toc__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--color-bg);
  border-top: 1px solid #E5E7EB;
  border-bottom: 1px solid #E5E7EB;
}
.toc__list > li {
  display: flex;
  background: var(--color-bg);
  border-right: 1px solid #E5E7EB;
  border-bottom: 1px solid #E5E7EB;
}
/* 3列レイアウト：最後の列の右border、最終行の下borderを除去 */
.toc__list > li:nth-child(3n) { border-right: none; }
.toc__list > li:nth-last-child(-n+3) { border-bottom: none; }
.toc__link {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 48px;
  padding: 12px 20px;
  background: var(--color-bg);
  color: var(--color-link);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
  text-decoration: none;
  position: relative;
  transition: background 0.2s;
}
.toc__link::before {
  content: '';
  width: 14px;
  height: 14px;
  margin-right: 8px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'><path d='M13 3.75L7 9.75L1 3.75' stroke='%23003A89' stroke-width='1.5'/></svg>") no-repeat center / contain;
  flex-shrink: 0;
}
.toc__link:hover { background: var(--color-bg-soft); text-decoration: none; }

/* --------- save section --------- */
.section--save .section__inner { gap: 40px; }
.save-boxes {
  width: 100%;
  background: #EBF0F7;
  border-radius: 24px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* リード（強調下線） */
.save-intro {
  width: 100%;
  text-align: center;
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text);
  /* テキスト中央寄せでも下線が連続して見えるように */
  word-break: break-word;
}
.save-intro__strong {
  display: inline-block;
  color: var(--color-heading);
  font-weight: 700;
  border-bottom: 6px solid #EBF0F7;
  padding: 0 2px;
  line-height: 1.5;
}
.save-intro__strong-main { font-size: 16px; }
.save-intro__strong-sub { font-size: 14px; }

/* 注釈リスト */
.save-notes {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  font-size: 12px;
  color: var(--color-text-sub);
  line-height: 18px;
}
.save-notes li {
  display: flex;
  gap: 4px;
  align-items: flex-start;
}
.save-notes__mark { flex-shrink: 0; }

/* 利用でためる / 日常でためる の box */
.save-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-box);
  background: transparent;
  border: none;
  padding: 0;
}
.save-box__title {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-heading);
  line-height: 1.5;
  background: transparent;
  padding: 0;
  border-radius: 0;
}
.save-box__title-text { flex: 1; }
img.save-box__icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: block;
}

/* 剥奪条件は別構造 */
.save-deduct {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-text);
  border-top: 1px dashed #B6C2D6;
  padding-top: 40px;
  margin-top: 0;
}
.save-deduct__title {
  font-size: var(--fs-md);
  color: var(--color-text);
  line-height: 1.5;
  font-weight: 400;
  margin: 0;
}
.save-deduct__desc {
  font-size: var(--fs-xs);
  color: var(--color-text-sub);
  line-height: 1.5;
  margin: 0;
}
.save-deduct__note {
  display: flex;
  gap: 4px;
  font-size: var(--fs-xs);
  color: var(--color-text-sub);
  line-height: 18px;
  margin: 0;
}
.save-deduct__note-mark { flex-shrink: 0; }

.save-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.save-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 14px;
  background: var(--color-bg);
  border-radius: 6px;
  overflow: hidden;
}
.save-table thead th {
  background: var(--color-heading);
  color: #FFF;
  font-weight: 700;
  font-size: 13px;
  padding: 8px 12px;
  text-align: left;
  line-height: 1.4;
  border-right: 1px solid rgba(255, 255, 255, 0.25);
}
.save-table thead th:last-child { border-right: none; }
.save-table__th--method { width: 200px; }
.save-table__th--score { width: 100px; text-align: center; }
.save-table__th--desc { width: auto; }

.save-table tbody tr { border-bottom: 1px solid #E5E7EB; }
.save-table tbody tr:last-child { border-bottom: none; }
.save-table tbody th,
.save-table tbody td { border-right: 1px solid #E5E7EB; }
.save-table tbody td:last-child { border-right: none; }
.save-table__rh {
  font-weight: 700;
  font-size: 14px;
  color: var(--color-text);
  text-align: left;
  padding: 12px;
  vertical-align: middle;
  line-height: 17px;
  background: var(--color-bg);
}
.save-table__score {
  font-weight: 700;
  font-size: 14px;
  color: var(--color-point);
  text-align: right;
  padding: 12px;
  vertical-align: middle;
  font-family: 'Roboto', sans-serif;
  white-space: nowrap;
  background: var(--color-bg);
}
.save-table__score--minus {
  color: var(--color-text);
  font-weight: 400;
}
.save-table__desc {
  font-size: 14px;
  color: var(--color-text);
  padding: 12px;
  vertical-align: middle;
  line-height: 17px;
  background: var(--color-bg);
  font-weight: 400;
}

/* 剥奪条件の表（別スタイル） */
.save-table--deduct {
  border: 1px solid #EBEBEB;
  background: #EBEBEB;
}
.save-table--deduct thead th {
  background: #F7F7F7;
  color: var(--color-text);
  font-weight: 400;
  font-family: 'Roboto', 'Noto Sans JP', sans-serif;
  font-size: 14px;
  padding: 12px;
  border-right: 1px solid #EBEBEB;
}
.save-table--deduct thead th:last-child { border-right: none; }
.save-table--deduct tbody th,
.save-table--deduct tbody td {
  font-size: 14px;
  padding: 12px;
  font-weight: 400;
  font-family: 'Roboto', 'Noto Sans JP', sans-serif;
  line-height: 17px;
  border-right: 1px solid #EBEBEB;
}
.save-table--deduct tbody td:last-child { border-right: none; }
.save-table--deduct tbody tr { border-bottom: 1px solid #EBEBEB; }
.save-table--deduct .save-table__rh,
.save-table--deduct .save-table__desc { font-weight: 400; }
.save-table__note {
  display: inline-block;
  font-size: 11px;
  color: var(--color-text-sub);
  margin-top: 4px;
  line-height: 1.5;
}
.save-table--deduct .save-table__score {
  font-weight:normal;
  color: var(--color-text);
}

/* --------- benefits 例示ボックス & リンク --------- */
.benefits-example {
  width: 100%;
  background: var(--color-bg);
  border: 2px solid #EBEBEB;
  border-radius: 16px;
  padding: 16px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: center;
}
.benefits-example__label {
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
  white-space: nowrap;
}
.benefits-example__rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.benefits-example__row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 8px 16px;
  max-width: 440px;
  min-width: 300px;
}
.benefits-example__date {
  display: inline-flex;
  align-items: baseline;
  color: var(--color-text);
  font-weight: 700;
}
.benefits-example__num {
  font-family: 'Roboto', sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.benefits-example__unit {
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1;
}
.benefits-example__score {
  display: inline-flex;
  align-items: baseline;
}
.benefits-example__score-label {
  font-size: var(--fs-sm);
  color: var(--color-text-sub);
  font-weight: 400;
  margin-right:0.5em;
}
.benefits-example__score-num {
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
}
.benefits-example__score-s {
  font-family: 'Roboto', sans-serif;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
}
.benefits-example__score-num--red,
.benefits-example__score-s--red { color: var(--color-point); }
.benefits-example__arrow {
  font-size: var(--fs-md);
  color: var(--color-text);
  line-height: 1;
}
.benefits-example__rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 2px;
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: 1;
}
.benefits-example__rank--regular {
  background: var(--color-rank-regular);
  color: #FFFFFF;
}
.benefits-example__rank--silver {
  background: var(--color-rank-silver);
  color: var(--color-text);
}
.benefits-example__divider {
  height: 1px;
  width: 100%;
  background: #EBEBEB;
}

.benefits-link {
  width: 100%;
  text-align: left;
  font-size: var(--fs-sm);
  color: var(--color-text);
  margin: -16px 0 0;
  line-height: 1.8;
  white-space: nowrap;
}
.benefits-link a {
  color: var(--color-link);
  text-decoration: underline;
}

/* --------- howto 例示見出し --------- */
.howto-example-title {
  width: 100%;
  text-align: left;
  font-size: var(--fs-md);
  color: var(--color-text);
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
}

/* --------- flow section（ご利用の流れ） --------- */
.flow-lead {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 2px;
  font-size: var(--fs-sm);
  color: var(--color-text);
  margin: 0;
}
.flow-lead__plain { font-size: var(--fs-sm); }
.flow-lead__strong {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  color: var(--color-heading);
  font-weight: 700;
  border-bottom: 8px solid var(--color-strong-under);
}
.flow-lead__strong-text { font-size: var(--fs-md); }
.flow-lead__strong-num {
  font-size: var(--fs-xl);
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
}

/* 3カードのレイアウト */
.step-list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.step-card {
  flex: 1 1 0;
  min-width: 0;
  max-width: 400px;
  background: #004098; /* Web/lp section step */
  border-radius: 40px;
  padding: 32px var(--space-box-lp);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-box-lp);
}
.step-card__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-text);
  width: 100%;
}
.step-card__step {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #FFFFFF;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}
.step-card__bar {
  display: inline-block;
  width: 20px;
  height: 1px;
  background: #FFFFFF;
}
.step-card__step-label {
  font-size: 12px;
  letter-spacing: 0.5px;
  line-height: 1;
}
.step-card__step-num {
  font-size: 18px;
  letter-spacing: -1px;
  line-height: 1;
}
.step-card__title {
  font-size: 18px;
  font-weight: 400;
  color: #FFFFFF;
  text-align: center;
  line-height: 1.5;
}
.step-card__text {
  font-size: var(--fs-sm);
  color: #FFFFFF;
  text-align: center;
  line-height: 1.5;
}
.step-card__icon {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.step-card__icon img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
}
.step-card__note {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.75);
  text-align: center;
  line-height: 1.5;
  margin: 0;
}

/* --------- faq section --------- */
.section--faq {
  background: #F7F7F7; /* Web/lp section qa */
  padding-block: 88px;
}
.section--faq .section__inner {
  gap: 40px; /* Size/Section space LP */
}
.qa {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-box);
}
.qa__q {
  display: flex;
  gap: 16px;
  align-items: center;
  font-size: 20px;
  font-weight: 700;
  color: var(--color-heading);
  line-height: 1.5;
}
img.qa__q-mark {
  width: 20px;
  height: 28px;
  flex-shrink: 0;
  display: block;
}
.qa__q-text { flex: 1; }
.qa__a {
  background: var(--color-bg);
  border-radius: 40px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: var(--space-box);
}
.qa__a-text {
  font-size: var(--fs-sm);
  color: var(--color-text);
  line-height: 1.8;
}
.qa__note {
  display: flex;
  gap: 0;
  font-size: var(--fs-xs);
  color: var(--color-text-sub);
  line-height: 1.5;
}
.qa__note-mark { flex-shrink: 0; }
.qa__ex {
  background: #EBF0F7; /* Web/lp section */
  border-radius: 20px;
  padding: 20px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  align-items: flex-start;
}
.qa__ex--column {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.qa__ex-label {
  font-size: var(--fs-sm);
  flex-shrink: 0;
  color: var(--color-text);
}
.qa__ex-body {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-text);
}
.qa__ex-body--column {
  flex-direction: column;
  align-items: flex-start;
}
.qa__ex-body--column p {
  margin: 0;
  line-height: 1.5;
}
.qa__ex-title {
  font-size: var(--fs-sm);
  color: var(--color-text);
  line-height: 1.2;
}
.qa__ex-item {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.2;
  margin: 0;
}
.qa__ex-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-heading);
  flex-shrink: 0;
}
.qa__badge {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.qa__badge--ok { background: var(--color-heading); }
.qa__badge--ng { background: #0A0A0A; }

.faq__more {
  width: 100%;
  font-size: var(--fs-sm);
  text-align: left;
  line-height: 1.8;
  color: var(--color-text);
  margin: 0;
}
.faq__more a {
  color: var(--color-link);
  text-decoration: underline;
}

/* --------- cta (in-body) --------- */
.cta {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-inline: 32px;
}
.cta__box {
  width: 100%;
  max-width: 960px;
  background: #004098; /* Tonal palettes/Primary base */
  border-radius: 40px; /* Size/Download box radius */
  padding: 32px; /* Size/Download padding */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px; /* Size/Download space */
}
.cta__logo {
  width: 82px;
  height: 82px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cta__logo img { width: 82px; height: 82px; display: block; }
.cta__lead {
  font-size: 20px; /* Typography/Text Large LP */
  font-weight: 700;
  color: #FFFFFF;
  text-align: center;
  line-height: 1.5;
  margin: 0;
}
.cta__stores {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
}
.cta__store {
  display: block;
  transition: opacity 0.2s;
}
.cta__store:hover { opacity: 0.85; }
.cta__store img { height: 40px; width: auto; display: block; }
.cta__button {
  width: 100%;
  max-width: 360px;
  min-height: 56px;
  background: #FFFFFF;
  border: 1px solid var(--color-link);
  border-radius: 800px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-link);
  text-decoration: none;
  line-height: 22px;
  transition: background 0.2s;
}
.cta__button:hover { background: #F5F7FB; text-decoration: none; }

/* --------- 特典詳細ダイアログ --------- */
.benefits-dialog {
  width: min(800px, 92vw);
  max-height: 88vh;
  padding: 0;
  border: none;
  border-radius: 16px;
  background: var(--color-bg);
  color: var(--color-text);
}
.benefits-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}
.benefits-dialog__inner {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-height: 88vh;
  overflow-y: auto;
}
.benefits-dialog__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-link);
  text-align: center;
  margin: 0;
}
.benefits-dialog__list {
  display: flex;
  flex-direction: column;
  margin: 0;
}
.benefits-dialog__row {
  display: flex;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid #EBEBEB;
}
.benefits-dialog__row:first-child { border-top: 1px solid #EBEBEB; }
.benefits-dialog__term {
  flex: 0 0 200px;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.6;
}
.benefits-dialog__desc {
  flex: 1;
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.7;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.benefits-dialog__desc p { margin: 0; }
.benefits-dialog__sub {
  font-size: 12px;
  color: var(--color-text-sub);
}
.benefits-dialog__close {
  align-self: center;
  min-height: 48px;
  padding: 12px 20px;
  background: #E5ECF5;
  border: none;
  border-radius: 800px;
  color: var(--color-link);
  font-size: 16px;
  font-weight: 700;
  line-height: 19px;
  cursor: pointer;
  transition: background 0.2s;
}
.benefits-dialog__close:hover { background: #D5E0EE; }

/* --------- floating CTA --------- */
.floating-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  padding: 20px 32px;
  z-index: 100;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.floating-cta__link { pointer-events: auto; }
.floating-cta__link {
  width: 100%;
  max-width: 720px;
  min-height: 56px;
  background: var(--color-heading);
  color: #FFF;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 24px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  transition: filter 0.2s;
}
img.floating-cta__logo {
  height: 21px;
  width: auto;
  max-width:156px;
  flex-shrink: 0;
  display: block;
}
.floating-cta__link:hover {
  filter: brightness(1.1);
  text-decoration: none;
}
.floating-cta__text {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.floating-cta__text-line { display: inline; }
.floating-cta__arrow {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.floating-cta__arrow svg { stroke: currentColor; }

/* =========================================================
   レスポンシブ：SP（<768px）
   ========================================================= */
@media (max-width: 767px) {
  body { padding-bottom: var(--floating-h-sp); }

  .lp {
    gap: var(--section-gap-sp);
    padding-block: 56px;
  }

  .section__inner {
    padding-inline: 20px;
    gap: 24px;
  }

  /* SP では figure-scroll に左右 0 のマージンを確保 */
  .figure-scroll { padding-inline: 0; }

  /* benefits のランク表は section__inner の余白だけで揃えるため figure-scroll 自体の padding-inline は不要 */
  .section--benefits .figure-scroll { padding-inline: 0; }

  /* 特典テーブルは SP 専用 SVG（実寸 689px）を表示（画面幅が足りない時のみ横スクロール） */
  .section--benefits .figure-scroll img { width: 689px; }

  /* 剥奪テーブルは SP では実寸 880px で横スクロール（縮小しすぎを防ぎ可読性を確保） */
  /* 左端は本文・ため方テーブルと揃える（figure-scroll の左右余白を解除） */
  .figure-scroll--deduct { padding-inline: 0; }
  .figure-scroll--deduct .figure { min-width: min-content; }
  .figure-scroll--deduct .figure--deduct-table img {
    width: 880px;
    max-width: none;
    min-width: 880px;
    flex-shrink: 0;
  }

  .section__heading {
    font-size: 24px;
  }

  .hero {
    padding-inline: 20px;
    gap: 24px;
  }
  .hero__inner { gap: 24px; max-width: 100%; }
  .hero__title img { max-width: 320px; }
  .hero__visual img { max-width: 360px; }
  .hero__lead-word { font-size: 18px; border-bottom-width: 8px; }

  /* SP: section--save の左右マージンは 24px (画面端からの距離)
     - section__inner: padding-inline 24px (画面端→ボックス端24px)
     - save-boxes: 内側のpaddingは縦のみ。横は0で section__inner padding を活かす
     - save-box: 内側padding 0 (表は box 端いっぱいに表示) */
  .section--save .section__inner { padding-inline: 24px; }
  .save-boxes { padding: 24px 0; }

  /* SP: intro カード内の数字サイズを Figma SP 仕様で拡大 */
  .intro-card__inner { padding: 32px 24px; }
  .intro-card__title { font-size: 16px; }
  .intro-card__label { font-size: 13px; }
  .intro-card__point-num { font-size: 28px; }
  .intro-card__point-s { font-size: 20px; }
  .intro-card__sum-num { font-size: 28px; }
  .intro-card__sum-s { font-size: 20px; }
  .intro-card__sum-label { font-size: 13px; }

  /* SP: 特典詳細ダイアログ縦並び */
  .benefits-dialog__row { flex-direction: column; gap: 8px; padding: 16px 0; }
  .benefits-dialog__term { flex: none; }
  .benefits-dialog__inner { padding: 20px; }

  /* SP: benefits 例示ボックスの「例）」を左固定 + 内容を中央寄せ */
  .benefits-example { flex-wrap: nowrap; align-items: center; gap: 8px; padding: 16px; }
  .benefits-example__label { flex-shrink: 0; }
  .benefits-example__rows { flex: 1; min-width: 0; align-items: center; }
  .benefits-example__row { padding: 8px; max-width: 100%; min-width: 0; justify-content: center; }

  /* SP: intro カードの縦線を横線に切り替え（合計 の上に border-top） */
  .intro-card__lists {
    flex-direction: column;
    gap: 16px;
  }
  .intro-card__list {
    border-right: none;
    padding-right: 0;
    width: 100%;
  }
  .intro-card__sum {
    width: 100%;
    justify-content: center;
    border-top: 2px solid var(--color-rank-silver);
    padding-top: 16px;
  }

  /* save-box / save-deduct: SP（画面端から 24px は section__inner で確保、box の内側 padding は 16px） */
  .save-box {
    padding: 16px;
    gap: 12px;
  }
  .save-deduct {
    padding: 0 16px;
  }
  .save-box__title { font-size: 18px; gap: 8px; }
  .save-box__icon, .save-box__icon img { width: 48px; height: 48px; }
  .save-box__desc { font-size: 13px; }
  .save-box__note { font-size: 11px; }
  .save-table { min-width: 560px; }

  /* flow: SP で3カード縦並び（カード内は 左テキスト + 右アイコン 横並び） */
  .step-list {
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
  }
  .step-card {
    flex: none;
    width: 100%;
    max-width: 100%;
    padding: 32px 24px;
    gap: 16px;
    border-radius: 32px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }
  .step-card__head {
    flex: 1 1 0;
    min-width: 0;
    align-items: flex-start;
    text-align: left;
    gap: 8px;
  }
  .step-card__step {
    justify-content: flex-start;
    width: auto;
    gap: 8px;
  }
  .step-card__bar { width: 24px; }
  .step-card__step-label { font-size: 12px; }
  .step-card__step-num { font-size: 20px; }
  .step-card__title {
    font-size: 22px;
    font-weight: 700;
    text-align: left;
    width: 100%;
  }
  .step-card__text {
    font-size: 14px;
    line-height: 1.7;
    text-align: left;
    width: 100%;
  }
  .step-card__icon {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
  }
  .step-card__icon img {
    width: 120px;
    height: 120px;
  }
  .step-card__note {
    font-size: 13px;
    width: 100%;
    text-align: left;
  }

  .save-table--deduct {
    width:800px;
  }

  /* 目次：SP は縦1列（Figma 18219:920920） */
  .toc__list {
    grid-template-columns: 1fr;
  }
  /* 縦並び：右ボーダーは不要、各項目に下ボーダー（区切り線）、最終項目のみ下ボーダーなし */
  .toc__list > li { border-right: none; }
  .toc__list > li:nth-last-child(-n+3) { border-bottom: 1px solid #E5E7EB; }
  .toc__list > li:last-child { border-bottom: none; }
  .toc__link {
    font-size: 14px;
    padding: 10px 16px;
  }

  /* save：縦並び */
  .save-list { grid-template-columns: 1fr; }

  /* CTA */
  .cta { padding-inline: 20px; }

  /* Floating CTA */
  .floating-cta { 
	width:85%;
	padding: 16px 20px;
	margin:0 auto;
  }
  .floating-cta__link {
    font-size: 15px;
    min-height: 52px;
    gap: 12px;
  }
}


/* w480 以下の Floating CTA: ロゴ↑/テキスト↓ 縦並び1行
   (Figma 19367:924601 / 19367:924155)
   iPhone SE (w375) を含む狭幅で「新規会員登録は」が文字単位で折返されるのを避け、
   ロゴ上＋「新規会員登録はこちら」1行下の構成に切替える。 */
@media (max-width: 480px) {
  .floating-cta__link {
    flex-direction: column;
    gap: 4px;
    min-height: 76px;
    padding: 12px 24px;
    font-size: 15px;
  }
  .floating-cta__text {
    flex-direction: row;
    flex-wrap: nowrap;
    line-height: 1.3;
  }
  .floating-cta__text-line {
    display: inline;
    white-space: nowrap;
  }
  .floating-cta__arrow { display: none; }
  .floating-cta__logo { height: 19px; }
}

/* SP 最小幅対応（<=360px） */
@media (max-width: 360px) {
  .section__heading { font-size: 22px; }
  .hero__title img { max-width: 240px; }
  .toc__link { font-size: 13px; padding: 8px 12px; }
}

/* =========================================================
   印刷時：Floating CTA を非表示
   ========================================================= */
@media print {
  body { padding-bottom: 0; }
  .floating-cta { display: none; }
}