* {
  box-sizing: border-box;
  }

html {
-webkit-text-size-adjust: 100%;
}

body {
margin: 0;
padding: 0;
background: #f5f6f7;
color: #333;
font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
"Hiragino Kaku Gothic ProN",
"Hiragino Sans",
"Yu Gothic",
"YuGothic",
Meiryo,
sans-serif;
font-size: 15px;
line-height: 1.8;
}

.page {
width: calc(100% - 32px);
max-width: 900px;
margin: 36px auto 60px;
background: #fff;
border: 1px solid #d9dde2;
}

/* 上部ロゴエリア */
.site-header {
display: flex;
align-items: center;
min-height: 72px;
padding: 16px 24px;
background: #fff;
}

/* 仮の文字ロゴ */
.site-logo {
display: inline-block;
color: #1e5b91;
font-size: 24px;
font-weight: 700;
letter-spacing: 0.08em;
line-height: 1;
text-decoration: none;
}

/* ロゴ画像 */
.site-logo img {
  display: block;
  width: auto;
  height: 16px;
  max-width: 100%;
}

.site-logo:hover {
text-decoration: none;
opacity: 0.8;
}

.site-logo:focus-visible {
outline: 2px solid #1e5b91;
outline-offset: 4px;
}

/* ページタイトル */
.page-title {
  margin: 0 28px;
  padding: 32px 0 14px;
  background: #fff;
  border-bottom: 1px solid #b8c8d6;
}

.page-title h1 {
  margin: 0;
  padding: 0 0 0 10px;
  color: #234f75;
  border: 0;
  font-size: 26px;
  font-weight: 600;
  line-height: 1.4;
}

/* 本文 */
.content {
padding: 30px 36px 36px;
}

.intro {
margin: 0 0 30px;
}

/* 各項目 */
section {
margin: 0 0 28px;
}

section h2 {
margin: 0;
padding: 9px 14px;
color: #244f76;
background: #edf3f8;
border-left: 5px solid #2f6e9f;
border-bottom: 1px solid #d5e0e8;
font-size: 18px;
font-weight: 600;
line-height: 1.5;
}

.section-body {
padding: 16px 14px 2px;
}

.section-body p {
margin: 0 0 14px;
}

.section-body p:last-child {
margin-bottom: 0;
}

/* 本文内のリンク */
.section-body a {
  color: #1e5b91;
  text-decoration: none;
}

.section-body a:hover {
  color: #16466f;
  text-decoration: underline;
}

/* ページ下部注意書き */
.footer-note {
margin-top: 34px;
padding: 16px 18px;
background: #f7f7f7;
border: 1px solid #ddd;
color: #666;
font-size: 13px;
}

/* スマートフォン */
@media screen and (max-width: 640px) {

body {
background: #fff;
font-size: 14px;
line-height: 1.75;
}

.page {
width: 100%;
margin: 0;
border: 0;
}

.site-header {
min-height: 60px;
padding: 14px 16px;
}

.site-logo {
font-size: 21px;
}

.page-title {
  margin: 0 16px;
  padding: 18px 0 12px;
}

.page-title h1 {
  padding: 0;
  border: 0;
  font-size: 20px;
}

.content {
padding: 22px 16px 30px;
}

.intro {
margin-bottom: 24px;
}

section {
margin-bottom: 24px;
}

section h2 {
padding: 8px 11px;
border-left-width: 4px;
font-size: 16px;
}

.section-body {
padding: 13px 8px 0;
}

.footer-note {
margin-top: 28px;
padding: 13px 14px;
font-size: 12px;
}
}