/* --------------------------------------------------
   File: site.hero-request.css
   担当:
   - ヒーロー
   - お知らせ
   - 受付方法（STEP1/STEP2）
   - FAQ、About など中盤セクション
-------------------------------------------------- */


    /* トップ：セクション間は境目の横線＋内側余白（gap と padding の二重は避ける） */
    body.page-index main {
      display: flex;
      flex-direction: column;
      gap: 0;
      padding-bottom: var(--section-block-gap);
    }

    body.page-index main > section:not(.hero):not(.hero-features) {
      padding-block: var(--section-block-gap);
    }

    /* 特徴タイル：丸みのある縦長カード（PC 横1列4枚 / スマホ 縦1列） */
    .hero-features {
      --hero-feature-scale: 0.667;
      --hero-feature-max: var(--site-header-max);
      --hero-feature-tile-max: calc((var(--hero-feature-max) - 48px) / 4);
    }

    .hero-feature-tiles {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      align-items: stretch;
      gap: clamp(11px, 1.67vw, 16px);
      width: 100%;
      max-width: min(100%, var(--hero-feature-max));
      margin-inline: auto;
    }

    .hero-feature-tile {
      display: grid;
      grid-template-rows: 1fr 1fr;
      height: 100%;
      /* 正方形写真＋本文に近い高さのまま、上下を半々に */
      aspect-ratio: 1 / 1.7;
      min-height: 0;
      min-width: 0;
      margin: 0;
      padding: 0;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: calc(18px * var(--hero-feature-scale));
      background: var(--hero-feature-tile-bg);
      box-shadow: var(--shadow-header);
      container-type: inline-size;
      container-name: hero-feature-tile;
    }

    .hero-feature-tile__media {
      box-sizing: border-box;
      min-height: 0;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: clamp(8px, 2.4cqw, 12px);
      overflow: hidden;
      background: var(--hero-feature-tile-bg);
    }

    .hero-feature-tile__media img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      border-radius: var(--radius-photo);
    }

    .hero-feature-tile__body {
      min-width: 0;
      min-height: 0;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: clamp(7px, 1.7cqw, 9px);
      padding: clamp(9px, 2.8cqw, 12px);
      text-align: left;
      color: var(--hero-feature-tile-text);
      overflow: hidden;
    }

    .hero-feature-tile__eyebrow {
      margin: 0;
      font-size: clamp(0.75rem, 3.4cqw, 0.9rem);
      font-weight: 700;
      line-height: 1.35;
      letter-spacing: 0.02em;
      color: var(--hero-feature-tile-text);
    }

    .hero-feature-tile__heading {
      margin: 0;
      flex-shrink: 0;
      box-sizing: border-box;
      width: 100%;
      padding: clamp(4px, 1.2cqw, 6px) clamp(8px, 2.4cqw, 10px);
      border-radius: var(--radius-button);
      background-color: var(--theme-sage-dark);
      font-family: var(--font-hero-tile);
      font-size: clamp(1.06rem, 6.4cqw, 1.35rem);
      font-weight: 700;
      line-height: 1.28;
      letter-spacing: 0.02em;
      color: #ffffff;
      overflow-wrap: anywhere;
      word-break: keep-all;
    }

    .hero-feature-tile__heading--long {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: clamp(4px, 1.2cqw, 6px);
      padding: 0;
      background: none;
    }

    .hero-feature-tile__heading-line {
      display: block;
      box-sizing: border-box;
      width: 100%;
      max-width: 100%;
      padding: clamp(3px, 1cqw, 5px) clamp(8px, 2.4cqw, 10px);
      border-radius: var(--radius-button);
      background-color: var(--theme-sage-dark);
      color: #ffffff;
      font-family: var(--font-hero-tile);
      font-size: clamp(1.06rem, 6.4cqw, 1.35rem);
      font-weight: 700;
      line-height: 1.28;
      letter-spacing: 0.02em;
    }

    .hero-feature-tile__heading-line--sub {
      padding: 0;
      background: none;
      border-radius: 0;
      font-family: inherit;
      font-size: clamp(0.75rem, 3.4cqw, 0.9rem);
      font-weight: 700;
      line-height: 1.35;
      letter-spacing: 0.02em;
      color: var(--hero-feature-tile-text);
    }

    .hero-feature-tile__desc {
      display: flex;
      flex-direction: column;
      gap: clamp(6px, 1.9cqw, 8px);
      margin: 0;
      flex: 1 1 auto;
      min-height: 0;
      font-size: clamp(0.75rem, 3.3cqw, 0.875rem);
      font-weight: 400;
      line-height: 1.48;
      letter-spacing: 0.02em;
      color: var(--hero-feature-tile-text-muted);
      overflow-wrap: anywhere;
      word-break: keep-all;
    }

    .hero-feature-tile__desc > span {
      display: block;
    }

    .hero-feature-tile__cta-row {
      display: flex;
      flex-direction: row;
      align-items: stretch;
      gap: 5px;
      margin-top: auto;
      width: 100%;
    }

    .hero-feature-tile__cta-row .hero-feature-tile__btn {
      flex: 1 1 0;
      min-width: 0;
      margin-top: 0;
      padding: 7px;
    }

    .hero-feature-tile__btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      margin-top: auto;
      min-height: 30px;
      padding: 7px;
      font-size: clamp(0.8rem, 3.4cqw, 0.9375rem);
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: 0.03em;
      text-align: center;
      text-decoration: none;
      color: #1d1d1f;
      background: #ffffff;
      border: 1px solid var(--theme-sage-dark);
      border-radius: var(--radius-button);
      box-shadow: none;
    }

    .hero-feature-tile__btn-icon {
      flex: 0 0 auto;
      width: clamp(15px, 6.5cqw, 19px);
      height: clamp(15px, 6.5cqw, 19px);
      object-fit: contain;
    }

    .hero-feature-tile__btn--line {
      color: #ffffff;
      background: #06c755;
      box-shadow: 0 2px 10px rgba(6, 199, 85, 0.32);
    }

    .hero-feature-tile__btn--line:hover,
    .hero-feature-tile__btn--line:focus-visible {
      color: #ffffff;
      background: #05b34c;
      border-color: transparent;
      box-shadow: 0 2px 12px rgba(6, 199, 85, 0.4);
    }

    .hero-feature-tile__btn--form {
      color: #1d1d1f;
      background: #ffffff;
      border: 1px solid var(--theme-sage-dark);
    }

    .hero-feature-tile__btn--form:hover,
    .hero-feature-tile__btn--form:focus-visible {
      color: var(--ui-hover-amber-text);
      background: var(--ui-hover-amber-bg);
      border-color: var(--ui-hover-amber-border);
      box-shadow: var(--shadow-header-hover);
    }

    .hero-feature-tile__btn:focus-visible {
      outline: 2px solid var(--header-text);
      outline-offset: 2px;
    }

    /* ヒーロー直下：特徴タイル（4枚・1200px幅） */
    body.page-index .hero-features {
      --hero-stage-inset-x: clamp(12px, 2.4vw, 20px);
      background-color: #e5e5ea;
      padding-block: clamp(32px, 4.3vw, 48px);
      box-sizing: border-box;
    }

    body.page-index .hero-features .container {
      width: min(
        calc(100% - 2 * var(--hero-stage-inset-x)),
        var(--hero-feature-max)
      );
      max-width: min(
        calc(100% - 2 * var(--hero-stage-inset-x)),
        var(--hero-feature-max)
      );
      margin-inline: auto;
      padding-left: 0;
      padding-right: 0;
      box-sizing: border-box;
    }

    /* ヒーロー直下：よくあるご相談（修理事例カルーセル） */
    .common-consult {
      overflow: hidden;
    }

    .common-consult__panel {
      box-sizing: border-box;
      width: 100%;
      max-width: 100%;
      margin-right: auto;
      margin-left: 0;
      padding: 0;
    }

    .common-consult__heading {
      margin: 0 0 clamp(12px, 1.8vw, 18px);
      font-size: var(--section-heading-price-size);
      font-weight: 700;
      line-height: 1.4;
      text-align: left;
      color: var(--text);
    }

    .common-consult-carousel {
      --common-consult-card-scale: 0.75;
      --common-consult-nav-size: clamp(36px, 4.8vw, 44px);
      --common-consult-nav-icon-size: clamp(18px, 2.4vw, 22px);
      --common-consult-nav-card-gap: clamp(20px, 3.2vw, 36px);
      --common-consult-slide-gap: clamp(10px, 1.8vw, 16px);
      --common-consult-slide-width: min(
        calc(800px * var(--common-consult-card-scale)),
        calc(82vw * var(--common-consult-card-scale))
      );
      /* 写真2枚＋カード余白がちょうど収まる高さ（余白を上下左右で揃えるため） */
      --common-consult-slide-height: calc(var(--common-consult-slide-width) * 0.8);
      --common-consult-media-height: 440px;
      --common-consult-side-zone-width: calc(
        (100% - var(--common-consult-slide-width)) / 2
      );
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: clamp(10px, 2vw, 16px);
      box-sizing: border-box;
      width: 100vw;
      max-width: 100vw;
      margin-inline: calc(50% - 50vw);
      padding-inline: 0;
    }

    .common-consult-carousel__viewport {
      container-type: inline-size;
      position: relative;
      overflow: hidden;
      width: 100%;
      min-width: 0;
      padding-top: clamp(16px, 3vw, 28px);
      padding-bottom: clamp(32px, 5vw, 52px);
      perspective: clamp(900px, 120vw, 1400px);
      perspective-origin: 50% 42%;
    }

    .common-consult-carousel__hitzone {
      position: absolute;
      top: 0;
      bottom: 0;
      z-index: 5;
      width: max(0px, var(--common-consult-side-zone-width));
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
      cursor: pointer;
    }

    .common-consult-carousel__hitzone--prev {
      left: 0;
    }

    .common-consult-carousel__hitzone--next {
      right: 0;
    }

    .common-consult-carousel__hitzone:focus-visible {
      outline: 2px solid var(--text);
      outline-offset: -4px;
    }

    .common-consult-carousel__track {
      display: flex;
      align-items: center;
      gap: var(--common-consult-slide-gap);
      width: max-content;
      min-width: 100%;
      transform-style: preserve-3d;
      will-change: transform;
      transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    }

    @media (prefers-reduced-motion: reduce) {
      .common-consult-carousel__track {
        transition-duration: 0.01ms;
      }
    }

    .common-consult-slide {
      /* カード内の余白・行間は写真も含めてこの2つで統一 */
      --consult-card-pad: clamp(14px, 1.8vw, 20px);
      --consult-card-gap: clamp(8px, 1.1vw, 12px);
      position: relative;
      box-sizing: border-box;
      flex: 0 0 var(--common-consult-slide-width);
      width: var(--common-consult-slide-width);
      height: var(--common-consult-slide-height);
      min-height: var(--common-consult-slide-height);
      max-height: var(--common-consult-slide-height);
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: var(--consult-card-gap);
      align-items: stretch;
      min-width: 0;
      padding: var(--consult-card-pad);
      background: #ffffff;
      border: 1px solid var(--line);
      border-radius: calc(var(--radius) - 2px);
      box-shadow: none;
      transform-style: preserve-3d;
      backface-visibility: hidden;
      opacity: 1;
      transform: rotateY(0deg) scale(0.84) translateZ(-140px);
      cursor: default;
      transition:
        transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.25s ease,
        border-color 0.25s ease;
    }

    .common-consult-slide:hover {
      border-color: var(--theme-sage-dark);
      box-shadow: inset 0 0 0 2px var(--theme-sage-dark);
    }

    .common-consult-carousel.is-common-consult-carousel-paused
      .common-consult-slide.is-common-consult-slide-active {
      border-color: var(--theme-sage-dark);
      box-shadow: inset 0 0 0 2px var(--theme-sage-dark);
    }

    .common-consult-carousel.is-common-consult-carousel-paused
      .common-consult-slide.is-common-consult-slide-active::after {
      content: "一時停止中";
      position: absolute;
      top: clamp(8px, 1.2vw, 12px);
      right: clamp(8px, 1.2vw, 12px);
      z-index: 5;
      padding: clamp(3px, 0.5vw, 4px) clamp(8px, 1.1vw, 10px);
      border: 1px solid color-mix(in srgb, var(--theme-sage-dark) 40%, var(--line));
      border-radius: 999px;
      background: color-mix(in srgb, #ffffff 94%, transparent);
      color: var(--theme-sage-dark);
      font-size: clamp(0.625rem, 1.1vw, 0.75rem);
      font-weight: 700;
      line-height: 1.3;
      letter-spacing: 0.05em;
      pointer-events: none;
      box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    }

    .common-consult-slide[data-offset="-1"],
    .common-consult-slide[data-offset="1"] {
      z-index: 2;
    }

    .common-consult-slide[data-offset="-1"] {
      transform: rotateY(24deg) scale(0.9) translateZ(-36px);
    }

    .common-consult-slide[data-offset="1"] {
      transform: rotateY(-24deg) scale(0.9) translateZ(-36px);
    }

    .common-consult-slide[data-offset="-2"],
    .common-consult-slide[data-offset="2"] {
      z-index: 1;
      transform: rotateY(0deg) scale(0.8) translateZ(-180px);
    }

    .common-consult-slide[data-offset="-2"] {
      transform: rotateY(32deg) scale(0.82) translateZ(-110px);
    }

    .common-consult-slide[data-offset="2"] {
      transform: rotateY(-32deg) scale(0.82) translateZ(-110px);
    }

    .common-consult-slide[data-offset="-3"],
    .common-consult-slide[data-offset="3"] {
      z-index: 0;
    }

    .common-consult-slide[data-offset="-3"] {
      transform: rotateY(36deg) scale(0.78) translateZ(-150px);
    }

    .common-consult-slide[data-offset="3"] {
      transform: rotateY(-36deg) scale(0.78) translateZ(-150px);
    }

    .common-consult-slide.is-common-consult-slide-active {
      z-index: 4;
      transform: rotateY(0deg) scale(1) translateZ(56px);
    }

    .common-consult-slide.is-common-consult-slide-active:hover {
      border-color: var(--theme-sage-dark);
      box-shadow: inset 0 0 0 2px var(--theme-sage-dark);
    }

    @media (prefers-reduced-motion: reduce) {
      .common-consult-slide {
        transition-duration: 0.01ms;
        transform: none;
      }

      .common-consult-slide.is-common-consult-slide-active {
        transform: none;
      }
    }

    .common-consult-slide__media {
      grid-column: 1;
      grid-row: 1 / span 2;
      min-width: 0;
      min-height: 0;
    }

    .common-consult-slide__ba {
      --ba-photo-width: 100%;
      --ba-overlap: 0;
      position: relative;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 1fr 1fr;
      align-content: stretch;
      justify-items: stretch;
      gap: var(--consult-card-gap);
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      max-width: 100%;
      margin-inline: 0;
      padding: 0;
      overflow: hidden;
    }

    .common-consult-slide__ba-item {
      position: relative;
      margin: 0;
      min-width: 0;
      min-height: 0;
      width: var(--ba-photo-width);
      height: 100%;
    }

    .common-consult-slide__ba-item--before {
      grid-row: 1;
      justify-self: stretch;
      z-index: 1;
      transform: none;
    }

    .common-consult-slide__ba-item--after {
      grid-row: 2;
      justify-self: stretch;
      z-index: 2;
      margin-top: 0;
      transform: none;
    }

    .common-consult-slide__ba--single::before,
    .common-consult-slide__ba--single::after {
      content: none;
    }

    .common-consult-slide__ba--single .common-consult-slide__ba-item {
      grid-row: 1 / span 2;
      grid-column: 1;
      align-self: center;
      justify-self: stretch;
      position: relative;
      top: auto;
      left: auto;
      z-index: 1;
      width: 100%;
      height: calc((100% - var(--consult-card-gap)) / 2);
      min-height: calc((100% - var(--consult-card-gap)) / 2);
      max-height: calc((100% - var(--consult-card-gap)) / 2);
      transform: none;
      margin: 0;
    }

    .common-consult-slide__ba--single .common-consult-slide__photo {
      width: 100%;
      height: 100%;
      min-height: 0;
      aspect-ratio: auto;
    }

    .common-consult-slide__photo {
      display: block;
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      min-height: 0;
      aspect-ratio: auto;
      padding: 0;
      border-radius: var(--radius-photo);
      border: none;
      background: #f5f5f7;
      box-shadow: none;
      overflow: hidden;
    }

    .common-consult-slide__photo img {
      display: block;
      width: 100%;
      height: 100%;
      border-radius: inherit;
      object-fit: cover;
    }

    .common-consult-slide__body {
      grid-column: 2;
      grid-row: 1 / span 2;
      min-width: 0;
      min-height: 0;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 1fr 1fr;
      gap: var(--consult-card-gap);
      overflow: hidden;
      padding: 0;
      text-align: center;
    }

    .common-consult-slide__list-zone {
      grid-row: 1;
      grid-column: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--consult-card-gap);
      min-width: 0;
      min-height: 0;
      width: 100%;
    }

    .common-consult-slide__eyebrow {
      margin: 0;
      width: auto;
      max-width: 100%;
      font-size: clamp(0.75rem, 1.3vw, 0.8125rem);
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--theme-sage-dark);
    }

    .common-consult-slide__title-zone {
      grid-row: 2;
      grid-column: 1;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: clamp(8px, 1vw, 12px);
      min-width: 0;
      min-height: 0;
      width: 100%;
    }

    .common-consult-slide__title {
      width: 100%;
      box-sizing: border-box;
      flex: none;
      margin: 0;
      padding: clamp(5px, 0.9vw, 7px) clamp(10px, 1.4vw, 14px);
      border-bottom: none;
      border-radius: var(--radius-button);
      background-color: var(--theme-sage-dark);
      font-size: clamp(0.875rem, 1.45vw, 1rem);
      font-weight: 700;
      line-height: 1.4;
      color: #ffffff;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .common-consult-slide__lead {
      width: 100%;
      flex: none;
      margin: 0;
      font-size: clamp(0.8125rem, 1.55vw, 0.9375rem);
      font-weight: 500;
      line-height: 1.65;
      color: color-mix(in srgb, var(--text) 82%, #ffffff);
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 5;
      height: calc(5 * 1.65em);
    }

    .common-consult-slide__list {
      --consult-list-gap: clamp(5px, 0.9vw, 8px);
      width: max-content;
      max-width: 100%;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      flex: none;
      justify-content: flex-start;
      gap: var(--consult-list-gap);
      margin: 0;
      padding: 0;
      list-style: none;
      font-size: clamp(0.8125rem, 1.5vw, 0.9rem);
      height: auto;
      max-height: calc(3 * 1.5em + 2 * var(--consult-list-gap));
      overflow: hidden;
      text-align: left;
    }

    .common-consult-slide__list li {
      position: relative;
      padding-left: 1em;
      font-size: clamp(0.8125rem, 1.5vw, 0.9rem);
      font-weight: 600;
      line-height: 1.5;
      color: var(--text);
      text-align: left;
    }

    .common-consult-slide__list li::before {
      content: "・";
      position: absolute;
      left: 0;
      top: 0;
    }

    .common-consult-carousel__nav {
      position: absolute;
      z-index: 6;
      top: 50%;
      transform: translateY(-50%);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: var(--common-consult-nav-size);
      height: var(--common-consult-nav-size);
      margin: 0;
      padding: 0;
      border: 1px solid color-mix(in srgb, var(--header-text) 18%, var(--line));
      border-radius: 50%;
      background: #ffffff;
      color: var(--text);
      box-shadow: var(--shadow-header);
      cursor: pointer;
      transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .common-consult-carousel__nav--prev {
      left: max(
        clamp(10px, 2.5vw, 22px),
        calc(
          (100% - var(--common-consult-slide-width)) / 2 -
            var(--common-consult-nav-size) - var(--common-consult-nav-card-gap)
        )
      );
    }

    .common-consult-carousel__nav--next {
      right: max(
        clamp(10px, 2.5vw, 22px),
        calc(
          (100% - var(--common-consult-slide-width)) / 2 -
            var(--common-consult-nav-size) - var(--common-consult-nav-card-gap)
        )
      );
    }

    .common-consult-carousel__nav-icon {
      display: block;
      width: var(--common-consult-nav-icon-size);
      height: var(--common-consult-nav-icon-size);
      flex-shrink: 0;
    }

    .common-consult-carousel__nav:hover,
    .common-consult-carousel__nav:focus-visible {
      color: var(--ui-hover-amber-text);
      border-color: var(--ui-hover-amber-border);
      background: var(--ui-hover-amber-bg);
      box-shadow: var(--shadow-header-hover);
      transform: translateY(-50%) scale(1.04);
    }

    .common-consult-carousel__nav:active {
      transform: translateY(-50%) scale(0.96);
      background: var(--ui-hover-amber-bg);
      border-color: var(--ui-hover-amber-border);
      color: var(--ui-hover-amber-text);
      box-shadow: var(--shadow-header);
    }

    .common-consult-carousel__nav:focus-visible {
      outline: 2px solid var(--text);
      outline-offset: 3px;
    }

    .common-consult-carousel__pager {
      margin: 0;
      font-size: clamp(0.8125rem, 1.4vw, 0.875rem);
      font-weight: 600;
      letter-spacing: 0.04em;
      text-align: center;
      color: color-mix(in srgb, var(--text) 70%, #ffffff);
    }

    .common-consult-carousel__pager-current {
      color: var(--text);
      font-weight: 700;
    }

    /* お悩みセクション：見出し＋SVGタイルを白枠1つにまとめる */
    .troubles {
      /* セクション内だけ見出し・装飾をひとまわり小さく（全体の圧を弱める） */
      --section-heading-price-size: clamp(
        1.02rem,
        calc(2.35vw * var(--site-scale)),
        1.44rem
      );
      --heading-emblem-width: clamp(
        calc(76px * var(--site-scale)),
        calc(20vw * var(--site-scale)),
        calc(152px * var(--site-scale))
      );
      background: var(--bg);
    }

    .troubles .container {
      display: flex;
      flex-direction: column;
      gap: clamp(
        calc(12px * var(--site-scale)),
        calc(2vw * var(--site-scale)),
        calc(18px * var(--site-scale))
      );
    }

    .troubles-heading-block {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      gap: clamp(
        calc(14px * var(--site-scale)),
        calc(2.2vw * var(--site-scale)),
        calc(22px * var(--site-scale))
      );
      margin-bottom: 0;
      padding: clamp(calc(14px * var(--site-scale)), calc(2.4vw * var(--site-scale)), calc(20px * var(--site-scale)))
        clamp(calc(14px * var(--site-scale)), calc(2.5vw * var(--site-scale)), calc(22px * var(--site-scale)))
        clamp(calc(20px * var(--site-scale)), calc(3.2vw * var(--site-scale)), calc(32px * var(--site-scale)));
      background: #ffffff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
    }

    /* サービス内容 × 修理の流れ（白い島・横2列） */
    .service-flow-promo {
      background: var(--bg);
    }

    .service-flow-promo__grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: clamp(12px, 1.8vw, 20px);
      align-items: stretch;
    }

    .service-flow-promo__panel {
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      min-width: 0;
      height: 100%;
      background: #ffffff;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow-header);
      padding: clamp(18px, 2.8vw, 28px) clamp(16px, 2.2vw, 22px);
    }

    .service-flow-promo__panel .price-menu-cta__inner,
    .service-flow-promo__panel .request-flow__inner {
      display: flex;
      flex-direction: column;
      flex: 1 1 auto;
      width: 100%;
      max-width: none;
      margin: 0;
      text-align: left;
    }

    .service-flow-promo__panel .price-menu-cta__heading,
    .service-flow-promo__panel .request-flow__heading {
      text-align: left;
    }

    .service-flow-promo__panel .price-menu-cta__lead,
    .service-flow-promo__panel .request-flow__lead {
      margin-left: 0;
      margin-right: 0;
      max-width: none;
    }

    .service-flow-promo__panel .price-menu-cta__actions {
      margin-top: auto;
      margin-inline: 0;
      max-width: none;
      padding-top: clamp(16px, 2.4vw, 24px);
    }

    /* 料金・メニュー誘導（ライト / Apple風） */
    .price-menu-cta__inner {
      max-width: var(--site-inner-720);
      margin: 0 auto;
      text-align: center;
    }

    .price-menu-cta__heading {
      margin: 0 0 clamp(18px, 2.8vw, 26px);
      font-size: var(--section-heading-price-size);
      font-weight: 700;
      line-height: 1.35;
      letter-spacing: 0.02em;
      color: #262626;
    }

    .price-menu-cta__lead {
      margin: 0 auto clamp(36px, 5vw, 52px);
      max-width: 38em;
      font-size: clamp(0.9375rem, 2vw, 1.0625rem);
      line-height: 1.85;
      letter-spacing: 0.02em;
      color: #4a4a50;
    }

    .price-menu-cta__actions {
      display: grid;
      grid-template-columns: 1fr;
      justify-items: stretch;
      gap: 14px;
      width: 100%;
      max-width: min(100%, var(--site-inner-440));
      margin-inline: auto;
    }

    .price-menu-cta__btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      min-height: calc(68px * var(--site-scale));
      padding: 18px 34px;
      font-size: clamp(1rem, 1.8vw, 1.1rem);
      font-weight: 700;
      letter-spacing: 0.02em;
      color: #262626;
      background: #ffffff;
      border-radius: var(--radius-button);
      border: 1px solid var(--theme-sage-dark);
      text-decoration: none;
      box-sizing: border-box;
      transition: box-shadow 0.26s cubic-bezier(0.22, 1, 0.36, 1), background 0.2s ease, border-color 0.2s ease;
      box-shadow: none;
    }

    .price-menu-cta__btn:focus-visible {
      outline: 2px solid #1d1d1f;
      outline-offset: 3px;
    }

    .price-menu-cta__btn--menu {
      position: relative;
      overflow: visible;
    }

    .price-menu-cta__badge {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 1;
      transform: translate(22%, -46%);
      padding: 0.28em 0.65em;
      font-size: 1.12rem;
      font-weight: 700;
      line-height: 1.25;
      letter-spacing: 0.02em;
      color: #ffffff;
      background: #0d6ebd;
      border-radius: var(--radius);
      white-space: nowrap;
      box-shadow: var(--shadow-header);
      pointer-events: none;
    }

    @media (prefers-reduced-motion: reduce) {
      .price-menu-cta__btn {
        transition-duration: 0.01ms !important;
      }

    }

    /* ご依頼の流れ・受付方法 */
    .request-flow__inner {
      max-width: var(--site-inner-800);
      margin: 0 auto;
    }

    .request-flow__heading {
      margin: 0 0 clamp(16px, 2.5vw, 22px);
      font-size: var(--section-heading-price-size);
      font-weight: 700;
      line-height: 1.35;
      letter-spacing: 0.02em;
      text-align: center;
      color: #262626;
    }

    .request-flow__lead {
      margin: 0 auto clamp(32px, 5vw, 44px);
      max-width: 40em;
      font-size: clamp(0.9375rem, 2vw, 1.0625rem);
      line-height: 1.85;
      letter-spacing: 0.02em;
      color: #4a4a50;
      text-align: center;
    }

    .faq {
      --faq-card-radius: var(--radius-button);
      background: var(--bg);
    }

    .faq__inner {
      display: grid;
      width: max-content;
      max-width: min(100%, var(--site-inner-760));
      margin-inline: auto;
    }

    .faq__heading {
      margin: 0 0 24px;
      font-size: var(--section-heading-price-size);
      font-weight: 700;
      line-height: 1.4;
      letter-spacing: 0.02em;
      color: #262626;
    }

    .faq-item {
      width: 100%;
      min-width: 0;
      margin-bottom: 24px;
    }

    .faq-item:last-child {
      margin-bottom: 0;
    }

    .faq-q-card {
      list-style: none;
      position: relative;
      width: 100%;
      box-sizing: border-box;
      border: 1px solid var(--line);
      border-radius: var(--faq-card-radius);
      background: #ffffff;
      box-shadow: var(--shadow-header);
      display: flex;
      align-items: center;
      /* 右 48px は＋用の余白。バー幅は維持しつつ＋を右端寄りに配置 */
      padding: 16px 48px 16px 28px;
      cursor: pointer;
      transition:
        box-shadow 0.22s ease,
        background-color 0.22s ease,
        border-color 0.22s ease,
        color 0.22s ease;
      /* クリックで質問文が選択されて青反転しないように（回答はそのまま選択可） */
      -webkit-user-select: none;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }

    .faq-q-card::-webkit-details-marker {
      display: none;
    }

    .faq-q-card:hover,
    .faq-q-card:focus-visible {
      background-color: var(--ui-hover-amber-bg);
      border-color: var(--ui-hover-amber-border);
      box-shadow: var(--shadow-header-hover);
    }

    .faq-q-card:hover .faq-badge--q,
    .faq-q-card:focus-visible .faq-badge--q,
    .faq-q-card:hover .faq-q-text,
    .faq-q-card:focus-visible .faq-q-text,
    .faq-q-card:hover .faq-toggle-icon,
    .faq-q-card:focus-visible .faq-toggle-icon {
      color: var(--ui-hover-amber-text);
    }

    .faq-q-card:focus-visible {
      outline: 2px solid #1d1d1f;
      outline-offset: 2px;
    }

    .faq-a-card {
      /* 回答は親幅に追従しつつ、内在サイズには効かせない（Qバー幅＝最長の質問） */
      width: 0;
      min-width: 100%;
      box-sizing: border-box;
      margin-top: 8px;
      border: 1px solid var(--line);
      border-radius: var(--faq-card-radius);
      background: #ffffff;
      box-shadow: var(--shadow-header);
      display: flex;
      align-items: flex-start;
      padding: 16px 48px 16px 28px;
    }

    .faq-badge {
      flex: 0 0 auto;
      margin-right: 12px;
      font-size: 1.1rem;
      font-weight: 700;
      line-height: 1.2;
    }

    .faq-badge--q {
      color: #262626;
    }

    .faq-badge--a {
      color: #6e6e73;
    }

    .faq-q-text {
      flex: 1 1 auto;
      min-width: 0;
      font-size: 1rem;
      font-weight: 700;
      line-height: 1.6;
      color: #262626;
      white-space: nowrap;
    }

    .faq-a-text {
      margin: 0;
      min-width: 0;
      font-size: 0.95rem;
      line-height: 1.8;
      color: #4a4a50;
    }

    .about-section {
      padding-inline: 20px;
      background-color: var(--bg);
    }

    /* ロゴの上辺をセクション境目の横線に接地させる（一括の padding-block より詳細度を高くする） */
    body.page-index main > section.about-section:not(.hero):not(.hero-features) {
      padding-top: 0;
    }

    .about-section__inner {
      max-width: var(--site-inner-650);
      margin: 0 auto;
      padding-top: 0;
      text-align: center;
    }

    .about-section__brand {
      margin: 0 auto clamp(18px, 3vw, 28px);
      display: flex;
      justify-content: center;
    }

    .about-section__logo-wrap {
      display: inline-block;
      line-height: 0;
      width: var(--heading-emblem-width);
      max-width: 100%;
    }

    .about-section__logo {
      display: block;
      width: 100%;
      height: auto;
    }

    .about-section__heading {
      margin: 0 0 20px;
      font-size: var(--section-heading-price-size);
      font-weight: 700;
      line-height: 1.4;
      color: #262626;
      letter-spacing: 0.1em;
      text-transform: none;
    }

    .about-section__text {
      margin: 0;
      font-size: clamp(0.8875rem, 2vw, 1rem);
      line-height: 2.2;
      color: #444444;
      letter-spacing: 0.02em;
    }

    .faq-toggle-icon {
      position: absolute;
      right: 16px;
      top: 50%;
      flex: 0 0 auto;
      width: 20px;
      height: 20px;
      margin: 0;
      color: var(--theme-sage-dark);
      transform: translateY(-50%);
      transition: transform 0.2s ease;
    }

    .faq-toggle-icon::before,
    .faq-toggle-icon::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 12px;
      height: 1.5px;
      border-radius: var(--radius);
      background: currentColor;
      transform: translate(-50%, -50%);
    }

    .faq-toggle-icon::after {
      transform: translate(-50%, -50%) rotate(90deg);
    }

    .faq-item[open] .faq-toggle-icon {
      transform: translateY(-50%) rotate(45deg);
    }

    .troubles-heading-row {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      gap: clamp(8px, 2vw, 16px);
      flex-wrap: wrap;
    }

    .troubles-heading-icon {
      flex-shrink: 0;
      width: var(--heading-emblem-width);
      height: auto;
      display: block;
      object-fit: contain;
    }

    .troubles-heading {
      margin: 0;
      font-size: var(--section-heading-price-size);
      font-weight: 700;
      line-height: 1.4;
      text-align: left;
      color: var(--text);
    }

    .troubles-heading__mark {
      position: relative;
      display: inline-block;
      white-space: nowrap;
      padding-bottom: 0.06em;
    }

    .troubles-heading__mark::before,
    .troubles-heading__mark::after {
      content: "";
      position: absolute;
      left: 50%;
      width: 118%;
      height: 2px;
      border-radius: 1px;
      background: var(--section-bg);
      transform: translateX(calc(-50% + 0.1em)) rotate(-4deg);
      transform-origin: center center;
      pointer-events: none;
      opacity: 0.9;
    }

    .troubles-heading__mark::before {
      bottom: 0.24em;
    }

    .troubles-heading__mark::after {
      bottom: 0.08em;
    }

    .page-index .troubles-heading-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
      align-items: center;
      column-gap: clamp(8px, 2vw, 16px);
    }

    .page-index .troubles-heading-icon--start {
      grid-column: 1;
      justify-self: end;
    }

    .page-index .troubles-heading-icon--end {
      grid-column: 3;
      justify-self: start;
    }

    .page-index .troubles-heading {
      grid-column: 2;
      text-align: center;
    }

    /* お悩みタイル：1行×2ページ（左右矢印・1/2 表示） */
    .troubles-carousel {
      --trouble-tile-scale: 1.3;
      --trouble-tile-viz-width: 82%;
      --trouble-tile-svg-base-w: 118px;
      --trouble-tile-svg-base-h: 102px;
      --trouble-tile-svg-max-w: calc(var(--trouble-tile-svg-base-w) * var(--trouble-tile-scale));
      --trouble-tile-svg-max-h: calc(var(--trouble-tile-svg-base-h) * var(--trouble-tile-scale));
      --trouble-grid-col-base: 11rem;
      --trouble-nav-size: clamp(40px, 5.2vw, 44px);
      --trouble-nav-icon-size: clamp(18px, 2.4vw, 20px);
      --trouble-nav-viz-top: 0px;
      --trouble-nav-viz-height: 120px;
      --trouble-nav-side-gap: clamp(8px, 1.6vw, 14px);
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: clamp(10px, 2vw, 16px);
      box-sizing: border-box;
      padding-inline: calc(var(--trouble-nav-size) + var(--trouble-nav-side-gap));
      width: 100%;
      max-width: 100%;
      margin: 0 auto;
    }

    .troubles-carousel__viewport {
      overflow: hidden;
      width: 100%;
      min-width: 0;
    }

    .troubles-carousel__track {
      position: relative;
      width: 100%;
    }

    .troubles-carousel__page {
      box-sizing: border-box;
      width: 100%;
      opacity: 0;
      transition: opacity 0.35s ease;
      pointer-events: none;
    }

    .troubles-carousel__page.is-troubles-carousel-page-active {
      position: relative;
      z-index: 1;
      opacity: 1;
      pointer-events: auto;
    }

    .troubles-carousel__page:not(.is-troubles-carousel-page-active) {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
    }

    @media (prefers-reduced-motion: reduce) {
      .troubles-carousel__page {
        transition-duration: 0.01ms;
      }
    }

    .troubles-carousel__nav {
      position: absolute;
      z-index: 2;
      top: calc(
        var(--trouble-nav-viz-top) +
          (var(--trouble-nav-viz-height) - var(--trouble-nav-size)) / 2
      );
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: var(--trouble-nav-size);
      height: var(--trouble-nav-size);
      margin: 0;
      padding: 0;
      border: 1px solid color-mix(in srgb, var(--header-text) 18%, var(--line));
      border-radius: 50%;
      background: #ffffff;
      color: var(--text);
      box-shadow: var(--shadow-header);
      cursor: pointer;
      transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.18s cubic-bezier(0.22, 1, 0.36, 1);
    }

    .troubles-carousel__nav--prev {
      left: 0;
    }

    .troubles-carousel__nav--next {
      right: 0;
    }

    .troubles-carousel__nav-icon {
      display: block;
      width: var(--trouble-nav-icon-size);
      height: var(--trouble-nav-icon-size);
      flex-shrink: 0;
    }

    .troubles-carousel__nav:hover,
    .troubles-carousel__nav:focus-visible {
      color: var(--ui-hover-amber-text);
      border-color: var(--ui-hover-amber-border);
      background: var(--ui-hover-amber-bg);
      box-shadow: var(--shadow-header-hover);
      transform: scale(1.04);
    }

    .troubles-carousel__nav:active {
      transform: scale(0.96);
      background: var(--ui-hover-amber-bg);
      border-color: var(--ui-hover-amber-border);
      color: var(--ui-hover-amber-text);
      box-shadow: var(--shadow-header);
    }

    .troubles-carousel__nav:focus-visible {
      outline: 2px solid var(--text);
      outline-offset: 3px;
    }

    .troubles-carousel__pager {
      margin: 0;
      font-size: clamp(0.8125rem, 2vw, 0.9375rem);
      font-weight: 700;
      letter-spacing: 0.12em;
      line-height: 1;
      text-align: center;
      color: var(--muted);
    }

    .troubles-carousel__pager-current {
      color: var(--text);
      font-size: 1.12em;
    }

    .troubles-carousel__pager-sep {
      margin: 0 0.2em;
      opacity: 0.72;
    }

    .troubles-carousel .trouble-tile {
      color: var(--text);
    }

    .troubles-carousel .trouble-tile:focus-visible {
      outline: 2px solid #1d1d1f;
      outline-offset: 3px;
    }

    /* モバイル（〜960px）：縦3行×横2列 / ページ */
    .troubles-carousel__page .troubles-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: repeat(3, auto);
      gap: clamp(6px, 1.5vw, 10px);
      align-items: start;
      list-style: none;
      margin: 0;
      width: 100%;
      box-sizing: border-box;
      padding: 0;
      background: transparent;
      border: none;
      border-radius: 0;
      box-shadow: none;
    }

    .troubles-carousel .trouble-tile__viz {
      width: var(--trouble-tile-viz-width);
      max-width: 100%;
      margin-inline: auto;
      background: #ffffff;
      border: 1px solid color-mix(in srgb, var(--header-text) 18%, var(--line));
      border-radius: var(--radius);
      box-shadow: var(--shadow-header);
    }

    .troubles-carousel .trouble-tile__viz svg {
      display: block;
      box-sizing: border-box;
      width: 100%;
      height: auto;
      max-width: var(--trouble-tile-svg-max-w);
      max-height: var(--trouble-tile-svg-max-h);
      margin-inline: auto;
    }

    @media (max-width: 960px) {
      .troubles-carousel {
        column-gap: clamp(4px, 1vw, 10px);
      }

      /* 画面が広いスマホ・タブレット幅：列を1fr全幅にしない（SVG間の空白が開きすぎる） */
      .troubles-carousel__page .troubles-grid {
        --trouble-grid-gap: clamp(13px, 2.86vw, 18px);
        gap: var(--trouble-grid-gap);
        padding: 0;
        grid-template-columns: repeat(
          2,
          minmax(
            0,
            min(
              calc(var(--trouble-grid-col-base) * var(--trouble-tile-scale)),
              calc((100% - var(--trouble-grid-gap)) / 2)
            )
          )
        );
        justify-content: center;
      }

      .troubles-carousel {
        --trouble-nav-size: clamp(36px, 9vw, 42px);
        --trouble-nav-icon-size: clamp(16px, 4vw, 18px);
        --trouble-nav-side-gap: clamp(6px, 1.8vw, 12px);
      }

      .troubles-carousel .trouble-tile {
        font-size: calc(clamp(0.72rem, 2.4vw, 0.85rem) * var(--trouble-tile-scale));
        gap: clamp(5px, 1.43vw, 8px);
      }

      .troubles-carousel .trouble-tile__viz {
        --trouble-viz-pad: clamp(6.5px, 1.625vw, 13px);
        width: min(100%, calc(var(--trouble-tile-svg-max-w) + 2 * var(--trouble-viz-pad)));
        max-width: 100%;
        padding: var(--trouble-viz-pad);
      }

      .troubles-carousel #trouble-tile-3 .trouble-tile__viz,
      .troubles-carousel #trouble-tile-4 .trouble-tile__viz {
        padding: clamp(9px, 2vw, 16px);
      }
    }

    /* デスクトップ（961px〜）：1行×6列 */
    @media (min-width: 961px) {
      .troubles-carousel__page .troubles-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-template-rows: auto;
        justify-content: stretch;
        gap: clamp(5px, 0.85vw, 9px);
        padding: 0;
      }

      .troubles-carousel .trouble-tile {
        font-size: calc(var(--font-size-menu) * var(--trouble-tile-scale));
        gap: clamp(5px, 1.43vw, 8px);
      }

      .troubles-carousel .trouble-tile__viz {
        --trouble-viz-pad: clamp(6.5px, 1.625vw, 13px);
        width: min(100%, calc(var(--trouble-tile-svg-max-w) + 2 * var(--trouble-viz-pad)));
        max-width: 100%;
        padding: var(--trouble-viz-pad);
      }

      .troubles-carousel #trouble-tile-3 .trouble-tile__viz,
      .troubles-carousel #trouble-tile-4 .trouble-tile__viz {
        padding: clamp(9px, 2vw, 16px);
      }
    }

    .troubles-grid > li {
      display: flex;
      list-style: none;
      margin: 0;
      padding: 0;
      min-width: 0;
    }

    /* iPhone ホーム画面風：正方形の「アイコン」＋その下にラベル（枠はアイコン側のみ） */
    .trouble-tile {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      box-sizing: border-box;
      gap: clamp(4px, 1.1vw, 6px);
      width: 100%;
      margin: 0;
      padding: 0;
      font: inherit;
      font-size: var(--font-size-menu);
      font-weight: 700;
      letter-spacing: 0.02em;
      line-height: 1.35;
      text-align: center;
      color: var(--text);
      background: transparent;
      border: none;
      border-radius: 0;
      cursor: pointer;
      transition: color 0.15s ease;
      overflow: visible;
      -webkit-tap-highlight-color: transparent;
    }