@charset "utf-8";
/* ============================================================
  鍼灸サロンFineLife  style.css
  Bootstrap 5.3.3 / common.css と併用
============================================================ */

/* ---------- 変数 ---------- */
:root {
  --font-base: "zen-kaku-gothic-new", "Zen Kaku Gothic New", "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
  --font-mincho: "hiragino-mincho-pron", "Hiragino Mincho ProN",
    "Hiragino Mincho Pro", "Yu Mincho", "YuMincho", "Noto Serif JP", serif;
  --font-decol: "kaisei-decol", "Kaisei Decol", "Hiragino Mincho ProN",
    "Yu Mincho", "YuMincho", serif;

  --c-text: #272d27;
  --c-green: #356539;
  --c-green-dark: #2b382b;
  --c-green-deep: #334e35;
  --c-base: #fdf7df;
  --c-card: #fffdf5;
  --c-beige: #ede7d2;
  --c-bg-en: #f6f0d9;
  --c-tag: #ceead0;
  --c-gold: #d8bb65;
  --c-gray: #585d58;

  --header-h: 90px;
}
@media (min-width: 992px) {
  :root {
    --header-h: 117px;
  }
}

/* ---------- ベース ---------- */
html {
  scroll-padding-top: var(--header-h);
}
body {
  font-family: var(--font-base);
  font-size: clamp(15px, 0.26vw + 14px, 16px);
  font-weight: 400;
  line-height: 1.875;
  letter-spacing: 0.03em;
  color: var(--c-text);
  background-color: var(--c-base);
  overflow-x: clip;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-base);
  font-weight: 500;
  margin: 0;
}
a {
  color: inherit;
  text-decoration: none !important;
  transition: color 0.3s, background-color 0.3s;
}
a:hover {
  color: inherit;
}
.ff-mincho {
  font-family: var(--font-mincho);
  font-weight: 600;
}
.ff-decol {
  font-family: var(--font-decol);
  font-weight: 500;
}

.sm-br br {
  display: block;
}
@media (min-width: 576px) {
  .sm-br br {
    display: none;
  }
}

.md-br br {
  display: block;
}
@media (min-width: 768px) {
  .md-br br {
    display: none;
  }
}

.lg-br br {
  display: block;
}
@media (min-width: 992px) {
  .lg-br br {
    display: none;
  }
}

.xl-br br {
  display: block;
}
@media (min-width: 1200px) {
  .xl-br br {
    display: none;
  }
}

/* 改行位置を句読点に寄せる（br不使用のため） */
.kp {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
@media (max-width: 575.98px) {
  /* 中央揃えの見出し・リード文は、画面幅375pxと同じ位置で改行させる（390px前後のiPhoneで1行に収まってしまうのを防ぐ） */
  .text-center .ttl,
  .ttl.text-center,
  .text-center .kp {
    max-width: 345px;
    margin-inline: auto;
  }
}

@media (min-width: 1400px) {
  .container {
    max-width: 1242px;
  }
}

/* ---------- Bootstrap 4.1.3 補完（CMS標準のBootstrap 4に無いユーティリティ） ---------- */
.gap-3 {
  gap: 1rem;
}
.ms-4 {
  margin-left: 1.5rem;
}
.row.g-4 {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
  row-gap: 1.5rem;
}
.row.g-4 > * {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.row.gy-4 {
  row-gap: 1.5rem;
}
.row.gy-5 {
  row-gap: 3rem;
}
@media (min-width: 992px) {
  .text-lg-start {
    text-align: left !important;
  }
  .text-lg-end {
    text-align: right !important;
  }
}

/* ---------- 共通パーツ ---------- */
/* 英字ラベル＋下線 */
.sec-label {
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(15px, 1vw + 11px, 20px);
  line-height: 1.45;
  color: var(--c-green);
  letter-spacing: 0.02em;
}
.sec-label::after {
  content: "";
  display: block;
  width: 133px;
  height: 1px;
  margin-top: 18px;
  background-color: var(--c-green);
}
.text-center .sec-label::after,
.sec-label.text-center::after {
  margin-inline: auto;
}
@media (min-width: 992px) {
  .text-lg-start .sec-label::after,
  .sec-label.text-lg-start::after {
    margin-inline: 0;
  }
}

/* 見出し */
.ttl {
  word-break: keep-all;
  overflow-wrap: anywhere;
  font-size: clamp(20px, 1.6vw + 6px, 23px);
  line-height: 1.74;
  color: var(--c-green);
  margin-top: 30px;
  margin-bottom: 30px;
}

/* 背景の大きい英字 */
.bg-en {
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(44px, 11.9vw, 180px);
  line-height: 0.62;
  color: var(--c-bg-en);
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

/* 詳しく見るボタン */
.btn-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 218px;
  height: 50px;
  border-radius: 50px;
  background-color: var(--c-text);
  color: #fff;
  font-weight: 500;
}
.btn-more img {
  width: 15px;
  transition: transform 0.3s;
}
.btn-more:hover {
  color: #fff;
  background-color: var(--c-green);
}
.btn-more:hover img {
  transform: translateX(4px);
}

/* タグ */
.tag {
  min-width: 140px;
  padding: 3px 18px;
  border: 1px solid var(--c-green);
  border-radius: 10px;
  background-color: var(--c-tag);
  color: var(--c-green);
  font-size: 15px;
  font-weight: 500;
  line-height: 30px;
  letter-spacing: 0.1em;
  text-align: center;
}
@media (max-width: 575.98px) {
  .tag {
    min-width: 0;
    padding: 3px 14px;
  }
}

/* 予約ボタン（Reservation・メニュー内） */
.reserve-btn {
  gap: 14px;
  width: 100%;
  max-width: 477px;
  min-height: 120px;
  padding: 20px 40px;
  border-radius: 20px;
  background-color: var(--c-card);
  color: var(--c-green);
  font-size: clamp(18px, 1.4vw + 4px, 23px);
  font-weight: 500;
}
.reserve-btn-icon {
  width: 30px;
  flex-shrink: 0;
}
.reserve-btn-arrow {
  width: 35px;
  flex-shrink: 0;
  margin-left: auto;
  transition: transform 0.3s;
}
.reserve-btn:hover {
  color: var(--c-green);
  box-shadow: 0 6px 20px rgba(53, 101, 57, 0.12);
}
.reserve-btn:hover .reserve-btn-arrow {
  transform: translateX(4px);
}

/* ============================================================
  ヘッダー
============================================================ */
.a-nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 900;
  width: 100%;
  height: var(--header-h);
  padding: 0 90px 0 16px;
  gap: 24px;
  transition: background-color 0.3s;
}
.a-nav-logo {
  display: block;
  width: 64px;
  flex-shrink: 0;
}
.a-nav-copy {
  font-size: clamp(11px, 0.9vw + 6px, 16px);
  font-weight: 500;
  transition: opacity 0.3s;
}
.a-nav.has-bg .a-nav-copy {
  opacity: 0;
}
@media (min-width: 992px) {
  .a-nav {
    padding: 0 180px 0 52px;
  }
  .a-nav-logo {
    width: 84px;
  }
}

/* ハンバーガー */
.a-burger {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1100;
  gap: 20px;
  cursor: pointer;
  font-weight: 500;
  color: var(--c-text);
}
.a-burger img {
  width: 56px;
  transition: transform 0.3s;
}
.a-burger-close,
.a-burger.is-active .a-burger-open {
  display: none;
}
.a-burger.is-active .a-burger-close {
  display: block;
}
.a-burger.is-active p {
  color: #fff;
}
.a-burger:hover img {
  transform: scale(1.06);
}
@media (min-width: 992px) {
  .a-burger {
    top: 25px;
    right: 50px;
  }
  .a-burger img {
    width: 68px;
  }
}

/* メニュー */
.a-nav-menu {
  display: none;
  position: fixed;
  inset: 8px;
  z-index: 1000;
  overflow: hidden;
  border-radius: 20px;
  background-color: var(--c-green-deep);
  color: #fff;
}
.a-nav-menu-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 90px 24px 40px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.a-nav-menu-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: clamp(
    14px,
    calc((100vw - 82px) / 17.8),
    17px
  ); /* 375pxで「パーソナルトレーニングジム Fine Life」が1行に収まるサイズ */
  font-weight: 500;
}
.a-nav-menu-list a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
}
.a-nav-menu-list a::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--c-gold);
  transform: scale(0);
  transition: transform 0.3s;
}
.a-nav-menu-list a:hover {
  color: var(--c-gold);
}
.a-nav-menu-list a:hover::before {
  transform: scale(1);
}
.a-nav-menu-btns {
  max-width: 420px;
}
.a-nav-menu .reserve-btn {
  min-height: 72px;
  padding: 14px 24px;
  font-size: 17px;
}
.a-nav-menu-insta {
  gap: 14px;
  min-height: 56px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 50px;
  font-weight: 500;
}
.a-nav-menu-insta img {
  width: 30px;
  transition: transform 0.3s;
}
.a-nav-menu-insta:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
}
.a-nav-menu-insta:hover img {
  transform: translateX(4px);
}
.a-nav-menu-side {
  position: relative;
  isolation: isolate;
  overflow: hidden; /* 背景画像の拡大→縮小アニメーションがはみ出さないように */
  width: 50%;
  padding: 48px;
  gap: 4px;
  font-size: 15px;
}
.a-nav-menu-side::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    rgba(43, 56, 43, 0.15) 30%,
    rgba(43, 56, 43, 0.85)
  );
}
.a-nav-menu-side-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  height: 100%;
  object-fit: cover;
}
.a-nav-menu-side-logo {
  width: 150px;
  margin-bottom: 16px;
}
@media (min-width: 576px) {
  .a-nav-menu-main {
    padding: 100px 48px 48px;
  }
}
@media (min-width: 992px) {
  /* メニュー一覧とボタンをひとかたまりにして、左右の余白が同じになるよう中央に配置 */
  .a-nav-menu-main {
    display: grid;
    grid-template-columns: max-content;
    justify-content: center;
    align-content: safe center;
    padding: 110px 24px 60px;
  }
  .a-nav-menu-btns {
    width: 420px;
  }
}
@media (min-width: 1200px) {
  /* 2列表示は1200px以上のみ（それ未満は右の画像と重なるため1列） */
  .a-nav-menu-list {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column; /* 左列→右列の順に縦に並べる（左5項目・右4項目） */
    gap: 18px 60px;
  }
}

/* 追従予約ボタン */
.float-reserve {
  position: fixed;
  z-index: 800;
  left: 10px;
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  width: calc(100% - 20px);
  height: 56px;
  border-radius: 50px;
  background-color: #fff;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
  font-weight: 500;
}
.float-reserve a {
  flex: 1;
  height: 100%;
  gap: 12px;
}
.float-reserve a + a {
  border-left: 1px solid var(--c-text);
  height: 33px;
}
.float-reserve img {
  width: 22px;
}
.float-reserve a:hover {
  color: var(--c-green);
}
@media (min-width: 768px) {
  .float-reserve {
    left: auto;
    right: 30px;
    bottom: 30px;
    width: 379px;
    height: 72px;
    font-size: 18px;
  }
}

/* ============================================================
  FV
============================================================ */
.fv {
  position: relative;
  padding-top: calc(var(--header-h) + 30px);
}
.fv-head {
  gap: 40px;
  padding-inline: 4.3vw 16px;
}
.fv-catch {
  max-width: 11em;
  font-size: clamp(28px, 2.4vw + 9px, 45px);
  line-height: 1.67;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.fv-lead {
  margin-top: 10px;
  font-size: clamp(14px, 0.4vw + 11px, 16px);
  font-weight: 500;
}
.fv-nav {
  gap: 7px;
  margin-top: -100px;
  font-weight: 500;
  color: var(--c-gray);
  line-height: 1.625;
}
.fv-nav a:hover,
.fv-nav .is-current {
  color: #3c8042;
}
.fv-en {
  position: relative;
  z-index: 2;
  margin-top: clamp(24px, 6vw, 90px);
  padding-left: 4.3vw;
  font-size: clamp(72px, 13.3vw, 200px);
  line-height: 0.75;
  color: var(--c-green);
  letter-spacing: 0;
  white-space: nowrap;
  margin-bottom: -0.36em;
}
.fv-slide {
  position: relative;
  width: 92%;
  aspect-ratio: 1306 / 772;
  overflow: hidden;
  border-radius: 0 20px 20px 0;
}
.fv-slide img {
  position: absolute;
  inset: -60px 0;
  height: calc(100% + 120px);
  object-fit: cover;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.6s ease, transform 7s linear;
}
.fv-slide img.is-active {
  opacity: 1;
  transform: scale(1);
}
/* SP（768px以下）：写真の上にキャッチコピーを重ねるレイアウト */
@media (max-width: 768px) {
  .fv {
    padding-top: calc(var(--header-h) + 10px);
  }
  .fv-head {
    position: absolute;
    z-index: 3;
    left: 9.3vw;
    right: 9.3vw;
    bottom: 8vw;
    padding: 0;
    color: #fff;
    text-shadow: 0 5px 4px rgba(0, 0, 0, 0.25);
  }
  .fv-catch {
    font-size: clamp(24px, 6.4vw, 45px);
  }
  .fv-lead {
    font-size: clamp(12px, 2.3vw + 4px, 16px);
  }
  .fv-en {
    margin-top: 0;
    padding-left: 0;
    text-align: center;
    font-size: 18.6vw;
    margin-bottom: -0.4em;
  }
  .fv-slide {
    width: 93.2%;
    margin-left: 3.4vw;
    aspect-ratio: 652 / 923;
    max-height: calc(100svh - var(--header-h) - 60px);
    min-height: 420px;
    border-radius: 20px;
  }
}
@media (min-width: 992px) {
  .fv {
    padding-top: calc(var(--header-h) + 10px);
  }
  .fv-head {
    padding-top: 96px;
    padding-right: 50px;
  }
  .fv-slide {
    width: 86.4%;
  }
}

/* ============================================================
  About
============================================================ */
.about-img {
  display: block;
  max-width: 544px;
  aspect-ratio: 544 / 624;
  object-fit: cover;
  border-radius: 20px;
  margin-inline: auto;
}
.about .bg-en {
  margin-bottom: clamp(40px, 5vw, 70px);
}
.about .ttl {
  margin-top: 30px;
  max-width: 13em;
}
.about-txt {
  font-size: clamp(15px, 0.4vw + 13.5px, 18px);
  line-height: 1.67;
}
.about-txt + .about-txt {
  margin-top: 1.67em;
}
@media (min-width: 992px) {
  .about-img {
    margin-inline: 0;
  }
}

/* ============================================================
  Service（お悩み）
============================================================ */
.worry {
  padding: 50px 20px 46px;
  border-radius: 20px;
  background-color: var(--c-card);
}
.worry-illust {
  width: auto;
  max-width: none;
  height: 163px;
}
.worry-list {
  margin-top: 30px;
  line-height: 2;
}
.worry-lead {
  width: 100%;
  max-width: 277px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid rgba(53, 101, 57, 0.45);
  color: var(--c-green);
  font-size: 15px;
  font-weight: 500;
  text-align: center;
}
.worry-list + .worry-lead {
  margin-top: 26px;
}
.worry-link {
  gap: 18px;
  margin-top: 4px;
}
.worry-link h3 {
  font-size: 25px;
  line-height: 1.6;
  letter-spacing: 0.1em;
}
.worry-link.is-sm h3 {
  font-size: clamp(16px, 1.5vw, 20px);
  letter-spacing: 0;
  white-space: nowrap;
}
.worry-link img {
  width: 34px;
  flex-shrink: 0;
  transition: transform 0.3s;
}
.worry-link:hover {
  color: var(--c-green);
}
.worry-link:hover img {
  transform: translateX(4px);
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .worry-link h3 {
    font-size: 22px;
  }
}

/* ============================================================
  Our Method
============================================================ */
.about,
.method-sec {
  overflow-x: clip;
}
.method-sec .bg-en {
  position: relative;
  z-index: 0;
  margin-bottom: -0.05em;
}
.method {
  position: relative;
  z-index: 1;
}
.method + .method {
  margin-top: 70px;
}
.method-img {
  width: calc(100% - 20px);
  aspect-ratio: 823 / 567;
  object-fit: cover;
  border-radius: 0 20px 20px 0;
}
.method-body {
  position: relative;
  z-index: 1;
  width: calc(100% - 20px);
  margin: -50px 0 0 20px;
  padding: 52px 32px 60px;
  border-radius: 20px 0 0 20px;
  background-color: var(--c-card);
}
.method-body .ttl {
  margin-top: 26px;
  margin-bottom: 26px;
}
.method.is-rev .method-img {
  border-radius: 20px 0 0 20px;
}
@media (max-width: 991.98px) {
  .method.is-rev .method-img {
    align-self: flex-end;
  }
}
.method.is-rev .method-body {
  margin: -50px 20px 0 0;
  border-radius: 0 20px 20px 0;
}
@media (min-width: 768px) {
  .method-img {
    width: 88%;
  }
  .method-body {
    width: 80%;
    margin-left: 20%;
    padding: 56px 8% 60px;
  }
  .method.is-rev .method-body {
    margin-right: 20%;
  }
}
@media (min-width: 992px) {
  .method + .method {
    margin-top: 100px;
  }
  .method-img {
    width: 54.4%;
    flex-shrink: 0;
  }
  .method-body,
  .method.is-rev .method-body {
    width: 51.7%;
    flex-shrink: 0;
    margin: clamp(50px, 5.3vw, 80px) 0 0 -6.1%;
    padding: clamp(50px, 4.7vw, 70px) 24px clamp(50px, 4.7vw, 70px)
      clamp(50px, 8.4vw, 127px);
  }
  .method.is-rev .method-body {
    margin: clamp(50px, 5.3vw, 80px) -6.1% 0 0;
  }
  .method-body > * {
    max-width: 505px;
  }
}

/* ============================================================
  Treatment
============================================================ */
.movie-list .movie-video {
  display: block;
  width: 100%;
  max-width: 382px;
  height: auto;
  margin-inline: auto;
  aspect-ratio: 9 / 16;
  background-color: #000;
  object-fit: cover; /* 横長ファイル内の縦長映像を、左右の黒帯を切り取って表示 */
}

/* ============================================================
  News
============================================================ */
.news-sec {
  background-color: var(--c-beige);
}
.news-sec .ttl {
  margin-bottom: 0;
}
.news-item {
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(39, 45, 39, 0.6);
  font-size: clamp(15px, 0.4vw + 12px, 18px);
}
.news-item:first-child {
  padding-top: 0;
}
.news-date {
  flex-shrink: 0;
  width: 7em;
  font-weight: 500;
}
.news-title {
  flex: 1;
  min-width: 0;
}
.news-item img {
  width: 36px;
  flex-shrink: 0;
  transition: transform 0.3s;
}
.news-item:hover {
  color: var(--c-green);
}
.news-item:hover img {
  transform: translateX(4px);
}
@media (max-width: 575.98px) {
  .news-item {
    flex-wrap: wrap;
    row-gap: 0;
  }
  .news-date {
    width: 100%;
  }
  .news-title {
    flex: 1;
  }
}
@media (min-width: 992px) {
  .news-item {
    gap: 30px;
  }
  .news-date {
    width: 150px;
  }
}
/* お知らせ一覧：データブロック「indexNews」（記事ブロック）の出力に対応 */
.webgene-item .news-item {
  position: relative;
  padding-top: 18px;
}
.webgene-item:first-child .news-item {
  padding-top: 0;
}
.news-title {
  margin: 0;
  font-size: inherit;
  font-weight: 400;
  line-height: 1.6;
}
.news-title a::after {
  /* 行全体をクリックできるようにする */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.webgene-item .news-item img {
  pointer-events: none;
}

/* ============================================================
  お知らせ一覧（news）：データブロック「newsList」「categorylist」
  ※TOPのお知らせ（indexNews）と同じクラス名を使うため、必ず .news-list-sec 配下に限定して指定
============================================================ */
.news-list-sec .news-cate,
.news-list-sec .news-list {
  max-width: 845px;
  margin-inline: auto;
}
/* カテゴリボタン */
.news-list-sec .news-cate .webgene-blog {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px clamp(16px, 2vw, 31px);
}
.news-list-sec .news-cate .webgene-item {
  flex: 0 1 204px;
}
@media (max-width: 575.98px) {
  /* スマホは2列で横並び */
  .news-list-sec .news-cate .webgene-item {
    flex-basis: calc(50% - 8px);
  }
}
.news-list-sec .news-cate-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  border: 1px solid var(--c-green);
  border-radius: 50px;
  background-color: var(--c-green);
  color: #fff;
  font-weight: 500;
  transition: background-color 0.3s, color 0.3s;
}
.news-list-sec .news-cate-btn:hover,
.news-list-sec .news-cate-btn.is-current {
  background-color: #fff;
  color: var(--c-green);
}
/* カテゴリ名が出力されない場合の表示名（CMSの設定で名前が出力されれば自動的に不要になる） */
.news-list-sec .news-cate-btn[data-cate="1"]:empty::before {
  content: "お知らせ";
}
.news-list-sec .news-cate-btn[data-cate="2"]:empty::before {
  content: "コラム";
}
/* 記事一覧 */
.news-list-sec .news-list {
  margin-top: clamp(50px, 6.6vw, 100px);
}
.news-list-sec .webgene-item .news-item {
  padding: 29px 0 35px;
}
.news-list-sec .webgene-item:first-child .news-item {
  padding-top: 0;
}
/* ページ送り（前へ／次へ） */
.news-list-sec .webgene-pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px clamp(16px, 2vw, 30px);
  margin: clamp(50px, 5vw, 75px) 0 0;
  padding: 0;
  list-style: none;
}
.news-list-sec .webgene-pagination ul:empty {
  display: none;
}
.news-list-sec .webgene-pagination li a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  min-width: 50px;
  height: 50px;
  padding: 0 20px;
  border: 1px solid var(--c-green);
  border-radius: 50px;
  background-color: var(--c-tag);
  color: var(--c-green);
  font-weight: 500;
  transition: background-color 0.3s, color 0.3s;
}
.news-list-sec .webgene-pagination li.prev a,
.news-list-sec .webgene-pagination li.next a {
  width: 204px;
}
.news-list-sec .webgene-pagination li.prev a::after,
.news-list-sec .webgene-pagination li.next a::after {
  content: "";
  width: 16px;
  height: 12px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M0 6h14.5M9.5 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M0 6h14.5M9.5 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.news-list-sec .webgene-pagination li a:hover,
.news-list-sec .webgene-pagination li.selected a {
  background-color: var(--c-green);
  color: #fff;
}

/* ============================================================
  お知らせ詳細（newsdetail）：データブロック「newsDetail」の出力に対応
============================================================ */
.nd-sec {
  position: relative;
  padding: calc(var(--header-h) + 40px) 0 clamp(60px, 6.6vw, 100px);
}
.nd-sec .fv-nav {
  position: absolute;
  top: calc(var(--header-h) + 10px);
  right: 43px;
  margin-top: 0;
}
.news-detail {
  max-width: 1055px;
  margin-inline: auto;
}
.nd-date {
  color: var(--c-green);
  font-size: clamp(16px, 0.3vw + 14px, 18px);
  font-weight: 500;
  line-height: 1.67;
}
.nd-ttl {
  margin-top: 15px;
  font-size: clamp(18px, 0.3vw + 16px, 20px);
  font-weight: 400;
  line-height: 1.5;
}
.nd-img {
  margin-top: clamp(30px, 4.6vw, 70px);
}
.nd-img:empty {
  display: none;
}
.nd-img img {
  display: block;
  width: 100%;
  height: auto;
}
.nd-body {
  margin-top: clamp(40px, 6.6vw, 100px);
  font-size: clamp(15px, 0.2vw + 13px, 16px);
  line-height: 1.875;
  overflow-wrap: anywhere;
}
/* 前へ／次へ（データブロック「newsDetail」の .pagelink） */
.news-detail .pagelink {
  display: flex;
  justify-content: center;
  gap: 16px clamp(16px, 2vw, 30px);
  margin-top: clamp(50px, 5vw, 75px);
}
.news-detail .pagelink p {
  flex: 0 1 204px;
}
.news-detail .pagelink p:not(:has(a)) {
  /* 前後の記事がない側は非表示（位置は保持） */
  visibility: hidden;
}
.news-detail .pagelink a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  height: 50px;
  border: 1px solid var(--c-green);
  border-radius: 50px;
  background-color: var(--c-tag);
  color: var(--c-green);
  font-weight: 500;
  transition: background-color 0.3s, color 0.3s;
}
.news-detail .pagelink a::after {
  content: "";
  width: 16px;
  height: 12px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M0 6h14.5M9.5 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E")
    center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M0 6h14.5M9.5 1l5 5-5 5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E")
    center / contain no-repeat;
}
.news-detail .pagelink a:hover {
  background-color: var(--c-green);
  color: #fff;
}
.nd-back {
  margin-top: 40px;
}
.nd-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 204px;
  height: 50px;
  border-radius: 50px;
  background-color: var(--c-text);
  color: #fff;
  font-weight: 500;
  transition: opacity 0.3s;
}
.nd-back-btn:hover {
  color: #fff;
  opacity: 0.8;
}
@media (min-width: 992px) {
  .nd-sec {
    padding-top: calc(var(--header-h) + 155px);
  }
  /* 右上のナビと日付・タイトルが重ならないよう右側に余白 */
  .nd-head {
    padding-right: clamp(0px, 380px - (100vw - 1055px) / 2, 330px);
  }
  /* 写真が右上のナビの下端より下から始まるように */
  .nd-img {
    margin-top: 90px;
  }
}

/* リンクカード */
.link-cards {
  gap: 21px;
}
.link-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 300px;
  padding: 40px 16px;
  overflow: hidden;
  color: #fff;
  text-align: center;
  isolation: isolate;
}
.link-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgba(37, 85, 40, 0.5);
  transition: background-color 0.4s;
}
.link-card-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}
.link-card h3 {
  margin-bottom: 26px;
  font-size: clamp(20px, 1.6vw + 6px, 23px);
  line-height: 1.74;
}
.link-card p {
  font-size: clamp(13px, 4vw, 15px);
  white-space: nowrap;
}
.link-card-more {
  gap: 20px;
  margin-top: 26px;
  font-size: 18px;
}
.link-card-more img {
  width: 35px;
  transition: transform 0.3s;
}
.link-card:hover {
  color: #fff;
}
.link-card:hover::after {
  background-color: rgba(37, 85, 40, 0.62);
}
.link-card:hover .link-card-bg {
  transform: scale(1.05);
}
.link-card:hover .link-card-more img {
  transform: translateX(4px);
}
@media (min-width: 992px) {
  .link-card {
    aspect-ratio: 490 / 450;
    min-height: 0;
  }
  .link-card p {
    font-size: clamp(13px, 1.1vw, 16px);
  }
}

/* ============================================================
  Reservation
============================================================ */
.reserve {
  overflow: hidden;
}
.reserve-btns {
  gap: clamp(15px, 2.3vw, 35px);
  margin-top: clamp(40px, 6vw, 100px);
  align-items: center;
}
.marquee {
  width: max-content;
  margin-top: 16px;
  padding-bottom: 20px;
  animation: marquee 40s linear infinite;
}
.marquee p {
  padding-right: 0.5em;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(64px, 9.9vw, 150px);
  line-height: 0.9;
  color: var(--c-bg-en);
  white-space: nowrap;
  letter-spacing: 0;
}
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* ============================================================
  フッター
============================================================ */
.footer {
  padding-top: clamp(60px, 7.7vw, 117px);
  background-color: var(--c-green-dark);
  color: #fff;
  font-weight: 500;
}
.foot-logo {
  display: block;
  width: 180px;
}
.foot-map {
  gap: 12px;
  margin-top: 6px;
  color: var(--c-gold);
}
.foot-map img {
  width: 30px;
  transition: transform 0.3s;
}
.foot-map:hover {
  color: var(--c-gold);
}
.foot-map:hover img {
  transform: translateX(4px);
}

/* 営業時間 */
.hours {
  border: 1px solid #fff;
  border-radius: 20px;
  overflow: hidden;
}
.hours-row {
  min-height: 70px;
  padding: 0 12px;
}
.hours-row + .hours-row {
  border-top: 1px solid #fff;
}
.hours-row .day {
  flex: 1;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.05em;
}
.hours-row .day:first-child {
  flex: 0 0 52px;
  text-align: left;
  letter-spacing: 0.1em;
}
.hours-row.is-head .day {
  font-size: 17px;
}
.hours-row .is-off {
  color: var(--c-gold);
}
@media (min-width: 576px) {
  .hours-row {
    padding: 0 22px;
  }
  .hours-row .day {
    font-size: 16px;
    letter-spacing: 0.2em;
  }
  .hours-row .day:first-child {
    flex-basis: 110px;
  }
}
@media (min-width: 992px) {
  .hours-row {
    min-height: 99px;
  }
  .hours-row .day {
    font-size: clamp(15px, 0.6vw + 9px, 18px);
  }
  .hours-row.is-head .day {
    font-size: 23px;
  }
  .foot-logo {
    width: 238px;
  }
}

.foot-nav {
  display: flex;
  gap: 10px 26px;
  margin-top: 60px;
  padding: 24px 0 70px;
  border-top: 1px solid rgba(255, 255, 255, 0.7);
  flex-direction: column;
  align-items: center;
}
.foot-nav a:hover {
  color: var(--c-gold);
}

.foot-nav-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 10px 26px;
}
@media (max-width: 375px) {
  /* 「鍼灸サロンFineLife」と「パーソナルトレーニングジム Fine Life」を1行に並べる */
  .foot-nav {
    column-gap: 16px;
    font-size: 12px;
  }
}
.foot-copy {
  padding: 24px 16px 84px;
  background-color: #394f39;
  text-align: center;
  font-size: 14px;
}
@media (min-width: 768px) {
  .foot-copy {
    padding-bottom: 24px;
    font-size: 16px;
  }

  .foot-nav-wrap {
    flex-direction: row;
  }
}

@media (min-width: 992px) {
  .foot-nav {
    flex-direction: row;
  }
}

/* ============================================================
  下層ページ共通：FV
============================================================ */
.sub-fv {
  position: relative;
  padding: calc(var(--header-h) + 10px) 10px 0;
  overflow-x: clip; /* 写真の拡大アニメーション中に横スクロールが出ないように */
}
.sub-fv-inner {
  position: relative;
}
.sub-fv-img {
  display: block;
  aspect-ratio: 4 / 3;
  max-height: 70svh;
  object-fit: cover;
  border-radius: 20px;
}
.sub-fv .fv-nav {
  position: absolute;
  top: calc(var(--header-h) - 10px);
  right: 43px;
  margin-top: 0;
}
/* 写真の上に重なるナビは白文字（表示中のページは通常どおり #3c8042） */
.sub-fv .fv-nav {
  color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}
.sub-fv-en {
  position: relative;
  z-index: 2;
  margin-top: -0.42em;
  padding-left: 4.3vw;
  font-size: clamp(56px, 10.6vw, 160px);
  line-height: 0.95;
  color: var(--c-green);
  letter-spacing: 0;
  white-space: nowrap;
}
.sub-fv-ttl {
  margin-top: clamp(8px, 1.5vw, 24px);
  padding-left: calc(4.3vw + 15px);
  font-size: clamp(22px, 1.6vw + 11px, 35px);
  line-height: 2.14;
}
@media (min-width: 768px) {
  /* 「Concept／当院について」まで1画面に収まるよう、画面の高さに合わせて写真の高さを調整 */
  .sub-fv-img {
    aspect-ratio: 1472 / 674;
    min-height: 280px;
    max-height: calc(
      100svh - var(--header-h) - 10px - clamp(56px, 10.6vw, 160px) * 0.53 -
        clamp(8px, 1.5vw, 24px) - clamp(22px, 1.6vw + 11px, 35px) * 2.14 - 24px
    );
  }
}
@media (min-width: 992px) {
  .sub-fv {
    padding: 20px 20px 0;
  }
  .sub-fv-img {
    max-height: calc(
      100svh - 20px - clamp(56px, 10.6vw, 160px) * 0.53 -
        clamp(8px, 1.5vw, 24px) - clamp(22px, 1.6vw + 11px, 35px) * 2.14 - 24px
    );
  }
}

/* ============================================================
  当院について（concept）
============================================================ */
/* About Us */
.concept-about .bg-en {
  position: relative;
  z-index: 0;
  margin-bottom: -0.5em;
}
.concept-about .ttl {
  position: relative;
  z-index: 1;
  margin-top: 0;
  margin-bottom: clamp(36px, 4.5vw, 67px);
}
@media (max-width: 767.98px) {
  /* 「症状ではなく、」で改行（行の長さを揃えて折り返す） */
  .concept-about .ttl {
    text-wrap: balance;
  }
}
.lead-lines p {
  font-size: clamp(15px, 0.4vw + 13.5px, 18px);
  line-height: 1.67;
}

/* Strength */
.strength {
  counter-reset: strength;
}
.strength .text-center {
  margin-bottom: clamp(40px, 5vw, 75px);
}
.strength-item + .strength-item {
  margin-top: clamp(50px, 5vw, 75px);
}
.strength-img {
  display: block;
  max-width: 544px;
  aspect-ratio: 544 / 322;
  object-fit: cover;
  border-radius: 20px;
  margin-inline: auto;
}
.strength-body {
  margin-top: 28px;
}
.strength-ttl {
  display: flex;
  align-items: center;
  color: var(--c-green);
  font-size: clamp(19px, 1.2vw + 10px, 23px);
  line-height: 1.74;
  margin-bottom: 22px;
}
.strength-ttl::before {
  counter-increment: strength;
  content: counter(strength, decimal-leading-zero);
  flex-shrink: 0;
  margin-right: 22px;
  padding-right: 22px;
  background: linear-gradient(currentColor, currentColor) right center / 1px
    15px no-repeat;
}
@media (max-width: 756px) {
  /* 見出しを区切り位置（「、」やdata-breakで指定した語句の後）で改行（見出し文字を約13文字分の幅に収めて折り返す） */
  .strength-ttl {
    max-width: calc(14.3em + 44px);
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
}
.strength-body p + p {
  margin-top: 0;
}
@media (min-width: 992px) {
  .strength-img {
    margin-inline: 0;
  }
  .strength-body {
    margin-top: 0;
    padding-left: clamp(24px, 2.5vw, 44px);
  }
}

/* Approach */
.approach {
  background-color: var(--c-beige);
}
@media (max-width: 419.98px) {
  /* 2つの文を1つの文章としてつなげて自然に折り返す（p同士の間の改行が空白にならないよう親の文字サイズを0に） */
  .approach-lead {
    font-size: 0;
    text-align: left;
  }
  .approach-lead .kp {
    display: inline;
    font-size: clamp(15px, 0.26vw + 14px, 16px);
    letter-spacing: 0.03em;
    word-break: normal;
    overflow-wrap: normal;
    line-break: strict;
  }
}
.approach-venn {
  display: block;
  width: 100%;
  max-width: 517px;
  margin: clamp(40px, 5vw, 75px) auto 0;
}
.approach-item {
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(39, 45, 39, 0.6);
}
.approach-item + .approach-item {
  margin-top: 34px;
}
.approach-name {
  font-size: 18px;
  font-weight: 500;
}
.approach-catch {
  margin: 8px 0 22px;
  color: var(--c-green);
  font-size: clamp(18px, 0.6vw + 13px, 20px);
  line-height: 1.5;
}
@media (min-width: 992px) {
  .approach-venn {
    margin-left: 0;
  }
  .approach-list {
    padding-top: 124px;
  }
}

/* Message */
.message {
  margin-top: clamp(80px, 10vw, 160px);
}
/* 本文：句読点の位置で改行し、1カラム表示のときは中央寄せ */
.message-lines p {
  word-break: keep-all;
  overflow-wrap: anywhere;
}
@media (max-width: 991.98px) {
  .message-lines {
    text-align: center;
  }
}
.message-img {
  display: block;
  max-width: 467px;
  aspect-ratio: 467 / 514;
  object-fit: cover;
  border-radius: 20px;
  margin-inline: auto;
}
@media (min-width: 992px) {
  .message .ttl {
    margin-top: 34px;
  }
}

/* ============================================================
  下層ページ共通：FV（タイトル上・写真下）
============================================================ */
.page-fv {
  position: relative;
  padding: calc(var(--header-h) + 10px) 10px 0;
  overflow-x: clip;
}
.page-fv-head {
  gap: 24px;
}
.page-fv-ttlbox {
  position: relative;
  padding-left: 10px;
}
.page-fv-en {
  font-size: clamp(44px, 15.5vw, 180px);
  line-height: 1;
  color: var(--c-bg-en);
  letter-spacing: 0;
  white-space: nowrap;
}
.page-fv-ttl {
  position: absolute;
  top: 50%;
  left: calc(10px + 3.7vw);
  transform: translateY(-50%);
  color: var(--c-green);
  font-size: clamp(26px, 2vw + 14px, 45px);
  line-height: 1.67;
  white-space: nowrap;
}
.page-fv-img {
  display: block;
  margin-top: 16px;
  aspect-ratio: 4 / 3;
  max-height: 70svh;
  object-fit: cover;
  border-radius: 20px;
}
@media (min-width: 768px) {
  .page-fv-img {
    aspect-ratio: 1371 / 674;
    max-height: none;
  }
}
.page-fv .fv-nav {
  flex-shrink: 0;
  margin-top: 0;
  white-space: nowrap;
}
@media (min-width: 992px) {
  .page-fv {
    padding: calc(var(--header-h) + 10px) 4.2vw 0 5.2vw;
  }
  .page-fv-en {
    font-size: clamp(96px, 15.3vw - 40px, 180px);
  }
  .page-fv-ttlbox {
    padding-left: 0;
  }
  .page-fv-ttl {
    left: 3.7vw;
  }
  .page-fv-img {
    margin-top: clamp(24px, 2.3vw, 34px);
  }
}

/* ============================================================
  FineLife整骨院（seikotsu）
============================================================ */
/* About */
.skt-about {
  overflow: hidden;
}
.skt-lead {
  margin-top: clamp(36px, 4.4vw, 67px);
}
.anchor-links {
  gap: 24px clamp(30px, 4vw, 60px);
  margin-top: clamp(50px, 6.6vw, 100px);
}
.anchor-link {
  width: 100%;
  max-width: 236px;
  padding-bottom: 25px;
  border-bottom: 1px solid var(--c-green);
  font-size: clamp(17px, 0.4vw + 14px, 20px);
  font-weight: 500;
}
.anchor-link img {
  width: 34px;
  transition: transform 0.3s;
}
.anchor-link:hover {
  color: var(--c-green);
}
.anchor-link:hover img {
  transform: translateX(4px);
}
.skt-about .bg-en {
  margin-top: clamp(60px, 8.3vw, 125px);
  margin-bottom: 0; /* 文字の下端がセクションの境目に接する位置 */
}

/* Values */
.skt-values {
  background-color: var(--c-beige);
}
.value-cards {
  margin-top: clamp(40px, 5vw, 75px);
}
.value-card {
  height: 100%;
  padding: 32px clamp(24px, 3.1vw, 47px) 56px;
  border-radius: 20px;
  background-color: var(--c-card);
  text-align: center;
}
.value-num {
  color: var(--c-green);
  font-size: 40px;
  line-height: 1.6;
}
.value-ttl {
  margin-top: 4px;
  color: var(--c-green);
  font-size: clamp(18px, 0.5vw + 13px, 20px);
  line-height: 2;
}
.value-img {
  display: block;
  margin-top: 28px;
  aspect-ratio: 287 / 196;
  object-fit: cover;
  border-radius: 20px;
}
.value-card p:last-child {
  margin-top: 24px;
  text-align: left;
  font-size: 15px;
  line-height: 2.13;
}

/* Service */
.skt-service-head {
  margin-top: clamp(80px, 10vw, 150px);
}
.svc-panel {
  margin-top: clamp(40px, 5vw, 75px);
  padding: 50px 20px 50px;
  border-radius: 20px;
  background-color: var(--c-base);
}
.svc-panel + .svc-panel {
  margin-top: clamp(50px, 8.6vw, 130px);
}
.svc-name {
  margin-bottom: clamp(36px, 5.3vw, 80px);
  text-align: center;
  font-size: clamp(24px, 1vw + 18px, 32px);
  line-height: 1.25;
}
.svc-row + .svc-row {
  margin-top: 50px;
}
.svc-img {
  display: block;
  aspect-ratio: 493 / 360;
  object-fit: cover;
  border-radius: 20px;
}
.svc-body {
  margin-top: 28px;
}
.svc-ttl {
  margin-bottom: 26px;
  color: var(--c-green);
  font-size: clamp(18px, 0.5vw + 13px, 20px);
  line-height: 1.6;
}
.svc-body p {
  font-size: 15px;
  line-height: 2;
}
.svc-worry-ttl {
  margin: clamp(50px, 6vw, 90px) 0 30px;
  color: var(--c-green);
  text-align: center;
  font-size: clamp(18px, 0.5vw + 13px, 20px);
}
.svc-tags {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px 20px;
}
.svc-tags .tag {
  min-width: 0;
  padding: 7px 10px;
  letter-spacing: 0.05em;
}
@media (min-width: 576px) {
  .svc-tags {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
@media (min-width: 768px) {
  .svc-panel {
    padding: 60px 40px;
  }
}
@media (min-width: 992px) {
  .svc-panel {
    padding: 75px 5.6% 74px;
  }
  .svc-body {
    margin-top: 0;
    padding-left: clamp(30px, 4.6vw, 70px);
  }
  .svc-tags {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Price */
.price-panel {
  margin-top: clamp(40px, 5vw, 75px);
  padding: 44px 20px 50px;
  border-radius: 20px;
  background-color: var(--c-beige);
}
.price-group + .price-group {
  margin-top: 60px;
}
.price-group-ttl {
  margin-bottom: 4px;
  color: var(--c-green);
  font-size: clamp(18px, 0.5vw + 13px, 20px);
  line-height: 2;
}
.price-row {
  flex-wrap: wrap;
  gap: 0 16px;
  padding: 20px 0 24px;
  border-bottom: 1px solid var(--c-text);
  font-weight: 500;
}
/* メニュー名と金額を横並びにし、説明文はその下に1行分の幅で表示する */
.price-row > div {
  display: contents;
}
.price-name {
  flex: 1 1 0;
  min-width: 0;
}
.price-name {
  /* メニュー名を単語の途中で改行しない（記号・空白の位置で改行。区切りはcommon.jsで追加） */
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.price-val {
  flex-shrink: 0;
  text-align: right;
}
.price-note {
  order: 1;
  flex-basis: 100%;
  margin-top: 6px;
  font-size: 15px;
  font-weight: 400;
  /* 説明文も単語の途中で改行しない（句読点の位置で改行。区切りはcommon.jsで追加） */
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.product-panel {
  padding: 44px 20px;
}
.product-img {
  display: block;
  aspect-ratio: 471 / 281;
  object-fit: cover;
  border-radius: 20px;
}
.product-name {
  margin: 20px 0 22px;
  color: var(--c-green);
  font-size: clamp(18px, 0.5vw + 13px, 20px);
  line-height: 2;
}
.product p {
  font-size: 15px;
  line-height: 2;
}
@media (min-width: 768px) {
  .price-panel {
    padding: 60px 40px;
  }
}
@media (min-width: 992px) {
  .price-panel {
    padding: 75px 9.8% 75px;
  }
  .price-group + .price-group {
    margin-top: 75px;
  }
  .product-panel {
    padding: 60px 7.3%;
  }
  .product-panel .row {
    margin-left: -38px;
    margin-right: -38px;
  }
  .product-panel .row > * {
    padding-left: 38px;
    padding-right: 38px;
  }
}

/* ============================================================
  パーソナルトレーニングジム（training）
  ※構成は整骨院（seikotsu）と共通。ここではトレーニング独自の部分のみ指定
============================================================ */
/* 加圧トレーニングとは */
.trn-kaatsu {
  margin-top: clamp(60px, 6.6vw, 100px);
}
.trn-kaatsu-img {
  display: block;
  max-width: 544px;
  width: 100%;
  aspect-ratio: 544 / 528;
  object-fit: cover;
  border-radius: 20px;
  margin: 30px auto 0; /* 縦並び時は文章→画像の順 */
}
.trn-kaatsu-ttl {
  margin-bottom: clamp(24px, 3vw, 45px);
  color: var(--c-green);
  font-size: clamp(20px, 1.6vw + 6px, 23px);
  line-height: 1.74;
}
.trn-kaatsu-body p {
  font-size: clamp(15px, 0.4vw + 12px, 18px);
  line-height: 1.67;
}
@media (min-width: 992px) {
  .trn-kaatsu-img {
    margin: 0;
  }
  .trn-kaatsu-body {
    margin-top: 0;
    padding-left: clamp(30px, 4.8vw, 72px);
  }
}
/* FV：長いページタイトル（992px未満は文字を小さくし、「Fine Life」の前でのみ改行） */
@media (max-width: 991.98px) {
  .page-fv-ttl.is-long {
    width: calc(100vw - 3.7vw - 40px);
    font-size: clamp(20px, 6vw, 36px);
    line-height: 1.4;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: normal;
  }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  /* 右側のナビと重ならないよう、ナビ幅を除いた範囲で改行 */
  .page-fv-ttl.is-long {
    width: calc(100vw - 3.7vw - 440px);
    line-height: 1.4;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: normal;
  }
}
/* 施術紹介：所要時間 */
.svc-body .svc-time {
  margin-top: clamp(20px, 2.3vw, 35px);
  font-size: clamp(17px, 0.4vw + 14px, 20px);
  font-weight: 500;
  line-height: 2;
}

/* ============================================================
  初めての方へ（guide）
============================================================ */
/* About us */
.guide-about-img {
  display: block;
  max-width: 544px;
  aspect-ratio: 544 / 624;
  object-fit: cover;
  border-radius: 20px;
  margin-inline: auto;
}
.guide-about .ttl {
  max-width: 14.5em;
  margin-inline: auto;
}
.guide-about-body > p:not(.sec-label) {
  font-size: clamp(15px, 0.2vw + 13px, 16px);
  line-height: 1.875;
}
@media (min-width: 992px) {
  .guide-about-img {
    margin-inline: 0;
  }
  .guide-about-body {
    padding-left: clamp(24px, 4.8vw, 72px);
  }
  .guide-about .ttl {
    margin-inline: 0;
  }
}

/* Flow（Strength のレイアウトを流用し、区切り線を追加） */
.flow .strength-item + .strength-item {
  margin-top: 0;
}
.flow .strength-item {
  padding-top: clamp(40px, 4.3vw, 65px);
  padding-bottom: clamp(40px, 4.3vw, 65px);
}
.flow .text-center + .strength-item {
  padding-top: 0;
}
.flow .strength-item:not(:last-child) {
  border-bottom: 1px solid var(--c-text);
}
.flow .strength-item:last-child {
  padding-bottom: 0;
}
.flow .strength-body p {
  font-size: 15px;
  line-height: 2;
}
@media (min-width: 992px) {
  .flow .strength-body {
    padding-left: clamp(24px, 6.2vw, 94px);
  }
}

/* FAQ（アコーディオン） */
.faq {
  background-color: var(--c-beige);
}
.faq-list {
  max-width: 1131px;
  margin: clamp(40px, 5vw, 75px) auto 0;
}
.faq-item {
  border-bottom: 1px solid var(--c-green);
}
.faq-q {
  position: relative;
  gap: clamp(14px, 2vw, 30px);
  padding: 28px 44px 28px 0;
  cursor: pointer;
}
.faq-q::before,
.faq-q::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 24px;
  height: 1.5px;
  background-color: var(--c-green);
  transition: transform 0.3s;
}
.faq-q::after {
  transform: rotate(90deg);
}
.faq-item.is-open .faq-q::after {
  transform: rotate(0deg);
}
.faq-q:focus-visible {
  outline: 2px solid var(--c-green);
  outline-offset: 4px;
}
.faq-mark {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--c-green);
  color: #fff;
  font-size: 26px;
  line-height: 46px;
  text-align: center;
}
.faq-mark.is-a {
  background-color: var(--c-base);
  color: var(--c-text);
}
.faq-q-txt {
  font-size: clamp(16px, 0.3vw + 14px, 18px);
  line-height: 1.6;
  letter-spacing: 0.1em;
  font-weight: 500;
}
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s ease;
}
.faq-item.is-open .faq-a {
  grid-template-rows: 1fr;
}
.faq-a-inner {
  min-height: 0;
  overflow: hidden;
}
.faq-a-inner > div {
  gap: clamp(14px, 2.6vw, 39px);
  padding: 0 44px 32px 0;
}
.faq-a-txt {
  padding-top: 8px;
  font-size: 15px;
  line-height: 2;
  letter-spacing: 0.1em;
}

/* ============================================================
  店舗情報（info）
============================================================ */
/* 項目と内容の一覧（院長プロフィール・店舗情報で共通） */
.data-row {
  gap: 16px;
  padding: 16px 0 18px;
  border-bottom: 1px solid rgba(53, 101, 57, 0.5);
}
.data-th {
  flex: 0 0 6.5em;
  font-weight: 500;
}
.data-td {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  line-height: 2;
}
/* スマホ・タブレット縦（767px以下）は項目と内容を縦並びに */
@media (max-width: 767.98px) {
  .data-row {
    flex-direction: column;
    gap: 4px;
  }
  .data-th,
  .shop-data .data-th {
    flex-basis: auto;
  }
}
@media (min-width: 768px) {
  .data-th {
    flex-basis: 9em;
  }
}

/* 院長紹介 */
.director-img {
  display: block;
  max-width: 487px;
  aspect-ratio: 487 / 643;
  object-fit: cover;
  border-radius: 20px;
  margin-inline: auto;
}
.director-role,
.director-name {
  color: var(--c-green);
  font-size: clamp(18px, 0.5vw + 13px, 20px);
  font-weight: 500;
  line-height: 1.8;
}
.director-en {
  margin-top: 8px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--c-green);
  color: var(--c-green);
  font-size: clamp(16px, 0.5vw + 12px, 20px);
}
.director .data-row:first-child {
  padding-top: 20px;
}
.profile-panel {
  margin-top: clamp(50px, 5.3vw, 80px);
  padding: 40px 20px 44px;
  border-radius: 20px;
  background-color: var(--c-beige);
}
.profile-ttl {
  margin-bottom: 30px;
  color: var(--c-green);
  text-align: center;
  font-size: clamp(18px, 0.5vw + 13px, 20px);
}
.profile-txt p {
  font-size: 15px;
  line-height: 2;
}
.director {
  overflow: hidden;
}
.director .bg-en {
  margin-top: clamp(80px, 10vw, 150px);
  margin-bottom: 0;
}
@media (min-width: 768px) {
  .profile-panel {
    padding: 44px 40px 60px;
  }
}
@media (min-width: 992px) {
  .director-img {
    margin-inline: 0;
  }
  .director-body {
    padding-left: clamp(24px, 3vw, 45px);
  }
  .profile-panel {
    padding: 34px 6.8% 72px;
  }
}

/* 店舗情報 */
.shop-info {
  background-color: var(--c-beige);
}
.shop-data {
  max-width: 1036px;
  margin: clamp(40px, 5vw, 75px) auto 0;
}
@media (min-width: 768px) {
  .shop-data .data-th {
    flex-basis: 15em;
  }
}
.shop-photos {
  max-width: 1036px;
  margin: clamp(50px, 5.3vw, 80px) auto 0;
}
.shop-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 461 / 290;
  object-fit: cover;
  border-radius: 20px;
}
.shop-photo p {
  margin-top: 22px;
  font-size: 15px;
  line-height: 2;
}
@media (min-width: 992px) {
  .shop-photo {
    padding-left: 23px;
    padding-right: 23px;
  }
}
.shop-access {
  max-width: 1036px;
  margin: clamp(50px, 6.6vw, 100px) auto 0;
}
.shop-map {
  overflow: hidden;
  height: 320px;
  border-radius: 20px;
}
@media (min-width: 768px) {
  .shop-map {
    height: auto;
    aspect-ratio: 1036 / 606;
  }
}
.shop-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.shop-access-ttl {
  margin: 35px 0 20px;
  color: var(--c-green);
  font-size: clamp(18px, 0.5vw + 13px, 20px);
}
.shop-access-txt p {
  font-size: 15px;
  line-height: 2;
}

/* ============================================================
  実績紹介（works）
============================================================ */
/* About */
.works-lead {
  margin-top: clamp(36px, 4.4vw, 67px);
}
.works-lead p {
  font-size: clamp(15px, 0.4vw + 13.5px, 18px);
  line-height: 1.67;
}

/* 症例紹介（Before / After） */
.case-list {
  display: grid;
  gap: 30px;
  margin-top: clamp(40px, 5vw, 75px);
}
@media (min-width: 768px) {
  .case-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 30px;
  }
}
@media (min-width: 992px) {
  .case-list {
    gap: 75px 73px;
  }
}
.case-card {
  padding: 35px clamp(16px, 2.3vw, 35px) 42px;
  border-radius: 20px;
  background-color: var(--c-beige);
}
.case-ttl {
  margin-bottom: 25px;
  color: var(--c-green);
  text-align: center;
  font-size: clamp(17px, 0.4vw + 14px, 20px);
  font-weight: 500;
  line-height: 2;
}
.case-img {
  flex: 1;
  min-width: 0;
}
.case-img img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.case-img p {
  margin-top: 10px;
  color: var(--c-green);
  font-size: clamp(16px, 0.4vw + 13px, 20px);
  line-height: 1.2;
}

/* 症例写真：クリックでモーダル拡大 */
.case-imgs {
  cursor: zoom-in;
}
.case-imgs img {
  transition: opacity 0.3s;
}
.case-imgs:hover img {
  opacity: 0.8;
}
.case-imgs:focus-visible {
  outline: 2px solid var(--c-green);
  outline-offset: 4px;
}
.case-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 12px;
  background-color: rgba(39, 45, 39, 0.8);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.case-modal.is-open {
  opacity: 1;
  visibility: visible;
}
.case-modal-inner {
  position: relative;
  width: 100%;
  max-width: 960px;
  padding: 60px 16px 28px;
  border-radius: 20px;
  background-color: var(--c-beige);
}
.case-modal-ttl {
  margin-bottom: 20px;
  color: var(--c-green);
  text-align: center;
  font-size: clamp(17px, 0.5vw + 14px, 22px);
  font-weight: 500;
  line-height: 1.6;
}
.case-modal-imgs {
  /* 画面の高さに収まるよう写真の最大サイズを調整 */
  max-width: calc((100svh - 240px) * 2);
  margin-inline: auto;
}
.case-modal-img {
  flex: 1;
  min-width: 0;
}
.case-modal-img img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.case-modal-img p {
  margin-top: 10px;
  color: var(--c-green);
  font-size: clamp(16px, 0.5vw + 14px, 22px);
  line-height: 1.2;
}
.case-modal-close,
.case-modal-prev,
.case-modal-next {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--c-green);
  transition: background-color 0.3s;
}
.case-modal-close:hover,
.case-modal-prev:hover,
.case-modal-next:hover {
  background-color: var(--c-green-dark);
}
.case-modal-close {
  top: 10px;
  right: 10px;
}
.case-modal-close::before,
.case-modal-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 2px;
  background-color: #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}
.case-modal-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.case-modal-prev,
.case-modal-next {
  top: 50%;
  margin-top: -22px;
}
.case-modal-prev {
  left: 6px;
}
.case-modal-next {
  right: 6px;
}
.case-modal-prev::before,
.case-modal-next::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translate(-65%, -50%) rotate(45deg);
}
.case-modal-prev::before {
  transform: translate(-35%, -50%) rotate(-135deg);
}
.case-modal a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
@media (max-width: 767.98px) {
  /* スマホ縦：Before／Afterを縦に並べて大きく表示 */
  .case-modal-imgs {
    flex-direction: column;
    gap: 14px;
    max-width: min(100%, calc((100svh - 280px) / 2));
  }
  .case-modal-img {
    flex: none;
  }
}
@media (min-width: 992px) {
  .case-modal {
    padding: 30px 90px;
  }
  .case-modal-inner {
    padding: 64px 48px 40px;
  }
  .case-modal-prev {
    left: -70px;
  }
  .case-modal-next {
    right: -70px;
  }
}

/* お客様の声 */
.voice {
  background-color: var(--c-beige);
}
.voice-list {
  margin-top: clamp(40px, 6.6vw, 100px);
}
.voice-card {
  padding: 32px 20px 36px;
  border-radius: 20px;
  background-color: var(--c-card);
}
.voice-card + .voice-card {
  margin-top: clamp(20px, 2.3vw, 35px);
}
.voice-head {
  gap: 20px 60px;
  margin-bottom: 30px;
}
.voice-img {
  display: block;
  flex-shrink: 0;
  width: clamp(140px, 13vw, 196px);
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.voice-name {
  color: var(--c-green);
  font-size: clamp(18px, 0.5vw + 13px, 20px);
  font-weight: 500;
  line-height: 2;
}
.voice-card.is-plain .voice-name {
  margin-bottom: 20px;
}
.voice-name + .voice-role {
  margin-top: 10px;
}
.voice-role {
  /* 肩書きは折り返さず1行で表示（最小11px） */
  white-space: nowrap;
  font-size: clamp(11px, 3.7vw - 2.8px, 18px);
  font-weight: 500;
  line-height: 1.94;
}
/* 11pxでも収まらない極小画面（360px未満）のみ折り返しを許可 */
@media (max-width: 359.98px) {
  .voice-role {
    white-space: normal;
  }
}
.voice-txt p {
  font-size: clamp(15px, 0.2vw + 13px, 16px);
  line-height: 1.875;
}
@media (min-width: 768px) {
  .voice-card {
    padding: 50px 48px 52px;
  }
  .voice-role {
    font-size: 15px;
  }
  .voice-card.is-plain .voice-name {
    margin-bottom: 30px;
  }
}
@media (min-width: 992px) {
  .voice-card {
    padding: 59px 75px 52px;
  }
  .voice-role {
    font-size: clamp(15px, 0.4vw + 12px, 18px);
  }
  .voice-card.is-plain {
    padding: 59px 120px 66px;
  }
}

/* ============================================================
  アニメーション（JSで付与するクラス・要素）
============================================================ */
.js-char {
  display: inline-block;
  will-change: transform;
}
.js-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}
.js-line-inner {
  display: block;
  will-change: transform;
}
.sec-label::after {
  transform-origin: left center;
  transform: scaleX(var(--line, 1));
}
.text-center .sec-label::after,
.sec-label.text-center::after {
  transform-origin: center;
}
@media (min-width: 992px) {
  .text-lg-start .sec-label::after,
  .sec-label.text-lg-start::after {
    transform-origin: left center;
  }
}
.fv-slide img {
  translate: 0 var(--py, 0px);
}

/* ============================================================
  モーション軽減
============================================================ */
@media (prefers-reduced-motion: reduce) {
  .marquee {
    animation: none;
  }
  .fv-slide img {
    transition: opacity 0.01s;
    transform: none !important;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01s !important;
  }
}