:root{
  /* ===== base ===== */
  --s-bg: #ffffff;
  --s-text: #151b28;
  --s-muted: #5b6477;

  /* brand */
  --s-blue: #2a6be7;
  --s-blue2: #1a55c8;
  --s-blue3: #0f3d9f;

  /* flat surfaces */
  --s-line: rgba(21, 27, 40, .12);
  --s-line2: rgba(21, 27, 40, .08);
  --s-soft: #f5f8ff;
  --s-soft2:#f7f8fb;

  /* radius / layout */
  --s-radius-xl: 20px;
  --s-radius-lg: 16px;
  --s-radius-md: 12px;
  --s-container: 1240px;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color: var(--s-text);
  background: var(--s-bg);
  font-family: ui-sans-serif, system-ui, -apple-system, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  letter-spacing: .02em;
}
a{ color: inherit; text-decoration: none; }

code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .92em;
  padding: .15em .45em;
  border-radius: 8px;
  background: rgba(42,107,231,.08);
  border: 1px solid rgba(42,107,231,.16);
}

.s-br-sm{ display:none; }
@media (max-width: 560px){
  .s-br-sm{ display:block; }
}

/* ===== Header（会社名のみ） ===== */
.s-header{
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(21, 27, 40, .08);
  padding: 16px 20px;
}
.s-header-brand{
  display:flex;
  flex-direction: column;
  line-height: 1.1;
}
.s-header-brand-ja{
  font-weight: 900;
  letter-spacing: .06em;
}

/* ===== Hero（index/news寄り：薄い青の面でフラット） ===== */
.s-hero{
  padding: 30px 0 18px;
  background:
    radial-gradient(900px 340px at 10% 0%, rgba(42,107,231,.14), rgba(42,107,231,0) 72%),
    radial-gradient(820px 300px at 90% 10%, rgba(42,107,231,.08), rgba(42,107,231,0) 70%),
    linear-gradient(180deg, rgba(42,107,231,.05), rgba(255,255,255,0));
}
.s-hero-inner{
  max-width: var(--s-container);
  margin: 0 auto;
  padding: 14px 20px 22px;
}
.s-hero-eyebrow{
  margin: 0;
  font-weight: 900;
  letter-spacing: .20em;
  color: var(--s-blue);
  font-size: clamp(34px, 6vw, 56px);
  line-height: 1.0;
}
.s-hero-title{
  margin: 12px 0 0;
  font-size: clamp(16px, 2.2vw, 22px);
  color: #20283a;
  font-weight: 900;
}
.s-hero-sub{
  margin: 10px 0 0;
  color: var(--s-muted);
  line-height: 1.9;
  font-size: 14px;
  max-width: 64ch;
}

/* ===== Main ===== */
.s-main{
  max-width: var(--s-container);
  margin: 0 auto;
  padding: 16px 20px 72px;
}

/* ===== Section ===== */
.s-section{ padding: 34px 0; }
.s-section-head{ padding: 0 0 18px; }
.s-section-title{
  margin: 0;
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 900;
  letter-spacing: .04em;
}
.s-section-lead{
  margin: 9px 0 0;
  color: var(--s-muted);
  font-size: 14px;
  line-height: 1.85;
}

/* ===== Quick links（影なし・薄背景・線で見せる） ===== */
.s-quick-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 980px){
  .s-quick-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px){
  .s-quick-grid{ grid-template-columns: 1fr; }
}

.s-quick{
  border-radius: var(--s-radius-xl);
  border: 1px solid var(--s-line2);
  background: linear-gradient(180deg, rgba(245,248,255,.9), #fff);
  padding: 16px 16px 14px;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.s-quick:hover{
  transform: translateY(-1px);
  border-color: rgba(42,107,231,.22);
  background: linear-gradient(180deg, rgba(42,107,231,.08), #fff);
}
.s-quick-title{
  display:block;
  font-weight: 900;
  letter-spacing: .02em;
}
.s-quick-sub{
  display:block;
  margin-top: 8px;
  color: var(--s-muted);
  font-size: 13px;
}

/* ===== Map grid ===== */
.s-map-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
@media (max-width: 920px){
  .s-map-grid{ grid-template-columns: 1fr; }
}

/* ===== Card（影ほぼなし・線と余白でフラット） ===== */
.s-card{
  border-radius: var(--s-radius-xl);
  border: 1px solid var(--s-line2);
  background: #fff;
  padding: 18px 18px 14px;
}
.s-card-head{
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(21,27,40,.07);
  margin-bottom: 12px;
}
.s-card-title{
  margin: 0;
  font-weight: 900;
  letter-spacing: .04em;
}
.s-card-note{
  margin: 8px 0 0;
  color: var(--s-muted);
  font-size: 13px;
  line-height: 1.8;
}

/* links（影なし・フラット・ホバーで薄く色つけ） */
.s-link-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display:grid;
  gap: 8px;
}
.s-link{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(21,27,40,.08);
  background: rgba(247,248,251,.7);
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.s-link:hover{
  transform: translateY(-1px);
  border-color: rgba(42,107,231,.20);
  background: rgba(42,107,231,.06);
}
.s-link-hint{
  color: rgba(91,100,119,.9);
  font-size: 12px;
  white-space: nowrap;
}
.s-link[aria-current="page"]{
  border-color: rgba(42,107,231,.28);
  background: rgba(42,107,231,.08);
}

/* card tip（フラット） */
.s-card-tip{
  margin-top: 12px;
  border-radius: 14px;
  border: 1px solid rgba(42,107,231,.16);
  background: rgba(42,107,231,.05);
  padding: 12px 12px;
}
.s-card-tip-title{
  margin: 0;
  font-weight: 900;
  letter-spacing: .02em;
  color: #20283a;
  font-size: 13px;
}
.s-card-tip-text{
  margin: 8px 0 0;
  color: var(--s-muted);
  line-height: 1.9;
  font-size: 13px;
}
.s-card-mini-note{
  margin: 12px 0 0;
  color: var(--s-muted);
  font-size: 13px;
  line-height: 1.85;
}

/* ===== Note section（影なし） ===== */
.s-note{
  border-radius: var(--s-radius-xl);
  border: 1px solid var(--s-line2);
  background: linear-gradient(180deg, rgba(245,248,255,.6), #fff);
  padding: 18px;
}
.s-note-title{
  margin: 0;
  font-weight: 900;
  letter-spacing: .04em;
}
.s-note-text{
  margin: 10px 0 0;
  color: var(--s-muted);
  line-height: 1.95;
  font-size: 13.5px;
}

/* ===== Footer（コピーライトのみ） ===== */
.s-footer{
  padding: 24px 20px 30px;
  border-top: 1px solid rgba(21,27,40,.08);
  text-align: center;
  color: var(--s-muted);
  background: #fff;
}
.s-footer-copy{
  font-size: 12px;
  letter-spacing: .06em;
}