@keyframes img-item {
  0% { transform: scale(0.5); opacity: 0;}
  40% { opacity: 1;}
  100% { transform: scale(1.5); opacity: 0;}
}
.works_area .works_slide .slider-item.slick-current .img:after{ animation: img-item 1.3s ease-out;}

/* fv */
.fv_area .fv .bg-img .bg{ position: relative; overflow: hidden; background-color: #fff;}
.fv_area .fv .bg-img .bg video{ position: absolute; display: block; width: 100%; height: 100%; object-fit: cover;}
.fv_area .fv .bg-img .bg video.forPC{ display: block;}
.fv_area .fv .bg-img .bg video.forSP{ display: none;}
.fv_area button.trigger{ bottom: 120px;}
.fv_area .new_sche{ width: 100%; padding: 40px 40px; box-sizing: border-box; background-color: var(--color__black); position: absolute; bottom: 0; left: 0; margin: auto; z-index: 1;}
.fv_area .new_sche .wrap{ width: 100%; display: flex; justify-content: flex-start; align-items: center;}
.fv_area .new_sche .wrap .con_title{ width: 100%; max-width: 180px; display: flex; justify-content: flex-start; align-items: center; padding-right: 40px; border-right: 1px solid var(--color__white); box-sizing: border-box; background-color: var(--color__black); z-index: 99; position: relative;}
.fv_area .new_sche .wrap .con_title p{ font-size: 20px; font-weight: bold; color: var(--color__white);}
.fv_area .new_sche .wrap .ticker{ width: 100%; border: 0px none; background-color: transparent; padding: 0 0 0 50px; box-sizing: border-box; overflow: inherit;}
.fv_area .new_sche .wrap .ticker ul li p{ font-size: 16px; color: var(--color__white); display: inline-block;}
.fv_area .new_sche .wrap .ticker ul li .date{ width: 100%; max-width: 120px; display: inline-block; background-color: var(--color__green); border-radius: 100px; text-align: center;color: var(--color__black); font-size: 16px; font-weight: bold; padding: 0 10px; box-sizing: border-box; margin-right: 20px;}
.fv_area button.trigger{ width: 100%; left: 0; bottom: 150px; margin: auto; mix-blend-mode: difference;}
.fv_area button.trigger::before{ color: var(--color__black); background-color: var(--color__white); padding: 10px; box-sizing: border-box; font-size: 16px; font-weight: bold; width: 160px; left: 0; right: 0; bottom: 0; margin: auto; border-radius: 100px;}
@media screen and (max-width:1400px){
  .fv_area .new_sche{ padding: 10px 20px;}
  .fv_area .new_sche .wrap{ width: 100%; display: block;}
  .fv_area .new_sche .wrap .con_title{ width: 100%; max-width: 100%; display: block; padding-right: 0; border-right: 0px none; box-sizing: border-box;}
  .fv_area .new_sche .wrap .con_title p{ font-size: 20px; line-height: 1.2;}
  .fv_area .new_sche .wrap .ticker{ padding: 0 0 0 0;}
  .fv_area .new_sche .wrap .ticker ul li a{ display: flex; justify-content: flex-start; align-items: center;}
  .fv_area .new_sche .wrap .ticker ul li p{ font-size: 12px; display: block; width: 100%;}
  .fv_area .new_sche .wrap .ticker ul li .date{ max-width: 80px; font-size: 10px; padding: 0 0; margin-right: 10px;}
  .fv_area button.trigger{ width: 100%; left: 0; bottom: 120px; mix-blend-mode: difference;}
  .fv_area button.trigger::before{ color: var(--color__black); background-color: var(--color__white); padding: 6px; box-sizing: border-box; font-size: 12px; font-weight: bold; width: 120px; left: 0; right: 0; bottom: 0; margin: auto; border-radius: 100px;}
}
@media screen and (max-width:900px){
  .fv_area .new_sche{ padding: 10px 20px;}
  .fv_area .new_sche .wrap{ width: 100%; display: block;}
  .fv_area .new_sche .wrap .con_title{ width: 100%; max-width: 100%; display: block; padding-right: 0; border-right: 0px none; box-sizing: border-box;}
  .fv_area .new_sche .wrap .con_title p{ font-size: 20px; line-height: 1.2;}
  .fv_area .new_sche .wrap .ticker{ padding: 0 0 0 0; min-height: 50px !important;}
  .fv_area .new_sche .wrap .ticker ul li a{ display: block;}
  .fv_area .new_sche .wrap .ticker ul li p{ font-size: 12px; display: block; width: 100%;}
  .fv_area .new_sche .wrap .ticker ul li .date{ max-width: 80px; font-size: 10px; padding: 0 0; margin-right: 10px;}
  .fv_area button.trigger{ width: 100%; left: 0; bottom: 120px; mix-blend-mode: difference;}
  .fv_area button.trigger::before{ color: var(--color__black); background-color: var(--color__white); padding: 6px; box-sizing: border-box; font-size: 12px; font-weight: bold; width: 120px; left: 0; right: 0; bottom: 0; margin: auto; border-radius: 100px;}
}
.content{ /*background-image: url("../images/bg.jpg");*/ background-repeat: no-repeat; background-position: center; background-size: cover; background-attachment: fixed; overflow-x: hidden; padding: 0;}
/* works_area */
.works_area{ width: 100%; position: relative; padding-bottom: 160px;}
.works_area .con_title{ width: 100%; aspect-ratio: 1920 / 310; background-image: url("../images/contents_title/works.png"); background-size: cover; background-repeat: no-repeat; background-position: center; position: relative; z-index: 2;}
.works_area .works_slide{ width: 100%; max-width: 1600px; margin: auto; position: relative; z-index: 2;}
.works_area .works_slide .slider-item{ width: 100%; max-width: calc(100% / 3); aspect-ratio: 106 / 150; position: relative; margin: 0;}
.works_area .works_slide .slider-item.slick-current{ width: 100%;}
.works_area .works_slide .slider-item a{ display: flex; justify-content: center; align-items: flex-start;}
.works_area .works_slide .slider-item .img{ width: 100%; max-width: 80%; aspect-ratio: 106 / 150; transition: .8s ease-in-out; position: relative;}
.works_area .works_slide .slider-item .img > div{ border-radius: 12px; overflow: hidden; object-fit: cover;}
.works_area .works_slide .slider-item.slick-current .img{ width: 100%; max-width: 100%;}
.works_area .works_slide .slider-item .img:after{ position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; margin: auto; background-image: url("../images/works_item01.png"); background-size: 100%; background-repeat: no-repeat; background-position: center; z-index: 2; opacity: 0;}
.works_area .works_slide .slider-item.slick-current .img:after{ animation: img-item .8s ease-in;}
.works_area .works_slide .slider-item .img .txt{ -ms-writing-mode: tb-rl; writing-mode: vertical-rl; position: absolute; top: 0; right: -6%; margin: auto; transition: .8s ease-in-out; display: none;}
.works_area .works_slide .arrow_box{ width: 100%; display: flex; justify-content: flex-end; align-items: center; padding-right: 10px; box-sizing: border-box;}
.works_area .works_slide .arrow_box .arrow_item{ width: 100%; max-width: 130px; display: flex; justify-content: space-between; align-items: center;}
.works_area .works_slide .arrow_box .arrow_item p{ font-size: 12px; font-weight: bold; order: 1;}
.works_area .works_slide .arrow_box .arrow_item .prev-arrow{ order: 2; width: 30px; aspect-ratio: 1 / 1; border-radius: 100px; background-color: var(--color__black); background-image: url("../images/arrow01.png"); background-size: 10px; background-repeat: no-repeat; background-position: center;}
.works_area .works_slide .arrow_box .arrow_item .next-arrow{ order: 3; width: 30px; aspect-ratio: 1 / 1; border-radius: 100px; background-color: var(--color__black);background-image: url("../images/arrow02.png"); background-size: 10px; background-repeat: no-repeat; background-position: center;}
.works_area .works_thumnail{ width: 100%;  margin: 40px auto 0;}
.works_area .works_thumnail .thumnail-item{ margin: 0 10px; border-radius: 12px; overflow: hidden; background-color: var(--color__black); object-fit: cover;}
.works_area .works_thumnail .thumnail-item img{ opacity: .2; transition: .8s ease-in-out;}
.works_area .works_thumnail .thumnail-item.slick-current img{ opacity: 1;}
.works_area .obj_box{ width: 100%; max-width: 390px; position: absolute; z-index: 1; bottom: -200px; left: 40px; margin: auto;}
.works_area .obj_box .obj08{ width: 100%; max-width: 288px; aspect-ratio: 1 / 1;}
.works_area .obj_box .obj08 img{ animation: floating03 1.8s ease-in-out infinite alternate-reverse;}
.works_area .obj_box .obj07{ width: 100%; text-align: right;}
.works_area .obj_box .obj07 img{ width: 100%; max-width: 145px; aspect-ratio: 1 / 1; animation: floating02 1.3s ease-in-out infinite alternate-reverse;}
.works_area .obj_box .obj06{ width: 100%; max-width: 232px; aspect-ratio: 1 / 1;}
.works_area .obj_box .obj06 img{ animation: floating01 2.8s ease-in-out infinite alternate-reverse;}
.works_area .obj_box .obj05{ width: 100%; text-align: right;}
.works_area .obj_box .obj05 img{ width: 100%; max-width: 158px; aspect-ratio: 1 / 1; animation: floating03 1.8s ease-in-out infinite alternate-reverse;}
@keyframes img-item {
  0% { transform: scale(0.5); opacity: 0;}
  75% { transform: scale(1.0); opacity: 1;}
  100% { transform: scale(1.5); opacity: 0;}
}


/* about_area */
.about_area{ width: 100%; border-top: 2px solid var(--color__black); border-bottom: 2px solid var(--color__black); background-image: url("../images/about_bg.jpg"); background-size: cover; display: flex; justify-content: flex-end; align-items: center; padding: 100px 40px 160px; box-sizing: border-box;}
.about_area .wrap{ width: 100%; max-width: 800px;}
.about_area .wrap img{ margin-left: -20px;}
.about_area .wrap p{ font-size: 24px; font-weight: bold;}
.about_area .wrap .btn_area a{ margin: 0;}