html:focus-within {
    scroll-behavior: smooth !important;overflow-y: auto;
  }
  .wrapper a{
    text-decoration: none;
    color:#fff;
  }
.img-resp{
    width:auto;
    max-width:100%;
    height:auto;
}
.banner{
    background-image: url(../images/banner.jpg);
    width: auto;
    max-width: 100%;
    height: 750px;
    background-repeat: no-repeat;
    background-size: cover;  
    position: relative;

}
p{
    font-family: 'Rajdhani' !important;
    font-size:22px;
}
.menu a:hover{
  color: #D28C18;
}
#me-ico img{
  transform: rotate(180deg);
}
.sho{
margin-left:-105px;
  transition: all  .2s ease-in-out;
  position: absolute;
  opacity: 0;
}
.sho1{
  margin-left:0px;
  transition: all  .9s ease-in;
  position: relative;
  opacity: 1;
  animation: rela 2s ease;

}
@keyframes rela {
  0% {
    position: absolute;
  }
  30%{
    position: absolute;
  }
  50%{
    position: relative;
  }
  100% {
    position: relative;
  }
}

h1,h2,h3,h4{
    font-family: 'Bebas Neue';
}
.header{
 padding-top: 50px;   
}
.logo{
    float:left;
    top:35px;
    position: absolute;
    z-index: 9;
}


  .wrapper{
    position: fixed;
    top: 0;
z-index: 5;
    right: -100%;
    height: 100%;
    width: 50%;
    background: #000;
    font-family: 'Bebas Neue';
    transition: all 0.6s ease-in-out;
    color:#fff;
    overflow-y: scroll;
    text-align: left;
  }
  #active:checked ~ .wrapper{
    /*left: 0;*/
    right:0;
  }
  .menu-btn{
    position: absolute;
    z-index: 2;
    right: 50px;
    /*left: 20px; */
    top: 35px;
    height: 50px;
    width: 50px;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    z-index: 6;
  }
  .menu-btn span,
  .menu-btn:before,
  .menu-btn:after{
      content: "";
      position: absolute;
      top: calc(50% - 1px);
      left: 30%;
      width: 40%;
      border-bottom: 2px solid transparent; 
      transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
 
  }


  .close {
      z-index: 1;
      width: 100%;
      height: 100%;
      pointer-events: none;
      transition: background .6s;
  }
  
  /* closing animation */
  #active:checked + .menu-btn span {
      transform: scaleX(0);
  }
  #active:checked + .menu-btn:before {
      transform: rotate(45deg);
    border-color: #fff;
  }
  #active:checked + .menu-btn:after {
      transform: rotate(-45deg);
    border-color: #fff;
  }
  .active{
    display: none;
    transition: all .1s;
    opacity: 1;
    -moz-transition: opacity 1s, visibility 1.3s;
    -webkit-transition: opacity 1s, visibility 1.3s;
    -o-transition: opacity 1s, visibility 1.3s;
    transition: opacity 1s, visibility 1.3s;
}
  .wrapper ul{
    position: absolute;
    top: 60%;
    left: 30%;
    height: 100%;
    transform: translate(-50%, -50%);
    list-style: none;
    text-align: left;
    width:50%;
  }
  .wrapper ul li{
   text-align: left;
    margin: 15px 0;
    cursor: pointer;
  }
  .wrapper ul li h1{
  font-size: 60px;
  line-height: 60px;;
  transition: all ease-in-out .5s;
  }
  .wrapper ul li a{
    text-decoration: none;
    font-size: 30px;
    font-weight: 500;
    padding: 5px 30px;
    color: #fff;
    border-radius: 50px;
    position: absolute;
    line-height: 50px;
    margin: 5px 30px;
    opacity: 0;
    transition: all 0.3s ease;
    transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  .wrapper ul li a:after{
    position: absolute;
    content: "";
    background: #fff;
     /*background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);*/
    /*background: linear-gradient(375deg, #1cc7d0, #2ede98);*/
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 50px;
    transform: scaleY(0);
    z-index: -1;
    transition: transform 0.3s ease;
  }
  .wrapper ul li a:hover:after{
    transform: scaleY(1);
  }
  .wrapper ul li a:hover{
    color: #1a73e8;
  }
  input[type="checkbox"]{
    display: none;
  }
  
  #active:checked ~ .wrapper ul li a{
    opacity: 1;
  }
  .wrapper ul li a{
    transition: opacity 1.2s, transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translateX(100px);
  }
  #active:checked ~ .wrapper ul li a{
      transform: none;
      transition-timing-function: ease, cubic-bezier(.1,1.3,.3,1); /* easeOutBackを緩めた感じ */
     transition-delay: .6s;
    transform: translateX(-100px);
  }
  .sticky {
  background-color: #000;
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 9;
  height:130px;
  }
  .visible-lg{
    display:block;
}
.visible-sm{
  display:hidden;
}
#about{
    padding: 80px 80px 0 80px;
}
#about p{
    text-align: left;
}
#about h1{
    font-size:70px;
    line-height:1;
}
#about .pad{
padding: 0 0 0 70px;;
}
#contact{
    background-color: #808285;
padding: 60px 80px 40px 80px;
color:#fff;
}
#contact h2{
    font-size:60px;
    line-height:1;
    color:#fff;
}
#contact a{
  text-decoration: none;
  color: #fff;

}
.right{
  text-align: right;
}
footer{
  background-color: #000;
  padding: 40px 0;
  color: #fff;
}
footer ul{
  display: flex;
  padding: 0;
  flex-wrap: wrap;
}
footer ul li{
  list-style: none;
  padding: 0 10px 0 0px;
}
footer ul li:first-child{
  list-style: none;
  padding: 0 10px 0 0px;
}
footer ul li h4{

}
.dot {
  height: 40px;
  width: 40px;
  border: solid 3px #fff;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  padding: 6px;
  font-size: 20px;
}
a:hover{
  color: #D28C18;
}
.wrapper ul li h1:hover,.wrapper ul li h2:hover{
  color: #D28C18;
  transition: all  .5s ease-in-out;
}
.menu li{
  padding:0 10px 0 10px;
}
.sub-menu h2{
  font-size:25px;
}
.foot-p{
  text-align:right;
}
#arts{
  padding:160px 0;
}
#events{
  padding:160px 40px;
}
#arts h1,#events h1{
  font-size: 50px;
}
#arts h4 span,#events h4 span{
  color:#ccc;
  line-height:26px;
  transition: all ease-in-out .4s;
  -o-transition: all ease-in-out .4s;
  -moz-transition: all ease-in-out .4s;
  -webkit-transition: all ease-in-out .4s;
}

#arts ul,#events ul{
  text-decoration: none;
  list-style: none;
  padding-left: 0;
}
 .box{
  padding: 10px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  position: relative;
  height: auto;
}
.box i{
  font-size:25px;
  color: #F9A51A;
  padding:10px;
}
.box-gap{
  margin-bottom:10px
}
.box i:hover{
  font-size:25px;
  animation: pulse 2s ease infinite;

}
@keyframes pulse {
  0% {
    color: #52C1A7;
  }
  30%{
    color:#8F3F97;
  }
  60%{
   color:#4F86C6;
  }
  100% {
   color: #F06A38;
  }
}
#arts #img,#events #img{
  position: relative;
  height: 400px;
}
#arts #img img,#events #img img{
  position: absolute;
  bottom: 0;
}
#events .img-resp{
  width:100%
}
#arts a,#events a{
  text-decoration: none;

}
#arts h4 span:hover,#events h4 span:hover{
  color:#000;
  margin-left:20px;
  transition: all ease-in-out .4s;
  -o-transition: all ease-in-out .4s;
  -moz-transition: all ease-in-out .4s;
  -webkit-transition: all ease-in-out .4s;

}

.active-art{
  color:#000 !important;
  margin-left:20px;
  font-style: italic;
}

.box img{
  height: 190px !important;
  width: 100%;
}
.fine{
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.fine-b{
  height: 100%;
}
.img-id{
  padding:60px 0 0 0;
   width: 180px;
}
.hit{
  background-color: #000;
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 9;
  height:130px;
}

.button-18 {
  align-items: center;
  background-color: #0A66C2;
  border: 0;
  border-radius: 0px;
  box-sizing: border-box;
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  font-family: -apple-system, system-ui, system-ui, "Segoe UI", Roboto, "Helvetica Neue", "Fira Sans", Ubuntu, Oxygen, "Oxygen Sans", Cantarell, "Droid Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Lucida Grande", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  justify-content: center;
  line-height: 20px;
  max-width: 480px;
  min-height: 40px;
  min-width: 0px;
  overflow: hidden;
  padding: 0px;
  padding-left: 20px;
  padding-right: 20px;
  text-align: center;
  touch-action: manipulation;
  transition: background-color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, box-shadow 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s, color 0.167s cubic-bezier(0.4, 0, 0.2, 1) 0s;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: middle;
}

.button-18:hover,
.button-18:focus { 
  background-color: #16437E;
  color: #ffffff;
}

.wrapper2{
  width: auto;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}
.wrapper2 .head-cal{
  display: flex ;
  align-items: center;
  padding: 25px 30px 10px;
  justify-content: space-between;
}
.head-cal .icons{
  display: flex;
}
.head-cal .icons span{
  height: 38px;
  width: 38px;
  margin: 0 1px;
  cursor: pointer;
  color: #878787;
  text-align: center;
  line-height: 38px;
  font-size: 1.9rem;
  user-select: none;
  border-radius: 50%;
  font-family: 'Bebas Neue';
}
.icons span:last-child{
  margin-right: -10px;
}
.head-cal .icons span:hover{
  background: #f2f2f2;
}
.head-cal .current-date{
  font-size: 1.45rem;
  font-weight: 500;
}
.calendar{
  padding: 20px;
}
.calendar ul{
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  text-align: center;
}
.calendar .days{
  margin-bottom: 20px;
}
.calendar li{
  color: #333;
  width: calc(100% / 7);
  font-size: 1.07rem;
}
.calendar .weeks li{
  font-weight: 500;
  cursor: default;
}
.calendar .days li{
  z-index: 1;
  cursor: pointer;
  position: relative;
  margin-top: 30px;
}
.days li.inactive{
  color: #aaa;
}
.days li.active{
  color: #fff;
}
.days li::before{
  position: absolute;
  content: "";
  left: 50%;
  top: 50%;
  height: 40px;
  width: 40px;
  z-index: -1;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.days li.active::before{
  background: #9B59B6;
}
.days li:not(.active):hover::before{
  background: #f2f2f2;
}



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


  
.anim{
  width: 310px !important;
  padding: 0 40px 40px 40px;
  bottom: 0;
  right: 150px;
  display: block;
  position: absolute;
}
}
@media screen and (max-width:768px){

  .active-art{
    color:#000 !important;
    margin-left:0px;
    font-style: italic;
  }
 
  .wrapper ul{
    position: absolute;
    top: 60%;
    left: 20%;
    height: 100%;
    transform: translate(-50%, -50%);
    list-style: none;
    text-align: left;
  }
  #arts h4:hover,#events h4:hover{
    color:#000;
    margin-left:0px;
  
  }
  .mar-10{
    margin-top:20px
  }
  p{
    font-size:18px !important;
  }
  #arts h1,#events h1#up{
    font-size: 30px !important;
  }
  #arts h1,#events h1{
    font-size: 40px;
  }
  .hit{
    padding-top:10px;
    background-color: #000;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 9;
    height:110px;
  }
  .img-id{
    padding:0px 0 0 0;
    width: 110px;
    margin-top: -80px;
  }
  #arts #img, #events #img{
    position: relative;
    height: 590px;
    display: none;
  }
  #arts{
    padding:120px 0 80px 0;
  }
  #events{
    padding:120px 10px 80px 10px;
  }
  #arts ul,#events ul{
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
  }
  #arts li h4,#events li h4{
    font-size:14px;
    padding: 0 5px;
  }
  .sub-menu{
    left: 55% !important;
    top: 0 !important;
      transform: translate(-50%, -90%) !important;
  }
  .foot-p{
    text-align:center;
    padding-top: 20px;
  }
    .banner {
        background-image: url(../images/banner.jpg);
        width: auto;
        max-width: 100%;
        height: 700px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position-x: 30%;
        position: relative;

    }
    .anim {
      width: 180px !important;
      top: -131px;
      position: relative;
      rotate: -82deg;
  }
  .anim-a{
    width: 180px !important;
    top: 330px !important;
    left: 103px !important;
    position: absolute;
    rotate: -82deg;
    z-index: -1;
  }
    .wrapper{
      position: fixed;
      top: 103px;
  z-index: 5;
      right: -100%;
      height: 100%;
      width: 100%;
      background: #000;
      font-family: 'Bebas Neue';
      transition: all 0.6s ease-in-out;
      color:#fff;
      overflow-y: hidden;
      text-align: center;
   
    }
    .wrapper ul{
      position: relative;
      top: 50%;
      left: 50%;
      height: 100%;
      transform: translate(-50%, -50%);
      list-style: none;
      text-align: center;
      width:100%;
    }
    .wrapper ul li h1 {
      font-size: 50px;
      line-height: 45px;
  }
    .logo img{
        width:110px;
    }
    .menu-btn{
        top: 25px !important;
    }
    .logo {
        float: left;
        top: 35px;
        position: absolute;
        z-index: 9;
        padding-left: 25px;
    }
    header{
       
        background-color: #000;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99999;
height:110px;
    }
    .sticky {
        padding-top:10px;
        background-color: #000;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 9;
        height:110px;
          }
.visible-lg{
    display:none !important;

}
.visible-sm{
  display:block !important;

}
#about{
    padding: 80px 0px 60px 0px;
}
#contact{
  background-color: #808285;
padding: 60px 0px 40px 0px;
color:#fff;
}
#about .pad{
    padding: 0 30px 0 30px;
    }
    #contact .pad{
      padding: 0 30px 0 30px;

      }
    #about p{
        text-align: left;
        font-size:19px
    }
    #about h1{
        font-size:40px;
        line-height:1;
    }
}