@charset "utf-8";

/* font
================================================== */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@900&family=Noto+Sans+JP:wght@100..900&family=Noto+Sans:wght@100..900&family=Roboto:wght@100..900&display=swap');

/* root
================================================== */
:root{
	/* font-size */
	--default-font-size:15px;
	
	/* color */
	--default-color:#000;
	
	/* border */
	--default-border:#000;
	--table-border:rgba(0,0,0,0.25);
	
	/* background */
	--default-background:#FFF;
	--header-background:#FFF;
	--footer-background:#FFF;
	
	/* button */
	--button-background:linear-gradient(90deg,#29328C,#39A8F6);
	--nolink-color:#757575;
	--nolink-background:#393939;
	
	/* language */
	--lang-en:'Noto Sans';
	--lang-jp:'Noto Sans JP';
	--lang-ko:'Noto Sans KR';
	--lang-chs:'Noto Sans SC';
	--lang-cht:'Noto Sans TC';
}
@media screen and (max-width:800px){
	:root{
		--default-font-size:14px;
	}
}

/* reset
================================================== */
*:where(:not(iframe,img,svg):not(svg *)){all:unset;display:revert;}
*,*::before,*::after{box-sizing:border-box;}
body{position:relative;width:100%;font-size:var(--default-font-size);line-height:1.5;color:var(--default-color);font-weight:500;-webkit-text-size-adjust:100%;}
footer,header,main,section,picture{display:block;}
table{border-collapse:collapse;border-spacing:0;}
ol,ul{list-style:none;}
img{width:100%;height:auto;vertical-align:top;}
a{margin:0;padding:0;color:#000;vertical-align:bottom;background:transparent;cursor:pointer;}
a:link,a:visited,a:hover,a:active{text-decoration:none;}

/* language
================================================== */
:lang(en){font-family:var(--lang-en),var(--lang-jp),sans-serif;}
:lang(ja){font-family:var(--lang-en),var(--lang-jp),sans-serif;}
:lang(ko){font-family:var(--lang-en),var(--lang-ko),var(--lang-jp),sans-serif;}
:lang(zh-cmn-Hans){font-family:var(--lang-en),var(--lang-chs),var(--lang-jp),sans-serif;}
:lang(zh-cmn-Hant){font-family:var(--lang-en),var(--lang-cht),var(--lang-jp),sans-serif;}

/* XG
================================================== */
html,body{
	height:100%;
}
body::before{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100dvh;
	background-image:linear-gradient(rgba(0,0,0,0.02),rgba(0,0,0,0.02)),url(../image/background.jpg);
	background-repeat:no-repeat,repeat;
	background-position:center,center top;
	z-index:-1;
	content:'';
}

/* header, footer
-------------------------------------------------- */
.logo{
	width:fit-content;
	margin-inline:auto;
}
.logo a{
	display:block;
	width:100%;
	transition:opacity 0.3s;
}
.logo,
.logo a{
	height:24px;
	line-height:1;
}
.logo picture,
.logo img{
	width:auto;
	height:100%;
	line-height:1;
}
@media screen and (max-width:800px){
	.logo,
	.logo a{
		height:20px;
	}
}
/*
@media screen and (min-width:768px){
	.logo a:hover{
		opacity:0.7;
	}
}
*/
/* header
-------------------------------------------------- */
header{
	position:relative;
	padding-block:20px;
	text-align:center;
	background:color-mix(in srgb,var(--header-background) 70%,transparent);
}

/* language */
.langNav{
	position:absolute;
	top:20px;
	right:20px;
	font-size:10px;
	line-height:1;
	font-family:Lato;
	font-weight:900;
	letter-spacing:0;
	z-index:200000;
}
.langNavButton,
.langMenu li{
	display:flex;
	justify-content:center;
	align-items:center;
	height:24px;
	border-radius:12px;
	cursor:pointer;
}
.langNavButton{
	width:48px;
	color:#000;
	background:transparent;
}
.langNavButton span{
	width:100%;
	display:block;
	text-align:center;
}
.langNavButton.selected{
	background:#FFF;
}
.langMenu{
	position:absolute;
	top:0;
	left:-110px;
	width:102px;
}
.langMenu ul{
	display:grid;
	row-gap:4px;
}
.langMenu li{
	width:100%;
	color:#FFF;
	background-color:hsla(0,0%,100%,.07);
	background-image:linear-gradient(255deg,hsla(280,6%,69%,.07),hsla(231,5%,49%,.05));
	backdrop-filter:blur(20px);
}
.switch_bg{
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	display:none;
	background-color:rgba(0,0,0,0.5);
	-webkit-backdrop-filter:blur(15px);
	backdrop-filter:blur(10px);
	z-index:100000;
}
.switch_bg.selected{
	display:block;
}
@media screen and (max-width:800px){
	header{
		padding-block:13px;
	}
	.langNav{
		top:11px;
		right:10px;
	}
}

/* footer
-------------------------------------------------- */
footer{
	position:sticky;
	top:100vh;
	padding-block:32px 20px;
	background:color-mix(in srgb,var(--header-background) 70%,transparent);;
}
footer .official{
	width:fit-content;
	margin:20px auto;
}
footer .official a{
	display:block;
	padding:11px 72px 9px;
	font-size:14px;
	line-height:1;
	color:#000;
	font-family:'ROBOTO';
	font-weight:800;
	border:1px solid rgba(0,0,0,0.22);
	border-radius:20px;
	background:rgba(255,255,255,0.45);
	transition:opacity 0.3s;
}
footer .official a::after{
	display:inline-block;
	width:10px;
	height:10px;
	margin-inline-start:8px;
	aspect-ratio:1;
	background:url(../svg/icon_blanklink-hover.svg) no-repeat center;
	content:'';
}
footer .sns{
	display:grid;
	grid-auto-flow:column;
	place-items:center;
	column-gap:20px;
	width:fit-content;
	height:22px;
	margin-inline:auto;
}
footer .sns img{
	display:block;
	height:22px;
	transition:transform 0.3s;
}
footer .sns img[alt='YouTube']{
	height:17px;
}

@media screen and (max-width:800px){
footer{
	padding-block:20px 12px;
}
footer .official{
	margin-block:15px 12px;
}
footer .official a{
	padding:10px 65px 9px;
	font-size:13px;
}
	footer .sns{
		column-gap:18px;
		height:20px;
	}
	footer .sns img{
		height:20px;
	}
	footer .sns img[alt='YouTube']{
		height:15px;
	}
}
/*
@media screen and (min-width:768px){
	footer .official a:hover{
		opacity:0.7;
	}
	footer .sns a:hover img{
		transform:scale(1.2);
	}
}
*/

/* main
-------------------------------------------------- */
#campaign{
	padding-block:117px 121px;
}
#campaign .inner{
	max-width:960px;
	margin-inline:auto;
	padding-inline:min(2vw,20px);
}
#campaign .title,
#campaign .lead{
	margin-inline:auto;
	padding-inline:min(6vw,60px);
}
#campaign .title{
	font-size:34px;
	line-height:1.35;
	font-weight:600;
	font-feature-settings:'palt';
}
#campaign .lead{
	margin-block-start:47px;
	font-size:17px;
	line-height:1.8;
}
#campaign .box{
	padding:58px min(6vw,60px) 65px;
	background:rgba(0,0,0,0.12);
	backdrop-filter:blur(3px);
}
#campaign .heading{
	position:relative;
	padding-inline-start:1.4em;
	font-size:30px;
	line-height:1.35;
	font-weight:300;
	font-feature-settings:'palt';
}
#campaign .heading::before{
	position:absolute;
	top:0;
	left:0;
}
#campaign #ticket .heading::before{
	content:'\2776';
}
#campaign #event .heading::before{
	content:'\2777';
}
#campaign .subheading{
	width:fit-content;
	font-size:21px;
	line-height:1.35;
	font-weight:700;
	font-feature-settings:'palt';
}
#campaign .bold{
	font-size:18px;
	line-height:1.25;
	font-weight:600;
	font-feature-settings:'palt';
}
#campaign .notes{
	display:grid;
	row-gap:8px;
}
#campaign .notes li{
	padding-inline-start:1em;
	text-indent:-1em;
}
#campaign .button{
	display:block;
	padding-block:16px 15px;
	font:400 18px/1 'ROBOTO';
	color:#FFF;
	text-align:center;
	border-radius:25px;
	background:var(--button-background);
}
#campaign .button.nolink{
	color:var(--nolink-color);
	background:var(--nolink-background);
	pointer-events:none;
}
#campaign .link{
	width:480px;
	margin-inline:auto;
}
#ticket{
	margin-block-start:93px;
} 
#ticket .link{
	margin-block-start:60px;
}
#period{
	margin-block-start:50px;
}
#period .date{
	margin-block-start:29px;
}
#period .notes{
	margin-block-start:40px;
}
#live{
	margin-block-start:51px;
}
#live .target{
	display:grid;
	grid-template-columns:auto 1fr;
	gap:20px 1.25em;
	margin-block-start:29px;
}
#live .timetable:not(:first-child){
	margin-block-start:25px;
	padding-block-start:22px;
	border-block-start:1px solid var(--table-border);
}
#live .times,
#live .open,
#live .start{
	display:grid;
	grid-template-columns:repeat(2,auto);
	width:fit-content;
}
#live .times{
	column-gap:25px;
	margin-block-start:14px;
}
#live .open,
#live .start{
	align-items:center;
	column-gap:8px;
}
#live .open dt,
#live .start dt{
	display:grid;
	place-items:center;
	width:76px;
	padding-block:5px 4px;
	color:#FFF;
	font:400 13px/1 'ROBOTO';
	border-radius:12px;
	background:#000;
}
#live .open dd,
#live .start dd{
	padding-block-start:2px;
	font:500 18px/1 'ROBOTO';
}
#event{
	margin-block-start:100px;
}
#details{
	margin-block-start:50px;
}
#details .name{
	margin-block-start:29px;
}
#details .description{
	margin-block-start:19px;
}
#schedule{
	margin-block-start:52px;
}
#schedule .date{
	margin-block-start:29px;
}
#schedule .date span{
	font-size:13px;
}
#application{
	margin-block-start:53px;
}
#application .period{
	width:fit-content;
	margin-block-start:29px;
}
#application .period li:not(:first-child){
	position:relative;
	padding-block-start:30px;
}
#application .period li:not(:first-child)::before{
	position:absolute;
	top:11px;
	left:1em;
	border-block-start:10px solid #000;
	border-inline:7px solid transparent;
	content:'';
}
#application .period span{
	font-size:13px;
}
#application .notes{
	margin-block-start:40px;
}
#event .link{
	margin-block-start:57px;
}
#caution{
	margin-block-start:95px;
	padding-inline:min(6vw,60px);
}
#caution .heading{
	padding-inline-start:0;
	font-size:21px;
	font-weight:700;
}
#caution .notes{
	margin-block-start:28px;
}
@media screen and (max-width:800px){
	#campaign{
		padding-block:80px 97px;
	}
	#campaign .inner{
		padding-inline:1.6vw;
	}
	#campaign .title,
	#campaign .lead{
		padding-inline:4vw;
	}
	#campaign .title{
		font-size:21px;
		font-weight:600;
	}
	#campaign .lead{
		margin-block-start:29px;
		font-size:16px;
	}
	#campaign .box{
		padding:50px 4vw 55px;
	}
	#campaign .heading{
		font-size:19px;
		font-weight:400;
	}
	#campaign .subheading{
		font-size:17px;
	}
	#campaign .bold{
		font-size:16px;
	}
	#campaign .button{
		padding-block:15px 13px;
		font-size:16px;
	}
	#campaign .link{
		width:100%;
	}
	#ticket{
		margin-block-start:79px;
	} 
	#ticket .link{
		margin-block-start:50px;
	}
	#period{
		margin-block-start:45px;
	}
	#period .date{
		margin-block-start:19px;
	}
	#period .notes{
		margin-block-start:30px;
	}
	#live{
		margin-block-start:44px;
	}
	#live .target{
		row-gap:18px;
		margin-block-start:19px;
	}
	#live .timetable:not(:first-child){
		margin-block-start:20px;
		padding-block-start:17px;
	}
	#live .times{
		column-gap:18px;
		margin-block-start:11px;
	}
	#live .open,
	#live .start{
		column-gap:6px;
	}
	#live .open dt,
	#live .start dt{
		width:72px;
		padding-block:4px 3px;
		font-size:12px;
	}
	#live .open dd,
	#live .start dd{
		font-size:16px;
	}
	#event{
		margin-block-start:85px;
	}
	#details{
		margin-block-start:44px;
	}
	#details .name{
		margin-block-start:19px;
	}
	#details .description{
		margin-block-start:17px;
	}
	#schedule{
		margin-block-start:44px;
	}
	#schedule .date{
		margin-block-start:19px;
	}
	#schedule .date span{
		font-size:10px;
	}
	#application{
		margin-block-start:46px;
	}
	#application .period{
		margin-block-start:19px;
	}
	#application .period li:not(:first-child){
		padding-block-start:24px;
	}
	#application .period li:not(:first-child)::before{
		top:9px;
		border-block-start-width:8px;
		border-inline-width:6px;
	}
	#application .period span{
		font-size:10px;
	}
	#application .notes{
		margin-block-start:30px;
	}
	#event .link{
		margin-block-start:47px;
	}
	#caution{
		margin-block-start:82px;
		padding-inline:4vw;
	}
	#caution .heading{
		font-size:17px;
		font-weight:700;
	}
	#caution .notes{
		margin-block-start:18px;
	}
}
@media screen and (max-width:413px){
	#live .target{
		grid-template-columns:auto;
		gap:0;
	}
	#live .target dd+dt{
		margin-block-start:21px;
	}
	#live .target dd{
		margin-block-start:8px;
	}
}

/* #form
-------------------------------------------------- */
/* header */
header:has(#header){
	padding-inline:min(2vw,20px);
}
#header{
	padding-block:36px 22px;
}
#header .products,
#header .campaign{
	font-feature-settings:'palt';
}
#header .products{
	font-size:18px;
	line-height:1.35;
	font-weight:400;
}
#header .products br{
	display:none;
}
#header .campaign{
	margin-block-start:23px;
	font-size:34px;
	line-height:1.2;
	font-weight:300;
}
@media screen and (max-width:800px){
	header:has(#header){
		padding-inline:1.6vw;
	}
	#header{
		padding-block:26px 12px;
	}
	#header .products{
		font-size:min(3.73333vw,14px);
	}
	#header .products br{
		display:block;
	}
	#header .campaign{
		margin-block-start:12px;
		font-size:min(6.4vw,24px);
	}
}

/* common */
#title{
	display:grid;
	place-items:center;
	height:130px;
	padding-inline:min(2vw,20px);
	font-size:22px;
	color:#FFF;
	font-weight:300;
	background:color-mix(in srgb,#000 60%,transparent);
}
#title p{
	padding-block-end:1px;
}
@media screen and (max-width:800px){
	#title{
		height:97px;
		padding-inline:1.6vw;
		font-size:18px;
	}
	#title p{
		padding:0;
	}
}
#breadcrumb{
	background:color-mix(in srgb,#000 60%,transparent);
}
#breadcrumb ol{
	display:grid;
	grid-auto-flow:column;
	width:fit-content;
	margin-inline:auto;
}
#breadcrumb li{
	position:relative;
	padding-block:4px 5px;
	font-size:15px;
	color:#AAA;
}
#breadcrumb li:not(:first-child){
	padding-inline-start:78px;
}
#breadcrumb li:not(:first-child)::before{
	position:absolute;
	top:50%;
	left:32px;
	display:block;
	width:8px;
	height:8px;
	border-inline-end:1px solid #CCC;
	border-block-end:1px solid #CCC;
	transform:translateY(-50%) rotate(-45deg) skew(12deg,12deg);
	content:'';
}
#breadcrumb .active{
	color:#FFF;
}
@media screen and (max-width:800px){
	#breadcrumb li{
		padding-block:5px 3px;
		font-size:13px;
	}
	#breadcrumb li:not(:first-child){
		padding-inline-start:30px;
	}
	#breadcrumb li:not(:first-child)::before{
		left:10px;
		width:6px;
		height:6px;
	}
}
.main table{
	width:100%;
	border-block-start:1px solid var(--table-border);
}
.main tr{
	border-block-end:1px solid var(--table-border);
}
.main th,
.main td{
	padding-block:26px 27px;
}
.main th{
	padding-inline-end:3em;
	text-wrap:nowrap;
}
.main td{
	width:100%;
}
@media screen and (max-width:800px){
	.main table,
	.main tbody,
	.main tr,
	.main th,
	.main td{
		display:block;
	}
	.main tr{
		padding-block:16px 17px;
	}
	.main th,
	.main td{
		padding:0;
	}
	.main th{
		font-weight:700;
		text-wrap:unset;
	}
	.main td{
		padding-block-start:4px;
	}
}
.main .accordion{
	margin-block-start:69px;
	padding-block:24px;
	background:color-mix(in srgb,#000 12%,transparent);
	backdrop-filter:blur(3px);
}
.main .accordion .panel{
	position:relative;
	padding:29px min(5vw,50px) 28px;
	font-size:19px;
	line-height:1.2;
	font-weight:400;
}
.main .accordion .panel span{
	position:absolute;
	top:50%;
	right:min(5vw,50px);
	display:block;
	width:23px;
	height:23px;
	margin-block-start:-12px;
}
.main .accordion .panel span::before,
.main .accordion .panel span::after{
	position:absolute;
	display:block;
	background:#000;
	content:'';
}
.main .accordion .panel span::before{
	top:0;
	left:11px;
	width:1px;
	height:100%;
}
.main .accordion .panel span::after{
	top:11px;
	left:0;
	width:100%;
	height:1px;
}
.main .accordion .content{
	/*display:none;*/
	padding:0 min(5vw,50px) 27px;
}
.main .accordion .content .list{
	margin-block-start:27px;
}
@media screen and (max-width:800px){
}
.main .form{
	display:grid;
	grid-auto-flow:row;
	row-gap:15px;
}
@media screen and (max-width:800px){
}
.main .contents{
	max-width:1000px;
	margin-inline:auto;
	padding:94px min(2vw,20px) 150px;
}
.main .inner:not(:first-child){
	margin-block-start:56px;
	padding-block-start:54px;
	border-block-start:1px solid var(--table-border);
}
.main .inner>*:not(.box):not(.link):not(.accordion):not(.customer){
	margin-inline:min(5vw,50px);
}
.main .heading{
	font-size:22px;
	font-weight:400;
}
.main .subheading{
	font-size:19px;
	font-weight:400;
}
.main .important{
	font-size:19px;
	font-weight:400;
}
.main .heading+.important{
	margin-block-start:29px;
}
.main .important strong{
	color:#A30015;
	font-weight:700;
}
.main .text{
	
}
.main .list{
	display:grid;
	row-gap:8px;
}
.main .heading + .list{
	margin-block-start:30px;
}
.main .subheading + .list{
	margin-block-start:25px;
}
.main .list li{
	position:relative;
	padding-inline-start:1em;
}
.main .list li::before{
	position:absolute;
	top:9px;
	left:5px;
	display:block;
	width:5px;
	height:5px;
	border-radius:50%;
	background:#000;
	content:'';
}
.main .box{
	margin-block-start:70px;
	padding:50px min(5vw,50px) 51px;
	background:color-mix(in srgb,#000 12%,transparent);
	backdrop-filter:blur(3px);
}
.main .box:has(.link){
	padding-block-end:55px;
}
.main .box .link{
	margin-block-start:31px;
}
.main .link{
	width:400px;
	margin-inline:auto;
}
.main .button{
	display:block;
	padding-block:13px 12px;
	font-size:16px;
	line-height:1.2;
	color:#FFF;
	text-align:center;
	border-radius:23px;
	background:var(--button-background);
}
.main .address{
	margin-block-end:34px;
	font-size:22px;
	font-weight:400;
	overflow-wrap:anywhere;
	word-break:normal;
	lilne-break:strict;
}
@media screen and (max-width:800px){
}
input[type=text],
textarea{
	width:100%;
	padding:13px 12px 12px;
	font-size:16px;
	line-height:1.2;
	color:#FFF;
	border-radius:4px;
	background:color-mix(in srgb,#000 35%,transparent);
}
input[type=text].placeholder{
	text-align:center;
}
input[type=text].placeholder::placeholder{
	color:color-mix(in srgb,#FFF 55%,transparent);
	font-weight:400;
}
input[type=text].placeholder:focus::placeholder{
	color:transparent;
}
input[type=submit]{
	display:block;
	width:100%;
	padding-block:13px 12px;
	font-size:16px;
	line-height:1.2;
	color:#FFF;
	text-align:center;
	border-radius:23px;
	background:var(--button-background);
}
.radio{
	display:block;
	padding:13px 12px 12px;
	font-size:16px;
	line-height:1.2;
	color:#FFF;
	border-radius:4px;
	background:color-mix(in srgb,#000 35%,transparent);
	cursor:pointer;
}
.radio input[type=radio]{
	display:none;
}
.radio input[type=radio]+span{
	position:relative;
	display:block;
	width:fit-content;
	margin-inline:auto;
	padding-inline-start:31px;
}
.radio input[type=radio]+span::before,
.radio input[type=radio]+span::after{
	position:absolute;
	display:block;
	border-radius:50%;
	content:'';
}
.radio input[type=radio]+span::before{
	top:0;
	left:0;
	width:19px;
	height:19px;
	background:#FFF; 
}
.radio input[type=radio]+span::after{
	top:5px;
	left:5px;
	width:9px;
	height:9px;
	background:#000;
	opacity:0;
}
.radio input[type=radio]:checked+span::after{
	opacity:1;
}
.radio:has(input[type=radio]:checked){
	background:var(--button-background);
}
.checkbox{
	display:block;
	padding:13px 12px 12px;
	font-size:16px;
	line-height:1.2;
	color:#FFF;
	border-radius:4px;
	background:color-mix(in srgb,#000 35%,transparent);
	cursor:pointer;
}
.checkbox input[type=checkbox]{
	display:none;
}
.checkbox input[type=checkbox]+span{
	position:relative;
	display:block;
	width:fit-content;
	margin-inline:auto;
	padding-inline-start:31px;
}
.checkbox input[type=checkbox]+span::before,
.checkbox input[type=checkbox]+span::after{
	position:absolute;
	display:block;
	content:'';
}
.checkbox input[type=checkbox]+span::before{
	top:0;
	left:0;
	width:19px;
	height:19px;
	border-radius:2px;
	background:#FFF;
}
.checkbox input[type=checkbox]+span::after{
	top:2px;
	left:6px;
	width:7px;
	height:13px;
	border-inline-end:3px solid #000;
	border-block-end:3px solid #000;
	transform:rotate(45deg);
	transform-origin:center;
	opacity:0;
}
.checkbox input[type=checkbox]:checked+span::after{
	opacity:1;
}
.checkbox:has(input[type=checkbox]:checked){
	background:var(--button-background);
}
@media screen and (max-width:800px){
}

/* #authentication
-------------------------------------------------- */
#authentication .inner:last-of-type{
	padding-block-start:55px;
}
@media screen and (max-width:800px){
}

/* #send
-------------------------------------------------- */
@media screen and (max-width:800px){
}

/* #verified
-------------------------------------------------- */
#verified .contents{
	padding-block-end:145px;
}
@media screen and (max-width:800px){
}

/* #terms
-------------------------------------------------- */
@media screen and (max-width:800px){
}

/* #confirm
-------------------------------------------------- */
#confirm .important{
	padding-block:51px 50px;
	text-align:center;
}
#confirm .link{
	display:grid;
	grid-template-columns:repeat(2,auto);
	direction:rtl;
	gap:0px 0.8em;
	width:fit-content;
}
#confirm .link li:first-child{
	width:400px;
}
#confirm .link li:last-child{
	width:160px;
}
#confirm .link li:last-child .cancel{
	background:var(--nolink-background);
}
@media screen and (max-width:800px){
}

/* #complete
-------------------------------------------------- */
#complete .important:has(strong){
	margin-block-start:21px;
}
#complete .link{
	margin-block-start:35px;
}
@media screen and (max-width:800px){
}