/**
 * single-shop-new テンプレート専用（店舗個別ページ新デザイン）
 * detail.css の後に読み込む
 */

/*
 * 横方向のわずかなオーバーフロー（.l-bg の margin: calc(50% - 50vw) など）を抑える。
 * #content に overflow-x: hidden だけを指定すると、仕様上 overflow-y が auto 扱いになり
 * メイン領域が余計なスクロールコンテナ化し、縦スクロールがカクつく・効かない原因になる。
 * 横は html 側で抑える。
 */
html {
  overflow-x: hidden;
  max-width: 100%;
}

#content.l-main {
  box-sizing: border-box;
}
/* スクロールバーの分の余白を表示しない */
html, body {
  overflow-y: overlay;
}
/*
 * 751px〜1060px で clinic/style.css の body{min-width:1060px} が効き、ウィンドウを狭めると全体が横にはみ出す。
 * この CSS は single-shop-new のみ読み込まれるため、ここで解除してタブレット幅でも追従させる。
 */
body {
  min-width: 0;
}

/* フッター内 .u-layout は 751px 以上で width:960px 固定のため、ビューポートより広くなる */
.l-footer__content.u-layout {
  width: 100%;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  padding-left: 20px;
  padding-right: 20px;
}

/* メインスライダーが 750px 固定（detail.css）のままだと、やや狭い幅で画像がはみ出す */
.p-shopinfo .js-slick-shopinfo,
.p-shopinfo .c-pageslide,
.p-shopinfo .c-slick {
  max-width: 100%;
  box-sizing: border-box;
}

.p-shopinfo .c-slick li {
  width: 100% !important;
  max-width: min(750px, 100%);
  box-sizing: border-box;
}

.p-shopinfo .c-slick li img {
  width: 100% !important;
  height: auto !important;
  max-height: 600px;
  object-fit: cover;
  vertical-align: bottom;
}

.p-shopinfo.fusou {
    text-align: center;
    padding-top: 0;
    max-width: 1170px;
    margin-inline: auto;
}

/* メイン写真（ヒーロー）：フルサイズ＋srcset を活かし、横幅に合わせて縮小のみ（拡大でぼやけないよう max-width を画像実寸に近い上限で制御） */
.p-shopinfo.fusou .p-shopinfo__hero-img {
  width: 100%;
  max-width: min(1170px, 100%);
  height: auto;
  display: block;
  margin-inline: auto;
  vertical-align: bottom;
}

@media screen and (max-width: 750px) {
  .p-shopinfo .c-slick {
    height: auto !important;
  }
}

/* ヘッダー3カラム・店舗ガイド・料金ブロックなどが中間幅で押し出さないよう折り返し・縮小を許可 */
.shop-header-new__top {
  flex-wrap: wrap;
}

.shop-header-new__name,
.shop-header-new__contact,
.shop-header-new__schedule {
  min-width: 0;
}

.shop-header-new__right {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-shrink: 0;
}

@media (min-width: 750px) and (max-width: 1024px) {
  .shop-header-new__right {
    flex-direction: column;
    align-items: flex-end;
  }
}

.shop-header-new__notes {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  margin-top: 8px;
}
.shop-header-new__schedule {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.p-shopguide {
  flex-wrap: wrap;
  width: 90%;
  max-width: 1060px;
  margin-inline: auto;
}

.p-shopguide__schedule {
  flex: 0 0 auto;
}

.p-shopguide__notice {
  flex: 1 1 280px;
  min-width: 0;
}

.p-trafic__hero {
  flex-wrap: wrap;
}

.p-trafic__hero-img,
.p-trafic__hero-catch {
  min-width: 0;
}

#content.l-main img {
  width: 100%;
  height: auto;
}

/* 見出し h2 共通ラッパー（single-shop-new.php） */
.single-shop-new__title-wrap {
  margin-top: 24px;
  margin-bottom: 24px;
}

/* 院長あいさつ（専用ブロック：見出しは他セクションと同系のタイポ。他パーツとクラスを分離） */
.hm-boss-greeting__head {
  margin-top: 24px;
  margin-bottom: 24px;
  text-align: center;
}

.hm-boss-greeting__eyebrow {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.4;
  color: #ee3f7c;
}

.hm-boss-greeting__ttl {
  margin: 0 0 80px;
  font-size: 32px;
  font-weight: bold;
  line-height: 1.35;
  color: #ee3f7c;
}

@media (max-width: 750px) {
  .hm-boss-greeting__eyebrow {
    font-size: 14px;
    margin-bottom: 6px;
  }

  .hm-boss-greeting__ttl {
    font-size: 18px;
    margin-bottom: 28px;
  }
}

/* .p-hm-treatment__inner > .single-shop-new__title-wrap:first-child,
.p-reason__inner > .single-shop-new__title-wrap:first-child,
.p-shopguide__notice > .single-shop-new__title-wrap:first-child,
.p-worries .l-layout > .single-shop-new__title-wrap:first-child,
section.p-newperson > .single-shop-new__title-wrap:first-child,
section.p-price > .single-shop-new__title-wrap:first-child,
section.doctor-staff > .single-shop-new__title-wrap:first-child,
section.p-reserveFlow > .single-shop-new__title-wrap:first-child,
section.p-access > .single-shop-new__title-wrap:first-child,
section.p-greeting > .single-shop-new__title-wrap:first-child,
.p-areashop > .single-shop-new__title-wrap:first-child {
  margin-top: 0;
} */

/* 旧デザインを上書き */
section:nth-child(n + 2) {
  margin-top: 0;
}
.p-worries {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.p-worries__ct {
  padding-top: 50px;
}
.p-greeting_box {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 750px) {
  .p-greeting_box {
    grid-template-columns: 1fr;
  }
}
.p-greeting_box .l-colm__img img {
  aspect-ratio: 4/3;
  object-fit: cover;
}
.p-access {
  padding-top: 50px;
}
.p-access_box {
  padding: 0;
  border: none;
  border-radius: 16px;
  gap: 2%;
  justify-content: center;
}
.p-access_img {
  max-width: 480px;
}
.p-access_text {
  padding-left: 0;
  width: calc(100% - 580px);
}
.p-access_img .slick-slider {
  width: auto;
}
@media (max-width: 750px) {
  .p-access_img {
    max-width: 100%;
  }
  .p-access_text {
    padding-left: 3%;
    padding-right: 3%;
    width: initial;
  }
}
@media (max-width: 750px) {
  body {
    padding-top: 0;
  }
  .l-layout {
    padding: 0;
  }

  /*
   * .l-layout の左右リセットの代わりに、内側余白のみ確保（.p-hm-treatment の 20px に合わせる）
   * フルブリード背景は親セクションのまま、本文エリアだけガター
   */
  .p-shopinfo.l-layout,
  .p-worries .l-layout,
  .shop_free-area.l-layout,
  #flow.l-layout,
  #price.l-layout,
  .p-reserveFlow > .l-layout {
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: border-box;
  }

  .p-reason__inner {
    padding-left: 20px;
    padding-right: 20px;
  }

  .p-price > .single-shop-new__title-wrap,
  .p-price > p {
    padding-left: 20px;
    padding-right: 20px;
  }

  .p-newperson > .single-shop-new__title-wrap {
    padding-left: 20px;
    padding-right: 20px;
  }

  .p-newperson .l-youtube {
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 50px;
  }

  .p-newperson ul {
    padding: 0 2%;
  }

  .doctor-staff {
    padding-left: 20px;
    padding-right: 20px;
  }

  .p-greeting {
    padding-left: 20px;
    padding-right: 20px;
  }

  .p-greeting .c-text03 {
    font-size: 2rem;
  }

  .p-reserveFlow > .single-shop-new__title-wrap {
    padding-left: 20px;
    padding-right: 20px;
  }

  .p-access > .single-shop-new__title-wrap,
  .p-access .p-access_box {
    padding-left: 20px;
    padding-right: 20px;
  }

  .p-trafic {
    padding-left: 20px;
    padding-right: 20px;
  }
}
/* --------------------------------- */

/*
 * 店舗新テンプレート専用: header.php が付与する .l-header--single-shop-new-globalnav
 * 既存グロナビはビューポート 750px 以下のときのみ表示（clinic/style.css の .l-header を上書きしない）
 */
@media (min-width: 751px) {
  header.l-header.l-header--single-shop-new-globalnav {
    display: none !important;
  }
}

/* SP: ピンク HOME バーは出さずグロナビのみ */
@media (max-width: 750px) {
  /* SP サイトロゴは非表示 */
  header.l-header.l-header--single-shop-new-globalnav .l-logo {
    display: none !important;
  }
  header.l-header {
    height: 70px;
  }
  .slicknav_menu {
    top: 24px;
  }
}

.shop-header-back {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10060;
  background-color: #ee3f7c;
  color: #fff;
  padding: 4px 20px;
  padding-top: max(4px, env(safe-area-inset-top, 0px));
}

.shop-header-back__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
}

.shop-header-back__link:hover,
.shop-header-back__link:focus-visible {
  color: #fff;
  opacity: 0.85;
  text-decoration: none;
}
@media (max-width: 750px) {
  .shop-header-back__link {
    font-size: 10px;
    position: absolute;
    top: 2px;
  }
.shop-header-back {
  padding: 0 10px 2px;
  height: 20px;
}
}
/* HOME バー分の高さは .shop-header-back の実測を JS が 1 回だけ --shop-header-back-h に入れる（padding と is-fixed の top を一致させる） */
#shop-header-new.shop-header-new {
  padding-top: var(--shop-header-back-h, 40px);
  box-sizing: border-box;
}
@media (max-width: 750px) {
  #shop-header-new.shop-header-new {
    padding-top: 0;
  }
  /* ピンクバー非表示分 + グロナビ高さ（--shop-header-back-h は JS。未設定時は 7rem でフォールバック） */
  body:has(header.l-header--single-shop-new-globalnav) #shop-header-new.shop-header-new {
    padding-top: max(var(--shop-header-back-h, 0px), 7rem);
  }
}
.shop-header-new {
  background: #fff;
}

.shop-header-new__top {
  display: flex;
  align-items: flex-start;
  gap: 0 24px;
  padding: 10px 24px 10px 40px;
  flex-wrap: wrap;
}

.shop-header-new__name {
  flex: 1;
}

.shop-header-new__area {
  color: #ee3f7c;
  font-size: 14px;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  margin: 0 0 2px;
  line-height: 1;
}

.shop-header-new__title {
  color: #ee3f7c;
  font-size: 30px;
  font-weight: bold;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  margin: 0 0 8px;
}

.shop-header-new__title a.shop-header-new__title-link {
  color: #ee3f7c!important;
  text-decoration: none;
}

.shop-header-new__title a.shop-header-new__title-link:hover {
  opacity: 0.85;
}

.shop-header-new__access {
  margin: 4px 0;
  font-size: 13px;
}

.shop-header-new__access a {
  color: #0088ff;
  text-decoration: underline;
}

.shop-header-new__address {
  color: #333;
  font-size: 13px;
  margin: 4px 0;
}

.shop-header-new__contact {
  text-align: center;
  flex-shrink: 0;
}

.shop-header-new__tel-label {
  font-size: 14px;
  font-weight: bold;
  text-align: left;
}
@media (max-width: 750px) {
.shop-header-new__tel-label {
  text-align: center;
}
}
.shop-header-new__tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 28px;
  font-weight: bold;
  color: #333;
  text-decoration: none;
  line-height: 1;
}

.shop-header-new__tel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: #333;
  color: #fff;
  border-radius: 50%;
  font-size: 16px;
}

.shop-header-new__reserve {
  display: block;
  margin-top: 10px;
  padding: 8px 16px;
  background: #1a92f8;
  color: #fff;
  text-align: center;
  text-decoration: none;
  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25);
  border-radius: 4px;
  font-size: 14px;
  font-weight: bold;
  line-height: 1.5;
}

.shop-header-new__schedule {
  flex-shrink: 0;
}

.shop-header-new__schedule .l-schedule,
.p-shopguide__schedule .l-schedule {
  font-size: 11px;
  width: 365px;
}
@media (max-width: 750px) {
.shop-header-new__schedule .l-schedule,
.p-shopguide__schedule .l-schedule {
  width: 100%;
}
}
.shop-header-new__schedule .l-schedule th,
.shop-header-new__schedule .l-schedule td,
.p-shopguide__schedule .l-schedule th,
.p-shopguide__schedule .l-schedule td {
  padding: 3px 5px;
  font-size: 16px;
}

p.shop-header-new__note {
  font-size: 10px;
  font-weight: bold;
  text-align: right;
}

/* 旧 single-shop-old の .shop__pagelinker.is-fixed と同様、スクロール後にビューポート上部へ固定（JS で .is-fixed、PC/SP 共通） */
/* .shop-header-new__nav-spacer {
  margin: 0;
  padding: 0;
  border: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
} */

.shop-header-new__nav {
  border-top: 2px solid #ee3f7c;
  border-bottom: 2px solid #ee3f7c;
  padding: 12px 5%;
  position: relative;
  z-index: 100;
  background: #fff;
}

.shop-header-new__nav.is-fixed {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--shop-header-back-h, 40px);
  z-index: 10050;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.shop-header-new__menu-backdrop {
  display: none;
}

.shop-header-new__menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: none;
  background: #ee3f7c;
  cursor: pointer;
  color: #fff;
}

.shop-header-new__menu-toggle:focus-visible {
  outline: 2px solid #ee3f7c;
  outline-offset: 2px;
}

.shop-header-new__menu-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.shop-header-new__nav.is-open .shop-header-new__menu-toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.shop-header-new__nav.is-open .shop-header-new__menu-toggle-bar:nth-child(2) {
  opacity: 0;
}

.shop-header-new__nav.is-open .shop-header-new__menu-toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.shop-header-new__nav-inner {
  width: 100%;
}

.shop-header-new__nav ul {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px clamp(12px, 4vw, 56px);
  list-style: none;
  margin-inline: auto;
  padding: 0;
  max-width: 1060px;
}

.shop-header-new__nav a {
  color: #333;
  text-decoration: none;
  font-size: 15px;
}

.shop-header-new__nav a:hover {
  color: #ee3f7c;
}

/* 750から1024pxのスタイル */
@media (min-width: 751px) and (max-width: 1024px) {
  .shop-header-new__title {
    font-size: 26px;
  }
}

@media (max-width: 750px) {
  .shop-header-new__top {
    flex-direction: column;
    gap: 10px;
    padding: 0 10px 10px;
    position: fixed;
    z-index: 1000;
    top: 24px;
  }
  .shop-header-new__nav.is-fixed {
    top: 72px;
  }
  .shop-header-new__name {
    width: 100%;
  }

  .shop-header-new__title {
    font-size: 20px;
  }

  /* アクセス・住所・連絡・受付表・注記は PC のみ（SP では非表示） */
  .shop-header-new__access,
  .shop-header-new__address,
  .shop-header-new__right,
  .shop-header-new__notes {
    display: none;
  }

  .shop-header-new {
    position: relative;
    z-index: 1000;
  }

  /* ナビ：常時表示（ハンバーガー非表示） */
  .shop-header-new__menu-toggle {
    display: none !important;
  }

  .shop-header-new__nav {
    padding: 0 4px;
  }

  .shop-header-new__menu-backdrop {
    display: none !important;
    pointer-events: none;
  }

  .shop-header-new__nav-item--top {
    display: none;
  }

  .shop-header-new__nav-inner {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    max-height: none;
    overflow: visible;
    opacity: 1;
    pointer-events: auto;
    padding: 0;
    box-shadow: none;
    background: transparent;
  }

  .shop-header-new__nav.is-open .shop-header-new__nav-inner {
    position: static;
    max-height: none;
    padding: 0;
    overflow: visible;
  }

  .shop-header-new__nav ul {
    flex-direction: row;
    flex-wrap: initial;
    justify-content: space-around;
    align-items: center;
    gap: 0;
    max-width: 100%;
    overflow-x: scroll;
  }

  .shop-header-new__nav ul li:nth-child(n + 3) {
    border-left: 2px solid #ee3f7c;
  }

  .shop-header-new__nav a {
    display: inline-block;
    padding: 6px;
    font-size: 12px;
    font-weight: bold;
    white-space: nowrap;
  }
}

.l-bg {
  background-color: #fef9f0;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.p-shopguide {
  display: flex;
  align-items: flex-start;
  gap: 42px;
  padding: 70px 10px 40px;
  background: #fef9f0;
}
.p-shopguide__schedule {
  flex-shrink: 0;
}
.p-shopguide__notice {
  flex: 1;
  text-align: left;
}
.p-shopguide__notice-ttl {
  font-size: 22px;
  font-weight: bold;
  margin: 0 0 16px;
}

.p-shopguide__notice-meta {
  font-size: 13px;
  color: #666;
  margin: 0 0 6px;
}
.p-shopguide__notice-body {
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}
@media (max-width: 750px) {
  .p-shopguide {
    display: grid;
    gap: 0;
    padding: 24px 16px;
    width: 95%;
  }
  .p-shopguide__schedule {
    width: 100%;
    overflow-x: auto;
  }
  .p-shopguide__notice {
    width: 100%;
    margin-top: 20px;
  }
  .p-shopguide__notice-ttl {
    font-size: 18px;
    margin-bottom: 8px;
  }
}

.p-hm-treatment {
  padding: 48px 20px;
  background: #fff;
}

.p-hm-treatment__inner {
  max-width: 800px;
  margin-inline: auto;
}

.p-hm-treatment__ttl {
  text-align: center;
  color: #ee3f7c;
  font-size: 38px;
  font-weight: bold;
  margin: 0 0 8px;
}

.p-hm-treatment__ttl--mplus {
  font-family: "M PLUS Rounded 1c", sans-serif;
}

.p-hm-treatment__sub {
  text-align: center;
  font-size: 20px;
  margin: 0 0 24px;
  font-weight: bold;
}

.p-hm-treatment__sub span {
  color: #ee3f7c;
}

.p-hm-treatment__img {
  margin-bottom: 28px;
}

.p-hm-treatment__img img {
  width: 100%;
  height: auto;
  display: block;
}

.p-hm-treatment__body {
  font-size: 18px;
  line-height: 2;
  margin-bottom: 32px;
}
.p-hm-treatment__body p + p {
  margin-top: 40px;
}
.p-hm-treatment__cta-txt {
  text-align: center;
  color: #ee3f7c;
  font-size: 20px;
  font-weight: bold;
  margin: 0 0 20px;
}

/* HM全身調整法・ページ内CTA（detail.css の .p-floating 系を流用。フッター固定バーとは別ブロック .p-hm-treatment__cta で管理） */
.p-hm-treatment .p-hm-treatment__cta.p-floating {
  position: static;
  left: auto;
  right: auto;
  bottom: auto;
  transform: none;
  z-index: auto;
  width: 100%;
  max-width: 820px;
  margin-inline: auto;
}

.p-hm-treatment .p-hm-treatment__cta .p-floating__inner {
  width: 100%;
  gap: 20px;
}

.p-hm-treatment .p-hm-treatment__cta .p-floating__tel,
.p-hm-treatment .p-hm-treatment__cta .p-floating__mail__b {
  flex: 1;
  min-width: 0;
}

.p-hm-treatment .p-hm-treatment__cta .p-floating__tel a {
  border-bottom: 4px solid #055b0f;
}

.p-hm-treatment .p-hm-treatment__cta .p-floating__mail__b a {
  border-bottom: 4px solid #9f000c;
}
/* フッター固定バーと違い四方角丸 */
.p-hm-treatment__cta.p-floating a {
  border-radius: 15px;
  width: auto;
}

/* フォント .p-hm-treatment__cta-text で調整 */
.p-hm-treatment .p-hm-treatment__cta-text {
  font-family: "M PLUS Rounded 1c", sans-serif;
}

.p-hm-treatment .p-hm-treatment__cta-text strong,
.p-hm-treatment .p-hm-treatment__cta-text span {
  font-family: inherit;
}

@media screen and (max-width: 750px) {
  .p-hm-treatment .p-hm-treatment__cta.p-floating {
    left: auto;
    right: auto;
    transform: none;
  }

  /* フッター固定バーと同じく画面いっぱい（セクション左右パディングを相殺） */
  .p-hm-treatment .p-hm-treatment__cta {
    width: calc(100% + 40px);
    max-width: none;
    margin-left: -20px;
    margin-right: -20px;
  }

  /* detail.css の .p-floating a { border-radius: 0 } より強く、ページ内CTAは四方角丸のまま */
  .p-hm-treatment .p-hm-treatment__cta .p-floating__tel,
  .p-hm-treatment .p-hm-treatment__cta .p-floating__mail__b {
    border-radius: 15px;
  }
  .p-hm-treatment .p-hm-treatment__cta .p-floating__tel a {
    font-size: 27px;
    height: auto;
  }
  .p-hm-treatment .p-hm-treatment__cta .p-floating__mail__b a {
    font-size: 21px;
    height: auto;
  }
  .p-hm-treatment .p-hm-treatment__cta .p-floating a {
    border-radius: 15px;
  }

  .p-hm-treatment__inner {
    margin-top: 30px;
    margin-bottom: 30px;
  }
  .p-hm-treatment__body {
    font-size: 16px;
  }
  .p-hm-treatment__img {
    min-height: 280px;
  }
  .p-hm-treatment .p-hm-treatment__cta-text {
    display: grid;
  }
  .p-floating__tel, .p-floating__mail, .p-floating__mail__b {
    width: 100%;
  }
}

/* 医師・専門家からの推薦（Bootstrap 非依存） */
.p-recommend {
  background: #fdf8f0;
  padding: 60px 20px 72px;
}

.p-recommend__inner {
  max-width: 900px;
  margin-inline: auto;
}

.p-recommend__ttl {
  font-size: 32px;
  font-weight: bold;
  text-align: center;
  color: #ee3f7c;
  margin: 0 0 20px;
  line-height: 1.35;
}

.p-recommend__list {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 40px;
  max-width: 600px;
  margin-inline: auto;
}

.p-recommend__item {
  flex: 1 1 300px;
  max-width: 420px;
  min-width: 0;
}

.p-recommend__figure {
  margin: 0 0 14px;
}

.p-recommend__img {
  width: 100%;
  aspect-ratio: 273/254;
  object-fit: cover;
}

.p-recommend__body {
  text-align: left;
}

.p-recommend__position {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.65;
  color: #333;
}

.p-recommend__name {
  margin: 0;
  font-size: 18px;
  color: #111;
}

@media screen and (max-width: 750px) {
  .p-recommend {
    padding: 48px 20px 56px;
  }

  .p-recommend__ttl {
    font-size: 22px;
    margin-bottom: 16px;
  }

  .p-recommend__list {
    flex-direction: column;
    align-items: stretch;
    gap: 36px;
  }

  .p-recommend__item {
    max-width: none;
  }
}

/* スポーツバナー（.p-recommend 直下）：余白とインナー幅は他セクションと同型 */
.p-banner {
  padding: 30px 20px;
  box-sizing: border-box;
}

.p-banner__inner {
  max-width: 1170px;
  margin-inline: auto;
}

.p-banner a {
  display: block;
  text-decoration: none;
}

.p-banner__item {
  display: block;
  margin: 0;
}

.p-banner__item img {
  width: 100%;
  height: auto;
  display: block;
}

.p-reason {
  padding: 100px 20px;
  background: #fef9f0;
}

.p-reason__inner {
  max-width: 1070px;
  margin-inline: auto;
}

/* 店舗ページ：セクション見出し h2（共通タイポ） */
.p-reason__ttl,
.p-price__ttl,
.p-reserveFlow__ttl,
.p-access__ttl,
.p-areashop__ttl,
.doctor-staff__ttl,
.p-newperson__ttl {
  font-size: 32px;
  font-weight: bold;
  text-align: center;
  color: #ee3f7c;
}

/* 下余白 80px（理由・料金・予約フロー・アクセス・近隣店舗） */
.p-reason__ttl,
.p-reserveFlow__ttl,
.p-access__ttl,
.p-areashop__ttl {
  margin: 0 0 80px;
}
/* 下余白 40px（医師推薦・初めての方ブロック） */
.doctor-staff__ttl,
.p-newperson__ttl {
  margin: 0 0 40px;
}

.p-price {
  padding-top: 60px;
}

.p-price__ttl {
  margin-bottom: 0;
}
.p-reason__item {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  margin-bottom: 48px;
}

.p-reason__img {
  flex-shrink: 0;
  width: 38%;
}

.p-reason__img img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.p-reason__content {
  flex: 1;
}

.p-reason__point-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 16px;
}

.p-reason__badge {
  background: #ee3f7c;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  padding: 6px 18px;
  border-radius: 30px;
  white-space: nowrap;
}

.p-reason__heading {
  font-size: 24px;
  font-weight: bold;
  color: #ee3f7c;
}

.p-reason__text {
  font-size: 16px;
  line-height: 2;
  margin: 0 0 12px;
}

.p-reason__more {
  text-align: right;
  font-size: 16px;
}

.p-reason__more a {
  color: #333;
  text-decoration: underline;
}

@media (max-width: 750px) {
  .p-reason {
    padding: 32px 16px;
  }

  .p-reason .p-reason__ttl,
  .p-price .p-price__ttl,
  .p-reserveFlow .p-reserveFlow__ttl,
  .p-access .p-access__ttl,
  .p-areashop .p-areashop__ttl,
  .doctor-staff .doctor-staff__ttl,
  .p-newperson .p-newperson__ttl {
    font-size: 18px;
    margin-bottom: 28px;
  }

  .p-reason__item {
    flex-direction: column;
    gap: 16px;
    margin-bottom: 36px;
  }

  .p-reason__img {
    width: 100%;
    max-width: none;
  }

  .p-reason__point-head {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 8px 12px;
    margin-bottom: 12px;
  }

  .p-reason__badge {
    font-size: 12px;
    padding: 4px 12px;
  }

  .p-reason__heading {
    font-size: 16px;
    flex: 1 1 200px;
    min-width: 0;
  }

  .p-reason__text {
    font-size: 14px;
    line-height: 1.8;
  }

  .p-reason__more {
    text-align: left;
  }
  .p-areashop {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.p-trafic {
  padding: 10px 3% 50px;
  background-color: #fef9f0;
  margin-top: 0;
}

.p-trafic .p-shop__trafic__featureWrap {
  position: relative;
  background-color: #fff;
  border: 2px solid #ee3f7c;
  border-radius: 16px;
  padding: 80px 5%;
  margin-top: 28px;
}

.p-trafic__label {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ee3f7c;
  color: #fff;
  font-size: 32px;
  font-weight: bold;
  padding: 0 30px;
  border-radius: 40px;
  white-space: nowrap;
}

.p-trafic__hero {
  display: flex;
  align-items: flex-start;
  gap: 36px;
  margin-bottom: 30px;
}

.p-trafic__hero-img {
  flex-shrink: 0;
  width: 45%;
}

.p-trafic__hero-img a {
  display: block;
}

.p-trafic__hero-img img {
  width: 100%;
  height: auto;
  display: block;
}

.p-trafic__hero-catch {
  flex: 1;
  margin-top: 20px;
}

.p-trafic__hero-catch p {
  color: #ee3f7c;
  font-size: 26px;
  font-weight: bold;
  line-height: 1.9;
  margin: 0;
}

@media (max-width: 750px) {
  .p-trafic__hero {
    flex-direction: column;
    gap: 20px;
  }

  .p-trafic__hero-img {
    width: 100%;
    max-width: 100%;
  }

  .p-trafic__hero-catch {
    flex: none;
    width: 100%;
  }

    .p-trafic__hero-catch p {
    font-size: 20px;
    }
    .p-trafic__label {
      font-size: 18px;
      white-space: initial;
      width: 90%;
      text-align: center;
    }
}

.p-trafic__lead {
  font-size: 17px;
  line-height: 1.9;
  margin: 0 0 20px;
}

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

.p-trafic__section-ttl {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 24px;
  font-weight: bold;
  margin: 0;
}

.p-trafic__section-ttl::before {
  content: "●";
  color: #ee3f7c;
  flex-shrink: 0;
  font-size: 28px;
}

.p-trafic__dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  font-size: 14px;
  line-height: 1.8;
  margin: 0 0 8px;
}

.p-trafic__dl-term {
  font-weight: bold;
  font-size: 20px;
  color: #ee3f7c;
  white-space: nowrap;
}

.p-trafic__dl-desc {
  margin: 0;
  font-size: 16px;
}

.p-trafic__dl-desc--underline {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 65%,
    #fff200 65%,
    #fff200 85%,
    transparent 85%,
    transparent 100%
  );
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.p-trafic__step-dl {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 14px;
  line-height: 1.8;
}

/* 左：STEPピル＋太字見出し／右：説明文（dd列は縦にそろう） */
.p-trafic__step-row {
  display: grid;
  grid-template-columns: minmax(0, 0.45fr) minmax(0, 1fr);
  align-items: start;
  column-gap: clamp(20px, 3vw, 30px);
  row-gap: 0;
}

.p-trafic__step-term {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.p-trafic__step-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-width: 5.5em;
  padding: 8px 16px;
  box-sizing: border-box;
  background: #ee3f7c;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
  border-radius: 999px;
  text-transform: uppercase;
  white-space: nowrap;
}

.p-trafic__step-heading {
  display: block;
  flex: 1;
  min-width: 0;
  margin: 0;
  padding-top: 2px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.45;
  color: #111;
}

.p-trafic__step-desc {
  margin: 0;
  padding: 0;
  min-width: 0;
  font-size: 15px;
}

.p-trafic__step-body {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.8;
  color: #333;
}

@media (max-width: 750px) {
  .p-trafic__step-dl {
    gap: 22px;
  }

  .p-trafic__step-row {
    grid-template-columns: 1fr;
    row-gap: 10px;
  }

  .p-trafic__step-desc {
    padding-left: 0;
  }

  .p-trafic__dl-term {
    white-space: normal;
  }
}

/* p-trafic SP 追記：本文14px・見出し系18〜20px（上記ベース指定は編集せずここで上書き） */
@media (max-width: 750px) {
  .p-trafic .p-shop__trafic__featureWrap {
    padding: 48px 4%;
  }

  .p-trafic__lead {
    font-size: 14px;
  }

  .p-trafic__section-ttl {
    font-size: 18px;
    margin-bottom: 20px;
  }

  .p-trafic__section-ttl::before {
    font-size: 18px;
  }

  .p-trafic__dl {
    font-size: 14px;
  }

  .p-trafic__dl-term {
    font-size: 18px;
  }

  .p-trafic__dl-desc {
    font-size: 14px;
  }

  .p-trafic__step-dl {
    font-size: 14px;
    gap: 18px;
  }

  .p-trafic__step-heading {
    font-size: 16px;
  }

  .p-trafic__step-body {
    font-size: 14px;
  }

  .p-trafic__step-label {
    font-size: 12px;
    min-width: 5em;
    padding: 7px 14px;
  }

  .p-trafic__hero-catch p {
    font-size: 18px;
  }

  .p-trafic__label {
    font-size: 18px;
    padding: 0 16px;
  }
}

.doctor-staff {
  background-color: #fef9f0;
  margin-top: 0;
  padding: 30px 2%;
}
.doctor-staff__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 60px;
  list-style: none;
}

.doctor-staff__item {
  width: 273px;
  max-width: 100%;
}

.doctor-staff__item figure {
  margin: 0 0 12px;
}

.doctor-staff__item figure img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 273/254;
  object-fit: cover;
}

.doctor-staff__position {
  display: block;
  text-align: left;
  font-size: 14px;
  line-height: 1.7;
}

.doctor-staff__name {
  text-align: left;
  font-size: 16px;
}

@media (max-width: 750px) {
  .doctor-staff__list {
    flex-direction: column;
    align-items: center;
    gap: 36px;
  }

  .doctor-staff__item {
    flex: 0 1 auto;
    width: 100%;
    max-width: 280px;
  }
}
.p-newperson {
  padding-top: 80px;
}

.shop_price_first {
  margin-bottom: 0;
  padding: 30px 4%;
}

.p-price__ttl-note {
  text-align: center;
}

.p-price__block-ttl {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin: 0 0 20px;
  flex-wrap: wrap;
}

.p-price__dot {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ee3f7c;
  flex-shrink: 0;
}

.p-price__badge {
  display: inline-block;
  background: #ee3f7c;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  padding: 5px 16px;
  margin-left: 8px;
}

.p-price__insurance-body {
  display: grid;
  grid-template-columns: 1fr 0.7fr;
  gap: 40px;
  align-items: flex-start;
}

.p-price__insurance-text {
  flex: 1 1 240px;
  min-width: 0;
  font-size: 15px;
  line-height: 1.8;
}

.p-price__insurance-text p {
  margin: 0 0 12px;
  font-size: 16px;
}

.p-price__insurance-subheading {
  font-size: 17px;
  font-weight: bold;
  color: #333;
  margin: 20px 0 8px;
  line-height: 1.5;
}

.p-price__insurance-subheading:first-child {
  margin-top: 0;
}

.p-price__insurance-note {
  font-size: 14px;
  color: #555;
  line-height: 1.75;
}

.p-price__insurance-table {
  flex: 0 1 auto;
  width: 100%;
  max-width: 490px;
  min-width: 0;
}

.p-price__insurance-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.p-price__insurance-table th {
  background: #faf9f9;
  color: #333;
  font-weight: bold;
  padding: 20px 16px;
  border: 1px solid #e8d0d8;
  text-align: center;
}

.p-price__insurance-table td {
  background: #fff;
  padding: 44px 16px;
  border: 1px solid #e8d0d8;
  text-align: center;
  font-weight: bold;
  color: #333;
}

.p-price__block > p {
  font-size: 15px;
  line-height: 1.8;
  margin: 0 0 12px;
}

.p-price__list-bg {
  background-color: #fef9f0;
  padding: 0 3% 30px;
}

.p-price__list__wrap {
  background-color: #fff;
  padding: 20px 2%;
}

@media (max-width: 750px) {
  .shop_price_first {
    padding: 0;
  }

  .p-price__list-bg {
    padding-left: 20px;
    padding-right: 20px;
  }

  .p-price__list__box-text {
    width: calc(60% - 20px);
  }

  .p-price__block {
    padding: 0 16px;
  }
  .p-price__block:last-child {
    padding-bottom: 20px;
  }

  .p-price__block-ttl {
    font-size: 18px;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 16px;
  }

  .p-price__dot {
    width: 14px;
    height: 14px;
    margin-top: 5px;
  }

  .p-price__badge {
    margin-left: 0;
    margin-top: 8px;
    flex: 1 1 100%;
    text-align: center;
    font-size: 12px;
    padding: 8px 12px;
    box-sizing: border-box;
  }

  .p-price__insurance-body {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .p-price__insurance-text {
    font-size: 14px;
  }

  .p-price__insurance-subheading {
    font-size: 16px;
    margin-top: 16px;
  }

  .p-price__insurance-subheading:first-child {
    margin-top: 0;
  }

  .p-price__insurance-note {
    font-size: 13px;
  }

  .p-price__insurance-table {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-top: 0;
  }

  .p-price__insurance-table table {
    font-size: 13px;
  }

  .p-price__insurance-table th,
  .p-price__insurance-table td {
    padding: 8px 10px;
  }

  .p-price__block > p {
    font-size: 14px;
  }
}
@media (max-width: 750px) {
  .l-dl-list01 dd {
    width: 73%;
  }
  .u-txt-color01 {
    font-size: 15px;
  }
}

/* お客様の声（Figma node 16:759） */
.p-customer-voice {
  background: #fff;
  padding: 48px 20px 64px;
  box-sizing: border-box;
}

.p-customer-voice__inner {
  max-width: 1170px;
  margin-inline: auto;
}

.p-customer-voice__title-wrap {
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
}

.p-customer-voice__title-wrap .p-customer-voice__ttl {
  margin: 0 0 12px;
  font-size: 32px;
  font-weight: bold;
  line-height: 1.3;
  color: #ee3f7c;
}

.p-customer-voice__lead {
  margin: 0 0 48px;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.4;
  color: #000;
}

.p-customer-voice__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 36px;
  margin: 0 0 40px;
  padding: 0;
  list-style: none;
}

.p-customer-voice__item {
  margin: 0;
  min-width: 0;
}

.p-customer-voice__figure {
  margin: 0 0 16px;
}

.p-customer-voice__img {
  display: block;
  width: 100%;
  aspect-ratio: 360 / 257;
  object-fit: cover;
}

.p-customer-voice__text {
  margin: 0;
  font-size: 12px;
  line-height: 18px;
  color: #000;
  text-align: justify;
}

.p-customer-voice__more-wrap {
  display: flex;
  justify-content: center;
}

.p-customer-voice__more {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  max-width: 357px;
  min-height: 61px;
  padding: 10px 16px;
  border: 1px solid #000;
  background: #fff;
  font-size: 18px;
  line-height: 24px;
  font-weight: normal;
  color: #000;
  text-align: center;
  text-decoration: none;
}

.p-customer-voice__more:hover {
  opacity: 0.85;
}

@media (max-width: 750px) {
  .p-customer-voice {
    padding: 32px 20px 48px;
  }

  .p-customer-voice__title-wrap .p-customer-voice__ttl {
    font-size: 18px;
    margin-bottom: 8px;
  }

  .p-customer-voice__lead {
    font-size: 16px;
    margin-bottom: 28px;
  }

  .p-customer-voice__list {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-bottom: 32px;
  }

  .p-customer-voice__text {
    font-size: 14px;
    line-height: 1.65;
  }

  .p-customer-voice__more {
    max-width: none;
    font-size: 16px;
    min-height: 56px;
  }
}

/* 改善実績 Before・After（Figma node 18:850） */
.p-before-after {
  background: #fff;
  padding: 48px 20px 64px;
  box-sizing: border-box;
}

.p-before-after__inner {
  max-width: 1170px;
  margin-inline: auto;
}

.p-before-after__header {
  text-align: center;
  margin-top: 0;
  margin-bottom: 48px;
}

.p-before-after__ttl {
  margin: 0 0 16px;
  font-size: 32px;
  font-weight: bold;
  line-height: 1.3;
  color: #ee3f7c;
}

.p-before-after__lead {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: bold;
  line-height: 1.5;
  color: #000;
}

.p-before-after__note {
  margin: 0;
  font-size: 12px;
  font-weight: bold;
  line-height: 1.5;
  color: #000;
}

.p-before-after__cases {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

.p-before-after__case {
  min-width: 0;
}

.p-before-after__case-ttl {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.125;
  color: #000;
}

.p-before-after__compare {
  display: flex;
  width: 100%;
  margin: 0 0 24px;
  border: 1px solid #e0e0e0;
  box-sizing: border-box;
  overflow: hidden;
}

/* img1 のみ（Before/After 合成1枚） */
.p-before-after__compare--merged {
  display: block;
}

.p-before-after__compare--merged .p-before-after__figure {
  width: 100%;
}

.p-before-after__compare--merged .p-before-after__img {
  object-fit: contain;
  object-position: center;
}

.p-before-after__half {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.p-before-after__half:first-child {
  border-right: 1px solid #e0e0e0;
}

.p-before-after__figure {
  margin: 0;
  width: 100%;
  /* aspect-ratio: 274 / 343; */
  overflow: hidden;
  background: #f5f5f5;
}

.p-before-after__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
}

.p-before-after__label {
  margin: 0;
  padding: 10px 8px 12px;
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  font-family: Inter, "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
}

.p-before-after__label--before {
  color: #000;
}

.p-before-after__label--after {
  color: #ee3f7c;
}

.p-before-after__comment {
  background: #fef9f0;
  box-sizing: border-box;
  min-height: 129px;
  padding: 17px 23px 20px;
}

.p-before-after__comment--tone2 {
  background: #fef8ee;
}

.p-before-after__comment-ttl {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: bold;
  line-height: normal;
  color: #000;
}

.p-before-after__comment-body {
  margin: 0;
  font-size: 12px;
  font-weight: normal;
  line-height: 18px;
  color: #000;
}

@media (max-width: 750px) {
  .p-before-after {
    padding: 32px 20px 48px;
  }

  .p-before-after__header {
    margin-bottom: 28px;
  }

  .p-before-after__ttl {
    font-size: 18px;
    margin-bottom: 12px;
  }

  .p-before-after__lead {
    font-size: 16px;
  }

  .p-before-after__note {
    font-size: 11px;
  }

  .p-before-after__cases {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .p-before-after__case-ttl {
    font-size: 15px;
  }

  .p-before-after__label {
    font-size: 18px;
    padding: 8px 6px 10px;
  }

  .p-before-after__comment {
    min-height: 0;
    padding: 16px 18px;
  }

  .p-before-after__comment-body {
    font-size: 14px;
    line-height: 1.65;
  }
}