@charset "UTF-8";

/* =========================================================
   共通スタイル（全セクション共通）
   - ブレークポイント（Hero 以外の全セクション共通）:
       SP      : 〜599px
       Tablet  : 600px 〜 1024px
       PC      : 1025px 〜
   - Hero のみ Design v3 に合わせた独自ブレークポイントを使用:
       SP      : 〜779px
       Tablet  : 780px 〜 1024px
       PC      : 1025px 〜
     （詳細は「Hero セクション」ブロックのコメントを参照）
   ========================================================= */

/* ---- デザイントークン ---- */
:root {
  /* Colors */
  --color-red: #cc0022;      /* SOMPO / Eternal Red */
  --color-text: #333333;
  --color-white: #ffffff;
  --color-gray-50: #F9FAFB;
  --color-gray-100: #f3f4f6; /* 背景 */
  --color-gray-300: #d1d5db; /* 番号などの淡いグレー */

  /* Font */
  --font-plain: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
    "メイリオ", Meiryo, Arial, sans-serif;
  --fw-light: 300;   /* W3 */
  --fw-bold: 600;    /* W6 */

  /* Radius */
  --radius-card: 8px;  /* カード・画像などの角丸 */
  --radius-full: 9999px; /* ピル型（バッジ・丸ボタン等） */

  /* Shadow（Figma: /shadow/md・/shadow/lg） */
  --shadow-md:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* ---- リセット ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-plain);
  color: var(--color-text);
  background: var(--color-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

/* =========================================================
   共通パーツ: ボタン
   ========================================================= */
.c-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 56px;
  /* 右のアイコン分を左の余白で相殺し、文字を光学的に中央へ寄せる */
  padding: 16px 24px 16px 40px;
  background: var(--color-red);
  color: var(--color-white);
  border: none;
  border-radius: var(--radius-full);
  font-family: var(--font-plain);
  /* Figma: Title/Small 18px / 24px */
  font-size: 18px;
  font-weight: var(--fw-bold);
  line-height: 24px;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: transform 0.2s ease;
}

.c-button:visited {
  color: var(--color-white);
  text-decoration: none;
}

.c-button:hover {
  color: var(--color-white);
  text-decoration: none;
}

.c-button__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

/* ホバー可能なデバイスのみ適用（タップ後に浮いたまま固定されるのを防ぐ）
   ── ボタン全体を 10px 浮かせ、矢印をテキスト側へ寄せる */
@media (hover: hover) {
  .c-button:hover {
    transform: translateY(-5px);
  }

  .c-button:hover .c-button__icon {
    transform: translateX(-4px);
  }
}

/* =========================================================
   Hero セクション
   ── Hero のみ他セクションと別系統のブレークポイントを使用
        SP     : 〜779px      （1カラム／テキスト → 画像）
        Tablet : 780px 〜 1024px（2カラム／テキスト50% + 画像）
        PC     : 1025px 〜    （2カラム／990px センタリング）
   ── 見出し・リードは clamp() + vw で流体スケール
   ========================================================= */
.hero {
  display: flex;
  justify-content: center;
  background: var(--color-gray-50);
  width: 100vw;
  margin: 0 calc(50% - 50vw) !important;
}

/* SP: テキストブロックの下に画像を縦積み */
.hero__inner {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.hero__content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 40px 16px;
}

.hero__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.hero__title {
  margin: 0;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1px;
  line-height: 1.2;
  /* 2行目「圧倒的に選ばれるサービスへ」(13文字) が折り返さない上限から逆算。
     SP のテキスト幅 = 100vw - 32px（左右padding 16px）なので
     1文字あたり (100vw - 32px) / 13 ≒ 7.69vw - 2.46px。安全側に 7.4vw - 2px。
     上限 34px は Figma PC 値に合わせる。 */
  font-size: clamp(20px, calc(7.4vw - 2px), 34px);
}

.hero__title .is-accent {
  color: var(--color-red);
}

.hero__lead {
  margin: 0;
  font-weight: var(--fw-light);
  /* 430px で 16px（= 3.72vw） */
  font-size: clamp(15px, 3.72vw, 18px);
  line-height: 1.5;
}

.hero__cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

/* SP はボタンを全幅に */
.hero__cta .c-button {
  width: 100%;
}

.hero__note {
  margin: 0;
  font-weight: var(--fw-light);
  font-size: 14px;
  line-height: 21px;
  color: var(--color-text);
}

.hero__media {
  width: 100%;
  overflow: hidden;
}

.hero__media picture {
  display: block;
  width: 100%;
}

.hero__media img {
  display: block;
  width: 100%;
  height: auto;
  /* SP は hero-sp.jpg（1098x648）の比率 */
  aspect-ratio: 1098 / 648;
  object-fit: cover;
}

/* ---------------------------------------------------------
   Hero / Tablet (780px 〜 1024px)
   Figma: 600 x 283 / テキスト 300px(50%) + 画像 372x283
   --------------------------------------------------------- */
@media (min-width: 780px) {
  .hero__inner {
    flex-direction: row;
    align-items: center;
    overflow: hidden;
  }

  .hero__content {
    flex: 0 0 50%;
    max-width: 50%;
    justify-content: center;
    gap: 8px;
    padding: 16px 0 16px 16px;
  }

  .hero__text {
    gap: 16px;
  }

  /* Tablet のテキスト幅 = 50vw - 16px。13文字が収まる上限から
     1文字あたり (50vw - 16px) / 13 ≒ 3.85vw - 1.23px。安全側に 3.7vw - 1px。 */
  .hero__title {
    font-size: clamp(20px, calc(3.7vw - 1px), 34px);
  }

  .hero__lead {
    font-size: 14px;
  }

  .hero__cta {
    align-items: flex-start;
  }

  .hero__cta .c-button {
    width: auto;
  }

  .hero__media {
    flex: 1 1 auto;
    min-width: 0;
    height: 283px;
  }

  .hero__media img {
    height: 100%;
    aspect-ratio: auto;
    object-position: left center;
  }
}

/* ---------------------------------------------------------
   Hero / PC (1025px 〜)
   Figma: テキスト 495px + 画像 495x377 を 990px で中央配置
   --------------------------------------------------------- */
@media (min-width: 1025px) {
  .hero__inner {
    width: 990px;
    max-width: 100%;
  }

  .hero__content {
    flex: 0 0 495px;
    max-width: 495px;
    gap: 24px;
    padding: 40px 0 40px 21px;
  }

  .hero__text {
    gap: 24px;
  }

  /* PC はテキスト幅が 495px 固定（.hero__inner が 990px 固定）のため、
     vw で伸ばすと逆に折り返しリスクが出る。Figma 値の 34px を固定で適用する。 */
  .hero__title {
    font-size: 34px;
  }

  .hero__lead {
    font-size: 16px;
  }

  .hero__media {
    flex: 0 0 495px;
    width: 495px;
    height: 377px;
  }
}

/* =========================================================
   共通パーツ: ボタン（白背景・赤文字バリエーション）
   ========================================================= */
.c-button--onred,
.c-button--onred:visited {
  background: var(--color-white);
  color: var(--color-red);
}

.c-button--onred:hover {
  color: var(--color-red);
  text-decoration: none;
}

/* =========================================================
   Issues セクション
   ========================================================= */
.issues {
  background: var(--color-white);
}

.issues__inner {
  max-width: 990px;
  margin: 0 auto;
  padding: 40px 16px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* 見出しブロック */
.issues__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.issues__headline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.issues__title {
  margin: 0;
  font-weight: var(--fw-bold);
  font-size: 30px;
  line-height: 37.5px;
  letter-spacing: 0.1px;
  color: var(--color-text);
}

.issues__title .is-accent {
  color: var(--color-red);
}

.issues__lead {
  margin: 0;
  font-weight: var(--fw-light);
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text);
}

/* カード群（SP/Tablet：1カラム） */
/* カード/ステップのリスト（ul/ol）は既定のマーカー・字下げを解除 */
.issues__cards,
.value__cards,
.why__cards,
.usecase__cards,
.process__steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.issues__cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.issues-card {
  display: flex;
  align-items: stretch;
  gap: 16px;
  padding: 12px;
  border-radius: var(--radius-card);
  background: var(--color-gray-100);
  overflow: hidden;
}

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

.issues-card__title {
  margin: 0;
  font-weight: var(--fw-bold);
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text);
}

.issues-card__desc {
  margin: 0;
  font-weight: var(--fw-light);
  font-size: 14px;
  line-height: 21px;
  color: var(--color-text);
}

.issues-card__num {
  align-self: flex-end;
  flex-shrink: 0;
  font-family: var(--font-plain);
  font-weight: 700;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -1.2px;
  color: var(--color-gray-300);
}

/* ---------------------------------------------------------
   Challenge PC (1025px 〜)
   カード2カラム / 余白拡大 / CTA左右パディング拡大
   --------------------------------------------------------- */
@media (min-width: 1025px) {
  .issues__inner {
    padding: 48px 21px;
  }

  .issues__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));  }


  .issues-card__num {
    font-size: 44px;
  }
}

@media (max-width: 600px) {
}

/* =========================================================
   共通パーツ: バッジ（赤ピル）
   ========================================================= */
.c-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  background: var(--color-red);
  color: var(--color-white);
  font-size: 12px;
  font-weight: var(--fw-bold);
  line-height: 18px;
}

/* =========================================================
   共通パーツ: CTA赤帯バナー
   ── Issues 下部（.issues__cta）とページ下部（.cta__contact）で
      レスポンシブ含め同一仕様。増やす場合はセレクタを追加する。
   ========================================================= */
.issues__cta,
.cta__contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 24px 16px;
  border-radius: 16px;
  background: var(--color-red);
  text-align: center;
}

.issues__cta-title,
.cta__contact-title {
  margin: 0;
  font-weight: var(--fw-bold);
  font-size: 24px;
  line-height: 28.8px;
  color: var(--color-white);
}

@media (max-width: 600px) {
  .issues__cta-title,
  .cta__contact-title {
    font-size: 20px;
  }

  /* 見出しの改行は SP では解除して自然折り返しにする */
  .issues__cta-br,
  .cta__contact-br {
    display: none;
  }

  /* SP はボタンを全幅に */
  .issues__cta .c-button,
  .cta__contact .c-button {
    width: 100%;
  }
}

@media (min-width: 1025px) {
  .issues__cta,
  .cta__contact {
    padding: 24px 80px;
  }
}

/* =========================================================
   Value セクション
   ========================================================= */
.value {
  background: var(--color-white);
}

.value__inner {
  max-width: 990px;
  margin: 0 auto;
  padding: 40px 16px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* 見出しブロック */
.value__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.value__headline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.value__title {
  margin: 0;
  font-weight: var(--fw-bold);
  font-size: 30px;
  line-height: 37.5px;
  letter-spacing: 0.1px;
  color: var(--color-text);
}

.value__title .is-accent {
  color: var(--color-red);
}

.value__lead {
  margin: 0;
  font-weight: var(--fw-light);
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text);
}

/* カード群（SP/Tablet：1カラム） */
.value__cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.value-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  border-radius: var(--radius-card);
  background: var(--color-white);
  box-shadow: var(--shadow-lg);
}

.value-card__img {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 6px;
  overflow: hidden;
}

.value-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.value-card__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.value-card__title {
  margin: 0;
  font-weight: var(--fw-bold);
  font-size: 18px;
  line-height: 24px;
  color: var(--color-text);
}

.value-card__desc {
  margin: 0;
  font-weight: var(--fw-light);
  font-size: 14px;
  line-height: 21px;
  color: var(--color-text);
}

/* ---------------------------------------------------------
   Value PC (1025px 〜) : カード2カラム / 余白拡大
   --------------------------------------------------------- */
@media (min-width: 1025px) {
  .value__inner {
    padding: 48px 21px;
  }

  .value__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));  }

  .value-card__img {
    width: 120px;
    height: 120px;
  }
}

/* =========================================================
   Why セクション
   ========================================================= */
.why {
  background: var(--color-white);
}

.why__inner {
  max-width: 990px;
  margin: 0 auto;
  padding: 40px 16px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* 見出しブロック */
.why__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.why__headline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.why__title {
  margin: 0;
  font-weight: var(--fw-bold);
  font-size: 30px;
  line-height: 37.5px;
  letter-spacing: 0.1px;
  color: var(--color-text);
}

.why__title .is-accent {
  color: var(--color-red);
}

.why__lead {
  margin: 0;
  font-weight: var(--fw-light);
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text);
}

/* カード群 */
.why__cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.why-card {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: 16px;
  border-radius: 24px;
  background: var(--color-white);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* アイコン＋番号（左） */
.why-card__aside {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.why-icon {
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.why-icon svg {
  width: 30px;
  height: 30px;
  display: block;
}

.why-icon--1 {
  background-image: linear-gradient(135deg, #2b7fff 0%, #00b8db 100%);
}

.why-icon--2 {
  background-image: linear-gradient(135deg, #ad46ff 0%, #f6339a 100%);
}

.why-icon--3 {
  background-image: linear-gradient(135deg, #ff6900 0%, #fb2c34 100%);
}

.why-card__num {
  font-family: var(--font-plain);
  font-weight: 600;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -1.2px;
  color: var(--color-gray-300);
}

/* テキスト（右） */
.why-card__body {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.why-card__title {
  margin: 0;
  font-weight: var(--fw-bold);
  font-size: 24px;
  line-height: 28.8px;
  color: var(--color-text);
}

.why-card__desc {
  margin: 0;
  font-weight: var(--fw-light);
  font-size: 14px;
  line-height: 21px;
  color: var(--color-text);
}

/* ---------------------------------------------------------
   Why PC (1025px 〜) : カード内の余白拡大
   --------------------------------------------------------- */
@media (min-width: 1025px) {
  .why__inner {
    padding: 48px 21px;
  }

  .why-card {
    padding: 24px;
    gap: 60px;
  }

  .why-icon {
    width: 80px;
    height: 80px;
  }

  .why-icon svg {
    width: 40px;
    height: 40px;
  }

  .why-card__num {
    font-weight: 700;
    font-size: 44px;
  }
}

/* =========================================================
   Use Case（事例）セクション
   ========================================================= */
.usecase {
  background: var(--color-white);
}

.usecase__inner {
  max-width: 990px;
  margin: 0 auto;
  padding: 40px 16px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* 見出しブロック */
.usecase__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.usecase__headline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.usecase__title {
  margin: 0;
  font-weight: var(--fw-bold);
  font-size: 30px;
  line-height: 37.5px;
  letter-spacing: 0.1px;
  color: var(--color-text);
}

.usecase__title .is-accent {
  color: var(--color-red);
}

.usecase__lead {
  margin: 0;
  font-weight: var(--fw-light);
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text); /* gray/500 */
}

/* カード群（SP：縦積み） */
.usecase__cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.usecase-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-card);
  overflow: hidden;
}

.usecase-card__media {
  width: 100%;
  height: 225px;
  background: var(--color-white);
  overflow: hidden;
}

.usecase-card__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.usecase-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.usecase-card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: var(--color-gray-100);
}

.usecase-card__title {
  margin: 0;
  font-weight: var(--fw-bold);
  font-size: 18px;
  line-height: 24px;
  color: var(--color-text);
}

.usecase-card__desc {
  margin: 0;
  font-weight: var(--fw-light);
  font-size: 14px;
  line-height: 21px;
  color: var(--color-text);
}

/* ---------------------------------------------------------
   Use Case Tablet (600px 〜 1024px) : 1カラム・カード横並び
   --------------------------------------------------------- */
@media (min-width: 600px) {
  .usecase-card {
    flex-direction: row;
    align-items: stretch;
  }

  .usecase-card__media {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: auto;
    min-height: 225px;
    align-self: stretch;
  }

  .usecase-card__body {
    flex: 1 1 0;
    min-width: 0;
  }
}

/* ---------------------------------------------------------
   Use Case PC (1025px 〜) : 3カラム・カード縦積み
   --------------------------------------------------------- */
@media (min-width: 1025px) {
  .usecase__inner {
    padding: 48px 21px;
  }

  .usecase__cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));  }

  .usecase-card {
    flex-direction: column;
  }

  .usecase-card__media {
    flex: 0 0 auto;
    width: 100%;
    height: 225px;
    min-height: 0;
    align-self: auto;
  }
}

/* =========================================================
   Process（導入の流れ）セクション
   ========================================================= */
.process {
  background: var(--color-white);
}

.process__inner {
  max-width: 990px;
  margin: 0 auto;
  padding: 40px 16px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* 見出しブロック */
.process__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.process__headline {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.process__title {
  margin: 0;
  font-weight: var(--fw-bold);
  font-size: 30px;
  line-height: 37.5px;
  letter-spacing: 0.1px;
  color: var(--color-text);
}

.process__title .is-accent {
  color: var(--color-red);
}

.process__lead {
  margin: 0;
  font-weight: var(--fw-light);
  font-size: 16px;
  line-height: 24px;
  color: var(--color-text);
}

/* タイムライン */
.process__steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.process-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

/* 番号を貫く縦線：各円の中心から次の円の中心までを結ぶ
   （最後のステップには引かないのではみ出さない） */
.process-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 29px;
  top: 30px;
  width: 2px;
  height: calc(100% + 24px); /* ステップの高さ＋縦gap = 次の円の中心まで */
  background: var(--color-red);
  z-index: 0;
}

/* 番号バッジ（外側の淡い赤リング＋赤い円） */
.process-step__badge {
  position: relative;
  z-index: 1; /* 縦線より前面に */
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: var(--radius-full);
  background: rgba(204, 0, 34, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.process-step__num {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--color-red);
  color: var(--color-white);
  font-family: var(--font-plain);
  font-weight: 700;
  font-size: 20px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.process-step__card {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  border-radius: var(--radius-card);
  background: var(--color-gray-100);
}

.process-step__title {
  margin: 0;
  font-weight: var(--fw-bold);
  font-size: 18px;
  line-height: 24px;
  color: var(--color-text);
}

.process-step__desc {
  margin: 0;
  font-weight: var(--fw-light);
  font-size: 14px;
  line-height: 21px;
  color: var(--color-text);
}

/* ---------------------------------------------------------
   Process PC (1025px 〜) : 余白・円とカードの間隔を拡大
   --------------------------------------------------------- */
@media (min-width: 1025px) {
  .process__inner {
    padding: 48px 21px;
  }

  .process-step {
    gap: 24px;
  }

  .process-step:not(:last-child)::after {
    left: 39px;
    top: 40px;  }

  .process-step__badge {
    width: 80px;
    height: 80px;
  }

  .process-step__num {
    width: 60px;
    height: 60px;    font-size: 24px;
  }
}

/* =========================================================
   More（その他ソリューション）バナー
   ========================================================= */
.more__banner {
  position: relative;
  height: 240px;
  overflow: hidden;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.more__banner:hover,
.more__banner:active,
.more__banner:visited {
  text-decoration: none;
  color: inherit;
}

/* バナー全体がリンク：ホバーで背景を少し明るく／キーボードフォーカスを可視化 */
.more__banner:hover .more__bg {
  opacity: 0.7;
}

.more__banner:focus-visible {
  outline: 2px solid var(--color-red);
  outline-offset: 2px;
}

.more__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1.0;
  pointer-events: none;
}

.more__text {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 0 16px;
  color: var(--color-white);
  font-weight: var(--fw-bold);
  font-size: 24px;
  line-height: 28.8px;
  text-align: center;
}

.more__btn {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  height: 56px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 16px 16px 24px;
  background: #755aa5;
  color: var(--color-white);
  font-size: 14px;
  font-weight: var(--fw-bold);
  line-height: 21px;
  transition: opacity 0.2s ease;
}

/* ボタンはバナー全体のホバーに連動（見た目のみ・実体は more__banner のリンク） */
.more__banner:hover .more__btn {
  opacity: 0.85;
}

.more__btn svg {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
}

/* ---------------------------------------------------------
   More PC (1025px 〜) : 余白拡大・テキスト1行
   --------------------------------------------------------- */
@media (min-width: 1025px) {
  .more__text {
    padding: 0 120px;
    white-space: nowrap;
  }
}

/* =========================================================
   CTA セクション（contact 赤バナー ＋ more バナー）
   ========================================================= */
.cta {
  background: var(--color-white);
}

.cta__inner {
  max-width: 990px;
  margin: 0 auto;
  padding: 40px 16px;
  display: flex;
  flex-direction: column;
  gap: 24px; /* contact と more の間隔（全ブレークポイント共通） */
}

/* 注記（Figma: 12px / W3） */
.cta__note {
  margin: 0;
  font-weight: var(--fw-light);
  font-size: 12px;
  line-height: 18px;
  color: var(--color-text);
}

/* ---------------------------------------------------------
   CTA PC (1025px 〜) : 余白・gap 調整
   --------------------------------------------------------- */
@media (min-width: 1025px) {
  .cta__inner {
    padding: 48px 21px 96px;  }

}