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


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

ページビジュアル

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

#page-visual {
	background: url("../images/guide/main_bg.png") no-repeat;
	background-size: cover;
	width: 100%;
}
#page-visual div{
	padding: 60px 0 80px 0;
	text-align: center;
}
#page-visual p{
	width: 1024px;
	margin: 0 auto;
	text-align: left;
	box-sizing: border-box;
	padding: 5px 0 0 5px;
	color:#fff;
}
#page-visual a{
	color:#fff;
}

#message h2,
#spirit h2,
#history h2,
#uniform h2,
#facility h2,
#access h2{
	font-size: 2.1em;
	color: #036EB8;
	text-align: center;
	font-weight: bold;
	margin-bottom: 80px;
}

.main-img{
	width: 1024px;
	margin: 0 auto;
}
.main-img img{
	width: 100%;
}

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

扉ボタン

--------------------------------------------------------------------------------*/
#page_btn{
	width: 1024px;
	margin: 60px auto;
}
#page_btn .page_btn-list .fl-item{
	width: 326px;
	margin-right: 20px;
	margin-bottom: 20px;
	border: 1px solid #036EB8;
}
#page_btn .page_btn-list .fl-item:nth-child(3),
#page_btn .page_btn-list .fl-item:last-child{
	margin-right: 0;
}
#page_btn .fl-item dt img{
	width: 100%;
	/*margin-top: -1px;*/
}
#page_btn .fl-item dd{
	position: relative;
	top: 0;
	left: 0;
	box-sizing: border-box;
	padding: 10px;
}
#page_btn .page_btn_item-title{
	font-size: 1.2em;
	color: #036EB8;
}
#page_btn .page_btn_item-icon{
	position: absolute;
	bottom: 10px;
	right: 10px;
}

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

学校案内パンフレット

--------------------------------------------------------------------------------*/
#pamphlet{
	width: 1024px;
	margin: 80px auto 120px;
	text-align: center;
	font-size:108%; 
}
#pamphlet .request_btn{
	background-color: #036EB8;
	margin: 20px auto 60px auto;
	padding:10px 0;
	text-align: center;
}
#pamphlet .request_btn:hover{
	background-color: #0082dc;
}
#pamphlet .request_btn a{
	display:block;
	color:#fff;
	font-size:108%; 
}
#pamphlet .request_tel{
	color: #036EB8;
	margin: 20px auto;
	font-weight: bold;
	font-size:230%;
}


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

学校長メッセージ

--------------------------------------------------------------------------------*/
#message{
	margin: 80px auto 120px;
}
#message .container{
	width: 860px;
}
#message dd{
	margin-top: 10px;
	font-size: 16px;
}
#message div.fl-item{
	font-size: 16px;
	margin-left: 38px;
}

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

建学の精神

--------------------------------------------------------------------------------*/
#spirit{
	margin: 80px auto 120px;
}
#spirit p{
	font-size: 16px;
}
#spirit .spi_first{
	margin: 50px auto;
	width: 800px;
}
#spirit .spi_first h2,
#spirit .spi_second h2,
#spirit .spi_third h2{
	margin-bottom: 50px;
}

#spirit .spi_second{
	background-color: #F0F0F0;
}
#spirit .spi_second .container{
	width: 378px;
	margin: 0 auto;
	padding-top: 50px;
	padding-bottom: 50px;
}

#spirit .spi_third{
	width: 800px;
	margin: 50px auto;
}
#spirit .spi_third > p{
	margin-bottom: 50px;
}
#spirit .spi_third .container{
	width: 800px;
	margin: 0 auto;
}
#spirit .spi_third .fl-item{
	width: 390px;
	margin-right: 20px;
}
#spirit .spi_third .fl-item.cl-item{
	margin-right: 0;
}
#spirit .spi_third .fl-item img{
	width: 100%;
}
#spirit .fl-item_link a{
	color: #036EB8;
}
#spirit .fl-item:after{
	content: "";
	clear: both;
	display: block;
}
#spirit .fl-item p{
	margin-top: 10px;
}
#spirit .fl-item .fl-item{
	width: 50%;
}
#spirit .fl-item .fr-item{
	float: right;
	width: 35%;
	text-align: right;
}

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

沿革

--------------------------------------------------------------------------------*/
#history{
	margin: 80px auto 120px;
}

#history .container{
	width: 800px;
}
#history .dire{
	margin: 50px 0;
}
#history .dire .txt{
	margin-left: 49px;
	margin-top: 61px;
	font-size: 16px;
	line-height: 2.5em;
}
#history .his_pic img{
	clear: both;
	width: 100%;
	display: block;
	margin-bottom: 30px;
}
#history .his_pic{
	width: 360px;
	margin-right: 20px;
}
#history .his_txt{
	/*width: 420px;*/
	width:100%;
	font-size: 16px;
}
#history .his_txt ul li{
	/*margin-bottom: 44px;*/
	line-height: 1.2em;
	background-color: #F0F0F0;
	margin-bottom: 10px;
	padding: 10px;
}
#history .his_txt ul li span,
#history .his_txt ul li > p.fl-item{
	margin-right: 10px;
}
#history .his_txt ul li:first-child span{
	margin-right: 1px;
}
#history .his_txt ul li ul{
	margin-top: 1.2em;
}
#history .his_txt ul li ul li{
	margin-bottom: 0;
	line-height: 1.2em;
}

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

制服

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

#uniform{
	margin: 80px auto 120px;
	font-size: 16px;
}
.uni_first{
	margin-top: 20px;
}
.uni_first > p{
	text-align: center;
	margin: 20px 0 40px;
}

.uni-list li{
	width: 328px;
	margin-right: 20px;
	margin-bottom: 60px;
}
.uni-list li:nth-child(3n){
	margin-right: 0;
}
.uni-list li p{
	text-align: center;
	color: #036EB8;
}
.uni_second{
	background-color: #F0F0F0;
}
.uni_second .container{
	padding: 30px 0;
	width: 880px;
}
.uni_second .uni_second-img img{
	width: 100%;
}
.uni_second .uni_second-img{
	width: 328px;
	margin-right: 23px;
}
.uni_second .uni_second-txt{
	width: 528px;
	margin-top: 30px;
}
#uniform .uni_second .uni_second-txt h2{
	font-size: 20px;
	text-align: left;
	margin-bottom: 16px;
}

.uni_third{
	margin: 80px auto;
}
.uni_third h2{
	margin: 80px auto 20px;
}
.uni_third .join-title{
	text-align: center;
	margin-bottom: 16px;
}

.uni_third .fl-item{
	width: 326px;
	margin-right: 20px;
	border: 1px solid #036EB8;
}
.uni_third .fl-item img{
	width: 100%;
}
.uni_third .fl-item:last-child{
	margin-right: 0;
}
.uni_third .fl-item dd{
	position: relative;
	top: 0;
	left: 0;
	box-sizing: border-box;
	padding: 10px;
}
.uni_third .join_item-title{
	font-size: 1.2em;
	color: #036EB8;
	font-weight: bold;
}

.uni_third .join_item-icon{
	position: absolute;
	bottom: 10px;
	right: 10px;
}
.uni_third .join-list img.pc-only:hover{
	opacity:0.7;
}

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

施設

--------------------------------------------------------------------------------*/
#facility{
	margin: 80px auto 120px;
}
#facility .main-img{
	margin-bottom: 100px;
}
#facility .container{
	width: 1024px;
}
#facility .faci_first{
	margin-bottom: 50px;
}
#facility dl{
	width: 328px;
	margin-right: 20px;
	margin-bottom: 70px;
}
#facility dl.mr-none{
	margin-right: 0;
}
#facility dl dt img{
	width: 100%;
}
#facility dl dd{
	box-sizing: border-box;
	padding: 0 15px;
}
#facility .faci-list_title{
	font-size: 16px;
	color: #036EB8;
	text-align: center;
	margin-top: 10px;
}
#facility .faci-bg{
	background-color: #F0F0F0;
	box-sizing: border-box;
	padding: 70px 0;
	margin-bottom: 60px;
}
#facility .faci-line,
#facility .faci-line img{
	width: 100%;
}
#facility .faci-line{
	margin-bottom: 40px;
}
.faci_fourth{
	width: 676px;
	margin-right: 20px;
}
.faci_fifth{
	width: 328px;
}

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

アクセス

--------------------------------------------------------------------------------*/
#access{
	margin: 80px auto 120px;
}
#access .acce_first{
	position: relative;
	top: 0;
	left: 0;
}
#access .acce_first h2,
#access .acce_second h2,
#access .acce_third h2,
#access .acce_fourth h2{
	margin-bottom: 10px;
}
#access .container{
	width: 680px;
}
#access .psa{
	position: absolute;
	z-index: -2;
}
#access .psa-item1{
	left: -83px;
	top: 36px;
}
#access .psa-item2{
	right: -2px;
	top: 34px;
}
#access .acce_first p{
	margin-bottom: 46px;
}
#access p{
	text-align: center;
	font-size: 16px;
}
#access .bg-gr{
	background-color: #F0F0F0;
}
#access .acce_second{
	padding: 30px 0;
	margin: 60px auto;
}
#access .acce_third p,
#access .acce_second p{
	margin-bottom: 60px;
}
#access .acce_third{
    margin-top: 60px;
	margin-bottom: 80px;
}
#access .acce_fourth h2{
	margin-bottom: 30px;
}
#access .acce_first .acce-map{
	margin: 0 auto;
	width: 680px;
}
#access .acce_fourth .acce-map{
	text-align: center;
}
#access .acce_btn{
	width: 328px;
	box-sizing: border-box;
	padding: 10px 20px;
	background-color: #036EB8;
	margin: 0 auto 50px;
	text-align: center;
}
#access .acce_btn:hover{
	background-color: #0082dc;
}
#access .acce_btn a{
	color: #fff;
}
#access .acce_btn a img{
	margin-right: 10px;
}


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

767px以下

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

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

	
#page-visual div{
	padding: 20px 0 40px 0;
}
#page-visual p{
	width: 100%;
}
	
#page_btn{
	width: 100%;
}	
#page_btn{
	width: 100%;
	margin: 60px auto 0px auto;
}
#page_btn .page_btn-list .fl-item{
	width: 90%;
	margin: 0 5% 20px 5%;
	border: 1px solid #036EB8;
}

#pamphlet{
	width: 100%;
	margin: 0px auto 60px auto;
}
#pamphlet .request_btn{
	width: 90%;
	margin: 20px 5% 20px 5%;
}

#pamphlet .request_tel{
	font-size:200%;
}

.main-img{
	width: 100%;
	margin: 0 auto;
}
#page_btn .fl-item dt img{
	margin-top: 0;
}
	
#message h2,
#spirit h2,
#history h2,
#uniform h2,
#facility h2,
#access h2{
	font-size: 1.8em;
	color: #036EB8;
	text-align: center;
	font-weight: bold;
	margin-bottom: 40px;
}
/*---------------------------message----------------------------------*/
#message{
	margin: 40px auto 60px;
}
#message .fl-item{
	float: none;
}
#message dt img{
	width: 100%;
}
#message .container{
	width: 90%;
}
#message div.fl-item{
	font-size: 16px;
	margin-left: 0;
	margin-top: 30px;
}

/*---------------------------spirit----------------------------------*/
#spirit{
	margin-top: 40px;
	margin-bottom: 60px;
}
#spirit .spi_first h2,
#spirit .spi_second h2,
#spirit .spi_third h2{
	margin-bottom: 20px;
}
#spirit p{
	font-size: 16px;
}
#spirit .spi_first{
	margin: 50px auto;
	width: 90%;
}

#spirit .spi_second{
	background-color: #F0F0F0;
}
#spirit .spi_second .container{
	width: 90%;
	margin: 0 auto;
	padding-top: 70px;
	padding-bottom: 70px;
}

#spirit .spi_third{
	width: 90%;
	margin: 50px auto;
}
#spirit .spi_third > p{
	margin-bottom: 50px;
}
#spirit .spi_third .container{
	width: 90%;
	margin: 0 auto;
}
#spirit .spi_third .fl-item{
	width: 100%;
	margin-right: 0;
	margin-bottom: 50px;
	float: none;
}
#spirit .spi_third .fl-item img{
	width: 100%;
}
#spirit .fl-item .fl-item{
	width: 30%;
	float: left;
}
#spirit .fl-item .fr-item{
	float: right;
	width: 60%;
}
	
/*---------------------------history----------------------------------*/

#history{
	margin: 40px auto 60px;
}
#history .container{
	width: 90%;
}
#history .dire .fl-item{
	text-align: center;
	float: none;
}
#history .dire .txt{
	margin-left: 0;
	margin-top: 30px;
	line-height: 1.5em;
}
#history .dire img{
	width: 82%;
}
#history .his_txt{
	width: 100%;
	font-size: 16px;
}
#history .his_txt img{
	width: 100%;
}
#history .his_txt ul li{
	margin-bottom: 10px;
	line-height: 1.2em;
	padding: 5px 10px;
}
	
/*---------------------------uniform----------------------------------*/

#uniform{
	margin: 40px auto 60px;
	font-size: 16px;
}
#uniform .container{
	width: 90%;
}
.uni-list li,
.uni-list li:nth-child(3n){
	width: 100%;
	margin-right: 0;
}
.uni-list li img{
	width: 100%;
}
.uni_second .container{
	padding: 30px 0;
}
.uni_second .uni_first img{
	width: 100%;
}
.uni_second .uni_second-img img{
	width: 100%;
}
.uni_second .uni_second-img{
	width: 100%;
	margin-right: 0;
}
.uni_second .uni_second-txt{
	width: 90%;
	margin-top: 30px;
}
#uniform .uni_second .uni_second-txt h2{
	font-size: 20px;
	text-align: center;
	margin-bottom: 16px;
}

.uni_third{
	margin: 40px auto;
}
.uni_third h2{
	margin: 40px auto 20px;
}
.uni_third .join-title{
	text-align: center;
	margin-bottom: 16px;
}

.uni_third .fl-item{
	width: 100%;
	margin-right: 0;
	margin-bottom: 30px;
}
.uni_third .fl-item dt img{
	width: 100%;
}
.uni_third .join_item-icon{
	position: absolute;
	bottom: 10px;
	right: 10px;
}
.uni_third .join-list img.pc-only:hover{
	opacity:0.7;
}

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

施設

--------------------------------------------------------------------------------*/
#facility{
	margin: 40px auto 60px;
}
#facility .main-img{
	margin-bottom: 100px;
	width: 90%;
}
#facility .main-img img{
	width: 100%;
}
#facility .container{
	width: 90%;
}
#facility dl{
	width: 100%;
	margin-right: 0;
	margin-bottom: 70px;
}
#facility dl dt img{
	width: 100%;
}
#facility .faci-line,
#facility .faci-line img{
	width: 100%;
}
.faci_fourth{
	width: 100%;
	margin-right: 20px;
}
.faci_fifth{
	width: 100%;
}

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

アクセス

--------------------------------------------------------------------------------*/
#access{
	margin: 40px auto 60px;
}
#access .acce_first{
	position: relative;
	top: 0;
	left: 0;
}
#access .acce_first h2,
#access .acce_second h2,
#access .acce_third h2,
#access .acce_fourth h2{
	margin-bottom: 10px;
}
#access .container{
	width: 90%;
}
#access .psa{
	position: relative;
	top: 0;
	left: 0;
	float: left;
	width: 50%;
	margin: 0 auto 60px;
	text-align: center;
}
#access .psa-item2{
	right: initial;
}
#access .acce_first .acce-map img,
#access .acce_fourth .acce-map img{
	width: 100%;
}
#access .acce_third .acce-map{
	width: 100%;
	overflow-x: scroll;
}

#access .acce_first p{
	margin-bottom: 46px;
}
#access p{
	text-align: center;
	font-size: 16px;
}
#access .bg-gr{
	background-color: #F0F0F0;
}
#access .acce_second{
	padding: 30px 0;
	margin: 60px auto;
}
#access .acce_third p{
	margin-bottom: 60px;
}
#access .acce_third .acce-map p.sp-only{
	text-align: left;
	width: 130%;
	margin-bottom: 10px;
}
#access .acce_third{
    margin-top: 60px;
	margin-bottom: 80px;
}
#access .acce_fourth h2{
	margin-bottom: 30px;
}
#access .acce_first .acce-map,
#access .acce_fourth .acce-map img{
	margin: 0 auto;
	width: 100%;
}
#access .acce_btn{
	width: 90%;
	margin: 0 auto 50px;
}
}