@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style-type: none;
}

p {
  font-family: serif;
}

html {
  overflow: auto;
}

body {
  position: relative;
  overflow: hidden;
}

.anime {
  height: 0;
  opacity: 0;
}

/*ナビメニューのスタイルを指定*/
nav.NavMenu{
	position: fixed; /*表示位置を固定*/
	z-index: 2; /*重ね順を変更*/
	top: -0.7; /*表示位置を指定*/
	left: 50%; /*表示位置を指定*/
	background: #fff;/*背景を白にする*/
	color: #ffffff; /*文字色を黒にする*/
	width: 50%; /*全幅表示*/
	transform: translateX(100%); /*ナビを上に隠す上から出したい場合は、transform: translateYを使う。*/
	transition: all 0.3s; /*アニメーションの時間を指定*/
}


nav.NavMenu ul {
	background: #242b69 ; /*背景をグレーにする*/
	width: 100%;
	margin: 0 auto;
	padding: 0;
  z-index: 500;
}

nav.NavMenu ul li{
	font-size: 1.2em;
	list-style-type: none;
	padding: 0 20px;
	width: 100%;
	border-bottom: 1px dotted #6c589c;
}

nav.NavMenu ul li:hover{
  transition: 0.8s;
  background-color: #9c5858;
  animation: nav-li 0.8s linear forwards; ;
}
@keyframes nav-li {
    0%{
      background-color: #242b69;
    }

    20%{
      background-color: #3b47b3;
    }

    100%{
      background-color: #580058;
    }
}



nav.NavMenu ul li:last-child{
	padding-bottom: 0;
	border-bottom: none; /*最後のメニュー項目のみ下線を消す*/
}

nav.NavMenu ul li a {
	display: block; /*クリックできる領域を広げる*/
	color: #ffffff;
	padding: 1em 0;
  margin-left: 1vw;
}

/*トグルボタンが押されたときに付与するクラス*/
nav.NavMenu.active{
	transform: translateY(0%);/*上から出したい場合は、transform: translateYを使う。*/
  z-index: 9999;
}

/*トグルボタンのスタイルを指定*/
.Toggle {
	position: fixed;/* bodyに対しての絶対位置指定 */
	right: 13px;
	top: 12px;
	width: 42px;
	height: 42px;
	cursor: pointer;/*divだけどカーソルが変わるようにしている*/
	z-index: 9999;/*ボタンを一番上にしている(押せなくなるから)*/
}

.Toggle span {
	display: block;
	position: absolute;
	left: 6px;
	width: 30px;
	border-bottom: solid 3px #ffffff;
	transition: .35s ease-in-out;/*変化の速度を指定*/
}

.Toggle span:nth-child(1) {
	top: 9px;
}

.Toggle span:nth-child(2) {
	top: 18px;
}

.Toggle span:nth-child(3) {
	top: 27px;
}

/* 最初のspanをマイナス45度に */
.Toggle.active span:nth-child(1) {
	top: 18px;
	left: 6px;
	transform: rotate(-45deg);
}

/* 2番目と3番目のspanを45度に */
.Toggle.active span:nth-child(2),
.Toggle.active span:nth-child(3) {
	top: 18px;
	transform: rotate(45deg);
}

.video{
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: -1;
}

.video::after{
  content: '';
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
}

.video video{
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}


header {
  display: flex;
  width: 100%;
  height: 50px;
}

h1 {
  width: 90%;
  margin-top: 1vw;
  margin-left: 2vw;
  font-size: 8vw;
  color: #fff;
}

.h1-i {
  display: inline-block;
  animation: rotate 5s linear 0s forwards;
}
@keyframes rotate{
  90%{
    transform:rotateZ(0);
  }
  100% {
    transform:rotateZ(-20deg);
  }
}

.h1-o {
  display: inline-block;
  animation: rotate1 5s linear 0s forwards;
  opacity: 0;
}
@keyframes rotate1{
  0% {
    transform:rotateZ(0);
    margin-left:-80vw;
    opacity: 1;
  }
  30% {
    transform:rotateZ(1800deg);
    margin-left: 14.5vw;
    opacity: 1;
  }
  90% {
    transform:rotateZ(650deg);
    margin-left: -1vw;
    opacity: 1;
  }
  100% {
    transform:rotateZ(720deg);
    margin-left: 1vw;
    opacity: 1;
  }  
}

.h1-dot {
  position: absolute;
  display: block;
  width: 10%;
  margin-top: 18vw;
  margin-left: 51.5vw;
  color: #fff;
  font-size: 3vw;
}

.web {
  width: 20%;
  font-size: 2.5vw;
}

.web a {
  color: #fff;
}

.ps {
  width: 40%;
  font-size: 2.5vw;
}

.ps a {
  color: #fff;
}



.background-box1 {
  position: absolute;
  width: 40vw;
  height: 200vw;
  margin-top: -90vw;
  transform: rotate(70deg);
  background-color: rgba(153, 0, 255, 0.2);
  z-index: -1;
}

.background-box2 {
  position: absolute;
  width: 40vw;
  height: 200vw;
  margin-top: -73.5vw;
  margin-left: 5vw;
  transform: rotate(-70deg);
  background-color: rgba(255, 0, 170, 0.2);
  z-index: -1;
}

.content-box1 {
  margin-bottom: 20vw;
  color: #fff;
  font-size: 1.3vw;
}

.about-text1 {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.about-text1.on {
  transform: translateY(0);
  opacity: 1.0;
}

.about-text2 {
  transition: 0.8s ease-in-out;
  transform: translateY(30px);
  opacity: 0;
}
.about-text2.on {
  transform: translateY(0);
  opacity: 1.0;
}

.content-box1 h2 {
  margin-top: 40vw;
  padding-top: 10vw;
  margin-left: 23vw;
  margin-bottom: -5vw;
  font-size: 3vw;
}

.about-text-wrap {
  position: relative;
  display: flex;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 40vw;
}

.about-text1 {
  position: absolute;
  padding: 3vw;
  margin-top: -8vw;
  margin-left: 35vw;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 100;
}

.about-text1 h3 {
  margin-bottom: 2vw;
  font-size: 1.7vw;
}

.about-text2 {
  position: absolute;
  width: 35%;
  margin-top: 13vw;
  margin-left: 1.45vw;
  padding: 3vw;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 100;
}

.about-text2 h3 {
  margin-bottom: 2vw;
  font-size: 1.7vw;
}

.skill-content1 {
  display: flex;
}

.skill-content2 {
  display: flex;
  margin-top: 2vw;
}

.blank1 {
  height: 10vw;
}

.content-box2 {
  color: #fff;
}

.content-box2 h2 {
  position: absolute;
  margin-left: 46vw;
  font-size: 3vw;
  text-align: center;
}

.content-box2 div div p {
  font-size: 1.2vw
}

.web1-background {
  position: absolute;
  width: 31.80vw;
  height: 31.80vw;
  padding: 1.5vw;
  margin-left: 7.4vw;
  background-color: rgba(221, 221, 221, 0.6);
  z-index: 50;
  transform: rotate(45deg);
}

.web1 {
  position: absolute;
  width: 32vw;
  height: 42vw;
  padding: 1.5vw;
  margin-left: 8.8vw;
  z-index: 100;
  box-sizing: border-box;
}

.web1 img {
  display: block;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.web1 a:after {
  content: "";
  position: fixed;
  inset: 0;
  margin: auto;
  display: block;
  pointer-events: none;
  width: 98.7vw;
  height: 57vw;
  opacity: 0.3;
}

.web1 a:hover:after {
  background: url(../images/web1.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: -1;
  animation: web1 1s;
}
@keyframes  web1 {
  0% {
    transform: skew(90deg, 45deg);
    width: 98.7vw;
  }
  50% {
    width: 98.7vw;
    
  }
  100% {
    width: 98.7vw;
  }
}

.web-theme {
  text-align: center;
}

.web-more {
  position: absolute;
  height: 3vw;
  margin-top: -11vw;
  text-align: center;
  text-align: center;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

.web-more p {
  font-weight: 600;
}

.web-box {
  display: flex;
  justify-content: center;
  margin-bottom: 1vw;  
}

.web-production {
  margin-top: 1vw;
  text-align: center;
}

.web6 div div:first-child {
  margin-left: 2vw;
}

.web-target {
  margin-top: 1vw;
  margin-left: 2vw;
  text-align: center;
}

.web-concept {
  margin-top: 1vw;
  text-align: center;
}

.web-concept p:nth-child(2) {
  white-space: pre-wrap;
}


.web2-background {
  position: absolute;
  width: 31.80vw;
  height: 31.80vw;
  padding: 1.5vw;
  margin-left: 56.75vw;
  background-color: rgba(221, 221, 221, 0.6);
  z-index: 50;
  transform: rotate(45deg);
}

.web2 {
  position: absolute;
  width: 32vw;
  height: 42vw;
  padding: 1.5vw;
  margin-left: 58.2vw;
  box-sizing: border-box;
  z-index: 100;
}

.web2 img {
  display: block;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.web2 a:after {
  content: "";
  position: fixed;
  inset: 0;
  margin: auto;
  display: block;
  pointer-events: none;
  width: 98.7vw;
  height: 100vw;
  opacity: 0.3;
}

.web2 a:hover:after {
  background: url(../images/web2.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: -1;
  animation: web2 1s;
}
@keyframes  web2 {
  0% {
    transform: skew(90deg, 45deg);
    width: 98.7vw;
  }
  50% {
    width: 98.7vw;
  }
  100% {
    width: 98.7vw;
  }
}


.web3-background {
  position: absolute;
  width: 31.80vw;
  height: 31.80vw;
  padding: 1.5vw;
  margin-top: 24.85vw;
  margin-left: 32.05vw;
  background-color: rgba(221, 221, 221, 0.6);
  z-index: 50;
  transform: rotate(45deg);
}

.web3 {
  position: absolute;
  width: 32vw;
  height: 42vw;
  padding: 1.5vw;
  margin-top: 25vw;
  margin-left: 33.5vw;
  box-sizing: border-box;
  z-index: 100;
}

.web3 img {
  display: block;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.web3 a:after {
  content: "";
  position: fixed;
  inset: 0;
  margin: auto;
  display: block;
  pointer-events: none;
  width: 98.7vw;
  height: 100vw;
  opacity: 0.3;
}

.web3 a:hover:after {
  background: url(../images/web3.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: -1;
  animation: web3 1s;
}
@keyframes  web3 {
  0% {
    transform: skew(90deg, 45deg);
    width: 98.7vw;
  }
  50% {
    width: 98.7vw;
  }
  100% {
    width: 98.7vw;
  }
}


.web4-background {
  position: absolute;
  width: 31.80vw;
  height: 31.80vw;
  padding: 1.5vw;
  margin-top: 49.6vw;
  margin-left: 7.3vw;
  background-color: rgba(221, 221, 221, 0.6);
  z-index: 50;
  transform: rotate(45deg);
}

.web4 {
  position: absolute;
  width: 32vw;
  height: 42vw;
  padding: 1.5vw;
  margin-top: 50vw;
  margin-left: 8.5vw;
  z-index: 100;
  box-sizing: border-box;
}

.web4 img {
  display: block;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.web4 a:after {
  content: "";
  position: fixed;
  inset: 0;
  margin: auto;
  display: block;
  pointer-events: none;
  width: 98.7vw;
  height: 100vw;
  opacity: 0.3;
}

.web4 a:hover:after {
  background: url(../images/web4.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: -1;
  animation: web4 1s;
}
@keyframes  web4 {
  0% {
    transform: skew(90deg, 45deg);
    width: 98.7vw;
  }
  50% {
    width: 98.7vw;
  }
  100% {
    width: 98.7vw;
  }
}


.web5-background {
  position: absolute;
  width: 31.80vw;
  height: 31.80vw;
  padding: 1.5vw;
  margin-top: 49.6vw;
  margin-left: 56.8vw;
  background-color: rgba(221, 221, 221, 0.6);
  z-index: 50;
  transform: rotate(45deg);
}

.web5 {
  position: absolute;
  width: 32vw;
  height: 42vw;
  padding: 1.5vw;
  margin-top: 50vw;
  margin-left: 58.2vw;
  box-sizing: border-box;
  z-index: 100;
}

.web5 img {
  display: block;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.web5 a:after {
  content: "";
  position: fixed;
  inset: 0;
  margin: auto;
  display: block;
  pointer-events: none;
  width: 98.7vw;
  height: 100vw;
  opacity: 0.3;
}

.web5 a:hover:after {
  background: url(../images/web5.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: -1;
  animation: web5 1s;
}
@keyframes  web5 {
  0% {
    transform: skew(90deg, 45deg);
    width: 98.7vw;
  }
  50% {
    width: 98.7vw;
  }
  100% {
    width: 98.7vw;
  }
}

.web6-background {
  position: absolute;
  width: 31.80vw;
  height: 31.80vw;
  padding: 1.5vw;
  margin-top: 74.35vw;
  margin-left: 32.05vw;
  background-color: rgba(221, 221, 221, 0.6);
  z-index: 50;
  transform: rotate(45deg);
}

.web6 {
  position: absolute;
  width: 32vw;
  height: 42vw;
  padding: 1.5vw;
  margin-top: 73.5vw;
  margin-left: 33.5vw;
  box-sizing: border-box;
  z-index: 100;
}

.web6 img {
  display: block;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.web6 a:after {
  content: "";
  position: fixed;
  inset: 0;
  margin: auto;
  display: block;
  pointer-events: none;
  width: 98.7vw;
  height: 100vw;
  opacity: 0.3;
}

.web6 a:hover:after {
  background: url(../images/web6.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: -2;
  animation: web3 1s;
}
@keyframes  web3 {
  0% {
    transform: skew(90deg, 45deg);
    width: 98.7vw;
  }
  50% {
    width: 98.7vw;
  }
  100% {
    width: 98.7vw;
  }
}



.blank2 {
  height: 5vw;
}

.content-box3 {
  width: 100%;
  margin-top: 120vw;
  margin-left: auto;
  margin-right: auto;
  color: #fff;
}

.content-box3 h2 {
  position: absolute;
  margin-top: 10vw;
  margin-left: 60vw;
  margin-bottom: 5vw;
  font-size: 3vw;
}

/* 
.background-border {
  display: flex;
} 
.background-border::after {
  content: '';
  width: 100px;
  height: 15px;
  border-bottom: solid 1px;
  border-right: solid 1px;
  box-shadow: 0 0 10px #fff,0 0 15px #fff;
  transform: skew(45deg);
} */

.content-box3 p {
  font-size: 1.2vw;
}

.content-box3_container1 {
  display: flex;
  width: 100%;
  height: 50vw;
  margin-top: 5vw;
  overflow: hidden;
}

.poster1 {
  position: relative;
  width: 75vw;
  height: 100vw;
  margin-left: -13vw;
  clip-path: polygon(40% 0, 100% 0, 60% 50%, 0 50%);
  background-color: rgba(221, 221, 221, 0.6);
  color: #fff;
  overflow: hidden;
  z-index: 10;
}

.content-image1 {
  width: 90%;
  height: 20vw;
  margin-left: 15vw;
  overflow: hidden;
}

.content-image1 a img {
  width: 90%;
  height: 70vw;
  margin-top: -26vw;
}

/* animation */
.poster1,
.poster3,
.banner1 {
  transition: 0.5s ease-in-out;
  transform: translate(100px,-100px);
  opacity: 0;
}
.poster1.on,
.poster3.on,
.banner1.on {
  transition-delay: 0.3s;
  transform: translate(0);
  opacity: 1.0;
}

.poster2,
.poster4,
.banner2 {
  transition: 0.5s ease-in-out;
  transform: translate(-100px,-100px);
  opacity: 0;
}
.poster2.on,
.poster4.on,
.banner2.on {
  transition-delay: 0.3s;
  transform: translate(0);
  opacity: 1.0;
}

.poster1-behind,
.poster3-behind,
.banner1-behind {
  transition: 0.5s ease-in-out;
  transform: translate(100px,-100px);
  opacity: 0;
}
.poster1-behind.on,
.poster3-behind.on,
.banner1-behind.on {
  transform: translate(0);
  opacity: 1.0;
}

.poster2-behind,
.poster4-behind,
.banner2-behind {
  transition: 0.5s ease-in-out;
  transform: translate(-100px,-100px);
  opacity: 0;
}
.poster2-behind.on,
.poster4-behind.on,
.banner2-behind.on {
  transform: translate(0);
  opacity: 1.0;
}

.poster1-more {
  margin-left: 35vw;
}

.poster1-theme {
  margin-top: 2vw;
  text-align: center;
  margin-left: -1vw;
}

.poster1-box {
  display: flex;
  margin-left: 22vw;
}

.poster1-production {
  margin-top: 2vw;
  text-align: center;
  
}

.poster1-target {
  margin-top: 2vw;
  text-align: center;
  margin-left: 3vw;
}

.poster1-concept {
  margin-top: 2vw;
  text-align: center;
  margin-left: -15vw;
}

.poster1-concept p:nth-child(2) {
  white-space: pre-wrap;
}

.poster1-behind {
  position: absolute;
  width: 75vw;
  height: 100vw;
  margin-top: 2vw;
  margin-left: -16vw;
  background-color: rgba(138, 138, 138, 0.6);
  display: flex;
  justify-content :center;
  align-items: center;
  color: #fff;
  overflow: hidden;
  clip-path: polygon(40% 0, 100% 0, 60% 50%, 0 50%);
}


.content-box3_container2 {
  display: flex;
  width: 100%;
  height: 50vw;
  margin-top: -25vw;
  overflow: hidden;
}

.poster2 {
  position: absolute;
  width: 75vw;
  height: 100vw;
  margin-left: 35.3vw;
  clip-path: polygon(15.6% 0, 60% 0, 100% 50%, 40% 50%, 8.3% 9%);
  background-color: rgba(221, 221, 221, 0.6);
  color: #fff;
  z-index: 10;
}

.content-image2 {
  width: 90%;
  height: 20vw;
  margin-top: -2vw;
  overflow: hidden;
}

.content-image2 a img {
  width: 95%;
  margin-top: -8vw;
  margin-left: 5vw;
}

.poster2-more {
  margin-left: 30vw;
}

.poster2-theme {
  margin-top: 2vw;
  text-align: center;
}

.poster2-box {
  display: flex;
  margin-left: 28vw;
}

.poster2-production {
  margin-top: 2vw;
  text-align: center;
}

.poster2-target {
  margin-top: 2vw;
  text-align: center;
  margin-left: 3vw;
}

.poster2-concept {
  margin-top: 2vw;
  text-align: center;
  margin-left: 13vw;
}

.poster2-concept p:nth-child(2) {
  margin-left: 3vw;
  white-space: pre-wrap;
}


.poster2-behind {
  position: absolute;
  width: 75vw;
  height: 100vw;
  margin-top: 2vw;
  margin-left: 38.5vw;
  background-color: rgba(138, 138, 138, 0.6);
  z-index: 9;
  clip-path: polygon(15.6% 0, 60% 0, 100% 50%, 40% 50%, 8.5% 9%);
}

.content-box3_container3 {
  display: flex;
  width: 100%;
  height: 50vw;
  margin-top: -22vw;
  overflow: hidden;
}


.poster3 {
  position: relative;
  width: 75vw;
  height: 100vw;
  margin-left: -13vw;
  clip-path: polygon(87.4% 0, 94% 8.5%, 60% 50%, 0 50%, 40% 0);
  background-color: rgba(221, 221, 221, 0.6);
  color: #fff;
  overflow: hidden;
  z-index: 10;
}

.poster3-content {
  margin-top: 17vw;
}

.content-image3 {
  width: 90%;
  height: 20vw;
  margin-top: -17vw;
  margin-left: 12vw;
  overflow: hidden;
}

.content-image3 a img {
  width: 90%;
  height: 40vw;
  margin-top: -2vw;
  margin-left: 3vw;
}


.poster3-more {
  margin-left: 35vw;
}

.poster3-theme {
  margin-top: 2vw;
  text-align: center;
  margin-left: -1vw;
}

.poster3-box {
  display: flex;
  margin-left: 22vw;
}

.poster3-production {
  margin-top: 2vw;
  text-align: center;
  
}

.poster3-target {
  margin-top: 2vw;
  text-align: center;
  margin-left: 3vw;
}

.poster3-concept {
  margin-top: 2vw;
  text-align: center;
  margin-left: -15vw;
}

.poster3-concept p:nth-child(2) {
  white-space: pre-wrap;
}

.poster3-behind {
  position: absolute;
  width: 75vw;
  height: 100vw;
  margin-top: 2vw;
  margin-left: -16vw;
  background-color: rgba(138, 138, 138, 0.6);
  overflow: hidden;
  clip-path: polygon(87.4% 0, 94% 8.5%, 60% 50%, 0 50%, 40% 0);
}


.content-box3_container4 {
  display: flex;
  width: 100%;
  height: 50vw;
  margin-top: -25vw;
  overflow: hidden;
}

.poster4 {
  position: absolute;
  width: 75vw;
  height: 100vw;
  margin-left: 35.3vw;
  clip-path: polygon(15.6% 0, 60% 0, 100% 50%, 40% 50%, 8.3% 9%);
  background-color: rgba(221, 221, 221, 0.6);
  color: #fff;
  z-index: 10;
}

.content-image4 {
  width: 90%;
  height: 20vw;
  margin-top: -2vw;
  overflow: hidden;
}

.content-image4 a img {
  width: 80%;
  margin-top: -1vw;
  margin-left: 5vw;
}

.poster4-more {
  margin-left: 30vw;
}

.poster4-theme {
  margin-top: 2vw;
  text-align: center;
}

.poster4-box {
  display: flex;
  margin-left: 28vw;
}

.poster4-production {
  margin-top: 2vw;
  text-align: center;
}

.poster4-target {
  margin-top: 2vw;
  text-align: center;
  margin-left: 3vw;
}

.poster4-concept {
  margin-top: 2vw;
  text-align: center;
  margin-left: 13vw;
}

.poster4-concept p:nth-child(2) {
  margin-left: 3vw;
  white-space: pre-wrap;
}


.poster4-behind {
  position: absolute;
  width: 75vw;
  height: 100vw;
  margin-top: 2vw;
  margin-left: 38.5vw;
  background-color: rgba(138, 138, 138, 0.6);
  z-index: 9;
  clip-path: polygon(15.6% 0, 60% 0, 100% 50%, 40% 50%, 8.5% 9%);
}


.content-box3_container5 {
  display: flex;
  width: 100%;
  height: 50vw;
  margin-top: -22vw;
  overflow: hidden;
}

.banner1 {
  position: relative;
  width: 75vw;
  height: 100vw;
  margin-left: -13vw;
  clip-path: polygon(87.4% 0, 94% 8.5%, 60% 50%, 0 50%, 40% 0);
  background-color: rgba(221, 221, 221, 0.6);
  color: #fff;
  overflow: hidden;
  z-index: 10;
}

.content-image5 {
  width: 80%;
  height: 20vw;
  margin-top: -4vw;
  margin-left: 15vw;
  overflow: hidden;
}

.content-image5 a img {
  width: 100%;
  height: 40vw;
  margin-top: 3vw;
  margin-left: 3vw;
}


.banner1-more {
  margin-left: 35vw;
}

.banner1-theme {
  margin-top: 2vw;
  text-align: center;
  margin-left: -1vw;
}

.banner1-box {
  display: flex;
  margin-left: 18vw;
}

.banner1-production {
  margin-top: 2vw;
  text-align: center;
  
}

.banner1-target {
  margin-top: 2vw;
  text-align: center;
  margin-left: 3vw;
}

.banner1-concept {
  margin-top: 2vw;
  text-align: center;
  margin-left: -15vw;
}

.banner1-concept p:nth-child(2) {
  white-space: pre-wrap;
}

.banner1-behind {
  position: absolute;
  width: 75vw;
  height: 100vw;
  margin-top: 2vw;
  margin-left: -16.5vw;
  background-color: rgba(138, 138, 138, 0.6);
  clip-path: polygon(87.4% 0, 94% 8.5%, 60% 50%, 0 50%, 40% 0);
}

.content-box3_container6 {
  display: flex;
  width: 100%;
  height: 50vw;
  margin-top: -25vw;
  overflow: hidden;
}

.banner2 {
  position: absolute;
  width: 75vw;
  height: 100vw;
  margin-left: 35.3vw;
  clip-path: polygon(16% 0, 60% 0, 100% 50%, 40% 50%, 8.6% 9.1%);
  background-color: rgba(221, 221, 221, 0.6);
  color: #fff;
  z-index: 10;
}

.content-image6 {
  width: 100%;
  height: 20vw;
  margin-top: -2vw;
  margin-left: 5vw;
  overflow: hidden;
}

.content-image6 a img {
  width: 90%;
  height: 60vw;
  margin-top: -6vw;
  margin-left: -13vw;
}

.banner2-more {
  margin-left: 30vw;
}

.banner2-theme {
  margin-top: 2vw;
  text-align: center;
}

.banner2-box {
  display: flex;
  margin-left: 28vw;
}

.banner2-production {
  margin-top: 2vw;
  text-align: center;
}

.banner2-target {
  margin-top: 2vw;
  text-align: center;
  margin-left: 3vw;
}

.banner2-concept {
  margin-top: 2vw;
  text-align: center;
  margin-left: 10vw;
}

.banner2-concept p:nth-child(2) {
  margin-left: 3vw;
  white-space: pre-wrap;
}


.banner2-behind {
  position: absolute;
  width: 75vw;
  height: 100vw;
  margin-top: 2vw;
  margin-left: 38.5vw;
  background-color: rgba(138, 138, 138, 0.6);
  z-index: 9;
  clip-path: polygon(15.8% 0, 60% 0, 100% 50%, 40% 50%, 8.8% 9%);
}

.content-box4 {
  height: 100vw;
  margin-top: 5vw;
}

.content-box4 h2 {
  position: absolute;
  color: #fff;
  margin-top: 8vw;
  margin-left: 44vw;
  font-size: 3vw;
}

/* other-back */
.other-back-wrap1 {
  position: absolute;
  z-index: 50;
}

.other-back1 {
  position: absolute;
  width: 30.8vw;
  height: 26.3vw;
  margin-top: 24.3vw;
  margin-left: -5.4vw;
  background-color: #00000090;
}

.other-back2 {
  position: absolute;
  width: 26.5vw;
  height: 30.6vw;
  margin-top: 22.2vw;
  margin-left: 16.7vw;
  background-color: #00000090;
}


/* animetion */
.other1-item,
.other2-item,
.other3-item,
.other4-item {
  transition: 0.8s ease-in-out;
  transform: translateY(-100px);
  opacity: 0;
}
.other1-item.on,
.other2-item.on,
.other3-item.on,
.other4-item.on {
  transform: translate(0);
  opacity: 1.0;
}
/*  */
.other-border1-1,
.other-border2-1 {
  transition: 0.8s ease-in-out;
  transform: translate(-200px ,-100px) skew(50deg);
  opacity: 0;
}
.other-border1-1.on,
.other-border2-1.on {
  transform: translate(0);
  opacity: 1.0;
}

.other-border1-2,
.other-border2-2 {
  transition: 0.8s ease-in-out;
  transform: translate(200px ,100px) rotate(-190deg) skew(-80deg);
  opacity: 0;
}

.other-border1-2.on,
.other-border2-2.on {
  transform: translate(0);
  opacity: 1.0;
}

.other-border1-3,
.other-border2-3{
  transition: 0.8s ease-in-out;
  transform: translate(200px ,-100px) rotate(-120deg) skew(-50deg);
  opacity: 0;
}

.other-border1-3.on,
.other-border2-3.on {
  transform: translate(0);
  opacity: 1.0;
}

.other-border1-4,
.other-border2-4{
  transition: 0.8s ease-in-out;
  transform: translate(-200px ,100px) rotate(90deg) skew(50deg);
  opacity: 0;
}

.other-border1-4.on,
.other-border2-4.on {
  transform: rotate(-59deg);
  opacity: 1.0;
}

.other-border1-5,
.other-border2-5  {
  transition: 0.8s ease-in-out;
  transform: translate(200px ,100px) rotate(-120deg) skew(40deg);
  opacity: 0;
}

.other-border1-5.on,
.other-border2-5.on  {
  transform: rotate(59deg);
  opacity: 1.0;
}

.other-back1,
.other-back3,
.other-back5,
.other-back7 {
  transition: 0.8s ease-in-out;
  transform: translate(-200px ,100px);
  opacity: 0;
}

.other-back1.on,
.other-back3.on,
.other-back5.on,
.other-back7.on  {
  transform: rotateX(-30deg) rotateY(-50deg);
  opacity: 1.0;
}

.other-back2,
.other-back4,
.other-back6,
.other-back8 {
  transition: 0.8s ease-in-out;
  transform: translate(200px ,100px);
  opacity: 0;
}

.other-back2.on,
.other-back4.on,
.other-back6.on,
.other-back8.on {
  transform: rotateX(42deg) rotateY(-42deg);
  opacity: 1.0;
}

.other1,
.other2,
.other3,
.other4 {
  display: block;
  transition: 0.8s ease-in-out;
  transform: translate(-100px ,100px) ;
  opacity: 0;
}

.other1.on,
.other2.on,
.other3.on,
.other4.on {
  transform: rotateX(-30deg) rotateY(-52deg);
  opacity: 1.0;
}

.other-concept1,
.other-concept2,
.other-concept3,
.other-concept4 {
  transition: 0.8s ease-in-out;
  transform: translate(200px ,100px);
  opacity: 0;
}

.other-concept1.on,
.other-concept2.on,
.other-concept3.on,
.other-concept4.on {
  transform: rotateX(42deg) rotateY(-42deg);
  opacity: 1.0;
}
/*  */


.other-back-wrap2 {
  position: absolute;
  z-index: 50;
}

.other-back3 {
  position: absolute;
  width: 30.8vw;
  height: 26.3vw;
  margin-top: 24.3vw;
  margin-left: -5.4vw;
  background-color: #00000090;
}

.other-back4 {
  position: absolute;
  width: 26.5vw;
  height: 30.6vw;
  margin-top: 22.2vw;
  margin-left: 16.7vw;
  background-color: #00000090;
}

.other-back-wrap3 {
  position: absolute;
  margin-top: 3vw;
  margin-left: 8vw;
  z-index: 100;
}

.other-back5 {
  position: absolute;
  width: 30.8vw;
  height: 26.3vw;
  margin-top: 24.3vw;
  margin-left: -5.4vw;
  background-color: #00000090;
}

.other-back6 {
  position: absolute;
  width: 26.5vw;
  height: 30.6vw;
  margin-top: 22.2vw;
  margin-left: 16.7vw;
  background-color: #00000090;
}

.other-back-wrap4 {
  position: absolute;
  margin-top: -43vw;
  margin-left: 48vw;
  z-index: 100;
}

.other-back7 {
  position: absolute;
  width: 30.8vw;
  height: 26.3vw;
  margin-top: 24.3vw;
  margin-left: -5.4vw;
  background-color: #00000090;
}

.other-back8 {
  position: absolute;
  width: 26.5vw;
  height: 30.6vw;
  margin-top: 22.2vw;
  margin-left: 16.7vw;
  background-color: #00000090;
}
/*  */

.other1-wrap {
  display: flex;
  margin-left: 8vw;
}

.other1-item {
  position: relative;
  width: 40vw;
  height: 40vw;
  margin-left: 0vw;
  /* transform: rotate(45deg) skew(-20deg, -20deg); */
  clip-path: polygon(50% 20%, 100% 50%, 50% 80%, 0% 50%);
  background-color: #ccc;
  overflow: hidden;
  box-shadow: 10px 5px 5px red;
  z-index: 50;
}

.other1-item img {
  width: 40vw;
  height: 40vw;
  /* transform: rotate(-45deg); */
}

.other-border1-1 {
  /* position: absolute; */
  width: 1vw;
  margin-top: 20vw;
  margin-left: -40vw;
  height: 23vw;
  border-left: 1px solid #fff;
  z-index: 50;
}

.other-border1-2 {
  position: absolute;
  width: 1vw;
  margin-top: 32vw;
  margin-left: 20vw;
  height: 23vw;
  border-left: 1px solid #ffffff;
  z-index: 50;
}

.other-border1-3 {
  position: absolute;
  width: 1vw;
  margin-top: 20vw;
  margin-left: 39.9vw;
  height: 23vw;
  border-left: 1px solid #ffffff;
  z-index: 50;
}

.other-border1-4 {
  position: absolute;
  width: 1vw;
  margin-top: 36.9vw;
  margin-left: 9.7vw;
  height: 23.4vw;
  border-left: 1px solid #ffffff;
  z-index: 50;
}

.other-border1-5 {
  position: absolute;
  width: 1vw;
  margin-top: 36.82vw;
  margin-left: 29.2vw;
  height: 23.4vw;
  border-right: 1px solid #ffffff;
  z-index: 50;
}

.other1 {
  position: absolute;
  width: 30vw;
  margin-top: 27vw;
  margin-left: -1vw;
  padding-top: 2vw;
  font-size: 1.9vw;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  z-index: 50;
}

.other-theme1 {
  margin-top: 1.5vw;
}

.other-production1 {
  margin-top: 1.5vw;

}

.other-target1 {
  margin-top: 1.5vw;

}

.other-concept1{
  position: absolute;
  width: 30vw;
  margin-top: 15vw;
  margin-left: 17.5vw;
  padding-top: 2vw;
  font-size: 1.9vw;
  font-weight: 600;
  color: #fff;
  white-space: pre-wrap;
  z-index: 50;
}


.other2-wrap {
  display: flex;
  margin-top: -43vw;
  margin-left: 48vw;
}

.other2-item {
  position: relative;
  width: 40vw;
  height: 40vw;
  margin-left: 0vw;
  /* transform: rotate(45deg) skew(-20deg, -20deg); */
  clip-path: polygon(50% 20%, 100% 50%, 50% 80%, 0% 50%);
  background-color: #ccc;
  overflow: hidden;
  box-shadow: 10px 5px 5px red;
  z-index: 50;
}

.other2-item img {
  width: 40vw;
  height: 40vw;
  /* transform: rotate(-45deg); */
}

.other-border2-1 {
  /* position: absolute; */
  /* width: 1vw;
  margin-top: 20vw;
  margin-left: -40vw;
  height: 23vw;
  border-left: 1px solid #fff; */
}

.other-border2-2 {
  position: absolute;
  width: 1vw;
  margin-top: 32vw;
  margin-left: 20vw;
  height: 23vw;
  border-left: 1px solid #ffffff;
  z-index: 50;
}

.other-border2-3 {
  position: absolute;
  width: 1vw;
  margin-top: 20vw;
  margin-left: 39.9vw;
  height: 23vw;
  border-left: 1px solid #ffffff;
  z-index: 50;
}

.other-border2-4 {
  position: absolute;
  width: 1vw;
  margin-top: 36.9vw;
  margin-left: 9.7vw;
  height: 23.4vw;
  border-left: 1px solid #ffffff;
  z-index: 50;
}

.other-border2-5 {
  position: absolute;
  width: 1vw;
  margin-top: 36.82vw;
  margin-left: 29.2vw;
  height: 23.4vw;
  border-right: 1px solid #ffffff;
  z-index: 50;
}

.other2 {
  position: absolute;
  width: 30vw;
  margin-top: 27vw;
  margin-left: -1vw;
  padding-top: 2vw;
  font-size: 1.9vw;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  z-index: 50;
}

.other-theme2 {
  margin-top: 1.5vw;
}

.other-production2 {
  margin-top: 1.5vw;

}

.other-target2 {
  margin-top: 1.5vw;

}

.other-concept2 {
  position: absolute;
  width: 30vw;
  margin-top: 15vw;
  margin-left: 17.5vw;
  padding-top: 2vw;
  font-size: 1.9vw;
  font-weight: 600;
  color: #fff;
  white-space: pre-wrap;
  z-index: 50;
}


.other3-wrap {
  display: flex;
  margin-top: 3vw;
  margin-left: 8vw;
}

.other3-item {
  position: relative;
  width: 40vw;
  height: 40vw;
  margin-left: 0vw;
  /* transform: rotate(45deg) skew(-20deg, -20deg); */
  clip-path: polygon(50% 20%, 100% 50%, 50% 80%, 0% 50%);
  background-color: #ccc;
  overflow: hidden;
  box-shadow: 10px 5px 5px red;
  z-index: 100;
}

.other3-item img {
  width: 40vw;
  height: 40vw;
  /* transform: rotate(-45deg); */
}

.other3 {
  position: absolute;
  width: 30vw;
  margin-top: 27vw;
  margin-left: -1vw;
  padding-top: 2vw;
  font-size: 1.9vw;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  z-index: 100;
}

.other-theme3 {
  margin-top: 1.5vw;
}

.other-production3 {
  margin-top: 1.5vw;

}

.other-target3 {
  margin-top: 1.5vw;

}

.other-concept3 {
  position: absolute;
  width: 30vw;
  margin-top: 15vw;
  margin-left: 17.5vw;
  padding-top: 2vw;
  font-size: 1.9vw;
  font-weight: 600;
  color: #fff;
  white-space: pre-wrap;
  z-index: 100;
}


.other4-wrap {
  display: flex;
  margin-top: -43vw;
  margin-left: 48vw;
}

.other4-item {
  position: relative;
  width: 40vw;
  height: 40vw;
  margin-left: 0vw;
  /* transform: rotate(45deg) skew(-20deg, -20deg); */
  clip-path: polygon(50% 20%, 100% 50%, 50% 80%, 0% 50%);
  background-color: #ccc;
  overflow: hidden;
  box-shadow: 10px 5px 5px red;
  z-index: 100;
}

.other4-item img {
  width: 40vw;
  height: 40vw;
  margin-top: -10vw;
  /* transform: rotate(-45deg); */
}

.other4 {
  position: absolute;
  width: 30vw;
  margin-top: 27vw;
  margin-left: -1vw;
  padding-top: 2vw;
  font-size: 1.9vw;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
  z-index: 100;
}

.other-theme4 {
  margin-top: 1.5vw;
}

.other-production4 {
  margin-top: 1.5vw;

}

.other-target4 {
  margin-top: 1.5vw;

}

.other-concept4 {
  position: absolute;
  width: 30vw;
  margin-top: 15vw;
  margin-left: 17.5vw;
  padding-top: 2vw;
  font-size: 1.9vw;
  font-weight: 600;
  color: #fff;
  white-space: pre-wrap;
  z-index: 100;
}

footer {
  font-size: 1.2vw;
  text-align: center;
  color: #fff;
  background-color: #000000c9;
}