@charset "UTF-8";

:root {
  /* -------------------------------------------------
     レスポンシブ文字サイズ (1rem = 16px 基準)
     ------------------------------------------------- */
  /* 本文ベース: スマホ15px 〜 PC16px */
  --font-size-base: clamp(0.9375rem, 0.9rem + 0.16vw, 1rem);

  /* 見出し H1 (ヒーロー見出し): スマホ24px 〜 PC36px */
  --font-size-h1: clamp(1.5rem, 1.1rem + 1.7vw, 2.25rem);

  /* 見出し H2 (セクションタイトル): スマホ22px 〜 PC32px */
  --font-size-h2: clamp(1.375rem, 1.05rem + 1.4vw, 2rem);

  /* 見出し H3 (カードタイトル等): スマホ18px 〜 PC22px */
  --font-size-h3: clamp(1.125rem, 0.95rem + 0.7vw, 1.375rem);

  /* 補足・注釈用: スマホ12px 〜 PC14px */
  --font-size-sm: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
}

.lp-page {
  display: grid;
  grid-template-columns:
    [full-start] minmax(1rem, 1fr)
    [content-start] min(100% - 2rem, 1200px) [content-end]
    minmax(1rem, 1fr) [full-end];
  row-gap: 1.5rem;

  > * {
    grid-column: content;
  }

  > .full-width {
    grid-column: full;
    background: var(--bg-subtle);

    display: grid;
    grid-template-columns: subgrid;

    > * {
      grid-column: content;
    }
  }

  /* ページ全体の基準フォントサイズ */
  font-size: var(--font-size-base);
  line-height: 1.6;

  /* ==========================
   パンくずリスト
  ========================== */
  .lp-pankuzu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    padding: 0.5rem 1rem;
    background: var(--bg-subtle);
    font-size: var(--font-size-sm);

    li + li::before {
      content: ">";
      margin: 0 0.5rem;
    }

    li[aria-current="page"] {
      color: var(--text-secondary);
    }
  }

  /* ==========================
   セクションデザイン
  ========================== */
  .lp-section-container {
    display: grid;
    gap: 2rem;
    padding: 1.5rem 0;
  }

  .lp-section-heading2 {
    display: block;
    padding: 0.75rem 1rem;
    font-size: var(--font-size-h2);
    text-align: center;
    border-bottom: 3px solid var(--color-primary);
  }

  .lp-section-heading3 {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    padding-left: 0.85rem;
    font-size: var(--font-size-h3);
    font-weight: 700;
    border-left: 4px solid var(--color-primary);
  }

  .lp-section-desc {
    padding: 1rem 0;
  }

  /* ==========================
   パーツ配置設定
  ========================== */
  .lp-grid {
    --grid-gap: 1.5rem; /* カード同士の間隔（24px相当） */
    --card-min-width: 280px; /* 自動改行時のカード1枚の最小幅 */

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--card-min-width)), 1fr));
    gap: var(--grid-gap);
    width: 100%;
    margin: 0;
    padding: 0;

    &.lp-grid--2col {
      grid-template-columns: 1fr;

      @media (min-width: 768px) {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    &.lp-grid--3col {
      grid-template-columns: 1fr;

      @media (min-width: 640px) {
        grid-template-columns: repeat(2, 1fr);
      }

      @media (min-width: 1024px) {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    &.lp-grid--4col {
      grid-template-columns: 1fr;

      @media (min-width: 640px) {
        grid-template-columns: repeat(2, 1fr);
      }

      @media (min-width: 1024px) {
        grid-template-columns: repeat(4, 1fr);
      }
    }

    &.lp-grid--5col {
      grid-template-columns: 1fr;

      @media (min-width: 640px) {
        grid-template-columns: repeat(2, 1fr);
      }

      @media (min-width: 1024px) {
        grid-template-columns: repeat(5, 1fr);
      }
    }
  }

  /* ==========================
   カードベース
  ========================== */
  .lp-card {
    --card-bg: var(--color-white);
    --card-text: inherit;
    --card-border: var(--border-color);
    --card-border-hover: var(--color-primary-hover);
    --card-radius: 8px;

    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 100%;
    padding: 0;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    transition:
      transform 0.2s ease,
      border-color 0.2s ease,
      box-shadow 0.2s ease;
    overflow: hidden;

    /* 静的カード以外の時だけホバーを実行 */
    &:not(.lp-card--static):hover {
      transform: translateY(-2px);
      border-color: var(--card-border-hover);
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }
  }

  .lp-card__visual {
    width: 100%;
    height: auto;
    display: block;
  }

  .lp-card__body {
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 0.8rem;
    padding: 1.25rem;
  }

  .lp-card__title {
    font-size: var(--font-size-h3);
  }

  .lp-card__desc {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
  }

  .lp-card__text {
    flex-grow: 1;
    color: var(--card-text);
    font-size: var(--font-size-sm);
    line-height: 1.5;
  }

  /* 推奨エリア */
  .lp-card__recommend-area {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);

    .lp-card__recommend-title {
      display: flex;
      align-items: center;
      gap: 0.375rem;
      color: var(--color-primary);
      font-size: 0.8rem;
      font-weight: 700;
      letter-spacing: 0.05em;

      &::before {
        content: "";
        display: inline-block;
        width: 0.875rem;
        height: 0.875rem;
        background-color: #2563eb; /* アイコン色（ブルー） */
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")
          no-repeat center / contain;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E")
          no-repeat center / contain;
      }
    }
  }

  /* ==========================
   ボタンデザイン
  ========================== */
  .lp-btn {
    --btn-bg: var(--color-white);
    --btn-color: var(--color-primary);
    --btn-border: var(--color-primary);
    --btn-hover: var(--color-primary-hover);
    --btn-radius: 6px;

    /* ホバー時の定義 */
    --btn-bg-hover: var(--color-primary-hover-bg, #f0f7ff);
    --btn-color-hover: var(--color-primary-hover, #0056b3);
    --btn-border-hover: var(--color-primary-hover, #0056b3);

    background: var(--btn-bg);
    color: var(--btn-color);
    border: 1px solid var(--btn-border);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;

    /* モバイルデフォルト: タッチしやすい高さ・パディング */
    min-height: 64px;
    margin: 0;
    padding: 0.5rem 0.875rem;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.02em;
    border-radius: var(--btn-radius);
    transition:
      color 0.2s ease,
      background-color 0.2s ease,
      border-color 0.2s ease;

    /* PC表示時の調整 */
    @media (min-width: 768px) {
      min-height: 56px;
      padding: 0.875rem 1rem;
    }

    &::after {
      content: "";
      width: 1.25rem;
      height: 1.25rem;
      flex-shrink: 0;
      background-color: currentColor; /* 文字色と同色にする */
      transition: transform 0.2s ease;

      /* 右矢印SVG */
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E") no-repeat center /
        contain;
      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/%3E%3C/svg%3E") no-repeat
        center / contain;
    }

    &:hover {
      background-color: var(--btn-bg-hover);
      color: var(--btn-color-hover);
      border-color: var(--btn-border-hover);
      text-decoration: none;
    }

    &:focus-visible {
      outline: 3px solid var(--color-primary);
      outline-offset: 2px;
    }

    &.lp-btn--cta {
      --btn-bg: var(--cta-primary-bg);
      --btn-color: var(--cta-primary-text);
      --btn-border: var(--cta-secondary-bg);

      --btn-bg-hover: var(--cta-primary-bg-hover);
      --btn-color-hover: var(--cta-primary-text);
      --btn-border-hover: var(--cta-primary-bg-hover);

      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    }

    &.lp-btn--subcta {
      --btn-bg: var(--cta-secondary-bg);
      --btn-color: var(--cta-primary-text);
      --btn-border: var(--cta-secondary-bg);

      --btn-bg-hover: var(--cta-secondary-bg-hover);
      --btn-color-hover: var(--cta-primary-text);
      --btn-border-hover: var(--cta-secondary-bg-hover);

      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
    }
  }

  /* 外部リンク用アイコン */
  .lp-btn.lp-btn--external {
    &::after {
      /* 外部リンク（Open in New）のSVGマスクデータ */
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E")
        no-repeat center / contain;
      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E")
        no-repeat center / contain;
    }

    &:hover::after {
      transform: translate(2px, -2px);
    }
  }

  .lp-btn.icon-mail::after {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E")
      no-repeat center / contain;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E")
      no-repeat center / contain;
  }

  .lp-btn.icon-phone::after {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.54 15.54 0 006.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1C10.07 21 3 13.93 3 5c0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.24.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E")
      no-repeat center / contain;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79a15.54 15.54 0 006.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1C10.07 21 3 13.93 3 5c0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.24.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E")
      no-repeat center / contain;
  }

  @media (prefers-reduced-motion: reduce) {
    .lp-btn {
      transition: none;

      &:hover {
        transform: none;
      }
    }
  }

  /* ==========================
   タグ用デザイン
  ========================== */
  .lp-tag-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;

    > li {
      display: inline-flex;
    }
  }

  .lp-tag {
    --tag-bg: var(--bg-main);
    --tag-color: var(--text-primary);
    --tag-border: var(--border-color);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0.25rem 0.625rem;
    background: var(--tag-bg);
    color: var(--tag-color);
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    line-height: 1;
    vertical-align: middle;
    white-space: nowrap;
    border: 1px solid var(--tag-border);
    border-radius: 1rem;

    &.lp-tag--primary {
      --tag-bg: var(--color-primary);
      --tag-color: var(--color-white);
      --tag-border: var(--color-primary);
    }
  }

  /* ==========================
   バッヂ用デザイン
  ========================== */
  .lp-badge-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;

    > li {
      display: inline-flex;
    }
  }

  .lp-badge {
    --badge-bg: var(--bg-main);
    --badge-text: var(--text-primary);
    --badge-border: var(--border-color);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.65rem;
    background: var(--badge-bg);
    color: var(--badge-text);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid var(--badge-border);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

    &.lp-badge-primary {
      --badge-bg: var(--color-primary);
      --badge-text: var(--color-white);
    }
  }

  /* ==========================
   スペックリスト用デザイン
  ========================== */
  .lp-spec {
    margin: 0;
  }

  .lp-spec__row {
    display: flex;
    justify-content: space-between; /* 左右に押し広げる */
    align-items: center;
    padding: 0.6rem 0;
    border-bottom: 1px dashed var(--slate-200); /* 控えめな点線の区切り */
  }

  .lp-spec__row:last-child {
    border-bottom: none; /* 最後の行の下線は消す */
  }

  .lp-spec__label {
    margin: 0;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
  }

  .lp-spec__value {
    margin: 0;
    color: var(--slate-900);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-align: right;
  }

  /* ==========================================
   テーブルデザイン
  ========================================== */
  /* コンテナ設定 */
  .lp-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
    border: 1px solid var(--border-color);

    /* スマホのみスクロール案内を表示 */
    &::after {
      content: "← 横スクロールできます →";
      display: block;
      min-width: 700px;
      margin-top: 0.5rem;
      font-size: 0.75rem;
      color: var(--text-secondary);
      text-align: center;

      @media (min-width: 768px) {
        display: none;
      }
    }
  }

  .lp-table {
    --table-header-bg: var(--color-primary);
    --table-header-color: var(--color-white);
    --table-row-even-bg: var(--bg-subtle);
    --table-row-hover-bg: #f8fafc;
    --table-border-color: var(--border-color);
    --table-text-color: var(--text-primary); /* 本文の文字色 */

    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-primary);
    text-align: left;
    white-space: nowrap;
    border: 1px solid var(--border-color);

    caption {
      padding: 0.875rem;
      font-size: 1rem;
      font-weight: 700;
      text-align: left;
    }

    th,
    td {
      padding: 0.875rem 1.25rem;
      border-bottom: 1px solid var(--table-border-color);
    }

    thead {
      th {
        background: var(--table-header-bg);
        color: var(--table-header-color);
        font-weight: 700;
        letter-spacing: 0.03em;
      }
    }

    tbody {
      th {
        background: transparent;
        font-weight: 600;
      }

      tr:hover {
        background: var(--table-row-hover-bg);
        transition: background 0.2s ease;
      }

      tr:nth-child(even) {
        background: var(--table-row-even-bg);
      }

      tr:last-child {
        tr,
        td {
          border-bottom: none;
        }
      }
    }
  }

  /* チェックリスト */
  .lp-checkList {
    padding: 0;
    list-style-type: none;

    li {
      display: flex;
      align-items: flex-start; /* 1行目の先頭にチェックを合わせる */
      gap: 0.6rem;
      margin-block: 0.75rem;
      line-height: 1.6;

      &::before {
        content: "";
        flex-shrink: 0; /* チェックアイコンが潰れるのを防ぐ */
        width: 1.2em;
        height: 1.2em;
        margin-top: 0.2em; /* 1行目のテキスト中央に微調整 */
        background-color: var(--color-primary);

        /* 軽量なインラインSVGマスクでチェックを描画 */
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") no-repeat center /
          contain;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") no-repeat
          center / contain;
      }
    }
  }

  /* ==========================
   FV ヒーローセクション
  ========================== */
  .lp-hero {
    position: relative;
    width: 100%;
    border: 1px solid var(--border-color);
  }

  .lp-hero__grid {
    @media (min-width: 768px) {
      display: grid;
      grid-template-columns: 56% 44%;
      align-items: center;
    }
  }

  .lp-hero__content {
    display: grid;
    gap: 1rem;
    padding: 3rem 2rem;
  }

  .lp-hero__title {
    max-width: 620px;
    font-size: var(--font-size-h1);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }

  .lp-hero__lead {
    color: var(--text-primary);
    font-weight: 700;
    line-height: 1.4;
  }

  .lp-hero__desc {
    color: var(--text-secondary);
    line-height: 1.8;
  }

  .lp-hero__features {
    margin: 0;
    padding: 0;
    list-style-type: none;

    li {
      display: flex;
      align-items: flex-start; /* 1行目の先頭にチェックを合わせる */

      &::before {
        content: "";
        flex-shrink: 0; /* チェックアイコンが潰れるのを防ぐ */
        width: 1.2em;
        height: 1.2em;
        margin-top: 0.2em; /* 1行目のテキスト中央に微調整 */
        background-color: var(--color-primary);

        /* 軽量なインラインSVGマスクでチェックを描画 */
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") no-repeat center /
          contain;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") no-repeat
          center / contain;
      }
    }
  }

  .lp-hero__visual {
    position: relative;
    display: grid;
    place-items: center;
    gap: 1rem;
    overflow: hidden;
    background: var(--color-white);

    figcaption {
      color: var(--text-secondary);
      font-size: var(--font-size-sm);
    }
  }

  .lp-hero__image {
    position: relative;
    z-index: 1;

    img {
      display: block;
      width: 100%;
      height: auto;
      object-fit: contain;
    }
  }

  .lp-hero__visual::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 620px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(ellipse, #f7fbff 0%, #eef5fc 70%, transparent 100%);
    transform: translate(-50%, -50%);
    z-index: 0;
  }

  .lp-hero__visual::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 10%;
    width: 350px;
    height: 38px;
    background: rgba(16, 42, 67, 0.12);
    filter: blur(18px);
    border-radius: 50%;
    transform: translateX(-50%);
  }

  /* ==========================================
   ブランド説明セクション
  ========================================== */

  .kotonoha-brand__lead {
    font-weight: 700;
    color: inherit;
    background: none;
    color: var(--color-primary);
    background: linear-gradient(transparent 60%, color-mix(in srgb, var(--color-primary) 15%, white) 60%);
  }

  .kotonoha-brand-message {
    display: grid;
    place-items: center;
    gap: 1.5rem;
    padding: 1rem;
    margin: 0 auto;
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);

    @media (min-width: 768px) {
      grid-template-columns: auto 1fr;
    }
  }

  .kotonoha-brand-message__visual {
    margin: 0;
    padding: 0;
    flex-shrink: 0;
  }

  .kotonoha-brand-message__visual img {
    max-width: 300px;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  }

  .kotonoha-brand-message__visual figcaption {
    margin-top: 0.75rem;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    text-align: center;
  }

  .kotonoha-brand-message__text {
    display: grid;
    gap: 0.5rem;
    padding: 0.875rem;
  }

  .kotonoha-brand-message__text p {
    margin: 0;
    padding: 0;
  }

  .kotonoha-brand-message__text p:first-child {
    font-weight: bold;
    font-size: var(--font-size-h3);
  }

  .kotonoha-brand-message__text p:last-child {
    font-weight: bold;
    color: var(--color-primary);
    font-size: var(--font-size-h2);
  }

  /* ==========================================
   モデル比較セクション
  ========================================== */
  #kotonoha-models {
    scroll-margin-top: 50px;
  }

  .model-card.is-recommended {
    /* background: #eef5fc; */
    border: 2px solid var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary-hover-bg);
  }

  .recommended-badge {
    --badge-bg: var(--bg-main);
    --badge-text: var(--text-primary);
    --badge-border: var(--border-color);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.65rem;
    background: var(--badge-bg);
    color: var(--badge-text);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid var(--badge-border);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }

  /* ==========================================
   用途別セクション
  ========================================== */
  .kotonoha-use {
    display: grid;
    gap: 0.875rem;
    flex: 1;
  }

  .kotonoha-use__panel {
    padding: 1rem;
    background: var(--bg-subtle);
    border: 1px solid var(--border-color);
    border-radius: 8px;
  }

  .kotonoha-use__heading {
    margin: 0 0 0.75rem;
    color: var(--color-primary);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.03em;
  }

  .kotonoha-use__panel p {
    margin: 0;
    line-height: 1.7;
  }

  .kotonoha-use__panel--result {
    background: color-mix(in srgb, var(--color-primary) 6%, white);

    border-color: color-mix(in srgb, var(--color-primary) 30%, white);
  }

  .kotonoha-use-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: auto;
  }

  /* ==========================================
   商品体制セクション
  ========================================== */
  .kotonoha-feature-main-grid {
    display: grid;
    gap: 1rem;

    @media (min-width: 1024px) {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  .kotonoha-feature-sub-grid {
    display: grid;
    gap: 1rem;

    @media (min-width: 768px) {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  /* ==========================================
   用途別セクション
  ========================================== */
  .kotonoha-rag-flow {
    --flow-primary: var(--color-primary, #2563eb); /* メインカラー（ステップ番号・矢印） */
    --flow-bg: var(--bg-main, #f8fafc); /* ステップコンテンツの背景色 */
    --flow-border: var(--border-color, #e2e8f0); /* 枠線色 */
    --flow-text: var(--text-primary, #0f172a); /* 文字色 */

    display: grid;
    gap: 2rem;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style-type: none;
  }

  .kotonoha-rag-flow__item {
    position: relative;
    display: flex;
    gap: 0.75rem;
    padding: 1.25rem;
    background: var(--flow-bg);
    border: 1px solid var(--flow-border);
    border-radius: 8px;

    &:not(:last-child)::after {
      content: "";
      position: absolute;
      bottom: -2rem; /* 親要素の下枠外に配置 */
      left: 50%;
      transform: translateX(-50%);
      width: 2rem;
      height: 2rem;
      background-color: var(--flow-primary);
      z-index: 1;

      /* 矢印SVG（下向きアイコン） */
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E") no-repeat center / contain;
      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E") no-repeat center /
        contain;
    }
  }

  .kotonoha-rag-flow__step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start; /* 横幅をコンテンツに合わせる */
    flex-shrink: 0;
    padding: 0.25rem 0.75rem;
    background: var(--flow-primary);
    color: #ffffff;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    border-radius: 20px;
    white-space: nowrap;
  }

  /* ==========================================
   ローカルAI説明セクション
  ========================================== */
  .kotonoha-local-ai-card {
    width: 100%;
    max-width: 768px;
    margin: 0 auto;
  }

  /* ==========================================
   モデル選択診断セクション 調整用CSS
  ========================================== */
  .quiz-container {
    max-width: 800px;
    margin: 0 auto;
  }

  .quiz-screen {
    display: none;
  }

  .quiz-screen.active {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
  }

  .quiz-progress {
    font-size: 0.9rem;
    font-weight: bold;
    color: var(--color-primary);
  }

  .answer-options {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    width: 100%;
  }

  /* 選択肢ボタンのカード風スタイル */
  .btn-option {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    width: 100%;
    padding: 1rem 1.25rem;
    background-color: var(--color-white);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .btn-option:hover {
    border-color: var(--color-primary);
    background-color: var(--bg-subtle);
  }

  .btn-option__label {
    font-weight: bold;
    font-size: 1rem;
    color: var(--text-primary);
  }

  .btn-option__desc {
    font-size: 0.85rem;
    color: var(--text-secondary);
  }

  /* 診断結果表示 */
  .result-model {
    color: var(--color-primary);
    font-size: var(--font-size-h2);
    font-weight: 700;
  }

  .result-title {
    font-size: var(--font-size-h3);
  }

  .result-detail {
    font-size: var(--font-size-base);
    line-height: 1.7;
    color: var(--text-primary);
  }

  /* ==========================================
   導入ポイントセクション
  ========================================== */
  /* ==========================================
   導入前に確認したいポイント
========================================== */

  #kotonoha-purchase-guide .guide-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 64px;
    height: 64px;
    border-radius: 16px;
    transition:
      background-color 0.3s ease,
      color 0.3s ease,
      transform 0.3s ease;
  }

  #kotonoha-purchase-guide .guide-icon svg {
    width: 32px;
    height: 32px;
  }

  #kotonoha-purchase-guide .lp-card:hover .guide-icon {
    transform: scale(1.05);
  }

  /* 保証・サポート */
  #kotonoha-purchase-guide .guide-card--support .guide-icon {
    background: #eff6ff;
    color: #2563eb;
  }

  /* 出荷前検査 */
  #kotonoha-purchase-guide .guide-card--inspection .guide-icon {
    background: #f0fdf4;
    color: #16a34a;
  }

  /* 配送 */
  #kotonoha-purchase-guide .guide-card--delivery .guide-icon {
    background: #fff7ed;
    color: #ea580c;
  }

  /* 法人導入 */
  #kotonoha-purchase-guide .guide-card--business .guide-icon {
    background: #faf5ff;
    color: #9333ea;
  }

  /* お支払い */
  #kotonoha-purchase-guide .guide-card--payment .guide-icon {
    background: #fefce8;
    color: #ca8a04;
  }

  #kotonoha-purchase-guide .lp-card__text {
    flex-grow: 1;
    color: var(--text-secondary);
    line-height: 1.7;
  }

  /* CTAボタン統一 */
  #kotonoha-purchase-guide .lp-btn {
    min-height: 52px;
  }

  /* タブレット */
  @media (768px <= width < 1024px) {
    #kotonoha-purchase-guide .lp-grid--5col {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  /* スマホ */
  @media (width < 768px) {
    #kotonoha-purchase-guide .guide-icon {
      width: 56px;
      height: 56px;
    }

    #kotonoha-purchase-guide .guide-icon svg {
      width: 28px;
      height: 28px;
    }
  }

  /* ==========================================
   FAQセクション
  ========================================== */
  .kotonoha-faq {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
  }

  .kotonoha-faq__category-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 2rem;
  }

  .kotonoha-faq__category {
    padding: 0.5rem 1.25rem;
    background: var(--slate-100);
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s ease;

    &:hover {
      background: var(--slate-200);
    }

    /* 選択中のボタンのスタイル */
    &.is-active {
      background: var(--color-primary);
      color: var(--color-white);
      border-color: var(--color-primary);
    }
  }

  .kotonoha-faq__item {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
    transition: box-shadow 0.2s ease;

    &:hover {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    /* 非表示アニメーション・切り替え制御用 */
    &[hidden] {
      display: none !important;
    }
  }

  .kotonoha-faq__question {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    font-weight: 700;
    color: var(--text-heading);
    cursor: pointer;
    list-style: none; /* デフォルトの三角形マークを非表示 */

    /* Safari用の標準マーク打ち消し */
    &::-webkit-details-marker {
      display: none;
    }

    /* 下向き矢印（Chevron Down）のSVG */
    &::after {
      content: "";
      flex-shrink: 0;
      margin-left: auto;
      width: 1.5rem;
      height: 1.5rem;
      background-color: var(--color-primary); /* アイコンの色 */
      transition: transform 0.3s ease;

      /* インラインSVGマスク */
      mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/%3E%3C/svg%3E") no-repeat
        center / contain;
      -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/%3E%3C/svg%3E")
        no-repeat center / contain;
    }
  }

  /* <details> が開いた状態の時 */
  .kotonoha-faq__item[open] {
    .kotonoha-faq__question::after {
      transform: rotate(180deg);
    }

    .kotonoha-faq__question {
      border-bottom: 1px solid var(--border-color);
      background-color: var(--slate-50);
    }
  }

  .kotonoha-faq__answer {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
    color: var(--text-primary);
    line-height: 1.6;
    background-color: var(--bg-surface);

    p {
      margin: 0;
    }
  }

  /* ==========================================
   最終CTA・サポート案内セクション
  ========================================== */
  .lp-final {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    max-width: 960px;
    margin-inline: auto;
    padding: 2rem 1.25rem;
    background: var(--bg-surface);
    border: 2px solid var(--color-primary);
    text-align: center;
    border-radius: 12px;
    box-shadow: 0 10px 30px color-mix(in srgb, var(--hpe-green-500) 12%, transparent);

    @media (min-width: 768px) {
      padding: 3.5rem 2.5rem;
    }
  }

  .lp-final__logo {
    display: block;
    width: 100%;
    max-width: 348px;
    height: auto;
  }

  /* メイン見出し */
  .lp-final__title {
    font-size: clamp(1.375rem, 1rem + 1.2vw, 1.875rem);
    font-weight: 800;
    line-height: 1.4;
  }

  /* 説明テキスト */
  .lp-final__description {
    font-size: var(--font-size-base);
    color: var(--slate-700);
  }
}