@charset "UTF-8";

/* =========================================================
   放送大学 ファンミーティング LP
   ベースはPC幅（デザイン基準幅 1200px）。
   レスポンシブ対応はファイル末尾の @media ブロックにまとめて追加。
   ========================================================= */

:root{
  --stage: 1200px;          /* デザイン基準幅 */
  --fv-h: 588px;            /* ファーストビューの高さ */

  --navy:      #12295f;     /* 見出しの濃紺 */
  --blue:      #0b60c4;     /* 見出し・強調の青 */
  --blue-cta:  #005bb8;     /* ボタン地色 */
  --blue-icon: #123f8e;     /* アイコンの紺 */
  --ink:       #2c2c34;     /* 本文 */
  --ink-strong:#1b1b1b;     /* カード見出し */
  --ink-mute:  #5a5a5f;     /* カード補足 */
  --hand:      #3d7ad6;     /* 手書き文字 */
  --hand-line: #a9cdee;     /* 手書き囲み線 */
  --page-bg:   #f8fafd;
}

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

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--page-bg);
  color: var(--ink);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}

img{ display:block; max-width:100%; height:auto; }
ul{ margin:0; padding:0; list-style:none; }
p{ margin:0; }
a{ text-decoration:none; }


/* =========================================================
   FIRST VIEW
   ========================================================= */
.fv{
  position:relative;
  height: var(--fv-h);
  overflow:hidden;
  background: var(--page-bg);
}

/* ---- 背景写真とオーバーレイ（全幅） ---- */
.fv__bg{
  position:absolute;
  inset:0;
  overflow:hidden;
}
.fv__photo{
  position:absolute;
  left:50%;
  top:50%;
  width:100%;
  min-width: var(--stage);
  height:auto;
  /* 建物上部のラインが見本と同じ高さにくるトリミング位置 */
  transform: translate(-50%, -44%);
  /* 全面オーバーレイの代わりに写真自体の階調で明るさを作る */
  filter: saturate(.93) contrast(.92) brightness(1.09);
}
/* コピー背面だけを局所的に白く抜く */
.fv__glow{
  position:absolute; inset:0;
  background:
    radial-gradient(40% 27% at 51% 27%,
      rgba(255,255,255,.82) 0%, rgba(255,255,255,.42) 55%, rgba(255,255,255,0) 82%),
    radial-gradient(33% 13% at 51% 51%,
      rgba(255,255,255,.82) 0%, rgba(255,255,255,.40) 55%, rgba(255,255,255,0) 84%);
}
/* 下端のみページ地色へ落とす */
.fv__fade{
  position:absolute; left:0; right:0; top:55%; bottom:0;
  background:linear-gradient(to bottom,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.28) 15%,
    rgba(255,255,255,.60) 35%,
    rgba(255,255,255,.85) 55%,
    rgba(255,255,255,.94) 72%,
    var(--page-bg) 100%);
}

/* ---- 1200px ステージ ---- */
.fv__stage{
  position:relative;
  width: var(--stage);
  height: var(--fv-h);
  margin-inline:auto;
  overflow:hidden;
}

/* ---- 放送大学ロゴ ---- */
.fv__logo{
  position:absolute;
  left:28px;
  top:23px;
  width:151px;
  height:auto;
}

/* ---- まなぴー ---- */
.fv__mascot{
  position:absolute;
  left:-21px;
  top:26px;
  width:485px;
  height:auto;
  filter: drop-shadow(0 12px 22px rgba(60,90,130,.16));
}

/* ---- リード上部の小見出し ---- */
.fv__eyebrow{
  position:absolute;
  top:44.9px;
  left:50%;
  transform:translateX(calc(-50% + 6px));
  white-space:nowrap;
  font-size:22px;
  line-height:1;
  font-weight:700;
  letter-spacing:.037em;
  color:#15171d;
}

/* ---- メインコピー ---- */
.fv__title{
  position:absolute;
  top:88px;
  left:50%;
  transform:translateX(-50%);
  margin:0;
  width: var(--stage);
  text-align:center;
  font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  font-weight:900;
  color: var(--navy);
}
.fv__title-1,
.fv__title-2{ display:block; white-space:nowrap; }

.fv__title-1{
  position:relative;
  left:17.5px;
  font-size:61.5px;
  line-height:1;
  letter-spacing:0;
  text-shadow:0 2px 18px rgba(255,255,255,.85);
}
.fv__title-2{
  position:relative;
  left:48.5px;
  margin-top:13.5px;
  font-size:78px;
  line-height:1;
  letter-spacing:0;
  color: var(--blue);
  text-shadow:0 2px 18px rgba(255,255,255,.85);
}
/* ---- リード文 ---- */
.fv__lead{
  position:absolute;
  top:268.8px;
  left:50%;
  transform:translateX(calc(-50% + 18px));
  width: var(--stage);
  text-align:center;
  font-size:17.3px;
  line-height:32px;
  font-weight:500;
  color: var(--ink);
  text-shadow:0 1px 10px rgba(255,255,255,.9);
}
.fv__lead span{ display:block; white-space:nowrap; }
.fv__lead-2{ font-weight:700; }
.fv__lead-2 em{
  font-style:normal;
  color: var(--blue);
}

/* ---- 開催情報カード ---- */
.fv__facts{
  position:absolute;
  top:367px;
  left:297px;
  width:775px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  align-items:stretch;
  gap:5px;
}
.fact{
  display:flex;
  align-items:center;
  gap:15px;
  height:72px;
  padding:0 0 0 19px;
  border-radius:9px;
  background:rgba(255,255,255,.90);
  box-shadow:0 4px 14px rgba(52,84,130,.13);
}
.fact__icon{
  flex:none;
  width:30px;
  height:30px;
  margin-top:-1px;
  color: var(--blue-icon);
}
.fact__icon svg{ width:100%; height:100%; display:block; }
.fact__body{ display:block; }
.fact__title{
  display:block;
  font-size:13.5px;
  line-height:19.5px;
  font-weight:700;
  color: var(--ink-strong);
  white-space:nowrap;
}
.fact__title em{
  font-style:normal;
  color:#1668c4;
}
.fact__note{
  display:block;
  font-size:11px;
  line-height:13.9px;
  font-weight:500;
  color: var(--ink-mute);
  white-space:nowrap;
}

/* ---- CTAボタン ---- */
.fv__cta{
  position:absolute;
  top:463px;
  left:50%;
  transform:translateX(calc(-50% - 6px));
  display:flex;
  align-items:center;
  justify-content:center;
  width:333px;
  height:60px;
  border-radius:999px;
  background:linear-gradient(180deg,#0a63c2 0%, var(--blue-cta) 55%, #00539f 100%);
  box-shadow:0 6px 16px rgba(0,60,140,.22);
  color:#fff;
  font-size:24px;
  font-weight:700;
  letter-spacing:.09em;
  line-height:1;
  transition: transform .2s ease, box-shadow .2s ease;
}
.fv__cta:hover {
  transform: translateX(calc(-50% - 6px)) translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 60, 140, .28);
}
.fv__cta-label{ transform:translateX(-6px); }
.fv__cta-arrow{
  position:absolute;
  right:26px;
  width:17px;
  height:17px;
}

/* ---- 応募期間 ---- */
.fv__period{
  position:absolute;
  top:546.8px;
  left:50%;
  transform:translateX(calc(-50% - 6px));
  white-space:nowrap;
  font-size:16.2px;
  line-height:1;
  font-weight:700;
}
.fv__period-label{ color:#2a2f47; }
.fv__period-date{ color:#123072; }

/* ---- 手書き風メモ ---- */
.fv__note{
  position:absolute;
  left:872px;
  top:480px;
  width:246px;
  height:104px;
}
.fv__note-frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  color: var(--hand-line);
  overflow:visible;
}
.fv__note-text{
  position:absolute;
  left:51px;
  top:31px;
  transform:rotate(-5deg);
  transform-origin:left top;
  font-family:"Yomogi","Noto Sans JP",cursive;
  font-size:17.5px;
  line-height:27.5px;
  color: var(--hand);
  white-space:nowrap;
  font-weight:400;
}
.fv__note-text span{ display:block; }
.fv__note-text span:last-child{ margin-left:-14px; }

/* 「で。」は濃紺・「はじめまして、」と同程度のサイズに縮小 */
.fv__title-2 em{
  font-style:normal;
  color: var(--navy);
  font-size:61.5px;
  vertical-align:baseline;
}



/* =========================================================
   INTRO ／ 普段は見られない放送大学の裏側へ。
   ========================================================= */
.intro{
  background: var(--page-bg);
  padding:33.9px 0 24px;
  overflow:hidden;        /* まなぴーの右はみ出しでページ幅が広がるのを防ぐ */
}
.intro__inner{
  width:1074px;           /* 他セクションと同じ幅（左右のラインを統一） */
  margin-inline:auto;
  padding:0;
  display:grid;
  grid-template-columns:494px 1fr;
  column-gap:48px;
  align-items:start;
}

/* ---- 左：テキスト ---- */
.intro__text{ padding-top:1.8px; }

.intro__title{
  margin:0;
  font-size:25px;
  line-height:34.8px;
  font-weight:700;
  letter-spacing:0;
  color:#164bb4;
}
.intro__body{
  margin:20.5px 0 0;
  font-size:14.75px;
  line-height:28.8px;
  font-weight:400;
  letter-spacing:0;
  color:#2e2e33;
}
.intro__body + .intro__body{ margin-top:18.1px; }

/* ---- 右：スタジオ写真＋まなぴー ---- */
.intro__media{
  position:relative;
  width:532px;
}
.intro__photo{
  display:block;
  width:532px;
  height:312px;
  object-fit:cover;
  object-position:center 38%;
  border-radius:18px;
  box-shadow:0 10px 26px rgba(44,74,116,.16);
}
.intro__mascot{
  position:absolute;
  right: -130px;
  bottom:-80Px;
  width:270px;
  height:auto;
  filter:drop-shadow(0 8px 16px rgba(50,80,120,.18));
}


/* =========================================================
   PROGRAM ／ 当日の内容（予定）
   ※デザイン見本（幅793px）を 1200px 基準に換算（×1.5132）
   ========================================================= */
.program{
  background:#fff;
  padding:24px 0 24px;
}
.program__inner{
  width:1074px;          /* カード251.25×4 + gap23×3 */
  margin-inline:auto;
}

/* ---- 見出し ---- */
.program__heading{
  margin:0 0 19.3px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  font-size:22px;
  line-height:32.2px;
  font-weight:700;
  letter-spacing:0;
  color:#10307e;
}
.program__deco{
  flex:none;
  width:45px;
  color:#77a6dd;
}
.program__deco svg{ display:block; width:100%; height:auto; }
.program__deco--right svg{ transform:scaleX(-1); }

/* ---- カード一覧 ---- */
.program__list{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  column-gap:23px;
}
.program__card{
  display:flex;
  flex-direction:column;
  height:288px;
  overflow:hidden;
  border-radius:12px;
  background:#fff;
  box-shadow:0 2px 7px rgba(32,64,112,.10), 0 0 0 1px rgba(32,64,112,.04);
}

/* ---- アイコン＋タイトル ---- */
.program__head{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  height:44px;
  margin:21px 12px 0;
}
.program__icon{
  flex:none;
  width:39px;
  height:39px;
  color:#0a5cbb;
}
.program__icon svg{ display:block; width:100%; height:100%; }

.program__title{
  display:flex;
  align-items:center;
  min-height:44px;
  margin:0;
  font-size:17.5px;
  line-height:22px;
  font-weight:700;
  letter-spacing:0;
  color:#0f3a9e;
}

/* ---- 説明文 ---- */
.program__desc{
  margin:15.9px 10px 0;
  text-align:center;
  font-size:15.5px;
  line-height:24px;
  font-weight:400;
  letter-spacing:0;
  color:#33333a;
}

/* ---- 写真 ---- */
.program__media{
  position:relative;
  margin-top:auto;
  height:141px;
  overflow:hidden;
  background:#dbdbdb;
}
.program__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
/* 被写体が切れすぎないよう縦位置を調整 */
.program__list > li:nth-child(2) .program__media img{ object-position:center 53%; }
.program__list > li:nth-child(4) .program__media img{ object-position:center 58%; }
.program__media--mascot{
  overflow:visible;      /* 帽子が写真エリア上端をわずかに越える（見本準拠） */
  position: relative;
}
.program__media--mascot img{
  /* 素材の透明余白を除いた本体が幅225pxになる倍率で配置し、
     帽子の先端が写真エリア上端を15px越える位置に合わせている */
  position:absolute;
  left:50%;
  top:-107.5px;
  width:292px;
  max-width:none;
  height:auto;
  object-fit:contain;
  transform:translateX(-50%) rotate(-15deg);
}
.mascot-pop{
  position:absolute;
  z-index:3;
  display:block;
  width:3px;
  background:#0a5cbb;
  border-radius:2px;
  transform-origin:center;
  pointer-events:none;
}

/* 左・外側 */
.mascot-pop--l1{
  left:14px;
  top:78px;
  height:22px;
  transform:rotate(-52deg);
}

.mascot-pop--l2{
  left:35px;
  top:66px;
  height:14px;
  transform:rotate(-20deg);
}

.mascot-pop--r1{
  right:38px;
  top:48px;
  height:14px;
  transform:rotate(18deg);
}

.mascot-pop--r2{
  right:12px;
  top:58px;
  height:22px;
  transform:rotate(50deg);
}

/* ---- 注記 ---- */
.program__note{
  margin:10.4px 0 0;
  text-align:center;
  font-size:13px;
  line-height:1.6;
  color:#6f6f74;
}


/* =========================================================
   FLOW ／ 当日の流れ（予定）
   ※デザイン見本（幅793px）を 1200px 基準に換算（×1.5132）
     時刻は 04_資料（当日スケジュール）を正とする
   ========================================================= */
.flow{
  background:#fff;
  padding:24px 0 24px;
}
.flow__inner{
  width:1074px;          /* 「当日の内容」のカード列と同じ幅 */
  margin-inline:auto;
  padding:0 0 9px;
  border-radius:14px;
  background:linear-gradient(100deg,#f3f7fd 0%,#fafcfe 100%);
}

/* ---- 見出し ---- */
.flow__heading{
  margin:0 0 7px;
  padding-left:35px;
  font-size:22px;
  line-height:32px;
  font-weight:700;
  letter-spacing:0;
  color:#10307e;
}

/* ---- 7工程の列（等間隔・中央寄せ） ---- */
.flow__list{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  justify-content:center;
}
.flow__step{
  position:relative;
  flex:none;
  width:140.6px;         /* 見本の工程間ピッチ 92.9px ×1.5132 */
  text-align:center;
}

/* 工程をつなぐ矢印（アイコンの中心高さに合わせる） */
.flow__step + .flow__step::after{
  content:"";
  position:absolute;
  top:34px;              /* アイコン円の中心 */
  left:-6px;
  width:12px;
  height:21px;
  transform:translateY(-50%);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 21' fill='none' stroke='%237b9cc6' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.9 1.9 9.5 10.5 1.9 19.1'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* ---- アイコン ---- */
.flow__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:68px;
  height:68px;
  margin-inline:auto;
  border-radius:50%;
  background:#fff;
  box-shadow:0 2px 8px rgba(32,64,112,.10);
  color:#0a5cbb;
}
.flow__icon svg{
  display:block;
  width:34px;
  height:34px;
}

/* ---- 時刻／工程名 ---- */
.flow__label{
  margin:6px 0 0;
}
.flow__time,
.flow__name{
  display:block;
  line-height:19.7px;
  letter-spacing:0;
}
.flow__time{
  font-size:14px;
  font-weight:700;
  color:#0f3a9e;
}
.flow__name{
  font-size:13px;
  font-weight:700;
  color:var(--ink);
}
/* 終了は時刻・工程名とも青（見本準拠） */
.flow__step--end .flow__name{ color:#0f3a9e; }

/* =========================================================
   INFO ／ 開催概要・応募資格
   ※デザイン見本（幅793px）を 1200px 基準に換算（×1.5132）
     事実情報は 04_資料（企画概要 2026-08-19／募集要項）を正とする
   ========================================================= */
.info{
  background:#fff;
  padding:24px 0 24px;
  overflow:hidden;        /* まなぴーの右はみ出しでページ幅が広がるのを防ぐ */
}
.info__inner{
  width:1074px;           /* 「当日の流れ」帯と同じ幅 */
  margin-inline:auto;
  display:flex;
  align-items:stretch;    /* 2枚の高さを揃える */
  gap:17px;
}

/* ---- カード ---- */
.info__card{
  position:relative;
  box-sizing:border-box;
  flex:none;
  min-height:290px;
  padding:17px 0 26px;
  border:1px solid #e7ebf2;
  border-radius:12px;
  background:#fff;
  box-shadow:0 2px 10px rgba(32,64,112,.045);
}
.info__card--outline{ width:520px; }
.info__card--terms{ width:537px; }

/* ---- 見出し ---- */
.info__heading{
  margin:0;
  padding-left:35px;
  font-size:22px;
  line-height:32px;
  font-weight:700;
  letter-spacing:0;
  color:#10307e;
}

/* ---- 開催概要：アイコン／ラベル／内容の3カラム ---- */
.info__list{
  margin:18px 0 0;
  padding:0 30px 0 35px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.info__row{
  display:grid;
  grid-template-columns:24px 84px 1fr;  /* 内容の左端＝カード左端から143px */
  align-items:start;
}
.info__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  height:23px;
  color:#0a5cbb;
}
.info__icon svg{
  display:block;
  width:24px;
  height:24px;
}
.info__label{
  margin:0;
  padding-left:21px;
  font-size:14px;
  line-height:23px;
  font-weight:700;
  letter-spacing:0;
  color:var(--ink);
}
.info__value{
  margin:0;
  font-size:14px;
  line-height:23px;
  font-weight:400;
  letter-spacing:0;
  color:var(--ink);
}
.info__value--nowrap{ white-space:nowrap; }

/* 会場のアクセスURL（2行目・行送りは詰める） */
.info__link{
  display:block;
  margin-left:0;
  font-size:14px;
  line-height:17.5px;
  color:#0a5cbb;
  text-decoration:none;
}
.info__link:hover{ text-decoration:underline; }

/* ---- 応募資格：チェックリスト ---- */
.info__checks{
  margin:18px 0 0;
  padding:0 58px 0 35px;  /* 右余白はまなぴーの逃げも兼ねる */
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.info__check{
  display:grid;
  grid-template-columns:16px 1fr;
  column-gap:8px;
}
.info__check svg{
  width:16px;
  height:16px;
  margin-top:7px;        /* 1行目（行高30px）の中央に合わせる */
  color:#0a5cbb;
}
.info__check p{
  margin:0;
  font-size:14px;
  line-height:30px;
  letter-spacing:0;
  color:var(--ink);
}

/* ---- まなぴー（カード右下から少しはみ出す・下端はフェード） ---- */
.info__mascot{
  position:absolute;
  top:61px;
  right:-75px;
  width:225px;           /* 素材の透明余白を除いた本体が172.5pxになる倍率 */
  height:auto;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 84%,transparent 96%);
          mask-image:linear-gradient(to bottom,#000 0,#000 84%,transparent 96%);
transform:rotate(0deg);
transform-origin:center bottom;
}

/* =========================================================
   APPLY ／ 応募方法
   ※デザイン見本（幅793px）を 1200px 基準に換算（×1.5132）
     フォームURL・応募期間は 04_資料 の正式情報を使用
   ========================================================= */
.apply{
  background:#fff;
  padding:24px 0 24px;
}
.apply__inner{
  width:1074px;           /* 他セクションと同じ幅 */
  margin-inline:auto;
}

/* ---- 見出し ---- */
.apply__heading{
  margin:0 0 22px;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:14px;
  font-size:22px;
  line-height:32px;
  font-weight:700;
  letter-spacing:0;
  color:#10307e;
}
.apply__heading-note{
  font-size:14px;
  font-weight:400;
  color:var(--ink-mute);
}

/* ---- 外枠パネル ---- */
.apply__panel{
  padding:24px;
  border:1px solid #e7ebf2;
  border-radius:16px;
  background:#fbfcfe;
  box-shadow:0 2px 10px rgba(32,64,112,.045);
}

/* ---- STEP 1〜3 ---- */
.apply__steps{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.apply__step{
  position:relative;
  padding:22px 24px 24px;
  border:1px solid #eef1f6;
  border-radius:12px;
  background:#fff;
  box-shadow:0 2px 7px rgba(32,64,112,.06);
  display:flex;
  flex-direction:column;
}

/* 工程をつなぐ矢印（カードの垂直中央・カード間gapの中心） */
.apply__step + .apply__step::before{
  content:"";
  position:absolute;
  top:55%;
  left:-11px;
  width:16px;
  height:26px;
  transform:translate(-50%,-50%);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 26' fill='none' stroke='%230a5cbb' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.4 2.4 13.6 13 2.4 23.6'/%3E%3C/svg%3E") no-repeat center/contain;
}

.apply__step-head{
  flex:none;
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:16px;   /* 見出し→説明文の間隔（3カード共通） */
}
.apply__badge{
  flex:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  border-radius:50%;
  background:linear-gradient(180deg,#1a6fd6 0%,#0a5cbb 100%);
  color:#fff;
}
.apply__badge-label{
  font-size:8.5px;
  line-height:1;
  font-weight:700;
  letter-spacing:.04em;
}
.apply__badge-num{
  font-size:17px;
  line-height:1.15;
  font-weight:700;
}
.apply__step-title{
  margin:0;
  font-size:18px;
  line-height:1.3;
  font-weight:700;
  letter-spacing:0;
  color:#10307e;
}
.apply__step-body{
  flex:1;
  display:flex;
  align-items:center;
  gap:14px;
}
.apply__step-desc{
  flex:1;
  margin:0;
  font-size:13.5px;
  line-height:22px;
  font-weight:400;
  letter-spacing:0;
  color:var(--ink);
}
.apply__step-icon{
  flex:none;
  color:#0a5cbb;
  width:58px;
  height:58px;
}
.apply__step-icon svg{ display:block; width:100%; height:100%; }

/* ---- 応募フォーム・応募期間・応募するボタンのバー ---- */
.apply__bar{
  margin-top:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:36px;
  padding:0 24px;
  height:64px;
  border-radius:12px;
  background:linear-gradient(100deg,#eef4fc 0%,#f7fafd 100%);
}
.apply__bar-text{
  margin:0;
  font-size:14px;
  line-height:1.5;
  font-weight:400;
  color:var(--ink);
}
.apply__bar-label{ 
  font-weight:700;
  font-size:18px;
 }
.apply__bar-date{ 
  font-weight:700;
  font-size:18px;
   color:#0f3a9e; }

/* ---- 応募するボタン（FVのCTAとデザイン統一） ---- */
.apply__cta{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:172px;
  height:48px;
  border-radius:999px;
  background:linear-gradient(180deg,#0a63c2 0%, var(--blue-cta) 55%, #00539f 100%);
  box-shadow:0 4px 12px rgba(0,60,140,.2);
  color:#fff;
  font-size:18px;
  font-weight:700;
  letter-spacing:.06em;
  line-height:1.2;
  padding-left:12px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.apply__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 60, 140, .28);
}
.apply__cta-arrow{
  width:15px;
  height:15px;
}

/* =========================================================
   BACKSTAGE ／ 放送大学の舞台裏を、のぞいてみませんか？
   ※デザイン見本（幅793px）を 1200px 基準に換算（×1.5132）
   ========================================================= */
.backstage{
  background:#fff;
  padding:24px 0 24px;
}
.backstage__inner{
  width:1074px;          /* 他セクションと同じ幅 */
  margin-inline:auto;
}

/* ---- 見出し ---- */
.backstage__heading{
  margin:0 0 24px;
  text-align:center;
  font-size:22px;
  line-height:32px;
  font-weight:700;
  letter-spacing:0;
  color:#10307e;
}

/* ---- 写真4枚（等幅・等間隔） ---- */
.backstage__list{
  margin:0;
  padding:0;
  list-style:none;
  display:flex;
  gap:12px;
}
.backstage__item{
  flex:1;
  min-width:0;
}
.backstage__photo{
  display:block;
  width:100%;
  height:195px;
  object-fit:cover;
  border-radius:12px;
}
.backstage__caption{
  margin:15px 0 0;
  text-align:center;
  font-size:13px;
  font-weight:700;
  letter-spacing:0;
  color:var(--ink-strong);
}

/* =========================================================
   CARE ／ ご参加にあたってのお願い
   ========================================================= */
.care{
  background:#fff;
  padding:24px 0 24px;
}
.care__inner{
  width:1074px;          /* 他セクションと同じ幅 */
  margin-inline:auto;
}

/* ---- 見出し ---- */
.care__heading{
  margin:0 0 24px;
  text-align:center;
  font-size:22px;
  line-height:32px;
  font-weight:700;
  letter-spacing:0;
  color:#10307e;
}

/* ---- お願いカード5枚 ---- */
.care__list{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:16px;
  align-items:stretch;
}
.care__card{
  display:flex;
  flex-direction:column;
  align-items:center;
  box-sizing:border-box;
  padding:28px 12px 24px;
  border:1px solid #e7ebf2;
  border-radius:12px;
  background:#fff;
  box-shadow:0 2px 10px rgba(32,64,112,.045);
  text-align:center;
}
.care__icon{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  margin-bottom:16px;
  color:#0a5cbb;
}
.care__icon svg{ display:block; width:100%; height:100%; }
.care__text{
  margin:0;
  font-size:14px;
  line-height:22px;
  letter-spacing:0;
  color:var(--ink);
  text-wrap:pretty;
  text-align:left;
}

/* ---- カード下の注記 ---- */
.care__note{
  margin:28px auto 0;
  max-width:950px;
  padding:0 20px;
  text-align:center;
  font-size:12.5px;
  line-height:20px;
  letter-spacing:0;
  color:var(--ink-mute);
}

/* ---- レスポンシブ ---- */
@media (max-width:1120px){
  .care__inner{ width:auto; padding:0 24px; }
}
@media (max-width:860px){
  .care__list{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:600px){
  .care__list{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .care__card{ padding:22px 14px 20px; }
}
@media (max-width:420px){
  .care__list{ grid-template-columns:1fr; }
}

/* =========================================================
   FAQ ／ よくある質問
   ========================================================= */
.faq{
  background:#fff;
  padding:24px 0 24px;
}
.faq__inner{
  width:1074px;          /* 他セクションと同じ幅 */
  margin-inline:auto;
}

/* ---- 見出し ---- */
.faq__heading{
  margin:0 0 24px;
  text-align:center;
  font-size:22px;
  line-height:32px;
  font-weight:700;
  letter-spacing:0;
  color:#10307e;
}

/* ---- FAQカード4枚 ---- */
.faq__list{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  align-items:stretch;
}
.faq__card{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  box-sizing:border-box;
  padding:22px 16px;
  border:1px solid #e7ebf2;
  border-radius:12px;
  background:#fff;
  box-shadow:0 2px 10px rgba(32,64,112,.045);
}
.faq__q{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
}
.faq__badge{
  flex:none;
  width:26px;
  height:26px;
  border-radius:50%;
  background:var(--blue);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:700;
  letter-spacing:0;
}
.faq__question{
  margin:0;
  font-size:15px;
  line-height:22px;
  font-weight:700;
  letter-spacing:0;
  color:#10307e;
}
.faq__answer{
  margin:0;
  font-size:14px;
  line-height:24px;
  letter-spacing:0;
  color:var(--ink);
}

/* ---- レスポンシブ ---- */
@media (max-width:1120px){
  .faq__inner{ width:auto; padding:0 24px; }
}
@media (max-width:860px){
  .faq__list{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:520px){
  .faq__list{ grid-template-columns:1fr; }
}

/* =========================================================
   FINAL CTA ／ フッターCTA（まなぴー＋「はじめまして。」＋応募ボタン）
   ※デザイン見本（幅793px）を 1200px 基準に換算（×1.5132）
   ========================================================= */
.finalcta{
  position:relative;
  background:linear-gradient(120deg,#0b60c4 0%,#0a56ad 45%,#003c85 100%);
}
.finalcta__inner{
  position:relative;
  width:1200px;
  margin-inline:auto;
  display:flex;
  align-items:stretch;
  padding:0 64px;
  height:180px;
  overflow:visible;
}

/* ---- まなぴー＋手書き風メモ ---- */
.finalcta__mascot-col{
  position:relative;
  flex:none;
  width:214px;
  height:100%;
}
.finalcta__mascot-clip{
  position:absolute;
  top:-150px;
  left:5px;
  width:350px;
  height:330px;   /* 280px → 330px */
  overflow:hidden;
}
.finalcta__mascot{
  display:block;
  width:400px;
  max-width:none;
  height:auto;
  transform:rotate(6deg);
  transform-origin:30% 70%;
}
.finalcta__note{
  position:absolute;

  left:280px;
  top:30px;

  width:285px;
  padding:6px 18px;
  margin:0;

  transform:rotate(-6deg);
  transform-origin:center;
}
.finalcta__note-deco{
  position: absolute;
  inset: -18px -24px -20px -24px;
  width: calc(100% + 48px);
  height: calc(100% + 38px);
  color: rgba(255, 255, 255, 0.75);
  pointer-events: none;
  overflow: visible;
}
.finalcta__note-text{
  position:relative;
  z-index:1;
  margin:0;

  color:#fff;
  text-align:center;

  font-family:"Zen Kurenaido", sans-serif;
  font-size:18px;
  font-weight:400;
  line-height:1.55;
  letter-spacing:.08em;
}

/* ---- コピー＋応募ボタン ---- */
.finalcta__content{
  flex:1;
  min-width:0;
  margin-left:370px;
  padding:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
}
.finalcta__title{
  margin:0;
  color:#fff;
  font-size:32px;
  line-height:1.2;
  font-family:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  font-weight:900;
  letter-spacing:.02em;
}
.finalcta__sub{
  margin:0;
  color:#eaf3ff;
  font-size:16px;
  line-height:1.4;
  font-weight:400;
}
@media (min-width:1200px){
  .finalcta__sub br{ display:none; }
}
.finalcta__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:fit-content;
  height:40px;
  min-height:40px;
  padding:0 24px;
  padding-block:0;
  margin-top:8px;
  line-height:1;
  border-radius:20px;
  background:#fff;
  color:var(--blue-cta);
  font-size:18px;
  font-weight:700;
  letter-spacing:.06em;
  box-shadow:0 4px 14px rgba(0,25,70,.28);
  transition: transform .2s ease, box-shadow .2s ease;
}
.finalcta__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0, 25, 70, .28);
}
.finalcta__cta-arrow{
  width:10px;
  height:10px;
}

/* =========================================================
   ============ レスポンシブ対応（整理版） ==================
   PC版（1200px以上）は既存デザインを変更しない。
   821〜1199pxは「PC版の雰囲気を保つタブレット版」、
   820px以下はスマホ向けに読みやすく再配置する。
   ========================================================= */

/* ---------- 共通：固定幅コンテナを画面内に収める ---------- */
@media (max-width:1199px){
  .intro__inner,
  .program__inner,
  .flow__inner,
  .info__inner,
  .apply__inner,
  .backstage__inner,
  .care__inner,
  .faq__inner{
    width:calc(100% - 48px);
    max-width:1074px;
    margin-inline:auto;
  }

  .info__link{
    overflow-wrap:anywhere;
    word-break:break-word;
  }

  .finalcta__inner{
    width:100%;
    max-width:1200px;
  }
}

/* =========================================================
   TABLET / SMALL DESKTOP 821〜1199px
   ========================================================= */
@media (min-width:821px) and (max-width:1199px){
  /* ---------- FIRST VIEW ---------- */
  .fv{
    height:620px;
  }
  .fv__photo{
    min-width:100%;
    width:100%;
    height:620px;
    object-fit:cover;
    object-position:center 40%;
    transform:none;
    left:0;
    top:0;
  }
  .fv__stage{
    width:100%;
    height:620px;
    overflow:hidden;
  }
  .fv__logo{
    left:clamp(22px,3vw,40px);
    top:22px;
    width:140px;
  }
  .fv__mascot{
    left:clamp(-105px,-7vw,-45px);
    top:45px;
    width:clamp(330px,36vw,430px);
  }
  .fv__eyebrow{
    top:48px;
    font-size:19px;
    transform:translateX(3%);
  }
  .fv__title{
    top:90px;
    width:100%;
    padding-left:clamp(110px,14vw,170px);
  }
  .fv__title-1{
    left:0;
    font-size:clamp(46px,5vw,58px);
  }
  .fv__title-2{
    left:26px;
    font-size:clamp(59px,6.3vw,72px);
  }
  .fv__title-2 em{
    font-size:clamp(46px,5vw,58px);
  }
  .fv__lead{
    top:270px;
    width:100%;
    padding-left:clamp(120px,14vw,170px);
    font-size:16px;
    line-height:29px;
  }
  .fv__facts{
    top:363px;
    left:50%;
    transform:translateX(-50%);
    width:min(760px,76vw);
    grid-template-columns:repeat(4,1fr);
  }
  .fact{
    gap:10px;
    padding-left:12px;
  }
  .fact__icon{
    width:26px;
    height:26px;
  }
  .fact__title{
    font-size:12.5px;
  }
  .fact__note{
    font-size:10px;
  }
  .fv__cta{
    top:462px;
  }
  .fv__period{
    top:546px;
  }
  .fv__note{
    display:none;
  }

  /* ---------- INTRO ---------- */
  .intro__inner{
    grid-template-columns:minmax(0,1fr) minmax(360px,48%);
    column-gap:32px;
  }
  .intro__media,
  .intro__photo{
    width:100%;
  }
  .intro__photo{
    height:auto;
    aspect-ratio:1.7 / 1;
  }
  .intro__mascot{
    right:-70px;
    bottom:-70px;
    width:230px;
  }

  /* ---------- PROGRAM ---------- */
  .program__list{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
  }
  .program__card{
    height:300px;
  }
  .program__media{
    height:150px;
  }

  /* ---------- FLOW ---------- */
  .flow__list{
    padding-inline:14px;
  }
  .flow__step{
    flex:1 1 0;
    width:auto;
    min-width:0;
  }
  .flow__step + .flow__step::after{
    left:-5px;
  }
  .flow__icon{
    width:58px;
    height:58px;
  }
  .flow__icon svg{
    width:29px;
    height:29px;
  }
  .flow__name{
    font-size:12px;
  }

  /* ---------- INFO ---------- */
  .info__card--outline,
  .info__card--terms{
    width:calc(50% - 9px);
  }
  .info__list{
    padding-right:20px;
  }
  .info__value--nowrap{
    white-space:normal;
  }
  .info__mascot{
    top:81px;
    right:-70px;
    width:205px;
  }

  /* ---------- FINAL CTA ---------- */
  .finalcta__inner{
    padding:0 34px;
  }
  .finalcta__mascot-col{
    width:175px;
  }
  .finalcta__mascot-clip{
    left:-18px;
  }
  .finalcta__note{
    left:260px;
    width:245px;
  }
  .finalcta__content{
    margin-left:330px;
  }
  .finalcta__title{
    font-size:28px;
  }
}

/* =========================================================
   MOBILE / TABLET PORTRAIT 〜820px
   ========================================================= */
@media (max-width:820px){
  .intro__inner,
  .program__inner,
  .flow__inner,
  .info__inner,
  .apply__inner,
  .backstage__inner,
  .care__inner,
  .faq__inner{
    width:calc(100% - 32px);
    padding:0;
  }

  /* ---------- FIRST VIEW ---------- */
  .fv{
    height:auto;
    min-height:0;
    padding:0;
    overflow:hidden;
    background:var(--page-bg);
  }
  .fv__bg{
    position:absolute;
    inset:0 0 auto;
    width:100%;
    height:430px;
    aspect-ratio:auto;
  }
  .fv__photo{
    position:absolute;
    inset:0;
    width:100%;
    min-width:0;
    height:430px;
    object-fit:cover;
    object-position:center 38%;
    transform:none;
  }
  .fv__glow{
    background:
      radial-gradient(72% 25% at 56% 23%,rgba(255,255,255,.90),rgba(255,255,255,.50) 55%,rgba(255,255,255,0) 86%),
      linear-gradient(to bottom,rgba(255,255,255,.10),rgba(255,255,255,.35));
  }
  .fv__fade{
    top:50%;
  }
  .fv__stage{
    position:relative;
    z-index:1;
    width:100%;
    height:auto;
    overflow:visible;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:18px 16px 26px;
  }
  .fv__logo{
    position:static;
    width:112px;
    margin:0 auto 20px;
  }
 .fv__mascot{
  position:absolute;
  left:38px;
  top:-20px;
  width:280px;
  margin:0;
  filter:drop-shadow(0 8px 14px rgba(60,90,130,.18));
  z-index:0;
}
  .fv__eyebrow{
    position:relative;
    z-index:1;
    top:auto;
    left:auto;
    transform:none;
    margin:0 0 9px 78px;
    font-size:13px;
    line-height:1.4;
    white-space:normal;
    text-align:center;
  }
  .fv__title{
    position:relative;
    z-index:1;
    top:auto;
    left:auto;
    transform:none;
    width:100%;
    margin:0 0 18px;
    padding-left:72px;
    text-align:center;
  }
.fv__title-1,
.fv__title-2{
  position:static;
  white-space:nowrap;
  font-feature-settings:"palt" 1;   /* ← この行を追加 */
}
  .fv__title-1{
    font-size:clamp(28px,8vw,38px);
    line-height:1.15;
  }
  .fv__title-2{
    margin-top:5px;
    font-size:clamp(38px,11vw,52px);
    line-height:1;
  }
  .fv__title-2 em{
    font-size:clamp(28px,8vw,38px);
  }
  .fv__lead{
    position:relative;
    top:auto;
    left:auto;
    transform:none;
    width:100%;
    margin:18px 0 20px;
    padding:0;
    text-align:center;
    font-size:14px;
    line-height:1.8;
  }
  .fv__lead span{
    white-space:normal;
  }
  .fv__facts{
    position:relative;
    top:auto;
    left:auto;
    transform:none;
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    margin:0 0 18px;
  }
  .fact{
    min-width:0;
    height:auto;
    min-height:74px;
    gap:10px;
    padding:10px 9px;
    align-items:center;
  }
  .fact__icon{
    width:27px;
    height:27px;
  }
  .fact__body{
    min-width:0;
  }
  .fact__title{
    font-size:12px;
    line-height:1.45;
    white-space:normal;
  }
  .fact__note{
    font-size:10px;
    line-height:1.4;
    white-space:normal;
  }
  .fv__cta{
    position:relative;
    top:auto;
    left:auto;
    transform:none;
    width:min(100%,320px);
    height:56px;
    margin:0 auto 14px;
    font-size:21px;
  }
  .fv__cta:hover{
    transform:translateY(-2px);
  }
  .fv__cta-label{
    transform:none;
  }
  .fv__period{
    position:static;
    transform:none;
    white-space:normal;
    text-align:center;
    font-size:13px;
    line-height:1.55;
  }
  .fv__note{
    display:none;
  }

  /* ---------- INTRO ---------- */
  .intro{
    padding:32px 0 46px;
  }
  .intro__inner{
    display:flex;
    flex-direction:column;
    gap:26px;
  }
  .intro__text{
    padding-top:0;
  }
  .intro__title{
    font-size:clamp(14px,5.2vw,21px);
    line-height:1.55;
    white-space:nowrap;
  }
  .intro__body{
    font-size:14px;
    line-height:1.9;
  }
  .intro__body br{
    display:none;
  }
  .intro__media{
    width:100%;
  }
  .intro__photo{
    width:100%;
    height:auto;
    aspect-ratio:16/10;
  }
  .intro__mascot{
    display:block;
    right:-40px;
    bottom:-50px;
    width:clamp(185px,30vw,250px);
  }

  /* ---------- セクション見出し ---------- */
  .program__heading,
  .flow__heading,
  .info__heading,
  .apply__heading,
  .backstage__heading,
  .care__heading,
  .faq__heading{
    font-size:20px;
    line-height:1.5;
  }
  .backstage__heading{
    font-size:clamp(13px,4.5vw,20px);
    white-space:nowrap;
  }

  /* ---------- PROGRAM ---------- */
  .program__list{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
  }
  .program__card{
    height:auto;
    min-height:285px;
  }
  .program__head{
    height:auto;
    min-height:52px;
    margin:16px 10px 0;
    gap:8px;
  }
  .program__icon{
    width:34px;
    height:34px;
  }
  .program__title{
    font-size:15px;
    line-height:1.45;
  }
  .program__desc{
    margin-top:12px;
    font-size:13px;
    line-height:1.6;
  }
  .program__media{
    height:135px;
  }

  /* ---------- FLOW ---------- */
  .flow__inner{
    padding:18px 18px 22px;
  }
  .flow__heading{
    padding-left:0;
    margin-bottom:18px;
    text-align:left;
  }
  .flow__list{
    flex-direction:column;
    gap:12px;
  }
  .flow__step{
    width:100%;
    min-height:62px;
    display:grid;
    grid-template-columns:54px 1fr;
    align-items:center;
    gap:14px;
    text-align:left;
  }
  .flow__step + .flow__step::after{
    content:"";
    top:-12px;
    left:26px;
    width:2px;
    height:12px;
    transform:none;
    background:#b7c9df;
  }
  .flow__icon{
    width:54px;
    height:54px;
    margin:0;
  }
  .flow__icon svg{
    width:27px;
    height:27px;
  }
  .flow__label{
    margin:0;
  }
  .flow__time,
  .flow__name{
    display:inline;
    line-height:1.65;
  }
  .flow__time{
    margin-right:10px;
  }
  .flow__name br{
    display:none;
  }

  /* ---------- INFO ---------- */
  .info__inner{
    flex-direction:column;
    gap:16px;
  }
  .info__card--outline,
  .info__card--terms{
    width:100%;
  }
  .info__heading{
    padding-left:24px;
  }
  .info__list{
    padding:0 22px 0 24px;
  }
  .info__row{
    grid-template-columns:22px 74px minmax(0,1fr);
  }
  .info__label{
    padding-left:12px;
  }
  .info__value--nowrap{
    white-space:normal;
  }
  .info__checks{
    padding:0 28px 0 24px;
  }
  .info__mascot{
    display:block;
    top:auto;
    right:-42px;
    bottom:-45px;
    width:160px;
  }
  .info__card--terms{
    padding-bottom:72px;
  }

  /* ---------- APPLY ---------- */
  .apply__heading{
    flex-direction:column;
    align-items:center;
    gap:2px;
    margin-bottom:18px;
  }
  .apply__heading-note{
    font-size:13px;
  }
  .apply__panel{
    padding:18px 14px;
  }
  .apply__steps{
    grid-template-columns:1fr;
    gap:14px;
  }
  .apply__step{
    padding:18px;
  }
  .apply__step + .apply__step::before{
    content:none;
  }
  .apply__bar{
    height:auto;
    min-height:0;
    flex-direction:column;
    gap:14px;
    padding:16px;
    text-align:center;
  }
  .apply__bar-label,
  .apply__bar-date{
    font-size:16px;
  }

  /* ---------- BACKSTAGE ---------- */
  .backstage__list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px 12px;
  }
  .backstage__photo{
    height:auto;
    aspect-ratio:4/3;
  }
  .backstage__caption{
    margin-top:10px;
  }

  /* ---------- CARE ---------- */
  .care__list{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
  .care__card{
    padding:20px 14px;
  }
  .care__note{
    padding:0;
    text-align:left;
  }

  /* ---------- FAQ ---------- */
  .faq__list{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }

  /* ---------- FINAL CTA ---------- */
  .finalcta__inner{
    height:auto;
    min-height:0;
    padding:28px 18px 14px;
    display:grid;
    grid-template-columns:140px minmax(0,1fr);
    align-items:center;
    gap:16px;
    overflow:visible;
  }
  .finalcta__mascot-col{
    width:140px;
    height:122px;
  }
.finalcta__mascot-clip{
  position:absolute;
  top:-141px;
  left:-39px;
  width:266px;
  height:277px;
}
.finalcta__mascot{
  width:300px;
  /* top:100px; ← 効かないので削除でOK */
}
  .finalcta__note{
    position:absolute;
    left:auto;
    right:-200px;
    top:50%;
    transform:translateY(-135%);
    width:175px;
    padding:9px 16px;
    margin:0;
  }
  .finalcta__note-deco{
    inset:-6px -8px -6px -8px;
    width:calc(100% + 16px);
    height:calc(100% + 12px);
  }
  .finalcta__note-text{
    font-size:14px;
    line-height:1.4;
    text-align:center;
  }
  .finalcta__content{
    margin-left:175px;
    align-items:flex-start;
    align-self:start;
    margin-top:-10px;
    text-align:left;
    gap:8px;
  }
  .finalcta__title{
    font-size:24px;
  }
  .finalcta__sub{
    font-size:13px;
    line-height:1.6;
  }
  .finalcta__cta{
    width:fit-content;
    max-width:100%;
    margin-top:5px;
  }
}

/* =========================================================
   TABLET PORTRAIT 521〜819px
   ========================================================= */
@media (min-width:521px) and (max-width:819px){
  .info__checks li p br{
    display:none;
  }
}

/* =========================================================
   SMALL MOBILE 〜520px
   ========================================================= */
@media (max-width:520px){
  .program,
  .flow,
  .info,
  .apply,
  .backstage,
  .care,
  .faq{
    padding-block:22px;
  }

  .info__checks li p br{
    display:none;
  }

  .fv__stage{
    padding-inline:14px;
  }
.fv__mascot{
  left:4px;
  right:auto;
  top:55px;
  width:120px;
}
.fv__photo{
  object-position:center 45%;
}
  .fv__eyebrow{
    margin-left:0px;
    font-size:12px;
  }
  .fv__title{
    padding-left:0px;
  }
.fv__lead{
  position:relative;
  width:calc(100% - 16px);
  margin:-18px auto 8px;
  padding:10px 14px;

  background:none;
  border-radius:14px;
  box-shadow:none;

  text-shadow:0 1px 4px rgba(255,255,255,.95), 0 3px 10px rgba(255,255,255,.85), 0 6px 18px rgba(255,255,255,.6);

  font-size:clamp(12.5px,3.7vw,15px);
  letter-spacing:-0.05em;
}
.fv__lead::before{
  content:"";
  position:absolute;
  inset:-18px;
  z-index:-1;
  background:radial-gradient(ellipse 60% 65% at center, rgba(255,255,255,.65) 0%, rgba(255,255,255,.4) 45%, rgba(255,255,255,0) 78%);
  filter:blur(10px);
}
.fv__lead span{
  white-space:nowrap;
}
  .fv__facts{
    grid-template-columns:1fr 1fr;
  }
  .fact{
    justify-content:center;
  }

  .program__list,
  .backstage__list,
  .care__list,
  .faq__list{
    grid-template-columns:1fr;
  }
  .program__card{
    min-height:0;
  }
  .program__media{
    height:170px;
    margin-top:16px;
  }
  .program__media--mascot img{
    top: -105px;
  }

  .info__row{
    grid-template-columns:22px 1fr;
    row-gap:3px;
  }
  .info__label{
    padding-left:10px;
  }
  .info__value{
    grid-column:2;
    padding-left:10px;
  }
  .info__link{
    margin-left:0;
  }
  .info__mascot{
    right:20px;
    bottom:-40px;
    width:135px;
    transform:rotate(0deg);
  }
  .info__card--terms{
    padding-bottom:62px;
  }

  .apply__step-body{
    gap:8px;
  }
  .apply__step-icon{
    width:48px;
    height:48px;
  }

  .finalcta__inner{
    grid-template-columns:118px minmax(0,1fr);
    padding-inline:14px;
    height:135px;
    overflow:hidden;
  }
.finalcta__mascot-col{
  width:118px;
  height:100px;
  align-self:start;   /* ← 追加：中央寄せをやめて上基準に固定 */
  margin-top:34px;    /* ← 追加：今の見た目と同じ位置になる数値（521〜520px幅で実測） */
}
  .finalcta__mascot-clip{
    top:-110px;
    left:-25px;
    width:193px;
    height:182px;
  }
  .finalcta__mascot{
    width:220px;
  }
  .finalcta__note{
    left:auto;
    right:-130px;
    top:-20px;
    transform:translateY(0);
    width:140px;
    padding:6px 10px;
  }
  .finalcta__note-text{
    font-size:10px;
    letter-spacing:0;
  }
  .finalcta__content{
    margin-left:100px;
    margin-top:0;
    gap:6px;
    transform:translateY(-7px);
  }
  .finalcta__title{
    font-size:18px;
  }
  .finalcta__sub{
    font-size:11px;
    line-height:1.5;
  }
  .finalcta__cta{
    height:34px;
    min-height:34px;
    padding:0 18px;
    font-size:13px;
    margin-top:4px;
  }
  .finalcta__cta-arrow{
    width:8px;
    height:8px;
  }
}

@media (max-width:380px){
  .fv__facts{
    grid-template-columns:1fr;
  }
  .fv__mascot{
    left:-40px;
    width:100px;
  }
  .fv__eyebrow{
    margin-left:74px;
  }
  .fv__title{
    padding-left:74px;
  }
  .finalcta__inner{
    grid-template-columns:78px minmax(0,1fr);
  }
  .finalcta__mascot-col{
    width:78px;
    height:66px;
  }
  .finalcta__mascot-clip{
    top:-55px;
    left:2px;
    width:128px;
    height:120px;
  }
  .finalcta__mascot{
    width:145px;
  }
  .finalcta__note{
    right:-8px;
    top:16px;
    width:92px;
    padding:5px 8px;
  }
  .finalcta__note-text{
    font-size:9px;
  }
  .finalcta__content{
    margin-left:30px;
  }
}

/* =========================================================
   PC表示のFV位置を元デザインに戻す
   1024〜1199pxでも、FVだけは完成済みPC版の1200pxステージを維持する。
   （セクション本体のレスポンシブ設定はそのまま）
   ========================================================= */
@media (min-width:1024px) and (max-width:1199px){
  .fv{
    height:var(--fv-h);
    padding-bottom:0;
  }
  .fv__bg{
    position:absolute;
    inset:0;
    height:var(--fv-h);
  }
  .fv__photo{
    width:auto;
    min-width:1400px;
    height:588px;
    max-width:none;
    object-fit:cover;
    object-position:center center;
    left:50%;
    top:0;
    transform:translateX(-50%);
  }
  .fv__glow,
  .fv__fade{
    display:block;
  }
  .fv__stage{
    position:relative;
    width:var(--stage);
    height:var(--fv-h);
    margin-inline:auto;
    overflow:hidden;
  }
  .fv__logo{
    left:28px;
    top:23px;
    width:151px;
  }
  .fv__mascot{
    left:-21px;
    top:26px;
    width:485px;
  }
  .fv__eyebrow{
    top:44.9px;
    left:50%;
    transform:translateX(calc(-50% + 6px));
    font-size:22px;
  }
  .fv__title{
    top:88px;
    left:50%;
    width:var(--stage);
    padding-left:0;
    transform:translateX(-50%);
  }
  .fv__title-1{
    left:17.5px;
    font-size:61.5px;
  }
  .fv__title-2{
    left:48.5px;
    margin-top:13.5px;
    font-size:78px;
  }
  .fv__title-2 em{
    font-size:61.5px;
  }
  .fv__lead{
    top:268.8px;
    left:50%;
    width:var(--stage);
    padding-left:0;
    transform:translateX(calc(-50% + 18px));
    font-size:17.3px;
    line-height:32px;
  }
  .fv__facts{
    top:367px;
    left:297px;
    width:775px;
    transform:none;
    grid-template-columns:repeat(4,1fr);
    gap:5px;
  }
  .fact{
    gap:15px;
    height:72px;
    padding:0 0 0 19px;
  }
  .fact__icon{
    width:30px;
    height:30px;
  }
  .fact__title{
    font-size:13.5px;
  }
  .fact__note{
    font-size:11px;
  }
  .fv__cta{
    top:460px;
  }
  .fv__period{
    top:543px;
  }
  .fv__note{
    display:block;
  }
}

/* ---- 応募受付終了：CTAを目立たなくする（2026-10-09） ---- */
.fv__cta.is-closed,
.apply__cta.is-closed,
.finalcta__cta.is-closed{
  background:#e3e6ea;
  color:#8a9099;
  box-shadow:none;
  pointer-events:none;
  cursor:default;
}
.fv__cta.is-closed .fv__cta-arrow,
.apply__cta.is-closed .apply__cta-arrow,
.finalcta__cta.is-closed .finalcta__cta-arrow{ display:none; }
.fv__cta.is-closed .fv__cta-label{ transform:none; }
.apply__cta.is-closed{ padding-left:0; }