@charset "UTF-8";
/* ==========================================================================
   ハイドロリリース
   共通：../../top/style.css（TOP）＋ ../common/lower.css（診療ページの型・共通の追加部品）
   このファイルはハイドロリリースページ固有の部品だけを持つ。
   ========================================================================== */

/* ---------- ABOUT：説明＋図解 ---------- */
.o-about { display: grid; gap: 24px; }
.o-about__text { font-weight: 300; line-height: 1.9; }
.o-about__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 14px; font-size: 13px; }
.o-about__meta dt { font-weight: 500; color: var(--color-heading-accent); }
.o-about__meta dd { margin: 0; }
.o-about__sub { margin-top: 22px; padding: 18px 20px; background: var(--color-bg-info); border-radius: var(--radius-md); }
.o-about__subtitle { margin-bottom: 8px; font-family: var(--font-heading); font-size: 18px; font-weight: 400; letter-spacing: .04em; color: var(--color-heading-accent); font-feature-settings: "palt"; }
.o-about__sub p { font-weight: 300; line-height: 1.85; }
.o-about__figure { margin: 0; }
.o-about__figure img { display: block; width: 100%; height: auto; border-radius: var(--radius-md); }

/* ---------- RISK & COST：2枚のカード ---------- */
.o-pair { display: grid; gap: 16px; max-width: 920px; margin: 0 auto; }
.o-pair__card { padding: 22px 20px 24px; background: #fff; border: 2px solid var(--color-line); border-radius: var(--radius-md); }
.o-pair__card > p { font-weight: 300; line-height: 1.85; }
.o-pair__title { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--color-line); font-family: var(--font-heading); font-size: 19px; font-weight: 400; letter-spacing: .04em; text-align: center; font-feature-settings: "palt"; }
.o-dots li { position: relative; padding-left: 1.1em; line-height: 1.8; }
.o-dots li + li { margin-top: 4px; }
.o-dots li::before { content: ""; position: absolute; left: .15em; top: .8em; width: 6px; height: 6px; border-radius: 50%; background: var(--color-secondary); }
.o-pair__note { margin-top: 14px; font-size: 14px; }
.o-pair__status { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--color-text-sub); }

@media (min-width: 768px) {
  .o-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================================
   PC 1024px〜（--u ＝ 1400pxカンプ基準）
   ========================================================================== */
@media (min-width: 1024px) {
  .o-about { grid-template-columns: calc(520 * var(--u)) calc(620 * var(--u)); justify-content: space-between; align-items: center; gap: 0; }
  .o-about__text { font-size: max(12px, calc(16 * var(--u))); }
  .o-about__meta { margin-top: calc(16 * var(--u)); font-size: max(12px, calc(14 * var(--u))); }
  .o-about__sub { margin-top: calc(28 * var(--u)); padding: calc(24 * var(--u)) calc(28 * var(--u)); border-radius: calc(20 * var(--u)); }
  .o-about__subtitle { margin-bottom: calc(10 * var(--u)); font-size: calc(20 * var(--u)); }
  .o-about__sub p { font-size: max(12px, calc(15 * var(--u))); }
  .o-about__figure img { border-radius: calc(20 * var(--u)); }


  .o-pair { max-width: none; width: calc(1000 * var(--u)); gap: calc(32 * var(--u)); }
  .o-pair__card { padding: calc(32 * var(--u)) calc(40 * var(--u)) calc(36 * var(--u)); border-radius: calc(20 * var(--u)); }
  .o-pair__card > p, .o-dots li { font-size: max(12px, calc(15 * var(--u))); }
  .o-pair__title { margin-bottom: calc(18 * var(--u)); padding-bottom: calc(14 * var(--u)); font-size: calc(22 * var(--u)); }
  .o-pair__note { margin-top: calc(18 * var(--u)); font-size: max(12px, calc(14 * var(--u))); }
  .o-pair__status { font-size: max(11px, calc(13 * var(--u))); }
}