/* =========================================================================
   design-system-a2pop.css — a2deep の個性レイアウトを「ゴシック＋明るい配色」で。
   方向：気分がプラスになる、明るく前向き。白基調＋鮮やかオレンジ＋やさしい空色。
   ※ front-page-a2deep.css（editorialレイアウト）と同じ変数名・値だけ差し替え。
   ========================================================================= */

:root {
  /* --- 明るい配色（白基調＋鮮やかオレンジ＋親しみのある紺＋空色アクセント） --- */
  --jk-ink:        #2B4A6E;  /* 見出し・濃色面（明るめの紺＝親しみ＋信頼） */
  --jk-navy:       #2B4A6E;  /* 互換 */
  --jk-orange:     #F08300;  /* メイン＝標準案のブランドオレンジ */
  --jk-orange-br:  #FF9A2E;  /* さらに明るいオレンジ（ハイライト） */
  --jk-orange-dark:#E2670A;
  --jk-sky:        #2FAEDA;  /* 空色アクセント（差し色・気分プラス） */
  --jk-text:       #3B4654;  /* 本文（明るめの濃グレー） */
  --jk-text-muted: #7C8794;
  --jk-line:       #06C755;
  --jk-line-dark:  #05b54c;

  /* --- 紙・面・罫（白＋サニーな淡色） --- */
  --jk-white:      #FFFFFF;
  --jk-bg:         #FFFFFF;  /* 明るい白 */
  --jk-cream:      #FFF4E2;  /* サニーな淡オレンジ */
  --jk-soft:       #EAF6FC;  /* やさしい空色（変化・清涼感） */
  --jk-rule:       #ECE7DD;
  --jk-border:     #EAE5DB;
  --jk-photo-bg:   #FFE7C6;
  --jk-photo-warm: linear-gradient(135deg, #FFE7C2, #FFD59B);

  /* --- タイポ（ゴシック：見出しもゴシック。ロゴだけ丸ゴシックで親しみ） --- */
  --jk-font-base: "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN",
                  "Yu Gothic", Meiryo, sans-serif;
  --jk-font-head: "Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN",
                  "Yu Gothic", Meiryo, sans-serif;
  --jk-font-round: "Zen Maru Gothic", "Noto Sans JP", system-ui, sans-serif;

  --jk-fw-normal: 400;
  --jk-fw-medium: 500;
  --jk-fw-bold:   700;
  --jk-fw-black:  800;

  --fs-xs: .8rem; --fs-sm: 1rem; --fs-md: 1.25rem; --fs-lg: 1.563rem;
  --fs-xl: 1.953rem; --fs-2xl: 2.441rem; --fs-3xl: 3.052rem; --fs-4xl: 3.815rem;

  --jk-wrap:        1080px;
  --jk-wrap-narrow: 720px;
  --jk-wrap-wide:   1280px;
  --jk-gutter:      20px;

  /* 角はやや丸めて親しみを（明るい印象） */
  --jk-radius:   12px;
  --jk-radius-lg: 18px;
  --jk-pill:     999px;

  /* 影はやわらかく、少しだけ存在感（明るく軽快に） */
  --jk-shadow-sm: 0 2px 6px rgba(43, 74, 110, .07);
  --jk-shadow:    0 16px 40px rgba(43, 74, 110, .12);

  --jk-section-y: 72px;

  /* --- 下層（カタログCSS=front-page.css系）互換エイリアス --- */
  /* 下層の横幅をTOP（--jk-wrap=1080）に合わせる。未定義だと max-width 無効＝全幅化していた。 */
  --jk-container:        1080px;
  --jk-container-narrow: 760px;
  --jk-bg-cream:   var(--jk-cream);
  --jk-bg-soft:    var(--jk-soft);
  --jk-orange-pale: #FFF3E3;
  --jk-orange-tint: #FFE3C2;
  --jk-radius-pill: 999px;
  --jk-shadow-cta:   0 12px 26px rgba(6, 199, 85, .26);
  --jk-shadow-hover: 0 20px 48px rgba(43, 74, 110, .16);

  --jk-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

@media (min-width: 768px) {
  :root { --jk-gutter: 32px; --jk-section-y: 104px; }
}

/* ベースリセット — 見出しはゴシック太字、本文は読みやすい行間 */
:where(.jk) * { box-sizing: border-box; }
:where(.jk) {
  font-family: var(--jk-font-base);
  color: var(--jk-text);
  line-height: 1.9;
  font-weight: var(--jk-fw-normal);
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
}
:where(.jk h1, .jk h2, .jk h3, .jk h4) {
  font-family: var(--jk-font-head);
  font-weight: var(--jk-fw-black);
  line-height: 1.45;
  margin: 0;
  color: var(--jk-ink);
}
:where(.jk p) { margin: 0; }
:where(.jk ul, .jk ol) { margin: 0; padding: 0; list-style: none; }
:where(.jk a) { color: inherit; text-decoration: none; }
:where(.jk img) { max-width: 100%; height: auto; display: block; }
:where(.jk button) { font-family: inherit; cursor: pointer; }
:where(.jk) a:focus-visible, :where(.jk) button:focus-visible, :where(.jk) summary:focus-visible {
  outline: 3px solid var(--jk-orange); outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  :where(.jk) *, :where(.jk) *::before, :where(.jk) *::after { transition: none !important; animation: none !important; }
}