@charset "UTF-8";
:root {
  --jaFont: 'Zen Kaku Gothic New', sans-serif;
  --enFont: 'Montserrat', 'Zen Kaku Gothic New', sans-serif;
  --txtColor: #494949;
  --accent: #be978d;
  --beige: #e4decf;
  --brown: #786f63;
  --grayBeige: #aaa094;
  --base: #fcfcfc;
  --white: #fff;
}

/* ========================================================================================
  Size Utilities

  rem()   : 固定サイズ変換
  fluid() : 流動的サイズ（上下限保護）
======================================================================================== */
/* -------------------------
  fluid() - 流動的サイズ
  引数: $size(基準px) $device('pc'/'tb'/'sp'または数値) $min-scale(既定0.7) $max-scale(既定1.5)
  例: fluid(20) / fluid(40, 'sp') / fluid(24, 'tb', 0.8, 1.2)
------------------------- */
/* 横スクロール領域の右端フェード用mixin（地色が白のためマスクで透過）
   `.xxx.is-scrollFade` に対して呼ぶ（付け外しはcommon.js）
   $width: グラデーション幅 */
/* ===================================
Reset
=================================== */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

html {
  scrollbar-gutter: stable;
}

body {
  line-height: 1.8;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* input textarea reset
============================== */
input,
textarea,
select {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  max-width: 100%;
  outline: none;
  outline: 0;
}

select::-ms-expand {
  display: none;
}

/* iOSでのデフォルトスタイルをリセット */
input[type=submit],
input[type=button] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  border: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
}

input[type=submit]::-webkit-search-decoration,
input[type=button]::-webkit-search-decoration {
  display: none;
}

input[type=submit]:focus,
input[type=button]:focus {
  outline-offset: -2px;
}

/* ===================================
Foundation
=================================== */
* {
  box-sizing: border-box;
  line-break: strict;
}

/* テキスト
============================== */
a {
  text-decoration: none;
  color: inherit;
}

strong {
  font-weight: bold;
}

b {
  font-weight: bold;
}

sup {
  vertical-align: top;
}

/* メディア
============================== */
img {
  display: block;
  max-width: 100%;
  width: 100%;
  height: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

video {
  display: block;
  max-width: 100%;
  height: auto;
  outline: none;
}

iframe {
  max-width: 100%;
}

/* Safariで表示されるデフォルトの三角形アイコンを消します */
summary::-webkit-details-marker {
  display: none;
}

summary::marker {
  content: "";
}

html {
  font-size: 1rem;
  font-family: var(--jaFont);
  color: var(--txtColor);
  background-color: var(--base);
}

:where(button, [type=button], [type=reset], [type=submit]) {
  touch-action: manipulation;
}

/* スクリーンリーダー専用（視覚的に隠す） */
.hp_visuallyHidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* PC/SP 表示切替ユーティリティ（768px境界・どこでも単体で使える）。
   <br class="pc_only"> のようにPC基準で入れた文中の改行をSPで無効化する用途にも使う
   （SPで残すとカンプSP＝文末で改行・文中は自然折り返し と改行位置がずれて行数が増えるため） */
@media screen and (width <= 768px) {
  .pc_only {
    display: none;
  }
}

.sp_only {
  display: none;
}
@media screen and (width <= 768px) {
  .sp_only {
    display: revert;
  }
}

.ly_header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  background-color: transparent;
  transition: background-color 0.3s ease-out;
}

.ly_header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 12.5rem;
  background-image: linear-gradient(to bottom, rgb(from var(--txtColor) r g b/35%) 0%, rgb(from var(--txtColor) r g b/12%) 55%, rgb(from var(--txtColor) r g b/0%) 100%);
  pointer-events: none;
  transition: opacity 0.4s ease-out;
}
@media screen and (width <= 1024px) {
  .ly_header::before {
    height: 7.5rem;
  }
}

.is-headerDark .ly_header::before,
.ly_header.is-open::before {
  opacity: 0;
}

.ly_header.is-open {
  background-color: var(--base);
}

.ly_header_inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 125rem;
  margin-inline: auto;
  padding-block: 1.875rem;
  padding-inline: 1.875rem;
}
@media screen and (width <= 1024px) {
  .ly_header_inner {
    padding-block: 1.25rem;
    padding-inline: 1.25rem;
  }
}

.bl_headerLogo_link {
  display: block;
  position: relative;
  width: 19.625rem;
  transition: opacity 0.3s ease-out;
}
@media screen and (width <= 1024px) {
  .bl_headerLogo_link {
    width: clamp(13.453125rem, 67.0560747664vw, 17.9375rem);
  }
}
@media (any-hover: hover) {
  .bl_headerLogo_link:hover {
    opacity: 0.7;
  }
}

.el_headerLogo_link_imgWhite,
.el_headerLogo_link_imgDark {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.4s ease-out;
}

.el_headerLogo_link_imgDark {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.is-headerDark .el_headerLogo_link_imgWhite,
.ly_header.is-open .el_headerLogo_link_imgWhite {
  opacity: 0;
}

.is-headerDark .el_headerLogo_link_imgDark,
.ly_header.is-open .el_headerLogo_link_imgDark {
  opacity: 1;
}

.bl_headerCtrl {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
@media screen and (width <= 1024px) {
  .bl_headerCtrl {
    gap: 1rem;
  }
}

@media screen and (width <= 1024px) {
  .bl_headerCtrl_tel {
    display: none;
  }
}

.bl_headerCtrl_tel_link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: opacity 0.3s ease-out;
}
@media (any-hover: hover) {
  .bl_headerCtrl_tel_link:hover {
    opacity: 0.7;
  }
}

.el_headerCtrl_tel_link_body {
  display: block;
}

.el_headerCtrl_tel_link_iconWhite,
.el_headerCtrl_tel_link_iconDark {
  width: 1.0625rem;
  height: auto;
  transition: opacity 0.4s ease-out;
}

.el_headerCtrl_tel_link_iconDark {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  opacity: 0;
}

.is-headerDark .el_headerCtrl_tel_link_iconWhite,
.ly_header.is-open .el_headerCtrl_tel_link_iconWhite {
  opacity: 0;
}

.is-headerDark .el_headerCtrl_tel_link_iconDark,
.ly_header.is-open .el_headerCtrl_tel_link_iconDark {
  opacity: 1;
}

.el_headerCtrl_tel_link_num {
  display: block;
  font-family: var(--jaFont);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--white);
  transition: color 0.4s ease-out;
}

.el_headerCtrl_tel_time {
  display: block;
  margin-top: 0.3125rem;
  font-family: var(--jaFont);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--white);
  transition: color 0.4s ease-out;
}

.is-headerDark .el_headerCtrl_tel_link_num,
.ly_header.is-open .el_headerCtrl_tel_link_num,
.is-headerDark .el_headerCtrl_tel_time,
.ly_header.is-open .el_headerCtrl_tel_time {
  color: var(--txtColor);
}

.bl_headerCtrl_reserveList {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
@media screen and (width <= 1024px) {
  .bl_headerCtrl_reserveList {
    display: none;
  }
}

.bl_headerCtrl_reserveList .bl_commonLineReserveBtn,
.bl_headerCtrl_reserveList .bl_commonWebReserveBtn {
  justify-content: center;
  width: 9.375rem;
  padding-block: 0.6875rem;
}

.bl_headerCtrl_reserveList img {
  height: 1.125rem;
  width: auto;
}

.bl_headerNav_contact_reserveList .bl_commonLineReserveBtn,
.bl_headerNav_contact_reserveList .bl_commonWebReserveBtn {
  width: 15rem;
  padding-block: 1.25rem;
  padding-inline: 2.5rem;
}

.bl_headerNav_contact_reserveList .bl_commonLineReserveBtn {
  gap: 0.875rem;
}

.bl_headerNav_contact_reserveList .bl_commonWebReserveBtn {
  gap: 1.375rem;
}

.bl_headerNav_contact_reserveList img {
  height: 1.5rem;
  width: auto;
}

.bl_headerNav_contact_reserveList .bl_commonLineReserveBtn .el_commonLineReserveBtn_txt,
.bl_headerNav_contact_reserveList .bl_commonWebReserveBtn .el_commonWebReserveBtn_txt {
  font-size: 1.5rem;
}

.bl_headerToggleBtn {
  position: relative;
  z-index: 2;
  width: 2.5rem;
  height: 1.3125rem;
  padding: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.el_headerToggleBtn_iconWhite,
.el_headerToggleBtn_iconDark {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  transition: opacity 0.4s ease-out;
}

.el_headerToggleBtn_iconDark {
  opacity: 0;
}

.is-headerDark .el_headerToggleBtn_iconWhite {
  opacity: 0;
}

.is-headerDark .el_headerToggleBtn_iconDark {
  opacity: 1;
}

.ly_header.is-open .el_headerToggleBtn_iconWhite,
.ly_header.is-open .el_headerToggleBtn_iconDark {
  opacity: 0;
}

.bl_headerToggleBtn::before,
.bl_headerToggleBtn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.795rem;
  height: 0.0625rem;
  background-color: var(--white);
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease-out, background-color 0.3s ease-out, transform 0.3s ease-out;
}

.ly_header.is-open .bl_headerToggleBtn::before,
.ly_header.is-open .bl_headerToggleBtn::after {
  opacity: 1;
  background-color: var(--txtColor);
}

.ly_header.is-open .bl_headerToggleBtn::before {
  transform: translate(-50%, -50%) rotate(26.565deg);
}

.ly_header.is-open .bl_headerToggleBtn::after {
  transform: translate(-50%, -50%) rotate(-26.565deg);
}

.bl_headerNav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100dvh;
  overflow-y: auto;
  background-color: color-mix(in srgb, var(--txtColor) 70%, transparent);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
}
@media screen and (width <= 1024px) {
  .bl_headerNav {
    background-color: var(--base);
    background-image: url(../img/common/nav-bg-sp.png);
    background-repeat: no-repeat;
    background-position: left 5.0625rem;
    background-size: 100% auto;
  }
}

.ly_header.is-open .bl_headerNav {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

html.is-scrollLocked body {
  position: fixed;
  inset-inline: 0;
}

.bl_headerNav_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(45rem, 100%);
  min-height: 100%;
  margin-left: auto;
  padding-block: 4.375rem;
  padding-inline: 6.25rem;
  background-color: var(--base);
}
@media screen and (width <= 1024px) {
  .bl_headerNav_inner {
    display: block;
    width: 100%;
    min-height: 0;
    max-width: 37.5rem;
    margin-inline: auto;
    padding-block: 6.25rem 3.125rem;
    padding-inline: 4.3125rem;
    background-color: transparent;
  }
}

.el_headerNav_logo {
  display: block;
  width: 15.5rem;
  height: auto;
}
@media screen and (width <= 1024px) {
  .el_headerNav_logo {
    display: none;
  }
}

.bl_headerNav_list {
  display: grid;
  grid-template-columns: repeat(2, 15rem);
  grid-template-rows: repeat(6, auto);
  grid-auto-flow: column;
  column-gap: 2.5rem;
  margin-top: 1.25rem;
}
@media screen and (width <= 1024px) {
  .bl_headerNav_list {
    display: flex;
    flex-direction: column;
    margin-top: 0;
  }
}

.bl_headerNavItem {
  border-bottom: 0.0625rem solid var(--beige);
}

.bl_headerNavItem_link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.625rem;
  transition: opacity 0.3s ease-out;
}
@media screen and (width <= 1024px) {
  .bl_headerNavItem_link {
    padding-block: 0.75rem;
  }
}
@media (any-hover: hover) {
  .bl_headerNavItem_link:hover {
    opacity: 0.6;
  }
}

.bl_headerNavItem_link::after {
  content: "→";
  color: var(--txtColor);
  line-height: 1;
}

.el_headerNavItem_link_txt {
  font-family: var(--jaFont);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--txtColor);
}

.bl_headerNav_contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 2.75rem;
}
@media screen and (width <= 1024px) {
  .bl_headerNav_contact {
    margin-top: 3.75rem;
  }
}

.bl_headerNav_contact_telRow {
  display: flex;
  align-items: flex-end;
  flex-shrink: 0;
  gap: 0.625rem;
}

.bl_headerNav_contact_tel {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 0.4375rem;
  transition: opacity 0.3s ease-out;
}
@media (any-hover: hover) {
  .bl_headerNav_contact_tel:hover {
    opacity: 0.7;
  }
}

.el_headerNav_contact_tel_icon {
  width: 1rem;
  height: auto;
}

.el_headerNav_contact_tel_num {
  font-family: var(--jaFont);
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--txtColor);
  white-space: nowrap;
}

.el_headerNav_contact_time {
  flex-shrink: 0;
  font-family: var(--jaFont);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
  color: var(--txtColor);
}

.bl_headerNav_contact_reserveList {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  margin-top: 1.25rem;
}
@media screen and (width <= 1024px) {
  .bl_headerNav_contact_reserveList {
    flex-direction: column;
    gap: 1.25rem;
  }
}

.bl_headerNav_sns {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 3.75rem;
}

.bl_headerNav_sns_item_link {
  display: block;
  transition: opacity 0.3s ease-out;
}
@media (any-hover: hover) {
  .bl_headerNav_sns_item_link:hover {
    opacity: 0.6;
  }
}

.bl_headerNav_sns_item_link img {
  width: auto;
  height: auto;
}

.bl_headerLogo_link:focus-visible,
.bl_headerCtrl_tel_link:focus-visible,
.bl_commonLineReserveBtn:focus-visible,
.bl_commonWebReserveBtn:focus-visible,
.bl_headerToggleBtn:focus-visible,
.bl_headerNavItem_link:focus-visible,
.bl_headerNav_contact_tel:focus-visible,
.bl_headerNav_sns_item_link:focus-visible {
  outline: 0.125rem solid var(--accent);
  outline-offset: 0.125rem;
}

@media screen and (width > 1024px) {
  .ly_header.is-open {
    background-color: transparent;
  }
}

@media screen and (width > 1024px) {
  .ly_header.is-open .bl_headerLogo,
  .ly_header.is-open .bl_headerCtrl_tel,
  .ly_header.is-open .bl_headerCtrl_reserveList {
    visibility: hidden;
  }
}

/* ==========================================================================
   フッター全体
   ========================================================================== */
.ly_footer {
  position: relative;
  z-index: 1;
  background-color: var(--base);
}

/* ==========================================================================
   RESERVE セクション
   ========================================================================== */
.bl_footerReserveSection {
  position: relative;
  z-index: 0;
  overflow: hidden;
  padding-block: 4.9375rem;
  color: var(--txtColor);
}
@media screen and (width <= 768px) {
  .bl_footerReserveSection {
    padding-block: 5rem;
  }
}

.el_footerReserveSection_bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url(../img/common/footer-reserve-bg-composite.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media screen and (width <= 768px) {
  .el_footerReserveSection_bg {
    background-image: url(../img/common/footer-reserve-bg-composite-sp.png);
  }
}

.bl_footerReserveSection_inner {
  position: relative;
  z-index: 0;
  max-width: 73.75rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 5rem;
}
@media screen and (width <= 1180px) {
  .bl_footerReserveSection_inner {
    flex-direction: column;
    justify-content: center;
    gap: 0;
  }
}
@media screen and (width <= 1024px) {
  .bl_footerReserveSection_inner {
    flex-direction: column;
    justify-content: center;
    gap: 0;
  }
}

.bl_footerReserveSection_content {
  width: 100%;
  max-width: 44rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2.1875rem;
}
@media screen and (width <= 1024px) {
  .bl_footerReserveSection_content {
    max-width: none;
    margin-bottom: 0;
  }
}

.bl_footerReserveSection_content > * + * {
  margin-top: 1.875rem;
}
@media screen and (width <= 768px) {
  .bl_footerReserveSection_content > * + * {
    margin-top: 1.25rem;
  }
}

.bl_footerReserveSection_content_top {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  max-width: 100%;
}

.bl_footerReserveSection_content_top > * + * {
  margin-top: 1.25rem;
}

.bl_footerReserveSection_content_ttl {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.bl_footerReserveSection_content_ttl > * + * {
  margin-top: 0.625rem;
}

.el_footerReserveSection_content_ttl_en {
  font-family: var(--enFont);
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--accent);
}
@media screen and (width <= 768px) {
  .el_footerReserveSection_content_ttl_en {
    font-size: 1.75rem;
    letter-spacing: 0.1em;
  }
}

.el_footerReserveSection_content_ttl_ja {
  font-family: var(--jaFont);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--txtColor);
}
@media screen and (width <= 768px) {
  .el_footerReserveSection_content_ttl_ja {
    font-size: 0.75rem;
    letter-spacing: 0.05em;
  }
}

.el_footerReserveSection_body_txt {
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
}

.bl_footerReserveSection_body {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1.875rem;
  border-top: 1px solid var(--base);
  padding-top: 1.875rem;
}
@media screen and (width <= 1024px) {
  .bl_footerReserveSection_body {
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
  }
}

.bl_footerReserveSection_tel {
  flex-shrink: 0;
}

.el_footerReserveSection_tel_link {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "icon number" "icon time";
  align-items: center;
  column-gap: 0.625rem;
  row-gap: 0.3125rem;
  width: fit-content;
  color: var(--txtColor);
  transition: opacity 0.3s ease-out;
}
@media screen and (width <= 768px) {
  .el_footerReserveSection_tel_link {
    column-gap: 0.625rem;
    row-gap: 0.625rem;
  }
}
@media (any-hover: hover) {
  .el_footerReserveSection_tel_link:hover {
    opacity: 0.7;
  }
}

.el_footerReserveSection_tel_link img {
  grid-area: icon;
  flex-shrink: 0;
  width: 1.375rem;
  height: auto;
}

.el_footerReserveSection_tel_link_txt {
  grid-area: number;
  font-family: var(--jaFont);
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
@media screen and (width <= 768px) {
  .el_footerReserveSection_tel_link_txt {
    font-size: 1.375rem;
    letter-spacing: 0.05em;
  }
}

.el_footerReserveSection_tel_time {
  grid-area: time;
  font-family: var(--jaFont);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
@media screen and (width <= 768px) {
  .el_footerReserveSection_tel_time {
    font-size: 0.875rem;
    letter-spacing: 0.05em;
  }
}

.bl_footerReserveSection_btnWrapper {
  display: flex;
  flex-wrap: nowrap;
  gap: 1.875rem;
}
@media screen and (width <= 1024px) {
  .bl_footerReserveSection_btnWrapper {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
}

@media screen and (width <= 1024px) {
  .bl_footerReserveSection_btnWrapper > a + a {
    margin-top: 1.25rem;
  }
}

.bl_footerReserveSection_btnWrapper .bl_commonLineReserveBtn,
.bl_footerReserveSection_btnWrapper .bl_commonWebReserveBtn {
  width: 13.75rem;
  padding-block: 1.03125rem;
  padding-inline: 2.5rem;
  flex-shrink: 0;
  white-space: nowrap;
  justify-content: center;
}
@media screen and (width <= 1024px) {
  .bl_footerReserveSection_btnWrapper .bl_commonLineReserveBtn,
  .bl_footerReserveSection_btnWrapper .bl_commonWebReserveBtn {
    width: 15rem;
    padding-block: 1.15625rem;
  }
}

.bl_footerReserveSection_btnWrapper .bl_commonLineReserveBtn {
  gap: 0.875rem;
}

.bl_footerReserveSection_btnWrapper .bl_commonWebReserveBtn {
  gap: 1.375rem;
}

.bl_footerReserveSection_btnWrapper img {
  width: auto;
  height: 1.6875rem;
}

.bl_footerReserveSection_btnWrapper .bl_commonLineReserveBtn .el_commonLineReserveBtn_txt,
.bl_footerReserveSection_btnWrapper .bl_commonWebReserveBtn .el_commonWebReserveBtn_txt {
  font-size: 1.5rem;
}

.bl_footerReserveSection_schedule {
  width: 100%;
  max-width: 22.1875rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (width <= 1180px) {
  .bl_footerReserveSection_schedule {
    margin-top: 3.75rem;
  }
}
@media screen and (width <= 1024px) {
  .bl_footerReserveSection_schedule {
    max-width: 21.75rem;
  }
}
@media screen and (width <= 768px) {
  .bl_footerReserveSection_schedule {
    max-width: none;
    padding-inline: 1.25rem;
  }
}

.bl_footerReserveSection_schedule > * + * {
  margin-top: 1.25rem;
}

.bl_footerReserveSection_schedule_imgWrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 710/884;
  overflow: hidden;
}

.el_footerReserveSection_schedule_imgWrapper_img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-out;
}

.el_footerReserveSection_schedule_imgWrapper_img.is-active {
  opacity: 1;
  visibility: visible;
}

.bl_footerReserveSection_schedule_nav {
  display: flex;
  align-items: center;
  gap: 3.125rem;
}

.el_footerReserveSection_schedule_nav_prev,
.el_footerReserveSection_schedule_nav_next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  height: 1.875rem;
  border: 1px solid var(--txtColor);
  border-radius: 0.9375rem;
  background-color: transparent;
  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
}
@media (any-hover: hover) {
  .el_footerReserveSection_schedule_nav_prev:hover,
  .el_footerReserveSection_schedule_nav_next:hover {
    background-color: var(--txtColor);
  }
}
.el_footerReserveSection_schedule_nav_prev:active,
.el_footerReserveSection_schedule_nav_next:active {
  background-color: var(--txtColor);
}

.el_footerReserveSection_schedule_nav_icon {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--txtColor);
  transition: background-color 0.3s ease-out;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 3.75rem 1.875rem;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 3.75rem 1.875rem;
}

@media (any-hover: hover) {
  .el_footerReserveSection_schedule_nav_prev:hover .el_footerReserveSection_schedule_nav_icon,
  .el_footerReserveSection_schedule_nav_next:hover .el_footerReserveSection_schedule_nav_icon {
    background-color: var(--base);
  }
}

.el_footerReserveSection_schedule_nav_prev:active .el_footerReserveSection_schedule_nav_icon,
.el_footerReserveSection_schedule_nav_next:active .el_footerReserveSection_schedule_nav_icon {
  background-color: var(--base);
}

.el_footerReserveSection_schedule_nav_icon_prev {
  mask-image: url(../img/common/btn-arrow-left.svg);
  -webkit-mask-image: url(../img/common/btn-arrow-left.svg);
}

.el_footerReserveSection_schedule_nav_icon_next {
  mask-image: url(../img/common/btn-arrow-right.svg);
  -webkit-mask-image: url(../img/common/btn-arrow-right.svg);
}

.el_footerReserveSection_schedule_nav_pagination {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.el_footerReserveSection_schedule_nav_pagination li {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background-color: var(--txtColor);
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.3s ease-out;
}

.el_footerReserveSection_schedule_nav_pagination li.is-active {
  opacity: 1;
}

/* ==========================================================================
   ACCESS セクション
   ========================================================================== */
.bl_footerAccessSection {
  background-color: var(--base);
  padding-block: 6.25rem;
  padding-inline: 1.25rem;
}
@media screen and (width <= 768px) {
  .bl_footerAccessSection {
    padding-block: 5rem;
  }
}

.bl_footerAccessSection_inner {
  max-width: 71.25rem;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 3.125rem;
}
@media screen and (width <= 1024px) {
  .bl_footerAccessSection_inner {
    flex-direction: column;
    gap: 3.75rem;
    align-items: flex-start;
  }
}

.bl_footerAccessSection_info {
  width: 100%;
  max-width: 27.5rem;
  flex: 1 1 27.5rem;
}
@media screen and (width <= 1024px) {
  .bl_footerAccessSection_info {
    flex: 0 0 auto;
  }
}
.bl_footerAccessSection_info {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
@media screen and (width <= 768px) {
  .bl_footerAccessSection_info {
    max-width: none;
    padding-inline: 1.25rem;
  }
}

.bl_footerAccessSection_ttl {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.el_footerAccessSection_ttl_en {
  font-family: var(--enFont);
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--accent);
}
@media screen and (width <= 768px) {
  .el_footerAccessSection_ttl_en {
    font-size: 2.25rem;
  }
}

.el_footerAccessSection_ttl_ja {
  font-family: var(--jaFont);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--txtColor);
}

.bl_footerAccessSection_address {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.el_footerAccessSection_address_zip,
.el_footerAccessSection_address_txt {
  font-family: var(--jaFont);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--txtColor);
}

/* 外部リンクアイコンはリンク全体のhoverに追従させる（個別のtransition/hoverは持たせない） */
.el_footerAccessSection_address_mapLink {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  width: fit-content;
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.05em;
  color: var(--txtColor);
  text-decoration: underline;
  transition: opacity 0.3s ease-out;
}
@media screen and (width <= 768px) {
  .el_footerAccessSection_address_mapLink {
    margin-top: 0.75rem;
  }
}
@media (any-hover: hover) {
  .el_footerAccessSection_address_mapLink:hover {
    opacity: 0.7;
  }
}

.el_footerAccessSection_address_mapLink img {
  display: block;
  width: 0.75rem;
  height: 0.875rem;
  flex-shrink: 0;
}

.bl_footerAccessSection_map {
  width: 100%;
  max-width: 40.625rem;
  flex: 1 1 40.625rem;
  min-width: 0;
}
@media screen and (width <= 1024px) {
  .bl_footerAccessSection_map {
    flex: 0 0 auto;
    max-width: none;
  }
}
@media screen and (width <= 768px) {
  .bl_footerAccessSection_map {
    max-width: none;
    padding-inline: 1.25rem;
  }
}

.bl_footerAccessSection_map img,
.bl_footerAccessSection_map iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 1300/700;
  object-fit: cover;
  display: block;
  border: 0;
}
@media screen and (width <= 1024px) {
  .bl_footerAccessSection_map img,
  .bl_footerAccessSection_map iframe {
    aspect-ratio: auto;
    height: 21.875rem;
  }
}
@media screen and (width <= 768px) {
  .bl_footerAccessSection_map img,
  .bl_footerAccessSection_map iframe {
    aspect-ratio: 348/240;
    height: auto;
  }
}

/* ==========================================================================
   フッター下部（施術メニュー一覧 / フッターナビ）ラッパー
   ========================================================================== */
.bl_footerLowerWrapper {
  position: relative;
  z-index: 0;
  clip-path: inset(0);
}

.el_footerLowerWrapper_bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.el_footerLowerWrapper_bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background-image: linear-gradient(rgb(from var(--beige) r g b/50%), rgb(from var(--beige) r g b/50%)), linear-gradient(rgb(from var(--base) r g b/80%), rgb(from var(--base) r g b/80%));
}

.bl_footerLowerWrapper_bg_slideList {
  position: absolute;
  inset: 0;
}

.bl_footerLowerWrapper_bg_slideList_item {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.5s ease-out;
}

.bl_footerLowerWrapper_bg_slideList_item.is-prev {
  z-index: 1;
  opacity: 1;
  transition: none;
}

.bl_footerLowerWrapper_bg_slideList_item.is-active {
  z-index: 2;
  opacity: 1;
}

.el_footerLowerWrapper_bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bl_footerMenuList {
  padding-block-start: 6.25rem;
  padding-block-end: 3.125rem;
  padding-inline: 1.25rem;
}
@media screen and (width <= 768px) {
  .bl_footerMenuList {
    padding-block-start: 6.25rem;
    padding-block-end: 2.5rem;
  }
}

.bl_footerMenuList_inner {
  max-width: 63.875rem;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 3.75rem;
}

.bl_footerMenuList_group {
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
}
@media screen and (width <= 768px) {
  .bl_footerMenuList_group {
    gap: 1.875rem;
  }
}

.bl_footerMenuList_group_ttlRow {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.el_footerMenuList_group_ttl {
  flex-shrink: 0;
  font-family: var(--jaFont);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--txtColor);
}

.el_footerMenuList_group_ttlRow_line {
  flex: 1;
  height: 1px;
  background-color: var(--grayBeige);
}

.bl_footerMenuList_group_childList {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.875rem 5rem;
}
@media screen and (width <= 1024px) {
  .bl_footerMenuList_group_childList {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (width <= 768px) {
  .bl_footerMenuList_group_childList {
    grid-template-columns: 1fr;
    gap: 1.875rem;
  }
}

.el_footerMenuList_group_childList_item_ttl {
  font-family: var(--jaFont);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--txtColor);
}

.el_footerMenuList_group_childList_item_postList {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: 1rem;
}
@media screen and (width <= 768px) {
  .el_footerMenuList_group_childList_item_postList {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 1.875rem;
    row-gap: 1rem;
  }
}

.el_footerMenuList_group_childList_item_postList li a {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--txtColor);
  transition: opacity 0.3s ease-out;
}
@media (any-hover: hover) {
  .el_footerMenuList_group_childList_item_postList li a:hover {
    opacity: 0.7;
  }
}

.el_footerMenuList_group_childList_item_postList li a::before {
  content: "";
  flex-shrink: 0;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background-color: var(--grayBeige);
}

/* ==========================================================================
   フッターナビ（サイトマップリンク / SNS / コピーライト）
   ========================================================================== */
.bl_footerNav {
  padding-block-end: 3.125rem;
  padding-inline: 1.25rem;
}
@media screen and (width <= 768px) {
  .bl_footerNav {
    padding-block-end: 3.75rem;
  }
}

.bl_footerNav_inner {
  max-width: 71.25rem;
  margin-inline: auto;
  padding-block-start: 3.625rem;
  border-top: 1px solid var(--grayBeige);
}

.el_footerNav_list {
  display: grid;
  /* minmax(0,155): 中間幅で列が縮めず横スクロールするのを防ぐ。
       155は最長ラベル「クリニックについて」の実測自然幅151pxに合わせた値
       （カンプの「クリニック案内」より2文字長く、140pxだと2行に折り返していた）。
       総幅は 155*6 + 42*5 = 1140 でカンプ（140*6 + 60*5）と同じ。
       列ピッチも200→197とほぼ変わらないため見た目の並びは維持される */
  grid-template-columns: repeat(6, minmax(0, 9.6875rem));
  column-gap: 2.625rem;
  row-gap: 0.75rem;
  justify-content: start;
}
@media screen and (width <= 1024px) {
  .el_footerNav_list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(6, auto);
    grid-auto-flow: column;
    column-gap: 1.75rem;
    row-gap: 0.9375rem;
  }
}

.el_footerNav_list li a {
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--txtColor);
  transition: opacity 0.3s ease-out;
}
@media (any-hover: hover) {
  .el_footerNav_list li a:hover {
    opacity: 0.7;
  }
}

.bl_footerNav_bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 3.4375rem;
}
@media screen and (width <= 768px) {
  .bl_footerNav_bottom {
    margin-top: 3.625rem;
  }
}

.el_footerNav_bottom_snsList {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.el_footerNav_bottom_snsList a {
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease-out;
}
@media (any-hover: hover) {
  .el_footerNav_bottom_snsList a:hover {
    opacity: 0.7;
  }
}

.el_footerNav_bottom_snsList img {
  width: auto;
  height: auto;
}

@media screen and (width <= 768px) {
  .el_footerNav_bottom_snsList img[src*=icon-threads] {
    width: 1.625rem;
  }
}

.el_footerNav_bottom_copyright {
  display: block;
  font-family: var(--jaFont);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--txtColor);
}
@media screen and (width <= 768px) {
  .el_footerNav_bottom_copyright {
    font-size: 0.625rem;
    letter-spacing: 0.05em;
  }
}

/* ==========================================================================
   追従SNS（画面端に固定表示。header側JSが付け外しする is-headerDark で配色切替）
   ========================================================================== */
.bl_followSns {
  position: fixed;
  top: 87.6%;
  right: 2rem;
  z-index: 40;
  transform: translateY(-50%);
}
@media screen and (width <= 768px) {
  .bl_followSns {
    display: none;
  }
}

.el_followSns_list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding-block: 1rem;
  padding-inline: 0.25rem;
}

.el_followSns_list_link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  transition: opacity 0.3s ease-out;
}
@media (any-hover: hover) {
  .el_followSns_list_link:hover {
    opacity: 0.7;
  }
}

.el_followSns_list_link_iconWhite,
.el_followSns_list_link_iconDark {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.4s ease-out;
}

.el_followSns_list_link_iconDark {
  opacity: 0;
}

html.is-headerDark .el_followSns_list_link_iconWhite,
body.is-headerDark .el_followSns_list_link_iconWhite {
  opacity: 0;
}

html.is-headerDark .el_followSns_list_link_iconDark,
body.is-headerDark .el_followSns_list_link_iconDark {
  opacity: 1;
}

/* ==========================================================================
   フォーカスリング（キーボード操作時のアクセシビリティ）
   ========================================================================== */
.ly_footer a:focus-visible,
.ly_footer button:focus-visible,
.bl_followSns a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/*========================================
下層ページ共通ラッパー（<main class="ly_commonPage"> 共通）
固定幅は持たない（幅は各_innerで指定）。役割は「はみ出し防止」のみ。
========================================*/
/* overflow-x:hidden は敷かない（横スクロールは原因側で潰し、overflow-sweep検査で検出可能に保つ） */
/* ヘッダーはposition:fixedのため、その高さぶんの余白を確保する。underPC(≤1024)を使う
   （underTB(≤768)だと769–1024px帯でヘッダーと重なる） */
.ly_commonPage {
  display: block;
  width: 100%;
  padding-top: 6.25rem;
}
@media screen and (width <= 1024px) {
  .ly_commonPage {
    padding-top: 3.75rem;
  }
}

/* 全幅FVページはヘッダー下まで背景を敷くため上の逃げ余白を打ち消す（重なり回避はFV側で対応） */
.ly_commonPage.is-fvBleed {
  padding-top: 0;
}
@media screen and (width <= 768px) {
  .ly_commonPage.is-fvBleed {
    padding-top: 0;
  }
}

/*========================================
機能色（LINE/WEB予約ボタンの背景）。ボタン背景として機能的に使うためCSS変数へ昇格（_var.scss編集対象外のためここで:root定義）
========================================*/
:root {
  --lineBtn: #7b9b84;
  --webBtn: #b69087;
}

/*========================================
ボタン
========================================*/
/* VIEW MORE型 汎用ボタン（例: クリニック案内を見る／料金表を見る／症例一覧へ／コラム一覧へ／VIEW MORE） */
/* 幅270×高さ44は全使用箇所で共通のため、共通コンポーネント側で固定値にしている（PC/SP共通） */
.bl_commonBtn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  width: 16.875rem;
  max-width: 100%;
  /* 外形高さ44px=border1×2+テキスト16+padding-block13×2。padding-block変更は全ページのボタン高さに影響 */
  padding-block: 0.8125rem;
  padding-inline: 1.25rem;
  border: 0.0625rem solid var(--txtColor);
  color: var(--txtColor);
  transition: background-color 0.3s ease-out, color 0.3s ease-out, border-color 0.3s ease-out;
}
@media (any-hover: hover) {
  .bl_commonBtn:hover {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--base);
  }
}

.bl_commonBtn .el_commonBtn_txt {
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
}

.bl_commonBtn .el_commonBtn_arrow {
  display: inline-flex;
  flex-shrink: 0;
}

.bl_commonBtn .el_commonBtn_arrow svg {
  display: block;
  width: 1rem;
  height: 0.625rem;
}

/* LINE予約ボタン */
.bl_commonLineReserveBtn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding-block: 0.75rem;
  padding-inline: 1.25rem;
  background-color: var(--lineBtn);
  transition: background-color 0.3s ease-out;
}
@media (any-hover: hover) {
  .bl_commonLineReserveBtn:hover {
    background-color: #6d8774;
  }
}

.bl_commonLineReserveBtn .el_commonLineReserveBtn_icon {
  display: block;
  width: 1.375rem;
  height: auto;
}

.bl_commonLineReserveBtn .el_commonLineReserveBtn_txt {
  color: var(--base);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
}

/* WEB予約ボタン */
.bl_commonWebReserveBtn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding-block: 0.75rem;
  padding-inline: 1.25rem;
  background-color: var(--webBtn);
  transition: background-color 0.3s ease-out;
}
@media (any-hover: hover) {
  .bl_commonWebReserveBtn:hover {
    background-color: #b08b82;
  }
}

.bl_commonWebReserveBtn .el_commonWebReserveBtn_icon {
  display: block;
  width: 0.8125rem;
  height: auto;
}

.bl_commonWebReserveBtn .el_commonWebReserveBtn_txt {
  color: var(--base);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
}

/* 電話番号リンク（アイコン＋番号＋受付時間。背景なしのテキストリンク） */
.bl_commonTelBtn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: opacity 0.3s ease-out;
}
@media (any-hover: hover) {
  .bl_commonTelBtn:hover {
    opacity: 0.7;
  }
}

.bl_commonTelBtn .el_commonTelBtn_icon {
  display: block;
  width: 1.0625rem;
  height: auto;
}

.bl_commonTelBtn .el_commonTelBtn_txtWrapper {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  align-items: flex-end;
}

.bl_commonTelBtn .el_commonTelBtn_num {
  color: var(--base);
  font-family: var(--jaFont);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.05em;
}

.bl_commonTelBtn .el_commonTelBtn_time {
  color: var(--base);
  font-family: var(--jaFont);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
}

/* is-dark: ABOUTセクション通過後のソリッド背景ヘッダー等、明るい背景の上に置く場合 */
.bl_commonTelBtn.is-dark .el_commonTelBtn_num,
.bl_commonTelBtn.is-dark .el_commonTelBtn_time {
  color: var(--txtColor);
}

/*========================================
セクション見出し
========================================*/
/* 共通セクション見出し（英字大見出し＋日本語小ラベル＋区切り線）。TOP主要セクション共通のためコンポーネント化 */
.bl_commonSecTtl {
  width: 100%;
  text-align: center;
}

.bl_commonSecTtl .el_commonSecTtl_en {
  color: var(--accent);
  font-family: var(--enFont);
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.1em;
}
@media screen and (width <= 768px) {
  .bl_commonSecTtl .el_commonSecTtl_en {
    font-size: 1.75rem;
    letter-spacing: 0.1em;
  }
}

.bl_commonSecTtl .el_commonSecTtl_ja {
  margin-top: 0.625rem;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
}
@media screen and (width <= 768px) {
  .bl_commonSecTtl .el_commonSecTtl_ja {
    font-size: 0.75rem;
    letter-spacing: 0.05em;
  }
}

.bl_commonSecTtl .el_commonSecTtl_line {
  position: relative;
  margin-top: 2.375rem;
  width: 100%;
  border-top: 0.0625rem solid var(--accent);
}
@media screen and (width <= 768px) {
  .bl_commonSecTtl .el_commonSecTtl_line {
    margin-top: 1.25rem;
  }
}

.bl_commonSecTtl .el_commonSecTtl_line::before,
.bl_commonSecTtl .el_commonSecTtl_line::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0.375rem;
  height: 0.375rem;
  background-color: var(--accent);
  translate: 0 -50%;
  rotate: 45deg;
}

.bl_commonSecTtl .el_commonSecTtl_line::before {
  left: 0;
}

.bl_commonSecTtl .el_commonSecTtl_line::after {
  right: 0;
}

/* is-white: 濃色・写真背景セクション用（TOPでは未使用箇所だが下層ページ想定で用意） */
.bl_commonSecTtl.is-white .el_commonSecTtl_ja {
  color: var(--base);
}

/* is-small: 下層ページ用の小サイズ版（治療メニュー一覧カンプ: EN 30/22。和文14/12はTOPと同値） */
.bl_commonSecTtl.is-small .el_commonSecTtl_en {
  font-size: 1.875rem;
  letter-spacing: 0.1em;
}
@media screen and (width <= 768px) {
  .bl_commonSecTtl.is-small .el_commonSecTtl_en {
    font-size: 1.375rem;
    letter-spacing: 0.1em;
  }
}

/* ---------- 約物ツメ ----------
   cytori_yakumono()が「」を半角ぶん詰める（読点・句点は対象外）。el_yakuL=開き括弧(左)/el_yakuR=閉じ括弧(右) */
.el_yakuL {
  margin-left: -0.5em;
}

.el_yakuR {
  margin-right: -0.5em;
}

/*========================================
パンくずリスト（inc/breadcrumbs.php / footer.php 先頭で出力）
========================================*/
.bl_breadcrumb {
  width: 100%;
  padding-block: 0 0.625rem;
  background-color: var(--base);
  overflow-x: auto;
}

/* 背景帯は全幅のまま、中身は各セクションの共通インナーと同じ設定で揃える（参照: .bl_topAboutSection_inner） */
.bl_breadcrumb_list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  max-width: 73.75rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.bl_breadcrumb_list_item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

/* リンク色#ADADADは--txtColorの45%合成とほぼ一致するためトークン由来で書く。区切り"/"も同じ45%と判断 */
.bl_breadcrumb_list_item:not(:first-child)::before {
  content: "/";
  display: inline-block;
  color: rgb(from var(--txtColor) r g b/45%);
}

.el_breadcrumb_list_item_link {
  color: rgb(from var(--txtColor) r g b/45%);
  white-space: nowrap;
  transition: opacity 0.3s ease-out;
}
@media (any-hover: hover) {
  .el_breadcrumb_list_item_link:hover {
    opacity: 0.7;
  }
}

.el_breadcrumb_list_item_current {
  color: var(--txtColor);
  white-space: nowrap;
}

/*========================================
下層ページ 大見出し帯（bl_commonSingleTtlContainer）。archive-doctor/archive-treatment/single-doctor/
single-treatmentの既存スタブ（編集対象外）へスタイルのみ実装。4パターンで背景座標が完全一致するため共有化
========================================*/
.bl_commonSingleTtlContainer {
  width: 100%;
  padding-block: 4.375rem;
  background-color: var(--base);
  background-image: url(../img/common/lower-ttl-bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
@media screen and (width <= 768px) {
  .bl_commonSingleTtlContainer {
    padding-block: 3.5625rem;
    background-image: url(../img/common/lower-ttl-bg-sp.png);
  }
}

.bl_commonSingleTtlContainer_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 75rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* パンくず: カンプに表記が無いため既存スタブ構造・_breadcrumb.scssのスタイルはそのまま維持。間隔は後続要素側で確保 */
/* 英字ラベル（DOCTOR / MENU）。和文が見出しのため英字ラベルは p 要素にする */
.bl_commonSingleTtlContainer_en {
  color: var(--accent);
  font-family: var(--enFont);
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.1em;
  text-align: center;
}
@media screen and (width <= 768px) {
  .bl_commonSingleTtlContainer_en {
    font-size: 1.75rem;
    letter-spacing: 0.1em;
  }
}

/* h1: デザインは英字ラベル+和文の2行構成だが、既存スタブ（編集対象外）は和文h1のみのため和文の実測値のみ適用。
英字ラベルを追加する場合はPHP側の編集が必要 */
.bl_commonSingleTtlContainer_ttl {
  margin-top: 0.625rem;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: center;
}
@media screen and (width <= 768px) {
  .bl_commonSingleTtlContainer_ttl {
    font-size: 0.75rem;
    letter-spacing: 0.05em;
  }
}

/*========================================
料金表カード（bl_commonPriceTable）。使用箇所: archive-price.php / single-price.php / price-table.php
⚠治療メニュー記事では本文領域の汎用タイポグラフィ(0,1,1)がclass単体(0,1,0)より勝るため、
内部要素は`.bl_commonPriceTable ○○`(0,2,0)で書いて確実に上回らせる
========================================*/
.bl_commonPriceTable {
  padding-block: 1.25rem;
  padding-inline: 0.875rem;
  border: 0.0625rem solid var(--beige);
  border-radius: 0.625rem;
}
@media screen and (width <= 768px) {
  .bl_commonPriceTable {
    padding-block: 1.25rem;
    padding-inline: 0.875rem;
  }
}

/* 施術(price_wrap)が複数ある場合カード間は30px空ける。隣接セレクタのため先頭カードの余白はラッパー側の責務 */
.bl_commonPriceTable + .bl_commonPriceTable {
  margin-top: 1.875rem;
}

.bl_commonPriceTable .bl_commonPriceTable_ttl {
  margin-top: 0;
  padding-block: 0.125rem;
  padding-left: 1rem;
  border-left: 0.25rem solid var(--grayBeige);
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
@media screen and (width <= 768px) {
  .bl_commonPriceTable .bl_commonPriceTable_ttl {
    font-size: 1.125rem;
    letter-spacing: 0.05em;
  }
}

/* デザインは[h3]gap30[内容]、内容内はgap10。フラットな構造のためh3直後だけ30、以降10にする */
.bl_commonPriceTable .bl_commonPriceTable_menu {
  margin-top: 0.625rem;
}

.bl_commonPriceTable .bl_commonPriceTable_ttl + .bl_commonPriceTable_menu {
  margin-top: 1.875rem;
}

/* h4 メニュータイトル: ■アイコン + テキスト */
.bl_commonPriceTable .bl_commonPriceTable_menu_ttl {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 0;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
@media screen and (width <= 768px) {
  .bl_commonPriceTable .bl_commonPriceTable_menu_ttl {
    font-size: 1rem;
    letter-spacing: 0.05em;
  }
}

.bl_commonPriceTable .bl_commonPriceTable_menu_ttl::before {
  content: "";
  flex-shrink: 0;
  width: 0.625rem;
  height: 0.625rem;
  background-color: var(--grayBeige);
}

.bl_commonPriceTable .bl_commonPriceTable_menu_list {
  margin-top: 0.625rem;
}

/* 金額行: 4カラムgrid[1fr 120 130 100]。1列目=タイトル+明細、2-4列目=補足/料金種別/金額（右寄せ） */
.bl_commonPriceTable .bl_commonPriceTable_row {
  display: grid;
  grid-template-columns: 1fr 7.5rem 8.125rem 6.25rem;
  align-items: start;
  margin-top: 0;
  padding-top: 0.125rem;
  padding-bottom: 0.75rem;
  border-bottom: 0.0625rem solid var(--beige);
  /* SP: 行タイトルは全幅で1行使い、その下に3カラムで金額行が並ぶ */
}
@media screen and (width <= 768px) {
  .bl_commonPriceTable .bl_commonPriceTable_row {
    grid-template-columns: minmax(0, 1fr) auto auto;
    column-gap: 0.5rem;
  }
}

/* 2行目以降は罫線の上下余白を12pxで揃える（1行目のみメニュー見出し直後のため上2px）。カンプ実測値 */
.bl_commonPriceTable .bl_commonPriceTable_row + .bl_commonPriceTable_row {
  padding-top: 0.75rem;
}

.bl_commonPriceTable .bl_commonPriceTable_row_head {
  grid-column: 1/2;
  padding-left: 0.375rem;
}
@media screen and (width <= 768px) {
  .bl_commonPriceTable .bl_commonPriceTable_row_head {
    grid-column: 1/-1;
    padding-bottom: 0.75rem;
  }
}

.bl_commonPriceTable .el_commonPriceTable_row_ttl {
  margin-top: 0;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

/* 明細（・つき箇条書き） */
.bl_commonPriceTable .bl_commonPriceTable_row_detailList {
  margin-top: 0.75rem;
}

.bl_commonPriceTable .el_commonPriceTable_row_detailList_item {
  display: flex;
  margin-top: 0;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
@media screen and (width <= 768px) {
  .bl_commonPriceTable .el_commonPriceTable_row_detailList_item {
    font-size: 0.875rem;
    letter-spacing: 0.05em;
  }
}

.bl_commonPriceTable .el_commonPriceTable_row_detailList_item + .el_commonPriceTable_row_detailList_item {
  margin-top: 0.25rem;
}

.bl_commonPriceTable .el_commonPriceTable_row_detailList_item::before {
  content: "・";
  flex-shrink: 0;
  margin-right: 0.125rem;
}

/* 金額列。1タイトルに複数金額がぶら下がるケースがあるため、display:contentsで外側gridへ直接ぶら下げsubgrid共有 */
.bl_commonPriceTable .bl_commonPriceTable_row_priceList {
  display: contents;
}

.bl_commonPriceTable .bl_commonPriceTable_row_priceList_item {
  display: grid;
  grid-column: 2/5;
  grid-template-columns: subgrid;
  margin-top: 0;
}
@media screen and (width <= 768px) {
  .bl_commonPriceTable .bl_commonPriceTable_row_priceList_item {
    grid-column: 1/-1;
  }
}

/* 1項目に複数金額がぶら下がる場合の行間。カンプ実測12px */
.bl_commonPriceTable .bl_commonPriceTable_row_priceList_item + .bl_commonPriceTable_row_priceList_item {
  margin-top: 0.75rem;
}

/* 補足は左寄せ・列幅内で折り返す（nowrapだと長文が料金種別に重なる）。左端は行タイトルのpadding-left:6pxと揃える */
.bl_commonPriceTable .el_commonPriceTable_row_sub {
  padding-right: 0.375rem;
  padding-left: 0.375rem;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: left;
}
@media screen and (width <= 768px) {
  .bl_commonPriceTable .el_commonPriceTable_row_sub {
    padding-right: 0;
  }
}

.bl_commonPriceTable .el_commonPriceTable_row_view {
  padding-right: 0.375rem;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: right;
}
@media screen and (width <= 768px) {
  .bl_commonPriceTable .el_commonPriceTable_row_view {
    padding-right: 0;
  }
}

.bl_commonPriceTable .el_commonPriceTable_row_num {
  padding-right: 0.375rem;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: right;
  white-space: nowrap;
}
@media screen and (width <= 768px) {
  .bl_commonPriceTable .el_commonPriceTable_row_num {
    padding-right: 0;
  }
}

/* 注釈 */
.bl_commonPriceTable .el_commonPriceTable_caption {
  margin-top: 0.625rem;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

/*========================================
0. ブロック共通: 見出しブロック(h2) → ブロック本体の余白
どのブロックもh2をブロック内に持たない（見出しブロックを編集者が別途置く運用）。
見出しブロック(h2)直後に来たときだけ余白を詰める（詳細度でブロック自身のmargin-top:60pxに勝つ。
underTBの分岐は無いが、詳細度がベースの各ブロックより高いためPC/SPとも常に効く）。
無いと各ブロックのmargin-top:60pxがそのまま効き、h2→中身がカンプ(30/20)より広がってしまう
========================================*/
.bl_treatmentSingleBody_content h2 + .bl_treatmentBlockCase,
.bl_treatmentSingleBody_content h2 + .bl_treatmentBlockPrice,
.bl_treatmentSingleBody_content h2 + .bl_treatmentBlockFaq {
  margin-top: 1.875rem;
}

/* 基本情報だけ見出し→中身が20px（カンプ実値） */
.bl_treatmentSingleBody_content h2 + .bl_treatmentBlockBasicInfo {
  margin-top: 1.25rem;
}

/*========================================
1. 症例写真ブロック（カード本体は_top.scssのbl_commonCaseCardを再利用）
横スクロールで続きを見せる表現のため固定幅カード＋overflow-x:auto（TOPのCAMPAIGN SPと同方式）
========================================*/
/* h2:first-childでmargin-top:0になるため、本文からの間隔はブロック自身のmargin-topで担う */
.bl_treatmentBlockCase {
  margin-top: 3.75rem;
}
@media screen and (width <= 768px) {
  .bl_treatmentBlockCase {
    margin-top: 3.75rem;
  }
}

/* スクロールバー非表示はTOPの.bl_topCampaignSection_listと同方式。
   右端フェードは地が白のためマスクで抜く（.bl_doctorSingleColumnListと同方式） */
.bl_treatmentBlockCase_list {
  display: flex;
  /* 本文幅830pxに対しカード240×3がちょうど収まる値（240×3+55×2=830）。4枚以上でのみ横スクロールになる */
  gap: 3.4375rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
@media screen and (width <= 768px) {
  .bl_treatmentBlockCase_list {
    gap: 1.875rem;
  }
}

/* 右端フェードの基準要素。maskだとカードのボカシオーバーレイ（backdrop-filter+暗幕）ごと薄まり
   右端のカードだけセンシティブ画像の隠しが弱く見えるため、地色グラデーションの被せ（::after）に変更。
   被せ方式ならopacityでなめらかに消せるので、ホバー中（操作中）はフェードを消してTOPと同じ見え方にする */
.bl_treatmentBlockCase_listWrapper {
  position: relative;
}

.bl_treatmentBlockCase_listWrapper::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  right: 0;
  width: 6.25rem;
  background: linear-gradient(to right, transparent, var(--base));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out;
}
@media screen and (width <= 768px) {
  .bl_treatmentBlockCase_listWrapper::after {
    width: clamp(2.34375rem, 11.6822429907vw, 3.125rem);
  }
}

/* フェードは横スクロールが発生しているときだけ（is-scrollFadeはcommon.jsがリスト側に付ける） */
.bl_treatmentBlockCase_listWrapper:has(.is-scrollFade)::after {
  opacity: 1;
}

/* ホバー中はフェードを消す（タッチ端末はホバーが無いのでスクロールの手がかりとして残る） */
@media (any-hover: hover) {
  .bl_treatmentBlockCase_listWrapper:hover::after {
    opacity: 0;
  }
}

.bl_treatmentBlockCase_list::-webkit-scrollbar {
  display: none;
}

.bl_treatmentBlockCase_list_item {
  flex: 0 0 auto;
  width: 15rem;
  scroll-snap-align: start;
}
@media screen and (width <= 768px) {
  .bl_treatmentBlockCase_list_item {
    width: clamp(8.625rem, 42.9906542056vw, 11.5rem);
  }
}

.bl_treatmentBlockCase_btnWrapper {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}
@media screen and (width <= 768px) {
  .bl_treatmentBlockCase_btnWrapper {
    margin-top: 2.5rem;
  }
}

/* 本文タイポグラフィの漏れ防止。.bl_commonCaseCardはTOPと共用（_top.scss、編集対象外）で、
   本文用タグセレクタと詳細度僅差のため負けていた。複合セレクタで上回らせる */
/* gap/タイトル余白は症例一覧・症例記事と同値（_case.scssの .pg_case* 上書きと同じ）。
   TOPだけがgap10・タイトル15で、カンプは症例側・治療メニュー記事側とも3と4 */
.bl_treatmentSingleBody_content .bl_treatmentBlockCase .bl_commonCaseCard_tagList {
  margin-top: 0;
  padding-left: 0;
  gap: 0.1875rem;
  list-style: none;
}

.bl_treatmentSingleBody_content .bl_treatmentBlockCase li {
  margin-top: 0;
}

.bl_treatmentSingleBody_content .bl_treatmentBlockCase .el_commonCaseCard_tagList_tag {
  font-size: 0.625rem;
}

.bl_treatmentSingleBody_content .bl_treatmentBlockCase h3 {
  margin-top: 0.25rem;
  padding-block: 0;
  padding-left: 0;
  border-left: none;
}

.bl_treatmentSingleBody_content .bl_treatmentBlockCase .bl_commonCaseCard_imgWrapper img {
  height: 100%;
  margin-top: 0;
}

/* letter-spacingを0にする理由: TOP由来の注記は「カンプどおり1行」を優先してnowrapにしており、
   PCでは幅244pxとカード240pxを4px超過する（TOPはグリッドなので見た目のはみ出しだけで済む）。
   ここは overflow-x:auto の横スクロール領域なので、その4pxがそのまま実スクロール量になり、
   カード3枚（240×3+gap55×2＝本文幅830）でも僅かに横スクロールしてしまう。
   カード幅・gap・1行表示は変えずに字送り分（0.05em×22字≒11px）を詰めて240px内に収める */
.bl_treatmentSingleBody_content .bl_treatmentBlockCase .bl_commonCaseCard_note p {
  font-size: 0.625rem;
  letter-spacing: 0;
}

/* 見出しの負のmargin-right（末尾の字送り相殺）はSPの折返し対策なので、PCでは戻す。
   負マージンぶんボックスがカード幅を0.8px超え、上の注記と同様に横スクロール量になるため */
.bl_treatmentSingleBody_content .bl_treatmentBlockCase .bl_commonCaseCard_ttl {
  margin-right: 0;
}
@media screen and (width <= 768px) {
  .bl_treatmentSingleBody_content .bl_treatmentBlockCase .bl_commonCaseCard_ttl {
    margin-right: -0.05em;
  }
}

/* 既定の罫線色(--base)はTOPのベージュ地限定で見える色。地が白のこのページではベージュへ上書き
   （_case.scssの同事情と同方針） */
.bl_treatmentBlockCase .bl_commonCaseCard_table_row {
  border-bottom-color: var(--beige);
}

/*========================================
2. 料金表ブロック
既存フィールド price_wrap > price_table > amount-table の3階層をそのまま使う
========================================*/
.bl_treatmentBlockPrice {
  margin-top: 3.75rem;
}
@media screen and (width <= 768px) {
  .bl_treatmentBlockPrice {
    margin-top: 3.75rem;
  }
}

.bl_treatmentBlockPrice .bl_commonPriceTable + .bl_commonPriceTable {
  margin-top: 3.75rem;
}
@media screen and (width <= 768px) {
  .bl_treatmentBlockPrice .bl_commonPriceTable + .bl_commonPriceTable {
    margin-top: 3.75rem;
  }
}

/* 料金表本体のスタイルは_priceTable.scssに一本化済み。本文タイポグラフィ漏れもそちら側で解消済み */
/*========================================
3. よくあるご質問ブロック
本文汎用のdetails/summaryは.wp-block-details（WP標準「詳細」ブロック）限定にスコープ済みのため、
このブロックには当たらない。残る打ち消しは ul / li / p のタグセレクタ由来のものだけ
========================================*/
.bl_treatmentBlockFaq {
  margin-top: 3.75rem;
}
@media screen and (width <= 768px) {
  .bl_treatmentBlockFaq {
    margin-top: 3.75rem;
  }
}

/* 本文用の汎用ulスタイル（list-style:disc等）をul/liタグセレクタ上書きで打ち消す */
.bl_treatmentSingleBody_content .bl_treatmentBlockFaq_list {
  margin-top: 0;
  padding-left: 0;
  list-style: none;
}

.bl_treatmentSingleBody_content .bl_treatmentBlockFaq_list_item {
  /* 項目は枠線ボックスではなく下罫線1本のみ。項目間のmarginは無し（罫線が接する） */
  margin-top: 0;
  padding: 0;
  border-bottom: 0.0625rem solid rgb(from var(--grayBeige) r g b/30%);
  transition: background-color 0.3s ease-out;
}

/* 開閉時の背景色フェード。罫線は<li>側が正のため<details>には持たせない */
.bl_treatmentSingleBody_content .bl_treatmentBlockFaq_list_item_details {
  transition: background-color 0.3s ease-out;
}

/* 開いた項目の背景色。[open]は<details>側に付く。開閉判定はis-collapsed側で行う（後述）。
   カンプは罫線と同じ--grayBeigeの10%（罫線は30%） */
.bl_treatmentSingleBody_content .bl_treatmentBlockFaq_list_item_details[open] {
  background-color: rgb(from var(--grayBeige) r g b/10%);
}

/* 開閉トランジション（.bl_recruitAccordionと同方式）。common.jsがopenを常時付与しis-collapsedで
   grid-template-rows 0fr⇄1frを遷移。JS無効時はネイティブ開閉にフォールバック */
.bl_treatmentSingleBody_content .bl_treatmentBlockFaq_list_item_details.is-collapsed {
  background-color: transparent;
}

/* overflow:hiddenは縮小中の中身クリップに必須 */
.bl_treatmentSingleBody_content .bl_treatmentBlockFaq_list_item_content {
  display: grid;
  grid-template-rows: 1fr;
  overflow: hidden;
  transition: grid-template-rows 0.4s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .bl_treatmentSingleBody_content .bl_treatmentBlockFaq_list_item_content {
    transition: none;
  }
}

.bl_treatmentSingleBody_content .bl_treatmentBlockFaq_list_item_details.is-collapsed .bl_treatmentBlockFaq_list_item_content {
  grid-template-rows: 0fr;
}

/* gridトラックの縮小を許可するためにmin-height: 0が必要 */
.bl_treatmentSingleBody_content .bl_treatmentBlockFaq_list_item_content > * {
  min-height: 0;
}

.bl_treatmentSingleBody_content .el_treatmentBlockFaq_list_item_q {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding-block: 1.25rem;
  padding-inline: 0.625rem 3.125rem;
  list-style: none;
  cursor: pointer;
  /* SPカンプは質問文が3〜4行になるためQマークと開閉アイコンが1行目に上揃え（PCカンプは中央揃えのまま） */
}
@media screen and (width <= 768px) {
  .bl_treatmentSingleBody_content .el_treatmentBlockFaq_list_item_q {
    align-items: flex-start;
    gap: 0.8125rem;
    padding-block: 1.25rem;
    padding-inline: 0.375rem 2.4375rem;
  }
}

/* 開いた項目のみQ下に罫線。閉時は<li>の下罫線と重なるため出さない（insetのbox-shadowで描く） */
.bl_treatmentSingleBody_content .bl_treatmentBlockFaq_list_item_details:not(.is-collapsed) .el_treatmentBlockFaq_list_item_q {
  box-shadow: inset 0 -0.0625rem 0 rgb(from var(--grayBeige) r g b/30%);
}

/* 開閉アイコン: 閉＝「＋」／開＝横棒のみ。縦棒(::after)をopenで消して＋→－に切り替える */
.bl_treatmentSingleBody_content .el_treatmentBlockFaq_list_item_q::before,
.bl_treatmentSingleBody_content .el_treatmentBlockFaq_list_item_q::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.625rem;
  width: 1.25rem;
  height: 0.125rem;
  background-color: var(--txtColor);
  transform: translateY(-50%);
  /* SPは上揃えのため50%基準を捨て、Qマーク（fs24 × lh1.5 = 行高36）の行ボックス中心に合わせる。
     基準位置 = summary天端 + padding-top + 36/2（SPカンプ実測: 天端+38px） */
}
@media screen and (width <= 768px) {
  .bl_treatmentSingleBody_content .el_treatmentBlockFaq_list_item_q::before,
  .bl_treatmentSingleBody_content .el_treatmentBlockFaq_list_item_q::after {
    top: calc(clamp(0.9375rem, 4.6728971963vw, 1.25rem) + 1.125rem);
  }
}

.bl_treatmentSingleBody_content .el_treatmentBlockFaq_list_item_q::after {
  transform: translateY(-50%) rotate(90deg);
  transition: opacity 0.3s ease-out;
}

.bl_treatmentSingleBody_content .bl_treatmentBlockFaq_list_item_details[open] .el_treatmentBlockFaq_list_item_q::after {
  opacity: 0;
}

/* openは常時付与のため、＋／－の切り替えもis-collapsed基準で統一する */
.bl_treatmentSingleBody_content .bl_treatmentBlockFaq_list_item_details.is-collapsed .el_treatmentBlockFaq_list_item_q::after {
  opacity: 1;
}

/* Q/Aのマーク（旧デザインは明朝。フォント統一で本文と同じ var(--jaFont) に変更） */
.el_treatmentBlockFaq_list_item_q_mark {
  flex-shrink: 0;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
}

.el_treatmentBlockFaq_list_item_q_txt {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.bl_treatmentSingleBody_content .bl_treatmentBlockFaq_list_item_a {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
  margin-top: 0;
  padding-block: 1.25rem;
  padding-inline: 0.625rem 3.125rem;
  /* paddingはgrid-template-rows:0frでも潰れないため、閉時はpadding-blockも0へ遷移させる（同recruit対処） */
  transition: padding-top 0.4s ease-out, padding-bottom 0.4s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .bl_treatmentSingleBody_content .bl_treatmentBlockFaq_list_item_a {
    transition: none;
  }
}
@media screen and (width <= 768px) {
  .bl_treatmentSingleBody_content .bl_treatmentBlockFaq_list_item_a {
    gap: 0.8125rem;
    padding-block: 1.25rem;
    padding-inline: 0.375rem 2.4375rem;
  }
}

.bl_treatmentSingleBody_content .bl_treatmentBlockFaq_list_item_details.is-collapsed .bl_treatmentBlockFaq_list_item_a {
  padding-block: 0;
}

.el_treatmentBlockFaq_list_item_a_mark {
  flex-shrink: 0;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.5;
}

/* <p>タグは本文p(0,1,1)にclass単体(0,1,0)で負け、margin-top漏れで天端がズレるため祖先を足して明示 */
.bl_treatmentSingleBody_content .el_treatmentBlockFaq_list_item_a_txt {
  margin-top: 0;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

/*========================================
4. 基本情報ブロック
dl/dt/dd構成。PC: dt幅固定(200)+dd可変の2カラムgrid、SP: 1カラムに積む
========================================*/
.bl_treatmentBlockBasicInfo {
  margin-top: 3.75rem;
}
@media screen and (width <= 768px) {
  .bl_treatmentBlockBasicInfo {
    margin-top: 3.75rem;
  }
}

/* カンプの列間はgap0。column-gapを足すとddの開始位置がカンプよりずれるため入れない */
.bl_treatmentBlockBasicInfo_list_row {
  display: grid;
  grid-template-columns: 12.5rem 1fr;
  padding-block: 0.75rem;
  border-bottom: 0.0625rem solid var(--beige);
}
@media screen and (width <= 768px) {
  .bl_treatmentBlockBasicInfo_list_row {
    grid-template-columns: 1fr;
    row-gap: 0.5rem;
  }
}

.bl_treatmentBlockBasicInfo_list_row dt {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.bl_treatmentBlockBasicInfo_list_row dd {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

/* dd内の複数<p>間の余白（副作用・リスク行のみ複数<p>を持つため一律この値でよい） */
.bl_treatmentBlockBasicInfo_list_row dd p + p {
  margin-top: 0.25rem;
}

/* 注意事項ブロック。カンプでは「dtが空の別li」（PCのみ罫線あり、SPは段落間余白のみ）。
   空dtでdlの意味構造を壊さないよう、dd内ラッパーをdt列ぶん左へ広げて同じ見た目にする */
.bl_treatmentBlockBasicInfo_cautions {
  margin-top: 0.75rem;
  margin-left: -12.5rem;
  padding-top: 0.75rem;
  padding-left: 12.5rem;
  border-top: 0.0625rem solid var(--beige);
}
@media screen and (width <= 768px) {
  .bl_treatmentBlockBasicInfo_cautions {
    margin-top: 0.25rem;
    margin-left: 0;
    padding-top: 0;
    padding-left: 0;
    border-top: none;
  }
}

/* 本文未入力でラッパーがddの先頭に来た場合、直前行の罫線と二重になるため罫線・インデントを落とす */
.bl_treatmentBlockBasicInfo_cautions:first-child {
  margin-top: 0;
  margin-left: 0;
  padding-top: 0;
  padding-left: 0;
  border-top: none;
}

/* ラッパー先頭のsubTtlは上余白を罫線側（padding-top）で持つため打ち消す */
.bl_treatmentSingleBody_content .bl_treatmentBlockBasicInfo_cautions > :first-child {
  margin-top: 0;
}

/* 注意事項ブロックで終わる行は、カンプに合わせて下罫線を持たず下余白も詰める */
.bl_treatmentBlockBasicInfo_list_row:last-child:has(.bl_treatmentBlockBasicInfo_cautions) {
  padding-bottom: 0.125rem;
  border-bottom: none;
}
@media screen and (width <= 768px) {
  .bl_treatmentBlockBasicInfo_list_row:last-child:has(.bl_treatmentBlockBasicInfo_cautions) {
    padding-bottom: 0;
  }
}

/* <p>タグは本文pに詳細度で負けるため祖先を足して明示。太さはw400（dt項目名のみw500） */
.bl_treatmentSingleBody_content .el_treatmentBlockBasicInfo_subTtl {
  margin-top: 0.25rem;
  font-weight: 400;
}

/* マーカーはdiscではなく「・」グリフ（注記リストのnotesと同じspan方式） */
.bl_treatmentBlockBasicInfo_dayList {
  margin-top: 0.25rem;
  list-style: none;
}

.bl_treatmentBlockBasicInfo_dayList li {
  display: flex;
  gap: 0.125rem;
}

.el_treatmentBlockBasicInfo_dayList_mark {
  flex-shrink: 0;
}

.bl_treatmentBlockBasicInfo_dayList li + li {
  margin-top: 0.25rem;
}

.bl_treatmentBlockBasicInfo_notes li {
  display: flex;
  gap: 0.125rem;
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.bl_treatmentBlockBasicInfo_notes li + li {
  margin-top: 0.25rem;
}

.el_treatmentBlockBasicInfo_notes_mark {
  flex-shrink: 0;
}

/*========================================
フォーカスビジブル（_header.scss/_footer.scssと同方式）。bl_commonCaseCard本体は編集不可のためここで付与
========================================*/
.bl_treatmentBlockCase .bl_commonCaseCard_blurOverlay:focus-visible,
.bl_treatmentBlockCase_btnWrapper .bl_commonBtn:focus-visible,
.bl_treatmentSingleBody_content .el_treatmentBlockFaq_list_item_q:focus-visible {
  outline: 0.125rem solid var(--accent);
  outline-offset: 0.125rem;
}

/*========================================
ページャー（bl_commonPagination）。前後ボタンはフッターのスケジュール送りボタンと同一意匠
（同じ矢印SVGをmask-imageで使い、hover/activeの反転挙動も揃えている）
========================================*/
.bl_commonPagination {
  margin-top: 5rem;
}
@media screen and (width <= 768px) {
  .bl_commonPagination {
    margin-top: 3.75rem;
  }
}

.bl_commonPagination_list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.875rem;
  /* 中間ページは「1 … 5 … 13」で項目が7個まで増える。SP帯は gap30 のままだと
     320px で 32px はみ出すため詰める（項目数自体は end_size/mid_size で抑制済み） */
}
@media screen and (width <= 768px) {
  .bl_commonPagination_list {
    gap: 1.375rem;
  }
}

/* 前後の矢印ボタンだけ、数字ブロックとの間隔を50pxにする */
.el_commonPagination_item__arrow:first-child {
  margin-right: 1.25rem;
}
@media screen and (width <= 768px) {
  .el_commonPagination_item__arrow:first-child {
    margin-right: 0.75rem;
  }
}

.el_commonPagination_item__arrow:last-child {
  margin-left: 1.25rem;
}
@media screen and (width <= 768px) {
  .el_commonPagination_item__arrow:last-child {
    margin-left: 0.75rem;
  }
}

.bl_commonPagination .page-numbers {
  display: block;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  transition: opacity 0.3s ease-out;
}
@media (any-hover: hover) {
  .bl_commonPagination .page-numbers:hover {
    opacity: 0.7;
  }
}

/* 現在ページ: アクセントカラー + 下線 */
.bl_commonPagination .page-numbers.current {
  padding-inline: 0.125rem;
  padding-bottom: 0.125rem;
  border-bottom: 0.0625rem solid var(--accent);
  color: var(--accent);
}

.bl_commonPagination .page-numbers.dots {
  cursor: default;
}

.bl_commonPagination .page-numbers.prev,
.bl_commonPagination .page-numbers.next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  height: 1.875rem;
  border: 0.0625rem solid var(--txtColor);
  border-radius: 0.9375rem;
  background-color: transparent;
  transition: background-color 0.3s ease-out;
}
@media (any-hover: hover) {
  .bl_commonPagination .page-numbers.prev:hover,
  .bl_commonPagination .page-numbers.next:hover {
    opacity: 1;
    background-color: var(--txtColor);
  }
}
.bl_commonPagination .page-numbers.prev:active,
.bl_commonPagination .page-numbers.next:active {
  background-color: var(--txtColor);
}

/* 前後ボタンは常設。押せないページ（先頭の「前へ」/最終の「次へ」）は薄く表示しクリック・ホバーを無効にする */
.bl_commonPagination .page-numbers.is-disabled {
  opacity: 0.3;
  pointer-events: none;
}

.el_commonPagination_arrowIcon {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--txtColor);
  transition: background-color 0.3s ease-out;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 3.75rem 1.875rem;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 3.75rem 1.875rem;
}

.el_commonPagination_arrowIcon_prev {
  mask-image: url(../img/common/btn-arrow-left.svg);
  -webkit-mask-image: url(../img/common/btn-arrow-left.svg);
}

.el_commonPagination_arrowIcon_next {
  mask-image: url(../img/common/btn-arrow-right.svg);
  -webkit-mask-image: url(../img/common/btn-arrow-right.svg);
}

@media (any-hover: hover) {
  .bl_commonPagination .page-numbers.prev:hover .el_commonPagination_arrowIcon,
  .bl_commonPagination .page-numbers.next:hover .el_commonPagination_arrowIcon {
    background-color: var(--base);
  }
}

.bl_commonPagination .page-numbers.prev:active .el_commonPagination_arrowIcon,
.bl_commonPagination .page-numbers.next:active .el_commonPagination_arrowIcon {
  background-color: var(--base);
}

.bl_commonPagination .page-numbers:focus-visible {
  outline: 0.125rem solid var(--accent);
  outline-offset: 0.125rem;
}

/*========================================
SP固定 予約バー（bl_commonSpReserveBar）。SPカンプ全ページで最下部固定の帯として描かれているため実装。
意匠・寸法はTOPのbl_topFvSection_reserveList（_top.scss）と同一。TOPは既存実装のためこのコンポーネントは読まない
========================================*/
.bl_commonSpReserveBar {
  display: none;
}
@media screen and (width <= 768px) {
  .bl_commonSpReserveBar {
    display: flex;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 90;
    align-items: stretch;
    gap: 0.3125rem;
    padding: 0.3125rem;
    /* 外枠5px・ボタン間5pxを不透明にする。地が無いと背後（フッターRESERVE帯の写真等）が隙間から覗く */
    background-color: var(--base);
  }
}

/* TOPのbl_topFvSection_reserveListと1:1で揃える。打ち消しが無いと_reset.scssのimg{width:100%}でバーが10px高くなる */
.bl_commonSpReserveBar_telBtn {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding-block: 0.75rem;
  padding-inline: 1rem;
  /* カンプ実値: 塗り#FCFCFC + 線#C9BC9C 1px。--baseで囲うと枠が見えなくなる */
  border: 0.0625rem solid #c9bc9c;
  background-color: var(--base);
  transition: opacity 0.3s ease-out;
}
@media (any-hover: hover) {
  .bl_commonSpReserveBar_telBtn:hover {
    opacity: 0.7;
  }
}

.bl_commonSpReserveBar_telBtn img {
  display: block;
  flex-shrink: 0;
  width: clamp(0.7rem, 3.738317757vw, 1rem);
  height: auto;
}

.el_commonSpReserveBar_telBtn_txt {
  color: #b9a574;
  font-family: var(--jaFont);
  font-size: clamp(0.7rem, 3.738317757vw, 1rem);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

/* LINE / WEB は共通ボタン（_parts.scss）をそのまま使う。バー内では3等分に伸ばす */
.bl_commonSpReserveBar .bl_commonLineReserveBtn,
.bl_commonSpReserveBar .bl_commonWebReserveBtn {
  flex: 1 1 0;
  justify-content: center;
  width: auto;
  min-width: 0;
  gap: 0.625rem;
  padding-inline: 1.25rem;
}

/* アイコンはこのバー専用値（LINE19/WEB11）。_parts.scss共通値のままだと2行折返しでバーが46→56pxに膨らむ */
.bl_commonSpReserveBar .el_commonLineReserveBtn_icon {
  width: 1.1875rem;
}

.bl_commonSpReserveBar .el_commonWebReserveBtn_icon {
  width: 0.6875rem;
}

/* 3等分の合計がボタン内幅よりわずかに広いため、nowrapで1行を維持する（TOPのFVバーと同じ対処） */
.bl_commonSpReserveBar .el_commonLineReserveBtn_txt,
.bl_commonSpReserveBar .el_commonWebReserveBtn_txt,
.bl_commonSpReserveBar .el_commonSpReserveBar_telBtn_txt {
  font-size: clamp(0.7rem, 3.738317757vw, 1rem);
  white-space: nowrap;
}

/*========================================
記事系ページ共通コンポーネント（キャンペーン／コラム 記事・一覧で共有）
目次: 1.大見出し帯 2.本文タイポグラフィ 3.記事シェア 4.記事送り 5.キャンペーンカード 6.本文の目次（INDEX）
========================================*/
/*========================================
1. 記事ページ大見出し帯（bl_commonPostTtl）
背景はbl_commonSingleTtlContainerと共通。同意匠のbl_treatmentSingleTtl/bl_caseSingleTtlは別実装のため触れない
========================================*/
/* 帯は全ブリード背景のため幅を絞れず、内側にインナーを設けて共通インナー方式にする */
.bl_commonPostTtl {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  min-height: 12.5rem;
  padding-block: 1.875rem;
  background-color: var(--base);
  background-image: url(../img/common/lower-ttl-bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
@media screen and (width <= 768px) {
  .bl_commonPostTtl {
    min-height: 9.375rem;
    background-image: url(../img/common/lower-ttl-bg-sp.png);
  }
}

.bl_commonPostTtl_inner {
  width: 100%;
  max-width: 73.75rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media screen and (width <= 768px) {
  .bl_commonPostTtl_inner {
    padding-inline: 1.25rem;
  }
}

.el_commonPostTtl_date {
  display: block;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
}
@media screen and (width <= 768px) {
  .el_commonPostTtl_date {
    font-size: 0.75rem;
    letter-spacing: 0.05em;
  }
}

/* カテゴリーピル: コラムカードの .el_commonColumnCard_catList_item と同じ意匠 */
.bl_commonPostTtl_catList {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.375rem;
}

.el_commonPostTtl_catList_item {
  padding-block: 0;
  padding-inline: 0.3125rem 0.375rem;
  border: 0.025rem solid var(--txtColor);
  border-radius: 0.625rem;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}

.bl_commonPostTtl_tagList {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.375rem;
}

.el_commonPostTtl_tagList_item {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}

.el_commonPostTtl_ttl {
  margin-top: 0.625rem;
  color: var(--accent);
  font-family: var(--jaFont);
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.05em;
}
@media screen and (width <= 768px) {
  .el_commonPostTtl_ttl {
    font-size: 1.75rem;
    line-height: 1.2;
  }
}

/*========================================
2. 本文（ブロックエディタ自由記入領域）のタイポグラフィ
========================================*/
.bl_commonArticleBody_content > * + * {
  margin-top: 1.25rem;
}

/* 段落。目次の見出し（el_commonArticleIndex_ttl）は独自指定のため除外（§6） */
.bl_commonArticleBody_content p:not([class*=commonArticleIndex]) {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.bl_commonArticleBody_content h2 {
  margin-top: 5rem;
  /* 目次（INDEX）アンカー着地時の固定ヘッダー逃げ（treatment記事と同値） */
  scroll-margin-top: 6.25rem;
  padding-block: 0.375rem;
  padding-inline: 1.25rem;
  background-color: var(--beige);
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1.625rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
@media screen and (width <= 768px) {
  .bl_commonArticleBody_content h2 {
    padding-inline: 0.75rem;
    font-size: 1.5rem;
    line-height: 1.5;
    scroll-margin-top: 5rem;
  }
}

.bl_commonArticleBody_content h2:first-child {
  margin-top: 0;
}

.bl_commonArticleBody_content h3 {
  margin-top: 3.125rem;
  padding-block: 0.125rem;
  padding-left: 1rem;
  border-left: 0.25rem solid var(--grayBeige);
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
@media screen and (width <= 768px) {
  .bl_commonArticleBody_content h3 {
    font-size: 1.125rem;
    line-height: 1.5;
  }
}

/* h4: 先頭に小さい■マーカー（治療メニュー記事・症例記事と同意匠） */
.bl_commonArticleBody_content h4 {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 2.5rem;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  /* h4 だけ h3(fs18)とは別値でfs16（カンプSP実値） */
}
@media screen and (width <= 768px) {
  .bl_commonArticleBody_content h4 {
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 0.05em;
  }
}

.bl_commonArticleBody_content h4::before {
  content: "";
  flex-shrink: 0;
  width: 0.625rem;
  height: 0.625rem;
  background-color: var(--grayBeige);
}

/* 見出し同士が隣り合う時は従来の余白を維持(拡大余白は文章→見出しの間だけに効かせる) */
.bl_commonArticleBody_content :is(h2, h3, h4) + h2 {
  margin-top: 3.75rem;
}

.bl_commonArticleBody_content :is(h2, h3, h4) + h3 {
  margin-top: 1.875rem;
}

.bl_commonArticleBody_content :is(h2, h3, h4) + h4 {
  margin-top: 1.25rem;
}

/* h4直後の段落は見出しとのグルーピングを密にする */
.bl_commonArticleBody_content h4 + p {
  margin-top: 0.625rem;
}

/* リスト。目次（bl_commonArticleIndex_list）は独自レイアウトのため除外（§6） */
.bl_commonArticleBody_content ul:not([class*=commonArticleIndex]),
.bl_commonArticleBody_content ol:not([class*=commonArticleIndex]) {
  margin-top: 1.25rem;
  counter-reset: cytoriArticleOl;
  list-style: none;
}

.bl_commonArticleBody_content li:not([class*=commonArticleIndex]) {
  position: relative;
  padding-left: 1.125rem;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.bl_commonArticleBody_content li + li:not([class*=commonArticleIndex]) {
  margin-top: 0.25rem;
}

.bl_commonArticleBody_content ul:not([class*=commonArticleIndex]) > li::before {
  content: "・";
  position: absolute;
  top: 0;
  left: 0;
}

/* 番号は「1)」（ブラウザ既定の "1." ではなく独自マーカー） */
.bl_commonArticleBody_content ol:not([class*=commonArticleIndex]) > li::before {
  counter-increment: cytoriArticleOl;
  content: counter(cytoriArticleOl) ")";
  position: absolute;
  top: 0;
  left: 0;
}

/* 目次の項目リンク（el_commonArticleIndex_list_item_link）は独自指定のため除外（§6） */
.bl_commonArticleBody_content a:not([class*=commonArticleIndex]):not(.wp-block-button__link) {
  color: #3b6bab;
  text-decoration: underline;
  transition: opacity 0.3s ease-out;
}
@media (any-hover: hover) {
  .bl_commonArticleBody_content a:not([class*=commonArticleIndex]):not(.wp-block-button__link):hover {
    opacity: 0.7;
  }
}

/* 強調: accent 50% のマーカー（文字の下半分に重なる） */
.bl_commonArticleBody_content strong,
.bl_commonArticleBody_content b {
  background: linear-gradient(transparent 60%, rgb(from var(--accent) r g b/50%) 60%);
  font-weight: 400;
}

.bl_commonArticleBody_content img {
  display: block;
  max-width: 100%;
  height: auto;
}

.bl_commonArticleBody_content figure {
  margin-top: 1.875rem;
}

.bl_commonArticleBody_content figcaption {
  margin-top: 0.625rem;
  color: #000;
  font-family: var(--jaFont);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

/* 注釈（※行）。WPコアが.has-small-font-sizeに!important付きでfont-sizeを出力するため!important必須 */
.bl_commonArticleBody_content small,
.bl_commonArticleBody_content .has-small-font-size {
  display: block;
  padding-left: 1rem;
  font-size: 0.875rem !important;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-indent: -1rem;
}

/* 表（項目 / 内容の2列）。SPは2カラムを維持せず縦積みにし、罫線は行の下だけに入れる。 */
.bl_commonArticleBody_content table {
  width: 100%;
  border-collapse: collapse;
}
@media screen and (width <= 768px) {
  .bl_commonArticleBody_content table {
    display: block;
  }
}

@media screen and (width <= 768px) {
  .bl_commonArticleBody_content tbody,
  .bl_commonArticleBody_content tr {
    display: block;
    width: 100%;
  }
}

/* 罫線は SP ではセルではなく行に持たせる（縦積みでラベルと内容の間に線が入るのを防ぐ） */
@media screen and (width <= 768px) {
  .bl_commonArticleBody_content tr {
    padding-block: 0.75rem;
    border-bottom: 0.0625rem solid var(--beige);
  }
}

/* コアの .wp-block-table td,th{border:1px solid;padding:.5em} が common.css より後に出力されるため、
   セレクタに table を足して詳細度で上回らせる（.class + 要素2 > .class + 要素1）。
   border / padding はショートハンドで打ち消してから必要な辺だけ指定する */
.bl_commonArticleBody_content table th,
.bl_commonArticleBody_content table td {
  padding-block: 0.75rem;
  padding-inline: 0;
  border: none;
  border-bottom: 0.0625rem solid var(--beige);
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: left;
  vertical-align: top;
}
@media screen and (width <= 768px) {
  .bl_commonArticleBody_content table th,
  .bl_commonArticleBody_content table td {
    display: block;
    width: 100%;
    padding-block: 0;
    border-bottom: none;
  }
}

.bl_commonArticleBody_content table th,
.bl_commonArticleBody_content table td:first-child {
  width: 12.5rem;
  font-weight: 700;
}
@media screen and (width <= 768px) {
  .bl_commonArticleBody_content table th,
  .bl_commonArticleBody_content table td:first-child {
    width: 100%;
    /* SP縦積み時、ラベル行と内容行の間隔を確保 */
    padding-bottom: 0.75rem;
  }
}

.bl_commonArticleBody_content table td {
  font-weight: 400;
}

/* ボタンブロックはテーマ側で意匠を付けずWP標準のまま（編集者が自由に設定する運用）。
   全記事共通でホバーの半透明だけ付ける */
.wp-block-button__link {
  transition: opacity 0.3s ease-out;
}
@media (any-hover: hover) {
  .wp-block-button__link:hover {
    opacity: 0.7;
  }
}

/*========================================
3. 記事シェア（bl_commonShare）
========================================*/
.bl_commonShare {
  margin-top: 3.75rem;
  padding-block: 1.25rem;
  padding-inline: 3.125rem;
  border-radius: 0.625rem;
  background-color: rgb(from var(--beige) r g b/30%);
}
@media screen and (width <= 768px) {
  .bl_commonShare {
    padding-inline: 1.25rem;
  }
}

.el_commonShare_ttl {
  padding-bottom: 0.625rem;
  border-bottom: 0.0625rem solid var(--beige);
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
}

/* SNSアイコン群とコピーボタンの並び。SPはボタンが下段に落ちる（カンプ実測: 段間10px） */
.bl_commonShare_body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.875rem;
  margin-top: 1.25rem;
}
@media screen and (width <= 768px) {
  .bl_commonShare_body {
    display: block;
  }
}

.bl_commonShare_list {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.875rem;
}

.el_commonShare_list_icon {
  display: block;
  transition: opacity 0.3s ease-out;
}
@media (any-hover: hover) {
  .el_commonShare_list_icon:hover {
    opacity: 0.7;
  }
}
.el_commonShare_list_icon:focus-visible {
  outline: 0.125rem solid var(--accent);
  outline-offset: 0.125rem;
}

/* カンプ実値の等倍で並べる（Facebook 38×38 / LINE 38×36 / X 30×32・縦は中央揃え） */
.el_commonShare_list_icon.is-facebook,
.el_commonShare_list_icon.is-line {
  width: 2.375rem;
}

.el_commonShare_list_icon.is-x {
  width: 1.875rem;
}

.el_commonShare_list_icon img {
  display: block;
  width: 100%;
  height: auto;
}

.el_commonShare_copyBtn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  width: 16.875rem;
  max-width: 100%;
  /* 外形44px = border1×2 + アイコン/文字16 + padding-block13×2。サイズ変更時はこの式から逆算 */
  padding-block: 0.8125rem;
  padding-inline: 1.25rem;
  border: 0.0625rem solid var(--txtColor);
  background-color: transparent;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background-color 0.3s ease-out, border-color 0.3s ease-out, color 0.3s ease-out;
}
@media screen and (width <= 768px) {
  .el_commonShare_copyBtn {
    margin-top: 0.625rem;
    margin-inline: auto;
  }
}
@media (any-hover: hover) {
  .el_commonShare_copyBtn:hover {
    border-color: var(--accent);
    background-color: var(--accent);
    color: var(--white);
  }
}
.el_commonShare_copyBtn:focus-visible {
  outline: 0.125rem solid var(--accent);
  outline-offset: 0.125rem;
}

.el_commonShare_copyBtn_icon {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1rem;
  background-color: currentcolor;
  mask-image: url(../img/common/icon-link.svg);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-image: url(../img/common/icon-link.svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

/*========================================
4. 記事送り（bl_commonPostNav）
========================================*/
.bl_commonPostNav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: 6.25rem;
  /* SPカンプ(428)実測: 上段=前/次を左右端に160pxで配置（列間68px）／下段=一覧270pxを中央、段間30px。
     68pxはコンテナ幅から space-between で生まれるため、column-gapは
     428px未満で列が160pxを割り込まないための最小値として持たせる */
}
@media screen and (width <= 768px) {
  .bl_commonPostNav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 10rem));
    justify-content: space-between;
    column-gap: 0.625rem;
    row-gap: 1.875rem;
    margin-top: 5rem;
  }
}

.el_commonPostNav_link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 矢印と文字の間隔は space-between が作る（カンプ実測 PC42px / SP22px）。
     gapは幅が詰まったときに両者が接触しないための最小値 */
  gap: 0.625rem;
  width: 11.25rem;
  /* 外形44px = border1×2 + 文字16 + padding-block13×2（.bl_commonShare のボタンと同じ計算） */
  padding-block: 0.8125rem;
  padding-inline: 1.25rem;
  border: 0.0625rem solid var(--txtColor);
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
  transition: background-color 0.3s ease-out, border-color 0.3s ease-out, color 0.3s ease-out;
  /* SPもカンプどおり padding-inline 20。外形はグリッドの列幅に従わせる */
}
@media screen and (width <= 768px) {
  .el_commonPostNav_link {
    width: 100%;
  }
}
@media (any-hover: hover) {
  .el_commonPostNav_link:hover {
    border-color: var(--accent);
    background-color: var(--accent);
    color: var(--white);
  }
}
.el_commonPostNav_link:focus-visible {
  outline: 0.125rem solid var(--accent);
  outline-offset: 0.125rem;
}

@media screen and (width <= 768px) {
  .el_commonPostNav_link__prev {
    grid-column: 1;
    grid-row: 1;
  }
}

@media screen and (width <= 768px) {
  .el_commonPostNav_link__next {
    grid-column: 2;
    grid-row: 1;
  }
}

.el_commonPostNav_link__list {
  width: 16.875rem;
  justify-content: center;
}
@media screen and (width <= 768px) {
  .el_commonPostNav_link__list {
    grid-column: 1/-1;
    grid-row: 2;
    justify-self: center;
    width: 16.875rem;
    max-width: 100%;
  }
}

/* カンプ実測サイズ（PC/SP共通 12×8） */
.el_commonPostNav_arrow {
  flex-shrink: 0;
  width: 0.75rem;
  height: 0.5rem;
}

.el_commonPostNav_arrow svg {
  display: block;
  width: 100%;
  height: 100%;
}

.el_commonPostNav_arrow__prev svg {
  transform: scaleX(-1);
}

/* 前後の記事が無いときはプレースホルダーで幅だけ保持（3ボタンの位置を崩さない） */
.el_commonPostNav_placeholder {
  width: 11.25rem;
}
@media screen and (width <= 768px) {
  .el_commonPostNav_placeholder {
    display: none;
  }
}

/*========================================
5. キャンペーンカード（bl_commonCampaignCard）
TOP（bl_topCampaignSection）とキャンペーン一覧で共有する。
========================================*/
.bl_commonCampaignCard {
  display: block;
}

.bl_commonCampaignCard_imgWrapper {
  display: block;
  width: 100%;
  aspect-ratio: 240/300;
  background-color: var(--beige);
  overflow: hidden;
}

.bl_commonCampaignCard_imgWrapper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* アイキャッチ未設定時: 地色にロゴ透かしを中央配置 */
.bl_commonCampaignCard_imgWrapper.is-noImage {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 幅は枠に対する比率で持たせる（カンプ実測 173/240）。rem固定にするとSP428で枠177pxに対し
   ロゴ173pxとなり左右2pxしか残らずベタ付きになる */
.bl_commonCampaignCard_imgWrapper.is-noImage img {
  width: 72.0833333333%;
  height: auto;
  object-fit: contain;
}

.el_commonCampaignCard_date {
  display: block;
  margin-top: 0.5rem;
  padding-top: 0.625rem;
  border-top: 0.0625rem solid var(--grayBeige);
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
}

/* 2行超で省略記号（タイトル長でカードの高さが揃わなくなるのを防止） */
.el_commonCampaignCard_ttl {
  display: -webkit-box;
  margin-top: 0.625rem;
  overflow: hidden;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.bl_commonCampaignCard_link {
  display: block;
  transition: opacity 0.3s ease-out;
}
@media (any-hover: hover) {
  .bl_commonCampaignCard_link:hover {
    opacity: 0.7;
  }
}
.bl_commonCampaignCard_link:focus-visible {
  outline: 0.125rem solid var(--accent);
  outline-offset: 0.125rem;
}

/*========================================
6. 本文の目次（INDEX・bl_commonArticleIndex）
記事内H2から自動生成（inc/article-index.php）。治療メニューの bl_treatmentSingleIndex と同意匠。
目次ブロック（acf/article-index）を本文中に置いた記事はその位置に、置いていない記事は本文の先頭に出る。
JSは使わずCSS scroll-behavior:smoothで実現（h2側の逃げは §2 の scroll-margin-top）
========================================*/
/* 先頭に出る場合、上余白は本文ラッパー（bl_campaignSingle_body / bl_columnSingle_body）が作るためINDEX自身はmargin-topを持たない */
.bl_commonArticleIndex {
  max-width: 51.875rem;
  margin-inline: auto;
  padding-block: 1.875rem;
  padding-inline: 1.875rem;
  border: 0.0625rem solid var(--grayBeige);
  border-radius: 0.5rem;
}
@media screen and (width <= 768px) {
  .bl_commonArticleIndex {
    padding-inline: 1.25rem;
  }
}

/* 先頭h2はh2:first-childでmargin-top:0のため、隣接セレクタでINDEXがある時だけ本文側に余白を持たせる */
.bl_commonArticleIndex + .bl_commonArticleBody_content {
  margin-top: 3.75rem;
}

/* 目次ブロックを本文の途中に置いた場合。上下の余白はh2と同じ80で扱う
   （本文先頭に置いたときは本文ラッパーの余白が上を作るので0にする） */
.bl_commonArticleBody_content .bl_commonArticleIndex {
  margin-top: 5rem;
}

.bl_commonArticleBody_content .bl_commonArticleIndex:first-child {
  margin-top: 0;
}

.el_commonArticleIndex_ttl {
  color: var(--txtColor);
  font-family: var(--enFont);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
}

.bl_commonArticleIndex_list {
  display: flex;
  flex-direction: column;
  margin-top: 1.25rem;
}

.bl_commonArticleIndex_list_item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-top: 0.625rem;
}

.bl_commonArticleIndex_list_item:first-child {
  margin-top: 0;
}

.bl_commonArticleIndex_list_item::before {
  content: "";
  flex-shrink: 0;
  width: 0.375rem;
  height: 0.375rem;
  margin-top: 0.5625rem;
  border-radius: 50%;
  background-color: var(--grayBeige);
}

.el_commonArticleIndex_list_item_link {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  transition: opacity 0.3s ease-out;
}
@media (any-hover: hover) {
  .el_commonArticleIndex_list_item_link:hover {
    opacity: 0.7;
  }
}
.el_commonArticleIndex_list_item_link:focus-visible {
  outline: 0.125rem solid var(--accent);
  outline-offset: 0.125rem;
}

/* INDEXのスムーススクロール（JS不要）。:rootは_base.scss編集不可のため:has()でスコープ付与（_treatmentSingle.scssと同方式） */
:root:has(body.pg_campaignSingle),
:root:has(body.pg_columnSingle) {
  scroll-behavior: smooth;
}

/*========================================
横スクロール領域の共通挙動（bl_commonScroller）。対象: 症例/キャンペーン・コラムスライダー等、
スクロールバーを隠す領域全般。PCマウスで送る手段が無いためcommon.jsがドラッグ操作を追加する。
状態クラス（common.jsが付け外し）: is-scrollable=スクロール可能 / is-scrollFade=右端フェード表示 /
is-dragging=ドラッグ中 / is-gliding=指を離したあとの惰性スクロール中
========================================*/
@media (any-hover: hover) {
  .bl_commonScroller.is-scrollable {
    cursor: grab;
  }
}
/* ドラッグ中・惰性中はスナップを切る。切らないとscrollLeft書き換え直後に
   スナップ位置へ引き戻され動かせない（惰性の着地点はJS側がスナップ位置に丸める） */
.bl_commonScroller.is-dragging,
.bl_commonScroller.is-gliding {
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.bl_commonScroller.is-dragging {
  user-select: none;
  cursor: grabbing;
}

/* スクロールできるときだけtabindexが付く（common.js）。キーボード操作時だけ枠を出す方式はヘッダー・フッターと揃える */
.bl_commonScroller:focus-visible {
  outline: 0.125rem solid var(--accent);
  outline-offset: 0.125rem;
}

/* ========================================
   FV セクション
======================================== */
.bl_topFvAboutWrapper {
  position: relative;
}

/* ABOUTの「すりガラス」レイヤー。
   カンプ（PC Frame 646 / SP blk）はABOUTセクションの矩形に background blur 43.6px を持つが、
   矩形へそのまま当てると上端に「ぼけ／非ぼけ」の直線ができ、それが画面を降りてくるため
   スクロールした瞬間にぼけが唐突に立ち上がって見える（実測で確認済み）。
   そこでぼかしを画面全面のfixedレイヤーへ移し、ぼかし量だけをスクロールに連動させる。
   境目そのものが無くなるので、FV→ABOUTと下るにつれて背景写真がそのまま滑らかに曇る。

   ぼかす対象はこのレイヤーより下に描かれるもの＝FV背景スライドのみ。
   FVコピー・SP予約バー・ABOUT本体・SEARCH以降はいずれも上に載るのでぼけない。
   JSが動かない環境では is-active が付かず display:none（＝ぼかし無し）。
   fixedレイヤーにカンプ値を焼き込むとFVが常時ぼけるため、あえてぼかさない側へ倒している。 */
.el_topFvAboutWrapper_blur {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* カンプ Frame 646 / blk の塗り（白1%） */
  background-color: rgb(from var(--white) r g b/1%);
  backdrop-filter: blur(var(--aboutBlur, 0px));
  -webkit-backdrop-filter: blur(var(--aboutBlur, 0px));
}

/* ぼかし0のときとABOUTを通過しきったあとは描画を止める（backdrop-filterは表示中ずっとGPUを使う） */
.el_topFvAboutWrapper_blur:not(.is-active) {
  display: none;
}

.bl_topBelowFvWrapper {
  position: relative;
  z-index: 1;
  background-color: var(--base);
}

/* 高さは svh（＝ブラウザUIが出ている状態の小さい方のビューポート）で取る。
   vh は iOS Safari では「URLバー/ツールバーが隠れたときの高さ(lvh)」なので、
   下寄せのコピーがツールバーの裏＋画面外に落ちて読めなくなる（iPhoneで実機報告あり）。
   svh ならUIの有無に関わらずコピーが必ず画面内に収まる。
   ツールバーを持たないブラウザ（PC全般）では svh == vh なので表示は一切変わらない。
   dvh は不可: スクロール中にセクション高が伸縮してコピーが動く。
   背景は .bl_topFvSection_bg が position:fixed で全画面を覆うため、隙間はできない。
   1行目の 100vh は svh 非対応環境（iOS15.3以前 等）向けのフォールバック */
.bl_topFvSection {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
}
@media screen and (width <= 768px) {
  .bl_topFvSection {
    /* SPカンプはコピーがFVのほぼ上下中央（745の中でコピーブロックが y352〜444）。
       FV高が 100svh で可変なため、下端からの固定距離ではなく中央寄せで再現する */
    align-items: center;
  }
}

.bl_topFvSection_bg {
  position: fixed;
  inset: 0;
  z-index: 0;
}

/* カンプ（PC Rectangle 314 / SP Rectangle 315）がFV写真の上に重ねる色フィルター。
   FVセクションの矩形に敷くと、背景が fixed で残るのに対しフィルターだけがページと一緒に流れ、
   スクロール中に「色の境目」が画面を降りてくる（.el_topFvAboutWrapper_blur と同じ現象）。
   そのため背景レイヤー自体に重ね、写真と一体で固定されるようにする。
   フッター下部の同じ写真帯は .el_footerLowerWrapper_bg で別物なので影響しない */
.bl_topFvSection_bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background-color: rgb(from var(--grayBeige) r g b/30%);
  pointer-events: none;
}

.bl_topFvSection_bg_slideList {
  position: absolute;
  inset: 0;
}

.bl_topFvSection_bg_slideList_item {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.5s ease-out;
}

.bl_topFvSection_bg_slideList_item.is-prev {
  z-index: 1;
  opacity: 1;
  transition: none;
}

.bl_topFvSection_bg_slideList_item.is-active {
  z-index: 2;
  opacity: 1;
}

.bl_topFvSection_bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ------------------------------------------------------------------
   FVイントロ（セッション初回アクセスのみ・is-fvIntro / is-fvIntroImg /
   is-fvIntroCopy を <html> へ付けるのは assets/js/fv-intro.js）

   参考サイト https://shuku-kokon.com/ の実測値をそのまま移植:
     画像  opacity 0→1 / transition 0.6s ease-out（あちらは表示300ms後）
     コピー opacity 0→1 + translateY(10px→0)
            / transition: opacity 0.9s ease-out, transform 1.1s cubic-bezier(0.33, 1, 0.68, 1)

   コピーの遅延だけ変えている。あちらはローディング画面前提の2.0sだが、
   ローディングの無い当サイトでは画像フェード完了（0.3s + 0.6s）直後の1.0sにする。

   下地に --grayBeige を敷く理由: あちらは地がテクスチャ（淡いグレー）なので画像が
   透けている間もヘッダーの白抜きが読めるが、当サイトの地は --base #FCFCFC でほぼ白のため
   ヘッダーのロゴ・電話番号が溶けて消える（実測で確認）。イントロ中だけFV背面をグレーで塗る。
   塗ったままにしているのは、フェード完了後は不透明な画像が覆うので見えないため。

   セッション2回目以降・prefers-reduced-motion では is-fvIntro 自体が付かない＝
   このブロックは一切当たらず、従来どおりの即表示になる。
   ------------------------------------------------------------------ */
.is-fvIntro .bl_topFvSection_bg {
  background-color: var(--grayBeige);
}

.is-fvIntro .bl_topFvSection_bg_slideList {
  opacity: 0;
  transition: opacity 0.6s ease-out;
}

.is-fvIntro.is-fvIntroImg .bl_topFvSection_bg_slideList {
  opacity: 1;
}

/* イントロ中のコピーはCSSが担当する（common.jsのGSAP側はイントロ時は動かさない）。
   スクロールでのフェードアウトは1階層外の .bl_topFvSection_inner が持つので衝突しない */
.is-fvIntro .bl_topFvSection_copy {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.9s ease-out, transform 1.1s cubic-bezier(0.33, 1, 0.68, 1);
}

.is-fvIntro.is-fvIntroCopy .bl_topFvSection_copy {
  opacity: 1;
  transform: translateY(0);
}

/* コピーのフェードアウトはこのラッパーが持つ（is-fadeOut の付け外しは common.js）。
   中の .js_fvCopy はフェードインでGSAPがインラインstyleのopacityを焼き込むため、
   同じ要素へCSSのopacityを当てても詳細度で負ける。1階層外へ出して衝突を避けている。
   opacityで重なり文脈ができるが、SP固定予約バーはこのinnerの外に置いてあるので影響しない。

   transitionは「戻り（上へスクロールし直したとき）」の値。素早く復帰させる */
.bl_topFvSection_inner {
  position: relative;
  z-index: 1;
  width: 100%;
  /* コピーのfont-sizeを流動化しているので、左右余白も同じ流動系で揃える（片方だけ固定だと狭幅で内寸が足りず折り返す） */
  padding-inline: clamp(2.625rem, 4.1666666667vw, 3.75rem);
  /* カンプのコピー下端はFV下端から60px。line-height 48/32 のハーフリーディング8pxが
     最終行の下に付くぶんを引いて、文字の視覚的な下端を60pxに合わせる */
  padding-block-end: 3.25rem;
  transition: opacity 0.6s ease-out;
}
@media screen and (width <= 768px) {
  .bl_topFvSection_inner {
    padding-inline: 1.25rem;
    /* SPは .bl_topFvSection 側の align-items: center で上下中央に置くため、下寄せ用の余白は持たせない */
    padding-block-end: 0;
  }
}

/* 消える側だけディレイ付き・長めにする。
   参考サイト https://shuku-kokon.com/ の .sttlBox.fast は 0.6s ease-out / ディレイ無しだが、
   「少し置いてからゆっくり消す」指示に合わせて 0.2s 待ってから 0.8s かける */
.bl_topFvSection_inner.is-fadeOut {
  opacity: 0;
  transition: opacity 0.8s ease-out 0.2s;
}

/* カンプの行送りは PC 48px（32px + 行間16px）/ SP 36px（20px + 行間16px）。
   SPは2行目を <br> で折って3行にするため、span間と <br> の改行を同じ送りにする必要がある。
   flexのgapだと <br> の改行に効かないので、行送りはすべて line-height で持たせている */
.bl_topFvSection_copy {
  color: var(--base);
  font-family: var(--jaFont);
  /* カンプ実値は32px。固定にするとウィンドウ幅900px前後で2行目が折り返して3行になるため、
     1440px未満は幅に比例させて2行を保つ（1440px以上は32pxで頭打ち） */
  font-size: clamp(1.4rem, 2.2222222222vw, 2rem);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
@media screen and (width <= 768px) {
  .bl_topFvSection_copy {
    /* カンプ実値は20px。画面幅を狭めたときに意図しない位置で折り返さないよう、
       428px未満は幅に比例して縮める（428px以上は20pxで頭打ち） */
    font-size: clamp(0.875rem, 4.6728971963vw, 1.25rem);
    line-height: 1.8;
    text-align: center;
  }
}

.el_topFvSection_copy_line {
  display: block;
}

/* SP: 画面下部に固定追従するバー。3ボタンはそれぞれ独立したチップとして隙間(gap)を空けて並べる */
.bl_topFvSection_reserveList {
  display: none;
}
@media screen and (width <= 768px) {
  .bl_topFvSection_reserveList {
    display: flex;
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 90;
    align-items: stretch;
    gap: 0.3125rem;
    padding: 0.3125rem;
    /* 外枠5px・ボタン間5pxを不透明にする。地が無いと背後（フッターRESERVE帯の写真等）が隙間から覗く（_spReserveBar.scssと対） */
    background-color: var(--base);
  }
}

.bl_topFvSection_reserveList_telBtn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-block: 0.75rem;
  padding-inline: 1rem;
  background-color: var(--base);
  /* カンプ実値: 塗り#FCFCFC + 線#C9BC9C 1px。--baseで囲うと枠が見えなくなる */
  border: 0.0625rem solid #c9bc9c;
  transition: opacity 0.3s ease-out;
}
@media (any-hover: hover) {
  .bl_topFvSection_reserveList_telBtn:hover {
    opacity: 0.7;
  }
}
@media screen and (width <= 768px) {
  .bl_topFvSection_reserveList_telBtn {
    flex: 1 1 0;
    justify-content: center;
    /* 428px未満はfluidで比例縮小し、狭幅でも「電話予約」が全文収まるようにする */
    gap: 0.5rem;
    padding-inline: 1rem;
  }
}

.bl_topFvSection_reserveList_telBtn img {
  display: block;
  width: 1.0625rem;
  height: auto;
}
@media screen and (width <= 768px) {
  .bl_topFvSection_reserveList_telBtn img {
    /* 428px未満はfluidで比例縮小 */
    width: clamp(0.7rem, 3.738317757vw, 1rem);
  }
}

.el_topFvSection_reserveList_telBtn_txt {
  color: #b9a574;
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
}
@media screen and (width <= 768px) {
  .el_topFvSection_reserveList_telBtn_txt {
    font-size: clamp(0.7rem, 3.738317757vw, 1rem);
  }
}

.bl_topFvSection_reserveList .bl_commonLineReserveBtn,
.bl_topFvSection_reserveList .bl_commonWebReserveBtn {
  width: fit-content;
}
@media screen and (width <= 768px) {
  .bl_topFvSection_reserveList .bl_commonLineReserveBtn,
  .bl_topFvSection_reserveList .bl_commonWebReserveBtn {
    flex: 1 1 0;
    width: auto;
    justify-content: center;
    /* 428px未満はfluidで比例縮小し、狭幅でも「LINE予約/WEB予約」が全文収まるようにする */
    gap: 0.625rem;
    padding-inline: 1.25rem;
  }
}

@media screen and (width <= 768px) {
  .bl_topFvSection_reserveList .el_commonLineReserveBtn_icon {
    width: clamp(0.9625rem, 5.1401869159vw, 1.375rem);
  }
}

@media screen and (width <= 768px) {
  .bl_topFvSection_reserveList .el_commonWebReserveBtn_icon {
    width: clamp(0.56875rem, 3.0373831776vw, 0.8125rem);
  }
}

@media screen and (width <= 768px) {
  .bl_topFvSection_reserveList .el_commonLineReserveBtn_txt,
  .bl_topFvSection_reserveList .el_commonWebReserveBtn_txt {
    font-size: clamp(0.7rem, 3.738317757vw, 1rem);
  }
}

/* このFVバー専用の実測値(19px/11px)。footer等で共用する共通コンポーネント本体の値は上書きしない */
@media screen and (width <= 768px) {
  .bl_topFvSection_reserveList .el_commonLineReserveBtn_icon {
    width: 1.1875rem;
  }
}

@media screen and (width <= 768px) {
  .bl_topFvSection_reserveList .el_commonWebReserveBtn_icon {
    width: 0.6875rem;
  }
}

/* 3等分だと折返すため、テキストをnowrapにして1行を維持する（等分の崩れより優先） */
@media screen and (width <= 768px) {
  .bl_topFvSection_reserveList .el_commonLineReserveBtn_txt,
  .bl_topFvSection_reserveList .el_commonWebReserveBtn_txt,
  .bl_topFvSection_reserveList .el_topFvSection_reserveList_telBtn_txt {
    white-space: nowrap;
  }
}

/* 428px未満は各要素をfluidで比例縮小し全文表示を維持（ellipsis不採用）。約300px未満で再びはみ出し得る */
/* ========================================
   ABOUT セクション
======================================== */
/* 地は敷かない（背面にFVの背景スライドがstickyで追従している）。
   FV背景より前面に出すため position+z-index が必須（非配置ブロックのままだと背景スライドの下に潜る）。
   カンプがこのセクション矩形に持つ白1% + background blur 43.6px は
   .el_topFvAboutWrapper_blur（画面全面のfixedレイヤー）が肩代わりする。理由はそちらのコメント参照 */
.bl_topAboutSection {
  position: relative;
  z-index: 1;
  overflow: hidden;
  /* デザイン実測: 白パネル端→セクション端が上下150（PC）/ 100（SP）。
     SP下だけ0＝パネル下端がセクション下端。次のSEARCHのpadding-top200と合わせて
     コンテンツ→SEARCH見出しがデザイン実測282になる */
  padding-block: 9.375rem;
  padding-inline: 1.25rem;
}
@media screen and (width <= 768px) {
  .bl_topAboutSection {
    padding-block: 6.25rem;
    padding-inline: 0rem;
  }
}

/* 白い面。矩形サイズはデザイン実値（PC1140×900 / SP408幅）。
   不透明度はカンプ実値90%に対し、ユーザー判断で80%（背面のFV写真をもう少し透かす）。
   コンテンツ列はPC1000（他セクションの1140と違いABOUTだけ狭い）/ SP388。
   パネル端→コンテンツは PC上下100 / SP上80・下82。
   overflow:hidden はカンプの「Mask group」の再現（マスク矩形＝このパネルと同じ左右位置・同じ幅）。
   z-index は装飾(負値)を本文の背面かつパネル地の前面に閉じ込めるためのスタッキングコンテキスト */
.bl_topAboutSection_inner {
  position: relative;
  z-index: 0;
  overflow: hidden;
  max-width: 71.25rem;
  margin-inline: auto;
  background-color: rgb(from var(--white) r g b/80%);
  padding-block: 6.25rem;
  padding-inline: 4.375rem;
}
@media screen and (width <= 768px) {
  .bl_topAboutSection_inner {
    margin-inline: 0.625rem;
    padding-block: 6.25rem 5.125rem;
    padding-inline: 1.125rem;
  }
}

/* パネル内のロゴ透かし。カンプは logo_1（ロゴマーク）をマスクにして白80%の矩形を抜いた形なので、
   実体は「ロゴ型の白80%シェイプ」＝単色（書き出しPNGのアルファ実測204/255で確認済み）。
   位置はパネル左上を原点にした実測値。原寸のままパネルからはみ出し、上の overflow:hidden で切られる。
   PC: left-197 / top152 / 原寸1534×640　SP: left-396 / top286 / 原寸1276×532

   不透明度はカンプ実値80%ではなく40%。
   透かしとパネルのコントラストは「透かしの不透明度 ×（1 - パネルの不透明度）」に比例するため、
   パネルを90%→80%に下げた時点で見た目の濃さが2倍になる（背景の明暗によらず2倍）。
   40%に半分にすることで、カンプ（パネル90%＋透かし80%）と同じ濃さに戻している。
   パネル側の不透明度を変えるときは、こちらも対で見直すこと */
.el_topAboutSection_deco {
  position: absolute;
  z-index: -1;
  top: 9.5rem;
  left: -12.3125rem;
  width: 95.875rem;
  opacity: 0.4;
  pointer-events: none;
}
@media screen and (width <= 768px) {
  .el_topAboutSection_deco {
    top: 17.875rem;
    left: -24.75rem;
    width: 79.75rem;
  }
}

.el_topAboutSection_deco img {
  display: block;
  width: 100%;
  height: auto;
}

.bl_topAboutSection_body {
  /* 見出し罫線→本文。デザイン実測 PC/SP ともに80（PC:Frame364 gap80 / SP:blk gap80） */
  margin-top: 5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
@media screen and (width <= 768px) {
  .bl_topAboutSection_body {
    text-align: left;
    /* 見出し(_quote)を「ビューポート幅」ではなく「パネル内の実効幅」基準で縮小させるための計測対象。
       inner の固定余白(margin10×2 + padding18×2 = 56px)を差し引いた実寸が 100cqi になる */
    container-type: inline-size;
    width: min(100%, 23.25rem);
    margin-inline: auto;
    align-items: flex-start;
  }
}

.el_topAboutSection_body_quote {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1.625rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1em;
}
@media screen and (width <= 768px) {
  .el_topAboutSection_body_quote {
    /* 1行で見せる見出し。428px時点で文字幅363px / 実効幅372pxとほぼ余裕がないうえ、
       実効幅は「100vw − 56px」なのに fluid() は 100vw に比例して縮むため、
       幅が狭いほど文字の占有率が上がり428px未満で段落ちする（360px実測: 305px > 304px で2行）。
       必要幅は 15字 × 1.1em（letter-spacing込み）= 16.5em なので、
       親の実効幅(100cqi)を 16.9 で割って比例縮小させる（429px以上は22px上限）。
       1行目は cqi 非対応ブラウザ用のフォールバック */
    font-size: clamp(0.9625rem, 5.1401869159vw, 1.375rem);
    font-size: min(1.375rem, 5.9171597633cqi);
    letter-spacing: 0.1em;
    text-align: left;
  }
}

.bl_topAboutSection_body_txt {
  margin-top: 3.75rem;
  max-width: 48.9375rem;
  width: 100%;
}
@media screen and (width <= 768px) {
  .bl_topAboutSection_body_txt {
    /* デザイン実測の本文ボックス幅373px。shrink-to-fit のままだと幅が373pxちょうどになり、
       行末のletter-spacing分(0.96px)が収まらず2段落目が3行→4行に折れるため、3px余裕を持たせて実寸で止める */
    width: 100%;
    max-width: 23.5rem;
  }
}

.bl_topAboutSection_body_txt p {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 2.5;
  letter-spacing: 0.1em;
  /* 中央寄せの本文は最終行が数文字だけ残ると読みにくいので行長を均す。
     SPは左寄せ＋カンプ実測の折り返し位置に合わせてあるので既定の折り返しへ戻す */
  text-wrap: balance;
}
@media screen and (width <= 768px) {
  .bl_topAboutSection_body_txt p {
    text-wrap: wrap;
    letter-spacing: 0.06em;
  }
}

/* 文中の <br class="pc_only"> は本文ボックスが実寸783pxのとき（≒978px以上）だけ成立する。
   それ未満では箱が縮んで改行直前の断片（「考え、」等）が1行に取り残されるため、
   タブレット帯以下では無効化して自然折り返し＋text-wrap:balance に任せる */
@media screen and (width <= 1024px) {
  .bl_topAboutSection_body_txt .pc_only {
    display: none;
  }
}

.bl_topAboutSection_body_txt p + p {
  margin-top: 1.875rem;
}

/* 1段落目のみletter-spacingが異なる（SP: 0.08em） */
@media screen and (width <= 768px) {
  .bl_topAboutSection_body_txt p:first-child {
    letter-spacing: 0.08em;
  }
}

.bl_topAboutSection_btnWrapper {
  margin-top: 3.75rem;
}
@media screen and (width <= 768px) {
  .bl_topAboutSection_btnWrapper {
    margin-inline: auto;
  }
}

/* ========================================
   SEARCH BY PROBLEM セクション
======================================== */
.bl_topSearchSection {
  /* デザイン実測(PC): セクション端→SEARCH見出しが約163px（About padding-block150との整合を確認済み） */
  padding-block: 9.375rem;
}
@media screen and (width <= 768px) {
  .bl_topSearchSection {
    padding-block: 6.25rem;
  }
}

.bl_topSearchSection_inner {
  max-width: 73.75rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.bl_topSearchSection_tabContainer {
  margin-top: 5rem;
}
@media screen and (width <= 768px) {
  .bl_topSearchSection_tabContainer {
    margin-top: 4.875rem;
    /* SPカンプ実寸(428 - padding20*2 = 388)で頭打ちにして中央寄せ。
       上限が無いと428超〜768で図解画像とチップ座標がそのまま拡大する */
    max-width: 24.25rem;
    margin-inline: auto;
  }
}

.bl_topSearchSection_tabList {
  display: flex;
  gap: 0.625rem;
  width: fit-content;
  margin-inline: auto;
}
@media screen and (width <= 768px) {
  .bl_topSearchSection_tabList {
    gap: 0;
    width: 100%;
  }
}

/* タブは260x70固定（幅/高さをテキスト量で変えない）。内側二重線は::beforeで再現 */
.el_topSearchSection_tabList_tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 16.25rem;
  gap: 1.25rem;
  padding-block: 0.9375rem;
  padding-inline: 1.5625rem;
  background-color: var(--base);
  border: 0.0625rem solid var(--beige);
  /* 下辺は直下パネル(.bl_topSearchSection_diagram)の上罫線と接して2pxに見えるため透明にする（高さは維持） */
  border-bottom-color: transparent;
  cursor: pointer;
  transition: background-color 0.3s ease-out;
}
@media screen and (width <= 768px) {
  .el_topSearchSection_tabList_tab {
    width: 50%;
    height: 5.1875rem;
    flex-direction: column;
    justify-content: center;
    gap: 0.25rem;
    padding-inline: 0;
    padding-block: 0;
  }
}

/* SPはgap:0でタブが密着するため、境界に左右のボーダーが並んで1px×2＝2pxに見える。
   カンプは境界1px（2つ目以降の左辺ストロークが0）なので同じ組み方にする */
@media screen and (width <= 768px) {
  .el_topSearchSection_tabList_tab + .el_topSearchSection_tabList_tab {
    border-left: none;
  }
}

.el_topSearchSection_tabList_tab::before {
  content: "";
  position: absolute;
  inset: 0.3125rem;
  border: 0.0625rem solid var(--beige);
  pointer-events: none;
  transition: border-color 0.3s ease-out;
}

.el_topSearchSection_tabList_tab.is-active {
  background-color: var(--beige);
}

.el_topSearchSection_tabList_tab.is-active::before {
  border-color: var(--base);
}

.el_topSearchSection_tabList_tab_icon {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: var(--beige);
  transition: background-color 0.3s ease-out;
}
@media screen and (width <= 768px) {
  .el_topSearchSection_tabList_tab_icon {
    width: 2.25rem;
    height: 2.25rem;
  }
}

.el_topSearchSection_tabList_tab.is-active .el_topSearchSection_tabList_tab_icon {
  background-color: var(--base);
}

.el_topSearchSection_tabList_tab_txt {
  color: var(--brown);
  font-family: var(--jaFont);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
@media screen and (width <= 768px) {
  .el_topSearchSection_tabList_tab_txt {
    font-size: 0.875rem;
    letter-spacing: 0.05em;
    text-align: center;
  }
}

/* ホバー: TREATMENTタブと同演出（非アクティブのみ。bg=beige、アイコン円はis-activeと同じ白地） */
@media (any-hover: hover) {
  .el_topSearchSection_tabList_tab:not(.is-active):hover {
    background-color: var(--beige);
  }
}

@media (any-hover: hover) {
  .el_topSearchSection_tabList_tab:not(.is-active):hover::before {
    border-color: var(--base);
  }
}

@media (any-hover: hover) {
  .el_topSearchSection_tabList_tab:not(.is-active):hover .el_topSearchSection_tabList_tab_icon {
    background-color: var(--base);
  }
}

.bl_topSearchSection_panel[hidden] {
  display: none;
}

/* PCは四隅、SPは下2隅のみ角丸。overflow:hiddenで画像の角をクリップ */
.bl_topSearchSection_diagram {
  position: relative;
  aspect-ratio: 1140/620;
  overflow: hidden;
  background-color: var(--base);
  border: 0.0625rem solid var(--beige);
  border-radius: 0.625rem;
}
@media screen and (width <= 768px) {
  .bl_topSearchSection_diagram {
    aspect-ratio: 388/400;
    border-radius: 0 0 0.625rem 0.625rem;
    /* チップの文字・余白をパネル実効幅(100cqi)基準で縮めるためのコンテナ。
       100vwだとセクション左右余白ぶんズレて、狭幅で結局折り返す */
    container-type: inline-size;
  }
}

/* 背景グラデ+写真の帯。チップが半透明なので必ずチップより奥に敷く */
.el_topSearchSection_diagram_img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.el_topSearchSection_diagram_img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 結線レイヤー。線とドットはチップより手前に描く（PCはチップの内側にドットが乗る）。
   viewBoxがパネルと同比率なので、%で置いたチップの端と線端が常に一致する */
.el_topSearchSection_diagram_lines {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.el_topSearchSection_diagram_lines img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bl_topSearchSection_diagram_chipList {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.bl_topSearchSection_diagram_chipList_item {
  position: absolute;
  /* min(246,27%): 246px固定を保ちつつ、狭幅で右端チップがはみ出すのを防ぐ */
  width: min(15.375rem, 27%);
}
@media screen and (width <= 768px) {
  .bl_topSearchSection_diagram_chipList_item {
    /* SPは文字幅に追従する。left/rightのどちらか一方だけを指定しているので、
       fit-content は残り幅を上限に自動で頭打ちになり、狭幅でもはみ出さない */
    width: fit-content;
  }
}

/* チップの配置。左列(2,4)は right、右列(1,3,5)は left を基準にする。
   結線が刺さる「内側の辺」を%で固定するため。外側基準だと、幅が変わったときに
   内側の辺が動いて結線とドットがずれる（SPは文字数で幅が変わるので特に効く） */
.bl_topSearchSection_diagram_chipList_item:nth-child(2),
.bl_topSearchSection_diagram_chipList_item:nth-child(4) {
  right: 72.28%;
  transform: translateY(-50%);
}

.bl_topSearchSection_diagram_chipList_item:nth-child(1),
.bl_topSearchSection_diagram_chipList_item:nth-child(3),
.bl_topSearchSection_diagram_chipList_item:nth-child(5) {
  left: 72.28%;
  transform: translateY(-50%);
}

/* 縦位置と、SPの内側辺の位置。カンプ実測がタブ間で4pxずれるためパネル単位で持つ */
/* ── お顔とお肌 ── */
.bl_topSearchSection_panel[data-cat=face] .bl_topSearchSection_diagram_chipList_item:nth-child(1) {
  top: 29.03%;
}
@media screen and (width <= 768px) {
  .bl_topSearchSection_panel[data-cat=face] .bl_topSearchSection_diagram_chipList_item:nth-child(1) {
    left: 64.43%;
    top: 20%;
  }
}

.bl_topSearchSection_panel[data-cat=face] .bl_topSearchSection_diagram_chipList_item:nth-child(2) {
  top: 39.84%;
}
@media screen and (width <= 768px) {
  .bl_topSearchSection_panel[data-cat=face] .bl_topSearchSection_diagram_chipList_item:nth-child(2) {
    right: 75.9%;
    top: 35%;
  }
}

.bl_topSearchSection_panel[data-cat=face] .bl_topSearchSection_diagram_chipList_item:nth-child(3) {
  top: 50.65%;
}
@media screen and (width <= 768px) {
  .bl_topSearchSection_panel[data-cat=face] .bl_topSearchSection_diagram_chipList_item:nth-child(3) {
    left: 73.97%;
    top: 50%;
  }
}

.bl_topSearchSection_panel[data-cat=face] .bl_topSearchSection_diagram_chipList_item:nth-child(4) {
  top: 61.45%;
}
@media screen and (width <= 768px) {
  .bl_topSearchSection_panel[data-cat=face] .bl_topSearchSection_diagram_chipList_item:nth-child(4) {
    right: 68.3%;
    top: 65%;
  }
}

.bl_topSearchSection_panel[data-cat=face] .bl_topSearchSection_diagram_chipList_item:nth-child(5) {
  top: 72.26%;
}
@media screen and (width <= 768px) {
  .bl_topSearchSection_panel[data-cat=face] .bl_topSearchSection_diagram_chipList_item:nth-child(5) {
    left: 73.97%;
    top: 80%;
  }
}

/* ── デリケートゾーン ── */
.bl_topSearchSection_panel[data-cat=delicate] .bl_topSearchSection_diagram_chipList_item:nth-child(1) {
  top: 28.39%;
}
@media screen and (width <= 768px) {
  .bl_topSearchSection_panel[data-cat=delicate] .bl_topSearchSection_diagram_chipList_item:nth-child(1) {
    left: 68.56%;
    top: 17.5%;
  }
}

.bl_topSearchSection_panel[data-cat=delicate] .bl_topSearchSection_diagram_chipList_item:nth-child(2) {
  top: 39.19%;
}
@media screen and (width <= 768px) {
  .bl_topSearchSection_panel[data-cat=delicate] .bl_topSearchSection_diagram_chipList_item:nth-child(2) {
    right: 68.3%;
    top: 35%;
  }
}

.bl_topSearchSection_panel[data-cat=delicate] .bl_topSearchSection_diagram_chipList_item:nth-child(3) {
  top: 50%;
}
@media screen and (width <= 768px) {
  .bl_topSearchSection_panel[data-cat=delicate] .bl_topSearchSection_diagram_chipList_item:nth-child(3) {
    left: 74.1%;
    top: 50%;
  }
}

.bl_topSearchSection_panel[data-cat=delicate] .bl_topSearchSection_diagram_chipList_item:nth-child(4) {
  top: 60.81%;
}
@media screen and (width <= 768px) {
  .bl_topSearchSection_panel[data-cat=delicate] .bl_topSearchSection_diagram_chipList_item:nth-child(4) {
    right: 68.3%;
    top: 65%;
  }
}

.bl_topSearchSection_panel[data-cat=delicate] .bl_topSearchSection_diagram_chipList_item:nth-child(5) {
  top: 71.61%;
}
@media screen and (width <= 768px) {
  .bl_topSearchSection_panel[data-cat=delicate] .bl_topSearchSection_diagram_chipList_item:nth-child(5) {
    left: 76.03%;
    top: 80%;
  }
}

/* 左列(2,4)はspace-betweenのままでdot右端/テキスト左寄せを再現できるが、右列(1,3,5)は
   右寄りに崩れるためflex-startに上書き。SP(underTB)はdotが無いのでcenterを維持 */
.el_topSearchSection_diagram_chip_link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  width: 100%;
  /* カンプのpadding(20/14)はストロークINSIDE込みの値なので、borderぶん1px引く。
     これで外形が実測どおり246x44になり、ドット中心が結線の端点と一致する */
  padding-block: 0.8125rem;
  padding-inline: 1.1875rem;
  border-radius: 1.375rem;
  /* 背景のグラデーションを透かすため70%。下地は必ずチップより奥に敷くこと */
  background-color: rgb(from var(--base) r g b/70%);
  border: 0.0625rem solid var(--grayBeige);
  white-space: nowrap;
  transition: border-color 0.3s ease-out;
  /* ホバー時のベージュ被せ。gradientはtransition不可のため擬似要素のopacityで演出する */
}
.el_topSearchSection_diagram_chip_link::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: rgb(from var(--beige) r g b/40%);
  opacity: 0;
  transition: opacity 0.3s ease-out;
  pointer-events: none;
}
@media screen and (width <= 768px) {
  .el_topSearchSection_diagram_chip_link {
    justify-content: center;
    /* 余白も文字と同じ流動系にする。padding だけ固定にすると幅が狭いほど
       余白の占有率が上がり、font-size を流動にしても結局折り返す。
       cqi 非対応ブラウザ向けに vw 版を先に置く */
    padding-block: clamp(0.315rem, 1.6355140187vw, 0.4375rem);
    padding-block: min(0.4375rem, 1.8041237113cqi);
    padding-inline: clamp(0.855rem, 4.4392523364vw, 1.1875rem);
    padding-inline: min(1.1875rem, 4.8969072165cqi);
    /* 通常は折り返さないが、保険として折り返しは許可する
       （nowrapのままだと残り幅を超えて画像の外へ出る） */
    white-space: normal;
    text-align: center;
  }
}
@media (any-hover: hover) {
  .el_topSearchSection_diagram_chip_link:hover {
    border-color: var(--grayBeige);
  }
  .el_topSearchSection_diagram_chip_link:hover::before {
    opacity: 1;
  }
}

/* 右列(1,3,5)はdot固定+テキスト左寄せの上書き（PC専用）。underTBはベースのcenterへ明示的に戻す */
.bl_topSearchSection_diagram_chipList_item:nth-child(1) .el_topSearchSection_diagram_chip_link,
.bl_topSearchSection_diagram_chipList_item:nth-child(3) .el_topSearchSection_diagram_chip_link,
.bl_topSearchSection_diagram_chipList_item:nth-child(5) .el_topSearchSection_diagram_chip_link {
  justify-content: flex-start;
}
@media screen and (width <= 768px) {
  .bl_topSearchSection_diagram_chipList_item:nth-child(1) .el_topSearchSection_diagram_chip_link,
  .bl_topSearchSection_diagram_chipList_item:nth-child(3) .el_topSearchSection_diagram_chip_link,
  .bl_topSearchSection_diagram_chipList_item:nth-child(5) .el_topSearchSection_diagram_chip_link {
    justify-content: center;
  }
}

/* 見えるdotはsvg側の円。このspanはテキスト開始位置を保つ不可視スペーサー
   （visibility:hiddenで場所だけ保持。display:noneだと左列のspace-between配置が崩れる）。SPはdisplay:noneで除去 */
.el_topSearchSection_diagram_chip_link_dot {
  position: relative;
  flex-shrink: 0;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background-color: var(--grayBeige);
  visibility: hidden;
}
@media screen and (width <= 768px) {
  .el_topSearchSection_diagram_chip_link_dot {
    display: none;
  }
}

.el_topSearchSection_diagram_chip_link_txt {
  position: relative;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
}
@media screen and (width <= 768px) {
  .el_topSearchSection_diagram_chip_link_txt {
    /* SPは幅に追従させる。カンプ幅388で14px、狭幅では同じ比率で縮めて段落ちを防ぐ */
    font-size: clamp(0.63rem, 3.2710280374vw, 0.875rem);
    font-size: min(0.875rem, 3.6082474227cqi);
  }
}

/* 「陰核（クリトリス）」だけSPで2行になる（カンプどおり）。他チップは1行なので行間を分ける */
@media screen and (width <= 768px) {
  .bl_topSearchSection_panel[data-cat=delicate] .bl_topSearchSection_diagram_chipList_item:nth-child(1) .el_topSearchSection_diagram_chip_link_txt {
    line-height: 1.3;
  }
}

/* SPのカンプは括弧内を12px・半角括弧の2行目にしている。全角16pxのままだと
   チップ幅が112→128になり、画像の右端からはみ出して3行に折り返す */
@media screen and (width <= 768px) {
  .el_topSearchSection_diagram_chip_link_txt_pc {
    display: none;
  }
}

.el_topSearchSection_diagram_chip_link_txt_sp {
  display: none;
}
@media screen and (width <= 768px) {
  .el_topSearchSection_diagram_chip_link_txt_sp {
    display: block;
    font-size: clamp(0.54rem, 2.8037383178vw, 0.75rem);
    font-size: min(0.75rem, 3.0927835052cqi);
  }
}

/* 左列チップ(2,4)はテキストが先・dotが後ろ（右列と children順が逆） */
.bl_topSearchSection_diagram_chipList_item:nth-child(2) .el_topSearchSection_diagram_chip_link_dot,
.bl_topSearchSection_diagram_chipList_item:nth-child(4) .el_topSearchSection_diagram_chip_link_dot {
  order: 2;
}

.bl_topSearchSection_diagram_chipList_item:nth-child(2) .el_topSearchSection_diagram_chip_link_txt,
.bl_topSearchSection_diagram_chipList_item:nth-child(4) .el_topSearchSection_diagram_chip_link_txt {
  order: 1;
}

/* 枠線は両タブとも--beigeに統一（意図的な仕様。上書きしない） */
/*========================================
CAMPAIGN
========================================*/
.bl_topCampaignSection {
  /* デザイン実測(PC): セクション端→CAMPAIGN見出しが約152px */
  padding-block: 9.375rem;
  background-color: rgb(from var(--grayBeige) r g b/20%);
}
@media screen and (width <= 768px) {
  .bl_topCampaignSection {
    padding-block: 6.25rem;
  }
}

.bl_topCampaignSection_inner {
  max-width: 73.75rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.bl_topCampaignSection_list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3.75rem;
  margin-top: 5rem;
}
@media screen and (width <= 768px) {
  .bl_topCampaignSection_list {
    display: flex;
    gap: 2.5rem;
    /* SP実測: 見出し罫線→カードが約78px（PC margin-top:80と同水準）。40は過小だったため80に修正 */
    margin-top: 5rem;
    /* カンプはカード1枚目を左に69pxインデントしていたが、クライアント修正指示（2026-08-25）で
       「左に揃える」に変更。inner のpadding(20)＝見出し罫線の左端に合わせる。
       scroll-padding-left も同時に外す（残すとスナップ停止位置だけ69px内側に戻る）。
       カンプとは意図的に不一致 → QCで再指摘しない */
    padding-bottom: 0.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .bl_topCampaignSection_list::-webkit-scrollbar {
    display: none;
  }
}
.bl_topCampaignSection_list {
  /* タブレット幅(769-1024px)もSPと同じ横スクロールスライダーにする。PC(>1024)は4列グリッドを維持。
     ≤768はunderTBが担当のため範囲を769-1024pxに限定。
     左インデント(69px)はSPと揃えて撤去済み（クライアント修正指示 2026-08-25「左に揃える」）。
     カンプとは意図的に不一致 → QCで再指摘しない */
}
@media screen and (768px < width <= 1024px) {
  .bl_topCampaignSection_list {
    display: flex;
    gap: 2.5rem;
    margin-top: 2.5rem;
    padding-bottom: 0.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .bl_topCampaignSection_list::-webkit-scrollbar {
    display: none;
  }
}

/* 右端フェード（is-scrollFadeはcommon.jsが付与）。幅はSP 50 / タブレット帯 100 */
@media screen and (width <= 768px) {
  .bl_topCampaignSection_list.is-scrollFade {
    mask-image: linear-gradient(to right, #000 calc(100% - clamp(2.34375rem, 11.6822429907vw, 3.125rem)), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - clamp(2.34375rem, 11.6822429907vw, 3.125rem)), transparent 100%);
  }
}
@media screen and (768px < width <= 1024px) {
  .bl_topCampaignSection_list.is-scrollFade {
    mask-image: linear-gradient(to right, #000 calc(100% - 6.25rem), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 6.25rem), transparent 100%);
  }
}

@media screen and (width <= 768px) {
  .bl_topCampaignSection_card {
    width: 15.625rem;
    flex-shrink: 0;
    scroll-snap-align: start;
  }
}
@media screen and (768px < width <= 1024px) {
  .bl_topCampaignSection_card {
    width: 15.625rem;
    flex-shrink: 0;
    scroll-snap-align: start;
  }
}

/* カード本体は共通コンポーネント bl_commonCampaignCard（_articleCommon.scss）側で定義・共有。
   ここはTOP固有の差分（スライダー化時のカード比率）のみ */
@media screen and (width <= 768px) {
  .bl_topCampaignSection_card .bl_commonCampaignCard_imgWrapper {
    aspect-ratio: 250/312;
  }
}
@media screen and (768px < width <= 1024px) {
  .bl_topCampaignSection_card .bl_commonCampaignCard_imgWrapper {
    aspect-ratio: 250/312;
  }
}

.bl_topCampaignSection_btnWrapper {
  display: flex;
  justify-content: center;
  margin-top: 3.75rem;
}
@media screen and (width <= 768px) {
  .bl_topCampaignSection_btnWrapper {
    margin-top: 3.4375rem;
  }
}

.el_topCampaignSection_empty {
  margin-top: 5rem;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
}
@media screen and (width <= 768px) {
  .el_topCampaignSection_empty {
    margin-top: 2.5rem;
  }
}

/*========================================
PICKUP MENU
========================================*/
.bl_topPickupSection {
  /* デザイン実測(PC): セクション端→PICKUP MENU見出しが約162px */
  padding-block: 9.375rem;
  background-color: var(--base);
}
@media screen and (width <= 768px) {
  .bl_topPickupSection {
    padding-block: 6.25rem 5.625rem;
  }
}

.bl_topPickupSection_inner {
  max-width: 73.75rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.bl_topPickupSection_list {
  margin-top: 5rem;
  display: flex;
  flex-direction: column;
  gap: 3.5625rem;
}
@media screen and (width <= 768px) {
  .bl_topPickupSection_list {
    /* SP実測: 見出し罫線→カード枠が約81px。PC値80を踏襲するよう修正（旧40は過小） */
    margin-top: 5rem;
    gap: 3.75rem;
  }
}

/* カードは無padding（画像を高さいっぱいに）。余白はテキスト側要素に個別に持たせる */
.bl_topPickupSection_card {
  display: grid;
  /* min(434,50%): 434px固定と同寸を保ちつつ、中間幅で画像列が縮んで横スクロールするのを防ぐ */
  grid-template-columns: 1fr min(27.125rem, 50%);
  column-gap: 3.75rem;
  border: 0.0625rem solid var(--grayBeige);
  border-radius: 0.625rem;
  overflow: hidden;
}
@media screen and (width <= 768px) {
  .bl_topPickupSection_card {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.875rem 1.25rem;
  }
}

.bl_topPickupSection_card_content {
  display: block;
  padding: 1.875rem 0 0 1.875rem;
}
@media screen and (width <= 768px) {
  .bl_topPickupSection_card_content {
    /* SP表示順は見出し→画像→ボタン（orderで担保）。PC用paddingはリセットしカードのpaddingに戻す */
    order: 1;
    padding: 0;
  }
}

.el_topPickupSection_card_ttl {
  padding-left: 1rem;
  border-left: 0.25rem solid var(--grayBeige);
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
@media screen and (width <= 768px) {
  .el_topPickupSection_card_ttl {
    /* SPカンプ実測24px（PCと同値）。428px未満はfluidで比例縮小 */
    font-size: clamp(1.05rem, 5.6074766355vw, 1.5rem);
    letter-spacing: 0.05em;
  }
}

.el_topPickupSection_card_txt {
  margin-top: 1.25rem;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.1em;
}

.bl_topPickupSection_card_btnWrapper {
  /* デザイン実測(PC): 説明文→ボタン間はFigma AutoLayout実測でgap60（Frame702: 176+60+44=280と整合）。旧40は過小 */
  margin-top: 3.75rem;
  padding: 0 0 1.875rem 1.875rem;
}
@media screen and (width <= 768px) {
  .bl_topPickupSection_card_btnWrapper {
    order: 3;
    margin-top: 0;
    padding: 0;
  }
}

.bl_topPickupSection_card_imgWrapper {
  grid-column: 2;
  grid-row: 1/span 2;
  display: block;
  width: 100%;
  height: 100%;
}
@media screen and (width <= 768px) {
  .bl_topPickupSection_card_imgWrapper {
    order: 2;
    grid-column: unset;
    grid-row: unset;
    aspect-ratio: 348/214;
  }
}

.el_topPickupSection_card_img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*========================================
TREATMENT MENU
========================================*/
.bl_topTreatmentSection {
  /* デザイン実測(PC): 背景切替Y(design 5776, 画素サンプリングで1px精度確定)→見出し上端(design 5926, json 8257-2331)=150。
     旧120はCAMPAIGN/PICKUP/CASEの150と不整合だった */
  padding-block: 9.375rem;
  background-color: rgb(from var(--grayBeige) r g b/20%);
}
@media screen and (width <= 768px) {
  .bl_topTreatmentSection {
    padding-block: 6.25rem;
  }
}

.bl_topTreatmentSection_inner {
  max-width: 73.75rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.bl_topTreatmentSection_tabs {
  margin-top: 3.75rem;
}
@media screen and (width <= 768px) {
  .bl_topTreatmentSection_tabs {
    /* SP実測: 見出し罫線→タブが約83px。PC値60より大きいためSP独自に80へ修正（旧40は過小） */
    margin-top: 5rem;
  }
}

.bl_topTreatmentSection_tabList {
  display: flex;
  justify-content: center;
  gap: 0.625rem;
}
@media screen and (width <= 768px) {
  .bl_topTreatmentSection_tabList {
    gap: 0;
    /* タブ行はSP実測で親コンテナ388に対し360幅（全幅stretchではなく少し狭い列として実装） */
    max-width: 22.5rem;
    margin-inline: auto;
  }
}

/* SEARCHタブと同系デザイン（内側にインセットしたボーダーを::beforeで再現） */
.el_topTreatmentSection_tabBtn {
  position: relative;
  display: flex;
  align-items: center;
  width: 16.25rem;
  gap: 1.25rem;
  padding-block: 0.9375rem;
  padding-inline: 1.5625rem;
  border: 0.0625rem solid var(--beige);
  background-color: var(--base);
  transition: background-color 0.3s ease-out;
}
@media screen and (width <= 768px) {
  .el_topTreatmentSection_tabBtn {
    flex-direction: column;
    flex: 1;
    gap: 0.25rem;
    padding-block: 0.6875rem;
    padding-inline: 0.5rem;
  }
}

/* SEARCHタブと同じ理由。SPはgap:0で密着するため2つ目以降の左ボーダーを落として境界を1pxにする */
@media screen and (width <= 768px) {
  .el_topTreatmentSection_tabBtn + .el_topTreatmentSection_tabBtn {
    border-left: none;
  }
}

.el_topTreatmentSection_tabBtn::before {
  content: "";
  position: absolute;
  inset: 0.3125rem;
  border: 0.0625rem solid var(--beige);
  pointer-events: none;
  transition: border-color 0.3s ease-out;
}

.el_topTreatmentSection_tabBtn.is-active {
  background-color: var(--beige);
  border-color: var(--beige);
}

.el_topTreatmentSection_tabBtn.is-active::before {
  border-color: var(--base);
}

/* アイコン円: 非アクティブ=ベージュ地/アクティブ=白地（SEARCHタブと同じ配色思想） */
.el_topTreatmentSection_tabBtn_icon {
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
  border-radius: 50%;
  background-color: var(--beige);
  transition: background-color 0.3s ease-out;
}
@media screen and (width <= 768px) {
  .el_topTreatmentSection_tabBtn_icon {
    width: 2.25rem;
    height: 2.25rem;
  }
}

.el_topTreatmentSection_tabBtn.is-active .el_topTreatmentSection_tabBtn_icon {
  background-color: var(--base);
}

/* アイコン未設定のカテゴリー用。アイコンぶんの箱が無いと文字がPCは左・SPは上に寄るため中央へ置く
   （カテゴリー編集画面でアイコンを設定すると自動でアイコンありのレイアウトに戻る） */
.el_topTreatmentSection_tabBtn:not(:has(.el_topTreatmentSection_tabBtn_icon)) {
  justify-content: center;
}

.el_topTreatmentSection_tabBtn_txt {
  color: var(--brown);
  font-family: var(--jaFont);
  font-size: 1.125rem;
  /* カテゴリー名が長く2行以上になったとき、行が左寄せにならないように */
  text-align: center;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
@media screen and (width <= 768px) {
  .el_topTreatmentSection_tabBtn_txt {
    font-size: 1rem;
    letter-spacing: 0.05em;
  }
}

@media (any-hover: hover) {
  .el_topTreatmentSection_tabBtn:not(.is-active):hover {
    background-color: var(--beige);
  }
}

@media (any-hover: hover) {
  .el_topTreatmentSection_tabBtn:not(.is-active):hover::before {
    border-color: var(--base);
  }
}

@media (any-hover: hover) {
  .el_topTreatmentSection_tabBtn:not(.is-active):hover .el_topTreatmentSection_tabBtn_icon {
    background-color: var(--base);
  }
}

.bl_topTreatmentSection_panel {
  margin-top: -0.0625rem;
  padding-block: 5rem;
  /* デザイン実測(PC): パネル幅1140に対しコンテンツ幅960（Figma Frame721/722実測）＝左右インセット90。旧70は過小で内容が広がりすぎていた */
  padding-inline: 5.625rem;
  border: 0.0625rem solid var(--beige);
  border-radius: 0.625rem;
  background-color: var(--base);
  display: none;
  opacity: 0;
}
@media screen and (width <= 768px) {
  .bl_topTreatmentSection_panel {
    /* SP: 角丸は天面0(タブとの接続面をフラットにする)・底面のみ10 */
    padding-block: 1.875rem;
    padding-inline: 1.25rem;
    border-radius: 0 0 0.625rem 0.625rem;
  }
}

.bl_topTreatmentSection_panel.is-active {
  display: block;
  animation: bl_topTreatmentSectionFadeIn 0.4s ease-out forwards;
}

@keyframes bl_topTreatmentSectionFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.el_topTreatmentSection_panel_empty {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
}

/* 各グループが自身の上罫線を持ち、隣接グループ間は1本に重なる構造。
   最終グループのみ下罫線を追加し、パネル内コンテンツの上下端を閉じる */
.bl_topTreatmentSection_group {
  /* デザイン実測(PC): 区切り線→区切り線(グループピッチ)146pxをピクセル計測で分解すると上下30が整合（旧40だと1グループあたり+20pxの過大） */
  padding-block: 1.875rem;
  border-top: 0.0625rem solid rgb(from var(--grayBeige) r g b/30%);
  /* SPはPC共通のrem(40)だと過大なため20に補正 */
}
@media screen and (width <= 768px) {
  .bl_topTreatmentSection_group {
    padding-block: 1.25rem;
  }
}

.bl_topTreatmentSection_group:last-of-type {
  border-bottom: 0.0625rem solid rgb(from var(--grayBeige) r g b/30%);
}

.bl_topTreatmentSection_group_ttl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: default;
  list-style: none;
}

.bl_topTreatmentSection_group_ttl::-webkit-details-marker {
  display: none;
}

.el_topTreatmentSection_group_ttl_txt {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.el_topTreatmentSection_group_ttl_icon {
  position: relative;
  display: none;
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}
@media screen and (width <= 768px) {
  .el_topTreatmentSection_group_ttl_icon {
    display: block;
  }
}

.el_topTreatmentSection_group_ttl_icon::before,
.el_topTreatmentSection_group_ttl_icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--txtColor);
  translate: -50% -50%;
  transition: opacity 0.3s ease-out;
}

.el_topTreatmentSection_group_ttl_icon::before {
  width: 1rem;
  height: 0.125rem;
}

.el_topTreatmentSection_group_ttl_icon::after {
  width: 0.125rem;
  height: 1rem;
}

/* 開閉アイコン(+/-)。[open]は使わずis-collapsedクラスで判定（下のgrid-rowsアニメと状態を統一） */
.el_topTreatmentSection_group_ttl_icon::after {
  opacity: 0;
}

.bl_topTreatmentSection_group.is-collapsed .el_topTreatmentSection_group_ttl_icon::after {
  opacity: 1;
}

/* open属性は常時保持しネイティブのdisplay:noneジャンプを避け、is-collapsedクラスでgrid-template-rowsを
   0fr⇄1frに遷移させる。子要素はmin-height:0が必要（grid-rows縮小をclipするため） */
.bl_topTreatmentSection_group_content {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.3s ease-out;
}

.bl_topTreatmentSection_group.is-collapsed .bl_topTreatmentSection_group_content {
  grid-template-rows: 0fr;
}

.bl_topTreatmentSection_group_content > * {
  min-height: 0;
  overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .bl_topTreatmentSection_group_content,
  .bl_topTreatmentSection_group_list {
    transition: none;
  }
}

/* align-items:centerにより、丈が高いチップがあっても他はストレッチせず中央揃えのまま */
.bl_topTreatmentSection_group_list {
  /* marginだとgrid 0fr遷移時もトラック最小寸法に算入され20px残るため、padding-topを使う */
  padding-top: 1.125rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  align-items: flex-start;
  transition: padding-top 0.3s ease-out;
}
@media screen and (width <= 768px) {
  .bl_topTreatmentSection_group_list {
    grid-template-columns: repeat(1, 1fr);
    gap: 0.75rem 1rem;
  }
}

.bl_topTreatmentSection_group.is-collapsed .bl_topTreatmentSection_group_list {
  padding-top: 0;
}

.el_topTreatmentSection_group_list_item_link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.2rem;
  padding-block: 0.3125rem;
  padding-inline: 0.5rem;
  border: 0.0625rem solid var(--grayBeige);
  border-radius: 1.375rem;
  transition: background-color 0.3s ease-out, border-color 0.3s ease-out;
}
@media screen and (width <= 768px) {
  .el_topTreatmentSection_group_list_item_link {
    /* 上下のみ SP値を維持（左右・gapはPCと同値で良いとの指示）。
       旧い fluid の左右padding は、underTBで1カラム（幅一杯）になったことで
       390px前後の段落ちリスクが無くなったため rem に戻している */
    padding-block: 0.625rem;
  }
}
@media (any-hover: hover) {
  .el_topTreatmentSection_group_list_item_link:hover {
    background-color: rgba(228, 222, 207, 0.4);
    border-color: var(--grayBeige);
  }
}

.el_topTreatmentSection_group_list_item_link_txt {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5; /* 2行折返し時の行間もこれに合わせるための値 */
  letter-spacing: 0.05em;
}

.el_topTreatmentSection_group_list_item_link_arrow {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--txtColor);
}

.el_topTreatmentSection_group_list_item_link_arrow svg {
  display: grid;
  width: 0.75rem;
  height: 0.5rem;
}
@media screen and (width <= 768px) {
  .el_topTreatmentSection_group_list_item_link_arrow svg {
    width: 1rem;
    height: 0.625rem;
  }
}

.bl_topTreatmentSection_btnWrapper {
  display: flex;
  justify-content: center;
  margin-top: 3.75rem;
}
@media screen and (width <= 768px) {
  .bl_topTreatmentSection_btnWrapper {
    margin-top: 3.4375rem;
  }
}

/* ========================================
   DOCTOR セクション
======================================== */
/* 背景は支給素材 doctor.jpg(2880x2080) / doctor_sp.jpg(856x2380) をそれぞれ 1/2 に縮小しWebP化したもの。
   初回支給素材にはカンプ由来の見出し罫線ダイヤ2個(#BE978D)がベイクされており除去したが、
   2026-07-31 の差し替え素材にはダイヤ無し（ピクセル走査で確認済み）。
   今後差し替えるときも CSS 側(.el_commonSecTtl_line の ::before/::after)と二重にならないか要確認 */
.bl_topDoctorSection {
  position: relative;
  /* デザイン実測(PC): 背景切替(design 4761=json7092-2331)→見出し上端(design 4911=json7242-2331)=150、
     画像リング下端(design 5656)→次(CASE)背景切替(design 5801)=150。旧120は他セクションの150と不整合だった */
  padding-block: 9.375rem;
  overflow: hidden;
}
@media screen and (width <= 768px) {
  .bl_topDoctorSection {
    padding-block: 6.25rem;
  }
}

.el_topDoctorSection_bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url(../img/top/doctor-bg.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media screen and (width <= 768px) {
  .el_topDoctorSection_bg {
    background-image: url(../img/top/doctor-bg-sp.webp);
  }
}

/* 共通インナー方式（_doctor.scss等と同じ）。max-width=内容幅1140+左右padding20×2=1180。
   旧1440+150方式は1024pxで内容709pxまで痩せ、帯ごとに幅が揺れていたため統一 */
.bl_topDoctorSection_inner {
  position: relative;
  z-index: 1;
  max-width: 73.75rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* 写真とテキストの高さ差から上下中央揃えが正しいレイアウト */
.bl_topDoctorSection_content {
  display: flex;
  align-items: center;
  gap: 3.75rem;
  margin-top: 3.75rem;
}
@media screen and (width <= 768px) {
  .bl_topDoctorSection_content {
    flex-direction: column;
    align-items: center;
    gap: 1.875rem;
    /* SP実測: 見出し罫線→写真が約64〜80px（円形装飾のエッジ判定で誤差あり）。他セクションと同様80に統一 */
  }
}
.bl_topDoctorSection_content {
  /* タブレット幅(underPC)からも縦積みにする。gap/margin-top寸法はSP専用(underTB)のまま維持 */
}
@media screen and (width <= 1024px) {
  .bl_topDoctorSection_content {
    flex-direction: column;
    align-items: center;
  }
}

@media screen and (width <= 1024px) {
  .bl_topDoctorSection_profile {
    text-align: center;
  }
}
@media screen and (width <= 768px) {
  .bl_topDoctorSection_profile {
    text-align: center;
  }
}

/* 白枠は画像から右下にずらして重なる装飾のため、img自体ではなく::afterの疑似要素で表現する */
.bl_topDoctorSection_img {
  position: relative;
  display: block;
  flex-shrink: 0;
  width: 26.25rem;
  aspect-ratio: 420/580;
}
@media screen and (width <= 768px) {
  .bl_topDoctorSection_img {
    width: 15rem;
    aspect-ratio: 240/330;
  }
}

/* 白枠(::after)は写真の上に乗る必要があるため$z-doctor-img超のz-indexを明示（無指定だと裏に回る） */
.bl_topDoctorSection_img::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  translate: 0.3125rem 0.3125rem;
  border: 0.125rem solid var(--base);
  border-radius: 13.125rem;
  pointer-events: none;
}
@media screen and (width <= 768px) {
  .bl_topDoctorSection_img::after {
    translate: 0.25rem 0.1875rem;
  }
}

.bl_topDoctorSection_img img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 13.125rem;
}

.bl_topDoctorSection_textWrapper {
  flex: 1;
}
@media screen and (width <= 1024px) {
  .bl_topDoctorSection_textWrapper {
    width: 100%;
  }
}
@media screen and (width <= 768px) {
  .bl_topDoctorSection_textWrapper {
    width: 100%;
  }
}

.el_topDoctorSection_profile_post {
  font-family: var(--jaFont);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--txtColor);
}
@media screen and (width <= 768px) {
  .el_topDoctorSection_profile_post {
    font-size: 1rem;
    letter-spacing: 0.05em;
  }
}

.el_topDoctorSection_profile_name {
  margin-top: 0.625rem;
  font-family: var(--jaFont);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--txtColor);
}
@media screen and (width <= 768px) {
  .el_topDoctorSection_profile_name {
    margin-top: 0.3125rem;
    font-size: 1.875rem;
    line-height: 1;
    letter-spacing: 0.05em;
  }
}

.bl_topDoctorSection_body {
  margin-top: 3.75rem;
  display: flex;
  flex-direction: column;
}
@media screen and (width <= 768px) {
  .bl_topDoctorSection_body {
    margin-top: 1.875rem;
  }
}

/* デザイン実測(PC): body内はcopy→lead=30、lead→ボタンは60とgapが不均一（Frame653 gap30 + 別枠でボタンまでgap60）。
   一律gapでは表現できないため個別margin-topに分解する（SPは旧gap20の見た目を維持するため据え置き） */
.el_topDoctorSection_body_lead {
  margin-top: 1.875rem;
}
@media screen and (width <= 768px) {
  .el_topDoctorSection_body_lead {
    margin-top: 1.875rem;
  }
}

.el_topDoctorSection_body_copy {
  font-family: var(--jaFont);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--txtColor);
}
@media screen and (width <= 768px) {
  .el_topDoctorSection_body_copy {
    font-size: 1.25rem;
    line-height: 1.8;
    letter-spacing: 0.05em;
  }
}

.el_topDoctorSection_body_lead {
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--txtColor);
}

.bl_topDoctorSection_btnWrapper {
  margin-top: 3.75rem;
  width: fit-content;
}
@media screen and (width <= 1024px) {
  .bl_topDoctorSection_btnWrapper {
    margin-inline: auto;
  }
}
@media screen and (width <= 768px) {
  .bl_topDoctorSection_btnWrapper {
    margin-top: 3.75rem;
  }
}

/* ========================================
   CASE セクション
======================================== */
/* 背景はgrayBeige 20%のベージュ。var(--base)(白)だとテーブル行の白ボーダーが不可視化するため不採用 */
.bl_topCaseSection {
  /* デザイン実測(PC): CASE見出し→次(COLUMN)見出しの距離が実装より約58px大きいため他セクションと同じ150に統一 */
  padding-block: 9.375rem;
  background-color: rgb(from var(--grayBeige) r g b/20%);
}
@media screen and (width <= 768px) {
  .bl_topCaseSection {
    padding-block: 6.25rem;
  }
}

/* 共通インナー方式（内容幅1140 ＋ 逃げ20×2 ＝ 1180）。根拠は .bl_topDoctorSection_inner のコメント参照 */
.bl_topCaseSection_inner {
  max-width: 73.75rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.bl_topCaseSection_list {
  margin-top: 5rem;
  display: grid;
  /* minmax(0,1fr): カード内の nowrap 注記の min-content 幅で列が縮まなくなり中間幅で横スクロールするのを防ぐ */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3.75rem;
  /* タブレット幅(underPC)から2列。gapはSP実測値を流用、margin-topはPC値を維持。
     切替基準「4列時カード幅200px未満で2列」を解くとvw≧1020となり、underPCがそのまま境界 */
}
@media screen and (width <= 1024px) {
  .bl_topCaseSection_list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.25rem;
    row-gap: 3.75rem;
  }
}
@media screen and (width <= 768px) {
  .bl_topCaseSection_list {
    /* SP実測: 見出し罫線→カードが約81px。PC値80を踏襲するよう修正（旧60は過小） */
    margin-top: 5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.25rem;
    row-gap: 3.75rem;
  }
}

.bl_topCaseSection_btnWrapper {
  margin-top: 3.4375rem;
  display: flex;
  justify-content: center;
}
@media screen and (width <= 768px) {
  .bl_topCaseSection_btnWrapper {
    margin-top: 2.5rem;
  }
}

.el_topCaseSection_empty {
  margin-top: 5rem;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
}
@media screen and (width <= 768px) {
  .el_topCaseSection_empty {
    margin-top: 3.75rem;
  }
}

/*========================================
共通コンポーネント候補: bl_commonCaseCard（症例一覧ページでも再利用想定）
========================================*/
/* stretched-linkパターンの基準。本文リンクの::afterをこの要素基準でカード全面に広げる */
.bl_commonCaseCard {
  position: relative;
}

.bl_commonCaseCard_imgWrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 240/300;
  overflow: hidden;
}

.bl_commonCaseCard_imgWrapper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.3s ease-out;
}

/* アイキャッチ未設定時: 地色にロゴを中央配置（キャンペーンカードと同じ考え方）。
   coverのままだと縦長枠でロゴが引き伸ばされるので、is-noImage側でcontainに戻す */
.bl_commonCaseCard_imgWrapper.is-noImage {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--beige);
}

/* 幅は枠に対する比率で持たせる（カンプ実測 173/240）。rem固定にするとSP428で枠177pxに対し
   ロゴ173pxとなり左右2pxしか残らずベタ付きになる */
.bl_commonCaseCard_imgWrapper.is-noImage img {
  width: 72.0833333333%;
  height: auto;
  object-fit: contain;
}

/* ボカシオーバーレイ: backdrop-filterで背後の写真をぼかす + 半透明黒で可読性確保。
   文言は「センシティブ画像」＋「(クリックで閲覧可能です)」の2行（カンプ共通）。
   背景色だけ症例一覧・症例記事側で上書きしている（_case.scss）。
   z-indexは本文リンクの::after（stretched-link）より優先させ、ボカシ中は必ずこのbuttonが
   クリックを受けるようにする */
.bl_commonCaseCard_blurOverlay {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  width: 100%;
  height: 100%;
  padding-inline: 1.25rem;
  border: none;
  background-color: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(0.875rem);
  -webkit-backdrop-filter: blur(0.875rem);
  cursor: pointer;
  transition: opacity 0.3s ease-out;
}
@media screen and (width <= 768px) {
  .bl_commonCaseCard_blurOverlay {
    /* padding20だと折返すため12pxに調整。428px未満はfluidで比例縮小し、端数はnowrapで吸収 */
    padding-inline: 0.75rem;
  }
}

/* ホバー: ボカシ(backdrop-filter)と背景色は維持したまま、文言テキストだけうっすら薄くする
   （オーバーレイ全体をopacity 0.85にすると背後のセンシティブ画像が透けて見えるため廃止） */
@media (any-hover: hover) {
  .bl_commonCaseCard_blurOverlay:hover .el_commonCaseCard_blurOverlay_txt,
  .bl_commonCaseCard_blurOverlay:hover .el_commonCaseCard_blurOverlay_sub {
    opacity: 0.7;
  }
}

/* JS制御: クリックでis-active付与＋button自体をdisabled化する一方向解除。再クリック・ボカシ復帰は無し。
   pointer-events:noneでクリックを下の本文リンク（::after のstretched-link）へ通す */
.bl_commonCaseCard_blurOverlay.is-active {
  opacity: 0;
  pointer-events: none;
}

.el_commonCaseCard_blurOverlay_txt {
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--white);
  text-align: center;
  transition: opacity 0.3s ease-out;
}
@media screen and (width <= 768px) {
  .el_commonCaseCard_blurOverlay_txt {
    font-size: clamp(0.6125rem, 3.2710280374vw, 0.875rem);
    letter-spacing: 0.05em;
    white-space: nowrap;
  }
}

.bl_commonCaseCard_body {
  margin-top: 1.25rem;
  transition: opacity 0.3s ease-out;
}

/* 本文リンク: ::afterでbl_commonCaseCard全体を覆うstretched-linkにし、画像側も含めた
   カード全面をクリック範囲にする（TOP / 症例一覧・関連症例 / 治療メニュー記事の症例写真ブロックで共通） */
.bl_commonCaseCard_body__link {
  display: block;
  color: var(--txtColor);
}

.bl_commonCaseCard_body__link::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
}

.bl_commonCaseCard_body__link:focus-visible {
  outline: 0.125rem solid var(--accent);
  outline-offset: 0.125rem;
}

/* カード全体を一体でホバーさせる: stretched-linkの:hoverを:has()でカードへ伝播し、画像と本文をまとめて反応させる。
   ボカシオーバーレイ上のホバーも同じ扱いにする（オーバーレイはカード上部を覆うので、ここだけ無反応だと挙動が割れる）。
   ただしオーバーレイ自体はopacityの対象に含めない（backdrop-filterごと薄まりセンシティブ画像が透けて見えるため） */
@media (any-hover: hover) {
  .bl_commonCaseCard:has(:is(.bl_commonCaseCard_body__link, .bl_commonCaseCard_blurOverlay):hover) .bl_commonCaseCard_imgWrapper img,
  .bl_commonCaseCard:has(:is(.bl_commonCaseCard_body__link, .bl_commonCaseCard_blurOverlay):hover) .bl_commonCaseCard_body {
    opacity: 0.7;
  }
}

.bl_commonCaseCard_tagList {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

/* padding-block:0でよい理由: line-height1.5×fontSize10=15pxで、タグの高さ15pxとちょうど一致するため */
.el_commonCaseCard_tagList_tag {
  padding-block: 0;
  padding-inline: 0.3125rem 0.375rem;
  border: 0.025rem solid var(--txtColor);
  border-radius: 0.625rem;
  font-family: var(--jaFont);
  font-size: 0.625rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--txtColor);
}

/* letter-spacingの分だけSPで2行折返すため、末尾の字送りを負のmargin-rightで相殺する */
.bl_commonCaseCard_ttl {
  margin-top: 0.25rem;
  margin-right: -0.05em;
}

/* 記事本文（治療メニュー記事）のh3見出しスタイルに負けないよう、リンク配下として詳細度を上げる */
.bl_commonCaseCard_body__link .bl_commonCaseCard_ttl {
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--txtColor);
}

.bl_commonCaseCard_table {
  margin-top: 0.625rem;
}

/* PC: ラベル100px固定+値可変。ラベル列とデータ列の間にgapは無い（0） */
.bl_commonCaseCard_table_row {
  display: grid;
  grid-template-columns: 6.25rem 1fr;
  column-gap: 0;
  padding-block: 0.21875rem;
  border-bottom: 0.0625rem solid var(--base);
}
@media screen and (width <= 768px) {
  .bl_commonCaseCard_table_row {
    grid-template-columns: 1fr;
    row-gap: 0.25rem;
  }
}

.bl_commonCaseCard_table_row dt {
  font-family: var(--jaFont);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--txtColor);
}

.bl_commonCaseCard_table_row dd {
  font-family: var(--jaFont);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--txtColor);
}

/* wysiwygの<p>等を想定し既定マージンを打ち消し、2ブロック目以降にだけ行間を持たせる */
.bl_commonCaseCard_table_row dd > * {
  margin-bottom: 0;
}

.bl_commonCaseCard_table_row dd > :first-child {
  margin-top: 0;
}

.bl_commonCaseCard_table_row dd > * + * {
  margin-top: 0.25rem;
}

.bl_commonCaseCard_note {
  margin-top: 0.25rem;
}

/* ※を固定幅の別要素にし、テキストが折返しても※直後の位置に揃うぶら下げインデントにする */
.bl_commonCaseCard_note p {
  display: flex;
  gap: 0.125rem;
  font-family: var(--jaFont);
  font-size: 0.625rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--txtColor);
}

.el_commonCaseCard_note_mark {
  flex-shrink: 0;
}

.el_commonCaseCard_note_txt {
  flex: 1;
}

.bl_commonCaseCard_note p + p {
  margin-top: 0.125rem;
}

/* PCはnowrap（テキスト243pxがカード幅240pxを3pxだけ超過するため）。vw<1180で折返しに戻す
   （1180はインナーmax-widthと同値。カード幅240pxを保てる下限のため直値。_footer.scssと同方式） */
.bl_commonCaseCard_note p:last-child {
  white-space: nowrap;
}
@media screen and (width <= 1180px) {
  .bl_commonCaseCard_note p:last-child {
    white-space: normal;
  }
}

/* ========================================
   COLUMN セクション
======================================== */
.bl_topColumnSection {
  /* デザイン実測(PC): 背景切替(design 6976=json9307-2331)→見出し上端(design 7126=json9457-2331)=150、
     ボタン下端(design 7680)→次(RESERVE)背景切替(design 7831)=150。旧120は他セクションの150と不整合だった */
  padding-block: 9.375rem;
  background-color: var(--base);
}
@media screen and (width <= 768px) {
  .bl_topColumnSection {
    padding-block: 6.25rem;
  }
}

/* 共通インナー方式（内容幅1140 ＋ 逃げ20×2 ＝ 1180）。根拠は .bl_topDoctorSection_inner のコメント参照 */
.bl_topColumnSection_inner {
  max-width: 73.75rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* PC:240px×4列/SP:2列（CASEと同一パターン）。subgridでカード内部の行を揃え、高さ差があっても横に揃う。
   row-gapは0にし行間は各要素のmargin-topで表現。縦積み時のカード間隔は:nth-child(n+3)側で追加 */
.bl_topColumnSection_list {
  margin-top: 5rem;
  display: grid;
  /* minmax(0,1fr): カード内テキストの min-content 幅で列が縮まなくなり中間幅で横スクロールするのを防ぐ */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  /* 5行 = 画像 / 日付 / カテゴリー / タイトル / ＃タグ */
  grid-template-rows: repeat(5, auto);
  column-gap: 3.75rem;
  row-gap: 0;
  /* タブレット幅から2列。subgrid実装は列数と無関係なため維持し列数のみ切替。margin-topはPC値を維持。
     切替点の導出過程は .bl_topCaseSection_list のコメント参照 */
}
@media screen and (width <= 1024px) {
  .bl_topColumnSection_list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.25rem;
  }
}
@media screen and (width <= 768px) {
  .bl_topColumnSection_list {
    /* SP実測: 見出し罫線→カードが約81px。PC値80を踏襲するよう修正（旧60は過小） */
    margin-top: 5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.25rem;
  }
}

.bl_topColumnSection_list_item {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
}

/* 2カラムなので3枚目以降が新しい行の先頭。_list側breakpointと必ず揃えること（ズレると間隔が抜ける） */
@media screen and (width <= 1024px) {
  .bl_topColumnSection_list_item:nth-child(n+3) .bl_commonColumnCard_imgWrapper {
    margin-top: 3.75rem;
  }
}

.bl_topColumnSection_btnWrapper {
  margin-top: 3.75rem;
  display: flex;
  justify-content: center;
}

.el_topColumnSection_empty {
  margin-top: 5rem;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
}
@media screen and (width <= 768px) {
  .el_topColumnSection_empty {
    margin-top: 3.75rem;
  }
}

/*========================================
共通コンポーネント候補: bl_commonColumnCard（コラム一覧ページでも再利用想定）
========================================*/
/* 既定（コラム一覧など通常フローで使う場合）: カードは普通のブロック */
.bl_commonColumnCard,
.bl_commonColumnCard_link,
.bl_commonColumnCard_body {
  display: block;
}

/* subgrid対応（TOP限定）: article/a/bodyをdisplay:contentsにし4行のsubgridへ揃える。コラム一覧は不採用 */
.bl_topColumnSection_list_item .bl_commonColumnCard,
.bl_topColumnSection_list_item .bl_commonColumnCard_link,
.bl_topColumnSection_list_item .bl_commonColumnCard_body {
  display: contents;
}

/* display:contentsの<a>自体にはopacityを適用できないため、実ボックスを持つ4要素それぞれに付与 */
.bl_commonColumnCard_imgWrapper,
.bl_commonColumnCard_meta,
.bl_commonColumnCard_ttl,
.bl_commonColumnCard_tagList {
  transition: opacity 0.3s ease-out;
}

@media (any-hover: hover) {
  .bl_commonColumnCard_link:hover .bl_commonColumnCard_imgWrapper,
  .bl_commonColumnCard_link:hover .bl_commonColumnCard_meta,
  .bl_commonColumnCard_link:hover .bl_commonColumnCard_ttl,
  .bl_commonColumnCard_link:hover .bl_commonColumnCard_tagList {
    opacity: 0.7;
  }
}

.bl_commonColumnCard_imgWrapper {
  width: 100%;
  aspect-ratio: 240/144;
  overflow: hidden;
  background-color: var(--beige);
}

.bl_commonColumnCard_imgWrapper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* アイキャッチ未設定時はnoimage画像をそのまま流し込むため、通常時ルールのみで足りる（is-noImage指定は不要） */
/* _bodyはdisplay:contentsでboxを持てないため、画像との区切り線はsubgrid上で直後に来るmetaへ移設 */
.bl_commonColumnCard_meta {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 0.625rem;
  padding-top: 0.625rem;
  border-top: 0.0625rem solid var(--grayBeige);
}

.el_commonColumnCard_meta_date {
  font-family: var(--jaFont);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--txtColor);
}

.bl_commonColumnCard_ttl {
  margin-top: 0.625rem;
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: var(--txtColor);
}

/* TOPは行数を固定して省略（カンプ準拠でPC1行／SP2行）。一覧ページは折り返しのままなのでTOP限定スコープにする */
.bl_commonColumnCard_tagList {
  margin-top: 0.625rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.125rem;
}

.el_commonColumnCard_tagList_tag {
  font-family: var(--jaFont);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--txtColor);
}
@media screen and (width <= 768px) {
  .el_commonColumnCard_tagList_tag {
    font-size: 0.75rem;
  }
}

/* 予約3ボタンは実装しない（SPの追従予約バー .bl_commonSpReserveBar が同じ役割を担うため） */
/*========================================
共通: ブロック見出し（single-doctor.php専用。TOPのbl_commonSecTtlとは別物・左寄せ＋正方形マーカー）
========================================*/
.bl_doctorBlockTtl {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.bl_doctorBlockTtl .el_doctorBlockTtl_mark {
  flex-shrink: 0;
  width: 0.625rem;
  height: 0.625rem;
  background-color: var(--grayBeige);
}

.bl_doctorBlockTtl .el_doctorBlockTtl_txt {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

/*========================================
一覧（archive-doctor.php）
========================================*/
/* 余白はTOPと同方式: セクション=padding-block／インナー=max-width+margin-inline:auto+padding-inline */
/* 上端余白は_featuredBand側のpadding-topが担うため、セクション自身のpadding-topは0にする */
.bl_doctorArchiveSection {
  padding-block: 0 12.5rem;
  /* タブレット専用カンプが無いためunderPC以下はSP値に寄せる */
}
@media screen and (width <= 1024px) {
  .bl_doctorArchiveSection {
    padding-block: 0 6.25rem;
  }
}

/* 共通インナーはTOPと同方式: 幅はmax-width、左右余白はpadding-inlineのみ */
.bl_doctorArchiveSection_inner {
  max-width: 65rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* 院長ブロックの全ブリード背景写真帯。高さ固定せず上下paddingでカンプの見え幅に合わせる */
.bl_doctorArchiveSection_featuredBand {
  padding-block: 9.375rem 6.875rem;
  background-image: url(../img/doctor/archive-bg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
@media screen and (width <= 1024px) {
  .bl_doctorArchiveSection_featuredBand {
    padding-block: 3.75rem 6.25rem;
  }
}
@media screen and (width <= 768px) {
  .bl_doctorArchiveSection_featuredBand {
    background-image: url(../img/doctor/archive-bg-sp.png);
  }
}

/* 院長フィーチャーカード。PC横並び(計約1012px)は1024px以下で収まらないため縦積みに切替 */
.bl_doctorArchiveFeatured {
  display: flex;
  align-items: center;
  /* gapは60ではなく48（60のままだとインナーからはみ出すため調整） */
  gap: 3rem;
  /* underPCでcolumnへ切替 */
}
@media screen and (width <= 1024px) {
  .bl_doctorArchiveFeatured {
    flex-direction: column;
    align-items: center;
  }
}
.bl_doctorArchiveFeatured {
  /* SPは縦積みのgapを0にし、写真〜bodyの余白は _body の margin-top だけで持つ（縦余白はmargin-top方針） */
}
@media screen and (width <= 768px) {
  .bl_doctorArchiveFeatured {
    gap: 0;
  }
}

/* 角丸+白ラインはTOPの .bl_topDoctorSection_img と同方式（::afterをずらして重ねる）。リングがはみ出すためoverflow:hiddenは付けない */
.bl_doctorArchiveFeatured .bl_doctorArchiveFeatured_imgWrapper {
  position: relative;
  flex-shrink: 0;
  display: block;
  width: 26.25rem;
  /* underPCは写真の過大化防止でPC幅420pxを上限、SPは240pxまで縮小 */
}
@media screen and (width <= 1024px) {
  .bl_doctorArchiveFeatured .bl_doctorArchiveFeatured_imgWrapper {
    width: 100%;
    max-width: 26.25rem;
    margin-inline: auto;
  }
}
@media screen and (width <= 768px) {
  .bl_doctorArchiveFeatured .bl_doctorArchiveFeatured_imgWrapper {
    max-width: 15rem;
  }
}

.bl_doctorArchiveFeatured .bl_doctorArchiveFeatured_imgWrapper::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  translate: 0.3125rem 0.3125rem;
  border: 0.125rem solid var(--base);
  border-radius: 13.125rem;
  pointer-events: none;
}
@media screen and (width <= 768px) {
  .bl_doctorArchiveFeatured .bl_doctorArchiveFeatured_imgWrapper::after {
    translate: 0.25rem 0.1875rem;
  }
}

.bl_doctorArchiveFeatured .bl_doctorArchiveFeatured_imgWrapper img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 420/580;
  object-fit: cover;
  border-radius: 13.125rem;
}
@media screen and (width <= 1024px) {
  .bl_doctorArchiveFeatured .bl_doctorArchiveFeatured_imgWrapper img {
    aspect-ratio: 240/330;
  }
}

.bl_doctorArchiveFeatured .bl_doctorArchiveFeatured_body {
  width: 33.25rem;
  max-width: 100%;
}
@media screen and (width <= 1024px) {
  .bl_doctorArchiveFeatured .bl_doctorArchiveFeatured_body {
    width: 100%;
    text-align: center;
  }
}
.bl_doctorArchiveFeatured .bl_doctorArchiveFeatured_body {
  /* SPはgap(48)+margin-top(60)で108px空いていた。カンプ実測（写真下613→「院長」字面上650, 字面のぶん約6px）は約31px */
}
@media screen and (width <= 768px) {
  .bl_doctorArchiveFeatured .bl_doctorArchiveFeatured_body {
    margin-top: 1.9375rem;
  }
}

.bl_doctorArchiveFeatured_body .bl_doctorArchiveFeatured_body_ttlGroup {
  display: flex;
  flex-direction: column;
}

.bl_doctorArchiveFeatured_body_ttlGroup .el_doctorArchiveFeatured_body_ttlGroup_post {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.bl_doctorArchiveFeatured_body_ttlGroup .el_doctorArchiveFeatured_body_ttlGroup_name {
  /* margin-topは付けない: 行間(line-height1.5)だけで隣接ラベルとの間隔が足りるため */
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.bl_doctorArchiveFeatured_body_ttlGroup .el_doctorArchiveFeatured_body_ttlGroup_nameEn {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.bl_doctorArchiveFeatured_body .bl_doctorArchiveFeatured_body_txt {
  margin-top: 3.75rem;
  /* 親がunderPCでtext-align:centerのため、紹介文だけここで左寄せに戻す（カンプは氏名のみ中央寄せ） */
}
@media screen and (width <= 1024px) {
  .bl_doctorArchiveFeatured_body .bl_doctorArchiveFeatured_body_txt {
    text-align: left;
  }
}

.bl_doctorArchiveFeatured_body_txt p {
  color: var(--txtColor);
  /* 紹介文（旧デザインは明朝。フォント統一で single 側と同じ var(--jaFont) に変更） */
  font-family: var(--jaFont);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.05em;
  /* SP428で「あのとき相談してよかった」の行がダウンオチする対策。カンプ実測は 18px/0.05em/括弧半角ツメ で
     字面372px・想定幅388px(428-左右20)に収まるが、htmlの scrollbar-gutter:stable が15px取るため実幅は373pxしかない。
     字の大きさ・行送りはカンプ実値を保ったまま、トラッキングだけ0.9→0.4pxに詰めて378.9px→368.4pxにする */
}
@media screen and (width <= 768px) {
  .bl_doctorArchiveFeatured_body_txt p {
    letter-spacing: 0.0222222222em;
  }
}

.bl_doctorArchiveFeatured_body .bl_doctorArchiveFeatured_body_btnWrapper {
  margin-top: 3.75rem;
}
@media screen and (width <= 1024px) {
  .bl_doctorArchiveFeatured_body .bl_doctorArchiveFeatured_body_btnWrapper {
    margin-inline: auto;
    width: fit-content;
    margin-top: 3.4375rem;
  }
}

/* 医師グリッド（院長以外） */
/* subgridでカード内部の行をカード間で揃える（氏名2行でもボタン位置が揃う）。row-gap:0で行間は各要素のmargin-topで表現 */
.bl_doctorArchiveSection_list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto);
  column-gap: 3.125rem;
  row-gap: 0;
  /* 背景写真帯下端からの間隔。帯側padding-bottom込みでカンプの見え方に合わせる */
  margin-top: 2.5rem;
  /* 769–1024px帯はカード幅が足りず氏名が折り返すため列間を30pxに詰める */
}
@media screen and (width <= 1024px) {
  .bl_doctorArchiveSection_list {
    column-gap: 1.875rem;
  }
}
.bl_doctorArchiveSection_list {
  /* 769px以下は2カラムにする（3カラムだとカード幅が痩せすぎるため）。列間はSPカンプ相当の20px */
}
@media screen and (width <= 768px) {
  .bl_doctorArchiveSection_list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.25rem;
    margin-top: 3.125rem;
  }
}
.bl_doctorArchiveSection_list {
  /* カード幅270px固定+中央寄せ。underTBだと429–768pxで院長ブロックと幅が揃わないためunderSP(≤480)限定 */
}
@media screen and (width <= 480px) {
  .bl_doctorArchiveSection_list {
    grid-template-columns: 1fr;
    max-width: 16.875rem;
    margin-inline: auto;
  }
}

/* PCは3列なので4枚目以降が2行目の先頭になる */
.bl_doctorArchiveCard:nth-child(n+4) .bl_doctorArchiveCard_imgWrapper {
  margin-top: 3.75rem;
}

/* 769px以下は2列なので3枚目以降が新しいカード行の先頭になる */
@media screen and (width <= 768px) {
  .bl_doctorArchiveCard:nth-child(n+3) .bl_doctorArchiveCard_imgWrapper {
    margin-top: 3.75rem;
  }
}

/* 480px以下は1列なので2枚目以降すべてがカード行の先頭（上の指定より後に書いて上書きする） */
@media screen and (width <= 480px) {
  .bl_doctorArchiveCard:nth-child(n+2) .bl_doctorArchiveCard_imgWrapper {
    margin-top: 3.75rem;
  }
}

.bl_doctorArchiveCard {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
}

.bl_doctorArchiveCard .bl_doctorArchiveCard_imgWrapper {
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
}

.bl_doctorArchiveCard_imgWrapper img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

/* is-noImage: アイキャッチ未設定時のプレースホルダー。wrapper側にaspect-ratioを持たせ行の高さを揃える */
.bl_doctorArchiveCard_imgWrapper.is-noImage {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--beige);
}

/* 通常時のimgはcover+aspect-ratio 1/1なので、ロゴが引き伸ばされないよう打ち消す。
   幅は枠に対する比率（キャンペーン・症例カードと同じ 173/240）でSPでもベタ付きしない */
.bl_doctorArchiveCard_imgWrapper.is-noImage img {
  width: 72.0833333333%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

/* subgrid行に要素を直接並べるためbody自身はボックスを持たない。写真との間隔は_post側のmargin-topで確保 */
.bl_doctorArchiveCard .bl_doctorArchiveCard_body {
  display: contents;
}

.bl_doctorArchiveCard_body .el_doctorArchiveCard_body_post {
  margin-top: 1.5rem;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

/* グリッドカードは氏名と英字名が同一行（院長カードは別行でこれが正しい・カンプ確認済み） */
.bl_doctorArchiveCard_body .bl_doctorArchiveCard_body_ttlGroup {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  margin-top: 0.625rem;
  /* SPは氏名/英字名が別行（縦の間隔は英字名側のmargin-topで確保）。切替点を768でなく1080pxにするのは
     1055px付近で氏名が折り返すため（安全側の1080pxで縦積みに倒す） */
}
@media screen and (width <= 1080px) {
  .bl_doctorArchiveCard_body .bl_doctorArchiveCard_body_ttlGroup {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
}

.bl_doctorArchiveCard_body .el_doctorArchiveCard_body_name {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.1em;
}

.bl_doctorArchiveCard_body .el_doctorArchiveCard_body_nameEn {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.1em;
  /* 1080px以下は氏名の下段に回り込むため、行間はここで確保する（上のttlGroup参照） */
}
@media screen and (width <= 1080px) {
  .bl_doctorArchiveCard_body .el_doctorArchiveCard_body_nameEn {
    margin-top: 0.3125rem;
  }
}

.bl_doctorArchiveCard_body .bl_doctorArchiveCard_body_btnWrapper {
  margin-top: 1.25rem;
}

/* グリッドカードのボタンはカード全幅（院長カードは270px固定で正しい） */
.bl_doctorArchiveCard_body_btnWrapper .bl_commonBtn {
  width: 100%;
}

.el_doctorArchiveSection_empty {
  margin-top: 2.5rem;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  text-align: center;
}

/*========================================
記事（single-doctor.php）。下層共通の大見出し帯は使用しない（ヘッダー直後にプロフィールが続く構成）
========================================*/
/* 余白はTOPと同方式: セクション=padding-block／インナー=max-width+margin-inline:auto+padding-inline */
/* 一覧と同じ全ブリード背景だが本文途中で白へ抜けるため帯要素に切り出せず、セクション自身のbackgroundに置く。
   固定高レイヤーは敷かない（フェードは画像に焼き込み済み） */
.bl_doctorSingleSection {
  padding-block: 9.375rem 12.5rem;
  background-image: url(../img/doctor/single-bg.png);
  background-position: center top;
  background-size: 100% auto;
  background-repeat: no-repeat;
}
@media screen and (width <= 1024px) {
  .bl_doctorSingleSection {
    padding-block: 2.5rem 5rem;
  }
}
@media screen and (width <= 768px) {
  .bl_doctorSingleSection {
    background-image: url(../img/doctor/single-bg-sp.png);
  }
}

/* インナーは一覧（.bl_doctorArchiveSection_inner）と同方式: 幅はmax-width、左右余白のみpadding-inline */
.bl_doctorSingleSection_inner {
  max-width: 65rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* プロフィール。PC横並び（420+60+520=1000＝インナー内寸ぴったり）は1024px以下で収まらないため、underPCから縦積みに切替 */
/* gapはカンプ実測60（写真右端640→本文左端700）。SPカンプも写真下端460→氏名行ボックス上端≒520で同値 */
.bl_doctorSingleProfile {
  display: flex;
  align-items: flex-start;
  gap: 3.75rem;
  /* underPCではrow→columnへ切替（gap60はそのまま縦の間隔として効く） */
}
@media screen and (width <= 1024px) {
  .bl_doctorSingleProfile {
    flex-direction: column;
  }
}

.bl_doctorSingleProfile .bl_doctorSingleProfile_imgWrapper {
  flex-shrink: 0;
  display: block;
  width: 26.25rem;
  /* 縦積みになるunderPC帯では写真が過大化しないようPC実測幅(420px)を上限にする */
}
@media screen and (width <= 1024px) {
  .bl_doctorSingleProfile .bl_doctorSingleProfile_imgWrapper {
    width: 100%;
    max-width: 26.25rem;
    margin-inline: auto;
  }
}
.bl_doctorSingleProfile .bl_doctorSingleProfile_imgWrapper {
  /* PC値max-width:420のままだと429–768pxで本文と同幅に広がりカンプと不一致のためfluidで縮小 */
}
@media screen and (width <= 768px) {
  .bl_doctorSingleProfile .bl_doctorSingleProfile_imgWrapper {
    width: clamp(16.875rem, 84.1121495327vw, 22.5rem);
    max-width: 100%;
  }
}

.bl_doctorSingleProfile_imgWrapper img {
  display: block;
  width: 100%;
  aspect-ratio: 420/420;
  object-fit: cover;
}
@media screen and (width <= 1024px) {
  .bl_doctorSingleProfile_imgWrapper img {
    aspect-ratio: 360/360;
  }
}

/* 幅はカンプ実測520（本文左端700→インナー右端1220）。700にすると内寸1000に収まらずflexで500まで潰れ、
   紹介文の折り返し位置がカンプとズレるため実測値で固定する */
.bl_doctorSingleProfile .bl_doctorSingleProfile_body {
  width: 32.5rem;
  max-width: 100%;
}
@media screen and (width <= 1024px) {
  .bl_doctorSingleProfile .bl_doctorSingleProfile_body {
    width: 100%;
  }
}

/* SPは和文名/英字名が横並び。職種ラベルだけ上行に残すためwrap+width:100%で強制改行 */
.bl_doctorSingleProfile_body .bl_doctorSingleProfile_body_ttlGroup {
  display: flex;
  flex-direction: column;
}
@media screen and (width <= 768px) {
  .bl_doctorSingleProfile_body .bl_doctorSingleProfile_body_ttlGroup {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.3125rem;
  }
}

.bl_doctorSingleProfile_body_ttlGroup .el_doctorSingleProfile_body_ttlGroup_post {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  /* SPは名前行が row になるため、職種ラベルだけ1行を占有して改行を作る */
}
@media screen and (width <= 768px) {
  .bl_doctorSingleProfile_body_ttlGroup .el_doctorSingleProfile_body_ttlGroup_post {
    width: 100%;
  }
}

.bl_doctorSingleProfile_body_ttlGroup .el_doctorSingleProfile_body_ttlGroup_name {
  /* archive側と同じパターン。margin-topは付けない（理由は bl_doctorArchiveFeatured_body_ttlGroup_name 参照） */
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.bl_doctorSingleProfile_body_ttlGroup .el_doctorSingleProfile_body_ttlGroup_nameEn {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

/* 個人SNSアイコン列（Instagram/YouTube/TikTok/X/Threads） */
.bl_doctorSingleProfile_body .bl_doctorSingleSnsList {
  display: flex;
  align-items: center;
  /* 表示名付きの項目が増えると狭幅で1行に収まらないため折り返す */
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-top: 2.5rem;
}

.bl_doctorSingleSnsList .el_doctorSingleSnsList_item_link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: opacity 0.3s ease-out;
}
@media (any-hover: hover) {
  .bl_doctorSingleSnsList .el_doctorSingleSnsList_item_link:hover {
    opacity: 0.7;
  }
}

.bl_doctorSingleSnsList .el_doctorSingleSnsList_item_link img {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

/* Xだけカンプがひと回り小さい（他は24枠いっぱい） */
.bl_doctorSingleSnsList .el_doctorSingleSnsList_item_link img[src*="icon-x.svg"] {
  width: 1.3125rem;
  height: 1.3125rem;
}

/* 同じSNSを複数登録したときの見分け名（任意入力） */
.el_doctorSingleSnsList_item_link .el_doctorSingleSnsList_item_link_txt {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.bl_doctorSingleProfile_body .bl_doctorSingleProfile_body_txt {
  margin-top: 2rem;
}

.bl_doctorSingleProfile_body_txt p {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.bl_doctorSingleProfile_body .bl_doctorSingleProfile_body_block {
  margin-top: 2.5rem;
}

/* 経歴（年+内容の縦積みリスト） */
/* 左インデント20pxはPCカンプのみ。SPは本文左端と面一のためunderTBでは0に戻す */
.bl_doctorSingleProfile_body_block .bl_doctorSingleCareerList {
  margin-top: 0.625rem;
  padding-left: 1.25rem;
}
@media screen and (width <= 768px) {
  .bl_doctorSingleProfile_body_block .bl_doctorSingleCareerList {
    padding-left: 0;
  }
}

.bl_doctorSingleCareerList .bl_doctorSingleCareerList_row {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
}

.bl_doctorSingleCareerList_row:not(:first-child) {
  margin-top: 0.625rem;
}

.bl_doctorSingleCareerList_row .el_doctorSingleCareerList_row_year {
  flex-shrink: 0;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.05em;
  /* 年が未入力の行は空dtをflexから外し、gap分(10px)のインデントを出さない */
}
.bl_doctorSingleCareerList_row .el_doctorSingleCareerList_row_year:empty {
  display: none;
}

.bl_doctorSingleCareerList_row .el_doctorSingleCareerList_row_txt {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.8;
  letter-spacing: 0.05em;
}

/* 所属学会／専門・担当（経歴と同じ縦積みリスト。チップ表示ではない） */
.bl_doctorSingleProfile_body_block .bl_doctorSingleTagList {
  display: flex;
  flex-direction: column;
  margin-top: 0.625rem;
  padding-left: 1.25rem;
  /* 経歴リストと同様、SPでは左インデント無し（本文左端と面一） */
}
@media screen and (width <= 768px) {
  .bl_doctorSingleProfile_body_block .bl_doctorSingleTagList {
    padding-left: 0;
  }
}

.bl_doctorSingleTagList .el_doctorSingleTagList_item {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

/* 縦方向の余白はgapでなくmargin-topで確保（プロジェクトルール） */
.bl_doctorSingleTagList .el_doctorSingleTagList_item:not(:first-child) {
  margin-top: 0.625rem;
}

/*========================================
関連セクション（先生監修コラム／先生担当キャンペーン）共通
========================================*/
.bl_doctorSingleRelatedSection {
  margin-top: 5rem;
  /* SPの上余白はカンプ実測60px */
}
@media screen and (width <= 768px) {
  .bl_doctorSingleRelatedSection {
    margin-top: 3.75rem;
  }
}

.bl_doctorSingleRelatedSection .bl_doctorSingleRelatedSection_btnWrapper {
  display: flex;
  justify-content: center;
  margin-top: 2.3125rem;
}
@media screen and (width <= 768px) {
  .bl_doctorSingleRelatedSection .bl_doctorSingleRelatedSection_btnWrapper {
    margin-top: 3.375rem;
  }
}

/* 先生監修コラム4カード（PC横並び／SP横スクロール）。subgridで5行をカード間で揃える（タイトル2行でも揃う）。
   row-gap:0、行間は各要素のmargin-topで表現 */
.bl_doctorSingleColumnList {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(5, auto);
  column-gap: 2.5rem;
  row-gap: 0;
  margin-top: 1.25rem;
}
@media screen and (width <= 768px) {
  .bl_doctorSingleColumnList {
    grid-template-columns: none;
    grid-auto-columns: clamp(11.71875rem, 58.4112149533vw, 15.625rem);
    grid-auto-flow: column;
    column-gap: 2.5rem;
    margin-top: 1.25rem;
    overflow-x: auto;
    /* カード左端でスナップさせる（TOPの .bl_topCampaignSection_list と同方式）。スクロールバーは非表示 */
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }
}

/* 右端の白フェード。マスクで抜く（帯を重ねない）。横スクロール時だけis-scrollFadeがcommon.js経由で付く */
@media screen and (width <= 768px) {
  .bl_doctorSingleColumnList.is-scrollFade {
    mask-image: linear-gradient(to right, #000 calc(100% - 3.125rem), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3.125rem), transparent 100%);
  }
}

/* liがグリッド項目として5行分subgridを受ける（article/a/bodyのcontents化だけではspanが効かない） */
.bl_doctorSingleColumnList_item {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
}
@media screen and (width <= 768px) {
  .bl_doctorSingleColumnList_item {
    scroll-snap-align: start;
  }
}

/* WebKit系はスクロールバーの非表示に疑似要素が必要（scrollbar-widthだけでは効かない） */
.bl_doctorSingleColumnList::-webkit-scrollbar,
.bl_doctorSingleCampaignList::-webkit-scrollbar {
  display: none;
}

/* subgrid対応: article/a/bodyはボックスを持たずli直下の5行に直接ぶら下げる（TOPと同一方式） */
.bl_doctorSingleColumnCard,
.bl_doctorSingleColumnCard .bl_doctorSingleColumnCard_link,
.bl_doctorSingleColumnCard_link .bl_doctorSingleColumnCard_body {
  display: contents;
}

/* display:contents の <a> 自体には opacity を適用できないため、実ボックスを持つ5要素へ付与する */
.bl_doctorSingleColumnCard_imgWrapper,
.el_doctorSingleColumnCard_body_date,
.bl_doctorSingleColumnCard_tagList,
.el_doctorSingleColumnCard_body_ttl,
.bl_doctorSingleColumnCard_hashList {
  transition: opacity 0.3s ease-out;
}

@media (any-hover: hover) {
  .bl_doctorSingleColumnCard_link:hover .bl_doctorSingleColumnCard_imgWrapper,
  .bl_doctorSingleColumnCard_link:hover .el_doctorSingleColumnCard_body_date,
  .bl_doctorSingleColumnCard_link:hover .bl_doctorSingleColumnCard_tagList,
  .bl_doctorSingleColumnCard_link:hover .el_doctorSingleColumnCard_body_ttl,
  .bl_doctorSingleColumnCard_link:hover .bl_doctorSingleColumnCard_hashList {
    opacity: 0.7;
  }
}

.bl_doctorSingleColumnCard_link .bl_doctorSingleColumnCard_imgWrapper {
  display: block;
  width: 100%;
}

.bl_doctorSingleColumnCard_imgWrapper img {
  display: block;
  width: 100%;
  aspect-ratio: 220/132;
  object-fit: cover;
}

/* is-noImage: ロゴ透かしプレースホルダー（キャンペーンカードのみ）。付けないとreset側のcoverでロゴが引き伸ばされる */
/* 枠の縦横比はラッパー側で保持（でないとロゴ高さまで潰れる） */
/* 関連コラムカードは通常imgとして流すため is-noImage は不要 */
.bl_doctorSingleCampaignCard_imgWrapper.is-noImage {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--beige);
  aspect-ratio: 220/275;
}

/* 幅は枠に対する比率で持たせる（プレースホルダー共通の 173/240）。他カードと同じ見え方に揃える */
.bl_doctorSingleCampaignCard_imgWrapper.is-noImage img {
  width: 72.0833333333%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

/* 区切り線は日付要素に持たせる（_bodyはcontentsでボックスを持てないため。TOPと同じ考え方） */
.bl_doctorSingleColumnCard_body .el_doctorSingleColumnCard_body_date {
  display: block;
  margin-top: 0.625rem;
  padding-top: 0.625rem;
  border-top: 0.0625rem solid var(--grayBeige);
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
}

.bl_doctorSingleColumnCard_body .bl_doctorSingleColumnCard_tagList {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.625rem;
}
@media screen and (width <= 768px) {
  .bl_doctorSingleColumnCard_body .bl_doctorSingleColumnCard_tagList {
    gap: 0.5rem;
  }
}

.bl_doctorSingleColumnCard_tagList .el_doctorSingleColumnCard_tagList_chip {
  padding-block: 0.125rem;
  padding-inline: 0.625rem;
  border: 0.025rem solid var(--txtColor);
  border-radius: 0.625rem;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.5;
}
@media screen and (width <= 768px) {
  .bl_doctorSingleColumnCard_tagList .el_doctorSingleColumnCard_tagList_chip {
    padding-inline: 0.3125rem;
    padding-block: 0rem;
  }
}

/* タイトルは1行で省略（横スクロールのカード幅が揃わなくなるため折り返さない） */
.bl_doctorSingleColumnCard_body .el_doctorSingleColumnCard_body_ttl {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 0.625rem;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.bl_doctorSingleColumnCard_body .bl_doctorSingleColumnCard_hashList {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.625rem;
  margin-top: 0.625rem;
}

.bl_doctorSingleColumnCard_hashList .el_doctorSingleColumnCard_hashList_item {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
}
@media screen and (width <= 768px) {
  .bl_doctorSingleColumnCard_hashList .el_doctorSingleColumnCard_hashList_item {
    font-size: 0.75rem;
  }
}

/* 先生担当キャンペーン4カード（PC横並び／SP横スクロール）。コラムカードと同じくsubgridで3行をカード間で揃える */
.bl_doctorSingleCampaignList {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-rows: repeat(3, auto);
  column-gap: 2.5rem;
  row-gap: 0;
  margin-top: 1.25rem;
}
@media screen and (width <= 768px) {
  .bl_doctorSingleCampaignList {
    grid-template-columns: none;
    grid-auto-columns: clamp(11.71875rem, 58.4112149533vw, 15.625rem);
    grid-auto-flow: column;
    column-gap: 2.5rem;
    margin-top: 1.25rem;
    overflow-x: auto;
    /* コラムスライダーと同一仕様（スナップ／スクロールバー非表示／右端の白フェード） */
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }
}

/* フェードは横スクロールが発生しているときだけ（サイト共通仕様。is-scrollFade は common.js が付ける） */
@media screen and (width <= 768px) {
  .bl_doctorSingleCampaignList.is-scrollFade {
    mask-image: linear-gradient(to right, #000 calc(100% - 3.125rem), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3.125rem), transparent 100%);
  }
}

/* グリッド項目は li。ここが3行分をまたいで subgrid を受ける */
.bl_doctorSingleCampaignList_item {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
}
@media screen and (width <= 768px) {
  .bl_doctorSingleCampaignList_item {
    scroll-snap-align: start;
  }
}

/* subgrid対応: article/a はボックスを持たず、画像・日付・タイトルを直接3行にぶら下げる */
.bl_doctorSingleCampaignCard,
.bl_doctorSingleCampaignCard .bl_doctorSingleCampaignCard_link {
  display: contents;
}

/* display:contents の <a> には opacity を適用できないため実ボックスを持つ3要素へ付与 */
.bl_doctorSingleCampaignCard_imgWrapper,
.el_doctorSingleCampaignCard_date,
.el_doctorSingleCampaignCard_ttl {
  transition: opacity 0.3s ease-out;
}

@media (any-hover: hover) {
  .bl_doctorSingleCampaignCard_link:hover .bl_doctorSingleCampaignCard_imgWrapper,
  .bl_doctorSingleCampaignCard_link:hover .el_doctorSingleCampaignCard_date,
  .bl_doctorSingleCampaignCard_link:hover .el_doctorSingleCampaignCard_ttl {
    opacity: 0.7;
  }
}

.bl_doctorSingleCampaignCard_link .bl_doctorSingleCampaignCard_imgWrapper {
  display: block;
  width: 100%;
}

.bl_doctorSingleCampaignCard_imgWrapper img {
  display: block;
  width: 100%;
  aspect-ratio: 220/275;
  object-fit: cover;
}

/* 画像と日付の間の区切り線。同ページのコラムカードおよび共通の .el_commonCampaignCard_date と同じ値 */
.bl_doctorSingleCampaignCard_link .el_doctorSingleCampaignCard_date {
  margin-top: 0.625rem;
  padding-top: 0.625rem;
  border-top: 0.0625rem solid var(--grayBeige);
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
}

/* タイトルは2行で省略（横スクロールのカード幅が揃わなくなるため3行以上に伸ばさない） */
.bl_doctorSingleCampaignCard_link .el_doctorSingleCampaignCard_ttl {
  display: -webkit-box;
  overflow: hidden;
  margin-top: 0.625rem;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/*========================================
フォーカスビジブル（キーボード操作時のアウトライン）
_header.scss の実装パターンに合わせる
========================================*/
.el_doctorSingleSnsList_item_link:focus-visible,
.bl_doctorSingleColumnCard_link:focus-visible,
.bl_doctorSingleCampaignCard_link:focus-visible {
  outline: 0.125rem solid var(--accent);
  outline-offset: 0.125rem;
}

/*========================================
B. ジャンプナビ
PCは横並び中央寄せ・hug幅、SPは縦積み・幅いっぱい。
========================================*/
.bl_treatmentArchiveSection_jumpNav {
  margin-top: 9.375rem;
}
@media screen and (width <= 768px) {
  .bl_treatmentArchiveSection_jumpNav {
    margin-top: 3.75rem;
  }
}

.bl_treatmentArchiveSection_jumpNav_list {
  display: flex;
  justify-content: center;
}
@media screen and (width <= 768px) {
  .bl_treatmentArchiveSection_jumpNav_list {
    flex-direction: column;
    align-items: center;
  }
}

/* gapではなくmargin-left/topで間隔を付与する（column+gapの同居はqc-gateで検出されるため回避） */
.bl_treatmentArchiveSection_jumpNav_list_item + .bl_treatmentArchiveSection_jumpNav_list_item {
  margin-left: 3.125rem;
}
@media screen and (width <= 768px) {
  .bl_treatmentArchiveSection_jumpNav_list_item + .bl_treatmentArchiveSection_jumpNav_list_item {
    margin-left: 0;
    margin-top: 0.625rem;
  }
}

.el_treatmentArchiveSection_jumpNav_list_item_link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* gapは付与しない: space-betweenと併記すると最小間隔が強制され最長ラベルが折返す */
  width: 16.875rem; /* 高さ44pxはborder1×2 + line-height1(fs16) + padding-block13×2 の合計 */
  max-width: 100%;
  padding-block: 0.8125rem;
  padding-inline: 1.25rem 0.625rem;
  border: 0.0625rem solid var(--txtColor);
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
  /* ホバーは枠線ボタン共通仕様（.bl_commonBtn）に統一 = 背景/枠線 --accent・文字 --base */
  transition: background-color 0.3s ease-out, color 0.3s ease-out, border-color 0.3s ease-out;
  /* SPも枠幅は270固定。320px幅でも270+左右余白が収まるためfluid化はしない */
}
@media (any-hover: hover) {
  .el_treatmentArchiveSection_jumpNav_list_item_link:hover {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--base);
  }
}

/* フォーカスビジブル（キーボード操作時のアウトライン。_header.scss の既存パターンに合わせる） */
.el_treatmentArchiveSection_jumpNav_list_item_link:focus-visible {
  outline: 0.125rem solid var(--accent);
  outline-offset: 0.125rem;
}

/* 矢印はcolor未指定で親から継承（svg stroke=currentColor。.bl_commonBtnと同じ扱い） */
.el_treatmentArchiveSection_jumpNav_list_item_link_arrow {
  display: inline-flex;
  flex-shrink: 0;
  transform: rotate(90deg);
}

.el_treatmentArchiveSection_jumpNav_list_item_link_arrow svg {
  display: block;
  width: 1rem;
  height: 0.625rem;
}

/*========================================
C. TREATMENT MENU: TOP流用の差分のみ上書き
TOPと異なり背景プレーン（薄ベージュ帯無し）。ボタン無しの分、下端余白も縮小する。
========================================*/
/* TREATMENT下/SEARCH上の余白配分は境界が見えないため実測合計値のみで確定 */
.pg_treatmentArchive .bl_topTreatmentSection {
  padding-block: 6.25rem 9.375rem;
  background-color: var(--base);
}
@media screen and (width <= 768px) {
  .pg_treatmentArchive .bl_topTreatmentSection {
    padding-block: 3.75rem 6.25rem;
  }
}

/*========================================
D. SEARCH BY PROBLEM: TOP流用の差分のみ上書き
========================================*/
.pg_treatmentArchive .bl_topSearchSection {
  padding-block: 0rem 12.5rem;
}
@media screen and (width <= 768px) {
  .pg_treatmentArchive .bl_topSearchSection {
    padding-block: 0rem 6.25rem;
  }
}

.pg_treatmentArchive .bl_topSearchSection_tabContainer {
  margin-top: 3.75rem;
}
@media screen and (width <= 768px) {
  .pg_treatmentArchive .bl_topSearchSection_tabContainer {
    margin-top: 2.5rem;
  }
}

@media screen and (width <= 768px) {
  .pg_treatmentArchive .bl_topTreatmentSection_tabs {
    margin-top: 2.5rem;
  }
}

/*========================================
ジャンプナビのスムーススクロール（_treatmentSingle.scss の INDEX と同方式・JS不要）。
:root編集不可のため:has()でスコープ。scroll-margin-topはfixed header分の逃げ。
========================================*/
:root:has(body.pg_treatmentArchive) {
  scroll-behavior: smooth;
}

/* TREATMENT: 逃げを付けない。真上に接しているジャンプナビ（クリック可能・PC44/SP98）が
   ヘッダーの帯(PC100/SP61)に入り込むと、透過ヘッダーがクリックを奪って押せなくなるため、
   ナビごと画面外へ送る。セクション自身のpadding-top(PC100/SP60)がヘッダーぶんの逃げを兼ね、
   見出しはヘッダー下端にそろう */
.pg_treatmentArchive .bl_topTreatmentSection {
  scroll-margin-top: 0;
}

/* SEARCH: padding-topが0なので逃げが必要（ヘッダーのナビ「お悩みからさがす」の着地点でもある）。
   真上はTREATMENTの下部余白でクリック要素は無いため、従来どおりヘッダー高ぶんだけ下げる */
.pg_treatmentArchive .bl_topSearchSection {
  scroll-margin-top: 6.25rem;
}
@media screen and (width <= 768px) {
  .pg_treatmentArchive .bl_topSearchSection {
    scroll-margin-top: 5rem;
  }
}

/*========================================
1. スタンダード版 ページ大見出し帯（archive側のbl_commonSingleTtlContainerとは意匠が別のため専用実装）
========================================*/
.bl_treatmentSingleTtl {
  width: 100%;
  padding-top: 4.1875rem;
  padding-bottom: 4.125rem;
  background-color: var(--base);
  background-image: url(../img/common/lower-ttl-bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
@media screen and (width <= 768px) {
  .bl_treatmentSingleTtl {
    padding-top: 3.4375rem;
    padding-bottom: 3.375rem;
    background-image: url(../img/common/lower-ttl-bg-sp.png);
  }
}

/* 帯の背景は親（.bl_treatmentSingleTtl）が全ブリードで持つため、幅を絞るのはこのインナーだけ */
.bl_treatmentSingleTtl_inner {
  max-width: 73.75rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media screen and (width <= 768px) {
  .bl_treatmentSingleTtl_inner {
    padding-inline: 1.25rem;
  }
}

.el_treatmentSingleTtl_cat {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
}
@media screen and (width <= 768px) {
  .el_treatmentSingleTtl_cat {
    font-size: 0.75rem;
  }
}

.el_treatmentSingleTtl_ttl {
  margin-top: 0.625rem;
  color: var(--accent);
  font-family: var(--jaFont);
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.05em;
}
@media screen and (width <= 768px) {
  .el_treatmentSingleTtl_ttl {
    font-size: 1.75rem;
  }
}

/*========================================
スタンダード版 メイン画像
========================================*/
.bl_treatmentSingleMainImg {
  width: 100%;
  margin-top: 9.375rem;
  padding-inline: 1.25rem;
}
@media screen and (width <= 768px) {
  .bl_treatmentSingleMainImg {
    margin-top: 3.75rem;
  }
}

.bl_treatmentSingleMainImg_inner {
  max-width: 51.875rem;
  margin-inline: auto;
}

.el_treatmentSingleMainImg_img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 830/474;
  object-fit: cover;
}
@media screen and (width <= 768px) {
  .el_treatmentSingleMainImg_img {
    aspect-ratio: 388/250;
  }
}

/*========================================
2. INDEX（目次。スタンダード・リッチ共通）
記事内H2から自動生成（single-treatment.php 側で抽出。JSは使わずCSS scroll-behavior:smoothで実現）
目次ブロック（acf/article-index）を本文中に置いた記事はその位置に、置いていない記事は本文の先頭に出る
========================================*/
/* 先頭に出る場合、上余白は本文ラッパー(padding-top)が作るためINDEX自身はmargin-topを持たない */
.bl_treatmentSingleIndex {
  max-width: 51.875rem;
  margin-inline: auto;
  padding-block: 1.875rem;
  padding-inline: 1.875rem;
  border: 0.0625rem solid var(--grayBeige);
  border-radius: 0.5rem;
}
@media screen and (width <= 768px) {
  .bl_treatmentSingleIndex {
    padding-block: 1.875rem;
    padding-inline: 1.25rem;
  }
}

/* 先頭h2はh2:first-childでmargin-top:0のため、隣接セレクタでINDEXがある時だけ本文側に余白を持たせる。
   ※既知の副作用（カンプ優先で60のまま据え置き・2026-08-07 ユーザー判断）:
   この値が下のh2の scroll-margin-top（PC100/SP80）より小さいぶんだけ、INDEXの先頭項目を
   クリックした着地でINDEX枠の下端が透過ヘッダーの帯に残る（PC40 / SP20px）。ヘッダーが
   クリックを奪うので、その帯に入った最後の項目（PCで約10px）は押せない。
   直すにはこの余白をh2の逃げと同値まで広げるしかない（オフセット調整では解消できない） */
.bl_treatmentSingleIndex + .bl_treatmentSingleBody_content {
  margin-top: 3.75rem;
}
@media screen and (width <= 768px) {
  .bl_treatmentSingleIndex + .bl_treatmentSingleBody_content {
    margin-top: 3.75rem;
  }
}

/* 目次ブロックを本文の途中に置いた場合。上下の余白はh2と同じ80で扱う
   （本文先頭に置いたときは本文ラッパーのpaddingが上余白を作るので0にする） */
.bl_treatmentSingleBody_content .bl_treatmentSingleIndex {
  margin-top: 5rem;
}

.bl_treatmentSingleBody_content .bl_treatmentSingleIndex:first-child {
  margin-top: 0;
}

.el_treatmentSingleIndex_ttl {
  color: var(--txtColor);
  font-family: var(--enFont);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
}

.bl_treatmentSingleIndex_list {
  display: flex;
  flex-direction: column;
  margin-top: 1.25rem;
}

.bl_treatmentSingleIndex_list_item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  margin-top: 0.625rem;
}
@media screen and (width <= 768px) {
  .bl_treatmentSingleIndex_list_item {
    margin-top: 0.625rem;
  }
}

.bl_treatmentSingleIndex_list_item:first-child {
  margin-top: 0;
}

.bl_treatmentSingleIndex_list_item::before {
  content: "";
  flex-shrink: 0;
  margin-top: 0.5625rem;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background-color: var(--grayBeige);
}

.el_treatmentSingleIndex_list_item_link {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  transition: opacity 0.3s ease-out;
}
@media (any-hover: hover) {
  .el_treatmentSingleIndex_list_item_link:hover {
    opacity: 0.7;
  }
}

/*========================================
3. リッチ版 FVヒーロー（背景/前景はACF main_imageを流用。縦組みチップは絶対配置だと見切れるため通常フロー配置）
========================================*/
/* FVの地はベージュ縦グラデ+不透明度10%写真の合成。下地は白のためここで背景色は敷かない */
.bl_treatmentSingleHero {
  position: relative;
  overflow: hidden;
  padding-top: 11.25rem;
  padding-bottom: 1.875rem;
  background-image: linear-gradient(to bottom, var(--beige) 0%, rgb(from var(--beige) r g b/0%) 100%);
}
@media screen and (width <= 768px) {
  .bl_treatmentSingleHero {
    padding-top: 6.25rem;
    padding-bottom: 2.5rem;
  }
}

.bl_treatmentSingleHero_bg {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
}

/* transform:scaleは使わない（ぼかし端がoverflow:hiddenからはみ出し段差が出るため）。下端はmask-imageでフェード */
.bl_treatmentSingleHero_bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.1;
  /* Figma LAYER_BLUR radiusはCSS blur()の約2倍の強さのため、radius値の半分をblur()に使う */
  filter: blur(0.3125rem);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 1.25rem), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.25rem), transparent 100%);
}

.el_treatmentSingleHero_watermark {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  display: flex;
  /* vertical-rlで主軸が縦になるため中央揃えにはjustify-contentが必要（align-itemsだけでは上端から流れる） */
  justify-content: center;
  align-items: center;
  margin: 0;
  color: var(--base);
  font-family: var(--jaFont);
  font-size: 4rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.1em;
  white-space: nowrap;
  writing-mode: vertical-rl;
  opacity: 0.7;
}
@media screen and (width <= 768px) {
  .el_treatmentSingleHero_watermark {
    position: relative;
    top: auto;
    bottom: auto;
    display: flex;
    width: max-content;
    margin-top: 0.625rem;
    font-size: clamp(2.25rem, 11.214953271vw, 3rem);
    writing-mode: horizontal-tb;
  }
}

/* PCは文字列がFV高さより長く、justify-contentで「どこを切るか」が決まる。
   左は先頭のCYTORIを上端に合わせる（末尾のCLINIC側が下端で切れる）。
   SPは横流しマルキー(width:max-content)で溢れないためjustify-contentは効かない＝PC専用の指定 */
.el_treatmentSingleHero_watermark-left {
  left: 1.25rem;
  justify-content: flex-start;
}
@media screen and (width <= 768px) {
  .el_treatmentSingleHero_watermark-left {
    left: 0;
    animation: treatmentSingleWatermarkMarquee 50s linear infinite;
  }
}
@media screen and (width <= 768px) and (prefers-reduced-motion: reduce) {
  .el_treatmentSingleHero_watermark-left {
    animation: none;
  }
}

/* SPマルキーの1セット。移動距離はビューポート幅でなくセット幅基準(-50%)のため画面幅でガタつかない */
@media screen and (width <= 768px) {
  .el_treatmentSingleHero_watermark_text {
    padding-right: clamp(2.25rem, 11.214953271vw, 3rem);
  }
}

.el_treatmentSingleHero_watermark_text:nth-child(2) {
  display: none;
}
@media screen and (width <= 768px) {
  .el_treatmentSingleHero_watermark_text:nth-child(2) {
    display: block;
  }
}

@keyframes treatmentSingleWatermarkMarquee {
  from {
    transform: translateX(0);
  }
  /* 2セット出力前提の値。丸め値だと1周ごとにずれて継ぎ目が出るので -50% のまま */
  to {
    transform: translateX(-50%);
  }
}
.el_treatmentSingleHero_watermark-right {
  right: 1.25rem;
  /* 180度回転しているため、flex-end＝文字列末尾のCLINICがFV上端に来る（先頭のCYTORI側が下端で切れる） */
  justify-content: flex-end;
  transform: rotate(180deg);
}
@media screen and (width <= 768px) {
  .el_treatmentSingleHero_watermark-right {
    display: none;
  }
}

.bl_treatmentSingleHero_inner {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: flex-start;
  gap: clamp(11.28125rem, 25.0694444444vw, 22.5625rem);
  /* gapはvw基準のfluidのままのため、内容幅が広がるぶんmain/decoの余裕は増える方向になる */
  max-width: 73.75rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media screen and (width <= 768px) {
  .bl_treatmentSingleHero_inner {
    display: block;
    padding-inline: 1.25rem;
  }
}

.bl_treatmentSingleHero_main {
  flex-shrink: 0;
  width: 25.3125rem;
  max-width: 100%;
}

/* padding-topは親(.bl_treatmentSingleHero)側が持つ。ここに追加すると_mainだけ下がり、隣の_decoと段差が出る */
.bl_treatmentSingleHero_ttlWrapper {
  padding-top: 0;
}

/* 通常長のタイトルは1行のまま（width:max-contentで親幅405を越えて伸びる）。長文だけチップ左端の手前で単語区切りに折り返す */
.el_treatmentSingleHero_ttlWrapper_en {
  width: max-content;
  max-width: calc(100% + clamp(11.28125rem, 25.0694444444vw, 22.5625rem) - 1.25rem);
  color: var(--accent);
  font-family: var(--enFont);
  font-size: 3rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.1em;
}
@media screen and (width <= 768px) {
  .el_treatmentSingleHero_ttlWrapper_en {
    width: auto;
    max-width: none;
    padding-right: clamp(5.25rem, 26.1682242991vw, 7rem);
    font-size: clamp(1.5rem, 7.476635514vw, 2rem);
  }
}

.el_treatmentSingleHero_ttlWrapper_ja {
  margin-top: 0.625rem;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
}
@media screen and (width <= 768px) {
  .el_treatmentSingleHero_ttlWrapper_ja {
    font-size: 0.875rem;
  }
}

.bl_treatmentSingleHero_portrait {
  margin-top: 3.75rem;
  width: 100%;
}
@media screen and (width <= 768px) {
  .bl_treatmentSingleHero_portrait {
    margin-top: 8.8125rem;
    width: clamp(14.765625rem, 73.5981308411vw, 19.6875rem);
  }
}

.el_treatmentSingleHero_portrait_img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 405/220;
  object-fit: cover;
  /* カンプのDROP_SHADOW実値: #AAA094 / 30% / offset 2,2 / blur 10（近似hex不可のためトークン合成） */
  box-shadow: 0.125rem 0.125rem 0.625rem rgb(from var(--grayBeige) r g b/30%);
  /* SPは比率が異なるため専用のaspect-ratioを指定する。PCの比率のままだと縦に伸びる */
}
@media screen and (width <= 768px) {
  .el_treatmentSingleHero_portrait_img {
    aspect-ratio: 318/170;
  }
}

.bl_treatmentSingleHero_deco {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}
@media screen and (width <= 768px) {
  .bl_treatmentSingleHero_deco {
    position: absolute;
    top: clamp(1.6875rem, 8.4112149533vw, 2.25rem);
    right: clamp(0.9375rem, 4.6728971963vw, 1.25rem);
    gap: 0.75rem;
  }
}

.el_treatmentSingleHero_deco_item {
  display: flex;
  box-sizing: border-box;
  align-items: center;
  width: 3.25rem;
  min-height: 22.25rem;
  padding: 1.25rem 0.625rem 0.625rem;
  border-radius: 0.25rem;
  background-color: rgb(from var(--base) r g b/90%);
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.25em;
  writing-mode: vertical-rl;
}
@media screen and (width <= 768px) {
  .el_treatmentSingleHero_deco_item {
    width: clamp(2.0625rem, 10.2803738318vw, 2.75rem);
    min-height: clamp(12.46875rem, 62.1495327103vw, 16.625rem);
    font-size: clamp(1.125rem, 5.6074766355vw, 1.5rem);
  }
}

.el_treatmentSingleHero_deco_item:nth-child(2) {
  margin-top: -2.625rem;
}
@media screen and (width <= 768px) {
  .el_treatmentSingleHero_deco_item:nth-child(2) {
    margin-top: -2.625rem;
  }
}

.bl_treatmentSingleHero_descBox {
  position: relative;
  z-index: 4;
  margin-top: 2.25rem;
  /* 内容幅の上限は子の .bl_treatmentSingleHero_descBox_inner が持つため、ここは逃げの20pxだけにする */
  padding-inline: 1.25rem;
}
@media screen and (width <= 768px) {
  .bl_treatmentSingleHero_descBox {
    margin-top: 0;
    padding-inline: 1.25rem;
  }
}

.bl_treatmentSingleHero_descBox_inner {
  max-width: 71.25rem;
  margin-inline: auto;
  padding-block: 2.5rem;
  padding-inline: 4.375rem;
  border-radius: 0.625rem;
  background-color: rgb(from var(--accent) r g b/70%);
}
@media screen and (width <= 768px) {
  .bl_treatmentSingleHero_descBox_inner {
    padding-block: 1.25rem;
    padding-inline: 0.875rem;
  }
}

/* 書体は var(--jaFont)（旧デザインは明朝。フォント統一で変更） */
.el_treatmentSingleHero_descBox_ttl {
  padding-bottom: 0.625rem;
  border-bottom: 0.0625rem solid var(--base);
  color: var(--base);
  font-family: var(--jaFont);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
@media screen and (width <= 768px) {
  .el_treatmentSingleHero_descBox_ttl {
    font-size: clamp(1.3125rem, 6.5420560748vw, 1.75rem);
  }
}

.el_treatmentSingleHero_descBox_body {
  margin-top: 1.875rem;
  color: var(--base);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

/*========================================
4. 本文ラッパー（bl_treatmentSingleBody）。the_content()の自由記入領域のため要素セレクタをフラットに列挙
========================================*/
.bl_treatmentSingleBody {
  width: 100%;
  padding-block: 6.25rem 12.5rem;
}
@media screen and (width <= 768px) {
  .bl_treatmentSingleBody {
    padding-block: 6.25rem 6.25rem;
  }
}

/* リッチ版はFVが本文のすぐ上まで来るため、上の余白をここで詰める */
.bl_treatmentSingleBody.is-rich {
  padding-top: 3.75rem;
}
@media screen and (width <= 768px) {
  .bl_treatmentSingleBody.is-rich {
    padding-top: 3.75rem;
  }
}

/* box-sizing:border-boxのため、内容幅830pxにするにはmax-widthを830+padding-inline20×2=870にする必要がある */
.bl_treatmentSingleBody_inner {
  max-width: 54.375rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

/* h2: ベージュ帯の見出し */
.bl_treatmentSingleBody_content h2 {
  margin-top: 5rem;
  padding: 0.375rem 1.25rem;
  background-color: var(--beige);
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1.625rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
@media screen and (width <= 768px) {
  .bl_treatmentSingleBody_content h2 {
    /* SPカンプの帯は1行40px（=2+36+2）。上下paddingはPCの6ではなく2 */
    padding-block: 0.125rem;
    font-size: 1.5rem;
  }
}

.bl_treatmentSingleBody_content h2:first-child {
  margin-top: 0;
}

/* h3: 左に縦バーが付く見出し */
.bl_treatmentSingleBody_content h3 {
  margin-top: 3.125rem;
  padding-block: 0.125rem;
  padding-left: 1rem;
  border-left: 0.25rem solid var(--grayBeige);
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
@media screen and (width <= 768px) {
  .bl_treatmentSingleBody_content h3 {
    font-size: 1.125rem;
  }
}

/* h4: 先頭に■マーカーが付く見出し */
.bl_treatmentSingleBody_content h4 {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 2.5rem;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
@media screen and (width <= 768px) {
  .bl_treatmentSingleBody_content h4 {
    font-size: 1rem;
  }
}

.bl_treatmentSingleBody_content h4::before {
  content: "";
  flex-shrink: 0;
  width: 0.625rem;
  height: 0.625rem;
  background-color: var(--grayBeige);
}

/* 見出し同士が隣り合う時は従来の余白を維持(拡大余白は文章→見出しの間だけに効かせる) */
.bl_treatmentSingleBody_content :is(h2, h3, h4) + h2 {
  margin-top: 3.75rem;
}

.bl_treatmentSingleBody_content :is(h2, h3, h4) + h3 {
  margin-top: 1.875rem;
}

.bl_treatmentSingleBody_content :is(h2, h3, h4) + h4 {
  margin-top: 1.25rem;
}

/* h4直後の段落は見出しとのグルーピングを密にする */
.bl_treatmentSingleBody_content h4 + p {
  margin-top: 0.625rem;
}

/* 段落。目次ブロックの見出し（el_treatmentSingleIndex_ttl）は独自指定のため除外。
   除外を素の :not() で書くと詳細度が1つ上がり、ACFブロック側の打ち消し
   （.bl_treatmentSingleBody_content .bl_treatmentBlockXxx … {margin-top:0}）が負けて
   ブロック内部に本文の余白が漏れる。詳細度を上げない :where(:not(…)) で包むこと */
.bl_treatmentSingleBody_content p:where(:not([class*=treatmentSingleIndex])) {
  margin-top: 1.25rem;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.bl_treatmentSingleBody_content p:where(:not([class*=treatmentSingleIndex])):first-child {
  margin-top: 0;
}

/* 症例カードのdd欄はwysiwygで<p>に包まれ本文pのfont-sizeを拾うため、ここでdd側指定に戻す */
.bl_treatmentSingleBody_content .bl_commonCaseCard_table_row dd p {
  font-size: inherit;
}

/* リスト（・ulと1)2)3)ol）。ACFブロック内リスト・症例カード（タグ一覧含む）・目次は独自レイアウトのため除外 */
/* マーカーはブラウザ既定でなく「・」「1)」のカスタム */
.bl_treatmentSingleBody_content ul:not([class*=bl_treatmentBlock]):not([class*=bl_commonPriceTable]):not([class*=bl_commonCaseCard]):where(:not([class*=treatmentSingleIndex], .bl_commonCaseCard *)) {
  margin-top: 1.25rem;
  padding-left: 0;
  list-style: none;
}

.bl_treatmentSingleBody_content ol:not([class*=bl_treatmentBlock]):not([class*=bl_commonPriceTable]):not([class*=bl_commonCaseCard]):where(:not([class*=treatmentSingleIndex], .bl_commonCaseCard *)) {
  margin-top: 1.25rem;
  padding-left: 0;
  list-style: none;
  counter-reset: cytoriTreatmentOl;
}

/* インデントは18px（見た目上のテキスト位置がずれるため、単純な23pxにはしない） */
.bl_treatmentSingleBody_content ul:not([class*=bl_treatmentBlock]):not([class*=bl_commonPriceTable]):not([class*=bl_commonCaseCard]):where(:not([class*=treatmentSingleIndex], .bl_commonCaseCard *)) > li,
.bl_treatmentSingleBody_content ol:not([class*=bl_treatmentBlock]):not([class*=bl_commonPriceTable]):not([class*=bl_commonCaseCard]):where(:not([class*=treatmentSingleIndex], .bl_commonCaseCard *)) > li {
  position: relative;
  padding-left: 1.125rem;
}

.bl_treatmentSingleBody_content ul:not([class*=bl_treatmentBlock]):not([class*=bl_commonPriceTable]):not([class*=bl_commonCaseCard]):where(:not([class*=treatmentSingleIndex], .bl_commonCaseCard *)) > li::before {
  content: "・";
  position: absolute;
  left: 0;
}

.bl_treatmentSingleBody_content ol:not([class*=bl_treatmentBlock]):not([class*=bl_commonPriceTable]):not([class*=bl_commonCaseCard]):where(:not([class*=treatmentSingleIndex], .bl_commonCaseCard *)) > li {
  counter-increment: cytoriTreatmentOl;
}

.bl_treatmentSingleBody_content ol:not([class*=bl_treatmentBlock]):not([class*=bl_commonPriceTable]):not([class*=bl_commonCaseCard]):where(:not([class*=treatmentSingleIndex], .bl_commonCaseCard *)) > li::before {
  content: counter(cytoriTreatmentOl) ")";
  position: absolute;
  left: 0;
}

.bl_treatmentSingleBody_content li:where(:not([class*=treatmentSingleIndex], .bl_commonCaseCard *)) {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.bl_treatmentSingleBody_content li + li:where(:not([class*=treatmentSingleIndex], .bl_commonCaseCard *)) {
  margin-top: 0.25rem;
}

/* 画像・キャプション */
.bl_treatmentSingleBody_content img {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 1.875rem;
}

.bl_treatmentSingleBody_content figure {
  margin-top: 1.875rem;
}

.bl_treatmentSingleBody_content figure img {
  margin-top: 0;
  aspect-ratio: 388/250;
  object-fit: cover;
}

.bl_treatmentSingleBody_content figcaption {
  margin-top: 0.625rem;
  color: #000;
  font-family: var(--jaFont);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

/* テーブル（料金表等がブロックで挿入される想定の最低限の可読性担保） */
.bl_treatmentSingleBody_content table {
  width: 100%;
  margin-top: 1.875rem;
  border-collapse: collapse;
}

.bl_treatmentSingleBody_content th,
.bl_treatmentSingleBody_content td {
  padding: 0.75rem 1rem;
  border: 0.0625rem solid var(--grayBeige);
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: left;
}

/* アコーディオン。対象はWP標準の「詳細」ブロック（core/detailsが出す.wp-block-details）だけ。
   タグセレクタ（details / summary）で書くとFAQのACFカスタムブロックにも当たり、
   ブロック側が宣言していないプロパティ（justify-content等）が残って崩れるため、
   リスト（上のul/olのnot()）と同じ考え方でACFブロックには当てない。
   ※ FAQブロックの見た目は_blocks.scss側で完結している */
.bl_treatmentSingleBody_content .wp-block-details {
  margin-top: 1.25rem;
  padding: 1.25rem;
  border-bottom: 0.0625rem solid var(--grayBeige);
  transition: background-color 0.3s ease-out;
}

.bl_treatmentSingleBody_content .wp-block-details[open] {
  background-color: var(--beige);
}

.bl_treatmentSingleBody_content .wp-block-details > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  cursor: pointer;
  list-style: none;
}

.bl_treatmentSingleBody_content .wp-block-details > summary::-webkit-details-marker {
  display: none;
}

.bl_treatmentSingleBody_content .wp-block-details > summary::after {
  content: "+";
  flex-shrink: 0;
  color: var(--grayBeige);
  font-size: 1.25rem;
  line-height: 1;
  transition: rotate 0.35s ease-out;
}

.bl_treatmentSingleBody_content .wp-block-details[open] > summary::after {
  content: "+";
  rotate: 45deg;
}

.bl_treatmentSingleBody_content .wp-block-details > div,
.bl_treatmentSingleBody_content .wp-block-details > p {
  margin-top: 1rem;
}

/*========================================
5. 一覧へ戻るボタン（bl_commonBtnの差分調整。_parts.scssは編集しない。整列のみページ側クラスで上書き）
========================================*/
.bl_treatmentSingleBody_backBtnWrapper {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}
@media screen and (width <= 768px) {
  .bl_treatmentSingleBody_backBtnWrapper {
    margin-top: 2.5rem;
  }
}

.el_treatmentSingleBody_backBtn {
  justify-content: center;
}

/*========================================
INDEXのスムーススクロール（JS不要）。:root は_base.scss編集不可のため:has()でスコープ付与。
アンカーはscroll-margin-topで調整
========================================*/
:root:has(body.pg_treatmentSingle) {
  scroll-behavior: smooth;
}

/* 固定ヘッダー(PC100/SP61)の逃げ。上方の INDEX→本文 margin-top(60) との差分だけ
   INDEXがヘッダー帯に残る件は、そちらのコメント参照 */
.bl_treatmentSingleBody_content h2 {
  scroll-margin-top: 6.25rem;
}
@media screen and (width <= 768px) {
  .bl_treatmentSingleBody_content h2 {
    scroll-margin-top: 5rem;
  }
}

/*========================================
フォーカスビジブル（キーボード操作時のアウトライン。_header.scss/_footer.scss と同方式）
========================================*/
.el_treatmentSingleIndex_list_item_link:focus-visible,
.el_treatmentSingleBody_backBtn:focus-visible {
  outline: 0.125rem solid var(--accent);
  outline-offset: 0.125rem;
}

/*========================================
料金表 一覧（.pg_priceArchive）/ 料金表 記事（.pg_priceSingle）

PC: 本文カラム + 右のジャンプナビの2カラム構成（インナー1140中央寄せ）。
SP: ナビは本文の上（※文言の直後）に縦積みで表示する。
========================================*/
.bl_priceArchive {
  padding-top: 9.375rem;
  padding-bottom: 12.5rem;
  background-color: var(--base);
}
@media screen and (width <= 768px) {
  .bl_priceArchive {
    padding-top: 4.375rem;
    padding-bottom: 6.875rem;
  }
}

/* 本文830+ナビ220=1140が基準幅。本文を固定にすると1180px未満で横スクロールが出るため可変にする */
.bl_priceArchive_inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 13.75rem;
  column-gap: 5.625rem;
  max-width: 73.75rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media screen and (width <= 1024px) {
  .bl_priceArchive_inner {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    max-width: 51.875rem;
  }
}

/* ※料金は全て税込み表記です。 */
.el_priceArchive_note {
  grid-column: 1;
  grid-row: 1;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

/* 右カラムのジャンプナビ。PCはsticky（align-self:startにしないとgrid既定のstretchで動かない）。
   underPCは縦積みでstaticに戻す。topはfixedヘッダー分の逃げ（scroll-margin-topと同値）。 */
.bl_priceArchive_nav {
  position: sticky;
  top: 7.5rem;
  grid-column: 2;
  grid-row: 1/span 2;
  align-self: start;
}
@media screen and (width <= 1024px) {
  .bl_priceArchive_nav {
    position: static;
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    margin-top: 3.75rem;
  }
}

/* セレクトの並び。underPC以下は中央寄せの縦積みにする（PCは通常のブロック積み） */
@media screen and (width <= 1024px) {
  .bl_priceArchive_nav_list {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

.bl_priceArchive_nav_item + .bl_priceArchive_nav_item {
  margin-top: 1rem;
}

@media screen and (width <= 1024px) {
  .bl_priceArchive_nav_item {
    width: 16.875rem;
    max-width: 100%;
  }
}

/* カテゴリー名（selectのラベル） */
.el_priceArchive_nav_label {
  display: block;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.bl_priceArchive_nav_selectWrap {
  position: relative;
  margin-top: 0.625rem;
}

/* セレクト本体 */
.el_priceArchive_nav_select {
  display: block;
  width: 100%;
  padding-block: 0.8125rem;
  padding-left: 1.25rem;
  padding-right: 3rem;
  border: 0.0625rem solid var(--txtColor);
  border-radius: 0;
  background-color: transparent;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
  appearance: none;
  /* ホバー時の色変化は先方指示により無し */
  cursor: pointer;
}

/* 右端のシェブロン */
.el_priceArchive_nav_selectIcon {
  position: absolute;
  top: 50%;
  right: 1.25rem;
  display: block;
  width: 0.5rem;
  height: 0.3125rem;
  color: var(--txtColor);
  transform: translateY(-50%);
  pointer-events: none;
}

.el_priceArchive_nav_selectIcon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.bl_priceArchive_main {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
}
@media screen and (width <= 1024px) {
  .bl_priceArchive_main {
    grid-row: 3;
  }
}

/* 親カテゴリー（<p>要素）。下に#BE978Dの1px罫線（下辺のみ） */
.el_priceArchive_parentTtl {
  margin-top: 3.75rem;
  padding-block: 0.1875rem;
  padding-left: 0.625rem;
  border-bottom: 0.0625rem solid var(--accent);
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
@media screen and (width <= 768px) {
  .el_priceArchive_parentTtl {
    font-size: 1.625rem;
    letter-spacing: 0.05em;
  }
}

/* 子カテゴリー（<h2>） */
.el_priceArchive_childTtl {
  margin-top: 3.75rem;
  padding-block: 0.375rem;
  padding-inline: 1.25rem;
  background-color: var(--beige);
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1.625rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
@media screen and (width <= 768px) {
  .el_priceArchive_childTtl {
    padding-inline: 0.875rem;
    font-size: 1.5rem;
    letter-spacing: 0.05em;
  }
}

/* 料金表カード（共通コンポーネント .bl_commonPriceTable のラッパー） */
.bl_priceArchive_item {
  margin-top: 1.875rem;
}

/* 「施術の詳細を見る」ボタンをカード下40px・中央寄せ */
.bl_priceArchive_btnWrap {
  display: flex;
  justify-content: center;
  margin-top: 2.5rem;
}

.el_priceArchive_empty {
  margin-top: 3.75rem;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
}

/*========================================
料金表 記事（.pg_priceSingle）
セレクトも含めて一覧と完全に同じ2カラム構成のため、記事固有のスタイルは持たない。
本文は 親カテゴリー(p) + 子カテゴリー(h2) + 料金表カード + ボタン。
========================================*/
/*========================================
クリニック案内（.pg_about / page-about.php）。concept → ギャラリー → POINT → 診察情報 → 未成年の方へ → privacy の6セクション構成
========================================*/
/* セクション見出し（英字 + 和文）— clinic 4セクション共通 */
.el_aboutSecTtl_en {
  color: var(--accent);
  font-family: var(--enFont);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1em;
  text-align: center;
}

.el_aboutSecTtl_ja {
  margin-top: 1.25rem;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1.625rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1em;
  text-align: center;
  /* SPは幅に追従させる（375pxなど狭い画面で長い見出しが窮屈にならないよう fluid 化） */
}
@media screen and (width <= 768px) {
  .el_aboutSecTtl_ja {
    font-size: clamp(1.03125rem, 5.1401869159vw, 1.375rem);
  }
}

/*---------- concept ----------*/
.bl_aboutConcept {
  padding-top: 9.375rem;
  background-color: var(--base);
}
@media screen and (width <= 768px) {
  .bl_aboutConcept {
    padding-top: 3.75rem;
  }
}

.bl_aboutConcept_inner {
  max-width: 62.5rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.bl_aboutConcept_body {
  margin-top: 3.75rem;
}
@media screen and (width <= 768px) {
  .bl_aboutConcept_body {
    margin-top: 2.5rem;
    padding-inline: 1.25rem;
  }
}

.el_aboutConcept_body_p {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 2.5;
  letter-spacing: 0.1em;
  text-align: center;
  /* SPは中央寄せではなく左寄せ（意図的な仕様） */
}
@media screen and (width <= 768px) {
  .el_aboutConcept_body_p {
    line-height: 2;
    letter-spacing: 0.1em;
    text-align: left;
  }
}

.el_aboutConcept_body_p + .el_aboutConcept_body_p {
  margin-top: 1.875rem;
}
@media screen and (width <= 768px) {
  .el_aboutConcept_body_p + .el_aboutConcept_body_p {
    margin-top: 1.25rem;
  }
}

/*---------- 施設写真ストリップ ----------
   横一列を左へループ表示。overflow:hiddenはこの帯限定。PHPで3セット出力しトラックを1セット分だけ動かして継ぎ目なくループ */
.bl_aboutGallery {
  overflow: hidden;
  margin-top: 9.375rem;
  background-color: var(--base);
}
@media screen and (width <= 768px) {
  .bl_aboutGallery {
    margin-top: 6.25rem;
  }
}

.bl_aboutGallery_track {
  display: flex;
  width: max-content;
  animation: aboutGalleryMarquee 50s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .bl_aboutGallery_track {
    animation: none;
  }
}

@keyframes aboutGalleryMarquee {
  from {
    transform: translateX(0);
  }
  /* 3セット出力前提の値。丸め値だと1周ごとにずれて継ぎ目が出るので -100%/3 のまま */
  to {
    transform: translateX(-33.3333333333%);
  }
}
.bl_aboutGallery_list {
  display: flex;
  flex-shrink: 0;
}

/* 幅は画像の縦横比まかせ（固定値にすると両端の書き出し幅差で絵柄がズレる） */
.bl_aboutGallery_list_item {
  flex-shrink: 0;
}

.bl_aboutGallery_list_item img {
  display: block;
  width: auto;
  height: 13.375rem;
}
@media screen and (width <= 768px) {
  .bl_aboutGallery_list_item img {
    height: clamp(10.7rem, 50vw, 13.375rem);
  }
}

/*---------- property（特徴 / POINT） ----------*/
.bl_aboutProperty {
  padding-block: 9.375rem;
  background-color: var(--base);
}
@media screen and (width <= 768px) {
  .bl_aboutProperty {
    padding-block: 6.25rem;
  }
}

.bl_aboutProperty_list {
  margin-top: 3.75rem;
}
@media screen and (width <= 768px) {
  .bl_aboutProperty_list {
    margin-top: 2.5rem;
  }
}

.bl_aboutPoint_ttlWrap {
  padding-block: 0.5rem;
  border-block: 0.0625rem solid var(--grayBeige);
}

.el_aboutPoint_label {
  color: var(--grayBeige);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
}

.el_aboutPoint_ttl {
  margin-top: 0.25rem;
  /* --grayBeige(#AAA094)とは別の実測色。トークン未登録のため直値 */
  color: #9f9589;
  font-family: var(--jaFont);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
}

/* 写真(50%幅)と本文を grid の同一セルに重ねて配置。
   写真幅は%指定・本文幅は共通インナー(max1000)基準にすること */
.bl_aboutPoint_row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  /* ≤1024は重ねを解除し縦積み（写真→本文の順）。本文が潰れるため underPC で切替。
     縦積み関連の指定（この行・txtWrap・body・img）は underPC で揃えること */
}
@media screen and (width <= 1024px) {
  .bl_aboutPoint_row {
    display: flex;
    flex-direction: column;
  }
}

/* テキスト側のインナー。concept / privacy と幅を揃える */
.bl_aboutPoint_txtWrap {
  position: relative;
  z-index: 1;
  display: flex;
  grid-area: 1/1;
  width: 100%;
  max-width: 65rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media screen and (width <= 1024px) {
  .bl_aboutPoint_txtWrap {
    order: 2;
    max-width: none;
  }
}

/* width:max-contentで明示改行のみ折り返し、max-width:100%でインナーからのはみ出しを防ぐ */
.el_aboutPoint_body {
  width: max-content;
  max-width: 100%;
  padding-block: 2.5rem;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.05em;
}
@media screen and (width <= 1024px) {
  .el_aboutPoint_body {
    width: 100%;
    padding-block: 1.25rem 2.5rem;
  }
}

.bl_aboutPoint_img {
  position: relative;
  grid-area: 1/1;
  justify-self: end;
  align-self: stretch;
  width: 50%;
}
@media screen and (width <= 1024px) {
  .bl_aboutPoint_img {
    order: 1;
    width: 100%;
  }
}

/* img の height:100% を効かせるため picture 自体を block+全高にする */
.bl_aboutPoint_img picture {
  display: block;
  height: 100%;
}

/* 画像端の白フェードが狭幅で削られないよう、フェード側の端を固定する（通常行はleft、is-reverseは逆） */
.bl_aboutPoint_img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left center;
  /* 縦積み時はSP専用画像に差し替わるためアスペクト比を素材に合わせ、位置もcenterに戻す */
}
@media screen and (width <= 1024px) {
  .bl_aboutPoint_img img {
    aspect-ratio: 428/215;
    object-position: center;
  }
}

.bl_aboutPoint_row.is-reverse .bl_aboutPoint_img img {
  object-position: right center;
}
@media screen and (width <= 1024px) {
  .bl_aboutPoint_row.is-reverse .bl_aboutPoint_img img {
    object-position: center;
  }
}

/* 白フェードはPC画像にアルファで焼き込み済み（変更時は画像を再書き出し、::afterで重ねない）。
   SP画像はフェード無し。偶数POINTは写真が左でフェードも左右反転済み */
.bl_aboutPoint_row.is-reverse .bl_aboutPoint_img {
  justify-self: start;
}

.bl_aboutPoint_row.is-reverse .bl_aboutPoint_txtWrap {
  justify-content: flex-end;
}
@media screen and (width <= 1024px) {
  .bl_aboutPoint_row.is-reverse .bl_aboutPoint_txtWrap {
    justify-content: flex-start;
  }
}

/* 最終行だけ下線が付かないので個別に足す（件数可変のため :last-child で） */
.bl_aboutPoint:last-child .bl_aboutPoint_row {
  border-bottom: 0.0625rem solid var(--grayBeige);
}

/*---------- information（診察情報） ----------
   背景は --base + --grayBeige 20% の合成（近似hex不可） */
.bl_aboutInfo {
  padding-block: 9.375rem;
  background-color: var(--base);
  background-image: linear-gradient(rgb(from var(--grayBeige) r g b/20%), rgb(from var(--grayBeige) r g b/20%));
}
@media screen and (width <= 768px) {
  .bl_aboutInfo {
    padding-block: 6.25rem;
  }
}

.bl_aboutInfo_inner {
  max-width: 52.5rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.bl_aboutInfo_list {
  margin-top: 3.75rem;
}
@media screen and (width <= 768px) {
  .bl_aboutInfo_list {
    margin-top: 2.5rem;
  }
}

.bl_aboutInfo_list_item {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  padding-block: 1.25rem;
  border-bottom: 0.0625rem solid var(--base);
}
@media screen and (width <= 768px) {
  .bl_aboutInfo_list_item {
    display: block;
    padding-block: 1rem;
  }
}

.bl_aboutInfo_list_item:first-child {
  padding-top: 0;
}

.bl_aboutInfo_list_item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.el_aboutInfo_list_label {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.el_aboutInfo_list_value {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
@media screen and (width <= 768px) {
  .el_aboutInfo_list_value {
    margin-top: 0.875rem;
  }
}

.el_aboutInfo_list_value_line {
  display: block;
}

/*---------- 未成年の方へ ----------*/
/* SPで左右に地色を残す角丸カードのため padding-inline を持たせる（PCはmax-widthが効くため影響なし） */
.bl_aboutMinor {
  padding-block: 6.25rem;
  padding-inline: 1.25rem;
  background-color: var(--base);
  /* SPの左右余白は流動値。固定 rem(20) にすると 375px でボタンのラベルが1行に収まらない */
}
@media screen and (width <= 768px) {
  .bl_aboutMinor {
    padding-block: 6.25rem;
    padding-inline: 1.25rem;
  }
}

/* --beige 50% を地に、中央だけわずかに濃い斜めグラデーション */
.bl_aboutMinor_box {
  max-width: 62.5rem;
  margin-inline: auto;
  padding-block: 3.125rem;
  padding-inline: 1.25rem;
  border-radius: 0.625rem;
  background-image: linear-gradient(115deg, rgb(from var(--beige) r g b/50%) 0%, rgba(201, 188, 156, 0.35) 50%, rgb(from var(--beige) r g b/50%) 100%);
}
@media screen and (width <= 768px) {
  .bl_aboutMinor_box {
    padding-block: 3.125rem;
    padding-inline: 1.25rem;
  }
}

.el_aboutMinor_ttl {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1.625rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1em;
  text-align: center;
}
@media screen and (width <= 768px) {
  .el_aboutMinor_ttl {
    font-size: 1.375rem;
    letter-spacing: 0.1em;
  }
}

.el_aboutMinor_body {
  margin-top: 3.75rem;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
}
@media screen and (width <= 768px) {
  .el_aboutMinor_body {
    margin-top: 2.5rem;
  }
}

.bl_aboutMinor_btnWrap {
  display: flex;
  justify-content: center;
  margin-top: 3.75rem;
}
@media screen and (width <= 768px) {
  .bl_aboutMinor_btnWrap {
    margin-top: 2.5rem;
  }
}

/* ホバーは .bl_commonBtn と同じ bg --accent / 文字 --base に統一する */
.bl_aboutMinor_btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  width: 22.5rem;
  max-width: 100%;
  padding-block: 0.8125rem;
  padding-inline: 1.25rem;
  border: 0.0625rem solid var(--txtColor);
  color: var(--txtColor);
  transition: background-color 0.3s ease-out, color 0.3s ease-out, border-color 0.3s ease-out;
  /* SPは箱の内寸いっぱい。gap/paddingも流動値にしてラベルの折り返しを防ぐ
     （ラベル「親権者同意書をダウンロードする」はrem固定だと390px以下で段落ちする） */
}
@media screen and (width <= 768px) {
  .bl_aboutMinor_btn {
    gap: clamp(0.9375rem, 4.6728971963vw, 1.25rem);
    width: 100%;
    padding-inline: clamp(0.9375rem, 4.6728971963vw, 1.25rem);
  }
}
@media (any-hover: hover) {
  .bl_aboutMinor_btn:hover {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--base);
  }
}

.el_aboutMinor_btn_txt {
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
  /* ラベルは1行固定。狭幅では fs を流動値で縮めて収める（rem固定だと375px前後で段落ちする） */
}
@media screen and (width <= 768px) {
  .el_aboutMinor_btn_txt {
    font-size: clamp(0.75rem, 3.738317757vw, 1rem);
    white-space: nowrap;
  }
}

.el_aboutMinor_btn_icon {
  display: inline-flex;
  flex-shrink: 0;
}

.el_aboutMinor_btn_icon svg {
  display: block;
  width: 1.125rem;
  height: 1.25rem;
}

/*---------- privacy policy ----------*/
.bl_aboutPrivacy {
  padding-top: 9.375rem;
  padding-bottom: 12.5rem;
  background-color: var(--base);
  background-image: linear-gradient(rgb(from var(--grayBeige) r g b/20%), rgb(from var(--grayBeige) r g b/20%));
}
@media screen and (width <= 768px) {
  .bl_aboutPrivacy {
    padding-block: 6.25rem;
  }
}

.bl_aboutPrivacy_inner {
  max-width: 65rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.bl_aboutPrivacy_card {
  margin-top: 3.75rem;
  padding-block: 3.125rem;
  padding-inline: 4.6875rem;
  background-color: var(--base);
}
@media screen and (width <= 768px) {
  .bl_aboutPrivacy_card {
    margin-top: 2.5rem;
    padding-block: 3.125rem;
    padding-inline: 0.875rem;
  }
}

.el_aboutPrivacy_lead {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: center;
}
@media screen and (width <= 768px) {
  .el_aboutPrivacy_lead {
    text-align: left;
  }
}

.bl_aboutPrivacy_block {
  margin-top: 1.5625rem;
}

/* 見出しは先頭にダッシュが付く（例: 「− 個人情報の利用目的」） */
.el_aboutPrivacy_block_ttl {
  display: flex;
  gap: 0.5rem;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

/* ダッシュは本文と同じ黒ではなく薄い色。実測値は --grayBeige と一致するためトークンを使用 */
.el_aboutPrivacy_block_ttl::before {
  content: "−";
  flex-shrink: 0;
  color: var(--grayBeige);
}

.bl_aboutPrivacy_block_body {
  margin-top: 0.625rem;
}

.el_aboutPrivacy_block_p,
.el_aboutPrivacy_list_item {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.875;
  letter-spacing: 0.05em;
}

/* 行頭記号（a) や ・ 等）を flex-shrink:0 の自然幅にし、折り返し2行目が記号の下に潜らないようにする */
.el_aboutPrivacy_list_item {
  display: flex;
  gap: 0.25rem;
}

.el_aboutPrivacy_list_item_mark {
  flex-shrink: 0;
}

/*---------- パンくず（このページ限定の地色合わせ） ----------
   直前セクション(privacy)の背景と揃えないと白く浮くため同じ合成色にする */
.pg_about .bl_breadcrumb {
  background-image: linear-gradient(rgb(from var(--grayBeige) r g b/20%), rgb(from var(--grayBeige) r g b/20%));
}

/* 長いURLは狭い画面で折り返す */
.el_aboutPrivacy_link {
  color: var(--txtColor);
  overflow-wrap: anywhere;
  text-decoration: underline;
  transition: opacity 0.3s ease-out;
}
@media (any-hover: hover) {
  .el_aboutPrivacy_link:hover {
    opacity: 0.7;
  }
}

/*========================================
症例（一覧 archive-case.php / 検索結果 search.php / 記事 single-case.php）。search.php も .pg_caseArchive を共有
目次: 1本体 2絞り込み 3カード差分 4見出し帯 5スライダー 6本文/情報表 7関連症例
========================================*/
/*========================================
1. 一覧・検索結果 本体
========================================*/
.bl_caseArchive {
  padding-top: 9.375rem;
  padding-bottom: 12.5rem;
}
@media screen and (width <= 768px) {
  .bl_caseArchive {
    padding-top: 3.75rem;
    padding-bottom: 6.5625rem;
  }
}

/* 共通インナー方式（max-width=内容幅1140+左右padding20×2=1180）。
   underTBのpadding-inline:0は維持（_main/_sideが個別にpaddingを持つため二重防止） */
.bl_caseArchive_inner {
  max-width: 73.75rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media screen and (width <= 768px) {
  .bl_caseArchive_inner {
    padding-inline: 0;
  }
}

.bl_caseArchive_layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 13.75rem;
  column-gap: 5.625rem;
  align-items: start;
}
@media screen and (width <= 1024px) {
  .bl_caseArchive_layout {
    column-gap: 3.125rem;
  }
}
.bl_caseArchive_layout {
  /* SP: 絞り込みが先・カードが後（カンプ実測の並び）。DOM順はカード→絞り込みのため order で入替える */
}
@media screen and (width <= 768px) {
  .bl_caseArchive_layout {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 3.75rem;
  }
}

@media screen and (width <= 768px) {
  .bl_caseArchive_main {
    order: 2;
    padding-inline: 1.25rem;
  }
}

/* PC: 追従（固定ヘッダー外形100px + 余白30px = 130px を top に確保）。
   親 _layout の align-items:start が前提（stretch だとstickyが効かない） */
.bl_caseArchive_side {
  position: sticky;
  top: 8.125rem;
}
@media screen and (width <= 768px) {
  .bl_caseArchive_side {
    position: static;
    order: 1;
    padding-inline: 4.9375rem;
  }
}

.bl_caseArchive_list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 3.4375rem;
  row-gap: 3.75rem;
}
@media screen and (width <= 1024px) {
  .bl_caseArchive_list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.875rem;
  }
}
@media screen and (width <= 768px) {
  .bl_caseArchive_list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.25rem;
    row-gap: 3.75rem;
  }
}

.el_caseArchive_empty {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
}

/*========================================
2. 絞り込み（bl_caseFilter）
絞り込みはサーチページへ遷移。症例のない施術・カテゴリーは出さない（PHP側で除外）
========================================*/
.bl_caseFilter_group + .bl_caseFilter_group {
  margin-top: 1rem;
}

.el_caseFilter_label {
  display: block;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.bl_caseFilter_selectWrapper {
  position: relative;
  margin-top: 0.625rem;
}

/* 開閉アイコン（∨ を罫線2本で表現） */
.bl_caseFilter_selectWrapper::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.25rem;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 0.0625rem solid var(--txtColor);
  border-bottom: 0.0625rem solid var(--txtColor);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}

.el_caseFilter_select {
  width: 100%;
  padding-block: 0.875rem;
  padding-inline: 1.25rem 2.5rem;
  border: 0.0625rem solid var(--txtColor);
  border-radius: 0;
  background-color: transparent;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
  appearance: none;
  cursor: pointer;
  transition: opacity 0.3s ease-out;
}
@media screen and (width <= 768px) {
  .el_caseFilter_select {
    padding-block: 0.8125rem;
  }
}
@media (any-hover: hover) {
  .el_caseFilter_select:hover {
    opacity: 0.7;
  }
}

/* JS有効時はフォールバックの送信ボタンを隠す（change で自動送信するため） */
.el_caseFilter_submit {
  margin-top: 0.625rem;
  padding-block: 0.5rem;
  padding-inline: 1rem;
  border: 0.0625rem solid var(--txtColor);
  background-color: transparent;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 0.875rem;
  cursor: pointer;
}

.bl_caseFilter_form.is-jsEnabled .el_caseFilter_submit {
  display: none;
}

/*========================================
3. 症例カードの差分（bl_commonCaseCard 本体は _top.scss。ここでは症例ページ側の差分だけ上書きする）
========================================*/
.pg_caseArchive .bl_commonCaseCard_tagList,
.pg_caseSingle .bl_commonCaseCard_tagList {
  gap: 0.1875rem;
}

.pg_caseArchive .bl_commonCaseCard_ttl,
.pg_caseSingle .bl_commonCaseCard_ttl {
  margin-top: 0.25rem;
}

.pg_caseArchive .bl_commonCaseCard_note,
.pg_caseSingle .bl_commonCaseCard_note {
  margin-top: 0.125rem;
}

/* 一覧ページの地色は --base（白）のため、行の区切りはベージュにする */
.pg_caseArchive .bl_commonCaseCard_table_row,
.pg_caseSingle .bl_commonCaseCard_table_row {
  border-bottom-color: var(--beige);
}

/* 2行レイアウト（flex-direction/gap）はカード本体側（_top.scss）が持つ。ここは背景色だけ上書きする */
.pg_caseArchive .bl_commonCaseCard_blurOverlay,
.pg_caseSingle .bl_commonCaseCard_blurOverlay {
  background-color: rgb(from var(--txtColor) r g b/60%);
}

.el_commonCaseCard_blurOverlay_sub {
  color: var(--white);
  font-family: var(--jaFont);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: center;
  transition: opacity 0.3s ease-out;
}

/* 本文全体を記事リンクにする .bl_commonCaseCard_body__link の指定は _top.scss（カード本体側）にある */
.pg_caseArchive .bl_commonCaseCard_blurOverlay:focus-visible,
.pg_caseSingle .bl_commonCaseCard_blurOverlay:focus-visible {
  outline: 0.125rem solid var(--accent);
  outline-offset: 0.125rem;
}

/*========================================
4. 症例記事 見出し帯（bl_caseSingleTtl）
治療メニュー記事（bl_treatmentSingleTtl）と同じ帯背景・同じ位置だが、カテゴリーラベル行が無い。
========================================*/
/* h1の上下均等paddingで外形を作る。背景は下層共通アセット(lower-ttl-bg.png/-sp.png)を使う。
   旧 img/treatment/ttl-bg.png は色味が合わないため使用しない */
.bl_caseSingleTtl {
  width: 100%;
  padding-block: 5.125rem;
  background-color: var(--base);
  background-image: url(../img/common/lower-ttl-bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
@media screen and (width <= 768px) {
  .bl_caseSingleTtl {
    padding-block: 4.25rem;
    background-image: url(../img/common/lower-ttl-bg-sp.png);
  }
}

/* 共通インナー方式（1140+逃げ20×2=1180）。帯背景は親が全ブリードで持ち、幅を絞るのはこのインナーだけ */
.bl_caseSingleTtl_inner {
  max-width: 73.75rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media screen and (width <= 768px) {
  .bl_caseSingleTtl_inner {
    padding-inline: 1.25rem;
  }
}

.el_caseSingleTtl_ttl {
  color: var(--accent);
  font-family: var(--jaFont);
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.1em;
}
@media screen and (width <= 768px) {
  .el_caseSingleTtl_ttl {
    font-size: 1.75rem;
    letter-spacing: 0.1em;
  }
}

/*========================================
5〜6. 症例記事 本体
========================================*/
.bl_caseSingle {
  padding-top: 9.375rem;
  padding-bottom: 12.5rem;
}
@media screen and (width <= 768px) {
  .bl_caseSingle {
    padding-top: 3.75rem;
    padding-bottom: 6.25rem;
  }
}

.bl_caseSingle_inner {
  display: grid;
  grid-template-columns: 22.5rem minmax(0, 1fr);
  column-gap: 3.75rem;
  align-items: start;
  /* 共通インナー方式（内容幅1140 = 360 + gap60 + 本文720 ＋ 逃げ20×2 ＝ 1180） */
  max-width: 73.75rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
  /* タブレット幅からは2カラムを解除して縦積み */
}
@media screen and (width <= 1024px) {
  .bl_caseSingle_inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 3.75rem;
  }
}
@media screen and (width <= 768px) {
  .bl_caseSingle_inner {
    row-gap: 5rem;
    padding-inline: 1.25rem;
  }
}

/* 5. 写真スライダー */
.bl_caseSlider_list_item {
  display: none;
}

.bl_caseSlider_list_item.is-active {
  display: block;
}

/* 縦積み時は写真・キャプションとも同じ幅で中央寄せインセット（キャプションの文字は左寄せ） */
.bl_caseSlider_imgWrapper {
  width: 100%;
  aspect-ratio: 360/450;
  overflow: hidden;
  /* 縦積み後は写真が本文幅いっぱいに伸びないよう360で止めて中央寄せ */
}
@media screen and (width <= 1024px) {
  .bl_caseSlider_imgWrapper {
    width: 22.5rem;
    margin-inline: auto;
  }
}
@media screen and (width <= 768px) {
  .bl_caseSlider_imgWrapper {
    width: clamp(16.875rem, 84.1121495327vw, 22.5rem);
    margin-inline: auto;
  }
}

.bl_caseSlider_imgWrapper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.el_caseSlider_caption {
  margin-top: 0.625rem;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  /* 縦積み時は写真と同じ幅・同じ左端に揃える（テキストは左寄せのまま） */
}
@media screen and (width <= 1024px) {
  .el_caseSlider_caption {
    width: 22.5rem;
    margin-inline: auto;
  }
}
@media screen and (width <= 768px) {
  .el_caseSlider_caption {
    width: clamp(16.875rem, 84.1121495327vw, 22.5rem);
  }
}

.bl_caseSlider_nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3.125rem;
  margin-top: 1.875rem;
}

/* 前後ボタン（フッターのスケジュール送りと同一意匠） */
.el_caseSlider_nav_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  height: 1.875rem;
  border: 0.0625rem solid var(--txtColor);
  border-radius: 1.375rem;
  background-color: transparent;
  cursor: pointer;
  transition: background-color 0.3s ease-out;
}
@media (any-hover: hover) {
  .el_caseSlider_nav_btn:hover {
    background-color: var(--txtColor);
  }
}
.el_caseSlider_nav_btn:active {
  background-color: var(--txtColor);
}
.el_caseSlider_nav_btn:focus-visible {
  outline: 0.125rem solid var(--accent);
  outline-offset: 0.125rem;
}

.el_caseSlider_nav_icon {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--txtColor);
  transition: background-color 0.3s ease-out;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: 3.75rem 1.875rem;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: 3.75rem 1.875rem;
}

.el_caseSlider_nav_icon_prev {
  mask-image: url(../img/common/btn-arrow-left.svg);
  -webkit-mask-image: url(../img/common/btn-arrow-left.svg);
}

.el_caseSlider_nav_icon_next {
  mask-image: url(../img/common/btn-arrow-right.svg);
  -webkit-mask-image: url(../img/common/btn-arrow-right.svg);
}

@media (any-hover: hover) {
  .el_caseSlider_nav_btn:hover .el_caseSlider_nav_icon {
    background-color: var(--base);
  }
}

.el_caseSlider_nav_btn:active .el_caseSlider_nav_icon {
  background-color: var(--base);
}

.bl_caseSlider_dots {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.el_caseSlider_dot {
  display: block;
  flex-shrink: 0;
  width: 0.625rem;
  height: 0.625rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background-color: var(--txtColor);
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.3s ease-out;
}
.el_caseSlider_dot:focus-visible {
  outline: 0.125rem solid var(--accent);
  outline-offset: 0.125rem;
}

.el_caseSlider_dot.is-active {
  opacity: 1;
}

/*========================================
6. 本文（ブロックエディタの自由記入領域）
========================================*/
.bl_caseSingleBody_content > * + * {
  margin-top: 1.25rem;
}

.bl_caseSingleBody_content p {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.bl_caseSingleBody_content h2 {
  margin-top: 5rem;
  padding-block: 0.375rem;
  padding-inline: 1.25rem;
  background-color: var(--beige);
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1.625rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
@media screen and (width <= 768px) {
  .bl_caseSingleBody_content h2 {
    font-size: 1.5rem;
    letter-spacing: 0.05em;
  }
}

.bl_caseSingleBody_content h3 {
  margin-top: 3.125rem;
  padding-block: 0.125rem;
  padding-left: 1rem;
  border-left: 0.25rem solid var(--grayBeige);
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
@media screen and (width <= 768px) {
  .bl_caseSingleBody_content h3 {
    font-size: 1.125rem;
    letter-spacing: 0.05em;
  }
}

.bl_caseSingleBody_content h4 {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 2.5rem;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  /* h4 だけ h3(fs18)とは別値でfs16 */
}
@media screen and (width <= 768px) {
  .bl_caseSingleBody_content h4 {
    font-size: 1rem;
    letter-spacing: 0.05em;
    line-height: 1.5;
  }
}

.bl_caseSingleBody_content h4::before {
  content: "";
  flex-shrink: 0;
  width: 0.625rem;
  height: 0.625rem;
  background-color: var(--grayBeige);
}

/* 見出し同士が隣り合う時は従来の余白を維持(拡大余白は文章→見出しの間だけに効かせる) */
.bl_caseSingleBody_content :is(h2, h3, h4) + h2 {
  margin-top: 3.75rem;
}

.bl_caseSingleBody_content :is(h2, h3, h4) + h3 {
  margin-top: 1.875rem;
}

.bl_caseSingleBody_content :is(h2, h3, h4) + h4 {
  margin-top: 1.25rem;
}

/* h4直後の段落は見出しとのグルーピングを密にする */
.bl_caseSingleBody_content h4 + p {
  margin-top: 0.625rem;
}

.bl_caseSingleBody_content ul {
  margin-top: 1.25rem;
}

.bl_caseSingleBody_content ul li {
  position: relative;
  padding-left: 1.125rem;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
  list-style: none;
}

.bl_caseSingleBody_content ul li::before {
  content: "・";
  position: absolute;
  top: 0;
  left: 0;
}

.bl_caseSingleBody_content a {
  color: #3b6bab;
  text-decoration: underline;
  transition: opacity 0.3s ease-out;
}
@media (any-hover: hover) {
  .bl_caseSingleBody_content a:hover {
    opacity: 0.7;
  }
}

/* 強調文: マーカー風の下線（背景グラデーションで文字の下半分に重ねる） */
.bl_caseSingleBody_content strong,
.bl_caseSingleBody_content b {
  background: linear-gradient(transparent 60%, rgb(from var(--accent) r g b/50%) 60%);
  font-weight: 500;
}

.bl_caseSingleBody_content img {
  display: block;
  max-width: 100%;
  height: auto;
}

.bl_caseSingleInfo {
  margin-top: 1.875rem;
}

.bl_caseSingleInfo_row {
  display: grid;
  grid-template-columns: 12.5rem minmax(0, 1fr);
  column-gap: 0;
  padding-block: 0.75rem;
  border-bottom: 0.0625rem solid var(--beige);
}
@media screen and (width <= 768px) {
  .bl_caseSingleInfo_row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.25rem;
  }
}

.bl_caseSingleInfo_row dt {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.bl_caseSingleInfo_row dd {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

/* wysiwyg由来で<p>等に包まれるため既定marginを打ち消し、2ブロック目以降だけ行間を持たせる */
.bl_caseSingleInfo_row dd > * {
  margin-bottom: 0;
}

.bl_caseSingleInfo_row dd > :first-child {
  margin-top: 0;
}

.bl_caseSingleInfo_row dd > * + * {
  margin-top: 0.375rem;
}

.bl_caseSingleInfo_note {
  margin-top: 0.625rem;
}

.bl_caseSingleInfo_note p {
  display: flex;
  gap: 0.125rem;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.bl_caseSingleInfo_note p + p {
  margin-top: 0.125rem;
}

.el_caseSingleInfo_note_mark {
  flex-shrink: 0;
}

.el_caseSingleInfo_note_txt {
  flex: 1;
}

/*========================================
7. 関連する症例（bl_caseRelated）
カンプはカードが右端から見切れている＝横スクロール（治療メニュー記事の症例ブロックと同方式）
========================================*/
.bl_caseRelated {
  padding-bottom: 12.5rem;
}
@media screen and (width <= 768px) {
  .bl_caseRelated {
    padding-bottom: 6.5625rem;
  }
}

/* カード列はインナー右端で打ち切り、白フェードで「まだ続く」ことを示す。右も同じインセットが必要。
   共通インナー方式（1140+逃げ20×2=1180）、打ち切り位置はインナー内容右端 */
.bl_caseRelated_inner {
  max-width: 73.75rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media screen and (width <= 768px) {
  .bl_caseRelated_inner {
    padding-inline: 1.25rem;
  }
}

.el_caseRelated_ttl {
  padding-block: 0.1875rem;
  padding-left: 1rem;
  border-left: 0.25rem solid var(--grayBeige);
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
@media screen and (width <= 768px) {
  .el_caseRelated_ttl {
    padding-block: 0.125rem;
    font-size: 1.125rem;
    letter-spacing: 0.05em;
  }
}

/* 右端フェードの基準要素（余白もこちらへ）。maskだとカードのボカシオーバーレイ（backdrop-filter+暗幕）ごと
   薄まり右端のカードだけセンシティブ画像の隠しが弱く見えるため、地色グラデーションの被せ（::after）に変更。
   被せ方式ならopacityでなめらかに消せるので、ホバー中（操作中）はフェードを消してTOPと同じ見え方にする
   （治療メニュー記事の.bl_treatmentBlockCase_listWrapper @_blocks.scssと同方式） */
.bl_caseRelated_scrollerWrapper {
  position: relative;
  margin-top: 2rem;
}
@media screen and (width <= 768px) {
  .bl_caseRelated_scrollerWrapper {
    margin-top: 1.875rem;
  }
}

.bl_caseRelated_scrollerWrapper::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  right: 0;
  width: 6.25rem;
  background: linear-gradient(to right, transparent, var(--base));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-out;
}
@media screen and (width <= 768px) {
  .bl_caseRelated_scrollerWrapper::after {
    width: 3.4375rem;
  }
}

/* フェードは横スクロールが発生しているときだけ（is-scrollFadeはcommon.jsがスクローラー側に付ける） */
.bl_caseRelated_scrollerWrapper:has(.is-scrollFade)::after {
  opacity: 1;
}

/* ホバー中はフェードを消す（タッチ端末はホバーが無いのでスクロールの手がかりとして残る） */
@media (any-hover: hover) {
  .bl_caseRelated_scrollerWrapper:hover::after {
    opacity: 0;
  }
}

/* スクロールバーは非表示 */
.bl_caseRelated_scroller {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  /* 他の横スクロール(.bl_accessGuide_scroller等)と挙動を揃え、カード左端でスナップさせる */
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.bl_caseRelated_scroller::-webkit-scrollbar {
  display: none;
}

.bl_caseRelated_list {
  display: flex;
  gap: 3.75rem;
  width: max-content;
}
@media screen and (width <= 768px) {
  .bl_caseRelated_list {
    gap: 1.875rem;
  }
}

.bl_caseRelated_list_item {
  flex-shrink: 0;
  width: 15rem;
  scroll-snap-align: start;
}
@media screen and (width <= 768px) {
  .bl_caseRelated_list_item {
    width: clamp(8.625rem, 42.9906542056vw, 11.5rem);
  }
}

/*========================================
アクセス（page-access.php）

構成:
1. クリニック情報 + 地図（bl_accessInfo）— 住所・地図はオプションページ、行き方見出しはACF
2. 行き方（bl_accessGuide）— 駅ごとの行き方 × 手順のネストしたACFリピーター
========================================*/
/*========================================
1. クリニック情報 + 地図
========================================*/
.bl_accessInfo {
  padding-top: 9.375rem;
}
@media screen and (width <= 768px) {
  .bl_accessInfo {
    padding-top: 3.75rem;
  }
}

/* 左カラムは駅名テキスト幅のHUGなので width:max-content で組む（固定値にしない）。
   共通インナー方式: コンテンツ幅は max-width、padding-inline は左右の逃げ20pxのみ。 */
.bl_accessInfo_inner {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  column-gap: 4.875rem;
  align-items: center;
  max-width: 73.75rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
  /* ≤1024は縦積み（2カラムのままだと駅名の最長行に押されて地図が潰れる） */
}
@media screen and (width <= 1024px) {
  .bl_accessInfo_inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 4.875rem;
  }
}
@media screen and (width <= 768px) {
  .bl_accessInfo_inner {
    padding-inline: 1.25rem;
  }
}

.bl_accessInfo_body {
  max-width: 35rem;
  /* 縦積みになる幅では地図を潰す心配がないため上限を外す */
}
@media screen and (width <= 1024px) {
  .bl_accessInfo_body {
    max-width: none;
  }
}

.el_accessInfo_logo {
  display: block;
  width: 13.1875rem;
  height: auto;
}

.bl_accessInfo_address {
  margin-top: 1.25rem;
}

.el_accessInfo_address_zip,
.el_accessInfo_address_txt {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.el_accessInfo_address_txt {
  margin-top: 0.625rem;
}

.el_accessInfo_mapLink {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: 1.25rem;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-decoration: underline;
  transition: opacity 0.3s ease-out;
}
@media (any-hover: hover) {
  .el_accessInfo_mapLink:hover {
    opacity: 0.7;
  }
}

.el_accessInfo_mapLink img {
  flex-shrink: 0;
  width: 0.75rem;
  height: auto;
}

/* 行き方リスト: 駅名の行 + インデントした所要時間の行 */
.bl_accessInfo_routes {
  margin-top: 1.25rem;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.bl_accessInfo_routes_item + .bl_accessInfo_routes_item {
  margin-top: 0.375rem;
}

.el_accessInfo_routes_station,
.el_accessInfo_routes_detail {
  display: block;
}

.el_accessInfo_routes_detail {
  padding-left: 0.625rem;
}

/* iframeは幅100%・高さは比率で確保する */
.bl_accessInfo_map {
  width: 100%;
  aspect-ratio: 571/350;
}
@media screen and (width <= 1024px) {
  .bl_accessInfo_map {
    max-height: 21.875rem;
  }
}
@media screen and (width <= 768px) {
  .bl_accessInfo_map {
    aspect-ratio: 388/350;
  }
}

.bl_accessInfo_map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/*========================================
2. 行き方（bl_accessGuide）
手順は横スクロールのカード列。手順どうしの間には結線（::before）が入る。
========================================*/
.bl_accessGuide {
  padding-top: 3.75rem;
  padding-bottom: 12.5rem;
}
@media screen and (width <= 768px) {
  .bl_accessGuide {
    padding-top: 3.75rem;
    padding-bottom: 6.5625rem;
  }
}

/* スクロール領域は本文カラム幅で切る（画面端まで広げない） */
.bl_accessGuide_inner {
  max-width: 73.75rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media screen and (width <= 768px) {
  .bl_accessGuide_inner {
    padding-inline: 1.25rem;
  }
}

.bl_accessGuide_block + .bl_accessGuide_block {
  margin-top: 5rem;
}

.el_accessGuide_ttl {
  padding-block: 0.1875rem;
  padding-left: 1rem;
  border-left: 0.25rem solid var(--grayBeige);
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

/* 右端の白フェードはマスクで透過（地が白のため。治療メニュー症例スクロールと同方式） */
.bl_accessGuide_scroller {
  margin-top: 1.875rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

/* フェードは横スクロール発生時のみ（is-scrollFade は common.js が付与） */
.bl_accessGuide_scroller.is-scrollFade {
  mask-image: linear-gradient(to right, #000 calc(100% - 6.25rem), transparent 100%);
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 6.25rem), transparent 100%);
}
@media screen and (width <= 768px) {
  .bl_accessGuide_scroller.is-scrollFade {
    mask-image: linear-gradient(to right, #000 calc(100% - clamp(4.6875rem, 23.3644859813vw, 6.25rem)), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - clamp(4.6875rem, 23.3644859813vw, 6.25rem)), transparent 100%);
  }
}

.bl_accessGuide_scroller::-webkit-scrollbar {
  display: none;
}

.bl_accessGuide_steps {
  display: flex;
  gap: 3.75rem;
  width: max-content;
}
@media screen and (width <= 768px) {
  .bl_accessGuide_steps {
    gap: 3.75rem;
  }
}

.bl_accessGuide_steps_item {
  position: relative;
  flex-shrink: 0;
  width: 21.25rem;
  scroll-snap-align: start;
}
@media screen and (width <= 768px) {
  .bl_accessGuide_steps_item {
    width: clamp(14.53125rem, 72.4299065421vw, 19.375rem);
  }
}

/* 手順どうしをつなぐ結線。位置は画像の縦中央に合わせる */
.bl_accessGuide_steps_item + .bl_accessGuide_steps_item::before {
  content: "";
  position: absolute;
  top: 7.125rem;
  left: -3.75rem;
  width: 3.75rem;
  height: 0.0625rem;
  background-color: var(--accent);
  /* 横方向は手順どうしのgap(rem(60))と同じ単位系で書く。
     fluid(60)にすると428px未満でgapより線が短くなり、手順カードに届かず離れて見える */
}
@media screen and (width <= 768px) {
  .bl_accessGuide_steps_item + .bl_accessGuide_steps_item::before {
    top: clamp(4.875rem, 24.2990654206vw, 6.5rem);
    left: -3.75rem;
    width: 3.75rem;
  }
}

.bl_accessGuide_steps_item_imgWrapper {
  width: 100%;
  aspect-ratio: 340/228;
  overflow: hidden;
}

.bl_accessGuide_steps_item_imgWrapper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 番号と説明文をflexで並べ、折り返し時は番号右にぶら下げインデント */
.bl_accessGuide_steps_item_txt {
  display: flex;
  gap: 0.125rem;
  margin-top: 1.25rem;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.el_accessGuide_steps_item_no {
  flex-shrink: 0;
}

.el_accessGuide_steps_item_body {
  flex: 1;
}

/*========================================
キャンペーン（一覧 archive-campaign.php / 記事 single-campaign.php）

目次:
1. 一覧（bl_campaignArchive）
2. 記事（bl_campaignSingle）
========================================*/
/*========================================
1. 一覧
========================================*/
.bl_campaignArchive {
  padding-top: 9.375rem;
  padding-bottom: 12.5rem;
}
@media screen and (width <= 768px) {
  .bl_campaignArchive {
    padding-top: 3.75rem;
    padding-bottom: 6.5625rem;
  }
}

/* 共通インナー方式: max-width=1180（内容幅1140 + 左右padding20×2） */
.bl_campaignArchive_inner {
  max-width: 73.75rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media screen and (width <= 768px) {
  .bl_campaignArchive_inner {
    padding-inline: 1.25rem;
  }
}

.bl_campaignArchive_list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 3.75rem;
  row-gap: 3.75rem;
  /* タブレット帯（769〜1024px）も4列を維持し、gapを流動化して詰める。
     1024px時にちょうど60pxとなる基準幅指定で、PC固定値60pxと境界で連続させる */
}
@media screen and (width <= 1024px) {
  .bl_campaignArchive_list {
    column-gap: 3.75rem;
    row-gap: 3.75rem;
  }
}
@media screen and (width <= 768px) {
  .bl_campaignArchive_list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.25rem;
    row-gap: 3.75rem;
  }
}

.el_campaignArchive_empty {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
}

/*========================================
2. 記事
========================================*/
.bl_campaignSingle {
  padding-top: 9.375rem;
  padding-bottom: 12.5rem;
}
@media screen and (width <= 768px) {
  .bl_campaignSingle {
    padding-top: 3.75rem;
    padding-bottom: 6.5625rem;
  }
}

.bl_campaignSingle_inner {
  max-width: 54.375rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media screen and (width <= 768px) {
  .bl_campaignSingle_inner {
    padding-inline: 1.25rem;
  }
}

.bl_campaignSingle_eyecatch {
  display: block;
  width: 25rem;
  max-width: 100%;
  margin-inline: auto;
  aspect-ratio: 400/500;
  background-color: var(--beige);
  overflow: hidden;
}
@media screen and (width <= 768px) {
  .bl_campaignSingle_eyecatch {
    width: clamp(14.0625rem, 70.0934579439vw, 18.75rem);
  }
}

.bl_campaignSingle_eyecatch img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 本文（bl_commonArticleBody）はアイキャッチの直下に配置 */
.bl_campaignSingle_body {
  margin-top: 1.25rem;
}

/*========================================
コラム（一覧 archive-column.php / 検索結果 search.php / 記事 single-column.php）

目次:
1. 一覧・検索結果 本体（bl_columnArchive）
2. サイドバー（bl_columnSide）
3. カードの一覧ページ向け差分（bl_commonColumnCard は _top.scss の共通実装を再利用）
4. 記事（bl_columnSingle）＋ 監修者ボックス（bl_columnSupervisor）
========================================*/
/*========================================
1. 一覧・検索結果 本体
========================================*/
.bl_columnArchive {
  padding-top: 9.375rem;
  padding-bottom: 12.5rem;
}
@media screen and (width <= 768px) {
  .bl_columnArchive {
    padding-top: 3.75rem;
    padding-bottom: 6.5625rem;
  }
}

/* 共通インナー方式: max-width=1180（内容幅1140 + 左右padding20×2） */
.bl_columnArchive_inner {
  max-width: 73.75rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media screen and (width <= 768px) {
  .bl_columnArchive_inner {
    padding-inline: 1.25rem;
  }
}

.bl_columnArchive_layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 13.75rem;
  column-gap: 5.625rem;
  align-items: start;
}
@media screen and (width <= 768px) {
  .bl_columnArchive_layout {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 6.25rem;
  }
}

/* PC: 追従（固定ヘッダー外形100px + 余白30px = 130px を top に確保）。
   親 _layout の align-items:start が前提（stretch だとstickyが効かない） */
.bl_columnArchive_side {
  position: sticky;
  top: 8.125rem;
}
@media screen and (width <= 768px) {
  .bl_columnArchive_side {
    position: static;
  }
}

/* 検索結果の見出し（「｢キーワード｣の検索結果」） */
.el_columnArchive_searchTtl {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0;
}

/* 見出しは検索結果ページのみ出力される（body.php の $heading 分岐）ため、
   一覧側に余白を持たせず「見出しがあるときだけ空く」隣接セレクタで制御する */
.el_columnArchive_searchTtl + .bl_columnArchive_list,
.el_columnArchive_searchTtl + .el_columnArchive_empty {
  margin-top: 3.75rem;
}
@media screen and (width <= 768px) {
  .el_columnArchive_searchTtl + .bl_columnArchive_list,
  .el_columnArchive_searchTtl + .el_columnArchive_empty {
    margin-top: 2.5rem;
  }
}

.bl_columnArchive_list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 4.375rem;
  row-gap: 3.6875rem;
}
@media screen and (width <= 768px) {
  .bl_columnArchive_list {
    column-gap: 1.25rem;
    row-gap: 3.6875rem;
  }
}

.el_columnArchive_empty {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
}

/* SP のページャーはカードから80px（共通コンポーネントの既定fluid(60)を上書き） */
.bl_columnArchive .bl_commonPagination {
  margin-top: 4.875rem;
}

.bl_campaignArchive .bl_commonPagination {
  margin-top: 5.3125rem;
}

/*========================================
2. サイドバー（bl_columnSide）
========================================*/
.bl_columnSide_block + .bl_columnSide_block {
  margin-top: 1rem;
}

.el_columnSide_ttl {
  display: block;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.bl_columnSide_searchForm {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-top: 0.625rem;
  padding-block: 0.375rem;
  padding-inline: 0.75rem 0.9375rem;
  border: 0.025rem solid var(--txtColor);
  border-radius: 0.25rem;
}
@media screen and (width <= 768px) {
  .bl_columnSide_searchForm {
    padding-block: 0.28125rem;
  }
}

.el_columnSide_searchInput {
  flex: 1;
  min-width: 0;
  /* 枠の外形35pxを保つためinputの高さを21pxに固定（既定だと23pxになり枠が伸びる） */
  height: 1.3125rem;
  padding: 0;
  border: none;
  background-color: transparent;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
}
.el_columnSide_searchInput::placeholder {
  color: rgb(from var(--txtColor) r g b/50%);
}
.el_columnSide_searchInput {
  /* テキスト入力欄はクリックでも:focus-visibleが立つため、枠が出ないようにする（クライアント指示）。
     フォーム自体の枠線が残るので入力位置は分かる。送信ボタン側のフォーカス枠は維持 */
}
.el_columnSide_searchInput:focus-visible {
  outline: none;
}

.el_columnSide_searchSubmit {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.0625rem;
  height: 1.0625rem;
  /* button の既定paddingを消さないと _reset.scss の img{width:100%} でアイコンが3pxに潰れる */
  padding: 0;
  border: none;
  background-color: transparent;
  cursor: pointer;
  transition: opacity 0.3s ease-out;
}
@media (any-hover: hover) {
  .el_columnSide_searchSubmit:hover {
    opacity: 0.7;
  }
}
.el_columnSide_searchSubmit:focus-visible {
  outline: 0.125rem solid var(--accent);
  outline-offset: 0.125rem;
}

.el_columnSide_searchSubmit img {
  display: block;
  width: 100%;
  height: auto;
}

.bl_columnSide_chipList {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 0.625rem;
}

.el_columnSide_chip {
  display: block;
  padding-block: 0.125rem;
  padding-inline: 0.75rem;
  border: 0.025rem solid var(--txtColor);
  border-radius: 1.375rem;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  transition: background-color 0.3s ease-out, border-color 0.3s ease-out, color 0.3s ease-out;
}
@media (any-hover: hover) {
  .el_columnSide_chip:hover {
    border-color: var(--accent);
    background-color: var(--accent);
    color: var(--white);
  }
}
.el_columnSide_chip:focus-visible {
  outline: 0.125rem solid var(--accent);
  outline-offset: 0.125rem;
}

.el_columnSide_chip.is-current {
  border-color: var(--accent);
  background-color: var(--accent);
  color: var(--white);
}

.bl_columnSide_tagList {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem 1.25rem;
  margin-top: 0.625rem;
}

.el_columnSide_tag {
  display: block;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  transition: opacity 0.3s ease-out;
}
@media (any-hover: hover) {
  .el_columnSide_tag:hover {
    opacity: 0.7;
  }
}
.el_columnSide_tag:focus-visible {
  outline: 0.125rem solid var(--accent);
  outline-offset: 0.125rem;
}

/*========================================
3. カテゴリー列（TOP・一覧ページで共有）
日付の次の段にカテゴリーを並べる。TOP / 一覧ともカンプ実測は gap 10px
========================================*/
.bl_commonColumnCard_catList {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 0.625rem;
  transition: opacity 0.3s ease-out;
}

.el_commonColumnCard_catList_item {
  padding-block: 0;
  padding-inline: 0.3125rem 0.375rem;
  border: 0.025rem solid var(--txtColor);
  border-radius: 0.625rem;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: 0;
}
@media screen and (width <= 768px) {
  .el_commonColumnCard_catList_item {
    line-height: 1.4;
  }
}

@media (any-hover: hover) {
  .bl_commonColumnCard_link:hover .bl_commonColumnCard_catList {
    opacity: 0.7;
  }
}

.pg_columnArchive .bl_commonColumnCard_link:focus-visible {
  outline: 0.125rem solid var(--accent);
  outline-offset: 0.125rem;
}

/*========================================
4. 記事（bl_columnSingle）
========================================*/
.bl_columnSingle {
  padding-top: 9.375rem;
  padding-bottom: 12.5rem;
}
@media screen and (width <= 768px) {
  .bl_columnSingle {
    padding-top: 3.75rem;
    padding-bottom: 6.5625rem;
  }
}

.bl_columnSingle_inner {
  max-width: 54.375rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media screen and (width <= 768px) {
  .bl_columnSingle_inner {
    padding-inline: 1.25rem;
  }
}

.bl_columnSingle_eyecatch {
  display: block;
  width: 100%;
  aspect-ratio: 830/498;
  background-color: var(--beige);
  overflow: hidden;
}

.bl_columnSingle_eyecatch img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bl_columnSingle_body {
  margin-top: 3.75rem;
}

.bl_columnSupervisor {
  margin-top: 6.25rem;
  padding-top: 1.875rem;
  padding-inline: 3.125rem;
  border-top: 0.0625rem solid var(--txtColor);
}
@media screen and (width <= 768px) {
  .bl_columnSupervisor {
    margin-top: 3.75rem;
    padding-inline: 0;
  }
}

.bl_columnSupervisor_head {
  display: flex;
  align-items: flex-start;
  gap: 2.5rem;
}
@media screen and (width <= 768px) {
  .bl_columnSupervisor_head {
    padding-inline: 2.1875rem 1.25rem;
  }
}

.bl_columnSupervisor_img {
  display: block;
  flex-shrink: 0;
  width: 6.25rem;
  height: 6.25rem;
  border-radius: 50%;
  background-color: var(--beige);
  overflow: hidden;
}

.bl_columnSupervisor_img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.el_columnSupervisor_label {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.bl_columnSupervisor_name {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  margin-top: 0.625rem;
}

.el_columnSupervisor_position {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.el_columnSupervisor_name {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.bl_columnSupervisor_sns {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.125rem;
  margin-top: 0.625rem;
}

.el_columnSupervisor_sns_link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.25rem;
  transition: opacity 0.3s ease-out;
}
@media (any-hover: hover) {
  .el_columnSupervisor_sns_link:hover {
    opacity: 0.7;
  }
}
.el_columnSupervisor_sns_link:focus-visible {
  outline: 0.125rem solid var(--accent);
  outline-offset: 0.125rem;
}

.el_columnSupervisor_sns_link img {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
}

/* Xだけカンプがひと回り小さい（他は20枠いっぱい） */
.el_columnSupervisor_sns_link img[src*="icon-x.svg"] {
  width: 1.125rem;
  height: 1.125rem;
}

.el_columnSupervisor_profile {
  margin-top: 1.875rem;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
@media screen and (width <= 768px) {
  .el_columnSupervisor_profile {
    padding-inline: 0.625rem;
  }
}

/*========================================
割引制度（archive-discount.php）

1件 = 1投稿（アイキャッチ + タイトル + 本文）。シングルページは無し（404）。
========================================*/
.bl_discountArchive {
  padding-top: 9.375rem;
  padding-bottom: 12.5rem;
}
@media screen and (width <= 768px) {
  .bl_discountArchive {
    padding-top: 3.75rem;
    padding-bottom: 6.5625rem;
  }
}

.bl_discountArchive_inner {
  max-width: 65.125rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media screen and (width <= 768px) {
  .bl_discountArchive_inner {
    padding-inline: 1.25rem;
  }
}

.bl_discountArchive_list_item + .bl_discountArchive_list_item {
  margin-top: 3.75rem;
}

.bl_discountCard {
  display: flex;
  align-items: flex-start;
  gap: 3.75rem;
  padding: 1.875rem;
  border-radius: 0.625rem;
  background-color: rgb(from var(--beige) r g b/50%);
}
@media screen and (width <= 1024px) {
  .bl_discountCard {
    gap: 1.875rem;
  }
}
@media screen and (width <= 768px) {
  .bl_discountCard {
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
    padding: 1.875rem;
  }
}

.bl_discountCard_imgWrapper {
  display: block;
  flex-shrink: 0;
  width: 20.625rem;
  aspect-ratio: 1/1;
  background-color: var(--beige);
  overflow: hidden;
}
@media screen and (width <= 1024px) {
  .bl_discountCard_imgWrapper {
    width: 16.25rem;
  }
}
@media screen and (width <= 768px) {
  .bl_discountCard_imgWrapper {
    width: clamp(11.71875rem, 58.4112149533vw, 15.625rem);
  }
}

.bl_discountCard_imgWrapper img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bl_discountCard_body {
  flex: 1;
  min-width: 0;
}
@media screen and (width <= 768px) {
  .bl_discountCard_body {
    width: 100%;
  }
}

/* 見出し: 下罫線のみ。フォントは var(--jaFont) w700 */
.el_discountCard_ttl {
  padding-block: 0.1875rem;
  padding-left: 0.625rem;
  border-bottom: 0.0625rem solid var(--accent);
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
}
@media screen and (width <= 768px) {
  .el_discountCard_ttl {
    font-size: 1.625rem;
    line-height: 1.5;
    letter-spacing: 0.05em;
  }
}

/* 本文（ブロックエディタ自由記入領域） */
.bl_discountCard_content {
  margin-top: 1.875rem;
}

/* ブロック間の縦リズム: 既定10・リード文→最初のリスト30・小見出し前20 */
.bl_discountCard_content > * + * {
  margin-top: 0.625rem;
}

.bl_discountCard_content > p:first-child + ul,
.bl_discountCard_content > p:first-child + ol {
  margin-top: 1.875rem;
}

.bl_discountCard_content > * + h3,
.bl_discountCard_content > * + h4,
.bl_discountCard_content > * + .el_discountNoteTtl {
  margin-top: 1.25rem;
}

.bl_discountCard_content p {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.1em;
}

/* 小見出しは2種類: h3=左罫線タイプ、h4=■ダッシュ+テキストタイプ */
.bl_discountCard_content h3 {
  padding-block: 0.1875rem;
  padding-left: 1.25rem;
  border-left: 0.25rem solid var(--grayBeige);
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.bl_discountCard_content h4 {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.bl_discountCard_content h4::before {
  content: "";
  flex-shrink: 0;
  width: 0.625rem;
  height: 0.125rem;
  background-color: var(--grayBeige);
}

.bl_discountCard_content ul,
.bl_discountCard_content ol {
  margin-top: 0.625rem;
  counter-reset: cytoriDiscountOl;
  list-style: none;
}

.bl_discountCard_content li {
  position: relative;
  padding-left: 1.125rem;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.bl_discountCard_content ul > li::before {
  content: "・";
  position: absolute;
  top: 0;
  left: 0;
}

.bl_discountCard_content ol > li::before {
  counter-increment: cytoriDiscountOl;
  content: counter(cytoriDiscountOl) ")";
  position: absolute;
  top: 0;
  left: 0;
}

/* 強調（strong/b）: マーカー帯付き表示（例: 5,000円OFF！）。段落の行高は24→36に広がる */
.bl_discountCard_content strong,
.bl_discountCard_content b {
  background: linear-gradient(transparent 60%, rgb(from var(--accent) r g b/50%) 60%);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.1em;
}

.bl_discountCard_content a {
  color: #3b6bab;
  text-decoration: underline;
  transition: opacity 0.3s ease-out;
}
@media (any-hover: hover) {
  .bl_discountCard_content a:hover {
    opacity: 0.7;
  }
}

/* 注釈（※行）。文字サイズ「小」でも同じ見た目にする。
   !important はWPコアのプリセット出力が !important 付きのため（.has-large-font-sizeも同理由） */
.bl_discountCard_content small,
.bl_discountCard_content .has-small-font-size {
  display: block;
  font-size: 0.875rem !important;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

/* ※注釈のぶら下げインデント。fs16の注釈は追加CSSクラスで el_discountNote（通常）／
   el_discountNoteTtl（後続リストの見出しになる※行）を指定する。.has-small-font-sizeは指定不要 */
.bl_discountCard_content .el_discountNote,
.bl_discountCard_content .el_discountNoteTtl,
.bl_discountCard_content .has-small-font-size {
  padding-left: 1rem;
  text-indent: -1rem;
}

/* 注釈のトラッキングはリード文（.1em）ではなくリスト項目と同じ.05emにする */
.bl_discountCard_content .el_discountNote,
.bl_discountCard_content .el_discountNoteTtl {
  letter-spacing: 0.05em;
}

.bl_discountCard_content .el_discountNoteTtl {
  font-weight: 500;
}

/* 強調価格。文字サイズ「大」に割り当て。!importantは上のhas-small-font-sizeと同理由 */
.bl_discountCard_content .has-large-font-size {
  font-size: 1.5rem !important;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.1em;
}

.el_discountArchive_empty {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
}

/*========================================
採用情報（archive-recruit.php）

募集職種は投稿タイプrecruit単位のアコーディオン。詳細を開くと背景色がつく。
========================================*/
.bl_recruit {
  padding-bottom: 12.5rem;
}
@media screen and (width <= 768px) {
  .bl_recruit {
    padding-bottom: 6.5625rem;
  }
}

/* 幅は下の募集職種（.bl_recruitPositions_inner）と揃える */
.bl_recruitIntro {
  max-width: 73.75rem;
  margin-inline: auto;
  padding-top: 9.0625rem;
  padding-bottom: 5rem;
  padding-inline: 1.25rem;
}
@media screen and (width <= 768px) {
  .bl_recruitIntro {
    padding-top: 3.75rem;
    padding-bottom: 6.25rem;
    padding-inline: 1.25rem;
  }
}

/* リード見出し・本文とも archive-recruit.php に直書き（<br> で改行）。
   複数行前提の行間を持たせておく。 */
.el_recruitIntro_ttl {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1.625rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-align: center;
}
@media screen and (width <= 768px) {
  .el_recruitIntro_ttl {
    font-size: 1.5rem;
    line-height: 1.5;
    text-align: left;
  }
}

.el_recruitIntro_txt {
  margin-top: 3.125rem;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 2.5;
  letter-spacing: 0.1em;
  text-align: center;
}
@media screen and (width <= 768px) {
  .el_recruitIntro_txt {
    margin-top: 2.5rem;
    text-align: left;
  }
}

.bl_recruitPositions {
  padding-top: 5rem;
}
@media screen and (width <= 768px) {
  .bl_recruitPositions {
    padding-top: 0;
  }
}

.bl_recruitPositions_inner {
  max-width: 53.125rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}
@media screen and (width <= 768px) {
  .bl_recruitPositions_inner {
    padding-inline: 1.25rem;
  }
}

.bl_recruitPositions_ttl {
  text-align: center;
}

.el_recruitPositions_ttl_en {
  display: block;
  color: var(--accent);
  font-family: var(--enFont);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1em;
}

.el_recruitPositions_ttl_ja {
  display: block;
  margin-top: 1.25rem;
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1.625rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1em;
}
@media screen and (width <= 768px) {
  .el_recruitPositions_ttl_ja {
    font-size: 1.5rem;
  }
}

.bl_recruitPositions_list {
  margin-top: 3.75rem;
}

/* details/summary のアコーディオン。TOP施術メニューと同方式で、is-collapsedクラスで
   grid-template-rows を 0fr⇄1fr に遷移（open属性は常時付与、common.js管理）。 */
.bl_recruitAccordion + .bl_recruitAccordion {
  margin-top: 0;
}

.el_recruitAccordion_summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding-block: 1.25rem;
  padding-inline: 0.625rem;
  /* 行の区切りは下罫線1本のみ。上罫線・左右罫線は無い */
  border-bottom: 0.0625rem solid rgb(from var(--grayBeige) r g b/30%);
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
  cursor: pointer;
  list-style: none;
  transition: background-color 0.3s ease-out;
}
@media (any-hover: hover) {
  .el_recruitAccordion_summary:hover {
    background-color: rgb(from var(--beige) r g b/20%);
  }
}
.el_recruitAccordion_summary:focus-visible {
  outline: 0.125rem solid var(--accent);
  outline-offset: -0.125rem;
}
@media screen and (width <= 768px) {
  .el_recruitAccordion_summary {
    font-size: 1.25rem;
  }
}

.el_recruitAccordion_summary::-webkit-details-marker {
  display: none;
}

/* 職種名は文書構造上の見出し（h3）。フォントは summary の指定値を引き継ぐ */
.el_recruitAccordion_summary_txt {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

/* 開閉アイコン: 「＋」／開いているときは横棒だけの「−」 */
.el_recruitAccordion_icon {
  position: relative;
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
}

.el_recruitAccordion_icon::before,
.el_recruitAccordion_icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1.25rem;
  height: 0.0625rem;
  background-color: var(--txtColor);
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

/* アイコンの＋／−は is-collapsed 基準で切り替える（既定＝開＝「−」） */
.el_recruitAccordion_icon::after {
  opacity: 0;
  transform: rotate(0deg);
}

.bl_recruitAccordion.is-collapsed .el_recruitAccordion_icon::after {
  opacity: 1;
  transform: rotate(90deg);
}

/* JS無効時のフォールバック: is-collapsed が付かないので、ネイティブの open 属性で＋／−を切り替える */
.bl_recruitAccordion:not([open]) .el_recruitAccordion_icon::after {
  opacity: 1;
  transform: rotate(90deg);
}

/* 開閉トランジション本体。overflow: hidden は縮小中の中身をクリップするために必須 */
.bl_recruitAccordion_content {
  display: grid;
  grid-template-rows: 1fr;
  overflow: hidden;
  transition: grid-template-rows 0.4s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .bl_recruitAccordion_content {
    transition: none;
  }
}

.bl_recruitAccordion.is-collapsed .bl_recruitAccordion_content {
  grid-template-rows: 0fr;
}

/* grid トラックの縮小を許可するために min-height: 0 が必要 */
.bl_recruitAccordion_content > * {
  min-height: 0;
}

.bl_recruitAccordion_panel {
  padding-block: 2.5rem;
  padding-inline: 3.125rem;
  /* 詳細パネルも下罫線1本だけ（左右に枠線は無い） */
  border-bottom: 0.0625rem solid rgb(from var(--grayBeige) r g b/30%);
  background-color: rgb(from var(--beige) r g b/20%);
  /* grid-template-rows:0fr だけでは padding/border 分が潰れないため閉時に個別に0へ遷移させる */
  transition: padding-top 0.4s ease-out, padding-bottom 0.4s ease-out, border-bottom-width 0.4s ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .bl_recruitAccordion_panel {
    transition: none;
  }
}
.bl_recruitAccordion_panel {
  /* SP: 内容幅360（=388-14×2）で写真240・定義リスト360の幅と一致する */
}
@media screen and (width <= 768px) {
  .bl_recruitAccordion_panel {
    padding-block: 2.5rem;
    padding-inline: 0.875rem;
  }
}

.bl_recruitAccordion.is-collapsed .bl_recruitAccordion_panel {
  padding-block: 0;
  border-bottom-width: 0;
}

/* PCは2枚横並び、SPは縦積み（中央揃え）*/
.bl_recruitAccordion_photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.875rem;
}
@media screen and (width <= 768px) {
  .bl_recruitAccordion_photos {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 1.25rem;
  }
}

.bl_recruitAccordion_photos_item {
  aspect-ratio: 340/200;
  overflow: hidden;
}
@media screen and (width <= 768px) {
  .bl_recruitAccordion_photos_item {
    width: clamp(11.25rem, 56.0747663551vw, 15rem);
    max-width: 100%;
    aspect-ratio: 240/140;
  }
}

.bl_recruitAccordion_photos_item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bl_recruitAccordion_photos + .bl_recruitAccordion_detail {
  margin-top: 2.5rem;
}

.bl_recruitAccordion_detail_row {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  padding-block: 1.21875rem;
  border-bottom: 0.0625rem solid var(--beige);
}
@media screen and (width <= 1024px) {
  .bl_recruitAccordion_detail_row {
    grid-template-columns: 11.25rem minmax(0, 1fr);
  }
}
.bl_recruitAccordion_detail_row {
  /* SPは1カラム。項目名→内容の間隔は20 */
}
@media screen and (width <= 768px) {
  .bl_recruitAccordion_detail_row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 1.25rem;
  }
}

.bl_recruitAccordion_detail_row:first-child {
  padding-top: 0;
}

.bl_recruitAccordion_detail_row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.bl_recruitAccordion_detail_row dt {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.bl_recruitAccordion_detail_row dd {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.bl_recruitAccordion_detail_row dd > * + * {
  margin-top: 0.875rem;
}

.bl_recruitAccordion_detail_row dd ul,
.bl_recruitAccordion_detail_row dd ol {
  list-style: none;
}

.bl_recruitAccordion_detail_row dd ul {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.bl_recruitAccordion_detail_row dd li {
  position: relative;
  padding-left: 1.125rem;
}

.bl_recruitAccordion_detail_row dd ul > li::before {
  content: "・";
  position: absolute;
  top: 0;
  left: 0;
}

/* ※始まりの注釈項目は※自体が行頭記号のため「・」を付けず、text-indentで位置調整する */
.bl_recruitAccordion_detail_row dd ul > li.el_recruitAccordion_note::before {
  content: none;
}

.bl_recruitAccordion_detail_row dd li.el_recruitAccordion_note {
  text-indent: -1.125rem;
}

.bl_recruitAccordion_detail_row dd a {
  color: var(--txtColor);
  text-decoration: underline;
  transition: opacity 0.3s ease-out;
}
@media (any-hover: hover) {
  .bl_recruitAccordion_detail_row dd a:hover {
    opacity: 0.7;
  }
}

.el_recruit_empty {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
}

/*========================================
404（404.php）
========================================*/
.bl_notFound {
  padding-top: 9.375rem;
  padding-bottom: 11.875rem;
}
@media screen and (width <= 768px) {
  .bl_notFound {
    padding-top: 8.125rem;
    padding-bottom: 8.75rem;
  }
}

.bl_notFound_inner {
  max-width: 90rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.el_notFound_txt {
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.05em;
  text-align: center;
}
@media screen and (width <= 768px) {
  .el_notFound_txt {
    letter-spacing: 0.1em;
  }
}

.bl_notFound_btnWrapper {
  display: flex;
  justify-content: center;
  margin-top: 3.0625rem;
}

.el_notFound_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16.875rem;
  max-width: 100%;
  /* 外形44px = border1×2 + 文字16 + padding-block13×2 */
  padding-block: 0.8125rem;
  padding-inline: 1.25rem;
  border: 0.0625rem solid var(--txtColor);
  color: var(--txtColor);
  font-family: var(--jaFont);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.05em;
  transition: background-color 0.3s ease-out, color 0.3s ease-out, border-color 0.3s ease-out;
  /* hoverは .bl_commonBtn（TOPのVIEW MORE型ボタン）と同挙動 */
}
@media (any-hover: hover) {
  .el_notFound_btn:hover {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--white);
  }
}
.el_notFound_btn:focus-visible {
  outline: 0.125rem solid var(--accent);
  outline-offset: 0.125rem;
}