:root {
  --ink: #1a1a1a;
  --ink-2: #2b2b2b;
  --ink-3: #6b6b6b;
  --ink-4: #8a8a8a;
  --line: #e6e3de;
  --gold: #a8834a;
  --bg: #ffffff;
  --bg-2: #faf9f7;
  --max: 960px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic", sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.9;
  letter-spacing: .02em;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt";
}
a { color: inherit; text-decoration: none; }
a:hover { color: var(--gold); }

.site-header {
  max-width: var(--max);
  margin: 0 auto;
  padding: 28px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; letter-spacing: .08em; color: var(--ink-2); }
.brand-mark { width: 20px; height: 20px; fill: var(--gold); }
.nav { display: flex; gap: 22px; font-size: 13px; letter-spacing: .08em; color: var(--ink-3); flex-wrap: wrap; }

main { max-width: var(--max); margin: 0 auto; padding: 0 24px 80px; }

.hero { padding: 96px 0 72px; max-width: 720px; }
.eyebrow { font-size: 12px; letter-spacing: .22em; color: var(--ink-4); text-transform: uppercase; margin-bottom: 28px; }
h1 { font-size: clamp(24px, 3.6vw, 34px); font-weight: 600; letter-spacing: .04em; line-height: 1.5; margin-bottom: 28px; }
.lead { font-size: 16px; color: var(--ink-2); max-width: 640px; }
.rule { width: 52px; height: 2px; background: var(--gold); margin-top: 40px; }
.motto { margin-top: 24px; font-size: 13.5px; color: var(--ink-3); letter-spacing: .04em; }
br.sp { display: none; }

.section { padding: 72px 0; border-top: 1px solid var(--line); }
h2 { font-size: 22px; font-weight: 600; letter-spacing: .14em; margin-bottom: 40px; display: flex; align-items: baseline; gap: 16px; }
.num { font-size: 12px; letter-spacing: .2em; color: var(--gold); font-weight: 500; }
h3 { font-size: 17px; font-weight: 600; letter-spacing: .06em; margin-bottom: 12px; }
p + p { margin-top: 12px; }

.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid.two { grid-template-columns: repeat(2, 1fr); }
.card { padding: 32px 28px; background: var(--bg-2); border-top: 2px solid var(--gold); font-size: 14.5px; color: var(--ink-2); }
.card-label { font-size: 11px; letter-spacing: .16em; color: var(--gold); margin-bottom: 10px; }
.card.product .tag { display: inline-block; font-size: 11px; letter-spacing: .18em; color: var(--gold); border: 1px solid var(--gold); padding: 2px 10px; margin-bottom: 14px; }
.deliv { margin-top: 16px; padding-left: 1.1em; font-size: 13.5px; color: var(--ink-3); }
.deliv li { margin: 3px 0; }
.link { border-bottom: 1px solid var(--gold); padding-bottom: 1px; }
.section-lead { max-width: 720px; margin: -16px 0 32px; color: var(--ink-2); font-size: 15px; }

.steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: step; }
.steps li { counter-increment: step; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-2); }
.steps li::before { content: counter(step, decimal-leading-zero); display: block; font-size: 12px; letter-spacing: .2em; color: var(--gold); margin-bottom: 10px; }
.steps h3 { font-size: 16px; }
.note { margin-top: 36px; font-size: 13.5px; color: var(--ink-3); max-width: 720px; }

.profile { display: grid; grid-template-columns: 220px 1fr; gap: 40px; max-width: 880px; }
.profile-head h3 { font-size: 22px; letter-spacing: .14em; }
.name-en { display: block; font-size: 12px; letter-spacing: .2em; color: var(--ink-4); font-weight: 400; margin-top: 6px; }
.profile-role { font-size: 13px; color: var(--ink-3); letter-spacing: .1em; margin-top: 10px; }
.profile-body { font-size: 15px; color: var(--ink-2); }
.career { display: grid; grid-template-columns: 110px 1fr; margin-top: 24px; }
.career dt, .career dd { padding: 14px 0; border-top: 1px solid var(--line); }
.career dt { font-size: 13px; color: var(--ink-3); letter-spacing: .06em; }
.career dd { font-size: 14.5px; }
.career strong { font-weight: 600; color: var(--ink); }

dl.company { display: grid; grid-template-columns: 140px 1fr; row-gap: 0; font-size: 15px; max-width: 760px; }
dl.company dt, dl.company dd { padding: 16px 0; border-bottom: 1px solid var(--line); }
dl.company dt { color: var(--ink-3); font-weight: 500; letter-spacing: .08em; }
.muted { color: var(--ink-4); font-size: 13px; }
.contact-mail { font-size: 22px; letter-spacing: .04em; margin: 20px 0 16px; }
.contact-mail a { border-bottom: 1px solid var(--gold); }

.english { color: var(--ink-2); font-size: 15px; letter-spacing: 0; font-feature-settings: normal; }
.english h2 { letter-spacing: .04em; }
.lead-en { font-size: 20px; font-weight: 600; color: var(--ink); margin-bottom: 16px; }
.english dl.company { margin-top: 32px; grid-template-columns: 160px 1fr; }

.site-footer {
  max-width: var(--max);
  margin: 0 auto;
  padding: 32px 24px 48px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ink-4);
}
.site-footer nav { display: flex; gap: 20px; }

.doc { max-width: 720px; padding-top: 48px; }
.doc h1 { font-size: 26px; margin-bottom: 8px; }
.doc .updated { color: var(--ink-4); font-size: 13px; margin-bottom: 40px; }
.doc h2 { font-size: 17px; margin: 40px 0 12px; display: block; }
.doc p, .doc li { font-size: 15px; color: var(--ink-2); }
.doc ul { padding-left: 1.4em; }
.doc li { margin: 4px 0; }
.back { display: inline-block; margin-top: 48px; font-size: 13px; letter-spacing: .1em; color: var(--ink-3); }

@media (max-width: 760px) {
  .site-header { padding: 20px 20px; }
  .nav { gap: 14px; font-size: 12px; }
  main { padding: 0 20px 60px; }
  .hero { padding: 56px 0 48px; }
  h1 br { display: none; }
  .section { padding: 56px 0; }
  .grid, .grid.two { grid-template-columns: 1fr; gap: 16px; }
  .steps { grid-template-columns: 1fr; gap: 16px; }
  .profile { grid-template-columns: 1fr; gap: 20px; }
  .career { grid-template-columns: 1fr; }
  .career dt { padding-bottom: 0; }
  .career dd { border-top: 0; padding-top: 4px; }
  dl.company, .english dl.company { grid-template-columns: 1fr; }
  dl.company dt { padding-bottom: 0; border-bottom: 0; font-size: 12px; }
  dl.company dd { padding-top: 4px; }
  .contact-mail { font-size: 18px; }
}

/* contact box (shared) */
.contact-box{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;background:#1a1a1a;color:#fff;padding:56px 56px}
.contact-lead{font-size:22px;font-weight:600;line-height:1.7;letter-spacing:.08em;color:#fff;margin-bottom:24px}
.contact-points{list-style:none;padding:0;margin:0;font-size:13.5px;letter-spacing:.06em;color:rgba(255,255,255,.72)}
.contact-points li{position:relative;padding-left:18px;margin:6px 0}
.contact-points li::before{content:"";position:absolute;left:0;top:.95em;width:8px;height:1px;background:var(--gold,#a8834a)}
.contact-button{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:16px;row-gap:6px;align-items:center;background:#fff;color:#1a1a1a;padding:26px 28px;border-top:2px solid var(--gold,#a8834a)}
.contact-button:hover{background:#f3f1ec;color:#1a1a1a}
.contact-button-label{grid-column:1;font-size:11px;letter-spacing:.28em;color:#8a8a8a}
.contact-button-addr{grid-column:1;font-size:19px;letter-spacing:.04em;font-weight:500}
.contact-button-arrow{grid-column:2;grid-row:1/3;font-size:22px;color:var(--gold,#a8834a);transition:transform .2s}
.contact-button:hover .contact-button-arrow{transform:translateX(4px)}
@media (max-width:760px){.contact-box{grid-template-columns:1fr;gap:32px;padding:40px 24px}.contact-lead{font-size:18px}.contact-button-addr{font-size:16px}}

/* ===== デザインB（紺の面）2026-10-08 確定 ===== */
/* B: 紺の面で区切る。コントラストと構造を強くする */
:root{--navy:#1b2a4a;--navy-2:#243659;--gold:#1b2a4a;--line:#dfe3ea;--bg-2:#f4f6f9;--max:980px}
.site-header{padding:22px 24px;border-bottom:1px solid var(--line);max-width:none}
.site-header .brand,.site-header .nav{position:relative}
.site-header{display:flex;justify-content:space-between;padding-left:max(24px,calc(50vw - 490px));padding-right:max(24px,calc(50vw - 490px))}
.brand{font-weight:700;font-size:16px;letter-spacing:.06em;color:var(--navy)}
.nav{gap:24px;font-size:13.5px;letter-spacing:.04em;color:var(--ink-2)}
.nav a:hover{color:var(--navy)}
.hero{background:var(--navy);color:#fff;max-width:none;margin:0 calc(50% - 50vw);padding:104px max(24px,calc(50vw - 490px)) 96px}
.hero>*{max-width:760px}
.eyebrow{color:#9fb0d2;letter-spacing:.26em;margin-bottom:28px}
.hero h1{color:#fff;font-size:clamp(28px,4.2vw,40px);font-weight:700;letter-spacing:.02em;line-height:1.55;margin-bottom:28px}
.lead{color:rgba(255,255,255,.85);font-size:16.5px}
.rule{background:#9fb0d2;width:40px;height:3px;margin-top:40px}
.motto{color:rgba(255,255,255,.65);font-size:13.5px}
.section{padding:88px 0;border-top:0}
.section+.section{border-top:1px solid var(--line)}
h2{font-size:26px;font-weight:700;letter-spacing:.06em;color:var(--navy);margin-bottom:40px;gap:14px}
.num{font-size:13px;color:#8a97b3;letter-spacing:.2em;font-weight:600}
h3{font-size:18px;font-weight:700;color:var(--navy);letter-spacing:.02em}
.card{background:#fff;border:1px solid var(--line);border-top:4px solid var(--navy);border-radius:4px;padding:32px 30px;box-shadow:0 1px 2px rgba(27,42,74,.04)}
.card.product .tag{color:var(--navy);border-color:var(--navy);border-radius:999px;padding:2px 12px;letter-spacing:.14em}
.deliv{margin-top:18px;padding-left:0;list-style:none}
.deliv li{position:relative;padding-left:18px;margin:5px 0;color:var(--ink-2)}
.deliv li::before{content:"";position:absolute;left:0;top:.75em;width:8px;height:8px;background:var(--navy);border-radius:50%}
.steps{gap:28px}
.steps li{border-top:0;background:var(--bg-2);padding:28px 24px;border-radius:4px}
.steps li::before{font-size:30px;font-weight:700;color:var(--navy);letter-spacing:0;margin-bottom:12px;line-height:1}
.steps h3{font-size:17px}
.profile-head h3{font-size:26px;color:var(--navy)}
.career strong{color:var(--navy)}
dl.company dt{color:var(--navy);font-weight:600}
#contact{background:var(--navy);color:#fff;margin:0 calc(50% - 50vw);padding:88px max(24px,calc(50vw - 490px));border-top:0}
#contact h2{color:#fff}#contact .num{color:#9fb0d2}
#contact p{color:rgba(255,255,255,.85);max-width:640px}
.contact-mail{margin-top:28px}
.contact-mail a{display:inline-block;background:#fff;color:var(--navy);font-weight:700;font-size:18px;padding:16px 28px;border-radius:4px;border:0;letter-spacing:.02em}
.contact-mail a:hover{background:#e9edf5;color:var(--navy)}
.english{border-top:0;padding-top:88px}
.lead-en{color:var(--navy);font-size:22px}
.site-footer{max-width:none;background:var(--bg-2);padding:36px max(24px,calc(50vw - 490px)) 48px;border-top:1px solid var(--line)}
.site-footer nav a:hover{color:var(--navy)}
@media (max-width:760px){.hero{padding:64px 20px 56px}.section{padding:60px 0}#contact{padding:60px 20px}.steps li{padding:22px 20px}}

#contact .contact-box{background:transparent;padding:0}
#contact .contact-button{border-top-color:#9fb0d2}
#contact .contact-points li::before{background:#9fb0d2}

.doc h1{color:var(--navy);font-size:28px;font-weight:700;margin-bottom:8px}
.doc h2{color:var(--navy)}