/* =========================================================================
   マネジメントドライブ LP — md-lp-v2.css
   Claude Design 実装指示書 ＋ ボタン実装指示（差分）に準拠
   -------------------------------------------------------------------------
   【ブロック1】基礎 / ボタン / ヘッダー / FV / ABOUT
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. デザイントークン
   ------------------------------------------------------------------------- */
:root{
  /* 色：この5つ以外を使わない */
  --navy:#16243F;          /* 本文の文字色・面・表ヘッダー・バッジ */
  --paper:#FFFFFF;         /* カード・セクション背景 */
  --surface:#F4F6FA;       /* セクション背景の交互・表のマネドラ列・入力欄 */
  --line:#DCE3ED;          /* 1px の枠線・区切り線 */
  --brand:#F20153;         /* アクセント。面積は全体の2〜4%まで */
  --brand-deep:#D9014A;    /* ボタンの hover / active */
  --brand-pale:#FEF0F5;    /* 比較表のマネドラ列。赤を6%だけ白に混ぜた色 */

  /* 書体 */
  --sans:"IBM Plex Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN",sans-serif;
  --mono:"IBM Plex Mono","SF Mono",ui-monospace,monospace;

  /* レイアウト */
  /* コンテンツ枠。1440px までは 1200px 固定。そこから連続的に広がり、2400px で 1600px に到達する。
     段階的に切り替えると、ウィンドウ幅を変えたときに左端が飛ぶため、ここは連続にする。
     文字サイズは 1600px / 2000px の段階式のまま（連続にすると見出しの折り返しが読めなくなるため）。 */
  --wrap:clamp(1200px, calc(100vw * 5 / 12 + 600px), 1600px);
  --gut:40px;              /* コンテンツ左右の余白（SPで20pxに） */
  --sec-top:72px;
  --sec-bottom:80px;

  /* 強調の下線ハイライト */
  --mark:linear-gradient(transparent 62%,rgba(242,1,83,.30) 62%);
}

@media(max-width:768px){
  :root{--gut:20px;--sec-top:48px;--sec-bottom:52px}
}

/* -------------------------------------------------------------------------
   2. リセットと土台
   ------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
body.md-lp{
  margin:0;
  font-family:var(--sans);font-weight:500;font-size:16px;line-height:1.95;
  color:var(--navy);background:var(--paper);
  -webkit-font-smoothing:antialiased;font-feature-settings:"palt" 1;
}
.md-lp h1,.md-lp h2,.md-lp h3,.md-lp h4,.md-lp p,.md-lp ul,.md-lp ol,.md-lp figure,.md-lp table{margin:0}
/* 親テーマやWordPress本体が出す要素に黒が残ることがあるので、
   md-lp の中は明示的に紺（--navy）を受け継ぐようにします。
   色を付けたい箇所は個別の指定が後から上書きします。 */
.md-lp h1,.md-lp h2,.md-lp h3,.md-lp h4,.md-lp h5,.md-lp h6,
.md-lp p,.md-lp li,.md-lp dt,.md-lp dd,.md-lp th,.md-lp td,
.md-lp figcaption,.md-lp blockquote,.md-lp label,.md-lp span,
.md-lp strong,.md-lp b,.md-lp em,.md-lp small,.md-lp time,
.md-lp summary,.md-lp cite,.md-lp code{color:inherit}
.md-lp ul,.md-lp ol{padding:0;list-style:none}
.md-lp a{color:inherit;text-decoration:none}
.md-lp img{display:block;max-width:100%;height:auto}
.md-lp :focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.md-lp .is-navy :focus-visible{outline-color:#fff}

/* 読み上げ専用 */
.md-lp .sr-only,.md-lp .visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* 旧デザインの巨大背景英字は使わない */
.md-lp .bigtype{display:none!important}

/* -------------------------------------------------------------------------
   3. レイアウト部品
   ------------------------------------------------------------------------- */
.md-lp .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);position:relative}
.md-lp .section{padding-block:var(--sec-top) var(--sec-bottom);position:relative}

/* 背景のリズム：白 → 淡 → 白 → 淡。濃紺は FV / WHO IT'S FOR / DOWNLOAD */
.md-lp #difference,
.md-lp #members,
.md-lp #flow,
.md-lp #faq,
.md-lp #events{background:var(--paper)}

/* #features は濃紺のフルブリード（block2 の .features--navy で指定） */
.md-lp #program,
.md-lp #cases{background:var(--surface);border-top:1px solid var(--line)}

.md-lp #features,
.md-lp #recommend,
.md-lp #download{background:var(--navy);color:#fff}

/* セクション見出しまわり */
.md-lp .sec-eyebrow{
  display:flex;align-items:center;gap:14px;
  font-family:var(--mono);font-size:11.5px;font-weight:500;line-height:1;
  letter-spacing:.2em;color:var(--navy);
}
.md-lp .sec-eyebrow span{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:26px;height:26px;background:var(--brand);color:#fff;
  font-size:11px;font-weight:600;letter-spacing:0;
}
.md-lp .sec-eyebrow::after{content:"";flex:1;height:1px;background:var(--line)}
/* 番号バッジを使わず、短い罫を頭に置くタイプ（資料ダウンロードで使用） */
.md-lp .sec-eyebrow--plain::before{
  content:"";flex:none;width:26px;height:2px;background:var(--brand);
}
.md-lp .sec-eyebrow--plain::after{display:none}
.md-lp #recommend .sec-eyebrow,
.md-lp #download .sec-eyebrow{color:#fff}
.md-lp #recommend .sec-eyebrow::after,
.md-lp #download .sec-eyebrow::after{background:rgba(255,255,255,.28)}

.md-lp .sec-sup{margin-top:34px;font-size:16px;font-weight:600;line-height:1}
.md-lp .sec-title{
  margin-top:32px;font-size:32px;font-weight:700;line-height:1.5;letter-spacing:-.015em;
}
.md-lp .sec-title em{font-style:normal;color:var(--brand)}
/* リード文。1行が長すぎると読みにくいので、和文で35〜40字に収まる幅にします。 */
.md-lp .sec-sub{margin-top:18px;max-width:720px;font-size:16px;line-height:1.95}
.md-lp .mark{background:var(--mark)}
/* 本文が500なので、太字は太さだけでは差がつきにくい。
   文字の下3分の1に薄い赤を敷いて補います（3つの特徴などで既に使っている形）。 */
.md-lp b,.md-lp strong{font-weight:700;background:var(--mark)}

@media(max-width:768px){
  .md-lp .sec-title{margin-top:26px;font-size:24px;line-height:1.55;letter-spacing:-.01em}
  .md-lp .sec-sub{margin-top:14px;line-height:1.9}
  .md-lp .sec-sup{margin-top:28px}
}

/* -------------------------------------------------------------------------
   4. ボタン（ボタン実装指示 準拠）
   すべてピル型。実高48px以上。hover / active / focus を全種に持たせる。
   ------------------------------------------------------------------------- */
.md-lp .mdbtn{
  display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:999px;cursor:pointer;
  font-family:var(--sans);line-height:1;white-space:nowrap;text-decoration:none;
  transition:background-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.md-lp .mdbtn > span{line-height:1}
/* 丸アイコン。動かすのは中の矢印だけ（丸ごと動かすと位置がズレるため） */
.md-lp .mdbtn__ic{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  border-radius:999px;font-style:normal;line-height:1;overflow:hidden;
  transition:background-color .2s ease,color .2s ease;
}
/* 矢印はHTML側の →。動かすのは中の矢印だけ（丸ごと動かすと位置がズレる） */
.md-lp .mdbtn__ic > span,
.md-lp .mdbtn__ic{transition:background-color .2s ease,color .2s ease,transform .2s ease}

/* 4-1. Primary CTA */
.md-lp .mdbtn--fill{
  gap:14px;padding:12px 14px 12px 28px;
  background:var(--brand);color:#fff;
}
.md-lp .mdbtn--fill > span{font-size:17px;font-weight:700;color:#fff}
.md-lp .mdbtn--fill .mdbtn__ic{width:34px;height:34px;background:#fff;color:var(--brand);font-size:16px}
.md-lp .mdbtn--fill:hover .mdbtn__ic{background:var(--navy);color:#fff}
.md-lp .mdbtn--fill:hover .mdbtn__ic{transform:translateX(3px)}
.md-lp .mdbtn--fill:active{transform:translateY(1px);background:var(--brand-deep)}

/* 4-2. Secondary（濃紺の上） */
.md-lp .mdbtn--ghost{
  padding:20px 28px;background:transparent;color:#fff;
  border:1px solid #fff;
}
.md-lp .mdbtn--ghost > span{font-size:17px;font-weight:700;color:#fff}
.md-lp .mdbtn--ghost:hover{background:rgba(255,255,255,.12);color:#fff}
.md-lp .mdbtn--ghost:active{background:rgba(255,255,255,.2);transform:translateY(1px)}

/* 4-3. ヘッダーの小さいCTA */
/* 指示書は padding:13px 22px（実高42px）だが、全ボタンの最小48pxに合わせる */
.md-lp .mdbtn--head{padding:16px 22px;background:var(--brand);color:#fff;font-size:16px;font-weight:600}
.md-lp .mdbtn--head:hover{background:var(--brand-deep);color:#fff}
.md-lp .mdbtn--head:active{transform:translateY(1px)}

/* 4-4. 各セクション末尾のCTA行 */
.md-lp .ctarow{display:flex;justify-content:center;margin-top:40px}

/* 4-5. タッチ端末では hover を当てない（色の居座りを防ぐ） */
@media(hover:none){
  .md-lp .mdbtn:hover{background-color:initial}
  .md-lp .mdbtn--fill:hover{background:var(--brand)}
  .md-lp .mdbtn--fill:hover .mdbtn__ic{background:#fff;color:var(--brand)}
  .md-lp .mdbtn--fill:hover .mdbtn__ic{transform:none}
  .md-lp .mdbtn--ghost:hover{background:transparent}
  .md-lp .mdbtn--head:hover{background:var(--brand)}
}
@media(prefers-reduced-motion:reduce){
  .md-lp .mdbtn,.md-lp .mdbtn__ic{transition:none}
  .md-lp .mdbtn:active{transform:none}
  .md-lp .mdbtn--fill:hover .mdbtn__ic{transform:none}
}

/* 4-6. SP：Primary・Secondary は全幅、縦積み */
@media(max-width:768px){
  .md-lp .mdbtn--fill{width:100%;gap:12px;padding:12px 0;justify-content:center}
  /* Primary は丸アイコン34pxで実高58px。Secondary も同じ高さに揃える
     （指示書の padding:16px 0 だと51pxでPrimaryと7pxずれるため） */
  .md-lp .mdbtn--ghost{width:100%;padding:20px 0}
  .md-lp .ctarow{margin-top:32px}
}

/* -------------------------------------------------------------------------
   5. ヘッダー
   ------------------------------------------------------------------------- */
.md-lp .header{position:sticky;top:0;z-index:50;background:var(--navy)}
/* WordPressにログイン中は上に管理バーが出るので、その分だけ下げて固定する。
   管理バーはPCで32px固定、スマホ（782px以下）では46pxでスクロールと一緒に流れる。
   スマホで32pxを残すと、管理バーが流れたあとに隙間ができるので 0 に戻す。 */
/* WordPressにログイン中は管理バーの下に固定する。
   管理バーは 782px以下で46px、600px以下では固定されなくなる（スクロールで消える）ので、
   その幅では top:0 に戻す。戻さないと、管理バーが消えたあとに
   ヘッダーの上に隙間が空いたまま固定されて見える。 */
body.admin-bar.md-lp .header{top:32px}
@media(max-width:782px){body.admin-bar.md-lp .header{top:46px}}
@media(max-width:600px){body.admin-bar.md-lp .header{top:0}}
@media(max-width:782px){
  body.admin-bar.md-lp .header{top:0}
}
.md-lp .header__in{
  max-width:var(--wrap);margin-inline:auto;padding:12px var(--gut);
  display:flex;align-items:center;gap:32px;
}
.md-lp .logo--wide{flex:none;line-height:0}
.md-lp .logo--wide img{height:34px;width:auto}
.md-lp .nav{display:flex;gap:24px;white-space:nowrap}
.md-lp .nav a{font-size:16px;font-weight:500;color:#fff}
.md-lp .nav a:hover{color:var(--brand)}
.md-lp .header .mdbtn--head{margin-left:auto;flex:none}

/* ハンバーガー */
.md-lp .navtoggle__input{position:absolute;opacity:0;width:0;height:0}
.md-lp .navtoggle{
  display:none;margin-left:auto;width:44px;height:44px;flex:none;cursor:pointer;
  flex-direction:column;align-items:center;justify-content:center;gap:6px;
}
.md-lp .navtoggle span{display:block;width:24px;height:2px;background:#fff}
.md-lp .navtoggle__sr{
  position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
}
.md-lp .navdrawer{display:none;background:var(--navy);padding:8px var(--gut) 24px}
.md-lp .navdrawer__nav{display:flex;flex-direction:column}
.md-lp .navdrawer__nav a{
  padding:14px 0;font-size:16px;font-weight:500;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.18);
}
.md-lp .navdrawer .mdbtn,.md-lp .navdrawer__btn{margin-top:20px;width:100%}
.md-lp .navtoggle__input:checked ~ .navdrawer{display:block}

@media(max-width:1080px){
  .md-lp .nav{display:none}
  .md-lp .navtoggle{display:flex}
}
@media(max-width:768px){
  .md-lp .header__in{gap:0}
  .md-lp .logo--wide img{height:26px}
  .md-lp .header .mdbtn--head{display:none}
}

/* -------------------------------------------------------------------------
   6. FV
   写真は絶対配置。画像の実寸に高さを引っぱられないようにするため。
   ------------------------------------------------------------------------- */
.md-lp .fv{background:var(--navy);color:#fff;overflow:hidden}
.md-lp .fv__grid{
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  align-items:stretch;min-height:640px;
}
.md-lp .fv__col{padding:88px 40px 90px 0}
.md-lp .fv__inner{width:auto;max-width:none}

.md-lp .fv__label{display:flex;align-items:center;gap:10px}
.md-lp .fv__label-rule{display:block;width:22px;height:2px;background:var(--brand);flex:none}
.md-lp .fv__label-txt{
  font-family:var(--mono);font-size:12px;font-weight:500;line-height:1;
  letter-spacing:.18em;color:#fff;
}

.md-lp .fv__h1{
  margin-top:26px;font-size:60px;font-weight:700;line-height:1.28;
  letter-spacing:-.03em;color:#fff;
}
.md-lp .fv__h1-main{display:block}
.md-lp .fv__k{font-style:normal;color:var(--brand)}
.md-lp .fv__p{color:#fff}
.md-lp .fv__h1-sub{
  display:block;margin-top:18px;
  font-size:25px;font-weight:700;line-height:1.5;letter-spacing:-.01em;color:#fff;
}
.md-lp .fv__lead{margin-top:26px;max-width:480px;font-size:16px;line-height:1.95;color:#fff}
.md-lp .fv__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}

/* 1200px未満は見出しが折り返さないよう画面幅に追随させる */
@media(min-width:769px) and (max-width:1199px){
  .md-lp .fv__h1{font-size:4.6vw}
}

.md-lp .fv__media{position:relative;overflow:hidden}
.md-lp .fv__photo{position:absolute;left:0;width:100%;object-fit:cover;max-width:none}
/* 上に受講者、下に浜岡さん。
   上を大きく取り、まず場の空気が目に入るようにします。
   浜岡さんの写真は引きのカットなので、object-fit:cover でも人物が切れません。 */
/* 上に受講者、下に浜岡さん。
   浜岡さんの写真は頭上の余白を切ってあるので、object-position は上寄せにして
   顔が枠の中に大きく収まるようにします。 */
.md-lp .fv__photo--audience{top:0;height:56%;object-position:center 42%}
.md-lp .fv__photo--speaker{top:56%;height:44%;object-position:center 18%}

/* タブレット幅：文字が窮屈になるので写真側を少し狭める */
@media(min-width:769px) and (max-width:1080px){
  .md-lp .fv__grid{grid-template-columns:minmax(0,1fr) 44%}
  .md-lp .fv__col{padding:64px 28px 66px 0}
  .md-lp .fv__lead{max-width:none}
}

@media(max-width:768px){
  .md-lp .fv__grid{grid-template-columns:1fr;grid-template-rows:auto auto;min-height:0;padding-inline:0}
  .md-lp .fv__col{order:1;padding:36px var(--gut) 0}
  .md-lp .fv__h1{font-size:36px;line-height:1.35}
  .md-lp .fv__h1-sub{margin-top:14px;font-size:20px;line-height:1.55}
  .md-lp .fv__lead{max-width:none;line-height:1.9}
  .md-lp .fv__cta{flex-direction:column;gap:10px;margin-top:26px;max-width:420px}
  /* SPもPCと同じ並び（上に受講者、下に浜岡さん）にして印象を揃えます */
  .md-lp .fv__media{order:2;height:320px;margin:26px var(--gut) 40px}
  .md-lp .fv__photo--audience{top:0;left:0;width:100%;height:56%;object-position:center 42%}
  .md-lp .fv__photo--speaker{top:56%;left:0;width:100%;height:44%;object-position:center 18%}
}

/* -------------------------------------------------------------------------
   7. ABOUT
   写真をフルブリードで敷き、白のベールを重ねた上に見出しを置く。
   下段は白地のテキストブロック。上下2ブロック構成。
   ------------------------------------------------------------------------- */
.md-lp #about{background:#fff;padding-block:0}

/* --- 上段：写真ブロック --- */
.md-lp .about__visual{position:relative;background:#fff;overflow:hidden}
.md-lp .about__bg{
  display:block;width:100%;height:440px;
  object-fit:cover;object-position:50% 34%;max-width:none;
}
/* ベールは左から右へ。左側で文字が読め、右側に写真が残る。 */
.md-lp .about__veil{
  position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(255,255,255,.98) 0%,
    rgba(255,255,255,.96) 40%,
    rgba(255,255,255,.72) 62%,
    rgba(255,255,255,.30) 100%);
}
.md-lp .about__overlay{
  position:absolute;inset:0;
  display:flex;flex-direction:column;justify-content:center;
  padding-block:28px;
}
/* overlay は flex コンテナなので、.wrap の margin-inline:auto が効いて
   ボックスが内容幅に縮み、中央に寄ってしまう。幅を明示して左揃えに保つ。 */
.md-lp .about__overlay > .wrap{width:100%}
/* 写真の上で罫線が伸びると邪魔になるので、eyebrow の線は消す */
.md-lp .sec-eyebrow--noline::after{display:none}

.md-lp .about__kicker{
  margin-top:22px;font-size:16px;font-weight:600;line-height:1.5;color:var(--navy);
}
.md-lp .about__title{
  margin-top:16px;font-size:56px;font-weight:700;line-height:1.28;
  letter-spacing:-.04em;color:var(--navy);
}
.md-lp .about__title em{font-style:normal;color:var(--brand)}

/* --- 下段：テキストブロック --- */
.md-lp .about__text{
  background:#fff;border-top:1px solid var(--line);
  padding-block:52px 68px;
}
.md-lp .about__big{
  margin-top:0;padding-left:16px;border-left:4px solid var(--brand);
  font-size:22px;font-weight:700;line-height:1.5;color:var(--navy);
  white-space:nowrap;
}
.md-lp .about__big em{font-style:normal;color:var(--brand)}
.md-lp .about__lead{
  margin-top:24px;max-width:880px;
  font-size:16px;font-weight:500;line-height:2.0;color:var(--navy);text-wrap:pretty;
}
.md-lp .about__lead b{font-weight:700;background:var(--mark)}

/* 中間幅：見出しが写真の高さを超えないよう段階的に下げる */
@media(max-width:1080px){
  .md-lp .about__title{font-size:44px}
}
@media(min-width:769px) and (max-width:880px){
  .md-lp .about__title{font-size:38px}
  .md-lp .about__big{font-size:20px}
}

@media(max-width:768px){
  .md-lp .about__bg{height:340px;object-position:52% 36%}
  /* 幅が狭いと横グラデでは文字が写真に重なって読めないので、縦グラデに変える */
  .md-lp .about__veil{
    background:linear-gradient(180deg,
      rgba(255,255,255,.30) 0%,
      rgba(255,255,255,.86) 44%,
      rgba(255,255,255,.97) 72%,
      #fff 100%);
  }
  /* 見出しは下端寄せ。写真上部の人物の顔を隠さない。 */
  .md-lp .about__overlay{justify-content:flex-end;padding-block:20px}
  .md-lp .sec-eyebrow--noline span{width:24px;height:24px;font-size:10px}
  .md-lp .about__kicker{margin-top:14px;font-size:16px}
  .md-lp .about__title{margin-top:10px;font-size:30px;line-height:1.4;letter-spacing:-.03em}

  .md-lp .about__text{padding-block:32px 46px}
  .md-lp .about__big{padding-left:14px;font-size:19px;line-height:1.5;white-space:normal}
  .md-lp .about__lead{margin-top:20px;max-width:none;font-size:16px;line-height:1.95}
}
@media(max-width:380px){
  .md-lp .about__title{font-size:27px}
  .md-lp .about__big{font-size:18px}
}

/* =========================================================================
   【ブロック2】FEATURES / DIFFERENCE / PROGRAM
   ========================================================================= */

/* -------------------------------------------------------------------------
   8. FEATURES — 濃紺のフルブリードに白いカードを3枚重ねる
   ページ内で最も目立つ塊にするため、文字も余白も他セクションより大きい。
   ------------------------------------------------------------------------- */
.md-lp .features--navy{background:var(--navy)}
.md-lp .features--navy.section{padding-block:78px 84px}
.md-lp .features--navy .sec-eyebrow{color:#fff}
.md-lp .features--navy .sec-eyebrow::after{background:rgba(255,255,255,.28)}

.md-lp .features__title{
  margin-top:34px;font-size:46px;font-weight:700;line-height:1.4;
  letter-spacing:-.025em;color:#fff;
}
.md-lp .features__title em{font-style:normal;color:var(--brand)}
.md-lp .features__lead{
  margin-top:20px;max-width:820px;
  font-size:17px;font-weight:500;line-height:1.9;color:#fff;text-wrap:pretty;
}

.md-lp .feat3{display:flex;flex-direction:column;gap:20px;margin-top:44px}

/* カードは角丸なし・枠なし・影なし。濃紺の地に白い面だけで見せる。
   min-height は付けない（説明文が短いカードで上に余白が出るため）。 */
.md-lp .fcard{
  background:var(--paper);padding:36px 40px 40px;
  display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:44px;
  align-items:end;   /* イラストの下端を説明文の最終行に合わせる */
  border:0;border-radius:0;box-shadow:none;
}
.md-lp .fcard__body{min-width:0}
/* 番号と FEATURE ラベル。番号が視線の起点なので大きく取る。 */
.md-lp .fcard__n{
  display:flex;align-items:baseline;gap:16px;margin:0;
  background:none;padding:0;letter-spacing:normal;
}
.md-lp .fcard__no{
  font-family:var(--sans);font-size:68px;font-weight:700;line-height:.85;
  letter-spacing:-.05em;color:var(--brand);
}
.md-lp .fcard__lb{
  font-family:var(--mono);font-size:11px;font-weight:500;line-height:1;
  letter-spacing:.2em;color:var(--navy);
}
.md-lp .fcard__body h3{
  margin-top:22px;font-size:32px;font-weight:700;line-height:1.45;
  letter-spacing:-.02em;color:var(--navy);text-wrap:pretty;
}
.md-lp .fcard__d{
  margin-top:18px;font-size:17px;font-weight:500;line-height:1.95;
  color:var(--navy);text-wrap:pretty;
}
/* 結論部分は太字＋赤の下線ハイライト */
.md-lp .fcard__d b{font-weight:700;background:var(--mark)}

/* イラストは右列300px固定。拡大しない（元画像が横長で間延びするため）。 */
.md-lp .fcard__fig{margin:0;min-width:0}
.md-lp .fcard__fig img{display:block;width:100%;height:190px;object-fit:contain}

.md-lp .features--navy .ctarow{margin-top:40px}

/* 中間幅：イラストの列を少し詰める */
@media(min-width:769px) and (max-width:1080px){
  .md-lp .fcard{grid-template-columns:minmax(0,1fr) 240px;gap:32px;padding:30px 30px 34px}
  .md-lp .features__title{font-size:38px}
  .md-lp .fcard__body h3{font-size:27px}
}

@media(max-width:768px){
  /* SP：1列。番号 → 見出し → 説明文 → イラストの順。
     イラストはカードの一番下に置く（上に置くと番号と見出しの誘導が弱まる）。 */
  .md-lp .features--navy.section{padding-block:48px 52px}
  .md-lp .features--navy .sec-eyebrow span{width:24px;height:24px;font-size:10px}
  .md-lp .features__title{margin-top:26px;font-size:30px;line-height:1.45;letter-spacing:-.02em}
  .md-lp .features__lead{margin-top:16px;max-width:none;font-size:16px;line-height:1.9}

  .md-lp .feat3{gap:14px;margin-top:30px}
  .md-lp .fcard{grid-template-columns:1fr;gap:0;padding:24px 20px 28px}
  .md-lp .fcard__no{font-size:48px}
  .md-lp .fcard__body h3{margin-top:16px;font-size:22px;line-height:1.5;letter-spacing:-.01em}
  .md-lp .fcard__d{margin-top:14px;font-size:16px;line-height:1.9}
  .md-lp .fcard__fig{margin-top:24px}
  .md-lp .fcard__fig img{width:100%;height:200px}
  .md-lp .features--navy .ctarow{margin-top:26px}
}

/* -------------------------------------------------------------------------
   9. DIFFERENCE — 3つの壁は階段型（下端を揃えて段差をつける）
   ------------------------------------------------------------------------- */
.md-lp .walls .sec-title{margin-top:20px;max-width:940px;font-size:34px;line-height:1.55}
.md-lp .walls .sec-sub{margin-top:24px;max-width:940px}

.md-lp .wallgrid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;margin-top:44px;align-items:end;
}
/* 縦書きの担い手列はSPだけで使う */
.md-lp .wallgrid__v,
.md-lp .wallgrid__vmd{display:none}
.md-lp .wallcard{
  background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--navy);
  padding:24px;min-height:210px;
}
/* 段差は60pxずつ。指示書は160/220/280だが、実際の本文が208px必要で
   1枚目と2枚目の差が12pxしか出ず階段に見えないため、起点を210pxに上げている */
.md-lp .wallcard--2{min-height:270px}
.md-lp .wallcard--3{min-height:330px}
.md-lp .wallcard__ic{display:none}   /* 図の情報量を落とすため非表示 */
.md-lp .wallcard__n{
  font-family:var(--mono);font-size:12px;font-weight:500;line-height:1;letter-spacing:.16em;
}
.md-lp .wallcard h3{margin-top:14px;font-size:22px;font-weight:700;line-height:1.4}
.md-lp .wallcard > p:not(.wallcard__n){margin-top:12px;font-size:16px;line-height:1.8}

/* 各カード内の「この壁をカバーするのは」
   PCでは下の帯（.cover）が同じ情報を持つので隠し、カードを階段型に保つ。
   SPでは逆に帯をやめてカード内のチップを見せる（デザイン指示どおり）。 */
.md-lp .wallcov{display:none;margin-top:18px}
.md-lp .wallcov__lb{font-size:14px;font-weight:600;line-height:1}
.md-lp .wallcov__chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.md-lp .wallcov__chip{
  display:inline-block;padding:6px 10px;font-size:14px;font-weight:600;line-height:1;
  border:1px solid var(--line);background:var(--paper);
}
.md-lp .wallcov__chip--md{background:var(--navy);color:#fff;border-color:var(--navy)}

/* カバー範囲の帯：一般研修は1列ぶん、マネドラは3列すべて */
.md-lp .cover{margin-top:24px}
.md-lp .cover__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.md-lp .cover__row + .cover__row{margin-top:10px}
.md-lp .cover__seg{
  padding:14px 18px;font-size:16px;font-weight:600;line-height:1.5;text-align:center;
}
.md-lp .cover__seg--gen{background:var(--paper);border:1px solid var(--navy)}
.md-lp .cover__seg--none{
  grid-column:span 2;background:var(--surface);border:1px dashed var(--navy);
}
.md-lp .cover__seg--md{grid-column:1 / -1;background:var(--brand);color:#fff}
.md-lp .cover__scope{
  display:block;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.14em;margin-bottom:6px;opacity:.8;
}

/* 比較表：ヘッダーのマネドラ列だけ濃紺。赤は使わない */
.md-lp .cmptable{
  width:100%;margin-top:44px;
  border-collapse:collapse;border-spacing:0;border:1px solid var(--line);
}
.md-lp .cmptable tr,
.md-lp .cmptable tbody tr:nth-child(odd),
.md-lp .cmptable tbody tr:nth-child(even){background:transparent}
.md-lp .cmptable th,.md-lp .cmptable td{
  padding:16px 20px;
  border:0;border-bottom:1px solid var(--line);border-right:1px solid var(--line);
  font-size:16px;line-height:1.7;text-align:left;vertical-align:top;color:var(--navy);
}
.md-lp .cmptable thead th{background:var(--surface);font-weight:600}
.md-lp .cmptable thead th:last-child{background:var(--brand);color:#fff}
.md-lp .cmptable tbody th{font-weight:600;background:var(--paper)}
/* 一般的な管理職研修の列は全行とも白。
   親テーマ側が td に交互の背景（ゼブラ）を当ててくるので、明示して打ち消す。 */
.md-lp .cmptable tbody td,
.md-lp .cmptable tbody tr:nth-child(odd) td,
.md-lp .cmptable tbody tr:nth-child(even) td{background:var(--paper) !important;font-weight:500}
.md-lp .cmptable tbody td:last-child,
.md-lp .cmptable tbody tr:nth-child(odd) td:last-child,
.md-lp .cmptable tbody tr:nth-child(even) td:last-child{background:var(--brand-pale) !important;font-weight:600}
.md-lp .cmptable th:last-child,.md-lp .cmptable td:last-child{border-right:0}

/* 行のマウスオーバーで色が変わらないようにする（親テーマ側の指定を打ち消す）。
   inherit で打ち消すと、背景色を持つマネドラ列が hover で透明になってしまうため、
   通常時とまったく同じ値を明示している。 */
.md-lp .cmptable tr:hover,
.md-lp .cmptable thead tr:hover{background:transparent !important}
.md-lp .cmptable thead tr:hover th{background:var(--surface) !important}
.md-lp .cmptable thead tr:hover th:last-child{background:var(--brand) !important}
.md-lp .cmptable tbody tr:hover th{background:var(--paper) !important}
.md-lp .cmptable tbody tr:hover td{background:var(--paper) !important}
.md-lp .cmptable tbody tr:hover td:last-child{background:var(--brand-pale) !important}
/* 「最後の行の罫線を消す」は tbody だけに効かせる。
   thead の tr も thead の中では最後の行なので、限定しないと見出し行の罫線まで消える。 */
.md-lp .cmptable tbody tr:last-child th,.md-lp .cmptable tbody tr:last-child td{border-bottom:0}

@media(max-width:768px){
  .md-lp .walls .sec-title{font-size:24px;line-height:1.6}
  .md-lp .walls .sec-sub{margin-top:14px}
  /* 段差をやめて縦3枚 */
  .md-lp .wallgrid{grid-template-columns:1fr;gap:14px;margin-top:28px}
  .md-lp .wallcard,
  .md-lp .wallcard--2,
  .md-lp .wallcard--3{min-height:0;padding:16px;border-top-width:4px}
  .md-lp .wallcard h3{margin-top:10px;font-size:20px}
  .md-lp .wallcard > p:not(.wallcard__n){margin-top:10px}
  .md-lp .wallcard h3{font-size:19px}
  /* SP：左に担い手の列を2本立て、右にカードを3行並べる
     1列目は WALL01 が紺ベタ、WALL02・03 が破線枠。
     2列目（赤）は3行ぶち抜きでマネドラの守備範囲を示します。 */
  .md-lp .wallgrid{
    grid-template-columns:56px 40px minmax(0,1fr);gap:8px;margin-top:28px;align-items:stretch;
  }
  .md-lp .wallgrid__v,
  .md-lp .wallgrid__vmd{
    display:flex;align-items:center;justify-content:center;padding:8px 0;margin:0;grid-column:1;
  }
  .md-lp .wallgrid__v span,
  .md-lp .wallgrid__vmd span{
    writing-mode:vertical-rl;font-size:14px;font-weight:700;line-height:1.35;
  }
  .md-lp .wallgrid__v--gen{grid-row:1;background:var(--navy)}
  .md-lp .wallgrid__v--gen span{color:#fff}
  .md-lp .wallgrid__v--none1{grid-row:2}
  .md-lp .wallgrid__v--none2{grid-row:3}
  .md-lp .wallgrid__v--none1,
  .md-lp .wallgrid__v--none2{border:1px dashed var(--navy);background:var(--paper)}
  .md-lp .wallgrid__v--none1 span,
  .md-lp .wallgrid__v--none2 span{color:var(--navy);font-size:13px}
  .md-lp .wallgrid__vmd{grid-row:1 / span 3;grid-column:2;background:var(--brand)}
  .md-lp .wallgrid__vmd span{color:#fff}
  .md-lp .wallcard{grid-column:3}
  .md-lp .wallcard--1{grid-row:1}
  .md-lp .wallcard--2{grid-row:2}
  .md-lp .wallcard--3{grid-row:3}
  /* 担い手は左の列で示すので、カード内のチップと下の帯は使わない */
  .md-lp .wallcov{display:none}
  .md-lp .cover{display:none}

  /* 比較表：横スクロールにせず、項目ごとに1ブロックで縦に積む */
  .md-lp .cmptable{border:0;margin-top:28px}
  .md-lp .cmptable thead{display:none}
  .md-lp .cmptable tbody,.md-lp .cmptable tr{display:block}
  .md-lp .cmptable tr{border:1px solid var(--line);margin-bottom:14px}
  .md-lp .cmptable th,.md-lp .cmptable td{
    display:block;border-right:0;padding:12px 16px;
  }
  /* スマホでは項目セルの背景が PC と違う（淡背景）ので、hover の打ち消しもここで合わせる */
  .md-lp .cmptable tbody th,
  .md-lp .cmptable tbody tr:hover th{
    background:var(--surface) !important;border-bottom:1px solid var(--line);
    font-size:16px;font-weight:600;line-height:1.5;
  }
  .md-lp .cmptable tbody td{border-bottom:1px solid var(--line)}
  .md-lp .cmptable tbody td::before{
    content:attr(data-label);display:block;margin-bottom:8px;
    font-size:16px;font-weight:500;line-height:1.5;
  }
  /* マネドラ側は淡背景＋左に赤4px罫で差をつける */
  .md-lp .cmptable tbody td:last-child,
  .md-lp .cmptable tbody tr:hover td:last-child{
    background:var(--brand-pale) !important;border-left:4px solid var(--brand);border-bottom:0;font-weight:600;
  }
  .md-lp .cmptable tr:last-child{margin-bottom:0}
}

/* -------------------------------------------------------------------------
   10. PROGRAM
   ------------------------------------------------------------------------- */
/* 見出し・本文を左、写真を右に。本文は写真の手前で折り返します。 */
.md-lp .prog__top{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:44px;align-items:start;
}
.md-lp .prog__hd{margin-top:18px;font-size:22px;font-weight:700;line-height:1.6}
.md-lp .prog__lead{margin-top:18px;max-width:none;font-size:16px;line-height:1.95}
/* 写真は見出しの行から始める。透過50%で背景になじませます。 */
.md-lp .prog__photo{
  margin-top:56px;width:100%;height:347px;
  object-fit:cover;object-position:center 45%;opacity:.5;
}

/* 進行図（SVG）。1440pxで1単位＝1pxになるviewBoxをそのまま使う */
.md-lp .progfig{
  margin-top:36px;background:var(--paper);border:1px solid var(--line);padding:28px;
}
.md-lp .progfig__t{font-size:16px;font-weight:600;line-height:1}
.md-lp .progfig__row{
  display:grid;grid-template-columns:120px repeat(6,minmax(0,1fr)) 140px;
  grid-template-rows:auto auto;gap:8px;margin-top:22px;align-items:stretch;
}
.md-lp .progfig__cell{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:14px 8px;text-align:center;
}
.md-lp .progfig__n{font-size:14px;font-weight:600;line-height:1.5}
.md-lp .progfig__s{margin-top:6px;font-size:12px;font-weight:500;line-height:1}
.md-lp .progfig__cell--kick{border:1px dashed var(--navy)}
.md-lp .progfig__cell--day{background:var(--navy);color:#fff}
.md-lp .progfig__cell--day .progfig__n{line-height:1}
.md-lp .progfig__cell--day .progfig__s{margin-top:8px;font-family:var(--mono)}
.md-lp .progfig__cell--pres{background:var(--brand);color:#fff}
/* PCは1行。キックオフ＋DAY1〜6＋プレゼン大会を横に並べ、
   実践の帯はその下に全幅で敷きます。 */
.md-lp .progfig__days{display:contents}
.md-lp .progfig__band{
  grid-column:1 / -1;grid-row:2;margin-top:8px;padding:14px 8px;text-align:center;
  border:1px solid var(--navy);font-size:16px;font-weight:700;line-height:1.5;
}
.md-lp .progfig__band br{display:none}
.md-lp .progfig__cell--kick{grid-row:1;grid-column:1}
.md-lp .progfig__cell--pres{grid-row:1;grid-column:8}

/* 仕様表
   -----------------------------------------------------------
   罫線はすべて 1px の var(--line) で統一します。
   親テーマや WordPress 本体が入れてくる縞模様・二重線を
   打ち消すため、背景と罫線を明示的に指定しています。 */
.md-lp .progtable{
  width:100%;margin-top:28px;
  border-collapse:collapse;border-spacing:0;
  background:var(--paper);
  border:1px solid var(--line);
}
.md-lp .progtable caption{caption-side:top;text-align:left}
.md-lp .progtable tr,
.md-lp .progtable tbody tr,
.md-lp .progtable tbody tr:nth-child(odd),
.md-lp .progtable tbody tr:nth-child(even){background:transparent}
.md-lp .progtable th,
.md-lp .progtable td{
  padding:16px 20px;
  border:0;border-bottom:1px solid var(--line);
  background:var(--paper);
  font-size:16px;font-weight:500;line-height:1.7;
  text-align:left;vertical-align:top;color:var(--navy);
}
.md-lp .progtable th{
  width:180px;background:var(--surface);font-weight:600;
  border-right:1px solid var(--line);white-space:nowrap;
}
.md-lp .progtable tr:last-child th,
.md-lp .progtable tr:last-child td{border-bottom:0}

.md-lp .proglist li{position:relative;padding-left:18px}
.md-lp .proglist li + li{margin-top:6px}
.md-lp .proglist li::before{
  content:"";position:absolute;left:0;top:.72em;width:6px;height:6px;background:var(--brand);
}

@media(max-width:768px){
  .md-lp .prog__top{grid-template-columns:1fr;gap:22px}
  .md-lp .prog__hd{font-size:19px}
  .md-lp .prog__photo{margin-top:0;height:200px}
  /* SP：キックオフを上に、DAY1〜6を縦に並べ、その右に実践の赤枠を並走させる */
  .md-lp .progfig{padding:18px}
  .md-lp .progfig__row{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:auto auto auto;gap:8px;margin-top:16px;
  }
  .md-lp .progfig__cell--kick{grid-column:1 / -1;grid-row:1;padding:12px 14px}
  .md-lp .progfig__cell--kick .progfig__n{font-size:15px}
  .md-lp .progfig__days{
    display:flex;flex-direction:column;gap:8px;grid-column:1;grid-row:2;
  }
  /* DAY と DAY のあいだに下向きの三角を置く */
  .md-lp .progfig__days .progfig__cell{position:relative;padding:10px 8px}
  .md-lp .progfig__days .progfig__cell + .progfig__cell::before{
    content:"";position:absolute;left:50%;top:-8px;transform:translateX(-50%);
    border-left:5px solid transparent;border-right:5px solid transparent;
    border-top:6px solid var(--navy);
  }
  .md-lp .progfig__band{
    grid-column:2;grid-row:2;order:0;margin:0;padding:14px 10px;
    display:flex;align-items:center;justify-content:center;
    background:#FDEBF1;border:1px solid var(--brand);
    font-size:14px;line-height:1.8;
  }
  .md-lp .progfig__band br{display:inline}
  .md-lp .progfig__cell--pres{grid-column:1 / -1;grid-row:3;padding:12px 14px;position:relative}
  .md-lp .progfig__cell--pres::before{
    content:"";position:absolute;left:25%;top:-8px;transform:translateX(-50%);
    border-left:5px solid transparent;border-right:5px solid transparent;
    border-top:6px solid var(--brand);
  }
  .md-lp .progfig__cell--kick,
  .md-lp .progfig__cell--pres{
    flex-direction:row;justify-content:space-between;align-items:center;text-align:left;
  }
  .md-lp .progfig__cell--kick .progfig__s,
  .md-lp .progfig__cell--pres .progfig__s{margin-top:0}
  .md-lp .progtable{margin-top:22px}
  .md-lp .progtable tr{display:block;border-bottom:1px solid var(--line)}
  .md-lp .progtable tr:last-child{border-bottom:0}
  .md-lp .progtable th,.md-lp .progtable td{display:block;width:auto;border-right:0;padding:12px 16px}
  .md-lp .progtable th{border-bottom:0;white-space:normal}
  .md-lp .progtable td{padding-top:0}
}
/* =========================================================================
   【ブロック3】MEMBER / WHO IT'S FOR / FLOW / FAQ
   ========================================================================= */

/* -------------------------------------------------------------------------
   11. MEMBER — 3名を縦1列。左に写真260px、右に情報。
   ------------------------------------------------------------------------- */
.md-lp .peoplegrid{display:flex;flex-direction:column;gap:20px;margin-top:38px}
.md-lp .pcard{
  display:grid;grid-template-columns:260px minmax(0,1fr);gap:32px;align-items:start;
  border:1px solid var(--line);padding:26px;background:var(--paper);
}
/* 写真は常に全体が見えるように contain。
   背景色を敷くと上下の余白が帯に見えるので敷かない。 */
.md-lp .pcard__ph{
  width:100%;height:280px;object-fit:contain;object-position:center;background:none;
}
.md-lp .pcard__role{
  display:inline-block;padding:6px 12px;background:var(--navy);color:#fff;
  font-size:16px;font-weight:600;line-height:1;
}
.md-lp .pcard__name{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:14px;margin-top:16px;
  font-size:26px;font-weight:700;line-height:1.4;
}
.md-lp .pcard__name small{
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.1em;
}
.md-lp .pcard__title{margin-top:10px;font-size:16px;font-weight:600;line-height:1.7}
.md-lp .pcard__bio{margin-top:16px;font-size:16px;line-height:1.95}

/* 書籍リンク：BOOK ／ 書名 ／ 刊行月 を1行のピルに */
.md-lp .pcard__media{margin-top:20px}
.md-lp .pcard__media a{
  display:inline-flex;align-items:center;gap:12px;
  padding:14px 18px;border:1px solid var(--navy);border-radius:999px;
  transition:background-color .2s ease;
}
.md-lp .pcard__media a:hover{background:var(--surface)}
.md-lp .pcard__media a:active{background:#EDF1F7}
.md-lp .mtag{
  flex:none;font-family:var(--mono);font-size:11px;font-weight:500;line-height:1;
  letter-spacing:.16em;color:var(--brand);
}
.md-lp .mtxt{font-size:16px;font-weight:600;line-height:1.5;white-space:nowrap}
.md-lp .mtxt br{display:none}
.md-lp .mtxt em{font-style:normal;font-weight:500;white-space:nowrap}
.md-lp .mtxt em::before{content:"／";margin:0 .4em;font-weight:500}

/* 1行のピルが入りきらない幅では、角丸8pxの箱にして折り返す。
   ピルのまま折り返すと弧が崩れるため（ボタン実装指示より） */
@media(max-width:1100px){
  .md-lp .pcard__media a{
    display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;
    border-radius:8px;padding:14px 16px;
  }
  .md-lp .mtxt{white-space:normal}
  .md-lp .mtxt em{white-space:normal}
}
@media(max-width:768px){
  .md-lp .peoplegrid{gap:14px;margin-top:26px}
  .md-lp .pcard{grid-template-columns:1fr;gap:18px;padding:20px}
  .md-lp .pcard__ph{height:240px;object-fit:contain}
  .md-lp .pcard__name{font-size:22px;gap:10px}
  /* ピルのままだと折り返して弧が崩れるので、角丸8pxの箱にして縦3段 */
  .md-lp .pcard__media a{
    display:flex;flex-direction:column;align-items:flex-start;gap:6px;
    border-radius:8px;padding:14px 16px;
  }
  .md-lp .mtxt{white-space:normal}
  .md-lp .mtxt em{display:block;white-space:normal}
  .md-lp .mtxt em::before{content:none}
}

/* -------------------------------------------------------------------------
   12. WHO IT'S FOR — 濃紺地に白カード2列2行。番号は付けない。
   ------------------------------------------------------------------------- */
.md-lp #recommend .sec-title{color:#fff}
.md-lp .checks{
  display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:34px;
}
.md-lp .checks li{
  display:block;background:var(--paper);border-top:4px solid var(--brand);
  padding:30px 30px 34px;font-size:19px;line-height:1.85;color:var(--navy);
}
.md-lp .checks .box{display:none}       /* チェックの四角は使わない */
.md-lp .checks__t{display:block}
.md-lp .checks__t b{font-weight:700;background:var(--mark)}

@media(max-width:768px){
  .md-lp .checks{grid-template-columns:1fr;gap:12px;margin-top:26px}
  .md-lp .checks li{padding:22px 20px 24px;font-size:17px}
}

/* -------------------------------------------------------------------------
   13. FLOW — 枠なし。上に2pxの罫、4ステップを縦罫で区切る。
   ------------------------------------------------------------------------- */
.md-lp .flowsteps{
  display:grid;grid-template-columns:1fr 28px 1fr 28px 1fr 28px 1fr;
  align-items:center;margin-top:36px;
}
.md-lp .flowsteps .step{
  border:1px solid var(--line);border-top:3px solid var(--navy);
  padding:24px 22px 26px;background:var(--paper);
}
/* 最後の1枚だけ赤で終点を示す */
.md-lp .flowsteps .step--last{border-color:var(--brand)}
.md-lp .flowsteps .step--last .lb{color:var(--brand)}
.md-lp .flowsteps__arw{text-align:center;font-size:18px;font-weight:400;line-height:1}
.md-lp .flowsteps .step__n{display:block}
.md-lp .flowsteps .lb{
  font-family:var(--mono);font-size:11px;font-weight:500;line-height:1;letter-spacing:.16em;
}
.md-lp .flowsteps .no{
  font-family:var(--mono);font-size:11px;font-weight:500;line-height:1;letter-spacing:.16em;
}
.md-lp .flowsteps .lb::after{content:" "}
.md-lp .flowsteps h4{margin-top:14px;font-size:20px;font-weight:700;line-height:1.5}

@media(max-width:768px){
  /* 横並びをやめ、STEP＋番号＋名称を1行にして4行を罫線で区切る */
  .md-lp .flowsteps{grid-template-columns:1fr;gap:0;margin-top:26px}
  .md-lp .flowsteps .step{
    display:flex;align-items:center;gap:14px;
    padding:16px 18px;border-top-width:1px;border-bottom:0;
  }
  .md-lp .flowsteps .step + .step,
  .md-lp .flowsteps__arw + .step{border-top-width:1px}
  .md-lp .flowsteps .step--last{border-top-width:3px}
  .md-lp .flowsteps .step__n{flex:none;display:flex;gap:6px}
  .md-lp .flowsteps h4{margin-top:0;font-size:17px}
  .md-lp .flowsteps__arw{transform:rotate(90deg);padding:6px 0}
}

/* -------------------------------------------------------------------------
   14. FAQ — 1px罫の中に行を積む。Qは赤、Aはグレーのバッジ。
   ------------------------------------------------------------------------- */
/* 質問リストは2カラム。行の下罫線だけで区切り、カードの枠・影は使わない。
   左右は独立して開閉するので、片方を開いても反対側の行は動かない。 */
.md-lp .faqgrid{
  display:grid;grid-template-columns:1fr 1fr;gap:0 40px;margin-top:30px;align-items:start;
}
.md-lp .faqgrid__col{border-top:2px solid var(--navy)}

.md-lp .faq details{border-bottom:1px solid var(--line);background:transparent}
.md-lp .faq summary{
  display:flex;align-items:center;gap:12px;
  padding:16px 14px;cursor:pointer;list-style:none;
  font-size:16px;font-weight:500;line-height:1.6;color:var(--navy);
  transition:color .2s ease;
}
.md-lp .faq summary::-webkit-details-marker{display:none}
.md-lp .faq summary:hover{color:var(--brand)}
.md-lp .qmark{
  flex:none;font-family:var(--mono);font-size:16px;font-weight:700;line-height:1.5;color:var(--brand);
}
.md-lp .qtxt{flex:1;min-width:0}
/* 開閉アイコン。閉じている間は ＋、開くと赤い − */
.md-lp .faq summary::after{
  content:"＋";flex:none;
  font-family:var(--sans);font-size:18px;font-weight:400;line-height:1;color:var(--navy);
}
.md-lp .faq details[open] > summary::after{content:"−";color:var(--brand)}

/* 開いた行は淡い背景を敷き、質問文を少し大きく・太くする */
.md-lp .faq details[open]{background:var(--surface)}
.md-lp .faq details[open] > summary{
  align-items:flex-start;font-size:17px;font-weight:700;padding-bottom:0;
}
.md-lp .faq details[open] > summary::after{line-height:1.4}
.md-lp .faq__a{
  display:flex;align-items:flex-start;gap:12px;padding:12px 14px 16px;
}
.md-lp .amark{
  flex:none;font-family:var(--mono);font-size:16px;font-weight:700;line-height:1.7;color:var(--navy);
}
.md-lp .atxt{
  flex:1;min-width:0;font-size:16px;font-weight:500;line-height:1.85;color:var(--navy);
  text-wrap:pretty;
}
.md-lp .atxt{font-size:16px;line-height:1.95}

@media(max-width:768px){
  /* SPは1カラムに戻す。上端の2px罫は1本だけにする。 */
  .md-lp .faqgrid{grid-template-columns:1fr;gap:0;margin-top:24px}
  .md-lp .faqgrid__col{border-top:0}
  .md-lp .faqgrid__col:first-child{border-top:2px solid var(--navy)}
  .md-lp .faq summary{padding:18px 4px;gap:10px;min-height:48px;font-size:16px;line-height:1.65}
  .md-lp .faq details[open] > summary{font-size:17px}
  .md-lp .qtxt{font-size:16px}
  .md-lp .faq__a{padding:10px 4px 18px;gap:10px}
}
@media(prefers-reduced-motion:reduce){
  .md-lp .faq summary,.md-lp .pcard__media a{transition:none}
}
/* =========================================================================
   【ブロック4】DOWNLOAD / CASES / EVENTS / フッター / 下層ページ
   CASES と EVENTS は構造を変えず、色と文字だけ新ルールに合わせています。
   ========================================================================= */

/* -------------------------------------------------------------------------
   15. DOWNLOAD — 濃紺地。左に資料内容の白カード、右にフォームの白カード。
   ------------------------------------------------------------------------- */
.md-lp .ctawrap{background:var(--navy);color:#fff}
.md-lp .ctawrap > .cta{max-width:var(--wrap);margin-inline:auto;padding:76px var(--gut) 84px}
.md-lp .ctawrap .wrap{max-width:none;padding-inline:0}

.md-lp .cta__catch{margin-top:30px;font-size:34px;font-weight:700;line-height:1.5;letter-spacing:-.015em;color:var(--brand)}
.md-lp .ctawrap h2{margin-top:12px;font-size:32px;font-weight:700;line-height:1.5;letter-spacing:-.015em;color:#fff}
.md-lp .cta__lead{margin-top:0;font-size:16px;line-height:1.95;color:#fff}
.md-lp .cta__note{margin-top:18px;font-size:16px;line-height:1.85;color:#fff}

/* 左に説明文と「資料でわかること」、右にフォーム。
   説明文を左カラムに入れることで、1行が長くなりすぎるのを防ぎます。 */
.md-lp .cta__grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;margin-top:30px;align-items:start}
.md-lp .cta__left{min-width:0}
.md-lp .cta__left .cta__box{margin-top:30px}
.md-lp .cta__box{background:var(--paper);color:var(--navy);padding:26px 26px 28px}
.md-lp .cta__box h3{font-size:20px;font-weight:700;line-height:1.5}
.md-lp .cta__list{display:flex;flex-direction:column;gap:14px;margin-top:18px}
.md-lp .cta__list li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.8}
.md-lp .cta__list .tick{flex:none;width:8px;height:8px;margin-top:10px;background:var(--brand)}
.md-lp .cta__list .tick::after{content:none}

/* フォーム（WPForms 1.8系・モダンレンダリング）
   -----------------------------------------------------------
   実際の出力は次の形です。
     <div class="wpforms-container wpforms-container-full wpforms-render-modern" id="wpforms-1533">
       <form class="wpforms-form ...">
         <div class="wpforms-field-container">
           <div class="wpforms-field wpforms-field-text">
             <label class="wpforms-field-label">…</label>
             <input class="wpforms-field-medium wpforms-field-required">
     …
         <div class="wpforms-submit-container">
           <button class="wpforms-submit">送信</button>

   モダンモードは #wpforms-1533 にCSS変数をID指定で当ててくるため、
   クラスだけの指定では勝てません。変数は同じID相当の強さで上書きし、
   見た目に効く指定には !important を添えています。 */
.md-lp .md-formwrap{background:var(--paper);color:var(--navy);padding:28px}

/* WPForms のCSS変数を丸ごと差し替える */
.md-lp .md-formwrap .wpforms-container,
.md-lp .md-formwrap .wpforms-container-full,
.md-lp .md-formwrap .wpforms-render-modern,
.md-lp .md-formwrap form.wpforms-form{
  --wpforms-field-size-input-height:52px;
  --wpforms-field-size-input-spacing:8px;
  --wpforms-field-size-font-size:16px;
  --wpforms-field-size-line-height:24px;
  --wpforms-field-size-padding-h:14px;
  --wpforms-field-size-checkbox-size:20px;
  --wpforms-field-size-sublabel-spacing:6px;
  --wpforms-field-size-icon-size:1;
  --wpforms-field-border-radius:0px;
  --wpforms-field-border-style:solid;
  --wpforms-field-border-size:1px;
  --wpforms-field-background-color:#F4F6FA;
  --wpforms-field-border-color:#DCE3ED;
  --wpforms-field-text-color:#16243F;
  --wpforms-label-color:#16243F;
  --wpforms-label-sublabel-color:#4A5B78;
  --wpforms-label-error-color:#F20153;
  --wpforms-button-size-font-size:17px;
  --wpforms-button-size-height:58px;
  --wpforms-button-size-padding-h:0px;
  --wpforms-button-border-radius:999px;
  --wpforms-button-border-size:0px;
  --wpforms-button-background-color:#F20153;
  --wpforms-button-border-color:#F20153;
  --wpforms-button-text-color:#FFFFFF;
  --wpforms-page-break-color:#F20153;
  margin:0;max-width:none;
}
.md-lp .md-formwrap .wpforms-head-container,
.md-lp .md-formwrap .wpforms-title,
.md-lp .md-formwrap .wpforms-description{display:none}

/* 会社名・部署名・役職・氏名だけ2列、それ以降は全幅。
   並び順ではなく項目IDで指定します。フォームには field_10 という
   スパム対策の隠し項目が2番目に入っていて、順番で数えるとずれるためです。 */
.md-lp .md-formwrap .wpforms-field-container{display:grid;grid-template-columns:1fr 1fr;gap:20px 16px}
.md-lp .md-formwrap .wpforms-field{
  grid-column:1 / -1;padding:0 !important;margin:0 !important;border:0 !important;
  max-width:none !important;width:auto !important;
}
.md-lp .md-formwrap [id$="-field_1-container"],
.md-lp .md-formwrap [id$="-field_2-container"],
.md-lp .md-formwrap [id$="-field_3-container"],
.md-lp .md-formwrap [id$="-field_4-container"]{grid-column:auto}
/* スパム対策の隠し項目はレイアウトに影響させない */
.md-lp .md-formwrap [id$="-field_10-container"]{
  position:absolute !important;width:1px !important;height:1px !important;
  overflow:hidden !important;clip:rect(0 0 0 0) !important;
}

/* ラベル */
.md-lp .md-formwrap .wpforms-field-label{
  display:block;margin:0 0 8px;
  font-family:var(--sans) !important;font-size:16px !important;font-weight:600 !important;
  line-height:1.5 !important;color:var(--navy) !important;
}
.md-lp .md-formwrap .wpforms-required-label{color:var(--brand) !important;margin-left:4px}
.md-lp .md-formwrap .wpforms-field-sublabel,
.md-lp .md-formwrap .wpforms-field-description{font-size:15px;line-height:1.7;color:#4A5B78}

/* 入力欄。wpforms-field-medium は input / select / textarea 自体に付くので、
   その幅制限（既定60%）を外して項目の幅いっぱいに広げます。 */
.md-lp .md-formwrap input.wpforms-field-medium,
.md-lp .md-formwrap select.wpforms-field-medium,
.md-lp .md-formwrap textarea.wpforms-field-medium,
.md-lp .md-formwrap input.wpforms-field-small,
.md-lp .md-formwrap select.wpforms-field-small,
.md-lp .md-formwrap textarea.wpforms-field-small,
.md-lp .md-formwrap input.wpforms-field-large,
.md-lp .md-formwrap select.wpforms-field-large,
.md-lp .md-formwrap textarea.wpforms-field-large,
.md-lp .md-formwrap .wpforms-field input[type=text],
.md-lp .md-formwrap .wpforms-field input[type=email],
.md-lp .md-formwrap .wpforms-field input[type=tel],
.md-lp .md-formwrap .wpforms-field input[type=url],
.md-lp .md-formwrap .wpforms-field input[type=number],
.md-lp .md-formwrap .wpforms-field select,
.md-lp .md-formwrap .wpforms-field textarea{
  width:100% !important;max-width:100% !important;
  padding:13px 14px !important;
  font-family:var(--sans) !important;font-size:16px !important;line-height:1.6 !important;
  color:var(--navy) !important;
  background-color:var(--surface) !important;
  border:1px solid var(--line) !important;border-radius:0 !important;
  box-shadow:none !important;
}
.md-lp .md-formwrap .wpforms-field textarea{min-height:120px !important;height:auto !important}
.md-lp .md-formwrap .wpforms-field select{height:auto !important}
.md-lp .md-formwrap .wpforms-field input:focus,
.md-lp .md-formwrap .wpforms-field select:focus,
.md-lp .md-formwrap .wpforms-field textarea:focus{
  outline:2px solid var(--navy) !important;outline-offset:1px;
  border-color:var(--navy) !important;
}

/* チェックボックス・ラジオ
   プラグインが fieldset の枠線を出すので消します */
.md-lp .md-formwrap .wpforms-field-checkbox,
.md-lp .md-formwrap .wpforms-field-radio,
.md-lp .md-formwrap .wpforms-field fieldset{
  border:0 !important;padding:0 !important;margin:0 !important;
}
.md-lp .md-formwrap .wpforms-field legend{
  padding:0 !important;margin:0 0 8px !important;float:none;width:auto;
  font-size:16px !important;font-weight:600 !important;line-height:1.5 !important;
  color:var(--navy) !important;
}
.md-lp .md-formwrap .wpforms-field-checkbox ul,
.md-lp .md-formwrap .wpforms-field-radio ul{margin:0;padding:0;list-style:none}
.md-lp .md-formwrap .wpforms-field-checkbox li,
.md-lp .md-formwrap .wpforms-field-radio li{
  display:flex;gap:11px;align-items:flex-start;margin:0 0 8px;
}
.md-lp .md-formwrap .wpforms-field-checkbox input[type=checkbox],
.md-lp .md-formwrap .wpforms-field-radio input[type=radio]{
  width:20px !important;height:20px !important;margin:3px 0 0 !important;flex:none;
}
.md-lp .md-formwrap .wpforms-field-checkbox label,
.md-lp .md-formwrap .wpforms-field-radio label{
  margin:0 !important;
  font-size:16px !important;font-weight:500 !important;line-height:1.7 !important;
  color:var(--navy) !important;
}

/* 送信ボタン：全幅の赤いピル。文字は中央。
   実際のタグは <button class="wpforms-submit"> です。 */
.md-lp .md-formwrap .wpforms-submit-container{margin-top:8px}
.md-lp .md-formwrap button.wpforms-submit,
.md-lp .md-formwrap button[type=submit],
.md-lp .md-formwrap .wpforms-container button[type=submit],
.md-lp .md-formwrap form.wpforms-form button[type=submit]{
  display:flex !important;align-items:center !important;justify-content:center !important;
  width:100% !important;max-width:100% !important;min-height:58px !important;
  margin:6px 0 0 !important;padding:19px 0 !important;
  background-color:var(--brand) !important;background-image:none !important;
  color:#fff !important;border:0 !important;border-radius:999px !important;
  box-shadow:none !important;cursor:pointer;
  font-family:var(--sans) !important;font-size:17px !important;font-weight:700 !important;
  line-height:1 !important;text-align:center !important;text-transform:none !important;
  transition:background-color .2s ease,transform .2s ease;
}
.md-lp .md-formwrap button.wpforms-submit:hover,
.md-lp .md-formwrap button[type=submit]:hover{
  background-color:var(--brand-deep) !important;color:#fff !important;
}
.md-lp .md-formwrap button.wpforms-submit:active{transform:translateY(1px)}
.md-lp .md-formwrap button.wpforms-submit:disabled{
  background-color:var(--line) !important;color:var(--navy) !important;cursor:not-allowed;
}
/* 送信中のスピナーはボタンの外に出さない */
.md-lp .md-formwrap .wpforms-submit-spinner{display:none !important}

.md-lp .md-formwrap .wpforms-error,
.md-lp .md-formwrap label.wpforms-error{
  color:var(--brand) !important;font-size:14px !important;margin-top:6px;
}


@media(max-width:768px){
  .md-lp .ctawrap > .cta{padding:48px var(--gut) 52px}
  .md-lp .cta__catch{margin-top:24px;font-size:24px}
  .md-lp .ctawrap h2{font-size:24px}
  .md-lp .cta__grid{grid-template-columns:1fr;gap:24px;margin-top:22px}
  .md-lp .cta__left .cta__box{margin-top:22px}
  .md-lp .cta__box,.md-lp .md-formwrap{padding:20px}
  /* SPは全項目を1列に */
  .md-lp .md-formwrap .wpforms-field-container{grid-template-columns:1fr}
  .md-lp .md-formwrap .wpforms-field{grid-column:1 / -1 !important}
}
@media(hover:none){
  .md-lp .md-formwrap button[type=submit]:hover{background:var(--brand)}
}

/* -------------------------------------------------------------------------
   16. CASES — 1件目だけ全幅の大きなカード、残りは2列。
   ------------------------------------------------------------------------- */
.md-lp .casegrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:36px}
.md-lp .case{
  display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line);
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.md-lp .case:hover{border-color:var(--navy);box-shadow:0 6px 20px rgba(22,36,63,.10)}
.md-lp .case:active{transform:translateY(1px)}

/* 1件目：全幅・左に写真、右に本文 */
.md-lp .case--feature{
  grid-column:1 / -1;display:grid;grid-template-columns:1.05fr .95fr;align-items:stretch;
}
.md-lp .case--feature .case__photo{height:100%;overflow:hidden}
.md-lp .case--feature .case__photo > img{height:100%;min-height:300px}
.md-lp .case--feature .case__body{padding:28px 30px 30px}
.md-lp .case--feature .case__title{font-size:24px}
/* 成果は左に赤3px罫＋淡い背景のブロック */

.md-lp .case--feature .case__title{margin-top:22px}

/* 写真とロゴ */
/* 背景を敷くと、写真が収まりきらない部分が淡い帯に見えるので敷かない */
.md-lp .case__photo{position:relative;display:block;overflow:hidden;line-height:0}
.md-lp .case__photo > img{width:100%;height:210px;object-fit:cover}
.md-lp .case__photo--blank{min-height:210px;background:var(--surface)}
/* ロゴは写真の下・本文の先頭に置く（全カード共通） */
/* ロゴは写真の下・本文の先頭。上に25px、下に19pxの余白を取る */
.md-lp .case__logo{
  display:inline-flex;align-items:center;justify-content:flex-start;
  align-self:flex-start;margin:0 0 19px;line-height:0;
}
.md-lp .case__logo img{
  display:block;height:24px;width:auto;max-width:200px;object-fit:contain;
}
/* SVGは幅も高さも持たないことがあるので、明示的に抑える */
.md-lp .case__logo svg{height:28px;width:auto}
/* 全幅カードはロゴをひとまわり大きく */
.md-lp .case--feature .case__logo--top img{height:30px;max-width:240px}

/* 本文 */
.md-lp .case__body{padding:25px 24px 26px;display:flex;flex-direction:column;flex:1}
.md-lp .case__result{
  padding:16px 18px;background:var(--surface);border-left:3px solid var(--brand);
  font-size:16px;font-weight:500;line-height:1.7;
}
.md-lp .case__title{margin-top:20px;font-size:21px;font-weight:700;line-height:1.6}
.md-lp .case__company{margin-top:18px;font-size:16px;font-weight:500;line-height:1}

/* 「詳しい事例を読む」：文字は紺、赤は丸アイコンだけ */
.md-lp .case__link{
  display:inline-flex;align-items:center;gap:12px;align-self:flex-start;
  margin-top:auto;padding:10px 10px 10px 20px;
  background:var(--paper);border:1px solid var(--line);border-radius:999px;
  font-size:16px;font-weight:600;line-height:1;color:var(--navy);
  transition:border-color .2s ease;
}
.md-lp .case__body > .case__link{margin-top:22px}
.md-lp .case__link::after{
  content:"→";display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:30px;height:30px;border-radius:999px;background:var(--brand);color:#fff;
  font-size:15px;font-weight:400;line-height:1;
  transition:transform .2s ease;
}
.md-lp .case:hover .case__link{border-color:var(--navy)}
.md-lp .case:hover .case__link::after{transform:translateX(3px)}
.md-lp .cases__more{margin-top:32px;text-align:center}

/* 事例詳細ページ下部の「ほかの導入事例」は3件なので3カラム */
.md-lp .cases--others .casegrid{grid-template-columns:repeat(3,minmax(0,1fr))}
.md-lp .cases--others .case__result{display:none}
.md-lp .cases--others .case__title{margin-top:0;font-size:19px}
.md-lp .cases--others .case__logo--top img{height:24px}
@media(min-width:769px) and (max-width:1080px){
  .md-lp .cases--others .casegrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:768px){
  .md-lp .cases--others .casegrid{grid-template-columns:1fr}
}

/* 一覧ページ（cases--archive）は件数が多いので3カラム。
   1件目を大きくする扱いもしません。 */
.md-lp .cases--archive .casegrid{grid-template-columns:repeat(3,minmax(0,1fr))}
.md-lp .cases--archive .case--feature{
  grid-column:auto;display:flex;flex-direction:column;
}
.md-lp .cases--archive .case--feature .case__photo > img{height:210px;min-height:0}
.md-lp .cases--archive .case--feature .case__body,
.md-lp .cases--archive .case__body{padding:25px 24px 26px}
.md-lp .cases--archive .case--feature .case__title{font-size:21px}
/* ロゴは写真から25px離す。一覧でも詳細と同じ間隔に揃えます。 */
.md-lp .cases--archive .case__logo,
.md-lp .cases--archive .case--feature .case__logo--top{margin:0 0 19px}
.md-lp .cases--archive .case__logo img,
.md-lp .cases--archive .case--feature .case__logo--top img{height:24px}
/* 一覧では成果の数値ブロックは出さない（詳細ページで読めるため） */
.md-lp .cases--archive .case__result{display:none}
.md-lp .cases--archive .case__title{margin-top:0}
@media(min-width:769px) and (max-width:1080px){
  .md-lp .cases--archive .casegrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:768px){
  .md-lp .cases--archive .casegrid{grid-template-columns:1fr}
  .md-lp .casegrid{grid-template-columns:1fr;gap:14px;margin-top:26px}
  .md-lp .case--feature{grid-column:auto;grid-template-columns:1fr;display:flex}
  .md-lp .case--feature .case__photo > img{height:170px;min-height:0}
  .md-lp .case--feature .case__body{padding:20px}
  .md-lp .case--feature .case__title{font-size:19px}
  .md-lp .case__photo > img{height:170px}
  .md-lp .case__body{padding:20px}
  .md-lp .case__title{font-size:19px}
  /* 幅が足りないときはピルを全幅にして、ラベル左・アイコン右 */
  .md-lp .case__link{width:100%;justify-content:space-between}
}
@media(hover:none){
  .md-lp .case:hover{border-color:var(--line);box-shadow:none}
  .md-lp .case:hover .case__link::after{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .md-lp .case,.md-lp .case__link,.md-lp .case__link::after{transition:none}
}

/* -------------------------------------------------------------------------
   17. EVENTS — 構造はそのまま。色と文字だけ新ルールに合わせる。
   ------------------------------------------------------------------------- */
/* 3列固定。auto-fit だと1件のときに横幅いっぱいまで伸びてしまうため、
   件数が少なくてもカードの大きさが変わらないようにします。 */
.md-lp .eventlist{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;margin-top:38px;align-items:start;
}
@media(min-width:769px) and (max-width:1080px){
  .md-lp .eventlist{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.md-lp .event{
  display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line);padding:22px;
}
.md-lp .event__meta{display:flex;flex-wrap:wrap;gap:8px}
.md-lp .event__badge{
  display:inline-block;padding:6px 12px;
  border:1px solid var(--line);background:var(--surface);
  font-size:14px;font-weight:600;line-height:1;color:var(--navy);
}
.md-lp .event__badge--free{background:var(--navy);border-color:var(--navy);color:#fff}
.md-lp .event__badge--paid{background:var(--surface);border-color:var(--line);color:var(--navy)}
.md-lp .event__banner{display:block;margin-top:16px;background:var(--surface)}
/* バナーは文字が入っているので切らない。
   16:9の枠に収め、はみ出す分は余白にします。 */
.md-lp .event__banner{display:block;background:var(--surface)}
.md-lp .event__banner img{
  width:100%;aspect-ratio:16/9;height:auto;object-fit:contain;
}
.md-lp .event__body{display:flex;flex-direction:column;flex:1;margin-top:16px}
.md-lp .event__date{font-family:var(--mono);font-size:14px;font-weight:500;line-height:1;letter-spacing:.04em}
.md-lp .event__title{margin-top:12px;font-size:19px;font-weight:700;line-height:1.55}
.md-lp .event__lead{margin-top:12px;font-size:16px;line-height:1.85}
.md-lp .event__btn{
  display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;
  margin-top:20px;padding:14px 26px;border:0;border-radius:999px;
  background:var(--brand);color:#fff;font-size:16px;font-weight:600;line-height:1;
  transition:background-color .2s ease,transform .2s ease;
}
.md-lp .event__btn:hover{background:var(--brand-deep);color:#fff}
.md-lp .event__btn:active{transform:translateY(1px)}
.md-lp .events__more{margin-top:28px;font-size:16px;font-weight:600}
.md-lp .events__more a:hover{color:var(--brand)}

@media(max-width:768px){
  .md-lp .eventlist{grid-template-columns:1fr;gap:14px;margin-top:26px}
  .md-lp .event__banner img{aspect-ratio:16/9;height:auto}
  .md-lp .event__btn{align-self:stretch}
}
@media(hover:none){
  .md-lp .event__btn:hover{background:var(--brand)}
}

/* -------------------------------------------------------------------------
   18. フッター
   ------------------------------------------------------------------------- */
.md-lp .footer{
  background:var(--navy);color:#fff;
  padding:36px var(--gut) 38px;text-align:center;
}
/* 濃紺地なのでリンクも白に。指定がないと本文の紺色のままになります。 */
.md-lp .footer__links{font-size:15px;line-height:1.8;color:#fff}
.md-lp .footer__links a{color:#fff}
.md-lp .footer__links a:hover{color:var(--brand)}
.md-lp .footer__sep{margin:0 .6em;color:rgba(255,255,255,.45)}
.md-lp .footer__copy{margin-top:12px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;opacity:.7}

/* -------------------------------------------------------------------------
   18-b. ウェビナー告知の小窓（画面右下）
   開催中のウェビナーがあるときだけ出ます。
   ------------------------------------------------------------------------- */
.md-lp .evprompt{
  position:fixed;right:20px;bottom:20px;z-index:45;width:320px;max-width:calc(100vw - 40px);
  background:var(--paper);border:1px solid var(--line);
  box-shadow:0 10px 30px rgba(22,36,63,.16);
  transition:opacity .25s ease,transform .25s ease;
}
.md-lp .evprompt.is-hidden{opacity:0;transform:translateY(14px);pointer-events:none}
.md-lp .evprompt.is-closed{display:none}
.md-lp .evprompt__link{display:block;padding:18px 44px 16px 20px}
.md-lp .evprompt__tag{
  display:inline-block;margin-bottom:10px;padding:5px 10px;
  background:var(--navy);color:#fff;
  font-family:var(--mono);font-size:10.5px;font-weight:500;line-height:1;letter-spacing:.12em;
}
.md-lp .evprompt__date{
  display:block;margin-bottom:6px;
  font-family:var(--mono);font-size:13px;font-weight:500;line-height:1.5;color:var(--brand);
}
.md-lp .evprompt__date-s{display:none}
.md-lp .evprompt__title{
  display:block;margin-bottom:10px;font-size:16px;font-weight:700;line-height:1.55;color:var(--navy);
}
.md-lp .evprompt__go{
  display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:600;line-height:1;color:var(--navy);
}
.md-lp .evprompt__go::after{
  content:"→";display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:24px;height:24px;border-radius:999px;background:var(--brand);color:#fff;
  font-size:13px;font-weight:400;line-height:1;transition:transform .2s ease;
}
.md-lp .evprompt__link:hover .evprompt__go::after{transform:translateX(3px)}
.md-lp .evprompt__close{
  position:absolute;right:8px;top:8px;width:32px;height:32px;
  background:none;border:1px solid var(--line);border-radius:999px;cursor:pointer;
  transition:border-color .2s ease;
}
.md-lp .evprompt__close::before,
.md-lp .evprompt__close::after{
  content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;
  margin:-.75px 0 0 -6px;background:var(--navy);
}
.md-lp .evprompt__close::before{transform:rotate(45deg)}
.md-lp .evprompt__close::after{transform:rotate(-45deg)}
.md-lp .evprompt__close:hover{border-color:var(--brand)}
.md-lp .evprompt__close:hover::before,
.md-lp .evprompt__close:hover::after{background:var(--brand)}

@media(max-width:768px){
  /* SPは右下に浮かせず、ヘッダー直下に濃紺のバーとして固定します。
     （.evprompt はヘッダーの中にあるので、position:static に戻すだけで
       sticky なヘッダーと一緒に上部へ固定されます） */
  .md-lp .evprompt{
    position:static;right:auto;left:auto;bottom:auto;
    width:auto;max-width:none;
    display:flex;align-items:stretch;
    background:var(--navy);border:0;box-shadow:none;
    opacity:1 !important;transform:none !important;pointer-events:auto !important;
  }
  .md-lp .evprompt__link{
    flex:1;min-width:0;
    display:grid;grid-template-columns:auto 1fr;
    grid-template-areas:"tag date" "title title";
    gap:6px 9px;padding:11px 4px 11px var(--gut);
  }
  .md-lp .evprompt__tag{
    grid-area:tag;margin:0;padding:4px 8px;font-size:10.5px;
    background:var(--brand);color:#fff;
  }
  .md-lp .evprompt__date{display:none}
  .md-lp .evprompt__date-s{
    grid-area:date;display:block;align-self:center;margin:0;
    font-family:var(--mono);font-size:12.5px;font-weight:500;line-height:1.4;
    color:#fff;white-space:nowrap;
  }
  .md-lp .evprompt__title{
    grid-area:title;margin:0;
    font-size:13px;font-weight:700;line-height:1.45;color:rgba(255,255,255,.92);
  }
  .md-lp .evprompt__go{display:none}
  .md-lp .evprompt__close{
    position:relative;top:auto;right:auto;flex:none;
    width:44px;height:auto;align-self:stretch;
    border:0;border-radius:0;background:transparent;
  }
  .md-lp .evprompt__close::before,
  .md-lp .evprompt__close::after{
    left:50%;top:50%;margin-left:-6.5px;width:13px;background:rgba(255,255,255,.85);
  }
}
@media(hover:none){
  .md-lp .evprompt__link:hover .evprompt__go::after{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .md-lp .evprompt,.md-lp .evprompt__go::after,.md-lp .evprompt__close{transition:none}
}

/* -------------------------------------------------------------------------
   19. SP：画面下の固定CTAバー（ボタン実装指示 7・8）
   ------------------------------------------------------------------------- */
.md-lp .spbar{display:none}
@media(max-width:768px){
  .md-lp .spbar{
    position:fixed;left:0;right:0;bottom:0;z-index:50;
    display:flex;align-items:center;justify-content:center;gap:12px;
    height:60px;background:var(--brand);color:#fff;
    font-size:17px;font-weight:700;line-height:1;
  }
  .md-lp .spbar__ic{
    display:inline-flex;align-items:center;justify-content:center;flex:none;
    width:30px;height:30px;border-radius:999px;background:#fff;color:var(--brand);
    font-size:15px;font-weight:400;font-style:normal;line-height:1;
  }
  .md-lp .spbar:active{background:var(--brand-deep)}
  /* バーがフッターや送信ボタンを覆わないよう、ページ末尾に余白を確保 */
  body.md-lp{padding-bottom:calc(60px + env(safe-area-inset-bottom))}
}

/* -------------------------------------------------------------------------
   20. 下層ページ（事例詳細・記事・各一覧）
   LP と同じ土台の上で、読み物として成立する最低限だけを整える。
   ------------------------------------------------------------------------- */
/* 下層ページの汎用h1。個別のクラス（casehero__headline など）が
   あるものは、そちらの指定を優先させます。 */
.md-lp .section > .wrap > h1:not([class]){font-size:34px;font-weight:700;line-height:1.5;letter-spacing:-.015em}
.md-lp .btn--outline{
  display:inline-flex;align-items:center;justify-content:center;
  padding:14px 26px;border:1px solid var(--navy);border-radius:999px;
  background:transparent;color:var(--navy);
  font-size:16px;font-weight:600;line-height:1;
  transition:background-color .2s ease;
}
.md-lp .btn--outline:hover{background:var(--surface);color:var(--navy)}

@media(max-width:768px){
  .md-lp .section > .wrap > h1:not([class]){font-size:24px}
  .md-lp .footer{padding:32px var(--gut)}
}
@media(prefers-reduced-motion:reduce){
  .md-lp .case,.md-lp .case__link::after,.md-lp .event__btn,
  .md-lp .md-formwrap button[type=submit],.md-lp .btn--outline{transition:none}
}
/* =========================================================================
   【ブロック5】下層ページ
   事例一覧 / 事例詳細 / 記事一覧 / 記事詳細 / カテゴリ /
   イベント一覧 / プライバシー / サンクス
   ========================================================================= */

/* -------------------------------------------------------------------------
   21. 共通：ページ見出し（casehero）
   ------------------------------------------------------------------------- */
.md-lp .casehero{background:var(--surface);padding-block:48px 44px;border-bottom:1px solid var(--line)}
.md-lp .casehero__crumb{
  font-size:14px;line-height:1.7;color:var(--navy);
}
.md-lp .casehero__crumb a{color:var(--navy)}
.md-lp .casehero__crumb a:hover{color:var(--brand)}
.md-lp .casehero__company,
.md-lp .casehero__title{
  margin-top:14px;font-size:38px;font-weight:700;line-height:1.35;letter-spacing:-.02em;
}
/* イベント一覧などで、casehero__title が見出しの下のリード文（<p>）として
   使われている箇所は本文サイズに落とす */
.md-lp p.casehero__title{
  margin-top:14px;max-width:760px;font-size:16px;font-weight:500;line-height:1.95;letter-spacing:0;
}
/* 事例詳細の見出し（B案）
   企業名を先に置いて「どこの事例か」を示し、その下にタイトル。
   ロゴはこのページでは出しません（カード側で使います）。 */
.md-lp .casehero__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:18px;
}
.md-lp .casehero__meta:empty{display:none}
.md-lp .casehero__brand{
  font-size:16px;font-weight:600;line-height:1;color:var(--navy);
}
.md-lp .casehero__headline{
  margin-top:16px;font-size:28px;font-weight:700;line-height:1.6;letter-spacing:-.01em;
}
/* 記事のタイトルは事例詳細（28px）と揃える。
   一覧ページの見出し（38px）とは役割が違うので、こちらだけ上書きします。 */
.md-lp .articlehero__title{
  font-size:28px;font-weight:700;line-height:1.6;letter-spacing:-.01em;
}
.md-lp .articlehero__date{
  margin-top:16px;
  font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.06em;
}
.md-lp .wrap--wide{max-width:var(--wrap)}

@media(max-width:768px){
  .md-lp .casehero{padding-block:32px 28px}
  .md-lp .casehero__company,
  .md-lp .casehero__title{font-size:26px;line-height:1.45}
  .md-lp .articlehero__title{font-size:21px;line-height:1.55}
  .md-lp .articlehero__date{margin-top:12px}
  .md-lp p.casehero__title{font-size:15px;line-height:1.9}
  .md-lp .casehero__headline{font-size:21px;line-height:1.55}
  .md-lp .casehero__meta{margin-top:14px;gap:10px}
}

/* -------------------------------------------------------------------------
   22. 記事カード（記事一覧・カテゴリ・記事詳細の関連記事）
   ------------------------------------------------------------------------- */
.md-lp .caselist{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:20px;margin-top:36px;
}
.md-lp .casecard{
  display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--line);
  transition:border-color .2s ease,box-shadow .2s ease;
}
.md-lp .casecard:hover{border-color:var(--navy);box-shadow:0 6px 20px rgba(22,36,63,.10)}
.md-lp .casecard__thumb{display:block;background:var(--surface)}
.md-lp .casecard__thumb img{width:100%;height:190px;object-fit:cover}
.md-lp .casecard__date{
  padding:20px 22px 0;font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.06em;
}
.md-lp .casecard__name{
  padding:10px 22px 0;font-size:19px;font-weight:700;line-height:1.6;
}
.md-lp .casecard__lead{padding:12px 22px 0;font-size:16px;line-height:1.85}
.md-lp .casecard__go{
  display:inline-flex;align-items:center;gap:12px;align-self:flex-start;
  margin:auto 22px 22px;padding:10px 10px 10px 20px;
  border:1px solid var(--line);border-radius:999px;
  font-size:16px;font-weight:600;line-height:1;color:var(--navy);
  transition:border-color .2s ease;
}
.md-lp .casecard__go::after{
  content:"→";display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:30px;height:30px;border-radius:999px;background:var(--brand);color:#fff;
  font-size:15px;font-weight:400;line-height:1;transition:transform .2s ease;
}
.md-lp .casecard:hover .casecard__go{border-color:var(--navy)}
.md-lp .casecard:hover .casecard__go::after{transform:translateX(3px)}
.md-lp .caselist-note{margin-top:22px;font-size:16px;line-height:1.85}

/* 記事のカテゴリ絞り込み */
.md-lp .articlefilter{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.md-lp .articlefilter a{
  display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;
  background:var(--paper);border:1px solid var(--line);border-radius:999px;
  font-size:15px;font-weight:600;line-height:1;color:var(--navy);
  transition:background-color .2s ease,border-color .2s ease;
}
.md-lp .articlefilter a:hover{border-color:var(--navy)}
.md-lp .articlefilter .is-current{background:var(--navy);border-color:var(--navy);color:#fff}
.md-lp .articlecat{
  display:inline-block;margin-bottom:14px;padding:6px 12px;
  background:var(--navy);color:#fff;font-size:14px;font-weight:600;line-height:1;
}
/* 記事のアイキャッチは本文と同じ幅に収めます */
.md-lp .articlethumb{max-width:760px;margin:0 auto 28px}
.md-lp .articlethumb img{width:100%;height:auto}

@media(max-width:768px){
  .md-lp .caselist{grid-template-columns:1fr;gap:14px;margin-top:26px}
  .md-lp .casecard__thumb img{height:170px}
  .md-lp .casecard__name{font-size:18px}
  .md-lp .casecard__go{width:calc(100% - 44px);justify-content:space-between}
}
@media(hover:none){
  .md-lp .casecard:hover{border-color:var(--line);box-shadow:none}
  .md-lp .casecard:hover .casecard__go::after{transform:none}
}

/* -------------------------------------------------------------------------
   23. 本文（記事詳細・事例詳細・プライバシー）
   ------------------------------------------------------------------------- */
.md-lp .casebody{max-width:760px;margin-inline:auto}
.md-lp .casebody h2{
  margin-top:48px;padding-bottom:12px;border-bottom:2px solid var(--navy);
  font-size:26px;font-weight:700;line-height:1.55;
}
.md-lp .casebody h3{margin-top:36px;font-size:20px;font-weight:700;line-height:1.6}
.md-lp .casebody h4{margin-top:28px;font-size:18px;font-weight:700;line-height:1.6}
.md-lp .casebody p{margin-top:18px;font-size:16px;line-height:1.95}
.md-lp .casebody a{color:var(--navy);text-decoration:underline;text-underline-offset:3px}
.md-lp .casebody a:hover{color:var(--brand)}
/* 本文内の画像。WordPressの画像ブロックは <figure> で囲まれ、
   ブロック側の余白や幅指定を持つので、本文の幅に揃うよう打ち消します。 */
.md-lp .casebody img{margin-top:0;width:100%;height:auto}
.md-lp .casebody figure,
.md-lp .casebody .wp-block-image{
  margin:26px 0 0 !important;padding:0;max-width:100% !important;width:auto !important;
}
.md-lp .casebody figure img,
.md-lp .casebody .wp-block-image img{
  display:block;width:100% !important;max-width:100% !important;height:auto;margin:0;
}
/* 「幅広」「全幅」指定が付いていても本文幅に収める */
.md-lp .casebody .alignwide,
.md-lp .casebody .alignfull,
.md-lp .casebody .wp-block-image.alignwide,
.md-lp .casebody .wp-block-image.alignfull{
  margin-left:0 !important;margin-right:0 !important;
  width:100% !important;max-width:100% !important;left:auto;right:auto;
}
.md-lp .casebody figcaption,
.md-lp .casebody .wp-block-image figcaption{
  margin-top:10px;font-size:14px;line-height:1.8;color:#4A5B78;text-align:left;
}
.md-lp .casebody ul,
.md-lp .casebody ol{margin-top:18px;padding-left:1.3em;list-style:disc}
.md-lp .casebody ol{list-style:decimal}
.md-lp .casebody li{margin-top:6px;font-size:16px;line-height:1.95}
.md-lp .casebody blockquote{
  margin-top:26px;padding:18px 22px;
  background:var(--surface);border-left:3px solid var(--brand);
  font-size:16px;line-height:1.9;
}
.md-lp .casebody table{
  width:100%;margin-top:26px;border-collapse:collapse;border-spacing:0;
  border:1px solid var(--line);background:var(--paper);
}
.md-lp .casebody tr,
.md-lp .casebody tbody tr:nth-child(odd),
.md-lp .casebody tbody tr:nth-child(even){background:transparent}
.md-lp .casebody th,
.md-lp .casebody td{
  padding:14px 16px;border:0;
  border-bottom:1px solid var(--line);border-right:1px solid var(--line);
  background:var(--paper);font-size:16px;line-height:1.7;text-align:left;
}
.md-lp .casebody th{background:var(--surface);font-weight:600}
.md-lp .casebody th:last-child,
.md-lp .casebody td:last-child{border-right:0}
.md-lp .casebody tr:last-child th,
.md-lp .casebody tr:last-child td{border-bottom:0}

@media(max-width:768px){
  .md-lp .casebody h2{margin-top:36px;font-size:21px}
  .md-lp .casebody h3{margin-top:28px;font-size:18px}
}

/* -------------------------------------------------------------------------
   24. 事例詳細の導入前後（casesum / case__ba）
   ------------------------------------------------------------------------- */
/* 概要ブロックは本文と同じ幅に揃えます（下の記事本文が760pxのため） */
.md-lp .casesum{
  max-width:760px;margin:36px auto 0;
  border:1px solid var(--line);background:var(--paper);
}
.md-lp .casesum__head{
  padding:16px 22px;background:var(--navy);color:#fff;
  font-size:18px;font-weight:700;line-height:1.5;
}
.md-lp .casesum__body{padding:24px 22px 26px}
.md-lp .casesum__label{font-size:16px;font-weight:600;line-height:1}
.md-lp .casesum__ba,
.md-lp .case__ba{
  display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:stretch;margin-top:16px;
}
.md-lp .casesum__col,
.md-lp .case__item{
  padding:18px 20px;background:var(--surface);border-left:3px solid var(--line);
  font-size:16px;line-height:1.85;
}
.md-lp .casesum__col--after,
.md-lp .case__item--after{border-left-color:var(--brand)}
.md-lp .casesum__arrow{align-self:center;font-size:26px;line-height:1;color:var(--brand)}
.md-lp .case__lbl{
  display:block;margin-bottom:8px;
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;
}
.md-lp .casesum__results{margin-top:22px}
.md-lp .casesum__rlabel{font-size:16px;font-weight:600;line-height:1}
.md-lp .casesum__rlist{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.md-lp .casesum__ritem{
  display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.8;
}
.md-lp .casesum__ritem::before{
  content:"";flex:none;width:8px;height:8px;margin-top:10px;background:var(--brand);
}

@media(max-width:768px){
  .md-lp .casesum__ba,
  .md-lp .case__ba{grid-template-columns:1fr;gap:10px}
  .md-lp .casesum__arrow{justify-self:center;transform:rotate(90deg)}
}

/* -------------------------------------------------------------------------
   25. 下層ページ末尾のCTA（cta section）
   LPの #download とは別物で、こちらは帯だけの簡易版です。
   ------------------------------------------------------------------------- */
.md-lp .cta.section{background:var(--navy);color:#fff;text-align:center}
.md-lp .cta.section .cta__label{
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.2em;color:#fff;
}
/* 見出しの色指定がないと本文の紺色のままで、濃紺地に埋もれます */
.md-lp .cta.section h2{
  margin-top:14px;font-size:30px;font-weight:700;line-height:1.5;
  letter-spacing:-.015em;color:#fff;
}
.md-lp .cta.section .cta__lead{
  margin:18px auto 0;max-width:800px;
  font-size:16px;font-weight:500;line-height:1.95;color:#fff;
}
.md-lp .cta.section p{color:#fff}
@media(max-width:768px){
  .md-lp .cta.section h2{font-size:22px}
  .md-lp .cta.section .cta__lead{font-size:15px;line-height:1.9}
}
.md-lp .cta.section .btn,
.md-lp .cta.section .mdbtn{margin-top:26px}

/* 旧 .btn を使っているページ向けの最低限（ピル型に揃える） */
.md-lp .btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:16px 28px;border:0;border-radius:999px;
  background:var(--brand);color:#fff;
  font-family:var(--sans);font-size:16px;font-weight:600;line-height:1;
  transition:background-color .2s ease;
}
.md-lp .btn:hover{background:var(--brand-deep);color:#fff}
.md-lp .btn--outline{
  background:transparent;color:var(--navy);box-shadow:inset 0 0 0 1px var(--line);
}
.md-lp .btn--outline:hover{background:var(--surface);color:var(--navy)}
.md-lp .cta.section .btn--outline{color:#fff;box-shadow:inset 0 0 0 1px #fff}
.md-lp .cta.section .btn--outline:hover{background:rgba(255,255,255,.12);color:#fff}
@media(hover:none){
  .md-lp .btn:hover{background:var(--brand)}
}

/* -------------------------------------------------------------------------
   26. サンクスページ
   1カラムの読み物なので、本文は760pxに収めて行長を抑えます。
   ------------------------------------------------------------------------- */
/* サンクスページ
   -----------------------------------------------------------
   上から順に「お礼 → 資料を開く → 資料の中身 → 次に見るもの」。
   1行が長くなりすぎないよう、要素ごとに幅を絞っています。 */
.md-lp .thanks{text-align:center}
.md-lp .thanks.section{padding-block:64px 72px}
.md-lp .thanks .wrap{max-width:820px}
.md-lp .thanks__label{
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.2em;
}
.md-lp .thanks__title{
  max-width:640px;margin:16px auto 0;
  font-size:32px;font-weight:700;line-height:1.5;letter-spacing:-.02em;
}
/* 1行が長くなりすぎないよう、リード文は幅を絞って中央に */
.md-lp .thanks__lead{
  max-width:560px;margin:20px auto 0;font-size:16px;line-height:1.95;text-align:left;
}
.md-lp .thanks__btn{margin-top:36px}

/* この資料でわかること */
.md-lp .thanks__box{
  max-width:640px;margin:48px auto 0;padding:28px 30px 30px;
  background:var(--surface);border:1px solid var(--line);text-align:left;
}
.md-lp .thanks__box h2{font-size:20px;font-weight:700;line-height:1.5}
.md-lp .thanks__list{margin-top:18px;display:flex;flex-direction:column;gap:12px}
.md-lp .thanks__list li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.8}
.md-lp .thanks__list li::before{
  content:"";flex:none;width:8px;height:8px;margin-top:10px;background:var(--brand);
}

/* あわせてご覧ください — 3つのリンクをカードで並べる */
.md-lp .thanks__next{margin-top:64px;padding-top:52px;border-top:1px solid var(--line)}
.md-lp .thanks__next h2{font-size:22px;font-weight:700;line-height:1.5;letter-spacing:-.01em}
.md-lp .thanks__links{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;margin-top:26px;text-align:left;
}
.md-lp .thanks__links li{display:flex}
.md-lp .thanks__links a{
  display:flex;flex-direction:column;flex:1;
  padding:22px 22px 24px;background:var(--paper);
  border:1px solid var(--line);border-top:3px solid var(--navy);
  color:var(--navy);text-decoration:none;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.md-lp .thanks__links a:active{transform:translateY(1px)}
.md-lp .thanks__links a:hover{border-color:var(--navy);box-shadow:0 6px 20px rgba(22,36,63,.10)}
/* 見出しと矢印が離れて折り返さないよう、矢印は改行しない空白でつなぐ */
.md-lp .thanks__links-t{
  display:block;font-size:16px;font-weight:700;line-height:1.6;
}
.md-lp .thanks__links-t::after{content:"\00a0→";color:var(--brand)}
.md-lp .thanks__links-d{
  display:block;margin-top:10px;font-size:15px;font-weight:500;line-height:1.8;
}
.md-lp .thanks__note{
  max-width:640px;margin:36px auto 0;padding:18px 22px;
  background:var(--surface);border-left:3px solid var(--brand);
  font-size:16px;font-weight:500;line-height:1.85;text-align:left;
}
.md-lp .thanks__back{margin-top:44px}
.md-lp .thanks__back a{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:16px;font-weight:600;color:var(--navy);
}
.md-lp .thanks__back a:hover{color:var(--brand)}
.md-lp .br-sp{display:none}

@media(max-width:768px){
  .md-lp .thanks__title{font-size:24px}
  .md-lp .thanks__lead{margin-top:16px;font-size:15px;line-height:1.9}
  .md-lp .thanks__box{margin-top:32px;padding:20px}
  .md-lp .thanks__next{margin-top:40px;padding-top:32px}
  .md-lp .thanks__next h2{font-size:19px}
  .md-lp .thanks__links{grid-template-columns:1fr;gap:12px;margin-top:20px}
  .md-lp .thanks__note{margin-top:24px;padding:16px 18px;font-size:15px}
  .md-lp .br-sp{display:inline}
}
@media(hover:none){
  .md-lp .thanks__links a:hover{border-color:var(--line);box-shadow:none}
}

/* -------------------------------------------------------------------------
   27. イベント一覧の追加要素
   ------------------------------------------------------------------------- */
.md-lp .events--past{background:var(--surface);border-top:1px solid var(--line)}
.md-lp .event--past{opacity:.72}
.md-lp .event__badge--done{background:var(--line);border-color:var(--line);color:var(--navy)}
.md-lp .event__past-link{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:16px;font-weight:600;color:var(--navy);
}
.md-lp .event__past-link:hover{color:var(--brand)}
.md-lp .events__empty{
  margin-top:28px;padding:26px 22px;background:var(--paper);border:1px solid var(--line);
  font-size:16px;line-height:1.85;text-align:center;
}


/* =========================================================================
   【ブロック9】大画面対応
   ---------------------------------------------------------
   1440px 以下はこれまでと完全に同じ。1600px / 2000px の2段階で、
   コンテンツ枠と文字サイズを一緒に大きくする。
   枠だけ広げると文字が相対的に小さく見えるので、必ず両方を上げる。
   ========================================================================= */
@media(min-width:1600px){
  /* 枠幅（--wrap）は :root で連続的に変化させているので、ここでは指定しない */

  /* キービジュアル */
  /* FV見出しは <br> で2行に固定している。列幅を超えると3行に割れるので、
     各段階で「その幅の列に1行で収まる上限」より小さい値にしてある。
     上限は 1600px=66px / 2000px=76px / 2400px=86px（実測）。 */
  .md-lp .fv__grid{min-height:740px}
  .md-lp .fv__h1{font-size:64px}
  .md-lp .fv__h1-sub{font-size:27px}
  .md-lp .fv__lead{font-size:18px;max-width:580px}

  /* ABOUT */
  .md-lp .about__bg{height:520px}
  .md-lp .about__text{padding-block:60px 78px}
  .md-lp .about__kicker{font-size:18px}
  .md-lp .about__title{font-size:68px}
  .md-lp .about__big{font-size:26px}
  .md-lp .about__lead{font-size:18px;max-width:1040px}

  /* セクション共通 */
  .md-lp .sec-title{font-size:40px}
  .md-lp .sec-sub{font-size:18px;max-width:840px}

  /* 3つの特徴 */
  .md-lp .features__title{font-size:56px}
  .md-lp .features__lead{font-size:19px;max-width:960px}
  .md-lp .fcard{grid-template-columns:minmax(0,1fr) 380px}
  .md-lp .fcard__body h3{font-size:38px}
  .md-lp .fcard__d{font-size:19px}

  /* 一般的な管理職研修との違い */
  .md-lp .walls .sec-title{font-size:42px;max-width:1120px}
  .md-lp .walls .sec-sub{max-width:1120px}
  .md-lp .cmptable th,.md-lp .cmptable td{font-size:18px;padding:20px 24px}
}

@media(min-width:2000px){
  .md-lp .fv__grid{min-height:800px}
  .md-lp .fv__h1{font-size:72px}
  .md-lp .fv__h1-sub{font-size:30px}

  .md-lp .about__bg{height:600px}
  .md-lp .about__text{padding-block:68px 88px}
  .md-lp .about__title{font-size:78px}

  .md-lp .features__title{font-size:64px}
  .md-lp .fcard__body h3{font-size:42px}
  .md-lp .fcard__d{font-size:20px}
}

/* -------------------------------------------------------------------------
   キービジュアルの写真を画面の右端まで伸ばす
   文字側の左端は他セクションと揃えたまま、右の枠だけ外す。
   幅の計算に 100vw ではなく 100%（= .fv の幅）を使う。
   100vw はスクロールバーの幅を含むので、横スクロールバーが出てしまうため。
   ------------------------------------------------------------------------- */
/* 769〜1080px には、写真側の列を狭める既存の指定がある。
   そこを壊さないよう、1081px 以上にだけ効かせる。 */
@media(min-width:1081px){
  .md-lp .fv__grid{
    max-width:none;
    padding-left:max(var(--gut), calc((100% - var(--wrap))/2 + var(--gut)));
    padding-right:0;
    grid-template-columns:minmax(0,calc((var(--wrap) - var(--gut)*2) * .53)) minmax(0,1fr);
  }
}

@media(min-width:2400px){
  .md-lp .fv__grid{min-height:840px}
  .md-lp .fv__h1{font-size:82px}
  .md-lp .fv__h1-sub{font-size:34px}
}