@charset "UTF-8";

/* ==========================================================================
   parts.css
   固定ページをブロックエディタで組むためのパーツ用スタイル。
   page.css の後に読み込む。WordPress のみで使うので静的サイトには置いていない。

   方針
   - Gutenberg のコアブロックがそのまま吐く markup（wp-block-*）に当てて、
     編集画面で文字や画像をそのまま直せる状態を保つ。
   - 既存の見た目を持つクラス（section-title / bar-heading / dot-list /
     page-lead / emphasis-box）は page.css・common.css の定義を再利用し、
     ここでは「ブロックエディタの markup に合わせる差分」だけを書く。
   - コンテナ系はぶつからないよう parts- 接頭辞で独立させる。
   ========================================================================== */

/* --------------------------------------------------------------------------
   固定ページ本文の土台
   the_content() の直下の子だけを 1200px に揃え、縦のリズムもここで持つ。
   個々のパーツが持っている margin は打ち消して、並び順に依存しないようにする。
   -------------------------------------------------------------------------- */
.page-content > * {
  width: var(--container);
  max-width: calc(100% - var(--gutter) * 2);
  margin-right: auto;
  margin-left: auto;
}

.page-content > * + * {
  margin-top: 60px;
}

/* 画面幅いっぱいに敷くパーツ（背景帯など） */
.page-content > .alignfull {
  width: 100%;
  max-width: none;
}

.page-content > .alignwide {
  width: 1440px;
}

/* エディタ側で付く既定マージンは上のリズムに任せる */
.page-content > .wp-block-group,
.page-content > .wp-block-columns {
  margin-bottom: 0;
}

/* figure 系のブロックはコア側が margin ショートハンドで上書きしてくるので、
   中央寄せをここで明示的に取り戻す */
.page-content > figure,
.page-content > .wp-block-table,
.page-content > .wp-block-image,
.page-content > .wp-block-embed {
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 0;
}

/* 中央揃えの画像ブロックは、コア側が figure を display: table にしている。
   Safari は table に max-width を効かせないため、.page-content > * の
   width: 1200px がそのまま残り、画像が画面からはみ出してしまう
   （/event/internship-schedule/ の見出し画像で発生）。
   block に戻せば、すぐ上の max-width がそのまま効く。 */
.page-content .wp-block-image {
  display: block;
}

/* 画像ブロックの「中央揃え」。
   コア側は .wp-block-image.aligncenter に text-align: center を当てているが、
   reset.css で img を display: block にしているため文字揃えが効かない。
   左右 auto マージンで中央に寄せる。
   グループやカラムの中に置いた画像にも効くよう、子孫セレクタにしている */
.page-content .aligncenter > img,
.page-content .aligncenter > a > img,
.page-content img.aligncenter {
  margin-right: auto;
  margin-left: auto;
}

/* 本文の既定。段落は青ではなく紺で、行間は 34px */
.page-content p {
  font-family: var(--font-jp);
  font-size: 16px;
  font-weight: 500;
  line-height: 34px;
  letter-spacing: var(--tracking);
  color: var(--color-navy);
}

/* クラスの付いた段落は、本文の既定（.page-content p）に負けないようにする。
   .page-content p は「クラス 1 つ＋要素 1 つ」の重みなので、
   段落側も .page-content を足して「クラス 2 つ＋要素 1 つ」にしている。
   ほかのパーツ（.parts-cta__en など）は親クラスを含む書き方で既に勝っている。 */
.page-content p.page-lead {
  font-size: 18px;
  font-weight: 700;
  line-height: 34px;
  color: var(--color-blue);
}

.page-content p.parts-qa__answer {
  line-height: 32px;
  color: var(--color-blue);
}

.page-content a:not([class]) {
  color: var(--color-blue);
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: color 0.3s ease;
}

.page-content a:not([class]):hover,
.page-content a:not([class]):focus-visible {
  color: var(--color-orange-hover);
}

.page-content img {
  height: auto;
}

/* --------------------------------------------------------------------------
   見出し
   H2 = section-title / H3 = bar-heading（page.css）に加え、H4・H5 を用意する。
   Figma のパーツ表では H4・H5 にそれぞれ 2 種類あるので、修飾子で分けている。
     H4 … B = 紺（既定） / A = オレンジ
     H5 … A = 紺＋左にオレンジのバー（既定） / B = 青・バーなし
   -------------------------------------------------------------------------- */
.sub-heading {
  font-family: var(--font-jp);
  font-size: 24px;
  font-weight: 700;
  line-height: 34px;
  letter-spacing: var(--tracking);
  color: var(--color-navy);
}

.sub-heading--orange {
  color: var(--color-orange);
}

/* H2 の頭文字。パターンには span を入れてあるが、編集中に打ち直すと
   span が落ちることがあるので ::first-letter でも同じ色を当てておく */
.page-content .section-title::first-letter {
  color: var(--color-orange);
}

/* 先頭に 4×20px のオレンジのバーを立てる */
.mini-heading {
  position: relative;
  padding-left: 24px;
  font-family: var(--font-jp);
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  letter-spacing: var(--tracking);
  color: var(--color-navy);
}

.mini-heading::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 0;
  width: 4px;
  height: 20px;
  background: var(--color-orange);
  border-radius: 10px;
}

/* バーなし・青のほう */
.mini-heading--blue {
  padding-left: 0;
  color: var(--color-blue);
}

.mini-heading--blue::before {
  content: none;
}

/* --------------------------------------------------------------------------
   区切り線（320×4・薄い青）
   -------------------------------------------------------------------------- */
.page-content > .parts-divider {
  width: 320px;
  max-width: calc(100% - var(--gutter) * 2);
  height: 4px;
  margin-top: 80px;
  margin-bottom: 20px;
  background: #b7c5e5;
  border: 0;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   背景帯（画面幅いっぱいの淡い青の上に見出し＋本文＋画像）
   -------------------------------------------------------------------------- */
.parts-band {
  padding: 109px 0 121px;
  background: #f6f9ff;
}

.parts-band__inner {
  width: var(--container);
  max-width: calc(100% - var(--gutter) * 2);
  margin: 0 auto;
}

/* 直下ではなく子孫で拾う（group の inner-container を挟む環境があるため） */
.parts-band__inner .wp-block-columns {
  margin-top: 51px;
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   カラム
   core/columns（.wp-block-columns）に当てる。
   -------------------------------------------------------------------------- */
.parts-columns {
  gap: 60px;
}

.parts-columns.wp-block-columns {
  margin-bottom: 0;
}

/* 画像は角丸 20px。図版は figure の余白を殺しておく */
.parts-columns figure,
.parts-media figure {
  margin: 0;
}

.parts-columns img,
.parts-media img {
  width: 100%;
  border-radius: 20px;
}

/* 画像とテキストの横並び。画像 380px ／ テキスト 760px */
.parts-media {
  gap: 60px;
  align-items: center;
}

.parts-media.wp-block-columns {
  margin-bottom: 0;
}

.parts-media img {
  border-radius: 10px;
}

/* コアのカラムは 781px 以下で縦積みになる。サイトのブレークポイント（767px）に
   合わせ、768px 以上では必ず横並びになるようにそろえる。
   画像側の列は 380px 固定、残りをテキストが取る（Figma 380 + 60 + 760 = 1200）。 */
@media (min-width: 768px) {
  .parts-columns.wp-block-columns > .wp-block-column,
  .parts-media.wp-block-columns > .wp-block-column,
  .parts-cards.wp-block-columns > .wp-block-column {
    flex-basis: 0 !important;
    flex-grow: 1;
  }

  .parts-media.wp-block-columns > .parts-media__figure {
    flex: 0 0 380px !important;
  }
}

/* 画面が狭いところで 380px 固定のままだとテキストが痩せすぎるので、
   タブレット幅では比率で持たせる */
@media (min-width: 768px) and (max-width: 1199px) {
  .parts-media.wp-block-columns > .parts-media__figure {
    flex: 0 0 34% !important;
  }
}

/* カラム内の要素同士の間隔 */
.parts-columns .wp-block-column > * + *,
.parts-media .wp-block-column > * + * {
  margin-top: 24px;
}

/* --------------------------------------------------------------------------
   3 カラムカード（画像＋見出し＋テキスト）
   -------------------------------------------------------------------------- */
.parts-cards {
  gap: 30px;
}

.parts-cards.wp-block-columns {
  margin-bottom: 0;
}

.parts-cards figure {
  margin: 0;
}

.parts-cards img {
  width: 100%;
  aspect-ratio: 380 / 234;
  object-fit: cover;
  border-radius: 10px;
}

.parts-cards .wp-block-column > * + * {
  margin-top: 24px;
}

.parts-cards h3,
.parts-cards h4 {
  font-family: var(--font-jp);
  font-size: 24px;
  font-weight: 700;
  line-height: 34px;
  letter-spacing: var(--tracking);
  color: var(--color-blue);
}

/* --------------------------------------------------------------------------
   ●リスト（core/list に .dot-list を付けた場合）
   page.css の .dot-list__item と同じ見た目を li 直下にも当てる。
   -------------------------------------------------------------------------- */
.dot-list {
  padding-left: 0;
  list-style: none;
  font-family: var(--font-jp);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: var(--tracking);
  color: var(--color-navy);
}

.dot-list > li {
  position: relative;
  padding-left: 32px;
  line-height: 32px;
}

.dot-list > li::before {
  content: "";
  position: absolute;
  top: 13px;
  left: 8px;
  width: 8px;
  height: 8px;
  background: var(--color-orange);
  border-radius: 50%;
}

/* --------------------------------------------------------------------------
   テーブル（core/table に .parts-table）
   def-table と同じく、行の下線を「見出し列だけ青・残りは薄い青」で描く。
   -------------------------------------------------------------------------- */
.parts-table.wp-block-table {
  margin-bottom: 0;
}

.parts-table table {
  width: 100%;
  border-collapse: collapse;
}

.parts-table tr {
  background-image: linear-gradient(
    to right,
    var(--color-blue) 0 var(--def-key),
    var(--color-rule-weak) var(--def-key) 100%
  );
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 2px;
}

.parts-table th,
.parts-table td {
  padding: 20px 0;
  font-family: var(--font-jp);
  line-height: 35px;
  letter-spacing: var(--tracking);
  text-align: left;
  vertical-align: top;
  border: 0;
}

/* 1 列目＝項目名。
   エディターの「行を下に挿入」で増やした行は th ではなく td で作られるため、
   タグではなく「行の最初のセル」で指定して、どちらでも同じ見た目になるようにする。 */
.parts-table tr > *:first-child {
  width: var(--def-key);
  padding-left: 20px;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-blue);
}

/* 2 列目以降＝内容 */
.parts-table tr > * + * {
  width: auto;
  padding-left: var(--def-gap);
  font-size: 16px;
  font-weight: 500;
  color: var(--color-navy);
}

/* --------------------------------------------------------------------------
   ボタン（core/button のラッパーに .parts-btn）
   common.css の .btn-pill は span 2 つ構成で、コアブロックが吐く markup とは
   合わない（ラッパーの div に当たって背景が二重になる）。そのため別名にして、
   矢印は擬似要素で作り直している。通常＝白丸／ホバー＝青丸をフェードで入れ替える。
   -------------------------------------------------------------------------- */
.wp-block-buttons.parts-buttons {
  justify-content: center;
  gap: 20px;
}

/* 旧パターン（クラス名が btn-pill だった頃）で保存済みの本文への互換。
   common.css の .btn-pill がラッパーの div に当たって背景が二重になるため、
   ここで打ち消したうえで parts-btn と同じ扱いにする。 */
.page-content .wp-block-button.btn-pill {
  display: block;
  height: auto;
  padding: 0;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 0;
}

.wp-block-button.parts-btn > .wp-block-button__link,
.wp-block-button.btn-pill > .wp-block-button__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 68px;
  padding: 10px 95px 10px 37px;
  font-family: var(--font-jp);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: var(--tracking);
  color: var(--color-white);
  background: var(--color-blue);
  border: 1px solid transparent;
  border-radius: 40px;
  transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.wp-block-button.parts-btn > .wp-block-button__link::before,
.wp-block-button.parts-btn > .wp-block-button__link::after,
.wp-block-button.btn-pill > .wp-block-button__link::before,
.wp-block-button.btn-pill > .wp-block-button__link::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 10px;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.wp-block-button.parts-btn > .wp-block-button__link::before,
.wp-block-button.btn-pill > .wp-block-button__link::before {
  background-image: url("../../img/common/arrow-pill-hover.webp");
}

.wp-block-button.parts-btn > .wp-block-button__link::after,
.wp-block-button.btn-pill > .wp-block-button__link::after {
  background-image: url("../../img/common/arrow-white-pill.webp");
  transition: opacity 0.3s ease;
}

.wp-block-button.parts-btn > .wp-block-button__link:hover,
.wp-block-button.parts-btn > .wp-block-button__link:focus-visible,
.wp-block-button.btn-pill > .wp-block-button__link:hover,
.wp-block-button.btn-pill > .wp-block-button__link:focus-visible {
  color: var(--color-blue);
  background: var(--color-white);
  border-color: var(--color-blue);
}

.wp-block-button.parts-btn > .wp-block-button__link:hover::after,
.wp-block-button.parts-btn > .wp-block-button__link:focus-visible::after,
.wp-block-button.btn-pill > .wp-block-button__link:hover::after,
.wp-block-button.btn-pill > .wp-block-button__link:focus-visible::after {
  opacity: 0;
}

/* --------------------------------------------------------------------------
   強調ボックス（core/group に .emphasis-box）
   箱そのものは page.css。中の余白だけここで面倒を見る。
   -------------------------------------------------------------------------- */
/* page.css の「> p + p」も inner-container を挟むと外れるので、
   ここで子孫セレクタとして書き直す */
.emphasis-box__body p + p,
.emphasis-box__body p + ul,
.emphasis-box__body ul + p {
  margin-top: 34px;
}

/* --------------------------------------------------------------------------
   インタビュー詳細の本文
   親の .interview-detail が既に 1200px 幅なので、.page-content の幅指定を
   打ち消して二重に内側へ寄らないようにする。
   -------------------------------------------------------------------------- */
.page-content.interview-detail__body {
  margin-top: 60px;
}

.page-content.interview-detail__body > * {
  width: auto;
  max-width: none;
}

/* --------------------------------------------------------------------------
   Q&A
   バッジ（Q / A）は擬似要素で出す。見出しと段落の 2 ブロックだけで済むので、
   ブロックエディタでそのまま書き換えられる。
   -------------------------------------------------------------------------- */
.parts-qa__question,
.parts-qa__answer {
  position: relative;
  min-height: 48px;
  padding-left: 68px;
  font-family: var(--font-jp);
  letter-spacing: var(--tracking);
  color: var(--color-blue);
}

.parts-qa__question::before,
.parts-qa__answer::before {
  content: "Q";
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  font-family: var(--font-en);
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--tracking);
  color: var(--color-white);
  background: var(--color-blue);
  border-radius: 50%;
}

.parts-qa__answer::before {
  content: "A";
  background: var(--color-answer);
}

.parts-qa__question {
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
}

.parts-qa__answer {
  font-size: 16px;
  font-weight: 500;
  line-height: 32px;
}

/* 質問 → 回答、回答 → 次の質問 の間隔（page.css の .qa-item と同じ） */
.parts-qa__question + .parts-qa__answer {
  margin-top: 41px;
}

.parts-qa__answer + .parts-qa__question {
  margin-top: 53px;
}

/* 写真と Q&A の 2 カラム（写真 570px ＋ 本文） */
.parts-qa-columns.wp-block-columns {
  gap: 60px;
  margin-bottom: 0;
}

.parts-qa-columns figure {
  margin: 0;
}

.parts-qa-columns img {
  width: 100%;
  aspect-ratio: 570 / 400;
  object-fit: cover;
  border-radius: 20px;
}

/* --------------------------------------------------------------------------
   写真（横長 820×460）
   -------------------------------------------------------------------------- */
.page-content > .parts-photo {
  width: 820px;
  max-width: calc(100% - var(--gutter) * 2);
  margin-bottom: 0;
}

.parts-photo img {
  width: 100%;
  aspect-ratio: 820 / 460;
  object-fit: cover;
  border-radius: 20px;
}

/* --------------------------------------------------------------------------
   1 日のスケジュール
   左に縦線を通し、各項目にオレンジの丸を置く。
   直下セレクタを使わずクラスで拾うので、group の入れ子が変わっても崩れない。
   -------------------------------------------------------------------------- */
.parts-daily {
  position: relative;
  padding-left: 124px;
}

.parts-daily::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 0;
  left: 47px;
  width: 2px;
  background: #d9d9d9;
}

.parts-daily .parts-daily__time {
  position: relative;
  font-family: var(--font-jp);
  font-size: 24px;
  font-weight: 700;
  line-height: 34px;
  letter-spacing: var(--tracking);
  color: var(--color-navy);
}

/* 印は青いリング。中は塗らないので縦線が透ける */
.parts-daily .parts-daily__time::before {
  content: "";
  position: absolute;
  top: 1px;
  /* 丸の中心を縦線（コンテナ左から 48px）に合わせる */
  left: -93px;
  box-sizing: border-box;
  width: 33px;
  height: 33px;
  background: var(--color-white);
  border: 4px solid var(--color-blue);
  border-radius: 50%;
}

.parts-daily .parts-daily__detail {
  margin-top: 25px;
}

.parts-daily .parts-daily__detail + .parts-daily__time {
  margin-top: 46px;
}

/* --------------------------------------------------------------------------
   ページ内リンク（core/buttons に .anchor-nav-buttons）
   ボタンの追加・削除・リンク先の指定を管理画面でそのまま行えるよう、
   独自の markup ではなくコアのボタンブロックで組んでいる。
   矢印は擬似要素ではなく背景画像にしてある（擬似要素だと flex アイテムになり、
   ホバー時の下線が矢印まで伸びてしまうため）。
   -------------------------------------------------------------------------- */
.wp-block-buttons.anchor-nav-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 56px;
}

.wp-block-button.anchor-nav-button {
  margin: 0;
}

.wp-block-button.anchor-nav-button > .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 0 0 68px;
  font-family: var(--font-jp);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: var(--tracking);
  color: var(--color-blue);
  text-decoration: none;
  text-underline-offset: 6px;
  background: url("../../img/common/arrow-blue-outline.webp") left center / 48px 48px no-repeat;
  border: 0;
  border-radius: 0;
  transition: background-image 0.3s ease;
}

.wp-block-button.anchor-nav-button > .wp-block-button__link:hover,
.wp-block-button.anchor-nav-button > .wp-block-button__link:focus-visible {
  color: var(--color-blue);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  background-image: url("../../img/common/arrow-pill-hover.webp");
}

/* --------------------------------------------------------------------------
   強調ボックス（画像つき）
   箱・見出し・地の模様は page.css の .emphasis-box / --blue をそのまま使う。
   カラムだけ Figma のパーツ表に合わせて 本文620 + 余白60 + 画像400 = 1080 にする。
   （page.css の .emphasis-box__columns はインタビュー詳細用で余白が 79px のため、
     タブレット以下のたたみ方はそちらを継承しつつ、PC の幅だけここで上書きする）
   -------------------------------------------------------------------------- */
@media (min-width: 1200px) {
  .emphasis-box .parts-emphasis-columns {
    grid-template-columns: minmax(0, 620px) 400px;
    gap: 0 60px;
  }
}

.emphasis-box .parts-emphasis-columns p {
  font-family: var(--font-jp);
  font-size: 18px;
  font-weight: 500;
  line-height: 34px;
  letter-spacing: var(--tracking);
  color: var(--color-blue);
}

.emphasis-box .parts-emphasis-columns p + p {
  margin-top: 34px;
}

.emphasis-box .parts-emphasis-columns .wp-block-image {
  margin: 0;
}

.emphasis-box .parts-emphasis-columns img {
  width: 100%;
  aspect-ratio: 400 / 273;
  object-fit: cover;
  border-radius: 20px;
}

/* --------------------------------------------------------------------------
   スケジュール表記
   左端に縦線を通し、日付は青い丸バッジ、各項目は青いリングで印を付ける。
   縦線は ::before で敷き、バッジ（不透明）が上に重なって隠す作り。
   Figma 基準：線 x=47px / リング 33px・x=31px / バッジ 92px・x=2px / 本文 x=124px
   -------------------------------------------------------------------------- */
.parts-schedule {
  position: relative;
}

/* 囲みのグループ（.parts-schedule）を前提にしない。
   あとから「日付を追加」「時間を追加」のパーツを足したとき、それがグループの
   中でも外でも同じ見た目になるよう、行そのもののクラスで拾っている。 */
.parts-schedule__day,
.parts-schedule__time,
.parts-schedule__list {
  position: relative;
  padding-left: 124px;
}

/* 縦線は行ごとに引く。前の行との余白ぶんだけ上に伸ばすので、
   行が続いているかぎり 1 本の線としてつながって見える。 */
.parts-schedule__day::after,
.parts-schedule__time::after,
.parts-schedule__list::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 47px;
  z-index: 0;
  width: 2px;
  background: #d9d9d9;
}

.parts-schedule__time + .parts-schedule__list,
.parts-schedule__day + .parts-schedule__list,
.parts-schedule__list + .parts-schedule__list {
  margin-top: 25px;
}

.parts-schedule__time + .parts-schedule__list::after,
.parts-schedule__day + .parts-schedule__list::after,
.parts-schedule__list + .parts-schedule__list::after {
  top: -25px;
}

/* 項目どうし・日付どうしは少し広めに空ける。
   時間が続けて並ぶとき（間にリストが無いとき）も同じ間隔にして、
   左の丸どうしが詰まって見えないようにする */
.parts-schedule__list + .parts-schedule__time,
.parts-schedule__day + .parts-schedule__time,
.parts-schedule__time + .parts-schedule__time {
  margin-top: 54px;
}

.parts-schedule__list + .parts-schedule__time::after,
.parts-schedule__day + .parts-schedule__time::after,
.parts-schedule__time + .parts-schedule__time::after {
  top: -54px;
}

.parts-schedule__time + .parts-schedule__day,
.parts-schedule__list + .parts-schedule__day,
.parts-schedule__day + .parts-schedule__day {
  margin-top: 40px;
}

.parts-schedule__time + .parts-schedule__day::after,
.parts-schedule__list + .parts-schedule__day::after,
.parts-schedule__day + .parts-schedule__day::after {
  top: -40px;
}

/* 日付の行。バッジと見出しの 2 ブロックを重ねて並べる。
   （バッジを見出しの中の span にすると、ブロックエディタで打ち直したときに
     span ごと消えてしまうので、別ブロックとして持たせている） */
.parts-schedule__day {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 92px;
}

/* inner-container が挟まる環境では、その div が唯一の flex アイテムになる。
   幅が内容なりに縮まないよう伸ばしておく */
.parts-schedule__day > * {
  flex: 1 1 auto;
  min-width: 0;
}

.parts-schedule__day-title {
  font-family: var(--font-jp);
  font-size: 24px;
  font-weight: 700;
  line-height: 34px;
  letter-spacing: var(--tracking);
  color: var(--color-navy);
}

/* バッジは段落ブロック。本文の既定（.page-content p）や編集画面のブロック用
   スタイルに負けないよう、親の日付行まで含めて指定している */
.parts-schedule__day .parts-schedule__badge {
  position: absolute;
  top: 50%;
  left: 2px;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  box-sizing: border-box;
  width: 92px;
  height: 92px;
  /* Figma は上 20px・下 30px の詰めで、数字のベースラインが円の中心より
     少し下に来る。baseline 揃えなので上の余白で位置を合わせる */
  padding-top: 24px;
  margin: 0;
  font-family: var(--font-jp);
  font-size: 16px;
  font-weight: 500;
  line-height: 34px;
  letter-spacing: var(--tracking);
  color: var(--color-white);
  background: var(--color-blue);
  border-radius: 50%;
  transform: translateY(-50%);
}

.parts-schedule__day .parts-schedule__badge > strong {
  font-size: 40px;
  font-weight: 500;
}

/* 時刻＋内容の見出し。リングは線の上に重ねる（中は塗らず線が透ける） */
.parts-schedule__time {
  display: flex;
  align-items: center;
  min-height: 33px;
  font-family: var(--font-jp);
  font-size: 24px;
  font-weight: 700;
  line-height: 34px;
  letter-spacing: var(--tracking);
  color: var(--color-navy);
}

.parts-schedule__time::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 31px;
  z-index: 1;
  box-sizing: border-box;
  width: 33px;
  height: 33px;
  margin-top: -17px;
  border: 4px solid var(--color-blue);
  border-radius: 50%;
}


/* --------------------------------------------------------------------------
   レスポンシブ：タブレット以下
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   クロストーク（会話）
   Figma のパーツページ「クロストークパーツ」。
   顔写真 160px の丸とふきだしを横に並べ、--right で左右を入れ替える。
   写真は画像ブロックなので、編集画面でクリックして差し替えられる。
   -------------------------------------------------------------------------- */
.parts-talk {
  display: flex;
  align-items: flex-start;
  gap: 45px;
}

/* テーマに theme.json が無い環境では中身がもう 1 枚の div に包まれるので、
   その div を無いものとして扱う */
.parts-talk > .wp-block-group__inner-container,
.parts-talk .parts-talk__person > .wp-block-group__inner-container {
  display: contents;
}

/* 顔が右にくる版。並び順だけ入れ替える */
.parts-talk--right {
  flex-direction: row-reverse;
}

.parts-talk + .parts-talk {
  margin-top: 60px;
}

/* ---- 顔写真と名前 ---- */
.parts-talk__person {
  flex: 0 0 160px;
  width: 160px;
  margin: 0;
}

.parts-talk .parts-talk__avatar {
  width: 160px;
  height: 160px;
  margin: 0;
}

.parts-talk .parts-talk__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--color-blue);
  border: 6px solid var(--color-orange);
  border-radius: 50%;
}

/* 名前。段落ブロックなので .page-content p に負けないよう親まで含める */
.parts-talk .parts-talk__name {
  margin-top: 11px;
  font-family: var(--font-jp);
  font-size: 24px;
  font-weight: 700;
  line-height: 34px;
  letter-spacing: var(--tracking);
  text-align: center;
  color: var(--color-navy);
}

/* ---- ふきだし ---- */
.parts-talk .parts-talk__bubble {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 40px;
  font-family: var(--font-jp);
  font-size: 18px;
  font-weight: 700;
  line-height: 34px;
  letter-spacing: var(--tracking);
  color: var(--color-blue);
  background: var(--color-bg-light);
  border-radius: 20px;
}

/* ふきだしの三角。顔写真の中心（上から 80px）に先端が来るようにする */
.parts-talk__bubble::before {
  content: "";
  position: absolute;
  top: 66px;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
}

.parts-talk--left .parts-talk__bubble::before {
  right: 100%;
  border-right: 24px solid var(--color-bg-light);
}

.parts-talk--right .parts-talk__bubble::before {
  left: 100%;
  border-left: 24px solid var(--color-bg-light);
}

/* --------------------------------------------------------------------------
   CTA（電話・申し込み）
   背景はエントリーページと同じ帯の画像。中の位置は帯の幅に対する％で置いて、
   1200px でも 1376px でも同じ見た目になるようにしている。
   直下セレクタは使わない（group の中に inner-container が挟まる環境があるため）。
   -------------------------------------------------------------------------- */
.parts-cta {
  position: relative;
  padding: 82px 6.4% 80px 10.2%;
  background: url("../../img/entry/contact-band-bg.webp") center / cover no-repeat;
}

/* 英字の見出し。帯の上辺に半分かかる位置に置く */
.parts-cta .parts-cta__en {
  position: absolute;
  top: 0;
  left: 50%;
  margin: 0;
  font-family: var(--font-en);
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.2em;
  color: var(--color-orange);
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.parts-cta .parts-cta__title {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: var(--tracking);
  text-align: center;
  color: var(--color-orange);
}

.parts-cta .parts-cta__body {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  margin-top: 62px;
}

/* theme.json が読まれない環境では group の中に inner-container が挟まり、
   それ 1 つだけが flex アイテムになってしまう。display: contents で
   その div を並びから消し、中身をそのまま flex アイテムにする */
.parts-cta .parts-cta__body > .wp-block-group__inner-container {
  display: contents;
}

/* ---- 電話 ---- */
.parts-cta .parts-cta__tel {
  /* min-width: 0 が無いと、電話番号の最小幅のせいで折り返してしまう */
  flex: 1 1 320px;
  min-width: 0;
}

.parts-cta .parts-cta__tel-label {
  margin: 0;
  font-family: var(--font-jp);
  font-size: 24px;
  font-weight: 700;
  line-height: 38px;
  letter-spacing: 0.2em;
  color: var(--color-blue);
}

/* 受話器のアイコンは擬似要素で置く。番号だけを編集できるようにするため */
.parts-cta .parts-cta__tel-number {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 13px 0 0;
  font-family: var(--font-en);
  /* Figma は帯幅 1376px で 58px。本文幅 1200px に収まるサイズにしている */
  font-size: 46px;
  font-weight: 700;
  line-height: 38px;
  letter-spacing: 0.12em;
  white-space: nowrap;
  color: var(--color-blue);
}

.parts-cta .parts-cta__tel-number::before {
  content: "";
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  background: url("../../img/entry/icon-phone.svg") center / contain no-repeat;
}

.parts-cta .parts-cta__tel-number a {
  color: inherit;
  text-decoration: none;
}

.parts-cta .parts-cta__tel-note {
  margin: 20px 0 0;
  font-family: var(--font-jp);
  font-size: 18px;
  font-weight: 700;
  line-height: 32px;
  letter-spacing: var(--tracking);
  color: var(--color-blue);
}

/* ---- 申し込みボタン ---- */
.parts-cta .parts-cta__buttons {
  /* Figma は帯幅 1376px で 520px。本文幅 1200px に収まるよう少し詰めている */
  flex: 0 0 420px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  max-width: 100%;
  margin: 0;
}

.parts-cta .parts-cta__btn {
  width: 100%;
}

/* コアのボタンの見た目を打ち消して、帯用の四角いボタンに作り替える */
.parts-cta .parts-cta__btn .wp-block-button__link {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  height: 106px;
  padding: 0 20px;
  font-family: var(--font-jp);
  font-size: 24px;
  font-weight: 700;
  line-height: 40px;
  white-space: nowrap;
  letter-spacing: var(--tracking);
  color: var(--color-white);
  text-decoration: none;
  border-radius: 0;
  transition: opacity 0.3s ease;
}

.parts-cta .parts-cta__btn .wp-block-button__link::before {
  content: "";
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  background: center / contain no-repeat;
}

.parts-cta .parts-cta__btn .wp-block-button__link:hover,
.parts-cta .parts-cta__btn .wp-block-button__link:focus-visible {
  opacity: 0.85;
}

.parts-cta .parts-cta__btn--form .wp-block-button__link {
  background-color: var(--color-blue);
}

.parts-cta .parts-cta__btn--form .wp-block-button__link::before {
  background-image: url("../../img/entry/icon-mail.svg");
}

.parts-cta .parts-cta__btn--line .wp-block-button__link {
  background-color: var(--color-green);
}

.parts-cta .parts-cta__btn--line .wp-block-button__link::before {
  background-image: url("../../img/entry/icon-line-chat.svg");
}

@media (max-width: 1199px) {
  .page-content > * + * {
    margin-top: 48px;
  }

  .sub-heading {
    font-size: 22px;
    line-height: 32px;
  }

  .mini-heading {
    padding-left: 20px;
    font-size: 18px;
    line-height: 26px;
  }

  .mini-heading::before {
    top: 4px;
    height: 18px;
  }

  .parts-band {
    padding: 70px 0 80px;
  }

  .parts-band__inner > .wp-block-columns {
    margin-top: 36px;
  }

  .parts-columns,
  .parts-media {
    gap: 40px;
  }

  .parts-cards {
    gap: 24px;
  }

  .parts-cards h3,
  .parts-cards h4 {
    font-size: 20px;
    line-height: 30px;
  }

  .parts-table tr > *:first-child {
    padding-left: 12px;
    font-size: 16px;
    line-height: 30px;
  }

  .parts-table tr > * + * {
    font-size: 15px;
    line-height: 30px;
  }

  .dot-list > li {
    padding-left: 24px;
    line-height: 28px;
  }

  /* ---- Q&A ---- */
  .parts-qa__question,
  .parts-qa__answer {
    min-height: 40px;
    padding-left: 56px;
  }

  .parts-qa__question::before,
  .parts-qa__answer::before {
    width: 40px;
    height: 40px;
    font-size: 22px;
  }

  .parts-qa__question {
    font-size: 22px;
    line-height: 34px;
  }

  .parts-qa__answer {
    font-size: 15px;
    line-height: 30px;
  }

  .parts-qa__question + .parts-qa__answer {
    margin-top: 28px;
  }

  .parts-qa__answer + .parts-qa__question {
    margin-top: 40px;
  }

  .parts-qa-columns.wp-block-columns {
    gap: 24px;
  }

  /* ---- 1 日のスケジュール ---- */
  .parts-daily {
    padding-left: 76px;
  }

  .parts-daily::before {
    left: 28px;
  }

  .parts-daily .parts-daily__time {
    font-size: 20px;
    line-height: 30px;
  }

  .parts-daily .parts-daily__time::before {
    left: -60px;
    width: 26px;
    height: 26px;
    border-width: 3px;
  }

  .parts-daily .parts-daily__detail + .parts-daily__time {
    margin-top: 40px;
  }

  .wp-block-buttons.anchor-nav-buttons {
    gap: 16px 32px;
  }

  .wp-block-button.anchor-nav-button > .wp-block-button__link {
    min-height: 40px;
    padding-left: 54px;
    font-size: 16px;
    background-size: 40px 40px;
  }

  .emphasis-box .parts-emphasis-columns p {
    font-size: 16px;
    line-height: 30px;
  }

  .emphasis-box .parts-emphasis-columns p + p {
    margin-top: 24px;
  }

  /* ---- schedule ---- */
  .parts-schedule__day,
  .parts-schedule__time,
  .parts-schedule__list {
    padding-left: 96px;
  }

  .parts-schedule__day::after,
  .parts-schedule__time::after,
  .parts-schedule__list::after {
    left: 35px;
  }

  .parts-schedule__list + .parts-schedule__time,
  .parts-schedule__day + .parts-schedule__time,
  .parts-schedule__time + .parts-schedule__time {
    margin-top: 44px;
  }

  .parts-schedule__list + .parts-schedule__time::after,
  .parts-schedule__day + .parts-schedule__time::after,
  .parts-schedule__time + .parts-schedule__time::after {
    top: -44px;
  }

  .parts-schedule__day {
    min-height: 72px;
  }

  .parts-schedule__day-title {
    font-size: 20px;
    line-height: 30px;
  }

  .parts-schedule__day .parts-schedule__badge {
    width: 72px;
    height: 72px;
    padding-top: 19px;
    font-size: 14px;
    line-height: 28px;
  }

  .parts-schedule__day .parts-schedule__badge > strong {
    font-size: 32px;
  }

  .parts-schedule__time {
    min-height: 28px;
    font-size: 20px;
    line-height: 30px;
  }

  .parts-schedule__time::before {
    left: 23px;
    width: 26px;
    height: 26px;
    margin-top: -13px;
    border-width: 3px;
  }

  .dot-list > li::before {
    top: 11px;
    left: 4px;
    width: 7px;
    height: 7px;
  }

  /* ---- CTA ---- */
  .parts-cta {
    padding: 64px 24px 48px;
  }

  .parts-cta .parts-cta__en {
    font-size: 48px;
  }

  .parts-cta .parts-cta__title {
    font-size: 24px;
    line-height: 34px;
  }

  .parts-cta .parts-cta__body {
    gap: 24px;
    margin-top: 40px;
  }

  .parts-cta .parts-cta__tel-label {
    font-size: 18px;
    line-height: 30px;
  }

  .parts-cta .parts-cta__tel-number {
    gap: 4px;
    margin-top: 8px;
    font-size: 38px;
    line-height: 30px;
  }

  .parts-cta .parts-cta__tel-number::before {
    width: 44px;
    height: 44px;
  }

  .parts-cta .parts-cta__tel-note {
    margin-top: 12px;
    font-size: 15px;
    line-height: 26px;
  }

  .parts-cta .parts-cta__buttons {
    flex: 0 0 auto;
    width: 360px;
    max-width: 100%;
  }

  .parts-cta .parts-cta__btn .wp-block-button__link {
    gap: 24px;
    height: 80px;
    font-size: 20px;
    line-height: 30px;
  }

  .parts-cta .parts-cta__btn .wp-block-button__link::before {
    width: 40px;
    height: 40px;
  }

  /* ---- クロストーク ---- */
  .parts-talk {
    gap: 24px;
  }

  .parts-talk__person {
    flex-basis: 120px;
    width: 120px;
  }

  .parts-talk .parts-talk__avatar {
    width: 120px;
    height: 120px;
  }

  .parts-talk .parts-talk__avatar img {
    border-width: 4px;
  }

  .parts-talk .parts-talk__name {
    font-size: 20px;
  }

  .parts-talk .parts-talk__bubble {
    padding: 24px;
  }

  .parts-talk__bubble::before {
    top: 48px;
  }
}

/* --------------------------------------------------------------------------
   レスポンシブ：スマホ
   カラムはコア側で縦積みになるので、間隔と文字サイズだけ調整する。
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .page-content > * + * {
    margin-top: 40px;
  }

  .page-content p {
    font-size: 15px;
    line-height: 30px;
  }

  .sub-heading {
    font-size: 20px;
    line-height: 30px;
  }

  .mini-heading {
    padding-left: 16px;
    font-size: 17px;
    line-height: 25px;
  }

  .mini-heading::before {
    top: 3px;
    height: 17px;
  }

  .page-content > .parts-divider {
    width: 240px;
    margin-top: 48px;
  }

  .parts-band {
    padding: 48px 0 56px;
  }

  .parts-band__inner > .wp-block-columns {
    margin-top: 28px;
  }

  .parts-columns.wp-block-columns:not(.is-not-stacked-on-mobile),
  .parts-media.wp-block-columns:not(.is-not-stacked-on-mobile),
  .parts-cards.wp-block-columns:not(.is-not-stacked-on-mobile) {
    gap: 32px;
  }

  .parts-cards h3,
  .parts-cards h4 {
    font-size: 18px;
    line-height: 28px;
  }

  /* テーブルは縦積みにして、見出し行の下線は青のまま残す */
  .parts-table th,
  .parts-table td {
    display: block;
    width: auto;
  }

  .parts-table tr > *:first-child {
    padding: 16px 0 0;
    font-size: 15px;
    line-height: 28px;
  }

  .parts-table tr > * + * {
    padding: 0 0 16px;
    font-size: 14px;
    line-height: 28px;
  }

  .parts-table tr {
    background-image: linear-gradient(to right, var(--color-blue) 0 100%);
  }

  /* ---- Q&A ---- */
  .parts-qa__question,
  .parts-qa__answer {
    min-height: 32px;
    padding-left: 42px;
  }

  .parts-qa__question::before,
  .parts-qa__answer::before {
    width: 32px;
    height: 32px;
    font-size: 18px;
  }

  .parts-qa__question {
    font-size: 17px;
    line-height: 28px;
  }

  .parts-qa__answer {
    font-size: 14px;
    line-height: 28px;
  }

  .parts-qa__question + .parts-qa__answer {
    margin-top: 16px;
  }

  .parts-qa__answer + .parts-qa__question {
    margin-top: 32px;
  }

  /* ---- 1 日のスケジュール ---- */
  .parts-daily {
    padding-left: 44px;
  }

  .parts-daily::before {
    top: 12px;
    left: 11px;
  }

  .parts-daily .parts-daily__time {
    font-size: 17px;
    line-height: 26px;
  }

  .parts-daily .parts-daily__time::before {
    top: 0;
    left: -44px;
    width: 24px;
    height: 24px;
    border-width: 3px;
  }

  .parts-daily .parts-daily__detail {
    margin-top: 16px;
  }

  .parts-daily .parts-daily__detail + .parts-daily__time {
    margin-top: 32px;
  }

  .wp-block-buttons.anchor-nav-buttons {
    flex-direction: column;
    gap: 12px;
  }

  .wp-block-button.anchor-nav-button > .wp-block-button__link {
    min-height: 32px;
    padding-left: 42px;
    font-size: 15px;
    background-size: 32px 32px;
  }

  .emphasis-box .parts-emphasis-columns p {
    font-size: 15px;
    line-height: 28px;
  }

  .emphasis-box .parts-emphasis-columns p + p {
    margin-top: 16px;
  }

  /* ---- schedule ---- */
  .parts-schedule__day,
  .parts-schedule__time,
  .parts-schedule__list {
    padding-left: 72px;
  }

  .parts-schedule__day::after,
  .parts-schedule__time::after,
  .parts-schedule__list::after {
    left: 27px;
  }

  .parts-schedule__time + .parts-schedule__list,
  .parts-schedule__day + .parts-schedule__list,
  .parts-schedule__list + .parts-schedule__list {
    margin-top: 16px;
  }

  .parts-schedule__time + .parts-schedule__list::after,
  .parts-schedule__day + .parts-schedule__list::after,
  .parts-schedule__list + .parts-schedule__list::after {
    top: -16px;
  }

  .parts-schedule__list + .parts-schedule__time,
  .parts-schedule__day + .parts-schedule__time,
  .parts-schedule__time + .parts-schedule__time {
    margin-top: 36px;
  }

  .parts-schedule__list + .parts-schedule__time::after,
  .parts-schedule__day + .parts-schedule__time::after,
  .parts-schedule__time + .parts-schedule__time::after {
    top: -36px;
  }

  .parts-schedule__time + .parts-schedule__day,
  .parts-schedule__list + .parts-schedule__day,
  .parts-schedule__day + .parts-schedule__day {
    margin-top: 32px;
  }

  .parts-schedule__time + .parts-schedule__day::after,
  .parts-schedule__list + .parts-schedule__day::after,
  .parts-schedule__day + .parts-schedule__day::after {
    top: -32px;
  }

  .parts-schedule__day {
    min-height: 56px;
  }

  .parts-schedule__day-title {
    font-size: 17px;
    line-height: 26px;
  }

  .parts-schedule__day .parts-schedule__badge {
    left: 0;
    width: 56px;
    height: 56px;
    padding-top: 15px;
    font-size: 11px;
    line-height: 22px;
  }

  .parts-schedule__day .parts-schedule__badge > strong {
    font-size: 24px;
  }

  .parts-schedule__time {
    min-height: 22px;
    font-size: 17px;
    line-height: 26px;
  }

  .parts-schedule__time::before {
    left: 17px;
    width: 22px;
    height: 22px;
    margin-top: -11px;
    border-width: 3px;
  }

  .wp-block-button.parts-btn > .wp-block-button__link,
  .wp-block-button.btn-pill > .wp-block-button__link {
    min-height: 60px;
    padding: 10px 74px 10px 24px;
    font-size: 16px;
  }

  .wp-block-button.parts-btn > .wp-block-button__link::before,
  .wp-block-button.parts-btn > .wp-block-button__link::after,
  .wp-block-button.btn-pill > .wp-block-button__link::before,
  .wp-block-button.btn-pill > .wp-block-button__link::after {
    right: 8px;
    width: 40px;
    height: 40px;
    margin-top: -20px;
  }

  /* ---- CTA ---- */
  .parts-cta {
    padding: 44px 20px 32px;
  }

  .parts-cta .parts-cta__en {
    font-size: 30px;
    letter-spacing: 0.12em;
  }

  .parts-cta .parts-cta__title {
    font-size: 18px;
    line-height: 28px;
  }

  /* 電話とボタンは縦に積む */
  .parts-cta .parts-cta__body {
    display: block;
    margin-top: 24px;
  }

  .parts-cta .parts-cta__tel-label {
    font-size: 15px;
    line-height: 26px;
    letter-spacing: 0.1em;
  }

  .parts-cta .parts-cta__tel-number {
    font-size: 27px;
    line-height: 26px;
  }

  .parts-cta .parts-cta__tel-number::before {
    width: 34px;
    height: 34px;
  }

  .parts-cta .parts-cta__tel-note {
    margin-top: 8px;
    font-size: 13px;
    line-height: 22px;
  }

  .parts-cta .parts-cta__buttons {
    width: 100%;
    margin-top: 20px;
  }

  .parts-cta .parts-cta__btn .wp-block-button__link {
    justify-content: center;
    gap: 14px;
    height: 68px;
    padding: 0 16px;
    font-size: 16px;
    line-height: 26px;
  }

  .parts-cta .parts-cta__btn .wp-block-button__link::before {
    width: 32px;
    height: 32px;
  }

  /* ---- クロストーク ---- */
  /* 横に並べる余裕が無いので、顔を上に出して縦に積む */
  .parts-talk,
  .parts-talk--right {
    flex-direction: column;
    gap: 12px;
  }

  .parts-talk--right {
    align-items: flex-end;
  }

  .parts-talk__person {
    flex-basis: auto;
    width: 96px;
  }

  .parts-talk .parts-talk__avatar {
    width: 96px;
    height: 96px;
  }

  .parts-talk .parts-talk__name {
    font-size: 16px;
    line-height: 28px;
  }

  .parts-talk .parts-talk__bubble {
    width: 100%;
    padding: 20px;
    font-size: 15px;
    line-height: 28px;
  }

  /* 三角は上向きにして、顔の下から出しているように見せる。
     パソコン用の指定（左右の太い枠線）を打ち消す必要があるので、
     --left / --right の側で 4 辺ぶんまとめて指定し直している */
  .parts-talk__bubble::before {
    top: auto;
    bottom: 100%;
  }

  .parts-talk--left .parts-talk__bubble::before {
    right: auto;
    left: 32px;
    border-width: 0 14px 16px;
    border-style: solid;
    border-color: transparent transparent var(--color-bg-light);
  }

  .parts-talk--right .parts-talk__bubble::before {
    left: auto;
    right: 32px;
    border-width: 0 14px 16px;
    border-style: solid;
    border-color: transparent transparent var(--color-bg-light);
  }
}