@charset "utf-8";


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

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

/*==================================================
機能編　5-1-25 クリックしたらナビ背景コンテンツがぼかされる※IE11非対応
===================================*/

/*========= ぼかしのためのCSS ===============*/

.mainblur{
	filter: blur(8px);
}

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

/* 4-1 ふわっ（その場で） */
.fadeIn{
animation-name: fadeInAnime;
animation-duration:2s;/*ゆっくり出現するため数値変更*/
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
/* 4-4 ボンッ（拡大） */
.zoomOut{
	animation-name: zoomOutAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
}

@keyframes zoomOutAnime{
  from {
	transform: scale(1.2);
	opacity: 0;
  }

  to {
    transform:scale(1);
	opacity: 1;
  }
}

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

/*===========================================================*/
/* 印象編　8 テキストの動き　/
/*===========================================================*/

/*========= 8-2 テキストが流れるように出現（左から右） ===============*/

/*全共通*/

.slide-in {
	overflow: hidden;
    display: inline-block;
    padding: 0 10px;/*英語がはみ出るので見えるように余白追記*/
}

.slide-in_inner {
	display: inline-block;

}

/*左右のアニメーション*/
.leftAnime,
.rightAnime{
    opacity: 0;/*事前に透過0にして消しておく*/
}

.slideAnimeLeftRight {
	animation-name: slideText-100;
	animation-duration:0.8s;
	animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes slideText-100 {
  from {
	transform: translateX(-100%); /*要素を左の枠外に移動*/
        opacity: 0;
  }

  to {
	transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}

.slideAnimeRightLeft {
	animation-name: slideText100;
	animation-duration:0.8s;
	animation-fill-mode:forwards;
    opacity: 0;
}


@keyframes slideText100 {
  from {
	transform: translateX(100%);/*要素を右の枠外に移動*/
    opacity: 0;
  }

  to {
	transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}

/*========= 8-9 テキストがじわっと出現 ===============*/

.blur{
	animation-name: blurAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
	filter: blur(10px);
	transform: scale(1.02);
	opacity: 0;
  }

  to {
	filter: blur(0);
	transform: scale(1);
	opacity: 1;
  }
}
 
.blurTrigger{
    opacity: 0;
}



/*========= 8-17　テキストがほのかに光りながら出現 ===============*/

.glowAnime span{opacity: 0;}
.glowAnime.glow span{ animation:glow_anime_on 1s ease-out forwards; }
@keyframes glow_anime_on{
	0% { opacity:0; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
	50% { opacity:1;text-shadow: 0 0 10px #fff,0 0 15px #fff; }
	100% { opacity:1; text-shadow: 0 0 0 #fff,0 0 0 #fff;}
}


/*==================================================
   7 画像リンクの動き
===================================*/

span.mask{
	display: block;/*画像をくくるspanタグをブロック要素にする*/
	overflow: hidden;/*はみ出ているものを隠す*/
}

/*　7-9 波紋　*/

.circle span.mask{
	position: relative;/*波紋の基点となる位置を定義*/
}

.circle span.mask::before {
	position: absolute;
	content: '';
	transform: scale(0);/*円の大きさ初期値は0*/
	opacity: 0;/*透過0*/
	width:100%;/*円のサイズ指定*/
	height:100%;/*円のサイズ指定*/
	border-radius:50%;/*円の角丸指定*/
	background: rgba(255,255,255,0.2);/*円の背景色*/
}

.circle span.mask:hover::before {/*hoverした時の変化*/
	animation: circle 0.75s;/*アニメーションの名前と速度を定義*/
}

@keyframes circle {
  0% {
  transform: scale(0);
  opacity: 1;/*透過なし*/
  }
  30% {
    opacity: 1;
  }
  100% {
  transform: scale(2);/*アニメーションで大きくなった2倍の円の指定*/
  }
}

/* 7-11 背景が出現＋テキスト（上から） */

.bgDU,
.bgDU .mask{
    display: block;
	position:relative;/*背景色とテキストの基点となる位置を定義*/
    overflow: hidden;
}

.bgDU .mask::before{
	content:'';
	position: absolute;
	z-index: 2;
	left:0;
	top:0;
	opacity:0;/*透過0*/
	transition: .3s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
    transform: translateY(100%);
	background:#e2a2b2;/*背景色*/
	width:100%;
	height: 100%;	
}

.bgDU:hover .mask::before{/*hoverした時の変化*/
	opacity:1;/*透過なしに変化*/
	transform: translateY(0);
}

.bgDU .cap{/*画像の上のテキスト*/
	position: absolute;
	opacity:0;/*透過0*/
	transition: .5s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
	z-index:3;/*テキストを前面に出す*/
	top: 50%;
    left: 50%;
	transform: translate(-50%,-50%);/*テキストの位置中央指定*/
	color: #fff;/*テキストの色を変えたい場合はここを修正*/
}

.bgDU:hover .cap{/*hoverした時の変化*/
	opacity:1;/*透過なしに変化*/
}

/*==================================================
    印象編　6-7 スクロールするとヘッダー背景画像が拡大（エリアの動き）
===================================*/

#header-img{
	position: fixed;/*背景を固定するためfixedをかける*/
	z-index: 1;/*#container,#footerよりも下に配置するために数値を小さくする*/
    top: 0;/*topの位置がJSで変化*/
	/*以下画面で背景画像を表示させるための指定*/
    width: 100%;
	height:100vh;
	background: url("../img/main.jpg") no-repeat top center;/*背景画像の設定*/
	background-size:cover;
	transform-origin:center;/*変化する基点を中心からに設定*/
}

#container,
#footer{
	position: relative;/*#header-imgよりも配置を上にするためにrelativeをつける*/
	/*z-index: 3;*/ /*#header-imgよりもz-indexの値を大きな数値にして上に表示*/
    background:#ffff;

}