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

body {
    font-family: 'Noto Sans JP', sans-serif;
    margin : 0;
    display: flex;
    flex-direction: column;
    font-size: 18px; /* 基本のフォントサイズを設定 */
    align-items: center; /* body内の要素を中央寄せ */
}

header {
    width: 100vw;
    text-align: center;
    background-color: #515151;
    color: white;
}

main {
    padding: 0;
    width: 100%;
    max-width: 800px; /* 好みの幅に設定 */
}

h1 {
    text-align: center;
    margin-top : 40px;
    margin-bottom : 10px;
}

h2 {
    margin-bottom: 0px;
    display: flex;
    align-items: center;
    margin-top: 30px;
    margin-bottom: 0px;
}

h2::before {
    content : "";
    width : 8px;
    height: 30px;
    background-color: #3c9d61;
    margin-right: 10px;
    border-radius: 4px;
}

.h1hr {
    height: 4px;
    background-color: #848484;
    border: none;
}

hr {
    height: 1px;
    background-color: #b2b1b1;
    border: none;
}

p {
    margin-left: 20px;
}

.indent {
    margin-left: 20px;
}

.update {
    width: 90%;
    text-align: right;
    color : #8a8787;
}

a {
    color :#3c9d61;
    text-decoration: none;
}

a:hover{
    font-weight:bold;
    color:#ff653a !important;
    animation: zoom .3s;
    text-decoration: underline;
}

ul > li {
    list-style-type: disc;
}

ul, ul li {
    font-size: inherit;
}

ul > li::marker {
    color: #247844;
}

@media screen and (max-width: 768px) {
    body {
        font-size: 14px; /* 全体のフォントサイズを大きく設定 */
        line-height: 1.3; /* 行間を適度に広げて読みやすくする */
        margin: 0;
        padding: 0;
    }

    h1 {
        font-size: 20px; /* 大見出しを少し大きくする */
    }

    h2 {
        font-size: 18px; /* 中見出しを少し大きくする */
        padding-left: 8px;
    }

    p, ul, ul li, a {
        font-size: inherit; /* 明示的に継承（bodyのサイズを受け取る） */
    }

    main {
        padding: 0; /* メインコンテンツの余白を調整 */
    }

    .update {
        font-size: 14px; /* 最終更新日のフォントサイズは少し控えめにする */
        margin-right: 15px; /* マージン調整 */
    }
}