/* =============================
   HeroMade (WY Top Video) - style.css
   ============================= */

:root{
  --wytv-loading-bg: #111111;
  --wytv-wrap-left: 0px;
  --wytv-quad-duration: 30s;
}

/* full-bleed（左右補正のみ） */
.wytv{
  width: 100vw;
  position: relative;
  left: 0;
  margin: 0 0 24px;
  transform: translate3d(calc(-1 * var(--wytv-wrap-left, 0px)), 0, 0);
  will-change: transform;
}

@supports (width: 100dvw){
  .wytv{ width: 100dvw; }
}

.wytv__inner{ width: 100%; }

/* media common */
.wytv__ratio{
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #000;
}

.wytv__iframe,
.wytv__video,
.wytv__ratio iframe,
.wytv__ratio video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.wytv__video{ object-fit: cover; }
.wytv__ratio iframe{ display: block; }

.wytv:not(.is-interactive) .wytv__ratio iframe,
.wytv:not(.is-interactive) .wytv__ratio video{
  pointer-events: none;
}

/* normal mode */
.wytv__item--pc{ display: block; }
.wytv__item--sp{ display: none; }
.wytv__ratio--pc{ aspect-ratio: 16 / 9; }
.wytv__ratio--sp{ aspect-ratio: 9 / 16; }

/* quad mode */
.wytv__ratio--hero{ aspect-ratio: 16 / 9; }
@media (max-width: 768px){
  .wytv__ratio--hero{ aspect-ratio: 9 / 16; }
}

.wytv__quad4-track{
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.wytv__quad4-row{
  display: flex;
  flex-wrap: nowrap;
  height: 100%;
  transform: translateX(0);
  animation: wytvQuadMarquee var(--wytv-quad-duration, 30s) linear infinite;
  animation-play-state: paused;
  will-change: transform;
}

.wytv.is-opened .wytv__quad4-row{
  animation-play-state: running;
}

.wytv__quad4-item{
  flex: 0 0 25%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

@media (max-width: 768px){
  .wytv__quad4-item{
    flex: 0 0 50%;
  }
  .wytv__quad4-row{
    animation-name: wytvQuadMarqueeSp;
  }
}

.wytv__media{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.wytv__img{
  object-fit: cover;
  display: block;
}

.wytv__quad4-item video{
  object-fit: cover;
}

@keyframes wytvQuadMarquee{
  from{ transform: translateX(0); }
  to  { transform: translateX(-100%); }
}

@keyframes wytvQuadMarqueeSp{
  from{ transform: translateX(0); }
  to  { transform: translateX(-200%); }
}

@media (prefers-reduced-motion: reduce){
  .wytv__quad4-row{ animation: none; }
}

/* quad captions: hidden until hover / hover pause and enlarge */
.wytv__quad4-item::after{
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.20);
  opacity: 1;
  transition: background .16s ease;
  pointer-events: none;
  z-index: 1;
}

.wytv__quad4-item::before{
  content: attr(data-caption);
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  padding: 12px;
  text-align: center;
  color: rgba(255,255,255,.96);
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.2;
  font-size: clamp(12px, 1.3vw, 20px);
  opacity: 0;
  transform: translateY(300px) scale(1);
  transition: opacity .16s ease, transform .16s ease, background .16s ease;
  pointer-events: none;
}

@media (hover:hover){
  .wytv__quad4-track:hover .wytv__quad4-row{
    animation-play-state: paused;
  }
  .wytv__quad4-item:hover::after{
    background: rgba(0,0,0,.32);
  }
  .wytv__quad4-item:hover::before{
    opacity: 1;
    transform: translateY(300px) scale(1.14);
  }
}

@media (max-width: 768px){
  .wytv__quad4-item::before{
    font-size: clamp(12px, 3.6vw, 20px);
    transform: translateY(160px) scale(1);
  }
}

@media (max-width: 768px) and (hover:hover){
  .wytv__quad4-item:hover::before{
    opacity: 1;
    transform: translateY(160px) scale(1.14);
  }
}

/* loading */
.wytv__loading{
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  background: transparent !important;
}

.wytv__loading::before,
.wytv__loading::after{
  content: '';
  position: absolute;
  background: var(--wytv-loading-bg, #111111);
  top: 0; bottom: 0;
  width: 50%;
  will-change: transform, opacity;
}
.wytv__loading::before{ left: 0;  transform: translateX(0); }
.wytv__loading::after { right: 0; transform: translateX(0); }

.wytv[data-open='horizontal'] .wytv__loading::before,
.wytv[data-open='horizontal'] .wytv__loading::after{
  left: 0; right: 0;
  width: auto;
  height: 50%;
  top: auto; bottom: auto;
}
.wytv[data-open='horizontal'] .wytv__loading::before{ top: 0; }
.wytv[data-open='horizontal'] .wytv__loading::after { bottom: 0; }

.wytv[data-open='off'] .wytv__loading::after{ display:none; }
.wytv[data-open='off'] .wytv__loading::before{
  left:0; right:0; width:auto;
}

.wytv__loading-inner{
  position: absolute;
  inset: 0;
  z-index: 6;
  text-align: center;
}

.wytv__loading[data-has-image='0'] .wytv__loading-inner{
  display: grid;
  place-items: center;
  padding: 18px;
}

.wytv__loading-media{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: min(92vw, 760px);
  max-width: 100%;
  padding: 0 18px;
  box-sizing: border-box;
}

.wytv__loading-logo{
  max-width: 100%;
  max-height: min(72vh, 560px);
  height: auto;
  display: block;
  margin: 0 auto;
  transform-origin: center center;
  will-change: transform, opacity;
}

.wytv__loading-text{
  color: rgba(255,255,255,.92);
  font-size: 16px;
  letter-spacing: .06em;
  margin: 0;
}

.wytv__loading[data-has-image='1'] .wytv__loading-text{
  position: absolute;
  left: 50%;
  top: calc(50% + min(140px, 18vw));
  transform: translateX(-50%);
  width: min(90vw, 640px);
  padding: 0 18px;
  box-sizing: border-box;
}

.wytv__loading[data-has-image='0'] .wytv__loading-text{
  position: static;
  transform: none;
}

.wytv__spinner{
  display: none !important;
}


.wytv.is-open:not([data-open='zoom_vertical']) .wytv__loading-inner{
  opacity: 0;
  transition: opacity .18s ease;
}

.wytv.is-open[data-open='zoom_vertical'] .wytv__loading-logo{
  transform: scale(1.8);
  opacity: 0;
  transition: transform .58s cubic-bezier(.12, .88, .18, 1), opacity .28s ease;
}

.wytv.is-open[data-open='zoom_vertical'] .wytv__loading-text{
  opacity: 0;
  transition: opacity .22s ease;
}

.wytv.is-open:not([data-open='horizontal']):not([data-open='off']) .wytv__loading::before{
  transform: translateX(-100%);
  transition: transform .55s ease;
}
.wytv.is-open:not([data-open='horizontal']):not([data-open='off']) .wytv__loading::after{
  transform: translateX(100%);
  transition: transform .55s ease;
}

.wytv.is-open[data-open='horizontal'] .wytv__loading::before{
  transform: translateY(-100%);
  transition: transform .55s ease;
}
.wytv.is-open[data-open='horizontal'] .wytv__loading::after{
  transform: translateY(100%);
  transition: transform .55s ease;
}

.wytv.is-open[data-open='zoom_vertical'] .wytv__loading::before{
  transform: translateX(-100%);
  transition: transform .56s cubic-bezier(.22, .61, .36, 1) .06s;
}
.wytv.is-open[data-open='zoom_vertical'] .wytv__loading::after{
  transform: translateX(100%);
  transition: transform .56s cubic-bezier(.22, .61, .36, 1) .06s;
}

.wytv.is-opened .wytv__loading{
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  display: none !important;
}

.wytv[data-open='off'].is-opened .wytv__loading::before{
  opacity: 0;
  transition: opacity .35s ease;
}

/* sound button */
.wytv__sound{
  all: unset;
  position: absolute;
  z-index: 50;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  width: 38px;
  height: 38px;
  border-radius: 9999px;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,.55);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  line-height: 1;
  font-size: 0;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}

.wytv__sound.is-ready{
  opacity: 1;
  pointer-events: auto;
}
.wytv__sound:active{ transform: translateY(1px); }
.wytv__sound.is-hidden{ display:none !important; }

.wytv__sound-icon{
  width: 20px;
  height: 20px;
  display: block;
  fill: currentColor;
}
.wytv__sound-icon *{ pointer-events: none; }
.wytv__sound .wave{ opacity: .95; }
.wytv__sound .slash{ opacity: 0; transition: opacity .12s ease; }
.wytv__sound.is-muted .slash{ opacity: 1; }
.wytv__sound.is-muted .wave{ opacity: .55; }

/* white box */
.wytv__whitebox{
  background: #fff;
  color: #111;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  overflow: hidden;
  box-sizing: border-box;
  z-index: 40;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease;
}
.wytv.is-opened .wytv__whitebox{
  opacity: 1;
  transform: translateY(0);
}

.wytv__whitebox-inner{
  padding: 0 !important;
  margin: 0 !important;
  line-height: 0;
}
.wytv__whitebox-inner *{ line-height: normal; }

a.wytv__whitebox{
  display: block;
  color: inherit;
  text-decoration: none;
}

.wytv__whitebox-inner img{
  display: block !important;
  max-width: 100%;
  height: auto;
  vertical-align: top;
}
.wytv__whitebox-inner p,
.wytv__whitebox-inner figure{
  margin: 0 !important;
}

.wytv__whitebox--pc{
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: min(180px, 19vw);
  max-width: calc(100% - 32px);
}

.wytv__whitebox--sp{
  margin: 12px auto 0;
  width: min(80%, 520px);
}


/* center image after hero opens */
.wytv__center-image{
  position: absolute;
  inset: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  opacity: 0;
  pointer-events: none;
  padding: 20px;
  transition: opacity .28s ease;
}

.wytv__center-image-img{
  display: block;
  max-width: min(56vw, 720px);
  max-height: min(48vh, 420px);
  width: auto;
  height: auto;
  transform: translateY(10px) scale(.96);
  transform-origin: center center;
  transition: transform .38s cubic-bezier(.22, .61, .36, 1), opacity .28s ease;
  opacity: 0;
}

.wytv__center-image-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 28px;
  border-radius: 10px;
  background: rgba(255,255,255,.8);
  color: #111111;
  text-decoration: none;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: 0 10px 28px rgba(0,0,0,.22);
  transform: translateY(0) scaleX(0);
  transform-origin: center center;
  transition: transform .42s cubic-bezier(.22, .61, .36, 1), opacity .18s ease, box-shadow .2s ease;
  opacity: 0;
  pointer-events: auto;
}

.wytv__center-image-button:hover{
  box-shadow: 0 14px 32px rgba(0,0,0,.28);
}

.wytv.show-center-image .wytv__center-image{
  opacity: 1;
}

.wytv.show-center-image .wytv__center-image-img{
  opacity: 1;
  transform: translateY(0) scale(1);
}

.wytv.show-center-button .wytv__center-image-button{
  opacity: 1;
  transform: translateY(0) scaleX(1);
}

@media (max-width: 768px){
  .wytv__center-image{
    gap: 14px;
    padding: 16px;
  }

  .wytv__center-image-img{
    max-width: min(84vw, 520px);
    max-height: min(34vh, 240px);
  }

  .wytv__center-image-button{
    min-height: 42px;
    padding: 11px 22px;
    font-size: 14px;
  }
}