@charset "UTF-8";
/* ==========================================================================
   交通事故施術ページ専用スタイル（p-accident-）
   共通部品（c-）は common.css 側を使い、ここにはこのページ固有のものだけを書く。
   カンプ: Figma winjeLDXMguhfDP4yN4FVL / node-id 1267-1149（PC 1440px・全高 6279px）
   ※ 改訂版。旧版（996-4126）にあった FEATURE 01〜04 は無く、
      「黄色帯（相談パネル＋POINT＋病院との比較）」→「水色帯（SERVICE 01/02）」の構成。

   帯の噛み合わせ: 黄色（相談・POINT）の下端 160px に水色（SERVICE）が重なる。
   ========================================================================== */

/* ==========================================================================
   1. ページMV
      カンプ y142–807。白ボックス・キャッチ・写真・装飾円の位置は
      ペルケア／マタニティ／出張整体と完全に同じで、
      白ボックスの幅・キャッチの本数・装飾円の色だけが違う。
   ========================================================================== */
.p-accident-mv {
  padding-top: 89px;
  padding-bottom: 80px;
}

/* 白ボックス（カンプ 408×125 @180,231 ＝ 中身 280px ＋ 左右 padding 64px）
   見た目は共通部品 c-page-mv-head（common.css 側に .p-accident-mv-head を登録済み） */
.p-accident-mv-head { width: 408px; }

/* リード文（カンプ 894×72 @273,655）。キャッチが3本ぶんあるので
   c-page-mv-body の上余白は出張整体と同じ */
.p-accident-mv .c-page-mv-body { margin-top: 85px; }

.p-accident-mv-lead {
  max-width: 894px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.2em;
}

/* 写真（カンプ 982×407 @458,175。右端 x=1440 で見切れるので右側の角丸は付けない） */
.p-accident-mv-photo {
  left: 31.81%;
  top: 34px;
  width: 68.19%;
  border-radius: var(--r-card) 0 0 var(--r-card);
}

/* 装飾円（カンプの絶対y － 142px）
   カンプ上で装飾円が写真より前面にあり、乗算で重なっている。
   ※ 色の割り当てはペルケア／マタニティ／出張整体と違い、
      大きい円（122px）がピンク・中（108px）が水色02・小（78px）が黄色。 */
.p-accident-mv .c-deco-circle {
  z-index: 1;
  mix-blend-mode: multiply;
}

/* 右上の円は画面右端からの距離で置く（left: 1141px だと 1263px 未満の画面で
   画面外にはみ出し、横スクロールが発生してしまう） */
.p-accident-mv .c-deco-circle--pink  { left: auto; right: 177px; top: -19px; width: 122px; height: 122px; }
.p-accident-mv .c-deco-circle--blue  { left: 400px; top: 374px; width: 108px; height: 108px; }
.p-accident-mv .c-deco-circle--cream { left: 349px; top: 404px; width: 78px;  height: 78px; }

/* ==========================================================================
   2. 黄色帯（まずはお気軽にご相談ください ／ POINT ／ 病院との比較）
      カンプ y807–2739 の黄色帯（上2隅だけ 120px の角丸）。
      下端 160px 分は次の水色帯（SERVICE）に隠れる。
   ========================================================================== */
.p-accident-intro {
  position: relative;
  padding: 80px 0 337px;
  background: var(--c-yellow);
  border-radius: var(--r-band) var(--r-band) 0 0;
}

/* 帯の中の基準幅（カンプ 1074px の px-64 ＝ 中身 946px） */
.p-accident-inner {
  width: calc(100% - 32px);
  max-width: 946px;
  margin-left: auto;
  margin-right: auto;
}

/* --------------------------------------------------------------------------
   2-1. 白パネル＋グースケ（You are not alone!）
        カンプ: パネル 1074×600 @183,997、グースケ 208×158 @657,887。
        グースケはパネルの上端に 47px 重なり、110px 上へ飛び出す。
        飛び出すぶんをラッパーの padding-top で確保している。
   -------------------------------------------------------------------------- */
.p-accident-panel-wrap {
  position: relative;
  width: calc(100% - 32px);
  max-width: 1074px;
  margin: 0 auto;
  padding-top: 110px;
}

/* グースケ（カンプ 208×158。イラストの丸の中心をパネル中央に合わせる。
   画像の左端はパネル中央から 63px 左） */
.p-accident-mascot {
  position: absolute;
  left: calc(50% - 63px);
  top: 0;
  width: 208px;
}

.p-accident-panel {
  padding: 64px;
  background: var(--c-white);
  border-radius: var(--r-card);
}

/* 見出し（カンプ Zen Maru Bold 32px / 行送り1.4 / 字送り0.2em・中央寄せ）
   字送りは最後の1文字の後ろにも入るので text-indent で中央寄せのズレを相殺する */
.p-accident-panel-title {
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}

.p-accident-panel-body {
  margin-top: 40px;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0.2em;
  margin-right: -0.2em;
}

/* カンプは段落の間に空行1本ぶん（16px × 1.5）の間隔がある */
.p-accident-panel-body-2 { margin-top: 24px; }

/* --------------------------------------------------------------------------
   2-2. POINT（ご存知ですか？病院との役割の違いについて）
   -------------------------------------------------------------------------- */
.p-accident-intro .c-point-head { margin-top: 64px; }

/* --------------------------------------------------------------------------
   2-3. 本文（POINTの下・比較カードの下）
        カンプ 946px幅・16px / 行送り1.6 / 字送り0.2em・段落間8px
   -------------------------------------------------------------------------- */
.p-accident-texts {
  margin-top: 32px;
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0.2em;
}

/* 字送りは最後の1文字の後ろにも入るので相殺する。
   .p-accident-inner の margin-right: auto（中央寄せ）を殺さないよう、
   親ではなく中の段落側に持たせる */
.p-accident-texts > * { margin-right: -0.2em; }

.p-accident-texts > * + * { margin-top: 8px; }

/* POINT見出しの直後だけ 64px 空く */
.c-point-head + .p-accident-texts { margin-top: 64px; }

/* --------------------------------------------------------------------------
   2-4. 病院と当院の比較カード
        カンプ 425×380 ×2・間隔32px（外枠 882px）
        row の gutter を 15px → 16px に調整してカンプの間隔に合わせる
   -------------------------------------------------------------------------- */
.p-accident-compare {
  width: calc(100% - 32px);
  max-width: 914px;
  margin: 32px auto 0;
}

.p-accident-compare > [class*="col-"] {
  padding-left: 16px;
  padding-right: 16px;
}

.p-accident-compare-card {
  height: 100%;
  padding: 24px;
  background: var(--c-white);
  border-radius: var(--r-card);
  text-align: center;
}

/* 写真（カンプ 377×222・角丸16px） */
.p-accident-compare-photo {
  display: block;
  width: 100%;
  aspect-ratio: 319 / 188;
  object-fit: cover;
  border-radius: var(--r-card);
}

/* 見出し（カンプ Zen Maru Bold 20px / 字送り0.2em） */
.p-accident-compare-title {
  margin-top: 16px;
  font-family: var(--font-ja);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}

/* 本文（カンプ Noto 20px。強調部分だけ SemiBold） */
.p-accident-compare-text {
  margin-top: 8px;
  font-size: 1.25rem;
  line-height: 1.6;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}

.p-accident-compare-em { font-weight: 600; }

/* ==========================================================================
   3. 水色帯（SERVICE）
      カンプ y2579–5555 の水色帯（四隅 120px の角丸）。上端 160px 分が
      黄色帯に重なるので、負の margin で持ち上げている。
   ========================================================================== */
.p-accident-service {
  position: relative;
  margin-top: -160px;
  padding: 160px 0;
  background: var(--c-blue02);
  border-radius: var(--r-band);
}

/* カンプは欧文と和文サブの間に余白が無い */
.p-accident-sec-title-ja { margin-top: 0; }

/* SERVICE 01 / 02 のブロック（カンプ 1080px・padding 48px 64px・要素間32px） */
.p-accident-service-block {
  width: calc(100% - 32px);
  max-width: var(--inner);
  margin: 40px auto 0;
  padding: 48px 64px;
}

.p-accident-service-block > * + * { margin-top: 32px; }

/* カラムの中は 16px 間隔（カンプ SERVICE 01 の左カラム） */
.p-accident-service-block [class*="col-"] > * + * { margin-top: 16px; }

/* 「「不安」を取り除く」「「痛み」を取り除く」の白い帯
   （カンプ 幅いっぱい・padding 8px 40px・角丸30px・Zen Maru Bold 24px） */
.p-accident-pill {
  padding: 8px 40px;
  background: var(--c-white);
  border-radius: 30px;
  font-family: var(--font-ja);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.2em;
  text-align: center;
  text-indent: 0.2em;
}

/* 丸番号＋見出しの行（カンプ 間隔32px・見出しは丸番号に対して縦中央）
   c-numlabel-label / -num はどちらもインラインなので、幅をラベル分（86px）に
   絞って丸番号を次の行へ折り返させる（横並びのカードと違い親が広いため） */
.p-accident-numrow .c-numlabel {
  flex: none;
  width: 86px;
  margin-right: 32px;
}

.p-accident-service-title {
  flex: 1 1 0;
  min-width: 0;
  font-family: var(--font-ja);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.2em;
  margin-right: -0.2em;
}

/* SERVICE 02 の見出しはカンプでは中央寄せ */
.p-accident-service-title--center {
  margin-right: 0;
  text-align: center;
  text-indent: 0.2em;
}

/* 「◆ 〜」のリード（カンプ Noto Bold 20px / 字送り0.2em） */
.p-accident-lead {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.2em;
  margin-right: -0.2em;
}

/* 本文（カンプ Noto 16px / 行送り1.6 / 字送り0.2em） */
.p-accident-text {
  font-size: 1rem;
  line-height: 1.6;
  letter-spacing: 0.2em;
  margin-right: -0.2em;
}

/* 写真カラム（カンプ 519×309・テキストとの間隔32px を padding で作る） */
.p-accident-service-block .row > .p-accident-service-photo-col { padding-left: 32px; }

/* SERVICE 02 は写真が左・テキストが右 */
.p-accident-service-block .row > .p-accident-service-photo-col--left {
  padding-left: 0;
  padding-right: 32px;
}

.p-accident-service-photo {
  display: block;
  width: 100%;
  aspect-ratio: 519 / 309;
  object-fit: cover;
  border-radius: var(--r-card);
  /* カンプの影は共通の --shadow-hard より濃い（rgba(24,61,129,0.25)） */
  box-shadow: 8px 8px 0 rgba(24, 61, 129, 0.25);
}

/* SERVICE 02 の写真はカンプでは影なし */
.p-accident-service-photo--flat { box-shadow: none; }

/* --------------------------------------------------------------------------
   3-1. 2つのアプローチ（機器カード）
        カンプ 456×836 ×2・間隔32px（外枠 952px）
   -------------------------------------------------------------------------- */
.p-accident-devices {
  margin-left: -16px;
  margin-right: -16px;
}

.p-accident-devices > [class*="col-"] {
  padding-left: 16px;
  padding-right: 16px;
}

.p-accident-device-card {
  height: 100%;
  padding: 48px;
  background: var(--c-white);
  border-radius: var(--r-card);
}

/* 見出し（カンプ Zen Maru Bold 24px / 行送り1.5 / 字送り0.2em・中央寄せ） */
.p-accident-device-title {
  margin-bottom: 8px;
  font-family: var(--font-ja);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.2em;
  text-align: center;
  text-indent: 0.2em;
}

/* 機器名の帯（カンプ 幅いっぱい・#8dceff ベタ・Zen Maru Bold 24px・字送りなし） */
.p-accident-device-band {
  padding: 0 8px;
  background: var(--c-blue01);
  font-family: var(--font-ja);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.p-accident-device-lead { margin-top: 24px; }

/* 機器写真（カンプは高さ180px固定・幅は機器ごとに違う） */
.p-accident-device-photo {
  display: block;
  width: auto;
  height: 180px;
  margin: 32px auto 0;
}

/* 画像引用（カンプ 12px・黒・引用先だけ下線） */
.p-accident-cite {
  margin-top: 8px;
  font-size: 0.75rem;
  line-height: 1.5;
  color: #000;
  text-align: center;
}

.p-accident-cite-src { text-decoration: underline; }

/* まとめの一文（カンプ Noto Bold 14px / 字送り0.2em） */
.p-accident-device-note {
  margin-top: 32px;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.2em;
  margin-right: -0.2em;
}

/* ==========================================================================
   4. ページ下部の共通CTA
      カンプ y5638–5764。ボタンは 236×52、グースケ 118×138 @1008,5627
   ========================================================================== */
.p-accident-cta { margin-top: 27px; }

.p-accident-cta .c-cta-btns { margin-top: 16px; }

.p-accident-cta .c-btn {
  min-height: 52px;
  padding: 10px 48px;
}

.p-accident-cta .c-cta-mascot {
  right: 131px;
  bottom: 55px;
  width: 118px;
}

/* ==========================================================================
   5. レスポンシブ（SP 〜767px / タブレット 768〜991px / PC 992px〜）
      ※ SP・タブレットのカンプが無いため、こちら側で設計した値
        （MVの767px以下だけカンプ 1396-21433 に沿った共通指定が効く）
   ========================================================================== */
@media (max-width: 991.98px) {
  /* 帯の角丸と重なりを浅くする */
  .p-accident-intro {
    padding: 56px 0 216px;
    border-radius: 60px 60px 0 0;
  }

  .p-accident-service {
    margin-top: -100px;
    padding: 100px 0;
    border-radius: 60px;
  }

  /* 白パネルとグースケ */
  .p-accident-panel-wrap { padding-top: 84px; }
  .p-accident-mascot { left: calc(50% - 48px); width: 160px; }
  .p-accident-panel { padding: 40px 24px; }
  .p-accident-panel-title { font-size: 1.5rem; letter-spacing: 0.1em; text-indent: 0.1em; }

  /* SERVICE */
  .p-accident-service-block { padding: 32px 24px; }
  .p-accident-service-title { font-size: 1.5rem; }
  .p-accident-numrow .c-numlabel { margin-right: 24px; }

  /* 2カラムは 992px 未満で縦積みになるので、左右の間隔用 padding を外す */
  .p-accident-service-block .row > .p-accident-service-photo-col,
  .p-accident-service-block .row > .p-accident-service-photo-col--left {
    padding-left: 0;
    padding-right: 0;
  }

  .p-accident-service-block .row > [class*="col-"] + [class*="col-"] { margin-top: 24px; }

  /* 機器カード */
  .p-accident-device-card { padding: 32px 24px; }
  .p-accident-devices > [class*="col-"] + [class*="col-"] { margin-top: 24px; }

  /* 比較カード */
  .p-accident-compare-card { padding: 16px; }

  .p-accident-cta { margin-top: 0; }
}

@media (max-width: 767.98px) {
  /* MV: 767px以下はカンプ 1396-21433 のSPレイアウト（common.css の c-page-mv--pickup）。
     768〜991px はPCと同じ表示にするため、タブレット向けの指定は置かない */
  .p-accident-mv { padding-bottom: 56px; }

  /* 白ボックス: PCのカンプ幅（408px）だと 375px の画面に収まらないので、
     中身なりの幅にして左右 padding を 40px に詰める（h1 は他ページと同じ36px のまま）
     ＝ 「交通事故施術」252px ＋ 80px = 332px（枠の上限 343px 内） */
  .p-accident-mv-head {
    width: auto;
    padding-left: 40px;
    padding-right: 40px;
  }

  /* キャッチは最長が18文字あり、18px だと 1px だけ溢れて2行になるので1段小さくする */
  .c-page-mv--pickup.p-accident-mv .c-page-mv-catch { font-size: 1.0625rem; }

  .p-accident-intro {
    padding: 48px 0 152px;
    border-radius: 40px 40px 0 0;
  }

  .p-accident-service {
    margin-top: -72px;
    padding: 72px 0;
    border-radius: 40px;
  }

  .p-accident-panel-wrap { padding-top: 66px; }
  .p-accident-mascot { left: calc(50% - 38px); width: 126px; }
  .p-accident-panel-title { font-size: 1.25rem; }

  /* 字送り 0.2em のままだと1行の文字数が少なくなりすぎるので詰める */
  .p-accident-panel-body,
  .p-accident-texts,
  .p-accident-text,
  .p-accident-device-note {
    letter-spacing: 0.06em;
  }

  /* .p-accident-texts は中央寄せの箱なので、相殺は中の段落側に当てる */
  .p-accident-panel-body,
  .p-accident-text,
  .p-accident-device-note,
  .p-accident-texts > * {
    margin-right: -0.06em;
  }

  .p-accident-compare-title,
  .p-accident-compare-text {
    font-size: 1.0625rem;
    letter-spacing: 0.1em;
    text-indent: 0.1em;
  }

  .p-accident-compare > [class*="col-"] + [class*="col-"] { margin-top: 24px; }

  .p-accident-pill {
    padding: 8px 20px;
    font-size: 1.125rem;
    letter-spacing: 0.1em;
    text-indent: 0.1em;
  }

  .p-accident-service-title {
    font-size: 1.25rem;
    letter-spacing: 0.1em;
  }

  .p-accident-service-title--center { text-indent: 0.1em; }

  .p-accident-numrow .c-numlabel { margin-right: 16px; }

  .p-accident-lead {
    font-size: 1.0625rem;
    letter-spacing: 0.1em;
    margin-right: -0.1em;
  }

  .p-accident-device-title,
  .p-accident-device-band { font-size: 1.125rem; }
}