/* 株式会社ログレッジ 会社サイト
   ★このサイトは決算公告（/koukoku/）を含む。会社法440条で5年間の継続掲載義務があるため、
     外部への依存をゼロにする設計にしている:
       - Webフォント・CDN・解析タグ・JavaScript を一切使わない
       - 画像は同一オリジンのSVGだけ
     10年後に誰が触っても壊れないことを、見た目より優先する。
   ★色はBRAND.mdが正: 会社=インク#151a21のモノクロ。製品の青#2F6BFFは
     トドログ（製品）を表す箇所にだけ使う。 */
:root{
  --ink:#151a21;
  --ink2:#232a35;      /* ヒーローのグラデ終端 */
  --sub:#4c5564;
  --mute:#8b94a6;
  --line:#e7eaee;
  --bg:#fafbfc;
  --card:#ffffff;
  --blue:#2F6BFF;      /* 製品(トドログ)専用 */
  --r:18px;
  --shadow:0 1px 2px rgba(21,26,33,.04), 0 8px 28px rgba(21,26,33,.07);
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN",
              "Noto Sans JP","Yu Gothic UI",Meiryo,sans-serif;
  font-size:16px;line-height:1.9;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"palt";
}
.wrap{max-width:860px;margin:0 auto;padding:0 22px}

/* ---------- ヒーロー（濃色バンド） ---------- */
.hero{
  position:relative;overflow:hidden;color:#eef1f6;
  background:linear-gradient(150deg,var(--ink) 0%,var(--ink2) 100%);
}
.hero .wrap{position:relative;z-index:1;padding-top:30px;padding-bottom:64px}
/* 透かしのシンボル。inline SVGなので追加ファイル無し */
.hero .mark-bg{
  position:absolute;right:-90px;bottom:-150px;width:min(72vw,520px);height:min(72vw,520px);
  color:#ffffff;opacity:.04;pointer-events:none;transform:rotate(-8deg);
}
.hero .lockup{display:inline-block}
.hero .lockup img{display:block;filter:invert(1)}
.hero .wm{height:30px;width:auto}
.hero h1{
  margin-top:72px;font-size:clamp(30px,6.4vw,46px);font-weight:700;
  line-height:1.42;letter-spacing:.015em;
}
.hero h1 em{font-style:normal;color:#aab6cc}
.hero .lead{
  margin-top:20px;max-width:36em;font-size:15.5px;line-height:2.05;color:#b9c2d2;
}
.hero .jp-sub{margin-top:26px;display:flex;align-items:center;gap:10px;
  font-size:12.5px;letter-spacing:.14em;color:#77839a}
.hero .jp-sub::before{content:"";width:26px;height:1px;background:#3d4657}

/* ---------- セクション ---------- */
main{padding:26px 0 40px}
section{margin:44px 0}
.eyebrow{
  display:flex;align-items:baseline;gap:10px;margin-bottom:16px;
}
.eyebrow .en{
  font-size:11.5px;font-weight:700;letter-spacing:.22em;color:var(--mute);
  text-transform:uppercase;
}
.eyebrow .ja{font-size:20px;font-weight:700;letter-spacing:.02em}

/* ---------- カード ---------- */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 26px;box-shadow:var(--shadow);
}
.card + .card{margin-top:14px}

/* 会社概要: 定義グリッド */
.facts{display:grid;grid-template-columns:1fr;gap:0}
.facts > div{
  display:grid;grid-template-columns:120px 1fr;gap:14px;
  padding:15px 0;border-bottom:1px solid var(--line);
}
.facts > div:first-child{padding-top:2px}
.facts > div:last-child{border-bottom:none;padding-bottom:2px}
.facts dt{font-size:13px;color:var(--mute);padding-top:2px}
.facts dd{font-size:15.5px}
.facts dd small{display:block;font-size:13px;color:var(--mute)}

.notice{
  margin-top:16px;background:linear-gradient(0deg,rgba(21,26,33,.03),rgba(21,26,33,.03));
  border:1px dashed #d3d9e2;border-radius:14px;padding:16px 18px;
  font-size:14px;color:var(--sub);
}
.notice b{color:var(--ink)}

/* プロダクトカード */
.product{display:flex;gap:18px;align-items:flex-start}
.p-icon{
  width:58px;height:58px;border-radius:14px;background:var(--blue);flex:none;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(47,107,255,.28);
}
.p-body h3{font-size:18px;font-weight:700;letter-spacing:.02em}
.p-body .tag{
  display:inline-block;margin-left:8px;font-size:11px;font-weight:700;
  color:var(--blue);border:1px solid rgba(47,107,255,.35);border-radius:99px;
  padding:1px 9px;vertical-align:2px;letter-spacing:.06em;
}
.p-body p{margin-top:6px;font-size:14.5px;color:var(--sub)}
.p-body .go{
  display:inline-block;margin-top:12px;font-size:14px;font-weight:700;
  color:var(--ink);text-decoration:none;border-bottom:2px solid var(--ink);
  padding-bottom:1px;
}
.p-body .go::after{content:" →"}
.p-body .go:hover{opacity:.6}

/* 公告への導線 */
.k-link{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  text-decoration:none;color:inherit;transition:box-shadow .15s;
}
.k-link:hover{box-shadow:0 2px 4px rgba(21,26,33,.05),0 12px 34px rgba(21,26,33,.1)}
.k-link .t{display:block;font-size:15.5px;font-weight:700}
.k-link .d{display:block;font-size:13px;color:var(--mute);margin-top:3px}
.k-link .arrow{
  width:38px;height:38px;border-radius:50%;border:1px solid var(--line);flex:none;
  display:flex;align-items:center;justify-content:center;color:var(--ink);
  font-size:16px;
}

/* ---------- 公告ページ ---------- */
.page-head{border-bottom:1px solid var(--line);background:var(--card)}
.page-head .wrap{padding-top:24px;padding-bottom:22px}
.page-head .lockup{display:inline-block}
.page-head img{display:block}
.page-head .wm{height:25px;width:auto}
.doc h1{font-size:26px;font-weight:700;letter-spacing:.02em;margin:40px 0 6px}
.doc .h-sub{font-size:13px;letter-spacing:.2em;color:var(--mute);
  text-transform:uppercase;font-weight:700}
.doc .lead{margin-top:16px;color:var(--sub);font-size:15px;max-width:38em}
.doc section{margin:30px 0}
.doc h2{font-size:16.5px;font-weight:700;margin-bottom:12px}
.status{
  display:flex;gap:14px;align-items:flex-start;
}
.status .dot{
  margin-top:7px;width:10px;height:10px;border-radius:50%;flex:none;
  background:#c9d0dc;box-shadow:0 0 0 4px rgba(201,208,220,.25);
}
.status p{font-size:14.5px;color:var(--sub);margin-top:4px}
.status b{color:var(--ink);font-size:15.5px}
.spec{width:100%;border-collapse:collapse;font-size:14.5px}
.spec th,.spec td{text-align:left;vertical-align:top;padding:13px 0;
  border-bottom:1px solid var(--line)}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:none}
.spec th{width:31%;font-weight:400;color:var(--mute);white-space:nowrap;padding-right:14px}
.spec td{overflow-wrap:anywhere}
.back{display:inline-block;margin-top:26px;font-size:14px;font-weight:700;
  color:var(--ink);text-decoration:none}
.back::before{content:"← "}
.back:hover{opacity:.6}

/* ---------- フッター ---------- */
footer{
  margin-top:30px;background:var(--ink);color:#8b94a6;
}
footer .wrap{
  padding:26px 22px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-size:12.5px;
}
footer img{height:16px;width:auto;display:block;filter:invert(1);opacity:.85}
footer .sp{flex:1}
footer a{color:#aab4c6;text-decoration:none}
footer a:hover{color:#fff}

@media (max-width:560px){
  .hero h1{margin-top:56px}
  .facts > div{grid-template-columns:1fr;gap:2px;padding:13px 0}
  .product{flex-direction:column}
  .card{padding:22px 20px}
}