/* 有限会社クリエイトジャパン コーポレートサイト */
:root{
  --navy:#1b2a41; --navy2:#25384f; --accent:#2f6f9f;
  --ink:#1d1d1f; --sub:#5a5a63; --line:#e2e5ea; --bg2:#f5f7fa;
  --warn:#c62828;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:#fff; color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",system-ui,sans-serif;
  font-size:16.5px; line-height:1.95; letter-spacing:.02em;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--accent)}
.wrap{max-width:880px; margin:0 auto; padding:0 22px}

/* ヘッダー */
.nav{
  position:sticky; top:0; z-index:20;
  background:rgba(255,255,255,.94); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; padding-top:14px; padding-bottom:14px; gap:16px}
.nav .logo{font-weight:800; font-size:17px; color:var(--navy); text-decoration:none; white-space:nowrap}
.nav .logo small{display:block; font-size:11px; color:var(--sub); font-weight:600; letter-spacing:.14em}
.nav ul{display:flex; gap:22px; list-style:none; margin:0; padding:0; font-size:14.5px}
.nav a.link{color:var(--ink); text-decoration:none}
.nav a.link:hover{color:var(--accent)}
@media(max-width:640px){
  /* 狭い画面では、社名とメニューを上下に分けて置く */
  .nav .wrap{flex-direction:column; align-items:flex-start; gap:10px; padding-bottom:10px}
  .nav .logo{font-size:16px}
  .nav ul{gap:0; width:100%; font-size:13.5px}
  .nav ul li{flex:1 1 0; text-align:center}
  .nav ul li+li{border-left:1px solid var(--line)}
  .nav a.link{display:block; white-space:nowrap; padding:4px 2px}
}

/* 見出し画像 */
.hero{
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy2) 70%,#31506e 100%);
  color:#fff; padding:82px 0 76px;
}
.hero h1{font-size:clamp(26px,4.6vw,38px); line-height:1.6; margin:0 0 18px; font-weight:800}
.hero p{margin:0; color:#c7d2de; font-size:16.5px}
.hero .en{
  font-size:12.5px; letter-spacing:.26em; color:#8fb4d4;
  margin:0 0 16px; font-weight:700;
}

section{padding:66px 0}
section+section{border-top:1px solid var(--line)}
.alt{background:var(--bg2)}
h2{
  font-size:23px; font-weight:800; margin:0 0 8px;
}
.lead{color:var(--sub); font-size:14px; letter-spacing:.16em; font-weight:700; margin:0 0 22px}
h3{font-size:18px; font-weight:800; margin:30px 0 10px}
p{margin:0 0 1.2em}
ul{margin:0 0 1.3em; padding-left:1.4em}
li{margin-bottom:.5em}

table{width:100%; border-collapse:collapse; margin:0 0 8px; font-size:16px}
th,td{border:1px solid var(--line); padding:14px 16px; text-align:left; vertical-align:top}
th{background:var(--bg2); width:11em; font-weight:700; white-space:nowrap}
@media(max-width:600px){
  th,td{display:block; width:auto}
  th{border-bottom:0}
  td{border-top:0; margin-bottom:-1px}
}

/* 未確定の箇所。公開前に必ず消えるよう目立たせる */
.todo{
  background:#fff2f2; color:var(--warn); font-weight:700;
  border:1.5px dashed var(--warn); border-radius:4px; padding:1px 8px; font-size:.95em;
}
.draft{
  background:#fffdf0; border-left:5px solid #e0a800; padding:16px 20px; margin:0 0 22px;
  font-size:15px; color:#6b5900;
}

/* 問い合わせ */
.contact{background:var(--navy); color:#fff}
.contact h2{color:#fff}
.contact .lead{color:#8fb4d4}
.contact .box{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  border-radius:12px; padding:28px 26px; margin-top:20px;
}
.contact .tel{font-size:30px; font-weight:800; color:#fff; letter-spacing:.04em; margin:6px 0 2px}
.contact .tel a{color:#fff; text-decoration:none}
.contact .mail{font-size:19px; font-weight:700; margin:14px 0 2px}
.contact .mail a{color:#a9d2f2}
.contact small{color:#a8b8c8}

footer{background:#121c2a; color:#8b97a6; font-size:14px; padding:36px 0 30px}
footer .name{color:#fff; font-weight:700; font-size:15px; margin:0 0 6px}
footer a{color:#c2ccd8; text-decoration:none; margin-right:20px}
footer a:hover{color:#fff; text-decoration:underline}
footer .links{margin:14px 0 12px; padding-top:14px; border-top:1px solid rgba(255,255,255,.12)}
footer .copy{margin:0; font-size:13px}

/* 下層ページ */
.pagehead{background:var(--navy); color:#fff; padding:46px 0 40px}
.pagehead .back{display:inline-block; font-size:14px; color:#a9c2d8; text-decoration:none; margin-bottom:12px}
.pagehead .back:hover{color:#fff}
.pagehead h1{font-size:27px; margin:0; font-weight:800}
main.doc{padding:50px 0 66px}
main.doc h2{
  font-size:19px; margin:40px 0 12px; padding-left:13px; border-left:5px solid var(--accent);
}
main.doc h2:first-of-type{margin-top:0}