@charset "utf-8";

:root{
  --paper:#FCFCFA;
  --ink:#000000;
  --pencil:#55585E;
  --line:#DCDCD7;
  --blue:#6FB3DE;
  --blue-ink:#2A77AE;
  --pad:clamp(1.25rem,5vw,3rem);
  --mincho:"Shippori Mincho B1",serif;
  --gothic:"Zen Kaku Gothic New",system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#0F1317; --ink:#F4F4EF; --pencil:#9BA2AB;
    --line:#272C33; --blue:#5FA6D4; --blue-ink:#8FC6E6;
  }
}

*{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(--paper); color:var(--ink);
  font-family:var(--gothic); font-size:16.5px; line-height:1.9;
  font-feature-settings:"palt" 1;
}
body:lang(en){font-size:16px; line-height:1.75; font-feature-settings:normal}
a{color:inherit}
:focus-visible{outline:2px solid var(--blue-ink); outline-offset:3px}
.wrap{max-width:62rem; margin:0 auto; padding-inline:var(--pad)}

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--ink); color:var(--paper); padding:.6rem 1rem; z-index:10;
}
.skip:focus{left:0}

/* ── ヘッダー ───────────────────────────── */
.site-head{
  position:sticky; top:0; z-index:5;
  background:var(--paper);
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:saturate(180%) blur(8px);
  border-bottom:1px solid var(--line);
}
.site-head .wrap{
  display:flex; align-items:center; gap:clamp(.9rem,3vw,2rem);
  min-height:4.25rem; flex-wrap:wrap;
}
.logo{
  font-family:var(--mincho); font-weight:700; font-size:1.12rem;
  letter-spacing:.08em; text-decoration:none; white-space:nowrap; margin-right:auto;
}
.site-nav{display:flex; gap:clamp(.9rem,3vw,2rem); font-size:.9rem}
.site-nav a{text-decoration:none; padding-block:.35rem; border-bottom:1px solid transparent}
.site-nav a:hover,.site-nav a:focus-visible{border-bottom-color:var(--blue)}

.lang{display:flex; align-items:baseline; gap:.5rem; font-size:.82rem; letter-spacing:.04em}
.lang a{text-decoration:none; color:var(--blue-ink); border-bottom:1px solid transparent}
.lang a:hover,.lang a:focus-visible{border-bottom-color:currentColor}
.lang [aria-current]{color:var(--pencil)}
.lang .sep{color:var(--line)}

/* ── ヒーロー ───────────────────────────── */
.hero{
  padding-block:clamp(3.5rem,10vw,6.5rem) clamp(2.75rem,7vw,4.5rem);
  border-bottom:1px solid var(--blue);
}
.hero h1{margin:0; font-family:var(--mincho); font-weight:700; line-height:1.05}
.hero .en{display:block; font-size:clamp(2.5rem,8vw,4.5rem); letter-spacing:.05em}
.hero .ja{
  display:block; margin-top:1rem; color:var(--pencil);
  font-family:var(--gothic); font-weight:500;
  font-size:clamp(.9rem,2.1vw,1rem); letter-spacing:.4em;
}

/* ── セクション ─────────────────────────── */
.sec{padding-block:clamp(2.75rem,7vw,4.5rem)}
.sec + .sec{border-top:1px solid var(--line)}
.sec > h2{
  margin:0 0 clamp(1.6rem,4vw,2.4rem);
  font-family:var(--mincho); font-weight:600;
  font-size:clamp(1.4rem,3.5vw,1.95rem); letter-spacing:.04em;
}
.sec p{max-width:42rem}
.sec > p:first-of-type{margin-top:0}

/* 事業内容 */
.biz{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(2rem,5vw,3.5rem)}
@media (max-width:44rem){ .biz{grid-template-columns:1fr; gap:2.75rem} }
.biz h3{
  margin:0 0 .85rem; font-family:var(--mincho); font-weight:600;
  font-size:1.28rem; line-height:1.5;
}
.biz p{margin:0; color:var(--pencil)}
.owa-mark{display:block; width:64px; height:auto; margin:0 0 1.1rem}
.scope{
  margin:1.35rem 0 0; padding:0; list-style:none;
  display:flex; flex-wrap:wrap; gap:.5rem .6rem; font-size:.85rem;
}
.scope li{border:1px solid var(--line); padding:.18rem .7rem; color:var(--pencil)}
.more{margin-top:1.5rem; font-family:var(--mincho); font-size:1.02rem}
.more a{text-decoration:none; border-bottom:2px solid var(--blue); padding-bottom:.12em}
.more a:hover,.more a:focus-visible{border-bottom-color:var(--ink)}

/* 会社概要 */
table{border-collapse:collapse; width:100%; max-width:48rem; font-size:.94rem}
th,td{text-align:left; vertical-align:top; padding:.95rem .5rem; border-top:1px solid var(--line)}
tr:last-child th,tr:last-child td{border-bottom:1px solid var(--line)}
th{width:10rem; font-weight:500; color:var(--blue-ink); white-space:nowrap}
th:lang(en){width:12rem}
@media (max-width:34rem){
  th,td{display:block; width:auto; padding:.25rem .5rem}
  th{border-top:1px solid var(--line); padding-top:1rem}
  td{padding-bottom:1rem}
  tr:last-child th{border-bottom:0}
}

/* お問い合わせ */
.contact-mail{
  display:inline-block; margin:.2rem 0 0;
  font-family:var(--mincho); font-size:clamp(1.15rem,3vw,1.5rem);
  text-decoration:none; border-bottom:2px solid var(--blue); padding-bottom:.15em;
}
.contact-mail:hover,.contact-mail:focus-visible{border-bottom-color:var(--ink)}

/* ── フッター ───────────────────────────── */
.site-foot{border-top:1px solid var(--line); padding-block:2.25rem 3rem}
.site-foot .wrap{display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap}
.site-foot .logo{font-size:1rem; margin-right:0}
.site-foot small{color:var(--pencil); font-size:.8rem; letter-spacing:.04em}

@keyframes rise{from{opacity:0; transform:translateY(.7rem)} to{opacity:1; transform:none}}
.hero h1{animation:rise .8s ease-out both}
@media (prefers-reduced-motion:reduce){ .hero h1{animation:none} }