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

/*-------------------------------------------

name:top.css（TOPページ）

-------------------------------------------*/

/*====================================
	mv
======================================*/
#mvTop{ width:100%; margin:0; vertical-align:bottom;}

/*====================================
	section
======================================*/
section > .inner{ padding:6% 0;}

/*====================================
	コンセプト
======================================*/
#concept{ background:#003978; color:#fff;}
#concept > .inner{ max-width:900px;}
#concept .flexBox .copy{ width:30%; max-width:500px; text-align:center; align-items:center;}
#concept .flexBox .copy.pc{}
#concept .flexBox .copy.sp{ display:none;}
#concept .flexBox .txtBox{ width:70%;}
#concept .flexBox .txtBox .founder{ margin:0 0 8%;}
#concept .flexBox .txtBox .founder .txt{ font-size:115%; font-family:'Noto Serif JP', serif; letter-spacing:0.05em; line-height:2.7;}
#concept .flexBox .txtBox .founder .name{ font-size:85%; text-align:right; margin:1% 0 0;}
#concept .flexBox .txtBox .founder .name span{ font-size:150%; font-family:'Noto Serif JP', serif;}


/*====================================
	contentsBnr
======================================*/
 #contentsBnr{}


/*====================================
	学園トピックス（新着情報）
======================================*/
#news{}
#news > .inner{}
#news .newsArea{}
#news .newsList .btn01{ width:200px; margin:0 auto; letter-spacing:0;}
#news .newsList .btn01 a{ font-size:100%; padding:14px 0;}

/*新着情報 一覧*/
.newsList{}
.newsList > ul{ margin:0 0 30px; border-top:1px solid #e5e5e5;}
.newsList > ul > li{ padding:19px 5%; border-bottom:1px solid #ddd; position:relative;}
.newsList > ul > li > a{ display:table;}
.newsList > ul > li > a::after{ content:""; display:block; border:4px solid transparent; border-left:5px solid #003978; position:absolute; right:2%; top:50%; transform:translate(0,-50%);}
.newsList > ul > li > a .date,
.newsList > ul > li > a .ctgry,
.newsList > ul > li > a .title{ display:table-cell;}
.newsList > ul > li > a .date{ color:#aaa; padding:0 15px 0 0;}
.newsList > ul > li > a .ctgry{}
.newsList > ul > li > a .ctgry > span{ display:inline-block; width:110px; padding:6px 0; font-size:90%; color:#fff; text-align:center; line-height:1;}
.newsList > ul > li > a .title{ padding:0 0 0 15px; line-height:1.4;}
.newsList > ul > li > a:hover .title{ opacity:.6;}
/*カテゴリカラー*/
.c01 > span{ background:#E3B025;}
.c02 > span{ background:#2ea875;}
.c03 > span{ background:#4ca5d8;}


/*=========================================
	school
=========================================*/
#school{}
#school ul.bnrList > li{ border:1px solid #e3e2e0; border-width:0 1px 4px 0; text-align:left;}
#school ul.bnrList > li:last-child{ border-right:none; transition:all .7s ease;}
#school ul.bnrList > li:hover{ border-bottom-color:#003978;}


/*=========================================
	subContents
=========================================*/
#subContents{}
#subContents > .inner{ max-width:1200px;}
#subContents ul{}
#subContents ul > li{ position:relative; border:1px solid #e3e2e0; background:#fff;}
#subContents ul > li a{ display:flex; align-items:center;}
#subContents ul > li .ph{ width:35%; margin-right:5%;}
#subContents ul > li .ph::after{ padding-top:100%;}
#subContents ul > li .ttl{ letter-spacing:0.05em; line-height:1.2;}
#subContents ul > li .ttl i{ position:absolute; bottom:10px; right:7px; font-size:85%; color:#002956;}
#subContents ul > li a:hover{ box-shadow:0 0 10px #e5e5e5;}






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

	タブレット

===================================================*/
@media only screen and (max-width: 1024px) {

/*====================================
	mv
======================================*/
#mvTop{}


/*====================================
	section
======================================*/
section > .inner{ padding:8% 0;}


/*====================================
	コンセプト
======================================*/
#concept{}
#concept > .inner{ max-width:80%;}
#concept .flexBox .copy{ width:90%; margin:0 auto 5%;}
#concept .flexBox .copy.pc{ display:none;}
#concept .flexBox .copy.sp{ display:block;}
#concept .flexBox .txtBox{}
#concept .flexBox .txtBox .founder{}
#concept .flexBox .txtBox .founder .txt{ line-height:2.2;}
#concept .flexBox .txtBox .founder .name{}
#concept .flexBox .txtBox .founder .name span{}


/*====================================
	contentsBnr
======================================*/
 #contentsBnr{}


/*====================================
	学園トピックス（新着情報）
======================================*/
#news{}


/*=========================================
	school
=========================================*/
#school{}
#school ul{}
#school ul.bnrList > li{ border-right:none;}

/*=========================================
	subContents
=========================================*/
#subContents{}
#subContents > .inner{}
#subContents ul{}
#subContents ul > li{ width:48%; margin:0 1% 2%;}



}


















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

	スマホ

===================================================*/
@media only screen and (max-width:739px) {

/*====================================
	mv
======================================*/
#mvTop{}



/*====================================
	コンセプト
======================================*/
#concept{}
#concept > .inner{}
#concept .flexBox .copy{ margin:0 auto 7%;}
#concept .flexBox .txtBox{}
#concept .flexBox .txtBox .founder{}
#concept .flexBox .txtBox .founder .txt{ font-size:100%;}
#concept .flexBox .txtBox .founder .name{}
#concept .flexBox .txtBox .founder .name span{}


/*====================================
	contentsBnr
======================================*/
 #contentsBnr{}


/*====================================
	学園トピックス（新着情報）
======================================*/
#news{}
#news > .inner{}
#news .newsArea{}
#news .newsList .btn01{}
#news .newsList .btn01 a{}

/*新着情報 一覧*/
.newsList{}
.newsList > ul{ margin:0 0 20px;}
.newsList > ul > li{ padding:15px 5% 15px 0;}
.newsList > ul > li > a{ display:block;}
.newsList > ul > li > a::after{ content:""; display:block; border:4px solid transparent; border-left:5px solid #003978; position:absolute; right:2%; top:50%; transform:translate(0,-50%);}
.newsList > ul > li > a .date,
.newsList > ul > li > a .ctgry{ display:inline-block; vertical-align:middle; font-size:90%;}
.newsList > ul > li > a .title{ display:block;}
.newsList > ul > li > a .date{ padding:0 5px 0 0;}
.newsList > ul > li > a .ctgry{}
.newsList > ul > li > a .ctgry > span{ width:90px; font-size:80%; padding:4px 0;}
.newsList > ul > li > a .title{ padding:5px 0 0;}


/*=========================================
	school
=========================================*/
#school{}
#school ul{}
#school ul.bnrList > li{}

/*=========================================
	subContents
=========================================*/
#subContents{}
#subContents > .inner{ width:80%;}
#subContents ul{}
#subContents ul > li{}







	
}