@charset "UTF-8";

/* CSS Document */

/*-------------------------------------
				共通
---------------------------------------*/
html,body{
	height: 100%;/*高さを100%にして描画エリアをとる*/
}

html {
  scroll-behavior: smooth;
}

body{
	font-family: "maru-maru-gothic-bsr-stdn", sans-serif, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	font-weight: 400;
	font-style: normal;
	font-size:16px;
	line-height: 1.6;
	letter-spacing: 0.1em;
	color:#fefefe;
	background-color: #090909;
}

img {
  -webkit-touch-callout: none;
  -ms-interpolation-mode: bicubic;
  /*vertical-align: bottom;*/
  max-width: 100%;
    height: auto;
}

a {
	word-break: break-all;
	color: #fefefe;
	text-decoration: underline;
	transition: 0.8s;
	-webkit-transition: 0.8s;
}

a:hover {
	opacity: 0.6;
}

p {
	word-break: break-all;
}

.font-ja {
	font-family: "maru-maru-gothic-bsr-stdn", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.wrap {
    width: 90%;
    margin: 0 auto;
}

@media(min-width:768px){
	
.wrap {
    width: 900px;
}
	
}

/*-------------------------------------
			星空
---------------------------------------*/
#particles-js{ 
	position:fixed;
	z-index:-1;
	width: 100%;
	height: 100%;
	background-color:#090909;
}

.content {
	position: relative;
	z-index: 1;
	width:100%;
	height: 100%;
}


/*-------------------------------------
			PC/SP出し分け
---------------------------------------*/

.pcOnly{display:; !important}
.spOnly{display:none;}
.spOnlyTxt{display:none;}

@media(max-width:768px){
	.pcOnly{display:none;}
	.spOnly{display:block;}
	.spOnlyTxt{display:inline;}
}

/*-------------------------------------
			色分け
---------------------------------------*/

.red {
	color: #e50011;
}
.orange {
	color: #ee7700;
}
.yellow {
	color: #fff000;
}
.green {
	color: #00a73b;
}
.blue {
	color: #0064b3;
}
.purple {
	color: #5f1885;
}
.navy {
	color: #2a2489;
}



/*-------------------------------------
			アニメーション
---------------------------------------*/

/*==================================================
パタッ
===================================*/

/* 下へ */
.flipDown{
animation-name:flipDownAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipDownAnime{
  from {
    transform: perspective(2500px) rotateX(100deg);
  opacity: 0;
  }

  to {
    transform: perspective(2500px) rotateX(0);
  opacity: 1;
  }
}


/* 左へ */
.flipLeft{
animation-name:flipLeftAnime;
animation-duration:1s;
animation-fill-mode:forwards;
perspective-origin:left center;
opacity:0;
}

@keyframes flipLeftAnime{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
  opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}


/* 左上へ */
.flipLeftTop{
animation-name:flipLeftTopAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipLeftTopAnime{
  from {
   transform: translate(-20px,80px) rotate(-15deg);
  opacity: 0;
  }

  to {
   transform: translate(0,0) rotate(0deg);
  opacity: 1;
  }
}

/* 右へ */
.flipRight{
animation-name:flipRightAnime;
animation-duration:1s;
animation-fill-mode:forwards;
perspective-origin:right center;
opacity:0;
}

@keyframes flipRightAnime{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
  opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}

/* 右上へ */
.flipRightTop{
animation-name:flipRightTopAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes flipRightTopAnime{
  from {
   transform: translate(-20px,80px) rotate(25deg);
   opacity: 0;
  }

  to {
   transform: translate(0,1) rotate(0deg);
  opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.flipDownTrigger,
.flipLeftTrigger,
.flipLeftTopTrigger,
.flipRightTrigger,
.flipRightTopTrigger{
    opacity: 0;
}

/*==================================================
くるっ
===================================*/

/*　Y軸（横へ） */
.rotateY{
  animation-name:rotateYAnime;
  animation-duration:1.5s;
  animation-fill-mode:forwards;
	
}

@keyframes rotateYAnime{
  from{
    transform: rotateY(0);
    opacity: 0;
    }
  to{
    transform: rotateY(-360deg);
    opacity: 1;
    }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.rotateXTrigger,
.rotateYTrigger,
.rotateLeftZTrigger,
.rotateRightZTrigger{
    opacity: 0;
}


/*==================================================
アニメーション設定
===================================*/

/* アニメーションの回数を決めるCSS*/

.count2{  
  animation-iteration-count: 2;/*この数字を必要回数分に変更*/
}

.countinfinite{  
  animation-iteration-count: infinite;/*無限ループ*/
}

/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time05{  
  animation-delay: 0.5s;
}

.delay-time1{  
  animation-delay: 1s;
}

.delay-time15{  
  animation-delay: 1.5s;
}

.delay-time2{  
  animation-delay: 2s;
}

.delay-time25{  
  animation-delay: 2.5s;
}

/* アニメーション自体が変化する時間を決めるCSS*/

.change-time05{  
  animation-duration: 0.5s;
}

.change-time1{  
  animation-duration: 1s;
}

.change-time15{  
  animation-duration: 1.5s;
}

.change-time2{  
  animation-duration: 2s;
}

.change-time25{  
  animation-duration: 2.5s;
}