@charset "UTF-8";
.l-container {
  width: 100%;
  margin: 0 auto;
  padding: 0 64px;
}
@media screen and (max-width: 767px) {
  .l-container {
    padding: 0 20px;
  }
}

.section + .section {
  margin-top: 30px;
}

.header {
  position: absolute;
  z-index: 9;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 13px 35px;
  transition: all 0.3s ease;
}
@media screen and (max-width: 767px) {
  .header {
    padding: 13px 0;
  }
}
.header.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(6px);
}

.top-nav {
  display: flex;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .top-nav {
    justify-content: space-around;
    flex: 1;
  }
}
.top-nav .top-nav-logo {
  display: flex;
  align-items: center;
  gap: 16px;
  background: none;
  border: none;
  opacity: 1;
  visibility: visible;
  /* pointer-events: none; */
}
.top-nav .top-nav-logo-img {
  width: 297px;
  height: auto;
}
@media screen and (max-width: 767px) {
  .top-nav .top-nav-logo-img {
    width: 189px;
  }
}
.top-nav .top-nav-logo-girl-bino {
  width: 37.5px;
  height: auto;
}
@media screen and (max-width: 767px) {
  .top-nav .top-nav-logo-girl-bino {
    width: 33.5px;
  }
}
.top-nav .top-nav-logo-iku {
  width: 172.5px;
  height: auto;
}
@media screen and (max-width: 767px) {
  .top-nav .top-nav-logo-iku {
    width: 146.5px;
  }
}

.breadcrumb {
  margin: 2px 4px 0;
  display: flex;
  gap: 40px;
}
.breadcrumb.u-show-pc {
  display: flex;
}
@media screen and (max-width: 767px) {
  .breadcrumb.u-show-pc {
    display: none;
  }
}
@media screen and (max-width: 767px) {
  .breadcrumb span:nth-child(1) i {
    font-size: 30px;
  }
}
@media screen and (max-width: 767px) {
  .breadcrumb span:nth-child(2) i {
    font-size: 33px;
  }
}
.breadcrumb a {
  text-decoration: none;
  color: #FFF;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
  font-family: "Noto Sans JP";
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  transition: all 0.3s ease;
}
.breadcrumb a:hover {
  opacity: 0.5;
}
.breadcrumb a:nth-child(1) {
  display: none;
}
.user-a .breadcrumb a:nth-child(1), .user-b .breadcrumb a:nth-child(1) {
  display: block;
}
.breadcrumb a:nth-child(2) {
  display: none;
}
.user-c .breadcrumb a:nth-child(2), .user-d .breadcrumb a:nth-child(2), .user-e .breadcrumb a:nth-child(2) {
  display: block;
}
.breadcrumb--list-page a {
  color: #2C2A29;
  font-size: 20px;
  font-weight: 400;
  text-shadow: unset;
}
.breadcrumb--list-page a:nth-child(2), .breadcrumb--list-page a:nth-child(1) {
  display: block;
}
@media screen and (max-width: 767px) {
  .breadcrumb a:nth-child(1) {
    display: block;
  }
  .breadcrumb .icon-left-2,
  .breadcrumb .icon-right-2 {
    display: none;
  }
  .user-c .breadcrumb .icon-left-1, .user-d .breadcrumb .icon-left-1, .user-e .breadcrumb .icon-left-1 {
    display: none;
  }
  .user-c .breadcrumb .icon-left-2, .user-d .breadcrumb .icon-left-2, .user-e .breadcrumb .icon-left-2 {
    display: block;
  }
  .user-b .breadcrumb .icon-right-1, .user-c .breadcrumb .icon-right-1, .user-d .breadcrumb .icon-right-1, .user-e .breadcrumb .icon-right-1 {
    display: none;
  }
  .user-b .breadcrumb .icon-right-2, .user-c .breadcrumb .icon-right-2, .user-d .breadcrumb .icon-right-2, .user-e .breadcrumb .icon-right-2 {
    display: block;
  }
}

.message {
  margin: 16px auto 0;
  width: 61.5%;
}
@media screen and (max-width: 767px) {
  .message {
    width: 100%;
    min-width: unset;
  }
  .message:nth-child(2) {
    margin: 8px auto 0;
  }
}
.message .ui-static-message {
  padding: 26px;
}
@media screen and (max-width: 767px) {
  .message .ui-static-message {
    padding: 16px 14px;
  }
}
@media screen and (max-width: 767px) {
  .message .ui-static-message .material-symbols-rounded,
  .message .ui-static-message .material-symbols-rounded-fill {
    font-size: 19px;
  }
}
@media screen and (max-width: 767px) {
  .message .ui-static-message .ui-static-message-title-wrapper {
    align-items: flex-start;
  }
  .message .ui-static-message .ui-static-message-title-wrapper i {
    margin-top: 2px;
  }
}
.message .ui-static-message .ui-static-message-text {
  color: #2C2A29;
  font-family: "Noto Sans JP";
  font-size: 14px;
}
@media screen and (max-width: 767px) {
  .message .ui-static-message .ui-static-message-text {
    font-size: 14px;
  }
}
.message .ui-static-message .ui-static-message-text {
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.hero {
  position: relative;
  padding: 58px 0 33px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 500px;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .hero {
    min-height: 525px;
    padding: 25px 0;
  }
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, #000 17.11%, rgba(0, 0, 0, 0) 50.96%);
  z-index: 2;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  .hero::before {
    display: none;
  }
}
.hero-slider-wrapper {
  position: absolute;
  inset: 0;
  z-index: 1; /* behind content */
}
.hero-slider-wrapper .swiper,
.hero-slider-wrapper .swiper-wrapper,
.hero-slider-wrapper .swiper-slide {
  width: 100%;
  height: 100%;
}
.hero-slider-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero .l-container {
  overflow: unset;
}
.hero-content {
  position: relative;
  text-align: center;
  width: 28.3%;
  margin-left: 324px;
  margin-top: 56px;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  .hero-content {
    width: 100%;
    margin-left: unset;
    margin-top: 31px;
  }
}
.hero-illustration {
  position: absolute;
  top: 13px;
  left: -226px;
}
@media screen and (max-width: 767px) {
  .hero-illustration {
    position: relative;
    top: unset;
    left: unset;
  }
}
.hero-illustration-binocular {
  position: relative;
}
@media screen and (max-width: 767px) {
  .hero-illustration-binocular {
    margin: 0 auto;
    width: fit-content;
  }
}
.hero-illustration-binocular-image {
  width: 244.29px;
  height: auto;
}
@media screen and (max-width: 767px) {
  .hero-illustration-binocular-image {
    width: 206.9675px;
    height: auto;
    transform: rotate(10deg);
  }
}
.hero-illustration-bubble {
  position: absolute;
  left: -88px;
  top: 158px;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 767px) {
  .hero-illustration-bubble {
    left: 148px;
    top: 56px;
  }
}
.user-e .hero-illustration-bubble {
  display: none;
}
.hero-illustration-bubble img {
  width: 202.172px;
  height: auto;
}
@media screen and (max-width: 767px) {
  .hero-illustration-bubble img {
    width: 144.172px;
  }
}
.hero-illustration-bubble-text {
  position: absolute;
  font-family: "Zen Maru Gothic";
  color: #FFF;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  transform: rotate(164deg);
}
.hero-illustration-bubble-text-1, .hero-illustration-bubble-text-3 {
  text-align: center;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%; /* 24px */
}
.hero-illustration-bubble-text-2 {
  font-size: 26px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
}
.hero-title {
  color: #FFF;
  text-align: center;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.25);
  font-family: "Noto Sans JP";
  font-size: 30px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: 0.6px;
}
@media screen and (max-width: 767px) {
  .hero-title {
    font-size: 18px;
    margin-top: 3px;
  }
}
.hero-title-price {
  color: #FFF;
  font-family: "Noto Sans JP";
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: 0.8px;
}
@media screen and (max-width: 767px) {
  .hero-title-price {
    font-size: 24px;
  }
}
.hero-title-unlimited-viewing {
  color: #FFF;
  font-family: "Noto Sans JP";
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: 0.72px;
}
@media screen and (max-width: 767px) {
  .hero-title-unlimited-viewing {
    font-size: 22px;
  }
}
.hero-sub-title {
  color: #FFF;
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  letter-spacing: 0.48px;
  margin-top: 24px;
}
@media screen and (max-width: 767px) {
  .hero-sub-title {
    font-size: 28px;
    margin-top: 0;
  }
}
.hero-sub-title-iku-mipru {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
}
.hero-sub-title-iku-mipru img {
  width: 470px;
  height: auto;
}
@media screen and (max-width: 767px) {
  .hero-sub-title-iku-mipru img {
    width: 256px;
    margin-top: 2px;
  }
}
.hero-subs-button {
  color: #FFF;
  min-width: 256px;
  padding: 12px 24px;
  text-decoration: none;
  border-radius: 100px;
  box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.15);
  display: inline-block;
  margin-top: 42px;
  transition: all 0.2s ease-out;
}
@media screen and (max-width: 767px) {
  .hero-subs-button {
    padding: 12px 15px;
    margin-top: 23px;
  }
}
.user-a .hero-subs-button, .user-b .hero-subs-button, .user-c .hero-subs-button {
  background: #F26A1D;
}
.user-a .hero-subs-button:hover, .user-b .hero-subs-button:hover, .user-c .hero-subs-button:hover {
  background-color: #D54E01;
}
.user-d .hero-subs-button {
  background-color: #0096AE;
}
.user-d .hero-subs-button:hover {
  background-color: #027C8F;
}
.user-e .hero-subs-button {
  display: none;
}
.hero-subs-button-text {
  color: #FFF;
  text-align: center;
  font-family: "Noto Sans JP";
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
}
.hero-subs-button-text-1 {
  display: none;
}
.user-a .hero-subs-button-text-1, .user-b .hero-subs-button-text-1, .user-c .hero-subs-button-text-1 {
  display: block;
}
.hero-subs-button-text-2 {
  display: none;
}
.user-d .hero-subs-button-text-2 {
  display: block;
}
@media screen and (max-width: 767px) {
  .hero-subs-button-text {
    font-size: 16px;
  }
}
.hero-subs-button-text-price {
  font-family: "Noto Sans JP";
  font-size: 26px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
}
@media screen and (max-width: 767px) {
  .hero-subs-button-text-price {
    font-size: 20px;
  }
}
.hero-subs-button-text-subs-type {
  font-family: "Noto Sans JP";
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
}
@media screen and (max-width: 767px) {
  .hero-subs-button-text-subs-type {
    font-size: 18px;
  }
}
.hero-login-button {
  color: #FFF;
  font-family: "Noto Sans JP";
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
  text-decoration: none;
  display: flex;
  justify-content: center;
  margin-top: 12px;
  display: none;
  transition: all 0.2s ease-out;
}
@media screen and (max-width: 767px) {
  .hero-login-button {
    font-size: 14px;
  }
}
.hero-login-button .ui-static-icon-color-white {
  transition: all 0.2s ease-out;
}
.hero-login-button .icon {
  margin-top: 7px;
}
.hero-login-button .icon .ui-static-icon-size-medium {
  font-size: 23px;
}
@media screen and (max-width: 767px) {
  .hero-login-button .icon .ui-static-icon-size-medium {
    font-size: 15px;
  }
}
.hero-login-button:hover {
  color: #D54E01;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hero-login-button:hover .ui-static-icon-color-white {
  color: #D54E01;
}
@media screen and (max-width: 767px) {
  .hero-login-button {
    margin-top: 3px;
  }
}
.user-a .hero-login-button {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero-login-button .icon-2,
.hero-login-button .text-2 {
  display: none;
}
@media screen and (max-width: 767px) {
  .user-b .hero-login-button, .user-c .hero-login-button, .user-d .hero-login-button, .user-e .hero-login-button {
    display: flex;
  }
  .user-b .hero-login-button .icon-1,
  .user-b .hero-login-button .text-1, .user-c .hero-login-button .icon-1,
  .user-c .hero-login-button .text-1, .user-d .hero-login-button .icon-1,
  .user-d .hero-login-button .text-1, .user-e .hero-login-button .icon-1,
  .user-e .hero-login-button .text-1 {
    display: none;
  }
  .user-b .hero-login-button .icon-2,
  .user-b .hero-login-button .text-2, .user-c .hero-login-button .icon-2,
  .user-c .hero-login-button .text-2, .user-d .hero-login-button .icon-2,
  .user-d .hero-login-button .text-2, .user-e .hero-login-button .icon-2,
  .user-e .hero-login-button .text-2 {
    display: block;
  }
}
.hero-login-button svg {
  width: 24px;
  height: 24px;
  aspect-ratio: 1/1;
}

.sns {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 28px;
  margin: 45px 0 44px;
}
@media screen and (max-width: 767px) {
  .sns {
    margin: 30px 0 28px;
    gap: 26px;
  }
}
.sns .sns-icon {
  width: 32px;
  height: auto;
  transition: all 0.3s ease;
}
.sns .sns-icon:hover {
  opacity: 0.7;
}
@media screen and (max-width: 767px) {
  .sns .sns-icon {
    width: 34px;
  }
}
.sns a img {
  width: 100%;
  height: auto;
}

.section + .section {
  margin-top: 40px;
}

.section-slider {
  width: 100%;
  overflow: hidden;
}

.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.section-heading-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #2C2A29;
}
@media screen and (min-width: 768px) {
  .section-heading-title {
    font-size: 1.5rem;
  }
}
.section-heading-title span {
  font-size: 0.875rem;
}
@media screen and (min-width: 768px) {
  .section-heading-title span {
    font-size: 0.84375rem;
  }
}

.section-heading-link {
  font-size: 0.875rem;
  font-weight: 400;
  color: #2C2A29;
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: opacity 0.3s ease-out;
}
.section-heading-link:hover {
  opacity: 0.5;
}
@media screen and (min-width: 768px) {
  .section-heading-link {
    gap: 1px;
    font-size: 1rem;
  }
}

.section-button {
  text-align: center;
}
.section-button .ui-static-button-secondary {
  font-weight: 400;
}
.section-button .ui-static-button-secondary:not(.active):not(:disabled):hover {
  background: #FFF4ED;
  color: #A33B00;
  border-color: #FFC8A9;
}
.section-button .ui-static-button-secondary:not(.active):not(:disabled):hover .ui-static-icon {
  color: #A33B00;
}
@media screen and (min-width: 768px) {
  .section-button.ui-static-button-with-icon-right.ui-static-button-medium {
    padding-right: 34px;
  }
}
@media screen and (min-width: 768px) {
  .section-button.ui-static-button-with-icon-right.ui-static-button-medium .ui-static-icon {
    right: 14px;
  }
}

.streaming #firstStream, .list-page-streaming .ui-static-modal {
  position: relative;
}

.video-slider.swiper {
  overflow: visible;
}
.video-slider .swiper-button-next:after,
.video-slider .swiper-rtl .swiper-button-prev:after,
.video-slider .swiper-button-prev:after,
.video-slider .swiper-rtl .swiper-button-next:after {
  display: none;
}
.video-slider .video-slider-button-prev,
.video-slider .video-slider-button-next {
  display: none;
  width: auto;
  z-index: 20;
  top: 34.5%;
}
@media screen and (min-width: 768px) {
  .video-slider .video-slider-button-prev,
  .video-slider .video-slider-button-next {
    display: block;
  }
}
.video-slider .video-slider-button-prev {
  left: -13px;
}
.video-slider .video-slider-button-next {
  right: -13px;
}
.video-slider .ui-static-icon-button {
  width: 31.5px;
  height: 31.5px;
  background-color: #fff;
}
.video-slider .video-card .ui-static-button-small {
  height: 12px;
}
@media screen and (min-width: 768px) {
  .video-slider .video-card .ui-static-button-small {
    height: 18.5px;
  }
}
.video-slider .ui-static-button-with-icon-left .ui-static-icon {
  left: 11px;
}

.video-card {
  position: relative;
}
.video-card-list {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(1, 1fr);
}
@media screen and (min-width: 425px) {
  .video-card-list {
    grid-template-columns: repeat(1, 1fr);
    gap: 8px;
  }
}
@media screen and (min-width: 768px) {
  .video-card-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}
@media screen and (min-width: 1024px) {
  .video-card-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}
@media screen and (min-width: 1440px) {
  .video-card-list {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
}
@media screen and (min-width: 1920px) {
  .video-card-list {
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
  }
}
@media screen and (min-width: 2374px) {
  .video-card-list {
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
  }
}
.video-card:hover .ui-static-image img {
  transform: scale(1.1);
}
.video-card .ui-static-image img {
  transition: transform 0.3s ease;
}
.video-card .ui-static-button {
  font-weight: 300;
}
@media screen and (min-width: 768px) {
  .video-card .ui-static-button-small {
    padding: 4px 15.25px 5px;
    font-size: 0.75rem;
  }
}
@media screen and (min-width: 768px) {
  .video-card .ui-static-button-with-icon-left.ui-static-button-small {
    padding-left: 31px;
  }
}
@media screen and (min-width: 768px) {
  .video-card .ui-static-button-with-icon-left.ui-static-button-small .ui-static-icon {
    left: 11px;
  }
}
.video-card .ui-static-text {
  font-size: 1rem;
}
.video-card .ui-static-text-small {
  line-height: 1.35rem;
}
.video-card .is-new {
  position: relative;
}
.video-card .is-new::after {
  content: "NEW";
  position: absolute;
  font-size: 15px;
  color: #2C2A29;
  font-weight: 800;
  width: 120px;
  padding: 2px 0 4px;
  background-color: #FFEE1D;
  text-align: center;
  top: 11px;
  right: -37px;
  transform: rotate(45deg);
  line-height: 1;
  letter-spacing: -0.05em;
}
@media screen and (min-width: 768px) {
  .video-card .is-new::after {
    font-size: 1.125rem;
    padding: 4px 0 6px;
    top: 11px;
    right: -34px;
  }
}
.video-card .is-new.is-new-medium::after {
  top: 7px;
  right: -42px;
  padding: 3px 0 4px;
}
@media screen and (min-width: 768px) {
  .video-card .is-new.is-new-medium::after {
    font-size: 1.125rem;
    padding: 4px 0 6px;
    top: 11px;
    right: -34px;
  }
}
.video-card .is-new.is-new-small::after {
  font-size: 13.3px;
  top: 6px;
  right: -45px;
}
@media screen and (min-width: 768px) {
  .video-card .is-new.is-new-small::after {
    font-size: 1.125rem;
    padding: 4px 0 6px;
    top: 11px;
    right: -34px;
  }
}

.video-card-inner {
  width: 100%;
  display: grid;
  gap: 8px;
  cursor: pointer;
  position: relative;
}

.streaming .js-vender-modal-button, .list-page-streaming .js-vender-modal-button {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% 88%, 65% 88%, 65% 100%, 0 100%);
}
.streaming .js-vender-modal-button:hover .video-card .ui-static-image img, .list-page-streaming .js-vender-modal-button:hover .video-card .ui-static-image img {
  transform: scale(1.1);
}

.ui-static-modal-content .ui-static-button-primary {
  font-weight: 400;
}

.video-card-tag {
  position: absolute;
  z-index: 1;
  bottom: 9px;
  left: 10px;
  border-radius: 0.28125rem;
  display: flex;
  align-items: center;
  gap: 4px;
}
.video-card-tag .is-lock {
  color: #F26A1D;
  background-color: #fff;
  padding: 1px 2px 2px;
  border-radius: 0.31944rem;
}
.video-card-tag .is-free {
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  background-color: #0096AE;
  border-radius: 0.375rem;
  padding: 0.1rem 0.375rem 0.15rem;
}
@media screen and (min-width: 768px) {
  .video-card-tag .is-free {
    font-size: 1rem;
    padding: 0.2rem 0.375rem 0.29rem;
    border-radius: 0.375rem;
  }
}
.video-card-tag .has-bonus {
  color: #CF3700;
  font-size: 0.875rem;
  font-weight: 700;
  padding: 0.1rem 0.375rem 0.2rem;
  border-radius: 0.375rem;
  background-color: #FFFCD5;
}
@media screen and (min-width: 768px) {
  .video-card-tag .has-bonus {
    font-size: 1rem;
    padding: 0.2rem 0.375rem 0.3rem;
  }
}

.video-card-details {
  display: grid;
  gap: 13px;
}
@media screen and (min-width: 768px) {
  .video-card-details {
    gap: 4px;
  }
}

.video-card-dt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.swiper-slide .video-card-dt {
  display: grid;
}
@media screen and (min-width: 768px) {
  .swiper-slide .video-card-dt {
    display: flex;
  }
}

.video-card-time {
  display: flex;
  align-items: center;
  gap: 2px;
}
.video-card-time span {
  color: #697180;
  font-size: 0.75rem;
  font-weight: 400;
}
@media screen and (min-width: 768px) {
  .video-card-time span {
    font-size: 0.875rem;
  }
}

.video-card-modal {
  justify-items: center;
}
.video-card-modal .ui-static-button-large {
  height: 51px;
  padding: 12px 15px 14px;
}
.video-card-modal video {
  width: 100%;
}

.video-card-modal-plan {
  width: 100%;
  padding: 0.7rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid #ACB5BF;
  justify-items: center;
}
@media screen and (min-width: 768px) {
  .video-card-modal-plan {
    width: 73.96%;
    padding: 0.75rem 1rem 1rem;
  }
}
@media screen and (min-width: 768px) {
  .video-card-modal-plan.ui-static-container.ui-static-container-space-xs-md {
    row-gap: 1rem;
  }
}

.video-card-modal-plan-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.video-card-modal-plan-heading-title {
  font-size: 1.0625rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.video-card-modal-plan-heading-title .ui-static-icon {
  color: #009BB4;
  position: relative;
  top: 1px;
}

.video-card-modal-plan-price {
  font-size: 0.9375rem;
  font-weight: 700;
}
.video-card-modal-plan-price span {
  font-size: 1.1875rem;
}

.video-card-modal-plan-details {
  width: 100%;
}

.video-card-modal-plan-details-info {
  font-size: 14px;
  color: #2C2A29;
  padding-left: 23px;
  position: relative;
}
.video-card-modal-plan-details-info::before {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: #C0C5CC;
  border-radius: 40%;
  top: 7px;
  left: 7px;
}

.video-card-modal-plan-details-note {
  color: #697180;
  font-size: 0.75rem;
  font-weight: 400;
  position: relative;
  left: -1px;
}

.video-card-modal-plan-trial-buttton.ui-static-button-primary {
  background-color: #F26A1D;
  border-color: #F26A1D;
  font-weight: 400;
}
.video-card-modal-plan-trial-buttton.ui-static-button-primary:not(.active):not(:disabled):hover {
  background-color: #D54E01;
  border-color: #D54E01;
}
.video-card-modal-plan-trial-buttton span {
  font-size: 1.25rem;
}

.video-card-modal-plan-subs-buttton.ui-static-button-primary {
  background-color: #009BB4;
  border-color: #009BB4;
  font-weight: 400;
}
.video-card-modal-plan-subs-buttton.ui-static-button-primary:not(.active):not(:disabled):hover {
  background-color: #027C8F;
  border-color: #027C8F;
}

.video-card-modal-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: #3064D5;
  text-decoration: none;
}
.video-card-modal-link span {
  transition: color 0.3s ease-out;
}
.video-card-modal-link:hover span {
  color: #140D77;
  text-decoration: underline;
}
.video-card-modal-link:hover .ui-static-icon {
  color: #140D77;
}

.video-filter {
  width: 100%;
  overflow: visible;
}

.video-filter-inner {
  width: calc(100% + 21px);
  overflow-y: scroll;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.video-filter-inner::-webkit-scrollbar {
  display: none; /* Chrome, Safari, and Opera */
}

.video-filter-navs {
  display: flex;
  gap: 25px;
  min-width: 422px;
}
@media screen and (min-width: 768px) {
  .video-filter-navs {
    gap: 19px;
  }
}

.video-filter-nav {
  color: #2C2A29;
  background: transparent;
  border: none;
  position: relative;
  padding: 0;
  font-size: 0.875rem;
  transition: opacity 0.3s ease-out;
}
.video-filter-nav:hover {
  opacity: 0.5;
}
@media screen and (min-width: 768px) {
  .video-filter-nav {
    font-size: 1rem;
  }
}
.video-filter-nav::after {
  content: "";
  width: 1px;
  height: 70%;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: -13px;
  background-color: #C0C5CC;
}
@media screen and (min-width: 768px) {
  .video-filter-nav::after {
    right: -11px;
  }
}
.video-filter-nav:last-child::after {
  display: none;
}
.video-filter-nav.is-active {
  font-weight: 700;
}

.banner {
  position: relative;
  margin: 50px 0;
}
.banner .section-heading {
  position: relative;
}
.banner .section-heading-link {
  position: absolute;
  right: 0;
  top: 8px;
}
.banner-title {
  margin-top: 7px;
  color: #2C2A29;
  font-family: "Noto Sans JP";
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%; /* 31.2px */
}
@media screen and (max-width: 767px) {
  .banner-title {
    font-size: 20px;
  }
}
.banner-invidual-purchase {
  color: #2C2A29;
  font-family: "Noto Sans JP";
  font-size: 13.5px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
}
@media screen and (max-width: 767px) {
  .banner-invidual-purchase {
    font-size: 14px;
  }
}
.banner-show-more-button {
  position: absolute;
  top: 20px;
  right: 20px;
}
@media screen and (max-width: 767px) {
  .banner-show-more-button {
    top: 2px;
    right: 20px;
  }
}
.banner-show-more-button a {
  text-decoration: none;
  color: #2C2A29;
  font-family: "Noto Sans JP";
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
}
@media screen and (max-width: 767px) {
  .banner-show-more-button a {
    font-size: 14px;
  }
}
.banner-show-more-button-icon {
  right: -13px;
  position: absolute;
  top: 2px;
}
@media screen and (max-width: 767px) {
  .banner-show-more-button-icon {
    top: 1px;
  }
}
.banner-show-more-button-icon svg {
  transform: scale(0.75);
}
@media screen and (max-width: 767px) {
  .banner-show-more-button-icon svg {
    transform: scale(1);
  }
}
.banner-button {
  margin-top: 50px;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .banner-button {
    margin-top: 40px;
  }
}
.banner-button .ui-static-button-small {
  padding: 11px 22px;
  height: unset;
}
.banner-button .ui-static-button-secondary {
  font-weight: 400;
}
.banner-button .ui-static-button-secondary:not(.active):not(:disabled):hover {
  background: #FFF4ED;
  color: #A33B00;
  border-color: #FFC8A9;
}
.banner-list {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(2, 1fr);
}
@media screen and (min-width: 425px) {
  .banner-list {
    grid-template-columns: repeat(1, 1fr);
    gap: 8px;
  }
}
@media screen and (min-width: 768px) {
  .banner-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
}
@media screen and (min-width: 1024px) {
  .banner-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}
@media screen and (min-width: 1440px) {
  .banner-list {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
}
@media screen and (min-width: 1920px) {
  .banner-list {
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
  }
}
@media screen and (min-width: 2374px) {
  .banner-list {
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
  }
}
.banner-item {
  aspect-ratio: 431/266;
  height: auto;
}
.banner-item a img {
  width: 100%;
  height: 100%;
}

.cal-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
}

.cal-modal.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
}

.cal-modal-inner {
  background: #fff;
  padding: 20px;
  max-width: 360px;
  width: 90%;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  text-align: center;
  position: relative;
}

.cal-modal-close {
  position: absolute;
  right: 8px;
  top: 8px;
  border: none;
  background: none;
  font-size: 13px;
  cursor: pointer;
  font-weight: 900;
}

.cal-modal-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
}

.cal-modal-event {
  margin: 0 0 16px;
  font-size: 14px;
}

.cal-modal-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.cal-btn {
  padding: 8px 12px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  white-space: nowrap;
}

/* モーダル */
.fwp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.fwp-modal {
  background: #fff;
  width: 736px;
  border-radius: 0.5rem;
  overflow: hidden;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  padding: 32px 29px;
}
.fwp-modal .ui-static-button-medium {
  padding-top: 8px;
  font-weight: 400;
  padding-left: 15px;
  height: 32px;
}
.fwp-modal .ui-static-button-with-icon-right.ui-static-button-medium {
  padding-right: 31px;
}

.fwp-close {
  position: absolute;
  top: 6px;
  right: 5px;
  padding: 10px;
  cursor: pointer;
  appearance: none;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
}
.fwp-close.fwp-close-bottom {
  top: unset;
  right: unset;
  position: relative;
  display: block;
  text-align: center;
  margin: 33px auto 0;
}

.fwp-player-slot-video {
  height: 380px;
}

/*# sourceMappingURL=style.css.map */