.main {
    background-image: url(../images/top/main_bg.png), -webkit-gradient(linear, left top, left bottom, color-stop(50%, #dafaff), color-stop(50%, #cadfa7));
    background-image: url(../images/top/main_bg.png), -webkit-linear-gradient(#dafaff 50%, #cadfa7 50%);
    background-image: url(../images/top/main_bg.png), linear-gradient(#dafaff 50%, #cadfa7 50%);
    background-position: center;
    background-repeat: repeat-x;
    background-size: contain;
    width: 100%;
    position: relative;

    .main_ttl {
        width: min(1184px, 100%);
        margin-inline: auto;
        padding: 0 10px;
    }

    h1 {
        word-break: keep-all;
        overflow-wrap: anywhere;
        line-break: strict;
        color: #595959;
        display: inline-block;
        line-height: 1.5;
        margin: 2em 0 0;
        font-size: 2em;

        @supports (text-wrap:pretty) and (word-break:auto-phrase) {
            text-wrap: pretty;
            word-break: auto-phrase;
        }

        .ttl_and {
            font-size: 1.5em;

        }

        .phrase {
            margin-right: .2em;
        }
    }

    p {
        line-height: 2;
        word-break: keep-all;
        overflow-wrap: anywhere;
        line-break: strict;
        max-width: 700px;

        @supports (text-wrap:pretty) and (word-break:auto-phrase) {
            text-wrap: pretty;
            word-break: auto-phrase;
        }
    }

    img {
        padding: 1em 0 2em;
        width: 100%;
        height: auto;
    }

    @media (width < 600px) {
        h1 {
            margin: 1em 0 0;
            font-size: 1.5em;
        }

        img {
            margin: -50px 0 0 calc(-10% - 20px);
            width: calc(120% + 20px);
        }
    }
}

/* top list */
.top_list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    gap: 2em;
    margin-top: -1em;
    z-index: 1;
    position: relative;

    @media (width < 800px) {
        grid-template-columns: 1fr;
    }

    >a {
        /* max-width: 368px; */
        background-color: #fff;
        border-radius: 16px;
        padding: 1em;
        position: relative;
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 3;
        gap: .5em;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -webkit-box-shadow: 0 2px 6px rgb(from #000 r g b / .1);
        box-shadow: 0 2px 6px rgb(from #000 r g b / .1);
        -webkit-transition: background-color .2s;
        transition: background-color .2s;

        &.list_consult {
            &::before {
                position: relative;
                content: url(../images/top/consult.svg);
                display: block;
                text-align: center;
            }
        }

        &.list_know {
            &::before {
                position: relative;
                content: url(../images/top/know.svg);
                display: block;
                text-align: center;
            }
        }

        &.list_info {
            &::before {
                position: relative;
                content: url(../images/top/info.svg);
                display: block;
                text-align: center;

            }
        }

        h2 {
            text-align: center;
            margin: 0;
            font-size: 1.5em;
            line-height: 1.25;
            font-weight: 500;

            span.top_list_small {
                display: block;
                font-size: .8em;

                @media (width < 1000px) {
                    font-size: .6em;
                }
            }


        }

        ul {
            padding-left: 1.5em;
            line-height: 1.5;
            padding-top: .5em;
            margin: 0;

            .list_consult & {
                border-top: 2px solid var(--pink-color);
            }

            .list_know & {
                border-top: 2px solid var(--yellow-color);
            }

            .list_info & {
                border-top: 2px solid var(--green-color);
            }

            li {
                margin: .5em 0;
            }
        }

        &:hover {
            text-decoration: none;

            &.list_consult {
                background-color: color-mix(in srgb, var(--pink-color) 20%, white);
            }

            &.list_know {
                background-color: color-mix(in srgb, var(--yellow-color) 20%, white);
                ;
            }

            &.list_info {
                background-color: color-mix(in srgb, var(--green-color) 20%, white);
                ;
            }
        }
    }


}

/* contact box */
.contact_box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, auto);
    gap: 1em;
    -webkit-box-align: center;
    background-color: var(--middle-color);
    border-radius: 16px;
    margin: 6em 0;
    padding: 1em;

    h2 {
        grid-area: 1 / 1 / 2 / 3;
        text-align: center;
        color: var(--accent-color);
        font-weight: 500;
        margin: .5em 0;
        word-break: keep-all;
        overflow-wrap: anywhere;
        line-break: strict;
        line-height: 1.5;

        @supports (text-wrap:pretty) and (word-break:auto-phrase) {
            text-wrap: pretty;
            word-break: auto-phrase;
        }

        @media (width< 450px) {
            font-size: 1.2em;
            margin: 0;
        }
    }

    .tel, .coming {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .tel {
        grid-area: 2 / 1 / 3 / 2;
        background-color: #fff;
        border-radius: 4px;
        padding: 1em 2em;
        text-align: center;
        gap: .1em;

        p {
            margin: .5em 0;
            line-height: 1.5;
            word-break: keep-all;
            overflow-wrap: anywhere;
            line-break: strict;

            @supports (text-wrap:pretty) and (word-break:auto-phrase) {
                text-wrap: pretty;
                word-break: auto-phrase;
            }

            &.number {
                margin: 0;
                line-height: 1.2;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                justify-content: center;
                -ms-flex-wrap: wrap;
                flex-wrap: wrap;
            }
        }

        .number_ttl {
            background-color: var(--font-color);
            color: #fff;
            padding: 0 .1em;
            margin-right: .2em;
            line-height: 1.25;
            margin-top: .3em;
            width: 2.5em;
        }

        strong {
            font-size: 2em;
            font-weight: 600;

            @media (width < 450px) {
                font-size: 1.3em;
            }
        }
    }

    .coming {
        grid-area: 2 / 2 / 3 / 3;
        background-color: #fff;
        border-radius: 4px;
        padding: 1em 2em;

        h3 {
            margin: .5em 0 0;
            text-align: center;
        }

        ul {
            padding-left: 1.5em;
            margin: .5em 0;
            width: -webkit-fit-content;
            width: -moz-fit-content;
            width: fit-content;

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

        p {
            text-align: center;
            margin: 0 0 1em;
        }

        a {
            color: var(--accent-color);
            border: 1px solid var(--accent-color);
            padding: .5em;
            border-radius: 1em;
            line-height: 1em;
            display: inline-block;
            font-weight: 600;
            -webkit-transition: all .2s;
            transition: all .2s;
            margin: .25em;

            &:hover {
                text-decoration: none;
                background-color: var(--middle-color);
            }
        }
    }

    .mail {
        grid-area: 3 / 1 / 4 / 3;
        background-color: #fff;
        border-radius: 4px;
        text-align: center;
        padding: 1em 2em;
        line-height: 1.5;

        a {
            background-color: var(--accent-color);
            color: #fff;
            border-radius: 4px;
            padding: 1em;
            display: inline-block;
            position: relative;
            text-box-trim: trim-both;
            -webkit-transition: all .2s;
            transition: all .2s;
            word-break: keep-all;
            overflow-wrap: anywhere;
            line-break: strict;

            @supports (text-wrap:pretty) and (word-break:auto-phrase) {
                text-wrap: pretty;
                word-break: auto-phrase;
            }

            &::before {
                content: "";
                width: 1.5em;
                height: 1.5em;
                -webkit-mask-image: url(../images/icons/mail.svg);
                mask-image: url(../images/icons/mail.svg);
                -webkit-mask-size: contain;
                mask-size: contain;
                -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
                background-color: currentColor;
                display: inline-block;
                margin-right: .5em;
                position: relative;
                top: .4em;
            }

            &:hover {
                background-color: color-mix(in srgb, var(--accent-color) 60%, var(--orange-color));
                text-decoration: none;
            }
        }
    }

    @media (width < 850px) {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;

        h2 {
            grid-area: auto;
        }

        .tel, .coming, .mail {
            grid-area: auto;
            padding: 1em;
        }
    }

}

/* news */
.news {
    margin: 6em auto;

    h2 {
        font-size: 1.8em;
        font-weight: 600;
        text-align: center;
        color: var(--accent-color);
        margin-inline: auto;
    }

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

        li {
            border-bottom: 1px solid var(--border-color);
            display: -webkit-box;
            display: -ms-flexbox;
            display: grid;
            grid-template-columns: auto auto 1fr;
            padding: 1em 0;
            gap: .5em;

            @media (width < 600px) {
                grid-template-columns: auto auto;
                -webkit-box-pack: start;
                -ms-flex-pack: start;
                justify-content: start;

                a {
                    grid-column-start: span 2;
                }
            }



            time {
                width: 8.5em;
            }

            .cat a {
                width: 7em;
                background-color: var(--yellow-color);
                padding: .2em .5em;
                text-align: center;
                border-radius: 2px;
                font-size: .9em;
                display: inline-block;
                font-weight: 500;
                -webkit-transition: all .2s;
                transition: all .2s;

                &:hover {
                    background-color: color-mix(in srgb, var(--yellow-color) 40%, var(--orange-color));
                    text-decoration: none;
                }
            }

            .news_link {
                padding: .1em .5em;
                display: block;
            }
        }
    }

    .btn {
        text-align: center;
    }
}

/* exclusive */
.width_short.exclusive {
    border: 2px solid var(--green-color);
    border-radius: 6px;
    padding: 1em;
    text-align: center;
    background-color: #fff;

    @media (width < 640px) {
        margin: 2em 10px;
        width: auto;
    }

    h2 {
        font-size: 1.2em;
    }

    .btn {
        margin: 0 0 1em;

        a {
            background-color: var(--green-color);
            color: var(--font-color);
            position: relative;
            font-weight: 600;
            -webkit-transition: all .2s;
            transition: all .2s;

            &::before {
                position: relative;
                content: "";
                -webkit-mask-image: url(../images/icons/lock.svg);
                mask-image: url(../images/icons/lock.svg);
                -webkit-mask-position: center;
                mask-position: center;
                -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
                width: 1.2em;
                height: 1.2em;
                display: inline-block;
                background-color: currentColor;
                top: .2em;
                margin-right: .5em;
            }

            &:hover {
                background-color: rgb(from var(--green-color) r g b / 0.7);
            }
        }
    }
}