@charset "UTF-8";
/* CSS Document */

/*** The new CSS reset - version 1.5.1 (last updated 1.3.2022) ***/
 
*:where(:not(iframe,canvas,img,svg,video):not(svg *,symbol *)){all:unset;display:revert}*,*::before,*::after{box-sizing:border-box}a,button{cursor:revert}ol,ul,menu{list-style:none}img{max-width:100%}table{border-collapse:collapse}textarea{white-space:revert}meter{-webkit-appearance:revert;appearance:revert}::placeholder{color:unset}:where([hidden]){display:none}:where([contenteditable]){-moz-user-modify:read-write;-webkit-user-modify:read-write;overflow-wrap:break-word;-webkit-line-break:after-white-space}:where([draggable="true"]){-webkit-user-drag:element}


/* Recommended */
body {
  overflow-x: clip;
}


body {
    background-color: #000;
}

.font_ub{
    font-family: 'Ubuntu', sans-serif;
}

.font_ro{
    font-family: 'RocknRoll One', sans-serif;
}

.hev {
    margin-right: 100px;
}

.navbar{
    text-shadow: 1px 2px 3px #808080;
      box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2);
}

.navbar-toggler {
  border-color: '#808080';
}


.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(212, 108, 228, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='3' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


.navbar-brand {
  position: relative;
  width: 100%; /* 親要素に合わせて幅が変化 */
  max-width: 900px; /* 最大幅を設定（任意で調整）*/
  height: auto; /* 高さを自動調整 */
  overflow: hidden;
}


/* hero background image */
.bgimage {
    height:100vh;
    background-size:cover;
    position:relative;
    overflow: hidden;
    object-fit: cover;
    width: auto;
    background-position: center;
}

.bgimage .bgImg {
  height:100vh;
  background-size:cover;
  position   : absolute;
  top        : 0;
  left       : 0;
  bottom     : 0;
  right      : 0;
  opacity    : 0;
  animation  : bgAnime 20s infinite;   /* 4 × 5s = 20s */   
    width: auto;
    background-position: center;
}


.bgimage .src1 {
  background-image : url(../images/heroimage.jpg);    /*  */
}
.bgimage .src2 {
  background-image : url(../images/heroimage1.jpg);   /*  */
  animation-delay  : 5s;
}
.bgimage .src3 {
  background-image : url(../images/heroimage2.jpg);   /*  */
  animation-delay  : 10s;
}
.bgimage .src4 {
  background-image : url(../images/heroimage3.jpg);   /*  */
  animation-delay  : 15s;
}




/* text css above hero image*/
.hero_title {
    font-size: 3.5rem;
    text-shadow: 1px 2px 3px #000;
}
.hero_desc {
    font-size: 1.5rem;
    text-shadow: 1px 2px 3px #000;
}
.hero-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    display    : inline-block;
    padding    : 20px;
}

/* display background color black on navbar scroll */
.navbarScroll.navbarDark {
    background-color: #000;
}

/* about section image css */
.imageAboutPage {
    width: 100%;
}

/* social media icons styling */
.social-icons {
    font-size: 36px;
    cursor: pointer;
}
.fa-facebook:hover,.fa-instagram:hover,.fa-twitter:hover,.fa-linkedin:hover, .fa-twitch:hover {
    color: #008000;
}
.fab {
    color: #000000;
}
/* footer styling */
#footer {
    background-color: #808080;
    text-align: center;
}


#about{
        background: url('../images/bg_image.png');
    background-size:cover;
    position:relative;
    
}

/**/
.hidden_box {
    margin: 2em 0;/**/
    padding: 0;
}

/**/
.hidden_box label {
    padding: 15px;
    font-weight: bold;
    border: solid 2px whitesmoke;
    cursor :pointer;
    background-color: white;
}

/**/
.hidden_box label:hover {
    background: #efefef;
}

/**/
.hidden_box input {
    display: none;
}

/**/
.hidden_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/**/
.hidden_box input:checked ~ .hidden_show {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}






.ichinoji a {
  position: absolute;
  bottom: 20px;
  left: 50%;
  z-index: 2;
  display: inline-block;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  text-decoration: none;
  color: #fff;
  pointer-events: none;
}

.ichinoji a {
  padding-top: 70px;
}
.ichinoji a span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 24px;
  height: 24px;
  margin-left: -12px;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
  -webkit-transform: rotateZ(-45deg);
  transform: rotateZ(-45deg);
  -webkit-animation: sdb 1.5s infinite;
  animation: sdb 1.5s infinite;
  box-sizing: border-box;
}
@-webkit-keyframes sdb {
  0% {
    -webkit-transform: rotateY(0) rotateZ(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    -webkit-transform: rotateY(720deg) rotateZ(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    transform: rotateY(0) rotateZ(-45deg) translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: rotateY(720deg) rotateZ(-45deg) translate(-20px, 20px);
    opacity: 0;
  }
}









@keyframes bgAnime {
   0% { opacity: 0; transform: scale(1.0, 1.0); }
   1% { opacity: 1; transform: scale(1.0, 1.0); }
   5% { opacity: 1; transform: scale(1.0, 1.0); }
  21% { opacity: 1; transform: scale(1.3, 1.3); }
  25% { opacity: 1; transform: scale(1.3, 1.3); }
  26% { opacity: 0; }
 100% { opacity: 0; }
}

@media (max-width: 767px) { /* SP */

    .bgimage {
    height:100vh;
    position:relative;
    min-height: 0;
    margin-bottom: 40px;
    }
    .bgimage .bgImg {
}
    .hero_title {
    font-size: 2.0rem;
    text-shadow: 1px 2px 3px #000;
}
.hero_desc {
    font-size: 0.8rem;
    text-shadow: 1px 2px 3px #000;
}
.hero-text {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}


    
    
}


.hidden_show{
    text-align: left;
}


/**/
.fade-in-bottom {
   opacity: 0;
   animation-name: fadein-bottom;
   animation-duration: 1.5s;
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;
}
@keyframes fadein-bottom {
   0% {
      opacity: 0;
      transform: translateY(20px);
   }
   100% {
      opacity: 1;
      transform: translateY(0);
   }
}

/**/
.fade-in-top {
   opacity: 0;
   animation: fadein-top 1.5s .3s ease-out forwards;
}
@keyframes fadein-top {
   0% {
      opacity: 0;
      transform: translateY(-20px);
   }
   100% {
      opacity: 1;
      transform: translateY(0);
   }
}

/**/
.fade-in-left {
   opacity: 0;
   animation: fadein-left 1.5s 0 ease-out forwards;
}
@keyframes fadein-left {
   0% {
      opacity: 0;
      transform: translateX(-20px);
   }
   100% {
      opacity: 1;
      transform: translateX(0);
   }
}

.smooth {
  clip-path: inset(0 100% 0 0);
  display: inline-block;
  font-size: 36px;
  font-weight: bold;
  transition: 1.4s cubic-bezier(0.37, 0, 0.63, 1);
  transition-property: clip-path;
  line-height: 1;
  height: 40px;
  margin-top: 15px;
}
.smooth.is-animated {
  clip-path: inset(0);
}

.circle-image {
  position: relative;
  width: 100%; /* 親要素に合わせて幅が変化 */
  max-width: 400px; /* 最大幅を設定（任意で調整）*/
  height: auto; /* 高さを自動調整 */
  border-radius: 50%; 
  overflow: hidden;
    /* 点滅効果 */
  border: 2px solid white;
  animation: blink 1s infinite;
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

.circle-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 画像を容器いっぱいに表示 */
}

.text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
}








.youtube-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9のアスペクト比 */
  height: 0;
}
.youtube-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.youtube {
  text-align: center; /* 親要素を中央揃え */
}

.img-fluid {
  max-width: 100%; /* 親要素の幅に合わせて拡大縮小 */
  height: auto;
}


@media (max-width: 767px) {
  /* スマホなどの画面幅が767px以下の場合 */
  .col-md-6 {
    width: 100%;
  }
}






.modal {
  --bs-modal-bg: #f2f2f2;
  --bs-modal-content-bg: #fff;
  --bs-modal-title-color: #333;
  --bs-modal-body-color: #666;
    opacity: 0.9;
}  

.colorbox iframe {
    max-width: 100%;
    height: auto;
}