@charset "UTF-8";

.topbg {
    background: url("images/topbg.png") no-repeat center top /cover;
}

.cchimg img {
    height: 144px;
    width: 100%;
    object-fit: cover;
}

.top_art_topics h2 {
    position: relative;
    padding-left: 10px;
    z-index: 2
}

.top_art_topics h2::after {
    position: absolute;
    content: url("images/top_art_topics.png");
    bottom: -0.2em;
    left: 0;
    z-index: -1
}

.top_art01 {
    background: url("images/top_art01_img01.png") no-repeat center top /cover;
}

.top_art01 .pos-ab {
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%)
}

.top_art02 {
    background: url("images/top_art02_img02.png") no-repeat center top /cover;
}

.top_art02 section {
    margin: 0 0 100px auto;
    width: 590px;
}

.top_art02 .text-tate_s_yoko {
    margin-bottom: 100px;
}

.top_art02 .text-tate_s_yoko h3 {
    margin-left: 20px;
}

.top_art03 {
    overflow: hidden;
}

.top_art03::after {
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    width: calc(100vw - 140px);
    min-width: 1400px;
    height: 100%;
    background: url("images/top_art03_img01.png") no-repeat center center /cover;
    border-radius: 0 30px 30px 0;
    z-index: -10;
}

.top_art03 .container .back-white {
    background: url("images/top_art03_img09.png") no-repeat right bottom;
    padding: 50px;
}

.top_art04 {
    overflow: hidden;
    padding: 130px 0 0 0;
}

.top_art04 .rob {
    margin-bottom: 180px;
}

.top_art04.pos-rel::before {
    position: absolute;
    content: "";
    height: 477px;
    max-width: calc(50vw + 600px);
    width: 90%;
    background: #C3EBFA;
    z-index: -10;
    border-radius: 0 30px 30px 0;
    left: 0;
    bottom: 0;
}

.top_art04.pos-rel::after {
    position: absolute;
    content: "";
    height: 682px;
    max-width: calc(50vw + 600px);
    width: 90%;
    background: #FFFDEE;
    z-index: -9;
    border-radius: 30px 0 0 30px;
    right: 0;
    top: 0;
    -webkit-filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, .15));
    filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, .15));
    will-change: filter
        /* or transform */
}

.top_art05 {
    background: url("images/top_art04_img01.png") no-repeat center top /cover;
}

.top_art05 .flexbox section {
    width: 78px;
}

.top_art05 .back-cream {
    padding: 100px;
}

.top_art05 .back-cream::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    border: 2px solid #54C3F1;
    border-radius: 50px;
    top: 10px;
    left: 10px;
    -webkit-filter: drop-shadow(10px 10px 5px rgba(0, 0, 0, 0.15));
    filter: drop-shadow(10px 10px 5px rgba(0, 0, 0, 0.15));
    will-change: filter
        /* or transform */
}

.top_art05 .back-cream .rob {
    z-index: 1111
}

.top_art06 {
    background: linear-gradient(#fff 0%, #fff 50%, #C3EBFA 50%, #C3EBFA 100%);
}

.top_art06 .back-cream::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    border: 2px solid #54C3F1;
    border-radius: 50px;
    top: 10px;
    left: 10px;
    -webkit-filter: drop-shadow(10px 10px 5px rgba(0, 0, 0, 0.3));
    filter: drop-shadow(10px 10px 5px rgba(0, 0, 0, 0.3));
    will-change: filter
        /* or transform */
}

.top_art06 .back-cream section {
    z-index: 1111
}

.top_art07 {
    background: url("images/top_art06_img01.png") no-repeat center top /cover;
}

.footer_01 {
    background: url("images/shared/footer_bg.png") no-repeat center top /cover;
}

.underbox01 {
    max-width: 498px;
    width: 100%;
    margin-right: 0;
    margin-left: auto;
}

table a {
    word-break: break-all;
}

@media only screen and (max-width: 800px) {
    .top_art02 section {
        margin: auto;
        width: auto;
    }

    .top_art02 .text-tate_s_yoko {
        margin-bottom: 20px;
    }

    .top_art02 .text-tate_s_yoko h3 {
        margin-left: 0;
        margin-bottom: 10px;
    }

    .top_art03 {
        background: url("images/top_art03_img01.png") no-repeat center /cover;
    }

    .top_art03 .container .back-white {
        background: url("images/top_art03_img09.png") no-repeat right bottom;
        padding: 20px;
    }

    .top_art03 .container .back-white {
        background: url("images/top_art03_img09.png") no-repeat right bottom;
        padding: 30px 15px;
    }

    .top_art03::after {
        width: 0;
        min-width: 0;
        height: 0;
    }

    .top_art04 {
        padding: 0;
    }

    .top_art04 .rob {
        margin-bottom: 20px;
    }

    .top_art04.pos-rel::before {
        height: 0;
        width: 0;
    }

    .top_art04.pos-rel::after {
        height: 0;
        width: 0;
    }

    .top_art05 .flexbox section {
        width: 60px;
    }

    .top_art05 .back-cream {
        padding: 30px;
    }

    .top_art05 .back-cream::after {
        top: 3px;
        left: 3px
    }

    .top_art06 .back-cream::after {
        top: 3px;
        left: 3px
    }

    .sp66 {
        width: 66.666%;
    }
}