@charset "UTF-8";
@import url("reset.css");
*{ -webkit-text-size-adjust: 100%;}
img{ vertical-align: bottom;}
a{ color: #00b7ee;-webkit-transition: 0.4s;transition: 0.4s;}
a:visited {}
a:hover { color: #1e66b8;-webkit-transition: 0.6s;transition: 0.6s;}

body{
  font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';
  font-size: 2.4vw;
  color: #222222;
  color: #42515a;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: center;
  letter-spacing: normal;
  width: 100%;
  background-color: #fff;
  position: relative;
  z-index: 0;
}

/*-----------------------------------------------*/
/*+++　Header　+++*/
#header{
  text-align: left;
  margin: auto;
  padding: 1% 2%;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  background-color: #4169e1;
  position: relative;
  z-index: 10;
}
#header a{
  color: #fff;
  text-decoration: none;
}
#header-h1{
  vertical-align: middle;
  display: inline-block;
  width: 35%;
  font-size: 5vw;
  text-align:center;
}
#header-h1 span{
  display: block;
  margin-bottom: .2em;
  color: #fff;
  font-size: 2.5vw;
}
#header-p{
  vertical-align: bottom;
  display: inline-block;
  font-size: 4vw;
  width: 35%;
  color: #fcfaf2;
  text-align:left;
  letter-spacing: 0.15em;
}
#header-nav{
  vertical-align: bottom;
  display: inline-block;
  width: 58%;
}
.header-external-link{
  width: 100%;
  text-align: right;
}
.header-external-link li{
  vertical-align: middle;
  display: inline-block;
  margin: auto 1.4vw;
}
.header-external-link li > a{
  display: block;
  font-family: Fontisto;
  text-decoration: none;
  font-size: 2vw;
  color: #4169e1;
}
.facebook-pc::before{
  content: "\e918";
}
.twitter-pc::before{
  content: "\e942";
}
.instagram-pc::before{
  content: "\e922";
}
.line-pc::before{
  content: "\ea8d";
}
#header-ul{
  width: 100%;
  text-align: right;
}
#header-ul li{
  vertical-align: bottom;
  display: inline-block;
  margin: auto ;
}
#header-ul li > a{
  display: block;
  font-size: 1.8vw;
  font-weight: 200;
  white-space: nowrap;
  padding: 1vw 2vw 0 2vw;
  border-radius: 2px 2px 0 0 / 2px 2px 0 0;
  -moz-border-radius: 2px 2px 0 0 / 2px 2px 0 0;
  -webkit-border-radius: 2px 2px 0 0 / 2px 2px 0 0;
}
#header-ul li > a:hover{
  color: #fff;
  background-color: #87a0e8;
}

@media screen and (max-width: 479px) {
  #header-nav { 
    display:none !important; 
  }
}
@media screen and (min-width: 479px) {
  #header{
    padding: 0 2% !important; 
    border-bottom: 4px solid rgba(242,246,247, .4) !important; 
  }
  #header > div{
  }
  #header-h1{
    width: 25% !important; 
    font-size: 4vw !important; 
  }
  #header-p{
    font-size: 3vw !important;
    font-weight: 200 !important; 
    width: 17% !important; 
    text-align: center;
  }
  #drawer-hamburger-waku {
    display:none !important; 
  }
  .drawer-nav{
    display:none !important; 
  }
}
/*-----------------------------------------------*/
/*+++　Footer　+++*/
footer{
  padding: 4% 0 0 0;
  background-color: #f6f8f9;
}
.footer-external-link{
  width: 100%;
  text-align: left;
}
.footer-external-link li{
  vertical-align: middle;
  display: inline-block;
  margin: auto 3vw;
}
.footer-external-link li > a{
  display: block;
  font-family: Fontisto;
  text-decoration: none;
  font-size: 7vw;
  color: #4169e1;
}
#copyright{
  font-size: 3vw;
  padding: 0 2% 0 0;
  text-align: right;
  color: #fff;
  background-color: #4169e1;
}

/*-----------------------------------------------*/
/*+++　Side Menu　+++*/
.drawer-nav{

}
.drawer-nav > h2{
  background-color: #394e7d;
  font-size: 4vw;
  color: #fff;
}
.drawer-ul{
  text-align: left;
  margin: 2% auto;
}
.drawer-ul li{
  margin: 1% auto;
}
.drawer-ul li > a{
  display: block;
  color: #4169e1;
  font-size: 3.6vw;
  font-weight: 300;
  text-decoration: none;
  padding: 5% 2%;
  border-bottom: 1px dotted #4169e1;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
.drawer-ul li > a::before{
  font-family: Fontisto;
  content: "\e96a";
  color: #4169e1;
  font-size: 3vw;
  font-weight: 100;
  padding: 0 2% 0 0;
}
.external-link{
  margin: 10% auto 2% auto;
}
.external-link li{
  vertical-align: top;
  display: inline-block;
  width: 24%;
  margin: auto .5%;
}
.external-link li > a{
  display: block;
  font-family: Fontisto;
  text-decoration: none;
  font-size: 7vw;
  color: #4169e1;
}
.facebook-sp::before{
  content: "\e918";
}
.twitter-sp::before{
  content: "\e942";
}
.instagram-sp::before{
  content: "\e922";
}
.line-sp::before{  font-family: Fontisto;
  content: "\ea8d";
}