@charset "utf-8";

/* =========================================================
   相談する
   ========================================================= */

.u-pink { color: var(--c-pink); font-weight: 700; }
.u-teal { color: var(--c-teal); font-weight: 700; }
.u-red { color: #dd4040; font-weight: 700; }

/* ---------- 白カード ---------- */
.l-card {
  width: 100%;
  max-width: var(--w-content);
  margin: .8125rem auto 0;
  background: #fff;
  border-radius: 1.25rem;
}
.l-card__inner { padding-inline: 7.5rem; }   /* 120px */
.l-card--main { overflow: hidden; }

.p-town { margin-top: 4rem; }
.p-town img { display: block; width: 100%; }
.p-consultation-page .p-cta-split { margin-top: 3.75rem; }
.p-consultation-page .c-breadcrumb { margin-top: calc(4.4375rem - var(--wave-h)); }

/* ヒーロー（リード文なし・タイトルのみ） */
.p-hero-lower--consultation { padding: 5.625em 0 calc(3.1875em + var(--wave-h)); }
/* em = 1200px デザインの実寸（タブレット幅では画面幅に比例して縮む） */
.p-hero-lower--consultation .p-hero-lower__deco {
  top: -4.0625em;                     /* デザイン y=115 */
  transform: translateX(-8.4375em);   /* デザイン x=465 */
  width: 7.625em;                     /* 122px */
}
.p-hero-lower--consultation .p-hero-lower__img {
  top: -2.4875em;                     /* 差し替えイラストの下端を元の位置(y=321)に合わせる */
  transform: translateX(10.5em);     /* デザイン x=750 */
  width: 14.25em;                     /* 228px（横幅は元イラストと同じ） */
}

/* =========================================================
   イントロ（ティールパネル）
   ========================================================= */
/* デザイン実測: パネル 960×550。イラストの切り抜き下端がパネル最下部と一致する */
.p-intro {
  border-radius: 1.25rem 1.25rem 0 0;
  background: url("../img/online-consultation/bg.svg") no-repeat top center / 100% 100%;
}
.p-intro__inner { padding: 5rem 1.25rem 0; }   /* デザイン: 見出し上 80px */
.p-intro__title {
  color: #fff;
  font-size: 1.5rem;      /* 24px */
  letter-spacing: normal; /* デザインの字送りは等幅 */
  line-height: 1.5;       /* 36px */
}
.p-intro__img { margin: 2.6875rem 0 0; }
.p-intro__img img {
  width: 42.875rem;       /* 686px */
  transform: translateX(1.8125rem);   /* デザイン: 中央より 29px 右 */
}

.p-dots { margin: .75rem 0 0; }
.p-dots img { width: 1.875rem; }

/* =========================================================
   相談方法
   ========================================================= */
.p-method { padding: 5.5rem 0 0; }

.p-method__lead {
  margin-top: 2.75rem;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.55;
}
.p-method__lead a { color: var(--c-teal); }

/* デザイン実測: カードは 340×349・角丸16px・枠線1px＋ドロップシャドウ、カード間 40px */
.p-method__list {
  --bs-gutter-x: 2.5rem;   /* カード間 40px（デザイン実測） */
  margin-top: 2.75rem;
}
.p-method__item { max-width: calc(21.25rem + var(--bs-gutter-x)); }

.p-method__card {
  height: 100%;
  padding: 3.25rem 1.5rem 2.25rem;
  border: 2px solid var(--c-text);
  border-radius: 1rem;
  background: #fff;
  box-shadow: .25rem .3125rem 0 var(--c-text);
}
/* ラベルはカード上端に中心が来る 220×40 のピル */
.p-method__label {
  top: -1.25rem;
  left: 50%;
  transform: translateX(-50%);
  width: 13.75rem;      /* 220px */
  min-height: 2.5rem;   /* 40px */
  padding: .25rem 1rem;
  border-radius: 3.125rem;
  background: var(--c-text);
  color: #fff;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}
.p-method__img { width: 12.5rem; }   /* 200px */
.p-method__note { margin-top: 1.5rem; font-size: .875rem; line-height: 1.85; }

/* =========================================================
   相談員の紹介
   ========================================================= */
.p-staff { margin-top: 5.125rem; }

.p-staff__band {
  padding: 4.375rem 7.5rem;   /* デザイン実測 70px */
  background: var(--c-cream);
}
.p-staff__band-img {
  position: absolute;
  top: 2.25rem;
  right: 5.875rem;
  width: 6.1875rem;   /* 99px */
}
.p-staff__band-text {
  font-size: 1.25rem;   /* 20px */
  font-weight: 700;
  line-height: 1.6;
}

.p-staff__list {
  --bs-gutter-x: 2.5rem;   /* カード間 40px（デザイン実測） */
  margin-top: 3.75rem;     /* デザイン: クリーム帯の下 60px */
}

/* デザイン実測: 340×90 の塗りボックス＋下向きのしっぽ（20×30） */
.p-staff__balloon {
  min-height: 5.625rem;   /* 90px */
  padding: .75rem 1rem;
  border-radius: .75rem;  /* デザイン実測 12px */
  color: #fff;
  font-size: 1.125rem;    /* 18px */
  font-weight: 700;
  line-height: 1.5556;    /* 28px */
}
.p-staff__balloon::after {
  content: "";
  position: absolute;
  top: calc(100% - .25rem);
  left: 50%;
  width: 1.5rem;
  height: 2.125rem;
  transform: translateX(-50%);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
}
.p-staff__balloon--pink { background: var(--c-pink); }
.p-staff__balloon--pink::after { background-image: url("../img/online-consultation/baloon-arrow-pink.svg"); }
.p-staff__balloon--teal { background: var(--c-teal); }
.p-staff__balloon--teal::after { background-image: url("../img/online-consultation/baloon-arrow-blue.svg"); }

.p-staff__photo {
  place-content: center;
  height: 13.75rem;    /* デザイン実測 220px */
  margin-top: 3rem;
  background: #e5e5e5;
  font-size: .875rem;
}
.p-staff__desc { margin-top: 2.375rem; font-size: 1rem; line-height: 1.875; }

/* =========================================================
   電話 / Zoom の共通ブロック（クリーム帯）
   ========================================================= */
.p-block {
  margin-top: 3.8125rem;
  padding: 9.0625rem 0 3.5rem;   /* デザイン: ラベル85px を含めて本文まで 145px */
  background: var(--c-cream);
}
/* デザイン実測: 320×85 のタブがクリーム帯の上端から下がる（下側だけ角丸20px） */
.p-block__label {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20rem;         /* 320px */
  min-height: 5.3125rem;/* 85px */
  padding: .5rem 1rem;
  border-radius: 0 0 1.25rem 1.25rem;
  background: var(--c-text);
  color: #fff;
  font-size: 1.5rem;    /* 24px */
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.6;
}
.p-block + .p-block { margin-top: 3rem; }
.p-block__inner { padding-inline: 7.5rem; }
.p-block__btn { margin-top: 2rem; }
/* デザイン実測: 384×88 の2行ボタン */
.p-block__btn .c-btn {
  width: 24rem;
  min-height: 5.5rem;
  padding: .5rem 3rem .5rem 1.5rem;
  font-size: 1.25rem;   /* 20px */
  line-height: 1.4;     /* 28px */
}

/* ---------- 電話相談 ---------- */
.p-tel {
  gap: 2.5rem;
  margin-top: 0;   /* .p-block の padding-top がデザインの 145px を担う */
}
.p-tel__box {
  flex: 0 0 21.25rem;   /* 340px（デザイン実測） */
  padding: 2.9375rem 1.5625rem 2.3125rem;   /* 枠線 2px 込みでデザインの 48 / 26 / 38 */
  border: 2px solid var(--c-text);
  border-radius: 1rem;
  background: #fff;
  box-shadow: .25rem .3125rem 0 var(--c-text);
}
.p-tel__label { font-size: 1.125rem; font-weight: 700; line-height: 1.5; }
.p-tel__num { margin-top: .9375rem; }   /* デザイン実測 15px */
.p-tel__num a {
  display: inline-flex;
  align-items: center;
  gap: .3125rem;        /* デザイン実測: アイコン右端 295 → 番号 300 */
  color: var(--c-teal);
  font-size: 2.5rem;    /* 40px */
  font-weight: 700;
  line-height: 1.2;     /* 48px */
}
.p-tel__num img { width: 1.75rem; }
.p-tel__note { margin-top: 1rem; font-size: .875rem; line-height: 1.8572; }   /* 14/26 */

.p-tel__info { margin: 0; flex: 1 1 auto; min-width: 0; }
.p-tel__info dt {
  display: inline-block;
  padding-bottom: .25rem;
  border-bottom: .20rem solid var(--c-teal);   /* 4px・両端を丸める */
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;
}
.p-tel__info dd { margin: .75rem 0 0; font-size: 1.125rem; font-weight: 700; line-height: 1.6; }
.p-tel__info dd + dt { margin-top: 1.75rem; }

.p-notes { margin-top: 2.6875rem; font-size: .875rem; line-height: 1.625; }

/* ---------- Zoom 相談 ---------- */
.p-zoom { --bs-gutter-x: 2.5rem; }   /* カード間 40px（デザイン実測） */
.p-zoom__item { max-width: calc(21.25rem + var(--bs-gutter-x)); }
/* デザイン実測: カード 340×643。上下 40px、下端の丸バッジ(88px)は必ずカード下端に揃う */
.p-zoom__card {
  height: 100%;
  padding: 2.5rem 1.5rem;
  border: 2px solid var(--c-text);
  border-radius: 1rem;
  background: #fff;
  box-shadow: .25rem .3125rem 0 var(--c-text);
}
.p-zoom__label {
  padding-bottom: .25rem;
  border-bottom: .20rem solid var(--c-teal);   /* 4px・両端を丸める */
  font-size: 1.125rem;   /* 18px */
  font-weight: 700;
  line-height: 1.5;
}
.p-zoom__name { margin-top: 1.5rem; font-size: 1.25rem; font-weight: 700; line-height: 1.5; }
.p-zoom__icon { width: 9.125rem; margin: 2.1875rem 0 2.75rem; }   /* 146px */
.p-zoom__days { margin-top: 1.5rem; font-size: 1rem; font-weight: 700; line-height: 1.85; }
.p-zoom__times { margin: 1.25rem 0 1.75rem; font-size: 1rem; line-height: 1.85; }
.p-zoom__slot {
  place-content: center;
  width: 5.5rem;    /* 88px */
  height: 5.5rem;
  margin-top: auto;   /* 枠数のちがう2枚でも丸バッジの位置を揃える */
  border: .125rem solid var(--c-teal);
  border-radius: 50%;
  color: var(--c-teal);
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 2rem;   /* 32px：デザインのベースライン間隔 */
}
.p-zoom__slot-day { font-size: 1.125rem; color: var(--c-text); }
.p-zoom__slot-count { display: block; }
.p-zoom__slot-num { font-size: 2rem; }   /* 32px */

/* ---------- 申込み方法 ---------- */
.p-apply__title { margin-top: 5rem; font-size: 1.5rem; }

.p-apply {
  gap: 2rem;
  margin-top: 3.5rem;
}
.p-apply__list { flex: 1 1 auto; font-size: 1rem; line-height: 1.875; }
.p-apply__list li { position: relative; padding-left: 1.375rem; }
.p-apply__list li + li { margin-top: 1.25rem; }
.p-apply__list li::before {
  content: "";
  position: absolute;
  top: .75rem;
  left: 0;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--c-yellow);
}
.p-apply__img {
  flex: 0 0 16.25rem;
  place-content: center;
  width: 16.25rem;
  height: 16.25rem;
  margin: 0;
  border-radius: 50%;
  background: #fff;
}
.p-apply__img img { width: 11.875rem; }   /* 190px */

/* ---------- 仕様表 ---------- */
.p-spec { margin: 3rem 0 0; }
.p-spec__row { gap: 1.25rem; }
.p-spec__row + .p-spec__row { margin-top: .875rem; }
.p-spec__row dt {
  flex: 0 0 9.375rem;
  padding: .25rem .625rem;
  border-radius: .375rem;
  background: var(--c-text);
  color: #fff;
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.6;
  text-align: center;
}
.p-spec__row dd { margin: 0; padding-top: .1875rem; font-size: .9375rem; line-height: 1.6; }

/* ---------- 問合せ先 ---------- */
.p-contact { margin-top: 3.25rem; }
.p-contact__label {
  display: inline-block;
  padding: .1875rem 1.125rem;
  border: .125rem solid var(--c-text);
  border-radius: .375rem;
  background: #fff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
}
.p-contact__name { margin-top: 1rem; font-size: 1.125rem; font-weight: 700; line-height: 1.5; }
.p-contact__mail { margin-top: .5rem; font-size: 1rem; }
.p-contact__mail a { display: inline-flex; align-items: center; gap: .5rem; }
.p-contact__mail img { width: 1.125rem; }

/* =========================================================
   おしゃべり会
   ========================================================= */
.p-cafe { padding: 6.75rem 7.5rem 0; }

.p-cafe__card {
  padding: 2.5rem 3.125rem 2rem;
  border: .125rem solid var(--c-text);
  border-radius: 1.25rem;
}
.p-cafe__label {
  top: -1.25rem;
  left: 50%;
  transform: translateX(-50%);
  padding: .375rem 1.75rem;
  border: .125rem solid var(--c-text);
  border-radius: 3.125rem;
  background: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  background: var(--c-cream);
}
.p-cafe__lead {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.6;
}
.p-cafe__cols {
  gap: 2rem;
  margin-top: 1rem;
}
.p-cafe__text { flex: 1 1 auto; font-size: 1rem; line-height: 1.875; }
.p-cafe__img { flex: 0 0 18rem; margin: 0; }
.p-cafe__img img { width: 100%; border-radius: .5rem; }

.p-cafe__btn { margin-top: 1.8rem; }


/* =========================================================
   動画
   ========================================================= */
.p-movies { padding: 7rem 0 0; }
.p-movies .l-card__inner { padding-inline: 4.375rem; }

.p-movies__lead {
  margin-top: 2.75rem;
  font-size: .9375rem;
  line-height: 1.85;
}

.p-movies__list {
  --bs-gutter-x: 1.3125rem;   /* カード間 21px（デザイン実測） */
  --bs-gutter-y: 1.3125rem;
  margin-top: calc(2.5rem - var(--bs-gutter-y));
}
.p-movies__card {
  height: 100%;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  padding: 1.875rem 1.375rem 2rem;
  border: .125rem solid var(--c-text);
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: .25rem .3125rem 0 var(--c-text);   /* about の .p-card と同じベタ影 */
}
.p-movies__card:hover { opacity: 1; box-shadow: .25rem .3125rem 0 var(--c-text), 0 .375rem .75rem rgba(0, 0, 0, .08); }

.p-movies__thumb {
  place-content: center;
  overflow: hidden;
  aspect-ratio: 210 / 124;
  background: #e5e5e5;   /* サムネイル未設定時のグレー */
}
/* サムネイル画像: 枠いっぱいに敷き、比率違いは cover でトリミング */
.p-movies__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-movies__play { position: relative; z-index: 1; width: 2.5rem; }   /* 画像より前面に */

.p-movies__title { display: block; margin-top: 1.25rem; font-size: 1rem; font-weight: 700; }
.p-movies__note { display: block; margin-top: .625rem; font-size: .875rem; line-height: 1.85; }
.p-movies__card .c-btn { align-self: center; margin-top: auto; }
.p-movies__card .c-btn.c-btn--sm { margin-top: 1.5rem; }

/* =========================================================
   レスポンシブ
   ========================================================= */
@media screen and (max-width: 1199px) {
  .l-card { max-width: min(var(--w-content), calc(100% - 2.5rem)); }   /* 左右 20px を空けたまま中央寄せ */
  .l-card__inner,
  .p-block__inner { padding-inline: 3.75rem; }
  .p-staff__band { padding-inline: 3.75rem; }
  .p-staff__band-img { right: 2rem; }
  .p-cafe { padding-inline: 3.75rem; }
  .p-movies .l-card__inner { padding-inline: 2.5rem; }
}

@media screen and (max-width: 991px) {
  .p-intro__inner { padding-top: 3.5rem; }
  .p-intro__title { font-size: 1.25rem; }
  .p-intro__img img { width: 100%; }

  .l-card__inner,
  .p-block__inner,
  .p-staff__band { padding-inline: 2.5rem; }
  .p-cafe { padding: 3.5rem 2.5rem 0; }
  .p-cafe__card { padding: 3rem 1.75rem 2.5rem; }

  .p-method { padding-top: 3rem; }
  .p-method__list { --bs-gutter-y: 2.75rem; margin-top: calc(2.75rem - var(--bs-gutter-y)); }
  /* 縦積みでは col の max-width ではなくカード側で幅を決める（col を絞ると折り返さない） */
  .p-method__item { max-width: none; }
  .p-method__card { max-width: 21.75rem; margin-inline: auto; }

  .p-staff__band-img { position: static; display: block; margin: 0 auto 1rem; }
  .p-staff__band-text { font-size: 1.0625rem; }
  .p-staff__list { --bs-gutter-y: 3rem; margin-top: calc(3.75rem - var(--bs-gutter-y)); }

  .p-tel { gap: 2rem; }
  .p-tel__box { flex: 0 0 auto; width: 100%; max-width: 21.75rem; }
  .p-tel__info { max-width: none; }
  .p-tel__num a { font-size: 2rem; }

  .p-zoom { --bs-gutter-y: 2rem; }
  .p-zoom__item { max-width: none; }
  .p-zoom__card { max-width: 21.25rem; margin-inline: auto; }

  .p-apply__img { flex: 0 0 auto; width: 12.5rem; height: 12.5rem; }
  .p-apply__img img { width: 9rem; }

  .p-cafe__img { flex: 0 0 auto; width: 100%; max-width: 18rem; }

  .p-movies { padding-top: 4rem; }
  .p-block__btn .c-btn { width: 100%; max-width: 21.875rem; }
}

@media screen and (max-width: 767px) {
  /* ヒーロー（PC と同じ deco 左 / img 右）。高さは learn ページと共通 */
  .p-hero-lower--consultation { padding: 2.4rem 0 calc(1.5rem + var(--wave-h)); }
  .p-hero-lower--consultation .p-hero-lower__inner { padding-left: 1.25rem; padding-right: 6rem; }
  .p-hero-lower--consultation .p-hero-lower__img {
    top: 0;
    bottom: auto;
    left: auto;
    right: 0.6rem;
    transform: none;
    width: 5.8rem;
  }
  .l-card { max-width: calc(100% - 1.875rem); }
  .p-intro { border-radius: .875rem .875rem 0 0; }
  .l-card { border-radius: .875rem; }
  .l-card__inner,
  .p-block__inner,
  .p-staff__band,
  .p-movies .l-card__inner { padding-inline: 1.25rem; }
  .p-cafe { padding-inline: 1.25rem; }
  .p-cafe__card { padding: 2.5rem 1.125rem 2rem; }
  .p-cafe__label { font-size: 1rem; padding-inline: 1rem; white-space: normal; width: max-content; max-width: calc(100% - 2rem); text-align: center; }

  .p-block__label { font-size: 1.125rem; min-width: 0; padding-inline: 1.25rem; }
  .p-method__label { font-size: 1rem; min-width: 0; }

  .p-intro__title { font-size: 1.0625rem; }
  .p-method__lead { font-size: 1rem; }
  .p-method__lead br,
  .p-movies__lead br,
  .p-cafe__note br { display: none; }

  .p-tel__num a { font-size: 1.625rem; }
  .p-spec__row { gap: .375rem; }
  .p-spec__row dt { flex: 0 0 auto; width: max-content; }

}