:root { --navy: #073f8c; --ink: #092b5a; --muted: #4a6286; --line: #c7d8ef; --paper: #fff; --soft: #f5f8fc; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--soft); color: var(--ink); font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif; font-size: 16px; line-height: 1.8; }
a { color: inherit; }
a:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.page-header { background: var(--navy); color: #fff; }
.header-inner { width: min(1060px, calc(100% - 40px)); min-height: 72px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 9px; color: #fff; text-decoration: none; font: 800 25px/1 Inter, sans-serif; letter-spacing: -.04em; }
.brand-mark { width: 25px; height: 22px; display: flex; align-items: flex-end; gap: 3px; }.brand-mark i { display: block; width: 5px; background: currentColor; border-radius: 1px; }.brand-mark i:nth-child(1){height:8px}.brand-mark i:nth-child(2){height:14px}.brand-mark i:nth-child(3){height:21px}
.back-link { color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; }
.back-link:hover { text-decoration: underline; }
.page-main { width: min(900px, calc(100% - 40px)); margin: 48px auto 64px; }
.page-title { border-left: 6px solid var(--navy); padding-left: 18px; margin: 0 0 29px; font-size: clamp(28px, 4vw, 38px); line-height: 1.35; letter-spacing: .02em; }
.lead { margin: -8px 0 28px; color: var(--muted); }
.content-card { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: clamp(22px, 4vw, 42px); box-shadow: 0 8px 22px rgba(7, 63, 140, .06); }
.content-card h2 { margin: 36px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 21px; line-height: 1.5; }.content-card h2:first-child { margin-top: 0; }
.content-card h3 { margin: 25px 0 8px; font-size: 17px; }.content-card p { margin: 0 0 16px; }.content-card ul { margin: 0 0 16px; padding-left: 1.4em; }.content-card li + li { margin-top: 5px; }
.info-table { width: 100%; border-collapse: collapse; font-size: 15px; }.info-table th, .info-table td { padding: 15px 13px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }.info-table th { width: 30%; color: var(--navy); background: #f8fbff; font-weight: 700; }.info-table td a, .content-card a { color: var(--navy); font-weight: 700; }
.notice { padding: 16px 18px; border-left: 4px solid var(--navy); background: #f3f8ff; color: #183f75; font-size: 14px; }.contact-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 22px; }.contact-action { display: flex; min-height: 112px; padding: 19px 21px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; border: 2px solid var(--navy); border-radius: 10px; background: #fff; color: var(--navy); font-weight: 800; text-align: center; text-decoration: none; transition: background-color .18s, color .18s, transform .18s; }.contact-action:hover { background: var(--navy); color: #fff; transform: translateY(-2px); }.contact-action small { font-weight: 500; font-size: 12px; }.footer { background: var(--navy); color: #fff; padding: 26px 20px; text-align: center; font-size: 12px; }.footer nav { margin: 13px 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 18px; }.footer nav a { color: #fff; }.footer small { opacity: .8; }
@media (max-width: 640px) { body { font-size: 14px; }.header-inner, .page-main { width: min(100% - 28px, 900px); }.header-inner { min-height: 58px; }.brand { font-size: 21px; }.back-link { font-size: 12px; }.page-main { margin: 31px auto 44px; }.page-title { padding-left: 13px; border-left-width: 4px; margin-bottom: 22px; }.content-card { border-radius: 9px; padding: 21px 17px; }.content-card h2 { font-size: 18px; margin-top: 28px; }.info-table, .info-table tbody, .info-table tr, .info-table th, .info-table td { display: block; width: 100%; }.info-table th { padding-bottom: 5px; border: 0; }.info-table td { padding-top: 3px; }.contact-actions { grid-template-columns: 1fr; }.contact-action { min-height: 90px; }.footer nav { gap: 6px 12px; } }