@charset "utf-8";

body {
margin: 0;
padding: 0;
background-color: #e0e0e0;
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
line-height: 1.7;
letter-spacing: 0.05em;
color: #555555;
}

#wrapper {
max-width: 650px;
margin: 0 auto;
background-color: #f8f8f8;
border-left: solid 1px #cccccc;
border-right: solid 1px #cccccc;
}

#nav {
padding: 0 clamp(8px, -30.4px + 9.6vw, 32px);
background-color: #ececec;
position: sticky;
top: 0;
}

#nav ul {
margin: 0;
padding: 0;
display: flex;
}

#nav li {
flex: 1 1 0;
margin: 0;
display: flex;
list-style-type: none;
}

#nav a {
flex: 1 1 auto;
padding: 0.65em 0;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
text-decoration: none;
font-size: clamp(0.875rem, 0.754rem + 0.61vw, 1rem);
font-weight: 600;
color: #555555;
}

#nav a:hover {
background: url(nav.png) no-repeat center / contain;
color: #ffffff;
}

#logo img {
width: 100%;
}

#contents {
padding: clamp(8px, -6.907px + 4.14vw, 20px) clamp(16px, -44.845px + 16.9vw, 65px) clamp(20px, 0.124px + 5.52vw, 36px);
}

h1 {
margin: 0.5em 0 1.25em;
padding-left: 0.5em;
background: linear-gradient(to top, #e0e0e0, transparent);
font-size: clamp(1.125rem, 1.004rem + 0.61vw, 1.25rem);
}

h2 {
margin: 1.5em 0 1em;
padding-left: 1.25em;
background: linear-gradient(45deg, transparent 5%, #e8e8e8 15% 65%, transparent 90%), url(h2_1.png) no-repeat left / contain;
font-size: clamp(1rem, 0.879rem + 0.61vw, 1.125rem);
}

p {
margin: 1em auto;
text-align: justify;
}

ul {
margin: 1em 0;
padding-left: 1em;
}

li {
margin: 0.3em 0;
}

table {
width: 100%;
margin: 1.5em 0;
border-collapse: collapse;
}

table, th, td {
border: solid 1px #777777;
}

th, td {
padding: 0.25em 0.5em;
text-align: center;
}

#footer {
padding: clamp(28px, 3.155px + 6.9vw, 48px) 16px clamp(8px, -1.938px + 2.76vw, 16px);
background: linear-gradient(to top, #004080 65%, #154180, #405588, #5e6b93, #7b85a2, #999fb4, #b5b9c6, #cbced6, #dddfe4, #eaebed, #f2f2f3, #f8f8f8);
color: #ffffff;
}

#footer p {
text-align: center;
font-size: clamp(0.75rem, 0.629rem + 0.61vw, 0.875rem);
}