/* ==========================================================================
   Public 2023/09/04 10:40
============================================================================= */
@import url('https://use.fontawesome.com/releases/v5.8.2/css/all.css');
body, html { width:100%; height:100%; }


body { 
	font:14px/1.5 Arial, Meiryo, "Meiryo UI", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif;
	letter-spacing:0.06em;
	color:#333;
	background-color:#e9e9e9;
}


@media screen and (max-width:1000px) {
	body { font-size:120%; }
}


img {
	border:none;
	vertical-align:middle;
}


*, *:after, *:before {
  -webkit-box-sizing:border-box;
     -moz-box-sizing:border-box;
          box-sizing:border-box;
}


a {
	color:#545454;
	text-decoration:none;
}
a:hover { color:#dd5b6a; }


.clearfix {
    clear: both;
    display: table;
}

#gotop {
    display:none;
    position:fixed;
    right:10px;
    bottom:20px;
    cursor:pointer;
	z-index:2;
}

select, input,textarea {
	border:#ccc 1px solid;
	border-radius:5px;
	vertical-align:middle;	
	-webkit-box-shadow: 0 1px 1px 1px rgba(0,0,0,0.05);
    -moz-box-shadow: 0 1px 1px 1px rgba(0,0,0,0.05);
    box-shadow: 0 1px 1px 1px rgba(0,0,0,0.05);
}
select { padding:7px; }
input {	padding:8px; }
textarea { width:97.8%; height:20vh; padding:8px; }

::placeholder { opacity:0.7; }
:-ms-input-placeholder { color:#aaa; }
::-ms-input-placeholder { color:#aaa; }


@media screen and (max-width:780px) {
	input, select {
		margin:0;		
	    -webkit-box-shadow: 0 1px 1px 1px rgba(0,0,0,0);
        -moz-box-shadow: 0 1px 1px 1px rgba(0,0,0,0);
        box-shadow: 0 1px 1px 1px rgba(0,0,0,0);
	}
	::placeholder { color:#ddd; }
    :-ms-input-placeholder { color:#aaa; }
    ::-ms-input-placeholder { color:#aaa; }
	textarea { width:100%; height:50vh; }
}






/* header
--------------------------------------------------------------------------------------------------------------------------------*/
header {
	width:100%;
	height:350px;
	background:url(../img/top-bg.png) center center no-repeat;
}

header #area { margin:0 auto; width:1000px; }

header .logo {
	float:left;
	width:380px;
	text-align:center;
	padding-top:100px;
}

header .school_name {
	margin: 0 auto;
	width:85%;
	color:#ffdb48;
	font-size:30px;
	letter-spacing:2px;
	background:#571300;
	border-radius:30px;
	line-height:50px;
	margin-top:15px; 
}

header .photo {
	float:right;
	width:620px;
	text-align:center;
	padding-top:15px;
}

@media screen and (max-width:1000px) {
	header { height:270px; }
	header #area { width:100%; }
	header .logo { width:45%; min-width:310px; padding-top:60px; }
	header .logo img { width:200px; }
	header .school_name { width:250px; font-size:25px; }
	header .photo { width:55%; max-width:calc(100% - 310px); overflow:hidden; padding-top:0; }
	header .photo img { height:250px; }
}

@media screen and (max-width:480px) {
	header { height:200px; background:url(../img/top-bg.png) center right no-repeat; }
	header .photo { display:none; }
	header .logo { width:100%; padding-top:25px; }
}



/* section
--------------------------------------------------------------------------------------------------------------------------------*/
section {
	margin:0 auto;
	width:90%;
	max-width:1400px;
	margin-bottom:3rem; 
}

.p_line {
	width:100%;
	height:1px;
	border-bottom:#bbb 1px dashed;
	margin:1.5rem 0;
}

.title {
	width:100%;
	font-size:2vw;
	color:#571300;
	font-weight:600;
	border-bottom:#ccc 4px dotted;
	padding-left:1vw;
	padding-bottom:20px;
	margin-bottom:20px;
}
.title img { width:3vw; }

@media screen and (max-width:1000px) {
	.title { font-size:23px; }
	.title img { width:35px; }
}





/* search
--------------------------------------------------------------------------------------------------------------------------------*/
#search {
	width:100%;
	text-align:center;
	padding-bottom:1rem;
	font-size:120%;
	margin-bottom:10px;
}

#search input, #search select { margin-right:5px; }
#search .btn { padding:7px 10px; border-radius:5px; font-size:90%; }


@media screen and (max-width:780px) {
	#search input, #search select, #search .btn { margin-right:0; border-radius:0!important;   }
	#search input, #search select { background:#333; color:#FFF; height: 60px; }
	#search select { width:120px; }
	#search input { width:calc(100% - 180px); }
	#search .btn {
		width:60px;
		padding:0;
		line-height:58px;
		-webkit-box-shadow: 0 1px 1px 1px rgba(0,0,0,0);
        -moz-box-shadow: 0 1px 1px 1px rgba(0,0,0,0);
        box-shadow: 0 1px 1px 1px rgba(0,0,0,0);
	}
	#search .btn i { padding:0; }
	.no_780 { display:none; }
	
	
}

@media screen and (max-width:540px) {
	#search select { width:100%; }
	#search input { width:calc(100% - 60px); }
}



/* list
--------------------------------------------------------------------------------------------------------------------------------*/
.e_box {
	position:relative;
	float:left;
	width:18%;
	margin:1%;
	border-radius:8px;
	overflow:hidden;
	background: #ffffff;
    -webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.35);
    -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.35);
    box-shadow: 0 1px 5px rgba(0,0,0,0.35);
}
.e_box:hover {
	opacity:0.8;
	-webkit-box-shadow: 0 1px 5px rgba(255,120,0,1);
    -moz-box-shadow: 0 1px 5px rgba(255,120,0,1);
    box-shadow: 0 1px 5px rgba(255,120,0,1);
}

.e_box_close { -webkit-filter:grayscale(1); }


.e_box_photo {
	width:100%;
	height:0;
	padding-bottom:80%;
	overflow:hidden;
}

.e_box_info {
	width:100%;
	padding:1rem;
	text-align:right;
	color:#2a9fb0;
	font-size:13px;
}
.e_box_info_class {
	/*width:60px;*/
	text-align:center;
	font-size:12px;
	color:#FFF;
	background:#571300;
	padding:2px 10px;
	border-radius:3px;
	margin-bottom:5px;
}

.e_box_info_t {
	width:100%;
	display: -webkit-box;
	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
	height:45px;
	font-size:18px;
	color:#222;
	line-height:23px;
	text-align:left;
	overflow: hidden;
	margin-bottom:10px;
}

.e_box_line {
	width:100%;
	height:20px;
	margin-bottom:10px;
	border-radius:10px;
	overflow:hidden;
	background:#eee;
	-webkit-box-shadow: inset 1px 1px 4px rgba(0,0,0,0.23);
    -moz-box-shadow: inset 1px 1px 4px rgba(0,0,0,0.23);
    box-shadow: inset 1px 1px 4px rgba(0,0,0,0.23);	
}
.e_box_line_p {
	height:20px;
	color:#FFF;
	font-size:13px;
	line-height:20px;
	text-align:left;
	padding-left:10px;
	background:#ff7800;
	-webkit-box-shadow: inset 1px 1px 4px rgba(0,0,0,0.23);
    -moz-box-shadow: inset 1px 1px 4px rgba(0,0,0,0.23);
    box-shadow: inset 1px 1px 4px rgba(0,0,0,0.23);	
}

.e_box_m {
	display:table;
	width:100%;
	color:#8ad6de;
	font-size:12px;
	background:#444;
	text-align:center;
}
.e_box_m_b {
	display:table-cell;
	width:50%;
	line-height:20px;
	padding:10px 0;
}
.e_box_m_b i { color:#FFF; font-size:16px; letter-spacing:0; font-family:Arial; }

.e_box_full {
	position:absolute;
	top:0px;
	left:0px;
	z-index:2;
}


@media screen and (max-width:1600px) {
	.e_box { width:23%; }
}

@media screen and (max-width:1200px) {
	.e_box { width:30%; margin:1.5%; }
}

@media screen and (max-width:960px) {
	.e_box { width:45%; margin:2.5%; }
}

@media screen and (max-width:560px) {
	.e_box { width:100%; margin:4% 0; }
}


/* info
--------------------------------------------------------------------------------------------------------------------------------*/
.info_photo {
	float:left;
	width:45%;
	border-radius:8px;
	overflow:hidden;
	border:#fff 4px solid;
}
.info_photo img { width:100%; }

.info_title {
	float:right;
	width:50%;
	margin-left:5%;
}
.info_title i { color:#db5000; }

.info_title_t {
	font-size:180%;
	color:#007586;
	line-height:130%;
	margin-bottom:1rem;
}

.info_title_info {
	width:100%;
	padding:1.5rem 0;
}

.info_btn { padding-bottom:80px; }

.info_btn a {
	display:inline-block;
	width:50%;
	color:#FFF;
	font-size:150%;
	text-align:center;
	padding:12px;
	border-radius:5px;
	background:#f87500;
	border:2px solid #FFF;
    -webkit-box-shadow: 0 0 0 2px rgba(248,117,0,1);
    -moz-box-shadow: 0 0 0 2px rgba(248,117,0,1);
    box-shadow: 0 0 0 2px rgba(248,117,0,1);
	margin-top:1rem;
}
.info_btn a:hover {
	background:#571300;
	-webkit-box-shadow: 0 0 0 2px #434a54;
    -moz-box-shadow: 0 0 0 2px #434a54;
    box-shadow: 0 0 0 2px #434a54;
}

.info_btn i { font-size:150%; color:#FFF; padding-right:5px; vertical-align:middle;  }


@media screen and (max-width:1000px) {	
	.info_title_t { font-size:150%; }
}

@media screen and (max-width:860px) {
	.info_photo, .info_title { width:100%; float:none; margin:0; }
	.info_title { margin-top:2rem; }
	.info_btn a { width:100%; }	
}



/* gallery
--------------------------------------------------------------------------------------------------------------------------------*/
.img-responsive {
  display: block;
  width: 100%;
  height:auto;
}

.grid article {
  background-color: #FFFFFF;
  display: block;
  float: left;
  margin: 1%;
  width: 23%;
}

@media (max-width: 1024px) {
  .grid article {
    width: 31.3%;
  }
}

@media (max-width: 767px) {
  .grid article {
    width: 48%;
  }
}

@media (max-width: 479px) {
  .grid article {
    margin: 2% 0;
    width: 100%;
  }
}



/* form
----------------------------------------------------------------------*/
.form input[type="text"], .form select{ width:100%; height:45px; }

.td1 {
	float:left;
	width:33.3333333333%;
	padding:0 30px 1.5rem 0;
}

.td2 {
	float:left;
    width:66.66666666%;
	padding:0 30px 1.5rem 0;
}

.td3 {
	width:100%;
    padding-bottom:1.5rem;
}

.td1 i, .td2 i, .td3 i { color:#eb4d00; font-weight:bold; }



@media screen and (max-width:860px) {
	.td1, .td2, .td3 { width:100%; float:none; padding:0 0 1.5rem 0; }
}


.text1 { color:#db5000; font-weight:600; }
.text2 { color:#db5000; font-size:110%; }




/* print
----------------------------------------------------------------------*/
.print_box { float:left; width:50%; }
.print_box img { width:70%; }
.print_atm { width:100%; background:#FFF; padding:30px; }
.print_title {
	width:100%;
	color:#007586;
	font-size:130%;
	border-top:#ccc 1px dashed;
	border-bottom:#ccc 1px dashed;
	padding:8px 0;
	text-align:center;
	margin-bottom:1rem;
}


.print_btn1 a {
	float:left;
	display:block;
	width:46%;
	color:#FFF;
	font-size:150%;
	text-align:center;
	padding:12px;
	border-radius:5px;
	background:#f87500;
	border:2px solid #FFF;
    -webkit-box-shadow: 0 0 0 2px rgba(248,117,0,1);
    -moz-box-shadow: 0 0 0 2px rgba(248,117,0,1);
    box-shadow: 0 0 0 2px rgba(248,117,0,1);
	margin:0 2% 1rem 2%;
}
.print_btn1 a:hover {
	background:#571300;
	-webkit-box-shadow: 0 0 0 2px #434a54;
    -moz-box-shadow: 0 0 0 2px #434a54;
    box-shadow: 0 0 0 2px #434a54;
}

.print_btn2 a {
	float:left;
	display:block;
	width:46%;
	color:#FFF;
	font-size:150%;
	text-align:center;
	padding:12px;
	border-radius:5px;
	background:#5e889b;
	border:2px solid #FFF;
    -webkit-box-shadow: 0 0 0 2px #5e889b;
    -moz-box-shadow: 0 0 0 2px #5e889b;
    box-shadow: 0 0 0 2px #5e889b;
	margin:0 2% 1rem 2%;
}
.print_btn2 a:hover {
	background:#571300;
	-webkit-box-shadow: 0 0 0 2px #434a54;
    -moz-box-shadow: 0 0 0 2px #434a54;
    box-shadow: 0 0 0 2px #434a54;
}

.print_btn1 i, .print_btn2 i { font-size:150%; color:#FFF; padding-right:5px; vertical-align:middle;  }


@media screen and (max-width:1000px) {
	.print_btn1 a, .print_btn2 a { font-size:120%; }
}


@media screen and (max-width:880px) {
	.print_box { float:none; width:100%; margin-bottom:1rem; }
}

@media screen and (max-width:640px) {
	.print_box img { width:100%; padding-top:20px; }
	.print_btn1 a, .print_btn2 a { width:100%; margin:0 0 1rem 0; }
}


/* table
----------------------------------------------------------------------*/
.list { width:100%; }
.list tr:nth-child(odd) { background:#FFF; }
.list tr:nth-child(even) { background:#f1f8fc; }
.list th, .list td { padding:5px; border:#bbb 1px solid; vertical-align:middle; text-align:center; }
.list th { background:#5e889b; color:#FFF; }
.list td:nth-child(1), .list td:nth-last-child(1) { width:50px; }
.list td:nth-child(2) { text-align:left; }
.list td a { color:#c15b00; }
.list td a:hover { color:#f87500; }
.list td i { font-size:120%; }

.icon_ok { color:#7fa512; }
.icon_time { color:#f87500; }
.icon_close { color:#c01700; }
.icon_ok, .icon_time, .icon_close { font-size:120%; }


@media screen and (max-width:1000px) {
	.list { font-size:90%; }
	.list td:nth-child(3) { min-width:100px; }
	.list td:nth-child(4), .list td:nth-child(5), .list td:nth-child(6), .list th:nth-child(4), .list th:nth-child(5), .list th:nth-child(6) { display:none; }
}

@media screen and (max-width:640px) {
	.list { font-size:80%; }
	.list td:nth-child(3) { min-width:80px; }
	.list td:nth-child(1), .list td:nth-last-child(1) { width:40px; }
}


/* login
----------------------------------------------------------------------*/
#login {
	background:url(../img/login-bg.png) center center no-repeat fixed;
	background-size:cover;
}

.pp1, .pp2 { position:fixed; bottom:0; width:25%; z-index:-1;  }
.pp1 img, .pp2 img { width:100%; }

.pp1 { left:0; }
.pp2 { right:0; }

.logo {
	text-align:center;
	padding-top:5%;
}

#login .login img { width:100%; max-width:252px; }

#login .school_name {
	margin: 0 auto;
	width:270px;
	color:#ffdb48;
	font-size:30px;
	text-align:center;
	letter-spacing:2px;
	background:#571300;
	border-radius:30px;
	line-height:50px;
	margin-top:15px;
	margin-bottom:30px;
}



#login .login { margin:0 auto; width:70%; }

#login .left { float:left; width:30%; text-align:center; }
#login .right { float:right; width:70%; padding-left:5%; }
#login .right h1 { font-weight:700; text-align:center; font-size:1vw; }
#login .right ul { list-style-type:cjk-ideographic; padding-left:2.5rem; }
#login .right li { padding:0.3vw 0; font-size:0.85vw; }




#login form { text-align:left; }
#login input { width:100%; margin-bottom:10px; }
#login form img { padding-left:5px; padding-bottom:10px;  }

#login .btn { width:100%; padding-top:10px; text-align:center; }
#login .btn a { display:inline-block; width:31%; text-align:center; padding:10px 0; color:#FFF; background:#f87500; border-radius:6px; border:#FFF 1px solid; }
#login .btn a:hover { background:#571300; }

#login .btn input[type="submit"] { display:inline-block; width:31%; text-align:center; padding:10px 0; color:#FFF; background:#f87500; border-radius:6px; border:#FFF 1px solid; }
#login .btn input[type="submit"]:hover { background:#571300; }




#login ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: red;
  opacity: 1; /* Firefox */
}
#login :-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: red;
}
#login ::-ms-input-placeholder { /* Microsoft Edge */
  color: red;
}



@media screen and (max-width:1000px) {
	#login { background:url(../img/login-bg-sp.png) center center no-repeat fixed; background-size:cover; }
	.pp1, .pp2 { width:40%; }
	.pp1 { top:-10px; left:0; }
	.pp1 img {
		   -moz-transform:scaleY(-1);
           -webkit-transform:scaleY(-1);
           -o-transform:scaleY(-1);
           transform:scaleY(-1);
	}
	.pp2 { bottom:0; right:0; }
	#login .btn a { font-size:90%; }
	
	#login .login { margin:0 auto; width:85%; padding-bottom:50px; }
	#login .left, #login .right { float:none; width:100%; }
	#login .right { padding-left:0; }
	#login .right h1 { font-size:18px; padding-bottom:10px; }
	#login .right li { padding:5px 0; font-size:16px; }
}








/* btn
--------------------------------------------------------------------------------------------------------------------------------*/
.btn_o {
	display:inline-block;
	color:#FFF;
	letter-spacing:2px;
	text-shadow: 1px 1px #de6119, -1px -1px #de6119;
	text-align:center;
    background:#de6119;
	vertical-align: middle;
	-webkit-box-shadow: 0 1px 5px 1px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 1px 5px 1px rgba(0,0,0,0.2);
    box-shadow: 0 1px 5px 1px rgba(0,0,0,0.2);
}
.btn_o:hover {
	color:#FFF;
	background:#841d00;
}
.btn_o i { padding-right:5px; font-size:120%;vertical-align:text-bottom; }