@charset "utf-8";
/* コンサル対応システム — クライアント側 */

:root{
  --ink:#14243f; --ink2:#2a3a57; --paper:#fbfaf8; --jade:#1f6f5c; --jade-dk:#19604f;
  --rule:#dfdbd2; --muted:#6a7180; --white:#fff; --warn:#b23a2e;
  --serif:"Yu Mincho","YuMincho","Hiragino Mincho ProN","HGS明朝E","MS PMincho",serif;
  --sans:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic","YuGothic","Meiryo",system-ui,sans-serif;
}
*{box-sizing:border-box}
/* hidden 属性を付けた要素は必ず隠す（.spin のようにクラスで display を指定している場合の対策・V0.03L07） */
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{background:var(--paper);color:#1b1f27;font-family:var(--sans);font-size:15px;line-height:1.9;
     -webkit-text-size-adjust:100%}
a{color:var(--jade)}
h1,h2,h3{font-family:var(--serif);color:var(--ink);font-weight:600;line-height:1.4}

/* 上部バー */
/* スクロールしても上部バーが残るようにした（V0.03L07） */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
        padding:14px 24px;background:var(--ink);color:#fff;position:sticky;top:0;z-index:20}
.brand{font-family:var(--serif);font-size:17px;color:#fff;text-decoration:none;letter-spacing:.04em}
.topnav{display:flex;gap:18px;flex-wrap:wrap}
.topnav a{color:#c9d2e2;text-decoration:none;font-size:14px;padding-bottom:2px;border-bottom:1px solid transparent}
.topnav a:hover{color:#fff}
.topnav a.on{color:#fff;border-bottom-color:var(--jade)}
.topnav a.quiet{color:#8e9ab1}

/* ヒーロー */
.hero{position:relative;min-height:58vh;display:flex;align-items:flex-end;overflow:hidden;
      background:linear-gradient(160deg,#0d1830 0%,#14243f 42%,#1d3a55 78%,#1f6f5c 160%)}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-grid{position:absolute;inset:0;z-index:1;opacity:.30;
  background-image:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px);
  background-size:34px 34px}
.hero-glow{position:absolute;z-index:1;width:70vw;height:70vw;left:-10vw;top:-30vw;border-radius:50%;
  background:radial-gradient(circle,rgba(31,111,92,.55) 0%,rgba(31,111,92,0) 62%);
  animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(18vw,10vw,0)}}
@media (prefers-reduced-motion:reduce){.hero-glow{animation:none}}
.hero-body{position:relative;z-index:2;padding:56px 24px 44px;max-width:940px;margin:0 auto;width:100%;color:#fff}
.hero-eyebrow{font-size:13px;color:#a9c7bd;margin:0 0 10px}
.hero-title{font-family:var(--serif);font-size:clamp(26px,4.4vw,42px);color:#fff;margin:0 0 14px;line-height:1.35}
.hero-lead{max-width:34em;color:#dbe3ef;margin:0}

/* 本文 */
.wrap{max-width:940px;margin:0 auto;padding:34px 24px 60px}
.wrap-wide{max-width:1100px}
.sec{margin:0 0 44px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
          border-bottom:1px solid var(--rule);padding-bottom:8px;margin:0 0 18px}
.sec-head h2{font-size:19px;margin:0}
.sec-head a{font-size:13px;text-decoration:none}

/* レポートカード */
.report-lead{background:var(--white);border:1px solid var(--rule);border-top:3px solid var(--ink);
             padding:26px 26px 22px}
.report-lead .period{font-size:13px;color:var(--muted);margin:0 0 6px}
.report-lead h3{font-size:23px;margin:0 0 10px}
.report-lead .meta{font-size:13px;color:var(--muted);margin:0 0 18px}
.report-empty{background:var(--white);border:1px dashed var(--rule);padding:26px;color:var(--muted)}

.rlist{list-style:none;margin:0;padding:0}
.rlist li{display:flex;align-items:center;justify-content:space-between;gap:14px;
          border-bottom:1px solid var(--rule);padding:13px 2px}
.rlist .t{font-family:var(--serif);font-size:16px;color:var(--ink)}
.rlist .s{font-size:12.5px;color:var(--muted)}

/* 相談 */
.ask{background:var(--white);border:1px solid var(--rule);padding:22px}
.ask textarea{width:100%;min-height:130px;border:1px solid var(--rule);border-radius:2px;padding:13px;
              font-family:var(--sans);font-size:15px;line-height:1.85;resize:vertical;background:#fff}
.ask textarea:focus{outline:2px solid var(--jade);outline-offset:1px}
.ask-note{font-size:12.5px;color:var(--muted);margin:10px 0 0}

.thread{background:var(--white);border:1px solid var(--rule);padding:22px;margin:0 0 18px}
.bubble{margin:0 0 18px}
.bubble .who{font-size:12px;color:var(--muted);margin:0 0 5px}
.bubble .body{border-left:3px solid var(--rule);padding:2px 0 2px 14px;white-space:pre-wrap}
.bubble.ai .body{border-left-color:var(--jade)}
.badge-ai{display:inline-block;font-size:11px;color:var(--jade);border:1px solid var(--jade);
          border-radius:2px;padding:1px 6px;margin-left:6px}

/* 部品 */
.btn{display:inline-block;background:var(--jade);color:#fff;border:0;border-radius:2px;
     padding:11px 22px;font-size:14.5px;font-family:var(--sans);cursor:pointer;text-decoration:none}
.btn:hover{background:#19604f}
.btn-quiet{background:transparent;color:var(--ink);border:1px solid var(--rule)}
.btn-quiet:hover{background:#f1efe9}
.btn:disabled{opacity:.5;cursor:default}
.msg{padding:12px 16px;border-radius:2px;margin:0 0 18px;font-size:14px}
.msg-ok{background:#e9f2ee;border:1px solid #bcd8ce;color:#175243}
.msg-warn{background:#fdf5e6;border:1px solid #e6d3a8;color:#7a5a15}
.msg-error{background:#fbecea;border:1px solid #e6bcb5;color:#8c2f22}
.quiet{color:var(--muted)}
.foot{border-top:1px solid var(--rule);padding:20px 24px;display:flex;justify-content:space-between;
      font-size:12.5px;color:var(--muted);max-width:940px;margin:0 auto}

/* ログイン */
.login-shell{position:relative;min-height:100vh;display:flex;flex-direction:column;
             background:linear-gradient(160deg,#0d1830 0%,#14243f 45%,#1d3a55 80%,#1f6f5c 165%)}
.login-inner{position:relative;z-index:2;flex:1;display:flex;align-items:center;justify-content:center;padding:40px 20px}
.login-card{background:#fff;width:100%;max-width:400px;padding:32px 30px;border-top:3px solid var(--jade)}
.login-card h1{font-size:20px;margin:0 0 6px}
.login-card p.lead{font-size:13.5px;color:var(--muted);margin:0 0 22px}
.field{margin:0 0 15px}
.field label{display:block;font-size:13px;color:var(--ink2);margin:0 0 5px}
.field input{width:100%;padding:11px 12px;border:1px solid var(--rule);border-radius:2px;font-size:15px;font-family:var(--sans)}
.field input:focus{outline:2px solid var(--jade);outline-offset:1px}
.login-card .btn{width:100%;text-align:center}
.login-sub{margin:16px 0 0;font-size:13px;text-align:center}
.login-hero-copy{position:relative;z-index:2;color:#fff;text-align:center;padding:44px 20px 0}
.login-hero-copy h2{font-family:var(--serif);color:#fff;font-size:clamp(22px,3.6vw,32px);margin:0 0 10px}
.login-hero-copy p{color:#cfd8e6;margin:0 auto;max-width:32em;font-size:14.5px}

@media(max-width:640px){
  .topbar{flex-direction:column;align-items:flex-start;gap:10px}
  .hero{min-height:44vh}
  .rlist li{flex-direction:column;align-items:flex-start;gap:6px}
}

/* レポートへのご要望（V0.02L01 で追加） */
.req-form{background:var(--white);border:1px solid var(--rule);padding:22px}
.req-form .row{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;margin:0 0 12px}
.req-form label{display:block;font-size:12.5px;color:var(--ink2);margin:0 0 5px}
.req-form select,.req-form input[type=text]{padding:10px 12px;border:1px solid var(--rule);border-radius:2px;
  font-size:14.5px;font-family:var(--sans);background:#fff}
.req-form textarea{width:100%;min-height:110px;border:1px solid var(--rule);border-radius:2px;padding:13px;
  font-family:var(--sans);font-size:15px;line-height:1.85;resize:vertical;background:#fff}
.req-form textarea:focus,.req-form select:focus,.req-form input:focus{outline:2px solid var(--jade);outline-offset:1px}
.req-check{font-size:13.5px;color:var(--ink2);display:flex;align-items:center;gap:6px}
.req-note{font-size:12.5px;color:var(--muted);margin:10px 0 0}
.req-list{list-style:none;margin:0;padding:0}
.req-list li{border-bottom:1px solid var(--rule);padding:15px 2px}
.req-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 7px}
.req-body{white-space:pre-wrap}
.req-meta{font-size:12.5px;color:var(--muted);margin:7px 0 0}
.req-reply{margin:9px 0 0;padding:10px 13px;background:#f2f6f4;border-left:3px solid var(--jade);font-size:13.5px;white-space:pre-wrap}
.chip{display:inline-block;font-size:11.5px;border:1px solid var(--rule);border-radius:2px;padding:1px 7px;color:var(--muted);background:#fff}
.chip-kind{border-color:#b9c6d8;color:#2f5487}
.chip-pri{border-color:var(--warn);color:var(--warn)}
.chip-open{border-color:#c9cfda;color:#5a6272}
.chip-adopted{border-color:#5b7fb5;color:#2f5487}
.chip-done{border-color:#7fb59b;color:#175243;background:#eaf4f0}
.chip-excluded{border-color:#d9c3a0;color:#7a5a15;background:#fdf7e8}
.linkish{background:none;border:0;padding:0;color:var(--jade);font-size:12.5px;font-family:var(--sans);cursor:pointer;text-decoration:underline}

/* 送信中の帯（V0.03L04 で追加） */
#busybar{position:fixed;left:0;right:0;top:0;z-index:9999;background:var(--ink);color:#fff;
  font-size:12.5px;line-height:1.6;padding:7px 12px;text-align:center;box-shadow:0 1px 6px rgba(0,0,0,.2)}
#busybar::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:38%;background:var(--jade);
  animation:busyslide 1.1s ease-in-out infinite}
@keyframes busyslide{0%{left:-38%}100%{left:100%}}
@media (prefers-reduced-motion:reduce){#busybar::after{animation:none}}

/* スマホ表示の追い込み（V0.03L04 で追加。640px以下だけに効きます） */
@media(max-width:640px){
  .wrap{padding:24px 16px 44px}
  .hero-body{padding:40px 16px 32px}
  .sec{margin:0 0 32px}
  .report-lead{padding:18px 16px 16px}
  .report-lead h3{font-size:19px}
  .ask,.thread,.req-form{padding:16px}
  .ask textarea,.req-form textarea{font-size:16px;min-height:110px}
  .req-form select,.req-form input[type=text],.field input{font-size:16px}
  .req-form .row{flex-direction:column;align-items:stretch;gap:10px}
  .btns{display:flex;flex-direction:column;gap:10px}
  .btns .btn{width:100%;text-align:center}
  .req-list li{padding:13px 2px}
  .foot{flex-direction:column;gap:4px}
}

/* くるくる回るアイコン（V0.03L05 で追加） */
.spin{display:inline-block;width:14px;height:14px;margin-right:8px;vertical-align:-2px;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;
  animation:spinturn .8s linear infinite}
@keyframes spinturn{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation-duration:2.4s}}