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

    body {
      font-family: 'Inter', 'Noto Sans JP', sans-serif;
      background: #ffffff;
    }

    /* ===== カラー変数 ===== */
    :root {
      --color-dark-red:   #7e0f0f;
      --color-accent-red: #b80707;
      --color-dark-text:  #2b1313;
      --color-cream-bg:   #f5f2ed;
      --color-off-white:  #faf9f7;
      --color-white:      #ffffff;
    }

    /* ===== 共通 ===== */
    .inner {
      width: 1040px;
      margin: 0 auto;
    }

    /* ===========================
       1. HEADER
    =========================== */
    header {
      background-color: var(--color-dark-red);
      width: 100%;
      height: 79px;
      position: fixed;   /* スクロールしても常に追従 */
      top: 0;
      left: 0;
      z-index: 1000;
    }
    /* 固定ヘッダー分だけ本文を下げる（ヘッダー高 79px） */
    body {
      padding-top: 79px;
    }
    /* アンカー先が固定ヘッダーに隠れないようにする（#contact 等） */
    #top,
    .contact {
      scroll-margin-top: 79px;
    }

    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      max-width: 1440px;
      margin: 0 auto;
      padding: 10px min(200px, max(20px, calc((100vw - 1040px) / 2))) 9px;
      height: 100%;
    padding-right: 10px;
    padding-left: 10px;
    }

    .logo {
      font-family: 'EB Garamond', serif;
      font-weight: 400;
      font-size: 24px;
      letter-spacing: 1.92px;
      color: #ffffff;
      line-height: 60px;
    }

    .nav {
      display: flex;
    }
    /* WPメニューは .nav > ul.nav-list > li 構造。実flexコンテナはul側なので gap はulに置く（.nav直下はul1個でgap無効だった）。Figma 169:192 TOP↔CONTACT=32px */
    .nav ul.nav-list {
      gap: 32px;
    }

    .nav a {
      font-family: 'EB Garamond', serif;
      font-weight: 400;
      font-size: 24px;
      letter-spacing: 1.92px;
      color: #ffffff;
      text-decoration: none;
      line-height: 60px;
    }

    .header-hamburger {
      display: none;
      flex-direction: column;
      justify-content: space-between;
      width: 34px;
      height: 26px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
    }

    .header-hamburger span {
      display: block;
      width: 100%;
      height: 3px;
      background-color: #ffffff;
      border-radius: 1px;
      transition: transform .3s ease, opacity .3s ease;
    }

    .sp-br {
      display: none;
    }

    /* ===========================
       2. HERO
    =========================== */
    .hero {
      width: 100%;
      background-color: var(--color-cream-bg);
      overflow: hidden;
    }

    .hero-inner {
      position: relative;
      max-width: 1440px;
      width: 100%;
      aspect-ratio: 1440 / 794;
      margin: 0 auto;
    }

    .hero-image {
      position: absolute;
      top: 26.95%;
      left: 42.57%;
      width: 52.71%;
      height: 63.73%;
      object-fit: cover;
    }

    .hero-content {
      position: absolute;
      top: 18.77%;
      /* 左は他セクションと同じpad連動（広幅=200px据置・狭幅=20pxまで詰まる）。右端は60.63%維持で中身を広げ、狭幅での圧縮を解消 */
      left: min(200px, max(20px, calc((100vw - 1040px) / 2)));
      right: 39.37%;
      display: flex;
      flex-direction: column;
      gap: clamp(14px, 1.94vw, 28px);
    }

    .hero-title {
      font-family: 'Noto Serif JP', serif;
      font-weight: 400;
      font-size: clamp(24px, 3.33vw, 48px);
      letter-spacing: 0.07em;
      line-height: 1.625;
      color: var(--color-dark-text);
    }

    .hero-tags {
      display: flex;
      gap: clamp(10px, 1.53vw, 22px);
      align-items: center;
    }

    .hero-tag-de {
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: clamp(14px, 1.39vw, 20px);
      line-height: 52px;
      color: #000000;
      flex-shrink: 0;
    }

    .hero-tag {
      background-color: var(--color-dark-red);
      color: #ffffff;
      font-family: 'Inter', sans-serif;
      font-weight: 700;
      font-size: clamp(14px, 1.39vw, 20px);
      line-height: clamp(36px, 3.61vw, 52px);
      padding: clamp(4px, 0.42vw, 6px) clamp(8px, 0.9vw, 13px);
      white-space: nowrap;
    }

    .hero-desc {
      font-family: 'Inter', sans-serif;
      font-weight: 400;
      font-size: clamp(16px, 1.67vw, 24px);
      letter-spacing: 0.08em;
      line-height: 1.79;
      color: var(--color-dark-text);
    }

    .hero-contact-text {
      font-family: 'Noto Serif JP', serif;
      font-weight: 500;
      font-size: clamp(14px, 1.39vw, 20px);
      letter-spacing: 0.09em;
      line-height: 1.55;
      color: var(--color-dark-text);
    }

    .hero-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: clamp(280px, 30.07vw, 433px);
      height: clamp(40px, 3.82vw, 55px);
      border: 2px solid var(--color-accent-red);
      border-radius: 27.5px;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      background: #ffffff;
      cursor: pointer;
      text-decoration: none;
    }

    .hero-btn span {
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: clamp(14px, 1.39vw, 20px);
      letter-spacing: 0.03em;
      color: var(--color-accent-red);
    }

    /* ===========================
       3. ABOUT
    =========================== */
    .about-feature-wrapper {
      position: relative;
    }

    .ribbon {
      position: absolute;
      /* Figma node 169:240: 左端 68.68% / 中心 73.98%（frame 1440基準）。SVGに回転は焼込済みのためCSS回転は不要 */
      left: 68.68%;
      bottom: calc(-0.92 * clamp(55px, 5.21vw, 75px));
      width: clamp(100px, 10.63vw, 153px);
      height: auto;
      aspect-ratio: 153 / 117;
      z-index: 10;
      pointer-events: none;
    }

    .about {
      position: relative;
      background-color: var(--color-white);
      border-bottom: 1px solid #a70300;
      padding: clamp(50px, 7.01vw, 101px) 0 clamp(50px, 7.01vw, 101px);
    }

    .about-inner {
      max-width: 1440px;
      width: 100%;
      margin: 0 auto;
      padding: 0 min(200px, max(20px, calc((100vw - 1040px) / 2)));
      display: flex;
      align-items: flex-start;
      position: relative;
    }

    .about-text {
      width: 63.46%;
      flex-shrink: 1;
      min-width: 0;
    }

    .about-heading {
      font-family: 'Noto Serif JP', serif;
      font-weight: 400;
      font-size: clamp(23px, 3.2vw, 32px);
      letter-spacing: 0.07em;
      line-height: 1.625;
      color: var(--color-dark-text);
      margin-bottom: clamp(30px, 4.58vw, 66px);
    }

    .about-body {
      font-family: 'Noto Sans JP', sans-serif;
      font-weight: 400;
      font-size: clamp(16px, 2.0vw, 20px);
      line-height: 1.9;
      color: var(--color-dark-text);
      white-space: pre-wrap;
    }

    .about-image {
      width: 34.04%;
      height: auto;
      aspect-ratio: 354 / 708;
      object-fit: cover;
      flex-shrink: 0;
      mix-blend-mode: multiply;   /* 元画像が白背景の線画のため、白を透過扱いにしてテキストと重ねる */
    }

    /* ===========================
       4. FEATURE
    =========================== */
    .feature {
      background-color: var(--color-white);
      /* Figma 169:222 (Frame 53) paddingTop=62 + Frame 63 のセクション間 gap=17 = 79px を見出し上の余白に */
      padding: 79px 0 121px;
    }

    .feature-inner {
      max-width: 1440px;
      width: 100%;
      margin: 0 auto;
      padding: 0 min(200px, max(20px, calc((100vw - 1040px) / 2)));
    }

    .section-title-wrap {
      text-align: center;
      margin-bottom: 87px;
    }

    .section-title-en {
      font-family: 'EB Garamond', serif;
      font-weight: 400;
      font-size: clamp(32px, 3.33vw, 48px);
      letter-spacing: 0.04em;
      line-height: 1.08;
      color: var(--color-accent-red);
      display: block;
    }

    .section-title-ja {
      font-family: 'Noto Serif JP', serif;
      font-weight: 400;
      font-size: clamp(18px, 1.67vw, 24px);
      letter-spacing: 0.07em;
      line-height: 2.17;
      color: var(--color-accent-red);
      display: block;
    }

    .feature-cards {
      display: flex;
      gap: clamp(20px, 3.4vw, 49px);
      justify-content: center;
    }

    .feature-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 30.1%;
      min-width: 0;
    }

    .feature-card-title {
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: clamp(16px, 1.53vw, 22px);
      line-height: 1.41;
      color: var(--color-dark-text);
      text-align: center;
      margin-bottom: 7px;
      min-height: 80px;
      display: flex;
      align-items: flex-start;
    }

    .feature-card img {
      width: 100%;
      height: auto;
      aspect-ratio: 313 / 203;
      object-fit: cover;
      margin-bottom: 21px;
    }

    .feature-card-desc {
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: clamp(13px, 1.11vw, 16px);
      line-height: 1.81;
      color: #000000;
      text-align: left;
    }

    /* ===========================
       5. SERVICE
    =========================== */
    .service {
      background-color: var(--color-off-white);
      padding: 75px 0;
    }

    .service-inner {
      max-width: 1440px;
      width: 100%;
      margin: 0 auto;
      /* Figma 169:253 (Frame 186) paddingTop=24px。.service の 75px と合わせて見出し上の余白を Figma の 99px に合わせる */
      padding: 24px min(200px, max(20px, calc((100vw - 1040px) / 2))) 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 30px;
    }

    .service-subtitle {
      font-family: 'Noto Serif JP', serif;
      font-weight: 400;
      font-size: clamp(24px, 2.22vw, 32px);
      letter-spacing: 0.07em;
      line-height: 1.625;
      color: var(--color-dark-text);
      text-align: center;
      margin-top: 20px;
    }

    .service-diagram {
      position: relative;
      width: min(538px, 51.73%);
      height: auto;
      aspect-ratio: 538 / 469;
      margin: 20px auto;
    }

    .service-diagram img {
      width: 100%;
      height: auto;
      object-fit: contain;
    }

    .service-caption {
      font-family: 'Noto Sans JP', sans-serif;
      font-weight: 400;
      font-size: clamp(16px, 1.39vw, 20px);
      line-height: 1.9;
      color: var(--color-dark-text);
      text-align: center;
    }

    /* ===========================
       6. SERVICE DETAIL 01
    =========================== */
    .service-detail {
      background-color: var(--color-white);
      padding: 100px 0 0;
    }

    .service-detail-inner {
      --sd-padding: min(200px, max(20px, calc((100vw - 1040px) / 2)));
      max-width: 1440px;
      width: 100%;
      margin: 0 auto;
      padding: 0 var(--sd-padding);
      position: relative;
    }

    .service-detail-inner .service-detail-vline {
      left: calc(var(--sd-padding) + 51px);
      top: 0;
    }

    .service-detail-vline {
      position: absolute;
      left: 251px;
      top: 0;
      width: 1px;
      height: 100%;
      background-color: #A70300;
    }

    .service-detail-hline {
      position: absolute;
      left: var(--sd-padding);
      top: clamp(120px, 13.47vw, 194px);
      width: calc(100% - 2 * var(--sd-padding));
      max-width: 1040px;
      height: 1px;
      background-color: var(--color-accent-red);
    }

    .service-detail-card {
      background-color: var(--color-off-white);
      padding: clamp(40px, 5.21vw, 75px) clamp(0px, 1.68vw, 53px) clamp(20px, 2.5vw, 36px) clamp(66px, 5.76vw, 83px);
      width: 100%;
      max-width: 1040px;
    }

    .service-detail-header {
      display: flex;
      align-items: flex-start;
      gap: clamp(12px, 1.46vw, 21px);
      padding-bottom: clamp(12px, 1.39vw, 20px);
      margin-bottom: clamp(18px, 2.15vw, 31px);
    }

    .service-number {
      font-family: 'EB Garamond', serif;
      font-weight: 500;
      font-size: clamp(64px, 8.89vw, 128px);
      color: var(--color-accent-red);
      line-height: clamp(45px, 6.25vw, 90px);
      width: clamp(80px, 9.72vw, 140px);
      text-align: center;
      flex-shrink: 0;
    }

    .service-title-wrap {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    .service-subtitle-sm {
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: clamp(14px, 1.39vw, 20px);
      letter-spacing: 0.05em;
      line-height: 1.8;
      color: var(--color-dark-text);
    }

    .service-title {
      font-family: 'Noto Serif JP', serif;
      font-weight: 400;
      font-size: clamp(24px, 2.78vw, 40px);
      letter-spacing: 0.07em;
      line-height: 1.3;
      color: var(--color-dark-text);
      margin-top: 11px;
    }

    .service-detail-body {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: clamp(10px, 1.39vw, 20px);
    }

    .service-detail-text {
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: clamp(14px, 1.6vw, 16px);
      line-height: 2.19;
      color: var(--color-dark-text);
      width: 52.88%;
      min-width: 0;
    }

    .service-detail-image {
      width: 44.8%;
      height: auto;
      aspect-ratio: 405 / 310;
      object-fit: cover;
      flex-shrink: 0;
    }


    /* ===========================
       7. SUPPORT EXAMPLES
    =========================== */
    .support {
      background-color: var(--color-white);
      padding: 43px 0 96px;
      overflow: hidden;
    }

    .support-cards-wrap {
      max-width: 1556px;
      margin: 0 auto;
      padding: 0 20px;
    }
    /* slick 初期化前のチラつき防止：横一列でクリップ表示 */
    .support-cards:not(.slick-initialized) {
      display: flex;
      gap: 22px;
      overflow: hidden;
    }
    /* slick 初期化後：スライド間の余白(22px=11+11) */
    .slick-initialized .support-card {
      margin: 0 11px;
    }
    .support-cards .slick-list { overflow: hidden; }
    /* 手動送りの矢印（枠なし・影なし・CSS枠線で描画＝線の太さを細く制御） */
    .support-cards .slick-prev,
    .support-cards .slick-next {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 56px;
      height: 56px;
      padding: 0;
      border: none;
      background: transparent;   /* 枠なし */
      box-shadow: none;          /* 影なし */
      font-size: 0;              /* "Previous"/"Next" テキストを隠す */
      color: transparent;
      cursor: pointer;
      z-index: 3;
    }
    .support-cards .slick-prev { left: 4px; }
    .support-cards .slick-next { right: 4px; }
    .support-cards .slick-prev::before,
    .support-cards .slick-next::before {
      content: '';
      display: block;
      width: 26px;
      height: 26px;
      border: solid var(--color-accent-red);
      border-width: 0 1.5px 1.5px 0;   /* 線を細く（1.5px） */
    }
    .support-cards .slick-prev::before { transform: rotate(135deg); margin-left: 7px; }   /* 左向き */
    .support-cards .slick-next::before { transform: rotate(-45deg); margin-right: 7px; }  /* 右向き */
    .support-cards .slick-prev:hover::before,
    .support-cards .slick-next:hover::before { opacity: 0.7; }

    .support-header {
      text-align: center;
      max-width: 1440px;
      width: 100%;
      margin: 0 auto 28px;
      padding: 0 min(200px, max(20px, calc((100vw - 1040px) / 2)));
    }

    .support-label {
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: 24px;
      line-height: 31px;
      color: var(--color-accent-red);
    }

    .support-heading {
      font-family: 'Noto Serif JP', serif;
      font-weight: 400;
      font-size: 24px;
      letter-spacing: 1.68px;
      line-height: 52px;
      color: var(--color-dark-text);
    }

    .support-cards {
      margin: 0;
    }

    /* カード内レイアウトは Figma(node 169:314 各カード)実測の縦位置に1:1で合わせる。
       カードは241x289固定＝Figmaと同寸のため、アイコンは実測座標で絶対配置する。 */
    .support-card {
      position: relative;
      background-color: var(--color-off-white);
      width: 241px;
      height: 289px;
      padding: 24px 12px 0;
      flex-shrink: 0;
      text-align: center;
    }

    .support-card-title {
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: 18px;
      line-height: 26px;
      color: #000000;
      text-align: center;
      margin: 0;
    }

    .support-card img {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      object-fit: contain;
    }

    /* 各アイコンの実寸・縦位置（Figma実測, top はカード上端基準） */
    .support-card img[src*="support-1-"] { top: 114px; width: 150px; height: 138px; }
    .support-card img[src*="support-2-"] { top: 126px; width: 179px; height: 124px; }
    .support-card img[src*="support-3-"] { top: 100px; width: 187px; height: 141px; }
    .support-card img[src*="support-4-"] { top: 95px;  width: 187px; height: 143px; }
    .support-card img[src*="support-5-"] { top: 100px; width: 163px; height: 134px; }
    .support-card img[src*="support-6-"] { top: 144px; width: 165px; height: 94px; }

    /* ===========================
       8. サポートの流れ
    =========================== */
    .support-flow {
      background-color: var(--color-white);
      padding: 50px 0;
    }

    .support-flow-inner {
      max-width: 1440px;
      width: 100%;
      margin: 0 auto;
      padding: 0 min(200px, max(20px, calc((100vw - 1040px) / 2)));
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: center;
    }

    .support-flow-label {
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: clamp(20px, 1.67vw, 24px);
      line-height: 1.29;
      color: var(--color-accent-red);
      text-align: center;
      width: 100%;
    }

    .support-flow-subtitle {
      font-family: 'Noto Serif JP', serif;
      font-weight: 400;
      font-size: clamp(20px, 1.67vw, 24px);
      letter-spacing: 0.07em;
      line-height: 2.17;
      color: var(--color-dark-text);
      text-align: center;
      width: 100%;
    }

    .support-flow-cards {
      /* 各カードの [タイトル/画像/テキスト] を subgrid で3行共有し、
         画像の高さ差・タイトル折返しが変わってもテキスト開始位置を常に揃える */
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, auto);
      column-gap: clamp(12px, 1.67vw, 24px);
      row-gap: clamp(20px, 2.36vw, 34px);
      width: 100%;
    }

    .flow-card {
      grid-row: 1 / -1;
      display: grid;
      grid-template-rows: subgrid;        /* 親の3行を継承＝カード間で行が揃う */
      grid-template-columns: minmax(0, 1fr);
      justify-items: center;
      border: 1px solid var(--color-accent-red);
      padding: clamp(14px, 1.53vw, 22px) clamp(15px, 1.74vw, 25px);
      min-width: 0;
    }

    .flow-card-title {
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: clamp(16px, 1.53vw, 22px);
      line-height: 1.41;
      color: var(--color-dark-text);
      text-align: center;
      width: 100%;
    }

    .flow-card-inner {
      display: contents;   /* 画像とテキストを flow-card のグリッド行へ昇格 */
    }

    .flow-card-img {
      object-fit: contain;
      max-width: 100%;
      height: auto;
      align-self: end;     /* 画像スロット内で下揃え（高さが違っても下端＝テキスト開始Yを統一） */
    }

    .flow-card-text {
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: clamp(13px, 1.11vw, 16px);
      line-height: 1.81;
      color: var(--color-dark-text);
      width: 100%;
      max-width: 281px;
    }

    .flow-card-text p + p {
      margin-top: 29px;
    }

    /* ===========================
       9. SERVICE DETAIL 02
    =========================== */
    .service-detail-02 {
      background-color: var(--color-white);
      padding: 0;
      margin-top: 75px;
    }

    .service-detail-02-inner {
      --sd-padding: min(200px, max(20px, calc((100vw - 1040px) / 2)));
      max-width: 1440px;
      width: 100%;
      margin: 0 auto;
      padding: 0 var(--sd-padding);
      position: relative;
    }

    .service-detail-02-inner .service-detail-vline {
      left: calc(var(--sd-padding) + 51px);
      top: 0;
    }

    .service-detail-02 .service-detail-vline {
      height: 100%;
    }

    .service-detail-02 .service-detail-card {
      padding-bottom: 75px;
    }

    .service-detail-02 .service-detail-text p + p {
      /* 段落間＝1行高（line-height:2.19）に連動。01の<br><br>空行と全幅で一致（PC=16px*2.19≒35px / SP=14px*2.19≒30.66px） */
      margin-top: 2.19em;
    }

    .service-detail-02 .service-detail-image {
      width: 42.15%;
    }

    /* ===========================
       11. 導入の流れ
    =========================== */
    .intro-flow {
      background-color: var(--color-white);
      padding: 81px 0;
    }

    .intro-flow-inner {
      max-width: 1440px;
      width: 100%;
      margin: 0 auto;
      padding: 0 min(200px, max(20px, calc((100vw - 1040px) / 2)));
      display: flex;
      flex-direction: column;
      gap: 16px;
      align-items: center;
    }

    .intro-flow-label {
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: clamp(18px, 1.39vw, 20px);
      line-height: 1.55;
      color: var(--color-accent-red);
      text-align: center;
      width: 100%;
    }

    .intro-flow-subtitle {
      font-family: 'Noto Serif JP', serif;
      font-weight: 400;
      font-size: clamp(20px, 1.67vw, 24px);
      letter-spacing: 0.07em;
      line-height: 2.17;
      color: var(--color-dark-text);
      text-align: center;
      width: 100%;
    }

    /* ===========================
       12. 無料相談
    =========================== */
    .free-consultation {
      background-color: #7e0f0f;
      padding: 100px 0 81px;
    }

    .consultation-inner {
      max-width: 1440px;
      width: 100%;
      margin: 0 auto;
      padding: 0 min(420px, max(20px, calc((100vw - 600px) / 2)));
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .consultation-title {
      font-family: 'Noto Serif JP', serif;
      font-weight: 500;
      font-size: 24px;
      line-height: 31px;
      color: #fff;
      white-space: nowrap;
    }

    .consultation-sub {
      font-family: 'Noto Serif JP', serif;
      font-weight: 500;
      font-size: 20px;
      line-height: 31px;
      letter-spacing: 1.8px;
      color: #fff;
      margin-top: 25px;
      margin-left: 104px;
    }

    .consultation-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 433px;
      height: 55px;
      background-color: #fff;
      border: 2px solid #b80707;
      border-radius: 27.5px;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: 20px;
      line-height: 31px;
      letter-spacing: 0.6px;
      color: #b80707;
      text-decoration: none;
      margin-top: 16px;
      margin-left: 76px;
    }

    /* ===========================
       13. プロフィール
    =========================== */
    .profile {
      background-color: #fff;
      padding: 71px 0 82px;
    }

    .profile-inner {
      max-width: 1440px;
      width: 100%;
      margin: 0 auto;
      padding: 0 min(200px, max(20px, calc((100vw - 1040px) / 2)));
    }

    .profile-header {
      display: flex;
      flex-direction: column;
      gap: 3px;
      align-items: center;
      text-align: center;
    }

    .profile-label-en {
      font-family: 'EB Garamond', serif;
      font-weight: 400;
      font-size: 48px;
      line-height: 52px;
      letter-spacing: 1.92px;
      color: #b80707;
      text-align: center;
    }

    .profile-label-jp {
      font-family: 'Noto Serif JP', serif;
      font-weight: 400;
      font-size: 24px;
      line-height: 52px;
      letter-spacing: 1.68px;
      color: #b80707;
      text-align: center;
    }

    .profile-body {
      display: flex;
      align-items: flex-start;
      margin-top: 41px;
      gap: clamp(20px, 6.04vw, 87px);
    }

    .profile-photo-area {
      position: relative;
      width: 311px;
      height: 328px;
      flex-shrink: 0;
    }

    .profile-photo-bg {
      position: absolute;
      left: 35px;
      top: 17px;
      width: 276px;
      height: 311px;
      background-color: #faf9f7;
    }

    .profile-photo-img {
      position: absolute;
      left: 0;
      top: 0;
      width: 274px;
      height: 276px;
      object-fit: cover;
    }

    .profile-text {
      flex: 1;
      min-width: 0;
      max-width: 642px;
    }

    .profile-name-block {
      display: flex;
      flex-direction: column;
    }

    .profile-org {
      font-family: 'Noto Serif JP', serif;
      font-weight: 400;
      font-size: 20px;
      line-height: 41px;
      letter-spacing: 1.4px;
      color: #2b1313;
    }

    .profile-name {
      font-family: 'Noto Serif JP', serif;
      font-weight: 400;
      font-size: 32px;
      line-height: 52px;
      letter-spacing: 2.24px;
      color: #2b1313;
    }

    .profile-bio {
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: 16px;
      line-height: 29px;
      color: #000;
      margin-top: 30px;
    }

    .profile-bio p + p {
      margin-top: 29px;
    }

    /* ===========================
       14. Contact
    =========================== */
    .contact {
      background-color: #fff;
      padding-top: 100px;
      position: relative;
    }

    .contact-ribbon {
      position: absolute;
      /* Figma node 169:1012: 左端23.68%（=50%-379px@1440）。SVGに回転(-14.59°)は焼込済みのためCSS回転は不要 */
      top: 60px;
      left: calc(50% - 379px);
      width: 153px;
      height: 106px;
    }

    .contact-inner {
      background-color: #faf9f7;
      border-top: 1px solid #a70300;
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 100px;   /* 見出し→フォームの間隔。Figmaのボックス間は111pxだが、見出しのline-height(52px)余白分を差し引いた視覚値 */
      align-items: center;
      padding: 65px min(200px, max(20px, calc((100vw - 1040px) / 2)));
    }

    .contact-header {
      display: flex;
      flex-direction: column;
      gap: 3px;
      align-items: center;
      width: 1040px;
      max-width: 100%;
    }

    .contact-label-en {
      font-family: 'EB Garamond', serif;
      font-weight: 400;
      font-size: 48px;
      line-height: 52px;
      letter-spacing: 1.92px;
      color: #b80707;
      text-align: center;
    }

    .contact-label-jp {
      font-family: 'Noto Serif JP', serif;
      font-weight: 400;
      font-size: 24px;
      line-height: 52px;
      letter-spacing: 1.68px;
      color: #b80707;
      text-align: center;
    }

    .contact-form,
    .contact .wpcf7-form {   /* WPのCF7フォーム(.wpcf7-form)にも同じフィールド間隔を適用 */
      display: flex;
      flex-direction: column;
      gap: 42px;
      align-items: center;
      width: 100%;
    }
    /* CF7ラッパー(.wpcf7)に安定した幅を与える。
       既定では .contact-inner(align-items:center) 下で内容に合わせて縮む(shrink-to-fit)ため、
       送信時に応答メッセージ等が最も広い子になるとフォーム幅が変わってしまう。固定幅でこれを防ぐ。 */
    .contact > .wpcf7,
    .contact .wpcf7 {
      width: 100%;
      max-width: 800px;
    }

    .form-field {
      width: 800px;
      max-width: 100%;
    }

    .field-label {
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: 20px;
      line-height: 31px;
      color: #2b1313;
      display: flex;
      align-items: baseline;
    }

    .field-required {
      color: #a70300;
      margin-left: 8px;   /* タイトルと＊の間隔（Figma実測 約8〜12px）。全必須項目に適用 */
    }

    /* チェックボックス チェック時：塗りつぶしではなくチェックマーク（サイトの赤・細めの上品な線） */
    .checkbox-item input[type="checkbox"],
    .contact .wpcf7-list-item input[type="checkbox"] {
      position: relative;   /* ::after のチェックマーク配置基準 */
    }
    .checkbox-item input[type="checkbox"]:checked::after,
    .contact .wpcf7-list-item input[type="checkbox"]:checked::after {
      content: "";
      position: absolute;
      left: 8.5px;
      top: 3.5px;
      width: 6px;
      height: 12px;
      border: solid var(--color-accent-red, #a70300);
      border-width: 0 2px 2px 0;
      transform: rotate(45deg);
    }

    /* ===== WP/CF7 フォーム調整（CF7既定マークアップを静的デザインに合わせる） ===== */
    /* チェックボックスを縦並び＋デザイン適用（CF7は既定でインライン） */
    .contact .wpcf7-checkbox {
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin-top: 18px;
    }
    .contact .wpcf7-list-item { margin: 0; }
    .contact .wpcf7-list-item label {
      display: flex;
      align-items: center;
      gap: 24px;
      cursor: pointer;
    }
    .contact .wpcf7-list-item input[type="checkbox"] {
      appearance: none;
      -webkit-appearance: none;
      width: 25px;
      height: 25px;
      background-color: #fff;
      border: 1px solid #a70300;
      flex-shrink: 0;
      margin: 0;
      cursor: pointer;
    }
    .contact .wpcf7-list-item-label {
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: 20px;
      line-height: 31px;
      color: #2b1313;
    }
    /* 送信ボタン（CF7のwpcf7-submitに.submit-btnの幅を確実に適用） */
    .contact .wpcf7-submit {
      width: 320px;
      max-width: 100%;
    }
    /* CF7のwpautopが送信ボタンを<p>で囲む → <p>を全幅にしてボタン幅を有効化 */
    .contact .form-submit > p {
      width: 100%;
      margin: 0;
      text-align: center;   /* PCの固定幅ボタンを中央寄せ */
    }

    .field-input {
      display: block;
      width: 800px;
      max-width: 100%;
      height: 40px;
      background-color: #fff;
      border: 1px solid #a70300;
      margin-top: 18px;
      padding: 0 8px;
      box-sizing: border-box;
      appearance: none;
      font-family: 'Inter', sans-serif;
      font-size: 16px;
    }

    .field-input:focus {
      outline: none;
    }

    .checkbox-list {
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin-top: 18px;
    }

    .checkbox-item {
      display: flex;
      align-items: center;
      gap: 24px;
      cursor: pointer;
    }

    .checkbox-item input[type="checkbox"] {
      appearance: none;
      -webkit-appearance: none;
      width: 25px;
      height: 25px;
      background-color: #fff;
      border: 1px solid #a70300;
      flex-shrink: 0;
      cursor: pointer;
      margin: 0;
    }

    .checkbox-text {
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: 20px;
      line-height: 31px;
      color: #2b1313;
    }

    .field-textarea {
      display: block;
      width: 800px;
      max-width: 100%;
      height: 231px;
      background-color: #fff;
      border: 1px solid #a70300;
      margin-top: 44px;
      padding: 8px;
      box-sizing: border-box;
      resize: none;
      font-family: 'Inter', sans-serif;
      font-size: 16px;
    }

    .field-textarea:focus {
      outline: none;
    }

    .form-submit {
      display: flex;
      justify-content: center;
      margin-top: 59px;
      width: 100%;   /* 送信ボタンの幅指定(100%)が効くようコンテナを全幅に */
    }

    .submit-btn {
      width: 320px;
      max-width: 100%;
      height: 55px;
      background-color: #7e0f0f;
      border-radius: 27.5px;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: 20px;
      line-height: 31px;
      letter-spacing: 0.6px;
      color: #fff;
      border: none;
      cursor: pointer;
    }

    /* ===========================
       10. 研修の例
    =========================== */
    .training-examples {
      background-color: var(--color-white);
      padding: 78px 0;
    }

    .training-examples-inner {
      max-width: 1440px;
      width: 100%;
      margin: 0 auto;
      padding: 0 min(200px, max(20px, calc((100vw - 1040px) / 2)));
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }

    .training-label {
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: clamp(18px, 1.39vw, 20px);
      line-height: 1.55;
      color: var(--color-accent-red);
      text-align: center;
      width: 100%;
      margin-top: clamp(30px, 3.47vw, 50px);
    }

    .training-content {
      display: flex;
      flex-direction: column;
      gap: clamp(30px, 3.96vw, 57px);
      align-items: center;
      width: 100%;
    }

    .training-subtitle {
      font-family: 'Noto Serif JP', serif;
      font-weight: 400;
      font-size: clamp(20px, 1.67vw, 24px);
      letter-spacing: 0.07em;
      line-height: 2.17;
      color: var(--color-dark-text);
      text-align: center;
      width: 100%;
    }

    /* 研修カード */
    .training-cards {
      /* 3カードで「条件/タイトル/画像/本文」の各行を subgrid で共有し、
         ブラウザ幅で文字の折返しが変わっても行の高さ・縦位置を常に揃える */
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(4, auto);
      column-gap: clamp(12px, 1.67vw, 24px);
      row-gap: clamp(15px, 1.74vw, 25px);
      width: 100%;
    }

    .training-card {
      grid-row: 1 / -1;
      display: grid;
      grid-template-rows: subgrid;        /* 親の4行を継承＝カード間で行が揃う */
      grid-template-columns: minmax(0, 1fr);
      justify-items: center;
      border: 1px solid var(--color-accent-red);
      padding: clamp(14px, 1.53vw, 22px) clamp(15px, 1.74vw, 25px);
      min-width: 0;
    }

    .training-card-condition-box {
      background-color: var(--color-off-white);
      height: auto;
      min-height: 62px;
      width: 100%;
      max-width: 279px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 8px;
    }

    .training-card-condition-text {
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: clamp(14px, 1.25vw, 18px);
      line-height: 1.72;
      color: var(--color-dark-text);
      text-align: center;
    }

    .training-card-title {
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: clamp(16px, 1.53vw, 22px);
      line-height: 1.41;
      color: var(--color-dark-text);
      text-align: center;
    }

    .training-card-img-placeholder {
      background-color: #d9d9d9;   /* 読み込み前のフォールバック */
      height: auto;
      aspect-ratio: 276 / 184;
      width: 100%;
      max-width: 276px;
      flex-shrink: 0;
      display: block;
      object-fit: cover;           /* img をボックスに合わせて表示 */
    }

    .training-card-body {
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: clamp(13px, 1.11vw, 16px);
      line-height: 1.94;
      color: var(--color-dark-text);
      width: 100%;
      max-width: 281px;
    }

    .training-card-body-multi {
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: clamp(13px, 1.11vw, 16px);
      line-height: 1.81;
      color: var(--color-dark-text);
      width: 100%;
      max-width: 281px;
    }

    .training-card-body-multi p + p {
      margin-top: 29px;
    }

    /* Step */
    .training-step {
      display: flex;
      gap: clamp(5px, 0.69vw, 10px);
      align-items: flex-start;
      max-width: 1040px;
      width: 100%;
      position: relative;
    }

    .training-step:not(:last-child)::after {
      content: '';
      position: absolute;
      left: clamp(30px, 3.96vw, 57px);
      top: 60%;
      width: 1px;
      height: clamp(50px, 7.15vw, 103px);
      background-color: #A70300;
    }

    .step-number {
      font-family: 'EB Garamond', serif;
      font-weight: 400;
      font-size: clamp(32px, 3.33vw, 48px);
      line-height: 1.08;
      color: var(--color-accent-red);
      letter-spacing: 0.04em;
      width: clamp(100px, 13.19vw, 190px);
      flex-shrink: 0;
    }

    .step-content {
      display: flex;
      flex-direction: column;
      min-width: 0;
    }

    .step-title {
      font-family: 'Noto Serif JP', serif;
      font-weight: 500;
      font-size: clamp(18px, 1.67vw, 24px);
      line-height: 1.29;
      color: var(--color-dark-text);
    }

    .step-desc {
      font-family: 'Inter', sans-serif;
      font-weight: 500;
      font-size: 18px;
      line-height: 1.72;
      color: var(--color-dark-text);
      width: 100%;
      max-width: 793px;
      margin-top: clamp(15px, 1.74vw, 25px);
    }

    /* ===========================
       15. フッター
    =========================== */
    .footer {
      background-color: #7e0f0f;
      padding: 11px 0 10px;
      display: flex;
      justify-content: center;
    }

    .footer-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 216px;
    }

    .footer-logo {
      font-family: 'EB Garamond', serif;
      font-weight: 400;
      font-size: 24px;
      line-height: 66px;
      letter-spacing: 1.92px;
      color: #fff;
      text-align: center;
      height: 60px;
    }

    .footer-nav {
      display: flex;
      height: 60px;
    }

    .footer-nav a {
      font-family: 'EB Garamond', serif;
      font-weight: 400;
      font-size: 16px;
      line-height: 66px;
      letter-spacing: 1.28px;
      color: #fff;
      text-decoration: none;
      height: 60px;
      display: block;
    }

    .footer-nav-top {
      width: 35px;
    }

    .footer-nav-contact {
      margin-left: 53px;
      width: 87px;
    }

    /* Step: 中間幅でフォント縮小（3行でも収まらなくなる幅） */
    @media (max-width: 900px) {
      .step-desc {
        font-size: 15px;
      }
    }

    /* ===========================
       レスポンシブ (モバイル: ~768px)
    =========================== */
    @media (max-width: 768px) {
      body {
        min-width: unset;
      }

      /* --- header --- */
      header {
        padding: 1.83vw 3.17vw 1.33vw 2.83vw;
        height: 62px;
      }

      .header-inner {
        width: 100%;
      }

      /* SP: ハンバーガーで開閉するドロップダウンメニュー（固定ヘッダーを維持。fixedも.navの配置基準になる） */
      header {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
      }
      .nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background-color: var(--color-dark-red);
        padding: 8px 0 16px;
        border-top: 1px solid rgba(255, 255, 255, 0.18);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
        transform: translateY(-130%);
        opacity: 0;
        visibility: hidden;
        transition: transform .35s ease, opacity .3s ease, visibility 0s linear .35s;
        z-index: 90;
      }
      header.nav-open .nav {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
        transition: transform .35s ease, opacity .3s ease, visibility 0s linear 0s;
      }
      .nav ul.nav-list {        /* WPメニュー(ul/li)も縦並びに */
        flex-direction: column;
        gap: 0;
        width: 100%;
      }
      .nav a {
        display: block;
        width: 100%;
        text-align: center;
        padding: 14px 0;
        font-size: 22px;
        line-height: 1.4;
      }

      .header-hamburger {
        display: flex;
        z-index: 101;
      }
      /* ハンバーガー → × アニメ */
      header.nav-open .header-hamburger span:nth-child(1) { transform: translateY(11.5px) rotate(45deg); }
      header.nav-open .header-hamburger span:nth-child(2) { opacity: 0; }
      header.nav-open .header-hamburger span:nth-child(3) { transform: translateY(-11.5px) rotate(-45deg); }

      /* --- hero --- */
      .hero {
        width: 100%;
        overflow: visible;
      }

      .hero-inner {
        position: static;
        width: 100%;
        height: auto;
        padding: 8.33vw 5vw;
        display: flex;
        flex-direction: column;
        gap: 2.67vw;   /* 他セクション(support/training)に合わせて統一。元4.67vwは768pxで膨張して広すぎた */
      }

      .hero-image {
        position: static;
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 2;
        object-fit: cover;
        order: 2;
      }

      .hero-content {
        position: static;
        width: 100%;
        top: auto;
        left: auto;
        order: 1;
        gap: 2.67vw;            /* 他セクション(support/training=2.67vw)に合わせて統一。元4.67vw(Figma28px)は768pxで膨張して広すぎた */
      }

      .hero-title {
        font-size: clamp(32px, 8vw, 48px);
        letter-spacing: clamp(2.1px, 0.56vw, 3.36px);
        line-height: clamp(52px, 13vw, 78px);
      }

      .hero-tags {
        flex-wrap: nowrap;        /* 横一列（折り返さない） */
        gap: 2.3vw;
        align-items: center;
        width: 100%;
      }

      .hero-tag {
        font-size: 3.1vw;         /* Figma SP 20px≒3.33vw に寄せつつ「で」まで1行に収める */
        line-height: 1.5;
        padding: 2.8vw 2.1vw;     /* 上下=赤背景の余白を拡大（Figma chip h64 / text52 の比率に寄せる）、左右も拡大 */
        white-space: nowrap;
        flex-shrink: 0;
      }

      .hero-tag-de {
        font-size: 3.1vw;
        line-height: 1.5;
        white-space: nowrap;
        flex-shrink: 0;
      }

      .hero-desc {
        font-size: clamp(18px, 4vw, 24px);
        letter-spacing: clamp(1.2px, 0.32vw, 1.92px);
        line-height: clamp(32px, 7.17vw, 43px);
      }

      .hero-contact-text {
        font-size: clamp(16px, 3.33vw, 20px);
        letter-spacing: clamp(1.2px, 0.3vw, 1.8px);
        line-height: clamp(24px, 5.17vw, 31px);
      }

      .hero-btn {
        width: clamp(280px, 72.17vw, 433px);
        height: clamp(44px, 9.17vw, 55px);
        border-radius: 27.5px;
        max-width: 100%;
      }

      .hero-btn span {
        font-size: clamp(16px, 3.33vw, 20px);
        letter-spacing: 0.6px;
      }

      /* --- about --- */
      .about {
        position: relative;
        width: 100%;
        padding: 8.33vw 5vw;
        height: auto;
        overflow: visible;
      }

      .about-inner {
        display: block;
        width: 100%;
        position: static;
        height: auto;
        padding: 0;
      }

      .about-text {
        position: static;
        width: 100%;
        left: auto;
        top: auto;
      }

      .about-heading {
        font-size: clamp(24px, 5.33vw, 32px);
        line-height: 1.625;
        letter-spacing: 0.07em;
        margin-bottom: clamp(40px, 11vw, 66px);
      }

      .about-body {
        font-size: clamp(16px, 3.33vw, 20px);
        line-height: 1.9;
      }

      .about-image {
        position: absolute;
        top: 9%;            /* Figma SPマスク: about上端から81px ≒ 9% */
        right: 0;
        left: auto;
        width: 27.83%;       /* 167/600 */
        height: auto;
        max-height: 72%;     /* 640/889 */
        object-fit: cover;
        object-position: center;  /* Figmaマスクは画像中央を見せる（右上クロップだと線が切れる） */
        aspect-ratio: 167 / 640;
      }

      .ribbon {
        width: 110px;
        height: 84px;
        left: auto;
        right: 13.8%;
        bottom: -48px;
      }

      /* --- feature --- */
      .feature {
        width: 100%;
        padding: 11.67vw 0;
      }

      .feature-inner {
        padding: 0;
      }

      .feature .section-title-wrap {
        margin-bottom: clamp(50px, 15.33vw, 92px);
      }

      .section-title-en {
        font-size: clamp(32px, 8vw, 48px);
      }

      .section-title-ja {
        font-size: clamp(18px, 4vw, 24px);
      }

      .feature-cards {
        flex-direction: column;
        gap: clamp(50px, 15.33vw, 92px);
      }

      .feature-card {
        width: 100%;
        padding: 0 5vw;
        gap: 5vw;
        align-items: stretch;
      }

      .feature-card-title {
        min-height: unset;
        margin-bottom: 0;
        display: block;
        font-size: clamp(18px, 3.67vw, 22px);
      }

      .feature-card img {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 10;
        margin-bottom: 0;
      }

      .feature-card-desc {
        font-size: clamp(14px, 2.67vw, 16px);
      }

      /* --- service --- */
      .service {
        width: 100%;
        padding: 4vw 5vw;
      }

      .service-inner {
        width: 100%;
        padding: 0;
        gap: 5vw;              /* Figma SP Frame186 の均一 gap=30px(@600=5vw)。padding 4vw と同比率 */
      }

      .service-subtitle {
        font-size: clamp(24px, 5.33vw, 32px);
        margin-top: 0;         /* 余分な上マージンを除去し、flex gap で間隔を均一化 */
      }

      .service-diagram {
        width: 100%;
        height: auto;
        aspect-ratio: auto;
        margin: 0;
      }

      .service-diagram img {
        width: 100% !important;
        height: auto !important;
      }

      .service-caption {
        font-size: clamp(16px, 3.33vw, 20px);
      }

      /* --- service-detail --- */
      .service-detail {
        width: 100%;
        padding: 8.33vw 5vw;
        position: relative;
      }

      .service-detail-inner {
        padding: 0;
        position: relative;
      }

      .service-detail-inner .service-detail-vline {
        left: 35px;
        top: 0;
      }

      .service-detail-vline {
        left: 35px;
        top: 0;
        height: 100%;
      }

      .service-detail-hline {
        display: none;   /* 固定topだとタイトル下端(幅で変動)に追従できないため、ヘッダー::afterで描画 */
      }

      .service-detail-card {
        width: 100%;
        padding: 5vw 6.67vw 5vw 11.67vw;
      }

      .service-detail-header {
        flex-direction: column;
        gap: 4.83vw;
        position: relative;
        padding-bottom: 0.92vw;  /* Figma: タイトルink下端→赤線 = 9.4px(@600=1.57vw)。字形の余白2.5px@390に+3.6pxで6.1px@390に */
        margin-bottom: 2.33vw;   /* Figma: 赤線→本文 = 14px(@600=2.33vw) */
      }

      /* 赤の横線：ヘッダー下端（=タイトル下端）に追従。負マージンでカード左右padding分を打ち消しコンテンツ全幅に伸ばす */
      .service-detail-header::after {
        content: "";
        position: absolute;
        left: -11.67vw;          /* = .service-detail-card の padding-left */
        right: -6.67vw;          /* = .service-detail-card の padding-right */
        bottom: 0;
        height: 1px;
        background-color: var(--color-accent-red);
      }

      .service-number {
        font-size: clamp(64px, 16vw, 96px);
        line-height: 1;          /* 既定の45px固定だと字形がボックス上にはみ出し「01」が上に詰まる。字形を収めてFigma位置に揃える */
        width: auto;
        text-align: left;
      }

      .service-subtitle-sm {
        font-size: clamp(14px, 3.33vw, 20px);
      }

      .service-title {
        /* 下限18pxだと320pxで折り返す。下限を16pxに下げ320pxでも5.33vw(=17px)で1行に。@375の20px=Figma比は不変 */
        font-size: clamp(16px, 5.33vw, 32px);
        letter-spacing: 0.07em;
        /* サブタイトル→タイトルの見た目(ink)隙間をFigmaの17px@390に。5.83vwだとleading込みで約2倍に見えていた */
        margin-top: 1.93vw;
        margin-right: -14px;     /* 右へ少し広げ、320pxで1行に収める余白を確保 */
        white-space: nowrap;     /* 「ー」などの折り返しを確実に防止（フォントは上記clampで収まる幅に） */
      }

      .service-detail-body {
        flex-direction: column;
        gap: 3vw;
      }

      .service-detail-text {
        width: 100%;
        font-size: clamp(14px, 2.67vw, 16px);
      }

      .service-detail-image {
        width: 100%;
        height: auto;
        aspect-ratio: auto;
      }

      .sp-br {
        display: inline;
      }

      /* --- support (サポートの例) --- */
      .support {
        width: 100%;
        padding: 7.17vw 0 4.5vw;
      }

      .support-header {
        width: 100%;
        padding: 0 5vw;
        margin: 0 0 4.67vw;
      }

      .support-label {
        font-size: 20px;
        /* Figmaのラベルは末尾に改行があり空行1つ分の余白を持つ。SPは見出しのline-heightが31pxに詰まり余白が消えるため、1行分(31px)を補う */
        margin-bottom: 31px;
      }

      .support-heading {
        font-size: 20px;
        letter-spacing: 1.4px;
        line-height: 31px;
      }

      .support-cards-wrap {
        padding: 0 2.67vw;
      }

      /* --- support-flow (サポートの流れ) --- */
      .support-flow {
        width: 100%;
        padding: 11.67vw 5vw;
      }

      .support-flow-inner {
        width: 100%;
        padding: 0;
        gap: 2.67vw;            /* Figma Frame66 gap=16px(@600=2.67vw)：ラベル→サブ→カード群 */
      }

      .support-flow-subtitle {
        line-height: 40px;
      }

      .support-flow-cards {
        display: flex;          /* SPは縦積み（subgridを解除） */
        flex-direction: column;
        gap: 4vw;               /* Figma Frame65 gap=24px(@600=4vw)：カード間 */
      }

      .flow-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4.17vw;            /* Figma カード gap=25px(@600=4.17vw)：タイトル→アイコン */
        grid-row: auto;
        padding: 3.67vw 4.17vw; /* Figma カード padding 22/25px(@600=3.67vw/4.17vw) */
      }

      .flow-card-inner {
        display: flex;          /* display:contents を解除 */
        flex-direction: column;
        align-items: center;
        gap: 5.67vw;            /* Figma Frame58 gap=34px(@600=5.67vw)：アイコン→テキスト */
        width: 100%;
      }

      .flow-card-img {
        align-self: center;     /* SP: PC用のalign-self:end(右寄せ化)を解除して中央に */
      }

      .flow-card-text {
        width: 100%;
      }

      /* --- service-detail-02 --- */
      .service-detail-02 {
        width: 100%;
        padding: 8.33vw 5vw;
        margin-top: 0;
        position: relative;
      }

      .service-detail-02-inner {
        padding: 0;
        position: relative;
      }

      .service-detail-02-inner .service-detail-vline {
        left: 35px;
        top: 0;
      }

      .service-detail-02 .service-detail-vline {
        left: 35px;
        top: 0;
        height: 100%;
      }

      .service-detail-02 .service-detail-card {
        padding-bottom: 5vw;
      }

      .service-detail-02 .service-detail-image {
        width: 100% !important;
      }

      /* --- training-examples (研修の例) --- */
      .training-examples {
        width: 100%;
        /* 下paddingを除去：Figmaではsteps直後に導入の流れ(padT=70)が始まる。下pad+intro上padで隙間が2倍になっていた */
        padding: 11.67vw 5vw 0;
      }

      .training-examples-inner {
        width: 100%;
        padding: 0;
        gap: 3.5vw;   /* ラベル「研修の例」→サブタイトルの隙間。0で密着していた。Figmaの見た目(ink約19.8px@390)に合わせる */
      }

      .training-label {
        font-size: clamp(20px, 4vw, 24px);
        margin-top: 0;
      }

      .training-subtitle {
        font-size: clamp(18px, 4vw, 24px);
        line-height: 1.67;
      }

      .training-content {
        gap: 2.67vw;
      }

      .training-cards {
        display: flex;          /* SPは縦積み（subgridを解除） */
        flex-direction: column;
        gap: 2.67vw;
      }

      .training-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4.17vw;   /* Figma カード内 gap=25px(@600=4.17vw)：条件ボックス→タイトル→画像→本文。2.67vwは小さすぎた */
        grid-row: auto;
      }

      .training-card-condition-box {
        width: 100%;
        max-width: none;
      }

      .training-card-condition-text {
        font-size: clamp(14px, 3vw, 18px);
      }

      .training-card-title {
        font-size: clamp(18px, 3.67vw, 22px);
      }

      .training-card-img-placeholder {
        width: 100%;
        height: auto;
        aspect-ratio: 490 / 350;
        max-width: none;
      }

      .training-card-body {
        width: 100%;
        max-width: none;
        font-size: clamp(14px, 2.67vw, 16px);
      }

      .training-card-body-multi {
        width: 100%;
        max-width: none;
        font-size: clamp(14px, 2.67vw, 16px);
      }

      .training-card-title br {
        display: none;
      }

      /* --- training-step (Step) --- */
      .training-step {
        flex-direction: column;
        width: 100%;
        margin-top: 6.83vw;
      }

      .training-step:not(:last-child)::after {
        display: none;
      }

      .step-number {
        width: auto;
        font-size: clamp(32px, 8vw, 48px);
      }

      .step-title {
        font-size: clamp(18px, 4vw, 24px);
      }

      .step-desc {
        width: 100%;
        font-size: 14px;
      }

      /* --- intro-flow (導入の流れ) --- */
      .intro-flow {
        width: 100%;
        padding: 11.67vw 5vw;
      }

      .intro-flow-inner {
        width: 100%;
        padding: 0;
      }

      .intro-flow-label {
        font-size: clamp(20px, 4vw, 24px);
      }

      .intro-flow-subtitle {
        font-size: clamp(18px, 4vw, 24px);
        line-height: 1.67;
      }

      .support-flow-cards {
        flex-direction: column;
      }

      .flow-card-title {
        font-size: clamp(18px, 3.67vw, 22px);
      }

      .flow-card-text {
        width: 100%;
        max-width: none;
        font-size: clamp(14px, 2.67vw, 16px);
      }

      .flow-card-inner {
        max-width: none;
        width: 100%;
      }

      /* --- free-consultation (無料相談) --- */
      .free-consultation {
        width: 100%;
        padding: 11vw 4.83vw;
      }

      .consultation-inner {
        align-items: center;
        padding: 0;
      }

      .consultation-title {
        text-align: center;
        white-space: normal;
        line-height: 39px;
      }

      .consultation-sub {
        text-align: center;
        margin-top: 2.83vw;
        margin-left: 0;
        font-size:18px;
      }

      .consultation-btn {
        width: 59vw;        /* Figma 192:1995：354px@600 = 59vw（100%だと広すぎた） */
        max-width: 433px;
        margin-top: 2.83vw;
        margin-left: 0;
      }

      /* --- profile --- */
      .profile {
        width: 100%;
        padding: 13.33vw 5vw;
      }

      .profile-inner {
        padding: 0;
      }

      .profile-body {
        flex-direction: column;
        gap: 1.67vw;
      }

      .profile-photo-area {
        width: 100%;
        height: auto;
        aspect-ratio: 540 / 570;
      }

      .profile-photo-bg {
        left: 11.25%;
        top: 5.18%;
        width: 88.75%;
        height: 94.74%;
      }

      .profile-photo-img {
        width: 88.1%;
        height: auto;
      }

      .profile-text {
        width: 100%;
      }

      /* --- contact --- */
      .contact {
        width: 100%;
        padding-top: 8.33vw;
      }

      .contact-ribbon {
        left: 80px;
        /* ボーダー(=.contactのpadding-top 8.33vw)に追従。リボン中心(top+36)を線の11.8px下に固定＝Figma。top:30px固定だと幅でズレた */
        top: calc(8.33vw - 24px);
        width: 104px;
        height: 72px;
      }

      .contact-inner {
        padding: 10.83vw 5vw;
        gap: 5vw;   /* SP: 見出し→フォーム間隔（line-height余白を差し引いた視覚値） */
      }

      .contact-header {
        width: 100%;
      }

      .contact-form {
        width: 100%;
      }

      .form-field {
        width: 100%;
      }

      .field-input {
        width: 100%;
      }

      .field-textarea {
        width: 100%;
      }

      .submit-btn,
      .contact .wpcf7-submit {
        width: 100%;   /* Figma SP: 送信ボタンはコンテンツ全幅(540/600) */
      }

      /* --- footer --- */
      .footer {
        width: 100%;
      }

      span.logo {
    font-size: 20px;
}

.nav a {
    font-size: 20px;
}

body {
    padding-top: 62px;
}

    }

/* ===== hover エフェクト & アンカー（スムーススクロールはJSで実行） ===== */
#contact { scroll-margin-top: 20px; }
#top { scroll-margin-top: 0; }

.nav a, .footer-nav a, .logo,
.hero-btn, .consultation-btn, .submit-btn,
.wpcf7-submit, .feature-card, .support-card, .flow-card {
  transition: opacity .25s ease, background-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.nav a:hover, .footer-nav a:hover { opacity: .6; }
.hero-btn:hover, .consultation-btn:hover { opacity: .9; transform: translateY(-2px); }
.submit-btn:hover, .wpcf7-submit:hover { opacity: .88; transform: translateY(-1px); }
.field-input:focus, .field-textarea:focus,
.wpcf7-form-control:focus { outline: none; box-shadow: 0 0 0 2px rgba(184,7,7,.25); }

/* ===== WordPress: ヘッダーメニュー(wp_nav_menu)調整 ===== */
.nav ul.nav-list { display: flex; list-style: none; margin: 0; padding: 0; }
.nav ul.nav-list li { margin: 0; padding: 0; }