@charset "UTF-8";
/* ==========================================================================
   UNIVCOOP キャリアナビ / style.css
   - design.md（色・タイポ・ボタン）＋ design-extension.md（トークン・各Rule）準拠
   - モバイルファースト（base=Small / min-width で Medium・Large を上書き）
   - 値はすべて --uc-* トークン経由（design-extension.md AI Output Rule）
   ========================================================================== */

/* ==========================================================================
   1. Design Tokens（本来 tokens.css 相当。3ファイル構成のため集約）
   ========================================================================== */
:root {
  /* --- Color（DESIGN.md 準拠 / 2026-07-13 Interactive カラー修正） --- */
  --uc-near-black: #1d1d1f;
  --uc-navy: #00267f;        /* メインカラー */
  --uc-white: #fff;
  --uc-gray: var(--uc-near-black);   /* 黒（濃色チップ背景） */
  --uc-on-dark: #f8f8f8;
  --uc-on-dark-soft: rgba(255,255,255,0.92);
  --uc-text-secondary: rgba(0,0,0,0.56);
  --uc-nav-text: rgba(0,0,0,0.8);

  /* ブランドアクセント（DESIGN.md Interactive） */
  --ucnavi-blue: #00267f;  /* 主要アクセント（リンク/アイコン/タグ/フォーカス/CTA）＝ネイビーに統一 */
  --uc-teal: #0c779d;        /* 二番手 */
  --uc-yellow: #ffc000;      /* 差し色（注意/タグ/矢印） */
  --uc-pink: #e52a56;        /* 差し色（注意/タグ/矢印） */
  --uc-gray-50: #f8f8f8;     /* 薄グレー（ほぼ白）・明るい面 */
  --uc-gray-100: #eaecf2;    /* 薄グレー・淡色背景（交互配置） */

  /* 会員導線ボタン（新規登録=赤 / ログイン=ネイビー） */
  --uc-register: var(--uc-pink);   /* ピンク（新規登録ボタン） */
  --uc-login: var(--uc-navy);

  /* 既存トークンの後方互換（値を新カラーへ再マッピング） */
  --uc-blue: var(--ucnavi-blue);     /* UC-Navi アクセントブルー */
  --uc-green: var(--uc-teal);          /* 旧 UC Green → ティール（二番手） */
  --uc-orange: var(--uc-pink);         /* 旧 UC Orange（注意）→ ピンク */
  --uc-blue-gray: var(--uc-gray-100);  /* セクション淡色背景 */

  /* テキスト用アクセシブル派生色（背景 #fff 上で AA 4.5:1 を確保） */
  --uc-blue-text: #00267f;   /* アクセント＝ネイビー（白背景で高コントラスト） */
  --uc-green-text: #0c779d;  /* ティール（AA 5.0:1） */
  --uc-orange-text: var(--uc-pink); /* ピンク #e52a56 */

  /* 役割別 */
  --uc-text: var(--uc-near-black);
  --uc-bg: var(--uc-white);
  --uc-bg-gray: var(--uc-blue-gray);
  --uc-bg-dark: var(--uc-navy);

  /* --- Font（design.md） --- */
  --uc-font-text: "SF Pro JP","SF Pro Text","SF Pro Icons","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",メイリオ,Meiryo,"ＭＳ Ｐゴシック","Helvetica Neue",Helvetica,Arial,sans-serif;
  --uc-font-display: "SF Pro JP","SF Pro Display","SF Pro Icons","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",メイリオ,Meiryo,"ＭＳ Ｐゴシック","Helvetica Neue",Helvetica,Arial,sans-serif;

  /* --- Spacing（design-extension.md） --- */
  --uc-space-0: 0; --uc-space-1: 4px; --uc-space-2: 8px; --uc-space-3: 12px;
  --uc-space-4: 16px; --uc-space-5: 24px; --uc-space-6: 32px; --uc-space-7: 40px;
  --uc-space-8: 48px; --uc-space-9: 64px; --uc-space-10: 80px; --uc-space-11: 96px;
  --uc-space-12: 120px; --uc-space-13: 160px;
  --uc-section-py: var(--uc-space-9); /* Small。Medium/Large で上書き */
  --uc-container-px: 16px;

  /* --- Container --- */
  --uc-container-hero: 1680px;
  --uc-container: 1260px;
  --uc-container-narrow: 768px;
  --uc-container-form: 560px;

  /* --- Grid --- */
  --uc-grid-columns: 12;
  --uc-grid-gutter: var(--uc-space-5);

  /* --- Radius --- */
  --uc-radius-sm: 4px; --uc-radius-md: 8px; --uc-radius-lg: 12px;
  --uc-radius-xl: 20px; --uc-radius-pill: 980px; --uc-radius-circle: 50%;

  /* --- Shadow / Elevation --- */
  --uc-shadow-0: none;
  --uc-shadow-1: 0 1px 2px rgba(0,0,0,0.06);
  --uc-shadow-2: 0 2px 8px rgba(0,0,0,0.08);
  --uc-shadow-3: 3px 5px 30px rgba(0,0,0,0.22);
  --uc-shadow-4: 0 12px 40px rgba(0,0,0,0.18);
  --uc-shadow-5: 0 24px 64px rgba(0,0,0,0.24);
  --uc-ring-focus: 0 0 0 3px rgba(0,38,127,0.2);

  /* --- Motion --- */
  --uc-dur-1: 100ms; --uc-dur-2: 150ms; --uc-dur-3: 200ms;
  --uc-dur-4: 300ms; --uc-dur-5: 400ms; --uc-dur-6: 600ms;
  --uc-ease-out: cubic-bezier(0.32,0.72,0,1);
  --uc-ease-in-out: cubic-bezier(0.65,0,0.35,1);
  --uc-ease-standard: cubic-bezier(0.4,0,0.2,1);

  /* --- z-index --- */
  --uc-z-raised: 10; --uc-z-sticky: 100; --uc-z-nav: 1000;
  --uc-z-dropdown: 1100; --uc-z-overlay: 1200; --uc-z-modal: 1300;

  /* --- Glass --- */
  --uc-glass-blur: saturate(180%) blur(20px);
  --uc-glass-light: rgba(255,255,255,0.72);

  /* --- Border --- */
  --uc-border-width: 1px;
  --uc-border-hairline: rgba(0,0,0,0.10);
  --uc-border-strong: rgba(0,0,0,0.18);
  --uc-border-on-dark: rgba(255,255,255,0.18);
  --uc-border-brand: var(--uc-blue);
  --uc-divider: var(--uc-border-hairline);

  /* --- Icon --- */
  --uc-icon-sm: 16px; --uc-icon-md: 20px; --uc-icon-lg: 24px; --uc-icon-xl: 32px;

  /* --- Ratio --- */
  --uc-ratio-wide: 16 / 9;
}

@media (min-width: 834px) {
  :root { --uc-section-py: var(--uc-space-10); --uc-container-px: 20px; }
}
@media (min-width: 1024px) {
  :root { --uc-section-py: var(--uc-space-11); --uc-container-px: 24px; }
}

/* ==========================================================================
   2. Reset / Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--uc-font-text);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.357px;
  color: var(--uc-text);
  background: var(--uc-bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: normal;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--uc-blue-text); text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--uc-font-display); font-weight: 600; margin: 0; }
p { margin: 0; }
ul, ol { list-style: none; margin: 0; padding: 0; }

:where(a, button, input, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--uc-ring-focus);
  border-radius: var(--uc-radius-sm);
}

/* ==========================================================================
   3. Utilities
   ========================================================================== */
.u-container {
  width: 100%;
  max-width: var(--uc-container);
  margin-inline: auto;
  padding-inline: var(--uc-container-px);
}
.u-container--hero { max-width: var(--uc-container-hero); }
.u-container--narrow { max-width: var(--uc-container-narrow); }

.u-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--uc-space-5);
}

/* SP / PC の出し分け（クーポンのモーダル判定と同じ 834px を境にする）
   表示側では display を指定しない（要素本来の値を保つ）。非表示側だけを
   !important で隠し、コンポーネント側の display 指定に負けないようにする。 */
@media (max-width: 833px) { .u-only-pc { display: none !important; } }
@media (min-width: 834px) { .u-only-sp { display: none !important; } }

.u-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.u-skiplink {
  position: absolute;
  left: var(--uc-space-2); top: -60px;
  z-index: var(--uc-z-modal);
  background: var(--uc-white);
  color: var(--uc-blue-text);
  padding: var(--uc-space-2) var(--uc-space-4);
  border-radius: var(--uc-radius-md);
  box-shadow: var(--uc-shadow-2);
  transition: top var(--uc-dur-2) var(--uc-ease-out);
}
.u-skiplink:focus { top: var(--uc-space-2); }

.u-divider { border: 0; border-top: var(--uc-border-width) solid var(--uc-divider); margin: var(--uc-space-6) 0; }
.u-divider--on-dark { border-top-color: var(--uc-border-on-dark); }

/* Section 共通見出し */
.sec__head { margin-bottom: var(--uc-space-7); }
.sec__head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--uc-space-4); flex-wrap: wrap; }
.sec__eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
  color: var(--uc-blue-text); margin-bottom: var(--uc-space-2);
}
.sec__title {
  font-size: clamp(26px, 4.4vw, 40px); line-height: 1.12; letter-spacing: -0.01em;
}
.sec__lead { margin-top: var(--uc-space-3); color: var(--uc-text-secondary); }
.sec__head-link { flex: none; }

/* テーマ別セクション背景（design.md セクション背景バリエーション） */
[data-theme] { padding-block: var(--uc-section-py); }
[data-theme="light"] { background: var(--uc-bg); color: var(--uc-text); }
[data-theme="gray"] { background: var(--uc-bg-gray); color: var(--uc-text); }
[data-theme="dark"] { background: var(--uc-bg-dark); color: var(--uc-on-dark); }
[data-theme="dark"] .sec__eyebrow { color: var(--uc-yellow); }
[data-theme="dark"] .sec__lead { color: var(--uc-on-dark-soft); }

/* ==========================================================================
   4. Components
   ========================================================================== */

/* --- Button（design.md：ピル型 / アクセントブルー） --- */
.c-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--uc-space-2);
  min-height: 44px; padding: var(--uc-space-2) var(--uc-space-6);
  font-family: var(--uc-font-text); font-size: 16px; font-weight: 500; line-height: 1.2;
  letter-spacing: normal; text-align: center;
  border: var(--uc-border-width) solid transparent; border-radius: var(--uc-radius-pill);
  background: transparent; color: var(--uc-text);
  transition: background-color var(--uc-dur-3) var(--uc-ease-out),
              color var(--uc-dur-3) var(--uc-ease-out),
              border-color var(--uc-dur-3) var(--uc-ease-out),
              transform var(--uc-dur-1) var(--uc-ease-out);
}
.c-btn:active { transform: scale(0.98); }
.c-btn--primary { background: var(--ucnavi-blue); color: var(--uc-white); }
.c-btn--outline { border-color: var(--ucnavi-blue); color: var(--uc-blue-text); }
.c-btn--ghost { color: var(--uc-blue-text); }
.c-btn--on-dark { color: var(--uc-on-dark); border-color: var(--uc-border-on-dark); }
.c-btn--sm { min-height: 36px; padding: var(--uc-space-2) var(--uc-space-4); font-size: 14px; }
.c-btn--lg { min-height: 52px; padding: var(--uc-space-3) var(--uc-space-8); font-size: 17px; }
@media (hover: hover) and (pointer: fine) {
  .c-btn--primary:hover { background: rgba(0,38,127,0.85); }
  .c-btn--outline:hover { background: rgba(0,38,127,0.06); }
  .c-btn--ghost:hover { background: rgba(0,38,127,0.06); }
  .c-btn--on-dark:hover { background: rgba(255,255,255,0.12); }
}

/* 濃紺（data-theme="dark"）セクション上の主要ボタンは黄色で視認性を確保 */
[data-theme="dark"] .c-btn--primary { background: var(--uc-yellow); color: var(--uc-navy); }
@media (hover: hover) and (pointer: fine) {
  [data-theme="dark"] .c-btn--primary:hover { background: rgba(255,192,0,0.85); }
}

/* 黄色アクセントのボタン。上の dark テーマ時の --primary と同じ配色を、
   明るい面（light / gray）でも使いたい箇所のための修飾クラス。 */
.c-btn--accent { background: var(--uc-yellow); color: var(--uc-navy); }
@media (hover: hover) and (pointer: fine) {
  .c-btn--accent:hover { background: rgba(255,192,0,0.85); }
}

/* --- Tag / Badge / Chip --- */
.c-tag {
  display: inline-flex; align-items: center;
  padding: 2px var(--uc-space-3); font-size: 12px; font-weight: 600; letter-spacing: normal;
  border-radius: var(--uc-radius-pill); background: rgba(0,38,127,0.10); color: var(--uc-blue-text);
}
.c-tag--sm { font-size: 11px; padding: 2px var(--uc-space-2); }
.c-tag--info { background: rgba(0,38,127,0.10); color: var(--uc-blue-text); }
.c-tag--success { background: rgba(12,119,157,0.12); color: var(--uc-green-text); }
.c-tag--warn { background: rgba(229,42,86,0.12); color: var(--uc-orange-text); }
.c-tag--neutral { background: rgba(0,0,0,0.06); color: var(--uc-nav-text); }
.c-tag--host { background: var(--uc-pink); color: var(--uc-white); }   /* 主催などを強調（ソリッドピンク） */

.c-badge {
  display: inline-flex; align-items: center;
  padding: 2px var(--uc-space-2); font-size: 11px; font-weight: 700; letter-spacing: normal;
  border-radius: var(--uc-radius-sm); color: var(--uc-white); background: var(--uc-gray);
}
.c-badge--info { background: var(--uc-blue); }
.c-badge--success { background: var(--uc-green); }
.c-badge--warn { background: var(--uc-orange); }

/* --- Avatar --- */
.c-avatar { display: inline-block; overflow: hidden; border-radius: var(--uc-radius-circle); background: var(--uc-blue-gray); flex: none; }
.c-avatar--md { width: 48px; height: 48px; }
.c-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* --- SearchBox --- */
.c-searchbox {
  display: flex; align-items: center; gap: var(--uc-space-2);
  padding: 0 var(--uc-space-3); min-height: 40px;
  background: rgba(0,0,0,0.05); border-radius: var(--uc-radius-pill);
}
.c-searchbox__icon { display: inline-flex; color: var(--uc-text-secondary); }
.c-searchbox__input {
  border: 0; background: transparent; font: inherit; font-size: 14px; letter-spacing: normal;
  padding: var(--uc-space-2) 0; min-width: 8ch; width: 100%; color: var(--uc-text);
}
.c-searchbox__input:focus-visible { outline: none; box-shadow: none; }

/* --- Card 基底 --- */
.c-card {
  display: flex; flex-direction: column;
  background: var(--uc-white); border: var(--uc-border-width) solid var(--uc-border-hairline);
  border-radius: var(--uc-radius-lg); overflow: hidden; height: 100%;
  transition: box-shadow var(--uc-dur-3) var(--uc-ease-out), transform var(--uc-dur-3) var(--uc-ease-out);
}
.c-card__media { margin: 0; aspect-ratio: var(--uc-ratio-wide); background: var(--uc-blue-gray); }
.c-card__media img { width: 100%; height: 100%; object-fit: cover; }
.c-card__body { display: flex; flex-direction: column; gap: var(--uc-space-2); padding: var(--uc-space-5); flex: 1; }
.c-card__meta { display: flex; align-items: center; gap: var(--uc-space-2); flex-wrap: wrap; }
.c-card__title { font-size: 19px; line-height: 1.35; }
.c-card__title--lg { font-size: clamp(22px, 3vw, 28px); }
.c-card__text { color: var(--uc-text-secondary); font-size: 15px; }
.c-card__actions { margin-top: auto; padding-top: var(--uc-space-3); display: flex; flex-wrap: wrap; gap: var(--uc-space-2); }
.c-card__link-a { color: inherit; }
@media (hover: hover) and (pointer: fine) {
  .c-card--link:hover, .c-card--pickup:hover { box-shadow: var(--uc-shadow-3); transform: translateY(-2px); }
  .c-card--link:hover .c-category__title { color: var(--uc-blue-text); }
  .c-card__link-a:hover { text-decoration: underline; }
}

/* --- Category Card --- */
.c-category { align-items: flex-start; gap: var(--uc-space-3); padding: var(--uc-space-5); text-align: left; }
.c-category__icon { display: inline-flex; color: var(--uc-blue-text); }
.c-category__icon svg { width: 72px; height: 72px; }
.c-category__title { font-size: 18px; line-height: 1.3; color: var(--uc-text); transition: color var(--uc-dur-2) var(--uc-ease-out); }
.c-category__text { font-size: 14px; color: var(--uc-text-secondary); }

/* --- Feature Card --- */
.c-feature {
  display: flex; flex-direction: column; gap: var(--uc-space-3);
  padding: var(--uc-space-6); height: 100%;
  background: var(--uc-white); border: var(--uc-border-width) solid var(--uc-border-hairline);
  border-radius: var(--uc-radius-lg);
  transition: box-shadow var(--uc-dur-3) var(--uc-ease-out), transform var(--uc-dur-3) var(--uc-ease-out);
}
.c-feature--plain { border-color: var(--uc-border-hairline); }
.c-feature__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--uc-radius-md); background: rgba(0,38,127,0.10); color: var(--uc-blue); }
.c-feature__index { font-family: var(--uc-font-display); font-size: 14px; font-weight: 700; color: var(--uc-blue-text); }
.c-feature__num { font-family: var(--uc-font-display); font-weight: 700; font-size: 20px; line-height: 1; }
.c-feature__title { font-size: 19px; line-height: 1.35; }
.c-feature__text { font-size: 15px; color: var(--uc-text-secondary); }
.c-feature__more { margin-top: auto; font-size: 14px; font-weight: 600; color: var(--uc-blue-text); display: inline-flex; gap: var(--uc-space-1); }
/* --- 行き先カード（c-destination）：左に写真16:9 / 右に国名・都市名・PDFボタン --- */
.c-destination {
  display: grid; grid-template-columns: 40% 1fr; align-items: center; gap: var(--uc-space-4);
  height: 100%; padding: var(--uc-space-4);
  background: var(--uc-white); border: var(--uc-border-width) solid var(--uc-border-hairline);
  border-radius: var(--uc-radius-lg);
}
.c-destination__media { margin: 0; aspect-ratio: var(--uc-ratio-wide); overflow: hidden; background: var(--uc-blue-gray); border-radius: var(--uc-radius-md); }
.c-destination__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.c-destination__body { display: grid; gap: var(--uc-space-2); justify-items: start; }
.c-destination__country { font-family: var(--uc-font-display); font-weight: 600; font-size: 18px; line-height: 1.35; }
.c-destination__cities { font-size: 14px; color: var(--uc-text-secondary); }
@media (min-width: 640px) {
  .c-destination { padding: var(--uc-space-5); gap: var(--uc-space-5); }
  .c-destination__country { font-size: 19px; }
  .c-destination__cities { font-size: 15px; }
}
/* アイコン左・テキスト右の2カラム Feature カード（PCでもこの並びを維持）。
   ≦833px では既存の共通ルールが同じ配置を担当するため、ここでは主にPC幅で効く。 */
.c-feature--row {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon title" "icon text";
  column-gap: var(--uc-space-4); row-gap: var(--uc-space-1);
  align-items: start; align-content: start;
}
.c-feature--row > .c-feature__icon { grid-area: icon; width: 68px; height: 68px; }
.c-feature--row > .c-feature__icon svg { width: 34px; height: 34px; }
.c-feature--row > .c-feature__title { grid-area: title; }
.c-feature--row > .c-feature__text { grid-area: text; }
.c-feature--link { text-decoration: none; color: inherit; }
@media (hover: hover) and (pointer: fine) {
  .c-feature--link:hover { box-shadow: var(--uc-shadow-3); transform: translateY(-2px); }
}

/* --- Agent Card（留学エージェント WEBカウンセリング：上部ネイビー帯＋写真なし） --- */
.c-agentcard { display: flex; flex-direction: column; height: 100%; background: var(--uc-white); border: var(--uc-border-width) solid var(--uc-border-hairline); border-radius: var(--uc-radius-lg); overflow: hidden; transition: box-shadow var(--uc-dur-3) var(--uc-ease-out), transform var(--uc-dur-3) var(--uc-ease-out); }
.c-agentcard__head { padding: var(--uc-space-4) var(--uc-space-5); background: var(--uc-navy); color: var(--uc-white); }
.c-agentcard__name { font-size: 18px; line-height: 1.4; color: var(--uc-white); }
.c-agentcard__body { display: flex; flex-direction: column; gap: var(--uc-space-3); padding: var(--uc-space-5); flex: 1; }
.c-agentcard__label { font-size: 13px; font-weight: 600; color: var(--uc-text-secondary); }
.c-agentcard__methods { display: flex; flex-wrap: wrap; gap: var(--uc-space-2); }
.c-agentcard__actions { margin-top: auto; padding-top: var(--uc-space-3); }
@media (hover: hover) and (pointer: fine) {
  .c-agentcard:hover { box-shadow: var(--uc-shadow-3); transform: translateY(-2px); }
}

/* ==========================================================================
   提携サービス紹介（他社サービス・外部リンク）
   本体カードと区別するための3パターン。ページに合わせて使い分ける。
   - 案A: c-partnerlist    … 写真なし・横並びリスト（最軽量／別ページ流用向き）
   - 案B: c-partnerbanner  … 提供元バナー画像を掲出（画像アセットがある場合）
   - 案C: c-partnercallout … 左アクセントバーの囲み（お知らせ調）
   共通グリッド: .sec-partner__list（.--2 で2カラム）
   ========================================================================== */
.sec-partner__list { grid-template-columns: 1fr; }
@media (min-width: 640px) { .sec-partner__list--2 { grid-template-columns: repeat(2, 1fr); } }

/* 案A: 提携サービス帯（写真なしリスト） */
.c-partnerlist { display: flex; flex-direction: column; background: var(--uc-white); border: var(--uc-border-width) solid var(--uc-border-hairline); border-radius: var(--uc-radius-lg); overflow: hidden; }
.c-partnerlist__item { display: flex; align-items: center; gap: var(--uc-space-4); padding: var(--uc-space-4) var(--uc-space-5); }
.c-partnerlist__item + .c-partnerlist__item { border-top: var(--uc-border-width) solid var(--uc-border-hairline); }
.c-partnerlist__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--uc-radius-circle); background: rgba(0,38,127,0.10); color: var(--uc-blue-text); }
.c-partnerlist__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.c-partnerlist__name { font-size: 16px; line-height: 1.4; color: var(--uc-text); }
.c-partnerlist__text { font-size: 14px; color: var(--uc-text-secondary); }
.c-partnerlist__more { flex: none; font-size: 14px; font-weight: 600; color: var(--uc-blue-text); display: inline-flex; align-items: center; gap: var(--uc-space-1); white-space: nowrap; }
a.c-partnerlist__item { color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  a.c-partnerlist__item:hover { background: rgba(0,38,127,0.04); }
  a.c-partnerlist__item:hover .c-partnerlist__more { text-decoration: underline; }
}
@media (max-width: 559px) {
  .c-partnerlist__item { flex-wrap: wrap; }
  .c-partnerlist__more { width: 100%; padding-left: calc(48px + var(--uc-space-4)); }
}

/* 案B: 提供元バナー掲出 */
.c-partnerbanner { display: flex; flex-direction: column; gap: var(--uc-space-3); }
.c-partnerbanner__name { font-size: 15px; line-height: 1.4; color: var(--uc-text); }
.c-partnerbanner__link { display: block; border-radius: var(--uc-radius-md); overflow: hidden; border: var(--uc-border-width) solid var(--uc-border-hairline); transition: box-shadow var(--uc-dur-3) var(--uc-ease-out), transform var(--uc-dur-3) var(--uc-ease-out); }
.c-partnerbanner__link img { width: 100%; height: auto; display: block; }
@media (hover: hover) and (pointer: fine) {
  .c-partnerbanner__link:hover { box-shadow: var(--uc-shadow-3); transform: translateY(-2px); }
}

/* 案C: インフォ・コールアウト（左アクセントバー） */
.c-partnercallout { display: flex; flex-direction: column; gap: var(--uc-space-2); height: 100%; background: var(--uc-white); border: var(--uc-border-width) solid var(--uc-border-hairline); border-left: 3px solid var(--uc-navy); border-radius: 0 var(--uc-radius-md) var(--uc-radius-md) 0; padding: var(--uc-space-4) var(--uc-space-5); }
.c-partnercallout__head { display: flex; align-items: center; gap: var(--uc-space-2); color: var(--uc-navy); font-size: 15px; font-weight: 600; }
.c-partnercallout__text { font-size: 14px; color: var(--uc-text-secondary); }
.c-partnercallout__more { margin-top: auto; padding-top: var(--uc-space-2); font-size: 14px; font-weight: 600; color: var(--uc-blue-text); display: inline-flex; align-items: center; gap: var(--uc-space-1); }

/* --- Course Card --- */
.c-course { display: flex; flex-direction: column; background: var(--uc-white); border: var(--uc-border-width) solid var(--uc-border-hairline); border-radius: var(--uc-radius-lg); overflow: hidden; height: 100%; transition: box-shadow var(--uc-dur-3) var(--uc-ease-out), transform var(--uc-dur-3) var(--uc-ease-out); }
.c-course__media { position: relative; margin: 0; aspect-ratio: var(--uc-ratio-wide); background: var(--uc-blue-gray); }
.c-course__media img { width: 100%; height: 100%; object-fit: cover; }
.c-course__badge { position: absolute; top: var(--uc-space-3); left: var(--uc-space-3); }
.c-course__body { display: flex; flex-direction: column; gap: var(--uc-space-2); padding: var(--uc-space-5); flex: 1; }
.c-course__tags { display: flex; gap: var(--uc-space-2); flex-wrap: wrap; }
.c-course__title { font-size: 18px; line-height: 1.35; }
.c-course__meta { font-size: 14px; color: var(--uc-text-secondary); }
.c-course__actions { margin-top: auto; padding-top: var(--uc-space-3); display: flex; flex-wrap: wrap; gap: var(--uc-space-2); }
@media (hover: hover) and (pointer: fine) { .c-course:hover { box-shadow: var(--uc-shadow-3); transform: translateY(-2px); } }

/* --- Event Card --- */
.c-event {
  display: grid; grid-template-columns: auto 1fr; gap: var(--uc-space-4);
  align-items: center; padding: var(--uc-space-5);
  background: var(--uc-white); border: var(--uc-border-width) solid var(--uc-border-hairline);
  border-radius: var(--uc-radius-lg);
}
.c-event + .c-event { margin-top: var(--uc-space-4); }
.c-event__date { display: grid; place-items: center; width: 72px; padding: var(--uc-space-2); background: var(--uc-blue-gray); border-radius: var(--uc-radius-md); }
.c-event__date time { display: grid; place-items: center; line-height: 1; }
.c-event__month { font-size: 12px; color: var(--uc-text-secondary); }
.c-event__day { font-family: var(--uc-font-display); font-size: 28px; font-weight: 600; }
.c-event__weekday { font-size: 11px; color: var(--uc-text-secondary); }
.c-event__body { display: flex; flex-direction: column; gap: var(--uc-space-1); min-width: 0; }
.c-event__tags { display: flex; align-items: center; gap: var(--uc-space-2); flex-wrap: wrap; }
.c-event__title { font-size: 18px; line-height: 1.35; }
.c-event__meta { font-size: 14px; color: var(--uc-text-secondary); }
.c-event__actions { grid-column: 2; }
/* 複数日程バリアント：左バッジは案4のカレンダータイル、開催日は本文に記載 */
.c-event__cal { display: grid; place-items: center; gap: var(--uc-space-1); width: 72px; padding: var(--uc-space-3) var(--uc-space-2); background: var(--uc-blue-gray); border-radius: var(--uc-radius-md); color: var(--uc-blue-text); text-align: center; }
.c-event__cal-icon { display: inline-flex; }
.c-event__cal-label { font-size: 11px; color: var(--uc-text-secondary); line-height: 1.25; }
@media (hover: hover) and (pointer: fine) { .c-event:hover { box-shadow: var(--uc-shadow-3); } }

/* --- Article Card --- */
.c-article { display: flex; flex-direction: column; background: var(--uc-white); border: var(--uc-border-width) solid var(--uc-border-hairline); border-radius: var(--uc-radius-lg); overflow: hidden; height: 100%; transition: box-shadow var(--uc-dur-3) var(--uc-ease-out), transform var(--uc-dur-3) var(--uc-ease-out); }
.c-article__media { margin: 0; aspect-ratio: var(--uc-ratio-wide); background: var(--uc-blue-gray); }
.c-article__media img { width: 100%; height: 100%; object-fit: cover; }
.c-article__body { display: flex; flex-direction: column; gap: var(--uc-space-2); padding: var(--uc-space-5); flex: 1; }
.c-article__meta { display: flex; align-items: center; gap: var(--uc-space-3); flex-wrap: wrap; }
.c-article__date { font-size: 13px; color: var(--uc-text-secondary); }
.c-article__title { font-size: 17px; line-height: 1.4; }
.c-article__text { font-size: 14px; line-height: 1.6; color: var(--uc-text-secondary); }
@media (hover: hover) and (pointer: fine) { .c-article:hover { box-shadow: var(--uc-shadow-3); transform: translateY(-2px); } }

/* --- News Item --- */
.c-news { display: flex; align-items: center; gap: var(--uc-space-3); flex-wrap: wrap; padding: var(--uc-space-4) 0; }
.c-news + .c-news { border-top: var(--uc-border-width) solid var(--uc-border-hairline); }
.c-news__date { font-size: 14px; color: var(--uc-text-secondary); font-variant-numeric: tabular-nums; }
.c-news__link { flex: 1 1 100%; color: var(--uc-text); font-size: 16px; order: 3; }
@media (min-width: 834px) { .c-news__link { flex: 1; order: 0; } }
@media (hover: hover) and (pointer: fine) { .c-news__link:hover { text-decoration: underline; color: var(--uc-blue-text); } }

/* --- Voice Card --- */
.c-voice {
  display: flex; flex-direction: column; gap: var(--uc-space-4);
  padding: var(--uc-space-6);
  background: rgba(255,255,255,0.06); border: var(--uc-border-width) solid var(--uc-border-on-dark);
  border-radius: var(--uc-radius-lg); height: 100%;
}
.c-voice__body { margin: 0; font-size: 16px; line-height: 1.7; color: var(--uc-on-dark); }
.c-voice__body::before { content: "“"; }
.c-voice__body::after { content: "”"; }
.c-voice__author { display: flex; align-items: center; gap: var(--uc-space-3); }
.c-voice__meta { display: flex; flex-direction: column; }
.c-voice__name { font-style: normal; font-weight: 600; font-size: 15px; }
.c-voice__attr { font-size: 13px; color: var(--uc-on-dark-soft); }

/* --- Statistic Card --- */
.c-statistic { text-align: center; padding: var(--uc-space-5); }
.c-statistic__value { font-family: var(--uc-font-display); font-size: clamp(36px, 6vw, 56px); font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: var(--uc-blue-text); }
.c-statistic__unit { font-size: 0.4em; margin-left: 2px; color: var(--uc-text); }
.c-statistic__label { margin-top: var(--uc-space-3); font-size: 14px; color: var(--uc-text-secondary); }

/* 参加の目安（theme-tour）：モバイルで2×2表示。背景なし・外枠なしで、
   中央に十字（縦＋横）の 1px ボーダーのみで4分割する。 */
@media (max-width: 639px) {
  .sec-statistics__list.sec-statistics__list--tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .sec-statistics__list--tiles .c-statistic { height: 100%; padding: var(--uc-space-5) var(--uc-space-4); background: none; border: 0; border-radius: 0; }
  /* 左上：右＋下、右上：下、左下：右 → 中央に十字ができる（外周には線を出さない） */
  .sec-statistics__list--tiles .c-statistic:nth-child(1) { border-right: 1px solid var(--uc-border-hairline); border-bottom: 1px solid var(--uc-border-hairline); }
  .sec-statistics__list--tiles .c-statistic:nth-child(2) { border-bottom: 1px solid var(--uc-border-hairline); }
  .sec-statistics__list--tiles .c-statistic:nth-child(3) { border-right: 1px solid var(--uc-border-hairline); }
}

/* --- Accordion / FAQ Item --- */
.c-accordion { border-top: var(--uc-border-width) solid var(--uc-border-hairline); }
.c-faq-item { border-bottom: var(--uc-border-width) solid var(--uc-border-hairline); }
.c-faq-item__tags { display: flex; flex-wrap: wrap; gap: var(--uc-space-2); margin: 0; padding: var(--uc-space-5) var(--uc-space-1) 0; }
.c-faq-item__tags + .c-faq-item__heading .c-faq-item__question { padding-top: var(--uc-space-2); }
.c-faq-item__heading { margin: 0; }
.c-faq-item__question {
  display: flex; align-items: center; justify-content: space-between; gap: var(--uc-space-4);
  width: 100%; padding: var(--uc-space-5) var(--uc-space-1); min-height: 44px;
  background: transparent; border: 0; text-align: left;
  font-family: var(--uc-font-display); font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--uc-text);
}
.c-faq-item__icon { position: relative; flex: none; width: 20px; height: 20px; }
.c-faq-item__icon::before, .c-faq-item__icon::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px;
  background: var(--uc-blue-text); transform: translate(-50%,-50%);
  transition: transform var(--uc-dur-3) var(--uc-ease-out), opacity var(--uc-dur-3) var(--uc-ease-out);
}
.c-faq-item__icon::after { transform: translate(-50%,-50%) rotate(90deg); }
.c-faq-item__question[aria-expanded="true"] .c-faq-item__icon::after { opacity: 0; transform: translate(-50%,-50%) rotate(0); }
.c-faq-item__answer { padding: 0 var(--uc-space-1) var(--uc-space-5); color: var(--uc-text-secondary); font-size: 15px; line-height: 1.7; }

/* ==========================================================================
   5. Sections
   ========================================================================== */

/* --- Header --- */
.sec-header {
  position: sticky; top: 0; z-index: var(--uc-z-nav);
  background: var(--uc-glass-light);
  backdrop-filter: var(--uc-glass-blur); -webkit-backdrop-filter: var(--uc-glass-blur);
  border-bottom: var(--uc-border-width) solid var(--uc-border-hairline);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sec-header { background: var(--uc-white); }
}
.sec-header__inner { position: relative; display: flex; align-items: center; gap: var(--uc-space-3); min-height: 60px; padding-block: 0; }
.sec-header__logo { display: inline-flex; align-items: center; gap: var(--uc-space-2); color: var(--uc-text); font-weight: 600; }
.sec-header__logo-img { width: auto; height: 28px; }
.sec-header__logo-text { font-family: var(--uc-font-display); font-size: 16px; white-space: nowrap; }
.sec-header__actions { display: flex; align-items: center; gap: var(--uc-space-2); margin-left: auto; }

/* 会員導線ボタン（四角・アイコン上／テキスト下・中央寄せ・白文字） */
.c-authbtn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  width: 60px; height: 60px; padding: var(--uc-space-1);
  color: var(--uc-white); background: var(--uc-gray);
  border: 0; border-radius: 0; /* 角丸にしない（四角） */
  font-size: 11px; font-weight: 600; line-height: 1.1; letter-spacing: normal; text-align: center;
  transition: filter var(--uc-dur-3) var(--uc-ease-out), transform var(--uc-dur-1) var(--uc-ease-out);
}
.c-authbtn:active { transform: scale(0.98); }
.c-authbtn__icon { display: inline-flex; }
.c-authbtn__icon svg { width: 22px; height: 22px; }
.c-authbtn__label { color: var(--uc-white); }
.c-authbtn--register { background: var(--uc-register); }
.c-authbtn--login { background: var(--uc-login); }
@media (hover: hover) and (pointer: fine) { .c-authbtn:hover { filter: brightness(1.08); } }

/* --- Nav / Mega --- */
.sec-nav__toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; background: transparent; }
.sec-nav__toggle-bar, .sec-nav__toggle-bar::before, .sec-nav__toggle-bar::after {
  content: ""; display: block; width: 22px; height: 2px; background: var(--uc-text); border-radius: 2px;
  transition: transform var(--uc-dur-3) var(--uc-ease-out), opacity var(--uc-dur-2) var(--uc-ease-out);
}
.sec-nav__toggle-bar { position: relative; }
.sec-nav__toggle-bar::before { position: absolute; top: -7px; }
.sec-nav__toggle-bar::after { position: absolute; top: 7px; }
.sec-nav__toggle[aria-expanded="true"] .sec-nav__toggle-bar { background: transparent; }
.sec-nav__toggle[aria-expanded="true"] .sec-nav__toggle-bar::before { transform: translateY(7px) rotate(45deg); }
.sec-nav__toggle[aria-expanded="true"] .sec-nav__toggle-bar::after { transform: translateY(-7px) rotate(-45deg); }

/* Mobile: ドロワー */
.sec-nav__list {
  position: fixed; inset: 56px 0 auto 0; max-height: calc(100dvh - 56px); overflow-y: auto;
  display: none; flex-direction: column; padding: var(--uc-space-3) var(--uc-container-px) var(--uc-space-8);
  background: #f8f8f8; z-index: var(--uc-z-dropdown);
  border-bottom: var(--uc-border-width) solid var(--uc-border-hairline);
}
.sec-nav[data-open="true"] .sec-nav__list { display: flex; }
.sec-nav__item { border-bottom: var(--uc-border-width) solid var(--uc-border-hairline); }
.sec-nav__link {
  display: flex; align-items: center; gap: var(--uc-space-2); width: 100%;
  padding: var(--uc-space-4) var(--uc-space-1); min-height: 48px;
  background: transparent; border: 0; text-align: left;
  font-family: var(--uc-font-display); font-size: 16px; font-weight: 500; color: var(--uc-text);
}
.sec-nav__link-icon { display: inline-flex; flex: none; color: var(--uc-blue-text); }
.sec-nav__link-icon svg { width: 20px; height: 20px; }
/* 現在いるページ（トップレベル項目）を強調：テキスト＋アイコンをアクセント色＋太字に */
.sec-nav__link[aria-current="page"] { color: var(--uc-blue-text); font-weight: 700; }
.sec-nav__link[aria-current="page"] .sec-nav__link-icon { color: var(--uc-blue-text); }
.sec-nav__mega[hidden] { display: none; }
.sec-nav__mega { padding: 0 var(--uc-space-1) var(--uc-space-4); }
.sec-nav__col + .sec-nav__col { margin-top: var(--uc-space-4); }
.sec-nav__col-title { font-size: 12px; font-weight: 700; color: var(--uc-text-secondary); margin-bottom: var(--uc-space-2); }
.sec-nav__sublist { display: flex; flex-direction: column; gap: var(--uc-space-1); }
.sec-nav__sublink { display: inline-flex; align-items: center; gap: var(--uc-space-2); padding: var(--uc-space-2) 0; font-size: 15px; color: var(--uc-nav-text); }
.sec-nav__overlay { display: none; }

/* 狭幅ではロゴと会員ボタンを少し縮小して収める */
@media (max-width: 639px) {
  .sec-header__logo-img { height: 24px; }
  .c-authbtn { width: 52px; height: 52px; font-size: 10px; }
  .c-authbtn__icon svg { width: 20px; height: 20px; }
}

@media (hover: hover) and (pointer: fine) {
  .sec-nav__link:hover { color: var(--uc-blue-text); }
  .sec-nav__sublink:hover { color: var(--uc-blue-text); text-decoration: underline; }
}

/* モバイル（縦メニュー）では現在ページに淡い背景を付けて区別 */
@media (max-width: 1023px) {
  .sec-nav__link[aria-current="page"] { background: rgba(0,38,127,0.06); border-radius: var(--uc-radius-md); }
}

/* Desktop: 水平ナビ ＋ メガ */
@media (min-width: 1024px) {
  .sec-nav__toggle { display: none; }
  .sec-nav { position: static; }
  .sec-nav__list {
    position: static; inset: auto; max-height: none; overflow: visible;
    display: flex; flex-direction: row; align-items: center; gap: var(--uc-space-1);
    padding: 0; background: transparent; border: 0;
  }
  /* item は position:static にして、メガパネルはヘッダーコンテナ基準で中央配置（左寄り不具合の修正） */
  .sec-nav__item { border: 0; position: static; }
  .sec-nav__link { padding: var(--uc-space-2) var(--uc-space-3); min-height: 40px; font-size: 15px; white-space: nowrap; border-radius: var(--uc-radius-md); }
  /* PC（横並びタブ）では現在ページに下線インジケーターを表示 */
  .sec-nav__link[aria-current="page"] { position: relative; }
  .sec-nav__link[aria-current="page"]::after { content: ""; position: absolute; left: var(--uc-space-3); right: var(--uc-space-3); bottom: 0; height: 2px; background: var(--ucnavi-blue); border-radius: var(--uc-radius-pill); }
  .sec-nav__mega {
    position: absolute; left: 50%; top: 100%; transform: translateX(-50%);
    width: min(1200px, 96vw); padding: var(--uc-space-6);
    background: var(--uc-white); border: var(--uc-border-width) solid var(--uc-border-hairline);
    border-radius: var(--uc-radius-lg); box-shadow: var(--uc-shadow-4);
    z-index: var(--uc-z-dropdown);
  }
  /* ホバー時にトリガー〜パネル間の隙間を橋渡しし、カーソル移動で閉じないようにする */
  .sec-nav__mega::before { content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 22px; }
  .sec-nav__mega-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--uc-space-6); padding: 0; max-width: none; }
  .sec-nav__col + .sec-nav__col { margin-top: 0; }
  .sec-nav__sublist--2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--uc-space-1) var(--uc-space-4); }
}

/* --- Hero --- */
.sec-hero { position: relative; padding-block: 0; overflow: hidden; }
.sec-hero__viewport { position: relative; }
.sec-hero__track { position: relative; }
.sec-hero__slide { position: relative; display: grid; }
.sec-hero__slide[hidden] { display: none; }
.sec-hero__media { position: absolute; inset: 0; z-index: 0; }
.sec-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,38,127,0.55), rgba(0,38,127,0.82)); }
.sec-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.sec-hero__body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--uc-space-4); padding-block: var(--uc-space-12); color: var(--uc-on-dark); }
.sec-hero__eyebrow { font-size: 14px; font-weight: 600; color: var(--uc-yellow); }
.sec-hero__title { font-family: var(--uc-font-display); font-weight: 600; font-size: clamp(32px, 6.4vw, 64px); line-height: 1.06; letter-spacing: -0.01em; }
.sec-hero__lead { font-size: clamp(15px, 2.2vw, 19px); line-height: 1.6; color: var(--uc-on-dark-soft); max-width: 42ch; }
.sec-hero__actions { display: flex; flex-wrap: wrap; gap: var(--uc-space-3); margin-top: var(--uc-space-2); }
.sec-hero__controls { display: flex; align-items: center; gap: var(--uc-space-3); position: absolute; left: 0; right: 0; bottom: var(--uc-space-5); z-index: 2; }
.sec-hero__ctrl, .sec-hero__pause {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: var(--uc-radius-circle); border: var(--uc-border-width) solid var(--uc-border-on-dark);
  background: rgba(0,0,0,0.25); color: var(--uc-on-dark); backdrop-filter: var(--uc-glass-blur); -webkit-backdrop-filter: var(--uc-glass-blur);
}
.sec-hero__pause { margin-left: auto; }
.sec-hero__dots { display: flex; align-items: center; gap: var(--uc-space-2); }
.sec-hero__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: var(--uc-radius-circle); background: rgba(255,255,255,0.4); transition: background-color var(--uc-dur-2) var(--uc-ease-out), width var(--uc-dur-3) var(--uc-ease-out); }
.sec-hero__dot[aria-selected="true"] { background: var(--uc-white); width: 22px; border-radius: var(--uc-radius-pill); }
@media (hover: hover) and (pointer: fine) { .sec-hero__ctrl:hover, .sec-hero__pause:hover { background: rgba(0,0,0,0.45); } }

/* Hero 分割レイアウト（index_ver2 用：背景画像なし・左テキスト／右16:9画像カルーセル） */
.sec-hero--split { background: var(--uc-bg); overflow: visible; }
.sec-hero--split .sec-hero__inner { padding-block: var(--uc-space-7); }
.sec-hero--split .sec-hero__slide { grid-template-columns: 1fr; align-items: center; gap: var(--uc-space-6); }
.sec-hero--split .sec-hero__body { position: static; z-index: auto; padding-block: 0; color: var(--uc-text); }
.sec-hero--split .sec-hero__eyebrow { color: var(--uc-blue-text); }
.sec-hero--split .sec-hero__title { color: var(--uc-text); font-size: clamp(28px, 4.4vw, 48px); }
.sec-hero--split .sec-hero__lead { color: var(--uc-text-secondary); }
.sec-hero--split .sec-hero__media { position: static; inset: auto; aspect-ratio: var(--uc-ratio-wide); border-radius: var(--uc-radius-lg); overflow: hidden; background: var(--uc-blue-gray); }
.sec-hero--split .sec-hero__media::after { content: none; }
.sec-hero--split .sec-hero__controls { position: static; left: auto; right: auto; bottom: auto; margin-top: var(--uc-space-6); justify-content: flex-start; }
.sec-hero--split .sec-hero__ctrl, .sec-hero--split .sec-hero__pause { border-color: var(--uc-border-strong); background: var(--uc-white); color: var(--uc-text); backdrop-filter: none; -webkit-backdrop-filter: none; }
.sec-hero--split .sec-hero__dot { background: rgba(0,0,0,0.2); }
.sec-hero--split .sec-hero__dot[aria-selected="true"] { background: var(--uc-navy); }
@media (hover: hover) and (pointer: fine) {
  .sec-hero--split .sec-hero__ctrl:hover, .sec-hero--split .sec-hero__pause:hover { background: var(--uc-bg-gray); }
}
@media (min-width: 834px) {
  .sec-hero--split .sec-hero__inner { padding-block: var(--uc-space-9); }
  .sec-hero--split .sec-hero__slide { grid-template-columns: 1fr 1.1fr; gap: var(--uc-space-9); }
}
@media (max-width: 833px) {
  /* モバイルは右側の画像を全幅の背景にし、白ベールで覆って文字を上に載せる（ver3と同様） */
  .sec-hero--split .sec-hero__inner { padding-top: 0; }  /* ヘッダーと背景画像の隙間をなくす */
  .sec-hero--split .sec-hero__slide { position: relative; min-height: 320px; align-items: stretch; }
  .sec-hero--split .sec-hero__media { position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--uc-container-px)); right: calc(-1 * var(--uc-container-px)); aspect-ratio: auto; border-radius: 0; }
  .sec-hero--split .sec-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.92)); }
  .sec-hero--split .sec-hero__body { position: relative; z-index: 1; justify-content: center; padding-block: var(--uc-space-8); }
}

/* Hero 背景写真＋白い覆い（index_ver3 用：写真全面に白ベール・文字は直置き・低め） */
.sec-hero--band .sec-hero__slide { min-height: 380px; }
.sec-hero--band .sec-hero__media::after { background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.92)); }
.sec-hero--band .sec-hero__body { padding-block: var(--uc-space-7); justify-content: center; color: var(--uc-text); }
.sec-hero--band .sec-hero__panel { display: flex; flex-direction: column; align-items: flex-start; gap: var(--uc-space-4); max-width: 640px; }
.sec-hero--band .sec-hero__eyebrow { color: var(--uc-blue-text); }
.sec-hero--band .sec-hero__title { color: var(--uc-text); font-size: clamp(26px, 3.6vw, 42px); }
.sec-hero--band .sec-hero__lead { color: var(--uc-text-secondary); max-width: none; }
.sec-hero--band .sec-hero__controls { justify-content: flex-end; }
.sec-hero--band .sec-hero__pause { margin-left: 0; }
.sec-hero--band .sec-hero__ctrl, .sec-hero--band .sec-hero__pause { border-color: var(--uc-border-strong); background: var(--uc-white); color: var(--uc-text); backdrop-filter: none; -webkit-backdrop-filter: none; }
.sec-hero--band .sec-hero__dot { background: rgba(0,0,0,0.2); }
.sec-hero--band .sec-hero__dot[aria-selected="true"] { background: var(--uc-navy); }
@media (min-width: 834px) {
  /* PCは左を濃く右を薄い白ベールにして、右側の写真を見せる */
  .sec-hero--band .sec-hero__media::after { background: linear-gradient(90deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.86) 42%, rgba(255,255,255,0.32) 100%); }
}
@media (max-width: 833px) {
  .sec-hero--band .sec-hero__slide { min-height: 300px; }
  .sec-hero--band .sec-hero__body { padding-block: var(--uc-space-6); }
  .sec-hero--band .sec-hero__panel { max-width: none; }
  .sec-hero--band .sec-hero__controls { position: static; justify-content: flex-start; padding-block: var(--uc-space-3); }
}

/* --- Phase tabs（フェーズ別おすすめコンテンツ） --- */
/* フェーズセクションの図版（見出しとタブの間） */
.sec-phase__figure { margin: 0 0 var(--uc-space-6); text-align: center; }
.sec-phase__figure img { display: block; width: 100%; max-width: 960px; height: auto; margin-inline: auto; border-radius: var(--uc-radius-lg); }
.sec-phase__tabs { display: flex; flex-wrap: wrap; gap: var(--uc-space-2); margin-bottom: var(--uc-space-7); }
/* index_ver3: 4つのフェーズタブを等幅に（モバイルは2×2 / PCは4列） */
.sec-phase__tabs--equal { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 834px) { .sec-phase__tabs--equal { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sec-phase__tabs--equal .sec-phase__tab { width: 100%; text-align: center; padding-inline: var(--uc-space-3); }
.sec-phase__tab {
  padding: var(--uc-space-3) var(--uc-space-5); min-height: 44px;
  font-family: var(--uc-font-display); font-size: 15px; font-weight: 600; letter-spacing: normal;
  color: var(--uc-text); background: var(--uc-white);
  border: var(--uc-border-width) solid var(--uc-border-strong); border-radius: var(--uc-radius-pill);
  transition: background-color var(--uc-dur-3) var(--uc-ease-out), color var(--uc-dur-3) var(--uc-ease-out), border-color var(--uc-dur-3) var(--uc-ease-out);
}
.sec-phase__tab[aria-selected="true"] { background: var(--uc-navy); color: var(--uc-on-dark); border-color: var(--uc-navy); }
@media (hover: hover) and (pointer: fine) {
  .sec-phase__tab:not([aria-selected="true"]):hover { border-color: var(--uc-navy); color: var(--uc-blue-text); }
}

.sec-phase__panel[hidden] { display: none; }
.sec-phase__panel:focus-visible { outline: none; box-shadow: var(--uc-ring-focus); border-radius: var(--uc-radius-md); }
.sec-phase__panel-lead { font-family: var(--uc-font-display); font-size: 18px; font-weight: 600; margin-bottom: var(--uc-space-5); }

.sec-phase__cards { grid-template-columns: 1fr; }
@media (min-width: 640px) { .sec-phase__cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sec-phase__cards { grid-template-columns: repeat(4, 1fr); } }

.c-phasecard {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: var(--uc-white); border: var(--uc-border-width) solid var(--uc-border-hairline);
  border-radius: var(--uc-radius-lg); overflow: hidden;
  transition: box-shadow var(--uc-dur-3) var(--uc-ease-out), transform var(--uc-dur-3) var(--uc-ease-out);
}
.c-phasecard__media { margin: 0; aspect-ratio: var(--uc-ratio-wide); background: var(--uc-blue-gray); }
.c-phasecard__media img { width: 100%; height: 100%; object-fit: cover; }
.c-phasecard__body { display: flex; flex-direction: column; gap: var(--uc-space-2); padding: var(--uc-space-5); flex: 1; }
.c-phasecard__title { font-size: 17px; line-height: 1.4; }
.c-phasecard__text { font-size: 14px; color: var(--uc-text-secondary); }
.c-phasecard__actions { margin-top: auto; padding-top: var(--uc-space-3); }
/* stretched link: ボタンのクリック領域をカード全体へ拡張（<a> のネストは作らない） */
.c-phasecard__link::after { content: ""; position: absolute; inset: 0; }
.c-btn__ext { display: inline-flex; }
@media (hover: hover) and (pointer: fine) {
  .c-phasecard:hover { box-shadow: var(--uc-shadow-3); transform: translateY(-2px); }
}

/* --- Target Nav / Feature grids --- */
.sec-target-nav__list, .sec-feature__list, .sec-voice__list, .sec-statistics__list,
.sec-category__list, .sec-pickup__list, .sec-courses__list, .sec-column__list { grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .sec-pickup__list, .sec-courses__list, .sec-column__list, .sec-voice__list,
  .sec-category__list, .sec-feature__list { grid-template-columns: repeat(2, 1fr); }
  .sec-statistics__list { grid-template-columns: repeat(2, 1fr); }
  .sec-target-nav__list { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .sec-target-nav__list { grid-template-columns: repeat(4, 1fr); }
  .sec-category__list { grid-template-columns: repeat(4, 1fr); }
  .sec-pickup__list, .sec-courses__list, .sec-column__list, .sec-voice__list, .sec-feature__list { grid-template-columns: repeat(3, 1fr); }
  .sec-statistics__list { grid-template-columns: repeat(4, 1fr); }
  .sec-statistics__list--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }   /* 先輩の声は2項目なので2カラム維持 */
  .sec-feature__list--split { grid-template-columns: repeat(2, minmax(0, 1fr)); }     /* カード内が2カラムのため外側は2カラムに */
}

/* Statistics 区切り（Large） */
@media (min-width: 1024px) {
  .c-statistic { position: relative; }
  .c-statistic + .c-statistic::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 56px; background: var(--uc-border-hairline); }
}

/* --- Campaign --- */
.c-card--campaign { flex-direction: column; border: 0; box-shadow: var(--uc-shadow-2); }
.c-card__media--campaign { aspect-ratio: 3 / 2; }
@media (min-width: 834px) {
  .c-card--campaign { display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
  .c-card__media--campaign { height: 100%; aspect-ratio: auto; }
  .c-card--campaign .c-card__body { padding: var(--uc-space-8); }
}

/* --- FAQ foot --- */
.sec-faq__foot { margin-top: var(--uc-space-6); text-align: center; }

/* --- CTA（ページ下部固定バー） ---
   position: sticky + bottom:0 で、スクロール中は常に画面下端に表示し、
   本来の位置（main の末尾＝フッターの直前）まで来たらそこで止まる。
   高さを抑えるため、テキスト左・ボタン右の横並びレイアウトにする。 */
.sec-cta {
  position: sticky; bottom: 0; z-index: var(--uc-z-sticky);
  padding-block: var(--uc-space-4);
  box-shadow: 0 -2px 16px rgba(0,0,0,0.18);
}
/* 見出し・本文は左、ボタンは右。HTML は既存構造のまま（ラッパー不要）でグリッド配置。 */
.sec-cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "title actions" "text actions";
  align-items: center; column-gap: var(--uc-space-6); row-gap: var(--uc-space-1);
  text-align: left;
}
/* バー化に伴い、narrow 指定でも通常コンテナ幅まで広げる */
.sec-cta .u-container--narrow { max-width: var(--uc-container); }
.sec-cta__title { grid-area: title; align-self: end; font-size: clamp(18px, 2.2vw, 24px); line-height: 1.25; }
.sec-cta__text { grid-area: text; align-self: start; font-size: 14px; color: var(--uc-on-dark-soft); max-width: 60ch; }
.sec-cta__actions { grid-area: actions; display: flex; flex-wrap: nowrap; gap: var(--uc-space-3); justify-content: flex-end; margin-top: 0; }
.sec-cta__actions .c-btn { white-space: nowrap; }

/* Small：縦積み＋テキスト非表示で、タイトルとボタンのみのコンパクトなバーに */
@media (max-width: 833px) {
  .sec-cta__inner { grid-template-columns: 1fr; grid-template-areas: "title" "actions"; row-gap: var(--uc-space-2); }
  .sec-cta__title { align-self: auto; text-align: center; }
  .sec-cta__text { display: none; }
  .sec-cta__actions { margin-top: var(--uc-space-1); }
  /* 幅が足りないので折り返しを許可し、2ボタンを均等幅に */
  .sec-cta__actions .c-btn {
    flex: 1 1 0; min-width: 0; justify-content: center; text-align: center;
    white-space: normal; font-size: 14px; min-height: 48px;
    padding-inline: var(--uc-space-3);
  }
}

/* --- Footer --- */
.sec-footer { color: var(--uc-on-dark); }
.sec-footer__top { display: flex; flex-direction: column; gap: var(--uc-space-8); }
/* 濃紺フッターでもロゴが見えるよう、ロゴ背面のみ白パネルで背景調整（別画像は使わない） */
.sec-footer__logo { display: inline-flex; align-items: center; align-self: flex-start; background: var(--uc-white); padding: var(--uc-space-2) var(--uc-space-3); border-radius: var(--uc-radius-md); }
.sec-footer__logo img { height: 28px; width: auto; display: block; }
.sec-footer__tagline { margin-top: var(--uc-space-3); font-size: 14px; color: var(--uc-on-dark-soft); }
.sec-footer__nav { display: grid; grid-template-columns: 1fr; gap: var(--uc-space-6); }
.sec-footer__col-title { font-size: 13px; font-weight: 700; color: var(--uc-on-dark); margin-bottom: var(--uc-space-3); }
.sec-footer__links { display: flex; flex-direction: column; gap: var(--uc-space-2); }
.sec-footer__links a { color: var(--uc-on-dark-soft); font-size: 14px; }
.sec-footer__bottom { display: flex; flex-direction: column; gap: var(--uc-space-3); }
.sec-footer__legal { display: flex; flex-wrap: wrap; gap: var(--uc-space-4); }
.sec-footer__legal a { color: var(--uc-on-dark-soft); font-size: 13px; }
.sec-footer__copyright { color: rgba(255,255,255,0.6); font-size: 13px; }
@media (hover: hover) and (pointer: fine) { .sec-footer a:hover { color: var(--uc-white); text-decoration: underline; } }
@media (min-width: 640px) { .sec-footer__nav { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 834px) {
  .sec-footer__top { flex-direction: row; justify-content: space-between; }
  .sec-footer__brand { max-width: 300px; }
  .sec-footer__nav { flex: 1; max-width: 620px; }
  .sec-footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ==========================================================================
   6. Motion / Reveal（JS 有効かつ motion 許容時のみアニメーション）
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .js .u-reveal { opacity: 0; transform: translateY(16px); transition: opacity var(--uc-dur-6) var(--uc-ease-out), transform var(--uc-dur-6) var(--uc-ease-out); }
  .js .u-reveal.is-visible { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Page    : license（運転免許トップ）
   Section : hero / breadcrumb / page-header / intro / guide(stats) / service-style / area-links / compare / flow / download
   Description : ページ固有スタイル（＋本ページで初出の共通コンポーネント）
   ========================================================================== */

/* Breadcrumb（S008 / c-breadcrumb） */
.c-breadcrumb { padding-block: var(--uc-space-3); }
.c-breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--uc-space-2); font-size: 13px; color: var(--uc-text-secondary); }
.c-breadcrumb__item { display: inline-flex; align-items: center; gap: var(--uc-space-2); }
.c-breadcrumb__item + .c-breadcrumb__item::before { content: "›"; color: var(--uc-text-secondary); }
.c-breadcrumb__item[aria-current="page"] { color: var(--uc-text); font-weight: 600; }
.c-breadcrumb a { color: var(--uc-blue-text); }
@media (hover: hover) and (pointer: fine) { .c-breadcrumb a:hover { text-decoration: underline; } }

/* Page Header（S018 / sec-pageheader） */
.sec-pageheader__eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: var(--uc-blue-text); margin-bottom: var(--uc-space-2); }
.sec-pageheader__title { font-size: clamp(32px, 5vw, 48px); line-height: 1.1; letter-spacing: -0.01em; }
.sec-pageheader__lead { margin-top: var(--uc-space-4); font-size: 17px; color: var(--uc-text-secondary); }

/* Intro / Lead（S019） */
.sec-intro__text { font-size: 18px; line-height: 1.85; }

/* Service（取得スタイルの3カードグリッド） */
.sec-service__list { grid-template-columns: 1fr; }
@media (min-width: 640px) { .sec-service__list { grid-template-columns: repeat(3, 1fr); } }

/* 現住所で（地区リンク） */
.sec-license__areas { margin-top: var(--uc-space-8); }
.sec-license__areas-title { font-family: var(--uc-font-display); font-weight: 600; font-size: 17px; margin-bottom: var(--uc-space-4); }
.sec-license__area-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--uc-space-3); }
@media (min-width: 640px) { .sec-license__area-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .sec-license__area-grid { grid-template-columns: repeat(6, 1fr); } }
.sec-license__area-grid .c-btn { width: 100%; }

/* Flow（S068 / c-flowstep） */
.sec-flow__list { display: grid; grid-template-columns: 1fr; gap: var(--uc-space-4); }
@media (min-width: 640px) { .sec-flow__list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .sec-flow__list { grid-template-columns: repeat(4, 1fr); } }
.c-flowstep { height: 100%; padding: var(--uc-space-5); background: var(--uc-white); border: var(--uc-border-width) solid var(--uc-border-hairline); border-radius: var(--uc-radius-lg); }
.c-flowstep__num { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--uc-radius-circle); background: var(--uc-navy); color: var(--uc-on-dark); font-family: var(--uc-font-display); font-weight: 600; margin-bottom: var(--uc-space-3); }
.c-flowstep__title { font-size: 17px; line-height: 1.4; margin-bottom: var(--uc-space-2); }
.c-flowstep__text { font-size: 14px; color: var(--uc-text-secondary); }
/* 数字の右にタイトルを配置。本文は数字の左端に揃えて全幅（PC・モバイル共通） */
.sec-flow__list--inline .c-flowstep {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "num title" "text text";
  align-content: start;   /* 余った高さを行間に分配せず、行間を一定に保つ */
  column-gap: var(--uc-space-3);
  row-gap: var(--uc-space-3);
  align-items: center;
}
.sec-flow__list--inline .c-flowstep__num { grid-area: num; margin-bottom: 0; }
.sec-flow__list--inline .c-flowstep__title { grid-area: title; margin-bottom: 0; }
.sec-flow__list--inline .c-flowstep__text { grid-area: text; }
/* 最終ステップ：グリッド全幅に配置し、上に下向き矢印（ネイビー円）を挟む */
.sec-flow__final { grid-column: 1 / -1; }
/* li に矢印を含むため height:100% だとカードが余分に伸びる。内容に合わせる */
.sec-flow__final .c-flowstep { height: auto; }
.c-flowarrow { display: grid; place-items: center; width: 44px; height: 44px; margin: var(--uc-space-2) auto var(--uc-space-4); border-radius: var(--uc-radius-circle); background: var(--uc-navy); color: var(--uc-on-dark); }
/* モバイルは縦積みで流れが分かるため、下向き矢印は非表示 */
@media (max-width: 833px) { .c-flowarrow { display: none; } }

/* Download（S092 / c-download） */
.sec-download__list { display: grid; grid-template-columns: 1fr; gap: var(--uc-space-3); }
@media (min-width: 640px) { .sec-download__list { grid-template-columns: repeat(2, 1fr); } }
.c-download { display: flex; align-items: center; justify-content: space-between; gap: var(--uc-space-4); padding: var(--uc-space-4) var(--uc-space-5); background: var(--uc-white); border: var(--uc-border-width) solid var(--uc-border-hairline); border-radius: var(--uc-radius-lg); }
.c-download__name { font-family: var(--uc-font-display); font-weight: 600; font-size: 16px; }
.c-download__meta { font-size: 13px; color: var(--uc-text-secondary); }
/* モバイルでボタンが縮んで「ダウンロード」が改行しないよう固定 */
.c-download .c-btn { flex: none; white-space: nowrap; }

/* Category Hero（カテゴリトップ共通 / sec-cat-hero・license で初出。全カテゴリページで再利用） */
.sec-cat-hero { position: relative; overflow: hidden; padding-block: 0; }
.sec-cat-hero__media { position: absolute; inset: 0; z-index: 0; }
.sec-cat-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,38,127,0.55), rgba(0,38,127,0.85)); }
.sec-cat-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.sec-cat-hero__body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--uc-space-4); padding-block: var(--uc-space-11); color: var(--uc-on-dark); }
.sec-cat-hero__eyebrow { font-size: 14px; font-weight: 600; color: var(--uc-yellow); }
.sec-cat-hero__title { font-family: var(--uc-font-display); font-weight: 600; font-size: clamp(30px, 5.5vw, 56px); line-height: 1.08; letter-spacing: -0.01em; }
.sec-cat-hero__lead { font-size: clamp(15px, 2.2vw, 19px); line-height: 1.6; color: var(--uc-on-dark-soft); max-width: 46ch; }
.sec-cat-hero__actions { display: flex; flex-wrap: wrap; gap: var(--uc-space-3); margin-top: var(--uc-space-2); }

/* Category Hero 分割レイアウト（ver2仕様：左テキスト／右16:9画像・背景なし・モバイルは背景画像＋白ベール） */
.sec-cat-hero--split { display: grid; grid-template-columns: 1fr; align-items: center; gap: var(--uc-space-6); max-width: var(--uc-container); margin-inline: auto; padding-inline: var(--uc-container-px); background: var(--uc-bg); }
.sec-cat-hero--split .sec-cat-hero__media { inset: auto; aspect-ratio: var(--uc-ratio-wide); border-radius: var(--uc-radius-lg); overflow: hidden; background: var(--uc-blue-gray); }
.sec-cat-hero--split .sec-cat-hero__media::after { content: none; }
.sec-cat-hero--split .sec-cat-hero__body { max-width: none; margin: 0; padding-inline: 0; padding-block: var(--uc-space-9); color: var(--uc-text); }
.sec-cat-hero--split .sec-cat-hero__eyebrow { color: var(--uc-blue-text); }
.sec-cat-hero--split .sec-cat-hero__title { color: var(--uc-text); font-size: clamp(28px, 4.4vw, 48px); }
.sec-cat-hero--split .sec-cat-hero__lead { color: var(--uc-text-secondary); max-width: none; }
.sec-cat-hero--split .c-btn--on-dark { color: var(--uc-blue-text); border: var(--uc-border-width) solid var(--ucnavi-blue); background: transparent; }
@media (hover: hover) and (pointer: fine) { .sec-cat-hero--split .c-btn--on-dark:hover { background: rgba(0,38,127,0.06); } }
@media (min-width: 834px) {
  .sec-cat-hero--split { grid-template-columns: 1fr 1.1fr; gap: var(--uc-space-9); }
  .sec-cat-hero--split .sec-cat-hero__media { position: static; order: 2; }
  .sec-cat-hero--split .sec-cat-hero__body { order: 1; padding-block: var(--uc-space-11); }
}
@media (max-width: 833px) {
  .sec-cat-hero--split { position: relative; min-height: 320px; }
  .sec-cat-hero--split .sec-cat-hero__media { position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--uc-container-px)); right: calc(-1 * var(--uc-container-px)); aspect-ratio: auto; border-radius: 0; }
  .sec-cat-hero--split .sec-cat-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.92)); }
  .sec-cat-hero--split .sec-cat-hero__body { position: relative; z-index: 1; padding-block: var(--uc-space-8); }
}

/* 比較表 合宿 vs 通学（ページ固有 / c-compare） */
.sec-compare__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sec-compare__scroll:focus-visible { outline: none; box-shadow: var(--uc-ring-focus); border-radius: var(--uc-radius-lg); }
.c-compare { width: 100%; min-width: 520px; border-collapse: separate; border-spacing: 0; background: var(--uc-white); border: var(--uc-border-width) solid var(--uc-border-hairline); border-radius: var(--uc-radius-lg); overflow: hidden; }
.c-compare th, .c-compare td { padding: var(--uc-space-4) var(--uc-space-5); text-align: left; font-size: 15px; vertical-align: top; border-top: var(--uc-border-width) solid var(--uc-border-hairline); }
.c-compare thead th { border-top: 0; background: var(--uc-blue-gray); font-family: var(--uc-font-display); font-weight: 600; }
.c-compare tbody th { font-family: var(--uc-font-display); font-weight: 600; color: var(--uc-text); width: 28%; }
.c-compare tbody td { color: var(--uc-text-secondary); }
.c-compare--wide { min-width: 760px; }                        /* 4列（比較項目＋3パターン）用 */
.c-compare td.c-compare__center { text-align: center; }       /* 横断する結合セル用 */

/* カリキュラム／開講スケジュール表（列数が多いため横スクロール / c-schedule） */
.c-schedule { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--uc-white); border: var(--uc-border-width) solid var(--uc-border-hairline); border-radius: var(--uc-radius-lg); overflow: hidden; font-size: 14px; }
.c-schedule th, .c-schedule td { padding: var(--uc-space-3) var(--uc-space-4); text-align: left; vertical-align: top; white-space: nowrap; border-top: var(--uc-border-width) solid var(--uc-border-hairline); }
.c-schedule thead th { border-top: 0; background: var(--uc-blue-gray); font-family: var(--uc-font-display); font-weight: 600; }
.c-schedule tbody th { font-family: var(--uc-font-display); font-weight: 600; color: var(--uc-text); }
.c-schedule tbody td { color: var(--uc-text-secondary); }
.c-schedule--wrap th, .c-schedule--wrap td { white-space: normal; }   /* カリキュラムなど文章セル用 */
.c-schedule td.c-schedule__merge { text-align: center; }
/* grayセクション上ではヘッダー背景（--uc-blue-gray = gray-100）がセクション背景（--uc-bg-gray = gray-100）と同色になり、
   表の最上段（thead）が背景に埋もれて見えづらくなる。ヘッダーを白カード化しアクセントの紺で明示する。 */
[data-theme="gray"] .c-schedule thead th { background: var(--uc-white); color: var(--uc-blue-text); border-bottom: 2px solid var(--uc-navy); }
/* 講座比較表（c-schedule を流用）: 列見出しの上に小さな副題、セル内は箇条書き */
.c-schedule--compare { min-width: 640px; table-layout: fixed; }   /* 講座3列を等幅に */
/* 左端の見出し列は、テキストが折り返さない程度の幅に固定 */
.c-schedule--compare th:first-child,
.c-schedule--compare td:first-child { width: 11.5em; white-space: nowrap; }
.c-schedule--compare thead th { text-align: center; }
.c-schedule__colsub { display: block; font-size: 12px; font-weight: 500; color: var(--uc-text-secondary); margin-bottom: var(--uc-space-1); }
.c-schedule__list { margin: 0; padding-left: 1.1em; list-style: disc; }
.c-schedule__list li + li { margin-top: var(--uc-space-1); }
.c-schedule__cellnote { display: block; margin-top: var(--uc-space-2); font-size: 12px; color: var(--uc-text-secondary); }
.c-schedule td.c-schedule__cta { text-align: center; }   /* .c-schedule td の左寄せに勝たせる */
/* 開講スケジュールの日程表はコンパクトに（パディング・文字サイズを縮小）。
   schedule / ipad-schedule セクション内の c-schedule のみが対象。声・比較表など他の表には影響しない。 */
[data-section="schedule"] .c-schedule,
[data-section="ipad-schedule"] .c-schedule { font-size: 13px; }
[data-section="schedule"] .c-schedule th,
[data-section="schedule"] .c-schedule td,
[data-section="ipad-schedule"] .c-schedule th,
[data-section="ipad-schedule"] .c-schedule td { padding: var(--uc-space-2) var(--uc-space-3); }
/* PC表示: 列の境界に縦区切り線を追加（1列目以外の左側）。
   上下はセルの縦パディング分だけ空け、横の行ボーダーと重ならないインセット表示にする。 */
@media (min-width: 768px) {
  .c-schedule th, .c-schedule td { position: relative; }
  .c-schedule th:not(:first-child)::before,
  .c-schedule td:not(:first-child)::before {
    content: "";
    position: absolute;
    left: 0;
    top: var(--uc-space-3);
    bottom: var(--uc-space-3);
    width: var(--uc-border-width);
    background: var(--uc-border-hairline);
  }
}
/* 先輩の声：回答割合ドーナツ（円グラフ / conic-gradient）と凡例 */
.sec-statistics__list--pair { max-width: 760px; margin-inline: auto; }
.c-donut { position: relative; width: 168px; max-width: 70%; aspect-ratio: 1 / 1; margin: 0 auto var(--uc-space-4); border-radius: var(--uc-radius-circle); }
.c-donut::after { content: ""; position: absolute; inset: 27%; background: var(--uc-white); border-radius: var(--uc-radius-circle); }
.c-donut__center { position: absolute; inset: 0; display: grid; place-items: center; color: var(--uc-navy); }
.c-legend { list-style: none; max-width: 260px; margin: var(--uc-space-4) auto 0; padding: 0; display: grid; gap: var(--uc-space-1); text-align: left; }
.c-legend__item { display: flex; align-items: center; gap: var(--uc-space-2); font-size: 12px; color: var(--uc-text-secondary); }
.c-legend__swatch { flex: none; width: 10px; height: 10px; border-radius: 2px; }
.c-legend__pct { margin-left: auto; font-weight: 600; color: var(--uc-text); font-variant-numeric: tabular-nums; }
.c-block + .c-block { margin-top: var(--uc-space-8); }
.c-block__title { font-family: var(--uc-font-display); font-weight: 600; font-size: 18px; margin-bottom: var(--uc-space-4); }
.c-block__note { margin-top: var(--uc-space-3); font-size: 13px; color: var(--uc-text-secondary); }
/* 見出し直下の補助テキスト（__note より大きめ・ウェイトはノーマル） */
.c-block__lead { margin-bottom: var(--uc-space-4); font-size: 15px; font-weight: 400; line-height: 1.7; color: var(--uc-text-secondary); }

/* End : license（Page / Section） */

/* ==========================================================================
   Page    : study-abroad（留学・異文化体験トップ）で初出
   Section : cat-group（カテゴリトップ共通のグループ見出し）
   Description : カテゴリトップ共通のグループ見出しスタイル（career 等でも再利用）
   ========================================================================== */

.sec-cat-group + .sec-cat-group { margin-top: var(--uc-space-8); }
.sec-cat-group__title { font-family: var(--uc-font-display); font-weight: 600; font-size: 19px; margin-bottom: var(--uc-space-4); padding-bottom: var(--uc-space-2); border-bottom: var(--uc-border-width) solid var(--uc-border-hairline); }

/* End : study-abroad（Page / Section） */

/* ==========================================================================
   Page    : career（就職・資格・検定トップ）
   Section : services（サービスカードのカテゴリ別タイトル装飾）
   Description : 「サービスを探す」の3グループで、カード見出しにグループ別の色帯を付与
   ========================================================================== */

/* グループ別カラー（白文字で AA を満たすアクセシブル派生色） */
.sec-cat-group--job   { --group-color: var(--uc-blue-text); }
.sec-cat-group--civil { --group-color: var(--uc-green-text); }
.sec-cat-group--qual  { --group-color: var(--uc-yellow); }

/* 見出しをカード上部の色帯にする（角丸に沿ってクリップ） */
.sec-cat-group--job .c-feature--link,
.sec-cat-group--civil .c-feature--link,
.sec-cat-group--qual .c-feature--link { overflow: hidden; }

.sec-cat-group--job .c-feature__title,
.sec-cat-group--civil .c-feature__title,
.sec-cat-group--qual .c-feature__title {
  margin: calc(-1 * var(--uc-space-6)) calc(-1 * var(--uc-space-6)) var(--uc-space-4);
  padding: var(--uc-space-3) var(--uc-space-6);
  background: var(--group-color);
  color: var(--uc-white);
  border-radius: var(--uc-radius-lg) var(--uc-radius-lg) 0 0;
  font-size: 16px; line-height: 1.4;
}

/* 色帯内のタグ（外部 / 申込）は半透明の白チップに */
.sec-cat-group--job .c-feature__title .c-tag,
.sec-cat-group--civil .c-feature__title .c-tag,
.sec-cat-group--qual .c-feature__title .c-tag {
  background: rgba(255,255,255,0.22); color: var(--uc-white);
}

/* 資格・検定：黄色帯は白文字だと視認性が低いため、文字は黒／帯内タグも黒系に */
.sec-cat-group--qual .c-feature__title { color: var(--uc-text); }
.sec-cat-group--qual .c-feature__title .c-tag { background: rgba(0,0,0,0.10); color: var(--uc-text); }

/* --------------------------------------------------------------------------
   カテゴリタグ（就職支援 / 公務員講座 / 資格・検定）
   Description : コラム・先輩の声・イベントで共通利用。色はサービス一覧の
                 グループカラー（job=ネイビー / civil=ティール / qual=イエロー）に合わせる。
   -------------------------------------------------------------------------- */
.c-tag--cat-job   { background: rgba(0,38,127,0.10);  color: var(--uc-blue-text); }
.c-tag--cat-civil { background: rgba(12,119,157,0.12); color: var(--uc-green-text); }
.c-tag--cat-qual  { background: rgba(255,192,0,0.28);  color: var(--uc-text); }

/* 濃色背景（先輩の声など＝ネイビー地）では淡色チップが沈むため、ソリッドチップに切り替え。
   就職支援はネイビー同士で埋もれるため、白地＋ネイビー文字で反転させる。 */
[data-theme="dark"] .c-tag--cat-job   { background: var(--uc-white); color: var(--uc-blue-text); }
[data-theme="dark"] .c-tag--cat-civil { background: var(--uc-teal); color: var(--uc-white); }
[data-theme="dark"] .c-tag--cat-qual  { background: var(--uc-yellow); color: var(--uc-near-black); }

/* コラムカード内のタグ（タイトルの上） */
.c-colcard__tags { display: flex; flex-wrap: wrap; gap: var(--uc-space-2); margin-bottom: var(--uc-space-2); }

/* 先輩の声カード内のタグ（引用の上） */
.c-voice__tags { display: flex; flex-wrap: wrap; gap: var(--uc-space-2); }

/* End : career（Page / Section） */

/* ==========================================================================
   Page    : events（イベント/講座 告知の汎用テンプレート）
   Section : eventhead / kv / reserve / prose / speaker / timetable / access / eventscroll
   Description : イベント告知ページで再利用するコンポーネント群。
                 イベントタイプで --event-accent を切り替える（p-event 修飾）
   ========================================================================== */

/* イベントタイプ別アクセント色 */
.p-event            { --event-accent: var(--uc-blue-text); }   /* セミナー（既定） */
.p-event--workshop  { --event-accent: var(--uc-orange-text); } /* ワークショップ */
.p-event--exchange  { --event-accent: var(--uc-green-text); }  /* 交流会 */

/* イベントヘッダー */
.c-eventhead__type { display: inline-flex; padding: 3px 14px; border-radius: var(--uc-radius-pill); background: var(--event-accent); color: var(--uc-white); font-family: var(--uc-font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; }
.c-eventhead__title { margin-top: var(--uc-space-4); font-size: clamp(26px, 4.6vw, 40px); line-height: 1.2; letter-spacing: -0.01em; }
.c-eventhead__meta { display: flex; flex-wrap: wrap; gap: var(--uc-space-4); margin-top: var(--uc-space-4); font-size: 15px; color: var(--uc-text-secondary); }
.c-eventhead__meta-item { display: inline-flex; align-items: center; gap: var(--uc-space-2); }
.c-eventhead__meta-icon { display: inline-flex; color: var(--event-accent); }
.c-eventhead__tags { display: flex; flex-wrap: wrap; gap: var(--uc-space-2); margin-top: var(--uc-space-4); }

/* メインビジュアル（KV） */
.c-kv { margin: var(--uc-space-7) 0 0; aspect-ratio: 16 / 9; background: var(--uc-blue-gray); border-radius: var(--uc-radius-lg); overflow: hidden; }
.c-kv img { width: 100%; height: 100%; object-fit: cover; }

/* 予約情報 */
.c-reserve { margin-top: var(--uc-space-7); padding: var(--uc-space-6); background: var(--uc-white); border: var(--uc-border-width) solid var(--uc-border-hairline); border-top: 4px solid var(--event-accent); border-radius: var(--uc-radius-lg); box-shadow: var(--uc-shadow-2); }
.c-reserve__label { margin-bottom: var(--uc-space-4); font-family: var(--uc-font-display); font-weight: 600; font-size: 14px; color: var(--event-accent); }
.c-reserve__list { display: grid; }
.c-reserve__row { display: grid; grid-template-columns: 6.5em 1fr; gap: var(--uc-space-3); padding: var(--uc-space-3) 0; border-top: var(--uc-border-width) solid var(--uc-border-hairline); }
.c-reserve__row:first-child { border-top: 0; }
.c-reserve__row dt { font-family: var(--uc-font-display); font-weight: 600; font-size: 14px; color: var(--uc-text); }
.c-reserve__row dd { margin: 0; font-size: 15px; }
.c-reserve__actions { margin-top: var(--uc-space-5); }
.c-reserve__cta { width: 100%; }
@media (min-width: 834px) {
  .c-reserve { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--uc-space-8); }
  .c-reserve__label { grid-column: 1 / -1; }
  .c-reserve__actions { margin-top: 0; }
  .c-reserve__cta { width: auto; white-space: nowrap; }
}

/* 本文（長文テキスト） */
.c-prose { font-size: 17px; line-height: 1.9; color: var(--uc-text); }
.c-prose > * + * { margin-top: var(--uc-space-4); }
.c-prose h3 { margin-top: var(--uc-space-7); font-size: 19px; line-height: 1.4; }
.c-prose ul { padding-left: 1.4em; list-style: disc; }
.c-prose li + li { margin-top: var(--uc-space-2); }
.c-prose a { color: var(--uc-blue-text); text-decoration: underline; }

/* 講師 */
.c-speaker-list { display: grid; grid-template-columns: 1fr; gap: var(--uc-space-5); }
@media (min-width: 640px) { .c-speaker-list { grid-template-columns: 1fr 1fr; } }
.c-speaker { display: flex; gap: var(--uc-space-4); padding: var(--uc-space-5); background: var(--uc-white); border: var(--uc-border-width) solid var(--uc-border-hairline); border-radius: var(--uc-radius-lg); }
.c-speaker__photo { flex: none; width: 72px; height: 72px; border-radius: var(--uc-radius-circle); overflow: hidden; background: var(--uc-blue-gray); }
.c-speaker__photo img { width: 100%; height: 100%; object-fit: cover; }
.c-speaker__name { font-family: var(--uc-font-display); font-weight: 600; font-size: 16px; }
.c-speaker__role { margin-top: 2px; font-size: 13px; color: var(--event-accent); }
.c-speaker__bio { margin-top: var(--uc-space-2); font-size: 14px; line-height: 1.7; color: var(--uc-text-secondary); }

/* タイムテーブル */
.c-timetable { border-top: var(--uc-border-width) solid var(--uc-border-hairline); }
.c-timetable__row { display: grid; grid-template-columns: auto 1fr; gap: var(--uc-space-4); padding: var(--uc-space-4) var(--uc-space-1); border-bottom: var(--uc-border-width) solid var(--uc-border-hairline); }
.c-timetable__time { min-width: 3.5em; font-family: var(--uc-font-display); font-weight: 600; font-size: 16px; color: var(--event-accent); }
.c-timetable__title { font-size: 16px; line-height: 1.4; }
.c-timetable__desc { margin-top: var(--uc-space-1); font-size: 14px; color: var(--uc-text-secondary); }

/* 会場・アクセス */
.c-access { display: grid; grid-template-columns: 1fr; gap: var(--uc-space-5); }
@media (min-width: 834px) { .c-access { grid-template-columns: 1.2fr 1fr; align-items: start; } }
.c-access__map { margin: 0; aspect-ratio: 4 / 3; background: var(--uc-blue-gray); border-radius: var(--uc-radius-lg); overflow: hidden; }
.c-access__map img { width: 100%; height: 100%; object-fit: cover; }
.c-access__map-frame { width: 100%; height: 100%; border: 0; display: block; }
.c-access__info { display: grid; align-self: start; }
.c-access__row { display: grid; grid-template-columns: 5em 1fr; gap: var(--uc-space-3); padding: var(--uc-space-3) 0; border-top: var(--uc-border-width) solid var(--uc-border-hairline); }
.c-access__row:first-child { border-top: 0; }
.c-access__row dt { font-family: var(--uc-font-display); font-weight: 600; font-size: 14px; }
.c-access__row dd { margin: 0; font-size: 15px; color: var(--uc-text-secondary); }

/* --- セット内容ボックス（c-setbox）：枠＋上部中央ラベル＋アイコンタイルを「＋」で連結 --- */
.c-setbox { --setbox-gap: 28px; position: relative; margin-bottom: var(--uc-space-8); padding: var(--uc-space-8) var(--uc-space-5) var(--uc-space-5); border: 2px solid var(--uc-navy); border-radius: var(--uc-radius-lg); }
.c-setbox__label { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); margin: 0; padding: var(--uc-space-2) var(--uc-space-5); background: var(--uc-navy); color: var(--uc-white); border-radius: var(--uc-radius-sm); font-family: var(--uc-font-display); font-weight: 600; font-size: clamp(15px, 2.2vw, 20px); white-space: nowrap; }
/* モバイル：タイル状に少し隙間を空けて3列（3+2）で並べる */
/* flex + justify-content:center で、3個ずつ折り返した最終行（2個）も中央寄せになる */
.c-setbox__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--uc-space-2); }
.c-setbox__item { flex: 0 1 calc((100% - var(--uc-space-2) * 2) / 3); position: relative; display: grid; place-items: center; gap: var(--uc-space-1); padding: var(--uc-space-3) var(--uc-space-1); background: var(--uc-navy); color: var(--uc-white); border-radius: var(--uc-radius-md); text-align: center; }
.c-setbox__icon { display: inline-flex; }
.c-setbox__icon svg { width: 32px; height: 32px; }
.c-setbox__name { font-family: var(--uc-font-display); font-weight: 600; font-size: 13px; }
/* PC：5列で横並びにし、タイル間の余白に「＋」を表示 */
@media (min-width: 768px) {
  .c-setbox { padding: var(--uc-space-8) var(--uc-space-6) var(--uc-space-6); }
  .c-setbox__list { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--setbox-gap); }
  .c-setbox__item { gap: var(--uc-space-2); padding: var(--uc-space-4) var(--uc-space-2); }
  .c-setbox__icon svg { width: 54px; height: 54px; }
  .c-setbox__name { font-size: 14px; }
  .c-setbox__item:not(:last-child)::after {
    content: "+";
    position: absolute; top: 50%; left: calc(100% + var(--setbox-gap) / 2);
    transform: translate(-50%, -50%);
    color: var(--uc-navy); font-family: var(--uc-font-display); font-size: 22px; font-weight: 600; line-height: 1;
  }
}

/* 関連イベント（横スクロール） */
.c-eventscroll { display: flex; gap: var(--uc-space-4); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: var(--uc-space-3); scroll-padding-left: var(--uc-container-px); }
.c-eventscroll:focus-visible { outline: none; box-shadow: var(--uc-ring-focus); border-radius: var(--uc-radius-lg); }
.c-eventscroll__item { flex: 0 0 clamp(240px, 72%, 300px); scroll-snap-align: start; }
.c-eventscroll__item > .c-card { height: 100%; }
/* 先輩体験談・コラムのスライダー：PCでは3件が横幅を埋め、4件以上でスライドする */
.sec-voice__list.c-eventscroll > .c-eventscroll__item,
.sec-column__list.c-eventscroll > .c-eventscroll__item { flex-basis: clamp(260px, 32%, 380px); }

/* 留学タイプ診断チャート：図を白いカードで見せる */
.c-flowchart { margin: 0; background: var(--uc-white); border: var(--uc-border-width) solid var(--uc-border-hairline); border-radius: var(--uc-radius-lg); padding: var(--uc-space-5); overflow-x: auto; }
.c-flowchart__img { display: block; width: 100%; max-width: 1000px; height: auto; margin-inline: auto; }
.c-flowchart__caption { margin-top: var(--uc-space-4); text-align: center; font-size: 14px; color: var(--uc-text-secondary); }

/* こんな人におすすめ：チェックリスト（白いカード） */
.c-checklist { list-style: none; margin: 0; padding: var(--uc-space-6); display: grid; gap: var(--uc-space-4); background: var(--uc-white); border: var(--uc-border-width) solid var(--uc-border-hairline); border-radius: var(--uc-radius-lg); }
.c-checklist__item { display: flex; align-items: center; gap: var(--uc-space-3); font-family: var(--uc-font-display); font-size: 16px; font-weight: 500; color: var(--uc-text); }
.c-checklist__icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border-radius: var(--uc-radius-circle); background: rgba(0,38,127,0.10); color: var(--uc-blue-text); }

/* 生協旅行カウンター：地域リンク */
.c-region-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--uc-space-3); justify-content: center; }

/* End : events（Page / Section） */

/* ==========================================================================
   Common  : mobile card layout（上部写真カードのモバイル横並び化）
   Section : responsive
   Description : 「上部が写真＋下にテキスト」のカード（pickup / service / course /
                 article / phasecard）を、Small（≤833px）で 1 カラムの縦リストにし、
                 各カードを「画像左・テキスト右」の横並び（内部2カラム・画像4:3）に。
                 PC（≥834px）は現状（縦積み・16:9・現行列数）を維持。
   ========================================================================== */
@media (max-width: 833px) {
  /* グリッドは1カラム（1行1カード） */
  .sec-pickup__list,
  .sec-courses__list,
  .sec-column__list,
  .sec-service__list,
  .sec-phase__cards {
    grid-template-columns: 1fr;
    gap: var(--uc-space-4);
  }
  /* カードを横並び（画像左・テキスト右）に */
  .c-card--pickup,
  .c-course,
  .c-article,
  .c-phasecard {
    flex-direction: row;
  }
  /* 左：画像列（4:3・幅を上限つきで固定。上・左を本文と同じ余白でインセット） */
  .c-card--pickup > .c-card__media,
  .c-course > .c-course__media,
  .c-article > .c-article__media,
  .c-phasecard > .c-phasecard__media {
    flex: 0 0 clamp(110px, 38%, 190px);
    align-self: flex-start;
    aspect-ratio: 1 / 1;
    margin: var(--uc-space-4) 0 var(--uc-space-4) var(--uc-space-4);
    border-radius: var(--uc-radius-md);
    overflow: hidden;
  }
  /* 右：テキスト列 */
  .c-card--pickup > .c-card__body,
  .c-course > .c-course__body,
  .c-article > .c-article__body,
  .c-phasecard > .c-phasecard__body {
    padding: var(--uc-space-4);
    min-width: 0;
  }

  /* Flow（流れ）のステップ：丸数字を左・テキストを右の横並び（縦ステッパー） */
  .sec-flow__list { grid-template-columns: 1fr; }
  .c-flowstep {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "num title" "num text";
    column-gap: var(--uc-space-4);
    align-items: start;
  }
  .c-flowstep__num { grid-area: num; margin-bottom: 0; }
  .c-flowstep__title { grid-area: title; margin-bottom: var(--uc-space-1); }
  .c-flowstep__text { grid-area: text; }

  /* アイコン付き Feature カード（Concept / Point / 選ばれる理由 等）：アイコン左・テキスト右 */
  .sec-feature__list:has(.c-feature__icon) { grid-template-columns: 1fr; }
  .c-feature:has(> .c-feature__icon) {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "icon title" "icon text";
    column-gap: var(--uc-space-4);
    align-items: start;
  }
  .c-feature:has(> .c-feature__icon) > .c-feature__icon { grid-area: icon; }
  .c-feature:has(> .c-feature__icon) > .c-feature__title { grid-area: title; margin-bottom: var(--uc-space-1); }
  .c-feature:has(> .c-feature__icon) > .c-feature__text { grid-area: text; }
  /* アイコン付きリンクカード（新入生チェックリスト等）で「詳しく見る」を持つ場合：
     未割当だと狭いアイコン列に auto 配置されタイトルを圧迫するため、下段に全幅で配置する */
  .c-feature:has(> .c-feature__icon):has(> .c-feature__more) { grid-template-areas: "icon title" "icon text" "more more"; }
  .c-feature:has(> .c-feature__icon) > .c-feature__more { grid-area: more; margin-top: var(--uc-space-2); }

  /* 新入生チェックリスト：数字バッジ＋タイトルを1行目、テキストは左端から全幅、その下にリンク */
  #checklist .c-feature:has(> .c-feature__icon) {
    grid-template-areas: "icon title" "text text" "more more";
    align-items: center;
  }
  #checklist .c-feature:has(> .c-feature__icon) > .c-feature__text { margin-top: var(--uc-space-1); }

  /* Categories（トップ）カード：アイコン左・テキスト右 */
  .sec-category__list { grid-template-columns: 1fr; }
  .c-category {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "icon title" "icon text";
    column-gap: var(--uc-space-4);
    align-items: start;
  }
  .c-category__icon { grid-area: icon; }
  .c-category__icon svg { width: 48px; height: 48px; }
  .c-category__title { grid-area: title; margin-bottom: var(--uc-space-1); }
  .c-category__text { grid-area: text; }
}
/* End : Common mobile card layout */

/* ==========================================================================
   Page    : events（イベント一覧）
   Section : filter（カテゴリ絞り込みチップ）
   Description : イベント一覧のカテゴリ絞り込みチップ・件数表示・0件メッセージ
   ========================================================================== */
/* 探すパネル：カテゴリ見出し + キーワード検索 */
.c-searchpanel { display: grid; gap: var(--uc-space-6); }   /* セクション単体で使うため下マージンは持たせない */
.c-searchpanel__title { font-family: var(--uc-font-display); font-weight: 600; font-size: 16px; margin-bottom: var(--uc-space-3); }
.c-keywordsearch { display: flex; gap: var(--uc-space-2); max-width: 520px; }
.c-keywordsearch__input { flex: 1; min-width: 0; height: 44px; padding: 0 var(--uc-space-4); font-family: var(--uc-font-text); font-size: 15px; color: var(--uc-text); background: var(--uc-white); border: var(--uc-border-width) solid var(--uc-border-hairline); border-radius: var(--uc-radius-pill); }
.c-keywordsearch__input:focus-visible { outline: none; border-color: var(--uc-navy); box-shadow: var(--uc-ring-focus); }
.c-keywordsearch__btn { flex: none; height: 44px; padding: 0 var(--uc-space-5); font-family: var(--uc-font-text); font-weight: 500; font-size: 15px; color: var(--uc-white); background: var(--uc-navy); border: 0; border-radius: var(--uc-radius-pill); cursor: pointer; }
.c-keywordtags { display: flex; flex-wrap: wrap; align-items: center; gap: var(--uc-space-2); margin-top: var(--uc-space-3); }
.c-keywordtags__label { font-size: 13px; color: var(--uc-text-secondary); margin-right: var(--uc-space-1); }
.c-keywordtags__tag { padding: var(--uc-space-1) var(--uc-space-3); font-family: var(--uc-font-text); font-size: 13px; color: var(--uc-blue-text); background: rgba(0,38,127,0.06); border: var(--uc-border-width) solid var(--uc-border-hairline); border-radius: var(--uc-radius-pill); cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .c-keywordsearch__btn:hover { background: rgba(0,38,127,0.85); }
  .c-keywordtags__tag:hover { background: rgba(0,38,127,0.12); border-color: var(--uc-navy); }
}
.c-eventfilter { display: flex; flex-wrap: wrap; gap: var(--uc-space-2); margin-bottom: var(--uc-space-4); }
.c-eventfilter__chip {
  padding: var(--uc-space-2) var(--uc-space-4); min-height: 40px;
  font-family: var(--uc-font-display); font-size: 14px; font-weight: 600; letter-spacing: normal;
  color: var(--uc-text); background: var(--uc-white);
  border: var(--uc-border-width) solid var(--uc-border-strong); border-radius: var(--uc-radius-pill);
  transition: background-color var(--uc-dur-3) var(--uc-ease-out), color var(--uc-dur-3) var(--uc-ease-out), border-color var(--uc-dur-3) var(--uc-ease-out);
}
.c-eventfilter__chip.is-active { background: var(--uc-navy); color: var(--uc-on-dark); border-color: var(--uc-navy); }
@media (hover: hover) and (pointer: fine) {
  .c-eventfilter__chip:not(.is-active):hover { border-color: var(--uc-navy); color: var(--uc-blue-text); }
}
.c-eventfilter__count { margin-bottom: var(--uc-space-5); font-size: 14px; color: var(--uc-text-secondary); }
.c-eventfilter__empty { padding: var(--uc-space-8) 0; text-align: center; color: var(--uc-text-secondary); }
/* End : events list filter */

/* ==========================================================================
   Page    : events（イベント一覧・カード形式）
   Section : card-list（上部画像＋左日付・右タグ/タイトルのカード）
   Description : events/gallery/ 用。画像上部、下段を「左：日付／右：タグ・タイトル・概要」の2カラムで配置
   Note        : 日付・タグ・概要は c-event__date / c-event__tags / c-event__meta を再利用
   ========================================================================== */
.c-eventcards { display: grid; grid-template-columns: 1fr; gap: var(--uc-space-5); }
@media (min-width: 640px)  { .c-eventcards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .c-eventcards { grid-template-columns: repeat(3, 1fr); } }

.c-eventcard {
  position: relative; display: flex; flex-direction: column; height: 100%;
  background: var(--uc-white); border: var(--uc-border-width) solid var(--uc-border-hairline);
  border-radius: var(--uc-radius-lg); overflow: hidden;
  transition: box-shadow var(--uc-dur-3) var(--uc-ease-out), transform var(--uc-dur-3) var(--uc-ease-out);
}
.c-eventcard__media { margin: 0; aspect-ratio: var(--uc-ratio-wide); background: var(--uc-blue-gray); }
.c-eventcard__media img { width: 100%; height: 100%; object-fit: cover; }
.c-eventcard__body {
  display: grid; grid-template-columns: auto 1fr; gap: var(--uc-space-4);
  align-items: start; padding: var(--uc-space-5); flex: 1;
}
.c-eventcard__main { min-width: 0; display: flex; flex-direction: column; gap: var(--uc-space-2); }
.c-eventcard__title { font-size: 17px; line-height: 1.4; }
.c-eventcard__link { color: inherit; }
.c-eventcard__link::after { content: ""; position: absolute; inset: 0; }
@media (hover: hover) and (pointer: fine) {
  .c-eventcard:hover { box-shadow: var(--uc-shadow-3); transform: translateY(-2px); }
  .c-eventcard__link:hover { color: var(--uc-blue-text); }
}
/* モバイル：カードを2カラム化（左=4:3画像 / 右=タグ・日時・タイトル・詳細を見る） */
@media (max-width: 639px) {
  .c-eventcard { flex-direction: row; }
  .c-eventcard__media { flex: 0 0 40%; aspect-ratio: 4 / 3; align-self: flex-start; }
  .c-eventcard__body { display: flex; flex-direction: column; gap: var(--uc-space-2); padding: var(--uc-space-4); min-width: 0; }
  .c-eventcard__main { display: contents; }   /* 子要素を body の縦並びに合流させ、order で並べ替え */
  /* ※ 以下は必ず .c-eventcard 配下に限定すること。
     セレクタを裸の .c-event__* にすると、他ページの説明会リスト（.c-event）まで
     日付タイルがインラインテキスト化し、レイアウトが崩れる。 */
  .c-eventcard .c-event__tags { order: 1; }
  .c-eventcard .c-event__date { order: 2; width: auto; padding: 0; background: none; border-radius: 0; place-items: start; }
  .c-eventcard .c-event__date time { display: flex; flex-direction: row; align-items: baseline; gap: 2px; }
  .c-eventcard .c-event__month, .c-eventcard .c-event__weekday { font-size: 12px; color: var(--uc-text-secondary); }
  .c-eventcard .c-event__day { font-family: var(--uc-font-text); font-size: 12px; font-weight: 400; color: var(--uc-text-secondary); }
  .c-eventcard .c-event__day::after { content: "日"; }
  .c-eventcard .c-event__weekday::before { content: "（"; }
  .c-eventcard .c-event__weekday::after { content: "）"; }
  .c-eventcard__title { order: 3; font-size: 15px; }
  .c-eventcard .c-event__meta { order: 4; font-size: 13px; }
  .c-eventcard__body::after { order: 5; content: "詳細を見る →"; font-family: var(--uc-font-display); font-weight: 600; font-size: 13px; color: var(--uc-blue-text); }
}
/* End : events card-list */

/* ==========================================================================
   Page    : career（就職・資格・検定トップ）
   Section : category-menu（カテゴリトップ専用のクイックメニュー）
   Description : Category Hero 直下に配置。カテゴリ内の主要導線へジャンプするネイビーのメニューバー
   Design      : ネイビー基調／ホバー・フォーカスで アクセントブルー／右端にシェブロン（DESIGN.md 準拠）
   ========================================================================== */
.c-catmenu { padding: var(--uc-space-5) 0; background: var(--uc-white); }
/* セクション内に配置する版：白帯を持たず、背景（グレー等）になじませる */
.c-catmenu--bare { padding: 0; background: transparent; margin-bottom: var(--uc-space-7); }
.c-catmenu__list { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--uc-space-3); }
.c-catmenu__item {
  display: flex; align-items: center; justify-content: space-between; gap: var(--uc-space-1);
  min-height: 56px; padding: var(--uc-space-3) var(--uc-space-4);
  font-family: var(--uc-font-display); font-size: 14px; font-weight: 600; line-height: 1.3;
  color: var(--uc-on-dark); background: var(--uc-navy);
  border-radius: var(--uc-radius-md);
  transition: background-color var(--uc-dur-3) var(--uc-ease-out),
              transform var(--uc-dur-3) var(--uc-ease-out),
              box-shadow var(--uc-dur-3) var(--uc-ease-out);
}
.c-catmenu__note { font-size: 11px; font-weight: 500; opacity: 0.85; }
.c-catmenu__arrow {
  flex: none; padding-left: var(--uc-space-2); font-size: 20px; line-height: 1; opacity: 0.7;
  transition: transform var(--uc-dur-3) var(--uc-ease-out), color var(--uc-dur-3) var(--uc-ease-out), opacity var(--uc-dur-3) var(--uc-ease-out);
}
/* ホバー：カードを持ち上げ＋影、シェブロンを黄（差し色）で右へスライド
   ※ 背景はネイビーのまま（--uc-navy と --ucnavi-blue が同値のため色替えでは変化が出ない） */
@media (hover: hover) and (pointer: fine) {
  .c-catmenu__item:hover { transform: translateY(-2px); box-shadow: var(--uc-shadow-3); }
  .c-catmenu__item:hover .c-catmenu__arrow { color: var(--uc-yellow); opacity: 1; transform: translateX(4px); }
}
.c-catmenu__item:active { transform: translateY(0); box-shadow: none; }

/* 選択中のカテゴリ（絞り込み表示中）：黄の下線とシェブロンで現在地を示す */
.c-catmenu__item--current { box-shadow: inset 0 -3px 0 0 var(--uc-yellow); }
.c-catmenu__item--current .c-catmenu__arrow { color: var(--uc-yellow); opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .c-catmenu__item--current:hover { box-shadow: inset 0 -3px 0 0 var(--uc-yellow), var(--uc-shadow-3); }
}
.c-catmenu__item:focus-visible { outline: 3px solid var(--ucnavi-blue); outline-offset: 2px; }
/* アンカー先がヘッダーに隠れないように */
#service-job, #service-civil, #service-qual { scroll-margin-top: var(--uc-space-8); }
@media (max-width: 833px) {
  .c-catmenu__list { grid-template-columns: repeat(2, 1fr); }
}
/* End : career category-menu */

/* ==========================================================================
   Page    : career（就職・資格・検定トップ）
   Section : learn（テーマ別コラム「について知ろう」）
   Description : 画像左（16:9）＋タイトル・抜粋右の横型コラムカード。PC 2列 / モバイル 1列（縦4枚）
   ========================================================================== */
.sec-learn__group + .sec-learn__group { margin-top: var(--uc-space-9); }
.sec-learn__group-title {
  font-family: var(--uc-font-display); font-weight: 600; font-size: 19px;
  margin-bottom: var(--uc-space-4); padding-bottom: var(--uc-space-2);
  border-bottom: var(--uc-border-width) solid var(--uc-border-hairline);
}
/* 見出し右に「一覧を見る」ボタンを置く版：下線・余白はヘッダー側に移す */
.sec-learn__group-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--uc-space-4); flex-wrap: wrap;
  margin-bottom: var(--uc-space-4); padding-bottom: var(--uc-space-2);
  border-bottom: var(--uc-border-width) solid var(--uc-border-hairline);
}
.sec-learn__group-head .sec-learn__group-title { margin: 0; padding: 0; border: 0; }
.sec-learn__group-head .sec__head-link { flex: none; }
.c-colcard__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--uc-space-5); }
.c-colcard {
  position: relative; display: grid; grid-template-columns: 42% 1fr; gap: var(--uc-space-4);
  align-items: center; padding: var(--uc-space-4);
  background: var(--uc-white); border: var(--uc-border-width) solid var(--uc-border-hairline);
  border-radius: var(--uc-radius-lg);
  transition: box-shadow var(--uc-dur-3) var(--uc-ease-out), transform var(--uc-dur-3) var(--uc-ease-out);
}
.c-colcard__media { margin: 0; aspect-ratio: var(--uc-ratio-wide); border-radius: var(--uc-radius-md); overflow: hidden; background: var(--uc-blue-gray); }
.c-colcard__media img { width: 100%; height: 100%; object-fit: cover; }
.c-colcard__body { min-width: 0; }
.c-colcard__title { font-size: 16px; line-height: 1.45; }
.c-colcard__link { color: inherit; }
.c-colcard__link::after { content: ""; position: absolute; inset: 0; }
.c-colcard__excerpt {
  margin-top: var(--uc-space-2); font-size: 14px; line-height: 1.6; color: var(--uc-text-secondary);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (hover: hover) and (pointer: fine) {
  .c-colcard:hover { box-shadow: var(--uc-shadow-3); transform: translateY(-2px); }
  .c-colcard__link:hover { color: var(--uc-blue-text); }
}
@media (max-width: 833px) {
  .c-colcard__list { grid-template-columns: 1fr; }
}
/* End : career learn */

/* ==========================================================================
   Page    : freshman/pc2（新入生 PC・iPad 講座トップ）
   Section : courses--split（講座を選ぶ / 4講座・横並び2列・カード内2カラム）
   Description : 外側は 2 列（Skill Check セクションと同じ列数）、カード内は
                 「画像左・テキスト右」の 2 カラム。Small（≤833px）は既存の
                 モバイル横並びカードレイアウトをそのまま利用（1列）。
   ========================================================================== */
@media (min-width: 834px) {
  .sec-courses__list--split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c-course--split { flex-direction: row; }
  .c-course--split > .c-course__media {
    flex: 0 0 clamp(150px, 36%, 220px);
    align-self: flex-start;
    aspect-ratio: 1 / 1;
    margin: var(--uc-space-4) 0 var(--uc-space-4) var(--uc-space-4);
    border-radius: var(--uc-radius-md);
    overflow: hidden;
  }
  .c-course--split > .c-course__body {
    padding: var(--uc-space-4);
    min-width: 0;
  }
}
/* End : freshman/pc2 courses--split */

/* ==========================================================================
   Page    : freshman/pc2（講座を選ぶ / C案・D案：PC講座（実践編）を強調）
   C案 featured : 実践編を大きな主役カード＋残り2講座をミニカード（サイズ差で強調）
   D案 emphasis : 3列グリッドはそのまま、実践編カードだけ装飾で強調（枠線・リボン・見出し紺）
   Small(≤833px)でも強調が伝わるよう、主役カードは大画像のまま／強調枠・リボンは常時表示。
   ========================================================================== */
/* 共通：おすすめリボン＆ネイビー強調枠 */
.c-course__ribbon {
  position: absolute; top: var(--uc-space-3); right: 0; z-index: 2;
  padding: 5px 12px 5px 14px;
  background: var(--uc-navy); color: var(--uc-white);
  font-family: var(--uc-font-display); font-weight: 700; font-size: 12px; letter-spacing: 0.02em;
  border-radius: var(--uc-radius-pill) 0 0 var(--uc-radius-pill);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.c-course--emph { border: 2px solid var(--uc-navy); box-shadow: var(--uc-shadow-3); }
.c-course--emph .c-course__title a { color: var(--uc-blue-text); }

/* ---- C案：featured（実践編1枚＋残り2枚のミニカード） ---- */
.sec-courses__featured { display: grid; gap: var(--uc-space-5); }
.sec-courses__sub { display: grid; gap: var(--uc-space-4); margin: 0; padding: 0; list-style: none; }
.c-course--feature .c-course__title { font-size: 22px; }
/* ミニカード：画像左・テキスト右のコンパクト横並び（主役とのサイズ差を明確化） */
.c-course--mini { flex-direction: row; }
.c-course--mini > .c-course__media {
  flex: 0 0 clamp(96px, 32%, 150px); align-self: stretch; aspect-ratio: 1 / 1;
  margin: 0; border-radius: 0;
}
.c-course--mini > .c-course__body { padding: var(--uc-space-4); gap: var(--uc-space-1); }
.c-course--mini .c-course__title { font-size: 15px; }
.c-course--mini .c-course__meta { font-size: 13px; }
@media (min-width: 834px) {
  .sec-courses__featured { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
}
@media (max-width: 833px) {
  /* 主役カードはモバイルでも「大画像・縦」を維持（他の横並び小カードと差を出す） */
  .c-course--feature { flex-direction: column; }
  .c-course--feature > .c-course__media {
    flex: none; width: auto; align-self: auto; aspect-ratio: var(--uc-ratio-wide);
    margin: 0; border-radius: 0;
  }
}
/* End : freshman/pc2 courses C案・D案 */

/* ---- D案：実践編を全幅1カラム＋その下に入門編・iPadを2カラム ---- */
.sec-courses__stack { display: grid; gap: var(--uc-space-5); }
.sec-courses__pair { display: grid; gap: var(--uc-space-4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 834px) {
  .sec-courses__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* 実践編：全幅・画像左＋テキスト右で大きく見せる */
  .c-course--wide { flex-direction: row; }
  .c-course--wide > .c-course__media { flex: 0 0 clamp(220px, 38%, 380px); align-self: stretch; margin: 0; border-radius: 0; }
  .c-course--wide > .c-course__body { padding: var(--uc-space-6); }
  .c-course--wide .c-course__title { font-size: 22px; }
}
/* End : freshman/pc2 courses D案（stack） */

/* ==========================================================================
   Page    : index_ver3（トップ 案3）
   Section : feature--bigicon（「生協が選ばれる理由」のアイコンを Categories と同様に）
   Description : 箱付き小アイコンではなく、Categories カード同様の大きな線アイコンで表示。
   ========================================================================== */
.sec-feature--bigicon .c-feature__icon {
  width: auto; height: auto; background: none; border-radius: 0; color: var(--uc-blue-text);
}
.sec-feature--bigicon .c-feature__icon svg { width: 72px; height: 72px; }
@media (max-width: 833px) {
  .sec-feature--bigicon .c-feature__icon svg { width: 48px; height: 48px; }
}
/* End : index_ver3 feature--bigicon */

/* ==========================================================================
   Page    : index_ver3（トップ 案3）
   Section : センタリング（Categories=アイコン＋タイトル / Why=タイトル）
   Note    : 縦積みになる PC 幅（≥834px）でのみ中央寄せ。モバイルはアイコン左の
             横並びレイアウトを維持するため対象外。
   ========================================================================== */
@media (min-width: 834px) {
  .sec-category--center .c-category { align-items: center; text-align: center; }
  /* Why は依頼どおりタイトルのみ中央寄せ（アイコンは左のまま） */
  .sec-feature--bigicon .c-feature__title { text-align: center; }
  /* career：アイコンとタイトルを中央寄せ（テキスト幅は維持） */
  .sec-feature--center .c-feature__icon { align-self: center; }
  .sec-feature--center .c-feature__title { text-align: center; }
}
/* End : index_ver3 centering */

/* ==========================================================================
   Component : c-slider（カード送りカルーセル / 1枚ずつスライド＋ドット＋左右矢印）
   Used      : index_ver3「先輩の声」（dark）。--per で表示枚数を切替（PC3 / タブ2 / モバイル1）。
   ========================================================================== */
.c-slider { --per: 1; }
@media (min-width: 640px)  { .c-slider { --per: 2; } }
@media (min-width: 1024px) { .c-slider { --per: 3; } }
.c-slider__viewport { overflow: hidden; }
.c-slider__track { display: flex; gap: var(--uc-space-5); margin: 0; padding: 0; list-style: none; will-change: transform; }
.c-slider__track > * { flex: 0 0 calc((100% - var(--uc-space-5) * (var(--per) - 1)) / var(--per)); min-width: 0; }
.c-slider__controls { display: flex; align-items: center; justify-content: center; gap: var(--uc-space-4); margin-top: var(--uc-space-6); }
.c-slider__controls[hidden] { display: none; }
.c-slider__arrow {
  flex: none; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--uc-radius-circle); border: var(--uc-border-width) solid var(--uc-border-strong);
  background: var(--uc-white); color: var(--uc-text); cursor: pointer;
  transition: background-color var(--uc-dur-3) var(--uc-ease-out), border-color var(--uc-dur-3) var(--uc-ease-out), opacity var(--uc-dur-3) var(--uc-ease-out);
}
.c-slider__arrow:disabled { opacity: 0.35; cursor: default; }
.c-slider__dots { display: flex; align-items: center; gap: var(--uc-space-2); }
.c-slider__dot { width: 8px; height: 8px; padding: 0; border: 0; cursor: pointer; border-radius: var(--uc-radius-circle); background: rgba(0,0,0,0.2); transition: background-color var(--uc-dur-2) var(--uc-ease-out), width var(--uc-dur-3) var(--uc-ease-out); }
.c-slider__dot[aria-selected="true"] { background: var(--uc-navy); width: 22px; border-radius: var(--uc-radius-pill); }
@media (hover: hover) and (pointer: fine) { .c-slider__arrow:not(:disabled):hover { background: var(--uc-bg-gray); } }

/* dark セクション（先輩の声）向けの配色 */
[data-theme="dark"] .c-slider__arrow { border-color: var(--uc-border-on-dark); background: rgba(255,255,255,0.06); color: var(--uc-on-dark); }
[data-theme="dark"] .c-slider__dot { background: rgba(255,255,255,0.4); }
[data-theme="dark"] .c-slider__dot[aria-selected="true"] { background: var(--uc-white); }
@media (hover: hover) and (pointer: fine) { [data-theme="dark"] .c-slider__arrow:not(:disabled):hover { background: rgba(255,255,255,0.14); } }
/* End : c-slider */

/* ==========================================================================
   Page    : freshman/suit（入学式スーツ・大学生協特別クーポン）
   ========================================================================== */
/* 注意事項（※）リスト */
.c-notelist { display: flex; flex-direction: column; gap: var(--uc-space-2); margin: 0 0 var(--uc-space-6); font-size: 14px; line-height: 1.7; color: var(--uc-text-secondary); }
.c-notelist__term { font-weight: 600; color: var(--uc-text); }

/* 地域別ボタン（3個横並び / モバイル1列） */
.c-regionbtns { display: grid; grid-template-columns: 1fr; gap: var(--uc-space-3); }
@media (min-width: 640px) { .c-regionbtns { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.c-regionbtns .c-btn { width: 100%; }

/* クーポン一覧（店名＋クーポン画像のタイル） */
.c-couponlist { display: grid; grid-template-columns: 1fr; gap: var(--uc-space-5); }
@media (min-width: 640px)  { .c-couponlist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .c-couponlist { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* カード型にせず、店名＋下線＋余白＋クーポン画像のみで見せる */
.c-couponcard { display: flex; flex-direction: column; gap: var(--uc-space-4); }
.c-couponcard__store {
  padding-bottom: var(--uc-space-3);
  font-family: var(--uc-font-display); font-weight: 600; font-size: 16px;
  border-bottom: var(--uc-border-width) solid var(--uc-border-hairline);
}
.c-couponcard__media { margin: 0; }
.c-couponcard__media img { display: block; width: 100%; height: auto; }
/* 店名（左）＋店舗検索ボタン（右端）を1行に並べ、下線は2つをまとめた行に引く */
.c-couponcard__head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--uc-space-3);
  padding-bottom: var(--uc-space-3);
  border-bottom: var(--uc-border-width) solid var(--uc-border-hairline);
}
.c-couponcard__head .c-couponcard__store { padding-bottom: 0; border-bottom: 0; min-width: 0; }
.c-couponcard__head .c-btn { flex: none; }
/* End : freshman/suit */

/* ==========================================================================
   Page    : freshman トップ ヒーロー背景（このページ限定）
   Description : 白背景の代わりに bg_start.png を敷き、白 75% のベールを重ねて
                 テキスト・右画像を見やすく。左テキスト／右画像の構成は変更なし。
   ========================================================================== */
/* フルブリード背景のはみ出しで横スクロールが出ないようにする（このページのみ） */
main:has(.sec-cat-hero--startbg) { overflow-x: clip; }

/* PC幅のみ適用。モバイルは従来どおり（右イラストが背景化）で変更しない。
   背景は ::before で画面幅いっぱい（フルブリード）に敷き、コンテンツは前面に。 */
@media (min-width: 834px) {
  .sec-cat-hero--split.sec-cat-hero--startbg { position: relative; overflow: visible; background: transparent; }
  /* 背景画像：セクション全体（フルブリード） */
  .sec-cat-hero--split.sec-cat-hero--startbg::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 50%; margin-left: -50vw; width: 100vw; z-index: 0;
    background: url("img/bg/bg_start.png") center / cover no-repeat;
  }
  /* 白ベール90%：ヒーローの2カラム部分（コンテナ幅）だけに重ねる */
  .sec-cat-hero--split.sec-cat-hero--startbg::after {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: rgba(255,255,255,0.90);
  }
  .sec-cat-hero--split.sec-cat-hero--startbg .sec-cat-hero__media,
  .sec-cat-hero--split.sec-cat-hero--startbg .sec-cat-hero__body { position: relative; z-index: 1; }
}
/* End : freshman hero startbg */

/* ==========================================================================
   Page    : freshman トップ（ピンクの世界観 / このページ限定）
   Note    : フッター・先輩の声（data-theme="dark"）の背景を #EF7F9A に、
             アクセント（ボタン等）もピンクに。<body class="t-pink"> でスコープ。
   ========================================================================== */
/* 背景はピンク系（フッター #EF7F9A / セクション #FDF1F4）、アクセント（ボタン・アウトライン・
   アイビーブロー）はグローバルナビ「新規登録」ボタンと同色（--uc-register = #e52a56）に統一。 */
body.t-pink { --uc-bg-dark: #EF7F9A; --uc-bg-gray: #FDF1F4; --ucnavi-blue: var(--uc-register); }
@media (hover: hover) and (pointer: fine) {
  body.t-pink .c-btn--primary:hover { background: #c81f47; }
  body.t-pink .c-btn--outline:hover,
  body.t-pink .sec-cat-hero--split .c-btn--on-dark:hover { background: rgba(229,42,86,0.08); }
}
/* アイビーブロー（Checklist / Freshman ー 新入生向け 等）とヒーローの「講座を探す」ボタン、
   人気記事セクションの「特集一覧」アウトラインボタン（文字＋枠）を新規登録と同色に */
body.t-pink .sec__eyebrow,
body.t-pink .sec-cat-hero__eyebrow { color: var(--uc-register); }
body.t-pink [data-theme="dark"] .sec__eyebrow { color: var(--uc-yellow); }
body.t-pink .sec-cat-hero--split .c-btn--on-dark,
body.t-pink .c-btn--outline { color: var(--uc-register); }

/* 先輩の声：明るい #FDF1F4 セクション（data-theme="gray"）に合わせてカード・スライダーを
   ライト＆WCAG準拠の高コントラストに。操作系はグローバルナビ「新規登録」ボタンと同色（--uc-register）。 */
body.t-pink .sec-voice .sec__eyebrow { color: var(--uc-register); }
body.t-pink .sec-voice .c-voice { background: var(--uc-white); border-color: var(--uc-border-hairline); }
body.t-pink .sec-voice .c-voice__body { color: var(--uc-text); }
body.t-pink .sec-voice .c-voice__attr { color: var(--uc-text-secondary); }
body.t-pink .sec-voice .c-slider__arrow { background: var(--uc-register); border-color: var(--uc-register); color: var(--uc-white); }
body.t-pink .sec-voice .c-slider__arrow:disabled { opacity: 0.4; }
body.t-pink .sec-voice .c-slider__dot[aria-selected="true"] { background: var(--uc-register); }
@media (hover: hover) and (pointer: fine) {
  body.t-pink .sec-voice .c-slider__arrow:not(:disabled):hover { background: #c81f47; border-color: #c81f47; }
}
/* End : freshman t-pink */

/* ==========================================================================
   Page    : graduate トップ（グリーンの世界観 / このページ限定）
   Note    : freshman の t-pink を複製し、指定の2色に置換。
             濃 #EF7F9A→#92D050（フッター）／薄 #FDF1F4→#E3F3D1（セクション）。
             アクセント（ボタン・eyebrow・スライダー操作）は新規登録と同色（--uc-register）のまま。
             #92D050 は明度が高く白文字が読みづらいため、フッターの文字は濃色にする。
   ========================================================================== */
body.t-green { --uc-bg-dark: #92D050; --uc-bg-gray: #E3F3D1; --acc-green: #1B5E20; --acc-green-dark: #144419; --ucnavi-blue: var(--acc-green); }
@media (hover: hover) and (pointer: fine) {
  body.t-green .c-btn--primary:hover { background: var(--acc-green-dark); }
  body.t-green .c-btn--outline:hover,
  body.t-green .sec-cat-hero--split .c-btn--on-dark:hover { background: rgba(27,94,32,0.08); }
}
body.t-green .sec__eyebrow,
body.t-green .sec-cat-hero__eyebrow { color: var(--acc-green); }
body.t-green [data-theme="dark"] .sec__eyebrow { color: var(--uc-text); }
body.t-green .sec-cat-hero--split .c-btn--on-dark,
body.t-green .c-btn--outline { color: var(--acc-green); }

/* 先輩の声：明るい #E3F3D1（data-theme="gray"）にカード・スライダーを合わせる */
body.t-green .sec-voice .sec__eyebrow { color: var(--acc-green); }
body.t-green .sec-voice .c-voice { background: var(--uc-white); border-color: var(--uc-border-hairline); }
body.t-green .sec-voice .c-voice__body { color: var(--uc-text); }
body.t-green .sec-voice .c-voice__attr { color: var(--uc-text-secondary); }
body.t-green .sec-voice .c-slider__arrow { background: var(--acc-green); border-color: var(--acc-green); color: var(--uc-white); }
body.t-green .sec-voice .c-slider__arrow:disabled { opacity: 0.4; }
body.t-green .sec-voice .c-slider__dot[aria-selected="true"] { background: var(--acc-green); }
@media (hover: hover) and (pointer: fine) {
  body.t-green .sec-voice .c-slider__arrow:not(:disabled):hover { background: var(--acc-green-dark); border-color: var(--acc-green-dark); }
}

/* フッター（#92D050 地）：白文字だと読みづらいので濃色テキストに */
body.t-green .sec-footer,
body.t-green .sec-footer a { color: var(--uc-text); }
body.t-green .sec-footer__tagline,
body.t-green .sec-footer__col-title,
body.t-green .sec-footer__copyright { color: var(--uc-text-secondary); }
body.t-green .sec-footer .u-divider--on-dark { border-color: rgba(0,0,0,0.18); }

/* ヒーロー背景画像（bg_start.png）を180度回転（白ベール ::after は回さない）。PC幅のみ */
@media (min-width: 834px) {
  body.t-green .sec-cat-hero--split.sec-cat-hero--startbg::before { transform: rotate(180deg); }
}
/* End : graduate t-green */

/* ==========================================================================
   Page    : freshman トップ フッター（ヒーローと同じ背景画像＋白レイヤー＋黒文字）
   Note    : body.t-pink 限定。フッターは全幅ブロックなので背景は直接適用でOK。
   ========================================================================== */
body.t-footbg .sec-footer {
  position: relative;
  background: url("img/bg/bg_start.png") center / cover no-repeat;
  color: var(--uc-text);
}
/* 白ベール90%は「コンテナ幅」だけに重ねる（ヒーローと同じ幅・同じ透明度）。左右は背景画像が見える */
body.t-footbg .sec-footer::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: min(100%, var(--uc-container)); background: rgba(255,255,255,0.90); z-index: 0;
}
body.t-footbg .sec-footer > * { position: relative; z-index: 1; }
body.t-footbg .sec-footer a { color: var(--uc-text); }
body.t-footbg .sec-footer__tagline,
body.t-footbg .sec-footer__col-title,
body.t-footbg .sec-footer__copyright { color: var(--uc-text-secondary); }
body.t-footbg .sec-footer .u-divider--on-dark { border-color: rgba(0,0,0,0.15); }
@media (hover: hover) and (pointer: fine) {
  body.t-footbg .sec-footer a:hover { text-decoration: underline; }
}
/* End : freshman footer bg */

/* 卒業生ページ：フッター背景画像も180度回転（ヒーローと揃える）。t-green のみ。
   画像は ::after に移して回転、白ベール ::before は前面、コンテンツは最前面。 */
body.t-green.t-footbg .sec-footer { background: none; }
body.t-green.t-footbg .sec-footer::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: url("img/bg/bg_start.png") center / cover no-repeat;
  transform: rotate(180deg);
}
body.t-green.t-footbg .sec-footer::before { z-index: 1; }
body.t-green.t-footbg .sec-footer > * { z-index: 2; }
/* End : graduate footer bg rotate */

/* ==========================================================================
   Page    : freshman/com-pla（コミュ力×プランニング講座）
   Section : 2カラム（こんな人におすすめ／身につく力）＋チェックリスト
   ========================================================================== */
.c-twocol { display: grid; grid-template-columns: 1fr; gap: var(--uc-space-5); }
@media (min-width: 834px) { .c-twocol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.c-panel { background: var(--uc-white); border: var(--uc-border-width) solid var(--uc-border-hairline); border-radius: var(--uc-radius-lg); padding: var(--uc-space-6); height: 100%; }
.c-panel__title { font-family: var(--uc-font-display); font-weight: 600; font-size: 18px; margin-bottom: var(--uc-space-4); padding-bottom: var(--uc-space-3); border-bottom: var(--uc-border-width) solid var(--uc-border-hairline); }
.c-ticklist { display: flex; flex-direction: column; gap: var(--uc-space-3); }
.c-ticklist li { display: flex; align-items: flex-start; gap: var(--uc-space-3); font-size: 15px; line-height: 1.6; }
.c-ticklist li::before {
  content: ""; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: var(--uc-radius-circle);
  background: rgba(0,38,127,0.10) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300267f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4 4 10-10'/%3E%3C/svg%3E") center / 14px no-repeat;
}
/* オンライン説明会：内容・日程・ボタンを枠で囲み中央寄せ */
.c-seminarbox {
  max-width: 760px; margin: 0 auto; padding: var(--uc-space-7);
  border: var(--uc-border-width) solid var(--uc-border-strong); border-radius: var(--uc-radius-lg);
  text-align: center;
}
.c-seminarbox .c-ticklist--inline { margin: 0 0 var(--uc-space-6); }
.c-seminarbox .c-seminarlist { margin: 0 0 var(--uc-space-6); }
.c-seminarbox__cta { margin: 0; }

/* チェックリストを横並びに（オンライン説明会の内容 / PC幅のみ）。中央寄せ。 */
.c-ticklist--inline { margin: 0 0 var(--uc-space-8); }
@media (min-width: 834px) {
  .c-ticklist--inline { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: var(--uc-space-3) var(--uc-space-6); }
}

/* 説明会 日程：日付＋時間を詰めた「ピル」を横並び（ラップ）で中央寄せ・少し装飾 */
.c-seminarlist { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--uc-space-3); }
.c-seminarlist li {
  display: flex; align-items: baseline; gap: var(--uc-space-2); font-size: 14px;
  padding: var(--uc-space-2) var(--uc-space-4);
  background: var(--uc-bg-gray); border-radius: var(--uc-radius-pill);
}
.c-seminarlist__label { font-family: var(--uc-font-display); font-weight: 600; color: var(--uc-blue-text); white-space: nowrap; }
.c-seminarlist__time { color: var(--uc-text-secondary); white-space: nowrap; }

/* 講座の特徴：カード内の図版とボタン（SEQ） */
.c-feature__figure { margin: var(--uc-space-2) 0 0; text-align: center; }
.c-feature__figure img { display: block; width: 100%; max-width: 320px; height: auto; margin-inline: auto; border-radius: var(--uc-radius-md); }
.c-feature__actions { margin: var(--uc-space-2) 0 0; text-align: center; }

/* 講座の特徴：事前準備の目安時間（Day1・Day2の内訳付き） */
.c-preptime { padding: var(--uc-space-4); background: rgba(0,38,127,0.06); border-radius: var(--uc-radius-md); }
.c-preptime__title { font-family: var(--uc-font-display); font-weight: 600; font-size: 14px; color: var(--uc-blue-text); margin-bottom: var(--uc-space-2); }
.c-preptime__body { margin: 0; font-size: 13px; line-height: 1.6; }
.c-preptime__body dt { font-weight: 600; }
.c-preptime__body dt + dd { margin: 0 0 var(--uc-space-2); color: var(--uc-text-secondary); }
.c-preptime__body dt:not(:first-of-type) { margin-top: var(--uc-space-2); }

/* 開催概要・問い合わせ */
.c-contactbox { margin-top: var(--uc-space-6); padding: var(--uc-space-5); background: var(--uc-bg-gray); border-radius: var(--uc-radius-lg); font-size: 14px; line-height: 1.7; }
.c-contactbox dt { font-family: var(--uc-font-display); font-weight: 600; }
.c-contactbox dd { margin: 0 0 var(--uc-space-2); color: var(--uc-text-secondary); }
/* End : freshman/com-pla */

/* ==========================================================================
   Page    : freshman/pc2 index_ver2（新入生のためのPC活用講座）
   Section : STEP 0「その前に、ひとつだけ確認させてください。」の確認リスト
   Description : 共通の c-checklist は「できること・実績」を示す用途のため丸＋チェック
                 マークだが、ここは読者がこれから自己確認する項目。チェック済みに
                 見えないよう、空の四角（□）で表示する。アイコン内の svg は不要。
   ========================================================================== */
.c-checklist--confirm .c-checklist__icon {
  width: 24px; height: 24px;
  background: var(--uc-white);
  border: 2px solid var(--ucnavi-blue);
  border-radius: var(--uc-radius-sm);
}
/* End : freshman/pc2 index_ver2 STEP 0 */

/* ==========================================================================
   Page    : suitlp（入学式スーツ LP・単体公開用）
   Section : LP用フッター（コピーライトのみ）
   Description : 通常のフッターはナビ・ロゴを含むため [data-theme] のセクション
                 余白（最大96px）が前提。LPはコピーライト1行のみのため、上下の
                 余白を詰めて中央寄せにする。
   ========================================================================== */
.sec-footer--lp { padding-block: var(--uc-space-6); }
.sec-footer--lp .sec-footer__bottom { align-items: center; justify-content: center; }
.sec-footer--lp .sec-footer__copyright { text-align: center; }
/* End : suitlp footer */

/* ==========================================================================
   Component : c-schedule--highlight（比較表の1列を塗りつぶして強調）
   Used      : freshman/pc2 index_ver2「3つの講座の関係」の中央列（PC活用講座）
   Description : 中央列だけを紺ベタ＋白文字にして目立たせる。対象の列は --col3 の
                 ように別クラスで指定する。
   Note      : 塗りはセルの background で直接行う（オーバーレイや :has() には依存しない）。
                 モバイルは c-schedule--stackable 側の縦積み表示が優先されるため、
                 この指定は 834px 以上に限定する。
   ========================================================================== */
@media (min-width: 834px) {
  /* 中央列：紺ベタ */
  .c-schedule--highlight.c-schedule--col3 thead th:nth-child(3),
  .c-schedule--highlight.c-schedule--col3 tbody td:nth-child(3) {
    background: var(--uc-navy);
    color: var(--uc-on-dark);
    border-top-color: rgba(255,255,255,0.24);   /* 行の区切りを紺の上でも見えるように */
  }
  .c-schedule--highlight.c-schedule--col3 thead th:nth-child(3) {
    color: var(--uc-white);
    border-bottom-color: rgba(255,255,255,0.45);
  }
  /* 紺ベタの上に載る細かい要素 */
  .c-schedule--highlight.c-schedule--col3 thead th:nth-child(3) .c-schedule__colsub,
  .c-schedule--highlight.c-schedule--col3 tbody td:nth-child(3) .c-schedule__cellnote {
    color: var(--uc-on-dark-soft);
  }
  .c-schedule--highlight.c-schedule--col3 tbody td:nth-child(3) strong { color: var(--uc-white); }
  /* 列区切り線（黒10%）は紺の上では不要 */
  .c-schedule--highlight.c-schedule--col3 th:nth-child(3)::before,
  .c-schedule--highlight.c-schedule--col3 td:nth-child(3)::before { content: none; }
}
/* End : c-schedule--highlight */

/* ==========================================================================
   Component : c-schedule--stackable（比較表：モバイルで縦積みに組み替え）
   Used      : freshman/pc2 index_ver2「3つの講座の関係」
   Description : 4列（比較項目＋講座3つ）はモバイル幅に収まらず横スクロールになる。
                 833px以下では表組みを解除し、「比較項目 → 各講座の値」の縦積みへ
                 組み替えて横スクロールをなくす。講座名は td の data-label から出す。
   Note      : 縦積み時は「列」の概念がなくなるため、--highlight の浮き上がり演出は
                 無効化し、代わりに PC活用講座（3列目）のセルを淡いネイビーで強調する。
   ========================================================================== */
@media (max-width: 833px) {
  /* 横スクロール用の設定と、--highlight の飛び出し余白を解除 */
  .sec-compare__scroll--stackable { overflow-x: visible; padding: 0; }
  .c-schedule--stackable { min-width: 0; display: block; table-layout: auto; border-radius: var(--uc-radius-lg); overflow: hidden; }
  .c-schedule--stackable thead { display: none; }              /* 講座名は data-label で各セルに出す */
  .c-schedule--stackable tbody { display: block; }
  .c-schedule--stackable tbody tr { display: block; }
  .c-schedule--stackable tbody tr + tr { border-top: var(--uc-border-width) solid var(--uc-border-hairline); }

  /* 比較項目（行見出し）を見出しバーに */
  .c-schedule--stackable tbody th[scope="row"] {
    display: block; width: auto; white-space: normal;
    padding: var(--uc-space-3) var(--uc-space-4);
    background: var(--uc-bg-gray); color: var(--uc-blue-text);
    font-size: 15px; border-top: 0;
  }
  /* 各講座の値。上に講座名（data-label）を小さく出す */
  .c-schedule--stackable tbody td {
    display: block; width: auto; white-space: normal;
    padding: var(--uc-space-3) var(--uc-space-4);
    border-top: 0;
  }
  .c-schedule--stackable tbody td::before {
    content: attr(data-label);
    display: block; margin-bottom: 2px;
    font-family: var(--uc-font-display); font-weight: 600; font-size: 12px;
    color: var(--uc-text-secondary);
  }
  /* 左端の見出し列に効いていた固定幅を解除 */
  .c-schedule--compare.c-schedule--stackable th:first-child,
  .c-schedule--compare.c-schedule--stackable td:first-child { width: auto; white-space: normal; }

  /* --highlight の浮き上がりは無効化し、PC活用講座のセルだけ淡く強調 */
  .c-schedule--highlight.c-schedule--col3.c-schedule--stackable thead th:nth-child(3) { box-shadow: none; border-radius: 0; }
  .c-schedule--highlight.c-schedule--col3.c-schedule--stackable tbody td:nth-child(3) {
    box-shadow: none; border-radius: 0;
    background: rgba(0,38,127,0.05);
    border-left: 3px solid var(--uc-navy);
  }
  /* CTA行：ボタンを全幅に */
  .c-schedule--stackable td.c-schedule__cta { text-align: left; }
  .c-schedule--stackable td.c-schedule__cta .c-btn { display: flex; width: 100%; }
}
/* End : c-schedule--stackable */

/* ==========================================================================
   Component : c-lightbox（画像をモーダルで拡大表示）
   Used      : start（入学式スーツ LP）のクーポン画像
   Description : .js-lightbox（button）で画像を包むと、クリック／タップで <dialog> に
                 原寸表示する。ダイアログ本体は script.js が生成するため、ページ側の
                 マークアップは button で画像を包むだけでよい。
   Note      : 画像は原寸（拡大しない）。原寸が枠に収まらない場合はビューポート内で
                 スクロールして見せる（引き伸ばすとぼやけるため）。
   ========================================================================== */
/* 拡大できる画像であることを示すボタン */
.c-couponcard__zoom {
  display: block; width: 100%; padding: 0; border: 0;
  background: none; cursor: zoom-in;
  border-radius: var(--uc-radius-md); overflow: hidden;
  transition: opacity var(--uc-dur-2) var(--uc-ease-out);
}
.c-couponcard__zoom img { display: block; width: 100%; height: auto; }
@media (hover: hover) and (pointer: fine) {
  .c-couponcard__zoom:hover { opacity: 0.82; }
}

.c-lightbox {
  width: min(92vw, 1160px); max-width: none;   /* 画像の原寸 1100px ＋ 余白 */
  padding: 0; border: 0; background: transparent; overflow: visible;
  color: var(--uc-on-dark);
}
.c-lightbox::backdrop { background: rgba(0, 0, 0, 0.76); }
.c-lightbox__inner { position: relative; display: flex; flex-direction: column; gap: var(--uc-space-3); }
.c-lightbox__viewport {
  overflow: auto; -webkit-overflow-scrolling: touch;
  max-height: 74vh; background: var(--uc-white); border-radius: var(--uc-radius-md);
}
/* クーポンは店頭で提示するため、どの画面幅でも全体が収まるように縮小して表示する
   （原寸は 2292px 幅あり、モバイルで原寸表示すると一部しか見えないため）。 */
.c-lightbox__img { display: block; max-width: 100%; height: auto; margin-inline: auto; }
.c-lightbox__caption { margin: 0; font-size: 14px; color: var(--uc-on-dark-soft); text-align: center; }
.c-lightbox__hint { display: none; }   /* 横スクロール不要になったため非表示 */
.c-lightbox__close {
  position: absolute; top: calc(-1 * var(--uc-space-8)); right: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  border: var(--uc-border-width) solid var(--uc-border-on-dark);
  border-radius: var(--uc-radius-circle);
  background: rgba(255, 255, 255, 0.12); color: var(--uc-white);
}
@media (hover: hover) and (pointer: fine) {
  .c-lightbox__close:hover { background: rgba(255, 255, 255, 0.24); }
}
/* 画面が低いとき（スマホ横持ちなど）はモーダルの外側に置くと上端で見切れるため、
   内側の右上に重ねる。画像の上に載るので背景を濃くして視認性を確保する。 */
@media (max-height: 480px) {
  .c-lightbox__close {
    top: var(--uc-space-2); right: var(--uc-space-2);
    background: rgba(0, 0, 0, 0.55); border-color: rgba(255, 255, 255, 0.4);
  }
}
/* --- クーポンモーダル：操作ボタン --- */
.c-lightbox__actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--uc-space-3);
}
/* スマホは画面をそのまま提示して使うため、印刷・閉じるボタンは出さない。
   閉じる操作は右上の × ／背景タップ／Esc で行う。 */
@media (max-width: 833px) {
  .c-lightbox__actions { display: none; }
}
/* End : c-lightbox */

/* ==========================================================================
   Component : c-couponprint（クーポンの印刷用エリア）
   Used      : start（入学式スーツ LP）のクーポンモーダル「印刷する」
   Description : 印刷時のみ表示。<dialog> の中身は印刷結果がブラウザ依存になるため、
                 script.js が body 直下にこの要素を作り、ここだけを印刷する。
   ========================================================================== */
.c-couponprint { display: none; }

@media print {
  /* 印刷用エリア以外は出力しない（<dialog> やヘッダー・フッターを含む） */
  body > *:not(.c-couponprint) { display: none !important; }
  .c-couponprint { display: block; margin: 0; }
  .c-couponprint__img { display: block; width: 100%; height: auto; }
  /* クーポンの左下に手書き用の大学名記入欄を出す */
  .c-couponprint__univ {
    display: flex; align-items: flex-end; gap: 2mm;
    margin: 6mm 0 0; font-size: 12pt;
  }
  .c-couponprint__univ-line {
    flex: 1 1 auto; border-bottom: 1px solid #000;
  }
  @page { margin: 10mm; }
}
/* End : c-couponprint */


/* ==========================================================================
   Page    : start（スーツクーポン LP）
   Section : support（学生生活をサポート）
   Description : アイコンの角丸背景（56px の四角）を外し、SVG 自体を背景と同じ
                 56px サイズで表示する。
   ========================================================================== */
.sec-feature--plainicon .c-feature__icon {
  width: auto; height: auto; background: none; border-radius: 0; color: var(--uc-blue-text);
}
.sec-feature--plainicon .c-feature__icon svg { width: 56px; height: 56px; }
/* End : start support plainicon */