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


/* ================= 目次 ======================

　1.  「bxslider」		スライダー
　2.  「notice」		お知らせ（注意書き）
　3.  「dropdown」		ドロップダウン
　4.  「megaDropdown」	メガドロップダウン
　5.  「navCourse」		コースナビ
　6.  「carousel」		カルーセル
　7.  「nextLink」		ネクストリンク（テキスト・画像付き・サムネイル画像付き）
　8.  「areaTweet」		Twitterエリア
　9.  「areaInstagram」	Instagramエリア
　10. 「areaUpdate」	更新情報 ／ 「areaBlog」ブログ
　11. 「list○○○」	リスト（アイコン）
　12. 「colorbox」		モーダルウィンドウ
　13. 「accordion」		アコーディオン
　14. 「tabMenu」		タブ
　15. 「breadCrumb」	パンくず
　16. 「btn」			ボタン
　17. 「faq」			Q&A
　18. 「map」			GoogleMap
　19. 「flow」			フロー
　20. 「flowSchedule」	フロー（年間スケジュールなど）
　21. 「contactList」	コンタクト（電話・FAX・メール）

============================================= */





/* ----------------------------------------------
　1.  「bxslider」スライダー
---------------------------------------------- */


#slider {
	width: 100%;
}
#slider li {
	max-height: 400px;
}
.containerFull #slider img,
.containerFullPc #slider img {
	width: 100% !important;
}
@media screen and (max-width: 767px) {
.containerFullMb #slider img {
	width: 100% !important;
}
}



/* ----------------------------------------------
　2.  「notice」お知らせ（注意書き）
---------------------------------------------- */


.blNotice > p {
	font-size: 1.6rem;
	font-weight: bold;
	color: #F44336;
	border-bottom: 2px dotted #F44336;
	padding-bottom: 5px;
	margin-bottom: 10px;
}
@media screen and (max-width: 767px) {
.blNotice > p {
	font-size: 1.4rem;
}
}



/* ----------------------------------------------
　3.  「dropdown」		ドロップダウン
---------------------------------------------- */
/* 親ulにclass="dropdown"を入れ、子要素にul、liを入れる */


ul.dropdown li {
	position: relative;
}
ul.dropdown > li ul {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	-webkit-transition: all .2s ease;
	transition: all .2s ease;
	visibility: hidden;
	opacity: 0;
	z-index: 1;
}
ul.dropdown > li:hover ul {
	top: 0;
	visibility: visible;
	opacity: 1;
}
ul.dropdown > li ul li a {
	display: block;
	border-top: 1px solid #E5E5E5;
}
ul.dropdown > li ul li a:before {
	content: "\f105" !important;
	font-family: FontAwesome;
	margin: 0 5px 0 10px;
}



/* ----------------------------------------------
　4.  「megaDropdown」	メガドロップダウン
---------------------------------------------- */
/* 親ulにclass="megaDropdown"を入れ、子要素にul、liを入れる */


ul.megaDropdown {
	position: relative;
}
ul.megaDropdown > li ul {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding: 2% 2% 1.5%;
	background: #E5E5E5;
	-webkit-transition: all .2s ease;
	transition: all .2s ease;
	visibility: hidden;
	opacity: 0;
	z-index: 1;
}
ul.megaDropdown > li:hover ul {
	top: 0;
	visibility: visible;
	opacity: 1;
}
ul.megaDropdown > li:hover ul > li {
	float: left;
	width: 33% !important;
	margin: 0 0.5% 0.5% 0;
}
ul.megaDropdown > li:hover ul li a {
	display: block;
}
ul.megaDropdown > li:hover ul li:nth-child(3n) {
	margin-right: 0;
}



/* ----------------------------------------------
　5.  「navCourse」コースナビ
---------------------------------------------- */


.navCourse {
	margin-bottom: 50px;
}
.navCourse > ul li {
	text-align: center;
	float: left;
	width: 16%;
	height: auto;
	margin-right: 0.8%;
}
.navCourse > ul li img {
	width: 100%;
}
.navCourse > ul li:last-child {
	margin-right: 0;
}
/* dropdown */
.navCourse > ul.dropdown > li ul,
.navCourse > ul.dropdown > li:hover ul {
	top: 100%;
}
.navCourse > ul.dropdown > li ul li {
	text-align: left;
	width: 100%;
	background: #DDD;
}
.navCourse > ul.dropdown > li ul li a:hover {
	background: #D5D5D5;
}
/* megaDropdown */
.navCourse > ul.megaDropdown > li ul,
.navCourse > ul.megaDropdown > li:hover ul {
	top: 100%;
}
.navCourse > ul.megaDropdown > li:hover ul li {
	background: #DDD;
}
.navCourse > ul.megaDropdown > li:hover ul li a:hover {
	background: #D5D5D5;
}
@media screen and (max-width: 767px) {
.navCourse > ul li {
	width: 32%;
	margin-right: 2%;
}
.navCourse > ul li:nth-child(3n) {
	margin-right: 0;
}
.navCourse > ul > li ul {
	display: none;
}
}



/* ----------------------------------------------
　6.  「carousel」カルーセル
---------------------------------------------- */


#carousel > dl {
	float: left;
	width: 23.5%;
}
#carousel > dl dt {
	font-size: 1.5rem;
	font-weight: bold;
	margin-top: 10px;
}
#carousel > dl dt:before {
	content: "\f061";
	font-family: FontAwesome;
	margin-right: 10px;
}
#carousel > dl dd {
	font-size: 1.2rem;
}
#carousel > dl a:hover img {
	filter: alpha(opacity=70);
    -moz-opacity: 0.70;
    opacity: 0.70;
}
@media screen and (max-width: 767px) {
#carousel > dl {
	-webkit-text-size-adjust: 100%;
}
#carousel > dl dt {
	font-size: 1.3rem;
}
#carousel > dl dd {
	font-size: 1.1rem;
}
}



/* ----------------------------------------------
　7.  「nextLink」ネクストリンク
---------------------------------------------- */
/* common.cssのカラム関連のcssと合わせて使う
   「nextLink」テキストのみ
   「nextLinkImg」画像付き
   「nextLinkThum」サムネイル画像付き */


.nextLink,
.nextLinkImg,
.nextLinkThum {
	width: 100%;
}
.nextLink > dl dt,
.nextLink > li,
.nextLinkImg > dl dt,
.nextLinkImg > li,
.nextLinkThum > dl dt,
.nextLinkThum > li {
	font-size: 1.5rem;
	font-weight: bold;
}
.nextLink > dl dt,
.nextLink > li,
.nextLinkImg > dl dt,
.nextLinkImg > li {
	margin-top: 10px;
}
.nextLink > dl a dt:before,
.nextLink > li a:before,
.nextLinkImg > dl a dt:before,
.nextLinkImg > li a:before,
.nextLinkThum > dl a dt:before,
.nextLinkThum > li a:before {
	content: "\f061";
	font-family: FontAwesome;
	margin-right: 10px;
}
.nextLink > dl a dt:before,
.nextLink > li a:before,
.nextLinkImg > dl a dt:before,
.nextLinkImg > li a:before,
.nextLinkThum > dl a dt:before,
.nextLinkThum > li a:before {
	margin-right: 10px;
}
.nextLink > dl dd,
.nextLinkImg > dl dd,
.nextLinkThum > dl dd {
	font-size: 1.2rem;
	overflow: hidden;
}
.nextLink > dl a,
.nextLink > li a,
.nextLinkImg > dl a,
.nextLinkImg > li a,
.nextLinkThum > dl a,
.nextLinkThum > li a {
	display: block;
}
.nextLinkThum > dl img,	/* サムネイル付きのみ画像サイズ指定 */
.nextLinkThum > li img {
	width: 30%;
}
.nextLinkImg > dl a:hover img,
.nextLinkImg > li a:hover img,
.nextLinkThum > dl a:hover img,
.nextLinkThum > li a:hover img {
	filter: alpha(opacity=70);
    -moz-opacity: 0.70;
    opacity: 0.70;
}
@media screen and (max-width: 767px) {
.nextLink,
.nextLinkImg,
.nextLinkThum {
	width: 100% !important;
	margin-bottom: 50px;
}
.nextLink > dl dt,
.nextLink > li,
.nextLinkImg > dl dt,
.nextLinkImg > li,
.nextLinkThum > dl dt,
.nextLinkThum > li {
	font-size: 1.3rem;
}
.nextLink > dl dd,
.nextLinkImg > dl dd,
.nextLinkThum > dl dd {
	font-size: 1.1rem;
}
.nextLinkThum > dl img,	/* サムネイル付きのみ画像サイズ指定 */
.nextLinkThum > li img {
	width: 20%;
}
}



/* ----------------------------------------------
　8.  「areaTweet」Twitterエリア
---------------------------------------------- */
/* Twitterのアイコン付きタイトル */


.titTwitter:before {
	content: "\f099";
	font-family: FontAwesome;
	margin-right: 10px;
	color: #489FDF;
	font-weight: normal;
}
.areaTweet {
	float: right;
	width: 25%;
	border: 1px solid #DDD;
}
@media screen and (max-width: 767px) {
.areaTweet {
	width: 100%;
}
}



/* ----------------------------------------------
　9.  「areaInstagram」Instagramエリア
---------------------------------------------- */
/* Instagramのアイコン付きタイトル */


.titInstagram:before {
	content: "\f16d";
	font-family: FontAwesome;
	margin-right: 10px;
	color: #DA5498;
	font-weight: normal;
}
.areaInstagram {
	width: 100%;
}
.areaInstagram > ul#instafeed li {
	width: 20%;
	display: inline-block;
	padding: 0.5%;
}
.areaInstagram > ul#instafeed li img {
	max-width: 100%;
}
@media screen and (max-width: 767px) {
.areaInstagram > ul#instafeed li {
	width: 50%;
	padding: 0.5%;
}
}



/* ----------------------------------------------
　10. 「areaUpdate」更新情報 ／ 「areaBlog」ブログ
---------------------------------------------- */
/* ブログは、各学校でcommon/jsフォルダ内に、「blog.js」「feeds.min.js」を */


.areaUpdate,
.areaBlog {
	width: 48%;
}
.areaUpdate {
	float: left;
}
.areaBlog {
	float: right;
}
.listUpdate,
.listBlog {
	font-size: 1.2rem !important;
	height: 300px;
	padding: 15px;
	border: 1px #DDD solid;
	overflow: auto;
}
.listUpdate > dl {
	margin-bottom: 10px;
}
.listUpdate > dl:last-child {
	border-bottom: none;
}
.listUpdate > dl dt,
.listBlog p.blog_date {
	float: left;
	width: 32%;
	margin-bottom: 10px;
}
.listUpdate > dl dt:before,
.listBlog p.blog_date:before {
	content: "\f044";
	font-family: FontAwesome;
	margin-right: 10px;
}
.listUpdate > dl dd,
.listBlog p.blog_title {
	float: right;
	width: 68%;
	margin-bottom: 10px;
}
@media screen and (max-width: 767px) {
.areaUpdate,
.areaBlog {
	width: 100%;
}
.listUpdate > dl dt,
.areaBlog p.blog_date {
	font-size: 1.0rem;
	width: 35%;
}
.listUpdate > dl dd,
.listBlog p.blog_title {
	width: 65%;
}
}



/* ----------------------------------------------
　11. 「list○○○」	リストスタイル
---------------------------------------------- */
/* ○○○Bは:before、○○○Aは:After */


.listArrowB a,
.listArrowA a,
.listAngleB a,
.listAngleA a,
.listCaretB a,
.listCaretA a,
.listCheckB a,
.listCheckA a,
.listExternalB a,
.listExternalA a,
.listFingerB a,
.listFingerA a {
	display: block;
}
.listArrowB a:before,	
.listArrowA a:after,
.listAngleB a:before,
.listAngleA a:after,
.listCaretB a:before,
.listCaretA a:after,
.listCheckB a:before,
.listCheckA a:after,
.listExternalB a:before,
.listExternalA a:after,
.listFingerB a:before,
.listFingerA a:after {
	font-family: FontAwesome;
}
.listArrowB a:before,	
.listAngleB a:before,
.listCaretB a:before,
.listCheckB a:before,
.listExternalB a:before,
.listFingerB a:before {
	margin-right: 10px;
}
.listArrowA a:after,
.listAngleA a:after,
.listCaretA a:after,
.listCheckA a:after,
.listExternalA a:after,
.listFingerA a:after {
	margin-left: 10px;
}
.listArrowB a:before,
.listArrowA a:after {		/* → */
	content: "\f061";
}
.listAngleB a:before,
.listAngleA a:after {		/* > */
	content: "\f105";
}
.listCaretB a:before,
.listCaretA a:after {		/* ‣ */
	content: "\f0da";
}
.listCheckB a:before,
.listCheckA a:after {		/* ✓ */
	content: "\f00c";
}
.listExternalB a:before,
.listExternalA a:after {	/* ↗（外部リンク） */
	content: "\f08e";
}
.listFingerB a:before,
.listFingerA a:after {		/* ☞ */
	content: "\f0a4";
}



/* ----------------------------------------------
　12. 「colorbox」モーダルウィンドウ
---------------------------------------------- */
/* 親要素のブロックに「class="colorbox"」 */


/* 青い枠を消す */
a:focus {
	outline: none;
}

/* inlineBox */
.colorbox > li .inlineBox {
	display: none;
}
dl.colorboxDetail {
	width: 100%;
}
dl.colorboxDetail dt {
	margin-top: 10px;
}
@media screen and (max-width: 767px) {
dl.colorboxDetail {
	width: auto;
}
}

/* 虫眼鏡マーク */
.colorbox a {
	position: relative;
}
.colorbox a:after {
	position: absolute;
	content: "\f00e";
	font-family: FontAwesome;
	top: 5px;
	right: 10px;
}



/* ----------------------------------------------
　13. 「accordion」アコーディオン
---------------------------------------------- */
/* dlに「id="accordion"」、dtが親メニュー、ddが内容（デフォルトは閉じている）
   スマホのみアコーディオンにする場合は、「id="accordionSp"」 */


dl.accordion > dt:hover {
	cursor: pointer;
}
dl.accordion > dt:after {
	content: "\f196";
	font-family: FontAwesome;
	float: right;
}
dl.accordion > dt.active:after {
	content: "\f147";
	font-family: FontAwesome;
}
@media screen and (max-width: 767px) {
dl.accordionSp > dt:after {
	content: "\f196";
	font-family: FontAwesome;
	float: right;
}
dl.accordionSp > dt.active:after {
	content: "\f147";
	font-family: FontAwesome;
}

dl.accordionSp > dt:after,	/*dlに「class="accordionSp"」を入れるとスマホのみアコーディオンに*/
dl.accordionSp > dt.active:after {
	font-size: 1.4rem;
	font-weight: normal;
	/*margin-top: 13px;*/
}
}



/* ----------------------------------------------
　14. 「tabMenu」		タブ
---------------------------------------------- */
/* カラムのclassと合わせて使用 */


ul.tabMenu {
	width: 100%;
}
ul.tabMenu > li a {
	display: block;
	text-align: center;
	width: 100%;
	height: auto;
	background: #EEE;
	border-right: 1px solid #FFF;
}
ul.tabMenu > li:last-child a {
	border-right: none;
}
.tabBox1,
.tabBox2,
.tabBox3,
.tabBox4,
.tabBox5 {
	width: 100%;
	height: auto;
	border: 1px solid #CCC;	
}
#tabBox1 {
}
#tabBox2,
#tabBox3,
#tabBox4,
#tabBox5 {
	display: none;
}



/* ----------------------------------------------
　15. 「breadCrumb」パンくず
---------------------------------------------- */


ul.breadcrumb {
	font-size: 1.2rem;
	padding: 10px 0;
	margin-bottom: 20px;
}
ul.breadcrumb > li {
	padding: 0 5px;
	display: inline-block;
	*display: inline;
	*zoom: 1;
}
ul.breadcrumb > li:after {
	content: "\f105";
	font-family: FontAwesome;
	margin-left: 15px;
}
ul.breadcrumb > li:last-child:after {
	content: normal;
}
ul.breadcrumb > li > a {
	color: #AAA;
}



/* ----------------------------------------------
　16. 「btn」ボタン
---------------------------------------------- */
/* 「class="btn"」左に→、「class="btnOther"」はlistOOOOAやlistOOOOBと合わせて使用 */


a.btn,
a.btnOther {
	display: block;
	font-size: 1.8rem;
	font-weight: bold;
	color: #FFF;
	text-align: center;
	padding: 10px;
	margin: 20px auto 0;
	background: #F44336;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	box-shadow: 2px 4px 0 rgba(170,47,38,1);
	text-shadow: -1px 0 0 #666;
}
a.btn:before {
	content: "\f061";
	font-family: FontAwesome;
	font-weight: normal;
	margin-right: 15px;
}
a.btn:hover,
a.btnOther:hover {
	color: #FF0;
	margin: 22px auto -2px;
	background: #DB3C30;
	box-shadow: 2px 2px 0 rgba(170,47,38,1);
}
a.btn:hover:before {
	margin-right: 10px;
	margin-left: 5px;
}
@media screen and (max-width: 767px) {
a.btn,
a.btnOther {
	font-size: 1.6rem;
}
}



/* ----------------------------------------------
　17. 「faq」Q&A
---------------------------------------------- */


.faq > dl {
	margin-bottom: 20px;
}
.faq > dl dt {
	font-size: 1.6rem;
	font-weight: bold;
	padding-left: 30px;
}
.faq > dl dt:before {
	content: "Q";
	font-size: 2.5rem;
	margin: 0 10px 0 -30px;
}
.faq > dl dd {
	padding-left: 30px;
	line-height: 1.5;
}
.faq > dl dd:before {
	content: "A";
	font-size: 2.5rem;
	font-weight: bold;
	margin: 0 10px 0 -30px;
}
@media screen and (max-width: 767px) {
.faq > dl dt {
	font-size: 1.4rem;
}
}



/* ----------------------------------------------
　18. 「map」GoogleMap
---------------------------------------------- */


.mapGoogle {
	width: 100%;
	height: 300px;
}
.mapGoogle iframe {
	width: 100%;
	height: 100%;
}
@media screen and (max-width: 767px) {
.mapGoogle {
	width: 100%;
	height: 400px;
}
}



/* ----------------------------------------------
　19. 「flow」フロー
---------------------------------------------- */


dl.flow {
	margin-bottom: 50px;
}
dl.flow > dt {
	background: #EEE;
	float: left;
	width: 50px;
	padding: 10px 0;
	display: table-cell;
	position: relative;
}
dl.flow > dt p {
	font-size: 1.8rem;
	font-weight: bold;
	margin: 0 auto;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	-moz-writing-mode:vertical-rl;
	writing-mode: vertical-rl;
	vertical-align: middle;
}
dl.flow > dt:after {
	content: "";
	display: inline-block;
	position: absolute;
	bottom: -40px;
	left: 0;
	border-top: 20px solid #EEE;
	border-right: 25px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 25px solid transparent;
}
dl.flow > dd {
	margin-left: 70px;
}
@media screen and (max-width: 767px) {
dl.flow > dt {
	width: 40px;
}
dl.flow > dt p {
	font-size: 1.6rem;
}
dl.flow > dt:after {
	bottom: -30px;
	border-top: 15px solid #EEE;
	border-right: 20px solid transparent;
	border-bottom: 15px solid transparent;
	border-left: 20px solid transparent;
}
dl.flow > dd {
	margin-left: 60px;
}
}



/* ----------------------------------------------
　20. 「flowSchedule」フロー
---------------------------------------------- */


.flowSchedule {
	margin-bottom: 50px;
}
.flowSchedule dl {
	width: 100%;
}
.flowSchedule dl dt {
	text-align: center;
	float: left;
	width: 80px;
	height: auto;
	margin-right: 20px;
	background: #EEE;
	border-bottom: 1px dotted #FFF;
	position: relative;
}
.flowSchedule dl:last-child dt:after {
	content: "";
	display: inline-block;
	position: absolute;
	bottom: -40px;
	left: 0;
	border-top: 20px solid #EEE;
	border-right: 40px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 40px solid transparent;
}
@media screen and (max-width: 767px) {
.flowSchedule dl dt {
	width: 50px;
}
.flowSchedule dl:last-child dt:after {
	bottom: -30px;
	border-top: 15px solid #EEE;
	border-right: 25px solid transparent;
	border-bottom: 15px solid transparent;
	border-left: 25px solid transparent;
}
}
.flowSchedule dl dd {
	width: 100%;
	border-bottom: 1px dotted #CCC;
}
.flowSchedule dl:last-child dt,
.flowSchedule dl:last-child dd {
	border-bottom: none;
}



/* ----------------------------------------------
　21. 「contactList」コンタクト（電話・FAX・メール）
---------------------------------------------- */
/* 複数のリストとして並べる場合：ulタグに「class="contaclList"」
　　　　　　　　　　　　　　　　 liタグに「class="tel"」など
　 単独の場合　　　　　　　　　：aタグに「class="contactTel"」など */


ul.contactList li,
ul.contactList li > a {
	line-height: 2.5;
	margin-right: 20px;
}
ul.contactList li:before,
ul.contactList li a:before,
a.contactTel:before,
a.contactFax:before,
a.contactMail:before {
	font-family: FontAwesome;
	margin-right: 10px;
}
ul.contactList li.tel a:before,
a.contactTel:before {
	content: "\f095";
}
ul.contactList li.fax:before,
a.contactFax:before {
	content: "\f1ac";
}
ul.contactList li.mail a:before,
a.contactMail:before {
	content: "\f0e0";
}
@media screen and (max-width: 767px) {
ul.contactList li,
ul.contactList li > a {
	margin-right: 10px;
}
ul.contactList li:before,
ul.contactList li a:before,
a.contactTel:before,
a.contactFax:before,
a.contactMail:before {
	margin-right: 5px;
}
}