body {
    font-family: '游ゴシック', 'Yu Gothic', sans-serif; /* フォントを游ゴシックに設定 */
    font-weight: 400;
    font-size: 16px;
    line-height: 1.7;
    background-color: #ECF5FC;
    margin: 0;
    letter-spacing: 0.05em;
}

.container {
    max-width: 1200px;
    background-color: #ffffff;
    padding: 20px;
    margin: 0 auto;
    border-radius: 10px;
}

.top-link {
    color: black; /* 文字色を黒に設定 */
    padding-left: 1em; /* 左端から1文字分の余白を設定 */
    text-decoration: underline; /* アンダーバーを追加 */
    font-weight: bold; /* セミコロンを追加 */
}

h1 {
    text-align: center; /* 文字位置を中央に設定 */
    font-size: 3.0em; /* 文字サイズを3.0emに設定 */
    color: white; /* 文字色を白に設定 */
    background-color: #4584B8; /* 背景色を#4584B8に設定 */
    padding: 10px; /* 背景色が見えるようにパディングを追加 */
}

h2 {
    font-size: 1.7em; /* 文字サイズを1.7emに設定 */
    color: #0070C0; /* 文字色を#0070C0に設定 */
    padding-left: 1em; /* 左端から1文字分の余白を設定 */
    position: relative; /* アンダーバーの位置調整のために相対位置を設定 */
}

h2::after {
    content: '';
    display: block;
    width: calc(100% - 1em); /* .containerの左右端までのアンダーバーの幅を設定 */
    height: 3.5px; /* アンダーバーの高さを設定 */
    background-color: #68A4D5; /* アンダーバーの色を#68A4D5に設定 */
    position: absolute;
    bottom: -2px; /* 文字の下にアンダーバーを配置 */
}

h3 {
    font-size: 1.5em; /* 文字サイズを1.5emに設定 */
    color: #0070C0; /* 文字色を#0070C0に設定 */
    padding-left: 2em; /* 左端から2文字分の余白を設定 */
    margin-top: 0.5em; /* 上のマージンを狭く設定 */
    margin-bottom: 0; /* 下のマージンを狭く設定 */
}

h4 {
    font-size: inherit; /* bodyの文字サイズを参照 */
    color: #000000; /* 文字色を黒に設定 */
    padding-left: 5em; /* 左端から5文字分の余白を設定 */
    padding-right: 2em; /* 右端から2文字分の余白を設定 */
    margin-top: 0;
    margin-bottom: 0; /* 下のマージンを狭く設定 */ 
    font-weight: normal; /* 太字を解除 */
}

h5 {
    font-size: inherit; /* bodyの文字サイズを参照 */
    color: #000000; /* 文字色を黒に設定 */
    padding-left: 8.5em; /* 左端から8.5文字分の余白を設定 */
    padding-right: 2em; /* 右端から2文字分の余白を設定 */
    margin-top: 0; 
    margin-bottom: 0; /* 下のマージンを狭く設定 */ 
    font-weight: normal; /* 太字を解除 */
    text-indent: -3.5em; /* 1行目のインデントを設定 */
}

h6 {
    font-size: inherit; /* bodyの文字サイズを参照 */
    color: #000000; /* 文字色を黒に設定 */
    padding-left: 8.5em; /* 左端から8.5文字分の余白を設定 */
    padding-right: 2em; /* 右端から2文字分の余白を設定 */
    margin-top: 0;
    margin-bottom: 0; /* 下のマージンを狭く設定 */ 
    font-weight: normal; /* 太字を解除 */
}

.link-color {
    color: #0066FF; /* リンクの文字色を青に設定 */
    word-break: break-all; /* URLや英単語を途中で改行 */
}

p {
    margin-block-start: 0; /* 段落の前の余白を調整 */
    margin-block-end: 0;   /* 段落の後の余白を調整 */
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    padding: 5px 0;
}

footer {
    background-color: #ECF5FC;
    color: black;
    text-align: center;
    font-size: 15px;
    padding: 10px 0;
}

footer p {
    margin: 0;
}

footer .copyright {
    font-size: 0.8em;
}

.sponly {
    display: none;
}

@media screen and (max-width: 600px) {
    .sponly {
        display: inline;
    }
}

#back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none; /* 初期状態では非表示 */
}

#back-to-top img {
    width: 70px; /* 画像のサイズを調整 */
    height: 70px; /* 画像のサイズを調整 */
    cursor: pointer; /* カーソルをポインタに変更 */
}

/* スマホ用のスタイル */
@media screen and (max-width: 600px) {
    #back-to-top {
        right: 50px; /* スマホ用に右端からの距離を調整 */
        bottom: 20px; /* スマホ用に下端からの距離を調整 */
        margin: 0; /* 余白に影響を与えないようにマージンをリセット */
    }
    #back-to-top img {
        width: 30px; /* スマホ用に画像のサイズを小さく調整 */
        height: 30px; /* スマホ用に画像のサイズを小さく調整 */
    }
}