@charset "UTF-8";

*{
 margin: 0;
 padding: 0;
}

body{
word-wrap: break-word;
max-width:100%;
}

html {

  font-size : 100%;
  line-height : 1.5;
  color: #000;
  scroll-behavior: smooth;
}

h1,h2,h3,h4,h5,h6 {
 margin-bottom : 1em;
}

h1 {
font-size : 36px; 
line-height : 1.2;
} 

h2 {
font-size : 24px;
line-height : 1.2;
font-weight: normal;

} 

h3 {
font-size : 24px;
line-height : 1.2;

} 

ul, ol {
	  list-style : none;
	  }
	  
img { 
         vertical-align : middle;
         max-width: 100%;
         height: auto;
         }

p{
    line-height: 1.5em;
    margin-bottom: 1em;
}


body{
text-align: left;
font-family: "游ゴシック", YuGothic, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "ＭＳ ゴシック", sans-serif;
font-family: 'Noto Sans JP', sans-serif;

}


a{
 text-decoration: none;
 color:#424242;
 transition: 0.4s ease-in-out;  
}

 a:hover{
  opacity: .7;
}


img{
width: 100%;
}


/* text */

.left{
 text-align: left;
}

.right{
 text-align: right;
}

.center{
 text-align: center;
}

.bold{
 font-weight: bold;
}

.small{
 font-weight: normal;
 font-size: 0.8em;
}

.big{
 font-weight: bold;

}

/*flex*/

.flex_container_sp{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}

.flex_center{
 justify-content: center;
  align-items: center;
}

.flex_end{
 justify-content: end;
align-items: end;
}

.flex_re{
   display: -webkit-flex;
    display: flex;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    -webkit-flex-direction: row-reverse;
    flex-direction: row-reverse;
}

.flex_half_sp{
width: 48%;
margin: 1%;
box-sizing: border-box;
}

.flex_3_sp{
width: 31%;
margin: 1%;
box-sizing: border-box;
}

/* header */
header{
background-image:url(images/bg_header_sp.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat; 
height: 600px;
}

.header_in{
padding: 0.5em 1em;
}

header h1{
padding-top: 2em;
font-size: 1em;
letter-spacing: 0.2em;
color: #fff;
text-shadow: 1px 1px 2px #696969;
}

header h1 img{
width: 40px;
margin-right: 0.5em;
position: relative;
bottom: 0.2em; 
}

header p.btn{
position: fixed;
top: 0;
right: 1em;
background: #80ccde;
letter-spacing: 0.2em;
font-weight: bold;
font-size: 1em;
border-radius: 0px 0px 20px 20px;
 box-shadow: 0 2px 2px 0 rgba(78, 170, 222, 1);
 z-index: 999;
 
}

header p.btn a{
color: #fff;
display: block;
padding: 0.3em 1em;
}

header p.btn a:hover{
  opacity: .7;
}




header p.catch{
padding-top: 2em;
font-size: 1.8em;
font-weight: bold;
font-family: 'Zen Kurenaido', sans-serif;
color: #404040;
text-align: right;
}

.banner h2{
color: #ef8bab;
font-size: 2.5em;
letter-spacing: 0.1em;
font-weight: bold;
margin-bottom: 0.1em;
text-align: right;
}

.banner p{
color: #ef8bab;
font-size: 2.6em;
font-weight: bold;
margin-bottom: 0.3em;
text-align: right;
}

.banner p span{
font-size: 0.3em;
color: #fff;
background: #ef8bab;
 display: inline-block;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  text-align:center;
  line-height: 25px;
margin-right: 2em;
position: relative;
bottom: 0.2em;
}


p.applybtn{
background: #ef8bab;
max-width: 250px;
text-align: center;
border-radius: 100px;
letter-spacing: 0.1em;
font-weight: bold;
 box-shadow: 0 2px 2px 0 rgba(182, 105, 131, 1);
 margin-left: auto;
margin-right: 0;
}

p.applybtn a{
display: block;
color: #fff;
padding: 0.4em 1em;
}

p.applybtn a:hover{
  opacity: .7;
}


.box {
padding: 2em 1em 2em 1em;
}

.box0 {
padding: 2em 0em 0em 0em;
}

.box_int{
padding: 0em 0em 2em 0em;
}

.box_inner{
padding: 1em;
}

.box1{
background: #f6f6f6;
}

.box_point{
margin-bottom: 2em;
}

.box1 .box_point h3{
color: #ef8bab;
font-size: 1.3em;
letter-spacing: 0.1em;
margin-bottom: 0.5em;
}



.box p.title{
font-size: 2em;
letter-spacing: 0.1em;
margin-bottom: 0em;
color: #80ccde;
}

.box h2{
font-size: 1em;
margin-bottom: 1.3em;
}

.box h3{
font-size: 1.6em;
line-height: 1.4em;
letter-spacing: 0.1em;
margin-bottom: 0.3em; 
}

.box h4{
font-size: 1.1em;
margin-bottom: 0.5em;
}

.box p{
font-size: 0.9em;
line-height: 1.6em;
}

.box figure{
margin-bottom: 1em;
}

.box_in{
background: #f4f4f4;
margin: 0.5em;
margin-bottom: 2em;
}

.box0 h2{
margin-left: 1em;
}
.box0 p.title{
margin-left: 0.4em;
}




div.border{
border-bottom: 10px solid #80ccde;
width: 50px;
margin-bottom: 0.8em;
}

div.border2{
border-bottom: 8px solid #ef8bab;
width: 30px;
margin-bottom: 0.6em;
}



p.interview_btn2{
padding: 0;
background: #80ccde;
text-align: center;
border-radius: 100px;
max-width: 140px;
margin-left: auto;
margin-right: auto;
 box-shadow: 0 2px 2px 0 rgba(78, 170, 222, 1);
padding: 0;
}

p.interview_btn2 a{
display: block;
padding: 0;
padding: 0.3em;
color: #fff;
}
p.interviewtop a{
padding-top: 0em;
}


.interview_box{
margin-bottom: 2em;
}
.interview_box h4{
font-size: 1.3em;
}

p.interview_btn{
background: #80ccde;
text-align: center;
border-radius: 100px;
max-width: 110px;
margin-left: auto;
margin-right: auto;
 box-shadow: 0 2px 2px 0 rgba(78, 170, 222, 1);
}

p.interview_btn a{
display: block;
padding: 0.3em;
color: #fff;
}

.box_tr_in{
margin-left: 1em;
margin-right: 1em;
}

.box_tr_inner{
background: #fff;
max-width: 350px;
margin-left: auto;
margin-right: auto;
position: relative;
bottom: 2em;
padding: 1em;
}

p.interview_btn :hover{
  opacity: .7;
}

p.interview_btn2 :hover{
  opacity: .7;
}




p.applybtn2{
font-size: 1.1em;
background: #ef8bab;
width: 300px;
text-align: center;
border-radius: 20px;
font-weight: bold;
margin-left: auto;
margin-right: auto;
 box-shadow: 0 2px 2px 0 rgba(182, 105, 131, 1);
}

p.applybtn2 a{
display: block;
color: #fff;
padding: 0.2em 1em;
}


p.applybtn2 a:hover{
  opacity: .7;
}

.boxclass figure{
margin-bottom: 2em;
}

.fee table{
width: 100%;
max-width: 1300px;
margin-left: auto;
margin-right: auto;
border-collapse: collapse;

}

.fee th{
border: 1px solid #f4f4f4;
background: #80ccde;
text-align: center;
padding: 0.5em;
font-weight: normal;
color: #fff;
font-size: 0.8em;
}

.fee td{
background: #f4f4f4;
border: 1px solid #fff;
text-align: center;
padding: 0.5em;
font-size: 0.8em;
}

.fee .bg_tr td{
background: #ef8bab;
color: #fff;
}




/*footer*/

footer{
background: #f6f6f6;
padding: 2em 1em 2em 1em;
}

footer figure{
margin-bottom: 1em;
}

footer h3{
font-size: 1.2em;
margin-bottom: 0.5em;
letter-spacing: 0.1em;
}

footer h3 img{
width: 60px;
margin-right: 0.5em;
position: relative;
bottom: 0.2em; 
}

.googlemap{
height: 0;
overflow: hidden;
padding-bottom: 56.25%;
position: relative;
margin-bottom: 4em;
}
.googlemap iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}


@media screen and (min-width:768px){
.sp{
display: none;
}

/*header*/
header{
height: 700px;
}

.header_in{
margin-right: 3em;
}

header h1{
font-size: 1.2em;
letter-spacing: 0.2em;
padding-top: 0em;
}

header h1 img{
width: 60px;
margin-right: 0.5em;
position: relative;
bottom: 0.2em; 
}
header p.btn{
font-size: 1.2em;
}

header p.btn a{
padding: 0.3em 2em;
}

header p.catch{
padding-top: 2em;
font-size: 3em;
text-align: right;

}

.banner h2{
max-width: 450px;
margin-left:auto;
margin-right: 0;
text-align: center;
font-size: 3.6em;

}

header p.btn{
right:4em;
font-size: 1.3em;
padding-left: 3em;
padding-right: 3em;

}

.banner p{
font-size: 3.2em;
max-width: 450px;
margin-left:auto;
margin-right: 0;
text-align: center;

}

p.applybtn{
font-size: 1.6em;
max-width: 450px;
margin-left:auto;
margin-right: 0;
}

.box p.title{
font-size: 3em;
margin-bottom: 0.2em;
text-align: center; 
}

.box h2{
text-align: center;
margin-bottom: 3em;
font-size: 1.2em;
}

p.interview_btn2{
padding-left: 2em;
padding-right: 2em;
}

.interview_box p{
margin-right: 0;
position: relative;
bottom: 2.8em;
}

.box_tr_inner{
background: #fff;
max-width: 450px;
margin-left: 5em;
margin-right: auto;
position: relative;
bottom: 3em;
padding: 2em;
}

.fee th{

font-size: 1em;
}

.fee td{

font-size: 1em;
}


}

@media screen and (min-width:960px){

header{
background-image:url(images/bg_header.jpg);
height: 800px;
}

.header_in{
margin-left: 5em;
}

.box p{
font-size: 1.1em;
}

.box0 h3{
font-size: 2em;
}

.interview_box p{
max-width: 210px;
}

.box_tr_inner{
max-width: 500px;
}

.box_tr_inner h3{
font-size: 2em;
}

.box_point{
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}

p.applybtn2{
font-size: 1.4em;
width: 500px;
border-radius: 100px;
margin-bottom: 4em;
}

p.applybtn2 a{
padding: 0.4em 1em;
}


.flex_container_pc{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
align-items: stretch;
}



.flex_left{
max-width: 30%;
}

.flex_left figure{
display: none;
}

footer h3{
margin-top: 2em;
}

.ft{

background-repeat: no-repeat;
background-size: cover;
background-position: center center;
width: 30%;
}

.ft1{
background-image: url(images/m_pic1.jpg);
}
.ft2{
background-image: url(images/m_pic2.jpg);
}
.ft3{
background-image: url(images/m_pic3.jpg);
}
.ft4{
background-image: url(images/m_pic4.jpg);
}
.ft5{
background-image: url(images/m_pic5.jpg);
}
.ft6{
background-image: url(images/m_pic6.jpg);
}
.ft7{
background-image: url(images/m_pic7.jpg);
}

.flex_right{
max-width: 70%;
background: #fff;
padding: 2em;
box-sizing:border-box;
}

.box_point .flex_right h3{
font-size: 1.5em;
}


.flex_half_pc{
width: 46%;
margin: 2%;
}

.googlemap{
padding-bottom: 26.25%;

}

small p{
text-align: center;
}

}


@media screen and (min-width:1200px){

}

/*animation*/



.fadeIn {
    transition: 1s;
    opacity: 0;
}

.fadeIn.animated {
    opacity: 1;
}

/**/