@charset "UTF-8";
/* ==========================================================================
   療育プログラム（program.html）専用スタイル
   ・共通部分（ヘッダー・フッター・アニメーション）は style.css
   ・パソコン版は元サイトと同じく「1440px 幅のデザインを中央寄せ」または「% で伸縮」
   ========================================================================== */

/* 見出し用の手書き風フォント（元サイトでアップロードされている「07ラノベPOP」） */
@font-face {
  font-family: "LightNovelPOP";
  src: url("../assets/fonts/lightnovelpop.woff2") format("woff2");
  font-display: swap;
}
.prog { --font-pop: "LightNovelPOP", "07ラノベPOP", "07LightNovelPOP", var(--font); }

.prog section { position: relative; }
:where(.prog) :where(p, h1, h2, h3, h4, h5, h6) { margin: 0; font-size: inherit; font-weight: inherit; }

/* --------------------------------------------------------------------------
   ページタイトル（PROGRAM）
   -------------------------------------------------------------------------- */
.pg-hero { height: 338px; overflow: hidden; }
.pg-hero__bg { position: absolute; inset: 0; }
.pg-hero__sub {
  position: absolute; left: 0; right: 0; top: 116px;
  font-size: 16px; line-height: 16px; letter-spacing: .4em; font-weight: 400;
  color: var(--c-text2); text-align: center;
}
.pg-hero__title {
  position: absolute; left: 0; right: 0; top: 133px;
  font-family: var(--font-pop); font-size: 50px; line-height: 70px;
  color: var(--c-title); text-align: center;
}

/* --------------------------------------------------------------------------
   帯見出し（児童発達支援／放課後等デイサービス）下が V 字
   -------------------------------------------------------------------------- */
.pg-band { height: 158px; background: #fff; }
.pg-band::after {
  content: ""; position: absolute; inset: 0; background: #ff8878; pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--v, 100px)), 50% 100%, 0 calc(100% - var(--v, 100px)));
}
.pg-band__title {
  position: absolute; left: 0; right: 0; top: 53px; z-index: 1;
  font-size: 28px; line-height: 42px; font-weight: 700; letter-spacing: .05em;
  color: #fff; text-align: center;
}

/* 見出し（共通） */
.pg-intro__title, .pg-head__title, .pg-movie__title, .pg-future__title {
  position: absolute; left: 0; right: 0;
  font-size: 28px; line-height: 42px; font-weight: 700; text-align: center;
}

/* --------------------------------------------------------------------------
   児童発達支援：導入文
   -------------------------------------------------------------------------- */
.pg-intro { height: 313px; background: #fff; }
.pg-intro__title { top: 59px; color: var(--c-title); }
.pg-intro__text {
  /* 元は幅857px。英字（kids）が元フォントより少し広いので、中央の位置はそのままで左右1pxずつ広げて改行位置を合わせる */
  position: absolute; top: 147px; left: calc(50% - 430px); width: 859px;
  font-size: 16px; line-height: 25.6px; letter-spacing: .05em; color: #000; text-align: center;
}

/* ♦︎ ○○による個別療育 */
.pg-head { height: 100px; background: #fff; }
.pg-head--101 { height: 101px; }
.pg-head--115 { height: 115px; }
.pg-head__title { top: 38px; letter-spacing: .05em; color: var(--c-text2); }
.pg-head--115 .pg-head__title { top: 37px; }
.pg-head__title--red { color: var(--c-title); letter-spacing: normal; }

/* --------------------------------------------------------------------------
   個別療育（左：動画　右：説明）
   -------------------------------------------------------------------------- */
.pg-thera { height: 500px; background: #fff; overflow: hidden; }
.pg-thera__video { position: absolute; left: 42px; top: 42px; width: calc((100% - 84px) * .6); height: 416px; }
.pg-thera__video video { width: 100%; height: 100%; object-fit: cover; }
.pg-thera__col { position: absolute; top: 0; bottom: 0; left: 54%; right: 0; background: #fff; }
.pg-thera__box { position: absolute; top: 2px; left: calc(50% - 283px); width: 568px; height: 473px; background: #fff; }
.pg-thera__h {
  position: absolute; left: 20px; width: 453px;
  font-size: 23px; line-height: 34.5px; font-weight: 700; letter-spacing: .05em; color: var(--c-title);
}
.pg-thera__t {
  position: absolute; left: 20px; width: 466px;
  font-size: 16px; line-height: 25.6px; letter-spacing: .05em; color: #000;
}
.pg-thera__h--1 { top: 42px; }
.pg-thera__t--1 { top: 96px; }
.pg-thera__h--2 { top: 249px; width: 466px; }
.pg-thera__t--2 { top: 302px; left: 21px; }

/* --------------------------------------------------------------------------
   その他の療育（3 列）
   -------------------------------------------------------------------------- */
.pg-acts {
  height: 452px; background: #fff; padding: 18px 18px 0;
  display: grid; grid-template-columns: 33.69% 33.155% 33.155%; align-items: start;
}
.pg-act { position: relative; height: 415px; }
.pg-act__in { position: absolute; top: 0; width: 293px; height: 100%; }
.pg-act--1 .pg-act__in { right: 16px; }
.pg-act--2 .pg-act__in { left: calc(50% - 148px); }
.pg-act--3 .pg-act__in { left: 10px; }
.pg-act__img { width: 293px; height: 184px; object-fit: cover; }
.pg-act__title {
  position: absolute; top: 204px; left: 1px; width: 293px;
  font-size: 18px; line-height: 23.4px; font-weight: 700; color: #ff7c00; text-align: center;
}
.pg-act__text {
  position: absolute; top: 238px; left: 0; width: 293px;
  font-size: 14px; line-height: 22.4px; letter-spacing: .05em; color: #000; text-align: center;
}

/* --------------------------------------------------------------------------
   活動紹介動画（YouTube）
   -------------------------------------------------------------------------- */
.pg-movie { height: 720px; background: #fff; }
.pg-movie__title { top: 18px; letter-spacing: .05em; color: var(--c-text2); }
.pg-movie__frame { position: absolute; top: 105px; left: calc(50% - 455px); width: 908px; height: 510px; }
.pg-movie__frame iframe, .pg-it__frame iframe { display: block; width: 100%; height: 100%; border: 0; }

/* --------------------------------------------------------------------------
   放課後等デイサービス：導入
   -------------------------------------------------------------------------- */
.pg-creative { height: 448px; background: #fff; overflow: hidden; }
.pg-creative__title {
  position: absolute; left: 0; right: 0; top: 59px;
  font-size: 30px; line-height: 42px; font-weight: 700; color: var(--c-title); text-align: center;
}
.pg-creative__strip {
  position: absolute; top: 105px; height: 329px;
  left: min(60px, calc((100% - 980px) / 2)); width: max(980px, calc(100% - 120px));
}
.pg-creative__text {
  position: absolute; top: 72px; left: calc(52.42% - 467px); width: 491px;
  font-size: 16px; line-height: 25.6px; letter-spacing: .05em; color: var(--c-text2);
}
.pg-creative__img { position: absolute; top: 34px; left: calc(60.38% - 12px); width: 358px; height: 256px; object-fit: cover; }

/* --------------------------------------------------------------------------
   プログラム一覧（画像の帯＋文字）
   -------------------------------------------------------------------------- */
.pg-strips { background: #fff; }
.pg-strip {
  --sbg: #fafafa;
  position: relative; width: max(980px, 73.611%); height: 321px; margin: 0 auto;
  overflow: hidden; background: var(--sbg);
}
.pg-strip--digital { --sbg: #fff; height: 320px; }
.pg-strip--hado { --sbg: #fff; }
.pg-strip--esports { height: 323px; }
.pg-strip__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pg-strip--l .pg-strip__img { object-position: 100% 50%; }
.pg-strip--r .pg-strip__img { object-position: 0% 50%; }
.pg-strip__title {
  position: absolute; top: 64px; width: 412px; padding-top: 4px;
  font-family: var(--font-pop); font-size: 40px; line-height: 56px; font-weight: 700;
}
.pg-strip--l .pg-strip__title { left: calc(50% - 447px); text-align: left; }
.pg-strip--r .pg-strip__title { left: calc(50% + 49px); text-align: right; }
.pg-strip__text {
  position: absolute; top: 139px; width: 412px;
  font-size: 14px; line-height: 22.4px; letter-spacing: .05em; color: #323232;
}
.pg-strip--l .pg-strip__text { left: calc(50% - 453px); text-align: left; }
.pg-strip--r .pg-strip__text { left: calc(50% + 42px); width: 419px; text-align: right; }

.pg-strip--sst .pg-strip__title { color: #ff4040; }
.pg-strip--pc .pg-strip__title { color: #ff6b00; top: 63px; }
.pg-strip--pc .pg-strip__text { left: calc(50% + 28px); width: 433px; top: 138px; }
.pg-strip--prog .pg-strip__title { color: #06bf65; top: 63px; }
.pg-strip--prog .pg-strip__text { left: calc(50% - 454px); color: #353535; }
.pg-strip--digital .pg-strip__title { color: #5956b0; font-weight: 400; padding-top: 0; }
.pg-strip--digital .pg-strip__text { top: 135px; }
.pg-strip--hado .pg-strip__title { color: var(--c-text2); }
.pg-strip--esports .pg-strip__title { color: #1a7fd2; }

/* --------------------------------------------------------------------------
   IT療育によるスキル取得の例
   -------------------------------------------------------------------------- */
.pg-it { height: 546px; background: #fff; }
.pg-it > * { position: absolute; }
.pg-it__title {
  left: calc(45% - 344px); top: 73px; width: 490px;
  font-size: 25px; line-height: 29.9px; font-weight: 700; letter-spacing: 1.15px;
  color: var(--c-text2); text-align: center;
}
.pg-it__note {
  left: calc(55% - 65px); top: 78px; width: 409px;
  font-size: 16px; line-height: 20.8px; letter-spacing: .05em; color: var(--c-text2); text-align: center;
}
.pg-it__frame { width: 440px; height: 270px; padding: 12px; }
.pg-it__frame--1 { left: calc(45% - 441px); top: 158px; background: #fea857; }
.pg-it__frame--2 { left: calc(55% + 1px); top: 148px; background: #fe6060; }
.pg-it__cap {
  width: 356px;
  font-size: 14px; line-height: 19.6px; letter-spacing: .05em; color: var(--c-text2); text-align: center;
}
.pg-it__cap--1 { left: calc(45% - 400px); top: 455px; }
.pg-it__cap--2 { left: calc(55% + 43px); top: 445px; }
.pg-it__arrow { left: calc(50% - 25.5px); top: 267px; width: 51px; height: 50px; transform: rotate(var(--ar, 0deg)); }
.pg-it__arrow svg { width: 100%; height: 100%; }

/* --------------------------------------------------------------------------
   今の一歩が、未来の力になる
   -------------------------------------------------------------------------- */
.pg-future { height: 430px; background: #ff8878; color: #fff; }
.pg-future__tri { position: absolute; top: -1px; left: calc(50% - 347px); width: 694px; height: 70px; }
.pg-future__title { top: 145px; color: #fff; }
.pg-future__text {
  position: absolute; top: 233px; left: calc(50% - 400px); width: 800px;
  font-size: 16px; line-height: 25.6px; letter-spacing: .05em; color: #fff; text-align: center;
}

/* --------------------------------------------------------------------------
   関連ページ（4 つのアイコン）
   -------------------------------------------------------------------------- */
.pg-links { display: grid; grid-template-columns: repeat(4, 1fr); height: 326px; }
.pg-link { position: relative; background: rgba(255, 255, 255, .8); }
.pg-link__img { position: absolute; top: 44px; left: calc(50% - 112.5px); width: 225px; height: 225px; }
.pg-link__img img { width: 100%; height: 100%; object-fit: cover; }
.pg-link__title {
  position: absolute; top: 290px; left: calc(50% - 107px); width: 214px;
  font-size: 25px; line-height: 35px; font-weight: 700; color: var(--c-title); text-align: center;
}

/* ==========================================================================
   アニメーション（このページで新しく使う種類）
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* ふわっと表示（Fade In） */
  .a-fade { animation: 1200ms cubic-bezier(.445, .05, .55, .95) var(--d, 1ms) 1 normal backwards m-fadeIn; }

  /* 画面の端からすべり込む（Glide In）… --gx は program.js が計算 */
  .a-glide { animation: 1200ms cubic-bezier(.645, .045, .355, 1) var(--d, 1ms) 1 normal backwards p-glideIn; }

  /* IT療育の動画枠：回転しながら飛んでくる（高さに応じて縦の移動量が変わる） */
  .pg-it .a-circle { animation: 1200ms cubic-bezier(.075, .82, .165, 1) 1ms 1 normal backwards m-circleXIn, 1200ms linear 1ms 1 normal backwards p-circleYIn; }

  /* 矢印：左から現れる＋ぷるぷる */
  .pg-it__arrow { animation: 1200ms cubic-bezier(.645, .045, .355, 1) 400ms 1 normal backwards m-revealIn, 2000ms linear 1ms infinite p-jello2; }
}
.pg-it { --mty: -405px; }

@keyframes p-glideIn {
  0% { opacity: 0; animation-timing-function: step-end; }
  0.0001% { opacity: 1; transform: translate(var(--gx, 0px), 0); }
  100% { opacity: 1; transform: translate(0, 0); }
}
@keyframes p-circleYIn {
  0% { opacity: 0; animation-timing-function: step-end; }
  0.0001% { opacity: 0; transform: translateY(var(--mty, -300px)) rotate(var(--mrz, 45deg)); }
  100% { opacity: 1; transform: translateY(0) rotate(0deg); }
}
@keyframes p-jello2 {
  12% { transform: rotate(var(--ar, 0deg)) skewY(14deg); }
  19% { transform: rotate(var(--ar, 0deg)) skewY(-4deg); }
  29% { transform: rotate(var(--ar, 0deg)) skewY(8deg); }
  40% { transform: rotate(var(--ar, 0deg)) skewY(-4deg); }
  50% { transform: rotate(var(--ar, 0deg)) skewY(0deg); }
}

/* ==========================================================================
   スマホ（750px以下）
   ========================================================================== */
/* タブレット（iPad など）：4つのアイコンを横いっぱいに均等配置 */
@media (min-width: 751px) and (max-width: 1100px) {
  .pg-links { height: auto; column-gap: 10px; padding: 36px 12px 30px; background: rgba(255, 255, 255, .8); }
  .pg-link { background: none; }
  .pg-link__img { position: static; display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; }
  .pg-link__title { position: static; width: auto; margin-top: 14px; }
}

@media (max-width: 750px) {
  /* タイトル */
  .pg-hero { height: 155px; }
  .pg-hero__sub { left: 20px; right: 20px; top: 53px; font-size: 11px; line-height: 11px; }
  .pg-hero__title { left: 20px; right: 20px; top: 65px; font-size: 25px; line-height: 35px; }

  /* 帯見出し */
  .pg-band { height: 86px; }
  .pg-band--2 { height: 87px; }
  .pg-band { --v: 50px; }
  .pg-band__title { left: 20px; right: 20px; top: 20px; font-size: 16px; line-height: 23px; }

  /* 見出し共通：流し込みに切り替え */
  .pg-intro, .pg-head, .pg-thera, .pg-acts, .pg-creative, .pg-future, .pg-links { height: auto; }

  /* 導入文 */
  .pg-intro { padding: 20px 0 30px; }
  .pg-intro__title { position: static; font-size: 15px; line-height: 21px; }
  .pg-intro__text { position: static; width: auto; margin: 14px 20px 0; font-size: 12px; line-height: 19.2px; }

  /* ♦︎ 見出し */
  .pg-head, .pg-head--101 { height: 38px; }
  .pg-head__title { top: 0; left: calc(50% - 143px); right: auto; width: 280px; font-size: 16px; line-height: 23px; }
  .pg-head--115 { height: 66px; }
  .pg-head--115 .pg-head__title { top: 0; left: 20px; right: 20px; width: auto; padding-top: 1px; line-height: 20.8px; }

  /* 個別療育 */
  .pg-thera { overflow: visible; }
  .pg-thera__video { position: static; width: 100%; height: auto; aspect-ratio: 320 / 156; }
  .pg-thera__col { position: static; padding: 30px 20px; }
  .pg-thera__box { position: static; width: auto; height: auto; }
  .pg-thera__h, .pg-thera__t { position: static; width: auto; }
  .pg-thera__h { font-size: 16px; line-height: 24px; }
  .pg-thera__t { margin-top: 10px; font-size: 12px; line-height: 19.2px; }
  .pg-thera__h--2 { margin-top: 20px; }

  /* その他の療育 */
  .pg-acts { display: block; padding: 0; }
  .pg-act { height: auto; padding-bottom: 20px; }
  .pg-act--3 { padding-bottom: 30px; }
  .pg-act__in, .pg-act--1 .pg-act__in, .pg-act--2 .pg-act__in, .pg-act--3 .pg-act__in { position: static; width: auto; height: auto; margin: 0 20px; }
  .pg-act__img { width: 100%; height: auto; aspect-ratio: 280 / 158; }
  .pg-act__title, .pg-act__text { position: static; width: auto; }
  .pg-act__title { margin-top: 20px; font-size: 16px; line-height: 22px; }
  .pg-act__text { margin-top: 10px; font-size: 12px; line-height: 19.2px; }

  /* 活動紹介動画 */
  .pg-movie { height: auto; padding-bottom: 31px; }
  .pg-movie__title { position: static; font-size: 12px; line-height: 16px; }
  .pg-movie__frame { position: static; width: auto; height: auto; aspect-ratio: 280 / 159; margin: 14px 20px 0; }

  /* 放課後等デイサービス導入：画像 → 見出し → 本文 */
  .pg-creative { display: flex; flex-direction: column; padding-bottom: 20px; }
  .pg-creative__strip { display: contents; }
  .pg-creative__img { position: static; order: 1; width: 198px; height: 142px; margin: 20px auto 0; }
  .pg-creative__title { position: static; order: 2; margin: 20px 20px 0; padding-bottom: 4px; font-size: 16px; line-height: 22.4px; }
  .pg-creative__text { position: static; order: 3; width: auto; margin: 10px 20px 0; font-size: 12px; line-height: 19.2px; }

  /* プログラム一覧 */
  .pg-strip, .pg-strip--digital, .pg-strip--esports { width: 100%; height: auto; padding-bottom: 10px; background: #fff; overflow: visible; }
  .pg-strip--esports { padding-bottom: 30px; }
  .pg-strip__img { position: static; height: auto; aspect-ratio: 320 / 150; background: var(--sbg); }
  .pg-strip__title, .pg-strip--l .pg-strip__title, .pg-strip--r .pg-strip__title,
  .pg-strip--pc .pg-strip__title, .pg-strip--prog .pg-strip__title {
    position: static; width: auto; margin: 10px 20px 0; padding: 0 0 1px; font-size: 25px; line-height: 35px;
  }
  .pg-strip__text, .pg-strip--l .pg-strip__text, .pg-strip--r .pg-strip__text,
  .pg-strip--pc .pg-strip__text, .pg-strip--prog .pg-strip__text, .pg-strip--digital .pg-strip__text {
    position: static; width: auto; margin: 10px 20px 0; font-size: 12px; line-height: 19.2px;
  }
  /* SST：英字・カッコの幅の違いで1行目の「個々」が入りきらないため、右だけ2px広げて改行位置を合わせる */
  .pg-strip--sst .pg-strip__text { margin-right: 18px; }

  /* IT療育 */
  .pg-it { height: 626px; --mty: -300px; }
  /* タイトル末尾の全角スペース2つ分を左に足して、見える文字を中央に */
  .pg-it__title { left: 0; top: 40px; width: 100%; font-size: 18px; line-height: 23.4px; letter-spacing: .05em; text-align: center; }
  .pg-it__note { left: 20px; right: 20px; top: 74px; width: auto; font-size: 12px; line-height: 16px; }
  .pg-it__frame { width: 280px; height: 174px; padding: 10px; }
  .pg-it__frame--1 { left: calc(50% - 140px); top: 115px; }
  .pg-it__frame--2 { left: calc(50% - 140px); top: 392px; }
  .pg-it__cap { width: 280px; }
  .pg-it__cap--1 { left: calc(50% - 140px); top: 299px; }
  .pg-it__cap--2 { left: calc(50% - 140px); top: 576px; }
  .pg-it__arrow { left: calc(50% - 17px); top: 336px; width: 34px; height: 36px; --ar: 90deg; }

  /* 今の一歩が */
  .pg-future { padding: 56px 20px 30px; }
  .pg-future__tri { top: -2px; left: calc(50% - 120.5px); width: 241px; height: 28px; }
  .pg-future__title { position: static; font-size: 16px; line-height: 23px; }
  .pg-future__text { position: static; width: auto; margin-top: 20px; font-size: 12px; line-height: 19.2px; }

  /* 関連ページ */
  .pg-links { grid-template-columns: repeat(2, 1fr); column-gap: 14px; row-gap: 22px; padding: 24px 16px 31px; background: rgba(255, 255, 255, .8); }
  .pg-link { background: none; padding: 0; }
  .pg-link__img { position: static; display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; }
  .pg-link__title { position: static; width: auto; margin-top: 6px; font-size: 17px; line-height: 24px; }
}