@charset "UTF-8";
@import "https://fonts.googleapis.com/css2?family=Spartan:wght@200..900&display=swap";
*.spartan {
  font-family: Spartan !important;
  /* Spartanフォントはbaselineから浮いている。line-height: 1にするとpaddingの上下が合わないので注意。 */
  line-height: var(--line-height, 1.2);
}

@keyframes slidein {
  0% {
    opacity: 0;
    transform: translateX(-60px);
  }
  30% {
    opacity: 1;
    transform: translateX(0px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}
@keyframes slideout {
  0% {
    transform: translateX(0px);
    display: none;
  }
  30% {
    opacity: 0;
    transform: translateX(-30px);
  }
  100% {
    opacity: 0;
    transform: translateX(-60px);
    display: none;
  }
}
/* 仮 */
.dummy-figure {
  color: var(--bs-secondary-color);
  background-color: var(--bs-tertiary-bg);
  border: var(--bs-border-width) solid var(--bs-border-color);
}
.dummy-figure div {
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-placeholder {
  background: rgb(196, 196, 196);
}

table.table tbody th {
  white-space: nowrap;
}

.flatpage img:not([height]) {
  max-width: 100%;
  height: auto;
}

/* Legal document styles (特定商取引法に基づく表示) */
.legal-title {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: var(--app-spacer-l);
  text-align: center;
  padding-bottom: var(--app-spacer-m);
  border-bottom: 1px solid var(--app-bg-secondary-color);
}

.legal-section {
  margin-bottom: var(--app-spacer-m);
  padding-bottom: var(--app-spacer-m);
  border-bottom: 1px solid var(--app-bg-secondary-color);
}

.legal-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.legal-section-title {
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: var(--app-spacer-s);
  color: var(--bs-body-color);
  line-height: 1.5;
}

.legal-content {
  font-size: var(--app-font-size-medium);
  line-height: 1.8;
  color: var(--bs-body-color);
}

.legal-content p {
  margin-bottom: var(--app-spacer-s);
}

.legal-content p:last-child {
  margin-bottom: 0;
}

.legal-content p strong {
  font-weight: 600;
  color: var(--bs-body-color);
}

.legal-content ul {
  margin-bottom: var(--app-spacer-s);
  padding-left: 1.5em;
}

.legal-content ul li {
  margin-bottom: 0.5em;
  line-height: 1.8;
}

.legal-content ul li:last-child {
  margin-bottom: 0;
}

/* == section == */
#page-contents {
  margin-bottom: var(--app-spacer-xl);
}

.page-title {
  text-align: center;
  padding-top: var(--app-spacer-l);
  padding-bottom: var(--app-spacer-l);
  font-size: 2.25rem;
  margin: 0;
}

.page-subtitle {
  text-align: center;
  font-size: 1.5rem;
}

.page-title + .page-subtitle {
  margin-top: calc(var(--app-spacer-l) * -1);
  padding-bottom: var(--app-spacer-l);
}

.page-header {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.page-header .page-header__cover + .page-header__text {
  margin-top: 2em;
}
.page-header .page-header__text {
  padding: 2em 0;
  margin-bottom: 2em;
  border: solid;
  border-width: 1px 0;
}
.page-header .page-header__text p:last-child {
  margin-bottom: 0;
}

.section {
  padding-top: var(--app-spacer-l);
  padding-bottom: var(--app-spacer-l);
  font-size: var(--app-font-size-medium);
}
.section:first-child {
  padding-top: var(--app-spacer-m);
}

.section--condensed {
  padding-top: var(--app-spacer-m);
  padding-bottom: var(--app-spacer-m);
}

.section--fully-condensed {
  padding-top: 0;
  padding-bottom: 0;
}

.section__title {
  font-size: var(--app-font-size-section-title);
  font-weight: 600;
  margin-bottom: 1.5em;
  text-align: var(--section-title-align, center);
}

.sublink {
  padding: 0.3em 0;
  font-size: var(--app-font-size-small);
  text-align: end;
  color: var(--app-text-secondary-color);
}
.sublink a:not(.btn) {
  color: inherit;
  text-decoration: none;
}
.sublink a:hover, .sublink a:focus, .sublink a:active {
  text-decoration: underline;
}
.sublink a::after {
  content: "→";
}

.section__sublink {
  margin-top: 1em;
}

.has-basket-badge {
  position: relative;
}
.has-basket-badge .basket-counter {
  background-color: var(--bs-primary);
  color: #fff;
  width: 1.5em;
  font-size: var(--app-font-size-minimum);
  position: absolute;
  border-radius: 50%;
  right: -1em;
  top: -0.8em;
  text-align: center;
}

/* 商品グリッド共通 */
.item__badge {
  color: white;
  font-size: var(--app-font-size-x-small);
  background-color: var(--color-bg, #000);
  font-family: Spartan !important;
  /* Spartanフォントはbaselineから浮いている。line-height: 1にするとpaddingの上下が合わないので注意。 */
  line-height: var(--line-height, 1.2);
  min-width: 5em;
  width: max-content;
  text-align: center;
  line-height: 1;
  padding: 0.5ex 1em 0.2ex;
}
.item__badge.is-new {
  --color-bg: var(--app-badge-new);
}
.item__badge.is-recommended {
  --color-bg: var(--app-badge-recommended);
}
.item__badge.is-sale {
  --color-bg: var(--app-badge-sale);
}

.item__thumbnail img {
  object-fit: cover;
  object-position: center;
}

.item {
  position: relative;
}
.item .item__title {
  font-weight: 700;
  font-size: var(--app-font-size-large);
}
.item .item__link {
  text-decoration: none;
}
.item .item__thumbnail a {
  display: block;
  position: relative;
}
.item .item__thumbnail a::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  display: block;
  z-index: 2;
  transition: background var(--app-transition-duration);
}
.item .item__thumbnail a:hover::before {
  background-color: rgba(255, 255, 255, 0.2);
}
.item .item__meta a {
  position: relative;
  z-index: 3;
}
.item .item__meta--number {
  font-family: Spartan !important;
  /* Spartanフォントはbaselineから浮いている。line-height: 1にするとpaddingの上下が合わないので注意。 */
  line-height: var(--line-height, 1.2);
  font-weight: 800;
  font-size: var(--app-font-size-small);
  padding-top: 0.4ex;
}
.item .item__buttons {
  z-index: 2;
}
.item .item__meta--price .price {
  color: var(--color-price, var(--bs-body-color));
}
.item .item__meta--price .price__option {
  font-weight: 400;
}
.item .item__meta--price .price__option::before {
  content: "[";
}
.item .item__meta--price .price__option::after {
  content: "]";
}

.item--has-float-badge {
  position: relative;
}
.item--has-float-badge .item__badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.item--sale {
  --color-price: var(--app-badge-sale);
}

.item-list--grid .row {
  --bs-gutter-x: var(--app-grid-gutter-x);
  --bs-gutter-y: var(--app-grid-gutter-y);
}

.item-list--grid .item {
  /* グリッドやスライダーの中身。サムネとそれ以外が縦に並ぶ。 */
}
.item-list--grid .item a:not(.btn) {
  color: inherit;
  text-decoration: none;
}
.item-list--grid .item .item__content {
  display: none;
}
.item-list--grid .item .item__buttons {
  display: none;
}

.item-list--list {
  margin-left: 0;
  padding-left: 0;
  list-style: none;
}
.item-list--list li {
  border-bottom: 1px solid var(--app-text-secondary-color);
  padding-top: var(--app-spacer-s);
  padding-bottom: var(--app-spacer-s);
}

.item-list--list .item {
  /* ランキングや検索結果。サムネが左端に固定。16x9の画像で高さ100pxになるのが約178px。 */
  display: grid;
  --thumb-size: min(30vw, 178px);
  grid-template-columns: var(--thumb-size) 1fr;
  gap: var(--app-spacer-s);
}
.item-list--list .item a:not(.btn) {
  color: inherit;
  text-decoration: none;
}

.item-list--carousel {
  margin-left: 0;
  padding-left: 0;
  list-style: none;
  overflow-x: scroll;
  scrollbar-width: none;
  display: flex;
  flex-wrap: nowrap;
  gap: 0 var(--app-grid-gutter-x);
}
.item-list--carousel .item__content {
  display: none;
}
.item-list--carousel > * {
  width: min(30vw, 178px);
  flex-grow: 0;
  flex-shrink: 0;
}

.label--label { /* レーベルのラベル */
  background-color: #C4C4C4;
  color: #5B5B5B !important;
  padding: 0 1em;
  border-radius: 1em;
  font-weight: 500;
  font-size: var(--app-font-size-small);
}

/* == block == */
.block--overallranings .nav {
  margin-bottom: 1em;
}

.nav--ranking-matrix {
  flex-wrap: nowrap;
  --bs-nav-tabs-border-width: 0;
  --bs-nav-link-font-size: var(--app-font-size-small);
  --bs-nav-tabs-border-radius: 0;
  --bs-nav-link-padding-x: 0.6em;
}
.nav--ranking-matrix > * {
  flex-grow: 1;
}
.nav--ranking-matrix.has-many {
  flex-wrap: wrap;
}
.nav--ranking-matrix.has-many > * {
  flex-basis: 33.3333333333%;
}
.nav--ranking-matrix .nav-link {
  width: 100%;
  border-bottom: 2px solid transparent;
}
.nav--ranking-matrix .nav-link.active {
  border-bottom-color: var(--tab-color, var(--app-corporate-color));
}
.nav--ranking-matrix [data-mode=male] {
  --tab-color: #7CB8E3;
}
.nav--ranking-matrix [data-mode=female] {
  --tab-color: #ED87B2;
}

.list--ranking {
  counter-reset: rank;
}
.list--ranking > li {
  counter-increment: rank;
}
.list--ranking.has-badge .item__thumbnail {
  position: relative;
}
.list--ranking.has-badge .item__thumbnail:before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  font-family: Spartan !important;
  /* Spartanフォントはbaselineから浮いている。line-height: 1にするとpaddingの上下が合わないので注意。 */
  line-height: var(--line-height, 1.2);
  font-weight: 800;
  font-size: var(--app-font-size-small);
  content: counter(rank);
  background: var(--app-corporate-color);
  color: #fff;
  width: 24px;
  height: 24px;
  padding-top: 0.5ex;
  text-align: center;
}
.list--ranking.has-badge .item__badge {
  display: none;
}

/* == / == */
.swiper-slide img {
  width: 100%;
}

/* == /videos/:id == */
.item__carousel video {
  width: 100%;
  height: auto;
}
.item__carousel .swiper--thumbs {
  margin-top: var(--app-spacer-xs);
}
.item__carousel .swiper--thumbs img {
  cursor: pointer;
}

.item--detail .item__header, .item--detail .item__carousel, .item--detail .item__sample_video {
  margin-bottom: var(--app-spacer-m);
}
.item--detail .item__brand {
  font-size: var(--app-font-size-small);
}
.item--detail .item__title {
  margin-bottom: var(--app-spacer-s);
  font-size: var(--app-font-size-large);
}
.item--detail .item__lower {
  margin-top: var(--app-spacer-l);
  margin-bottom: var(--app-spacer-l);
}
@media screen and (min-width: 768px) {
  .item--detail .item__upper .item__carousel {
    float: left;
    width: 50%;
  }
  .item--detail .item__upper .item__header,
  .item--detail .item__upper .item__buybox {
    padding-left: var(--app-spacer-m);
  }
  .item--detail .item__upper .item__header {
    float: right;
    width: 50%;
  }
  .item--detail .item__upper .item__sample_video {
    padding-top: var(--app-spacer-m);
  }
  .item--detail .item__upper .item__buybox {
    margin-left: 50%;
  }
}

.item__sample_video .btn {
  margin-left: auto;
  margin-right: auto;
}

.modal--no-padding {
  --bs-modal-header-padding: var(--app-spacer-s);
  --bs-modal-padding: 0;
  --bs-modal-width: min(90vw, 860px);
}

@media only screen and (orientation: landscape) {
  .modal--video .modal-dialog {
    max-width: 60vw;
  }
}

.buybox-variant {
  position: relative;
  display: block;
}
.buybox-variant input[type=radio] {
  display: none;
}
.buybox-variant .buybox-label {
  font-size: var(--app-font-size-small);
  padding: var(--app-spacer-s);
  display: flex;
  gap: var(--app-spacer-xs);
  align-items: center;
  border: 1px solid #FFFFFF;
  outline: 1px solid var(--app-bg-color);
}
.buybox-variant .buybox-label::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-width: 1px;
  border-style: solid;
  border-radius: 50%;
  padding: 2px;
  background-clip: content-box;
  box-sizing: content-box;
  border-color: var(--app-finance-color);
}
.buybox-variant input:checked + .buybox-label {
  background-color: #FFE2E2;
}
.buybox-variant input:checked + .buybox-label::before {
  border-color: var(--app-finance-color);
  background-color: var(--app-finance-color);
}
.buybox-variant .buybox-label__amount {
  font-family: Spartan !important;
  /* Spartanフォントはbaselineから浮いている。line-height: 1にするとpaddingの上下が合わないので注意。 */
  line-height: var(--line-height, 1.2);
  margin-left: auto;
}
.buybox-variant.buybox-subscription {
  background-color: #ffe2e2;
  border: 1.5px solid #e57373;
  margin: 1em 0;
  padding: 1.2em 1em;
  text-align: center;
  border-radius: 0.7em;
  display: flex;
  justify-content: center;
}
.buybox-variant.buybox-subscription .btn-success {
  background: #db6565;
  border-color: #e57373;
  color: #fff;
  font-size: 1.15em;
  min-width: 180px;
}
.buybox-variant.buybox-subscription .btn-success:hover {
  background: #c62828;
  border-color: #c62828;
}

.buybox-variant + .buybox-variant {
  margin-top: var(--app-spacer-xs);
}

.buybox-buttons {
  display: flex;
  flex-direction: column;
  gap: var(--app-spacer-xs);
  margin: var(--app-spacer-s) auto var(--app-spacer-m);
}
.buybox-buttons .btn-primary {
  --bs-btn-font-size: var(--app-font-size-medium);
}
.buybox-buttons .btn-secondary {
  --bs-btn-bg: var(--app-text-secondary-color);
  --bs-btn-border-color: var(--bs-btn-bg);
  margin: var(--app-spacer-xs) auto 0;
  max-width: max-content;
}
.buybox-buttons .icon-basket {
  --icon-size: 1.2em;
}

.buybox-disclaimer {
  padding: var(--app-spacer-xs) 0;
  font-size: 0.875em;
  color: var(--app-text-secondary-color);
}

.purchase-links {
  font-size: 0.875em;
  color: var(--app-text-secondary-color);
}
.purchase-links a {
  text-transform: uppercase;
}
.purchase-links .menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5ex 1em;
}
.purchase-links .box-heading {
  font-weight: 700;
  border-bottom: 1px solid;
  margin-bottom: 1ex;
}

/* == /videos/ == */
.catalogue__header .page-header__cover img {
  max-width: min(100%, 35em);
}

.catalogue__filters #div_id_sort {
  display: none;
}
.catalogue__filters .section__title {
  font-family: Spartan !important;
  /* Spartanフォントはbaselineから浮いている。line-height: 1にするとpaddingの上下が合わないので注意。 */
  line-height: var(--line-height, 1.2);
  text-transform: uppercase;
  font-weight: 500;
  font-size: var(--app-font-size-large);
  text-align: center;
}
.catalogue__filters .form-field > label {
  font-family: Spartan !important;
  /* Spartanフォントはbaselineから浮いている。line-height: 1にするとpaddingの上下が合わないので注意。 */
  line-height: var(--line-height, 1.2);
  text-transform: uppercase;
  font-weight: 500;
  font-size: var(--app-font-size-medium);
}
.catalogue__filters .form-field .field-wrapper {
  padding: 0 1ex var(--app-spacer-m);
}
.catalogue__filters .sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.catalogue__filters .sidebar-header h3 {
  margin-bottom: 0;
}
.catalogue__filters .btn {
  width: 100%;
}

.catalogue__actions {
  margin-bottom: var(--app-spacer-m);
  display: flex;
  justify-content: space-between;
  /* crispy_field 打ち消し */
}
.catalogue__actions label, .catalogue__actions .btn {
  font-family: Spartan !important;
  /* Spartanフォントはbaselineから浮いている。line-height: 1にするとpaddingの上下が合わないので注意。 */
  line-height: var(--line-height, 1.2);
  font-size: var(--app-font-size-small);
  text-transform: uppercase;
}
.catalogue__actions .form-field.mb-3 {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 0 !important;
  gap: 1ex;
}
.catalogue__actions .form-field.mb-3 > * {
  width: auto;
}
.catalogue__actions .form-field.mb-3 .col-form-label {
  padding: 0;
}
.catalogue__actions .form-field.mb-3 .col-10 {
  padding-left: 0;
}

.catalogue__sort {
  flex-grow: 1;
  text-align: right;
  gap: 1ex;
}
.catalogue__sort .form-label {
  margin-bottom: 0;
}
.catalogue__sort .form-select {
  display: inline-block;
  width: auto;
}

@media screen and (min-width: 768px) {
  .catalogue.has-sidebar {
    display: grid;
    /* 25% ~= col-3 */
    grid-template-columns: 25% 1fr;
    grid-template-areas: "filters main";
  }
  .catalogue.has-sidebar .catalogue__filters {
    grid-area: filters;
  }
  .catalogue.has-sidebar .catalogue__main {
    grid-area: main;
  }
  .catalogue.has-sidebar .catalogue__filters-opener {
    visibility: hidden;
  }
  .catalogue.has-sidebar .catalogue__filters {
    padding-right: var(--app-spacer-m);
  }
  .catalogue.has-sidebar .sidebar-header {
    display: block;
  }
}

/* banners */
.banner-list {
  align-items: center;
}

.banner-list--centered {
  justify-content: center;
}

/* == /labels/ == */
.item-banner__logo a {
  display: block;
  position: relative;
  text-align: center;
}
.item-banner__logo a::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  display: block;
  z-index: 2;
  transition: background var(--app-transition-duration);
}
.item-banner__logo a:hover::before {
  background-color: rgba(255, 255, 255, 0.2);
}

.banner--series-small {
  width: 105px;
}

.label-grid {
  text-align: center;
}
.label-grid a:not(.btn) {
  color: inherit;
  text-decoration: none;
}
.label-grid a:hover, .label-grid a:focus, .label-grid a:active {
  text-decoration: underline;
}

.label-list .item-label {
  display: flex;
  align-items: center;
}
.label-list .item-label > * {
  flex: 1;
}
.label-list .item-label__logo {
  text-align: center;
}
.label-list .item-label__text {
  padding-left: var(--app-spacer-m);
}
.label-list .item-label__name {
  font-size: var(--app-font-size-large);
  font-weight: 500;
}
.label-list .item-label__name a:not(.btn) {
  color: inherit;
  text-decoration: none;
}
.label-list .item-label__name a:hover, .label-list .item-label__name a:focus, .label-list .item-label__name a:active {
  text-decoration: underline;
}

/* == /categories/ == */
.category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media screen and (min-width: 768px) {
  .category-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}
.category-grid .grid__item {
  padding: var(--app-spacer-xs);
}
.category-grid .grid__item a:not(.btn) {
  color: inherit;
  text-decoration: none;
}
.category-grid .grid__item a {
  border: 1px solid var(--app-bg-secondary-color);
  display: block;
  padding: 1em 0;
  text-align: center;
}
.category-grid .grid__item a:hover {
  color: var(--app-text-secondary-color);
}

/* == /subscriptions/ == */
.subscription-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
@media screen and (min-width: 768px) {
  .subscription-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}
.subscription-grid .grid__item {
  padding: var(--app-spacer-xs);
}
.subscription-grid .grid__item a:not(.btn) {
  color: inherit;
  text-decoration: none;
}
.subscription-grid .grid__item a {
  border: 1px solid var(--app-bg-secondary-color);
  display: block;
  padding: 1em 0;
  text-align: center;
}
.subscription-grid .grid__item a:hover {
  color: var(--app-text-secondary-color);
}

.subscription-detail .subscription__header {
  margin-bottom: var(--app-spacer-m);
  max-width: 800px;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
.subscription-detail .subscription__header .subscription__title {
  font-size: var(--app-font-size-large);
  font-weight: 600;
}
.subscription-detail .subscription__header .subscription__description {
  font-size: var(--app-font-size-medium);
  color: var(--app-text-secondary-color);
}
.subscription-detail .subscription__price {
  font-size: var(--app-font-size-large);
  font-weight: 700;
  color: var(--app-finance-color);
}
.subscription-detail .subscription__buybox {
  margin-top: var(--app-spacer-m);
}

/* == /rank/ == */
.ranking-header .page-title {
  padding-bottom: var(--app-spacer-l);
}

.ranking-navi {
  display: flex;
}
.ranking-navi .ranking-navi__matrix-group {
  display: flex;
}

/* == /mypage/basket/ == */
.checkout-item {
  padding-bottom: var(--app-spacer-m);
  margin-bottom: var(--app-spacer-m);
  border: 1px solid var(--app-bg-secondary-color);
  border-width: 0 0 1px;
}
.checkout-item:first-child {
  padding-top: var(--app-spacer-m);
  border-top-width: 1px;
}
.checkout-item .item {
  --color-price: var(--bs-body-color);
  flex-grow: 1;
}
.checkout-item .checkout-item__action {
  display: flex;
  justify-content: flex-end;
  gap: 1ex;
}
.checkout-item .checkout-item__action a {
  display: inline-block;
}
@media screen and (min-width: 768px) {
  .checkout-item {
    display: flex;
    align-items: center;
  }
  .checkout-item .checkout-item__item {
    flex-grow: 1;
    display: flex;
    gap: var(--app-spacer-s);
  }
  .checkout-item .checkout-item__action {
    padding: 0 var(--app-spacer-s);
    justify-content: center;
  }
}

.checkout-box {
  padding: calc(var(--app-inner-gutter-x) * 0.5);
  border-radius: var(--bs-border-radius);
  background-color: var(--app-bg-secondary-color);
}

.checkout-finance-row > * {
  display: block;
}

.checkout-finance__number {
  font-weight: 800;
  font-size: var(--app-font-size-large);
}

.checkout-submit {
  margin-top: var(--app-spacer-s);
  margin-bottom: var(--app-spacer-m);
}

/* == /mypage/basket/done/ == */
.basket-thankyou {
  text-align: center;
  padding: 50px;
  background-image: url(../images/basket-thankyou-header-bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 250px;
}
.basket-thankyou .page-title {
  font-size: 48px;
  font-weight: 600;
  padding: 0;
  font-family: Spartan !important;
  /* Spartanフォントはbaselineから浮いている。line-height: 1にするとpaddingの上下が合わないので注意。 */
  line-height: var(--line-height, 1.2);
  -webkit-text-stroke: 1px #FFF;
  text-stroke: 1px #FFF;
  text-shadow: white 2px 0px 10px, white -2px 0px 10px, white 0px -2px 10px, white -2px 0px 10px, white 2px 2px 10px, white -2px 2px 10px, white 2px -2px 10px, white -2px -2px 5px, white 1px 2px 5px, white -1px 2px 2px, white 1px -2px 2px, white -1px -2px 2px, white 2px 1px 2px, white -2px 1px 2px, white 2px -1px 2px, white -2px -1px 2px, white 1px 1px 2px, white -1px 1px 2px, white 1px -1px 2px, white -1px -1px 2px;
}
.basket-thankyou p {
  text-shadow: white 2px 0px 2px, white -2px 0px 2px, white 0px -2px 2px, white -2px 0px 2px, white 2px 2px 2px, white -2px 2px 2px, white 2px -2px 2px, white -2px -2px 2px, white 1px 2px 2px, white -1px 2px 2px, white 1px -2px 2px, white -1px -2px 2px, white 2px 1px 2px, white -2px 1px 2px, white 2px -1px 2px, white -2px -1px 2px, white 1px 1px 2px, white -1px 1px 2px, white 1px -1px 2px, white -1px -1px 2px;
}
@media screen and (min-width: 768px) {
  .basket-thankyou {
    padding-top: 125px;
    min-height: 350px;
  }
}

.basket-done-namelist {
  margin-top: var(--app-spacer-m);
}
.basket-done-namelist .section-title {
  font-size: var(--app-font-size-large);
  color: var(--app-text-secondary-color);
  text-transform: uppercase;
  text-align: center;
  font-family: Spartan !important;
  /* Spartanフォントはbaselineから浮いている。line-height: 1にするとpaddingの上下が合わないので注意。 */
  line-height: var(--line-height, 1.2);
}

/* == /mypage/videos/ == */
.item-list--trades .item .item__content {
  display: block;
}

.item--trade {
  --color-price: var(--app-text-secondary-color);
}
.item--trade .item__title {
  font-size: var(--app-font-size-medium);
}
.item--trade .item__meta--price,
.item--trade .item__meta--label {
  display: inline-block;
  margin-bottom: 1ex;
}
.item--trade .item__meta--created,
.item--trade .item__meta--next,
.item--trade .item__meta--remaining {
  font-size: var(--app-font-size-small);
}

.video-expire.is-expired, .video-expire.is-soon {
  color: #d93b3b;
}

.purchased-video-player {
  background-color: var(--bs-dark);
  color: #fff;
  max-width: 1200px;
  margin: auto;
}
.purchased-video-player .player__title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--app-font-size-large);
  color: #FFFFFF;
  padding: 0.5em var(--app-spacer-s);
}
.purchased-video-player .player__main {
  position: relative;
}
.purchased-video-player .player__button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.video-player-iframe {
  display: block;
  width: 100%;
  border: none;
  aspect-ratio: 16/9;
}

.vjs-watermark {
  position: absolute;
  bottom: 14px;
  right: 5px;
  padding-top: 0.5em;
  color: rgba(255, 255, 255, 0.4);
  font-size: 18px;
  z-index: 0;
}

.purchased-video-info {
  margin-top: var(--app-spacer-l);
  margin-bottom: var(--app-spacer-l);
}
.purchased-video-info .item__badge, .purchased-video-info .item__title {
  display: none;
}

/* == /mypage/points/ == */
.paymentselect__balance {
  font-size: var(--app-font-size-large);
  font-weight: 600;
  text-align: center;
  color: var(--app-finance-color);
}

.form-point-paymentselect .form-actions,
.payment-process [type=submit] {
  max-width: 500px;
  margin: auto;
}

.paymentselect__paymenttype {
  --label-color-bg: #fff;
  --indicator-inner-color: transparent;
  --indicator-outer-color: var(--app-finance-color);
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid #FFFFFF;
  outline: 1px solid var(--app-bg-color);
  gap: var(--app-spacer-s);
  padding: var(--app-spacer-m) var(--app-spacer-s);
  margin-bottom: var(--app-spacer-xs);
}
.paymentselect__paymenttype label {
  flex-grow: 1;
}
.paymentselect__paymenttype label::before {
  /* 背景色 */
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--label-color-bg);
  z-index: -1;
}

.paymentselect__paymenttype input[type=radio] {
  accent-color: var(--indicator-outer-color);
  appearance: none;
  width: 14px;
  height: 14px;
  padding: 2px;
  border: 1px solid var(--indicator-outer-color);
  border-radius: 50%;
  background-color: var(--indicator-inner-color);
  background-clip: content-box;
}
.paymentselect__paymenttype input[type=radio]:focus {
  outline: 0;
  box-shadow: 0 0 0.25rem 0 var(--indicator-outer-color);
}
.paymentselect__paymenttype input[type=radio]::selection {
  background-color: var(--indicator-outer-color);
}
.paymentselect__paymenttype input[type=radio]::marker {
  color: var(--indicator-outer-color);
}
.paymentselect__paymenttype input[type=radio]:checked {
  --label-color-bg: #FFE2E2;
  --indicator-inner-color: var(--app-finance-color);
}
.paymentselect__paymenttype input[type=radio]:disabled {
  --indicator-outer-color: var(--app-text-secondary-color);
}
.paymentselect__paymenttype :checked + label {
  --label-color-bg: #FFE2E2;
}
.paymentselect__paymenttype :disabled + label {
  --label-color-bg: var(--app-bg-secondary-color);
  opacity: 0.5;
}
.paymentselect__paymenttype label {
  display: flex;
  gap: var(--app-spacer-s);
  align-items: center;
}

.paymentselect__amount-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--app-spacer-xs);
}
@media screen and (min-width: 768px) {
  .paymentselect__amount-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.paymentselect__amount {
  --label-color-bg: #fff;
  --indicator-inner-color: transparent;
  --indicator-outer-color: var(--app-finance-color);
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid #FFFFFF;
  outline: 1px solid var(--app-bg-color);
  padding: var(--app-spacer-s) var(--app-spacer-xs);
  gap: var(--app-spacer-xs);
}
.paymentselect__amount label {
  flex-grow: 1;
}
.paymentselect__amount label::before {
  /* 背景色 */
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--label-color-bg);
  z-index: -1;
}
.paymentselect__amount label::after {
  /* クリック範囲 */
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.paymentselect__amount input[type=radio] {
  accent-color: var(--indicator-outer-color);
  appearance: none;
  width: 14px;
  height: 14px;
  padding: 2px;
  border: 1px solid var(--indicator-outer-color);
  border-radius: 50%;
  background-color: var(--indicator-inner-color);
  background-clip: content-box;
}
.paymentselect__amount input[type=radio]:focus {
  outline: 0;
  box-shadow: 0 0 0.25rem 0 var(--indicator-outer-color);
}
.paymentselect__amount input[type=radio]::selection {
  background-color: var(--indicator-outer-color);
}
.paymentselect__amount input[type=radio]::marker {
  color: var(--indicator-outer-color);
}
.paymentselect__amount input[type=radio]:checked {
  --label-color-bg: #FFE2E2;
  --indicator-inner-color: var(--app-finance-color);
}
.paymentselect__amount input[type=radio]:disabled {
  --indicator-outer-color: var(--app-text-secondary-color);
}
.paymentselect__amount :checked + label {
  --label-color-bg: #FFE2E2;
}
.paymentselect__amount :disabled + label {
  --label-color-bg: var(--app-bg-secondary-color);
  opacity: 0.5;
}
@media screen and (min-width: 768px) {
  .paymentselect__amount {
    padding: var(--app-spacer-m) var(--app-spacer-xs);
  }
}
.paymentselect__amount label {
  font-size: var(--app-font-size-medium);
}
@media screen and (max-width: 767px) {
  .paymentselect__amount label {
    width: 100%;
  }
  .paymentselect__amount label .paymentselect__amount__price {
    display: block;
    text-align: right;
  }
}
@media screen and (min-width: 768px) {
  .paymentselect__amount label {
    display: flex;
    height: 100%;
    gap: var(--app-spacer-xs);
    align-items: center;
  }
}
.paymentselect__amount .paymentselect__amount__total {
  color: var(--app-finance-color);
  font-weight: 600;
  font-family: Spartan !important;
  /* Spartanフォントはbaselineから浮いている。line-height: 1にするとpaddingの上下が合わないので注意。 */
  line-height: var(--line-height, 1.2);
  flex-grow: 1;
}
.paymentselect__amount .paymentselect__amount__price {
  color: var(--app-text-secondary-color);
}

.paymentselect__custom-amount {
  margin-top: 1em;
  opacity: 1;
}
.paymentselect__custom-amount.hide {
  opacity: 0;
}

.payment-finance-row {
  display: flex;
  font-size: var(--app-font-size-medium);
  font-weight: 600;
  padding: 1.25em var(--app-spacer-m);
  border-radius: var(--bs-border-radius);
  border: 1px solid var(--app-bg-secondary-color);
  margin-bottom: var(--app-spacer-s);
}
.payment-finance-row .payment-finance__label {
  color: var(--app-text-secondary-color);
  width: 10em;
  white-space: nowrap;
}
@media screen and (min-width: 768px) {
  .payment-finance-row .payment-finance__label {
    width: 200px;
  }
}
.payment-finance-row .payment-finance__number {
  font-weight: 800;
  color: var(--app-badge-sale);
  font-family: Spartan !important;
  /* Spartanフォントはbaselineから浮いている。line-height: 1にするとpaddingの上下が合わないので注意。 */
  line-height: var(--line-height, 1.2);
}

.pointlog-list .pointlog-item {
  padding-bottom: calc(var(--app-spacer-m) * 0.5);
  margin-bottom: calc(var(--app-spacer-m) * 0.5);
  border-bottom: var(--app-bg-secondary-color) 1px solid;
  font-size: var(--app-font-size-small);
  display: grid;
  grid-template-areas: "date notes" "numbers numbers";
  grid-template-columns: auto 1fr;
  gap: 2px var(--app-spacer-s);
}
.pointlog-list .pointlog-item .item__date {
  grid-area: date;
}
.pointlog-list .pointlog-item .item__notes {
  grid-area: notes;
}
.pointlog-list .pointlog-item .item__numbers {
  grid-area: numbers;
}
.pointlog-list .pointlog-item .item__date {
  width: max-content;
}
.pointlog-list .pointlog-item .item__notes {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pointlog-list .pointlog-item .item__numbers {
  display: flex;
  justify-content: flex-end;
  gap: var(--app-spacer-s);
}
.pointlog-list .pointlog-item .item__status {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  font-weight: bold;
  border-radius: 0.25rem;
  color: #fff;
}
.pointlog-list .pointlog-item .item__status::before {
  content: "";
}
.pointlog-list .pointlog-item .item__status::after {
  content: attr(data-status);
}
.pointlog-list .pointlog-item .item__status.active {
  background-color: #28a745;
}
.pointlog-list .pointlog-item .item__status.inactive {
  background-color: #6c757d;
}
.pointlog-list .pointlog-item--minus {
  color: var(--app-finance-color);
}
.pointlog-list .item__number-label {
  font-weight: 600;
  font-size: var(--app-font-size-minimum);
  line-height: 1;
  padding: 2px 1ex;
  align-items: center;
  text-align: center;
  color: var(--app-text-secondary-color);
  background: var(--app-bg-secondary-color);
  border-radius: 5em;
}

/* == /videos/favs/ == */
.item-list--grid.item-list--favorites .item__content {
  display: initial;
}

.favorite-list__footer {
  margin-top: var(--app-spacer-m);
  padding: var(--app-spacer-s) var(--app-spacer-s) 0;
  border-top: 1px solid var(--app-bg-secondary-color);
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
}
.favorite-list__footer .favorite__checkall {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 1em;
}
/* buybox-label */
.buybox__label {
  margin-bottom: 1em;
  display: flex;
  align-items: center;
}

.buybox__label-link {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.buybox__label-logo {
  height: 1em;
  max-width: 1em;
}

.buybox__label-name {
  font-weight: bold;
  font-size: 1.1em;
  color: #222;
}

/* buybox-meta-row */
.buybox__meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2em;
  margin-bottom: 1.2em;
}

/* buybox-metas */
.buybox__metas {
  display: flex;
  align-items: center;
  gap: 1.2em;
}

/* x-link-icon */
.x-link-icon {
  width: 2.2em;
  height: 2.2em;
  display: inline;
  vertical-align: middle;
  opacity: 0.85;
}

/* buybox-xlink */
.buybox__xlink {
  display: flex;
  align-items: center;
  gap: 0.3em;
}

/* buybox-buttons */
.buybox__buttons {
  display: flex;
  align-items: center;
  gap: 0.6em;
}

/* buybox-favorite */
.buybox__favorite {
  display: flex;
  align-items: center;
  gap: 1.2em;
}

/* buybox-subscription */
.buybox-subscription {
  font-size: var(--app-font-size-small);
  padding: var(--app-spacer-s);
  display: flex;
  gap: var(--app-spacer-xs);
  align-items: center;
  border: 1px solid #FFFFFF;
  outline: 1px solid var(--app-bg-color);
}

.buybox-subscription-link {
  display: inline-block;
  background: var(--app-corporate-color, #1976d2);
  color: #fff;
  font-weight: 600;
  font-size: 1em;
  border-radius: 2em;
  padding: 0.8em 1.2em;
  text-decoration: none;
  transition: background 0.2s;
  margin-right: 0.7em;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
  border: none;
  cursor: pointer;
}

.buybox-subscription-link:hover, .buybox-subscription-link:focus {
  background: #125ea7;
  color: #fff;
  text-decoration: none;
}

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