@charset "UTF-8";

.ct_bg div, .ct_bg pre, .ct_bg p, .ct_bg blockquote, .ct_bg figure, .ct_bg dl, .ct_bg dt, .ct_bg dd, .ct_bg ul, .ct_bg ol, .ct_bg li, .ct_bg h1, .ct_bg h2, .ct_bg h3, .ct_bg h4, .ct_bg h5, .ct_bg h6, .ct_bg form, .ct_bg fieldset, .ct_bg th, .ct_bg td {

  margin: 0;

  padding: 0;

}

.ct_bg input, .ct_bg textarea {

  margin: 0;

  font-size: 100%;

}

.ct_bg label {

  cursor: pointer;

}

.ct_bg table {

  border-collapse: collapse;

  border-spacing: 0;

  font-size: 100%;

}

.ct_bg fieldset, .ct_bg img {

  border: 0;

}

.ct_bg img {

  max-width: 100%;

  height: auto;

  vertical-align: top;

}

.ct_bg address, .ct_bg caption, .ct_bg cite, .ct_bg code, .ct_bg dfn, .ct_bg em, .ct_bg th, .ct_bg var {

  font-style: normal;

  font-weight: normal;

}

.ct_bg ol, .ct_bg ul {

  list-style: none;

}

.ct_bg caption, .ct_bg th {

  text-align: left;

}

.ct_bg h1, .ct_bg h2, .ct_bg h3, .ct_bg h4, .ct_bg h5, .ct_bg h6 {

  font-size: 100%;

  font-weight: normal;

}

.ct_bg q:after, .ct_bg q:before {

  content: '';

}

.ct_bg a, .ct_bg input {

  outline: none;

}

.ct_bg abbr, .ct_bg acronym {

  border: 0;

}

.ct_bg span, .ct_bg small {

  font-family: inherit;

  font-weight: inherit;

}

.ct_bg strong {

  font-family: inherit;

  font-weight: bold;

}

.ct_bg li:before {

  content: normal;

  width: auto;

  height: auto;

  background: none;

  border-radius: 0;

  position: initial;

  left: auto;

  top: auto;

}

#contents {

  padding: 0;

  width: 100%;

}

.c-pagetop {

  z-index: 99;

}

.fb_iframe_widget > span {

  vertical-align: baseline !important;

}

.ct_bg {

  position: relative;

  isolation: isolate;

  box-sizing: border-box;

  width: 100vw;

  max-width: none;

  margin-left: calc(50% - 50vw);

  margin-right: calc(50% - 50vw);

  overflow: hidden;

  background: #FFE8F2 url("/img/products/pixtube/common/img/bg01_pc.jpg") no-repeat fixed 0 0/cover;

}

.ct_bg .pcNone02 {

  display: none !important;

}

.ct_bg::before {

  content: none;

}

.ct_bg .c_inner01 {

  max-width: 1040px;

  margin: 0 auto;

  padding: 0 20px;

  position: relative;

}

.ct_bg .headTitleArea01 {

  padding: 6px 0;

  background: #E62E8B;

}

.ct_bg .headTitleArea01 h1 {

  color: #fff;

  text-align: center;

  font-size: 14px;

  line-height: 1.5;

  font-family: "M PLUS 1", sans-serif;

  font-weight: 800;

  font-style: normal;

  font-feature-settings: "palt";

  transform: rotate(0.03deg);

}

.ct_bg .lowerHeadTitleArea {

  padding: 6px 68px 6px 0;

}

.ct_bg .shortMovieWrap {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: 4.0080160321%;

  width: 998px;

  margin: 0 auto;

}

.ct_bg .shortMovieWrap .movieWrap02 {

  flex: 0 0 30.6613226453%;

}

.ct_bg .shortMovieWrap .movieWrap02:nth-child(n + 4) {

  margin-top: 4.0080160321%;

}

.ct_bg .iframeWrap01,

.ct_bg .iframeWrap02 {

  box-sizing: content-box;

  position: relative;

  overflow: hidden;

  border: 6px solid #E5E632;

}

.ct_bg .iframeWrap01 iframe,
.ct_bg .iframeWrap02 iframe {
  display: block;
  box-sizing: border-box;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  position: absolute;
  top: 0 !important;
  right: 0;
  bottom: 0;
  left: 0 !important;
  width: 100%;
  height: 100%;
  max-width: none;
  vertical-align: top;
}
.ct_bg .iframeWrap01 {

  aspect-ratio: 16 / 9;

}

.ct_bg .iframeWrap02 {

  aspect-ratio: 9 / 16;

}

.ct_bg .caption01 {

  margin-top: 5px;

  color: #E5E632;

  font-size: 20px;

  line-height: 1.5;

  font-family: "M PLUS 1", sans-serif;

  font-optical-sizing: auto;

  font-weight: 800;

  font-style: normal;

}

.ct_bg .movieContents01 .movieWrap01 {

  display: flex;

  flex-wrap: wrap;

}

.ct_bg .movieContents01 .movieWrap01 > .movieCol01 {

  width: 48%;

}

.ct_bg .movieContents01 .movieWrap01 > .movieCol01:nth-child(even) {

  margin-left: 4%;

}

.ct_bg .movieContents01 .movieWrap01 > .movieCol01:nth-child(n + 3) {

  margin-top: 4%;

}

.ct_bg .movieArea.is-movie-slider .movieContents01 {

  position: relative;

  z-index: 4;

}

.ct_bg .movieArea.is-movie-slider .movieSliderFrame {

  position: relative;

  width: 1000px;

  margin-left: 50%;

  transform: translateX(-50%);

}

.ct_bg .movieArea.is-movie-slider .movieSliderViewport {

  overflow: hidden;

  touch-action: pan-y;

}

.ct_bg .movieArea.is-movie-slider .movieSliderTrack {

  display: flex;

  flex-wrap: nowrap;

  justify-content: flex-start;

  gap: 40px;

  width: auto;

  margin: 0;

  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);

  will-change: transform;

}

.ct_bg .movieArea.is-movie-slider .movieSliderItem {

  box-sizing: border-box;

  flex: 0 0 auto;

  margin: 0 !important;

  padding: 0;

  opacity: 1;

  transition: opacity .25s ease, filter .25s ease;

}

.ct_bg .movieArea.is-movie-slider .movieSliderItem.is-current {

  opacity: 1;

  filter: none;

}

.ct_bg .movieArea.is-movie-slider .movieWrap01 > .movieCol01 {

  width: auto;

  flex-basis: 800px;

}

.ct_bg .movieArea.is-movie-slider .iframeWrap01,

.ct_bg .movieArea.is-movie-slider .iframeWrap02 {

  background: #d9d9d9;

}

.ct_bg .movieArea.is-movie-slider .caption01 {

  min-height: 3em;

  color: #E5E632;

}

.ct_bg .movieArea.is-movie-slider .movieSliderArrow {

  position: absolute;

  z-index: 6;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 38px;

  height: 80px;

  border: 4px solid #fff;

  border-radius: 8px;

  background: #01B2B3;

  box-shadow: none;

  cursor: pointer;

  appearance: none;

  transition: background .2s ease;

}

.ct_bg .movieArea.is-movie-slider .movieSliderArrow span {

  display: block;

  width: 18px;

  height: 28px;

  background: url("/img/products/pixtube/common/img/ic_arrow03.svg") no-repeat 50% 50%/contain;

}

.ct_bg .movieArea.is-movie-slider .movieSliderArrow.is-next span {

  transform: scaleX(-1);

}

.ct_bg .movieArea.is-movie-slider .is-main-movie .movieSliderArrow {

  top: calc(13px + ((108px - 80px) / 2));

}

.ct_bg .movieArea.is-movie-slider .is-main-movie .movieSliderArrow.is-prev {

  left: 0;

  border-left: 0;

  border-radius: 0 8px 8px 0;

}

.ct_bg .movieArea.is-movie-slider .is-main-movie .movieSliderArrow.is-next {

  right: 0;

  border-right: 0;

  border-radius: 10px 0 0 10px;

}

.ct_bg .movieArea.is-movie-slider .movieSliderThumbViewport {

  position: relative;

  width: 1000px;

  max-width: 100%;

  margin: 15px auto 0;

  padding-top: 13px;

  overflow: hidden;

  touch-action: pan-y;

  user-select: none;

  -webkit-user-select: none;

}

.ct_bg .movieArea.is-movie-slider .movieSliderThumbs {

  display: flex;

  justify-content: flex-start;

  gap: 10px;

  width: max-content;

  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);

  will-change: transform;

}

.ct_bg .movieArea.is-movie-slider .movieSliderThumb {

  position: relative;

  box-sizing: border-box;

  flex: 0 0 192px;

  height: 108px;

  padding: 0;

  border: 5px solid #fff;

  background: #d9d9d9;

  cursor: pointer;

  appearance: none;

  user-select: none;

  -webkit-user-select: none;

}

.ct_bg .movieArea.is-movie-slider .movieSliderThumb::before {

  content: "";

  position: absolute;

  left: 50%;

  top: -17px;

  width: 0;

  height: 0;

  border-right: 8px solid transparent;

  border-bottom: 13px solid #E5E632;

  border-left: 8px solid transparent;

  opacity: 0;

  transform: translateX(-50%);

}

.ct_bg .movieArea.is-movie-slider .movieSliderThumb.is-current {

  border-color: #E5E632;

}

.ct_bg .movieArea.is-movie-slider .movieSliderThumb.is-current::before {

  opacity: 1;

}

.ct_bg .movieArea.is-movie-slider .movieSliderThumb img {

  display: block;

  width: 100%;

  height: 100%;

  object-fit: cover;

  pointer-events: none;

  user-select: none;

  -webkit-user-select: none;

  -webkit-user-drag: none;

}

.ct_bg .movieArea.is-movie-slider .is-short-movie {

  width: 998px;

  margin-top: 0;

}

.ct_bg .movieArea.is-movie-slider .is-short-movie .movieSliderArrow {

  top: calc(50% - 72px);

}

.ct_bg .movieArea.is-movie-slider .is-short-movie .movieSliderArrow.is-prev {

  left: 0;

  border-left: 0;

  border-radius: 0 8px 8px 0;

}

.ct_bg .movieArea.is-movie-slider .is-short-movie .movieSliderArrow.is-next {

  right: 0;

  border-right: 0;

  border-radius: 10px 0 0 10px;

}

.ct_bg .movieArea.is-movie-slider .shortMovieWrap {

  width: auto;

  gap: 40px;

}

.ct_bg .movieArea.is-movie-slider .shortMovieWrap .movieWrap02 {

  flex-basis: 306px;

  padding: 0;

}

.ct_bg .movieArea.is-movie-slider .shortMovieWrap .movieWrap02:nth-child(n + 2) {

  margin-top: 0;

}

.ct_bg .movieArea.is-movie-slider .btn_link {

  position: relative;

  z-index: 5;

}

.ct_bg .mainArea01 {

  overflow: hidden;

  background: url("/img/products/pixtube/img/bg_index01_pc.png") no-repeat 50% 0/1005px;

}

.ct_bg .mainArea01 .c_inner01 {

  height: 730px;

  padding-top: 9px;

}

.ct_bg .mainArea01 .title {

  position: relative;

  z-index: 1;

}

.ct_bg .mainArea01 .hontai_pink {

  position: absolute;

  top: 216px;

  left: calc(50% - 405px);

  width: 407px;

  transform: rotate(-11.45deg);

}

.ct_bg .mainArea01 .hontai_purple {

  position: absolute;

  top: 79px;

  left: calc(50% + 1px);

  width: 405px;

  transform: rotate(9.44deg);

}

.ct_bg .mainArea01 .tx01 {

  position: absolute;

  bottom: 18px;

  right: 34px;

  color: #fff;

  font-size: 20px;

  line-height: 1.2;

  text-shadow: #88318D 2px 0px 0px, #88318D 1.755165px 0.958851px 0px, #88318D 1.080605px 1.682942px 0px, #88318D 0.141474px 1.99499px 0px, #88318D -0.832294px 1.818595px 0px, #88318D -1.602287px 1.196944px 0px, #88318D -1.979985px 0.28224px 0px, #88318D -1.872913px -0.701566px 0px, #88318D -1.307287px -1.513605px 0px, #88318D -0.421592px -1.95506px 0px, #88318D 0.567324px -1.917849px 0px, #88318D 1.41734px -1.411081px 0px, #88318D 1.920341px -0.558831px 0px;

}

.ct_bg .mainArea01 .character01 {

  position: absolute;

  top: 259px;

  left: calc(50% - 707px);

  width: 320px;

  transform: rotate(-5deg);

  transform-origin: 50% 85%;

}

.ct_bg .mainArea01 .character02 {

  position: absolute;

  top: 54px;

  left: calc(50% + 402px);

  width: 320px;

  transform: rotate(5deg);

  transform-origin: 50% 85%;

}

.ct_bg .mainArea01 .character03 {

  position: absolute;

  top: 60px;

  left: calc(50% - 683px);

  width: 200px;

  transform: rotate(15deg);

  transform-origin: 50% 85%;

}

.ct_bg .mainArea01 .character04 {

  position: absolute;

  bottom: 45px;

  left: calc(50% + 401px);

  width: 200px;

  transform: rotate(-15deg);

  transform-origin: 50% 85%;

}

.ct_bg .mainArea01.is-ready .title,

.ct_bg .mainArea01.is-ready .hontai_pink,

.ct_bg .mainArea01.is-ready .hontai_purple,

.ct_bg .mainArea01.is-ready .character01,

.ct_bg .mainArea01.is-ready .character02,

.ct_bg .mainArea01.is-ready .character03,

.ct_bg .mainArea01.is-ready .character04 {

  opacity: 0;

  filter: blur(8px);

  transition: opacity .45s ease, filter .45s ease;

}

.ct_bg .mainArea01.is-main-chara01 .character01 {

  opacity: 1;

  filter: blur(0);

  animation: mainAreaBoingChara01 1.2s ease-in-out 1.75s infinite;

}

.ct_bg .mainArea01.is-main-chara02 .character02 {

  opacity: 1;

  filter: blur(0);

  animation: mainAreaBoingChara02 1.2s ease-in-out 1.87s infinite;

}

.ct_bg .mainArea01.is-main-chara03 .character03 {

  opacity: 1;

  filter: blur(0);

  animation: mainAreaBoingChara03 1.2s ease-in-out 1.99s infinite;

}

.ct_bg .mainArea01.is-main-chara04 .character04 {

  opacity: 1;

  filter: blur(0);

  animation: mainAreaBoingChara04 1.2s ease-in-out 2.11s infinite;

}

.ct_bg .mainArea01.is-main-logo .title {

  opacity: 1;

  filter: blur(0);

}

.ct_bg .mainArea01.is-main-toy .hontai_pink,

.ct_bg .mainArea01.is-main-toy .hontai_purple {

  opacity: 1;

  filter: blur(0);

}

.ct_bg .section01 {

  overflow-x: clip;

  overflow-y: visible;

}

.ct_bg .text_link {

  display: block;

  max-width: 420px;

  width: 100%;

  margin: 0 auto 0;

  position: relative;

  z-index: 2;

}

.ct_bg .text_link > a {

  box-sizing: border-box;

  display: flex;

  align-items: center;

  justify-content: center;

  height: 82px;

  padding: 10px 25px;

  border-radius: 10px;

  color: #fff;

  font-family: "M PLUS 1", sans-serif;

  font-size: 28px;

  font-weight: 800;

  line-height: 1.2;

  text-align: center;

  text-decoration: none;

  overflow: hidden;

  position: relative;

  transform: rotate(0.03deg);

  cursor: pointer;

}

.ct_bg .text_link > a::before, .ct_bg .text_link > a::after {

  content: "";

  position: absolute;

  inset: 0;

  border-radius: inherit;

}

.ct_bg .text_link > a::before {

  background: linear-gradient(180deg, #FF98E5 0%, #EA4AF9 100%);

}

.ct_bg .text_link > a::after {

  background: linear-gradient(180deg, #E62E8B 0%, #931286 100%);

  opacity: 1;

  transition: opacity .2s ease;

}

.ct_bg .text_link > a > span {

  position: relative;

  z-index: 1;

  padding-left: 52px;

}

.ct_bg .text_link > a > span::before {

  content: "";

  position: absolute;

  top: 50%;

  left: 0;

  width: 32px;

  height: 34px;

  background: url("/img/products/pixtube/common/img/ic_cart01.svg") no-repeat 0 0/cover;

  transform: translateY(-50%);

}

.ct_bg .text_link > a > span.reserve::before {

  width: 34px;

  height: 34px;

  background-image: url("/img/products/pixtube/common/img/ic_cart02.svg");

}

.ct_bg .text_link > a > span.waiting::before {

  width: 34px;

  height: 32px;

  background-image: url("/img/products/pixtube/common/img/ic_cart03.svg");

}

.ct_bg .text_link > a.is-current {

  color: #fff;

  cursor: default;

  pointer-events: none;

}

.ct_bg .text_link > a.is-current::before,

.ct_bg .text_link > a.is-current::after {

  background: #999;

}

.ct_bg .text_link > a.is-current > span {

  padding-left: 0;

}

.ct_bg .text_link > a.is-current > span::before {

  content: none;

}

.ct_bg .btn_link,

.ct_bg .btn_pdf {

  width: 460px;

  max-width: 100%;

  margin: 40px auto 0;

  position: relative;

  z-index: 2;

}

.ct_bg .btn_link a,

.ct_bg .btn_pdf a {

  box-sizing: border-box;

  display: flex;

  align-items: center;

  justify-content: center;

  height: 82px;

  padding: 14px 50px;

  border-radius: 10px;

  background: #fff;

  color: #fff;

  font-family: "M PLUS 1", sans-serif;

  font-optical-sizing: auto;

  font-size: 28px;

  font-weight: 800;

  line-height: 1.2;

  text-align: center;

  text-decoration: none;

  overflow: hidden;

  position: relative;

  transform: rotate(0.03deg);

}

.ct_bg .btn_link a::before, .ct_bg .btn_link a::after,

.ct_bg .btn_pdf a::before,

.ct_bg .btn_pdf a::after {

  content: "";

  position: absolute;

  inset: 4px;

  border-radius: 6px;

}

.ct_bg .btn_link a::before,

.ct_bg .btn_pdf a::before {

  background: linear-gradient(180deg, #00E6E8 0%, #00BFC0 100%);

}

.ct_bg .btn_link a::after,

.ct_bg .btn_pdf a::after {

  background: linear-gradient(180deg, #01B2B3 0%, #009091 100%);

  opacity: 1;

  transition: opacity .2s ease;

}

.ct_bg .btn_link a span,

.ct_bg .btn_pdf a span {

  display: inline-flex;

  align-items: center;

  position: relative;

  z-index: 1;

}

.ct_bg .btn_link a span::after,

.ct_bg .btn_pdf a span::after {

  content: "";

  display: block;

  width: 32px;

  height: 26px;

  margin-left: 20px;

  background: url("/img/products/pixtube/common/img/ic_arrow01.svg") no-repeat 0 0/contain;

  flex: 0 0 auto;

  transform: translateY(1px);

}

.ct_bg .btn_pdf {

  width: 340px;

}

.ct_bg .btn_pdf a {

  background: #FFA9D1;

  color: #88318D;

  font-size: 24px;

  height: 76px;

}

.ct_bg .btn_pdf a::before {

  background: #FFE8F2;

}

.ct_bg .btn_pdf a::after {

  background: #fff;

}

.ct_bg .btn_pdf a span::after {

  width: 24px;

  height: 20px;

  margin-left: 20px;

  background: url("/img/products/pixtube/common/img/ic_arrow02.svg") no-repeat 0 0/contain;

}

.ct_bg .lineupArea .btn_pdf {

  margin-top: 48px;

}

.ct_bg .title02 {

  width: 800px;

  max-width: 100%;

  margin: 0 auto 40px;

  position: relative;

  z-index: 4;

}

.ct_bg .title03 {

  color: #fff;

  text-align: center;

  font-size: 40px;

  margin-top: 40px;

  margin-bottom: 20px;

}

.ct_bg .c_text {

  font-family: "M PLUS 1", sans-serif;

  font-optical-sizing: auto;

  font-weight: 800;

  font-style: normal;

  line-height: 1.5;

}

.ct_bg .topNavArea {

  padding: 30px 20px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: #02B2B2;

}

.ct_bg .localNavList {

  display: flex;

  flex-wrap: nowrap;

  align-items: center;

  justify-content: center;

  gap: 0;

  width: auto;

}

.ct_bg .localNavList li {

  flex: 0 0 auto;

  display: flex;

  align-items: center;

  position: relative;

}

.ct_bg .localNavList li + li::before {

  content: '';

  display: block;

  width: 2px;

  height: 50px;

  margin: 0 30px;

  background: #fff;

}

.ct_bg .localNavList li a {

  display: block;

  line-height: 0;

  position: relative;

  z-index: 3;

  transition: transform .2s;

}

.ct_bg .localNavList li a::before {

  content: "";

  position: absolute;

  background-repeat: no-repeat;

  background-position: 50% 50%;

  background-size: contain;

  opacity: 0;

  pointer-events: none;

  transform-origin: 50% 100%;

  z-index: -1;

}

.ct_bg .localNavList li a img {

  width: auto;

  height: 50px;

}

.ct_bg .localNavList li:nth-child(1) a::before {

  left: 50%;

  top: -43px;

  width: 70.66px;

  height: 53.21px;

  background-image: url("/img/products/pixtube/common/img/navi02_chara.png");

  filter: blur(6px);

  transform: translate(-53%, 34px) rotate(-5deg) scale(0.2);

}

.ct_bg .localNavList li:nth-child(1):hover a::before, .ct_bg .localNavList li:nth-child(1):focus-within a::before {

  animation-name: navCharaBounce01;

}

.ct_bg .localNavList li:nth-child(2) a::before {

  left: 52%;

  top: -56px;

  width: 60.79px;

  height: 73.13px;

  background-image: url("/img/products/pixtube/common/img/navi03_chara.png");

  filter: blur(6px);

  transform: translate(-59%, 34px) rotate(5.06deg) scale(0.2);

}

.ct_bg .localNavList li:nth-child(2):hover a::before, .ct_bg .localNavList li:nth-child(2):focus-within a::before {

  animation-name: navCharaBounce02;

}

.ct_bg .localNavList li:nth-child(3) a::before {

  left: 48%;

  top: -42px;

  width: 66px;

  height: 58.61px;

  background-image: url("/img/products/pixtube/common/img/navi04_chara.png");

  filter: blur(6px);

  transform: translate(-53%, 34px) rotate(-5deg) scale(0.2);

}

.ct_bg .localNavList li:nth-child(3):hover a::before, .ct_bg .localNavList li:nth-child(3):focus-within a::before {

  animation-name: navCharaBounce03;

}

.ct_bg .localNavList li:nth-child(4) a::before {

  left: 50%;

  top: -57px;

  width: 59.01px;

  height: 84.06px;

  background-image: url("/img/products/pixtube/common/img/navi05_chara.png");

  filter: blur(6px);

  transform: translate(-57%, 34px) rotate(5.08deg) scale(0.2);

}

.ct_bg .localNavList li:nth-child(4):hover a::before, .ct_bg .localNavList li:nth-child(4):focus-within a::before {

  animation-name: navCharaBounce04;

}

.ct_bg .lowerNavArea {

  padding: 0 20px 11px;

  align-items: flex-end;

  overflow: visible;

}

.ct_bg .lowerNavArea .lowerNavInner {

  flex: 0 0 auto;

  position: relative;

  z-index: 5;

  margin-left: -60px;

}

.ct_bg .lowerNavArea .lowerNavLogo {

  display: block;

  line-height: 0;

  margin: -26px 22px 0 0;

}

.ct_bg .lowerNavArea .lowerNavLogo img {

  width: auto;

  height: 82px;

}

.ct_bg .lowerNavArea .lowerNavToggle {

  display: none;

}

.ct_bg .lowerNavArea .localNavList {

  margin-bottom: 6px;

}

.ct_bg .lowerNavArea .localNavList li a img {

  width: auto;

  height: 35px;

}

.ct_bg .lowerNavArea .localNavList li + li::before {

  height: 30px;

  margin: 0 20px;

}

.ct_bg .lowerNavArea .localNavList li:nth-child(1) a::before {

  left: 46%;

  top: -21px;

  width: 36px;

  height: 33px;

  background-image: url("/img/products/pixtube/common/img/navi01_chara.png");

  filter: blur(6px);

  transform: translate(-53%, 34px) scale(0.2);

}

.ct_bg .lowerNavArea .localNavList li:nth-child(1):hover a::before, .ct_bg .lowerNavArea .localNavList li:nth-child(1):focus-within a::before {

  animation-name: lowerNavCharaBounceTop;

}

.ct_bg .lowerNavArea .localNavList li:nth-child(2) a::before {

  left: 50%;

  top: -29px;

  width: 47.65px;

  height: 35.89px;

  background-image: url("/img/products/pixtube/common/img/navi02_chara.png");

}

.ct_bg .lowerNavArea .localNavList li:nth-child(2):hover a::before, .ct_bg .lowerNavArea .localNavList li:nth-child(2):focus-within a::before {

  animation-name: navCharaBounce01;

}

.ct_bg .lowerNavArea .localNavList li:nth-child(3) a::before {

  left: 52%;

  top: -37.77px;

  width: 41px;

  height: 49.32px;

  background-image: url("/img/products/pixtube/common/img/navi03_chara.png");

  transform: translate(-59%, 34px) rotate(5.06deg) scale(0.2);

}

.ct_bg .lowerNavArea .localNavList li:nth-child(3):hover a::before, .ct_bg .lowerNavArea .localNavList li:nth-child(3):focus-within a::before {

  animation-name: navCharaBounce02;

}

.ct_bg .lowerNavArea .localNavList li:nth-child(4) a::before {

  left: 48%;

  top: -28.32px;

  width: 44.51px;

  height: 39.52px;

  background-image: url("/img/products/pixtube/common/img/navi04_chara.png");

  transform: translate(-53%, 34px) rotate(-5deg) scale(0.2);

}

.ct_bg .lowerNavArea .localNavList li:nth-child(4):hover a::before, .ct_bg .lowerNavArea .localNavList li:nth-child(4):focus-within a::before {

  animation-name: navCharaBounce03;

}

.ct_bg .lowerNavArea .localNavList li:nth-child(5) a::before {

  left: 50%;

  top: -38.44px;

  width: 39.8px;

  height: 56.69px;

  background-image: url("/img/products/pixtube/common/img/navi05_chara.png");

  filter: blur(6px);

  transform: translate(-57%, 34px) rotate(5.08deg) scale(0.2);

}

.ct_bg .lowerNavArea .localNavList li:nth-child(5):hover a::before, .ct_bg .lowerNavArea .localNavList li:nth-child(5):focus-within a::before {

  animation-name: navCharaBounce04;

}

.ct_bg .howtoArea02::before, .ct_bg .howtoArea02::after,

.ct_bg .characterArea02::before,

.ct_bg .characterArea02::after,

.ct_bg .movieArea02::before,

.ct_bg .movieArea02::after,

.ct_bg .aboutArea::before,

.ct_bg .aboutArea::after,

.ct_bg .lineupArea::before,

.ct_bg .lineupArea::after {

  content: "";

  position: absolute;

  width: 200px;

  height: 200px;

  background: url("/img/products/pixtube/common/img/corner_pc.png") no-repeat 0 0/contain;

  pointer-events: none;

  z-index: 1;

}

.ct_bg .howtoArea02::before,

.ct_bg .characterArea02::before,

.ct_bg .movieArea02::before,

.ct_bg .aboutArea::before,

.ct_bg .lineupArea::before {

  top: 0;

  right: 0;

}

.ct_bg .howtoArea02::after,

.ct_bg .characterArea02::after,

.ct_bg .movieArea02::after,

.ct_bg .aboutArea::after,

.ct_bg .lineupArea::after {

  left: 0;

  bottom: 0;

  transform: rotate(180deg);

}

.ct_bg .howtoArea02::after,

.ct_bg .characterArea02::after,

.ct_bg .movieArea02::after {

  bottom: 23px;

  transform: rotate(180deg);

}

.ct_bg .howtoArea02 .title02,

.ct_bg .characterArea02 .title02,

.ct_bg .movieArea02 .title02 {

  text-align: center;

  width: 442px;

  margin-bottom: 60px;

}

.ct_bg .movieArea02 .title02 {

  width: 382px;

}

.ct_bg .aboutArea {

  position: relative;

  padding: 120px 0;

  background: linear-gradient(#E5E632, #E5E632) repeat-x 0 0/100% 32px, linear-gradient(#E5E632, #E5E632) repeat-x 0 100%/100% 32px, rgba(255, 255, 255, 0.8);

}

.ct_bg #about.aboutArea {

  box-sizing: border-box !important;

  width: 100% !important;

  max-width: none !important;

  margin: 0 !important;

  padding: 120px 0 !important;

  background: linear-gradient(#E5E632, #E5E632) repeat-x 0 0/100% 32px, linear-gradient(#E5E632, #E5E632) repeat-x 0 100%/100% 32px, rgba(255, 255, 255, 0.8) !important;

}

.ct_bg .aboutArea .title02 {

  margin-bottom: 20px;

}

.ct_bg .aboutArea .aboutContents01 {

  width: 1000px;

  max-width: 100%;

  margin: 0 auto;

  position: relative;

  z-index: 2;

}

.ct_bg .aboutArea .aboutImage01 {

  display: block;

}

.ct_bg .aboutArea .aboutImage01 + .aboutImage01 {

  margin-top: 30px;

}

.ct_bg .aboutArea .aboutImage01 + .aboutImage01 + .aboutImage01 {

  margin-top: 80px;

}

.ct_bg .aboutArea .aboutImage01 img {

  display: block;

  width: 100%;

}

.ct_bg .aboutArea .aboutImage01.is-ready {

  opacity: 0;

  filter: blur(3px);

  transform: translateY(30px);

  transition: opacity 0.6s ease, filter 0.6s ease, transform 0.6s cubic-bezier(0.22, 1.35, 0.36, 1);

}

.ct_bg .aboutArea .aboutImage01.is-show {

  opacity: 1;

  filter: blur(0);

  transform: translateY(0);

}

.ct_bg .aboutArea .aboutChara01,

.ct_bg .aboutArea .aboutChara02,

.ct_bg .aboutArea .aboutKira01,

.ct_bg .aboutArea .aboutKira02 {

  position: absolute;

  z-index: 1;

  pointer-events: none;

}

.ct_bg .aboutArea .aboutChara01 {

  top: 31px;

  left: calc(50% + 386px);

  width: 400px;

  transform: rotate(-10deg);

  transform-origin: 50% 85%;

  animation: areaCharaRhythmNeg10 1.2s ease-in-out 0.08s infinite;

}

.ct_bg .aboutArea .aboutChara02 {

  top: 819px;

  left: calc(50% - 856px);

  width: 400px;

  transform: rotate(10deg);

  transform-origin: 50% 85%;

  animation: areaCharaRhythmPos10 1.2s ease-in-out 0.24s infinite;

}

.ct_bg .aboutArea .aboutKira01 {

  top: 502px;

  left: calc(50% - 638px);

  width: 80px;

}

.ct_bg .aboutArea .aboutKira02 {

  left: calc(50% + 560px);

  bottom: 375px;

  width: 80px;

}

.ct_bg .howtoContents01 {

  max-width: 850px;

  position: relative;

  margin: 0 auto;

  padding: 88px 0 113px;

  background: url("/img/products/pixtube/common/img/bg06_pc.png") center no-repeat;

  background-size: 100%;

}

.ct_bg .howtoContents01 .asobikata01,

.ct_bg .howtoContents01 .asobikata02,

.ct_bg .howtoContents01 .asobikata03 {

  position: absolute;

  z-index: 5;

}

.ct_bg .howtoContents01 .asobikata01 {

  top: 67px;

  left: calc(50% - 489px);

  width: 340px;

  transform: translateY(0) rotate(-10deg);

}

.ct_bg .howtoContents01 .asobikata02 {

  bottom: 147px;

  left: calc(50% - 333px);

  width: 200px;

}

.ct_bg .howtoContents01 .asobikata03 {

  top: 199px;

  left: calc(50% + 198px);

  width: 300px;

}

.ct_bg .howtoContents01 .asobikata01.is-ready,

.ct_bg .howtoContents01 .asobikata02.is-ready,

.ct_bg .howtoContents01 .asobikata03.is-ready {

  opacity: 0;

  filter: blur(3px);

  transform: translateY(18px);

  transition: opacity 1s ease, filter 1s ease, transform 1s cubic-bezier(0.22, 1.25, 0.36, 1);

}

.ct_bg .howtoContents01 .asobikata01.is-ready {

  transform: translateY(18px) rotate(-10deg);

}

.ct_bg .howtoContents01 .asobikata01.is-show,

.ct_bg .howtoContents01 .asobikata02.is-show,

.ct_bg .howtoContents01 .asobikata03.is-show {

  opacity: 1;

  filter: blur(0);

  transform: translateY(0);

}

.ct_bg .howtoContents01 .asobikata01.is-show {

  transform: translateY(0) rotate(-10deg);

}

.ct_bg .howtoMovie {

  margin: 0 auto;

  transform: translateX(9px);

  width: 600px;

  height: 600px;

  position: relative;

}

.ct_bg .howtoMovie::after {

  content: "";

  box-sizing: border-box;

  position: absolute;

  inset: 0;

  border: 6px solid #E5E632;

  pointer-events: none;

  z-index: 2;

}

.ct_bg .howtoMovie video {

  display: block;

  width: 100%;

  height: 100%;

  background: #fff 50% 50% / cover no-repeat;

  object-fit: cover;

  position: relative;

  z-index: 1;

}

.ct_bg .howtoArea {

  margin-bottom: 300px;

  padding: 80px 0 103px;

  background: url("/img/products/pixtube/common/img/line.jpg") no-repeat 50% 100%/100% 23px, url("/img/products/pixtube/common/img/bg04.png") repeat 50% 0/50px;

  position: relative;

}

.ct_bg .howtoArea::before, .ct_bg .howtoArea::after {

  content: "";

  position: absolute;

  top: 0;

  height: 897px;

}

.ct_bg .howtoArea::before {

  width: 213px;

  left: calc(50% - 763px);

  background: url("/img/products/pixtube/common/img/bg02_pc.png") repeat-y 0 0/213px;

}

.ct_bg .howtoArea::after {

  width: 243px;

  background: url("/img/products/pixtube/common/img/bg03_pc.png") repeat-y 0 0/243px;

  left: calc(50% + 550px);

}

.ct_bg .howtoArea .title02 {

  margin-bottom: 40px;

}

.ct_bg .howtoArea .howtoChara01,

.ct_bg .howtoArea .howtoChara02 {

  position: absolute;

  z-index: 5;

  width: 400px;

  pointer-events: none;

}

.ct_bg .howtoArea .howtoChara01 {

  top: -11px;

  left: calc(50% + 244px);

  transform: rotate(10deg);

  transform-origin: 50% 85%;

  animation: areaCharaRhythmPos10 1.2s ease-in-out 0.12s infinite;

}

.ct_bg .howtoArea .howtoChara02 {

  bottom: -111px;

  left: calc(50% - 625px);

  transform: rotate(-10deg);

  transform-origin: 50% 85%;

  animation: areaCharaRhythmNeg10 1.2s ease-in-out 0.28s infinite;

}

.ct_bg .howtoArea02,

.ct_bg .characterArea02,

.ct_bg .movieArea02 {

  position: relative;

  margin-bottom: 300px;

  padding: 80px 0 143px;

  background: url("/img/products/pixtube/common/img/line.jpg") no-repeat 50% 100%/100% 23px, linear-gradient(#E5E632, #E5E632) repeat-x 0 0/100% 32px, linear-gradient(#E5E632, #E5E632) repeat-x 0 100%/100% 55px, rgba(255, 255, 255, 0.8);

}

.ct_bg .howtoArea02 .title03,

.ct_bg .characterArea02 .title03,

.ct_bg .movieArea02 .title03 {

  color: #E62E8B;

  text-shadow: white 4px 0px 0px, white 3.87565px 0.989616px 0px, white 3.51033px 1.917702px 0px, white 2.926755px 2.726555px 0px, white 2.161209px 3.365884px 0px, white 1.261289px 3.795938px 0px, white 0.282949px 3.98998px 0px, white -0.712984px 3.935944px 0px, white -1.664587px 3.63719px 0px, white -2.512695px 3.112293px 0px, white -3.204574px 2.393888px 0px, white -3.69721px 1.526644px 0px, white -3.95997px 0.56448px 0px, white -3.976519px -0.432781px 0px, white -3.745827px -1.403133px 0px, white -3.282238px -2.286245px 0px, white -2.614574px -3.02721px 0px, white -1.78435px -3.579957px 0px, white -0.843183px -3.91012px 0px, white 0.150409px -3.997171px 0px, white 1.134649px -3.835697px 0px, white 2.048342px -3.435738px 0px, white 2.834679px -2.822161px 0px, white 3.44477px -2.033116px 0px, white 3.840681px -1.117662px 0px, white 3.997798px -0.132717px 0px;

}

.ct_bg .howtoArea02 .caption01 {

  color: #88318D;

}

.ct_bg .howtoArea02 .howtoContents01 {

  position: relative;

}

.ct_bg .howtoArea02 .howtoContents01 .howtoChara01 {

  position: absolute;

  z-index: 5;

  width: 400px;

  pointer-events: none;

}

.ct_bg .howtoArea02 .howtoContents01 .howtoChara01 {

  top: -58px;

  left: calc(50% + 307px);

  transform: rotate(10deg);

  transform-origin: 50% 85%;

  animation: areaCharaRhythmPos10 1.2s ease-in-out 0.12s infinite;

}

.ct_bg .howtoArea02 .asobikata05 {

  width: 1000px;

  padding-right: 120px;

  margin-bottom: 60px;

  position: relative;

}

.ct_bg .howtoArea02 .asobikata05 .asobikata01Chara01 {

  position: absolute;

  top: 98px;

  left: -116px;

  width: 87px;

}

.ct_bg .howtoArea02 .asobikata05 .asobikata01Chara02 {

  position: absolute;

  top: 101px;

  right: -68px;

  width: 80px;

}

.ct_bg .howtoArea02 .asobikata05 .asobikata01Chara03 {

  position: absolute;

  top: 375px;

  right: 13px;

  width: 84px;

}

.ct_bg .howtoArea02 .asobikata06 {

  width: 1000px;

  padding-left: 120px;

  position: relative;

}

.ct_bg .howtoArea02 .asobikata06 .howtoChara03,

.ct_bg .howtoArea02 .asobikata06 .howtoChara04 {

  position: absolute;

  z-index: 5;

  width: 400px;

  pointer-events: none;

}

.ct_bg .howtoArea02 .asobikata06 .howtoChara03 {

  top: 168px;

  left: calc(50% - 739px);

  transform-origin: 50% 85%;

  animation: areaCharaRhythmZero 1.2s ease-in-out 0.28s infinite;

}

.ct_bg .howtoArea02 .asobikata06 .howtoChara04 {

  top: -193px;

  left: calc(50% + 342px);

  transform-origin: 50% 85%;

  animation: areaCharaRhythmZero 1.2s ease-in-out 0.28s infinite;

}

.ct_bg .howtoArea02 .movieCol01 {

  position: relative;

}

.ct_bg .howtoArea02 .movieCol01 .howtoChara02 {

  position: absolute;

  top: -370px;

  left: calc(50% - 739px);

  transform: rotate(-10deg);

  transform-origin: 50% 85%;

  animation: areaCharaRhythmNeg10 1.2s ease-in-out 0.28s infinite;

}

.ct_bg .howtoArea02 .btn_pdf,

.ct_bg .howtoArea02 .movieCol01,

.ct_bg .howtoArea02 .asobikata04,

.ct_bg .howtoArea02 .asobikata05,

.ct_bg .howtoArea02 .asobikata06 {

  margin-top: 60px;

}

.ct_bg .movieArea02 .caption01 {

  color: #88318D;

}

.ct_bg .characterArea {

  padding: 103px 0 106px;

  background: url("/img/products/pixtube/common/img/line.jpg") no-repeat 50% 0/100% 23px, url("/img/products/pixtube/common/img/bg05.png") repeat 50% 23px/50px;

  position: relative;

}

.ct_bg .characterArea::before, .ct_bg .characterArea::after {

  content: "";

  position: absolute;

  top: 23px;

  height: 100%;

}

.ct_bg .characterArea::before {

  width: 213px;

  left: calc(50% - 763px);

  background: url("/img/products/pixtube/common/img/bg02_pc.png") repeat-y 0 0/213px;

}

.ct_bg .characterArea::after {

  width: 243px;

  background: url("/img/products/pixtube/common/img/bg03_pc.png") repeat-y 0 0/243px;

  left: calc(50% + 550px);

}

.ct_bg .characterArea .c_text.tx01 {

  color: #fff;

  text-align: center;

  margin-top: 40px;

  margin-bottom: 40px;

  font-size: 28px;

}

.ct_bg .character-card {

  display: flex;

  flex-direction: column;

}

.ct_bg .character-card span {

  text-align: center;

  font-family: "M PLUS 1", sans-serif;

  font-optical-sizing: auto;

  font-weight: 800;

  font-style: normal;

  font-size: 20px;

  letter-spacing: -0.02em;

  line-height: 1.3;

  transform: rotate(0.03deg);

}

.ct_bg .character-list01 {

  display: flex;

  flex-wrap: wrap;

  gap: 20px 2%;

  margin-bottom: 40px;

}

.ct_bg .character-list01 .character-card {

  flex: 0 0 calc(90% / 6);

  padding: 26px 0;

  text-align: center;

  background: url("/img/products/pixtube/img/bg_index02_pc.png") no-repeat 0 0/100%;

  opacity: 0;

  filter: blur(3px);

  transform: translateY(12px) scale(0.88);

  transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s cubic-bezier(0.22, 1.35, 0.36, 1);

}

.ct_bg .character-list01 .character-card img {

  width: 138px;

  margin-left: auto;

  margin-right: auto;

}

.ct_bg .character-list01 .character-card.is-show {

  opacity: 1;

  filter: blur(0);

  transform: translateY(0) scale(1);

}

.ct_bg .character-list01:not(.is-ready) .character-card {

  transition: none;

}

.ct_bg .character-list02 {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 4%;

  padding-bottom: 26px;

}

.ct_bg .character-list02 .character-card {

  padding: 26px 40px 12px;

  background: url("/img/products/pixtube/img/bg_index03_pc.png") no-repeat 0 0/100%;

  position: relative;

  box-sizing: border-box;

}

.ct_bg .character-list02 .character-card::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: -26px;

  width: 100%;

  height: 26px;

  background: url("/img/products/pixtube/img/bg_index05_pc.png") no-repeat 0 0/100%;

}

.ct_bg .character-list02 .character-card img {

  width: 320px;

  margin-left: auto;

  margin-right: auto;

}

.ct_bg .character-list02 .character-card.irumi {

  background: url("/img/products/pixtube/img/bg_index04_pc.png") no-repeat 0 0/100%;

}

.ct_bg .character-list02 .character-card.irumi .c_text.name span + span {

  color: #88318D;

}

.ct_bg .character-list02 .character-card.irumi .c_text.tx04 {

  background: #88318D;

}

.ct_bg .character-list02 .character-card .c_text.name {

  margin-top: 22px;

  margin-bottom: 10px;

}

.ct_bg .character-list02 .character-card .c_text.name span {

  font-size: 40px;

  line-height: 1.3;

}

.ct_bg .character-list02 .character-card .c_text.name span + span {

  color: #E62E8B;

  font-size: 28px;

  margin-left: 0.35em;

  line-height: 1.5;

}

.ct_bg .character-list02 .character-card .c_text.tx02, .ct_bg .character-list02 .character-card .c_text.tx03 {

  margin-bottom: 10px;

  font-size: 20px;

  line-height: 1.5;

}

.ct_bg .character-list02 .character-card .c_text.tx03 {

  color: #008C8C;

}

.ct_bg .character-list02 .character-card .c_text.tx04 {

  display: inline-block;

  color: #fff;

  background: #E62E8B;

  padding: 0.1em 0.8em;

  font-size: 24px;

  line-height: 1.5;

  transform: rotate(-5deg);

}

.ct_bg .character-list02 .character-card .mateBox {

  background: #fff;

  border-radius: 20px;

  padding: 20px 28px 15px;

  margin-top: 37px;

  position: relative;

}

.ct_bg .character-list02 .character-card .mateBox figure img {

  position: absolute;

  top: -70px;

  left: 202px;

  width: 220px;

  z-index: 1;

}

.ct_bg .character-list02 .character-card .mateBox figure figcaption {

  margin-left: 134px;

  font-size: 20px;

  margin-top: 4px;

}

.ct_bg .character-list03 {

  display: grid;

  grid-template-columns: repeat(3, 320px);

  justify-content: center;

  gap: 20px;

  margin-top: 60px;

  margin-bottom: 60px;

}

.ct_bg .character-list03::before, .ct_bg .character-list03::after {

  content: "";

}

.ct_bg .character-list03::before {

  grid-column: 1;

  grid-row: 1;

}

.ct_bg .character-list03::after {

  grid-column: 3;

  grid-row: 1;

}

.ct_bg .character-list03 .character-card {

  position: relative;

  box-sizing: border-box;

  width: 320px;

  min-height: 353px;

  padding: 26px 20px;

  text-align: center;

  background: url("/img/products/pixtube/common/img/bg07_pc.png") no-repeat 0 0/100% auto, url("/img/products/pixtube/common/img/bg08_pc.png") no-repeat 0 100%/100% auto, url("/img/products/pixtube/common/img/bg09_pc.png") no-repeat 0 26px/100% auto;

  opacity: 0;

  filter: blur(3px);

  transform: translateY(12px) scale(0.88);

  transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s cubic-bezier(0.22, 1.35, 0.36, 1);

}

.ct_bg .character-list03 .character-card:first-child {

  grid-column: 2;

  grid-row: 1;

}

.ct_bg .character-list03 .character-card:last-child {

  grid-column: 2;

}

.ct_bg .character-list03 .character-card.has-text {

  min-height: 405px;

  background: url("/img/products/pixtube/common/img/bg07_pc.png") no-repeat 0 0/100% auto, url("/img/products/pixtube/common/img/bg08_pc.png") no-repeat 0 100%/100% auto, url("/img/products/pixtube/common/img/bg09_pc.png") no-repeat 0 26px/100% auto, url("/img/products/pixtube/common/img/bg12_pc.png") no-repeat 0 calc(100% - 26px)/100% auto;

}

.ct_bg .character-list03 .character-card img {

  width: 260px;

  margin-left: auto;

  margin-right: auto;

}

.ct_bg .character-list03 .character-card span {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 24px;

  color: #00868c;

  font-size: 24px;

}

.ct_bg .character-list03 .character-card span::before, .ct_bg .character-list03 .character-card span::after {

  content: "";

  display: block;

  width: 68px;

  height: 25px;

  background-repeat: no-repeat;

  background-position: 50% 50%;

  background-size: contain;

  flex: 0 0 auto;

}

.ct_bg .character-list03 .character-card span::before {

  background-image: url("/img/products/pixtube/common/img/bg10_pc.svg");

}

.ct_bg .character-list03 .character-card span::after {

  background-image: url("/img/products/pixtube/common/img/bg11_pc.svg");

}

.ct_bg .character-list03 .character-card.nyaopiku span {

  gap: 13px;

}

.ct_bg .character-list03 .character-card .character-text {

  margin: 14px -20px 0;

  padding: 6px 18px 0;

  background: url("/img/products/pixtube/common/img/bg12_pc.png") repeat-y 0 0/100% auto;

}

.ct_bg .character-list03 .character-card ul {

  margin: 0;

  padding: 0;

  text-align: left;

  font-family: "M PLUS 1", sans-serif;

  font-optical-sizing: auto;

  font-weight: 800;

  font-size: 14px;

  line-height: 1.3;

  transform: rotate(0.03deg);

}

.ct_bg .character-list03 .character-card li {

  position: relative;

  padding-left: 10px;

  list-style: none;

  transform: rotate(0.03deg);

}

.ct_bg .character-list03 .character-card li::before {

  content: "";

  position: absolute;

  top: .45em;

  left: 0;

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: #008C8C;

}

.ct_bg .character-list03 .character-card li + li {

  margin-top: 7px;

  padding-top: 8px;

  border-top: 1px solid #9ee5e2;

}

.ct_bg .character-list03 .character-card li + li::before {

  top: calc(10px + .45em);

}

.ct_bg .character-list03 .character-card.is-show {

  opacity: 1;

  filter: blur(0);

  transform: translateY(0) scale(1);

}

.ct_bg .character-list03:not(.is-ready) .character-card {

  transition: none;

}

.ct_bg .movieArea {

  margin-bottom: 300px;

  padding: 103px 0 103px;

  background: url("/img/products/pixtube/common/img/line.jpg") no-repeat 50% 0/100% 23px, url("/img/products/pixtube/common/img/line.jpg") no-repeat 50% 100%/100% 23px, url("/img/products/pixtube/common/img/bg04.png") repeat 50% 23px/50px;

  position: relative;

}

.ct_bg .movieArea .c_inner01 {

  padding: 0;

  max-width: 1000px;

}

.ct_bg .movieArea::before, .ct_bg .movieArea::after {

  content: "";

  position: absolute;

  top: 23px;

  height: calc(100% - 46px);

}

.ct_bg .movieArea::before {

  width: 213px;

  left: calc(50% - 763px);

  background: url("/img/products/pixtube/common/img/bg02_pc.png") repeat-y 0 0/213px;

}

.ct_bg .movieArea::after {

  width: 243px;

  background: url("/img/products/pixtube/common/img/bg03_pc.png") repeat-y 0 0/243px;

  left: calc(50% + 550px);

}

.ct_bg .movieArea .howtoContents01 {

  position: relative;

}

.ct_bg .movieArea .howtoMovie {

  margin: 0 auto;

  width: 600px;

  height: 600px;

  position: relative;

}

.ct_bg .movieArea .howtoMovie::after {

  content: "";

  box-sizing: border-box;

  position: absolute;

  inset: 0;

  border: 6px solid #E5E632;

  pointer-events: none;

  z-index: 2;

}

.ct_bg .movieArea .howtoMovie video {

  display: block;

  width: 100%;

  height: 100%;

  background: #fff 50% 50% / cover no-repeat;

  object-fit: cover;

  position: relative;

  z-index: 1;

}

.ct_bg .movieArea .asobikata01,

.ct_bg .movieArea .asobikata02,

.ct_bg .movieArea .asobikata03 {

  position: absolute;

  z-index: 5;

}

.ct_bg .movieArea .asobikata01 {

  top: -20px;

  left: calc(50% - 496px);

  width: 340px;

  transform: rotate(-10deg);

}

.ct_bg .movieArea .asobikata02 {

  bottom: 33px;

  left: calc(50% - 340px);

  width: 200px;

}

.ct_bg .movieArea .asobikata03 {

  top: 50px;

  left: calc(50% + 190px);

  width: 300px;

}

.ct_bg .movieArea .movieChara01,

.ct_bg .movieArea .movieChara02 {

  position: absolute;

  z-index: 5;

  width: 400px;

  pointer-events: none;

}

.ct_bg .movieArea .movieChara01 {

  top: -116px;

  left: calc(50% + 350px);

  z-index: 1;

  transform-origin: 50% 85%;

  animation: areaCharaRhythmZero 1.2s ease-in-out 0.1s infinite;

}

.ct_bg .movieArea .movieChara02 {

  bottom: -139px;

  left: calc(50% + 409px);

  transform-origin: 50% 85%;

  animation: areaCharaRhythmZero 1.2s ease-in-out 0.3s infinite;

}

.ct_bg .lineupArea {

  padding: 103px 0 126px;

  background: url("/img/products/pixtube/common/img/line.jpg") no-repeat 50% 0/100% 23px, linear-gradient(#E5E632, #E5E632) repeat-x 0 23px/100% 32px, linear-gradient(#E5E632, #E5E632) repeat-x 0 100%/100% 32px, rgba(255, 255, 255, 0.8);

  position: relative;

}

.ct_bg .lineupArea::before {

  top: 23px;

}

.ct_bg .lineupArea .title02 {

  margin-bottom: 42px;

}

.ct_bg .lineupArea .c_text.tx01 {

  text-align: center;

  font-size: 16px;

  line-height: 2.1;

}

.ct_bg .lineupArea .c_text.tx01 span {

  font-size: 28px;

}

.ct_bg .lineupArea .c_text.tx02 {

  text-align: center;

  font-weight: 500;

  font-size: 16px;

  line-height: 2.1;

  margin-top: -0.5em;

}

.ct_bg .lineupArea .c_text.period {

  display: inline-block;

  font-size: 14px;

  background: #FFF600;

  padding: 0.2em 0.75em 0.1em;

  margin-bottom: 14px;

}

.ct_bg .lineupArea .c_text.name {

  line-height: 1.3;

  margin-bottom: 14px;

}

.ct_bg .lineupArea .c_text.name span {

  font-size: 28px;

  letter-spacing: -0.03em;

}

.ct_bg .lineupArea .c_text.name span + span {

  display: block;

  font-size: 16px;

  letter-spacing: 0;

}

.ct_bg .lineupArea .c_text.color {

  font-size: 36px;

  line-height: 1.3;

}

.ct_bg .lineupArea .productsWrap {

  display: flex;

  flex-wrap: wrap;

  gap: 3.6%;

  margin-top: 28px;

  width: 996px;

  margin-left: auto;

  margin-right: auto;

  position: relative;

  z-index: 2;

}

.ct_bg .lineupArea .products_item {

  box-sizing: border-box;

  flex: 0 0 calc(96.4% / 2);

  padding: 20px 20px 30px 20px;

  text-align: center;

  background: #fff url("/img/products/pixtube/img/bg_index07.png") no-repeat 20px 33px/200px;

  border-radius: 20px;

  position: relative;

  display: flex;

  flex-wrap: wrap;

  gap: 10px 20px;

}

.ct_bg .lineupArea .products_item.purple {

  background: #fff url("/img/products/pixtube/img/bg_index08.png") no-repeat 20px 33px/200px;

}

.ct_bg .lineupArea .products_item::before, .ct_bg .lineupArea .products_item::after {

  content: "";

  position: absolute;

  width: 495px;

  height: 152px;

  background: url("/img/products/pixtube/img/bg_index06_pc.png") no-repeat 0 0/contain;

  pointer-events: none;

  z-index: 1;

}

.ct_bg .lineupArea .products_item::before {

  top: -8px;

  left: -8px;

}

.ct_bg .lineupArea .products_item::after {

  left: -8px;

  bottom: -8px;

  transform: rotate(180deg);

}

.ct_bg .lineupArea .products_item .img {

  flex: 0 0 220px;

}

.ct_bg .lineupArea .products_item .img img {

  width: 200px;

}

.ct_bg .lineupArea .products_item .textWrap {

  flex: 1;

  text-align: left;

  padding-top: 30px;

}

.ct_bg .lineupArea .products_item.pink .color {

  color: #E62E8B;

}

.ct_bg .lineupArea .products_item.purple .color {

  color: #88318D;

}

.ct_bg .lineupArea .lineupChara01 {

  position: absolute;

  z-index: 1;

  pointer-events: none;

  top: -19px;

  left: calc(50% - 762px);

  width: 400px;

  transform: rotate(-5deg);

  transform-origin: 50% 85%;

  animation: mainRhythm01 1.2s ease-in-out 0.2s infinite;

}

.ct_bg .lowerNavArea ~ .lineupArea .lineupChara01 {

  display: none;

}

.ct_bg .footArea {

  padding-top: 60px;

  background: url("/img/products/pixtube/common/img/bg05.png") repeat 50% 23px/50px;

  position: relative;

}

.ct_bg .footArea .sns_wrapper {

  display: flex;

  justify-content: center;

}

.ct_bg .footArea .sns_wrapper .snsBtn02 {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  background: #fff;

  padding: 8px 8px 5px;

}

.ct_bg .footArea .sns_wrapper .snsBtn02 li {

  margin: 0 5px;

  line-height: 1;

}

.ct_bg .footArea .copyrightBlock01 {

  margin-top: 12px;

  padding-bottom: 20px;

}

.ct_bg .footArea .copyrightBlock01 .copyright01 {

  color: #fff;

  text-align: center;

  font-family: "M PLUS 1", sans-serif;

  font-weight: 500;

  font-style: normal;

  font-size: 14px;

  line-height: 1.4;

  transform: rotate(0.03deg);

}

.ct_bg .footArea .img01 {

  text-align: center;

}

@keyframes mainRhythm01 {

  0%, 100% {

    transform: translateY(0) rotate(-5deg) scale(1);

  }

  18% {

    transform: translateY(-8px) rotate(-10deg) scale(1.025, 0.985);

  }

  32% {

    transform: translateY(2px) rotate(-4deg) scale(0.99, 1.01);

  }

  48% {

    transform: translateY(-4px) rotate(-6deg) scale(1.01);

  }

}

@keyframes mainAreaBoingHontaiPink {

  0%, 100% {

    transform: translateY(0) rotate(-11.45deg) scale(1);

  }

  18% {

    transform: translateY(-8px) rotate(-11.45deg) scale(1.025, 0.985);

  }

  32% {

    transform: translateY(2px) rotate(-11.45deg) scale(0.99, 1.01);

  }

  48% {

    transform: translateY(-4px) rotate(-11.45deg) scale(1.01);

  }

}

@keyframes mainAreaBoingHontaiPurple {

  0%, 100% {

    transform: translateY(0) rotate(9.44deg) scale(1);

  }

  18% {

    transform: translateY(-8px) rotate(9.44deg) scale(1.025, 0.985);

  }

  32% {

    transform: translateY(2px) rotate(9.44deg) scale(0.99, 1.01);

  }

  48% {

    transform: translateY(-4px) rotate(9.44deg) scale(1.01);

  }

}

@keyframes mainAreaBoingHontaiPurpleSp {

  0%, 100% {

    transform: translateY(0) rotate(2.42deg) scale(1);

  }

  18% {

    transform: translateY(-8px) rotate(2.42deg) scale(1.025, 0.985);

  }

  32% {

    transform: translateY(2px) rotate(2.42deg) scale(0.99, 1.01);

  }

  48% {

    transform: translateY(-4px) rotate(2.42deg) scale(1.01);

  }

}

@keyframes mainAreaBoingChara01 {

  0%, 100% {

    transform: translateY(0) rotate(-5deg) scale(1);

  }

  18% {

    transform: translateY(-8px) rotate(-5deg) scale(1.025, 0.985);

  }

  32% {

    transform: translateY(2px) rotate(-5deg) scale(0.99, 1.01);

  }

  48% {

    transform: translateY(-4px) rotate(-5deg) scale(1.01);

  }

}

@keyframes mainAreaBoingChara02 {

  0%, 100% {

    transform: translateY(0) rotate(5deg) scale(1);

  }

  18% {

    transform: translateY(-8px) rotate(5deg) scale(1.025, 0.985);

  }

  32% {

    transform: translateY(2px) rotate(5deg) scale(0.99, 1.01);

  }

  48% {

    transform: translateY(-4px) rotate(5deg) scale(1.01);

  }

}

@keyframes mainAreaBoingChara03 {

  0%, 100% {

    transform: translateY(0) rotate(15deg) scale(1);

  }

  18% {

    transform: translateY(-8px) rotate(15deg) scale(1.025, 0.985);

  }

  32% {

    transform: translateY(2px) rotate(15deg) scale(0.99, 1.01);

  }

  48% {

    transform: translateY(-4px) rotate(15deg) scale(1.01);

  }

}

@keyframes mainAreaBoingChara03Sp {

  0%, 100% {

    transform: translateY(0) rotate(6.64deg) scale(1);

  }

  18% {

    transform: translateY(-8px) rotate(6.64deg) scale(1.025, 0.985);

  }

  32% {

    transform: translateY(2px) rotate(6.64deg) scale(0.99, 1.01);

  }

  48% {

    transform: translateY(-4px) rotate(6.64deg) scale(1.01);

  }

}

@keyframes mainAreaBoingChara04 {

  0%, 100% {

    transform: translateY(0) rotate(-15deg) scale(1);

  }

  18% {

    transform: translateY(-8px) rotate(-15deg) scale(1.025, 0.985);

  }

  32% {

    transform: translateY(2px) rotate(-15deg) scale(0.99, 1.01);

  }

  48% {

    transform: translateY(-4px) rotate(-15deg) scale(1.01);

  }

}

@keyframes mainAreaBoingChara04Sp {

  0%, 100% {

    transform: translateY(0) rotate(-10deg) scale(1);

  }

  18% {

    transform: translateY(-8px) rotate(-10deg) scale(1.025, 0.985);

  }

  32% {

    transform: translateY(2px) rotate(-10deg) scale(0.99, 1.01);

  }

  48% {

    transform: translateY(-4px) rotate(-10deg) scale(1.01);

  }

}

@keyframes mainRhythm02 {

  0%, 100% {

    transform: translateY(0) rotate(5deg) scale(1);

  }

  18% {

    transform: translateY(-8px) rotate(10deg) scale(1.025, 0.985);

  }

  32% {

    transform: translateY(2px) rotate(4deg) scale(0.99, 1.01);

  }

  48% {

    transform: translateY(-4px) rotate(6deg) scale(1.01);

  }

}

@keyframes mainRhythm03 {

  0%, 100% {

    transform: translateY(0) rotate(15deg) scale(1);

  }

  20% {

    transform: translateY(-7px) rotate(21deg) scale(1.04, 0.97);

  }

  38% {

    transform: translateY(2px) rotate(10deg) scale(0.98, 1.02);

  }

}

@keyframes mainRhythm04 {

  0%, 100% {

    transform: translateY(0) rotate(-15deg) scale(1);

  }

  20% {

    transform: translateY(-7px) rotate(-21deg) scale(1.04, 0.97);

  }

  38% {

    transform: translateY(2px) rotate(-10deg) scale(0.98, 1.02);

  }

}

@keyframes areaCharaRhythmNeg10 {

  0%, 100% {

    transform: translateY(0) rotate(-10deg) scale(1);

  }

  18% {

    transform: translateY(-8px) rotate(-15deg) scale(1.025, 0.985);

  }

  32% {

    transform: translateY(2px) rotate(-9deg) scale(0.99, 1.01);

  }

  48% {

    transform: translateY(-4px) rotate(-11deg) scale(1.01);

  }

}

@keyframes areaCharaRhythmPos10 {

  0%, 100% {

    transform: translateY(0) rotate(10deg) scale(1);

  }

  18% {

    transform: translateY(-8px) rotate(15deg) scale(1.025, 0.985);

  }

  32% {

    transform: translateY(2px) rotate(9deg) scale(0.99, 1.01);

  }

  48% {

    transform: translateY(-4px) rotate(11deg) scale(1.01);

  }

}

@keyframes areaCharaRhythmZero {

  0%, 100% {

    transform: translateY(0) rotate(0deg) scale(1);

  }

  18% {

    transform: translateY(-8px) rotate(5deg) scale(1.025, 0.985);

  }

  32% {

    transform: translateY(2px) rotate(-1deg) scale(0.99, 1.01);

  }

  48% {

    transform: translateY(-4px) rotate(1deg) scale(1.01);

  }

}

@keyframes navCharaBounce01 {

  0% {

    opacity: 0;

    filter: blur(6px);

    transform: translate(-53%, 36px) rotate(-5deg) scale(0.15);

  }

  55% {

    opacity: 1;

    filter: blur(0);

    transform: translate(-53%, -10px) rotate(-5deg) scale(1.18, 0.86);

  }

  75% {

    transform: translate(-53%, 4px) rotate(-5deg) scale(0.9, 1.1);

  }

  100% {

    opacity: 1;

    filter: blur(0);

    transform: translate(-53%, 0) rotate(-5deg) scale(1);

  }

}

@keyframes lowerNavCharaBounceTop {

  0% {

    opacity: 0;

    filter: blur(6px);

    transform: translate(-53%, 36px) scale(0.15);

  }

  55% {

    opacity: 1;

    filter: blur(0);

    transform: translate(-53%, -10px) scale(1.18, 0.86);

  }

  75% {

    transform: translate(-53%, 4px) scale(0.9, 1.1);

  }

  100% {

    opacity: 1;

    filter: blur(0);

    transform: translate(-53%, 0) scale(1);

  }

}

@keyframes navCharaBounce02 {

  0% {

    opacity: 0;

    filter: blur(6px);

    transform: translate(-59%, 36px) rotate(5.06deg) scale(0.15);

  }

  55% {

    opacity: 1;

    filter: blur(0);

    transform: translate(-59%, -10px) rotate(5.06deg) scale(1.18, 0.86);

  }

  75% {

    transform: translate(-59%, 4px) rotate(5.06deg) scale(0.9, 1.1);

  }

  100% {

    opacity: 1;

    filter: blur(0);

    transform: translate(-59%, 0) rotate(5.06deg) scale(1);

  }

}

@keyframes navCharaBounce03 {

  0% {

    opacity: 0;

    filter: blur(6px);

    transform: translate(-53%, 36px) rotate(-5deg) scale(0.15);

  }

  55% {

    opacity: 1;

    filter: blur(0);

    transform: translate(-53%, -10px) rotate(-5deg) scale(1.18, 0.86);

  }

  75% {

    transform: translate(-53%, 4px) rotate(-5deg) scale(0.9, 1.1);

  }

  100% {

    opacity: 1;

    filter: blur(0);

    transform: translate(-53%, 0) rotate(-5deg) scale(1);

  }

}

@keyframes navCharaBounce04 {

  0% {

    opacity: 0;

    filter: blur(6px);

    transform: translate(-57%, 36px) rotate(5.08deg) scale(0.15);

  }

  55% {

    opacity: 1;

    filter: blur(0);

    transform: translate(-57%, -10px) rotate(5.08deg) scale(1.18, 0.86);

  }

  75% {

    transform: translate(-57%, 4px) rotate(5.08deg) scale(0.9, 1.1);

  }

  100% {

    opacity: 1;

    filter: blur(0);

    transform: translate(-57%, 0) rotate(5.08deg) scale(1);

  }

}

.topMovieModal {

  position: fixed;

  inset: 0;

  z-index: 10000;

  display: none;

  align-items: center;

  justify-content: center;

  padding: 80px 20px 40px;

  background: rgba(1, 65, 154, 0.6);

  box-sizing: border-box;

}

.topMovieModal.is-show {

  display: flex;

}

html.is-top-movie-open,

body.is-top-movie-open {

  overflow: hidden;

}

.topMovieModalInner {

  position: relative;

  width: 880px;

  max-width: calc(100vw - 40px);

  text-align: center;

}

.topMovieModalFrame {

  position: relative;

  width: 100%;

  aspect-ratio: 880 / 530;

  border-radius: 60px;

  padding: 40px;

  background: #E62E8B;

  box-sizing: border-box;

}

.topMovieModalFrame::before, .topMovieModalFrame::after {

  content: "";

  position: absolute;

  left: -12px;

  width: 906px;

  height: 278px;

  background: url("/img/products/pixtube/common/img/frame01.svg") no-repeat 50% 0/100% auto;

  pointer-events: none;

  z-index: 2;

}

.topMovieModalFrame::before {

  top: -15px;

}

.topMovieModalFrame::after {

  bottom: -15px;

  background-image: url("/img/products/pixtube/common/img/frame02.svg");

  background-position: 50% 100%;

}

.topMovieModalIframe {

  display: block;

  width: 100%;

  height: 100%;

  border: 0;

  background: #fff;

}

.topMovieModalClose {

  position: absolute;

  top: -20px;

  right: -20px;

  z-index: 3;

  width: 60px;

  height: 60px;

  padding: 0;

  border: 0;

  border-radius: 50%;

  background: #fff;

  box-shadow: 0 0 4px #E62E8B;

  cursor: pointer;

}

.topMovieModalClose span, .topMovieModalClose::before {

  content: "";

  position: absolute;

  top: 50%;

  left: 50%;

  width: 42px;

  height: 4px;

  border-radius: 4px;

  background: #01B2B3;

  transition: background .3s;

}

.topMovieModalClose span {

  transform: translate(-50%, -50%) rotate(45deg);

}

.topMovieModalClose::before {

  transform: translate(-50%, -50%) rotate(-45deg);

}

.topMovieModalSkip {

  width: 180px;

  max-width: 100%;

  margin: 48px auto 0;

  position: relative;

  z-index: 2;

}

.topMovieModalSkip a {

  box-sizing: border-box;

  display: flex;

  align-items: center;

  justify-content: center;

  height: 76px;

  padding: 14px 30px;

  border-radius: 10px;

  background: #FFA9D1;

  color: #88318D;

  font-family: "M PLUS 1", sans-serif;

  font-optical-sizing: auto;

  font-size: 24px;

  font-weight: 800;

  line-height: 1.2;

  text-align: center;

  text-decoration: none;

  overflow: hidden;

  position: relative;

  transform: rotate(0.03deg);

}

.topMovieModalSkip a::before, .topMovieModalSkip a::after {

  content: "";

  position: absolute;

  inset: 4px;

  border-radius: 6px;

}

.topMovieModalSkip a::before {

  background: #FFE8F2;

}

.topMovieModalSkip a::after {

  background: #fff;

  opacity: 1;

  transition: opacity .2s ease;

}

.topMovieModalSkip a span {

  display: inline-flex;

  align-items: center;

  position: relative;

  z-index: 1;

}

.topMovieModalSkip a span::after {

  content: "";

  display: block;

  width: 24px;

  height: 20px;

  margin-left: 20px;

  background: url("/img/products/pixtube/common/img/ic_arrow02.svg") no-repeat 0 0/contain;

  flex: 0 0 auto;

  transform: translateY(1px);

}

.fixedMovieBanner {

  position: fixed;

  right: 0;

  bottom: 160px;

  z-index: 9000;

  display: block;

  width: 285px;

  overflow: hidden;

  opacity: 1;

  visibility: visible;

  transition: opacity .2s ease, visibility .2s ease;

}

.fixedMovieBanner img {

  display: block;

  width: 100%;

  height: auto;

}

.fixedMovieBanner::after {

  content: "";

  position: absolute;

  inset: 0;

  background: rgba(255, 255, 255, 0.35);

  opacity: 0;

  pointer-events: none;

  transition: opacity .2s ease;

  -webkit-mask: url("/img/products/pixtube/common/img/bnr_movie.png") no-repeat 0 0/100% 100%;

  mask: url("/img/products/pixtube/common/img/bnr_movie.png") no-repeat 0 0/100% 100%;

}

.fixedMovieBanner._stop {

  opacity: 0;

  visibility: hidden;

}



@media screen and (min-width: 768px){

  .ct_bg .c_text {

    transform: rotate(0.03deg);

  }

  .ct_bg .character-list02 .character-card.irumi .mateBox figure img {

    top: -60px;

  }

}



@media (any-hover: hover){

  .ct_bg .movieArea.is-movie-slider .movieSliderArrow:hover {

    background: #00C8C9;

  }

  .ct_bg .text_link > a:hover::after {

    opacity: 0;

  }

  .ct_bg .btn_link a:hover::after,

  .ct_bg .btn_pdf a:hover::after {

    opacity: 0;

  }

  .ct_bg .localNavList li a:hover {

    transform: none;

  }

  .ct_bg .localNavList li:hover a::before, .ct_bg .localNavList li:focus-within a::before {

    animation-duration: .42s;

    animation-timing-function: cubic-bezier(0.22, 1.4, 0.36, 1);

    animation-fill-mode: forwards;

  }

  .topMovieModalClose:hover span, .topMovieModalClose:hover::before {

    background: #00C8C9;

  }

  .topMovieModalSkip a:hover::after {

    opacity: 0;

  }

  .fixedMovieBanner:hover::after {

    opacity: 1;

  }

}



@media screen and (max-width: 1040px){

  .ct_bg .shortMovieWrap {

    width: 95.9615384615vw;

  }

  .ct_bg .mainArea01 {

    background-size: 96.6346153846vw;

  }

  .ct_bg .mainArea01 .c_inner01 {

    height: 70.1923076923vw;

  }

  .ct_bg .mainArea01 .title img {

    width: 52.6923076923vw;

  }

  .ct_bg .mainArea01 .hontai_pink {

    top: 20.7692307692vw;

    left: calc(50% - 38.9423076923vw);

    width: 39.1346153846vw;

  }

  .ct_bg .mainArea01 .hontai_purple {

    top: 7.5961538462vw;

    left: calc(50% + 0.0961538462vw);

    width: 38.9423076923vw;

  }

  .ct_bg .mainArea01 .tx01 {

    bottom: 1.7307692308vw;

    right: 3.2692307692vw;

    font-size: 1.9230769231vw;

  }

  .ct_bg .mainArea01 .character01 {

    top: 24.9038461538vw;

    left: calc(50% - 67.9807692308vw);

    width: 30.7692307692vw;

  }

  .ct_bg .mainArea01 .character02 {

    top: 5.1923076923vw;

    left: calc(50% + 38.6538461538vw);

    width: 30.7692307692vw;

  }

  .ct_bg .mainArea01 .character03 {

    top: 5.7692307692vw;

    left: calc(50% - 65.6730769231vw);

    width: 19.2307692308vw;

  }

  .ct_bg .mainArea01 .character04 {

    bottom: 4.3269230769vw;

    left: calc(50% + 38.5576923077vw);

    width: 19.2307692308vw;

  }

  .ct_bg .text_link > a {

    height: 7.8846153846vw;

    padding: 0.9615384615vw 2.4038461538vw;

    font-size: 2.6923076923vw;

  }

  .ct_bg .howtoArea02::before, .ct_bg .howtoArea02::after,

  .ct_bg .characterArea02::before,

  .ct_bg .characterArea02::after,

  .ct_bg .movieArea02::before,

  .ct_bg .movieArea02::after,

  .ct_bg .aboutArea::before,

  .ct_bg .aboutArea::after,

  .ct_bg .lineupArea::before,

  .ct_bg .lineupArea::after {

    width: 19.2307692308vw;

    height: 19.2307692308vw;

  }

  .ct_bg .aboutArea {

    background: linear-gradient(#E5E632, #E5E632) repeat-x 0 0/100% 3.0769230769vw, linear-gradient(#E5E632, #E5E632) repeat-x 0 100%/100% 3.0769230769vw, rgba(255, 255, 255, 0.8);

    padding: 11.5384615385vw 0;

  }

  .ct_bg #about.aboutArea {

    padding: 11.5384615385vw 0 !important;

    background: linear-gradient(#E5E632, #E5E632) repeat-x 0 0/100% 3.0769230769vw, linear-gradient(#E5E632, #E5E632) repeat-x 0 100%/100% 3.0769230769vw, rgba(255, 255, 255, 0.8) !important;

  }

  .ct_bg .howtoArea02,

  .ct_bg .characterArea02,

  .ct_bg .movieArea02 {

    background: url("/img/products/pixtube/common/img/line.jpg") no-repeat 50% 100%/100% 23px, linear-gradient(#E5E632, #E5E632) repeat-x 0 0/100% 3.0769230769vw, linear-gradient(#E5E632, #E5E632) repeat-x 0 100%/100% 5.2884615385vw, rgba(255, 255, 255, 0.8);

    padding: 7.6923076923vw 0 13.75vw;

  }

  .ct_bg .howtoArea02 .asobikata05 {

    width: 100%;

    padding-right: 11.5384615385vw;

    margin-bottom: 5.7692307692vw;

  }

  .ct_bg .howtoArea02 .asobikata05 .asobikata01Chara01 {

    top: 9.4230769231vw;

    left: -11.1538461538vw;

    width: 8.3653846154vw;

  }

  .ct_bg .howtoArea02 .asobikata05 .asobikata01Chara02 {

    top: 9.7115384615vw;

    right: -6.5384615385vw;

    width: 7.6923076923vw;

  }

  .ct_bg .howtoArea02 .asobikata05 .asobikata01Chara03 {

    top: 36.0576923077vw;

    right: 1.25vw;

    width: 8.0769230769vw;

  }

  .ct_bg .howtoArea02 .asobikata06 {

    width: 100%;

    padding-left: 11.5384615385vw;

  }

  .ct_bg .howtoArea02 .movieCol01 .howtoChara02 {

    display: none;

  }

  .ct_bg .characterArea::before, .ct_bg .characterArea::after {

    top: 2.2115384615vw;

  }

  .ct_bg .character-card span {

    font-size: 1.9230769231vw;

  }

  .ct_bg .character-list01 .character-card {

    padding: 2.5vw 0;

  }

  .ct_bg .character-list01 .character-card img {

    width: 13.2692307692vw;

  }

  .ct_bg .character-list02 {

    padding-bottom: 2.5vw;

  }

  .ct_bg .character-list02 .character-card {

    padding: 2.5vw 3.8461538462vw 1.1538461538vw;

  }

  .ct_bg .character-list02 .character-card::after {

    bottom: -2.5vw;

    height: 2.5vw;

  }

  .ct_bg .character-list02 .character-card img {

    width: 30.7692307692vw;

  }

  .ct_bg .character-list02 .character-card .c_text.name {

    margin-top: 2.1153846154vw;

    margin-bottom: 0.9615384615vw;

  }

  .ct_bg .character-list02 .character-card .c_text.name span {

    font-size: 3.8461538462vw;

  }

  .ct_bg .character-list02 .character-card .c_text.name span + span {

    font-size: 2.6923076923vw;

  }

  .ct_bg .character-list02 .character-card .c_text.tx02, .ct_bg .character-list02 .character-card .c_text.tx03 {

    margin-bottom: 0.9615384615vw;

    font-size: 1.9230769231vw;

  }

  .ct_bg .character-list02 .character-card .c_text.tx04 {

    font-size: 2.3076923077vw;

  }

  .ct_bg .character-list02 .character-card .mateBox {

    padding: 1.9230769231vw 2.6923076923vw 1.4423076923vw;

    margin-top: 3.5576923077vw;

  }

  .ct_bg .character-list02 .character-card .mateBox figure img {

    top: -6.7307692308vw;

    left: 19.4230769231vw;

    width: 21.1538461538vw;

  }

  .ct_bg .character-list02 .character-card .mateBox figure figcaption {

    margin-left: 12.8846153846vw;

    font-size: 1.9230769231vw;

    margin-top: 0.3846153846vw;

  }

  .ct_bg .character-list03 {

    grid-template-columns: repeat(2, 320px);

  }

  .ct_bg .character-list03::before, .ct_bg .character-list03::after {

    display: none;

  }

  .ct_bg .character-list03 .character-card:last-child {

    grid-column: 1 / -1;

    justify-self: center;

  }

  .ct_bg .character-list03 .character-card li + li::before {

    top: calc(0.9615384615vw + .45em);

  }

  .ct_bg .movieArea::before, .ct_bg .movieArea::after {

    top: 2.2115384615vw;

    height: calc(100% - 4.4230769231vw);

  }

  .ct_bg .lineupArea {

    background: url("/img/products/pixtube/common/img/line.jpg") no-repeat 50% 0/100% 2.2115384615vw, linear-gradient(#E5E632, #E5E632) repeat-x 0 2.2115384615vw / 100% 32px, linear-gradient(#E5E632, #E5E632) repeat-x 0 100%/100% 32px, rgba(255, 255, 255, 0.8);

  }

  .ct_bg .lineupArea::before {

    top: 2.2115384615vw;

  }

  .ct_bg .lineupArea .c_text.tx01 {

    font-size: 1.5384615385vw;

  }

  .ct_bg .lineupArea .c_text.tx01 span {

    font-size: 2.6923076923vw;

  }

  .ct_bg .lineupArea .c_text.tx02 {

    font-size: 1.5384615385vw;

  }

  .ct_bg .lineupArea .c_text.period {

    font-size: 1.3461538462vw;

    margin-bottom: 1.3461538462vw;

  }

  .ct_bg .lineupArea .c_text.name {

    margin-bottom: 1.3461538462vw;

  }

  .ct_bg .lineupArea .c_text.name span {

    font-size: 2.6923076923vw;

  }

  .ct_bg .lineupArea .c_text.name span + span {

    font-size: 1.5384615385vw;

  }

  .ct_bg .lineupArea .c_text.color {

    font-size: 3.4615384615vw;

  }

  .ct_bg .lineupArea .productsWrap {

    margin-top: 1.9230769231vw;

    width: 95.7692307692vw;

  }

  .ct_bg .lineupArea .products_item {

    padding: 1.9230769231vw 1.9230769231vw 2.8846153846vw 1.9230769231vw;

  }

  .ct_bg .lineupArea .products_item::before, .ct_bg .lineupArea .products_item::after {

    width: 47.5961538462vw;

    height: 14.6153846154vw;

  }

  .ct_bg .lineupArea .products_item::before {

    top: -0.7692307692vw;

    left: -0.7692307692vw;

  }

  .ct_bg .lineupArea .products_item::after {

    left: -0.7692307692vw;

    bottom: -0.7692307692vw;

  }

  .ct_bg .lineupArea .products_item .img {

    flex-basis: 21.1538461538vw;

  }

  .ct_bg .lineupArea .products_item .img img {

    width: 19.2307692308vw;

  }

  .ct_bg .lineupArea .products_item .text_link {

    margin-top: 2.8846153846vw;

  }

}

@media screen and (max-width: 998px) and (min-width: 768px){

  .ct_bg .movieArea.is-movie-slider .movieSliderThumbViewport {

    width: 100vw;

    max-width: none;

  }

  .ct_bg .movieArea.is-movie-slider .is-main-movie .movieSliderArrow.is-prev {

    left: 0;

  }

  .ct_bg .movieArea.is-movie-slider .is-main-movie .movieSliderArrow.is-next {

    right: 0;

  }

  .ct_bg .movieArea.is-movie-slider .is-short-movie .movieSliderArrow.is-prev {

    left: calc((100vw - 100%) / -2);

  }

  .ct_bg .movieArea.is-movie-slider .is-short-movie .movieSliderArrow.is-next {

    right: calc((100vw - 100%) / -2);

  }

}

@media screen and (max-width: 890px){

  .ct_bg .howtoContents01 {

    padding: 9.8876404494vw 0 12.6966292135vw;

  }

  .ct_bg .howtoContents01 .asobikata01 {

    top: 7.5280898876vw;

    left: calc(50% - 54.9438202247vw);

    width: 38.202247191vw;

  }

  .ct_bg .howtoContents01 .asobikata02 {

    bottom: 16.5168539326vw;

    left: calc(50% - 37.4157303371vw);

    width: 22.4719101124vw;

  }

  .ct_bg .howtoContents01 .asobikata03 {

    top: 22.3595505618vw;

    left: calc(50% + 22.2471910112vw);

    width: 33.7078651685vw;

  }

  .ct_bg .howtoMovie {

    width: 67.4157303371vw;

    height: 67.4157303371vw;

  }

}

@media screen and (max-width: 767px){

  .ct_bg .pcNone02 {

    display: block !important;

  }



  .ct_bg .spNone02 {

    display: none !important;

  }

  .ct_bg {

    background: #FFE8F2 url("/img/products/pixtube/common/img/bg01_sp.jpg") repeat-y 0 0/100%;

  }

  .ct_bg .c_inner01 {

    padding: 0 5vw;

  }

  .ct_bg .headTitleArea01 {

    padding: 1vw 2.5vw;

  }

  .ct_bg .headTitleArea01 h1 {

    font-size: 3vw;

  }

  .ct_bg .lowerHeadTitleArea {

    padding: 1vw 2.5vw;

  }

  .ct_bg .lowerHeadTitleArea h1 {

    text-align: right;

  }

  .ct_bg .shortMovieWrap {

    width: 65vw;

    gap: 10vw;

  }

  .ct_bg .shortMovieWrap .movieWrap02 {

    flex-basis: 100%;

  }

  .ct_bg .shortMovieWrap .movieWrap02:nth-child(n + 2) {

    margin-top: 0;

  }

  .ct_bg .caption01 {

    font-size: 4.5vw;

  }

  .ct_bg .movieContents01 .movieWrap01 > .movieCol01 {

    width: 100%;

  }

  .ct_bg .movieContents01 .movieWrap01 > .movieCol01:nth-child(even) {

    margin-left: 0;

  }

  .ct_bg .movieContents01 .movieWrap01 > .movieCol01:nth-child(n + 2) {

    margin-top: 10vw;

  }

  .ct_bg .movieArea.is-movie-slider .movieSliderArrow span {

    transform: translateX(-10%);

  }

  .ct_bg .movieArea.is-movie-slider .movieSliderArrow.is-next span {

    transform: translateX(10%) scaleX(-1);

  }

  .ct_bg .movieArea.is-movie-slider .movieSliderFrame,

  .ct_bg .movieArea.is-movie-slider .is-short-movie {

    width: 100vw;

    margin-left: 50%;

    transform: translateX(-50%);

  }

  .ct_bg .movieArea.is-movie-slider .movieSliderViewport {

    overflow: hidden;

  }

  .ct_bg .movieArea.is-movie-slider .movieSliderTrack,

  .ct_bg .movieArea.is-movie-slider .shortMovieWrap {

    gap: 0;

  }

  .ct_bg .movieArea.is-movie-slider .movieSliderItem {

    padding: 0 5vw;

  }

  .ct_bg .movieArea.is-movie-slider .movieWrap01 > .movieCol01 {

    flex-basis: 100%;

  }

  .ct_bg .movieArea.is-movie-slider .caption01 {

    min-height: 0;

    font-size: 4.2vw;

  }

  .ct_bg .movieArea.is-movie-slider .movieSliderArrow {

    width: 10vw;

    height: 20vw;

    border-width: 1vw;

    border-radius: 1.5vw;

  }

  .ct_bg .movieArea.is-movie-slider .movieSliderArrow span {

    width: 4.5vw;

    height: 7vw;

  }

  .ct_bg .movieArea.is-movie-slider .is-main-movie .movieSliderArrow {

    top: calc(3.5vw + ((13.25vw - 20vw) / 2));

  }

  .ct_bg .movieArea.is-movie-slider .is-main-movie .movieSliderArrow.is-prev {

    left: 0;

  }

  .ct_bg .movieArea.is-movie-slider .is-main-movie .movieSliderArrow.is-next {

    right: 0;

  }

  .ct_bg .movieArea.is-movie-slider .movieSliderThumbViewport {

    width: 100%;

    margin-top: 8vw;

    padding-top: 0;

    height: 20vw;

    display: flex;

    align-items: center;

  }

  .ct_bg .movieArea.is-movie-slider .movieSliderThumbs {

    gap: 10px;

  }

  .ct_bg .movieArea.is-movie-slider .movieSliderThumb {

    flex: 0 0 95px;

    height: 53px;

    border-width: .9vw;

  }

  .ct_bg .movieArea.is-movie-slider .movieSliderThumb::before {

    top: -3.9vw;

    border-right-width: 2vw;

    border-bottom-width: 3.9vw;

    border-left-width: 2vw;

  }

  .ct_bg .movieArea.is-movie-slider .shortMovieWrap {

    gap: 10vw;

  }

  .ct_bg .movieArea.is-movie-slider .shortMovieWrap .movieWrap02 {

    flex-basis: 60vw;

    padding: 0;

  }

  .ct_bg .movieArea.is-movie-slider .is-short-movie .movieSliderArrow {

    top: calc(50% - 12vw);

  }

  .ct_bg .movieArea.is-movie-slider .is-short-movie .movieSliderArrow.is-prev {

    left: 0;

  }

  .ct_bg .movieArea.is-movie-slider .is-short-movie .movieSliderArrow.is-next {

    right: 0;

  }

  .ct_bg .mainArea01 {

    background: url("/img/products/pixtube/img/bg_index01_sp.png") no-repeat 50% 33vw/100%;

  }

  .ct_bg .mainArea01 .c_inner01 {

    height: 150vw;

    padding-top: 2.25vw;

  }

  .ct_bg .mainArea01 .title img {

    width: 100%;

  }

  .ct_bg .mainArea01 .hontai_pink {

    top: 43vw;

    left: -0.875vw;

    width: 50.7225vw;

  }

  .ct_bg .mainArea01 .hontai_purple {

    top: 38.25vw;

    left: inherit;

    right: 1.375vw;

    width: 50.4575vw;

    transform: rotate(2.42deg);

  }

  .ct_bg .mainArea01 .tx01 {

    bottom: 2.75vw;

    right: 2.5vw;

    font-size: 3vw;

  }

  .ct_bg .mainArea01 .character01 {

    top: inherit;

    bottom: -16.25vw;

    left: -1.25vw;

    width: 45vw;

  }

  .ct_bg .mainArea01 .character02 {

    top: inherit;

    bottom: -17vw;

    left: inherit;

    right: 0.5vw;

    width: 45vw;

  }

  .ct_bg .mainArea01 .character03 {

    top: inherit;

    bottom: 14.75vw;

    left: 29.5vw;

    width: 30vw;

    transform: rotate(6.64deg);

  }

  .ct_bg .mainArea01 .character04 {

    bottom: 1.75vw;

    left: 44vw;

    width: 30vw;

    transform: rotate(-10deg);

  }

  .ct_bg .mainArea01.is-main-chara03 .character03 {

    animation-name: mainAreaBoingChara03Sp;

  }

  .ct_bg .mainArea01.is-main-chara04 .character04 {

    animation-name: mainAreaBoingChara04Sp;

  }

  .ct_bg .mainArea01.is-main-toy .hontai_purple {

    animation-name: mainAreaBoingHontaiPurpleSp;

  }

  .ct_bg .text_link > a {

    height: 17vw;

    padding: 2.5vw 5vw;

    border-radius: 10px;

    font-size: 6vw;

  }

  .ct_bg .text_link > a > span {

    padding-left: 11vw;

  }

  .ct_bg .text_link > a > span::before {

    width: 8vw;

    height: 8vw;

  }

  .ct_bg .text_link > a > span.reserve::before {

    width: 8.5vw;

    height: 8.5vw;

  }

  .ct_bg .text_link > a > span.waiting::before {

    width: 8.5vw;

    height: 8vw;

  }

  .ct_bg .btn_link,

  .ct_bg .btn_pdf {

    width: 90vw;

    margin-top: 10vw;

  }

  .ct_bg .btn_link a,

  .ct_bg .btn_pdf a {

    height: 16.25vw;

    padding: 3vw 3vw;

    border-radius: 10px;

    font-size: 5.5vw;

  }

  .ct_bg .btn_link a::before, .ct_bg .btn_link a::after,

  .ct_bg .btn_pdf a::before,

  .ct_bg .btn_pdf a::after {

    inset: 1vw;

    border-radius: 6px;

  }

  .ct_bg .btn_link a span::after,

  .ct_bg .btn_pdf a span::after {

    width: 6vw;

    height: 5vw;

    margin-left: 4vw;

    transform: translateY(0.25vw);

  }

  .ct_bg .btn_pdf {

    width: 85vw;

  }

  .ct_bg .btn_pdf a {

    font-size: 6vw;

    height: 19vw;

  }

  .ct_bg .lineupArea .btn_pdf {

    margin-top: 12vw;

  }

  .ct_bg .title02 {

    width: 90vw;

    margin-bottom: 5vw;

  }

  .ct_bg .title03 {

    font-size: 9vw;

    margin-top: 10vw;

    margin-bottom: 5vw;

  }

  .ct_bg .topNavArea {

    padding: 5vw;

  }

  .ct_bg .localNavList {

    flex-wrap: wrap;

    align-items: flex-start;

    align-content: center;

    justify-content: center;

    gap: 5vw;

    width: 100%;

  }

  .ct_bg .localNavList li {

    box-sizing: border-box;

    flex: 0 1 calc((100% - 5vw) / 2);

    max-width: calc((100% - 5vw) / 2);

    min-width: 0;

    justify-content: center;

    padding-bottom: 2vw;

    border-bottom: 0.5vw solid #fff;

  }

  .ct_bg .localNavList li + li::before {

    content: none;

  }

  .ct_bg .localNavList li:nth-child(4)::before {

    content: none;

  }

  .ct_bg .localNavList li a::before {

    display: none;

  }

  .ct_bg .localNavList li a img {

    height: 10vw;

  }

  .ct_bg .lowerNavArea {

    padding: 0;

    flex-direction: column;

    align-items: stretch;

    justify-content: flex-start;

  }

  .ct_bg .lowerNavArea .lowerNavInner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    width: 100%;

    box-sizing: border-box;

    padding: 2.5vw 2.5vw 2.5vw;

    background: #02B2B2;

    margin-left: 0;

  }

  .ct_bg .lowerNavArea .lowerNavLogo {

    position: absolute;

    left: 2.5vw;

    top: -4.5vw;

    margin: 0;

  }

  .ct_bg .lowerNavArea .lowerNavLogo img {

    width: 42.5vw;

    height: auto;

  }

  .ct_bg .lowerNavArea .lowerNavToggle {

    display: grid;

    grid-template-columns: 8vw 16vw;

    column-gap: 2vw;

    align-items: center;

    justify-content: center;

    margin-left: auto;

    width: 31vw;

    height: 10.75vw;

    border: 0;

    border-radius: 1vw;

    background: #fff;

    color: #00408D;

    font-family: "M PLUS 1", sans-serif;

    font-size: 4vw;

    font-weight: 800;

    line-height: 1;

    cursor: pointer;

  }

  .ct_bg .lowerNavArea .lowerNavToggleText {

    display: block;

    width: 16vw;

    text-align: center;

    white-space: nowrap;

    line-height: 1;

  }

  .ct_bg .lowerNavArea .lowerNavToggleText::before {

    display: block;

  }

  .ct_bg .lowerNavArea .lowerNavToggleIcon {

    position: relative;

    display: block;

    width: 8vw;

    height: 6vw;

    background-image: linear-gradient(#E62E8B, #E62E8B);

    background-position: 50% 50%;

    background-repeat: no-repeat;

    background-size: 100% 1vw;

    box-sizing: border-box;

    transition: background-color 0.24s cubic-bezier(0.22, 1, 0.36, 1);

  }

  .ct_bg .lowerNavArea .lowerNavToggleIcon::before, .ct_bg .lowerNavArea .lowerNavToggleIcon::after {

    content: "";

    position: absolute;

    left: 0;

    top: 50%;

    width: 100%;

    height: 1vw;

    background: #E62E8B;

    transform-origin: 50% 50%;

    transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);

  }

  .ct_bg .lowerNavArea .lowerNavToggleIcon::before {

    transform: translateY(calc(-50% - 2.5vw));

  }

  .ct_bg .lowerNavArea .lowerNavToggleIcon::after {

    transform: translateY(calc(-50% + 2.5vw));

  }

  .ct_bg .lowerNavArea.is-open .lowerNavToggleIcon {

    background-image: none;

  }

  .ct_bg .lowerNavArea.is-open .lowerNavToggleIcon::before {

    transform: translateY(-50%) rotate(45deg);

  }

  .ct_bg .lowerNavArea.is-open .lowerNavToggleIcon::after {

    transform: translateY(-50%) rotate(-45deg);

  }

  .ct_bg .lowerNavArea.is-open .lowerNavToggleText::before {

    content: "とじる";

  }

  .ct_bg .lowerNavArea.is-open .lowerNavToggleText {

    font-size: 0;

  }

  .ct_bg .lowerNavArea.is-open .lowerNavToggleText::before {

    font-size: 4vw;

  }

  .ct_bg .lowerNavArea .localNavList {

    display: none;

    flex-direction: column;

    align-items: center;

    flex-wrap: nowrap;

    gap: 0;

    width: 100%;

    box-sizing: border-box;

    padding: 5vw 5vw 15vw;

    background: #02B2B2;

    margin-bottom: 0;

  }

  .ct_bg .lowerNavArea .localNavList li {

    flex: 0 0 auto;

    flex-direction: column;

    align-items: center;

    max-width: none;

    width: 100%;

    padding: 0;

    border-bottom: 0;

  }

  .ct_bg .lowerNavArea .localNavList li + li {

    margin-top: 5vw;

  }

  .ct_bg .lowerNavArea .localNavList li + li::before {

    content: "";

    display: block;

    width: 5vw;

    height: 0.5vw;

    margin: 0 auto 5vw;

    background: #fff;

  }

  .ct_bg .lowerNavArea .localNavList li a {

    margin: 0 auto;

  }

  .ct_bg .lowerNavArea .localNavList li a img {

    height: 10vw;

  }

  .ct_bg .lowerNavArea.is-open .localNavList {

    display: flex;

  }

  .ct_bg .howtoArea02::before, .ct_bg .howtoArea02::after,

  .ct_bg .characterArea02::before,

  .ct_bg .characterArea02::after,

  .ct_bg .movieArea02::before,

  .ct_bg .movieArea02::after,

  .ct_bg .aboutArea::before,

  .ct_bg .aboutArea::after,

  .ct_bg .lineupArea::before,

  .ct_bg .lineupArea::after {

    width: 16.75vw;

    height: 16.75vw;

    background: url("/img/products/pixtube/common/img/corner_sp.png") no-repeat 0 0/contain;

  }

  .ct_bg .howtoArea02::after,

  .ct_bg .characterArea02::after,

  .ct_bg .movieArea02::after {

    bottom: 5vw;

  }

  .ct_bg .howtoArea02 .title02,

  .ct_bg .characterArea02 .title02,

  .ct_bg .movieArea02 .title02 {

    width: 90vw;

    margin-bottom: 10vw;

  }

  .ct_bg .movieArea02 .title02 {

    width: 90vw;

  }

  .ct_bg .aboutArea {

    background: linear-gradient(#E5E632, #E5E632) repeat-x 0 0/100% 4vw, linear-gradient(#E5E632, #E5E632) repeat-x 0 100%/100% 4vw, rgba(255, 255, 255, 0.8);

    padding: 20vw 0;

  }

  .ct_bg #about.aboutArea {

    padding: 20vw 0 !important;

    background: linear-gradient(#E5E632, #E5E632) repeat-x 0 0/100% 4vw, linear-gradient(#E5E632, #E5E632) repeat-x 0 100%/100% 4vw, rgba(255, 255, 255, 0.8) !important;

  }

  .ct_bg .aboutArea .title02 {

    margin-bottom: 5vw;

    background: none !important;

  }

  .ct_bg .aboutArea .c_inner01 {

    padding: 0;

  }

  .ct_bg .aboutArea .aboutContents01 {

    width: 100%;

  }

  .ct_bg .aboutArea .aboutImage01 + .aboutImage01 {

    margin-top: 5vw;

  }

  .ct_bg .aboutArea .aboutImage01 + .aboutImage01 + .aboutImage01 {

    margin-top: 5vw;

  }

  .ct_bg .aboutArea .aboutChara01,

  .ct_bg .aboutArea .aboutChara02,

  .ct_bg .aboutArea .aboutKira01,

  .ct_bg .aboutArea .aboutKira02 {

    display: none;

  }

  .ct_bg .howtoContents01 {

    margin-left: -2.5vw;

    margin-right: -2.5vw;

    padding: 40vw 0 25vw;

    background: url("/img/products/pixtube/common/img/bg06_sp.png") center no-repeat;

    background-size: 100%;

  }

  .ct_bg .howtoContents01 .asobikata01 {

    top: 3.95vw;

    left: -3.5vw;

    width: 77.5vw;

  }

  .ct_bg .howtoContents01 .asobikata02 {

    bottom: inherit;

    top: 24.875vw;

    left: inherit;

    right: 0.5vw;

    width: 31vw;

  }

  .ct_bg .howtoContents01 .asobikata03 {

    top: inherit;

    bottom: -5vw;

    left: 0vw;

    width: 55.5vw;

  }

  .ct_bg .howtoContents01 .asobikata01.is-ready {

    transform: translateY(18px) rotate(-5deg);

  }

  .ct_bg .howtoContents01 .asobikata01.is-show {

    transform: translateY(0) rotate(-5deg);

  }

  .ct_bg .howtoMovie {

    width: 75vw;

    height: 75vw;

  }

  .ct_bg .howtoMovie::after {

    border-width: 1.5vw;

  }

  .ct_bg .howtoArea {

    margin-bottom: 75vw;

    padding: 20vw 0 25vw;

    background: url("/img/products/pixtube/common/img/line_sp.png") no-repeat 50% 100%/100% 5vw, url("/img/products/pixtube/common/img/bg04.png") repeat 0 0 / 12.5vw;

  }

  .ct_bg .howtoArea::before {

    width: 100%;

    left: 0;

    background: url("/img/products/pixtube/common/img/bg02_sp.png") repeat-y 0 0/100%;

  }

  .ct_bg .howtoArea::after {

    content: none;

  }

  .ct_bg .howtoArea .title02 {

    margin-bottom: 10vw;

  }

  .ct_bg .howtoArea .howtoChara01,

  .ct_bg .howtoArea .howtoChara02 {

    display: none;

  }

  .ct_bg .howtoArea .howtoChara01 {

    top: 5.5vw;

    left: calc(50% + 27.5vw);

  }

  .ct_bg .howtoArea .howtoChara02 {

    top: 97.5vw;

    left: calc(50% - 47.5vw);

  }

  .ct_bg .howtoArea02,

  .ct_bg .characterArea02,

  .ct_bg .movieArea02 {

    margin-bottom: 75vw;

    padding: 20vw 0 25vw;

    background: url("/img/products/pixtube/common/img/line_sp.png") no-repeat 50% 100%/100% 5vw, linear-gradient(#E5E632, #E5E632) repeat-x 0 0/100% 4vw, linear-gradient(#E5E632, #E5E632) repeat-x 0 100%/100% 4vw, rgba(255, 255, 255, 0.8);

  }

  .ct_bg .howtoArea02 .howtoContents01 .howtoChara01 {

    display: none;

  }

  .ct_bg .howtoArea02 .asobikata05 {

    padding-right: 0;

  }

  .ct_bg .howtoArea02 .asobikata05 .asobikata01Chara01 {

    top: inherit;

    bottom: -17vw;

    left: 38vw;

    width: 13.25vw;

  }

  .ct_bg .howtoArea02 .asobikata05 .asobikata01Chara02 {

    top: -16.5vw;

    right: inherit;

    left: 2.5vw;

    width: 12.25vw;

  }

  .ct_bg .howtoArea02 .asobikata05 .asobikata01Chara03 {

    top: 0;

    right: 3vw;

    width: 12.75vw;

  }

  .ct_bg .howtoArea02 .asobikata06 {

    padding-left: 0;

    margin-top: 20vw !important;

  }

  .ct_bg .howtoArea02 .asobikata06 .howtoChara03,

  .ct_bg .howtoArea02 .asobikata06 .howtoChara04 {

    display: none;

  }

  .ct_bg .howtoArea02 .btn_pdf,

  .ct_bg .howtoArea02 .movieCol01,

  .ct_bg .howtoArea02 .asobikata04,

  .ct_bg .howtoArea02 .asobikata05,

  .ct_bg .howtoArea02 .asobikata06 {

    margin-top: 10vw;

  }

  .ct_bg .characterArea {

    padding: 25vw 0 26.5vw;

    background: url("/img/products/pixtube/common/img/line_sp.png") no-repeat 50% 0/100% 5vw, url("/img/products/pixtube/common/img/bg05.png") repeat 0 5vw / 12.5vw;

  }

  .ct_bg .characterArea::before, .ct_bg .characterArea::after {

    top: 5vw;

  }

  .ct_bg .characterArea::before {

    width: 100%;

    left: 0;

    background: url("/img/products/pixtube/common/img/bg02_sp.png") repeat-y 0 0/100%;

  }

  .ct_bg .characterArea::after {

    content: none;

  }

  .ct_bg .characterArea .title02 {

    margin-bottom: 10vw;

  }

  .ct_bg .characterArea .c_text.tx01 {

    margin-top: 10vw;

    margin-bottom: 10vw;

    font-size: 5vw;

  }

  .ct_bg .character-card span {

    font-size: 4vw;

  }

  .ct_bg .character-list01 {

    gap: 1.25vw 1.3888888889%;

  }

  .ct_bg .character-list01 .character-card {

    padding: 6.5vw 0;

    flex-basis: calc(96.66% / 3);

    background: url("/img/products/pixtube/img/bg_index02_sp.png") no-repeat 0 0/100%;

  }

  .ct_bg .character-list01 .character-card img {

    width: 26vw;

  }

  .ct_bg .character-list02 {

    grid-template-columns: repeat(2, 44vw);

    justify-content: center;

    gap: 2vw;

    padding-bottom: 6.5vw;

  }

  .ct_bg .character-list02 .character-card {

    padding: 6.5vw 3vw 0;

    background: url("/img/products/pixtube/img/bg_index03_sp.png") no-repeat 0 0/100%;

  }

  .ct_bg .character-list02 .character-card::after {

    bottom: -6.5vw;

    height: 6.5vw;

    background: url("/img/products/pixtube/img/bg_index05_sp.png") no-repeat 0 0/100%;

  }

  .ct_bg .character-list02 .character-card img {

    width: 37.25vw;

    margin-left: 0;

    margin-right: auto;

  }

  .ct_bg .character-list02 .character-card.irumi {

    background: url("/img/products/pixtube/img/bg_index04_sp.png") no-repeat 0 0/100%;

  }

  .ct_bg .character-list02 .character-card.irumi img {

    margin-left: auto;

    margin-right: auto;

  }

  .ct_bg .character-list02 .character-card .c_text.name {

    margin-top: 5.5vw;

    margin-bottom: 2.25vw;

  }

  .ct_bg .character-list02 .character-card .c_text.name span {

    font-size: 5vw;

  }

  .ct_bg .character-list02 .character-card .c_text.name span + span {

    margin-left: .7em;

    font-size: 3.5vw;

  }

  .ct_bg .character-list02 .character-card .c_text.tx02, .ct_bg .character-list02 .character-card .c_text.tx03 {

    margin-bottom: 2.5vw;

    font-size: 3.5vw;

  }

  .ct_bg .character-list02 .character-card .c_text.tx03 {

    font-size: 3vw;

  }

  .ct_bg .character-list02 .character-card .c_text.tx04 {

    padding: 0.25em 2.1em 0.25em;

    font-size: 3.5vw;

    position: absolute;

    left: -3.75vw;

    white-space: nowrap;

  }

  .ct_bg .character-list02 .character-card .mateBox {

    border-radius: 12px 0 12px 12px;

    padding: 1.75vw 0 0;

    margin-top: 0;

    overflow: hidden;

    height: 31vw;

  }

  .ct_bg .character-list02 .character-card .mateBox figure {

    width: 100%;

    height: 100%;

    position: relative;

  }

  .ct_bg .character-list02 .character-card .mateBox figure img {

    top: inherit;

    left: 12.75vw;

    bottom: -1.5vw;

    width: 30vw;

  }

  .ct_bg .character-list02 .character-card .mateBox figure figcaption {

    margin-left: 0;

    margin-top: 0;

    font-size: 3.5vw;

    position: absolute;

    bottom: 2.5vw;

    left: 4.5vw;

  }

  .ct_bg .character-list03 {

    grid-template-columns: repeat(2, 1fr);

    gap: 2.5vw;

    margin-top: 10vw;

    margin-bottom: 10vw;

  }

  .ct_bg .character-list03::before, .ct_bg .character-list03::after {

    display: none;

  }

  .ct_bg .character-list03 .character-card:first-child {

    grid-column: auto;

    grid-row: auto;

  }

  .ct_bg .character-list03 .character-card:last-child {

    grid-column: 1 / -1;

    justify-self: center;

    width: calc((100% - 2.7777777778%) / 2);

  }

  .ct_bg .character-list03 .character-card {

    grid-column: auto;

    width: auto;

    min-height: 58vw;

    padding: 6vw 2.25vw;

    background: url("/img/products/pixtube/common/img/bg07_sp.png") no-repeat 0 0/100% auto, url("/img/products/pixtube/common/img/bg08_sp.png") no-repeat 0 100%/100% auto, url("/img/products/pixtube/common/img/bg09_sp.png") no-repeat 0 6vw / 100% auto;

  }

  .ct_bg .character-list03 .character-card.has-text {

    min-height: 75vw;

    padding-bottom: 6vw;

    background: url("/img/products/pixtube/common/img/bg07_sp.png") no-repeat 0 0/100% auto, url("/img/products/pixtube/common/img/bg08_sp.png") no-repeat 0 100%/100% auto, url("/img/products/pixtube/common/img/bg09_sp.png") no-repeat 0 6vw / 100% auto, url("/img/products/pixtube/common/img/bg12_sp.png") no-repeat 0 calc(100% - 6vw)/100% auto;

  }

  .ct_bg .character-list03 .character-card img {

    width: 38.5vw;

  }

  .ct_bg .character-list03 .character-card span {

    font-size: 4vw;

    gap: 3.25vw;

  }

  .ct_bg .character-list03 .character-card span::before, .ct_bg .character-list03 .character-card span::after {

    width: 8.25vw;

    height: 4.25vw;

  }

  .ct_bg .character-list03 .character-card span::before {

    background-image: url("/img/products/pixtube/common/img/bg10_sp.svg");

  }

  .ct_bg .character-list03 .character-card span::after {

    background-image: url("/img/products/pixtube/common/img/bg11_sp.svg");

  }

  .ct_bg .character-list03 .character-card.nyaopiku span {

    gap: 1.5vw;

  }

  .ct_bg .character-list03 .character-card .character-text {

    margin: 2vw -2.25vw 0;

    padding: 2.75vw 3.25vw 0;

    background-image: url("/img/products/pixtube/common/img/bg12_sp.png");

  }

  .ct_bg .character-list03 .character-card ul {

    font-size: 2.75vw;

    margin-bottom: -0.25vw;

  }

  .ct_bg .character-list03 .character-card li {

    padding-left: 2vw;

  }

  .ct_bg .character-list03 .character-card li::before {

    width: 1.5vw;

    height: 1.5vw;

  }

  .ct_bg .character-list03 .character-card li + li {

    margin-top: 1.25vw;

    padding-top: 2.25vw;

  }

  .ct_bg .character-list03 .character-card li + li::before {

    top: calc(1.75vw + .45em);

  }

  .ct_bg .movieArea {

    margin-bottom: 75vw;

    padding: 25vw 0 25vw;

    background: url("/img/products/pixtube/common/img/line_sp.png") no-repeat 50% 0/100% 5vw, url("/img/products/pixtube/common/img/line_sp.png") no-repeat 50% 100%/100% 5vw, url("/img/products/pixtube/common/img/bg04.png") repeat 0 5vw / 12.5vw;

  }

  .ct_bg .movieArea::before, .ct_bg .movieArea::after {

    display: none;

  }

  .ct_bg .movieArea .title02 {

    margin-bottom: 10vw;

  }

  .ct_bg .movieArea .howtoMovie {

    width: 75vw;

    height: 75vw;

  }

  .ct_bg .movieArea .howtoMovie::after {

    border-width: 0.75vw;

  }

  .ct_bg .movieArea .asobikata01 {

    top: -33.375vw;

    left: -5vw;

    width: 77.5vw;

    transform: rotate(-5deg);

  }

  .ct_bg .movieArea .asobikata02 {

    bottom: inherit;

    top: -14.125vw;

    left: inherit;

    right: 5vw;

    width: 31vw;

  }

  .ct_bg .movieArea .asobikata03 {

    top: inherit;

    bottom: -30vw;

    left: -2vw;

    width: 55.5vw;

  }

  .ct_bg .movieArea .movieChara01,

  .ct_bg .movieArea .movieChara02 {

    display: none;

  }

  .ct_bg .movieArea .movieChara01 {

    top: 5.5vw;

    left: calc(50% + 27.5vw);

  }

  .ct_bg .movieArea .movieChara02 {

    top: 97.5vw;

    left: calc(50% - 47.5vw);

  }

  .ct_bg .lineupArea {

    background: url("/img/products/pixtube/common/img/line.jpg") no-repeat 50% 0/100% 5vw, linear-gradient(#E5E632, #E5E632) repeat-x 0 5vw / 100% 4vw, linear-gradient(#E5E632, #E5E632) repeat-x 0 100%/100% 4vw, rgba(255, 255, 255, 0.8);

    padding: 20vw 0;

  }

  .ct_bg .lineupArea::before {

    top: 5vw;

  }

  .ct_bg .lineupArea .c_text.tx01 {

    font-size: 4vw;

  }

  .ct_bg .lineupArea .c_text.tx01 span {

    font-size: 7vw;

  }

  .ct_bg .lineupArea .c_text.tx02 {

    font-size: 4vw;

  }

  .ct_bg .lineupArea .c_text.period {

    padding: 0.2em 0.6em 0.1em;

    font-size: 3.5vw;

    margin-bottom: 2.5vw;

  }

  .ct_bg .lineupArea .c_text.name {

    margin-bottom: 2vw;

  }

  .ct_bg .lineupArea .c_text.name span {

    font-size: 7vw;

  }

  .ct_bg .lineupArea .c_text.name span + span {

    display: inline;

    font-size: 4vw;

    margin-left: 0.5em;

  }

  .ct_bg .lineupArea .c_text.color {

    font-size: 8vw;

  }

  .ct_bg .lineupArea .productsWrap {

    gap: 9vw;

    margin-top: 5vw;

    width: 87.5vw;

  }

  .ct_bg .lineupArea .products_item {

    gap: 1.25vw;

    flex-basis: 100%;

    padding: 5vw 6.25vw 7.5vw;

    background: #fff url("/img/products/pixtube/img/bg_index07.png") no-repeat 50% 33px / 55vw;

  }

  .ct_bg .lineupArea .products_item.purple {

    background: #fff url("/img/products/pixtube/img/bg_index08.png") no-repeat 50% 33px / 55vw;

  }

  .ct_bg .lineupArea .products_item::before, .ct_bg .lineupArea .products_item::after {

    width: 90vw;

    height: 56.5vw;

    background: url("/img/products/pixtube/img/bg_index06_sp.png") no-repeat 0 0/contain;

  }

  .ct_bg .lineupArea .products_item::before {

    top: -2vw;

    left: -1.25vw;

  }

  .ct_bg .lineupArea .products_item::after {

    bottom: -2vw;

    left: -1.25vw;

  }

  .ct_bg .lineupArea .products_item .img {

    flex-basis: 100%;

  }

  .ct_bg .lineupArea .products_item .img img {

    width: 50vw;

  }

  .ct_bg .lineupArea .products_item .textWrap {

    padding-top: 0;

  }

  .ct_bg .lineupArea .products_item .text_link {

    margin-top: 2.25vw;

  }

  .ct_bg .lineupArea .lineupChara01 {

    display: none;

  }

  .ct_bg .footArea {

    padding-top: 15vw;

    background: url("/img/products/pixtube/common/img/bg05.png") repeat 0 5vw / 12.5vw;

  }

  .ct_bg .footArea .sns_wrapper {

    width: auto;

    max-width: calc(100vw - 30px);

    margin: 0 auto;

  }

  .ct_bg .footArea .sns_wrapper .snsBtn02 {

    padding: 7px;

    align-items: center;

    gap: 7px 0;

  }

  .ct_bg .footArea .sns_wrapper .snsBtn02 li {

    margin: 0 5px;

    line-height: 0;

  }

  .ct_bg .footArea .copyrightBlock01 {

    margin-top: 3vw;

    padding-bottom: 5vw;

  }

  .ct_bg .footArea .copyrightBlock01 .copyright01 {

    font-size: 3vw;

  }

  .topMovieModal {

    align-items: flex-start;

    padding: 34vw 3.25vw 6vw;

  }

  .topMovieModalInner {

    width: 100%;

    max-width: none;

  }

  .topMovieModalFrame {

    padding: 4.25vw;

    border-radius: 30px;

  }

  .topMovieModalFrame::before, .topMovieModalFrame::after {

    left: -2vw;

    width: 96.5vw;

    height: 29.75vw;

    background: url("/img/products/pixtube/common/img/frame01_sp.svg") no-repeat 50% 0/100% auto;

  }

  .topMovieModalFrame::before {

    top: -1.75vw;

  }

  .topMovieModalFrame::after {

    bottom: -1.75vw;

    background-image: url("/img/products/pixtube/common/img/frame02_sp.svg");

  }

  .topMovieModalClose {

    top: -8vw;

    right: -3vw;

    width: 10vw;

    height: 10vw;

  }

  .topMovieModalClose span, .topMovieModalClose::before {

    width: 7.75vw;

    height: 0.75vw;

  }

  .topMovieModalClose span, .topMovieModalClose::before {

    width: 6.93vw;

    height: 0.66vw;

  }

  .topMovieModalSkip {

    width: 45vw;

    margin-top: 12vw;

  }

  .topMovieModalSkip a {

    height: 19vw;

    padding: 3.5vw 5vw;

    border-radius: 10px;

    font-size: 6vw;

  }

  .topMovieModalSkip a::before, .topMovieModalSkip a::after {

    inset: 1vw;

    border-radius: 6px;

  }

  .topMovieModalSkip a span::after {

    width: 6vw;

    height: 5vw;

    margin-left: 5vw;

    transform: translateY(0.25vw);

  }

  .fixedMovieBanner {

    right: 0;

    bottom: 0;

    width: 37.45vw;

  }

}