@charset "UTF-8";

/* CSS Document */
/*-------------------------------------------------------------------------------------
PC用レイアウト（768px以上スクリーン）
----------------------------------------------------------------------------------------*/
/*--------------------------------------------------
共通設定(PC)
-----------------------------------------------------*/
/*body全体の初期スタイル調整*/
body {
    font-size: 62.5%;
    /*emの計算をしやすくするための定番設定*/
    font-family: "Hiragino Sans", "ヒラギノ角ゴシック";
    font-weight: 300;
    color: #000;
}

/*リンク文字の設定*/
a {
    text-decoration: underline;
}

a:link,
a:visited {
    color: #39f;
}

a:hover,
a:active {
    color: #f60;
}

/*ブラウザのCSSをリセット*/
p {
    margin: 0 !important;
    padding: 0 !important;
}

/*セクションエリアの共通設定*/
section {
    clear: both;
    overflow: auto;
}

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

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

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

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


h3 {
    margin: 2em 2em 0em;
    padding: 0.5em 2em;
    color: #fff;
    background: #63b8d1;
    -webkit-box-shadow: 5px 5px 0 #1393ba;
    box-shadow: 5px 5px 0 #1393ba;
    text-align: center;

}

h4 {
    position: relative;
    padding: 1em;
    text-align: center;
    font-size: 1.2em;

}

h4:before {
    position: absolute;
    bottom: 0.5px;
    left: calc(50% - 30px);
    width: 60px;
    height: 3px;
    content: '';
    border-radius: 3px;
    background: #fbd024;
}



h5 {
    position: relative;
    padding: 1em;
    text-align: center;
    font-size: 1.2em;
}

h5:before {
    position: absolute;
    bottom: 0.5px;
    left: calc(50% - 30px);
    width: 60px;
    height: 3px;
    content: '';
    border-radius: 3px;
    background: #f25a98;
}


h6 {
    position: relative;
    padding: 1em;
    text-align: center;
    font-size: 1.2em;
}

h6:before {
    position: absolute;
    bottom: 0.5px;
    left: calc(50% - 30px);
    width: 60px;
    height: 3px;
    content: '';
    border-radius: 3px;
    background: #7151ff;
}


h7 {
    position: relative;
    padding: 1em;
    text-align: center;
    font-size: 1.2em;
}

h7:before {
    position: absolute;
    bottom: 0.5px;
    left: calc(50% - 30px);
    width: 60px;
    height: 3px;
    content: '';
    border-radius: 3px;
    background: #3ad9a3;
}

h8 {
    position: relative;
    padding: 1em;
    text-align: center;
    font-size: 1.2em;

}

h8:before {
    position: absolute;
    bottom: 0.5px;
    left: calc(50% - 30px);
    width: 60px;
    height: 3px;
    content: '';
    border-radius: 3px;
    background: #1393ba;
}

h9 {
    margin: 1em 2em 3em;
    padding: 0.5em 2em;
    color: #fff;
    background: #2e3192;
    -webkit-box-shadow: 5px 5px 0 #1b1464;
    box-shadow: 5px 5px 0 #1b1464;
    text-align: center;

}




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

/*カラム部分*/
.main-in {
    padding: 0em 0;
}

/*カラム内部のサイズ*/
.main-contents .contents {
    margin-bottom: 0em;
    padding: 0 80px;
}


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

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

.article {
    width: 100%;
}

/*カラム全体の幅を変更する*/
.top_image_in,
.section_inr,
.cta_midashi_in,
.cta_in,
.section_01,
.section_07,
.messsage_box {
    width: 950px;
    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: 950px;
    margin: 0 auto;
    overflow: hidden;
}

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

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

/*ヘッダー内の画像が常に幅100%になるように*/
.header_logo img,
.header_line img,
.header_tel img {
    width: 100%;
}

/*--------------------------------------------------
ファーストビュー設定
-----------------------------------------------------*/
.top_image {
    background-image: url("../images/top_image_back.jpg");
    background-position: top center;
    height: auto;
}

.top_image_in img {
    width: 100%;
}

/*--------------------------------------------------
ctaの設定
-----------------------------------------------------*/

.cta_midashi {
    background-image: url("../images/bg_midashi_cta.jpg");
    background-repeat: no-repeat;
    background-position: top center;
    height: auto;
}

.cta_bg {
    background-color: #fcee55;
}

.box_btn {
    padding: 0em 3em 1em;
    text-align: center;
}


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




.section_02 {
    background-color: #FFFEF0;
    padding: 1.5em 3em;
}

.about_message {
    background-color: #fff;
    margin-bottom: 1em;
    padding: 2.5em 2em;
    box-shadow: 0px 0px 1px #000;

}

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

.section_03 {
    background-image: url(../images/bg_jisseki.jpg);
    background-position: top center;
    height: auto;

}

.scroll_btn {
    animation-name:fuwafuwa;
    animation-duration:2s;
    animation-iteration-count:infinite; 
}
 
@keyframes fuwafuwa {
    0% {-webkit-transform:translate(0, 0px);}
    50% {-webkit-transform:translate(0, -10px);}
    100% {-webkit-transform:translate(0, 0px);}
}



/*--------------------------------------------------
コミュニティ生のインタビュー
-----------------------------------------------------*/



.section_04 {
    margin-bottom: 1em;
}

.iframe-wrap {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border: 2px solid #ccc;
    margin: 0em 0em 2em;
}

.iframe-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.box_voice {
    background-color: #fbffc3;
    margin: 1em 2em 2em;
    padding: 1em 2em;
    box-shadow: 3px 5px 10px #ccc;

}

.text_area {
    padding: 1em;


}







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

.section_05 {
    background-image: url(../images/bg_houganshi.png);
    background-position: top center;
    height: auto
}


.box_contents {
    display: flex;
    flex-wrap: wrap;
    padding: 0em 1em 3em;
    width: 100%;
    margin-top: 2em;
    margin-left: auto;
    margin-right: auto;
    align-items: stretch;
}

.content {
    margin: 0.5em;
    border: solid 2px #ccc;
    width: 31%;
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
    background-color: #fff;
}

.content_in {
    margin: 0em 1em 1em;

}

.box-support {
    margin: 2em 4em;
    padding: 1em;
    border: solid 4px #e6e6e6;

}

.support_in {
    padding: 2em;
    font-size: 1.1em;

}



/*--------------------------------------------------
塾長メッセージ
-----------------------------------------------------*/

.section_08 {
    background-image: url(../images/bg_message_top.jpg);
    background-repeat: no-repeat;
    /* 背景を繰り返さない */
    background-position: 50% 50%;
    /* 背景画像の位置は画面中央 */
    background-attachment: fixed;
    /* 背景画像を固定する */
    background-size: cover;
    padding: 1em 0em;
}

.midashi_message {
    background-image: url(../images/bg_message_top.jpg);
    background-repeat: no-repeat;
    /* 背景を繰り返さない */
    background-position: 50% 50%;
    /* 背景画像の位置は画面中央 */
    background-attachment: fixed;
    /* 背景画像を固定する */
    background-size: cover;
    padding: 1em 0em 0em;
    
    
    
}


.messsage_box {

    padding: 2em;
    background-color: #fff9e6;
    margin-bottom: 2em;
}

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






/*--------------------------------------------------
よくある質問
-----------------------------------------------------*/
.box_qa {
    background-color: #fff;
    padding-bottom: 2em;
}

.box_qa_q {
    background-color: #fff;
    padding: 1em 2em 1em 3em;
    border-bottom: 1px solid #ccc;
    font-size: 1.2em;
    font-weight: bold;
    color: #2e3192;
}

.box_qa_a {
    background-color: #fff;
    padding: 1em 2em 1em 3em;
}

.box_qa_q p,
.box_qa_a p {
    text-indent: -2em;
}


/*--------------------------------------------------
フッター部分
-----------------------------------------------------*/
.footer {
    background-color: #1393ba;
    padding: 2em 0em;
    text-align: center;
    font-size: 1.4em;
    color: #fff;
}

.footer a {
    color: #fff;
}