@charset "utf-8";
/* default PC */

#contents {
    .first-txt {
        text-align: center;
        margin-bottom: 30px;
    }

    h2.cacht-txt {
        color: var(--main-accent-color);
    }

    .call-list {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 40px;
    }

    .call-item {
        background-color: var(--sub-bg-color);
        border-radius: 15px;
        padding: 30px;
    }

    .call-item h3 {
        border-left: 0px;
        margin: 0 0 15px;
        padding: 0;
        text-align: center;
    }

    /* 各h3 */
    .call-ttl-entity {
        color: #4EA5E9;
    }

    .call-ttl-school {
        color: #F08638;
    }

    .call-ttl-person {
        color: #F86B82;
    }

    .call-item img {
        display: flex;
        margin: 0 auto 20px;
    }

    .example-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
    }

    .example-item {
        background-color: var(--main-bg-color);
        border-radius: 7px;
        font-size: 20px;
        font-weight: 500;
        padding: 20px 20px 20px 47px;
        position: relative;
        box-sizing: border-box;
        width: fit-content;
    }

    .example-item:before {
        content: "";
        display: block;
        width: 1rem;
        height: 0.5rem;
        border-left: 4px solid var(--sub-accent-color);
        border-bottom: 4px solid var(--sub-accent-color);
        transform: rotate(-45deg);
        position: absolute;
        top: 28px;
        left: 18px;
    }

    .example-item:last-child,
    .example-item:nth-child(3) {
        margin-right: 0;
    }

    .contact-area h2 {
        margin: 0 0 30px;
    }

    .contact-box {
        background-color: #faf0ec;
        border: 5px solid #ecd2c8;
        border-radius: 15px;
        padding: 50px;
        text-align: center;
        position: relative;
    }

    .contact-box::before {
        background: url(../image/contents/guidance/contact_img_01.png) no-repeat center / contain;
        content: "";
        display: block;
        height: 219px;
        width: 193px;
        position: absolute;
        left: 160px;
        bottom: 40px;
    }

    .contact-box::after {
        background: url(../image/contents/guidance/contact_img_02.png) no-repeat center / contain;
        content: "";
        display: block;
        height: 179px;
        width: 296px;
        position: absolute;
        right: 90px;
        bottom: 40px;
    }

    .contact-box .link-btn {
        margin: 0 auto;
    }

    .contact-box .main-txt {
        color: var(--sub-accent-color);
        font-size: 28px;
        font-weight: 700;
        letter-spacing: 0.1em;
        line-height: 1.6em;
        margin: 0 0 20px;
        padding: 0;
    }

    .look-pink {
        color: var(--main-accent-color);
    }
}


/* view-1140 notePC,Tablet */
@media screen and (max-width: 1140px) {}


@media screen and (max-width: 1380px) {
    #contents {
        .contact-box::after {
            width: 186px;
            right: 40px;
            bottom: 40px;
        }

        .contact-box::before {
            width: 133px;
            left: 20px;
        }

        .call-list {
            gap: 20px;
        }

        .call-item {
            padding: 18px;
        }
    }
}

@media screen and (max-width: 1200px) {
    #contents {
        .call-item h3 {
            font-size: 22px;
        }
    }
}

/* view-959 Mobile,Tablet */
@media screen and (max-width: 959px) {
    #contents {
        .first-txt {
            text-align: left;
        }

        .contact-box .main-txt {
            font-size: 25px;
        }

        .call-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 20px;
        }

        .call-list>* {
            width: calc(50% - 20px);
        }

        .call-area h2 {
            font-size: 26px;
        }

        /* お問い合わせエリア */
        .contact-box::after {
            top: -10px;
            right: 46px;
            width: 136px;
        }

        .contact-box::before {
            width: 93px;
            left: 80px;
            top: -30px;
        }

        .contact-area .main-txt {
            text-align: center;
        }
    }
}

@media screen and (min-width: 560px) and (max-width: 959px) {

    .contact-area .main-txt .sp-none,
    .contact-area .mb-20 .sp-none {
        display: block;
    }
}

@media screen and (max-width: 813px) {
    #contents {
        .example-list {
            gap: 15px;
        }

        .example-item {
            width: 100%;
            padding: 15px 15px 15px 40px;
        }

        .example-item:before {
            top: 25px;
            left: 15px;
        }
    }
}

@media screen and (max-width: 700px) {
    #contents {
        .call-list>* {
            width: 100%;
        }

        .call-item img {
            margin: 0 auto 5px;
        }
    }
}

@media screen and (max-width: 660px) {
    #contents {

        /* お問い合わせエリア */
        .contact-box::after {
            display: none;
        }

        .contact-box::before {
            display: none;
        }

        .example-item:before {
            width: 0.8rem;
            height: 0.4rem;
            border-left: 3px solid var(--sub-accent-color);
            border-bottom: 3px solid var(--sub-accent-color);
        }
    }
}

/* view-559 Mobile */
@media screen and (max-width: 559px) {
    #contents {

        .example-item {
            font-size: 15px;
        }

        .call-item h3 {
            margin: 0 0 10px
        }

        .call-area h2 {
            font-size: 22px;
        }

        .contact-box .main-txt {
            font-size: 22px;
            text-align: left;
        }

        .contact-area .mb-20 {
            text-align: left;
        }

        .contact-box {
            padding: 50px 15px;
        }
    }
}