*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}

:root {
--navy: #0d4b6b;
--navy-dark: #083549;
--navy-mid: #1a7a8a;
--gold: #c8922a;
--gold-dark: #a87820;
--text: #2c3e45;
--text-light: #5a7a84;
--bg-light: #eef7fa;
}

html {
scroll-behavior: smooth;
}

body {
font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Meiryo', sans-serif;
color: var(--text);
line-height: 1.7;
}

/* ── Header ── */
header {
background: var(--navy);
position: sticky;
top: 0;
z-index: 100;
padding: 0 2rem;
}

nav {
max-width: 1100px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
height: 64px;
}

.logo {
color: #fff;
font-size: 1.05rem;
font-weight: bold;
letter-spacing: 0.05em;
}

nav ul {
list-style: none;
display: flex;
gap: 2.5rem;
}

nav ul a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
font-size: 0.88rem;
transition: color 0.2s;
}

nav ul a:hover {
color: var(--gold);
}

/* ── Hero ── */
.hero {
background:
linear-gradient(to bottom, rgba(15,10,5,0.42) 0%, rgba(10,8,3,0.28) 45%, rgba(15,10,5,0.62) 100%),
url('hero-bg.jpg') center 35% / cover no-repeat;
color: #fff;
padding: 120px 2rem 130px;
text-align: center;
position: relative;
overflow: hidden;
}

.hero::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 48px;
background: var(--bg-light);
clip-path: ellipse(55% 100% at 50% 100%);
}

.hero-inner {
max-width: 700px;
margin: 0 auto;
}

.hero h1 {
font-size: 2.4rem;
line-height: 1.6;
margin-bottom: 1.5rem;
font-weight: bold;
}

.hero p {
font-size: 1rem;
color: rgba(255, 255, 255, 0.82);
line-height: 1.9;
margin-bottom: 2.5rem;
}

.btn-hero {
display: inline-block;
padding: 0.85rem 2.5rem;
background: var(--gold);
color: #fff;
text-decoration: none;
border-radius: 4px;
font-size: 0.95rem;
letter-spacing: 0.05em;
transition: background 0.2s;
}

.btn-hero:hover {
background: var(--gold-dark);
}

/* ── Section common ── */
.container {
max-width: 1100px;
margin: 0 auto;
}

h2 {
text-align: center;
font-size: 1.75rem;
color: var(--navy);
margin-bottom: 3rem;
}

h2::after {
content: '';
display: block;
width: 36px;
height: 3px;
background: var(--gold);
margin: 0.75rem auto 0;
}

/* ── Services ── */
.services {
padding: 90px 2rem;
background: var(--bg-light);
}

.card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
}

.card {
background: #fff;
border-radius: 6px;
padding: 2.5rem 2rem;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.card-marker {
width: 36px;
height: 3px;
background: var(--gold);
margin-bottom: 1.5rem;
}

.card h3 {
font-size: 1.05rem;
color: var(--navy);
margin-bottom: 0.9rem;
font-weight: bold;
}

.card p {
font-size: 0.9rem;
color: var(--text-light);
line-height: 1.85;
}

/* ── Company ── */
.company {
padding: 90px 2rem;
background: #fff;
}

table {
width: 100%;
border-collapse: collapse;
}

th, td {
padding: 1.1rem 1.5rem;
border-bottom: 1px solid #e8eaed;
font-size: 0.95rem;
text-align: left;
vertical-align: top;
}

th {
width: 160px;
color: var(--navy);
font-weight: bold;
background: var(--bg-light);
white-space: nowrap;
}

/* ── Contact ── */
.contact {
padding: 90px 2rem;
background: linear-gradient(160deg, #0d4b6b 0%, #1a7a8a 100%);
color: #fff;
text-align: center;
position: relative;
overflow: hidden;
}

.contact::before {
content: '';
position: absolute;
top: -2px;
left: 0;
right: 0;
height: 48px;
background: #fff;
clip-path: ellipse(55% 100% at 50% 0%);
}

.contact h2 {
color: #fff;
}

.contact h2::after {
background: var(--gold);
}

.contact p {
color: rgba(255, 255, 255, 0.82);
margin-bottom: 2.5rem;
font-size: 0.95rem;
}

.btn-contact {
display: inline-block;
padding: 1rem 2.8rem;
background: var(--gold);
color: #fff;
text-decoration: none;
border-radius: 4px;
font-size: 1rem;
letter-spacing: 0.03em;
transition: background 0.2s;
}

.btn-contact:hover {
background: var(--gold-dark);
}

/* ── Footer ── */
footer {
background: var(--navy-dark);
color: rgba(255, 255, 255, 0.45);
text-align: center;
padding: 1.5rem 2rem;
font-size: 0.82rem;
}

/* ── Responsive ── */
@media (max-width: 768px) {
.hero h1 {
font-size: 1.7rem;
}

.hero p br {
display: none;
}

nav ul {
display: none;
}

.card-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}

th {
width: 100px;
}

th, td {
padding: 0.9rem 1rem;
font-size: 0.88rem;
}
}