@charset "UTF-8";

*{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html{
  font-family: "Zen Old Mincho", serif;
  font-size: 62.5%;
  font-style: normal;
  text-align: justify;
  letter-spacing: 2.0px;
}

ul,ol{
  list-style: none;
}
a{
  display: block;
  text-decoration: none;
  color: #000000;
}
img{
height: auto;
vertical-align: bottom;
}

h1{
  padding: 50px 0 0 0;
text-align: center;
}

.pc_header.pc_footer{
  display: block !important; 
}
/* .pc{
  display: block !important; 
} */

.openbtn1 ,#g-nav,.sp_footer{
  display: none !important;
}
nav{
  padding-bottom: 10px;
}
nav ul{
  display: flex;
  justify-content: space-around;
  max-width: 1400px;
  padding: 20px 0 0 10px;
  margin: 0 auto;
}

nav ul li a{
  font-size: 1.8rem;
  color: #000000;
}
.karate{
  position: absolute;
  z-index: 5;
  top: 30%;
  left: 36%;
}
.firstview_pc{
  display: block !important; 
  position: relative; 
  width: 100%;
  height:90vh;
}
.firstview img{
   position: relative;
  }
  .firstview_sp{
    display: none !important;
    position: relative; 
    width: 100%;
    height:90vh;
  }
  .firstview_sp img{
     position: relative;
    }

   /* firstview movie */
   .karate{
    position: absolute;
    z-index: 5;
    top: 30%;
    left: 36%;
   }
   .movie {
    position: relative;
    width: 100%;
    height: 80vh;
    overflow: hidden;
  }
  
  .movie::after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 90vh;
    background-color: rgba(255, 255, 255, 0.5);
    background-image: radial-gradient(#111 30%, transparent 31%), radial-gradient(#111 30%, transparent 31%);
    background-size: 4px 4px;
    background-position: 0 0, 2px 2px;
  }
      /* 上部スクロールボタン */
      .block{
        height: 300px;
      }
      .banner_fixed
      {
        position: fixed;
        z-index: 1;
        bottom: 150px;
        right: 10px;
      }
      .banner_fixed2
      {
        position: fixed;
        z-index: 1;
        bottom: 100px;
        right: 45px;
      }
      #scroll-to-top-btn{
        position: fixed;
        z-index: 1;
        bottom: 40px;
        right: 45px;
        height: 50px;
        width: 50px;
        color: #FFF;
        font-size: 32px;
        background-color: #9E9E9E;
        border: none;
        border-radius: 50%;
        outline: none;
        transform: rotate(-90deg);
        opacity: 0;
        transition-duration: 0.5s;
      }
      
main{
  font-size: 1.8rem;
}

.history{
  padding: 100px 0 50px 0;
  background-image: url(image/bg_img03.png);
}
.history h2{
  padding-bottom: 30px;
  margin: 0 auto;
  font-size: 6.4rem;
  font-weight:normal;
}

.lesson h2,#leader h2,.introduction h2,.youtube h2,.gallery h2,.access h2,.firstview_flex h2,.lesson_step h2,.family h2,#schedule h2,#price h2,#join h2,#privacypolicy h2{
  max-width: 1200px;
  padding-bottom: 30px;
  margin: 0 auto;
  text-align: center;
  font-size: 6.4rem;
  font-weight:normal;
}
#price h2{
  padding-bottom: 0;
}

.history_flex {
  display: flex;
  justify-content: center;
  align-items:center ;
}

.history_txt{
  padding: 50px;
  width: 60%;
  margin: 0 auto;
}
.history_img{
  max-width: 460px;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.btn{
  display: grid;
  justify-content: flex-end;
}
.btn a{
  width: 250px;
  padding: 15px;
  margin-top: 30px;
  text-align: center;
border: 1px solid #666;
}
.lesson {
  max-width: 1200px;
  padding: 100px 0 100px 0;
  margin: 0 auto;
}

.lesson p{
  padding-bottom: 30px;
  text-align: center;
  }

.lesson_item{
  padding: 30px 30px 0 30px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
  gap: 30px;
}
.lesson_item li{
  width: 250px;
  padding: 15px;
  text-align: center;
  background-color: #969590;
  background-image: url(image/bg_img03.png);
}
.lesson div{
  border: 4px solid #F9F8F1;
}
.lesson .btn{
  margin-right: 50px;
}
#leader{
max-width: 1200px;
padding: 100px 0 100px 0;
margin: 0 auto;

}
.leader_flex, .gallery_flex, .access_flex, .link_flex{
  display: flex;
  justify-content: center;
  align-items: center;
}
.leader_txt{
  padding-left: 30px;
}
.leader_txt .name{
  padding-bottom: 10px;
  font-size: 2.4rem;
}
.leader_txt .comment{
  padding: 15px 0 0 0;
}
.leader_txt .name span{
  font-size: 1.6rem;
}
.leader_txt .item li{
  width: 50px;
  height: 30px;
  /* margin: 10px 10px 5px 10px; */
}
.leader_txt .item span{

  padding: 0 5px 0 0;
  /* margin: 10px 10px 5px 10px; */
  /* background-color: #F9F8F1; */
  /* border: 1px solid #969590; */
}

.introduction{
  padding: 100px 0 100px 0;
  margin: 0 auto;
  background-image: url(image/bg_img03.png);
  }

  .introduction p{
      max-width: 1200px;
      padding-bottom: 30px;
      margin: 0 auto;
text-align: center;
  }
.introduction_item{
  display: flex;
  justify-content: center;
  gap: 30px;
}
.introduction_item li {
  width: 250px;
  padding: 15px;
  text-align: center;
  background-color: #F9F8F1;
}
.youtube {
    max-width: 1200px;
    height: auto;
    padding: 100px 0 100px 0;
  margin: 0 auto;
  text-align: center;
}

  .gallery{
    padding: 100px 0 100px 0;
    margin: 0 auto;
    }
    .gallery_flex img{
      padding-right: 10px;
      opacity: 0.9;
    }

    .access{
      max-width: 1200px;
      padding: 100px 0 100px 0;
      margin: 0 auto;
      }

      .access_txt{
        padding-right: 30px;
      }
address{
  font-style:normal;
}

footer{
padding: 50px 20px;
background-color: #F9F8F1;
}
      footer h2{
        padding: 50px  20px;
        text-align: center;
      } 
      footer h2 img{
        max-width: 100%;
        height: auto;
      }
      .link_flex{
        gap: 30px;
      }
      .link_flex li{
        width: 300px;
        padding: 15px;
        text-align: center;
        font-size: 1.6rem;
        background-image: url(image/bg_img03.png);
      }

      footer nav{
          max-width: 1100px;
          margin: 0 auto;
          display: flex;
          justify-content: center;
      }
      footer nav ul {
        padding: 20px 0 0 10px;
        display: flex;
        justify-content: flex-start;
        flex-direction: column;
        flex-wrap: wrap;
      /* li aの4つ分の高さと同じくする */
        height: calc(30px * 6);
        align-items: flex-start;
      }
      
      footer nav ul li a{
        font-size: 14px;
      }

      footer .small{
        padding-top: 50px;
      text-align: center;
      }
     
     /*----------------------------
scroll_up ｜下から上へ出現
----------------------------*/
.scroll_up {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.scroll_up.on {
  transform: translateY(0);
  opacity: 1.0;
} 
      @media screen and (max-width: 1200px){

        main{
          font-size: 1.6rem;
        }
        h1{
          padding: 30px 0 0 0;
        }

nav ul li a{
  font-size: 1.6rem;
  color: #000000;
}
        .history,.ancestor,.document,.genealogy h2,.youtube,.lesson,#lesson,#leader,.introduction,.gallery,.access{
          padding: 50px 30px;
        }
        .history h2{
          padding-bottom: 15px;        
          text-align: center;
          font-size: 5.0rem;
        }
        .lesson h2,#leader h2,.introduction h2,.youtube h2,.gallery h2,.access h2,.firstview_flex h2,.genealogy h2,.lesson_step h2,.family h2,#schedule h2,#price h2,#join h2,#privacypolicy h2{
          padding-bottom: 15px;
          margin: 0 auto;
          text-align: center;
          font-size: 5.0rem;
          font-weight:normal;
        }

        .history_txt{
          padding: 0 20px 0 0;
          margin: 0 auto;
        }

        .history_img {
          max-width: 390px;
          justify-content: center;
        }
        .history_img img{
          max-width: 180px;
          justify-content: center;
          flex-wrap: nowrap;
}
.btn a {
  margin-top: 15px;
}
.lesson .btn{
  margin-right: 30px;

}
.leader_txt .name span{
  font-size: 1.4rem;
}
iframe{
  width: 100%;
  height: auto;
}
.youtube iframe{
  height: 400px;
}
.link_flex li{
  font-size: 1.4rem;
}}
      @media screen and (max-width: 768px){
        
        .pc_header,.pc_footer{
          display: none !important; 
        }
        
        .openbtn1 ,#g-nav,.sp_footer{
          display: block !important;
        }

        nav{
          padding-bottom: 10px;
        }
        nav ul{
            display: block;    
          padding: 0px;
          margin: 0 auto;
        }
        
        nav ul li a{
          font-size: 1.4rem;
          color: #000000;
        }
        #banner ,#facebook{
          display: none !important; 
        }
           

/* ハンバーガーメニューここから */
#g-nav{
  display: block !important;
}
nav ul{
    display: block;

}
    .history h2,.lesson h2,#leader h2,.introduction h2,.youtube h2,.gallery h2,.access h2,.firstview_flex h2,.genealogy h2,.lesson_step h2,.family h2,#schedule h2,#price h2,#join h2,#privacypolicy h2{
    font-size: 3.2rem;
           }
           .history_img{
            gap: 0;
           }
           .history_img img{
            max-width: 95px;
  }
  .lesson_item{
    padding: 15px 15px 0 15px;
    gap: 15px;
  }
  .lesson_item li{
    max-width: 160px;
  }
  #leader img{
    width: 372px;
  }
  .introduction_item{
    flex-wrap: wrap;
    gap: 30px;
  }
  .link_flex li{
    font-size: 1.3rem;
  }
footer h2{
  padding: 0 0 20px 0;
}
  footer h2 img{
    padding: 0 0 20px 0;
    text-align: center;
  } 
  .pc{
    display: none !important; 
  }
  
  .sp{
    display: block !important;
  }
  footer nav {
    display: block;
    padding: 10px 0 0 0 ;
  }

  footer nav  .details,.js-details{
    padding: 20px;
    font-size: 1.4rem;
    border-bottom: 1px solid #969590;
  }
        header{
          z-index: 5;
          position: fixed;
          width: 100%;
          height: 90px;
          display: flex;
          justify-content: space-between;
        margin: auto;
        background-color: #fff;
         }
        main{
          font-size: 1.4rem;
        }
        
        h1{
          padding: 10px 0 0 0 ;
          text-align: left;
        }
        h1 img{
          max-width: 85%;
          height: auto;
          padding: 16px 0 0 0;
        }
        .history{
          padding: 40px 20px 40px 20px;
        }
        .lesson,#leader,.introduction,.gallery{
          padding: 40px 20px;
        }
        .access{
          padding: 40px 20px 80px 20px;
        }
        .history_flex {
          flex-wrap: wrap;
          justify-content: space-around;
        }
        .history_txt{
          width: 100%;
          padding: 0 0 20px 0;
          text-align: center;
          margin: 0 auto;
        }
        .history_img{
          flex-wrap: nowrap;
          justify-content: space-around;
          gap: 10;
        }
        .history_img img{
          width: 110%;
}
        .leader_flex{
          flex-wrap: wrap;
          text-align: center;
        }
        .leader_txt{
          padding: 0;
        }
        .leader_txt .name span{
          font-size: 1.2rem;
        }
        
.btn{
  display: grid;
  justify-content: center;
}
.lesson .btn{
  margin-right: 0px;
}
.lesson_item{
  padding: 15px 15px 0 15px;
  gap: 15px;
}
.lesson_item li{
  width: 200px;
  padding: 15px;
}
.lesson p{
  padding-bottom: 15px;
  }
  .youtube {

    padding: 40px 20px;
  }
  .youtube iframe{
    max-width: 708px;
    height: 341px;
}
  footer{
    padding: 40px 20px;
    }
  footer h2{
    padding: 0 0 20px 0;
  }
  footer h2 img{
    max-width: 100%;
    height: auto;
  }
  
  #scroll-to-top-btn{
    position: fixed;
    z-index: 5;
    bottom: 20px;
    right: 15px;
    height: 50px;
  }
}

@media screen and (max-width: 690px){
  .link_flex{
    max-width: 250px;
    margin: 0 auto;
    flex-wrap: wrap;
  }}
  @media screen and (max-width: 455px){
    .firstview_flex h2,.genealogy h2{
      font-size: 3.8rem;
    }}
  @media screen and (max-width: 430px){
    .history_img img {
      width: 100%;
  }

  .firstview_pc{
    display: none !important; 
    position: relative; 
    width: 100%;
    height:90vh;
  }
  .firstview img{
     position: relative;
    }
    .firstview_sp{
      display: block !important;
      position: relative;
      top: 10px; 
      width: 100%;
      height:100vh;
      
    }
    .firstview_sp img{
       position: relative;
      }

  .history{
    padding: 60px 20px 40px 20px;
  }
  .history_txt{
    text-align: center;
  }
  .lesson_item li{
    width: 145px;
    padding: 10px;
    font-size: 12px;
  } 
  #leader img {
    width: 100%;
  }
  .access{
    padding: 40px 20px 40px 20px;
  }
    .access_flex{
      flex-wrap: wrap;
    }
    .access_txt{
      padding: 0 0 15px 0 ;
      text-align: center;
    }

    footer{
      padding: 40px 20px;
      }
      footer h2{
        font-size: 0;
      }
      footer h2 img{
        padding: 0;
      } 
      footer nav {
        padding: 0;
    }
  }
@media screen and (max-width: 390px){
  h1 img{
    max-width: 83%;
    height: auto;
    padding: 16px 0 0 0;
  }
}