@charset "UTF-8";

/* ==========================================================================
   北海道フロンティアカレッジ 第22期 受講生募集 LP
   パンフレット（2026 / 第22期）の意匠を踏襲
   - シグネチャグラデーション：ライム → グリーン → ティール → ブルー → 藍
   - 麻／和紙のテクスチャ、藍色の見出し、白い円のタイムライン
   ========================================================================== */

:root{
  /* brand gradient stops */
  --c-lime:   #a9c93c;
  --c-green:  #4fb37a;
  --c-teal:   #17a5aa;
  --c-blue:   #2b7fbe;
  --c-indigo: #2c4b96;

  --grad: linear-gradient(90deg,#a9c93c 0%,#4fb37a 25%,#17a5aa 50%,#2b7fbe 75%,#2c4b96 100%);
  /* 文字にクリップする用：淡色地でも読めるよう彩度・濃度を上げた版 */
  --grad-text: linear-gradient(90deg,#5d8710 0%,#1f8d5c 28%,#0b7d87 55%,#2160a6 80%,#2c4b96 100%);

  /* ink */
  --ink:      #1f3468;
  --ink-2:    #3a4a70;
  --body:     #33384a;
  --mute:     #6d7488;

  /* ground */
  --paper:    #f3f0e8;
  --paper-2:  #ebe7dc;
  --white:    #ffffff;
  --line:     #d9d4c6;

  --accent:   #c8102e;   /* 「やるぞ北開道」の朱／締切などの強調 */

  --f-min: "Zen Old Mincho", "Yu Mincho", "游明朝", YuMincho, serif;
  --f-san: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --f-num: "Poppins", "Noto Sans JP", sans-serif;

  --in: 1160px;
}

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:76px; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:var(--f-san);
  font-size:16px;
  line-height:2;
  color:var(--body);
  background:var(--paper);
  font-feature-settings:"palt";
  overflow-x:hidden;
  /* 「小田／全宏」「スター／ト」のように語や氏名の途中で折り返さないよう、
     日本語の文節単位で改行させる（非対応ブラウザは従来どおりの折り返し） */
  word-break:auto-phrase;
  line-break:strict;
}
/* 麻／和紙のテクスチャ */
body::before{
  content:"";
  position:fixed; inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.5;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E");
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol,dl,dd{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p,figure{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

.in{ width:min(100% - 48px, var(--in)); margin-inline:auto; position:relative; z-index:1; }
.nowrap{ white-space:nowrap; }
.pc{ display:inline; }
.sp{ display:none; }

/* ---------- 上部のグラデーションバー ---------- */
.rainbow{
  position:fixed; top:0; left:0; right:0; height:5px;
  background:var(--grad);
  z-index:200;
}

/* ---------- header ---------- */
.hd{
  position:fixed; top:5px; left:0; right:0;
  z-index:150;
  background:rgba(243,240,232,.86);
  backdrop-filter:saturate(160%) blur(12px);
  -webkit-backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid rgba(31,52,104,.08);
  transition:box-shadow .3s;
}
.hd.is-stuck{ box-shadow:0 6px 24px -14px rgba(31,52,104,.5); }
.hd__in{
  width:min(100% - 40px, 1320px); margin-inline:auto;
  height:68px; display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.hd__logo{ display:flex; flex-direction:column; justify-content:center; line-height:1.35; }
.hd__logo-ja{ font-family:var(--f-min); font-weight:600; font-size:17px; color:var(--ink); letter-spacing:.06em; }
.hd__logo-en{ font-family:var(--f-num); font-weight:300; font-size:9.5px; letter-spacing:.16em; color:var(--mute); }

.hd__nav{ display:flex; align-items:center; gap:26px; }
.hd__nav a{ font-size:13.5px; font-weight:500; color:var(--ink-2); letter-spacing:.04em; position:relative; padding:6px 0; transition:color .25s; }
.hd__nav a:not(.hd__cta)::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:var(--grad); background-size:400% 100%;
  transform:scaleX(0); transform-origin:left; transition:transform .3s;
}
.hd__nav a:not(.hd__cta):hover{ color:var(--ink); }
.hd__nav a:not(.hd__cta):hover::after{ transform:scaleX(1); }
.hd__cta{
  background:var(--ink); color:#fff !important;
  padding:11px 22px !important; border-radius:999px;
  font-size:13px !important; letter-spacing:.06em;
  transition:transform .25s, box-shadow .25s, background .25s;
}
.hd__cta:hover{ background:var(--c-indigo); transform:translateY(-2px); box-shadow:0 10px 22px -12px rgba(44,75,150,.9); }

.hd__burger{ display:none; width:44px; height:44px; position:relative; }
.hd__burger i{
  position:absolute; left:11px; width:22px; height:1.8px; background:var(--ink);
  transition:transform .3s, opacity .2s;
}
.hd__burger i:nth-child(1){ top:15px; }
.hd__burger i:nth-child(2){ top:21px; }
.hd__burger i:nth-child(3){ top:27px; }
.hd__burger.is-open i:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.hd__burger.is-open i:nth-child(2){ opacity:0; }
.hd__burger.is-open i:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-width:230px; padding:19px 34px;
  font-size:15px; font-weight:700; letter-spacing:.1em;
  border-radius:999px;
  transition:transform .3s cubic-bezier(.2,.8,.3,1), box-shadow .3s, background .3s, color .3s;
  position:relative; overflow:hidden;
}
.btn::after{
  content:"→"; font-family:var(--f-num); font-weight:500;
  transition:transform .3s;
}
.btn:hover::after{ transform:translateX(5px); }
.btn--primary{
  color:#fff;
  background:linear-gradient(100deg,#2c4b96,#17a5aa);
  background-size:180% 100%; background-position:0% 50%;
  box-shadow:0 16px 34px -18px rgba(23,60,130,.95);
}
.btn--primary:hover{ background-position:100% 50%; transform:translateY(-3px); box-shadow:0 22px 40px -18px rgba(23,60,130,.95); }
.btn--ghost{
  color:var(--ink); border:1.5px solid rgba(31,52,104,.28); background:rgba(255,255,255,.5);
}
.btn--ghost:hover{ background:#fff; border-color:var(--ink); transform:translateY(-3px); }
.btn--lg{ min-width:320px; padding:23px 44px; font-size:17px; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  padding:190px 0 110px;
  overflow:hidden;
  background:
    radial-gradient(1100px 620px at 78% 8%, rgba(23,165,170,.16), transparent 62%),
    radial-gradient(900px 560px at 6% 92%, rgba(169,201,60,.20), transparent 60%),
    linear-gradient(180deg,#f6f3ec 0%,#eeeade 100%);
}
/* 版画を思わせる大きな色面 */
.hero::after{
  content:""; position:absolute; border-radius:50%; filter:blur(2px); opacity:.5; pointer-events:none;
  width:340px; height:340px; left:-120px; bottom:-100px;
  background:conic-gradient(from 40deg, rgba(44,75,150,.4), rgba(23,165,170,.45), rgba(169,201,60,.4), rgba(44,75,150,.4));
  mask-image:radial-gradient(circle, transparent 55%, #000 56%, #000 74%, transparent 75%);
  -webkit-mask-image:radial-gradient(circle, transparent 55%, #000 56%, #000 74%, transparent 75%);
}
.hero__in{ width:min(100% - 48px, var(--in)); margin-inline:auto; position:relative; z-index:2; }

/* 背景に敷く大きな「22」（第22期）。見出しの背面・装飾のみ */
.hero__num{
  position:absolute;
  right:-2vw; top:50%;
  transform:translateY(-50%);
  z-index:1;
  font-family:var(--f-num); font-weight:600;
  font-size:clamp(210px, 29vw, 460px);
  /* line-height:1 だと字面が背景ボックスからはみ出し、上下が切れて見える */
  line-height:1.25; letter-spacing:-.05em;
  background:linear-gradient(155deg, rgba(169,201,60,.30), rgba(23,165,170,.22) 45%, rgba(44,75,150,.18));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  pointer-events:none; user-select:none; -webkit-user-select:none;
}

.hero__eyebrow{ margin-bottom:30px; }
.hero__eyebrow span{
  display:inline-block;
  padding:9px 26px;
  font-family:var(--f-num); font-size:13px; font-weight:500; letter-spacing:.18em;
  color:#fff; background:var(--ink);
  border-radius:999px;
  position:relative;
}
.hero__eyebrow span::before{
  content:""; position:absolute; inset:-3px; border-radius:999px;
  background:var(--grad); z-index:-1;
}

.hero__title{
  font-family:var(--f-min); font-weight:900;
  font-size:clamp(34px, 5.6vw, 68px);
  line-height:1.42; letter-spacing:.04em;
  color:var(--ink);
  margin-bottom:34px;
  text-shadow:0 1px 0 rgba(255,255,255,.6);
}
/* 狭い画面でも1文字だけ取り残されないよう、意味の単位で折り返す */
.hero__title span{ display:inline-block; }
.hero__title em{
  font-style:normal;
  background:var(--grad-text);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  /* 親の白い text-shadow が透明文字から透けて色を濁らせるため打ち消す */
  text-shadow:none;
  /* 折り返しても各行でグラデーションが完結するように */
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.hero__lead{
  font-size:clamp(14px,1.35vw,16.5px); line-height:2.15; color:var(--ink-2);
  margin-bottom:48px;
}

.hero__act{ display:flex; flex-wrap:wrap; align-items:center; gap:16px 24px; }
/* 締切は独立した注記ではなく CTA の一部として扱う */
.hero__deadline{
  display:flex; align-items:center; gap:11px;
  position:relative; padding-left:24px;
  font-size:12.5px; letter-spacing:.12em; color:var(--mute);
}
.hero__deadline::before{
  content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:1px; height:26px; background:rgba(31,52,104,.16);
}
.hero__deadline b{
  font-family:var(--f-num); font-weight:600; font-size:19px; letter-spacing:.01em;
  color:var(--ink);
}

/* ==========================================================================
   NEWS：お知らせ（他セクションと同じ「ベージュの地に白いカード」で組む）
   ========================================================================== */
.news__box{
  margin-top:34px;
  background:#fff;
  border-radius:4px;
  padding:10px 36px 26px;
  position:relative; overflow:hidden;
  box-shadow:0 20px 44px -32px rgba(31,52,104,.5);
}
.news__box::before{
  content:""; position:absolute; left:0; top:0; width:100%; height:4px; background:var(--grad);
}
.news__item + .news__item{ border-top:1px dashed rgba(31,52,104,.2); }
.news__item a{
  display:grid; grid-template-columns:104px auto 1fr;
  align-items:center; gap:0 18px;
  padding:20px 4px;
  transition:color .25s;
}
.news__date{
  font-family:var(--f-num); font-weight:500; font-size:13.5px; letter-spacing:.04em; color:var(--mute);
}
.news__cat{
  font-size:11px; font-weight:700; letter-spacing:.06em; line-height:1;
  color:var(--c-blue); background:rgba(43,127,190,.1);
  border-radius:999px; padding:6px 12px; white-space:nowrap;
}
.news__text{
  font-size:14.5px; line-height:1.7; color:var(--ink-2);
  transition:color .25s;
}
.news__item a:hover .news__text{ color:var(--c-indigo); text-decoration:underline; text-underline-offset:4px; }

.news__more{
  display:inline-flex; align-items:center; gap:9px;
  margin-top:22px;
  font-size:13px; font-weight:700; letter-spacing:.08em; color:var(--ink);
  padding-bottom:4px; border-bottom:1px solid rgba(31,52,104,.25);
  transition:gap .3s, border-color .3s;
}
.news__more::after{ content:"→"; font-family:var(--f-num); font-weight:500; }
.news__more:hover{ gap:14px; border-color:var(--ink); }

/* ==========================================================================
   共通セクション
   ========================================================================== */
.sec{ padding:110px 0; position:relative; z-index:1; }
.sec--news{ background:linear-gradient(180deg,#eeeade,#f1ede2); padding:72px 0 66px; }
.sec--about{ background:linear-gradient(180deg,#f1ede2,#f5f2ea); }
.sec--msg{ background:#f5f2ea; }
.sec--sch{ background:linear-gradient(180deg,#f5f2ea,#eceadf); }
.sec--lect{ background:#f2efe6; }
.sec--legacy{ background:linear-gradient(180deg,#f2efe6,#ede9de); }
.sec--out{ background:linear-gradient(180deg,#ede9de,#eae6d9); }

.sec__label{
  font-family:var(--f-num); font-size:12px; font-weight:500; letter-spacing:.3em;
  color:var(--c-teal);
  margin-bottom:14px;
  display:flex; align-items:center; gap:14px;
}
.sec__label::after{
  content:""; height:1px; width:56px; background:var(--grad);
}
.sec__title{
  font-family:var(--f-min); font-weight:600;
  font-size:clamp(26px,3.4vw,40px); line-height:1.5; letter-spacing:.05em;
  color:var(--ink);
  margin-bottom:22px;
}
.sec__catch{
  font-family:var(--f-min); font-weight:600;
  font-size:clamp(18px,2.1vw,25px); letter-spacing:.06em; line-height:1.7;
  margin-bottom:22px;
  background:var(--grad-text); -webkit-background-clip:text; background-clip:text; color:transparent;
  display:inline-block;
}
.sec__text{ font-size:15px; line-height:2.15; color:var(--ink-2); max-width:900px; }

/* ---------- ABOUT cards ---------- */
.cards{
  display:grid; grid-template-columns:repeat(3,1fr); gap:26px;
  margin-top:60px;
}
.card{
  background:#fff;
  border-radius:4px;
  padding:44px 34px 40px;
  position:relative;
  box-shadow:0 20px 44px -30px rgba(31,52,104,.55);
  transition:transform .4s cubic-bezier(.2,.8,.3,1), box-shadow .4s;
  overflow:hidden;
}
.card::before{
  content:""; position:absolute; left:0; top:0; width:100%; height:4px; background:var(--grad);
}
.card:hover{ transform:translateY(-8px); box-shadow:0 34px 56px -34px rgba(31,52,104,.6); }
.card__label{
  font-family:var(--f-num); font-size:10.5px; font-weight:500; letter-spacing:.24em; color:var(--c-teal);
  margin-bottom:12px;
}
.card__title{
  font-family:var(--f-min); font-weight:600; font-size:23px; letter-spacing:.05em; color:var(--ink);
  margin-bottom:14px;
}
.card__catch{
  font-size:14.5px; font-weight:700; line-height:1.8; color:var(--c-indigo);
  padding-bottom:16px; margin-bottom:16px;
  border-bottom:1px dashed rgba(31,52,104,.2);
}
.card__text{ font-size:13.8px; line-height:2.05; color:var(--body); }

/* ---------- MESSAGE ---------- */
.msgs{ display:grid; gap:34px; margin-top:56px; }
.msg{
  display:grid; grid-template-columns:280px 1fr; gap:44px; align-items:start;
  background:#fff;
  padding:46px 50px;
  border-radius:4px;
  box-shadow:0 20px 44px -32px rgba(31,52,104,.5);
  position:relative;
  overflow:hidden;
}
.msg::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:linear-gradient(180deg,#a9c93c,#17a5aa 50%,#2c4b96);
}
.msg:nth-child(2){ grid-template-columns:1fr 280px; }
.msg:nth-child(2) .msg__photo{ order:2; }
.msg__photo{
  border-radius:3px; overflow:hidden;
  box-shadow:0 16px 30px -22px rgba(31,52,104,.8);
}
.msg__photo img{ width:100%; aspect-ratio:4/5; object-fit:cover; object-position:center top; }
.msg__role{ font-size:12px; letter-spacing:.08em; color:var(--mute); margin-bottom:8px; }
.msg__name{
  font-family:var(--f-min); font-weight:600; font-size:33px; letter-spacing:.1em; color:var(--ink);
  line-height:1.3; margin-bottom:8px;
}
.msg__name span{
  display:inline-block; margin-left:14px;
  font-family:var(--f-num); font-weight:300; font-size:12px; letter-spacing:.14em; color:var(--mute);
  vertical-align:middle;
}
.msg__title{ font-size:12.5px; color:var(--mute); margin-bottom:24px; letter-spacing:.04em; }
.msg__catch{
  font-family:var(--f-min); font-weight:600; font-size:clamp(19px,2vw,24px);
  line-height:1.65; letter-spacing:.05em; color:var(--c-indigo);
  margin-bottom:20px;
  padding-left:18px; border-left:3px solid var(--c-teal);
}
.msg__text{ font-size:14.2px; line-height:2.1; }

/* ==========================================================================
   TIMELINE
   ========================================================================== */
.tl{
  position:relative;
  margin:70px auto 0;
  max-width:1040px;
  padding:10px 0;
}
/* 中央のグラデーションレール */
.tl::before{
  content:"";
  position:absolute; left:50%; top:0; bottom:0;
  width:6px; margin-left:-3px;
  border-radius:3px;
  background:linear-gradient(180deg,#a9c93c 0%,#7bbf5c 14%,#4fb37a 27%,#2eac93 40%,#17a5aa 52%,#1f95b6 65%,#2b7fbe 78%,#2b66aa 89%,#2c4b96 100%);
}
.tl__item{
  position:relative;
  display:grid;
  grid-template-columns:1fr 132px 1fr;
  align-items:center;
  margin-bottom:22px;
}
.tl__item:last-child{ margin-bottom:0; }

.tl__node{
  grid-column:2; grid-row:1;
  justify-self:center;
  width:112px; height:112px; border-radius:50%;
  background:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  border:5px solid var(--c-teal);
  box-shadow:0 12px 26px -16px rgba(31,52,104,.7);
  position:relative; z-index:2;
  line-height:1;
}
.tl__node small{ font-family:var(--f-num); font-weight:500; font-size:11px; letter-spacing:.1em; color:var(--mute); margin-bottom:3px; }
.tl__node b{ font-family:var(--f-num); font-weight:600; font-size:36px; color:var(--ink); letter-spacing:-.01em; }
.tl__node i{ font-style:normal; font-size:11px; color:var(--ink-2); margin-top:3px; letter-spacing:.08em; }

/* 各ノードの色をグラデーションに沿って進行させる */
.tl__item:nth-child(1) .tl__node{ border-color:#a9c93c; }
.tl__item:nth-child(2) .tl__node{ border-color:#6cba66; }
.tl__item:nth-child(3) .tl__node{ border-color:#3fb086; }
.tl__item:nth-child(4) .tl__node{ border-color:#22a8a0; }
.tl__item:nth-child(5) .tl__node{ border-color:#189fb2; }
.tl__item:nth-child(6) .tl__node{ border-color:#2390bd; }
.tl__item:nth-child(7) .tl__node{ border-color:#2b7fbe; }
.tl__item:nth-child(8) .tl__node{ border-color:#2c65ab; }
.tl__item:nth-child(9) .tl__node{ border-color:#2c4b96; }

.tl__body{
  grid-row:1;               /* 円と同じ行に置く（自動配置だと次行へ送られるため明示） */
  background:#fff;
  padding:26px 30px;
  border-radius:4px;
  box-shadow:0 16px 36px -28px rgba(31,52,104,.6);
  position:relative;
  transition:transform .35s cubic-bezier(.2,.8,.3,1), box-shadow .35s;
}
.tl__body:hover{ transform:translateY(-4px); box-shadow:0 24px 44px -28px rgba(31,52,104,.65); }
/* カードから円へ伸びる線 */
.tl__body::before{
  content:""; position:absolute; top:50%; width:20px; height:1px; background:rgba(31,52,104,.22);
}
.tl__item:nth-child(odd) .tl__body{ grid-column:1; text-align:right; margin-right:6px; }
.tl__item:nth-child(odd) .tl__body::before{ right:-20px; }
.tl__item:nth-child(even) .tl__body{ grid-column:3; margin-left:6px; }
.tl__item:nth-child(even) .tl__body::before{ left:-20px; }

.tl__date{
  font-family:var(--f-num); font-weight:600; font-size:19px; letter-spacing:.02em;
  color:var(--c-indigo); line-height:1.4; margin-bottom:6px;
}
.tl__date span{
  font-family:var(--f-san); font-size:10.5px; font-weight:500;
  border:1px solid currentColor; border-radius:2px;
  padding:0 3px; margin:0 3px; vertical-align:2px;
}
.tl__ttl{
  font-family:var(--f-min); font-weight:600; font-size:20px; letter-spacing:.05em; color:var(--ink);
  line-height:1.5; margin-bottom:8px;
  display:flex; align-items:center; gap:9px; flex-wrap:wrap;
}
.tl__item:nth-child(odd) .tl__ttl{ justify-content:flex-end; }
.tl__ttl em{
  font-style:normal; font-family:var(--f-san); font-size:11px; font-weight:700; letter-spacing:.1em;
  color:#fff; background:var(--ink); padding:4px 10px; border-radius:999px; line-height:1;
}
.is-camp .tl__ttl em{ background:linear-gradient(90deg,#4fb37a,#17a5aa); }
.is-lecture.is-last .tl__ttl em{ background:linear-gradient(90deg,#2b7fbe,#2c4b96); }
.tl__desc{ font-size:13.6px; line-height:1.9; color:var(--body); }
.tl__lect{ font-size:12.5px; color:var(--mute); margin-top:6px; letter-spacing:.03em; }
.tl__sub{
  margin-top:14px; padding-top:12px; border-top:1px dashed rgba(31,52,104,.2);
  font-size:12.2px; line-height:1.9; color:var(--mute);
}
/* 講義以外は少し控えめに */
.is-event .tl__body,
.is-ob .tl__body{ background:rgba(255,255,255,.66); }
.is-event .tl__ttl,
.is-ob .tl__ttl{ font-size:17px; }

.tl__note{
  margin-top:34px; text-align:center;
  font-size:12.5px; line-height:2; color:var(--mute);
}

/* ==========================================================================
   LECTURERS
   ========================================================================== */
.grp{
  display:inline-flex; align-items:center;
  height:42px; line-height:1;
  font-family:var(--f-san); font-size:13.5px; font-weight:700; letter-spacing:.12em;
  color:#fff; padding:0 34px 0 20px;
  margin:56px 0 28px;
  /* 右端の斜めは clip-path で本体ごと切る。
     疑似要素の三角形を継ぎ足す方式は、端数ピクセルで継ぎ目に隙間が出る */
  clip-path:polygon(0 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
}
.grp--a{ background:var(--c-indigo); }
.grp--b{ background:var(--c-blue); }
.grp--c{ background:var(--c-teal); }

.lects{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
/* OBセミナー・ビズファームは横長のコンパクトカード。
   主役である特別講師の写真が一番大きくなるよう、意図的に控えめにしている */
.lects--row{ grid-template-columns:repeat(2,1fr); gap:22px; }
.lects--row .lect{ display:grid; grid-template-columns:184px 1fr; padding-bottom:0; }
.lects--row .lect__photo{ grid-row:1 / span 4; }
.lects--row .lect__photo img{ aspect-ratio:4/5; object-position:center 14%; }
.lects--row .lect__date{ font-size:17px; padding:5px 13px 5px 12px; }
.lects--row .lect__date.is-tbd{ font-size:11px; padding:8px 12px; }
.lects--row .lect__name{ font-size:21px; margin:24px 22px 7px; }
.lects--row .lect__role{ font-size:11.5px; margin:0 22px 13px; }
.lects--row .lect__theme{ font-size:13px; margin:0 22px 13px; padding:12px 0; }
.lects--row .lect__prof{ font-size:12px; margin:0 22px 24px; }

.lect{
  background:#fff;
  border-radius:4px;
  padding:0 0 30px;
  overflow:hidden;
  box-shadow:0 18px 40px -30px rgba(31,52,104,.55);
  transition:transform .4s cubic-bezier(.2,.8,.3,1), box-shadow .4s;
}
.lect:hover{ transform:translateY(-7px); box-shadow:0 30px 52px -32px rgba(31,52,104,.6); }
.lect__photo{ position:relative; overflow:hidden; }
.lect__photo img{
  width:100%; aspect-ratio:1/1; object-fit:cover; object-position:center 18%;
  transition:transform .7s cubic-bezier(.2,.8,.3,1);
}
.lect:hover .lect__photo img{ transform:scale(1.05); }
.lect__date{
  position:absolute; left:0; top:0;
  font-family:var(--f-num); font-weight:600; font-size:22px; letter-spacing:.02em;
  color:#fff; background:linear-gradient(100deg,var(--c-indigo),var(--c-teal));
  padding:6px 18px 6px 16px; line-height:1.3;
}
.lect__date.is-tbd{ font-family:var(--f-san); font-size:13px; font-weight:700; letter-spacing:.08em; padding:10px 16px; }
.lect__name{
  font-family:var(--f-min); font-weight:600; font-size:25px; letter-spacing:.09em; color:var(--ink);
  line-height:1.4; margin:26px 26px 8px;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.lect__name .tag{
  font-family:var(--f-san); font-size:10.5px; font-weight:700; letter-spacing:.06em;
  color:var(--c-blue); background:rgba(43,127,190,.1);
  border-radius:999px; padding:4px 11px; line-height:1;
}
.lect__role{ font-size:12px; line-height:1.75; color:var(--mute); margin:0 26px 16px; letter-spacing:.03em; }
.lect__theme{
  font-size:14px; font-weight:700; line-height:1.75; color:var(--c-indigo);
  margin:0 26px 16px; padding:14px 0;
  border-top:1px solid rgba(31,52,104,.12); border-bottom:1px solid rgba(31,52,104,.12);
}
.lect__prof{ font-size:12.6px; line-height:1.95; color:var(--body); margin:0 26px; }


/* ==========================================================================
   LEGACY：20年のあゆみ ／ 卒塾後の活動
   ========================================================================== */
/* --- 20年のあゆみ（横並びのマイルストーン） --- */
.hist{
  --head: 118px;              /* 年＋期の高さ。レールとドットの位置合わせに使う */
  display:grid; grid-template-columns:repeat(4,1fr); gap:0 34px;
  margin-top:64px; position:relative;
}
/* ドットを貫くレール */
.hist::before{
  content:""; position:absolute; left:10px; right:10px;
  top:calc(var(--head) + 8px); height:4px; border-radius:4px;
  background:var(--grad);
}
.hist__item{ position:relative; }
/* 2本目以降の左に細い区切り（レールより下だけ） */
.hist__item + .hist__item::before{
  content:""; position:absolute; left:-17px;
  top:calc(var(--head) + 44px); bottom:4px; width:1px;
  background:rgba(31,52,104,.1);
}
.hist__head{ height:var(--head); }
.hist__year{
  font-family:var(--f-num); font-weight:600;
  font-size:clamp(40px,4.4vw,60px); line-height:1; letter-spacing:-.01em;
  color:currentColor;
}
.hist__term{
  display:inline-block; margin-top:14px;
  font-size:11px; font-weight:700; letter-spacing:.1em; line-height:1;
  padding:6px 12px; border-radius:999px;
  color:currentColor;
  background:rgba(31,52,104,.07);
  background:color-mix(in srgb, currentColor 14%, transparent);
}
.hist__dot{
  display:block; width:20px; height:20px; border-radius:50%;
  background:#fff; border:4px solid currentColor;
  position:relative; z-index:1;
  box-shadow:0 0 0 6px rgba(243,240,232,.9);
}
.hist__ttl{
  font-family:var(--f-min); font-weight:600; font-size:21px; letter-spacing:.05em; color:var(--ink);
  margin:30px 0 12px; line-height:1.5;
}
.hist__desc{ font-size:13px; line-height:2; color:var(--body); padding-right:18px; }

/* 節目ごとにグラデーションに沿って色を進める（子要素は currentColor で追従） */
.hist__item:nth-child(1){ color:#6f9a1c; }
.hist__item:nth-child(2){ color:#1f8d5c; }
.hist__item:nth-child(3){ color:#2273a8; }
.hist__item:nth-child(4){ color:#2c4b96; }

/* --- 卒塾後の活動 --- */
.act{ margin-top:104px; }
.act__head{ margin-bottom:44px; }
.act__list{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.act__card{
  background:#fff; border-radius:4px;
  overflow:hidden;
  box-shadow:0 18px 40px -30px rgba(31,52,104,.55);
  transition:transform .4s cubic-bezier(.2,.8,.3,1), box-shadow .4s;
}
.act__card:hover{ transform:translateY(-7px); box-shadow:0 30px 52px -32px rgba(31,52,104,.6); }
.act__photo{ overflow:hidden; }
.act__photo img{
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  transition:transform .7s cubic-bezier(.2,.8,.3,1);
}
.act__card:hover .act__photo img{ transform:scale(1.06); }
/* 写真の直下に色のラインを引き、20年のあゆみの4色と対応させる */
.act__body{ padding:26px 24px 28px; border-top:3px solid currentColor; }
.act__card:nth-child(1){ color:#a9c93c; }
.act__card:nth-child(2){ color:#37ae8e; }
.act__card:nth-child(3){ color:#2389bc; }
.act__card:nth-child(4){ color:#2c4b96; }
.act__ttl{
  font-family:var(--f-min); font-weight:600; font-size:20px; letter-spacing:.05em; color:var(--ink);
  margin-bottom:12px;
}
.act__catch{
  font-size:13.5px; font-weight:700; line-height:1.75; color:var(--c-indigo);
  padding-bottom:14px; margin-bottom:14px;
  border-bottom:1px dashed rgba(31,52,104,.2);
}
.act__text{ font-size:13px; line-height:1.95; color:var(--body); }

/* --- 20周年サイトへの導線 --- */
.more{
  display:block; margin-top:76px;
  padding:46px 54px;
  border-radius:4px;
  background:linear-gradient(120deg,#22366e,#1c5a7d 55%,#2f7d6a);
  color:#fff; position:relative; overflow:hidden;
  box-shadow:0 24px 50px -32px rgba(31,52,104,.8);
  transition:transform .4s cubic-bezier(.2,.8,.3,1), box-shadow .4s;
}
.more::before{ content:""; position:absolute; left:0; top:0; width:100%; height:4px; background:var(--grad); }
.more:hover{ transform:translateY(-5px); box-shadow:0 34px 60px -32px rgba(31,52,104,.85); }
.more__label{
  display:block; font-family:var(--f-num); font-size:11px; font-weight:500; letter-spacing:.28em;
  color:rgba(255,255,255,.6); margin-bottom:12px;
}
.more__ttl{
  display:block; font-family:var(--f-min); font-weight:600;
  font-size:clamp(21px,2.4vw,29px); letter-spacing:.06em; line-height:1.5; margin-bottom:14px;
}
.more__text{ display:block; font-size:13.8px; line-height:1.95; color:rgba(255,255,255,.8); max-width:720px; }
.more__act{
  display:inline-flex; align-items:center; gap:10px; margin-top:24px;
  font-size:14px; font-weight:700; letter-spacing:.08em;
  padding-bottom:5px; border-bottom:1px solid rgba(255,255,255,.4);
  transition:border-color .3s, gap .3s;
}
.more__act::after{ content:"→"; font-family:var(--f-num); font-weight:500; }
.more:hover .more__act{ border-color:#fff; gap:15px; }

/* ==========================================================================
   OUTLINE
   ========================================================================== */
.out{
  margin-top:52px;
  background:#fff;
  border-radius:4px;
  overflow:hidden;
  box-shadow:0 22px 48px -34px rgba(31,52,104,.55);
  border-top:4px solid transparent;
  background-image:linear-gradient(#fff,#fff), var(--grad);
  background-origin:border-box;
  background-clip:padding-box, border-box;
}
.out__row{
  display:grid; grid-template-columns:210px 1fr;
  border-bottom:1px solid rgba(31,52,104,.1);
}
.out__row:last-child{ border-bottom:0; }
.out__row dt{
  padding:26px 30px;
  background:rgba(31,52,104,.035);
  font-family:var(--f-min); font-weight:600; font-size:15.5px; letter-spacing:.1em; color:var(--ink);
  display:flex; align-items:center;
}
.out__row dd{ padding:26px 34px; font-size:14.5px; line-height:1.95; }
.out__row dd b{ font-weight:700; color:var(--ink); }
.out__row dd small{ display:block; margin-top:8px; font-size:12.2px; line-height:1.9; color:var(--mute); }
/* 表の値としての強調にとどめる（見出しより目立たせない） */
.price{
  font-family:var(--f-num) !important; font-weight:600; font-size:27px; line-height:1.2;
  color:var(--ink) !important; letter-spacing:.01em;
}
.price span{ font-family:var(--f-san); font-size:14px; font-weight:700; margin-left:3px; }
.deadline{
  font-family:var(--f-num); font-weight:600; font-size:18px; color:var(--accent) !important; letter-spacing:.02em;
}

/* ==========================================================================
   ENTRY
   ========================================================================== */
.entry{
  position:relative; z-index:1;
  padding:110px 0 100px;
  text-align:center;
  color:#fff;
  background:
    radial-gradient(900px 480px at 15% 10%, rgba(23,165,170,.4), transparent 60%),
    radial-gradient(760px 440px at 88% 88%, rgba(169,201,60,.26), transparent 58%),
    linear-gradient(140deg,#1c2f61,#22366e 45%,#1a3f6b);
  overflow:hidden;
}
.entry::before{
  content:""; position:absolute; left:0; right:0; top:0; height:5px; background:var(--grad);
}
.entry__label{
  font-family:var(--f-num); font-size:12px; font-weight:500; letter-spacing:.32em;
  color:rgba(255,255,255,.6); margin-bottom:16px;
}
.entry__title{
  font-family:var(--f-min); font-weight:600;
  font-size:clamp(26px,3.6vw,44px); line-height:1.55; letter-spacing:.06em;
  margin-bottom:22px;
}
.entry__text{ font-size:15px; line-height:2.1; color:rgba(255,255,255,.82); margin-bottom:42px; }
.entry__act{ margin-bottom:8px; }
.entry .btn--primary{
  background:#fff; color:var(--ink);
  box-shadow:0 20px 44px -20px rgba(0,0,0,.6);
}
.entry .btn--primary:hover{ background:#fff; color:var(--c-indigo); transform:translateY(-3px); }

.entry__deadline{ margin-top:40px; font-size:14px; letter-spacing:.08em; color:rgba(255,255,255,.8); }
.entry__deadline b{ font-family:var(--f-num); font-weight:600; font-size:19px; color:#ffd7dd; }

/* ---------- footer ---------- */
.ft{
  background:#16244a; color:rgba(255,255,255,.7);
  padding:56px 0 40px; text-align:center;
  position:relative; z-index:1;
}
.ft__logo{
  font-family:var(--f-min); font-weight:600; font-size:19px; letter-spacing:.1em; color:#fff;
  margin-bottom:6px;
}
.ft__logo span{
  display:block; margin-top:6px;
  font-family:var(--f-num); font-weight:300; font-size:10px; letter-spacing:.24em; color:rgba(255,255,255,.45);
}
.ft__nav{
  display:flex; justify-content:center; flex-wrap:wrap; gap:10px 28px;
  margin-top:22px;
}
.ft__nav a{
  font-size:12.5px; letter-spacing:.06em; color:rgba(255,255,255,.75);
  padding-bottom:3px; border-bottom:1px solid transparent;
  transition:color .25s, border-color .25s;
}
.ft__nav a:hover{ color:#fff; border-color:rgba(255,255,255,.5); }
.ft__org{ font-size:12.5px; line-height:1.95; margin:20px 0 26px; }
.ft__cr{ font-size:11px; letter-spacing:.06em; color:rgba(255,255,255,.4); }

/* ---------- 追従CTA（SP） ---------- */
.fixcta{
  position:fixed; left:16px; right:16px; bottom:14px; z-index:180;
  display:none;
  align-items:center; justify-content:center; gap:12px;
  padding:16px;
  font-size:15px; font-weight:700; letter-spacing:.08em; color:#fff;
  background:linear-gradient(100deg,#2c4b96,#17a5aa);
  border-radius:999px;
  box-shadow:0 14px 30px -12px rgba(0,0,0,.5);
}
.fixcta small{
  font-family:var(--f-num); font-size:11px; font-weight:500; letter-spacing:.06em;
  background:rgba(255,255,255,.2); padding:4px 10px; border-radius:999px;
}

/* ---------- スクロール表示アニメーション ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.3,1); }
.reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* ==========================================================================
   下層ページ（お知らせ一覧 / 記事詳細）
   ========================================================================== */
.pagehead{
  position:relative; z-index:1;
  padding:148px 0 62px;
  color:#fff;
  background:
    radial-gradient(760px 420px at 12% 10%, rgba(23,165,170,.38), transparent 60%),
    radial-gradient(620px 380px at 90% 90%, rgba(169,201,60,.22), transparent 58%),
    linear-gradient(140deg,#1c2f61,#22366e 48%,#1a3f6b);
  overflow:hidden;
}
.pagehead::before{
  content:""; position:absolute; left:0; right:0; top:0; height:4px; background:var(--grad);
}
.pagehead__label{
  font-family:var(--f-num); font-size:12px; font-weight:500; letter-spacing:.3em;
  color:rgba(255,255,255,.6); margin-bottom:14px;
  display:flex; align-items:center; gap:14px;
}
.pagehead__label::after{ content:""; height:1px; width:52px; background:var(--grad); }
.pagehead__ttl{
  font-family:var(--f-min); font-weight:600;
  font-size:clamp(23px,3vw,36px); line-height:1.55; letter-spacing:.05em;
}
.pagehead__meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:14px;
  margin-top:18px;
}
.pagehead__date{
  font-family:var(--f-num); font-weight:500; font-size:14px; letter-spacing:.06em;
  color:rgba(255,255,255,.75);
}
.pagehead__cat{
  font-size:11px; font-weight:700; letter-spacing:.08em; line-height:1;
  color:#fff; background:rgba(255,255,255,.16);
  border-radius:999px; padding:7px 14px;
}

.lower{
  position:relative; z-index:1;
  padding:76px 0 104px;
  background:linear-gradient(180deg,#f1ede2,#eae6d9);
}
.lower__in{ width:min(100% - 48px, 880px); margin-inline:auto; }

/* --- 記事本文 --- */
.article{
  background:#fff; border-radius:4px;
  padding:56px 60px 60px;
  position:relative; overflow:hidden;
  box-shadow:0 22px 48px -34px rgba(31,52,104,.5);
}
.article::before{
  content:""; position:absolute; left:0; top:0; width:100%; height:4px; background:var(--grad);
}
.article > *:first-child{ margin-top:0; }
/* WordPress は <p> で包まれない裸のテキストや <br> をそのまま出すため、
   本文の基本文字設定は .article 自体に持たせる */
.article{ font-size:15px; line-height:2.15; color:var(--body); }
.article p{ margin:0 0 1.6em; }
.article a{ color:var(--c-indigo); border-bottom:1px solid rgba(44,75,150,.35); transition:border-color .25s; }
.article a:hover{ border-color:var(--c-indigo); }
.article strong{ font-weight:700; color:var(--ink); }
.article hr{
  border:0; height:1px; background:rgba(31,52,104,.14);
  margin:3em 0;
}
.article h2{
  font-family:var(--f-min); font-weight:600; font-size:23px; letter-spacing:.05em; color:var(--ink);
  line-height:1.6; margin:2.6em 0 .9em;
  padding-left:16px; border-left:4px solid var(--c-teal);
}
.article h3{
  font-size:16px; font-weight:700; line-height:1.75; color:var(--c-indigo);
  margin:2em 0 .5em;
}
.article h3 + h3{ margin-top:.2em; font-weight:500; color:var(--mute); font-size:13.5px; }
.article ul{ margin:0 0 1.8em; padding-left:2px; }
.article ul li{
  position:relative; padding-left:22px; margin-bottom:.55em;
  font-size:14.6px; line-height:2; color:var(--body);
}
.article ul li::before{
  content:""; position:absolute; left:2px; top:.85em;
  width:7px; height:7px; border-radius:50%; background:var(--c-teal);
}
/* 画像：WordPress の alignnone / aligncenter / alignleft / alignright と
   キャプション（.wp-caption）をそのまま受ける。小さい画像は引き伸ばさない */
/* 入れ子のリスト（条文の号・細目） */
.article ul ul{ margin:.7em 0 .3em; padding-left:6px; }
.article ul ul li{ font-size:14px; color:var(--ink-2); }
.article ul ul li::before{
  width:5px; height:5px; background:none;
  border:1px solid var(--c-teal); top:.9em;
}
.article ul ul ul li::before{
  width:8px; height:1px; border:0; border-radius:0;
  background:rgba(31,52,104,.35); top:1.1em;
}
.article__end{ margin-top:2.6em; text-align:right; font-size:14px; color:var(--mute); }

.article figure{ margin:2em 0; }
.article img{
  max-width:100%; height:auto; display:block;
  margin:1.8em auto; border-radius:3px;
}
.article img.alignleft{ margin:.4em 1.8em 1.4em 0; float:left; }
.article img.alignright{ margin:.4em 0 1.4em 1.8em; float:right; }
.article img.aligncenter,
.article img.alignnone{ float:none; margin-inline:auto; }
.article .wp-caption{ max-width:100%; margin:2em auto; }
.article .wp-caption img{ margin:0 auto; }
.article .wp-caption-text,
.article figcaption{ margin-top:10px; font-size:12px; line-height:1.8; color:var(--mute); text-align:center; }
.article::after{ content:""; display:block; clear:both; }
.article__note{
  margin-top:2.4em; padding:20px 24px;
  background:rgba(31,52,104,.04); border-radius:3px;
  font-size:13px; line-height:1.95; color:var(--mute);
}

.backlink{
  display:flex; justify-content:center; margin-top:52px;
}
.backlink a{
  display:inline-flex; align-items:center; gap:10px;
  min-width:220px; justify-content:center;
  padding:16px 32px; border-radius:999px;
  font-size:14px; font-weight:700; letter-spacing:.08em; color:var(--ink);
  border:1.5px solid rgba(31,52,104,.28); background:rgba(255,255,255,.6);
  transition:background .3s, border-color .3s, transform .3s;
}
.backlink a::before{ content:"←"; font-family:var(--f-num); font-weight:500; }
.backlink a:hover{ background:#fff; border-color:var(--ink); transform:translateY(-2px); }

/* --- 関連記事 --- */
.related{ margin-top:76px; }
.related__ttl{
  font-family:var(--f-min); font-weight:600; font-size:21px; letter-spacing:.06em; color:var(--ink);
  margin-bottom:8px;
}
.related__sub{
  font-family:var(--f-num); font-size:11px; font-weight:500; letter-spacing:.26em; color:var(--c-teal);
  margin-bottom:22px;
}

/* --- 一覧（記事が増えても崩れない縦リスト） --- */
.newslist{
  background:#fff; border-radius:4px;
  padding:10px 40px 30px;
  position:relative; overflow:hidden;
  box-shadow:0 22px 48px -34px rgba(31,52,104,.5);
}
.newslist::before{
  content:""; position:absolute; left:0; top:0; width:100%; height:4px; background:var(--grad);
}
.newslist__item + .newslist__item{ border-top:1px dashed rgba(31,52,104,.2); }
.newslist__item a{ display:block; padding:26px 4px; transition:color .25s; }
.newslist__meta{ display:flex; align-items:center; gap:14px; margin-bottom:9px; }
.newslist__date{
  font-family:var(--f-num); font-weight:500; font-size:13.5px; letter-spacing:.04em; color:var(--mute);
}
.newslist__cat{
  font-size:11px; font-weight:700; letter-spacing:.06em; line-height:1;
  color:var(--c-blue); background:rgba(43,127,190,.1);
  border-radius:999px; padding:6px 12px; white-space:nowrap;
}
.newslist__ttl{
  font-family:var(--f-min); font-weight:600; font-size:19px; line-height:1.65; letter-spacing:.03em;
  color:var(--ink); transition:color .25s;
}
.newslist__item a:hover .newslist__ttl{ color:var(--c-indigo); text-decoration:underline; text-underline-offset:5px; }
.newslist__lead{
  margin-top:8px; font-size:13.6px; line-height:1.95; color:var(--body);
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}

/* --- ページネーション（WordPress の the_posts_pagination 出力に対応） --- */
.pagination{ margin-top:44px; }
.pagination .nav-links{
  display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:8px;
}
.pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:42px; height:42px; padding:0 12px;
  font-family:var(--f-num); font-weight:500; font-size:14px;
  color:var(--ink); background:rgba(255,255,255,.7);
  border:1px solid rgba(31,52,104,.16); border-radius:999px;
  transition:background .25s, border-color .25s, color .25s, transform .25s;
}
.pagination .page-numbers:hover{ background:#fff; border-color:var(--ink); transform:translateY(-2px); }
.pagination .page-numbers.current{
  color:#fff; background:var(--ink); border-color:var(--ink);
}
.pagination .page-numbers.dots{ border-color:transparent; background:none; }
.pagination .screen-reader-text{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}

/* --- 記事なしの表示 --- */
.empty{
  background:#fff; border-radius:4px; padding:56px 40px; text-align:center;
  box-shadow:0 22px 48px -34px rgba(31,52,104,.5);
}
.empty p{ font-size:15px; line-height:2; color:var(--body); }

/* --- WordPress の管理バー表示中は固定要素を下げる --- */
body.admin-bar .rainbow{ top:32px; }
body.admin-bar .hd{ top:37px; }
body.admin-bar{ scroll-padding-top:108px; }
@media screen and (max-width:782px){
  body.admin-bar .rainbow{ top:46px; }
  body.admin-bar .hd{ top:51px; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1100px){
  /* PC以外は縦並び。左のレールで時間の流れを見せる */
  .hist{ grid-template-columns:1fr; gap:0; padding-left:42px; margin-top:52px; }
  .hist::before{
    left:11px; right:auto; top:10px; bottom:10px;
    width:4px; height:auto;
    background:linear-gradient(180deg,#a9c93c,#37ae8e 34%,#2389bc 67%,#2c4b96);
  }
  .hist__item{ padding-bottom:40px; }
  .hist__item:last-child{ padding-bottom:0; }
  .hist__item + .hist__item::before{ display:none; }
  .hist__head{ height:auto; display:flex; align-items:center; gap:14px; }
  .hist__year{ font-size:40px; }
  .hist__term{ margin-top:0; }
  .hist__dot{
    position:absolute; left:-38px; top:11px;
    width:18px; height:18px; border-radius:50%;
    border:4px solid currentColor; background:#fff;
    box-shadow:0 0 0 5px rgba(243,240,232,.95);
  }
  .hist__ttl{ margin:16px 0 9px; font-size:20px; }
  .hist__desc{ padding-right:0; }
  .act__list{ grid-template-columns:repeat(2,1fr); }
  .lects{ grid-template-columns:repeat(2,1fr); }
  /* 横長カードは1列に。写真と本文の幅が窮屈になるため */
  .lects--row{ grid-template-columns:1fr; }
}

@media (max-width:960px){

  .hd__nav{
    position:fixed; top:73px; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    padding:14px 20px 26px;
    background:rgba(243,240,232,.98);
    backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(31,52,104,.1);
    box-shadow:0 20px 30px -22px rgba(31,52,104,.6);
    transform:translateY(-12px); opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .3s, transform .3s, visibility .3s;
  }
  .hd__nav.is-open{ transform:none; opacity:1; visibility:visible; pointer-events:auto; }
  .hd__nav a{ padding:15px 6px; font-size:15px; border-bottom:1px solid rgba(31,52,104,.08); }
  .hd__cta{ margin-top:16px; text-align:center; border-bottom:0 !important; }
  .hd__burger{ display:block; }

  .cards{ grid-template-columns:repeat(2,1fr); gap:20px; }
  .cards .card:last-child{ grid-column:1 / -1; }
  /* タブレットは2カラムのまま、写真列だけ狭める（縦積みにすると右が大きく空く） */
  .msg{ grid-template-columns:196px 1fr; gap:30px; padding:34px 32px; }
  .msg:nth-child(2){ grid-template-columns:1fr 196px; }
  .msg__photo img{ aspect-ratio:3/4; }
  .msg__name{ font-size:29px; }
}

@media (max-width:860px){
  /* タイムラインを左レールの縦型へ */
  .tl{ max-width:none; padding-left:0; }
  .tl::before{ left:34px; margin-left:0; width:5px; }
  .tl__item{ grid-template-columns:74px 1fr; margin-bottom:18px; }
  .tl__node{
    grid-column:1 !important; justify-self:start;
    width:68px; height:68px; border-width:4px;
  }
  .tl__node small{ font-size:9px; margin-bottom:1px; }
  .tl__node b{ font-size:23px; }
  .tl__node i{ font-size:9px; margin-top:1px; }
  .tl__item:nth-child(odd) .tl__body,
  .tl__item:nth-child(even) .tl__body{
    grid-column:2; text-align:left; margin:0 0 0 14px;
  }
  .tl__item:nth-child(odd) .tl__ttl{ justify-content:flex-start; }
  .tl__body::before{ display:none; }
  .tl__body{ padding:20px 22px; }
  .tl__date{ font-size:16.5px; }
  .tl__ttl{ font-size:17px; }
  .is-event .tl__ttl,.is-ob .tl__ttl{ font-size:15.5px; }
}

@media (max-width:720px){
  body{ font-size:15px; }
  .pc{ display:none; }
  .sp{ display:inline; }
  .in,.hero__in{ width:calc(100% - 36px); }

  .hero{ padding:140px 0 90px; }
  .hero::after{ display:none; }
  .hero__num{ font-size:200px; right:-12px; top:80px; transform:none; }
  .hero__title{ line-height:1.5; margin-bottom:26px; }
  .hero__lead{ font-size:14px; margin-bottom:36px; }
  .hero__act{ flex-direction:column; align-items:stretch; gap:14px; }
  .hero__deadline{ justify-content:center; padding-left:0; margin-top:2px; }
  .hero__deadline::before{ display:none; }
  .btn{ min-width:0; width:100%; padding:18px 24px; font-size:14.5px; }
  .btn--lg{ min-width:0; width:100%; padding:20px 24px; font-size:15.5px; }

  .sec--news{ padding:52px 0 48px; }
  .news__box{ padding:8px 22px 22px; margin-top:26px; }
  .news__item a{
    grid-template-columns:auto 1fr; gap:7px 12px;
    padding:17px 0;
  }
  .news__text{ grid-column:1 / -1; font-size:14px; }
  .news__more{ font-size:12.5px; margin-top:18px; }

  .pagehead{ padding:118px 0 44px; }
  .lower{ padding:52px 0 80px; }
  .lower__in{ width:calc(100% - 36px); }
  .article{ padding:34px 24px 38px; }
  .article p{ font-size:14.5px; }
  .article h2{ font-size:20px; padding-left:13px; }
  .newslist{ padding:8px 22px 22px; }
  .newslist__item a{ padding:22px 0; }
  .newslist__ttl{ font-size:17px; }
  .related{ margin-top:56px; }

  .sec{ padding:74px 0; }
  .sec__text{ font-size:14px; }
  .card{ padding:34px 26px 32px; }
  .msg,
  .msg:nth-child(2){ grid-template-columns:1fr; gap:24px; padding:32px 26px; }
  .msg:nth-child(2) .msg__photo{ order:0; }
  .msg__photo{ max-width:190px; }
  .msg__photo img{ aspect-ratio:1/1; }
  .msg__name{ font-size:27px; }
  .msg__name span{ display:block; margin:6px 0 0; }

  /* スマホは同じ縦並びのまま、レールと文字を一段小さく */
  .hist{ padding-left:34px; margin-top:44px; }
  .hist::before{ left:8px; width:3px; }
  .hist__item{ padding-bottom:32px; }
  .hist__year{ font-size:34px; }
  .hist__dot{ left:-32px; top:9px; width:16px; height:16px; border-width:3px; }
  .hist__ttl{ margin:14px 0 8px; font-size:19px; }
  .act{ margin-top:72px; }
  .act__list{ grid-template-columns:1fr; }
  .more{ margin-top:56px; padding:32px 26px; }
  .cards{ grid-template-columns:1fr; }
  .cards .card:last-child{ grid-column:auto; }
  .lects,.lects--row{ grid-template-columns:1fr; }
  /* スマホは横長をやめて、特別講師と同じ縦積みに揃える */
  .lects--row .lect{ display:block; padding-bottom:30px; }
  .lects--row .lect__photo img{ aspect-ratio:4/3; object-position:center 22%; }
  .lects--row .lect__name{ margin:26px 26px 8px; font-size:24px; }
  .lects--row .lect__role{ margin:0 26px 16px; font-size:12px; }
  .lects--row .lect__theme{ margin:0 26px 16px; font-size:14px; padding:14px 0; }
  .lects--row .lect__prof{ margin:0 26px; font-size:12.6px; }
  .grp{ margin:44px 0 22px; font-size:12.5px; }
  .lect__photo img{ aspect-ratio:4/3; object-position:center 22%; }

  .out__row{ grid-template-columns:1fr; }
  .out__row dt{ padding:16px 22px 12px; }
  .out__row dd{ padding:12px 22px 24px; font-size:14px; }
  .price{ font-size:25px; }

  .entry{ padding:80px 0 100px; }

  .ft{ padding-bottom:110px; }
  .fixcta{ display:flex; }
}