/* Base theme */
:root{ --bg:#ffffff; --text:#0A1F44; --accent:#1067B0; --muted:#667085; }
*{box-sizing:border-box}
body{
  margin:0;
  font-family:'Inter','Noto Sans JP',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,'Noto Sans JP',sans-serif;
  color:var(--text);
  background:var(--bg);
}
.container{ max-width:1100px; margin:0 auto; padding:0 20px }
.site-header{ border-bottom:1px solid #e6e9ee; background:#fff; position:sticky; top:0; z-index:100 }
.header-inner{ display:flex; align-items:center; gap:16px; justify-content:flex-start; height:64px }
.logo{ height:40px; width:auto }
.lang-toggle{ border:1px solid var(--accent); color:var(--accent); background:#fff; padding:8px 12px; border-radius:8px; font-weight:600; cursor:pointer }

/* Navigation pushed to the right, next to the language toggle */
.site-nav{ display:flex; align-items:center; gap:20px; margin-left:auto; }
.nav-link{ color:var(--text); text-decoration:none; font-weight:600; opacity:.85 }
.nav-link:hover{ color:var(--accent); opacity:1 }

.hero{ padding:0 }
.hero h1{ font-size:32px; margin:0 0 12px }
.lead{ font-size:18px; color:var(--muted); max-width:720px }
.btn{ display:inline-block; padding:10px 16px; border:1px solid var(--accent); color:var(--accent); border-radius:8px; text-decoration:none; font-weight:600; margin-top:16px }
.btn.primary{ background:var(--accent); color:#fff }

.section{ padding:56px 0 }
.section h2{ font-size:24px; margin:0 0 20px }

.grid{ display:grid; gap:20px }
.grid.one{ grid-template-columns:1fr }
.grid.two{ grid-template-columns:repeat(2,1fr) }

.card{ border:1px solid #e6e9ee; border-radius:12px; padding:16px; background:#fff }
.card h3{ margin:0 0 8px; font-size:18px }
.solution-img{ width:100%; height:auto; border-radius:8px; display:block }
.solution-media{ margin:8px 0 12px }

/* === About Us（会社概要）: Key-Value list alignment === */
.kv {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;              /* 各<li>を縦に積む */
  row-gap: 0.75rem;           /* 行間 */
}
.kv > li {
  /* 各行を 2 カラム（ラベル／値）でレイアウト */
  display: grid;
  grid-template-columns: 13rem 1fr; /* ラベル固定幅／値は可変 */
  column-gap: 1rem;
  align-items: start;         /* 値が複数行でも上端で揃える */
  margin: 0;                  /* 既存marginのリセット */
}
.kv > li > span {
  color: var(--muted);
  text-align: right;          /* ラベルは右寄せ */
  line-height: 1.5;
  word-break: keep-all;       /* 和文＋英字の見栄え優先（過度な分割回避） */
}
.kv > li > strong {
  color: var(--text);
  font-weight: 600;
  line-height: 1.6;
}
.kv > li a {
  color: inherit;
  text-decoration: underline;
  word-break: break-all;      /* URL 等の長文を適切に折り返し */
}
/* スペーサー行の上書き（HTMLに .kv-spacer が存在） */
.kv > li.kv-spacer {
  display: block !important;
  height: 0.75rem;
  padding: 0;
  margin: 0;
}

/* Site footer */
.site-footer{ border-top:1px solid #e6e9ee; background:#fff }
.footer-inner{ height:64px; display:flex; align-items:center }

/* Hero img + overlay */
.hero.hero--image{ position:relative; overflow:hidden; background-color:#0A1F44 }
.hero-img{
  display:block;
  width:100%;
  height:60vh; /* JP: 視認性を確保 / EN: improve initial visibility */
  object-fit:cover; /* JP: 全面表示しつつ必要部分をトリミング / EN: fill and crop */
  object-position:center; /* JP: 主役を中央に / EN: keep subject centered */
  aspect-ratio: 16 / 9; /* CLS 対策 */
  background-color:#0A1F44
}
.hero-overlay{ position:absolute; inset:0; background:linear-gradient(to bottom, rgba(10,31,68,0.45) 0%, rgba(10,31,68,0.20) 40%, rgba(10,31,68,0.35) 100%); color:#fff; display:flex; align-items:center }
.hero-overlay .lead{ color:#e6f2fb }
.hero-overlay h1, .hero-overlay .lead{ text-shadow:0 1px 2px rgba(0,0,0,.35) }

/* Responsive */
@media (max-width:900px){
  .grid.two{ grid-template-columns:1fr }
}
@media (max-width:800px){
  .header-inner{ height:56px }
  .logo{ height:32px }
  .hero h1{ font-size:26px }
  .hero-img{ height:68vh }
  .site-nav{ gap:12px; }
  .nav-link{ font-weight:600; }
}
/* ---- Responsive（モバイル: 幅 ≤ 640px）---- */
@media (max-width:560px){
  /* Stack nav under logo while keeping nav near the toggle side */
  .header-inner{ flex-wrap:wrap; row-gap:10px }
  .site-nav{ order:3; width:100%; justify-content:flex-end } /* push nav to right on small screens */
  .lang-toggle{ order:2 }
}
@media (max-width:640px){
  .kv > li {
    grid-template-columns: 1fr;  /* 1カラムに切替 */
    row-gap: 0.25rem;
  }
  .kv > li > span {
    text-align: left;            /* モバイルでは左寄せ */
    color: #666;
  }
}

/* === Added by Copilot: form layout updates ===
/* Form layout adjustments: one item per line & wider message box */
.contact-form label { display:block; margin: 12px 0; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  max-width: 860px; /* wider */
  padding: 10px 12px;
  border: 1px solid #e6e9ee;
  border-radius: 8px;
  font-size: 16px;
  background: #fff;
}
.contact-form textarea.wide-message { min-height: 180px; }
.form-actions { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.hp-field { position:absolute !important; left:-10000px !important; height:0 !important; width:0 !important; opacity:0 !important; pointer-events:none !important; }
.form-status { margin-top:8px; font-weight:600; }
/* === End updates === */


/* === Job accordion using <details> === */
.job-toggle summary {
  list-style: none;
  cursor: pointer;
}

.job-toggle summary::-webkit-details-marker {
  display: none;
}

.job-toggle summary h3 {
  margin: 0;
  display: inline-block;
}

.job-toggle summary::after {
  content: "＋";
  float: right;
  font-size: 20px;
  font-weight: bold;
  color: var(--accent);
}

.job-toggle[open] summary::after {
  content: "－";
}