@charset "utf-8";
:root {
    --green      : #007261;
    --green_hover: rgb(0, 114, 97, 0.7);
    --yellow     : #FFF000;
}
/* content ****************/
#content {
    background-color: var(--yellow);
    padding-bottom: 40px;
}
@media only screen and (min-width:768px) {
    #content {
        padding-bottom: 90px;
    }
}
/**************************/
/* page_top ***************/
#page_top {
    padding-top: 100px;
    display: flex;
    flex-flow: wrap;
    justify-content: center;
    /****/
    a {
        width: 100%;
        max-width: 300px;
    }
}
@media only screen and (min-width:768px) {
    #page_top {
        padding-top: 60px;
        /****/
        a {
            width: 248px;
        }
    }
}
/**************************/
/* main_img ***************/
#main_img {
    position: relative;
    /****/
    .period {
        width: calc(116/375 * 100%);
        position: absolute;
        top: 6px;
        right: 6px;
    }
    h1 {
        display: flex;
        flex-flow: wrap;
        justify-content: center;
        /****/
        >picture {
            width: calc(335/375 * 100%);
        }
    }
}
@media only screen and (min-width:768px) {
    #main_img {
        width: calc(1056/1200 * 100%);
        max-width: 1056px;
        margin: 0 auto 0 auto;
        /****/
        .period {
            width: calc(244/1056 * 100%);
            top: calc(306/(1147 - 50) * 100%);
            right: calc(-22/1056 * 100%)
        }
        h1 {
            margin-top: calc(-50/1056 * 100%);
            /****/
            >picture {
                width: calc(940/1056 * 100%);
            }
        }
    }
}
/**************************/
/* prize ******************/
#prize {
    margin: 16px auto 0 auto;
    max-width: 1200px;
    position: relative;
    /****/
    .photo {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }
    .icon {
        aspect-ratio: 1/1;
        width: calc(80/375 * 100%);
        position: absolute;
        z-index: 2;
        top: 0;
        left: 0;
        /****/
        &.travel {
            left: auto;
            top: calc(64/2762.5 * 100%);;
            right: calc(20/375 * 100%);
        }
        &.gourmet {
            top: calc(1482/2762.5 * 100%);
            left: calc(20/375 * 100%);
        }
    }
}
@media only screen and (min-width:768px) {
    #prize {
        margin-top: 0;
        /****/
        .icon {
            width: calc(128/1200 * 100%);
            /****/
            &.travel {
                top: calc(100/2022 * 100%);
                right: calc(204/1200 * 100%);
            }
            &.gourmet {
                top: calc(1046/2022 * 100%);
                left: calc(151/1200 * 100%);
            }
        }
    }
}
/**************************/
section.base {
    display: flex;
    flex-flow: column;
    row-gap: 17px;
    width: calc(350/375 * 100%);
    max-width: 744px;
    margin: 0 auto 0 auto;
    /****/
    h2 {
        font-size: 2.0rem;
        font-weight: bold;
        text-align: center;
    }
    ul.atte {
        font-size: 1.2rem;
    }
}
@media only screen and (min-width:768px) {
    section.base {
        row-gap: 14px;
        position: relative;
        /****/
        &::before {
            content: "";
            display: block;
            width: 100vw;
            height: 100%;
            position: absolute;
            top: 0;
            left: calc(50% - 50vw);
            pointer-events: none;
        }
        h2 {
            font-size: 2.4rem;
        }
        ul.atte {
            font-size: 1.4rem;
        }
    }
}
/* overview ***************/
#overview {
    margin-top: 40px;
    /****/
    dl.table {
        display: block;
        margin: 0;
        padding: 0;
        /****/
        >.block {
            display: block;
            /****/
            &:nth-of-type(n+2) {
                margin-top: 2px;
            }
            >* {
                display: block;
                margin: 0;
                padding: 0;
                font-size: 1.4rem;
            }
            >dt {
                display: flex;
                flex-flow: wrap;
                align-items: center;
                justify-content: center;
                min-height: 40px;
                padding: 0.3em 20px 0.3em 20px;
                background-color: var(--green);
                color: #FFFFFF;
            }
            >dd {
                padding: 20px;
                background-color: #FFFFFF;
                /****/
                .grid {
                    display: flex;
                    flex-flow: column;
                    row-gap: 1em;
                    /****/
                    &:nth-of-type(n+2) {
                        margin-top: 20px;
                        padding-top: 20px;
                        border-top: 1px solid var(--green);
                    }
                    ul.list {
                        /****/
                        .body > *:nth-child(n+2) {
                            margin-top: 1em;
                        }
                    }
                }
            }
        }
    }
    dl.base {
        display: table;
        /****/
        >.block {
            display: table-row;
            /****/
            >* {
                display: table-cell;
                margin: 0;
                padding: 0;
                width: 100%;
            }
            &:nth-of-type(n+2) >* {
                padding-top: 1em;
            }
            >dt {
                width: auto;
                white-space: nowrap;
                text-align: justify;
                text-align-last:justify;
                /****/
                &::after {
                    content: "：";
                }
            }
        }
    }
}
@media only screen and (min-width:768px) {
    #overview {
        margin-top: 0;
        /****/
        &::before {
            background: url(../images/ss_hh1.svg) center top 25%/1100px auto no-repeat;
        }
        dl.table {
            display: table;
            border-collapse: collapse;
            /****/
            >.block {
                display: table-row;
                /****/
                >*,>dt {
                    display: table-cell;
                    font-size: 1.6rem;
                }
                >dt {
                    width: 197px;
                    text-align: center;
                    vertical-align: middle;
                    padding: 0.5em 20px 0.5em 20px;
                }
                >dd {
                    padding: 0;
                    /****/
                    >.grid {
                        padding: 10px 20px 10px 20px;
                        display: flex;
                        flex-flow: wrap;
                        align-items: center;
                        /****/
                        &:nth-of-type(n+2) {
                            margin-top: 0;
                            padding-top: 0.5em;
                        }
                    }
                }
                &:nth-of-type(n+2) {
                    /****/
                    >dt {
                        border-top: 1px solid var(--yellow);
                    }
                    >dd {
                        border-top: 1px solid var(--green);
                    }
                }
            }
        }
    }
}
/**************************/
/* subject ****************/
#subject {
    margin-top: 40px;
    /****/
    .white {
        background-color: #FFFFFF;
        padding: 20px;
        display: flex;
        flex-flow: column;
        row-gap: 10px;
        /****/
        ul.link {
            width: 100%;
            display: flex;
            flex-flow: column;
            row-gap: 10px;
            /****/
            >li {
                display: block;
                /****/
                a {
                    display: flex;
                    flex-flow: nowrap;
                    align-items: center;
                    column-gap: 10px;
                    padding: 12px 10px 12px calc(10px + 20px + 10px);
                    min-height: calc(5px + 20px + 5px);
                    background-color: var(--green);
                    color: #FFFFFF;
                    text-decoration: none;
                    position: relative;
                    /****/
                    &::before {
                        content: "";
                        display: block;
                        aspect-ratio: 1/1;
                        width: 20px;
                        position: absolute;
                        top: calc(50% - 20px/2);
                        left: 10px;
                        background: url(../images/ss_yaji1.svg) center center/100% auto no-repeat;
                    }
                }
            }
        }
        ul.atte {
            font-size: 1.4rem;
        }
    }
}
@media only screen and (min-width:768px) {
    #subject {
        margin-top: 78px;
        /****/
        &::before {
            background: url(../images/ss_hh2.svg) center bottom 10%/1100px auto no-repeat;
        }
        .white {
            padding: calc(62/744 * 100%) calc(66/744 * 100%) calc(58/744 * 100%) calc(66/744 * 100%);
            row-gap: 14px;
            /****/
            ul.link {
                margin: 0 auto 0 auto;
                row-gap: 14px;
                /****/
                >li {
                    /****/
                    a {
                        font-size: 1.8rem;
                        padding: 10px 10px 10px calc(35px + 25px + 35px);
                        min-height: 62px;
                        transition: var(--duration) all;
                        /****/
                        &:hover {
                            background-color: var(--green_hover);
                        }
                        &::before {
                            width: 25px;
                            top: calc(50% - 25px/2);
                            left: 35px;
                        }
                    }
                }
            }
            ul.atte {
                font-size: 1.8rem;
            }
        }
    }
}
/**************************/
/* cta ********************/
#cta {
    background-color: rgba(90, 90, 90, 0.9);
    height: 104px;
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    /****/
    .area {
        width: calc(345/375 * 100%);
        display: flex;
        flex-flow: wrap;
        justify-content: center;
        row-gap: 8px;
        /****/
        .text {
            max-width: 345px;
        }
        ul.link {
            display: flex;
            width: 100%;
            flex-flow: nowrap;
            justify-content: center;
            align-items: center;
            /****/
            >li {
                display: block;
                height: 68px;
            }
        }
    }
}
@media only screen and (min-width:768px) {
    #cta {
        height: 54px;
        /****/
        .area {
            flex-flow: nowrap;
            align-items: center;
            column-gap: 8px;
            /****/
            .text {
                order: 2;
            }
            ul.link {
                width: auto;
                order: 1;
                column-gap: 8px;
                /****/
                >li {
                    height: auto;
                }
            }
        }
    }
}
/**************************/