@charset "utf-8";
/* =======================================================
* max-width: 1199px
* ======================================================= */
@media screen and (max-width: 1199px) {
    /* =======================================================
    * common
    * ======================================================= */
    body {
        font-size: 1.4rem;
    }

    h2 {
        font-size: 3rem;
    }

    h3 {
        font-size: 2rem;
    }

    .container {
        padding: 11rem 2rem;
    }

    .br {
        display: none;
    }

    /* =======================================================
    * style
    * ======================================================= */
    h1 {
        font-size: 1.8rem;
    }

    h1 p {
        font-size: 4rem;
    }

    .recommend-inner h2 {
        bottom: 2.6rem;
    }

    .recommend-inner .flex-block {
        padding: 4rem 0 8rem;
    }

    .why-point h3 {
        bottom: 1.5rem;
    }

    .why-inner p {
        font-size: 1.4rem;
        padding: 1rem 4rem 4rem;
    }

    .point-inner .flex-block {
        display: block;
    }

    .point-inner img {
        display: block;
        width: 80%;
        margin: 0 auto;
    }

    .text-box p {
        padding: 4rem 0;
    }

    .plan-contents {
        width: 100% !important;
        box-sizing: border-box;
        margin: 16rem auto 0;
    }

    .plan-inner .flex-block {
        display: block;
    }

    .title {
        font-size: 2.4rem;
    }

    .mark {
        justify-content: center;
        margin-top: 2rem;
    }

    .option {
        margin-top: 10rem;
    }

    .accordion-open {
        font-size: 1.8rem;
        padding: 1.5rem 4rem 1.5rem 1.5rem;
    }

    .accordion-open::before,
    .accordion-open::after {
        right: 1rem;
    }

    .accordion-hidden:checked + .accordion-open + .accordion-inner {
        padding: 0 1.5rem 1.5rem;
    }

    .contact-contents dd {
        padding: 0 0 1rem;
    }

    dd input, dd textarea {
        padding: 1rem;
    }
}


/* =======================================================
* max-width: 768px
* ======================================================= */
@media screen and (max-width: 768px) {
    .card:not(:last-child) {
        padding-bottom: 4rem;
    }

    .card img {
        padding: 0;
    }

    .pc {
        display: none;
    }

    .sp {
        display: block;
    }

    .why-inner p {
        line-height: 4rem;
    }

    .why-point p,
    .text-box p,
    .plan-contents h4 + p {
        line-height: 3rem;
    }

    .plan-contents:not(:nth-of-type(2)) {
        width: 90% !important;
        padding: 2rem;
    }

    .plan-contents h3 {
        width: 150px;
        height: 150px;
        line-height: 150px;
        top: -10%;
        transform: translate(-50%,10%);
    }

    
}

/* =======================================================
* max-width: 440px
* ======================================================= */
@media screen and (max-width: 440px) {
    .header-container {
        justify-content: center;
    }

    .header-inner ul {
        display: block;
    }

    .header-inner ul li {
        margin: 1rem;
    }

    .recommend-inner h2 {
        bottom: 2.3rem;
    }

    .card {
        font-size: 1.6rem;
        padding-bottom: 4rem;
    }

    .plan-contents h3 {
        width: 150px;
        height: 150px;
        line-height: 150px;
        top: -10%;
        transform: translate(-50%,10%);
    }



}