@charset "utf-8";

/*===========================================================*/
/*機能編  4-2-7 背景色が伸びる（斜め） */
/*===========================================================*/

/*========= ローディング画面のためのCSS ===============*/
#splash {
	position: fixed;
	width: 100%;
	height: 100%;
	background: #daca0b;
	z-index: 9999999;
	text-align:center;
	color:#fff;
}

#splash-logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/*========= 画面遷移のためのCSS ===============*/

/*画面遷移アニメーション*/
.splashbg{
	display: none;
}

/*bodyにappearクラスがついたら出現*/
body.appear .splashbg{
	display:block;
}

body.appear .splashbg{
	animation-name:PageAnime;
	animation-duration:1.2s;
	animation-timing-function:ease-in-out;
	animation-fill-mode:forwards;
	content: "";
	position:fixed;
	z-index: 999;
	width: 50%;
	height: 100vh;
	top: 0;
	left: 0;
	transform: translateX(-300%) skewX(-45deg);
	background-color: #000;/*伸びる背景色の設定*/
}

@keyframes PageAnime{
	0% {
		transform-origin:left;
		transform:translateX(-300%) skewX(-45deg);
	}
	100% {
		transform-origin:left;
		transform:translateX(500%) skewX(-45deg);
	}
}

/*画面遷移の後現れるコンテンツ設定*/
#container{
	position: relative;
	opacity: 0;/*はじめは透過0に*/
}

/*bodyにappearクラスがついたら出現*/
body.appear #container{
	animation-name:PageAnimeAppear;
	animation-duration:1s;
	animation-delay: 0.6s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes PageAnimeAppear{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}

/*===========================================================*/
/*機能編  5-1-24 クリックしたら円形背景が拡大（中央から） */
/*===========================================================*/

/*========= ナビゲーションのためのCSS ===============*/

/*アクティブになったエリア*/
#g-nav.panelactive{
	/*position:fixed;にし、z-indexの数値を大きくして前面へ*/
	position:fixed;
	z-index: 999;
	top: 0;
	width:100%;
	height: 100vh;
}

/*丸の拡大*/
.circle-bg{
	position: fixed;
	z-index:3;
	/*丸の形*/
	width: 100px;
	height: 100px;
	border-radius: 50%;
	animation: bgchange 40s ease infinite;/*変化の時間を変更したい場合は40sの部分を好きな時間に変更*/
	/*丸のスタート位置と形状*/
	transform: scale(0);/*scaleをはじめは0に*/
	top:calc(50% - 50px);/*50%から円の半径を引いた値*/
	left:calc(50% - 50px);/*50%から円の半径を引いた値*/
	transition: all .6s;/*0.6秒かけてアニメーション*/
}

.circle-bg.circleactive{
	transform: scale(50);/*クラスが付与されたらscaleを拡大*/
}

/*ナビゲーションの縦スクロール*/
#g-nav-list{
	display: none;/*はじめは表示なし*/
	/*ナビの数が増えた場合縦スクロール*/
	position: fixed;
	z-index: 999; 
	width: 100%;
	height: 100vh;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

#g-nav.panelactive #g-nav-list{
	 display: block; /*クラスが付与されたら出現*/
}

/*ナビゲーション*/
#g-nav ul {
	opacity: 0;/*はじめは透過0*/
	/*ナビゲーション天地中央揃え※レイアウトによって調整してください。不必要なら削除*/
	position: absolute;
	z-index: 999;
	top:50%;
	left:50%;
	transform: translate(-50%,-50%);
}

/*背景が出現後にナビゲーションを表示*/
#g-nav.panelactive ul {
	opacity:1;
}

/* 背景が出現後にナビゲーション li を表示※レイアウトによって調整してください。不必要なら削除*/
#g-nav.panelactive ul li{
animation-name:gnaviAnime;
animation-duration:1s;
animation-delay:.2s;/*0.2 秒遅らせて出現*/
animation-fill-mode:forwards;
opacity:0;
}
@keyframes gnaviAnime{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}

/*リストのレイアウト設定*/
#g-nav li{
	text-align: center; 
	list-style: none;
}

#g-nav li a{
	color: #333;
	text-decoration: none;
	padding:10px;
	display: block;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: bold;
}

@media screen and (max-width:768px) {
#g-nav li a{
	padding:5px 10px;
}	
}

/*==================================================
　機能編 5-2-8 3本線が横方向に回転して×に
===================================*/

/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn{
	position: fixed;/*ボタン内側の基点となるためrelativeを指定*/
	top:2vh;
	right:2vw;
	z-index: 9999;
	cursor: pointer;
	width: 50px;
	height:50px;
}

/*ボタン内側*/
.openbtn .openbtn-area{
	transition: all .6s;/*アニメーションの設定*/
	width:50px;
	height:50px;
}

.openbtn span{
	display: inline-block;
	transition: all .4s;
	position: absolute;
	left: 14px;
	height: 3px;
	border-radius: 2px;
	background: #333;
  	width: 45%;
  }

.openbtn span:nth-of-type(1) {
	top:15px;	
}

.openbtn span:nth-of-type(2) {
	top:23px;
}

.openbtn span:nth-of-type(3) {
	top:31px;
}

/*activeクラスが付与されると .openbtn-areaが360度回転し、その中の線が回転して×に*/
.openbtn.active .openbtn-area{
	transform: rotate(360deg);
}

.openbtn.active span:nth-of-type(1) {
	top: 18px;
	left: 18px;
	transform: translateY(6px) rotate(-45deg);
	width: 30%;
}

.openbtn.active span:nth-of-type(2) {
	opacity: 0;
}

.openbtn.active span:nth-of-type(3){
	top: 30px;
	left: 18px;
	transform: translateY(-6px) rotate(45deg);
	width: 30%;
}

/*==================================================
機能編 　9-1-3	マウスが動いてスクロールを促す
===================================*/

/*スクロールダウン全体の場所*/
.scrolldown3{
	/*描画位置※位置は適宜調整してください*/
	position:absolute;
	bottom:10px;
	left:50%;
	/*マウスの動き1.6秒かけて動く永遠にループ*/
	animation:mousemove 1.6s ease-in-out infinite;
}

/*下からの距離が変化して上から下に動く*/
@keyframes mousemove{
	  0%{bottom:10px;}
	  50%{bottom:5px;}
	 100%{bottom:10px;}
 }

/*Scrollテキストの描写*/
.scrolldown3 span{
	/*描画位置*/
	position: absolute;
	left:-15px;
	bottom:45px;
	/*テキストの形状*/
	color: #000;
	font-size: 0.7rem;
	letter-spacing: 0.05em;
}

/*マウスの中の線描写 */
.scrolldown3 span::after{
	content: "";
	/*描画位置*/
	position: absolute;
	top:10px;
	left:17px;
	/*線の形状*/
	width: 1px;
	height: 15px;
	background: #000;
	/*線の動き1.4秒かけて動く。永遠にループ*/
	animation: mousepathmove 1.4s linear infinite;
	opacity:0;
}

/*上からの距離・不透明度・高さが変化して上から下に流れる*/
@keyframes mousepathmove{
	0%{
		height:0;
		top:10px;
		opacity: 0;
	}
	50%{
		height:15px;
		opacity: 1;
	}
	100%{
		height:0;
		top:30px;
		opacity: 0;
	}
}

/*マウスの描写 */
.scrolldown3:before {
	content: "";
	/*描画位置*/
	position: absolute;
	bottom:0;
	left:-10px;
	/*マウスの形状*/
	width:25px;
	height:37px;
	border-radius: 10px;
	border:1px solid #000;
}


/*マウスの中の丸の描写*/
.scrolldown3:after{
	content:"";
	/*描画位置*/
	position: absolute;
	bottom:26px;
	left:0;
	/*丸の形状*/
	width:5px;
	height: 5px;
	border-radius: 50%;
	border:1px solid #000;
}

/*==================================================
機能編 　7-1-9	くるっと回転（手前に回転）
===================================*/

/*== ボタン共通設定 */
.btn02 {
	/*背景の基点とするためrelativeを指定*/
	position: relative;
	/*ボタンの形状*/
	display: inline-block;
	margin: 8vh 0 0 0;
	width:100%;
	max-width: 250px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	outline: none;
}

/*ボタン内側の設定*/
.btn02 span {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	border: 3px solid #000;
	/* 重なりを3Dで表示 */
	transform-style: preserve-3d;
	/* アニメーションの設定 数字が少なくなるほど早く回転 */
	transition: 0.5s;
}

/*== 手前に */

/* 回転前 */
.rotatefront span:nth-child(1) {
	color: #000;
	transform: rotateX(0deg);/*はじめは回転なし*/
	transform-origin: 0 50%  -25px;/* 回転する起点 */
}

/*hoverをした後の形状*/
.rotatefront:hover span:nth-child(1) {
	transform: rotateX(-90deg);/* X軸に-90度回転 */
}

/* 回転後 */
.rotatefront span:nth-child(2) {
	background: #000;
	color: #fff;
	transform: rotateX(90deg);/*はじめはX軸に90度回転*/
	transform-origin: 0 50%  -25px;/* 回転する起点 */
}

/*hoverをした後の形状*/
.rotatefront:hover span:nth-child(2) {
	transform: rotateX(0deg);/* X軸に0度回転 */
}


/*==================================================
印象編 4 最低限おぼえておきたい動き
===================================*/

/*==================================================
4-7 にゅーん（滑らかに変形して出現）
===================================*/

/* smooth */
.smooth{
	animation-name: smoothAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
  　transform-origin: left;
	opacity:0;
}

@keyframes smoothAnime{
  from {
  transform: translate3d(0, 100%, 0) skewY(12deg);
  opacity:0;
  }

  to {
  transform: translate3d(0, 0, 0) skewY(0);
  opacity:1;
  }
}

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


/*==================================================
　印象編　8-16 テキストが滑らかに出現
===================================*/

span.smoothText {
	overflow: hidden;
	display: block;
	max-width: 100vw;
}

span.smoothTextTrigger{
	transition: .8s ease-in-out;
	transform: translate3d(0,100%,0) skewY(12deg);
	transform-origin: left;
	display: block;
}
span.smoothTextTrigger.smoothTextAppear{
	transform: translate3d(0,0,0) skewY(0);
}

/*==================================================
	印象編　5-1　背景色が時間変化
===================================*/
/*========= body背景色の変化CSS ===============*/

body {
	animation: bgchange 10s ease infinite;/*変化の時間を変更したい場合は40sの部分を好きな時間に変更*/
}

@keyframes bgchange{
	  0%   {background:#ddd;}/*変化させたい色*/
	  20%  {background:#ddd;}/*変化させたい色*/
	  30%  {background:#ddd;}/*変化させたい色*/
	  40%  {background:#ddd;}/*変化させたい色*/
	  50%  {background:#ddd;}/*変化させたい色*/
	  60%  {background:#ddd;}/*変化させたい色*/
	  70%  {background:#ddd;}/*変化させたい色*/
	  80%  {background:#ddd;}/*変化させたい色*/
	  90%  {background:#ddd;}/*変化させたい色*/
	  100% {background:#ddd;}/*変化させたい色*/
 }

/*===========================================================*/
/* 印象編　5-4 幾何学模様*/
/*===========================================================*/

#particles-js{ 
	position:fixed;/*描画固定*/
	z-index:-1;/*描画を一番下に*/
	width: 100%;
	height: 100%;
}

#wrapper{
	position: relative;/*描画を#particles-jsよりも上にするためposition:relative;を指定*/
	z-index: 1;/*z-indexの数字を大きくすることで描画を#particles-jsよりも上に*/
}

/*===========================================================*/
/* 印象編　5-11 波打つ（1 つ 重なりあり）*/
/*===========================================================*/

#waveCanvas{
    position: absolute;
    bottom: 0;
	left:0;
    width: 100%;
}

/*==================================================
   印象編　5-14　波線（1つ）
===================================*/

#waveCanvas{
	position: absolute;
	left:0;
	width: 100%;
	z-index: 1;
}


/*==================================================
　印象編　5-17　粒子が集まってタイポグラフィーを形成する
===================================*/

#particle{
	position: absolute;
	left:0;
	top:0;
	width:100%;
	height: 100vh;
	vertical-align: bottom;/*canvasタグ下に余白が生まれるのを防ぐ*/
	z-index: 2;
}

@media screen and (max-width:768px) {
#particle{
	width:170%;
	height:170vh;
	left:-35%;
	top:-35vh;
	}	
}

/*==================================================
　印象編　6-5　スクロールすると紙芝居風に展開
===================================*/

.fixed{
	position: -webkit-sticky;/*Safari*/
	position: sticky;
	top:0;/*Header高さ分で止まるようにする*/
}

@media screen and (max-width:768px) {
  .fixed{
	position: relative!important;/*JSでボタンをクリックした際にposition:sticky;に戻す記述を上書きするため!importantをつける*/
	}
}

/*==================================================
　印象編　9-4-1　SVG アニメーション
===================================*/

.service-img svg{
	width:100%;/*SVGのサイズ*/
}

/*アニメーション前の指定*/
.service-img svg path {
		fill-opacity: 0;/*最初は透過0で見えない状態*/
		transition: fill-opacity .5s;/*カラーがつく際のアニメーション0.5秒で変化*/
		fill: none;/*塗りがない状態*/
		stroke: #000;/*線の色*/
	}

/*アニメーション後に.doneというクラス名がで付与された時の指定*/
.service-img svg.done path{
	  fill: #000;/*塗りの色*/
	  fill-opacity: 1;/*透過1で見える状態*/
	  stroke: none;/*線の色なし*/
	}