@charset "utf-8";

/* =========================================================
   ちば妊活コンパス - 共通スタイル
   デザイン基準: 1200px キャンバス / コンテンツ幅 960px
   1rem = 16px
   ========================================================= */

:root {
  --c-bk: #000;
  --c-teal: #45bdcf;
  --c-teal-dark: #35a6b8;
  --c-pink: #f19c97;
  --c-pink-dark: #e2867f;
  --c-yellow: #f9c04b;
  --c-yellow-dark: #eaad33;
  --c-cream: #fffce6;
  --c-bg: #cff7f4;
  --c-text: #4c4948;
  --c-gray-bg: #f7f7f7;
  --c-band: #fde67c;
  --c-line: #d8d8d8;
  --c-line-footer: #45bdcf;   /* フッターの区切り線（デザイン実測: テーマのティール） */

  --w-content: 60rem;   /* 960px */
  --w-inner: 45rem;     /* 720px */
  --h-header: 5.625rem; /* 90px */
  /* ページ内リンク／JS スクロールで固定ヘッダーに隠れないための余白。
     --header-height は common.js が表示中のヘッダー実高で更新する。 */
  --header-scroll-gap: 1.5rem;
  --header-scroll-offset: calc(var(--header-height, var(--h-header)) + var(--header-scroll-gap));
  /* 下層ヒーロー下端の波の深さ。デザイン(1200px)で 54px、それ未満は幅に追従 */
  --wave-h: min(4.5vw, 3.375rem);
}

/* ---------- base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-size: 100%;
  scroll-behavior: smooth;
  /* ハッシュリンク、ブラウザ履歴での復帰、scrollIntoView の共通オフセット */
  scroll-padding-top: var(--header-scroll-offset);
}

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans",
    "Yu Gothic", "Noto Sans JP", sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.875;   /* 16px / 30px */
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; vertical-align: bottom; }

a { color: inherit; text-decoration: none; transition: opacity .25s; }
a:hover { opacity: .7; }

ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.5; }

.grecaptcha-badge {visibility:hidden;}

/* Bootstrap の container を上書きしない独自コンテナ */
.l-container {
  width: 100%;
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: 1.25rem;
}
.l-inner {
  width: 100%;
  max-width: var(--w-inner);
  margin-inline: auto;
}

/* Coming Soon  */
.c-comingsoon {
  margin-top: 1.2rem;
  color: var(--c-bk);
  font-size: 1.5rem; /* 16px */
  line-height: 1.4;
  text-align: center;
}

/* ---------- 見出し ---------- */
.c-sec-title {
  width: fit-content;
  margin-inline: auto;
  padding-bottom: .5rem;   /* ドット線を詰めた分、後続要素の位置を維持（margin は相殺されるため padding） */
  text-align: center;
  font-size: 1.75rem;          /* 28px */
  letter-spacing: .1em;
  line-height: 1.4;
}
.c-sec-title::after {
  content: "";
  display: block;
  width: 100%;
  height: .375rem;          /* ドット径 6px（デザイン実測） */
  margin: .375rem auto 0;   /* 見出しベースラインから 15px */
  background-image: radial-gradient(circle closest-side, var(--c-teal) 100%, transparent 100%);
  background-size: .625rem .375rem;   /* ピッチ 10px（見出し幅に合わせて微調整される） */
  background-position: left center;
  /* round: 見出しの幅に収まる個数までピッチを詰め／広げ、端のドットが欠けないようにする */
  background-repeat: round no-repeat;
}
.c-sec-title--pink::after { background-image: radial-gradient(circle closest-side, var(--c-pink) 100%, transparent 100%); }
.c-sec-title--yellow::after { background-image: radial-gradient(circle closest-side, var(--c-yellow) 100%, transparent 100%); }

.c-sec-title__dots { display: block; }

/* ---------- ボタン ----------
   デザイン実測: 大 240×60 / 中 高さ40 / 小 高さ32、影なし。
   ホバーは背景 #FFFCE6 ＋ 枠線・文字色をテーマカラーへ反転。 */
.c-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 15rem;        /* 240px */
  min-height: 3.75rem;     /* 60px */
  padding: .5rem 2.125rem; /* 左右34px＋枠線2px＝デザインの36px */
  border: .125rem solid var(--c-teal);
  border-radius: 3.125rem;
  background: var(--c-teal);
  color: #fff;
  font-size: 1.5rem;       /* 24px */
  font-weight: 700;
  letter-spacing: normal;  /* デザインの字送りは等幅 */
  line-height: 1.4;
  text-align: center;
  transition: background .25s, color .25s, border-color .25s;
}
.c-btn::after {
  content: "";
  position: absolute;
  right: 1.25rem;
  width: .875rem;
  height: .875rem;
  background: url("../img/common/arrow-right-white.svg") no-repeat center / contain;
}
.c-btn:hover {
  opacity: 1;
  background: var(--c-cream);
  color: var(--c-teal);
  border-color: var(--c-teal);
}
.c-btn:hover::after { background-image: url("../img/common/arrow-right-blue.svg"); }

.c-btn--pink { background: var(--c-pink); border-color: var(--c-pink); }
.c-btn--pink:hover { background: var(--c-cream); color: var(--c-pink); border-color: var(--c-pink); }
.c-btn--pink:hover::after { background-image: url("../img/common/arrow-right-pink.svg"); }

.c-btn--yellow { background: var(--c-yellow); border-color: var(--c-yellow); }
.c-btn--yellow:hover { background: var(--c-cream); color: var(--c-yellow); border-color: var(--c-yellow); }
.c-btn--yellow:hover::after { background-image: url("../img/common/arrow-right-orange.svg"); }

.c-btn--dark { background: var(--c-text); border-color: var(--c-text); }
.c-btn--dark:hover { background: var(--c-cream); color: var(--c-text); border-color: var(--c-text); }
.c-btn--dark:hover::after { background-image: url("../img/common/arrow-right-gray.svg"); }

/* 中サイズ（20px・高さ40） */
.c-btn--md {
  min-width: 0;
  min-height: 2.5rem;
  padding: .25rem 1.75rem;
  border-radius: 1.25rem;
  font-size: 1.25rem;
}
.c-btn--md::after { right: .625rem; width: .75rem; height: .75rem; }

/* 小サイズ（16px・高さ32） */
.c-btn--sm {
  min-width: 0;
  min-height: 2rem;
  padding: .25rem 1.75rem;
  border-radius: 1rem;
  font-size: 1rem;
}
.c-btn--sm::after { right: .5rem; width: .75rem; height: .75rem; }

/* ---------- 丸バッジ（知る・探す・相談する） ---------- */
.c-badge-circle {
  flex: 0 0 auto;
  display: grid;
  place-content: center;
  width: 9.375rem;    /* 150px（デザイン実測） */
  height: 9.375rem;
  border-radius: 50%;
  /* 外周 8px の淡いリング。デザインは白ストローク 8px・不透明度 60%（ExtGState /CA .6 /LW 8） */
  box-shadow: inset 0 0 0 .5rem rgba(255, 255, 255, .6);
  color: #fff;
  font-size: 2.25rem; /* 36px */
  font-weight: 700;
  letter-spacing: normal;   /* デザインは字送りなし（文字ピッチ36px） */
  line-height: 1.1112;      /* 行送り40px */
  text-align: center;
}
.c-badge-circle--pink { background: var(--c-pink); }
.c-badge-circle--teal { background: var(--c-teal); }
.c-badge-circle--yellow { background: var(--c-yellow); }

/* =========================================================
   ヘッダー
   ========================================================= */
.l-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-cream);
}
.l-header__inner {
  /* 並び（flex / space-between / gap）は Bootstrap の .navbar と justify-content-between・gap-3 に委譲 */
  height: var(--h-header);
  max-width: 75rem;         /* 1200px */
  margin-inline: auto;
  padding-inline: 2.1875rem;  /* 35px */
}
.l-header__logo { display: block; line-height: 1; }
.l-header__logo img { width: 17.73rem; }  /* 283.7px */
.l-header__tagline {
  display: block;
  margin-top: .375rem;
  font-size: .875rem;  /* 14px */
  font-weight: 700;
  line-height: 1;
  color: var(--c-bk);
}

.l-gnav__list { gap: 2.5rem; }   /* 並びは HTML 側の d-flex / align-items-lg-center */
.l-gnav__link {
  position: relative;
  display: block;
  padding: .25rem 0;
  font-size: 1.125rem;  /* 18px */
  font-weight: 700;
  letter-spacing: .04em;
  color:var(--c-bk);
}
.l-gnav__link:hover { opacity: 1; color: var(--c-teal); }
.l-gnav__link:hover::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--c-teal);
}

/* デスクトップ用のプルダウンサブメニュー */
@media screen and (min-width: 992px) {
  .l-gnav__item--has-submenu { position: relative; }

  .l-gnav__item--has-submenu:hover > .l-gnav__link,
  .l-gnav__item--has-submenu:focus-within > .l-gnav__link {
    opacity: 1;
    color: var(--c-teal);
  }
  .l-gnav__item--has-submenu:hover > .l-gnav__link::after,
  .l-gnav__item--has-submenu:focus-within > .l-gnav__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    border-radius: 2px;
    background: var(--c-teal);
  }

  .l-gnav__submenu {
    position: absolute;
    /* UL 自体は親項目の直下から始め、上部の透明な余白もホバー領域にする。 */
    top: 100%;
    left: 50%;
    z-index: 1;
    isolation: isolate;
    width: max-content;
    padding: calc(1.25rem + .875rem) 1.25rem 1.25rem;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%);
    transition: opacity .2s, visibility .2s;
  }
  /* 見えるパネルだけを従来の位置（親項目の .875rem 下）に描画する。 */
  .l-gnav__submenu::before {
    content: "";
    position: absolute;
    /* 親 UL から移した 1px 枠線分まで含め、従来の外寸を保つ。 */
    inset: .875rem -1px -2px;
    z-index: -1;
    border: 1px solid var(--c-teal);
    border-radius: 1rem;
    background: #fff;
  }
  .l-gnav__submenu li + li { margin-top: .625rem; }
  .l-gnav__submenu-link {
    display: block;
    color: var(--c-bk);
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.5;
    white-space: nowrap;
  }
  .l-gnav__submenu-link:hover,
  .l-gnav__submenu-link:focus-visible {
    opacity: 1;
    color: #45BDCF;
  }

  .l-gnav__item--has-submenu:hover > .l-gnav__submenu,
  .l-gnav__item--has-submenu:focus-within > .l-gnav__submenu {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transform: translateX(-50%);
  }
}

/* ナビが詰まる中間幅では、右端のサブメニューを画面内へ収める。 */
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .l-gnav__item--has-submenu:last-child > .l-gnav__submenu {
    right: 0;
    left: auto;
    transform: none;
  }
}

/* ハンバーガー（表示切替は Bootstrap の .navbar-toggler が担当） */
.l-hamburger {
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: .5rem;
  background: transparent;
}
.l-hamburger span {
  display: block;
  width: 1.5rem;
  height: .125rem;
  margin: .3125rem auto;
  background: var(--c-text);
  transition: transform .3s, opacity .3s;
}
.l-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(.4375rem) rotate(45deg); }
.l-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.l-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-.4375rem) rotate(-45deg); }

/* =========================================================
   下層ページのヒーロー
   ========================================================= */
/* 下端の波。SVG(1200×320) の下端 54px が波の部分。
   - SVG に preserveAspectRatio="none" を付け、mask-size を 100% 20rem にすることで
     波の深さを 54px に固定したまま、幅だけ画面に追従させる（デザイン 1200px と同じカーブ）
   - 同じ形をマスクにも使い、装飾イラストも波の形で切り抜く
     （デザインでもイラストはクリーム帯の形でマスクされている） */
/* 下層ヒーローの装飾（deco / img）と余白は、デザイン(1200px)の実測値を em で持たせている。
   .p-hero-lower の font-size が「デザイン 1200px を 1 とした縮尺」になっていて、
   タブレット幅ではこれを画面幅に比例させることで、PC と同じ配置のまま全体が縮む。
   文字（title / lead / detail-head）は rem のままなので縮まない。 */
.p-hero-lower {
  position: relative;
  overflow-x: clip;   /* 縮尺を止めた幅で装飾が画面端からはみ出しても横スクロールさせない */
  font-size: 1rem;
  background: var(--c-cream);
  padding: 4.5em 0 calc(1.875em + var(--wave-h));
  -webkit-mask-image: linear-gradient(#000, #000), url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%221200.001%22%20height=%22320%22%20viewBox=%220%200%201200.001%20320%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M426.066,316.208c-55.23-2.45-109.3-6.1-160.693-10.836-50.463-4.654-98.7-10.394-143.38-17.063C77.669,281.694,36.625,274.132,0,265.833V0H1200V265.831c-11.038,2.5-22.584,4.96-34.315,7.306-36.19,7.239-76.025,13.812-118.4,19.537-42.77,5.779-88.491,10.742-135.892,14.752-48.279,4.084-98.8,7.221-150.169,9.323C708.531,318.907,654.286,320,600,320,541.341,320,482.821,318.724,426.066,316.208Z%22/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: top center, bottom center;
  -webkit-mask-size: 100% calc(100% - var(--wave-h)), 100% calc(var(--wave-h) * 5.926);
  mask-image: linear-gradient(#000, #000), url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%221200.001%22%20height=%22320%22%20viewBox=%220%200%201200.001%20320%22%20preserveAspectRatio=%22none%22%3E%3Cpath%20d=%22M426.066,316.208c-55.23-2.45-109.3-6.1-160.693-10.836-50.463-4.654-98.7-10.394-143.38-17.063C77.669,281.694,36.625,274.132,0,265.833V0H1200V265.831c-11.038,2.5-22.584,4.96-34.315,7.306-36.19,7.239-76.025,13.812-118.4,19.537-42.77,5.779-88.491,10.742-135.892,14.752-48.279,4.084-98.8,7.221-150.169,9.323C708.531,318.907,654.286,320,600,320,541.341,320,482.821,318.724,426.066,316.208Z%22/%3E%3C/svg%3E");
  mask-repeat: no-repeat, no-repeat;
  mask-position: top center, bottom center;
  /* SVG(1200×320) の下端 54px が波。高さを --wave-h の 320/54 倍にすると、
     どの幅でも波の深さが --wave-h と一致し、デザインと同じカーブが等倍で縮む */
  mask-size: 100% calc(100% - var(--wave-h)), 100% calc(var(--wave-h) * 5.926);
}
.p-hero-lower__inner {
  position: relative;
  max-width: 75rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
  text-align: center;
}
.p-hero-lower__deco {
  position: absolute;
  top: -1.375em;      /* デザイン y=140 */
  left: 50%;
  transform: translateX(6.6875em);   /* デザイン x=707 */
  width: 11.1875em;   /* 179px */
  z-index: 0;
}
.p-hero-lower__img {
  position: absolute;
  top: -3.5em;        /* デザイン y=106 */
  left: 50%;
  transform: translateX(-25.0625em);  /* デザイン x=199 */
  width: 10.25em;    /* 164px */
  z-index: 1;
}
.p-hero-lower__title {
  position: relative;
  z-index: 2;
  font-size: 1.5em;    /* 24px */
  letter-spacing: .1em;
}
.p-hero-lower__lead {
  position: relative;
  z-index: 2;
  margin-top: .75em;
  font-size: .9375em;  /* 15px */
  font-weight: 700;
}

/* パンくず */
.c-breadcrumb {
  max-width: var(--w-content);
  margin: calc(5.0625rem - var(--wave-h)) auto 0;   /* 波はヒーローの内側に入っている */
  padding-inline: 1.25rem;
  font-size: .75rem;   /* 12px */
  font-weight: 700;
}
/* .breadcrumb は行間を持たないので、折り返したときの行間だけ補う */
.c-breadcrumb__list { row-gap: .5rem; }
.c-breadcrumb__item + .c-breadcrumb__item::before {
  content: "";
  /* 区切りの左右余白は .breadcrumb-item の padding-left に任せ、float だけ解除する */
  float: none;
  display: inline-block;
  padding-right: 0;
  margin-right: .5rem;
  width: .4375rem;
  height: .4375rem;
  background: url("../img/common/arrow-bread-crumbs.svg") no-repeat center / contain;
}
.c-breadcrumb__item[aria-current="page"] { color: var(--c-teal); }
.breadcrumb a:hover,
.breadcrumb a:focus-visible {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: .15em;
}

/* =========================================================
   フッター
   ========================================================= */
.l-footer { background: var(--c-bg); }

.l-footer__town {
  max-width: var(--w-content);
  margin: 0 auto;
  background: #fff;
  border-radius: 0 0 1.25rem 1.25rem;
  overflow: hidden;
}
.l-footer__town img { display: block; width: 100%; }

@media screen and (max-width: 1199px) {
  .l-footer__town { max-width: min(var(--w-content), calc(100% - 2.5rem)); }
}
@media screen and (max-width: 767px) {
  .l-footer__town { max-width: calc(100% - 1.875rem); border-radius: 0 0 .875rem .875rem; }
}

.l-footer__body {
  max-width: 62.5rem;   /* 左右 20px の余白を含めて内容幅を 960px にする */
  margin: 0 auto;
  padding: 3.75rem 1.25rem 3.75rem;   /* デザイン実測: 上下とも 60px */
}

/* デザイン: 事業者情報 428px ＋ サイトマップ 322px ＋ バナー 210px ＝ 960px。
   列同士は隙間なしで、縦積みになる幅だけ 40px の間隔を入れる */
.l-footer__cols { gap: 2.5rem 0; }
.l-footer__info { flex: 0 0 26.75rem; }    /* 428px */
.l-footer__nav { flex: 1 1 auto; }
.l-footer__bnr { flex: 0 0 13.125rem; }    /* 210px */

.l-footer__logo { display: block; }
.l-footer__logo img { width: 17.73rem; }
.l-footer__tagline {
  display: block;
  margin-top: .5625rem;
  font-size: .875rem;
  font-weight: 700;
  line-height: 1;
}
.l-footer__office {
  margin-top: 1.5625rem;   /* デザイン: ロゴ y=1401 → 部署名 y=1518 */
  font-size: 1.5rem;    /* 24px */
  font-weight: 700;
}
.l-footer__address {
  margin-top: .8125rem;
  font-size: .875rem;
  line-height: 1.7143;   /* 24px */
  font-weight: 600;
}

/* ---------- サイトマップ ----------
   デザイン: 親は 4×28px のティールのバー、子は直径 10px のドットが目印。
   行送りは 親→親 44px / 親→子 39px / 子→子 34px */
.l-footer__nav-list {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.5;
}
.l-footer__nav-list > li + li { margin-top: 1.25rem; }
.l-footer__nav-parent {
  position: relative;
  display: inline-block;
  padding-left: 1.375rem;   /* 22px */
}
.l-footer__nav-parent::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: .25rem;
  height: 1.75rem;
  transform: translateY(-50%);
  background: var(--c-teal);
}
.l-footer__nav-child { margin-top: .9375rem; padding-left: 1.6875rem; }   /* 15px / 27px */
.l-footer__nav-child li + li { margin-top: .625rem; }
.l-footer__nav-child a {
  position: relative;
  display: inline-block;
  padding-left: 1.25rem;   /* 20px */
}
.l-footer__nav-child a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: .625rem;
  height: .625rem;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--c-teal);
}

/* ---------- バナー ---------- */
.l-footer__bnr {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.25rem;
}
.l-footer__bnr img { display: block; border-radius: .5rem; }

/* ---------- 最下段 ----------
   デザイン: 内容幅いっぱいに 2px の点線（2px 間隔）を敷く */
.l-footer__bottom {
  margin-top: 2.4375rem;
  padding-top: 1.375rem;
  border-top: .125rem dotted #c4dadb;
}
.l-footer__sub-list { gap: 2.5rem; }
.l-footer__sub-list a {
  position: relative;
  display: block;
  padding-left: 1.25rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
}
.l-footer__sub-list a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: .625rem;
  height: .625rem;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--c-teal);
}

/* フッターのテキストリンクはホバーで文字色をティールに */
.l-footer__nav-list a,
.l-footer__sub-list a { transition: color .25s; }
.l-footer__nav-list a:hover,
.l-footer__sub-list a:hover { opacity: 1; color: var(--c-teal); }
.l-footer__copyright { font-size: .6875rem; }  /* 11px */

/* ページトップ */
.c-pagetop {
  right: 1.875rem;
  bottom: 1.875rem;
  z-index: 90;
  width: 3.75rem;   /* 60px */
  height: 3.75rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility .3s;
}
.c-pagetop.is-show { opacity: 1; visibility: visible; }
.c-pagetop img { display: block; width: 100%; }
.c-pagetop .c-pagetop__on { display: none; }
.c-pagetop:hover { opacity: 1; }
.c-pagetop:hover .c-pagetop__off { display: none; }
.c-pagetop:hover .c-pagetop__on { display: block; }
.c-pagetop.is-show:hover .c-pagetop__on { display: block; }

/* =========================================================
   下部 CTA（相談する / 探す）
   ========================================================= */
.p-cta-split__item {
  gap: 1.125rem;
  min-height: 12.5rem;   /* 200px */
  padding: 2.5rem 1.25rem;
  text-align: center;
}
.p-cta-split__item--teal { background: var(--c-teal); }
.p-cta-split__item--pink { background: var(--c-pink); }
.p-cta-split__title {
  color: #fff;
  font-size: 1.5rem;
  letter-spacing: .06em;
}
.p-cta-split__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13.75rem;         /* 220px：デザイン実測。2つのボタンを同じ幅に固定 */
  min-height: 3.75rem;     /* 60px */
  padding: .25rem 1.25rem;
  border: .125rem solid #fff;   /* 通常時は白背景と同色＝ホバー時に見える枠 */
  border-radius: 3.125rem;
  background: #fff;
  font-size: 2rem;    /* 32px */
  font-weight: 700;
  letter-spacing: normal;   /* デザインは字送りなし（文字ピッチ32px） */
  line-height: 1.4;
  transition: background-color .25s, color .25s;
}
.p-cta-split__item--teal .p-cta-split__btn { color: var(--c-teal); }
.p-cta-split__item--pink .p-cta-split__btn { color: var(--c-pink); }
.p-cta-split__btn::after {
  content: "";
  position: absolute;
  right: 1.25rem;   /* デザイン: 矢印の先端が右端から20px */
  width: .875rem;
  height: .875rem;
  background: url("../img/common/arrow-right-blue.svg") no-repeat center / contain;
}
.p-cta-split__item--pink .p-cta-split__btn::after { background-image: url("../img/common/arrow-right-pink.svg"); }

/* ホバー：背景・文字色・矢印を反転し、枠線は白 2px */
.p-cta-split__btn:hover { opacity: 1; color: #fff; border-color: #fff; }
.p-cta-split__item--teal .p-cta-split__btn:hover { background-color: var(--c-teal); }
.p-cta-split__item--pink .p-cta-split__btn:hover { background-color: var(--c-pink); }
.p-cta-split__btn:hover::after { background-image: url("../img/common/arrow-right-white.svg"); }

/* =========================================================
   レスポンシブ
   ========================================================= */
@media screen and (max-width: 1199px) {
  .l-header__inner { padding-inline: 1.25rem; }
  .l-gnav__list { gap: 1.5rem; }
  /* デザイン 1200px に対する画面幅の比率をそのまま縮尺にする（1200px で 1rem）。
     ただし 80% より小さくはしない（見出しが本文より小さくなってしまうため） */
  .p-hero-lower { font-size: max(.8rem, 100vw / 75); }
}

@media screen and (max-width: 991px) {
  :root { --h-header: 4.5rem; }

  .l-hamburger { display: block; }

  .l-gnav {
    position: fixed;
    inset: var(--h-header) 0 auto 0;
    max-height: calc(100dvh - var(--h-header));
    overflow-y: auto;
    background: var(--c-cream);
    border-top: .0625rem solid rgba(0, 0, 0, .06);
  }
  /* 開閉は Bootstrap の Collapse。アニメーション中だけスクロールを止める */
  .l-gnav.collapsing { overflow-y: hidden; }
  .l-gnav__list { gap: 0; }
  .l-gnav__list li + li { border-top: .0625rem solid rgba(0, 0, 0, .08); }
  .l-gnav__link { padding: 0.7rem 1.2rem; }
  .l-gnav__link:hover::after { display: none; }
  .l-gnav__submenu {
    display: block;
    padding: 0 0 .75rem;
  }
  .l-gnav__submenu li + li {
    margin-top: 0;
    border-top: 0;
  }
  .l-gnav__submenu-link {
    display: block;
    padding: .4rem 1.5rem .4rem 2rem;
    color: var(--c-bk);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
  }
  .l-gnav__submenu-link::before {
    content: "・";
    margin-right: .25rem;
    color: var(--c-teal);
  }
  .l-gnav__submenu-link:hover,
  .l-gnav__submenu-link:focus-visible {
    opacity: 1;
    color: #45BDCF;
  }

  .l-header__logo img { width: 13.75rem; }
  .l-header__tagline { font-size: .75rem; }

  /* フッターは 3 列をやめて縦積み（flex-basis が高さにならないよう戻す） */
  .l-footer__info,
  .l-footer__nav,
  .l-footer__bnr { flex: 0 0 auto; }
  .l-footer__bnr { flex-direction: row; flex-wrap: wrap; }

  .c-sec-title { font-size: 1.3rem; }
  .c-btn { min-width: 0; width: 100%; max-width: 20rem; font-size: 1.25rem; }
  .c-btn--md,
  .c-btn--sm { width: auto; max-width: 100%; }
  .p-cta-split__title { font-size: 1.25rem; }
  .p-cta-split__btn { width: 11.25rem; min-height: 3rem; font-size: 1.5rem; }
}

@media screen and (max-width: 767px) {
  body { font-size: .9375rem; line-height: 1.8; }

  .l-footer__body { padding-top: 2rem; }
  .l-footer__nav-list,
  .l-footer__sub-list a { font-size: .875rem; }
  .l-footer__sub-list { gap: 1.25rem; }
  .l-footer__office { font-size: 1.25rem; }

  .p-cta-split__item { min-height: 0; }

  .c-pagetop { width: 3rem; height: 3rem; right: 1rem; bottom: 1rem; }

  /* モバイルは縮尺（em 連動）をやめ、PC と同じ左右関係のまま装飾を縮めて画面内に収める。
     高さは全ページ共通で padding 2.4rem / 1.5rem + 波 に揃える（learn ページ基準）。
     - img（人物イラスト）: PC で置かれている側の画面端へ。タイトルに重ならないよう
       __inner の同じ側に逃げ幅を取る
     - deco（ブロブ）: PC と同じ側に寄せたまま中央付近へ。タイトルの背面に敷く */
  .p-hero-lower {
    font-size: 1rem;
    padding: 2.4rem 0 calc(1.5rem + var(--wave-h));
  }
  /* イラストの逃げ幅を引いた幅でも 1 行に収まるよう、狭い端末では字を詰める */
  .p-hero-lower__title { font-size: min(1.25rem, 5.2vw); }
  .p-hero-lower__lead { font-size: .8125rem; }
  .p-hero-lower__inner { padding-left: 5.5rem; }   /* img が左にあるページ（support）の逃げ幅 */
  .p-hero-lower__img {
    top: -1.5rem;
    bottom: auto;
    left: .9375rem;
    right: auto;
    transform: none;
    width: 4.5rem;
  }
  /* 下層ページのヒーロー装飾はスマホでは共通で非表示 */
  .p-hero-lower__deco { display: none; }
}

/* =========================================================
   動画モーダル
   ========================================================= */
.c-movie-modal .modal-dialog { max-width: 56.25rem; width: calc(100% - 2.5rem); }
.c-movie-modal .modal-content {
  position: relative;
  padding: 3.25rem 2.5rem 2.5rem;
  border: .125rem solid var(--c-text);
  border-radius: 1.25rem;
  background: #fff;
}
.c-movie-modal__close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--c-text);
  cursor: pointer;
}
.c-movie-modal__close::before,
.c-movie-modal__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.125rem;
  height: .125rem;
  background: #fff;
}
.c-movie-modal__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.c-movie-modal__close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.c-movie-modal__close:hover { background: #363433; }

.c-movie-modal__title {
  margin-bottom: 1.25rem;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
.c-movie-modal__frame {
  background: #e5e5e5;
  border-radius: .5rem;
  overflow: hidden;
}
.c-movie-modal__frame iframe { border: 0; }   /* 配置は .ratio > * */
.c-movie-modal__frame video { width: 100%; height: 100%; object-fit: contain; } /* 動画ファイル直置き用 */
.c-movie-modal__empty {
  display: grid;
  place-content: center;
  height: 100%;
  font-size: 1rem;
  font-weight: 700;
}

@media screen and (max-width: 767px) {
  .l-header .navbar .navbar-toggler,
  .l-header .navbar .navbar-toggler:focus,
  .l-header .navbar .navbar-toggler:active {
    border: none;
    outline: none;
    box-shadow: none;
  }
  .c-movie-modal .modal-content { padding: 3rem 1.25rem 1.5rem; border-radius: .875rem; }
  .c-movie-modal__title { font-size: 1rem; }
}