@charset "UTF-8";
/*! destyle.css v4.0.0 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model and set borders */
/* ============================================ */
*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}

/* Document */
/* ============================================ */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 3. Remove gray overlay on links for iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -webkit-tap-highlight-color: transparent; /* 3*/
}

/* Sections */
/* ============================================ */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/* Vertical rhythm */
/* ============================================ */
p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

/* Headings */
/* ============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

/* Lists (enumeration) */
/* ============================================ */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Lists (definition) */
/* ============================================ */
dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

/* Grouping content */
/* ============================================ */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

address {
  font-style: inherit;
}

/* Text-level semantics */
/* ============================================ */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: inherit; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Replaced content */
/* ============================================ */
/**
 * Prevent vertical alignment issues.
 */
svg,
img,
embed,
object,
iframe {
  vertical-align: bottom;
}

/* Forms */
/* ============================================ */
/**
 * Reset form fields to make them styleable.
 * 1. Make form elements stylable across systems iOS especially.
 * 2. Inherit text-transform from parent.
 */
button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none; /* 1 */
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: inherit;
  text-transform: inherit; /* 2 */
}

/**
 * Correct cursors for clickable elements.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  cursor: pointer;
}

button:disabled,
[type=button]:disabled,
[type=reset]:disabled,
[type=submit]:disabled {
  cursor: default;
}

/**
 * Improve outlines for Firefox and unify style with input elements & buttons.
 */
:-moz-focusring {
  outline: auto;
}

select:disabled {
  opacity: inherit;
}

/**
 * Remove padding
 */
option {
  padding: 0;
}

/**
 * Reset to invisible
 */
fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}

legend {
  padding: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * Correct the outline style in Safari.
 */
[type=search] {
  outline-offset: -2px; /* 1 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Fix font inheritance.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/**
 * Fix appearance for Firefox
 */
[type=number] {
  -moz-appearance: textfield;
}

/**
 * Clickable labels
 */
label[for] {
  cursor: pointer;
}

/* Interactive */
/* ============================================ */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/*
 * Remove outline for editable content.
 */
[contenteditable]:focus {
  outline: auto;
}

/* Tables */
/* ============================================ */
/**
1. Correct table border color inheritance in all Chrome and Safari.
*/
table {
  border-color: inherit; /* 1 */
  border-collapse: collapse;
}

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
  padding: 0;
}

th {
  text-align: left;
  font-weight: bold;
}

html {
  -webkit-text-size-adjust: 100%;
  word-break: break-all;
  font-size: 10px;
  overflow-x: hidden;
}
@media (min-width: 768px) {
  html {
    font-size: 0.6944444444vw;
  }
}
@media (max-width: 767px) {
  html {
    font-size: min(2.6666666667vw, 20.4533333333px);
  }
}

body {
  font-family: "Zen Old Mincho", serif;
  font-size: 1.6rem;
  font-weight: 400;
  position: relative;
  overflow-x: clip;
  color: #333;
}
@media (max-width: 767px) {
  body {
    font-size: 1.4rem;
  }
}

.u-sp {
  display: none;
}
@media (max-width: 767px) {
  .u-sp {
    display: inline;
  }
}

.u-pc {
  display: inline;
}
@media (max-width: 767px) {
  .u-pc {
    display: none;
  }
}

img {
  width: 100%;
  height: auto;
}

.main {
  position: relative;
  min-height: 100vh;
}

h1,
h2,
h3,
a,
p {
  line-height: 1;
}

a {
  transition: 0.5s;
  cursor: pointer;
}
a:hover {
  opacity: 0.6;
}

.fade-up {
  opacity: 0;
  transform: translateY(20px);
}

.inner128 {
  max-width: 132rem;
  width: 100%;
  margin: 0 auto;
  padding: 0 2rem;
}

.page-fv {
  position: relative;
}

.fv.page-fv {
  padding-bottom: 0;
}

.fv.page-fv .fv-nav {
  position: static;
}

.page-fv .fv-reserve__web {
  position: relative;
}
.page-fv .fv-reserve__web::after {
  content: "";
  position: absolute;
  right: 0.4rem;
  bottom: 0.4rem;
  width: 1.6rem;
  height: 1.6rem;
  background: #fff;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

.page-fv__visual {
  position: relative;
  width: 100%;
  height: 50rem;
  overflow: hidden;
}
@media (max-width: 767px) {
  .page-fv__visual {
    height: 32rem;
  }
}
.page-fv__visual::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 57.3rem;
  height: 100%;
  z-index: 1;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.9) 32%, rgba(255, 255, 255, 0) 100%);
}
@media (max-width: 767px) {
  .page-fv__visual::before {
    width: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.35) 100%);
  }
}

.page-fv__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.page-fv__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}

.page-fv__logo {
  position: absolute;
  top: 0.7rem;
  left: 1.3rem;
  width: 25.6rem;
  z-index: 3;
}
@media (max-width: 767px) {
  .page-fv__logo {
    display: none;
  }
}
.page-fv__logo img {
  width: 100%;
  height: auto;
  display: block;
}

.page-fv__title {
  position: absolute;
  top: 50%;
  left: 8.3rem;
  transform: translateY(-50%);
  z-index: 2;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .page-fv__title {
    left: 50%;
    width: fit-content;
    max-width: 100%;
    text-align: center;
    transform: translate(-50%, -50%);
  }
}

.page-fv__title-ja {
  font-family: "Zen Old Mincho", serif;
  font-weight: 700;
  font-size: 3rem;
  letter-spacing: 0.06em;
  line-height: 1.4;
  color: #333;
}
@media (max-width: 767px) {
  .page-fv__title-ja {
    font-size: 2.2rem;
  }
}

.page-fv__title-line {
  display: block;
  width: auto;
  min-width: 27.6rem;
  height: 1px;
  background: #4FB58D;
  margin: 1.6rem 0 1.2rem;
}
@media (max-width: 767px) {
  .page-fv__title-line {
    width: auto;
    min-width: 20rem;
    margin: 1.2rem auto;
  }
}

.page-fv__title-en {
  font-family: "Zen Old Mincho", serif;
  font-weight: 700;
  font-size: 3rem;
  letter-spacing: 0.06em;
  color: #4FB58D;
}
@media (max-width: 767px) {
  .page-fv__title-en {
    font-size: 2.2rem;
  }
}

.page-head {
  width: 100%;
  height: 24rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: #fff;
  box-shadow: 0 4px 8px -4px rgba(0, 0, 0, 0.3);
}
@media (max-width: 767px) {
  .page-head {
    height: auto;
    padding: 2rem;
  }
}

.logo {
  width: 5.8rem;
  height: 6.2rem;
  object-fit: contain;
}

.page-head__title {
  font-size: 4.8rem;
  line-height: 1.6;
}
@media (max-width: 767px) {
  .page-head__title {
    font-size: 3.2rem;
  }
}

.border-line {
  width: 12rem;
  height: 0.5rem;
}
@media (max-width: 767px) {
  .border-line {
    width: 8rem;
  }
}

.contents-table {
  margin-top: 4rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width: 767px) {
  .contents-table {
    margin-top: 3rem;
    margin-left: -2rem;
    margin-right: -2rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
@media (max-width: 767px) {
  .comparison-table {
    min-width: 60rem;
    table-layout: auto;
  }
}
.comparison-table th,
.comparison-table td {
  padding: 1.4rem 1rem;
  vertical-align: middle;
  text-align: center;
  font-size: 2rem;
  line-height: 1.8;
  border: 1px solid #D1CAB9;
}
@media (max-width: 767px) {
  .comparison-table th,
  .comparison-table td {
    padding: 0.7rem 0.5rem;
    font-size: 1.4rem;
    line-height: 1.5;
  }
}
.comparison-table thead td {
  font-size: 2rem;
}
@media (max-width: 767px) {
  .comparison-table thead td {
    font-size: 1.5rem;
    font-weight: bold;
  }
}
.comparison-table .comparison-table__header {
  width: 24rem;
  background: #4FB58D;
  color: #fff;
  font-size: 2rem;
  text-align: center;
  vertical-align: middle;
  border-color: #D1CAB9;
}
@media (max-width: 767px) {
  .comparison-table .comparison-table__header {
    width: 12rem;
    font-size: 1.4rem;
    white-space: normal;
  }
}
.comparison-table .comparison-table__image {
  width: 21rem;
  height: 11rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 767px) {
  .comparison-table .comparison-table__image {
    width: 12rem;
    height: 8rem;
  }
}
.comparison-table .comparison-table__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.comparison-table tbody td {
  text-align: left;
  font-size: 2rem;
}
@media (max-width: 767px) {
  .comparison-table tbody td {
    font-size: 1.4rem;
  }
}
.comparison-table tbody tr:last-child td {
  text-align: center;
  font-size: 2rem;
}
@media (max-width: 767px) {
  .comparison-table tbody tr:last-child td {
    font-size: 1.4rem;
  }
}

.comparison-table__c03 .col-left {
  background: #F5EEE0;
}
.comparison-table__c03 .col-center {
  background: #EBE2D0;
}
.comparison-table__c03 .col-right {
  background: #F5EEE0;
}

.comparison-table__c02 .col-left {
  background: #F5EEE0;
}
.comparison-table__c02 .col-right {
  background: #EBE2D0;
}

.comparison-table__c01 {
  table-layout: auto;
}
.comparison-table__c01 .comparison-table__header {
  width: 40%;
}
.comparison-table__c01 .col-single {
  background: #F5EEE0;
}
.comparison-table__c01 tbody td {
  text-align: center;
}

.table-note {
  font-size: 2rem;
  line-height: 2;
  inline-size: fit-content;
  margin-inline: auto;
  margin-top: 2.4rem;
}
@media (max-width: 767px) {
  .table-note {
    font-size: 1.4rem;
    margin-top: 1.5rem;
    width: 100%;
    text-align: left;
  }
}

.c-contents-titlearea {
  position: relative;
  margin: 10rem 0 4rem;
}
@media (max-width: 767px) {
  .c-contents-titlearea {
    margin: 4rem 0;
  }
}

.contents-title {
  background: #9EA5B0;
  display: flex;
  width: 100%;
  padding: 3rem 1rem;
  justify-content: center;
  align-items: center;
  color: #FFF;
  font-size: 4rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.6;
  position: relative;
  margin: 8rem 0 4rem;
}
@media (max-width: 767px) {
  .contents-title {
    margin: 4rem 0 2rem;
    font-size: 2.4rem;
    padding: 2rem 1rem;
  }
}
.contents-title::before {
  content: "";
  position: absolute;
  top: 1rem;
  left: 0;
  width: 100%;
  height: 2px;
  background: #FFF;
}
.contents-title::after {
  content: "";
  position: absolute;
  bottom: 1rem;
  left: 0;
  width: 100%;
  height: 2px;
  background: #FFF;
}

.basic-flex {
  display: flex;
  justify-content: space-between;
  gap: 4rem;
  /* ======== .u-reverse（画像が右）の設定 ========
   HTMLの並び順はそのままで、見た目だけ左右反転させます
  */
}
@media (max-width: 767px) {
  .basic-flex {
    flex-direction: column;
    gap: 2rem;
  }
}
.basic-flex.u-reverse {
  flex-direction: row-reverse;
}
@media (max-width: 767px) {
  .basic-flex.u-reverse {
    flex-direction: column !important;
  }
}
.basic-flex.u-reverse .basic-flex__image::before {
  left: auto;
  right: -2rem;
}
@media (max-width: 767px) {
  .basic-flex.u-reverse .basic-flex__image::before {
    right: -1rem;
  }
}
.basic-flex .basic-flex__image {
  width: 60rem;
  height: 40rem;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .basic-flex .basic-flex__image {
    width: 100%;
    height: 100%;
    margin-bottom: 2rem;
  }
}
.basic-flex .basic-flex__image::before {
  content: "";
  position: absolute;
  bottom: -2rem;
  left: -2rem;
  width: 100%;
  height: 100%;
  background: #4FB58D;
  z-index: -1;
}
@media (max-width: 767px) {
  .basic-flex .basic-flex__image::before {
    bottom: -1rem;
    left: -1rem;
  }
}
.basic-flex .basic-flex__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
}

.basic-flex__textarea {
  flex: 1;
}
@media (max-width: 767px) {
  .basic-flex__textarea {
    width: 100%;
    flex: auto;
  }
}

.basic-flex__title {
  font-size: 3.2rem;
  font-weight: 500;
  line-height: 1.6;
  padding-bottom: 2rem;
  border-bottom: 1px solid #565656;
}
@media (max-width: 767px) {
  .basic-flex__title {
    font-size: 2.4rem;
    padding-bottom: 1rem;
  }
}
.basic-flex__title span {
  color: #4FB58D;
}

.basic-flex__text {
  margin-top: 4rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@media (max-width: 767px) {
  .basic-flex__text {
    margin-top: 2rem;
    gap: 1rem;
  }
}

.paragraph {
  font-size: 2rem;
  line-height: 2;
}
@media (max-width: 767px) {
  .paragraph {
    font-size: 1.6rem;
    line-height: 1.8;
  }
}

/* SEO用の隠し見出し（スクリーンリーダー・検索エンジンには読まれ、視覚上は非表示）
   指示書のH1はテンプレ側で <h1 class="u-sr-only"> として設置し、
   見た目のページ名見出しは p / h2 に格下げして重複を避ける */
.u-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* main〜footer の継ぎ目にbody背景が1px見える事故の対策（サブピクセル丸め）。
   サイトの基調色（フッターと同系色）に案件ごとに変更する */
#container {
  background: #fff;
}

/* ============================================================
   ページトップへ戻るボタン（全ページ共通・template-parts/to-top.php）
   どの背景上でも視認できる配色＋影。色はテーマカラーに合わせて変更
   ============================================================ */
.to-top {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  z-index: 9980;
  width: 5rem;
  height: 5rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #4FB58D;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
@media (max-width: 767px) {
  .to-top {
    right: 1.5rem;
    bottom: 6.7rem;
    width: 4.4rem;
    height: 4.4rem;
  }
}

.to-top.is-show {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 767px) {
  .to-top.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}
.to-top::before {
  content: "";
  position: absolute;
  top: 56%;
  left: 50%;
  width: 1.4rem;
  height: 1.4rem;
  border-top: 3px solid #fff;
  border-left: 3px solid #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}
@media (max-width: 767px) {
  .to-top::before {
    width: 1.2rem;
    height: 1.2rem;
  }
}

/* ============================================================
   ヘッダー
   PC: 上部固定・1440×132（Figma node 93:2187）／白 92% 透過
   SP: 上部固定・375×55 の白帯 ＋ 右端に緑のハンバーガー（Figma node 98:7742）
   ※座標は Figma 実測px = rem値×10（1rem = 10px）
   ============================================================ */
.l-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9900;
  width: 100%;
  height: 13.2rem;
  background: rgba(255, 255, 255, 0.92);
}
@media (max-width: 767px) {
  .l-header {
    height: 5.5rem;
    background: #fff;
  }
}

.l-header__inner {
  position: relative;
  z-index: 2;
  width: 144rem;
  max-width: 100%;
  height: 100%;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .l-header__inner {
    width: 100%;
  }
}

.l-header__spacer {
  height: 13.2rem;
}
@media (max-width: 767px) {
  .l-header__spacer {
    height: 0;
  }
}

.l-header__logo {
  position: absolute;
  top: 1.7rem;
  left: 15.7rem;
  width: 32.3rem;
}
@media (max-width: 767px) {
  .l-header__logo {
    top: 0.4rem;
    left: 1.7rem;
    width: 23.3rem;
  }
}

.l-header__logo-img {
  display: block;
  width: 100%;
  height: auto;
}

.l-header__tel {
  position: absolute;
  top: 1.7rem;
  left: 75.2rem;
  font-family: "Zen Old Mincho", serif;
  font-size: 3.6rem;
  line-height: 1.4444444444;
  color: #4FB58D;
  text-decoration: none;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .l-header__tel {
    display: none;
  }
}

.l-header__tel:hover {
  opacity: 0.8;
}

/* ------------------------------------------------------------
   グローバルナビ（Figma: 197,90 / 幅1047・15px・#555・字間1.05px）
   ------------------------------------------------------------ */
.l-header__nav {
  position: absolute;
  top: 9rem;
  left: 19.7rem;
  width: 104.7rem;
}
@media (max-width: 767px) {
  .l-header__nav {
    display: none;
  }
}

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

.gnav__item {
  position: relative;
}

.gnav__link {
  display: block;
  font-family: "Zen Old Mincho", serif;
  font-size: 1.5rem;
  line-height: 1.4666666667;
  letter-spacing: 0.105rem;
  color: #555;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.gnav__link:hover {
  color: #4FB58D;
}

.gnav__link--parent {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-family: "Zen Old Mincho", serif;
  font-size: 1.5rem;
  line-height: 1.4666666667;
  letter-spacing: 0.105rem;
  color: #555;
  cursor: default;
}

/* 診療案内メガメニュー（Figmaにデザインが無いためヘッダーのトンマナで自作）
   ・padding-top でヘッダー下端（13.2rem）まで橋を架け、ホバーが途切れないようにする
   ・キーボード操作でも開くよう :focus-within を併記 */
.gnav__item--medical {
  position: relative;
}

.gnav__mega {
  position: absolute;
  top: 100%;
  left: 50%;
  z-index: 10;
  width: 66rem;
  padding-top: 2rem;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.gnav__item--medical:hover .gnav__mega,
.gnav__item--medical:focus-within .gnav__mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.gnav__mega-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 2rem;
  padding: 2.2rem 3rem 2.6rem;
  list-style: none;
  background: rgba(255, 255, 255, 0.96);
  border-top: 0.2rem solid rgba(159, 215, 193, 0.88);
  box-shadow: 0 0.6rem 1.6rem rgba(51, 51, 51, 0.1);
}

.gnav__mega-item {
  border-bottom: 1px dashed rgba(159, 215, 193, 0.88);
}

.gnav__mega-link {
  position: relative;
  display: block;
  padding: 1.1rem 0.2rem 1.1rem 1.4rem;
  font-family: "Zen Old Mincho", serif;
  font-size: 1.5rem;
  line-height: 1.5;
  letter-spacing: 0.05em;
  color: #555;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s ease;
}
.gnav__mega-link::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #4FB58D;
  transform: translateY(-50%);
}

.gnav__mega-link:hover {
  color: #4FB58D;
}

/* ------------------------------------------------------------
   WEB予約 / アクセス ボタン
   Figma: WEB予約 1065,17（154×54）／アクセス 1232,17（154×54）＝間隔13px
   ------------------------------------------------------------ */
.l-header__btns {
  position: absolute;
  top: 1.7rem;
  left: 106.5rem;
  display: flex;
  gap: 1.3rem;
}
@media (max-width: 767px) {
  .l-header__btns {
    display: none;
  }
}

.l-header__btn-web {
  position: relative;
  display: flex;
  align-items: center;
  width: 15.4rem;
  height: 5.4rem;
  padding-left: 1.1rem;
  background: #4FB58D;
  border: 0.2rem solid rgba(159, 215, 193, 0.88);
  border-radius: 0.2rem;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
@media (max-width: 767px) {
  .l-header__btn-web {
    width: 100%;
  }
}
.l-header__btn-web .l-header__btn-label {
  color: #fff;
}

.l-header__btn-web:hover {
  opacity: 0.85;
}

.l-header__btn-access {
  position: relative;
  display: flex;
  align-items: center;
  width: 15.4rem;
  height: 5.4rem;
  padding-left: 1.3rem;
  background: #C2FFE7;
  border: 0.2rem solid rgba(159, 215, 193, 0.88);
  border-radius: 0.2rem;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
@media (max-width: 767px) {
  .l-header__btn-access {
    width: 100%;
  }
}
.l-header__btn-access .l-header__btn-label {
  color: #4FB58D;
}

.l-header__btn-access:hover {
  opacity: 0.85;
}

.l-header__btn-label {
  font-family: "Zen Old Mincho", serif;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.12rem;
}

.l-header__btn-icon {
  width: 1.7rem;
  height: auto;
  margin-right: 0.8rem;
}

.l-header__btn-arrow {
  position: absolute;
  right: 0.68rem;
  bottom: 0.78rem;
  width: 0.74rem;
  height: auto;
  transform: rotate(135deg);
}

.l-header__btn-pin {
  width: 1.34rem;
  height: auto;
  margin-right: 1.5rem;
}

/* ------------------------------------------------------------
   SP ハンバーガーボタン（Figma: 320,0 / 55×55）
   バー 35×2px を y=10 / 20 / 30、MENU は 12px
   ------------------------------------------------------------ */
.l-header__burger {
  display: none;
}
@media (max-width: 767px) {
  .l-header__burger {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 5.5rem;
    height: 5.5rem;
    padding: 0;
    background: #1F764C;
    border: none;
    border-radius: 0;
    cursor: pointer;
    appearance: none;
  }
}

.l-header__burger-bar {
  position: absolute;
  left: 1rem;
  width: 3.5rem;
  height: 0.2rem;
  background: #fff;
  transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease;
}

.l-header__burger-bar:nth-child(1) {
  top: 1rem;
}

.l-header__burger-bar:nth-child(2) {
  top: 2rem;
}

.l-header__burger-bar:nth-child(3) {
  top: 3rem;
}

.l-header__burger.is-open .l-header__burger-bar:nth-child(1) {
  top: 2rem;
  transform: rotate(45deg);
}

.l-header__burger.is-open .l-header__burger-bar:nth-child(2) {
  opacity: 0;
}

.l-header__burger.is-open .l-header__burger-bar:nth-child(3) {
  top: 2rem;
  transform: rotate(-45deg);
}

.l-header__burger-text,
.l-header__burger-text-close {
  position: absolute;
  top: 4.1rem;
  left: 0;
  width: 100%;
  font-family: "Zen Old Mincho", serif;
  font-size: 1.2rem;
  line-height: 1;
  letter-spacing: 0.1em;
  color: #fff;
  text-align: center;
}

.l-header__burger-text-close {
  opacity: 0;
}

.l-header__burger.is-open .l-header__burger-text {
  opacity: 0;
}

.l-header__burger.is-open .l-header__burger-text-close {
  opacity: 1;
}

/* ------------------------------------------------------------
   SP メニュー（全画面・Figmaに展開状態のデザインが無いため独自）
   ------------------------------------------------------------ */
.l-header__spmenu {
  display: none;
}
@media (max-width: 767px) {
  .l-header__spmenu {
    position: fixed;
    top: 5.5rem;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    display: block;
    overflow-y: auto;
    padding: 1.6rem 2rem 6rem;
    background: rgba(255, 255, 255, 0.98);
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.35s ease, visibility 0.35s ease;
  }
}

.l-header__spmenu.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

body.is-menu-open {
  overflow: hidden;
}

.spmenu__list {
  list-style: none;
}

.spmenu__item {
  border-bottom: 1px dashed rgba(159, 215, 193, 0.88);
}

.spmenu__link {
  display: block;
  padding: 1.3rem 0.4rem;
  font-family: "Zen Old Mincho", serif;
  font-size: 1.5rem;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: #333;
  text-decoration: none;
}

.spmenu__link--parent {
  flex: 1;
}

.spmenu__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.spmenu__toggle {
  position: relative;
  flex-shrink: 0;
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  appearance: none;
}
.spmenu__toggle::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.4rem;
  height: 0.2rem;
  background: #4FB58D;
  transform: translate(-50%, -50%);
}
.spmenu__toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.2rem;
  height: 1.4rem;
  background: #4FB58D;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.spmenu__toggle.is-open::after {
  opacity: 0;
}

.spmenu__sublist {
  overflow: hidden;
  max-height: 0;
  list-style: none;
  transition: max-height 0.4s ease;
}

.spmenu__subitem {
  border-top: 1px dashed rgba(159, 215, 193, 0.88);
}

.spmenu__sublink {
  position: relative;
  display: block;
  padding: 1.1rem 0.4rem 1.1rem 2.6rem;
  font-family: "Zen Old Mincho", serif;
  font-size: 1.4rem;
  line-height: 1.4;
  letter-spacing: 0.06em;
  color: #555;
  text-decoration: none;
}
.spmenu__sublink::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 1.2rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #4FB58D;
  transform: translateY(-50%);
}

.spmenu__foot {
  margin-top: 2.4rem;
}

.spmenu__tel {
  display: block;
  font-family: "Zen Old Mincho", serif;
  font-size: 2.8rem;
  line-height: 1.4;
  color: #4FB58D;
  text-align: center;
  text-decoration: none;
}

.spmenu__btn {
  margin-top: 1.2rem;
  justify-content: center;
  padding-left: 0;
  height: 6rem;
}

/* ==========================================================================
   フッター
   Figma: PC Component 86:1935（1440×1752 / PC y7699-9451）／ SP y7985-9828

   医院情報（住所バー・駅バー・TEL・WEB予約・診療時間表・Google Mapボタン）は
   TOP Information と共有の .clinic-info__* を再利用。定義元は
   object/compornent/project/_index-information.scss。
   ここでは再定義せず、ファイル後半の `.l-footer { .clinic-info__xxx { … } }` で
   フッター固有の差分だけを親スコープ限定で上書きしている（CLAUDE.md の例外ルール）。
   ========================================================================== */
.l-footer {
  position: relative;
}

/* ── 上段：左＝医院情報 ／ 右＝院内写真 ───────── */
.l-footer__top {
  display: flex;
  align-items: stretch;
}
@media (max-width: 767px) {
  .l-footer__top {
    flex-direction: column;
  }
}

.l-footer__main {
  display: flex;
  flex-direction: column;
  width: 53.75%;
  padding: 8.9rem 0 5.4rem;
  background: url("../img/common/footer-bg.webp") no-repeat center center/cover;
}
@media (max-width: 767px) {
  .l-footer__main {
    width: 100%;
    padding: 4.4rem 1rem 3.6rem;
  }
}

.l-footer__logo {
  width: 47.3rem;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .l-footer__logo {
    width: 30.7rem;
  }
}

.l-footer__contact {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 3.4rem;
  margin-top: 3.6rem;
}
@media (max-width: 767px) {
  .l-footer__contact {
    flex-direction: column;
    column-gap: 0;
    row-gap: 1.9rem;
    margin-top: 2rem;
  }
}

.l-footer__contact-tel {
  text-align: center;
}

.l-footer__note {
  margin-top: 1.7rem;
  font-size: 1.5rem;
  line-height: 1.48;
  color: #555;
  text-align: center;
}
@media (max-width: 767px) {
  .l-footer__note {
    margin-top: 1.9rem;
  }
}

.l-footer__bars {
  display: flex;
  flex-direction: column;
  row-gap: 0.9rem;
  width: 38.5rem;
  margin: 6.6rem auto 0;
}
@media (min-width: 768px) {
  .l-footer__bars {
    order: 1;
  }
}
@media (max-width: 767px) {
  .l-footer__bars {
    width: 100%;
    row-gap: 1.1rem;
    margin-top: 2rem;
  }
}

/* ── 上段右：院内写真（フルブリード） ───────── */
.l-footer__visual {
  position: relative;
  width: 46.25%;
  overflow: hidden;
}
@media (max-width: 767px) {
  .l-footer__visual {
    width: 100%;
  }
}

.l-footer__visual-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 767px) {
  .l-footer__visual-img {
    position: static;
    height: auto;
    aspect-ratio: 375/294;
  }
}

/* ── 中段：全幅の地図（左上に Google Map ボタンを重ねる） ── */
.l-footer__map {
  position: relative;
  width: 100%;
}

.l-footer__map-frame {
  display: block;
  width: 100%;
  aspect-ratio: 1440/446;
  border: 0;
}
@media (max-width: 767px) {
  .l-footer__map-frame {
    aspect-ratio: 375/252;
  }
}

/* ── 下段：緑地のサイトマップ ─────────────── */
.l-footer__sitemap-area {
  background: #4FB58D;
  padding: 6.8rem 0 1.5rem;
}
@media (max-width: 767px) {
  .l-footer__sitemap-area {
    padding: 6.9rem 0 1.6rem;
  }
}

.l-footer__sitemap {
  display: flex;
  column-gap: 15.5rem;
  padding-left: 8.5rem;
}
@media (max-width: 767px) {
  .l-footer__sitemap {
    flex-direction: column;
    column-gap: 0;
    padding-left: 1rem;
  }
}

.l-footer__pagenav {
  display: flex;
  flex-direction: column;
}
@media (max-width: 767px) {
  .l-footer__pagenav {
    flex-direction: row;
  }
}

.l-footer__pagenav-list {
  list-style: none;
}
@media (max-width: 767px) {
  .l-footer__pagenav-list {
    flex-shrink: 0;
    width: 18.3rem;
  }
}

@media (max-width: 767px) {
  .l-footer__pagenav-list:last-child {
    width: auto;
  }
}

.l-footer__pagenav-item {
  position: relative;
}
.l-footer__pagenav-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #fff;
}

.l-footer__pagenav-link {
  display: block;
  padding: 0.5rem 0 0.5rem 1.8rem;
  font-size: 1.5rem;
  line-height: 1.47;
  letter-spacing: 0.07em;
  color: #fff;
  text-decoration: none;
}

/* 診療案内（見出し＋2列のメニュー） */
@media (max-width: 767px) {
  .l-footer__medical {
    margin-top: 3.2rem;
  }
}

.l-footer__medical-head {
  position: relative;
  padding: 0.5rem 0 0.5rem 1.8rem;
  font-size: 1.5rem;
  line-height: 1.47;
  letter-spacing: 0.07em;
  color: #fff;
}
.l-footer__medical-head::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: #fff;
}

.l-footer__medical-cols {
  display: flex;
  margin: 0.7rem 0 0 2.8rem;
}
@media (max-width: 767px) {
  .l-footer__medical-cols {
    margin-left: 0;
  }
}

.l-footer__medical-list {
  list-style: none;
  flex-shrink: 0;
  width: 22.6rem;
}

.l-footer__medical-list:last-child {
  width: auto;
}

.l-footer__medical-item {
  position: relative;
}
.l-footer__medical-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.6rem;
  height: 0.1rem;
  background: #fff;
}

.l-footer__medical-link {
  display: block;
  padding: 0.3rem 0 0.3rem 1.4rem;
  font-size: 1.5rem;
  line-height: 1.47;
  letter-spacing: 0.07em;
  color: #fff;
  text-decoration: none;
}

/* ── コピーライト（ページの最末端・下マージンは付けない） ── */
.l-copyright {
  margin-top: 4.6rem;
  font-size: 1.3rem;
  line-height: 1.48;
  color: #fff;
  text-align: center;
}
@media (max-width: 767px) {
  .l-copyright {
    margin-top: 4rem;
  }
}

/* ==========================================================================
   共有パーツ .clinic-info__* のフッター限定差分
   （定義元は _index-information.scss。ここでは再定義せず親スコープ限定で上書き）
   ========================================================================== */
.l-footer .clinic-info__lead {
  margin-top: 0;
}
@media (max-width: 767px) {
  .l-footer .clinic-info__lead {
    font-size: 2rem;
  }
}
.l-footer .clinic-info__tel {
  font-size: 4rem;
}
@media (max-width: 767px) {
  .l-footer .clinic-info__tel {
    font-size: 4rem;
  }
}
.l-footer .clinic-info__bar {
  justify-content: flex-start;
  padding: 0 2.1rem;
}
.l-footer .clinic-info__hours {
  margin-top: 5.1rem;
}
@media (max-width: 767px) {
  .l-footer .clinic-info__hours {
    margin-top: 2rem;
  }
}
.l-footer .clinic-info__map-btn {
  position: absolute;
  left: 8rem;
  top: 3.5rem;
  z-index: 1;
  width: 22.7rem;
  height: 4.5rem;
  margin: 0;
  font-size: 2.4rem;
}
@media (max-width: 767px) {
  .l-footer .clinic-info__map-btn {
    left: 1rem;
    top: 2.7rem;
    width: 18.5rem;
    height: 4rem;
    margin: 0;
    font-size: 1.6rem;
  }
}

/* ==========================================================================
   SP下部固定バー（template-parts/sp-fix-area.php / Figma 98:7684 = 375×52）
   フッター到達で .is-hidden（js/index-spfix.js）。
   コピーライトに margin-bottom を足して逃がす実装はしない（CLAUDE.md）
   ========================================================================== */
.sp-fix-area {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 9990;
  display: flex;
  width: 100%;
  height: 5.2rem;
  background: #fff;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
@media (min-width: 768px) {
  .sp-fix-area {
    display: none;
  }
}

.sp-fix-area.is-hidden {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}

.sp-fix-area__item {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  column-gap: 0.5rem;
  background: #4FB58D;
  text-decoration: none;
}

.sp-fix-area__item--reserve {
  opacity: 0.8;
}

.sp-fix-area__icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: #fff;
}

.sp-fix-area__svg {
  display: block;
  height: auto;
}

.sp-fix-area__svg--tel {
  width: 0.9rem;
}

.sp-fix-area__svg--reserve {
  width: 1.4rem;
}

.sp-fix-area__svg--access {
  width: 1.2rem;
}

.sp-fix-area__label {
  font-family: "Zen Old Mincho", serif;
  font-size: 1.4rem;
  line-height: 2;
  letter-spacing: 0.1em;
  color: #fff;
}

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

@media (min-width: 768px) {
  .u-sp {
    display: none !important;
  }
}

.u-reverse {
  flex-direction: row-reverse !important;
}

.u-bg-none {
  background: transparent !important;
  box-shadow: none !important;
}

.u-mt10 {
  margin-top: 1rem !important;
}
@media (max-width: 767px) {
  .u-mt10 {
    margin-top: 0.5rem !important;
  }
}

.u-mt20 {
  margin-top: 2rem !important;
}
@media (max-width: 767px) {
  .u-mt20 {
    margin-top: 1rem !important;
  }
}

.u-mt30 {
  margin-top: 3rem !important;
}
@media (max-width: 767px) {
  .u-mt30 {
    margin-top: 1.5rem !important;
  }
}

.u-mt40 {
  margin-top: 4rem !important;
}
@media (max-width: 767px) {
  .u-mt40 {
    margin-top: 2rem !important;
  }
}

.u-mt50 {
  margin-top: 5rem !important;
}
@media (max-width: 767px) {
  .u-mt50 {
    margin-top: 2.5rem !important;
  }
}

.u-mt60 {
  margin-top: 6rem !important;
}
@media (max-width: 767px) {
  .u-mt60 {
    margin-top: 2rem !important;
  }
}

.u-mt70 {
  margin-top: 7rem !important;
}
@media (max-width: 767px) {
  .u-mt70 {
    margin-top: 3.5rem !important;
  }
}

.u-mt80 {
  margin-top: 8rem !important;
}
@media (max-width: 767px) {
  .u-mt80 {
    margin-top: 4rem !important;
  }
}

.u-mt90 {
  margin-top: 9rem !important;
}
@media (max-width: 767px) {
  .u-mt90 {
    margin-top: 4.5rem !important;
  }
}

.u-mt100 {
  margin-top: 10rem !important;
}
@media (max-width: 767px) {
  .u-mt100 {
    margin-top: 5rem !important;
  }
}

.u-mb0 {
  margin-bottom: 0 !important;
}

.u-mb10 {
  margin-bottom: 1rem !important;
}
@media (max-width: 767px) {
  .u-mb10 {
    margin-bottom: 0.5rem !important;
  }
}

.u-mb20 {
  margin-bottom: 2rem !important;
}
@media (max-width: 767px) {
  .u-mb20 {
    margin-bottom: 1rem !important;
  }
}

.u-mb30 {
  margin-bottom: 3rem !important;
}
@media (max-width: 767px) {
  .u-mb30 {
    margin-bottom: 1.5rem !important;
  }
}

.u-mb40 {
  margin-bottom: 4rem !important;
}
@media (max-width: 767px) {
  .u-mb40 {
    margin-bottom: 2rem !important;
  }
}

.u-mb50 {
  margin-bottom: 5rem !important;
}
@media (max-width: 767px) {
  .u-mb50 {
    margin-bottom: 2.5rem !important;
  }
}

.u-mb60 {
  margin-bottom: 6rem !important;
}
@media (max-width: 767px) {
  .u-mb60 {
    margin-bottom: 3rem !important;
  }
}

.u-mb70 {
  margin-bottom: 7rem !important;
}
@media (max-width: 767px) {
  .u-mb70 {
    margin-bottom: 3.5rem !important;
  }
}

.u-mb80 {
  margin-bottom: 8rem !important;
}
@media (max-width: 767px) {
  .u-mb80 {
    margin-bottom: 4rem !important;
  }
}

.u-mb90 {
  margin-bottom: 9rem !important;
}
@media (max-width: 767px) {
  .u-mb90 {
    margin-bottom: 4.5rem !important;
  }
}

.u-mb100 {
  margin-bottom: 10rem !important;
}
@media (max-width: 767px) {
  .u-mb100 {
    margin-bottom: 5rem !important;
  }
}

.u-flex-start {
  align-items: flex-start !important;
}
@media (max-width: 767px) {
  .u-flex-start {
    align-items: center !important;
  }
}

.u-blue {
  color: #4FB58D;
}

.u-fz70 {
  font-size: 7rem;
}
@media (max-width: 767px) {
  .u-fz70 {
    font-size: 4.5rem;
  }
}

.u-fz80 {
  font-size: 8rem;
}
@media (max-width: 767px) {
  .u-fz80 {
    font-size: 3.2rem;
  }
}

.u-fz220 {
  font-size: 22rem;
}
@media (max-width: 767px) {
  .u-fz220 {
    font-size: 9.6rem;
  }
}

/* ==========================================================================
   診療案内（下層）共通スタイル
   Figma: 診療案内④ 虫歯／予防／歯周病 = node 76:628（1440×7331・本文は y132〜5579）
   他の診療案内ページ（口腔外科・小児・インプラント…）も同じ骨組みなので
   このファイルを共有する（ページ固有の差分だけ後から足す）。

   PCの座組（Figma 実測）
     左のページ内リンク … x0〜220（画面左端に密着）／右端に 1px の区切り線
     本文カラム        … x241〜1360（幅1119）／右余白 80
     「歯周病治療の流れ」… x120〜1320（幅1200・中央寄せ）だけコンテナ幅が違う
   ========================================================================== */
.page-caries,
.page-oral-surgery,
.page-pediatric,
.page-implant,
.page-aesthetic,
.page-orthodontic,
.page-botulinum,
.page-lipart,
.page-case,
.page-faq {
  background: #fff;
  padding-bottom: 14rem;
}
@media (max-width: 767px) {
  .page-caries,
  .page-oral-surgery,
  .page-pediatric,
  .page-implant,
  .page-aesthetic,
  .page-orthodontic,
  .page-botulinum,
  .page-lipart,
  .page-case,
  .page-faq {
    padding-bottom: 6rem;
  }
}

/* --------------------------------------------------
   左ナビ＋本文の2カラム
   -------------------------------------------------- */
.medical-layout {
  position: relative;
  display: flex;
  align-items: flex-start;
}
@media (max-width: 767px) {
  .medical-layout {
    flex-direction: column;
  }
}
.medical-layout::before {
  content: "";
  position: absolute;
  left: 21.9rem;
  top: 0;
  bottom: 0;
  width: 0.1rem;
  background: #D9D9D9;
}
@media (max-width: 767px) {
  .medical-layout::before {
    display: none;
  }
}

/* --------------------------------------------------
   左：ページ内リンク
   メインビジュアルを過ぎたら固定（position: sticky）。GSAPのpinは使わない
   （ラッパー挿入なし・JS不要で固定ヘッダーとも干渉しないため）。
   止まる位置＝固定ヘッダー 13.2rem ＋ 1.2rem の余白。
   親 .medical-layout の下端まで来たら自動で解除される。
   -------------------------------------------------- */
.medical-nav {
  position: sticky;
  top: 14.4rem;
  flex-shrink: 0;
  width: 22rem;
  padding-bottom: 2rem;
}
@media (max-width: 767px) {
  .medical-nav {
    position: static;
    width: 100%;
    margin-top: 2.4rem;
    padding: 0 2rem;
  }
}

.medical-nav__title {
  padding: 10rem 1.9rem 2.88rem;
  border-bottom: 0.08rem solid #D9D9D9;
  font-family: "Zen Old Mincho", serif;
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: #555;
}
@media (max-width: 767px) {
  .medical-nav__title {
    padding: 0 0 1.2rem;
    border-bottom-width: 0.1rem;
  }
}

.medical-nav__list {
  padding-top: 1.1rem;
}
@media (max-width: 767px) {
  .medical-nav__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem 1.2rem;
    padding-top: 1.2rem;
  }
}

.medical-nav__link {
  display: flex;
  align-items: center;
  column-gap: 1.1rem;
  padding: 1.8rem 2rem;
  border-radius: 0.5rem;
  font-family: "Zen Old Mincho", serif;
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.5715;
  letter-spacing: 0.05em;
  color: #555;
  text-decoration: none;
  transition: background 0.3s ease;
}
@media (max-width: 767px) {
  .medical-nav__link {
    padding: 1.2rem 1.4rem;
    border: 0.1rem solid rgba(159, 215, 193, 0.88);
  }
}
.medical-nav__link:hover {
  background: #F0FAF6;
  opacity: 1;
}

.medical-nav__mark {
  flex-shrink: 0;
  width: 0.5rem;
  height: 0.8rem;
  background: #A4D4C2;
}

/* --------------------------------------------------
   右：本文カラム
   -------------------------------------------------- */
.medical-content {
  width: 111.9rem;
  margin-left: 2.1rem;
}
@media (max-width: 767px) {
  .medical-content {
    width: 100%;
    margin-left: 0;
    padding: 0 2rem;
  }
}

/* --------------------------------------------------
   セクション（虫歯／予防／歯周病）
   -------------------------------------------------- */
.medical-sec {
  scroll-margin-top: 14rem;
}
@media (max-width: 767px) {
  .medical-sec {
    scroll-margin-top: 6.5rem;
  }
}

.medical-sec + .medical-sec {
  margin-top: 8rem;
}
@media (max-width: 767px) {
  .medical-sec + .medical-sec {
    margin-top: 4.8rem;
  }
}

.medical-sec:first-child {
  margin-top: 7.4rem;
}
@media (max-width: 767px) {
  .medical-sec:first-child {
    margin-top: 3.2rem;
  }
}

.page-oral-surgery .medical-sec + .medical-sec {
  margin-top: 5.8rem;
}
@media (max-width: 767px) {
  .page-oral-surgery .medical-sec + .medical-sec {
    margin-top: 4rem;
  }
}

.page-pediatric .medical-sec + .medical-sec {
  margin-top: 4.1rem;
}
@media (max-width: 767px) {
  .page-pediatric .medical-sec + .medical-sec {
    margin-top: 4rem;
  }
}
.page-pediatric .medical-check + .medical-subhead {
  margin-top: 4.1rem;
}
@media (max-width: 767px) {
  .page-pediatric .medical-check + .medical-subhead {
    margin-top: 3.2rem;
  }
}

.page-aesthetic .medical-subhead + .medical-subhead {
  margin-top: 4.4rem;
}
@media (max-width: 767px) {
  .page-aesthetic .medical-subhead + .medical-subhead {
    margin-top: 3.2rem;
  }
}
.page-aesthetic .medical-text--subhead + .medical-subhead {
  margin-top: 5.5rem;
}
@media (max-width: 767px) {
  .page-aesthetic .medical-text--subhead + .medical-subhead {
    margin-top: 3.2rem;
  }
}
.page-aesthetic .medical-check + .medical-subhead {
  margin-top: 4rem;
}
@media (max-width: 767px) {
  .page-aesthetic .medical-check + .medical-subhead {
    margin-top: 3.2rem;
  }
}
.page-aesthetic .medical-text--question + .medical-subhead {
  margin-top: 4.3rem;
}
@media (max-width: 767px) {
  .page-aesthetic .medical-text--question + .medical-subhead {
    margin-top: 3.2rem;
  }
}
.page-aesthetic .medical-block + .medical-question {
  margin-top: 4.7rem;
}
@media (max-width: 767px) {
  .page-aesthetic .medical-block + .medical-question {
    margin-top: 3.2rem;
  }
}
.page-aesthetic .medical-sec:nth-of-type(2) {
  margin-top: 9.5rem;
}
@media (max-width: 767px) {
  .page-aesthetic .medical-sec:nth-of-type(2) {
    margin-top: 4.8rem;
  }
}
.page-aesthetic .medical-sec:nth-of-type(3) {
  margin-top: 4.9rem;
}
@media (max-width: 767px) {
  .page-aesthetic .medical-sec:nth-of-type(3) {
    margin-top: 4.8rem;
  }
}
.page-aesthetic .medical-sec:nth-of-type(4) {
  margin-top: 6.5rem;
}
@media (max-width: 767px) {
  .page-aesthetic .medical-sec:nth-of-type(4) {
    margin-top: 4.8rem;
  }
}
.page-aesthetic .medical-sec:nth-of-type(4) > .medical-subhead:first-child {
  margin-top: 0;
}
@media (max-width: 767px) {
  .page-aesthetic .medical-sec:nth-of-type(4) > .medical-subhead:first-child {
    margin-top: 0;
  }
}

.page-botulinum .medical-sec + .medical-sec,
.page-lipart .medical-sec + .medical-sec {
  margin-top: 4rem;
}
@media (max-width: 767px) {
  .page-botulinum .medical-sec + .medical-sec,
  .page-lipart .medical-sec + .medical-sec {
    margin-top: 4rem;
  }
}
.page-botulinum .medical-block + .medical-question,
.page-lipart .medical-block + .medical-question {
  margin-top: 5rem;
}
@media (max-width: 767px) {
  .page-botulinum .medical-block + .medical-question,
  .page-lipart .medical-block + .medical-question {
    margin-top: 3.2rem;
  }
}
.page-botulinum .medical-check + .medical-subhead,
.page-lipart .medical-check + .medical-subhead {
  margin-top: 4.1rem;
}
@media (max-width: 767px) {
  .page-botulinum .medical-check + .medical-subhead,
  .page-lipart .medical-check + .medical-subhead {
    margin-top: 3.2rem;
  }
}
.page-botulinum .medical-lip + .medical-subhead,
.page-lipart .medical-lip + .medical-subhead {
  margin-top: 4rem;
}
@media (max-width: 767px) {
  .page-botulinum .medical-lip + .medical-subhead,
  .page-lipart .medical-lip + .medical-subhead {
    margin-top: 3.2rem;
  }
}
.page-botulinum .medical-text + .medical-subhead,
.page-lipart .medical-text + .medical-subhead {
  margin-top: 3.2rem;
}
@media (max-width: 767px) {
  .page-botulinum .medical-text + .medical-subhead,
  .page-lipart .medical-text + .medical-subhead {
    margin-top: 3.2rem;
  }
}
.page-botulinum .medical-subhead + .medical-text--subhead,
.page-lipart .medical-subhead + .medical-text--subhead {
  margin-top: 3.4rem;
}
@media (max-width: 767px) {
  .page-botulinum .medical-subhead + .medical-text--subhead,
  .page-lipart .medical-subhead + .medical-text--subhead {
    margin-top: 2rem;
  }
}
.page-botulinum .medical-block + .medical-text,
.page-lipart .medical-block + .medical-text {
  margin-top: 5rem;
}
@media (max-width: 767px) {
  .page-botulinum .medical-block + .medical-text,
  .page-lipart .medical-block + .medical-text {
    margin-top: 3.2rem;
  }
}
.page-botulinum .medical-compare + .medical-subhead,
.page-lipart .medical-compare + .medical-subhead {
  margin-top: 4.1rem;
}
@media (max-width: 767px) {
  .page-botulinum .medical-compare + .medical-subhead,
  .page-lipart .medical-compare + .medical-subhead {
    margin-top: 3.2rem;
  }
}

/* 見出し（和文＋英字の横並び・下に細い罫線＋左端に短い緑線） */
.medical-sec__head {
  position: relative;
  display: flex;
  align-items: center;
  column-gap: 2rem;
  padding-bottom: 2.08rem;
  border-bottom: 0.08rem solid #D9D9D9;
}
@media (max-width: 767px) {
  .medical-sec__head {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 0.4rem;
    padding-bottom: 1.2rem;
    border-bottom-width: 0.1rem;
  }
}
.medical-sec__head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.08rem;
  width: 5rem;
  height: 0.1rem;
  background: #377F5E;
}
@media (max-width: 767px) {
  .medical-sec__head::after {
    bottom: -0.1rem;
    width: 4rem;
  }
}

.medical-sec__title {
  font-family: "Zen Old Mincho", serif;
  font-weight: 600;
  font-size: 2.8rem;
  line-height: 1.2;
  letter-spacing: 0.06em;
  color: #555;
}
@media (max-width: 767px) {
  .medical-sec__title {
    font-size: 1.8rem;
    line-height: 1.5;
  }
}

.medical-sec__en {
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.7858;
  letter-spacing: 0.06em;
  color: #AAA8A6;
}
@media (max-width: 767px) {
  .medical-sec__en {
    font-size: 1.2rem;
  }
}

/* --------------------------------------------------
   写真＋テキストの2カラム
   Figma: 写真 x279（本文カラム左端から38px）404×360 角丸15px
          テキスト x754（写真右端から71px）幅602
   -------------------------------------------------- */
.medical-block {
  display: flex;
  align-items: flex-start;
  margin-top: 3.9rem;
}
@media (max-width: 767px) {
  .medical-block {
    flex-direction: column;
    margin-top: 2.4rem;
  }
}

.medical-block__image {
  flex-shrink: 0;
  width: 40.4rem;
  margin: 2.7rem 0 0 3.8rem;
  border-radius: 1.5rem;
  overflow: hidden;
}
@media (max-width: 767px) {
  .medical-block__image {
    width: 100%;
    margin: 0 auto;
  }
}
.medical-block__image img {
  display: block;
  width: 100%;
  height: auto;
}

.medical-block__body {
  width: 60.2rem;
  margin-left: 7.1rem;
}
@media (max-width: 767px) {
  .medical-block__body {
    width: 100%;
    margin: 2rem 0 0;
  }
}

.medical-block__unit + .medical-block__unit {
  margin-top: 6rem;
}
@media (max-width: 767px) {
  .medical-block__unit + .medical-block__unit {
    margin-top: 3.2rem;
  }
}

.medical-block + .medical-block {
  margin-top: 8.2rem;
}
@media (max-width: 767px) {
  .medical-block + .medical-block {
    margin-top: 4rem;
  }
}

.medical-text + .medical-block,
.medical-check + .medical-block {
  margin-top: 5.7rem;
}
@media (max-width: 767px) {
  .medical-text + .medical-block,
  .medical-check + .medical-block {
    margin-top: 3.2rem;
  }
}

/* 左右反転（テキスト左・写真右）— Figma 口腔外科 86:2435+86:2442 など
   row-reverse ＋ space-between で、写真を本文カラムの右端・テキストを左端 38px に置く。
   共有クラスの親スコープ限定上書きなので入れ子で書く（CLAUDE.md の例外ルール） */
.medical-block--rev {
  flex-direction: row-reverse;
  justify-content: space-between;
}
@media (max-width: 767px) {
  .medical-block--rev {
    flex-direction: column;
  }
}
.medical-block--rev .medical-block__image {
  margin: 0;
}
@media (max-width: 767px) {
  .medical-block--rev .medical-block__image {
    margin: 0 auto;
  }
}
.medical-block--rev .medical-block__body {
  margin: 2.1rem 0 0 3.8rem;
}
@media (max-width: 767px) {
  .medical-block--rev .medical-block__body {
    margin: 2rem 0 0;
  }
}

.medical-lead {
  font-family: "Zen Old Mincho", serif;
  font-weight: 600;
  font-size: 2.6rem;
  line-height: 1.8462;
  letter-spacing: 0.06em;
  color: #555;
}
@media (max-width: 767px) {
  .medical-lead {
    font-size: 2rem;
    line-height: 1.7;
  }
}

.medical-text {
  font-family: "Zen Old Mincho", serif;
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 2.1429;
  letter-spacing: 0.06em;
  color: #555;
}

.medical-text + .medical-text {
  margin-top: 3rem;
}
@media (max-width: 767px) {
  .medical-text + .medical-text {
    margin-top: 2rem;
  }
}

.medical-text + .medical-text--nogap {
  margin-top: 0;
}
@media (max-width: 767px) {
  .medical-text + .medical-text--nogap {
    margin-top: 0;
  }
}

/* 「フッ素の3つの効果」帯（ベージュ地・中央寄せ） */
.medical-band {
  width: 26.6rem;
  margin-top: 4rem;
  background: #E3D8BC;
  font-family: "Zen Old Mincho", serif;
  font-weight: 600;
  font-size: 2.6rem;
  line-height: 1.8462;
  letter-spacing: 0.06em;
  color: #555;
  text-align: center;
}
@media (max-width: 767px) {
  .medical-band {
    width: 100%;
    max-width: 26.6rem;
    margin-top: 2.8rem;
    font-size: 1.8rem;
    line-height: 2.2;
  }
}

.medical-text--band {
  margin-top: 0;
}

.medical-text--narrow {
  max-width: 67.6rem;
  margin-top: 1.5rem;
}
@media (max-width: 767px) {
  .medical-text--narrow {
    max-width: 100%;
    margin-top: 1.6rem;
  }
}

.medical-text--subhead {
  margin-top: 1.8rem;
}
@media (max-width: 767px) {
  .medical-text--subhead {
    margin-top: 1.4rem;
  }
}

.medical-text--question {
  margin-top: 1.6rem;
}
@media (max-width: 767px) {
  .medical-text--question {
    margin-top: 1.2rem;
  }
}

/* --------------------------------------------------
   問いかけ見出し＋チェックリスト（Figma 親知らず 86:3073 / 86:3077 ほか）
   -------------------------------------------------- */
.medical-question {
  position: relative;
  margin-top: 5rem;
  padding-left: 3.2rem;
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-size: 2.175rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: #1F764C;
}
@media (max-width: 767px) {
  .medical-question {
    margin-top: 3.2rem;
    padding-left: 2.2rem;
    font-size: 1.8rem;
    letter-spacing: 0em;
  }
}
.medical-question::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6rem;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: linear-gradient(to right, #9bbbac, #619a81);
}
@media (max-width: 767px) {
  .medical-question::before {
    top: 0.5rem;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 0.4rem;
  }
}

.medical-block + .medical-question {
  margin-top: 7.4rem;
}
@media (max-width: 767px) {
  .medical-block + .medical-question {
    margin-top: 3.6rem;
  }
}

.medical-subhead + .medical-question {
  margin-top: 1.8rem;
}
@media (max-width: 767px) {
  .medical-subhead + .medical-question {
    margin-top: 1.6rem;
  }
}

.medical-check {
  margin-top: 1.7rem;
  padding: 2rem 3rem;
  background: #EEF6F2;
}
@media (max-width: 767px) {
  .medical-check {
    margin-top: 1.4rem;
    padding: 1.6rem 1.8rem;
  }
}

/* チェックアイコンは Figma では Font Awesome の check-square（f14a）だが、
   外部フォントを読み込まずに済むよう CSS の擬似要素で同じ見た目を作っている */
.medical-check__item {
  position: relative;
  padding-left: 3rem;
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 2;
  color: #333;
}
@media (max-width: 767px) {
  .medical-check__item {
    padding-left: 2.6rem;
    font-size: 1.4rem;
    line-height: 2.1;
  }
}
.medical-check__item::before {
  content: "";
  position: absolute;
  left: 0.7rem;
  top: 0.78rem;
  width: 1.46rem;
  height: 1.46rem;
  border-radius: 0.3rem;
  background: #1F764C;
}
@media (max-width: 767px) {
  .medical-check__item::before {
    left: 0.4rem;
    top: 0.72rem;
    width: 1.3rem;
    height: 1.3rem;
  }
}
.medical-check__item::after {
  content: "";
  position: absolute;
  left: 1.13rem;
  top: 1.2rem;
  width: 0.62rem;
  height: 0.32rem;
  border-left: 0.2rem solid #fff;
  border-bottom: 0.2rem solid #fff;
  transform: rotate(-45deg);
}
@media (max-width: 767px) {
  .medical-check__item::after {
    left: 0.79rem;
    top: 1.1rem;
    width: 0.56rem;
    height: 0.28rem;
    border-width: 0.18rem;
  }
}

.medical-check__item + .medical-check__item {
  margin-top: 1rem;
}
@media (max-width: 767px) {
  .medical-check__item + .medical-check__item {
    margin-top: 0.6rem;
  }
}

/* --------------------------------------------------
   チェックリスト＋唇のお悩み写真（Figma リップアート 92:7193 ／ 92:7252〜92:7258）
   左：チェックリスト x240..814（幅574）／右：写真3枚 x840..1352（幅512）
   写真は上段2枚＋下段1枚を中央寄せの配置
   -------------------------------------------------- */
.medical-lip {
  display: flex;
  align-items: flex-start;
  column-gap: 2.6rem;
}
@media (max-width: 767px) {
  .medical-lip {
    flex-direction: column;
    row-gap: 2rem;
  }
}

.medical-lip__list {
  width: 57.4rem;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .medical-lip__list {
    width: 100%;
  }
}

.medical-lip__cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 2.6rem;
  row-gap: 1.5rem;
  width: 51.2rem;
  margin-top: 1.7rem;
}
@media (max-width: 767px) {
  .medical-lip__cards {
    width: 100%;
    column-gap: 1.6rem;
    row-gap: 1.6rem;
    margin-top: 0;
  }
}

.medical-lip__card {
  width: 24.3rem;
}
@media (max-width: 767px) {
  .medical-lip__card {
    width: calc((100% - 1.6rem) / 2);
  }
}

.medical-lip__image {
  width: 100%;
  height: 13.1rem;
  overflow: hidden;
}
@media (max-width: 767px) {
  .medical-lip__image {
    height: auto;
    aspect-ratio: 243/131;
  }
}
.medical-lip__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.medical-lip__caption {
  margin-top: 0.4rem;
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-size: 2.175rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: #D15676;
  text-align: center;
}
@media (max-width: 767px) {
  .medical-lip__caption {
    margin-top: 0.6rem;
    font-size: 1.4rem;
    letter-spacing: 0.04em;
  }
}

/* --------------------------------------------------
   Q&A（アコーディオン）
   Figma は問いかけ見出しの四角に「Q」が入った形（92:4557〜）で、答えは開いた状態で
   描かれている。ユーザー指定でアコーディオン化しているため、開閉のしるし（右端の
   シェブロン）だけデザインに無い要素を足している。既定は全て閉じた状態。
   開閉: js/faq-accordion.js（.medical-faq__item に .is-open を付け外し）
   -------------------------------------------------- */
.medical-faq__item + .medical-faq__item {
  margin-top: 5rem;
}
@media (max-width: 767px) {
  .medical-faq__item + .medical-faq__item {
    margin-top: 2.8rem;
  }
}

.medical-faq__q {
  position: relative;
  display: block;
  width: 100%;
  padding: 0 4rem 0 3.2rem;
  background: none;
  border: 0;
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-size: 2.175rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: #1F764C;
  text-align: left;
  cursor: pointer;
}
@media (max-width: 767px) {
  .medical-faq__q {
    padding: 0 3rem 0 2.6rem;
    font-size: 1.8rem;
  }
}
.medical-faq__q::before {
  content: "Q";
  position: absolute;
  left: 0;
  top: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: linear-gradient(to right, #9bbbac, #619a81);
  font-size: 1.4rem;
  line-height: 1;
  letter-spacing: 0;
  color: #fff;
}
@media (max-width: 767px) {
  .medical-faq__q::before {
    top: 0.5rem;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 0.4rem;
    font-size: 1.1rem;
  }
}
.medical-faq__q::after {
  content: "";
  position: absolute;
  right: 0.8rem;
  top: 1rem;
  width: 1rem;
  height: 1rem;
  border-right: 0.2rem solid #1F764C;
  border-bottom: 0.2rem solid #1F764C;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
  opacity: 0;
}
@media (max-width: 767px) {
  .medical-faq__q::after {
    right: 0.4rem;
    top: 0.8rem;
    width: 0.8rem;
    height: 0.8rem;
  }
}

.medical-faq__item.is-collapsible .medical-faq__q::after {
  opacity: 1;
}

.medical-faq__q[aria-expanded=true]::after {
  transform: rotate(-135deg);
}

.medical-faq__item.is-collapsible .medical-faq__a {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s ease;
}

.medical-faq__item.is-open .medical-faq__a {
  max-height: 60rem;
}

.medical-faq__a-text {
  padding: 1.6rem 0 0 3.2rem;
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 2;
  color: #333;
}
@media (max-width: 767px) {
  .medical-faq__a-text {
    padding: 1.2rem 0 0 2.6rem;
    font-size: 1.4rem;
    line-height: 2.1;
  }
}

.medical-text--lg {
  font-size: 2rem;
}
@media (max-width: 767px) {
  .medical-text--lg {
    font-size: 1.6rem;
  }
}

/* --------------------------------------------------
   2カラムの比較（Figma 矯正歯科「インビザラインと裏側矯正の違い」92:6529〜）
   見出しの帯は虫歯段階カードのタイトルと同じ形。中身はチェックリストを流用
   -------------------------------------------------- */
.medical-compare {
  display: flex;
  column-gap: 7.1rem;
  margin-top: 1.8rem;
}
@media (max-width: 767px) {
  .medical-compare {
    flex-direction: column;
    row-gap: 2rem;
    margin-top: 1.6rem;
  }
}

.medical-compare__col {
  flex: 1;
  min-width: 0;
}

.medical-compare__title {
  padding: 0.7rem 1.5rem;
  background: #4FB58D;
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: #fff;
}
@media (max-width: 767px) {
  .medical-compare__title {
    padding: 0.8rem 1.2rem;
    font-size: 1.5rem;
    letter-spacing: 0.06em;
  }
}

.medical-text--compare {
  margin-top: 2.4rem;
}
@media (max-width: 767px) {
  .medical-text--compare {
    margin-top: 2rem;
  }
}

.medical-price {
  margin-top: 1.8rem;
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  font-size: 2.4rem;
  line-height: 1.25;
  color: #333;
}
@media (max-width: 767px) {
  .medical-price {
    margin-top: 1.4rem;
    font-size: 2rem;
  }
}

/* --------------------------------------------------
   小見出し（虫歯段階別の治療方法／歯周病治療の流れ）
   -------------------------------------------------- */
.medical-subhead {
  position: relative;
  margin-top: 8rem;
  padding: 0 1rem 0.96rem 5rem;
  border-bottom: 0.16rem solid #E0E0E0;
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-size: 2.4rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: #333;
}
@media (max-width: 767px) {
  .medical-subhead {
    margin-top: 4rem;
    padding: 0 0 0.8rem 2.5rem;
    font-size: 1.8rem;
  }
}
.medical-subhead::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 0.34rem;
  width: 2.7rem;
  height: 3.2rem;
  background: url("../img/common/icon-tooth.webp") no-repeat center center/contain;
}
@media (max-width: 767px) {
  .medical-subhead::before {
    left: 0;
    top: 0.4rem;
    width: 1.8rem;
    height: 2.1rem;
  }
}

.medical-subhead--flow {
  margin-top: 5.2rem;
}
@media (max-width: 767px) {
  .medical-subhead--flow {
    margin-top: 4rem;
  }
}

.medical-subhead--noicon {
  padding-left: 0;
}
@media (max-width: 767px) {
  .medical-subhead--noicon {
    padding-left: 0;
  }
}

.medical-subhead--noicon::before {
  display: none;
}

/* --------------------------------------------------
   虫歯段階別カード（[C1]〜[C4]）
   -------------------------------------------------- */
.medical-stage-list {
  margin-top: 1.8rem;
}
@media (max-width: 767px) {
  .medical-stage-list {
    margin-top: 1.6rem;
  }
}

.medical-stage {
  display: flex;
  align-items: flex-start;
  column-gap: 3rem;
  padding: 2rem;
  background: #EEF6F2;
}
@media (max-width: 767px) {
  .medical-stage {
    flex-direction: column;
    align-items: center;
    row-gap: 1.6rem;
    padding: 1.6rem;
  }
}

.medical-stage + .medical-stage {
  margin-top: 2rem;
}
@media (max-width: 767px) {
  .medical-stage + .medical-stage {
    margin-top: 1.6rem;
  }
}

.medical-stage__image {
  flex-shrink: 0;
  width: 27.5rem;
  height: 19rem;
  background: #fff;
  overflow: hidden;
}
@media (max-width: 767px) {
  .medical-stage__image {
    width: 100%;
    max-width: 24rem;
    height: auto;
    aspect-ratio: 275/190;
  }
}
.medical-stage__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.medical-stage__body {
  flex: 1;
  min-width: 0;
}
@media (max-width: 767px) {
  .medical-stage__body {
    width: 100%;
  }
}

.medical-stage__title {
  padding: 0.7rem 1.5rem;
  background: #4FB58D;
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: #fff;
}
@media (max-width: 767px) {
  .medical-stage__title {
    padding: 0.8rem 1.2rem;
    font-size: 1.5rem;
    letter-spacing: 0.06em;
  }
}

.medical-stage__text {
  margin-top: 1.35rem;
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 2;
  color: #333;
}
@media (max-width: 767px) {
  .medical-stage__text {
    margin-top: 1rem;
    font-size: 1.4rem;
    line-height: 2.1;
  }
}

/* --------------------------------------------------
   歯周病治療の流れ
   ステップ間は余白なしで色が交互に続く。
   Figma ではここだけコンテナ幅 1200（中央寄せ）だが、左ナビの追従に合わせて
   本文カラム幅に揃えている（理由は page-caries.php のコメント）
   -------------------------------------------------- */
.medical-flow-area {
  width: 100%;
}

.medical-flow-area + .medical-sec {
  margin-top: 8rem;
}
@media (max-width: 767px) {
  .medical-flow-area + .medical-sec {
    margin-top: 4.8rem;
  }
}

.medical-flow {
  margin-top: 1.8rem;
}
@media (max-width: 767px) {
  .medical-flow {
    margin-top: 1.6rem;
  }
}

.medical-flow__step {
  position: relative;
  display: flex;
  align-items: flex-start;
  column-gap: 5rem;
  padding: 3.2rem;
}
@media (max-width: 767px) {
  .medical-flow__step {
    column-gap: 1.2rem;
    padding: 2rem 1.6rem;
  }
}

.medical-flow__step--odd {
  background: #F9F9F9;
}

.medical-flow__step--even {
  background: #EEF6F2;
}

/* 番号（丸＋Alluraの数字）と、次のステップへ伸びる破線 */
.medical-flow__num {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 6rem;
  height: 6rem;
  padding: 0.5rem 0.3rem 0 0;
  border-radius: 50%;
  font-family: "Allura", cursive;
  font-weight: 400;
  font-size: 3rem;
  line-height: 1;
  color: #fff;
}
@media (max-width: 767px) {
  .medical-flow__num {
    width: 4rem;
    height: 4rem;
    font-size: 2.2rem;
  }
}

/* --------------------------------------------------
   番号をつなぐ破線
   ステップの上端〜下端に1本で引く（top:0 / bottom:0）。長さを固定値で持たないので、
   写真の有無でステップの高さが変わっても途切れない。ステップ間に余白は無いので
   ブロックをまたいで1本につながって見える。
   円（.medical-flow__num は position:relative）は破線より後に描かれるので線の上に乗る。
   -------------------------------------------------- */
.medical-flow__step::before {
  content: "";
  position: absolute;
  left: 5.96rem;
  top: 0;
  bottom: 0;
  width: 0;
  border-left: 0.48rem dashed #1F764C;
}
@media (max-width: 767px) {
  .medical-flow__step::before {
    left: 3.45rem;
    border-left-width: 0.3rem;
  }
}

.medical-flow__step:first-child::before {
  top: 3.2rem;
}
@media (max-width: 767px) {
  .medical-flow__step:first-child::before {
    top: 2rem;
  }
}

.medical-flow__step:last-child::before {
  bottom: auto;
  height: 3.2rem;
}
@media (max-width: 767px) {
  .medical-flow__step:last-child::before {
    height: 2rem;
  }
}

.medical-flow__num--odd {
  background: #1F764C;
}

.medical-flow__num--even {
  background: #4FB58D;
}

.medical-flow__body {
  flex: 1;
  min-width: 0;
}

.medical-flow__title {
  display: flex;
  align-items: center;
  min-height: 4.7rem;
  padding: 0.5rem 2rem;
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-size: 1.8rem;
  line-height: 1.5;
  letter-spacing: 0.12em;
  color: #fff;
}
@media (max-width: 767px) {
  .medical-flow__title {
    min-height: 4rem;
    padding: 0.6rem 1.2rem;
    font-size: 1.4rem;
    letter-spacing: 0.06em;
  }
}

.medical-flow__title--odd {
  background: #1F764C;
}

.medical-flow__title--even {
  background: #4FB58D;
}

.medical-flow__row {
  display: flex;
  align-items: flex-start;
  column-gap: 2.1rem;
  margin-top: 1.35rem;
}
@media (max-width: 767px) {
  .medical-flow__row {
    flex-direction: column;
    row-gap: 1.6rem;
    margin-top: 1.2rem;
  }
}

.medical-flow__text {
  flex: 1;
  min-width: 0;
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 2;
  color: #333;
}
@media (max-width: 767px) {
  .medical-flow__text {
    font-size: 1.4rem;
    line-height: 2.1;
  }
}

.medical-flow__photo {
  flex-shrink: 0;
  width: 30rem;
  height: 20.2rem;
  border-radius: 1rem;
  overflow: hidden;
}
@media (max-width: 767px) {
  .medical-flow__photo {
    width: 100%;
    height: auto;
    aspect-ratio: 300/202;
  }
}
.medical-flow__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   スタッフ紹介（Figma node 93:1226／1440×6598・本文は y509〜4736）
   サイドバーの無い下層ページ。共通パーツは `.lower-title` / `.lower-subtitle` /
   `.lower-listbox`（_component.scss）を使う。

   PCの座組（Figma 実測）
     本文コンテナ … x160〜1360（右端は 1280／1290／1360 と揺れているので 120rem に統一し中央寄せ）
     院長ブロック … テキスト 798 ＋ 余白42 ＋ 写真356 = 1196 ≒ コンテナ幅
   ========================================================================== */
.page-staff {
  background: #fff;
  padding-bottom: 10.9rem;
}
@media (max-width: 767px) {
  .page-staff {
    padding-bottom: 6rem;
  }
}

.staff-inner {
  width: 120rem;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .staff-inner {
    width: 100%;
    padding: 0 2rem;
  }
}

/* --------------------------------------------------
   ドクター1人ぶんのかたまり
   -------------------------------------------------- */
.staff-doctor {
  margin-top: 7.4rem;
}
@media (max-width: 767px) {
  .staff-doctor {
    margin-top: 3.2rem;
  }
}

.staff-doctor + .staff-doctor {
  margin-top: 12.3rem;
}
@media (max-width: 767px) {
  .staff-doctor + .staff-doctor {
    margin-top: 5.6rem;
  }
}

.staff-doctor--last {
  margin-top: 8.5rem;
}
@media (max-width: 767px) {
  .staff-doctor--last {
    margin-top: 5.6rem;
  }
}

/* あいさつ文＋院長写真の横並び（Figma テキスト798／写真356・写真は22px下げ） */
.staff-lead {
  display: flex;
  align-items: flex-start;
  column-gap: 4.2rem;
  margin-top: 3.43rem;
}
@media (max-width: 767px) {
  .staff-lead {
    flex-direction: column;
    row-gap: 2.4rem;
    margin-top: 2rem;
  }
}

.staff-lead__body {
  width: 79.8rem;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .staff-lead__body {
    width: 100%;
  }
}

.staff-lead__text {
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 2;
  color: #333;
}
@media (max-width: 767px) {
  .staff-lead__text {
    font-size: 1.4rem;
  }
}

.staff-lead__text + .staff-lead__text {
  margin-top: 0;
}

.staff-lead__image {
  width: 35.6rem;
  height: 42.8rem;
  flex-shrink: 0;
  margin-top: 2.2rem;
  overflow: hidden;
  border-radius: 1.5rem;
}
@media (max-width: 767px) {
  .staff-lead__image {
    width: 100%;
    height: auto;
    aspect-ratio: 356/428;
    margin-top: 0;
  }
}
.staff-lead__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------
   認定証の写真4枚（Figma 93:1625 x126..1313・293×220・隙間5px）
   -------------------------------------------------- */
.staff-certs {
  display: flex;
  column-gap: 0.5rem;
  margin-top: 3.7rem;
}
@media (max-width: 767px) {
  .staff-certs {
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 2.4rem;
  }
}

.staff-certs__item {
  flex: 1;
  min-width: 0;
  height: 22rem;
  overflow: hidden;
}
@media (max-width: 767px) {
  .staff-certs__item {
    flex: 0 0 calc((100% - 0.6rem) / 2);
    height: auto;
    aspect-ratio: 293/220;
  }
}
.staff-certs__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------
   経歴・参加学会等・プロフィール・受講セミナーの箱
   -------------------------------------------------- */
.staff-box {
  margin-top: 3rem;
}
@media (max-width: 767px) {
  .staff-box {
    margin-top: 2rem;
  }
}

.staff-box--narrow {
  width: 72.3rem;
}
@media (max-width: 767px) {
  .staff-box--narrow {
    width: 100%;
  }
}

.lower-title + .staff-box {
  margin-top: 1.8rem;
}
@media (max-width: 767px) {
  .lower-title + .staff-box {
    margin-top: 1.6rem;
  }
}

/* --------------------------------------------------
   外部メディア掲載バナー2枚（Figma 93:1714 / 93:1715）
   キレイレポのインタビューと Medee のランキング。リンク先は未確定。
   -------------------------------------------------- */
.staff-banners {
  display: flex;
  align-items: flex-start;
  column-gap: 4.4rem;
  margin-top: 5.2rem;
  padding-left: 8.3rem;
}
@media (max-width: 767px) {
  .staff-banners {
    flex-direction: column;
    align-items: center;
    row-gap: 2rem;
    margin-top: 3.2rem;
    padding-left: 0;
  }
}

.staff-banners__item {
  display: block;
  transition: opacity 0.3s ease;
}
.staff-banners__item img {
  display: block;
  width: 100%;
  height: auto;
}

a.staff-banners__item:hover {
  opacity: 0.8;
}

.staff-banners__item--kireirepo {
  width: 57.96rem;
  margin-top: 5.8rem;
}
@media (max-width: 767px) {
  .staff-banners__item--kireirepo {
    width: 100%;
    max-width: 40rem;
    margin-top: 0;
  }
}

.staff-banners__item--medee {
  width: 41rem;
}
@media (max-width: 767px) {
  .staff-banners__item--medee {
    width: 100%;
    max-width: 30rem;
  }
}

/* --------------------------------------------------
   口腔がん検診に関して（Figma 93:1716〜93:1730）
   -------------------------------------------------- */
.staff-cancer {
  margin-top: 8rem;
}
@media (max-width: 767px) {
  .staff-cancer {
    margin-top: 4rem;
  }
}

.staff-cancer__row {
  margin-top: 1.8rem;
}
@media (max-width: 767px) {
  .staff-cancer__row {
    margin-top: 1.6rem;
  }
}

.staff-cancer__row + .staff-cancer__row {
  margin-top: 1.26rem;
}
@media (max-width: 767px) {
  .staff-cancer__row + .staff-cancer__row {
    margin-top: 1.6rem;
  }
}

.staff-cancer__note {
  margin-top: 0.6rem;
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 2;
  color: #000;
}
@media (max-width: 767px) {
  .staff-cancer__note {
    font-size: 1.3rem;
    line-height: 1.8;
  }
}

/* ==========================================================================
   料金表（Figma node 93:1852／1440×12509・本文は y516〜10657）
   サイドバーの無い下層ページ。
   ・「保険診療」「自費診療」「医療費控除」の大見出しは診療案内ページと同じ
     `.medical-sec__head` / `__title` / `__en`（_page-medical.scss）を再利用している
     （余白を持たない共通パーツなので下層ページ横断で使える）
   ・カテゴリ見出しは `.lower-title`、施術名は `.lower-subtitle`（_component.scss）
   ・料金表は「料金（税込）」1列のテーブル。SPでも横スクロールさせない（CLAUDE.md 方針）
   ========================================================================== */
.page-price {
  background: #fff;
  padding-bottom: 10rem;
}
@media (max-width: 767px) {
  .page-price {
    padding-bottom: 6rem;
  }
}

.price-inner {
  width: 120rem;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .price-inner {
    width: 100%;
    padding: 0 2rem;
  }
}

/* --------------------------------------------------
   保険診療 / 自費診療 / 医療費控除 の区切り
   -------------------------------------------------- */
.price-sec {
  margin-top: 8.1rem;
}
@media (max-width: 767px) {
  .price-sec {
    margin-top: 3.2rem;
  }
}

.price-sec + .price-sec {
  margin-top: 4rem;
}
@media (max-width: 767px) {
  .price-sec + .price-sec {
    margin-top: 4rem;
  }
}

/* リード文（初診時の治療費について／医療費控除について） */
.price-lead {
  margin-top: 3.92rem;
  font-family: "Zen Old Mincho", serif;
  font-weight: 600;
  font-size: 2.6rem;
  line-height: 1.8462;
  letter-spacing: 0.06em;
  color: #555;
}
@media (max-width: 767px) {
  .price-lead {
    margin-top: 2.4rem;
    font-size: 2rem;
    line-height: 1.6;
  }
}

.price-text {
  padding-bottom: 3rem;
  font-family: "Zen Old Mincho", serif;
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 2.1428;
  letter-spacing: 0.06em;
  color: #555;
}
@media (max-width: 767px) {
  .price-text {
    padding-bottom: 2rem;
    font-size: 1.4rem;
    line-height: 2;
  }
}

/* --------------------------------------------------
   カテゴリ（補綴物 5年保証／義歯／矯正／インプラント／その他）
   -------------------------------------------------- */
.price-cat {
  margin-top: 8rem;
}
@media (max-width: 767px) {
  .price-cat {
    margin-top: 4rem;
  }
}

.price-cat__list {
  margin-top: 1.8rem;
}
@media (max-width: 767px) {
  .price-cat__list {
    margin-top: 1.6rem;
  }
}

/* 施術名（緑の小見出し）＋料金テーブルの1組。
   Figma は 見出し33 ＋ テーブル(上余白16.3＋本体122.4)＝171.7 で並んでいて
   組と組の間に追加の余白は無い（間隔はテーブルの上余白で作られている）。 */
.price-item + .price-item {
  margin-top: 0;
}
@media (max-width: 767px) {
  .price-item + .price-item {
    margin-top: 1.6rem;
  }
}

.price-table {
  width: 100%;
  margin-top: 1.63rem;
  border-collapse: collapse;
  table-layout: fixed;
}
@media (max-width: 767px) {
  .price-table {
    margin-top: 1.2rem;
  }
}

.price-table__head {
  padding: 1.5rem 1rem;
  border: 0.08rem solid #E0E0E0;
  background: #EEF6F2;
  font-family: "Zen Old Mincho", serif;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 2;
  color: #333;
  text-align: center;
}
@media (max-width: 767px) {
  .price-table__head {
    padding: 1rem;
    font-size: 1.4rem;
  }
}

.price-table__cell {
  padding: 1.5rem 1rem;
  border: 0.08rem solid #E0E0E0;
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 2;
  color: #333;
  text-align: center;
}
@media (max-width: 767px) {
  .price-table__cell {
    padding: 1rem;
    font-size: 1.4rem;
  }
}

/* --------------------------------------------------
   医療費控除のバナー2枚（Figma 93:3927 / 93:3928。リンク先未確定）
   -------------------------------------------------- */
.price-banners {
  margin-top: 0;
}

.price-banners__item {
  display: block;
  margin: 0 auto;
  transition: opacity 0.3s ease;
}
.price-banners__item:hover {
  opacity: 0.8;
}
.price-banners__item img {
  display: block;
  width: 100%;
  height: auto;
}

.price-banners__item--deduction {
  width: 113.4rem;
}
@media (max-width: 767px) {
  .price-banners__item--deduction {
    width: 100%;
  }
}

.price-banners__item--epos {
  width: 97.1rem;
  margin-top: 4rem;
}
@media (max-width: 767px) {
  .price-banners__item--epos {
    width: 100%;
    margin-top: 2rem;
  }
}

/* ==========================================================================
   採用情報（Figma node 93:3929／1440×6573・本文は y509〜4717）
   サイドバーの無い下層ページ。
   ・大見出し（採用情報／募集要項）＝ `.medical-sec__head`（診療案内と共通）
   ・導入の写真＋テキスト＝ `.medical-block` 一式（座組みが診療案内と同一）
   ・募集要項＝左に緑のラベル（181px）／右に淡青の本文（938px）の2カラム表
   ・「お問い合わせは下記よりご連絡くださいませ。」＝ `.lower-title`
   ========================================================================== */
.page-recruit {
  background: #fff;
  padding-bottom: 10.4rem;
}
@media (max-width: 767px) {
  .page-recruit {
    padding-bottom: 6rem;
  }
}

.recruit-inner {
  width: 111.9rem;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .recruit-inner {
    width: 100%;
    padding: 0 2rem;
  }
}

.recruit-sec {
  margin-top: 7.4rem;
}
@media (max-width: 767px) {
  .recruit-sec {
    margin-top: 3.2rem;
  }
}

.recruit-sec + .recruit-sec {
  margin-top: 7rem;
}
@media (max-width: 767px) {
  .recruit-sec + .recruit-sec {
    margin-top: 4rem;
  }
}

/* --------------------------------------------------
   募集要項の表（ラベル＋本文の2カラム。SPは縦積み＝横スクロールさせない）
   -------------------------------------------------- */
.recruit-table {
  margin-top: 2.52rem;
}
@media (max-width: 767px) {
  .recruit-table {
    margin-top: 2rem;
  }
}

.recruit-table__row {
  display: flex;
  align-items: stretch;
}
@media (max-width: 767px) {
  .recruit-table__row {
    flex-direction: column;
  }
}

.recruit-table__row + .recruit-table__row {
  margin-top: 2rem;
}
@media (max-width: 767px) {
  .recruit-table__row + .recruit-table__row {
    margin-top: 1.6rem;
  }
}

.recruit-table__label {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18.1rem;
  padding: 1rem;
  background: #4FB58D;
  font-family: "Zen Old Mincho", serif;
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.875;
  letter-spacing: 0.056em;
  color: #fff;
  text-align: center;
}
@media (max-width: 767px) {
  .recruit-table__label {
    width: 100%;
    padding: 0.8rem 1.2rem;
    font-size: 1.5rem;
    justify-content: flex-start;
    text-align: left;
  }
}

.recruit-table__body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 0;
  padding: 2rem 1rem;
  background: #EEFAFB;
}
@media (max-width: 767px) {
  .recruit-table__body {
    padding: 1.6rem;
    justify-content: flex-start;
  }
}

/* Figma のテキストは行送り14〜17px（文字サイズ15pxより狭い）で、そのまま再現すると
   折り返した行が重なってしまう。本文の可読性を優先して 21px（1.4）に開いている。 */
.recruit-table__text {
  width: 79.8rem;
  font-family: "Zen Old Mincho", serif;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.4;
  letter-spacing: 0.056em;
  color: #555;
}
@media (max-width: 767px) {
  .recruit-table__text {
    width: 100%;
    font-size: 1.4rem;
    line-height: 1.7;
  }
}

/* --------------------------------------------------
   お問い合わせ（電話番号）
   -------------------------------------------------- */
.recruit-contact {
  margin-top: 8rem;
}
@media (max-width: 767px) {
  .recruit-contact {
    margin-top: 4rem;
  }
}

.recruit-contact__tel {
  display: block;
  margin-top: 3.34rem;
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-size: 3.6rem;
  line-height: 1.45;
  color: #4FB58D;
  text-align: center;
}
@media (max-width: 767px) {
  .recruit-contact__tel {
    margin-top: 2.4rem;
    font-size: 2.4rem;
  }
}

/* ==========================================================================
   初めての方へ（Figma node 94:4322／1440×8752・本文は y516〜7000）
   サイドバーの無い下層ページ。共有パーツの再利用が多い。
   ・大見出し「初診について」＝ `.medical-sec__head`
   ・「初診の流れ」「診療の流れ」「キャンセルポリシー」「よくある質問」＝ `.lower-title`
   ・淡緑の箱（持ち物／予約方法）＝ `.lower-listbox` ＋ `.lower-subtitle`
   ・流れ（番号丸＋破線＋帯タイトル＋写真）＝ 診療案内と同じ `.medical-flow` 一式
   ・Q&A ＝ 診療案内と同じ `.medical-faq` 一式（アコーディオン／js/faq-accordion.js）
   ========================================================================== */
.page-first {
  background: #fff;
  padding-bottom: 0;
}
@media (max-width: 767px) {
  .page-first {
    padding-bottom: 4rem;
  }
}

.first-inner {
  width: 111.9rem;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .first-inner {
    width: 100%;
    padding: 0 2rem;
  }
}

.first-sec {
  margin-top: 8.1rem;
}
@media (max-width: 767px) {
  .first-sec {
    margin-top: 3.2rem;
  }
}

/* --------------------------------------------------
   初診について：持ち物（左526）＋ 予約方法（右578）の2カラム
   -------------------------------------------------- */
.first-visit {
  display: flex;
  align-items: stretch;
  column-gap: 1.5rem;
  margin-top: 2.82rem;
}
@media (max-width: 767px) {
  .first-visit {
    flex-direction: column;
    row-gap: 2rem;
    margin-top: 2rem;
  }
}

.first-visit__col {
  width: 52.6rem;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .first-visit__col {
    width: 100%;
  }
}

.first-visit__col--reserve {
  width: 57.8rem;
  flex-shrink: 1;
}
@media (max-width: 767px) {
  .first-visit__col--reserve {
    width: 100%;
  }
}

/* 予約方法の本文（点線区切りが1本だけの箱） */
.first-visit__text {
  padding: 0.5rem 0.5rem 0.58rem;
  border-bottom: 0.08rem dashed #E0E0E0;
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 2;
  color: #333;
}
@media (max-width: 767px) {
  .first-visit__text {
    font-size: 1.4rem;
  }
}

.first-visit__contact {
  display: flex;
  align-items: center;
  column-gap: 5.4rem;
  margin-top: 2rem;
}
@media (max-width: 767px) {
  .first-visit__contact {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 1.6rem;
    margin-top: 1.6rem;
  }
}

.first-visit__tel {
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-size: 3.6rem;
  line-height: 1.45;
  color: #4FB58D;
}
@media (max-width: 767px) {
  .first-visit__tel {
    font-size: 2.4rem;
  }
}

/* --------------------------------------------------
   初診の流れ／診療の流れ
   -------------------------------------------------- */
.first-flow-sec {
  margin-top: 4.8rem;
}
@media (max-width: 767px) {
  .first-flow-sec {
    margin-top: 4rem;
  }
}

.first-flow-sec + .first-flow-sec {
  margin-top: 8rem;
}
@media (max-width: 767px) {
  .first-flow-sec + .first-flow-sec {
    margin-top: 4rem;
  }
}

/* --------------------------------------------------
   キャンセルポリシー
   -------------------------------------------------- */
.first-policy {
  margin-top: 8rem;
}
@media (max-width: 767px) {
  .first-policy {
    margin-top: 4rem;
  }
}

.first-policy__lead {
  margin-top: 3.43rem;
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  font-size: 2rem;
  line-height: 1.5;
  color: #333;
}
@media (max-width: 767px) {
  .first-policy__lead {
    margin-top: 2rem;
    font-size: 1.8rem;
  }
}

.first-policy__text {
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 2;
  color: #333;
}
@media (max-width: 767px) {
  .first-policy__text {
    font-size: 1.4rem;
    line-height: 2.1;
  }
}

.first-policy__head {
  margin-top: 3rem;
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  font-size: 2rem;
  line-height: 1.5;
  color: #333;
}
@media (max-width: 767px) {
  .first-policy__head {
    margin-top: 2.4rem;
    font-size: 1.8rem;
  }
}

.first-policy__head--lg {
  font-size: 2.4rem;
}
@media (max-width: 767px) {
  .first-policy__head--lg {
    font-size: 2rem;
  }
}

/* --------------------------------------------------
   よくある質問
   -------------------------------------------------- */
.first-faq {
  margin-top: 4rem;
}
@media (max-width: 767px) {
  .first-faq {
    margin-top: 4rem;
  }
}

.first-faq__list {
  margin-top: 1.8rem;
}
@media (max-width: 767px) {
  .first-faq__list {
    margin-top: 1.6rem;
  }
}

/* ==========================================================================
   医院案内（Figma node 95:4718／1440×8427・本文は y509〜6570）
   サイドバーの無い下層ページ。
   ・大見出し（当院について／医院基本情報／アクセスマップ／院内紹介）＝ `.medical-sec__head`
     または `.lower-title`
   ・導入の写真＋テキスト＝ `.medical-block` 一式（診療案内と同じ座組み）
   ・当院の特徴＝淡緑の帯（上辺が波）＋ Features01〜05 の5ブロック
   ・アクセスマップ＝ base_google_map()（functions.php）の iframe
   ========================================================================== */
.page-clinic {
  background: #fff;
  padding-bottom: 10.5rem;
}
@media (max-width: 767px) {
  .page-clinic {
    padding-bottom: 6rem;
  }
}

.clinic-inner {
  width: 111.9rem;
  margin: 0 auto;
}
@media (max-width: 767px) {
  .clinic-inner {
    width: 100%;
    padding: 0 2rem;
  }
}

.clinic-sec {
  margin-top: 7.4rem;
}
@media (max-width: 767px) {
  .clinic-sec {
    margin-top: 3.2rem;
  }
}

/* --------------------------------------------------
   当院の特徴（淡緑の帯・上辺が波形）
   Figma: 帯 97:6448（#E8F3E5・上辺のカーブ）／見出し Features 97:6452
   帯の高さはコンテンツ成り行き。上辺の波だけ白いフタ（SVG）を重ねて表現している。
   -------------------------------------------------- */
.clinic-features {
  position: relative;
  isolation: isolate;
  margin-top: 6.7rem;
  padding-bottom: 11rem;
}
@media (max-width: 767px) {
  .clinic-features {
    margin-top: 4rem;
    padding-bottom: 4rem;
  }
}
.clinic-features::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 5.74rem;
  bottom: 0;
  z-index: -1;
  background: #E8F3E5;
}
@media (max-width: 767px) {
  .clinic-features::before {
    top: 3rem;
  }
}
.clinic-features::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 5.74rem;
  height: 12rem;
  z-index: -1;
  background: url("../img/clinic/features-wave.svg") no-repeat center top;
  background-size: 100% 100%;
}
@media (max-width: 767px) {
  .clinic-features::after {
    top: 3rem;
    height: 5rem;
  }
}

.clinic-features__en {
  font-family: "Square Peg", cursive;
  font-weight: 400;
  font-size: 9.6rem;
  line-height: 1.48;
  color: #4FB58D;
  text-align: center;
}
@media (max-width: 767px) {
  .clinic-features__en {
    font-size: 5.6rem;
  }
}

.clinic-features__ja {
  margin-top: -0.2rem;
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  font-size: 2rem;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: #555;
  text-align: center;
}
@media (max-width: 767px) {
  .clinic-features__ja {
    font-size: 1.6rem;
  }
}

.clinic-features__list {
  width: 115.1rem;
  margin: 6.7rem auto 0;
}
@media (max-width: 767px) {
  .clinic-features__list {
    width: 100%;
    margin-top: 3.2rem;
    padding: 0 2rem;
  }
}

.clinic-feature {
  display: flex;
  align-items: flex-start;
  column-gap: 1.8rem;
}
@media (max-width: 767px) {
  .clinic-feature {
    flex-direction: column;
    row-gap: 1.6rem;
  }
}

.clinic-feature + .clinic-feature {
  margin-top: 5.1rem;
}
@media (max-width: 767px) {
  .clinic-feature + .clinic-feature {
    margin-top: 3.2rem;
  }
}

.clinic-feature__body {
  flex: 1;
  min-width: 0;
}
@media (max-width: 767px) {
  .clinic-feature__body {
    width: 100%;
  }
}

.clinic-feature__num {
  font-family: "Square Peg", cursive;
  font-weight: 400;
  font-size: 3.6rem;
  line-height: 1.48;
  color: #4FB58D;
}
@media (max-width: 767px) {
  .clinic-feature__num {
    font-size: 2.4rem;
  }
}

.clinic-feature__title {
  margin-top: 0.1rem;
  font-family: "Zen Old Mincho", serif;
  font-weight: 600;
  font-size: 3.2rem;
  line-height: 1.48;
  letter-spacing: 0.05em;
  color: #4FB58D;
}
@media (max-width: 767px) {
  .clinic-feature__title {
    font-size: 2rem;
    letter-spacing: 0.03em;
  }
}

.clinic-feature__text {
  max-width: 75.3rem;
  margin-top: 1.1rem;
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-size: 2rem;
  line-height: 2;
  color: #555;
}
@media (max-width: 767px) {
  .clinic-feature__text {
    max-width: 100%;
    margin-top: 1rem;
    font-size: 1.5rem;
    line-height: 1.9;
  }
}

.clinic-feature__image {
  flex-shrink: 0;
  width: 37.8rem;
  height: 28rem;
  border-radius: 1.5rem;
  overflow: hidden;
}
@media (max-width: 767px) {
  .clinic-feature__image {
    width: 100%;
    height: auto;
    aspect-ratio: 378/280;
  }
}
.clinic-feature__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------
   医院基本情報（定義リスト）
   Figma: 見出し240 ／ 内容960・行は点線区切り
   -------------------------------------------------- */
.clinic-info-sec {
  margin-top: 10.5rem;
}
@media (max-width: 767px) {
  .clinic-info-sec {
    margin-top: 4rem;
  }
}

.clinic-dl {
  margin-top: 1.8rem;
}
@media (max-width: 767px) {
  .clinic-dl {
    margin-top: 1.6rem;
  }
}

.clinic-dl__row {
  display: flex;
  align-items: stretch;
}
@media (max-width: 767px) {
  .clinic-dl__row {
    flex-direction: column;
  }
}

.clinic-dl__term {
  flex-shrink: 0;
  width: 24rem;
  padding: 1.68rem 1.5rem;
  border-bottom: 0.08rem dashed #E0E0E0;
  font-family: "Zen Old Mincho", serif;
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 2;
  color: #333;
}
@media (max-width: 767px) {
  .clinic-dl__term {
    width: 100%;
    padding: 1rem 0 0.4rem;
    border-bottom: 0;
  }
}

.clinic-dl__desc {
  flex: 1;
  min-width: 0;
  padding: 1.68rem 1.5rem;
  border-bottom: 0.08rem dashed #E0E0E0;
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 2;
  color: #333;
}
@media (max-width: 767px) {
  .clinic-dl__desc {
    padding: 0 0 1rem;
    font-size: 1.4rem;
  }
}

.clinic-dl__tel {
  color: #1F764C;
}

/* --------------------------------------------------
   アクセスマップ
   -------------------------------------------------- */
.clinic-access {
  margin-top: 8rem;
  scroll-margin-top: 14rem;
}
@media (max-width: 767px) {
  .clinic-access {
    margin-top: 4rem;
    scroll-margin-top: 6.5rem;
  }
}

.clinic-access__map {
  position: relative;
  width: 100%;
  height: 37.2rem;
  margin-top: 3.4rem;
  overflow: hidden;
}
@media (max-width: 767px) {
  .clinic-access__map {
    height: 24rem;
    margin-top: 2rem;
  }
}
.clinic-access__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.clinic-access__btn {
  position: absolute;
  left: 2.2rem;
  top: 3.1rem;
  z-index: 1;
  width: 22.7rem;
  height: 4.5rem;
  margin: 0;
  font-size: 2.4rem;
}
@media (max-width: 767px) {
  .clinic-access__btn {
    left: 1.2rem;
    top: 1.2rem;
    width: 18.5rem;
    height: 4rem;
    margin: 0;
    font-size: 1.6rem;
  }
}

/* --------------------------------------------------
   提携パーキングについて
   -------------------------------------------------- */
.clinic-parking {
  margin-top: 6.3rem;
}
@media (max-width: 767px) {
  .clinic-parking {
    margin-top: 4rem;
  }
}

.clinic-parking__body {
  display: flex;
  align-items: flex-start;
  column-gap: 2.6rem;
  margin-top: 2.24rem;
}
@media (max-width: 767px) {
  .clinic-parking__body {
    flex-direction: column;
    row-gap: 2rem;
    margin-top: 1.6rem;
  }
}

.clinic-parking__text {
  width: 60.2rem;
  flex-shrink: 0;
  font-family: "Zen Old Mincho", serif;
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 2.1428;
  letter-spacing: 0.06em;
  color: #555;
}
@media (max-width: 767px) {
  .clinic-parking__text {
    width: 100%;
  }
}

.clinic-parking__map {
  width: 57.35rem;
  flex-shrink: 0;
  overflow: hidden;
}
@media (max-width: 767px) {
  .clinic-parking__map {
    width: 100%;
  }
}
.clinic-parking__map img {
  display: block;
  width: 100%;
  height: auto;
}

/* --------------------------------------------------
   院内紹介（写真をずらして並べる）
   Figma 座組み（コンテナ917基準の相対座標）
     待合室   x0   y0    917×430
     ミリング x0   y549  315×400
     診療室   x425 y612  492×400
     レント   x0   y1131 492×400
     滅菌     x602 y1211 315×400
   -------------------------------------------------- */
.clinic-rooms-sec {
  margin-top: 4.5rem;
}
@media (max-width: 767px) {
  .clinic-rooms-sec {
    margin-top: 4rem;
  }
}

.clinic-rooms {
  width: 91.7rem;
  margin: 7rem auto 0;
}
@media (max-width: 767px) {
  .clinic-rooms {
    width: 100%;
    margin-top: 2.4rem;
  }
}

.clinic-rooms__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
@media (max-width: 767px) {
  .clinic-rooms__row {
    flex-direction: column;
    row-gap: 2.4rem;
  }
}

.clinic-rooms__row + .clinic-rooms__row {
  margin-top: 6rem;
}
@media (max-width: 767px) {
  .clinic-rooms__row + .clinic-rooms__row {
    margin-top: 2.4rem;
  }
}

.clinic-rooms__item {
  flex-shrink: 0;
}

.clinic-rooms__item--full {
  width: 100%;
}

.clinic-rooms__item--wide {
  width: 49.2rem;
}
@media (max-width: 767px) {
  .clinic-rooms__item--wide {
    width: 100%;
  }
}

.clinic-rooms__item--narrow {
  width: 31.5rem;
}
@media (max-width: 767px) {
  .clinic-rooms__item--narrow {
    width: 100%;
  }
}

.clinic-rooms__item--down63 {
  margin-top: 6.3rem;
}
@media (max-width: 767px) {
  .clinic-rooms__item--down63 {
    margin-top: 0;
  }
}

.clinic-rooms__item--down80 {
  margin-top: 8rem;
}
@media (max-width: 767px) {
  .clinic-rooms__item--down80 {
    margin-top: 0;
  }
}

.clinic-rooms__image {
  width: 100%;
  border-radius: 1.5rem;
  overflow: hidden;
}
.clinic-rooms__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.clinic-rooms__image--full {
  height: 43rem;
}
@media (max-width: 767px) {
  .clinic-rooms__image--full {
    height: auto;
    aspect-ratio: 917/430;
  }
}

.clinic-rooms__image--tall {
  height: 40rem;
}
@media (max-width: 767px) {
  .clinic-rooms__image--tall {
    height: auto;
    aspect-ratio: 4/3;
  }
}

.clinic-rooms__label {
  margin-top: 2rem;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.4286;
  letter-spacing: 0.06em;
  color: #555;
}
@media (max-width: 767px) {
  .clinic-rooms__label {
    margin-top: 1.2rem;
  }
}

.clinic-rooms__label-en {
  margin-top: 0.5rem;
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.4;
  letter-spacing: 0.06em;
  color: #AAA8A6;
}

.index-mv {
  position: relative;
}

.index-mv__slider {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 70.2rem;
}
@media (max-width: 767px) {
  .index-mv__slider {
    height: 72rem;
  }
}

.index-mv__slide {
  width: 100%;
  height: 100%;
}

.index-mv__picture {
  display: block;
  width: 100%;
  height: 100%;
}

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

.index-mv__catch {
  position: absolute;
  top: 13.8rem;
  left: 50%;
  z-index: 2;
  font-family: "Zen Old Mincho", serif;
  font-weight: 600;
  font-size: 4.8rem;
  line-height: 2;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 0 0.6rem rgba(0, 0, 0, 0.67);
  opacity: 0;
  transform: translate(-50%, 2.4rem);
  animation: indexMvCatchIn 1.2s cubic-bezier(0.22, 0.61, 0.36, 1) 0.3s forwards;
}
@media (max-width: 767px) {
  .index-mv__catch {
    top: 22.3rem;
    font-size: 3.2rem;
  }
}

.index-mv__badges {
  position: absolute;
  top: 39.1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 2.137rem;
}
@media (max-width: 767px) {
  .index-mv__badges {
    top: 35.2rem;
    display: grid;
    grid-template-columns: repeat(2, max-content);
    column-gap: 1.725rem;
    row-gap: 1.026rem;
    justify-content: center;
  }
}

.index-mv__badge {
  font-size: 1rem;
  position: relative;
  width: 16.9469em;
  height: 16.9469em;
  padding-top: 1.221em;
  border: 0.229em solid #fff;
  border-radius: 50%;
  background: rgba(79, 181, 141, 0.78);
  box-shadow: 0 0 0.6107em 0.229em rgba(79, 181, 141, 0.68);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  animation: indexMvBadgeIn 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@media (max-width: 767px) {
  .index-mv__badge {
    font-size: 0.8069rem;
  }
}

.index-mv__badge-leaf {
  position: absolute;
  top: 11.649em;
  left: 11.705em;
  z-index: 0;
  width: 3.7507em;
  height: 10.5823em;
  opacity: 0.49;
  transform: translate(-50%, -50%) rotate(32.71deg);
  pointer-events: none;
}

.index-mv__badge-icon {
  position: relative;
  z-index: 1;
  width: 4.3512em;
  height: 4.3512em;
  margin-bottom: 0.6875em;
  border-radius: 50%;
  background: rgba(11, 104, 68, 0.5);
  box-shadow: 0 0 0.6107em 0.229em rgba(79, 181, 141, 0.68);
  display: flex;
  align-items: center;
  justify-content: center;
}

.index-mv__badge-icon-doctor {
  width: 2.2897em;
  height: 2.4433em;
}

.index-mv__badge-icon-train {
  width: 1.47904em;
  height: 1.86138em;
}

.index-mv__badge-icon-calendar {
  width: 1.52675em;
  height: 1.52675em;
}

.index-mv__badge-icon-chat {
  width: 1.80333em;
  height: 1.70042em;
}

.index-mv__badge-text {
  position: relative;
  z-index: 1;
  font-family: "Zen Old Mincho", serif;
  font-weight: 600;
  font-size: 1.8321em;
  line-height: 1.23;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  text-shadow: 0 0 0.3333em #12885A;
}

.index-mv__badge-strong {
  font-size: 1.3333em;
}

.index-mv__badge-num {
  font-size: 1.5em;
}

.index-mv__badge:nth-child(1) {
  animation-delay: 1s;
}
.index-mv__badge:nth-child(1) .index-mv__badge-icon {
  margin-bottom: 0.6875em;
}

.index-mv__badge:nth-child(2) {
  animation-delay: 1.15s;
}
.index-mv__badge:nth-child(2) .index-mv__badge-icon {
  margin-bottom: 1.2218em;
}

.index-mv__badge:nth-child(3) {
  animation-delay: 1.3s;
}
.index-mv__badge:nth-child(3) .index-mv__badge-icon {
  margin-bottom: 0.9928em;
}
.index-mv__badge:nth-child(3) .index-mv__badge-text {
  line-height: 1.46;
}

.index-mv__badge:nth-child(4) {
  animation-delay: 1.45s;
}
.index-mv__badge:nth-child(4) .index-mv__badge-icon {
  margin-bottom: 1.9089em;
}
.index-mv__badge:nth-child(4) .index-mv__badge-text {
  line-height: 1.46;
}

.index-mv__chat {
  position: fixed;
  top: auto;
  right: 0;
  bottom: 9rem;
  z-index: 9970;
  width: 5.8rem;
  height: 22rem;
  background: rgba(11, 104, 68, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}
@media (max-width: 767px) {
  .index-mv__chat {
    bottom: 12rem;
    width: 4rem;
    height: 16.1rem;
  }
}
@media (max-width: 767px) {
  .index-mv__chat.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}
.index-mv__chat:hover {
  background: rgba(11, 104, 68, 0.88);
}

.index-mv__chat-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  font-size: 2rem;
  line-height: 1;
  color: #fff;
}
@media (max-width: 767px) {
  .index-mv__chat-text {
    font-size: 1.5rem;
  }
}

@keyframes indexMvCatchIn {
  from {
    opacity: 0;
    transform: translate(-50%, 2.4rem);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
@keyframes indexMvBadgeIn {
  from {
    opacity: 0;
    transform: translateY(1.6rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ※ prefers-reduced-motion による停止は入れない。
   本案件は指示書で「動きのあるアニメーションを入れる（文字が動いたり、背景が動いたり、
   ループするような感じ）」がデザイン要件として明示されているため、OS の「視差効果を減らす」
   設定に関わらず動かす。OS設定を尊重する形に戻したい場合はここに
   @media (prefers-reduced-motion: reduce) { … animation: none; } を復活させる。 */
/* ==========================================================================
   02 News（クリニックからのお知らせ）
   PC y834-1100 ／ SP y720-1080
   背景（淡青 $c_blue_pale ＋ ぼかし写真）は親の .index-bokeh ラッパーが敷く。
   ここでは背景色・背景画像を一切指定しない
   ========================================================================== */
.index-news {
  position: relative;
  padding: 8.4rem 0 4.2rem;
}
@media (max-width: 767px) {
  .index-news {
    padding: 4.6rem 0 1.2rem;
  }
}

/* ---------- 背景のぼかし円（フワフワと動く／背景なのでフェードアップ対象外） ---------- */
.index-news__bokeh {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.index-news__bokeh-item {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0));
  will-change: transform;
  animation: news-float 15s ease-in-out infinite;
}

/* Ellipse 37（PC 49:38 x92 y787 371×386 ／ SP 98:7852 x0 y749 275×286） */
.index-news__bokeh-item--01 {
  top: -4.7rem;
  left: 9.2rem;
  width: 37.1rem;
  height: 38.6rem;
}
@media (max-width: 767px) {
  .index-news__bokeh-item--01 {
    top: 2.9rem;
    left: -0.1rem;
    width: 27.5rem;
    height: 28.6rem;
  }
}

/* Ellipse 31（SP 98:7854 x332 y720 205×234）
   PC版 49:30 は中心が y1201 ＝ Information(03) の担当レンジなのでPCでは出さない */
.index-news__bokeh-item--02 {
  display: none;
}
@media (max-width: 767px) {
  .index-news__bokeh-item--02 {
    display: block;
    top: 0;
    left: 33.2rem;
    width: 20.5rem;
    height: 23.4rem;
    animation-duration: 19s;
    animation-delay: -7s;
  }
}

@keyframes news-float {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(1rem, -2rem, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
/* ---------- レイアウト（PC: 左に見出し・右に2行リスト ／ SP: 縦積み） ---------- */
.index-news__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 112.3rem;
  margin-inline: auto;
}
@media (max-width: 767px) {
  .index-news__inner {
    display: block;
    max-width: none;
    padding: 0 1rem;
  }
}

/* ---------- 見出し（4:30 ／ 明朝2行・PCとSPで同サイズ 181×81） ---------- */
.index-news__heading {
  flex-shrink: 0;
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  color: #555;
  text-align: center;
}

.index-news__heading-sub {
  display: block;
  font-size: 2rem;
  line-height: 1.6;
  letter-spacing: 0.12em;
}

.index-news__heading-main {
  display: block;
  font-size: 3.2rem;
  line-height: 1.53;
  letter-spacing: 0.1em;
}

/* ---------- お知らせリスト ---------- */
.index-news__list {
  flex-shrink: 0;
  width: 80.8rem;
  max-height: 14rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
@media (max-width: 767px) {
  .index-news__list {
    width: auto;
    margin-top: 1.7rem;
    max-height: 21rem;
  }
}
.index-news__list::-webkit-scrollbar {
  width: 0.4rem;
}
.index-news__list::-webkit-scrollbar-track {
  background: transparent;
}
.index-news__list::-webkit-scrollbar-thumb {
  border-radius: 0.2rem;
  background: #9FD7C1;
}

.index-news__row {
  display: flex;
  align-items: center;
  padding: 1.5rem 0;
  border-bottom: 1px solid #D9D9D9;
}
@media (max-width: 767px) {
  .index-news__row {
    display: block;
    padding: 0 0 1.6rem;
  }
}

/* 2行目以降はSPのみ上に間隔（区切り線→次の日付が12px） */
@media (max-width: 767px) {
  .index-news__row + .index-news__row {
    padding-top: 1.2rem;
  }
}

.index-news__date {
  flex-shrink: 0;
  width: 8.6rem;
  font-family: "Zen Old Mincho", serif;
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 0;
  color: #797979;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .index-news__date {
    width: auto;
  }
}

.index-news__labels {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  gap: 0.8rem;
  margin-left: 2.3rem;
}
@media (max-width: 767px) {
  .index-news__labels {
    margin: 0.4rem 0 0;
  }
}

/* 緑のピルバッジ（Frame 1 = 121×40。文字は16px×4字＝64px＋左右28.5px） */
.index-news__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 2.85rem;
  border-radius: 0.5rem;
  background: #4FB58D;
  font-family: "Zen Old Mincho", serif;
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 0;
  color: #fff;
}
@media (max-width: 767px) {
  .index-news__label {
    padding: 0 1.2rem;
  }
}

.index-news__row-title {
  flex: 1;
  min-width: 0;
  margin-left: 3rem;
  font-family: "Zen Old Mincho", serif;
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 0;
  color: #555;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .index-news__row-title {
    margin: 0.4rem 0 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
}

.index-news__link {
  color: inherit;
  text-decoration: none;
  transition: opacity 0.3s ease;
}

.index-news__link:hover {
  opacity: 0.6;
}

/* ==========================================================================
   03 Information（クリニックのご案内）
   Figma: PC y1100-1830 / SP y1080-1830（4:31 / 5:48 / 5:53 / 49:86 / 7:105 / 7:106）

   ★このファイルには「医院情報の共有パーツ」= .clinic-info__* を定義している。
     TOPのInformationセクションとフッター（layout/_footer.scss）の両方で使うため、
     定義はここ1か所だけ。フッター固有の差分は _footer.scss 側で
     `.l-footer { .clinic-info__xxx { … } }` の親スコープ限定上書きにしてある
     （CLAUDE.md「共有クラスの親スコープ限定上書きは入れ子で書く」の例外ルール）。
   ========================================================================== */
/* ── セクション ──────────────────────────── */
.index-information {
  position: relative;
  padding: 14.3rem 0 0.8rem;
}
@media (max-width: 767px) {
  .index-information {
    padding: 2.1rem 0 2.8rem;
  }
}

.index-information__inner {
  position: relative;
  z-index: 1;
  max-width: 114.9rem;
  margin: 0 auto;
  padding: 0 2rem;
}
@media (max-width: 767px) {
  .index-information__inner {
    max-width: 100%;
    padding: 0 1rem;
  }
}

/* ── 見出し（このセクションのみ 英字＋斜線＋和文の横並び・左寄せ） ── */
.index-information__head {
  display: flex;
  align-items: center;
  column-gap: 2.7rem;
}
@media (max-width: 767px) {
  .index-information__head {
    column-gap: 0;
    padding-left: 2.2rem;
  }
}

.index-information__title {
  font-family: "Square Peg", cursive;
  font-size: 9.6rem;
  font-weight: 400;
  line-height: 1.48;
  color: #4FB58D;
}
@media (max-width: 767px) {
  .index-information__title {
    font-size: 3.6rem;
  }
}

.index-information__slash {
  position: relative;
  flex-shrink: 0;
  width: 1.2rem;
  height: 1.7rem;
  margin-left: 1.4rem;
}
@media (max-width: 767px) {
  .index-information__slash {
    margin-left: 2.1rem;
  }
}
.index-information__slash::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2.08rem;
  height: 0.1rem;
  background: #333;
  transform-origin: left bottom;
  transform: rotate(-54.8deg);
}

.index-information__title-ja {
  font-family: "Zen Old Mincho", serif;
  font-size: 1.6rem;
  line-height: 1.48;
  letter-spacing: 0.15em;
  color: #555;
}

/* ── 本文（左：医院情報 / 右：地図） ─────────── */
.index-information__body {
  display: flex;
  align-items: flex-start;
  column-gap: 8.5rem;
}
@media (max-width: 767px) {
  .index-information__body {
    flex-direction: column;
    column-gap: 0;
    margin-top: 1.6rem;
  }
}

.index-information__col {
  flex-shrink: 0;
  width: 57.9rem;
}
@media (max-width: 767px) {
  .index-information__col {
    width: 100%;
  }
}

.index-information__map-col {
  flex-shrink: 0;
  width: 44.44rem;
}
@media (max-width: 767px) {
  .index-information__map-col {
    width: 100%;
    margin-top: 2.1rem;
  }
}

/* ==========================================================================
   共有パーツ：医院情報（Information ＋ フッターで共用）
   ========================================================================== */
/* ── 住所バー／駅バー（角丸ピル・白地・緑枠） ── */
.clinic-info__bar {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 1rem;
  min-height: 3.8rem;
  padding: 0 1rem;
  background: #fff;
  border: 0.1rem solid #4FB58D;
  border-radius: 2.8rem;
}

.clinic-info__bar-icon {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  color: #4FB58D;
}

.clinic-info__bar-svg {
  display: block;
  width: 1.8rem;
  height: auto;
}

.clinic-info__bar-svg--train {
  width: 1.48rem;
}

.clinic-info__bar-text {
  font-size: 1.5rem;
  line-height: 1.48;
  color: #555;
}

/* ── リード＋TEL ────────────────────────── */
.clinic-info__lead {
  margin-top: 1.5rem;
  font-size: 2rem;
  line-height: 1.48;
  color: #4FB58D;
  text-align: center;
}
@media (max-width: 767px) {
  .clinic-info__lead {
    margin-top: 1.3rem;
    font-size: 1.6rem;
  }
}

.clinic-info__tel {
  display: block;
  font-size: 4.8rem;
  line-height: 1.48;
  color: #4FB58D;
  text-align: center;
  text-decoration: none;
}
@media (max-width: 767px) {
  .clinic-info__tel {
    font-size: 3.2rem;
  }
}

/* ── 診療時間表（Figma Group 17 = 49:86 / SP 98:7876） ── */
.clinic-info__hours {
  width: 100%;
  max-width: 54.9rem;
  margin: 1.7rem auto 0;
  padding: 2.6rem 2.4rem 1.9rem;
  background: #fff;
  border-radius: 0.3rem;
}
@media (max-width: 767px) {
  .clinic-info__hours {
    max-width: 35.5rem;
    padding: 1.7rem 1.55rem 1.2rem;
    border-radius: 0.2rem;
  }
}

.clinic-info__hours-cells {
  display: flex;
  column-gap: 1.5rem;
}
@media (max-width: 767px) {
  .clinic-info__hours-cells {
    column-gap: 0.97rem;
  }
}

.clinic-info__hours-cell {
  flex: 1 1 0;
  min-height: 15.2rem;
  padding-top: 2.4rem;
  background: #EEFAFB;
  border-radius: 0.3rem;
  text-align: center;
}
@media (max-width: 767px) {
  .clinic-info__hours-cell {
    min-height: 9.83rem;
    padding-top: 1.55rem;
    border-radius: 0.2rem;
  }
}

.clinic-info__hours-day {
  margin-bottom: 1rem;
  font-size: 2.4rem;
  line-height: 1.48;
  letter-spacing: 0.06em;
  color: #555;
}
@media (max-width: 767px) {
  .clinic-info__hours-day {
    margin-bottom: 0.65rem;
    font-size: 1.55rem;
  }
}

.clinic-info__hours-time {
  font-size: 1.6rem;
  line-height: 2.125;
  color: #555;
}
@media (max-width: 767px) {
  .clinic-info__hours-time {
    font-size: 1.05rem;
  }
}

.clinic-info__hours-note {
  margin-top: 1rem;
  font-size: 1.5rem;
  line-height: 1.48;
  color: #555;
  text-align: center;
}
@media (max-width: 767px) {
  .clinic-info__hours-note {
    margin-top: 0.65rem;
    font-size: 1rem;
  }
}

/* ── WEB予約ボタン（Figma Group 13 = 9:356・フッターで使用） ── */
.clinic-info__web-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 0.8rem;
  width: 21.3rem;
  height: 5.4rem;
  background: #4FB58D;
  border: 0.2rem solid rgba(159, 215, 193, 0.88);
  border-radius: 0.2rem;
  text-decoration: none;
}

.clinic-info__web-btn-icon {
  display: block;
  flex-shrink: 0;
  width: 1.7rem;
}

.clinic-info__web-btn-label {
  font-family: "Zen Old Mincho", serif;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.06em;
  color: #fff;
}

.clinic-info__web-btn-arrow {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  display: block;
  width: 0.74rem;
  transform: rotate(135deg);
}

/* ── 地図（実iframe）＋ Google Map ボタン ── */
.clinic-info__map {
  width: 100%;
  max-width: 44.44rem;
  margin: 0;
}

.clinic-info__map-frame {
  display: block;
  width: 100%;
  aspect-ratio: 444/315;
  border: 0;
}

.clinic-info__map-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18.5rem;
  height: 4rem;
  margin-top: 2.8rem;
  background: linear-gradient(to right, #9FD7C1, #4FB58D);
  border-radius: 0.5rem;
  font-family: "Square Peg", cursive;
  font-size: 1.6rem;
  line-height: 1.48;
  color: #fff;
  text-decoration: none;
}
@media (max-width: 767px) {
  .clinic-info__map-btn {
    margin: 1.3rem auto 0;
  }
}

/* ==========================================================================
   TOP：Concept（コンセプト）
   ・PCカンプ実測 … コンテンツ幅1280（x80〜1360）／カード束 502×385（x858 y2111〜）
   ・SPカンプ実測 … カード束 347×266（PCの 0.6912 倍の相似）＝ 中身は % 指定で相似縮小
   ・広域背景（News〜Concept に敷かれる pixta 背景／node 49:19）はこのセクションでは敷かない。
     セクション内に収まるぼかし円のみ .index-concept__bokeh-item で再現
   ========================================================================== */
.index-concept {
  position: relative;
  padding: 0 0 11.5rem;
}
@media (max-width: 767px) {
  .index-concept {
    padding: 2rem 0 10rem;
  }
}

/* ---------- 背景のぼかし円（フワフワと浮遊） ---------- */
.index-concept__bokeh {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.index-concept__bokeh-item {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0));
  will-change: transform;
  animation: concept-float 14s ease-in-out infinite;
}

/* Ellipse 33（PC x123 y1768 / 371×386）※SPカンプには無いので非表示 */
.index-concept__bokeh-item--01 {
  top: -8.3rem;
  left: 12.3rem;
  width: 37.1rem;
  height: 38.6rem;
}
@media (max-width: 767px) {
  .index-concept__bokeh-item--01 {
    display: none;
  }
}

/* Ellipse 35（PC x1193 y1778 / 323×336 ／ SP x291 y1802 / 238×248） */
.index-concept__bokeh-item--02 {
  top: -7.4rem;
  left: 119.3rem;
  width: 32.3rem;
  height: 33.6rem;
  animation-duration: 18s;
  animation-delay: -6s;
}
@media (max-width: 767px) {
  .index-concept__bokeh-item--02 {
    top: -3.9rem;
    left: 29.1rem;
    width: 23.8rem;
    height: 24.8rem;
  }
}

/* Ellipse 34（PC x86 y2063 / 97×106）※SPカンプには無いので非表示 */
.index-concept__bokeh-item--03 {
  top: 21.1rem;
  left: 8.6rem;
  width: 9.7rem;
  height: 10.6rem;
  animation-duration: 11s;
  animation-delay: -3s;
}
@media (max-width: 767px) {
  .index-concept__bokeh-item--03 {
    display: none;
  }
}

@keyframes concept-float {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(1.2rem, -2.2rem, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
/* ---------- レイアウト ---------- */
.index-concept__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 132rem;
  margin: 0 auto;
  padding: 0 2rem;
}
@media (max-width: 767px) {
  .index-concept__inner {
    max-width: none;
    padding: 0 1rem;
  }
}

.index-concept__body {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 2.2rem;
}
@media (max-width: 767px) {
  .index-concept__body {
    display: block;
    margin-top: 1.3rem;
  }
}

.index-concept__textarea {
  flex-shrink: 0;
  width: 76.8rem;
  padding-top: 8rem;
}
@media (max-width: 767px) {
  .index-concept__textarea {
    width: 100%;
    padding-top: 0;
  }
}

.index-concept__lead {
  font-family: "Zen Old Mincho", serif;
  font-size: 2.4rem;
  line-height: 2;
  color: #555;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .index-concept__lead {
    font-size: 2rem;
    text-align: center;
    white-space: normal;
  }
}

.index-concept__text {
  max-width: 61.6rem;
  margin-top: 2.5rem;
  font-family: "Zen Old Mincho", serif;
  font-size: 1.6rem;
  line-height: 2;
  color: #555;
}
@media (max-width: 767px) {
  .index-concept__text {
    max-width: none;
    margin-top: 1.3rem;
  }
}

/* ---------- カードスタックスライダー ----------
   束の外寸 502×385（= カード456×351 ＋ 前面カードのオフセット46/34）。
   中身をすべて % 指定にしてあるので、SPは width を変えるだけで相似縮小される。 */
.index-concept__slider {
  position: relative;
  flex-shrink: 0;
  width: 50.2rem;
  aspect-ratio: 502/385;
}
@media (max-width: 767px) {
  .index-concept__slider {
    width: 34.7rem;
    margin: 3.5rem auto 0;
  }
}

.index-concept__cards {
  position: relative;
  width: 100%;
  height: 100%;
}

/* 既定＝束の奥に隠れている控えのカード */
.index-concept__card {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 90.837%;
  height: 91.169%;
  border-radius: 0.8rem;
  background: #4FB58D;
  opacity: 0;
  transform: translate(0, 0);
  transition: transform 0.7s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.7s ease, background-color 0.7s ease;
}
@media (max-width: 767px) {
  .index-concept__card {
    border-radius: 0.55rem;
  }
}

/* 2枚目＝奥に見えている台紙（濃緑・オフセットなし） */
.index-concept__card.is-back {
  z-index: 2;
  opacity: 1;
}

/* 1枚目＝手前のカード（淡緑・右下に 46/34 ずれる） */
.index-concept__card.is-front {
  z-index: 3;
  background: #9FD7C1;
  opacity: 1;
  transform: translate(10.088%, 9.687%);
}

/* 送り出し中のカード（右下へ抜けながらフェードアウト） */
.index-concept__card.is-out {
  z-index: 4;
  background: #9FD7C1;
  opacity: 0;
  transform: translate(46%, 26%) rotate(5deg);
}

/* クラス入れ替え時に一瞬だけトランジションを切る（戻りアニメの防止） */
.index-concept__card.is-nomove {
  transition: none;
}

.index-concept__card-photo {
  position: absolute;
  top: 7.123%;
  left: 6.798%;
  width: 86.184%;
  height: 77.208%;
  overflow: hidden;
  border-radius: 0.6rem;
}
@media (max-width: 767px) {
  .index-concept__card-photo {
    border-radius: 0.4rem;
  }
}

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

/* ---------- 左右の矢印（前面カードの右下。カードが入れ替わっても位置は固定） ---------- */
.index-concept__nav {
  position: absolute;
  right: 4.881%;
  bottom: 2.208%;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
@media (max-width: 767px) {
  .index-concept__nav {
    gap: 1rem;
  }
}

.index-concept__prev,
.index-concept__next {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  padding: 0;
  border: none;
  background: none;
  color: #fff;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
@media (max-width: 767px) {
  .index-concept__prev,
  .index-concept__next {
    width: 2.2rem;
    height: 2.2rem;
  }
}
.index-concept__prev:hover,
.index-concept__next:hover {
  opacity: 0.6;
}

/* lucide:arrow-up をそのまま回転させて左右矢印にする（実測13×13・stroke 2・白） */
.index-concept__arrow {
  display: block;
  width: 1.3rem;
  height: 1.3rem;
}
@media (max-width: 767px) {
  .index-concept__arrow {
    width: 0.9rem;
    height: 0.9rem;
  }
}

.index-concept__prev .index-concept__arrow {
  transform: rotate(-90deg);
}

.index-concept__next .index-concept__arrow {
  transform: rotate(90deg);
}

/* ※ prefers-reduced-motion による停止は入れない。
   本案件は指示書で「動きのあるアニメーションを入れる（文字が動いたり、背景が動いたり、
   ループするような感じ）」がデザイン要件として明示されているため、OS の「視差効果を減らす」
   設定に関わらず動かす。OS設定を尊重する形に戻したい場合はここに
   @media (prefers-reduced-motion: reduce) { … animation: none; } を復活させる。 */
/* ==========================================================================
   TOP 05: Features（当院の特徴）
   Figma PC y2560–3240 ／ SP y2740–3550
   ・淡緑シェイプ（$c_green_pale）は上端だけが波状。Figma の Vector 1（#E8F3E5）と
     Vector 2（$c_line 相当 #9FD7C1 88%）の2枚重ねで、左側だけ緑ラインが覗く。
     波の帯（PC 30.05px / SP 39.09px）を SVG で切り出し、その下は background-color で塗る。
   ・カード4件は画面幅より広い（PC 1151px）。中央のカードの右端から次のカードが約81px覗く。
   ・下部の英字マーキーは淡緑シェイプの下端をまたいで流れる。
   ========================================================================== */
.index-features {
  position: relative;
  z-index: 1;
  padding-bottom: 0.6rem;
  overflow: hidden; /* マーキーとカードのはみ出しを画面幅で切る */
  margin-top: -10rem;
  margin-bottom: -3.5rem;
  /* 共通見出し（.sec-head / .sec-title / .sec-title-ja は _component.scss 定義）を
     背景シェイプより前面に出すためのスコープ限定の上書き */
}
@media (max-width: 767px) {
  .index-features {
    padding-top: 2.6rem;
    margin-bottom: -2.3rem;
  }
}
.index-features .sec-head {
  position: relative;
  z-index: 2;
}

/* --------------------------------------------------
   淡緑の背景シェイプ（上端が波）
   top は「波の一番深いところ」＝ベタ塗りが始まる位置。
   波の帯そのものは ::before で上へ 3rem（SP 3.9rem）ぶん張り出させる。
   -------------------------------------------------- */
.index-features__bg {
  position: absolute;
  left: 0;
  right: 0;
  top: 10.7rem;
  bottom: 3.5rem;
  background: #E8F3E5;
  z-index: 0;
  pointer-events: none;
}
@media (max-width: 767px) {
  .index-features__bg {
    top: 8.8rem;
    bottom: 2.3rem;
  }
}
.index-features__bg::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -3rem;
  height: 3rem;
  background-image: url("../img/top/features-wave.svg");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% 100%;
}
@media (max-width: 767px) {
  .index-features__bg::before {
    top: -3.9rem;
    height: 3.9rem;
    background-image: url("../img/top/features-wave-sp.svg");
  }
}

/* --------------------------------------------------
   装飾の水彩フラワー（Figma 9:203・不透明度50%・カードの写真より背面）
   注記「フワフワと動く」＝ゆっくり上下＋わずかに回転
   -------------------------------------------------- */
.index-features__deco {
  position: absolute;
  top: 40.1rem;
  left: 82.6rem;
  width: 17.2rem;
  height: auto;
  opacity: 0.5;
  z-index: 1;
  pointer-events: none;
  animation: features-float 7s ease-in-out infinite;
}
@media (max-width: 767px) {
  .index-features__deco {
    top: 66.8rem;
    left: -2.2rem;
    width: 11.4rem;
  }
}

@keyframes features-float {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(0, -1.6rem, 0) rotate(-3deg);
  }
}
/* --------------------------------------------------
   スライダー
   スライドの幅＝カード幅＋右の余白（PC 115.1rem + 12.7rem = 127.8rem）。
   余白をスライドに含めたうえで centeredSlides で中央寄せすると
   1440px 時にカード左端が 81px・右端から次のカードが 81px 覗く＝カンプと一致する。
   （spaceBetween を使うと中央寄せの基準がカード幅だけになり、この覗き量が出ない）
   -------------------------------------------------- */
.index-features__slider-area {
  position: relative;
  z-index: 2;
  margin-top: 7.1rem;
}
@media (max-width: 767px) {
  .index-features__slider-area {
    margin-top: 1rem;
  }
}

.index-features__slider {
  width: 100%;
  cursor: pointer;
}
.index-features__slider .swiper-wrapper {
  align-items: stretch;
}
.index-features__slider .index-features__slide {
  width: 127.8rem;
  height: auto;
  padding-right: 12.7rem;
}
@media (max-width: 767px) {
  .index-features__slider .index-features__slide {
    width: 33.5rem;
    padding-right: 3rem;
  }
}

/* カーソルで送る向きを示す。JS が mousemove で付け替える。
   矢印ボタンをデザインに持たない代わりの操作アフォーダンス */
.index-features__slider.is-nav-prev {
  cursor: w-resize;
}

.index-features__slider.is-nav-next {
  cursor: e-resize;
}

.index-features__card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  height: 100%;
}
@media (max-width: 767px) {
  .index-features__card {
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 7.2rem;
  }
}

.index-features__card-textarea {
  width: 75.3rem;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .index-features__card-textarea {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.7rem;
  }
}

.index-features__card-en {
  font-family: "Square Peg", cursive;
  font-size: 3.6rem;
  font-weight: 400;
  line-height: 1.48;
  color: #4FB58D;
}
@media (max-width: 767px) {
  .index-features__card-en {
    text-align: center;
  }
}

.index-features__card-title {
  font-family: "Zen Old Mincho", serif;
  font-size: 3.2rem;
  font-weight: 600;
  line-height: 1.48;
  letter-spacing: 0.05em;
  color: #4FB58D;
}
@media (max-width: 767px) {
  .index-features__card-title {
    font-size: 2.4rem;
    text-align: center;
  }
}

.index-features__card-text {
  margin-top: 1rem;
  font-family: "Zen Old Mincho", serif;
  font-size: 2rem;
  font-weight: 400;
  line-height: 2;
  color: #555;
}
@media (max-width: 767px) {
  .index-features__card-text {
    margin-top: 0;
    width: 100%;
  }
}

.index-features__card-photo {
  width: 37.8rem;
  flex-shrink: 0;
  border-radius: 0.9rem;
  overflow: hidden;
}
@media (max-width: 767px) {
  .index-features__card-photo {
    width: 22.8rem;
  }
}

.index-features__card-img {
  display: block;
  width: 100%;
  height: 28rem;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 767px) {
  .index-features__card-img {
    height: auto;
    aspect-ratio: 251/186;
  }
}

/* --------------------------------------------------
   英字マーキー（無限ループ）
   同じ文字列を2セット並べ、トラックを -50% 動かすと継ぎ目なくつながる。
   -------------------------------------------------- */
.index-features__marquee {
  position: relative;
  z-index: 2;
  margin-top: 0.8rem;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
}
@media (max-width: 767px) {
  .index-features__marquee {
    margin-top: 0;
  }
}

.index-features__marquee-track {
  display: flex;
  width: max-content;
  animation: features-marquee 28s linear infinite;
}
@media (max-width: 767px) {
  .index-features__marquee-track {
    animation-duration: 16s;
  }
}

.index-features__marquee-text {
  display: block;
  flex-shrink: 0;
  padding-right: 6rem;
  font-family: "Zen Old Mincho", serif;
  font-size: 9.6rem;
  font-weight: 900;
  line-height: 1.48;
  letter-spacing: 0.05em;
  color: #fff;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .index-features__marquee-text {
    font-size: 4.8rem;
    padding-right: 3rem;
  }
}

@keyframes features-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}
/* 動きを減らす設定のユーザーには装飾アニメーションを止める */
/* ※ prefers-reduced-motion による停止は入れない。
   本案件は指示書で「動きのあるアニメーションを入れる（文字が動いたり、背景が動いたり、
   ループするような感じ）」がデザイン要件として明示されているため、OS の「視差効果を減らす」
   設定に関わらず動かす。OS設定を尊重する形に戻したい場合はここに
   @media (prefers-reduced-motion: reduce) { … animation: none; } を復活させる。 */
/* ==========================================================================
   TOP: 初めてご来院される方へ（バナー）
   Figma PC 9:262（Group 9 / 684×191・x378 y3269）／ SP 98:7952（315.77×88.18・x30 y3573）
   SP は PC の 0.4617 倍の相似形（Figma実測）。装飾の位置は % で共通化している。
   背景（pixta のぼかし光）はこのセクションでは敷かない ＝ 親 .index-bokeh が敷く
   ========================================================================== */
.index-firstvisit {
  position: relative;
  /* 上：装飾テキスト DAIJINGU DENTAL CLINIC（PC y3234 まで）との間隔 35px
     下：Medical 見出しまでの余白は Medical 側の padding-top と重なるため控えめに取る */
  padding: 3.5rem 0 6rem;
  /* -- 共通 .c-viewmore の親スコープ限定上書き（CLAUDE.md の例外ルール／素のネスト） --
     Figma 7:133 は Zen Old Mincho Regular 20px。共通側の $f_script（Square Peg）ではない */
  /* Figma 9:260（Group 8）＝ 横線 56.5px ＋ 右端から左上へ跳ねる矢印（dx-5 / dy-5.5 ≒ 48度）。
     共通の既定値（線 6.4rem・矢印 1.6rem / 30度）より短く急なので、この配下だけ差し替える */
}
@media (max-width: 767px) {
  .index-firstvisit {
    padding: 2.9rem 0 2rem;
  }
}
.index-firstvisit .c-viewmore {
  position: relative;
  z-index: 1;
  margin-top: 1.6rem;
  font-family: "Zen Old Mincho", serif;
}
@media (max-width: 767px) {
  .index-firstvisit .c-viewmore {
    margin-top: 0.75rem;
    font-size: 1rem;
  }
}
.index-firstvisit .c-viewmore__line {
  width: 5.65rem;
}
@media (max-width: 767px) {
  .index-firstvisit .c-viewmore__line {
    width: 2.61rem;
  }
}
.index-firstvisit .c-viewmore__line::after {
  width: 0.75rem;
  transform: rotate(48deg);
}
@media (max-width: 767px) {
  .index-firstvisit .c-viewmore__line::after {
    width: 0.35rem;
  }
}

.index-firstvisit__inner {
  width: 68.4rem;
  max-width: calc(100% - 6rem);
  margin: 0 auto;
}
@media (max-width: 767px) {
  .index-firstvisit__inner {
    width: 31.6rem;
  }
}

.index-firstvisit__banner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 19.1rem;
  padding-top: 3.8rem;
  border-radius: 1.1rem;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  /* Figma 9:249: 右 #52b78f → 左 #9dd6c0。テーマ変数の $c_green / $c_green_card がほぼ同値 */
  background: linear-gradient(to right, #9FD7C1, #4FB58D);
}
@media (max-width: 767px) {
  .index-firstvisit__banner {
    height: 8.82rem;
    padding-top: 1.75rem;
    border-radius: 0.51rem;
  }
}

/* 内側の白罫（Figma 9:250 / 1px solid #fff・角丸11px・上下左右 13px 内側） */
.index-firstvisit__frame {
  position: absolute;
  inset: 1.3rem;
  border: 0.1rem solid #fff;
  border-radius: 1.1rem;
  pointer-events: none;
}
@media (max-width: 767px) {
  .index-firstvisit__frame {
    inset: 0.6rem;
    border-radius: 0.51rem;
  }
}

/* 葉・花の線画（バナー左端／バナー幅の 33.92%・高さ100%・不透明度29%） */
.index-firstvisit__leaf {
  position: absolute;
  top: 0;
  left: 0.07%;
  width: 33.92%;
  height: 100%;
  opacity: 0.29;
  pointer-events: none;
}

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

/* きらめき（バナー右／幅 22.81%・高さ 85.86%） */
.index-firstvisit__sparkle {
  position: absolute;
  top: 0;
  left: 77.19%;
  width: 22.81%;
  height: 85.86%;
  pointer-events: none;
}

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

/* 「初めてご来院される方へ」＝ 先頭1文字だけ大きい（Figma 10:7: 初 48px / 以降 36px） */
.index-firstvisit__title {
  position: relative;
  z-index: 1;
  font-family: "Zen Old Mincho", serif;
  font-weight: 600;
  font-size: 3.6rem;
  line-height: 1.48;
  letter-spacing: 0.05em;
  text-align: center;
  color: #fff;
}
@media (max-width: 767px) {
  .index-firstvisit__title {
    font-size: 1.66rem;
  }
}

.index-firstvisit__title-head {
  font-size: 4.8rem;
}
@media (max-width: 767px) {
  .index-firstvisit__title-head {
    font-size: 2.22rem;
  }
}

/* ==========================================================================
   TOP: Medical（診療のご案内）
   カード10枚（PC 5列×2行 / SP 2列×5行）。
   ・背景（pixta水彩＋ぼかし光）は親の .index-bokeh ラッパーが敷くので、ここでは敷かない
   ・カード地は $c_green の半透明（Figma実測：#4FB58D を約68%）＝背後のぼかし背景が透ける
   ・SPはPCの厳密な比例縮小（Figma実測 165.157/249 = 0.663）
   ========================================================================== */
.index-medical {
  position: relative;
  z-index: 1;
  padding: 3.3rem 0 10.8rem;
}
@media (max-width: 767px) {
  .index-medical {
    padding: 2rem 0 4rem;
  }
}

.index-medical__inner {
  width: 100%;
  max-width: 132rem;
  margin: 0 auto;
  padding: 0 2rem;
}
@media (max-width: 767px) {
  .index-medical__inner {
    padding: 0 1.4rem;
  }
}

/* --------------------------------------------------------------------------
   カードグリッド（PC 5列×2行 / SP 2列×5行）
   PC: 列間8.5px・行間25px（1280 - 8.5×4 = 1246 → 1列249.2px）
   SP: 列間15.8px・行間13.4px
   -------------------------------------------------------------------------- */
.index-medical__list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem 0.85rem;
  margin-top: 5rem;
  padding: 0;
  list-style: none;
}
@media (max-width: 767px) {
  .index-medical__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.34rem 1.58rem;
    margin-top: 3.1rem;
  }
}

.index-medical__item {
  list-style: none;
}

.index-medical__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  aspect-ratio: 249/203;
  padding: 2.7rem 0 2rem;
  border-radius: 0.8rem;
  background-color: rgba(79, 181, 141, 0.68);
  border: 1px solid rgba(79, 181, 141, 0);
  overflow: hidden;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
@media (max-width: 767px) {
  .index-medical__card {
    padding: 1.79rem 0 1.33rem;
    border-radius: 0.53rem;
  }
}
.index-medical__card:hover {
  background-color: rgba(216, 239, 230, 0.7);
  border-color: #4FB58D;
}

/* ホバーで地が淡くなっても白文字が読めるように、文字に緑のグロー（参考サイト同様 drop-shadow） */
.index-medical__card:hover .index-medical__label {
  filter: drop-shadow(0 0 0.5rem #4FB58D) drop-shadow(0 0 1rem #4FB58D);
}

/* アイコンの濃緑円（外側にやわらかい影） */
.index-medical__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 9rem;
  height: 9rem;
  border-radius: 50%;
  background-color: #369E76;
  box-shadow: 0 0 0.8rem 0.2rem rgba(0, 0, 0, 0.3);
}
@media (max-width: 767px) {
  .index-medical__circle {
    width: 5.97rem;
    height: 5.97rem;
  }
}

/* 白線アイコン。10種で原寸が異なる（PC 38〜55px）ため、
   円（PC 90px）に対する比率で指定して PC/SP を同じ値で比例させる */
.index-medical__icon {
  display: block;
  height: auto;
}

.index-medical__icon--general {
  width: 42.2%;
}

.index-medical__icon--periodontal {
  width: 53.1%;
}

.index-medical__icon--pediatric {
  width: 60%;
}

.index-medical__icon--oral {
  width: 56.7%;
}

.index-medical__icon--implant {
  width: 45.6%;
}

.index-medical__icon--ortho {
  width: 50%;
}

.index-medical__icon--aesthetic {
  width: 60%;
}

.index-medical__icon--whitening {
  width: 51.1%;
}

.index-medical__icon--botulinum {
  width: 55.6%;
}

.index-medical__icon--lipart {
  width: 61.1%;
}

.index-medical__icon--endodontic {
  width: 40%;
}

.index-medical__icon--denture {
  width: 62%;
}

.index-medical__label {
  margin-top: 1.8rem;
  font-family: "Zen Old Mincho", serif;
  font-size: 2.4rem;
  line-height: 2;
  letter-spacing: 0.1em;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  transition: filter 0.2s ease;
}
@media (max-width: 767px) {
  .index-medical__label {
    margin-top: 1.2rem;
    font-size: 1.6rem;
  }
}

/* 右下の葉の装飾（10枚とも同じ画像）。Figmaでは水平反転して配置されている */
.index-medical__leaf {
  position: absolute;
  top: 9.6rem;
  right: 2rem;
  width: 6.8rem;
  height: 8.8rem;
  opacity: 0.27;
  transform: scaleX(-1);
  pointer-events: none;
}
@media (max-width: 767px) {
  .index-medical__leaf {
    top: 6.37rem;
    right: 1.33rem;
    width: 4.5rem;
    height: 5.85rem;
  }
}

/* ==========================================================================
   08 Greeting（ごあいさつ）
   Figma: PC y4300-5260 / SP y4590-5710
     PC … Greeting 8:6（96px×1.48=142）／ごあいさつ 8:4（20px）
          見出し 8:5（x167 y4601 456×48）／本文 8:7（x169 y4674 729×192＝16px×2.0×6行）
          バナー 9:10（x167 y4911 582×93）／9:13（x167 y5029 580×75）
          写真ウィンドウ 9:264（x967 y4552 393×271）＋ 9:265（y4839 393×194）＝ y4552-5033
     SP  … Greeting 98:8024（48px）／ごあいさつ 98:8023（20px）
          見出し 98:8026（y4741 215×80＝20px×2.0×2行）／本文 98:8027（y4836 363×352＝16px×2.0×11行）
          バナー 98:8029（y5216 355×57）／98:8028（y5289 355×46）
          写真ウィンドウ 98:8030（x62 y5363 251×173）＋ 98:8031（y5546 251×124）＝ y5363-5670

   ★背景は敷かない。このセクションは広域背景ラッパー .index-bokeh（pixta 49:40）の中に入る。
     セクション内に中心があるぼかし円（49:41 / 49:45 / 49:48）は pixta 背景写真の光と重なって
     ほぼ判別できないため、二重描画を避けて実装していない（親へ報告）。
   ========================================================================== */
/* ---------- 縦無限ループの寸法（1か所で管理） ----------
   ウィンドウ高さ ＝ カード高さ × 1.8（ユーザー指定「画面内に見えるのは1.8枚分」）
   カンプ実測も PC 481 / 271 = 1.775、SP 307 / 173 = 1.775 で 1.8 と一致する。
   ※トラックは gap ではなく各アイテムの margin-bottom で間隔を作る。
     gap だと「最後のアイテムの後ろ」に間隔が付かず translateY(-50%) が
     半コマ分ずれて継ぎ目が出るため。 */
.index-greeting {
  position: relative;
  padding: 3.4rem 0 10rem;
}
@media (max-width: 767px) {
  .index-greeting {
    padding: 4rem 0 2rem;
  }
}

/* コンテンツ幅 119.3rem（Figma x167〜1360）＋ 左右padding 2rem */
.index-greeting__inner {
  position: relative;
  z-index: 1;
  max-width: 123.3rem;
  width: 100%;
  margin: 0 auto;
  padding: 0 2rem;
}
@media (max-width: 767px) {
  .index-greeting__inner {
    padding: 0 1rem;
  }
}

/* ---------- 左テキスト＋右スライダーの2カラム ---------- */
.index-greeting__contents {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 2.5rem;
}
@media (max-width: 767px) {
  .index-greeting__contents {
    flex-direction: column;
    margin-top: 2.9rem;
  }
}

.index-greeting__body {
  width: 72.9rem;
  padding-top: 4.9rem;
}
@media (max-width: 767px) {
  .index-greeting__body {
    width: 100%;
    padding-top: 0;
  }
}

.index-greeting__lead {
  font-family: "Zen Old Mincho", serif;
  font-size: 2.4rem;
  line-height: 2;
  color: #333;
}
@media (max-width: 767px) {
  .index-greeting__lead {
    font-size: 2rem;
    letter-spacing: 0.075em;
    text-align: center;
  }
}

.index-greeting__text {
  width: 72.9rem;
  margin-top: 2.5rem;
  font-family: "Zen Old Mincho", serif;
  font-size: 1.6rem;
  line-height: 2;
  color: #333;
}
@media (max-width: 767px) {
  .index-greeting__text {
    width: 100%;
    margin-top: 1.5rem;
  }
}

/* ---------- 外部バナー2枚 ---------- */
.index-greeting__banners {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.5rem;
  margin-top: 4.5rem;
}
@media (max-width: 767px) {
  .index-greeting__banners {
    align-items: stretch;
    gap: 1.6rem;
    margin-top: 2.8rem;
  }
}

.index-greeting__banner {
  display: block;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
.index-greeting__banner:hover {
  opacity: 0.75;
}

.index-greeting__banner--survey {
  width: 58.2rem;
}
@media (max-width: 767px) {
  .index-greeting__banner--survey {
    width: 100%;
  }
}

.index-greeting__banner--recommend {
  width: 58rem;
}
@media (max-width: 767px) {
  .index-greeting__banner--recommend {
    width: 100%;
  }
}

.index-greeting__banner-img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- 院内写真の縦無限ループ（下から上へ） ---------- */
.index-greeting__loop {
  width: 39.3rem;
  height: 48.78rem;
  flex-shrink: 0;
  overflow: hidden;
}
@media (max-width: 767px) {
  .index-greeting__loop {
    width: 25.1rem;
    height: 31.14rem;
    margin: 2.8rem auto 0;
  }
}

.index-greeting__loop-track {
  display: flex;
  flex-direction: column;
  will-change: transform;
  animation: greeting-loop 25s linear infinite;
}
@media (max-width: 767px) {
  .index-greeting__loop-track {
    animation-duration: 20s;
  }
}

/* ※ prefers-reduced-motion による停止は入れない。
   本案件は指示書で「動きのあるアニメーションを入れる（文字が動いたり、背景が動いたり、
   ループするような感じ）」がデザイン要件として明示されているため、OS の「視差効果を減らす」
   設定に関わらず動かす。OS設定を尊重する形に戻したい場合はここに
   @media (prefers-reduced-motion: reduce) { … animation: none; } を復活させる。 */
.index-greeting__loop-item {
  width: 100%;
  height: 27.1rem;
  flex-shrink: 0;
  margin-bottom: 1.7rem;
}
@media (max-width: 767px) {
  .index-greeting__loop-item {
    height: 17.3rem;
    margin-bottom: 1rem;
  }
}

.index-greeting__loop-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0.8rem;
}

/* 2セット並べたトラックを半分＝1セット分だけ上へ動かす（継ぎ目なし） */
@keyframes greeting-loop {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-50%);
  }
}
/* ==========================================================================
   TOP：Movie（医院紹介）
   Figma 実測
   ・PC … 見出し Movie(9:18 y5307 h142) / 医院紹介(9:17 y5449 h30)
           動画 9:15(x80 y5531 631×309) / 9:16(x730 y5531 630×309) ＝ コンテンツ幅1280・間19
           View More 49:104(x628 y5882 185×40 / 文字 Square Peg 20px)
   ・SP … 見出し 98:8033(y5709 h71) / 98:8032(y5773 h30)
           動画 98:8034(x23 y5819 329×161) / 98:8035(y6006) ＝ 左右余白23
           View More 98:8039(x95 y6196 185×40)
   ・動画の枠比率はカンプ 631:309（≒2.04）だが、これはYouTube視聴ページのスクショを
     貼ったものなので実装は YouTube 標準の 16:9 を採用（枠高さが PC +46px / SP +24px 増える）
   ・広域背景（pixta 49:40 / 98:7945）は親ラッパー .index-bokeh 側で敷く。ここでは敷かない
   ========================================================================== */
.index-movie {
  position: relative;
  padding: 10rem 0;
}
@media (max-width: 767px) {
  .index-movie {
    padding: 2rem 0 4.5rem;
  }
}

.index-movie__inner {
  position: relative;
}
@media (max-width: 767px) {
  .index-movie__inner {
    padding: 0 2.3rem 4rem;
  }
}

/* ---------- 動画2本（PC横並び / SP縦積み） ---------- */
.index-movie__list {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.9rem;
  margin-top: 5.2rem;
}
@media (max-width: 767px) {
  .index-movie__list {
    flex-direction: column;
    gap: 2.6rem;
    margin-top: 1.6rem;
  }
}

.index-movie__item {
  flex: 1 1 0;
  min-width: 0;
}
@media (max-width: 767px) {
  .index-movie__item {
    flex: none;
    width: 100%;
  }
}

.index-movie__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.06);
}

.index-movie__iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ---------- View More（緑のピルボタン / YouTubeチャンネルへ） ---------- */
.index-movie__more {
  display: flex;
  justify-content: center;
  margin-top: 4.2rem;
}
@media (max-width: 767px) {
  .index-movie__more {
    margin-top: 2.9rem;
  }
}

.index-movie__more-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18.5rem;
  height: 4rem;
  border-radius: 0.5rem;
  background: linear-gradient(90deg, #9FD7C1 0%, #4FB58D 100%);
  color: #fff;
  font-family: "Square Peg", cursive;
  font-size: 2rem;
  line-height: 1;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
.index-movie__more-link:hover {
  opacity: 0.8;
}

/* ==========================================================================
   TOP：Link（関連サイトバナー横スライダー）
   Figma 実測
   ・淡緑シェイプ … Vector 4(9:290 #E8F3E5 / y5976 h847) と Vector 3(9:289 #9FD7C1 88% / h818)。
     2枚は「同じ波形の左右反転」で重なっており、左側だけ奥の濃い帯（実測 y5986〜6019）が覗く。
     波状カットは上辺のみ・下辺は直線で、淡緑は下端 y6823 まで＝Instagram セクションまで続く
     → ★親への要望：.index-instagram 側も background: $c_green_pale にして継ぎ目を無くす
   ・見出し Link … 9:37 y5998 h142（和文サブ無し）
   ・スライダー … ビューポート x134〜1308（1175）／スライド 383×105・間12／3枚見え・全6枚
     矢印 … 直径39・中心 x99.5 と x1340（＝左右とも端から8rem。node bbox の x1360 は反転由来のズレ）
   ・SP … 波 98:8051(y6286 h457 / 振幅29)／Link 98:8048 y6302 h71
     スライド 136×37・間9・2枚見え／矢印 直径29.45・端から1rem
   ・注記「ウネウネと動く」(17:26 / 98:8049付近) … 白い細波線3本。実測トレース：
     上端 x481/503/546（y5940）→ y6030 で x441/468/515 → y6170 で x301/321/367
     → x130 で y6229/6238/6250 → 左端 x0 で y6276/6283/6298
   ========================================================================== */
.index-link {
  position: relative;
  isolation: isolate;
  margin-top: -5rem;
  padding: 0 0 4.8rem;
}
@media (max-width: 767px) {
  .index-link {
    padding: 2.1rem 0 1.8rem;
  }
}

/* ---------- 背景：波の帯より下のベタ塗り ---------- */
.index-link__base {
  position: absolute;
  left: 0;
  right: 0;
  top: 5.4rem;
  bottom: 0;
  z-index: 0;
  background: #E8F3E5;
  pointer-events: none;
}
@media (max-width: 767px) {
  .index-link__base {
    top: 2.9rem;
  }
}

/* ---------- 背景：上辺の波状カット（アニメーションさせない） ---------- */
.index-link__wave {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 5.4rem;
  pointer-events: none;
}
@media (max-width: 767px) {
  .index-link__wave {
    height: 2.9rem;
  }
}

.index-link__wave-svg {
  display: block;
  width: 100%;
  height: 100%;
}

.index-link__wave-back {
  fill: rgba(159, 215, 193, 0.88);
}
@media (max-width: 767px) {
  .index-link__wave-back {
    display: none;
  }
}

.index-link__wave-front {
  fill: #E8F3E5;
}

/* ---------- 背景：ウネウネと動く白い細波線 ---------- */
.index-link__lines {
  position: absolute;
  left: 0;
  top: -2.8rem;
  z-index: 2;
  width: 56rem;
  height: 37rem;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 14%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 14%);
}
@media (max-width: 767px) {
  .index-link__lines {
    top: 5.4rem;
    width: 9rem;
    height: 8rem;
  }
}

.index-link__lines-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.index-link__line {
  fill: none;
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.9;
  vector-effect: non-scaling-stroke;
  will-change: transform;
}
@media (max-width: 767px) {
  .index-link__line {
    stroke-width: 1.2;
  }
}

.index-link__line--01 {
  animation: link-line-drift-01 11s ease-in-out infinite;
}

.index-link__line--02 {
  animation: link-line-drift-02 13s ease-in-out infinite;
  animation-delay: -2.5s;
}

.index-link__line--03 {
  animation: link-line-drift-03 15s ease-in-out infinite;
  animation-delay: -5s;
}

@keyframes link-line-drift-01 {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(9px, -5px);
  }
  50% {
    transform: translate(3px, 7px);
  }
  75% {
    transform: translate(-7px, 2px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes link-line-drift-02 {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-8px, 5px);
  }
  50% {
    transform: translate(5px, 9px);
  }
  75% {
    transform: translate(10px, -4px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes link-line-drift-03 {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(6px, 8px);
  }
  50% {
    transform: translate(-9px, -3px);
  }
  75% {
    transform: translate(2px, -8px);
  }
  100% {
    transform: translate(0, 0);
  }
}
/* ※ prefers-reduced-motion による停止は入れない。
   本案件は指示書で「動きのあるアニメーションを入れる（文字が動いたり、背景が動いたり、
   ループするような感じ）」がデザイン要件として明示されているため、OS の「視差効果を減らす」
   設定に関わらず動かす。OS設定を尊重する形に戻したい場合はここに
   @media (prefers-reduced-motion: reduce) { … animation: none; } を復活させる。 */
/* ---------- コンテンツ ---------- */
.index-link__inner {
  position: relative;
  z-index: 3;
}

/* ---------- バナー横スライダー ---------- */
.index-link__slider {
  position: relative;
  width: 100%;
  max-width: 117.5rem;
  margin: 0 auto;
  margin-top: 3.6rem;
}
@media (max-width: 767px) {
  .index-link__slider {
    max-width: 28.2rem;
    margin-top: 2.1rem;
  }
}

.index-link__splide {
  width: 100%;
}

.index-link__banner {
  display: block;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
.index-link__banner:hover {
  opacity: 0.75;
}

.index-link__banner-img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------- 左右の丸い矢印（Splide の標準矢印は使わず自前ボタンをJSで配線） ---------- */
.index-link__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3.9rem;
  height: 3.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #9FD7C1;
  color: #fff;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
@media (max-width: 767px) {
  .index-link__arrow {
    width: 2.95rem;
    height: 2.95rem;
  }
}
.index-link__arrow:hover {
  opacity: 0.8;
}

.index-link__arrow-icon {
  width: 1.4rem;
  height: 1.6rem;
}
@media (max-width: 767px) {
  .index-link__arrow-icon {
    width: 1.1rem;
    height: 1.25rem;
  }
}

.index-link__arrow--prev {
  left: -5.25rem;
}
@media (max-width: 767px) {
  .index-link__arrow--prev {
    left: -3.65rem;
  }
}
.index-link__arrow--prev .index-link__arrow-icon {
  transform: rotate(-90deg);
}

.index-link__arrow--next {
  right: -5.25rem;
}
@media (max-width: 767px) {
  .index-link__arrow--next {
    right: -3.65rem;
  }
}
.index-link__arrow--next .index-link__arrow-icon {
  transform: rotate(90deg);
}

/* ==========================================================================
   TOP: Instagram
   Figma PC 見出し 9:39 / 9:38（y6377・y6519）・バナー 9:41 image 10（580×150・x430 y6598）
        SP  見出し 98:8065 / 98:8064・バナー 98:8066 image 10（340×88・x17 y6598）
   ・指示書「※埋め込みは無し」＝ Instagram ウィジェットは置かないリンクバナー
   ・背景の淡緑シェイプ（9:290 Vector 4 / y5976〜6823）は Link セクションが実装する。
     ここは background なし（透明）＝ Link のシェイプがこのセクション下端まで伸びる前提
   ・Figma の image 10 は「ロゴ・アイコン・帯テキスト」が焼き込まれた1枚画像だったため、
     ロゴマークと Instagram アイコンだけを画像として切り出し、×と帯テキストは実テキストで組んでいる
   ========================================================================== */
/* 帯テキストの色。Figma の焼き込み画像から実測した茶（#4E3018）で、既存変数に該当色が無い。
   他セクションでも使うなら _variable.scss に $c_text_brown として移動したい（親への要望） */
.index-instagram {
  position: relative;
  z-index: 0;
  overflow: hidden;
  /* 淡緑シェイプ（Figma Vector 4 / PC y5976〜6823）は Link から Instagram 下端まで続く1枚。
     波形の上辺は Link セクションが描くので、Instagram はその続きのベタ塗りだけを担う
     （ここを透明にすると Link との継ぎ目に白帯が出る） */
  background: #E8F3E5;
  /* 上：Link のバナー下端（PC y6282）から見出しまで 95px
     下：淡緑シェイプ下端（PC y6823）まで 91px（行送りの下アキ分を差し引いて 8.6rem） */
  padding: 4.7rem 0 8.6rem;
}
@media (max-width: 767px) {
  .index-instagram {
    padding: 3.7rem 0 6.3rem;
  }
}

.index-instagram__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 132rem;
  margin: 0 auto;
  padding: 0 2rem;
}
@media (max-width: 767px) {
  .index-instagram__inner {
    padding: 0 1.7rem;
  }
}

/* -- 波線装飾（右下／シェイプ下端に接地。右は画面外へ 160px はみ出す） -------------- */
.index-instagram__wave {
  position: absolute;
  right: -16rem;
  bottom: 0;
  z-index: 0;
  width: 72.9rem;
  height: 48.4rem;
  pointer-events: none;
  animation: index-instagram-wave 16s ease-in-out infinite;
}
@media (max-width: 767px) {
  .index-instagram__wave {
    right: -4.2rem;
    width: 19rem;
    height: 12.6rem;
  }
}

.index-instagram__wave-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

/* コンプ注記「ウネウネと動く」。波線だけをゆっくり動かす（コンテンツは動かさない） */
@keyframes index-instagram-wave {
  0%, 100% {
    transform: translate3d(0, 0, 0) skewY(0deg);
  }
  50% {
    transform: translate3d(-1.4rem, 0.9rem, 0) skewY(-0.7deg);
  }
}
/* ※ prefers-reduced-motion による停止は入れない。
   本案件は指示書で「動きのあるアニメーションを入れる（文字が動いたり、背景が動いたり、
   ループするような感じ）」がデザイン要件として明示されているため、OS の「視差効果を減らす」
   設定に関わらず動かす。OS設定を尊重する形に戻したい場合はここに
   @media (prefers-reduced-motion: reduce) { … animation: none; } を復活させる。 */
/* -- バナー（ロゴ × Instagram アイコン ＋ 帯テキスト） -------------------------- */
.index-instagram__banner {
  display: block;
  width: fit-content;
  margin: 5.6rem auto 0;
  text-decoration: none;
}
@media (max-width: 767px) {
  .index-instagram__banner {
    margin-top: 3.3rem;
  }
}

.index-instagram__row {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 医院ロゴ（マーク＋屋号のロゴタイプ。Figma 実寸 171×89） */
.index-instagram__logo {
  display: block;
  width: 17.1rem;
  height: 8.9rem;
  object-fit: contain;
}
@media (max-width: 767px) {
  .index-instagram__logo {
    width: 10.02rem;
    height: 5.22rem;
  }
}

/* 「×」＝ 実テキスト（Figma では焼き込み画像内にあった） */
.index-instagram__cross {
  margin: 0 4.9rem 0 1.3rem;
  font-family: "Zen Old Mincho", serif;
  font-size: 2rem;
  line-height: 1;
  color: #4E3018;
}
@media (max-width: 767px) {
  .index-instagram__cross {
    margin: 0 2.82rem 0 0.71rem;
    font-size: 1.17rem;
  }
}

.index-instagram__icon {
  display: block;
  width: 7.6rem;
  height: 7.6rem;
}
@media (max-width: 767px) {
  .index-instagram__icon {
    width: 4.46rem;
    height: 4.46rem;
  }
}

/* 帯テキスト＝ 実テキスト（Figma では焼き込み画像内にあった） */
.index-instagram__lead {
  margin-top: 1.4rem;
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  font-size: 2rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-align: center;
  color: #4E3018;
  /* Figma SP 実測は 11.7px / 幅333px（＝ほぼ画面いっぱい）。
     フォントの実レンダリング差で2行に折れないよう字送りだけ詰めている */
}
@media (max-width: 767px) {
  .index-instagram__lead {
    margin-top: 0.75rem;
    font-size: 1.15rem;
    letter-spacing: 0.06em;
  }
}

/* -- Instagram フィード（Smash Balloon Instagram Feed / [instagram-feed feed=1]） ------------
   仮のリンクバナー（.index-instagram__banner 以下）を埋め込みフィードに差し替え。
   ※ scss/object/compornent/project/_index-instagram.scss と同内容を直書き（本番はコンパイルなしで反映） */
.index-instagram__feed {
  width: 80%;
  margin: 5.6rem auto 0;
}
@media (max-width: 767px) {
  .index-instagram__feed {
    width: 100%;
    margin-top: 3.3rem;
  }
}
.index-instagram__feed #sb_instagram {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
}

/* ==========================================================================
   12 Blog / Case（歯科ブログ・症例一覧）
   PC y6850-7700（左右2カラム） ／ SP y6740-7960（Blog→Case の縦積み）
   背景（淡青 $c_blue_pale ＋ ぼかし写真）は親の .index-bokeh ラッパーが敷く。
   ここでは背景色・背景画像を一切指定しない。
   見出しは共通の .sec-head / .sec-title / .sec-title-ja（_component.scss）を使用＝ここでは再定義しない
   ========================================================================== */
.index-post {
  position: relative;
  padding: 4.8rem 0 18.3rem;
}
@media (max-width: 767px) {
  .index-post {
    padding: 4.3rem 0 4rem;
  }
}

/* ---------- 背景のぼかし円（フワフワと動く／背景なのでフェードアップ対象外） ---------- */
.index-post__bokeh {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.index-post__bokeh-item {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0));
  will-change: transform;
  animation: post-float 16s ease-in-out infinite;
}

/* Ellipse 39（PC 49:50 x92 y6755 371×386 ／ SP 98:8069 x0 y6772 275×286） */
.index-post__bokeh-item--01 {
  top: -9.5rem;
  left: 9.2rem;
  width: 37.1rem;
  height: 38.6rem;
}
@media (max-width: 767px) {
  .index-post__bokeh-item--01 {
    top: 3.2rem;
    left: -0.1rem;
    width: 27.5rem;
    height: 28.6rem;
  }
}

/* Ellipse 41（PC 49:52 x1311 y7011 277×317 ／ SP 98:8070 x332 y6743 205×234） */
.index-post__bokeh-item--02 {
  top: 16.1rem;
  left: 131.1rem;
  width: 27.7rem;
  height: 31.7rem;
  animation-duration: 20s;
  animation-delay: -6s;
}
@media (max-width: 767px) {
  .index-post__bokeh-item--02 {
    top: 0.3rem;
    left: 33.2rem;
    width: 20.5rem;
    height: 23.4rem;
  }
}

/* Ellipse 40（PC 49:51 x252 y7070 101×124）※SPカンプには無いので非表示 */
.index-post__bokeh-item--03 {
  top: 22rem;
  left: 25.2rem;
  width: 10.1rem;
  height: 12.4rem;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
  animation-duration: 12s;
  animation-delay: -3s;
}
@media (max-width: 767px) {
  .index-post__bokeh-item--03 {
    display: none;
  }
}

/* Ellipse 42（PC 49:53 x1210 y7236 97×106）※SPカンプには無いので非表示 */
.index-post__bokeh-item--04 {
  top: 38.6rem;
  left: 121rem;
  width: 9.7rem;
  height: 10.6rem;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
  animation-duration: 13s;
  animation-delay: -8s;
}
@media (max-width: 767px) {
  .index-post__bokeh-item--04 {
    display: none;
  }
}

@keyframes post-float {
  0% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(-1.2rem, -2rem, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
/* ---------- レイアウト ---------- */
.index-post__inner {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 9.1rem;
  max-width: 123.1rem;
  margin-inline: auto;
}
@media (max-width: 767px) {
  .index-post__inner {
    display: block;
    max-width: none;
    padding: 0 1rem;
  }
}

.index-post__col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* SPは Blog → Case の縦積み（カード最終行→次の英字見出しが37px） */
@media (max-width: 767px) {
  .index-post__col + .index-post__col {
    margin-top: 3.7rem;
  }
}

.index-post__list {
  display: flex;
  flex-direction: column;
  gap: 1.7rem;
  margin-top: 4.8rem;
}
@media (max-width: 767px) {
  .index-post__list {
    gap: 1.1rem;
    margin-top: 3.1rem;
  }
}

/* ---------- View More（左＝歯科ブログ一覧 /blog-list/ ／ 右＝症例一覧 /case-list/ へ） ----------
   もともとカードの下に大きな余白があったので、そこに置いている（ユーザー指示）。
   ボタンぶんは .index-post の padding-bottom から差し引いて下の余白を保っている。
   見た目は動画セクションの View More（.index-movie__more-link）と揃える。 */
.index-post__more {
  display: flex;
  justify-content: center;
  margin-top: auto;
  padding-top: 4.2rem;
}
@media (max-width: 767px) {
  .index-post__more {
    padding-top: 2.4rem;
  }
}

.index-post__more-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18.5rem;
  height: 4rem;
  border-radius: 0.5rem;
  background: linear-gradient(90deg, #9FD7C1 0%, #4FB58D 100%);
  color: #fff;
  font-family: "Square Peg", cursive;
  font-size: 2rem;
  line-height: 1;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
.index-post__more-link:hover {
  opacity: 0.8;
}

/* ---------- カード（白地・左サムネ146×100＋右テキスト。PC 570×132 / SP 355×132） ---------- */
.index-post__card {
  display: flex;
  align-items: flex-start;
  min-height: 13.2rem;
  padding: 1.6rem 1.6rem 1.6rem 1.3rem;
  border-radius: 0.6rem;
  background: #fff;
  box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.04);
  text-decoration: none;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* _base.scss の `a:hover { opacity:.6 }` が白カード全体を薄くしてしまうので打ち消す */
.index-post__card:hover {
  box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.08);
  transform: translateY(-0.2rem);
  opacity: 1;
}

.index-post__thumb {
  flex-shrink: 0;
  width: 14.6rem;
  height: 10rem;
  margin-right: 1.9rem;
  border-radius: 0.6rem;
  object-fit: cover;
  background: #e5e5e5;
}

.index-post__body {
  flex: 1;
  min-width: 0;
  padding-top: 0.65rem;
}

.index-post__date {
  font-family: "Zen Old Mincho", serif;
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: 0;
  color: #797979;
  white-space: nowrap;
}

.index-post__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-family: "Zen Old Mincho", serif;
  font-size: 2rem;
  line-height: 1.5;
  color: #555;
}

.index-post__excerpt {
  overflow: hidden;
  font-family: "Zen Old Mincho", serif;
  font-size: 1.6rem;
  line-height: 1.5;
  color: #555;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 症例一覧の抜粋は Figma では PC 非表示・SPのみ表示 */
@media (min-width: 768px) {
  .index-post__excerpt--case {
    display: none;
  }
}

/* ==========================================================================
   お知らせ / 歯科ブログ / 症例一覧（CPT news・blog・case）の一覧＋詳細
   ・一覧 archive-news.php / archive-blog.php / archive-case.php
   ・詳細 single-news.php / single-blog.php / single-case.php
   ・カードは template-parts/post-card.php で3種共有（サムネ・日付・タイトル・テキスト）

   レイアウトは症例一覧のカンプ（Figma node 95:5039 ／ リスト 98:6743）に合わせた
   「1件1行・サムネ160×100の下に日付とタイトル・下に薄い区切り線」の縦並び。
   お知らせ・歯科ブログの一覧も同じ体裁にしている（ユーザー指定）。
   ※カンプのフォントは Zen Kaku Gothic New / Shippori Mincho だがサイトで読み込んで
     いないため、サイト標準の Noto Sans JP（日付）／ Zen Old Mincho（タイトル）にしている。
   ※カンプに抜粋テキストは無いが「サムネイルと日付、タイトルとテキストが必要」という
     先のご指定があるため、タイトル下に抜粋を1行だけ残している。
   ========================================================================== */
.post-main {
  background: #fff;
}

/* --------------------------------------------------
   ページ見出し
   → 下層ページ共通FV `.lower-fv`（写真帯＋中央の白文字／_component.scss）に統一したため
     このブロックは使っていない。淡緑帯＋筆記体英字の見出しに戻す場合は復活させる。

.post-head {
  padding: 6.4rem 0 5.6rem;
  background: $c_green_pale;
  text-align: center;

  // SPは .l-header__spacer が 0（トップのMVを固定ヘッダーの下に潜らせる設計）なので、
  // 下層ページはこの見出し帯でヘッダー高さ 5.5rem ぶんを自前で逃がす
  @include sp {
    padding: 8.7rem 0 2.8rem;
  }
}

.post-head__inner {
  max-width: 132rem;
  margin: 0 auto;
  padding: 0 2rem;
}

.post-head__en {
  font-family: $f_script;
  font-size: $size_96;
  font-weight: 400;
  line-height: 1.48;
  color: $c_green;

  @include sp {
    font-size: 4.8rem;
  }
}

.post-head__ja {
  font-family: $f_mincho;
  font-size: $size_20;
  font-weight: 400;
  line-height: 1.48;
  letter-spacing: 0.12em;
  color: $c_text_nav;

  @include sp {
    font-size: $size_16;
  }
}
   -------------------------------------------------- */
/* --------------------------------------------------
   一覧
   -------------------------------------------------- */
.post-archive {
  padding: 8.1rem 0 10rem;
}
@media (max-width: 767px) {
  .post-archive {
    padding: 3.2rem 0 6rem;
  }
}

.post-archive__inner {
  max-width: 116.1rem;
  margin: 0 auto;
  padding: 0 2rem;
}

/* 絞り込みセレクト
   もとは症例一覧のカテゴリー絞り込みに使っていた。症例一覧は左ナビ＋カテゴリー別
   セクション（.case-grid）に変えたので現在は未使用だが、セレクト方式に戻すとき用に
   残す（archive-case.php の末尾に戻し方をコメントで置いてある）。 */
.post-archive__filter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.6rem;
  margin-top: 3.02rem;
}
@media (max-width: 767px) {
  .post-archive__filter {
    margin-top: 2rem;
    gap: 1.2rem;
  }
}

.post-archive__filter-label {
  font-family: "Noto Serif JP", serif;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  color: #AAA8A6;
}
@media (max-width: 767px) {
  .post-archive__filter-label {
    font-size: 1.2rem;
  }
}

.post-archive__select {
  position: relative;
  width: 26rem;
}
@media (max-width: 767px) {
  .post-archive__select {
    flex: 1;
    width: auto;
  }
}

.post-archive__select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1.4rem;
  width: 0;
  height: 0;
  border-left: 0.45rem solid transparent;
  border-right: 0.45rem solid transparent;
  border-top: 0.7rem solid #4FB58D;
  transform: translateY(-50%);
  pointer-events: none;
}

.post-archive__select-input {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  border: 0.1rem solid #4FB58D;
  border-radius: 0.4rem;
  padding: 0.8rem 3.4rem 0.8rem 1.4rem;
  font-family: "Zen Old Mincho", serif;
  font-size: 1.4rem;
  line-height: 1.5;
  color: #333;
  cursor: pointer;
}
@media (max-width: 767px) {
  .post-archive__select-input {
    font-size: 1.2rem;
    padding: 0.8rem 3rem 0.8rem 1.2rem;
  }
}

.post-archive__list {
  margin-top: 3.02rem;
}
@media (max-width: 767px) {
  .post-archive__list {
    margin-top: 2rem;
  }
}

.post-archive__filter + .post-archive__list {
  margin-top: 2rem;
}
@media (max-width: 767px) {
  .post-archive__filter + .post-archive__list {
    margin-top: 1.6rem;
  }
}

.post-archive__empty {
  padding: 6rem 0;
  font-family: "Zen Old Mincho", serif;
  font-size: 1.6rem;
  line-height: 1.8;
  color: #555;
  text-align: center;
}

/* --------------------------------------------------
   症例一覧のカードグリッド（archive-case.php）
   お知らせ・歯科ブログと共有している .post-card を、症例一覧でだけ
   「サムネイル全幅の3カラム」に見せる（親スコープ限定の上書き）。
   -------------------------------------------------- */
.case-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem 3.2rem;
  margin-top: 3.9rem;
}
@media (max-width: 767px) {
  .case-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.4rem 1.6rem;
    margin-top: 2.4rem;
  }
}
.case-grid .post-card {
  padding: 0;
  border-bottom: none;
  border-radius: 0;
}
.case-grid .post-card + .post-card {
  margin-top: 0;
}
.case-grid .post-card__thumb {
  width: 100%;
  height: auto;
  aspect-ratio: 16/10;
  border-radius: 0.4rem;
}
@media (max-width: 767px) {
  .case-grid .post-card__thumb {
    width: 100%;
    height: auto;
  }
}
.case-grid .post-card__body {
  margin-top: 1.2rem;
}
@media (max-width: 767px) {
  .case-grid .post-card__body {
    margin-top: 0.8rem;
  }
}
@media (max-width: 767px) {
  .case-grid .post-card__text {
    display: none;
  }
}

/* --------------------------------------------------
   カード（3種の一覧で共有）
   -------------------------------------------------- */
.post-card {
  display: block;
  padding: 1rem 1rem 1.09rem;
  border-bottom: 0.089rem solid rgba(0, 0, 0, 0.2);
  border-radius: 0.4rem;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
.post-card:hover {
  opacity: 0.75;
}

.post-card + .post-card {
  margin-top: 1rem;
}

.post-card__thumb {
  width: 16rem;
  height: 10rem;
  overflow: hidden;
  background: #E8F3E5;
}
@media (max-width: 767px) {
  .post-card__thumb {
    width: 12.8rem;
    height: 8rem;
  }
}

.post-card__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.post-card__body {
  margin-top: 1.2rem;
}
@media (max-width: 767px) {
  .post-card__body {
    margin-top: 1rem;
  }
}

.post-card__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 1.2rem;
}

.post-card__date {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.8;
  letter-spacing: 0.145em;
  color: #280000;
}

.post-card__labels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.post-card__label {
  padding: 0.1rem 1rem;
  border: 0.1rem solid #4FB58D;
  border-radius: 2rem;
  font-family: "Zen Old Mincho", serif;
  font-size: 1.2rem;
  line-height: 1.5;
  color: #4FB58D;
}

.post-card__title {
  font-family: "Zen Old Mincho", serif;
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.5;
  letter-spacing: 0.114em;
  color: #333;
}

.post-card__text {
  margin-top: 0.5rem;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-family: "Zen Old Mincho", serif;
  font-size: 1.4rem;
  line-height: 1.9;
  color: #555;
}
@media (max-width: 767px) {
  .post-card__text {
    font-size: 1.3rem;
  }
}

/* --------------------------------------------------
   ページャ（template-parts/pager.php）
   paginate_links の出力にはクラスを付けられないので、
   ここだけ子孫セレクタで当てる
   -------------------------------------------------- */
.post-pager {
  margin-top: 6.4rem;
}
@media (max-width: 767px) {
  .post-pager {
    margin-top: 4rem;
  }
}

.post-pager .page-numbers {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.2rem;
  list-style: none;
}

.post-pager .page-numbers li a,
.post-pager .page-numbers li span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 4rem;
  height: 4rem;
  padding: 0 1.2rem;
  border: 0.1rem solid #4FB58D;
  border-radius: 0.4rem;
  font-family: "Zen Old Mincho", serif;
  font-size: 1.6rem;
  line-height: 1;
  color: #4FB58D;
  text-decoration: none;
}

.post-pager .page-numbers li .current {
  background: #4FB58D;
  color: #fff;
}

/* --------------------------------------------------
   詳細（3種で共有）
   -------------------------------------------------- */
.post-single {
  padding: 8rem 0 12rem;
}
@media (max-width: 767px) {
  .post-single {
    padding: 4rem 0 6rem;
  }
}

.post-single__inner {
  max-width: 88rem;
  margin: 0 auto;
  padding: 0 2rem;
}

.post-single__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.8rem 1.2rem;
}

.post-single__date {
  font-family: "Zen Old Mincho", serif;
  font-size: 1.5rem;
  line-height: 1.48;
  color: #797979;
}

.post-single__labels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.post-single__label {
  padding: 0.3rem 1.2rem;
  border: 0.1rem solid #4FB58D;
  border-radius: 2rem;
  font-family: "Zen Old Mincho", serif;
  font-size: 1.2rem;
  line-height: 1.6;
  color: #4FB58D;
}

.post-single__title {
  margin-top: 1.6rem;
  padding-bottom: 2.4rem;
  border-bottom: 0.1rem solid rgba(159, 215, 193, 0.88);
  font-family: "Zen Old Mincho", serif;
  font-size: 3.2rem;
  font-weight: 600;
  line-height: 1.6;
  color: #333;
}
@media (max-width: 767px) {
  .post-single__title {
    font-size: 2.4rem;
    padding-bottom: 1.6rem;
  }
}

.post-single__thumb {
  margin-top: 3.2rem;
  overflow: hidden;
  border-radius: 0.8rem;
}
.post-single__thumb img {
  display: block;
  width: 100%;
  height: auto;
}

/* 本文はエディタ出力でクラスを付けられないため、ここだけ子孫セレクタで当てる */
.post-single__body {
  margin-top: 3.2rem;
  font-family: "Zen Old Mincho", serif;
  font-size: 1.6rem;
  line-height: 1.5;
  color: #333;
}
.post-single__body p {
  margin-bottom: 2.4rem;
}
.post-single__body h2 {
  margin: 4rem 0 1.6rem;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.6;
  color: #4FB58D;
}
@media (max-width: 767px) {
  .post-single__body h2 {
    font-size: 2rem;
  }
}
.post-single__body h3 {
  margin: 3.2rem 0 1.2rem;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.6;
  color: #333;
}
@media (max-width: 767px) {
  .post-single__body h3 {
    font-size: 1.8rem;
  }
}
.post-single__body ul,
.post-single__body ol {
  margin: 0 0 2.4rem 2em;
}
.post-single__body ul li,
.post-single__body ol li {
  margin-bottom: 0.8rem;
  list-style: inherit;
}
.post-single__body ul {
  list-style: disc;
}
.post-single__body ol {
  list-style: decimal;
}
.post-single__body img {
  max-width: 100%;
  height: auto;
  border-radius: 0.8rem;
}
.post-single__body a {
  color: #4FB58D;
  text-decoration: underline;
}
.post-single__body blockquote {
  margin: 0 0 2.4rem;
  padding: 1.6rem 2rem;
  background: #E8F3E5;
  border-radius: 0.4rem;
}
.post-single__body .case-photos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 2.4rem;
  margin-bottom: 3.2rem;
}
@media (max-width: 767px) {
  .post-single__body .case-photos {
    gap: 1.6rem 1.2rem;
  }
}
.post-single__body .case-photo {
  margin: 0;
  display: flex;
  flex-direction: column;
}
.post-single__body .case-photo-single {
  max-width: 52rem;
  margin: 0 0 3.2rem;
}
.post-single__body .case-photo__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.4rem;
}
.post-single__body .case-photo__cap {
  margin-top: auto;
  padding-top: 0.8rem;
  margin-bottom: 0;
  font-size: 1.4rem;
  line-height: 1.5;
  color: #6C6E6E;
  text-align: center;
}
@media (max-width: 767px) {
  .post-single__body .case-photo__cap {
    font-size: 1.2rem;
  }
}
.post-single__body .case-text {
  line-height: 1.8;
}

.post-single__back {
  margin-top: 6.4rem;
  text-align: center;
}
@media (max-width: 767px) {
  .post-single__back {
    margin-top: 4rem;
  }
}

.post-single__back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28rem;
  height: 5.6rem;
  padding: 0 3rem;
  background: linear-gradient(to right, #9FD7C1, #4FB58D);
  border-radius: 0.4rem;
  font-family: "Zen Old Mincho", serif;
  font-size: 1.6rem;
  line-height: 1.48;
  color: #fff;
  text-decoration: none;
}
@media (max-width: 767px) {
  .post-single__back-btn {
    min-width: 24rem;
    height: 5rem;
  }
}

/* ============================================================
   制作事例（CPT works）動画グリッド＋モーダル
   一覧ループの書き方は docs/works.md を参照。
   モーダルHTML: template-parts/works-modal.php ／ 挙動: js/works-modal.js
   ============================================================ */
.works-grid {
  max-width: 128rem;
  margin: 4rem auto 0;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
@media (max-width: 767px) {
  .works-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

.works-item {
  aspect-ratio: 400/280;
  background: #d9d9d9;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* サムネ付き（クリックでモーダル再生） */
.works-item--video {
  position: relative;
  padding: 0;
  border: none;
  overflow: hidden;
  cursor: pointer;
}

.works-item__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.works-item__playmark {
  position: relative;
  z-index: 1;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: 2px solid #fff;
}
@media (max-width: 767px) {
  .works-item__playmark {
    width: 4.4rem;
    height: 4.4rem;
  }
}

.works-item__playmark::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 53%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-top: 1rem solid transparent;
  border-bottom: 1rem solid transparent;
  border-left: 1.6rem solid #fff;
}
@media (max-width: 767px) {
  .works-item__playmark::before {
    border-top-width: 0.7rem;
    border-bottom-width: 0.7rem;
    border-left-width: 1.1rem;
  }
}

.works-item__ph {
  font-family: "Zen Old Mincho", serif;
  font-size: 1.8rem;
  color: #000;
}
@media (max-width: 767px) {
  .works-item__ph {
    font-size: 1.2rem;
  }
}

/* ===== 動画モーダル ===== */
.works-modal {
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.works-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.works-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  cursor: pointer;
}

.works-modal__body {
  position: relative;
  width: min(96rem, 90vw);
}

.works-modal__close {
  position: absolute;
  top: -4.8rem;
  right: 0;
  width: 4rem;
  height: 4rem;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.works-modal__close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3rem;
  height: 2px;
  background: #fff;
}

.works-modal__close span:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}

.works-modal__close span:nth-child(2) {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.works-modal__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.works-modal__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.works-modal__playbtn {
  position: relative;
  z-index: 1;
  width: 9rem;
  height: 9rem;
  padding: 0;
  border: 3px solid #fff;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease;
}
@media (max-width: 767px) {
  .works-modal__playbtn {
    width: 6rem;
    height: 6rem;
  }
}

.works-modal__playbtn:hover {
  background: rgba(174, 141, 71, 0.85);
  border-color: #4FB58D;
}

.works-modal__playbtn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-top: 1.5rem solid transparent;
  border-bottom: 1.5rem solid transparent;
  border-left: 2.4rem solid #fff;
}
@media (max-width: 767px) {
  .works-modal__playbtn::before {
    border-top-width: 1rem;
    border-bottom-width: 1rem;
    border-left-width: 1.6rem;
  }
}

.works-modal__player {
  position: absolute;
  inset: 0;
  display: none;
}

.works-modal__player.is-active {
  display: block;
}

.works-modal__player iframe,
.works-modal__player video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ==========================================================================
   404（Not Found）
   FV は下層共通の `.lower-fv`（_component.scss）を再利用するので、ここには書かない。
   配色・フォントは診療案内ページ（_page-medical.scss）と同じトンマナ:
   明朝＋メインカラーの緑、戻るボタンは緑グラデ。
   ========================================================================== */
.page-404 {
  background: #fff;
}

.not-found {
  padding: 9rem 0 14rem;
}
@media (max-width: 767px) {
  .not-found {
    padding: 4.8rem 0 6rem;
  }
}

.not-found__inner {
  width: 100%;
  max-width: 88rem;
  margin: 0 auto;
  padding: 0 2rem;
  text-align: center;
}

.not-found__code {
  font-family: "Zen Old Mincho", serif;
  font-weight: 600;
  font-size: 9.6rem;
  line-height: 1;
  letter-spacing: 0.1em;
  color: #4FB58D;
}
@media (max-width: 767px) {
  .not-found__code {
    font-size: 5.6rem;
  }
}

.not-found__lead {
  margin-top: 2.8rem;
  font-family: "Zen Old Mincho", serif;
  font-weight: 600;
  font-size: 2.6rem;
  line-height: 1.6;
  letter-spacing: 0.06em;
  color: #555;
}
@media (max-width: 767px) {
  .not-found__lead {
    margin-top: 1.8rem;
    font-size: 2rem;
  }
}

.not-found__text {
  margin-top: 2rem;
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 2;
  color: #333;
}
@media (max-width: 767px) {
  .not-found__text {
    margin-top: 1.4rem;
    font-size: 1.4rem;
  }
}

.not-found__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32rem;
  height: 5.6rem;
  margin-top: 4.8rem;
  padding: 0 3rem;
  background: linear-gradient(to right, #9FD7C1, #4FB58D);
  border-radius: 0.4rem;
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.48;
  letter-spacing: 0.06em;
  color: #fff;
  text-decoration: none;
}
@media (max-width: 767px) {
  .not-found__btn {
    min-width: 24rem;
    height: 5rem;
    margin-top: 3.2rem;
  }
}

.c-breadcrumbs__area {
  width: 100%;
  margin: 3.5rem auto 0;
  font-size: 2rem;
}
@media (max-width: 767px) {
  .c-breadcrumbs__area {
    margin-top: 2rem;
  }
}

.c-breadcrumbs {
  font-size: 2rem;
  display: flex;
  column-gap: 0.5rem;
  align-items: center;
  text-align: left;
  line-height: 1.5;
  letter-spacing: 0.05em;
  flex-wrap: wrap;
  white-space: wrap;
}
@media (max-width: 767px) {
  .c-breadcrumbs {
    font-size: 1.6rem;
    column-gap: 0.3rem;
  }
}

.to-top-area {
  position: fixed;
  bottom: 4rem;
  right: 4rem;
  z-index: 1000;
}
@media (max-width: 767px) {
  .to-top-area {
    display: none;
  }
}

.to-top-button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
}

.to-top-button__image {
  width: 7rem;
  height: 7rem;
}
@media (max-width: 767px) {
  .to-top-button__image {
    width: 3rem;
    height: 3rem;
  }
}

.c-link-btn {
  background: #445D84;
  width: fit-content;
  min-width: 24rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4rem;
  padding: 2rem 3rem;
  text-decoration: none;
}
@media (max-width: 767px) {
  .c-link-btn {
    order: 6;
    grid-column: 1/-1;
    margin: 5rem auto 0;
    position: relative;
    z-index: 1;
    padding: 1rem 2rem;
  }
}

.c-link-btn__text {
  font-size: 2.4rem;
}
@media (max-width: 767px) {
  .c-link-btn__text {
    font-size: 2rem;
    line-height: 1.2;
    text-align: center;
  }
}

.c-link-btn__icon {
  width: 2.8rem;
  height: 2.8rem;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .c-link-btn__icon {
    width: 2rem;
    height: 2rem;
  }
}
.c-link-btn__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.c-utilization-link-area {
  margin-top: 4rem;
  display: flex;
  justify-content: center;
}
@media (max-width: 767px) {
  .c-utilization-link-area {
    margin-top: 0;
  }
}

.c-check-item {
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: flex-start;
  padding-bottom: 2rem;
  border-bottom: 1px dotted #565656;
}
@media (max-width: 767px) {
  .c-check-item {
    padding-bottom: 1rem;
  }
}

.c-check-item__icon {
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .c-check-item__icon {
    width: 2rem;
    height: 2rem;
  }
}

.c-check-item__text {
  font-size: 2rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
@media (max-width: 767px) {
  .c-check-item__text {
    font-size: 1.6rem;
  }
}

.c-outline-flex {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
}
@media (max-width: 767px) {
  .c-outline-flex {
    flex-direction: column-reverse;
    gap: 1rem;
  }
}

.c-outline-bottom {
  margin-top: 2rem;
}

.c-dot-line {
  width: 10rem;
  margin: 0 auto;
}

.c-contents__text {
  font-size: 2.2rem;
  line-height: 1.5;
  margin: 6rem auto;
  inline-size: fit-content;
  margin-inline: auto;
}
@media (max-width: 767px) {
  .c-contents__text {
    font-size: 1.6rem;
    margin: 4rem auto;
  }
}

.c-outline-flex__textarea {
  width: 50%;
  padding-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
@media (max-width: 767px) {
  .c-outline-flex__textarea {
    width: 100%;
    padding-top: 1rem;
  }
}

.c-outline-flex__image {
  width: 45%;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .c-outline-flex__image {
    width: 100%;
  }
}
.c-outline-flex__image img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  object-position: center;
}

.c-list-contents .c-list-contents-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.c-list-contents .c-list-contents-item {
  font-size: 2.2rem;
  line-height: 1.5;
  font-weight: 700;
  position: relative;
  padding-left: 1.2em;
}
@media (max-width: 767px) {
  .c-list-contents .c-list-contents-item {
    font-size: 1.6rem;
  }
}
.c-list-contents .c-list-contents-item::before {
  content: "・";
  position: absolute;
  left: 0;
  top: 0.1em;
}
.c-list-contents .c-list-contents-item + .c-list-contents .c-list-contents-item {
  margin-top: 1rem;
}

.c-link__button--area {
  display: flex;
  align-items: center;
  justify-content: center;
}

.c-link__button--denture {
  color: #fff;
  padding: 3rem 10rem;
  border-radius: 5rem;
  text-decoration: none;
  font-size: 2.2rem;
  font-weight: 700;
  text-align: center;
  display: inline-block;
  margin-top: 4rem;
  letter-spacing: 0.1em;
}
@media (max-width: 767px) {
  .c-link__button--denture {
    padding: 2rem 5rem;
    font-size: 1.6rem;
    margin-top: 2rem;
  }
}

.c-contents-sub-title {
  font-size: 3.2rem;
  font-weight: 700;
  padding-bottom: 2rem;
  position: relative;
}
@media (max-width: 767px) {
  .c-contents-sub-title {
    font-size: 2rem;
    padding-bottom: 1rem;
  }
}
.c-contents-sub-title::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 10%;
}

/* ==========================================================================
   Component: Fee Table (Vertical Label Type)
   ========================================================================== */
.c-fee-table {
  width: 100%;
  border-collapse: collapse;
  border: 0.1rem solid #d9c5a0;
  margin-bottom: 2rem;
  table-layout: fixed;
  /* -----------------------------------------------------------
      Responsive: Mobile
    ----------------------------------------------------------- */
}
.c-fee-table:last-child {
  margin-bottom: 0;
}
.c-fee-table th,
.c-fee-table td {
  padding: 1.5rem 2rem;
  font-size: 1.4rem;
  line-height: 1.5;
  border-bottom: 0.1rem solid #d9c5a0;
  vertical-align: middle;
}
.c-fee-table tr:last-child th,
.c-fee-table tr:last-child td {
  border-bottom: none;
}
.c-fee-table__label {
  width: 20rem;
  background-color: #d9c5a0;
  color: #fff;
  font-weight: bold;
  text-align: center;
  border-bottom: none !important;
}
.c-fee-table__item-name {
  width: 45%;
  background-color: #F5EEE0;
  text-align: center;
  font-weight: normal;
}
.c-fee-table__price {
  width: auto;
  background-color: #F5EEE0;
  text-align: center;
  font-weight: 500;
}
@media (max-width: 768px) {
  .c-fee-table {
    display: block;
  }
  .c-fee-table tbody,
  .c-fee-table tr,
  .c-fee-table th,
  .c-fee-table td {
    display: block;
    width: 100%;
  }
  .c-fee-table__label {
    padding: 1rem;
    border-bottom: 0.1rem solid #fff !important;
  }
  .c-fee-table__item-name {
    background-color: #fdfaf5;
    padding: 1rem;
    border-bottom: none;
  }
  .c-fee-table__price {
    text-align: left;
    padding: 1rem;
    padding-top: 0;
    border-bottom: 0.1rem solid #eee;
  }
}

/* ==========================================================================
   Component: Fee Table V2 (Vertical Label & Grid Type)
   ========================================================================== */
.c-fee-table-v2 {
  width: 100%;
  border-collapse: collapse;
  border: 0.1rem solid #d9c5a0;
  margin-bottom: 2.5rem;
  table-layout: fixed;
  /* -----------------------------------------------------------
    Responsive: Mobile (768px以下)
  ----------------------------------------------------------- */
}
.c-fee-table-v2 th,
.c-fee-table-v2 td {
  padding: 1.5rem 2rem;
  font-size: 1.4rem;
  line-height: 1.6;
  border-bottom: 0.1rem solid #d9c5a0;
  vertical-align: middle;
}
.c-fee-table-v2__label {
  width: 20rem;
  background-color: #d9c5a0;
  color: #fff;
  font-weight: bold;
  text-align: center;
  border-bottom: 0.1rem solid #fff;
}
.c-fee-table-v2__label--single {
  border-bottom: 0.1rem solid #d9c5a0;
}
.c-fee-table-v2__label-img {
  margin-top: 1rem;
  width: 100%;
}
.c-fee-table-v2__label-img img {
  max-width: 13rem;
  height: auto;
  border: 0.2rem solid #fff;
  display: block;
  margin: 0 auto;
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
}
.c-fee-table-v2__item-name {
  width: 28rem;
  background-color: #F5EEE0;
  text-align: center;
  font-weight: normal;
}
.c-fee-table-v2__price {
  width: auto;
  background-color: #F5EEE0;
  text-align: center;
}
@media (max-width: 768px) {
  .c-fee-table-v2 {
    display: block;
  }
  .c-fee-table-v2 tbody,
  .c-fee-table-v2 tr,
  .c-fee-table-v2 th,
  .c-fee-table-v2 td {
    display: block;
    width: 100% !important;
    text-align: center;
  }
  .c-fee-table-v2__label {
    padding: 1.5rem;
    border-bottom: 0.1rem solid #fff !important;
  }
  .c-fee-table-v2__label--single {
    border-bottom: 0.1rem solid #d9c5a0 !important;
  }
  .c-fee-table-v2__item-name {
    padding: 0.8rem;
    background-color: #fdfaf5;
    font-weight: bold;
    border-bottom: none;
  }
  .c-fee-table-v2__price {
    padding: 1rem 2rem 2rem;
    border-bottom: 0.1rem solid #d9c5a0;
  }
}

.c-media-block {
  background: #fff;
  padding: 2rem 1rem;
}

.c-media-block__title-area {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #565656;
}

.c-media-block__title--number {
  background: linear-gradient(135deg, #BBA676 50%, #CDB98B 50%);
  width: 6rem;
  height: 6rem;
  font-size: 4.2rem;
  line-height: 1;
  color: #fff;
  padding-top: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .c-media-block__title--number {
    width: 4rem;
    height: 4rem;
    font-size: 2.4rem;
    padding-top: 0.3rem;
  }
}

.c-media-block__title--text {
  font-size: 3.2rem;
}
@media (max-width: 767px) {
  .c-media-block__title--text {
    font-size: 2.4rem;
  }
}

.c-media-block__content-area {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  margin-top: 4rem;
}
@media (max-width: 767px) {
  .c-media-block__content-area {
    margin-top: 2rem;
    flex-direction: column;
    gap: 1rem;
  }
}

.c-media-block__content--image {
  width: 30rem;
  height: 20rem;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .c-media-block__content--image {
    width: 100%;
    height: auto;
  }
}

.c-media-block__content--text {
  font-size: 2rem;
  line-height: 2;
}
.c-media-block__content--text p {
  font-size: 2rem;
  line-height: 2;
}
@media (max-width: 767px) {
  .c-media-block__content--text p {
    font-size: 1.6rem;
  }
}
@media (max-width: 767px) {
  .c-media-block__content--text {
    font-size: 1.6rem;
  }
}

.c-media-block__content--images {
  display: flex;
  gap: 2rem;
  margin-top: 2rem;
}
@media (max-width: 767px) {
  .c-media-block__content--images {
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
  }
}

.c-contents-block__items {
  display: flex;
  flex-direction: column;
  gap: 6rem;
}

.c-contents-block__media {
  background: #F5EEE0;
  box-shadow: 6px 6px 20px 0 rgba(0, 0, 0, 0.2);
  padding: 4rem 8rem;
}
@media (max-width: 767px) {
  .c-contents-block__media {
    padding: 2rem;
  }
}

.c-contents-block__media--flex {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
}
@media (max-width: 767px) {
  .c-contents-block__media--flex {
    flex-direction: column;
    gap: 1rem;
  }
}

.c-contents-block__media--image {
  width: 30rem;
  height: 20rem;
  flex-shrink: 0;
  margin-top: 4rem;
}
@media (max-width: 767px) {
  .c-contents-block__media--image {
    width: 100%;
    height: auto;
    margin-top: 2rem;
  }
}

.c-contents-block-area {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
@media (max-width: 767px) {
  .c-contents-block-area {
    gap: 2rem;
  }
}

.c-contents-block {
  background: #F5EEE0;
  box-shadow: 6px 6px 20px 0 rgba(0, 0, 0, 0.2);
  padding: 4rem 8rem;
}
@media (max-width: 767px) {
  .c-contents-block {
    padding: 2rem;
  }
}

.c-contents-block__title {
  font-size: 3.2rem;
  line-height: 1.56;
  position: relative;
  padding-left: 8rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid #565656;
}
@media (max-width: 767px) {
  .c-contents-block__title {
    font-size: 2.4rem;
    padding-left: 4rem;
    padding-bottom: 1rem;
    line-height: 1.25;
  }
}
.c-contents-block__title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 5rem;
  height: 5rem;
  aspect-ratio: 1/1;
  background: linear-gradient(135deg, #455E84 50%, #7E8DA4 50%);
}
@media (max-width: 767px) {
  .c-contents-block__title::before {
    width: 3rem;
    height: 3rem;
  }
}
@media (max-width: 767px) {
  .c-contents-block__title {
    padding-left: 4rem;
    padding-bottom: 1rem;
  }
}

.c-contents-block__text {
  margin-top: 4rem;
  font-size: 2rem;
  line-height: 2;
}
@media (max-width: 767px) {
  .c-contents-block__text {
    margin-top: 2rem;
    font-size: 1.6rem;
    line-height: 1.8;
  }
}

.c-flow-contents {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  background: #fff;
  padding: 4rem 8rem;
  border: 1rem solid #9ea5b0;
  margin-top: 6rem;
}
@media (max-width: 767px) {
  .c-flow-contents {
    padding: 2rem;
    border: none;
    border: 0.2rem solid #9ea5b0;
    gap: 2rem;
    margin-top: 2rem;
  }
}

/* ==========================================================================
   大神宮デンタルクリニック：セクション共通見出し
   英字（Square Peg）＋ 和文（明朝）の2段組み。TOP全セクションで使用
   ========================================================================== */
.sec-head {
  text-align: center;
}

.sec-title {
  font-family: "Square Peg", cursive;
  font-size: 9.6rem;
  line-height: 1.48;
  color: #4FB58D;
  font-weight: 400;
}
@media (max-width: 767px) {
  .sec-title {
    font-size: 4.8rem;
  }
}

.sec-title-ja {
  font-family: "Zen Old Mincho", serif;
  font-size: 2rem;
  line-height: 1.5;
  letter-spacing: 0.12em;
  color: #333;
}
@media (max-width: 767px) {
  .sec-title-ja {
    font-size: 2rem;
  }
}

/* 「view more ──→」形式のテキストボタン（初診バナー等）
   Figma 7:133 実測: Zen Old Mincho Regular 20px（$f_script ではない） */
.c-viewmore {
  display: inline-flex;
  align-items: center;
  gap: 1.2rem;
  font-family: "Zen Old Mincho", serif;
  font-size: 2rem;
  color: #fff;
  text-decoration: none;
  line-height: 1;
}
@media (max-width: 767px) {
  .c-viewmore {
    font-size: 1.6rem;
    gap: 0.8rem;
  }
}

/* 矢印つきライン：先端は必ず線の「上」に跳ねる
   Figma 9:260 実測: 線 56.5px / 矢先 長さ7.4px・約48度
   ※ rotate は正の値が「上へ跳ねる」向き（transform-origin: right bottom）。
     符号を逆にすると先端が下に垂れる＝NG（CLAUDE.md） */
.c-viewmore__line {
  position: relative;
  display: block;
  width: 5.65rem;
  height: 0.1rem;
  background: currentColor;
}
@media (max-width: 767px) {
  .c-viewmore__line {
    width: 2.61rem;
  }
}
.c-viewmore__line::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 0.75rem;
  height: 0.1rem;
  background: currentColor;
  transform-origin: right bottom;
  transform: rotate(48deg);
}

/* ==========================================================================
   TOP: 複数セクションを覆う広域背景（ぼかし光）
   Figma の pixta_122672253_M（1440×1869 等）を3箇所で使い回している背景。
   セクション単位ではなく「セクション群」を包むラッパーに敷く。
   コンプ注記「光が」スクロールに応じて動く → js/index-bokeh.js で緩やかにパララックスさせる。
   ========================================================================== */
.index-bokeh {
  position: relative;
  z-index: 0;
  background: #E8F8FC;
  overflow: hidden;
}

/* 背景レイヤー本体。コンテンツより背面に置き、これだけを動かす（コンテンツは動かさない）
   Figma はこの写真を白地に薄く重ねている（コンプの純背景帯の実測 mean=240〜247 / 素材は mean=226
   → 実効不透明度 約0.35）。ベタで敷くと濃すぎるので opacity で合わせる。
   background-size は cover ではなく 100% 100%（＝ラッパー高に合わせて伸縮）。
   cover だとセクション群の高さ差でズーム率が変わり、素材の濃い部分が出てしまう。 */
.index-bokeh__layer {
  position: absolute;
  inset: -6% 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.35;
  background-image: url("../img/top/bg-bokeh.webp");
  background-size: 100% 100%;
  background-position: center center;
  background-repeat: no-repeat;
  will-change: transform;
}

/* 上下の境目をなじませる（隣接セクションの淡緑・白へ自然に繋ぐ） */
.index-bokeh__layer::before,
.index-bokeh__layer::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 8rem;
}

.index-bokeh__layer::before {
  top: 0;
  background: linear-gradient(to bottom, #E8F8FC, rgba(232, 248, 252, 0));
}

.index-bokeh__layer::after {
  bottom: 0;
  background: linear-gradient(to top, #E8F8FC, rgba(232, 248, 252, 0));
}

/* --------------------------------------------------
   金の粒子（Figma 2018:1932 の粒画像＝951×464px の帯に89粒。これが背景エリアに5箇所）
   実測: 10px超の大粒 13／6〜9px 37／3〜5px 39 ・ 色 #DEBB7A / #E6CA8E / #EAD6B1
   span 1つ＝帯の1/3（21粒を box-shadow で展開）。3つの span で1帯（63粒）を作り、
   Figma と同じ5箇所（帯の原点＝画像の配置座標を%換算）に置く＝計315粒。
   粒座標は粒画像の実測 centroid（px÷10）。単位は em にして span の font-size で
   一括スケール（PC 1rem＝原寸／SP 0.4rem＝約40%）。
   :nth-child ごとに周期・位相（負の delay）・逆再生を散らしてランダムに漂わせる。
   -------------------------------------------------- */
.index-bokeh__particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.index-bokeh__particle {
  position: absolute;
  font-size: 1rem;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background: #DEBB7A;
  animation: bokeh-particle-drift 14s ease-in-out infinite;
  will-change: transform, opacity;
  /* 帯の形は3パターンを循環（span本体＋20粒。第4値 spread で粒径 0.2〜1.3em を散らす） */
  /* 帯の配置（Figma Frame 48 の粒画像5枚の座標を、背景エリア 1440×2780 の%に換算）
     3つ続きの span で1帯。負の left は Figma どおり左へはみ出させて切る（overflow:hidden） */
}
@media (max-width: 767px) {
  .index-bokeh__particle {
    font-size: 0.4rem;
  }
}
.index-bokeh__particle:nth-child(3n+1) {
  box-shadow: 33.7em 15.5em 0 0.35em #DEBB7A, 20.8em 21.2em 0 0.35em #E6CA8E, 9.1em 35.6em 0 0.3em #DEBB7A, 55.1em 16.1em 0 0.2em #EAD6B1, 60.9em 30.1em 0 0.15em #DEBB7A, 17.5em 14.8em 0 0.1em #E6CA8E, 64.1em 19.9em 0 0.1em #DEBB7A, 43.7em 29.2em 0 0 #EAD6B1, 61.7em 13.3em 0 0 #DEBB7A, 12.2em 29.8em 0 0 #E6CA8E, 46.3em 6.3em 0 0 #DEBB7A, 36.9em 5.9em 0 -0.05em #EAD6B1, 52.1em 15.1em 0 -0.05em #DEBB7A, 73.9em 18.4em 0 -0.05em #E6CA8E, 90.6em 17.9em 0 -0.1em #DEBB7A, 27.9em 18.4em 0 -0.1em #EAD6B1, 6.2em 24.6em 0 -0.15em #DEBB7A, 41.2em 19.8em 0 -0.15em #E6CA8E, 68.3em 25.2em 0 -0.15em #DEBB7A, 81.5em 21.6em 0 -0.2em #EAD6B1;
}
.index-bokeh__particle:nth-child(3n+2) {
  box-shadow: 24.6em 27.9em 0 0.35em #DEBB7A, 50.6em 32.6em 0 0.3em #E6CA8E, 30.1em 23.1em 0 0.25em #DEBB7A, 51.7em 30.1em 0 0.25em #EAD6B1, 2.8em 39.5em 0 0.15em #DEBB7A, 9.7em 31.2em 0 0.15em #E6CA8E, 74em 20.4em 0 0.1em #DEBB7A, 88.2em 16.8em 0 0.1em #EAD6B1, 19.9em 31em 0 0.1em #DEBB7A, 58.5em 23.1em 0 0 #E6CA8E, 61.6em 28em 0 0 #DEBB7A, 52.4em 31.4em 0 -0.05em #EAD6B1, 31em 24.3em 0 -0.05em #DEBB7A, 57.9em 6.4em 0 -0.05em #E6CA8E, 85.2em 19.2em 0 -0.1em #DEBB7A, 13.4em 29.8em 0 -0.1em #EAD6B1, 38.6em 33.8em 0 -0.15em #DEBB7A, 72.1em 31em 0 -0.15em #E6CA8E, 93.4em 24em 0 -0.15em #DEBB7A, 48em 22.4em 0 -0.2em #EAD6B1;
}
.index-bokeh__particle:nth-child(3n) {
  box-shadow: 14.2em 22em 0 0.3em #DEBB7A, 24.7em 22em 0 0.25em #E6CA8E, 50.8em 31.4em 0 0.2em #DEBB7A, 94.5em 18em 0 0.1em #EAD6B1, 19.9em 29.8em 0 0.1em #DEBB7A, 52.7em 27.5em 0 0 #E6CA8E, 63.9em 8.9em 0 0 #DEBB7A, 79.4em 14.6em 0 0 #EAD6B1, 8.4em 18.9em 0 -0.05em #DEBB7A, 35.4em 26.7em 0 -0.05em #E6CA8E, 59.2em 33.5em 0 -0.05em #DEBB7A, 70.7em 22.8em 0 -0.1em #EAD6B1, 87.9em 26.3em 0 -0.1em #DEBB7A, 5em 30.6em 0 -0.1em #E6CA8E, 28.8em 31.9em 0 -0.15em #DEBB7A, 44.9em 12.4em 0 -0.15em #EAD6B1, 66em 15.7em 0 -0.15em #DEBB7A, 76.9em 27.7em 0 -0.2em #E6CA8E, 91.1em 20.5em 0 -0.2em #DEBB7A, 22.4em 10.6em 0 -0.2em #EAD6B1;
}
.index-bokeh__particle:nth-child(1) {
  top: 8.5%;
  left: 66%;
  animation-duration: 12s;
  animation-delay: -3s;
}
.index-bokeh__particle:nth-child(2) {
  top: 9%;
  left: 67%;
  animation-duration: 15s;
  animation-delay: -9s;
  animation-direction: reverse;
}
.index-bokeh__particle:nth-child(3) {
  top: 8%;
  left: 65%;
  animation-duration: 10s;
  animation-delay: -5s;
}
.index-bokeh__particle:nth-child(4) {
  top: 11.5%;
  left: -29%;
  animation-duration: 17s;
  animation-delay: -1s;
}
.index-bokeh__particle:nth-child(5) {
  top: 12%;
  left: -28%;
  animation-duration: 13s;
  animation-delay: -7s;
  animation-direction: reverse;
}
.index-bokeh__particle:nth-child(6) {
  top: 11%;
  left: -30%;
  animation-duration: 16s;
  animation-delay: -11s;
}
.index-bokeh__particle:nth-child(7) {
  top: 35%;
  left: 59%;
  animation-duration: 11s;
  animation-delay: -2s;
}
.index-bokeh__particle:nth-child(8) {
  top: 35.5%;
  left: 60%;
  animation-duration: 18s;
  animation-delay: -6s;
  animation-direction: reverse;
}
.index-bokeh__particle:nth-child(9) {
  top: 34.5%;
  left: 58%;
  animation-duration: 12s;
  animation-delay: -10s;
}
.index-bokeh__particle:nth-child(10) {
  top: 71.5%;
  left: 66%;
  animation-duration: 15s;
  animation-delay: -4s;
}
.index-bokeh__particle:nth-child(11) {
  top: 72%;
  left: 67%;
  animation-duration: 10s;
  animation-delay: -8s;
  animation-direction: reverse;
}
.index-bokeh__particle:nth-child(12) {
  top: 71%;
  left: 65%;
  animation-duration: 17s;
  animation-delay: -13s;
}
.index-bokeh__particle:nth-child(13) {
  top: 74%;
  left: -29%;
  animation-duration: 13s;
  animation-delay: -5s;
}
.index-bokeh__particle:nth-child(14) {
  top: 74.5%;
  left: -28%;
  animation-duration: 16s;
  animation-delay: -12s;
  animation-direction: reverse;
}
.index-bokeh__particle:nth-child(15) {
  top: 73.5%;
  left: -30%;
  animation-duration: 14s;
  animation-delay: -7s;
}

/* ゆっくり漂いながら明滅（キラキラ感は opacity の揺らぎで出す） */
@keyframes bokeh-particle-drift {
  0%, 100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  30% {
    transform: translate3d(1.2rem, -2.4rem, 0);
    opacity: 0.5;
  }
  55% {
    transform: translate3d(-0.8rem, -4.2rem, 0);
    opacity: 0.95;
  }
  80% {
    transform: translate3d(-1.8rem, -1.6rem, 0);
    opacity: 0.45;
  }
}
/* ※ prefers-reduced-motion での停止は入れない（指示書のアニメーション要件を優先。
   OS設定を尊重する場合はここで animation: none に戻す） */
/* ==========================================================================
   下層ページ共通FV（写真帯＋中央の白タイトル＋AIチャットタブ）
   Figma: node 76:745（帯 1440×303・y132＝ヘッダー直下）／ 76:774（タイトル）／ 76:1081（タブ）
   ・写真には Figma の重ねグレー rgba(183,183,183,0.31) を焼き込んだ状態で書き出している
     （画像を差し替えるときは同じ調子に合わせる／CSS側でオーバーレイは掛けていない）
   ・各 page-*.php に直書きして使う（テンプレ化しない＝CLAUDE.md 方針）。
     変えるのは背景画像とタイトル文字だけ。
   ========================================================================== */
.lower-fv {
  position: relative;
  width: 100%;
  height: 30.3rem;
  overflow: hidden;
}
@media (max-width: 767px) {
  .lower-fv {
    height: 18rem;
    margin-top: 5.5rem;
  }
}

.lower-fv__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.lower-fv__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.lower-fv__title {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-family: "Zen Old Mincho", serif;
  font-weight: 600;
  font-size: 4.8rem;
  line-height: 2;
  color: #fff;
  text-align: center;
  text-shadow: 0 0 0.6rem rgba(0, 0, 0, 0.67);
}
@media (max-width: 767px) {
  .lower-fv__title {
    font-size: 2.8rem;
  }
}

/* 右端のAIチャット縦タブ（帯の下端に接地。トップの .index-mv__chat と同じ見た目） */
.lower-fv__chat {
  position: fixed;
  right: 0;
  bottom: 9rem;
  z-index: 9970;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.8rem;
  height: 22rem;
  background: rgba(11, 104, 68, 0.7);
  transition: background 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}
@media (max-width: 767px) {
  .lower-fv__chat {
    bottom: 12rem;
    width: 4rem;
    height: 14rem;
  }
}
@media (max-width: 767px) {
  .lower-fv__chat.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}
.lower-fv__chat:hover {
  background: rgba(11, 104, 68, 0.88);
}

.lower-fv__chat-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  font-size: 2rem;
  line-height: 1;
  color: #fff;
}
@media (max-width: 767px) {
  .lower-fv__chat-text {
    font-size: 1.3rem;
  }
}

/* ==========================================================================
   下層ページ共通の見出し2種（サイドバーの無いページ用）
   診療案内ページの `.medical-subhead` / `.medical-question` と同じ見た目だが、
   あちらは診療案内の縦リズムに合わせた margin を持っているので、
   ここでは margin を持たない素の見出しとして切り出している（余白は各ページ側で付ける）。
   Figma: 大見出し 93:1418（24px Bold＋下罫線）／ 小見出し 93:1671（21.75px 緑＋グラデ角丸四角）
   ========================================================================== */
.lower-title {
  padding: 0 1rem 0.96rem 5rem;
  border-bottom: 0.16rem solid #E0E0E0;
  font-family: "Zen Old Mincho", serif;
  font-weight: 700;
  font-size: 2.4rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: #333;
}
@media (max-width: 767px) {
  .lower-title {
    padding: 0 0 0.8rem 1.6rem;
    font-size: 1.8rem;
  }
}

.lower-title--regular {
  font-weight: 400;
}

.lower-title--icon {
  position: relative;
}
@media (max-width: 767px) {
  .lower-title--icon {
    padding-left: 2.5rem;
  }
}

.lower-title--icon::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 0.34rem;
  width: 2.7rem;
  height: 3.2rem;
  background: url("../img/common/icon-tooth.webp") no-repeat center center/contain;
}
@media (max-width: 767px) {
  .lower-title--icon::before {
    left: 0;
    top: 0.4rem;
    width: 1.8rem;
    height: 2.1rem;
  }
}

.lower-subtitle {
  position: relative;
  padding-left: 3.2rem;
  font-family: "Zen Old Mincho", serif;
  font-weight: 400;
  font-size: 2.175rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: #1F764C;
}
@media (max-width: 767px) {
  .lower-subtitle {
    padding-left: 2.6rem;
    font-size: 1.8rem;
  }
}
.lower-subtitle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6rem;
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  background: linear-gradient(to right, #9bbbac, #619a81);
}
@media (max-width: 767px) {
  .lower-subtitle::before {
    top: 0.5rem;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 0.4rem;
  }
}

/* 淡緑の箱に入った「見出し＋点線区切りリスト」（経歴・所属学会・プロフィール等）
   Figma: 93:1670（bg #EEF6F2・padding 30・リスト項目は下に点線） */
.lower-listbox {
  padding: 3rem;
  background: #EEF6F2;
}
@media (max-width: 767px) {
  .lower-listbox {
    padding: 2rem 1.6rem;
  }
}

.lower-listbox__list {
  margin-top: 1.63rem;
}
@media (max-width: 767px) {
  .lower-listbox__list {
    margin-top: 1.2rem;
  }
}

.lower-listbox__item {
  display: flex;
  padding: 0.5rem 0.5rem 0.58rem;
  border-bottom: 0.08rem dashed #E0E0E0;
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 2;
  color: #333;
}
@media (max-width: 767px) {
  .lower-listbox__item {
    flex-direction: column;
    font-size: 1.4rem;
  }
}

.lower-listbox__year {
  flex-shrink: 0;
  width: 15rem;
}
@media (max-width: 767px) {
  .lower-listbox__year {
    width: auto;
    font-weight: 700;
  }
}

.lower-listbox__body {
  flex: 1;
  min-width: 0;
}

.lower-listbox__label {
  flex-shrink: 0;
  width: 15rem;
  font-weight: 700;
}
@media (max-width: 767px) {
  .lower-listbox__label {
    width: auto;
  }
}

/* ==========================================================================
   WEB予約ボタン（本文中に置くタイプ）
   ヘッダーの `.l-header__btn-web` と同じ見た目（154×54・緑地＋淡緑の枠＋右下の斜め矢印）。
   ヘッダー用はレイヤー（l-*）側にあるので、本文で使う用にここへ切り出している。
   Figma: 初めての方へ 95:5378
   ========================================================================== */
.reserve-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: 15.4rem;
  height: 5.4rem;
  padding-left: 1.1rem;
  background: #4FB58D;
  border: 0.2rem solid rgba(159, 215, 193, 0.88);
  border-radius: 0.2rem;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
.reserve-btn:hover {
  opacity: 0.85;
}

.reserve-btn__icon {
  width: 1.7rem;
  height: auto;
  margin-right: 0.8rem;
}

.reserve-btn__label {
  font-family: "Zen Old Mincho", serif;
  font-weight: 500;
  font-size: 2rem;
  line-height: 1.15;
  letter-spacing: 0.12rem;
  color: #fff;
}

.reserve-btn__arrow {
  position: absolute;
  right: 0.68rem;
  bottom: 0.78rem;
  width: 0.74rem;
  height: auto;
  transform: rotate(135deg);
}

/*# sourceMappingURL=style.css.map */