@charset "UTF-8";
/* ============================================================
   tokens.css
   Premium Monochrome Clinical — 矯正歯科LP風トップページ
   Source: board/sales-atlas.png + board/moodboard-variants.md
   (Selected Direction: A. Premium Monochrome Clinical)

   このファイルは theme swapping 用の role-based token です。
   component / section CSS は本ファイルのtokenのみを参照してください。
   raw paletteは持たない方針です（必要時のみ --raw-palette-xxx を分離）。
   ============================================================ */

:root {
  /* ----------------------------------------------------------
     1. Brand Colors
     ---------------------------------------------------------- */
  --color-brand-primary: #111111;            /* Moodboard: Primary / Observed */
  --color-brand-primary-hover: #2b2b2b;       /* Inferred */
  --color-brand-primary-soft: #e6e6e6;        /* Inferred */

  --color-brand-secondary: #f3f4f4;           /* Moodboard: Secondary / Observed */
  --color-brand-secondary-hover: #e3e4e4;     /* Inferred */
  --color-brand-secondary-soft: #fafafa;      /* Inferred */

  --color-brand-tertiary: #3a3a3a;            /* Inferred — charcoal step for secondary CTA / chip accents */
  --color-brand-tertiary-soft: #d9d9d9;       /* Moodboard: Border / Observed approx. */

  --color-brand-accent: #876D26;              /* Moodboard: Accent (gold/silver badge) / Observed */
  --color-brand-accent-hover: #a8945c;        /* Inferred */
  --color-brand-accent-soft: #f1ecdd;         /* Inferred */
  --color-doctor-accent: #876d26;              /* Figma p-doctor name badge */

  /* ----------------------------------------------------------
     2. Background Colors
     ---------------------------------------------------------- */
  --color-bg-page: #ffffff;                   /* Moodboard: Base / Observed */
  --color-bg-section: #ffffff;                /* Inferred */
  --color-bg-section-alt: #f3f4f4;            /* Moodboard: Secondary / Observed */
  --color-bg-strong: #111111;                 /* Moodboard: Ribbon / Observed — black/charcoal帯 */
  --color-bg-cta: #111111;                    /* Moodboard: CTA / Observed — Final CTA専用 */

  /* 通常セクションの強調背景が必要な場合の追加提案（未確定） */
  --color-bg-emphasis: #f3f4f4;               /* Recommended — 通常セクション強調用。--color-bg-cta流用禁止のため分離 */

  /* ----------------------------------------------------------
     3. Surface Colors
     ---------------------------------------------------------- */
  --color-surface-base: #ffffff;              /* Inferred */
  --color-surface-card: #ffffff;              /* Moodboard: Surface / Observed */
  --color-surface-soft: #f3f4f4;              /* Inferred */
  --color-surface-accent: #f1ecdd;            /* Inferred — gold-softなバッジ系カード背景 */

  /* ----------------------------------------------------------
     4. Text Colors
     ---------------------------------------------------------- */
  --color-text-primary: #111111;              /* Moodboard: Text / Observed */
  --color-text-secondary: #333333;            /* Inferred */
  --color-text-muted: #666666;                /* Moodboard: Muted Text / Observed */
  --color-text-inverse: #ffffff;               /* Inferred */
  --color-text-on-primary: #ffffff;            /* Moodboard: CTA Text / Observed */
  --color-text-on-secondary: #111111;          /* Inferred — pale gray背景上の黒文字 */

  /* ----------------------------------------------------------
     5. Border Colors
     ---------------------------------------------------------- */
  --color-border-default: #d9d9d9;            /* Moodboard: Border / Observed */
  --color-border-strong: #111111;              /* Inferred */
  --color-border-accent: #b9a46a;              /* Inferred — バッジ枠線用 */

  /* ----------------------------------------------------------
     6. Semantic Colors
     ---------------------------------------------------------- */
  --color-success: #2e7d32;                   /* Recommended */
  --color-warning: #b9a46a;                   /* Moodboard: Alert / Observed — 強い赤を避け metallic gold で代替 */
  --color-error: #b3261e;                     /* Recommended — フォームエラー等の最低限実装用 */

  /* ----------------------------------------------------------
     7. Typography Tokens
     ---------------------------------------------------------- */
  --font-family-heading: "Noto Serif JP", "ヒラギノ角ゴ Pro W3", Meiryo, メイリオ, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック体, "Yu Gothic", YuGothic, "MS PGothic", Osaka, arial, sans-serif; /* Inferred — エディトリアル高コントラスト見出しを当フォントスタックの太字/字間で表現 */
  --font-family-body: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, メイリオ, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック体, "Yu Gothic", YuGothic, "MS PGothic", Osaka, arial, sans-serif;
 --font-family-en: "Cinzel","Helvetica Neue", Helvetica, Arial, sans-serif; /* Inferred — 英字ラベル用 */
 --font-family-display: "Noto Serif JP", "ヒラギノ角ゴ Pro W3", Meiryo, メイリオ, "游ゴシック Medium", "Yu Gothic Medium", 游ゴシック体, "Yu Gothic", YuGothic, "MS PGothic", Osaka, arial, sans-serif; /* Inferred — エディトリアル高コントラスト見出しを当フォントスタックの太字/字間で表現 */

  --font-size-xs: 0.75rem;     /* 12px / Inferred */
  --font-size-sm: 0.875rem;    /* 14px / Inferred */
  --font-size-base: 1rem;      /* 16px */
  --font-size-md: 1.125rem;    /* 18px / Inferred */
  --font-size-lg: 1.375rem;    /* 22px / Inferred */
  --font-size-xl: 1.75rem;     /* 28px / Inferred */
  --font-size-2xl: 2.25rem;    /* 36px / Inferred */
  --font-size-3xl: 2.75rem;    /* 44px / Inferred */

  --line-height-tight: 1.3;    /* Inferred */
  --line-height-normal: 1.7;   /* Inferred */
  --line-height-relaxed: 1.9;  /* Inferred */

  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.04em;   /* Inferred — CASE番号・英字ラベル用 */
  --letter-spacing-wider: 0.08em;  /* Inferred */

  --font-weight-normal: 400;
  --font-weight-medium: 600;
  --font-weight-bold: 700;

  /* ----------------------------------------------------------
     8. Spacing Scale
     ---------------------------------------------------------- */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */

  /* ----------------------------------------------------------
     9. Layout Tokens
     ---------------------------------------------------------- */
  --layout-container-max: 1200px;
  --layout-container-padding: var(--space-5); /* 1.25rem / 20px */

  --layout-section-padding-y-sm: var(--space-10); /* SP&TAB / Inferred */
  --layout-section-padding-y-md: var(--space-12); /* Inferred */
  --layout-section-padding-y-lg: var(--space-20); /* PC / Inferred */

  /* ----------------------------------------------------------
     10. Component Spacing Tokens
     ---------------------------------------------------------- */
  --component-card-padding: var(--space-5);
  --component-card-gap: var(--space-4);

  --component-button-padding-x: var(--space-6);
  --component-button-padding-y: var(--space-4);
  --component-button-gap: var(--space-2);

  --component-section-heading-gap: var(--space-6);

  /* ----------------------------------------------------------
     11. Radius Tokens
     ---------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  --component-radius-button: 0;  /* Moodboard token.css note: radius-button: 6px相当を採用 */
  --component-radius-card: var(--radius-md);    /* Moodboard token.css note: radius-card: 8px */
  --component-radius-chip: var(--radius-pill);
  --component-radius-image: var(--radius-sm);

  /* ----------------------------------------------------------
     12. Shadow Tokens
     ---------------------------------------------------------- */
  --shadow-sm: 0 1px 3px rgba(17, 17, 17, 0.06);
  --shadow-md: 0 6px 16px rgba(17, 17, 17, 0.08);
  --shadow-lg: 0 10px 30px rgba(17, 17, 17, 0.08); /* Moodboard: --shadow-soft / Observed */

  --shadow-card: var(--shadow-sm);
  --shadow-card-hover: var(--shadow-md);
  --shadow-button: 0 4px 10px rgba(17, 17, 17, 0.18);
  --shadow-floating: var(--shadow-lg);

  /* ----------------------------------------------------------
     13. Transition and Z-index Tokens
     ---------------------------------------------------------- */
  --transition-fast: 120ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 320ms ease;
  --transition-color: color 200ms ease, background-color 200ms ease, border-color 200ms ease;
  --transition-shadow: box-shadow 200ms ease;

  --z-base: 0;
  --z-above: 10;
  --z-overlay: 100;
  --z-modal: 1000;
  --z-header: 500;

  /* ----------------------------------------------------------
     14. Chip Tokens（role-based）
     ---------------------------------------------------------- */
  --color-chip-primary-bg: var(--color-brand-primary);
  --color-chip-primary-text: var(--color-text-on-primary);

  --color-chip-secondary-bg: var(--color-brand-secondary);
  --color-chip-secondary-text: var(--color-text-on-secondary);

  --color-chip-accent-bg: var(--color-surface-accent);
  --color-chip-accent-text: var(--color-text-primary);

  --layout-header-height: 60px;
  --floating-cta-height:58px;
}


@layer base {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html {
    scroll-behavior: smooth;
    text-size-adjust: 100%;
  }

  body {
    margin: 0;
    color: var(--color-text-primary);
    background: var(--color-bg-page);
    font-family: var(--font-family-body);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-normal);
    letter-spacing: var(--letter-spacing-normal);
  }

  a {
    color: inherit;
    text-decoration-color: currentColor;
    text-underline-offset: 0.18em;
    transition: var(--transition-color);
  }

  a:hover {
    color: var(--color-brand-primary-hover);
  }

  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-width: 100%;
    height: auto;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
    color: inherit;
  }

  button {
    cursor: pointer;
  }

  input,
  select,
  textarea {
    width: 100%;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-sm);
    background: var(--color-surface-base);
  }

  input,
  select {
    min-height: 48px;
    padding: var(--space-3) var(--space-4);
  }

  textarea {
    min-height: 9rem;
    padding: var(--space-4);
    resize: vertical;
  }

  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  button:focus-visible,
  a:focus-visible {
    outline: 2px solid var(--color-border-accent);
    outline-offset: 3px;
  }

  ::selection {
    color: var(--color-text-on-primary);
    background: var(--color-brand-primary);
  }

  .entry-content {
    color: var(--color-text-primary);
    font-family: var(--font-family-body);
    font-size: var(--font-size-base);
    line-height: var(--line-height-relaxed);
  }

  .entry-content > * {
    margin-block-start: 0;
    margin-block-end: var(--space-6);
  }

  .entry-content > *:last-child {
    margin-block-end: 0;
  }



  .entry-content h2,
  .entry-content h3,
  .entry-content h4 {
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
  }



  .entry-content h2:not(.is-style-plain) {
    margin-block-start: var(--space-10);
    margin-block-end: var(--space-8);
    padding-block-end: var(--space-3);
    border-block-end: 2px solid var(--color-border-accent);
    font-size: var(--font-size-lg);
  }

.entry-content h3:not(.is-style-plain):not(.p-flow__step-title):not(.wp-block-accordion-heading){
    margin-block-start: var(--space-8);
    margin-block-end: var(--space-5);
    padding-inline-start: var(--space-4);
    border-inline-start: 4px solid var(--color-border-accent);
    font-size: var(--font-size-md);
  }

  .type-page .entry-content h2:first-of-type{
    margin-block-start:0;
  }

  .entry-content h2.is-style-plain,
  .entry-content h3.is-style-plain {
    padding: 0;
    border: 0;
  }

  .entry-content p {
    margin-block-start: 0;
  }

  .entry-content ul,
  .entry-content ol {
    padding-inline-start: 1.4em;
  }

  .entry-content li + li {
    margin-block-start: var(--space-2);
  }

  .entry-content blockquote {
    margin-inline: 0;
    padding: var(--space-5);
    border-inline-start: 4px solid var(--color-border-accent);
    background: var(--color-bg-section-alt);
    color: var(--color-text-secondary);
  }

  .entry-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
  }

  .entry-content th,
  .entry-content td {
    padding: var(--space-3);
    border: 1px solid var(--color-border-default);
    vertical-align: top;
  }

  .entry-content th {
    background: var(--color-bg-section-alt);
    font-weight: var(--font-weight-bold);
    text-align: left;
  }

  .entry-content a {
    color: var(--color-brand-primary);
    font-weight: var(--font-weight-medium);
  }

  @media (min-width: 1024px) {
    .entry-content h2:not(.is-style-plain) {
      font-size: var(--font-size-2xl);
    }

    .entry-content h3:not(.is-style-plain) {
      font-size: var(--font-size-xl)!important;
    }
  }
}

@layer components {
  .c-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--component-button-gap);
    min-height: 52px;
    padding: var(--component-button-padding-y) var(--component-button-padding-x);
    border: 1px solid transparent;
    border-radius: var(--component-radius-button);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    text-align: center;
    text-decoration: none;
    letter-spacing: var(--letter-spacing-normal);
    transition: var(--transition-color), var(--transition-shadow), transform var(--transition-fast);
  }

  .c-button:hover {
    transform: translateY(-1px);
  }

  .c-button--primary {
    color: var(--color-text-on-primary);
    background: var(--color-bg-cta);
    border-color: var(--color-bg-cta);
    box-shadow: var(--shadow-button);
  }

  .c-button--primary:hover {
    color: var(--color-text-on-primary);
    background: var(--color-brand-primary-hover);
    border-color: var(--color-brand-primary-hover);
  }

  .c-button--secondary {
    color: var(--color-text-primary);
    background: var(--color-surface-base);
    border-color: var(--color-border-strong);
  }

  .c-button--secondary:hover {
    color: var(--color-text-primary);
    background: var(--color-brand-secondary-soft);
  }

  .c-button--icon {
    min-width: 52px;
    width: 52px;
    min-height: 52px;
    padding: 0;
    border-radius: var(--component-radius-chip);
  }

  .c-button__icon {
    width: 1.25em;
    height: 1.25em;
    flex: 0 0 auto;
  }

  .c-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 28px;
    padding: var(--space-1) var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--component-radius-chip);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-wider);
    text-decoration: none;
    text-transform: uppercase;
  }

  .c-chip--primary {
    color: var(--color-chip-primary-text);
    background: var(--color-chip-primary-bg);
    border-color: var(--color-chip-primary-bg);
  }

  .c-chip--secondary {
    color: var(--color-chip-secondary-text);
    background: var(--color-chip-secondary-bg);
    border-color: var(--color-border-default);
  }

  .c-chip--accent {
    color: var(--color-chip-accent-text);
    background: var(--color-chip-accent-bg);
    border-color: var(--color-border-accent);
  }

  .c-card,
  .c-stat-card,
  .c-feature-card,
  .c-case-card,
  .c-voice-card,
  .c-faq-item {
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-default);
    border-radius: var(--component-radius-card);
    box-shadow: var(--shadow-card);
  }

  .c-card,
  .c-stat-card,
  .c-feature-card,
  .c-voice-card,
  .c-faq-item {
    padding: var(--component-card-padding);
  }

  /*
  .c-card:hover,
  .c-feature-card:hover,
  .c-case-card:hover,
  .c-voice-card:hover {
    box-shadow: var(--shadow-card-hover);
  }
*/
  .c-stat-card {
    display: grid;
    gap: var(--space-2);
    place-items: center;
    text-align: center;
  }

  .c-stat-card__number {
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: 1;
    letter-spacing: var(--letter-spacing-wide);
  }

  .c-stat-card__label {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
  }

  .c-feature-card {
    display: grid;
    gap: var(--space-3);
  }

  .c-feature-card__icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-circle);
    color: var(--color-text-on-primary);
    background: var(--color-brand-primary);
  }

  .c-feature-card__title,
  .c-case-card__title,
  .c-voice-card__title {
    margin: 0;
    font-family: var(--font-family-heading);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-normal);
  }

  .c-image-frame {
    overflow: hidden;
    border: 1px solid var(--color-border-default);
    border-radius: var(--component-radius-image);
    background: var(--color-surface-soft);
  }

  .c-case-card {
    overflow: hidden;
  }

.p-case__grid .c-case-card {
    overflow: visible;
  }


  .c-case-card__body {
    display: grid;
    gap: var(--space-4);
    padding: var(--component-card-padding);
  }

  .c-case-card__media {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    padding: var(--space-2);
    background: var(--color-bg-section-alt);
  }

  .c-case-card__label {
    display: inline-flex;
    align-items: center;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wider);
  }

  .c-voice-card {
    position: relative;
    display: grid;
    gap: var(--space-3);
  }

@media (min-width: 1024px) {
    .c-voice-card {
      gap: var(--space-4);
    }
  }

  .c-voice-card__rating {
    color: var(--color-brand-accent);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wide);
  }

  .c-section-heading {
    display: grid;
    gap: var(--space-3);
    margin-block-end: var(--component-section-heading-gap);
    font-family: var(--font-family-heading);
    text-align: center;
  }

  .c-section-heading__label {
    justify-self: center;
  }

  .c-section-heading__title {
    margin: 0;
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
  }

  .c-section-heading__lead {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
  }

  .c-callout,
  .c-callout-bubble {
    padding: var(--space-5);
    border: 1px solid var(--color-border-default);
    border-radius: var(--component-radius-card);
    background: var(--color-surface-base);
  }

  .c-callout {
    border-inline-start: 4px solid var(--color-border-accent);
  }

  .c-callout-bubble {
    position: relative;
    box-shadow: var(--shadow-card);
  }

  .c-arrow-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--color-text-on-primary);
    background: var(--color-brand-primary);
    border-radius: var(--radius-circle);
  }

  .c-step-item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-4);
    align-items: start;
  }

  .c-step-item__number {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--component-radius-chip);
    color: var(--color-text-on-primary);
    background: var(--color-brand-primary);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-wide);
  }

  .c-pricing-table {
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--color-border-default);
    border-radius: var(--component-radius-card);
    background: var(--color-surface-card);
    box-shadow: var(--shadow-card);
  }

  .c-pricing-table table {
    width: 100%;
    border-collapse: collapse;
  }

  .c-pricing-table th,
  .c-pricing-table td {
    padding: var(--space-4);
    border-block-end: 1px solid var(--color-border-default);
    text-align: left;
  }

  .c-pricing-table th {
    background: var(--color-bg-section-alt);
    font-weight: var(--font-weight-bold);
  }

  .c-faq-item + .c-faq-item {
    margin-block-start: var(--space-3);
  }

  .c-faq-item__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-text-primary);
    font-weight: var(--font-weight-bold);
    text-align: left;
  }

  .c-faq-item__answer {
    display: none;
    margin-block-start: var(--space-4);
    color: var(--color-text-secondary);
  }

  .c-faq-item.is-open .c-faq-item__answer {
    display: block;
  }

  .c-form-field {
    display: grid;
    gap: var(--space-2);
  }

  .c-form-field__label {
    font-weight: var(--font-weight-bold);
  }

  .c-form-field__note {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
  }

  .c-form-field.is-error input,
  .c-form-field.is-error select,
  .c-form-field.is-error textarea {
    border-color: var(--color-error);
  }

  .c-form-field__error {
    color: var(--color-error);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
  }

  .c-before-after {
    --before-after-pos: 50%;
  }

  .c-before-after__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 283 / 159;
    overflow: hidden;
    border-radius: var(--component-radius-image);
  }

  .c-before-after__frame .c-before-after__img {
    position: absolute;
    inset: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
  }

  .c-before-after__img--before {
    clip-path: inset(0 calc(100% - var(--before-after-pos)) 0 0);
  }

  .c-before-after__label {
    position: absolute;
    top: var(--space-2);
    padding: var(--space-1) var(--space-2) 0 var(--space-2);
    border-radius: var(--radius-sm);
    background: rgb(0 0 0 / 0.55);
    color: var(--color-text-on-primary);
    font-size: var(--font-size-xs);

    letter-spacing: var(--letter-spacing-wider);
    line-height: 1;

    transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  .c-before-after__label--before {
    left: var(--space-2);
  }

  .c-before-after__label--after {
    right: var(--space-2);
  }

  .c-before-after.is-before-label-hidden .c-before-after__label--before,
  .c-before-after.is-after-label-hidden .c-before-after__label--after {
    opacity: 0;
    visibility: hidden;
  }

  .c-before-after__bar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--before-after-pos);
    width: 2px;
    margin-left: -1px;
    background: var(--color-surface-base);
    pointer-events: none;
  }

  .c-before-after__knob {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    border-radius: var(--radius-circle);
    display: grid;
    place-items: center;
    background: var(--color-surface-base);
    color: var(--color-text-primary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    box-shadow: var(--shadow-card);
  }

  .c-before-after__range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
  }
.c-case-card .c-before-after__knob img{
aspect-ratio: 1 / 1;
    margin-block: 0;
    width: 20px;
}
  @media (min-width: 1024px) {
    .c-button {
      min-height: 56px;
      font-size: var(--font-size-md);
    }

    .c-section-heading__title {
      font-size: var(--font-size-2xl);
    }
  }
}

@layer sections {
  .p-section,
  .p-hero,
  .p-trust-band,
  .p-concern-band,
  .p-feature-band,
  .p-case-band,
  .p-voice-band,
  .p-final-cta,
  .p-footer {
    position: relative;
    padding-block: var(--layout-section-padding-y-sm);
  }

  .p-section__inner,
  .p-hero__inner,
  .p-trust-band__inner,
  .p-concern-band__inner,
  .p-feature-band__inner,
  .p-case-band__inner,
  .p-voice-band__inner,
  .p-final-cta__inner,
  .p-footer__inner {
    width: min(100%, calc(var(--layout-container-max) + (var(--layout-container-padding) * 2)));
    margin-inline: auto;
    padding-inline: var(--layout-container-padding);
  }

  .p-header {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-header);
    background: color-mix(in srgb, var(--color-bg-page) 94%, transparent);
    border-block-end: 1px solid var(--color-border-default);
  }

  .p-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
  }

  @media (min-width: 1024px) {
   .p-header__inner {
align-items: stretch;
   }
  }

  .p-header__logo {
    color: var(--color-text-primary);
    font-family: var(--font-family-heading);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
    text-decoration: none;
  }

  .p-header__nav {
    display: none;
  }

  .p-hero {
    overflow: hidden;
    min-height: 680px;
    display: grid;
    align-items: end;
    color: var(--color-text-primary);
    background: var(--color-bg-page);
  }

  .p-hero__media {
    position: absolute;
    inset: 0;
    z-index: var(--z-base);
  }

  .p-hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .p-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      color-mix(in srgb, var(--color-bg-page) 8%, transparent) 0%,
      color-mix(in srgb, var(--color-bg-page) 72%, transparent) 64%,
      var(--color-bg-page) 100%
    );
  }

  .p-hero__inner {
    position: relative;
    z-index: var(--z-above);
    display: grid;
    gap: var(--space-6);
  }

  .p-hero__label {
    justify-self: start;
  }

  .p-hero__title {
    max-width: 12em;
    margin: 0;
    font-family: var(--font-family-heading);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
  }

  .p-hero__lead {
    max-width: 34em;
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
  }

  .p-hero__badges,
  .p-hero__actions,
  .p-final-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
  }

  .p-trust-band,
  .p-concern-band,
  .p-feature-band,
  .p-voice-band {
    background: var(--color-bg-section-alt);
  }

  .p-case-band {
    background: var(--color-bg-section);
  }

  .p-trust-band__grid,
  .p-feature-band__grid,
  .p-case-band__grid,
  .p-voice-band__grid {
    display: grid;
    gap: var(--space-4);
  }

  .p-concern-band__layout {
    display: grid;
    gap: var(--space-6);
    align-items: center;
  }

  .p-concern-band__list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .p-concern-band__item {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3);
    align-items: start;
    padding: var(--space-4);
    background: var(--color-surface-card);
    border: 1px solid var(--color-border-default);
    border-radius: var(--component-radius-card);
  }

  .p-concern-band__item::before {
    content: "";
    width: 1em;
    height: 1em;
    margin-block-start: 0.35em;
    border: 3px solid var(--color-border-strong);
    border-block-start: 0;
    border-inline-start: 0;
    transform: rotate(45deg);
  }

  .p-feature-band--emphasis,
  .p-case-band--emphasis,
  .p-voice-band--emphasis {
    background: var(--color-bg-emphasis);
  }

  .p-final-cta {
    overflow: hidden;
    color: var(--color-text-on-primary);
    background: var(--color-bg-cta);
  }

  .p-final-cta__inner {
    display: grid;
    gap: var(--space-6);
    text-align: center;
  }

  .p-final-cta__title {
    margin: 0;
    color: var(--color-text-on-primary);
    font-family: var(--font-family-heading);
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-tight);
  }

  .p-final-cta__lead {
    margin: 0;
    color: var(--color-text-inverse);
    line-height: var(--line-height-relaxed);
  }

  .p-final-cta .c-button--primary {
    color: var(--color-text-primary);
    background: var(--color-text-on-primary);
    border-color: var(--color-text-on-primary);
  }

  .p-final-cta .c-button--secondary {
    color: var(--color-text-on-primary);
    background: transparent;
    border-color: var(--color-text-on-primary);
  }

  .p-footer {
    padding-block: var(--space-10);
    color: var(--color-text-inverse);
    background: var(--color-bg-strong);
  }

  .p-footer__inner {
    display: grid;
    gap: var(--space-6);
  }

  .p-footer a {
    color: var(--color-text-inverse);
  }

  .p-footer-link__list li::before {
    content: "・";
    color: var(--color-text-on-primary);
  }

  .p-footer__meta {
    color: var(--color-brand-tertiary-soft);
    font-size: var(--font-size-sm);
  }

   .p-header__inner{padding-left: 1.25rem;}

  @media (min-width: 1024px) {
    .p-section,
    .p-hero,
    .p-trust-band,
    .p-concern-band,
    .p-feature-band,
    .p-case-band,
    .p-voice-band,
    .p-final-cta {
      padding-block: var(--layout-section-padding-y-lg);
    }


    .p-header__nav {
      display: flex;
      align-items: center;
      gap: var(--space-5);
      color: var(--color-text-secondary);
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-medium);
    }

    .p-hero {
      min-height: 760px;
      align-items: center;
    }

    .p-hero__media::after {
      background: linear-gradient(
        90deg,
        var(--color-bg-page) 0%,
        color-mix(in srgb, var(--color-bg-page) 88%, transparent) 42%,
        color-mix(in srgb, var(--color-bg-page) 8%, transparent) 100%
      );
    }

    .p-hero__title {
      font-size: var(--font-size-3xl);
    }

    .p-trust-band__grid,
    .p-feature-band__grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .p-case-band__grid,
    .p-voice-band__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .p-concern-band__layout {
      grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
      gap: var(--space-10);
    }

    .p-final-cta__inner {
      max-width: 840px;
    }

    .p-final-cta__title {
      font-size: var(--font-size-2xl);
    }

    .p-final-cta__actions {
      justify-content: center;
    }

    .p-footer__inner {
      grid-template-columns: 1fr auto;
      align-items: end;
    }
  }
}

@layer utilities {
  .u-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  .u-container {
    width: min(100%, calc(var(--layout-container-max) + (var(--layout-container-padding) * 2)));
    margin-inline: auto;
    padding-inline: var(--layout-container-padding);
  }

  .u-stack {
    display: grid;
    gap: var(--space-4);
  }

  .u-stack--lg {
    gap: var(--space-8);
  }

  .u-cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
  }

  .u-center {
    margin-inline: auto;
  }

  .u-text-center {
    text-align: center;
  }

  .u-full-bleed {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
  }

  .show-pc {
    display: none !important;
  }

  .show-sp {
    display: revert !important;
  }

  @media (min-width: 1024px) {
    .show-pc {
      display: revert !important;
    }

    .show-sp {
      display: none !important;
    }
  }
}