/* 荳九°繧� */
.fadeupeffect {
opacity:0;
}
.fadeupeffect2 {
opacity:0;
}
.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);
}
}
/*========= 豬√ｌ繧九ユ繧ｭ繧ｹ繝� ===============*/
/*蜈ｨ蜈ｱ騾�*/
.slide-in4 {
overflow: hidden;
display: inline-block;
}
.slide-in_inner4 {
display: inline-block;
}
/*蟾ｦ蜿ｳ縺ｮ繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ*/
.leftAnime4{
opacity: 0;/*莠句燕縺ｫ騾城℃0縺ｫ縺励※豸医＠縺ｦ縺翫￥*/
}
.slideAnimeLeftRight4 {
animation-name:slideTextX1004;
animation-duration:0.8s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes slideTextX1004 {
from {
transform: translateX(-100%); /*隕∫ｴ�繧貞ｷｦ縺ｮ譫�螟悶↓遘ｻ蜍�*/
opacity: 0;
}
to {
transform: translateX(0);/*隕∫ｴ�繧貞�縺ｮ菴咲ｽｮ縺ｫ遘ｻ蜍�*/
opacity: 1;
}
}
.slideAnimeRightLeft4 {
animation-name:slideTextX-1004;
animation-duration:0.8s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes slideTextX-1004 {
from {
transform: translateX(100%);/*隕∫ｴ�繧貞承縺ｮ譫�螟悶↓遘ｻ蜍�*/
opacity: 0;
}
to {
transform: translateX(0);/*隕∫ｴ�繧貞�縺ｮ菴咲ｽｮ縺ｫ遘ｻ蜍�*/
opacity: 1;
}
}
.effectslide {
opacity:0;
}
/*========= 豬√ｌ繧九ユ繧ｭ繧ｹ繝� ===============*/
/*蜈ｨ蜈ｱ騾�*/
.slide-in {
overflow: hidden;
display: inline-block;
}
.slide-in_inner2 {
display: inline-block;
}
/* 荳贋ｸ九�繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ*/
.upAnime{
opacity: 0;/* 莠句燕縺ｫ騾城℃0 縺ｫ縺励※豸医＠縺ｦ縺翫￥*/
}
.slideAnimeDownUp {
animation-name:slideTextY1002;
animation-duration:0.8s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes slideTextY1002 {
from {
transform: translateY(100%);/* 隕∫ｴ�繧剃ｸ翫�譫�螟悶↓遘ｻ蜍�*/
opacity: 0;
}
to {
transform: translateY(0);/* 隕∫ｴ�繧貞�縺ｮ菴咲ｽｮ縺ｫ遘ｻ蜍�*/
opacity: 1;
}
}
.slideAnimeUpDown {
animation-name:slideTextY-1002;
animation-duration:0.8s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes slideTextY-1002 {
from {
transform: translateY(-100%);/* 隕∫ｴ�繧剃ｸ九�譫�螟悶↓遘ｻ蜍�*/
opacity: 0;
}
to {
transform: translateY(0);/* 隕∫ｴ�繧貞�縺ｮ菴咲ｽｮ縺ｫ遘ｻ蜍�*/
opacity: 1;
}
}
span.smoothText {
overflow: hidden;
height:auto;
display: block;
}
/* 繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ縺ｧ蛯ｾ譁懊′縺､縺�※縺�ｋ譁�ｭ怜�繧呈ｰｴ蟷ｳ縺ｫ謌ｻ縺�*/
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);
}
.slide-in {
overflow: hidden;
display: inline-block;
}
.slide-in_inner {
display: inline-block;
}
/* 荳贋ｸ九�繧｢繝九Γ繝ｼ繧ｷ繝ｧ繝ｳ*/
.downAnime{
opacity: 0;/* 莠句燕縺ｫ騾城℃0 縺ｫ縺励※豸医＠縺ｦ縺翫￥*/
}
.slideAnimeDownUp {
animation-name:slideTextY100;
animation-duration:0.8s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes slideTextY100 {
from {
transform: translateY(100%);/* 隕∫ｴ�繧剃ｸ翫�譫�螟悶↓遘ｻ蜍�*/
opacity: 0;
}
to {
transform: translateY(0);/* 隕∫ｴ�繧貞�縺ｮ菴咲ｽｮ縺ｫ遘ｻ蜍�*/
opacity: 1;
}
}
.slideAnimeUpDown {
animation-name:slideTextY-100;
animation-duration:0.8s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes slideTextY-100 {
from {
transform: translateY(-100%);/* 隕∫ｴ�繧剃ｸ九�譫�螟悶↓遘ｻ蜍�*/
opacity: 0;
}
to {
transform: translateY(0);/* 隕∫ｴ�繧貞�縺ｮ菴咲ｽｮ縺ｫ遘ｻ蜍�*/
opacity: 1;
}
}
.tateboxeffect {
height:0px;
opacity:0;
}
.tateanime {
animation-name:tateslideimg;
animation-duration:1.6s;
animation-direction: alternate;
animation-fill-mode:forwards;
}
.delay400 {
animation-delay: 200ms;
}
.delay600 {
animation-delay: 400ms;
}
.delay800 {
animation-delay: 600ms;
}
@keyframes tateslideimg {
0% {
height:0px;
opacity:0;
}
40% {
height:320px;
opacity:0.1;
}
50% {
height:350px;
opacity:0.1;
}
70% {
height:400px;
opacity:0.1;
}
100% {
height:477px;
opacity:1;
}
}
.yokoeffect {
width:0;
opacity:0;
}
.yokoanime {
animation-name:yokoslideimg;
animation-duration:1.6s;
animation-direction: alternate;
animation-fill-mode:forwards;
}
@keyframes yokoslideimg {
0% {
width:0;
opacity:0;
}
20% {
width:270px;
opacity:0.1;
}
50% {
width:300px;
opacity:0.1;
}
70% {
width:350px;
opacity:0.1;
}
100% {
width:400px;
opacity:1;
}
}
.zoomeffect {
opacity:0;
}
.zoomIn{
animation-name:zoomInAnime;
animation-duration:0.4s;
animation-fill-mode:forwards;
}
@keyframes zoomInAnime{
from {
transform: scale(0.2);
}
to {
transform: scale(1);
opacity:1.0;
}
}
.zoomeffect2 {
opacity:0;
}
.zoomIn2{
animation-name:zoomInAnime2;
animation-duration:0.4s;
animation-delay:1s;
animation-fill-mode:forwards;
}
@keyframes zoomInAnime2{
from {
transform: scale(0.2);
}
to {
transform: scale(1);
opacity:1.0;
}
}
.effectfade {
opacity:0;
}
.fadein {
animation-name:fadeinanime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeinanime {
from {
opacity:0;
}
to {
opacity:1;
}
}
.imgslide {
animation-name:imgslideanime;
animation-duration:1s;
animation-fill-mode:forwards;
height:0%;
opacity:0;
}
@keyframes imgslideanime{
from {
height:0%;
opacity:0;
}
to {
height:100%;
opacity:1;
}
}
.bgextend{
animation-name:bgextendAnimeBase;
animation-duration:1s;
animation-fill-mode:forwards;
position: relative;
overflow: hidden;/*縲縺ｯ縺ｿ蜃ｺ縺溯牡隕∫ｴ�繧帝國縺吶*/
opacity:0;
}
@keyframes bgextendAnimeBase{
from {
opacity:0;
}
to {
opacity:1;
}
}
/*荳ｭ縺ｮ隕∫ｴ�*/
.bgappear{
animation-name:bgextendAnimeSecond;
animation-duration:1s;
animation-delay: 0.6s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes bgextendAnimeSecond{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/*蟾ｦ縺九ｉ蜿ｳ*/
.bgLRextend::before{
animation-name:bgLRextendAnime;
animation-duration:1s;
animation-fill-mode:forwards;
content: "";
position: absolute;
width: 100%;
height: 150%;
background-color: #ce3131;/*莨ｸ縺ｳ繧玖レ譎ｯ濶ｲ縺ｮ險ｭ螳�*/
}
@keyframes bgLRextendAnime{
0% {
transform-origin:left;
transform:scaleX(0);
}
50% {
transform-origin:left;
transform:scaleX(1);
}
50.001% {
transform-origin:right;
}
100% {
transform-origin:right;
transform:scaleX(0);
}
}
/* 繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ繧偵＠縺溘ｉ蜃ｺ迴ｾ縺吶ｋ隕∫ｴ�縺ｫ縺ｯ縺倥ａ縺ｫ騾城℃0繧呈欠螳壹*/
.bgappearTrigger,
.bgLRextendTrigger{
opacity: 0;
}
.bgextend2{
animation-name:bgextendAnimeBase2;
animation-duration:1s;
animation-fill-mode:forwards;
position: relative;
overflow: hidden;/*縲縺ｯ縺ｿ蜃ｺ縺溯牡隕∫ｴ�繧帝國縺吶*/
opacity:0;
}
@keyframes bgextendAnimeBase2{
from {
opacity:0;
}
to {
opacity:1;
}
}
/*荳ｭ縺ｮ隕∫ｴ�*/
.bgappear2{
animation-name:bgextendAnimeSecond2;
animation-duration:1s;
animation-delay: 0.6s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes bgextendAnimeSecond2{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/*蟾ｦ縺九ｉ蜿ｳ*/
.bgLRextend2::before{
animation-name:bgLRextendAnime2;
animation-duration:1s;
animation-fill-mode:forwards;
content: "";
position: absolute;
top:-50%;
left:-5%;
width: 110%;
height: 200%;
background-color: #ce3131;/*莨ｸ縺ｳ繧玖レ譎ｯ濶ｲ縺ｮ險ｭ螳�*/
}
@keyframes bgLRextendAnime2{
0% {
transform-origin:left;
transform:scaleX(0);
}
50% {
transform-origin:left;
transform:scaleX(1);
}
50.001% {
transform-origin:right;
}
100% {
transform-origin:right;
transform:scaleX(0);
}
}
/* 繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ繧偵＠縺溘ｉ蜃ｺ迴ｾ縺吶ｋ隕∫ｴ�縺ｫ縺ｯ縺倥ａ縺ｫ騾城℃0繧呈欠螳壹*/
.bgappearTrigger2,
.bgLRextendTrigger2{
opacity: 0;
}
/*荳ｭ縺ｮ隕∫ｴ�*/
.bgappear3{
animation-name:bgextendAnimeSecond3;
animation-duration:1s;
animation-delay: 0.6s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes bgextendAnimeSecond3{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/*蟾ｦ縺九ｉ蜿ｳ*/
.bgLRextend3::before{
animation-name:bgLRextendAnime3;
animation-duration:1s;
animation-fill-mode:forwards;
content: "";
position: absolute;
/* top:-50%; */
/* left:-5%; */
width: 110%;
height: 200%;
background-color: #ce3131;/*莨ｸ縺ｳ繧玖レ譎ｯ濶ｲ縺ｮ險ｭ螳�*/
}
@keyframes bgLRextendAnime3{
0% {
transform-origin:left;
transform:scaleX(0);
}
50% {
transform-origin:left;
transform:scaleX(1);
}
50.001% {
transform-origin:right;
}
100% {
transform-origin:right;
transform:scaleX(0);
}
}
/* 繧ｹ繧ｯ繝ｭ繝ｼ繝ｫ繧偵＠縺溘ｉ蜃ｺ迴ｾ縺吶ｋ隕∫ｴ�縺ｫ縺ｯ縺倥ａ縺ｫ騾城℃0繧呈欠螳壹*/
.bgappearTrigger3,
.bgLRextendTrigger3{
opacity: 0;
}
@media screen and (max-width: 500px) {
@keyframes tateslideimg {
0% {
height:0px;
opacity:0;
}
40% {
height:150px;
opacity:0.1;
}
50% {
height:200px;
opacity:0.1;
}
70% {
height:220px;
opacity:0.1;
}
100% {
height:240px;
opacity:1;
}
}
.delay400 {
animation-delay: 200ms;
}
.delay600 {
animation-delay: 400ms;
}
.delay800 {
animation-delay: 600ms;
}
.delay1000 {
animation-delay: 800ms;
}
}