@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;900&display=swap');
/* -------------------------------------------------------
* Template: 倉林
* ©2024 under my umbrella（https://um-umbrella.github.io/template/）
*------------------------------------------------------ */

:root {
    --main-theme: #625925;
    --sub-theme: #e3cbc4;
    --body-bg: #fff8ef;
    --text-dark-color: #625925;
    --text-light-color: #eee;
    /*上下の枠の塗り色を変える場合は      */
    /*   rgb(165, 0, 67)             */
    /*をお好みの色に一括置換してください  */
}

/*------------------------------------------------------ */

body {
    position: relative;
    padding: 0;
    margin: 0;

    font-family: Zen Maru Gothic, 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo,
        sans-serif;
}

.title {
    position: absolute;
    padding: 0;
    margin: 0;
    top: 0;
    width: 100%;
    height: 100px;

    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1210 268" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill="rgb(98, 89, 37)" d="M 0 78 C 156.5 78 156.5 113 313 113 L 313 113 L 313 0 L 0 0 Z" stroke-width="0"></path> <path fill="rgb(98, 89, 37)" d="M 312 113 C 381.5 113 381.5 83 451 83 L 451 83 L 451 0 L 312 0 Z" stroke-width="0"></path> <path fill="rgb(98, 89, 37)" d="M 450 83 C 565 83 565 110 680 110 L 680 110 L 680 0 L 450 0 Z" stroke-width="0"></path><path fill="rgb(98, 89, 37)" d="M 679 110 C 694.5 110 694.5 110 710 110 L 710 110 L 710 0 L 679 0 Z" stroke-width="0"></path><path fill="rgb(98, 89, 37)" d="M 709 110 C 724.5 110 724.5 110 740 110 L 740 110 L 740 0 L 709 0 Z" stroke-width="0"></path><path fill="rgb(98, 89, 37)" d="M 739 110 C 754.5 110 754.5 110 770 110 L 770 110 L 770 0 L 739 0 Z" stroke-width="0"></path><path fill="rgb(98, 89, 37)" d="M 769 110 C 784.5 110 784.5 110 800 110 L 800 110 L 800 0 L 769 0 Z" stroke-width="0"></path><path fill="rgb(98, 89, 37)" d="M 799 110 C 814.5 110 814.5 110 830 110 L 830 110 L 830 0 L 799 0 Z" stroke-width="0"></path><path fill="rgb(98, 89, 37)" d="M 829 110 C 1019.5 110 1019.5 78 1210 78 L 1210 78 L 1210 0 L 829 0 Z" stroke-width="0"></path></svg>');
    background-size: cover;
    background-repeat: no-repeat;
}

@media (max-width: 1218px) {
    .div {
        background-size: contain;
    }
}

main {
    margin: 0;
    padding: 64px 0 0;
    width: 100%;
}

section {
    margin: 16px;
    padding: 16px;
}

li {
    margin: inherit 32px;
    padding: 2px;
}

dl {
    grid-template-columns: 1fr 2fr;
    flex-wrap: wrap;
}

dt {
    margin: 4px 0 0 auto;
    padding: 4px 16px;
    border: solid 1px;

    text-align: right;
}

dd {
    margin: auto 8px;
}

h1 {
    text-align: center;
}

h2,
h3,
h4,
h5,
h6 {
    text-align: center;

    position: relative;
    margin: 32px auto;
    z-index: -1;

    color: var(--body-bg);
    padding: 24px;
    width: 80%;
    max-width: 200px;

    background-color: var(--main-theme);
    border-radius: 50% 30% 70% 60%/50% 80% 50% 70%;
    font-weight: 400;
}

h3 {
    padding: 4%;

    border-radius: 70% 50% 50% 30%/50% 50% 70% 60%;
    font-size: larger;
}
h4,
h5,
h6 {
    display: block;
    padding: 3%;
    width: 150px;

    border-radius: 50% 50% 50% 70%/50% 50% 70% 60%;
    font-size: medium;
}

h5 {
    border-radius: 30% 50% 40% 30%/50% 50% 70% 60%;
}
h6 {
    border-radius: 50% 30% 20% 50%/50% 30% 50% 60%;
}

#update {
    background-color: var(--sub-theme);
}

.centerText {
    text-align: center;
}

footer::after {
    display: block;
    position: absolute;

    bottom: -128px;
    width: 100%;
    height: 200px;
    z-index: 1;
    content: '';

    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 1526 245" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path fill="rgb(98, 89, 37)" d="M 0 162 C 145.5 162 145.5 110 291 110 L 291 110 L 291 0 L 0 0 Z" stroke-width="0"></path> <path fill="rgb(98, 89, 37)" d="M 290 110 C 442 110 442 109 594 109 L 594 109 L 594 0 L 290 0 Z" stroke-width="0"></path> <path fill="rgb(98, 89, 37)" d="M 593 109 C 746 109 746 76 899 76 L 899 76 L 899 0 L 593 0 Z" stroke-width="0"></path><path fill="rgb(98, 89, 37)" d="M 898 76 C 1089 76 1089 107 1280 107 L 1280 107 L 1280 0 L 898 0 Z" stroke-width="0"></path><path fill="rgb(98, 89, 37)" d="M 1279 107 C 1402.5 107 1402.5 159 1526 159 L 1526 159 L 1526 0 L 1279 0 Z" stroke-width="0"></path></svg>');

    transform: rotate(180deg);
    background-size: cover;
    background-repeat: no-repeat;
}

@media (max-width: 1218px) {
    .div {
        background-size: contain;
    }
}

#footer-c {
    top: 0;
}

/*------------------------------------------------------ */

@media screen and (min-width: 768px) {
    .title {
        height: 200px;
    }

    main {
        padding: 104px 0 0;
    }

    section {
        position: relative;

        margin: 16px auto;
        padding: 16px 0;
        width: 90%;
        max-width: 800px;
    }

    section > :where(p, ul, dl, a, mark) {
        width: 100%;
        margin: auto;
        box-sizing: border-box;
    }

    h1 {
        margin: 0 0 32px;
        font-size: 2em;
    }

    .grid h3 {
        padding: 10px;
        width: 70%;
        border-radius: 50% 30% 70% 50%/60% 60% 60% 70%;
    }

    dl {
        margin: 32px auto 0;
        width: 90%;
    }
} /*@media*/

/*------------------------------------------------------ */

@media screen and (min-width: 1080px) {
    main {
        margin: 0 auto;

        width: 1000px;
    }

    section {
        width: 100%;
    }

    section:has(.grid) {
        gap: 16px;
    }
} /*@media*/

body {
    /* 既存の設定の中に以下を追加 */
    color: #625925;
}