/* ---------- Hero ---------- */
  .hero { padding: 0; background: var(--white); }
  .hero-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 40px 24px 72px;
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  .hero-photo {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    aspect-ratio: 3 / 2;
    background: linear-gradient(160deg, var(--paper), var(--sand));
  }
  .hero-photo img { width: 100%; height: 100%; object-fit: contain; object-position: center; display: block; }
  .hero-text { display: flex; flex-direction: column; gap: 32px; }
  .hero-copy { text-align: center; }
  .hero h1 {
    font-size: 27px;
    font-weight: 500;
    line-height: 1.75;
    letter-spacing: 0.05em;
    margin: 0 0 20px;
    color: var(--charcoal);
  }
  .hero h1 .accent { color: var(--cta); }
  .hero p.sub {
    font-size: 14.5px;
    letter-spacing: 0.02em;
    color: var(--ink-soft);
    margin: 0 auto;
    max-width: 32em;
  }

  .trust-strip {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 11.5px;
    letter-spacing: 0.03em;
    color: var(--ink-soft);
    margin-top: 26px;
  }
  .trust-strip span {
    background: var(--paper);
    border: 1px solid var(--line-soft);
    padding: 7px 14px;
    border-radius: 999px;
    font-weight: 500;
  }

  .offer-card {
    background: var(--charcoal);
    border-radius: var(--radius-lg);
    padding: 30px 26px;
    text-align: center;
    box-shadow: 0 20px 48px rgba(46, 43, 39, 0.18);
    position: relative;
    color: var(--white);
  }
  .offer-badge {
    display: inline-block;
    background: rgba(253, 252, 250, 0.1);
    border: 1px solid rgba(253, 252, 250, 0.22);
    color: var(--white);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    padding: 7px 16px;
    border-radius: 999px;
    margin-bottom: 18px;
  }
  .offer-card .price-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 12px;
    margin: 6px 0 6px;
  }
  .offer-card .price-strike {
    font-size: 14px;
    color: rgba(253, 252, 250, 0.45);
    text-decoration: line-through;
  }
  .offer-card .price {
    font-size: 42px;
    font-weight: 300;
    letter-spacing: 0.02em;
    color: var(--white);
  }
  .offer-card .price small { font-size: 15px; font-weight: 400; margin-left: 3px; color: rgba(253,252,250,0.7); }
  .offer-card .price-note { font-size: 11.5px; letter-spacing: 0.03em; color: rgba(253, 252, 250, 0.55); margin: 0 0 26px; }

  /* ---------- Concept ---------- */
  .concept-section { background: var(--paper); text-align: center; }
  .concept-section .container { max-width: 720px; }
  .concept-section .section-title { margin-bottom: 24px; }
  .concept-section .section-lead { margin: 0 0 40px; }

  /* ---------- Strengths ---------- */
  .strengths-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .strength-card {
    background: var(--white);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 40px 32px;
  }
  .strength-card .num {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--taupe-dark);
  }
  .strength-card h3 {
    font-size: 19px;
    font-weight: 500;
    letter-spacing: 0.03em;
    margin: 14px 0 16px;
    color: var(--charcoal);
  }
  .strength-card p { color: var(--ink-soft); font-size: 14px; letter-spacing: 0.01em; margin: 0; }
  .strength-icon {
    width: 54px; height: 54px;
    border-radius: 50%;
    background: var(--paper);
    color: var(--taupe-dark);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 22px;
  }
  .strength-icon svg { width: 24px; height: 24px; stroke-width: 1.3; }

  /* ---------- Menu (症状・施術法から探す) ---------- */
  .menu-section { background: var(--white); }
  .menu-grid {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 0 -24px;
    padding: 4px 24px 12px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .menu-grid::-webkit-scrollbar { display: none; }
  .menu-card {
    flex: 0 0 76%;
    scroll-snap-align: start;
    background: var(--white);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .3s var(--ease), transform .3s var(--ease);
  }
  .menu-card:hover { box-shadow: 0 14px 34px rgba(46, 43, 39, 0.09); transform: translateY(-3px); }
  .menu-photo.ph-image { aspect-ratio: 4 / 3; border-radius: 0; border: none; border-bottom: 1px solid var(--line-soft); }
  .menu-photo.is-real { aspect-ratio: 4 / 3; border-bottom: 1px solid var(--line-soft); overflow: hidden; }
  .menu-photo.is-real img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; display: block; }
  .menu-photo.is-pair { aspect-ratio: 4 / 3; border-bottom: 1px solid var(--line-soft); overflow: hidden; display: flex; gap: 2px; background: var(--line-soft); }
  .menu-photo.is-pair img { flex: 1; width: 50%; height: 100%; object-fit: cover; display: block; }
  .menu-body { padding: 24px 22px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
  .menu-body h3 { font-size: 16px; font-weight: 500; letter-spacing: 0.03em; color: var(--charcoal); margin: 0; line-height: 1.6; }
  .menu-body p { font-size: 12.8px; letter-spacing: 0.01em; color: var(--ink-soft); margin: 0; flex: 1; }
  .menu-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--taupe-dark);
    padding-top: 14px;
    margin-top: 6px;
    border-top: 1px solid var(--line-soft);
    transition: color .2s ease;
  }
  .menu-link svg { width: 13px; height: 13px; stroke-width: 1.8; transition: transform .25s var(--ease); }
  .menu-link:hover { color: var(--cta); }
  .menu-link:hover svg { transform: translateX(4px); }

  @media (min-width: 480px) { .menu-card { flex-basis: 58%; } }

  @media (min-width: 640px) {
    .menu-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      overflow: visible;
      margin: 0;
      padding: 4px 0 0;
    }
    .menu-card { flex: none; }
  }

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

  /* ---------- Promise ---------- */
  .promise-section { background: var(--paper); }
  .promise-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .promise-item {
    background: var(--white);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-md);
    padding: 26px 24px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
  }
  .promise-item .check {
    flex-shrink: 0;
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 1px solid var(--taupe);
    color: var(--taupe-dark);
    display: flex; align-items: center; justify-content: center;
    margin-top: 2px;
  }
  .promise-item .check svg { width: 13px; height: 13px; }
  .promise-item h4 { margin: 0 0 6px; font-size: 15px; font-weight: 500; letter-spacing: 0.02em; color: var(--charcoal); }
  .promise-item p { margin: 0; font-size: 13.5px; letter-spacing: 0.01em; color: var(--ink-soft); }

  /* ---------- Flow ---------- */
  .flow-list { display: flex; flex-direction: column; gap: 0; }
  .flow-step {
    display: flex;
    gap: 22px;
    padding: 26px 0;
    position: relative;
  }
  .flow-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 21px; top: 64px; bottom: -10px;
    width: 1px;
    background: var(--line-soft);
  }
  .flow-num {
    flex-shrink: 0;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid var(--charcoal);
    color: var(--charcoal);
    font-weight: 400;
    font-size: 15px;
    display: flex; align-items: center; justify-content: center;
    z-index: 1;
    background: var(--white);
  }
  .flow-body { padding-top: 8px; }
  .flow-body h4 { margin: 0 0 6px; font-size: 15.5px; font-weight: 500; letter-spacing: 0.02em; color: var(--charcoal); }
  .flow-body p { margin: 0; font-size: 13.5px; letter-spacing: 0.01em; color: var(--ink-soft); }

  /* ---------- Staff ---------- */
  .staff-section { background: var(--white); }
  .staff-card {
    background: var(--paper);
    border-radius: var(--radius-lg);
    padding: 44px 36px;
    display: flex;
    flex-direction: column;
    gap: 26px;
    align-items: center;
    text-align: center;
  }
  .staff-photo.ph-image { width: 132px; height: 132px; border-radius: 50%; flex-shrink: 0; }
  .staff-photo.ph-image svg { width: 28px; height: 28px; }
  .staff-photo.ph-image span { font-size: 10.5px; }
  .staff-photo.is-real {
    width: 132px; height: 132px; border-radius: 50%; flex-shrink: 0;
    overflow: hidden; border: 1px solid var(--line-soft);
  }
  .staff-photo.is-real img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .staff-name { font-size: 17px; font-weight: 500; letter-spacing: 0.05em; margin: 0 0 4px; color: var(--charcoal); }
  .staff-role { font-size: 12px; letter-spacing: 0.08em; color: var(--taupe-dark); font-weight: 500; margin: 0 0 18px; }
  .staff-msg { font-size: 13.5px; letter-spacing: 0.01em; color: var(--ink-soft); margin: 0; text-align: left; max-width: 46em; }

  /* ---------- News section wrapper (news-list 本体は news.css で共通化済み) ---------- */
  .news-section { background: var(--white); }

  /* ---------- Access ---------- */
  .access-section { padding-bottom: 0; }
  .access-grid { display: flex; flex-direction: column; gap: 28px; }
  .info-card {
    background: var(--white);
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 30px;
  }
  table.hours { width: 100%; border-collapse: collapse; font-size: 13px; }
  table.hours th, table.hours td {
    padding: 12px 6px;
    text-align: center;
    border-bottom: 1px solid var(--line-soft);
  }
  table.hours th { color: var(--ink-faint); font-weight: 500; letter-spacing: 0.05em; }
  table.hours td.holiday { color: var(--cta); font-weight: 600; }
  .hours-image-card img { width: 100%; height: auto; display: block; border-radius: var(--radius-md); }
  .hours-image-note { font-size: 11.5px; letter-spacing: 0.02em; color: var(--ink-soft); margin: 16px 0 0; }
  .map-embed { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line-soft); height: 100%; min-height: 320px; }
  .map-embed iframe { width: 100%; height: 100%; display: block; border: 0; }
  .info-row { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--line-soft); }
  .info-row:last-child { border-bottom: none; }
  .info-row svg { width: 19px; height: 19px; stroke-width: 1.3; color: var(--taupe-dark); flex-shrink: 0; margin-top: 2px; }
  .info-row .label { font-size: 11px; letter-spacing: 0.05em; color: var(--ink-faint); margin-bottom: 3px; }
  .info-row .value { font-size: 15px; font-weight: 500; letter-spacing: 0.01em; color: var(--charcoal); }
  .info-row .value a.tel { color: var(--charcoal); }

  @media (min-width: 860px) {
    .hero-inner { flex-direction: row; align-items: center; padding: 72px 40px 108px; gap: 64px; }
    .hero-text { order: 1; flex: 1.05; gap: 28px; }
    .hero-copy { text-align: left; }
    .hero h1 { font-size: 34px; }
    .hero p.sub { margin: 0; }
    .trust-strip { justify-content: flex-start; }
    .hero-photo { order: 2; flex: 0.95; }
    .offer-card { text-align: left; }
    .offer-card .price-row, .offer-card .price-note { justify-content: flex-start; text-align: left; }
    .access-grid { flex-direction: row; align-items: stretch; }
    .access-grid > div { flex: 1; }
  }

  @media (min-width: 1024px) {
    .flow-list { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
    .flow-step { flex-direction: column; align-items: flex-start; padding: 0; }
    .flow-step::before { display: none; }
    .flow-num { margin-bottom: 16px; }
  }