@charset "utf-8";

#loading {
    background: #e5e5d9;
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0px;
    left: 0px;
    z-index: 9999;
}
#loading h1{
font-size: 150px;
}
.animation {
    width: 100%;
    text-align:center;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #fff;
    -webkit-animation: loadinganimation 1500ms ease-out forwards infinite;
    animation: loadinganimation 1500ms ease-out forwards infinite;
}
.animation img{
    max-width: 200px;
}
@keyframes loadinganimation {
    from,to {opacity: 0;}
    50% {opacity: .5;}
}

h1,h2,h3,h4,h5,h6,p {
  margin: 0;
}
html {
  font-size: 62.5%;
}
body {
  font-family: "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", "verdana", sans-serif;
  margin: 0;
  background-color:#e5e5d9;
}
#topbar img {
  max-width: 100%;
}
.bold {
  font-weight: bold;
}
.p-box {
  padding: 3%;
  display: flex;
  align-content: center;
  flex-direction: column;
  flex-wrap: wrap;
}
a {
  color: #fff;
  text-decoration: none;
}
.tel {
  color: #1967d2;;
}
.jump-point {
  height: 13em
}
.item-list1 {
  line-height: 0.8;
  font-size: 15vw;
  color: #C1AFA5;
  z-index: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.item-list1-1 {
  font-size: 4vw;
  color: #C1AFA5;
  z-index: 0;
}
.item-list2 {
  line-height: 0.8;
  font-size: 15vw;
  color: #C1AFA5;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: row;
}
.item-list1-2 {
  text-align: right;
  font-size: 4vw;
  color: #C1AFA5;
  z-index: 0;
}
/*----------blogー----------*/
.information ul {
  padding: 0 0.5em;
  font-size: 1.6em;
  position: relative;
}
.information ul li {
  line-height: 1.5;
  padding: 0.5em 0 0.5em;
  border-bottom: dashed 1px silver;
  list-style-type: none!important;
}
.information a {
  color: #1967d2;
}
/*----------予約ボタン----------*/
.btn-container{
  text-align: center;
  right: 0;
  bottom: 0;
  opacity: 0.6;
  transform: translateY(-20%) translateX(-15%);
  -webkit- transform: translateY(-20%) translateX(-15%);
  position: fixed;
  z-index: 500;
}
.btn{
  padding: 10px;
  background-color: #340100;
  color: #fff;
  font-size: 3vw;
  text-decoration: none;
  display: inline-block;
}
@media screen and (min-width:768px) {
    #wrap {
      display:flex;
    }
    .frame2 {
      width: 60%;
      position: relative;
      display: inline-block;
      font-size: 0;
      line-height: 0;
    }
    #flex-item1 {
      display: flex;
      flex-direction: row;
      width: 100%;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
    }
    .item-box1 {
      width: 40%;
      position: relative;
      display: inline-block;
      line-height: 0;
      order:1;
    }
    .item-box2 {
      width: 60%;
      font-size: 1.3vw;
      order:2;
    }
    .item-box3 {
      width: 40%;
      position: relative;
      display: inline-block;
      line-height: 0;
      order:4;
    }
    .item-box4 {
      width: 60%;
      font-size: 1.3vw;
      order:3;
    }
    .item-box5 {
      width: 35%;
      position: relative;
      display: inline-block;
      line-height: 0;
      order:2;
    }
    .item-box6 {
      width: 65%;
      font-size: 1.3vw;
      order:1;
    }
    .item-box7 {
      width: 35%;
      position: relative;
      display: inline-block;
      line-height: 0;
      order:3;
    }
    .item-box8 {
      width: 65%;
      font-size: 1.3vw;
      order:4;
    }
    .item-box9 {
      width: 35%;
      position: relative;
      display: inline-block;
      line-height: 0;
      order:1;
    }
    .item-box10 {
      width: 65%;
      font-size: 1.3vw;
      order:2;
    }
/*----------スクール----------*/
    .p-box2 {
      padding: 3%;
      display: flex;
      align-content: center;
      flex-direction: column;
      flex-wrap: wrap;
      font-size: 2vw;
    }
    .p-box3 {
      padding: 3%;
      margin: 3%;
      color: #fff;
      display: flex;
      align-content: center;
      flex-direction: column;
      flex-wrap: wrap;
      font-size: 2vw;
      background: #340100;
    }
    .course-box1 {
      width: 50%;
      position: relative;
      display: inline-block;
      line-height: 0;
      order:1;
    }
    .course-box2 {
      width: 50%;
      font-size: 1.3vw;
      order:2;
    }
    .course-box3 {
      width: 50%;
      position: relative;
      display: inline-block;
      line-height: 0;
      order:2;
    }
    .course-box4 {
      width: 50%;
      font-size: 1.3vw;
      order:1;
    }
    .course-box5 {
      width: 50%;
      position: relative;
      display: inline-block;
      line-height: 0;
      order:1;
    }
    .course-box6 {
      width: 50%;
      font-size: 1.3vw;
      order:2;
    }
/*----------サイドバー----------*/
    .sidebar {
      background-color:#340100;
      width:320px;
      text-align:center;
      top: 0;
      z-index: 1;
    }
    @media (min-height: 800px) {
     .sidemenu {
      position: sticky;
      position: -webkit-sticky;
      top: 0;
      }
    }
    .icn img {
      width: 100%;
      height: auto;
      display: block;
    }
    .menu-font {
      font-family: 'Gabriola','Apple Chancery',sans-serif;
      font-size: 4em;
      color: #fff;
      height: auto;
    }
    .side-title {
      font-family: 'Gabriola','Apple Chancery',sans-serif;
      font-size: 3em;
      color: #fff;
    }
    .side-title h1 {
      font-family: 'Gabriola','Apple Chancery',sans-serif;
      font-size: 1em;
      color: #fff;
    }
    .side-subtitle {
      font-size: 0.7em;
    }
    .copyright {
      font-family: 'Gabriola','Apple Chancery',sans-serif;
      font-size: 0.7em;
      color: #fff;
    }
    .menu-font ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .slide-sp {
     display:  none;
   }
}
@media screen and (max-width: 767px) {
   #wrap {
     margin: 71px 0 0;
   }
   #flex-item1 {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
   }
   .item-box1 {
     width: 90%;
     position: relative;
     display: inline-block;
     line-height: 0;
   }
   .item-box2 {
     width: 90%;
     font-size: 3vw;
   }
   .item-box3 {
     width: 90%;
     position: relative;
     display: inline-block;
     line-height: 0;
   }
   .item-box4 {
     width: 90%;
     font-size: 3vw;
   }
    .item-box5 {
      width: 90%;
      position: relative;
      display: inline-block;
      line-height: 0;
      order:1;
    }
    .item-box6 {
      width: 90%;
      font-size: 3vw;
      order:2;
    }
    .item-box7 {
      width: 90%;
      position: relative;
      display: inline-block;
      line-height: 0;
      order:3;
    }
    .item-box8 {
      width: 90%;
      font-size: 3vw;
      order:4;
    }
    .item-box9 {
      width: 90%;
      position: relative;
      display: inline-block;
      line-height: 0;
      order:1;
    }
    .item-box10 {
      width: 90%;
      font-size: 3vw;
      order:2;
    }
/*----------スクール----------*/
    .p-box2 {
      padding: 3%;
      display: flex;
      align-content: center;
      flex-direction: column;
      flex-wrap: wrap;
      font-size: 3vw;
    }
    .p-box3 {
      padding: 3%;
      margin: 3%;
      color: #fff;
      display: flex;
      align-content: center;
      flex-direction: column;
      flex-wrap: wrap;
      font-size: 3vw;
      background: #340100;
    }
     .course-box1 {
      width: 90%;
      position: relative;
      display: inline-block;
      line-height: 0;
      order:1;
    }
    .course-box2 {
      width: 90%;
      font-size: 3vw;
      order:2;
    }
    .course-box3 {
      width: 90%;
      position: relative;
      display: inline-block;
      line-height: 0;
      order:1;
    }
    .course-box4 {
      width: 90%;
      font-size: 3vw;
      order:2;
    }
    .course-box5 {
      width: 90%;
      position: relative;
      display: inline-block;
      line-height: 0;
      order:1;
    }
    .course-box6 {
      width: 90%;
      font-size: 3vw;
      order:2;
    }
/*----------サイドバー----------*/
   #topbar {
     width: 100%;
     height: 70px;
     position: fixed;
     background-color: #340100;
     opacity: 0.8;
     top: 0;
     z-index: 3;
     display: flex;
     flex-direction: row;
     align-items: center;
   }
   .hamburger {
     display : block;
     position: fixed;
     z-index : 3;
     right : 13px;
     top   : 12px;
     width : 42px;
     height: 42px;
     cursor: pointer;
     text-align: center;
     opacity: 0.8;
     background-color: #340100;
   }
   .hamburger span {
     display : block;
     position: absolute;
     width   : 30px;
     height  : 4px ;
     left    : 6px;
     background : #fff;
     border-radius: 4px;
     -webkit-transition: 0.3s ease-in-out;
     -moz-transition   : 0.3s ease-in-out;
     transition        : 0.3s ease-in-out;
   }
   .hamburger span:nth-child(1) {
     top: 9px;
   }
   .hamburger span:nth-child(2) {
     top: 19px;
   }
   .hamburger span:nth-child(3) {
     top: 29px;
   }
/*----------ナビ開いてる時のボタン----------*/
   .hamburger.active span:nth-child(1) {
     top : 16px;
     left: 6px;
     background :#fff;
     -webkit-transform: rotate(-45deg);
     -moz-transform   : rotate(-45deg);
     transform        : rotate(-45deg);
   }
   .hamburger.active span:nth-child(2),
   .hamburger.active span:nth-child(3) {
     top: 16px;
     background :#fff;
     -webkit-transform: rotate(45deg);
     -moz-transform   : rotate(45deg);
     transform        : rotate(45deg);
   }
   .menu-font {
     position: fixed;
     z-index : 2;
     top  : 0;
     left : 0;
     color: #fff;
     background: rgba(0,0,0,0.7);
     text-align: center;
     width: 100%;
     opacity: 0;
     visibility: hidden;
     transition: opacity .6s ease, visibility .6s ease;
   }
   .menu-font ul {
     margin: 0 auto;
     padding: 0;
     width: 100%;
     display: flex;
     flex-direction: column;
     background-color: #340100;
     height: 100vh;
     justify-content: center;
   }
   .menu-font ul li {
     list-style-type: none;
     padding: 0;
     width: 100%;
     font-size: 2.5vh;
     transition: .4s all;
   }
   .menu-font ul li:last-child {
     padding-bottom: 0;
   }
   .menu-font ul li a {
     font-family: 'Gabriola','Apple Chancery',sans-serif;
     display: block;
     color: #fff;
     font-size: 6vh;
     text-decoration :none;
   }
/*----------このクラスを、jQueryで付与・削除する----------*/
   .menu-font.active {
     opacity: 100;
     visibility: visible;
   }
   #topbar img {
     width: 100px;
     height: auto;
     position: fixed;
     top: 0;
   }
   .side-title {
     font-family: 'Gabriola','Apple Chancery',sans-serif;
     font-size: 5vw;
     color: #fff;
     margin: 0 auto;
   }
   .side-title h1 {
     font-family: 'Gabriola','Apple Chancery',sans-serif;
     font-size: 5vw;
     color: #fff;
     margin: 0 auto;
   }
   .side-subtitle {
     display:  none;
   }
   .slide {
     display:  none;
   }
   .slide-sp {
     position: relative;
     width: 100%;
     overflow: hidden;
   }
   @keyframes slideshow{
     0%{
       opacity: 0;
     }
     10%{
       opacity: 1;
     }
     28%{
       opacity: 1
     }
     38%{
       opacity: 0;
     }
     100%{
       opacity: 0;
     }
   }
    
   .slide-sp img {
     width: 90%;
     overflow: hidden;
     opacity: 0;
     top: 50%;
     left: 50%;
     transform: translateY(-50%) translateX(-50%);
     -webkit- transform: translateY(-50%) translateX(-50%);
     padding: 4% 0;
     animation :slideshow 24s linear infinite;
   }
    
   .slide-sp img:nth-child(2){
     animation-delay: 8s;
   }
    
   .slide-sp img:last-child{
     animation-delay: 16s;
   }
   .slide1,.slide2 {
     position: absolute;left:0px;top:0px;width: 100%;height: auto;
   }
   .slide0 {
     position: relative;width: 100%;height: auto;
     vertical-align:bottom;
   }
}
#flex-item1 img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
#flexbox {
  display:flex;
  flex-direction: column;
  width: 100%;
}
#home-frame1 {
  position: relative;
}
#home-frame2 {
  width: 70%;
  position: absolute;
  top: 0;
  left: 0;
  z-index:1;
}
#home-frame2 img{
  max-width: 100%;
  height: auto;
}
/*----------縁ぼかし＆画像----------*/
.frame > img {
  margin: 0;
  padding: 0;
  border: 0;
}
.frame:after {
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  -moz-box-shadow: inset 0px 0px 15px 15px #e5e5d9;
  -webkit-box-shadow: inset 0px 0px 15px 15px #e5e5d9;
  box-shadow: inset 0px 0px 5px 5px #e5e5d9;
  content: " ";
}
/*----------フェードインフェードアウト----------*/
.left-to-right {
  opacity: 0.001;
  transform: translateX(-20px);
  transition: all 1.5s;
}
.left-to-right.scrollin {
  opacity: 1;
  transform: translate(0);
}
.right-to-left {
  opacity: 0.001;
  transform: translateX(20px);
  transition: all 1.5s;
}
.right-to-left.scrollin {
  opacity: 1;
  transform: translate(0);
}
.down-to-top {
  opacity: 0.001;
  transform: translateY(20px);
  transition: all 1.5s;
}
.down-to-top.scrollin {
  opacity: 1;
  transform: translateY(0);
}
/*----------スライドショー-----------*/
.slide-wrap {
  display: flex;
}
.slide {
  position: relative;
  width: 100%;
  overflow: hidden;
}
@keyframes slideshow{
  0%{
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  28%{
    opacity: 1
  }
  38%{
    opacity: 0;
  }
  100%{
    opacity: 0;
  }
}
 
.slide img {
  width: 90%;
  overflow: hidden;
  opacity: 0;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  padding: 4% 0;
  animation :slideshow 24s linear infinite;
}
 
.slide img:nth-child(2){
  animation-delay: 8s;
}
 
.slide img:last-child{
  animation-delay: 16s;
}
.slide1,.slide2 {
  position: absolute;left:0px;top:0px;width: 100%;height: auto;
}
.slide0 {
  position: relative;width: 100%;height: auto;
  vertical-align:bottom;
}
/*----------ボタン----------*/
.button {
  width: 50%;
  position: relative;
  margin: 0 auto;
  background-color: #7b5c57;
  border-radius: 4px;
  color: #fff;
  text-align: center;
  line-height: 52px;
  -webkit-transition: none;
  transition: none;
  box-shadow: 0 3px 0 #340100;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
.button:active {
  top: 3px;
  box-shadow: none;
}
/*----------インスタボタン----------*/
#flexbox2 {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
}
.insta_btn {
  color: #FFF;
  border-radius: 14px;
  position: relative;
  height: 60px;
  width: 60px;
  margin: 10px;
  padding-top: 12px;
  box-sizing: border-box;
  background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
  overflow: hidden;
}
.insta_btn:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: -webkit-linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
  background: linear-gradient(15deg, #ffdb2c, rgb(249, 118, 76) 25%, rgba(255, 77, 64, 0) 50%) no-repeat;
}
.insta_btn .instagram {
  width: 80%;
  margin: auto;
  display: flex;
  flex-direction: column;
  top: -6px;
  position: relative;
  transition: .5s
}
.insta_btn .instagram:hover {
  -webkit-transform: rotateX(360deg);
  -ms-transform: rotateX(360deg);
  transform: rotateX(360deg);
}
/*----------ツイッターボタン----------*/
.twitter_btn {
  border-radius: 14px;
  height: 60px;
  width: 60px;
  margin: 10px;
  padding-top: 11px;
  box-sizing: border-box;
  background: #1DA1F2;
}
.twitter_btn .twitter {
  width: 100%;
  margin: auto;
  display: flex;
  flex-direction: column;
  top: -11px;
  position: relative;
  transition: .5s
}
.twitter_btn .twitter:hover {
  -webkit-transform: rotateX(360deg);
  -ms-transform: rotateX(360deg);
  transform: rotateX(360deg);
}
/*----------タイトル----------*/
.sub-title01, .sub-title03 {
  font-size: 3vw;
  position: absolute;
  color: #340100;
  top: 0;
  left: 0;
}
.sub-title02, .sub-title04 {
  font-size: 3vw;
  position: absolute;
  color: #340100;
  top: 0;
  right: 0;
}
.title01 {
  color: #340100;
  font-size: 4vw;
  font-weight: bold;
}
.title02 {
  color: #340100;
  font-size: 4vw;
  font-weight: bold;
}
.title03 {
  color: #340100;
  font-size: 4vw;
  font-weight: bold;
}
.title04 {
  color: #340100;
  font-size: 4vw;
  font-weight: bold;
}
/*----------フッター----------*/
#footer1 {
  width: 60%;
}
#footer2 {
  width: 40%;
}
#flex-item2 {
  display: flex;
  flex-direction: row;
  width: 100%;
}
#footer2 img{
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
#footer-menu {
  background-color:#340100;
  padding: 0px 0 100px 0;
}
/*----------スクール----------*/
.t1 {
  display: block;
  margin: 5px;
}
.top-img {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.top-img img{
  width: 90%;
  overflow: hidden;
  transform: translateY(0%) translateX(5%);
  -webkit- transform: translateY(0%) translateX(5%);
  padding: 4% 0;
}
.p-title {
  font-size: 3vw;
  text-align: center;
}
.p-title2 {
  font-size: 3vw;
  text-align: center;
}
.p-title2 a{
  color: #fff;
  border-bottom:solid;
  border-color:#fff;
  border-width:5px;
}
.syoukai {
  width: 40%;
  margin: 0 auto;
}
.syoukai img{
  max-width: 100%;
  height: auto;
}
.course01 {
  color: #340100;
  font-size: 3vw;
  font-weight: bold;
  transform: translateY(20%) translateX(0%);
  -webkit- transform: translateY(20%) translateX(0%);
}
.course02 {
  color: #340100;
  font-size: 3vw;
  font-weight: bold;
  transform: translateY(20%) translateX(0%);
  -webkit- transform: translateY(20%) translateX(0%);
}
.course03 {
  color: #340100;
  font-size: 3vw;
  font-weight: bold;
  transform: translateY(20%) translateX(0%);
  -webkit- transform: translateY(20%) translateX(0%);
}
.space {
  margin: 50px;
}