@charset "UTF-8";
/* CSS Document */

/*======================================
submit reflection
/*======================================*/
@keyframes reflection {
  0% { transform: scale(0) rotate(45deg); opacity: 0; }
  85% { transform: scale(0) rotate(45deg); opacity: 0.5; }
  86% { transform: scale(4) rotate(45deg); opacity: 1; }
  100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
.reflection{
  position: relative;
  overflow :hidden;
}
.reflection:after {
  position: absolute;
  content: "";
  height      :100%;
  width       :30px;
  top         :-180px;
  left        :0;
  background-color: rgba(255, 255, 255, .5);
  opacity     :0;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  animation: reflection 4s ease-in-out infinite;
  -webkit-animation: reflection 4s ease-in-out infinite;
}
/*======================================
scroll fadein
/*======================================*/
.fadein {
  opacity: 1;
  transition: all 1s ease;
}
.fadeout {
  opacity: 0;
  transition: all 1s ease;
}
/*======================================
common fadein
/*======================================*/
@keyframes commonFadeIn {
   0% {  opacity: 0 }
 100% {  opacity: 1 }
}
@keyframes commonFadeOut {
   0% {  opacity: 1 }
 100% {  opacity: 0 }
}
@keyframes commonSlideInY {
    0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes commonSlideInXR {
    0% { opacity: 0; transform: translateX(-30px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes commonSlideInXL {
    0% { opacity: 0; transform: translateX(30px); }
  100% { opacity: 1; transform: translateX(0); }
}
/*======================================
worry fadein
/*======================================*/
@keyframes worrySlideIn {
    0% { opacity: 0; transform: translateX(50px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes worryDescSlideIn {
    0% { opacity: 0; transform: translateY(50px); }
  100% { opacity: 1; transform: translateY(0); }
}
/*out*/
#worry .title-img,
#worry ol > li,
#worry .desc{
  opacity: 0;
}
/*in*/
#worry.in .title-img {
 animation: commonFadeIn .5s ease-in-out 0s 1 forwards;
}
#worry.in ol > li:nth-of-type(1) {
  animation: worrySlideIn 0.5s ease-in-out 0.5s 1 forwards;
}
#worry.in ol > li:nth-of-type(2) {
  animation: worrySlideIn 0.5s ease-in-out 1s 1 forwards;
}
#worry.in ol > li:nth-of-type(3) {
  animation: worrySlideIn 0.5s ease-in-out 1.5s 1 forwards;
}
#worry.in ol > li:nth-of-type(4) {
  animation: worrySlideIn 0.5s ease-in-out 2s 1 forwards;
}
#worry.in .desc{
  animation: worryDescSlideIn 1s ease-in-out 2.5s 1 forwards;
}
/*======================================
schedule-A fadein
/*======================================*/
/*out*/
#schedule-A .schedule-copy{
  opacity: 0;
}
/*in*/
#schedule-A.in .schedule-copy{
  animation: commonFadeIn 1s ease-in-out 0s 1 forwards;
}
/*======================================
lede
/*======================================*/
@keyframes ledeTitleSlideIn {
    0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(-500px); }
}
#lede .title-img.slide{
  animation: ledeTitleSlideIn 1s ease-in-out 0s 1 forwards;
}
/*======================================
present
/*======================================*/
@keyframes presentSlideIn {
    0% { opacity: 0; transform: translateX(50px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes presentDescSlideIn {
    0% { opacity: 0; transform: translateY(50px); }
  100% { opacity: 1; transform: translateY(0); }
}
/*out*/
#present .present-img, #present .present-title{
  opacity: 0;
}
#present li h3 div{
  opacity: 0;
  transform: translateX(50px);
}
#present li .desc{
  opacity: 0;
  transform: translateY(50px);
}
/*in*/
#present li.in .present-img, #present li.in .present-title{
  animation: commonFadeIn 1s ease-in-out 0s 1 forwards;
}
#present li.in h3 div:nth-of-type(1) {
  animation: presentSlideIn 0.7s ease-in-out .5s 1 forwards;
}
#present li.in h3 div:nth-of-type(2) {
  animation: presentSlideIn 0.7s ease-in-out 1s 1 forwards;
}
#present li.in h3 div:nth-of-type(3) {
  animation: presentSlideIn 0.7s ease-in-out 1.5s 1 forwards;
}
#present li.in .desc {
  animation: presentDescSlideIn 1s ease-in-out 2s 1 forwards;
}
/*======================================
voice fadein
/*======================================*/
@keyframes voiceSlideIn {
    0% { opacity: 0; transform: translateX(-30px) rotate(-7deg); }
  100% { opacity: 1; transform: translateX(0) rotate(-7deg); }
}
@keyframes voiceFadeIn {
    0% { opacity: 0; transform: translateY(15px); }
  100% { opacity: 1; transform: translateY(0); }
}
/*out*/
.voice-CMN .recommend h4 {
  opacity: 0;
  transform: translateX(-30px) rotate(-7deg);
}
.voice-CMN .recommend .desc{
  opacity: 0;
  transform: translateY(15px);
}
/*in*/
.voice-CMN .in .recommend h4 {
  animation: voiceSlideIn 0.5s ease-in-out 0s 1 forwards;
}
.voice-CMN .in .recommend .desc {
  animation: voiceFadeIn 0.7s ease-in-out .3s 1 forwards;
}
/*======================================
change fadein
/*======================================*/
#change li{
  opacity: 0;
  transform: translateY(30px);
}
#change li .before:before,#change li .after:before{
  opacity: 0;
}
#change li.in{
    animation: commonSlideInY 1s ease-in-out 0s 1 forwards;
}
#change li.in{
    animation: commonSlideInY 1s ease-in-out 0s 1 forwards;
}
#change li.in .before:before{
    animation: commonFadeIn 1s ease-in-out 0.5s 1 forwards;
}
#change li.in .after:before{
    animation: commonFadeIn 1s ease-in-out 1s 1 forwards;
}
/*======================================
voice fadein
/*======================================*/
@keyframes voiceSlideIn {
    0% { opacity: 0; transform: translateX(-30px) rotate(-7deg); }
  100% { opacity: 1; transform: translateX(0) rotate(-7deg); }
}
@keyframes voiceFadeIn {
    0% { opacity: 0; transform: translateY(15px); }
  100% { opacity: 1; transform: translateY(0); }
}
/*out*/
.voice-CMN .recommend h4 {
  opacity: 0;
  transform: translateX(-30px) rotate(-7deg);
}
.voice-CMN .recommend .desc{
  opacity: 0;
  transform: translateY(15px);
}
/*in*/
.voice-CMN .in .recommend h4 {
  animation: voiceSlideIn 0.5s ease-in-out 0s 1 forwards;
}
.voice-CMN .in .recommend .desc {
  animation: voiceFadeIn 0.7s ease-in-out .3s 1 forwards;
}
/*======================================
message fadein
/*======================================*/
/*out*/
#message .right .img-01,
#message .right .img-02,
#message .right .img-03,
#message .left .img-04{
  opacity: 0;
}
#message .right .img-01{
  transform: translateX(-30px)
}
#message .right .img-02,
#message .left .img-04{
  transform: translateY(-30px)
}
#message .right .img-03{
  transform: translateX(-30px)
}
#message .right .img-01.in{
    animation: commonSlideInXR 1s ease-in-out 0s 1 forwards;
}
#message .right .img-02.in{
  animation: commonSlideInY 1s ease-in-out 0s 1 forwards;
}
#message .right .img-03.in{
    animation: commonSlideInXL 1s ease-in-out 0s 1 forwards;
}
#message .left .img-04.in{
  animation: commonSlideInY 1s ease-in-out 0s 1 forwards;
}