@charset "utf-8";

/* =========================================================
   動画で学ぶ妊活・不妊（learn/movie.html）
   ========================================================= */

.u-red { color: #dd4040; font-weight: 700; }

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

.p-town { margin-top: 5.0625rem; }
.p-town img { display: block; width: 100%; }
.p-video-page .p-cta-split { margin-top: 3.75rem; }

/* ---------- ヒーロー（デザイン: img x=204 y=102 / deco x=555 y=130） ---------- */
.p-hero-lower--video { padding: 6.875em 0 calc(1.3125em + var(--wave-h)); }   /* デザイン: タイトル y=227 / パンくず y=354 */
/* em = 1200px デザインの実寸（タブレット幅では画面幅に比例して縮む） */
.p-hero-lower--video .p-hero-lower__img {
    top: -6em;
  left: 47%;
  transform: translateX(-24.75em);
  width: 16em;
  z-index: 1;
}
.p-hero-lower--video .p-hero-lower__deco {
  top: -4.8125em;
  left: 50%;
  transform: translateX(-2.8125em);
  width: 8.625em;     /* 138px */
  z-index: 0;
}

/* =========================================================
   動画セクション
   ========================================================= */
.p-vsec { padding: 3.5rem 0 0; }   /* デザイン: 見出し上端 y=454 */
.p-vsec--second { padding-top: 7rem; }
/* 2 つ目のセクションは見出しと大見出しの間が詰まる（デザイン実測 30px） */
.p-vsec--second .p-vsec__title { margin-top: 1.875rem; }

.p-vsec__title {
  margin-top: 2.75rem;
  font-size: 1.5rem;     /* 24px */
  line-height: 1.5;
}
.p-vsec__lead {
  margin-top: 2.25rem;
  font-size: .9375rem;   /* 15px */
  line-height: 1.85;
}
.p-vsec__lead--sub {
  margin-top: 1.9375rem;
  font-size: 1.125rem;   /* 18px */
  font-weight: 700;
  line-height: 1.5556;   /* 28px */
}

/* ---------- ご注意ボックス ---------- */
.p-caution {
  gap: 2.5rem;                        /* デザイン: 「ご注意」右端 382 → 本文 422 */
  margin: 1.75rem -3.125rem 0;        /* デザイン: x=190〜1010 */
  padding: 1.65625rem 3.75rem;        /* 高さ 113px・左右 60px */
  background: #ffe6e5;                /* デザイン実測 */
}
.p-caution__head { flex: 0 0 auto; gap: .75rem; }
.p-caution__head img { width: 3.75rem; }   /* 60px */
.p-caution__head span { font-size: 1.25rem; font-weight: 700; line-height: 1.4; white-space: nowrap; }
.p-caution__text { font-size: 1rem; line-height: 1.75; }   /* 16/28 */

/* ---------- 小さめの動画カード（3列） ---------- */
.p-movies__list {
  --bs-gutter-x: 1.8125rem;   /* カード間 29px（デザイン実測） */
  --bs-gutter-y: 1.8125rem;
  /* デザイン: カード列は本文より左右 40px 外へ出る（row のネガティブマージンに足す） */
  margin-top: calc(2.5rem - var(--bs-gutter-y));
  margin-inline: calc(-3.125rem - var(--bs-gutter-x) * .5);
}
.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; }

/* ---------- 締めの一文 ---------- */
.p-vsec__close {
  margin: 3.5rem -2.5rem 0;
  padding: 1.875rem 1.25rem;
  border-top: .125rem dashed #c9c7c4;
  border-bottom: .125rem dashed #c9c7c4;
  font-size: 1rem;
  line-height: 1.875;
}

/* =========================================================
   動画（トップページから移設したクリーム帯）
   ========================================================= */
/* デザイン: 締めの点線 → 帯 99px / 帯上端 → 見出し 100px / ボタン下端 → 帯下端 100px */
.p-movie {
  margin-top: 6.1875rem;
  padding: 6.125rem 0 6.25rem;
  background: var(--c-cream);
}
.p-movie + .p-town { margin-top: 6.25rem; }   /* 帯下端 → 街並み 100px */

.p-movie__lead {
  margin-top: 1.625rem;   /* 見出し下の点線 → 1行目 26px（デザイン実測） */
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.55;
  text-align: center;
}
.p-movie__desc {
  margin-top: 2.25rem;
  font-size: .9375rem;   /* 15px */
  line-height: 1.85;
  text-align: center;
}

.p-movie__list {
  --bs-gutter-x: 2.5rem;   /* カード間 40px（デザイン実測） */
  margin-top: 3.75rem;
}
/* カード 340px ＋ gutter。col の左右 padding を含めた外形で押さえる */
.p-movie__item { max-width: calc(21.25rem + var(--bs-gutter-x)); }
.p-movie__card {
  display: block;
  width: 100%;
  height: 100%;
  font-family: inherit;
  color: inherit;
  cursor: pointer;
  padding: 2.375rem 2.0625rem;   /* デザイン: 340×352・サムネ 270×152 が枠の内側 38/33px */
  border: .125rem solid var(--c-text);
  border-radius: 1.25rem;
  background: #fff;
  text-align: center;
  box-shadow: .25rem .3125rem 0 var(--c-text);   /* about の .p-card と同じベタ影 */
}
.p-movie__card:hover { opacity: 1; box-shadow: .25rem .3125rem 0 var(--c-text), 0 .375rem .75rem rgba(0, 0, 0, .08); }

.p-movie__thumb { position: relative; display: block; }
.p-movie__thumb > img:first-child { width: 100%; }
.p-movie__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2.5rem;
  height: 2.5rem;
  transform: translate(-50%, -50%);
}
.p-movie__play--on { opacity: 0; transition: opacity .25s; }
.p-movie__card:hover .p-movie__play--on { opacity: 1; }

.p-movie__title { display: block; margin-top: 1.125rem; font-size: 1rem; font-weight: 700; }
.p-movie__note { display: block; margin-top: 1.25rem; font-size: .875rem; line-height: 1.85; text-align: left; }
.p-movie__btn { margin-top: 4.0625rem; }   /* カード下端 → ボタン 65px */
/* 「動画を見る」は同ページ上部の動画一覧（#movie-list）へ移動する。固定ヘッダー（90px）に隠れないよう余白を取る */
.p-movies__list { scroll-margin-top: 7.5rem; }

/* =========================================================
   レスポンシブ
   ========================================================= */
@media screen and (max-width: 1199px) {
  .l-card { max-width: min(var(--w-content), calc(100% - 2.5rem)); }   /* 左右 20px を空けたまま中央寄せ */
  .l-card__inner { padding-inline: 3.75rem; }
  .p-caution,
  .p-vsec__close { margin-inline: 0; }
  .p-movies__list { margin-inline: calc(var(--bs-gutter-x) * -.5); }
}

@media screen and (max-width: 991px) {
  .l-card__inner { padding-inline: 2.5rem; }
  .p-vsec { padding-top: 3rem; }
  .p-vsec--second { padding-top: 4.5rem; }
  .p-vsec__title { font-size: 1.25rem; }

  .p-movie { margin-top: 4.5rem; padding: 4.5rem 0 4rem; }
  .p-movie + .p-town { margin-top: 4.5rem; }


  .p-caution { padding: 1.5rem 1.25rem; }
}

@media screen and (max-width: 767px) {
  /* ヒーローの装飾はモバイルで画面内に収める（PC と同じ img 左 / deco 中央寄り） */
  .p-hero-lower--video { padding: 2.4rem 0 calc(1.5rem + var(--wave-h)); }
  .p-hero-lower--video .p-hero-lower__inner { padding-left: 1.25rem; }   /* タイトル「動画で学ぶ妊活・不妊」がイラストに重ならない逃げ幅 */
  .p-hero-lower--video .p-hero-lower__img {
    top: -1rem;
    bottom: auto;
    left: .9375rem;
    right: auto;
    transform: none;
    width: 5rem;
  }

  .l-card { max-width: calc(100% - 1.875rem); border-radius: .875rem; }
  .l-card__inner { padding-inline: 1.25rem; }
  .p-vsec__lead br,
  .p-vsec__close br { display: none; }
  .p-movie__lead { font-size: 1rem; }
  .p-movie__list { --bs-gutter-y: 1.5rem; margin-top: calc(3.75rem - var(--bs-gutter-y)); }
  .p-vsec__close { padding-inline: 0; font-size: .875rem; }
}