:root {
  --animationScaleMinus: 0.9;
  --animationScale: 1.1;
}
@media (min-width: 835px) {
  :root {
    --animationScale: 1;
    --animationScaleMinus: 1;
  }
}

.top__head {
  border-bottom: 1px solid;
  border-top: 1px solid;
  color: #52792a;
  display: flex;
  letter-spacing: 0.05em;
  line-height: 1;
  overflow: hidden;
  position: relative;
}
@media (max-width: 834px) {
  .top__head {
    font-size: 18.25vw;
    height: 13.75vw;
    padding: 0 min(10px, 2.5vw);
  }
}
@media (min-width: 835px) {
  .top__head {
    font-size: 10.8125rem;
    height: 8.125rem;
    padding: 0 2.5rem;
  }
}
.top__head[data-dir=r] {
  align-items: flex-start;
  justify-content: flex-end;
}
.top__head .txt {
  display: flex;
  height: 100%;
  translate: 0 -18%;
}
.top__head span {
  display: block;
}

.l-loader {
  position: fixed;
  top: 0;
  left: 0;
  background: black;
  height: 100%;
  width: 100%;
  z-index: 9999;
}
[data-ready="1"] .l-loader {
  opacity: 0;
  transition: all 1s 2s ease;
  visibility: hidden;
}

@-webkit-keyframes ltInOut {
  0% {
    translate: 0 100%;
  }
  20% {
    translate: 0 0;
  }
  70% {
    translate: 0 0;
  }
  100% {
    translate: 0 -100%;
  }
}

@keyframes ltInOut {
  0% {
    translate: 0 100%;
  }
  20% {
    translate: 0 0;
  }
  70% {
    translate: 0 0;
  }
  100% {
    translate: 0 -100%;
  }
}
.l-loader__txt {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #9b9b9b;
  font-size: 1.0625rem;
  font-variation-settings: "wght" 600;
  translate: -50% -50%;
}
@media (max-width: 834px) {
  .l-loader__txt {
    font-size: min(13px, 3.25vw);
  }
}
.l-loader__txt .outer {
  display: block;
  overflow: hidden;
}
.l-loader__txt .txt {
  display: inline-block;
  translate: 0 100%;
}
[data-ready="1"] .l-loader__txt .txt {
  -webkit-animation: ltInOut 2s 0.1s ease forwards;
          animation: ltInOut 2s 0.1s ease forwards;
}
[data-ready="1"] .l-loader__txt .txt[data-index="2"] {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}

.character__cont {
  align-items: center;
  background: #000;
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
@media (max-width: 834px) {
  .character__cont {
    padding: 6.25vw 0;
  }
}
@media (min-width: 835px) {
  .character__cont {
    height: 87.5rem;
  }
}

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

.character__suit__item {
  aspect-ratio: 450/700;
}
@media (max-width: 834px) {
  .character__suit__item {
    opacity: 0.8;
    width: 33.3333333333%;
  }
}
@media (min-width: 835px) {
  .character__suit__item {
    width: 28.125rem;
  }
}
.character__suit__item[data-id=hq] {
  position: absolute;
  top: 0;
  left: 0;
  background: url("/wp/wp-content/themes/brotherash_official//assets/img/top/character/suit/ph_hq.webp") no-repeat 0 0/100%;
}
.character__suit__item[data-id=sk] {
  position: absolute;
  top: 0;
  right: 0;
  background: url("/wp/wp-content/themes/brotherash_official//assets/img/top/character/suit/ph_sk.webp") no-repeat 0 0/100%;
}
.character__suit__item[data-id=dj] {
  position: absolute;
  left: 0;
  bottom: 0;
  background: url("/wp/wp-content/themes/brotherash_official//assets/img/top/character/suit/ph_dj.webp") no-repeat 0 0/100%;
}
.character__suit__item[data-id=cj] {
  position: absolute;
  bottom: 0;
  right: 0;
  background: url("/wp/wp-content/themes/brotherash_official//assets/img/top/character/suit/ph_cj.webp") no-repeat 0 0/100%;
}

@-webkit-keyframes characterBgIn {
  0% {
    rotate: -45deg;
    scale: 2;
  }
  100% {
    rotate: 45deg;
    scale: 1;
  }
}

@keyframes characterBgIn {
  0% {
    rotate: -45deg;
    scale: 2;
  }
  100% {
    rotate: 45deg;
    scale: 1;
  }
}
.character__bg {
  position: absolute;
  top: 50%;
  left: 50%;
  aspect-ratio: 1;
  background: #06110d;
  rotate: 45deg;
  scale: 2;
  translate: -50% -50%;
}
[data-reveal="1"] .character__bg {
  -webkit-animation: characterBgIn 1s 0s cubic-bezier(0.85, 0, 0.15, 1) forwards;
          animation: characterBgIn 1s 0s cubic-bezier(0.85, 0, 0.15, 1) forwards;
}
@media (max-width: 834px) {
  .character__bg {
    width: calc(sin(45deg) * 137.5%);
  }
}
@media (min-width: 835px) {
  .character__bg {
    width: max(sin(45deg) * 100%, sin(45deg) * 120rem);
  }
}

@-webkit-keyframes characterCurtainOut {
  0% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
  100% {
    -webkit-clip-path: inset(0 0 100% 0);
            clip-path: inset(0 0 100% 0);
  }
}

@keyframes characterCurtainOut {
  0% {
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
  100% {
    -webkit-clip-path: inset(0 0 100% 0);
            clip-path: inset(0 0 100% 0);
  }
}
@-webkit-keyframes characterCurtainOutC2 {
  0% {
    background: #000;
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
  100% {
    background: #52792a;
    -webkit-clip-path: inset(0 0 100% 0);
            clip-path: inset(0 0 100% 0);
  }
}
@keyframes characterCurtainOutC2 {
  0% {
    background: #000;
    -webkit-clip-path: inset(0 0 0 0);
            clip-path: inset(0 0 0 0);
  }
  100% {
    background: #52792a;
    -webkit-clip-path: inset(0 0 100% 0);
            clip-path: inset(0 0 100% 0);
  }
}
@-webkit-keyframes characterIn {
  0% {
    translate: 0 20%;
  }
  100% {
    translate: 0 0;
  }
}
@keyframes characterIn {
  0% {
    translate: 0 20%;
  }
  100% {
    translate: 0 0;
  }
}
.character_curtain:before {
  background: black;
  content: "";
  height: calc(100% + 2px);
  width: calc(100% + 2px);
  position: absolute;
  top: -1px;
  left: -1px;
}
[data-reveal="1"] .character_curtain:before {
  -webkit-animation: characterCurtainOut 1s 0s cubic-bezier(0.85, 0, 0.15, 1) forwards;
          animation: characterCurtainOut 1s 0s cubic-bezier(0.85, 0, 0.15, 1) forwards;
}
[data-reveal="1"] .character_curtain[data-delay="1"]:before {
  -webkit-animation: characterCurtainOutC2 0.8s 0.4s cubic-bezier(0.85, 0, 0.15, 1) forwards;
          animation: characterCurtainOutC2 0.8s 0.4s cubic-bezier(0.85, 0, 0.15, 1) forwards;
}

@-webkit-keyframes relIn {
  0% {
    opacity: 0;
    scale: 0.98;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}

@keyframes relIn {
  0% {
    opacity: 0;
    scale: 0.98;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}
.character_rel {
  aspect-ratio: 1;
  margin: 0 auto;
  position: relative;
}
@media (max-width: 834px) {
  .character_rel {
    aspect-ratio: 720/900;
    width: 100%;
  }
}
@media (min-width: 835px) {
  .character_rel {
    width: 67.5rem;
  }
}
@media (min-width: 835px) {
  .character_rel:before {
    background: url("/wp/wp-content/themes/brotherash_official//assets/img/top/character/txt_rel.webp") no-repeat 0 0/100%;
    content: "";
    height: 100%;
    opacity: 0;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
}
[data-reveal="1"] .character_rel:before {
  -webkit-animation: relIn 1.5s 0.5s cubic-bezier(0.85, 0, 0.15, 1) forwards;
          animation: relIn 1.5s 0.5s cubic-bezier(0.85, 0, 0.15, 1) forwards;
}

.character_rel__item {
  display: block;
  position: relative;
  z-index: 0;
}
@media (max-width: 834px) {
  .character_rel__item {
    aspect-ratio: 240/300;
    width: 33.3333333333%;
  }
}
@media (min-width: 835px) {
  .character_rel__item {
    aspect-ratio: 240/280;
    font-size: 15rem;
    width: 23.0769230769%;
  }
}
[data-reveal="1"] .character_rel__item:before {
  -webkit-animation: characterIn 1s 0s cubic-bezier(0.85, 0, 0.15, 1) forwards;
          animation: characterIn 1s 0s cubic-bezier(0.85, 0, 0.15, 1) forwards;
}
.character_rel__item[data-id=hijiri] {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
}
.character_rel__item[data-id=tsurugi] {
  position: absolute;
  left: 50%;
  bottom: 0;
  translate: -50% 0;
}
.character_rel__item[data-id=daiya] {
  position: absolute;
  top: 50%;
  right: 0;
  translate: 0 -50%;
}
@media (max-width: 834px) {
  .character_rel__item[data-id=daiya]:after {
    translate: -15% 0;
  }
}
.character_rel__item[data-id=mitsuba] {
  position: absolute;
  top: 50%;
  left: 0;
  translate: 0 -50%;
}
.character_rel__item:after {
  aspect-ratio: 1;
  background: url("/wp/wp-content/themes/brotherash_official//assets/img/top/character/ico_plus.svg") no-repeat 0 0/100%;
  content: "";
}
@media (max-width: 834px) {
  .character_rel__item:after {
    position: absolute;
    top: 2.5vw;
    right: 0;
    translate: 50% 0;
    width: 5.25vw;
  }
}
@media (min-width: 835px) {
  .character_rel__item:after {
    transition: rotate 0.3s 0s cubic-bezier(0, 0.55, 0.45, 1);
    translate: 50% -50%;
    width: 2.5rem;
    position: absolute;
    top: 0;
    right: 0;
  }
}
@media (min-width: 835px) {
  .character_rel__item:hover .obj {
    scale: 1.05;
  }
}
@media (min-width: 835px) {
  .character_rel__item:hover:after {
    rotate: 90deg;
  }
}

.character__item__ph {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  overflow: hidden;
  width: 100%;
  z-index: -1;
}
.character__item__ph .obj {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
@media (min-width: 835px) {
  .character__item__ph .obj {
    transition: scale 0.3s 0s cubic-bezier(0, 0.55, 0.45, 1);
  }
}
[data-reveal="1"] .character__item__ph .obj {
  -webkit-animation: characterIn 1s 0.2s cubic-bezier(0.85, 0, 0.15, 1) forwards;
          animation: characterIn 1s 0.2s cubic-bezier(0.85, 0, 0.15, 1) forwards;
}
[data-id=hijiri] .character__item__ph .obj {
  background: url("/wp/wp-content/themes/brotherash_official//assets/img/top/character/thumb/ph_hijiri.webp") no-repeat 0 0/100%, black;
}
[data-id=tsurugi] .character__item__ph .obj {
  background: url("/wp/wp-content/themes/brotherash_official//assets/img/top/character/thumb/ph_tsurugi.webp") no-repeat 0 0/100%, black;
}
[data-id=daiya] .character__item__ph .obj {
  background: url("/wp/wp-content/themes/brotherash_official//assets/img/top/character/thumb/ph_daiya.webp") no-repeat 0 0/100%, black;
}
[data-id=mitsuba] .character__item__ph .obj {
  background: url("/wp/wp-content/themes/brotherash_official//assets/img/top/character/thumb/ph_mitsuba.webp") no-repeat 0 0/100%, black;
}

.character_rel__name_en {
  font-size: 0.1083333333em;
  letter-spacing: 0.05em;
  line-height: 1;
  rotate: 90deg;
  transform-origin: 0 0;
  translate: 0.9em 0;
  position: absolute;
  top: 0;
  left: 0;
}
@media (max-width: 834px) {
  .character_rel__name_en {
    font-size: min(15px, 3.75vw);
  }
}

.character_rel__name_jp {
  font-size: 0;
  height: auto;
  translate: 50% 0;
}
@media (max-width: 834px) {
  .character_rel__name_jp {
    position: absolute;
    top: 9.25vw;
    right: 0;
  }
}
@media (min-width: 835px) {
  .character_rel__name_jp {
    position: absolute;
    top: 11.4285714286%;
    right: 0;
  }
}
@media (max-width: 834px) {
  [data-id=hijiri] .character_rel__name_jp {
    width: 16.3225729167%;
  }
}
@media (min-width: 835px) {
  [data-id=hijiri] .character_rel__name_jp {
    width: 14.1935416667%;
  }
}
@media (max-width: 834px) {
  [data-id=tsurugi] .character_rel__name_jp {
    width: 16.1110208333%;
  }
}
@media (min-width: 835px) {
  [data-id=tsurugi] .character_rel__name_jp {
    width: 14.0095833333%;
  }
}
@media (max-width: 834px) {
  [data-id=daiya] .character_rel__name_jp {
    translate: -15% 0;
    width: 15.2308395833%;
  }
}
@media (min-width: 835px) {
  [data-id=daiya] .character_rel__name_jp {
    width: 13.2442083333%;
  }
}
@media (max-width: 834px) {
  [data-id=mitsuba] .character_rel__name_jp {
    filter: drop-shadow(0 0 0.5vw black) drop-shadow(0 0 0.25vw black) drop-shadow(0 0 0.25vw black) drop-shadow(0 0 0.25vw black);
    width: 15.5897833333%;
  }
}
@media (min-width: 835px) {
  [data-id=mitsuba] .character_rel__name_jp {
    filter: drop-shadow(0 0 0.625rem rgba(0, 0, 0, 0.5)) drop-shadow(0 0 0.625rem rgba(0, 0, 0, 0.5)) drop-shadow(0 0 0.3125rem black) drop-shadow(0 0 0.3125rem black);
    width: 13.5563333333%;
  }
}

.credit {
  border-top: 1px solid #52792a;
}
@media (max-width: 834px) {
  .credit {
    padding: min(100px, 25vw) 0 min(200px, 50vw);
  }
}
@media (min-width: 835px) {
  .credit {
    padding: 13.75rem 5rem;
  }
}

.credit__inner {
  position: relative;
}

.credit__head {
  color: #9b9b9b;
  letter-spacing: 0.05em;
}
@media (max-width: 834px) {
  .credit__head {
    font-size: min(38px, 9.5vw);
    margin-bottom: min(50px, 12.5vw);
    text-align: center;
  }
}
@media (min-width: 835px) {
  .credit__head {
    font-size: 2.5rem;
  }
}
@media (min-width: 835px) {
  .credit__head[data-pos="1"] {
    position: absolute;
    top: 50%;
    left: 0;
    translate: 0 -50%;
  }
}
@media (max-width: 834px) {
  .credit__head[data-pos="2"] {
    display: none;
  }
}
@media (min-width: 835px) {
  .credit__head[data-pos="2"] {
    position: absolute;
    top: 50%;
    right: 0;
    translate: 0 -50%;
  }
}

.credit__list {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
}
@media (max-width: 834px) {
  .credit__list {
    gap: min(60px, 15vw);
  }
}
@media (min-width: 835px) {
  .credit__list {
    gap: 11.25rem;
  }
}

.credit__list__item dl {
  display: flex;
  flex-direction: row-reverse;
}
@media (max-width: 834px) {
  .credit__list__item dl {
    gap: min(9px, 2.25vw);
  }
}
@media (min-width: 835px) {
  .credit__list__item dl {
    gap: 0.625rem;
  }
}
.credit__list__item dt {
  font-feature-settings: "vpal";
  font-variation-settings: "wght" 700;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}
@media (max-width: 834px) {
  .credit__list__item dt {
    font-size: min(11px, 2.75vw);
  }
}
@media (min-width: 835px) {
  .credit__list__item dt {
    font-size: 0.9375rem;
  }
}
.credit__list__item .kanji {
  letter-spacing: 0.1em;
}
.credit__list__item[data-id=ryukishi] {
  margin-left: -3%;
}
@media (min-width: 835px) {
  .credit__list__item[data-id=ryukishi] {
    margin-left: -0.625rem;
  }
}
.credit__list__item[data-id=ryukishi] dd {
  width: min(39.37734px, 9.844335vw);
}
@media (min-width: 835px) {
  .credit__list__item[data-id=ryukishi] dd {
    width: 4.10180625rem;
  }
}
.credit__list__item[data-id=kuroki] dd {
  width: min(38.0133px, 9.503325vw);
}
@media (min-width: 835px) {
  .credit__list__item[data-id=kuroki] dd {
    width: 3.95971875rem;
  }
}
.credit__list__item[data-id=coly] dd {
  width: min(29.09064px, 7.27266vw);
}
@media (min-width: 835px) {
  .credit__list__item[data-id=coly] dd {
    width: 3.030275rem;
  }
}

.introduction {
  color: #9b9b9b;
  position: relative;
}

.introduction__sidetxt {
  height: 100vh;
  left: 0;
  overflow: hidden;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 100%;
}
@media (max-width: 834px) {
  .introduction__sidetxt {
    opacity: 0.7;
  }
}

@-webkit-keyframes sideTxtMove {
  0% {
    translate: 0 0;
  }
  100% {
    translate: 0 -46.0843375rem;
  }
}

@keyframes sideTxtMove {
  0% {
    translate: 0 0;
  }
  100% {
    translate: 0 -46.0843375rem;
  }
}
@-webkit-keyframes sideTxtMoveNrw {
  0% {
    translate: 0 0;
  }
  100% {
    translate: 0 -92.168675vw;
  }
}
@keyframes sideTxtMoveNrw {
  0% {
    translate: 0 0;
  }
  100% {
    translate: 0 -92.168675vw;
  }
}
.introduction__sidetxt__item {
  display: flex;
  height: 100%;
  overflow: hidden;
}
@media (max-width: 834px) {
  .introduction__sidetxt__item {
    gap: 3%;
    width: 20%;
  }
}
@media (min-width: 835px) {
  .introduction__sidetxt__item {
    gap: 5%;
    width: 14%;
  }
}
[data-reveal="1"] .introduction__sidetxt__item[data-pos="1"], [data-reveal="1"] .introduction__sidetxt__item[data-pos="2"] {
  transition: translate 2s 0s cubic-bezier(0.85, 0, 0.15, 1);
  translate: 0 0;
}
.introduction__sidetxt__item[data-pos="1"] {
  position: absolute;
  top: 0;
  left: 0;
  translate: -100% 0;
}
.introduction__sidetxt__item[data-pos="1"] .d1 {
  margin-left: -25%;
}
@media (max-width: 834px) {
  .introduction__sidetxt__item[data-pos="1"] .d1 {
    margin-left: -32%;
  }
}
.introduction__sidetxt__item[data-pos="2"] {
  position: absolute;
  top: 0;
  right: 0;
  justify-content: flex-end;
  translate: 100% 0;
}
.introduction__sidetxt__item[data-pos="2"] .d1 {
  margin-right: -25%;
}
@media (max-width: 834px) {
  .introduction__sidetxt__item[data-pos="2"] .d1 {
    margin-right: -32%;
  }
}
.introduction__sidetxt__item .d1 {
  background: url("/wp/wp-content/themes/brotherash_official//assets/img/top/introduction/txt_side_1.png") repeat-y 0 0/100%;
  height: 100%;
}
@media (min-width: 835px) {
  .introduction__sidetxt__item .d1 {
    width: 70%;
  }
}
@media (max-width: 834px) {
  .introduction__sidetxt__item .d1 {
    width: 70%;
  }
}
.introduction__sidetxt__item .d2 {
  height: 200%;
}
.introduction__sidetxt__item .d2 .obj {
  aspect-ratio: 15/368.6747;
  background: url("/wp/wp-content/themes/brotherash_official//assets/img/top/introduction/txt_side_2.png") repeat-y 0 0/100%;
}
@media (max-width: 834px) {
  .introduction__sidetxt__item .d2 {
    -webkit-animation: sideTxtMoveNrw 20s 0s linear infinite;
            animation: sideTxtMoveNrw 20s 0s linear infinite;
    width: 3.75vw;
  }
}
@media (min-width: 835px) {
  .introduction__sidetxt__item .d2 {
    -webkit-animation: sideTxtMove 20s 0s linear infinite;
            animation: sideTxtMove 20s 0s linear infinite;
    width: 1.875rem;
  }
}

.introduction__cont {
  margin-top: -100vh;
  position: relative;
}
@media (max-width: 834px) {
  .introduction__cont {
    padding: min(80px, 20vw) 0 min(120px, 30vw);
  }
}
@media (min-width: 835px) {
  .introduction__cont {
    padding: 15rem 0;
  }
}

.introduction__main {
  aspect-ratio: 1;
  margin: 0 auto;
  position: relative;
}
@media (max-width: 834px) {
  .introduction__main {
    padding-top: 11vw;
    width: 85%;
  }
}
@media (min-width: 835px) {
  .introduction__main {
    padding-top: 6.875rem;
    width: 53.75rem;
  }
}

.introduction__head {
  display: flex;
  justify-content: center;
  letter-spacing: 0.05em;
  line-height: 1;
  position: relative;
}
@media (max-width: 834px) {
  .introduction__head {
    font-size: 17.5vw;
  }
}
@media (min-width: 835px) {
  .introduction__head {
    font-size: 10.9375rem;
  }
}

@-webkit-keyframes impkgIn {
  0% {
    opacity: 0;
    scale: 1.1;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}

@keyframes impkgIn {
  0% {
    opacity: 0;
    scale: 1.1;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}
.introduction__main__pkg {
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  translate: -50% -50%;
  width: 100%;
}
@media (max-width: 834px) {
  .introduction__main__pkg {
    width: 115%;
  }
}
.introduction__main__pkg img {
  filter: drop-shadow(1.25rem 1.25rem 1.875rem rgba(0, 0, 0, 0.8));
}
[data-reveal="1"] .introduction__main__pkg {
  -webkit-animation: impkgIn 1.2s 0.2s cubic-bezier(0.85, 0, 0.15, 1) forwards;
          animation: impkgIn 1.2s 0.2s cubic-bezier(0.85, 0, 0.15, 1) forwards;
}

@-webkit-keyframes imbgIn {
  0% {
    opacity: 0;
    rotate: 5deg;
    scale: calc(0.95 * var(--animationScaleMinus));
  }
  100% {
    opacity: 1;
    rotate: 0deg;
  }
}

@keyframes imbgIn {
  0% {
    opacity: 0;
    rotate: 5deg;
    scale: calc(0.95 * var(--animationScaleMinus));
  }
  100% {
    opacity: 1;
    rotate: 0deg;
  }
}
.introduction__main__bg {
  position: absolute;
  top: 0;
  left: 0;
  background: url("/wp/wp-content/themes/brotherash_official//assets/img/top/introduction/ph_symbol.svg") no-repeat 0 0/100%;
  height: 100%;
  opacity: 0;
  width: 100%;
}
[data-reveal="1"] .introduction__main__bg {
  -webkit-animation: imbgIn 1s 0s ease forwards;
          animation: imbgIn 1s 0s ease forwards;
}

.introduction__catch[data-pos="1"] {
  position: absolute;
  top: 55.4545454545%;
  left: 62.1590909091%;
  width: 8.9183977273%;
}
.introduction__catch[data-pos="2"] {
  position: absolute;
  top: 79.6590909091%;
  left: 33.1818181818%;
  width: 9.0002386364%;
}

.introduction__txt {
  font-variation-settings: "wght" 500;
  text-align: center;
}
@media (max-width: 834px) {
  .introduction__txt {
    font-size: min(14px, 3.5vw);
    line-height: 2.7142857143;
    margin-top: 4em;
  }
}
@media (min-width: 835px) {
  .introduction__txt {
    font-size: 1.0625rem;
    line-height: 2.75;
    margin-top: 7.5rem;
  }
}

.link {
  position: relative;
}
@media (max-width: 834px) {
  .link {
    margin-bottom: min(100px, 25vw);
  }
}
@media (min-width: 835px) {
  .link {
    margin-bottom: 5rem;
    margin-top: -6.25vw;
  }
}

.link__inner {
  position: relative;
}
@media (min-width: 835px) {
  .link__inner {
    align-items: center;
    display: flex;
    margin: 0 auto;
    max-width: 75rem;
  }
}

@media (max-width: 834px) {
  .link__heads {
    margin-bottom: min(20px, 5vw);
    margin-left: min(20px, 5vw);
  }
}
@media (min-width: 835px) {
  .link__heads {
    width: 25%;
  }
}

.link__head {
  color: #9b9b9b;
  letter-spacing: 0.05em;
  line-height: 1;
}
@media (max-width: 834px) {
  .link__head {
    font-size: min(40px, 10vw);
    margin-bottom: 0.3em;
  }
}
@media (min-width: 835px) {
  .link__head {
    font-size: 2.9375rem;
    margin-bottom: 0.5em;
  }
}

.link__headsub {
  width: min(111.6508px, 27.9127vw);
}
@media (min-width: 835px) {
  .link__headsub {
    width: 8.72271875rem;
  }
}

.link__pkgrow {
  display: flex;
  justify-content: center;
}
@media (max-width: 834px) {
  .link__pkgrow {
    gap: min(40px, 10vw);
  }
}
@media (min-width: 835px) {
  .link__pkgrow {
    gap: 15%;
    width: 75%;
  }
}

.link__pkg {
  opacity: 0;
  perspective: 2000px;
  transition: all 0.3s 0s cubic-bezier(0, 0.55, 0.45, 1);
}
.link__pkg[data-cs="1"] {
  pointer-events: none;
}
[data-reveal="1"] .link__pkg {
  -webkit-animation: pkgIn 1s 0s cubic-bezier(0, 0.55, 0.45, 1) forwards;
          animation: pkgIn 1s 0s cubic-bezier(0, 0.55, 0.45, 1) forwards;
}
[data-reveal="1"] .link__pkg[data-id=x] {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
[data-reveal="1"] .link__pkg[data-id=yt] {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s;
}
[data-reveal="1"] .link__pkg[data-id=store] {
  -webkit-animation-delay: 0.6s;
          animation-delay: 0.6s;
}
@media (max-width: 834px) {
  .link__pkg {
    height: min(137.5px, 34.375vw);
    width: min(88px, 22vw);
  }
}
@media (min-width: 835px) {
  .link__pkg {
    height: 15.625rem;
    width: 10rem;
  }
}
@media (min-width: 835px) {
  .link__pkg:hover {
    filter: brightness(1.3);
    scale: 0.97;
  }
}

@-webkit-keyframes pkgIn {
  0% {
    opacity: 0;
    translate: 0 20%;
  }
  100% {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes pkgIn {
  0% {
    opacity: 0;
    translate: 0 20%;
  }
  100% {
    opacity: 1;
    translate: 0 0;
  }
}
@-webkit-keyframes rotate {
  from {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
}
@keyframes rotate {
  from {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
  }
}
.link__pkg__ico {
  position: absolute;
  top: 58%;
  left: 50%;
  translate: -50% -50%;
}
[data-id=x] .link__pkg__ico {
  width: 30%;
}
[data-id=yt] .link__pkg__ico {
  width: 40%;
}
[data-id=store] .link__pkg__ico {
  width: 40%;
}

.link__pkg__ac {
  color: #9b9b9b;
  font-variation-settings: "wght" 700;
  line-height: 1;
  text-align: center;
  translate: -50% 0;
  width: 100%;
}
@media (max-width: 834px) {
  .link__pkg__ac {
    position: absolute;
    left: 50%;
    bottom: min(9px, 2.25vw);
    font-size: min(9px, 2.25vw);
  }
}
@media (min-width: 835px) {
  .link__pkg__ac {
    position: absolute;
    left: 50%;
    bottom: 1.25rem;
    font-size: 0.8125rem;
  }
}

.boxBase {
  display: block;
  opacity: 1;
  transform-style: preserve-3d;
}
@media (max-width: 834px) {
  .boxBase {
    height: min(137.5px, 34.375vw);
    width: min(88px, 22vw);
  }
}
@media (min-width: 835px) {
  .boxBase {
    height: 15.625rem;
    width: 10rem;
  }
}
[data-reveal="1"] .boxBase {
  -webkit-animation: rotate 2s 0s cubic-bezier(0, 0.55, 0.45, 1) forwards;
          animation: rotate 2s 0s cubic-bezier(0, 0.55, 0.45, 1) forwards;
}
[data-reveal="1"] .boxBase[data-id=x] {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}
[data-reveal="1"] .boxBase[data-id=yt] {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s;
}
[data-reveal="1"] .boxBase[data-id=store] {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s;
}
[data-id=x] .boxBase {
  transform: rotateX(17deg) rotateY(-32deg) rotateZ(-21deg);
}
[data-id=yt] .boxBase {
  transform: translateX(-10%) rotateX(-5deg) rotateY(-28deg) rotateZ(11deg);
}
[data-id=store] .boxBase {
  transform: rotateX(8deg) rotateY(31deg) rotateZ(-40deg);
}

.boxBase > div {
  background-color: #646464;
  position: absolute;
}

.boxBase > .top {
  background: #1f2d10;
  transform: translateY(0) rotateX(-90deg);
  transform-origin: 0 0;
  width: 100%;
}
[data-cs="1"] .boxBase > .top {
  background: #1c1c1c;
}
@media (max-width: 834px) {
  .boxBase > .top {
    height: min(33px, 8.25vw);
  }
}
@media (min-width: 835px) {
  .boxBase > .top {
    height: 3.75rem;
  }
}

.boxBase > .bottom {
  background: #1f2d10;
  transform-origin: 0 0;
  width: 100%;
}
[data-cs="1"] .boxBase > .bottom {
  background: #1c1c1c;
}
@media (max-width: 834px) {
  .boxBase > .bottom {
    height: min(33px, 8.25vw);
    transform: translateY(min(137.5px, 34.375vw)) translateZ(calc(-1 * min(33px, 8.25vw))) rotateX(90deg);
  }
}
@media (min-width: 835px) {
  .boxBase > .bottom {
    height: 3.75rem;
    transform: translateY(15.625rem) translateZ(-3.75rem) rotateX(90deg);
  }
}

.boxBase > .front {
  background: url("/wp/wp-content/themes/brotherash_official//assets/img/top/link/ph_pkg_1.png") no-repeat 0 0/100%;
  background-color: #06110d;
  height: 100%;
  transform: translateZ(0);
  width: 100%;
}
[data-cs="1"] .boxBase > .front {
  background: url("/wp/wp-content/themes/brotherash_official//assets/img/top/link/ph_pkg_2.png") no-repeat 0 0/100%;
  background-color: #020202;
}

.boxBase > .back {
  background-color: #06110d;
  height: 100%;
  width: 100%;
}
[data-cs="1"] .boxBase > .back {
  background-color: #020202;
}
@media (max-width: 834px) {
  .boxBase > .back {
    transform: translateZ(calc(-1 * min(33px, 8.25vw))) rotateX(180deg);
  }
}
@media (min-width: 835px) {
  .boxBase > .back {
    transform: translateZ(-3.75rem) rotateX(180deg);
  }
}

.boxBase > .left {
  background: #52792a;
  height: 100%;
  transform-origin: 0 0;
}
[data-cs="1"] .boxBase > .left {
  background: #353535;
}
@media (max-width: 834px) {
  .boxBase > .left {
    transform: translateX(0) translateZ(calc(-1 * min(33px, 8.25vw))) rotateY(-90deg);
    width: min(33px, 8.25vw);
  }
}
@media (min-width: 835px) {
  .boxBase > .left {
    transform: translateX(0) translateZ(-3.75rem) rotateY(-90deg);
    width: 3.75rem;
  }
}

.boxBase > .right {
  background: #52792a;
  height: 100%;
  transform-origin: 0 0;
}
[data-cs="1"] .boxBase > .right {
  background: #353535;
}
@media (max-width: 834px) {
  .boxBase > .right {
    transform: translateX(min(88px, 22vw)) rotateY(90deg);
    width: min(33px, 8.25vw);
  }
}
@media (min-width: 835px) {
  .boxBase > .right {
    transform: translateX(10rem) rotateY(90deg);
    width: 3.75rem;
  }
}

.mv_glwrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}
@media (max-width: 834px) {
  .mv_glwrap {
    aspect-ratio: 400/920;
  }
}
@media (min-width: 835px) {
  .mv_glwrap {
    aspect-ratio: 16/9;
    width: 100%;
  }
}

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

.mv__card {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 100%;
  pointer-events: none;
}

.mv {
  color: #9b9b9b;
  position: relative;
}
@media (max-width: 834px) {
  .mv {
    aspect-ratio: 400/950;
  }
}
@media (min-width: 835px) {
  .mv {
    aspect-ratio: 1920/1520;
  }
}

.mv__grad {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, black 100%);
  content: "";
  left: 0;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1;
}
@media (max-width: 834px) {
  .mv__grad {
    height: 25vh;
  }
}
@media (min-width: 835px) {
  .mv__grad {
    height: 28.125vw;
  }
}

.mv__bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  overflow: hidden;
  width: 100%;
}

.mv__bgsvg {
  fill: #4a0310;
  transition: fill 2s 0s ease;
}
[data-mvstate="1"] .mv__bgsvg {
  fill: #1c1c1c;
}

@-webkit-keyframes mvBgIn {
  0% {
    opacity: 0;
    translate: -10% 0;
  }
  100% {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes mvBgIn {
  0% {
    opacity: 0;
    translate: -10% 0;
  }
  100% {
    opacity: 1;
    translate: 0 0;
  }
}
.mv__bgtxt svg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
[data-ready="1"] .mv__bgtxt svg {
  -webkit-animation: mvBgIn 4s 1s ease forwards;
          animation: mvBgIn 4s 1s ease forwards;
}
.mv__bgtxt[data-id="1"], .mv__bgtxt[data-id="3"] {
  aspect-ratio: 2008.64/550.43;
  width: 104.616671875%;
}
@media (max-width: 834px) {
  .mv__bgtxt[data-id="1"], .mv__bgtxt[data-id="3"] {
    position: absolute;
    top: 22.5vw;
    left: -1.4695%;
  }
}
@media (min-width: 835px) {
  .mv__bgtxt[data-id="1"], .mv__bgtxt[data-id="3"] {
    position: absolute;
    top: 14.5833333333vw;
    left: -1.4695%;
  }
}
.mv__bgtxt[data-id="2"] {
  aspect-ratio: 898.76/566.87;
}
@media (max-width: 834px) {
  .mv__bgtxt[data-id="2"] {
    position: absolute;
    top: 140vw;
    right: -7%;
    width: 56.17266875%;
  }
}
@media (min-width: 835px) {
  .mv__bgtxt[data-id="2"] {
    position: absolute;
    top: 49.8958333333vw;
    right: -1.4695%;
    width: 46.8105572917%;
  }
}
.mv__bgtxt[data-id="3"] {
  width: 115%;
}
@media (max-width: 834px) {
  .mv__bgtxt[data-id="3"] {
    position: absolute;
    top: 190vw;
    left: -90%;
  }
}
@media (min-width: 835px) {
  .mv__bgtxt[data-id="3"] {
    display: none;
  }
}

.mv__shead {
  font-variation-settings: "wght" 600;
  line-height: 1.5714285714;
  z-index: 2;
}
@media (max-width: 834px) {
  .mv__shead {
    font-size: min(13px, 3.25vw);
    position: absolute;
    top: min(20px, 5vw);
    left: min(20px, 5vw);
  }
}
@media (min-width: 835px) {
  .mv__shead {
    font-size: 14px;
    position: absolute;
    top: 3.375rem;
    left: 5rem;
  }
}

.mv__logowrap {
  z-index: 2;
}
@media (max-width: 834px) {
  .mv__logowrap {
    position: absolute;
    top: 150vw;
    left: min(20px, 5vw);
    width: 62.5vw;
  }
}
@media (min-width: 835px) {
  .mv__logowrap {
    position: absolute;
    top: 41.1458333333vw;
    left: 5rem;
    width: 27.5rem;
  }
}

@media (max-width: 834px) {
  .mv__logo {
    margin-bottom: 3.75vw;
  }
}
@media (min-width: 835px) {
  .mv__logo {
    margin-bottom: 1.5625rem;
  }
}

.mv__logo__txt {
  font-size: 10px;
  font-variation-settings: "wght" 600;
  letter-spacing: 0.01em;
  line-height: 2;
  text-align: justify;
}
@media (max-width: 834px) {
  .mv__logo__txt {
    font-size: 8px;
    line-height: 2;
  }
}

@-webkit-keyframes mvtypeBarAnim {
  0% {
    transform: scaleX(0);
    transform-origin: 0 0;
  }
  100% {
    transform: scaleX(1);
    transform-origin: 0 0;
  }
}

@keyframes mvtypeBarAnim {
  0% {
    transform: scaleX(0);
    transform-origin: 0 0;
  }
  100% {
    transform: scaleX(1);
    transform-origin: 0 0;
  }
}
@-webkit-keyframes mvtypeBarAnimRev {
  0% {
    transform: scaleX(0);
    transform-origin: 100% 0;
  }
  100% {
    transform: scaleX(1);
    transform-origin: 100% 0;
  }
}
@keyframes mvtypeBarAnimRev {
  0% {
    transform: scaleX(0);
    transform-origin: 100% 0;
  }
  100% {
    transform: scaleX(1);
    transform-origin: 100% 0;
  }
}
:root {
  --mvInterval: 8s;
}

.mv__type {
  display: flex;
  line-height: 1;
  z-index: 2;
}
@media (max-width: 834px) {
  .mv__type {
    position: absolute;
    top: min(65px, 16.25vw);
    right: min(20px, 5vw);
    gap: 30px;
  }
}
@media (min-width: 835px) {
  .mv__type {
    position: absolute;
    top: 3.375rem;
    left: 25rem;
    gap: 80px;
  }
}
.mv__type:before {
  background: #9b9b9b;
  content: "";
  height: 1px;
  opacity: 0.5;
  position: absolute;
  top: 50%;
  left: 50%;
}
@media (max-width: 834px) {
  .mv__type:before {
    translate: -50% calc(-50% + 1px);
    width: 30%;
  }
}
@media (min-width: 835px) {
  .mv__type:before {
    translate: -50% calc(-50% + 2px);
    width: 45%;
  }
}
.mv__type:after {
  background: #9b9b9b;
  content: "";
  height: 1px;
  transform-origin: 0 0;
  position: absolute;
  top: 50%;
  left: 50%;
}
@media (max-width: 834px) {
  .mv__type:after {
    translate: -50% calc(-50% + 1px);
    width: 30%;
  }
}
@media (min-width: 835px) {
  .mv__type:after {
    translate: -50% calc(-50% + 2px);
    width: 45%;
  }
}
[data-mvstate="0"] .mv__type:after {
  -webkit-animation: mvtypeBarAnim var(--mvInterval) 0s linear;
          animation: mvtypeBarAnim var(--mvInterval) 0s linear;
}
[data-mvstate="1"] .mv__type:after {
  animation: mvtypeBarAnimRev var(--mvInterval) 0s linear reverse;
}

.mv__type__item {
  display: block;
  opacity: 0.5;
  transition: opacity 0.2s 0s ease;
}
[data-mvstate="0"] .mv__type__item[data-type="2d"] {
  opacity: 1;
}
[data-mvstate="1"] .mv__type__item[data-type="3d"] {
  opacity: 1;
}
.mv__type__item button {
  color: inherit;
  display: block;
  font-size: 12px;
  font-variation-settings: "wght" 600;
}
@media (min-width: 835px) {
  .mv__type__item button {
    font-size: 16px;
  }
}

.news__head__all {
  align-items: center;
  display: flex;
  gap: 0.75em;
  line-height: 1;
}
.news__head__all[data-disable="1"] {
  opacity: 0.4;
}
@media (max-width: 834px) {
  .news__head__all {
    font-size: 12px;
    justify-content: center;
    margin-top: min(40px, 10vw);
  }
}
@media (min-width: 835px) {
  .news__head__all {
    position: absolute;
    top: 50%;
    right: 0;
    font-size: 14px;
    translate: 0 -50%;
  }
}
.news__head__all .arw {
  aspect-ratio: 1;
  border: 1px solid;
  border-radius: 1.75em;
  display: block;
  position: relative;
  width: 1.75em;
}
.news__head__all .arw:after {
  aspect-ratio: 25.71/16.17;
  background: url("/wp/wp-content/themes/brotherash_official//assets/img/top/news/ico_arw.svg") no-repeat 0 0/100%;
  content: "";
  display: block;
  translate: -50% -50%;
  width: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
}

.news {
  border-top: 1px solid #52792a;
  color: #9b9b9b;
  position: relative;
}
@media (max-width: 834px) {
  .news {
    padding: min(80px, 20vw) 0 min(60px, 15vw);
  }
}
@media (min-width: 835px) {
  .news {
    padding: 10rem 0 15rem;
  }
}

.news__headwrap {
  margin: 0 auto;
  position: relative;
}
@media (min-width: 835px) {
  .news__headwrap {
    max-width: 70rem;
  }
}

.news__head {
  font-size: 4.375rem;
  letter-spacing: 0.07em;
  line-height: 1;
  text-align: center;
}
@media (max-width: 834px) {
  .news__head {
    font-size: min(38px, 9.5vw);
  }
}

.news__inner::-webkit-scrollbar {
  display: none;
}
@media (max-width: 834px) {
  .news__inner {
    margin-top: min(30px, 7.5vw);
    padding: 0 min(20px, 5vw);
  }
}
@media (min-width: 835px) {
  .news__inner {
    margin-top: 5rem;
    overflow-x: scroll;
    padding-left: 20rem;
  }
}

.news__item_list {
  display: flex;
}
@media (max-width: 834px) {
  .news__item_list {
    flex-direction: column;
    gap: min(40px, 10vw);
  }
}
@media (min-width: 835px) {
  .news__item_list {
    gap: 5rem;
    min-width: 100vw;
  }
}

.news__item {
  background: #06110d;
  position: relative;
}
@media (min-width: 835px) {
  .news__item {
    border: 1px solid #06110d;
    transition: all 0.2s 0s ease;
  }
}
.news__item a {
  display: block;
  position: relative;
}
@media (max-width: 834px) {
  .news__item a {
    padding: 25px;
  }
}
@media (min-width: 835px) {
  .news__item a {
    min-height: 20rem;
    min-width: 35rem;
    padding: 2.5rem;
    width: 35rem;
  }
}
@media (min-width: 835px) {
  .news__item:hover {
    border: 1px solid rgba(155, 155, 155, 0.25);
    filter: brightness(1.3);
  }
}
.news__item:nth-child(even) {
  background: #1a0004;
}
.news__item[data-spacer="1"] {
  background: none;
  min-width: initial;
  width: 5rem;
}
@media (max-width: 834px) {
  .news__item[data-spacer="1"] {
    display: none;
  }
}

@media (max-width: 834px) {
  .news__item[data-noarticle="1"] {
    display: none;
  }
}
@media (min-width: 835px) {
  .news__item[data-noarticle="1"] {
    aspect-ratio: 560/320;
    background: black;
    background: url("/wp/wp-content/themes/brotherash_official//assets/img/top/news/ph_noentry.png") no-repeat 0 0/100%;
    border: 1px solid;
    display: block;
    min-height: 20rem;
    min-width: 35rem;
    pointer-events: none;
    position: relative;
    width: 35rem;
  }
}

.news__item__meta {
  display: flex;
  justify-content: space-between;
}

.news__item__meta__item {
  font-size: 12px;
  font-variation-settings: "wght" 500;
  line-height: 1;
}
@media (min-width: 835px) {
  .news__item__meta__item {
    font-size: 0.875rem;
  }
}

.news__item__meta__category {
  display: flex;
  gap: 1em;
}

.news__arw {
  aspect-ratio: 1;
  background: black;
  border-radius: 50%;
}
@media (max-width: 834px) {
  .news__arw {
    position: absolute;
    bottom: 15px;
    right: 20px;
    width: 44px;
  }
}
@media (min-width: 835px) {
  .news__arw {
    position: absolute;
    bottom: 0.9375rem;
    right: 0.9375rem;
    width: 2.875rem;
  }
}
.news__arw:after {
  aspect-ratio: 25.71/16.17;
  background: url("/wp/wp-content/themes/brotherash_official//assets/img/top/news/ico_arw.svg") no-repeat 0 0/100%;
  content: "";
  display: block;
  translate: -50% -50%;
  width: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
}

.news__item__date {
  line-height: 1;
  position: relative;
}

.news__item__date__wrap {
  align-items: flex-end;
  display: flex;
  line-height: 1;
  position: relative;
}
@media (max-width: 834px) {
  .news__item__date__wrap {
    font-size: min(50px, 12.5vw);
    margin-top: 0.3em;
  }
}
@media (min-width: 835px) {
  .news__item__date__wrap {
    font-size: 5.3125rem;
    margin-top: 0.9375rem;
  }
}

.news__item__date__d {
  padding-left: 0.5em;
  position: relative;
}
.news__item__date__d:before {
  background: #9b9b9b;
  content: "";
  height: 75%;
  translate: 0 -50%;
  width: 1px;
  position: absolute;
  top: 50%;
  left: 0.25em;
}

.news__item__date__dotw {
  letter-spacing: 0.05em;
  margin-left: 0.5em;
  translate: 0 -20%;
}
@media (max-width: 834px) {
  .news__item__date__dotw {
    font-size: min(22px, 5.5vw);
  }
}
@media (min-width: 835px) {
  .news__item__date__dotw {
    font-size: 1.75rem;
    margin-left: 1.25rem;
  }
}

.news__item__head {
  font-variation-settings: "wght" 500;
  line-height: 1.875;
  margin-top: 1.5em;
}
@media (max-width: 834px) {
  .news__item__head {
    font-size: 14px;
  }
}
@media (min-width: 835px) {
  .news__item__head {
    font-size: 1rem;
  }
}

.song__cont {
  align-items: center;
  background: #ccc;
  display: flex;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
@media (max-width: 834px) {
  .song__cont {
    aspect-ratio: 16/9;
  }
}
@media (min-width: 835px) {
  .song__cont {
    height: 40rem;
  }
}

.song__cont__catch {
  letter-spacing: 0.05em;
  position: relative;
}
@media (max-width: 834px) {
  .song__cont__catch {
    font-size: min(28px, 7vw);
  }
}
@media (min-width: 835px) {
  .song__cont__catch {
    font-size: 4rem;
  }
}
.song__cont__catch .reader {
  letter-spacing: 0;
}

.song__cont__bg {
  background: black;
  background: url("/wp/wp-content/themes/brotherash_official//assets/img/top/song/ph_kv-nologo.webp") no-repeat 0 0/100%;
  height: 150%;
  width: 100%;
}
@media (max-width: 834px) {
  .song__cont__bg {
    position: absolute;
    top: 0;
    left: 0;
  }
}
@media (min-width: 835px) {
  .song__cont__bg {
    position: absolute;
    top: -5%;
    left: 0;
  }
}
.song__cont__bg:after {
  background: #06110d;
  content: "";
  height: 100%;
  opacity: 0.8;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.stage_swiper {
  position: relative;
  width: 100%;
}

.swiper-uiwrap {
  align-items: center;
  display: flex;
  justify-content: space-between;
  line-height: 1;
  position: relative;
  --swiper-pagination-bullet-inactive-color: #9b9b9b;
  --swiper-pagination-bullet-inactive-opacity: 1;
  --swiper-pagination-color: #52792a;
  --swiper-pagination-bottom: 0;
  --swiper-pagination-top: 0;
  --swiper-pagination-bullet-horizontal-gap: 0;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
}
@media (max-width: 834px) {
  .swiper-uiwrap {
    margin-top: 40px;
    width: 100%;
  }
}
@media (min-width: 835px) {
  .swiper-uiwrap {
    margin-top: 3.125rem;
    width: 25%;
  }
}
.swiper-uiwrap .swiper-pagination {
  align-items: center;
  bottom: auto;
  display: flex;
  gap: 10px;
  left: auto;
  position: relative;
  top: auto;
  width: auto;
}
.swiper-uiwrap .swiper-pagination-bullets.swiper-pagination-horizontal {
  width: auto;
}
.swiper-uiwrap .swiper-button-prev,
.swiper-uiwrap .swiper-button-next {
  aspect-ratio: 1;
  display: block;
  height: auto;
  height: 30px;
  left: auto;
  margin: 0;
  position: relative;
  right: auto;
  top: auto;
  width: 30px;
}
.swiper-uiwrap .swiper-button-prev:after,
.swiper-uiwrap .swiper-button-next:after {
  aspect-ratio: 1;
  border: 2px solid #9b9b9b;
  content: "";
  display: block;
  height: 50%;
  rotate: 45deg;
  translate: -50% -50%;
  width: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
}
.swiper-uiwrap .swiper-button-prev:after {
  border-right: none;
  border-top: none;
  translate: -25% -50%;
}
.swiper-uiwrap .swiper-button-next:after {
  border-bottom: none;
  border-left: none;
  translate: -75% -50%;
}
.swiper-uiwrap .swiper-button-next svg,
.swiper-uiwrap .swiper-button-prev svg {
  display: none;
}
@media (max-width: 834px) {
  .swiper-uiwrap {
    --swiper-pagination-bullet-width: 7px;
    --swiper-pagination-bullet-height: 7px;
  }
}

.stage__desc {
  position: relative;
}
@media (max-width: 834px) {
  .stage__desc {
    margin-top: min(60px, 15vw);
  }
}
@media (min-width: 835px) {
  .stage__desc {
    margin-top: 7.5rem;
  }
}
.stage__desc + .stage__desc {
  margin-top: min(120px, 30vw);
}
@media (min-width: 835px) {
  .stage__desc + .stage__desc {
    margin-top: 12.5rem;
  }
}
.stage__desc .stage__cont__inner {
  display: flex;
}
@media (min-width: 835px) {
  .stage__desc .stage__cont__inner {
    gap: 2.5rem;
  }
}

@media (max-width: 834px) {
  .stage__desc__head {
    text-align: right;
    width: 28%;
  }
}
@media (min-width: 835px) {
  .stage__desc__head {
    width: 11.01379375rem;
  }
}
@media (max-width: 834px) {
  .stage__desc__head img {
    width: 72%;
  }
}

.stage__desc__vol {
  position: relative;
  width: 72%;
}
@media (min-width: 835px) {
  .stage__desc__vol {
    max-width: 47.5rem;
  }
}

.stage__desc__vol__head {
  margin-bottom: 3em;
}
@media (max-width: 834px) {
  .stage__desc__vol__head {
    font-size: 12px;
  }
}
@media (min-width: 835px) {
  .stage__desc__vol__head {
    font-size: 0.875rem;
  }
}
.stage__desc__vol__head span {
  font-variation-settings: "wght" 600;
}

.stage__desc__vol__txt {
  color: #9b9b9b;
  font-variation-settings: "wght" 500;
}
@media (max-width: 834px) {
  .stage__desc__vol__txt {
    font-size: min(12.5px, 3.125vw);
    line-height: 2.2;
    text-align: justify;
  }
}
@media (min-width: 835px) {
  .stage__desc__vol__txt {
    font-size: 1rem;
    line-height: 2.125;
  }
}

.stage__desc__imhead {
  position: relative;
}
@media (max-width: 834px) {
  .stage__desc__imhead {
    width: 28%;
  }
}
@media (min-width: 835px) {
  .stage__desc__imhead {
    width: 32.5rem;
  }
}
@media (max-width: 834px) {
  .stage__desc__imhead img {
    translate: -30% 0;
    width: 95%;
  }
}

@media (max-width: 834px) {
  .stage__desc__imtxt {
    width: 72%;
  }
}
@media (min-width: 835px) {
  .stage__desc__imtxt {
    width: 30rem;
  }
}

:root {
  --stageSideWidth: 0px;
}

.stage__desc__imhead__head {
  z-index: 1;
}
@media (min-width: 835px) {
  .stage__desc__imhead__head {
    position: absolute;
    top: 0;
    left: 0;
    translate: max(-230px, (var(--stageSideWidth) + 12.5rem) * -0.5) 0;
    width: min(609.8799px, 117.2845961538%);
  }
}

.stage {
  position: relative;
}

.stage__bg {
  position: absolute;
  top: 0;
  left: 0;
  background: #06110d;
  height: 100%;
  width: 100%;
}

.stage__cont {
  display: flex;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.stage__cont__aside {
  width: min(40px, 10vw);
}
@media (min-width: 835px) {
  .stage__cont__aside {
    width: 20rem;
  }
}

.stage__cont__main {
  border-left: 1px solid #52792a;
}
@media (max-width: 834px) {
  .stage__cont__main {
    width: calc(100% - min(40px, 10vw));
  }
}
@media (min-width: 835px) {
  .stage__cont__main {
    padding-top: 8.75rem;
    width: calc(100% - 20rem);
  }
}

@media (max-width: 834px) {
  .stage__cont__inner {
    padding: 0 min(25px, 6.25vw);
  }
}
@media (min-width: 835px) {
  .stage__cont__inner {
    margin: 0 auto;
    max-width: 82.5rem;
    padding: 0 6.25rem;
  }
}

@media (max-width: 834px) {
  .stage__asidehead {
    opacity: 0;
  }
}
@media (min-width: 835px) {
  .stage__asidehead {
    border-bottom: none;
    padding: 0;
  }
}
.stage__asidehead .txt {
  translate: 2% -18%;
}

.stage__head {
  display: flex;
  position: relative;
}
@media (max-width: 834px) {
  .stage__head {
    flex-direction: column;
    gap: min(40px, 10vw);
    padding: min(50px, 12.5vw) 0 min(50px, 12.5vw);
  }
}
@media (min-width: 835px) {
  .stage__head {
    gap: 10rem;
    padding-bottom: 7.5rem;
  }
}

.stage__head__main__head_en {
  color: #9b9b9b;
  font-variation-settings: "wght" 600;
  line-height: 1.1333333333;
}
@media (max-width: 834px) {
  .stage__head__main__head_en {
    font-size: min(26px, 6.5vw);
  }
}
@media (min-width: 835px) {
  .stage__head__main__head_en {
    font-size: 3.625rem;
  }
}

.stage__head__main__head_jp {
  color: #52792a;
}
@media (max-width: 834px) {
  .stage__head__main__head_jp {
    font-size: 14px;
    font-variation-settings: "wght" 600;
    margin-top: 0.9em;
  }
}
@media (min-width: 835px) {
  .stage__head__main__head_jp {
    font-size: 1.125rem;
    font-variation-settings: "wght" 700;
    margin-top: 1.75em;
  }
}

.stage__head__sub {
  display: flex;
  flex-direction: column;
}
@media (max-width: 834px) {
  .stage__head__sub {
    gap: min(40px, 10vw);
  }
}
@media (min-width: 835px) {
  .stage__head__sub {
    gap: 3.75rem;
  }
}

.stage__head__sub__head_en {
  color: #9b9b9b;
  font-variation-settings: "wght" 500;
  line-height: 1;
}
@media (max-width: 834px) {
  .stage__head__sub__head_en {
    font-size: min(18px, 4.5vw);
  }
}
@media (min-width: 835px) {
  .stage__head__sub__head_en {
    font-size: 2rem;
  }
}

.stage__head__sub__head_jp {
  color: #52792a;
  line-height: 1.75;
}
@media (max-width: 834px) {
  .stage__head__sub__head_jp {
    font-size: 11px;
    font-variation-settings: "wght" 600;
    margin-top: 0.75em;
  }
}
@media (min-width: 835px) {
  .stage__head__sub__head_jp {
    font-size: 1rem;
    font-variation-settings: "wght" 700;
    margin-top: 1.5em;
  }
}

.stage__phstream {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  position: relative;
  z-index: 1;
}
@media (max-width: 834px) {
  .stage__phstream {
    margin-left: max(-40px, -10vw);
    width: calc(100% + min(40px, 10vw));
  }
}
@media (min-width: 835px) {
  .stage__phstream {
    margin-left: -20rem;
    width: calc(100% + 20rem);
  }
}

.stage__phstream__top {
  display: flex;
  flex-wrap: nowrap;
  position: relative;
}
@media (max-width: 834px) {
  .stage__phstream__top {
    height: min(240px, 60vw);
  }
}
@media (min-width: 835px) {
  .stage__phstream__top {
    height: 27.5rem;
  }
}

.stage__phstream__bottom {
  display: flex;
  flex-wrap: nowrap;
  position: relative;
}
@media (max-width: 834px) {
  .stage__phstream__bottom {
    height: min(160px, 40vw);
    margin-top: 10px;
  }
}
@media (min-width: 835px) {
  .stage__phstream__bottom {
    height: 15rem;
    margin-top: 1.25rem;
  }
}

@-webkit-keyframes streamMove {
  0% {
    translate: 0 0;
  }
  100% {
    translate: -50% 0;
  }
}

@keyframes streamMove {
  0% {
    translate: 0 0;
  }
  100% {
    translate: -50% 0;
  }
}
.stage__phstream__itemwrap {
  display: flex;
  flex-wrap: nowrap;
  height: 100%;
  position: relative;
}
@media (max-width: 834px) {
  .stage__phstream__itemwrap {
    gap: 10px;
  }
}
@media (min-width: 835px) {
  .stage__phstream__itemwrap {
    gap: 1.25rem;
  }
}
.stage__phstream__itemwrap .unit {
  display: flex;
  flex-wrap: nowrap;
  height: 100%;
  position: relative;
}
@media (max-width: 834px) {
  .stage__phstream__itemwrap .unit {
    gap: 10px;
  }
}
@media (min-width: 835px) {
  .stage__phstream__itemwrap .unit {
    gap: 1.25rem;
  }
}
.stage__phstream__itemwrap img {
  height: 100%;
  width: auto;
}

.stage__phstream__item {
  height: 100%;
}
.stage__phstream__item img {
  height: 100%;
  width: auto;
}

.stage__phstream__serif {
  background: #06110d;
  min-height: 100%;
  text-align: center;
  z-index: 1;
}
@media (max-width: 834px) {
  .stage__phstream__serif {
    width: 40px;
  }
}
@media (min-width: 835px) {
  .stage__phstream__serif {
    padding-top: 1.25rem;
    width: 5rem;
  }
}
@media (max-width: 834px) {
  .stage__phstream__serif[data-pos="1"] {
    position: absolute;
    bottom: 0;
    right: min(10px, 2.5vw);
  }
}
@media (min-width: 835px) {
  .stage__phstream__serif[data-pos="1"] {
    position: absolute;
    top: 0;
    right: 12.5rem;
  }
}
@media (max-width: 834px) {
  .stage__phstream__serif[data-pos="1"] img {
    margin-bottom: min(15px, 3.75vw);
    width: 58.7382%;
  }
}
@media (min-width: 835px) {
  .stage__phstream__serif[data-pos="1"] img {
    width: 36.711375%;
  }
}
@media (max-width: 834px) {
  .stage__phstream__serif[data-pos="2"] {
    position: absolute;
    top: 0;
    left: -1px;
  }
}
@media (min-width: 835px) {
  .stage__phstream__serif[data-pos="2"] {
    position: absolute;
    top: 0;
    left: 20rem;
  }
}
@media (max-width: 834px) {
  .stage__phstream__serif[data-pos="2"] img {
    margin-top: min(15px, 3.75vw);
    width: 52.5911111111%;
  }
}
@media (min-width: 835px) {
  .stage__phstream__serif[data-pos="2"] img {
    width: 29.5825%;
  }
}

.stage__syiv2 {
  aspect-ratio: 1;
  overflow: hidden;
  position: relative;
}
@media (max-width: 834px) {
  .stage__syiv2 {
    aspect-ratio: 1;
    margin-top: min(80px, 20vw);
  }
}
@media (min-width: 835px) {
  .stage__syiv2 {
    aspect-ratio: 320/160;
    margin-top: 4.375rem;
  }
}
.stage__syiv2 .imgobj {
  position: absolute;
  top: 0;
  left: 0;
  background: url("/wp/wp-content/themes/brotherash_official//assets/img/top/stage/ph_syiv2.webp") no-repeat 50% 50%/cover;
  height: 110%;
  width: 100%;
}

.stage__syiv2__txt {
  border-top: 1px solid;
  display: flex;
}
@media (max-width: 834px) {
  .stage__syiv2__txt {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 15vw;
    width: 100%;
  }
}
@media (min-width: 835px) {
  .stage__syiv2__txt {
    height: 9.375rem;
    justify-content: flex-end;
    width: calc(100% + 20rem);
    position: absolute;
    left: -20rem;
    bottom: 0;
  }
}
@media (max-width: 834px) {
  .stage__syiv2__txt[data-pos="1"] {
    position: absolute;
    left: 0;
    bottom: 15vw;
    padding-left: min(37px, 9.25vw);
  }
}
@media (max-width: 834px) {
  .stage__syiv2__txt[data-pos="2"] {
    position: absolute;
    left: 0;
    bottom: 0;
    justify-content: flex-end;
  }
}
@media (max-width: 834px) {
  .stage__syiv2__txt[data-pos="2"]:before {
    background: #52792a;
    content: "";
    height: 100%;
    width: 55%;
    position: absolute;
    top: 0;
    right: 0;
  }
}
.stage__syiv2__txt .txt {
  color: #52792a;
  display: flex;
  letter-spacing: 0.02em;
  line-height: 1;
  padding-right: 0.1em;
  position: relative;
  translate: 0 -18%;
}
@media (max-width: 834px) {
  .stage__syiv2__txt .txt {
    font-size: 20.125vw;
  }
}
@media (min-width: 835px) {
  .stage__syiv2__txt .txt {
    font-size: 12.625rem;
  }
}
.stage__syiv2__txt .bg {
  color: black;
  display: flex;
}
@media (min-width: 835px) {
  .stage__syiv2__txt:before {
    background: #52792a;
    content: "";
    height: 100%;
    width: 35rem;
    position: absolute;
    top: 0;
    right: 0;
  }
}