@import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@500;700;900&display=swap");
/*
 * 共通テーマ(運用ページと同じ見た目にそろえる)。
 * 各ページの <style> の後に読み込み、色・ヘッダー・カード・ボタンを上書きする。
 * 色を変えたいときは、この :root の値を変える。
 */
:root{
  --bg:#f5f7fa; --surface:#ffffff; --ink:#1f2937; --ink-mute:#6b7280; --line:#e5e7eb;
  --indigo-50:#eff6ff; --indigo-500:#1d4ed8; --indigo-700:#1e40af;
  --amber:#b45309; --amber-bg:#fef3c7; --teal:#15803d; --teal-bg:#dcfce7;
  --error:#b91c1c; --error-bg:#fee2e2; --slate:#6b7280; --slate-bg:#f1f5f9;
  --display:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI",Meiryo,sans-serif;
  --sans:var(--display); --mono:var(--display);
  --shadow:0 1px 3px rgba(15,23,42,.06), 0 6px 16px rgba(15,23,42,.05);
}
html{-webkit-text-size-adjust:100%;}
body{background:var(--bg); background-attachment:scroll; font-size:15px; line-height:1.7;}
:focus-visible{outline:3px solid #93c5fd; outline-offset:2px;}

/* ---------- ヘッダー(青→水色のグラデーション、小さな見出し+大きなタイトル) ---------- */
header{background:linear-gradient(90deg,#1d4ed8,#0e7490); box-shadow:0 4px 12px rgba(15,23,42,.16); color:#fff;}
.nav{padding:14px 0 12px; gap:10px; flex-wrap:wrap; align-items:center;}
.brand{display:flex; flex-direction:column; align-items:flex-start; gap:0; font-family:var(--sans); color:#fff;}
.brand-kicker{font-size:12px; font-weight:600; opacity:.85; letter-spacing:.04em; line-height:1.6;}
.brand-title{font-size:22px; font-weight:800; line-height:1.3;}
.nav-links{gap:6px; align-items:center; flex-wrap:wrap; justify-content:flex-end;}
.nav-links a{color:#fff; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.3); border-radius:999px; padding:3px 12px; font-size:12.5px; white-space:nowrap;}
.nav-links a:hover{background:rgba(255,255,255,.28); text-decoration:none;}
.nav-links a.hidden{display:none;}

/* ---------- カード ---------- */
.card, .form-card, .readonly-card, .profile-card, .stat, .calendar-card, .toolbar, .log-entry,
.campaign-card, .cert-card{border-radius:16px; box-shadow:var(--shadow); border-top-color:transparent; border-right-color:transparent; border-bottom-color:transparent;}
.card, .form-card, .readonly-card, .profile-card, .stat, .calendar-card, .toolbar, .log-entry{border-left-color:transparent;}
.campaign-card:hover, .cert-card:hover, .card:hover{transform:none; box-shadow:0 2px 6px rgba(15,23,42,.08), 0 10px 22px rgba(15,23,42,.08);}
.week-table{border-radius:16px; box-shadow:var(--shadow); border-color:transparent;}
.week-table th, .ro-label, .ai-summary-label{text-transform:none; letter-spacing:0;}
.empty-note{border-radius:16px;}
.banner .inner{border-radius:12px; font-size:14px;}
.notice-card{border-radius:12px;}
.ai-summary{background:var(--indigo-50); border:none; box-shadow:none; border-radius:12px;}
.ai-summary-label{color:var(--indigo-700);}

/* ---------- 見出し・数字 ---------- */
.section-label{font-size:15px; font-weight:800; color:var(--ink); letter-spacing:0; text-transform:none; margin-bottom:10px;}
.section-label::before{display:none;}
.stat-value{font-size:20px; font-weight:800; color:var(--indigo-500); font-variant-numeric:tabular-nums; line-height:1.4;}
.stat-label{font-size:12px;}
.log-date, .log-duration, .week-table td.week-range{font-variant-numeric:tabular-nums;}

/* ---------- ボタン ---------- */
.btn{background:var(--indigo-500); box-shadow:none; border-radius:10px; font-weight:700; transition:background .15s ease;}
.btn:hover{background:var(--indigo-700); transform:none; box-shadow:none; text-decoration:none;}
.btn:disabled{opacity:.55; cursor:wait;}
.btn-outline{background:#fff; color:var(--ink); border:1px solid var(--line);}
.btn-outline:hover{background:#f9fafb;}
.btn-amber{background:#ea580c;}
.btn-amber:hover{background:#c2410c;}
.btn-danger{background:#fff; color:var(--error); border:1px solid #fca5a5; border-radius:10px;}
.btn-danger:hover{background:var(--error-bg);}
.btn-danger:disabled{opacity:.4; cursor:not-allowed;}
.cal-day.studied{background:var(--indigo-500);}
.cal-legend .dot{background:var(--indigo-500);}
.avatar, .avatar-sm{background-color:#1d4ed8; background-image:linear-gradient(135deg,#1d4ed8,#0e7490); box-shadow:none;}
.avatar-edit-btn{background:var(--indigo-500);}

/* ---------- 入力欄・ラベル類 ---------- */
.field input, .field textarea, .search-input, .exam-date-row input{border-radius:10px;}
.field input:focus, .field textarea:focus, .search-input:focus{border-color:var(--indigo-500); box-shadow:0 0 0 3px #bfdbfe;}
.status-badge, .status-pill, .approach-badge, .chip, .cert-chip, .held-cert-chip{border-radius:999px; font-weight:700;}
.chip{font-weight:600;}
.tabs{border-radius:999px; padding:4px; gap:4px;}
.tabs .tab{border-radius:999px; padding:9px 12px; font-weight:700;}
.account-type-card{border-radius:12px;}
.account-type-card.selected{box-shadow:0 0 0 3px #bfdbfe;}
/* 削除・退会の枠は目立たせすぎない(赤いのはボタンだけ) */
.danger-zone{border-radius:16px; border-color:var(--line); background:var(--surface); margin-top:8px;}
.danger-zone h2{color:var(--ink); font-size:14px;}
.danger-zone input{border-color:var(--line); border-radius:10px;}
.leave{margin-top:28px;}
.leave summary{font-size:13px; color:var(--ink-mute); cursor:pointer; width:fit-content; padding:4px 0;}
.leave summary:hover{color:var(--ink); text-decoration:underline;}
.leave[open] summary{margin-bottom:4px;}

/* ---------- フッター ---------- */
footer{border-top:none; padding:8px 0 32px;}
.foot-row{justify-content:center; font-size:12px;}

/* ---------- 規約などの文章ページ ---------- */
.doc{max-width:760px; margin:0 auto; padding:16px 16px 40px;}
.doc .card{background:var(--surface); padding:20px; margin-bottom:12px;}
.doc h2{font-size:16px; margin:0 0 8px;}
.doc .notice{background:var(--amber-bg); color:#92400e; border-radius:12px; padding:12px 14px; font-size:14px; margin-bottom:12px;}

@media (max-width:640px){
  .wrap{padding:0 16px;}
  .nav-links{display:flex !important;}
  .brand-title{font-size:20px;}
  section{padding:18px 0;}
}
.foot-row{display:flex; gap:16px; flex-wrap:wrap;}
.foot-row a{color:var(--ink-mute); text-decoration:underline;}
.msg{border-radius:12px;}
.msg.success{background:var(--teal-bg); color:var(--teal);}
.search-row select:focus{outline:none; border-color:var(--indigo-500); box-shadow:0 0 0 3px #bfdbfe;}
button.chip{font-family:inherit;}


/* ============================================================
   明るい見た目(76章)。トップページと同じ色・文字・ボタンにそろえる。
   白い紙、濃い文字、藍のボタン、若葉色の「続けた印」、見出しの蛍光ペン。
   色を変えたいときは、この :root の値を変える。
   ============================================================ */
:root{
  --bg:#f5f8f6; --surface:#ffffff; --ink:#17202e; --ink-mute:#5b6676; --line:#dfe5e3;
  --indigo-50:#eaf0fc; --indigo-500:#2447b8; --indigo-700:#1b3690;
  --leaf:#12a36d; --leaf-pale:#e6f6ee; --marker:#d7f26b;
  --teal:#0b7a52; --teal-bg:#e6f6ee;
  --head:"Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI",Meiryo,sans-serif;
  --shadow:0 1px 2px rgba(23,32,46,.05);
}
body{background:var(--bg); color:var(--ink);}
a{color:var(--indigo-500);}
:focus-visible{outline:3px solid #9db4f0; outline-offset:2px;}

/* ヘッダー: トップページと同じ白い帯 */
header{background:var(--surface); box-shadow:none; border-bottom:1px solid var(--line); color:var(--ink);}
header .nav{padding:12px 28px 11px;}
.brand{color:var(--ink);}
.brand-kicker{font-family:var(--head); font-weight:900; font-size:13px; opacity:1; letter-spacing:.04em; display:flex; align-items:center; gap:7px; color:var(--ink);}
.brand-kicker::before{content:""; width:11px; height:11px; border-radius:3px; background:var(--leaf);}
.brand-title{font-family:var(--head); font-weight:900; font-size:22px; letter-spacing:.01em;}
.nav-links a{background:var(--surface); color:var(--ink); border:1.5px solid var(--line); border-radius:10px; padding:4px 13px; font-weight:700;}
.nav-links a:hover{background:var(--ink); border-color:var(--ink); color:#fff; text-decoration:none;}

/* カード: 影ではなく細い線で区切る */
.card, .form-card, .readonly-card, .profile-card, .stat, .calendar-card, .toolbar, .log-entry, .week-table, .danger-zone{border:1px solid var(--line); box-shadow:none; border-radius:14px;}
.campaign-card, .cert-card{border-top:1px solid var(--line); border-right:1px solid var(--line); border-bottom:1px solid var(--line); box-shadow:none; border-radius:14px;}
.campaign-card:hover, .cert-card:hover, .card:hover{box-shadow:0 6px 18px rgba(23,32,46,.08);}
.ai-summary{background:var(--indigo-50);}

/* 見出し: 蛍光ペンの線 */
h1, h2, h3, .section-label, .profile-name, .hero h1{font-family:var(--head);}
h1, h2, h3{word-break:auto-phrase; overflow-wrap:anywhere; text-wrap:balance;}
.section-label{display:inline-block; font-size:17px; font-weight:900; background:linear-gradient(transparent 62%, var(--marker) 62%, var(--marker) 94%, transparent 94%); padding:0 .15em; margin-left:-.15em;}
.stat-value{font-family:var(--head); font-weight:900; font-size:22px; color:var(--ink);}

/* ボタン */
.btn{font-family:var(--head); background:var(--indigo-500); border-radius:10px;}
.btn:hover{background:var(--indigo-700);}
.btn-outline{background:var(--surface); color:var(--ink); border:1.5px solid var(--line);}
.btn-outline:hover{background:var(--bg);}
.btn-amber{background:#e2620d;}
.btn-amber:hover{background:#bd4f07;}

/* 続けた印は若葉色(カレンダー・アイコン) */
.cal-day.studied{background:var(--leaf); color:#fff;}
.cal-legend .dot{background:var(--leaf);}
.avatar, .avatar-sm{background-color:var(--leaf); background-image:none;}
.avatar-edit-btn{background:var(--indigo-500);}
.tabs .tab.active{background:var(--indigo-500); color:#fff;}
.chip.active{background:var(--indigo-500); border-color:var(--indigo-500); color:#fff;}
.field input:focus, .field textarea:focus, .search-input:focus, .search-row select:focus{border-color:var(--indigo-500); box-shadow:0 0 0 3px #c9d6f7;}
.account-type-card.selected{border-color:var(--indigo-500); box-shadow:0 0 0 3px #c9d6f7;}

@media (max-width:640px){
  header .nav{padding:11px 16px 10px;}
  .nav-links{justify-content:flex-start;}
  .nav-links a{padding:3px 11px; font-size:12px;}
}

/* ---------- 「お問い合わせ」への入口を目立たせる(80章) ---------- */
/* 各ページの右上: ほかのボタンと区別がつくよう、藍色の地にする */
.nav-links a.nav-help{background:var(--indigo-50); border-color:var(--indigo-500); color:var(--indigo-700);}
.nav-links a.nav-help:hover{background:var(--indigo-500); border-color:var(--indigo-500); color:#fff;}
/* ページの下: 小さな下線つきの文字だったものを、ボタンの形にする */
footer{border-top:1px solid var(--line); margin-top:28px; padding:20px 0 32px;}
.foot-row{font-size:13px; align-items:center; gap:10px 16px;}
.foot-row a[href^="contact.html"]{color:var(--indigo-700); background:var(--surface); border:1.5px solid var(--indigo-500); border-radius:10px; padding:6px 14px; font-weight:700; text-decoration:none;}
.foot-row a[href^="contact.html"]::before{content:"✉ ";}
.foot-row a[href^="contact.html"]:hover{background:var(--indigo-500); color:#fff;}
/* 登録・ログイン画面の下 */
.help-box{margin-top:18px; border:1.5px solid var(--indigo-500); background:var(--indigo-50); border-radius:12px; padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.help-box p{font-size:13.5px; color:var(--ink);}
.help-box a{font-weight:700; font-size:14px; color:#fff; background:var(--indigo-500); border-radius:10px; padding:7px 14px; text-decoration:none; white-space:nowrap;}
.help-box a:hover{background:var(--indigo-700); text-decoration:none;}

/* ---- 82章: アプローチ(企業様と学習者のやり取り)の一覧。マイページ・企業様マイページ・やり取りのページで共通 ---- */
.nav-links a .nav-badge{display:inline-block; background:#d92d20; color:#fff; border-radius:999px; font-size:11px; font-weight:800; line-height:1.5; padding:0 6px; margin-left:5px; vertical-align:1px;}
.ap-list{display:flex; flex-direction:column; gap:10px;}
.ap-row{display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px 16px; color:var(--ink); text-decoration:none;}
.ap-row:hover{border-color:var(--indigo-500); text-decoration:none;}
.ap-row.unread{border-color:var(--indigo-500); background:var(--indigo-50);}
.ap-ico{flex:none; width:42px; height:42px; border-radius:12px; background:var(--indigo-50); color:var(--indigo-700); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:17px;}
.ap-row.unread .ap-ico{background:var(--indigo-500); color:#fff;}
.ap-main{flex:1; min-width:0;}
.ap-name{font-weight:800; font-size:15px; overflow-wrap:anywhere;}
.ap-last{font-size:13px; color:var(--ink-mute); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ap-side{flex:none; text-align:right; font-size:12px; color:var(--ink-mute); white-space:nowrap;}
.ap-unread{display:inline-block; background:#d92d20; color:#fff; border-radius:999px; font-size:12px; font-weight:800; padding:1px 8px; margin-top:2px;}
.ap-state{display:inline-block; border:1px solid var(--line); border-radius:999px; font-size:11.5px; padding:0 8px; margin-left:6px; color:var(--ink-mute); font-weight:400; white-space:nowrap;}
.ap-empty{font-size:14px; color:var(--ink-mute); padding:18px; background:var(--surface); border:1px dashed var(--line); border-radius:14px;}
.ap-box{background:var(--surface); border:1.5px solid var(--indigo-500); border-radius:16px; padding:20px;}
.ap-box h2{font-size:17px; margin-bottom:6px;}
.ap-box .ap-note{font-size:13px; color:var(--ink-mute); margin-bottom:12px;}
.ap-box textarea{width:100%; min-height:130px; padding:11px 12px; border:1px solid var(--line); border-radius:10px; font-family:inherit; font-size:15px; line-height:1.7; resize:vertical; background:#fff; color:var(--ink);}
.ap-box textarea:focus{outline:none; border-color:var(--indigo-500); box-shadow:0 0 0 3px #c9d6f7;}
.ap-box .ap-btn{display:inline-block; margin-top:12px; padding:11px 24px; border:none; border-radius:10px; font-size:15px; font-weight:700; background:var(--indigo-500); color:#fff; cursor:pointer; font-family:inherit; text-decoration:none;}
.ap-box .ap-btn:hover{background:var(--indigo-700); text-decoration:none;}
.ap-box .ap-btn:disabled{opacity:.55; cursor:wait;}
.ap-box .ap-msg{margin-top:10px; font-size:13.5px; color:#b91c1c;}
.ap-box.muted{border:1px dashed var(--line);}

/* ---- 85章: メッセージの枠(右側に置く別枠)と、横に並べるレイアウト ---- */
.ap-panel{background:var(--surface); border:1.5px solid var(--indigo-500); border-radius:16px; overflow:hidden;}
.ap-panel-head{display:flex; align-items:center; gap:8px; padding:12px 14px; background:var(--indigo-50); border-bottom:1px solid #c9d6f7;}
.ap-panel-title{font-family:var(--head); font-weight:900; font-size:15px; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ap-panel-link{margin-left:auto; font-size:12.5px; font-weight:700; white-space:nowrap;}
.ap-panel-back{flex:none; width:30px; height:30px; border-radius:8px; border:1px solid #c9d6f7; background:#fff; color:var(--indigo-700); font-size:16px; cursor:pointer; font-family:inherit; line-height:1;}
.ap-panel-back:hover{background:var(--indigo-500); color:#fff;}
.ap-panel-body{padding:12px;}
.ap-panel-body .ap-row{padding:11px 12px; border-radius:12px;}
.ap-panel-body .ap-ico{width:36px; height:36px; font-size:15px; border-radius:10px;}
.ap-panel-body .ap-name{font-size:14px;}
.ap-panel-empty{font-size:13px; color:var(--ink-mute); padding:10px 4px; line-height:1.7;}
.ap-panel-msgs{display:flex; flex-direction:column; gap:8px; max-height:380px; overflow-y:auto; padding:2px 2px 8px;}
.ap-bub{max-width:90%; border-radius:14px; padding:9px 11px; font-size:13.5px; line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; border:1px solid var(--line); background:var(--bg);}
.ap-bub.me{align-self:flex-end; background:var(--indigo-50); border-color:#c9d6f7; border-bottom-right-radius:4px;}
.ap-bub.them{align-self:flex-start; border-bottom-left-radius:4px;}
.ap-bub-who{display:block; font-size:11px; color:var(--ink-mute); margin-bottom:2px; white-space:normal;}
.ap-bub-read{display:block; font-size:10.5px; color:var(--ink-mute); text-align:right; margin-top:2px;}
.ap-panel-form{border-top:1px solid var(--line); padding-top:10px;}
.ap-panel-form textarea{width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:10px; font-family:inherit; font-size:14px; line-height:1.6; resize:vertical; background:#fff; color:var(--ink);}
.ap-panel-form textarea:focus{outline:none; border-color:var(--indigo-500); box-shadow:0 0 0 3px #c9d6f7;}
.ap-panel-send{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:6px;}
.ap-panel-err{font-size:12px; color:#b91c1c;}
.ap-btn-s{flex:none; padding:7px 18px; border:none; border-radius:9px; background:var(--indigo-500); color:#fff; font-weight:700; font-size:13.5px; cursor:pointer; font-family:inherit;}
.ap-btn-s:hover{background:var(--indigo-700);}
.ap-btn-s:disabled{opacity:.55; cursor:wait;}
.ap-panel-closed{font-size:12.5px; background:#fff7e6; border:1px solid #f1d9a5; color:#7a5200; border-radius:10px; padding:8px 10px;}
.side-grid{display:flex; flex-direction:column; gap:26px;}
.side-grid > .side-panel{order:-1;}
@media (min-width:1000px){
  body.side-layout .wrap{max-width:1160px;}
  .side-grid{display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:28px; align-items:start;}
  .side-grid > .side-main{grid-column:1; grid-row:1; min-width:0;}
  .side-grid > .side-panel{order:0; grid-column:2; grid-row:1; position:sticky; top:16px;}
}