/* =========================================================================
   ENISHI — shared design system
   Source of truth: しょうへい.pen (enishi-* design variables)
   Every page links this file first, then its own /css/<page>.css
   ========================================================================= */

/* ---- Design tokens (from .pen enishi-* variables) ---------------------- */
:root{
  --accent:        #FF7A00;
  --accent-soft:   #FFEAD4;
  --bg:            #F7F5EF;
  --ink:           #1C1C1A;
  --line:          #E4E0D6;
  --muted:         #6B6B63;
  --navy:          #16314A;
  --navy-soft:     #E8EDF1;
  --surface:       #FFFFFF;
  --radius:        14px;

  --font-body:    "Noto Sans JP", system-ui, sans-serif;
  --font-en:      "Poppins", system-ui, sans-serif;
  --font-heading: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --font-mincho:  "Shippori Mincho", serif;

  --maxw: 1440px;
  --gutter: 80px;
  --header-gutter: 48px;
}

/* ---- Reset ------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  line-height:1.7;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }

/* ---- Layout primitives ------------------------------------------------- */
.section{ width:100%; position:relative; }
.wrap{
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
  position:relative;
}
.bg-surface{ background:var(--surface); }
.bg-bg{ background:var(--bg); }
.bg-navy{ background:var(--navy); }
.bg-accent-soft{ background:var(--accent-soft); }
.section--line-top{ border-top:1px solid var(--line); }

/* ---- Typography helpers ------------------------------------------------ */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-en); font-weight:600; font-size:13px;
  letter-spacing:3px; color:var(--muted);
}
.eyebrow .tick{ width:28px; height:3px; border-radius:999px; background:var(--accent); flex:0 0 auto; }
.eyebrow--accent{ color:var(--accent); }
.eyebrow--light .tick{ background:var(--accent); }

.section-title{
  font-family:var(--font-heading); font-weight:700; color:var(--ink);
  letter-spacing:1px; line-height:1.25;
}
.lead{ color:var(--muted); line-height:1.8; }
.text-accent{ color:var(--accent); }
.text-muted{ color:var(--muted); }
.text-navy{ color:var(--navy); }

/* ---- Buttons ----------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  border:0; cursor:pointer; border-radius:999px;
  font-family:var(--font-body); font-weight:700; line-height:1;
  text-align:center; white-space:nowrap; transition:transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.btn i,.btn svg,.btn .ph{ display:inline-flex; }
.btn:hover{ transform:translateY(-1px); }
.btn--accent{ background:var(--accent); color:#fff; }
.btn--accent:hover{ background:#ff8c1f; }
.btn--accent-ink{ background:var(--accent); color:var(--ink); }
.btn--ghost-navy{ background:#fff; color:var(--ink); }
.btn--sm{ padding:11px 22px; font-size:14px; }
.btn--md{ padding:14px 28px; font-size:15px; }
.btn--lg{ padding:18px 36px; font-size:16px; }
.btn--shadow{ box-shadow:0 8px 24px rgba(255,122,0,.25); }

.icon-16{ width:16px; height:16px; }
.icon-18{ width:18px; height:18px; }
.icon-20{ width:20px; height:20px; }

/* ---- Badge / pill ------------------------------------------------------ */
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:999px;
  background:var(--accent-soft); color:var(--accent);
  font-family:var(--font-en); font-size:12px; font-weight:600; letter-spacing:1px;
}

/* ---- Generic card ------------------------------------------------------ */
.card{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:36px;
}
.card--surface{ background:var(--surface); }

.icon-badge{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent-soft); color:var(--accent); flex:0 0 auto;
}

/* =======================================================================
   HEADER
   ======================================================================= */
.site-header{
  position:sticky; top:0; z-index:60;
  background:var(--surface);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{
  padding-inline:var(--header-gutter);
  display:flex; align-items:center; justify-content:space-between;
  min-height:78px;
}
.brand{ display:inline-flex; align-items:center; gap:10px; }
.brand__mark{ width:34px; height:34px; object-fit:contain; }
.brand__name{
  font-family:var(--font-mincho); font-weight:600; font-size:18px;
  letter-spacing:3px; color:var(--ink); line-height:1;
}
.header-right{ display:flex; align-items:center; gap:36px; }
.main-nav{ display:flex; align-items:center; gap:28px; }
.main-nav a{
  font-family:var(--font-body); font-size:14px; font-weight:500; color:var(--ink);
  position:relative; padding-block:4px; transition:color .15s ease;
}
.main-nav a:hover{ color:var(--accent); }
.main-nav a[aria-current="page"]{ color:var(--accent); }
.main-nav a[aria-current="page"]::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--accent); border-radius:2px;
}
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:8px; color:var(--ink); }

/* =======================================================================
   FOOTER  (component/Footer)
   ======================================================================= */
.site-footer{ background:var(--navy); color:#fff; }
.site-footer .wrap{ padding-block:64px 32px; }
.footer-main{
  display:flex; justify-content:space-between; gap:80px; align-items:flex-start;
  flex-wrap:wrap;
}
.footer-brand{ max-width:380px; display:flex; flex-direction:column; gap:22px; }
.footer-brand__logo{ display:flex; align-items:center; gap:12px; }
.footer-mark{
  width:40px; height:40px; border-radius:999px; background:var(--accent);
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-heading); font-weight:700; font-size:22px; color:#fff;
}
.footer-brand__name{ font-family:var(--font-en); font-weight:600; font-size:18px; letter-spacing:2px; color:#fff; }
.footer-brand__sub{ font-size:10px; font-weight:500; letter-spacing:1px; color:rgba(255,255,255,.7); margin-top:1px; }
.footer-tagline{ font-size:13px; line-height:1.9; color:rgba(255,255,255,.7); }
.footer-motif{ display:flex; align-items:center; gap:14px; color:rgba(255,255,255,.35); }
.footer-motif i,.footer-motif svg{ width:20px; height:20px; }
.footer-links{ display:flex; gap:72px; flex-wrap:wrap; }
.footer-col{ display:flex; flex-direction:column; gap:18px; }
.footer-col__title{ font-family:var(--font-en); font-weight:600; font-size:12px; letter-spacing:2px; color:var(--accent); }
.footer-col ul{ display:flex; flex-direction:column; gap:13px; }
.footer-col a{ font-size:13px; font-weight:500; color:rgba(255,255,255,.85); transition:color .15s ease; }
.footer-col a:hover{ color:#fff; }
.footer-divider{ height:1px; background:rgba(255,255,255,.14); margin-block:40px; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
.footer-copy{ font-family:var(--font-en); font-size:12px; color:rgba(255,255,255,.5); }
.footer-legal{ display:flex; align-items:center; gap:24px; }
.footer-legal a{ font-size:12px; color:rgba(255,255,255,.5); transition:color .15s ease; }
.footer-legal a:hover{ color:#fff; }

/* =======================================================================
   Decorations (hero blobs / floating tiles / faint motif icons)
   ======================================================================= */
.deco-layer{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
/* Stage maps design 1440-artboard coordinates: place children with left/top = design x/y (0..1440). */
.deco-stage{ position:absolute; top:0; left:50%; transform:translateX(-50%); width:1440px; height:100%; }
.deco-stage > *{ position:absolute; }
.deco-blob{ position:absolute; border-radius:999px; }
.deco-dot{ position:absolute; border-radius:999px; }
.deco-ring{ position:absolute; border-radius:999px; border:6px solid var(--accent); }
.deco-tile{
  position:absolute; border-radius:16px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px rgba(22,49,74,.13);
}
.deco-motif{ position:absolute; }
.has-deco-content{ position:relative; z-index:1; }

/* =======================================================================
   Page hero shared title
   ======================================================================= */
.page-hero-title{ font-family:var(--font-heading); font-weight:700; letter-spacing:1px; color:var(--ink); }

/* =======================================================================
   Sub-page heading band (CONTACT / FAQ / NEWS / legal / recruit)
   ======================================================================= */
.page-head{ background:var(--bg); position:relative; overflow:hidden; }
.page-head .wrap{ padding-block:72px 52px; display:flex; flex-direction:column; gap:18px; position:relative; z-index:1; }
.page-head__row{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.page-head__title{ font-family:var(--font-heading); font-weight:700; font-size:46px; letter-spacing:1px; color:var(--ink); line-height:1.2; }
.page-head__lead{ max-width:680px; color:var(--muted); line-height:1.75; font-size:15px; }

/* =======================================================================
   Prose (legal / recruit document pages)
   ======================================================================= */
.prose{ color:var(--ink); }
.prose h2{ font-family:var(--font-heading); font-weight:700; font-size:22px; color:var(--ink); margin:44px 0 14px; letter-spacing:.5px; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-family:var(--font-heading); font-weight:700; font-size:16px; color:var(--ink); margin:24px 0 8px; }
.prose p{ font-size:15px; line-height:1.95; color:var(--muted); margin:0 0 14px; }
.prose ul.bullet{ list-style:disc; padding-left:1.4em; margin:0 0 16px; }
.prose ul.bullet li{ font-size:15px; line-height:1.9; color:var(--muted); margin-bottom:6px; }
.prose ol.num{ list-style:decimal; padding-left:1.5em; margin:0 0 16px; }
.prose ol.num li{ font-size:15px; line-height:1.9; color:var(--muted); margin-bottom:6px; }
.prose a{ color:var(--accent); text-decoration:underline; }
.prose .updated{ font-family:var(--font-en); font-size:13px; color:var(--muted); }

/* =======================================================================
   Form controls (CONTACT)
   ======================================================================= */
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-size:14px; font-weight:600; color:var(--ink); }
.field .req{ color:#fff; background:var(--accent); font-size:10px; font-weight:700; border-radius:4px; padding:2px 6px; margin-left:6px; vertical-align:middle; }
.field .opt{ color:var(--muted); font-size:12px; margin-left:6px; }
.input,.textarea,.select{
  font-family:var(--font-body); font-size:15px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:13px 14px; width:100%;
}
.textarea{ min-height:170px; resize:vertical; }
.input::placeholder,.textarea::placeholder{ color:#b6b6ac; }
.input:focus,.textarea:focus,.select:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }

/* =======================================================================
   Breadcrumb
   ======================================================================= */
.breadcrumb{ display:flex; align-items:center; gap:8px; font-family:var(--font-en); font-size:13px; }
.breadcrumb .crumb{ color:var(--muted); }
.breadcrumb .sep{ color:var(--line); }
.breadcrumb .crumb--active{ color:var(--accent); }

/* =======================================================================
   Responsive
   ======================================================================= */
@media (max-width:1100px){
  :root{ --gutter:48px; --header-gutter:32px; }
}
@media (max-width:860px){
  :root{ --gutter:28px; --header-gutter:20px; }
  .main-nav, .header-cta{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .site-header.nav-open .main-nav{
    display:flex; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; background:var(--surface);
    border-bottom:1px solid var(--line); padding:8px 0;
  }
  .site-header.nav-open .main-nav a{ padding:14px var(--header-gutter); width:100%; }
  .footer-main{ gap:48px; }
  .footer-links{ gap:40px; }
}
@media (max-width:600px){
  body{ font-size:15px; }
}

/* Accessibility */
:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; border-radius:4px; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }