/* ===== /lp/international-school/（インターナショナルスクール向け営業用LP） ===== */
/* 記述ルール
   - セレクタは body の .page-lp-international-school 配下に収める（他ページへの波及防止）
   - 単位は px + clamp(min, Xvw, max)。rem は使わない
   - このLPは共通ヘッダー／フッターを使わない独立レイアウト。左右余白は
     デザイン指定どおり max-width:1280px + 48px（var(--section-gutter) は使わない）
   - SPデザイン値は 375px 幅基準。モバイル適用は原則 767.98px 以下 */

/* ---------------------------------------------------------------
   トークン（このLP専用。:root には出さない）
   --------------------------------------------------------------- */
/* 地色の彩度について
   卒園は原色のカラフル、卒業はシックが好まれ、その両方の作例が同じページに並ぶ。
   元デザインの地色（#FDFCFA / #F4F1EC）は黄み・ベージュが乗っていてシック側に
   最適化されており、そのままだと原色系の作例が濁って見える。そこで暖かみは残しつつ
   彩度を約半分に落とし、どちらの作例も正しい色で見えるニュートラルな器にしている。
   黒（#14161A）は原色を最も引き立てるため、黒地セクションはそのまま維持する。 */
.page-lp-international-school {
  --isc-bg: #FCFCFB;
  --isc-ink: #14161A;
  --isc-accent: #A2603F;
  --isc-accent-light: #C79878;
  --isc-line: #E8E6E2;
  --isc-line-strong: #E1DFDB;
  --isc-line-mute: #CCC8C3;
  --isc-body: #4A4C50;
  --isc-body-strong: #2C2E33;
  --isc-mute: #6E7278;
  --isc-mute-light: #898986;
  --isc-mute-warm: #55575C;
  --isc-panel: #F3F2EF;
  --isc-num: #BEBBB6;

  /* 黒地セクション用 */
  --isc-dark: #14161A;
  --isc-dark-text: #FCFCFB;
  --isc-dark-sub: #A5A4A2;
  --isc-dark-lead: #B5B4B1;
  --isc-dark-gap: #2B2D31;
  --isc-dark-border: #3A3C40;

  --isc-display: 'Cormorant Garamond', serif;
  --isc-serif: 'Bodoni Moda', serif;
  --isc-book: 'Libre Baskerville', serif;
  --isc-sans: 'Jost', 'Noto Sans JP', sans-serif;
  --isc-logo: 'Italiana', serif;
  --isc-script: 'Petit Formal Script', cursive;
  --isc-black: 'Archivo Black', sans-serif;
  --isc-jp: 'Noto Sans JP', sans-serif;

  --isc-gutter: 48px;
  --isc-max: 1280px;
}

/* common.css の body 指定（Zen Kaku Gothic New / #fff）を上書き */
/* 地は濃色。ヘッダーの背後がこの色になり、ヒーローと地続きに見える。
   明色のセクションは各自で地色を持つ */
body.page-lp-international-school {
  font-family: var(--isc-sans);
  color: var(--isc-ink);
  background: var(--isc-dark);
  -webkit-font-smoothing: antialiased;
}

.isc-problem,
.isc-designs,
.isc-work,
.isc-footer {
  background: var(--isc-bg);
}

/* アンカー遷移をなめらかに。html に直接書くと全ページに効くため :has で限定 */
html:has(body.page-lp-international-school) {
  scroll-behavior: smooth;
}

/* a の色と下線は common.css の `a { color: inherit; text-decoration: none }` に任せる。
   ここで a に color を書くと詳細度 0-1-1 になり、ボタン側のクラス（0-1-0）が負けて
   黒地に黒文字で消える。hover もボタンを巻き込むため、汎用指定は置かない。 */
/* メニューは英字を主、和文を従にする（読む要素なので世界観を優先）。
   右の CTA だけは押す判断を速くするため和文を主のままにしている */
.isc-nav__link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.isc-nav__link .isc-btn__en {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: none;
  opacity: 1;
}

.isc-nav__link .isc-btn__label {
  font-size: 10px;
  color: var(--isc-dark-sub);
}

.isc-nav__link:hover {
  color: var(--isc-accent-light);
}

.page-lp-international-school ::selection {
  background: #EDE7DF;
}

.page-lp-international-school .lp-isc-page {
  max-width: 100%;
  overflow-x: clip;
}

@keyframes iscRiseIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .page-lp-international-school [class*='isc-'] {
    animation: none !important;
  }
}

/* ---------------------------------------------------------------
   共通パーツ
   --------------------------------------------------------------- */
.isc-container {
  max-width: var(--isc-max);
  margin: 0 auto;
}

.isc-section {
  padding: 150px var(--isc-gutter);
  /* sticky ヘッダー分は引かない。padding-top:150px が見出しを押し下げるので
     0 のままで見出しは隠れず、セクションの地色が画面上端から始まる */
  scroll-margin-top: 0;
}

/* セクションの上に置くラベル（THE PROBLEM 等） */
/* line-height を明示しているのは、右カラムを見出しの上端に合わせるとき
   この高さを計算に使うため（--isc-eyebrow-space） */
.isc-eyebrow {
  margin: 0 0 22px;
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--isc-accent);
}

.isc-heading {
  margin: 0;
  font-family: var(--isc-display);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* 英語見出しの下に添える和文サブ。
   セクション見出しは「eyebrow(英語) → 見出し(英語) → 和文サブ → リード文(和文)」で統一する */
.isc-heading-ja {
  margin: 14px 0 0;
  font-family: var(--isc-jp);
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--isc-body-strong);
}

/* Why は黒地セクションなので、和文サブも明るい色に差し替える */
.isc-why__head .isc-heading-ja {
  color: var(--isc-dark-lead);
}

/* 和文本文の折り返し。放っておくと最終行に「る。」「ない。」だけが残る（ぶら下がり）。
   text-wrap: pretty はブラウザ側で前の行から文字を送って最終行を伸ばす。
   <br> での固定改行は画面幅が変わると意図しない位置で切れるため使わない。
   ※ .isc-hero__lead はデザイン由来で個別に指定済み */
.isc-problem__lead,
.isc-problem__text,
.isc-why__lead,
.isc-why__text,
.isc-designs__lead,
.isc-design__text,
.isc-typo__lead,
.isc-work__lead,
.isc-contact__lead {
  text-wrap: pretty;
}

/* 画像枠。素材が入るまでは data-slot の指示文を表示し、img が入ると自動で消える */
.isc-figure {
  position: relative;
  min-width: 0;
  overflow: hidden;
  background: #EDEBE7;
}

/* 枠の高さは height 固定と aspect-ratio が混在する。aspect-ratio の枠では
   親の height が auto になり、子の height:100% が解決できずに画像が内在サイズ
   （768px）で描画されてはみ出す。absolute で枠に貼り付けて確実に収める */
.isc-figure img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 見開き素材を横長の枠に入れると中央（＝ノド）が切り出されるため、
   左ページを主役にしたい枠ではこれを付けて左に寄せる。
   ※ 枠の比率は各セクション側で指定する（詳細度の都合。Work は下部を参照） */
.isc-figure--focus-left img {
  object-position: left center;
}

/* ---------------------------------------------------------------
   ヘッダー
   --------------------------------------------------------------- */
/* 黒地のヘッダー。Why と Contact の黒地セクションと呼応させ、
   sticky で常時見えるぶん、ページ全体を引き締める */
.isc-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px var(--isc-gutter);
  background: rgba(20, 22, 26, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--isc-dark-border);
  color: var(--isc-dark-text);
}

/* ロゴと提供元は縦積み（提供元を2行目に置く） */
.isc-header__brand {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.isc-header__logo {
  font-family: var(--isc-logo);
  font-size: 22px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--isc-dark-text);
}

.isc-header__by {
  font-family: var(--isc-jp);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--isc-dark-sub);
}

.isc-nav {
  display: flex;
  align-items: center;
  gap: 34px;
  font-size: 15px;
  letter-spacing: 0.06em;
  color: var(--isc-dark-lead);
}

/* ピル型は左右の余白が狭いと窮屈に見えるため、文字幅に対して十分に取る */
.isc-nav__cta {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 8px 28px;
  border: 1px solid var(--isc-dark-text);
  border-radius: 999px;
  letter-spacing: 0.1em;
  white-space: nowrap;
  color: var(--isc-dark-text);
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* CTA もメニューに合わせて英字を主にする */
.isc-nav__cta .isc-btn__en {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: none;
  opacity: 1;
}

.isc-nav__cta .isc-btn__label {
  font-size: 10px;
}

.isc-nav__cta:hover {
  background: var(--isc-dark-text);
  color: var(--isc-ink);
}

/* ---------------------------------------------------------------
   ヒーロー
   --------------------------------------------------------------- */
.isc-hero {
  position: relative;
  padding: 0 var(--isc-gutter) 72px;
  background: var(--isc-dark);
  color: var(--isc-dark-text);
}

/* 左にコピー、右は表紙を上・小さい2枚を下に積む。
   上余白は追従ヘッダー（約95px）を越える値にする */
.isc-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  grid-template-areas:
    "copy main"
    "copy gallery";
  gap: 16px 56px;
  align-items: end;
  padding: 136px 0 40px;
}

.isc-hero__copy {
  grid-area: copy;
}

.isc-hero__gallery {
  grid-area: gallery;
}

.isc-hero__copy {
  animation: iscRiseIn 0.9s ease both;
}

.isc-hero__eyebrow {
  margin-bottom: 34px;
}

/* 左カラムは 1280px 以上で 501px に固定されるため、縮めずに最大のまま置く */
.isc-hero__title {
  font-size: 104px;
  line-height: 0.98;
  letter-spacing: -0.02em;
}

.isc-hero__title em {
  font-style: italic;
}

.isc-hero__lead {
  margin: 28px 0 0;
  max-width: 30em;
  font-family: var(--isc-jp);
  font-weight: 400;
  font-size: 21px;
  line-height: 1.85;
  letter-spacing: 0.02em;
  color: var(--isc-dark-lead);
  text-wrap: pretty;
}

.isc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 44px;
}

/* 日本語ラベルの下に英字サブを重ねる2段組み（Contact の CTA と同じ型） */
.isc-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 14px;
  letter-spacing: 0.08em;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* 英字が主、和文が従。クラス名は __en / __label のままだが、
   表示上は __en が大きく上に来る（HTML の並びもその順） */
.isc-btn__en {
  font-size: 14px;
  letter-spacing: 0.06em;
  line-height: 1.3;
}

/* ボタンの和文は押す判断に直結するため、従属表示でも 11px を下回らせない */
.isc-btn__label {
  font-family: var(--isc-jp);
  font-size: 11px;
  line-height: 1.4;
  opacity: 0.78;
}

/* メインCTA。outline との差が英字の文字数任せにならないよう、
   横パディングと最低幅で明確に大きくする */
.isc-btn--solid {
  min-width: 250px;
  padding: 13px 40px;
  background: var(--isc-ink);
  color: var(--isc-dark-text);
  border-radius: 999px;
}

.isc-btn--solid:hover {
  background: var(--isc-accent);
  color: var(--isc-dark-text);
}

.isc-btn--outline {
  padding: 13px 30px;
  border: 1px solid var(--isc-line-mute);
  border-radius: 999px;
}

.isc-btn--outline:hover {
  border-color: var(--isc-ink);
}

.isc-btn--text {
  padding: 13px 12px;
  color: var(--isc-mute);
  border-bottom: 1px solid transparent;
}

.isc-btn--text:hover {
  color: var(--isc-ink);
}

.isc-hero__gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  animation: iscRiseIn 1.1s ease both;
}

/* 見開き全体を切らずに収めるため、素材と同じ比率にする */
.isc-hero__figure--main {
  grid-area: main;
  height: auto;
  aspect-ratio: 1800 / 1187;
}


/* 高さを固定すると素材（1376x768）の左右が切れて端の被写体が消える。
   素材と同じ比率にして全体を収める */
.isc-hero__figure--sub {
  height: auto;
  aspect-ratio: 1376 / 768;
}

/* 罫線は細い薄線ではなく太い濃線にする。細くて薄いと「区切りがある」以上の
   意味を持たないが、太く濃くすると構成要素として自立する。
   さらに左だけ画面端まで突き抜けさせ、コンテナの枠を破る（右はコンテナ端で止める）。
   「写真をページの端まで使う」という本文の主張と同じ発想 */
.isc-hero__badges {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  margin: 0;
  padding: 47px 0 0;
  list-style: none;
}

/* border-top と ::before に分けると、境目でサブピクセルのずれが出て
   太さが変わって見える。1本の帯として描き、右端をコンテナに合わせたうえで
   左へ 100vw 伸ばして画面端まで突き抜けさせる */
.isc-hero__badges::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100vw;
  height: 3px;
  background: var(--isc-dark-text);
}

/* ■. ヒーローの濃色反転（共通部品の色だけ差し替える） */
.isc-hero .isc-figure {
  background: var(--isc-dark-gap);
}

.isc-hero .isc-btn--solid {
  background: var(--isc-dark-text);
  color: var(--isc-dark);
}

.isc-hero .isc-btn--outline {
  border-color: var(--isc-dark-border);
}

.isc-hero .isc-btn--outline:hover {
  border-color: var(--isc-dark-text);
}

.isc-hero .isc-btn--text {
  color: var(--isc-dark-sub);
}

.isc-hero .isc-btn--text:hover {
  color: var(--isc-dark-text);
}

.isc-hero .isc-badge {
  color: var(--isc-dark-sub);
}

.isc-hero .isc-badge__ja {
  color: var(--isc-dark-lead);
}

/* 左端は isc-hero__copy（見出し・リード文・ボタン）と完全に揃える。
   頭の記号は置かない。ぶら下げにすると記号がコピーより外に出て不揃いになり、
   内側に入れるとテキストがずれるため。
   「タブに見える」対策は英字＋和文の2段組みと大文字解除で足りている */
.isc-badge {
  max-width: 15em;
}

/* 欧文は x-height のぶん同じ px でも小さく見える。小文字を含むラベルは
   和文より一回り大きくして初めて視覚的に揃う */
.isc-badge__en {
  display: block;
  font-size: 14px;
  letter-spacing: 0.06em;
  line-height: 1.5;
  color: var(--isc-mute-light);
}

.isc-badge__ja {
  display: block;
  margin-top: 4px;
  font-family: var(--isc-jp);
  font-size: 12px;
  line-height: 1.6;
  color: var(--isc-body);
}

/* ---------------------------------------------------------------
   The problem
   --------------------------------------------------------------- */
/* 01〜05 を1行に収めるための配分。
   最長は03の43文字（16px で 688px）。右カラムのテキスト幅がそれを上回るよう、
   比率を右に寄せ gap も詰めている。左は見出しの最長行
   「The albums we were shown」が折り返さない幅を確保 */
.isc-problem__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: 48px;
}

/* 左カラムが狭くなったぶん、広い画面でも最長行が折り返さないよう上限を下げる */
.isc-problem__title {
  font-size: clamp(34px, 3.4vw, 46px);
  line-height: 1.14;
}

.isc-problem__lead {
  margin: 26px 0 0;
  max-width: 26em;
  font-family: var(--isc-jp);
  font-size: 16px;
  line-height: 2;
  color: var(--isc-mute);
}

.isc-problem__list {
  display: grid;
  gap: 0;
}

.isc-problem__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: baseline;
  padding: 26px 0;
  border-top: 1px solid var(--isc-line);
}

.isc-problem__item:last-child {
  border-bottom: 1px solid var(--isc-line);
}

/* 番号は情報ではなく装飾として扱う。Bodoni の数字は大きくして初めて生きる */
.isc-problem__num {
  font-family: var(--isc-serif);
  font-size: 34px;
  font-style: italic;
  line-height: 1;
  color: var(--isc-num);
}

/* 番号／本文の2列グリッドの中で、和文と英文を縦に積む */
.isc-problem__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.isc-problem__text {
  margin: 0;
  font-family: var(--isc-jp);
  font-size: 16px;
  line-height: 1.9;
}

/* 英文は補助。和文より一段落とした級数と色にする */
.isc-problem__en {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  letter-spacing: 0.01em;
  color: var(--isc-mute);
}

/* ---------------------------------------------------------------
   Why schools choose us（黒地）
   --------------------------------------------------------------- */
.isc-why {
  background: var(--isc-dark);
  color: var(--isc-dark-text);
  padding: 130px var(--isc-gutter);
}

.isc-why__head {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 80px;
}

.isc-why__title {
  font-size: clamp(34px, 3.4vw, 54px);
  letter-spacing: normal;
}

.isc-why__lead {
  /* 左は eyebrow から始まるので、その高さぶん下げて見出しの上端に揃える */
  margin: calc(12px * 1.2 + 22px) 0 0;
  max-width: 30em;
  font-family: var(--isc-jp);
  font-size: 15px;
  line-height: 1.9;
  color: var(--isc-dark-sub);
}

/* gap を 1px にして背景色を罫線に見せる（デザインどおり）。
   カードが5枚なので5列。空きセルを作ると罫線が途切れるため列数と枚数を合わせる */
.isc-why__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--isc-dark-gap);
}

/* 5列になり1枚あたりが狭くなるぶん、左右の余白を詰める */
.isc-why__card {
  background: var(--isc-dark);
  padding: 44px 26px 54px;
}

.isc-why__num {
  margin: 0 0 24px;
  font-family: var(--isc-serif);
  font-size: 28px;
  font-style: italic;
  line-height: 1;
  color: var(--isc-accent);
}

.isc-why__card-title {
  margin: 0 0 16px;
  font-family: var(--isc-book);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
}

.isc-why__text {
  margin: 0;
  font-family: var(--isc-jp);
  font-size: 14px;
  line-height: 2;
  color: var(--isc-dark-sub);
}

/* ---------------------------------------------------------------
   人気デザイン3選
   --------------------------------------------------------------- */
.isc-designs__head {
  text-align: center;
  margin-bottom: 76px;
}

.isc-designs__title {
  margin: 0 auto;
  font-size: clamp(34px, 3.8vw, 58px);
  letter-spacing: normal;
}

.isc-designs__title-num {
  font-family: var(--isc-serif);
  font-style: italic;
}

/* 2行目「方向性が決まっていなくても…ご提案もいたします」は37文字あるため、
   32em だと「いたします」だけが next line に落ちる */
.isc-designs__lead {
  margin: 24px auto 0;
  max-width: 40em;
  font-family: var(--isc-jp);
  font-size: 16px;
  line-height: 2;
  color: var(--isc-mute);
}

.isc-designs__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
}

/* 素材は本の周囲に余白（植物・カップ・テーブル）が多く、そのまま入れると
   肝心の紙面が小さくなる。枠を横長にしたうえで拡大し、見開きに寄せる */
.isc-design__figure {
  height: auto;
  aspect-ratio: 3 / 2;
  margin-bottom: 28px;
}

.isc-design__figure img {
  transform: scale(1.22);
  transform-origin: center 52%;
}

.isc-design__num {
  margin: 0 0 8px;
  font-family: var(--isc-serif);
  font-size: 28px;
  font-style: italic;
  line-height: 1;
  color: var(--isc-accent);
}

.isc-design__title {
  margin: 0 0 14px;
  font-family: var(--isc-serif);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2;
}

.isc-design__text {
  margin: 0 0 20px;
  font-family: var(--isc-jp);
  font-size: 15px;
  line-height: 2;
  color: var(--isc-body);
}

.isc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* badges・書体見本と同じく英字＋和文の2段にする */
.isc-tag {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 7px 16px;
  border: 1px solid var(--isc-line-strong);
  border-radius: 999px;
  color: var(--isc-mute);
}

.isc-tag__en {
  font-size: 12px;
  letter-spacing: 0.06em;
  line-height: 1.3;
}

.isc-tag__ja {
  font-family: var(--isc-jp);
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1.4;
  color: var(--isc-mute-light);
}

.isc-designs__more {
  text-align: center;
  margin-top: 64px;
}

/* セクション末尾の導線。他と同じく英字を主・和文を従にした2段組み */
.isc-link-underline {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border-bottom: 1px solid var(--isc-ink);
  padding-bottom: 8px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.isc-link-underline .isc-btn__en {
  font-size: 15px;
}

.isc-link-underline .isc-btn__label {
  font-size: 11px;
}

.isc-link-underline:hover {
  color: var(--isc-accent);
  border-color: var(--isc-accent);
}

/* ---------------------------------------------------------------
   English Typography Collection
   --------------------------------------------------------------- */
.isc-typo {
  background: var(--isc-panel);
}

/* 左（eyebrow→見出し→和文サブ）と右（リード文）の揃え方は
   Why・Work と同じ baseline に統一する。級数が違っても文字の下端が揃う */
.isc-typo__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px;
  align-items: start;
  margin-bottom: 72px;
}

.isc-typo__title {
  font-size: clamp(34px, 3.8vw, 58px);
  line-height: 1.08;
  letter-spacing: normal;
}

.isc-typo__lead {
  /* 左は eyebrow から始まるので、その高さぶん下げて見出しの上端に揃える */
  margin: calc(12px * 1.2 + 22px) 0 0;
  font-family: var(--isc-jp);
  font-size: 16px;
  line-height: 2.1;
  color: var(--isc-mute-warm);
}

.isc-typo__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--isc-line-strong);
  border: 1px solid var(--isc-line-strong);
}

.isc-typo__cell {
  background: var(--isc-bg);
  padding: 46px 34px;
}

.isc-typo__sample {
  margin: 0 0 26px;
  line-height: 1.1;
}

/* 書体ごとの見本。級数はデザイン指定値をそのまま使う */
.isc-typo__sample--magazine {
  font-family: var(--isc-serif);
  font-size: 42px;
}

.isc-typo__sample--elegant {
  font-family: var(--isc-display);
  font-weight: 300;
  font-style: italic;
  font-size: 44px;
}

.isc-typo__sample--script {
  font-family: var(--isc-script);
  font-size: 40px;
  line-height: 1.2;
}

.isc-typo__sample--minimal {
  font-family: var(--isc-sans);
  font-weight: 300;
  font-size: 40px;
  letter-spacing: 0.04em;
}

.isc-typo__sample--natural {
  font-family: var(--isc-book);
  font-size: 32px;
  line-height: 1.25;
}

.isc-typo__sample--bold {
  font-family: var(--isc-black);
  font-size: 32px;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.isc-typo__label {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--isc-mute-light);
}

/* 英語ラベルの下に置く和文。リード文で挙げている6種と対応する */
.isc-typo__ja {
  margin: 7px 0 0;
  font-family: var(--isc-jp);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--isc-body);
}

.isc-typo__compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 34px;
  margin-top: 34px;
}

/* Designs と同じ素材を流用しているため、そのままだとテーブルや植物まで写って
   書体が小さくなる。大きく拡大して誌面に寄り、書体の違いを読み取れるようにする */
.isc-typo__compare-figure {
  height: 330px;
  margin-bottom: 16px;
}

/* 書体の違いを見せる枠なので、タイトルが必ず入る位置に寄せる。
   素材のタイトルは誌面の中央やや下にあるため、原点を下寄りにしている。
   拡大しすぎるとタイトルが枠外に出るので倍率は抑えめ */
.isc-typo__compare-figure img {
  transform: scale(1.35);
  transform-origin: center 62%;
}

/* 筆記体の手書きキャプションは右ページの上部に集まっているため、
   そこまで大きく寄せて書体が読み取れるようにする */
.isc-typo__compare-figure--script img {
  transform: scale(3);
  transform-origin: 100% 21%;
}

.isc-typo__compare-label {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--isc-mute-light);
}

.isc-typo__compare-ja {
  margin: 4px 0 0;
  font-family: var(--isc-jp);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--isc-body);
}

/* ---------------------------------------------------------------
   Selected work
   --------------------------------------------------------------- */
.isc-work__head {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 68px;
}

.isc-work__title {
  font-size: clamp(34px, 3.6vw, 56px);
  letter-spacing: normal;
}

.isc-work__lead {
  /* 左は eyebrow から始まるので、その高さぶん下げて見出しの上端に揃える */
  margin: calc(12px * 1.2 + 22px) 0 0;
  max-width: 30em;
  font-family: var(--isc-jp);
  font-size: 15px;
  line-height: 1.9;
  color: var(--isc-mute);
}

/* 左＝見開き全体（1800:1196）、右＝左ページ1枚分（900:1196）。
   高さを揃えるには幅が 2:1 になればよい（1800/1196 ÷ 900/1196 = 2） */
.isc-work__grid--lead {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 34px;
  margin-bottom: 34px;
}

.isc-work__grid--sub {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px;
}

.isc-work__figure {
  margin: 0;
}

/* 実際の作品なので、紙が置かれているように影を落として立たせる。
   地色が明るいぶん、濃さより広がりで見せる */
.isc-work__figure .isc-figure {
  box-shadow:
    0 20px 44px rgba(20, 22, 26, 0.12),
    0 6px 14px rgba(20, 22, 26, 0.06);
}

/* 高さ固定だと画面幅によって縦横比が変わってしまうため、素材の比率で持たせる */
.isc-work__figure--lead .isc-figure {
  height: auto;
  aspect-ratio: 1800 / 1196;
  margin-bottom: 20px;
}

/* 左ページだけを見せる枠は、左ページ1枚分の比率にする。
   この比率だと cover + object-position:left で左ページがちょうど収まる。
   直前の .isc-work__figure--lead .isc-figure（0-2-0）に負けないよう、
   セレクタを2クラスにして同じ詳細度にしたうえで後に置いている */
.isc-work__figure--lead .isc-figure--focus-left {
  aspect-ratio: 900 / 1196;
}

/* 高さ固定だと見開きの左右が切れるため、素材と同じ比率にして全体を収める */
.isc-work__figure--sub .isc-figure {
  height: auto;
  aspect-ratio: 1800 / 1196;
  margin-bottom: 18px;
}

.isc-work__caption--split {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: baseline;
}

/* 作品名は英字を主、和文を従にして縦に積む */
.isc-work__names {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.isc-work__name {
  font-family: var(--isc-book);
  font-size: 18px;
}

.isc-work__name-ja {
  font-family: var(--isc-jp);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--isc-mute);
}

/* タグも英字＋和文の2段。右端に揃える */
.isc-work__tags {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.isc-work__tag {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--isc-mute-light);
}

.isc-work__tag-ja {
  font-family: var(--isc-jp);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--isc-mute-light);
}

/* 下段3枚も作品名と和文を縦に積む（上段2枚と揃える） */
.isc-work__caption--simple {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--isc-book);
  font-size: 16px;
}

/* ---------------------------------------------------------------
   Let's talk（黒地パネル）
   --------------------------------------------------------------- */
/* Why と同じく全幅の黒地にする。中央に浮かぶパネルより、
   画面の端まで届く色面のほうがエディトリアルらしく強い */
.isc-contact {
  padding: 150px var(--isc-gutter);
  background: var(--isc-dark);
  color: var(--isc-dark-text);
  /* sticky ヘッダー分は引かない。padding-top:150px が見出しを押し下げるので
     0 のままで見出しは隠れず、セクションの地色が画面上端から始まる */
  scroll-margin-top: 0;
}

.isc-contact__panel {
  max-width: var(--isc-max);
  margin: 0 auto;
}

.isc-contact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 80px;
  align-items: start;
}

.isc-contact__eyebrow {
  margin-bottom: 26px;
  color: var(--isc-accent-light);
}

.isc-contact__title {
  font-size: clamp(36px, 4vw, 60px);
  line-height: 1.06;
  letter-spacing: normal;
}

.isc-contact__title em {
  font-style: italic;
}

/* 2行目「制作時期が決まっていない段階でのお問い合わせも大歓迎です。」は
   28文字＝476px あり、28em(476px) だと境界で折り返す */
.isc-contact__lead {
  margin: 30px 0 0;
  max-width: 30em;
  font-family: var(--isc-jp);
  font-size: 17px;
  line-height: 2;
  color: var(--isc-dark-lead);
}

.isc-contact__actions {
  display: grid;
  gap: 14px;
}

.isc-cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 26px 30px;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.isc-cta--primary {
  background: var(--isc-bg);
  color: var(--isc-ink);
}

.isc-cta--primary:hover {
  background: var(--isc-accent-light);
  color: var(--isc-ink);
}

.isc-cta--ghost {
  border: 1px solid var(--isc-dark-border);
  color: var(--isc-dark-text);
}

.isc-cta--ghost:hover {
  border-color: var(--isc-dark-text);
  color: var(--isc-dark-text);
}

/* 英字が主、和文が従（HTML も __sub が先に来る並び） */
.isc-cta__sub {
  display: block;
  font-size: 16px;
  letter-spacing: 0.04em;
  line-height: 1.35;
}

.isc-cta__label {
  display: block;
  margin-top: 6px;
  font-family: var(--isc-jp);
  font-size: 12px;
  color: var(--isc-mute);
}

/* 黒地では英字（主）は親の白を継承させ、和文（従）だけ明るいグレーに落とす */
.isc-cta--ghost .isc-cta__label {
  color: var(--isc-mute-light);
}

.isc-cta__arrow {
  font-size: 18px;
}

/* ---------------------------------------------------------------
   フッター
   --------------------------------------------------------------- */
.isc-footer {
  padding: 0 var(--isc-gutter) 70px;
}

/* 左＝ブランド情報、右＝連絡先。行数が違うので上揃えにする */
.isc-footer__inner {
  max-width: var(--isc-max);
  margin: 0 auto;
  padding-top: 34px;
  border-top: 1px solid var(--isc-line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 28px 40px;
}

/* ロゴ→会社名→住所は情報の種類が違うので、等間隔にせず段差をつける */
.isc-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.isc-footer__logo {
  font-family: var(--isc-logo);
  font-size: 21px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.isc-footer__company {
  font-family: var(--isc-jp);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--isc-mute-light);
}

/* 会社名との間だけ広げて、住所を別ブロックとして見せる */
.isc-footer__address {
  margin: 8px 0 0;
  font-family: var(--isc-jp);
  font-size: 12px;
  line-height: 1.7;
  color: var(--isc-mute-light);
}

/* 電話＋営業時間を縦に積み、その右にPマークを並べる */
.isc-footer__contact {
  display: flex;
  align-items: center;
  gap: 20px;
}

.isc-footer__tel-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* 電話番号 */
.isc-footer__tel {
  font-family: var(--isc-book);
  font-size: 26px;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.isc-footer__tel:hover {
  color: var(--isc-accent);
}

.isc-footer__hours {
  font-family: var(--isc-jp);
  font-size: 12px;
  color: var(--isc-mute-light);
}

.isc-footer__pmark {
  flex-shrink: 0;
  width: 56px;
  height: auto;
}

.isc-footer__meta {
  max-width: var(--isc-max);
  margin: 32px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--isc-line);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
}

.isc-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--isc-jp);
  font-size: 12px;
  color: var(--isc-mute-light);
}

.isc-footer__links a:hover {
  color: var(--isc-accent);
}

.isc-footer__copyright {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--isc-mute-light);
}

/* ---------------------------------------------------------------
   Problem だけ先に畳む（1279.98px 以下）
   2カラムのままだと右カラムが 03（688px 必要）を収めきれず、
   本文が中途半端に折り返すため、この幅から1カラムにする
   --------------------------------------------------------------- */
@media (max-width: 1279.98px) {
  /* ボタン3つが1行に収まらなくなる幅から、表紙を最上段へ出す。
     残りはコピーと小さい2枚の2列にして、最初の画面にコピーを残す */
  /* 右カラムは、小さい2枚の合計の高さがコピー側と釣り合う幅にする。
     これ以上広げるとボタン3つが1行に収まらない */
  .isc-hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
    grid-template-areas:
      "main main"
      "copy gallery";
    gap: 40px 36px;
    align-items: center;
    padding: 40px 0;
  }

  /* 縦積みでは左カラムが広がるので、画面幅に対する比率を上げて
     1280px との境目で級数が変わらないようにする */
  .isc-hero__title {
    font-size: clamp(52px, 8.5vw, 104px);
  }

  /* 幅いっぱいに広げると表紙だけで画面の高さを超えるため頭打ちにする */
  .isc-hero__figure--main {
    width: 100%;
    max-width: 760px;
    margin-inline: auto;
  }

  .isc-hero__gallery {
    grid-template-columns: minmax(0, 1fr);
  }

  .isc-problem__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
}

/* ---------------------------------------------------------------
   タブレット（991.98px 以下）
   多列グリッドだけを畳む。級数と余白はPCのまま
   --------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .page-lp-international-school {
    --isc-gutter: 36px;
  }

  .isc-section {
    padding: 110px var(--isc-gutter);
  }

  /* ロゴが 22 文字あるため、ナビと競合しないよう両方を詰める */
  .isc-header__logo {
    font-size: 18px;
  }

  .isc-nav {
    gap: 20px;
    font-size: 12px;
  }

  .isc-nav__cta {
    padding: 6px 22px;
  }

  .isc-hero__badges {
    gap: 20px 28px;
  }

  .isc-problem__inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }

  .isc-why {
    padding: 100px var(--isc-gutter);
  }

  .isc-why__grid,
  .isc-designs__grid,
  .isc-typo__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Why は5枚なので2列だと最後の1枚で空きセルができ、罫線が途切れる。
     5枚目を2列ぶんに広げて埋める */
  .isc-why__grid > .isc-why__card:last-child {
    grid-column: span 2;
  }

  .isc-typo__head {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    align-items: start;
  }

  .isc-contact {
    padding: 100px var(--isc-gutter);
  }

  .isc-contact__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
  }
}

/* ---------------------------------------------------------------
   モバイル（767.98px 以下）
   375px 幅を基準に、デザインの比率を保って縮小する
   --------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .page-lp-international-school {
    --isc-gutter: 24px;
  }

  .isc-section {
    padding: 84px var(--isc-gutter);
  }

  /* ヘッダー: セクションリンクは畳み、CTAだけ残す */
  .isc-header {
    padding: 16px var(--isc-gutter);
    gap: 12px;
  }

  .isc-header__brand {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  /* 375px 幅でロゴとCTAが1行に収まるところまで詰める */
  .isc-header__logo {
    font-size: 14px;
    letter-spacing: 0.06em;
  }

  .isc-header__by {
    font-size: 10px;
  }

  .isc-nav__link {
    display: none;
  }

  .isc-nav__cta {
    padding: 5px 18px;
  }

  /* 2列にするとコピーも画像も狭いので1列に戻す */
  .isc-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "main"
      "copy"
      "gallery";
    gap: 32px;
    padding: 28px 0;
  }

  .isc-hero__eyebrow {
    margin-bottom: 24px;
  }

  .isc-hero__lead {
    margin-top: 22px;
    font-size: 17px;
    line-height: 1.9;
  }

  .isc-hero__actions {
    margin-top: 32px;
    gap: 10px;
  }

  /* 375px 幅（内寸327px）に収まる範囲でメインCTAの優位を保つ */
  .isc-btn--solid {
    min-width: 210px;
    padding: 11px 28px;
  }

  .isc-btn--outline {
    padding: 11px 22px;
  }

  .isc-btn--text {
    padding: 11px 8px;
  }

  /* 小さい2枚は横に並べる */
  .isc-hero__gallery {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  /* 高さは aspect-ratio に任せる（素材の左右を切らないため） */

  /* 375px 幅では横に並べず1項目1行にする */
  .isc-hero__badges {
    gap: 14px;
    padding-top: 28px;
  }

  .isc-badge {
    width: 100%;
    max-width: none;
  }

  .isc-badge__en,
  .isc-badge__ja {
    font-size: 11px;
  }

  /* The problem */
  .isc-problem__inner {
    gap: 36px;
  }

  .isc-problem__lead {
    margin-top: 20px;
    font-size: 15px;
  }

  .isc-problem__item {
    gap: 16px;
    padding: 20px 0;
  }

  .isc-problem__num {
    font-size: 26px;
  }

  .isc-problem__text {
    font-size: 16px;
    line-height: 1.85;
  }

  /* Why schools choose us */
  .isc-why {
    padding: 76px var(--isc-gutter);
  }

  .isc-why__head {
    margin-bottom: 40px;
    gap: 16px;
  }

  .isc-why__lead {
    font-size: 14px;
  }

  .isc-why__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* 1列では span 2 が暗黙の2列目を作り、1列目が潰れてしまうので解除する
     （2列に畳むタブレット幅だけで有効な指定） */
  .isc-why__grid > .isc-why__card:last-child {
    grid-column: auto;
  }

  .isc-why__card {
    padding: 32px 24px 38px;
  }

  .isc-why__num {
    margin-bottom: 18px;
    font-size: 24px;
  }

  .isc-why__card-title {
    font-size: 18px;
  }

  /* 人気デザイン3選 */
  .isc-designs__head {
    margin-bottom: 44px;
  }

  .isc-designs__lead {
    margin-top: 18px;
    font-size: 15px;
  }

  .isc-designs__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 44px;
  }

  /* 高さは aspect-ratio に任せる（見開きの比率を保つため） */
  .isc-design__figure {
    margin-bottom: 20px;
  }

  .isc-design__num {
    font-size: 24px;
  }

  .isc-design__title {
    font-size: 26px;
  }

  .isc-design__text {
    font-size: 14px;
  }

  .isc-designs__more {
    margin-top: 40px;
  }

  /* Typography */
  .isc-typo__head {
    margin-bottom: 40px;
  }

  .isc-typo__lead {
    font-size: 15px;
  }

  .isc-typo__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .isc-typo__cell {
    padding: 32px 24px;
  }

  .isc-typo__sample {
    margin-bottom: 18px;
  }

  .isc-typo__sample--magazine { font-size: 34px; }
  .isc-typo__sample--elegant { font-size: 36px; }
  .isc-typo__sample--script { font-size: 32px; }
  .isc-typo__sample--minimal { font-size: 32px; }
  .isc-typo__sample--natural { font-size: 26px; }
  .isc-typo__sample--bold { font-size: 26px; }

  .isc-typo__compare {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin-top: 24px;
  }

  .isc-typo__compare-figure {
    height: 220px;
    margin-bottom: 12px;
  }

  /* Selected work */
  .isc-work__head {
    margin-bottom: 40px;
    gap: 16px;
  }

  .isc-work__lead {
    font-size: 14px;
  }

  .isc-work__grid--lead,
  .isc-work__grid--sub {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .isc-work__grid--lead {
    margin-bottom: 32px;
  }

  /* 高さは aspect-ratio に任せる（見開きの比率を保つため） */
  .isc-work__figure--lead .isc-figure {
    margin-bottom: 14px;
  }

  /* 画面が狭いぶん影は控えめに */
  .isc-work__figure .isc-figure {
    box-shadow:
      0 10px 24px rgba(20, 22, 26, 0.10),
      0 3px 8px rgba(20, 22, 26, 0.05);
  }

  /* 高さは aspect-ratio に任せる */
  .isc-work__figure--sub .isc-figure {
    margin-bottom: 14px;
  }

  .isc-work__name {
    font-size: 16px;
  }

  .isc-work__caption--split {
    gap: 12px;
  }

  /* Let's talk */
  .isc-contact {
    padding: 76px var(--isc-gutter);
  }

  .isc-contact__grid {
    gap: 36px;
  }

  .isc-contact__eyebrow {
    margin-bottom: 20px;
  }

  .isc-contact__lead {
    margin-top: 22px;
    font-size: 15px;
    line-height: 1.9;
  }

  .isc-cta {
    padding: 20px 22px;
    gap: 12px;
  }

  .isc-cta__label {
    font-size: 15px;
  }

  .isc-cta__sub {
    font-size: 11px;
    letter-spacing: 0.1em;
  }

  /* フッター */
  .isc-footer {
    padding: 0 var(--isc-gutter) 48px;
  }

  /* 幅が足りないので縦積みに戻す */
  .isc-footer__inner {
    flex-direction: column;
    gap: 28px;
  }

  .isc-footer__logo {
    font-size: 18px;
  }

  .isc-footer__tel {
    font-size: 24px;
  }

  .isc-footer__meta {
    margin-top: 24px;
    gap: 14px;
  }

  .isc-footer__links {
    gap: 10px 18px;
  }
}

/* ---------------------------------------------------------------
   小さいスマホ（479.98px 以下）
   --------------------------------------------------------------- */
@media (max-width: 479.98px) {
  /* 横に2枚並べると1枚が 200px を切り、写っているものが判別できない */
  .isc-hero__gallery {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  /* 幅いっぱいにすると表紙より目立つ。表紙は左半分がイラストで
     写真は右半分だけのため、同じ幅でも写真としては下の2枚が勝つ。
     幅を抑えて主役を表紙に戻し、中心を全幅の表紙にそろえる */
  .isc-hero__gallery > * {
    width: 70%;
    justify-self: center;
  }
}