@charset "utf-8";
/* CSS Document */

@media screen and (max-width: 768px) {

    body {
        background-color: #fffef9 !important;
        Letter-spacing: 0.05em
    }

    .title {
        width: 300px;
        /* 変えない */
        position: relative;
        /* 変えない */
        margin: 0 auto;
        /* 変えない */
        text-align: center;
        /* 変えない */
        margin-top: 6rem;
        /* 変えない */
        margin-bottom: 6rem;
        /* 変えない */
    }

    .title img {
        width: 300px;
        /* タイトル画像の幅を調整→文字の量を見て調整 （ 285pxより大きくしないで！）*/
        height: auto;
        /* 変えない */
    }


    .title p {
        position: absolute;
        /* 変えない */
        top: 34%;
        /* 変えない →タイトルの文字が二行の場合は変える*/
        left: 6.4%;
        /* タイトルの文字の位置→文字の量を見て中央揃えになるよう調整 */
        font-family: dnp-shuei-shogomincho-std, serif;
        /* 変えない */
        font-size: 23px;
        /* 変えない */
        color: #384159;
        /* 変えない */
    }


    .kyotyo {
        font-size: 12px;
    }

    .midashi {
        font-family: dnp-shuei-shogomincho-std, serif;
        font-size: 16.4px;
        display: inline-block;
        /*余白と配置の指定を可能にする*/
        border-left: 5px double #384159;
        /*線の設定*/
        padding-top: 2px;
        padding-bottom: 2px;
        padding-left: 8px;

        /*余白の設定*/
        color: #384159;
        margin-bottom: 2rem;

    }

    .komidashi {
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 14px;
        color: #384159;
    }

    .article {
        padding: 0 5%
    }

    .info {
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        margin-bottom: rem;
        color: #384159;
    }

    .info1 {
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 14px;
        margin-bottom: 2rem;
        margin-top: 1rem;
        color: #384159;
    }

    .info2 {
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 14px;
        margin-bottom: 10rem;
        color: #384159;
        margin-bottom: 2rem;

    }

    .info3 {
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 14px;
        color: #384159;
        margin-bottom: 1.5rem;
        margin-top: 0.5rem;
    }

    .info4 {
        font-family: sawarabi-mincho, serif;
        font-style: normal;
        font-weight: 550;
        font-size: 14px;
        margin-bottom: 2rem;
        color: #384159;
        padding-left: 2rem;

    }

    .button1 {
        border: 2px solid #384159;
        display: flex;
        padding: 0.5rem 3rem;
        border-radius: 0%;
        color: #384159;
        font-family: sawarabi-mincho, serif;
        font-size: 14px;
        justify-content: center;


    }


    .button1:hover {
        color: #fffef9;
        background-color: #384159;
    }

    #supporters {
        font-family: sawarabi-mincho, serif;
        max-width: 800px;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 6rem;
        padding: 1.5rem;
        background: #fffef9;
        border-radius: 12px;
    }

    #supporters h2 {
        color: #384159;
        font-family: sawarabi-mincho, serif;
        text-align: center;
        font-size: 1.6rem;
        margin-bottom: 0.5rem;
    }

  #supporters p {
        font-family: sawarabi-mincho, serif;
        text-align: center;
        color: #384159;
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }

 ul.supporter-list {
        font-family: sawarabi-mincho, serif;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 0.75rem;
        list-style: none;
        padding: 0;
        margin: 0;
    }
  ul.supporter-list li {
        font-family: sawarabi-mincho, serif;
        background: #fffef9;
        color: #384159;
        padding: 0.6rem 0.8rem;
        border-radius: 8px;
        display: flex;
        justify-content: center; /* 左右中央 */
        align-items: center;     /* 上下中央 */
        text-align: center;
        border: 1px solid #384159;
    }

}