/*
Theme Name:DREAM DANCE CONTEST 2024 5.1Ver
Theme URI:
Version: 1.0
Author: takami
Author URI: https://yoshida-designbu.com
License: takami
*/

/*--------------
common
--------------*/
html {
  font-size: 62.5%;
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

:root {
  --color-yg:#b9e55a;
  --color-purple:#943eb9;
  --color-black:#000;
  --color-white:#fefefe;
  --color-orange:#ff6b3d;
  --section-margin:120px;
  --font-400:400;
  --font-500:500;
  --font-500:500;
  --font-700:700;
  --font-800:800;
  --font-900:900;
  --section-margin:92px;
  --font-roboto:"Roboto", sans-serif;
  --font-zenKakuAntique:"Zen Kaku Gothic Antique", sans-serif;
  --font-openSans:"Open Sans", sans-serif;
}

body {
  font-size: clamp(1.4rem,3vw,1.7rem);
  font-family: "Zen Kaku Gothic Antique","Open Sans","游ゴシック", YuGothic ,"游ゴシック体",Yu Gothic,Hiragino Mincho ProN,"ヒラギノゴシック ProN",sans-serif;
  font-weight: 600;
  line-height: 1.75;
  letter-spacing: 0.1em;
  color: var(--color-white);
  position: relative;
  background: var(--color-purple);
  background-attachment: fixed;
}

small {
  font-size: 1.08rem;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
  transition: all 0.5s;
  color: var(--color-purple);
}

img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

svg {
  width: 100%;
  height: auto;
}
svg path, svg polygon, svg text {
  transition: .5s;
}

table {
  clear: both;
  border-collapse: collapse;
  width: 100%;
}

.sp-br {
  display: none;
}

span.marker{
  background:linear-gradient(transparent 60%, var(--color-white) 60%);
}

/*---- not found -----*/
.notFound {
  height: 100svh;
  min-height: 450px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 6vw;
  background-color: var(--color-yg);
}

.notFound h2{
  color: var(--color-purple);
  font-family: var(--font-roboto);
  font-weight: var(--font-900);
  font-size: min(3.24rem,8vw);
  padding-bottom: 24px;
  text-transform: uppercase;
  line-height: 1.3;
}

.notFound h2 span{
  display: block;
  font-size: min(4.24rem,12vw);
}

.notFound p{
  padding-bottom: 24px;
  color: var(--color-purple);
}


/*----- breadcrumbs/pageTop -----*/

.breadcrumbs{
  font-size:1.24rem;
  padding: 30px 0 30px;
  text-align: center;
}

.breadcrumbs span{
  padding: 0 2px;
}


/*----- loading -----*/

#is-loading {
  display: block;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background:var(--color-black);
  z-index: 8;
  overflow: hidden;
}

.loading-logoAnimation {
  position: fixed;
  width: 100%;
  text-align: center;
  z-index: 9;
}

.loading-logoAnimation p{
  font-family: var(--font-openSans);
  text-transform: uppercase;
  font-weight: var(--font-800);
  font-size: min(2.24rem,5.24vw);
  padding-top: 16px;
}

.loading-logoAnimation img {
  animation: loadingZoom .3s cubic-bezier(.755,.05,.855,.06) 7.6s;
  animation-fill-mode: forwards;
  width: 63vh;
  position: relative;
}

@keyframes loadingZoom {
  0% {
    transform: scale(1);
  }
  100% {
    transform: translateY(-485%) scale(100);
    background: var(--color-purple);
  }
}

.loading-endSection{
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}


@media screen and (max-width: 521px){
  
  .loading-endSection{
    height: auto;
    padding: 90px 0;
  }

}


/*-----scroll  bg -----*/
.main-container {
  transition: all 0.5s ease 0s;
  position: relative;
  z-index: 0;
}

.main-bg {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: .08;
  background-image: url(./img/top/bg-logo.png);
  background-position: center;
  background-repeat: repeat;
  background-size: 32%;
}

.main-sec {
  width: 90%;
  padding: min(72px, 10vw) 0;
  margin: 0 auto;
}

.section-bg.show {
  opacity: 1;
}

.section-bg.show::before {
  opacity: 1;
}

.main-container:has(.section-bg001.is-show), 
.main-container:has(.section-bg005.is-show) {
  background: var(--color-purple);
}
.main-container:has(.section-bg002.is-show), 
.main-container:has(.section-bg006.is-show) {
  background: var(--color-orange);
}
.main-container:has(.section-bg003.is-show), 
.main-container:has(.section-bg008.is-show) {
  background: var(--color-black);
}
.main-container:has(.section-bg004.is-show), 
.main-container:has(.section-bg007.is-show) {
  background: var(--color-yg);
}


/*-----pc-side-menu-----*/
.pc-side-area {
  position: fixed;
  display: flex;
  gap: 500px;
  width: 100%;
  height: 100%;
}
.pc-side-area .left-area, .pc-side-area .right-area {
  width: 100%;
  position: relative;
}
.pc-side-area .left-area svg, .pc-side-area .right-area .right-area-inner {
  position: absolute;
  bottom: 0;
}

.pc-side-area .left-area svg {
  /* ↓エントリーあり */
  /* width: 75%;
  right: 55%;
  transform: translateX(50%); */
  /* ↓エントリーなし */
  width: 80%;
  right: 22%;
}
.pc-side-area .right-area .right-area-inner {
  width: 70%;
  left: 55%;
  bottom: -5.5%;
  transform: translateX(-50%);
}
.pc-side-area .right-area .right-area-inner .svg-box01 {
  width: 50%;
  margin: 0 0 2% auto;
}

/* human */
.main-container:has(.section-bg001.is-show) .svg-path-human path, 
.main-container:has(.section-bg005.is-show) .svg-path-human path {
  fill: var(--color-black);
}
.main-container:has(.section-bg002.is-show) .svg-path-human path, 
.main-container:has(.section-bg006.is-show) .svg-path-human path {
  fill: var(--color-white);
}
.main-container:has(.section-bg003.is-show) .svg-path-human path,
.main-container:has(.section-bg008.is-show) .svg-path-human path {
  fill: var(--color-yg);
}
.main-container:has(.section-bg004.is-show) .svg-path-human path, 
.main-container:has(.section-bg007.is-show) .svg-path-human path {
  fill: var(--color-orange);
}

/* ENTRY背景 */
.main-container:has(.section-bg001.is-show) .svg-text-entry polygon, 
.main-container:has(.section-bg005.is-show) .svg-text-entry polygon {
  fill: var(--color-orange);
}
.main-container:has(.section-bg002.is-show) .svg-text-entry polygon, 
.main-container:has(.section-bg006.is-show) .svg-text-entry polygon {
  fill: var(--color-yg);
}
.main-container:has(.section-bg003.is-show) .svg-text-entry polygon, 
.main-container:has(.section-bg008.is-show) .svg-text-entry polygon {
  fill: var(--color-white);
}
.main-container:has(.section-bg004.is-show) .svg-text-entry polygon, 
.main-container:has(.section-bg007.is-show) .svg-text-entry polygon {
  fill: var(--color-purple);
}

.main-container:has(.section-bg001.is-show) .svg-text-entry a:hover polygon, 
.main-container:has(.section-bg005.is-show) .svg-text-entry a:hover polygon {
  fill: var(--color-white);
}
.main-container:has(.section-bg002.is-show) .svg-text-entry a:hover polygon, 
.main-container:has(.section-bg006.is-show) .svg-text-entry a:hover polygon {
  fill: var(--color-purple);
}
.main-container:has(.section-bg003.is-show) .svg-text-entry a:hover polygon, 
.main-container:has(.section-bg008.is-show) .svg-text-entry a:hover polygon {
  fill: var(--color-yg);
}
.main-container:has(.section-bg004.is-show) .svg-text-entry a:hover polygon, 
.main-container:has(.section-bg007.is-show) .svg-text-entry a:hover polygon {
  fill: var(--color-black);
}

/* ENTRYテキスト */
.main-container:has(.section-bg001.is-show) .svg-text-entry text, 
.main-container:has(.section-bg005.is-show) .svg-text-entry text {
  fill: var(--color-white);
}
.main-container:has(.section-bg002.is-show) .svg-text-entry text, 
.main-container:has(.section-bg006.is-show) .svg-text-entry text {
  fill: var(--color-purple);
}
.main-container:has(.section-bg003.is-show) .svg-text-entry text, 
.main-container:has(.section-bg008.is-show) .svg-text-entry text {
  fill: var(--color-black);
}
.main-container:has(.section-bg004.is-show) .svg-text-entry text, 
.main-container:has(.section-bg007.is-show) .svg-text-entry text {
  fill: var(--color-yg);
}

.main-container:has(.section-bg001.is-show) .svg-text-entry a:hover text, 
.main-container:has(.section-bg005.is-show) .svg-text-entry a:hover text {
  fill: var(--color-orange);
}
.main-container:has(.section-bg002.is-show) .svg-text-entry a:hover text, 
.main-container:has(.section-bg006.is-show) .svg-text-entry a:hover text {
  fill: var(--color-yg);
}
.main-container:has(.section-bg003.is-show) .svg-text-entry a:hover text, 
.main-container:has(.section-bg008.is-show) .svg-text-entry a:hover text {
  fill: var(--color-purple);
}
.main-container:has(.section-bg004.is-show) .svg-text-entry a:hover text, 
.main-container:has(.section-bg007.is-show) .svg-text-entry a:hover text {
  fill: var(--color-white);
}

/* guide, sns背景 */
.main-container:has(.section-bg002.is-show) .svg-text-guide polygon, 
.main-container:has(.section-bg006.is-show) .svg-text-guide polygon, 
.main-container:has(.section-bg002.is-show) .svg-text-sns polygon, 
.main-container:has(.section-bg006.is-show) .svg-text-sns polygon {
  fill: var(--color-white);
}
.main-container:has(.section-bg003.is-show) .svg-text-guide polygon, 
.main-container:has(.section-bg008.is-show) .svg-text-guide polygon, 
.main-container:has(.section-bg003.is-show) .svg-text-sns polygon, 
.main-container:has(.section-bg008.is-show) .svg-text-sns polygon {
  fill: var(--color-purple);
}
.main-container:has(.section-bg004.is-show) .svg-text-guide polygon, 
.main-container:has(.section-bg007.is-show) .svg-text-guide polygon, 
.main-container:has(.section-bg004.is-show) .svg-text-sns polygon, 
.main-container:has(.section-bg007.is-show) .svg-text-sns polygon {
  fill: var(--color-orange);
}
.main-container:has(.section-bg005.is-show) .svg-text-guide polygon, 
.main-container:has(.section-bg005.is-show) .svg-text-sns polygon {
  fill: var(--color-yg);
}

.main-container:has(.section-bg001.is-show) .svg-text-guide:hover polygon, 
.main-container:has(.section-bg005.is-show) .svg-text-guide:hover polygon, 
.main-container:has(.section-bg001.is-show) .svg-text-sns:hover polygon, 
.main-container:has(.section-bg005.is-show) .svg-text-sns:hover polygon {
  fill: var(--color-orange);
}
.main-container:has(.section-bg002.is-show) .svg-text-guide:hover polygon, 
.main-container:has(.section-bg006.is-show) .svg-text-guide:hover polygon, 
.main-container:has(.section-bg002.is-show) .svg-text-sns:hover polygon, 
.main-container:has(.section-bg006.is-show) .svg-text-sns:hover polygon {
  fill: var(--color-purple);
}
.main-container:has(.section-bg003.is-show) .svg-text-guide:hover polygon, 
.main-container:has(.section-bg008.is-show) .svg-text-guide:hover polygon, 
.main-container:has(.section-bg003.is-show) .svg-text-sns:hover polygon, 
.main-container:has(.section-bg008.is-show) .svg-text-sns:hover polygon {
  fill: var(--color-white);
}
.main-container:has(.section-bg004.is-show) .svg-text-guide:hover polygon, 
.main-container:has(.section-bg007.is-show) .svg-text-guide:hover polygon, 
.main-container:has(.section-bg004.is-show) .svg-text-sns:hover polygon, 
.main-container:has(.section-bg007.is-show) .svg-text-sns:hover polygon {
  fill: var(--color-black);
}

/* guide, snsテキスト */
.main-container:has(.section-bg002.is-show) .svg-text-guide text, 
.main-container:has(.section-bg006.is-show) .svg-text-guide text, 
.main-container:has(.section-bg002.is-show) .svg-text-sns path, 
.main-container:has(.section-bg006.is-show) .svg-text-sns path {
  fill: var(--color-orange);
}
.main-container:has(.section-bg003.is-show) .svg-text-guide
text, 
.main-container:has(.section-bg008.is-show) .svg-text-guide
text, 
.main-container:has(.section-bg003.is-show) .svg-text-sns path,  
.main-container:has(.section-bg008.is-show) .svg-text-sns path {
  fill: var(--color-yg);
}
.main-container:has(.section-bg004.is-show) .svg-text-guide
text, 
.main-container:has(.section-bg007.is-show) .svg-text-guide text, 
.main-container:has(.section-bg004.is-show) .svg-text-sns path, 
.main-container:has(.section-bg007.is-show) .svg-text-sns path {
  fill: var(--color-white);
}
.main-container:has(.section-bg005.is-show) .svg-text-guide 
text, 
.main-container:has(.section-bg005.is-show) .svg-text-sns path {
  fill: var(--color-purple);
}

.main-container:has(.section-bg001.is-show) .svg-text-guide:hover text, 
.main-container:has(.section-bg005.is-show) .svg-text-guide:hover text, 
.main-container:has(.section-bg001.is-show) .svg-text-sns:hover path, 
.main-container:has(.section-bg005.is-show) .svg-text-sns:hover path {
  fill: var(--color-white);
}
.main-container:has(.section-bg002.is-show) .svg-text-guide:hover text, 
.main-container:has(.section-bg006.is-show) .svg-text-guide:hover text,
.main-container:has(.section-bg002.is-show) .svg-text-sns:hover path, 
.main-container:has(.section-bg006.is-show) .svg-text-sns:hover path {
  fill: var(--color-yg);
}
.main-container:has(.section-bg003.is-show) .svg-text-guide:hover text, 
.main-container:has(.section-bg008.is-show) .svg-text-guide:hover text,  
.main-container:has(.section-bg003.is-show) .svg-text-sns:hover path, 
.main-container:has(.section-bg008.is-show) .svg-text-sns:hover path {
  fill: var(--color-orange);
}
.main-container:has(.section-bg004.is-show) .svg-text-guide:hover text, 
.main-container:has(.section-bg007.is-show) .svg-text-guide:hover text,
.main-container:has(.section-bg004.is-show) .svg-text-sns:hover path, 
.main-container:has(.section-bg007.is-show) .svg-text-sns:hover path {
  fill: var(--color-white);
}

/* record */
.main-container:has(.section-bg001.is-show) svg.svg-record .record-color01 .record-color02, 
.main-container:has(.section-bg001.is-show) svg.svg-record .record-color01 text,  
.main-container:has(.section-bg005.is-show) svg.svg-record .record-color01 .record-color02, 
.main-container:has(.section-bg005.is-show) svg.svg-record .record-color01 text {
  fill: var(--color-orange);
}
.main-container:has(.section-bg002.is-show) svg.svg-record .record-color01 .record-color02, 
.main-container:has(.section-bg002.is-show) svg.svg-record .record-color01 text, 
.main-container:has(.section-bg006.is-show) svg.svg-record .record-color01 .record-color02, 
.main-container:has(.section-bg006.is-show) svg.svg-record .record-color01 text {
  fill: var(--color-yg);
}
.main-container:has(.section-bg003.is-show) svg.svg-record .record-color01 .record-color02, 
.main-container:has(.section-bg008.is-show) svg.svg-record .record-color01 .record-color02, 
.main-container:has(.section-bg003.is-show) svg.svg-record .record-color01 text, 
.main-container:has(.section-bg008.is-show) svg.svg-record .record-color01 text {
  fill: var(--color-white);
}
.main-container:has(.section-bg004.is-show) svg.svg-record .record-color01 .record-color02, 
.main-container:has(.section-bg004.is-show) svg.svg-record .record-color01 text, 
.main-container:has(.section-bg007.is-show) svg.svg-record .record-color01 .record-color02, 
.main-container:has(.section-bg007.is-show) svg.svg-record .record-color01 text {
  fill: var(--color-purple);
}

/* recordサイドのうにょうにょ */
.main-container:has(.section-bg001.is-show) svg.svg-record .record-color01 path.record-color03, 
.main-container:has(.section-bg002.is-show) svg.svg-record .record-color01 path.record-color03, 
.main-container:has(.section-bg004.is-show) svg.svg-record .record-color01 path.record-color03, 
.main-container:has(.section-bg005.is-show) svg.svg-record .record-color01 path.record-color03, 
.main-container:has(.section-bg006.is-show) svg.svg-record .record-color01 path.record-color03, 
.main-container:has(.section-bg007.is-show) svg.svg-record .record-color01 path.record-color03 {
  fill: var(--color-white);
}
.main-container:has(.section-bg003.is-show) svg.svg-record .record-color01 path.record-color03, 
.main-container:has(.section-bg008.is-show) svg.svg-record .record-color01 path.record-color03 {
  fill: var(--color-black);
}

/* record-text */
.main-container:has(.section-bg001.is-show) svg.svg-record .record-color01 path, 
.main-container:has(.section-bg001.is-show) svg.svg-record .record-color01 .record-color01-item, 
.main-container:has(.section-bg005.is-show) svg.svg-record .record-color01 path, 
.main-container:has(.section-bg005.is-show) svg.svg-record .record-color01 .record-color01-item {
  fill: var(--color-white);
}
.main-container:has(.section-bg002.is-show) svg.svg-record .record-color01 path, 
.main-container:has(.section-bg002.is-show) svg.svg-record .record-color01 .record-color01-item, 
.main-container:has(.section-bg006.is-show) svg.svg-record .record-color01 path, 
.main-container:has(.section-bg006.is-show) svg.svg-record .record-color01 .record-color01-item {
  fill: var(--color-purple);
}
.main-container:has(.section-bg003.is-show) svg.svg-record .record-color01 path, 
.main-container:has(.section-bg008.is-show) svg.svg-record .record-color01 path, 
.main-container:has(.section-bg003.is-show) svg.svg-record .record-color01 .record-color01-item, 
.main-container:has(.section-bg008.is-show) svg.svg-record .record-color01 .record-color01-item {
  fill: var(--color-black);
}
.main-container:has(.section-bg004.is-show) svg.svg-record .record-color01 path, 
.main-container:has(.section-bg004.is-show) svg.svg-record .record-color01 .record-color01-item, 
.main-container:has(.section-bg007.is-show) svg.svg-record .record-color01 path, 
.main-container:has(.section-bg007.is-show) svg.svg-record .record-color01 .record-color01-item {
  fill: var(--color-yg);
}

.main-container:has(.section-bg001.is-show) svg.svg-record .record-color01 a:hover path, 
.main-container:has(.section-bg005.is-show) svg.svg-record .record-color01 a:hover path {
  fill: var(--color-yg);
}
.main-container:has(.section-bg002.is-show) svg.svg-record .record-color01 a:hover path, 
.main-container:has(.section-bg006.is-show) svg.svg-record .record-color01 a:hover path {
  fill: var(--color-orange);
}
.main-container:has(.section-bg003.is-show) svg.svg-record .record-color01 a:hover path, 
.main-container:has(.section-bg008.is-show) svg.svg-record .record-color01 a:hover path {
  fill: var(--color-purple);
}
.main-container:has(.section-bg004.is-show) svg.svg-record .record-color01 a:hover path, 
.main-container:has(.section-bg007.is-show) svg.svg-record .record-color01 a:hover path {
  fill: var(--color-white);
}


@media screen and (max-width: 1200px){
  .pc-side-area {
    display: none;
  }
}



/* pc-bg-text */
.pc-bg-text-container {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  gap: 500px;
}

.-bg-text_right,
.-bg-text_left{
  position: relative;
  z-index: 10;
  overflow: hidden;
}

.loop_wrap p {
  white-space: nowrap;
  font-size: 5.24rem;
  line-height: 1;
  letter-spacing: 0.05em;
  font-family: var(--font-openSans);
  font-weight: var(--font-800);
  text-transform: uppercase;
  padding: 1.25rem 0;
  writing-mode: vertical-rl;
}

.-bg-text_right{
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

.-bg-text_right .loop_wrap:nth-child(odd) {
  animation: loop1-right 120s -60s linear infinite;
  -webkit-animation: loop1-right 120s -60s linear infinite;
}
.-bg-text_right .loop_wrap:nth-child(even) {
  animation: loop2-right 120s linear infinite;
  -webkit-animation: loop2-right 120s linear infinite;
}

.-bg-text_left .loop_wrap:nth-child(odd) {
  animation: loop1-left 120s -60s linear infinite;
  -webkit-animation: loop1-left 120s -60s linear infinite;
}
.-bg-text_left .loop_wrap:nth-child(even) {
  animation: loop2-left 120s linear infinite;
  -webkit-animation: loop2-left 120s linear infinite;
}

@keyframes loop1-right {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(200%);
    transform: translateY(200%);
  }
}
@keyframes loop2-right {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
}

@keyframes loop1-left {
  0% {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  100% {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
  }
}
@keyframes loop2-left {
  0% {
    transform: translateY(-200%);
  }
  100% {
    transform: translateY(0%);
  }
}

@media screen and (max-width: 769px){
  .pc-bg-text {
    display: none;
  }
  
}

/*----- mobile contents -----*/
.main-inner {
  background: var(--color-white);
  border-left: solid 1px #eaf7cd;
  border-right: solid 1px #eaf7cd;
  width: 500px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

small.copyRight {
  font-family: var(--font-paytone);
  position: fixed;
  writing-mode: tb;
  bottom: 2vh;
  left: 2vw;
  animation-duration: 1s;
  animation-delay: 2.2s;
  animation-name: fadeAnime;
  animation-fill-mode: forwards;
  opacity: 0;
  z-index: 1;
}

.deskTop-contents {
  display: none;
}


/*--------------
  header
--------------*/
.header-container {
  position: fixed;
  z-index: 6;
  max-width: 100%;
  width: 499px;
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100px;
}

.header-container h1 {
  width: 125px;
  margin-left: 5%;
  transition: .3s;
}
.header-container h1:hover {
  opacity: .7;
}
.header-container h1 a {
  display: block;
}

.top-menu-items {
  display: flex;
  gap: 5px;
  align-items: center;
  margin-right: 5%;
}

.header-container .menu-button {
  width: 65px;
  cursor: pointer;
}
.header-container .menu-button:hover {
  animation:2s linear infinite rotation;
}
@keyframes rotation {
  0% { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}

.header-container .top-instagram-button a:hover {
  opacity: 0.7;
}
.header-container .top-instagram-button {
  width: 65px;
}

.header-container .top-entry-button {
  width: 110px;
}
.header-container .top-entry-button a {
  background-color: var(--color-orange);
  color: var(--color-white);
  text-align: center;
  font-size: 18px;
  display: block;
  width: 100%;
  border-radius: 9999px;
  padding: 5px 0;
}
.header-container .top-entry-button a:hover {
  color: var(--color-orange);
  background-color: var(--color-white);
}

/* モバイルメニュー */

.openbtn {
  z-index: 11;
}

#g-nav{
  position: fixed;
  z-index: 10;
  top: 0;
  width: 498px;
  height: 100vh;
  background-color: var(--color-yg);
  transition: all 0.6s;
  opacity: 0;
  visibility: hidden;
}

#g-nav.panelactive{
  opacity: 1;
  visibility: inherit;
  overflow: auto;
}

.g-nav_wrapper {
  position: relative;
  height: 100%;
  overflow-x: auto;
}

.g-nav_wrapper .contents{
  margin-top: min(124px, 34vw);
  margin-bottom: 32px;
}

.hamburger-deco {
  position: absolute;
  width: 320px;
  right: -20%;
  bottom: -10%;
}

.menu-top-button {
  width: 25%;
  margin: 0 auto;
}
.menu-top-button a {
  display: block;
}

#g-nav ul {
  width: 50%;
  margin: 30px auto 0;
}
#g-nav ul li {
  margin: 20px 0;
  border: 2px solid var(--color-purple);
  border-radius: 9999px;
  background-color: var(--color-white);
  /* -webkit-box-shadow: 0 6px 0 var(--color-purple); */
  box-shadow: 0 6px 0 var(--color-purple);
}
#g-nav ul li a {
  display: block;
  padding: 5px 0;
  text-align: center;
  font-size: min(2.24rem,4.83vw);
  font-family: "Open Sans", "Zen Kaku Gothic Antique", sans-serif;
  font-weight: var(--font-800);
}
/* #g-nav ul li:last-child {
  border: 2px solid var(--color-orange);
  box-shadow: 0 6px 0 var(--color-orange);
}
#g-nav ul li:last-child a {
  color: var(--color-orange);
} */

#g-nav .hamburger-insta-area {
  width: min(75%, 327px);
  margin: 40px auto 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
#g-nav .hamburger-insta-area .hamburger-insta-inner {
  width: 50%;
}
#g-nav .hamburger-insta-area .hamburger-insta-inner a {
  display: block;
  width: 64%;
  margin: 0 auto;
}
#g-nav .hamburger-insta-area .hamburger-insta-text {
  font-size: 1.2rem;
  line-height: 1.4;
  color: var(--color-purple);
  text-align: center;
  letter-spacing: 0.05em;
  padding-top: 6px;
}
#g-nav .hamburger-insta-area .hamburger-insta-deco {
  transform: translateX(-20px);
  width: 50%;
}


@media screen and (max-width: 769px){
  
  .header-container {
    width: 100%;
  }
  
  .header-container h1 {
    width: 90px;
  }
  .header-container .top-entry-button {
    width: 80px;
  }
  .header-container .top-entry-button a {
    font-size: 14px;
  }
  .header-container .top-instagram-button {
    width: 50px;
  }
  .header-container .menu-button {
    width: 50px;
  }

  #g-nav {
    width: 100%;
  }
  
}

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

  .header-inner {
    height: 80px;
  }
  
  .menu-top-button {
    width: 30%;
  }
  #g-nav ul {
    width: 60%;
    margin: 20px auto 0;
  }
  #g-nav ul li {
    margin: 15px 0;
  }

  #g-nav .hamburger-insta-area {
    width: 70%;
    margin: 25px auto;
  }
  #g-nav .hamburger-insta-area .hamburger-insta-inner {
    width: 60%;
  }
  #g-nav .hamburger-insta-area .hamburger-insta-deco {
    transform: translateX(-20px);
    width: 50%;
  }
  
}

/*--------------
KV
--------------*/

.KV-logo {
  width: min(46vh, 88%);
  position: relative;
  display: block;
  margin: auto;
}

img.-logo_hi {
  position: absolute;
  width: 30%;
  left: 2%;
  top: 28%;
}

.-logo_mainZoomIn.is-loadActive {
  animation: _mainZoomIn .6s cubic-bezier(.755,.05,.855,.06) 8.2s normal forwards;
  background: var(--color-purple);
  transform: translateY(328%) scale(35);
}
@keyframes _mainZoomIn {
  0% {
    background: var(--color-purple);
    transform: translateY(328%) scale(35);
  }

  100% {
    background: none;
    transform: translateY(0) scale(1);
  }
}

.-logo_hiZoomIn.is-loadActive {
  animation: _hiZoomIn .3s cubic-bezier(.755,.05,.855,.06) 8.8s normal forwards;
  opacity: 0;
}
@keyframes _hiZoomIn {
  0% {
    opacity: 0;
    transform: scale(2);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.-header_ZoomIn.is-loadActive {
  animation: _headerZoomIn .3s cubic-bezier(.755,.05,.855,.06) 9s normal forwards;
  opacity: 0;
}
@keyframes _headerZoomIn {
  0% {
    opacity: 0;
    transform: scale(2);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@media screen and (max-width: 769px){
  
  #loading{
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
  }
  .loading-logoAnimation img{
    width: 100%;
    display: block;
  }
  
}

@media screen and (max-width: 521px){
  
  .KV {
    height: auto;
  }
  .KV-logo {
    width: 80%;
    position: relative;
  }
  #loading{
    width: 120%;
  }
  
}

/* スライド（動き） */

.slide_left, .slide_left02, .slide_right, .slide_right02, .slide_bottom {
  opacity: 0;
}
.anime-slide-left {
  animation-name: slide_left;
  animation-duration: .2s;
  animation-fill-mode: forwards;
  opacity: 0;
}
.anime-slide-left02 {
  animation-name: slide_left02;
  animation-duration: .2s;
  animation-fill-mode: forwards;
  animation-delay: .1s;
  opacity: 0;
}
.anime-slide-right {
  animation-name: slide_right;
  animation-duration: .2s;
  animation-fill-mode: forwards;
  opacity: 0;
}
.anime-slide-right02 {
  animation-name: slide_right02;
  animation-duration: .2s;
  animation-fill-mode: forwards;
  animation-delay: .1s;
  opacity: 0;
}
.anime-slide-bottom {
  animation-name: slide_bottom;
  animation-duration: .25s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes slide_left {
  0% {
    opacity: 0;
    transform: translate(100px, -100px);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}
@keyframes slide_left02 {
  0% {
    opacity: 0;
    transform: translate(100px, -100px) rotate(340deg);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(340deg);
  }
}
@keyframes slide_right {
  0% {
  opacity: 0;
  transform: translate(-100px, 100px);
  }
  100% {
  opacity: 1;
  transform: translate(0, 0);
  }
}
@keyframes slide_right02 {
  0% {
  opacity: 0;
  transform: translate(-100px, 100px) rotate(340deg);
  }
  100% {
  opacity: 1;
  transform: translate(0, 0) rotate(340deg);
  }
}
@keyframes slide_bottom {
  0% {
    opacity: 0;
    transform: translateY(100px);
  }
  100% {
    opacity: 1;
    transform: translateY(1px);
  }
}

/* ふわっと出現 */

.anime-fade-in {
  animation-name: fade-in;
  animation-duration: .3s;
  animation-fill-mode: forwards;
  animation-delay: .3s;
  opacity: 0;
}
@keyframes fade-in {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

/* ズームアップ */

.scroll-zoom-in {
  opacity: 0;
}
.anime-scroll-zoom-in {
  animation: scroll-zoomIn 0.7s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  opacity: 0;
}
 
@keyframes scroll-zoomIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ボタンの動き */

.giza-button a polygon, .giza-button a text, .giza-button a text tspan {
  transition: fill 0.3s ease;
}
.giza-button a text, .giza-button a text tspan {
  font-family: var(--font-openSans);
  font-weight: var(--font-800);
}

.hover-katakata:hover {
  animation: katakata 0.3s;
}
@keyframes katakata {
  0% {
    transform: rotate(0deg);
  }
  33% {
    transform: rotate(10deg);
  }
  66% {
    transform: rotate(-10deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

/* h2の動き */

.sec-container .anime-slide-title {
  animation-name: slide-title;
  animation-duration: .35s;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes slide-title {
  0%  {
    opacity: 0;
    transform: translateX(200px);
  }
  50% {
    opacity: 1;
    transform: translateX(-40px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}


/* ---------------
共通CSS 
---------------*/

/* 背景ななめ */
.triangle-bg01 {
  position: relative;
}

.side-border {
  align-items: center;
  display: flex; /* 文字と線を横並び */
  justify-content: center; /* 文字を中央寄せ */
  text-align: center;
}

.side-border::before,
.side-border::after {
  background-color: var(--color-purple); /* 線の色 */
  content: "";
  height: 3px; /* 線の高さ */
  width: 30px; /* 線の長さ */
}
.side-border::before {
  margin-right: 10px; /* 文字との余白 */
  transform: rotate(60deg); /* 傾ける */
}
.side-border::after {
  margin-left: 10px; /* 文字との余白 */
  transform: rotate(-60deg); /* 傾ける */
}


/*--------------
first-sec
--------------*/
.section-bg001 {
  background-color: var(--color-yg);
}

.first-sec {
  padding: 0 0 0;
}

/* content01 */

.first-sec {
  width: 100%;
}

.first-sec .content01 {
  position: relative;
  top: -5vh;
  /* 優勝賞品決定前 */
  padding-bottom: 20px;
}

.first-sec .content01 .content01-inner {
  position: relative;
}
.first-sec .content01 .content01-inner p {
  position: absolute;
  transform: rotate(340deg);
  z-index: 1;
  border-radius: 9999px;
  font-size: 26px;
  padding: 8px 20px 10px;
}

.first-sec .content01 .content01-inner:first-child div {
  width: 70%;
  margin: 0 auto 0 6%;
}

.first-sec .content01 .content01-inner .deco {
  position: absolute;
}
.first-sec .content01 .content01-inner:first-child .deco:first-of-type {
  width: 27%;
  top: 14%;
  right: 8%;
  opacity: 0;
}
.first-sec .content01 .content01-inner:first-child .deco:nth-of-type(2) {
  width: 14%;
  top: 57%;
  left: 0;
  opacity: 0;
}


.first-sec .content01 .content01-inner:nth-child(2) div {
  width: 62%;
  margin: -17% 5% 0 auto;
}
.first-sec .content01 .content01-inner:nth-child(2) p {
  top: 26%;
  left: 24%;
  background-color: var(--color-yg);
  color: var(--color-orange);
}

.first-sec .content01 .content01-inner:nth-child(2) .deco:first-of-type {
  width: 26%;
  bottom: 15%;
  left: 12%;
  opacity: 0;
}
.first-sec .content01 .content01-inner:nth-child(2) .deco:nth-of-type(2) {
  /* 優勝賞品決定前 */
  display: none;

  width: 10%;
  right: 8%;
  bottom: -16%;
  opacity: 0;
}

/* content02 */

.first-sec .content02 {
  /* 優勝賞品決定前 */
  display: none;

  width: 90%;
  margin: -5% auto 0;
  position: relative;
}
.first-sec .content02 img:first-child {
  position: absolute;
  width: 40%;
  top: -12%;
  left: 4%;
  z-index: 1;
}

.event-wanted{
  width: 90%;
  margin: 0 auto;
  padding-bottom: 24px;
}


@media screen and (max-width:768px) {
  
  /*--------------*/
  /*  content01
  /*--------------*/

  .first-sec {
    padding: 0 0 0;
  }

  .first-sec .content01 .content01-inner p {
    font-size: 5vw;
    padding: 5px 20px 5px;
  }

}


@media screen and (max-width:521px) {
  /*--------------*/
  /*  content01
  /*--------------*/
  /*.first-sec {
    padding-top: 80px;
  }*/

  /*.first-sec .content01 {
     優勝賞品決定前 
     top: -18vh;
  }*/

  /*--------------*/
  /*  content02
  /*--------------*/
  .first-sec .content02 {
    margin: -26% auto 0;
  }

}


/*--------------
news,concept
--------------*/
.section-bg002 {
  position: relative;
  z-index: 2;
  background-color: var(--color-black);
}
.section-bg002::before {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  bottom: -11vw;
  z-index: -1;
  border-bottom: 6vw solid transparent;
  border-right: 60vw solid transparent;
  border-left: 60vw solid var(--color-black);
  border-top: 6vw solid var(--color-black);
}

/* news */

.news h2 {
  width: 42%;
  margin: 0 auto;
  opacity: 0;
}

#js-topNews .inner {
  width: 85%;
  margin: 25px auto 0;
}

.news-list a {
  display: flex;
  gap: 1.2em;
  border-bottom: 1px solid var(--color-white);
  padding: 20px 0;
  color: var(--color-white);
  font-weight: var(--font-400);
}

.news-list a:hover,
.news-list a:hover {
  color: var(--color-orange);
}

.news-more-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 110px;
  height: 110px;
  margin-top: 20px;
  color: var(--color-white);
  font-size: 15px;
  font-family: var(--font-openSans);
  font-weight: var(--font-800);
  background: url(./img/top/news-more.svg) center center no-repeat;
  background-size: contain;
}
.news-more-button:hover {
  color: var(--color-orange);
  background: url(./img/top/news-more-hover.svg) center center no-repeat;
  background-size: contain;
}

.overLimit.js-limitShow{
	display:block;
  transition: ease .5s;
}
.overLimit {
  display: none;
	transition: ease .5s;
}

.news-border {
  width: 100%;
  margin: 0 auto;
  border: 2px solid var(--color-white);
  position: relative;
  left: 50%;
  transform: translateX(-50%) rotate(-6deg);
}

/* concept */
.concept h2 {
  width: 55%;
  margin: 0 auto;
  opacity: 0;
}
.concept .main-text {
  text-align: center;
  padding-top: 50px;
  line-height: 2.25;
  opacity: 0;
}
.concept .main-text span {
  color: var(--color-yg);
  font-size: 120%;
  padding-right: 0.5%;
}
.concept .main-text:nth-of-type(2) {
  padding: 30px 0 0;
}


@media screen and (max-width:521px) {
  
  /*--------------*/
  /*  news
  /*--------------*/
  .news-list a {
    flex-wrap: wrap;
    gap: 5px;
  }
  .news-list dt, .news-list dd {
    width: 100%;
  }

  .concept {
    padding-top: 70px;
  }

}


/*--------------
movie
--------------*/
.section-bg003 {
  background-color: var(--color-orange);
}

.section-bg004::before, 
.section-bg007::before {
  content: "";
  position: absolute;
  left: 0;
  top: -11vw;
  z-index: 2;
  border-top: 6vw solid transparent;
  border-left: 62vw solid transparent;
  border-right: 62vw solid var(--color-purple);
  border-bottom: 6vw solid var(--color-purple);
}

.movie{
  position: relative;
  padding-top: 80.8%;
}

.movie::before{
  position: absolute;
  content: "";
  background: rgba(0,0,0,.4);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
}

.movie-thumbnail{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

button.movie-button{
  border: solid 1px var(--color-white);
  background: transparent;
  border-radius: 50%;
  display: flex;
  -webkit-display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: min(32vw, 160px);
  height: min(32vw, 160px);
  appearance: none;
  -webkit-appearance: none;
  color: inherit;
  cursor: pointer;
  transition: ease .5s;
}

button.movie-button:hover{
  transform: translate(-50%, -50%) scale(1.06);
}

button.movie-button span{
  content: "";
  background-color: var(--color-white);
  -webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%);
  clip-path: polygon(0 0, 0% 100%, 100% 50%);
  width: min(5vw, 24px);
  height: min(5vw, 24px);
}

.mfp-container .mfp-content{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.mfp-iframe-holder .mfp-content{
  width: 92%!important;
}

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

}


/*--------------
judgeMan
--------------*/
.section-bg004 {
  background-color: var(--color-purple);
}
.section-bg005::before {
  content: "";
  position: absolute;
  left: 0;
  top: -11.2vw;
  z-index: 2;
  border-top: 6vw solid transparent;
  border-left: 60vw solid transparent;
  border-right: 60vw solid var(--color-yg);
  border-bottom: 6vw solid var(--color-yg);
}

.judgeMan h2 {
  width: 75%;
  margin: 0 auto;
  opacity: 0;
}

.judgeMan-inner {
  position: relative;
  margin: 85px 0;
}
.judgeMan-inner .judge-ab {
  position: absolute;
}

.judgeMan-name {
  width: 40%;
  top: -8%;
  left: 0;
}
.judgeMan-inner:nth-of-type(even) .judgeMan-name {
  right: 0;
  left: initial;
}

.judgeMan-img {
  width: 90%;
  margin: 0 auto;
}

.judgeMan-text {
  font-size: min(20px,4.24vw);
  text-align: center;
  width: min(180px, 40vw);
  padding: min(10px, 2vw) 0 min(16px, 2.24vw);
  color: var(--color-white);
  border-radius: 9999px;
  transform: rotate(-20deg);
  transition: 0.5s;
}
.judgeMan-inner:nth-of-type(2) .judgeMan-text {
  transform: rotate(20deg);
}

.judgeMan-text:first-of-type {
  background-color: var(--color-orange);
  bottom: 21%;
}
.judgeMan-inner:nth-of-type(2) .judgeMan-text:first-of-type {
  right: 0%;
  transform: rotate(20deg);
}
.judgeMan-inner:nth-of-type(3) .judgeMan-text:first-of-type {
  bottom: 11%;
  background-color: var(--color-yg);
}

.judgeMan-text:nth-of-type(2) {
  background-color: var(--color-yg);
  left: 3%;
  bottom: 6%;
}
.judgeMan-inner:nth-of-type(2) .judgeMan-text:nth-of-type(2) {
  right: 3%;
  left: initial;
}

.judgeMan-text:hover {
  background-color: var(--color-white);
}
.judgeMan-text:first-of-type:hover {
  color: var(--color-orange);
}
.judgeMan-text:nth-of-type(2):hover {
  color: var(--color-yg);
}

.judgeMan-inner:nth-of-type(3) .judgeMan-text:first-of-type:hover {
  background-color: var(--color-white);
  color: var(--color-yg);
}

/* judgeMan-popup */

/* モーダルを開くボタン */
.judgeMan-popup .modal__trigger {
  cursor: pointer;
}

.judgeMan-popup2 .modal__trigger2 {
  cursor: pointer;
}
.judgeMan-popup2 .modal__trigger2:nth-child(n + 2) {
  margin-top: 60px;
}

.judgeMan-popup3 .modal__trigger3 {
  cursor: pointer;
}
.judgeMan-popup3 .modal__trigger3:nth-child(n + 2) {
  margin-top: 60px;
}


/* モーダル本体 */
.modal__wrapper {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
}

.modal__layer {
  height: 100%;
  background: rgba(50, 50, 50, .85);
  cursor: pointer;
}

.modal__container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 450px;
  width: 90%;
  height: 80%;
  padding: 10px;
  border-radius: 20px;
}
.modal__wrapper01 .modal__container {
  background: var(--color-orange);
  height: auto;
}
.modal__wrapper02 .modal__container {
  background: var(--color-yg);
}

.modal__inner {
  position: relative;
  height: 100%;
  padding: 50px min(20px, 4vw) 20px;
  overflow-y: scroll;
}
.modal__wrapper01 .modal__inner {
  padding: 20px min(20px, 4vw);
}

/* モーダル内のスクロールバー */
.modal__inner::-webkit-scrollbar {
  width: 0; /* スクロールバーを非表示にする */
}

/* スクロールバーのトラック */
.modal__inner::-webkit-scrollbar-track {
  background: transparent; /* スクロールバーのトラックを透明にする */
}

/* スクロールバーのスクロール部分 */
.modal__inner::-webkit-scrollbar-thumb {
  background: #888; /* スクロールバーのスクロール部分の色 */
  border-radius: 10px; /* スクロールバーの角を丸くする */
}

/* モーダルを閉じるボタン */
.modal__close {
  position: fixed;
  top: 5px;
  right: 5px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  transition: opacity .6s;
}
.modal__wrapper01 .modal__close {
  background-color: var(--color-orange);
}
.modal__wrapper02 .modal__close {
  background-color: var(--color-yg);
}

.modal__close:hover {
  opacity: .6;
}

.modal__close:before, 
.modal__close:after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 3px;
  content: '';
}
.modal__wrapper01 .modal__close:before, 
.modal__wrapper01 .modal__close:after {
  background: var(--color-white);
}
.modal__wrapper02 .modal__close:before, 
.modal__wrapper02 .modal__close:after {
  background: var(--color-purple);
}

.modal__close:before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.modal__close:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* モーダル内のコンテンツ */
.modal__wrapper02 .modal__content {
  color: var(--color-purple);
}

.modal__img {
  width: 75%;
  margin: 0 auto;
}

.modal__title {
  margin: 8px auto 0;
  text-align: center;
  font-size: 40px;
  font-weight: var(--font-900);
}

.modal__text {
  margin-top: 10px;
  font-size: min(1.6rem,3.83vw);
}
.modal__text .career-box {
  font-size: min(1.4rem,3.24vw);
}
.modal__text .career-box div {
  text-align: center;
  padding-bottom: 8px;
}

.modal__wrapper01 .modal__title {
  font-size: 30px;
  margin-bottom: 30px;
}
.modal__wrapper01 .modal__text_message p {
  margin-bottom: 10px;
}
.modal__wrapper02 .career-box2 dl {
  margin-top: 32px;
}
.modal__wrapper02 .career-box2 p{
  margin-top: 32px;
}
.modal__wrapper02 .career-box2 dl dt {
  font-weight: var(--font-800);
  font-size: 1.83rem;
  margin-bottom: 4px;
}
.modal__wrapper02 .career-box2 dl dd li::before {
  content: "・";
}
.modal__wrapper02 .career-box2 dl dd li {
  text-indent: -1em;
  padding-left: 1em;
  padding-bottom: 4px;
  letter-spacing: 0.05em;
}

.modal-link {
  display: flex;
  padding-bottom: 4px;
  font-size: min(1.34rem,3.24vw);
}
.modal-link a {
  font-family: "Open Sans", "Zen Kaku Gothic Antique", sans-serif;
  font-weight: 800;
  text-align: center;
  text-decoration: underline;
  background: url(./img/top/link.svg) right center no-repeat;
  background-size: min(14px, 3.24vw);
  padding-right: 18px;
}
.modal-link a:hover{
  opacity: 0.6;
}

.modal-socialLink{
  margin-top: 48px;
}

/* ↑ここまでjudgeMan-popup */

.judgeMan-info {
  width: 45%;
  right: 0;
  bottom: 0;
  transition: 0.3s;
}
.judgeMan-info:hover {
  transform: scale(1.1);
}
.judgeMan-inner:nth-of-type(even) .judgeMan-info {
  left: 0;
}

.judgeMan-inner .deco {
  position: absolute;
}
.judgeMan .judgeMan-inner:nth-of-type(1) .deco {
  width: 18%;
  top: -5%;
  right: 8%;
}
.judgeMan .judgeMan-inner:nth-of-type(2) .deco, 
.judgeMan .judgeMan-inner:nth-of-type(4) .deco {
  width: 16%;
  top: -5%;
  left: 8%;
}
.judgeMan .judgeMan-inner:nth-of-type(3) .deco, 
.judgeMan .judgeMan-inner:nth-of-type(5) .deco {
  width: 20%;
  top: -5%;
  right: 6%;
}


@media screen and (max-width:521px) {
  
  /*--------------*/
  /*  judgeMan
  /*--------------*/
  .judgeMan-inner {
    margin: 60px 0;
  }

  .modal__title {
    font-size: 35px;
  }

}


/*--------------
information
--------------*/

.section-bg005 {
  background-color: var(--color-yg);
  color: var(--color-purple);
}
.section-bg006::before {
  content: "";
  position: absolute;
  left: 0;
  top: -11.5vw;
  z-index: 2;
  border-top: 6vw solid transparent;
  border-left: 60vw solid transparent;
  border-right: 60vw solid var(--color-black);
  border-bottom: 6vw solid var(--color-black);
}

.information .info-inner {
  margin-bottom: 100px;
}
.information .info-inner:last-child {
  margin-top: 80px;
}
.information .info-inner h2 {
  width: 75%;
  margin: 0 auto;
}
.information .info-inner h2.slide_bottom {
  animation-duration: .35s;
  margin-bottom: 8%;
}


/* アコーディオン */

.info-ac-title {
  position: relative;
  cursor: pointer;
  transition: all .5s ease;
  background-color: var(--color-purple);
  color: var(--color-white);
  max-width: 300px;
  width: 80%;
  margin: 50px auto 0;
  border-radius: 9999px;
  padding: 3%;
  font-size: min(1.83rem,3.75vw);
  text-align: center;
}
.info-ac-title:hover {
  background-color: var(--color-white);
  color: var(--color-purple);
}

/*アイコンの＋と×*/
.info-ac-title::before, 
.info-ac-title::after {
  position: absolute;
  content: '';
  width: 10px;
  height: 2px;
  background-color: var(--color-white);
}
.info-ac-title:hover::before, 
.info-ac-title:hover::after {
  background-color: var(--color-purple);
}
.info-ac-title::before {
  top: 50%;
  right: 35px;
  transform: rotate(45deg);
}
.info-ac-title::after {
  top: 50%;
  right: 29px;
  transform: rotate(-45deg);
}
/*closeというクラスがついたら形状変化*/
.info-ac-title.close::before {
transform: rotate(-45deg);
}

.info-ac-title.close::after {
transform: rotate(45deg);
}

/*アコーディオンで現れるエリア*/
.info-table01 {
  display: none;/*はじめは非表示*/
  padding: 20px 30px;
}


/* table */
.info-inner table {
  width: 90%;
  margin: 50px auto 24px;
}
#match01 table {
  margin: 30px auto 24px;
}

.info-table tr th,
.info-table tr td {
  border-bottom: 1px solid var(--color-white);
}

.info-table tr:last-of-type th,
.info-table tr:last-of-type td{
  border-bottom: none;
}

.info-table tr th {
  border-right: 1px solid var(--color-white);
  width: 18%;
  padding: 20px 10px;
  line-height: 1.2;
  vertical-align: top;
}
.info-table tr th span {
  display: block;
}

.info-table tr th {
  width: 56px;
}

.info-table tr td {
  width: calc(100% - 56px);
  font-weight: var(--font-800);
  padding: 20px 0 20px 12px;
  font-size: min(1.83rem,3.75vw);
  letter-spacing: 0.05em;
}

.table-contentsInner{
  margin-bottom: 12px;
}
.table-contentsInner:last-of-type{
  margin-bottom: 0;
}

a.table-yoichiLink {
  display: inline-block;
  background: var(--color-white);
  margin: 5px 0 5px;
  border-radius: 5px;
  padding: 2px 8px;
  font-size: min(1.4rem,3.4vw);
}
a.table-yoichiLink::before {
  content: "▶";
}
a.table-yoichiLink:hover{
  background: var(--color-purple);
  color: var(--color-white);
}

span.table-supplementText{
  font-size: min(1.6rem,3.4vw);
}


.table-department {
  display: inline-block;
  font-size: 15px;
  color: var(--color-white);
  background-color: var(--color-purple);
  margin-bottom: 6px;
  border-radius: 5px;
  padding: 2px 12px;
}
.info-table02 .table-department {
  background-color: var(--color-orange);
}

div.-large-note_step{
  font-size: min(1.4rem,3.24vw);
  margin-top: 8px;
}

div.-large-note_step ol li{
  text-indent: -1em;
  padding-bottom: 4px;
  padding-left: 1em;
}

table.info-table ins {
  text-decoration: none;
  color: var(--color-orange);
}

p.guide-contactText{
  text-align: center;
  margin-bottom: 50px;
  font-size: min(1.6rem,3.5vw);
  letter-spacing: 0;
  color: var(--color-orange);
}

p.guide-contactText a{
  text-decoration: underline;
  font-weight: var(--font-800);
  color: var(--color-orange);
}
p.guide-contactText a:hover{
  opacity: 0.6;
}

p.guide-text {
  color: var(--color-orange);
}
p.guide-text::before, p.guide-text::after {
  background-color: var(--color-orange);
}

.guide-button {
  width: 60%;
  margin: 16px auto 0;
}
.guide-button svg polygon {
  fill: var(--color-orange);
}
.guide-button svg path {
  fill: var(--color-white);
}
.guide-button svg a:hover polygon {
  fill: var(--color-white);
}
.guide-button svg a:hover path {
  fill: var(--color-orange);
}

.info-border {
  width: 80%;
  margin: 0 auto;
  border: 2px solid var(--color-white);
  transform: rotate(-6deg);
}

.info-inner .info-table02 tr {
  color: var(--color-orange);
}

/*--------------
entry
--------------*/
.section-bg006 {
  background-color: var(--color-black);
  position: relative;
}
.entry {
  position: relative;
  padding-bottom: 50px;
}
.entry .entry-button, .entry .entry-deco {
  position: absolute;
}
.entry .entry-button {
  width: 70%;
  top: -24%;
  left: 5%;
  z-index: 2;
}

.entry .entry-text {
  padding: 34% 0 0 12%;
  /* visibility: hidden; */
}
.entry .entry-text p {
  font-size: 14px;
  color: var(--color-orange);
  text-indent: -1em;
  padding-left: 1em;
}
.entry .entry-text p:before {
  content: "※";
}
.entry .entry-text p a {
  color: var(--color-orange);
  text-decoration: underline;
}
.entry .entry-text p a:hover{
  opacity: 0.6;
}

.entry .entry-deco {
  width: 52%;
  right: -2%;
  bottom: 0;
}

@media screen and (min-width: 769px){
  .info-table tr th {
    width: 78px;
  }

  .info-table tr td{
    width: calc(100% - 78px);
  }

  .section-bg002::before {
    bottom: -64px;
    border-bottom:32px solid transparent;
    border-right: 250px solid transparent;
    border-left: 250px solid var(--color-black);
    border-top: 32px solid var(--color-black);
  }

  .section-bg004::before, 
  .section-bg007::before {
    top: -62.4px;
    border-top: 32px solid transparent;
    border-left: 248px solid transparent;
    border-right: 250px solid var(--color-purple);
    border-bottom: 32px solid var(--color-purple);
  }

  .section-bg005::before {
    top: -63px;
    border-top: 32px solid transparent;
    border-left: 248px solid transparent;
    border-right: 250px solid var(--color-yg);
    border-bottom: 32px solid var(--color-yg);
  }

  .section-bg006::before {
    top: -63px;
    border-top: 32px solid transparent;
    border-left: 248px solid transparent;
    border-right: 250px solid var(--color-black);
    border-bottom: 32px solid var(--color-black);
  }
}

@media screen and (max-width: 769px){
  .entry .entry-button {
    width: 65%;
  }
  .entry .entry-text {
    padding: 36% 0 0 10%;
  }
  .entry .entry-text p {
    font-size: 3vw;
  }
  
}

@media screen and (max-width: 521px){
  
  .entry .entry-text {
    padding: 30% 0 0 6%;
  }
  .entry .entry-text p {
    width: 40%;
    font-size: 3.5vw;
  }
  .entry .entry-deco {
    width: 55%;
  }
  
}


/*--------------
sns
--------------*/

.section-bg007 {
  background-color: var(--color-purple);
  position: relative;
  z-index: 2;
}

.sns h2 {
  width: 35%;
  margin: 0 auto;
  opacity: 0;
}


.sns .sns-inner {
  margin: 28px auto 10px;
}

.sns .sns-text {
  font-size: 20px;
  text-align: center;
  color: var(--color-white);
  font-weight: var(--font-800);
  margin-bottom: 30px;
}
.sns .sns-text span {
  display: block;
}

.sns .sns-button {
  width: 40%;
  margin: 0 auto;
}

.sns-button a:hover polygon {
  fill: var(--color-orange);
}
.sns-button a:hover text tspan {
  fill: var(--color-white);
}


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

  .sns .sns-text {
    font-size: 16px;
  }
  
}


/*--------------
notes
--------------*/

#popup {
  display: none; /* label でコントロールするので input は非表示に */
}

.popup-open {
  cursor: pointer;
  color: var(--color-orange);
  text-align: center;
  font-size: 22px;
  margin: 0 auto 40px;
  border: 2px solid var(--color-orange);
  border-radius: 5px;
  padding: 10px;
  display: block;
  width: 85%;
  transition: 0.3s;
  position: relative;
  z-index: 1;
}
.popup-open:hover {
  color: var(--color-white);
  background-color: #ff6b3d;
}

.popup-overlay {
  display: none; /* input にチェックが入るまでは非表示に */
}

#popup:checked ~ .popup-overlay {
  display: block;
  z-index: 99999;
  background-color: #00000070;
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
}

.popup-window {
  width: 90%;
  max-width: 450px;
  padding: 30px;
  background-color: #ffffff;
  border-radius: 6px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.popup-text {
  margin: 0;
  color: var(--color-orange);
}
.popup-first-text {
  font-size: 18.5px;
  font-weight: var(--font-800);
  margin-bottom: 1em;
}
.popup-text li {
  font-size: 16px;
  text-indent: -9px;
  padding-left: 1em;
  margin-bottom: 10px;
}
.popup-text li:last-child {
  margin-bottom: 0;
}
.popup-text li:before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 100%;
  transform: translate(-2px, -3.5px);
  background: var(--color-orange);
}

.popup-text:not(:last-of-type) {
  margin-bottom: 1em
}

.popup-close {
  cursor: pointer;
  position: absolute;
  top: -26px;
  right: 0;
}

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

  .popup-open {
    font-size: 16px;
  }
  .popup-first-text {
    font-size: 17px;
  }
  .popup-text li {
    font-size: 14px;
    margin-bottom: 8px;
  }
  
}


.contact-box {
  color: var(--color-orange);
  margin: 60px 0;
}
.contact-box h3 {
  text-align: center;
  font-weight: var(--font-800);
}
.contact-box p {
  text-align: center;
  margin: 1em auto 1.5em;
}
.contact-box-inner {
  text-align: center;
}
.contact-box-inner dl:first-child {
  margin-bottom: 1em;
}
.contact-box-inner dt {
  background-color: var(--color-orange);
  color: var(--color-white);
  margin-bottom: 0.5em;
  border-radius: 5px;
  padding: 0.5% 1em;
  display: inline-block;
}
.contact-box-inner dd a {
  color: var(--color-orange);
}
.contact-box-inner dd a:hover {
  opacity: 0.5;
}

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

  .contact-box {
    margin: 15% 0;
  }
  
}


/*--------------
supporter
--------------*/

.supporter .supporter-area {
  margin-bottom: 50px;
}
.supporter .supporter-area:last-of-type {
  margin-bottom: 0;
}

.supporter-area h2 {
  width: 50%;
  margin: 0 auto 30px;
}

.supporter-area .logo-area div:last-child {
  margin-bottom: 0;
}

.special-supporter .logo-area {
  margin-top: 40px;
}

.normal-supporter .logo-area {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 24px;
}
.normal-supporter .logo-area li {
  width: calc((100% - 62px) / 3);
}

.logo-area.logo-area_top{
  margin-bottom: 30px;
  gap: 18px 20px;
}

.logo-area.logo-area_top li{
  width: calc((100% - 50px) / 2);
}



/*--------------
footer
--------------*/
.footer-inner {
  padding: 20px 0;
  background-color: var(--color-black);
}
.footer-inner small {
  display: block;
  text-align: center;
  color: var(--color-white);
  font-family: var(--font-openSans);
  font-weight: var(--font-800);
}

@media screen and (max-width: 521px){
  
  .footer-inner small {
    font-size: 9px;
  }
    
}

.page-top-button {
  pointer-events: none;
  width: 500px;
  position: fixed;
  z-index: 2;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}
.page-top-button-inner {
  cursor: pointer;
  pointer-events: all;
  width: 60px;
  margin: 0 2% 2% auto;
}
.page-top-button-inner a {
  height: 60px;
  display: block;
  background: url(./img/top/page-top-button.png) center center no-repeat;
  background-size: contain;
}
.page-top-button-inner a:hover {
  background: url(./img/top/page-top-button-hover.png) center center no-repeat;
  background-size: contain;
}

.page-top-block {
  opacity: 1;
  visibility: initial;
}
.page-top-hidden {
  opacity: 0;
  visibility: hidden;
}

/*　上に上がる動き　*/

.page-top.UpMove{
	animation: UpAnime 0.5s forwards;
}
@keyframes UpAnime{
  from {
    opacity: 0;
	transform: translateY(100px);
  }
  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*　下に下がる動き　*/

.page-top.DownMove{
	animation: DownAnime 0.5s forwards;
}
@keyframes DownAnime{
  from {
  	opacity: 1;
	transform: translateY(0);
  }
  to {
  	opacity: 1;
	transform: translateY(100px);
  }
}

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

  /*--------------
  page-top
  --------------*/
  .page-top-button {
    width: 100%;
  }

}



@media screen and (max-width:1200px) {
  /*--------------
  common2
  --------------*/
  .main-inner {
    overflow: hidden;
  }

}


@media screen and (max-width:769px) {
  
  /*--------------*/
  /*  common
  /*--------------*/

  body{
      font-size: 1.4rem;
  }

  .pc{
      display:none!important;
  }

  .main-bg {
    display: none;
  }

  /*--------------
  common2
  --------------*/
  .main-inner {
    border-left: solid 2px var(--color-brawn);
    border-right: solid 2px var(--color-brawn);
    width: 100%;
  }
  .openBtn {
    display: none;
  }

}


@media screen and (max-width:521px) {
  /*--------------*/
  /*  common
  /*--------------*/
  .pc-br {
    display: none;
  }
  .sp-br {
    display: block;
  }

}