/* ==========================================================
   DAYS GRAPHY - Landing Page Stylesheet
   Mobile-first approach
   Breakpoint: 768px (PC)
   Section backgrounds: WebP image assets via <picture>
   ========================================================== */


/* ===============================
   1. Design Tokens (CSS Variables)
   =============================== */
:root {
  /* Colors */
  --color-primary: #F28C28;          /* 基調オレンジ */
  --color-primary-dark: #E76D0A;     /* ボタンなどの濃いオレンジ */
  --color-primary-light: #FFB366;    /* 薄いオレンジ */
  --color-accent: #F3270F;           /* アクセント赤（Figma正：帯バー・バッジ・「無料」共通） */
  --color-heading: #EE5000;          /* セクション見出しバナー共通色（DG-オレンジ。For Whom / How It Works / CTA） */
  --color-bg: #FFFFFF;
  --color-bg-soft: #FFF6EC;          /* ベージュ系の淡い背景 */
  --color-bg-cream: #FFF2E2;
  --color-text: #333333;
  --color-text-muted: #666666;
  --color-border: #F5D9BD;
  --color-white: #FFFFFF;

  /* Typography (font family) */
  --font-base: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif;

  /* Typography (font sizes) — Figma正（PC基準）
     PC側でのみ使用。SP側は現状の直書き値を維持（SP用Figma抽出後に別途対応予定）
     KV H1助詞は親に対して 0.75em（30/40）で自動スケールするため独立トークン無し */
  --fs-h1-main: 40px;        /* KV H1 メインワード */
  --fs-h2: 30px;             /* セクション見出し H2 */
  --fs-cta-btn: 24px;        /* CTAボタンラベル */
  --fs-emphasis: 24px;       /* 「無料」など強調 */
  --fs-body-lg: 20px;        /* About / How It Works リード, For Whom 本文 */
  --fs-body: 16px;           /* バッジ, ラベル, ステップタイトル */
  --fs-body-sm: 14px;        /* ステップ本文, 目安リスト, 注記 */
  --fs-note: 12px;           /* KV/CTA注記, Footer copyright */

  /* Line heights */
  --lh-tight: 1.2;
  --lh-snug: 1.4;
  --lh-normal: 1.5;
  --lh-relaxed: 1.75;        /* 本文の標準（Figma正） */
  --lh-loose: 1.9;

  /* Letter spacing */
  --ls-default: 0.05em;      /* Figma正：ほぼ全テキストで統一 */
  --ls-tight: 0.02em;

  /* Font weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* Layout */
  --container-max: 1080px;
  --container-pad-pc: 40px;
  --container-pad-sp: 20px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 6px 24px rgba(242, 140, 40, 0.18);
  --shadow-lg: 0 10px 40px rgba(242, 140, 40, 0.22);

  /* Transition */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s ease;
}

/* ===============================
   2. Base
   =============================== */
body {
  font-family: var(--font-base);
  font-size: 15px;
  color: var(--color-text);
  background-color: var(--color-bg);
  font-feature-settings: "palt";
}

@media (min-width: 768px) {
  body {
    font-size: 16px;
  }
}

/* ===============================
   2.5. Tablet 範囲（768-1080px）の比率縮小
   PC設計（1080px基準）を viewport幅にフィットさせる
   - 1080px時に 1.0倍 / 768px時に 約0.71倍
   - Firefox 126+ / Chrome / Safari / Edge 対応
   - transform:scaleと違い sticky / hover を壊さない
   - calc は 1080px(長さ) で割ることで無次元数 (zoom が要求する型) になる
   =============================== */
@media (min-width: 768px) and (max-width: 1080px) {
  body {
    zoom: calc(100vw / 1080px);
  }
}


/* ===============================
   3. Section Background (shared)
   画像背景セクション共通の仕組み
   =============================== */
.section-has-bg {
  position: relative;
  isolation: isolate; /* z-indexの影響範囲を限定 */
  overflow: hidden;
}

.section-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  display: flex;
  justify-content: center;
}

.section-bg__image {
  width: 100%;
  max-width: 1440px;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* セクション別の bg：1440px超の viewport で画像両側に広がる背景。
   画像両端の色に合わせた gradient（または単色）でマッチさせる */
.kv           { background: linear-gradient(to right,  #FFE38A, #F7F8F8); }
.about        { background: linear-gradient(to bottom, #FFFFFF, #EBF6FF); }
.for-whom     { background: linear-gradient(to right,  #FFD354, #FF9D43); }
.how-it-works { background: #FFFFFF; }
.cta          { background: linear-gradient(to right,  #F7F8F8, #FFE38A); }

/* Utilities */
/* SP のみ表示する br（PC では非表示で改行を抑制） */
.br-sp {
  display: inline;
}
@media (min-width: 768px) {
  .br-sp {
    display: none;
  }
}


/* ===============================
   4. Campaign Bar (sticky)
   =============================== */
.campaign-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-accent);
  color: var(--color-white);
  padding: 8px 0;
  text-align: center;
}

.campaign-bar__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: var(--fw-bold);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-default);
}

.campaign-bar__line {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.campaign-bar__logo {
  width: 80px;
  height: auto;
  display: inline-block;
  vertical-align: middle;
}

@media (min-width: 768px) {
  .campaign-bar {
    padding: 8px 16px;
  }
  .campaign-bar__text {
    flex-direction: row;
    font-size: var(--fs-body-sm);
    gap: 8px;
  }
  .campaign-bar__line {
    gap: 8px;
  }
  .campaign-bar__logo {
    width: 80px;
  }
}


/* ===============================
   5. Header
   =============================== */
.header {
  background-color: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 48px;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0 16px;
  min-height: 54px;
}

.header__logo img {
  width: auto;
  height: 40px;
}

.header__login-btn {
  display: inline-flex;
  align-items: center;
  gap: 4.5px;
  padding: 7.5px 18px;
  background-color: #0583D6;
  border: 1.5px solid var(--color-white);
  color: var(--color-white);
  font-size: 12px;
  font-weight: var(--fw-bold);
  line-height: 1.5;
  letter-spacing: var(--ls-default);
  border-radius: 24px;
  white-space: nowrap;
  transition: background-color var(--transition-base);
}

.header__login-btn:hover {
  background-color: #0577C2;
}

.header__login-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .header__inner {
    padding: 16px 0;
    gap: 0;
    justify-content: space-between;
  }
  .header__logo img {
    width: 130px;
    height: auto;
  }
  .header__login-btn {
    padding: 10px 24px;
    gap: 6px;
    border: 2px solid var(--color-white);
    border-radius: 32px;
  }
  .header__login-icon {
    width: 20px;
    height: 20px;
  }
}


/* ===============================
   6. Buttons (shared)
   =============================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 24px 8px 32px;
  font-size: var(--fs-cta-btn);
  font-weight: 700;
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-default);
  border-radius: var(--radius-pill);
  transition: transform var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base);
  will-change: transform;
}

.btn__arrow {
  width: 16px;
  height: 16px;
  transition: transform var(--transition-base);
}

.btn:hover .btn__arrow {
  transform: translateX(3px);
}

/* Primary button (Figma blue) */
.btn--primary {
  position: relative;
  background: #0583D6;
  color: var(--color-white);
  border: 2px solid rgba(255, 255, 255, 0.90);
  border-radius: 32px;
  box-shadow: var(--shadow-md);
  min-width: 240px;
}

/* glow expand: ボタン外側に青い光がゆっくり広がってフェードアウト
   ::before に inset: 0 の "ボタン形状の box" を作り、その box-shadow を
   ease-out + alpha fade でアニメーション。100% で完全透明 → ループ復帰時のジャンプが目立たない */
.btn--primary::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: -1;
  animation: btn-primary-glow 2.2s ease-out infinite;
}

@keyframes btn-primary-glow {
  0% {
    box-shadow: 0 0 6px 0 rgba(5, 131, 214, 0.6);
  }
  100% {
    box-shadow: 0 0 28px 18px rgba(5, 131, 214, 0);
  }
}

.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  background: #0577C2;
}

.btn--primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm);
}

/* SP/PC共通：視覚バランス優先で 32×32（Figma SPは 6×12 だが SVG 描画サイズが小さくなりすぎるため SP も PC と同サイズに） */
.btn--primary .btn__arrow {
  width: 24px;
  height: 24px;
}



/* ===============================
   7. Campaign Badge
   =============================== */

/* badge を目立たせるための pulse アニメーション
   （prefers-reduced-motion: reduce 時は reset.css で自動的に停止） */
@keyframes campaign-badge-pulse {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-4px) scale(1.04);
  }
}

.campaign-badge {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background-color: var(--color-white);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: var(--ls-default);
  max-width: 100%;
  animation: campaign-badge-pulse 2.2s ease-in-out infinite;
  transform-origin: center center;
  will-change: transform;
}

.campaign-badge::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 97%;
  transform: translateX(-50%);
  width: 14px;
  height: 11px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 18"><path d="M11 16 L1 2 L21 2 Z" fill="white" stroke="white" stroke-width="4" stroke-linejoin="round"/></svg>') center / contain no-repeat;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.05));
  pointer-events: none;
}

/* SP では2行構成のため divider 非表示 */
.campaign-badge__divider {
  display: none;
  width: 1px;
  height: 22px;
  background-color: var(--color-accent);
  flex-shrink: 0;
}

.campaign-badge__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-accent);
  padding: 0;
  border-radius: 8px;
  font-size: 16px;
  white-space: nowrap;
}

.campaign-badge__logo {
  width: 100px;
  height: auto;
  display: inline-block;
}

.campaign-badge__date {
  color: var(--color-accent);
  white-space: nowrap;
}

.campaign-badge__price {
  color: var(--color-accent);
  font-size: 24px;
  font-weight: 700;
  white-space: nowrap;
  margin-left: -6px;
}

/* 2行目（date + price）を横並びでまとめる */
.campaign-badge__row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

@media (min-width: 768px) {
  .campaign-badge {
    flex-direction: row;
    flex-wrap: nowrap;
    white-space: nowrap;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    font-size: var(--fs-body);
  }
  .campaign-badge__divider {
    display: inline-block;
  }
  .campaign-badge__tag {
    font-size: var(--fs-body);
    gap: 6px;
    padding: 0;
  }
  .campaign-badge__logo {
    width: 100px;
  }
  .campaign-badge__price {
    font-size: var(--fs-emphasis);
  }
}


/* ===============================
   8. KV (Key Visual)
   =============================== */
.kv {
  padding: 40px 0 48px;
}

.kv__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-sp);
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: center;
  text-align: center;
}

.kv__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.kv__heading {
  font-size: 22.5px;
  font-weight: var(--fw-bold);
  line-height: 1.68;
  letter-spacing: var(--ls-default);
}

/* Figma正：斜めグラデ（左上イエロー→右下オレンジレッド）
   first stop -71.61% で黄色を可視範囲外まで延長、視覚的に滑らかな全体遷移を実現 */
.kv__heading-line {
  display: block;
  background: linear-gradient(230deg, #F2B705 -71.61%, #F24405 77.4%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* KV H1 内の助詞「の/を/する」を親に対して縮小（Figma比 30/40 = 0.75） */
.kv__heading-particle {
  font-size: 0.75em;
}

/* KV H1 内のハイライト（マーカー風アンダーライン）
   Figma正：rgba(242,202,5,0.5) の半透明帯を文字下部にオーバーレイ
   inline 維持。position+::after を使うと親の background-clip:text の伝播が
   切れる場合があるため、マーカー自体にも同じグラデを適用してテキストを直接描画 */
.kv__heading-marker {
  position: relative;
  background-image: linear-gradient(230deg, #F2B705 -71.61%, #F24405 77.4%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.kv__heading-marker::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.05em;
  height: 0.225em;
  background-color: rgba(242, 202, 5, 0.5);
  pointer-events: none;
}

/* KVロゴ（ふりがな付き 4.8:1） */
.kv__logo img {
  width: auto;
  max-width: 248px;
  margin: 8px auto 16px;
}

.kv__note {
  font-size: 12px;
  color: var(--color-text);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-default);
  margin-top: -10px;
}

.kv__visual {
  width: 100%;
  max-width: 616px;
  margin-top: 8px;
}

.kv__mockup {
  width: 100%;
  height: auto;
}

@media (min-width: 768px) {
  .kv {
    padding: 60px 0 64px;
  }
  .kv__inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
    padding-inline: 0;
  }
  .kv__content {
    flex: 1;
  }
  .kv__heading {
    font-size: var(--fs-h1-main);
    line-height: 1.7;
    text-align: center;
  }
  .kv__logo img {
    max-width: 330px;
    margin: 20px 0;
  }
  .kv__note {
    font-size: var(--fs-note);
    line-height: var(--lh-relaxed);
    letter-spacing: var(--ls-default);
  }
  .kv__visual {
    flex: 0 0 616px;
    max-width: 616px;
    margin-top: 0;
  }
}


/* ===============================
   9. About Section
   =============================== */
.about {
  padding: 40px 0;
}

.about__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-sp);
  display: flex;
  flex-direction: column-reverse; /* SP: テキスト上、イラスト下 */
  align-items: center;
  gap: 27px;
  text-align: center;
}

.about__illust {
  width: 100%;
  max-width: 324px;
}

.about__illust-image {
  width: 100%;
  height: auto;
}

.about__lead {
  font-size: 15px;
  font-weight: var(--fw-bold);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-default);
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.about__lead-line {
  display: block;
}

.about__lead-line--logo {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 6px;
}

/* Aboutロゴ（ふりがな付き 3.94:1） */
.about__lead-logo {
  width: auto;
  max-width: 248px;
  height: auto;
  display: inline-block;
  vertical-align: middle;
}

.about__lead-suffix {
  font-weight: 700;
  font-size: 12px;
  line-height: 2;
}

@media (min-width: 768px) {
  .about {
    padding: 40px 0 60px;
  }
  .about__inner {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 48px;
    text-align: left;
    padding-inline: 0;
  }
  .about__illust {
    max-width: 432px;
    align-self: flex-end;
    margin-bottom: -60px; /* セクション下padding(60px)を相殺し、下端に張り付かせる */
  }
  .about__body {
    max-width: 566px; /* Figma正：テキストブロック設計幅 */
  }
  .about__lead {
    font-size: var(--fs-body-lg);
    line-height: var(--lh-relaxed);
    letter-spacing: var(--ls-default);
    align-items: flex-start;
  }
  .about__lead-logo {
    max-width: 330px;
  }
  .about__lead-suffix {
    font-size: var(--fs-body);
  }
}


/* ===============================
   10. Section Heading (shared)
   =============================== */
.section-heading {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  background-color: var(--color-white);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-pill);
  color: var(--color-primary);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}

.section-heading__icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  color: var(--color-primary);
}

@media (min-width: 768px) {
  .section-heading {
    padding: 16px 32px;
    font-size: var(--fs-h2);
    line-height: 1.2;
    letter-spacing: var(--ls-default);
  }
  .section-heading__icon {
    width: 28px;
    height: 28px;
  }
}


/* ===============================
   11. For Whom Section
   =============================== */
.for-whom {
  padding: 48px 0;
}

.for-whom__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 0;
}

/* 半透明白コンテナ：見出しバナー＋アイテム群を包む */
.for-whom__panel {
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* バナー型見出し（フル幅オレンジ） */
.for-whom__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background-color: var(--color-heading); /* Figma正：DG-オレンジ（以降の見出し共通） */
  color: var(--color-white);
  padding: 8px 24px;
  border-radius: 8px;
  font-size: 20px;
  font-weight: var(--fw-bold);
  line-height: 1.8;
  letter-spacing: var(--ls-default);
  text-align: center;
}

.for-whom__heading-icon {
  display: inline-flex;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.for-whom__heading-icon img {
  width: 100%;
  height: 100%;
  display: block;
  filter: brightness(0) invert(1); /* check_circle.svgが黒色固定のため白に反転 */
}

.for-whom__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.for-whom__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background-color: var(--color-white);
  border-radius: 8px;
  text-align: left;
}

.for-whom__icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 50%; /* 円形背景（書き出しSVGには含まれていないためCSSで再現） */
  padding: 10px; /* 40 - 18*2/... アイコン本体のサイズ調整。SVG白アイコンが中心60%程度に収まる */
}

.for-whom__icon img {
  width: 100%;
  height: 100%;
  display: block;
}

/* SP base：交互配色（1,3=オレンジ / 2,4=青）アイコン円形背景 */
.for-whom__item:nth-child(odd) .for-whom__icon {
  background-color: var(--color-heading);
}

.for-whom__item:nth-child(even) .for-whom__icon {
  background-color: #1C95E4;
}

.for-whom__text {
  font-size: 15px;
  font-weight: var(--fw-bold);
  line-height: 1.5;
  letter-spacing: var(--ls-default);
}

/* SP base：交互配色（1,3=オレンジ / 2,4=青）テキスト色 */
.for-whom__item:nth-child(odd) .for-whom__text {
  color: var(--color-heading);
}

.for-whom__item:nth-child(even) .for-whom__text {
  color: #005A95;
}

@media (min-width: 768px) {
  .for-whom {
    padding: 60px 0;
  }
  .for-whom__panel {
    padding: 24px;
    gap: 24px;
  }
  .for-whom__heading {
    font-size: var(--fs-h2);
    gap: 10px;
  }
  .for-whom__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .for-whom__item {
    padding: 24px;
    height: 92px;
  }
  .for-whom__icon {
    width: 52px;
    height: 52px;
    padding: 14px; /* 52 - 24 = 28pxアイコン本体 */
  }
  .for-whom__text {
    font-size: var(--fs-body-lg);
    line-height: var(--lh-normal);
  }
  /* PC: 1,4=オレンジ / 2,3=青（SPと3,4が入れ替わる） */
  .for-whom__item:nth-child(3) .for-whom__icon {
    background-color: #1C95E4;
  }
  .for-whom__item:nth-child(4) .for-whom__icon {
    background-color: var(--color-heading);
  }
  .for-whom__item:nth-child(3) .for-whom__text {
    color: #005A95;
  }
  .for-whom__item:nth-child(4) .for-whom__text {
    color: var(--color-heading);
  }
}


/* ===============================
   12. How It Works Section
   =============================== */
.how-it-works {
  padding: 48px 0;
}

.how-it-works__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 0;
}

/* 大枠白パネル（4px白枠 + radius 16 + gap 16） */
.how-it-works__panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  border: 4px solid var(--color-white);
  border-radius: 16px;
}

/* バナー型見出し（For Whom と同型） */
.how-it-works__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background-color: var(--color-heading);
  color: var(--color-white);
  padding: 8px 24px;
  border-radius: 8px;
  font-size: 20px;
  font-weight: var(--fw-bold);
  line-height: 1.8;
  letter-spacing: var(--ls-default);
  text-align: left;
}

.how-it-works__heading-icon {
  display: inline-flex;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

.how-it-works__heading-icon img {
  width: 100%;
  height: 100%;
  display: block;
  filter: brightness(0) invert(1); /* 黒→白に反転 */
}

/* リード文ボックス（半透明白） */
.how-it-works__lead-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 12px 0;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: 6px;
  text-align: center;
}

.how-it-works__lead {
  font-size: 16px;
  font-weight: var(--fw-bold);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-default);
  color: var(--color-text);
  margin: 0;
}

.how-it-works__lead-logo {
  width: 130px;
  height: auto;
  display: inline-block;
  vertical-align: -1px;
  margin: 0 3px;
}

/* Requirements: 半透明黄色コンテナ */
.how-it-works__requirements {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 16px;
  background-color: rgba(255, 243, 207, 0.5);
  border-radius: 8px;
}

/* 「用意するもの」行（バッジ＋アイテム2つ） */
.how-it-works__req-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

/* 「用意するもの」バッジ */
.how-it-works__req-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: var(--color-heading);
  color: var(--color-white);
  padding: 8px 16px;
  border-radius: 16px;
  font-size: 16px;
  font-weight: var(--fw-bold);
  line-height: 1.5;
  letter-spacing: var(--ls-default);
  align-self: center;
  white-space: nowrap;
}

.how-it-works__req-badge-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.how-it-works__req-badge-icon svg {
  width: 100%;
  height: 100%;
  color: currentColor;
}

/* アイテム2つ */
.how-it-works__req-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.how-it-works__req-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: var(--fw-bold);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-default);
  color: var(--color-text);
}

.how-it-works__req-item-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.how-it-works__req-item-icon img {
  width: 100%;
  height: 100%;
  display: block;
}

/* 「目安」白サブパネル */
.how-it-works__req-detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background-color: var(--color-white);
  border-radius: 8px;
}

.how-it-works__req-detail-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: var(--fw-bold);
  color: var(--color-heading);
  letter-spacing: var(--ls-default);
  align-self: center;
}

.how-it-works__req-detail-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.how-it-works__req-detail-icon svg {
  width: 100%;
  height: 100%;
  color: currentColor;
}

.how-it-works__req-list {
  list-style: disc;
  padding-left: 20px;
  margin: 0;
  font-size: 14px;
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-default);
  color: var(--color-text);
}

.how-it-works__req-list li {
  margin: 0;
}

/* ===== Flow ===== */
.how-it-works__flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* ステップカード（1, 3） — 白背景＋オレンジ枠 */
.how-it-works__step {
  width: 100%;
  background-color: var(--color-white);
  border: 2px solid var(--color-heading);
  border-radius: 8px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.how-it-works__step--upload {
  padding: 24px 16px;
  gap: 8px;
}

.how-it-works__step--graph {
  padding: 24px 16px;
  gap: 8px;
}

.how-it-works__step-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-default);
  color: var(--color-text);
  margin: 0;
}

.how-it-works__step-check {
  display: inline-flex;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.how-it-works__step-check img {
  width: 100%;
  height: 100%;
  display: block;
}

.how-it-works__step-desc {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-default);
  color: var(--color-text);
  margin: 0;
}

.how-it-works__step-image {
  margin-top: 4px;
}

.how-it-works__step-image img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* SP: Step 1 のアップロード画像背景をブロック全幅に拡張（SVG内の#FFF9E6と同色） */
.how-it-works__step--upload .how-it-works__step-image {
  width: 100%;
  background-color: #FFF9E6;
  border-radius: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 真ん中：AI分析エリア（SP: 縦構造／PC: 横構造） */
.how-it-works__middle {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 16px 0;
  min-height: 252px;
  isolation: isolate;
}

/* 背景に置く円形あしらい */
.how-it-works__middle-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 215px;
  height: 215px;
  z-index: -1;
  pointer-events: none;
}

.how-it-works__middle-bg img,
.how-it-works__circle-img {
  width: 100%;
  height: 100%;
  display: block;
}

/* SP: middle-flow は静的（矢印を middle 基準で貫通させるため） */
.how-it-works__middle-flow {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: auto;
  height: auto;
}

/* SP: 矢印は middle 全体を縦に貫通する背景線（円形の下に重なる） */
.how-it-works__middle-arrow {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 15px;
  height: 100%;
  z-index: -2;
  display: block;
}

.how-it-works__middle-text {
  position: relative;
  z-index: 1;
  width: 166px;
  margin: 0;
  text-align: center;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-default);
  color: var(--color-text);
}

.how-it-works__ai-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 8px 16px;
  margin-left: 0;
  background-color: var(--color-heading);
  color: var(--color-white);
  border-radius: 16px;
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-default);
  white-space: nowrap;
}

.how-it-works__ai-badge-icon {
  display: inline-flex;
  width: 28px;
  height: 24px;
  flex-shrink: 0;
}

.how-it-works__ai-badge-icon img {
  width: 100%;
  height: 100%;
  display: block;
}

@media (min-width: 768px) {
  .how-it-works {
    padding: 60px 0;
  }
  .how-it-works__panel {
    padding: 24px;
  }

  /* 見出し */
  .how-it-works__heading {
    font-size: var(--fs-h2);
    gap: 10px;
  }

  /* リード文ボックス */
  .how-it-works__lead-box {
    padding: 16px;
    gap: 4px;
    border-radius: 8px;
  }
  .how-it-works__lead {
    font-size: var(--fs-body-lg);
  }
  .how-it-works__lead-logo {
    width: 166px;
    vertical-align: -1px;
  }

  /* Requirements 黄色コンテナ */
  .how-it-works__requirements {
    padding: 24px;
  }
  .how-it-works__req-row {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 48px;
  }
  .how-it-works__req-badge {
    height: 40px;
  }
  .how-it-works__req-items {
    flex-direction: row;
    gap: 24px;
  }

  /* 目安サブパネル */
  .how-it-works__req-detail {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 32px;
    padding: 16px 32px;
  }
  .how-it-works__req-detail-label {
    flex-shrink: 0;
  }

  /* Flow */
  .how-it-works__flow {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
  }
  .how-it-works__step {
    width: auto;
    flex: 0 0 auto;
  }
  .how-it-works__step--upload {
    width: 235px;
    padding: 24px 8px;
  }
  .how-it-works__step--graph {
    padding: 24px;
  }
  /* PC: アップロード画像はSVG内の背景のみ表示（ブロック全幅の背景は不要） */
  .how-it-works__step--upload .how-it-works__step-image {
    width: auto;
    background-color: transparent;
    border-radius: 0;
    display: block;
  }

  /* 真ん中エリア（PC: 横構造） */
  .how-it-works__middle {
    padding: 8px 0 40px;
    gap: 4px;
    min-height: 0;
  }
  .how-it-works__middle-bg {
    width: 231px;
    height: 231px;
  }
  .how-it-works__middle-flow {
    position: relative;
    flex-direction: row;
    align-items: center;
    gap: 0;
    width: 239px;
    height: 40px;
  }
  .how-it-works__middle-arrow {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: auto;
    transform: translateY(-50%);
    z-index: 0;
  }
  .how-it-works__ai-badge {
    margin-left: 24px;
  }
}


/* ===============================
   13. CTA Section (bottom)
   =============================== */
.cta {
  padding: 40px 0;
}

.cta__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 12.5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

/* 見出し：オレンジバナー + 黄色ドロップシャドウ */
.cta__heading {
  display: block;
  width: 100%;
  padding: 8px 24px;
  background-color: var(--color-heading);
  color: var(--color-white);
  font-size: 20px;
  font-weight: var(--fw-bold);
  line-height: 1.8;
  border-radius: 8px;
  filter: drop-shadow(6px 6px 0 #F2CA05);
}

/* 白半透明カード：badge + button + note を包む */
.cta__card {
  width: 100%;
  max-width: 708px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 24px 0;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 16px;
  filter: drop-shadow(0 0 10px rgba(255, 219, 110, 0.2));
}

/* CTA バッジ：オレンジグロー */
.campaign-badge--cta {
  filter: drop-shadow(0 0 12px rgba(238, 80, 0, 0.15));
}

.cta__note {
  font-size: 12px;
  color: #333;
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-default);
  margin-top: 0;
}

.cta__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 14px;
  color: #0583D6;
  font-weight: 700;
  border-bottom: 1px solid #0583D6;
  padding-bottom: 1px;
  transition: opacity var(--transition-base);
}

.cta__link:hover {
  opacity: 0.7;
}

.cta__link-arrow {
  width: 4px;
  height: 8px;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .cta {
    padding: 60px 0;
  }
  .cta__inner {
    gap: 32px;
    padding-inline: 0;
  }
  .cta__heading {
    font-size: var(--fs-h2);
    line-height: 1.5;
    letter-spacing: var(--ls-default);
    padding: 8px 24px;
    width: 708px;
  }
  .cta__card {
    gap: 24px;
    padding: 36px 48px;
  }
  .cta__note {
    font-size: 13px;
    line-height: var(--lh-relaxed);
    letter-spacing: var(--ls-default);
  }
  .cta__link {
    font-size: var(--fs-body);
    letter-spacing: var(--ls-default);
  }
}


/* ===============================
   14. Footer
   =============================== */
.footer {
  background-color: var(--color-white);
  padding: 32px 0;
  border-bottom: 4px solid #F3270F;
}

.footer__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  text-align: center;
}

.footer__logos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.footer__logo img {
  width: auto;
  display: block;
}

/* Synergy Marketing ロゴ（縦長め 2.69:1） */
.footer__logo--marketing img {
  height: 40px;
}

/* DAYS GRAPHY ロゴ（横長 9.2:1） — 高さを抑えて視覚バランス */
.footer__logo--days img {
  height: 24px;
}

/* 下段ブロック：運営会社行 + コピーライト */
.footer__info {
  display: flex;
  flex-direction: column;
  align-items: end;
  gap: 16px;
}

.footer__company-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  line-height: 1.43;
  letter-spacing: -0.01em;
}

.footer__company-label {
  color: #4A5565;
  text-decoration: none;
}

.footer__company-label:hover {
  text-decoration: underline;
}

.footer__company-divider {
  color: #99A1AF;
}

.footer__company-name {
  color: #333;
  text-decoration: none;
}

.footer__company-name:hover {
  text-decoration: underline;
}

.footer__copyright {
  font-size: 12px;
  color: #6A7282;
  letter-spacing: 0.02em;
  line-height: 1.75;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .footer {
    padding: 40px 0;
  }
  .footer__inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
  /* PC はロゴ横並び復元 */
  .footer__logos {
    flex-direction: row;
    gap: 20px;
  }
  .footer__logo--marketing img {
    height: 44px;
  }
  .footer__logo--days img {
    height: 20px;
  }
  .footer__copyright {
    margin: 0;
  }
}