@charset "utf-8";

/* =========================================================
   トップページ
   ========================================================= */

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

/* =========================================================
   ヒーロー
   ========================================================= */
.p-hero {
  position: relative;
  background: var(--c-cream);
  padding: 3.4375rem 1.25rem 4.75rem;   /* 55px / 76px */
}
/* 下端の波（デザイン上は 54px / 1200px = 4.5%） */
.p-hero::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: min(4.5vw, 3.375rem);
  background: url("../img/common/bg-hero-top-page.svg") no-repeat bottom center;
  background-size: min(140%, 200rem) auto;   /* 1200px 超では引き伸ばさずデザインのカーブを保つ */
}
.p-hero__inner { max-width: 75rem; margin-inline: auto; }
.p-hero__img { margin: 0; text-align: center; }
.p-hero__img img { width: 56.25rem; }   /* 900px */

/* =========================================================
   メッセージ
   ========================================================= */
.p-message { padding: 6rem 1.25rem 0; }
.p-message__box {
  max-width: var(--w-content);
  margin-inline: auto;
  padding: 2.5rem 2.5rem 6.75rem;
  background: url("../img/index/bg-message.svg") no-repeat center center / 100% 100%;
}
.p-message__tag {
  display: inline-block;
  min-width: 14.375rem;   /* 230px */
  padding: .375rem 1.5rem;
  border-radius: 3.125rem;
  background: var(--c-teal);
  color: #fff;
  font-size: 1.75rem;    /* 28px */
  font-weight: 700;
  letter-spacing: .3em;
  text-indent: .3em;
  line-height: 1.6;
}
.p-message__body {
  max-width: 39.375rem;   /* 630px */
  margin: 2.75rem auto 0;
}
.p-message__body p + p { margin-top: 1.5rem; }

/* =========================================================
   お知らせ
   ========================================================= */
.l-card.p-news {margin-top: 8rem;}
.p-news { padding: 5rem 0 4.5rem; }

.p-news__list { margin-top: 3.75rem; }
.p-news__item { border-top: .0625rem solid #eee; }   /* デザイン実測: #eeeeee */
.p-news__item:last-child { border-bottom: .0625rem solid #eee; }

.p-news__link {
  gap: 2.5rem;              /* デザイン: バッジ右端 360 → 見出し 400 */
  padding: 1.875rem 1.25rem 1.6875rem;   /* 行の内側余白（左右20px） */
  transition: background-color .25s;
}
/* リンク先のあるお知らせだけ背景色を変える */
.p-news__link--has-link:hover { opacity: 1; background-color: var(--c-cream); }

.p-news__date {
  flex: 0 0 auto;
  display: grid;
  place-content: center;
  min-width: 6.25rem;    /* 100px */
  height: 1.875rem;      /* 30px */
  border-radius: .25rem; /* 4px */
  background: var(--c-yellow);
  color: #fff;
  font-size: 1rem;       /* 16px */
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.p-news__texts { display: block; }
.p-news__title {
  display: block;
  font-size: 1.125rem;   /* 18px */
  font-weight: 700;
  line-height: 1.5;
}
.p-news__link--has-link:hover .p-news__title { text-decoration:underline; }
.p-news__desc {
  display: block;
  margin-top: .6875rem;
  font-size: .875rem;    /* 14px */
  line-height: 1.85;
}

.p-news__desc a,.p-news__desc a:visited { text-decoration: underline; text-underline-offset: .15em; }
.p-news__desc a:hover { color: var(--c-teal-dark); }

/* =========================================================
   ちば妊活コンパスについて
   ========================================================= */
.p-about { padding-top: 5rem; }

.p-about__lead {
  margin-top: 2.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.55;
  text-align: center;
}
.p-about__cols {
  gap: 1.125rem;
  margin-top: 3rem;
}
.p-about__fig { flex: 0 0 15.875rem; }   /* 254px */
.p-about__fig img { width: 100%; }
.p-about__text { flex: 1 1 auto; }
.p-about__text p + p { margin-top: 1.875rem; }

.p-about__band {
  position: relative;
  margin-top: 4rem;
  overflow: hidden;
}
.p-about__band-img { display: block; width: 100%; }
.p-about__band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(58, 92, 92, .28);
}
.p-about__band-text {
  position: absolute;
  inset: 0;
  z-index: 1;
  place-content: center;
  padding: 1.25rem;
  color: #fff;
  font-weight: 700;
  line-height: 2;
  text-shadow: 0 .0625rem .25rem rgba(0, 0, 0, .25);
}
.p-about__btn { margin-top: 3.5rem; }

/* =========================================================
   知る / 探す / 相談する
   ========================================================= */
.p-guide { padding: 5rem 0 6.25rem; background: var(--c-gray-bg); }
.p-guide__sec + .p-guide__sec { margin-top: 6rem; }
.p-guide__sec--know + .p-guide__sec { margin-top: 5rem; }

.p-guide__head {
  gap: 1.875rem;
  margin-left: -5rem;   /* デザイン: バッジ左端 x=160 */
}
.p-guide__title {
  font-size: 1.75rem;    /* 28px */
  letter-spacing: .08em;
  line-height: 1.5;
}

.p-guide__cols {
  gap: 3.375rem;
  margin: 1.5rem 0 0 1.375rem;   /* デザイン: イラスト x=262 / 本文 x=544 */
}
.p-guide__fig { flex: 0 0 14.25rem; text-align: center; }
.p-guide__text { flex: 1 1 auto; }
.p-guide__btn { margin-top: 2rem; }
.p-guide__item + .p-guide__item { margin-top: 3.3125rem; }
.p-guide__sec--know .c-btn { min-width: 15rem; }
@media screen and (min-width: 992px) {
  .p-guide__sec--know .p-guide__fig { padding-left: 3.3125rem; text-align: left; }
}

/* =========================================================
   先輩たちにインタビュー
   ========================================================= */
.p-interview { padding: 6.375rem 0 0; }
.p-interview .l-card__inner { padding-inline: 4.375rem; }  /* 70px */

.p-interview__desc {
  margin-top: 2.5rem;
  font-size: .9375rem;
  line-height: 1.85;
  text-align: center;
}

.p-interview__carousel { position: relative; margin-top: 3.5rem; }

.p-interview__list .slick-list { padding-bottom: 15px;}
/* slick: トラック内の高さを揃える */
.p-interview__list .slick-track { display: flex; }
.p-interview__list .slick-slide { height: auto; padding: 0 .65625rem; }
.p-interview__list .slick-slide > div { height: 100%; }
.p-interview__item { height: 100%; }
.p-interview__list:not(.slick-initialized) { display: flex; gap: 1.3125rem; overflow: hidden; }
.p-interview__list:not(.slick-initialized) .p-interview__item { flex: 0 0 calc((100% - 2.625rem) / 3); }

.p-interview__card {
  height: 100%;
  padding: 2.1875rem 1.375rem 2.5rem;
  border: .125rem solid var(--c-text);
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: .25rem .3125rem 0 var(--c-text);
}
.p-interview__card:hover { opacity: 1; box-shadow: .25rem .3125rem 0 var(--c-text), 0 .375rem .75rem rgba(0, 0, 0, .08); }

.p-interview__avatar {
  display: grid;
  place-content: center;
  width: 9.375rem;
  height: 9.375rem;
  border-radius: 50%;
  background: #ededed;
  overflow: hidden;
}
.p-interview__avatar img { width: 100%; }

.p-interview__tag {
  display: block;
  margin-top: 1.5rem;
  font-size: .9375rem;
  font-weight: 700;
  color: #000;
}
.p-interview__title {
  display: block;
  margin-top: 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.65;
  text-align: left;
}
.p-interview__body {
  display: block;
  margin-top: 1.125rem;
  font-size: .875rem;
  line-height: 1.85;
  text-align: left;
}
.p-interview__card .c-btn { margin-top: auto; }
.p-interview__card .c-btn.c-btn--sm { margin-top: 1.75rem; }

/* slick の前後ボタン（デザインのティール丸ボタン） */
.p-interview__carousel .slick-prev,
.p-interview__carousel .slick-next {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--c-teal) no-repeat center / .75rem .75rem;
  font-size: 0;
  transform: translateY(-50%);
  transition: background-color .25s;
  cursor: pointer;
}
.p-interview__carousel .slick-prev { left: -3.25rem; background-image: url("../img/common/arrow-left-white.svg"); }
.p-interview__carousel .slick-next { right: -3.25rem; background-image: url("../img/common/arrow-right-white.svg"); }
.p-interview__carousel .slick-prev:hover,
.p-interview__carousel .slick-next:hover { background-color: var(--c-teal-dark); }
.p-interview__carousel .slick-prev::before,
.p-interview__carousel .slick-next::before { content: none; }

.p-interview__btn { margin-top: 3.75rem; }

/* =========================================================
   FAQ
   ========================================================= */
.p-faq { padding: 6rem 0 6.375rem; }

.p-faq__list { margin-top: 3.0625rem; }   /* デザイン: 見出しから 49px */
.p-faq__item {
  border: .125rem solid var(--c-text);
  border-radius: .75rem;    /* デザイン実測 12px */
  background: #fff;
}
.p-faq__item + .p-faq__item { margin-top: 1.25rem; }   /* デザイン実測 20px */

/* 閉じた状態: 枠外形 100px（枠線2px + 内側96px） */
.p-faq__q {
  gap: 0;
  width: 100%;
  min-height: 6rem;         /* 96px */
  padding: 1rem 1.75rem;    /* 左右 28px（デザイン: Q. が x=270 / アイコン右端が x=930） */
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

/* Q. / A. のマーク。右端にデザインどおりの黄色い縦罫（1px × 32px）を出す */
.p-faq__mark {
  position: relative;
  flex: 0 0 auto;
  width: 2.40625rem;        /* 38.5px：Q. の左端から罫線まで */
  color: var(--c-yellow);
  font-size: 1.5rem;        /* 24px */
  font-weight: 700;
  line-height: 1.3334;      /* 32px：質問文の行と同じ高さに揃える */
}
.p-faq__mark::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 2px;
  height: 100%;
  background: var(--c-yellow);
  transform: translateY(-50%);

}

.p-faq__q-text {
  flex: 1 1 auto;
  min-width: 0;             /* 枠からはみ出させない */
  margin-left: .875rem;     /* 罫線から 14px */
  font-size: 1.125rem;      /* 18px */
  font-weight: 700;
  line-height: 1.7778;      /* 32px */
  overflow-wrap: anywhere;
}

.p-faq__icon { flex: 0 0 auto; position: relative; width: 2.25rem; height: 2.25rem; margin-left: 1rem; }
.p-faq__icon img { position: absolute; inset: 0; width: 100%; }
.p-faq__icon-minus { opacity: 0; }
.p-faq__q[aria-expanded="true"] .p-faq__icon-plus { opacity: 0; }
.p-faq__q[aria-expanded="true"] .p-faq__icon-minus { opacity: 1; }

/* 開いた状態：同じ枠の中に A. 行が続く（外形 161px） */
.p-faq__a {
  display: flex;
  gap: 0;
  padding: 0 1.75rem 1.8125rem;   /* 下 29px */
}
.p-faq__a-text {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: .875rem;
  font-size: 1.125rem;
  line-height: 1.7778;      /* 32px */
  overflow-wrap: anywhere;
}

.p-faq__btn { margin-top: 3.75rem; }

/* =========================================================
   レスポンシブ
   ========================================================= */
@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-interview .l-card__inner { padding-inline: 2.5rem; }
  .p-interview__carousel .slick-prev { left: -1.25rem; }
  .p-interview__carousel .slick-next { right: -1.25rem; }
}

@media screen and (max-width: 991px) {
  .p-hero { padding: 2.5rem 1.25rem 6rem; }
  .p-hero__img img { width: 100%; }

  .p-message { padding-top: 3.5rem; }
  .p-message__box { padding: 2rem 1.5rem 3rem; }
  .p-message__tag { font-size: 1.375rem; min-width: 11.25rem; }

  .l-card__inner { padding-inline: 2.5rem; }

  .p-news { padding: 3.5rem 0 3rem; }
  .p-about { padding-top: 3.5rem; }
  .p-guide { padding: 4rem 0; }
  .p-interview { padding-top: 4.5rem; }
  .p-faq { padding: 4.5rem 0 4rem; }

  .p-about__fig,
  .p-guide__fig { flex: 0 0 auto; max-width: 16.75rem; }
  .p-about__text,
  .p-guide__text { width: 100%; }

  .p-guide__head { margin-left: 0; gap: 1.25rem; }
  .p-guide__title { font-size: 1.375rem; }
  .c-badge-circle { width: 7rem; height: 7rem; font-size: 1.625rem; box-shadow: inset 0 0 0 .375rem rgba(255, 255, 255, .6); }

  .p-interview__list:not(.slick-initialized) .p-interview__item { flex: 0 0 calc((100% - 1.3125rem) / 2); }
}

@media screen and (max-width: 767px) {
  .p-hero { padding: 2.5rem 0.8rem 4rem; }
  .l-card { max-width: calc(100% - 1.875rem); border-radius: .875rem; }
  .l-card--main { border-radius: .875rem .875rem 0 0; }
  .l-card__inner,
  .p-interview .l-card__inner { padding-inline: 1.25rem; }

  .p-message__box {
    background: #fff;
    border-radius: 1.875rem;
    padding: 2rem 1.25rem 2.5rem;
  }

  .p-news__link { gap: .75rem; padding-inline: .75rem; }

  .p-about__lead { font-size: 1rem; }
  /* 画像を背景として敷き、テキストの量で帯の高さを決める（文字のはみ出し防止） */
  .p-about__band-img {
    position: absolute;
    inset: 0;
    height: 100%;
    object-fit: cover;
  }
  .p-about__band-text {
    position: relative; /* ::after のオーバーレイより前面に出すため static にしない */
    font-size: .75rem;
    line-height: 1.8;
    padding: 1.75rem 1.25rem;
  }

  .p-interview__list:not(.slick-initialized) .p-interview__item { flex: 0 0 100%; }
  .p-interview__carousel .slick-prev,
  .p-interview__carousel .slick-next { width: 2rem; height: 2rem; }
  .p-interview__carousel .slick-prev { left: -.625rem; }
  .p-interview__carousel .slick-next { right: -.625rem; }

  .p-faq__q { min-height: 0; padding: 1.125rem 1rem; }
  .p-faq__mark { width: 2rem; font-size: 1.25rem; line-height: 1.75; }
  .p-faq__q-text { margin-left: .75rem; font-size: 1rem; line-height: 1.75; }
  .p-faq__icon { width: 1.75rem; height: 1.75rem; margin-left: .75rem; }
  .p-faq__a { padding: 0 1rem 1.125rem; }
  .p-faq__a-text { margin-left: .75rem; font-size: 1rem; line-height: 1.75; }
}