@charset "UTF-8";
/* 元 index.html の <head> 内インライン <style>（19-959行）を退避。
   画像パスは css/ ディレクトリ基準に補正（assets/images/ -> ../images/）。
   ※デザイン非破壊のため内容は原状維持。後日 main.css と統合リファクタ予定。 */
    /* CSS nesting fallback & local overrides */
    .fv__btn-area {
      position: absolute;
      bottom: 30px;
      left: 30px;
    }
    @media (max-width: 767px) {
      .fv__btn-area { bottom: 15px; left: 15px; }
    }
    .english-available {
      background-color: rgba(140, 0, 10, 0.7);
      padding: 6px;
      position: relative;
      width: 180px;
    }
    @media (max-width: 767px) {
      .english-available { padding: 2px; width: 136px; }
    }
    .english-available span {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: clamp(12px, 10.786px + 0.324vw, 17px);
      color: #fff;
      line-height: 1.6;
      border: 1px #F0A97D solid;
      padding: 19px;
    }
    @media (max-width: 767px) {
      .english-available span { padding: 6px; justify-content: center; gap: 10px; }
    }
    .english-available span::after {
      content: "";
      background: url("../images/top/english-available__icon.svg") center right / contain no-repeat;
      width: 40px; height: 40px; display: inline-block;
    }
    @media (max-width: 767px) {
      .english-available span::after { width: 28px; height: 28px; }
    }
    .btn__information-list { margin-top: 8px; }
    .btn__information-list a {
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 12px;
      background-color: rgba(155, 0, 13, 0.7);
      font-size: clamp(12px, 11.029px + 0.259vw, 16px);
      color: #fff; line-height: 1.6; text-align: center; height: 142px;
    }
    @media (max-width: 767px) {
      .btn__information-list a {
        flex-direction: row; justify-content: flex-end;
        gap: 20px; height: 50px;
      }
    }
    .btn__information-list a::before {
      content: "";
      background: url("../images/top/information-list__icon.svg") center center / contain no-repeat;
      width: 23px; height: 17px; display: inline-block;
    }
    @media (max-width: 767px) {
      .btn__information-list a::before { display: none; }
    }
    .btn__information-list a::after {
      content: "";
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='23.987' height='5.39' viewBox='0 0 23.987 5.39'%3E%3Cpath d='M4314.14,1029.574h22.78l-4.537-4.536' transform='translate(-4314.14 -1024.684)' fill='none' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E") center center / contain no-repeat;
      width: 23px; height: 5px;
    }
    @media (max-width: 767px) {
      .btn__information-list a::after {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4.474' height='7.533' viewBox='0 0 4.474 7.533'%3E%3Cpath d='M6122.476,722.044l3.413,3.413-3.413,3.413' transform='translate(-6122.123 -721.691)' fill='none' stroke='%23fff' stroke-width='1'/%3E%3C/svg%3E");
        width: 4px; height: 7px; margin-right: 10px;
      }
    }


    /* top-recommend inline styles */
    .top-recommend {
      padding-top: clamp(60px, 52.718px + 1.942vw, 90px);
      padding-bottom: clamp(60px, 52.718px + 1.942vw, 90px);
      background: linear-gradient(0deg, rgb(246,238,228) 0%, rgb(255,255,255) 100%);
    }
    .top-recommend__inner { max-width: 1000px; margin: auto; padding: 0 20px; }
    .top-recommend__subTtl { margin-top: 0; }
    .top-recommend__lead {
      text-align: center; line-height: 2; margin-top: 40px;
    }
    @media (max-width: 767px) {
      .top-recommend__lead { font-size: 3.7vw; }
    }
    .top-recommend__banner {
      display: flex; gap: 24px; margin-top: 40px; justify-content: center;
    }
    @media (max-width: 767px) {
      .top-recommend__banner { flex-direction: column; gap: 16px; }
    }
    .banner-item { flex: 1; max-width: 480px; }
    .banner-item img { width: 100%; display: block; }

    /* top-case */
    /* top-case 新デザイン */
    /* 下余白は症例カードを縮小したぶん詰める（上 80px / 下 16px）。
       実際の見た目の間隔は、次の .top-doctor の上余白 80px が続くぶん足し算になる。 */
    .top-case { padding: 80px 0 16px; background: #fff; }
    .case-inner { max-width: 1100px; margin: auto; padding: 0 20px; }
    .case-slider-wrap {
      position: relative; margin-top: 60px;
      display: flex; align-items: stretch;
      border: 1px solid #e8e0d5;
    }
    @media (max-width: 767px) { .case-slider-wrap { flex-direction: column; } }
    .case-ba {
      position: relative; flex: 0 0 50%; overflow: hidden;
      cursor: ew-resize; user-select: none;
      background: #1a1a1a;
    }
    @media (max-width: 767px) { .case-ba { flex: none; min-height: 60vw; } }
    .case-ba__before, .case-ba__after {
      position: absolute; inset: 0;
    }
    .case-ba__before img, .case-ba__after img {
      width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none;
    }
    /* 左半分＝Before（上に重ねてクリップ）／右半分＝After（下の全面レイヤー）。
       ラベル（左 Before・右 After）と一致させる。 */
    .case-ba__before { clip-path: inset(0 50% 0 0); z-index: 2; }
    .case-ba__divider {
      position: absolute; top: 0; bottom: 0;
      left: 50%; transform: translateX(-50%);
      width: 2px; background: rgba(183,148,100,0.85); z-index: 3;
    }
    .case-ba__handle {
      position: absolute; top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 40px; height: 40px; border-radius: 50%;
      background: rgba(183,148,100,0.9);
      display: flex; align-items: center; justify-content: center;
      color: #fff; font-size: 1rem; z-index: 4;
      box-shadow: 0 2px 8px rgba(0,0,0,0.2); cursor: ew-resize;
    }
    .case-ba__label {
      position: absolute; top: 12px;
      background: rgba(0,0,0,0.45);
      color: #fff; font-size: 0.75rem;
      letter-spacing: 0.1em; padding: 4px 10px; z-index: 3;
    }
    .case-ba__label--before { left: 12px; }
    .case-ba__label--after { right: 12px; }
    .case-detail-panel {
      flex: 1; padding: 36px 36px 28px;
      display: flex; flex-direction: column; justify-content: space-between;
      border-left: 1px solid #e8e0d5;
    }
    @media (max-width: 767px) { .case-detail-panel { border-left: none; border-top: 1px solid #e8e0d5; padding: 24px 20px; } }
    .case-detail-ttl {
      font-size: 1.125rem; font-weight: 500;
      font-family: "Noto Serif JP", serif;
      margin: 0 0 20px; color: #272625;
    }
    .case-detail-row { border-bottom: 1px dashed #d0bea8; padding: 10px 0; }
    .case-detail-row:first-child { padding-top: 0; }
    .case-detail-dt { font-size: 0.8125rem; color: #9b000d; font-weight: 500; margin: 0 0 4px; }
    .case-detail-dd { font-size: 0.875rem; color: #272625; line-height: 1.7; margin: 0; }
    .case-detail-sub { font-size: 0.75rem; color: #7a6a5a; display: block; margin-top: 2px; }
    .case-more-btn {
      display: inline-flex; align-items: center; gap: 16px;
      margin-top: 24px; align-self: flex-end;
      background: #f0ebe3; color: #272625;
      font-size: 0.9375rem; padding: 12px 24px;
      font-family: "Noto Serif JP", serif;
      text-decoration: none; transition: background 0.2s;
    }
    .case-more-btn:hover { background: #e0d5c5; }
    .case-more-btn::after { content: ""; width: 40px; height: 1px; background: #272625; display: block; }
    .case-nav {
      display: flex; align-items: center; justify-content: center;
      gap: 16px; margin-top: 30px;
    }
    .case-nav__btn {
      width: 48px; height: 48px; border: 1px solid #d0bea8;
      background: #fff; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.25rem; color: #8d775e; transition: background 0.2s;
    }
    .case-nav__btn:hover { background: #f0ebe3; }
    .case-nav__count { font-size: 0.875rem; color: #8d775e; min-width: 48px; text-align: center; }

    /* 症例2件（左：眉アートメイク／右：フォトフェイシャル）。各カードは Before/After の2枚組 */
    .case-pair {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: clamp(24px, 3.5vw, 56px); margin-top: 60px;
      /* 比率（3:4）はそのままに、カード幅を絞って全体を小さく見せる */
      max-width: 720px; margin-left: auto; margin-right: auto;
    }
    .case-pair__item { margin: 0; }

    /* Before/After をハンドルで見比べる（TOP の旧スライダーと同じ操作感） */
    .case-compare {
      position: relative; aspect-ratio: 3 / 4; overflow: hidden;
      background: #1a1a1a; border: 1px solid #e8e0d5;
      cursor: ew-resize; user-select: none;
    }
    .case-compare__before, .case-compare__after { position: absolute; inset: 0; }
    .case-compare__before { clip-path: inset(0 50% 0 0); z-index: 2; }
    .case-compare__before img, .case-compare__after img {
      width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none;
    }
    .case-compare__divider {
      position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
      width: 2px; background: rgba(183,148,100,0.85); z-index: 3;
    }
    .case-compare__handle {
      position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
      width: 40px; height: 40px; border-radius: 50%;
      background: rgba(183,148,100,0.9);
      display: flex; align-items: center; justify-content: center;
      color: #fff; font-size: 1rem; z-index: 4;
      box-shadow: 0 2px 8px rgba(0,0,0,0.2); cursor: ew-resize;
    }
    .case-compare__label {
      position: absolute; top: 12px; z-index: 3;
      background: rgba(0,0,0,0.45); color: #fff; font-size: 0.75rem;
      letter-spacing: 0.1em; padding: 4px 10px;
    }
    .case-compare__label--before { left: 12px; }
    .case-compare__label--after { right: 12px; }
    .case-pair__cap { margin-top: 14px; text-align: center; }
    .case-pair__ttl {
      margin: 0;
      font-family: "Noto Serif JP", serif;
      font-size: clamp(1rem, 1.6vw, 1.125rem); color: #272625;
    }
    /* 個別ページへの導線（施術カードの「詳細はこちら」を小さくした体裁） */
    .case-pair__btn {
      display: inline-flex; align-items: center; gap: 8px;
      margin-top: 10px;
      background: #9b000d; color: #fff;
      font-size: 0.8125rem; padding: 8px 22px; border-radius: 30px;
      text-decoration: none; transition: background 0.2s;
      font-family: "Noto Serif JP", serif; white-space: nowrap;
    }
    .case-pair__btn:hover { background: #7a0009; color: #fff; opacity: 1; }
    /* 最新症例（公式Instagram）バナー */
    .case-insta { max-width: 720px; margin: 72px auto 0; text-align: center; }
    .case-insta__lead {
      margin: 0 0 14px;
      font-family: "Noto Serif JP", serif;
      font-size: clamp(1rem, 1.6vw, 1.125rem); color: #272625;
    }
    .case-insta__banner { display: block; transition: opacity 0.2s; }
    .case-insta__banner:hover { opacity: 0.8; }
    .case-insta__banner img { width: 100%; height: auto; display: block; }

    @media (max-width: 767px) {
      /* 携帯は1列。PC と同じくらいの縮小率になるよう幅を絞って中央に置く */
      .case-pair {
        grid-template-columns: 1fr; gap: 36px; margin-top: 36px;
        max-width: min(300px, 78%);
      }
      .case-insta { margin-top: 56px; }
    }

    /* top-doctor */
    .top-doctor { padding: 80px 0; background: #f6f0e7; }
    .top-doctor__inner { max-width: 1000px; margin: auto; padding: 0 20px; }
    .top-doctor__ttl { margin-bottom: 0; }
    .top-doctor__subTtl { margin-top: 0; }
    .doctor__listImg { width: 100%; margin-right: 0; margin-bottom: 20px; text-align: center; float: none; }
    @media (max-width: 767px) { .doctor__listImg { width: 70vw; margin: 0 auto 20px; display: block; } }
    .doctor__listImg img { width: 100%; display: block; }
    .doctor__float-wrap {
      display: grid;
      grid-template-columns: 1fr 2fr;
      gap: 50px;
      align-items: start;
      width: 100%;
      margin-top: 40px; /* 「ご挨拶」(subTtl)の下の余白。他セクション(recommend=40px)に合わせる */
    }
    @media (max-width: 767px) { .doctor__float-wrap { grid-template-columns: 1fr; gap: 24px; margin-top: 24px; } }
    @media (max-width: 1024px) { .doctor__float-wrap { grid-template-columns: 1fr; gap: 24px; } }
    .doctor__listContents { width: 100%; min-width: 0; }
    @media (max-width: 767px) { .doctor__listContents { float: none !important; width: 100% !important; margin: 0 !important; } }
    .doctor__listPosition { font-size: 0.875rem; color: #7a0009; margin: 0; }
    .doctor__listName { font-size: 1.5rem; font-weight: 500; margin: 4px 0; }
    .doctor__listNameEn { font-size: 0.875rem; color: #7a0009; letter-spacing: 0.1em; margin: 0 0 16px; }
    /* SP文字サイズ修正 - main.cssの3.4666vwを上書き */
    @media screen and (max-width: 767px) {
      body { font-size: 15px !important; }
    }
    .doctor__listText { line-height: 1.875; font-size: 0.9375rem; }
    /* 段落間の余白を復元（SWELLのリセットで <p> margin が 0 にされ、本来の
       段落区切り＝ブラウザ既定 margin:1em が消えて詰まるため明示指定する） */
    .doctor__listText p { margin: 1em 0; }
    .doctor__listText p:first-child { margin-top: 0; }
    @media (max-width: 767px) {
      .doctor__listText { font-size: inherit; line-height: 2; }
      .doctor__listText br { display: none; }
    }

    /* top-instagram placeholder */
    .top-instagram { padding: 60px 0; }
    .top-instagram .subTtl { margin-bottom: 30px; }
    .instagram-placeholder {
      max-width: 900px; margin: 0 auto; width: 85%;
      background: #f6f0e7; padding: 40px; text-align: center; color: #7a0009;
    }
    .instagram-placeholder a {
      display: inline-block; margin-top: 16px; padding: 10px 24px;
      border: 1px solid #7a0009; color: #7a0009;
    }

    /* menu-card 新レイアウト */
    .menu-card-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      max-width: 900px;
      margin-left: auto; margin-right: auto;
      gap: 24px; margin-top: 60px;
    }
    @media (max-width: 767px) { .menu-card-grid { grid-template-columns: minmax(0, 380px); gap: 20px; padding: 0 24px; justify-content: center; } }

    /* 施術料金バナー（メニュー最下部） */
    .menu-price-banner {
      max-width: 900px;
      margin: 48px auto 0;
    }
    .menu-price-banner img {
      display: block;
      width: 100%;
      height: auto;
      border-radius: 14px;
    }
    @media (max-width: 767px) {
      .menu-price-banner { margin-top: 32px; padding: 0 6px; }
    }

    .menu-card-wrap {
      position: relative;
      background: transparent;
      border-radius: 14px;
      padding: 0 0 20px;
      display: flex; flex-direction: column;
      align-items: center;
    }
    .menu-card-cat {
      text-align: center;
      font-family: "Noto Serif JP", serif;
      font-size: clamp(1.1rem, 1.2vw + 0.7rem, 1.6rem);
      letter-spacing: 0.18em;
      color: rgba(141, 119, 94, 0.65);
      padding: 0 8px 0;
      line-height: 1;
      position: relative; z-index: 3;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-bottom: -0.5em;
    }
    .menu-card {
      background: #fff;
      border-radius: 10px;
      margin: 0 10px 0;
      flex: 1; width: calc(100% - 20px);
      display: flex; flex-direction: column;
      box-shadow: 0 2px 12px rgba(0,0,0,0.15);
      overflow: hidden;
      position: relative; z-index: 2;
      padding: 0 0 8px;
    }
    .menu-card__img {
      width: 80%;
      margin: 42px auto 12px;
      aspect-ratio: 4 / 3;
      overflow: hidden; border-radius: 6px;
      flex-shrink: 0;
    }
    .menu-card__img img {
      width: 100%; height: 100%; object-fit: cover; display: block;
      transition: transform 0.5s;
    }
    .menu-card-wrap:hover .menu-card__img img { transform: scale(1.04); }
    .menu-card__body {
      padding: 20px 24px 8px;
      flex: 1; display: flex; flex-direction: column;
    }
    .menu-card__name {
      font-size: clamp(1.15rem, 1.2vw + 0.75rem, 1.45rem);
      font-weight: 500; text-align: center;
      font-family: "Noto Serif JP", serif;
      color: #272625; margin: 0 0 8px;
    }
    .menu-card__desc { margin: 0 0 1.6em; }
    @media (max-width: 767px) {
      .menu-card__btn { margin: 12px auto 18px; }
    }
    .menu-card__price-row {
      display: flex; align-items: center;
      justify-content: space-between;
      padding: 12px 8px 12px 8px;
      border-top: 1px solid #e8e0d5;
      gap: 6px;
    }
    .menu-card__price-row:last-of-type { border-bottom: 1px solid #e8e0d5; }
    .menu-card__price-label-wrap { flex: 1; }
    .menu-card__price-label {
      font-size: clamp(0.85rem, 0.6vw + 0.55rem, 0.95rem);
      color: #272625; font-weight: 500; line-height: 1.4;
      text-align: left;
    }
    .menu-card__price-badge {
      display: block; margin-top: 3px;
      font-size: clamp(0.75rem, 0.5vw + 0.45rem, 0.875rem);
      background: #ede6dc; color: #7a6a5a;
      padding: 2px 8px; border-radius: 3px;
      text-align: left; width: fit-content;
      white-space: nowrap;
    }
    @media (max-width: 767px) { .menu-card__price-badge { font-size: 3vw !important; } }
    .menu-card__per-unit {
      flex-shrink: 0;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      width: 34px; height: 34px;
      border-radius: 50%; border: 1px solid #c09090;
      font-size: 0.52rem; line-height: 1.3;
      color: #7a6a5a; text-align: center;
    }
    .menu-card__price-right { text-align: right; flex-shrink: 0; min-width: 0; overflow: hidden; }
    .menu-card__price-value {
      font-size: clamp(1rem, 0.8vw + 0.6rem, 1.15rem);
      font-weight: 700; color: #9b000d; display: block;
    }
    .menu-card__price-sub {
      font-size: clamp(0.7rem, 0.4vw + 0.4rem, 0.8rem);
      color: #7a6a5a; display: block;
    }
    .menu-card__btn {
      display: inline-flex; align-items: center;
      align-self: center;
      margin: 18px auto 18px;
      background: #9b000d; color: #fff;
      font-size: clamp(0.95rem, 0.7vw + 0.6rem, 1.1rem);
      padding: 14px 36px; border-radius: 30px;
      text-decoration: none; transition: background 0.2s;
      font-family: "Noto Serif JP", serif;
      gap: 10px; white-space: nowrap;
    }
    .menu-card__btn:hover { background: #7a0009; color: #fff; opacity: 1; }


    /* menu-visia */
    .menu-visia { background: #f6f0e7; margin-top: 60px; }
    .menu-visia__inner { max-width: 1200px; margin: auto; padding: 50px 20px; }
    .menu-visia__ttl { font-size: 1.125rem; font-weight: 500; text-align: center; margin-bottom: 30px; }
    .menu-visia__block { display: flex; gap: 30px; align-items: flex-start; }
    @media (max-width: 767px) { .menu-visia__block { flex-direction: column; } }
    .menu-visia__blockPic { width: 120px; flex-shrink: 0; }
    .menu-visia__blockImg { width: 100%; }
    .menu-visia__blockText { font-size: 0.875rem; line-height: 1.8; }
    .f-14 { font-size: 0.875rem; }

    /* menu-trouble */
    .menu-trouble { padding: 80px 0; background: linear-gradient(0deg, rgb(255,255,255) 0%, rgb(246,238,228) 100%); }
    .menu-trouble__inner { max-width: 1000px; margin: auto; padding: 0 20px; }
    .menu-trouble__ttl { margin-bottom: 0; }
    .menu-trouble__subTtl { margin-top: 0; }
    .menu-trouble__list {
      display: grid; grid-template-columns: repeat(5, 1fr);
      gap: 20px; margin-top: 50px; flex-wrap: wrap;
    }
    @media (max-width: 767px) { .menu-trouble__list { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
    .menu-trouble__listItem { cursor: pointer; }
    .menu-trouble__listBlock { display: block; text-align: center; padding: 12px 8px; border: 1px solid #d0bea8; background: #fff; }
    .menu-trouble__listBlock:hover { background: #f6f0e7; }
    .menu-trouble__listImg { width: 80px; height: 80px; object-fit: contain; display: block; margin: 0 auto 8px; }
    @media (max-width: 767px) { .menu-trouble__listImg { width: 60px; height: 60px; } }
    .menu-trouble__listText { font-size: 0.875rem; text-align: center; color: #272625; }
    .accordion__content {
      display: none; background: #f9f4ee; padding: 0;
      border: 1px solid #d0bea8; border-top: none;
    }
    .accordion__content.is-open { display: block; }
    .accordion__contentList {
      display: block; padding: 10px 16px; font-size: 0.8125rem;
      color: #272625; border-bottom: 1px dashed #d0bea8;
    }
    .accordion__contentList:hover { background: #f0e8dd; }
    .menu-trouble__listItem.is-active .menu-trouble__listBlock { background: #f6f0e7; }

    /* FV scrolldown */
    .fv__scrollDown {
      position: absolute; left: 50%; transform: translateX(-50%);
      bottom: -60px; display: flex; flex-direction: column; align-items: center;
    }
    @media (max-width: 767px) {
      .fv__scrollDown { display: none; }
    }
    .fv__scrollDown span { font-size: 0.75rem; letter-spacing: 0.2em; color: #7a0009; }
    .fv__scrollDown::after {
      content: ""; display: block; width: 1px; height: 60px;
      background: #7a0009; margin-top: 8px;
    }

    /* pagetop */
    .pagetop {
      position: fixed; right: 20px; z-index: 10; cursor: pointer;
    }
    .pagetop img { width: 50px; }

    /* top-monitor */
    .top-monitor {
      background: #f6f0e7; padding: 50px 30px; margin-top: 60px; font-size: 0.9rem; line-height: 1.8;
    }
    .top-monitor h2 { font-size: 1.25rem; font-weight: 500; margin-bottom: 20px; }
    .top-monitor h3 { font-size: 1rem; font-weight: 500; margin-top: 20px; }
    .top-monitor ul { padding-left: 1.5em; list-style: disc; }

    /* footer-information */
    .footer-information {
      background: #9b000d;
      padding: 60px 0;
    }
    .footer-information__inner { max-width: 1200px; margin: auto; padding: 0 40px; }
    @media (max-width: 767px) { .footer-information__inner { padding: 0; } }
    .footer-information__ttl {
      font-size: clamp(1rem, 1.5vw + 0.5rem, 1.5rem);
      letter-spacing: 0.15em;
      color: rgba(255,255,255,0.6);
      font-family: "Noto Serif JP", serif;
      margin: 0 0 8px;
    }
    .footer-information__grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
    }
    @media (max-width: 767px) { .footer-information__grid { grid-template-columns: 1fr; gap: 24px; } }
    .footer-information__map {
      aspect-ratio: 1 / 1;
      max-height: 380px;
      overflow: hidden;
    }
    .footer-information__map iframe {
      width: 100%; height: 100%; display: block; border: none;
    }
    .footer-map-placeholder, .footer-detail-placeholder {
      background: rgba(255,255,255,0.1);
      min-height: 280px;
      display: flex; align-items: center; justify-content: center;
      color: rgba(255,255,255,0.5);
      font-size: 0.875rem;
      letter-spacing: 0.1em;
    }
    .footer-detail-table {
      width: 100%; border-collapse: collapse;
      color: #fff; font-size: clamp(0.8rem, 0.5vw + 0.5rem, 0.95rem);
    }
    .footer-detail-table th, .footer-detail-table td {
      padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,0.25);
      text-align: left; vertical-align: top; line-height: 1.6;
    }
    .footer-detail-table th {
      white-space: nowrap; width: 7em;
      color: rgba(255,255,255,0.75); font-weight: 400;
    }
    .footer-tel { color: #fff; font-size: 1.2em; }
    .footer-note { font-size: 0.85em; color: rgba(255,255,255,0.7); }
    .footer-schedule-table {
      width: 100%; border-collapse: collapse;
      color: #fff; margin-top: 20px;
      font-size: clamp(0.75rem, 0.4vw + 0.5rem, 0.875rem);
      background: rgba(255,255,255,0.08);
    }
    .footer-schedule-table th, .footer-schedule-table td {
      padding: 10px 8px; text-align: center;
      border: 1px solid rgba(255,255,255,0.2);
    }
    .footer-schedule-table thead th {
      background: rgba(0,0,0,0.2); font-weight: 400;
      letter-spacing: 0.1em;
    }
    .footer-schedule-table thead th:first-child {
      letter-spacing: 0.2em; font-size: 0.8em;
    }
    .footer-schedule-note {
      color: rgba(255,255,255,0.8); font-size: 0.875rem;
      margin-top: 10px; line-height: 1.6;
    }

    .footer__logo { display: none; }
    .footer-menuLink { display: block; color: #f6eee4; font-size: 0.8125rem; line-height: 1.6; white-space: nowrap; }
    .footer-menuLink:hover { opacity: 0.8; }
    .footer-menu { display: grid !important; grid-template-columns: 1fr 1fr 1fr; gap: 40px; margin-top: 0 !important; }
    .footer-menu .footer-menuBlockListItem:not(:first-of-type) { margin-top: 6px !important; }
    /* 3列均等（main.cssの旧2列前提＝33%幅/min-width:310px/padding-left:78px を打ち消す） */
    .footer-menu .footer-menuBlock { min-width: 0 !important; width: auto !important; padding-left: 0 !important; }
    .footer-inner { padding: 40px 0 25px !important; }
    .footer-col-title {
      font-size: 0.7rem; letter-spacing: 0.15em; color: rgba(246,238,228,0.5);
      text-transform: uppercase; margin: 0 0 12px; font-weight: 400;
    }
    /* SNSの上に置く「Social」見出し（その他リンクとの間に余白） */
    .footer-col-title--social { margin-top: clamp(22px, 3vw, 30px); }
    /* フッターのモバイル専用リンク（PCでは非表示）。例：施術メニュー一覧→MENUアンカー */
    .footer-li-sp { display: none; }
    @media (max-width: 767px) { .footer-li-sp { display: block; } }
    @media (max-width: 767px) {
      /* モバイルは2列：2列目（施術メニュー）は非表示（ハンバーガーにあるため） */
      .footer-menu .footer-menuBlock:nth-child(2) { display: none; }
      .footer-menu { grid-template-columns: 1fr 1fr !important; gap: 20px; align-items: start; }
      .footer-menuLink { white-space: normal; font-size: 0.8rem; }
      .footer-menu .footer-menuBlock:last-of-type { display: block !important; }
      .footer-menu .footer-menuBlock:first-of-type { width: auto !important; padding-left: 0 !important; margin-top: 0 !important; }
      .footer-menu .footer-menuBlock { width: auto !important; min-width: auto !important; }
    }
    @media (max-width: 767px) {
      .footer-bottom {
        text-align: center !important;
        justify-content: center !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
      }
    }
    .footer-sp-social {
      display: flex !important; flex-direction: column !important; gap: 14px;
    }
    .footer-sp-social a {
      display: flex; align-items: center; gap: 10px;
      color: #f6eee4; text-decoration: none; font-size: 0.8125rem;
    }
    .footer-sp-social a:hover { opacity: 0.8; }
    .footer-sp-social svg { width: 24px; height: 24px; fill: #f6eee4; flex-shrink: 0; }
    .footer-menuBlock--line { display: flex; flex-direction: column; align-items: flex-start; }
    .footer-line-icon { display: flex; flex-direction: row; align-items: center; gap: 10px; }
    .footer-line-icon img { width: 36px; height: 36px; object-fit: contain; }
    .footer-line-icon span { color: #f6eee4; font-size: 0.8125rem; white-space: nowrap; }
    .footer-menuBlockCenter { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
    .footer-menuBlockCenter a { color: #f6eee4; font-size: 0.9375rem; }
    .footer-iconwaku { display: flex; gap: 16px; margin-top: 20px; }
    .footer-icon img { width: 32px; height: 32px; object-fit: contain; }
    .sp_iconwaku { display: none; }
    @media (max-width: 767px) {
      .sp_iconwaku { display: flex; gap: 16px; padding: 20px 0; }
      .footer-sp-instaBlock img { width: 40px; }
    }

    /* top-news bg */
    .top-news { background: url("../images/news/bg.png") no-repeat center/cover; }
    .top-news__transition img { width: 40px; flex-shrink: 0; }

    /* concept font */
    .top-concept__Ttl { font-size: 1.75rem; }
    @media (max-width: 767px) {
      .top-concept__Ttl { font-size: 5.3vw; white-space: normal !important; }
      .top-concept__Text .link-button { max-width: calc(100% - 20px); }
    }

    .doctor__sign {
      display: block;
      text-align: right;
      font-size: 0.9rem;
      color: #555;
      margin-top: 16px;
    }
    .doctor__sign-name {
      display: block;
      font-family: 'Klee One', cursive;
      font-size: clamp(1.5rem, 3vw, 2.2rem);
      font-weight: 600;
      color: #272625;
      letter-spacing: 0.2em;
      margin-top: 2px;
    }
    .section-en-ttl {
      display: block;
      font-family: 'Noto Serif JP', serif;
      font-size: 74px;
      font-weight: 400;
      letter-spacing: 0.05em;
      color: #e8ddd0;
      line-height: 1;
      text-align: center;
    }
    @media (max-width: 767px) {
      .section-en-ttl { font-size: 13.3333vw; }
    }
    .sp-br { display: none; }
    @media (max-width: 767px) { .sp-br { display: block; } }
    /* PCのみinline表示・モバイルで非表示（カッコ等を文中で出し分ける用） */
    .pc-only-inline { display: inline; }
    @media (max-width: 767px) { .pc-only-inline { display: none; } }
    .subTtl { font-size: 30px; line-height: 1.67; letter-spacing: 0.06em; margin-top: clamp(15px, 12.573px + 0.647vw, 25px); color: #6b6b6b; }
    @media (max-width: 767px) { .subTtl { font-size: 5.8vw; } }
    /* メニューセクションのttlTextをsubTtlと統一 */
    .menu-all__inner .first__ttlText { letter-spacing: 0.06em !important; font-weight: 400 !important; }
    .menu-all .first__ttl { padding-top: 40px !important; }
    @media (max-width: 767px) { .menu-all .first__ttl { padding-top: 8vw !important; } }
    .header__tel { background-color: rgba(155, 0, 13, 0.75) !important; }

    /* top-ttl */
    .top-ttl { height: 74px; margin-bottom: 0; }
    @media (max-width: 767px) { .top-ttl { height: 13.3vw; text-align: center; } }
    .top-ttlImg { height: 100%; }
    .top-ttlImg img { height: 100%; width: auto; }
    @media (max-width: 767px) { .top-ttlImg img { width: 100%; object-fit: contain; } }
    /* 全セクション見出し高さ統一 - 各SVGの自然なサイズに合わせて調整 */
    .top-concept__ttlImg { height: 94px !important; display: flex; align-items: center; justify-content: center; }
    .top-concept__ttlImg img { height: 100% !important; width: auto !important; }
    .top-news__ttlImg { height: 74px !important; display: flex; align-items: center; justify-content: center; }
    .top-news__ttlImg img { height: 100% !important; width: auto !important; }
    .first__ttlHeading { height: 67px !important; margin: 0 !important; display: flex; align-items: center; justify-content: center; }
    .first__ttlHeading img { height: 100% !important; width: auto !important; display: block; }
    /* case.svgは65.8pxなので top-ttlを個別上書き */
    .top-case .top-ttl { height: 66px !important; }
    @media (max-width: 767px) {
      .top-concept__ttlImg { height: 13.3vw !important; }
      .top-news__ttlImg { height: 13.3vw !important; }
      .first__ttlHeading { height: 13.3vw !important; }
      .top-case .top-ttl { height: 13.3vw !important; }
    }

    @media screen and (max-width: 767px) {
      .header__logo { left: 4vw !important; transform: none !important; }
      .header__tel { display: none !important; }
    }
    @media screen and (min-width: 768px) and (max-width: 1100px) {
      .header__tel {
        width: 5.5vw !important; height: 5.5vw !important;
        right: 8.5vw !important; top: 2.5vw !important;
        font-size: 1vw !important;
      }
      .header__tel::before { width: 2vw !important; height: 2vw !important; }
      .header__navButton {
        right: 2.5vw !important; top: 2.5vw !important;
        padding: 1.8vw 0.9vw !important;
      }
      .header__navButton span { width: 2.5vw !important; }
      .header__navButton span:before,
      .header__navButton span:after { width: 2.5vw !important; }
      .header__navButton span:after { width: 1.6vw !important; }
    }
    .link-button {
      height: 52px; width: fit-content; font-size: 20px;
      display: flex; align-items: center; justify-content: flex-start;
      gap: 14px;
      letter-spacing: 0.06em; margin-left: auto; line-height: 2.5;
      padding-bottom: 5px; border-bottom: 1px solid #272625;
    }
    .link-button::after {
      content: ""; width: 43px; height: 6.8px; display: inline-block;
      background: url("../images/common/icon_arrow_black.svg") no-repeat center/contain;
      flex-shrink: 0;
    }
    /* link-button — タブレット (768–1024px) */
    @media screen and (min-width: 768px) and (max-width: 1024px) {
      .link-button { font-size: 16px; height: auto; gap: 10px; }
      .link-button::after { width: 28px; height: 4.5px; }
    }
    /* link-button — モバイル (≤767px) */
    @media screen and (max-width: 767px) {
      .link-button { font-size: 14px; height: auto; padding-left: 0; gap: 8px; }
      .link-button::after { width: 22px; height: 3.5px; }
    }

    /* FVスライドのズームアニメーション停止 */
    .fvSlide .splide__slide[class*=-active] img { transform: scale(1) !important; transition: none !important; }
    .fvSlide .splide__slide .fvSlide__picture img { transition: none !important; animation: none !important; }

    /* fv text overlay */
    .fv__textOverlay {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
      pointer-events: none;
      width: 60%; max-width: 700px;
    }
    .fv__textOverlay-img { width: 100%; height: auto; display: block; }
    @media (max-width: 767px) {
      .fv__textOverlay { width: 85%; }
    }

    /* モバイル版ヒーロー：縦長画像を自然な比率で表示 */
    @media (max-width: 767px) {
      .fvSlide .splide__slide .fvSlide__picture img {
        height: auto !important;
        width: 100% !important;
        object-fit: contain !important;
        max-height: none !important;
      }
      .fv, .head__area { height: auto !important; }
      .fvSlide .splide__track,
      .fvSlide .splide__slide,
      .fvSlide .splide__slide .fvSlide__picture {
        height: auto !important;
      }
    }

    /* PC版ヒーロー：ウィンドウ幅を狭めても両端を切らず、常に幅100%で画像全体を表示する */
    @media (min-width: 768px) {
      .fv, .head__area { height: auto !important; }
      .fvSlide .splide__track,
      .fvSlide .splide__slide,
      .fvSlide .splide__slide .fvSlide__picture {
        height: auto !important;
      }
      .fvSlide .splide__slide .fvSlide__picture img {
        height: auto !important;
        width: 100% !important;
        object-fit: contain !important;
        max-height: none !important;
      }
    }

    /* モバイル用テキスト画像オーバーレイ */
    .fv__spCaption {
      display: none;
    }
    @media (max-width: 767px) {
      .fv__spCaption {
        display: block;
        position: absolute;
        bottom: 4vw;
        left: 0; right: 0;
        text-align: left;
        padding-left: 6%;
        text-align: left;
        z-index: 2;
        pointer-events: none;
      }
      .fv__spCaption-img {
        width: 75%; max-width: 300px;
        height: auto; display: block; margin: 0;
      }
    }

    /* モバイル固定TELボタン */
    .sp-tel-fixed { display: none; }
    @media screen and (max-width: 767px) {
      .sp-tel-fixed {
        display: flex;
        position: fixed;
        right: 0; left: auto; bottom: 0;
        width: 50%; height: 13vw;
        background-color: rgba(155, 90, 90, 0.9);
        align-items: center; justify-content: center;
        gap: 6px;
        color: #fff;
        text-decoration: none;
        z-index: 100;
      }
      .sp-tel-fixed__text { font-size: 3vw; letter-spacing: 0.08em; font-weight: 500; }
    }

    /* gradient-bg */
    .gradient-bg {
      background: linear-gradient(0deg, rgb(245,238,229) 0%, rgb(255,255,255) 50%, rgb(246,238,228) 100%);
    }

    /* ========== 初めての方へ 新デザイン ========== */
    .gf-section {
      margin-top: 60px;
    }
    .gf-header {
      background: #9b000d;
      color: #fff;
      font-size: clamp(1rem, 1.5vw + 0.5rem, 1.25rem);
      font-weight: 500;
      letter-spacing: 0.05em;
      padding: 14px 24px;
      border-radius: 4px 4px 0 0;
    }
    .gf-steps {
      background: #fff;
      border: 1px solid #e2b8bb;
      border-top: none;
      padding: 30px 30px 10px;
    }
    @media (max-width: 767px) { .gf-steps { padding: 20px 16px 4px; } }
    .gf-step {
      display: flex;
      align-items: flex-start;
      gap: 24px;
      padding-bottom: 32px;
      position: relative;
    }
    .gf-step:not(.gf-step--last)::after {
      content: "";
      position: absolute;
      left: 27px;
      top: 60px;
      bottom: 0;
      width: 1px;
      border-left: 2px dashed #e2b8bb;
    }
    @media (max-width: 767px) {
      .gf-step {
        display: grid;
        grid-template-columns: 52px 1fr;
        grid-template-rows: auto 1fr;
        column-gap: 12px;
        row-gap: 6px;
      }
      .gf-step__num {
        grid-column: 1; grid-row: 1;
        width: 36px; height: 36px; font-size: 0.9rem;
        align-self: center; justify-self: center;
        z-index: 2;
      }
      /* アイコンの非表示は基底ルールより後ろ（下方の @media）で指定（後勝ち対策） */
      .gf-step__body {
        grid-column: 2; grid-row: 1 / 3;
        padding-top: 0;
      }
      .gf-step:not(.gf-step--last)::after { left: 26px; top: 46px; z-index: 1; }
    }
    .gf-step__num {
      width: 56px; height: 56px; flex-shrink: 0;
      border-radius: 50%;
      background: #fff;
      border: 1.5px solid #9b000d;
      display: flex; align-items: center; justify-content: center;
      font-family: "Noto Serif JP", serif;
      font-size: 1.25rem; color: #9b000d; font-weight: 400;
      z-index: 1;
    }
    @media (max-width: 767px) { .gf-step__num { width: 44px; height: 44px; font-size: 1rem; } }
    .gf-step__icon {
      width: 90px; height: 90px; flex-shrink: 0;
      border-radius: 50%;
      background: #fcecec;
      border: 1px solid #e2b8bb;
      display: flex; align-items: center; justify-content: center;
      overflow: hidden;
    }
    .gf-step__icon img { width: 60px; height: 60px; object-fit: contain; }
    @media (max-width: 767px) {
      /* モバイルではステップアイコン5つを非表示（基底の display:flex に後勝ちさせる） */
      .gf-step__icon { display: none; }
    }
    .gf-step__body { flex: 1; padding-top: 8px; min-width: 0; }
    .gf-step__ttl {
      font-size: clamp(1.1rem, 1.5vw + 0.5rem, 1.4rem);
      font-weight: 700;
      color: #272625;
      margin: 0 0 10px;
      font-family: "Noto Serif JP", serif;
    }
    .gf-step__body p { font-size: clamp(0.85rem, 0.5vw + 0.7rem, 0.975rem); line-height: 1.8; margin: 0 0 6px; }
    /* ご予約ステップの連絡先（TEL/診療時間/休診日）。文字は通常色。
       アイラインページ料金の別枠(.price-aside)に倣い、左に赤い縦ラインだけを付ける
       （外枠・背景は無し）。お問い合わせ文の下に1行ぶんの余白を空ける。 */
    .gf-reserve-info {
      margin-top: 1.2em;
      border-left: 3px solid #9b000d;
      padding: 0 0 0 14px;   /* 上パディングを無くして文字の開始位置を赤ライン上端に揃える */
    }
    .gf-reserve-info a { color: inherit; text-decoration: none; }
    /* ご予約：18歳未満の方へ の案内リンク */
    .gf-reserve-link-wrap { margin-top: 0.9em; }
    .gf-reserve-link { display: inline-flex; align-items: center; gap: 0.3em; color: #9b000d; font-weight: 500; text-decoration: underline; }
    .gf-reserve-link::after { content: "›"; text-decoration: none; }
    .gf-reserve-note { font-size: 0.85rem; color: #7a6a5a; line-height: 1.7; margin: 0.5em 0 0; }

    /* ②-⑤ グリッド */
    .gf-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
      margin-top: 30px;
    }
    @media (max-width: 767px) { .gf-grid { grid-template-columns: 1fr; gap: 16px; } }
    .gf-box {
      border: 1px solid #e2b8bb;
      border-radius: 12px;
      overflow: hidden;
      background: #fff;
      display: flex;
      flex-direction: column;
    }
    .gf-box__header {
      background: #9b000d;
      color: #fff;
      font-size: clamp(0.875rem, 1vw + 0.45rem, 1rem);
      font-weight: 500;
      padding: 10px 18px;
      letter-spacing: 0.03em;
    }
    .gf-box__body {
      padding: 18px 18px 16px;
      background: #fff;
      font-size: 0.875rem;
      line-height: 1.8;
      position: relative;
      flex: 1;
    }
    .gf-box__body--flex {
      display: flex; gap: 16px; align-items: flex-start;
    }
    @media (max-width: 767px) { .gf-box__body--flex { flex-direction: column; align-items: center; } }
    .gf-box__img {
      width: 110px; height: auto; flex-shrink: 0; display: block;
    }
    @media (max-width: 767px) { .gf-box__img { width: 80px; margin: 0 auto; display: block; } }
    .gf-box__text p { margin: 0 0 8px; font-size: 0.875rem; line-height: 1.8; text-wrap: pretty; overflow-wrap: break-word; }
    /* 注記は本文(.gf-box__text)内に置いているので左右マージン0で本文左端に自然に揃う。
       上に余白を取り、カード内も上下パディングを確保（文字が上端に貼り付かないように）。 */
    .gf-box__note {
      background: #fbf2f2;
      padding: 12px 16px;
      text-wrap: pretty; overflow-wrap: break-word;
      margin: 16px 0 0;
      font-size: 0.9rem;
      color: #272625;
      font-weight: 400;
      line-height: 1.7;
      text-align: left;
      border-left: 3px solid #9b000d;
      border-radius: 0 4px 4px 0;
    }
    .gf-box__note strong { color: #9b000d; font-weight: 400; }
    /* icon float right */
    .gf-icon-right {
      float: right;
      margin: 0 0 8px 12px;
    }
    .gf-icon-right img { display: block; }
    .gf-icon-right--sm img { width: 60px; height: 60px; object-fit: contain; }
    .gf-icon-right--md img { width: 80px; height: 80px; object-fit: contain; }
    .gf-icon-right--lg img { width: 120px; height: auto; object-fit: contain; }
    .gf-box__list {
      padding-left: 0; list-style: none; margin: 8px 0 0;
    }
    .gf-box__list li {
      padding: 5px 0 5px 16px;
      position: relative;
      font-size: 0.875rem;
      line-height: 1.7;
    }
    .gf-box__list li::before {
      content: "・";
      position: absolute; left: 0;
      color: #9b000d;
    }
    .gf-box__list--sm li {
      font-size: clamp(0.65rem, 1vw, 0.75rem);
      line-height: 1.5;
      padding: 3px 0 3px 16px;
    }
    .gf-intro-wrap {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 10px;
    }
    .gf-intro-wrap .gf-box__intro { flex: 1; font-size: 0.8125rem; line-height: 1.7; margin: 0; }
    .gf-intro-icon { width: 64px; height: 64px; object-fit: contain; flex-shrink: 0; }
    .gf-highlight { color: #9b000d; font-weight: 500; }
    /* absolute icons */
    .gf-box__body--icons { position: relative; padding-right: 90px; }
    .gf-abs-icons {
      position: absolute; right: 14px; top: 16px;
      display: flex; flex-direction: column; align-items: center; gap: 12px;
    }
    .gf-abs-icon { display: block; object-fit: contain; }
    .gf-abs-icon--top { width: 68px; height: 68px; }
    .gf-abs-icon--bot { width: 68px; height: 68px; }
    .gf-box__intro { font-size: 0.8125rem; line-height: 1.7; margin: 0 0 10px; }
    @media (max-width: 767px) {
      .gf-box__body--icons { padding-right: 80px; }
      .gf-abs-icon--top, .gf-abs-icon--bot { width: 52px; height: 52px; }
    }

/* === モバイル個別調整（ユーザー指摘） ============================== */
@media screen and (max-width: 767px) {
  /* ロゴ: 画像の margin-top:10px(main.css:4673) が上の空白の原因なので詰める。
     上端に揃えてから数pxだけ下げる思想で、ハンバーガーと同じ 6px に統一 */
  .header__logo img { margin-top: 6px !important; }
  /* ハンバーガー: 正方形・PC相当サイズ。ロゴと同じ top・同サイズで横並びを揃える。
     位置が他ルールに負けて動かないため !important で確実に固定する */
  .header__navButton {
    width: 40px !important; height: 40px !important;  /* 正方形（ロゴ画像高さとほぼ同じ） */
    padding: 0 !important;
    right: 12px !important; top: 6px !important;       /* ロゴと上端揃え→数px下げ */
    display: flex; align-items: center; justify-content: center;
  }
  /* 見出しの中央寄せ復活: モバイルでは .flex が display:block 化して justify-content:center が
     無効になり、Recommend画像・Greeting文字などが左寄せになる。.top-ttl だけ flex を維持する */
  .top-ttl.flex { display: flex; }
  /* Recommend バナー画像のサイズ・中央寄せは本文HTML側のインラインstyleで対応済み */
  .header__navButton span { top: 0; }
  .header__navButton span,
  .header__navButton span:before,
  .header__navButton span:after { width: 22px; height: 1.5px; }
  .header__navButton span:before { top: -7px; }
  .header__navButton span:after  { top: 7px; width: 14px; }
  /* 開いた状態の×: 新ジオメトリに合わせ before/after を中心で交差させる
     （main.css の vw基準の変形だと崩れるため上書き） */
  .header__navInput[type=checkbox]:checked ~ .header__navButton span:before {
    transform: rotate(45deg); top: 0; width: 22px;
  }
  .header__navInput[type=checkbox]:checked ~ .header__navButton span:after {
    transform: rotate(-45deg); top: 0; width: 22px;
  }

  /* フッター地図: aspect-ratio+max-height で正方形(約380px)に縮みセル内で左寄せに
     なるため、中央寄せする（サイズはそのまま）。 */
  .footer-information__map { margin-inline: auto; }
}

/* 横スクロール起因の左右非対称を防止: body の width:100vw はスクロールバー幅を含んで
   はみ出す（PCでブラウザを縮めた時に顕著）ため 100% にするだけでよい。
   ※ overflow-x:hidden は使わない（body は height:100vh のため overflow-x を付けると
     overflow-y:auto 化して body がスクロール領域になり、window の scroll が発火せず
     ロゴ消失JSが止まる副作用があるため）。横はみ出し源は body のみで、残る 100vw は
     非表示の固定オーバーレイ(.header__navOverlay)だけ＝スクロール幅に影響しない。 */
body { width: 100%; }

/* 「当院の特徴」(concept subTtl) の下に余白を追加（ご挨拶セクションと同様の間隔） */
.top-concept__Text { margin-top: 40px; }
@media (max-width: 767px) { .top-concept__Text { margin-top: 24px; } }

/* ===== SP 微調整（PC には影響させない。すべて max-width:767px 内） ===== */
@media (max-width: 767px) {
  /* 1) メインビジュアル(.fv)とコンセプトの間に少し余白を作る */
  .top-concept { margin-top: 56px; }

  /* 2) MENU カードを横幅いっぱいに拡大。さらに説明文が約2文字ぶん多く入るよう、
        グリッド左右パディング(20→12px=カード+16px)とカード本文の左右パディング
        (24→16px=説明文+16px)を詰めて実効幅を広げる。 */
  .menu-card-grid {
    grid-template-columns: minmax(0, 700px);
    padding: 0 12px;
    justify-content: center;
  }
  .menu-card { margin: 0; width: 100%; }
  .menu-card__body { padding-left: 16px; padding-right: 16px; }

  /* 3) Guide の番号見出しを大きく＋太字に。
        ①は .gf-header、②〜⑤は .gf-box__header と別クラスなので両方指定する。 */
  .gf-header,
  .gf-box__header { font-size: 1.1rem; font-weight: 700; }

  /* 4) カード上部の英語カテゴリ(EYEBROW ARTMAKE 等)を少し大きく。
        改行・見切れ防止: nowrap を維持しつつ font-size を vw 基準にして
        画面幅に比例して縮むようにする（カード幅も viewport 連動なので
        どの端末でも比率一定＝はみ出さない）。 */
  .menu-card-cat {
    font-size: clamp(1rem, 5vw, 1.4rem);
    white-space: nowrap;
  }

  /* 5) カード内の文字（商品名・説明文）をほんの少しだけ大きく。
        価格行はレイアウトが詰まっているため触らない。 */
  .menu-card__name { font-size: 1.3rem; }
  .menu-card__desc { font-size: 1.05em; }

  /* 8-2) ドクター「スタッフ紹介へ」ボタンが左に寄ってしまうのを、他セクションの
        ボタン(例: 症例一覧へ)と同じ右寄せ(margin-left:auto)に揃える。
        .link-button は本来 margin-left:auto/width:fit-content で右寄せだが、
        この箇所だけ左寄りになるため高詳細度＋!importantで確実に右寄せへ。 */
  .doctor__listContents .top-guide__link.link-button {
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }

  /* 6) ドクターセクションの「Greeting」英字タイトルの両端に少し余白を作る。
        元は height:74px / width:auto（横約340px）でほぼ横幅いっぱいなので、
        横幅基準(calc で左右24px=計48px空ける)に切り替え高さは比率維持。
        インラインstyle に勝つため !important。max-width で元サイズを上限に。 */
  .top-doctor__ttl svg {
    width: calc(100% - 48px) !important;
    height: auto !important;
    max-width: 340px;
  }

  /* 9) Information(お知らせ)セクション & フッターの文字を少し大きく。
        改行・横はみ出しを増やさない範囲のみ。7曜日のスケジュール表と
        長い nowrap 注記は溢れる危険があるため拡大しない（現状維持）。 */
  /* TOP お知らせ一覧（日付＋タイトル。タイトルは2行クランプ済で溢れない） */
  .top-news__listDate { font-size: 0.9rem; }
  .top-news__listText { font-size: 1.05rem; }

  /* フッター：医院情報テーブル */
  .footer-detail-table { font-size: 0.9rem; }
  .footer-detail-table th { width: 5em; }   /* 見出し列を詰めて値側の幅を確保 */
  .footer-note { font-size: 11px; }          /* 長い nowrap 注記は親拡大に追従させず固定＝溢れ防止 */
  .footer-information__ttl { font-size: 1.15rem; }

  /* フッター：メニュー・見出し */
  .footer-menuLink { font-size: 0.9rem; }
  .footer-col-title { font-size: 0.78rem; }
}

/* 限定特典バナー（ブログパーツを件数で自動等分：1=フル / 2=半分 / 3=三等分） */
.recommend-banners { display: flex; gap: clamp(16px, 3vw, 32px); justify-content: center; align-items: flex-start; }
.recommend-banners > * { flex: 1 1 0; min-width: 0; max-width: 700px; margin: 0; }
.recommend-banners figure { margin: 0; }
.recommend-banners a { display: block; }
.recommend-banners img { width: 100%; height: auto; display: block; }
@media (max-width: 767px) {
  /* モバイルは縦積み（横に並べると小さすぎて読めないため） */
  .recommend-banners { flex-direction: column; align-items: center; }
  .recommend-banners > * { flex: none; width: 100%; max-width: 100%; }
}
