/* ============================================================
   Style Agent Academy
   "学びを、編集する。"
   Design System: Paul Klee Burg und Sonne × 原稿用紙
   ============================================================ */

:root{
  /* ── Klee Palette ── */
  --klee-teal:    #3a5a6a;
  --klee-mauve:   #4a3a5a;
  --klee-gold:    #a07840;
  --klee-terra:   #9a5a3a;
  --klee-ivory:   #f5f0e6;
  --klee-cream:   #ede6d7;
  --klee-sumi:    #1a1a1a;

  /* ── kc-s 10文字カラー ── */
  --kc-s0: #b8a07a;  /* S */
  --kc-s1: #c17a5a;  /* t */
  --kc-s2: #5a7a8a;  /* y */
  --kc-s3: #d4a070;  /* l */
  --kc-s4: #8a4a50;  /* e */
  --kc-s5: #b8a07a;  /* A */
  --kc-s6: #6a5a7a;  /* g */
  --kc-s7: #c17a5a;  /* e */
  --kc-s8: #5a7a8a;  /* n */
  --kc-s9: #d4a070;  /* t */

  /* ── Functional ── */
  --text:         #1a1a1a;
  --text-sec:     #555;
  --bg:           #f5f0e6;
  --bg-alt:       #ede6d7;
  --line:         rgba(26,26,26,0.13);
  --gold-text:    #8a7040;
  --success:      #4a7a5a;
  --danger:       #8a4a50;

  /* ── Type ── */
  --ff-jp:        'Shippori Mincho','Noto Serif JP','Yu Mincho',serif;
  --ff-jp-sans:   'Noto Sans JP','Hiragino Sans',sans-serif;
  --ff-klee:      'Klee One','Shippori Mincho',serif;
  --ff-en:        'Cormorant Garamond','EB Garamond',serif;
  --ff-en-sans:   'DM Sans','Inter',sans-serif;
  --ff-num:       'Josefin Sans',sans-serif;

  /* ── Spacing ── */
  --max-w:        1140px;
  --px:           clamp(1.25rem, 5vw, 4rem);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (min-width:1280px){html{font-size:16px}}
body{
  font-family: var(--ff-jp);
  color: var(--text);
  background-color: var(--bg);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.10 0 0 0 0 0.09 0 0 0 0 0.08 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' fill='transparent' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  line-height: 1.8;
  font-feature-settings: "palt","kern","liga","calt";
  overflow-x: hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,textarea,select{font-family:inherit}

/* ── 原稿用紙テクスチャ（薄く） ── */
body::before{
  content:"";
  position: fixed; inset: 0;
  background-image:
    linear-gradient(to right, transparent 0, transparent calc(100% - 1px), rgba(0,0,0,0.025) calc(100% - 1px)),
    linear-gradient(to bottom, transparent 0, transparent calc(100% - 1px), rgba(0,0,0,0.025) calc(100% - 1px));
  background-size: 40px 40px;
  pointer-events:none;
  z-index: 1;
}
body > *{position:relative;z-index:2}

/* ============================================================
   ヘッダー
   ============================================================ */
.site-header{
  position: sticky; top: 0; z-index: 100;
  background: rgba(245,240,230,0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-inner{
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0.9rem var(--px);
  display:flex; align-items:center; justify-content:space-between;
}
.logo-mark{
  display:flex; align-items:center; gap:0.7rem;
}
.logo-mark svg{width:36px;height:36px}
.logo-text{
  display:flex; flex-direction:column; line-height:1.1;
}
.logo-text strong{
  font-family: var(--ff-en);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.logo-text span{
  font-family: var(--ff-klee);
  font-size: 0.7rem;
  color: var(--text-sec);
  margin-top: 2px;
}
.site-nav{display:flex;gap:1.8rem;align-items:center}
.site-nav a{
  font-family: var(--ff-jp-sans);
  font-size: 0.9rem;
  color: var(--text-sec);
  transition: color .2s;
}
.site-nav a:hover{color:var(--klee-teal)}
.site-nav .btn-login{
  padding: 0.5rem 1.3rem;
  border: 1px solid var(--klee-sumi);
  border-radius: 999px;
  font-size: 0.85rem;
  color: var(--klee-sumi);
  transition: all .2s;
}
.site-nav .btn-login:hover{
  background: var(--klee-sumi);
  color: var(--bg);
}
/* 従業員ログイン（強調版） */
.site-nav .btn-login-primary{
  background: var(--klee-sumi);
  color: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.45rem 1.4rem;
  line-height: 1.2;
  gap: 0;
}
.site-nav .btn-login-primary:hover{
  background: var(--klee-teal);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(58,90,106,0.25);
}
.btn-login-sub{
  font-family: var(--ff-en);
  font-style: italic;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  opacity: 0.85;
}
.btn-login-main{
  font-family: var(--ff-jp-sans);
  font-size: 0.88rem;
  letter-spacing: 0.03em;
}
.hamburger{display:none;width:30px;height:30px;border:none;background:transparent;cursor:pointer;padding:0;position:relative;z-index:10003}
.hamburger span{transition:transform .25s ease, opacity .25s ease}
.hamburger.active span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

@media (max-width: 768px){
  .site-nav{
    display:flex;
    position:fixed;
    inset:0;
    background:rgba(250,247,241,0.98);
    -webkit-backdrop-filter:saturate(140%) blur(8px);
    backdrop-filter:saturate(140%) blur(8px);
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:1.4rem;
    z-index:10002;
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:opacity .22s ease, transform .22s ease, visibility .22s;
    padding:6rem 2rem 4rem;
    box-sizing:border-box;
    overflow-y:auto;
  }
  .site-nav.open{opacity:1;visibility:visible;transform:translateY(0)}
  .site-nav a{font-size:1.15rem;padding:.6rem 1rem}
  .site-nav .btn-login{margin-top:.6rem;width:min(86vw, 320px);justify-content:center}
  .hamburger{display:flex;flex-direction:column;justify-content:center;gap:5px}
  .hamburger span{display:block;width:24px;height:1.5px;background:var(--klee-sumi);border-radius:1px}
  body.mobile-nav-open{overflow:hidden}
}

/* iOS Safari の 100vh アドレスバー問題対策 */
:root{--vh:1vh}
@supports (height:100dvh){
  .hero-v2{min-height:auto}
}
html, body{min-height:100%}
body{min-height:100dvh}

/* ============================================================
   ヒーロー（LP用）
   ============================================================ */
.hero{
  padding: clamp(3rem, 7vw, 6rem) var(--px) clamp(2.5rem, 6vw, 4.5rem);
  max-width: var(--max-w);
  margin: 0 auto;
  position: relative;
}

/* ============================================================
   Hero V2（再設計：B2B SaaS 基本構成）
   ============================================================ */
.hero-v2{
  position:relative;
  padding: clamp(2rem, 4vw, 3.5rem) var(--px) clamp(2.5rem, 5vw, 4.5rem);
  max-width: var(--max-w);
  margin: 0 auto;
  overflow: hidden;
}
.hero-bg-shape{
  position:absolute;
  right: -8%;
  top: 50%;
  transform: translateY(-50%);
  width: clamp(360px, 56vw, 720px);
  height: clamp(360px, 56vw, 720px);
  pointer-events:none;
  z-index: 0;
}
@media (max-width:900px){
  .hero-bg-shape{
    right: -30%;
    width: 130vw;
    height: 130vw;
    opacity: 0.7;
  }
}
.hero-content{
  position: relative;
  z-index: 1;
  max-width: 720px;
}
.hero-caption{
  display:inline-flex;
  align-items:center;
  gap:0.6rem;
  padding: 0.4rem 0.95rem 0.4rem 0.6rem;
  background: rgba(255,255,255,0.65);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--ff-en);
  font-style: italic;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--text-sec);
  margin-bottom: 1.8rem;
}
.hero-caption-mark{display:inline-flex;align-items:center}
.hero-h1{
  font-family: var(--ff-klee);
  font-size: clamp(2.4rem, 5.6vw, 4.4rem);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: 0.01em;
  color: var(--klee-sumi);
  margin-bottom: 1.4rem;
}
.hero-h1-accent{color: var(--klee-terra)}
.hero-sub-v2{
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  line-height: 1.95;
  color: var(--text-sec);
  margin-bottom: 2.4rem;
  max-width: 600px;
}
.hero-sub-v2 strong{
  color: var(--klee-sumi);
  font-weight: 600;
  background: linear-gradient(transparent 65%, rgba(184,160,122,0.32) 65%);
  padding: 0 0.1em;
}
.hero-cta-v2{
  display:flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-bottom: 2.8rem;
}
.btn-lg{
  padding: 1.05rem 2.2rem;
  font-size: 0.98rem;
  letter-spacing: 0.05em;
}
.hero-trust{
  display:flex;
  align-items:baseline;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.hero-trust-item{
  display:inline-flex;
  align-items: baseline;
  gap: 0.35rem;
}
.hero-trust-num{
  font-family: var(--ff-num);
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--klee-sumi);
  line-height: 1;
}
.hero-trust-label{
  font-family: var(--ff-jp-sans);
  font-size: 0.82rem;
  color: var(--text-sec);
  letter-spacing: 0.03em;
}
.hero-trust-sep{
  color: var(--line);
  font-size: 0.85rem;
  user-select: none;
}
@media (max-width:600px){
  .hero-trust{gap:0.55rem;font-size:0.85rem}
  .hero-trust-num{font-size:1.15rem}
  .hero-trust-sep{display:none}
  .hero-trust-item{width:100%}
}
.hero-eyebrow{
  font-family: var(--ff-en);
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: var(--klee-gold);
  margin-bottom: 1rem;
}
.hero-title{
  font-family: var(--ff-klee);
  font-size: clamp(2rem, 4.5vw, 3.6rem);
  font-weight: 400;
  line-height: 1.25;
  margin-bottom: 1.5rem;
  letter-spacing: 0.02em;
}
.hero-title .accent{color: var(--klee-terra)}
.hero-title .small{
  display:block;
  font-size: 0.55em;
  color: var(--text-sec);
  margin-top: 0.5rem;
  letter-spacing: 0.04em;
}
.hero-sub{
  font-size: clamp(1rem, 2vw, 1.15rem);
  max-width: 640px;
  margin-bottom: 2.5rem;
  color: var(--text-sec);
  line-height: 2;
}

/* ── SAA ブランドメッセージ ── */
.hero-saa{
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin: 2rem 0 2.2rem;
  padding: 1.1rem 1.4rem 1.1rem 1.6rem;
  background: rgba(184, 160, 122, 0.08);
  border-left: 3px solid var(--klee-gold);
  border-radius: 0 4px 4px 0;
  max-width: 640px;
}
.hero-saa-mark{
  font-family: var(--ff-en);
  font-style: italic;
  font-size: 2.4rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--klee-gold);
  line-height: 1;
  flex-shrink: 0;
}
.hero-saa-body{display:flex;flex-direction:column;gap:0.3rem}
.hero-saa-en{
  font-family: var(--ff-en);
  font-size: clamp(0.92rem, 1.6vw, 1.1rem);
  letter-spacing: 0.04em;
  color: var(--klee-sumi);
  display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;
}
.hero-saa-en span{font-style: italic}
.hero-saa-en em{
  font-style: normal;
  color: var(--klee-gold);
  font-weight: 500;
  font-size: 1.15em;
}
.hero-saa-en i{
  font-style: normal;
  color: var(--klee-gold);
  opacity: 0.6;
  margin: 0 0.1rem;
}
.hero-saa-jp{
  font-family: var(--ff-klee);
  font-size: 0.95rem;
  color: var(--text-sec);
  letter-spacing: 0.03em;
}
@media (max-width: 600px){
  .hero-saa{flex-direction: column; align-items: flex-start; gap: 0.6rem; padding: 1rem 1.2rem}
  .hero-saa-mark{font-size: 1.8rem}
}
.hero-cta{
  display:flex; gap:1rem; flex-wrap:wrap;
}
.btn{
  display:inline-flex; align-items:center; gap:0.6rem;
  padding: 1rem 2rem;
  font-family: var(--ff-jp-sans);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  border-radius: 999px;
  transition: all .25s;
  cursor: pointer;
}
.btn-primary{
  background: var(--klee-sumi);
  color: var(--bg);
}
.btn-primary:hover{
  background: var(--klee-teal);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(58,90,106,0.25);
}
.btn-ghost{
  background: transparent;
  color: var(--klee-sumi);
  border: 1px solid var(--klee-sumi);
}
.btn-ghost:hover{
  background: var(--klee-sumi);
  color: var(--bg);
}
.btn-gold{
  background: var(--klee-gold);
  color: #fff;
}
.btn-gold:hover{
  background: var(--klee-terra);
  transform: translateY(-2px);
}

/* ── ヒーロー装飾（Klee形状） ── */
.hero-decoration{
  position: absolute;
  right: -2rem; top: 4rem;
  width: 280px; height: 280px;
  opacity: 0.6;
  pointer-events: none;
}
@media (max-width:900px){
  .hero-decoration{position:relative;right:auto;top:auto;margin:2rem auto 0;width:200px;height:200px}
}

/* ============================================================
   セクション共通
   ============================================================ */
.section{
  padding: clamp(3rem, 6vw, 5.5rem) var(--px);
}
.section-inner{
  max-width: var(--max-w);
  margin: 0 auto;
}
.section-title{
  font-family: var(--ff-klee);
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  font-weight: 400;
  margin-bottom: 0.6rem;
  letter-spacing: 0.03em;
}
.section-eyebrow{
  font-family: var(--ff-en);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--klee-gold);
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
  display:block;
}
.section-lead{
  font-size: 1.05rem;
  color: var(--text-sec);
  max-width: 680px;
  margin-bottom: 3rem;
  line-height: 2;
}

/* ── alt背景セクション ── */
.section-alt{
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
}
.section-dark{
  background: var(--klee-sumi);
  color: var(--bg);
}
.section-dark .section-title{color:var(--bg)}
.section-dark .section-lead{color:rgba(245,240,230,0.7)}

/* ============================================================
   なぜいま系（3カラム特徴）
   ============================================================ */
.why-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
@media (max-width:900px){
  .why-grid{grid-template-columns: 1fr; gap:1.2rem}
}
.why-card{
  background: rgba(255,255,255,0.5);
  border: 1px solid var(--line);
  padding: 2.2rem 1.8rem;
  border-radius: 4px;
  transition: all .3s;
  position: relative;
}
.why-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.06);
}
.why-card-icon{
  width: 64px;
  height: 64px;
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.why-card-icon svg{
  width: 100%;
  height: 100%;
  display: block;
}
.why-card:hover .why-card-icon{
  transform: scale(1.05) rotate(-2deg);
  transition: transform .35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.why-card-num{
  font-family: var(--ff-en);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--klee-gold);
  margin-bottom: 0.4rem;
}
.why-card-title{
  font-family: var(--ff-klee);
  font-size: 1.3rem;
  margin-bottom: 0.8rem;
  line-height: 1.4;
}
.why-card-text{
  font-size: 0.93rem;
  color: var(--text-sec);
  line-height: 1.95;
}

/* ============================================================
   コース一覧（LP用）
   ============================================================ */
.course-tracks{
  display: grid; gap: 3rem;
}
.track{
  border-left: 3px solid var(--klee-gold);
  padding-left: 1.5rem;
}
.track-head{
  display:flex; align-items:baseline; gap:1rem;
  margin-bottom: 1.5rem;
}
.track-label{
  font-family: var(--ff-en);
  font-style: italic;
  color: var(--klee-gold);
  font-size: 1.1rem;
}
.track-name{
  font-family: var(--ff-klee);
  font-size: 1.5rem;
}
.track-meta{
  font-size: 0.85rem;
  color: var(--text-sec);
  margin-left: auto;
}
.course-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.8rem;
}
.course-mini{
  background: rgba(255,255,255,0.55);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1.1rem 1.2rem;
  display: flex; flex-direction: column; gap: 0.4rem;
  transition: all .25s;
}
.course-mini:hover{
  border-color: var(--klee-teal);
  background: rgba(255,255,255,0.85);
}
.course-mini-id{
  font-family: var(--ff-num);
  font-size: 0.75rem;
  color: var(--klee-gold);
  letter-spacing: 0.1em;
}
.course-mini-title{
  font-family: var(--ff-klee);
  font-size: 1.02rem;
  line-height: 1.45;
}
.course-mini-meta{
  font-size: 0.78rem;
  color: var(--text-sec);
  font-family: var(--ff-jp-sans);
}

/* TRACK colors */
.track.track-a{border-left-color: var(--klee-teal)}
.track.track-a .track-label{color: var(--klee-teal)}
.track.track-b{border-left-color: var(--klee-terra)}
.track.track-b .track-label{color: var(--klee-terra)}
.track.track-c{border-left-color: var(--klee-mauve)}
.track.track-c .track-label{color: var(--klee-mauve)}

/* ============================================================
   料金プラン
   ============================================================ */
.pricing-grid{
  display:grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
@media (max-width:900px){
  .pricing-grid{grid-template-columns: 1fr}
}
.plan-card{
  background: rgba(255,255,255,0.6);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2.5rem 2rem;
  display:flex; flex-direction:column; gap:1.2rem;
  position: relative;
}
.plan-card.featured{
  border-color: var(--klee-gold);
  border-width: 2px;
  background: rgba(255,255,255,0.85);
  box-shadow: 0 12px 40px rgba(160,120,64,0.12);
}
.plan-card.featured::before{
  content:"RECOMMENDED";
  position: absolute; top: -12px; left: 50%;
  transform: translateX(-50%);
  background: var(--klee-gold);
  color: #fff;
  font-family: var(--ff-en);
  font-style: italic;
  font-size: 0.75rem;
  padding: 0.3rem 1rem;
  border-radius: 999px;
  letter-spacing: 0.15em;
}
.plan-name{
  font-family: var(--ff-klee);
  font-size: 1.4rem;
}
.plan-price{
  font-family: var(--ff-num);
  font-size: 2.2rem;
  line-height: 1;
}
.plan-price small{
  font-size: 0.85rem;
  color: var(--text-sec);
  font-family: var(--ff-jp-sans);
  margin-left: 0.3rem;
}
.plan-tagline{
  font-family: var(--ff-klee);
  font-size: 0.95rem;
  color: var(--text-sec);
}
.plan-features{
  list-style: none;
  display:flex; flex-direction:column; gap:0.7rem;
  margin-top: 0.5rem;
}
.plan-features li{
  font-size: 0.9rem;
  padding-left: 1.4rem;
  position: relative;
  line-height: 1.6;
}
.plan-features li::before{
  content:"✓";
  position: absolute; left: 0;
  color: var(--klee-gold);
  font-weight: 600;
}

/* ============================================================
   フッター
   ============================================================ */
.site-footer{
  background: var(--klee-sumi);
  color: rgba(245,240,230,0.8);
  padding: 4rem var(--px) 2rem;
  margin-top: 4rem;
}
.footer-inner{
  max-width: var(--max-w);
  margin: 0 auto;
}
.footer-top{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(245,240,230,0.15);
}
@media (max-width:768px){
  .footer-top{grid-template-columns: 1fr; gap:2rem}
}
.footer-brand-text{
  font-family: var(--ff-klee);
  margin-top: 1rem;
  line-height: 2;
  font-size: 0.92rem;
  color: rgba(245,240,230,0.7);
}
.footer-col h4{
  font-family: var(--ff-en);
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  color: var(--klee-gold);
  margin-bottom: 1rem;
  font-weight: 500;
}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:0.6rem}
.footer-col a{font-size: 0.88rem;color: rgba(245,240,230,0.75);transition:color .2s}
.footer-col a:hover{color:var(--klee-gold)}
.footer-bottom{
  padding-top: 2rem;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;
  font-size: 0.78rem;
  color: rgba(245,240,230,0.5);
  font-family: var(--ff-jp-sans);
}

/* ============================================================
   フォーム共通
   ============================================================ */
.form-page{
  min-height: calc(100vh - 80px);
  display:flex; align-items:center; justify-content:center;
  padding: 2rem var(--px);
}
.form-card{
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3rem 2.5rem;
  width: 100%; max-width: 440px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.04);
}
.form-card h1{
  font-family: var(--ff-klee);
  font-size: 1.7rem;
  text-align: center;
  margin-bottom: 0.4rem;
}
.form-card .form-eyebrow{
  font-family: var(--ff-en);
  font-style: italic;
  color: var(--klee-gold);
  font-size: 0.85rem;
  text-align: center;
  margin-bottom: 1rem;
  letter-spacing: 0.1em;
}
.form-card .form-lead{
  text-align:center;
  font-size: 0.88rem;
  color: var(--text-sec);
  margin-bottom: 2rem;
}
.form-field{
  margin-bottom: 1.2rem;
}
.form-field label{
  display: block;
  font-family: var(--ff-jp-sans);
  font-size: 0.82rem;
  color: var(--text-sec);
  margin-bottom: 0.4rem;
  letter-spacing: 0.04em;
}
.form-field input,
.form-field select{
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  font-size: 0.95rem;
  transition: border-color .2s;
}
.form-field input:focus,
.form-field select:focus{
  outline: none;
  border-color: var(--klee-teal);
}
.form-actions{
  margin-top: 2rem;
}
.form-actions .btn{width:100%;justify-content:center}
.form-foot{
  margin-top: 1.5rem;
  text-align:center;
  font-size: 0.82rem;
  color: var(--text-sec);
}
.form-foot a{color: var(--klee-teal);text-decoration: underline}
.form-error{
  background: rgba(138,74,80,0.1);
  border-left: 3px solid var(--danger);
  padding: 0.7rem 1rem;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  color: var(--danger);
  display: none;
}
.form-error.show{display:block}

/* ============================================================
   Dashboard / Course / Study 共通
   ============================================================ */
.app-shell{
  display:grid;
  grid-template-columns: 240px 1fr;
  min-height: calc(100vh - 80px);
}
@media (max-width:900px){
  .app-shell{grid-template-columns: 1fr}
}
.side-nav{
  background: rgba(255,255,255,0.6);
  border-right: 1px solid var(--line);
  padding: 2rem 1.2rem;
  position: sticky;
  top: 80px;
  height: calc(100vh - 80px);
  overflow-y: auto;
}
@media (max-width:900px){
  .side-nav{position:relative;top:auto;height:auto;border-right:none;border-bottom:1px solid var(--line)}
}
.side-user{
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 1.5rem;
}
.side-user-name{font-family: var(--ff-klee);font-size: 1.05rem;line-height: 1.4}
.side-user-meta{font-size:0.78rem;color:var(--text-sec);margin-top:0.3rem}
.side-nav-list{list-style:none}
.side-nav-list li{margin-bottom: 0.3rem}
.side-nav-list a{
  display:block;
  padding: 0.6rem 0.8rem;
  border-radius: 4px;
  font-size: 0.92rem;
  color: var(--text);
  font-family: var(--ff-jp-sans);
  transition: all .2s;
}
.side-nav-list a:hover, .side-nav-list a.active{
  background: var(--klee-sumi);
  color: var(--bg);
}
.main-content{
  padding: 2.5rem var(--px);
}
.page-title{
  font-family: var(--ff-klee);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: 0.4rem;
}
.page-subtitle{
  font-size: 0.95rem;
  color: var(--text-sec);
  margin-bottom: 2.5rem;
}

/* ── ダッシュボード進捗カード ── */
.stats-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 3rem;
}
@media (max-width:768px){
  .stats-grid{grid-template-columns: repeat(2, 1fr)}
}
.stat-card{
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--line);
  padding: 1.4rem 1.2rem;
  border-radius: 4px;
}
.stat-label{
  font-size: 0.78rem;
  color: var(--text-sec);
  font-family: var(--ff-jp-sans);
  margin-bottom: 0.3rem;
}
.stat-value{
  font-family: var(--ff-num);
  font-size: 2rem;
  font-weight: 300;
  line-height: 1;
}
.stat-value small{
  font-size: 0.55em;
  color: var(--text-sec);
  margin-left: 0.2rem;
}
.stat-bar{
  height: 4px;
  background: var(--bg-alt);
  margin-top: 0.8rem;
  border-radius: 999px;
  overflow: hidden;
}
.stat-bar-fill{
  height:100%;
  background: var(--klee-gold);
  transition: width .6s ease;
}

/* ── コースリスト ── */
.course-list-section{
  margin-bottom: 3rem;
}
.course-list-head{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom: 1.2rem;
}
.course-list-head h2{
  font-family: var(--ff-klee);
  font-size: 1.4rem;
}
.course-list-head .meta{font-size:0.85rem;color:var(--text-sec)}
.course-cards{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.2rem;
}
.course-card{
  background: rgba(255,255,255,0.75);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1.5rem;
  display:flex;flex-direction:column;gap:0.8rem;
  transition: all .25s;
  cursor: pointer;
}
.course-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.06);
}
.course-card-id{
  font-family: var(--ff-num);
  font-size: 0.8rem;
  color: var(--klee-gold);
  letter-spacing: 0.1em;
}
.course-card-title{
  font-family: var(--ff-klee);
  font-size: 1.15rem;
  line-height: 1.5;
  min-height: 3em;
}
.course-card-meta{
  font-size: 0.82rem;
  color: var(--text-sec);
  font-family: var(--ff-jp-sans);
  display:flex;gap:1rem;
}
.course-card-status{
  margin-top: auto;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line);
  display:flex;justify-content:space-between;align-items:center;
}
.status-badge{
  font-size: 0.75rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  font-family: var(--ff-jp-sans);
}
.status-badge.not-started{background:var(--bg-alt);color:var(--text-sec)}
.status-badge.in-progress{background:rgba(160,120,64,0.15);color: var(--klee-gold)}
.status-badge.completed{background:rgba(74,122,90,0.15);color: var(--success)}

.course-card-progress{
  width: 60px;
  height: 3px;
  background: var(--bg-alt);
  border-radius: 999px;
  overflow: hidden;
}
.course-card-progress-fill{
  height:100%;
  background: var(--klee-gold);
}

/* ============================================================
   学習ページ Study
   ============================================================ */
.study-shell{
  display:grid;
  grid-template-columns: 260px minmax(0,1fr) 320px;
  min-height: calc(100vh - 80px);
}
@media (max-width: 1280px){
  .study-shell{ grid-template-columns: 240px minmax(0,1fr); }
  .tutor-panel{ grid-column: 1 / -1; }
}
@media (max-width: 900px){
  .study-shell{grid-template-columns: 1fr}
}
.study-sidebar{
  background: rgba(255,255,255,0.6);
  border-right: 1px solid var(--line);
  padding: 2rem 1.4rem;
  position: sticky; top: 80px;
  height: calc(100vh - 80px);
  overflow-y: auto;
}
@media (max-width: 900px){
  .study-sidebar{
    position: relative;
    top: auto;
    height: auto;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
}
.study-course-name{
  font-family: var(--ff-klee);
  font-size: 1.05rem;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}
.study-course-id{
  font-family: var(--ff-num);
  font-size: 0.78rem;
  color: var(--klee-gold);
  margin-bottom: 1.5rem;
  letter-spacing: 0.1em;
}
.study-toc{
  list-style:none;
  counter-reset: section;
}
.study-toc li{
  margin-bottom: 0.4rem;
  counter-increment: section;
}
.study-toc a{
  display:flex;align-items:baseline;gap:0.6rem;
  padding: 0.55rem 0.7rem;
  border-radius: 4px;
  font-size: 0.88rem;
  color: var(--text);
  font-family: var(--ff-jp-sans);
  transition: all .2s;
  line-height: 1.4;
}
.study-toc a::before{
  content: counter(section, decimal-leading-zero);
  font-family: var(--ff-num);
  font-size: 0.72rem;
  color: var(--klee-gold);
  flex-shrink: 0;
}
.study-toc a:hover, .study-toc a.active{
  background: var(--klee-sumi);
  color: var(--bg);
}
.study-toc a.completed::after{
  content:"✓";
  color: var(--success);
  margin-left: auto;
}
.study-toc a.active.completed::after{color: var(--klee-gold)}

.study-main{
  padding: 3rem clamp(1.25rem, 5vw, 4rem);
  max-width: 820px;
  margin: 0 auto;
  width: 100%;
}
.lesson-eyebrow{
  font-family: var(--ff-en);
  font-style: italic;
  color: var(--klee-gold);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  margin-bottom: 0.4rem;
}
.lesson-title{
  font-family: var(--ff-klee);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.4;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}
.lesson-body{
  font-size: 1.02rem;
  line-height: 2.1;
  letter-spacing: 0.02em;
}
.lesson-body p{margin-bottom: 1.4rem}
.lesson-body h3{
  font-family: var(--ff-klee);
  font-size: 1.35rem;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  padding-left: 1rem;
  border-left: 3px solid var(--klee-teal);
}
.lesson-body h4{
  font-family: var(--ff-klee);
  font-size: 1.12rem;
  margin-top: 1.8rem;
  margin-bottom: 0.8rem;
  color: var(--klee-teal);
}
.lesson-body ul,.lesson-body ol{
  margin: 1.2rem 0 1.4rem 1.5rem;
}
.lesson-body li{margin-bottom: 0.5rem}
.lesson-body strong{color: var(--klee-terra);font-weight:600}
.lesson-body blockquote{
  margin: 1.6rem 0;
  padding: 1.2rem 1.5rem;
  background: rgba(160,120,64,0.06);
  border-left: 3px solid var(--klee-gold);
  font-size: 0.95rem;
  font-family: var(--ff-klee);
  line-height: 1.95;
}
.lesson-body .callout{
  background: rgba(58,90,106,0.06);
  border: 1px solid rgba(58,90,106,0.15);
  border-radius: 4px;
  padding: 1.2rem 1.5rem;
  margin: 1.5rem 0;
}
.lesson-body .callout-title{
  font-family: var(--ff-klee);
  color: var(--klee-teal);
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
  letter-spacing: 0.05em;
}
.lesson-body .case-box{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1.4rem 1.6rem;
  margin: 1.5rem 0;
}
.lesson-body .case-box-label{
  font-family: var(--ff-en);
  font-style: italic;
  color: var(--klee-terra);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.4rem;
}

.lesson-nav{
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
}
.lesson-nav .btn{padding: 0.8rem 1.5rem;font-size: 0.88rem}

/* ============================================================
   テスト Test
   ============================================================ */
.test-shell{
  max-width: 780px;
  margin: 0 auto;
  padding: 3rem var(--px);
}
.test-head{
  text-align: center;
  margin-bottom: 3rem;
}
.test-eyebrow{
  font-family: var(--ff-en);
  font-style: italic;
  color: var(--klee-gold);
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}
.test-title{
  font-family: var(--ff-klee);
  font-size: clamp(1.5rem, 2.8vw, 2rem);
  margin-bottom: 1rem;
}
.test-meta{
  display:flex;justify-content:center;gap:2rem;flex-wrap:wrap;
  font-size: 0.9rem;
  color: var(--text-sec);
}
.test-meta span strong{
  font-family: var(--ff-num);
  color: var(--text);
  font-size: 1.1em;
}
.test-progress{
  margin-top: 1.5rem;
  height: 6px;
  background: var(--bg-alt);
  border-radius: 999px;
  overflow: hidden;
  max-width: 480px;
  margin-left: auto; margin-right: auto;
}
.test-progress-fill{
  height: 100%;
  background: var(--klee-gold);
  transition: width .4s;
}

.question-card{
  background: rgba(255,255,255,0.85);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2.5rem;
  margin-bottom: 2rem;
}
@media (max-width:600px){
  .question-card{padding:1.8rem 1.4rem}
}
.q-num{
  font-family: var(--ff-en);
  font-style: italic;
  color: var(--klee-gold);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  margin-bottom: 0.6rem;
}
.q-text{
  font-family: var(--ff-klee);
  font-size: 1.18rem;
  line-height: 1.85;
  margin-bottom: 1.8rem;
}
.q-options{list-style:none;display:flex;flex-direction:column;gap:0.8rem}
.q-option{
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1rem 1.2rem;
  cursor: pointer;
  transition: all .2s;
  display:flex;align-items:flex-start;gap:0.8rem;
  background: #fff;
}
.q-option:hover{
  border-color: var(--klee-teal);
  background: rgba(58,90,106,0.04);
}
.q-option.selected{
  border-color: var(--klee-gold);
  background: rgba(160,120,64,0.08);
}
.q-option input{
  margin-top: 0.4em;
  accent-color: var(--klee-gold);
}
.q-option-text{
  flex: 1;
  font-size: 0.95rem;
  line-height: 1.7;
}

.test-actions{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top: 2rem;
}

/* 解答結果での色 */
.q-option.correct{
  border-color: var(--success);
  background: rgba(74,122,90,0.1);
}
.q-option.incorrect{
  border-color: var(--danger);
  background: rgba(138,74,80,0.08);
}
.q-explanation{
  margin-top: 1.2rem;
  padding: 1rem 1.2rem;
  background: rgba(160,120,64,0.06);
  border-left: 3px solid var(--klee-gold);
  font-size: 0.92rem;
  line-height: 1.85;
}
.q-explanation-label{
  font-family: var(--ff-klee);
  color: var(--klee-gold);
  font-size: 0.85rem;
  margin-bottom: 0.3rem;
  letter-spacing: 0.05em;
}

/* ============================================================
   Result / Certificate
   ============================================================ */
.result-shell{
  max-width: 720px;
  margin: 0 auto;
  padding: 4rem var(--px);
  text-align: center;
}
.result-eyebrow{
  font-family: var(--ff-en);
  font-style: italic;
  color: var(--klee-gold);
  letter-spacing: 0.1em;
  margin-bottom: 0.6rem;
}
.result-title{
  font-family: var(--ff-klee);
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  margin-bottom: 1rem;
}
.result-score{
  font-family: var(--ff-num);
  font-size: clamp(3.5rem, 9vw, 5rem);
  font-weight: 300;
  line-height: 1;
  color: var(--klee-gold);
  margin: 2rem 0 1rem;
}
.result-score small{
  font-size: 0.35em;
  color: var(--text-sec);
  font-family: var(--ff-jp-sans);
  margin-left: 0.3rem;
}
.result-grade{
  font-family: var(--ff-klee);
  font-size: 1.4rem;
  margin-bottom: 2.5rem;
}
.result-message{
  font-size: 1rem;
  color: var(--text-sec);
  line-height: 2;
  margin-bottom: 3rem;
}
.result-actions{
  display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;
}

/* ── 修了証 ── */
.cert-frame{
  max-width: 820px;
  margin: 3rem auto;
  background: linear-gradient(135deg, #fff 0%, #faf5ec 100%);
  border: 2px solid var(--klee-gold);
  padding: 3.5rem 4rem;
  position: relative;
  box-shadow: 0 24px 60px rgba(0,0,0,0.08);
}
.cert-frame::before, .cert-frame::after{
  content:"";
  position: absolute;
  border: 1px solid var(--klee-gold);
}
.cert-frame::before{
  inset: 12px;
}
@media (max-width: 700px){
  .cert-frame{padding: 2.5rem 1.8rem;margin: 2rem var(--px)}
}
.cert-eyebrow{
  font-family: var(--ff-en);
  font-style: italic;
  letter-spacing: 0.2em;
  color: var(--klee-gold);
  text-align: center;
  margin-bottom: 0.8rem;
}
.cert-title{
  font-family: var(--ff-klee);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  text-align: center;
  margin-bottom: 0.5rem;
}
.cert-subtitle{
  font-family: var(--ff-klee);
  text-align:center;
  color: var(--text-sec);
  margin-bottom: 2.5rem;
}
.cert-recipient{
  text-align: center;
  margin: 2.5rem 0;
}
.cert-recipient-label{
  font-size: 0.85rem;
  color: var(--text-sec);
  letter-spacing: 0.1em;
}
.cert-recipient-name{
  font-family: var(--ff-klee);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--klee-gold);
  display: inline-block;
  min-width: 280px;
  margin-top: 0.5rem;
}
.cert-content{
  text-align: center;
  font-family: var(--ff-klee);
  font-size: 1rem;
  line-height: 2.2;
  margin: 2rem 0;
}
.cert-content em{
  font-style: normal;
  color: var(--klee-terra);
}
.cert-footer{
  margin-top: 3rem;
  display:flex;justify-content:space-between;align-items:flex-end;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.cert-date{
  text-align: left;
}
.cert-date-label{font-size: 0.78rem; color:var(--text-sec)}
.cert-date-value{
  font-family: var(--ff-num);
  font-size: 1.1rem;
  margin-top: 0.2rem;
}
.cert-issuer{
  text-align: right;
}
.cert-issuer-label{font-size: 0.78rem; color:var(--text-sec)}
.cert-issuer-name{
  font-family: var(--ff-klee);
  font-size: 1.05rem;
  margin-top: 0.2rem;
}

.cert-actions{
  display:flex;gap:1rem;justify-content:center;
  margin: 2rem 0 4rem;
}
@media print{
  .site-header,.site-footer,.cert-actions{display:none !important}
  body{background: white}
  body::before{display:none}
  .cert-frame{margin: 0;box-shadow: none;border-width: 1px}
}

/* ============================================================
   Admin（管理画面）
   ============================================================ */
.admin-shell{
  display:grid;
  grid-template-columns: 260px 1fr;
  min-height: calc(100vh - 80px);
}
@media (max-width: 900px){
  .admin-shell{grid-template-columns: 1fr}
}
.admin-side{
  background: var(--klee-sumi);
  color: rgba(245,240,230,0.9);
  padding: 2rem 1.4rem;
  position: sticky; top: 80px;
  height: calc(100vh - 80px);
  overflow-y: auto;
}
@media (max-width:900px){
  .admin-side{position:relative;top:auto;height:auto}
}
.admin-side-brand{
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(245,240,230,0.15);
  margin-bottom: 1.5rem;
}
.admin-side-brand-eyebrow{
  font-family: var(--ff-en);
  font-style: italic;
  font-size: 0.75rem;
  color: var(--klee-gold);
  letter-spacing: 0.15em;
  margin-bottom: 0.3rem;
}
.admin-side-brand-name{
  font-family: var(--ff-klee);
  font-size: 1.1rem;
  line-height: 1.4;
}
.admin-side-brand-plan{
  display: inline-block;
  margin-top: 0.6rem;
  padding: 0.2rem 0.7rem;
  background: var(--klee-gold);
  color: #fff;
  font-family: var(--ff-en);
  font-style: italic;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  border-radius: 999px;
}
.admin-side-nav{list-style:none}
.admin-side-nav li{margin-bottom: 0.3rem}
.admin-side-nav a{
  display:flex;align-items:center;gap:0.6rem;
  padding: 0.7rem 0.9rem;
  border-radius: 4px;
  font-size: 0.92rem;
  color: rgba(245,240,230,0.85);
  font-family: var(--ff-jp-sans);
  transition: all .2s;
}
.admin-side-nav a:hover, .admin-side-nav a.active{
  background: rgba(160,120,64,0.25);
  color: #fff;
}
.admin-side-nav-section{
  font-family: var(--ff-en);
  font-style: italic;
  font-size: 0.7rem;
  color: var(--klee-gold);
  letter-spacing: 0.15em;
  margin: 1.5rem 0 0.6rem 0.9rem;
}

.admin-main{
  padding: 2.5rem var(--px);
  background: var(--bg);
}
.admin-page-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  margin-bottom: 2.5rem;
  flex-wrap:wrap;
  gap: 1rem;
}
.admin-page-title{
  font-family: var(--ff-klee);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin-bottom: 0.3rem;
}
.admin-page-subtitle{
  font-size: 0.92rem;
  color: var(--text-sec);
}

/* KPIカード */
.kpi-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 2.5rem;
}
@media (max-width:768px){
  .kpi-grid{grid-template-columns: repeat(2, 1fr)}
}
.kpi-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1.5rem 1.3rem;
  display:flex;flex-direction:column;gap:0.4rem;
}
.kpi-card-label{
  font-size: 0.78rem;
  color: var(--text-sec);
  font-family: var(--ff-jp-sans);
}
.kpi-card-value{
  font-family: var(--ff-num);
  font-size: 2.3rem;
  font-weight: 300;
  line-height: 1;
  color: var(--klee-sumi);
}
.kpi-card-value small{
  font-size: 0.4em;
  margin-left: 0.25em;
  color: var(--text-sec);
}
.kpi-card-trend{
  font-size: 0.78rem;
  color: var(--success);
  font-family: var(--ff-jp-sans);
}
.kpi-card-trend.down{color: var(--danger)}
.kpi-card.alert .kpi-card-value{color: var(--danger)}
.kpi-card.success .kpi-card-value{color: var(--success)}
.kpi-card.gold .kpi-card-value{color: var(--klee-gold)}

/* セクション見出し */
.admin-section{
  margin-bottom: 3rem;
}
.admin-section-head{
  display:flex;justify-content:space-between;align-items:baseline;
  margin-bottom: 1.2rem;
}
.admin-section-title{
  font-family: var(--ff-klee);
  font-size: 1.3rem;
}
.admin-section-meta{
  font-size: 0.82rem;
  color: var(--text-sec);
}

/* ヒートマップ */
.heatmap-wrap{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1.5rem;
  overflow-x: auto;
}
.heatmap{
  display: grid;
  gap: 4px;
  min-width: 600px;
}
.heatmap-head{
  display:grid;
  grid-template-columns: 160px repeat(var(--cols, 21), minmax(28px, 1fr));
  gap: 4px;
  margin-bottom: 6px;
  align-items: end;
}
.heatmap-row{
  display:grid;
  grid-template-columns: 160px repeat(var(--cols, 21), minmax(28px, 1fr));
  gap: 4px;
  align-items: center;
}
.heatmap-th{
  font-size: 0.7rem;
  text-align: center;
  font-family: var(--ff-num);
  color: var(--text-sec);
  writing-mode: vertical-rl;
  white-space: nowrap;
  height: 80px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.heatmap-rl{
  font-size: 0.85rem;
  font-family: var(--ff-jp-sans);
  padding-right: 0.5rem;
}
.heatmap-cell{
  height: 28px;
  border-radius: 3px;
  background: var(--bg-alt);
  position: relative;
  cursor: help;
}
.heatmap-cell.l0{background: #f0eadc}
.heatmap-cell.l1{background: #d9c89c}
.heatmap-cell.l2{background: #b89a5c}
.heatmap-cell.l3{background: #8a6e30}
.heatmap-cell.l4{background: #5a4818}
.heatmap-cell.fail{background: #c08585}

.heatmap-legend{
  display:flex;align-items:center;gap:1rem;
  margin-top: 1rem;
  font-size: 0.78rem;
  color: var(--text-sec);
}
.heatmap-legend-scale{
  display:flex;align-items:center;gap:2px;
}
.heatmap-legend-scale span{
  width: 18px; height: 12px; border-radius: 2px;
}

/* 2列レイアウト */
.admin-2col{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
@media (max-width: 1100px){
  .admin-2col{grid-template-columns: 1fr}
}

/* ランキングカード */
.rank-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1.5rem;
}
.rank-list{
  list-style: none;
  counter-reset: rank;
}
.rank-list li{
  counter-increment: rank;
  display:flex;align-items:center;gap:0.8rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}
.rank-list li:last-child{border-bottom: none}
.rank-list li::before{
  content: counter(rank);
  font-family: var(--ff-num);
  font-size: 1rem;
  color: var(--klee-gold);
  width: 1.5em;
  text-align: center;
  font-weight: 500;
}
.rank-list li:nth-child(1)::before{color:#d4a070;font-size:1.2rem}
.rank-list li:nth-child(2)::before{color:#a8a8a8;font-size:1.1rem}
.rank-list li:nth-child(3)::before{color:#b87333}
.rank-name{
  font-family: var(--ff-jp-sans);
  font-size: 0.95rem;
  flex: 1;
}
.rank-name small{
  display:block;
  color:var(--text-sec);
  font-size: 0.78rem;
  margin-top: 2px;
}
.rank-value{
  font-family: var(--ff-num);
  font-size: 1.05rem;
  color: var(--klee-gold);
}
.rank-value.alert{color: var(--danger)}

/* 直近修了リスト */
.recent-list{
  list-style:none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.recent-list li{
  display:flex;justify-content:space-between;align-items:center;
  padding: 0.9rem 1.2rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}
.recent-list li:last-child{border-bottom:none}
.recent-name{font-family: var(--ff-jp-sans)}
.recent-name small{color:var(--text-sec);margin-left:0.5rem;font-size:0.78rem}
.recent-course{
  font-family: var(--ff-klee);
  color: var(--text-sec);
  font-size: 0.88rem;
}
.recent-date{
  font-family: var(--ff-num);
  font-size: 0.82rem;
  color: var(--text-sec);
}
.recent-score{
  font-family: var(--ff-num);
  color: var(--klee-gold);
  font-weight: 500;
}

/* 社員一覧テーブル */
.employee-toolbar{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px 6px 0 0;
  padding: 1rem 1.2rem;
  display:flex;gap:1rem;flex-wrap:wrap;
  align-items: center;
  justify-content: space-between;
}
.search-box{
  display:flex;align-items:center;gap:0.5rem;
  flex: 1;
  min-width: 200px;
}
.search-box input{
  flex: 1;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 0.9rem;
  background: #fff;
}
.toolbar-actions{
  display:flex;gap:0.6rem;flex-wrap:wrap;
}
.btn-sm{
  padding: 0.55rem 1.1rem;
  font-size: 0.82rem;
}

.employee-table-wrap{
  background: #fff;
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 6px 6px;
  overflow-x: auto;
}
.employee-table{
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.employee-table th{
  text-align: left;
  padding: 0.85rem 1rem;
  background: var(--bg-alt);
  font-family: var(--ff-jp-sans);
  font-weight: 500;
  font-size: 0.82rem;
  color: var(--text-sec);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.employee-table td{
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.employee-table tbody tr:hover{
  background: var(--bg-alt);
}
.emp-id{
  font-family: var(--ff-num);
  font-size: 0.85rem;
  color: var(--text-sec);
}
.emp-name{
  font-family: var(--ff-klee);
  font-size: 1rem;
}
.emp-role-badge{
  display:inline-block;
  padding: 0.15rem 0.55rem;
  font-size: 0.7rem;
  border-radius: 999px;
  font-family: var(--ff-jp-sans);
  background: var(--bg-alt);
}
.emp-role-badge.admin{background: rgba(160,120,64,0.2);color: var(--klee-gold)}
.emp-role-badge.company_admin{background: rgba(58,90,106,0.15);color: var(--klee-teal)}
.emp-progress-bar{
  display:flex;align-items:center;gap:0.6rem;
  font-family: var(--ff-num);
  font-size: 0.85rem;
}
.emp-progress-track{
  width: 80px;
  height: 4px;
  background: var(--bg-alt);
  border-radius: 999px;
  overflow: hidden;
}
.emp-progress-fill{
  height:100%;
  background: var(--klee-gold);
}
.emp-progress-fill.low{background: var(--danger)}
.emp-action-btn{
  font-size: 0.78rem;
  color: var(--klee-teal);
  text-decoration: underline;
  font-family: var(--ff-jp-sans);
}

/* ============================================================
   BtoB SaaS Admin（運営者ページ）
   ============================================================ */
.saas-shell{display:grid;grid-template-columns:260px 1fr;min-height:calc(100vh - 80px)}
@media (max-width:900px){.saas-shell{grid-template-columns:1fr}}
.saas-side{
  background:linear-gradient(180deg,#1a1a1a 0%,#2a2520 100%);
  color:rgba(245,240,230,0.9);padding:2rem 1.4rem;
  position:sticky;top:80px;height:calc(100vh - 80px);overflow-y:auto;
}
@media (max-width:900px){.saas-side{position:relative;top:auto;height:auto}}
.saas-side-brand{padding-bottom:1.5rem;border-bottom:1px solid rgba(245,240,230,0.15);margin-bottom:1.5rem}
.saas-side-brand-eyebrow{font-family:var(--ff-en);font-style:italic;font-size:0.72rem;color:var(--klee-gold);letter-spacing:0.18em;margin-bottom:0.3rem}
.saas-side-brand-name{font-family:var(--ff-klee);font-size:1.05rem;line-height:1.4}
.saas-side-brand-tag{display:inline-block;margin-top:0.6rem;padding:0.2rem 0.7rem;background:linear-gradient(90deg,var(--klee-gold),var(--klee-terra));color:#fff;font-family:var(--ff-en);font-style:italic;font-size:0.72rem;letter-spacing:0.12em;border-radius:999px}
.saas-side-nav-section{font-family:var(--ff-en);font-style:italic;font-size:0.7rem;color:var(--klee-gold);letter-spacing:0.15em;margin:1.5rem 0 0.6rem 0.9rem}
.saas-side-nav{list-style:none}
.saas-side-nav li{margin-bottom:0.3rem}
.saas-side-nav a{display:flex;align-items:center;gap:0.6rem;padding:0.7rem 0.9rem;border-radius:4px;font-size:0.92rem;color:rgba(245,240,230,0.85);font-family:var(--ff-jp-sans);transition:all .2s}
.saas-side-nav a:hover,.saas-side-nav a.active{background:rgba(160,120,64,0.25);color:#fff}
.saas-main{padding:2.5rem var(--px);background:var(--bg)}
.saas-kpi-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0.9rem;margin-bottom:2.5rem}
@media (max-width:1100px){.saas-kpi-grid{grid-template-columns:repeat(2,1fr)}}
.saas-kpi-card{background:#fff;border:1px solid var(--line);border-radius:6px;padding:1.3rem 1.1rem;display:flex;flex-direction:column;gap:0.3rem}
.saas-kpi-label{font-size:0.75rem;color:var(--text-sec);font-family:var(--ff-jp-sans)}
.saas-kpi-value{font-family:var(--ff-num);font-size:2rem;font-weight:300;line-height:1}
.saas-kpi-value small{font-size:0.5em;margin-left:0.2em;color:var(--text-sec)}
.saas-kpi-trend{font-size:0.75rem;color:var(--success);font-family:var(--ff-jp-sans)}
.saas-kpi-trend.down{color:var(--danger)}
.saas-kpi-card.mrr .saas-kpi-value{color:var(--klee-gold)}
.saas-kpi-card.alert .saas-kpi-value{color:var(--danger)}
.saas-table-wrap{background:#fff;border:1px solid var(--line);border-radius:6px;overflow-x:auto}
.saas-table{width:100%;border-collapse:collapse;font-size:0.92rem}
.saas-table th{text-align:left;padding:0.85rem 1rem;background:var(--bg-alt);font-family:var(--ff-jp-sans);font-weight:500;font-size:0.82rem;color:var(--text-sec);border-bottom:1px solid var(--line);white-space:nowrap}
.saas-table td{padding:0.85rem 1rem;border-bottom:1px solid var(--line);vertical-align:middle}
.saas-table tbody tr:hover{background:var(--bg-alt)}
.saas-company-name{font-family:var(--ff-klee);font-size:1rem}
.saas-company-name small{display:block;font-size:0.75rem;color:var(--text-sec);margin-top:2px}
.saas-plan-badge{display:inline-block;padding:0.2rem 0.7rem;font-size:0.72rem;border-radius:999px;font-family:var(--ff-jp-sans)}
.saas-plan-badge.Starter{background:rgba(58,90,106,0.15);color:var(--klee-teal)}
.saas-plan-badge.Business{background:rgba(160,120,64,0.2);color:var(--klee-gold)}
.saas-plan-badge.Enterprise{background:rgba(74,58,90,0.2);color:var(--klee-mauve)}
.saas-status-badge{display:inline-block;padding:0.15rem 0.55rem;font-size:0.7rem;border-radius:999px;font-family:var(--ff-jp-sans)}
.saas-status-badge.active{background:rgba(74,122,90,0.15);color:var(--success)}
.saas-status-badge.renewal-soon{background:rgba(212,160,112,0.2);color:var(--klee-gold)}
.saas-status-badge.churn{background:rgba(138,74,80,0.15);color:var(--danger)}
.saas-mrr{font-family:var(--ff-num);font-size:0.95rem}
.saas-completion-cell{display:flex;align-items:center;gap:0.5rem;font-family:var(--ff-num);font-size:0.85rem}
.saas-completion-track{width:60px;height:4px;background:var(--bg-alt);border-radius:999px;overflow:hidden}
.saas-completion-fill{height:100%;background:var(--klee-gold)}
.saas-completion-fill.low{background:var(--danger)}
.saas-2col{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin:2.5rem 0}
@media (max-width:1100px){.saas-2col{grid-template-columns:1fr}}
.plan-stat-card{background:#fff;border:1px solid var(--line);border-radius:6px;padding:1.5rem}
.plan-stat-row{display:flex;align-items:center;gap:1rem;padding:0.8rem 0;border-bottom:1px solid var(--line)}
.plan-stat-row:last-child{border-bottom:none}
.plan-stat-name{font-family:var(--ff-klee);font-size:1.05rem;flex:1}
.plan-stat-count{font-family:var(--ff-num);font-size:1.2rem;color:var(--klee-gold)}
.plan-stat-mrr{font-family:var(--ff-num);font-size:0.95rem;color:var(--text-sec);min-width:110px;text-align:right}
.activity-list{list-style:none;background:#fff;border:1px solid var(--line);border-radius:6px}
.activity-list li{display:flex;gap:1rem;align-items:flex-start;padding:0.9rem 1.2rem;border-bottom:1px solid var(--line)}
.activity-list li:last-child{border-bottom:none}
.activity-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:0.85rem}
.activity-icon.new{background:rgba(74,122,90,0.15);color:var(--success)}
.activity-icon.upgrade{background:rgba(160,120,64,0.2);color:var(--klee-gold)}
.activity-icon.milestone{background:rgba(58,90,106,0.15);color:var(--klee-teal)}
.activity-icon.renewal{background:rgba(74,58,90,0.2);color:var(--klee-mauve)}
.activity-icon.support{background:rgba(138,74,80,0.15);color:var(--danger)}
.activity-body{flex:1;font-size:0.9rem}
.activity-company{font-family:var(--ff-klee);font-size:1rem}
.activity-detail{color:var(--text-sec);font-size:0.85rem;margin-top:2px}
.activity-date{font-family:var(--ff-num);font-size:0.78rem;color:var(--text-sec)}

/* ============================================================
   Pricing：人数階段＋料金シミュレーター
   ============================================================ */
.pricing-tiers{display:grid;grid-template-columns:repeat(5,1fr);gap:0.8rem;margin:2rem 0 3rem}
@media (max-width:900px){.pricing-tiers{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.pricing-tiers{grid-template-columns:1fr}}
.tier{background:rgba(255,255,255,0.55);border:1px solid var(--line);border-radius:6px;padding:1.3rem 1rem;text-align:center;position:relative;transition:all .25s}
.tier:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(0,0,0,0.06)}
.tier.featured{border-color:var(--klee-gold);border-width:2px;background:rgba(255,255,255,0.85);box-shadow:0 10px 32px rgba(160,120,64,0.15)}
.tier-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--klee-gold);color:#fff;font-family:var(--ff-en);font-style:italic;font-size:0.7rem;padding:0.25rem 0.8rem;border-radius:999px;letter-spacing:0.1em;white-space:nowrap}
.tier-range{font-family:var(--ff-jp-sans);font-size:0.85rem;color:var(--text-sec);margin-bottom:0.6rem}
.tier-price{font-family:var(--ff-num);font-size:1.9rem;font-weight:300;line-height:1;color:var(--klee-sumi);margin-bottom:0.4rem}
.tier.featured .tier-price{color:var(--klee-gold)}
.tier-price small{font-size:0.45em;margin-left:0.2em;color:var(--text-sec)}
.tier-discount{font-family:var(--ff-en);font-style:italic;font-size:0.78rem;color:var(--klee-terra)}
.price-simulator{background:linear-gradient(135deg,rgba(184,160,122,0.08) 0%,rgba(212,144,122,0.08) 100%);border:1px solid var(--klee-gold);border-radius:8px;padding:2rem 2.2rem;margin:2rem 0 3rem}
.price-sim-head{text-align:center;margin-bottom:1.8rem}
.price-sim-title{font-family:var(--ff-klee);font-size:1.4rem;margin-bottom:0.3rem}
.price-sim-sub{font-size:0.88rem;color:var(--text-sec)}
.price-sim-input-row{display:flex;align-items:center;gap:1rem;margin-bottom:1.8rem;flex-wrap:wrap}
.price-sim-label{font-family:var(--ff-jp-sans);font-size:0.92rem;color:var(--text-sec)}
#userCountRange{flex:1;min-width:200px;height:6px;-webkit-appearance:none;background:var(--bg-alt);border-radius:999px;outline:none}
#userCountRange::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;background:var(--klee-gold);border-radius:50%;cursor:pointer;box-shadow:0 2px 6px rgba(160,120,64,0.4)}
#userCountRange::-moz-range-thumb{width:22px;height:22px;background:var(--klee-gold);border-radius:50%;cursor:pointer;border:none}
.price-sim-input{width:110px;padding:0.55rem 0.8rem;border:1px solid var(--line);border-radius:4px;font-family:var(--ff-num);font-size:1.05rem;text-align:center;background:#fff}
.price-sim-unit{font-family:var(--ff-jp-sans);font-size:0.9rem;color:var(--text-sec)}
.price-sim-results{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width:600px){.price-sim-results{grid-template-columns:1fr}}
.price-sim-result{background:#fff;border:1px solid var(--line);border-radius:6px;padding:1.2rem 1rem;text-align:center}
.price-sim-result.featured{border-color:var(--klee-gold);background:linear-gradient(180deg,#fff 0%,rgba(184,160,122,0.06) 100%);box-shadow:0 6px 20px rgba(160,120,64,0.1)}
.price-sim-result-label{font-size:0.78rem;color:var(--text-sec);font-family:var(--ff-jp-sans);margin-bottom:0.4rem}
.price-sim-result-value{font-family:var(--ff-num);font-size:1.8rem;font-weight:300;line-height:1;color:var(--klee-sumi)}
.price-sim-result.featured .price-sim-result-value{color:var(--klee-gold)}
.price-sim-result-value small{font-size:0.5em;color:var(--text-sec);margin-left:0.2em}
.price-sim-result-meta{font-size:0.78rem;color:var(--text-sec);margin-top:0.4rem;font-family:var(--ff-en);font-style:italic}
.price-includes{margin-top:2rem}
.price-includes-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
@media (max-width:768px){.price-includes-grid{grid-template-columns:1fr}}
.price-include-card{background:rgba(255,255,255,0.5);border:1px solid var(--line);border-radius:6px;padding:1.5rem 1.6rem}
.price-include-title{font-family:var(--ff-klee);font-size:1.1rem;margin-bottom:0.9rem;padding-bottom:0.7rem;border-bottom:1px solid var(--line)}
.price-include-list{list-style:none;display:flex;flex-direction:column;gap:0.55rem}
.price-include-list li{font-size:0.9rem;padding-left:1.4rem;position:relative;line-height:1.6}
.price-include-list li::before{content:"✓";position:absolute;left:0;color:var(--klee-gold);font-weight:600}

/* ============================================================
   Data Governance Policy / FAQ（apply.html）
   ============================================================ */
.policy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin:2rem 0 3rem}
@media (max-width:900px){.policy-grid{grid-template-columns:1fr}}
.policy-card{background:#fff;border:1px solid var(--line);border-radius:6px;padding:1.6rem 1.5rem;position:relative;display:flex;flex-direction:column;gap:0.6rem}
.policy-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--klee-gold);border-radius:6px 0 0 6px}
.policy-step{font-family:var(--ff-en);font-style:italic;font-size:0.78rem;letter-spacing:0.12em;color:var(--klee-gold)}
.policy-period{font-family:var(--ff-num);font-size:1.05rem;color:var(--text-sec);margin-bottom:0.4rem}
.policy-title{font-family:var(--ff-klee);font-size:1.2rem;margin-bottom:0.5rem;padding-bottom:0.6rem;border-bottom:1px solid var(--line)}
.policy-list{list-style:none;display:flex;flex-direction:column;gap:0.55rem;font-size:0.9rem;line-height:1.7}
.policy-list li{padding-left:1.2rem;position:relative}
.policy-list li::before{content:"▸";position:absolute;left:0;color:var(--klee-gold)}
.policy-list ul{list-style:none;margin-top:0.4rem;display:flex;flex-direction:column;gap:0.3rem;padding-left:0.5rem}
.policy-list ul li{font-size:0.85rem;color:var(--text-sec)}
.policy-list ul li::before{content:"・";color:var(--klee-gold)}
.faq-list{display:flex;flex-direction:column;gap:0.6rem;max-width:880px;margin:2rem auto 0}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:6px;overflow:hidden;transition:all .25s}
.faq-item[open]{border-color:var(--klee-gold);box-shadow:0 6px 20px rgba(0,0,0,0.04)}
.faq-item summary{cursor:pointer;padding:1.1rem 1.4rem;font-family:var(--ff-klee);font-size:1rem;list-style:none;position:relative;padding-right:3rem;transition:background .2s}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:1.4rem;top:50%;transform:translateY(-50%);font-family:var(--ff-num);font-size:1.4rem;color:var(--klee-gold);transition:transform .2s;line-height:1}
.faq-item[open] summary::after{content:"−"}
.faq-item summary:hover{background:rgba(184,160,122,0.05)}
.faq-item p{padding:0 1.4rem 1.2rem;font-size:0.92rem;line-height:1.9;color:var(--text-sec)}

/* ============================================================
   Form Usability：エラー表示・必須項目
   ============================================================ */
.field-error{margin-top:0.4rem;font-size:0.82rem;color:var(--danger);font-family:var(--ff-jp-sans);display:flex;align-items:center;gap:0.3rem}
.field-error::before{content:"⚠";font-size:0.92rem}
.is-invalid,
input.is-invalid,
select.is-invalid,
textarea.is-invalid{border-color:var(--danger) !important;background-color:rgba(138,74,80,0.04) !important;box-shadow:0 0 0 3px rgba(138,74,80,0.08)}
.is-invalid:focus{outline:none;box-shadow:0 0 0 3px rgba(138,74,80,0.18)}
.step-error-summary{display:none;background:rgba(138,74,80,0.08);border:1px solid rgba(138,74,80,0.3);border-left:4px solid var(--danger);border-radius:4px;padding:0.9rem 1.2rem;margin:1rem 0 1.5rem;font-size:0.92rem;color:var(--danger);font-family:var(--ff-jp-sans)}
.step-error-summary strong{font-weight:600}

/* デモバナー */
.demo-banner{
  background: linear-gradient(90deg, var(--klee-gold) 0%, var(--klee-terra) 100%);
  color: #fff;
  text-align: center;
  padding: 0.5rem 1rem;
  font-size: 0.82rem;
  font-family: var(--ff-jp-sans);
  letter-spacing: 0.03em;
}
.demo-banner strong{font-weight: 600}
.demo-banner a{text-decoration: underline;margin-left: 0.5rem}

/* ============================================================
   法的ページ（Privacy / Terms / Tokushoho）
   ============================================================ */
.legal-shell{
  max-width: 880px;
  margin: 0 auto;
  padding: 3rem var(--px) 5rem;
}
.legal-eyebrow{
  font-family: var(--ff-en);
  font-style: italic;
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  color: var(--klee-gold);
  margin-bottom: 0.5rem;
}
.legal-shell h1{
  font-family: var(--ff-klee);
  font-size: clamp(1.6rem, 2.8vw, 2rem);
  line-height: 1.4;
  margin-bottom: 1.2rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--line);
}
.legal-meta{
  font-family: var(--ff-jp-sans);
  font-size: 0.85rem;
  color: var(--text-sec);
  margin-bottom: 2.2rem;
}
.legal-shell h2{
  font-family: var(--ff-klee);
  font-size: 1.2rem;
  margin-top: 2.6rem;
  margin-bottom: 1rem;
  padding-left: 1rem;
  border-left: 3px solid var(--klee-teal);
}
.legal-shell p{
  font-size: 0.96rem;
  line-height: 1.95;
  margin-bottom: 1.1rem;
}
.legal-shell ol, .legal-shell ul{
  margin: 1rem 0 1.5rem 1.6rem;
}
.legal-shell li{
  font-size: 0.94rem;
  line-height: 1.95;
  margin-bottom: 0.5rem;
}
.legal-shell a{
  color: var(--klee-terra);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-contact{
  margin-top: 3rem;
  padding: 1.4rem 1.6rem;
  background: rgba(184,160,122,0.08);
  border-left: 3px solid var(--klee-gold);
  border-radius: 4px;
  font-size: 0.92rem;
}
.legal-table{
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0 2rem;
  font-size: 0.94rem;
  background: #fff;
}
.legal-table th, .legal-table td{
  border: 1px solid var(--line);
  padding: 0.95rem 1.1rem;
  text-align: left;
  vertical-align: top;
  line-height: 1.85;
}
.legal-table th{
  background: rgba(58,90,106,0.06);
  font-family: var(--ff-klee);
  width: 30%;
  font-weight: 500;
}
@media (max-width: 720px){
  .legal-table th{width: 38%; font-size: 0.86rem; padding: 0.8rem 0.7rem}
  .legal-table td{font-size: 0.88rem; padding: 0.8rem 0.7rem}
}

/* ============================================================
   Cookie Consent Banner
   ============================================================ */
.cookie-banner{
  position: fixed;
  left: 1rem; right: 1rem; bottom: 1rem;
  z-index: 10050;
  background: var(--klee-sumi);
  color: #f5f0e6;
  border-radius: 6px;
  box-shadow: 0 12px 40px -10px rgba(0,0,0,0.45);
  padding: 1rem 1.2rem;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
  animation: ccSlideUp 0.4s cubic-bezier(0.16,1,0.3,1);
}
@keyframes ccSlideUp{
  from{opacity: 0; transform: translateY(20px)}
  to{opacity: 1; transform: translateY(0)}
}
.cookie-banner-inner{
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.cookie-banner-text{
  flex: 1 1 280px;
  font-family: var(--ff-jp-sans);
  font-size: 0.82rem;
  line-height: 1.75;
  margin: 0;
  color: rgba(245,240,230,0.92);
}
.cookie-banner-text a{
  color: var(--kc-s0);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-banner-actions{
  display: flex;
  gap: 0.6rem;
  flex-shrink: 0;
}
.cookie-banner .btn-sm{
  padding: 0.55rem 1rem;
  font-size: 0.82rem;
  white-space: nowrap;
}
.cookie-banner .btn-ghost{
  background: transparent;
  border: 1px solid rgba(245,240,230,0.35);
  color: rgba(245,240,230,0.92);
}
.cookie-banner .btn-ghost:hover{
  background: rgba(245,240,230,0.08);
  border-color: rgba(245,240,230,0.55);
}
@media (max-width: 600px){
  .cookie-banner-inner{flex-direction: column; align-items: stretch}
  .cookie-banner-actions{justify-content: stretch}
  .cookie-banner-actions .btn-sm{flex: 1}
}

/* ============================================================
   ユーティリティ
   ============================================================ */
.text-center{text-align:center}
.mt-1{margin-top:1rem}
.mt-2{margin-top:2rem}
.mt-3{margin-top:3rem}
.mb-2{margin-bottom:2rem}
.hidden{display:none !important}

/* ============================================================
   学習ブロック拡張 ── 第18版（理解深化レイヤー）
   ============================================================ */

/* ── 共通：ブロック余白統一 ── */
.lesson-body .block{margin: 2.4rem 0}
.lesson-body .block:first-child{margin-top: 0}

/* ── ① 対比カード（NG / OK / DO / DON'T） ── */
.compare-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin: 2.4rem 0;
}
@media (max-width: 720px){
  .compare-grid{grid-template-columns: 1fr; gap: 1rem}
}
.compare-card{
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1.5rem 1.6rem 1.4rem;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  overflow: hidden;
}
.compare-card::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.compare-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -12px rgba(26,26,26,0.15);
}
.compare-card.ng::before{background: linear-gradient(90deg, var(--danger) 0%, #b07060 100%)}
.compare-card.ok::before{background: linear-gradient(90deg, var(--success) 0%, #7aa080 100%)}

.compare-head{
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px dashed var(--line);
}
.compare-icon{
  flex: 0 0 32px;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-en);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0;
}
.compare-card.ng .compare-icon{background: rgba(138,74,80,0.10); color: var(--danger)}
.compare-card.ok .compare-icon{background: rgba(74,122,90,0.10); color: var(--success)}
.compare-label{
  font-family: var(--ff-klee);
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.compare-card.ng .compare-label{color: var(--danger)}
.compare-card.ok .compare-label{color: var(--success)}

.compare-scene{
  font-family: var(--ff-jp);
  font-size: 1rem;
  line-height: 1.85;
  margin-bottom: 0.9rem;
  color: var(--text);
}
.compare-reason{
  font-family: var(--ff-jp-sans);
  font-size: 0.84rem;
  line-height: 1.7;
  color: var(--text-sec);
  padding-top: 0.7rem;
  border-top: 1px solid rgba(26,26,26,0.06);
}
.compare-reason::before{
  content: "──  ";
  color: var(--klee-gold);
  font-family: var(--ff-en);
  font-style: italic;
}

/* ── ② ミニシナリオ（インライン即答クイズ） ── */
.scenario{
  position: relative;
  background: linear-gradient(180deg, #fffdf8 0%, #fbf6ec 100%);
  border: 1px solid rgba(160,120,64,0.22);
  border-radius: 6px;
  padding: 1.8rem 1.8rem 1.6rem;
  margin: 2.4rem 0;
}
.scenario::before{
  content: "";
  position: absolute;
  top: -1px; left: 24px;
  width: 60px; height: 2px;
  background: var(--klee-gold);
}
.scenario-label{
  font-family: var(--ff-en);
  font-style: italic;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  color: var(--klee-gold);
  margin-bottom: 0.5rem;
}
.scenario-q{
  font-family: var(--ff-klee);
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 1.3rem;
}
.scenario-choices{
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.scenario-choice{
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  width: 100%;
  text-align: left;
  background: rgba(255,255,255,0.6);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.85rem 1.1rem;
  font-family: var(--ff-jp);
  font-size: 0.96rem;
  line-height: 1.7;
  color: var(--text);
  cursor: pointer;
  transition: all 0.15s ease;
}
.scenario-choice:hover:not(:disabled){
  background: #fff;
  border-color: var(--klee-gold);
  transform: translateX(2px);
}
.scenario-choice:disabled{cursor: default; color: var(--text); -webkit-text-fill-color: var(--text)}
.scenario-choice:disabled:not(.is-correct):not(.is-wrong){opacity: 0.45}
.scenario-feedback .fb-body{color: var(--text)}
.scenario-choice .choice-marker{
  flex: 0 0 22px;
  width: 22px; height: 22px;
  border: 1px solid var(--line);
  border-radius: 50%;
  font-family: var(--ff-en);
  font-size: 0.78rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--text-sec);
  transition: all 0.2s ease;
}
.scenario-choice.is-correct{
  background: rgba(74,122,90,0.08);
  border-color: var(--success);
}
.scenario-choice.is-correct .choice-marker{
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}
.scenario-choice.is-wrong{
  background: rgba(138,74,80,0.06);
  border-color: var(--danger);
}
.scenario-choice.is-wrong .choice-marker{
  background: var(--danger);
  border-color: var(--danger);
  color: #fff;
}
.scenario-feedback{
  display: none;
  margin-top: 1.1rem;
  padding: 1rem 1.2rem;
  background: #fff;
  border-left: 3px solid var(--klee-gold);
  border-radius: 0 4px 4px 0;
  font-size: 0.92rem;
  line-height: 1.85;
  animation: scenarioFade 0.35s ease;
}
.scenario-feedback.show{display: block}
.scenario-feedback .fb-verdict{
  font-family: var(--ff-klee);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  margin-bottom: 0.4rem;
}
.scenario-feedback.correct .fb-verdict{color: var(--success)}
.scenario-feedback.wrong .fb-verdict{color: var(--danger)}
@keyframes scenarioFade{
  from{opacity:0; transform: translateY(-4px)}
  to{opacity:1; transform: translateY(0)}
}

/* ── ③ まとめカード（Takeaways） ── */
.takeaways{
  margin: 3rem 0 1rem;
  padding-top: 2.2rem;
  border-top: 1px solid var(--line);
}
.takeaways-head{
  text-align: center;
  margin-bottom: 1.8rem;
}
.takeaways-eyebrow{
  font-family: var(--ff-en);
  font-style: italic;
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  color: var(--klee-gold);
  margin-bottom: 0.3rem;
}
.takeaways-title{
  font-family: var(--ff-klee);
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--text);
}
.takeaways-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}
@media (max-width: 900px){
  .takeaways-grid{grid-template-columns: 1fr; gap: 0.9rem}
}
.takeaway{
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1.5rem 1.4rem 1.5rem;
  overflow: hidden;
}
.takeaway::after{
  content: "";
  position: absolute;
  right: -18px; bottom: -18px;
  width: 70px; height: 70px;
  opacity: 0.08;
  pointer-events: none;
}
.takeaway:nth-child(1)::after{
  background: var(--klee-gold);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.takeaway:nth-child(2)::after{
  background: var(--klee-terra);
  border-radius: 50%;
}
.takeaway:nth-child(3)::after{
  background: var(--klee-teal);
  border-radius: 3px;
}
.takeaway-num{
  font-family: var(--ff-num);
  font-weight: 300;
  font-size: 2rem;
  letter-spacing: 0;
  color: var(--klee-gold);
  line-height: 1;
  margin-bottom: 0.7rem;
}
.takeaway-label{
  font-family: var(--ff-klee);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text);
  margin-bottom: 0.6rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(26,26,26,0.08);
}
.takeaway-body{
  font-family: var(--ff-jp-sans);
  font-size: 0.85rem;
  line-height: 1.85;
  color: var(--text-sec);
}

/* ── ④ リフレクション（自分の現場では？） ── */
.reflection{
  position: relative;
  margin: 2.4rem 0;
  padding: 1.4rem 1.6rem 1.4rem 3.4rem;
  background: rgba(58,90,106,0.04);
  border-radius: 4px;
}
.reflection::before{
  content: "”";
  position: absolute;
  left: 1rem;
  top: 0.4rem;
  font-family: var(--ff-en);
  font-style: italic;
  font-size: 3.2rem;
  color: var(--klee-teal);
  opacity: 0.35;
  line-height: 1;
}
.reflection-label{
  font-family: var(--ff-en);
  font-style: italic;
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  color: var(--klee-teal);
  margin-bottom: 0.4rem;
}
.reflection-prompt{
  font-family: var(--ff-klee);
  font-size: 1rem;
  line-height: 1.85;
  color: var(--text);
}

/* ============================================================
   Dashboard Hero (My Academy)
   ── 「学びの宿の入口」ヒーロー
   ============================================================ */
.hero-dash{
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(1.8rem, 4vw, 3rem) clamp(1.4rem, 3vw, 2.4rem);
  margin: 0 0 3rem;
  background:
    linear-gradient(135deg, rgba(245,240,230,0.95) 0%, rgba(237,230,215,0.7) 100%);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  isolation: isolate;
}
/* 原稿用紙グリッド（ヒーロー内のみ・薄め） */
.hero-dash::before{
  content:"";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, transparent calc(100% - 1px), rgba(26,26,26,0.04) calc(100% - 1px)),
    linear-gradient(to bottom, transparent calc(100% - 1px), rgba(26,26,26,0.04) calc(100% - 1px));
  background-size: 36px 36px;
  pointer-events: none;
  z-index: -1;
}
/* 右上 Klee gold エクスクラメーション */
.hero-dash::after{
  content:"";
  position: absolute;
  top: 1.1rem; right: 1.4rem;
  width: 4px; height: 36px;
  background: var(--klee-gold);
  border-radius: 2px;
  box-shadow: 0 12px 0 var(--klee-gold);
  opacity: 0.55;
}
@media (max-width: 720px){
  .hero-dash{
    grid-template-columns: 1fr;
    gap: 1.4rem;
    text-align: center;
    padding: 1.8rem 1.2rem 2rem;
  }
  .hero-dash::after{ top: 0.8rem; right: 1rem; height: 28px; box-shadow: 0 10px 0 var(--klee-gold); }
}

/* ── 左：ロゴ + SAA ラベル ── */
.hero-dash-mark{
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  gap: 0.9rem;
  padding: 0.4rem 0;
}
.hero-dash-svg{
  width: clamp(150px, 18vw, 200px);
  height: auto;
  display: block;
}
.hero-dash-saa{
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  font-family: var(--ff-en);
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  color: var(--klee-sumi);
  white-space: nowrap;
}
.hero-dash-saa em{
  font-style: italic;
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--klee-gold);
  margin-right: 0.06em;
}
.hero-dash-saa i{
  font-style: normal;
  color: var(--klee-gold);
  opacity: 0.7;
  font-size: 0.8rem;
}
.hero-dash-saa-jp{
  font-family: var(--ff-klee);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--text-sec);
  text-align: center;
}
@media (max-width: 720px){
  .hero-dash-mark{ flex-direction: row; justify-content: center; flex-wrap: wrap; gap: 0.8rem 1.4rem; }
  .hero-dash-svg{ width: 110px; }
  .hero-dash-saa-jp{ width:100%; }
}

/* ── 右：テキストブロック ── */
.hero-dash-body{
  display: flex; flex-direction: column;
  gap: 0.55rem;
}
.hero-dash-eyebrow{
  display: flex; align-items: center; gap: 0.7rem;
  font-family: var(--ff-en);
  font-style: italic;
  font-size: 0.88rem;
  letter-spacing: 0.12em;
  color: var(--klee-gold);
  margin-bottom: 0.2rem;
}
.hero-dash-eyebrow .dot{
  display: inline-block;
  width: 5px; height: 5px;
  background: var(--klee-gold);
  border-radius: 50%;
  opacity: 0.8;
}
.hero-dash-eyebrow .date{
  font-family: var(--ff-num);
  font-style: normal;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--text-sec);
}
.hero-dash-eyebrow .dow{
  font-family: var(--ff-en);
  font-style: italic;
  color: var(--text-sec);
}
@media (max-width: 720px){
  .hero-dash-eyebrow{ justify-content: center; flex-wrap: wrap; }
}

.hero-dash-title{
  font-family: var(--ff-klee);
  font-size: clamp(1.55rem, 3.2vw, 2.3rem);
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
  letter-spacing: 0.02em;
  text-wrap: balance;
}
.hero-dash-title .name{
  display: inline-block;
  white-space: nowrap;
  font-family: var(--ff-klee);
  font-style: normal;
  font-weight: 600;
  font-size: 1.08em;
  color: var(--klee-teal);
  letter-spacing: 0.04em;
  position: relative;
  padding: 0 0.06em 0.12em;
  margin-right: 0.05em;
}
.hero-dash-title .name::after{
  content:"";
  position: absolute;
  left: 0.04em; right: 0.04em; bottom: 0.02em;
  height: 2px;
  background: linear-gradient(90deg, var(--klee-gold) 0%, var(--klee-gold) 78%, rgba(160,120,64,0) 100%);
  opacity: 0.6;
}
.hero-dash-title .greet{
  font-family: var(--ff-klee);
  font-weight: 500;
  color: var(--klee-sumi);
  white-space: nowrap;
}

.hero-dash-tagline{
  font-family: var(--ff-klee);
  font-size: 0.92rem;
  color: var(--klee-gold);
  letter-spacing: 0.05em;
  margin-top: 0.4rem;
}
.hero-dash-tagline::before{
  content:"「";
  color: var(--klee-gold);
  opacity: 0.6;
}
.hero-dash-tagline::after{
  content:"」";
  color: var(--klee-gold);
  opacity: 0.6;
}
.hero-dash-sub{
  font-family: var(--ff-jp);
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.85;
  margin-top: 0.2rem;
  max-width: 36em;
}
@media (max-width: 720px){
  .hero-dash-sub{ margin-left: auto; margin-right: auto; }
}

/* ── ライフライン（学習中／修了／進捗） ── */
.hero-dash-lifeline{
  display: flex;
  align-items: center;
  gap: clamp(0.8rem, 2.4vw, 1.6rem);
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(26,26,26,0.08);
  flex-wrap: wrap;
}
@media (max-width: 720px){
  .hero-dash-lifeline{ justify-content: center; }
}
.hero-dash-life{
  display: flex; align-items: baseline; gap: 0.4rem;
  font-family: var(--ff-jp-sans);
  font-size: 0.78rem;
  color: var(--text-sec);
  letter-spacing: 0.04em;
}
.hero-dash-life .num{
  font-family: var(--ff-num);
  font-size: 1.4rem;
  font-weight: 300;
  color: var(--klee-sumi);
  line-height: 1;
  font-variant-numeric: tabular-nums lining-nums;
}
.hero-dash-life.is-pct .num{ color: var(--klee-gold); }
.hero-dash-life .num small{
  font-size: 0.6em;
  color: var(--text-sec);
  margin-left: 0.1em;
}
.hero-dash-life .dotmark{
  display: inline-block; width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--klee-teal);
  margin-right: 0.35rem;
  transform: translateY(-1px);
}
.hero-dash-life.is-done .dotmark{ background: var(--success); }
.hero-dash-life.is-pct .dotmark{ background: var(--klee-gold); }
.hero-dash-life .bar{
  flex: 0 0 120px;
  height: 3px;
  background: rgba(26,26,26,0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-left: 0.2rem;
}
.hero-dash-life .bar-fill{
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--klee-gold), var(--klee-terra));
  width: 0%;
  transition: width .8s cubic-bezier(.4,0,.2,1);
}
@media (max-width: 480px){
  .hero-dash-life .bar{ flex-basis: 90px; }
}

@media (prefers-reduced-motion: reduce){
  .hero-dash-life .bar-fill{ transition: none; }
}

/* ============================================================
   学習ページ 編集主任ノート（チューターパネル）
   ============================================================ */
.tutor-panel{
  position: sticky; top: 80px;
  align-self: start;
  height: calc(100vh - 80px);
  padding: 1.6rem 1.3rem 2rem;
  background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(245,240,230,0.55));
  border-left: 1px solid var(--line);
  overflow-y: auto;
  font-family: var(--ff-jp-sans);
  color: var(--text);
}
.tutor-head{
  display: flex; align-items: center; gap: 0.7rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
  margin-bottom: 0.9rem;
}
.tutor-avatar{
  flex: 0 0 auto;
  width: 40px; height: 40px;
  display: grid; place-items: center;
  background: rgba(184,160,122,0.10);
  border-radius: 50%;
}
.tutor-avatar svg{ display:block; }
.tutor-meta{ display: flex; flex-direction: column; line-height: 1.25; min-width: 0; flex: 1; }
.tutor-eyebrow{
  font-family: var(--ff-en);
  font-style: italic;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  color: var(--klee-gold);
}
.tutor-name{
  font-family: var(--ff-klee);
  font-size: 0.95rem;
  color: var(--text);
  margin-top: 1px;
}
.tutor-toggle{
  width: 28px; height: 28px;
  display: none;
  align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--klee-teal);
  background: rgba(58,90,106,0.06);
  transition: transform .25s ease, background .2s;
}
.tutor-toggle:hover{ background: rgba(58,90,106,0.14); }
.tutor-panel.collapsed .tutor-toggle{ transform: rotate(-90deg); }

.tutor-section-no{
  font-family: var(--ff-num);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--klee-gold);
  margin-bottom: 1rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid rgba(160,120,64,0.25);
  border-radius: 999px;
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tutor-content{
  font-size: 0.9rem;
  line-height: 1.85;
  letter-spacing: 0.01em;
}
.tutor-empty{
  padding: 1rem 0.9rem;
  background: rgba(160,120,64,0.06);
  border-left: 2px solid var(--klee-gold);
  border-radius: 0 4px 4px 0;
  font-size: 0.85rem;
  color: var(--text-sec);
  line-height: 1.8;
}

.tutor-block{
  margin-bottom: 1.3rem;
  padding-left: 0.8rem;
  border-left: 2px solid var(--klee-teal);
}
.tutor-block:last-child{ margin-bottom: 0.2rem; }
.tutor-block-head{
  display: flex; align-items: center; gap: 0.4rem;
  font-family: var(--ff-klee);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--klee-teal);
  margin-bottom: 0.5rem;
}
.tutor-block-head svg{ color: var(--klee-teal); flex-shrink: 0; }

.tutor-keywords{
  list-style: none; padding: 0; margin: 0;
}
.tutor-keywords li{
  padding: 0.55rem 0;
  border-bottom: 1px dashed rgba(26,26,26,0.10);
}
.tutor-keywords li:last-child{ border-bottom: 0; }
.tutor-kw-term{
  display: inline-block;
  font-family: var(--ff-klee);
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--klee-sumi);
}
.tutor-kw-read{
  font-family: var(--ff-jp-sans);
  font-weight: 400;
  font-size: 0.72rem;
  color: var(--text-sec);
  margin-left: 0.1rem;
}
.tutor-kw-def{
  margin-top: 0.25rem;
  font-size: 0.82rem;
  line-height: 1.75;
  color: var(--text);
}
.tutor-kw-def strong{ color: var(--klee-terra); font-weight: 600; }

.tutor-note,
.tutor-deeper{
  font-size: 0.86rem;
  line-height: 1.85;
  color: var(--text);
}
.tutor-note strong,
.tutor-deeper strong{ color: var(--klee-terra); font-weight: 600; }

.tutor-block.tutor-encourage{
  border-left-color: var(--klee-gold);
  background: rgba(160,120,64,0.05);
  padding: 0.8rem 0.9rem;
  border-radius: 0 4px 4px 0;
}
.tutor-block.tutor-encourage .tutor-block-head{ color: var(--klee-gold); }
.tutor-block.tutor-encourage .tutor-block-head svg{ color: var(--klee-gold); }
.tutor-block.tutor-encourage .tutor-deeper{
  font-style: italic;
  color: #6a5340;
}

/* 中型画面：パネルが下に回るとき */
@media (max-width: 1280px){
  .tutor-panel{
    position: relative; top: auto;
    height: auto;
    border-left: none;
    border-top: 1px solid var(--line);
    margin: 1.5rem clamp(1.25rem, 5vw, 4rem) 2rem;
    padding: 1.4rem 1.5rem 1.8rem;
    background: rgba(255,255,255,0.65);
    border-radius: 8px;
    box-shadow: 0 6px 20px -16px rgba(26,26,26,0.35);
  }
  .tutor-toggle{ display: flex; }
  .tutor-panel.collapsed .tutor-content,
  .tutor-panel.collapsed .tutor-section-no{ display: none; }
  .tutor-panel.collapsed{ padding-bottom: 1rem; }
}
@media (max-width: 900px){
  .tutor-panel{ margin: 1.2rem 1rem 2rem; }
}
@media (max-width: 480px){
  .tutor-panel{ padding: 1.1rem 1.1rem 1.4rem; }
  .tutor-avatar{ width: 34px; height: 34px; }
  .tutor-name{ font-size: 0.9rem; }
  .tutor-content{ font-size: 0.86rem; }
}

@media (prefers-reduced-motion: reduce){
  .tutor-toggle{ transition: none; }
}

/* ============================================================
   Admin Modal + Form Components (Phase 2)
   ============================================================ */
.sa-modal-overlay{
  position: fixed; inset: 0;
  background: rgba(26,26,26,0.55);
  backdrop-filter: blur(4px);
  z-index: 10100;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  animation: saFadeIn 0.18s ease;
}
@keyframes saFadeIn{ from{opacity:0} to{opacity:1} }
.sa-modal{
  background: #fff;
  border-radius: 8px;
  width: 100%;
  max-width: 580px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px -10px rgba(0,0,0,0.35);
  animation: saSlideUp 0.22s cubic-bezier(0.16,1,0.3,1);
}
@keyframes saSlideUp{ from{opacity:0; transform: translateY(14px)} to{opacity:1; transform: translateY(0)} }
.sa-modal-head{
  padding: 1.4rem 1.6rem 0.9rem;
  border-bottom: 1px solid var(--line);
}
.sa-modal-eyebrow{
  font-family: var(--ff-en);
  font-style: italic;
  color: var(--klee-gold);
  letter-spacing: 0.18em;
  font-size: 0.78rem;
  margin-bottom: 0.3rem;
}
.sa-modal-title{
  font-family: var(--ff-klee);
  font-size: 1.3rem;
  line-height: 1.4;
}
.sa-modal-body{
  padding: 1.4rem 1.6rem;
}
.sa-modal-foot{
  padding: 0.9rem 1.6rem 1.3rem;
  border-top: 1px solid var(--line);
  display: flex; gap: 0.6rem; justify-content: flex-end; flex-wrap: wrap;
}
.sa-field{
  margin-bottom: 1rem;
}
.sa-field label{
  display: block;
  font-family: var(--ff-klee);
  font-size: 0.85rem;
  margin-bottom: 0.4rem;
  color: var(--text);
}
.sa-field label .req{ color: var(--danger); margin-left: 0.2rem; }
.sa-field input[type=text],
.sa-field input[type=email],
.sa-field input[type=number],
.sa-field input[type=date],
.sa-field select,
.sa-field textarea{
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fff;
  font-family: var(--ff-jp-sans);
  font-size: 0.92rem;
  line-height: 1.6;
  transition: border-color 0.15s ease;
}
.sa-field input:focus, .sa-field select:focus, .sa-field textarea:focus{
  outline: none;
  border-color: var(--klee-gold);
  box-shadow: 0 0 0 3px rgba(160,120,64,0.12);
}
.sa-field-hint{
  font-size: 0.78rem;
  color: var(--text-sec);
  margin-top: 0.35rem;
  line-height: 1.6;
}
.sa-field-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
}
@media (max-width: 600px){
  .sa-field-row{ grid-template-columns: 1fr; }
}
.sa-alert{
  padding: 0.8rem 1rem;
  border-radius: 4px;
  font-size: 0.86rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}
.sa-alert.info{ background: rgba(58,90,106,0.08); border-left: 3px solid var(--klee-teal); }
.sa-alert.warn{ background: rgba(160,120,64,0.10); border-left: 3px solid var(--klee-gold); }
.sa-alert.danger{ background: rgba(138,74,80,0.08); border-left: 3px solid var(--danger); color: var(--danger); }
.sa-alert.success{ background: rgba(74,122,90,0.08); border-left: 3px solid var(--success); color: var(--success); }

/* CSV Preview Table */
.csv-preview{
  max-height: 280px; overflow: auto;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #fafaf6;
}
.csv-preview table{
  width: 100%; border-collapse: collapse; font-size: 0.82rem;
}
.csv-preview th, .csv-preview td{
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid rgba(26,26,26,0.06);
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}
.csv-preview th{
  background: rgba(58,90,106,0.08);
  font-family: var(--ff-klee);
  position: sticky; top: 0; z-index: 1;
}

/* Admin Course Cards */
.admin-courses-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}
.admin-course-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1.2rem 1.3rem 1.1rem;
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.admin-course-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -12px rgba(26,26,26,0.18);
}
.admin-course-card-id{
  font-family: var(--ff-en);
  font-style: italic;
  color: var(--klee-gold);
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  margin-bottom: 0.3rem;
}
.admin-course-card-title{
  font-family: var(--ff-klee);
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 0.8rem;
  min-height: 2.6em;
}
.admin-course-card-stats{
  display: flex; gap: 1rem;
  font-size: 0.82rem;
  color: var(--text-sec);
  margin-bottom: 0.8rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid rgba(26,26,26,0.06);
}
.admin-course-card-stats strong{
  font-family: var(--ff-num);
  font-size: 1.15rem;
  color: var(--text);
  font-weight: 400;
}
.admin-course-card-bar{
  height: 6px;
  background: rgba(26,26,26,0.08);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}
.admin-course-card-bar-fill{
  height: 100%;
  background: linear-gradient(90deg, var(--klee-gold), #d4a070);
  transition: width 0.4s ease;
}
.admin-course-card-rate{
  font-size: 0.78rem;
  color: var(--text-sec);
  display: flex; justify-content: space-between;
}

/* Settings Form */
.settings-grid{
  display: grid;
  gap: 1.4rem;
  max-width: 760px;
}
.settings-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1.6rem 1.8rem;
}
.settings-card-head{
  margin-bottom: 1.2rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
}
.settings-card-title{
  font-family: var(--ff-klee);
  font-size: 1.1rem;
}
.settings-card-desc{
  font-size: 0.82rem;
  color: var(--text-sec);
  margin-top: 0.25rem;
}
.settings-row{
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(26,26,26,0.05);
  align-items: center;
}
.settings-row:last-child{ border-bottom: none; }
.settings-row-label{
  font-family: var(--ff-klee);
  font-size: 0.92rem;
}
.settings-row-value{
  font-family: var(--ff-jp-sans);
  font-size: 0.92rem;
  color: var(--text);
}
@media (max-width: 600px){
  .settings-row{ grid-template-columns: 1fr; gap: 0.3rem; }
  .settings-row-label{ font-size: 0.82rem; color: var(--text-sec); }
}

/* Audit Log Table */
.audit-table{
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-size: 0.86rem;
}
.audit-table th{
  background: rgba(58,90,106,0.06);
  padding: 0.75rem 0.95rem;
  text-align: left;
  font-family: var(--ff-klee);
  font-weight: 500;
  border-bottom: 1px solid var(--line);
  font-size: 0.82rem;
  position: sticky; top: 0; z-index: 1;
}
.audit-table td{
  padding: 0.7rem 0.95rem;
  border-bottom: 1px solid rgba(26,26,26,0.05);
  vertical-align: top;
}
.audit-table tr:hover td{ background: rgba(184,160,122,0.04); }
.audit-action-pill{
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 12px;
  font-size: 0.74rem;
  font-family: var(--ff-en);
  letter-spacing: 0.04em;
  background: rgba(58,90,106,0.10);
  color: var(--klee-teal);
}
.audit-action-pill.danger{ background: rgba(138,74,80,0.10); color: var(--danger); }
.audit-action-pill.success{ background: rgba(74,122,90,0.10); color: var(--success); }
.audit-action-pill.gold{ background: rgba(160,120,64,0.12); color: var(--klee-gold); }
.audit-time{
  font-family: var(--ff-num);
  font-size: 0.84rem;
  color: var(--text-sec);
  white-space: nowrap;
}
.audit-empty{
  padding: 3rem 1rem;
  text-align: center;
  color: var(--text-sec);
  font-family: var(--ff-klee);
  background: #fff;
  border-radius: 6px;
}

/* Filter bar */
.filter-bar{
  display: flex; gap: 0.7rem;
  flex-wrap: wrap;
  margin-bottom: 1.2rem;
  padding: 0.8rem 1rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.filter-bar select, .filter-bar input[type=date], .filter-bar input[type=text]{
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 0.86rem;
  background: #fff;
}
.filter-bar label{
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--text-sec);
}


/* ============================================================
   Login Portal Section (LP内・契約企業ログイン導線)
   ============================================================ */
.login-portal{
  padding: 4.5rem var(--px) 4.5rem;
  background: linear-gradient(180deg, #f5f0e6 0%, #ede6d7 100%);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.login-portal-inner{
  max-width: 1080px;
  margin: 0 auto;
}
.login-portal-head{
  text-align: center;
  margin-bottom: 2.5rem;
}
.login-portal-eyebrow{
  display: inline-block;
  font-family: var(--ff-en);
  font-style: italic;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  color: var(--klee-gold);
  margin-bottom: 0.6rem;
}
.login-portal-title{
  font-family: var(--ff-klee);
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  line-height: 1.45;
  color: var(--text);
  margin-bottom: 0.7rem;
}
.login-portal-lead{
  font-family: var(--ff-jp-sans);
  font-size: 0.95rem;
  color: var(--text-sec);
  line-height: 1.8;
}

.login-portal-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  max-width: 920px;
  margin: 0 auto 1.8rem;
}
@media (max-width: 720px){
  .login-portal-grid{ grid-template-columns: 1fr; }
}

.login-portal-card{
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.6rem 1.7rem;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  text-decoration: none;
  color: var(--text);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  position: relative;
  overflow: hidden;
}
.login-portal-card::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--klee-teal), var(--klee-gold));
  opacity: 0.6;
}
.login-portal-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 36px -14px rgba(26,26,26,0.18);
  border-color: var(--klee-gold);
}
.login-portal-card-primary::before{
  background: linear-gradient(90deg, var(--klee-gold), var(--klee-terra));
  opacity: 1;
}
.login-portal-card-primary{
  background: linear-gradient(180deg, #fffefb 0%, #fdf8ee 100%);
}

.login-portal-card-icon{
  flex: 0 0 64px;
  width: 64px; height: 64px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(160,120,64,0.10);
  color: var(--klee-gold);
}
.login-portal-card-primary .login-portal-card-icon{
  background: rgba(154,90,58,0.10);
  color: var(--klee-terra);
}

.login-portal-card-body{ flex: 1; min-width: 0; }
.login-portal-card-tag{
  display: inline-block;
  font-family: var(--ff-klee);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--klee-gold);
  margin-bottom: 0.3rem;
}
.login-portal-card-primary .login-portal-card-tag{ color: var(--klee-terra); }
.login-portal-card-title{
  font-family: var(--ff-klee);
  font-size: 1.15rem;
  margin-bottom: 0.3rem;
  color: var(--text);
}
.login-portal-card-text{
  font-family: var(--ff-jp-sans);
  font-size: 0.82rem;
  color: var(--text-sec);
  line-height: 1.6;
  margin: 0;
}

.login-portal-card-arrow{
  flex: 0 0 auto;
  font-family: var(--ff-en);
  font-size: 1.6rem;
  color: var(--klee-gold);
  font-weight: 300;
  transition: transform 0.22s ease;
}
.login-portal-card:hover .login-portal-card-arrow{ transform: translateX(4px); }

.login-portal-foot{
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-sec);
  padding-top: 1.5rem;
  margin-top: 0.8rem;
  border-top: 1px solid rgba(26,26,26,0.06);
}
.login-portal-foot a{
  color: var(--klee-terra);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.login-portal-foot strong{
  font-family: var(--ff-klee);
  font-weight: 500;
  color: var(--text);
}
@media (max-width: 640px){
  .login-portal-foot p{ display: flex; flex-direction: column; gap: 0.6rem; }
  .login-portal-foot p > *:nth-child(3){ display: none; }
}


/* ============================================================
   Apply Form (法人導入お申し込み)
   ============================================================ */
.apply-shell{
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem var(--px) 5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 3rem;
}
@media (max-width: 1024px){
  .apply-shell{ grid-template-columns: 1fr; }
}
.apply-head{
  grid-column: 1 / -1;
  text-align: center;
  margin-bottom: 2.5rem;
}
.apply-eyebrow{
  font-family: var(--ff-en);
  font-style: italic;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  color: var(--klee-gold);
  margin-bottom: 0.5rem;
}
.apply-title{
  font-family: var(--ff-klee);
  font-size: clamp(1.6rem, 2.8vw, 2rem);
  margin-bottom: 1rem;
}
.apply-lead{
  font-family: var(--ff-jp-sans);
  font-size: 0.95rem;
  line-height: 1.95;
  color: var(--text-sec);
  max-width: 720px;
  margin: 0 auto;
}

.apply-steps{
  grid-column: 1 / -1;
  display: flex;
  justify-content: center;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  flex-wrap: wrap;
}
.apply-steps li{
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.4rem;
  color: var(--text-sec);
  font-family: var(--ff-jp-sans);
  font-size: 0.86rem;
  cursor: pointer;
  position: relative;
}
.apply-steps li:not(:last-child)::after{
  content: '→';
  margin-left: 1rem;
  color: rgba(26,26,26,0.2);
}
.apply-step-num{
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(26,26,26,0.08);
  color: var(--text-sec);
  font-family: var(--ff-num);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.86rem;
  transition: all 0.2s ease;
}
.apply-steps li.active{ color: var(--text); }
.apply-steps li.active .apply-step-num{
  background: var(--klee-gold);
  color: #fff;
}
.apply-steps li.done .apply-step-num{
  background: var(--success);
  color: #fff;
}
.apply-steps li.done::before{
  content: ''; /* could add checkmark via SVG */
}

.apply-form{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 2rem 2.2rem;
}
@media (max-width: 640px){ .apply-form{ padding: 1.4rem 1.2rem; } }
.apply-section-title{
  font-family: var(--ff-klee);
  font-size: 1.2rem;
  margin-bottom: 1.4rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--line);
}
.apply-nav{
  margin-top: 1.8rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}

.apply-plan-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.7rem;
  margin-top: 0.5rem;
}
.apply-plan-card{
  cursor: pointer;
  position: relative;
}
.apply-plan-card input{ position: absolute; opacity: 0; pointer-events: none; }
.apply-plan-card-inner{
  border: 2px solid var(--line);
  border-radius: 6px;
  padding: 1rem 1rem;
  background: #fafaf6;
  transition: all 0.18s ease;
  text-align: center;
}
.apply-plan-card:hover .apply-plan-card-inner{
  border-color: var(--klee-gold);
  background: #fff;
}
.apply-plan-card input:checked + .apply-plan-card-inner{
  border-color: var(--klee-gold);
  background: rgba(160,120,64,0.06);
  box-shadow: 0 4px 14px -8px rgba(160,120,64,0.4);
}
.apply-plan-card-tag{
  font-family: var(--ff-klee);
  font-size: 0.95rem;
  color: var(--text);
  margin-bottom: 0.4rem;
}
.apply-plan-card-price{
  font-family: var(--ff-num);
  font-size: 1.4rem;
  color: var(--klee-gold);
  margin-bottom: 0.5rem;
}
.apply-plan-card-price small{
  font-size: 0.7rem;
  color: var(--text-sec);
  margin-left: 0.2rem;
}
.apply-plan-card-meta{
  font-size: 0.74rem;
  color: var(--text-sec);
  line-height: 1.55;
}
.apply-badge{
  display: inline-block;
  font-size: 0.65rem;
  background: var(--klee-terra);
  color: #fff;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  margin-left: 0.3rem;
  vertical-align: middle;
  letter-spacing: 0.05em;
}

.apply-track-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.apply-track-pill{
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1rem;
  background: #fafaf6;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 0.86rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.apply-track-pill:hover{ border-color: var(--klee-gold); }
.apply-track-pill input{ margin: 0; }

.apply-review dl{
  margin: 0;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 0.5rem 1rem;
}
@media (max-width: 600px){ .apply-review dl{ grid-template-columns: 1fr; gap: 0.2rem 0; } }
.apply-review dt{
  font-family: var(--ff-klee);
  font-size: 0.82rem;
  color: var(--text-sec);
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(26,26,26,0.05);
}
.apply-review dd{
  margin: 0;
  padding: 0.55rem 0;
  font-size: 0.9rem;
  border-bottom: 1px solid rgba(26,26,26,0.05);
  word-break: break-word;
}
@media (max-width: 600px){
  .apply-review dt{ padding-bottom: 0; border: none; font-size: 0.75rem; }
  .apply-review dd{ padding-top: 0.2rem; padding-bottom: 0.8rem; }
}

.apply-side{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.apply-side-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1.2rem 1.3rem;
}
.apply-side-card h3{
  font-family: var(--ff-klee);
  font-size: 0.95rem;
  margin-bottom: 0.7rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
}
.apply-side-card ul{
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.85;
  color: var(--text-sec);
}
.apply-side-card li{
  padding: 0.15rem 0;
  padding-left: 1rem;
  position: relative;
}
.apply-side-card li::before{
  content: '·';
  position: absolute;
  left: 0;
  color: var(--klee-gold);
  font-weight: bold;
}
.apply-side-card p{
  font-size: 0.85rem;
  color: var(--text-sec);
  line-height: 1.7;
}
.apply-side-card a{
  color: var(--klee-terra);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.apply-side-trust{
  background: linear-gradient(180deg, #fdfaf2 0%, #faf3e2 100%);
  border-color: rgba(160,120,64,0.25);
}

/* ============================================================
   Thanks Page
   ============================================================ */
.thanks-shell{
  max-width: 720px;
  margin: 0 auto;
  padding: 4rem var(--px) 5rem;
}
.thanks-card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 3rem 2.5rem;
  text-align: center;
  box-shadow: 0 18px 60px -20px rgba(26,26,26,0.12);
}
.thanks-eyebrow{
  font-family: var(--ff-en);
  font-style: italic;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  color: var(--klee-gold);
  margin-bottom: 1rem;
}
.thanks-icon{ margin: 0 auto 1.5rem; display: block; }
.thanks-title{
  font-family: var(--ff-klee);
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.55;
  margin-bottom: 1.4rem;
}
.thanks-lead{
  font-size: 0.96rem;
  line-height: 1.95;
  color: var(--text-sec);
  margin-bottom: 1.5rem;
}
.thanks-id{
  display: inline-block;
  padding: 0.5rem 1rem;
  background: rgba(58,90,106,0.06);
  border-radius: 4px;
  font-size: 0.85rem;
  color: var(--text-sec);
  margin-bottom: 2rem;
}
.thanks-id code{
  font-family: var(--ff-num);
  font-size: 0.92rem;
  color: var(--text);
  background: transparent;
  padding: 0;
}
.thanks-next{
  text-align: left;
  background: #fafaf6;
  border-radius: 6px;
  padding: 1.4rem 1.6rem;
  margin-bottom: 2rem;
}
.thanks-next h2{
  font-family: var(--ff-klee);
  font-size: 1rem;
  margin-bottom: 0.8rem;
}
.thanks-next ol{
  margin: 0;
  padding-left: 1.2rem;
  font-size: 0.88rem;
  line-height: 2;
  color: var(--text-sec);
}
.thanks-next ol strong{
  font-family: var(--ff-klee);
  color: var(--text);
  font-weight: 500;
}
.thanks-actions{
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   Defense Manifest Section (経営層向けキラーコピー)
   ============================================================ */
.defense-manifest{
  padding: 5rem var(--px);
  background:
    radial-gradient(circle at 20% 30%, rgba(184,160,122,0.06), transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(154,90,58,0.06), transparent 50%),
    var(--klee-sumi);
  color: #f5f0e6;
  position: relative;
  overflow: hidden;
}
.defense-manifest::before{
  content: "";
  position: absolute;
  top: -100px; right: -100px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: rgba(212,144,122,0.08);
  filter: blur(60px);
  pointer-events: none;
}
.defense-manifest::after{
  content: "";
  position: absolute;
  bottom: -120px; left: -80px;
  width: 320px; height: 320px;
  background: rgba(184,160,122,0.06);
  filter: blur(80px);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  pointer-events: none;
}
.defense-manifest-inner{
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.defense-eyebrow{
  font-family: var(--ff-en);
  font-style: italic;
  font-size: 0.86rem;
  letter-spacing: 0.22em;
  color: var(--kc-s0);
  text-align: center;
  margin-bottom: 0.7rem;
}
.defense-title{
  font-family: var(--ff-klee);
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.5;
  text-align: center;
  margin-bottom: 1.4rem;
  color: #f5f0e6;
}
.defense-accent{
  display: inline-block;
  color: var(--kc-s1);
  background: linear-gradient(180deg, transparent 60%, rgba(193,122,90,0.18) 60%);
  padding: 0 0.3rem;
}
.defense-lead{
  text-align: center;
  font-size: 1.02rem;
  line-height: 2.1;
  color: rgba(245,240,230,0.85);
  font-family: var(--ff-jp);
  max-width: 760px;
  margin: 0 auto 3rem;
}
.defense-lead strong{
  color: var(--kc-s0);
  font-weight: 500;
  background: linear-gradient(180deg, transparent 65%, rgba(184,160,122,0.18) 65%);
  padding: 0 0.2rem;
}

.defense-stats{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-bottom: 3.2rem;
}
@media (max-width: 800px){ .defense-stats{ grid-template-columns: 1fr; } }
.defense-stat{
  background: rgba(245,240,230,0.04);
  border: 1px solid rgba(245,240,230,0.12);
  border-radius: 8px;
  padding: 1.6rem 1.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.defense-stat::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--kc-s0);
}
.defense-stat.is-warn::before{ background: var(--kc-s1); }
.defense-stat.is-danger::before{ background: var(--kc-s4); }
.defense-stat-num{
  display: block;
  font-family: var(--ff-num);
  font-size: 2.1rem;
  letter-spacing: 0;
  font-weight: 300;
  color: var(--kc-s0);
  line-height: 1.1;
  margin-bottom: 0.3rem;
}
.defense-stat.is-warn .defense-stat-num{ color: var(--kc-s1); font-size: 1.7rem; }
.defense-stat.is-danger .defense-stat-num{ color: var(--kc-s3); }
.defense-stat-unit{
  font-family: var(--ff-num);
  font-size: 0.82rem;
  color: rgba(245,240,230,0.6);
  margin-left: 0.2rem;
}
.defense-stat-label{
  display: block;
  font-family: var(--ff-klee);
  font-size: 0.9rem;
  color: rgba(245,240,230,0.92);
  margin: 0.5rem 0 0.4rem;
}
.defense-stat-sub{
  display: block;
  font-family: var(--ff-jp-sans);
  font-size: 0.72rem;
  color: rgba(245,240,230,0.5);
  line-height: 1.6;
}

.defense-message-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-bottom: 3rem;
}
@media (max-width: 900px){ .defense-message-grid{ grid-template-columns: 1fr; } }
.defense-message{
  background: rgba(245,240,230,0.05);
  border: 1px solid rgba(245,240,230,0.10);
  border-radius: 6px;
  padding: 1.5rem 1.6rem;
}
.defense-message-tag{
  display: inline-block;
  font-family: var(--ff-klee);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--kc-s0);
  padding-bottom: 0.6rem;
  margin-bottom: 0.7rem;
  border-bottom: 1px solid rgba(184,160,122,0.25);
}
.defense-message h3{
  font-family: var(--ff-klee);
  font-size: 1.25rem;
  line-height: 1.55;
  color: #f5f0e6;
  margin-bottom: 0.8rem;
}
.defense-message p{
  font-family: var(--ff-jp-sans);
  font-size: 0.85rem;
  line-height: 1.95;
  color: rgba(245,240,230,0.78);
}

.defense-cta{
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.defense-cta .btn-primary{
  background: var(--kc-s0);
  color: var(--klee-sumi);
  border-color: var(--kc-s0);
}
.defense-cta .btn-primary:hover{
  background: var(--kc-s3);
  border-color: var(--kc-s3);
}
.defense-cta .btn-ghost{
  color: rgba(245,240,230,0.9);
  border-color: rgba(245,240,230,0.35);
  background: transparent;
}
.defense-cta .btn-ghost:hover{
  background: rgba(245,240,230,0.06);
  border-color: rgba(245,240,230,0.6);
}

.defense-tagline{
  text-align: center;
  font-family: var(--ff-en);
  font-size: 1.05rem;
  color: var(--kc-s0);
  letter-spacing: 0.05em;
  margin: 0;
}
.defense-tagline em{
  font-style: italic;
  font-family: var(--ff-jp);
  color: rgba(245,240,230,0.78);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
}