/*
1-About #00bc55
2-Cast #ff2261
3-Ticket #ffbc00
4-Attention #3051f2
5-Contact #df00ff
6-Fan club #0090e0
*/

:root {
  --color-0: #ffffff;
  --color-1: #00bc55;
  --color-2: #ff2261;
  --color-3: #ffbc00;
  --color-4: #3051f2;
  --color-5: #df00ff;
  --color-6: #0090e0;
  --color-main: #ff4893;

  --color-about: var(--color-1);
  --color-cast: var(--color-2);
  --color-ticket: var(--color-3);
  --color-attention: var(--color-4);
  --color-contact: var(--color-5);
  --color-fanclub: var(--color-6);
}

/* 文字色 */

.c-0 {
  color: var(--color-0);
}

.c-1 {
  color: var(--color-1);
}

.c-2 {
  color: var(--color-2);
}

.c-3 {
  color: var(--color-3);
}

.c-4 {
  color: var(--color-4);
}

.c-5 {
  color: var(--color-5);
}

.c-6 {
  color: var(--color-6);
}

/* 線色 */

.b-1 {
  border: var(--color-1) solid 0.1em;
}

.b-2 {
  border: var(--color-2) solid 0.1em;
}

.b-3 {
  border: var(--color-3) solid 0.1em;
}

.b-4 {
  border: var(--color-4) solid 0.1em;
}

.b-5 {
  border: var(--color-5) solid 0.1em;
}

.b-6 {
  border: var(--color-6) solid 0.1em;
}

/* 背景色 */

.bg-1 {
  background-color: var(--color-1);
}

.bg-2 {
  background-color: var(--color-2);
}

.bg-3 {
  background-color: var(--color-3);
}

.bg-4 {
  background-color: var(--color-4);
}

.bg-5 {
  background-color: var(--color-5);
}

.bg-6 {
  background-color: var(--color-6);
}

/* 見出し1文字目の文字色 */

.fl-1::first-letter {
  color: var(--color-1);
}

.fl-2::first-letter {
  color: var(--color-2);
}

.fl-3::first-letter {
  color: var(--color-3);
}

.fl-4::first-letter {
  color: var(--color-4);
}

.fl-5::first-letter {
  color: var(--color-5);
}

.fl-6::first-letter {
  color: var(--color-6);
}

/* 見出し吹き出し */

.heading::after {
  content: "";
  position: absolute;
  top: -1rem;
  right: -1.5%;
  width: 8.5%;
  aspect-ratio: 150 / 104;
  background-color: var(--heading-bubble-color, var(--color-0));
  -webkit-mask: url(../img/common/h.svg) center / contain no-repeat;
  mask: url(../img/common/h.svg) center / contain no-repeat;
  pointer-events: none;
}

.h-1 {
  --heading-bubble-color: var(--color-1);
}

.h-2 {
  --heading-bubble-color: var(--color-2);
}

.h-3 {
  --heading-bubble-color: var(--color-3);
}

.h-4 {
  --heading-bubble-color: var(--color-4);
}

.h-5 {
  --heading-bubble-color: var(--color-5);
}

.h-6 {
  --heading-bubble-color: var(--color-6);
}


/* 見出し左線 */

.bl-1 {
  border-left: var(--color-1) solid 0.3em;
}

.bl-2 {
  border-left: var(--color-2) solid 0.3em;
}

.bl-3 {
  border-left: var(--color-3) solid 0.3em;
}

.bl-4 {
  border-left: var(--color-4) solid 0.3em;
}

.bl-5 {
  border-left: var(--color-5) solid 0.3em;
}

.bl-6 {
  border-left: var(--color-6) solid 0.3em;
}

/* フレームの下線 */

.bb-1 {
  border-bottom: var(--color-1) solid 0.8rem;
}

.bb-2 {
  border-bottom: var(--color-2) solid 0.8rem;
}

.bb-3 {
  border-bottom: var(--color-3) solid 0.8rem;
}

.bb-4 {
  border-bottom: var(--color-4) solid 0.8rem;
}

.bb-5 {
  border-bottom: var(--color-5) solid 0.8rem;
}

.bb-6 {
  border-bottom: var(--color-6) solid 0.8rem;
}

/* フレームの線色と影色 */

.f-1 {
  border: var(--color-1) solid 2px;
  box-shadow: 4px 4px 0 var(--color-1);
}

.f-2 {
  border: var(--color-2) solid 2px;
  box-shadow: 4px 4px 0 var(--color-2);
}

.f-3 {
  border: var(--color-3) solid 2px;
  box-shadow: 4px 4px 0 var(--color-3);
}

.f-4 {
  border: var(--color-4) solid 2px;
  box-shadow: 4px 4px 0 var(--color-4);
}

.f-5 {
  border: var(--color-5) solid 2px;
  box-shadow: 4px 4px 0 var(--color-5);
}

.f-6 {
  border: var(--color-6) solid 2px;
  box-shadow: 4px 4px 0 var(--color-6);
}

.movie .plyr {
  --plyr-color-main: var(--color-main);
}

.movie .plyr__control--overlaid,
.movie .plyr__control--overlaid:hover,
.movie .plyr__control--overlaid:focus,
.movie .plyr--video .plyr__control:hover,
.movie .plyr--video .plyr__control:focus,
.movie .plyr--video .plyr__control[aria-expanded="true"] {
  background: var(--color-main);
}

.movie .plyr__progress input[type="range"],
.movie .plyr__volume input[type="range"] {
  color: var(--color-main);
}

/* メニューアイコン */

.menu-icon {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  background-color: var(--color-main);
}

.menu-icon-open {
  -webkit-mask: url(../img/common/open.svg) center / contain no-repeat;
  mask: url(../img/common/open.svg) center / contain no-repeat;
}

.menu-icon-close {
  -webkit-mask: url(../img/common/close.svg) center / contain no-repeat;
  mask: url(../img/common/close.svg) center / contain no-repeat;
}

/* ボタンの吹き出しと矢印 */

.button a[class^="bt-"] {
  background-image: none;
}

.button a {
  position: relative;
  min-height: 62px;
}

.button a::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 8px;
  display: block;
  width: 11px;
  aspect-ratio: 10.66 / 19.9;
  padding-top: 0 !important;
  background-color: var(--button-bubble-color, var(--color-0));
  -webkit-mask: url(../img/common/a.svg) center / contain no-repeat;
  mask: url(../img/common/a.svg) center / contain no-repeat;
  transform: translateY(-50%);
  pointer-events: none;
}

.button a::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 8px;
  width: 30px;
  aspect-ratio: 150 / 104;
  background-color: var(--button-bubble-color, var(--color-0));
  -webkit-mask: url(../img/common/b.svg) center / contain no-repeat;
  mask: url(../img/common/b.svg) center / contain no-repeat;
  transform: translateY(-50%);
  pointer-events: none;
}

.button a.bt-1 {
  --button-bubble-color: var(--color-1);
}

.button a.bt-2 {
  --button-bubble-color: var(--color-2);
}

.button a.bt-3 {
  --button-bubble-color: var(--color-3);
}

.button a.bt-4 {
  --button-bubble-color: var(--color-4);
}

.button a.bt-5 {
  --button-bubble-color: var(--color-5);
}

.button a.bt-6 {
  --button-bubble-color: var(--color-6);
}


@media screen and (min-width: 1px) and (max-width: 743px) {
  .heading::after {
    top: -0.3rem;
    right: -3%;
    width: 15%;
  }
}

/* ナビゲーション文字色 */
.pc-navi .nav-link,
.gnav .tn_link p {
  color: var(--color-0);
}

.pc-navi .nav-link.c-0::first-letter,
.gnav .tn_link.c-0 p::first-letter {
  color: var(--color-main);
}

.pc-navi .nav-link.c-1::first-letter,
.gnav .tn_link.c-1 p::first-letter {
  color: var(--color-1);
}

.pc-navi .nav-link.c-2::first-letter,
.gnav .tn_link.c-2 p::first-letter {
  color: var(--color-2);
}

.pc-navi .nav-link.c-3::first-letter,
.gnav .tn_link.c-3 p::first-letter {
  color: var(--color-3);
}

.pc-navi .nav-link.c-4::first-letter,
.gnav .tn_link.c-4 p::first-letter {
  color: var(--color-4);
}

.pc-navi .nav-link.c-5::first-letter,
.gnav .tn_link.c-5 p::first-letter {
  color: var(--color-5);
}

.pc-navi .nav-link.c-6::first-letter,
.gnav .tn_link.c-6 p::first-letter {
  color: var(--color-6);
}