@charset "UTF-8";

/* CSS INFORMATION -====================================================
File name : highlight.css
Description : みどころページ
===================================================================== */


/* =====================================================================
    outline  
======================================================================*/

.outline {
    margin-bottom: 16rem;
}

@media screen and (max-width: 767px) {
    .outline .sec_ttl {
        padding-top: 4.9rem;
    }
    .outline .sec_ttl::before {
        font-size: 12rem;
    }
}


/* =====================================================================
    highlight  
======================================================================*/

.circle_anime_4 {
    z-index: 2;
}

.anchor_list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 6rem;
}

.anchor_list li {
    margin-bottom: 4rem;
    width: 50rem;
}

.anchor_list li a {
    padding: 1em;
    font-weight: 700;
    background-color: #ff72a3;
    color: #fff;
    text-align: center;
    border-radius: 3em;
}

h4 span {
    color: #ff72a3;
    font-size: 5rem;
    font-weight: bolder;
}

.group1_img_list figure {
    margin-bottom: 1em;
    width: 30rem;
    /* width: -webkit-min-content;
    width: -moz-min-content;
    width: min-content; */
}

.group1_img_list figure img {
    /* width: auto;
    height: 40rem; */
    border-radius: 0;
}

@media screen and (max-width: 767px) {
    .group1_img_list figure.wide {
        width: 100%;
    }
    .group1_img_list figure.wide img {
        width: 100%;
        height: auto;
    }
}

.group1_box::before {
    content: '';
    position: absolute;
    display: block;
    top: 25rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 68rem;
    height: calc(87% - 25rem);
    background-color: #f2f2f2;
    border-radius: 4rem 4rem 24rem 4rem;
    z-index: -1;
}

.group1_box>*:not(:last-child) {
    margin-bottom: 2em;
}

.group1_box_main {
    margin: 0 auto;
    width: 52rem;
}

.group1_box p {
    margin-left: auto;
    margin-right: auto;
    width: 60rem;
    line-height: 1.833;
}

.group1_box_sub {
    margin-left: 2rem;
    width: 24rem;
}

.group1_item:nth-of-type(2n) .group1_box::before {
    border-radius: 4rem 4rem 4rem 24rem;
}

.group1_item:nth-of-type(2n) .group1_box_sub {
    margin: 0 2rem 0 auto;
}

.circle_anime_3 {
    top: 57.7rem;
}

@media screen and (min-width: 768px) {
    .circle_anime_2 {
        top: 57.7rem;
    }
    .circle_anime_3 {
        top: -89.2rem;
    }
    .anchor_list li {
        margin: 0 2rem;
        width: 28rem;
    }
    .anchor_list li a:hover {
        background-color: #ffe600;
    }
    .group1_box::before {
        top: 12.5rem;
        width: 88rem;
        height: calc(83% - 12.5rem);
        border-bottom-right-radius: 16rem;
    }
    .group1_box_main {
        float: right;
        width: 40rem;
    }
    .group1_box p {
        margin: 0 auto 6rem 13rem;
        padding-top: 16rem;
        width: 43.2rem;
        line-height: 1.625;
    }
    .group1_box_sub {
        margin-left: 0;
    }
    .group1_item:nth-of-type(2n) .group1_box::before {
        border-bottom-left-radius: 16rem;
    }
    .group1_item:nth-of-type(2n) .group1_box_main {
        float: left;
    }
    .group1_item:nth-of-type(2n) .group1_box p {
        margin-right: 13rem;
        margin-left: auto;
    }
    .group1_item:nth-of-type(2n) .group1_box_sub {
        margin-right: 0;
    }
}