@charset "UTF-8";

/*ExtraLight*/
@font-face {
  font-family: 'Montserrat';
  src: url('../font/Montserrat-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

/*Light*/
@font-face {
  font-family: 'Montserrat';
  src: url('../font/Montserrat-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

/*Regular*/
@font-face {
  font-family: 'Montserrat';
  src: url('../font/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

html{
  font-size:62.5%;
  overflow-x: hidden;
}
body{
  min-height: 100vh;
  font-size:1.4rem;
  font-family: 'Montserrat',"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  letter-spacing: 0.07rem;
}


/* Loading */
.hidden {
  display: none;
}
.loading {
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: #fff;
  z-index: 9999;
  display: grid;
  place-content: center;
  opacity: 0; /* 初期状態は透明にする */
  transition: opacity 2s ease; /* アニメーションを適用 */
  pointer-events: none; /* 背後のコンテンツにマウスイベントが影響しないようにする */
}
.loading.active {
  display: grid;
  opacity: 1;
  transition: opacity 3s ease-in; /* アニメーションを適用 */
}
.loading-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* JS が無効なときのスタイル */
@media (scripting: none) {
  .loading {
    display: none;
  }
  .hidden {
    display: block;
  }
}

.loading-title{
  color:#fff;
  text-shadow: 0 0 15px #666;
  font-size: 4rem;
  font-weight: 200;
  position:absolute!important;
  top: 50%!important;
  left: 30%!important;
  transform: translate(-30%,-50%)!important;
}


/* top */
#top-header{
  position: relative;/*h1の中央寄せ配置の起点とするためのrelative*/
  height: 100vh;/*高さを全画面にあわせる*/
} 

#video-area{
  position: fixed;
  z-index: -1;
  top: 0;
  right:0;
  left:0;
  bottom:0;
  overflow: hidden;
}
#video{
  position: relative;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*縦横幅指定*/
  width: 177.77777777vh; /* 16:9 の幅→16 ÷ 9＝ 177.77% */
  height: 56.25vw; /* 16:9の幅 → 9 ÷ 16 = 56.25% */
  min-height: 100%;
  min-width: 100%;
  opacity: 0.3;
}

.top-h2{
  position:fixed;
  z-index: -1;
  top: 50%;
  transform: translateY(-50%);
  color:#858585;
  text-shadow: 0 0 15px #FFF;
  font-size: 3rem;
  font-weight: 200;
}

@media (max-width: 967px){
  .top-h2{
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2em;
  }
 }

.top-main{
  /*background-color: #FFF;*/
  padding-top: 70px;
}

.menu-box {
  max-width: 70%;
  height: auto;
  position: relative;
}
.menu-box .menu-inner::after {
  content: '';
  border: 1px solid #FFF;
  position: absolute;
  top: 20px;
  right: -10px;
  width: 100%;
  height: 100%;
}
.menu-box .menu-inner img {
  margin:-10px -10px 50px;
}
.menu-box img {
  vertical-align:top;
  max-width: 90%;
}
.menu-box h3 {
  position: absolute;
  top: 45%;
  left: 10%;
  color: #FFF;
  font-size: 3rem;
  font-weight: 300;
  text-decoration: none;
}
.menu-box .menu-inner {
  transform:translate(-4.5px, -4.5px);
  transition:box-shadow 0.3s, transform 0.3s;
  opacity: 0.7;
}
.menu-box .menu-inner:hover {
  transform:initial;
  opacity: 1;
}
.menu-box-mt{
  margin-top: 200px;
}
.text-shadow{
  text-shadow: 0 0 7px #401d0575;
}

.fb{
  margin-top: 200px;
}

.insta{
  background-color: #012049;
  padding: 100px 0;
  margin-top: 50px;
}
.insta a{
  text-decoration: none;
}
.insta h3{
  color: #FFF;
  font-size: 2.5rem;
  font-weight: 300;
}
.insta a:hover{
  color: #FFF;
  text-decoration: none;
}
.insta img{
  width: 90%;
  transition:box-shadow 0.3s, transform 0.3s;
  opacity: 1;
}
@media (max-width: 1200px){
  .insta img{
    width: 100%;
    margin-top: 30px;
  }
}
.insta img:hover {
  transform:initial;
  opacity: 0.7;
}

/* nav */
.navbar{
  height: 70px;
}
.navbar-brand{
  color: #7f7f80;
  text-shadow:0 0 3 #53B5AC;
  font-size: larger;
  font-weight: 400;
}
.navbar-toggler{
  border-color: rgba(0, 0, 0, 0);
}
.navbar-toggler:focus {
  box-shadow:none !important;
}
.navbar-toggler-icon{
  /* 三本線 */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(160, 160, 160, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
#navbarNav .navbar-nav a{
  color: #282828;
  text-shadow:0 0 3 #FFF;
  font-weight: 300;
  font-size: calc(1.2rem + .25vw);
}
@media (min-width: 992px){
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 1.5rem;
  }
}
@media (max-width: 911px){
  #navbarNav {
    background-color: rgba(255, 255, 255, 0.9);
    padding-top: 10px;
    padding-bottom: 10px;
    z-index: 99;
  }
  #navbarNav .navbar-nav a {
    padding-left: 20px;
  }
}

/* footer */
footer{
  background-color: #FFF;
  padding-top: 70px;
  padding-bottom: 20px;
}
.icon-fb{
  margin-right: 10px;
}
.icon-insta{
  margin-left: 10px;
  margin-right: 10px;
  margin-top:0.8px;
}
.icon-twitter{
  margin-left: 10px;
  margin-right: 8px;
  margin-top: 2.2px;
}
.icon-yt{
  margin-left: 9.3px;
  margin-top: 1.2px;
}
footer span.text-muted{
  font-size: 1.2rem;
  font-weight: 300;
}


/* sub */
.sub-header{
  height: 300px;
}
.sub-h2{
  font-size: calc(2.2rem + 1vw);
  line-height: 300px;
  color:#FFF;
  text-shadow:0 0 7px #6c6c6c;
}
#disco .sub-header{
  background: url(../img/bg_disco.jpg) no-repeat center / cover;
}
#live .sub-header{
  background: url(../img/bg_live.jpg) no-repeat center / cover;
}
#profile .sub-header{
  background: url(../img/bg_profile.jpg) no-repeat center / cover;
}
#contact .sub-header{
  background: url(../img/bg_contact.jpg) no-repeat center / cover;
}
#flyingcafe .sub-header{
  background: url(../img/bg_flyingcafe.jpg) no-repeat center / cover;
}

#disco main,#live main,
#profile main,
#contact main,
#flyingcafe main{
  margin-top: 100px;
}

#disco .cd img{
  padding: 10px;
  border: 1px solid #dfdfdf;
  height: 80%;
}
#disco h3{
 font-size: 2rem;
}
#disco .cd ul{
  list-style: none;
}
#disco .cd li{
  padding-top: 1rem;
}

#live 
p.live-title{
 font-size: 1.7rem;
}
.live-cancel{
  color: #d90000;
}
.accordion-flush h2.accordion-header{
  margin: 70px 12vw 40px;
  border: 1px solid #858585;
}
.accordion-flush h2.accordion-header button{
  font-size: 2.5rem;
}
.accordion-flush h2.accordion-header .live-year{
  padding-left: 10vw;
}


#profile p{
  margin-bottom: 30px;
}


#disco .cd hr,
#live hr{
  size: 3;
  color: #323232;
  margin: 30px 10%;
}
#disco .cd hr{
  margin: 100px 10%;
}