@charset "UTF-8";
/* CSS Document */


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

    /*-------------------------------------------------------------------------------------
スマホ用レイアウト（768px以下スクリーン）
----------------------------------------------------------------------------------------*/

    /*--------------------------------------------------
共通設定(スマホ)
-----------------------------------------------------*/

    /*body全体の初期スタイル調整*/
    body {
        width: 100%;
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
    }

    /*--------------------------------------------------
見出しタグ設定（スマホ）
-----------------------------------------------------*/
    h2 {
        position: relative;
        padding: 1em 0.5em;
        text-align: center;
    }

    h2:before,
    h2:after {
        position: absolute;
        content: '';
    }

    h2:after {
        top: 0;
        left: 0;
        width: 50px;
        height: 50px;
        border-top: 2px solid #333333;
        border-left: 2px solid #333333;
    }

    h2:before {
        right: 0;
        bottom: 0;
        width: 50px;
        height: 50px;
        border-right: 2px solid #333333;
        border-bottom: 2px solid #333333;
    }

    h3 {
        margin: 1em 1em 0em;
        padding: 0.5em 1em;
    }

    h9 {
        margin: 1em 1em 2em;
        padding: 0.5em 1em;
    }


    /*--------------------------------------------------
全体レイアウト／背景設定（スマホ）
-----------------------------------------------------*/
    /*全体エリア（全体背景を設定するにはここ）*/
    .main {
        background-color: #f2f2f2;
    }

    /*記事(ボディ)エリア*/
    .article {
        background-color: #fff;
        border-left: none;
        border-right: none;
        font-size: 1.6em;
        /*=16px*/
    }

    /*記事(ボディ)エリアの行間*/
    .article p {
        line-height: 1.6;
    }

    .article {
        width: 100%;
    }

    /*カラム全体の幅を変更する*/
    .top_image_in,
    .section_inr,
    .cta_midashi_in,
    .cta_in,
    .section_01,
    .section_05,
    .section_07,
    .messsage_box {
        width: 100%;
        margin: 0 auto;
        /*真ん中に要素を置きたいときに使う*/
    }

    /*--------------------------------------------------
上部固定ヘッダー設定
-----------------------------------------------------*/
    /*上部固定ヘッダー全体*/
    .header {
        position: sticky;
        position: -webkit-sticky;
        top: 0;
        z-index: 5000;
        background-color: #fff;
        border-bottom: 1px solid #ccc;
        overflow: auto;
    }

    /*ヘッダー内部をカラム幅にする*/
    .header_inr {
        max-width: 100%;
        margin: 0 auto;
        overflow: hidden;
    }

    /*ヘッダーのロゴ*/
    .header_logo {
        width: 28%;
        float: left;
        margin: 0em;
    }

    /*ヘッダーのLINEボタン*/
    .header_line {
        width: 42%;
        float: right;
        margin: 0.1em 0em 0em;
    }

    /*ヘッダーの電話ボタン*/
    .header_tel {
        width: 35%;
        float: right;
        margin: 0.7em 0.5em 0em;
    }

    /*--------------------------------------------------
ファーストビュー設定
-----------------------------------------------------*/
    .top_image {
        background-image: none;
    }

    .top_image_in img {
        width: 100%;
    }

    /*--------------------------------------------------
sectionの設定
-----------------------------------------------------*/
    .seciton_01 {
        padding: 0.5em 0.5em;
    }

    .section_02 {
        background-color: #FFFEF0;
        padding: 0.5em 0.5em 1em;
    }

    /*--------------------------------------------------
ctaの設定
-----------------------------------------------------*/
    .cta_bg {
        background-color: #fcee55;
        padding-top: 0.7em;
    }

    .box_btn {
        padding: 0.5em 1em 0.5em;

    }

    /*--------------------------------------------------
自己紹介
-----------------------------------------------------*/

    .about_message {
        margin-bottom: 1em;
        padding: 1em 0.5em;
        box-shadow: 0px 0px 1px #000;
    }

    .img_shadow {
        box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.4);
        );
    }

    /*--------------------------------------------------
コミュニティ生のインタビュー
-----------------------------------------------------*/
    .section_04 {
        padding: 0em 0.5em;
    }

    .iframe-wrap {
        margin: 0em;
    }

    .box_voice {
        margin: 1em;
        padding: 1em;
        box-shadow: 3px 5px 10px #ccc;
    }


    /*--------------------------------------------------
学習コンテンツ
-----------------------------------------------------*/

    .box_contents {
        display: block;
        margin-top: 2em;
        padding: 0em 1em 1em;

        text-align: center;

    }

    .content {
        margin: 1em 0em;
        border: solid 2px #ccc;
        width: 100%;
        display: block;
        text-align: center;

    }

    .box-support {
        margin: 1em 2em;
        padding: 0em;

    }

    .support_in {
        padding: 1em;

    }

    /*--------------------------------------------------
よくある質問
-----------------------------------------------------*/
    .box_qa_q {
        font-size: 1em;
    }

    .box_qa_a {
        background-color: #fff;
        margin: 1em;
    }

    /*--------------------------------------------------
塾長メッセージ
-----------------------------------------------------*/
.section_08 {
    padding: 0.5em 0.3em;
}

.messsage_box {

    padding: 1em;
    margin-bottom: 2em;
}

.messsage_box_in {
    padding: 2em 0.5em;
    border: 2px solid #c69c6d;
}





    /*--------------------------------------------------
フッター部分
-----------------------------------------------------*/
    .footer {
        font-size: 1.2em;
    }