:root {
    /*色の定義*/
    --color-primary: #00A041;
    --color-secondary: #D1E7D5;
    --white: #fff;
    --black: #333;
    /* フォントファミリーの定義 */
    --font-family-sans: "Hiragino Kaku Gothic ProN","M PLUS Rounded 1c","Helvetica Neue","Arial","Hiragino Sans","Meiryo","sans-serif";
    /*背景カラー */
    --background-color: #ffffff;
}

body {
    width: 100%;
    margin: 0 auto;
    position: relative;
    background-color: var(--color-secondary);
    font-family: var(--font-family-sans);
    font-weight: 400;
    font-size: clamp(12px, 2.5vw, 18px);
    word-break: break-all;
    -webkit-font-feature-settings: "palt"; /* Safari用 */
    font-feature-settings: "palt" 1;
}

header {
    width: 100%;
    margin: 0 auto;
}

header .headline {
    width: 100%;
    color: #ffffff;
    background: var(--color-primary);
    padding: 3vh 5%;
    font-size: 1.2em;
    text-align: center;
}

header .headline .inner {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

header .headline h1 {
    width: fit-content;
    font-size: 2.0em;
    line-height: 1.3em;
    margin: 1.0em auto;
    padding: .8em;
    border: 2px solid #fff;
}

header .headline .day {
    background: var(--color-primary);
    color: var(--white);
    font-size: 1.1em;
    font-weight: 700;
    width: fit-content;
    margin: 0 auto;
    padding: .3em 1.0em;
    border-radius: 1.0em;
    margin-bottom: .5em;
    text-align: center;
}

header .container {
    font-size: 1.3em;
    padding: 2.5svh 0;
    text-align: left;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
}

header .container  .inner {
    width: 95%;
    margin: 0 auto;
}

main {
    padding-bottom: auto;
    width: 100%;
    max-width: 1280px;
    background-color: var(--white);
}

section {
    width: 100%;
    margin: 0 auto;
}

section h2 {
    color: #ffffff;
    background: var(--color-primary);
    font-size: 1.4em;
    padding: .5em;
}

section h2 span{
    margin-right: 0.5em;
}

section .text {
    font-size: 1.2em;
    line-height: 1.5em;
    text-align: left;
}

.section01 .image_block {
    width: 100%;
    max-width: 1400px;
    display: flex;
    gap: 5px;
    flex-direction: column;
    align-items: center;
    padding-top: 4%;
}

section .image_block {
    width: 100%;
    display: flex;
    gap: 5px;
    flex-direction: column;
    align-items: center;
}

.container .attention {
    font-size: .9em;
}

section .caption {
    font-size: .9em;
}

section .inner {
    padding: 3.0vh 1em;
}

section .inner .list {
    list-style: disc;
    padding-left: 1.0em;
    line-height: 1.5em;
}

section .button {
    text-align: center;
    width: fit-content;
    margin: 0 auto;
    font-weight: 700;
    margin-top: 2.5vh;
    display: block;
    padding: .8em 1.5em;
    background: #3EA100;
    color: var(--white);
    text-decoration: none;
    border-radius: 2.0rem;
    transition: background 0.3s ease;
}

section .button:hover {
    background: #000;
}

.text_block .text {
    line-height: 1.5em;
    margin: .5em;
}

.text .point {
    display: inline-block;
    font-size: 1.0em;
    background: #9bd721;
    padding: 0 .5em;
    color: var(--white);
    font-weight: 700;
    border-radius: .3em;
    margin-right: .5em;
}

.flex_container .inner,
.flex_container .contact_inner{
    display: flex;
    justify-content: space-between;
}

.flex_container .contact_inner{
    justify-content: space-between;
    align-items: center;
}

.section03 .image_block {
    max-width: 500px;
}

.section04 .flex_container .inner {
    flex-direction: column;
}

.section04 .image_block_inner {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 1em;
}

.section04 .image_block_inner img {
    width: 100%;
    max-width: 32%;
}

.section05 .image_block {
    width: 100%;
    max-width: 80%;
    text-align: center;
}
.section05 .image_block .caption {
    text-align: right;
}

.section05 .text_block {
    width: 100%;
    margin: 0 auto;
}

.section05 .text_block .day {
    width: fit-content;
    margin: 0 auto 1.0em;
    font-size: 1.1em;
    font-weight: 700;
    background-color: var(--color-primary);
    color: var(--white);
    padding: 0.7em 2.0em;
    text-align: center;
    border-radius: 5.0em;
}

.section05 .text_block .text {
   margin-top: 2.5em
}


.section05 .flex_container .inner{
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5em;
}

.section06 h3 {
    font-size: 1.3em;
    text-align: center;
    background-color: #009678;
    color: #fff;
    padding: 0.7em;
}

.section06 .inner {
    padding: 2.0vh 1em;
}

.flex_container .contact_inner div {
    width: 50%;
    padding: 1.5em;
    border: 1px solid #ccc;
}

.flex_container .contact_inner div:first-child {
    border-right: none;
}

footer {
    text-align: center;
}

.sp-br {
    display: none;
}

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

    header .container .inner {
    width: 90%;
    }

    section h2 {
        text-align: center;
    }

    section h2 span{
    margin-right: 0em;
    }

    .flex_container .inner,
    .flex_container .contact_inner {
        flex-direction: column;
        gap: 1em;
    }

    .flex_container .contact_inner {
        gap: 0 ;
    }

    .flex_container .contact_inner div {
        width: 100%;
    }

    .flex_container .contact_inner div:first-child {
        border-right: 1px solid #ccc;
        border-bottom: none;
    }

    section .image_block {
        max-width: 100%
    }

    .section03 .image_block {
        max-width: 100%;
    }

    .section04 .image_block_inner {
        flex-direction: column;
        align-items: center;
    }

     .section04 .image_block_inner img {
        max-width: 100%;
    }

    .sp-br {
        display: inline;
    }
}