@charset "UTF-8";



/* 角を丸くする */
.kadomaru {
	border-radius: 5px;
}

/* フェードイン */

.fadein {
	animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) 1 forwards;
}

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


/* スライドイン */

.slidein {
	animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
 
@keyframes slideIn {
	0% {
		transform: translateX(180px);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
	}
	40%,100% {
		opacity: 1;
	}
}

/* ズームイン */


.zoomin {
	animation: zoomIn 1.8s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}

@keyframes zoomIn {
	0% {
		transform: scale(0.8);
		opacity: 0;
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
}


/* ポップアップ
スライドアップしながらフェードインします。
 */

.popup {
	animation: popup 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1 forwards;
}

@keyframes popup {
	0% {
		transform: translateY(40px) scale(0.8);
		opacity: 0;
	}
	100% {
		transform: translateY(0) scale(1.0);
	}
	80%, 100% {
		opacity: 1;
	}
}


/* トリガースライドイン */

.fadeRight{
animation-name:fadeRightAnime;
animation-duration:1s;
animation-delay:0.2s;
animation-fill-mode:forwards;
opacity:0;

}

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

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

.Trigger-fadeRight{
    opacity: 0;
}



/* きらんと光る
ホバーすると要素がきらんと光るアニメーションです。
光る速度を変えてみたり、opacityで光の濃さを調節してみてください。
 */


.kiran {
	opacity: 1;
	overflow: hidden;
	position: relative;
	cursor: pointer;
}
.kiran:before {
	background-color: #fff;
	content: "";
	display: block;
	position: absolute;
	top: -100px;
	left: 0;
	width: 30px;
	height: 100%;
	opacity: 0;
	transition: cubic-bezier(0.32, 0, 0.67, 0);
}
.kiran:hover:before {
	animation: kiran 0.8s linear 1;
}

@keyframes kiran {
	0% {
		transform: scale(2) rotate(45deg);
		opacity: 0;
	}
	20% {
		transform: scale(20) rotate(45deg);
		opacity: 0.3;
	}
	40% {
		transform: scale(30) rotate(45deg);
		opacity: 0.2;
	}
	80% {
		transform: scale(45) rotate(45deg);
		opacity: 0.1;
	}
	100% {
		transform: scale(50) rotate(45deg);
		opacity: 0;
	}
}







/* アンダーラインフェードイン */

.linefadein a{
position: sticky; /*アンダーラインの位置を決めるための基準 */
}

.linefadein a:after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 2px;
background: #fff;
bottom: 1px; /*アンダーラインが現れ始める位置（aタグの下辺からの高さ）*/
opacity: 0;
visibility: hidden;
transition: 0.5s;
}

.linefadein a:hover:after {
visibility: visible;
bottom: 1px; /*アニメーションが止まる位置*/
opacity: 1;
}



/* アンダーラインスライド */
.lineslide a{
position: sticky; /*アンダーラインの位置を決めるための基準 */
}

.lineslide a:after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 2px;
background: #fff;
bottom: 0px;
transform: scale(0, 1);
transform-origin: right top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
transition: transform 0.5s;  /*変形の時間*/
}

.lineslide a:hover:after {
transform: scale(1, 1);     /*ホバー後、x軸方向に1（相対値）伸長*/
transform-origin: left top; /*左から右に向かう*/
}



/* アンダーラインポップ */
.linepop a{
position: sticky; /*アンダーラインの位置を決めるための基準 */
}

.linepop a:after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 2px;
background: #fff;
bottom: 0px;
transform: scale(0, 1);
transform-origin: center top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
transition: transform 0.5s;   /*変形の時間*/
}

.linepop a:hover:after {
transform: scale(1, 1); /*ホバー後、x軸方向に1（相対値）伸長*/
}






.Trigger{
    opacity: 0;
}