@charset "UTF-8";

section#es_index {
    .wrap_es_index {
        display: grid;
        row-gap: 30px;

        a.wrap0__img_es_index {
            transition: color .35s;
            display: grid;
            grid-template-columns: 200px 1fr;
            column-gap: 20px;
            position: relative;

            &:hover {
                text-decoration: none;

                & .h2__es_index,
                .p__time__es_index {
                    color: var(--main-color1)
                }

                & .wrap__img_es_index img {
                    opacity: .8
                }
            }

            img.img-new-label {
                position: absolute;
                top: -8px;
                left: -8px;
            }

            .wrap__img_es_index img {
                transition: opacity .35s
            }

            .h2__es_index {
                margin: 6px auto 0;
                font-size: 18px;
                line-height: 1.3;
                transition: color .35s
            }

            .p__time__es_index {
                margin: 0;
                font-size: 16px;
                color: var(--gray2);
                transition: color .35s
            }
        }
    }
}

@media screen and (max-width:767px) {
    section#es_index {
        & .wrap_es_index {
            & a.wrap0__img_es_index {
                grid-template-columns: 4fr 10fr;

                .h2__es_index {
                    margin: 6px auto 0;
                    font-size: 16px
                }
            }
        }
    }
}

@media screen and (max-width:480px) {
    section#es_index {
        & .wrap_es_index {
            row-gap: 25px;

            & a.wrap0__img_es_index {
                grid-template-columns: 27.5vw 1fr;
                column-gap: 15px;
                align-items: start;

                .h2__es_index {
                    margin: 6px auto 0;
                    font-size: 15px
                }

                .p__time__es_index {
                    font-size: 14px
                }
            }
        }

        .p__summary_es_index {
            margin: 5px auto 0;
            font-size: 12px;
            line-height: 1.4
        }

        .wrap__img_es_index {
            padding: 0
        }
    }
}

:root {
    --height-ccd-header: 175px
}

@media screen and (max-width:1199px) {
    :root {
        --height-ccd-header: 160px
    }
}

@media screen and (max-width:959px) {
    :root {
        --height-ccd-header: 125px
    }
}

@media screen and (max-width:767px) {
    :root {
        --height-ccd-header: 100px
    }
}

@media screen and (max-width:480px) {
    :root {
        --height-ccd-header: 80px
    }
}

#ccd-header {
    position: relative;
    background: var(--main-color1-l2);
    margin: 10px 20px 25px;
    border-radius: 35px;
    height: var(--height-ccd-header);

    &:after {
        content: url(/themes/ayakomatsuda/img/bg_page-header.svg);
        position: absolute;
        bottom: 0;
        right: 30px;
        width: 195px;
        height: auto;
        opacity: .85
    }

    .ccd-header-container {
        width: 100%;
        max-width: 1240px;
        margin: 0 auto;
        height: var(--height-ccd-header);
        display: grid;
        justify-items: center;

        .h1_ccd-header {
            line-height: 1;
            height: var(--height-ccd-header);
            display: grid;
            align-content: center;
            margin: 0;
            padding: 0;

            .h2_text {
                height: 65px
            }

            span {
                display: block;
                margin: 10px auto 0;
                text-align: center;
                font-size: 14px;
                font-weight: 400;
                display: none
            }
        }
    }
}

#topicpath {
    .topicpath {
        margin-bottom: 25px;
        padding: 0;
        background: initial;

        ol.topicpath-list {
            display: flex;
            overflow: hidden
        }

        .topicpath-item {
            background: initial;
            position: relative;
            display: flex;
            align-items: center;
            padding: 0 10px 0 25px;

            &:first-child {
                padding-left: 0;

                &:before {
                    background: none;
                    width: initial;
                    height: initial
                }
            }

            .topicpath-link {
                overflow: hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 1;
                text-overflow: ellipsis;
                white-space: initial;
                word-break: keep-all;
                padding: 0;
                margin: 0;
                font-size: 13px
            }
        }

        li.topicpath-item:before {
            content: "";
            display: block;
            background: var(--main-color1);
            width: 9px;
            height: 9px;
            border-radius: 99px;
            position: absolute;
            left: 3px
        }
    }
}

@media screen and (max-width:1599px) {
    #ccd-header {
        border-radius: 20px
    }
}

@media screen and (max-width:1299px) {
    #ccd-header {
        margin: 10px 10px 25px;
    }
}

@media screen and (max-width:1199px) {
    #ccd-header {
        &:after {
            right: 25px;
            width: 195px;
            bottom: -10px
        }

        & .ccd-header-container {
            & .h1_ccd-header {
                .h2_text {
                    height: 62.5px
                }

                span {
                    font-size: 13px
                }
            }
        }
    }
}

@media screen and (max-width:959px) {
    #ccd-header {
        &:after {
            right: 25px;
            width: 175px;
            bottom: -15px
        }

        & .ccd-header-container {
            & .h1_ccd-header {
                .h2_text {
                    height: 57.5px
                }
            }
        }
    }
}

@media screen and (max-width:767px) {
    #ccd-header {
        margin: 20px 15px 20px;

        &:after {
            right: 20px;
            width: 150px;
            bottom: -20px
        }

        & .ccd-header-container {
            & .h1_ccd-header {
                .h2_text {
                    height: 47.5px
                }

                span {
                    margin: 5px auto 0;
                    font-size: 12px
                }
            }
        }
    }

    #topicpath {
        .topicpath {
            .topicpath-item {
                .topicpath-link {
                    font-size: 12px;
                    white-space: nowrap;
                }

                &:last-child {
                    .topicpath-link {
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: initial;
                        word-break: initial;
                    }
                }
            }
        }
    }
}

@media screen and (max-width:480px) {
    #ccd-header {
        border-radius: 15px;

        &:after {
            right: 10px;
            width: 110px;
            bottom: -15px
        }

        & .ccd-header-container {
            & .h1_ccd-header {
                .h2_text {
                    height: 43.5px
                }

                span {
                    margin: 5px auto 0;
                    font-size: 12px
                }
            }
        }
    }

    #topicpath {
        .topicpath {
            ol.topicpath-list {
                display: flex;
                padding: 0 20px;

                .topicpath-item {
                    .topicpath-link {
                        font-size: 11px
                    }
                }

            }
        }
    }
}