@charset "UTF-8";
/* Google Font */
@import url("https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Merriweather&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@500&display=swap");
/*************************************

アニメーション

*************************************/
.photo-scroll-wrap .img-scroll-wrap {
  display: flex;
  overflow: hidden; }
.photo-scroll-wrap .img-scroll-list {
  display: flex;
  list-style: none; }
.photo-scroll-wrap .img-scroll-list-left {
  animation: infinity-scroll-left 70s infinite linear 0.5s both; }
.photo-scroll-wrap .img-scroll-item {
  width: calc(180vw); }
.photo-scroll-wrap .img-scroll-item img {
  width: 100%; }
.photo-scroll-wrap .img-scroll-item a img {
  max-width: 100% !important; }

@keyframes infinity-scroll-left {
  from {
    transform: translateX(0); }
  to {
    transform: translateX(-100%); } }
/*************************************
scroll action
*************************************/
.scroll-action {
  opacity: 0; }

.fadeinUp {
  transform: translate(0px, 150px);
  transition: all 2000ms; }

.fadeinLeft {
  transform: translate(-500px, 0px);
  transition: all 2000ms;
  backface-visibility: hidden; }

.fadeinRight {
  transform: translate(500px, 0px);
  transition: all 2000ms;
  backface-visibility: hidden; }

.fadeinZoom {
  transform: scale(0.1);
  transition: all 1000ms; }

.fadeinRight2 {
  transform: translate(500px, 0px); }

/* 画面内に入った状態 */
.scroll-action.scroll-in {
  opacity: 1;
  transform: translate(0, 0) scale(1); }

.container-fade {
  position: relative;
  width: 400px;
  height: 200px; }

.fade-image {
  position: absolute;
  width: 100%;
  opacity: 0;
  animation: change-img-anim 15s infinite;
  overflow: hidden; }

.fade-image:nth-of-type(1) {
  animation-delay: 0s; }

.fade-image:nth-of-type(2) {
  animation-delay: 5s; }

.fade-image:nth-of-type(3) {
  animation-delay: 10s; }

@keyframes change-img-anim {
  0% {
    opacity: 0;
    transform: scale(1.3); }
  20% {
    opacity: 1;
    transform: scale(1); }
  36% {
    opacity: 1; }
  45% {
    opacity: 0; }
  100% {
    opacity: 0; } }
.fade-image2 {
  position: absolute;
  width: 100%;
  opacity: 0;
  animation: change-img-anim2 2.4s infinite;
  overflow: hidden; }

.fade-image2:nth-of-type(1) {
  animation-delay: 0s; }

.fade-image2:nth-of-type(2) {
  animation-delay: 0.4s; }

.fade-image2:nth-of-type(3) {
  animation-delay: 0.8s; }

.fade-image2:nth-of-type(4) {
  animation-delay: 1.2s; }

.fade-image2:nth-of-type(5) {
  animation-delay: 1.6s; }

.fade-image2:nth-of-type(6) {
  animation-delay: 2s; }

@keyframes change-img-anim2 {
  0% {
    opacity: 0;
    transform: scale(1.2); }
  15% {
    opacity: 1;
    transform: scale(1); }
  25% {
    opacity: 1; }
  40% {
    opacity: 0; }
  100% {
    opacity: 0; } }