/* ============================================================
       アスカ工務店 - style.css
       やわらかいピンク × ココアブラウン × ベリーローズ
       SPファースト設計
       ============================================================ */

    /* --- CSS Variables (やわらかいピンク調にアップデート) --- */
    :root {
      --color-beige: #fff0f1;
      /* 桜ピンクベージュ（非常に淡いピンク） */
      --color-beige-dark: #fcdad7;
      /* くすみサクラピンク（淡い） */
      --color-beige-mid: #f6b9b2;
      /* ニュアンスピンクベージュ */
      --color-green: #e09e96;
      /* 大人なくすみローズピンク */
      --color-green-light: #f5cac3;
      /* やわらかなピーチピンク */
      --color-green-dark: #a65249;
      /* 深みのあるココアローズ */
      --color-orange: #d45d79;
      /* 華やかなチェリーローズ */
      --color-orange-light: #e28497;
      /* 明るいベリーピンク */
      --color-text: #474747;
      /* 暖かみのある深いココアブラウン */
      --color-text-light: #7d6a69;
      /* やわらかいココアブラウン */
      --color-white: #fdfafb;
      /* ほんのりサクラがかったオフホワイト */
      --color-line: #06c755;
      /* LINEグリーン（ブランド標準） */
      --color-gold: #d45d79;
      /* アクセントのコッパーローズ */

      --font-jp: 'Noto Sans JP', sans-serif;
      --font-en: 'Sacramento', cursive;
      --font-catch: 'Zen Old Mincho', serif;
      /* キャッチコピー用フォント */

      --max-width: 1100px;
      --section-px: 20px;
    }

    /* --- Reset & Base --- */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
      overflow-x: clip;
      width: 100%;
    }

    body {
      font-family: var(--font-jp);
      font-size: 16px;
      line-height: 1.9;
      letter-spacing: 0.05em;
      color: var(--color-text);
      background-color: var(--color-white);
      overflow-x: clip;
      width: 100%;
    }

    img {
      max-width: 100%;
      height: auto;
      display: block;
      vertical-align: bottom;
    }

    a {
      text-decoration: none;
      color: inherit;
    }

    ul {
      list-style: none;
    }

    /* --- Section Wrapper --- */
    .section-inner {
      width: 100%;
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 var(--section-px);
    }

    /* --- Section Spacing --- */
    section {
      margin-bottom: 0;
    }

    /* --- Section Heading (Modern & Premium Redesign) --- */
    .section-heading {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      margin-bottom: 60px;
      position: relative;
      padding: 40px 0;
    }

    /* Background Ghost Text (Sacramento向けに文字サイズ・文字詰め調整) */
    .section-heading::before {
      display: none;
      content: attr(data-en);
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-family: var(--font-en);
      font-size: clamp(80px, 20vw, 150px);
      font-weight: 400;
      color: transparent;
      -webkit-text-stroke: 1px rgba(212, 93, 121, 0.08);
      letter-spacing: 0.02em;
      text-transform: none;
      z-index: 1;
      white-space: nowrap;
      pointer-events: none;
      opacity: 0.8;
    }

    .section-heading-en {
      font-family: var(--font-en);
      font-size: clamp(48px, 10vw, 68px);
      font-weight: 400;
      letter-spacing: 0.02em;
      color: var(--color-green-dark);
      text-transform: none;
      position: relative;
      z-index: 2;
      margin: 0;
      line-height: 1.1;
    }

    /* Gold Accent Line (ピンクゴールド) */
    .section-heading-en::after {
      content: '';
      display: block;
      width: 40px;
      height: 1px;
      background: var(--color-gold);
      margin: 15px auto 5px;
    }

    .section-heading-ja {
      font-family: var(--font-jp);
      font-size: 11px;
      font-weight: 400;
      letter-spacing: 0.25em;
      color: var(--color-text-light);
      text-transform: uppercase;
      position: relative;
      z-index: 2;
      display: block;
    }

    /* Legacy Support & Reset */
    .section-heading figure {
      all: unset;
      display: contents;
    }

    .section-heading img {
      display: none !important;
    }

    .section-heading figcaption {
      display: contents;
    }

    /* ============================================================
       HEADER
       ============================================================ */
    #site-header {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1000;
      background: rgba(255, 255, 255, 0.96);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      border-bottom: 1px solid var(--color-beige-mid);
      transition: box-shadow 0.3s;
    }

    #site-header.scrolled {
      box-shadow: 0 2px 20px rgba(66, 54, 53, 0.08);
    }

    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: var(--max-width);
      margin: 0 auto;
      padding: 0 20px;
      height: 64px;
    }

    /* Logo */
    .header-logo a {
      display: flex;
      align-items: center;
      transition: opacity 0.2s;
    }

    .header-logo a:hover {
      opacity: 0.72;
    }

    .header-logo-img {
      height: 60px;
      max-height: 100%;
      width: auto;
      display: block;
      object-fit: contain;
    }

    /* PC Nav */
    .header-nav {
      display: none;
    }

    /* PC Header CTA Button Group */
    .header-cta-group {
      display: none;
    }

    .header-cta {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 18px;
      border-radius: 100px;
      font-size: 11px;
      font-weight: 500;
      letter-spacing: 0.08em;
      transition: all 0.25s ease;
      color: #fff;
    }

    .header-cta.line-btn {
      background: var(--color-line);
    }

    .header-cta.line-btn:hover {
      background: #05b14c;
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(6, 199, 85, 0.3);
    }

    .header-cta.tol-btn {
      background: var(--color-orange);
    }

    .header-cta.tol-btn:hover {
      background: var(--color-orange-light);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(192, 84, 58, 0.3);
    }

    /* Hamburger */
    .hamburger {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 5px;
      width: 40px;
      height: 40px;
      cursor: pointer;
      background: none;
      border: none;
      padding: 4px;
      z-index: 1100;
    }

    .hamburger span {
      display: block;
      width: 24px;
      height: 1.5px;
      background: var(--color-text);
      transition: all 0.3s ease;
      transform-origin: center;
    }

    /* ============================================================
       FULLSCREEN MENU OVERLAY
       ============================================================ */
    #nav-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--color-beige);
      z-index: 2000;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding-top: 80px;
      padding-bottom: 80px;
      overflow-y: auto;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s ease;
    }

    #nav-overlay.open {
      opacity: 1;
      pointer-events: all;
    }

    .overlay-close {
      position: absolute;
      top: 24px;
      right: 24px;
      background: none;
      border: none;
      font-family: var(--font-jp);
      font-size: 13px;
      letter-spacing: 0.1em;
      color: var(--color-text);
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .overlay-close::before {
      content: '×';
      font-size: 20px;
      line-height: 1;
    }

    .overlay-nav {
      text-align: center;
    }

    .overlay-nav ul {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .overlay-nav a {
      font-family: var(--font-en);
      font-size: 32px;
      font-weight: 400;
      letter-spacing: 0.02em;
      color: var(--color-text);
      transition: color 0.2s;
      position: relative;
    }

    .overlay-nav a::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 50%;
      transform: translateX(-50%);
      width: 0;
      height: 1px;
      background: var(--color-orange);
      transition: width 0.3s ease;
    }

    .overlay-nav a:hover {
      color: var(--color-orange);
    }

    .overlay-nav a:hover::after {
      width: 100%;
    }

    .overlay-nav .nav-sub {
      display: block;
      font-family: var(--font-jp);
      font-size: 11px;
      font-weight: 300;
      letter-spacing: 0.12em;
      color: var(--color-text-light);
      margin-top: 2px;
    }

    .overlay-cta {
      margin-top: 48px;
      display: flex;
      flex-direction: column;
      gap: 14px;
      width: 100%;
      max-width: 300px;
    }

    .overlay-cta a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 14px 30px;
      border-radius: 100px;
      font-size: 13px;
      letter-spacing: 0.1em;
      transition: transform 0.3s ease, background 0.25s;
      color: #fff;
      width: 100%;
    }

    .overlay-cta .overlay-line-btn {
      background: var(--color-line);
    }

    .overlay-cta .overlay-line-btn:hover {
      background: #05b14c;
      transform: translateY(-2px);
    }

    .overlay-cta .overlay-tol-btn {
      background: var(--color-orange);
    }

    .overlay-cta .overlay-tol-btn:hover {
      background: var(--color-orange-light);
      transform: translateY(-2px);
    }

    /* ============================================================
       FV - FIRST VIEW
       ============================================================ */
    #fv {
      position: relative;
      width: 100%;
      height: 100vh;
      overflow: hidden;
      margin-bottom: 0;
      line-height: 0;
      background: linear-gradient(135deg, var(--color-white) 0%, var(--color-beige) 100%);
      display: flex;
    }

    .swiper-fv {
      position: absolute;
      top: 0;
      right: 0;
      width: 65%;
      height: 100%;
      -webkit-mask-image: linear-gradient(to right, transparent 0%, black 25%);
      mask-image: linear-gradient(to right, transparent 0%, black 25%);
      z-index: 1;
    }

    .swiper-fv .swiper-slide {
      height: 100%;
      line-height: 0;
      overflow: hidden;
    }

    .swiper-fv .swiper-slide picture {
      width: 100%;
      height: 100%;
      display: block;
    }

    .swiper-fv .swiper-slide img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: center center;
    }

    /* ============================================================
       FV 左側オーバーレイパネル
       ============================================================ */
    .fv-left-overlay {
      position: relative;
      width: 45%;
      height: 100%;
      z-index: 10;
      overflow: visible;
      display: flex;
      align-items: center;
    }

    .fv-left-overlay::before {
      display: none;
    }

    /* ゴースト背景テキスト */
    .fv-ghost-text {
      position: absolute;
      bottom: 5%;
      left: -0.05em;
      font-family: var(--font-en);
      font-size: clamp(140px, 20vw, 250px);
      font-weight: 400;
      letter-spacing: 0.01em;
      line-height: 1;
      color: transparent;
      -webkit-text-stroke: 1px rgba(212, 93, 121, 0.05);
      pointer-events: none;
      user-select: none;
      white-space: nowrap;
    }

    /* 縦書きサイドアクセント */
    .fv-vertical-accent {
      position: absolute;
      top: 50%;
      left: 24px;
      transform: translateY(-50%) rotate(-90deg);
      transform-origin: center center;
      font-family: var(--font-en);
      font-size: 16px;
      font-weight: 400;
      letter-spacing: 0.05em;
      color: var(--color-text-light);
      white-space: nowrap;
      text-transform: none;
      pointer-events: none;
    }

    /* コンテンツラッパー */
    .fv-content {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      height: auto;
      padding: 0 0 0 clamp(60px, 8vw, 120px);
      width: 100%;
    }

    /* トップ装飾ライン */
    .fv-deco-top {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 28px;
    }

    .fv-deco-line {
      display: block;
      flex: 1;
      height: 1px;
      background: linear-gradient(to right, var(--color-beige-mid), transparent);
    }

    .fv-deco-dot {
      display: block;
      width: 5px;
      height: 5px;
      border-radius: 50%;
      border: 1px solid var(--color-beige-mid);
      flex-shrink: 0;
    }

    /* 英語サブキャッチ */
    .fv-catch-en {
      font-family: var(--font-en);
      font-size: clamp(24px, 2.2vw, 32px);
      font-weight: 400;
      letter-spacing: 0.02em;
      line-height: 1.4;
      color: var(--color-green-dark);
      margin-bottom: 20px;
      text-transform: none;
      white-space: nowrap;
    }

    .fv-catch-en em {
      display: block;
      font-family: var(--font-en);
      font-style: normal;
      font-size: 0.95em;
      letter-spacing: 0.01em;
      color: var(--color-text-light);
      text-transform: none;
      white-space: nowrap;
    }

    .fv-catch-sub-ja {
      font-family: var(--font-catch);
      font-size: clamp(14px, 1.5vw, 16px);
      font-weight: 500;
      letter-spacing: 0.1em;
      color: var(--color-text-light);
      margin-bottom: 12px;
      line-height: 1.6;
      white-space: nowrap;
    }

    /* メインキャッチ */
    .fv-main-catch {
      font-family: var(--font-catch);
      font-size: clamp(32px, 3.8vw, 48px);
      font-weight: 700;
      letter-spacing: 0.05em;
      line-height: 1.4;
      color: var(--color-text);
      text-shadow: none;
      margin-bottom: 40px;
      position: relative;
      white-space: nowrap;
    }

    /* ボトムエリア（PR＋CTAグループ） */
    .fv-bottom-area {
      margin-top: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 28px;
    }

    .fv-pr-badges {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      gap: 12px;
    }

    .fv-pr-badge {
      display: inline-block;
      background: linear-gradient(135deg, #e28497 0%, #d45d79 100%);
      color: #fff;
      font-family: var(--font-jp);
      font-size: clamp(12px, 1.1vw, 15px);
      font-weight: 700;
      letter-spacing: 0.18em;
      padding: 10px 24px;
      border-radius: 100px;
      border: none;
      box-shadow: 0 4px 12px rgba(212, 93, 121, 0.2);
      white-space: nowrap;
      width: fit-content;
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
    }

    .fv-pr-badge:hover {
      transform: translateY(-3px);
      box-shadow: 0 10px 24px rgba(212, 93, 121, 0.35);
    }

    .fv-pr-badge::after {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg,
          transparent,
          rgba(255, 255, 255, 0.2),
          transparent);
      transition: 0.5s;
    }

    .fv-pr-badge:hover::after {
      left: 100%;
    }

    /* サークルボタンのグループ化 */
    .fv-cta-circles {
      display: flex;
      gap: 16px;
      flex-shrink: 0;
    }

    /* 丸型CTAボタン */
    .fv-cta-circle {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 90px;
      height: 90px;
      border-radius: 50%;
      color: #fff;
      text-decoration: none;
      flex-shrink: 0;
      transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.3s ease;
    }

    .fv-cta-circle.tol-circle {
      background: var(--color-orange);
      box-shadow: 0 4px 15px rgba(212, 93, 121, 0.3);
    }

    .fv-cta-circle.tol-circle:hover {
      background: var(--color-orange-light);
      transform: scale(1.1);
    }

    .fv-cta-circle.line-circle {
      background: var(--color-line);
      box-shadow: 0 4px 15px rgba(6, 199, 85, 0.3);
    }

    .fv-cta-circle.line-circle:hover {
      background: #05b14c;
      transform: scale(1.1);
    }

    .fv-cta-label {
      font-family: var(--font-jp);
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.05em;
      line-height: 1.4;
      text-align: center;
      position: relative;
      z-index: 1;
      margin-top: 4px;
    }

    /* 回転アニメーション付きリング */
    .fv-cta-ring {
      position: absolute;
      inset: -6px;
      border-radius: 50%;
      border: 1px dashed var(--color-beige-dark);
      animation: fv-ring-spin 8s linear infinite;
      background: transparent;
    }

    @keyframes fv-ring-spin {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    /* ボトム装飾ライン */
    .fv-deco-bottom {
      margin-top: 40px;
      width: 100%;
    }

    .fv-deco-bottom .fv-deco-line {
      display: block;
      width: 100%;
      height: 1px;
      background: linear-gradient(to right, var(--color-beige-mid), transparent);
    }

    /* SP（767px以下） */
    @media (max-width: 767px) {
      #fv {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
      }

      .swiper-fv {
        position: relative;
        width: 100%;
        height: 55vh;
        order: 2;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%);
        mask-image: linear-gradient(to bottom, transparent 0%, black 20%);
      }

      .fv-left-overlay {
        width: 100%;
        height: auto;
        top: auto;
        bottom: auto;
        left: 0;
        order: 1;
        padding-top: 100px;
        padding-bottom: 20px;
      }

      .fv-ghost-text {
        font-size: 28vw;
        bottom: auto;
        top: 80px;
        left: 10px;
      }

      .fv-vertical-accent {
        display: none;
      }

      .fv-content {
        padding: 0 24px;
      }

      .fv-deco-top {
        margin-bottom: 14px;
      }

      .fv-catch-en {
        font-size: 14px;
        margin-bottom: 12px;
        letter-spacing: 0.12em;
      }

      .fv-catch-sub-ja {
        font-size: 12px;
        margin-bottom: 16px;
      }

      .fv-main-catch {
        font-size: clamp(24px, 7vw, 32px);
        margin-bottom: 24px;
        line-height: 1.4;
        white-space: nowrap;
      }

      .fv-bottom-area {
        gap: 20px;
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 0;
        width: 100%;
      }

      .fv-pr-badges {
        flex-direction: row;
        gap: 10px;
        margin-bottom: 0;
      }

      .fv-cta-circles {
        gap: 12px;
      }

      .fv-cta-circle {
        width: 76px !important;
        height: 76px !important;
        margin-bottom: 0px !important;
      }

      .fv-cta-label {
        font-size: 8px !important;
      }

      .fv-cta-circle i {
        font-size: 20px !important;
      }

      .fv-deco-bottom {
        display: none;
      }
    }

    /* ============================================================
       CTA BAND
       ============================================================ */
    .cta-band {
      width: 100%;
      background: #ce7d84;
      position: relative;
      padding: 40px 20px;
      margin-bottom: 0;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .cta-band::before {
      content: 'RESERVATION';
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-family: var(--font-en);
      font-size: clamp(80px, 15vw, 180px);
      font-weight: 400;
      color: rgba(212, 93, 121, 0.03);
      letter-spacing: 0.02em;
      pointer-events: none;
      z-index: 1;
    }

    .cta-band-inner {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      max-width: 800px;
      width: 100%;
      text-align: center;
    }

    .cta-tagline {
      font-family: var(--font-jp);
      font-size: clamp(12px, 1.5vw, 14px);
      font-weight: 400;
      letter-spacing: 0.1em;
      color: var(--color-gold);
      margin-bottom: -10px;
    }

    .cta-phone-large {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-family: var(--font-en);
      font-size: clamp(24px, 6vw, 48px);
      font-weight: 400;
      color: var(--color-text);
      text-decoration: none;
      transition: opacity 0.2s;
      white-space: nowrap;
    }

    .cta-phone-large:hover {
      opacity: 0.8;
    }

    .cta-phone-large i {
      color: var(--color-gold);
      font-size: 0.7em;
    }

    .cta-info-sub {
      font-family: var(--font-jp);
      font-size: 13px;
      line-height: 1.8;
      color: var(--color-text-light);
      letter-spacing: 0.05em;
    }

    /* ボタン2列ラップ */
    .cta-btns-wrap {
      width: 100%;
      max-width: 540px;
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-top: 16px;
    }

    .cta-btn-main {
      width: 100%;
      color: #fff;
      padding: 18px 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      font-size: 16px;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-decoration: none;
      transition: all 0.3s ease;
    }

    .cta-btn-main.line-btn {
      background: var(--color-line);
      box-shadow: 0 4px 15px rgba(6, 199, 85, 0.2);
    }

    .cta-btn-main.line-btn:hover {
      background: #05b14c;
      transform: translateY(-3px);
      box-shadow: 0 10px 30px rgba(6, 199, 85, 0.4);
    }

    .cta-btn-main.tol-btn {
      background: var(--color-orange);
      box-shadow: 0 4px 15px rgba(212, 93, 121, 0.2);
    }

    .cta-btn-main.tol-btn:hover {
      background: var(--color-orange-light);
      transform: translateY(-3px);
      box-shadow: 0 10px 30px rgba(212, 93, 121, 0.4);
    }

    .cta-btn-main .arrow {
      font-family: var(--font-en);
      margin-left: 8px;
      font-size: 1.2em;
    }

    /* ============================================================
       TV - TROUBLE
       ============================================================ */
    #trouble {
      padding: 80px 0;
      background: linear-gradient(rgba(244, 244, 244, 0.9), rgba(244, 244, 244, 0.9)), url('img/worriebg.jpeg') no-repeat center / cover;
    }

    .trouble-closing-full {
      font-size: 20px;
      font-weight: 700;
      line-height: 1.8;
      text-align: center;
      margin-top: 40px;
      color: var(--color-text);
      letter-spacing: 0.05em;
    }

    .trouble-closing-full strong {
      color: var(--color-orange);
      font-weight: 700;
    }

    @media (min-width: 768px) {
      .trouble-closing-full {
        font-size: 24px;
        margin-top: 60px;
      }
    }

    .trouble-grid {
      display: flex;
      flex-direction: column;
      gap: 40px;
    }

    .trouble-image {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .trouble-image-circle {
      width: 100%;
      max-width: 450px;
      height: 350px;
      border-radius: 20px;
      overflow: hidden;
      position: relative;
      -webkit-mask-image: none;
      mask-image: none;
    }

    .trouble-image-circle img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .trouble-catch {
      font-family: var(--font-jp);
      font-size: clamp(22px, 5vw, 36px);
      font-weight: 300;
      letter-spacing: 0.15em;
      color: var(--color-green-dark);
      margin-bottom: 8px;
    }

    .trouble-catch-sub {
      font-family: var(--font-en);
      font-size: 18px;
      font-weight: 400;
      color: var(--color-text-light);
      letter-spacing: 0.05em;
      margin-bottom: 28px;
    }

    .trouble-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 28px;
    }

    .trouble-list li {
      font-size: 16px;
      line-height: 1.7;
      padding-left: 24px;
      position: relative;
    }

    .trouble-list li::before {
      content: '✓';
      position: absolute;
      left: 0;
      top: 0;
      color: var(--color-orange);
      font-weight: bold;
    }



    /* ============================================================
       ABOUT
       ============================================================ */
    #about {
      position: relative;
      background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.5) 100%), url('img/aboutsp.jpg') no-repeat 80% center / cover;
      background-attachment: fixed;
      padding: 80px 0;
    }

    .about-grid {
      display: flex;
      flex-direction: column;
      /* SP: 画像→文章の順 */
      gap: 36px;
    }

    .about-image {
      width: 100%;
    }

    .about-image img {
      width: 100%;
      height: auto;
    }

    .about-text {
      width: 100%;
    }

    /* About内ヘッダー */
    .about-section-heading {
      margin-bottom: 24px;
      display: flex;
      flex-direction: column;
      text-align: center;
    }

    .about-heading-en {
      font-family: var(--font-en);
      font-size: 48px;
      color: var(--color-green-dark);
      line-height: 1.1;
    }

    .about-heading-ja {
      font-size: 11px;
      color: var(--color-text-light);
      letter-spacing: 0.2em;
      text-transform: uppercase;
    }

    .about-en {
      font-family: var(--font-jp);
      font-size: 24px;
      font-weight: 700;
      letter-spacing: 0.05em;
      color: var(--color-green-dark);
      line-height: 1.3;
      margin-bottom: 12px;
      text-align: center;
    }

    .about-ja-title {
      font-size: 13px;
      letter-spacing: 0.15em;
      color: var(--color-text-light);
      margin-bottom: 8px;
    }

    .about-body {
      font-size: 16px;
      line-height: 2;
      text-align: center;
    }

    .about-body p+p {
      margin-top: 16px;
    }

    .about-note {
      margin-top: 20px;
      font-size: 13px;
      color: var(--color-orange);
      letter-spacing: 0.1em;
      font-weight: 500;
    }

    /* ============================================================
       SERVICE
       ============================================================ */
    .service-grid {
      display: flex;
      flex-direction: column;
      gap: 40px;
    }

    .service-card-image {
      width: 100%;
      margin-bottom: 20px;
      overflow: hidden;
    }

    .service-card-image img {
      width: 100%;
      height: 220px;
      object-fit: cover;
    }

    .service-card-num {
      font-family: var(--font-en);
      font-size: 18px;
      font-weight: 400;
      letter-spacing: 0.05em;
      color: var(--color-orange);
      margin-bottom: 8px;
    }

    .service-card-title {
      font-size: 18px;
      font-weight: 500;
      line-height: 1.5;
      margin-bottom: 12px;
      color: var(--color-green-dark);
    }

    .service-card-body {
      font-size: 16px;
      line-height: 1.9;
      color: var(--color-text-light);
    }

    /* ============================================================
       PRICE MENU
       ============================================================ */
    /* SERVICE */
    #service {
      position: relative;
      background-color: var(--color-white);
      padding: 80px 0;
      overflow: hidden;
    }

    #service::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url('img/servicebg.jpeg') no-repeat center / cover;
      background-attachment: fixed;
      opacity: 0.4;
      z-index: 1;
      pointer-events: none;
    }

    #service .section-inner {
      position: relative;
      z-index: 2;
    }

    .service-card {
      background: rgba(255, 255, 255, 0.94);
      padding: 24px;
      border-radius: 16px;
      box-shadow: 0 4px 20px rgba(66, 54, 53, 0.06);
      border: 1px solid var(--color-beige-dark);
    }

    /* PRICE MENU */
    #price {
      background: linear-gradient(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93)), url('img/menu.jpg') no-repeat center / cover;
      background-attachment: fixed;
      padding: 80px 0;
    }

    @media (min-width: 768px) {
      #service {
        padding: 100px 0;
      }

      #price {
        background-attachment: fixed;
        padding: 100px 0;
      }
    }



    .price-list-container {
      max-width: 1000px;
      margin: 0 auto;
      background: transparent;
      padding: 0;
      border: none;
    }

    .menu-group {
      margin-bottom: 48px;
    }

    .menu-group:last-child {
      margin-bottom: 0;
    }

    .menu-group-title {
      font-family: var(--font-jp);
      font-size: 18px;
      font-weight: 500;
      color: var(--color-green-dark);
      border-bottom: 2px solid var(--color-beige-mid);
      padding-bottom: 8px;
      margin-bottom: 24px;
      letter-spacing: 0.12em;
      display: flex;
      flex-direction: column;
      gap: 2px;
      align-items: flex-start;
    }

    .menu-group-title-en {
      font-family: var(--font-en);
      font-size: 20px;
      font-weight: 400;
      color: var(--color-gold);
      letter-spacing: 0.05em;
      text-transform: none;
      display: block;
    }

    @media (min-width: 768px) {
      .menu-group-title {
        flex-direction: row;
        justify-content: space-between;
        align-items: baseline;
      }
    }

    .menu-item {
      display: flex;
      flex-direction: column;
      padding: 24px 0;
      border-bottom: none;
    }

    .menu-item:last-of-type {
      border-bottom: none;
      padding-bottom: 0;
    }

    .menu-item:first-of-type {
      padding-top: 0;
    }

    .menu-item-header {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      flex-wrap: wrap;
      gap: 8px 16px;
    }

    .menu-item-name {
      font-size: 16px;
      font-weight: 700;
      color: var(--color-text);
      letter-spacing: 0.05em;
    }

    .menu-item-meta {
      display: flex;
      align-items: baseline;
      gap: 12px;
    }

    .menu-item-time {
      font-size: 12px;
      color: var(--color-text-light);
      background-color: var(--color-beige);
      padding: 2px 10px;
      border-radius: 4px;
      letter-spacing: 0.05em;
    }

    .menu-item-price {
      font-family: var(--font-en);
      font-size: 24px;
      font-weight: 400;
      color: var(--color-orange);
      letter-spacing: 0.05em;
    }

    .menu-item-price small {
      font-size: 12px;
      font-family: var(--font-jp);
      color: var(--color-text-light);
      margin-left: 2px;
    }

    .menu-item-desc {
      font-size: 16px;
      line-height: 1.7;
      color: var(--color-text-light);
      margin-top: 10px;
      letter-spacing: 0.05em;
    }

    /* 予約サイト連携ボタン */
    .menu-more-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      max-width: 440px;
      background: linear-gradient(135deg, var(--color-orange) 0%, var(--color-orange-light) 100%);
      color: #fff;
      padding: 16px 30px;
      font-size: 15px;
      font-weight: 600;
      letter-spacing: 0.1em;
      border-radius: 100px;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(212, 93, 121, 0.35);
    }

    .menu-more-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(212, 93, 121, 0.35);
    }

    /* ============================================================
       MESSAGE
       ============================================================ */
    #message {
      background: var(--color-white);
      padding: 0;
      margin-bottom: 0;
      overflow: hidden;
    }

    .message-split-grid {
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    .message-image-col {
      width: 100%;
      height: 320px;
    }

    .message-image-col img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .message-text-col {
      padding: 60px var(--section-px);
      display: flex;
      flex-direction: column;
      justify-content: center;
      background: linear-gradient(rgba(253, 240, 241, 0.6), rgba(253, 240, 241, 0.6));
    }

    .message-text-col .section-heading {
      margin-bottom: 40px;
      padding: 0;
    }

    .message-body {
      font-size: 16px;
      line-height: 2.2;
      color: var(--color-text);
      text-align: left;
    }

    .message-body p {
      margin-bottom: 20px;
    }

    .message-body p:last-child {
      margin-bottom: 0;
    }

    /* ============================================================
       CONTACT / ACCESS
       ============================================================ */
    .contact-grid {
      display: flex;
      flex-direction: column;
      gap: 40px;
    }

    .contact-store-name {
      font-family: var(--font-en);
      font-size: 32px;
      font-weight: 400;
      letter-spacing: 0.02em;
      color: var(--color-green-dark);
      margin-bottom: 28px;
      display: flex;
      align-items: baseline;
      gap: 12px;
    }

    .contact-store-name-ja {
      font-family: var(--font-jp);
      font-size: 11px;
      letter-spacing: 0.12em;
      color: var(--color-text-light);
    }

    .contact-table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 28px;
    }

    .contact-table tr {
      border-bottom: 1px solid var(--color-beige-mid);
    }

    .contact-table th {
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.1em;
      color: var(--color-text-light);
      text-align: left;
      padding: 12px 16px 12px 0;
      white-space: nowrap;
      vertical-align: top;
      width: 80px;
    }

    .contact-table td {
      font-size: 14px;
      line-height: 1.8;
      padding: 12px 0;
      vertical-align: top;
    }

    /* LINEとTOLへのリンク導線 */
    .sns-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 20px;
    }

    .sns-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 22px;
      font-size: 12px;
      letter-spacing: 0.1em;
      border: 1.5px solid var(--color-beige-mid);
      color: var(--color-text);
      transition: border-color 0.2s, color 0.2s, background 0.2s;
      border-radius: 100px;
    }

    .sns-btn.line-btn {
      background: var(--color-line);
      border-color: var(--color-line);
      color: #fff;
    }

    .sns-btn.line-btn:hover {
      background: #05b84d;
    }

    .sns-btn.tol-sns-btn {
      background: var(--color-orange);
      border-color: var(--color-orange);
      color: #fff;
    }

    .sns-btn.tol-sns-btn:hover {
      background: var(--color-orange-light);
    }

    .contact-map iframe {
      width: 100%;
      height: 280px;
      display: block;
      border: none;
      filter: grayscale(20%);
    }

    /* ============================================================
       FOOTER
       ============================================================ */
    #site-footer {
      background: var(--color-text);
      padding: 36px 20px 80px;
      text-align: center;
    }

    .footer-logo {
      font-family: var(--font-en);
      font-size: 32px;
      font-weight: 400;
      letter-spacing: 0.05em;
      color: var(--color-beige-mid);
      margin-bottom: 6px;
    }

    .footer-nav {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 16px 24px;
      margin-bottom: 20px;
    }

    .footer-nav a {
      font-size: 11px;
      letter-spacing: 0.1em;
      color: rgba(255, 255, 255, 0.5);
      transition: color 0.2s;
    }

    .footer-nav a:hover {
      color: rgba(255, 255, 255, 0.9);
    }

    .footer-copy {
      font-size: 11px;
      letter-spacing: 0.08em;
      color: rgba(255, 255, 255, 0.35);
    }

    /* ============================================================
       SCROLL TO TOP
       ============================================================ */
    #scroll-top {
      position: fixed;
      bottom: 80px;
      right: 20px;
      width: 44px;
      height: 44px;
      background: var(--color-green-dark);
      color: #fff;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 18px;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s, background 0.2s;
      z-index: 500;
    }

    #scroll-top.visible {
      opacity: 1;
      pointer-events: all;
    }

    #scroll-top:hover {
      background: var(--color-green);
    }

    /* ============================================================
       SP STICKY CTA
       ============================================================ */
    #sp-sticky-cta {
      display: flex;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      z-index: 2100;
      height: 56px;
    }

    #sp-sticky-cta a {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 4px;
      font-size: 12px;
      font-weight: 500;
      letter-spacing: 0.05em;
      transition: opacity 0.2s;
      color: #fff;
    }

    #sp-sticky-cta a:hover {
      opacity: 0.85;
    }

    .sticky-tel-btn {
      flex: 1;
      background: var(--color-green-dark);
    }

    .sticky-line-btn {
      flex: 1;
      background-color: #ce7d84 !important;
      /* Reverted to the original pink color */
    }

    .sticky-tol-btn {
      flex: 1;
      background-color: #666666 !important;
      /* Gray for "資料請求" */
    }

    /* ============================================================
       PC BREAKPOINT  768px+
       ============================================================ */
    @media (min-width: 768px) {
      :root {
        --section-px: 40px;
      }

      body {
        font-size: 18px;
      }

      section {
        margin-bottom: 0;
      }

      /* Header Nav */
      .header-nav {
        display: flex;
        gap: 32px;
        align-items: center;
      }

      .header-nav a {
        font-family: var(--font-en);
        font-size: 20px;
        font-weight: 400;
        letter-spacing: 0.05em;
        color: var(--color-text);
        transition: color 0.2s;
        position: relative;
      }

      .header-nav a::after {
        content: '';
        position: absolute;
        bottom: -3px;
        left: 0;
        width: 0;
        height: 1px;
        background: var(--color-orange);
        transition: width 0.25s;
      }

      .header-nav a:hover {
        color: var(--color-orange);
      }

      .header-nav a:hover::after {
        width: 100%;
      }

      /* PC Header CTA Button Group */
      .header-cta-group {
        display: flex;
        gap: 12px;
        align-items: center;
      }

      .hamburger {
        display: none !important;
      }

      /* CTA Band */
      .cta-band {
        padding: 60px 40px;
      }

      .cta-band-inner {
        gap: 12px;
      }

      .cta-btns-wrap {
        flex-direction: row;
        justify-content: center;
        max-width: 760px;
        gap: 20px;
      }

      .cta-btn-main {
        flex: 1;
      }

      /* Section heading */
      .section-heading figure {
        max-width: 40%;
      }

      /* Trouble Grid */
      .trouble-grid {
        flex-direction: row;
        gap: 60px;
        align-items: stretch;
      }

      .trouble-image {
        width: 50%;
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: stretch;
      }

      .trouble-image-circle {
        width: 100%;
        height: 100%;
        max-width: none;
      }

      .trouble-text {
        width: 50%;
      }

      /* About Grid */
      .about-grid {
        flex-direction: row;
        gap: 60px;
        align-items: center;
      }

      .about-text {
        width: 50%;
        padding-right: 40px;
      }

      .about-image {
        display: none;
      }

      #about {
        background-color: var(--color-white);
        position: relative;
      }

      #about::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 50vw;
        /* right half of screen */
        background: url('img/about1.jpg') no-repeat left center / cover;
        z-index: 0;
      }

      #about .section-inner {
        position: relative;
        z-index: 1;
      }

      /* Message Split Grid */
      .message-split-grid {
        flex-direction: row;
        min-height: 520px;
      }

      .message-image-col {
        width: 50%;
        height: auto;
        min-height: 520px;
      }

      .message-text-col {
        width: 50%;
        padding: 60px 80px;
      }

      /* ★★★ SERVICE Grid ★★★ */
      .service-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 48px 32px;
      }



      .service-card-image img {
        height: 260px;
      }

      /* Price Grid */
      .price-intro {
        text-align: center;
      }

      .price-list-container {
        padding: 0;
        background: transparent;
      }

      /* Contact Grid (PC用の美しい2カラム横並び再設計) */
      .contact-grid {
        display: flex;
        flex-direction: row;
        gap: 60px;
        align-items: flex-start;
      }

      .contact-info {
        width: 45%;
        flex-shrink: 0;
      }

      .contact-map {
        flex: 1;
      }

      .contact-map iframe {
        height: 450px;
      }

      /* Message */
      #message {
        padding: 0;
      }

      /* PC: Restore footer padding */
      #site-footer {
        padding: 36px 20px;
      }

      /* SP features hidden on PC */
      #sp-sticky-cta {
        display: none !important;
      }

      /* Scroll top position */
      #scroll-top {
        bottom: 30px;
      }
    }

    /* ============================================================
       UTILITY & ANIMATIONS
       ============================================================ */
    .sr-only {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }

    /* Scroll Reveal */
    .reveal {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1), transform 1s cubic-bezier(0.22, 1, 0.36, 1);
      pointer-events: none;
    }

    .reveal.is-visible {
      opacity: 1;
      transform: translateY(0);
      pointer-events: auto;
    }

    /* Staggered Delay Utility */
    .delay-100 {
      transition-delay: 100ms;
    }

    .delay-200 {
      transition-delay: 200ms;
    }

    .delay-300 {
      transition-delay: 300ms;
    }

    .delay-400 {
      transition-delay: 400ms;
    }

    .delay-500 {
      transition-delay: 500ms;
    }

    /* 中間スライダー */
    #mid-slider {
      width: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background: var(--color-white);
    }

    .swiper-mid {
      width: 100%;
    }

    .swiper-mid .swiper-wrapper {
      transition-timing-function: linear;
    }

    .swiper-mid .swiper-slide {
      width: auto;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .swiper-mid .swiper-slide img {
      width: 100%;
      height: 250px;
      object-fit: cover;
      display: block;
    }

    @media (min-width: 768px) {
      .swiper-mid .swiper-slide img {
        height: 380px;
      }
    }

    /* コンタクト余白調整 */
    #contact {
      padding: 80px 0 120px 0;
      background-color: var(--color-white) !important;
      position: relative;
      z-index: 2;
    }

    @media (min-width: 768px) {
      #contact {
        padding: 100px 0 160px 0;
      }
    }

    /* SP Only Line Break */
    @media (min-width: 768px) {
      .sp-br {
        display: none;
      }
    }

    /* ============================================================
         RECOMMEND MENU
         ============================================================ */
    .menu-recommend-section {
      margin-bottom: 48px;
    }

    .menu-recommend-card {
      display: flex;
      flex-direction: column;
      gap: 24px;
      background: #f1f1f1;
      border: none;
      border-radius: 12px;
      padding: 24px;
      box-shadow: 0 4px 20px rgba(66, 54, 53, 0.04);
      position: relative;
      overflow: hidden;
    }

    .menu-recommend-image {
      width: 100%;
      height: 200px;
      border-radius: 8px;
      overflow: hidden;
    }

    .menu-recommend-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .menu-recommend-content {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }

    .menu-recommend-badge {
      align-self: flex-start;
      background: var(--color-orange);
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      padding: 4px 12px;
      border-radius: 100px;
      letter-spacing: 0.05em;
    }

    .menu-recommend-name {
      font-size: 18px;
      font-weight: 700;
      color: var(--color-green-dark);
      line-height: 1.4;
    }

    .menu-recommend-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      border-bottom: 1px solid var(--color-beige-dark);
      padding-bottom: 12px;
    }

    .menu-recommend-time {
      font-size: 12px;
      color: var(--color-text-light);
      background-color: var(--color-beige);
      padding: 4px 12px;
      border-radius: 4px;
    }

    .menu-recommend-price {
      font-family: var(--font-en);
      font-size: 28px;
      font-weight: 400;
      color: var(--color-orange);
    }

    .menu-recommend-price small {
      font-size: 14px;
      font-family: var(--font-jp);
      color: var(--color-text-light);
      margin-left: 2px;
    }

    .menu-recommend-desc {
      font-size: 16px;
      line-height: 1.8;
      color: var(--color-text);
      font-weight: 500;
    }

    .menu-recommend-details {
      margin-top: 12px;
    }

    .details-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--color-text);
      margin-bottom: 8px;
    }

    .details-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 12px;
      padding-left: 0;
    }

    .details-list li {
      font-size: 13px;
      color: var(--color-text-light);
      display: flex;
      justify-content: space-between;
    }

    .details-total {
      font-size: 13px;
      font-weight: 700;
      color: var(--color-green-dark);
      text-align: right;
      border-top: 1px dashed var(--color-beige-mid);
      padding-top: 8px;
    }

    @media (min-width: 768px) {
      .menu-recommend-card {
        flex-direction: row;
        padding: 32px;
        gap: 32px;
      }

      .menu-recommend-image {
        width: 40%;
        height: auto;
        min-height: 240px;
      }

      .menu-recommend-content {
        width: 60%;
      }
    }

    .movie-video {
      display: block;
      width: 100%;
      max-width: 960px;
      margin: 0 auto;
      border-radius: 16px;
    }

    .owner-profile {
      margin-top: 32px;
      padding-top: 28px;
      border-top: 1px solid var(--color-beige-dark);
    }

    .owner-profile-link {
      display: inline-block;
      margin-top: 16px;
      text-decoration: underline;
    }

    .legacy-menu {
      display: none;
    }

    /* Construction theme: keep the layout and simplify only the visual treatment. */
    :root {
      --color-beige: #f5f5f3;
      --color-beige-dark: #d8d8d4;
      --color-beige-mid: #b8b8b2;
      --color-green: #5f625f;
      --color-green-light: #e7e8e5;
      --color-green-dark: #3f3f3f;
      --color-orange: #ce7d84;
      --color-orange-light: #d9959b;
      --color-text: #3f3f3f;
      --color-text-light: #686b68;
      --color-white: #ffffff;
      --color-line: #ce7d84;
      --color-gold: #ce7d84;
      --font-jp: 'Noto Serif JP', serif;
      --font-en: 'Prata', serif;
      --font-catch: 'Noto Serif JP', serif;
    }

    *,
    *::before,
    *::after {
      border-radius: 0 !important;
    }

    body,
    .service-card,
    .price-list-container,
    .menu-recommend-card {
      background-color: #ffffff;
    }

    .header-cta,
    .overlay-cta a,
    .fv-pr-badge,
    .cta-btn-main,
    .menu-more-btn,
    .sns-btn {
      background: #3f3f3f !important;
      border-color: #3f3f3f !important;
      color: #ffffff !important;
      box-shadow: none !important;
    }

    .section-heading-en,
    .about-heading-en {
      color: #ce7d84 !important;
    }

    .section-heading-en::after {
      display: none !important;
      content: none !important;
    }

    .section-heading-ja,
    .about-heading-ja {
      font-size: 20px !important;
    }

    .menu-support-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 24px;
    }

    .menu-support-grid .menu-recommend-card {
      display: flex;
      flex-direction: column;
      gap: 18px;
      padding: 32px 24px;
      border: 1px solid #e6e1df;
      background: transparent;
      box-shadow: 0 6px 18px rgba(91, 69, 71, 0.08);
      text-align: center;
    }

    .menu-support-number {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 72px;
      height: 72px;
      margin: 0 auto;
      background: #ce7d84;
      color: #ffffff;
      font-family: var(--font-en);
      font-size: 32px;
      line-height: 1;
      border-radius: 50% !important;
    }

    .menu-support-grid .menu-recommend-name {
      color: #3f3f3f;
      font-size: 20px;
      font-weight: 600;
      line-height: 1.5;
    }

    .menu-support-grid .menu-recommend-image {
      width: 100%;
      height: auto;
      aspect-ratio: 4 / 3;
    }

    .menu-support-grid .menu-recommend-image img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }

    .menu-support-grid .menu-recommend-content {
      gap: 14px;
    }

    .menu-support-grid .menu-recommend-desc {
      padding-top: 18px;
      border-top: 1px solid #e6e1df;
      font-weight: 400;
      line-height: 2;
      text-align: left;
    }

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

      .menu-support-grid .menu-recommend-card {
        flex-direction: column;
      }

      .menu-support-grid .menu-recommend-image,
      .menu-support-grid .menu-recommend-content {
        width: 100%;
      }
    }

    #price .price-list-container {
      max-width: var(--max-width);
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    #price .menu-recommend-section>.menu-group-title {
      display: none;
    }

    .service-grid {
      display: flex !important;
      flex-direction: column;
      gap: 72px;
    }

    .service-card {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      padding: 0;
      border: 0;
      box-shadow: none;
      overflow: visible;
    }

    .service-card-image {
      position: relative;
      margin: 0 0 24px;
      overflow: visible;
    }

    .service-card-image img {
      height: 280px !important;
      object-fit: cover;
    }

    .service-card-num {
      position: absolute;
      top: -34px;
      left: -4px;
      z-index: 2;
      margin: 0;
      color: #ce7d84;
      font-size: clamp(72px, 12vw, 128px);
      line-height: 1;
      opacity: 0.92;
      pointer-events: none;
    }

    .service-card-title,
    .service-card-body {
      padding-right: 16px;
      padding-left: 16px;
    }

    @media (max-width: 767px) {
      .service-card-body {
        text-align: left !important;
      }
    }

    @media (min-width: 768px) {
      .service-grid {
        gap: 100px;
      }

      .service-card {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        column-gap: 64px;
        align-items: center;
      }

      .service-card-image {
        grid-column: 1;
        grid-row: 1 / 3;
        margin: 0;
      }

      .service-card-title,
      .service-card-body {
        grid-column: 2;
        padding: 0;
      }

      .service-card-title {
        grid-row: 1;
        align-self: end;
        font-size: 24px;
      }

      .service-card-body {
        grid-row: 2;
        align-self: start;
      }

      .service-card-image img {
        height: 360px !important;
      }

      .service-card:nth-child(even) .service-card-image {
        grid-column: 2;
      }

      .service-card:nth-child(even) .service-card-title,
      .service-card:nth-child(even) .service-card-body {
        grid-column: 1;
      }

      .service-card:nth-child(even) .service-card-num {
        right: -4px;
        left: auto;
      }
    }

    #owner {
      padding: 80px 0;
      background: #f5f5f3;
    }

    .owner-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 32px;
    }

    .owner-heading .section-heading {
      align-items: flex-start;
      margin-bottom: 24px;
      padding: 0;
      text-align: left;
    }

    .owner-name {
      font-size: 22px;
      line-height: 1.8;
    }

    .owner-message {
      font-size: 16px;
      line-height: 2.2;
    }

    .owner-message p+p {
      margin-top: 20px;
    }

    @media (min-width: 768px) {
      #owner {
        padding: 100px 0;
      }

      .owner-grid {
        grid-template-columns: 3fr 4fr;
        gap: 80px;
        align-items: start;
      }
    }

    /* ===== リニューアル上書き ===== */

    /* MOVIE (#trouble): 背景色 #c8b9a4、タイトル英語を白 */
    #trouble {
      background-color: #c8b9a4 !important;
      background-image: none !important;
    }

    #trouble .section-heading-en {
      color: #ffffff !important;
    }

    #trouble .section-heading-ja {
      color: rgba(255, 255, 255, 0.85) !important;
    }

    /* SERVICE: servicebg.jpg 固定背景 */
    #service {
      background: #ffffff !important;
      position: relative !important;
    }

    #service::before {
      content: '' !important;
      display: block !important;
      position: absolute !important;
      inset: 0 !important;
      background: url('img/servicebg.jpg') no-repeat center / cover fixed !important;
      opacity: 0.2 !important;
      z-index: 1 !important;
    }

    #service .section-inner {
      position: relative !important;
      z-index: 2 !important;
    }

    /* WORKS: 背景色 #c8b9a4 */
    #works {
      background-color: #c8b9a4 !important;
    }

    /* ABOUT: about1.jpg 固定背景 */
    #about {
      background: url('img/about1.jpg') no-repeat center / cover fixed !important;
      position: relative !important;
    }

    #about::before {
      content: '' !important;
      display: block !important;
      position: absolute !important;
      inset: 0 !important;
      background: rgba(255, 255, 255, 0.82) !important;
      z-index: 1 !important;
      width: 100% !important;
      height: 100% !important;
    }

    #about::after {
      display: none !important;
    }

    #about .section-inner {
      position: relative !important;
      z-index: 2 !important;
    }

    .about-text {
      text-align: center !important;
    }

    .about-text * {
      text-align: center !important;
    }

    .about-image {
      display: none !important;
    }

    /* SERVICE: 画像2倍（400px）・border-radius丸 */
    .service-card-image {
      width: 100% !important;
      max-width: 400px !important;
      height: auto !important;
      aspect-ratio: 1 / 1 !important;
      border-radius: 50% !important;
      overflow: hidden !important;
      margin: 0 auto 24px !important;
      border: 4px solid #fff !important;
      box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12) !important;
    }

    .service-card-image img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
    }

    .service-card-num {
      position: static !important;
      font-size: 36px !important;
      color: #3f3f3f !important;
      opacity: 0.2 !important;
      text-align: center !important;
      margin: 12px 0 4px !important;
      line-height: 1 !important;
    }

    @media (min-width: 768px) {
      .service-card-num {
        font-size: 40px !important;
      }
    }

    /* SERVICE: 白DIVなし・grid-template-rows削除・左揃え */
    .service-card {
      grid-template-columns: 1fr !important;
      grid-template-rows: unset !important;
      text-align: left !important;
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      padding: 0 !important;
    }

    @media (min-width: 768px) {
      .service-card {
        grid-template-columns: 1fr !important;
        grid-template-rows: unset !important;
        align-items: center !important;
      }
    }

    .service-card-title,
    .service-card-body {
      text-align: left !important;
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

    /* FV Hero */
    .hero {
      height: 100vh;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden;
      background-color: #3f3f3f;
    }

    .hero-slides {
      position: absolute;
      inset: 0;
      z-index: 0;
    }

    .hero-slide {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      opacity: 0;
      animation: heroFade 18s infinite ease-in-out;
    }

    .hero-slide:nth-child(1) {
      animation-delay: 0s;
    }

    .hero-slide:nth-child(2) {
      animation-delay: 6s;
    }

    .hero-slide:nth-child(3) {
      animation-delay: 12s;
    }

    @keyframes heroFade {
      0% {
        opacity: 0;
      }

      8% {
        opacity: 1;
      }

      33% {
        opacity: 1;
      }

      41% {
        opacity: 0;
      }

      100% {
        opacity: 0;
      }
    }

    .hero-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.42);
      z-index: 1;
    }

    .hero-sidebar {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: 220px;
      background: rgba(255, 255, 255, 1);
      border-right: 1px solid rgba(200, 185, 164, 0.5);
      display: flex;
      flex-direction: column;
      z-index: 10;
    }

    .sidebar-top {
      flex: 1;
      display: flex;
      padding: 5rem 0 0 2rem;
    }

    .sidebar-logo-wrap {
      display: flex;
      gap: 2rem;
      align-items: flex-start;
    }

    .sidebar-sub {
      writing-mode: vertical-rl;
      color: rgba(63, 63, 63, 0.6);
      font-size: 0.7rem;
      letter-spacing: 0.3em;
    }

    .sidebar-logo {
      writing-mode: vertical-rl;
      font-size: 1.6rem;
      font-weight: 700;
      color: #3f3f3f;
      text-decoration: none;
      letter-spacing: 0.3em;
    }

    .sidebar-nav {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      padding: 0 0 2.5rem 2rem;
      gap: 1.2rem;
    }

    .sidebar-nav a {
      color: rgba(63, 63, 63, 0.8);
      text-decoration: none;
      font-size: 0.8rem;
      letter-spacing: 0.15em;
    }

    .sidebar-contact {
      background: #ce7d84;
      display: flex;
      align-items: center;
      min-height: 64px;
    }

    .sidebar-tel {
      flex: 1;
      color: #fff;
      text-decoration: none;
      font-size: 0.95rem;
      font-weight: 700;
      text-align: center;
      padding: 0 0.5rem;
      display: flex;
      flex-direction: column;
    }

    .sidebar-tel span {
      font-size: 0.55rem;
      opacity: 0.85;
      margin-bottom: 2px;
    }

    .sidebar-mail {
      padding: 0 0.8rem;
      color: #fff;
      text-decoration: none;
      font-size: 0.65rem;
      border-left: 1px solid rgba(255, 255, 255, 0.2);
      display: flex;
      align-items: center;
      height: 100%;
      text-align: center;
      line-height: 1.5;
    }

    .hero-center {
      position: relative;
      z-index: 2;
    }

    .hero-v-heading {
      writing-mode: vertical-rl;
      font-family: 'Noto Serif JP', serif;
      font-size: 3rem;
      font-weight: 700;
      color: #fff;
      letter-spacing: 0.4em;
      line-height: 1.7;
      text-shadow: 2px 4px 12px rgba(0, 0, 0, 0.8);
      margin: 0 auto;
    }

    .hero-badge {
      position: absolute;
      bottom: 48px;
      right: 48px;
      background: rgba(40, 36, 35, 0.82);
      border: 1px solid rgba(255, 255, 255, 0.18);
      padding: 1.6rem 2.2rem;
      z-index: 10;
      display: flex;
      flex-direction: column;
      gap: 1rem;
    }

    .hero-badge-item {
      display: flex;
      align-items: center;
    }

    .hero-badge-text {
      color: #fff;
      font-size: 1rem;
      font-weight: 500;
      letter-spacing: 0.1em;
    }

    .hero-badge-divider {
      height: 1px;
      width: 100%;
      background: rgba(255, 255, 255, 0.15);
    }

    @media (max-width: 767px) {
      .hero-sidebar {
        display: none !important;
      }

      .hero {
        flex-direction: column;
        padding: 100px 20px 40px !important;
        height: 100vh;
        height: 100dvh;
        min-height: -webkit-fill-available;
        box-sizing: border-box;
        justify-content: center;
        align-items: center;
      }

      .hero-center {
        align-self: center;
        display: flex;
        justify-content: center;
        width: 100%;
      }

      .hero-v-heading {
        font-size: 1.8rem;
        margin-bottom: 20px;
        line-height: 1.5;
        text-align: start;
        margin-left: 0;
        margin-right: 0;
      }

      .hero-badge {
        position: relative;
        bottom: auto;
        right: auto;
        margin-top: 20px;
        padding: 0.8rem 1.2rem;
        width: auto;
        max-width: 100%;
        gap: 0.6rem;
      }

      .hero-badge-text {
        font-size: 0.8rem;
      }
    }

    /* Works Grid & Modal CSS */
    .works-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }

    @media (min-width: 768px) {
      .works-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
      }
    }

    .works-item {
      aspect-ratio: 1 / 1;
      overflow: hidden;
      cursor: pointer;
      position: relative;
    }

    .works-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease;
    }

    .works-item:hover img {
      transform: scale(1.05);
    }

    .works-modal {
      position: fixed;
      inset: 0;
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
    }

    .works-modal.open {
      opacity: 1;
      pointer-events: auto;
    }

    .works-modal-overlay {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.8);
    }

    .works-modal-content {
      position: relative;
      z-index: 10000;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      padding: 40px 20px;
    }

    .works-modal-close {
      position: absolute;
      top: 20px;
      right: 20px;
      background: rgba(0, 0, 0, 0.5);
      width: 44px;
      height: 44px;
      border-radius: 50%;
      border: none;
      color: #fff;
      font-size: 32px;
      cursor: pointer;
      line-height: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 10001;
    }

    .works-modal-img {
      max-width: 900px;
      max-height: 80vh;
      width: 100%;
      height: auto;
      object-fit: contain;
      border-radius: 8px;
    }

    @media (min-width: 768px) {
      .works-modal-img {
        max-width: 60vw;
        max-height: 60vh;
      }
    }

    /* ============================================================
       WORKS タイトル白・ボタンピンク
       ============================================================ */
    #works .section-heading-en {
      color: #ffffff !important;
    }

    #works .section-heading-ja {
      color: rgba(255, 255, 255, 0.85) !important;
    }

    /* もっと見るボタン: ピンク */
    .menu-more-btn {
      background: linear-gradient(135deg, #ce7d84 0%, #d9959b 100%) !important;
      border-color: #ce7d84 !important;
      color: #ffffff !important;
    }

    /* CTA BAND: ボタンを白文字・白背景（アウトライン）に */
    .cta-btn-main.line-btn,
    .cta-btn-main.tol-btn {
      background: #ffffff !important;
      color: #ce7d84 !important;
      border: 2px solid #ffffff !important;
      box-shadow: none !important;
    }

    .cta-btn-main.line-btn:hover,
    .cta-btn-main.tol-btn:hover {
      background: rgba(255, 255, 255, 0.85) !important;
    }

    /* CTA BAND: 電話・テキスト色を白に */
    .cta-band .cta-phone-large,
    .cta-band .cta-tagline,
    .cta-band .cta-info-sub {
      color: #ffffff !important;
    }

    .cta-band .cta-phone-large i {
      color: #ffffff !important;
    }

    /* ============================================================
       ヘッダー: FV表示中は非表示、スクロール後に表示
       ============================================================ */
    #site-header {
      transition: transform 0.4s ease, opacity 0.4s ease !important;
    }

    #site-header.header-hidden {
      transform: translateY(-100%) !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }

    /* ============================================================
       ABOUT: 1カラム中央
       ============================================================ */
    .about-grid {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
    }

    .about-text {
      text-align: center !important;
      max-width: 780px !important;
      margin: 0 auto !important;
      width: 100% !important;
    }

    .about-text * {
      text-align: center !important;
    }

    /* ============================================================
       SERVICE: オーバーレイ強化・intro装飾・h3ピンク
       ============================================================ */
    /* Remove override background color for servicebg */

    /* サービスintroボックス */
    .service-intro-box {
      max-width: 820px;
      margin: 0 auto 60px;
      text-align: center;
    }

    @media (max-width: 767px) {
      .service-intro-title {
        display: block;
        width: 100%;
        text-align: center;
      }
    }

    .service-intro-title {
      display: inline-block;
      font-size: 20px;
      font-weight: 700;
      color: #fff;
      background: #ce7d84;
      border: 2px solid #ce7d84;
      padding: 10px 28px;
      margin-bottom: 28px;
      letter-spacing: 0.08em;
    }

    @media (min-width: 768px) {
      .service-intro-title {
        font-size: 34px;
        padding: 14px 36px;
      }
    }

    .service-intro-body {
      font-size: 16px;
      line-height: 1.9;
      color: var(--color-text);
    }

    /* service-gridとの間隔 */
    .service-intro-box+.service-grid,
    .service-intro-box~.service-grid {
      margin-top: 60px !important;
    }

    /* SERVICE h3のみ: ピンク・太字 */
    .service-card-title {
      color: #ce7d84 !important;
      font-weight: 700 !important;
    }

    /* ============================================================
       WORKS - CTA間の白スペース（padding）を#c8b9a4に
       ============================================================ */
    #works {
      padding-bottom: 0 !important;
    }

    #works .section-inner {
      padding-bottom: 80px;
    }

    /* ============================================================
       FLOW: スティッキー確実化
       ============================================================ */
    #flow {
      overflow: visible !important;
    }

    #flow .section-inner {
      overflow: visible !important;
    }

    /* ============================================================
       FLOW SECTION
       ============================================================ */
    .flow__container {
      display: flex;
      align-items: flex-start;
      gap: 60px;
    }

    .flow__nav {
      position: -webkit-sticky;
      position: sticky;
      top: 100px;
      width: 250px;
      flex-shrink: 0;
      align-self: flex-start;
    }

    .flow__nav-list {
      list-style: none;
      padding: 0;
      margin: 0;
      position: relative;
    }

    .flow__nav-list::before {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      left: 19px;
      width: 2px;
      background-color: #d8d8d4;
      z-index: 1;
    }

    .flow__nav-item {
      display: flex;
      align-items: center;
      gap: 15px;
      margin-bottom: 40px;
      position: relative;
      z-index: 2;
      cursor: pointer;
      transition: all 0.3s ease;
      opacity: 0.5;
    }

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

    .flow__nav-item.is-active {
      opacity: 1;
    }

    .flow__nav-num {
      width: 40px;
      height: 40px;
      border-radius: 50% !important;
      background-color: #d8d8d4;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-en);
      font-size: 1.1rem;
      font-weight: bold;
      transition: background-color 0.3s ease;
      flex-shrink: 0;
    }

    .flow__nav-item.is-active .flow__nav-num {
      background-color: #ce7d84;
    }

    .flow__nav-text {
      font-weight: bold;
      font-size: 1.1rem;
      color: #3f3f3f;
    }

    .flow__content {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      gap: 40px;
    }

    .flow__step-card {
      background: #fff;
      border: 1px solid #e6e1df;
      padding: 40px;
      box-shadow: 0 6px 18px rgba(91, 69, 71, 0.04);
    }

    .flow__step-header {
      display: flex;
      align-items: center;
      gap: 15px;
      margin-bottom: 20px;
      border-bottom: 1px solid #e6e1df;
      padding-bottom: 15px;
    }

    .flow__step-num {
      width: 40px;
      height: 40px;
      border-radius: 50% !important;
      background-color: #ce7d84;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-en);
      font-size: 1.2rem;
      font-weight: bold;
      flex-shrink: 0;
    }

    .flow__step-title {
      font-size: 20px;
      font-weight: bold;
      color: #3f3f3f;
      margin: 0;
    }

    .flow__step-body {
      font-size: 1.05rem;
      line-height: 1.8;
      color: #686b68;
    }

    @media screen and (max-width: 900px) {
      .flow__container {
        flex-direction: column;
      }

      .flow__nav {
        display: none;
      }

      .flow__step-card {
        padding: 25px;
      }
    }

    /* ============================================================
       SP STICKY BACKGROUNDS
       ============================================================ */
    @media (max-width: 767px),
    (max-width: 1024px) and (hover: none) and (pointer: coarse) {

      #about,
      #service,
      #price {
        position: relative !important;
        background: none !important;
        isolation: isolate !important;
        -webkit-clip-path: inset(0) !important;
        clip-path: inset(0) !important;
      }

      #about::before,
      #service::before,
      #price::before {
        content: '' !important;
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 0 !important;
        pointer-events: none !important;
        display: block !important;
      }

      #about::after {
        display: none !important;
      }

      #about>*,
      #service>*,
      #price>* {
        position: relative !important;
        z-index: 1 !important;
      }

      #about::before {
        background: linear-gradient(rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.82)), url('img/about1.jpg') no-repeat center / cover !important;
        opacity: 1 !important;
      }

      #service::before {
        background: url('img/servicebg.jpg') no-repeat center / cover !important;
        opacity: 0.2 !important;
      }

      #price::before {
        background: linear-gradient(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93)), url('img/menu.jpg') no-repeat center / cover !important;
        opacity: 1 !important;
      }
    }