@charset "UTF-8";
/* //////////////////////////////////////////////////

Title : project/program.scss
For   : lp-sp-team/

Created       : 2026-08-26

==========================================

Content
    01. layout (container / main panel)
    02. intro
    03. benefit
    04. flow

////////////////////////////////////////////////// */
/* ===================== 00: 下層ページ共通 */
/*
  スクロール連動のフェードインを使わない。
  layout/container.scss の `.l-mainPanel__shell` は初期 opacity:0 で、
  common.js の IntersectionObserver が .is-show を付けて初めて表示される。
  この下層ページではアニメーション不要なので最初から表示する。
  併せて body の初期 opacity:0（common.js の domLoadExe が1にする）も打ち消し、
  JSが動かない環境でも本文が読める状態にする。
*/
body.is-lowerPage {
  opacity: 1;
}

.l-container--program .l-mainPanel__shell {
  opacity: 1;
  transition: none;
}

/* ===================== 01: layout */
.l-container--program {
  /*
    下層ページのコンテンツ幅と左右余白。ヘッダーと本文で共有するため
    .l-container--program（両方の祖先）に定義する。
    ※ --container-wide は :root 定義でトップページと共有なので触らない。
  */
  --container-lower: 960px;
  --gap-lowerPage: 60px;
  background-color: var(--color-theme-light);
}

/*
  layout/container.scss の `.l-mainPanel__shell:not(#hero)` と詳細度を合わせつつ、
  program.css が後読みなので上書きが効く。
*/
.l-container--program .l-mainPanel--program {
  --gap-mainPanel-shell: var(--gap-lowerPage);
  max-width: var(--container-lower);
  margin-inline: auto;
  padding-block-end: 60px;
}
.l-container--program .l-mainPanel--program .l-mainPanel__shell {
  margin-inline-start: 0;
}
.l-container--program .l-mainPanel--program .l-mainPanel__shell:not(#hero) {
  /* セクション間に地の色を覗かせない。白面を連続させる */
  margin-block-start: 0;
  padding-block: 60px;
  background-color: var(--color-white);
}
.l-container--program .l-mainPanel--program .l-mainPanel__shell#hero {
  margin-block-start: 0;
}

/* --- for small viewport --- */
@media screen and (max-width: 768px) {
  .l-container--program {
    --gap-lowerPage: 20px;
  }
  .l-container--program .l-mainPanel--program {
    padding-block-end: 84px; /* SP固定CTA(64px)ぶんを確保 */
  }
  .l-container--program .l-mainPanel--program .l-mainPanel__shell:not(#hero) {
    padding-block: 40px;
  }
}
/* --- for middle viewport --- */
@media screen and (min-width: 769px) and (max-width: 1280px) {
  .l-container--program {
    --gap-lowerPage: 40px;
  }
}
/* ===================== 01-2: hero */
.p-programHero__image {
  display: block;
  width: 100%;
  height: auto;
}

/* ===================== 02: intro */
.p-programIntro__body {
  text-align: center;
}
.p-programIntro__title {
  /* c-title--primary(50px) は下層ページの本文幅(960px)には大きすぎるので落とす */
  font-size: var(--title-programIntro, 32px);
  color: var(--color-theme);
}
.p-programIntro__lead {
  margin-block-start: 20px;
}
.p-programIntro__lead + .p-programIntro__lead {
  margin-block-start: 8px;
}
.p-programIntro__lead--strong {
  font-weight: 700;
}

/* --- for small viewport --- */
@media screen and (max-width: 768px) {
  .p-programIntro {
    --title-programIntro: 22px;
  }
  .p-programIntro__body {
    text-align: start;
  }
  .p-programIntro__lead {
    margin-block-start: 16px;
  }
}
/* ===================== 03: benefit */
.p-programBenefit__tierList {
  display: grid;
  gap: 20px;
  margin-block-start: 40px;
}
.p-programBenefit__tier {
  display: grid;
  place-items: center;
  gap: 8px;
  padding-block: 30px;
  padding-inline: 20px;
  background-color: var(--color-theme-light);
  text-align: center;
}
.p-programBenefit__tierCondition {
  font-weight: 500;
}
.p-programBenefit__tierDiscount {
  display: flex;
  align-items: baseline;
  gap: 2px;
  color: var(--color-theme);
  font-family: var(--font-en);
  font-weight: 700;
  line-height: 1;
}
.p-programBenefit__tierNum {
  font-size: 56px;
}
.p-programBenefit__tierSuffix {
  font-size: 24px;
}
.p-programBenefit__tierNote {
  color: var(--color-dim);
  font-size: var(--text-smaller);
}
.p-programBenefit__caution {
  display: grid;
  gap: 12px;
  margin-block-start: 40px;
  padding: 24px;
  border: 1px solid var(--color-light);
}
.p-programBenefit__cautionStrong {
  font-weight: 700;
  color: var(--color-attention);
}
.p-programBenefit__notes {
  margin-block-start: 32px;
}
.p-programBenefit__notesTitle {
  font-weight: 500;
}
.p-programBenefit__notesList {
  margin-block-start: 12px;
  display: grid;
  gap: 6px;
}
.p-programBenefit__notesList li {
  position: relative;
  padding-inline-start: 1.2em;
  color: var(--color-base);
  font-size: var(--text-smaller);
}
.p-programBenefit__notesList li::before {
  content: "※";
  position: absolute;
  inset-inline-start: 0;
}

/* --- for large viewport --- */
@media screen and (min-width: 769px) {
  .p-programBenefit__tierList {
    grid-template-columns: repeat(3, 1fr);
  }
}
/* ===================== 04: flow */
.p-programFlow__banner {
  display: block;
  margin-block-start: 40px;
  transition: opacity var(--transition-default);
}
.p-programFlow__banner img {
  display: block;
  width: 100%;
  height: auto;
}
.p-programFlow__banner:hover {
  opacity: var(--hover-opacity);
}
.p-programFlow__btn {
  --max-width: 320px;
  /* .c-btnBase は grid + place-items:center。列を等分させずアイコンと文言を隣接させる */
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  justify-content: center;
  gap: 8px;
  margin-block-start: 30px;
  margin-inline: auto;
  white-space: nowrap;
}
.p-programFlow__btn img {
  flex-shrink: 0;
  width: 13px;
  height: 11px;
}
.p-programFlow__supplement {
  display: grid;
  gap: 12px;
  margin-block-start: 40px;
}
.p-programFlow__tel {
  margin-block-start: 40px;
  padding-block: 24px;
  background-color: var(--color-theme-light);
  text-align: center;
}
.p-programFlow__telTitle {
  font-weight: 500;
}
.p-programFlow__telLink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-block-start: 8px;
  color: var(--color-theme);
}
.p-programFlow__telLink img {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}
.p-programFlow__telNumber {
  font-family: var(--font-en);
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
  white-space: nowrap;
}
.p-programFlow__telHours {
  margin-block-start: 8px;
  font-size: var(--text-smaller);
}

/*# sourceMappingURL=program.css.map */