/* AW-NET service design system: the archive and member pages.
   Period identity (logo, cobalt/silver palette, angled corners, red/orange/green/blue
   group colours, bilingual labels) at modern legibility. The 2004 reconstruction keeps
   its original styling; this sheet is only for pages people read and use today. */
:root {
  --navy:#0b2a63; --cobalt:#1d5fae; --sky:#dcebf6; --page:#e8f0f7; --panel:#ffffff; --line:#c9d9e9;
  --ink:#14284a; --muted:#566b88; --red:#c4533b; --orange:#d9902c; --green:#5f9440; --steel:#4f7fb3;
  --focus:#0050c8;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body.service { margin:0; background:var(--page); color:var(--ink);
  font:15px/1.65 "Hiragino Kaku Gothic ProN","Hiragino Sans","Meiryo","Noto Sans JP",system-ui,-apple-system,"Segoe UI",Arial,sans-serif; }
.service a { color:var(--cobalt); text-underline-offset:2px; }
.service a:hover { color:var(--navy); }
.service a:focus-visible, .service button:focus-visible, .service input:focus-visible, .service select:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.service img { max-width:100%; height:auto; }
.service .en { color:var(--muted); font-weight:normal; font-size:.85em; }

/* Header */
.svc-header { background:var(--navy); border-bottom:4px solid #63bb36; }
.svc-bar { max-width:1120px; margin:0 auto; padding:8px 16px; display:flex; align-items:center; gap:10px 18px; flex-wrap:wrap; }
.svc-logo { display:block; line-height:0; }
.svc-logo img { height:46px; width:auto; }
.svc-section { color:#fff !important; text-decoration:none; font-weight:bold; font-size:17px; letter-spacing:.02em; }
.svc-section .en { color:#b9cbe6; }
.svc-nav { margin-left:auto; display:flex; flex-wrap:wrap; gap:2px; }
.svc-nav a { color:#e6efff !important; text-decoration:none; padding:7px 11px; border-radius:2px; font-size:14px; white-space:nowrap; border-bottom:3px solid transparent; }
.svc-nav a .en { color:#a9bedf; font-size:12px; }
.svc-nav a:hover, .svc-nav a.on { background:#1b4690; }
.svc-nav a.on { border-bottom-color:#63bb36; }

/* Page */
.svc-main { max-width:1120px; margin:0 auto; padding:18px 16px 40px; }
.crumbs { font-size:13px; color:var(--muted); margin:0 0 6px; }
.crumbs a { color:var(--muted); }
.service h1 { font-size:28px; line-height:1.25; margin:4px 0 16px; color:var(--navy); }
.service .content { background:var(--panel); border:1px solid var(--line); padding:24px 28px 30px; position:relative; }
.service .content:before { content:""; position:absolute; top:-1px; right:-1px; border-top:22px solid var(--page); border-left:22px solid transparent; }
.service h2 { font-size:19px; line-height:1.35; color:var(--navy); margin:32px 0 12px; padding:0 0 0 12px; border-left:5px solid var(--steel); background:none; clear:both; }
.service h2:first-child { margin-top:0; }
.service h2.red { border-color:var(--red); } .service h2.orange { border-color:var(--orange); } .service h2.green { border-color:var(--green); }
.service h3 { font-size:16px; margin:18px 0 6px; color:var(--ink); }
.service p { margin:0 0 14px; }
.service .lead { font-size:19px; line-height:1.55; color:var(--navy); }
.service .eyebrow { font-size:12px; font-weight:bold; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:0 0 8px; }
.service .small, .service small { font-size:13px; }
.service .notice { background:#f2f7fb; border:1px solid var(--line); border-left:5px solid var(--green); padding:12px 16px; margin:18px 0; }
.service .jump-links { background:#f2f7fb; border:1px solid var(--line); padding:10px 14px; font-size:14px; }

/* Buttons */
.service .btn, .service a.primary-link, .service button { display:inline-block; border:1px solid var(--cobalt); background:var(--cobalt); color:#fff !important;
  padding:8px 16px; font:inherit; font-size:14px; font-weight:bold; text-decoration:none; border-radius:2px; cursor:pointer; line-height:1.4; }
.service .btn:hover, .service a.primary-link:hover, .service button:hover { background:var(--navy); border-color:var(--navy); }
.service .btn.secondary, .service button.secondary { background:#eef4fa; color:var(--navy) !important; border-color:var(--line); }
.service button:disabled { background:#b9c6d4; border-color:#b9c6d4; cursor:not-allowed; }

/* Forms */
.service label { display:block; font-weight:bold; font-size:14px; margin:12px 0 4px; }
.service input[type=text], .service input[type=email], .service input[type=password], .service input:not([type]), .service select, .service textarea {
  font:inherit; width:100%; max-width:440px; padding:9px 10px; border:1px solid #9fb6cd; border-radius:2px; background:#fff; color:var(--ink); }
.service input[type=checkbox] { width:auto; margin-right:6px; }

/* Tables */
.service table { border-collapse:collapse; width:100%; font-size:14px; }
.service th, .service td { text-align:left; vertical-align:top; padding:8px 10px; border-bottom:1px solid #e1eaf3; }
.service th { color:var(--muted); font-weight:bold; font-size:13px; background:#f4f8fb; }
.service td.num, .service th.num { text-align:right; font-variant-numeric:tabular-nums; }
.service .table-wrap { overflow-x:auto; }

/* Cards and grids */
.service .grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.service .card { background:#fff; border:1px solid var(--line); padding:16px 18px; position:relative; }
.service .card:before { content:""; position:absolute; top:-1px; right:-1px; border-top:14px solid var(--page); border-left:14px solid transparent; }

/* Footer */
.svc-foot { max-width:1120px; margin:0 auto; padding:0 16px 40px; font-size:13px; color:var(--muted); }
.svc-foot a { color:var(--muted); }

@media (max-width:720px) {
  body.service { font-size:15px; }
  .svc-nav { margin-left:0; width:100%; }
  .svc-nav a { padding:6px 8px; font-size:13px; }
  .service .content { padding:18px 16px 24px; }
  .service h1 { font-size:23px; }
}
@media print {
  .svc-header, .svc-foot, .crumbs { display:none; }
  .service .content { border:0; padding:0; }
}