/* ===== 今日の脳磨き 共通スタイル（白い明るい背景） ===== */
:root {
  --bg: #fff8ee; --card: #ffffff; --line: #e4e1d8; --text: #2b2a27; --sub: #6b675f; --muted: #9a958a;
  --accent: #0f6e56; --accent-bg: #e1f5ee; --gold: #8a5a10; --gold-bg: #fdf3dc; --danger: #b3261e;
  --line-green: #06c755; --r: 12px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: linear-gradient(180deg, #fff6e6 0%, #fffaf3 35%, #f1faf5 100%) fixed var(--bg); color: var(--text);
  font-family: "Hiragino Sans", "Yu Gothic UI", "Noto Sans JP", system-ui, sans-serif; font-size: 16px; line-height: 1.7; }
.wrap { max-width: 480px; margin: 0 auto; padding: 14px 16px 40px; }
.top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.brand img { width: 28px; height: 28px; border-radius: 7px; }
.pill { font-size: 12px; padding: 3px 10px; border-radius: 99px; background: #e6f4ea; color: #1e6b35; white-space: nowrap; }
.hero { position: relative; height: 170px; border-radius: 14px; overflow: hidden; background: #f5c47a; }
.hero .bg { position: absolute; inset: -8%; background: linear-gradient(135deg, #f5c47a, #e8805a) center/cover no-repeat;
  animation: kb 16s ease-in-out infinite alternate; }
@keyframes kb { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.14) translate(-3%, -2%); } }
@media (prefers-reduced-motion: reduce) { .hero .bg { animation: none; } }
.hero .title { position: absolute; left: 14px; bottom: 12px; margin: 0; color: #fff; font-weight: 700; font-size: 21px;
  text-shadow: 0 1px 6px rgba(0,0,0,.45); }
.sub { text-align: center; color: var(--sub); font-size: 14px; margin: 8px 0 0; }
.tag { display: inline-block; font-size: 12px; padding: 3px 12px; border-radius: 99px; background: var(--accent-bg); color: var(--accent); }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; margin-top: 12px; }
.lb { font-size: 13px; color: var(--sub); margin: 0 0 6px; }
.big { font-size: 19px; font-weight: 700; margin: 0; }
.gold { background: var(--gold-bg); border-radius: 10px; padding: 12px; margin-top: 10px; }
.gold .lb { color: var(--gold); font-weight: 700; }
.ura p { margin: 0 0 10px; line-height: 1.85; }
.ura p:last-child { margin: 0; }
textarea, input[type=text], input[type=password], input[type=url], select {
  width: 100%; font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--text); }
textarea { resize: vertical; }
button, .btn { font: inherit; font-size: 15px; border: 1px solid var(--line); background: #fff; color: var(--text);
  border-radius: 10px; padding: 9px 14px; cursor: pointer; text-decoration: none; display: inline-block; text-align: center; }
button:disabled { opacity: .45; cursor: default; }
.primary { background: var(--accent); border-color: var(--accent); color: #fff; width: 100%; padding: 12px; font-size: 16px; font-weight: 700; margin-top: 14px; }
.line { background: var(--line-green); border-color: var(--line-green); color: #fff; width: 100%; font-weight: 700; }
.row { display: flex; gap: 8px; align-items: center; }
.row > * { flex: 1; }
.note { font-size: 12px; color: var(--muted); margin: 6px 0 0; }
.err { font-size: 13px; color: var(--danger); margin: 6px 0 0; }
.notice { background: var(--accent-bg); border: 1px solid #b7e4d3; color: var(--accent); }
.notice p { margin: 0 0 6px; font-size: 14px; }
.hidden { display: none !important; }
details summary { cursor: pointer; color: var(--sub); font-size: 14px; }
.memo { border-bottom: 1px solid var(--line); padding: 8px 0; font-size: 14px; }
.memo small { color: var(--muted); display: block; }
.small { font-size: 13px; padding: 6px 10px; }
.card + .hero { margin-top: 12px; }
.hero .bg video { width: 100%; height: 100%; object-fit: cover; display: block; }
.gold .body p { margin: 0 0 8px; line-height: 1.85; }
.gold .body p:last-child { margin: 0; }
.kentei { display: block; width: 100%; text-align: left; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-top: 6px;
  font-size: 14px; line-height: 1.6; color: var(--text); background: #fff; }
.kentei.go { border-color: #b7e4d3; }
.kentei.go::after { content: " ↗"; color: var(--accent); }
.copied { margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--accent-bg); color: var(--accent); font-size: 14px; font-weight: 700; }
.how { margin-top: 10px; font-size: 13px; color: var(--sub); }
.how p { margin: 0 0 2px; }
.kentei b { color: var(--accent); }

/* 今日の業務連絡：担当者からの連絡 */
.gnews { background: var(--bg); border-radius: 10px; padding: 10px 12px; }
.gnews p { margin: 0 0 6px; }
.gnews p:last-child { margin: 0; }

/* 脳磨き研修の受講（受講済み・受講中・まだ）：小さなプルダウン */
.kenrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kenrow select { width: auto; flex: 0 0 auto; padding: 4px 8px; font-size: 14px; }

/* みんなの書き込み：書き込まれた順に番号・大きめの文字 */
.post { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.post:last-child { border-bottom: none; }
.post .pno { flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--accent-bg); color: var(--accent); font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.post .pbody { flex: 1; min-width: 0; }
.post small { color: var(--muted); font-size: 12px; display: flex; align-items: center; }
.post p { margin: 2px 0 0; font-size: 18px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.kind { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--accent-bg); color: var(--accent); font-size: 14px; font-weight: 700; }

/* 動画：上の写真の場所で再生 */
.hero.play { height: auto; aspect-ratio: 16 / 9; background: #000; }
.hero.play .bg, .hero.play .title { display: none; }
.hero .player { position: absolute; inset: 0; }
.hero .player iframe { width: 100%; height: 100%; border: 0; display: block; }
.hero .vclose { position: absolute; top: 8px; right: 8px; z-index: 2; background: rgba(0,0,0,.55); color: #fff; border-color: transparent; padding: 4px 10px; }
.vrow { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; }
.vrow select { width: auto; max-width: 64%; padding: 4px 8px; font-size: 14px; }
.myvid { margin-top: 6px; font-size: 13px; color: var(--sub); }
.myvid summary { cursor: pointer; }
.myvid .mv { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-top: 8px; }
.vnew { display: inline-block; margin-left: 4px; font-size: 11px; font-weight: 700; color: #fff; background: #e8805a; border-radius: 99px; padding: 1px 8px; vertical-align: 1px; }
.vrow > .lb { white-space: nowrap; }

/* タイマー（朝活アプリと同じ：数字だけが浮かぶ。指は下の画面に届く） */
.tmsg { margin: 0 0 10px; font-size: 14px; line-height: 1.7; color: var(--accent); background: var(--accent-bg); border-radius: 10px; padding: 8px 12px; }
.tmarks { font-size: 13px; color: var(--sub); text-align: center; }
.tsmall { font-size: 44px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; margin: 6px 0 10px; color: var(--accent); }
.tbig { position: fixed; left: 0; right: 0; bottom: calc(40px + env(safe-area-inset-bottom)); z-index: 50; pointer-events: none;
  text-align: center; font-size: 96px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums;
  color: rgba(15,110,86,.38); text-shadow: 0 0 2px rgba(255,255,255,.6); }
.tbig.glow, .tsmall.glow { animation: tglow 1.8s ease-out; }
@keyframes tglow {
  0% { color: rgba(255,170,40,.95); text-shadow: 0 0 18px rgba(255,200,80,1), 0 0 40px rgba(255,170,40,.9); }
  100% { text-shadow: 0 0 2px rgba(255,255,255,.6); }
}

/* 一番下：今日もありがとう */
.thanks { text-align: center; padding: 30px 0 60px; opacity: 0; transform: translateY(24px); transition: opacity 1.6s ease, transform 1.6s ease; }
.thanks.show { opacity: 1; transform: none; }
.thanks img { width: 150px; height: 150px; object-fit: contain; display: block; margin: 0 auto 8px; }
.thanks > p { font-size: 26px; font-weight: 700; color: var(--accent); margin: 0 0 14px; letter-spacing: .08em; }
.thanks .myimg { font-size: 13px; color: var(--muted); text-align: left; max-width: 320px; margin: 0 auto; }
.thanks .myimg summary { text-align: center; cursor: pointer; }
.thanks .myimg input { margin-top: 8px; font-size: 14px; }
.vrow select { flex: 1 1 auto; min-width: 0; max-width: none; }
.thanks img { mix-blend-mode: multiply; } /* JPEG の白い背景を、ページの背景になじませる */

/* 脳磨き研修の受講に合わせた背景の色（社員の画面） */
body.k-not  { background: linear-gradient(180deg, #fff7d6 0%, #fffbea 45%, #fffdf5 100%) fixed; }
body.k-now  { background: linear-gradient(180deg, #ffe6cc 0%, #fff1e2 45%, #fff9f2 100%) fixed; }
body.k-done { background: linear-gradient(180deg, #f6dde1 0%, #fbecee 45%, #fff7f8 100%) fixed; }

/* 検定：朝活アプリと同じ（選ぶ → 大きく出る → 検定サイトで開く） */
.kentei { display: flex; align-items: flex-start; gap: 10px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin-top: 8px; font-size: 16px; line-height: 1.6; }
.kentei::after { content: none !important; }
.kentei.sel { border: 2px solid var(--accent); background: #eef8f3; }
.kentei .klv { flex: 0 0 auto; font-size: 13px; color: #2a5ea8; background: #e8f0fb; border-radius: 6px; padding: 2px 8px; margin-top: 2px; }
.kentei .kno { flex: 0 0 auto; font-size: 14px; color: var(--sub); margin-top: 3px; }
.kentei .ktt { flex: 1; color: var(--text); }
.kpick { margin-top: 12px; background: var(--accent-bg); border-radius: 14px; padding: 14px 16px; }
.kpick p { margin: 0; }
.kpick-l { font-size: 14px; color: var(--sub); }
.kpick-k { font-size: 30px; font-weight: 800; color: var(--accent); margin: 4px 0 !important; }
.kpick-t { font-size: 17px; color: var(--accent); line-height: 1.6; }
#kOpen { margin-top: 12px; }
.how .how-h { font-weight: 700; color: var(--text); margin-bottom: 4px; }
/* iPhone の Safari の下のバーに隠れないように */
.tbig { bottom: calc(110px + env(safe-area-inset-bottom)); }
.thanks { padding-bottom: 140px; }

/* 朝礼の流れの項目（はじめのことば・おわりのことば・担当者が足した項目） */
.flowbig p { font-size: 20px; font-weight: 700; line-height: 1.7; margin: 0 0 4px; color: var(--accent); }
.flowtxt p { font-size: 16px; line-height: 1.8; margin: 0 0 6px; }

/* 脳磨きからのご案内 */
.adcard { border: 1px solid #f0d9a8; background: linear-gradient(180deg, #fffdf7, #fff); }
.adcard img { width: 100%; border-radius: 10px; display: block; margin-bottom: 10px; }
.adcard .adt { font-size: 18px; font-weight: 700; margin: 0 0 6px; color: var(--text); }
.adcard .adx p { margin: 0 0 6px; font-size: 15px; line-height: 1.8; color: var(--sub); }
.adcard .adbtn { display: block; width: 100%; margin-top: 8px; text-align: center; color: #fff; }

/* 公式LINEのご案内（社員の画面：経営者を選んだ人だけ） */
.linecard { position: relative; border: 1px solid #b7e4c7; background: linear-gradient(180deg, #f3fbf5, #fff); }
.linecard .lclose { position: absolute; top: 10px; right: 10px; padding: 3px 10px; }
.lineb { display: block; width: 100%; text-align: center; background: #06c755; border-color: #06c755; color: #fff; font-weight: 700; padding: 12px; margin-top: 6px; }
.remember { margin-top: 10px; font-size: 15px; }
.remember input { width: 20px; height: 20px; }

/* はじめて開いたときの役割の問いかけ */
.roleask { border: 1px solid #b7e4d3; background: linear-gradient(180deg, #eef8f3, #fff); }
.rolebtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rolebtns button { margin: 0; padding: 11px 6px; font-size: 15px; }
.rolebtns button.later { color: var(--muted); }