/* ============================================================
   合同会社ソラコード — 共通スタイル
   2ページ（index.html / company.html）で共有します。
   ============================================================ */

:root{
  --base:#0F1829;        /* 深藍：地 */
  --base-deep:#0B1220;   /* ヒーロー上端 */
  --surface:#16203A;     /* 一段明るい面 */
  --line:#253150;        /* 罫線 */
  --line-soft:#1C2740;   /* 弱い罫線 */
  --ink:#EEF2F9;         /* 見出し */
  --body:#A8B6CE;        /* 本文 */
  --muted:#71809A;       /* 補足 */
  --sky:#79A9FF;         /* 空の光（アクセント） */
  --glow:#F0C48A;        /* 残光（ヒーローのみ） */

  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --display:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --gutter:clamp(1.5rem,5vw,4rem);
  --measure:34em;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--base);
  color:var(--body);
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.95;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}

a{color:var(--sky);text-underline-offset:.25em;text-decoration-thickness:1px}
a:hover{color:#A5C6FF}
a:focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:2px}

.wrap{max-width:64rem;margin-inline:auto;padding-inline:var(--gutter);width:100%}

/* ---------- ヘッダー ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:.75rem 1.5rem;
  padding-block:1.5rem;
}
.topbar__name{
  font-family:var(--display);font-weight:700;
  font-size:1.0625rem;letter-spacing:.05em;
  color:var(--ink);text-decoration:none;
}
.topbar__name:hover{color:var(--ink)}
.nav{display:flex;gap:1.5rem;font-size:.875rem}
.nav a{color:var(--body);text-decoration:none;padding-block:.15rem}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{
  color:var(--ink);
  box-shadow:inset 0 -1px 0 0 var(--sky);
}

/* ---------- ヒーロー（夜空と地平線） ---------- */
.hero{
  position:relative;
  background:
    radial-gradient(115% 70% at 12% 100%, rgba(240,196,138,.13) 0%, rgba(240,196,138,0) 55%),
    radial-gradient(90% 60% at 78% 100%, rgba(121,169,255,.14) 0%, rgba(121,169,255,0) 60%),
    linear-gradient(180deg, var(--base-deep) 0%, var(--base) 100%);
}
.hero::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,
    rgba(240,196,138,.55) 0%,
    rgba(121,169,255,.45) 42%,
    rgba(37,49,80,.9) 100%);
}
.hero__inner{padding-block:clamp(4rem,12vw,8rem)}
.hero__head{
  font-family:var(--display);font-weight:700;color:var(--ink);
  font-size:clamp(2.125rem,6.6vw,3.75rem);
  line-height:1.22;letter-spacing:.005em;margin:0;
}
.hero__lede{
  max-width:var(--measure);
  margin:clamp(1.75rem,4vw,2.5rem) 0 0;
  font-size:clamp(1rem,2.3vw,1.0625rem);
}

/* ---------- ページ見出し（下層ページ） ---------- */
.pagehead{border-bottom:1px solid var(--line)}
.pagehead__inner{padding-block:clamp(2.75rem,8vw,5rem)}
.pagehead h1{
  font-family:var(--display);font-weight:700;color:var(--ink);
  font-size:clamp(1.75rem,5vw,2.5rem);
  letter-spacing:.06em;margin:0;line-height:1.4;
}

/* ---------- 帯（左見出し / 右本文） ---------- */
main{flex:1}
.band{border-bottom:1px solid var(--line-soft)}
.band:last-of-type{border-bottom:0}
.band__inner{
  display:grid;grid-template-columns:1fr;gap:1rem;
  padding-block:clamp(2.75rem,7vw,4.5rem);
}
.band__title{
  font-family:var(--display);font-weight:700;color:var(--ink);
  font-size:1.0625rem;letter-spacing:.09em;
  margin:0;line-height:1.7;
}
.band__body{max-width:var(--measure)}
.band__body > :first-child{margin-top:0}
.band__body > :last-child{margin-bottom:0}
@media (min-width:52rem){
  .band__inner{grid-template-columns:12rem 1fr;gap:3.5rem}
}

/* ---------- 事業内容 ---------- */
.services{margin:0;padding:0;list-style:none}
.services li{padding-block:1.5rem;border-top:1px solid var(--line-soft)}
.services li:first-child{border-top:0;padding-top:0}
.services li:last-child{padding-bottom:0}
.services h2{
  font-family:var(--display);font-weight:700;color:var(--ink);
  font-size:1rem;margin:0 0 .4rem;letter-spacing:.04em;line-height:1.6;
}
.services p{margin:0;font-size:.9375rem}

/* ---------- 対応技術 ---------- */
.stack{width:100%;border-collapse:collapse;font-size:.9375rem}
.stack th,.stack td{text-align:left;padding:.9rem 0;border-bottom:1px solid var(--line-soft);vertical-align:top}
.stack th{
  font-family:var(--display);font-weight:700;color:var(--ink);
  width:8.5rem;padding-right:1.25rem;white-space:nowrap;letter-spacing:.04em;
}
.stack tr:last-child th,.stack tr:last-child td{border-bottom:0}

/* ---------- 会社概要 ---------- */
.facts{margin:0;font-size:.9375rem}
.facts div{
  display:grid;grid-template-columns:1fr;gap:0 1.5rem;
  padding-block:1rem;border-bottom:1px solid var(--line-soft);
}
.facts div:first-child{padding-top:0}
.facts div:last-child{border-bottom:0;padding-bottom:0}
.facts dt{
  font-family:var(--display);font-weight:700;color:var(--ink);
  letter-spacing:.04em;font-size:.875rem;
}
.facts dd{margin:0}
@media (min-width:34rem){
  .facts div{grid-template-columns:7rem 1fr}
  .facts dt{font-size:.9375rem}
}

/* ---------- お問い合わせ ---------- */
.contact-mail{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.0625rem,3.6vw,1.4375rem);
  letter-spacing:.03em;word-break:break-all;
}

/* ---------- フッター ---------- */
.foot{
  border-top:1px solid var(--line);
  padding-block:2rem 2.75rem;
  display:flex;flex-wrap:wrap;gap:.75rem 2rem;
  align-items:baseline;justify-content:space-between;
  font-size:.8125rem;color:var(--muted);
}
.foot__links{display:flex;gap:1.5rem}
.foot__links a{color:var(--body);text-decoration:none}
.foot__links a:hover{color:var(--ink)}

/* ---------- 未入力マーカー（公開前に消す） ---------- */
.todo{
  background:rgba(240,196,138,.16);
  box-shadow:0 0 0 .15em rgba(240,196,138,.16);
  border-bottom:1px dashed var(--glow);
  color:var(--glow);
}