/* 見た目B：作り変え案の形に、Aの青を使う */
:root {
  --main: #004ca2;
  --main-dark: #003a7d;
  --main-soft: #ebf2fb;
  --navy: #004ca2;
  --orange: #0a63c9;
  --orange-dark: #004ca2;
  --on-blue: #b9d4f4;
  --ink: #17212e;
  --gray: #f3f4f6;
  --radius: 8px;
  --hd: 76px;
  --latin: "Inter", "Helvetica Neue", Arial, sans-serif;
}
body { letter-spacing: .04em; }

/* 上の帯：紺 */
.hd { background: var(--navy); }
.gnav a { color: #dfe6ef; border-radius: 6px; }
.gnav a:hover, .gnav a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.08); }
.nav-contact a { background: var(--orange); color: #fff; }
.nav-contact a:hover { background: var(--orange-dark); color: #fff; }
.menu-btn span { background: #fff; }
.hd a:focus-visible, .menu-btn:focus-visible { outline-color: #fff; }
@media (max-width: 1080px) { .nav-contact a, .nav-contact a:hover { background: var(--orange); } }

/* 見出し：オレンジの小さな英字＋大きな日本語、左ぞろえ */
.sec-head .en { font-family: var(--latin); font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--orange); display: flex; align-items: center; gap: 12px; }
.sec-head .en::before { content: ""; width: 28px; height: 2px; background: var(--orange); }
.sec-head h2 { font-size: clamp(26px, 3.6vw, 40px); color: var(--navy); letter-spacing: .04em; margin-top: 10px; }
.lead { color: var(--navy); }

/* ページの題：紺の上に写真を右半分だけ */
.pagehead { background: var(--navy); overflow: hidden; }
.pagehead::before { left: 45%; background: linear-gradient(90deg, var(--navy), rgba(15, 34, 56, .2) 60%), var(--bg, none) center / cover; }
.pagehead .en { font-family: var(--latin); font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--orange); }
.pagehead h1 { font-size: clamp(28px, 4.4vw, 46px); }

/* 大きな写真：暗めに沈めて、文字を大きく */
.hero picture img { height: min(86vh, 780px); }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(10, 22, 38, .85), rgba(10, 22, 38, .25) 65%), linear-gradient(90deg, rgba(10, 22, 38, .6), transparent 70%); }
.hero-text { align-items: flex-end; padding-bottom: clamp(48px, 8vw, 96px); }
.hero-copy { font-size: clamp(18px, 2.4vw, 26px); max-width: 760px; line-height: 1.9; }
.hero .big { border-bottom-color: var(--orange); }
.hero .free { background: var(--orange); color: #fff; }

/* 入口：紺の帯に4つ、矢印つき */
.quick { background: var(--navy); }
.quick a { color: #fff; text-align: left; padding: 26px 28px; position: relative; border-left: 1px solid rgba(255,255,255,.1); }
.quick a::after { content: "→"; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); color: var(--orange); transition: transform .2s; }
.quick a:hover { background: rgba(255,255,255,.06); }
.quick a:hover::after { transform: translate(4px, -50%); }
.quick small { order: -1; font-family: var(--latin); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--orange); }
.quick span { font-size: 16px; }
.quick a { display: flex; flex-direction: column; }
@media (max-width: 700px) { .quick a { padding: 20px; } .quick a:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.1); } }

/* ボタン */
.btn { border-radius: 6px; border-color: var(--navy); color: var(--navy); }
.btn:hover { background: var(--navy); color: #fff; }
.btn.fill { background: var(--orange); border-color: var(--orange); }
.btn.fill:hover { background: var(--orange-dark); }
.btn::after { color: var(--orange); }
.btn:hover::after { color: #fff; }
.btn-light { border-color: #fff; color: #fff; }

/* お知らせ：線だけで、すっきり */
.news-list { border-radius: 0; background: transparent; border-top: 1px solid var(--ink); }
.news-list > li { border-bottom: 1px solid #d5dae1; }
.news-list > li + li { border-top: 0; }
.news-list summary { padding: 22px 8px; }
.tag { background: var(--navy); border-radius: 4px; }

/* 会社について */
.about { background: #fff; }
.about-photo img { border-radius: 0; aspect-ratio: 4 / 5; }
.about .lead { font-size: clamp(22px, 3vw, 30px); }

/* 事業内容：大きな番号 */
.service { background: var(--gray); }
.biz a, .biz li > div { border: 1px solid #e1e5ea; padding: 0; position: relative; }
.biz img { order: -1; margin: 0; width: 100%; aspect-ratio: 16 / 10; }
.biz .no { position: absolute; top: 12px; left: 14px; font-family: var(--latin); font-size: 13px; letter-spacing: .14em; color: #fff; background: var(--orange); padding: 2px 10px; border-radius: 4px; }
.biz h3 { margin: 20px 22px 6px; color: var(--navy); }
.biz .txt { margin: 0 22px 22px; }
.biz .more { margin: 0; padding: 12px 22px; color: var(--orange); font-family: var(--latin); }
.biz a:hover { border-color: var(--orange); }

/* 記事のカード：線だけ */
.cards a { border: 1px solid #e1e5ea; }
.cards a:hover { border-color: var(--orange); }
.cards .thumb { background: var(--navy); }
.cards .thumb.noimg-box { background: var(--navy); }
.cards .thumb .noimg-en { font-family: var(--latin); font-size: 14px; letter-spacing: .3em; text-transform: uppercase; color: var(--orange); }
.cards .thumb .noimg-jp { color: #c9d3df; font-size: 15px; letter-spacing: .1em; }

/* 関連事業 */
.related img { border-radius: 4px; }
.related .n { color: var(--navy); }

/* SDGs */
.sdgs-box { background: var(--orange); border-radius: 4px; }

/* お問い合わせ：紺にオレンジのボタン */
.contact-band { background: var(--navy); text-align: left; }
.contact-band .wrap { display: grid; grid-template-columns: 1fr auto; gap: 8px 48px; align-items: end; }
.contact-band .sec-head { grid-column: 1 / -1; margin-bottom: 8px; }
.contact-band .sec-head h2 { color: #fff; }
.contact-band .btn { grid-row: 2; grid-column: 2; background: var(--orange); border-color: var(--orange); color: #fff; padding: 18px 40px; font-size: 17px; margin: 0; align-self: center; }
.contact-band .btn::after { color: #fff; }
.contact-band .btn:hover { background: var(--orange-dark); }
@media (max-width: 760px) { .contact-band .wrap { grid-template-columns: 1fr; } .contact-band .btn { grid-row: auto; grid-column: auto; justify-self: start; } }

/* 下の帯 */
.ft { background: #0a1828; color: #b9c4d2; }
.ft a { color: #b9c4d2; }
.ft a:hover { color: #fff; }

/* 部品 */
.ex-card { border: 1px solid #e1e5ea; }
.ex-filter button[aria-pressed="true"], .ex-filter button:hover { background: var(--navy); border-color: var(--navy); }
.cat-tabs a[aria-current="page"], .cat-tabs a:hover { background: var(--navy); border-color: var(--navy); }
.pager span { background: var(--navy); border-color: var(--navy); }
.table th { background: var(--gray); color: var(--navy); }
.form { border: 1px solid #e1e5ea; }
.form button { background: var(--orange); border-radius: 6px; }
.form button:hover { background: var(--orange-dark); }
.to-top { background: var(--orange); }

/* Aの色に合わせる：青い地の上は明るい色、SDGsはAと同じオレンジ */
.nav-contact a { background: #fff; color: var(--main); }
.nav-contact a:hover { background: var(--main-soft); color: var(--main); }
@media (max-width: 1080px) { .nav-contact a, .nav-contact a:hover { background: var(--main); color: #fff; } }
.pagehead { background: linear-gradient(100deg, #003a7d, #004ca2); }
.pagehead::before { background: linear-gradient(90deg, #004ca2, rgba(0, 76, 162, .25) 60%), var(--bg, none) center / cover; }
.pagehead .en, .quick small, .quick a::after, .contact-band .sec-head .en { color: var(--on-blue); }
.contact-band .sec-head .en::before { background: var(--on-blue); }
.quick a { border-left-color: rgba(255,255,255,.18); }
.hero::after { background: linear-gradient(0deg, rgba(0, 40, 90, .85), rgba(0, 40, 90, .2) 65%), linear-gradient(90deg, rgba(0, 45, 100, .55), transparent 70%); }
.hero .big { border-bottom-color: #fff; }
.contact-band .btn { background: #fff; border-color: #fff; color: var(--main); }
.contact-band .btn::after { color: var(--main); }
.contact-band .btn:hover { background: var(--main-soft); color: var(--main); }
.cards .thumb.noimg-box { background: linear-gradient(135deg, #004ca2, #0a63c9); }
.cards .thumb .noimg-en { color: var(--on-blue); }
.cards .thumb .noimg-jp { color: #fff; }
.sdgs-box { background: linear-gradient(135deg, #f07a3c, #e2612a); }
.ft { background: #3f4650; color: #e3e7ec; }
.ft a { color: #e3e7ec; }