@charset "UTF-8";
/* ==========================================================================
   Project（p-*）— このデモ固有のレイアウト
   🔴 レイアウトは案件ごとにゼロから組む（32 §一番の原則）。clinic / care の節構成をコピーしない。
   構成の出どころは 45_シート回答:
     ヒーロー直下の「取扱分野」フロートカード … 士業の「開いてすぐ要る情報」（32 §8-2）
     料金の目安をトップに … notes「料金は隠さずはっきり載せたい」
   ========================================================================== */

/* ── ヒーロー（生成りの面。左=明朝の題字＋導線／右=応接室の写真） ── */
.p-hero {
  background: var(--c-cream);
  padding-block: 56px 96px;
  position: relative;
}

/* 下端のゆるい曲線（32 §4-5）。次の節（白）の色で塗る＝直線切りを1箇所崩す */
.p-hero__curve {
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  width: 100%;
  height: 44px;
  color: var(--c-white);
  display: block;
}

@media (min-width: 900px) {
  .p-hero__curve {
    height: 56px;
  }
}

/* 🔴 FVの構図（2026-08-22 作り替え）: 縦書きの大見出し＋右写真＋下にリードと導線。
   病院スタンダードの「横書き左文字＋右写真」と同じに見える、という本人指摘への答え。
   縦書きは明朝だから成立する、このサイトだけの型 */
.p-hero__in {
  display: grid;
  gap: 28px;
  align-items: start;
}

@media (min-width: 900px) {
  .p-hero {
    padding-block: 72px 120px;
  }

  .p-hero__in {
    grid-template-columns: auto auto 1fr;
    gap: 40px 48px;
    align-items: start;
  }
}

/* 縦書きの題字。читается 右の列（顧問料は、）から左（隠しません。）へ */
.p-hero__tit {
  writing-mode: vertical-rl;
  font-size: clamp(34px, 4.8vw, 58px);
  line-height: 1.6;
  letter-spacing: 0.14em;
  min-height: 7.5em;
}

/* 縦組みの添え書き（題字と対の小さな縦罫。丸ゴの2本には無い、このデモだけの手） */
.p-hero__side {
  display: none;
}

@media (min-width: 900px) {
  .p-hero__side {
    display: block;
    writing-mode: vertical-rl;
    font-family: var(--c-font-head);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.42em;
    color: var(--c-muted);
    padding-top: 6px;
  }
}

/* リードと導線は、題字と写真の下の静かな段 */
.p-hero__foot {
  grid-column: 1 / -1;
  display: grid;
  gap: 20px;
  align-items: center;
}

@media (min-width: 900px) {
  .p-hero__foot {
    grid-template-columns: minmax(0, 1.2fr) auto;
    gap: 48px;
    margin-top: 8px;
  }
}

/* 写真に藍の面を少しずらして重ねる（「調整した手」— 32 §4-5 の流儀。線でなく面で出す）。
   🔴 写真は角をひとつだけ大きく丸める（2026-08-22「カクカクしている」への手当て。
   全部の角を丸めず1隅だけ＝明朝のかっちりを保ったまま、直角の連続を崩す） */
.p-hero__visual,
.p-svc__ph,
.p-usp__ph {
  position: relative;
}

.p-hero__visual::before,
.p-svc__ph::before,
.p-usp__ph::before {
  content: "";
  position: absolute;
  inset: 18px -14px -14px 18px;
  background: var(--c-main-pale);
  border-radius: var(--c-radius);
}

.p-svc--rev .p-svc__ph::before {
  inset: 18px 18px -14px -14px;
}

.p-hero__visual > *,
.p-svc__ph > *,
.p-usp__ph > * {
  position: relative;
}

/* 大きな角: ヒーロー=右上／理由=左下（向かい合わせ）。裏の藍の面は反対の角を丸める */
.p-hero__visual .c-figure img,
.p-hero__visual .c-imgslot {
  border-radius: var(--c-radius) 88px var(--c-radius) var(--c-radius);
}

/* 写真の高さを絞って、FVの下から藍の料金カードが覗くようにする（証拠の予告） */
@media (min-width: 900px) {
  .p-hero__visual .c-figure img {
    width: 100%;
    height: clamp(340px, 46vh, 470px);
    object-fit: cover;
  }

  .p-hero__visual .c-imgslot {
    aspect-ratio: auto !important;
    height: clamp(340px, 46vh, 470px);
  }
}

.p-hero__visual::before {
  border-radius: var(--c-radius) var(--c-radius) 88px var(--c-radius);
}

/* 理由の写真は藍の面を「濃い藍」で（ページ中盤に色の重心を作る） */
.p-usp__ph::before {
  inset: 20px 20px -16px -16px;
  background: var(--c-main);
}

.p-usp__ph .c-figure img,
.p-usp__ph .c-imgslot {
  border-radius: var(--c-radius) var(--c-radius) var(--c-radius) 72px;
}

.p-hero__lead {
  margin-top: 0;
  max-width: 34em;
}

.p-hero__cta {
  margin-top: 0;
}

/* ── 料金の目安（ヒーローの境目に重ねるフロートカード） ──
   🔴 一等地はシートの notes が指す「料金」（「料金は隠さずはっきり載せたい」）。
   32 §8-2 の既定（士業=取扱分野）より notes を優先（2026-08-21 本人指摘を受けて入れ替え） */
/* 🔴 藍の面＋大きな数字の「設計物」（2026-08-22 本人指摘「寂しすぎる」への作り替え）。
   ヒーローの曲線をまたいで重なる＝ページの一番上に色の重心を置く */
.p-float {
  background: var(--c-main);
  color: var(--c-white);
  border-radius: var(--c-radius) 48px var(--c-radius) var(--c-radius);
  box-shadow: var(--c-shadow-hover);
  padding: 32px 26px 28px;
  margin-top: -72px;
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin-inline: auto;
}

@media (min-width: 768px) {
  .p-float {
    padding: 40px 52px 36px;
    margin-top: -96px;
  }
}

.p-float__tit {
  font-size: 21px;
  text-align: center;
  margin-bottom: 18px;
  color: var(--c-white);
}

/* 帳簿らしい行組み: 左=項目／右=大きな数字（tabular-nums・明朝） */
.p-float__table {
  width: 100%;
}

.p-float__table td {
  padding: 14px 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  vertical-align: baseline;
  font-size: 15px;
}

.p-float__table td:last-child {
  text-align: right;
  white-space: nowrap;
}

.p-float__pre {
  font-size: 13px;
  color: var(--c-main-pale);
  margin-right: 8px;
}

.p-float__num {
  font-family: var(--c-font-head);
  font-weight: 600;
  font-size: clamp(26px, 3.4vw, 34px);
  line-height: 1;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.p-float__unit {
  font-size: 14px;
  margin-left: 2px;
  color: var(--c-main-pale);
}

.p-float__table tbody tr {
  transition: background-color 0.2s ease;
}

.p-float__table tbody tr:hover {
  background: rgba(255, 255, 255, 0.06);
}

.p-float__note {
  margin-top: 14px;
  font-size: 14px;
  color: var(--c-main-pale);
  text-align: center;
}

.p-float .c-btns {
  margin-top: 20px;
}

/* ── 取扱分野（藍の面の節に、写真つきの白いカードを段違いで置く）──
   文字だけの2×2が「ワイヤーフレーム」に見えていた（2026-08-22 本人指摘）ための作り替え。
   段違い（偶数カードを下げる）で、均等グリッドの「カクカク」を崩す */
.p-fields {
  display: grid;
  gap: 24px;
}

@media (min-width: 700px) {
  .p-fields {
    grid-template-columns: 1fr 1fr;
    gap: 32px 36px;
  }

  .p-fields__card:nth-child(even) {
    margin-top: 36px;   /* 右の列だけ下げる＝段違い。均等グリッドにしない */
  }
}

.p-fields__card {
  background: var(--c-white);
  color: var(--c-ink);
  border-radius: var(--c-radius);
  overflow: hidden;
  box-shadow: var(--c-shadow);
  transition: translate 0.2s ease, box-shadow 0.2s ease;
}

.p-fields__card:hover {
  box-shadow: var(--c-shadow-hover);
}

.p-fields__ph .c-figure img,
.p-fields__ph .c-imgslot {
  border-radius: 0;
}

.p-fields__ph .c-figure img {
  width: 100%;
  height: clamp(180px, 22vw, 240px);
  object-fit: cover;
}

.p-fields__body {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 16px;
  align-items: baseline;
  padding: 20px 24px 22px;
}

.p-fields__num {
  font-family: var(--c-font-head);
  font-size: 42px;
  font-weight: 600;
  color: var(--c-main-ghost);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.p-fields__body h3 {
  font-size: 18px;
}

.p-fields__body p {
  grid-column: 2;
  font-size: 14px;
  color: var(--c-muted);
  margin-top: 6px;
}

/* ── 選ばれる理由（写真×薄い番号の一覧。2カラム） ── */
.p-usp {
  display: grid;
  gap: 32px;
  align-items: start;
}

@media (min-width: 900px) {
  .p-usp {
    grid-template-columns: 1fr 1.1fr;
    gap: 56px;
  }
}

.p-usp__list {
  display: grid;
  gap: 24px;
}

.p-usp__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 18px;
  align-items: baseline;
}

.p-usp__num {
  font-family: var(--c-font-head);
  font-size: clamp(46px, 5.4vw, 64px);   /* 小さな番号の行組みが「コーダーの表」に見えていた。飾り数字として大きく */
  font-weight: 600;
  line-height: 1;
  color: var(--c-main-ghost);
  font-variant-numeric: tabular-nums;
}

.p-usp__tit {
  font-size: 19px;
}

.p-usp__body {
  grid-column: 2;
  color: var(--c-muted);
  font-size: 15px;
}

/* ── ページ題字（下層） ── */
.p-pagehead {
  background: var(--c-cream);
  padding-block: 32px 48px;
}

.p-pagehead__en {
  margin-top: 20px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-main);
}

.p-pagehead__tit {
  font-size: clamp(28px, 4vw, 40px);
  margin-top: 6px;
}

.p-pagehead__lead {
  margin-top: 12px;
  color: var(--c-muted);
  max-width: 44em;
}

/* ── 取扱業務（写真×本文の2カラム・左右交互） ── */
.p-svc {
  display: grid;
  gap: 24px;
  align-items: center;
}

.p-svc + .p-svc {
  margin-top: 56px;
}

@media (min-width: 820px) {
  .p-svc {
    grid-template-columns: 1fr 1.15fr;
    gap: 48px;
  }

  .p-svc--rev .p-svc__ph {
    order: 2;
  }

  .p-svc + .p-svc {
    margin-top: 80px;
  }
}

.p-svc__tit {
  font-size: clamp(21px, 2.6vw, 26px);
}

.p-svc__desc {
  margin-top: 12px;
}

.p-svc__detail {
  margin-top: 12px;
  font-size: 14.5px;
  color: var(--c-muted);
}

/* ── 料金ページ: 決まり方の3段 ── */
.p-steps {
  display: grid;
  gap: 20px;
  counter-reset: step;
}

@media (min-width: 768px) {
  .p-steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
}

.p-steps__item {
  counter-increment: step;
  background: var(--c-white);
  border-radius: var(--c-radius);
  box-shadow: var(--c-shadow);
  padding: 24px 22px 22px;
  transition: translate 0.2s ease, box-shadow 0.2s ease;
}

.p-steps__item:hover {
  box-shadow: var(--c-shadow-hover);
}

.p-steps__item::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--c-font-head);
  font-size: 34px;
  font-weight: 600;
  line-height: 1;
  color: var(--c-main-ghost);
  font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
}

.p-steps__item h3 {
  font-size: 18px;
}

.p-steps__item p {
  margin-top: 8px;
  font-size: 14.5px;
  color: var(--c-muted);
}

/* ── 料金ページ: カテゴリごとの表（見出しは横線つき — 32 §4-2） ── */
.p-feegroup + .p-feegroup {
  margin-top: 48px;
}

.p-feegroup__tit {
  font-size: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--c-line);
  margin-bottom: 16px;
}

.p-feegroup__note {
  margin-top: 12px;
  font-size: 14px;
  color: var(--c-muted);
}

/* 含まれるもの・別料金のもの（2つの面で対にする） */
.p-scope {
  display: grid;
  gap: 20px;
}

@media (min-width: 700px) {
  .p-scope {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
}

.p-scope__col {
  background: var(--c-white);
  border-radius: var(--c-radius);
  box-shadow: var(--c-shadow);
  padding: 24px;
}

.p-scope__col--out {
  background: var(--c-cream);
  box-shadow: none;
}

.p-scope__col h3 {
  font-size: 17px;
  margin-bottom: 10px;
}

.p-scope__col li {
  padding: 8px 0;
  border-top: 1px solid var(--c-line);
  font-size: 15px;
}

/* ── 概要・アクセス ── */
.p-about {
  display: grid;
  gap: 32px;
  align-items: start;
}

@media (min-width: 900px) {
  .p-about {
    grid-template-columns: 1.4fr 1fr;
    gap: 56px;
  }
}

.p-about__owner {
  max-width: 320px;
}

.p-about__ownername {
  margin-top: 12px;
  font-family: var(--c-font-head);
  font-weight: 600;
  font-size: 17px;
}

.p-access {
  display: grid;
  gap: 24px;
}

@media (min-width: 820px) {
  .p-access {
    grid-template-columns: 1fr 1fr;
    gap: 48px;
  }
}

.p-access__addr {
  font-size: 17px;
  font-weight: 700;
}

.p-access__note {
  margin-top: 8px;
  color: var(--c-muted);
  font-size: 15px;
}

/* ── お問い合わせ ── */
.p-contact__demo {
  margin-bottom: 8px;
}

.p-contact__submit {
  margin-top: 28px;
  width: 100%;
}

@media (min-width: 768px) {
  .p-contact__submit {
    width: auto;
    min-width: 280px;
  }
}

.p-contact__tel {
  text-align: center;
}

.p-contact__teltit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 19px;
  margin-bottom: 12px;
}

.p-contact__telnum a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 700;
  color: var(--c-main-dark);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}