/* IBPビジネス留学 3ヶ月コース LP
 *
 * 配置先: themes/ibp-2/inc/pages/short/（テンプレートは page-short.php）
 * 変数はテーマの inc/bootstrap/index.css のものを使い、LP固有の値だけ .lp にまとめている。
 * ブレークポイントはテーマと同じ 1024px。
 */

/* =========================================================================
   変数・全体
   ========================================================================= */

.lp {
  --lp-navy: var(--g-color--blue); /* #142f54 */
  --lp-navy--hero: #1a3861;
  --lp-gold: #f2c94c;
  --lp-gold--card: #ecb514;
  --lp-gold--section: #fde28f;
  --lp-link: #062a7a;
  --lp-line: #e1e4e9;

  overflow-x: hidden;
}

/* 幅と左右余白は .g-container に任せ、PC幅だけ上書きする */
.lp-container {
  --pc-width: 97rem;
}

/* ヒーローと上部カードを隙間なく続けるためのまとめ */
.lp-head {
  display: flow-root;
}

/* =========================================================================
   看板画像（キャッチコピーは画像の中。h1 のテキストは alt が持つ）
   SPは縦長（780×1000）、PCは横長（1920×500）を <picture> で出し分ける
   ========================================================================= */

.lp-kv {
  margin: 0;
  background-color: var(--lp-navy--hero);
}
.lp-kv__img {
  display: block;
  width: 100%;
  height: auto;
}

/* =========================================================================
   上部カード（ページ内リンク）
   SPは2列2行、PCは4列1行。
   仕切り線は gap ではなく border で引く（gap: 1px はサブピクセルの丸めで消えることがある）
   ========================================================================= */

.lp-topcards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  @media (min-width: 1024px) {
    grid-template-columns: repeat(4, 1fr);
  }
}
.lp-topcards__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding: 2rem 1.4rem;
  background-color: var(--g-color--white);
  border-left: 1px solid var(--lp-line);
  border-top: 1px solid var(--lp-line);
  text-decoration: none;
  @media (min-width: 1024px) {
    min-height: 12.8rem;
    padding: 2.6rem 2.2rem;
  }
  /* 上端のネイビーの帯。左の border の分だけ外に出して途切れないようにする */
  &::before {
    position: absolute;
    left: -1px;
    right: 0;
    top: 0;
    height: 3px;
    background-color: var(--lp-navy);
    content: "";
  }
}

/* SPは左列の左線と、1行目の上線を消す */
@media (max-width: 1023px) {
  .lp-topcards__item:nth-child(2n + 1) {
    border-left: 0;
    &::before {
      left: 0;
    }
  }
  .lp-topcards__item:nth-child(-n + 2) {
    border-top: 0;
  }
}

/* PCは上線を消し、先頭の左線を消す */
@media (min-width: 1024px) {
  .lp-topcards__item {
    border-top: 0;
  }
  .lp-topcards__item:first-child {
    border-left: 0;
    &::before {
      left: 0;
    }
  }
}

.lp-topcards__title {
  flex: 1;
  color: var(--lp-navy);
  font-size: var(--g-fz--p1);
  font-weight: bold;
  line-height: 1.5;
  @media (min-width: 1024px) {
    font-size: var(--g-fz--h3);
    line-height: 1.4;
  }
}
.lp-topcards__num {
  color: var(--lp-gold--card);
}
.lp-topcards__more {
  align-self: flex-end;
  color: var(--lp-link);
  font-size: var(--g-fz--p3);
  font-weight: bold;
}

/* =========================================================================
   セクション共通
   セクション間の余白は .g-container の gap（--g-space--between-section）が持つ
   ========================================================================= */

.lp-section {
  scroll-margin-top: 2rem;
}

/* ネイビーの帯（3つのポイント、3ヶ月間のスケジュール）。
   背景は box-shadow と clip-path で画面幅いっぱいに広げ、中身の幅はコンテナのまま */
.lp-band {
  padding-block: var(--g-space--between-section);
  background-color: var(--lp-navy);
  box-shadow: 0 0 0 100vmax var(--lp-navy);
  clip-path: inset(0 -100vmax);
  color: var(--g-color--white);
  .lp-section__title,
  .lp-points__title {
    color: var(--g-color--white);
  }
  .lp-section__lead {
    color: rgb(255 255 255 / 85%);
  }
}

.lp-section__num {
  color: var(--lp-gold--section);
  font-size: 3.6rem;
  font-weight: bold;
  letter-spacing: 0.96rem;
  text-align: center;
  line-height: 1;
  @media (min-width: 1024px) {
    font-size: 4.8rem; /* セクション番号だけの値 */
  }
}
.lp-section__title {
  margin-top: 2.4rem;
  /* 番号のないセクションは見出しが先頭に来るので、上の余白は持たない */
  &:first-child {
    margin-top: 0;
  }
  color: var(--lp-navy);
  font-size: var(--g-fz--h1);
  font-weight: bold;
  text-align: center;
  line-height: 1.35;
}
/* font-size は指定せず、body の --g-fz--p1 を継承する。
   SPは左寄せ、PCは中央寄せ（テーマの .g-section-5__text--v-2 と同じ作り） */
.lp-section__lead {
  margin-top: 2.4rem;
  color: var(--g-color--text);
  line-height: 1.8;
  text-align: left;
  @media (min-width: 1024px) {
    padding: 0 5rem;
    line-height: 1.45;
    text-align: center;
  }
}
.lp-section__body {
  margin-top: 4rem;
}

/* リード文の強調。文字の下半分にだけ色を敷く */
.lp-marker {
  color: inherit;
  background: linear-gradient(transparent 60%, var(--lp-gold--section) 60%);
}

/* 写真（01 リード文の下） */
.lp-photo {
  display: block;
  width: 100%;
  max-width: 77.4rem;
  height: auto;
  margin: auto;
}

/* 動画（04 キャリア支援） */
.lp-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: #000;
  iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
}

/* =========================================================================
   ボタン
   ========================================================================= */

.lp-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin-top: 4rem;
}
.lp-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 34.2rem;
  min-height: 5.7rem;
  padding: 0 4rem;
  border-radius: 50px;
  background-color: var(--lp-navy);
  color: var(--g-color--white);
  font-size: var(--g-fz--p1);
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  /* 右向きの矢印 */
  &::after {
    position: absolute;
    right: 2.4rem;
    width: 1rem;
    height: 1rem;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: rotate(-45deg);
    content: "";
  }
}
/* ページ内リンク。矢印を下向きにする */
.lp-button--anchor {
  &::after {
    transform: translateY(-0.3rem) rotate(45deg);
  }
}

/* =========================================================================
   3ヶ月コースの3つのポイント
   ========================================================================= */

.lp-points {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  @media (min-width: 1024px) {
    gap: 4rem;
  }
}
.lp-points__title {
  color: var(--lp-navy);
  font-size: var(--g-fz--h3);
  font-weight: 700;
  text-align: center;
  line-height: 1.6;
  @media (min-width: 1024px) {
    font-size: var(--g-fz--h2);
  }
}
.lp-points__title-em {
  color: var(--lp-gold--card);
}
.lp-points__list {
  display: grid;
  gap: 2rem;
  @media (min-width: 1024px) {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
  }
}
.lp-point {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: var(--g-color--text);
  padding: 3rem 2rem;
  border-top: 3px solid var(--lp-gold--card);
  background-color: var(--g-color--white);
  box-shadow: 0 2px 12px rgb(20 47 84 / 8%);
}
.lp-point__num {
  color: var(--lp-gold--card);
  font-size: var(--g-fz--h3);
  font-weight: 700;
  line-height: 1;
}
.lp-point__title {
  color: var(--lp-navy);
  font-size: var(--g-fz--h4);
  font-weight: 700;
}
.lp-point__text {
  font-size: var(--g-fz--p2);
  line-height: 1.9;
  strong {
    color: var(--lp-navy);
    font-weight: 700;
  }
}

/* =========================================================================
   02 プログラムで得られる4つの体験
   SPは縦積み、PCはラベルとカードの横並び（about ページの .strengths__list と同じ組み方）
   ========================================================================= */

.lp-values__list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  @media (min-width: 1024px) {
    gap: 3rem;
  }
}
.lp-value {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  @media (min-width: 1024px) {
    flex-direction: row;
  }
}
/* 左のラベル。about の .strengths__list-item::before と同じ見た目。
   PCではカードの高さいっぱいに伸びる */
.lp-value__label {
  flex: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: 100%;
  padding: 0.5rem 0;
  border: 1px solid var(--g-color--blue--strong);
  background-color: var(--lp-navy);
  color: var(--g-color--white);
  @media (min-width: 1024px) {
    flex-direction: column;
    gap: 0.4rem;
    width: 11.2rem;
    padding: 0.5rem 1.6rem;
  }
}
.lp-value__label-num {
  color: var(--lp-gold);
  font-size: var(--g-fz--h2);
  font-weight: bold;
  line-height: 1.1;
}
.lp-value__label-text {
  font-size: var(--g-fz--p1);
  font-weight: bold;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
}
/* PCではラベルの右枠が仕切りになるので、カード側は左枠を持たない */
.lp-value__card {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  width: 100%;
  padding: 2rem;
  background-color: var(--g-color--white);
  border: 1px solid var(--g-color--gray);
  border-top: 0;
  @media (min-width: 1024px) {
    flex-direction: row;
    gap: 3rem;
    padding: 3rem;
    border-top: 1px solid var(--g-color--gray);
    border-left: 0;
  }
}
/* 写真は 3:2 に切り抜いて表示する */
.lp-value__photo {
  display: block;
  flex: none;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  @media (min-width: 1024px) {
    align-self: flex-start; /* 本文が長いカードで縦に伸びないように */
    width: 30.5rem;
  }
}
.lp-value__content {
  flex: 1;
  min-width: 0;
}
.lp-value__title {
  color: var(--lp-navy);
  font-size: var(--g-fz--h4);
  font-weight: bold;
  line-height: 1.4;
}
.lp-value__text {
  margin-top: 1.2rem;
  color: var(--g-color--text);
  font-size: var(--g-fz--p2);
  line-height: 1.9;
}
.lp-value__buttons {
  display: flex;
  margin-top: 2rem;
}

/* 参加者の声。背景はゴールドを白と混ぜて薄くしている */
.lp-value__case {
  margin-top: 2rem;
  padding: 1.6rem 2rem;
  background-color: color-mix(in srgb, var(--lp-gold) 18%, var(--g-color--white));
}
/* 顔写真つき。写真は丸く切り抜いて左に置く */
.lp-value__case--photo {
  display: flex;
  align-items: flex-start;
  gap: 1.6rem;
}
.lp-value__case-photo {
  flex: none;
  width: 6.4rem;
  height: 6.4rem;
  border-radius: 50%;
  object-fit: cover;
}
.lp-value__case-body {
  flex: 1;
  min-width: 0;
}
.lp-value__case-meta {
  color: var(--lp-navy);
  font-size: var(--g-fz--p2);
  font-weight: bold;
  line-height: 1.5;
}
.lp-value__case-text {
  margin-top: 0.8rem;
  color: var(--g-color--text);
  font-size: var(--g-fz--p2);
  line-height: 1.8;
}

/* =========================================================================
   3ヶ月間のスケジュール
   縦線の上にアイコンを置いた時系列
   ========================================================================= */

.lp-months {
  display: grid;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0 0 0 2.4rem; /* アイコンの半分が縦線の左にはみ出す分 */
}
.lp-month {
  --lp-month-line: var(--lp-line);
  --lp-month-icon-center: 4.2rem; /* アイコンの top（1.8rem）＋ 半径（2.4rem） */
  display: grid;
  gap: 0.6rem 2rem;
  padding: 2.4rem 0 2.4rem 4.4rem;
  position: relative;
  /* 縦線。最初のアイコンの中心から最後のアイコンの中心までつなぐ */
  &::before {
    position: absolute;
    left: -1px;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--lp-month-line);
    content: "";
  }
  &:first-child::before {
    top: var(--lp-month-icon-center);
  }
  &:last-child::before {
    bottom: auto;
    height: var(--lp-month-icon-center);
  }
  @media (min-width: 1024px) {
    grid-template-columns: 12rem 1fr;
    padding-left: 5.6rem;
  }
}
/* 縦線の中心にアイコンの円の中心を合わせる（円 4.8rem） */
.lp-month__icon {
  position: absolute;
  z-index: 1;
  left: -2.4rem;
  top: 1.8rem;
  display: grid;
  place-items: center;
  width: 4.8rem;
  height: 4.8rem;
  border: 3px solid var(--g-color--white);
  border-radius: 50%;
  background-color: var(--lp-navy);
  color: var(--lp-gold);
  box-shadow: 0 0 0 1px var(--lp-line);
}
.lp-month__icon-svg {
  width: 2.2rem;
  height: 2.2rem;
}
.lp-month__label {
  color: var(--lp-navy);
  font-size: var(--g-fz--p2);
  font-weight: 700;
  @media (min-width: 1024px) {
    grid-row: span 2;
  }
}
.lp-month__title {
  color: var(--lp-navy);
  font-size: var(--g-fz--h4);
  font-weight: 700;
  line-height: 1.6;
}
.lp-month__text {
  font-size: var(--g-fz--p2);
  line-height: 1.9;
  @media (min-width: 1024px) {
    grid-column: 2;
  }
}
.lp-months__note {
  margin-top: 2rem;
  color: #8a93a3;
  font-size: var(--g-fz--p3);
  line-height: 1.8;
}

/* ネイビーの帯の上では、線とアイコンの色を反転する */
.lp-band {
  .lp-month {
    --lp-month-line: rgb(255 255 255 / 30%);
  }
  .lp-month__icon {
    border-color: var(--lp-navy);
    background-color: var(--g-color--white);
    color: var(--lp-navy);
    box-shadow: none;
  }
  .lp-month__label {
    color: var(--lp-gold);
  }
  .lp-month__title {
    color: var(--g-color--white);
  }
  .lp-month__text {
    color: rgb(255 255 255 / 85%);
  }
  .lp-months__note {
    color: rgb(255 255 255 / 70%);
  }
}

/* インターンシップについての注記 */
.lp-note {
  margin-top: 3rem;
  padding: 2.4rem;
  color: var(--g-color--text);
  border: 1px solid var(--lp-navy);
  border-radius: 0.8rem;
  background-color: #f6faff;
}
.lp-note__title {
  color: var(--lp-navy);
  font-size: var(--g-fz--p1);
  font-weight: 700;
  margin-bottom: 1rem;
}
.lp-note__text {
  font-size: var(--g-fz--p2);
  line-height: 1.9;
}

/* =========================================================================
   表（03 コース、STEP3 申し込み期限）
   SP用に組み替えず、同じ表のまま文字と余白を詰める。
   罫線はテーマの .g-table-set__table と同じ
   ========================================================================= */

.lp-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.lp-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  text-align: left;
}
.lp-table th,
.lp-table td {
  padding: 1rem;
  border: 1px solid var(--g-color--gray);
  vertical-align: top;
  font-size: 1.6rem; /* SP・PCとも16px。テーマに16px固定の変数がないため直に指定 */
  line-height: 1.5;
  word-break: break-word;
  @media (min-width: 1024px) {
    padding: 1.4rem 1.6rem;
  }
}
.lp-table thead th {
  border-color: var(--lp-navy);
  background-color: var(--lp-navy);
  color: var(--g-color--white);
  font-weight: bold;
}
.lp-table tbody th {
  background-color: var(--g-color--white);
  color: var(--g-color--text);
  font-weight: 400;
}
.lp-table tbody td {
  background-color: var(--g-color--white);
  color: var(--g-color--text);
}
.lp-table col:first-child {
  width: 26%;
  @media (min-width: 1024px) {
    width: 20.8%;
  }
}

/* =========================================================================
   費用と内容の比較（3ヶ月コース／1年コース）
   表の見た目は .lp-table を使い、中央寄せと総額の行だけ足す
   ========================================================================= */

.lp-compare {
  --lp-cream: color-mix(in srgb, var(--lp-gold) 18%, var(--g-color--white));
  th,
  td {
    padding-block: 0.8rem;
    vertical-align: middle;
    @media (min-width: 1024px) {
      padding-block: 1rem;
    }
  }
  td,
  thead th {
    text-align: center;
  }
  /* 項目名が折り返さないよう、左の列を広めに取る */
  col:first-child {
    width: 34%;
    @media (min-width: 1024px) {
      width: 36%;
    }
  }
  /* 3ヶ月コースの列だけクリーム色にして目立たせる */
  td:nth-child(2) {
    background-color: var(--lp-cream);
  }
  /* 「あり」は太字、「なし」はグレーで強弱をつける */
  .lp-compare__yes {
    color: var(--lp-navy);
    font-weight: bold;
  }
  .lp-compare__no {
    color: #9aa3b0;
  }
  /* セル内の小さな注釈 */
  .lp-compare__sub {
    display: block;
    margin-top: 0.2rem;
    color: #8a93a3;
    font-size: var(--g-fz--p4);
    font-weight: 400;
    line-height: 1.4;
  }
  tfoot th,
  tfoot td {
    background-color: var(--g-color--white);
    color: var(--lp-navy);
    font-weight: bold;
  }
  tfoot td {
    font-size: var(--g-fz--h4);
  }
}
.lp-compare__note {
  margin-top: 1.6rem;
  color: #8a93a3;
  font-size: var(--g-fz--p3);
  line-height: 1.8;
}
/* ネイビーの帯の上では、見出し行を3ヶ月コースはゴールド、1年コースは白にする。
   左上の空きセルは背景になじませる */
.lp-band {
  .lp-compare thead th {
    border-color: var(--g-color--white);
    background-color: var(--g-color--white);
    color: var(--lp-navy);
    &:first-child {
      border-color: transparent;
      border-right-color: var(--g-color--gray);
      background-color: transparent;
    }
    &:nth-child(2) {
      border-color: var(--lp-gold);
      background-color: var(--lp-gold);
    }
    /* 1年は見出しも項目も白なので、見出しの下に線を引いて分ける */
    &:nth-child(3) {
      border-bottom-color: var(--g-color--gray);
    }
  }
  .lp-compare__note {
    color: rgb(255 255 255 / 70%);
  }
}

/* =========================================================================
   お申し込みから帰国までの流れ（STEP）
   ========================================================================= */

.lp-steps {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  @media (min-width: 1024px) {
    gap: 4rem;
  }
}
.lp-step {
  display: grid;
  gap: 1.6rem;
  @media (min-width: 1024px) {
    grid-template-columns: 8rem 1fr;
    gap: 6rem;
    padding-left: 5rem;
  }
}
.lp-step__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 8rem;
  height: 8rem;
  background-color: var(--lp-navy);
  color: var(--g-color--white);
  line-height: 1.1;
}
.lp-step__badge-en {
  font-size: var(--g-fz--p4);
  font-weight: bold;
  letter-spacing: 0.05em;
}
.lp-step__badge-num {
  font-size: 3.2rem; /* バッジの数字だけの値 */
  font-weight: bold;
}
.lp-step__title {
  color: var(--lp-navy);
  font-size: var(--g-fz--h4);
  font-weight: bold;
  line-height: 1.4;
}
.lp-step__text {
  margin-top: 1.2rem;
  color: var(--g-color--text);
  line-height: 1.8;
}
.lp-step__extra {
  margin-top: 2.4rem;
}
.lp-step__photo {
  display: block;
  width: 100%;
  max-width: 32rem;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
/* 本文の下に左寄せで並べるボタン */
.lp-step__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin-top: 2rem;
  .lp-button {
    max-width: 26rem;
  }
}

/* =========================================================================
   よくある質問
   開閉はテーマ共通の .g-accordion（components の CSS・JS）を使う。
   Q・Aのラベル（.qa）は本番FAQページ（inc/pages/faq/index.css）と同じ指定
   ========================================================================= */

.qa {
  display: grid;
  grid-template-columns: 2ic 1fr;
  gap: 0.5rem;
  @media (min-width: 1024px) {
    gap: 2rem;
  }
}
.qa__label.ans {
  color: #ef3c62;
}
/* 質問は h3 にしているので、見出しの既定の大きさ・太さを外して本文と揃える */
.qa__q {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.qa__a p + p {
  margin-top: 1em;
}