@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400..700&display=swap');

html{
    font-size: 62.5%;
}
body {
  font-family: "Noto Serif JP", serif;
  font-weight: 500 ;
	font-size:1.6rem;/* 16px*/
	line-height: 1.9;
	
	-webkit-text-size-adjust: 100%;
  font-feature-settings: "palt";
	color:#004d7a;
  word-break: break-all;
  background-size: 100%;
  }


a{color:#004d7a; text-decoration:none; transition: 0.3s;}
a:hover{
  opacity: 0.8;
  transition: 0.3;
}
a.u-line{text-decoration: underline;}

img{
	max-width: 100%;
	height: auto;
}
.Center{text-align: center;}
.Right{text-align: right;}


.bold{font-weight: bold;}
.m_b_10{margin-bottom: 10px;}
.m_b_20{margin-bottom: 20px;}
.m_b_30{margin-bottom: 30px;}

.Message{
  text-align: center;
  font-size: 2rem;
  padding: 500px 0 300px 0;
}

@media screen and (min-width:768px){
  .pc_hidden{display: none !important;}
  }
@media screen and (max-width:767px){
  .sp_hidden{display: none !important;}
  body{font-size: 1.4rem;} 
  
  .Message{
    font-size: 1.8rem;
    padding: 300px 0 200px 0;
  }
  
  }

/*common//////////////////////////////////*/
.Container{
  overflow: clip;
  padding-bottom: 100px;
}
.Contents{max-width: 1100px; margin: 0 auto; padding:0 20px; position: relative;} 

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




/*kv//////////////////////////////////*/
.kv{
  height: 100svh;
  background: url("../images/kv.png") no-repeat top center #080e25;
  background-size: cover;
  color: #FFF;
  position: relative;
}
.kv_inner{
  
}
.kv_logo{
  max-width: 492px;
  margin: 0 auto; 
  padding-top: 80px;
  animation: UpAnime 1.8s forwards;
  animation-delay: 1.5s;
  opacity: 0;
  text-align: center;
}
.kv_copy{
  margin-top: 40px;
  line-height: 1.3;
  font-size: 3.6rem;
  animation: UpAnime 1.8s forwards;
  animation-delay: 2s;
  opacity: 0;
  text-align: center;
}
.kv_copy span{
  border-bottom: 2px solid #FFF;
}

 @keyframes UpAnime{
      from {
        opacity: 0;
        transform: translate(0,15%);
      }
      to {
        opacity: 1;
        transform: translate(0,0%);
      }
    } 



.scroll_wrap{
    position: absolute;
    bottom:20px;
    right: 20px;
    font-size: 1.2rem;
    }
    
    
    .scroll{
      position: relative;
      padding-bottom: 140px;
      line-height: 1;
      
      writing-mode:vertical-rl;}
    
    .scroll:after{
      content: '';
      position: absolute;
      width: 1px;
      height:130px;
      background: #FFF;
      left: 0;
      right: 0;
      bottom: 0px;
      margin: auto;
      animation: sdl 2s cubic-bezier(1, 0, 0, 1) infinite;
    
    }
    @keyframes sdl {
      0% {
        transform: scale(1, 0);
        transform-origin: 0 0;
      }
      50% {
        transform: scale(1, 1);
        transform-origin: 0 0;
      }
      50.1% {
        transform: scale(1, 1);
        transform-origin: 0 100%;
      }
      100% {
        transform: scale(1, 0);
        transform-origin: 0 100%;
      }
    }
.kv_head{
    position: absolute;
    top: 40px;
    right: 40px;
    display: flex;
    align-items: center;
    z-index: 10;
}

.icon_sns img{width: 28px;}    
.icon_sns{margin-left: 30px;}


    

@media screen and (max-width: 1024px) {
  .kv_logo{padding-top: 16vh;}
  .kv{padding: 0 40px;}
}
@media screen and (max-width: 767px) {
    
    .kv_copy{
      font-size: 2.2rem;
      position: absolute;
      bottom: 50px;
      left: 0;
      right: 0;
      margin: auto;}  
    .kv_head{top: 20px; right: 20px;}
    .icon_sns{margin-left: 20px;}
    
    .scroll_wrap{
      bottom:100px;
      font-size: 1rem;
      }


      .scroll{
        padding-bottom: 100px;
        }

      .scroll:after{
        height:90px;
      }
  
}
/*btn*/

.btn{
  display: inline-block;
}

.btn a{
  display: block;
  background: linear-gradient(90deg,rgba(255, 108, 10, 1) 0%, rgba(2, 166, 206, 1) 100%);
  color: #FFF;
  padding: 10px 50px;
  position: relative;
  border-radius: 100px;
  font-size: 1.6rem;
}
  .btn-l a{
    padding: 30px 90px;
  }

.btn a:after{
  content: '';
  display: block;
  background: url("../images/arrow.png") no-repeat 0 0;
  background-size: 100%;
  width: 19px;
  height: 6px;
  position: absolute;
  top:50%;
  transform: translateY(-60%);
  right: 15px;
}
  

.btn a:hover{
  filter: brightness(1.2);
  opacity: 1;
  transition: 0.3s;
}
.btn a:hover:after{
  right: 10px;
  transition: 0.3s;
}
 

.link_arrow a{
  position: relative;
  padding-left: 40px;
  min-height: 30px;
  display: inline-block;
}
.link_arrow a:before{
  content: '';
  display: block;
  background: url("../images/arrow_blue.png") no-repeat 0 0;
  background-size: 100%;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 0;
  left: 0;
}
.map{
  margin-bottom: 20px;
}
@media screen and (min-width: 768px) {
   
  .btn-l a:after{
     width: 30px;
     height: 8px;
     right: 25px;
  }
  .btn-l a:hover:after{
   right: 20px;
 }
  }
@media screen and (max-width: 767px) {  
  .btn-l{display: block;}
  .btn-l a{
    padding: 20px;
  }
}
/**/
.bg_navy{
  background: linear-gradient(180deg,rgba(8, 14, 37, 1) 0%, rgba(1, 31, 95, 1) 100%);
  padding-top: 115px;
  color: #FFF;
}
.bg_beige{
  background: #F9F6E9;
  padding-top: 50px;
}
.wave{
  padding-top: 100px;
  transform: translateY(1px);
}
.lead_bg{
  text-align: center;
  padding-bottom: 110px;
  background: url("../images/bg_logo.png") no-repeat top center;
  background-size: 100%;
  max-width: 1300px;
  margin: 0 auto;
}
.lead{
  display: inline-block;
  text-align: left;
  line-height: 4;
  font-size: 2rem;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  white-space: nowrap;
 }
.ttl_icon_wrap{
  text-align: center;
  position: relative;
  padding-bottom: 20px;
  margin-bottom: 50px;
}
.ttl_icon{
  font-size: 3.2rem;
}
.ttl_icon_wrap:after{
  content: '';
  display: block;
  background: url("../images/ttl_icon.png") no-repeat 0 0;
  background-size: 100%;
  width: 80px;
  height: 3px;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}
.flyer_wrap{
  max-width: 1040px;
  margin: 50px auto;
  }
.Calendar_wrap{
  margin: 50px 0; 
}  
 
 
.Event {
  border-top: 2px solid #bf9c46;
}
.Event td{
  padding: 20px 10px;
  vertical-align: top;
  border-bottom: 2px solid #bf9c46;
}  
.Event_icon img{
  width: 28px;
}
.Event td.Event_date{
  white-space: nowrap;
  padding-right: 40px;
}
.Event td.Event_date span{
  font-size: 1.8rem;
  margin-right: 10px;
}
.Event_ttl{
  font-weight: 700;
  font-size: 1.8rem;
  display: flex;
  flex-wrap: wrap;
  line-height: 1.5;
  margin-bottom: 10px;
  align-items: center;
}
.Event_icon{
  margin-right: 10px;
}
.Event_icon_label{
  background: #B8183F;
  color: #FFF;
  font-size: 1.2rem;
  line-height: 1;
  padding: 5px 10px;
  border-radius: 30px;
  display: inline-block;
  
}
.Event_img img{
  border-radius: 10px;
}
 
@media screen and (min-width: 768px) {
  .flyer_wrap{
    display: flex;
    justify-content: space-between;
  }
  .flyer{
    width: 47.69%;
  }
  .txt{text-align: center;}
  .Calendar_wrap{
    display: flex;
    justify-content: center;
  }
  .Calendar{
    width: 49.09%;
  }
  .Event_img_wrap{
    display: flex;
    justify-content: space-between;
  }
  .Event_img{
    width: 30%;
  }
}
@media screen and (max-width: 767px) {
  .lead{
    font-size: 1.6rem;
    line-height: 2.5;
  }
  .ttl_icon{
    font-size: 2.4rem;
  }
  .ttl_icon_wrap:after{
    width: 40px;
    height: 2px;}
    
  .flyer + .flyer{margin-top: 20px;}  
  
  .Event td{
    display: block;
    padding: 20px 0px;}
  
  .Event td.Event_date{
    padding-bottom: 0;
    border-bottom: none;
  }
  .Event_icon_label{
    display: block;
    margin-bottom: 5px;
  }
  .Event_img{
    margin-top: 20px;
  }
}
.insta{
  max-width: 900px;
  margin: 50px auto 100px auto;
  
}
.insta a{
  display: block;
  position: relative;
}
.bnr_insta{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 200px;
}

.access_info{
  margin-bottom: 20px;
}

@media screen and (min-width: 768px) {
  .access{
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
  }
  .map_photo{
    width: 41.8%;
  }
  .map{
    width: 57.272%;
  }
  .access_info{
    display: flex;
    justify-content: space-between;
    align-items: center;
    
  } 

}
@media screen and (max-width: 767px) {
  address{margin-bottom: 20px;}
  .access{margin-bottom: 20px;}
  .map{margin-bottom: 10px;}
}

/*footer//////////////////////////////////*/

footer{
  padding: 30px;
  font-size: 1.4rem;
}
.Copyright{
  text-align: center;
}


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

/*fadein*/  
@keyframes fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1}}

.top_fadein{animation: fadeIn 2s ease 0s 1 normal;}

.fadein {
  opacity: 0;
  transition : all 1500ms;
  visibility: hidden;
  }
.fadein-up {
  opacity: 0;
  transform : translate(0, 40px);
  transition : all 1500ms;
  visibility: hidden;
  
  }
  
.fadein-up.fadein-up-l{
  transform : translate(0, 100px);
}


.fadein-right{
  opacity: 0;
  transform : translate(40px, 0);
  transition : all 1500ms;
  visibility: hidden;
  }
.fadein-left{
  opacity: 0;
  transform : translate(-40px, 0);
  transition : all 1500ms;
  visibility: hidden;
  }  

.fadein.scrollin,
.fadein-up.scrollin,
.fadein-right.scrollin,
.fadein-left.scrollin{
  opacity: 1;
  transform: translate(0, 0);
  visibility: visible;
}

/*順番にフェードイン*/
.fadein-order {
  opacity: 0;
  transform : translate(0, 60px);
  transition : all 1500ms;
  visibility: hidden;
}
.fadein-order.scrollin {
  opacity: 1;
  transform: translate(0, 0);
  visibility: visible;
}