@charset "UTF-8";
/* CSS Document */
body{
background: linear-gradient(to right, #fefbde 0%, #fefbde 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 100%);
}
.sp_back{
display: none;
}

h2{
background-image: url("../image/01_gaiyou/01_title_header.png");
}

.title{
display: block;
position: relative;
width: 700px;
height: 92px;
margin: 150px auto 0px auto;
background-image: url("../image/01_gaiyou/intro.svg");
background-repeat: no-repeat;
background-size: 100%;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
}
.flake00{
display: block;
position:absolute;
width: 180px;
height: auto;
z-index: 5;
margin:0px auto 0px auto;
top: 90px;
right: -10px;
}
.flake01{
display: block;
position:absolute;
width: 280px;
height: auto;
z-index: 5;
margin:0px auto 0px auto;
top: 90px;
left: -40px;
}

.slide_box{
padding: 6% 0;
margin: 0 calc(50% - 50vw);
width: 100vw;
position: relative;
z-index: 10;
}
.slide_box .slide{
display: block;
width: 100%;
}
.slide_box .slide .slide__item {
    margin-right: 10px;
    margin-left: 10px;
}

p{
font-size: 16px;
text-align: center;
display: block;
margin: 0px auto;
width: 100%;
}
h4{
font-weight: 100;
font-size: 35px;
color: #009fe8;
text-align: center;
margin: 0px auto 20px auto;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
}
h4 strong{
background: linear-gradient(transparent 80%, #ffed00 80%);
}
.kira{
width: 200px;
margin: 100px auto 100px auto;
display: block;
}

.message{
margin: 80px auto;
display: block;
width: 100%;
height: auto;
position: relative;
background-color: #fffbf3;
padding-bottom: 80px;
}
.message .kira_top{
width: 200px;
position: absolute;
left: 50%;
  transform: translateX(-50%);
top: -10px;
}
.message .kira_bottom{
width: 200px;
position: absolute;
left: 50%;
  transform: translateX(-50%);
bottom: -10px;
}

.message h3{
width: 300px;
height: 90px;
display: block;
position: relative;
margin: 0px auto 80px auto;
top: 80px;
}
.message .message_img{
width: 650px;
height: auto;
display: block;
margin: 20px auto;
}
.message h4{
width: 550px;
height: 30px;
display: block;
margin: 0px auto 30px auto;
}
.message .message_text{
width: 70%;
margin: 0px auto;
font-size: 18px;
text-align: justify;
line-height: 36px;
font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
}
.message .name{
width: 150px;
height: auto;
position:absolute;
right:15%; 
}
.message a,
.message a img{
width: 180px;
height: auto;
margin: 0px auto;
display: block;
padding-top: 30px;
}
.message a:hover{
opacity: 0.6;
}

.about{
margin: 80px auto 40px auto;
display: block;
width: 100%;
height: auto;
position: relative;
padding-bottom: 0px;
}
.about h3{
width: 92px;
height: 55px;
display: block;
position: relative;
margin: 0px auto 40px auto;
}
.about .rinen{
width: 300px;
height: 55px;
display: block;
position: relative;
margin: 10px auto 50px auto;
}
.about .rinen_img{
display: block;
width: 480px;
height: auto;
margin: 0px auto 80px auto;
}
.about a{
width: 180px;
height: auto;
margin: 0px auto 60px auto;
display: block;
padding-top: 30px;
}
.about a:hover{
opacity: 0.6;
}
.about table {
    width:70%;
    margin: 0px auto 40px auto;
    border-collapse: collapse;
    border:1px solid #009fe8;
}
.about th {
  font-size : 15px;
  color : #524A3F;
    border:1px solid #009fe8;
    background:#f3f7fc;
    padding:5px;
    text-align: center;
}
.about td {
  font-size : 15px;
    border:1px solid #009fe8;
    padding:5px 0px 5px 15px;
    background-color: #ffffff;
    text-align: left;
}
.about td .map{
color: #009fe8;
font-size : 15px;
font-weight: bolder;
display: inline;
padding-left: 10px;
}

.facilities{
margin: 0px auto 40px auto;
display: block;
width: 100%;
height: auto;
position: relative;
padding-bottom: 0px;
}
.facilities h3{
display: block;
position: relative;
width: 70%;
height: 0px;
padding-top: 25%;
margin: 0px auto -140px auto;
background-image: url("../image/01_gaiyou/title_sisetu.png");
background-repeat: no-repeat;
background-size: 100%;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
}
.facilities .introduction{
font-size: 16px;
font-weight: normal;
text-align: justify;
display: block;
margin: 0px;
width: 60%;
line-height: 32px;
position: absolute;
top: 70px;
left: 18%;
}
.facilities .introduction strong{
color: #009fe8;
font-size: 16px;
font-weight: normal;
}
.facilities .comment{
display: block;
position: relative;
width:45%;
height: 0px;
padding-top: 13%;
margin: 0px auto -40px auto;
background-image: url("../image/01_gaiyou/title6.svg");
background-repeat: no-repeat;
background-size: 100%;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
}
.facilities .institution{
width: 55%;
height: auto;
margin: 40px auto;
}

.facilities .institution .inst_h3{
margin: 30px auto 20px auto;
display: block;
font-size: 20px;
font-weight: 300;
width: 100%;
color: #333;
border-bottom: dotted 2px #333;
text-align: left;
}
.facilities .institution h4{
font-weight: 500;
font-size: 18px;
color: #009fe8;
display: inline;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
background: linear-gradient(transparent 80%, #ffed00 80%);

}
.facilities .institution img{
width: 100%;
height: auto;
margin: 15px auto 0 auto;
display: block;
}
.facilities .institution p{
width: 100%;
font-size: 16px;
margin-top: 10px;
text-align: center;
display: block;
}
.facilities .institution a{
width: 100px;
font-weight: 500;
font-size: 15px;
text-align: center;
display: block;
margin: 10px auto 0 auto;
color: #ffffff;
background-color: #009fe8;
text-decoration: none;
border-radius: 10px;
}
.facilities .institution a:hover{
opacity: 0.6;
}


.teacher{
margin: 80px auto;
display: block;
width: 100%;
height: auto;
position: relative;
background-color: #fffbf3;
padding-top: 60px;
padding-bottom: 80px;
}
.teacher .kira_top{
width: 200px;
position: absolute;
left: 50%;
  transform: translateX(-50%);
top: -10px;
}
.teacher .kira_bottom{
width: 200px;
position: absolute;
left: 50%;
  transform: translateX(-50%);
bottom: -10px;
}
.teacher h3{
display: block;
position: relative;
width: 70%;
height: 0px;
padding-top: 25%;
margin: 0px auto -135px auto;
background-image: url("../image/01_gaiyou/title_syokuin.png");
background-repeat: no-repeat;
background-size: 100%;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
}
.teacher h4{
margin-left: 15%;
font-weight: 500;
font-size: 18px;
color: #009fe8;
display: inline;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
background: linear-gradient(transparent 80%, #ffed00 80%);
}

.teacher .fulltime{
margin: -10px auto 50px auto;
width: 85%;
height: auto;
list-style: none;
display: flex;
justify-content: center;
flex-wrap: wrap;
}

.teacher .fulltime li{
width: 380px;
height: auto;
display: block;
margin: 20px 10px;
text-align: justify;
}

.teacher .fulltime li div{
width: 380px;
height: 220px;
background-repeat: no-repeat;
background-size: 100%;
position: relative;
margin-bottom: 10px;
}

.teacher .fulltime li div dl{
position: absolute;
top:55px;
left: 160px;
}

.teacher .fulltime li div dl dt{
font-size:12px;
font-weight: 500;
float: left;
}

.teacher .fulltime li div dl dd{
font-size:13px;
font-weight: 300;
margin-left: 70px;
}
.teacher .fulltime li p{
font-size:13px;
font-weight: 300;
width: 100%;
text-align: justify;
}
.teacher .fulltime li dl dt{
font-size:12px;
font-weight: 300;
float: left;
}
.teacher .fulltime li dl dd{
font-size:13px;
font-weight: 300;
margin-left: 80px;
}

.teacher .fulltime .long{
width: 85%;
height: auto;
display: block;
margin: 20px auto;
}
.teacher .fulltime .long div{
width: 100%;
height: 172px;
background-repeat: no-repeat;
background-size: 100%;
position: relative;
}
.teacher .fulltime .long div dl{
position: absolute;
top:55px;
left: 160px;
}
.teacher .fulltime .long div dl dt{
font-size:12px;
font-weight: 500;
float: left;
}
.teacher .fulltime .long div dl dd{
font-size:13px;
font-weight: 300;
margin-left: 70px;
}
.teacher .fulltime .long p{
font-size:13px;
font-weight: 300;
width: 100%;
text-align: justify;
}
.teacher .fulltime .long dl dt{
font-size:12px;
font-weight: 300;
float: left;
}
.teacher .fulltime .long dl dd{
font-size:13px;
font-weight: 300;
margin-left: 80px;
}



.teacher .parttime{
margin: -20px auto 0 auto;
width: 85%;
height: auto;
list-style: none;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.teacher .parttime li{
width: 220px;
height: auto;
display: block;
margin: 10px 20px;
padding: 20px 0;
position: relative;
}
.teacher .parttime li div img{
width: 220px;
height: 81px;
display: block;
margin-bottom: 10px;
}
.teacher .parttime li div dl{
position: absolute;
top:105px;
left: 5px;
}
.teacher .parttime .pic div dl dt,
.teacher .parttime li div dl dt{
font-size:12px;
font-weight: 500;
float: left;
}
.teacher .parttime .pic div  dl dd,
.teacher .parttime li div dl dd{
font-size:13px;
font-weight: 300;
margin-left: 60px;
letter-spacing: -1px;
}

.teacher .parttime .pic{
width: 380px;
height: auto;
display: block;
margin: 20px 20px;
}
.teacher .parttime .pic div{
position: relative;
}
.teacher .parttime .pic div img{
width: 380px;
height: 180px;
display: block;
}
.teacher .parttime .pic div dl{
position: absolute;
top:90px;
left: 155px;
}



.teacher .parttime .last p{
font-size:18px;
text-align: center;
width: 220px;
height: 81px;
margin: 20px 20px;
padding: 60px 0 0 0;
}



.other{
margin: 0px auto;
display: block;
width: 700px;
height: auto;
padding: 0 0 180px 0;
position: relative;
}
.other h3{
display: block;
position: relative;
width: 700px;
height: 156px;
margin: 0px auto 0px auto;
background-image: url("../image/04_campuslife/title4.png");
background-repeat: no-repeat;
background-size: 100%;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
}

.other ul{
width: 700px;
margin: 0px auto;
list-style: none;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.other ul li:hover{
opacity: 0.6;
}
.other ul .other1{
width: 200px;
height: auto;
margin: 40px 75px;
display: block;
}
.other ul .other2{
width: 200px;
height: auto;
margin: 40px 75px;
display: block;
}
.other ul .other3{
width: 320px;
height: auto;
margin: 0px 15px;
display: block;
}
.other ul .other4{
width: 320px;
height: auto;
margin: 0px 15px;
display: block;
}

/* ============================================== スマートフォン ============================================================================================================================================== */
@media screen and (max-width: 769px) {
body{
background: linear-gradient(to right, #fefbde 0%, #fefbde 38%, rgba(0,0,0,0) 38%, rgba(0,0,0,0) 100%);
}
.sp_back{
display: block;
width: 100%;
height: 80px;
background-color: #ffffff;
position: absolute;
}

h2{
background-image: url("../image/01_gaiyou/01_title_header_sp.png");
}


.title{
display: block;
position: relative;
width: 85%;
height: 0px;
padding-top: 31%;
margin: 0px auto 0px;
background-image: url("../image/04_campuslife/intro_sp.svg");
background-repeat: no-repeat;
background-size: 100%;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
}
.flake00{
display: none;
}
.flake01{
display: none;
}

.slide_box{
display: block;
padding: 0;
margin: 8% 0 5% 0;
width: 100%;
height: 200px;
position: relative;
overflow: hidden;
z-index: 10;
}
.slide_box .slide{
display: block;
width: 1200px;
position: absolute;
top: 0px;
}
.slide_box .slide .slide__item {
    margin-right: 10px;
    margin-left: 10px;
}
p {
width: 85%;
font-size: 16px;
text-align: justify;
display: block;
margin: 0px auto;
line-height: 32px;
}


.message{
margin: 80px auto;
display: block;
width: 100%;
height: auto;
position: relative;
background-color: #fffbf3;
padding-bottom: 80px;
}
.message .kira_top{
width: 200px;
position: absolute;
left: 50%;
  transform: translateX(-50%);
top: -10px;
}
.message .kira_bottom{
width: 200px;
position: absolute;
left: 50%;
  transform: translateX(-50%);
bottom: -10px;
}

.message h3{
width: 55%;
height: 90px;
display: block;
position: relative;
margin: 0px auto 80px auto;
top: 80px;
}
.message .message_img{
width: 100%;
height: auto;
display: block;
margin: 20px auto;
}
.message h4{
width: 90%;
height: 30px;
display: block;
margin: 0px auto 30px auto;
}
.message .message_text{
width: 85%;
margin: 0px auto;
font-size: 18px;
text-align: justify;
line-height: 32px;
font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
}
.message .name{
width: 150px;
height: auto;
position:absolute;
margin: 20px 0;
right:5%; 
}
.message a,
.message a img{
width: 180px;
height: auto;
margin: 30px auto;
display: block;
padding-top: 30px;
}
.message a:hover{
opacity: 0.6;
}

.about{
margin: 80px auto 40px auto;
display: block;
width: 100%;
height: auto;
position: relative;
padding-bottom: 0px;
}
.about h3{
width: 75px;
height: 30px;
display: block;
position: relative;
margin: 0px auto 40px auto;
}
.about .rinen{
width: 55%;
height: 55px;
display: block;
position: relative;
margin: 10px auto 50px auto;
}
.about .rinen_img{
display: block;
width: 85%;
height: auto;
margin: 0px auto 80px auto;
}
.about a{
width: 180px;
height: auto;
margin: 0px auto 60px auto;
display: block;
padding-top: 30px;
}
.about a:hover{
opacity: 0.6;
}
.about table {
    width:85%;
    margin: 0px auto 30px auto;
    border-collapse: collapse;
    border:1px solid #009fe8;
}
.about th {
  font-size : 15px;
  color : #524A3F;
    border:1px solid #009fe8;
    background:#f3f7fc;
    padding:5px;
    text-align: center;
}
.about td {
  font-size : 15px;
    border:1px solid #009fe8;
    padding:5px 0px 5px 15px;
    background-color: #ffffff;
    text-align: left;
}
.about td .map{
color: #009fe8;
font-size : 15px;
font-weight: bolder;
display: inline;
padding-left: 10px;
}



.facilities{
margin: 0px auto 40px auto;
display: block;
width: 100%;
height: auto;
position: relative;
padding-bottom: 0px;
}
.facilities h3{
display: block;
position: relative;
width: 100%;
height: 0px;
padding-top: 25%;
margin: -80px auto 160px auto;
background-image: url("../image/01_gaiyou/title_sisetu_sp.png");
background-repeat: no-repeat;
background-size: 100%;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
}
.facilities .introduction{
font-size: 16px;
font-weight: normal;
text-align: justify;
display: block;
margin: 0px 0px 100px 0px;
width: 85%;
line-height: 32px;
position: absolute;
top: 100px;
left: 5%;
}
.facilities .introduction strong{
color: #009fe8;
font-size: 16px;
font-weight: normal;
}
.facilities .comment{
display: block;
position: relative;
width:85%;
height: 0px;
padding-top: 27%;
margin: 0px auto 10px auto;
background-image: url("../image/01_gaiyou/title6sp.svg");
background-repeat: no-repeat;
background-size: 100%;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
}
.facilities .institution{
width: 85%;
height: auto;
margin: 40px auto;
}
.facilities .institution h4{
font-weight: 500;
font-size: 18px;
color: #009fe8;
display: inline;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
background: linear-gradient(transparent 80%, #ffed00 80%);

}
.facilities .institution img{
width: 100%;
height: auto;
margin: 15px auto 0 auto;
display: block;
}
.facilities .institution p{
width: 100%;
font-size: 16px;
margin-top: 10px;
text-align: justify;
display: block;
}
.facilities .institution a{
width: 100px;
font-weight: 500;
font-size: 15px;
text-align: center;
display: block;
margin: 10px auto 0 auto;
color: #ffffff;
background-color: #009fe8;
text-decoration: none;
border-radius: 10px;
}
.facilities .institution a:hover{
opacity: 0.6;
}


.teacher{
margin: 80px auto;
display: block;
width: 100%;
height: auto;
position: relative;
background-color: #fffbf3;
padding-top: 60px;
padding-bottom: 80px;
}
.teacher .kira_top{
width: 200px;
position: absolute;
left: 50%;
  transform: translateX(-50%);
top: -10px;
}
.teacher .kira_bottom{
width: 200px;
position: absolute;
left: 50%;
  transform: translateX(-50%);
bottom: -10px;
}
.teacher h3{
display: block;
position: relative;
width: 100%;
height: 0px;
padding-top: 25%;
margin: 0px auto 25px auto;
background-image: url("../image/01_gaiyou/title_syokuin_sp.png");
background-repeat: no-repeat;
background-size: 100%;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
}
.teacher h4{
margin-left: 5%;
font-weight: 500;
font-size: 18px;
color: #009fe8;
display: inline;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, "sans-serif";
background: linear-gradient(transparent 80%, #ffed00 80%);
}

.teacher .fulltime{
margin: -10px auto 50px auto;
width: 85%;
height: auto;
list-style: none;
display: flex;
justify-content: center;
flex-wrap: wrap;
}

.teacher .fulltime li{
width: 380px;
height: auto;
display: block;
margin: 20px auto;
}

.teacher .fulltime li div{
width: 380px;
height: 220px;
background-repeat: no-repeat;
background-size: 100%;
position: relative;
margin-bottom: 10px;
}

.teacher .fulltime li div dl{
position: absolute;
top:55px;
left: 160px;
}

.teacher .fulltime li div dl dt{
font-size:12px;
font-weight: 500;
float: left;
}

.teacher .fulltime li div dl dd{
font-size:13px;
font-weight: 300;
margin-left: 70px;
}
.teacher .fulltime li p{
font-size:13px;
font-weight: 300;
width: 100%;
text-align: justify;
}
.teacher .fulltime li dl dt{
font-size:12px;
font-weight: 300;
float: left;
}
.teacher .fulltime li dl dd{
font-size:13px;
font-weight: 300;
margin-left: 80px;
}

.teacher .fulltime .long{
width: 380px;
height: auto;
display: block;
margin: 20px 0;
}
.teacher .fulltime .long div{
width: 370px;
height: auto;
display: block;
background-repeat: no-repeat;
background-size: 100%;
position: relative;
padding-bottom: 50px;
}
.teacher .fulltime .long div dl{
position: relative;
top:55px;
left: 160px;
width: 220px;
}
.teacher .fulltime .long div dl dt{
font-size:12px;
font-weight: 500;
float: left;
}
.teacher .fulltime .long div dl dd{
font-size:13px;
font-weight: 300;
margin-left: 70px;
}
.teacher .fulltime .long p{
font-size:13px;
font-weight: 300;
width: 100%;
text-align: justify;
}
.teacher .fulltime .long dl dt{
font-size:12px;
font-weight: 300;
float: left;
}
.teacher .fulltime .long dl dd{
font-size:13px;
font-weight: 300;
margin-left: 80px;
}



.teacher .parttime{
margin: -20px auto;
width: 100%;
height: auto;
list-style: none;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.teacher .parttime li{
width: 100%;
height: auto;
display: block;
margin: 10px 0px 10px 5%;
padding: 20px 0 20px 0;
position: relative;
}
.teacher .parttime li div img{
width: 220px;
height: 81px;
display: block;
margin-bottom: 10px;
}
.teacher .parttime li div dl{
position: absolute;
top:105px;
left: 5px;
}
.teacher .parttime .pic div dl dt,
.teacher .parttime li div dl dt{
font-size:12px;
font-weight: 500;
float: left;
}
.teacher .parttime .pic div  dl dd,
.teacher .parttime li div dl dd{
font-size:13px;
font-weight: 300;
margin-left: 60px;
letter-spacing: -1px;
}

.teacher .parttime .pic{
width: 380px;
height: auto;
display: block;
margin: 20px 20px;
}
.teacher .parttime .pic div{
position: relative;
}
.teacher .parttime .pic div img{
width: 380px;
height: 180px;
display: block;
}
.teacher .parttime .pic div dl{
position: absolute;
top:90px;
left: 155px;
}



.teacher .parttime .last p{
font-size:18px;
text-align: center;
width: 220px;
height: 81px;
margin: 20px 20px;
padding: 0px 0 0 0;
}




.other{
margin: 0px auto;
display: block;
width: 100%;
height: auto;
padding: 0 0 180px 0;
position: relative;
}
.other h3{
display: block;
position: relative;
width: 100%;
height: 0px;
padding-top: 24%;
margin: 0px auto 30px auto;
background-image: url("../image/04_campuslife/title4sp.png");
background-repeat: no-repeat;
background-size: 100%;
text-indent: 300%;
white-space: nowrap;
overflow: hidden;
}

.other ul{
width: 100%;
margin: 0px auto;
list-style: none;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.other ul li:hover{
opacity: 0.6;
}
.other ul .other1{
width: 40%;
height: auto;
margin: 10px 10px;
display: block;
order: 1;
}
.other ul .other2{
width: 40%;
height: auto;
margin: 10px 10px;
display: block;
order: 2;
}
.other ul .other3{
width: 320px;
height: auto;
margin: 20px auto;
display: block;
order: 3;
}
.other ul .other4{
width: 320px;
height: auto;
margin: 20px auto;
display: block;
order: 4;
}

}