@charset "Shift_JIS";

/* **************************************************

Name: animation.css

Description: Main CSS

Create: 2023.01.26
Update: 2023.01.26

***************************************************** */


/* mainVisual
=========================================================================================== */
@keyframes leftToRight {
	from {
        left: -100%;
		opacity: 0;
	}
	to {
        left: 0;
		opacity: 1;
	}
}
@keyframes bottomToTop {
	from {
        top: 30px;
		opacity: 0;
	}
	to {
        top: 0;
		opacity: 1;
	}
}
@keyframes opacity0to100 {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.mainVisual .mvText {
  opacity: 0;
	animation-name: opacity0to100;
	animation-duration: 1.0s;
	animation-delay: 0.9s;
	animation-timing-function: cubic-bezier(0.4, 0.15, 0.2, 1);
	animation-fill-mode: forwards; 
}


/* block
=========================================================================================== */
@keyframes leftToRightBox {
	from {
        left: -100px;
		opacity: 0;
	}
	to {
        left: 0;
		opacity: 1;
	}
}
@keyframes leftToRightText {
	from {
        left: -20px;
		opacity: 0;
	}
	to {
        left: 0;
		opacity: 1;
	}
}
@keyframes rightToLeftBox {
	from {
        right: -100px;
		opacity: 0;
	}
	to {
        right: 0;
		opacity: 1;
	}
}
@keyframes rightToLeftText {
	from {
        right: -20px;
		opacity: 0;
	}
	to {
        right: 0;
		opacity: 1;
	}
}
.cBlockLeft .textBox,.cBlockLeft .textBox .titleType01,.cBlockLeft .textBox .textType01,.cBlockLeft .colCell {
    position: relative;
    opacity: 0;
}
.cBlockLeft .textBox.isShow {
	animation-name: leftToRightBox;
	animation-duration: 1.0s;
	animation-delay: 0.3s;
	animation-timing-function: cubic-bezier(0.4, 0.15, 0.2, 1);
	animation-fill-mode: forwards;
}
.cBlockLeft .textBox.isShow .titleType01 {
	animation-name: leftToRightText;
	animation-duration: 1.0s;
	animation-delay: 0.9s;
	animation-timing-function: cubic-bezier(0.4, 0.15, 0.2, 1);
	animation-fill-mode: forwards;
}
.cBlockLeft .textBox.isShow .textType01 {
	animation-name: leftToRightText;
	animation-duration: 1.0s;
	animation-delay: 1.2s;
	animation-timing-function: cubic-bezier(0.4, 0.15, 0.2, 1);
	animation-fill-mode: forwards;
}
.cBlockLeft .colCell.isShow {
	animation-name: rightToLeftBox;
	animation-duration: 1.0s;
	animation-delay: 0.9s;
	animation-timing-function: cubic-bezier(0.4, 0.15, 0.2, 1);
	animation-fill-mode: forwards;
}

.cBlockRight .textBox,.cBlockRight .textBox .titleType01,.cBlockRight .textBox .textType01,.cBlockRight .colCell {
    position: relative;
    opacity: 0;
}
.cBlockRight .textBox.isShow {
	animation-name: rightToLeftBox;
	animation-duration: 1.0s;
	animation-delay: 0.3s;
	animation-timing-function: cubic-bezier(0.4, 0.15, 0.2, 1);
	animation-fill-mode: forwards;
}
.cBlockRight .textBox.isShow .titleType01 {
	animation-name: rightToLeftText;
	animation-duration: 1.0s;
	animation-delay: 0.9s;
	animation-timing-function: cubic-bezier(0.4, 0.15, 0.2, 1);
	animation-fill-mode: forwards;
}
.cBlockRight .textBox.isShow .textType01 {
	animation-name: rightToLeftText;
	animation-duration: 1.0s;
	animation-delay: 1.2s;
	animation-timing-function: cubic-bezier(0.4, 0.15, 0.2, 1);
	animation-fill-mode: forwards;
}
.cBlockRight .colCell.isShow {
	animation-name: leftToRightBox;
	animation-duration: 1.0s;
	animation-delay: 0.9s;
	animation-timing-function: cubic-bezier(0.4, 0.15, 0.2, 1);
	animation-fill-mode: forwards;
}
@media screen and (max-width: 767px) {
    .cBlockLeft .colCell.isShow {
        animation-name: leftToRightBox;
        animation-duration: 1.0s;
        animation-delay: 0.3s;
        animation-timing-function: cubic-bezier(0.4, 0.15, 0.2, 1);
        animation-fill-mode: forwards;
    }
    .cBlockRight .colCell.isShow {
        animation-name: rightToLeftBox;
        animation-duration: 1.0s;
        animation-delay: 0.3s;
        animation-timing-function: cubic-bezier(0.4, 0.15, 0.2, 1);
        animation-fill-mode: forwards;
    }
}


/* recommend
=========================================================================================== */
@keyframes opacity100 {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
.recommendArea,.recommendInner,.recommendList > li {
    position: relative;
    opacity: 0;
}
.recommendArea.isShow {
	animation-name: bottomToTop;
	animation-duration: 1.0s;
	animation-delay: 0.3s;
	animation-timing-function: cubic-bezier(0.4, 0.15, 0.2, 1);
	animation-fill-mode: forwards;
}
.recommendArea.isShow .recommendInner {
	animation-name: opacity100;
	animation-duration: 1.0s;
	animation-delay: 0.6s;
	animation-timing-function: cubic-bezier(0.4, 0.15, 0.2, 1);
	animation-fill-mode: forwards;
}
.recommendList > li.isShow {
	animation-name: bottomToTop;
	animation-duration: 1.0s;
	animation-delay: 0.6s;
	animation-timing-function: cubic-bezier(0.4, 0.15, 0.2, 1);
	animation-fill-mode: forwards;
}

/*
@media screen and (max-width: 767px) {
    .cb05_pla .colImg.isShow { animation-delay: 0.3s; }
}
*/