@charset "UTF-8";

/* 基本のレイアウト（スマホ向けレイアウト）
***************************************************************************************** */

/* ヘッダー
----------------------------------------------------------------------------------------- */

/*ヘッダー全部--------------------------------------------------------*/
.head {
	width: 100%;
	z-index: 999;
	position: fixed; /*画面上部に固定*/
	top: 0;
	box-shadow: 0px 1px 5px #ccc;
}

/*ヘッダー sp 見えている部分------------------------------------------*/
.wrap_logo_info_toggle {
	width: 100%;
	height: 53px;
	background: #fff;
	position: relative;
	display: flex;/* infoボタンと三本線を横並び */
	z-index: 998;
}

/* h1ロゴの入れ物 */
.logo {
	width: 200px;
	padding: 13px 0 0 5px;
	background: #fff;
}


/*トグルボタンの部分*/
.nav_toggle {
	display: block;
	position: absolute;
	right: 0px;
	top: 0px;
	width: 52px;
	height: 53px;
	cursor: pointer;/* リンクじゃない部分だけどカーソルを変化させるため */
	padding: 10px 10px 6px 10px;
	background: #54c3f1;
	z-index: 101;
}
/* 三本線を囲むための見えない枠 */
.nav_toggle div {
	position: relative;/* 子要素spanのため */
	width: 32px;/* 三本線の幅 */
}
/* 三本線 */
.nav_toggle span {
	display: block;/* spanをブロック要素に */
	position: absolute;/* 親要素nav_toggle */
	height: 4px;/* 三本線の一本の高さ */
	width: 100%;
	background: #fff;/* 三本線の色 */
	-webkit-transition: .35s ease-in-out;
	-moz-transition: .35s ease-in-out;
	transition: .35s ease-in-out;/* 三本線の動き */
}
.nav_toggle span:nth-child(1) {
	top: 0;
}
.nav_toggle span:nth-child(2) {
	top: 8px;
}
.nav_toggle span:nth-child(3) {
	top: 16px;
}
.nav_toggle span:nth-child(4) {
	top: 22px;
	font-size: 0.6rem;
	background: transparent;
	color: #fff;
}
/* .nav_toggle 切り替えアニメーション */
.open .nav_toggle span:nth-child(1) {
	top: 11px;
	-webkit-transform: rotate(315deg);
	-moz-transform: rotate(315deg);
	transform: rotate(315deg);
}
.open .nav_toggle span:nth-child(2) {
	width: 0;
	left: 50%;
}
.open .nav_toggle span:nth-child(3) {
	top: 11px;
	-webkit-transform: rotate(-315deg);
	-moz-transform: rotate(-315deg);
	transform: rotate(-315deg);
}
.open .nav_toggle span:nth-child(4) {
	display: none;
}
/* .drawer スライドアニメーション */
.open .drawer {
	/* .drawer top + .mobile_head height */
	-moz-transform: translateY(752px);
	-webkit-transform: translateY(752px);
	transform: translateY(752px);
		z-index: 1000;
}
/* ドロワーメニューをスクロールさせるために必要 */
.open {
	height: 100%;/* クリックしてヘッダー（head）に.openが付いた時の高さ */
	overflow-y: auto;/* クリックしてヘッダー（head）に.openが付いた時に縦にスクロールさせる */
	-webkit-overflow-scrolling: touch;/* 慣性スクロール */
}

/*ドロワーメニュー 隠れている部分-------------------------------------*/
.drawer {
	position: absolute;/* 親要素head_sp */
	top: -700px;/* 開いてないときは画面外に配置 */
	left: 0px;
	background: #222;
	width: 100%;
	text-align: center;
	-webkit-transition: .5s ease-in-out;
	-moz-transition: .5s ease-in-out;
	transition: .5s ease-in-out;
	z-index: 998;
}
.drawer li a{
	display: block;/* リンク範囲を広げる */
	padding: 18px 0;/* ドロワー部分上下18px */
	color: #fff;
	border-bottom: #888 1px solid;/* 下境界線 */
}
.info_drawer_sp {
	display: flex;/* ～の方部分リストを横並び */
	flex-wrap: wrap;/* 中身のリストを折り返し */
}
.info_drawer_sp li {
	width: 33.33%;/* 段組3列 */
	border-left: #888 1px solid;
}
.info_drawer_sp li:first-child {
	border-left: none;
}
.nokata_sp {
	padding: 10px;
	display: flex;/* ～の方部分リストを横並び */
	flex-wrap: wrap;/* 中身のリストを折り返し */
	justify-content: center;
}
.nokata_sp li {
	width: 48%;/* 段組2列 */
	margin: 2px;
	background: #444;/* ～の方部分の背景色 */
}
/*.nokata_sp li:nth-child(even) {
	border-left: #888 1px solid;/* 偶数番目だけ左境界線 
}*/
.nokata_sp li a {
	border: none;
}
.sns_sp {
	display: flex;/* LINEとFBを横並び */
	justify-content: center;
}
.sns_sp li a {
	padding: 18px 10px;
	border-bottom: none;/* drawerの下線消す */
}
.sns_sp li img {
	width: 30px;
}


/* js用 fixしたときの書式 */
.fixed {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	box-shadow: 0px 3px 5px #666;
}
.shadow {
	box-shadow: 0px 3px 5px #666;
}



/* 固定シリーズ（申込, TOPへ, info, facebook, LINE ）
----------------------------------------------------------------------------------------- */

/* ページトップへのボタンの書式 */
#btn_pagetop a {
	background: rgba(84, 195, 241, 0.7);
	/*border: #fff 3px solid;*/
	border-radius: 50%;
	color: #fff;
	font-weight: bold;
	font-family: 'M PLUS 1p', sans-serif;
	height: 70px;
	line-height: 70px;
	position: fixed;
	bottom: 65px;
	right: 5px;
	text-align: center;
	width: 70px;
	z-index: 100;
}

#btn_pagetop a:hover {
	transform: rotateZ( 360deg ) ;
}
#btn_pagetop a:active {
	transform: rotateZ( 360deg ) ;
}

#btn_pagetop a:link {
	color: #fff;
}

#btn_pagetop a:visited {
	color: #fff;
}


/* 下部に出てくるinfoボタン-------------------------------------------*/

/* インフォの配置 */
.info_sp {
	width: 100%;
	z-index: 100;
	display: flex;
	position: fixed;
	bottom: 0;
	left: 0;
	background: #222;
}
.info_sp li {
	width: 33.33%;/* インフォが3つだから33.33 */
	height: 55px;
	color: #909090;
	border-right: #444 1px solid;
	font-size: 0.6rem;
	padding: 12px 0px 6px 0px;
	text-align: center;
}
.info_sp li a {
	display: block;
	text-decoration: none;
}
.info_sp li a img {
	width: 20px;
	height: 20px;
}


/* Facebookへのボタンの書式 ------------------------------------------*/
#btn_fb a {
	background: #888;
	border-radius: 10px;
	color: #ffffff;
	font-weight: bold;
	font-family: 'Mplus 1p';
	font-size: 1.5rem;
	position: fixed;
	bottom: 60px;
	left: 5px;
	text-align: center;
	width: 40px;
	height: 40px;
	line-height: 40px;
	z-index: 100;
}
#btn_fb a:link {
	color: #fff;
}
#btn_fb a:visited {
	color: #fff;
}


/* LINEへのボタンの書式 ----------------------------------------------*/
#btn_line a {
	background: #888;
	border-radius: 10px;
	color: #fff;
	font-weight: bold;
	font-family: 'Mplus 1p';
	font-size: 0.8rem;
	position: fixed;
	bottom: 10px;
	left: 5px;
	text-align: center;
	width: 40px;
	height: 40px;
	line-height: 40px;
	z-index: 100;
}
#btn_line a:link {
	color: #fff;
}
#btn_line a:visited {
	color: #fff;
}


/* フッターの書式
----------------------------------------------------------------------------------------- */
/* 各種ご相談の部分 */
.consultation {
	padding: 70px 5px 80px 5px;
	background: url("/www/img/footer_sp.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.consultation_title {
	font-size: 1.5rem;
	text-align: center;
	color: #54c3f1;
	padding: 30px;
}
.consultation ul {
	display: flex;
	justify-content: center;
}

.consultation ul li a {
	width: 150px;
	height: 150px;
	text-align: center;
	margin: 10px;
}
.consultation ul li a img {
	width: 150px;
}

/* 濃いグレーでFJB情報がある部分全体 */
.footer_fjbinfo {
	background: #444;
	color: #909090;
	padding: 20px 10px 10px;
	text-align: center;
	font-size: 0.8rem;
	line-height: 1.2rem;
	width: 100%;
}
/* フッター学校名と住所部分の枠 */
.footer_fjbimg {
	width: 100%;
	padding: 10px;
	margin-bottom: 20px;
}
.footer_fjbimg img {
	max-width: 270px;
}
.footer_tel {
	display: inline-block;/* 背景画像の位置のために幅を中身の長さに合わせてる じゃないと電話マークが左に行く */
	font-size: 1.2rem;
	padding: 5px 0 5px 25px;
	background: url(/www/img/icon_tel_gray.png) no-repeat left;
	background-size: 20px;
}

/* フッター 各種リンク部分の枠 */
.footer_conts {
	width: 100%;
	padding: 10px;
}

/* サイトマップ部分 */
.sitemap {
	display: flex;
	-webkit-justify-content: center; /* Safari 中央揃え */
	justify-content: center;/* 中央揃え */
	flex-wrap: wrap;
}
.sitemap li {
	margin: 0 0 10px 0;
	padding: 0 10px 0 10px;
	border-right: #666 1px solid;
	-webkit-transform: skewX(150deg);
	-moz-transform: skewX(150deg);
	transform: skewX(150deg);
}

.sitemap li:last-child {
	border-right: none;
}

ul.sitemap li a {
	display: block;
	-webkit-transform: skewX(-150deg);
	-moz-transform: skewX(-150deg);
	transform: skewX(-150deg);
}

/* SNSのロゴ部分 */
.sns {
	display: flex;
	-webkit-justify-content: center; /* Safari 中央揃え */
	justify-content: center;/* 中央揃え */
}
.sns li {
	width: 30px;
	height: 30px;
	margin: 10px;
}

/* コピーライツの部分 */
.copyrights {
	background: #444;
	color: #909090;
	padding: 5px 0 100px 0;
	text-align: center;
	width: 100%;
	height: 30px;
}

/* コピーライトの文字サイズ */
small {
	font-size: 0.6rem;
}

.pc { display: none; }
.sp { display: block; }


/* フッターに使うh2。SEO対策での変更対応 */
footer h2 {
	margin: 0 0 70px 0;
	padding: 60px 0 0 0; /*#リンクの時にヘッダーと重ならないように*/
	/* font-size: 1.7rem; */
	font-size: 2.5rem;
	line-height: 2rem;
	font-weight: 500;
	text-align: center;
}

.font-mp {
	font-family: 'M PLUS 1p', sans-serif;
}

/*****************************************************************************************
基本のレイアウト（スマホ向けレイアウト）終わり*/


/*タブレット・PC向けレイアウト768px～
*******************************************************************************************/
@media screen and (min-width: 768px) {

/* ヘッダー
----------------------------------------------------------------------------------------- */
.head {
	position: static; /*画面上部に固定解除*/
	box-shadow: none;
}

/* ～の方系
----------------------------------------------------------------------------------------- */

/* 下地 */
.wrap_nokata_pc {
	min-width: 768px;
	background: #444;
	padding: 7px 0;
}

/* 右配置と横並び */
.nokata_pc {
	display: flex;
	-webkit-justify-content: flex-end; /* Safari */
	justify-content: flex-end;
	width: 100%;
	margin: 0 auto;
	padding: 0 5px;
}
.nokata_pc li {
	text-align: center;
	width: 120px;
	padding: 5px 0;
	color: #fff;
	font-size: 0.7rem;
}
.nokata_pc li a {
	display: block;
}
/*～の方系マウスホバー*/
.nokata_pc li a:hover {
	letter-spacing: 3px;
}
.nokata_pc li a:hover img {
	transform: none;
}
.nokata_pc li a img {
	width: 20px;
}

.nokata_pc .header_sns {
	width: 80px;
}


/* ロゴとインフォ部分
----------------------------------------------------------------------------------------- */

/* ロゴとインフォの枠の書式 */
.wrap_logo_info_toggle {
	/*max-width: 1000px;幅を1000px固定*/
	height: 75px;/*spで高さ設定しているから無いとだめ*/
	padding: 0 5px;
	margin: 10px auto 20px;/*下を30px離す*/
	justify-content: space-between;

}

/* ロゴ画像 */
.logo {
	width: 350px;
}

.logo a:hover img {
	opacity: 1;/*マウスホバー時30％透過打ち消し*/
	transform: none;
	outline: none;
}

/* インフォ3つの枠 */
.info_pc {
	width: 300px;
	display: flex;
	padding: 3px 0;
	-webkit-justify-content: flex-end; /* Safari 右揃え */
	justify-content: flex-end;/* 右揃え */
}

/* インフォ3つのボタンの書式 */
.info_pc li a{
	display: block;
	padding: 15px 0 10px 0;
	text-decoration: none;
	width: 70px;
	color: #222;
	font-size: 0.6rem;
	line-height: 1rem;
	text-align: center;
	border: #666 1px solid;
	margin-left: 10px;
}
.info_pc li a img {
	width: 22px;
	height: 22px;
}
.info_pc a:hover img {
	transition: .3s;
	opacity: 1;
	transform: scale(1.2);
}
.info_pc a:hover {
	background: #d3edfb;
}


/* グローバルナビ gnav
----------------------------------------------------------------------------------------- */

/* グローバルナビのメニューボタン横並び */
.gnav {
	max-width: 1500px;
	display: flex;
	margin: 0 auto 5px;
/*border: 1px red solid;*/
}

/* グローバルナビのメニューボタン書式 */
.gnav li {
	width: 16.66%;/* 幅を1/6にして1行に6つボタンにする */
}
.gnav li a {
	font-size: 0.9rem;
	text-align: center;
}
.gnav li+li a {
	border-left: #666 1px dotted;/* 横の区切り線 */
}

/* キャンパスライフの文字を他と同じ大きさに */
.gnav li.campus a {
	font-size: 0.8rem;
}

/* グローバルナビのマウスホバー */
.gnav li a:hover {
	color: #54c3f1;
	letter-spacing: 3px;
}





/* フッター
------------------------------------------------------------------------------------------*/
footer {
	min-width: 768px;/*フッター部分が横スクロールしても大丈夫なように*/
}

.consultation {
	background: url("/www/img/footer_pc.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

/*フッターの1列目 ロゴと所在地の部分*/
.footer_fjbimg {
	width: 35%;
	text-align: left;

}
/*フッターの2列目 ロゴと所在地の部分*/
.footer_conts {
	width: 65%;
	text-align: left;
	vertical-align: top;

}
.sitemap,
.sns {
	-webkit-justify-content:  flex-start; /* Safari 左揃え */
	justify-content: flex-start;/* 左揃え */
}
.sns li a:hover img {
	transition: .3s;
	transform: none;
}

/* コピーライツの部分 */
.copyrights {
	padding: 5px 0 50px 0;
}

.pc { display: block; }
.sp { display: none; }

}/* タブレット・PC向けレイアウト終わり*******************************************************************/