@charset "UTF-8";

@media only screen and (max-width:768px) {
    .pc {
        display: none !important;
    }

    .sp {
        display: block !important;
    }

    /* CSS Document */

    /*----------------------------------------
SP用レイアウト(768px以下のスクリーン)
----------------------------------------*/

    /* body全体の初期スタイル調整 */

    body {
        width: 100%;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }

    a {
        text-decoration: none;
        font-size: 1em;
    }

/*----------------------------------------
全体レイアウト/背景設定
----------------------------------------*/

    /* 全体エリア(全体背景を設定するにはここ) */

    .main {
        background-image: none;
    }

    .img {
        vertical-align: bottom;
    }

    .contents {
        background: #c2e6e2;
        padding: 3% 1%;
    }

    .contents_inner {
        margin: 5%;
        padding: 7%;
        background: #fff;
        border-radius: 20px;
    }

    .contents td {
        line-height: 1.8em;
        font-size: 1.2em;
        color: #093533;
        padding-left: 3%;
    }

/*--------------------------------------------------------
上部固定ヘッダー設定
--------------------------------------------------------*/
    /*上部固定ヘッダー全体*/
    .header {
        position: sticky;
        position: -webkit-sticky;
        top: 0;
        z-index: 5000;
        background: #fff;
        overflow: hidden;
    }

    .header_inner {
        align-items: center;
    }

    /*ヘッダーロゴ*/
    .header_logo {
        float: left;
        width: 30%;
        margin: 1.5em 0 1.5em 2em;

    }

    /*ヘッダー ボタン*/
    .sub-button {
        width: 40%;
        float: right;
        margin: 1.5em 2em 1.5em 0;
    }

    /*ヘッダー内の画像はエリア幅に合わせる*/
    .header_logo img,
    .sub-button img {
        width: 100%;
    }

    /*H2タグ*/

    .contents h2 {
        margin: 0 0 0em;
        padding: 0.3em 0.9em;
        font-size: 2.6em;
        font-weight: bold;
        color: #093533;
        text-align: center;
    }

    .contents h3 {
        margin: 0 0 0em;
        font-size: 2em;
        font-weight: bold;
        color: #093533;
        padding: 0.25em 0.5em;
        /*上下 左右の余白*/
        border-left: solid 5px #20b2aa;
        /*左線*/
    }

    .contents p {
        line-height: 1.8em;
        font-size: 1.3em;
        color: #093533;
    }

/*----------------------------------------
ファーストビュー設定
----------------------------------------*/

    .fv {
        width: 100%;
    }

    #main-contents {
        width: 100%;
    }

/*----------------------------------------
CTAエリア01
----------------------------------------*/

    .fv {
        position: relative;
    }

    .cta_btn_01 {
        position: absolute;
        left: 2%;
        top: 80%;
        width: 95%;
        transition-duration: .4s;
    }

    .cta_btn_01 img {
        margin: 0 auto;
        animation: beside 2s linear infinite;
        transform-origin: center;
        cursor: pointer;
    }

    .cta_btn_01 a:hover {
        filter: brightness(1.10);
        /* 明るくする */
    }

    @keyframes beside {
        0% {
            transform: translate(2px, 0px);
        }

        5% {
            transform: translate(-2px, 0px);
        }

        10% {
            transform: translate(2px, 0px);
        }

        15% {
            transform: translate(-2px, 0px);
        }

        20% {
            transform: translate(2px, 0px);
        }

        25% {
            transform: translate(-2px, 0px);
        }

        30% {
            transform: translate(0px, 0px);
        }
    }

/*----------------------------------------
CTAエリア02
----------------------------------------*/

    #plan {
        position: relative;

    }

    .cta_btn_02 {
        position: absolute;
        left: 2.4%;
        top: 85%;
        width: 95%;
        transition-duration: .4s;
        margin: 0 auto;
    }

    .cta_btn_02 img {
        margin: 0 auto;
        animation: beside 2s linear infinite;
        transform-origin: center;
        cursor: pointer;
    }

    .cta_btn_02 a:hover {
        filter: brightness(1.10);
    }

    @keyframes beside {
        0% {
            transform: translate(2px, 0px);
        }

        5% {
            transform: translate(-2px, 0px);
        }

        10% {
            transform: translate(2px, 0px);
        }

        15% {
            transform: translate(-2px, 0px);
        }

        20% {
            transform: translate(2px, 0px);
        }

        25% {
            transform: translate(-2px, 0px);
        }

        30% {
            transform: translate(0px, 0px);
        }
    }

/*----------------------------------------
CTAエリア03
----------------------------------------*/

    #last {
        position: relative;

    }

    .cta_btn_03 {
        position: absolute;
        left: 2.4%;
        top: 88%;
        width: 95%;
        transition-duration: .4s;
        margin: 0 auto;
    }

    .cta_btn_03 img {
        margin: 0 auto;
        animation: beside 2s linear infinite;
        transform-origin: center;
        cursor: pointer;
    }

    .cta_btn_03 a:hover {
        filter: brightness(1.10);
        /* 明るくする */
    }

    @keyframes beside {
        0% {
            transform: translate(2px, 0px);
        }

        5% {
            transform: translate(-2px, 0px);
        }

        10% {
            transform: translate(2px, 0px);
        }

        15% {
            transform: translate(-2px, 0px);
        }

        20% {
            transform: translate(2px, 0px);
        }

        25% {
            transform: translate(-2px, 0px);
        }

        30% {
            transform: translate(0px, 0px);
        }
    }

/*----------------------------------------
受講生口コミ
----------------------------------------*/

    #voice {
        position: relative;
    }

    .slide_show {
        position: absolute;
        width: 110%;
        bottom: 15%;
        right: 0;
    }

    .slide_show img {
        opacity: .3;
        transform: scale(.8);
        transition: opacity .5s, transform .5s;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        width: 100%;
        height: auto;
    }

    .slide_show .slick-center img {
        opacity: 1;
        transform: scale(1);
    }

    .slide_show button {
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        outline: none;
        padding: 0;
        border: none;
        background-color: transparent;
    }

    .slide_show button:focus {
        outline: none;
    }

    .slide_show button.arrow-common {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-size: contain;
        background-repeat: no-repeat;
        width: 14%;
        padding-top: 6%;
        cursor: pointer;
        z-index: 5;
    }

    .slide_show button.arrow-prev {
        background-image: url(../images/allow-icon_left.png);
        left: 13%;
        width: 4%;
    }

    .slide_show button.arrow-next {
        background-image: url(../images/allow-icon_right.png);
        right: 4%;
        width: 4%;
    }

/*----------------------------------------
よくある質問
----------------------------------------*/

    #faq{
        background-image: url(../images/7_faq.jpg);
        background-repeat: no-repeat;
        background-size: 100%;

    }

    .accordion_wrap {
        padding-top: 30%;
        padding-bottom: 5%;
        width: 100%;
        margin: 0 auto;
    }

    .accordion {
        margin-bottom: 3%;
        position: relative;

    }

    .accordion__btn {
        cursor: pointer;
        position: relative;
    }

    .accordion__btn::before {
        content: '';
        display: inline-block;
        width: 4%;
        height: 3px;
        background-color: #fff;
        position: absolute;
        right: 3.97%;
        top: 50%;
        transform: translateY(-50%);
        transition: opacity 1s;
    }

    .accordion__btn::after {
        content: '';
        display: inline-block;
        border-radius: 20%;
        width: 4%;
        height: 3px;
        background-color: #fff;
        position: absolute;
        right: 3.97%;
        top: 50%;
        transform: translateY(-50%) rotate(90deg);
        transition: transform 1s;
    }

    .accordion__btn.show::before {
        opacity: 0;
    }

    .accordion__btn.show::after {
        transform: translateY(-50%) rotate(180deg);
    }

    .accordion__content {
        display: none;
    }

/*----------------------------------------
トップへ戻るボタン
----------------------------------------*/

    a.back_btn.sp {
        display: block;
        text-align: center;
        vertical-align: middle;
        text-decoration: none;
        width: 50%;
        margin: auto;
        padding: 1rem;
        font-weight: bold;
        border: 2px solid #20b2aa;
        color: #20b2aa;
        border-radius: 100vh;
        transition: 0.5s;
        font-size: 1.1em;
    }

    a.back_btn:hover {
        color: #fff;
        background: #20b2aa;
    }

/*----------------------------------------
フッター部分
----------------------------------------*/

    .footer {
        background-color: #849a99;
        padding: 4em 0em;
        text-align: center;
        font-size: 1.2em;
        color: #fff;
    }

    .footer a {
        color: #fff;
    }