@charset "UTF-8";

:root {
  --video-ink: #1e2328;
  --video-orange: #ff6f31;
}

body:has(.video-page) {
  margin: 0;
  overflow-x: hidden;
  background-color: #fff1d8;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.3'/%3E%3C/svg%3E"),
    radial-gradient(circle 45rem at 90% 10rem, rgba(255, 224, 90, 0.3) 0%, transparent 35%),
    linear-gradient(90deg, #c8f1f3 0%, #e6ede8 20%, #f8dfbb 40%, #f8dfbb 60%);
}

.video-page,
.video-page * { box-sizing: border-box; }

.video-page {
  position: relative;
  width: 128rem;
  height: 196.2rem;
  overflow: hidden;
  color: var(--video-ink);
  font-family: "Noto Sans JP", "Yu Gothic", sans-serif;
}

.video-page.is-expanded { height: 450.4rem; }

.video-page a { color: inherit; text-decoration: none; }
.video-page.is-static [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }
.video-main { position: absolute; inset: 0; }

.video-pagehead {
  position: absolute;
  top: 16rem;
  left: 8rem;
  width: 112rem;
  height: 25.7rem;
}

.video-breadcrumb { position: absolute; top: 0; left: 0; }
.video-breadcrumb a { transition: none; }
.video-breadcrumb a:hover { color: inherit; }
.video-pagehead__eyebrow picture,
.video-more picture,
.video-more-top picture { display: contents; }

.video-pagehead__title {
  position: absolute;
  top: 9.9rem;
  left: 0;
  width: 40.2rem;
  height: 15.8rem;
}

.video-pagehead__eyebrow {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin: 0 0 1rem;
  color: var(--video-orange);
  font-size: 2rem;
  font-weight: 700;
  line-height: normal;
  letter-spacing: .3rem;
}

.video-pagehead__eyebrow picture {
  display: block;
  flex: 0 0 1.4rem;
  width: 1.4rem;
  height: 1.4rem;
}

.video-pagehead__eyebrow img { display: block; width: 1.4rem; height: 1.4rem; }
.video-pagehead h1 { margin: 0 0 1.5rem; font-size: 3.2rem; font-weight: 700; line-height: normal; letter-spacing: .32rem; }
.video-pagehead__copy { margin: 0; width: 42rem; font-size: 1.6rem; font-weight: 500; line-height: 2.8rem; letter-spacing: .08rem; white-space: nowrap; }

.video-pagehead__illustration {
  position: absolute;
  top: 4.855rem;
  left: 77.7rem;
  display: block;
  width: 30rem;
  height: 28.9765rem;
}

.video-pagehead__illustration img { display: block; width: 100%; height: 100%; object-fit: contain; }

.video-library {
  position: absolute;
  top: 49.7rem;
  left: 16rem;
  width: 96rem;
  height: 118.4rem;
}

.video-library__line { position: absolute; top: 0; left: 0; width: 96rem; height: .1rem; background: rgba(30, 35, 40, .35); }

.video-grid {
  position: absolute;
  top: 8rem;
  left: 2rem;
  display: grid;
  grid-template-columns: repeat(2, 44rem);
  grid-auto-rows: 29.6rem;
  gap: 4rem;
  width: 92rem;
  height: 96.8rem;
}

.video-card { width: 44rem; height: 29.6rem; overflow: hidden; }
.video-card[hidden],
.video-more[hidden] { display: none !important; }
.video-card__player { position: relative; width: 44rem; height: 24.8rem; overflow: hidden; background: #111; }
.video-card iframe { display: block; width: 100%; height: 100%; border: 0; }
.video-card h2 { margin: 2rem 0 0; overflow: hidden; color: var(--video-ink); font-size: 1.6rem; font-weight: 500; line-height: 2.8rem; letter-spacing: .08rem; text-overflow: ellipsis; white-space: nowrap; }

.video-more {
  position: absolute;
  top: 112.8rem;
  left: 38rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 20rem;
  height: 6.6rem;
  padding: 0 2.4rem;
  overflow: hidden;
  border: .1rem solid transparent;
  border-radius: 5rem;
  background:
    linear-gradient(#f5f5f5, #f5f5f5) padding-box,
    linear-gradient(90deg, #ff6f31 0%, #ffc2a8 100%) border-box;
  box-shadow: 0 .4rem .2rem rgba(0, 0, 0, .25);
  color: #555 !important;
  font-size: 1.8rem;
  font-weight: 500;
  line-height: normal;
  letter-spacing: .27rem;
  transition: color .25s ease, transform .25s ease, box-shadow .25s ease;
  cursor: pointer;
}

.video-more::before {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--video-orange);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  content: "";
}

.video-more > * { position: relative; z-index: 1; }
.video-more picture { display: block; flex: 0 0 2rem; width: 2rem; height: 2rem; transform: rotate(90deg); }
.video-more picture::before {
  position: absolute;
  inset: 0;
  background-color: #ee7b49;
  -webkit-mask: url("../img/video/more-arrow-pc.svg") center / 100% 100% no-repeat;
  mask: url("../img/video/more-arrow-pc.svg") center / 100% 100% no-repeat;
  transition: background-color .25s ease;
  content: "";
}
.video-more img { display: block; width: 2rem; height: 2rem; opacity: 0; }
.video-more:hover,
.video-more:focus-visible { color: #fff !important; transform: translateY(-.2rem); }
.video-more:hover::before,
.video-more:focus-visible::before { opacity: 1; }
.video-more:hover picture::before,
.video-more:focus-visible picture::before { background-color: #fff; }
.video-more:focus-visible,
.video-more-top:focus-visible { outline: .2rem solid var(--video-orange); outline-offset: .4rem; }

.video-more-top {
  position: absolute;
  top: 177.1rem;
  left: 52.7rem;
  display: flex;
  align-items: center;
  gap: 4rem;
  width: 22.6rem;
  height: 4rem;
  font-size: 2rem;
  font-weight: 500;
  line-height: normal;
  letter-spacing: .1rem;
  white-space: nowrap;
}

.video-more-top span { flex: 0 0 auto; }
.video-more-top picture { display: block; flex: 0 0 4rem; width: 4rem; height: 4rem; }

.video-more-top img { display: block; width: 4rem; height: 4rem; transition: transform .25s ease; }
.video-more-top:hover img,
.video-more-top:focus-visible img { transform: translateX(.4rem); }

.video-page.is-expanded .video-library { height: 373.6rem; }
.video-page.is-expanded .video-grid { height: 365.6rem; }
.video-page.is-expanded .video-more-top { top: 431.3rem; }

@media screen and (max-width: 700px) {
  .video-page { width: 37.5rem; min-width: 32rem; height: 220.3rem; }
  .video-page.is-expanded { height: 616.7rem; }
  .video-pagehead { top: 8rem; left: 0; width: 37.5rem; height: 27.6rem; }
  .video-breadcrumb { top: 3.6rem; left: 2rem; }
  .video-pagehead__title { top: 7rem; left: 2rem; width: 19.5rem; height: 17rem; }
  .video-pagehead__eyebrow { gap: 1.2rem; margin-bottom: .5rem; font-size: 1.4rem; letter-spacing: .21rem; }
  .video-pagehead__eyebrow picture { flex-basis: 1rem; width: 1rem; height: 1rem; }
  .video-pagehead__eyebrow img { width: 1rem; height: 1rem; }
  .video-pagehead h1 { margin-bottom: 1.2rem; font-size: 2.4rem; line-height: 2.9rem; letter-spacing: .24rem; }
  .video-pagehead__copy { width: 19.5rem; font-size: 1.4rem; line-height: 1.75; letter-spacing: .07rem; white-space: normal; }
  .video-pagehead__illustration { top: 2.4rem; left: 21.5rem; width: 18rem; height: 17.386rem; }

  .video-library { top: 35.6rem; left: 0; width: 37.5rem; height: 165.2rem; }
  .video-library__line { top: 3.6rem; left: 2rem; width: 33.5rem; }
  .video-grid { top: 6rem; left: 2rem; display: flex; flex-direction: column; gap: 2.4rem; width: 33.5rem; height: 147.6rem; }
  .video-card { flex: 0 0 22.6rem; width: 33.5rem; height: 22.6rem; }
  .video-card__player { width: 33.5rem; height: 18.9rem; }
  .video-card h2 { margin-top: 1.2rem; font-size: 1.4rem; line-height: 1.75; letter-spacing: .07rem; }
  .video-card[data-aos] { transition-delay: 0s !important; }

  .video-more { top: 156rem; left: 8.75rem; width: 20rem; height: 5.6rem; padding: 0 2.4rem; font-size: 1.4rem; letter-spacing: .21rem; }
  .video-more-top { top: 200.8rem; left: 9.7rem; gap: 2.4rem; width: 18.1rem; height: 4.4rem; font-size: 1.6rem; letter-spacing: .08rem; }
  .video-more-top img { width: 4rem; height: 4rem; }
  .video-page.is-expanded .video-library { height: 553.6rem; }
  .video-page.is-expanded .video-grid { height: 547.6rem; }
  .video-page.is-expanded .video-more-top { top: 597.2rem; }
}