@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.  「Inquiry」お問い合わせ
　12. 「colorbox」		モーダルウィンドウ
　13. 「accordion」		アコーディオン
　14. 「tabMenu」		タブ
　15. 「breadCrumb」	パンくず
　16. 「Button」			ボタン
　17. 「faq」			Q&A
　18. 「map」			GoogleMap
　19. 「flow」			フロー
　20. 「flowSchedule」	フロー（年間スケジュールなど）

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



/* font */
small{
	font-size: small;
}



/* ----------------------------------------------
hタグ
---------------------------------------------- */
h1 {font-size: xx-large;}

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

	h1 {
		font-size: large;
	}

}






/* ----------------------------------------------
　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. 「notes」「caution」		注意書き
---------------------------------------------- */
.notes,
.caution {
	font-size: small;
}
.notes::before{
	color: red;
	content: "※";
	font-weight: 800;
	padding-right: 0.25em;
}
/* 複数でまとめたい場合*/
.caution span::before{
	content: "※";
	color: red;
	padding-right: 0.25em;
}







/* ----------------------------------------------
　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: "Font Awesome 5 Free";
	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: "Font Awesome 5 Free";
	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: "Font Awesome 5 Free";
	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: "Font Awesome 5 Free";
	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: "Font Awesome 5 Free";
	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: "Font Awesome 5 Free";
	font-weight: 900;
	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.  「Inquiry」お問い合わせ
---------------------------------------------- */
.inquiry {
	background:rgb(106, 98, 98);
	border-radius: .15em;
	color: rgb(255, 255, 255);
	overflow: hidden;
	padding: 0.25em 0.25em 0.15em 15%;
	position: relative;
}
	.inquiry::before {
		color: rgba(255, 255, 255, 0.5);
		content: '\f05a';
		font: 900% "Font Awesome 5 Free";
		font-weight: 900;
		left: -2%;
		position: absolute;
		top: -70%;
	}
.inquiry strong {
	display: block;
	text-align: center;
}

.inquiry ul{
	display: flex;
	flex-wrap: wrap;	
	margin: 0 auto;
	width: 67.5%;
}
	.inquiry ul li {
		font-family: "Font Awesome 5 Free";
		font-weight: 900;
		width: calc(100% / 2);
	}
	.inquiry ul > li:nth-child(2) {text-align: right;}
	.inquiry ul > li:first-child a::before{content: "\f095";padding-right: .3em;}
	.inquiry ul > li:nth-child(2) a::before{content: "\f0e0";padding-right: .4em;}

.inquiry ul li a{
	color: rgb(255, 255, 255)!important;
	text-decoration: none!important;
}

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

	.inquiry {
		font-size: small;
		padding: 0.25em;
		width: 100%;
	}
	.inquiry::before {
		color: rgba(255, 255, 255, 0.5);
		left: -8.5%;
		top: -10.5%;
	}
	.inquiry ul{
		clear: both;
		width: 100%;
	}

	.inquiry ul li {
		text-align: center;
		width: 100%;
	}
		.inquiry ul > li:nth-child(2) {text-align: center;}

}






/* ----------------------------------------------
　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: "Font Awesome 5 Free";
	font-weight: 900;
	top: 5px;
	right: 10px;
}






/* ----------------------------------------------
　13. 「accordion」アコーディオン
---------------------------------------------- */
/* 「accordion」アコーディオン- */
.accordionBox {
	padding: 0;
}

.accordionBox label {
	cursor:pointer;
	display: block;
	font-weight: 900;
	transition: all 0.5s;
}
	.accordionBox label:hover {
		animation: fadeIn 0.2s;
		-webkit-animation: fadeIn 0.2s;
	}
	.accordionBox label::before {
		content: '\f0fe';
		font-family: 'Font Awesome 5 Free';
		font-weight: 900;
		padding-right: 0.5em;
	}
	.accordionBox input {
		display: none;
	}

.accordionBox .show {
	height: 0;
	opacity: 0;
	overflow: hidden;
	padding: 0;
	transition: 0.8s;
}
	.inputCss:checked + label + .show {
		background: rgb(250, 250, 250);
		height: auto;
		opacity: 1;
		padding: 1.5em;
	}
	.inputCss:checked + label::before {
		content: '\f146';
	}






/* ----------------------------------------------
　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: small;
	margin-bottom: 20px;
	padding: 10px 0;
	width: 1200px;margin: 0 auto;
}
ul.breadcrumb > li {
	*display: inline;
	display: inline-block;
	padding: 0 5px;
	*zoom: 1;
}
ul.breadcrumb > li:after {
	content: "\f105";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-left: 1.5em;
}
ul.breadcrumb > li:last-child:after {
	content: normal;
}
ul.breadcrumb > li > a {
	color: rgb(170, 170, 170);
}

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

	ul.breadcrumb {
		margin: 0 2%;
		width: 96%;
	}

}






/* ----------------------------------------------
　16. 「Button」ボタン
---------------------------------------------- */
.btn a {
	display: inline-block;
	color: #fff;
	background-color: #000;
	border-radius: 20px;
	line-height: 1.5;
	padding: .5em 2em;
	/*font-size: .9rem;*/
	position: relative;
	transition-duration: .3s;
}
.btn a:hover {
	background-color: rgba(0,0,0,.8);
}
.btn a:after {
	content: "";
	width: 2em;
	min-height: 2em;
	background-position: right center;
	background-size: contain;
	position: absolute;
	background-repeat: no-repeat;
	right: -1em;
	top: 50%;
	transform: translateY(-50%);
}
.btnred a{
		background-color: #d80c18;
}
.btnred a:hover {
	background-color: rgba(216,12,24,.8);
}
.btn.arrow-pink a:after {
	background-image: url(../../img/arrow_pink.png);
}
.btn.arrow-green a:after {
	background-image: url(../../img/arrow_green.png);
}
.btn.arrow-white a:after {
	background-image: url(../../img/arrow_white.png);
}
.btn.arrow-red a:after {
	background-image: url(../../img/arrow_red.png);
}
.btn.arrow-darkgray a:after {
	background-image: url(../../img/arrow_darkgray.png);
}

@media screen and (min-width: 768px){
	.btn a {
		font-size: 1rem;
		padding: 1em 3em;
		border-radius: 30px;
		margin: 0 auto;
	}
}






/* ----------------------------------------------
　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;
}