* {
    padding: 0;
    margin: 0;
    font-family: 'Zen Kaku Gothic Antique', sans-serif ;
    text-decoration: none;
    letter-spacing: 4px;
    color: #fff;
}
.midashi{
    margin-top:100px;
    margin-bottom: 100px;
    background: rgba(0, 0, 0, 0.8);
    padding: 30px 0;
    width: 60%;
    margin: 100px auto 100px auto;
    text-align: center;
}
.midashi p{
  margin-top:30px;
}
.midashi h1{
  font-size: clamp(1.438rem, 1.233rem + 1.02vw, 2rem);
}

.main_outer p{
  padding-bottom: 0 !important;
}
.width-70{
    width: 70%;
}
.ma-outo{
    margin: 0 auto;
}
.maru{
  width: 630px;
  height: 630px;
}
.maru-main .video {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 20.25vw;
    min-height: 100%;
    min-width: 100%;
}
.maru-main{
    width: 100%;
    height: 100%;
    transform: none;
    position: relative;
    overflow: hidden;
    box-shadow: 0px 0px 0px 3px rgba(13, 240, 243, 1), 0px 0px 13px 10px rgba(0, 255, 244, 1);
    border-radius: 300px;
        }    
.maru-main h2{
    margin: 30px 0 30px 0;
    letter-spacing: 4.5px;
}            
.maru-text{
    width: 100%;
    text-align: center;
    position: absolute;
    top: 42%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
.maru-text h2{
  color: #fc82fb;;
}
.maru-text02{
  width: 100%;
  text-align: center;
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);

}
.maru-text02 h2{
  color:#94ce77;
}
.maru-text03{
  width: 100%;
  text-align: center;
  position: absolute;
  top: 43%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);

}
.maru-text03 h2{
  color:#f8bd72;
}
.maru-text p,.maru-text02 p,
.maru-text03 p
{
    line-height: 2.5;
    font-size: 15px;
    color: #fff;
}
.ma-top150{
    margin-top: 150px;
}
.ma-top300{
  margin-top: 300px;
}
.ma-30{
  margin-top: 30px;
}
.ma-50{
  margin-top:50px;
}
.entry{
    margin-bottom: 150px;
}
.entry h3{
    margin: 0 auto;
    text-align: center;
    margin-bottom: 20px;
    color: #FFF;
    text-shadow: 0 0 1px #000dff, 0 0 3px #000dff, 0px 0px 6px #000dff, 0 0 10px #000dff, 0 0 150px #000dff, 0 0 200px #000dff;
  }
  /* エントリーリーボタン */
  #box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 550px;
    height: 200px;
    margin: 0 auto;
  }
  .gradient-border {
    --borderWidth: 3px;
    background: #1D1F20;
    position: relative;
    border-radius: var(--borderWidth);
  
  }
  .gradient-border a {
        background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-family: 'Lora', serif ;
      font-size: 64px;
      font-style: normal;
      font-weight: 400;
      line-height: normal;
      letter-spacing: 12.8px;
      animation: flicker 1.5s infinite alternate;
      display: flex;
      height: 100%;
      width: 100%;
      align-items: center;
      justify-content: center;
  
  }
  .gradient-border a:after {
    content: '';
    position: absolute;
    top: calc(-1 * var(--borderWidth));
    left: calc(-1 * var(--borderWidth));
    height: calc(100% + var(--borderWidth) * 2);
    width: calc(100% + var(--borderWidth) * 2);
    background: linear-gradient(60deg, #000dff, #4201f6, #9900ff, #000dff, #9900ff, #9900ff, #003eff, #b800ff);
    z-index: -1;
    animation: animatedgradient 6s ease alternate infinite;
    background-size: 300% 300%;
    box-shadow: 0 0 100px #4201f6;
  }
  @keyframes animatedgradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
  #box:hover{
    animation: flash 0.1s linear;
    animation-iteration-count: 3;
  }
  #box:active{
    animation: flash 0.1s linear;
    animation-iteration-count: 3;
  }
  @keyframes flicker {
    0%, 18%, 22%, 25%, 53%, 57%, 100% {
        text-shadow:
        0 0 2px #ffffff,
        0 0 11px #000dff,
        0 0 19px #b800ff,
        0 0 40px #000dff,
        0 0 80px #ffffff,
        0 0 90px #000dff,
        0 0 100px #000dff,
        0 0 150px #000dff;
    }
    20%, 24%, 55% {
        text-shadow: none;
    }
  }@keyframes flash {
    0% {
        opacity: 1;
    }
  
    50% {
        opacity: 0;
    }
    
    
    100% {
        opacity: 1;
    }
  }
  

  /* フェードイン*/
  .fadeIn {
    opacity: 0;
    transition: 1.5s;
    }
    .fadeIn.is-show {
    opacity: 1;
    }

   /* 宇宙 */
 .skew-outer-sub{
  margin-top: 0px;
}
.skew-sub{
  width: 100%;
  height: 8em;
  transform: none;
  position: relative;
  overflow: hidden;
  border-top: 2.5px solid;
  border-bottom: 2.5px solid;
  box-shadow: aqua 0px 0px 20px 3px;
  border-image: linear-gradient(to right, #00f4ff, rgb(0 255 255)) 1;
  margin-top: 110px;            
}
/* 背景 */
/* video */
#video-area{
  position: fixed;
  z-index: -1;/*最背面に設定*/
  top: 0;
  right:0;
  left:0;
  bottom:0;
  overflow: hidden;
}
  #video {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 56.25vw; 
  min-height: 100%;
  min-width: 100%;
}
.video{
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 56.25vw; 
  min-height: 100%;
  min-width: 100%;
}

/* パンクズりすと */
.breadcrumb-outer{
  width: 90%;
  margin: 20px auto;
}
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    color: #fff;
    font-size: 12px;
    justify-content: flex-start;
  }
.main_inner nav{
    padding: 20px 0;
}
.breadcrumb a{
    color: #fff;
    text-decoration: none;
  }
.breadcrumb li:not(:last-of-type)::after {
    content: "›";
    margin: 0 .6em; /* 記号の左右の余白 */
    color: #777; /* 記号の色 */
  }
/* ここからスマホ */
@media screen and (max-width: 768px) {
  .maru {
    width: 90%;
    height: 350px;
}
#box {
  width: 80%;
  height: 170px;
}
.gradient-border a {
  font-size: 46px;
}
.midashi{
  width: 90%;
}
h2 {
  font-size: 16px;
}
.maru-text img{
  width: 15%;
}
.maru-main h2 {
  margin:0 auto 30px auto !important;
  letter-spacing: 4.5px;
}
.maru-text p, .maru-text02 p, .maru-text03 p{
  font-size: 10px;
}
}