@charset "UTF-8";

.l-wrapper {
  font-family: TTCommons-Regular, 'Noto Sans JP', 'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
  font-size: 1.4rem;
  line-height: 1.5;
  overflow-x: hidden;
  width: 100%;
  margin: 0 auto;
  color: #000030;
}

.l-content {
  padding-top: 160px;
  background-color: #fff;
}

@media screen and (max-width: 767px) {
  .l-content {
    padding-top: 30px;
  }
}

.l-content:first-child {
  padding-top: 120px;
}

@media screen and (max-width: 767px) {
  .l-content:first-child {
    margin-top: 0;
    padding-top: 25px;
  }
}

.l-content.artist {
  padding: 100px 0 120px;
}

@media screen and (max-width: 767px) {
  .l-content.artist {
    padding-bottom: 50px;
  }
}

.l-container {
  margin-bottom: 60px;
  padding-top: 60px;
}

@media screen and (max-width: 767px) {
  .l-container {
    margin-bottom: 52px;
    padding-top: 52px;
  }
}

.l-container:last-child {
  margin-bottom: 0;
}

.l-inner,
.l-inner--narrow {
  width: 100%;
  margin: 0 auto;
}

.l-inner {
  max-width: 800px;
}

@media screen and (max-width: 767px) {
  .l-inner {
    width: min(84%, 1280px);
  }
}

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

  .alternate,
  .anchor__list {
    flex-direction: column;
  }
}

.socialMedia__item {
  display: flex;
  flex-direction: row;
}

.alternate,
.anchor__list,
.profile__list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.h1 {
  font-size: 50px;
  line-height: 1;
}

@media screen and (max-width: 767px) {
  .h1 {
    font-size: 28.3333333333px;
  }
}

.h2 {
  font-size: 40px;
  line-height: 1.5;
}

@media screen and (max-width: 767px) {
  .h2 {
    font-size: 26.6666666667px;
    line-height: 1.25;
  }
}

.h3 {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
}

@media screen and (max-width: 767px) {
  .h3 {
    font-size: 1.6rem;
  }
}

.h4 {
  font-size: 15px;
  line-height: 1.5;
}

.h5 {
  font-size: 1.6rem;
  line-height: 1.5;
}

.top__title {
  position: relative;
}

.top__title::after {
  position: absolute;
  bottom: -50px;
  left: 0;
  display: block;
  width: 100%;
  height: 1px;
  content: '';
  background-color: #000030;
}

.top__title h1 {
  margin-bottom: 40px;
  text-align: center;
  letter-spacing: .14em;
  font-size: 4.6rem;
  font-family: 'TTCommons-DemiBold';
  font-weight: 500;
}

.top__title__nav {
  display: flex;
  gap: 36px;
  justify-content: center;
  margin-bottom: 100px;
}

.top__title__nav a {
  display: flex;
  position: relative;
  font-size: 1.4rem;
  color: #000030;
}

.top__title__nav a::before {
  position: absolute;
  content: "";
  background-image: url(../img/underArrow.svg);
  background-repeat: no-repeat;
  width: 10px;
  height: 6px;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  transition: .3s;
}

.top__title__nav a:hover::before {
  bottom: -20px;
}

.top__intro {
  line-height: 2.5;
  margin-bottom: 40px;
}

@media screen and (max-width: 767px) {
  .top__title {
    margin-bottom: 32px;
  }

  .top__title::after {
    bottom: -30px;
  }

  .top__title h1 {
    font-size: 2.65rem;
    line-height: 1.4;
    margin-bottom: 34px;
    text-align: left;
    font-weight: 400;
    letter-spacing: .15em;
  }

  .top__title__nav {
    flex-direction: column;
    gap: 24px;
    margin-bottom: 64px;
  }

  .top__title__nav a::before {
    bottom: 50%;
    transform: translateY(50%);
  }

  .top__title__nav li:nth-child(1) a::before {
    left: 42%;
  }

  .top__title__nav li:nth-child(2) a::before {
    left: 50%;
  }

  .top__intro {
    line-height: 2;
  }
}

.publicOffer {
  margin-bottom: 80px;
  border-bottom: 1px solid #000030;
  padding-bottom: 80px;
}

.publicOffer .publicOffer__title {
  font-family: 'Noto Sans JP';
  margin-bottom: 32px;
  font-size: 2.4rem;
  font-weight: 600;
  text-align: center;
}

.publicOffer .publicOffer__title .u-en {
  font-family: 'TTCommons-Medium';
}

.publicOffer .publicOffer__mainImg {
  margin-bottom: 24px;
}

.publicOffer .publicOffer__subTitle {
  font-family: 'Noto Sans JP';
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: .5em;
}

.publicOffer .publicOffer__qualification {
  font-family: 'Noto Sans JP';
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: .5em;
}

.publicOffer .publicOffer__text {
  line-height: 2;
  margin-bottom: 15px;
}

.publicOffer .past_artist__text--btn {
  margin-bottom: 14px;
}

.publicOffer .past_artist__text--btn a {
  position: relative;
  border-bottom: 1px solid #000030;
  font-weight: 600;
}

.publicOffer .publicOffer__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24px;
  counter-reset: number 0;
  margin-bottom: 84px;
}

.publicOffer .publicOffer__list .publicOffer__list__item {
  max-width: 250px;
}

.publicOffer .publicOffer__list .publicOffer__list__item figure {
  margin-bottom: 50px;
}

.publicOffer .publicOffer__list .publicOffer__list__item h3 {
  position: relative;
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 46px;
  text-align: center;
}

.publicOffer .publicOffer__list .publicOffer__list__item:last-child h3 {
  margin-bottom: 24px;
}

.publicOffer .publicOffer__list .publicOffer__list__item h3::after {
  position: absolute;
  counter-increment: number 1;
  content: counter(number) " ";
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  color: #000030;
  font-size: 1.8rem;
  font-weight: 700;
}

.publicOffer .publicOffer__btn {
  display: flex;
  justify-content: center;
  gap: 40px;
}

.publicOffer .publicOffer__btn p {
  max-width: 350px;
  width: 100%;
}

.publicOffer .publicOffer__btn p a {
  display: block;
  color: #fff;
  background-color: #000030;
  padding: 10px 0;
  text-align: center;
  transition: .3s;
}

.publicOffer .publicOffer__btn p a:hover {
  opacity: .8;
}

@media screen and (max-width: 767px) {
  .publicOffer {
    margin-bottom: 60px;
    padding-bottom: 60px;
  }

  .publicOffer .publicOffer__title {
    margin-bottom: 25px;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: .1em;
    text-align: left;
  }

  .publicOffer .publicOffer__list {
    gap: 32px;
    margin-bottom: 40px;
  }

  .publicOffer .publicOffer__list .publicOffer__list__item {
    max-width: 100%;
  }

  .publicOffer .publicOffer__list .publicOffer__list__item figure {
    margin-bottom: 50px;
  }

  .publicOffer .publicOffer__list .publicOffer__list__item h3 {
    margin-bottom: 25px;
    line-height: 1.7em;
  }

  .publicOffer .publicOffer__btn {
    flex-wrap: wrap;
    gap: 20px;
  }

  .publicOffer .publicOffer__btn p {
    width: 87%;
  }

  .publicOffer .publicOffer__btn p a {
    width: 100%;
    padding: 10px 0;
    text-align: center;
    font-size: 1.4rem;
  }
}

.past_artist__title {
  font-family: 'Noto Sans JP';
  margin-bottom: 32px;
  font-size: 2.8rem;
  font-weight: 600;
}

.past_artist__text {
  margin-bottom: 40px;
  line-height: 2;
}

.menu__title {
  margin-bottom: 8px;
}

.anchor__list {
  max-width: 730px;
  margin: 0 auto;
}

@media screen and (max-width: 767px) {
  .menu__anchor {
    width: 82%;
    margin: 0 auto;
  }

  .past_artist__title {
    font-weight: 600;
    margin-bottom: 12px;
    font-size: 1.8rem;
  }
}

.anchor__item {
  width: 100%;
  margin-top: 24px;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .anchor__item {
    width: calc((100% - 48px) / 3);
    margin-left: 15px;
  }
}

.anchor__link {
  display: inline-block;
  width: 100%;
}

.anchor__text {
  font-size: 11.6666666667px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

a:hover {
  color: initial;
}

a.anchor__button--navy {
  position: relative;
  color: #000030;
}

a.anchor__button--navy::after {
  position: absolute;
  right: 16px;
  bottom: 50%;
  width: 10px;
  height: 10px;
  content: '';
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  border-top: 2px solid #000030;
  border-right: 2px solid #000030;
}

a.anchor__button--navy:hover {
  opacity: .8;
  color: #000030;
}

a.anchor__button--white {
  position: relative;
  color: #fff;
}

a.anchor__button--white::after {
  position: absolute;
  right: 16px;
  bottom: 50%;
  width: 10px;
  height: 10px;
  content: '';
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}

a.anchor__button--white:hover {
  opacity: .8;
  color: #fff;
}

.artist__title {
  font-family: 'TTCommons-DemiBold', sans-serif;
  position: relative;
  margin-bottom: 56px;
  padding-bottom: 10px;
  font-size: 2.4rem;
}

@media screen and (max-width: 767px) {
  .artist__title {
    margin-bottom: 8px;
    padding-bottom: 0;
    font-size: 1.8rem;
  }
}

@media screen and (min-width: 768px) {
  .artist__title::after {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 1px;
    content: '';
    background-color: #000030;
  }
}

.artist__vol {
  font-size: 18px;
}

@media screen and (max-width: 767px) {
  .artist__vol {
    font-size: 16px;
  }
}

.artist__num {
  font-size: 20px;
  margin-right: 30px;
}

@media screen and (max-width: 767px) {
  .artist__num {
    font-size: 16px;
    margin-right: 0;
  }
}

@media screen and (min-width: 768px) {
  .alternate {
    margin-left: -56px;
  }
}

@media screen and (min-width: 768px) {
  .alternate:nth-of-type(2n) {
    flex-direction: row-reverse;
  }
}

@media screen and (min-width: 768px) {
  .alternate:not(:first-of-type) {
    margin-top: 56px;
  }
}

@media screen and (max-width: 767px) {
  .alternate:not(:first-of-type) {
    margin-top: 72px;
  }
}

@media screen and (min-width: 768px) {
  .alternate__item {
    width: calc((100% - 112px) / 2);
    margin-left: 56px;
  }
}

@media screen and (max-width: 767px) {
  .alternate__body {
    order: 2;
  }
}

.alternate__title {
  margin-bottom: 32px;
}

@media screen and (max-width: 767px) {
  .alternate__title {
    margin-bottom: 16px;
  }
}

.alternate__text {
  line-height: 2;
  padding-left: 48px;
}

@media screen and (max-width: 767px) {
  .alternate__text {
    padding-left: 40px;
  }
}

.alternate__img {
  width: 100%;
  height: auto;
}

.alternate__bodyThumb {
  margin-top: 50px;
}

@media screen and (max-width: 767px) {
  .alternate__bodyThumb {
    margin-top: 0;
  }
}

@media screen and (max-width: 767px) {
  .alternate__thumb {
    margin-right: calc(50% - 50vw);
    margin-bottom: 32px;
    margin-left: calc(50% - 50vw);
    order: 1;
  }
}

.movieContainer {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: -webkit-max-content;
  grid-template-rows: max-content;
  -webkit-column-gap: 56px;
  -moz-column-gap: 56px;
  column-gap: 56px;
  grid-template-areas:
    'body movie'
    'thumb movie';
}

@media screen and (max-width: 767px) {
  .movieContainer {
    grid-template-areas:
      'thumb'
      'body'
      'movie';
    grid-template-columns: 100%;
    grid-template-rows: auto;
    row-gap: 32px;
  }
}

.movieContainer__thumb {
  grid-area: thumb;
}

@media screen and (max-width: 767px) {
  .movieContainer__thumb {
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    order: 1;
  }
}

.movieContainer__body {
  grid-area: body;
}

.movieContainer__youtube {
  position: relative;
  width: 100%;
  grid-area: movie;
}

.movieContainer__youtube::before {
  display: block;
  padding-top: 177.75%;
  content: '';
}

@media screen and (max-width: 767px) {
  .movieContainer .alternate__text {
    margin-bottom: 0;
  }
}

.youtube {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.youtube__thumb {
  cursor: pointer;
}

.hidden {
  display: none !important;
}

.gallery {
  margin-top: 120px;
}

@media screen and (max-width: 767px) {
  .gallery {
    margin-top: 80px;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
  }
}

.artist .gallery+section {
  margin-top: 120px;
}

@media screen and (max-width: 767px) {
  .artist .gallery+section {
    margin-top: 80px;
  }
}

.galleryList {
  display: flex;
  margin-left: -30px;
}

@media screen and (max-width: 767px) {
  .galleryList {
    margin-top: -20px;
    margin-left: -20px;
    flex-wrap: wrap;
  }
}

.galleryList__item {
  width: calc((100% - 90px) / 4);
  margin-left: 30px;
}

@media screen and (max-width: 767px) {
  .galleryList__item {
    width: calc((100% - 40px) / 2);
    margin-top: 20px;
    margin-left: 20px;
  }
}

.galleryList__img {
  width: 100%;
  height: auto;
}

.cont03 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: minmax(66px, -webkit-max-content) -webkit-max-content;
  grid-template-rows: minmax(66px, max-content) max-content;
  -webkit-column-gap: 56px;
  -moz-column-gap: 56px;
  column-gap: 56px;
  row-gap: 0;
  grid-template-areas:
    'heading thumb'
    'body thumb';
}

@media screen and (max-width: 767px) {
  .cont03 {
    grid-template-areas:
      'heading'
      'thumb'
      'body';
    grid-template-columns: 100%;
    grid-template-rows: minmax(54px, -webkit-max-content) -webkit-max-content;
    grid-template-rows: minmax(54px, max-content) max-content;
  }
}

.cont03__heading {
  grid-area: heading;
}

.cont03__thumb {
  grid-area: thumb;
}

@media screen and (max-width: 767px) {
  .cont03__thumb {
    margin-top: 24px;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
  }
}

.cont03__img {
  width: 100%;
  height: auto;
}

.cont03__body {
  margin-top: 32px;
  grid-area: body;
}

.cont03__text {
  line-height: 2;
  padding-left: 48px;
}

@media screen and (max-width: 767px) {
  .cont03__text {
    padding-left: 40px;
  }
}

@media screen and (min-width: 768px) {
  .profile {
    display: flex;
    justify-content: flex-end;
    margin-top: 50px;
  }
}

@media screen and (max-width: 767px) {
  .profile {
    margin-top: 72px;
  }
}

.profile--large {
  margin-top: 80px;
}

@media screen and (min-width: 768px) {
  .profile__container {
    width: 100%;
    max-width: 472px;
  }
}

@media screen and (min-width: 768px) {
  .profile__container--large {
    max-width: 526px;
  }
}

.profile__name {
  line-height: 1.5;
  position: relative;
  width: calc(52% - (50% - 50vw) - 16px);
  padding-bottom: 8px;
}

@media screen and (max-width: 767px) {
  .profile__name {
    margin-bottom: 8px;
  }
}

@media screen and (min-width: 768px) {
  .profile__name {
    width: calc(100% - 24px - 180px);
  }
}

.profile__name::after {
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 1px;
  content: '';
  background-color: #000030;
}

@media screen and (min-width: 768px) {
  .profile__name--large {
    width: calc(100% - 24px - 232px);
  }
}

.profile__name--ja {
  font-size: 1.6rem;
  margin-right: 8px;
}

.profile__name--en {
  font-size: 13.3333333333px;
}

.profile__list {
  margin-bottom: 16px;
  margin-left: -16px;
}

@media screen and (min-width: 768px) {
  .profile__list {
    margin-left: -24px;
  }
}

.profile__item {
  margin-left: 16px;
}

@media screen and (max-width: 767px) {
  .profile__item {
    font-size: 1.2rem;
  }
}

@media screen and (min-width: 768px) {
  .profile__item {
    margin-left: 24px;
  }
}

.profile__body {
  width: calc(52% - (50% - 50vw) - 16px);
}

@media screen and (min-width: 768px) {
  .profile__body {
    width: calc(100% - 48px - 180px);
  }
}

@media screen and (min-width: 768px) {
  .profile__body--large {
    width: calc(100% - 48px - 232px);
  }
}

.profile__thumb {
  width: calc(48% - 16px);
  margin-right: calc(50% - 50vw);
}

@media screen and (min-width: 768px) {
  .profile__thumb {
    width: 180px;
    margin-right: 0;
  }
}

@media screen and (min-width: 768px) {
  .profile__thumb--large {
    width: 232px;
    margin-top: -32px;
    margin-right: 0;
  }
}

.profile__text {
  line-height: 1.75;
  margin-top: 24px;
}

@media screen and (max-width: 767px) {
  .profile__text {
    line-height: 1.5;
    margin-top: 16px;
  }
}

.socialMedia__item {
  font-size: 11.6666666667px;
  margin-left: -8px;
}

.socialMedia__title {
  width: calc(28% - 8px);
  margin-left: 8px;
}

@media screen and (max-width: 320px) {
  .socialMedia__title {
    width: calc(32% - 8px);
  }
}

@media screen and (min-width: 768px) {
  .socialMedia__title {
    width: calc(22% - 8px);
  }
}

.socialMedia__link {
  width: calc(72% - 8px);
  margin-left: 8px;
}

@media screen and (max-width: 320px) {
  .socialMedia__link {
    width: calc(68% - 8px);
  }
}

@media screen and (min-width: 768px) {
  .socialMedia__link {
    width: calc(78% - 8px);
  }
}

.artist .fd-row {
  flex-direction: row;
}

.artist .fd-reverse {
  flex-direction: row-reverse;
}

.artist .jc-start {
  justify-content: flex-start;
}

.swiper {
  width: 100%;
  height: auto;
}

@media screen and (min-width: 768px) {
  .swiper-wrapper {
    display: flex;
    flex-direction: column;
  }

  .swiper-a:not(.swiper-initialized) {
    padding: 0;
  }

  .swiper-button-next,
  .swiper-button-prev {
    display: none;
  }

  .swiper-pagination {
    display: none;
  }
}

.swiper-pagination-bullet-active {
  background-color: #000030;
}

.u-en {
  font-size: 120%;
}

.u-ta--center {
  text-align: center;
}

.u-ta--left {
  text-align: left;
}

.u-ta--right {
  text-align: right;
}

.u-fw--lighter {
  font-weight: lighter;
}

.u-fw--normal {
  font-weight: 400;
}

.u-fw--bold {
  font-weight: 700;
}

.u-fw--bolder {
  font-weight: bolder;
}

.u-lh--normal {
  line-height: 1.5;
}

.u-lh--wide {
  line-height: 2;
}

.u-tt--demibold {
  font-family: TTCommons-DemiBold, sans-serif;
}

.u-tt--bold {
  font-family: TTCommons-Bold, sans-serif;
}

.u-tt--medium {
  font-family: TTCommons-Medium, sans-serif;
}

.u-tt--light {
  font-family: TTCommons-Light, sans-serif;
}

.u-arrow__down {
  position: relative;
  padding-right: 1.5rem;
}

.u-arrow__down::after {
  position: absolute;
  right: 0;
  bottom: 50%;
  width: 10px;
  height: 10px;
  margin: auto;
  padding-bottom: .8rem;
  content: '';
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  border-top: 1px solid #000030;
  border-right: 1px solid #000030;
}

.u-arrow__down--navy {
  border-top: 1px solid #000030;
  border-right: 1px solid #000030;
}

.u-arrow__down--white {
  border-top: 1px solid #000;
  border-right: 1px solid #000;
}

.c-note {
  font-size: 1.2rem;
  line-height: 1.2rem;
}