.modal-video {
  position: relative;
  margin: auto;
  width: min(76.8vw, 45dvh);
}
@media (min-width: 768px) {
  .modal-video {
    width: min(334px, 50dvh);
  }
}
.modal-video > .close {
  position: fixed;
  top: 3.4666666667vw;
  right: 6.4vw;
}
.modal-video > .close {
  position: fixed;
  top: 3.4666666667vw;
  right: 6.4vw;
  width: 8.2973333333vw;
  height: 8.2973333333vw;
}
@media (min-width: 768px) {
  .modal-video > .close {
    top: clamp(26.796875px, 2.734375vw, 35px);
    right: clamp(29.09375px, 2.96875vw, 38px);
    width: clamp(39.5215625px, 4.0328125vw, 51.62px);
    height: clamp(39.5215625px, 4.0328125vw, 51.62px);
  }
}
.modal-video > .close::before,
.modal-video > .close::after {
  content: "";
  position: absolute;
  margin: auto;
  height: 1px;
  background-color: var(--color-white);

  inset: 0;
}
@media (min-width: 768px) {
  .modal-video > .close::before,
  .modal-video > .close::after {
    height: clamp(1.1484375px, 0.1171875vw, 1.5px);
  }
}
.modal-video > .close::before {
  transform: rotate(45deg);
}
.modal-video > .close::after {
  transform: rotate(-45deg);
}
@media (any-hover: hover) {
  .modal-video > .close {
    transition: opacity 0.15s cubic-bezier(0.42, 0, 1, 1);
  }
  .modal-video > .close:hover {
    opacity: 0.5;
    transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
    transition-duration: 0.2s;
  }
}
.modal-video .video-box {
  position: relative;
  padding-bottom: 177.7777777778%;
}
.modal-video .video-box > .video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.recommend-container {
  overflow: hidden;
}
.recommend-container > .recommend-box {
  padding: 10.36vw 7.6vw 14.5333333333vw;
}
@media (min-width: 768px) {
  .recommend-container > .recommend-box {
    margin: 0 auto;
    padding: clamp(45.99875px, 4.69375vw, 60.08px) clamp(107.1875px, 10.9375vw, 140px) clamp(54.359375px, 5.546875vw, 71px);
    width: clamp(980px, 100vw, 1280px);
  }
}
.recommend-container .recommend-bg {
  position: relative;
}
.recommend-container .recommend-bg > .circle {
  position: absolute;
}
.recommend-container .recommend-bg > .circle.-circle01 {
  opacity: 0.2;
  top: -57.6vw;
  left: -52vw;
  width: 118.8vw;
  height: 107.884vw;
  background: radial-gradient(closest-side, rgba(199, 30, 114, 0.91) 0%, rgba(199, 30, 114, 0.35) 54%, rgba(199, 30, 114, 0) 100%);
}
@media (min-width: 768px) {
  .recommend-container .recommend-bg > .circle.-circle01 {
    top: clamp(-532px, -41.5625vw, -407.3125px);
    left: clamp(-274px, -21.40625vw, -209.78125px);
    width: clamp(630.875px, 64.375vw, 824px);
    height: clamp(630.875px, 64.375vw, 824px);
  }
}
.recommend-container .recommend-bg > .circle.-circle02 {
  opacity: 0.2;
  top: -27.4666666667vw;
  left: -52vw;
  width: 77.884vw;
  height: 77.884vw;
  background: radial-gradient(closest-side, rgba(92, 51, 171, 0.91) 0%, rgba(92, 51, 171, 0.35) 54%, rgba(92, 51, 171, 0) 100%);
}
@media (min-width: 768px) {
  .recommend-container .recommend-bg > .circle.-circle02 {
    top: clamp(-254px, -19.84375vw, -194.46875px);
    left: clamp(-578px, -45.15625vw, -442.53125px);
    width: clamp(509.90625px, 52.03125vw, 666px);
    height: clamp(509.90625px, 52.03125vw, 666px);
  }
}
.recommend-container .recommend-bg > .circle.-circle03 {
  opacity: 0.2;
  top: -41.6vw;
  right: -51.8666666667vw;
  width: 91.7333333333vw;
  height: 82.1333333333vw;
  background: radial-gradient(closest-side, #e01e2f 0%, rgba(224, 30, 47, 0.35) 54%, rgba(224, 30, 47, 0) 100%);
}
@media (min-width: 768px) {
  .recommend-container .recommend-bg > .circle.-circle03 {
    top: clamp(-444px, -34.6875vw, -339.9375px);
    right: clamp(-353px, -27.578125vw, -270.265625px);
    width: clamp(666.09375px, 67.96875vw, 870px);
    height: clamp(542.0625px, 55.3125vw, 708px);
  }
}
.recommend-container .recommend-bg > .circle.-circle04 {
  opacity: 0.2;
  bottom: -53.3333333333vw;
  left: -29.3333333333vw;
  width: 96.1333333333vw;
  height: 96.1333333333vw;
  background: radial-gradient(closest-side, rgba(199, 30, 114, 0.91) 0%, rgba(199, 30, 114, 0.35) 54%, rgba(199, 30, 114, 0) 100%);
}
@media (min-width: 768px) {
  .recommend-container .recommend-bg > .circle.-circle04 {
    bottom: clamp(-521px, -40.703125vw, -398.890625px);
    left: clamp(-274px, -21.40625vw, -209.78125px);
    width: clamp(630.875px, 64.375vw, 824px);
    height: clamp(630.875px, 64.375vw, 824px);
  }
}
.recommend-container .recommend-bg > .circle.-circle05 {
  opacity: 0.2;
  bottom: -65.084vw;
  left: -52vw;
  width: 77.884vw;
  height: 77.884vw;
  background: radial-gradient(closest-side, rgba(92, 51, 171, 0.91) 0%, rgba(92, 51, 171, 0.35) 54%, rgba(92, 51, 171, 0) 100%);
}
@media (min-width: 768px) {
  .recommend-container .recommend-bg > .circle.-circle05 {
    bottom: clamp(-642px, -50.15625vw, -491.53125px);
    left: clamp(-524px, -40.9375vw, -401.1875px);
    width: clamp(509.90625px, 52.03125vw, 666px);
    height: clamp(509.90625px, 52.03125vw, 666px);
  }
}
.recommend-container .recommend-bg > .circle.-circle06 {
  opacity: 0.2;
  right: -52vw;
  bottom: -55.2vw;
  width: 91.7333333333vw;
  height: 82.1333333333vw;
  background: radial-gradient(closest-side, #c71e72 0%, rgba(199, 30, 114, 0.35) 54%, rgba(199, 30, 114, 0) 100%);
}
@media (min-width: 768px) {
  .recommend-container .recommend-bg > .circle.-circle06 {
    right: clamp(-354px, -27.65625vw, -271.03125px);
    bottom: clamp(-491px, -38.359375vw, -375.921875px);
    width: clamp(666.09375px, 67.96875vw, 870px);
    height: clamp(542.0625px, 55.3125vw, 708px);
  }
}
.recommend-container .recommend-bg > .circle.-circle07 {
  opacity: 0.1;
  top: -2.2666666667vw;
  left: -31.8666666667vw;
  width: 157.6vw;
  height: 141.0666666667vw;
  background: radial-gradient(closest-side, #e01e2f 0%, rgba(224, 30, 47, 0.35) 54%, rgba(224, 30, 47, 0) 100%);
}
@media (min-width: 768px) {
  .recommend-container .recommend-bg > .circle.-circle07 {
    top: clamp(-62px, -4.84375vw, -47.46875px);
    left: clamp(41.34375px, 4.21875vw, 54px);
    width: clamp(889.65625px, 90.78125vw, 1162px);
    height: clamp(723.515625px, 73.828125vw, 945px);
  }
}
.recommend-container .recommend-box {
  position: relative;
  z-index: 0;
}
.recommend-container .recommend-box > .video-box {
  margin-top: 3.8666666667vw;
}
@media (min-width: 768px) {
  .recommend-container .recommend-box > .video-box {
    margin: clamp(11.484375px, 1.171875vw, 15px) auto 0;
    width: clamp(293.76265625px, 29.97578125vw, 383.69px);
  }
}
.recommend-container .recommend-box > .recommend-bg {
  position: absolute;
  z-index: -1;

  inset: 0;
}
.recommend-container .recommend-ttl {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.recommend-container .recommend-ttl > .logo {
  width: 84vw;
  font-size: 0;
}
@media (max-width: 767.98px) {
  .recommend-container .recommend-ttl > .logo {
    margin-left: 2.1333333333vw;
  }
}
@media (min-width: 768px) {
  .recommend-container .recommend-ttl > .logo {
    width: clamp(431.8125px, 44.0625vw, 564px);
  }
}
.recommend-container .recommend-ttl > .txt {
  margin-top: 4.9813333333vw;
  text-align: center;
  letter-spacing: 0;
  font-size: 4.8vw;
  font-weight: 700;
  line-height: 1.7;
}
@media (min-width: 768px) {
  .recommend-container .recommend-ttl > .txt {
    margin-top: clamp(12.41078125px, 1.26640625vw, 16.21px);
    font-size: clamp(15.3125px, 1.5625vw, 20px);
  }
}
.recommend-container .video-box {
  display: grid;

  justify-items: center;
}
.recommend-container .video-box > .theme {
  width: 58.4vw;
  font-size: 0;
}
@media (min-width: 768px) {
  .recommend-container .video-box > .theme {
    width: clamp(203.65625px, 20.78125vw, 266px);
  }
}
.recommend-container .video-box > .thumb {
  margin-top: 6.1333333333vw;
  font-size: 0;
}
@media (min-width: 768px) {
  .recommend-container .video-box > .thumb {
    margin-top: clamp(18.375px, 1.875vw, 24px);
    width: clamp(218.203125px, 22.265625vw, 285px);
  }
}
@media (any-hover: hover) {
  .recommend-container .video-box > .thumb {
    transition: opacity 0.15s cubic-bezier(0.42, 0, 1, 1);
  }
  .recommend-container .video-box > .thumb:hover {
    opacity: 0.7;
    transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
    transition-duration: 0.2s;
  }
}

.video-container {
  padding-top: 14.6666666667vw;
}
@media (min-width: 768px) {
  .video-container {
    padding-top: clamp(48.234375px, 4.921875vw, 63px);
  }
}
@media (min-width: 768px) {
  .video-container > .video-box {
    margin: 0 auto;
    width: clamp(980px, 100vw, 1280px);
  }
}
.video-container .slide-number {
  text-align: center;
  text-indent: 1.2vw;
}
@media (min-width: 768px) {
  .video-container .slide-number {
    text-indent: clamp(3.0625px, 0.3125vw, 4px);
  }
}
.video-container .slide-number > .current {
  letter-spacing: 0.05em;
  font-size: 4.5333333333vw;
  font-weight: 500;
  line-height: 1.5;
}
@media (min-width: 768px) {
  .video-container .slide-number > .current {
    font-size: clamp(18.375px, 1.875vw, 24px);
  }
}
.video-container .slide-number > .slash {
  display: inline-block;
  margin: 0 1.6vw 0 1.4666666667vw;
  width: max(1px, 0.2666666667vw);
  height: 2.848vw;
  transform: rotate(30deg);
  background-color: var(--color-midnight-blue);
  vertical-align: -0.2666666667vw;
}
@media (min-width: 768px) {
  .video-container .slide-number > .slash {
    margin: 0 clamp(6.890625px, 0.703125vw, 9px);
    width: clamp(1.12546875px, 0.11484375vw, 1.47px);
    height: clamp(11.99734375px, 1.22421875vw, 15.67px);
    vertical-align: clamp(-3px, -0.234375vw, -2.296875px);
  }
}
.video-container .slide-number > .total {
  letter-spacing: 0.05em;
  font-size: 3.2vw;
  font-weight: 500;
  line-height: 1.5;
}
@media (min-width: 768px) {
  .video-container .slide-number > .total {
    vertical-align: clamp(-1px, -0.078125vw, -0.765625px);
    font-size: clamp(12.25px, 1.25vw, 16px);
  }
}
.video-container .tab-list {
  display: grid;
  padding: 5.8666666667vw 7.6vw;

  grid-auto-flow: column;
  gap: 2.4vw;
}
@media (min-width: 768px) {
  .video-container .tab-list {
    padding: clamp(19.140625px, 1.953125vw, 25px) clamp(107.1875px, 10.9375vw, 140px);

    gap: clamp(12.25px, 1.25vw, 16px);
  }
}
.video-container .tab-list > :last-child {
  scroll-margin-right: 7.6vw;
}
@media (min-width: 768px) {
  .video-container .tab-list > :last-child {
    scroll-margin-right: clamp(107.1875px, 10.9375vw, 140px);
  }
}
.video-container .tab-list > .tab {
  border-radius: 2vw;
  width: 30vw;
  height: 12.6666666667vw;
  background-color: var(--color-midnight-blue);
  text-align: center;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 2.9333333333vw;
  font-weight: 600;
  line-height: 1.5;
}
@media (min-width: 768px) {
  .video-container .tab-list > .tab {
    padding-bottom: clamp(1.53125px, 0.15625vw, 2px);
    border-radius: clamp(7.65625px, 0.78125vw, 10px);
    width: clamp(197.53125px, 20.15625vw, 258px);
    height: clamp(41.34375px, 4.21875vw, 54px);
    font-size: clamp(13.78125px, 1.40625vw, 18px);
    line-height: 1.6;
  }
}
.video-container .tab-list > .tab[aria-selected=true] {
  background: var(--common-gradient);
  color: var(--color-white);
}
@media (any-hover: hover) {
  .video-container .tab-list > .tab:hover {
    background: var(--common-gradient);
    color: var(--color-white);
  }
}
.video-container .tab-panel {
  padding: 0 7.6vw;
}
@media (min-width: 768px) {
  .video-container .tab-panel {
    padding: 0 clamp(107.1875px, 10.9375vw, 140px);
  }
}
.video-container .tab-panel.-hidden {
  display: none;
}
.video-container .tabs-box {
  position: relative;
}
.video-container .tabs-box > .tabs-scroll {
  position: sticky;
  z-index: 1;
  top: 12vw;
}
@media (min-width: 768px) {
  .video-container .tabs-box > .tabs-scroll {
    top: clamp(45.9375px, 4.6875vw, 60px);
  }
}
.video-container .tabs-box > .tab-panel {
  position: relative;
  margin-top: 11.7333333333vw;
}
@media (min-width: 768px) {
  .video-container .tabs-box > .tab-panel {
    margin-top: clamp(42.109375px, 4.296875vw, 55px);
  }
}
.video-container .tabs-scroll {
  background-color: var(--color-white);
}
.video-container .tabs-scroll .tab-list {
  width: -moz-max-content;
  width: max-content;
}
.video-container .tabs-scroll .simplebar-track {
  right: 7.6vw;
  left: 7.6vw;
  border-radius: 999px;
  height: 1.2vw;
  background-color: #e9e9e9;
}
@media (min-width: 768px) {
  .video-container .tabs-scroll .simplebar-track {
    right: clamp(107.1875px, 10.9375vw, 140px);
    left: clamp(107.1875px, 10.9375vw, 140px);
    height: clamp(3.828125px, 0.390625vw, 5px);
  }
}
.video-container .tabs-scroll .simplebar-scrollbar::before {
  opacity: 1;
  background-color: var(--color-midnight-blue);

  inset: 0;
}
.video-container .video-box > .ttl {
  text-align: center;
  letter-spacing: 0;
  font-size: 4.2666666667vw;
  font-weight: 700;
  line-height: 1.7;
}
@media (min-width: 768px) {
  .video-container .video-box > .ttl {
    font-size: clamp(16.84375px, 1.71875vw, 22px);
  }
}
.video-container .video-box > .tabs-box {
  margin-top: -1.0666666667vw;

  scroll-margin-top: 12vw;
}
@media (min-width: 768px) {
  .video-container .video-box > .tabs-box {
    margin-top: clamp(2.296875px, 0.234375vw, 3px);

    scroll-margin-top: clamp(45.9375px, 4.6875vw, 60px);
  }
}
.video-container .video-item > .thumb {
  font-size: 0;
}
@media (any-hover: hover) {
  .video-container .video-item > .thumb {
    transition: opacity 0.15s cubic-bezier(0.42, 0, 1, 1);
  }
  .video-container .video-item > .thumb:hover {
    opacity: 0.7;
    transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
    transition-duration: 0.2s;
  }
}
.video-container .video-items {
  display: grid;

  gap: 10.1333333333vw;
}
@media (min-width: 768px) {
  .video-container .video-items {
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(27.5625px, 2.8125vw, 36px);
  }
}
.nav-container {
  overflow: hidden;
}
.nav-container > .nav-box {
  padding: 16.5333333333vw 7.6vw;
}
@media (min-width: 768px) {
  .nav-container > .nav-box {
    margin: 0 auto;
    padding: clamp(68.90625px, 7.03125vw, 90px) clamp(107.1875px, 10.9375vw, 140px);
    width: clamp(980px, 100vw, 1280px);
  }
}
.nav-container .top-link {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 1.3333333333vw;
}
@media (min-width: 768px) {
  .nav-container .top-link {
    gap: clamp(6.125px, 0.625vw, 8px);
  }
}
.nav-container .top-link > .txt {
  background: var(--common-gradient);
  -webkit-background-clip: text;
          background-clip: text;
  font-size: 4vw;
  font-weight: 700;
  line-height: 1.4;

  -webkit-text-fill-color: transparent;
}
@media (min-width: 768px) {
  .nav-container .top-link > .txt {
    font-size: clamp(13.78125px, 1.40625vw, 18px);
    line-height: 1.4444444444;
  }
}
.nav-container .top-link > .external {
  margin-top: 0.4vw;
  width: 3.4666666667vw;
  font-size: 0;
}
@media (min-width: 768px) {
  .nav-container .top-link > .external {
    margin-top: clamp(3.828125px, 0.390625vw, 5px);
    width: clamp(11.484375px, 1.171875vw, 15px);
  }
}
@media (any-hover: hover) {
  .nav-container .top-link {
    transition: opacity 0.15s cubic-bezier(0.42, 0, 1, 1);
  }
  .nav-container .top-link:hover {
    opacity: 0.8;
    transition-timing-function: cubic-bezier(0, 0, 0.58, 1);
    transition-duration: 0.2s;
  }
}

/*
* videos.css
*
*/
/* --------------------------------
  videos
-------------------------------- */
body {
  margin: 0;
}

.main-container {
  padding-top: 12vw;
}
@media (min-width: 768px) {
  .main-container {
    padding-top: clamp(45.9375px, 4.6875vw, 60px);
  }
}