@charset "UTF-8";
/* ==========================================================================
   はじめての方へページ専用スタイル（p-first-）
   共通部品（c-）は common.css 側を使い、ここにはこのページ固有のものだけを書く。
   カンプ: Figma winjeLDXMguhfDP4yN4FVL / node-id 1259-10583（PC 1440px）
   ※ 施術案内（1259-9957）・当院について（1259-10777）と同じ改訂版。
      ページMVは共通部品 c-page-mv を使い、ここでは写真・装飾円の位置など
      このページ固有の差分だけを指定する。
   ========================================================================== */

/* ==========================================================================
   1. ページMV
   ========================================================================== */
.p-first-mv {
  padding-top: 73px;
  padding-bottom: 200px;
}

/* 欧文は2行・48px・グラデ文字（他ページは64pxの単色） */
.p-first-mv .c-page-mv-en {
  font-size: 3rem;
  line-height: 0.9;
}

/* カンプは Zen Maru Gothic Medium */
.p-first-mv .c-page-mv-title {
  margin-top: 14px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0;
}

/* 見出し直下の一文（Zen Maru Medium 20px） */
.p-first-mv-catch {
  margin-top: 20px;
  font-family: var(--font-ja);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.6;
}

.p-first-mv .c-page-mv-lead {
  max-width: 524px;
  margin-top: 24px;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: 0.2em;
}

/* 写真（カンプ: 248×139 @828,215 ／ 529×297 @1023,298）
   2枚目はカンプ上で画面右端に見切れているため、見えている 417px 分だけを
   書き出し、右端ぴったりに置く（右側の角丸は付けない） */
.p-first-mv-photo--01 { left: 57.5%;  top: 74px;  width: 17.22%; }

.p-first-mv-photo--02 {
  left: 71.04%;
  top: 157px;
  width: 28.96%;
  border-radius: var(--r-card) 0 0 var(--r-card);
}

/* 装飾円（MV） */
.p-first-mv .c-deco-circle--blue       { left: 96px;   top: 111px; width: 145px; height: 145px; }
.p-first-mv .c-deco-circle--blue-small { left: 1265px; top: 57px;  width: 122px; height: 122px; background: var(--c-blue02); }
.p-first-mv .c-deco-circle--cream      { left: 828px;  top: 266px; width: 181px; height: 181px; }
.p-first-mv .c-deco-circle--pink       { left: 954px;  top: 383px; width: 109px; height: 109px; }

/* ==========================================================================
   2. FIRST VISIT（初診の流れ）
      画面幅いっぱいの水色帯。上下の境界が波形（SVGを background-image で敷く）
   ========================================================================== */
.p-first-visit {
  position: relative;
  padding-top: 88px;
  padding-bottom: 240px;
  background: var(--c-blue02);
}

/* 上＝帯の外側に盛り上がる波／下＝帯を削り取る波（ページ背景色で塗る） */
.p-first-visit::before,
.p-first-visit::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1078px;
  max-width: 100%;
  height: 88px;
  transform: translateX(-50%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

.p-first-visit::before {
  bottom: 100%;
  background-image: url("/system_panel/uploads/images/first_wave-top.svg");
}

.p-first-visit::after {
  bottom: 0;
  background-image: url("/system_panel/uploads/images/first_wave-bottom.svg");
}

.p-first-visit .c-sec-title-en {
  display: block;
  line-height: 1.05;
}
.p-first-visit .c-sec-title-ja { margin-top: 0; }

/* ==========================================================================
   3. STEP 01〜04
   ========================================================================== */
.p-first-steps { margin-top: 66px; }

.p-first-step {
  position: relative;
  padding: 40px;
}

/* カード間のコネクタ（下向きの三角）。要素を増やさず ::before で描く */
.p-first-step + .p-first-step { margin-top: 57px; }

.p-first-step + .p-first-step::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -57px;
  width: 0;
  height: 0;
  margin-left: -27px;
  border-left: 27px solid transparent;
  border-right: 27px solid transparent;
  border-top: 31px solid var(--c-navy);
}

.p-first-step-photo { width: 304px; }

.p-first-step-photo img {
  width: 100%;
  height: 193px;
  border-radius: var(--r-card);
  object-fit: cover;
}

.p-first-step-body { padding: 22px 0 22px 24px; }

.p-first-step-num {
  padding-bottom: 16px;
  border-bottom: 4px dotted var(--c-navy);
  font-family: var(--font-base);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.p-first-step-tags {
  gap: 16px;
  margin-top: 16px;
}

/* カンプの帯は字送り0・上下paddingなし（高さは行間だけで作る） */
.p-first-step .c-label-band {
  padding: 0 24px;
  line-height: 1.6;
  letter-spacing: 0;
}

.p-first-step-text {
  margin-top: 16px;
  font-size: 1rem;
  line-height: 1.6;
}

/* ==========================================================================
   4. ご準備いただくもの／ご注意事項（黄色のボックス）
   ========================================================================== */
.p-first-prep {
  margin-top: 78px;
  padding: 48px 64px;
}

.p-first-prep-row {
  margin-left: -24px;
  margin-right: -24px;
}

.p-first-prep-row > [class*="col-"] { padding-left: 24px; padding-right: 24px; }

/* 2カラムの間の点線区切り（専用要素を作らず border で表現） */
.p-first-prep-col--r { border-left: 4px dotted var(--c-navy); }

.p-first-prep .c-label-band--pill { display: block; width: 100%; text-align: center; }

.p-first-prep-body { margin-top: 24px; }

.p-first-prep-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
}

.p-first-prep .c-list-item {
  padding-left: 1.4em;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.6;
}

.p-first-prep .c-list-item::before {
  top: 0.55em;
  width: 4px;
  height: 4px;
}

.p-first-note + .p-first-note { margin-top: 24px; }

.p-first-note-text {
  margin-top: 4px;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.6;
}

.p-first-notes-row {
  margin-left: -16px;
  margin-right: -16px;
}

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

/* ==========================================================================
   5. FAQ
   ========================================================================== */
.p-first-faq {
  position: relative;
  padding-top: 159px;
  padding-bottom: 160px;
}

/* 装飾円は .p-first-faq-panel の中に入れ、パネルの枠を基準に配置する
   （ウィンドウ左端基準の絶対配置だと、画面幅が変わるとパネルとの位置関係がずれるため）。
   数値はカンプ（1440px）の座標からパネルの padding box の原点
   ＝左 198px（180px + l-inner の padding 16px + 枠線 2px）／上 161px（padding-top 159px + 枠線 2px）を引いた値。
   右側の1つだけは、パネルが狭まっても右端との距離を保てるよう right で指定している。 */
.p-first-faq-panel .c-deco-circle--cream      { left: -134px;  top: -40px; width: 203px; height: 203px; mix-blend-mode:multiply; z-index: 1;}
.p-first-faq-panel .c-deco-circle--blue       { right: -85px;  top: 148px; width: 107px; height: 107px; background: var(--c-blue02); mix-blend-mode:multiply; z-index: 1}
.p-first-faq-panel .c-deco-circle--blue-lower { left: -118px;  top: 699px; width: 172px; height: 172px; background: var(--c-blue02); mix-blend-mode:multiply; z-index: 1}
.p-first-faq-panel .c-deco-circle--pink       { left: -3px;    top: 785px; width: 114px; height: 114px; mix-blend-mode:multiply; z-index: 1}

.p-first-faq-panel {
  position: relative;
  padding: 64px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 8px 8px 0 rgba(24, 61, 129, 0.25);
}

/* カンプの点線は文字幅より広い140px */
.p-first-faq-panel .c-sec-title-en {
  width: 140px;
  padding-bottom: 12px;
}

.p-first-faq-panel .c-sec-title-ja--sm { margin-top: 12px; }

.p-first-faq-row {
  margin-top: 32px;
  margin-left: -32px;
  margin-right: -32px;
}

.p-first-faq-row > [class*="col-"] { padding-left: 32px; padding-right: 32px; }

.p-first-faq-item { padding: 0 24px; }

.p-first-faq-item + .p-first-faq-item {
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid rgba(24, 61, 129, 0.25);
}

.p-first-faq-q {
  font-family: var(--font-base);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.7;
}

.p-first-faq-a {
  margin-top: 8px;
  font-size: 1rem;
  line-height: 1.7;
}

.p-first-faq-mascot { width: 120px; }

.p-first-faq-side-text {
  margin-top: 32px;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.7;
}

.p-first-faq-side .c-btn { margin-top: 32px; }

/* ==========================================================================
   レスポンシブ（SP 〜767px / タブレット 768〜991px / PC 992px〜）
   ※ SP・タブレットのカンプが無いため、こちら側で設計した値
   ========================================================================== */
@media (max-width: 991.98px) {
  .p-first-visit { padding-top: 56px; padding-bottom: 120px; }
  .p-first-visit::before,
  .p-first-visit::after { height: 44px; }


  .p-first-prep { margin-top: 56px; padding: 32px 24px; }
  .p-first-prep-row { margin-left: -12px; margin-right: -12px; }
  .p-first-prep-row > [class*="col-"] { padding-left: 12px; padding-right: 12px; }
  /* 縦積みになるので縦の点線をやめ、上下の区切りにする */
  .p-first-prep-col--r {
    margin-top: 32px;
    padding-top: 32px;
    border-left: 0;
    border-top: 4px dotted var(--c-navy);
  }

  .p-first-faq { padding-top: 80px; padding-bottom: 80px; }
  .p-first-faq .c-deco-circle { display: none; }
  .p-first-faq-panel { padding: 32px 24px; }
  .p-first-faq-row { margin-top: 24px; margin-left: -12px; margin-right: -12px; }
  .p-first-faq-row > [class*="col-"] { padding-left: 12px; padding-right: 12px; }
  .p-first-faq-side { margin-top: 40px; text-align: center; }
  .p-first-faq-side-text { margin-top: 20px; font-size: 1.125rem; }
}

@media (max-width: 767.98px) {
  /* STEP: 767px以下だけ1カラムに積む（768〜991px はPCと同じ2カラム）。
     カラムの切り替えは HTML の col-md-auto / col-md で行っている */
  .p-first-steps { margin-top: 40px; }
  .p-first-step { padding: 24px; }
  .p-first-step + .p-first-step { margin-top: 48px; }
  .p-first-step + .p-first-step::before {
    top: -48px;
    margin-left: -20px;
    border-left-width: 20px;
    border-right-width: 20px;
    border-top-width: 24px;
  }
  .p-first-step-photo { width: 100%; }
  .p-first-step-photo img { height: 200px; }
  .p-first-step-body { padding: 20px 0 0; }

  /* MV: 767px以下はカンプ 1396-21350 の記事型SPレイアウト（common.css の c-page-mv--article）。
     768〜991px はPCと同じ表示にするため、タブレット向けの指定は置かない */
  .p-first-mv { padding-bottom: 56px; }
  .p-first-mv-catch { font-size: 1.125rem; }

  .p-first-visit::before,
  .p-first-visit::after { height: 28px; }

  .p-first-step-num { font-size: 1.25rem; padding-bottom: 12px; }
  .p-first-step .c-label-band { font-size: 1.0625rem; padding: 0 16px; }
  .p-first-step-tags { gap: 8px; }
  .p-first-step-text { font-size: 0.9375rem; }

  .p-first-prep .c-label-band--pill { font-size: 1.0625rem; }
  /* 575px以下で縦積みになる2カラムの間隔 */
  .p-first-prep-body > .row > [class*="col-"] + [class*="col-"],
  .p-first-notes-row > [class*="col-"] + [class*="col-"] { margin-top: 20px;  }
  .p-first-prep-body .col-12 + .col-12 {margin-top: 20px;}
  .p-first-faq-q { font-size: 1.0625rem; }
  .p-first-faq-a { font-size: 0.9375rem; }
  .p-first-faq-side-text { font-size: 1rem; }
  .p-first-faq-panel .c-sec-title-en { width: 110px; }
}