<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">@charset "utf-8";
/* ===================================================================

 file name  :btn-effect.css
 style info :エフェクト

=================================================================== */



/* ---------------------------------------------------------------------------
	.btn-effect
--------------------------------------------------------------------------- */
.btn-effect{
  position: relative;
  z-index: 0;
  display: block;
  overflow: hidden;
  text-align: center;
}
.btn-effect .btn-effect_inner{
	position: relative;
	display: block;
	text-decoration: none;
	overflow:hidden;
}

/*
	opacity
	&lt;p class="btn-effect btn-effect_opacity"&gt;&lt;a href="#" class="btn-effect_inner"&gt;ボタン&lt;/a&gt;&lt;/p&gt;
*/
.btn-effect_opacity a:hover{
	opacity: 0.6;
}

/*
	s-close
	&lt;p class="btn-effect btn-effect_s-close"&gt;&lt;a href="#" class="btn-effect_inner"&gt;ボタン&lt;/a&gt;&lt;/p&gt;
*/
.btn-effect_s-close .btn-effect_inner{
	position: relative;
  z-index: 2;
}
.btn-effect_s-close .btn-effect_inner::before,
.btn-effect_s-close .btn-effect_inner::after{
	content:'';
	display: block;
	position: absolute;
	top: 0;
	width: 50%;
	height: 100%;
	background: rgba(0,0,0,0.3);
	transition: all ease-out .2s;
  z-index: -1;
}
.btn-effect_s-close .btn-effect_inner::before{left: -50%;}
.btn-effect_s-close .btn-effect_inner::after{right: -50%;}
.btn-effect_s-close .btn-effect_inner:hover::before{left:0;}
.btn-effect_s-close .btn-effect_inner:hover::after{right: 0;}

/*
	s-close-v
	&lt;p class="btn-effect btn-effect_close-v"&gt;&lt;a href="#" class="btn-effect_inner"&gt;ボタン&lt;/a&gt;&lt;/p&gt;
*/
.btn-effect_s-close-v .btn-effect_inner{
	position: relative;
  z-index: 2;
}
.btn-effect_s-close-v .btn-effect_inner::before,
.btn-effect_s-close-v .btn-effect_inner::after{
	content:'';
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	height: 50%;
	background: rgba(0,0,0,0.3);
	transition: all ease-out .2s;
  z-index: -1;
}
.btn-effect_s-close-v .btn-effect_inner::before{top: -50%;}
.btn-effect_s-close-v .btn-effect_inner::after{bottom: -50%;}
.btn-effect_s-close-v .btn-effect_inner:hover::before{top:0;}
.btn-effect_s-close-v .btn-effect_inner:hover::after{bottom: 0;}

/*
	s-open
	&lt;p class="btn-effect btn-effect_s-open"&gt;&lt;a href="#" class="btn-effect_inner"&gt;ボタン&lt;/a&gt;&lt;/p&gt;
*/
.btn-effect_s-open .btn-effect_inner{
	position: relative;
  z-index: 2;
}
.btn-effect_s-open .btn-effect_inner::before,
.btn-effect_s-open .btn-effect_inner::after{
	content:'';
	display: block;
	position: absolute;
	top: 0;
	width: 50%;
	height: 100%;
	background: rgba(0,0,0,0.3);
	transition: all ease-out .2s;
  z-index: -1;
}
.btn-effect_s-open .btn-effect_inner::before{left: 0;}
.btn-effect_s-open .btn-effect_inner::after{right: 0;}
.btn-effect_s-open .btn-effect_inner:hover::before{left:-50%;}
.btn-effect_s-open .btn-effect_inner:hover::after{right:-50%;}

/*
	s-open-v
	&lt;p class="btn-effect btn-effect_s-open-v"&gt;&lt;a href="#" class="btn-effect_inner"&gt;ボタン&lt;/a&gt;&lt;/p&gt;
*/
.btn-effect_s-open-v .btn-effect_inner{
	position: relative;
  z-index: 2;
}
.btn-effect_s-open-v .btn-effect_inner::before,
.btn-effect_s-open-v .btn-effect_inner::after{
	content:'';
	display: block;
	position: absolute;
	left: 0;
	width: 100%;
	height: 50%;
	background: rgba(0,0,0,0.3);
	transition: all ease-out .2s;
  z-index: -1;
}
.btn-effect_s-open-v .btn-effect_inner::before{top: 0;}
.btn-effect_s-open-v .btn-effect_inner::after{bottom: 0;}
.btn-effect_s-open-v .btn-effect_inner:hover::before{top:-50%;}
.btn-effect_s-open-v .btn-effect_inner:hover::after{bottom: -50%;}

/*
	scale-up
	&lt;p class="btn-effect btn-effect_scale-up"&gt;&lt;a href="#" class="btn-effect_inner"&gt;ボタン&lt;/a&gt;&lt;/p&gt;
*/
.btn-effect_scale-up .btn-effect_inner{
	position: relative;
  z-index: 2;
}
.btn-effect_scale-up .btn-effect_inner::before{
	content:'';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.3);
	transition: all ease-out .3s;
  transform:scale(0);
  z-index: -1;
}
.btn-effect_scale-up .btn-effect_inner:hover::before{transform:scale(1);}

/*
	scale-dowm
	&lt;p class="btn-effect btn-effect_scale-dowm"&gt;&lt;a href="#" class="btn-effect_inner"&gt;ボタン&lt;/a&gt;&lt;/p&gt;
*/
.btn-effect_scale-down .btn-effect_inner{
	position: relative;
  z-index: 2;
}
.btn-effect_scale-down .btn-effect_inner::before{
	content:'';
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.3);
	transition: all ease-out .3s;
  z-index: -1;
}
.btn-effect_scale-down .btn-effect_inner:hover::before{transform:scale(0);}

/*
	light-stream
	&lt;p class="btn-effect btn-effect_light-stream"&gt;&lt;a href="#" class="btn-effect_inner"&gt;ボタン&lt;/a&gt;&lt;/p&gt;
*/
.btn-effect_light-stream .btn-effect_inner{
	position: relative;
  z-index: 2;
}
.btn-effect_light-stream .btn-effect_inner::after {
  content: "";
  height: 300%;
  width: 100%;
  left: -100%;
  top: -100%;
	background: -webkit-linear-gradient(45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 27%,rgba(255,255,255,0.20) 39%,rgba(255,255,255,0.7) 57%,rgba(255,255,255,0) 73%,rgba(255,255,255,0) 100%);
	background: linear-gradient(45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 27%,rgba(255,255,255,0.20) 39%,rgba(255,255,255,0.7) 57%,rgba(255,255,255,0) 73%,rgba(255,255,255,0) 100%);
	position: absolute;
  pointer-events: none;
  z-index: 1;
  opacity: 0.8;
}
.btn-effect_light-stream .btn-effect_inner:hover::after {
  left: 120%;
  transition: all .5s cubic-bezier(.17,.67,.74,.95);
}

/*
	slidein-l
	&lt;p class="btn-effect btn-effect_slidein-l"&gt;&lt;a href="#" class="btn-effect_inner"&gt;ボタン&lt;/a&gt;&lt;/p&gt;
*/
.btn-effect_slidein-l .btn-effect_inner{
	position: relative;
  z-index: 2;
}
.btn-effect_slidein-l .btn-effect_inner::after {
  content: "";
  height: 100%;
  width: 100%;
  left: -100%;
  top: 0;
  position: absolute;
	background: rgba(0,0,0,0.3);
  transition: all .3s ease;
  pointer-events: none;
  z-index: -1;
}
.btn-effect_slidein-l .btn-effect_inner:hover::after {
  left: 0%;
}

/*
	slidein-r
	&lt;p class="btn-effect btn-effect_slidein-l"&gt;&lt;a href="#" class="btn-effect_inner"&gt;ボタン&lt;/a&gt;&lt;/p&gt;
*/
.btn-effect_slidein-r .btn-effect_inner{
	position: relative;
  z-index: 2;
}
.btn-effect_slidein-r .btn-effect_inner::after {
  content: "";
  height: 100%;
  width: 100%;
  right: -100%;
  top: 0;
  position: absolute;
	background: rgba(0,0,0,0.3);
  transition: all .3s ease;
  pointer-events: none;
  z-index: -1;
}
.btn-effect_slidein-r .btn-effect_inner:hover::after {
  right: 0%;
}

/*
	slide_gradient
	&lt;p class="btn-effect btn-effect_slide_gradient"&gt;&lt;a href="#" class="btn-effect_inner"&gt;ボタン&lt;/a&gt;&lt;/p&gt;
*/
.btn-effect_slide_gradient .btn-effect_inner{
	position: relative;
  z-index: 2;
}
.btn-effect_slide_gradient .btn-effect_inner::after {
  content: "";
  height: 100%;
  width: 120%;
  left: 100%;
  top: 0;
	background: -webkit-linear-gradient(left, rgba(73,139,193,0) 0%,rgba(90,170,194,1) 49%,rgba(108,201,195,1) 99%);
	background: linear-gradient(to right, rgba(73,139,193,0) 0%,rgba(90,170,194,1) 49%,rgba(108,201,195,1) 99%);
	position: absolute;
  transition: all .3s cubic-bezier(.17,.67,.74,.95);
  pointer-events: none;
  z-index: -1;
}
.btn-effect_slide_gradient .btn-effect_inner:hover::after {
  left: -20%;
}

/*
	h-motion
	&lt;p class="btn-effect btn-effect_h-motion"&gt;&lt;a href="#" class="btn-effect_inner"&gt;&lt;span class="btn-effect_item"&gt;&lt;/span&gt;ボタン&lt;/a&gt;&lt;/p&gt;
*/
.btn-effect_h-motion {
}
.btn-effect_h-motion .btn-effect_inner .btn-effect_item {
  transform: translateY(-50%) translateX(-50%);
  position: absolute;
  top: 50%;
  left: 50%;
  pointer-events: none;
}
.btn-effect_h-motion .btn-effect_inner .btn-effect_item:before {
  position: relative;
  content: '';
  display: block;
  margin-top: 100%;
  pointer-events: none;
}
.btn-effect_h-motion .btn-effect_inner .btn-effect_item:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 50%;
  pointer-events: none;
}
.btn-effect_h-motion .btn-effect_inner:hover  .btn-effect_item {
  -webkit-animation: h-motion-anim-out 0.75s;
  animation: h-motion-anim-out 0.75s;
}
.btn-effect_h-motion .btn-effect_inner:hover  .btn-effect_item:after {
  -webkit-animation: h-motion-anim-out-pseudo 0.75s;
  animation: h-motion-anim-out-pseudo 0.75s;
}
@-webkit-keyframes h-motion-anim-out {
  0% {width: 0%;}
  100% {width: 100%;}
}
@keyframes anim-out {
  0% {width: 0%;}
  100% {width: 100%;}
}
@-webkit-keyframes h-motion-anim-out-pseudo {
  0% {background: rgba(0, 0, 0, 0.25);}
  100% {background: transparent;}
}
@keyframes h-motion-anim-out-pseudo {
  0% {background: rgba(0, 0, 0, 0.25);}
  100% {background: transparent;}
}

/*
	line-motion
	&lt;p class="btn-effect btn-effect_line-motion"&gt;&lt;a href="#" class="btn-effect_inner"&gt;ボタン&lt;/a&gt;&lt;/p&gt;
*/
.btn-effect_line-motion::before,
.btn-effect_line-motion::after{
	background: rgba(0,0,0,0.3);
	content:'';
	position: absolute;
	top:0;
	left: 0;
	width: 100%;
	height: 1px;
	transform: translateX(-100%);
  transition: all ease .3s;
  z-index: 2;
}
.btn-effect_line-motion::after{
	top:auto;
	left: auto;
	right: 0;
	bottom:0;
	transform: translateX(100%);
}
.btn-effect_line-motion .btn-effect_inner{
	display: block;
	position: relative;
}
.btn-effect_line-motion .btn-effect_inner::before,
.btn-effect_line-motion .btn-effect_inner::after{
	background: rgba(0,0,0,0.3);
	content:'';
	position: absolute;
	right: 0;
	bottom:0;
	width: 1px;
	height: 100%;
	transform: translateY(-100%);
  transition: all ease .3s;
  z-index: 2;
}
.btn-effect_line-motion .btn-effect_inner::after{
	top:0;
	left: 0;
	right: auto;
	bottom:auto;
	transform: translateY(100%);
}
.btn-effect_line-motion .btn-effect_inner:hover::before,
.btn-effect_line-motion .btn-effect_inner:hover::after,
.btn-effect_line-motion:hover::before,
.btn-effect_line-motion:hover::after{
	transform: translate(0,0);
}

/*
	line-motion-in
	&lt;p class="btn-effect btn-effect_line-motion-in"&gt;&lt;a href="#" class="btn-effect_inner"&gt;ボタン&lt;/a&gt;&lt;/p&gt;
*/
.btn-effect_line-motion-in::before,
.btn-effect_line-motion-in::after{
	background: rgba(0,0,0,0.5);
	content:'';
	position: absolute;
	top:5px;
	left: 0;
	width: 100%;
	height: 1px;
	transform: translateX(-100%);
  transition: all ease .3s;
  z-index: 2;
}
.btn-effect_line-motion-in::after{
	top:auto;
	left: auto;
	right: 0;
	bottom:5px;
	transform: translateX(100%);
}
.btn-effect_line-motion-in .btn-effect_inner{
	display: block;
	position: relative;
}
.btn-effect_line-motion-in .btn-effect_inner::before,
.btn-effect_line-motion-in .btn-effect_inner::after{
	background: rgba(0,0,0,0.5);
	content:'';
	position: absolute;
	right: 5px;
	bottom:0;
	width: 1px;
	height: 100%;
	transform: translateY(-100%);
  transition: all ease .3s;
  z-index: 2;
}
.btn-effect_line-motion-in .btn-effect_inner::after{
	top:0;
	left: 5px;
	right: auto;
	bottom:auto;
	transform: translateY(100%);
}
.btn-effect_line-motion-in .btn-effect_inner:hover::before,
.btn-effect_line-motion-in .btn-effect_inner:hover::after,
.btn-effect_line-motion-in:hover::before,
.btn-effect_line-motion-in:hover::after{
	transform: translate(0,0);
}


/* ---------------------------------------------------------------------------
	.txt-effect
--------------------------------------------------------------------------- */
/*
	txt-effect_color
	&lt;p class="btn-effect_color"&gt;&lt;a href="#"&gt;テキスト&lt;/a&gt;&lt;/p&gt;
*/
.txt-effect_color a:hover{
	color: #FF0000;
}
/*
	txt-effect_ls
	&lt;p class="btn-effect_ls"&gt;&lt;a href="#"&gt;テキスト&lt;/a&gt;&lt;/p&gt;
*/
.txt-effect_ls a:hover{
	letter-spacing: 0.2em;
}
/*
	txt-effect_line-u
	&lt;p class="txt-effect_line-u"&gt;&lt;a href="#"&gt;テキスト&lt;/a&gt;&lt;/p&gt;
*/
.txt-effect_line-u a{
	position: relative;
	display: inline-block;
}
.txt-effect_line-u a::after{
	content:'';
	display: block;
	position: absolute;
	bottom:0;
	width: 0%;
	height: 1px;
	background: #000;
	transition:all ease .3s;
}
.txt-effect_line-u a:hover::after{width: 100%;}
/*
	txt-effect_line-uc
	&lt;p class="txt-effect_line-uc"&gt;&lt;a href="#"&gt;テキスト&lt;/a&gt;&lt;/p&gt;
*/
.txt-effect_line-uc a{
	position: relative;
	display: inline-block;
}
.txt-effect_line-uc a::after{
	content:'';
	display: block;
	position: absolute;
	bottom:0;
	width: 100%;
	height: 1px;
	background: #000;
	transform: scaleX(0);
	transition:all ease .3s;
}
.txt-effect_line-uc a:hover::after{transform: scaleX(1);}
/*
	txt-effect_line
	&lt;p class="txt-effect_line"&gt;&lt;a href="#"&gt;テキスト&lt;/a&gt;&lt;/p&gt;
*/
.txt-effect_line a{
	position: relative;
	display: inline-block;
}
.txt-effect_line a::after,
.txt-effect_line a::before{
	content:'';
	display: block;
	position: absolute;
	bottom:0;
	width: 0%;
	height: 1px;
	background: #000;
	transition:all ease .3s;
}
.txt-effect_line a::before{
	right:0;
	top:0;
	left: auto;
	bottom:auto;
}
.txt-effect_line a:hover::after,
.txt-effect_line a:hover::before{width: 100%;}



/* ---------------------------------------------------------------------------
	.animation-effect
--------------------------------------------------------------------------- */
/*
	animation-effect_rotaion
	&lt;p class="animation-effect_rotaion"&gt;回転&lt;/p&gt;
*/
.animation-effect_rotaion {
	-webkit-animation: effect_rotaion-anim 3s linear infinite;
	animation: effect_rotaion-anim 3s linear infinite;
}
@-webkit-keyframes effect_rotaion-anim {
	0% {-webkit-transform: rotate(0deg);}
	100% {-webkit-transform: rotate(360deg);}
}
@keyframes effect_rotaion-anim {
	0% {transform: rotate(0deg);}
	100% {transform: rotate(360deg);}
}

/*
	animation-effect_light-stream
	&lt;p class="animation-effect_light-stream"&gt;光を走らせる&lt;/p&gt;
*/
.animation-effect_light-stream .animation_inner{
	position: relative;
  z-index: 2;
  overflow: hidden;
}
.animation-effect_light-stream .animation_inner::after {
  content: "";
  height: 300%;
  width: 100%;
  left: -100%;
  top: -100%;
	background: -webkit-linear-gradient(45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 27%,rgba(255,255,255,0.20) 39%,rgba(255,255,255,0.7) 57%,rgba(255,255,255,0) 73%,rgba(255,255,255,0) 100%);
	background: linear-gradient(45deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 27%,rgba(255,255,255,0.20) 39%,rgba(255,255,255,0.7) 57%,rgba(255,255,255,0) 73%,rgba(255,255,255,0) 100%);
	position: absolute;
  pointer-events: none;
  z-index: 1;
	-webkit-animation: effect_light-stream-anim 3s cubic-bezier(.17,.67,.74,.95) infinite;
	animation: effect_light-stream-anim 3s cubic-bezier(.17,.67,.74,.95) infinite;
}
@-webkit-keyframes effect_light-stream-anim {
	0% {left:-100%;}
	80% {left:-100%;}
	100% {left:120%;}
}
@keyframes effect_light-stream-anim {
	0% {left:-100%;}
	80% {left:-100%;}
	100% {left:120%;}
}

/*
	animation-effect_rotaion
	&lt;p class="animation-effect_rotaion"&gt;浮く&lt;/p&gt;
*/
.animation-effect_float {
	-webkit-animation: effect_float-anim 3s cubic-bezier(.5,.01,.48,1) infinite;
	animation: effect_float-anim 3s cubic-bezier(.5,.01,.48,1) infinite;
}
@-webkit-keyframes effect_float-anim {
	0% {-webkit-transform: translateY(0);}
	50% {-webkit-transform: translateY(50%);}
	100% {-webkit-transform: translateY(0);}
}
@keyframes effect_float-anim {
	0% {-webkit-transform: translateY(0);}
	50% {-webkit-transform: translateY(50%);}
	100% {-webkit-transform: translateY(0);}
}

/*
	animation-effect_backscale
	&lt;p class="animation-effect_outline"&gt;背景のscaleアニメーション&lt;/p&gt;
*/
.animation-effect_backscale{
	overflow: visible;
	position: relative;
}
.animation-effect_backscale:hover::after {
	content:'';
	width: 100%;
	height: 100%;
	top: 0;
	left:0;
	background: #82190f;
	position: absolute;
  pointer-events: none;
  z-index: -2;
	-webkit-animation: effect_backscale-anim 2s cubic-bezier(.5,.01,.48,1) -1s infinite;
	animation: effect_backscale-anim 2s cubic-bezier(.5,.01,.48,1) -1s infinite;
}
@-webkit-keyframes effect_backscale-anim {
	0% {transform:scaleY(0) scaleX(0);opacity:1;}
	100% {transform:scaleY(1.8) scaleX(1.3);opacity:0;}
}
@keyframes effect_backscale-anim {
	0% {transform:scaleY(0) scaleX(0);opacity:1;}
	100% {transform:scaleY(1.8) scaleX(1.2);opacity:0;}
}

/*
	animation-effect_rundown
	&lt;p class="animation-effect_rundown"&gt;走る&lt;/p&gt;
*/
.animation-effect_rundown {
	-webkit-animation: effect_rundown-anim 2s linear infinite;
	animation: effect_rundown-anim 2s linear infinite;
}
@-webkit-keyframes effect_rundown-anim {
	0% {-webkit-transform: translateY(0);opacity:0;}
	10% {-webkit-transform: translateY(10px);opacity:1;}
	40% {-webkit-transform: translateY(30px);opacity:0;}
	100% {-webkit-transform: translateY(30px);opacity:0;}
}
@keyframes effect_rundown-anim {
	0% {-webkit-transform: translateY(0);opacity:0;}
	10% {-webkit-transform: translateY(10px);opacity:1;}
	40% {-webkit-transform: translateY(30px);opacity:0;}
	100% {-webkit-transform: translateY(30px);opacity:0;}
}

@-ms-keyframes effect_scroll-anim {
	0% {-ms-transform: translateY(0) rotate(45deg);opacity:0;}
	10% {-ms-transform: translateY(10px) rotate(45deg);opacity:1;}
	40% {-ms-transform: translateY(20px) rotate(45deg);opacity:0;}
	100% {-ms-transform: translateY(20px) rotate(45deg);opacity:0;}
}
@-webkit-keyframes effect_scroll-anim {
	0% {-webkit-transform: translateY(0) rotate(45deg);opacity:0;}
	10% {-webkit-transform: translateY(10px) rotate(45deg);opacity:1;}
	40% {-webkit-transform: translateY(20px) rotate(45deg);opacity:0;}
	100% {-webkit-transform: translateY(20px) rotate(45deg);opacity:0;}
}
@keyframes effect_scroll-anim {
	0% {-webkit-transform: translateY(0) rotate(45deg);opacity:0;}
	10% {-webkit-transform: translateY(10px) rotate(45deg);opacity:1;}
	40% {-webkit-transform: translateY(20px) rotate(45deg);opacity:0;}
	100% {-webkit-transform: translateY(20px) rotate(45deg);opacity:0;}
}


</pre></body></html>