.index_top {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
}

.index_top_img_container {
  margin: 0 auto;
  width: 65vw;
  height: auto;
}

.index_top_img {
  z-index: 10;
  width: inherit;
  height: auto;
  margin: 0 auto;
}

h3 {
  font-size: 1.5rem;
}

.space {
  margin: 30vh 0;
}

.click_more {
  text-align: right;
}

.click_more a {
  color: rgb(255, 255, 255);
}

.click_more:hover a {
  color: #eee;
}

.click_more_svg {
  stroke: #ccc;
  fill: transparent;
}

.click_more:hover .click_more_svg {
  stroke: #eee;
}

.news {
  width: 55vw;
  min-width: 600px;
  margin-left: 8vw;
  margin-right: auto;
  position: relative;
  z-index: 12;
}

.news_articles {
  width: inherit;
  min-width: inherit;
}

.news_articles_article {
  margin: 40px 0;
  border-bottom: 1px solid #ccc;
}

.news_articles_article:hover {
  border-bottom: 1px solid #eee;
}

.news_articles_article a {
  color: #ccc;
}

.news_articles_article:hover a {
  color: #eee;
}

.news_articles_article_date {
  display: inline-block;
  font-size: 0.8rem;
}

.news_articles_article_title {
  display: inline-block;
  margin-left: 40px;
}

.mv {
  width: 50vw;
  min-width: 600px;
  margin-left: auto;
  margin-right: 10vw;
  position: relative;
  z-index: 12;
}

.mv_embed {
  width: inherit;
  min-width: inherit;
}

.youtube_mv {
  width: inherit;
  min-width: inherit;
  height: calc(50vw / 16 * 9);
  min-height: 337.5px;
  border: 1px solid #ccc;
}

.works {
  width: 50vw;
  min-width: 500px;
  margin-left: 10vw;
  margin-right: auto;
  position: relative;
  z-index: 12;
}

.works > * {
  margin: 2rem 0;
}

.works_articles {
  width: inherit;
  min-width: inherit;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row-reverse;
  justify-content: space-around;
}

.works_articles_article a {
  color: #ccc;
}

.works_articles_article:hover a {
  color: #eee;
}

.works_articles_article_img img {
  width: 18vw;
  height: auto;
  border: 1px solid #ccc;
}

.works_articles_article:hover .works_articles_article_img img {
  border: 1px solid #eee;
}

.works_articles_article_title {
  text-align: center;
  font-size: 1.2vw;
  margin-bottom: 35px;
}

.profile {
  width: 40vw;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.profile_img {
  width: 256px;
  height: 256px;
  margin: 30px auto;
}

.profile_img img {
  width: inherit;
  height: inherit;
  border-radius: 50%;
}

.profile_name {
  margin: 10px auto;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
}

.profile_description {
  text-align: justify;
}

/*背景アニメーション用*/
.frame{
  position: absolute;
  top: 0;
  width: 100vw;
  pointer-events: none;
  z-index: -5;
}

footer{
  z-index:100;
}

/* 900px以下 タブレット用 */

@media screen and (max-width: 900px) {
  .news,
  .mv,
  .works,
  .profile {
    width: 90vw;
    min-width: unset;
    margin: 0 auto;
  }
  .profile {
    width: 80vw;
  }
  .youtube_mv {
    height: calc(90vw / 16 * 9);
    min-height: unset;
  }
  .works_articles_article_img img {
    width: 32vw;
  }
  .works_articles_article_title {
    width: 32vw;
    font-size: 2vw;
  }
  .profile_img {
    width: 200px;
    height: 200px;
  }
  .frame{
    display: none;
  }
}


/* 600px以下 スマホ用 */

@media screen and (max-width: 600px) {
  .profile {
    width: 90vw;
  }
  .works_articles_article_title {
    font-size: 3vw;
  }
  .profile_img {
    width: 150px;
    height: 150px;
  }
  .frame{
    display: none;
  }
}

@media screen and (orientation:portrait) {
  .index_top_img_container {
    width: 90vw;
  }
}


/*画像のグリッチ用のcss*/
.glitch {
  position: absolute;
  position: fixed;
  background-size: cover;
  width: auto;
  min-width: 100%;
  height: auto;
  min-height: 100%;
  z-index: 11;
  opacity: 0.04;
}

.glitch::before, .glitch::after,
.glitch .channel {
  background: inherit;
  background-size: cover;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.glitch::before {
  -webkit-animation: glitch-before 2s linear infinite alternate both;
          animation: glitch-before 2s linear infinite alternate both;
  content: "";
}
@-webkit-keyframes glitch-before {
  0% {
    -webkit-clip-path: polygon(0% 62.5629019452%, 100% 62.5629019452%, 100% 67.9034595919%, 0% 67.9034595919%);
            clip-path: polygon(0% 62.5629019452%, 100% 62.5629019452%, 100% 67.9034595919%, 0% 67.9034595919%);
    transform: translate(2.3520393437%, 0.1265253306%);
  }
  20% {
    -webkit-clip-path: polygon(0% 89.9385632661%, 100% 89.9385632661%, 100% 95.9111834158%, 0% 95.9111834158%);
            clip-path: polygon(0% 89.9385632661%, 100% 89.9385632661%, 100% 95.9111834158%, 0% 95.9111834158%);
    transform: translate(1.7836339909%, -0.0021505885%);
  }
  40% {
    -webkit-clip-path: polygon(0% 3.3573618893%, 100% 3.3573618893%, 100% 13.3125363124%, 0% 13.3125363124%);
            clip-path: polygon(0% 3.3573618893%, 100% 3.3573618893%, 100% 13.3125363124%, 0% 13.3125363124%);
    transform: translate(-2.3572857244%, 0.4644835226%);
  }
  60% {
    -webkit-clip-path: polygon(0% 32.027877502%, 100% 32.027877502%, 100% 41.6285001197%, 0% 41.6285001197%);
            clip-path: polygon(0% 32.027877502%, 100% 32.027877502%, 100% 41.6285001197%, 0% 41.6285001197%);
    transform: translate(2.0641340528%, 0.0463549729%);
  }
  80% {
    -webkit-clip-path: polygon(0% 47.8854213782%, 100% 47.8854213782%, 100% 52.1061807908%, 0% 52.1061807908%);
            clip-path: polygon(0% 47.8854213782%, 100% 47.8854213782%, 100% 52.1061807908%, 0% 52.1061807908%);
    transform: translate(0.8621599981%, -0.1546176022%);
  }
  100%, 100% {
    -webkit-clip-path: none;
            clip-path: none;
    transform: none;
  }
}
@keyframes glitch-before {
  0% {
    -webkit-clip-path: polygon(0% 62.5629019452%, 100% 62.5629019452%, 100% 67.9034595919%, 0% 67.9034595919%);
            clip-path: polygon(0% 62.5629019452%, 100% 62.5629019452%, 100% 67.9034595919%, 0% 67.9034595919%);
    transform: translate(2.3520393437%, 0.1265253306%);
  }
  20% {
    -webkit-clip-path: polygon(0% 89.9385632661%, 100% 89.9385632661%, 100% 95.9111834158%, 0% 95.9111834158%);
            clip-path: polygon(0% 89.9385632661%, 100% 89.9385632661%, 100% 95.9111834158%, 0% 95.9111834158%);
    transform: translate(1.7836339909%, -0.0021505885%);
  }
  40% {
    -webkit-clip-path: polygon(0% 3.3573618893%, 100% 3.3573618893%, 100% 13.3125363124%, 0% 13.3125363124%);
            clip-path: polygon(0% 3.3573618893%, 100% 3.3573618893%, 100% 13.3125363124%, 0% 13.3125363124%);
    transform: translate(-2.3572857244%, 0.4644835226%);
  }
  60% {
    -webkit-clip-path: polygon(0% 32.027877502%, 100% 32.027877502%, 100% 41.6285001197%, 0% 41.6285001197%);
            clip-path: polygon(0% 32.027877502%, 100% 32.027877502%, 100% 41.6285001197%, 0% 41.6285001197%);
    transform: translate(2.0641340528%, 0.0463549729%);
  }
  80% {
    -webkit-clip-path: polygon(0% 47.8854213782%, 100% 47.8854213782%, 100% 52.1061807908%, 0% 52.1061807908%);
            clip-path: polygon(0% 47.8854213782%, 100% 47.8854213782%, 100% 52.1061807908%, 0% 52.1061807908%);
    transform: translate(0.8621599981%, -0.1546176022%);
  }
  100%, 100% {
    -webkit-clip-path: none;
            clip-path: none;
    transform: none;
  }
}
.glitch::after {
  -webkit-animation: glitch-after 2s linear infinite alternate both;
          animation: glitch-after 2s linear infinite alternate both;
  content: "";
}
@-webkit-keyframes glitch-after {
  0% {
    -webkit-clip-path: polygon(0% 29.8315736923%, 100% 29.8315736923%, 100% 36.0279644739%, 0% 36.0279644739%);
            clip-path: polygon(0% 29.8315736923%, 100% 29.8315736923%, 100% 36.0279644739%, 0% 36.0279644739%);
    transform: translate(-0.6056054401%, 0.4705368671%);
  }
  20% {
    -webkit-clip-path: polygon(0% 56.6766768325%, 100% 56.6766768325%, 100% 60.1858629897%, 0% 60.1858629897%);
            clip-path: polygon(0% 56.6766768325%, 100% 56.6766768325%, 100% 60.1858629897%, 0% 60.1858629897%);
    transform: translate(1.241661317%, 0.0630135195%);
  }
  40% {
    -webkit-clip-path: polygon(0% 46.7784085027%, 100% 46.7784085027%, 100% 50.8080852162%, 0% 50.8080852162%);
            clip-path: polygon(0% 46.7784085027%, 100% 46.7784085027%, 100% 50.8080852162%, 0% 50.8080852162%);
    transform: translate(-1.3825058904%, -0.0431826425%);
  }
  60% {
    -webkit-clip-path: polygon(0% 39.0456600252%, 100% 39.0456600252%, 100% 41.8879558636%, 0% 41.8879558636%);
            clip-path: polygon(0% 39.0456600252%, 100% 39.0456600252%, 100% 41.8879558636%, 0% 41.8879558636%);
    transform: translate(-1.9521302171%, 0.2528488756%);
  }
  80% {
    -webkit-clip-path: polygon(0% 11.4245026757%, 100% 11.4245026757%, 100% 16.9523172724%, 0% 16.9523172724%);
            clip-path: polygon(0% 11.4245026757%, 100% 11.4245026757%, 100% 16.9523172724%, 0% 16.9523172724%);
    transform: translate(0.6468164475%, -0.1163050961%);
  }
  100%, 100% {
    -webkit-clip-path: none;
            clip-path: none;
    transform: none;
  }
}
@keyframes glitch-after {
  0% {
    -webkit-clip-path: polygon(0% 29.8315736923%, 100% 29.8315736923%, 100% 36.0279644739%, 0% 36.0279644739%);
            clip-path: polygon(0% 29.8315736923%, 100% 29.8315736923%, 100% 36.0279644739%, 0% 36.0279644739%);
    transform: translate(-0.6056054401%, 0.4705368671%);
  }
  20% {
    -webkit-clip-path: polygon(0% 56.6766768325%, 100% 56.6766768325%, 100% 60.1858629897%, 0% 60.1858629897%);
            clip-path: polygon(0% 56.6766768325%, 100% 56.6766768325%, 100% 60.1858629897%, 0% 60.1858629897%);
    transform: translate(1.241661317%, 0.0630135195%);
  }
  40% {
    -webkit-clip-path: polygon(0% 46.7784085027%, 100% 46.7784085027%, 100% 50.8080852162%, 0% 50.8080852162%);
            clip-path: polygon(0% 46.7784085027%, 100% 46.7784085027%, 100% 50.8080852162%, 0% 50.8080852162%);
    transform: translate(-1.3825058904%, -0.0431826425%);
  }
  60% {
    -webkit-clip-path: polygon(0% 39.0456600252%, 100% 39.0456600252%, 100% 41.8879558636%, 0% 41.8879558636%);
            clip-path: polygon(0% 39.0456600252%, 100% 39.0456600252%, 100% 41.8879558636%, 0% 41.8879558636%);
    transform: translate(-1.9521302171%, 0.2528488756%);
  }
  80% {
    -webkit-clip-path: polygon(0% 11.4245026757%, 100% 11.4245026757%, 100% 16.9523172724%, 0% 16.9523172724%);
            clip-path: polygon(0% 11.4245026757%, 100% 11.4245026757%, 100% 16.9523172724%, 0% 16.9523172724%);
    transform: translate(0.6468164475%, -0.1163050961%);
  }
  100%, 100% {
    -webkit-clip-path: none;
            clip-path: none;
    transform: none;
  }
}
.glitch .channel {
  mix-blend-mode: screen;
}
.glitch .channel::before {
  bottom: 0;
  content: "";
  display: block;
  mix-blend-mode: multiply;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}
.glitch .r {
  -webkit-animation: rgb-shift-r 2s steps(3, jump-end) infinite alternate both;
          animation: rgb-shift-r 2s steps(3, jump-end) infinite alternate both;
}
@-webkit-keyframes rgb-shift-r {
  0% {
    transform: translate(0.8813737575%, 0.5389030252%);
  }
  20% {
    transform: translate(-0.4256813548%, 0.8221807909%);
  }
  40% {
    transform: translate(-1.1895320975%, -0.5530210215%);
  }
  60% {
    transform: translate(-1.3747919662%, 1.90101173%);
  }
  80% {
    transform: translate(-0.3666602501%, 0.2491965868%);
  }
  100%, 100% {
    transform: none;
  }
}
@keyframes rgb-shift-r {
  0% {
    transform: translate(0.8813737575%, 0.5389030252%);
  }
  20% {
    transform: translate(-0.4256813548%, 0.8221807909%);
  }
  40% {
    transform: translate(-1.1895320975%, -0.5530210215%);
  }
  60% {
    transform: translate(-1.3747919662%, 1.90101173%);
  }
  80% {
    transform: translate(-0.3666602501%, 0.2491965868%);
  }
  100%, 100% {
    transform: none;
  }
}
.glitch .r::before {
  background: #f00;
}
.glitch .g {
  -webkit-animation: rgb-shift-g 2s steps(3, jump-end) infinite alternate both;
          animation: rgb-shift-g 2s steps(3, jump-end) infinite alternate both;
}
@-webkit-keyframes rgb-shift-g {
  0% {
    transform: translate(-0.3264920893%, 1.2560449791%);
  }
  20% {
    transform: translate(-1.3033973725%, 0.4279849074%);
  }
  40% {
    transform: translate(-1.0732977153%, 1.8359042803%);
  }
  60% {
    transform: translate(-1.0189314168%, -0.9522321062%);
  }
  80% {
    transform: translate(-0.2933091801%, -1.6300600886%);
  }
  100%, 100% {
    transform: none;
  }
}
@keyframes rgb-shift-g {
  0% {
    transform: translate(-0.3264920893%, 1.2560449791%);
  }
  20% {
    transform: translate(-1.3033973725%, 0.4279849074%);
  }
  40% {
    transform: translate(-1.0732977153%, 1.8359042803%);
  }
  60% {
    transform: translate(-1.0189314168%, -0.9522321062%);
  }
  80% {
    transform: translate(-0.2933091801%, -1.6300600886%);
  }
  100%, 100% {
    transform: none;
  }
}
.glitch .g::before {
  background: #0f0;
}
.glitch .b {
  -webkit-animation: rgb-shift-b 2s steps(3, jump-end) infinite alternate both;
          animation: rgb-shift-b 2s steps(3, jump-end) infinite alternate both;
}
@-webkit-keyframes rgb-shift-b {
  0% {
    transform: translate(1.4175031258%, -0.1877281056%);
  }
  20% {
    transform: translate(1.3682301023%, 1.8242551399%);
  }
  40% {
    transform: translate(1.5272668655%, 1.1622423513%);
  }
  60% {
    transform: translate(1.1980351944%, 0.613858047%);
  }
  80% {
    transform: translate(-1.8451235852%, -0.0814882137%);
  }
  100%, 100% {
    transform: none;
  }
}
@keyframes rgb-shift-b {
  0% {
    transform: translate(1.4175031258%, -0.1877281056%);
  }
  20% {
    transform: translate(1.3682301023%, 1.8242551399%);
  }
  40% {
    transform: translate(1.5272668655%, 1.1622423513%);
  }
  60% {
    transform: translate(1.1980351944%, 0.613858047%);
  }
  80% {
    transform: translate(-1.8451235852%, -0.0814882137%);
  }
  100%, 100% {
    transform: none;
  }
}
.glitch .b::before {
  background: #00f;
}
/*# sourceMappingURL=glitch.css.map */

.frame {
  position: fixed;
  top: 0;
  width: 100vw;
  pointer-events: none;
  z-index: -12;
}