@charset "UTF-8";
/* ==========================================================
   pages.css — サブページ共通
   （事例記事 / 一覧 / お知らせ / 会社概要 / プライバシー / お問い合わせ）
   LPの base.css（トークン・.btn・.sec-head・.ph）を前提に読み込む
   ========================================================== */

.page {
  background: var(--bg-tint);
  padding: 36px 0 96px;
}

/* ---------- パンくず ---------- */
.crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding-bottom: 28px;
  font-size: 13px;
  color: var(--gray);
  font-feature-settings: "palt" 1;
}
.crumb a { color: var(--asagi); font-weight: 700; }
.crumb a:hover { text-decoration: underline; }
.crumb__sep { color: #9CBAC4; }
.crumb__now {
  color: var(--ink);
  max-width: 56ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- 一覧ページの見出し ---------- */
.page-head { text-align: center; padding: 20px 0 40px; }
.page-head__label {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .04em;
  color: var(--asagi);
}
.page-head__title {
  margin-top: 4px;
  font-size: 38px;
  font-weight: 700;
  color: var(--ink);
  font-feature-settings: "palt" 1;
}
.page-head__title .em { color: var(--asagi); }
.page-head__lead {
  margin-top: 16px;
  font-size: 17px;
  line-height: 1.9;
  color: var(--ink);
  font-feature-settings: "palt" 1;
}

/* ==========================================================
   記事（インタビュー形式）
   ========================================================== */
.article {
  max-width: 880px;
  margin-inline: auto;
  background: var(--white);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  padding: 56px 72px 64px;
}
.article__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.article__cat {
  display: inline-block;
  border: 2px solid var(--asagi);
  border-radius: 30px;
  padding: 5px 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--asagi);
}
.article__date {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 14px;
  color: var(--gray);
}
.article__title {
  margin-top: 24px;
  font-size: 32px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--ink-strong);
  font-feature-settings: "palt" 1;
  text-wrap: pretty;
}
.article__byline {
  margin-top: 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--asagi);
  font-feature-settings: "palt" 1;
}

/* メインビジュアル + 医院概要 */
.article__hero {
  margin-top: 32px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-tint);
}
.article__hero > img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.article__hero > .ph { border-radius: 0; border: none; aspect-ratio: 16 / 10; }
.clinic { padding: 28px 32px 30px; }
.clinic__name { font-size: 18px; font-weight: 700; color: var(--ink-strong); }
.clinic__note { margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--asagi); }
.clinic__dl {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 7.5em 1fr;
  gap: 6px 16px;
  font-size: 14.5px;
  line-height: 1.8;
  font-feature-settings: "palt" 1;
}
.clinic__dl dt { font-weight: 700; color: var(--asagi); }
.clinic__dl dd { color: var(--ink); }

/* 本文 */
.article__body { margin-top: 40px; font-size: 16.5px; line-height: 1.9; font-feature-settings: "palt" 1; }
.article__body > p { margin: 28px 0; }

.lead {
  background: var(--bg-tint);
  border-radius: 12px;
  padding: 26px 30px;
  font-size: 15.5px;
  line-height: 1.9;
}
.lead p + p { margin-top: 16px; }
.lead__credit { margin-top: 14px; font-size: 13px; color: var(--gray); text-align: right; }

.article__body h2 {
  position: relative;
  margin: 64px 0 28px;
  padding: 6px 0 16px 22px;
  border-bottom: 2px solid var(--line);
  font-size: 24px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--ink-strong);
  text-wrap: pretty;
}
.article__body h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 22px;
  width: 6px;
  border-radius: 3px;
  background: var(--asagi);
}
.article__body h3 {
  margin: 56px 0 24px;
  background: var(--bg-tint);
  border-radius: 10px;
  padding: 18px 24px;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-strong);
}

/* マーカー（強調） */
.mark {
  background: linear-gradient(transparent 58%, #BFE9F1 58%);
  font-weight: 700;
}

/* 吹き出し: --q 聞き手（右・グレー） / --a 話し手（左・浅葱） */
.balloon {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 22px 0;
}
.balloon__pic { flex: 0 0 64px; text-align: center; }
.balloon__face {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--bg-tint);
  border: 2px solid var(--white);
  box-shadow: 0 2px 8px rgba(0, 30, 40, .10);
  overflow: hidden;
  font-size: 11px;
  color: var(--gray);
  text-align: center;
  line-height: 1.3;
}
.balloon__face img { width: 100%; height: 100%; object-fit: cover; }
.balloon__face--mitoki {
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .02em;
  color: var(--asagi);
}
.balloon__name {
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}
.balloon__text {
  position: relative;
  flex: 1 1 auto;
  padding: 20px 24px;
  border-radius: 14px;
  font-size: 16px;
  line-height: 1.85;
  color: var(--ink);
}
.balloon__text::before {
  content: "";
  position: absolute;
  top: 24px;
  width: 0;
  height: 0;
  border: 10px solid transparent;
}
.balloon--a { padding-right: 72px; }
.balloon--a .balloon__text { background: var(--bg-tint); }
.balloon--a .balloon__text::before { left: -19px; border-right-color: var(--bg-tint); }
.balloon--q { flex-direction: row-reverse; padding-left: 72px; }
.balloon--q .balloon__text { background: #F3F5F7; }
.balloon--q .balloon__text::before { right: -19px; border-left-color: #F3F5F7; }

/* 編集部の地の文 */
.note {
  position: relative;
  margin: 36px 0;
  padding: 24px 26px 22px;
  background: #F7FAFB;
  border-left: 4px solid var(--asagi-pale);
  border-radius: 0 10px 10px 0;
  font-size: 15px;
  line-height: 1.9;
  color: var(--ink);
}
.note::before {
  content: "編集部";
  position: absolute;
  top: -12px;
  left: 14px;
  font-size: 11px;
  font-weight: 700;
  color: var(--white);
  background: var(--asagi);
  border-radius: 20px;
  padding: 2px 10px;
}
.note p + p { margin-top: 12px; }

/* キャプション付き画像 */
.figure {
  margin: 36px 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-tint);
}
.figure > img { display: block; width: 100%; }
.figure > .ph { border-radius: 0; border: none; aspect-ratio: 16 / 9; }
.figure__cap { padding: 16px 22px 0; font-size: 14px; line-height: 1.7; color: var(--ink); }
.figure__cap:last-child { padding-bottom: 16px; }
.figure__note { padding: 6px 22px 14px; font-size: 12px; line-height: 1.6; color: var(--gray); } /* デモ環境の注意書き */

/* まとめ */
.summary {
  margin: 36px 0;
  border: 2px solid var(--asagi-pale);
  border-radius: 12px;
  padding: 24px 28px;
}
.summary ol { counter-reset: s; list-style: none; display: grid; gap: 12px; }
.summary ol li {
  position: relative;
  padding-left: 40px;
  font-size: 16px;
  line-height: 1.8;
  font-weight: 500;
}
.summary ol li::before {
  counter-increment: s;
  content: counter(s, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .15em;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--asagi);
  color: var(--white);
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 13px;
}

/* 記事内CTA */
.art-cta {
  margin-top: 56px;
  background: var(--grad);
  border-radius: 14px;
  padding: 40px 36px;
  text-align: center;
  color: var(--white);
}
.art-cta__title { font-size: 22px; line-height: 1.6; font-weight: 700; }
.art-cta__text { margin-top: 10px; font-size: 15px; line-height: 1.9; }
.art-cta .btn { margin-top: 22px; background: var(--white); color: var(--asagi); border-color: var(--white); }
.art-cta .btn:hover { background: var(--bg-tint); border-color: var(--bg-tint); }
.art-cta__note { margin-top: 12px; font-size: 12.5px; opacity: .9; }

/* タグ / シェア / 著者 */
.article__tags { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 8px; }
.article__tag {
  font-size: 13px;
  font-weight: 700;
  color: var(--asagi);
  background: var(--bg-tint);
  border-radius: 20px;
  padding: 5px 14px;
}
.share { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.share__label {
  margin-right: 4px;
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--gray);
}
.share__btn {
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
  background: var(--ink-strong);
  border-radius: 6px;
  padding: 7px 16px;
  transition: opacity .2s;
}
.share__btn:hover { opacity: .85; }
.share__btn--x { background: #000; }
.share__btn--fb { background: #1877F2; }
.share__btn--line { background: #06C755; }
.author {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 18px;
}
.author__mark {
  flex: 0 0 60px;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--bg-tint);
}
.author__mark img { width: 62%; height: auto; }
.author__label { font-size: 12.5px; font-weight: 700; color: var(--gray); }
.author__name { margin-top: 2px; font-size: 16px; font-weight: 700; color: var(--ink-strong); }
.author__text { margin-top: 4px; font-size: 14px; line-height: 1.8; color: var(--ink); }

.article-nav { max-width: 880px; margin: 32px auto 0; display: flex; justify-content: center; }

/* ==========================================================
   一覧カード（事例 / お役立ち情報）
   ========================================================== */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  color: inherit;
  transition: transform .25s, box-shadow .25s;
}
a.card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0, 30, 40, .12); } /* リンクのカードだけ浮く */
.card__media {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  background: var(--bg-tint);
  overflow: hidden;
}
.card__media > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card__media > img.card__logo { width: 58%; height: auto; object-fit: contain; }
/* 白ブロック仕様(752x320)のロゴは白地のメディアに全幅で収める */
.card__media--logo { background: var(--white); border-bottom: 1px solid var(--line); }
.card__media--logo > img.card__logo { width: 100%; height: 100%; object-fit: contain; }
.card__media > .ph { width: 100%; height: 100%; border-radius: 0; border: none; }
.card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 24px 24px;
}
.card__meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--gray); font-family: var(--font-en); font-weight: 700; }
.card__cat {
  font-family: var(--font-jp);
  font-size: 12px;
  font-weight: 700;
  color: var(--asagi);
  border: 1.5px solid var(--asagi);
  border-radius: 20px;
  padding: 2px 10px;
}
.card__title {
  font-size: 17.5px;
  line-height: 1.55;
  font-weight: 700;
  color: var(--ink-strong);
  font-feature-settings: "palt" 1;
  text-wrap: pretty;
}
.card__clinic { font-size: 14px; font-weight: 700; color: var(--asagi); }
.card__tags { margin-top: auto; display: flex; flex-wrap: wrap; gap: 6px 10px; font-size: 12.5px; color: var(--gray); }

/* ==========================================================
   お知らせ一覧（行リスト）
   ========================================================== */
.news-list {
  max-width: 880px;
  margin-inline: auto;
  background: var(--white);
  border-radius: 14px;
  box-shadow: var(--shadow-card);
  padding: 8px 32px;
}
.news-list__item {
  display: grid;
  grid-template-columns: 110px 120px 1fr;
  gap: 16px;
  align-items: center;
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.news-list__item:last-child { border-bottom: none; }
.news-list__item > a,
.news-list__item > .news-list__text {
  font-size: 16.5px;
  line-height: 1.6;
  font-weight: 700;
  color: var(--ink);
  font-feature-settings: "palt" 1;
}
.news-list__item > a:hover { color: var(--asagi); }
.news-list__chip {
  font-size: 12px;
  font-weight: 700;
  color: var(--white);
  background: var(--hiiro);
  border-radius: 4px;
  padding: 3px 10px;
  text-align: center;
}
.news-list__chip--gray { background: var(--gray); }
.news-list__date { font-family: var(--font-en); font-weight: 700; font-size: 15px; color: var(--ink); }

/* お知らせ詳細（記事の簡易版） */
.article--news .article__body { margin-top: 32px; }
.article--news .article__body > p { margin: 22px 0; }

/* ==========================================================
   会社概要 / プライバシーポリシー（テキストページ）
   ========================================================== */
.doc {
  max-width: 880px;
  margin-inline: auto;
  background: var(--white);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  padding: 56px 72px 64px;
  font-feature-settings: "palt" 1;
}
.doc h2 {
  margin: 48px 0 18px;
  padding-left: 18px;
  border-left: 5px solid var(--asagi);
  font-size: 22px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--ink-strong);
}
.doc > h2:first-child { margin-top: 0; }
.doc p, .doc li { font-size: 16px; line-height: 1.95; color: var(--ink); }
.doc p + p { margin-top: 14px; }
.doc p a, .doc td a, .article__body p a {
  color: var(--asagi);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.doc ul { padding-left: 1.3em; list-style: disc; display: grid; gap: 6px; }
.doc ol { padding-left: 1.5em; list-style: decimal; display: grid; gap: 6px; }
.doc .doc__date { margin-top: 32px; font-size: 14px; color: var(--gray); text-align: right; } /* .doc p より詳細度を上げる */
.doc__intro { margin-bottom: 8px; }

.spec { width: 100%; border-collapse: collapse; font-size: 16px; }
.spec th, .spec td {
  padding: 18px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  line-height: 1.8;
}
.spec th { width: 10em; font-weight: 700; color: var(--asagi); }

.doc .mission { /* .doc p より詳細度を上げる */
  padding: 16px 0 8px;
  text-align: center;
  font-size: 22px;
  line-height: 1.9;
  font-weight: 700;
  color: var(--ink-strong);
}
.values {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}
.value { background: var(--bg-tint); border-radius: 12px; padding: 20px 14px; text-align: center; }
.doc .value__num { font-family: var(--font-en); font-weight: 800; font-size: 22px; line-height: 1.2; color: var(--asagi); }
.doc .value__name { margin-top: 6px; font-size: 15px; line-height: 1.5; font-weight: 700; color: var(--ink-strong); }

/* ==========================================================
   お問い合わせ（無料相談）フォーム
   ========================================================== */
.form-wrap {
  max-width: 1000px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px;
  align-items: start;
}
.form {
  background: var(--white);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  padding: 40px 44px 44px;
}
.form__row { margin-top: 22px; }
.form__row:first-child { margin-top: 0; }
.form__label { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.form__req { font-size: 11px; color: var(--white); background: var(--hiiro); border-radius: 4px; padding: 2px 7px; }
.form__opt { font-size: 11px; color: var(--gray); border: 1px solid var(--line); border-radius: 4px; padding: 1px 7px; }
.form__input, .form__select, .form__textarea {
  margin-top: 8px;
  width: 100%;
  font: inherit;
  font-size: 16px;
  padding: 13px 14px;
  border: 2px solid #D4EAF1;
  border-radius: 8px;
  background: var(--white);
  color: var(--ink);
  transition: border-color .2s;
}
.form__input:focus, .form__select:focus, .form__textarea:focus { outline: none; border-color: var(--asagi); }
.form__textarea { min-height: 150px; resize: vertical; }
.form__fieldset { border: none; padding: 0; margin-top: 22px; min-width: 0; }
.form__fieldset legend { padding: 0; }
.form__names { margin-top: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form__names .form__input { margin-top: 0; }
.form__radios { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 10px; }
.form__radio {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px;
  border: 2px solid #D4EAF1;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  transition: border-color .2s, background-color .2s;
}
.form__radio:hover { border-color: var(--asagi-pale); }
.form__radio input { margin: 0; width: 16px; height: 16px; accent-color: var(--asagi); flex: none; }
.form__radio:has(input:checked) { border-color: var(--asagi); background: var(--bg-tint); font-weight: 700; }
.form__input.is-invalid, .form__select.is-invalid, .form__textarea.is-invalid { border-color: var(--hiiro); }
.form__status { display: none; margin-top: 18px; padding: 14px 16px; border-radius: 8px; font-size: 14.5px; line-height: 1.7; font-weight: 700; }
.form__status.is-ok { display: block; background: var(--bg-tint); color: var(--asagi-deep); }
.form__status.is-error { display: block; background: #FDECE8; color: var(--hiiro); }
.form .btn[disabled] { opacity: .6; cursor: not-allowed; transform: none; }
.form__check { margin-top: 24px; display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.7; }
.form__check input { margin-top: 5px; width: 18px; height: 18px; accent-color: var(--asagi); flex: none; }
.form__check a { color: var(--asagi); text-decoration: underline; }
.form__submit { margin-top: 28px; text-align: center; }
.form__submit .btn { min-width: 320px; }
.form__note { margin-top: 14px; font-size: 13px; line-height: 1.7; color: var(--gray); text-align: center; }
.aside { display: grid; gap: 16px; }
.aside__card { background: var(--white); border-radius: 14px; box-shadow: var(--shadow-card); padding: 26px; }
.aside__title { font-size: 16px; font-weight: 700; color: var(--asagi); }
.aside__text { margin-top: 8px; font-size: 14.5px; line-height: 1.85; }
.aside__steps { margin-top: 10px; display: grid; gap: 8px; counter-reset: st; list-style: none; }
.aside__steps li { position: relative; padding-left: 34px; font-size: 14.5px; line-height: 1.7; }
.aside__steps li::before {
  counter-increment: st;
  content: counter(st);
  position: absolute;
  left: 0;
  top: .15em;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--asagi);
  color: var(--white);
  font-family: var(--font-en);
  font-weight: 800;
  font-size: 12px;
}

/* 空状態 */
.empty {
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
  background: var(--white);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  padding: 56px 32px;
}
.empty__title { font-size: 20px; font-weight: 700; }
.empty__text { margin-top: 10px; font-size: 15px; line-height: 1.9; color: var(--gray); }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .article, .doc { padding: 44px 40px 52px; }
  .form-wrap { grid-template-columns: 1fr; }
  .values { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  .page { padding: 20px 0 64px; }
  .doc .mission { font-size: 18px; }
  .page-head { padding: 8px 0 28px; }
  .page-head__title { font-size: 29px; }
  .page-head__lead { font-size: 15.5px; }
  .crumb { font-size: 12px; padding-bottom: 18px; }
  .crumb__now { max-width: 100%; white-space: normal; }

  .article, .doc { padding: 28px 20px 36px; border-radius: 12px; }
  .article__meta { flex-wrap: wrap; }
  .article__title { font-size: 24px; margin-top: 18px; }
  .clinic { padding: 20px 18px; }
  .clinic__dl { grid-template-columns: 6em 1fr; font-size: 13.5px; }
  .article__body { font-size: 15.5px; margin-top: 30px; }
  .article__body h2 { font-size: 20px; margin: 44px 0 20px; padding: 4px 0 12px 16px; }
  .article__body h2::before { width: 4px; bottom: 16px; top: 4px; }
  .article__body h3 { font-size: 16.5px; padding: 14px 16px; margin: 40px 0 18px; }
  .lead { padding: 18px; font-size: 14.5px; }

  /* 吹き出し: 顔+名前を横並びで上に、本文を下に */
  .balloon { display: block; margin: 18px 0; }
  .balloon--a, .balloon--q { padding: 0; }
  .balloon__pic { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; text-align: left; }
  .balloon--q .balloon__pic { flex-direction: row-reverse; }
  .balloon__face { width: 40px; height: 40px; font-size: 9px; }
  .balloon__face--mitoki { font-size: 8px; }
  .balloon__name { margin-top: 0; }
  .balloon__text { padding: 16px; font-size: 15px; border-radius: 10px; }
  .balloon__text::before { top: -19px; }
  .balloon--a .balloon__text::before { left: 16px; border-right-color: transparent; border-bottom-color: var(--bg-tint); }
  .balloon--q .balloon__text::before { right: 16px; left: auto; border-left-color: transparent; border-bottom-color: #F3F5F7; }

  .note { padding: 20px 16px 18px; font-size: 14.5px; }
  .figure__cap { padding: 12px 14px 0; font-size: 13px; }
  .figure__cap:last-child { padding-bottom: 12px; }
  .figure__note { padding: 4px 14px 12px; font-size: 11.5px; }
  .summary { padding: 18px 16px; }
  .summary ol li { font-size: 15px; padding-left: 36px; }
  .art-cta { padding: 28px 20px; margin-top: 40px; }
  .art-cta__title { font-size: 18px; }
  .art-cta .btn { width: 100%; }

  .cards { grid-template-columns: 1fr; gap: 16px; }
  .news-list { padding: 4px 18px; }
  .news-list__item { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; }
  .news-list__chip { width: fit-content; }
  .news-list__item > a,
  .news-list__item > .news-list__text { font-size: 15.5px; }

  .spec th, .spec td { display: block; width: auto; padding: 8px 0; }
  .spec th { border-bottom: none; padding-bottom: 0; }
  .spec td { padding-top: 4px; }
  .mission { font-size: 18px; }
  .values { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

  .form { padding: 28px 20px 32px; }
  .form__radio { width: 100%; }
  .form__submit .btn { min-width: 0; width: 100%; font-size: 19px; padding-inline: 20px; } /* 24px nowrapだと375pxで枠を超える */
  .art-cta .btn { font-size: 19px; padding-inline: 20px; }
}

/* ---------- 事例一覧: 近日公開カード（クリックできない見た目: 影なし・点線枠・淡いグレー地） ---------- */
.card--soon {
  cursor: default;
  box-shadow: none;
  border: 2px dashed #CFD8DC;
  background: var(--bg-tint2);
}
.card--soon .card__media { position: relative; }
.card--soon .card__media > img { filter: grayscale(.35) saturate(.8); opacity: .8; }
.card--soon .card__cat { color: var(--gray); border-color: var(--gray); }
.card--soon .card__clinic { color: var(--gray); }
.card__soon {
  position: absolute;
  right: 12px;
  bottom: 12px; /* 写真の名前ピル（左上）・ロゴ（左下）と重ならない位置 */
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--ink-strong);
  color: var(--white);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .06em;
  font-feature-settings: "palt";
  box-shadow: 0 4px 14px rgba(0, 0, 15, .25);
}
.card--soon .card__title { color: var(--gray); }

/* ---------- サンクスページ（thanks.html） ---------- */
.thanks { max-width: 760px; margin: 0 auto; padding: 8px 0 0; }
.thanks--read { margin-top: 48px; }
.thanks__title {
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  letter-spacing: .04em;
  font-feature-settings: "palt" 1;
  margin: 0 0 24px;
}
.thanks__steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.thanks__step {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 20px 24px;
  background: var(--bg-tint2);
  border-radius: 12px;
}
.thanks__num {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--asagi);
  color: var(--white);
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.thanks__head { font-size: 17px; font-weight: 700; margin: 8px 0 4px; }
.thanks__text { font-size: 15px; line-height: 1.8; color: var(--ink); }
.thanks__note { margin-top: 18px; font-size: 13px; line-height: 1.7; color: var(--gray); text-align: center; }
.thanks__links { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.thanks__link {
  display: block;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  color: inherit;
  transition: box-shadow .25s, transform .25s;
}
.thanks__link:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }
.thanks__link-label { font-family: var(--font-en); font-weight: 700; font-size: 13px; color: var(--asagi); letter-spacing: .06em; }
.thanks__link-title { font-size: 19px; font-weight: 700; margin: 4px 0 6px; }
.thanks__link-text { font-size: 14px; line-height: 1.7; color: var(--gray); }
@media (max-width: 768px) {
  .thanks__title { font-size: 19px; }
  .thanks__step { padding: 16px 16px; gap: 14px; }
  .thanks__num { width: 38px; height: 38px; font-size: 13px; }
  .thanks__head { font-size: 16px; margin-top: 6px; }
  .thanks__text { font-size: 14px; }
  .thanks__links { grid-template-columns: 1fr; }
}
