@font-face {
    font-family: 'M+A1';
    src: url('../fonts/MA1-regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'M+A1';
    src: url('../fonts/MA1-bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'M+A1';
    src: url('../fonts/MA1-bold.otf') format('opentype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
  }*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }:root {
    --ink: #1b2622;
    --ink-2: #555;
    --ink-3: #8a8a8a;
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-muted: #f3f3f3;
    --surface-dark: #131515;
    --bg-soft: #f6f7f5;
    --bg-2: #e9ede9;
    --accent: #1f8050;
    --accent-2: #28925b;
    --accent-soft: #eef4f0;
    --accent-light: #7fd1a0;
    --btn-bg: #ffffff;
    --btn-color: var(--accent);
    --btn-border: var(--accent);
    --btn-border-width: 3px;
    --btn-hover-bg: var(--accent);
    --btn-hover-color: #ffffff;
    --btn-hover-border: var(--accent);
    --border: #e4e7e2;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --shadow: 0 8px 30px rgba(0,0,0,0.06);
    --shadow-lg: 0 20px 50px rgba(0,0,0,0.10);
    --radius: 8px;
    --ff-sans: 'M+A1', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', sans-serif;
    --ff-display: 'M+A1', sans-serif;
    --ff-fervojo: 'M+A1', sans-serif;

    /* ===== Layout system ===== */
    --maxw: 1200px;          /* default contained (text / heads) */
    --maxw-wide: 1440px;     /* card grids / tables / galleries (fill wide screens) */
    --maxw-narrow: 760px;    /* long-form reading blocks */
    --gutter: clamp(20px, 5vw, 72px);
    --section-y: 240px;

    /* ===== Type scale (fluid: grows on wide screens like the reference site) ===== */
    --fs-display: clamp(36px, 5.2vw, 64px); /* hero / big section word */
    --fs-h2:      clamp(30px, 3.8vw, 48px); /* every section title */
    --fs-h3:      clamp(20px, 1.8vw, 26px); /* card / item titles */
    --fs-lg:      clamp(18px, 1.3vw, 22px); /* sub-heads, emphasis */
    --fs-lead:    clamp(17px, 1.5vw, 22px); /* section lead paragraphs (ref: 18–24px) */
    --fs-body:    clamp(16px, 1.1vw, 19px); /* default body (ref: 16–21px) */
    --fs-md:      clamp(15px, 1.0vw, 17px); /* mid body / UI text */
    --fs-sm:      clamp(14px, 0.95vw, 16px);/* secondary text, card body */
    --fs-xs:      13px;                      /* captions, notes */
    --fs-eyebrow: 13px;                      /* eyebrows / labels */
    --fs-micro:   12px;                      /* tiny meta / stat labels */

    /* ===== Line-height scale (行間: 用途別に統一) ===== */
    --lh-none:    1;    /* 1行UI・アイコン・数字 */
    --lh-tight:   1.2;  /* 大見出し・ディスプレイ */
    --lh-snug:    1.35; /* 見出し */
    --lh-heading: 1.45; /* サブ見出し・詰めたコピー */
    --lh-normal:  1.55; /* 標準UIテキスト */
    --lh-relaxed: 1.7;  /* ゆったりしたコピー */
    --lh-loose:   1.85; /* 長文本文 */
    --lh-body:    1.8;  /* 基本本文・和文の読みやすい行間 */

    /* ===== Letter-spacing scale (字間: 用途別に統一) ===== */
    --ls-tight:  -0.02em; /* 大見出し（詰める） */
    --ls-snug:   -0.01em; /* 中見出し */
    --ls-normal:  0.02em; /* 詰めた本文 */
    --ls-base:    0.03em; /* 基本本文（和文の読みやすい字間） */
    --ls-wide:    0.1em;  /* ラベル・小さめの強調 */
    --ls-wider:   0.18em; /* アイブロウ・英大文字ラベル */
  }html { scroll-behavior: smooth; }body {
    font-family: var(--ff-sans);
    font-weight: 400;
    background: var(--bg);
    color: var(--ink);
    line-height: var(--lh-body);
    letter-spacing: var(--ls-base);
    font-size: var(--fs-body);
    -webkit-font-smoothing: antialiased;
  }strong, b { font-weight: 700; }/* ===== 日本語テキストの折り返し最適化（可読性・見栄え向上） ===== */
  /* 文節（意味のまとまり）単位で自然に改行し、禁則処理を厳格に。
     対応ブラウザ（Chrome系）では大きく改善し、未対応環境でも従来通り表示。 */
  body {
    word-break: auto-phrase;   /* 単語の途中ではなく文節区切りで折り返す */
    line-break: strict;        /* 行頭・行末の禁則処理を厳格に適用 */
    overflow-wrap: break-word; /* 長いURL・英単語のはみ出しを防止 */
    text-wrap: pretty;         /* 本文末尾に1文字だけ残る泣き別れを抑制 */
  }/* 見出しは行のバランスを取り、不自然な改行・1文字落ちを防ぐ */
  h1, h2, h3, h4, .section-title, .services-title, .cases-title, .price-title, .approach-new-title, .vs-new-title, .faq-section-title, .worries-title, .thumb-stop__message, .hero-fv__title-main, .ac-title, .strength-point-title, .flow-title, .contact-card-title, .solution-flow-heading {
    text-wrap: balance;
    font-feature-settings: "palt";  /* 和文カーニング: 約物・仮名のアキを詰めて文字組を締める */
    font-kerning: normal;
  }/* 例外: お客様の声セクションは折り返し最適化を適用せず従来表示に戻す */
  .testimonials-section, .testimonials-section * {
    word-break: normal;
    line-break: auto;
    overflow-wrap: normal;
    text-wrap: wrap;
  }/* ===== HEADER ===== */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 200;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border-bottom: 1px solid rgba(27, 38, 34, 0.08);
    box-shadow: 0 1px 12px rgba(27, 38, 34, 0.04);
    padding: 0 var(--gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
  }.site-logo {
    font-family: var(--ff-display);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: var(--ls-base);
    color: #30453e;
    text-decoration: none;
    flex-shrink: 0;
  }.site-logo span { color: var(--accent); }.nav-menu {
    display: flex;
    align-items: center;
    gap: 28px;
    margin-left: auto;
    margin-right: 28px;
  }.nav-menu a {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--ink-2);
    text-decoration: none;
    transition: color 0.2s;
    position: relative;
  }.nav-menu a::after {
    content: '';
    position: absolute;
    left: 0; bottom: -6px;
    width: 0; height: 2px;
    background: var(--accent);
    transition: width 0.2s;
  }.nav-menu a:hover { color: var(--accent); }.nav-menu a:hover::after { width: 100%; }.header-cta {
    background: var(--accent);
    color: #fff;
    border: var(--btn-border-width) solid var(--accent);
    text-decoration: none;
    font-size: var(--fs-sm);
    font-weight: 700;
    padding: 6px 15px;
    border-radius: 8px;
    letter-spacing: var(--ls-base);
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
  }.header-cta:hover {
    background: var(--accent-2);
    color: #fff;
    border-color: var(--accent-2);
  }.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
  }.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(27, 38, 34, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.2s, background 0.2s;
  }.nav-toggle:hover {
    border-color: rgba(31, 128, 80, 0.35);
    background: #fff;
  }.nav-toggle__icon {
    position: relative;
    display: block;
    width: 20px;
    height: 14px;
  }.nav-toggle__bar {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 1px;
    background: var(--ink);
    transition: transform 0.25s ease, top 0.25s ease, opacity 0.2s ease;
  }.nav-toggle__bar:nth-child(1) { top: 0; }.nav-toggle__bar:nth-child(2) { top: 6px; }.nav-toggle__bar:nth-child(3) { top: 12px; }body.is-nav-open .nav-toggle__bar:nth-child(1) {
    top: 6px;
    transform: rotate(45deg);
  }body.is-nav-open .nav-toggle__bar:nth-child(2) { opacity: 0; }body.is-nav-open .nav-toggle__bar:nth-child(3) {
    top: 6px;
    transform: rotate(-45deg);
  }/* ===== SECTIONS ===== */
  section:not(.hero-fv) { padding: var(--section-y) var(--gutter); }.container { max-width: var(--maxw); margin: 0 auto; }/* wide container for card grids / tables / galleries — fills large screens */
  .services-section .container, .our-strengths-section .container, .pricing-section .container, .approach-new .container { max-width: var(--maxw-wide); }.section-head { text-align: center; max-width: var(--maxw-narrow); margin: 0 auto clamp(40px, 5vw, 60px); }.faq-section .section-eyebrow, .testimonials-section .section-eyebrow {
    color: var(--ink-3);
  }.faq-section .section-eyebrow::before, .testimonials-section .section-eyebrow::before {
    background: var(--ink-3);
  }.section-title {
    font-family: var(--ff-sans);
    font-size: var(--fs-h2);
    font-weight: 900;
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-normal);
    color: var(--ink);
    margin-bottom: 18px;
  }.section-lead {
    font-size: var(--fs-lead);
    color: var(--ink-2);
    line-height: var(--lh-body);
  }body.is-hero-theme .site-header {
    background: rgba(255, 255, 255, 0.62);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border-bottom-color: rgba(31, 128, 80, 0.08);
  }body.is-hero-theme .site-logo { color: #30453e; }body.is-hero-theme .site-logo span { color: var(--accent); }body.is-hero-theme .nav-menu a { color: var(--ink-2); }body.is-hero-theme .nav-menu a:hover { color: var(--accent); }body.is-hero-theme .nav-menu a::after { background: var(--accent); }.hero-fv {
    position: relative;
    z-index: 2;
    padding: 0;
    margin-top: -72px;
    background: transparent;
    overflow: visible;
    width: 100%;
    max-width: none;
  }.hero-fv__visual {
    position: relative;
    width: 100%;
    margin: 0;
    min-height: 90vh;
    min-height: 90svh;
    overflow: hidden;
    background: var(--ink);
  }.hero-fv__pane {
    position: absolute;
    inset: 0;
    margin: 0;
    overflow: hidden;
  }.hero-fv__pane picture {
    display: block;
    width: 100%;
    height: 100%;
  }.hero-fv__pane img,
  .hero-fv__pane .hero-fv__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 58% 28%;
  }.hero-fv__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
      linear-gradient(
        to top,
        rgba(8, 18, 14, 0.55) 0%,
        rgba(8, 18, 14, 0.18) 28%,
        transparent 58%
      ),
      linear-gradient(
        to right,
        rgba(12, 28, 22, 0.14) 0%,
        transparent 55%
      );
    pointer-events: none;
  }.hero-fv__inner {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    text-align: left;
    gap: 0;
    width: 100%;
    max-width: min(960px, 60%);
    margin-right: auto;
    margin-left: 0;
    padding:
      clamp(88px, 10vh, 108px)
      var(--gutter)
      clamp(48px, 7vh, 72px);
  }.hero-fv__glass {
    width: 100%;
    max-width: 660px;
    padding: clamp(28px, 3.2vw, 40px) clamp(24px, 3vw, 36px);
    background: rgba(14, 28, 24, 0.42);
    backdrop-filter: blur(32px) saturate(150%);
    -webkit-backdrop-filter: blur(32px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .hero-fv__glass {
      background: rgba(12, 28, 22, 0.78);
    }
  }
  @media (max-width: 1300px) {
    .hero-fv__glass {
      background: transparent;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border-color: transparent;
      box-shadow: none;
    }
  }
  @keyframes hero-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.7); }
  }.hero-fv__title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    margin-top: 0;
  }.hero-fv__title-sub {
    display: block;
    font-family: var(--ff-sans);
    font-size: clamp(12px, 0.68rem + 0.4vw, 14px);
    font-weight: 700;
    line-height: var(--lh-snug);
    letter-spacing: 0.1em;
    color: var(--accent-light);
    margin-bottom: clamp(12px, 1.4vh, 16px);
  }.hero-fv__title-en {
    display: block;
    font-family: var(--ff-sans);
    font-size: clamp(1.55rem, 1.05rem + 1.8vw, 2.35rem);
    font-weight: 900;
    line-height: 1.42;
    letter-spacing: 0.02em;
    color: #fff;
    margin-bottom: clamp(14px, 1.8vh, 18px);
  }.hero-fv__title-en1, .hero-fv__title-en2, .hero-fv__title-en3 {
    display: block;
  }.hero-fv__title-en3 {
    white-space: nowrap;
  }.hero-fv__title-brand {
    font-style: normal;
    color: #9effc4;
    letter-spacing: 0.04em;
    font-size: 1.06em;
  }.hero-fv__title-main {
    display: block;
    font-family: var(--ff-sans);
    font-size: clamp(1rem, 0.85rem + 0.5vw, 1.18rem);
    font-weight: 700;
    line-height: 1.7;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.9);
  }.title-saga {
    color: #30453e;
  }.hero-fv__title-sub .title-saga, .hero-fv__title-main .title-saga {
    color: #30453e;
    text-shadow:
      0 1px 2px rgba(255, 255, 255, 0.35),
      0 0 18px rgba(255, 255, 255, 0.18);
  }.hero-fv__title-main em {
    font-style: normal;
    color: #fff;
    text-shadow:
      0 1px 2px rgba(0, 0, 0, 0.45),
      0 0 20px rgba(19, 203, 77, 0.78);
  }.hero-fv__cta .btn-primary {
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 54px;
    padding: 18px 38px;
    font-size: var(--fs-md);
    font-weight: 700;
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-base);
    border-radius: 8px;
    box-sizing: border-box;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
  }.hero-fv__cta .btn-primary {
    min-width: clamp(220px, 32vw, 280px);
  }.btn-primary.btn-primary--hero {
    background: var(--btn-bg);
    color: var(--btn-color);
    border: var(--btn-border-width) solid var(--btn-border);
  }.btn-primary.btn-primary--hero:hover {
    background: var(--btn-hover-bg);
    color: var(--btn-hover-color);
    border-color: var(--btn-hover-border);
  }.hero-fv__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(10px, 2vw, 16px) clamp(16px, 2.5vw, 24px);
    padding-top: clamp(14px, 1.8vh, 18px);
    margin-top: clamp(18px, 2.2vh, 22px);
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    width: 100%;
    max-width: 480px;
  }.hero-fv__stats > div {
    text-align: left;
    min-width: 0;
  }.hero-fv__stat-num {
    font-family: var(--ff-sans);
    font-size: clamp(1.2rem, 0.9rem + 0.85vw, 1.55rem);
    font-weight: 900;
    color: #fff;
    line-height: var(--lh-none);
  }.hero-fv__stat-num span {
    font-size: 0.78em;
    font-weight: 700;
    color: var(--accent-light);
  }.hero-fv__stat-label {
    font-size: clamp(11px, 0.62rem + 0.25vw, 12px);
    color: rgba(255, 255, 255, 0.72);
    margin-top: 5px;
    letter-spacing: 0.04em;
    line-height: 1.3;
  }/* Hero scroll indicator (center, overlaps concept section) */
  .hero-fv__scroll {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 10;
    transform: translate(-50%, 42%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    opacity: 1;
    transition: opacity 0.4s ease;
    pointer-events: auto;
  }.hero-fv__scroll.is-hidden {
    opacity: 0;
    pointer-events: none;
  }.hero-fv__scroll-text {
    display: block;
    font-family: var(--ff-display);
    font-size: var(--fs-sm);
    font-weight: 400;
    letter-spacing: var(--ls-wider);
    line-height: var(--lh-none);
    color: #fff;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    writing-mode: vertical-rl;
    text-orientation: mixed;
  }.hero-fv__scroll-line {
    display: block;
    width: 1px;
    flex-shrink: 0;
    align-self: center;
    height: clamp(88px, 14vh, 128px);
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
    animation: hero-scroll-line 2s ease infinite;
    transform-origin: top;
  }
  @keyframes hero-scroll-line {
    0% {
      transform: scaleY(0);
      transform-origin: top;
    }
    45% {
      transform: scaleY(1);
      transform-origin: top;
    }
    55% {
      transform: scaleY(1);
      transform-origin: bottom;
    }
    100% {
      transform: scaleY(0);
      transform-origin: bottom;
    }
  }

  @media (prefers-reduced-motion: reduce) {.hero-fv__scroll-line { animation: none; transform: scaleY(1); }
  }.concept-section, .worries-solution-band, section:not(.hero-fv), footer {
    position: relative;
    z-index: 1;
  }.btn-primary {
    background: var(--btn-bg);
    color: var(--btn-color);
    border: var(--btn-border-width) solid var(--btn-border);
    text-decoration: none;
    font-size: var(--fs-md);
    font-weight: 700;
    padding: 18px 38px;
    border-radius: 8px;
    letter-spacing: var(--ls-base);
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
  }.btn-primary:hover {
    background: var(--btn-hover-bg);
    color: var(--btn-hover-color);
    border-color: var(--btn-hover-border);
  }/* ===== CONCEPT (About) ===== */
  .concept-section {
    background: var(--surface-dark);
    padding: 240px var(--gutter);
  }.concept-section .section-head {
    max-width: 900px;
    margin: 0 auto 48px;
  }.concept-section .section-title {
    color: #fff;
    font-size: var(--fs-h2);
    font-weight: 900;
    line-height: var(--lh-normal);
    letter-spacing: var(--ls-normal);
    margin-bottom: 0;
  }.concept-section .highlight {
    color:#4ffe95;
    font-weight: 900;
  }.concept-br-sp { display: none; }.approach-br-sp { display: none; }.vs-title-br-sp { display: none; }.vs-foot-br-sp { display: none; }.flow-lead-br-sp { display: none; }.concept-section .section-eyebrow {
    color: var(--accent-light);
  }.concept-section .section-eyebrow::before {
    background: var(--accent-light);
  }.concept-geo-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 28px;
    font-size: clamp(17px, 1.5vw, 20px);
    line-height: var(--lh-loose);
    color: rgba(255, 255, 255, 0.92);
    font-weight: 400;
  }.concept-narrative {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    font-size: clamp(17px, 1.5vw, 20px);
    line-height: var(--lh-body);
    color: #fff;
  }.concept-thought {
    max-width: 800px;
    margin: 0 auto;
  }.concept-thought .concept-narrative {
    margin-bottom: 1.4em;
  }.concept-thought .concept-narrative:last-child {
    margin-bottom: 0;
  }.concept-thought-quote {
    text-align: center;
    margin: 0 auto 32px;
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 900;
    line-height: var(--lh-snug);
    color: #4ffe95;
    letter-spacing: 0.02em;
  }.concept-thought-lead {
    text-align: center;
    margin: 32px auto;
    font-size: clamp(18px, 1.6vw, 22px);
    line-height: var(--lh-loose);
    color: #fff;
    font-weight: 700;
  }.concept-thought-points {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(20px, 3vw, 32px);
    max-width: 860px;
    margin: 36px auto 40px;
  }.concept-thought-point {
    padding: clamp(24px, 3vw, 32px);
    border: 1px solid rgba(79, 254, 149, 0.25);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    text-align: left;
  }.concept-thought-point-title {
    font-size: clamp(17px, 1.5vw, 20px);
    font-weight: 900;
    line-height: var(--lh-snug);
    color: #4ffe95;
    margin: 0 0 12px;
  }.concept-thought-point-body {
    font-size: clamp(15px, 1.3vw, 17px);
    line-height: var(--lh-body);
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
  }/* ===== REGIONAL TRUST（地域連携・外部リンク） ===== */
  section.trust-links-section {
    background: var(--bg);
    padding: clamp(72px, 8vw, 112px) var(--gutter);
    border-top: 1px solid rgba(25, 71, 46, 0.1);
  }section.trust-links-section .container {
    max-width: var(--maxw-wide);
  }.trust-links-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
  }.trust-links-head {
    text-align: left;
    max-width: 420px;
    margin: 0;
  }.trust-links-eyebrow {
    display: inline-block;
    font-family: var(--ff-display);
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 10px;
  }.trust-links-title {
    font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
    font-weight: 900;
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-normal);
    color: var(--ink);
    margin-bottom: 12px;
  }.trust-links-lead {
    font-size: clamp(14px, 1.1vw, 16px);
    line-height: var(--lh-loose);
    color: var(--ink-2);
  }.trust-links-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 20px);
    margin: 0;
    padding: 0;
  }.trust-links-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100%;
    padding: clamp(20px, 2.4vw, 28px);
    background: #fff;
    border: 1px solid rgba(25, 71, 46, 0.14);
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(25, 71, 46, 0.06);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  }.trust-links-card:hover {
    border-color: rgba(31, 128, 80, 0.35);
    box-shadow: 0 16px 36px rgba(25, 71, 46, 0.1);
    transform: translateY(-2px);
  }.trust-links-card-source {
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: var(--ls-wide);
    color: var(--accent);
    margin-bottom: 8px;
  }.trust-links-card-title {
    font-size: clamp(0.95rem, 0.85rem + 0.35vw, 1.05rem);
    font-weight: 700;
    line-height: var(--lh-snug);
    color: var(--ink);
    margin-bottom: 6px;
  }.trust-links-card-date {
    font-size: var(--fs-micro);
    color: var(--ink-3);
    margin-bottom: 0;
  }.external-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    padding-top: 16px;
    color: var(--accent);
    font-size: var(--fs-sm);
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s;
  }.external-link:hover {
    color: var(--accent-2);
    text-decoration: underline;
    text-underline-offset: 2px;
  }.external-link__icon {
    font-size: 0.9em;
    line-height: 1;
  }.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }/* ===== WORRIES + SOLUTION FLOW band (shared check background) ===== */
  .worries-solution-band {
    position: relative;
    isolation: isolate;
    background: var(--bg);
    overflow-x: clip;
  }.worries-solution-band::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
      linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
    background-size: 46px 46px;
    background-position: 0 0;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 4%, #000 96%, transparent 100%);
            mask-image: linear-gradient(180deg, transparent 0, #000 4%, #000 96%, transparent 100%);
  }/* ===== WORRIES (お悩みビジュアル) ===== */
  .worries-section {
    position: relative;
    z-index: 1;
    background: transparent;
    padding: var(--section-y) var(--gutter);
    padding-bottom: clamp(28px, 4vw, 44px);
  }.worries-section .container {
    max-width: var(--maxw-wide);
    min-width: 0;
  }/* heading: small text with one emphasized word + underline rule */
  .worries-head {
    text-align: center;
    margin-bottom: clamp(40px, 5vw, 60px);
  }.worries-title {
    display: inline-block;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--border);
    font-size: clamp(26px, 3.2vw, 40px);
    font-weight: 700;
    color: var(--ink);
    letter-spacing: var(--ls-normal);
    line-height: var(--lh-heading);
  }.worries-em, .solution-flow-highlight {
    color: var(--ink);
    font-weight: 900;
    border-radius: 2px;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
  }/* two-column checkbox list */
  .worries-list-wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }.worries-list {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(40px, 6vw, 80px);
    row-gap: 0;
    background: #fff;
    padding: clamp(32px, 4vw, 56px) clamp(28px, 4vw, 48px);
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }.worry {
    position: relative;
    min-width: 0;
    padding: 22px 0 22px 44px;
    border-bottom: 1px solid var(--border);
    font-size: clamp(16px, 1.5vw, 18px);
    line-height: var(--lh-relaxed);
    color: var(--ink);
    text-wrap: pretty;
    word-break: auto-phrase;   /* 文節単位で折り返し、単語の途中で割れないように */
    line-break: strict;
    overflow-wrap: break-word; /* はみ出す長い英単語のみ折る */
  }.worry::before {
    content: '✓';
    position: absolute;
    left: 0;
    /* テキスト1行目の中心に合わせる: padding-top(22px) + 行高の半分(0.85em) − 箱の半分(12px) */
    top: calc(15px + 0.85em);
    width: 24px;
    height: 24px;
    border: 2px solid #000;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: var(--lh-none);
  }.worry b {
    color: var(--accent);
    font-weight: 700;
  }

  @media (min-width: 769px) {.worries-list {
      margin-inline: auto;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: clamp(36px, 4vw, 64px);
      padding: clamp(36px, 3.5vw, 52px) clamp(32px, 3vw, 48px);
    }
  }

  @media (min-width: 1240px) {.worries-list-wrap {
      width: fit-content;
      max-width: 100%;
      margin-inline: auto;
    }.worries-list {
      grid-template-columns: repeat(2, minmax(0, 580px));
    }.worry {
      white-space: nowrap;
      text-wrap: nowrap;
    }
  }/* ===== SOLUTION FLOW (仕組みづくり) ===== */
  section.solution-flow-section {
    position: relative;
    z-index: 1;
    background: transparent;
    padding: clamp(77px, 10.8vw, 130px) var(--gutter);
    padding-top: clamp(8px, 1.5vw, 16px);
  }.solution-flow-box {
    max-width: var(--maxw);
    margin: 0 auto;
  }.solution-flow-heading {
    text-align: center;
    font-size: clamp(26px, 3.2vw, 40px);
    font-weight: 700;
    line-height: var(--lh-relaxed);
    color: var(--ink);
    margin-bottom: clamp(58px, 7.2vw, 89px);
  }.solution-flow-br-sp { display: none; }.solution-flow {
    position: relative;
    list-style: none;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(12px, 2.4vw, 34px);
  }/* dashed rail connecting the circles */
  .solution-flow::before {
    content: "";
    position: absolute;
    top: clamp(70px, 8.4vw, 91px);
    left: 9%;
    right: 9%;
    height: 2px;
    z-index: 0;
    background: repeating-linear-gradient(
      90deg,
      rgba(0,0,0,0.20) 0 9px,
      transparent 9px 18px
    );
  }.solution-flow-step {
    position: relative;
    z-index: 1;
    flex: 0 1 221px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 19px;
  }.solution-flow-icon {
    position: relative;
    width: clamp(139px, 16.8vw, 182px);
    height: clamp(139px, 16.8vw, 182px);
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--border);
    box-shadow:
      0 14px 30px rgba(0,0,0,0.10),
      0 0 0 7px rgba(0,0,0,0.03);
    transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
  }.solution-flow-step:hover .solution-flow-icon {
    transform: translateY(-7px);
    box-shadow:
      0 24px 44px rgba(0,0,0,0.16),
      0 0 0 7px rgba(27,94,63,0.12);
  }.solution-flow-icon img {
    width: clamp(60px, 7.2vw, 79px);
    height: clamp(60px, 7.2vw, 79px);
    object-fit: contain;
    display: block;
  }.solution-flow-icon--large img {
    width: clamp(77px, 9.12vw, 101px);
    height: clamp(77px, 9.12vw, 101px);
  }/* step number badge */
  .solution-flow-num {
    position: absolute;
    top: -8px;
    left: -8px;
    min-width: 48px;
    height: 48px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ff-display);
    font-size: var(--fs-lg);
    font-weight: 700;
    letter-spacing: var(--ls-normal);
    color: #fff;
    background: var(--accent);
    box-shadow: 0 6px 16px rgba(31, 128, 80, 0.28);
  }.solution-flow-label {
    font-size: clamp(16px, 1.68vw, 18px);
    font-weight: 700;
    color: var(--ink);
    line-height: var(--lh-heading);
  }.solution-flow-desc {
    position: relative;
    font-size: clamp(15px, 1.56vw, 17px);
    font-weight: 400;
    color: var(--ink-2);
    line-height: var(--lh-heading);
    padding-top: 14px;
  }/* tiny tick above the outcome label */
  .solution-flow-desc::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--accent);
  }.our-strengths-section {
    background: var(--bg);
    padding: 240px var(--gutter);
    overflow-x: hidden;
  }.our-strengths-badge {
    display: block;
    width: fit-content;
    margin: 0 auto clamp(36px, 7vw, 80px);
    color: var(--ink);
    font-size: var(--fs-h2);
    font-weight: 900;
    letter-spacing: var(--ls-base);
  }.strength-points-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: clamp(48px, 6vw, 72px);
    min-width: 0;
    padding-top: 32px;
  }.strength-point-card {
    border: 2px solid #19472e;
    border-radius: 0;
    background: transparent;
    padding: 58px 22px 28px;
    text-align: center;
    min-width: 0;
    position: relative;
    isolation: isolate;
  }/* offset second line, shifted to the bottom-right */
  .strength-point-card::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: -10px;
    bottom: -10px;
    border: 2px solid var(--accent-2);
    z-index: -1;
    pointer-events: none;
  }.strength-point-num {
    display: inline-block;
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    background:#333333;
    color: #fff;
    font-family: var(--ff-display);
    font-size: clamp(12px, 1.6vw, 16px);
    font-weight: 700;
    letter-spacing: var(--ls-wide);
    border-radius: 4px;
    padding: 5px 60px;
    box-sizing: border-box;
    white-space: nowrap;
  }.strength-point-title {
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--ink);
    margin:10px 0;
    line-height: var(--lh-normal);
    white-space: nowrap;
  }.strength-point-illust {
    height: 156px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
  }.strength-point-illust img {
    width: 130px;
    height: 130px;
    object-fit: contain;
    display: block;
    transition: filter 0.35s ease;
  }.strength-point-illust:hover img {
    filter: brightness(0) saturate(100%) invert(36%) sepia(65%) saturate(637%) hue-rotate(115deg) brightness(92%) contrast(89%);
  }.strength-point-line {
    width: 48px;
    height: 2px;
    background: var(--border);
    margin: 0 auto 18px;
  }.strength-point-body {
    font-size: var(--fs-sm);
    color: var(--ink-2);
    line-height: var(--lh-loose);
    text-align: left;
  }/* ===== SERVICES (6-card grid) ===== */
  .services-section {
    background-color: #f8f8f8;
    background-image: url('../img/bg-paper.png');
    background-image: image-set(
      url('../img/bg-paper.webp') type('image/webp'),
      url('../img/bg-paper.png') type('image/png')
    );
    background-repeat: repeat;
    background-position: 0 0;
    background-size: auto;
    padding: 240px var(--gutter);
  }.services-head {
    text-align: left;
    margin-bottom: clamp(40px, 5vw, 64px);
  }.services-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px 20px;
    margin-bottom: 18px;
  }.services-eyebrow {
    font-family: var(--ff-fervojo);
    font-size: clamp(58px, 8.6vw, 94px);
    font-weight: 700;
    letter-spacing: var(--ls-wide);
    line-height: var(--lh-none);
    color: var(--ink);
    text-transform: capitalize;
  }.services-title {
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 700;
    line-height: var(--lh-normal);
    color: var(--ink-2);
  }.services-lead {
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    color: var(--ink-2);
    max-width: 640px;
  }.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(32px, 4vw, 56px) clamp(24px, 3vw, 40px);
  }.service-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    gap: clamp(14px, 2vw, 20px);
    align-content: start;
    text-align: center;
    padding: 0;
  }.service-option {
    min-width: 0;
  }.service-toggle {
    display: none;
  }.service-content {
    max-height: none;
    overflow: visible;
  }.service-icon {
    margin: 0 auto;
    height: clamp(140px, 16vw, 220px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }.service-icon img {
    width: clamp(140px, 16vw, 220px);
    height: auto;
    max-height: 100%;
    object-fit: contain;
    display: block;
    margin: 0 auto;
  }.service-title {
    display: block;
    font-size: var(--fs-h3);
    font-weight: 700;
    color: var(--ink);
    margin: 0;
    line-height: var(--lh-normal);
    align-self: start;
    cursor: default;
  }.service-title::before, .service-title::after {
    display: none;
  }.service-body {
    font-size: var(--fs-sm);
    color: var(--ink-2);
    line-height: var(--lh-body);
    text-align: left;
    margin: 0;
    align-self: start;
  }
  @media (min-width: 769px) {.service-option {
      display: contents;
      pointer-events: none;
    }.service-title {
      pointer-events: none;
    }
  }/* ===== CASES (Works slider) ===== */
  .cases-section {
    padding: 0;
    background-color: #ededed;
    background-image: url('../img/cases-bg.jpg');
    background-image: image-set(
      url('../img/cases-bg.webp') type('image/webp'),
      url('../img/cases-bg.jpg') type('image/jpeg')
    );
    background-repeat: repeat;
    background-position: 0 0;
    background-size: auto;
    background-attachment: fixed;
    overflow: hidden;
  }.cases-inner {
    max-width: calc(var(--maxw-wide) + 2 * var(--gutter));
    margin: 0 auto;
    padding: 0 var(--gutter) 0;
  }.cases-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(24px, 4vw, 48px);
    margin-bottom: clamp(36px, 5vw, 56px);
  }.cases-head-text {
    flex: 1;
    min-width: 0;
  }.cases-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px 20px;
    margin-bottom: 18px;
  }.cases-eyebrow {
    font-family: var(--ff-fervojo);
    font-size: clamp(58px, 8.6vw, 94px);
    font-weight: 700;
    letter-spacing: var(--ls-wide);
    line-height: var(--lh-none);
    color: var(--ink);
    text-transform: capitalize;
  }.cases-title {
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 700;
    line-height: var(--lh-normal);
    color: var(--ink-2);
  }.cases-lead {
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    color: var(--ink-2);
    max-width: 640px;
  }.cases-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
  }.cases-nav-btn {
    width: 48px;
    height: 48px;
    border: 1px solid var(--btn-border);
    background: #fff;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
  }.cases-nav-btn svg {
    width: 22px;
    height: 22px;
    display: block;
  }.cases-nav-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }.cases-nav-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    background: #fff;
    color: var(--ink);
  }.cases-pagination {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 8px;
    font-family: var(--ff-display);
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--ink-3);
    letter-spacing: var(--ls-wide);
  }.cases-pagination-bar {
    display: block;
    width: 88px;
    height: 3px;
    background: #d8d8d8;
    position: relative;
    overflow: hidden;
  }.cases-pagination-fill {
    display: block;
    height: 100%;
    width: 0;
    background: var(--accent);
    transition: width 5s linear;
  }.cases-slider-wrap {
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }.cases-slider {
    --cases-gap: 12px;
    --cases-slide-w: calc((100vw - var(--cases-gap) * 2) / 3);
    display: flex;
    align-items: center;
    gap: var(--cases-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-left: calc(50vw - var(--cases-slide-w) / 2);
    padding-right: calc(50vw - var(--cases-slide-w) / 2);
    padding-bottom: 8px;
  }.cases-slider::-webkit-scrollbar { display: none; }.cases-slide {
    flex: 0 0 var(--cases-slide-w);
    scroll-snap-align: center;
  }.cases-slide-card {
    width: 100%;
    height: 100%;
    padding: 0;
    border: none;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.07);
    overflow: hidden;
    transform: scale(0.92);
    transform-origin: center center;
    transition: transform .45s ease, box-shadow .45s ease;
  }.cases-slide.is-active .cases-slide-card {
    transform: scale(1);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.12);
  }.cases-slide.is-active .cases-slide-card:hover {
    transform: scale(1.02);
  }.cases-slide-card:focus-visible {
    outline: 3px solid var(--ink-3);
    outline-offset: 3px;
  }.cases-slide-thumb {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #e8e8e8;
  }.cases-slide-thumb img, .cases-modal-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
  }.cases-slide-title {
    padding: 22px 24px 0;
    font-size: clamp(16px, 1.6vw, 18px);
    font-weight: 700;
    line-height: var(--lh-normal);
    color: var(--ink);
  }.cases-slide-text {
    padding: 14px 24px 0;
    font-size: var(--fs-sm);
    line-height: var(--lh-loose);
    color: var(--ink-2);
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }.cases-slide-tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 20px 24px 24px;
  }.cases-slide-tags li {
    font-size: var(--fs-micro);
    line-height: var(--lh-heading);
    color: var(--ink-3);
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: 5px 12px;
    background: #fff;
  }.cases-cta {
    text-align: center;
    margin-top: clamp(40px, 5vw, 56px);
  }/* Cases modal */
  .cases-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(16px, 4vw, 32px);
  }.cases-modal[hidden] { display: none; }.cases-modal.is-open { display: flex; }.cases-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
  }.cases-modal-panel {
    position: relative;
    z-index: 1;
    width: min(760px, 100%);
    max-height: min(90vh, 900px);
    background: #fff;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }.cases-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 2;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border);
    border-radius: 50%;
    background: #fff;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .2s, color .2s;
  }.cases-modal-close svg {
    width: 18px;
    height: 18px;
    display: block;
  }.cases-modal-close:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }.cases-modal-body {
    overflow-y: auto;
    padding: clamp(24px, 4vw, 36px);
  }.cases-modal-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-bottom: 12px;
    font-size: var(--fs-sm);
    color: var(--ink-3);
  }.cases-modal-industry { font-weight: 700; color: var(--ink); }.cases-modal-location::before { content: '📍'; margin-right: 4px; }.cases-modal-title {
    font-size: clamp(22px, 3vw, 28px);
    font-weight: 900;
    line-height: var(--lh-heading);
    color: var(--ink);
    margin-bottom: 20px;
    padding-right: 44px;
  }.cases-modal-thumb {
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
    background: #e8e8e8;
  }.cases-modal-lead {
    font-size: var(--fs-lead);
    line-height: var(--lh-loose);
    color: var(--ink-2);
    margin-bottom: 24px;
  }.cases-modal-ba {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
  }.cases-modal-ba-box {
    background: var(--bg-soft);
    border-radius: 8px;
    padding: 18px;
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    color: var(--ink-2);
  }.cases-modal-ba-box--after {
    background: var(--accent-soft);
  }.cases-modal-ba-label {
    font-family: var(--ff-display);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: var(--ls-wide);
    margin-bottom: 10px;
    color: var(--ink-3);
  }.cases-modal-ba-box--after .cases-modal-ba-label { color: var(--accent); }.cases-modal-result {
    background: var(--ink);
    border-radius: 8px;
    padding: 16px 20px;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: #fff;
    text-align: center;
    margin-bottom: 20px;
  }.cases-modal-result span { color: var(--ink); font-weight: 700; }.cases-modal-tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }.cases-modal-tags li {
    font-size: var(--fs-micro);
    line-height: var(--lh-heading);
    color: var(--ink-3);
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: 5px 12px;
    background: #fff;
  }body.cases-modal-open { overflow: hidden; }/* ===========================================================
     PRICING — 2-column price cards (reference layout)
     =========================================================== */
  .pricing-section {
    background: #d7d7d7;
    --price-ink: #333333;
    --price-sub: #666666;
    --price-line: #eeeeee;
    --price-accent: var(--accent);
    --price-accent-hover: var(--accent-2);
  }.price-head {
    margin-bottom: clamp(36px, 5vw, 56px);
  }.price-head-text {
    flex: 1;
    min-width: 0;
    padding-bottom: 80px;
  }.price-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px 20px;
    margin-bottom: 18px;
  }.price-eyebrow {
    font-family: var(--ff-fervojo);
    font-size: clamp(58px, 8.6vw, 94px);
    font-weight: 700;
    letter-spacing: var(--ls-wide);
    line-height: var(--lh-none);
    color: var(--ink);
    text-transform: capitalize;
  }.price-title {
    font-size: clamp(20px, 2.2vw, 26px);
    font-weight: 700;
    line-height: var(--lh-normal);
    color: var(--ink-2);
  }.price-intro {
    font-size: var(--fs-lead);
    line-height: var(--lh-body);
    color: var(--ink-2);
    max-width: 640px;
    text-wrap: pretty;
  }.price-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(50px, 2.8vw, 32px);
    max-width: 1100px;
    margin: 0 auto;
  }.price-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: clamp(36px, 4vw, 48px) clamp(24px, 3vw, 36px) clamp(28px, 3.2vw, 36px);
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  }.price-badge {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 132px;
    padding: 12px 22px;
    border: var(--btn-border-width) solid var(--accent);
    border-radius: var(--radius);
    background: var(--accent);
    color: #fff;
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: var(--ls-base);
    white-space: nowrap;
  }.price-card-lead {
    margin: 8px 0 clamp(20px, 2.4vw, 28px);
    font-size: clamp(14px, 1.1vw, 15px);
    line-height: var(--lh-loose);
    color: var(--price-sub);
    text-wrap: pretty;
  }.price-specs {
    margin: 0 0 clamp(24px, 3vw, 32px);
  }.price-spec-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--price-line);
    font-size: clamp(14px, 1.05vw, 15px);
    line-height: var(--lh-normal);
  }.price-spec-row dt {
    flex-shrink: 0;
    min-width: 5.5em;
    font-weight: 700;
    color: var(--price-ink);
  }.price-spec-row dd {
    margin: 0;
    text-align: right;
    color: var(--price-sub);
    text-wrap: pretty;
  }.price-amount {
    margin-top: auto;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding-top: 8px;
  }.price-amount-label {
    font-size: clamp(14px, 1.1vw, 15px);
    font-weight: 700;
    color: var(--price-ink);
  }.price-amount-value {
    font-family: var(--ff-display);
    font-size: clamp(26px, 3.2vw, 34px);
    font-weight: 700;
    line-height: var(--lh-tight);
    color: var(--price-ink);
    letter-spacing: var(--ls-snug);
    font-variant-numeric: tabular-nums;
  }.price-foot {
    max-width: 720px;
    margin: clamp(32px, 4vw, 44px) auto 0;
    font-size: clamp(14px, 1.1vw, 15px);
    line-height: var(--lh-loose);
    color: var(--price-sub);
    text-align: center;
    text-wrap: pretty;
  }.price-cta-wrap {
    display: flex;
    justify-content: center;
    margin-top: clamp(24px, 3vw, 32px);
  }/* ===== FLOW — slanted panels, white → green, text #333 ===== */
  .flow-section { background: #fff; }.flow-section .container { max-width: var(--maxw-wide); }
  @media (min-width: 769px) {.flow-section .section-lead {
      white-space: nowrap;
    }
  }.flow-steps {
    display: flex;
    align-items: stretch;
    --flow-slant: clamp(16px, 2vw, 28px);
    overflow: hidden;
    border: 1px solid #e2e8e4;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  }.flow-step {
    position: relative;
    flex: 1;
    min-width: 0;
    min-height: clamp(160px, 17vw, 200px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding:
      clamp(20px, 2.4vw, 28px)
      clamp(22px, 2.4vw, 32px)
      clamp(20px, 2.4vw, 28px)
      calc(var(--flow-slant) + clamp(12px, 1.4vw, 18px));
    background: var(--flow-bg);
    color: #333;
    clip-path: polygon(
      var(--flow-slant) 0,
      100% 0,
      calc(100% - var(--flow-slant)) 100%,
      0 100%
    );
    margin-left: calc(var(--flow-slant) * -0.78);
    z-index: var(--flow-z, 1);
  }.flow-step:first-child {
    margin-left: 0;
    padding-left: clamp(20px, 2.4vw, 28px);
    clip-path: polygon(
      0 0,
      100% 0,
      calc(100% - var(--flow-slant)) 100%,
      0 100%
    );
  }.flow-step:last-child {
    padding-right: clamp(24px, 2.8vw, 36px);
    clip-path: polygon(
      var(--flow-slant) 0,
      100% 0,
      100% 100%,
      0 100%
    );
  }.flow-step:nth-child(1) { --flow-bg: #ffffff; --flow-z: 1; }.flow-step:nth-child(2) { --flow-bg: #f8fbf9; --flow-z: 2; }.flow-step:nth-child(3) { --flow-bg: #f0f7f3; --flow-z: 3; }.flow-step:nth-child(4) { --flow-bg: #e6f1eb; --flow-z: 4; }.flow-step:nth-child(5) { --flow-bg: #d9e9df; --flow-z: 5; }.flow-label {
    font-family: var(--ff-display);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: var(--ls-wider);
    color: #333;
    margin: 0 0 10px;
    line-height: var(--lh-none);
  }.flow-num {
    font-family: var(--ff-display);
    font-size: clamp(30px, 3.6vw, 44px);
    font-weight: 700;
    line-height: var(--lh-none);
    letter-spacing: var(--ls-tight);
    color: #333;
    font-variant-numeric: tabular-nums;
    margin-bottom: 12px;
  }.flow-title {
    font-size: clamp(13px, 1.15vw, 15px);
    font-weight: 700;
    line-height: var(--lh-normal);
    color: #333;
    margin: 0 0 12px;
    text-wrap: balance;
  }.flow-body {
    font-size: clamp(11px, 0.95vw, 12.5px);
    line-height: var(--lh-relaxed);
    color: #333;
    text-wrap: pretty;
    margin: 0;
  }.flow-pc-br { display: inline; }.flow-note {
    margin-top: clamp(40px, 5vw, 60px);
    border-left: 2px solid var(--accent);
    padding: 4px 0 4px clamp(18px, 2vw, 24px);
  }.flow-note-head {
    font-size: clamp(15px, 1.4vw, 17px);
    font-weight: 700;
    color: var(--ink);
    line-height: var(--lh-normal);
    margin: 0;
    letter-spacing: var(--ls-normal);
  }.flow-note-areas {
    margin: 10px 0;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--accent);
    line-height: var(--lh-loose);
  }.flow-note-areas span:not(:last-child)::after {
    content: "／";
    margin: 0 0.4em;
    color: var(--border);
    font-weight: 400;
  }.flow-note-sub {
    font-size: var(--fs-sm);
    color: var(--ink-2);
    line-height: var(--lh-relaxed);
    margin: 0;
  }/* ===== TESTIMONIALS ===== */
  .testimonials-section {
    background:#fff;
  }.testimonials-section .container {
    max-width: var(--maxw-wide);
  }.testimonial-slider {
    display: flex;
    align-items: center;
    gap: clamp(6px, 1.5vw, 16px);
    max-width: 1080px;
    margin: 0 auto;
  }/* Match the CASES slider nav buttons (.cases-nav-btn). */
  .testimonial-nav {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid var(--btn-border);
    background: #fff;
    color: var(--ink);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, color .2s, border-color .2s;
  }.testimonial-nav:hover:not(:disabled) {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }.testimonial-nav:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    background: #fff;
    color: var(--ink);
  }.testimonial-nav svg {
    width: 22px;
    height: 22px;
    display: block;
  }.testimonial-track-wrap {
    flex: 1;
    min-width: 0;
    overflow: hidden;
  }.testimonial-track {
    display: flex;
    align-items: stretch;
    gap: 20px;
    transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
    will-change: transform;
  }.testimonial-item.reveal, .testimonial-item.reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }.testimonial-item {
    flex: 0 0 calc((100% - 40px) / 3);
    min-width: 0;
  }.testimonial-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 248px;
    background: #fff;
    border: 1px solid #a8a8a8;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    padding: 22px 22px 18px;
    box-sizing: border-box;
  }.testimonial-card-head {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-bottom: 14px;
  }.testimonial-stars {
    font-size: var(--fs-sm);
    letter-spacing: var(--ls-wide);
    line-height: var(--lh-none);
    color: #f5a623;
  }.testimonial-text {
    margin: 0;
    flex: 1;
    min-height: calc(14px * 1.85 * 5);
    font-size: var(--fs-sm);
    line-height: var(--lh-loose);
    color: #2b2b2b;
  }.testimonial-author {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
  }.testimonial-avatar {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #e6e6e6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-sm);
    font-weight: 700;
    color: #666;
  }.testimonial-id {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }.testimonial-name {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: #222;
    line-height: var(--lh-snug);
  }.testimonial-date {
    font-size: var(--fs-eyebrow);
    color: #aaa;
    line-height: var(--lh-snug);
  }/* On wide PC all reviews fit (3-up), so the arrows aren't needed.
     Keep them for tablet/SP where the track scrolls. */
  @media (min-width: 1025px) {
    .testimonial-nav { display: none; }
  }/* Inline link that jumps to the contact section (e.g. 無料相談 in FAQ). */
  .contact-link {
    color: var(--accent);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    transition: color 0.2s;
  }.contact-link:hover { color: var(--accent-2); }.testimonial-pagination {
    display: none;
  }
  @media (max-width: 1024px) {.testimonial-item {
      flex: 0 0 calc((100% - 20px) / 2);
    }
  }
  @media (max-width: 640px) {.testimonial-slider {
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      row-gap: 18px;
      column-gap: 14px;
    }.testimonial-track-wrap {
      order: 1;
      flex: 0 0 100%;
      width: 100%;
    }.testimonial-track {
      gap: 0;
      width: 100%;
    }.testimonial-item {
      flex: 0 0 100%;
      width: 100%;
      max-width: 100%;
    }.testimonial-nav--prev { order: 2; }.testimonial-pagination { order: 3; }.testimonial-nav--next { order: 4; }.testimonial-pagination {
      display: flex;
      align-items: center;
      justify-content: center;
    }.testimonial-counter {
      font-family: var(--ff-display);
      font-size: var(--fs-sm);
      font-weight: 700;
      letter-spacing: var(--ls-wide);
      color: var(--ink-3);
      text-align: center;
    }
  }
  @media (prefers-reduced-motion: reduce) {.testimonial-track { transition: none; }
  }/* ===== FAQ — accordion cards (career-log style) ===== */
  .faq-section {
    background: var(--bg-soft);
    padding-top: 240px;
  }.faq-section .container { position: relative; }.faq-section-head {
    text-align: center;
    margin: 0 auto clamp(36px, 5vw, 56px);
  }.faq-section-title {
    position: relative;
    font-family: var(--ff-sans);
    font-size: clamp(28px, 3.8vw, 42px);
    font-weight: 900;
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-base);
    color: var(--ink);
    margin-bottom: 16px;
  }.faq-section-title span { color: var(--accent); font-weight: 900; }.faq-section-lead {
    font-size: var(--fs-lead);
    color: var(--ink-2);
    line-height: var(--lh-loose);
  }.faq {
    position: relative;
    margin-top: clamp(24px, 4vw, 40px);
  }.faq-list { max-width: 100%; }.faq-item {
    max-width: 100%;
    margin-bottom: 20px;
    border: 1px solid #d6d6d6;
    border-radius: 10px;
    background: #fff;
    box-shadow: 8px 8px 13px rgba(0, 0, 0, 0.13);
    overflow: hidden;
  }.faq-option { position: relative; }.faq-toggle { display: none; }.faq-title, .faq-content {
    backface-visibility: hidden;
    transform: translateZ(0);
    transition: 0.3s;
  }.faq-title {
    display: table;
    width: calc(100% - 56px);
    padding: 16px 0 16px 16px;
    cursor: pointer;
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: var(--ls-base);
    color: var(--ink);
    margin: 0;
  }.faq-title::before, .faq-title::after {
    content: '';
    position: absolute;
    right: -30px;
    top: 50%;
    width: 2px;
    height: 0.95em;
    margin-top: -0.475em;
    background-color: var(--accent);
    transition: 0.3s;
  }.faq-title::after { transform: rotate(90deg); }.faq-q {
    display: table-cell;
    width: 36px;
    font-family: var(--ff-display);
    font-size: 24px;
    font-weight: 700;
    line-height: 0.5;
    color: var(--accent);
    vertical-align: middle;
  }.faq-q-text {
    display: table-cell;
    padding-left: 6px;
    font-size: var(--fs-md);
    font-weight: 700;
    line-height: var(--lh-normal);
    vertical-align: middle;
    text-wrap: pretty;
    word-break: normal;        /* 文節区切り(auto-phrase)をやめ、自然な折り返しに */
    line-break: auto;
    overflow-wrap: break-word;
  }.faq-content {
    max-height: 0;
    overflow: hidden;
    background: var(--accent-soft);
    border-top: 1px solid rgba(31, 128, 80, 0.12);
  }.faq-a {
    display: table;
    margin: 0;
    padding: 16px 16px 20px 16px;
    font-size: var(--fs-sm);
    font-weight: 400;
    letter-spacing: var(--ls-base);
    color: var(--ink);
  }.faq-a-label {
    display: table-cell;
    width: 36px;
    font-family: var(--ff-display);
    font-size: 24px;
    font-weight: 700;
    line-height: var(--lh-tight);
    color: #3d5a6e;
    vertical-align: middle;
  }.faq-a-text {
    display: table-cell;
    padding-left: 6px;
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    vertical-align: middle;
    color: var(--ink);
    text-wrap: pretty;
    word-break: normal;        /* 文節区切り(auto-phrase)をやめ、自然な折り返しに */
    line-break: auto;
    overflow-wrap: break-word;
  }.faq-toggle:checked + .faq-title + .faq-content {
    max-height: 500px;
    transition: max-height 1.2s ease;
  }.faq-toggle:checked + .faq-title::before {
    transform: rotate(90deg);
  }
  @media (min-width: 769px) {.faq-item {
      position: relative;
      z-index: 2;
      margin-bottom: 28px;
    }.faq-title {
      width: calc(100% - 72px);
      padding: 28px 0 28px 32px;
    }.faq-title::before, .faq-title::after {
      right: 14px;
      height: 1.1em;
      margin-top: -0.55em;
    }.faq-q {
      width: 50px;
      font-size: 30px;
    }.faq-q-text {
      font-size: var(--fs-lg);
      line-height: var(--lh-normal);
      padding-left: 8px;
    }.faq-a {
      padding: 20px 24px 28px 32px;
    }.faq-a-label {
      width: 50px;
      font-size: 30px;
      vertical-align: middle;
    }.faq-a-text {
      font-size: var(--fs-md);
      line-height: var(--lh-normal);
      padding-left: 8px;
    }
  }
  @media (prefers-reduced-motion: reduce) {.faq-title, .faq-content, .faq-title::before, .faq-title::after { transition: none; }.faq-toggle:checked + .faq-title + .faq-content { transition: none; }
  }/* ===== CONTACT (simple card CTA) ===== */
  .contact-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: var(--section-y) var(--gutter);
  }.contact-section::before {
    content: "";
    position: absolute;
    inset: -12px;
    z-index: 0;
    background: url('../img/contact-bg.png') center / cover no-repeat;
    background-image: image-set(
      url('../img/contact-bg.webp') type('image/webp'),
      url('../img/contact-bg.png') type('image/png')
    );
    filter: blur(10px);
    transform: scale(1.06);
    pointer-events: none;
  }.contact-section::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(0, 0, 0, 0.58);
    pointer-events: none;
  }.contact-section .container {
    position: relative;
    z-index: 1;
    max-width: min(1130px, 100%);
  }.contact-card {
    position: relative;
    padding: clamp(20px, 3vw, 32px);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.38);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }.contact-card-panel {
    position: relative;
    z-index: 1;
    background:
      linear-gradient(
        165deg,
        rgba(18, 32, 30, 0.88) 0%,
        rgba(10, 16, 20, 0.92) 100%
      );
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: clamp(48px, 7vw, 72px) clamp(24px, 5vw, 56px) clamp(40px, 6vw, 56px);
    text-align: center;
  }.contact-card-title {
    font-family: var(--ff-sans);
    font-size: clamp(28px, 4vw, 40px);
    font-weight: 900;
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-base);
    color: #fff;
    margin-bottom: 8px;
  }.contact-card-lead {
    font-size: clamp(14px, 1.8vw, 16px);
    line-height: var(--lh-body);
    color: rgba(255, 255, 255, 0.78);
    max-width: 520px;
    margin: 0 auto clamp(32px, 4vw, 44px);
  }.contact-card-btn {
    position: relative;
    display: block;
    width: min(520px, 100%);
    margin: 0 auto;
    padding: clamp(16px, 2.4vw, 20px) clamp(56px, 8vw, 72px) clamp(16px, 2.4vw, 20px) clamp(20px, 3vw, 28px);
    background: transparent;
    color: #fff;
    border: var(--btn-border-width) solid rgba(255, 255, 255, 0.85);
    border-radius: 8px;
    text-decoration: none;
    font-size: clamp(14px, 1.8vw, 16px);
    font-weight: 700;
    letter-spacing: var(--ls-base);
    text-align: center;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  }.contact-card-btn:hover {
    background: var(--btn-hover-bg);
    color: var(--btn-hover-color);
    border-color: var(--btn-hover-border);
  }.contact-card-btn-end {
    position: absolute;
    top: 50%;
    right: clamp(16px, 2.4vw, 24px);
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 14px;
  }.contact-card-btn-sep {
    width: 0;
    height: 1.2em;
    border-left: 2px dotted rgba(255, 255, 255, 0.45);
  }.contact-card-btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
  }/* ===== FOOTER (multi-column dark) ===== */
  footer { background: #141414; color: rgba(255,255,255,0.55); padding: clamp(48px, 6vw, 64px) var(--gutter) 32px; font-size: var(--fs-sm); }.footer-grid {
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 48px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }.footer-logo { font-family: var(--ff-display); font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 16px; }.footer-logo span { color: var(--accent-light); }.footer-about { line-height: var(--lh-loose); color: rgba(255,255,255,0.5); font-size: var(--fs-sm); }.footer-col-title { font-size: var(--fs-eyebrow); font-weight: 700; color: #fff; letter-spacing: var(--ls-wide); margin-bottom: 16px; text-transform: uppercase; font-family: var(--ff-display); }.footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }.footer-links a { color: rgba(255,255,255,0.55); text-decoration: none; transition: color 0.2s; font-size: var(--fs-sm); }.footer-links a:hover { color: var(--accent-light); }.footer-bottom { max-width: 1080px; margin: 32px auto 0; text-align: center; font-size: var(--fs-eyebrow); color: rgba(255,255,255,0.4); line-height: var(--lh-loose); }

  @media (max-height: 750px) {.btn-primary { padding: 14px 28px; font-size: var(--fs-sm); }.hero-fv__cta .btn-primary {
      min-height: 48px;
      padding: 14px 28px;
      font-size: var(--fs-sm);
    }.hero-fv__cta .btn-primary {
      min-width: clamp(200px, 42vw, 240px);
    }
  }/* ===== RESPONSIVE ===== */
  @media (max-width: 900px) {
    .nav-toggle { display: inline-flex; }
    .header-cta {
      padding: 10px 14px;
      font-size: var(--fs-eyebrow);
    }
    .nav-menu {
      display: none;
      position: fixed;
      inset: 72px 0 0 0;
      z-index: 210;
      width: 100%;
      height: calc(100dvh - 72px);
      margin: 0;
      padding: 8px var(--gutter) 32px;
      box-sizing: border-box;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: 0;
      background: rgba(255, 255, 255, 0.98);
      backdrop-filter: blur(12px) saturate(140%);
      -webkit-backdrop-filter: blur(12px) saturate(140%);
      border-top: 1px solid rgba(27, 38, 34, 0.08);
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    body.is-nav-open .nav-menu { display: flex; }
    body.is-nav-open { overflow: hidden; }
    .nav-menu a {
      padding: 18px 4px;
      font-size: var(--fs-md);
      border-bottom: 1px solid rgba(27, 38, 34, 0.08);
    }
    .nav-menu a::after { display: none; }
    .nav-menu a:last-child { border-bottom: none; }
    .solution-flow {
      flex-wrap: wrap;
      gap: 43px 14px;
    }
    .solution-flow::before { display: none; }
    .solution-flow-arrow { display: none; }
    .solution-flow-step { flex: 1 1 calc(50% - 12px); }
    .services-grid { grid-template-columns: 1fr 1fr; }
    .strength-grid { grid-template-columns: 1fr 1fr; }
    .strength-points-grid {
      grid-template-columns: 1fr;
      max-width: min(380px, 90vw);
      margin-left: auto;
      margin-right: auto;
      gap: 56px;
    }
    .approach-grid { grid-template-columns: 1fr; }
    .price-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .flow-steps {
      position: relative;
      flex-direction: column;
      gap: 0;
      overflow: visible;
      border: none;
      box-shadow: none;
    }
    /* 縦の破線でステップをつなぐ */
    .flow-steps::before {
      content: "";
      position: absolute;
      top: 28px;
      bottom: 28px;
      left: 27px;
      width: 2px;
      z-index: 0;
      background: repeating-linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.20) 0 9px,
        transparent 9px 18px
      );
    }
    .flow-step {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: 56px 1fr;
      grid-template-rows: auto auto auto;
      column-gap: 16px;
      row-gap: 4px;
      align-items: start;
      margin-left: 0;
      min-height: auto;
      padding: 0 0 32px;
      background: transparent;
      border-bottom: none;
    }
    .flow-step:last-child {
      padding-bottom: 0;
    }
    /* SPでは斜めの切り欠きを解除 */
    .flow-step,
    .flow-step:first-child,
    .flow-step:last-child {
      clip-path: none;
      padding-left: 0;
      padding-right: 0;
    }
    .flow-step:not(:last-child)::after {
      display: none;
    }
    .flow-label {
      grid-column: 2;
      grid-row: 1;
      margin: 0;
      font-size: 10px;
      letter-spacing: var(--ls-wider);
    }
    .flow-num {
      grid-column: 1;
      grid-row: 1 / 4;
      align-self: start;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 56px;
      height: 56px;
      margin: 0;
      border-radius: 50%;
      background: #fff;
      border: 2px solid var(--accent);
      font-size: 18px;
      box-shadow: 0 0 0 4px #fff;
    }
    .flow-title {
      grid-column: 2;
      grid-row: 2;
      margin: 0 0 6px;
      font-size: var(--fs-md);
    }
    .flow-body {
      grid-column: 2;
      grid-row: 3;
      font-size: var(--fs-xs);
    }
    .flow-pc-br { display: none; }
  }
  @media (max-width: 900px) {
    .trust-links-inner {
      grid-template-columns: 1fr;
      gap: 28px;
    }.trust-links-head {
      max-width: none;
    }
  }
  @media (max-width: 600px) {
    .trust-links-grid {
      grid-template-columns: 1fr;
    }
  }
  @media (max-width: 768px) {/* SP: each section gets 80px top/bottom breathing */
    :root { --section-y: 120px; }section:not(.hero-fv) { padding: var(--section-y) var(--gutter); }.concept-br-pc { display: none; }.approach-br-pc { display: none; }.concept-br-sp { display: block; }.approach-br-sp { display: block; }.vs-title-br-sp { display: block; }.vs-foot-br-sp { display: block; }.flow-lead-br-sp { display: block; }.concept-section .section-head {
      text-align: left;
      margin-left: 0;
      margin-right: auto;
    }.concept-geo-intro {
      text-align: left;
      margin-left: 0;
      margin-right: auto;
    }.concept-narrative {
      text-align: left;
      margin-left: 0;
      margin-right: auto;
    }.concept-thought-quote,
    .concept-thought-lead {
      text-align: left;
      margin-left: 0;
      margin-right: auto;
    }.concept-thought-points {
      grid-template-columns: 1fr;
    }section.trust-links-section {
      padding: clamp(56px, 8vw, 80px) var(--gutter);
    }.hero-fv {
      margin-top: -72px;
      padding: 0;
    }.hero-fv__visual {
      min-height: 90svh;
    }.hero-fv__scroll {
      left: auto;
      right: var(--gutter);
      transform: translateY(42%);
      align-items: center;
    }.hero-fv__inner {
      max-width: 100%;
      align-items: flex-start;
      justify-content: flex-end;
      text-align: left;
      padding:
        clamp(96px, 16vh, 128px)
        var(--gutter)
        clamp(40px, 7vh, 60px);
      gap: 0;
    }.hero-fv__glass {
      max-width: 100%;
      padding: clamp(24px, 5vw, 32px) clamp(20px, 4.5vw, 28px);
    }.hero-fv__title {
      margin-top: 0;
      max-width: 100%;
    }.hero-fv__title-en {
      font-size: clamp(1.2875rem, 5.8vw, 1.6875rem);
      line-height: 1.4;
      margin-bottom: 14px;
    }.hero-fv__title-main {
      font-size: clamp(0.92rem, 4vw, 1.05rem);
      line-height: 1.65;
    }.hero-fv__title-sub {
      font-size: 11px;
      margin-bottom: 10px;
    }.hero-fv__stats {
      grid-template-columns: repeat(3, 1fr);
      gap: 10px 14px;
      max-width: 100%;
      padding-top: 14px;
      margin-top: 18px;
    }.hero-fv__stat-num {
      font-size: clamp(1.05rem, 4.5vw, 1.25rem);
    }.hero-fv__stat-label {
      font-size: 11px;
      margin-top: 4px;
    }.hero-fv__pane img,
    .hero-fv__pane .hero-fv__img {
      object-position: 62% 24%;
    }.hero-fv__overlay {
      background:
        linear-gradient(
          to top,
          rgba(8, 18, 14, 0.62) 0%,
          rgba(8, 18, 14, 0.22) 32%,
          transparent 62%
        );
    }/* --- SP: vertical step-list --- */
    .solution-flow-heading {
      margin-bottom: 48px;
    }.solution-flow-br-sp { display: block; }.solution-flow {
      flex-direction: column;
      flex-wrap: nowrap;
      /* Left-align every step so the icon circles share one vertical axis
         (steps have varying widths; centering shifted the wider ones left). */
      align-items: flex-start;
      gap: 41px;
      width: fit-content;
      max-width: 100%;
      margin-inline: auto;
    }/* vertical dashed rail down the left, behind the circles */
    .solution-flow::before {
      display: block;
      top: 57px;
      bottom: 57px;
      left: 56px;
      right: auto;
      width: 2px;
      height: auto;
      z-index: 0;
      background: repeating-linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.20) 0 9px,
        transparent 9px 18px
      );
    }.solution-flow-step {
      flex: 0 0 auto;
      display: grid;
      grid-template-columns: auto auto;
      grid-template-rows: auto auto;
      align-items: center;
      width: fit-content;
      column-gap: 29px;
      row-gap: 7px;
      text-align: left;
    }.solution-flow-icon {
      grid-row: 1 / 3;
      grid-column: 1;
      width: 113px;
      height: 113px;
      box-shadow:
        0 10px 22px rgba(0,0,0,0.26),
        0 0 0 6px rgba(255,255,255,0.08);
    }.solution-flow-icon img { width: 53px; height: 53px; }.solution-flow-icon--large img { width: 60px; height: 60px; }.solution-flow-num {
      top: -8px;
      left: -8px;
      min-width: 43px;
      height: 43px;
      font-size: var(--fs-lg);
    }.solution-flow-label {
      grid-column: 2;
      align-self: end;
      font-size: 23px;
    }.solution-flow-desc {
      grid-column: 2;
      align-self: start;
      padding-top: 0;
      font-size: var(--fs-lg);
    }.solution-flow-desc::before { display: none; }/* our-strengths — SP */
    .our-strengths-badge {
      font-size: clamp(24px, 6.5vw, 30px);
      margin-bottom: 40px;
    }.strength-points-grid {
      max-width: min(380px, 90vw);
      margin-left: auto;
      margin-right: auto;
      gap: 64px;
      margin-bottom: 48px;
      padding-top: 20px;
    }.strength-point-card {
      padding: 46px 18px 22px;
    }.strength-point-card::before {
      top: 6px;
      left: 6px;
      right: -10px;
      bottom: -10px;
      border-width: 2px;
    }.strength-point-num {
      font-size: var(--fs-sm);
      padding: 5px 36px;
      top: -18px;
    }.strength-point-title {
      font-size: clamp(17px, 4.5vw, 20px);
      white-space: normal;
      margin: 8px 0;
    }.strength-point-illust {
      height: 120px;
    }.strength-point-illust img {
      width: 100px;
      height: 100px;
    }.strength-point-line {
      width: 40px;
      margin-bottom: 16px;
    }.strength-point-body {
      font-size: var(--fs-sm);
      line-height: var(--lh-loose);
    }.services-grid {
      grid-template-columns: 1fr;
      gap: 14px;
      grid-auto-rows: auto;
    }.service-card {
      display: grid;
      grid-template-columns: clamp(56px, 15vw, 64px) minmax(0, 1fr);
      grid-template-rows: auto auto;
      gap: 0 12px;
      align-items: start;
      text-align: left;
      padding: 14px 16px;
      background: #fff;
      border: 1px solid #d6d6d6;
      border-radius: 10px;
      box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.08);
      overflow: hidden;
    }.service-icon {
      grid-column: 1;
      grid-row: 1;
      margin: 0;
      width: clamp(56px, 15vw, 64px);
      height: clamp(56px, 15vw, 64px);
      align-items: center;
      justify-content: center;
    }.service-icon img {
      width: 100%;
      height: 100%;
      max-height: none;
      object-fit: contain;
      margin: 0;
    }.service-option {
      display: contents;
      pointer-events: auto;
    }.service-toggle {
      display: none;
    }.service-title {
      position: relative;
      grid-column: 2;
      grid-row: 1;
      align-self: center;
      margin: 0;
      padding: 4px 32px 4px 0;
      font-size: clamp(15px, 4vw, 17px);
      line-height: var(--lh-normal);
      text-align: left;
      cursor: pointer;
      pointer-events: auto;
    }.service-title::before, .service-title::after {
      display: block;
      content: '';
      position: absolute;
      right: 15px;
      top: 50%;
      width: 2px;
      height: 0.9em;
      margin-top: -0.45em;
      background-color: var(--accent);
      transition: 0.3s;
    }.service-title::after {
      transform: rotate(90deg);
    }.service-toggle:checked + .service-title::before {
      transform: rotate(90deg);
      opacity: 0;
    }.service-content {
      grid-column: 1 / -1;
      grid-row: 2;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.35s ease;
    }.service-toggle:checked + .service-title + .service-content {
      max-height: 420px;
    }.service-body {
      margin: 10px 0 0;
      padding-top: 10px;
      border-top: 1px solid var(--border);
      font-size: var(--fs-sm);
      line-height: var(--lh-loose);
      text-align: left;
    }.worries-list { grid-template-columns: 1fr; }.cases-head {
      flex-direction: column;
      align-items: flex-start;
    }.cases-nav {
      width: 100%;
      justify-content: flex-end;
    }.cases-slider {
      --cases-slide-w: 78vw;
    }.cases-modal-ba { grid-template-columns: 1fr; }.section-head { margin-bottom: 40px; }.footer-grid { grid-template-columns: 1fr; }
  }

  @media (max-width: 420px) {
    .concept-section .section-title {
      font-size: clamp(22px, 6.2vw, 26px);
      line-height: var(--lh-relaxed);
      letter-spacing: var(--ls-normal);
    }
    .concept-section .section-title .cr-line--keep {
      white-space: nowrap;
    }

    section.solution-flow-section {
      padding-inline: clamp(24px, 7vw, 32px);
    }
    .solution-flow-heading {
      font-size: clamp(20px, 5.4vw, 24px);
      line-height: var(--lh-relaxed);
      margin-bottom: 36px;
    }
    .solution-flow {
      gap: 28px;
      width: fit-content;
      max-width: 100%;
      margin-inline: auto;
    }
    .solution-flow::before {
      top: 44px;
      bottom: 44px;
      left: 44px;
    }
    .solution-flow-step {
      width: fit-content;
      max-width: 100%;
      grid-template-columns: 88px auto;
      column-gap: 29px;
      row-gap: 7px;
    }
    .solution-flow-icon {
      width: 88px;
      height: 88px;
      box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.2),
        0 0 0 5px rgba(255, 255, 255, 0.08);
    }
    .solution-flow-icon img {
      width: 44px;
      height: 44px;
    }
    .solution-flow-icon--large img {
      width: 50px;
      height: 50px;
    }
    .solution-flow-num {
      top: -6px;
      left: -6px;
      min-width: 34px;
      height: 34px;
      font-size: var(--fs-sm);
    }
    .solution-flow-label {
      font-size: 18px;
      line-height: var(--lh-heading);
    }
    .solution-flow-desc {
      font-size: var(--fs-sm);
      line-height: var(--lh-normal);
    }

    .vs-new-head {
      margin-bottom: 32px;
    }
    #guide .vs-new-title {
      font-size: clamp(18px, 5vw, 22px);
    }
    .vs-new-lead {
      font-size: clamp(14px, 3.8vw, 16px);
      line-height: var(--lh-loose);
    }
    .vs-sheet {
      --vs-table-w: calc(168px + 198px + 178px);
      padding: 4px 0 22px;
    }
    .vs-sheet-head,
    .vs-row {
      width: var(--vs-table-w);
    }
    .vs-h-point,
    .vs-point {
      flex: 0 0 168px;
      font-size: 11px;
    }
    .vs-h-point {
      padding: 0 4px 14px;
    }
    .vs-h-col:not(.vs-h-col--ours),
    .vs-cell--general {
      flex: 0 0 198px;
    }
    .vs-h-col--ours,
    .vs-cell--ours {
      flex: 0 0 178px;
    }
    .vs-h-col {
      padding: 10px 8px;
      font-size: 12px;
    }
    .vs-h-col--ours {
      font-size: 16px;
      box-shadow:
        inset 3px 0 0 var(--accent),
        inset -3px 0 0 var(--accent),
        inset 0 3px 0 var(--accent);
    }
    .vs-point {
      padding: 12px 8px;
      font-size: 12px;
      line-height: var(--lh-normal);
    }
    .vs-cell {
      padding: 12px 8px;
      font-size: 12px;
      line-height: var(--lh-normal);
      gap: 6px;
    }
    .vs-row:not(:last-child) .vs-cell--ours {
      box-shadow:
        inset 3px 0 0 var(--accent),
        inset -3px 0 0 var(--accent),
        inset 0 -1px 0 var(--border);
    }
    .vs-row:last-child .vs-cell--ours {
      box-shadow:
        inset 3px 0 0 var(--accent),
        inset -3px 0 0 var(--accent),
        inset 0 -3px 0 var(--accent);
    }
    .vs-mark {
      font-size: 13px;
      line-height: var(--lh-normal);
    }
    .vs-cell-hint {
      font-size: 11px;
      margin-top: 4px;
    }
    .vs-sheet-scroll-hint {
      font-size: 11px;
    }
    .vs-notes {
      padding: 22px 18px 20px;
      margin-top: 28px;
    }
    .vs-note-title {
      font-size: clamp(17px, 4.6vw, 19px);
      margin-bottom: 8px;
    }
    .vs-note-title--local {
      font-size: clamp(17px, 4.6vw, 19px);
    }
    .vs-note-text {
      font-size: 13px;
      line-height: var(--lh-relaxed);
    }
    .vs-foot {
      font-size: 13px;
      line-height: var(--lh-relaxed);
      margin-top: 24px;
    }
  }

  @supports not (grid-template-rows: subgrid) {.service-card {
      display: flex;
      flex-direction: column;
    }.service-icon {
      min-height: clamp(140px, 16vw, 220px);
      margin: 0 auto clamp(20px, 2.5vw, 28px);
      align-items: flex-end;
    }.service-title {
      min-height: calc(1.5em * 2);
      margin-bottom: 14px;
    }

    @media (min-width: 769px) {.service-option {
        display: contents;
      }
    }

    @media (max-width: 768px) {.service-card {
        display: grid;
        grid-template-columns: clamp(56px, 15vw, 64px) minmax(0, 1fr);
        grid-template-rows: auto auto;
      }.service-icon {
        min-height: 0;
        margin: 0;
        margin-bottom: 0;
      }.service-title {
        min-height: 0;
        margin-bottom: 0;
        text-align: left;
      }
    }
  }
  @media (prefers-reduced-motion: reduce) {.service-title::before, .service-title::after, .service-content, .service-toggle:checked + .service-title + .service-content {
      transition: none;
    }
  }/* ===========================================================
     OUR APPROACH — editorial numbered cards
     =========================================================== */
  .approach-new {
    padding: var(--section-y) var(--gutter);
    background: rgb(255, 255, 255);
    overflow: hidden;
  }.approach-new-head {
    max-width: 760px;
    margin-bottom: 76px;
  }.approach-new-title {
    font-size: var(--fs-h2);
    line-height: var(--lh-snug);
    font-weight: 700;
    letter-spacing: var(--ls-snug);
    color: var(--ink);
    white-space: nowrap;   /* 改行は <br> で制御。各行の途中折り返しを防ぐ */
  }.ot-accent {
    color: var(--accent);
    font-weight: 900;
    position: relative;
    white-space: nowrap;
  }.ot-accent::after {
    content: "";
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 2px;
    height: 8px;
    border-radius: 6px;
    background: var(--accent-light);
    opacity: .38;
    z-index: -1;
  }.approach-new-lead {
    margin-top: 28px;
    font-size: var(--fs-lg);
    line-height: var(--lh-body);
    color: var(--ink-2);
  }.approach-new-lead em {
    font-style: normal;
    font-weight: 700;
    color: var(--ink);
  }
  @media (min-width: 769px) {.approach-new-lead {
      white-space: nowrap;
    }
  }.approach-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }/* all cards use Case 01 hover style */
  .approach-card {
    --c: var(--ink);
    --c-soft: var(--bg-soft);
    position: relative;
    display: flex;
    gap: 28px;
    padding: 44px 40px;
    background: rgba(255, 255, 255, 0.58);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow:
      0 30px 60px -22px rgba(0, 0, 0, 0.12),
      inset 0 1px 0 rgba(255, 255, 255, 0.85);
    overflow: hidden;
    transform: translateY(-8px);
    transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, border-color .4s, background .4s;
  }.approach-card::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--accent-soft);
    transform: scaleY(1);
    transform-origin: top;
    transition: background .45s cubic-bezier(.2,.7,.2,1), transform .45s cubic-bezier(.2,.7,.2,1);
  }.approach-card:hover::before, .approach-card:focus-visible::before {
    background: var(--accent);
  }.approach-card:hover, .approach-card:focus-visible {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.65);
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow:
      0 34px 68px -20px rgba(0, 0, 0, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.9);
    outline: none;
  }.ac-num {
    flex: none;
    font-family: var(--ff-display);
    font-size: clamp(46px, 6vw, 76px);
    font-weight: 700;
    line-height: var(--lh-none);
    color: var(--accent-soft);
    -webkit-text-stroke: 1.6px var(--accent);
    transition: color .4s, -webkit-text-stroke-color .4s;
  }.approach-card:hover .ac-num, .approach-card:focus-visible .ac-num {
    color: var(--accent-soft);
    -webkit-text-stroke-color: var(--accent-2);
  }.ac-tag {
    display: inline-block;
    margin-bottom: 14px;
    font-family: var(--ff-display);
    font-size: var(--fs-micro);
    font-weight: 700;
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: #000000;
    padding: 5px 12px;
    border-radius: 100px;
    background: #e4e4e4;
  }.ac-title {
    font-size: clamp(20px, 2.4vw, 26px);
    line-height: var(--lh-heading);
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 14px;
  }.ac-text {
    font-size: var(--fs-md);
    line-height: var(--lh-body);
    color: var(--ink-2);
  }/* ===========================================================
     COMPARISON — unified panel + note cards
     =========================================================== */
  .vs-new {
    padding: var(--section-y) var(--gutter);
    background: #fff;
  }.vs-new-head {
    /* 1行固定(nowrap)の見出しがはみ出して左ズレしないよう、箱はコンテナ幅まで許可 */
    max-width: var(--maxw);
    margin: 0 auto clamp(40px, 5vw, 60px);
    text-align: center;
  }.vs-new-title {
    font-size: var(--fs-h2);
    line-height: var(--lh-heading);
    font-weight: 900;
    letter-spacing: var(--ls-snug);
    color: var(--ink);
    white-space: nowrap;
  }.vs-new-lead {
    /* 読みやすさのための幅制限は見出しではなくリード文側に持たせる */
    max-width: var(--maxw-narrow);
    margin: 18px auto 0;
    font-size: var(--fs-lead);
    line-height: var(--lh-loose);
    color: var(--ink-2);
    text-wrap: pretty;
  }/* comparison — lane columns with floating header tabs, "ours" lane raised */
  .vs-sheet-wrap {
    max-width: 1040px;
    margin: 0 auto;
  }.vs-sheet-scroll-hint {
    display: none;
  }.vs-sheet {
    max-width: none;
    margin: 0;
    position: relative;
    display: grid;
    grid-template-columns: minmax(140px, 0.9fr) 1fr 1fr;
    column-gap: 0;
  }/* flatten rows so every cell becomes a direct grid item of the sheet */
  .vs-sheet-head, .vs-row { display: contents; }/* assign each cell to its column */
  .vs-h-point, .vs-point { grid-column: 1; }.vs-h-col:not(.vs-h-col--ours), .vs-cell--general { grid-column: 2; }.vs-h-col--ours, .vs-cell--ours { grid-column: 3; }/* keep source rows aligned across the three columns */
  .vs-sheet-head > * { grid-row: 1; }.vs-row:nth-child(2) > * { grid-row: 2; }.vs-row:nth-child(3) > * { grid-row: 3; }.vs-row:nth-child(4) > * { grid-row: 4; }.vs-row:nth-child(5) > * { grid-row: 5; }.vs-row:nth-child(6) > * { grid-row: 6; }/* ONE soft shadow layer behind the whole "ours" column */
  .vs-sheet::after {
    content: "";
    grid-column: 3;
    grid-row: 1 / -1;
    background: var(--accent-soft);
    box-shadow:
      0 18px 40px -14px rgba(31, 128, 80, .42),
      0 4px 14px rgba(31, 128, 80, .12);
    z-index: 0;
    pointer-events: none;
  }/* green outline around the whole "ours" (JPholic) column */
  .vs-sheet::before {
    content: "";
    grid-column: 3;
    grid-row: 1 / 7;
    border: 4px solid var(--accent);
    z-index: 2;
    pointer-events: none;
  }/* --- floating header tabs --- */
  .vs-sheet-head { margin-bottom: 0; }.vs-h-point {
    display: flex;
    align-items: flex-end;
    padding: 0 6px 19px;
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: var(--ls-base);
    color: var(--ink-3);
    justify-content: center;
  }.vs-h-col {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 14px 16px;
    font-size: var(--fs-sm);
    font-weight: 700;
    letter-spacing: var(--ls-base);
    color: #fff;
    background: #46566a;
  }.vs-h-col--ours {
    position: relative;
    z-index: 1;
    font-size: 20px;
    background: linear-gradient(135deg, var(--accent-2) 0%, var(--accent) 100%);
  }/* --- body lanes --- */
  .vs-point {
    padding: clamp(18px, 2.2vw, 24px) clamp(14px, 1.8vw, 22px);
    font-size: var(--fs-sm);
    font-weight: 700;
    line-height: var(--lh-normal);
    color: var(--ink);
    background: var(--bg-soft);
    display: flex;
    align-items: center;
  }.vs-row:not(:last-child) .vs-point { box-shadow: inset 0 -1px 0 var(--border); }.vs-cell {
    padding: clamp(18px, 2.2vw, 24px) clamp(14px, 1.8vw, 22px);
    font-size: var(--fs-sm);
    line-height: var(--lh-relaxed);
    display: flex;
    gap: 10px;
    align-items: flex-start;
  }.vs-cell--general {
    position: relative;
    z-index: 1;
    color: var(--ink-2);
    background: #fff;
    box-shadow: inset 1px 0 0 var(--border);
  }.vs-row:not(:last-child) .vs-cell--general {
    box-shadow: inset 1px 0 0 var(--border), inset 0 -1px 0 var(--border);
  }

  /* the "ours" lane: green tint;the box shadow is drawn once by .vs-sheet::after */
  .vs-cell--ours {
    position: relative;
    z-index: 1;
    background: #fafffc;
    color: var(--ink);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--accent);
  }.vs-row:not(:last-child) .vs-cell--ours {
    box-shadow: inset 3px 0 0 var(--accent), inset 0 -1px 0 var(--border);
  }.vs-mark {
    flex-shrink: 0;
    font-size: var(--fs-md);
    line-height: var(--lh-relaxed);
  }.vs-mark--ok { color: var(--accent); font-weight: 700; }.vs-mark--caution { color: var(--ink-3); font-weight: 400; }.vs-cell-text { display: block; text-wrap: pretty; }.vs-cell-hint {
    display: block;
    margin-top: 6px;
    font-size: var(--fs-xs);
    font-weight: 400;
    line-height: var(--lh-normal);
    color: var(--ink-3);
  }.vs-notes {
    position: relative;
    max-width: 1040px;
    margin: clamp(34px, 4vw, 48px) auto 0;
    padding: clamp(28px, 3.4vw, 44px) clamp(26px, 3.2vw, 48px) clamp(26px, 3.2vw, 40px);
    background:
      linear-gradient(180deg, #fbfcfb 0%, var(--bg-soft) 100%);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
  }.vs-notes-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(26px, 3.4vw, 52px);
  }/* hairline rule that divides the two stanzas */
  .vs-notes-grid::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 50%;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--border) 18%, var(--border) 82%, transparent);
  }.vs-note-title {
    font-size: var(--fs-h3);
    font-weight: 700;
    line-height: var(--lh-normal);
    letter-spacing: var(--ls-snug);
    color: var(--ink);
    margin-bottom: 10px;
    text-wrap: balance;
  }.vs-note-text {
    font-size: var(--fs-sm);
    line-height: var(--lh-loose);
    color: var(--ink-2);
    text-wrap: pretty;
  }.vs-foot {
    max-width: 1040px;
    margin: clamp(28px, 3.5vw, 40px) auto 0;
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--ink-2);
    line-height: var(--lh-loose);
    text-wrap: pretty;
  }.vs-foot strong { color: var(--ink); font-weight: 700; }.vs-foot-link {
    display: inline-block;
    margin-left: 6px;
    color: var(--accent);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid var(--border);
    transition: color .2s, border-color .2s;
  }.vs-foot-link::after { content: " →"; }.vs-foot-link--cases::after { content: ""; }.vs-foot-link:hover { color: var(--accent); border-color: var(--accent); }/* ===========================================================
     Responsive
     =========================================================== */
  @media (max-width: 860px) {
    .approach-cards { grid-template-columns: 1fr; gap: 18px; }
    .approach-card { padding: 34px 28px; gap: 20px; }
  }

  @media (max-width: 768px) {.approach-card {
      display: grid;
      grid-template-columns: 1fr auto;
      grid-template-areas:
        "tag num"
        "title num"
        "text text";
      column-gap: 12px;
      row-gap: 6px;
      align-items: start;
    }.ac-body { display: contents; }.ac-num {
      grid-area: num;
      justify-self: end;
      font-size: clamp(36px, 12vw, 52px);
    }.ac-tag {
      grid-area: tag;
      justify-self: start;
      width: 115px;
      text-align: center;
      font-size: 10px;
      padding: 0px 5px;
      margin-bottom: 0;
      letter-spacing: var(--ls-wider);
    }.ac-title {
      grid-area: title;
      font-size: clamp(22px, 5.5vw, 26px);
      font-weight: 700;
      line-height: var(--lh-snug);
      margin-bottom: 0;
    }.ac-text {
      grid-area: text;
      margin-top: 8px;
    }
  }

  @media (max-width: 900px) {.vs-new .container {
      overflow-x: clip;
    }/* keep the table layout but let it scroll sideways instead of stacking */
    .vs-sheet-wrap {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-x: contain;
      scrollbar-width: thin;
    }/* Switch from CSS grid (display:contents rows) to stacked flex rows.
       A grid item's containing block is only its own column's grid area, so a sticky label cell loses its grip once you scroll past that
       narrow area (the column "comes loose" at the far right). With flex
       rows, each label cell's containing block is the full-width row, so
       position:sticky holds all the way to the right edge. */
    .vs-sheet {
      /* Fixed total width (= sum of the three columns defined below) so the
         header row and every body row are always exactly the same width.
         iOS Safari miscomputes `width: max-content` on a flex row that
         contains a position:sticky cell, which made the header row come out
         narrower and drift left at the far-right end of the scroll. */
      --vs-table-w: calc(190px + 224px + 210px);
      display: block;
      grid-template-columns: none;
      width: var(--vs-table-w);
      margin: 0;
      padding: 6px 0 30px;
    }/* the grid-drawn green frame (::before/::after) no longer applies here */
    .vs-sheet::before, .vs-sheet::after { display: none; }.vs-sheet-head, .vs-row {
      display: flex;
      align-items: stretch;
      width: var(--vs-table-w);
    }/* fixed column widths so the three columns line up across every row */
    .vs-h-point, .vs-point { flex: 0 0 190px; }.vs-h-col:not(.vs-h-col--ours), .vs-cell--general { flex: 0 0 224px; }.vs-h-col--ours, .vs-cell--ours { flex: 0 0 210px; }/* pin the "確認ポイント" (item-label) column so it stays visible the
       whole way across — including at the far-right end of the scroll */
    .vs-h-point, .vs-point {
      position: sticky;
      left: 0;
      z-index: 4;
      background: var(--bg-soft);
      box-shadow: 1px 0 0 var(--border);
      border-right: 1px solid var(--border);
      white-space: normal;
    }.vs-h-point {
      align-self: stretch;
      background: var(--bg-soft);
    }/* redraw the green JPholic frame per-cell (the grid pseudo-frame is off).
       Selectors mirror the desktop ones so they win on specificity. */
    .vs-h-col--ours {
      box-shadow:
        inset 4px 0 0 var(--accent),
        inset -4px 0 0 var(--accent),
        inset 0 4px 0 var(--accent);
    }.vs-row:not(:last-child) .vs-cell--ours {
      box-shadow:
        inset 4px 0 0 var(--accent),
        inset -4px 0 0 var(--accent),
        inset 0 -1px 0 var(--border);
    }.vs-row:last-child .vs-cell--ours {
      box-shadow:
        inset 4px 0 0 var(--accent),
        inset -4px 0 0 var(--accent),
        inset 0 -4px 0 var(--accent);
    }.vs-sheet-scroll-hint {
      display: block;
      margin: 4px 0 0;
      text-align: center;
      font-size: var(--fs-xs);
      color: var(--ink-3);
      letter-spacing: var(--ls-base);
    }
  }

  @media (max-width: 680px) {.vs-notes-grid { grid-template-columns: 1fr; gap: 26px; }/* stacked: drop the vertical rule, divide the stanzas with a top hairline */
    .vs-notes-grid::before { display: none; }.vs-notes {
      padding-inline: clamp(18px, 4vw, 26px);
    }.vs-note + .vs-note {
      padding-top: 26px;
      border-top: 1px solid var(--border);
    }.vs-note-title--local {
      font-size: var(--fs-h3);
      letter-spacing: var(--ls-tight);
      white-space: nowrap;
      text-wrap: nowrap;
    }#guide .vs-new-title {
      font-size: clamp(21px, 5.8vw, 28px);
      letter-spacing: var(--ls-tight);
    }
  }/* ===== THUMB STOP — scroll-pause statement bands ===== */
  .thumb-stop {
    position: relative;
    z-index: 1;
    overflow: hidden;
  }.thumb-stop__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: clamp(48px, 6vw, 72px) var(--gutter);
  }/* Variant: dark statement band */
  .thumb-stop--dark {
    background:
      linear-gradient(180deg, rgba(8, 8, 8, 0.58) 0%, rgba(8, 8, 8, 0.7) 100%),
      url('../img/thumb-stop-bg.png') center / cover no-repeat,
      var(--surface-dark);
    background-image:
      linear-gradient(180deg, rgba(8, 8, 8, 0.58) 0%, rgba(8, 8, 8, 0.7) 100%),
      image-set(
        url('../img/thumb-stop-bg.webp') type('image/webp'),
        url('../img/thumb-stop-bg.png') type('image/png')
      );
    min-height: 220px;
    display: flex;
    align-items: center;
  }.thumb-stop--dark .thumb-stop__inner {
    padding: 60px var(--gutter);
  }.thumb-stop--dark::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
      radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.06), transparent 36%),
      linear-gradient(108deg, rgba(12, 28, 22, 0.52) 0%, rgba(12, 28, 22, 0.2) 45%, rgba(0, 0, 0, 0.5) 100%);
    pointer-events: none;
  }.thumb-stop--dark .thumb-stop__eyebrow {
    font-family: var(--ff-display);
    font-size: var(--fs-eyebrow);
    font-weight: 700;
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--accent-light);
    margin-bottom: clamp(16px, 2.5vw, 24px);
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }.thumb-stop--dark .thumb-stop__eyebrow::before {
    content: '';
    width: 28px;
    height: 2px;
    background: var(--accent-light);
  }.thumb-stop--dark .thumb-stop__message {
    font-family: var(--ff-sans);
    font-size: clamp(28px, 4.2vw, 48px);
    font-weight: 900;
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-normal);
    color: #fff;
    margin-bottom: clamp(12px, 1.5vw, 16px);
    text-wrap: pretty;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 8px 28px rgba(0, 0, 0, 0.3);
  }
  @media (min-width: 769px) {.thumb-stop--dark .thumb-stop__message {
      font-size: clamp(30px, 2.8vw, 40px);
      line-height: var(--lh-normal);
      max-width: 42em;
      margin-inline: auto;
    }.thumb-stop--dark .thumb-stop__sub {
      max-width: 42em;
      margin-inline: auto;
      line-height: var(--lh-body);
      text-wrap: pretty;
    }
  }/* PC（十分な横幅がある時）は各文を1行に収める */
  @media (min-width: 1000px) {
    .thumb-stop--dark .thumb-stop__sub--pc-oneline {
      max-width: none;
      white-space: nowrap;
    }
  }.thumb-stop--dark .highlight {
    color: #4ffe95;
    font-weight: 900;
  }.thumb-stop--dark .thumb-stop__sub {
    font-size: var(--fs-lead);
    line-height: var(--lh-loose);
    color: rgba(255, 255, 255, 0.88);
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.28);
  }.thumb-stop--dark .thumb-stop__sub + .thumb-stop__sub {
    margin-top: 0.75em;
  }

  @media (max-width: 600px) {.thumb-stop--dark {
      min-height: 220px;
    }.thumb-stop--dark .thumb-stop__inner {
      padding-top: 60px;
      padding-bottom: 60px;
    }.thumb-stop--dark .thumb-stop__message {
      font-size: clamp(22px, 6.2vw, 28px);
      margin-bottom: clamp(10px, 2vw, 14px);
    }.thumb-stop--dark .thumb-stop__eyebrow {
      margin-bottom: clamp(10px, 2vw, 14px);
    }
  }/* ===== SCROLL REVEAL — staggered fade-up (added by JS) ===== */
  .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform;
  }.reveal.is-visible {
    opacity: 1;
    transform: none;
  }/* zoom variant — stays in place, scales up from small to full size */
  .reveal-zoom {
    opacity: 0;
    transform: scale(0.8);
    transform-origin: center center;
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--reveal-delay, 0s);
    will-change: opacity, transform;
  }.reveal-zoom.is-visible {
    opacity: 1;
    transform: scale(1);
  }
  @media (prefers-reduced-motion: reduce) {.reveal, .reveal.is-visible, .reveal-zoom, .reveal-zoom.is-visible {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }/* ===== 追加セクション（LP内で使用中） ===== */
  .worries-cta {
    text-align: center;
    margin-bottom: 36px;
    padding-bottom: 28px;
  }.worries-cta-btn {
    display: inline-flex;
  }/* ===== CONCEPT — kinetic typography reveal (Option A) ===== */
/* Default: fully visible. Hidden state is applied only when JS opts in
   via .is-kinetic-ready, and only when motion is allowed. */
@media (prefers-reduced-motion: no-preference) {

  /* Heading + body runs rise line-by-line from behind a clip mask. */
  .concept-section.is-kinetic-ready .cr-line {
    display: inline-block;
    opacity: 0;
    transform: translateY(0.55em);
    clip-path: inset(-0.2em -0.12em 110% -0.12em);
    will-change: transform, clip-path, opacity;
    transition:
      opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
      clip-path 0.85s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--i, 0) * 0.09s);
  }
  .concept-section.is-kinetic-ready p.cr-line {
    display: block;
  }
  .concept-section.is-kinetic-ready .concept-thought-point.cr-line {
    display: block;
  }
  .concept-section.is-kinetic-in .cr-line {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(-0.2em -0.12em -0.4em -0.12em);
  }

  /* Green highlight: ignite with an underline draw just after it rises. */
  .concept-section .section-title .highlight {
    position: relative;
  }
  .concept-section.is-kinetic-ready .section-title .highlight::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.06em;
    height: 0.09em;
    border-radius: 4px;
    background: #4ffe95;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1);
    transition-delay: calc(var(--i, 3) * 0.09s + 0.45s);
  }
  .concept-section.is-kinetic-in .section-title .highlight::after {
    transform: scaleX(1);
  }

}

/* ===== CONCEPT — tile assembly (P-2), layered under the kinetic text ===== */
/* Structural rules (layout only;the tile layer exists only when JS builds it). */
.concept-section.is-puzzle { overflow: hidden; }.concept-section .container { position: relative; z-index: 1; }.concept-section .concept-tiles {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols, 8), 1fr);
  grid-template-rows: repeat(var(--rows, 5), 1fr);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {

  /* Pieces start scattered, tilted and shrunk;a faint seam marks each one. */
  .concept-section.is-puzzle .concept-tile {
    background: #1c1f1f;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.11);
    opacity: 0;
    transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--rot, 0deg)) scale(0.55);
    will-change: transform, opacity;
    transition:
      opacity 0.55s ease var(--d, 0s),
      transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0s),
      background-color 0.5s ease calc(var(--d, 0s) + 0.4s),
      box-shadow 0.5s ease calc(var(--d, 0s) + 0.4s);
  }/* Snap home, sink to the panel colour, then the seams dissolve. */
  .concept-section.is-puzzle.is-kinetic-in .concept-tile {
    opacity: 1;
    transform: none;
    background: var(--surface-dark);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0);
  }/* Hold the text back until the panel has assembled. */
  .concept-section.is-puzzle.is-kinetic-ready .cr-line {
    transition-delay: calc(var(--i, 0) * 0.09s + 0.8s);
  }.concept-section.is-puzzle.is-kinetic-ready .section-title .highlight::after {
    transition-delay: calc(var(--i, 3) * 0.09s + 1.25s);
  }
}