@charset "utf-8";

/*=================================================
	file name: shogaku-style.css
	create: 2016.May
	updated: 2017.4.18
===================================================*/


/* header h1
----------------------------------------------*/
@media screen and (max-width: 767px) {
	.site-logo.ele.shogaku-h1 {
		border-bottom: solid 1px #ccc;
		margin: 50px 0 0;
		padding: 0 12px 5px;
		font-size: 12px;
		font-weight: bold;
	}
	.site-logo.ele.shogaku-h1 > div {
		display: table-cell;
		vertical-align: middle;
	}
	.site-logo.ele.shogaku-h1 > div:first-child {
		width: 60%;
		padding-right: 20px;
	}
}

/* learn-point
----------------------------------------------*/
.learn-point {
  position: relative;
  margin-top: -2.7vw;
  z-index: 1;
}
.learn-point .container {
	overflow: hidden;
}
.learn-point .lead {
  position: relative;
  margin: 0 15px;
  padding: .45em 0;
  font-weight: 300;
  border-radius: 12px;
  font-size: 16px;
}
.learn-point .ribon {
  margin: 0 -15px;
  padding: 1em 0;
}
.learn-point h2 {
  margin-top: 0!important;
}
.learn-point .lead {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.learn-point .content-inner {
  padding: 2em 0;
}
.learn-point .content .img-wrap {
  margin: 0 15px;
}
.learn-point .content + .content {
  margin-top: 0 !important;
}
.learn-point .content-heading {
  font-size: 21px;
}
.learn-point .content.kokugo {
	margin-bottom: 0;
  background-color: rgba(255,41,62, .1);
}
.learn-point .content.sansu {
  background-color: rgba(0,174,255, .1);
}
.learn-point .content.eigo {
	margin: 0 15px;
  background-color: rgba(255,104,0, .1);
	border: 2px solid #eb6000;
	border-radius: 4px;
}
.learn-point .eigo p span {
  font-weight: 600;
	color: #eb6000;
}
.learn-point .eigo .slider-basis {
	padding: 20px;
}

@media screen and (min-width: 767px) {
  .learn-point {
    position: relative;
    margin-top: -16px;
    z-index: 1;
  }
  .learn-point .ribon {
    margin: 0;
  }
  .learn-point .row {
    margin: 0;
  }
}


/* grade-guide
----------------------------------------------*/
.page-catch-area .container {
  position: relative;
}
.page-catch-area .grade-guide {
  position: absolute;
  top: 11vw;
  right: 4vw;
  padding: .2em 1em .1em;
  font-size: 14px;
}
.page-catch-area .grade-guide.upper {
  top: 6vw;
}
@media screen and (min-width: 767px) {
  .page-catch-area .grade-guide {
    top: auto !important;
    right: auto;
    left: 0;
    right: auto;
  }
}

/* color
----------------------------------------------*/
.bg-kokugo { background-color: #b81b2b; }
.bg-sansu  { background-color: #006da0; }
.bg-eigo   { background-color: #eb6000; }
.bg-rika   { background-color: #529b46; }
.bg-shakai { background-color: #7b5a99; }
.bg-programming { background-color: #284789; }

th[class^="bg-"] { color: #fff; font-weight: normal; }


.grade-1st {
  background-color: #f05096;
  color: #FFF;
}
.grade-2nd {
  background-color: #f06e00;
  color: #FFF;
}
.grade-2nd::before {
  border-color: #f06e00 transparent transparent transparent;
}
.grade-3rd {
  background-color: #faaf05;
  color: #FFF;
}
.grade-3rd::before {
  border-color: #faaf05 transparent transparent transparent;
}
.grade-4th {
  background-color: #14aa32;
  color: #FFF;
}
.grade-4th::before {
  border-color: #14aa32 transparent transparent transparent;
}
.grade-5th{
  background-color: #a53c96;
  color: #FFF;
}
.grade-5th::before {
  border-color: #a53c96 transparent transparent transparent;
}
.grade-6th {
  background-color: #0082c8;
  color: #FFF;
}
.grade-6th::before {
  border-color: #0082c8 transparent transparent transparent;
}

/* utility
----------------------------------------------*/
@media screen and (max-width: 767px) {
	.col-xs-margin { margin-bottom: 10px; }
}


/* text color, decoration
----------------------------------------------*/
.text-attention {
	background: -moz-linear-gradient(top, transparent 0%, transparent 65%, rgba(254,236,34,1) 65%, rgba(254,236,34,1) 90%, transparent 90%, transparent 100%);
	background: -webkit-linear-gradient(top, transparent 0%,transparent 65%,rgba(254,236,34,1) 65%,rgba(254,236,34,1) 90%,transparent 90%,transparent 100%);
	background: linear-gradient(to bottom, transparent 0%,transparent 65%,rgba(254,236,34,1) 65%,rgba(254,236,34,1) 90%,transparent 90%,transparent 100%);
	padding-right: 5px;
	padding-left: 5px;
	padding-bottom: 2px;
	color: #19b6a9;
}
.text-highlight { color: #b81c2b; }


/* Components
----------------------------------------------*/
/* .menu */
.menu .assist-menu > li > a {
	background-color: #19b6a9;
/*	background-color: #909090; グレー */
}

/* countdown */
.container p.text-countdown {
	border: solid 5px #EB6877;
	border-radius: 50px;
	width: 60%;
	margin: 0 auto;
	padding: 0 10px 5px;
	color: #EB6877;
	text-align: center;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 54px;
	font-weight: bold;
	line-height: 1;
}
@media screen and (max-width: 768px) {
	.container p.text-countdown {
		width: 100%;
		margin-top: 15px;
		font-size: 40px;
	}
}
.container p.text-countdown > small {
	font-size: .5em;
	vertical-align: .35em;
	letter-spacing: -.05em;
}
.container p.text-countdown > small:first-child {
	padding-right: .2em;
}
.container p.text-countdown > small:last-child {
	padding-left: .2em;
}
.container p.text-countdown > small > span {
	padding-right: .5em;
	font-weight: normal;
}

/* .label */
.label-grade-1st    { border: solid 1px #F05096; color: #F05096; }
.label-grade-2nd    { border: solid 1px #f06e00; color: #f06e00; }
.label-grade-3rd    { border: solid 1px #faaf05; color: #faaf05; }
.label-grade-4th    { border: solid 1px #14aa32; color: #14aa32; }
.label-grade-5th    { border: solid 1px #a53c96; color: #a53c96; }
.label-grade-6th    { border: solid 1px #0082c8; color: #0082c8; }

.label-option       { border: solid 1px #337ab7; color: #337ab7; }
.label-everymonth   { border: solid 1px #d9534f; color: #d9534f; }
.label + .label     { margin-left: 2px; }



/* .panel */
.panel-default {
	border-color: #09b2a4;
}
.panel-default > .panel-heading {
	background-color: #e9f8f7;
	border-color: #09b2a4;
}
.panel-default > .panel-heading > .panel-title {
	color: #09b2a4;
}
.panel-info {
	border-color: #CDCDCD;
}
.content-inner > .panel:last-child {
	/*margin-top: 0;*/
	margin-bottom: 0;
}
.panel > .panel-body h4 {
	color: #666666;
}

/* .panel attention*/
.panelattention{
	border-color: #eb6000;
}
.panelattention> .panel-heading {
	background-color: #eb6000;
	border-color: #eb6000;
}
 .panelattention> .panel-heading > .panel-title {
	color: #fff;
}
.panel-info {
	border-color: #CDCDCD;
}
.content-inner > .panel:last-child {
	/*margin-top: 0;*/
	margin-bottom: 0;
}
.panel > .panel-body h4 {
	color: #666666;
}


/* table */
.table-hover > tbody > tr > th {
	background-color: #f1f8f8;
}
.table-hover > tbody > tr:hover > th {
	background-color: #DDF0F0;
}
.table-bordered > thead > tr > th,
.table-bordered > thead > tr > td {
	border-bottom-color: #09b2a4;
	color: #09b2a4;
}


/* Typography
----------------------------------------------*/
.article-heading { color: #19b6a9; }

.curriculum.kokugo .section-heading,
.curriculum.kokugo .content-heading       { color: #b81c2b; }
.curriculum.sansu .section-heading,
.curriculum.sansu .content-heading        { color: #006da0; }
.curriculum.eigo .section-heading,
.curriculum.eigo .content-heading         { color: #eb6000; }
.curriculum.rika .section-heading,
.curriculum.rika .content-heading         { color: #529b46; }
.curriculum.shakai .section-heading,
.curriculum.shakai .content-heading       { color: #7b5a99; }
.curriculum.hatten .section-heading,
.curriculum.hatten .content-heading       { color: #0b318f; }
.curriculum.new-1st-year .section-heading,
.curriculum.new-1st-year .content-heading { color: #77caf5; }
.curriculum.others .content-heading       { color: #4D4D4D; }

.curriculum.kanken-drill .section-heading,
.curriculum.kanken-drill .content-heading     { color: #C0AB03; }
.curriculum.keisan-drill .section-heading,
.curriculum.keisan-drill .content-heading     { color: #006CAC; }
.curriculum.keisan-challenge .section-heading,
.curriculum.keisan-challenge .content-heading { color: #006CAC; }
.curriculum.programming .section-heading,
.curriculum.programming .content-heading  { color: #284789; }

.curriculum .section-heading:before {
	display: block;
	width: 64px;
	height: 60px;
	margin: 0 auto .2em;
}
.curriculum.hatten .section-heading:before {
	height: 82px;
}
.curriculum.kokugo .section-heading:before { content: url(../images/icon_kokugo.svg); }
.curriculum.sansu .section-heading:before  { content: url(../images/icon_sansu.svg); }
.curriculum.eigo .section-heading:before   { content: url(../images/icon_eigo.svg); }
.curriculum.rika .section-heading:before   { content: url(../images/icon_rika.svg); }
.curriculum.shakai .section-heading:before { content: url(../images/icon_shakai.svg); }
.curriculum.hatten .section-heading:before { content: url(../images/icon_hatten.svg); }
.curriculum.kanken-drill .section-heading:before     { content: url(../images/icon_kanken-drill.svg); }
.curriculum.keisan-drill .section-heading:before     { content: url(../images/icon_keisan-drill.svg); }
.curriculum.keisan-challenge .section-heading:before { content: url(../images/icon_keisan-drill.svg); }
.curriculum.programming .section-heading:before { content: url(../images/icon_programming.svg); }

.curriculum.kokugo .content-heading > span           { border-color: #b81c2b; }
.curriculum.sansu .content-heading > span            { border-color: #006da0; }
.curriculum.eigo .content-heading > span             { border-color: #eb6000; }
.curriculum.rika .content-heading > span             { border-color: #529b46; }
.curriculum.shakai .content-heading > span           { border-color: #7b5a99; }
.curriculum.hatten .content-heading > span           { border-color: #0b318f; }
.curriculum.kanken-drill .content-heading > span     { border-color: #C0AB03; }
.curriculum.keisan-drill .content-heading > span     { border-color: #006CAC; }
.curriculum.keisan-challenge .content-heading > span { border-color: #006CAC; }
.curriculum.new-1st-year .content-heading > span     { border-color: #77caf5; }
.curriculum.others .content-heading > span           { border-color: #4D4D4D; }
.curriculum.programming .content-heading > span      { border-color: #284789; }
.curriculum.eiken .content-heading > span           { border-color: #19b6a9; }

[class*='heading-num']:before {
	color: #19b6a9;
}

/* with-balloon */
.section-heading.with-balloon {
	border: solid 4px #19b6a9;
	color: #19b6a9;
}
.section-heading.with-balloon:before {
	border-top-color: #19b6a9;
}


/* layout block
----------------------------------------------*/
.curriculum.kokugo:before { border-color: #b81c2b; }
.curriculum.sansu:before  { border-color: #006da0; }
.curriculum.eigo:before   { border-color: #eb6000; }
.curriculum.rika:before   { border-color: #529b46; }
.curriculum.shakai:before { border-color: #7b5a99; }
.curriculum.hatten:before { border-color: #0b318f; }
.curriculum.new-1st-year:before { border-color: #77caf5; }

.curriculum.kanken-drill:before     { border-color: #C0AB03; }
.curriculum.keisan-drill:before     { border-color: #006CAC; }
.curriculum.keisan-challenge:before { border-color: #006CAC; }
.curriculum.programming:before { border-color: #284789; }

@media screen and (min-width: 768px) {
	.curriculum hr { margin-top: 0; }
}

/* .container-form
----------------------------------------------*/
.container-form dl > dt {
	background-color: #F1F8F8;
	color: #09B2A4;
}


/* /shogaku/index.html
----------------------------------------------*/

@media screen and (max-width: 767px) {
	#shogaku-top-mv {
		background:none;
	}
}
@media screen and (min-width: 768px) {
	#shogaku-top-mv {
		background: url(../../local/images/bnr_tvcm-03_pc.jpg) top center no-repeat;
		height:440px;
		margin:10px 0 13px;
	}
}





.menu .nav-change-grade-btn {
	background-color: transparent;
/*	background-image:
	linear-gradient(
		transparent 95%,
		rgba(232,247,253,1) 5%
		),
	linear-gradient(
		90deg,
		transparent 95%,
		rgba(232,247,253,1) 5%
		);
	background-size: 18px 18px;
	background-repeat: repeat;	*/
	padding: 14px 0;
}
.menu .nav-change-grade-heading {
	margin-bottom: 10px;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 700;
	text-align: center;
	color:#19b6a9;
}
.menu .nav-change-grade-btn ul {

	padding-left: 0;
}
.menu .nav-change-grade-btn li {
	list-style: none;
}

#comparing {
	background-color: #e9f8f7;
	background-image:
	linear-gradient(
		transparent 95%,
		rgba(211,241,239,1) 5%
		),
	linear-gradient(
		90deg,
		transparent 95%,
		rgba(211,241,239,1) 5%
		);
	background-size: 10px 10px;
	background-repeat: repeat;
	padding: 0 0 14px;
}

@media screen and (max-width: 767px) {
	#comparing {
		width: 100%;
	}
}
@media screen and (min-width: 768px) {
	#comparing {
		width: 90%;
		max-width: 1000px;
		margin: 0 auto;
	}
}





@media screen and (max-width: 767px) {
	.menu .nav-change-grade-btn {
		background-size: 12px 12px;
	}
	.menu .nav-change-grade-heading {
		font-size: 21px;
	}
	.menu .nav-change-grade-btn ul {
    display: flex;
    flex-wrap: wrap;
	}
	.menu .nav-change-grade-btn li {
		width: calc(100%/3);
    margin:0 0 1% 0;
    padding: 0 .2%;
	}
}
@media screen and (min-width: 768px) {
	.menu .nav-change-grade-heading {
		font-size: 28px;
	}
	.menu .nav-change-grade-btn .grade-btn-pc {
    display: flex;
    flex-wrap: wrap;
	}
	.menu .nav-change-grade-btn .grade-btn-pc li {
		width: calc(100%/3);
		margin:0 0 1% 0;
	}
	.menu .nav-change-grade-btn .grade-btn-pc {
		width:100%;
    max-width: 400px;
		margin:0 auto;
	}
}

#comparing > .container {
	max-width: 860px;
/*	padding-bottom: 40px; */
}
#comparing .section-heading {
	margin-bottom: 0;
	padding: .8em 15px;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 34px;
	font-weight: 700;
	line-height: 1.26;
	color: #19B6A9;
}

@media screen and (max-width: 767px) {
#comparing > .container {
	padding-bottom: 0;
}
	#comparing .section-heading {
		font-size: 21px;
	}
	#comparing li {
		margin-bottom: 8px;
	}


}
@media screen and (min-width: 768px) {
	#comparing .over-2-lines li:first-child,
	#comparing .over-2-lines li:nth-child(2) {
		margin-bottom: 20px;
	}

	#comparing ul li:last-child {
		margin-top:30px;
	}

}

#reason .article-heading {
	margin-bottom: 10px;
}
#reason .article-heading > span {
	vertical-align: middle;
}
#reason .article-heading > span:first-child {
	font-weight: 300;
	letter-spacing: -3px;
}
#reason .article-heading > span:last-child {
	border: solid 4px #19B6A9;
	border-radius: 10px;
	padding: .5em 1em .33em 3em;
}
#reason .article-heading > span > strong {
	font-weight: 900;
	font-size: 48px;
	position: relative;
}
#reason .article-heading > span:last-child > strong:before {
	content: url(../../local/images/fig_reason-heading.svg);
	display: inline-block;
	width: 56px;
	height: 45px;
	position: absolute;
	top: 10px;
	left: -70px;
}
@media screen and (max-width: 767px) {
	#reason .article-heading > span {
		display: block;
	}
	#reason .article-heading > span:last-child {
		margin-top: 8px;
		padding-top: .3em;
	}
	#reason .article-heading > span:last-child > strong {
		font-size: 30px;
	}
	#reason .article-heading > span:last-child > strong:before {
		width: 42px;
		height: auto;
		top: 3px;
		left: -50px;
	}
}
@media screen and (min-width: 768px) {
	#reason .article-heading > span:last-child {
		margin-left: 15px;
		letter-spacing: 1px;
	}
}
#reason .section-heading {
	background: #fff;
	border: solid 4px #19B6A9;
	border-radius: 8px;
	margin-bottom: 32px;
	padding: .5em 1em;
	color: #19B6A9;
	font-size: 32px;
	font-weight: 500;
	letter-spacing: -2px;
	line-height: 1.3;
	position: relative;
}
@media screen and (max-width: 767px) {
	#reason .section-heading {
		padding-right: .5em;
		padding-left: .5em;
		font-size: 21px;
	}
}
#reason .section-heading:after,
#reason .section-heading:before {
	top: 100%;
	left: 20px;
	border: solid transparent;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
#reason .section-heading:after {
	border-top-color: #ffffff;
	border-width: 10px 0 0 15px;
	margin-left: 1px;
}
#reason .section-heading:before {
	border-top-color: #19B6A9;
	border-width: 16px 0 0 24px;
	margin-left: -5px;
}
#reason .section-heading > span {
	font-weight: 900;
	letter-spacing: 0;
	position: relative;
}
#reason .section-heading > span:before {
	content: url(../../local/images/fig_reason-heading.svg);
	display: inline-block;
	width: 56px;
	height: 45px;
	position: absolute;
	top: 0;
	left: -70px;
}
@media screen and (max-width: 767px) {
	#reason .section-heading > span {
		margin-left: 34px;
	}
	#reason .section-heading > span:before {
		width: 36px;
		height: auto;
		top: -2px;
		left: -44px;
	}
}
@media screen and (min-width: 768px) {
	#reason .section-heading > span {
		margin-right: .8em;
		margin-left: 1.9em;
	}
}

.g_anime{
border: 1px solid #dddddd;
}


/* TOP [キャンペーンバナーエリア:テキスト入り] */
.campaign-area .container .slick-initialized .slick-slide.txtincl {
	background: url(/shogaku/lib/images/banner/bnr_arrow.png) no-repeat #fff;
	background-size: auto 16px;
	background-position: 98% 50%;
}



/* shogaku/lib/include/
   english_premium.html
----------------------------------------------*/

.e-premium-course {}

.e-premium-course .box {
	background: #e86d05;
	color: #fff;
	padding: 1em;
	margin-bottom: 1em;
	border-radius: 0.4em;
}

.e-premium-course .box .name {
	font-weight: bold;
	font-size: 1.5em;
}
.e-premium-course .box .recomend {
	color: #e86d05;
	background: #fff;
	font-weight: normal;
	font-size: smaller;
	display: inline-block;
	padding: 0.4em 0.4em 0.2em;
	line-height: 1;
	vertical-align: top;
	margin: .3em 0 0 1em;
}
@media screen and (max-width: 767px) {
	.e-premium-bnr {
		padding-top: 0.5em;
	}
}
@media screen and (min-width: 768px) {
	.e-premium-course {
		display: flex;
	}
	.e-premium-course .box {
		width: 32%;
	}
	.e-premium-course .box + .box {
		margin-left: 2%;
	}

	.e-premium-bnr {
		margin: 1.42em auto;
		width: 450px;
	}
}


/* shogaku/lib/include/
   programming.html
----------------------------------------------*/

@media screen and (max-width: 767px) {
	.programming .btn{
		margin: 1em 0;
	}
	.programming .big_btn .btn {
		min-width: 50%;
		padding: 0.5em;
	}
}
@media screen and (min-width: 768px) {
	.programming .btn{
		margin: 0 0 2em;
	}
	.programming .big_btn .btn {
		min-width: 30%;
		padding: 1em;
	}
}

@media screen and (max-width: 767px) {
	#eigoPremium .btn{
		margin: 1em 0;
	}
	#eigoPremium .big_btn .btn {
		min-width: 50%;
		padding: 0.5em;
	}
}
@media screen and (min-width: 768px) {
	#eigoPremium .btn{
		margin: 0 0 2em;
	}
	#eigoPremium .big_btn .btn {
		min-width: 30%;
		padding: 1em;
	}
}



/* /shogaku/grade/new-1st-year/index.html
----------------------------------------------*/
@media screen and (max-width: 767px) {
	.table-curriculum th > .visible-xs {
		display: inline-block!important;
	}
	.table-curriculum > tbody > tr > th {
		display: block;
		border: 1px solid #dddddd;
		border-bottom: 2px solid #09b2a4;
		font-size: 1.2em;
	}
	.table-curriculum > tbody > tr > td {
		display: block;
		border: 1px solid #dddddd;
		border-top: none;
	}
	.table-curriculum tbody > tr > th + td,
	.table-curriculum tbody > tr > td:first-child {
		border-bottom: none;
		padding-bottom: 0;
		color: #09b2a4;
		font-weight: bold;
	}
	.table-curriculum tbody > tr > th[rowspan] {
		margin-top: 30px;
	}
	.table-curriculum {
		border-bottom: none;
	}
	.table-curriculum > thead {
		display: none;
	}
}
	.table-curriculum > tbody > tr > td ul {
		margin-top: 10px;
		margin-bottom: 0;
}
	.table-curriculum > tbody > tr > td ul:first-child {
		margin-top: 0;
}

@media screen and (min-width: 768px) {
	.table-curriculum,
	.table-curriculum > thead > tr > th,
	.table-curriculum > tbody > tr > td {
		border: 1px solid #dddddd;
	}
	.table-curriculum > thead > tr > th,
	.table-curriculum > thead > tr > td {
		border-bottom-color: #09b2a4;
		color: #09b2a4;
	}
	.table-curriculum > tbody > tr > th {
		min-width: 20%;
		padding-right: 20px;
		padding-left: 20px;
		white-space: nowrap;
	}
	.table-hover.table-curriculum > tbody > tr:hover > th {
		background-color: #f1f8f8;
	}
}


/* /shogaku/support/
----------------------------------------------*/
#enquiry .freecall {
	font-size: 28px;
	font-weight: bold;
}
#enquiry p small {
	font-size: .8em;
}

/* /shogaku/support/
----------------------------------------------*/
@media screen and (max-width: 767px) {

	#programming .tumb_left {
		padding: 0 0.5em 1em 0;
	}

	#programming .tumb_right {
		padding: 0 0 1em 0.5em;
	}
}