@charset "utf-8";

/* NeoGraphic ── 事業紹介サイト 唯一のスタイルシート
   ライト固定（ダークテーマは作らない）。動きは付けない。 */

:root{
  /* 青の三段＝第2〜10稿で確定 */
  --sea:#1B5E96;        /* 基準の青。白地で 6.8:1 */
  --sea-deep:#0E3F6B;   /* 暗い青。線・影・暗い地はこの色相（208°）から */
  --sea-light:#6FB0E3;  /* 暗い地の上の青 */
  --shadow:#08263F;     /* 影と線。黒は使わない */
  /* 無彩色（青みを帯びた灰） */
  --paper:#F5F7F8; --card:#FFFFFF; --ink:#131A21; --body:#2C3640; --slate:#5A6774;
  --hair:#D8DEE3; --hair-2:#EAEEF1;
  /* 文字 */
  --font-jp:"Noto Sans JP",-apple-system,"Hiragino Sans","Yu Gothic",sans-serif;
  /* 寸法 */
  --max:1120px; --gutter:24px; --radius:6px;
}

/* ── 土台 ───────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--card);color:var(--body);
  font-family:var(--font-jp);font-size:15px;font-weight:400;line-height:1.9;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  min-height:100vh;display:flex;flex-direction:column}   /* 短いページ（404）でも脚を下端に */
main{flex:1 0 auto}
img{display:block;max-width:100%;height:auto}
a{color:var(--sea)}
a:hover,a:focus-visible{text-decoration-thickness:from-font;text-underline-offset:.2em}
:focus-visible{outline:2px solid var(--sea);outline-offset:3px}

h1,h2,h3{color:var(--ink);margin:0;text-wrap:balance;line-height:1.55}
h1{font-size:28px;font-weight:700;letter-spacing:.01em}
h2{font-size:22px;font-weight:700;letter-spacing:.01em}
h3{font-size:17px;font-weight:500}
p{margin:0}
p+p{margin-top:1.2em}

/* 読み飛ばし */
.skip{position:absolute;left:-9999px;top:0;white-space:nowrap}
.skip:focus{left:12px;top:12px;z-index:9;background:var(--card);color:var(--sea);
  padding:10px 16px;border-radius:var(--radius);box-shadow:0 2px 10px rgba(8,38,63,.20);text-decoration:none}

/* ── 帯（header） ──────────────────────────── */
.bar{position:absolute;left:0;right:0;top:0;z-index:2;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 40px;
  background:rgba(255,255,255,.24);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34), inset 0 0 0 .5px rgba(255,255,255,.35), 0 .5px 0 rgba(8,38,63,.28), inset 0 -1px 0 rgba(8,38,63,.10)}
.bar nav{display:flex;gap:22px;font-size:13px;color:var(--body);letter-spacing:.02em}
.bar nav a{color:inherit;text-decoration:none} .bar nav a:hover,.bar nav a:focus-visible{text-decoration:underline;text-underline-offset:.2em}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .bar{background:rgba(255,255,255,.92)} }   /* 退化＝不透明 */
.bar.bar-dark{background:rgba(255,255,255,.75)}   /* 暗い写真の上＝会社概要。文字 7.82:1・ロゴ 6.88:1 */
.bar.static{position:static;background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 1px 0 var(--hair)}         /* プラポリ用 */
@media (max-width:820px){ .bar{padding:0 var(--gutter)} .bar nav{gap:14px} }
@media (max-width:480px){ .bar nav a:nth-child(3){display:none} }   /* 「お問い合わせ」は脚にもある */

.brand{display:flex;align-items:center;text-decoration:none}
.brand img{height:22px;width:auto}
.bar nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:.2em}

/* ── 見出し写真（hero） ────────────────────── */
.hero{position:relative;min-height:min(72vh,640px);display:flex;align-items:center;
  padding:120px 0 88px;overflow:hidden;background:var(--paper)}
.hero>picture,.hero>picture img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.hero::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.28) 45%,rgba(27,94,150,.10) 100%)}
.hero-inner{position:relative;z-index:1;width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

.wordmark{width:min(560px,62vw);height:auto;margin:0}
.intro{padding-block:40px}
.intro .lead{font-size:17px;color:var(--ink);max-width:66ch}
.intro .lead-en{margin-top:14px;font-size:13px;line-height:1.85;color:var(--body);max-width:66ch}

/* 会社概要の頭 */
.hero-tokyo{min-height:min(46vh,420px);padding:112px 0 56px;background:var(--sea-deep)}
.hero-tokyo>picture,.hero-tokyo>picture img{object-position:50% 30%}
.hero-tokyo::before{background:linear-gradient(180deg,rgba(14,63,107,.45),rgba(14,63,107,.62))}
.hero-tokyo h1{color:#F5F9FC}
.hero-tokyo .lead{margin-top:14px;font-size:15px;color:#F5F9FC;max-width:38em}
/* 幅 1207px 未満は、ロゴの四方 12% の余白を保つため hero だけ内側に寄せる（§4） */
@media (max-width:1206px){ .hero-inner{padding-inline:max(var(--gutter),8vw)} }

/* ── 版面 ──────────────────────────────── */
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.section{border-top:1px solid var(--hair);padding-block:40px}
.section h2+p,.section h2+.grid,.section h2+.facts,.section h2+.dl,.section h2+.origin{margin-top:20px}
.section p,.section li{max-width:66ch}
.note{margin-top:20px;font-size:13px;line-height:1.85;color:var(--slate)}
.mail{margin-top:14px;font-size:17px}

/* 事業内容の三項目 */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:32px}
.grid h3{margin-bottom:8px}
.grid p{max-width:none}

/* 社名の由来（写真の添え） */
.origin{display:flex;gap:32px;align-items:flex-start}
.origin p{flex:1 1 auto}
.origin picture{flex:0 0 auto}
.origin img{width:200px;border-radius:var(--radius)}

/* 定義列（トップの会社概要・English summary） */
.dl{display:grid;grid-template-columns:9em 1fr;margin:20px 0 0}
.dl dt{color:var(--slate);font-weight:500;padding:12px 20px 12px 0;border-top:1px solid var(--hair)}
.dl dd{margin:0;padding:12px 0;border-top:1px solid var(--hair)}
.dl dt:last-of-type,.dl dd:last-of-type{border-bottom:1px solid var(--hair)}

/* 事業者情報の表 */
.facts{width:100%;max-width:860px;border-collapse:collapse;margin-top:20px;text-align:left}
.facts th{width:9em;font-weight:500;color:var(--slate);vertical-align:top;padding:12px 20px 12px 0;border-top:1px solid var(--hair)}
.facts td{vertical-align:top;padding:12px 0;border-top:1px solid var(--hair)}
.facts tr:last-child th,.facts tr:last-child td{border-bottom:1px solid var(--hair)}

/* ── 脚（footer） ─────────────────────────── */
.foot{border-top:1px solid var(--hair);margin-top:40px;padding-block:22px;color:var(--slate);font-size:12px;line-height:1.8}
.foot-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
.foot-row img{height:15px;width:auto}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin:12px 0 0;padding:0;list-style:none}
.foot-links li{max-width:none}

/* ── 文書ページ（プライバシーポリシー・404） ── */
.doc{max-width:760px;margin:0 auto;padding:48px var(--gutter) 8px}
.doc h1{margin-bottom:20px}
.doc h2{font-size:22px;margin:40px 0 0;padding-top:40px;border-top:1px solid var(--hair-2)}
.doc p{margin-top:16px}
.doc p+p{margin-top:16px}
.doc .meta{font-size:13px;line-height:1.9;color:var(--slate)}
.doc .lead{color:var(--ink)}
.doc ul{margin:16px 0 0;padding-left:1.25em}
.doc li{margin-top:8px}
.doc hr{border:0;border-top:1px solid var(--hair);margin:40px 0 24px}
.toc{margin-top:24px;padding:20px 24px;background:var(--paper);border:1px solid var(--hair-2);border-radius:var(--radius)}
.toc ol{margin:0;padding-left:1.6em;columns:2;column-gap:32px;font-size:13.5px;line-height:1.9}
.toc li{margin:0;break-inside:avoid}
.doc-404{padding-block:96px 120px;text-align:left}

/* ── 狭い画面 ─────────────────────────────── */
@media (max-width:820px){
  .grid{grid-template-columns:1fr;gap:24px}
  .origin{flex-direction:column;gap:20px}
  .hero{padding:104px 0 64px}
  .intro{padding-block:28px}
  .hero-tokyo{padding:96px 0 48px}
  .wordmark{margin-bottom:56px}
}
@media (max-width:560px){
  .section{padding-block:28px}
  .foot{margin-top:28px}
  .doc{padding-top:36px}
  .doc h2{margin-top:28px;padding-top:28px}
  .toc ol{columns:1}
  h1{font-size:25px} h2{font-size:20px}
  .dl{grid-template-columns:1fr}
  .dl dt{padding:12px 0 0;border-top:1px solid var(--hair)}
  .dl dd{padding:2px 0 12px;border-top:0}
  .dl dt:last-of-type{border-bottom:0}
  .facts th,.facts td{display:block;width:auto;max-width:none}
  .facts th{padding:12px 0 0;border-top:1px solid var(--hair)}
  .facts td{padding:2px 0 12px;border-top:0}
  .facts tr:last-child th{border-bottom:0}
  .foot-row{flex-direction:column;align-items:flex-start;gap:10px}
}