/* ===== Variables ===== */
    :root {
      --orange: #ff824d;
      --gold: #ffb44d;
      --dark: #0f172a;
      --slate-700: #334155;
      --slate-600: #475569;
      --slate-500: #64748b;
      --slate-400: #94a3b8;
      --slate-300: #cbd5e1;
      --slate-200: #e2e8f0;
      --slate-100: #f1f5f9;
      --slate-50: #f8fafc;
      --font-zen: 'Zen Kaku Gothic Antique', sans-serif;
      --font-maru: 'Zen Maru Gothic', sans-serif;
      --font-noto: 'Noto Sans JP', sans-serif;
      --font-inter: 'Inter', sans-serif;
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html, body { overflow-x: clip; }
    body {
      font-family: var(--font-zen);
      color: var(--dark);
      background: #fff;
      -webkit-font-smoothing: antialiased;
    }
    img { max-width: 100%; height: auto; display: block; }
    a { text-decoration: none; color: inherit; cursor: pointer; }
    ul { list-style: none; }

    /* ===== HEADER ===== */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      background: #fff;
      transition: box-shadow 0.25s ease;
    }
    .site-header.is-scrolled {
      box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    }
    .header-subnav {
      display: none;
      padding: 5px 80px;
      gap: 15px;
      align-items: center;
    }
    .header-subnav a {
      font-size: 14px;
      font-weight: 700;
      font-family: var(--font-noto);
    }
    .header-subnav a.active { color: var(--orange); }
    .header-subnav-sep {
      font-size: 14px;
      font-weight: 700;
      font-family: var(--font-noto);
    }
    .header-main {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      height: 60px;
    }
    .header-logo {
      display: block;
      flex-shrink: 0;
      text-decoration: none;
    }
    .logo-sprite {
      position: relative;
      width: 117px;
      height: 64px;
      transform: scale(0.75);
      transform-origin: left center;
    }
    .logo-part {
      position: absolute;
      overflow: hidden;
      pointer-events: none;
    }
    /* プロトグループ */
    .logo-part-proto {
      width: 49px;
      height: 11px;
      top: 0;
      left: 0;
    }
    .logo-part-proto img {
      position: absolute;
      width: 335.24%;
      height: 275%;
      left: -167.89%;
      top: -83.88%;
      max-width: none;
    }
    /* CSSマーク */
    .logo-part-mark {
      width: 74px;
      height: 36px;
      top: 13px;
      left: 0;
    }
    .logo-part-mark img {
      position: absolute;
      width: 381.52%;
      height: 146.67%;
      left: 0%;
      top: -46.67%;
      max-width: none;
    }
    /* 沖縄コールスタッフサービス */
    .logo-part-name {
      width: 117px;
      height: 11px;
      top: 53px;
      left: 0;
    }
    .logo-part-name img {
      position: absolute;
      width: 140.4%;
      height: 275%;
      left: -40.4%;
      top: -175%;
      max-width: none;
    }
    .header-logo-text {
      font-size: 13px;
      font-weight: 700;
      font-family: var(--font-noto);
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .logo-main { font-size: 18px; color: var(--dark); }
    .logo-sub { font-size: 11px; color: var(--slate-500); font-weight: 400; }
    .header-nav { display: none; }
    .header-info-wrap { display: none; }
    .header-docs { display: none; }
    .header-cta-btn { display: none; }

    /* Hamburger */
    .hamburger {
      display: flex;
      flex-direction: column;
      gap: 6px;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      cursor: pointer;
      background: none;
      border: none;
      padding: 0;
    }
    .hamburger span {
      display: block;
      width: 24px;
      height: 2px;
      background: var(--dark);
      border-radius: 1px;
      transition: all 0.3s;
    }
    .hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .hamburger.open span:nth-child(2) { opacity: 0; }
    .hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

    /* Mobile menu */
    .mobile-menu {
      display: none;
      position: fixed;
      top: 60px;
      left: 0;
      right: 0;
      bottom: 0;
      background: #fff;
      z-index: 99;
      padding: 24px 20px;
      flex-direction: column;
      overflow-y: auto;
    }
    .mobile-menu.open { display: flex; }
    .mobile-menu-nav a {
      display: block;
      padding: 16px 0;
      font-size: 18px;
      font-weight: 700;
      font-family: var(--font-noto);
      border-bottom: 1px solid var(--slate-100);
    }
    .mobile-menu-cta {
      margin-top: 24px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .mobile-btn-phone {
      display: block;
      border: 2px solid var(--slate-200);
      border-radius: 9999px;
      padding: 14px 24px;
      text-align: center;
      font-family: var(--font-zen);
      font-weight: 700;
      font-size: 18px;
    }
    .mobile-btn-phone small { font-size: 14px; display: block; font-weight: 400; }
    .mobile-btn-contact {
      display: block;
      background: var(--orange);
      color: #fff;
      border-radius: 9999px;
      padding: 14px 24px;
      text-align: center;
      font-family: var(--font-zen);
      font-weight: 700;
      font-size: 18px;
    }

    /* Desktop header */
    @media (min-width: 1024px) {
      .logo-sprite { transform: none; }
      .site-header { height: 127px; }
      .header-subnav { display: flex; transition: opacity 0.2s ease, max-height 0.25s ease; max-height: 60px; overflow: hidden; }
      .header-main {
        padding: 0 80px;
        height: 92px;
        gap: 30px;
        transition: height 0.25s ease;
      }
      .logo-header { transition: transform 0.25s ease; transform-origin: left center; }

      /* スクロール時コンパクト */
      .site-header.is-scrolled { height: auto; }
      .site-header.is-scrolled .header-subnav { max-height: 0; opacity: 0; pointer-events: none; }
      .site-header.is-scrolled .header-main { height: 60px; }
      .site-header.is-scrolled .logo-sprite { transform: scale(0.8); }
      .header-nav {
        display: flex;
        align-items: center;
        gap: 30px;
        flex: 1;
        padding-left: 24px;
      }
      .header-nav a {
        font-size: 14px;
        font-weight: 700;
        font-family: var(--font-noto);
        white-space: nowrap;
      }
      .header-info-wrap {
        display: block;
        font-size: 12px;
        font-family: var(--font-noto);
        white-space: nowrap;
      }
      .header-docs {
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #000;
        border-radius: 9999px;
        padding: 12px 24px;
        font-size: 14px;
        font-weight: 700;
        font-family: var(--font-noto);
        width: 120px;
        white-space: nowrap;
        box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
        flex-shrink: 0;
      }
      .header-cta-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--orange);
        color: #fff;
        border-radius: 9999px;
        padding: 12px 24px;
        font-size: 14px;
        font-weight: 700;
        font-family: var(--font-noto);
        width: 188px;
        white-space: nowrap;
        box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
        flex-shrink: 0;
      }
      .hamburger { display: none; }
    }

    /* ===== HERO ===== */
    .hero {
      position: relative;
      overflow: hidden;
      /* SP: blue-gray gradient */
      background: linear-gradient(106.38deg, rgb(125,175,238) 28.91%, rgb(226,232,240) 80.82%);
    }

    /* SP Hero layout */
    .hero-keyvisual-sp {
      position: relative;
      height: 412px;
      overflow: hidden;
    }
    .hero-keyvisual-sp img {
      position: absolute;
      width: 185%;
      max-width: none;
      left: -42%;
      top: -34.2%;
      height: 167.66%;
      object-fit: cover;
    }
    .hero-overlay-sp {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.25);
    }
    .hero-text-sp {
      position: absolute;
      bottom: 34px;
      left: 20px;
      right: 20px;
    }
    .hero-headline {
      font-family: var(--font-zen);
      font-weight: 700;
      color: #fff;
      letter-spacing: 1.5px;
    }
    .hero-headline .line-sm { font-size: 18px; line-height: 26px; display: block; }
    .hero-headline .line-lg { font-size: 36px; line-height: 48px; display: block; }

    .hero-stats-sp {
      display: flex;
      gap: 0;
      color: #fff;
      margin-top: 14px;
    }
    .hero-stat {
      margin-right: 24px;
    }
    .hero-stat-label {
      font-size: 14px;
      font-weight: 700;
      font-family: var(--font-noto);
      display: block;
      line-height: 20px;
    }
    .hero-stat-num {
      font-size: 28px;
      font-weight: 800;
      font-family: var(--font-inter);
      display: inline;
    }
    .hero-stat-unit {
      font-size: 14px;
      font-weight: 800;
      font-family: var(--font-inter);
    }

    .hero-stats-bar {
      position: relative;
      height: 60px;
      display: flex;
      align-items: center;
      padding: 0 20px;
    }

    .hero-body-sp {
      padding: 16px 20px;
    }
    .hero-body-sp p {
      font-size: 18px;
      line-height: 26px;
      color: #000;
    }

    .hero-buttons-sp {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding: 12px 20px 32px;
    }
    .btn-phone-hero {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 16px 24px;
      border: 2px solid var(--slate-200);
      border-radius: 9999px;
      background: #fff;
      font-family: var(--font-zen);
      font-weight: 700;
      font-size: 20px;
      color: var(--slate-700);
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      text-align: center;
    }
    .btn-phone-hero .tel { font-size: 18px; font-weight: 700; }
    .btn-contact-hero {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 16px 24px;
      background: var(--orange);
      border-radius: 9999px;
      font-family: var(--font-zen);
      font-weight: 700;
      font-size: 20px;
      color: #fff;
    }

    /* PC hero hidden on mobile */
    .hero-pc-layout { display: none; }

    @media (min-width: 768px) {
      /* ===== TABLET (768px-1023px) ===== */
      .hero-headline .line-sm { font-size: 22px; }
      .hero-headline .line-lg { font-size: 44px; line-height: 56px; }
      .hero-keyvisual-sp { height: 500px; }
      .hero-keyvisual-sp img { width: 140%; left: -20%; }
      .hero-text-sp { bottom: 60px; }
      .hero-body-sp { padding: 20px 40px; }
      .hero-body-sp p { font-size: 18px; line-height: 26px; }
      .hero-buttons-sp { padding: 0 40px 40px; flex-direction: row; gap: 16px; }
      .btn-phone-hero { flex: 1; }
      .btn-contact-hero { flex: 1; }

      /* Services: 2-col grid at tablet */
      .services { padding: 48px 40px; }
      .service-cards-top { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; flex-direction: unset; }
      .service-cards-bottom { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; flex-direction: unset; }
      .services-img-col { display: none; } /* hide image col at tablet */

      /* Strengths: photo full-width, cards 2-col */
      .strengths { padding: 48px 40px; display: block; min-height: unset; }
      .strengths::before, .strengths::after { display: none; }
      .strengths-photo { position: relative; width: 100%; height: 220px; margin-bottom: 24px; top: auto; left: auto; right: auto; }
      .strengths-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; left: 0; }
      .strengths-header { width: 100%; max-width: unset; padding: 0; }
      .strengths-eyebrow { margin-bottom: 12px; }
      .strengths-title   { margin-bottom: 16px; }
      .strengths-body    { margin-bottom: 24px; width: auto; }
      .strengths-intro   { margin-bottom: 24px; }
      .strength-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; flex-direction: unset; padding-top: 0; padding-right: 0; position: static; top: auto; left: auto; right: auto; }
      .strength-card { height: auto; min-height: 200px; padding: 24px; }
      .strength-card.last { grid-column: 1 / -1; }
      .strengths > .cta-block { position: static; top: auto; left: auto; right: auto; margin-top: 24px; padding-right: 0; }

      /* Staff: 2-col */
      .staff { padding: 48px 40px; }
      .staff-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; flex-direction: unset; }

      /* FAQ */
      .faq { padding: 48px 40px; }

      /* Results */
      .results-inner { padding: 0 40px; }
      .results-cta-block { padding: 0 40px; }
      .result-card { width: 300px; }
    }

    @media (min-width: 1024px) {
      .hero {
        /* PC: match SP blue gradient */
        background: radial-gradient(ellipse at 20% 10%, rgb(125,175,238) 0%, rgb(160,205,240) 40%, rgb(195,220,242) 70%, rgb(210,228,245) 100%);
        height: calc(100vh - 92px);
        min-height: 580px;
        max-height: 900px;
        position: relative;
      }

      /* Hide SP elements */
      .hero-keyvisual-sp { display: none; }
      .hero-stats-sp { display: none; }
      .hero-stats-bar { display: none; }
      .hero-body-sp { display: none; }
      .hero-buttons-sp { display: none; }

      /* Show PC layout */
      .hero-pc-layout {
        display: block;
        position: absolute;
        inset: 0;
      }

      /* PC Keyvisual — right-aligned, top-right anchored */
      .hero-keyvisual-pc {
        position: absolute;
        top: -179px;
        right: 0;
        width: 70%;
        height: 100%;
        overflow: hidden;
        z-index: 1;
      }
      .hero-keyvisual-pc img {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        right: 0;
        object-fit: cover;
        object-position: top center;
        max-width: none;
      }

      /* Overlay no longer needed — blue background provides contrast */
      .hero-pc-overlay { display: none; }

      .hero-union-pc {
        position: absolute;
        inset: 0;
        pointer-events: none;
      }

      /* PC Hero — hidden until image loads, then JS adds .hero-img-loaded */
      .hero-keyvisual-pc {
        clip-path: inset(0 0 0 100%);
        transition: clip-path 2.2s cubic-bezier(0.16,1,0.3,1);
      }
      .hero-keyvisual-pc.hero-img-loaded {
        clip-path: inset(0 0 0 0%);
      }
      .hero-content-pc {
        animation: heroFadeRight 0.75s ease 0.4s both;
      }
      .hero-stats-pc {
        animation: heroFadeUp 0.7s ease 0.7s both;
      }
      .hero-bottom-pc {
        animation: heroFadeUp 0.7s ease 0.95s both;
      }
      .hero-watermark {
        animation: heroFadeUp 1s ease 1.1s both;
      }

      /* Watermark */
      .hero-watermark {
        position: absolute;
        left: 212px;
        top: 1%;
        writing-mode: vertical-rl;
        text-orientation: mixed;
        font-family: var(--font-zen);
        font-weight: 900;
        font-size: 56px;
        line-height: 1;
        color: rgba(255,255,255,0.18);
        text-transform: uppercase;
        letter-spacing: 1.8px;
        white-space: nowrap;
        pointer-events: none;
        z-index: 0;
      }

      /* PC text content */
      .hero-content-pc {
        position: absolute;
        left: 104px;
        top: 200px;
        width: 580px;
        z-index: 2;
      }
      .hero-headline .line-sm {
        font-size: 26px;
        line-height: 48px;
      }
      .hero-headline .line-lg {
        font-size: 64px;
        line-height: 82px;
      }

      /* PC stats — directly below headline */
      .hero-stats-pc {
        position: absolute;
        left: 104px;
        top: 430px;
        display: flex;
        align-items: flex-end;
        gap: 56px;
        color: #fff;
        z-index: 2;
      }
      .hero-stat-label { font-size: 16px; }
      .hero-stat-num { font-size: 34px; }
      .hero-stat-unit { font-size: 17px; }

      /* Bottom bar: desc left, buttons right — never overlap */
      .hero-bottom-pc {
        position: absolute;
        left: 104px;
        right: 104px;
        bottom: 44px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        z-index: 2;
      }
      .hero-desc-pc {
        display: block;
        font-size: 16px;
        line-height: 28px;
        color: var(--dark);
        font-family: var(--font-zen);
        flex-shrink: 1;
        min-width: 0;
      }
      .hero-buttons-pc {
        display: flex;
        gap: 16px;
        align-items: center;
        flex-shrink: 0;
      }
      .btn-phone-hero { display: none; }
      .hero-phone-pc {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        background: #fff;
        border-radius: 14px;
        padding: 12px 20px;
      }
      .hero-phone-label {
        font-size: 12px;
        font-weight: 500;
        color: var(--slate-500);
        letter-spacing: 0.04em;
      }
      .hero-phone-number {
        font-size: 26px;
        font-weight: 700;
        color: var(--dark);
        letter-spacing: 0.02em;
        font-family: var(--font-inter);
      }
      .btn-contact-hero {
        flex: 0 0 auto;
        font-size: 18px;
        border-radius: 9999px;
        padding: 16px 32px;
      }

      /* Reset tablet overrides for desktop */
      .strengths::before, .strengths::after { display: block; }
      .strength-cards { display: flex; flex-direction: row; position: absolute; }
      .strength-card.last { grid-column: unset; }
      .staff-cards { display: flex; flex-direction: row; }
      /* Services: reset to show image col */
      .services-img-col { display: block; }
      .service-cards-top { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-bottom: 0; }
      .service-cards-bottom { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; }
    }

    /* ===== SERVICES ===== */
    .services {
      background: linear-gradient(243.39deg, #f9f9f9 0%, #efefef 96.52%);
      padding: 48px 20px;
    }
    .section-eyebrow {
      font-size: 14px;
      font-weight: 700;
      font-family: var(--font-zen);
      color: var(--gold);
      text-transform: uppercase;
      letter-spacing: 2.8px;
      margin-bottom: 12px;
    }
    .section-title {
      font-size: 36px;
      font-weight: 700;
      font-family: var(--font-zen);
      line-height: 40px;
      margin-bottom: 16px;
    }
    .section-body {
      font-size: 16px;
      line-height: 30px;
      font-family: var(--font-zen);
      margin-bottom: 24px;
    }
    /* SP: stacked */
    .service-cards-top { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
    .service-cards-bottom { display: flex; flex-direction: column; gap: 12px; }
    .service-card {
      background: #fff;
      border: 1px solid var(--slate-100);
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      padding: 25px 21px;
    }
    .service-card-title {
      font-size: 20px;
      font-weight: 700;
      font-family: var(--font-zen);
      margin-bottom: 8px;
      color: var(--dark);
    }
    .service-card-desc {
      font-size: 16px;
      line-height: 24px;
      font-family: var(--font-zen);
    }

    /* CTA block shared */
    .cta-block {
      margin-top: 32px;
      text-align: center;
    }
    .cta-block-text {
      font-size: 18px;
      line-height: 30px;
      margin-bottom: 16px;
      font-family: var(--font-zen);
    }
    .btn-cta-primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: var(--orange);
      color: #fff;
      border-radius: 16px;
      padding: 22px 32px;
      font-size: 18px;
      font-weight: 700;
      font-family: var(--font-noto);
      width: 100%;
      max-width: 560px;
    }
    .btn-cta-primary .arrow-icon {
      width: 8px;
      height: 8px;
      flex-shrink: 0;
    }

    @media (min-width: 1024px) {
      .services {
        padding: 0;
        display: grid;
        grid-template-columns: 475px 1fr;
        min-height: 780px;
        position: relative;
      }
      .services-img-col {
        overflow: hidden;
        background: var(--slate-100);
        position: relative;
      }
      .services-img-col img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
      }
      .services-content-col {
        padding: 80px 48px 48px 80px;
      }
      /* PC: 2 large top + 3 small bottom */
      .service-cards-top {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0;
        flex-direction: unset;
        margin-bottom: 0;
      }
      .service-cards-bottom {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 0;
        flex-direction: unset;
      }
      .service-card { border-radius: 0; }
      .service-card.large {
        padding: 33px 33px 33px 41px;
        min-height: 130px;
      }
      .service-card.small {
        height: 85px;
        display: flex;
        align-items: center;
        padding: 0 38px;
      }
      .service-card.small .service-card-desc { display: none; }
      .service-card.small .service-card-title { margin-bottom: 0; }
      .btn-cta-primary { max-width: 560px; }
    }

    /* ===== RESULTS ===== */
    .results {
      position: relative;
      overflow: hidden;
      padding: 48px 0 32px;
    }
    .results-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
    }
    .results-bg-left,
    .results-bg-right {
      position: absolute;
      top: 0;
      height: 100%;
      width: 50%;
    }
    .results-bg-left { left: 0; }
    .results-bg-right { right: 0; }
    .results-bg-left img,
    .results-bg-right img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .results-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0,0,0,0.45);
      backdrop-filter: blur(4px);
    }
    .results-inner {
      position: relative;
      z-index: 1;
      padding: 0 20px;
    }
    .results-eyebrow {
      font-size: 14px;
      font-weight: 700;
      font-family: var(--font-zen);
      color: var(--gold);
      text-transform: uppercase;
      letter-spacing: 2.8px;
      text-align: center;
      margin-bottom: 24px;
    }
    .results-heading {
      font-size: 36px;
      font-weight: 700;
      font-family: var(--font-zen);
      color: #fff;
      text-align: center;
      line-height: 40px;
      margin-bottom: 8px;
    }
    .results-sub {
      font-size: 16px;
      font-family: var(--font-zen);
      color: #fff;
      text-align: center;
      margin-bottom: 32px;
    }
    .results-scroll {
      display: flex;
      gap: 12px;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding-bottom: 8px;
      scroll-behavior: smooth;
      scroll-snap-type: x mandatory;
      margin: 0 36px;
    }
    .results-scroll::-webkit-scrollbar { display: none; }
    .result-card {
      background: #fff;
      border: 1px solid var(--slate-100);
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      flex-shrink: 0;
      width: 280px;
      padding: 20px;
      scroll-snap-align: start;
    }
    .result-card-company {
      font-size: 20px;
      font-weight: 500;
      font-family: var(--font-zen);
      color: var(--dark);
      margin-bottom: 4px;
    }
    .result-card-role {
      font-size: 16px;
      font-weight: 700;
      font-family: var(--font-zen);
      color: var(--orange);
      margin-bottom: 8px;
    }
    .result-card-desc {
      font-size: 16px;
      line-height: 28px;
      font-family: var(--font-zen);
      margin-bottom: 16px;
    }
    .result-card-badge {
      display: inline-block;
      background: var(--slate-100);
      border-radius: 9999px;
      padding: 6px 16px;
      font-size: 12px;
      font-weight: 700;
      font-family: var(--font-zen);
    }
    /* Slider nav — hidden by default, shown via JS .is-scrollable */
    .results-slider-wrap { position: relative; }
    .results-nav {
      display: none;
      justify-content: space-between;
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      transform: translateY(-50%);
      pointer-events: none;
    }
    .results-slider-wrap.is-scrollable .results-nav { display: flex; }
    .results-btn {
      background: var(--dark);
      border: 1px solid var(--dark);
      color: #fff;
      font-size: 20px;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px 14px;
      box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
      transition: background 0.2s;
      flex-shrink: 0;
      pointer-events: all;
    }
    .results-btn:hover { background: #1e293b; }
    /* Hide scroll indicator when nav buttons are visible */
    .results-slider-wrap.is-scrollable + .scroll-indicator { display: none; }
    .scroll-indicator { margin-top: 12px; }
    .scroll-indicator img { margin: 0 auto; height: 24px; }

    .results-cta-block {
      padding: 0 20px;
      margin-top: 32px;
      text-align: center;
    }

    @media (min-width: 1024px) {
      .results {
        min-height: 700px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 80px 0 0;
      }
      /* PC: darker overlay same as SP */
      .results-overlay {
        background: rgba(0,0,0,0.5);
        backdrop-filter: blur(4px);
      }
      .results-inner {
        max-width: 1440px;
        margin: 0 auto;
        padding: 0 104px;
        width: 100%;
      }
      /* PC: all cards fit in one row, no scroll */
      .results-scroll {
        display: flex;
        overflow: hidden;
        gap: 16px;
        padding-bottom: 0;
        margin: 0;
        scroll-snap-type: none;
      }
      .result-card {
        flex: 1;
        width: 0;
        min-width: 0;
        min-height: 298px;
        flex-shrink: 1;
        scroll-snap-align: none;
      }
      .results-cta-block { margin-top: 40px; padding: 0 104px; }
      /* PC: slightly larger buttons */
      .results-btn { font-size: 22px; padding: 21px 20px; }
    }

    /* ===== STRENGTHS ===== */
    .strengths {
      background: #f0f6fb;
      padding: 48px 20px;
    }
    .strengths-eyebrow {
      font-size: 14px;
      font-weight: 700;
      font-family: var(--font-zen);
      color: var(--orange);
      text-transform: uppercase;
      letter-spacing: 2.8px;
      margin-bottom: 12px;
    }
    .strengths-title {
      font-size: 36px;
      font-weight: 700;
      font-family: var(--font-maru);
      line-height: 40px;
      margin-bottom: 16px;
      color: var(--dark);
    }
    .strengths-body {
      font-size: 16px;
      line-height: 30px;
      font-family: var(--font-zen);
      margin-bottom: 24px;
    }
    .strengths-photo {
      width: 100%;
      height: 293px;
      overflow: hidden;
      position: relative;
      background: var(--slate-100);
      margin-bottom: 24px;
    }
    .strengths-photo img {
      position: absolute;
      width: 156%;
      max-width: none;
      height: 100%;
      object-fit: cover;
      left: -46.1%;
    }
    .strengths-intro {
      font-family: var(--font-zen);
      font-size: 23px;
      line-height: 35px;
      margin-bottom: 24px;
      color: var(--dark);
    }
    .strengths-intro strong { font-size: 29px; }
    .strength-cards { display: flex; flex-direction: column; gap: 16px; }
    .strength-card {
      background: #fff;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      padding: 24px 40px;
    }
    .strength-num {
      font-size: 16px;
      font-family: var(--font-noto);
      color: var(--slate-600);
      line-height: 40px;
    }
    .strength-card-title {
      font-size: 24px;
      font-family: var(--font-zen);
      line-height: 35.5px;
      color: var(--dark);
      margin-bottom: 12px;
    }
    .strength-card-title .bold { font-weight: 700; }
    .strength-card-title .light { font-weight: 300; }
    .strength-card-desc {
      font-size: 18px;
      line-height: 30px;
      font-family: var(--font-zen);
    }

    @media (min-width: 1024px) {
      .strengths {
        background: #f8fafc;
        display: block;
        position: relative;
        min-height: 900px;
        padding: 0;
        overflow: hidden;
      }
      /* Top-right donut — center at corner (section_right, 0), thick ring band 32%〜82% */
      .strengths::before {
        content: '';
        position: absolute;
        top: -800px;
        right: -800px;
        width: 1600px;
        height: 1600px;
        border-radius: 50%;
        background: radial-gradient(circle at center,
          transparent 31%,
          rgba(159,202,255,0.5) 32%,
          rgba(193,216,234,0.42) 80%,
          transparent 81%);
        pointer-events: none;
      }
      /* Bottom-left donut — center at corner (0, section_bottom), thick ring band 32%〜80% */
      .strengths::after {
        content: '';
        position: absolute;
        bottom: -800px;
        left: -800px;
        width: 1600px;
        height: 1600px;
        border-radius: 50%;
        background: radial-gradient(circle at center,
          transparent 31%,
          rgba(193,216,234,0.55) 32%,
          rgba(193,216,234,0.4) 80%,
          transparent 81%);
        pointer-events: none;
      }
      /* Photo: right-anchored, overlaps card top */
      .strengths-photo {
        position: absolute;
        right: 0;
        width: 52.83%;
        top: 158px;
        height: 392px;
        overflow: hidden;
        margin-bottom: 0;
        z-index: 2;
      }
      .strengths-photo img {
        position: absolute;
        inset: 0;
        width: 124.83%;
        left: -16.08%;
        height: 100%;
        max-width: none;
        object-fit: cover;
        object-position: center top;
      }
      /* Header: left column, padding matches Figma text positions */
      .strengths-header {
        position: relative;
        width: 50%;
        padding: 108px 48px 0 104px;
        max-width: none;
        z-index: 1;
      }
      .strengths-eyebrow { margin-bottom: 43px; }
      .strengths-title   { margin-bottom: 48px; }
      .strengths-body    { margin-bottom: 92px; width: 509px; max-width: 100%; }
      .strengths-intro   { margin-bottom: 0; }
      /* Cards: top 532px so photo (bottom: 563px) overlaps by ~31px */
      .strength-cards {
        position: absolute;
        top: 532px;
        left: 104px;
        right: 104px;
        flex-direction: row;
        gap: 0;
        padding-top: 0;
        padding-right: 0;
        z-index: 1;
      }
      .strength-card {
        flex: 1;
        height: 323px;
        padding: 21px 24px;
        min-height: unset;
        overflow: hidden;
      }
      .strength-card-title { font-size: 22px; line-height: 33px; }
      .strength-card-desc { overflow-wrap: break-word; word-break: break-all; font-size: 14px; line-height: 26px; }
      .strengths > .cta-block {
        position: absolute;
        top: 910px;
        left: 104px;
        right: 104px;
        margin-top: 0;
        padding-right: 0;
        z-index: 1;
      }
    }

    /* ===== STAFF ===== */
    .staff {
      background: #fff;
      padding: 48px 20px;
      text-align: center;
    }
    .staff-eyebrow {
      font-size: 14px;
      font-weight: 700;
      font-family: var(--font-noto);
      color: var(--gold);
      text-transform: uppercase;
      letter-spacing: 2.8px;
      margin-bottom: 12px;
    }
    .staff-title {
      font-size: 30px;
      font-weight: 700;
      font-family: var(--font-noto);
      color: var(--dark);
      line-height: 40px;
      margin-bottom: 32px;
    }
    .staff-cards { display: flex; flex-direction: column; gap: 24px; }
    .staff-card {
      background: #fff;
      border: 1px solid var(--slate-100);
      border-radius: 24px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      padding: 32px;
      text-align: center;
    }
    .staff-avatar {
      width: 128px;
      height: 128px;
      background: var(--slate-100);
      border-radius: 9999px;
      border: 4px solid var(--slate-50);
      margin: 0 auto 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      position: relative;
    }
    .staff-avatar-img {
      font-size: 48px;
      font-weight: 900;
      color: var(--slate-200);
      font-family: var(--font-noto);
      transform: rotate(-15deg);
      display: block;
    }
    .staff-avatar-label {
      position: absolute;
      bottom: 8px;
      left: 50%;
      transform: translateX(-50%);
      background: rgba(255,255,255,0.9);
      border-radius: 9999px;
      padding: 4px 12px;
      font-size: 14px;
      font-weight: 700;
      color: var(--slate-600);
      white-space: nowrap;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    .staff-role {
      font-size: 12px;
      font-weight: 700;
      font-family: var(--font-noto);
      color: var(--gold);
      letter-spacing: 1.2px;
      text-transform: uppercase;
      margin-bottom: 8px;
    }
    .staff-location {
      font-size: 12px;
      font-weight: 700;
      font-family: var(--font-noto);
      color: var(--gold);
      letter-spacing: 1.2px;
      text-transform: uppercase;
      margin-bottom: 8px;
    }
    .staff-name-row { margin-bottom: 12px; }
    .staff-name {
      font-size: 20px;
      font-weight: 700;
      font-family: var(--font-noto);
      color: var(--dark);
    }
    .staff-name-en {
      font-size: 14px;
      color: var(--slate-400);
      font-family: var(--font-noto);
      margin-left: 8px;
    }
    .staff-desc {
      font-size: 18px;
      line-height: 26px;
      color: var(--slate-600);
      font-family: var(--font-noto);
    }

    @media (min-width: 1024px) {
      .staff { padding: 128px 144px; }
      .staff-title { font-size: 36px; }
      .staff-cards { flex-direction: row; gap: 24px; }
      .staff-card { flex: 1; }
    }

    /* ===== FAQ ===== */
    .faq { background: #fff; padding: 48px 20px; }
    .faq-eyebrow {
      font-size: 14px;
      font-weight: 700;
      font-family: var(--font-noto);
      color: var(--gold);
      letter-spacing: 2.8px;
      text-transform: uppercase;
      text-align: center;
      margin-bottom: 12px;
    }
    .faq-title {
      font-size: 30px;
      font-weight: 700;
      font-family: var(--font-noto);
      color: var(--dark);
      text-align: center;
      margin-bottom: 32px;
    }
    .faq-items { display: flex; flex-direction: column; gap: 16px; }
    .faq-item {
      background: #fff;
      border: 1px solid var(--slate-100);
      border-radius: 16px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.05);
      padding: 20px;
    }
    .faq-header {
      display: flex;
      gap: 16px;
      align-items: flex-start;
      margin-bottom: 12px;
    }
    .faq-q-badge {
      width: 32px;
      height: 32px;
      background: var(--dark);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      font-size: 18px;
      font-weight: 700;
      color: var(--gold);
      font-family: var(--font-noto);
    }
    .faq-question {
      font-size: 18px;
      font-weight: 700;
      font-family: var(--font-noto);
      color: var(--dark);
      flex: 1;
      line-height: 28px;
    }
    .faq-answer-wrap {
      border-left: 2px solid var(--slate-100);
      padding: 4px 0 4px 16px;
      margin-left: 0;
    }
    .faq-answer {
      font-size: 18px;
      line-height: 28px;
      color: var(--slate-600);
      font-family: var(--font-noto);
    }

    @media (min-width: 1024px) {
      .faq { padding: 80px 272px; }
      .faq-items { max-width: 848px; margin: 0 auto; }
      .faq-item { padding: 32px; }
    }

    /* ===== FOOTER ===== */
    .site-footer {
      background: var(--dark);
      position: relative;
      overflow: hidden;
      min-height: 400px;
    }
    .footer-bg {
      position: absolute;
      inset: 0;
    }
    .footer-bg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .footer-inner {
      position: relative;
      z-index: 1;
      min-height: 400px;
    }

    /* ===== Arrow icon inline ===== */
    .icon-arrow {
      display: inline-block;
      width: 20px;
      height: 20px;
      background-image: url('image/arrow.svg');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      vertical-align: middle;
    }

    /* ===== Responsive visibility ===== */
    .sp-only { display: block; }
    .pc-only { display: none; }
    @media (min-width: 1024px) {
      .sp-only { display: none; }
      .pc-only { display: block; }
    }

    /* ===== HERO KEYFRAMES ===== */
    @keyframes heroFadeUp {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes heroFadeLeft {
      from { opacity: 0; transform: translateX(48px); }
      to   { opacity: 1; transform: translateX(0); }
    }
    @keyframes heroWipeFromRight {
      from { clip-path: inset(0 0 0 100%); }
      to   { clip-path: inset(0 0 0 0%); }
    }
    @keyframes heroFadeRight {
      from { opacity: 0; transform: translateX(-32px); }
      to   { opacity: 1; transform: translateX(0); }
    }

    /* SP Hero — hidden until image loads, then JS adds .hero-img-loaded */
    .hero-keyvisual-sp {
      clip-path: inset(0 0 0 100%);
      transition: clip-path 2.0s cubic-bezier(0.16,1,0.3,1);
    }
    .hero-keyvisual-sp.hero-img-loaded {
      clip-path: inset(0 0 0 0%);
    }
    .hero-text-sp {
      animation: heroFadeUp 0.7s ease 0.35s both;
    }
    .hero-stats-sp {
      animation: heroFadeUp 0.7s ease 0.55s both;
    }
    .hero-body-sp {
      animation: heroFadeUp 0.7s ease 0.7s both;
    }
    .hero-buttons-sp {
      animation: heroFadeUp 0.7s ease 0.85s both;
    }

    /* ===== PHOTO ANIMATIONS ===== */
    .photo-reveal {
      opacity: 0;
      transform: translateX(48px);
      transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1);
    }
    .photo-reveal.is-visible {
      opacity: 1;
      transform: translateX(0);
    }
    .photo-reveal-left {
      opacity: 0;
      transform: translateX(-48px);
      transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.22, 0.61, 0.36, 1);
    }
    .photo-reveal-left.is-visible {
      opacity: 1;
      transform: translateX(0);
    }

    /* ===== HOVER EFFECTS ===== */
    /* Header nav links */
    .header-nav a {
      transition: color 0.2s ease;
    }
    .header-nav a:hover { color: var(--orange); }
    .header-subnav a {
      transition: color 0.2s ease, opacity 0.2s ease;
    }
    .header-subnav a:hover { color: var(--orange); opacity: 0.8; }

    /* Header buttons */
    .header-docs {
      transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    }
    .header-docs:hover { background: var(--dark); color: #fff; transform: translateY(-1px); }
    .header-cta-btn {
      transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    }
    .header-cta-btn:hover {
      background: #8B0000;
      transform: translateY(-1px);
      box-shadow: 0 6px 16px rgba(139,0,0,0.3);
    }

    /* Hero buttons */
    .btn-phone-hero {
      transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    }
    .btn-phone-hero:hover {
      border-color: var(--slate-400);
      box-shadow: 0 4px 12px rgba(0,0,0,0.12);
      transform: translateY(-2px);
    }
    .btn-contact-hero {
      transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    }
    .btn-contact-hero:hover {
      background: #8B0000;
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(139,0,0,0.3);
    }

    /* Mobile menu buttons */
    .mobile-btn-phone {
      transition: border-color 0.2s ease, background 0.2s ease;
    }
    .mobile-btn-phone:hover { border-color: var(--slate-400); background: var(--slate-50); }
    .mobile-btn-contact {
      transition: background 0.2s ease;
    }
    .mobile-btn-contact:hover { background: #8B0000; }

    /* CTA primary button */
    .btn-cta-primary {
      transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    }
    .btn-cta-primary:hover {
      background: #8B0000;
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(139,0,0,0.3);
    }

    /* FAQ items */
    .faq-header {
      transition: opacity 0.2s ease;
    }
    .faq-header:hover { opacity: 0.75; }

    /* ===== SCROLL ANIMATION ===== */
    .scroll-reveal {
      opacity: 0;
      transform: translateY(28px);
      transition: opacity 0.65s ease, transform 0.65s ease;
    }
    .scroll-reveal.is-visible {
      opacity: 1;
      transform: translateY(0);
    }
    /* Stagger delay for sibling groups */
    .scroll-reveal[data-delay="1"] { transition-delay: 0.1s; }
    .scroll-reveal[data-delay="2"] { transition-delay: 0.2s; }
    .scroll-reveal[data-delay="3"] { transition-delay: 0.3s; }