@charset "UTF-8";
/* CSS Document */

@font-face {
	font-family: 'sns_ico';
	src:
		url('../fonts/sns_ico.ttf?sij4de') format('truetype'),
		url('../fonts/sns_ico.woff?sij4de') format('woff'),
		url('../fonts/sns_ico.svg?sij4de#sns_ico') format('svg');
	font-weight: normal;
	font-style: normal;
}

i.snsIcon {
	font-family: 'sns_ico' !important;
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	color: #000;
}

.icon-ap:before { content: "\e900";}
.icon-blo:before { content: "\e901";}
.icon-fb:before { content: "\e902";}
.icon-hp:before { content: "\e903";}
.icon-in:before { content: "\e904";}
.icon-line:before { content: "\e905";}
.icon-spo:before { content: "\e906";}
.icon-tt:before { content: "\e907";}
.icon-tw:before { content: "\e908";}
.icon-yt:before { content: "\e909";}
.icon-x:before { content: "\e90a";}
.icon-wb:before { content: "\e90b";}

html {
  background-color: #c9d85d;
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
}
body {
	font-family: 'Noto Sans JP', sans-serif;
  font-size: min(3.4vw, 16px);
  color: #000;
  -webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
  letter-spacing: 0.1em;
  background: linear-gradient(180deg, #cbd95d 0%, #b5ce5e 10%, #7db75d 35%, #7db75d 45%, #cbd650 65%, #cbd650 75%, #68ab58 90%);
  position: relative;
  z-index: -1;
}
main {
  padding-bottom: min(12vw, 120px);
}

a {
  color: #000;
  text-decoration: none;
  transition: all 0.3s ease-out;
}
a:hover {
  opacity: 0.7;
}

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

ul li {
  list-style: none;
}

.container {
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
}

h3 {
    text-align: center;
    font-size: min(4.8vw, 36px);
    margin-bottom: min(6vw, 30px);
    letter-spacing: 0.04em;
}

@media screen and (max-width: 1259px) {
  .container {
    max-width: 88%;
  }
}
.inner {
  width: 88%;
  margin: 0 auto;
}

.anim {
  opacity: 0;
  transition: all 0.8s ease-out;
}

.anim.on {
  opacity: 1;
}

@media screen and (min-width: 821px) {
  .sp {
    display: none;
  }
}
@media screen and (max-width: 820px) {
  .pc {
    display: none;
  }
}

/* ----- langNav ----- */
#langNav {
	position: absolute;
  top: 40px;
  right: 40px;
	width: 68px;
  line-height: 1.8;
}
#langNav .lang {
	font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  border: #000 solid 1px;
  border-radius: 4px;
  margin-left: 0;
	text-align: center;
}
#langNav .lang a.langCurrent {
  display: block;
  font-size: min(1.2vw, 14px);
  font-weight: 400;
  padding: 3px min(1.8vw, 25px);
  position: relative;
}
#langNav .lang .langSelect {
	display: none;
}
#langNav .lang .langSelect a {
	text-align: center;
	padding: 3px;
	font-size: 12px;
	background-color: #000;
	color: #fff;
	margin-top: 1px;
  text-decoration: none;
  letter-spacing: .1em;
  display: block;
}
@media screen and (min-width: 821px) {

	#langNav .lang a:hover {
		opacity: 1;
	}

	#langNav .lang .langSelect a:hover {
		opacity: .5;
	}

}

@media screen and (max-width: 820px) {
	#langNav {
		top: min(6.8vw, 68px);
    right: min(5.4vw, 60px);
		width: 54px;
	}

	#langNav .lang {
		border: #000 solid 1px;
		border-radius: 4px;
		margin-left: 0;
    transition: all .3s ease-out;
		font-family: 'Montserrat', sans-serif;
    z-index: 1000;
	}

	#langNav .lang a {
		color: #000;
		text-decoration: none;
		letter-spacing: .1em;
    text-indent: 0.1em;
	}
	#langNav .lang a.langCurrent {
		display: block;
		font-size: min(3.2vw, 14px);
		padding: min(1.2vw, 4px) min(4vw, 20px) min(1vw, 3px) min(4vw, 20px);
		position: relative;
	}
}

/* ----- top visual ----- */
.fv {
  position: relative;
}
.fv .pagetitle_wrap {
  display: flex;
  justify-content: center;
  height: 100vh;
  height: 100svh;
}
.fv .pagetitle {
  width: 95vh;
  max-width: 82%;
  margin: auto;
  opacity: 0;
  animation: ttl 0.5s ease-out 0.8s forwards;
}
@keyframes ttl {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fv .link_official {
  position: absolute;
  width: min(40vw, 280px);
  top: min(6vw, 54px);
  left: min(4vw, 48px);
}
.fv .link_entry {
  position: absolute;
  right: 2vw;
  bottom: 4vh;
  width: min(16vw, 280px);
  max-width: 40vh;
  z-index: 1;
}
.fv .scroll {
  position: absolute;
  width: 1px;
  height: 10vh;
  bottom: 0;
  left: 50%;
  overflow: hidden;
  opacity: 0;
  animation: ttl 0.5s ease-out 1.5s forwards;
}
.fv .scroll::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #000;
  position: absolute;
  left: 0;
  animation: scrl 1.2s linear 0s infinite;
}
@keyframes scrl {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}

.bgWrap {
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0.8;
  width: 100vw;
  height: 100svh;
  z-index: -1;
}
.bgWrap .bgDeco1,
.bgWrap .bgDeco2,
.bgWrap .bgDeco3,
.bgWrap .bgDeco4,
.bgWrap .bgDeco5 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(0);
  max-width: none;
}
.bgWrap .bgDeco1 {
	background: url("../images/mv_deco01.jpg") no-repeat center center;
	background-size: cover;
  animation: rotate_r 90s linear 0s infinite;
}
.bgWrap .bgDeco2 {
	background: url("../images/mv_deco02.png") no-repeat center center;
	background-size: cover;
  animation: rotate_l 85s linear 0s infinite;
}
.bgWrap .bgDeco3 {
	background: url("../images/mv_deco03.png") no-repeat center center;
	background-size: cover;
  animation: rotate_r 80s linear 0s infinite;
}
.bgWrap .bgDeco4 {
	background: url("../images/mv_deco04.png") no-repeat center center;
	background-size: cover;
  animation: rotate_l 75s linear 0s infinite;
}
.bgWrap .bgDeco5 {
	background: url("../images/mv_deco05.png") no-repeat center center;
	background-size: cover;
  animation: rotate_r 70s linear 0s infinite;
}
@keyframes rotate_r {
  0% { transform: translate(-50%, -50%) rotate(0);}
  100% { transform: translate(-50%, -50%) rotate(360deg);}
}
@keyframes rotate_l {
  0% { transform: translate(-50%, -50%) rotate(0);}
  100% { transform: translate(-50%, -50%) rotate(-360deg);}
}
/* 縦長 */
@media screen and (orientation: portrait) {
  .bgWrap .bgDeco1,
  .bgWrap .bgDeco2 {
    height: 102vh;
    width: 102vh;
  }
  .bgWrap .bgDeco3,
  .bgWrap .bgDeco4,
  .bgWrap .bgDeco5 {
    height: 142vh;
    width: 142vh;
  }
}
 /* 横長 */
@media screen and (orientation: landscape) {
  .bgWrap .bgDeco1,
  .bgWrap .bgDeco2 {
    height: 102vw;
    width: 102vw;
  }
  .bgWrap .bgDeco3,
  .bgWrap .bgDeco4,
  .bgWrap .bgDeco5 {
    height: 142vw;
    width: 142vw;
  }
}

/* ----- intro ----- */
#intro {
  margin-bottom: min(14vw, 120px);
}
#intro .catch {
  font-size: min(5.8vw, 28px);
  line-height: 2;
  font-weight: bold;
	text-align: center;
	margin-bottom: min(8vw, 60px);
}
#intro p {
  font-size: min(3.8vw, 18px);
  line-height: 2.4;
    text-align: center;
  font-weight: bold;
}
#intro p + p {
	margin-top: min(6vw, 40px);
}

#about {
  margin-top: min(14vw, 160px);
}
#about p {
  font-size: min(3.8vw, 18px);
  line-height: 2.4;
  font-weight: bold;
}
#about p + p {
	margin-top: min(6vw, 40px);
}

.anchorBtn {
    display: flex;
    justify-content: center;
    margin-top: min(6vw, 30px);
    gap: 0 4%;
}
.anchorBtn li {
    width: 360px;
    max-width: 46%;
}
.anchorBtn li a {
    display: block;
    text-align: center;
    padding: min(4vw, 20px);
    color: #fff;
    border-radius: 8px;
    font-size: min(3.6vw, 18px);
    font-weight: bold;
    letter-spacing: 0.1em;
}
.anchorBtn li a.tokyo {
    background-color: #3159a1;
}
.anchorBtn li a.osaka {
    background-color: #e66b00;
}


/* ----- 要素 ----- */
.section_title {
  font-size: min(6.4vw, 36px);
  text-align: center;
  font-weight: bold;
  margin-bottom: min(8vw, 48px);
}
section {
  position: relative;
  z-index: 0;
  padding: min(6vw, 60px) min(6vw, 60px) min(7vw, 72px);
  margin-bottom: min(8vw, 80px);
  background-color: #fff;
  border-radius: min(4vw, 20px);
}
section:last-child {
  margin-bottom: 0;
}

section > p {
  font-size: min(3.8vw, 18px);
  margin-bottom: min(4vw, 32px);
  line-height: 1.9;
	text-align: center;
}

section .info li {
  display: flex;
}
section .info li + li {
  margin-top: 1em;
}
section .info li p:first-child {
  width: 120px;
  font-size: min(3.8vw, 20px);
}
section .info li p:last-child {
  width: calc(100% - 120px);
  font-size: min(3.4vw, 18px);
}

section .processWrap > div {
  position: relative;
  border: solid 2px #000;
  border-radius: min(2vw, 10px);
  margin-top: calc(min(11.6vw, 55px) + min(6vw, 40px));
  padding: min(6vw, 60px) min(4vw, 40px) min(4vw, 40px);
}
section .processWrap > div:first-child {
  margin-top: calc(min(11.6vw, 55px) + min(8vw, 48px));
}
section .processWrap > div::before {
  display: block;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -100%);
  top: min(7.2vw, 18px);
  content: "";
  width: min(16vw, 70px);
  height: min(17.4vw, 76px);
  background-repeat: no-repeat;
  background-size: contain;
}
section .processWrap > div:nth-of-type(1)::before {background-image: url(../images/deco01.png);}
section .processWrap > div:nth-of-type(2)::before {background-image: url(../images/deco02.png);}
section .processWrap > div:nth-of-type(3)::before {background-image: url(../images/deco03.png);}
section .processWrap > div:nth-of-type(4)::before {background-image: url(../images/deco04.png);}

section .processWrap dt {
  font-size: min(5.8vw, 28px);
  font-weight: bold;
  text-align: center;
  margin-bottom: min(4vw, 32px);
}
section .processWrap dd {
  font-size: min(3.4vw, 16px);
}
section .processWrap dd > p {
  text-align: center;
}
section .processWrap dd > p.catch {
  font-size: min(4.2vw, 20px);
  font-weight: bold;
}
section .processWrap dd .area,
section .processWrap dd .date {
  font-size: min(4.2vw, 20px);
  font-weight: bold;
}
section .processWrap dd .date span {
  font-size: min(3vw, 14px);
}
section .processWrap dd .date span.sat {
  color: #4545f7;
}
section .processWrap dd .date span.holiday {
  color: #c22b2b;
}
section .processWrap dd .logo {
  width: 86%;
  margin: 4% auto 0;
}
section .processWrap dd .location {
  font-size: min(3.4vw, 18px);
  font-weight: bold;
  margin-top: 1em;
}
section .processWrap dd .location + .location {
  margin-top: 0.4em;
}
section .processWrap .gridWrap {
  max-width: 640px;
  margin: min(4vw, 24px) auto 0;
}
section .processWrap .gridWrap > div {
  background-color: #e8f496;
  border-radius: min(2vw, 10px);
  text-align: center;
  padding: min(4vw, 32px);
}
section .processWrap .gridWrap.table {
  display: flex;
  gap: 10px;
	flex-wrap: wrap;
}


section .processWrap .gridWrap.table .item1 {
  display: flex;
  align-items: center;
	width: 100%;
}
section .processWrap .gridWrap.table .item2 {
	width: calc(50% - 5px);
}
section .processWrap .gridWrap.table .item1 .area {
  display: inline-block;
  width: 30%;
  padding-right: 1em;
}
section .processWrap .gridWrap.table .item1 .dateWrap {
  display: flex;
  width: 70%;
  text-align: left;
}
section .processWrap .gridWrap.table .item1 .date {
  display: inline-block;
  width: calc(100% / 3);
}
section .processWrap .gridWrap.table .item2 .area {
  display: inline-block;
}
section .processWrap .gridWrap.table .item2 span {
	width: 50%;
}
section .note {
  width: fit-content;
  margin: 0 auto min(6vw, 40px);
}
section .note li {
  font-size: min(3.4vw, 16px);
  line-height: 1.87;
}
section .crick {
  width: min(18vw, 72px);
  margin: auto;
  margin-bottom: 8px;
}
section .btn {
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: min(66vw, 380px);
  padding: min(4vw, 20px);
  font-size: min(5vw, 24px);
  font-weight: bold;
  background: #ffc000;
  border-radius: min(3vw, 15px);
}
section .btn.end {
  background-color: #545454;
  color: #9c9c9c;
}

/* ----- footer ----- */
footer {
  padding-top: min(12vw, 120px);
  padding-bottom: min(12vw, 120px);
}
footer .footer_title {
  text-align: center;
  font-size: min(5.4vw, 28px);
  margin-bottom: min(4vw, 48px);
}
footer .note,
footer .note + p {
    font-size: min(3.4vw, 16px);
    line-height: 1.8;
    letter-spacing: 0.02em;
}
footer .note + p {
  margin-bottom: min(16vw, 160px);
}
footer .summersonic {
  width: 32%;
  display: block;
  margin: auto;
}
footer .logo_list {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 64px auto min(14vw, 140px);
}
footer .logo_list .creativeman {
  width: 25.5%;
}
footer .logo_list .jisedai {
  width: 19%;
}
footer .logo_list .eplus {
  width: 25.5%;
  padding-right: 2.5%;
}
footer .logo_list li img {
  width: 100%;
}
footer .copy {
  text-align: center;
  font-size: min(2.4vw, 13px);
  font-family: "Oswald", sans-serif;
  letter-spacing: 0.02em;
}

@media screen and (min-width: 821px) {
  footer .creativeman {
    width: 30.1%;
  }
  footer .summersonic {
    width: 27.1%;
  }
  footer .eplus {
    width: 22.8%;
  }
}

@media screen and (max-width: 820px) {
	.fv .pagetitle_wrap {
    	padding-bottom: 10vh;
	}
  .fv .link_entry {
    width: min(30vw, 220px);
    right: 4vw;
  }

	section > p {
		text-align: left;
	}
  #intro p {
    line-height: 1.9;
  }

  section .info li {
    flex-direction: column;
  }
  section .info li p:first-child {
    width: 100%;
    font-weight: bold;
    margin-bottom: min(2vw, 16px);
  }
  section .info li p:last-child {
    width: 100%;
  }

  section .processWrap .gridWrap.table .item1 .area {
    padding-right: 0;
  }
  section .processWrap .gridWrap.table .item1 .dateWrap {
    flex-direction: column;
  }
  section .processWrap .gridWrap.table .item1 .date {
    width: 100%;
  }
  section .processWrap .gridWrap.table .item2 {
    display: flex;
  }
  section .processWrap .gridWrap.table .item2 .date {
    text-align: left;
  }
/*
  section .processWrap .gridWrap.table > div:nth-child(3) { grid-row: 3; grid-column: 1/4;}
  section .processWrap .gridWrap.table > div:nth-child(4) { grid-row: 4; grid-column: 1/4;}
  section .processWrap .gridWrap.table > div:nth-child(5) { grid-row: 5; grid-column: 1/4;}
*/
	section .processWrap .gridWrap.table .item2 {
		width: 100%;
	}

  section .processWrap .gridWrap.table .item1 .area,
  section .processWrap .gridWrap.table .item1 .dateWrap,
  section .processWrap .gridWrap.table .item2 .area,
  section .processWrap .gridWrap.table .item2 .date {
    width: 50%;
  }

	footer .summersonic {
		width: 47.4%;
		padding-bottom: 10vw;
	}
  footer .logo_list {
		width: 100%;
		display: block;
		margin-top: 0;
  }
  footer .logo_list li {
    width: 50%;
    margin: 0 auto;
    padding-bottom: 10vw;
  }
	footer .logo_list .creativeman {
		width: 51%;
	}
	footer .logo_list .jisedai {
		width: 38%;
	}
	footer .logo_list .eplus {
		width: 48%;
		padding-right: 0;
	}
}


.dayWrap {
    margin-bottom: min(10vw, 80px);
}

.finalistBox {
    background-color: #fff;
    padding: min(6vw, 30px) min(6vw, 40px) min(8vw, 40px);
    border-radius: 8px;
}
.finalistBox + .finalistBox {
    margin-top: min(6vw, 40px);
}
.finalistBox.tokyo {
    border: #3159a1 solid 3px;
}
.finalistBox.osaka {
    border: #e66b00 solid 3px;
}
.finalistBox .finalistHead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: min(4vw, 20px);
    margin-bottom: min(5vw, 30px);
}
.finalistBox.tokyo .finalistHead {
    border-bottom: #3159a1 solid 3px;
}
.finalistBox.osaka .finalistHead {
    border-bottom: #e66b00 solid 3px;
}
.finalistBox .finalistHead h4 {
    font-size: min(4vw, 30px);
    position: relative;
    display: flex;
    align-items: center;
    gap: min(3vw, 20px);
}
.finalistBox .finalistHead h4::before {
    content: "";
    display: block;
    width: min(12vw, 60px);
    height: min(12vw, 60px);
}
.finalistBox .finalistHead.stagePacific h4::before {
    background: url("../images/stage_logo_pacific.svg") no-repeat center center;
    background-size: contain;
}
.finalistBox .finalistHead.stageSonic h4::before {
    background: url("../images/stage_logo_sonic.svg") no-repeat center center;
    background-size: contain;
}
.finalistBox .finalistHead.stageSpotify h4::before {
    background: url("../images/stage_logo_spotify.svg") no-repeat center center;
    background-size: contain;
}
.finalistBox .finalistHead.stageMassive h4::before {
    background: url("../images/stage_logo_massive_o.svg") no-repeat center center;
    background-size: contain;
}
.finalistBox .finalistHead.stagePavilion h4 img {
    width: min(40.6vw, 230px);
}
.finalistBox .finalistHead.stagePavilion h4::before {
  display: none;
}
.finalistBox .finalistHead::after {
    display: flex;
    justify-content: center;
    align-items: center;
    width: min(12vw, 60px);
    height: min(12vw, 60px);
    color: #fff;
    font-size: min(3vw, 14px);
    font-weight: bold;
    text-indent: 0.1em;
    padding-bottom: 0.06em;
}
.finalistBox.tokyo .finalistHead::after {
    content: "東京";
    background: url("../images/place_bg01.svg") no-repeat center center;
    background-size: contain;
}
.finalistBox.osaka .finalistHead::after {
    content: "大阪";
    background: url("../images/place_bg02.svg") no-repeat center center;
    background-size: contain;
}


.finalistBox .artistInfo {
    display: flex;
}
.finalistBox .artistInfo .thumbWrap {
    width: 50%;
    padding-right: 4%;
}
.finalistBox.tokyo .artistInfo .thumbWrap {
    border-right: #3159a1 solid 3px;
}
.finalistBox.osaka .artistInfo .thumbWrap {
    border-right: #e66b00 solid 3px;
}
.finalistBox .artistInfo .thumbWrap .thumb {
    line-height: 0;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: min(6vw, 30px);
}
.finalistBox .artistInfo .thumbWrap .btnHP {
    width: 320px;
    max-width: 100%;
    margin: 0 auto min(6vw, 30px);
}
.finalistBox .artistInfo .thumbWrap .btnHP a {
    display: block;
    text-align: center;
    color: #fff;
    border-radius: 8px;
    padding: min(4vw, 20px);
    font-size: min(3.6vw, 18px);
    font-weight: bold;
}
.finalistBox.tokyo .artistInfo .thumbWrap .btnHP a {
    background-color: #3159a1;
}
.finalistBox.osaka .artistInfo .thumbWrap .btnHP a {
    background-color: #e66b00;
}
.finalistBox .artistInfo .thumbWrap .artistSns {
    display: flex;
    justify-content: center;
    gap: min(6vw, 30px);
}
.finalistBox .artistInfo .thumbWrap .artistSns li a {
    color: #000;
    text-decoration: none;
}
.finalistBox .artistInfo .thumbWrap .artistSns li a i {
    font-size: min(6vw, 30px);
}

.finalistBox .artistInfo .txt {
    width: 50%;
    padding-left: 4%;
}
.finalistBox .artistInfo .txt .name {
    font-size: min(5.2vw, 30px);
    font-weight: bold;
    margin-bottom: min(4vw, 30px);
}
.finalistBox .artistInfo .txt p {
    line-height: 1.8;
}


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

    .finalistBox .artistInfo {
        flex-direction: column-reverse;
        gap: min(6vw, 30px);
    }

    .finalistBox .finalistHead h4 {
        line-height: 1.4;
        letter-spacing: 0.02em;
    }
    .finalistBox .finalistHead.stagePavilion h4 {
        flex-direction: column;
        align-items: flex-start;
    }

    .finalistBox .artistInfo .thumbWrap {
        width: 100%;
        padding: 0;
    }
    .finalistBox.tokyo .artistInfo .thumbWrap,
    .finalistBox.osaka .artistInfo .thumbWrap {
        border-right: none;
    }

    .finalistBox .artistInfo .txt {
        width: 100%;
        padding-left: 0;
    }

}