/* ===================================================
   WEB症例カタログ スタイルシート
   さくら会グループ — 既存サイト (sakurashika-g.jp) デザイン準拠
   =================================================== */

/* ── カラー・フォント変数（既存サイト準拠） ───── */
:root {
  /* ブランドカラー */
  --c-pink:        #ff962a;      /* oralcare メインオレンジ */
  --c-pink-shadow: #fab07f;      /* ボタンシャドウ */
  --c-pink-pale:   #fff4ea;      /* 背景ベージュ */
  --c-pink-light:  #ffc8a0;      /* アクセント背景 */
  --c-pink-bg:     #fff8f2;

  /* テキスト */
  --c-text:        #474747;
  --c-text-sub:    #737373;
  --c-text-muted:  #9b9595;
  --c-link:        #737373;

  /* ボーダー */
  --c-border-case: #d2d2d2;
  --c-border:      #e0d8d8;

  /* 背景 */
  --c-bg:          #fafafa;
  --c-bg-card:     #ffffff;
  --c-bg-section:  #fdf6f0;

  /* フォント（既存サイト完全準拠） */
  --font: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "Yu Gothic M",
          "YuGothic", "Yu Gothic", "メイリオ", Meiryo, Verdana,
          "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Arial, sans-serif;

  /* ボーダー半径 */
  --r-sm:   5px;
  --r-md:   10px;
  --r-lg:   20px;
  --r-pill: 999px;

  /* スペース */
  --gap-sm: 8px;
  --gap-md: 16px;
  --gap-lg: 24px;
}

/* ── リセット & ベース ──────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  background: var(--c-bg);
  color: var(--c-text);
  line-height: 1.7;
}

img { display: block; max-width: 100%; height: auto; }
a   { color: var(--c-link); text-decoration: none; }
a:hover { color: var(--c-pink); }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, select { font-family: inherit; }

/* ── 自作ヘッダー（廃止：既存サイトのheader/navに移行済み） ─── */
/* .site-header, .site-header__logo 等は削除済み */

/* ── 左固定バナー（btnFixBox: 70px）回避 ── */
@media (min-width: 769px) {
  .search-panel,
  .cases-wrap {
    padding-left: 80px;
  }
}

/* ── ページタイトルバナー（トップ画像なし・非表示） ─── */
.page-hero {
  display: none;
}


/* ── 検索パネル ────────────────────────────── */
.search-panel {
  background: #fff;
  border-top: none;
  border-bottom: 1px solid var(--c-border);
  padding: var(--gap-lg) 20px;
}
.search-panel__inner {
  max-width: 900px;
  margin: 0 auto;
}

/* 既存サイトの見出し下ライン風 */
.search-panel__title {
  font-size: 24px;
  font-weight: bold;
  color: var(--c-text);
  text-align: center;
  margin-bottom: var(--gap-md);
  padding-bottom: 12px;
  position: relative;
}
.search-panel__title::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 54px; height: 3px;
  background: var(--c-pink);
  border-radius: 2px;
}

.search-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-md);
  margin-bottom: var(--gap-md);
}
.search-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.search-field--wide { grid-column: 1 / -1; }
.search-field label {
  font-size: 12px;
  font-weight: bold;
  color: var(--c-text-sub);
}

/* 写真種類チェックボックス */
.photo-filter-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.photo-check {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  font-size: 13px !important;
  font-weight: normal !important;
  color: var(--c-text) !important;
  padding: 5px 12px;
  border: 2px solid #e0e0e0;
  border-radius: 999px;
  transition: border-color .2s, background .2s;
  user-select: none;
}
.photo-check:has(input:checked) {
  border-color: #46bdce;
  background: #eaf8fb;
}
.photo-check input {
  width: 14px;
  height: 14px;
  accent-color: #46bdce;
  margin: 0;
}

/* ── select / input ──
   appearance:none を外してネイティブ動作を保証
   ──────────────────────────────────────────── */
.search-field select,
.search-field input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--c-border-case);
  border-radius: var(--r-sm);
  background: #fff;
  font-size: 14px;
  color: var(--c-text);
  font-family: var(--font);
}
.search-field select:focus,
.search-field input:focus {
  outline: 2px solid var(--c-pink);
  outline-offset: 1px;
}

/* ── ボタン（既存サイト .btn_02 の押し込みスタイル完全準拠） ── */
.search-submit {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--gap-md);
  margin-top: 4px;
}

.btn-search {
  display: inline-block;
  padding: 9px 28px;
  color: #ffffff;
  background: var(--c-pink);
  border: none;
  border-radius: var(--r-sm);
  box-shadow: 4px 4px 0 var(--c-pink-shadow);
  font-size: 15px;
  font-weight: bold;
  letter-spacing: .04em;
  cursor: pointer;
  transition: all 0.3s;
  font-family: var(--font);
}
.btn-search:hover {
  color: #ffffff;
  text-decoration: none;
  box-shadow: none;
  transform: translate(4px, 4px);
}

.btn-reset-top {
  display: inline-block;
  padding: 9px 20px;
  color: #ffffff;
  background: #7d7d7d;
  border: none;
  border-radius: var(--r-sm);
  box-shadow: 4px 4px 0 #aaaaaa;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
  font-family: var(--font);
}
.btn-reset-top:hover {
  color: #ffffff;
  text-decoration: none;
  box-shadow: none;
  transform: translate(4px, 4px);
}
.btn-reset-top.hidden { display: none; }

/* ── 件数ヘッダー ───────────────────────── */
.results-header {
  max-width: 1020px;
  margin: 28px auto 12px;
  padding: 0 20px;
  display: flex;
  align-items: baseline;
  gap: var(--gap-md);
  flex-wrap: wrap;
}
.results-count { font-size: 15px; font-weight: bold; color: var(--c-text); }
.results-count em { color: var(--c-pink); font-style: normal; font-size: 26px; }
.results-order { font-size: 12px; color: var(--c-text-sub); margin-left: auto; }

/* ── ゼロ件 ────────────────────────────── */
.no-results {
  display: none;
  text-align: center;
  padding: 60px 20px;
  color: var(--c-text-sub);
}
.no-results.visible { display: block; }
.no-results__icon { font-size: 32px; margin-bottom: 12px; color: var(--c-border-case); }
.no-results__title { font-size: 17px; font-weight: bold; margin-bottom: 8px; }

/* ── カードグリッド（既存 .caseflex 準拠） ── */
.cases-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  width: 98%;
  max-width: 1020px;
  margin: 0 auto 60px;
  padding: 0 10px;
}

/* ページネーション */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 0 auto 60px;
  padding: 0 10px;
}
.pag-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  background: #fff;
  border: 1px solid var(--c-border);
  color: var(--c-text);
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.2s;
}
.pag-btn:hover {
  background: var(--c-bg);
  border-color: var(--c-pink);
  color: var(--c-pink);
}
.pag-current {
  background: var(--c-pink);
  color: #fff;
  border-color: var(--c-pink);
  cursor: default;
}
.pag-current:hover {
  background: var(--c-pink);
  color: #fff;
}

/* ケースカード（既存 .casebox 準拠）—— リンクタグ対応 */
.case-card {
  position: relative;
  flex: 0 0 calc(50% - 20px);
  margin: 10px;
  box-sizing: border-box;
  padding: 16px;
  border: 3px solid var(--c-border-case);
  border-radius: var(--r-sm);
  background: var(--c-bg-card);
  cursor: pointer;
  transition: border-color .25s, box-shadow .25s;
  /* aタグ用リセット */
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
  color: inherit !important;
}
/* 訪問済みリンクはグレー枠（:hover より前に書く） */
.case-card:visited {
  border-color: var(--c-border-case);
}
/* hover・focus は visited より後に書いて確実に優先させる */
.case-card:hover,
.case-card:focus {
  border-color: var(--c-pink);
  box-shadow: 0 4px 20px rgba(0,0,0,.1);
  text-decoration: none !important;
  color: inherit !important;
}
/* カード内の全テキスト要素にも適用 */
.case-card *,
.case-card *:hover {
  text-decoration: none !important;
}

/* カードヘッダー */
.case-card__id {
  position: absolute;
  top: 10px;
  left: 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--c-text-muted);
  opacity: .4;
}
.case-card__header {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--c-border);
}

/* カテゴリバッジ */
.case-card__cat {
  display: inline-block;
  padding: 4px 12px;
  background: var(--c-pink);
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  border-radius: var(--r-sm);
  line-height: 1.4;
  white-space: nowrap;
}

.case-card__meta-right { text-align: right; flex-shrink: 0; margin-left: auto; }
.case-card__no   { display: block; font-size: 10px; color: var(--c-text-muted); margin-bottom: 2px; }
.case-card__date { display: block; font-size: 11px; color: var(--c-text-sub); }

/* 患者タグ（枠線なし・角丸長方形・性別色分け） */
.case-card__patient {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.case-card__patient-tag {
  font-size: 12px;
  font-weight: bold;
  padding: 3px 10px;
  border-radius: 8px;
  display: inline-block;
  line-height: 1.5;
}
/* 年代 → グレーアウトライン */
.case-card__patient-tag--age {
  background: transparent;
  color: #666;
  border: 1.5px solid #ccc;
}
/* 男性 → サイトの水色系 */
.case-card__patient-tag--male {
  background: #e0f5f8;
  color: #3a9fb3;
  border: 1.5px solid #46bdce;
}
/* 女性 → サイトのピンク系 */
.case-card__patient-tag--female {
  background: #ffe1de;
  color: #e05a63;
  border: 1.5px solid #ff717b;
}

.case-card__title {
  font-size: 17px;
  font-weight: bold;
  color: var(--c-text);
  margin-bottom: 6px;
  line-height: 1.45;
}
.case-card__complaint {
  font-size: 15px;
  color: var(--c-text-sub);
  margin-bottom: 14px;
  line-height: 1.55;
}

/* 写真エリア */
.case-card__photos {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
}
.case-card__photo-wrap {
  flex: 1;
  position: relative;
  border-radius: var(--r-sm);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: #f0f0f0;
}
.case-card__photo-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s;
}
.case-card:hover .case-card__photo-wrap img { transform: scale(1.04); }

.photo-label {
  position: absolute;
  top: 5px; left: 5px;
  background: rgba(0,0,0,.5);
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 3px;
}
.photo-badge {
  position: absolute;
  bottom: 5px; right: 5px;
  background: var(--c-pink);
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 7px;
  border-radius: var(--r-pill);
}
.case-card__arrow {
  font-size: 18px;
  color: var(--c-border-case);
  flex-shrink: 0;
  width: 20px;
  text-align: center;
  line-height: 1;
}

/* カードCTAボタン（btn_02 スタイル） */
.btn-detail {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 9px 0;
  background: var(--c-pink);
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  border-radius: var(--r-sm);
  box-shadow: 4px 4px 0 var(--c-pink-shadow);
  cursor: pointer;
  border: none;
  font-family: var(--font);
  transition: all 0.3s;
}
.btn-detail:hover {
  color: #fff;
  text-decoration: none;
  box-shadow: none;
  transform: translate(4px, 4px);
}

/* ── フッター（既存サイト準拠） ──────────── */
.site-footer {
  background: var(--c-pink-pale);
  padding: 20px 20px 0;
}
.site-footer__note {
  text-align: center;
  font-size: 12px;
  color: var(--c-text-sub);
  padding: 10px;
}
.site-footer__copy {
  display: block;
  width: 100%;
  padding: 12px 5px;
  text-align: center;
  color: #fff;
  font-size: 14px;
  background: var(--c-pink);
  margin-top: 16px;
}

/* ═══════════════════════════════════════════════
   詳細モーダル
   【重要】display は [open] セレクタでのみ制御。
   閉じている状態では dialog{display:none} が
   ブラウザにより適用され、全画面overlay問題を防ぐ。
   ═══════════════════════════════════════════════ */

/* dialog 基本リセット */
dialog {
  border: none;
  padding: 0;
  background: transparent;
  max-width: 100%;
  max-height: 100%;
}

/* ─ 詳細モーダル ─ */
#modal-detail {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  /* display は [open] でのみ設定 — ここに display:flex を書かない */
  align-items: flex-end;
  justify-content: stretch;
}

#modal-detail[open] {
  display: flex;
}

#modal-detail::backdrop {
  background: rgba(0,0,0,.5);
}

.modal-detail__container {
  background: #fff;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 680px) {
  #modal-detail {
    align-items: center;
    justify-content: center;
    padding: 20px;
  }
  .modal-detail__container {
    border-radius: var(--r-md);
    max-width: 820px;
    max-height: 90vh;
  }
}

/* モーダルヘッダー */
.modal-detail__header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #fff;
  border-top: 5px solid var(--c-pink);
  border-bottom: 1px solid var(--c-border);
  padding: 12px 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.modal-detail__header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.modal-detail__cat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.modal-detail__cat-badge {
  display: inline-block;
  background: var(--c-pink);
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  padding: 3px 10px;
  border-radius: var(--r-sm);
}
.modal-detail__date  { font-size: 11px; color: var(--c-text-sub); }
.modal-detail__title {
  font-size: clamp(15px, 2.2vw, 19px);
  font-weight: bold;
  color: var(--c-text);
  line-height: 1.4;
}
.modal-detail__no { font-size: 10px; color: var(--c-text-muted); }

.modal-close-btn {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #f0f0f0;
  border: 1px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--c-text-sub);
  flex-shrink: 0;
  cursor: pointer;
  transition: background .2s;
}
.modal-close-btn:hover { background: var(--c-border-case); }

/* モーダルボディ */
.modal-detail__body { padding: 18px; }

/* 写真エリア */
.modal-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.modal-photo-label {
  font-size: 12px;
  font-weight: bold;
  color: var(--c-text-sub);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.duration-badge {
  background: var(--c-pink);
  color: #fff;
  font-size: 10px;
  font-weight: bold;
  padding: 1px 7px;
  border-radius: var(--r-pill);
}
.modal-photo-img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: var(--r-sm);
  border: 1px solid var(--c-border);
}
.modal-photo-caption { font-size: 11px; color: var(--c-text-sub); margin-top: 4px; }

/* 全写真ボタン */
.btn-gallery {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 9px 0;
  background: #fff;
  border: 2px solid var(--c-pink);
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: bold;
  color: var(--c-pink);
  margin-bottom: 18px;
  cursor: pointer;
  font-family: var(--font);
  transition: background .2s, color .2s;
}
.btn-gallery:hover { background: var(--c-pink); color: #fff; }

/* ドクターコメント（既存 accordion-title 準拠） */
.doctor-comment { margin-bottom: 18px; }
.doctor-comment__label {
  display: block;
  width: 100%;
  padding: 7px 12px;
  background: var(--c-pink);
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.doctor-comment__text {
  background: var(--c-bg-section);
  border: 1px solid var(--c-border);
  border-top: none;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.8;
  color: var(--c-text);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
}

/* 施術情報テーブル */
.treatment-info {
  border: 1px solid var(--c-border-case);
  border-radius: var(--r-sm);
  overflow: hidden;
  margin-bottom: 14px;
}
.treatment-info__row {
  display: grid;
  grid-template-columns: 88px 1fr;
  border-bottom: 1px solid var(--c-border);
}
.treatment-info__row:last-child { border-bottom: none; }
.treatment-info__label {
  background: var(--c-pink-pale);
  padding: 10px 10px;
  font-size: 11px;
  font-weight: bold;
  color: var(--c-text-sub);
  display: flex;
  align-items: flex-start;
  padding-top: 12px;
}
.treatment-info__value {
  padding: 10px 12px;
  font-size: 13px;
  color: var(--c-text);
  line-height: 1.7;
}
.treatment-info__price {
  font-size: 15px;
  font-weight: bold;
  color: var(--c-pink);
}

/* タグ */
.case-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 18px;
}
.tag {
  background: #fff;
  border: 1px solid var(--c-border-case);
  border-radius: var(--r-pill);
  padding: 3px 10px;
  font-size: 12px;
  color: var(--c-text-sub);
}
.tag::before { content: '#'; color: var(--c-pink); margin-right: 1px; }

/* 似た症例 */
.related-cases__title {
  font-size: 16px;
  font-weight: bold;
  color: var(--c-text);
  margin-bottom: 12px;
  padding: 12px 0 12px 12px;
  border-top: 1px solid var(--c-border);
  position: relative;
}
.related-cases__title::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  margin-top: 6px;
  width: 4px; height: 18px;
  background: var(--c-pink);
  border-radius: 2px;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.related-card {
  border: 2px solid var(--c-border-case);
  border-radius: var(--r-sm);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .2s;
  background: #fff;
}
.related-card:hover { border-color: var(--c-pink); }
.related-card__img { aspect-ratio: 3/2; object-fit: cover; width: 100%; }
.related-card__body { padding: 7px 9px 9px; }
.related-card__cat { font-size: 10px; font-weight: bold; color: var(--c-pink); margin-bottom: 2px; }
.related-card__title { font-size: 12px; font-weight: bold; color: var(--c-text); line-height: 1.35; }

/* ═══════════════════════════════════════════════
   ギャラリーモーダル
   ═══════════════════════════════════════════════ */

#modal-gallery {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#modal-gallery[open] {
  display: flex;
}

#modal-gallery::backdrop {
  background: rgba(0,0,0,.8);
}

.modal-gallery__container {
  background: #fff;
  border-radius: var(--r-md);
  width: 100%;
  max-width: 700px;
  max-height: 88vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.modal-gallery__header {
  background: var(--c-pink);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-shrink: 0;
}
.modal-gallery__tabs {
  display: flex;
  gap: 4px;
  background: rgba(0,0,0,.15);
  border-radius: var(--r-pill);
  padding: 3px;
}
.gallery-tab {
  padding: 4px 16px;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: bold;
  color: rgba(255,255,255,.7);
  cursor: pointer;
  transition: background .2s, color .2s;
  font-family: var(--font);
}
.gallery-tab.active { background: #fff; color: var(--c-pink); }
.gallery-title {
  font-size: 12px;
  color: rgba(255,255,255,.85);
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  text-align: center;
}
.gallery-close {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  transition: background .2s;
  flex-shrink: 0;
}
.gallery-close:hover { background: rgba(255,255,255,.35); }

.modal-gallery__content {
  overflow-y: auto;
  flex: 1;
  padding: 12px;
  background: #f5f5f5;
}
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.gallery-img-wrap {
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 2px solid var(--c-border-case);
}
.gallery-img-wrap img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
}

.modal-gallery__footer {
  background: var(--c-pink-pale);
  padding: 8px 14px;
  text-align: center;
  font-size: 11px;
  color: var(--c-text-sub);
  flex-shrink: 0;
}

/* ── レスポンシブ ─────────────────────────── */
@media screen and (max-width: 640px) {
  .cases-grid { flex-direction: column; }
  .case-card  { flex: none; width: calc(100% - 20px); margin: 10px; }
  .search-grid { grid-template-columns: 1fr; }
  .search-field--wide { grid-column: 1; }
  .modal-photos { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .treatment-info__row { grid-template-columns: 72px 1fr; }
  .search-submit { flex-direction: column; align-items: center; }
}

/* スクロールバー細め */
.modal-detail__container::-webkit-scrollbar,
.modal-gallery__content::-webkit-scrollbar { width: 4px; }
.modal-detail__container::-webkit-scrollbar-thumb,
.modal-gallery__content::-webkit-scrollbar-thumb {
  background: var(--c-border-case);
  border-radius: 4px;
}