/* AMJ株式会社 — v5-fable
   色は3系統だけ: 生成りの地 / 墨 / 濃い青（印刷のリフレックスブルー寄り）。
   グラデーション・影・ガラス風・角丸パネルは使わない。線は1px、面は塗りか地のどちらか。 */

:root{
  --bg:#f4f2ec;
  --ink:#15161a;
  --sub:#60636b;
  --line:#d5d2c9;
  --accent:#103a93;
  --on-ink:#f4f2ec;
  --on-ink-sub:#a9abb3;

  --sans:"Helvetica Neue",Helvetica,Arial,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;

  --fs-h1:clamp(30px,4.4vw,58px);
  --fs-h2:clamp(26px,2.5vw,34px);
  --fs-h3:clamp(22px,2vw,28px);
  --fs-lead:17px;
  --fs-body:15px;
  --fs-small:13px;
  --fs-label:11px;
  --fs-mail:clamp(22px,3.2vw,40px);

  --gutter:clamp(20px,4vw,56px);
  --sec-gap:clamp(80px,10vw,144px);
  --max:1360px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:var(--fs-body);line-height:1.9;letter-spacing:.03em;
  font-feature-settings:"palt";-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
img{display:block}
h1,h2,h3,p,dl,ol{margin:0}

/* ---------- header ---------- */
.hd{
  display:flex;justify-content:space-between;align-items:baseline;
  max-width:var(--max);margin:0 auto;padding:28px var(--gutter);
}
.logo{display:inline-flex;align-items:baseline;gap:8px}
.logo-en{font-size:20px;font-weight:700;letter-spacing:.06em}
.logo-ja{font-size:12px;font-weight:600;letter-spacing:.08em}
.nav{display:flex;gap:28px;font-size:13px;letter-spacing:.06em}
.nav a{padding-bottom:2px;border-bottom:1px solid transparent}
.nav a:hover{border-bottom-color:var(--ink)}

/* ---------- hero ---------- */
.hero{
  display:grid;grid-template-columns:minmax(0,11fr) minmax(0,9fr);
  min-height:calc(100vh - 92px);
  min-height:calc(100svh - 92px);
  border-top:1px solid var(--line);
}
.hero-copy{
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:96px var(--gutter) 72px max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
}
.eyebrow{
  margin-bottom:28px;font-size:var(--fs-label);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
}
h1{
  font-size:var(--fs-h1);line-height:1.38;font-weight:700;letter-spacing:.02em;
  max-width:14em;
}
h1 span{display:block}
.lead{margin-top:32px;max-width:36em;font-size:var(--fs-lead);line-height:1.9;color:var(--sub)}

.hero-visual{position:relative;overflow:hidden;background:var(--accent);min-height:560px}
.hero-visual img{
  position:absolute;left:17%;top:11%;width:100%;height:auto;
}

/* ---------- sections ---------- */
.sec{
  display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:var(--gutter);
  max-width:var(--max);margin:0 auto;padding:var(--sec-gap) var(--gutter) 0;
}
.label{
  display:flex;align-items:baseline;gap:14px;
  font-size:var(--fs-label);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);
  padding-top:.6em;
}
.num{font-variant-numeric:tabular-nums;letter-spacing:.04em}
.sec-body{min-width:0}
h2{font-size:var(--fs-h2);line-height:1.4;font-weight:700;letter-spacing:.02em}
.body{margin-top:32px;max-width:32em;font-size:var(--fs-lead);line-height:2.1}

/* business */
.biz{
  list-style:none;padding:0;margin-top:48px;
  display:grid;grid-template-columns:1fr 1fr;column-gap:var(--gutter);
}
.biz li{border-top:1px solid var(--ink);padding-top:28px}
.biz-en{font-size:var(--fs-label);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--sub)}
h3{margin-top:18px;font-size:var(--fs-h3);line-height:1.3;font-weight:700;letter-spacing:.02em}
.biz li p:last-child{margin-top:14px;max-width:22em;color:var(--sub);font-size:var(--fs-body)}

/* company */
.co{
  margin-top:48px;display:grid;grid-template-columns:9em 1fr;
  border-top:1px solid var(--ink);
}
.co dt,.co dd{padding:22px 0;border-bottom:1px solid var(--line)}
.co dt{color:var(--sub);font-size:var(--fs-small);letter-spacing:.06em}
.co dd{margin:0;font-size:var(--fs-body)}
.seg{display:inline-block}
.co dd a{border-bottom:1px solid var(--ink)}
.co dd a:hover{color:var(--accent);border-bottom-color:var(--accent)}

/* ---------- contact + footer (one dark block) ---------- */
.contact{margin-top:var(--sec-gap);background:var(--ink);color:var(--on-ink)}
.contact-in{
  display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);column-gap:var(--gutter);
  max-width:var(--max);margin:0 auto;padding:var(--sec-gap) var(--gutter) 112px;
}
.contact .label{color:var(--on-ink-sub)}
.contact-note{margin-top:24px;color:var(--on-ink-sub);font-size:var(--fs-lead)}
.mail{
  display:inline-block;margin-top:36px;
  font-size:var(--fs-mail);font-weight:600;line-height:1.3;letter-spacing:.01em;
  border-bottom:2px solid var(--on-ink);padding-bottom:4px;
  overflow-wrap:anywhere;
}
.mail:hover{color:var(--on-ink-sub);border-bottom-color:var(--on-ink-sub)}
.ft{
  display:flex;justify-content:space-between;align-items:baseline;
  max-width:var(--max);margin:0 auto;padding:28px var(--gutter) 36px;
  border-top:1px solid rgba(244,242,236,.22);
  font-size:var(--fs-small);letter-spacing:.06em;
}
.ft small{font-size:12px;color:var(--on-ink-sub)}

/* ---------- tablet / phone ---------- */
@media (max-width:900px){
  .hd{align-items:baseline;padding:22px var(--gutter)}
  .nav{gap:16px;font-size:12px}
  .nav-about{display:none}

  .hero{grid-template-columns:1fr;min-height:0}
  .hero-copy{order:1;padding:56px var(--gutter) 48px}
  .eyebrow{margin-bottom:20px}
  .lead{margin-top:22px;font-size:15px}
  .hero-visual{order:2;min-height:0;aspect-ratio:4/3}
  .hero-visual img{left:14%;top:12%;width:108%}

  .sec,.contact-in{grid-template-columns:1fr;row-gap:20px}
  .label{padding-top:0}
  .body{margin-top:22px;font-size:15px;line-height:2}

  .biz{grid-template-columns:1fr;row-gap:36px;margin-top:36px}
  .biz li{padding-top:22px}
  h3{margin-top:12px}

  .co{margin-top:36px;grid-template-columns:6em 1fr}
  .co dt,.co dd{padding:18px 0}

  .contact-in{padding-bottom:72px}
  .contact-note{margin-top:16px;font-size:15px}
  .mail{margin-top:28px}
  .ft{flex-direction:column;gap:6px;align-items:flex-start}
}