@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@500;700;900&display=swap');

html,body,a,p,ul,li,h1,h2,h3,h4,h5,h6,figure,dl,dt,dd{margin:0;padding:0;}

*{
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    tap-highlight-color: rgba(0, 0, 0, 0);
    outline: none;
    letter-spacing: 0.02em;
}
@font-face {
	font-family: 'canciller';
	src: url(../font/canciller.otf);
    
}

.grecaptcha-badge { visibility: hidden; }

html {
}
body {
	font-family:"M PLUS 1p", sans-serif;
	font-weight:500;
	font-style:normal;
	color:#fff;
	background:#000;
	overflow-x:hidden;
	-webkit-touch-callout:none;
}
body:before,
body:after {
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0%;
	z-index:2;
	content:"";
	display:block;
	background-image:url("../img/noise-texture.jpg");
	background-size:400px auto;
	opacity:0.11;
	animation:animateGrain 10s steps(10) infinite;
	pointer-events:none;
}
body:after {
	z-index:8;
}

@keyframes animateGrain  {
0%   { background-position:   0px   0px; 
}
10% {
	background-position:-120px -300px;
}
20% {
	background-position:-400px -100px;
}
30% {
	background-position:-180px -500px;
}
40% {
	background-position:-50px -200px;
}
50% {
	background-position:-350px -600px;
}
60% {
	background-position:-220px  -50px;
}
70% {
	background-position:-500px -250px;
}
80% {
	background-position:-100px -400px;
}
90% {
	background-position:-300px -150px;
}
100% {
	background-position:0px   0px;
}
}

img {
	width:100%;
	height:auto;
	display:block;
	font-size:0;
	pointer-events:none;
	user-select:none;
}
a {
	color:inherit;
	text-decoration:none;
}
li {
	list-style-type:none;
}
.fade:not(h1,
h2) {
	opacity:0;
	transform:translateY(100px);
}
.fade:not(h1,
h2).on {
	animation:fadeUp 0.6s ease forwards;
}

                

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(60px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.sp{
    display: none;
    
}


main{
    width: 90%;
   max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 3;
}

.inner{
  
   
}

.hero{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100svh;
    min-height: 680px;
    position: relative;
    margin-bottom: 80px;
}
h1{
    max-width:800px;
    opacity: 0;
    
}

h1.on{
    animation: scaleFadeIn 0.8s ease forwards;
}
.head{
   
    margin-bottom: 40px;
    position: relative;
}
.scroll-line{
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 1px;
    height: 80px;
    overflow: hidden;
    margin: 0 auto;
}
.scroll-line:after{
    content: "";
    display: block;
    width:100%;
    height:100%;
    background:#BCBCBC;
    animation:scroll-anime 1s ease-in infinite}
@keyframes scroll-anime{0%{transform:translateY(-100%)}to{transform:translateY(100%)}}

.introduction h3 {
	font-size:48px;
	font-weight:900;
	font-style:italic;
	text-align:center;
	margin-bottom:40px;
}
.introduction h3 small {
	display:block;
	font-size:88%;
}
.introduction p {
	font-size:36px;
	font-weight:900;
	font-style:italic;
	line-height:2;
	text-align:center;
}
section {
	margin-bottom:140px;
}
h2 {
	font-family:'canciller';
	font-size:80px;
	line-height:1;
	letter-spacing:-0.03em;
	text-align:center;
	transform:rotateY(0deg);
	margin-bottom:40px;
}
h2 span {
	display:inline-block;
	opacity:0;
	transform:scale(2);
}
h2.on span {
	animation:scaleFadeIn 0.4s ease forwards;
}
                
@keyframes scaleFadeIn {
  from {
    opacity: 0;
    transform: scale(2);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
h2 span:nth-child(2){
  animation-delay: 0.05s !important;
}
h2 span:nth-child(3){
  animation-delay: 0.1s !important;
}
h2 span:nth-child(4){
  animation-delay: 0.15s !important;
}
h2 span:nth-child(5){
  animation-delay: 0.2s !important;
}
h2 span:nth-child(6){
  animation-delay: 0.25s !important;
}

h2 span:nth-child(7){
  animation-delay: 0.3s !important;
}

h2 span:nth-child(8){
  animation-delay: 0.35s !important;
}

h2 span:nth-child(9){
  animation-delay: 0.4s !important;
}

h2 span:nth-child(10){
  animation-delay: 0.45s !important;
}

h2 span:nth-child(11){
  animation-delay: 0.5s !important;
}

h2 span:nth-child(12){
  animation-delay: 0.55s !important;
}

h2 span:nth-child(13){
  animation-delay: 0.6s !important;
}

h2 span:nth-child(14){
  animation-delay: 0.65s !important;
}


.schedule h2 {
	color:#ebb900;
}
.live-list {
	font-weight:900;
}
.live-list li {
	display:flex;
	align-items:center;
	border-bottom:solid 1px #fff;
	padding:40px 0;
}
.live-list li:first-child {
	padding:0 0 20px;
}
.live-list li:first-child p {
	font-size:14px;
	text-align:center;
}
.live-list li:not(:first-child) p {
	font-size:20px;
	text-align:center;
	border-right:solid 1px #fff;
}
.live-list li p.date {
	width:20%;
}
.live-list li p.city {
	width:20%;
}
.live-list li p.venue {
	width:25%;
}
.live-list li p.start {
	width:17.5%;
	font-size:14px;
}
.live-list li p.after {
	width:17.5%;
	font-size:14px;
	border-right:none;
}
.live-list li:first-child span {
	display:block;
	font-size:80%;
	margin-bottom:0.4em;
}
.ticket h2 {
	color:#eb3b00;
}
.ticket ul {
	max-width:1000px;
	margin:0 auto;
}
.ticket li {
	margin-bottom:80px;
}
.ticket li:last-child {
	margin-bottom:0;
}
.ticket h3 {
	font-size:28px;
	color:#fff;
	text-align:center;
	background:#333;
	padding:12px;
}
.ticket dl {
	display:flex;
	flex-wrap:wrap;
	margin-bottom:40px;
}
.ticket dt {
	width:20%;
	font-size:18px;
	border-bottom:solid 1px #fff;
	padding:32px 20px;
}
.ticket dd {
	width:80%;
	font-size:20px;
	border-bottom:solid 1px #fff;
	padding:32px 20px;
}
.common-btn {
	width:320px;
	height:56px;
	display:flex;
	justify-content:center;
	align-items:center;
	font-size:20px;
	font-weight:700;
	color:#000;
	background:#fff;
	border:solid 1px #fff;
	border-radius:1000px;
	margin:0 auto;
}
.common-btn:hover {
	color:#fff;
	background:none;
}
.profile h2 {
	color:#2a8327;
}
.profile figure {
	width:80%;
	max-width:600px;
	margin:0 auto 40px;
}
.profile p {
	font-size:18px;
	line-height:2;
	text-align:justify;
	margin-bottom:40px;
}
.profile p strong {
	display:block;
	font-size:28px;
	font-weight:900;
	text-align:center;
	margin-bottom:12px;
}
.sns {
	display:flex;
	justify-content:center;
	gap:20px;
	margin-bottom:40px;
}
.sns a {
	width:24px;
	height:24px;
}
.sns a img {
	width:100%;
	height:100%;
}
.contact {
	font-size:14px;
	line-height:1.4;
	text-align:center;
}
.goods h2 {
	color:#3575f9;
}
.goods p {
	font-size:24px;
	text-align:center;
}
.attention strong {
	display:block;
	font-size:24px;
	text-align:center;
	margin-bottom:40px;
}
.attention strong small {
	display:block;
	font-size:18px;
}
.attention {
	font-size:16px;
	line-height:1.6;
	margin-bottom:60px;
}
footer {
	text-align:center;
	padding-bottom:40px;
}
footer a {
	width:240px;
	height:40px;
	display:flex;
	justify-content:center;
	align-items:center;
	border:solid 1px;
	margin:0 auto 40px;
}
footer a:hover {
	color:#000;
	background:#fff;
}
                

@media screen and (max-width: 896px){
  
  .fade:not(h2) {
	transform:translateY(40px);
}
.pc {
	display:none;
}
.sp {
    display: block;
}
.kv {
	width:80%;
	margin-bottom:40px;
	padding:0px 0 0px;
}
.hero {
	height:100svh;
	min-height:80vw;
	position:relative;
	display:flex;
	justify-content:center;
	align-items:center;
	margin-bottom:80px;
}
h1 {
	font-size:8vw;
	font-style:italic;
	margin-bottom:40px;
}
.head {
	margin-bottom:100px;
}
.introduction h3 {
	font-size:32px;
	margin-bottom:28px;
}
.introduction h3 small {
	display:block;
	font-size:88%;
}
.introduction p {
	font-size:24px;
}
section {
	margin-bottom:100px;
}
h2 {
	font-size:48px;
	margin-bottom:28px;
}
.live-list {
	border-top:solid 1px #fff;
}
.live-list li {
	display:flex;
	flex-flow:column;
	align-items:center;
	gap:4px;
	border-bottom:solid 1px #fff;
	padding:28px 0;
}
.live-list li:first-child {
	display:none;
}
.live-list li:first-child p {
	font-size:14px;
	text-align:center;
}
.live-list li:not(:first-child) p {
	font-size:20px;
	text-align:center;
	border-right:none;
}
.live-list li p.date {
	width:100%;
	font-size:24px;
	margin-bottom:8px;
}
.live-list li p.city {
	width:100%;
}
.live-list li p.venue {
	width:100%;
}
.live-list li p.start {
	width:100%;
	display:flex;
	justify-content:center;
	font-size:12px;
	margin-top:12px;
}
.live-list li p.after {
	width:100%;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	font-size:12px;
	border-right:none;
	margin-top:4px;
}
.live-list li p.after:before {
	width:100%;
	content:"AFTER PARTY";
	display:block;
	font-size:14px;
}
.ticket li {
	margin-bottom:40px;
}
.ticket h3 {
	font-size:18px;
	padding:8px;
}
.ticket dl {
	display:flex;
	flex-wrap:wrap;
	margin-bottom:40px;
}
.ticket dt {
	width:80px;
	font-size:12px;
	border-bottom:solid 1px #fff;
	padding:20px 12px;
}
.ticket dd {
	width:calc(100% - 80px);
	font-size:14px;
	border-bottom:solid 1px #fff;
	padding:20px 12px;
}
.common-btn {
	width:240px;
	height:48px;
	font-size:16px;
}
.common-btn:hover {
	color:#fff;
	background:none;
}
.profile figure {
	width:80%;
	max-width:600px;
	margin:0 auto 28px;
}
.profile p {
	font-size:14px;
	line-height:2;
	margin-bottom:28px;
}
.profile p strong {
	font-size:18px;
	margin-bottom:12px;
}
.sns {
	display:flex;
	justify-content:center;
	gap:20px;
	margin-bottom:28px;
}
.sns a {
	width:20px;
	height:20px;
}
.contact {
	font-size:12px;
}
.goods p {
	font-size:18px;
	text-align:center;
}
.attention strong {
	font-size:16px;
	margin-bottom:28px;
}
.attention strong small {
	font-size:14px;
}
.attention {
	font-size:12px;
	margin-bottom:60px;
}
footer {
	font-size:12px;
	text-align:center;
	padding-bottom:40px;
}

                
    
    
}