@charset "UTF-8";
/* CSS Document */
html {
font-size: 16px;
}
body{
background-color: #FFF;
font-family: helvetica, arial, 'hiragino kaku gothic pro', meiryo, 'ms pgothic', sans-serif;
min-width: 1100px;
padding-top: 95px;
}
div{
line-height: 1.8em;
}
a, a:link, a:visited    {  
    text-decoration: underline;  
    color: #000;  
}  
a:hover {  
    color: #000;  
    filter:alpha(opacity=80);
	-moz-opacity: 0.8;
	opacity: 0.8;}  
a:active    {  
    color: #000;  
}
section{
margin-top: 50px;
}
.row img{
width: 100%;
}
.container{
max-width: 1100px;
margin-top: 30px;
}

/*ゴシック系  font-family: 'M PLUS 1p', sans-serif;  */

/*bace*/
.ll-box{
width: 100%;
margin: 0;
padding: 0;
}
.l-box{
max-width: 1100px;
margin: 0 auto;
padding: 0 40px;
}
.m-box{
max-width: 800px;
margin: 0 auto;
padding: 0 40px;
}
.s-box{
max-width: 500px;
padding: 0 40px;
}
nav,navbar,navbar-expand,fixed-top{
padding: 0!important;
}
nav{
border-image: linear-gradient(90deg, #22743A, #223380) 1/0 0 6px;
border-style: solid;
background: #fff;
padding: 0 10px 6px!important;
}
nav .navbar-brand img{
max-width: 200px;
}
nav .nav-link img{
max-width: 70px;
}
nav .collapse div{
margin-left: 15px;
}
nav address{
background: linear-gradient(to right,#22743A, #223380);
color: #fff;
font-size: 1em;
text-align: center;
border-radius:1.5em;
font-family: 'M PLUS 1p', sans-serif;
font-weight: 800;
letter-spacing: 0.1em;
margin: 0 0 5px;
}
nav address font{
font-size: 0.7em;
font-weight: 300;
letter-spacing: 0;
}
nav p{
font-family: 'M PLUS 1p', sans-serif;
color: #000;
font-size: 13px;
line-height: 1.3em;
text-align: center;
margin: 0;
}
.carousel-control-prev,.carousel-control-next{
width: 100px;
}
#yoyaku_banner a{
display: block;
padding: 0 0 15px;
}
h1,h2,h3,h4,h5{
font-family: 'M PLUS 1p', sans-serif;
}
h1{
background-color: #D7E1E6;
color: #163480;
margin-top: 80px;
text-align: center;
padding: 20px 20px 10px;
font-weight: 300;
font-size: 1.2em;
line-height: 1em;
letter-spacing: 0.1em;
}
h1 img{
height: 35px;
display: block;
margin: 0 auto 15px;
}
h1 p{
margin-top: 10px;
font-size: 0.9em;
font-weight: 700;
}
.main_contens{
max-width: 1100px;
margin: 0 auto;
}
h2{
border-image: linear-gradient(90deg, #223380, #22743A) 1/0 0 6px;
border-style: solid;
margin-top: 50px;
padding: 0 0 10px;
font-weight: 400;
font-size: 1.7em;
letter-spacing: 0.1em;
vertical-align:middle;
}
h2 img{
height: 40px;
vertical-align:middle;
margin-right: 5px;
}
h3{
color: #163480;
margin-top: 15px;
padding: 5px 0 15px;
font-weight: 400;
font-size: 1.2em;
letter-spacing: 0.1em;
border-bottom: 1px dashed #223E83;
}
h3 p{
margin-top: 0;
font-size: 0.9em;
font-weight: 700;
margin-bottom: 0;
}
#main_img{
width: 100%
}
#main_img img{
width: 100%
}
.banner img{
width: 100%;
}

/*index*/
#i-contens a{
text-decoration: none;
}
#i-contens .i-contens-img{
background: linear-gradient(90deg, #223380, #22743A );
height: 7px;
padding: 0;
}
#i-contens h2{
margin: 10px 0 0;
border: none;
}
#i-contens h2 img{
height: 40px;
width: auto;
}
#info{
background: linear-gradient(90deg, #223380, #22743A );
color: #fff;
padding: 20px 20px 30px;
margin: 30px 0 0;
}
#info .container{
margin-top: 30px;
}
#info h4{
background: #fff;
color: #163480;
text-align: center;
font-size: 0.9em;
font-weight: 800;
border-radius: 20px;
padding: 8px;
letter-spacing: 0.1em;
}
#info table{
margin: 10px 0 0;
}
#info table a{
color: #fff;
}
#info tr{
margin: 5px 0 0;
vertical-align: top;
}
#info th,#info td{
padding: 5px;
vertical-align: top;
font-weight: 300;
}
#info .fb-page{
width: 100%;
height: 300px;
}
.facebook-wrapper {
    max-width: 500px; /* Facebook Page Plugin の最大幅 */
    margin: 0 auto;
}
.facebook-wrapper > .fb-page {
    width: 100%;
}
.facebook-wrapper > .fb-page > span,
.facebook-wrapper iframe {
    width: 100% !important;
}
.insta_icon{
background: #fff;
padding: 0.5rem 1rem;
border-radius: 5rem;
text-decoration: none!important;
display: inline-block;
margin-top: 0.3rem;
margin-right: 0.5rem;
}
.insta_icon img{
width: 30px;
}
#info .fb-like{
width: 100%;
text-align: right;
margin-top: 5px;
}
#main_banner a{
display: block;
padding: 15px 0;
}
.sale{
    position: relative;
    margin: 2em auto;
    padding: 1.5em 1em;
    border: solid 6px #C51417;
    border-radius: 10px;
text-align: center;
}
.sale .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #C51417;
    font-weight: bold;
}
.sale p{
margin: 0; 
padding: 0;
}
.sale img{
max-width: 500px;
}

#calendar .box01{
background: #D3DED4;
padding: 20px 20px 40px;
}
#calendar .box02{
background: #C3CAE2;
margin-top: 15px;
padding: 20px 20px 40px;
}
#calendar h2{
max-width:  360px;
margin: auto;
text-align: center;
}
#calendar h4{
font-size: 1em;
}
#calendar .col-md-6{
margin-top: 30px;
}
#calendar table{
width: 100%;
}
#calendar table td{
background-color: #fff;
padding: 10px 3px;
text-align: center;
line-height: 1rem;
border: 1px solid #1A3780;
}
#calendar tr.week td{/*曜日列*/
background-color: #1A3780;
color: #fff;
}
#calendar .holiday{/*定休日*/
background-color: #FFC9FA;
}
#calendar .other{/*他の月*/
color: #CECECE;
background-color: #fff;
}
#calendar .sunday{/*日曜・祝日*/
color: #FF0000;
}
#calendar .saturday{/*土曜*/
color: #0000FF;
}
#calendar .nyugaku{/*入学セール*/
background: #A6DDF1;
}
#calendar .newyear{/*年末年始セール*/
background: #F9FFA5;
}
#calendar .shingakki{/*新学期セール*/
background: #C2DF7C;
}
.naname-color1 {/*入学・年末年始セールかぶる日*/
  background-image:
    linear-gradient(-45deg, #F9FFA5 50%, #A6DDF1 50%, #A6DDF1);
}
.naname-color2 {/*入学・新学期セールかぶる日*/
  background-image:
    linear-gradient(-45deg, #C2DF7C 50%, #A6DDF1 50%, #A6DDF1);
}
.wed-open {/*入学・新学期セールかぶる日*/
  font-size: 14px;
  margin: 0;
  color: #808080;
}
#calendar .text{/*色説明部分*/
 margin-top: 10px;
 text-align: center;
 vertical-align:bottom;
}
#calendar .text font{
font-size: 2em;
vertical-align: text-bottom;
}
#calendar span{
font-size: 0.8rem;
display: block;
line-height: 1rem;
}
#banner h2{
max-width:  400px;
margin: auto;
text-align: center;
padding-top: 40px;
}
#banner .row{
padding-left: 15px;
padding-right: 15px;
margin-top: 15px;
text-align: center;
}
#banner .col-4{
padding: 20px 20px 20px ;
}

/*sports*/
#sports{}
#sports table img{
width: 42px;
}
#sports h4{
font-weight: 400;
font-size: 1.1em;
padding-top: 5px;
}
#sports p{
font-size: 0.8em;
line-height: 1.8em;
}
#sports td{
vertical-align: top;
padding-bottom: 5px;
}
#sports .maker{
width: 100px;
}
#flyer h4{
padding: 3rem 0 0.5rem;
font-size: 1.5rem;
line-height: 2rem;
color: #000;
}
#flyer div img{
width: 100%;
}
#flyer .row{
margin-top: 30px;
}
#maker .row{
padding-left: 15px;
padding-right: 15px;
margin-top: 15px;
}
#maker .col-4{
padding: 20px 20px 20px ;
}

/*uniform*/
#uniform .banner{
display: block;
margin-top: 70px;
}
#uniform #flyer .flyer{
margin-top: 30px;
}
#uniform #flyer .flyer_img a{
display: inline-block;
width: 250px;
margin: 20px 10px 0;
}
#uniform #flyer .flyer_img a img{
width: 100%;
}
#uniform #flyer .school{
margin: 0 0 3rem;
}
#uniform #flyer .school h4{
margin-top: 0.5rem;
width: 100%;
}
#school h3{
width: 100%;
background: linear-gradient(to right,#22743A, #223380);
color: #fff;
font-size: 1em;
text-align: center;
border-radius:1.5em;
line-height: 1em;
font-family: 'M PLUS 1p', sans-serif;
letter-spacing: 0.1em;
padding: 5px;
margin: 0;
}
#school .row{
margin-top: 15px;
}

/*company*/
#company .row{
font-family: 'M PLUS 1p', sans-serif;
border-bottom: 1px solid #D7E1E6;
padding: 10px 0;
}
#company h3{
font-size: 1em;
font-family: 'M PLUS 1p', sans-serif;
padding: 0;
margin: 5px 0;
border: none;
}
#company p{
margin: 5px 0 0;
line-height: 1.5em;
}
#company p:last-of-type{
margin: 5px 0 10px;
}

/*reserve*/
#reserve .box01{
background:#E3F0D9;
padding: 2rem;
border-radius: 2rem;
margin-bottom: 5rem;
}
#reserve .box02{
background: #F0F6FF;
padding: 2rem;
border-radius: 2rem;
margin-bottom: 5rem;
}

/*footer*/
footer{
margin-top: 50px;
}
footer section{
margin: 0;
}
#f-shop{
background: #D2DFE7;
padding: 15px 0 40px;
background-image: url("/img/logo_footer.png");
background-repeat: no-repeat;
background-position: 95% 20px ;
}
#f-shop .col-md-4{
height: 0;
overflow: hidden;
padding-bottom: 25%;
position: relative;
}
#f-shop iframe{
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
#f-shop h3{
font-size: 1.8em;
color: #595757;
font-weight: 800;
letter-spacing: 0;
border: none;
padding: 0;
margin: 0;
font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}
#f-shop h3 p{
font-size: 0.5em;
color: #231815;
font-weight: 300;
margin-bottom: 10px;
}
#f-shop address{
margin-top: 10px;
font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}
#f-shop address p{
font-size: 1.6em;
color: #595757;
font-weight: 700;
margin: 5px 0;
letter-spacing: 0.1em;
}
#f-shop img{
width: 100%;
}
#f-shop .shop-img{
padding-bottom: 20px;
}
#f-shop hr{
border-bottom: 1px solid #8E8E8E;
margin-bottom: 40px;
}
#f-shop .kyuten{
background: #E07577;
color: #fff;
padding: 0.1em 1em;
text-align: center;
margin-bottom: 1em;
}
#f-navi{
background: #163480;
padding: 5px 10px 20px;
margin: 0;
}
#f-navi a{
color: #fff;
text-decoration: none;
display: block;
}
#f-navi .f-logo{
max-width: 150px;
}
#f-navi p{
font-size: 0.9em;
font-weight: 300;
line-height: 1.7em;
padding-left: 25px;
}
#f-navi h5{
font-size: 1em;
font-weight: 400;
vertical-align:middle;
}
#f-navi h5 img{
width: 18px;
}
#f-copyright{
text-align: center;
padding: 10px;
font-size: 0.8em;
}




























/*---5カラム設定---*/
.col-lg-five-1, .col-md-five-1, .col-sm-five-1, .col-xs-five-1,
.col-lg-five-2, .col-md-five-2, .col-sm-five-2, .col-xs-five-2,
.col-lg-five-3, .col-md-five-3, .col-sm-five-3, .col-xs-five-3,
.col-lg-five-4, .col-md-five-4, .col-sm-five-4, .col-xs-five-4 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}   
.col-xs-five-1 {
  width: 20%;
  float: left;
}
.col-xs-five-2 {
  width: 40%;
  float: left;
}
.col-xs-five-3 {
  width: 60%;
  float: left;
}
.col-xs-five-4 {
  width: 80%;
  float: left;
}
@media (min-width: 768px) {
  .col-sm-five-1 {
    width: 20%;
    float: left;
  }
  .col-sm-five-2 {
    width: 40%;
    float: left;
  }
  .col-sm-five-3 {
    width: 60%;
    float: left;
  }
  .col-sm-five-4 {
    width: 80%;
    float: left;
  }
}
@media (min-width: 992px) {
  .col-md-five-1 {
    width: 20%;
    float: left;
  }
  .col-md-five-2 {
    width: 40%;
    float: left;
  }
  .col-md-five-3 {
    width: 60%;
    float: left;
  }
  .col-md-five-4 {
    width: 80%;
    float: left;
  }
}
@media (min-width: 1200px) {
  .col-lg-five-1 {
    width: 20%;
    float: left;
  }
  .col-lg-five-2 {
    width: 40%;
    float: left;
  }
  .col-lg-five-3 {
    width: 60%;
    float: left;
  }
  .col-lg-five-4 {
    width: 80%;
    float: left;
  }
}