@charset "UTF-8";
/* ==========================================================================
   トップページ専用スタイル（p-top-）
   共通部品（c-）は common.css 側を使い、ここにはトップ固有のものだけを書く。
   カンプ: Figma winjeLDXMguhfDP4yN4FVL / node-id 996-4631（PC 1440px）
   ========================================================================== */

/* ==========================================================================
   1. メインビジュアル（1440×840）
   ========================================================================== */
.p-top-mv {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--c-blue-pale);
}

/* 背景写真（カンプでは不透明度50%＋グラデーションのスクリーン合成） */
.p-top-mv::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("/system_panel/uploads/images/top_mv-bg.jpg") center center / cover no-repeat;
  opacity: 0.5;
}

.p-top-mv::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to right, #5db7e9, #9421a4);
  mix-blend-mode: screen;
}

.p-top-mv-stage {
  position: relative;
  max-width: 1440px;
  height: 840px;
  margin: 0 auto;
}

/* MV下端の白い波（元はSPカンプ 411-6427 の 346×27。2026-09-13 に全幅へ展開）。
   要素は増やさず ::after で敷く。位置・高さはステージに対する％なので、
   SP（375×480 → 左14px・右15px・高さ27px）と同じ見え方のままPCへ拡大する
   （1440×840 では 左53.8px・右57.6px・高さ47.3px）。
   SVGは preserveAspectRatio="none" なので 100% 100% で引き伸ばして使う */
.p-top-mv-stage::after {
  content: "";
  position: absolute;
  left: 3.733%;
  right: 4%;
  bottom: 0;
  height: 5.625%;
  background: url("/system_panel/uploads/images/top_mv-wave-sp.svg") center bottom / 100% 100% no-repeat;
}

.p-top-mv-en {
  position: absolute;
  left: 4.65%;
  top: 32.38%;
  margin: 0;
  background: var(--c-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: var(--font-base);
  font-size: 6.375rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.01em;
  white-space: nowrap;
  z-index: 10;
}

.p-top-mv-copy {
  position: absolute;
  left: 4.72%;
  top: 60.36%;
  padding: 11px 24px;
  background: var(--c-gradient);
  color: var(--c-white);
  font-family: var(--font-ja);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.115em;
  white-space: nowrap;
}

.p-top-mv-photo {
  position: absolute;
  border-radius: var(--r-card);
}

.p-top-mv-photo--01 { left: 46.67%; top: 19.88%; width: 25.56%; }
.p-top-mv-photo--02 { left: 74.79%; top: 26.31%; width: 20.56%; }
.p-top-mv-photo--03 { left: 62.71%; top: 49.05%; width: 24.10%; }

.p-top-mv-mascot {
  position: absolute;
  left: 3.82%;
  top: 71.19%;
  width: 18.33%;
}

/* --------------------------------------------------------------------------
   MVの表示アニメーション
   写真01 → 写真02 → 写真03 → 欧文コピー＋キャッチ の順に、
   少し下から「ふわっと」浮かび上がらせる。ページを開いたときに一度だけ再生。
   JSは使わず CSS アニメーションだけで組んでいる（MVは常に画面内にあるため）。
   PC・タブレット・SPすべてで同じように動く。
   -------------------------------------------------------------------------- */
@keyframes p-top-mv-fadein {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* fill-mode: both で、待っている間も開始時の状態（透明）を保つ */
.p-top-mv-photo,
.p-top-mv-en,
.p-top-mv-copy {
  animation: p-top-mv-fadein 0.8s cubic-bezier(0.22, 0.72, 0.3, 1) both;
}

/* 表示の順番（遅延は 0.2秒ずつ、最後のテキストだけ少し間を取る） */
.p-top-mv-photo--01 { animation-delay: 0.1s; }
.p-top-mv-photo--02 { animation-delay: 0.3s; }
.p-top-mv-photo--03 { animation-delay: 0.5s; }
.p-top-mv-en,
.p-top-mv-copy      { animation-delay: 0.75s; }

/* OS側で「視差効果を減らす」にしている端末では動かさない */
@media (prefers-reduced-motion: reduce) {
  .p-top-mv-photo,
  .p-top-mv-en,
  .p-top-mv-copy {
    animation: none;
  }
}

/* 1440px 未満は MV 全体を横幅に比例させて縮小する。
   768px まで同じ扱いにして、タブレットもPCと同じレイアウトにする */
@media (max-width: 1439.98px) and (min-width: 768px) {
  .p-top-mv-stage { height: 58.34vw; }
  .p-top-mv-en   { font-size: 7.08vw; }
  .p-top-mv-copy { font-size: 2.08vw; padding: 0.76vw 1.67vw; }
}

/* ==========================================================================
   2. リード（あなたの人生に寄り添う整骨院）
   ========================================================================== */
.p-top-intro {
  position: relative;
  padding: 78px 0 200px;
  text-align: center;
}

.p-top-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/system_panel/uploads/images/top_bg-room.jpg") center center / cover no-repeat;
  /* opacity: 0.07; */
}

.p-top-intro-title {
  font-family: var(--font-ja);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

.p-top-intro-lead {
  max-width: 660px;
  margin: 32px auto 0;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.7;
  letter-spacing: 0.1em;
}

.p-top-intro-lead + .p-top-intro-lead { margin-top: 24px; }

.p-top-intro .c-btn { margin-top: 40px; }

/* ==========================================================================
   3. こんなお悩みはありませんか？（水色帯・上下が波形）
   ========================================================================== */
.p-top-worry {
  position: relative;
  z-index: 1;
  padding: 0 0 52px;
  background: var(--c-blue01);
}

/* 上下の波形（common_wave.svg を background-image で敷く。要素は増やさない） */
.p-top-worry::before,
.p-top-worry::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 87px;
  background: url("/system_panel/uploads/images/common_wave.svg") center bottom / 100% 87px no-repeat;
}

.p-top-worry::before { top: -86px; }
.p-top-worry::after  { bottom: -86px; transform: scaleY(-1); }

.p-top-worry-mascot {
  display: block;
  width: 115px;
  margin: 0 auto;
}

.p-top-worry-title {
  display: inline-block;
  margin-top: 22px;
  padding-bottom: 10px;
  border-bottom: 4px dotted var(--c-navy);
  font-family: var(--font-ja);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.2;
}

.p-top-worry-sub {
  margin-top: 14px;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.06em;
}

/* 5カラム（1カラム 236.8px ／ 間隔 32px ＝ 全体 1312px）
   Bootstrap の row / col-* ではなく CSS グリッドで組む（PC 5／タブレット 3／SP 2カラム）。
   カード側が subgrid で親の行トラックを共有するため、イラストの高さがカードごとに違っても
   見出し・タグの開始位置が行内で揃う。 */
.p-top-worry-list {
  display: grid;
  /* minmax(0,1fr) で等幅に固定する。1fr（自動最小値＝min-content）だと、
     長いタグを持つ3枚目だけカラムが 249px に広がってイラストも大きくなる */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 32px;
  /* カード「間」の行間。カード内部の行間には効かせないよう、カード側で上書きしている */
  row-gap: 32px;
  width: 100%;
  max-width: 1344px;
  margin: 75px auto 0;
  padding: 0 16px;
}

/* カード = イラスト／見出し／タグの3行。親の行トラックをそのまま使う（subgrid） */
.p-top-worry-col {
  display: grid;
  /* カード自身もグリッドなので、これが無いと中の最長タグ（249px）に合わせて
     内側のトラックが広がり、イラストだけカラムからはみ出す */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: subgrid;
  grid-row: span 3;
  /* 親の row-gap（カード間の間隔）をカード内部に持ち込まないための上書き。
     見出し→タグの 12px は .p-top-worry-tags の margin-top が持つ */
  row-gap: 0;
}

/* イラストは「TYPE 0X」の斜め文字を含む1枚。カラム幅より広く、左にはみ出す */
.p-top-worry-img {
  /* display: block; */
  /* width: 100%; */
  /* max-width: none;
  margin-left: -6.6%; */
}

.p-top-worry-name {
  min-height: 70px;
  font-family: var(--font-ja);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.75;
  text-align: center;
}

/* subgrid でタグ枠が行トラックの高さまで引き伸ばされるため、
   折り返した各行（＝タグ）が余白ぶん伸びてしまう。行を上詰めにして本来の高さに戻す */
.p-top-worry-tags {
  margin-top: 12px;
  align-content: flex-start;
}

/* ==========================================================================
   4. TYPE 01〜05 の詳細カード
   ========================================================================== */
.p-top-types {
  position: relative;
  padding-top: 255px;
}

.p-top-types::before {
  content: "";
  position: absolute;
  inset: 1216px 0 0 0;
  z-index: -1;
  background: url("/system_panel/uploads/images/top_bg-room.jpg") center top / cover no-repeat;
  opacity: 0.10;
}

/* 上部の二重シェブロン（画像を使わず border で描く） */
.p-top-types-arrow {
  position: absolute;
  left: 50%;
  top: 187px;
  width: 62px;
  height: 50px;
  margin-left: -31px;
}

.p-top-types-arrow::before,
.p-top-types-arrow::after {
  content: "";
  position: absolute;
  left: 9px;
  width: 44px;
  height: 44px;
  border-right: 9px solid var(--c-blue);
  border-bottom: 9px solid var(--c-blue);
  transform: rotate(45deg) skew(-8deg, -8deg);
}

.p-top-types-arrow::before { top: -20px; }
.p-top-types-arrow::after  { top: -1px; }

.p-top-type {
  position: relative;
  padding: 80px 94px 80px;
  box-shadow: var(--shadow-hard);
}

.p-top-type + .p-top-type { margin-top: 81px; }

/* 奇数カード: 左にイラスト・カードは 180px 〜 1355px */
.p-top-type--odd {
  margin-left: 12.5%;
  margin-right: 5.9%;
  border-radius: 120px 120px 16px 200px;
}

/* 偶数カード: 右にイラスト・カードは 86px 〜 1261px */
.p-top-type--even {
  margin-left: 5.97%;
  margin-right: 12.43%;
  border-radius: 120px 120px 200px 16px;
}

.p-top-type--01 { background: var(--c-blue02); }
.p-top-type--02 { background: var(--c-blue03); }
.p-top-type--03 { background: var(--c-blue01); }
.p-top-type--04 { background: var(--c-blue02); }
.p-top-type--05 { background: var(--c-blue03); }

.p-top-type-illust {
  position: absolute;
  top: -31px;
  width: 320px;
}

.p-top-type--odd  .p-top-type-illust { left: -5px; }
.p-top-type--even .p-top-type-illust { right: -14px; }

.p-top-type--odd  .p-top-type-body { margin-left: 275px; }
.p-top-type--even .p-top-type-body { margin-right: 275px; }

.p-top-type-title {
  display: block;
  padding-bottom: 14px;
  border-bottom: 4px dotted var(--c-navy);
  font-family: var(--font-ja);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.1em;
}

.p-top-type--even .p-top-type-title { text-align: right; }

.p-top-type-text {
  margin-top: 22px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.8;
}

.p-top-type-tags { margin-top: 26px; }

.p-top-type .c-reco { margin-top: 40px; }

/* ==========================================================================
   5. CTA（お気軽に当院へご相談ください！）
   ========================================================================== */
.p-top-cta {
  padding-top: 88px;
  padding-bottom: 160px;
}

.p-top-cta .c-cta-mascot { top: 68px; bottom: auto; }

/* ==========================================================================
   6. PICK UP（写真の上に文字を重ねた4枚）
   ========================================================================== */
.p-top-pickup{
  max-width: 1400px;
  margin: 0 auto;
}

.p-top-pickup-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 680px;
  padding: 32px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--c-white);
}

/* 文字を読みやすくするための暗幕（カンプ同様、下ほど濃くする） */
.p-top-pickup-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.18) 45%, rgba(0, 0, 0, 0) 78%);
}

.p-top-pickup-card > * { position: relative; }

.p-top-pickup-card--01 { background-image: url("/system_panel/uploads/images/top_pickup-01.jpg"); }
.p-top-pickup-card--02 { background-image: url("/system_panel/uploads/images/top_pickup-02.jpg"); }
.p-top-pickup-card--03 { background-image: url("/system_panel/uploads/images/top_pickup-03.jpg"); }
.p-top-pickup-card--04 { background-image: url("/system_panel/uploads/images/top_pickup-04.jpg"); }

.p-top-pickup-badge {
  align-self: flex-start;
  padding: 4px 14px;
  background: var(--c-white);
  border-radius: 20px;
  color: var(--c-blue);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

.p-top-pickup-title {
  margin-top: 12px;
  max-width: 510px;
  padding-bottom: 12px;
  border-bottom: 4px dotted var(--c-white);
  font-family: var(--font-ja);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.06em;
}

.p-top-pickup-sub {
  margin-top: 14px;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.p-top-pickup-text {
  margin-top: 18px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.7;
}

.p-top-pickup-card .c-btn {
  align-self: center;
  margin-top: 26px;
}

/* ==========================================================================
   7. NURTURE ／ RECRUIT（薄い写真背景の上に載る）
   ========================================================================== */
.p-top-closing {
  position: relative;
  padding: 141px 0 107px;
}

.p-top-closing::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("/system_panel/uploads/images/top_bg-nurture.jpg") center center / cover no-repeat;
}

.p-top-nurture-panel {
  position: relative;
  max-width: 980px;
  margin: 67px auto 0;
  padding: 72px 60px 56px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 40px;
  text-align: center;
  box-shadow: var(--shadow-hard);
}

.p-top-nurture-mascot {
  position: absolute;
  left: 55px;
  top: -52px;
  width: 90px;
}

.p-top-nurture-title {
  font-family: var(--font-ja);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.6;
}

.p-top-nurture-cols {
  max-width: 890px;
  margin: 56px auto 0;
}

.p-top-nurture-photo {
  display: block;
  width: 150px;
  max-width: 100%;
  margin: 0 auto;
  border-radius: 50%;
}

.p-top-nurture-col .c-label-band { margin-top: 14px; }

.p-top-nurture-text {
  margin-top: 14px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.85;
  text-align: left;
}

.p-top-nurture-lead {
  margin-top: 48px;
  color: var(--c-blue);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.8;
  letter-spacing: 0.06em;
}

.p-top-nurture-panel .c-btn { margin-top: 22px; }

/* RECRUIT カード */
.p-top-recruit { margin-top: 42px; }

.p-top-recruit-card {
  max-width: 976px;
  margin: 0 auto;
  background: var(--c-white);
  border: 5px solid var(--c-blue);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-hard);
}

.p-top-recruit-photo {
  display: block;
  width: 100%;
  height: 100%;
  /* min-height: 256px; */
  object-fit: cover;
}

.p-top-recruit-body { 
  padding: 32px 44px 32px 44px !important;
}

.p-top-recruit-en {
  padding-bottom: 0;
  border-bottom: 0;
  font-size: 2.5rem;
  line-height: 1.2;
}

.p-top-recruit-ja {
  margin-left: 12px;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.6;
}

.p-top-recruit-text {
  margin-top: 16px;
  font-size: 1rem;
  line-height: 1.7;
}

.p-top-recruit-body .c-btn-text { margin-top: 20px; }

/* ==========================================================================
   レスポンシブ
   ========================================================================== */
@media (max-width: 1199.98px) {
  .p-top-type { padding: 64px 48px 56px; }
  .p-top-type-illust { width: 240px; top: -24px; }
  .p-top-type--odd .p-top-type-body { margin-left: 210px; }
  .p-top-type--even .p-top-type-body { margin-right: 210px; }
}

@media (max-width: 991.98px) {
  .p-top-intro { padding: 56px 0 96px; }
  .p-top-intro-title { font-size: 1.625rem; }
  .p-top-intro-lead { font-size: 1rem; letter-spacing: 0.04em; }

  .p-top-worry::before,
  .p-top-worry::after { height: 48px; background-size: 100% 48px; }
  .p-top-worry::before { top: -47px; }
  .p-top-worry::after { bottom: -47px; }
  .p-top-worry-title { font-size: 1.5rem; }
  .p-top-worry-sub { font-size: 0.9375rem; }
  /* タブレット（768〜991px）: 3カラム */
  .p-top-worry-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 24px;
    margin-top: 40px;
  }
  .p-top-worry-name { font-size: 1.0625rem; min-height: 0; }

  .p-top-types { padding-top: 160px; }
  .p-top-types::before { inset: 130px 0 0 0; }
  .p-top-types-arrow { top: 100px; }
  .p-top-type {
    margin-left: 16px;
    margin-right: 16px;
    padding: 40px 24px 40px;
    border-radius: 60px 60px 16px 80px;
  }
  .p-top-type + .p-top-type { margin-top: 48px; }
  .p-top-type--even { border-radius: 60px 60px 80px 16px; }
  .p-top-type-illust {
    position: static;
    display: block;
    width: 220px;
    margin: -20px auto 12px;
  }
  .p-top-type--odd .p-top-type-body,
  .p-top-type--even .p-top-type-body { margin-left: 0; margin-right: 0; }
  .p-top-type--even .p-top-type-title { text-align: left; }
  .p-top-type-title { font-size: 1.375rem; }
  .p-top-type .c-reco { margin-top: 32px; }

  .p-top-cta { padding-top: 56px; padding-bottom: 80px; }

  .p-top-pickup-card { min-height: 0; padding: 40px 24px; }
  .p-top-pickup-title { font-size: 1.625rem; }
  .p-top-pickup-sub { font-size: 1rem; }
  .p-top-pickup-text { font-size: 0.875rem; }

  .p-top-closing { padding: 72px 16px 64px; }
  .p-top-nurture-panel { margin-top: 40px; padding: 56px 24px 40px; border-radius: 24px; }
  .p-top-nurture-mascot { left: 16px; top: -40px; width: 72px; }
  .p-top-nurture-title { font-size: 1.25rem; }
  .p-top-nurture-cols { margin-top: 32px; }
 
  .p-top-nurture-lead { font-size: 0.9375rem; margin-top: 32px; }
  .p-top-recruit-body { padding: 24px; }
  .p-top-recruit-en { font-size: 1.875rem; }
  .p-top-recruit-photo { min-height: 180px; }
}

@media (max-width: 767.98px) {
  /* ------------------------------------------------------------------
     MV（カンプ 411-6427・SP 375×480）
     PCと同じく全部を絶対配置で重ねる作り。ステージの高さを
     480 ÷ 375 = 128vw にして、位置とサイズはステージに対する％で置くので、
     どの端末幅でも同じ絵で拡縮する（768px以上はPCと同じレイアウト）。
     ヘッダーは MV の上に重なる想定（カンプも同じ）なので上余白は取らない。
     ------------------------------------------------------------------ */
  .p-top-mv-stage {
    height: 128vw;
    padding: 0;
  }

  /* 欧文コピー（カンプ 48px @21,216・2行・行送り1.05）
     グラデはサイト共通の --c-gradient のまま（カンプのSP frameだけ
     別のグラデ #007bc7→#6c66e1 になっているが、トークンを増やさない） */
  .p-top-mv-en {
    left: 5.6%;
    top: 45%;
    font-size: 12.8vw;
  }

  /* キャッチの帯（カンプ 幅なり×34px @21,319・文字14px）
     カンプの padding は上下4pxだが、それだと帯の高さが25pxになってしまうので
     カンプの見た目（34px）に合わせて上下は8.5px相当にしている */
  .p-top-mv-copy {
    left: 5.6%;
    top: 66.458%;
    padding: 2.2667vw 4.2667vw;
    font-size: 3.7333vw;
  }

  /* 写真3枚（カンプの座標をステージ比に換算。並びはPCと同じ） */
  .p-top-mv-photo--01 { left: 33.6%;   top: 16.042%; width: 32.776%; }
  .p-top-mv-photo--02 { left: 69.741%; top: 19.815%; width: 26.338%; }
  .p-top-mv-photo--03 { left: 54.232%; top: 33.117%; width: 30.947%; }

  /* グースケ（カンプ 103×129 @14,376） */
  .p-top-mv-mascot { left: 3.733%; top: 78.333%; width: 27.467%; }

  /* SP（〜767px）: 2カラム */
  .p-top-worry-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 20px;
  }
  .p-top-type-text { font-size: 0.9375rem; }
  .p-top-nurture-photo { width: 130px; }
  .p-top-nurture-col + .p-top-nurture-col { margin-top: 28px; }
}