:root{
  --navy:#0A2A4F; --blue:#1E5FA8; --cyan:#4FB3D9;
  --slate:#6B7684; --rule:#C7D0DA; --paper:#F7F9FB; --white:#FFFFFF;
  --ink:#43536A;
  --maxw:1040px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--white); color:var(--navy);
  font-family:"Yu Gothic","游ゴシック","Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
  font-size:16px; line-height:1.9; letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 clamp(18px,4vw,24px)}

/* ---- ヘッダー ---- */
header{
  z-index:10;
  background:rgba(255,255,255,.94); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);
}
/* ロゴとナビが1行に収まる幅でのみ固定する */
@media(min-width:880px){ header{position:sticky; top:0} }
.headbar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px clamp(16px,2.5vw,24px); min-height:92px; padding:14px clamp(18px,4vw,24px)}
.headbar svg{display:block; height:clamp(36px,4.8vw,58px); width:auto; max-width:100%}
nav{display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; gap:0 clamp(14px,1.9vw,24px)}
nav a{color:var(--slate); text-decoration:none; font-size:clamp(13px,1.15vw,14px); letter-spacing:.06em; white-space:nowrap; padding:9px 0}
nav a:hover{color:var(--blue)}
nav a.lang{
  border:1px solid var(--rule); border-radius:2px;
  padding:10px 14px; font-size:12.5px; letter-spacing:.1em;
}
nav a.lang:hover{border-color:var(--blue)}
a:focus-visible{outline:2px solid var(--cyan); outline-offset:3px}

/* ---- ヒーロー ---- */
.hero{background:var(--navy); color:var(--white); padding:clamp(58px,8.5vw,96px) 0 clamp(54px,7.5vw,88px)}
/* 高さだけを指定すると、極端に狭い画面（280px級の折りたたみ端末）で横に溢れる。
   max-width で頭を押さえる。縦横比は保たれる */
.hero svg{display:block; height:clamp(88px,13vw,156px); width:auto; max-width:100%; margin-bottom:52px}
.hero h1{margin:0 0 26px; font-size:clamp(26px,4.4vw,42px); font-weight:600; line-height:1.55; letter-spacing:.04em; text-wrap:balance}
.hero p{margin:0; max-width:44em; color:#C3D2E0; font-size:clamp(15px,1.7vw,17px)}
.tagline-en{margin-top:34px; color:var(--cyan); font-size:13px; letter-spacing:.22em}

/* ---- セクション ---- */
section{padding:clamp(54px,7vw,84px) 0; border-top:1px solid var(--rule)}
/* 一覧ページでは、大きい行（.lead）を h1 にし、上の小さい英字は見出しにしない。
   見出しの階層を正しく保ちつつ、見た目は変えないための .eyebrow */
h2,.eyebrow{margin:0 0 12px; font-size:13px; font-weight:600; letter-spacing:.24em; color:var(--blue)}
.lead{margin:0 0 20px; font-size:clamp(20px,2.6vw,27px); font-weight:600; line-height:1.6; text-wrap:balance}
.intro{margin:0 0 48px; max-width:46em; color:var(--ink); font-size:15px}
.lead + .cards, .lead + .domains, .lead + .cards3{margin-top:48px}

/* ---- Blue Aegis Media の題字 ----
   ブログ（/blog/）でだけ使う派生ロゴ。英字を並べていた場所にそのまま置き、
   高さだけを幅に連動させる（切り替え点を増やさない）。
   規制解説（/insights/）の .kicker は英字のままなので、指定は .medialogo に限る。
   lg=一覧・タグの題字／sm=記事の冠。 */
.masthead{margin:0 0 20px}
.medialogo{display:block; width:auto; max-width:100%}
.medialogo.lg{height:clamp(46px,6.4vw,64px)}
/* sm の下限 39px は、ガイドラインの最小使用サイズ（ロゴタイプ併記 90px 幅）から逆算した値。
   viewBox 380 のうち字面は 304 までなので、幅 114px でちょうど 90px の字面になる。 */
.medialogo.sm{height:clamp(39px,5.2vw,44px)}

/* ---- メッセージ ---- */
.message{border-top:0}
.message .lead{font-size:clamp(23px,3.3vw,35px); line-height:1.5; margin-bottom:36px}
.message p{margin:0 0 22px; max-width:38em; font-size:15.5px; color:var(--ink); line-height:2}
.message p:last-of-type{margin-bottom:0}
.message .pull{
  margin:42px 0 0; padding:0 0 0 22px; border-left:3px solid var(--cyan);
  font-size:clamp(17px,2.2vw,22px); font-weight:600; color:var(--navy);
  line-height:1.65; max-width:26em;
}

/* 段組みの最小幅は min(...,100%) で包む。
   包まないと、画面が最小幅より狭いときに段が縮まず横スクロールが出る（320pxで発生していた）。 */
/* ---- 事業内容 ---- */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(268px,100%),1fr)); gap:34px}
.card{border-top:3px solid var(--blue); padding-top:22px}
.card:nth-child(2){border-color:var(--cyan)}
.card:nth-child(3){border-color:var(--slate)}
.card h3{margin:0 0 12px; font-size:17px; font-weight:600; line-height:1.6}
.card p{margin:0; font-size:14.5px; color:var(--ink)}

/* ---- 技術領域 ---- */
.domains{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr)); gap:2px; background:var(--rule); border:1px solid var(--rule)}
.domain{background:var(--white); padding:26px 24px}
.domain h3{margin:0 0 8px; font-size:15.5px; font-weight:600}
.domain p{margin:0; font-size:14px; color:var(--ink); line-height:1.8}

/* ---- ポートフォリオ ---- */
.portfolio{background:var(--paper)}
.stat{display:flex; align-items:baseline; gap:14px; margin:0 0 8px}
.stat b{font-size:clamp(46px,8vw,76px); font-weight:600; line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--blue)}
.stat span{font-size:16px; font-weight:600}
.stat-note{margin:0 0 40px; font-size:13px; color:var(--slate)}
.pol{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); gap:32px}
.pol h3{margin:0 0 10px; font-size:15.5px; font-weight:600}
.pol p{margin:0; font-size:14.5px; color:var(--ink)}

/* ---- ライセンス ---- */
.cards3{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr)); gap:32px; margin-bottom:64px}
.offer{border:1px solid var(--rule); padding:26px 24px}
.offer h3{margin:0 0 10px; font-size:16px; font-weight:600}
.offer p{margin:0; font-size:14.5px; color:var(--ink)}
.steps{list-style:none; counter-reset:s; margin:0 0 64px; padding:0; display:grid; gap:26px}
.steps li{counter-increment:s; display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:start}
.steps li::before{
  content:counter(s,decimal-leading-zero);
  font-size:13px; font-weight:600; letter-spacing:.1em; color:var(--cyan);
  font-variant-numeric:tabular-nums; padding-top:3px;
}
.steps h3{margin:0 0 6px; font-size:15.5px; font-weight:600}
.steps p{margin:0; font-size:14.5px; color:var(--ink)}
.faq{margin:0}
.faq dt{font-size:15px; font-weight:600; margin-top:28px; padding-top:22px; border-top:1px solid var(--rule)}
.faq dd{margin:8px 0 0; font-size:14.5px; color:var(--ink)}

/* ---- 考え方 ---- */
.creed{background:var(--navy); color:var(--white)}
.creed h2{color:var(--cyan)}
.creed blockquote{margin:0 0 26px; padding:0 0 0 22px; border-left:3px solid var(--cyan); font-size:clamp(19px,2.5vw,25px); font-weight:600; line-height:1.65}
.creed p{margin:0; max-width:48em; font-size:15px; color:#C3D2E0}

/* ---- 会社概要 ---- */
table{border-collapse:collapse; width:100%; font-size:14.5px}
th,td{text-align:left; vertical-align:top; padding:15px 0; border-bottom:1px solid var(--rule)}
th{width:11em; font-weight:600; color:var(--slate); font-size:13.5px; letter-spacing:.06em}
td ol{margin:0; padding-left:1.3em}
td ol li{margin-bottom:4px}
.scroller{overflow-x:auto}

/* ---- 問い合わせ ---- */
.contact{background:var(--paper)}
.form{display:grid; gap:28px; max-width:44em; margin:0 0 34px}
.field > span{display:block; font-size:13px; font-weight:600; letter-spacing:.08em; color:var(--slate); margin-bottom:12px}
.opts{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr)); gap:10px}
.opt{position:relative}
.opt input{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer}
.opt span{
  display:block; padding:13px 16px; background:var(--white);
  border:1px solid var(--rule); font-size:14.5px; line-height:1.5; color:var(--ink);
  transition:border-color .15s, color .15s, box-shadow .15s;
}
.opt input:checked + span{border-color:var(--blue); color:var(--navy); box-shadow:inset 0 0 0 1px var(--blue)}
.opt input:focus-visible + span{outline:2px solid var(--cyan); outline-offset:2px}
.field textarea, .field input[type=text]{
  width:100%; padding:13px 16px; background:var(--white);
  border:1px solid var(--rule); font:inherit; font-size:15px; color:var(--navy);
}
.field textarea{min-height:120px; resize:vertical; line-height:1.8}
.field textarea:focus, .field input[type=text]:focus{outline:2px solid var(--cyan); outline-offset:0; border-color:var(--blue)}
.send{
  display:inline-block; padding:16px 34px; background:var(--navy); color:var(--white);
  border:0; font:inherit; font-size:15.5px; font-weight:600; letter-spacing:.06em;
  cursor:pointer; transition:background .15s;
}
.send:hover{background:var(--blue)}
.send:focus-visible{outline:2px solid var(--cyan); outline-offset:3px}
.note{margin:18px 0 0; font-size:13px; color:var(--slate); line-height:1.85; max-width:40em}
.fallback{margin:30px 0 0; padding-top:26px; border-top:1px solid var(--rule); font-size:14px; color:var(--ink)}
.mail{display:inline-block; margin-top:14px; padding-top:4px; font-size:clamp(17px,2.4vw,22px); color:var(--navy); text-decoration:none; border-bottom:2px solid var(--cyan); padding-bottom:6px; letter-spacing:.03em}
.mail:hover{color:var(--blue)}

/* ---- フッター ---- */
footer{background:var(--navy); color:#7E93AC; font-size:12.5px; padding:30px 0 40px}
footer .wrap{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
footer a{color:#7E93AC}

/* ---- 動きの演出 ----
   すべて prefers-reduced-motion: no-preference の中だけで定義する。
   動きを望まない利用者には初期状態そのものを与えない（要素が消えたままになる事故を防ぐ）。
   .js が付くのはスクリプトが動く場合だけなので、JS無効時も内容は常に見える。 */
@media(prefers-reduced-motion:no-preference){
  /* スクロール連動フェードイン */
  .js section .lead, .js section .intro, .js .card, .js .domain, .js .offer,
  .js .steps > li, .js .pol > div, .js .stat, .js .stat-note,
  .js .faq dt, .js .faq dd, .js .scroller,
  .js .message p, .js .message .pull,
  .js .creed blockquote, .js .creed p, .js .mail{
    opacity:0; transform:translateY(20px);
    transition:opacity .75s cubic-bezier(.2,.7,.3,1), transform .75s cubic-bezier(.2,.7,.3,1);
  }
  .js .in{opacity:1 !important; transform:none !important}
  .js .card:nth-child(2), .js .domain:nth-child(2), .js .offer:nth-child(2), .js .pol > div:nth-child(2){transition-delay:.09s}
  .js .card:nth-child(3), .js .domain:nth-child(3), .js .offer:nth-child(3), .js .pol > div:nth-child(3){transition-delay:.18s}
  .js .domain:nth-child(4){transition-delay:.27s}
  .js .domain:nth-child(5){transition-delay:.36s}
  .js .domain:nth-child(6){transition-delay:.45s}
  .js .steps > li:nth-child(2){transition-delay:.09s}
  .js .steps > li:nth-child(3){transition-delay:.18s}
  .js .steps > li:nth-child(4){transition-delay:.27s}

  /* ロゴの起動：積層の盾が下から順に積み上がる */
  .js .hero .band{opacity:0; animation:band .5s cubic-bezier(.2,.7,.3,1) forwards}
  .js .hero .b5{animation-delay:.10s}
  .js .hero .b4{animation-delay:.21s}
  .js .hero .b3{animation-delay:.32s}
  .js .hero .b2{animation-delay:.43s}
  .js .hero .b1{animation-delay:.54s}
  .js .hero .wm{opacity:0; animation:wm .6s ease .70s forwards}
  .js .hero h1, .js .hero > .wrap > p, .js .tagline-en{opacity:0; animation:wm .7s ease forwards}
  .js .hero h1{animation-delay:.95s}
  .js .hero > .wrap > p{animation-delay:1.10s}
  .js .tagline-en{animation-delay:1.25s}
  @keyframes band{from{opacity:0; transform:translateY(18px)} to{opacity:1; transform:none}}
  @keyframes wm{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
}

/* 幅に応じた連続的な調整で足りない、構造そのものを変える必要がある箇所だけを切り替える */

/* ナビが2行以上に折り返す幅では、ロゴの下に左揃えで置く */
@media(max-width:880px){
  .headbar{flex-direction:column; align-items:flex-start}
  nav{justify-content:flex-start}
}

/* 表は2列だと内容側が細くなりすぎるため、項目名と内容を縦に積む */
@media(max-width:760px){
  table, tbody, tr, th, td{display:block; width:auto}
  th{width:auto; padding:20px 0 4px; border-bottom:0}
  td{padding:0 0 20px; border-bottom:1px solid var(--rule)}
}

/* 連番と本文を横に並べる余地がなくなる幅で縦積みにする */
@media(max-width:600px){
  .steps li{grid-template-columns:1fr; gap:4px}
}

/* ================= 英語版の差分 =================
   本体は日本語版を基準にし、欧文組版で調整が要る箇所だけをここで上書きする。
   ページを増やしてもCSSは1つに保つ。 */
html[lang="en"] body{
  font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  line-height:1.8; letter-spacing:.01em;
}
html[lang="en"] nav a{letter-spacing:.04em}
html[lang="en"] .hero h1{font-size:clamp(28px,4.6vw,46px); line-height:1.35; letter-spacing:-.01em}
html[lang="en"] .hero p{max-width:40em}
html[lang="en"] .lead{font-size:clamp(21px,2.7vw,29px); line-height:1.4}
html[lang="en"] .intro{max-width:42em}
html[lang="en"] .card h3{line-height:1.5}
html[lang="en"] .domain p{line-height:1.7}
html[lang="en"] .creed blockquote{font-size:clamp(19px,2.5vw,26px); line-height:1.45}
html[lang="en"] .creed p{max-width:44em}
html[lang="en"] .message .lead{font-size:clamp(24px,3.4vw,37px); line-height:1.35}
html[lang="en"] .message p{max-width:36em; line-height:1.95}
html[lang="en"] .message .pull{font-size:clamp(17px,2.2vw,23px); line-height:1.5; max-width:24em}
html[lang="en"] th{letter-spacing:.04em}
html[lang="en"] .mail{letter-spacing:normal}

/* ================= 解説記事 ================= */
.article{max-width:40em; padding:clamp(46px,6vw,72px) 0 clamp(54px,7vw,84px)}
.article .kicker{font-size:12.5px; font-weight:600; letter-spacing:.2em; color:var(--blue); margin:0 0 14px}
.article h1{
  margin:0 0 20px; font-size:clamp(25px,3.6vw,38px); font-weight:600;
  line-height:1.45; letter-spacing:.01em; text-wrap:balance;
}
.article .meta{margin:0 0 44px; font-size:13px; color:var(--slate); letter-spacing:.04em}
.article h2{
  margin:52px 0 16px; font-size:clamp(18px,2.2vw,22px); font-weight:600;
  letter-spacing:.01em; color:var(--navy); line-height:1.55;
}
.article p{margin:0 0 22px; font-size:15.5px; line-height:2; color:var(--ink)}
.article strong{color:var(--navy)}
.article ul{margin:0 0 22px; padding-left:0; list-style:none}
.article ul li{
  position:relative; margin:0 0 14px; padding-left:26px;
  font-size:15.5px; line-height:1.95; color:var(--ink);
}
.article ul li::before{
  content:""; position:absolute; left:6px; top:.85em;
  width:7px; height:7px; background:var(--cyan);
}
.article blockquote{
  margin:0 0 26px; padding:20px 24px; background:var(--paper);
  border-left:3px solid var(--blue); font-size:15px; line-height:1.95; color:var(--navy);
}
.article .source{
  margin:52px 0 0; padding-top:26px; border-top:1px solid var(--rule);
  font-size:13.5px; line-height:1.9; color:var(--slate); word-break:break-word;
}
.article .source a{color:var(--blue)}
.article .backlink{margin:27px 0 0; font-size:14px}
.article .backlink a{display:inline-block; padding:13px 0; color:var(--blue); text-decoration:none}
.article .backlink a:hover{text-decoration:underline}

/* 記事末尾の相談導線 */
.cta{margin:56px 0 0; padding:30px 28px; background:var(--navy); color:var(--white)}
.cta p{margin:0 0 10px; font-size:15px; line-height:1.95; color:#C3D2E0}
/* 指で押す前提の高さを確保する（約45px）。文章中のリンクではなく単独の導線なので、
   見た目の余白ではなく当たり判定として padding を持たせる */
.cta a{
  display:inline-block; color:var(--white); text-decoration:none;
  border-bottom:2px solid var(--cyan); padding:8px 0 5px; font-size:16px; font-weight:600;
}
.cta a:hover{color:var(--cyan)}

/* 記事一覧 */
.postlist{list-style:none; margin:0; padding:0; display:grid; gap:0}
.postlist li{border-top:1px solid var(--rule)}
.postlist li:last-child{border-bottom:1px solid var(--rule)}
.postlist a{display:block; padding:28px 0; text-decoration:none; color:inherit}
.postlist a:hover h3{color:var(--blue)}
.postlist .date{display:block; font-size:12.5px; letter-spacing:.1em; color:var(--slate); margin-bottom:8px}
.postlist h3{margin:0 0 8px; font-size:clamp(17px,2.1vw,20px); font-weight:600; line-height:1.55; transition:color .15s}
.postlist p{margin:0; font-size:14.5px; color:var(--ink); line-height:1.85; max-width:44em}

/* 現在地。ビルド時に記事へ差し込まれる（tools/build.js の crumbsHtml）。
   フェードインの対象には入れない。読み手が最初に見る位置に、遅れて現れる要素を置かないため。 */
.article .crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:0 8px;
  margin:0 0 18px; font-size:12.5px; line-height:1.8; color:var(--slate); letter-spacing:.04em;
}
.article .crumbs a{color:var(--slate); text-decoration:none; border-bottom:1px solid transparent}
.article .crumbs a:hover{color:var(--blue); border-bottom-color:var(--blue)}
.article .crumbs .sep{color:var(--rule)}
.article .crumbs [aria-current]{
  min-width:0; flex:0 1 auto; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* 記事の下の関連記事。こちらもビルド時に差し込まれる */
.article .related{margin:52px 0 0; padding-top:26px; border-top:1px solid var(--rule)}
.article .related h2{margin:0 0 4px; font-size:12.5px; font-weight:600; letter-spacing:.18em; color:var(--slate)}
.article .related ul{margin:0; padding:0; list-style:none}
.article .related ul li{margin:0; padding:0; border-top:1px solid var(--rule)}
.article .related ul li::before{content:none}
.article .related ul li:first-child{border-top:none}
.article .related a{display:block; padding:16px 0; text-decoration:none; color:inherit}
.article .related .date{display:block; font-size:12px; letter-spacing:.1em; color:var(--slate); margin-bottom:5px}
.article .related .t{font-size:15px; font-weight:600; line-height:1.65; color:var(--navy); transition:color .15s}
.article .related a:hover .t{color:var(--blue)}

/* 記事のタグと、一覧のタグ導線 */
.article .meta a{color:var(--slate); text-decoration:none; border-bottom:1px solid var(--rule)}
.article .meta a:hover{color:var(--blue); border-bottom-color:var(--blue)}
.taglinks{display:flex; flex-wrap:wrap; align-items:center; gap:9px 10px; margin:0 0 30px}
.taglinks > span{font-size:12px; font-weight:600; letter-spacing:.16em; color:var(--slate)}
.taglinks a{
  display:inline-block; padding:12px 14px; border:1px solid var(--rule); border-radius:2px;
  font-size:13px; line-height:1.4; color:var(--ink); text-decoration:none;
  transition:border-color .15s, color .15s;
}
.taglinks a:hover{border-color:var(--blue); color:var(--blue)}