@keyframes spin3D {
  from {
    transform: rotate3d(.5,.5,.5, 360deg);
  }
  to{
    transform: rotate3d(0deg);
  }
}

html,
body,
a {
  cursor: none;
}

a {
  text-decoration: none;
  color:inherit;
}


* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

p {
  margin: 0;
}

body.loading {
  overflow: hidden;
}

ul {
  margin: 0;
  padding: 0;
}


/*独自のマウスカーソルを作成*/
.cursor {
  position: fixed;
  top: -5px;
  left: -5px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  z-index: 1000;
  transition: width 0.5s, height 0.5s, top 0.5s, left 0.5s;
  transform: translate(0, 0);
  pointer-events: none;
}

/*aタグにホバーした時に見た目変化*/
.cursor.cursor--hover {
  top: -20px;
  left: -20px;
  width: 40px;
  height: 40px;
  background: rgba(152,57,173, 0.5);
}



#loading-wrapper {
  overflow: hidden;
}

#loading-wrapper {
  position: fixed;
  left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
  width: 100%; 
  height: 100%; 
  background: #0d1115; 
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center; 
  transition: all 0.3s; 
  z-index: 9999;
}

.completed {
  opacity: 0;
  visibility: hidden;
}

.spinner-box {
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}


.leo {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.blue-orbit {
  width: 165px;
  height: 165px;
  border: 1px solid #318ED4;
  -webkit-animation: spin3D 2.5s linear .2s infinite;
  animation: spin3D 2.5s linear .2s infinite;
}

.green-orbit {
  width: 120px;
  height: 120px;
  border: 1px solid #06B75C;
  -webkit-animation: spin3D 1.5s linear 0s infinite;
  animation: spin3D 1.5s linear 0s infinite;
}

.red-orbit {
  width: 90px;
  height: 90px;
  border: 1px solid #9839AD;
  -webkit-animation: spin3D 0.7s linear 0s infinite;
  animation: spin3D 0.7s linear 0s infinite;
}

.white-orbit {
  width: 60px;
  height: 60px;
  border: 2px solid #fdfdfd;
  -webkit-animation: spin3D 2s linear 0s infinite;
  animation: spin3D 2s linear 0s infinite;
}

.w1 {
  transform: rotate3D(1, 1, 1, 90deg);
}

.w2 {
  transform: rotate3D(1, 2, .5, 90deg);
}

.w3 {
  transform: rotate3D(.5, 1, 2, 90deg);
}



html, body {
  margin: 0;
  padding: 0;
  font-family: Montserrat, sans-serif;
}

body {
  background-color: #0d1115;
  overflow-x: hidden;
}

.background {
  background-image: url(image/mainview_2.jpg);
  background-size: cover;
  background-position: 100% 50%;
  background-clip: text;
  -webkit-background-clip: text;
  height: 100vh;
  -webkit-text-fill-color: transparent;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  overflow: hidden;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
  
.background:before {
  content: '';
  background-image: inherit;
  background-size: cover;
  background-position: 100% 50%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -2;
}

.azusa {
  margin-top: 43vh;
  /* padding-right: 16vw; */
  font-weight: bold;
  font-size: 29vw;
}



/* スクロールに連動して表示するセクションタイトル
-----------------------------------------*/

/* セクションタイトル（H3）全体 */
 .section h3 {
	font-family: 'Crimson Text', Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
    font-weight: 400;
    font-size: 13vw;
    line-height: 0.9;
    margin-bottom: 0.5em;
}

/* セクションタイトル（H3）の各ブロック部分 */
/* #Container .section h3 .block */
.section h3 .block {
    position: relative;
    display: inline-block;
    color: transparent;
}

/* #Container .section .content h3 .block::after */
/* セクションタイトル（H3）の表示の前に飛び込んでくる四角形部分 */
.section h3 .block::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 110%;
  height: 110%;
  background-color: #0d1115;
  /*初期値*/
  -webkit-transform: translateX(110vw) scaleX(1);/*Windowの外へ配置*/
  transform: translateX(110vw) scaleX(1);/*Windowの外へ配置*/
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

/*.showクラス付与後*/
 .section.show h3 .block {
  color: #0d1115;
  transition: 0s all .3s;
}
.section.show h3 .block:nth-of-type(2) {
  transition: 0s all .45s;
}

/*.showクラス付与後*/
.section.show h3 .block::after {
    -webkit-animation: anime_show .6s forwards;	
    animation: anime_show .6s forwards;
}
.section.show h3 .block:nth-of-type(2):after{
    -webkit-animation-delay: .15s;
    animation-delay: .15s;
}

.top {
  position: absolute;
  z-index: 999;
  top: 3vh;
  left: 0;
}

/* スクロールに連動して表示するセクションタイトル
----------------------------------------- */

/* セクションタイトル（H3）全体 */
 .section2 p {
	font-family: 'Crimson Text', Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
    font-weight: 400;
    font-size: 10vw;
    line-height: 0.9;
    padding: 1em 0 2em 0;
}

.section3 p {
	font-family: 'Crimson Text', Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
    font-weight: 400;
    font-size: 10vw;
    line-height: 0.9;
    padding: 1em 0;
}


/* セクションタイトル（H3）の各ブロック部分 */
/* #Container .section h3 .block */
.section2 p .block,
.section3 p .block {
    position: relative;
    display: inline-block;
    color: transparent;
}

/* #Container .section .content h3 .block::after */
/* セクションタイトル（H3）の表示の前に飛び込んでくる四角形部分 */
.section2 p .block::after,
.section3 p .block::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 110%;
  height: 110%;
  background-color: #fdfdfd;
  /*初期値*/
  -webkit-transform: translateX(110vw) scaleX(1);/*Windowの外へ配置*/
  transform: translateX(110vw) scaleX(1);/*Windowの外へ配置*/
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

/*.showクラス付与後*/
 .section2.show p .block,
 .section3.show p .block {
  color: #fdfdfd;
  transition: 0s all .3s;
}
.section2.show p .block:nth-of-type(2),
.section3.show p .block:nth-of-type(2) {
  transition: 0s all .45s;
}

/*.showクラス付与後*/
.section2.show p .block::after,
.section3.show p .block::after {
    -webkit-animation: anime_show .6s forwards;	
    animation: anime_show .6s forwards;
}
.section2.show p .block:nth-of-type(2):after,
.section3.show p .block:nth-of-type(2):after {
    -webkit-animation-delay: .15s;
    animation-delay: .15s;
}

.back {
  background-color: #0d1115;
}



/* Standard Syntax */
@keyframes anime_show {
    0% {
        transform: translateX(110vw) scaleX(1);/*Windowの外へ配置*/
        transform-origin: 0 0;
    }
    50% {
        transform: translateX(0) scaleX(1);
		transform-origin: 0 0;
    }
    100% {
        transform: translateX(0) scaleX(0);
		transform-origin: 0 0;
    }
}
/* Chrome, Safari */
@-webkit-keyframes anime_show {
    0% {
        -webkit-transform: translateX(110vw) scaleX(0);/*Windowの外へ配置*/
		-webkit-transform-origin: 0 0;
    }
    50% {
        -webkit-transform: translateX(0) scaleX(1);
		-webkit-transform-origin: 0 0;
    }
    100% {
        -webkit-transform: translateX(0) scaleX(0);
		-webkit-transform-origin: 0 0;
    }
}

.area{
  overflow: hidden;
}

.wrap{
  display: flex;
}

.item{
  display: flex;
  justify-content: center;
  align-items: center;
}

.item img {
  width: 100%;
  clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}

.project{
  opacity:0; 
  transform:translateY(5px);
  transition: all 1.5s ease-out; 
}

.fade-in{
  opacity: 1; 
  transform:translateY(0); 
}

.container, .container3 {
  position: relative;
  height: 40vh;
  overflow: hidden;
  margin: 5rem auto 0 5rem;
  width: 60vw;
}


.container_right {
  position: relative;
  height: 40vh;
  overflow: hidden;
  margin: 5rem 5rem 0 auto;
  width: 60vw;
}


.colorful-img, .bw-img,
.colorful-img2, .bw-img2,
.colorful-img3, .bw-img3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 7s ease;
  clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}


@keyframes cube {
  from {
      transform: scale(0) rotate(0deg) translate(-50%, -50%);
      opacity: 1;
  }
  to {
      transform: scale(20) rotate(960deg) translate(-50%, -50%);
      opacity: 0;
  }
}

.square {
  position: relative;
  width: 100vw;
  height: 160vh;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  background: #0d1115;
  overflow: hidden;
}
.square li {
  position: absolute;
  top: 130vh;
  left: 45vw;
  width: 10px;
  height: 10px;
  border: solid 1px #9839AD;
  color: transparent;
  transform-origin: top left;
  transform: scale(0) rotate(0deg) translate(-50%, -50%);
  animation: cube 13s ease-in forwards infinite;
}

undefined
.square li:nth-child(0) {
    animation-delay: 0s;
    left: 26vw;
    top: 51vh;
    border-color: #06B75C;
}

.square li:nth-child(1) {
    animation-delay: 2s;
    left: 84vw;
    top: 120vh;
    border-color: #318ED4;
}

.square li:nth-child(2) {
    animation-delay: 4s;
    left: 41vw;
    top: 75vh;
    border-color: #9839AD;
}

.square li:nth-child(3) {
    animation-delay: 6s;
    left: 24vw;
    top: 62vh;
    border-color: #318ED4;
}

.square li:nth-child(4) {
    animation-delay: 8s;
    left: 43vw;
    top: 21vh;
    border-color: #06B75C;
}

.square li:nth-child(5) {
    animation-delay: 10s;
    left: 98vw;
    top: 38vh;
    border-color: #318ED4;
}

.square li:nth-child(6) {
    animation-delay: 12s;
    left: 70vw;
    top: 67vh;
    border-color: #06B75C;
}

.square li:nth-child(7) {
    animation-delay: 14s;
    left: 31vw;
    top: 97vh;
    border-color: #06B75C;
}

.square li:nth-child(8) {
    animation-delay: 16s;
    left: 73vw;
    top: 18vh;
    border-color: #9839AD;
}

.square li:nth-child(9) {
    animation-delay: 18s;
    left: 0vw;
    top: 29vh;
    border-color: #318ED4;
}

.square li:nth-child(10) {
    animation-delay: 10s;
    left: 10vw;
    top: 80vh;
    border-color: #fdfdfd;
}


.square li:nth-child(11) {
  animation-delay: 0s;
  left: 90vw;
  top: 50vh;
  border-color: #fdfdfd;
}


.square li:nth-child(12) {
  animation-delay: 2s;
  left: 5vw;
  top: 125vh;
  border-color: #fdfdfd;
}


.square li:nth-child(13) {
  animation-delay: 4s;
  left: 55vw;
  top: 100vh;
  border-color: #fdfdfd;
}


.square li:nth-child(14) {
  animation-delay: 15s;
  left: 32vw;
  top: 23vh;
  border-color: #fdfdfd;
}





/*
右から左へ
----------------------------*/
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

/*
IE11対策
----------------------------*/
_:-ms-lang(x)::-ms-backdrop,
.d-demo {
  display: -ms-grid;
  overflow: hidden;
}
/*----------------------------*/


.d-demo {
 padding: 14rem 0 10rem 0;
 margin-bottom: 10rem;
}

.d-demo__wrap {
  display: flex;
  overflow: hidden;
}

.d-demo__item {  
  margin: 0 2rem;
}

.d-demo__list {
  display: flex;
  list-style: none;
}

.d-demo__list--left{
  animation :infinity-scroll-left 45s infinite linear 0.5s both;
}

.d-demo__item {
  width: calc(100vw / 4);
}

.d-demo__item > img{
   width: 100%;
   
}

.d-demo__wrap:hover .d-demo__list--left {
  animation-play-state: paused;
	cursor: none;
}

.copy {
  font-family: 'Crimson Text', Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-weight: 400;
  text-align: center;
  font-size: .6rem;
  color: #fdfdfd;
  padding-bottom: .9rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

.po {
  position: relative;
}

.poji {
  position: absolute;
  right: 1rem;
  bottom: 5rem;
}

.glitch {
  color: #fdfdfd;
  font-size: clamp(30px,10vw,112px);
  position: relative;
  font-family: 'Crimson Text', Georgia, "游明朝体", "YuMincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3, "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "ヒラギノ明朝 Pro", "Hiragino Mincho Pro", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
}
@keyframes noise-anim {
  0% {
      clip: rect(49px, 9999px, 27px, 0);
  }
  5% {
      clip: rect(91px, 9999px, 44px, 0);
  }
  10% {
      clip: rect(68px, 9999px, 92px, 0);
  }
  15% {
      clip: rect(94px, 9999px, 58px, 0);
  }
  20% {
      clip: rect(78px, 9999px, 96px, 0);
  }
  25% {
      clip: rect(55px, 9999px, 9px, 0);
  }
  30% {
      clip: rect(8px, 9999px, 81px, 0);
  }
  35% {
      clip: rect(81px, 9999px, 7px, 0);
  }
  40% {
      clip: rect(7px, 9999px, 9px, 0);
  }
  45% {
      clip: rect(53px, 9999px, 48px, 0);
  }
  50% {
      clip: rect(71px, 9999px, 66px, 0);
  }
  55% {
      clip: rect(22px, 9999px, 53px, 0);
  }
  60% {
      clip: rect(41px, 9999px, 79px, 0);
  }
  65% {
      clip: rect(78px, 9999px, 38px, 0);
  }
  70% {
      clip: rect(94px, 9999px, 1px, 0);
  }
  75% {
      clip: rect(75px, 9999px, 27px, 0);
  }
  80% {
      clip: rect(72px, 9999px, 7px, 0);
  }
  85% {
      clip: rect(73px, 9999px, 72px, 0);
  }
  90% {
      clip: rect(42px, 9999px, 63px, 0);
  }
  95% {
      clip: rect(62px, 9999px, 29px, 0);
  }
  100% {
      clip: rect(50px, 9999px, 77px, 0);
  }
}
.glitch:after {
  content: attr(data-text);
  position: absolute;
  left: 2px;
  text-shadow: -1px 0 red;
  top: 0;
  color: #fdfdfd;
  background: #0d1115;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim 2s infinite linear alternate-reverse;
}
@keyframes noise-anim-2 {
  0% {
      clip: rect(19px, 9999px, 97px, 0);
  }
  5% {
      clip: rect(20px, 9999px, 99px, 0);
  }
  10% {
      clip: rect(21px, 9999px, 82px, 0);
  }
  15% {
      clip: rect(78px, 9999px, 36px, 0);
  }
  20% {
      clip: rect(16px, 9999px, 68px, 0);
  }
  25% {
      clip: rect(48px, 9999px, 2px, 0);
  }
  30% {
      clip: rect(87px, 9999px, 92px, 0);
  }
  35% {
      clip: rect(51px, 9999px, 42px, 0);
  }
  40% {
      clip: rect(80px, 9999px, 71px, 0);
  }
  45% {
      clip: rect(83px, 9999px, 13px, 0);
  }
  50% {
      clip: rect(53px, 9999px, 50px, 0);
  }
  55% {
      clip: rect(39px, 9999px, 34px, 0);
  }
  60% {
      clip: rect(45px, 9999px, 69px, 0);
  }
  65% {
      clip: rect(99px, 9999px, 20px, 0);
  }
  70% {
      clip: rect(57px, 9999px, 91px, 0);
  }
  75% {
      clip: rect(14px, 9999px, 2px, 0);
  }
  80% {
      clip: rect(51px, 9999px, 54px, 0);
  }
  85% {
      clip: rect(94px, 9999px, 30px, 0);
  }
  90% {
      clip: rect(13px, 9999px, 15px, 0);
  }
  95% {
      clip: rect(10px, 9999px, 100px, 0);
  }
  100% {
      clip: rect(25px, 9999px, 81px, 0);
  }
}
.glitch:before {
  content: attr(data-text);
  position: absolute;
  left: -2px;
  text-shadow: 1px 0 blue;
  top: 0;
  color: #fdfdfd;
  background: #0d1115;
  overflow: hidden;
  clip: rect(0, 900px, 0, 0);
  animation: noise-anim-2 3s infinite linear alternate-reverse;
}

@media screen and (max-width: 1050px) {
  main {
    overflow: hidden;
  }

  
  .top {
    top: 15vh;
  }

  .background {
    background-image: url(image/mainview.jpg);
    background-size: cover;
    background-position: 20% 50%;
    height: 100vh;
  }

  
  .background:before {
    background-image: inherit;
    background-size: cover;
    background-position: 20% 50%;
  }


  
  .azusa {
    margin-top: 73vh;
  }

    
  .d-demo {
    padding: 0 0 5rem 0;
  }

  
  .glitch {
    width: 85vw;
  }

  .copy {
  padding-bottom: 2rem;
  }


  
}


@media screen and (max-width: 767px) {
  
  
  main {
    overflow: hidden;
  }

  #loading-wrapper {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%; 
    height: 100%; 
  }

  .spinner-box {
    width: 200px;
    height: 200px;
  }

  .blue-orbit {
    width: 190px;
    height: 190px;
  }

  .green-orbit {
    width: 145px;
    height: 145px;
  }

  .red-orbit {
    width: 110px;
    height: 110px;
  }

  .white-orbit {
    width:70px;
    height: 70px;
  }

  .azusa {
    margin-top: 70vh;
  }



  .item img {
    height: 70vh;
    width: 300px;
    object-fit: cover;
  }

  .item {
    margin: 0 20px;
  }


  .background {
    background-image: url(image/mainview.jpg);
    background-size: cover;
    background-position: 30% 50%;
    height: 95vh;
  }

  .background:before {
    background-image: inherit;
    background-size: cover;
    background-position: 30% 50%;
  }

  .section h3 {
    font-size: 15vw;
  }

  .section3 p {
    margin: 1em 0;
  }

  .container, .container3 {
    margin: 3rem auto 0 auto;
    width: 90vw;
  }
  
  
  .container_right {
    margin: 3rem auto 0 auto;
    width: 90vw;
  }

    
  .d-demo {
    padding: 2rem 0 5rem 0;
  }

  .d-demo__item {
    width: 200px;
  }

  .title_box {
    height: 15vh;
  }

  .title {
    font-size: 2.2rem;
  }


}