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

/*----------------------------------------------------初期設定------------------------------------------------------------------*/

html{
	color: #ffffff;
	font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
}

body {
	background-color: #000000;
}

p {
	line-height: 1.5;
}

a {
	text-decoration: none;
	color: #ffffff;
}


	html{
		font-size: 3.73332vw;
/*600px以下の場合のfont-sizeの基準をここで決める。ユーザーが使用している端末が横幅375pxの時font-sizeは14pxになる。デザイン画が横幅375だった為、値はこれ。*/
	}

@font-face {
	font-family: 'Bangla-MN';
	src: url("../font/Bangla MN.ttf")  format('truetype');
		
}
/*スクロールでfade-in*/
.element {
  /* 最初は非表示 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px);
  transition: opacity 1s, visibility 1s, transform 1s;
}
/* フェードイン時に入るクラス */
.is-fadein {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/*スクロールバーを表示しない様にした。*/
body{

    -ms-overflow-style: none;    /* IE, Edge 対応 */

    scrollbar-width: none;       /* Firefox 対応 */

}

body::-webkit-scrollbar{

  display:none;/* Chrome, Safari 対応 */

}
/*-----------------------------------------------------------------------------------------------------------------------------*/

/*-----------------------------------------------ローディングアニメーションのコード--------------------------------------------------*/

/*もしローディング画面とTOP画面が合うわなければjQuerynの方でTOP画面と同じ様に指定する。*/

#loader {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #000;
  z-index: 1;
}
#loder-img{
  display: none;
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  z-index: 2;
}




/*ローディング画面が表示されている間はスクロールできないようにする*/
/*クラスで指定しないと、スコアが違うので思い通りの動きにならないので注意*/
.body {
	overflow: hidden;
}
.afterload{
	overflow: visible;
}
/*-----------------------------------------------------------------------------------------------------------------------------*/





/*--------------------------------------------------------headerのコード---------------------------------------------------------*/

header{
	height: 10vh;
	position: fixed;
	z-index: 10;
}

/*global-navi*/
.navi{
  position: fixed;
  height: 100vh;
  width: 100%;
/*横幅が100%なので右側に100%分隠している。*/
  right: -100%; 
  transition: 0.35s;
  z-index: 10;
}

/*global-navi内のデザイン*/

/*空の箱を用意してそこを透明にした。そうする事で.naviの高さを90vhでtop10vhをせずに済む。ブラウザによって異なる見え方を防いだ。*/
.kara {
	height: 10%;
	opacity: 0;
}

.navi ul {
	position: relative;
	height: 75%;
	 background: #553c3c;
	opacity: 0.85;
}

.navi li{
	position: absolute;
	top: 11.77%;
    left: 8%;
}
.navi li:nth-child(2){
	top: 23.54%;
}
.navi li:nth-child(3){
	top: 35.31%
}
.navi li:nth-child(4){
	top: 47.08%
}
.navi li:nth-child(5){
	top: 58.85%
}
.navi li:nth-child(6){
	top: 70.62%;
}

/*naviのfooter*/
.navi-in {
	position: relative;
	height: 15%;
	border-top: solid 1px #ffffff;
	 background: #553c3c;
	opacity: 0.85;
}

.navi .navi-f-1{
	position: absolute;
	width: 26.667%;
	top: 12%;
	left: 10.667%;
}
.navi .navi-f-2{
	position: absolute;
	width: 9.6%;
	top: 24%;
	right: 9.334%;
	left: auto;
}
.navi .navi-f-3{
	position: absolute;
	width: 9.6%;
	top: 24%;
	right: 28.002%;
	left: auto;
}


/*クリック後にグローバルナビが出てくるようにする*/
.fadein{
/*-100%なので右からメニューが出てくる様にした*/
  transform: translateX(-100%);
}

/*ロゴとハンバーガーメニューを格納している箱。これがあることでこの箱内の%でロゴを指定するのでレイアウトの崩れを防ぐ。そして画面内に固定することができる。*/
.kara2 {
	height: 10vh;
	width: 100%;
	position: fixed;
	z-index: 10;
	background-color: rgba(255,255,255,0.4);
}
/*kara2の中にある空箱。リレイティブを使用する為に必要。*/
.kara3 {
	height: 100%;
	position: relative;
}

/*headerロゴ*/
.h-logo {
	position: absolute;
	width: 22%;
	top: 34%;
	left: 5.5%;
	z-index: 10;
}


/*ハンバーガーボタン　クリックされる前*/

/*	今、ボタンの幅が11%(デバイスの横幅が375の場合41px)なのでその幅に合わせて動く。
	変化の〇〇〇〇msに合わせて動く。*/
@keyframes equalizer01 {
  0% {
    width: 70%;
  }
  10% {
    width: 50%;
  }
  20% {
    width: 80%;
  }
  30% {
    width: 10%;
  }
  40% {
    width: 50%;
  }
  50% {
    width: 70%;
  }
  60% {
    width: 50%;
  }
  70% {
    width: 10%;
  }
  80% {
    width: 80%;
  }
  90% {
    width: 10%;
  }
  100% {
    width: 70%;
  }

}
@keyframes equalizer02 {
  0% {
    width: 50%;
  }
  10% {
    width: 40%;
  }
  20% {
    width: 40%;
  }
  30% {
    width: 30%;
  }
  40% {
    width: 40%;
  }
  50% {
    width: 50%;
  }
  60% {
    width: 40%;
  }
  70% {
    width: 30%;
  }
  80% {
    width: 60%;
  }
  90% {
    width: 40%;
  }
  100% {
    width: 60%;
  }
}

.menu-btn {
  position: absolute;
  display: block;
  top: 3.73vh;
  right: 4%;
/*これは、画面のどこに配置するのか。
　ヘッダーの中にこのハンバーガーを設定してそこの％で指定すればいい。*/
  width: 11vw;
  height: 11vw;
  transform: translate(0, 0);
  transition: all .5s;
  cursor: pointer;
  z-index: 20;
}

/*クリックされた時に出現する円を設置*/
.menu-btn::after {
  position: absolute;
  top: -2.78%;
  right: 47.5%;
  display: block;
  content: '';
  width: 50%;
  height: 50%;
  border-radius: 50%;
/*  ボーダーを設定して見えないように透明にしておく。*/
  border: 2px solid transparent;
  transition: all .75s;
  z-index: 10;
}


/*ここで全体の棒についての設定*/
.menu-btn span {
  display: block;
  position: absolute;
  left: 0;
  height: 2px;
  background-color: #ffffff;
  transition: all .5s;
}

/*ここから各棒についての細かい設定*/
.menu-btn span:nth-child(1) {
/*横幅375の時、topから5px*/
  top: 1.3335vw;
  width: 5.334vw;
  /*	keyframesは　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
	この5000は棒長さを変える速さ。これが短いほど早くアニメーションする。
	infiniteは無限という意味。ずっとこのアニメーションをループさせる。*/
  animation: equalizer02 5000ms infinite;
}
.menu-btn span:nth-child(2) {
/*横幅375の時,topから10px*/
  top: 2.667vw;
  width: 8vw;
  animation: equalizer01 5000ms infinite;
/*ここのアニメーションディレイでchild(3)と時間差をつけることにより違う動きに見える*/
  animation-delay: 0.33s;
}
.menu-btn span:nth-child(3) {
/*	横幅375の時topから15px*/
  top: 4vw;
  width: 16vw;
  animation: equalizer01 7000ms infinite;
}


/*ハンバーガーボタン　クリックされた後*/

@keyframes h-btn-2 {
  100% {
    height: 0;
  }
}

@keyframes h-btn-after {
  0% {
    border-color: transparent;
    transform: rotate(0);
  }
  25% {
    border-color: transparent #fff transparent transparent;
  }
  50% {
    border-color: transparent #fff #fff transparent;
  }
  75% {
    border-color: transparent #fff #fff #fff;
  }
  100% {
    border-color: #fff;
    transform: rotate(-680deg);
  }
}

.after-btn  span:nth-child(1){
	width: 45%;
/*	動くアニメーションをセットしない。空にする。*/
	animation: unset;
/*棒を斜め45どの角度にする。*/
	transform: rotate(-45deg);
	top: 24%;
}
.after-btn  span:nth-child(2){
	opacity: 0;
/*	animation: unset;*/
	left: 80%;
/*	8秒かけてh-btnが実行される。forwardsとはアニメーションが完了された時、値がアニメーションの100%が適応される。今回は高さが0に。実質何も見えなくなる。*/
	animation: h-btn-2 .8s forwards;
}
.after-btn  span:nth-child(3){
	width: 45%;
	animation: unset;
	transform: rotate(45deg);
	top: 24%;
}
 
.menu-btn.after-btn::after {
  -webkit-animation: h-btn-after .7s .25s forwards;
  animation: h-btn-after .7s .25s forwards;
}

/*-----------------------------------------------------------------------------------------------------------------------------*/

/*-----------------------------------------------メインビジュアル　全画面表示-------------------------------------------------------*/

.top-video-container {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.s-video {
  position: absolute;
}

/*-----------------------------------------------------------------------------------------------------------------------------*/

/*----------------------------------------------------------gallery---------------------------------------------------------*/
.gallery {
	padding: 57.334% 0 ;
	background-color: #000;
	background-image: url("../images/gallery1-h.png");
	background-position: center center;
	background-size: cover;
	position: relative;
}
.gallery img{
	position: absolute;
	width: 57.334%;
	top: 9.304%;
	left: 7.467%;
	z-index: 3;
}
.gallery img:nth-child(2){
	width: 73.334%;
	right: 0%;
	left: auto;
	top: 9.304%;
	z-index: 2;
}
.gallery img:nth-child(3){
	width: 66.67%;
	top: 52.326%;
	z-index: 1;
	left: 6.667%;
}
/*-----------------------------------------------------------------------------------------------------------------------------*/

/*-----------------------------------------------------KUROOBIとは--------------------------------------------------------------*/
.what-kuroobi {
	padding: 38% 0;
	background-color: #000;
	position: relative;
}
.what-kuroobi h2 {
	position: absolute;
	font-size: 2.142868rem;
	top: 20%;
	left: 6.7%;
}
.what-kuroobi p {
	position: absolute;
	font-size: 1.07143rem;
	top: 31.6%;
	left: 6.7%;
	line-height: 2;
}
.what-kuroobi p:nth-child(3){
	top: 56%;
}
/*ここからがビデオポップアップ*/
.what-video {
	position: relative;
	padding: 26.667% 0;
	background-color: #000000;
}

.video-1{
	position: absolute;
    bottom: -4%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    width: 80%;
}

.modal_pop{
    width: 100vw;
    height: 100vh;
    position:fixed;
    top: 0;
    left:0;
    z-index:9997!important;
}
.bg{
    background-color: #000000;
	opacity: 0.85;
    width: 100%;
    height: 100%;
    position:fixed;
    z-index:9998!important;
}
.bg .bg-1,.bg .bg-2{
	position: absolute;
	width: 6vw;
	height: 0.4vw;
	background-color: #ffffff;
	top: 8vw;
	right: 5vw;
	transform: rotate(45deg)
}
.bg .bg-2{
	transform: rotate(-45deg)
}
.modal_pop iframe{
    width: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index:9999!important;
	height: 50%;
}
/*-----------------------------------------------------------------------------------------------------------------------------*/

/*----------------------------------------------------------gallery2---------------------------------------------------------*/
.gallery2 {
	padding: 86.667% 0;
	position: relative;
	background-color: #000000;
	background-image: url("../images/gallery2.png");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.gallery2 img{
	position: absolute;
	top: 11.539%;
	left: 54.667%;
	width: 40%;
}
.gallery2 img:nth-child(2){
	top: 16.924%;
	 width: 89.334%;
	left: 5.6%;
	z-index: 2;
}
.gallery2 img:nth-child(3){
	top: 40%;
	width: 58.134%;
	left: 40%;
}
.gallery2 img:nth-child(4){
	top: 68.462%;
	left: 6.667%;
	width: 83.201%;
}

.youtube {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
}
.youtube iframe{
  position: absolute;
  top: 0;
  left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
  width: 90%;
  height: 100%;
}
/*-----------------------------------------------------------------------------------------------------------------------------*/

/*------------------------------------------------------遊びは本気---------------------------------------------------------------*/

.asobi{
	position: relative;
	padding: 20% 0;
}
.honki {
	position: absolute;
	width: 54.6%;
	top: 25.334%;
	left: 7.34%;
}
.create-100 {
	position: relative;
	padding: 14%;
	overflow: hidden;
}
.create-100 p {
	position: absolute;
	font-size: 1.71429rem;
	letter-spacing: 0.2vw;
	width: 100%;
	top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
	left: 6.667%;
}
/*-----------------------------------------------------------------------------------------------------------------------------*/

/*-----------------------------------------------------100no kata--------------------------------------------------------------*/

.gallery3 {
	position: relative;
	padding: 162.8% 0;
	background-image: url("../images/gallery3.png");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;	
}

.gallery3 img {
	position: absolute;
	width: 60.534%;
	top: 4.9145%;
	left: 34.667%;
}
.gallery3 img:nth-child(2){
	width: 48%;
	top: 16.73%;
	left: 6.667%;
}
.gallery3 img:nth-child(3){
	width: 57.6%;
	top: 33.5%;
	left: 37.601%;
}
.gallery3 img:nth-child(4){
	width: 64%;
	top: 55.856%;
	left: 14.667%;
}
.gallery3 img:nth-child(5){
	width: 58.934%;
	top: 70.762%;
	right: 0%;
	z-index: 2;
}
.gallery3 img:nth-child(6){
	width: 58.667%;
	top: 79.034%;
	left: 5.067%;
}
.gallery3 img:nth-child(7){
	width:16%;
	top: 37%;
	left: 18.4%;	
}
.gallery3 img:nth-child(8){
	width: 69.334%;
	top: 47.5023%;
	left: 22.934%;
}

/*-----------------------------------------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------gallery4---------------------------------------------------------*/

.gallery4 {
	position: relative;
	padding: 150.135% 0;
	background-image: url("../images/gallery4.png");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.gallery4 img {
	position: absolute;
	width: 74.667%;
	top: 32.1498%;
	left: 7.335%;
}
.gallery4 img:nth-child(2){
	width: 68%;
	top: 43.517%;
	right: 0%;
	left: auto;
}
.gallery4 img:nth-child(3){
	width: 68%;
	top: 63.4998%;
	left: 0%;
}
.gallery4 img:nth-child(4){
	width: 77.6%;
	top: 80%;
	right: 0%;
	left: auto;
}
.gallery4 p {
	position: absolute;
/*	15px*/
	font-size: 1.07143rem;
	top: 43.3%;
	left: 8.401%;
}
.gallery4 p:nth-child(6){
/*	34px*/
	font-size: 2.42858rem;
	letter-spacing: 5.2vw;
	top: 50.7%;
	left: 8.401%;
}
/*-----------------------------------------------------------------------------------------------------------------------------*/

/*----------------------------------------------------------seiji-uno---------------------------------------------------------*/
.seiji-uno {
	position: relative;
	padding: 47.067% 0;
	background-image: url("../images/seiji-uno.png");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.seiji-uno-p{
	position: absolute;
	width: 48%;
	top: 10.483%;
	left: 4%;
}

/*-----------------------------------------------------------------------------------------------------------------------------*/

/*-----------------------------------------------------what you can do---------------------------------------------------------*/
.what-you-can-do {
	background-color: #fff;
}
/*what can 1*/

.what-can-1{
	position: relative;
    padding: 38.67% 0;
	background-color: #fff;
	color: #000;
}
.w-1-1,.w-1-2,.w-1-3,.w-1-4,.w-1-4-in-p{
	position: absolute;
}
.w-1-1,.w-1-2{
	font-size: 1.71429rem;
	letter-spacing: 0.17rem;
	font-weight: bold;
}
.w-1-1{
	top: 27%;
	left: 18.27%;
}
.w-1-2{
	top: 36.5%;
	left: 54%;
}
.w-1-3{
	top: 66%;
	left: 14.134%;
	letter-spacing: 0.4vw;
}
.w-1-4{
	background-color: #000;
	width: 33.4%;
	height: 8.28%;
	color: #fff;
	border-radius: 4vw;
	bottom: 0%;
	left: 5.334%;
}
.w-1-4-in {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: center;
}
.w-1-4-in-p{
	width: 100%;
	top: 10.5%;
	left: 50%;
	transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

/*アコーディオン*/
.ac {
    height: auto;
	background-color: #ffffff;
}

/* クリック領域 */
.ac-parent {
  position: relative;
  background-color: #fff;
  color: #000;
  font-size: 1.28572rem;
  margin-top: 10.67%;
}
.ac-pare-in {
	position: relative;
	display: flex;
	align-items: center;
	height: 100%;
	width: 100%;
}
.ac-parent img {
	width: 5.334%;
	padding-left: 5.334%;
}
.ac-parent p{
	border-bottom: 1px solid #000;
	width: 74.67%;
	padding-left: 1%;
	margin-left: 3%;
	letter-spacing: 0.5vw;
}

/* クリックしたら表示される領域 */
.ac-child {
  display: none;
  background-color: #fff;
  color: #000000;
  line-height: 1.5;
  padding-left: 14%;
  margin-top: 1.2%;
  letter-spacing: 0.15vw;
}
/* ①プラスの横線 */
.ac-parent:before {
	content: "";
	position: absolute;
	top: 50%;
	right: 7.5%;
	width: 2.3vw;
	height:0.27vw;
	background: #000;
	transform: translateY(-50%);
}

/* ②プラスの縦線 */
.ac-parent:after {
	content: "";
	position: absolute;
	top: 50%;
	/* 8px+12px-1px(幅2pxの半分) */
	right: 8.6%;
	width: 0.27vw;
	height: 2.3vw;
	background: #000;
	transform: translateY(-50%);
	transition: .3s;
}

/* ③オープン時にopenクラスを付与（縦線を回転させて非表示に） */
.ac-parent.open:after {
	top: 25%;
	opacity: 0;
	transform: rotate(90deg);
}
/*what-can2*/
.what-can-2 {
	position: relative;
	padding: 26.534% 0;
	background-image: url("../images/sumi.png");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	color: #000;
}
.w-2-1,.w-2-2,.w-2-2-in-p{
	position: absolute;
}
.w-2-1{
	top: 18%;
	left: 10.134%;
	letter-spacing: 0.2vw;
}
.w-2-2{
	width: 48.8%;
	height: 12.065%;
	top: 67.84%;
	background-color: #000;
	border-radius: 4vw;
	left: 5.334%;
}
.w-2-2-in{
	position: relative;
	height: 100%;
	width: 100%;
	color: #fff;
}
.w-2-2-in-p {
	width: 100%;
	top: 10%;
	left: 15%;
}
/*下のアコーディオン*/
.ac2 .ac-parent {
	margin-top: 0;
}
/*what-can3*/
.what-can-3{
	position: relative;
	padding: 73.47% 0;
	background-image: url("../images/whta-ca-do.png");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	color: #000;
}
.what-can-3 img,.what-can-3 p,.what-can-3 h2 {
	position: absolute;
}
.what-can-3 img{
	width: 6.7%;
	top: 7.26%;
	left: 5.7%;
}
.w-3p1{
	top: 6.6%;
	left: 14.3%;
	font-size: 1.28572rem;
}
.w-3p2{
	top: 17%;
	left: 12%;
	letter-spacing: 0.2vw;
}
.what-can-3 h2{
	font-size: 1.71429rem;
    letter-spacing: 0.6vw;
    font-weight: bold;
	line-height: 1.5;
	text-align: center;
	left: 50%;
	bottom: 10.89%;
	transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
/*what-can4*/
.what-can4{
	color: #000;
	padding-bottom: 3%;
}
.what-can4 h3 {
	line-height: 1.5;
	font-size: 1.28572rem;
	padding-left: 5.334%;
	font-weight:100;
	letter-spacing: 0.5vw;
	margin-bottom: 3%;
}
.what-can4 p {
	width: 74.67%;
	border-bottom: 1px solid #000;
	margin-left: 13.67%;
	padding-left: 1%;
	padding-bottom: 1.4%;
	letter-spacing: 0.3vw;
	margin-bottom: 8%;
}
/*-----------------------------------------------------------------------------------------------------------------------------*/

/*----------------------------------------------------------会員登録--------------------------------------------------------------*/
.member{
	padding: 113.334% 0;
	position: relative;
	background-image: url("../images/member-h.png");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.member p {
	position: absolute;
	font-size: 1.71429rem;
	top: 4.2%;
	left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
.step1 {
	background-image: url("../images/menber1.png");
	top: 12.3%;
}
.step2{
	background-image: url("../images/member2.png");
	top: 27%;
}
.step3{
	background-image: url("../images/member3.png");
	top: 41.7%;
}
.step4{
	background-image: url("../images/member4.png");
	top: 56.4%;
}
.step5{
	background-image: url("../images/member5.png");
	top: 71.1%;
	box-sizing: border-box;
    border: 1px solid #a0a0a0;
}
.step6{
	background-image: url("../images/member6.png");
	top: 85.7%;
	border: 1px solid #fff;
	box-sizing: border-box;
	z-index: 2;
	animation: color-change 2.5s linear infinite;
}

.step1,.step2,.step3,.step4,.step5,.step6,.step6-back{
	width: 78.67%;
    height: 11.766%;
	position: absolute;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

@keyframes color-change {
    0%{
        border-color:#ffffff;
    }
	6.25%{
		border-color:#f5f5f5;
	}
    12.5%{
        border-color:#dcdcdc;
    }
	18.75%{
		border-color:#d3d3d3;
	}
    25%{
	    border-color: #c0c0c0;
    }
	31.25%{
		border-color: #a9a9a9;
	}
    37.5%{
		border-color: #808080;
    }
	43.75%{
		border-color: #696969;
	}
    50%{
	  	border-color: #000000;
  }
	56.25%{
		border-color: #696969;
	}
	62.5%{		
		border-color: #808080;
	}
	68.75%{
		border-color: #a9a9a9;
	}
	75%{	
		border-color: #c0c0c0;
	}
	81.25%{
		border-color:#d3d3d3;
	}
	87.5%{    
		border-color:#dcdcdc;
	}
	93.75%{
		border-color:#f5f5f5;
	}
	100%{    
		border-color:#ffffff;
	}
	
}
/*
.mente-box{
	position: relative;
	padding: 9.334% 0;
}

.mente-box p {
	position: absolute;
	font-size: 1.71429rem;
	left: 50%;
	transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	top: 51%;
}

.mente {
	position: relative;
	background-image: url("../images/mente-h.png");
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	padding: 48.934% 0%;
}

.mente .img {
	position: absolute;
	width: 78.67%;
	height: 27.25%;
	background-image: url("../images/mente1.png");
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	top: 9.266%;
	left: 50%;
	bottom: 10.89%;
	transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

.mente h3,.mente p{
	position: absolute;
	font-size: 1.28572rem;
	white-space: nowrap;
	left: 50%;
	bottom: 10.89%;
	transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	font-weight: 100;
}
.mente ul {
	position: absolute;
	font-size: 1.07143rem;
	display: flex;
	white-space: nowrap;
	top: 57.5%;
}
.mente .li1{
	margin-left: 32%;
}
.mente .li2{
	margin-left: 34%;
}
.mente h3 {
	top: 46.5%;
}
.mente p {
	top: 67.5%;
}
.mente .mente-i{
	position: absolute;
	width: 34.934%;
    height: 13.353%;
    background-color: #333333;
   top: 79.9%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    border-radius: 7vw;
}
.mente .mente-i-in{
	position: relative;
    width: 100%;
    height: 100%;
}
.mente .mente-i-in img {
	position: absolute;
    width: 63.36%;
    top: 31.5%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

応急処置　二つ目のコンテンツ
.mente2{
	position: relative;
	padding: 73.334% 0;
}
.mente2 p,.mente2 .img2 ,.mente2 .img{
	position: absolute;
	white-space: nowrap;
	 left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
.mente2 .img {
	width: 78.67%;
	height: 32.486%;
	top: 5.5%;
	background-image: url("../images/mente2.png");
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	
}
.mente2 .img2 {
    width: 78.67%;
	height: 10.728%;
	background-image: url("../images/mente3.png");
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	top: 83.5%;
	border: 1px solid #ffffff;
	animation: color-change 2s linear infinite;
	box-sizing: border-box;
}
.mente2 .m2-1 {
	font-size: 1.71429rem;
	top: 43.546%;
}
.m2-2,.m2-3,.m2-4 {
	font-size: 1.28572rem;
}

.m2-2{
	top: 51.819%;
}
.m2-3 {
	top: 59.6%;
}
.m2-4 {
	top: 70.6%;
}


@keyframes color-change {
    0%{
        border-color:#ffffff;
    }
	6.25%{
		border-color:#f5f5f5;
	}
    12.5%{
        border-color:#dcdcdc;
    }
	18.75%{
		border-color:#d3d3d3;
	}
    25%{
	    border-color: #c0c0c0;
    }
	31.25%{
		border-color: #a9a9a9;
	}
    37.5%{
		border-color: #808080;
    }
	43.75%{
		border-color: #696969;
	}
    50%{
	  	border-color: #000000;
  }
	56.25%{
		border-color: #696969;
	}
	62.5%{		
		border-color: #808080;
	}
	68.75%{
		border-color: #a9a9a9;
	}
	75%{	
		border-color: #c0c0c0;
	}
	81.25%{
		border-color:#d3d3d3;
	}
	87.5%{    
		border-color:#dcdcdc;
	}
	93.75%{
		border-color:#f5f5f5;
	}
	100%{    
		border-color:#ffffff;
	}
	
}
*/

/*５月会員登録修正*/

/*見出しの所*/
.road-to {
	position: relative;
	padding: 14.4% 0;
}
.road-to p {
	font-size: 1.71429rem;
	white-space: nowrap;
	line-height: 1.6;
    text-align: center;
	position: absolute;
	top: 57%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
	letter-spacing: 0.3vw;
}

/*動画*/
.road-gif {
	padding: 26.667% 0;
	position: relative;
}
.road-gif-in {
	background-image: url("../images/road-to-kuroobi-mp4.gif");
	position: absolute;
	height: 100%;
	width: 80%;
	top: 0%;
	left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
/*会員登録させる為の導線*/
.road-click{
	padding: 19.2% 0;
	position: relative;
}
.road-click-in {
	position: absolute;
	width: 78.67%;
	height: 41%;
	background-image: url("../images/kuroobi-naru.png");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	border: 1px solid #ffffff;
    animation: color-change 2s linear infinite;
    box-sizing: border-box;
	top: 10.42%;
	left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
.road-click p{
	font-size: 1.14286rem;
	line-height: 1;
	position: absolute;
	top: 71%;
	left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	white-space: nowrap;
}

/*イベント情報の所*/
.road-to-jam {
	position: relative;
	padding: 25.334% 0;
	background-image: url("../images/road-to-jam.png");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.road-to-jam h2, .road-to-jam h3, .road-to-jam p{
	position: absolute;
	line-height: 1;
	width: 100%;
	text-align: center;
}
.road-to-jam h2 {
	font-size: 1.71429rem;
	top: 14.74%;
	font-weight: normal;
}
.road-to-jam h3 {
    font-size: 1.42858rem;
	top: 40.53%;
	font-weight: normal;
}
.road-to-jam p:nth-child(3){
	font-size: 1.14286rem;
	top: 65.79%;
}
.road-to-jam p:nth-child(4){
	font-size: 1.14286rem;
	top: 76.845%;
}

/*youtubeとInstagramの箇所の所*/
.road-to-link {
	position: relative;
	padding: 34.67% 0;
}
.road-to-link p, .road-to-link img, .road-i, .road-i-2{
	position: absolute;
}	
.road-to-link p {
	font-size: 1.14286rem;
	line-height: 1;
	width: 100%;
	text-align: center;
}
.road-to-link p:nth-child(1){
	top: 11.54%;
}
.road-to-link p:nth-child(3){
	top: 55.77%;
}
.road-i , .road-i-2{
	width: 34.934%;
    height: 18.85%;
    background-color: #333333;
	border-radius: 7vw;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
.road-i {
	top: 25.39%;
}
.road-i-2{
	top: 69.234%;
}
.road-i-in, .road-i-in-2{
	position: relative;
	width: 100%;
	height: 100%;
}
.road-i-in img {
	width: 53%;
	top: 34%;
	left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
.road-i-in-2 img{
	width: 63.36%;
    top: 31.5%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
/*-----------------------------------------------------------------------------------------------------------------------------*/

/*----------------------------------------------------------Q&A----------------------------------------------------------------*/

.q-a {
	position: relative;
	padding: 157.87% 0;
	background-image: url("../images/q-a-h.png");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}
.q-a p {
	position: absolute;
	font-size: 1rem;
}
.q-a span{
font-size: 1.28572rem;
}
.q-a-h,.q-1,.q-1-2,.q-4,.q-7,.q-10{
	width: 100%;
	text-align: center;
}
.q-2,.q-3,.q-5,.q-6,.q-8,.q-9,.q-11{
	left: 5.6%;
}
.q-a .q-a-h{
	font-size: 1.71429rem;
	top: 3.1%;
}
.q-1{
	top: 11.2%;
}
.q-1-2{
	top: 13.3%;
	left: 2.3%;
}
.q-2{
	top: 16.7%;
}
.q-3{
	top: 22.7%;
}
.q-4{
	top: 34.26%;
}
.q-5{
	top: 38.6%;
}
.q-6{
	top: 46.35%;
}
.q-7{
	top: 57.6%;
}
.q-8{
	top: 61.9%;
}
.q-9{
	top: 67.9%;
}
.q-10{
	top: 80.7%;
}
.q-11{
	top: 85%;
}

/*-----------------------------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------プロジェクトメンバー1-------------------------------------------------------*/

.project-1{
	position: relative;
	padding: 74.934% 0;
	background-image: url("../images/project-1.png");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}
.project-1 h2 {
	position: absolute;
	font-size: 1.71429rem;
	text-align: center;
	top: 10.5%;
	left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	font-weight: 100;
}
.project-1 .p-p-1 {
	font-size: 1.28572rem;
	text-align: center;
	position: absolute;
	top: 14.5%;
	left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	font-weight: 100;
	letter-spacing: 0.6vw;
}
.project-1 .abs-youtube{
	position: absolute;
    height: 42.975%;
    width: 100%;
	top: 32.9%;
}
.project-1 .p-p-2{
	position: absolute;
	font-size: 1.71429rem;
	top: 75.5%;
	left: 9.334%;
}
.project-1 ul{
	position: absolute;
	top: 85%;
/*	18px*/
	font-size: 1.28572rem;
	left: 10%;
}
.project-1 li {
	line-height: 1.6;
	
}
/*-----------------------------------------------------------------------------------------------------------------------------*/




/*-----------------------------------------------------自己紹介seiji--------------------------------------------------------------*/
/*seijiさん*/
/*もし元デザイン通りにしたいなら.seijiの背景を黒に指定。その後、.frontと.backにそれぞれ与えられた背景を指定すれば良い。*/
.seiji {
	position: relative;
	padding: 110.667% 0;
	background-image: url("../images/i-am-seiji-h.png");
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: #000000;
/*	これで子要素が回転する時に立体的に見える。*/
	-webkit-perspective : 1000px;
    perspective : 1000px;
}

.front, .back, .front p ,.front h3, .button, .back, .back ul, .back h3,.back p{
	position: absolute;
}
.seiji .front, .seiji .back {
	top : 0;
    left : 0;
    width : 100%;
    height : 100%;
    transition : transform 1s;
    -webkit-backface-visibility : hidden;
    backface-visibility : hidden;
	overflow: hidden;
}
.seiji .back{
/*	Y軸をう180°反転させる事で後ろのコンテンツを表示させている。*/
	transform : rotateY(-180deg);
}
.flipped .front {
	transform : rotateY(180deg)
}
.flipped .back {
	transform : rotateY(0);
}
/*共通設定*/
.front h3, .back h3, .front p, .back ul {
	letter-spacing: 0.2vw;
}
/*seijiさんフロントの設定*/
.front h3 {
/*	24px*/
	font-size: 1.71429rem;
	top: 6%;
	left: 10.4%;
}
.front p {
/*	16px*/
	font-size: 1.14286rem;
	width: 100%;
	line-height: 1.7;
	left: 10%;
}
.front p:nth-child(2){
	top: 11%;
}
.front p:nth-child(3){
	top: 23%;
}
.front p:nth-child(4){
	top: 48%;
}
.front p:nth-child(5){
	top: 67%;
}
.button {
	width: 36%;
	height: 8.6%;
	background-color: #151C15;
	top: 88.7%;
	left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	border-radius: 2vw;
	font-size: 1rem;
}
.front .button .button-in{
	position: relative;
	width: 100%;
	height: 100%;
}
.front .button p{
	font-size: 1rem;
	top: 12%;
	left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	border-radius: 2vw;
	font-size: 1rem;
	text-align: center;
}
.front .button .btn-p {
/*	20px*/
	font-size: 1.42858rem;
	top: 53%;
	font-family: 'Bangla-MN';
	letter-spacing: 0.8vw;
}
/*seijiさんバック設定*/
.back h3 {
	font-size: 1.71429rem;
	top: 6%;
	left: 6.4%;
}
.back ul {
	top: 10%;
	left: 10%;
}
.back li {
	margin-top: 3%;
	font-size: 1.14286rem;
	line-height: 1.6;
}
.back .button {
	top: auto;
	bottom: 3.9%;
}
.back .button-in{
	position: relative;
	width: 100%;
	height: 100%;
}
.back p {
	text-align: center;
	font-size: 1.42858rem;
	font-family: 'Bangla-MN';
	letter-spacing: 0.8vw;
	top: 37%;
	left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
/*-----------------------------------------------------------------------------------------------------------------------------*/

/*------------------------------------------------------プロジェクトメンバー２-----------------------------------------------------*/
.project-2{
	position: relative;
/*	padding: 64% 0;*/
	padding: 60% 0;
}
.abs-youtube2 {
	position: absolute;
	height: 42.975%;
    width: 100%;
	top: 9.3%;
}
.project-2 p{
	position: absolute;
	font-size: 1.71429rem;
	top: 62.4%;
	left: 9.334%;
}
.project-2 ul {
	position: absolute;
	font-size: 1.28572rem;
	top: 74.6%;
	left: 10%;
}
.project-2 li {
    line-height: 1.6;
}
/*-----------------------------------------------------------------------------------------------------------------------------*/

/*--------------------------------------------------自己紹介uno-one---------------------------------------------------------------*/
.uno-one {
	padding: 94.267% 0;
	background-image: url("../images/i-am-uno-h.png");
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	-webkit-perspective : 1000px;
    perspective : 1000px;
}
.uno-one .front, .uno-one .back {
	top : 0;
    left : 0;
    width : 100%;
    height : 100%;
    transition : transform 1s;
    -webkit-backface-visibility : hidden;
    backface-visibility : hidden;
	overflow: hidden;
}
.uno-one .back{
/*	Y軸をう180°反転させる事で後ろのコンテンツを表示させている。*/
	transform : rotateY(-180deg);
}
.flipped .front {
	transform : rotateY(180deg)
}
.flipped .back {
	transform : rotateY(0);
}
/*unoさんフロントの設定*/
.uno-one .front h3 {
/*	24px*/
	font-size: 1.71429rem;
	top: 7.044%;
	left: 10.4%;
}
.uno-one .front p {
/*	16px*/
	font-size: 1.14286rem;
	width: 100%;
	line-height: 1.7;
	left: 10%;
}
.uno-one .front p:nth-child(2){
	top: 12.914%;
}
.uno-one .front p:nth-child(3){
	top: 38.6%;
}
.uno-one .front p:nth-child(4){
	top: 64.2%;
}
.uno-one .button {
	width: 36%;
	height: 10.096%;
	background-color: #151C15;
	top: 82.4%;
	left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	border-radius: 2vw;
	font-size: 1rem;
}
.front .button p{
	font-size: 1rem;
	top: 12%;
	left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	border-radius: 2vw;
	font-size: 1rem;
	text-align: center;
}
.uno-one .front .button .btn-p {
/*	20px*/
	font-size: 1.42858rem;
	top: 53%;
	font-family: 'Bangla-MN';
	letter-spacing: 0.8vw;
}
/*seijiさんバック設定*/
.uno-one .back h3 {
	font-size: 1.71429rem;
	top: 7.044%;
	left: 6.4%;
}
.uno-one .back ul {
	top: 11.8%;
	left: 10%;
}
.uno-one .back li {
	margin-top: 3%;
	font-size: 1.14286rem;
	line-height: 1.6;
}
.uno-one .back .button {
	top: 84.65%;
}
.uno-one .back .button-in{
	position: relative;
	width: 100%;
	height: 100%;
}
.uno-one .back p {
	text-align: center;
	font-size: 1.42858rem;
	font-family: 'Bangla-MN';
	letter-spacing: 0.8vw;
	top: 37%;
	left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
/*-----------------------------------------------------------------------------------------------------------------------------*/

/*------------------------------------------------------コンタクトcontact-------------------------------------------------------*/
.contact {
	position: relative;
	padding: 35.334%;
	text-align: center;
}
.contact-h,.contact-p,.contact-i{
	position: absolute;
}
.contact-h{
	font-size: 1.71429rem;
	width: 100%;
	top: 15.095%;
	left: 0%;
}
.contact-p{
	font-size: 1rem;
	width: 100%;
	top: 38.493%;
	left: 0%;
}
.contact-i{
	width: 34.934%;
	height: 18.493%;
	background-color: #333333;
	top: 66.416%;
	left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	border-radius: 7vw;
}
.contact-i-in{
	position: relative;
	width: 100%;
	height: 100%;
}
.contact-i img{
	position: absolute;
	width: 63.36%;
	top: 31.5%;
	left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}
/*-----------------------------------------------------------------------------------------------------------------------------*/

/*----------------------------------------------------------footer-------------------------------------------------------------*/
footer{
	position: relative;
	padding: 26.1% 0;
	background-image: url("../images/footer.png");
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}
footer .f-park ,footer .f-insta{
	position: absolute;
	width: 10.134%;
	top: 57%;
	left: 65.334%;
}
footer .f-insta{
	left: 84.535%;
}
/*-----------------------------------------------------------------------------------------------------------------------------*/