@charset "UTF-8";
/* ######################################################################################

　※※※本体サイトよりそのままコピー※※※

###################################################################################### */



/* ====================================================
　CSS 3@ Document 2016.02.16
==================================================== */
/* ######################################################################################

　基本設定

###################################################################################### */



/* ====================================================
  ベースフォントサイズ
==================================================== */
/*
html{font-size:calc(100vw / 25)}
@media screen and (min-width: 460px) {
html{font-size:calc(100vw / 45)}
}
@media screen and (min-width: 768px) {
html{font-size:calc(100vw / 65)}
}
@media screen and (min-width: 992px) {
html{font-size:calc(100vw / 80)}
}
@media screen and (min-width: 1200px) {
html{font-size:calc(100vw / 100)}
}
*/

html{font-size:10px}
body {font-size:1.4rem;}
@media screen and (min-width: 768px) {
html{font-size:10px}
body {font-size:1.4rem;}
}
@media screen and (min-width: 992px) {
html{font-size:10px}
body {font-size:1.4rem;}
}
@media screen and (min-width: 1200px) {
html{font-size:10px}
body {font-size:1.4rem;}
}

/* ガイド */
/*
html:before,
html:after {
    content:"";
    display:block;
    position: fixed;
    z-index:9999;
    top:0;
    left:50%;
    border-left:1px dotted red;
    width:0;
    height:100%;
}
html:before {transform:translateX(-510px);}
html:after {transform:translateX(510px);}

*/


/* ====================================================
　書体
==================================================== */
.serif {font-family:"游明朝 Medium", "YuMincho Medium", "游明朝体", YuMincho, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HG明朝B", "ＭＳ Ｐ明朝", "MS PMincho", serif;}
.sans  {font-family:"メイリオ", "Meiryo UI", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;}

body {
    color: #333333;
    font-family:"メイリオ", "Meiryo", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}

p {margin: 0 0 1em;}
p:last-of-type { margin-bottom: 0; }
a { color: #376dcf; }
a:hover{ color: #777;}
a.red {color:#fc6e4c;}
.alignL { text-align: left !important; }
.alignC { text-align: center !important; }
.alignR { text-align: right !important; }
.alignE {
    text-align: justify !important;
    text-justify: inter-ideograph !important;
    -moz-text-align-last: justify !important;
    text-align-last: justify !important;
}

/* ====================================================
　入力制御
==================================================== */
.ime-act { ime-mode: active; }
.ime-inact { ime-mode: inactive; }


/* ######################################################################################

　枠設定

###################################################################################### */
.contents {
    max-width:1080px;
    margin:0 auto;
    /*padding:0 15px;*/
}

@media print, screen and (min-width: 768px) {
    body {min-width:1080px;}
    .contents {width:1080px;}
    .contents +.contents {margin-top:40px;}
    .footer .contents {width:1020px;}

.mainColumn {
    float:left;
    width:715px;
}
.subColumn {
    display:block !important;
    float:right;
    width:310px;
}
.mainColumn .contents,
.subColumn .contents {width:auto;}
}
@media print, screen and (min-width: 768px) {

}
@media screen and (max-width: 767px){
    .contents +.contents {margin-top:20px;}
}
.header,
.nax,
.xxxx {
    padding-left:15px;
    padding-right:15px;
}

/* ######################################################################################

　ヘッダ

###################################################################################### */

/* ====================================================
  プレテキスト
==================================================== */
.preText .hnav {
    margin-top:-3.1em;
    float:right;
    line-height:1;
}
.preText .hnav li {
    display:inline-block;
    padding:0 0.9em 0 1em;
    font-size:1.1rem;
    
}
.preText .hnav li:last-of-type {padding-right:0;}
.preText .hnav li + li {border-left:1px solid #dcdcdc;}
.preText .hnav a {text-decoration:none; color:#363636;font-weight:bold;}
.preText .hnav a:hover {text-decoration:none; color:#777;font-weight:bold;}

/* 小ゲート */
@media screen and (max-width: 767px){
    .pageGateS .preText {padding:0;}
    .pageGateS .preText .row > * {
        display:flex;
        align-items:center;
        height:54px;
        padding-right:100px;
    }
}


/* ====================================================
  大切なお知らせがあります
==================================================== */
@media print, screen and (min-width: 768px) {
    #NoticeBanner {
        display: inline-block;
        position: fixed;
        top: 170px;
        right: 4px;
        z-index: 1000;
    }
}
@media screen and (max-width: 767px){
    #NoticeBanner {
		display: inline-block;
        margin:-4px 0 10px;
    }
}
#NoticeBanner .close { display: none; }

/* ====================================================
  [≡]メニュー
==================================================== */
/* 小ゲート */
@media screen and (max-width: 767px){
    .pageGateS .mean-bar a.meanmenu-reveal {top:0;}
}

/* ====================================================
  ロゴ・テキスト
==================================================== */
.header .logo p,
.header .logo a,
.header .logo span{
    display:inline-block;
    margin-right:1.2em;
    vertical-align:bottom;
    color:#35393c;
}
@media print, screen and (min-width: 768px) {
    .header {
        padding-top:20px;
        padding-bottom:20px;
    }
    .header .logo {
        display:inline-block;
        width:57%;
    }
    .header .logo p,
    .header .logo a {font-size:1.3rem;}

    .header .logo p {
        position: relative;
        top: 0.3em;
    }

}
@media screen and (max-width: 767px){
    .header {
        /*box-shadow:0 1px 1px rgba(0,0,0,0.1);*/
        background:#ffffff;
        /*margin-bottom:14px;*/
    }
    .header.remindSp {margin-bottom: 0;}
    .header .logo a,
    .header .logo span{
        width:103px;
        margin-top:12px;
    }
    .header .logo p,
    .header .logo a {font-size:1rem;}

    /* 小ゲート */
    .pageGateS .header .logo a {margin-top:10px;}
    .pageGateS .header .contents {height: 45px;}
}
.preTextLogin.preTextMenu .preText .row h1 a {
    color: #999999;
    text-decoration: none;
}

/* ====================================================
  ゲートボタン
==================================================== */
.header .button.ico.arrowR {
    border-width:1px;
    padding:0.6em 0.75em;
    font-size:1.1rem;
    font-weight:normal;
    position: relative;
    top: 2px;
}
@media print, screen and (min-width: 768px) {
}
@media screen and (max-width: 767px){
    .header .button.ico.arrowR {display:none;}
}

/* ====================================================
  ご利用案内
==================================================== */
.header .guide {float:right;}
.header .guide li {display:inline-block; vertical-align: middle;}
.header .guide .ico.before {
    text-decoration:none;
    color:#333333;
    font-weight:bold;
}

.header .guide li.userName {
	font-weight: bold;
    text-decoration:none;
    color:#333333;
    line-height: 2.5;
	border-bottom: #ffe054 solid 2px;
	margin-right: 1em;
}
.header .guide li.userName span{
	color:#999999;
	font-weight: normal;
}

.header .guide .ico.before:before {
    content:"";
    display:inline-block;
    vertical-align:middle;
    width:55px;
    height:32px;
    margin-right:0.5em;
    background:url(../../images/ico/ico-guide.png) no-repeat;
    background-size:contain;
}
.header .guide .button.login{box-shadow:none; padding:1.2em 1.8em; color:#ffffff; font-weight: bold; }
.header .guide .button.mypage {box-shadow:none; padding:1.2em 1.8em; color:#555555; font-weight: bold; }
.header .guide .button.mypageTop {box-shadow:none; padding:1.2em 1.8em; color:#ffffff; font-weight: bold; background-color: #ffd721; }
.header .guide .button.logout {box-shadow:none; padding:1.2em 1.8em; color:#555555; font-weight: bold; }

@media print, screen and (min-width: 768px) {
    .header .guide .ico.before:hover{color: #777;}
    .header .guide .button.login,
    .header .guide .button.mypage,
    .header .guide .button.mypageTop,
    .header .guide .button.logout {font-size:1.1rem;}
	.header .guide .first {margin-right: 40px;}
}
@media screen and (max-width: 767px){
    .header .guide .first,
	.header .guide .button.logout,
	.header .guide .userName,
	.header .guide .button.mypageTop{display:none;}
    .header .guide .btn {
        position:absolute;
    }
    .header .guide .button.login {padding:1em; box-shadow:none;}
    .header .guide .button.login,
    .header .guide .button.mypage,
	.header .guide .button.mypageTop{font-size:1.0rem; max-width: 74px;}
    
    .header .guide .button.mypage,
	.header .guide .button.mypageTop{padding: 1em 0.8em; }

}

/* ====================================================
  sns
==================================================== */
@media print, screen and (min-width: 768px) {
    .header .guide .sns{
        margin-right: 18px;
        font-size: 0;
        vertical-align: middle;
    }
    .header .guide.middle .sns{margin-right: 65px; padding-top: 7px;}
    .header .guide .sns a{display: inline-block;}
    .header .guide .sns a:hover{opacity: 0.7;}
    .header .guide .sns a + a{margin-left: 6px;}
}
@media screen and (max-width: 767px) {
    .header .guide .sns{display: none;}
}



@media screen and (max-width: 767px){
/* ====================================================
  ログインボタン配置
==================================================== */

/* preText内：ログイン・≡
-------------------------------------*/
.preTextLogin.preTextMenu .preText.gray {padding-right:114px;}
.preTextLogin.preTextMenu .header .guide .btn {top:-42px; right:35px;}
.preTextLogin.preTextMenu .header .logo a {float:left;}
.preTextLogin.preTextMenu .header .logo p {
display: flex;
    line-height: 1;
    /* padding-top: 6%; */
    align-items: flex-end;
    padding-right: 30px;
    position: absolute;
    top: 28px;
    left: 110px;
}
.preTextLogin.preTextMenu .mean-bar a.meanmenu-reveal {top:0;}
.preTextLogin.preTextMenu .preText .row h1 {
    display: flex;
    align-items: center;
    height: 54px;
}
.preTextLogin.preTextMenu.mean-container .mean-nav {margin-top: 54px;}

/* ロゴ右：≡
-------------------------------------*/
.headerMenu .header .logo a,
.headerMenu .header .logo span {float:left;}
.headerMenu .header .logo p {
display: flex;
    line-height: 1;
    /* padding-top: 6%; */
    align-items: flex-end;
    padding-right: 30px;
    position: absolute;
    top: 28px;
    left: 110px;
}

/* ロゴ右：ログイン
-------------------------------------*/
.headerLogin .header {margin-bottom:0;}
.headerLogin .header .guide .btn {top:12px; right:0;}
.headerLogin .header .logo a,
.headerLogin .header .logo span{float:left;}
.headerLogin .header .logo p {
display: flex;
    line-height: 1;
    /* padding-top: 6%; */
    align-items: flex-end;
    padding-right: 60px;
    position: absolute;
    top: 28px;
    left: 110px;
}



}



/* ######################################################################################

  お知らせ

###################################################################################### */
/* ====================================================
  システム共通1
==================================================== */
.sysInfo {
	background:#f6f6f6;
	padding:0.75em;
	text-align:center;
}
@media print, screen and (min-width: 768px) {
    .sysInfo {
        border-radius:4em;
        width:810px;
        margin:40px auto 45px;
        font-size:1.4rem;
    }
}
@media screen and (max-width: 767px){
	.sysInfo {
        margin:2em -15px;
        font-size: 3.5vw;

    }
}




/* ######################################################################################

  月間教育誌よりずっと安くて便利でお得です！

###################################################################################### */
.contents.gain .image {
    text-align:center;
    margin-bottom:20px;
}
.contents.gain .centeCopy {
        font-weight:normal;
}
@media screen and (max-width: 767px){
    .contents.gain .centeCopy {
        text-align:left;
        line-height:1.5;
    }
    .contents.gain .image img {
        width:100%;
        height:auto;
    }
}


/* ######################################################################################

　お客様の声

###################################################################################### */
.contents.voice .list.star li {
    background:url(../../images/share/line-freehand.png) left bottom repeat-x;
    margin-bottom:1.25em;
    padding-bottom:1.25em;
}
.contents.voice .list.star li:before {top:0.2em;}
.contents.voice .arrowLink {display:inline-block; color:#333333;}
.contents.voice .link {text-align:right;}

@media print, screen and (min-width: 768px) {
    .contents.voice .list.star {font-size:1.3rem;}
    .contents.voice .arrowLink {font-size:1.3rem;}
}
@media screen and (max-width: 767px){
    .contents.voice .list.star {font-size:1.3rem;}
    .contents.voice .arrowLink {font-size:1.3rem; display:none;}
}


/* ######################################################################################

　３コース：ミニ・簡易・標準

###################################################################################### */
.contents.course3 {
}
.contents.course3 .button.round {font-weight:bold;}
.contents.course3 .box {text-align:center;}
.contents.course3 .box .title img {width:100%; height:auto;}
.contents.course3 .box .text {
    padding-bottom:1em;
}

.contents.course3 .box .item {color:#666666;}
.contents.course3 .box .data {color:#333333;}


.contents.course3 .box .text,
.contents.course3 .box .btn {
    padding-top:0;
    background:#ffffff;
}
.contents.course3 .box .text .item {
    float:left;
    clear:both;
    margin-top:0.4em;
}
.contents.course3 .box .text .data {
    float:right;
    clear:right;
    margin-bottom:0em;
    font-size:2.286em;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
}


.contents.course3 .box .text .data {}
.contents.course3 .box .text .data .middle{font-size:1.5384em; font-style:normal;}
.contents.course3 .box .text .data .big {font-size:2.0512em; font-style:normal;}

.contents.course3 .box .text div:nth-child(2) .data {color:#999999;}
.contents.course3 .box .text .caption {
    clear:both;
    margin-bottom:0;
    text-align:right;
    color:#ff4412;
    font-weight:bold;
}
.contents.course3 .box .btn .button {margin-bottom:0.7em;}
.contents.course3 .box .btn .button:after {
    content:"\f178";
    background:none;
    font-family:Fontawesome;
    right: 1.7em;
}
@media print, screen and (min-width: 768px) {
    .contents.course3 {
        width:auto;
        max-width:1208px;
        font-size:1.4rem;
    }
    .contents.course3 .row {
        margin-left :-1.158235%;
        margin-right:-1.158235%;
    }
    .contents.course3 .row > * {
        padding-left :1.133617%;
        padding-right:1.133617%;
    }
    .contents.course3 .button.round {
        width:270px;
        font-size:1.8rem;
    }
    .contents.course3 .box .text {
        padding-left:36px;
        padding-right:36px;
    }
    .contents.course3 .box .btn {padding:0 0 26px;}
    .contents.course3 .box .text .data {font-size:1.56rem;}
}
@media screen and (max-width: 767px){
    .contents.course3 {font-size:3.2vw;}
    .contents.course3 .row > * {margin-bottom:20px;}
    .contents.course3 .button.round {font-size:1.8rem;}
    .contents.course3 .box .btn {padding-bottom:20px;}
    .contents.course3 .box .text {
        padding-left:9.3%;
        padding-right:9.3%;
    }
    .contents.course3 .button.round {
        width:73%;
        font-size:4vw;
    }
    .contents.course3 .box .text .data {font-size:1.56rem;}
}

/* ######################################################################################

　ぜひご紹介ください

###################################################################################### */
@media print, screen and (min-width: 768px) {
    .contents.intorduce {width:1020px;}
}

@media screen and (max-width: 767px){
    .contents.intorduce p {font-size:3.4vw;}
    .contents.intorduce img {
        width:85%;
        height:auto;
    }
    .wallBelt.topExtra {padding-top:50px;}
    .roundBox .titleRibbon {
        width:18em;
        margin-left: auto;
        margin-right: auto;
    }
    .pageGateS .contents.intorduce {margin-top:60px;}
}


/* ######################################################################################

　画像SEO

###################################################################################### */
@media print, screen and (min-width: 768px) {
    .contents.announce7 { width:1020px; text-align: center;}
	.contents.announce7 img{ max-height: 140px; width: auto; display: block; margin: 10px auto;}
}

@media screen and (max-width: 767px){
    .contents.announce7 { text-align: center;}
    .contents.announce7 img {
        width:auto;
        max-height: 140px;
		display: block;
		margin: 10px auto;
    }
}

/* ######################################################################################

　広告バナー

###################################################################################### */
@media print, screen and (min-width: 768px) {
    .bannaBox {width:1066px;}
    .bannaBox .row {
        margin-left:-7px;
        margin-right:-7px;
    }
    .bannaBox .row li {
        margin-bottom:14px;
        padding-left:7px;
        padding-right:7px;
    }
}
@media screen and (max-width: 767px){
    .bannaBox .row li {margin-bottom:20px;}
    .bannaBox .row img {
        width:100%;
        height:auto;
    }
}


/* ######################################################################################

　イラスト帯

###################################################################################### */
.illusts {
    background:url(../../images/footer/illust.png) repeat-x;
    background-size:auto 100%;
    border-bottom:3px solid transparent
}
@media print, screen and (min-width: 768px) {
    .illusts {
        margin-top:100px;
        height:79px;
    }
}
@media screen and (max-width: 767px){
    .illusts {
        display:none;
        margin-top:70px;
        height:45px;
    }
}

/* ====================================================
 2ヶ月分無料お試しコース
==================================================== */
.free2month {
    color:#333;
    text-align:center;
}
.free2month .title {margin-bottom:0; line-height:1;}
.free2month .centeCopy {margin:1.5em 0;}

.free2month .button.ico.illuArrow:before {
    background-size:53px 60px !important;
}
@media print, screen and (min-width: 768px) {
    .free2month .title {font-size:28px;}
    .free2month .button.illuArrow {font-size:2.4rem;}
}
@media screen and (max-width: 767px){
    .free2month {display:none;}
}


/* ====================================================
 2ヶ月分無料お試しコース 固定
==================================================== */
.free2month_k {
    color: #333;
    text-align: center;
    position: fixed;
    z-index: 9999;
    left: 0;
    bottom: 0;
    box-shadow: 0 -2px 3px rgba(0,0,0,0.2);
    width: 100%;
	padding: 15px 0px 5px !important;
}
.free2month_k .title {margin-bottom:0; line-height:1;}
.free2month_k .centeCopy {margin:0.3em 0; font-size: 12px; float: left; text-align: left;line-height: 1.5;}

.free2month_k .contents{ max-width: 870px; padding: 0; text-align: left;}
.free2month_k .button.ico.illuArrow:before {
    /*background-size:53px 60px !important;*/
}
.free2month_k .contents{ padding: 0;}
.free2month_k .btn{ margin-top: -20px; float: right;}


.free2month_k .close {
    position:absolute;
    top:10px;
    right:10px;
    width:30px;
    height:30px;
    background:#ffffff;
    line-height:30px;
    overflow:hidden;
    border:1px solid #cccccc;
    cursor:pointer;
	z-index: 9999;
}
.free2month_k .close:before {
    content:"\f00d";
    font-family:FontAwesome;
    display:block;
	color: #666;
}


@media print, screen and (min-width: 768px) {
.free2month_k .title {font-size:15px;}
.free2month_k .button.illuArrow {font-size:1.8rem;}
}
@media screen and (max-width: 767px){
.free2month_k {display:none;}
}


/* ######################################################################################

　フッタ

###################################################################################### */

/* ====================================================
  キーワード
==================================================== */
.small.keyword {
    background:#e2e4e6;
    padding-left:15px!important;
    padding-right:15px!important;
}
@media print, screen and (min-width: 768px) {
    .small.keyword {
        font-size:1.2rem;
        color:#333333;
    }
    .small.keyword .contents {width:1020px;}
}
@media screen and (max-width: 767px){
    .small.keyword {
        background:#f1f2f3;
        text-align:center;
        color:#333333;
    }
}
/* ====================================================
  ロゴ
==================================================== */
@media print, screen and (min-width: 768px) {
    .footer .logo p,
    .footer .logo span,
    .footer .logo a {
        display:inline-block;
        margin-right:1em;
        vertical-align:bottom;
        color:#35393c;
    }
    .footer .logo {
        display:inline-block;
        margin-bottom:40px;
    }
    .footer .logo p,
    .footer .logo span,
    .footer .logo a {font-size:1.4rem;}

}
@media screen and (max-width: 767px){
    .footer .logo p,
    .footer .logo span,
    .footer .logo a {
        display:inline-block;
        margin-right:1em;
        vertical-align:bottom;
        color:#35393c;
        line-height:1;
    }
    .footer .logo span,
    .footer .logo a {width:103px; float:left;}
    .footer .logo p {font-size:3vw; position:relative; top:0.5em;}
}

/* ====================================================
　ソーシャルボタン
==================================================== */
.socialBtn {display:inline-block;}
.socialBtn ul {display:flex;}
@media print, screen and (min-width: 768px) {
    .socialBtn li+li {margin-left:15px;}
}
@media screen and (max-width: 767px){
    .socialBtn ul {
        justify-content:space-between;
        margin-top:20px;
    }
    .socialBtn li {width:49%;}
    .socialBtn li img {
        width:100%;
        height:auto;
    }
}

/* ====================================================
　フッタナビ
==================================================== */
.fnav a {
    color:#231f20;
    text-decoration:none;
}

.fnav a:hover{color: #777;}

@media print, screen and (min-width: 768px) {
    .fnav ul {
        display:flex;
        justify-content:flex-start;
        flex-wrap:wrap;
        margin-bottom:40px;
        width:980px;
    }
    .fnav ul li {
        margin-right:50px;
        margin-bottom:1em;
        font-size:1.3rem;
        font-weight:bold;
    }
}
@media screen and (max-width: 767px){
    .fnav {
        margin-top:1em;
        margin-left:-15px;
        margin-right:-15px;
        font-size:3.5vw;
    }
    .fnav ul {border-top:1px solid #dadada;}
    .fnav li {border-bottom:1px solid #dadada;}
    .fnav a {
        display:block;
        position:relative;
        padding:1em 2em 1em 1em;
    }
    .fnav a:before {
        content:"\f105";
        display:inline-block;
        position:absolute;
        top:50%;
        right:15px;
        transform:translateY(-50%);
        font-family:Fontawesome;
        font-size:140%;
        color:#93adfb;
    }
}

/* ====================================================
　小ゲートナビ
==================================================== */
@media print, screen and (min-width: 768px) {
    .sgnav {display:none;}
}
@media screen and (max-width: 767px){
    .sgnav {
        display:flex;
        justify-content:space-between;
        background:#f8f8f8;
        margin-left:-15px;
        margin-right:-15px;
        padding:30px 15px;
    }
    .sgnav ul {width:46%;}
    .sgnav a {
        display:block;
        padding:0.5em 0;
        color:#5b5456;
        text-decoration:none;
        font-size:2.7vw;
    }
}

/* ====================================================
　コピーライト
==================================================== */
.copyright {display:block; text-align:center;}

.copyright em {
    font-style: normal;
    font-family:Verdana, Geneva, sans-serif;
}

@media print, screen and (min-width: 768px) {
    .copyright {
        padding-bottom:180px;
        font-size:12px;
        text-align: center;
    }
}
@media screen and (max-width: 767px){
    .copyright {
        /*background:#f8f8f8;*/
        background:#ffffff;
        margin-left:-15px;
        margin-right:-15px;
        padding:0;
        padding-bottom:calc(3em + 27%);
        padding-top:2em;
        font-size:10px;
        text-align:center;
    }
    .pageGateS .copyright {padding-top:2em;}
}

/* ====================================================
　スマホフッタ：POP
==================================================== */
.footerPop {
    position:fixed;
    z-index:9999;
    left:0;
    bottom:0;
    box-shadow:0 -4px 8px rgba(0,0,0,0.1);
    background:#ffffff;
}
.footerPop img {width:100%; height:auto;}
.footerPop p {
    padding:0.5em 0.4em 0.3em;
    text-align:center;
    font-size:3.2vw;
    line-height:1;
}
.footerPop .close {
    position:absolute;
    bottom:0;
    right:0;
    text-indent:-9999px;
    width:12%;
    height:72%;
    cursor:pointer;
}
@media print, screen and (min-width: 768px) {
    .footerPop {display:none;}
}



/* ====================================================
　text-decoration：IE対策
==================================================== */
.msie11 .arrowLink.before {text-decoration:none; border-bottom:1px solid #333333;}
.msie11 .arrowLink.before:before {border-bottom:1px solid #ffffff;}

.msie11 p.link a {
    text-decoration:none;
    border-bottom:1px solid #ed4f12;
    padding-bottom:0;
}

.msie11 .arrowLink.before:hover,
.msie11 .arrowLink.before:hover:before,
.msie11 p.link a:hover {border-bottom:none;}




/* end */