@charset "UTF-8";

@media only screen and (max-width:768px) {

    /* CSS Document */

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

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

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


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

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

    .main {
        background-image: none;
    }

    .img {
        vertical-align: bottom;
    }

    .contents {
        margin: 0 auto;
        background: #fff;
    }

    .contents_inner {
        margin: 0;

    }

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

    table {
        margin: 0 auto;
    }

    .contents td {
        line-height: 1.8em;
        font-size: 1.3em;
        color: #606060;
        padding-left: 2%;
    }

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

    }

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


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

    .fv {
        width: 100%;
    }

    #main-contents {
        width: 100%;
    }


    /*----------------------------------------
講師紹介
----------------------------------------*/

    .introduction {
        position: relative;
        overflow: hidden;

    }

    .loop {
        max-width: 700px;
        margin: 0 auto;
        position: absolute;
        bottom: 42.5%;
        bottom: 3%;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
    }

    .loop_box {
        display: flex;
        width: 20%;
    }

    .loop_box img {
        min-width: 200vw;
    }

    .loop_box img:first-child {
        animation: loop 100s -50s linear infinite;
    }

    .loop_box img:last-child {
        animation: loop2 100s linear infinite;
    }

    @keyframes loop {
        0% {
            transform: translateX(100%);
        }

        to {
            transform: translateX(-100%);
        }
    }

    @keyframes loop2 {
        0% {
            transform: translateX(0);
        }

        to {
            transform: translateX(-200%);
        }
    }


    .fixed_btn img {
        width: 90%;
        position: fixed;
        bottom: 1%;
        left: 1%;
        z-index: 9999999;

    }

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

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

    .back_btn:hover::after {
        transform: translateY(-50%) scaleX(1.4);
    }

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

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

    .footer a {
        color: #fff;
    }

}