@charset "utf-8";

/*==================================================
機能編　9-1-2 丸が動いてスクロールを促す
===================================*/
/*スクロールダウン全体の場所*/
.scrolldown2{
/*描画位置※位置は適宜調整してください*/
position:fixed;
bottom:2%;
left:50%;
z-index: 2;
}

/*Scrollテキストの描写*/
.scrolldown2 span{
/*描画位置*/
position: absolute;
left:10px;
bottom:10px;
/*テキストの形状*/
color: #ffed84;
font-size: 1em;
letter-spacing: 0.05em;
/*縦書き設定*/
-ms-writing-mode: tb-rl;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
}


/* 丸の描写 */
.scrolldown2:before {
content: "";
/*描画位置*/
position: absolute;
bottom:0;
left:-4px;
/*丸の形状*/
width:10px;
height:10px;
border-radius: 50%;
background:#ffed84;
/*丸の動き1.6秒かけて透過し、永遠にループ*/
animation:
circlemove 1.6s ease-in-out infinite,
cirlemovehide 1.6s ease-out infinite;
}


/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
0%{bottom:80px;}
100%{bottom:-5px;}
 }

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
0%{opacity:0}
50%{opacity:1;}
80%{opacity:0.9;}
100%{opacity:0;}
}

/* 線の描写 */
.scrolldown2:after{
content:"";
/*描画位置*/
position: absolute;
bottom:0;
left:0;
/*線の形状*/
width:2px;
height: 80px;
background:#ffed84;
}


/*==================================================
機能編　8-1-4	ページ内にある指定の範囲内で下から出現
===================================*/

/*リンクの形状*/
#page-top a{
	display: flex;
	justify-content:center;
	align-items:center;
	background:#e2a2b1;
	width: 60px;
	height: 50px;
	color: #fff;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size:0.6rem;
	transition:all 0.3s;
}

#page-top a:hover{
	background: #999;
	height: 55px;
}

/*リンクを右下に固定*/
#page-top {
	position: fixed;
	right: 0;
	bottom:0;
	z-index: 2;
    /*はじめは非表示*/
	opacity: 0;
	transform: translateY(100px);
}

/*　上に上がる動き　*/

#page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/

#page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(100px);
  }
}


/*==================================================
   印象編 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;/*透過なしに変化*/
}



/*==================================================
ふわっ
===================================*/

/* fadeIn */
.fadeIn{
animation-name: fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* fadeUp */

.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/* fadeDown */

.fadeDown{
animation-name: fadeDownAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeDownAnime{
  from {
    opacity: 0;
	transform: translateY(-100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/* fadeLeft */

.fadeLeft{
animation-name: fadeLeftAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
	transform: translateX(-100px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}

/* fadeRight */

.fadeRight{
animation-name: fadeRightAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
	transform: translateX(100px);
  }

  to {
    opacity: 1;
	transform: translateX(0);
  }
}

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