@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/


.mv{
  position: relative;
  height: calc(100vh - 100px);
  overflow: hidden;
  margin: 0 calc(50% - 50vw);
  width: 100vw;
  background-color: #fff;
}

.mv__bg{
  position:absolute;
  inset:0;
  background: linear-gradient(to right, rgba(249,239,213, 0.58), rgba(55,190,239, 0.58));
  z-index:1;
}

.mv__center{
  position:absolute;
  inset:0;
  z-index:3;
  padding:0 24px;
}

.mv__catchCopy{
  position:absolute;
  z-index:5;
  top:50%;
  right:0;
  width:32%;
  max-width:420px;
  min-width:180px;
  transform: translate(clamp(55px, 4vw, 80px), -50%);
  opacity:0;
  animation:mvFadeIn 2.6s ease-out 2.4s forwards;
}

.mv__catchCopy img{
  display:block;
  width:100%;
  height:auto;
}

@keyframes mvFadeIn{
  to{
    opacity:1;
  }
}

.ticker{
  position:absolute;
  left:0;
  right:0;
  bottom:-12px;
  width:100%;
  margin:0;
  overflow:hidden;
  color:#fff;
  font-weight:700;
  font-size:clamp(28px, 2vw, 32px);
  box-sizing:border-box;
}

.ticker__track__right{
  display:flex;
  width:max-content;
  animation:tickerRight 120s linear infinite;
}

.ticker__item{
  white-space:nowrap;
}

@keyframes tickerRight{
  from{
    transform:translateX(-50%);
  }
  to{
    transform:translateX(0);
  }
}

.photoSlider{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
}

.photoSlider__frame{
  position:relative;
  width:min(80%, 3000px);
  height:85%;
}

.photoSlider__viewport{
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  border-radius:150px 0 150px 0;
}

.photoSlider__image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  opacity:0;
  border-radius:inherit;
  object-fit:cover;
  animation:photoSliderLoop 12s ease-in-out infinite;
}

.photoSlider__image--1{
  animation-delay:0s;
}

.photoSlider__image--2{
  animation-delay:4s;
}

.photoSlider__image--3{
  animation-delay:8s;
}

@keyframes photoSliderLoop{
  0%{
    opacity:0;
  }
  8%,
  25%{
    opacity:1;
  }
  33%,
  100%{
    opacity:0;
  }
}

.mv__link{
  position:absolute;
  z-index:6;
  right:0;
  bottom:10%;
  width:150px;
  transform:translate(50%, 50%);
  opacity:0;
  animation:mvLinkEntrance 3s ease-out 5.4s forwards, mvLinkPulse 2.4s ease-in-out 4.6s infinite;
}

.mv__link img{
  display:block;
  width:100%;
  height:auto;
}

.scroll{
  position:absolute;
  z-index:7;
  right:calc(50% - 40px);
  bottom:0;
  width:40px;
  opacity:0;
  animation:mvFadeIn 2.6s ease-out 2.4s forwards, scrollPrompt 2.2s ease-in-out 2.5s infinite;
}

.scroll img{
  display:block;
  width:100%;
  height:auto;
}

.logoMarquee{
  overflow:hidden;
  position:absolute;
  z-index:2;
  top:50%;
  left:0;
  transform:translate(0, -50%);
  opacity:1;
  width:140px;
  height: calc(100vh - 64px);
}

.logoMarquee__track__top{
  display:flex;
  flex-direction:column;
  will-change:transform;
  animation:logoTop 60s linear infinite;
}

.logoMarquee__item{
  display:flex;
  justify-content:center;
}

.logoMarquee__item img{
  width:100px;
  height:auto;
  display:block;
}

@keyframes logoTop{
  from{
    transform:translateY(0);
  }
  to{
    transform:translateY(-50%);
  }
}

@keyframes mvLinkEntrance{
  from{
    opacity:0;
    transform:translate(50%, 50%) scale(0.92);
  }
  to{
    opacity:1;
    transform:translate(50%, 50%) scale(1);
  }
}

@keyframes mvLinkPulse{
  0%,
  100%{
    transform:translate(50%, 50%) scale(1);
  }
  12%{
    transform:translate(50%, 50%) scale(1.1);
  }
  24%{
    transform:translate(50%, 50%) scale(1);
  }
  38%{
    transform:translate(50%, 50%) scale(1.06);
  }
  52%{
    transform:translate(50%, 50%) scale(1);
  }
}

@keyframes scrollPrompt{
  0%,
  100%{
    transform:translate(-50%, 0);
  }
  50%{
    transform:translate(-50%, -10px);
  }
}

@media (prefers-reduced-motion: reduce){
  .ticker__track__right,
  .photoSlider__image,
  .logoMarquee__track__top,
  .mv__catchCopy,
  .mv__link,
  .scroll{
    animation:none;
  }

  .photoSlider__image{
    opacity:0;
  }

  .photoSlider__image--1,
  .mv__catchCopy,
  .mv__link,
  .scroll{
    opacity:1;
  }
}

@media (max-width: 767px){
  .mv{
    min-height:360px;
  }

  .mv__center{
    padding:0 16px;
  }

  .photoSlider__frame{
    width:80%;
    height:90%;
  }

  .photoSlider__viewport{
    border-radius:150px 0 150px 0;
  }

  .mv__link{
    width:100px;
  }

  .logoMarquee{
    width:88px;
  }

  .logoMarquee__item img{
    width:64px;
  }
}