* {
    margin: 0 auto;
    /* .kiwi-maru-regular {
        font-family: "Kiwi Maru", serif;
        font-weight: 400;
        font-style: normal;
      } */
      
      font-family: "Kiwi Maru", serif;
    font-weight: 300;
    font-style: normal;
}


   
  
  

h1,h2,h3 {
    text-align: center;
}

h1 {
    margin-bottom: 5%;
}

h2 {
    margin-bottom: 5%;
    border-bottom: 1px solid #cba2d1;
    display: inline-block;
    

}

h3 {
    margin-top: 15px;
   
}

html {scroll-behavior: smooth;}

body {
    animation: bugfix infinite 1s;
    -webkit-animation: bugfix infinite 
}

section {
    padding-top: 10%;
}
header {
    background-image: url(img/top.JPG);
    background-size: cover;
    background-repeat: no-repeat;
    /* height: 650px; */
    min-height:100vh;
}







/* スクロール */

/*スクロールダウン全体の場所*/
.scrolldown4{
    /*描画位置※位置は適宜調整してください*/
  position:absolute;
  bottom:0%;
  right:50%;
    /*矢印の動き1秒かけて永遠にループ*/
  animation: arrowmove 1s ease-in-out infinite;
}

/*下からの距離が変化して全体が下→上→下に動く*/
@keyframes arrowmove{
      0%{bottom:1%;}
      50%{bottom:3%;}
     100%{bottom:1%;}
 }

/*Scrollテキストの描写*/
.scrolldown4 span{
    /*描画位置*/
  position: absolute;
  left:-20px;
  bottom:10px;
    /*テキストの形状*/
  color: #b50909;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  /*縦書き設定*/
  -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

/* 矢印の描写 */
.scrolldown4:before {
    content: "";
    /*描画位置*/
    position: absolute;
    bottom: 0;
    right: -6px;
    /*矢印の形状*/
    width: 1px;
    height: 20px;
    background: #b50909;
    transform: skewX(-31deg);
}

.scrolldown4:after{
  content:"";
    /*描画位置*/
  position: absolute;
  bottom:0;
  right:0;
    /*矢印の形状*/
  width:1px;
  height: 50px;
  background:#b50909;
}

/*========= レイアウトのためのCSS ===============*/



#header{
  width:100%;
  height: 100vh;
  position: relative;
} 

/* #header:before{
  content: '';
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  width:100%;
  height: 100vh;
 
  background:url("https://coco-factory.jp/ugokuweb/wp-content/themes/ugokuweb/data/9-1-4/img/01.jpg") no-repeat center;
  background-size:cover;
} */

/* #container{
  position: relative;
  z-index:1;
  background:#eee;
  padding:600px 0;
  text-align: center;
} */

@media screen and (max-width:768px){

    #header,
    #header:before{
  height: 90vh;    
    }
    
}

.aboutspf {
    background-color: #efc3ec;
    padding: 10%;
    height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    
}

.h2div {
    text-align: center;
}
.kyoku_img {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.kyoku_img img {
   
    margin: 0;
}
.content {
    margin-top: 7%;
    padding: 0% 15%;
}

.content p{
    border: 1px solid #cba2d1;
    border-radius: 20px;
    padding: 4%;
}

.schedule img {
    height: 100%;
    width: 100%;
}
.others {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 70px;
}
.others p{
    text-align: left;
    line-height: 50px;
    padding: 4%;
}

ul {
    padding: 0;
    list-style: none;
  }
  
  a {
    color: #4b5564;
    text-decoration: none;
  }
  
  a:hover {
    color: #000;
  }
  
  hr {
    height: 1px;
    border: 0;
    border-top: 1px solid #e5e7eb;
  }
  
  .grid {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  
  .footer {
    padding-top:   1.5rem;
    
    font-size: 15px;
    color: #4b5564;
    background: #efc3ec;
  }
  
  .footer__navi-heading {
    font-weight: 600;
    border-bottom: 0.7px solid #511959;
  }
  
 
  
  .footer__navi li {
    margin-bottom: 0.5rem;
  }
  
  .copyright {
    text-align: center;
    padding-top: 7px;
  }


  /* スクロール */
  .wrapper{
    overflow: hidden;
    position: relative;
     z-index:1;
  }
  
  
  .box{
    /* width: 220px;
    padding: 20px;
    margin:0 20px 20px 0; */
    /* color: #fff; */
    box-sizing:border-box;
  }
  
  
  
  /*==================================================
  ふわっ
  ===================================*/
  
  
  /* fadeUp */
  
  .fadeUp{
  animation-name:fadeUpAnime;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
  opacity:0;
  }
  
  @keyframes fadeUpAnime{
    from {
      opacity: 0;
    transform: translateY(100px);
    }
  
    to {
      opacity: 1;
    transform: translateY(0);
    }
  }
  
  
  /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
   
  .fadeUpTrigger{
      opacity: 0;
  }
  
  @media (min-width: 768px) {
    .md-flex {
      display: flex;
    }
  
    /* .md-justify-between {
      justify-content: space-between;
    } */
  
    .grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }