@charset "utf-8";

/* #content reset */

#content *,

#content *::before,

#content *::after {

  box-sizing: border-box;

}

#content * {

  margin: 0;

  padding: 0;

}

#content img,

#content picture,

#content video,

#content canvas,

#content svg {

  display: block;

  max-width: 100%;

  height: auto;

}

#content img {

  width: 100%;

}



#content .introduce__contents, #content .artist__contents, #content .cm__contents, #content .statement__container, #content .statement__contents, #content .cont__center {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

}

#content .introduce__contents > *, #content .artist__contents > *, #content .cm__contents > *, #content .statement__container > *, #content .statement__contents > *, #content .cont__center > * {

  min-height: 0%;

}



#content .introduce__contents, #content .artist__contents, #content .cm__contents, #content .statement__contents, #content .cont__container, #content .cont__container--small {

  box-sizing: content-box !important;

  width: 61.9791666667vw;

  margin-left: auto;

  margin-right: auto;

}

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

  #content .introduce__contents, #content .artist__contents, #content .cm__contents, #content .statement__contents, #content .cont__container, #content .cont__container--small {

    width: auto;

    padding-left: 4vw;

    padding-right: 4vw;

  }

}



#content .card__link, #content .introduce__sns-link, #content .artist__link-icon, #content .cm__btn {

  color: inherit;

  transition: opacity 0.3s;

  cursor: pointer;

}

#content .card__link:hover, #content .introduce__sns-link:hover, #content .artist__link-icon:hover, #content .cm__btn:hover {

  opacity: 0.7;

}



#content .introduce__obi, #content .artist__obi, #content .cm__obi {

  background-size: var(--bgObiSize);

  background-repeat: repeat-x;

  background-position: 0 0;

  animation: cmObiAnim 14s linear infinite;

}



/* common:start */

:root {

  --bgObiSize: 1000px;

  --bar01: 100%;

  --bar02: 153px;

}



#content {

  position: relative;

  display: flex;

  flex-direction: column;

  font-family: "Noto Sans JP", sans-serif;

  color: #323232;

}

#content [v-cloak] {

  display: none;

  opacity: 0;

}

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

  #content .pcOnly {

    display: none !important;

  }

}

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

  #content .spOnly {

    display: none !important;

  }

}

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

  #content .cont__container--small {

    max-width: 1000px;

  }

}

#content .cont__title {

  font-size: 2.6041666667vw;

  font-weight: bold;

  text-align: center;

}

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

  #content .cont__title {

    font-size: 7.4666666667vw;

    font-weight: bold;

    line-height: 1.5;

    letter-spacing: normal;

  }

}

#content .cont__title::after {

  content: "";

  display: block;

  margin-top: 0.9375vw;

  margin-left: auto;

  margin-right: auto;

  width: 20.5729166667vw;

  height: 0.9375vw;

  background-image: url(/special_contents/images/pc/cont_icon_title.png);

  background-repeat: no-repeat;

  background-position: center top;

  background-size: contain;

}

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

  #content .cont__title::after {

    margin-top: 4vw;

    width: 53.3333333333vw;

    height: 3.2vw;

    background-image: url(/special_contents/images/sp/cont_icon_title.png);

  }

}

#content .cont__title-en {

  display: block;

  margin-top: 2.1008403361%;

}

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

  #content .cont__title-en {

    margin-top: 4.2666666667vw;

  }

}

#content .cont__tsume {

  display: inline-block;

  margin-right: -0.2em;

}



/* common:end */

/* js-animation:start */

:root {

  --fade-translate-x: 0px;

  --fade-translate-y: 0px;

  --fade-duration: 500ms;

}



/* 表示方向 */

.up {

  --fade-translate-y: 90px;

}



.down {

  --fade-translate-y: -50px;

}



.fromLeft {

  --fade-translate-x: -100%;

}



.fromRight {

  --fade-translate-x: 100%;

}



.fromLeftBottom {

  --fade-translate-x: -100%;

  --fade-translate-y: 500px;

}



.jsScroll {

  opacity: 0;

  transition-duration: 600ms;

  transition-property: opacity, transform;

  transition-delay: 0ms;

  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  transform: translate(var(--fade-translate-x), var(--fade-translate-y));

}

.jsScroll.delay--100 {

  transition-delay: 100ms;

}

.jsScroll.delay--200 {

  transition-delay: 200ms;

}

.jsScroll.delay--300 {

  transition-delay: 300ms;

}

.jsScroll.delay--400 {

  transition-delay: 400ms;

}

.jsScroll.delay--500 {

  transition-delay: 500ms;

}

.jsScroll.delay--600 {

  transition-delay: 600ms;

}

.jsScroll.delay--700 {

  transition-delay: 700ms;

}

.jsScroll.delay--800 {

  transition-delay: 800ms;

}

.jsScroll.delay--900 {

  transition-delay: 900ms;

}

.jsScroll.delay--1000 {

  transition-delay: 1000ms;

}

.jsScroll.delay--1100 {

  transition-delay: 1100ms;

}

.jsScroll.delay--1200 {

  transition-delay: 1200ms;

}

.jsScroll.delay--1300 {

  transition-delay: 1300ms;

}

.jsScroll.delay--1400 {

  transition-delay: 1400ms;

}

.jsScroll.delay--1500 {

  transition-delay: 1500ms;

}

.jsScroll.delay--1600 {

  transition-delay: 1600ms;

}

.jsScroll.delay--1700 {

  transition-delay: 1700ms;

}

.jsScroll.delay--1800 {

  transition-delay: 1800ms;

}

.jsScroll.delay--1900 {

  transition-delay: 1900ms;

}

.jsScroll.delay--2000 {

  transition-delay: 2000ms;

}

.jsScroll.delay--2100 {

  transition-delay: 2100ms;

}

.jsScroll.delay--2200 {

  transition-delay: 2200ms;

}

.jsScroll.delay--2300 {

  transition-delay: 2300ms;

}

.jsScroll.delay--2400 {

  transition-delay: 2400ms;

}

.jsScroll.delay--2500 {

  transition-delay: 2500ms;

}

.jsScroll.delay--2600 {

  transition-delay: 2600ms;

}

.jsScroll.delay--2700 {

  transition-delay: 2700ms;

}

.jsScroll.delay--2800 {

  transition-delay: 2800ms;

}

.jsScroll.delay--2900 {

  transition-delay: 2900ms;

}

.jsScroll.delay--3000 {

  transition-delay: 3000ms;

}



.jsScrollIn {

  opacity: 1;

  transform: translate(0, 0);

}



.jsFvHide {

  opacity: 0;

  transition-duration: 1s;

  transition-property: opacity, transform;

  transition-delay: 0s;

}

.jsFvHide.jsFvShow {

  opacity: 1;

}



.fade-enter-active {

  transition: opacity 0.8s;

}

.fade-leave-active {

  transition: opacity 0.8s;

}

.fade-enter, .fade-leave-to {

  opacity: 0;

}



/* js-animation:end */

#content .js-modal {

  position: relative;

  z-index: 10000;

}

#content .js-modal__bg {

  position: fixed;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.5);

  top: 0;

  left: 0;

  z-index: 9001;

}

#content .js-modal__bg-enter-active {

  transition: all 0.2s ease-in-out;

}

#content .js-modal__bg-leave-active {

  transition: all 0.2s ease-in-out;

}

#content .js-modal__bg-enter, #content .js-modal__bg-leave-to {

  opacity: 0;

}

#content .js-modal__bg--msg {

  background-color: rgba(0, 0, 0, 0.8);

}

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

  #content .js-modal__bg--msg {

    background-color: #323232;

  }

}

#content .js-modal__trigger {

  transition: opacity 0.3s;

  position: relative;

  z-index: 100;

}

#content .js-modal__trigger:hover {

  opacity: 0.7;

  cursor: pointer;

}

#content .js-modal__close {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: flex-end;

  margin-bottom: 10px;

}

#content .js-modal__close img {

  width: 20px;

}

#content .js-modal__close svg {

  cursor: pointer;

}

#content .js-modal__target {

  position: fixed;

  max-height: 95vh;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  z-index: 9002;

  overflow: hidden;

}

#content .js-modal__target-enter-active {

  transition: all 0.5s ease-in-out;

  transition-delay: 0.3s;

}

#content .js-modal__target-leave-active {

  transition: all 0.5s ease-in-out;

}

#content .js-modal__target-enter {

  opacity: 0;

}

#content .js-modal__target-leave-to {

  opacity: 0;

}

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

  #content .js-modal__target--msg {

    padding-left: 4vw;

    padding-right: 4vw;

    width: 100%;

    max-height: 100%;

    top: 6.6666666667vw;

    bottom: 6.6666666667vw;

    left: 50%;

    transform: translate(-50%, 0);

    overflow: auto;

  }

}

#content .js-modal__movie-frame {

  position: relative;

  width: 800px;

  max-width: 92vw;

  overflow: hidden;

  padding-bottom: 56.25%;

}

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

  #content .js-modal__movie-frame {

    max-width: calc((90vh - 30px) / 0.5625);

  }

}

#content .js-modal__movie-frame iframe {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  border: none;

}

#content .js-modal__msg-frame {

  position: relative;

  width: 49.4791666667vw;

  max-width: 92vw;

  overflow: hidden;

}

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

  #content .js-modal__msg-frame {

    overflow: auto;

    width: 100%;

  }

}

#content .js-modal__img-frame {

  position: relative;

  max-width: 100%;

}

#content .js-modal__img-frame.landscape {

  width: min(92vw, 1000px);

}

#content .js-modal__img-frame.landscape picture,

#content .js-modal__img-frame.landscape img {

  width: 100% !important;

  height: auto !important;

}

#content .js-modal__img-frame.portrait picture,

#content .js-modal__img-frame.portrait img {

  width: auto !important;

  height: 100% !important;

}

#content .js-modal__img-close {

  position: absolute;

  top: 0;

  right: 0;

  width: 110px;

  height: 110px;

  width: 11%;

}

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

  #content .js-modal__img-close {

    width: 13.6231884058%;

    height: 25.0666666667vw;

  }

}

#content .js-modal__img-close::before, #content .js-modal__img-close::after {

  display: block;

  position: absolute;

  content: "";

  width: 40px;

  height: 3px;

  background-color: #ffffff;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}

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

  #content .js-modal__img-close::before, #content .js-modal__img-close::after {

    width: 42.5531914894%;

    height: 0.8vw;

  }

}

#content .js-modal__img-close::before {

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

}

#content .js-modal__img-close::after {

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

}

#content .js-modal__msg-box {

  display: flex;

  flex-direction: row;

  flex-wrap: nowrap;

  justify-content: space-between;

  align-items: stretch;

  width: 49.4791666667vw;

  font-size: 1.25vw;

  line-height: 1.875;

}

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

  #content .js-modal__msg-box {

    width: 100%;

    flex-direction: column;

    align-items: center;

    font-size: 4.8vw;

    line-height: 1.6666666667;

  }

}

#content .js-modal__msg-photo {

  padding-top: 0.5em;

  width: 18.5416666667vw;

}

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

  #content .js-modal__msg-photo {

    padding-top: 4.8vw;

    width: 44.5333333333vw;

  }

}

#content .js-modal__msg-txt {

  width: 28.9583333333vw;

  color: #FFFFFF;

  font-weight: 400;

}

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

  #content .js-modal__msg-txt {

    padding-top: 5.3333333333vw;

    padding-bottom: 3.2vw;

    width: 86.4vw;

  }

}

#content .js-modal__msg-close {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: flex-end;

  margin-bottom: 10px;

}

#content .js-modal__msg-close img {

  width: 2.1875vw;

  cursor: pointer;

}

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

  #content .js-modal__msg-close img {

    width: 42px;

  }

}

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

  #content .js-modal__msg-close {

    margin-bottom: -5.3333333333vw;

    position: absolute;

    right: 4vw;

    top: 0;

    z-index: 2;

  }

}



/* mv:start */

#content .mv__container {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  position: relative;

  background-color: #fff;

}

#content .mv__contents {

  margin-left: auto;

  margin-right: auto;

  width: 61.9791666667vw;

}

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

  #content .mv__contents {

    width: 100%;

  }

}

#content .mv__scroll {

  display: block;

  width: 2.7604166667vw;

  position: absolute;

  left: 72.03125vw;

  bottom: -7.1875vw;

}

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

  #content .mv__scroll {

    width: 8.5333333333vw;

    bottom: -7.7333333333vw;

    left: auto;

    right: 4vw;

  }

}



/* mv:end */

#content .statement__large-text--margin, #content .statement__large-text {

  display: block;

  margin-top: -0.4201680672%;

  font-size: 2.1875vw;

  line-height: 1.7857142857;

  font-weight: bold;

}

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

  #content .statement__large-text--margin, #content .statement__large-text {

    margin-left: -2.6666666667vw;

    margin-right: -2.6666666667vw;

    font-size: 5.8666666667vw;

    line-height: 1.8181818182;

  }

}



/* statement:start */

#content .statement {

  background-color: #ffffff;

  padding-top: 4.6875vw;

  padding-bottom: 8.3333333333vw;

  overflow: hidden;

}

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

  #content .statement {

    padding-top: 13.3333333333vw;

    padding-bottom: 16vw;

  }

}

#content .statement__container {

  width: 100%;

  background-repeat: no-repeat;

  background-position: center;

  background-size: 100%;

}

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

  #content .statement__container {

    background-position: center top 77.3333333333vw;

    background-size: 100%;

  }

}

#content .statement__contents {

  position: relative;

}

#content .statement__logo {

  margin-bottom: 1.8229166667vw;

  width: 15.625vw;

}

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

  #content .statement__logo {

    margin-bottom: 3.2vw;

    width: 35.7333333333vw;

  }

}

#content .statement__logo.down {

  --fade-translate-y: -17.3958333333vw;

}

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

  #content .statement__logo.down {

    --fade-translate-y: -42.4vw;

  }

}

#content .statement__text {

  margin-bottom: 1em;

  font-size: 1.5625vw;

  text-align: center;

  line-height: 2.1666666667;

  color: #323232;

}

#content .statement__text:last-of-type {

  margin-bottom: 2.5210084034%;

}

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

  #content .statement__text:last-of-type {

    margin-bottom: 8vw;

  }

}

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

  #content .statement__text {

    font-size: 4.8vw;

    line-height: 1.7777777778;

  }

}

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

  #content .statement__large-text {

    margin-top: 4vw;

  }

}

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

  #content .statement__large-text--margin {

    margin-top: 2.1333333333vw;

    margin-bottom: 6.4vw;

  }

}

#content .statement__image {

  padding-top: 3.3613445378%;

  width: 49.8319327731%;

}

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

  #content .statement__image {

    padding-top: 0;

    width: 100%;

  }

}



/* statement:end */

#content .cm__text-main--bottom, #content .cm__text-main, #content .cm__text--last, #content .cm__text--catch, #content .cm__text--bold, #content .cm__text {

  padding-top: 0.4em;

  padding-bottom: 0.18em;

  margin-right: -1.5em;

  display: inline-block;

  text-decoration: underline;

  text-decoration-color: #323232;

  text-decoration-thickness: max(1px, 0.1041666667vw);

  text-underline-offset: 0.55em;

}

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

  #content .cm__text-main--bottom, #content .cm__text-main, #content .cm__text--last, #content .cm__text--catch, #content .cm__text--bold, #content .cm__text {

    text-decoration-thickness: max(1px, 0.5333333333vw);

    text-underline-offset: 0.4em;

    text-align: center;

    margin-left: auto;

    margin-right: auto;

  }

}



#content .cm__text-main--bottom, #content .cm__text-main, #content .cm__text--catch, #content .cm__text--bold {

  padding-bottom: 0;

  font-weight: bold;

  letter-spacing: 0.04em;

}

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

  #content .cm__text-main--bottom, #content .cm__text-main, #content .cm__text--catch, #content .cm__text--bold {

    letter-spacing: normal;

  }

}



/* cm:start */

#content .cm {

  background-color: #FEC833;

  padding-bottom: 7.8125vw;

}

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

  #content .cm {

    padding-bottom: 18.6666666667vw;

  }

}

#content .cm__container {

  background-color: #fff;

  position: relative;

  z-index: 1;

  overflow: hidden;

  border-top-right-radius: 41.6666666667vw;

  border-bottom-right-radius: 41.6666666667vw;

}

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

  #content .cm__container {

    border-top-right-radius: 39.4666666667vw;

    border-bottom-right-radius: 39.4666666667vw;

  }

}

#content .cm__contents {

  padding-top: 7.2916666667vw;

  padding-bottom: 9.7395833333vw;

}

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

  #content .cm__contents {

    padding-top: 16vw;

    padding-bottom: 74.6666666667vw;

  }

}

#content .cm__obi {

  width: 100%;

  height: 7.8645833333vw;

  --bgObiSize: 85.3645833333vw;

  background-image: url(/special_contents/images/pc/cm_obi.png);

}

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

  #content .cm__obi {

    background-image: url(/special_contents/images/sp/cm_obi.png);

    height: 18.4vw;

    --bgObiSize: 172.8vw;

  }

}

#content .cm__movie {

  margin-top: 6.7226890756%;

  margin-left: auto;

  margin-right: auto;

  padding: 1.8487394958%;

  width: 79.8319327731%;

  background-color: #323232;

  border: max(1px, 0.15625vw) solid #000000;

}

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

  #content .cm__movie {

    margin-top: 10.4347826087%;

    padding: 6px;

    width: 100%;

    border-width: 3px;

  }

}

#content .cm__movie-link {

  display: block;

  width: 94.7368421053%;

  margin-left: auto;

  margin-right: auto;

}

#content .cm__movie-image {

  position: relative;

}

#content .cm__movie-image::before {

  content: "";

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.5);

  border: 0.5208333333vw solid #FFE696;

  position: absolute;

  top: 0;

  left: 0;

  z-index: 2;

  clip-path: circle(0 at top left);

  opacity: 0;

  transition: clip-path 0.8s ease-out, opacity 0.8s ease-out;

}

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

  #content .cm__movie-image::before {

    border-width: 10px;

    content: none;

  }

}

#content .cm__btns-area {

  width: 79.8319327731%;

}

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

  #content .cm__btns-area {

    width: 100%;

  }

}

#content .cm__btns {

  margin-left: auto;

  margin-right: auto;

  padding-top: 5.2631578947%;

  width: 37.2631578947%;

  display: flex;

  flex-direction: row;

  flex-wrap: nowrap;

  justify-content: space-between;

  align-items: stretch;

}

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

  #content .cm__btns {

    padding-top: 8vw;

    width: 100%;

  }

}

#content .cm button {

  appearance: none;

  display: block;

}

#content .cm__btn {

  width: 47.1751412429%;

  border: 1px solid #FEC833;

  background-color: #fff;

  border-radius: 2.65625vw;

  position: relative;

}

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

  #content .cm__btn {

    width: 44.5333333333vw;

    border-radius: 13.6vw;

  }

}

#content .cm__btn::after {

  content: "";

  width: 0;

  height: 0;

  border-right: 0.2604166667vw solid transparent;

  border-left: 0.2604166667vw solid transparent;

  border-bottom: 0.5208333333vw solid #FEC833;

  border-top: 0;

  opacity: 0;

  position: absolute;

  bottom: 100%;

  left: 50%;

  transform: translateX(-50%);

}

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

  #content .cm__btn::after {

    border-right-width: 1.3333333333vw;

    border-left-width: 1.3333333333vw;

    border-bottom-width: 2.6666666667vw;

  }

}

#content .cm__btn.cm__selected {

  border: 1px solid #FEC833;

  background-color: #FEC833;

}

#content .cm__btn.cm__selected::after {

  opacity: 1;

}

#content .cm__link {

  display: block;

  position: relative;

}

#content .cm__link:hover {

  transition: opacity 0.3s;

}

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

  #content .cm__link:hover .cm__movie-image::before {

    clip-path: circle(150% at top left);

    opacity: 1;

  }

}

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

  #content .cm__link:hover {

    transition: opacity 0.3s;

    opacity: 0.7;

  }

}

#content .cm__movie-btn {

  position: absolute;

  left: 50%;

  top: 50%;

  width: 8.4210526316%;

  transform: translate(-50%, -50%);

}

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

  #content .cm__movie-btn {

    width: 13.4556574924%;

  }

}

#content .cm__lead {

  margin-top: 7.1428571429%;

  padding-top: 2.1008403361%;

  width: 79.8319327731%;

  position: relative;

}

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

  #content .cm__lead {

    margin-top: 17.9710144928%;

    width: 100%;

  }

}

#content .cm__img-ureshii {

  width: 26.4210526316%;

  position: absolute;

  top: 3.8947368421%;

  right: 22.1052631579%;

}

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

  #content .cm__img-ureshii {

    width: 73.6231884058%;

    top: 35.7333333333vw;

    right: calc(50% + -37.6811594203%);

  }

}

#content .cm__img-tsurai {

  width: 26.4210526316%;

  position: absolute;

  top: 16.7708333333vw;

  left: 0px;

}

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

  #content .cm__img-tsurai {

    width: 73.6231884058%;

    top: 148vw;

    left: calc(50% + -36.231884058%);

  }

}

#content .cm__img-kanashii {

  position: absolute;

  width: 26.4210526316%;

  bottom: -1.5625vw;

  right: -0.7291666667vw;

}

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

  #content .cm__img-kanashii {

    width: 73.3333333333%;

    top: 230.6666666667vw;

    right: calc(50% + -37.6811594203%);

  }

}

#content .cm__texts {

  font-size: 2.1875vw;

  line-height: 1.5476190476;

}

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

  #content .cm__texts {

    font-size: 5.8666666667vw;

    line-height: 1.8636363636;

    text-align: center;

  }

}

#content .cm__text--catch {

  font-feature-settings: "palt";

}

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

  #content .cm__text--catch {

    margin-top: 1.8666666667vw;

    margin-left: -1.0666666667vw;

    margin-right: -1.0666666667vw;

  }

}

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

  #content .cm__text--last {

    font-feature-settings: "palt";

    margin-left: -1.0666666667vw;

    margin-right: -1.0666666667vw;

  }

}

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

  #content .cm__text-main--bottom {

    margin-bottom: 50.6666666667vw;

  }

}

#content .cm__tsume {

  letter-spacing: -0.5em;

}

#content .cm__tsume--light {

  margin-left: -0.2em;

  margin-right: -0.2em;

}

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

  #content .cm__tsume--light {

    margin-left: 0;

    margin-right: 0;

  }

}

#content .cm__tsume--last {

  letter-spacing: -0.5em;

}

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

  #content .cm__tsume--last {

    letter-spacing: normal;

  }

}

#content .cm__text-middle {

  display: block;

  padding-left: 29.8947368421%;

  margin-top: 1.2631578947%;

  margin-bottom: 0;

}

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

  #content .cm__text-middle {

    padding-left: 0;

    margin-top: -0.65em;

    margin-bottom: 50.6666666667vw;

  }

}

#content .cm__text-middle .cm__text {

  line-height: 2.2619047619;

}

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

  #content .cm__text-middle .cm__text {

    line-height: 2.0909090909;

  }

}

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

  #content .cm__txt-view-pc {

    display: block;

    opacity: 0;

    transition-duration: 500ms;

    transition-property: opacity, transform;

    transition-delay: 0ms;

    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  }

  #content .cm__txt-view-pc.jsScroll {

    transform: translate(0, 90px);

  }

  #content .cm__txt-view-pc.jsScrollIn {

    transform: translate(0, 0);

    opacity: 1;

  }

}

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

  #content .cm__txt-view-sp {

    display: block;

    opacity: 0;

    transition-duration: 500ms;

    transition-property: opacity, transform;

    transition-delay: 0ms;

    transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  }

  #content .cm__txt-view-sp.jsScroll {

    transform: translate(0, 90px);

  }

  #content .cm__txt-view-sp.jsScrollIn {

    transform: translate(0, 0);

    opacity: 1;

  }

}

@keyframes cmMoveBar {

  0% {

    clip-path: polygon(0 0, 100% 0, 100% var(--bar01), 0 var(--bar01));

  }

  100% {

    clip-path: polygon(0 0, 100% 0, 100% var(--bar02), 0 var(--bar02));

  }

}

@keyframes cmBgTriangle {

  0% {

    transform: translate(-50%, 0);

  }

  100% {

    transform: translate(-47%, 0);

  }

}

@keyframes cmObiAnim {

  from {

    background-position: 0 0;

  }

  to {

    background-position: calc(var(--bgObiSize) * -1) 0;

  }

}



/* cm:end */

/* artist:start */

#content .artist__container {

  background-color: #fff;

  background-image: url(/special_contents/images/pc/artist_bg_grid.png);

  background-size: 2.8125vw;

  overflow: hidden;

}

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

  #content .artist__container {

    background-image: url(/special_contents/images/sp/artist_bg_grid.png);

    background-size: 6.6666666667vw;

  }

}

#content .artist__obi {

  width: 100%;

  background-color: #ffffff;

  border-top: max(1px, 0.15625vw) solid #E6E6E6;

  border-bottom: max(1px, 0.15625vw) solid #E6E6E6;

  height: 5.8854166667vw;

  --bgObiSize: 123.90625vw;

  background-image: url(/special_contents/images/pc/artist_obi.png);

  animation-duration: 16s;

}

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

  #content .artist__obi {

    height: 11.2vw;

    --bgObiSize: 249.8666666667vw;

    background-image: url(/special_contents/images/sp/artist_obi.png);

    border-top-width: 1px;

    border-bottom-width: 1px;

  }

}

#content .artist__contents {

  padding-top: 2.34375vw;

  padding-bottom: 8.8541666667vw;

  position: relative;

  z-index: 1;

}

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

  #content .artist__contents {

    padding-top: 3.2vw;

    padding-bottom: 15.4666666667vw;

  }

}

#content .artist__content {

  margin-top: 5.4621848739%;

  margin-left: auto;

  margin-right: auto;

  width: 79.8319327731%;

  display: flex;

  flex-direction: column;

  align-items: center;

  position: relative;

  color: #FFFFFF;

  font-size: 1.25vw;

  line-height: 1.875;

}

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

  #content .artist__content {

    flex-direction: row;

    flex-wrap: wrap;

    margin-top: 7.2463768116%;

    margin-right: 0;

    width: 97.3913043478%;

    font-size: 4.8vw;

    line-height: 1.6666666667;

  }

}

#content .artist__content::after {

  content: "";

  display: block;

  width: 100%;

  height: 100%;

  border: max(2px, 0.15625vw) solid #323232;

  position: absolute;

  transform: translate(-1.9791666667vw, 2.7604166667vw);

  z-index: -1;

}

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

  #content .artist__content::after {

    transform: none;

    width: 88vw;

    height: 99%;

    top: 4.8vw;

    right: 5.3333333333vw;

    border-width: 3px;

  }

}

#content .artist__photo-info {

  width: 100%;

  background-color: #323232;

  position: relative;

}

#content .artist__prof {

  display: block;

  position: absolute;

  top: 4.4210526316%;

  right: 2.6315789474%;

  width: 57.7894736842%;

}

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

  #content .artist__prof {

    transform: none;

    width: 87.5%;

    top: 4vw;

    right: 5.3333333333vw;

  }

}

#content .artist__name {

  padding-top: 20.3703703704%;

  display: flex;

  flex-direction: row;

  flex-wrap: nowrap;

  justify-content: flex-start;

  align-items: flex-end;

}

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

  #content .artist__name {

    margin-left: auto;

    width: max-content;

    padding-top: 14.4vw;

    padding-right: 8.8vw;

    flex-direction: column;

    align-items: center;

  }

}

#content .artist__name-jp {

  font-size: 2.0833333333vw;

  line-height: 1;

}

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

  #content .artist__name-jp {

    display: flex;

    font-size: 8vw;

  }

}

#content .artist__name-en {

  margin-left: 4.0740740741%;

  width: 23.1481481481%;

}

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

  #content .artist__name-en {

    margin-left: 0;

    margin-top: 1.3333333333vw;

    width: 15.7333333333vw;

  }

}

#content .artist__info {

  padding-left: 2.8421052632%;

  padding-right: 2.8421052632%;

  width: 62.5263157895%;

  position: absolute;

  top: 0;

  right: 0;

}

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

  #content .artist__info {

    position: static;

    width: 100%;

    padding-left: 5.8666666667vw;

    padding-right: 3.7333333333vw;

    padding-bottom: 6.4vw;

  }

}

#content .artist__about {

  padding-top: 7.7777777778%;

}

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

  #content .artist__about {

    padding-top: 1.6vw;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-end;

  }

}

#content .artist__about-1stpara {

  width: 38.4vw;

}

#content .artist__message {

  margin-top: 3.7894736842%;

  margin-right: 8%;

  width: 91.8947368421%;

}

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

  #content .artist__message {

    margin-top: 3.2vw;

    width: 81.6vw;

  }

}

#content .artist__image {

  width: 37.4736842105%;

}

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

  #content .artist__image {

    position: absolute;

    width: 38.1333333333vw;

    top: 14.4vw;

    left: 5.8666666667vw;

  }

}

#content .artist__links {

  margin-top: 4.7058823529%;

  margin-left: 2.5210084034%;

  width: 79.8319327731%;

}

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

  #content .artist__links {

    margin-top: 13.0434782609%;

    margin-left: 0;

    width: auto;

  }

}

#content .artist__link {

  display: flex;

}

#content .artist__link-item {

  margin-right: 1.0416666667vw;

  width: 3.125vw;

}

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

  #content .artist__link-item {

    margin-right: 0;

    width: 16.8vw;

  }

  #content .artist__link-item:not(:last-child) {

    margin-right: 4.2666666667vw;

  }

}

#content .artist__link-icon {

  display: block;

}



@keyframes artistBgRotate {

  0% {

    transform: rotate(0deg);

  }

  100% {

    transform: rotate(360deg);

  }

}

/* artist:end */

/* introduce:start */

#content .introduce__container {

  background-color: #F5F5F5;

  position: relative;

  background-image: url(/special_contents/images/pc/introduce_img_bg.png);

  background-repeat: no-repeat;

  background-position: center top;

  background-size: cover;

}

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

  #content .introduce__container {

    background-image: url(/special_contents/images/sp/introduce_img_bg.png);

  }

}

#content .introduce__obi {

  width: 100%;

  background-color: #323232;

  border-top: max(1px, 0.15625vw) solid #C8C8C8;

  border-bottom: max(1px, 0.15625vw) solid #C8C8C8;

  height: 7.5vw;

  --bgObiSize: 99.375vw;

  background-image: url(/special_contents/images/pc/introduce_obi.png);

}

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

  #content .introduce__obi {

    height: 15.4666666667vw;

    --bgObiSize: 200.8vw;

    background-image: url(/special_contents/images/sp/introduce_obi.png);

    border-top-width: 1px;

    border-bottom-width: 1px;

  }

}

#content .introduce__contents {

  padding-top: 4.6875vw;

  padding-bottom: 5.7291666667vw;

}

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

  #content .introduce__contents {

    padding-top: 14.6666666667vw;

    padding-bottom: 30.6666666667vw;

  }

}

#content .introduce__lists {

  margin-top: 4.2016806723%;

  margin-right: -2.1008403361%;

  width: 81.9327731092%;

  display: flex;

  flex-wrap: wrap;

  justify-content: flex-start;

}

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

  #content .introduce__lists {

    margin-top: 10.1449275362%;

    margin-right: 0;

    width: 100%;

    flex-direction: column;

    align-items: center;

  }

}

#content .introduce__item {

  margin-top: 5.1282051282%;

  margin-right: 2.5641025641%;

  width: 30.7692307692%;

  height: 26.0416666667vw;

}

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

  #content .introduce__item {

    margin-top: 14.4927536232%;

    margin-right: 0;

    width: 81.1594202899%;

    min-height: 0;

    height: auto;

  }

  #content .introduce__item:nth-child(1) {

    height: 141.0666666667vw;

  }

  #content .introduce__item:nth-child(2) {

    height: 130.6666666667vw;

  }

  #content .introduce__item:nth-child(4) {

    height: 122.1333333333vw;

  }

  #content .introduce__item:nth-child(3) {

    height: 113.0666666667vw;

  }

  #content .introduce__item:nth-child(5) {

    height: 113.8666666667vw;

  }

}

#content .introduce__sns {

  margin-top: 5.2083333333vw;

  padding-top: 2.1875vw;

  padding-bottom: 2.1875vw;

  width: 79.8319327731%;

  display: flex;

  flex-direction: row;

  flex-wrap: nowrap;

  justify-content: center;

  align-items: center;

  background-color: #fff;

  position: relative;

  z-index: 2;

}

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

  #content .introduce__sns {

    margin-top: 8vw;

    padding-top: 8vw;

    padding-bottom: 9.0666666667vw;

    width: 100%;

  }

}

#content .introduce__sns::before {

  content: "";

  position: absolute;

  left: 0;

  bottom: 0.4201680672%;

  display: block;

  width: 100%;

  height: 0.2604166667vw;

  background-color: #C8C8C8;

  z-index: -1;

}

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

  #content .introduce__sns::before {

    bottom: -1.3333333333vw;

    height: 1.3333333333vw;

    background-color: #dedede;

  }

}

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

  #content .introduce__sns {

    flex-direction: column;

  }

}

#content .introduce__sns-txt {

  font-size: 1.5625vw;

  font-weight: bold;

}

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

  #content .introduce__sns-txt {

    font-size: 5.8666666667vw;

    line-height: 1;

  }

}

#content .introduce__sns-list {

  margin-left: 1.9791666667vw;

  display: flex;

  flex-direction: row;

  flex-wrap: nowrap;

  justify-content: space-between;

  align-items: stretch;

  width: 9.53125vw;

}

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

  #content .introduce__sns-list {

    margin-top: 6.4vw;

    margin-right: 0;

    width: 48.8vw;

  }

}

#content .introduce__sns-listitem {

  width: 4.1666666667vw;

}

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

  #content .introduce__sns-listitem {

    width: 21.3333333333vw;

  }

}

#content .introduce__sns-link {

  display: block;

}



/* introduce:end */

#content .card__front-05, #content .card__front-04, #content .card__front-03, #content .card__front-02, #content .card__front-01, #content .card__back {

  border: max(1px, 0.15625vw) solid #FFC832;

  border-radius: 1.0416666667vw;

  position: absolute;

  backface-visibility: hidden;

  width: 100%;

  height: 100%;

}

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

  #content .card__front-05, #content .card__front-04, #content .card__front-03, #content .card__front-02, #content .card__front-01, #content .card__back {

    height: auto;

    border-radius: 5.3333333333vw;

    border-width: 3px;

  }

}



#content .card__front-05, #content .card__front-04, #content .card__front-03, #content .card__front-02, #content .card__front-01 {

  transform: rotateY(180deg);

  padding-top: 17.3333333333%;

  padding-bottom: 6.6666666667%;

  padding-left: 6.6666666667%;

  padding-right: 6.6666666667%;

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

  background-repeat: no-repeat;

  background-position: center top -1px;

  background-size: cover;

}

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

  #content .card__front-05, #content .card__front-04, #content .card__front-03, #content .card__front-02, #content .card__front-01 {

    padding: 0;

    transform: rotateY(0deg);

    overflow: hidden;

  }

}



#content .card__title--2l, #content .card__title {

  width: 87.7551020408%;

  padding-bottom: 0.5em;

  font-size: 1.4583333333vw;

  line-height: 1.3571428571;

  font-weight: bold;

  position: relative;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  align-items: flex-start;

}

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

  #content .card__title--2l, #content .card__title {

    font-size: 5.8666666667vw;

  }

}

#content .card__title--2l::before, #content .card__title::before {

  content: "";

  display: block;

  width: 50px;

  height: max(1px, 0.15625vw);

  border-radius: max(1px, 0.15625vw);

  background-color: #323232;

  position: absolute;

  left: 0;

  bottom: 0;

}

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

  #content .card__title--2l::before, #content .card__title::before {

    width: 10.6666666667vw;

    height: max(2px, 0.5333333333vw);

    border-radius: max(2px, 0.5333333333vw);

  }

}



/* introduce:start */

#content .card__body {

  position: relative;

  width: 100%;

  height: 100%;

  cursor: pointer;

  transform-style: preserve-3d;

  transition: transform 1.2s;

}

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

  #content .card__body:hover .card__info {

    transition: background-color 0.3s;

    background-color: #FFEEC1;

  }

  #content .card__body:hover .card__info.pale {

    background-color: #FFF7E0;

  }

}

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

  #content .card__body {

    cursor: unset;

  }

}

#content .card__body.js-cardTurned {

  transform: rotateY(180deg);

}

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

  #content .card__body.js-cardTurned {

    transform: rotateY(0deg);

  }

}

#content .card__back {

  background-color: #FFC832;

  overflow: hidden;

}

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

  #content .card__back {

    display: none;

  }

}

#content .card__front-01 {

  background-color: #FFC832;

  background-image: url(/special_contents/images/pc/card_img_omote_base01.jpg);

}

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

  #content .card__front-01 {

    background-image: url(/special_contents/images/sp/card_img_omote_base01.jpg);

  }

}

#content .card__front-02 {

  background-color: #FFE596;

  background-image: url(/special_contents/images/pc/card_img_omote_base02.jpg);

}

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

  #content .card__front-02 {

    background-image: url(/special_contents/images/sp/card_img_omote_base02.jpg);

  }

}

#content .card__front-03 {

  background-color: #FFE596;

  background-image: url(/special_contents/images/pc/card_img_omote_base03.jpg);

}

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

  #content .card__front-03 {

    background-image: url(/special_contents/images/sp/card_img_omote_base03.jpg);

  }

}

#content .card__front-04 {

  background-color: #FFC832;

  background-image: url(/special_contents/images/pc/card_img_omote_base04.jpg);

}

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

  #content .card__front-04 {

    background-image: url(/special_contents/images/sp/card_img_omote_base04.jpg);

  }

}

#content .card__front-05 {

  background-color: #FFC832;

  background-image: url(/special_contents/images/pc/card_img_omote_base05.jpg);

  padding-top: 6.6666666667%;

}

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

  #content .card__front-05 {

    background-image: url(/special_contents/images/sp/card_img_omote_base05.png);

    padding-top: 0;

  }

}

#content .card__photo {

  border-radius: 1.0416666667vw;

  overflow: hidden;

}

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

  #content .card__photo {

    border-radius: 5.3333333333vw;

  }

}

#content .card__info {

  height: 8.6979166667vw;

  background-color: #FFC832;

  width: 100%;

  transition: background-color 0.3s;

  position: absolute;

  bottom: 0;

  display: flex;

  flex-direction: column;

  justify-content: flex-start;

  align-items: center;

}

#content .card__info.pale {

  background-color: #FFE596;

}

#content .card__info::before {

  content: "";

  display: block;

  width: 100%;

  height: 100%;

  position: absolute;

  background-image: url(/special_contents/images/pc/card_icon_open.png);

  background-repeat: no-repeat;

  background-position: right bottom;

  background-size: contain;

}

#content .card__title {

  margin-top: 8.843537415%;

}

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

  #content .card__title {

    margin-top: 6.3025210084%;

    margin-right: -1.0666666667vw;

    width: 64.5333333333vw;

  }

}

#content .card__title--2l {

  margin-top: 5.4421768707%;

}

#content .card__title-en {

  margin-top: 5.1020408163%;

  width: 87.7551020408%;

}

#content .card__title-en-front {

  margin-top: 7.0866141732%;

  width: 100%;

}

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

  #content .card__title-en-front {

    margin-top: 5.0420168067%;

  }

}

#content .card__title-txt {

  font-size: 1.0416666667vw;

  line-height: 1.9;

}

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

  #content .card__title-txt {

    margin-top: 2.1008403361%;

    font-size: 4.8vw;

    line-height: 1.7777777778;

  }

}

#content .card__link-items {

  display: block;

  margin-top: auto;

  width: 100%;

}

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

  #content .card__link-items {

    margin-top: 4vw;

  }

}

#content .card__link {

  margin-top: 0.2604166667vw;

  margin-right: 0;

  font-size: 0.8333333333vw;

  display: flex;

  justify-content: space-between;

  align-items: center;

}

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

  #content .card__link {

    justify-content: flex-end;

    font-size: 4.2666666667vw;

  }

}

#content .card__link::after {

  content: "";

  width: 3.4895833333vw;

  height: 1.6666666667vw;

  background-image: url(/special_contents/images/pc/card_icon_arrow.png);

  background-repeat: no-repeat;

  background-position: center top;

  background-size: contain;

}

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

  #content .card__link::after {

    margin-left: 2.1333333333vw;

    background-image: url(/special_contents/images/sp/card_icon_arrow.png);

    width: 9.6vw;

    height: 4.8vw;

  }

}

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

  #content .card__link:has([class=card__link-longtxt])::after {

    margin-left: 0.8vw;

  }

}

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

  #content .card__link-longtxt {

    white-space: nowrap;

    letter-spacing: -0.04em;

  }

}

#content .card__front-info {

  width: 100%;

  height: 100%;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  align-items: flex-start;

}

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

  #content .card__front-info {

    height: auto;

    margin-top: 44.8vw;

    padding-left: 4.8vw;

    padding-right: 4.8vw;

    padding-bottom: 5.8666666667vw;

    background-color: #FFC832;

  }

}

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

  #content .card__front-info.pale {

    background-color: #FFE596;

  }

}

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

  #content .card__front-01 .card__front-info {

    margin-top: 55.4666666667vw;

  }

}

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

  #content .card__front-02 .card__front-info {

    margin-top: 55.4666666667vw;

  }

}

#content .card__nowrap {

  white-space: nowrap;

}



/* introduce:end */