@charset "UTF-8";
/* CSS Document */
main {
	min-width: 1280px;
	margin-top: 0px;
}

article {
width: 985px;
height: auto;
display: block;
margin: 0px auto;
background-color: hsla(0,100%,99%,0.00);
box-shadow: -2px 0 30px 0px rgba(0, 0, 0, .2);
padding-bottom: 80px;
position: relative;
top: 0px;
z-index: -1;
}

.header {
background-image: url("../image2020/pc/01_1_01/header_bgimg.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
margin: 0px auto;
width: 1280px;
height: 362px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
position: relative;
top:120px;
z-index: 5;
}

.header h3 {
background-image: url("../image2020/pc/01_1_01/header_01pc.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
margin: 0px auto;
width: 985px;
height: 317px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
position: relative;
top:40px;
}

.learning_environment,
.pickup,
.north_campus,
.safety {
width: 985px;
height: auto;
display: block;
margin: 0px auto 0px auto;
padding-bottom: 100px;
}

.learning_environment h4 {
background-image: url("../image2020/pc/01_1_02/About-Us02_1.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
margin: 0px auto -80px auto;
width: 985px;
height: 159px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
padding-top: 280px;
}

.learning_environment .school_building {
background-image: url("../image2020/pc/01_1_02/About_Us02_2.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
margin: 0px auto 0px auto;
width: 817px;
height: 286px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
}

.learning_environment h5 {
background-image: url("../image2020/pc/01_1_02/About_Us02_3.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
margin: 80px auto 40px auto;
width: 400px;
height: 104px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
}

.learning_environment p,
.north_campus p,
.safety p {
width: 706px;
height: auto;
display: block;
margin: 50px auto 20px auto;
font-size: 17px;
line-height : 33px;
letter-spacing : -0.8px;
text-align: justify;
text-justify: inter-ideograph;
}

.pickup h4 {
background-image: url("../image2020/pc/01_1_02/About_Us02_4.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
margin: 0px auto -80px auto;
width: 985px;
height: 159px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
padding-top: 280px;
}

.gray {
	width: 100vw;
    position: relative;
    left: 50%;
	background-position: center;
	margin: 50px auto 100px auto;
	padding:20px 0px 80px 0px;
    transform: translateX(-50%);
	background-color: hsla(0,0%,75%,.30);
	filter:contrast(1);
}

.gray .inner {
	display: block;
	margin: 0px auto;
	width: 985px;
    height: auto; 
	clear: both;
}

.gray h4 {
text-align: center;
padding: 40px 0px;
}

.gray h4 span {
background:#ffffff;
font-size: 24px;
font-weight: 600;
color: #000000;
}

.gray .inner ul {
width: 728px;
height: auto;
display: block;
margin: 0px auto;
}

.gray .inner li {
height: auto;
display: inline-block;
}

.gray .inner .facility1 {
background-image: url("../image2020/pc/01_1_02/About_Us02_5.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
margin: 10px 20px;
width: 324px;
height: 215px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
float: left;
}

.gray .inner .facility2 {
background-image: url("../image2020/pc/01_1_02/About_Us02_6.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
margin: 10px 20px;
width: 324px;
height: 215px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
}

.gray .inner .facility3 {
background-image: url("../image2020/pc/01_1_02/About_Us02_7.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
margin: 10px 20px;
width: 324px;
height: 215px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
float: left;
}

.gray .inner .facility4 {
background-image: url("../image2020/pc/01_1_02/About_Us02_8.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
margin: 10px 20px;
width: 324px;
height: 215px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
}

.gray .inner .facility5 {
background-image: url("../image2020/pc/01_1_02/About_Us02_9.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
margin: 10px 20px;
width: 324px;
height: 215px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
float: left;
}

.gray .inner .facility6 {
background-image: url("../image2020/pc/01_1_02/About_Us02_10.png");
background-repeat: no-repeat;
background-size: 100%;
margin: 10px 20px;
width: 324px;
height: 215px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
}

.gray .inner .facility7 {
background-image: url("../image2020/pc/01_1_02/About_Us02_11.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
margin: 10px 20px;
width: 324px;
height: 215px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
float: left;
}

.gray .inner .facility8 {
background-image: url("../image2020/pc/01_1_02/About_Us02_12.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
margin: 10px 20px;
width: 324px;
height: 215px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
}

.gray .inner .facility9 {
background-image: url("../image2020/pc/01_1_02/About_Us02_13.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
margin: 10px 20px;
width: 324px;
height: 215px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
float: left;
}

.gray .inner .facility10 {
background-image: url("../image2020/pc/01_1_02/About_Us02_14.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
margin: 10px 20px;
width: 324px;
height: 215px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
}


.gray .inner .facility11 {
background-image: url("../image2020/pc/01_1_02/About_Us02_15.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
width: 324px;
height: 215px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
float: none;
display: block;
margin: 10px auto;
}

.gray .inner .facility12 {
background-image: url("../image2020/pc/01_1_02/About_Us02_18.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
margin: 10px 20px;
width: 324px;
height: 215px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
float: left;
}

.gray .inner .facility13 {
background-image: url("../image2020/pc/01_1_02/About_Us02_19.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
margin: 10px 20px;
width: 324px;
height: 215px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
}

.gray .inner .facility14 {
background-image: url("../image2020/pc/01_1_02/About_Us02_20.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
margin: 10px 20px;
width: 324px;
height: 215px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
float: left;
}

.gray .inner .facility15 {
background-image: url("../image2020/pc/01_1_02/About_Us02_21.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
margin: 10px 20px;
width: 324px;
height: 215px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
}

.gray .inner .facility17 {
background-image: url("../image2020/pc/01_1_02/About_Us02_22_2.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
margin: 10px 20px;
width: 324px;
height: 215px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
float: left;
}

.gray .inner .facility16 {
background-image: url("../image2020/pc/01_1_02/About_Us02_22.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
margin: 10px 20px;
width: 324px;
height: 215px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
}



/*　最後一個　中央仕様
.gray .inner .facility17 {
background-image: url("../image2020/pc/01_1_02/About_Us02_22_2.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
width: 324px;
height: 215px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
float: none;
display: block;
margin: 10px auto;
}
*/

.gray .inner .accessmap {
margin: 0px auto 0px auto;
width: 725px;
height: 496px;
display: block;
}

.gray .inner .accessmap iframe {
width: 725px;
height: 496px;
display: block;
}

.gray .inner dl {
width: 300px;
height: auto;
display: block;
margin: 20px auto;
font-size: 20px;
}

.gray .inner dt {
width: 200px;
display: inline-block;
float: left;
}

.gray .inner dd {
width: 100px;
margin-left: 200px;
}

.gray .inner p {
width: 100%;
height: auto;
display: block;
text-align: center;
font-size: 20px;
padding: 20px 0px;
}

.gray .inner .kitacan {
background-image: url("../image2020/pc/01_1_02/About_Us02_23.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
margin: 80px auto 40px auto;
width: 700px;
height: 69px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
}

.north_campus h4 {
background-image: url("../image2020/pc/01_1_02/About_Us02_16.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
margin: 0px auto 0px auto;
width: 985px;
height: 159px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
}

.north_campus .hoshinosato {
background-image: url("../image2020/pc/01_1_02/About_Us02_17.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
margin: 0px auto 0px auto;
width: 817px;
height: 495px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
}


.safety h4 {
background-image: url("../image2020/pc/01_1_02/About_Us02_24.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
margin: 80px auto 80px auto;
width: 168px;
height: 47px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
}

.safety .attendance {
background-image: url("../image2020/pc/01_1_02/About_Us02_25.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
margin: 0px auto 0px auto;
width: 817px;
height: 286px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
}

.safety h5 {
background-image: url("../image2020/pc/01_1_02/About_Us02_26.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
margin: 80px auto 40px auto;
width: 819px;
height: 114px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
}

.safety .management {
width: 706px;
height: auto;
display: block;
margin: 50px auto 20px auto;
}


.safety .management figure {
width: 250px;
height: 189px;
display: block;
float: right;
margin: 0px 4px 0px 8px;
}

.safety .management p {
font-weight: 200;
display: inline;
height: auto;
font-size: 17px;
line-height : 33px;
letter-spacing : -0.8px;
overflow:hidden;
text-align: justify;
text-justify: inter-ideograph;
}



/* ============================================== スマートフォン ================================================ */

@media screen and (max-width:800px){
main {
	min-width: 100%;
	margin-top: 0px;
}

article {
width:100%;
height: auto;
display: block;
	margin: 0px auto;
	background-color: hsla(0,100%,99%,0.00);
	box-shadow: none;
	padding-bottom: 60px;
}

.header {
background-image: none;
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
margin: 0px auto;
width:100%;
height: 189px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
position: relative;
top:0px;
z-index: 5;
}

.header h3 {
background-image: url("../image2020/sp/01_1_01/header_01sp.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
margin: 0px auto;
width:100%;
height: 189px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
position: relative;
top:0px;
}
	
.learning_environment,
.pickup,
.north_campus,
.safety {
width:100%;
height: auto;
display: block;
margin: 0px auto 0px auto;
padding-bottom: 100px;
}

.learning_environment h4 {
background-image: url("../image2020/sp/01_1_02/About_Us02_1.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
margin: 0px auto 50px auto;
width:100%;
height: 0px;
padding-top: 39%;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
}

.learning_environment .school_building {
background-image: url("../image2020/sp/01_1_02/About_Us02_2.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
margin: 0px auto 0px auto;
width: 356px;
height: 0px;
padding-top: 58%;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
}

.learning_environment h5 {
background-image: url("../image2020/sp/01_1_02/About_Us02_3.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
margin: 40px auto -15px auto;
width:86%;
height: 0px;
padding-top: 22%;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
}

.learning_environment p,
.north_campus p,
.safety p {
width: 350px;
height: auto;
display: block;
margin: 50px auto 0px auto;
font-size: 16px;
line-height : 27px;
letter-spacing : -0.5px;
text-align: justify;
text-justify: inter-ideograph;;
}

.pickup h4 {
background-image: url("../image2020/sp/01_1_02/About_Us02_4.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
margin: 0px auto -50px auto;
width:86%;
height: 0px;
padding-top: 93%;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
}
	


.gray {
	width: 100vw;
    position: relative;
    left: 50%;
	background-position: center;
	margin: 25px auto 65px auto;
	padding-bottom: 60px;
    transform: translateX(-50%);
	background-color: hsla(0,0%,75%,.30);
	filter:contrast(1);
}

.gray .inner {
	display: block;
	margin: 0px auto;
	width:100%;
    height: auto; 
}


.gray h4 {
text-align: center;
padding: 20px 0px;
}

.gray h4 span {
background:#ffffff;
font-size: 17px;
font-weight: 600;
color: #000000;
}

.gray .inner ul {
width: 324px;
height: auto;
display: block;
margin: 0px auto;
}

.gray .inner li {
height: auto;
display: inline-block;
}

.gray .inner .facility1 {
background-image: url("../image2020/pc/01_1_02/About_Us02_5.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
width: 324px;
height: 215px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
margin: 10px auto;
float: none;
}

.gray .inner .facility2 {
background-image: url("../image2020/pc/01_1_02/About_Us02_6.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
width: 324px;
height: 215px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
margin: 10px auto;
float: none;
}

.gray .inner .facility3 {
background-image: url("../image2020/pc/01_1_02/About_Us02_7.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
width: 324px;
height: 215px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
margin: 10px auto;
float: none;
}

.gray .inner .facility4 {
background-image: url("../image2020/pc/01_1_02/About_Us02_8.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
width: 324px;
height: 215px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
margin: 10px auto;
float: none;
}

.gray .inner .facility5 {
background-image: url("../image2020/pc/01_1_02/About_Us02_9.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
width: 324px;
height: 215px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
margin: 10px auto;
float: none;
}

.gray .inner .facility6 {
background-image: url("../image2020/pc/01_1_02/About_Us02_10.png");
background-repeat: no-repeat;
background-size: 100%;
width: 324px;
height: 215px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
margin: 10px auto;
float: none;
}

.gray .inner .facility7 {
background-image: url("../image2020/pc/01_1_02/About_Us02_11.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
width: 324px;
height: 215px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
margin: 10px auto;
float: none;
}

.gray .inner .facility8 {
background-image: url("../image2020/pc/01_1_02/About_Us02_12.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
width: 324px;
height: 215px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
margin: 10px auto;
float: none;
}

.gray .inner .facility9 {
background-image: url("../image2020/pc/01_1_02/About_Us02_13.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
width: 324px;
height: 215px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
margin: 10px auto;
float: none;
}

.gray .inner .facility10 {
background-image: url("../image2020/pc/01_1_02/About_Us02_14.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
width: 324px;
height: 215px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
margin: 10px auto;
float: none;
}


.gray .inner .facility11 {
background-image: url("../image2020/pc/01_1_02/About_Us02_15.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
width: 324px;
height: 215px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
margin: 10px auto;
float: none;
}

.gray .inner .facility12 {
background-image: url("../image2020/pc/01_1_02/About_Us02_18.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
width: 324px;
height: 215px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
margin: 10px auto;
float: none;
}

.gray .inner .facility13 {
background-image: url("../image2020/pc/01_1_02/About_Us02_19.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
width: 324px;
height: 215px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
margin: 10px auto;
float: none;
}

.gray .inner .facility14 {
background-image: url("../image2020/pc/01_1_02/About_Us02_20.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
width: 324px;
height: 215px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
margin: 10px auto;
float: none;
}

.gray .inner .facility15 {
background-image: url("../image2020/pc/01_1_02/About_Us02_21.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
width: 324px;
height: 215px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
margin: 10px auto;
float: none;
}

.gray .inner .facility16 {
background-image: url("../image2020/pc/01_1_02/About_Us02_22.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
width: 324px;
height: 215px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
margin: 10px auto;
float: none;
}

.gray .inner .facility17 {
background-image: url("../image2020/pc/01_1_02/About_Us02_22_2.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
width: 324px;
height: 215px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
margin: 10px auto;
float: none;
}

.gray .inner .accessmap {
margin: 0px auto 0px auto;
width:98%;
height: 300px;
display: block;
}

.gray .inner .accessmap iframe {
width:98%;
height: 300px;
display: block;
}

.gray .inner dl {
width: 210px;
height: auto;
display: block;
margin: 40px auto;
font-size: 16px;
}

.gray .inner dt {
width: 150px;
display: inline-block;
float: left;
}

.gray .inner dd {
width: 60px;
margin-left: 150px;
}

.gray .inner p {
width: 100%;
height: auto;
display: block;
text-align: center;
font-size: 16px;
padding: 20px 0px;
}

.gray .inner .kitacan {
background-image: url("../image2020/sp/01_1_02/About_Us02_6.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
margin: 60px auto 20px auto;
width: 358px;
height: 64px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
}

.north_campus h4 {
background-image: url("../image2020/sp/01_1_02/About_Us02_10.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
margin: 0px auto 40px auto;
width: 100%;
height: 44px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
}

.north_campus .hoshinosato {
background-image: url("../image2020/sp/01_1_02/About_Us02_5.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
margin: 0px auto -20px auto;
width: 358px;
height: 340px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
}


.safety h4 {
background-image: url("../image2020/sp/01_1_02/About_Us02_7.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
margin: 80px auto 40px auto;
width: 358px;
height: 42px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
}

.safety .attendance {
background-image: url("../image2020/sp/01_1_02/About_Us02_8.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
margin: 0px auto 0px auto;
width: 359px;
height: 207px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
}

.safety h5 {
background-image: url("../image2020/sp/01_1_02/About_Us02_9.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
margin: 40px auto 0px auto;
width: 359px;
height: 80px;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
}

.safety .management {
width: 90%;
height: auto;
display: block;
margin: 40px auto 0px auto;
}


.safety .management figure {
width: 177px;
height: 130px;
display: block;
float: right;
margin: 0px 4px 2px 8px;
}


.safety .management p {
font-weight: 200;
display: inline;
height: auto;
font-size: 16px;
line-height : 33px;
letter-spacing : -0.8px;
overflow:hidden;
text-align: justify;
text-justify: inter-ideograph;
}
	
	
}