@charset "UTF-8";
/* このファイルは bin/build-dark-css.php が page.css から作る。直接編集しないこと。 */
/* ページ作成機能（ブロック）の見た目。
   yasu-hp.jp の CMS の page.css からブロック部分を取り出し、配色を FANTOMA に合わせたもの。
   クラス名は app/Views/front/partials/blocks.php と対。
   ギャラリー・カルーセル・タブ・FAQ などの動きは httpdocs/assets/site.js。 */

:root {
    --color-title: #e0e0e0;
    --color-text: #cccccc;
    --fs-h1: clamp(1.6rem, 1.3rem + 1.4vw, 2.25rem);
    --fs-h2: clamp(1.375rem, 1.15rem + 1vw, 1.75rem);
    --fs-h3: clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
    --fs-h4: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
    --fs-body: 1rem;
    --fs-small: 0.875rem;
    --fs-xs: 0.75rem;
    --lh-heading: 1.4;
    --lh-body: 1.8;
    --parts-blue: #a3283a;
    --parts-blue-dark: #6e1623;
    --parts-blue-light: #382b2e;
    /* 罫線・淡い枠に使うアクセント色の薄い色（基本設定のアクセント色から layout.php が上書き） */
    --parts-line: #624b4f;
}

/* 本文は少しだけ地と違う面に載せる。色は管理画面の「基本設定」から（layout.php が --page-surface などを出す）。
   黒地のときは page-dark.css（bin/build-dark-css.php がこのファイルから作る）を使う */
.page-body {
    background: var(--page-surface, #262626);
    color: var(--page-text, #e0e0e0);
    border-radius: 8px;
    padding: 24px 20px 40px;
    margin: 0 -16px;
}
@media (min-width: 720px) {
    .page-body { padding: 32px 40px 48px; margin: 0; }
}
/* 部品のボタン（class 付きのリンク）は部品側の色を使うので、class の無い本文中のリンクだけに効かせる */
.page-body a:where(:not([class])) { color: var(--link, var(--parts-blue)); }
.page-title {
    font-size: var(--fs-h1);
    line-height: var(--lh-heading);
    margin: 0 0 24px;
    padding-bottom: 12px;
    border-bottom: 3px solid var(--parts-blue);
}
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0 0 12px; padding: 0; font-size: var(--fs-small); color: var(--muted, #bfbfbf); }
.breadcrumb li + li::before { content: "›"; margin-right: 4px; }
.page-children { margin-top: 40px; padding-top: 20px; border-top: 1px solid #56534d; }
.page-children h2 { font-size: var(--fs-h3); margin: 0 0 12px; }
.page-children ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; list-style: none; padding: 0; margin: 0; }
.page-children a { display: block; padding: 12px 16px; border: 1px solid #56534d; border-radius: 6px; text-decoration: none; }
.preview-bar { background: var(--parts-blue-light); color: var(--parts-link); padding: 8px 12px; border-radius: 6px; margin-bottom: 16px; font-size: var(--fs-small); }

/* アイコン（App\Support\Icon が出すインライン SVG） */
.material-symbols-outlined { display: inline-flex; align-items: center; justify-content: center; line-height: 1; vertical-align: -0.15em; }
.material-symbols-outlined svg { display: block; }

/* --------------------------------------------------
   休日・夜間・診療時間外のご受診についてセクション
   ※ font-family は body から継承
-------------------------------------------------- */
.page-section-emergency {
  flex: 1;
  min-width: 0;
  color: #e0e0e0;
}

/* セクション大見出し（h2 サイズ）
   ※ 駐車場セクションの大見出しとデザインを共通化 */
.emergency-main-title,
.page-parking-main-title {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-heading);
  color: var(--parts-link);
  background-color: var(--parts-blue-light);
  border-radius: 8px;
  padding: 16px 20px;
  margin: 30px 0 25px 0;
  position: relative;
  display: flex;
  align-items: center;
}

/* 左側の濃い青の縦線アクセント */
.emergency-main-title::before,
.page-parking-main-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 24px;
  background-color: var(--parts-blue);
  border-radius: 2px;
}

/* タイムライン全体の構造（縦の青線） */
.timeline-container {
  position: relative;
  padding-left: 45px;
}

.timeline-container::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 24px;
  width: 3px;
  background-color: var(--parts-blue);
}

/* 各ステップのレイアウト */
.timeline-item {
  position: relative;
  margin-bottom: 40px;
}

.timeline-item:last-child {
  margin-bottom: 0;
}

/* 01〜05の丸い番号バッジ */
.step-badge {
  position: absolute;
  left: -44px;
  top: 0;
  width: 50px;
  height: 50px;
  background-color: var(--parts-blue);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-h4);
  font-weight: 700;
  z-index: 2;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ステップのコンテンツ部分 */
.step-content {
  padding-left: 20px;
}

/* ステップ見出し（h3 サイズ） */
.step-title {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: #e0e0e0;
  margin: 0 0 10px 0;
  line-height: var(--lh-heading);
}

.step-phone-info {
  font-size: var(--fs-body);
  margin: 0 0 10px 0;
  color: #e0e0e0;
}

.step-note {
  font-size: var(--fs-small);
  color: #c2c2c2;
  margin: 0 0 8px 0;
  line-height: 1.6;
}

/* 補足の下に出すリンクボタン。
   ボタンブロック（.c-button）と同じ形にして、手順の中では小さく出す。 */
/* 複数置けるので、折り返して横に並べる */
.step-link-wrap { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 8px; }
.step-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 18px 0 22px;
  border-radius: 40px;
  background-color: var(--parts-blue, var(--parts-blue));
  text-decoration: none;
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.step-link:hover { background-color: var(--parts-blue-dark, var(--parts-blue-dark)); transform: translateY(-2px); }
.step-link__text { color: #ffffff; font-size: var(--fs-small); font-weight: 700; line-height: 1.4; }
.step-link__icon { flex-shrink: 0; color: #ffffff; font-size: 22px; transition: transform 0.3s ease; }
.step-link:hover .step-link__icon { transform: translateX(3px); }

/* 他医療機関検索リンクのボックス */
.external-links-box {
  background-color: var(--parts-blue-light);
  border: 1px solid var(--parts-line);
  border-radius: 8px;
  padding: 15px;
  margin-top: 15px;
}

.external-box-title {
  font-size: var(--fs-small);
  font-weight: 700;
  color: #e0e0e0;
  margin: 0 0 10px 0;
}

.external-link-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #262626;
  padding: 10px 15px;
  border-radius: 6px;
  text-decoration: none;
  color: #e0e0e0;
  font-size: var(--fs-small);
  margin-bottom: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transition: background-color 0.2s;
}

.external-link-item:last-child {
  margin-bottom: 0;
}

.external-link-item:hover {
  background-color: #322d2a;
}

.external-link-item .material-symbols-outlined {
  font-size: 16px;
  color: #c2c2c2;
  flex-shrink: 0;
  margin-left: 10px;
}

/* 単体のPDFダウンロードカード */
.dl-card-single {
  display: inline-flex;
  align-items: center;
  background-color: #262626;
  border: 1px solid var(--parts-line);
  border-radius: 30px;
  padding: 10px 20px;
  text-decoration: none;
  color: #e0e0e0;
  font-size: var(--fs-small);
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  margin: 10px 0;
  transition: transform 0.1s;
}

.dl-card-single:hover {
  transform: translateY(-1px);
}

/* --------------------------------------------------
   会計案内セクション
-------------------------------------------------- */
.accounting-lead {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: #c2c2c2;
  margin-bottom: 20px;
}

.accounting-text {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: #c2c2c2;
  margin-bottom: 12px;
}

.note-red {
  color: #d96154;
}

/* 金額テーブル */
.accounting-table-wrap {
  border: 1px solid #515151;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 20px;
  background-color: #262626;
}

.accounting-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
}

.accounting-table tr {
  border-bottom: 1px solid #514744;
}

.accounting-table tr:last-child {
  border-bottom: none;
}

.accounting-table td {
  padding: 12px 15px;
  color: #e0e0e0;
  font-size: var(--fs-body);
}

.accounting-table .price-col {
  text-align: right;
  font-weight: 700;
  white-space: nowrap;
}

/* クレジット対応セクション全体 */
.page-ext-pay-box {
  margin-top: 35px;
  border-top: 1px solid #4d4d4d;
  padding-top: 25px;
}

/* 「各種クレジット対応」の見出し（h3 サイズ） */
.page-ext-pay-title {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--parts-link);
  margin: 0 0 15px 0;
  padding-left: 10px;
  position: relative;
  display: inline-block;
}

.page-ext-pay-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 14px;
  background-color: var(--parts-blue);
  border-radius: 2px;
}

/* カードロゴの並び */
.page-ext-pay-logos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.page-ext-pay-logos img {
  height: 50px;
  width: auto;
  object-fit: contain;
  background-color: #262626;
  border: 1px solid #515151;
  border-radius: 3px;
  padding: 2px 4px;
}

/* --------------------------------------------------
   外来駐車場セクション
-------------------------------------------------- */
.page-parking-section {
  margin-top: 60px;
}

.page-parking-img-wrap {
  margin-bottom: 20px;
  border-radius: 8px;
  overflow: hidden;
}

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

/* 駐車場の台数カード一覧グリッド */
.page-parking-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.page-parking-card {
  flex: 1 1 calc(50% - 6px);
  background-color: #2b2b2b;
  border: 1px solid #454c56;
  border-radius: 6px;
  padding: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}

.page-parking-card-full {
  flex: 1 1 100%;
}

.parking-loc {
  font-size: var(--fs-small);
  color: #e0e0e0;
  line-height: 1.4;
}

.parking-loc small {
  font-size: var(--fs-xs);
  color: #c2c2c2;
}

.parking-num {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--parts-link);
  white-space: nowrap;
  margin-left: 10px;
}

/* 計126台（無料）バナー */
.page-parking-total-banner {
  background-color: var(--parts-blue-light);
  border: 1px solid var(--parts-line);
  color: var(--parts-link);
  font-size: var(--fs-body);
  font-weight: 700;
  text-align: center;
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 30px;
}

/* サブ見出し（四角アイコン付き・h4 サイズ） */
.page-parking-sub-title {
  font-size: var(--fs-h4);
  font-weight: 700;
  color: #e0e0e0;
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}

.page-parking-sub-title .square-icon {
  color: var(--parts-link);
  font-size: 12px;
}

/* 本文テキスト */
.page-parking-text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: #e0e0e0;
  margin-bottom: 15px;
}

@media (max-width: 600px) {
  .page-parking-card {
    flex: 1 1 100%;
  }
}

/* =========================================================
   本文ブロックの見た目

   管理画面の「ページの中身」で作れるブロック
   （見出し・本文・表・ファイル・画像・注意書き）を、
   デザイン（/first/）の下層ページの見た目に合わせる。

   すべて .right-content-area の中だけに効かせる。
   トップページや健康管理センターなど、この下層レイアウトを
   使っていないページには影響させないため。

   クラス名は app/Views/front/partials/blocks.php と
   app/Views/front/pages/show.php に合わせてある。
   どちらかを変えるときは対で直すこと。
========================================================= */
.right-content-area {
  flex: 1;
  min-width: 0;
  color: var(--color-title, #e0e0e0);
}

/* ---- 見出し ---- */
.right-content-area h2.content-heading,
.right-content-area .section-sub-title {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-heading);
  color: var(--parts-link);
  background-color: var(--parts-blue-light);
  border-radius: 8px;
  padding: 16px 20px;
  margin: 30px 0 25px;
  position: relative;
}
.right-content-area h2.content-heading::before,
.right-content-area .section-sub-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 24px;
  background-color: var(--parts-blue);
  border-radius: 2px;
}
.right-content-area h2.content-heading:first-child,
.right-content-area .section-sub-title:first-child {
  margin-top: 0;
}

.right-content-area h3.content-heading {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--parts-link);
  margin: 28px 0 12px;
  padding-left: 10px;
  position: relative;
  border: 0;
}
.right-content-area h3.content-heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 14px;
  background-color: var(--parts-blue);
  border-radius: 2px;
}

/* 小見出し。デザインの /parts/ の .c-heading-lv4 に合わせ、
   帯や縦線を付けず色と大きさだけで区別する。h2・h3 と同じクラス名を
   使うのは、access ページなどテンプレート側の見出しと見た目をそろえるため。 */
.right-content-area h4.content-heading {
  font-size: var(--fs-h4, 1.05rem);
  font-weight: 700;
  color: var(--parts-link);
  margin: 22px 0 10px;
  padding: 0;
  border: 0;
}
.right-content-area h4.content-heading::before {
  content: none;
}

/* ---- 本文 ---- */
.right-content-area .content-text {
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: #e0e0e0;
  margin-bottom: 20px;
}
.right-content-area .content-text p { margin: 0 0 1em; }
.right-content-area .content-text p:last-child { margin-bottom: 0; }
.right-content-area .content-text a { color: var(--parts-link); }
.right-content-area .content-text ul,
.right-content-area .content-text ol { margin: 0 0 1em; padding-left: 1.4em; }
.right-content-area .content-text li { margin-bottom: 4px; }

/* ---- 注意書き ---- */
.right-content-area .notice {
  font-size: var(--fs-small);
  line-height: 1.7;
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 20px;
  background-color: #322d2a;
  border-left: 4px solid var(--parts-line);
}
.right-content-area .notice p { margin: 0 0 .6em; }
.right-content-area .notice p:last-child { margin-bottom: 0; }
/* 管理画面の「注意（強調）」。種別の値は tone=warning。アクセント色（赤系）で目立たせる。
   以前は .notice--warn と書いていて、テンプレートが出す
   .notice--warning と名前が合っておらず、選んでも青のままだった。
   site.css にも .notice--warning はあるが、
   (1) 健診センターのページは site.css を読み込まない
   (2) .right-content-area .notice のほうが詳細度で勝つ
   ため、どちらの作りでも当たらなかった。ここで指定する。 */
.right-content-area .notice--warning {
  background-color: var(--parts-blue-light);
  border-left-color: var(--parts-blue);
}

/* ---- 表 ---- */
.right-content-area .table-scroll {
  border: 1px solid #515151;
  border-radius: 6px;
  overflow: auto;
  margin-bottom: 25px;
  background-color: #262626;
}
.right-content-area .content-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body);
  border: 0;
}
.right-content-area .content-table caption {
  text-align: left;
  font-weight: 700;
  padding: 12px 15px 0;
  color: #e0e0e0;
}
.right-content-area .content-table tr { border-bottom: 1px solid #514744; }
.right-content-area .content-table tr:last-child { border-bottom: 0; }
.right-content-area .content-table th,
.right-content-area .content-table td {
  padding: 12px 15px;
  color: #e0e0e0;
  text-align: left;
  border: 0;
}
.right-content-area .content-table thead th {
  background-color: #322d2a;
  font-weight: 700;
  color: var(--parts-link);
}

/* ---- ファイル（PDF など） ---- */
.right-content-area .file-link { margin: 0 0 12px; }
.right-content-area .file-link a {
  background-color: #262626;
  border: 1px solid var(--parts-line);
  border-radius: 8px;
  /* 左は 52px 空ける。site.css が種類ラベル（PDF など）を
     ::before で left:10px に重ねて置いているため、
     詰めると文字の頭に重なる。 */
  padding: 16px 20px 16px 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-decoration: none;
  color: #e0e0e0;
  font-size: var(--fs-small);
  font-weight: 700;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
  transition: transform .1s;
}
.right-content-area .file-link a:hover { transform: translateY(-1px); }
.right-content-area .file-link__meta {
  font-weight: 400;
  color: #c2c2c2;
  white-space: nowrap;
}

/* ---- 画像 ----
   width は指定しない。本文の画像は 300px 程度のものが多く、
   100% にすると引き伸ばされてぼやけるため。
   横幅をはみ出すときだけ縮める。 */
.right-content-area .content-figure {
  margin: 0 0 30px;
  max-width: 100%;
}
.right-content-area .content-figure img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}
.right-content-area .content-figure--center { margin-left: auto; margin-right: auto; }
.right-content-area .content-figure--center img { margin: 0 auto; }
.right-content-area .content-figure--right { margin-left: auto; }
.right-content-area .content-figure--right img { margin-left: auto; }
.right-content-area .content-figure figcaption {
  font-size: var(--fs-small);
  color: #c2c2c2;
  margin-top: 8px;
}

/* ---- 下の階層へのリンク（generic/page.php） ---- */
.right-content-area .link-buttons-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 30px;
}
.right-content-area .link-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid #c27a84;
  border-radius: 30px;
  padding: 14px 20px;
  text-decoration: none;
  color: #e0e0e0;
  font-size: var(--fs-small);
  background-color: #262626;
  transition: background-color .2s;
}
.right-content-area .link-button::after {
  content: "→";
  color: var(--parts-link);
  flex-shrink: 0;
}
.right-content-area .link-button:hover { background-color: #322d2a; }

@media screen and (max-width: 768px) {
  /* .main-layout-grid は 768px 以下で flex-direction:column になる。
     縦並びでは flex:1 が高さにしか効かず、
     幅は中身（表など）の広さのまま残ってはみ出す。
     align-items:flex-start も効いているので、幅を明示する。 */
  .right-content-area {
    width: 100%;
    align-self: stretch;
  }
  /* 表は中で横スクロールさせる。文字を折り返して潰すより読みやすい。 */
  .right-content-area .table-scroll { -webkit-overflow-scrolling: touch; }
}

@media (max-width: 767px) {
  .right-content-area .link-buttons-grid { grid-template-columns: 1fr; }
}


/* =========================================================
   看護部・診療科・休診情報のページ

   デザイン側はページごとに css/style.css を持っていて、
   どれも /first/ のものに各ページ分を足した形になっている。
   ここでは /first/ 分（このファイルの上の方）に無いものだけを足した。

   取り込み元:
     /kango/css/style.css       看護部
     /sinryo/css/style.css      診療科
     /outpatient/css/style.css  休診情報

   背景画像は /img/nursing2.jpg を
   /assets/img/kango/nursing2.jpg として自前で持つ。
   CSS に外部のアドレスを書かないこと（テストが検出する）。
========================================================= */

/* =========================================================
   ページの中身に置けるパーツ

   管理画面「ページの中身」で足せるブロックのうち、
   見出し・バナー・ボタン・ギャラリー・カルーセルの見た目。

   取り込み元: デザインの /parts/css/style.css
   /first/ 分（このファイルの上の方）に無いものだけを足してある。

   見出しはこの節には入れていない。デザインの /parts/ は見出しを
   .c-heading-lv2 / lv3 / lv4 で組んでいるが、このサイトは /first/ の
   .content-heading で既に同じ見た目を出しており、access ページなど
   テンプレート側でも直接使っている。両方を混ぜると同じページに
   少し違う見出しが並ぶため、.content-heading に h4 を足す形にした
   （このファイルの上の方、h3.content-heading の次）。

   クラス名は app/Views/front/partials/blocks.php と対。
   カルーセルとギャラリーの動きは public_web/assets/js/site.js。
========================================= */

/* デザイン側は :root に置いていたが、こちらの :root は
   このファイルの先頭にあり後勝ちにできないので、ここで定義する。
   変数は後から書いても :root に足されるため問題ない。 */
:root {
  --parts-blue: #a3283a;
  --parts-blue-dark: #6e1623;
  --parts-blue-light: #382b2e;
}
.c-button { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 340px; min-height: 64px; padding: 0 24px 0 32px; background-color: var(--parts-blue); border-radius: 40px; text-decoration: none; box-sizing: border-box; transition: background-color 0.3s ease, transform 0.3s ease; }
.c-button__text { color: #ffffff; font-size: 1.1rem; font-weight: 700; line-height: 1.4; }
.c-button__icon { color: #ffffff; font-size: 30px; flex-shrink: 0; transition: transform 0.3s ease; }
.c-button:hover { background-color: var(--parts-blue-dark); transform: translateY(-2px); }
.c-button:hover .c-button__icon { transform: translateX(4px); }
/* 縦の間隔はほかのブロックと同じ 40px。デザインのパーツ集から
   持ってきたときに余白が付いておらず、最下部に置くと
   下に隙間が出なかった。 */
.c-button-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 40px 0; }
/* 横に並べる数は管理画面で選ぶ。
   2 列以上のときは、ボタンが列の幅いっぱいに伸びるよう max-width を外す。 */
.c-button-list--1 { grid-template-columns: minmax(0, 1fr); }
/* 縦 1 列のときは、文字の長さに合わせた幅にする。
   340px で固定していたため、文字が長いと途中で折り返していた。
   画面に入りきらないときだけ折り返す。 */
.c-button-list--1 .c-button { width: auto; max-width: 100%; gap: 24px; }
/* 寄せ方。幅が中身に合う縦 1 列のときに効く。
   横に 2 列以上並べたときは、ボタンが枠いっぱいに広がるので変わらない。 */
.c-button-list--left { justify-items: start; }
.c-button-list--center { justify-items: center; }
.c-button-list--right { justify-items: end; }
.c-button-list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.c-button-list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.c-button-list--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.c-button-list--2 .c-button,
.c-button-list--3 .c-button,
.c-button-list--4 .c-button { max-width: none; }
/* 列が多いと文字とアイコンが詰まるので、左右の余白を詰める */
.c-button-list--3 .c-button,
.c-button-list--4 .c-button { padding: 0 16px 0 20px; }
.c-button-list--4 .c-button__text { font-size: 1rem; }
.c-button__icon--external { font-size: 26px; }
.c-button:hover .c-button__icon--external { transform: translate(2px, -2px); }
.c-banner1-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin: 40px 0; }
/* デザインは 2 列の一覧しか持っていない。1 個だけ置いたときに
   右半分が空くのを避けるため、1 列ぶんの幅で出す。 */
.c-banner1-list--single { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
.c-banner1 { position: relative; display: block; aspect-ratio: 5 / 3; border-radius: 16px; overflow: hidden; text-decoration: none; }
.c-banner1__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.c-banner1:hover .c-banner1__img { transform: scale(1.06); }
.c-banner1__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.18) 45%, rgba(0, 0, 0, 0.05) 100%); }
.c-banner1__text { position: absolute; left: 6%; right: 16%; bottom: 7%; color: #ffffff; font-size: clamp(0.9rem, 1.6vw, 1.15rem); font-weight: 700; line-height: 1.3; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
.c-banner1__icon { position: absolute; right: 5%; bottom: 6%; color: #ffffff; font-size: clamp(20px, 2.4vw, 26px); transition: transform 0.3s ease; }
.c-banner1:hover .c-banner1__icon { transform: translateX(3px); }
.c-banner2 { display: flex; width: 100%; margin: 40px 0; background-color: #262626; border-radius: 12px; overflow: hidden; text-decoration: none; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.c-banner2:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14); }
.c-banner2__img-wrap { flex: 0 0 44%; overflow: hidden; }
.c-banner2__img { width: 100%; height: 100%; min-height: 220px; object-fit: cover; display: block; transition: transform 0.5s ease; }
.c-banner2:hover .c-banner2__img { transform: scale(1.05); }
.c-banner2__body { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 28px 32px; }
.c-banner2__title { position: relative; margin: 0 0 14px; padding-left: 16px; color: #e0e0e0; font-size: clamp(1.05rem, 1.8vw, 1.3rem); font-weight: 700; line-height: 1.4; }
.c-banner2__title::before { content: ""; position: absolute; left: 0; top: 0.15em; width: 5px; height: 1.1em; background-color: var(--parts-blue); border-radius: 3px; }
.c-banner2__copy { margin: 0 0 22px; color: #c2c2c2; font-size: clamp(0.88rem, 1.3vw, 1rem); line-height: 1.8; }
.c-banner2__button { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 280px; min-height: 48px; padding: 0 14px 0 22px; background-color: var(--parts-blue); border-radius: 40px; color: #ffffff; font-size: clamp(0.88rem, 1.3vw, 1rem); font-weight: 700; box-sizing: border-box; transition: background-color 0.3s ease; }
.c-banner2__button span { color: #ffffff; }
.c-banner2__button .material-symbols-outlined { font-size: 26px; transition: transform 0.3s ease; }
.c-banner2:hover .c-banner2__button { background-color: var(--parts-blue-dark); }
.c-banner2:hover .c-banner2__button .material-symbols-outlined { transform: translateX(3px); }
.c-gallery { column-count: 3; column-gap: 16px; }
.c-gallery__item { position: relative; display: block; margin: 0 0 16px; border-radius: 14px; overflow: hidden; break-inside: avoid; cursor: zoom-in; background-color: #362f2d; }
.c-gallery__img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.c-gallery__item--tall { aspect-ratio: 3 / 4; }
.c-gallery__item--square { aspect-ratio: 1 / 1; }
.c-gallery__item--wide { aspect-ratio: 4 / 3; }
.c-gallery__item--short { aspect-ratio: 16 / 10; }
.c-gallery__item::after { content: ""; position: absolute; inset: 0; background: rgba(20, 35, 55, 0); transition: background-color 0.3s ease; pointer-events: none; }
.c-gallery__item:hover .c-gallery__img { transform: scale(1.06); }
.c-gallery__item:hover::after { background: rgba(20, 35, 55, 0.25); }
.c-gallery__zoom { position: absolute; right: 12px; bottom: 12px; z-index: 2; color: #ffffff; font-size: 26px; opacity: 0; transform: translateY(6px); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; }
.c-gallery__item:hover .c-gallery__zoom { opacity: 1; transform: translateY(0); }
.c-lightbox { position: fixed; inset: 0; z-index: 20000; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, 0.85); }
.c-lightbox.is-open { display: flex; }
.c-lightbox__img { max-width: min(1100px, 100%); max-height: 100%; border-radius: 8px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4); }
.c-lightbox__close { position: absolute; top: 16px; right: 16px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: #262626; color: #e0e0e0; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease; }
.c-lightbox__close:hover { background: var(--parts-blue); color: #ffffff; }
.c-carousel { position: relative; --per-view: 3; --gap: 16px; }
.c-carousel__track { display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; padding: 4px 0 8px; }
.c-carousel__track::-webkit-scrollbar { display: none; }
.c-carousel__slide { position: relative; flex: 0 0 calc((100% - var(--gap) * (var(--per-view) - 1)) / var(--per-view)); aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; scroll-snap-align: start; background-color: #362f2d; text-decoration: none; }
.c-carousel__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; -webkit-user-drag: none; user-select: none; }
.c-carousel__slide:hover .c-carousel__img { transform: scale(1.06); }
.c-carousel__shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.12) 45%, rgba(0, 0, 0, 0) 100%); }
.c-carousel__caption { position: absolute; left: 6%; right: 6%; bottom: 6%; color: #ffffff; font-size: clamp(0.9rem, 1.4vw, 1.05rem); font-weight: 700; line-height: 1.4; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
.c-carousel__nav { position: absolute; top: calc(50% - 20px); z-index: 3; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border: none; border-radius: 50%; background: #262626; color: var(--parts-link); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); cursor: pointer; transform: translateY(-50%); transition: background-color 0.3s ease, color 0.3s ease, opacity 0.3s ease, transform 0.3s ease; }
.c-carousel__nav:hover { background: var(--parts-blue); color: #ffffff; transform: translateY(-50%) scale(1.06); }
.c-carousel__nav--prev { left: -16px; }
.c-carousel__nav--next { right: -16px; }
.c-carousel__nav[disabled] { opacity: 0.3; cursor: default; pointer-events: none; }
.c-carousel__dots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.c-carousel__dot { width: 10px; height: 10px; padding: 0; border: none; border-radius: 50%; background: var(--parts-line); cursor: pointer; transition: background-color 0.3s ease, transform 0.3s ease; }
.c-carousel__dot.is-active { background: var(--parts-blue); transform: scale(1.25); }
/* 画面の狭い順に効かせたいので、広い方（900px）を先に置く。
   取り込んだときは 600px が先に並んでいて、携帯電話の幅でも
   あとから読む 900px の指定（2 枚見せ）が勝ってしまっていた。 */
@media screen and (max-width: 900px) {
  .c-carousel { --per-view: 2; }
}
@media screen and (max-width: 768px) {
  .c-gallery { column-count: 2; column-gap: 12px; }
  .c-gallery__item { margin-bottom: 12px; border-radius: 12px; }
}
@media screen and (max-width: 600px) {
  /* デザインは携帯電話の幅でもバナーを横 2 列のままにしているが、
     1 枚が 160px ほどになり、上に乗せた文字が読めなくなる。
     このサイトでは縦に 1 枚ずつ並べる。 */
  .c-banner1-list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  /* 携帯電話では、何列を選んでいてもボタンは縦に並べる */
  .c-button-list--2,
  .c-button-list--3,
  .c-button-list--4 { grid-template-columns: minmax(0, 1fr); }
  .c-banner1 { border-radius: 12px; }
  .c-banner2 { flex-direction: column; }
  .c-banner2__img-wrap { flex: none; height: 200px; }
  .c-banner2__body { padding: 22px 20px; }
  .c-banner2__button { max-width: 100%; }
  .c-button { max-width: 100%; }
  .c-carousel { --per-view: 1.15; --gap: 12px; }
  .c-carousel__slide { border-radius: 12px; }
  .c-carousel__nav { width: 40px; height: 40px; }
  .c-carousel__nav--prev { left: 4px; }
  .c-carousel__nav--next { right: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  .c-carousel__track { scroll-behavior: auto; }
  .c-gallery__img, .c-carousel__img { transition: none; }
}

/* =========================================================
   ページの中身に置けるパーツ

   文章と写真（split）・カード一覧（cards）・PDF の表示（pdf）と、
   表の拡張（注釈・1 列目の見出し・携帯電話でのカード表示）。

   取り込み元: デザインの /ningen-doc/ /option/ の style.css。
   セクションの外枠（背景・左右の余白・max-width）は外してある。
   こちらは .right-content-area や .kn-page の中に入るので、
   幅と左右の余白は外側が決めるため。

   クラス名は app/Views/front/partials/blocks.php と対。
========================================= */

/* ---- 文章と写真（A） ---- */
.c-split { margin: 40px 0; }
.c-split__inner { display: flex; align-items: center; gap: 60px; }
.c-split__body { flex: 1 1 55%; min-width: 0; }
/* 43-29: 見出しの大きさを選べるようにした。見た目は見出しブロックと
   同じ .content-heading が持つので、ここでは上の余白だけ消す。
   .right-content-area h2.content-heading（0,2,1）より強くするため
   class を 2 つ重ねている。 */
.right-content-area .c-split__heading.content-heading { margin-top: 0; }
.c-split__text { font-size: 0.9375rem; line-height: 2; letter-spacing: 0.08em; color: #c2c2c2; text-align: justify; }
.c-split__text > :first-child { margin-top: 0; }
.c-split__text > :last-child { margin-bottom: 0; }
.c-split__media { flex: 0 0 40%; max-width: 400px; }
/* 43-29: 写真を縦にも横にも並べられるようにした。
   横に並べるときは、枚数に応じて 1 枚ぶんの幅が縮む。 */
.c-split__media--column { display: flex; flex-direction: column; gap: 12px; }
.c-split__media--row { display: flex; flex-wrap: wrap; gap: 12px; max-width: 520px; }
.c-split__media--row .c-split__figure { flex: 1 1 calc(50% - 12px); min-width: 0; }
.c-split__figure { margin: 0; }
.c-split__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
/* 写真の形は管理画面で選ぶ。
   選んでいない古いページは上の 4:3 のまま。 */
.c-split__media--r4-3 .c-split__img { aspect-ratio: 4 / 3; }
.c-split__media--r3-2 .c-split__img { aspect-ratio: 3 / 2; }
.c-split__media--r2-3 .c-split__img { aspect-ratio: 2 / 3; }
.c-split__media--r1-1 .c-split__img { aspect-ratio: 1 / 1; }
/* たて長は横に並べると背が高くなりすぎるので、まとまりの幅を抑える */
.c-split__media--r2-3.c-split__media--row { max-width: 420px; }
/* 写真ごとの補足。写真の真下に出す */
.c-split__caption { margin: 6px 0 0; font-size: 0.75rem; line-height: 1.7; color: #c2c2c2; }
.c-split__note { flex-basis: 100%; margin: 8px 0 0; font-size: 0.75rem; line-height: 1.7; color: #888888; }
/* 写真を左に置く指定。並びを入れ替えるだけで中身は同じ。 */
.c-split--left .c-split__inner { flex-direction: row-reverse; }

@media screen and (max-width: 768px) {
  .c-split { margin: 28px 0; }
  /* 携帯電話では、写真を左右どちらに置いていても写真が上・文章が下。
     column-reverse なのは body が先に書かれているため。 */
  .c-split__inner,
  .c-split--left .c-split__inner { flex-direction: column-reverse; align-items: stretch; gap: 24px; }
  .c-split__media { flex: none; max-width: 100%; }
  /* 携帯電話では写真を縦に並べる（横だと 1 枚が小さくなりすぎる） */
  .c-split__media--row { flex-direction: column; max-width: 100%; }
  .c-split__media--row .c-split__figure { flex: none; }
  .c-split__text { font-size: 0.875rem; line-height: 1.9; }
}

/* ---- カード一覧（D） ---- */
.c-cards { --cards-blue: var(--parts-blue); --cards-title: var(--parts-blue); --cards-line: #505050; margin: 40px 0; }
.c-cards__heading { margin: 0 0 20px; font-size: var(--fs-h3, 1.25rem); font-weight: 700; line-height: 1.4; color: #e0e0e0; }
.c-cards__grid { display: grid; gap: 24px; }
/* 列数は管理画面で選ぶ。見た目（箇条書き／説明文）は
   間隔だけを持ち、何列かは c-cards__grid--N が決める。
   狭い画面では下の media query が勝って 2 列・1 列になる。 */
.c-cards--list .c-cards__grid { gap: 40px; }
.c-cards__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.c-cards__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.c-cards__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.c-cards__card { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--cards-line); border-radius: 12px; background: #262626; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); color: inherit; text-decoration: none; transition: transform 0.3s ease, box-shadow 0.3s ease; }
a.c-cards__card:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.1); }
.c-cards__thumb { margin: 0; overflow: hidden; background-color: #282828; }
.c-cards__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.4s ease; }
a.c-cards__card:hover .c-cards__thumb img { transform: scale(1.04); }
.c-cards__body { flex: 1; padding: 16px 16px 62px; }

/* 「箇条書き」はデザインの検診案内（.hc-card）の形に合わせる。
   見出しの右に矢印を置き、下に区切り線を引いてから項目を並べる。
   「説明文」のオプション検査（.option-card）とは別の形なので分けている。 */
.c-cards--list .c-cards__card { border-color: #424a55; }
.c-cards--list .c-cards__thumb img { aspect-ratio: 16 / 10; }
.c-cards--list .c-cards__body { padding: 14px 16px 16px; }
.c-cards--list .c-cards__head { padding: 6px 0 12px; }
.c-cards--list .c-cards__title { margin: 0; font-size: 1.125rem; color: #e0e0e0; letter-spacing: normal; }
.c-cards--list .c-cards__list { margin-top: 0; padding-top: 12px; border-top: 1px solid #3f4a58; }
.c-cards--list .c-cards__list li { padding-left: 18px; font-size: 0.875rem; line-height: 1.6; }
.c-cards--list .c-cards__list li::before { top: 0.6em; width: 8px; height: 8px; background: var(--parts-blue); }
/* 矢印は見出しと同じ行。丸い枠線だけで、塗りつぶさない。 */
.c-cards--list .c-cards__arrow { width: 38px; height: 38px; background: transparent; border: 2px solid var(--parts-line); box-shadow: none; color: var(--parts-link); }
.c-cards--list a.c-cards__card:hover .c-cards__arrow { border-color: var(--parts-blue); transform: translateX(4px); }
.c-cards__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.c-cards__title { margin: 0 0 6px; font-size: 1.0625rem; font-weight: 700; line-height: 1.5; letter-spacing: 0.08em; color: var(--parts-link); }
.c-cards__text { margin: 0; font-size: 0.8125rem; line-height: 1.9; letter-spacing: 0.06em; color: #d6d6d6; }
.c-cards__list { list-style: none; margin: 10px 0 0; padding: 0; }
.c-cards__list li { position: relative; padding-left: 16px; font-size: 0.875rem; line-height: 2; color: #d6d6d6; }
.c-cards__list li::before { content: ""; position: absolute; left: 0; top: 0.85em; width: 7px; height: 7px; border-radius: 50%; background: var(--cards-blue); }
.c-cards__arrow { flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-size: 1.125rem; line-height: 1; transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; }
/* 「説明文」はデザインどおりカードの右下に置く（.option-card の形）。 */
.c-cards--text .c-cards__arrow { position: absolute; right: 14px; bottom: 14px; background-color: var(--cards-blue); box-shadow: 0 4px 10px rgba(139, 30, 45, 0.4); color: #ffffff; }
a.c-cards__card:hover .c-cards--text .c-cards__arrow,
.c-cards--text a.c-cards__card:hover .c-cards__arrow { background-color: var(--parts-blue); transform: translateX(4px); }

@media screen and (max-width: 900px) {
  .c-cards--list .c-cards__grid,
  .c-cards--text .c-cards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media screen and (max-width: 520px) {
  .c-cards--list .c-cards__grid,
  .c-cards--text .c-cards__grid { grid-template-columns: 1fr; gap: 16px; }
  .c-cards__body { padding: 14px 14px 58px; }
}

/* ---- PDF の表示（I） ---- */
.c-pdf { --pdf-green: var(--parts-blue); --pdf-blue: var(--parts-blue); --pdf-blue-dark: var(--parts-blue-dark); margin: 50px 0; }
.c-pdf__heading { display: flex; align-items: center; gap: 10px; margin: 0 0 24px; font-size: var(--fs-h3, 1.25rem); font-weight: 700; line-height: 1.4; color: #e0e0e0; }
.c-pdf__heading::before { content: ""; flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle, #262626 0 22%, var(--pdf-green) 25% 100%); }
.c-pdf__viewer { border: 1px solid #505050; border-radius: 8px; overflow: hidden; background: #2e2e2e; }
.c-pdf__object { display: block; width: 100%; height: min(85vh, 1200px); }
.c-pdf__fallback { margin: 0; padding: 40px 20px; font-size: 0.9375rem; line-height: 1.8; text-align: center; color: #e0e0e0; }
.c-pdf__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.c-pdf__action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 220px; padding: 15px 28px; border: 1px solid var(--pdf-blue); border-radius: 40px; background: #262626; font-size: 0.9375rem; font-weight: 700; line-height: 1; letter-spacing: 0.08em; color: var(--parts-link); text-decoration: none; transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease; }
.c-pdf__action .material-symbols-outlined { font-size: 20px; color: inherit; }
.c-pdf__action:hover { background: var(--parts-blue-light); transform: translateY(-2px); }
.c-pdf__action.is-primary { background: var(--pdf-blue); color: #ffffff; }
.c-pdf__action.is-primary:hover { background: var(--pdf-blue-dark); color: #ffffff; }

@media screen and (max-width: 768px) {
  .c-pdf { margin: 36px 0; }
  .c-pdf__object { height: 65vh; }
  .c-pdf__actions { flex-direction: column; }
  .c-pdf__action { width: 100%; min-width: 0; }
}

/* ---- 表の拡張 ---- */
/* 表の下の注釈。デザインは赤文字に「※」を付けている。 */
.content-table-notes { list-style: none; margin: 10px 0 24px; padding: 0; }
.content-table-notes li { font-size: 0.8125rem; line-height: 1.7; letter-spacing: 0.05em; color: #e95353; }
.content-table-notes li::before { content: "※"; }
/* 1 列目を見出しにする指定。 */
.content-table--rowhead tbody th { background-color: transparent; font-weight: 700; text-align: left; color: #ebebeb; }

/* 携帯電話では、表を 1 行ずつのカードに組み替える。
   横スクロールだと右側の列があることに気付けないため。
   各項目の前に出す列名は td の data-label（blocks.php が入れる）。

   列名が無いと「数字だけが右に並ぶ表」になって読めないので、
   1 行目を見出しにした表（--cards）だけに効かせる。 */
@media screen and (max-width: 768px) {
  .content-table--cards,
  .content-table--cards thead,
  .content-table--cards tbody,
  .content-table--cards tr,
  .content-table--cards th,
  .content-table--cards td { display: block; width: 100%; box-sizing: border-box; }
  .content-table--cards { border: none; background: transparent; }
  .content-table--cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .content-table--cards tbody tr { margin-bottom: 16px; border: 1px solid #5b5b5b; background: #262626; }
  .content-table--cards tbody th { padding: 12px 14px; border: none; border-bottom: 1px solid #5b5b5b; background-color: #343434; font-size: 0.9375rem; text-align: left; }
  .content-table--cards tbody td { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: none; border-bottom: 1px solid #4f4f4f; text-align: right; }
  .content-table--cards tbody td:last-child { border-bottom: none; }
  .content-table--cards tbody td[data-label]::before { content: attr(data-label); font-size: 0.8125rem; color: #c2c2c2; text-align: left; }
}

/* ---- チェックつきの枠（B） ---- */
/* 取り込み元: デザインの c-mrcp-rec。c-visit__list / c-risk__list も同じ形。 */
.c-checklist { --check-teal: var(--parts-blue); --check-line: var(--parts-line); margin: 40px 0; }
.c-checklist__panel { padding: 22px; border: 1px solid var(--check-line); border-radius: 14px; background: var(--parts-blue-light); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); }
.c-checklist__title { margin: 0 0 20px; font-size: 1.0625rem; font-weight: 700; line-height: 1.5; letter-spacing: 0.1em; color: #e0e0e0; }
.c-checklist__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.c-checklist__list--single { grid-template-columns: 1fr; }
.c-checklist__list li { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 1px solid var(--check-line); border-radius: 8px; background: #262626; font-size: 0.9375rem; line-height: 1.6; letter-spacing: 0.04em; color: #d6d6d6; }
.c-checklist__list .material-symbols-outlined { flex-shrink: 0; font-size: 26px; color: var(--parts-link); }
.c-checklist__list strong { font-weight: 700; color: var(--parts-link); }
.c-checklist__note { margin: 20px 0 0; padding: 14px 16px; border: 1px dashed var(--parts-line); border-radius: 8px; background: #262626; font-size: 0.8125rem; line-height: 1.8; letter-spacing: 0.05em; color: #cccccc; }

@media screen and (max-width: 768px) {
  .c-checklist__list { grid-template-columns: 1fr; gap: 10px; }
}
@media screen and (max-width: 600px) {
  .c-checklist { margin: 28px 0; }
  .c-checklist__panel { padding: 18px 14px; }
  .c-checklist__list li { padding: 12px; font-size: 0.875rem; }
}

/* ---- カード一覧・文字だけ（C） ---- */
/* 取り込み元: デザインの c-sign（見出し＋説明文）と c-risk（見出し＋札＋チェック項目）。
   同じ形なので 1 つの型にまとめ、札と項目は入力があるときだけ出す。 */
.c-textcards { --tc-green: var(--parts-blue); --tc-check: var(--parts-blue); --tc-line: #565656; margin: 40px 0; }
.c-textcards__heading { margin: 0 0 14px; font-size: var(--fs-h3, 1.25rem); font-weight: 700; line-height: 1.4; color: #e0e0e0; }
.c-textcards__lead { margin: 0 0 24px; font-size: 0.9375rem; line-height: 2; letter-spacing: 0.08em; color: #d6d6d6; }
/* 43-35: align-items: start をやめて、同じ行のカードの高さを揃える。
   説明文の長さが違っても、カードの下端がそろう。 */
.c-textcards__grid { display: grid; gap: 20px; align-items: stretch; }
.c-textcards__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.c-textcards__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.c-textcards__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* カードを縦の flex にして、中身が増えても枠が伸びるようにする */
.c-textcards__card { display: flex; flex-direction: column; padding: 24px 30px 22px; border: 1px solid var(--tc-line); border-radius: 10px; background: #262626; }
/* 列が多いときは余白を詰める（1 列あたりが狭くなるため） */
.c-textcards__grid--3 .c-textcards__card,
.c-textcards__grid--4 .c-textcards__card { padding: 20px 20px 18px; }
.c-textcards__title { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0 0 14px; padding: 2px 0 14px 16px; border-bottom: 2px solid #475347; font-size: var(--fs-h4, 1.125rem); font-weight: 700; line-height: 1.5; letter-spacing: 0.06em; color: #e0e0e0; }
.c-textcards__title::before { content: ""; position: absolute; left: 0; top: 0.15em; width: 5px; height: 1.4em; border-radius: 3px; background: var(--tc-green); }
.c-textcards__badge { display: inline-block; padding: 3px 10px; border-radius: 20px; background: #3c2121; font-size: 0.75rem; font-weight: 700; line-height: 1.4; letter-spacing: 0.04em; color: #d96154; }
.c-textcards__text { margin: 0; font-size: 0.9375rem; line-height: 2; letter-spacing: 0.1em; color: #e0e0e0; }
.c-textcards__list { list-style: none; margin: 10px 0 0; padding: 0; }
.c-textcards__list li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid #525252; font-size: 0.9375rem; line-height: 1.7; letter-spacing: 0.05em; color: #e0e0e0; }
.c-textcards__list li:last-child { border-bottom: none; }
.c-textcards__list .material-symbols-outlined { flex-shrink: 0; margin-top: 0.2em; font-size: 20px; color: var(--parts-link); }
.c-textcards__list strong { font-weight: 700; color: var(--parts-link); }

@media screen and (max-width: 768px) {
  .c-textcards__grid--2,
  .c-textcards__grid--3,
  .c-textcards__grid--4 { grid-template-columns: 1fr; gap: 14px; }
}
@media screen and (max-width: 600px) {
  .c-textcards { margin: 28px 0; }
  .c-textcards__card { padding: 18px; }
  .c-textcards__text,
  .c-textcards__list li { font-size: 0.875rem; }
}

/* ---- 項目カード・写真つき（E） ---- */
/* 取り込み元: デザインの c-bcm。文章が左、縦長の写真が右。 */
.c-itemcards { --ic-green: var(--parts-blue); margin: 40px 0; }
.c-itemcards__heading { display: flex; align-items: center; gap: 10px; margin: 0 0 24px; font-size: var(--fs-h3, 1.25rem); font-weight: 700; line-height: 1.4; color: #e0e0e0; }
.c-itemcards__heading::before { content: ""; flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle, #262626 0 22%, var(--ic-green) 25% 100%); }
.c-itemcards__card { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 30px; align-items: center; margin-bottom: 24px; padding: 22px 30px 22px 20px; border: 1px solid #525252; border-radius: 10px; background: #262626; box-shadow: 3px 4px 6px rgba(0, 0, 0, 0.1); }
.c-itemcards__card:last-child { margin-bottom: 0; }
/* 写真が無いカードは 1 列にする（空の列が残らないように）。
   :has() ではなくクラスで分けているのは、対応していない閲覧環境でも
   空白の列が出ないようにするため。 */
.c-itemcards__card--nophoto { grid-template-columns: 1fr; }
.c-itemcards__name { margin: 0 0 18px; font-size: var(--fs-h4, 1.125rem); font-weight: 700; line-height: 1.5; letter-spacing: 0.1em; color: #e0e0e0; }
.c-itemcards__text { margin: 0; font-size: 0.875rem; line-height: 2; letter-spacing: 0.1em; color: #c2c2c2; }
.c-itemcards__note { margin: 18px 0 0; font-size: 0.75rem; line-height: 1.7; letter-spacing: 0.08em; color: #e95353; }
.c-itemcards__note::before { content: "※"; }
.c-itemcards__media { width: 140px; justify-self: end; }
.c-itemcards__thumb { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border: 5px solid #454545; border-radius: 20px; box-shadow: 0 0 0 1px #e3e3e3, 3px 4px 6px rgba(0, 0, 0, 0.25); }

@media screen and (max-width: 600px) {
  .c-itemcards { margin: 28px 0; }
  .c-itemcards__card { grid-template-columns: 1fr; gap: 18px; padding: 20px 18px; }
  .c-itemcards__media { width: 140px; justify-self: center; }
}

/* ---- 時間の流れ（G） ---- */
/* 取り込み元: デザインの c-course / c-timeline。
   続けて置いた「時間の流れ」を横 2 列に並べる枠が .c-course。 */
.c-course { --circle-size: 88px; --timeline-gap: 16px; --timeline-accent: var(--parts-blue); --timeline-green: var(--parts-blue); --timeline-line: #585858; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; align-items: start; margin: 50px 0; padding: 40px 24px; border-radius: 10px; background-color: #2c2c2c; }
.c-course--single { grid-template-columns: 1fr; }
.c-course__heading { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: var(--fs-h3, 1.25rem); font-weight: 700; line-height: 1.4; color: #e0e0e0; }
.c-course__heading::before { content: ""; flex-shrink: 0; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle, #262626 0 22%, var(--timeline-green) 25% 100%); }
.c-course__text { margin: 0 0 28px; font-size: 0.8125rem; line-height: 1.9; letter-spacing: 0.08em; color: #d6d6d6; }
.c-timeline { position: relative; list-style: none; margin: 0; padding: 0; }
.c-timeline::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--circle-size) / 2); width: 2px; background: var(--timeline-line); z-index: 0; }
.c-timeline__day { margin: 0 0 12px; padding: 8px 14px; border-radius: 6px; background: var(--timeline-accent); font-size: 0.9375rem; font-weight: 700; line-height: 1.4; color: #ffffff; }
.c-timeline + .c-timeline__day { margin-top: 36px; }
.c-timeline__item { position: relative; z-index: 1; display: grid; grid-template-columns: var(--circle-size) minmax(0, 1fr); align-items: center; column-gap: var(--timeline-gap); min-height: var(--circle-size); margin: 0 0 36px; }
.c-timeline__item:last-child { margin-bottom: 0; }
.c-timeline__time { position: relative; z-index: 2; display: grid; place-items: center; width: var(--circle-size); height: var(--circle-size); padding: 4px; box-sizing: border-box; border: 4px solid #454545; border-radius: 50%; background: var(--timeline-accent); box-shadow: 0 0 0 1px #e3e3e3; font-size: 0.875rem; font-weight: 700; line-height: 1.2; text-align: center; color: #ffffff; }
.c-timeline__body { padding: 14px 18px; border: 1px solid #4f4f4f; border-radius: 8px; background: #262626; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03); }
.c-timeline__body strong { display: block; margin-bottom: 6px; font-size: 0.9375rem; line-height: 1.4; color: #e0e0e0; }
.c-timeline__body p { margin: 0; font-size: 0.75rem; line-height: 1.7; letter-spacing: 0.06em; color: #cccccc; }

@media screen and (max-width: 900px) {
  .c-course { grid-template-columns: 1fr; gap: 40px; }
}
@media screen and (max-width: 600px) {
  .c-course { --circle-size: 72px; --timeline-gap: 12px; padding: 28px 16px; }
  .c-timeline__time { font-size: 0.75rem; border-width: 3px; }
  .c-timeline__item { margin-bottom: 24px; }
}

/* ---- タブで切り替える表（H） ---- */
/* JavaScript が動かないときは、すべての表が縦に並んだまま出る。
   タブの見出しは押せないので隠す（押しても切り替わらないため）。 */
.c-tabs { margin: 40px 0; }
.c-tabs__list { display: none; }
.c-tabs.is-ready .c-tabs__list { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.c-tabs__tab { padding: 12px 22px; border: 1px solid var(--parts-line); border-radius: 40px; background: #262626; font-size: 0.9375rem; font-weight: 700; line-height: 1; letter-spacing: 0.06em; color: var(--parts-link); cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease; }
.c-tabs__tab:hover { background: var(--parts-blue-light); }
.c-tabs__tab[aria-selected="true"] { background: var(--parts-blue); border-color: var(--parts-blue); color: #ffffff; }
.c-tabs__panel[hidden] { display: none; }

@media screen and (max-width: 600px) {
  .c-tabs__tab { padding: 10px 16px; font-size: 0.875rem; }
}

/* ---- 施設の案内（J） ---- */
/* 取り込み元: デザインの c-stay。地図は押されるまで読み込まない枠に入れている。 */
.c-facility { --fac-green: var(--parts-blue); --fac-orange: var(--parts-blue); --fac-red: var(--parts-blue); --fac-blue: var(--parts-blue); margin: 40px 0; }
.c-facility__heading { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: var(--fs-h3, 1.25rem); font-weight: 700; line-height: 1.4; color: #e0e0e0; }
.c-facility__heading::before { content: ""; flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle, #262626 0 22%, var(--fac-green) 25% 100%); }
.c-facility__lead { margin: 0 0 20px; font-size: 0.9375rem; line-height: 2; letter-spacing: 0.08em; color: #d6d6d6; }
.c-facility__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: start; }
.c-facility__grid--nomap { grid-template-columns: 1fr; }
.c-facility__name { margin: 0 0 6px; font-size: var(--fs-h4, 1.125rem); font-weight: 700; line-height: 1.5; letter-spacing: 0.08em; color: #e0e0e0; }
.c-facility__address { margin: 0 0 16px; font-size: 0.875rem; line-height: 1.8; color: #c2c2c2; }
.c-facility__notice { padding: 14px 16px; border: 1px solid #4f4f4f; border-radius: 8px; background: #2a2a2a; }
.c-facility__notice-title { margin: 0 0 8px; font-size: 0.875rem; font-weight: 700; color: #e0e0e0; }
.c-facility__notice-list { list-style: none; margin: 0; padding: 0; }
.c-facility__notice-list li { position: relative; padding-left: 14px; font-size: 0.8125rem; line-height: 1.9; color: #cccccc; }
.c-facility__notice-list li::before { content: "・"; position: absolute; left: 0; }
/* 注意書きはデザインに合わせて、赤い丸と区切り線を付ける。 */
.c-facility__notice { padding: 18px 20px 14px 28px; border: 0; border-radius: 0; background-color: #2c2c2c; }
.c-facility__notice-title { margin: 0 0 12px; font-size: 0.9375rem; font-weight: 700; color: #e0e0e0; }
.c-facility__notice-list li { position: relative; padding: 10px 0 10px 24px; border-bottom: 1px solid #525252; font-size: 0.8125rem; line-height: 1.7; letter-spacing: 0.05em; color: #e0e0e0; }
.c-facility__notice-list li:last-child { border-bottom: none; }
.c-facility__notice-list li::before { content: ""; position: absolute; left: 0; top: 1.15em; width: 12px; height: 12px; border-radius: 50%; background-color: var(--fac-red); }

/* リンクは橙色の大きなボタン（デザインの .c-stay__link）。
   文字のリンクだと、デザインのボタンに見えない。 */
.c-facility__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; padding: 16px 28px; border-radius: 40px; background-color: var(--fac-orange); font-size: 0.9375rem; font-weight: 700; line-height: 1; letter-spacing: 0.08em; color: #ffffff; text-decoration: none; transition: background-color 0.3s ease, transform 0.3s ease; }
.c-facility__link .material-symbols-outlined { font-size: 20px; color: #ffffff; }
.c-facility__link:hover { background-color: var(--parts-blue); transform: translateY(-2px); color: #ffffff; }

/* 地図。押されるまで読み込まないので、押す前の見た目もここで決める。
   site.css の .map-embed / .button-link は健診センターのページでは
   読み込まれないため、この節だけで完結させている。 */
.c-facility__map .map-embed { position: relative; width: 100%; aspect-ratio: 560 / 390; overflow: hidden; border: 1px solid #505050; border-radius: 8px; background-color: #353535; }
.c-facility__map .map-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.c-facility__map-ask { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: 100%; padding: 24px 20px; text-align: center; }
.c-facility__map-note { margin: 0; font-size: 0.8125rem; line-height: 1.8; color: #d6d6d6; }
.c-facility__map-button { padding: 14px 28px; border: 0; border-radius: 40px; background-color: var(--fac-blue); font-size: 0.9375rem; font-weight: 700; line-height: 1; color: #ffffff; cursor: pointer; transition: background-color 0.3s ease; }
.c-facility__map-button:hover { background-color: var(--parts-blue-dark); }
.c-facility__map-alt { margin: 0; font-size: 0.8125rem; }
.c-facility__map-alt a { color: var(--parts-link); }

@media screen and (max-width: 768px) {
  .c-facility__grid { grid-template-columns: 1fr; gap: 20px; }
  .c-facility__map .map-embed { aspect-ratio: 4 / 3; }
}

/* ---- アイコンカード一覧（K） ---- */
/* 取り込み元: デザインの age-card（年代別・症状別おすすめ）。
   デザインは重ねたときだけ開く作りだが、携帯電話では重ねられないので
   押しても開くようにしてある（site.js が is-open を付ける）。 */
.c-iconcards { --icc-brand: var(--parts-blue); --icc-accent: var(--parts-blue); --icc-line: #584549; margin: 40px 0; }
.c-iconcards__heading { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: clamp(1.125rem, 2.5vw, 1.375rem); font-weight: 700; line-height: 1.4; color: #f5f5f5; }
.c-iconcards__dot { flex: 0 0 14px; width: 14px; height: 14px; border-radius: 3px; background: var(--icc-accent); }
.c-iconcards__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.c-iconcards__card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 18px; border: 2px solid var(--icc-line); border-radius: 14px; background: #262626; transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
.c-iconcards__card[role="button"] { cursor: pointer; user-select: none; }
.c-iconcards__card:hover { border-color: var(--parts-line); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.08); transform: translateY(-2px); }
.c-iconcards__card:focus-visible { outline: 3px solid var(--parts-line); outline-offset: 4px; }
.c-iconcards__illust { width: 140px; height: 140px; overflow: hidden; border: 4px solid #454545; border-radius: 50%; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
.c-iconcards__illust img { display: block; width: 100%; height: 100%; object-fit: cover; }
.c-iconcards__label { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 1.125rem; font-weight: 800; letter-spacing: 0.08em; color: #ebebeb; }
.c-iconcards__arrow { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 2px solid var(--icc-brand); border-radius: 50%; line-height: 1; color: var(--parts-link); pointer-events: none; transition: background-color 0.2s ease, color 0.2s ease; }
.c-iconcards__card:hover .c-iconcards__arrow,
.c-iconcards__card.is-open .c-iconcards__arrow { background: var(--icc-brand); color: #ffffff; }
.c-iconcards__popup { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 10; padding: 15px; border: 2px solid var(--icc-line); border-radius: 12px; background: #262626; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; }
.c-iconcards__card:hover .c-iconcards__popup,
.c-iconcards__card:focus-within .c-iconcards__popup,
.c-iconcards__card.is-open .c-iconcards__popup { opacity: 1; visibility: visible; transform: translateY(0); }
.c-iconcards__list { display: grid; gap: 8px; list-style: none; margin: 0; padding: 0; }
.c-iconcards__list a,
.c-iconcards__list span { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 600; color: var(--parts-link); text-decoration: none; }
.c-iconcards__list a::before,
.c-iconcards__list span::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; border-radius: 1px; background: var(--icc-brand); }
.c-iconcards__list a:hover { color: var(--parts-link); text-decoration: underline; }

@media screen and (max-width: 1200px) { .c-iconcards__grid { grid-template-columns: repeat(3, 1fr); } }
@media screen and (max-width: 900px)  { .c-iconcards__grid { grid-template-columns: repeat(2, 1fr); } }
@media screen and (max-width: 768px) {
  .c-iconcards__grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
  .c-iconcards__card { padding: 20px 15px; }
  .c-iconcards__illust { width: 110px; height: 110px; }
  .c-iconcards__label { font-size: 1rem; }
  .c-iconcards__list a, .c-iconcards__list span { font-size: 0.8125rem; }
}
@media screen and (max-width: 480px) { .c-iconcards__grid { grid-template-columns: 1fr; } }

/* ---- 大きなボタン（L） ---- */
/* 取り込み元: デザインの cta2（オプション検査・よくある質問）。 */
.c-ctapair { --cta-base: var(--parts-blue); --cta-hover: var(--parts-blue-dark); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin: 40px 0; }
.c-ctapair--single { grid-template-columns: 1fr; }
.c-ctapair__item { display: flex; align-items: center; justify-content: space-between; gap: clamp(12px, 3vw, 28px); padding: clamp(24px, 2.5vw, 40px) clamp(22px, 3.2vw, 32px); border-radius: 16px; background: var(--cta-base); color: #ffffff; font-weight: 700; text-decoration: none; transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease; }
.c-ctapair__item:hover { background: var(--cta-hover); transform: translateY(-1px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.16); }
.c-ctapair__icon { display: grid; place-items: center; flex-shrink: 0; width: 74px; height: 74px; border-radius: 50%; background: #262626; }
.c-ctapair__icon img { display: block; width: 36px; height: 36px; }
.c-ctapair__label { flex-grow: 1; font-size: clamp(1rem, 2.2vw, 1.25rem); letter-spacing: 0.04em; color: #ffffff; }
.c-ctapair__arrow { display: grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border: 2px solid rgba(255, 255, 255, 0.75); border-radius: 50%; color: #ffffff; transition: transform 0.25s ease, border-color 0.25s ease; }
.c-ctapair__item:hover .c-ctapair__arrow { transform: translateX(6px); border-color: #454545; }

@media screen and (max-width: 720px) {
  .c-ctapair { grid-template-columns: 1fr; gap: 15px; }
  .c-ctapair__item { padding: 18px 20px; gap: 15px; }
  .c-ctapair__icon { width: 52px; height: 52px; }
  .c-ctapair__icon img { width: 26px; height: 26px; }
  .c-ctapair__label { font-size: 1rem; }
  .c-ctapair__arrow { width: 34px; height: 34px; }
}

/* ---- 箇条書き ---- */
/* 旧サイトの本文にある「四角い印の一覧」を、HTML を書かずに作れるようにしたもの。 */
.c-list { margin: 28px 0; }
.c-list__heading { margin: 0 0 12px; font-size: var(--fs-h4, 1.125rem); font-weight: 700; line-height: 1.5; color: #e0e0e0; }
.c-list__items { list-style: none; margin: 0; padding: 0; }
.c-list__items li { position: relative; padding: 4px 0 4px 18px; font-size: 0.9375rem; line-height: 1.9; color: #d6d6d6; break-inside: avoid; }
.c-list__items li::before { content: ""; position: absolute; left: 0; top: 0.95em; width: 8px; height: 8px; background: var(--parts-blue); }
/* 1 列は既定の並びだが、指定が無いと「どこにも当たらないクラス」に
   なってしまう。明示しておく。 */
.c-list__items--1 { column-count: 1; }
.c-list__items--2 { column-count: 2; column-gap: 32px; }
.c-list__items--3 { column-count: 3; column-gap: 32px; }

@media screen and (max-width: 600px) {
  .c-list__items--2,
  .c-list__items--3 { column-count: 1; }
}

/* =========================
   横棒グラフ（barchart）
   数値の大小を並べて見せる。デザイナーから受け取った
   図は <figure class="bar-chart"> の markup だけで CSS が
   付いていなかったため、健診センターの配色に合わせて作った。
========================= */
.c-barchart { --bc-bar: var(--parts-blue); --bc-track: #3d4856; margin: 40px 0; padding: 26px 30px 22px; border: 1px solid #584549; border-radius: 12px; background: #262626; }
.c-barchart__caption { margin: 0 0 20px; font-size: var(--fs-h4, 1.125rem); font-weight: 700; line-height: 1.5; letter-spacing: 0.04em; color: #e0e0e0; }
.c-barchart__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; counter-reset: none; }
.c-barchart__item { margin: 0; }
.c-barchart__labels { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin: 0 0 6px; }
.c-barchart__label { font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.06em; color: #e0e0e0; }
.c-barchart__value { font-size: 0.875rem; letter-spacing: 0.04em; color: #c2c2c2; }
.c-barchart__bar { height: 14px; border-radius: 7px; background: var(--bc-track); overflow: hidden; }
.c-barchart__fill { display: block; height: 100%; border-radius: 7px; background: linear-gradient(90deg, var(--parts-blue) 0%, var(--bc-bar) 100%); }
.c-barchart__note { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid #4c4c4c; font-size: var(--fs-small, 0.875rem); line-height: 1.9; letter-spacing: 0.04em; color: #c2c2c2; }
.c-barchart__note strong { font-weight: 700; color: #e0e0e0; }

@media screen and (max-width: 600px) {
  .c-barchart { margin: 28px 0; padding: 18px 18px 16px; }
  .c-barchart__caption { margin-bottom: 16px; font-size: 1rem; }
  .c-barchart__labels { justify-content: flex-start; }
}

/* =========================
   分類ごとのタグ一覧（taggroups）
   「内臓脂肪が引き起こす病」のように、分類ごとに
   言葉を札の形で並べる。こちらも受け取ったのは markup
   だけだったので、配色は健診センターに合わせている。
========================= */
.c-taggroups { --tg-line: var(--parts-line); --tg-blue: var(--parts-blue); --tg-warn: var(--parts-blue); margin: 40px 0; }
.c-taggroups__heading { position: relative; margin: 0 0 14px; padding-left: 16px; font-size: var(--fs-h3, 1.25rem); font-weight: 700; line-height: 1.4; letter-spacing: 0.06em; color: #e0e0e0; }
.c-taggroups__heading::before { content: ""; position: absolute; left: 0; top: 0.15em; width: 5px; height: 1.3em; border-radius: 3px; background: var(--tg-blue); }
.c-taggroups__lead { margin: 0 0 24px; font-size: 0.9375rem; line-height: 2; letter-spacing: 0.08em; color: #d6d6d6; }
.c-taggroups__lead strong { font-weight: 700; color: var(--parts-link); }
.c-taggroups__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.c-taggroups__group { padding: 22px 24px 20px; border: 1px solid var(--tg-line); border-radius: 12px; background: #262626; }
.c-taggroups__group--strong { border-width: 2px; border-color: #654742; background: #371f1a; }
.c-taggroups__head { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid #4c4c4c; }
.c-taggroups__icon { flex-shrink: 0; font-size: 1.25rem; line-height: 1; }
.c-taggroups__name { margin: 0; font-size: var(--fs-h4, 1.125rem); font-weight: 700; line-height: 1.4; letter-spacing: 0.06em; color: #e0e0e0; }
.c-taggroups__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.c-taggroups__tag { display: inline-block; padding: 6px 14px; border: 1px solid var(--tg-line); border-radius: 20px; background: #232d36; font-size: 0.875rem; font-weight: 700; line-height: 1.5; letter-spacing: 0.04em; color: var(--parts-link); }
.c-taggroups__tag--warn { border-color: var(--parts-line); background: var(--parts-blue-light); color: var(--parts-link); }
.c-taggroups__note { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid #4c4c4c; font-size: var(--fs-small, 0.875rem); line-height: 1.9; letter-spacing: 0.04em; color: #c2c2c2; }
.c-taggroups__note strong { font-weight: 700; color: #e0e0e0; }

@media screen and (max-width: 768px) {
  .c-taggroups__grid { grid-template-columns: 1fr; gap: 14px; }
}
@media screen and (max-width: 600px) {
  .c-taggroups { margin: 28px 0; }
  .c-taggroups__group { padding: 18px; }
}

/* =========================
   開いて見る一覧（accordion / 43-39）
   参考デザイン x7k9m2p4.yasu-hp.jp/parts/ の c-accordion を
   そのまま持ち込んでいる。クラス名を変えるときは
   app/Views/front/partials/blocks.php と対で直すこと。
========================= */
.c-accordion-block { margin: 40px 0; }
.c-accordion-block__heading { margin: 0 0 20px; font-size: var(--fs-h3, 1.25rem); font-weight: 700; line-height: 1.4; color: #e0e0e0; }
.c-accordion { display: flex; flex-direction: column; gap: 14px; }
.c-accordion__item { background-color: #262626; border: 1px solid var(--parts-blue-light); border-radius: 12px; overflow: hidden; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
.c-accordion__item:hover { border-color: var(--parts-blue); }
.c-accordion__item.is-open { border-color: var(--parts-blue); box-shadow: 0 6px 18px rgba(139, 30, 45, 0.14); }
.c-accordion__trigger { display: flex; align-items: center; gap: 16px; width: 100%; padding: 18px 20px; background: transparent; border: none; text-align: left; cursor: pointer; font-family: inherit; letter-spacing: inherit; transition: background-color 0.3s ease; }
.c-accordion__item.is-open .c-accordion__trigger { background-color: var(--parts-blue-light); }
.c-accordion__q,
.c-accordion__a { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: #ffffff; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1rem; font-weight: 700; line-height: 1; }
.c-accordion__q { background-color: var(--parts-blue); }
.c-accordion__a { background-color: #e8527a; }
.c-accordion__title { flex: 1; color: #e0e0e0; font-size: var(--fs-h4); font-weight: 700; line-height: 1.5; }
/* 開閉の印。閉じているときは ＋、開くと回って − になる */
.c-accordion__icon { position: relative; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background-color: var(--parts-blue); transition: background-color 0.3s ease, transform 0.3s ease; }
.c-accordion__icon::before,
.c-accordion__icon::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; background-color: #262626; border-radius: 2px; transform: translate(-50%, -50%); transition: transform 0.3s ease; }
.c-accordion__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.c-accordion__trigger:hover .c-accordion__icon { background-color: var(--parts-blue-dark); }
.c-accordion__item.is-open .c-accordion__icon { transform: rotate(180deg); }
.c-accordion__item.is-open .c-accordion__icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.c-accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s ease; }
.c-accordion__item.is-open .c-accordion__panel { grid-template-rows: 1fr; }
.c-accordion__panel-inner { overflow: hidden; min-height: 0; }
.c-accordion__body { display: flex; align-items: flex-start; gap: 16px; padding: 20px 20px 24px; }
.c-accordion__text { flex: 1; min-width: 0; padding-top: 4px; }
.c-accordion__text p { margin: 0; color: #d6d6d6; font-size: var(--fs-body); line-height: 1.8; }
.c-accordion__text p + p { margin-top: 0.8em; }
.c-accordion__text ul,
.c-accordion__text ol { margin: 0.8em 0 0; padding-left: 1.4em; color: #d6d6d6; font-size: var(--fs-body); line-height: 1.8; }
/* 回答に置ける写真。枚数に応じて折り返す */
.c-accordion__media { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.c-accordion__img { display: block; width: calc(50% - 6px); max-width: 280px; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; }
.c-accordion__text .step-link-wrap { margin-top: 16px; margin-bottom: 0; }

@media screen and (max-width: 600px) {
  .c-accordion-block { margin: 28px 0; }
  .c-accordion { gap: 10px; }
  .c-accordion__trigger { gap: 12px; padding: 14px 14px; }
  .c-accordion__q,
  .c-accordion__a { width: 30px; height: 30px; font-size: 0.9rem; }
  .c-accordion__icon { width: 28px; height: 28px; }
  .c-accordion__body { gap: 12px; padding: 16px 14px 20px; }
  .c-accordion__img { width: 100%; max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .c-accordion__panel,
  .c-accordion__icon,
  .c-accordion__icon::before,
  .c-accordion__icon::after { transition: none; }
}

/* =========================
   ブロックの背景
   どの種別にも同じ欄を出す。色は決めた分だけで、
   管理画面の PageRepository::BACKGROUNDS と対。
   色を増やすときは両方を直すこと。
========================= */
.block-bg { padding: 28px 30px; border-radius: 12px; margin: 40px 0; }
/* 背景の中に入ったブロックは、自分の上下の余白を消す。
   二重に空くと、背景の枠だけが間延びして見えるため。 */
.block-bg > :first-child { margin-top: 0; }
.block-bg > :last-child { margin-bottom: 0; }
.block-bg--blue { background-color: var(--parts-blue-light); }
.block-bg--green { background-color: #2b362b; }
.block-bg--gray { background-color: #2e2e2e; }
.block-bg--white { background-color: #262626; border: 1px solid #4f4f4f; }
/* 写真を敷く。文字が読めなくならないよう、白いベールを重ねる */
.block-bg--image { position: relative; background-position: center; color: #e0e0e0; }
.block-bg--cover { background-size: cover; background-repeat: no-repeat; }
.block-bg--repeat { background-size: auto; background-repeat: repeat; }
.block-bg--image::before { content: ""; position: absolute; inset: 0; border-radius: 12px; background-color: rgba(0, 0, 0, 0.72); pointer-events: none; }
.block-bg--image > * { position: relative; z-index: 1; }

/* 画面いっぱいに広げる背景。

   本文の枠は画面の中央にない（下層ページは左にサイドメニューがある）ので、
   よくある margin-left: calc(50% - 50vw) の手は使えない。枠の位置に関係なく
   届くよう、左右へ同じだけはみ出させて、同じだけ内側に戻す。
   こうすると中の文字の位置は変わらず、ほかのブロックと行がそろう。

   はみ出した分は、下の overflow-x: clip で切り落とす。
   clip はスクロールの入れ物を作らないので、サイドメニューの
   position: sticky はそのまま効く（hidden にすると効かなくなる）。 */
@media screen and (max-width: 600px) {
  .block-bg { padding: 18px 16px; margin: 28px 0; }
}

/* ↑ の padding / margin は短縮指定なので、左右の値まで書き換わる。
   画面いっぱいの指定はそのあとに置くこと。先に置くと、携帯電話の幅で
   打ち消されて広がらなくなる（実際に踏んだ）。 */
.block-bg--full {
  margin-inline: -50vw;
  padding-inline: 50vw;
  border-radius: 0;
}

/* はみ出しの受け止め先。本文のブロックが入りうる枠の、
   いちばん外側の全幅の箱に付ける。 */
.main--native,
.main-container { overflow-x: clip; }

/* =========================
   ひとまとまり
   「ここからひとまとまり」から「ここまで」までを 1 つの枠で包む。
   背景は block-bg--* が持つので、ここでは中の余白だけを整える。
========================= */
.block-group > :first-child { margin-top: 0; }
.block-group > :last-child { margin-bottom: 0; }
/* 背景を付けたまとまりの中では、ブロックどうしの間隔を少し詰める。
   枠の内側に 28px の余白があるため、40px のままだと間延びして見える。 */
.block-group.block-bg > * { margin-top: 24px; margin-bottom: 24px; }
.block-group.block-bg > :first-child { margin-top: 0; }
.block-group.block-bg > :last-child { margin-bottom: 0; }

/* =========================
   リンク先を入れていないメニュー項目

   href を出さないだけでは、クラスを狙った :hover の指定
   （.ft-main-item:hover など）がそのまま効いてしまい、
   押せないのに色が変わって押せるように見える。

   pointer-events を切ると hover そのものが起きないので、
   どの指定が先に書かれていても、!important が付いていても影響しない。
   page.css は下層ページ・健診センターのどちらのレイアウトも読む。
========================= */
.menu-link--plain {
  pointer-events: none;
  cursor: default;
}

/* =========================
   旧サイトから移した文章の強調（LegacyImporter が付ける）
   t-accent: 旧ページで赤などの色が付いていた文字 / t-large: 大きな文字
========================= */
.t-accent { color: var(--parts-link); }
.t-large { font-size: 1.2em; }