@charset "utf-8";

/* -------（リセットCSS）-----------------------------------------------*/ 
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,p,blockquote,th,td,header, section, article, footer, article, aside, time ,nav,a,figure{margin:0;padding:0;}
fieldset,img{border:0; height: auto; width: auto;}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal; margin: 0;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}
p{text-justify:inter-ideograph;margin: 0 0 1em 0;}
header, section, article, footer, article, aside, time ,nav { display: block; }
figure{ line-height:0;}
*{ box-sizing: border-box; }


/* =custom style
------------------------------------------------------------------------------------------*/
:root {
  --keyc:#d50808;
  --font1:"Cormorant SC", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif;
  --font2:"游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", YuGothic, sans-serif;
}


/* =base
------------------------------------------------------------------------------------------*/
body {
	text-align: center;
    /*font-family: 'Noto Sans JP', sans-serif;*/
	font-family: var(--font2);
    font-weight: 400;
	font-size: 16px;
	line-height: 1.5em;
	background-color: #f6f6f6;
	color: #000;
}
body:before{ display: block; content: ""; background-image: url("../images/bg.webp"); background-repeat: no-repeat; background-size: 70%; background-position: center; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: -1; opacity: 0.02;}

html {overflow-y:scroll; height:100%;}

a {color: var(--keyc);text-decoration:none; outline:none; transition: 0.1s;}
a:hover { opacity: 0.7;}
a.active{}

.pc_only{ display:block;}
.sp_only{ display:none !important;}

#container{ position:relative;}

@media only screen and (max-width: 768px){
	body:before{ opacity: 0.05; background-size: 90%; background-position: bottom;}
    
	.pc_only{ display:none;}
	.sp_only{ display:block !important;}
}



/* =header
-----------------------------------------------------------------------------------------*/
header { text-align:left; position:fixed; z-index:99; top:0; width:100%; font-family: var(--font1); display: flex; justify-content: space-between; align-items: center; height: 80px;}

header .headlogo{ width: 15%; height: 100%; padding-left: 2%; line-height: 0;}
header .headlogo a{ display: flex; align-items: flex-end; height: 100%;}
header .headlogo img{ max-width: 80%; max-height: 85%;}

.toggle_nav,.nav,.global,.nav li,.nav li a{ height: 100%;}
.global{ width: 100%; margin-right:1.5vw; display: flex; }
.nav li a{ line-height:1em; font-size:22px;  text-align:center; padding:0 1em 0.75em ; position:relative; text-decoration: none; color:#000; display: flex; align-items: center; font-weight: 500;}

.nav li a span.btm{ position: absolute; bottom: 12px; left: 0px; width: 0%; height: 1px; background: var(--link_color); transition: all 0.3s ease;}
.nav li a:hover span.btm,
.nav li a.active span.btm{ width:100%;}

.nav li a:hover,
.nav li a.active{ color:var(--keyc);}
.nav li a.disactive {color: #999;}
.nav_trigger{display: none;}

.nav li.sns a{ width: 40px;  padding: 0 0 0.75em; margin: 0 0 0 10px;}
.nav li.sns a img{ width: 100%;}

@media only screen and (max-width: 768px){
	header { height:50px; padding: 10px 3% 0;}
	header .headlogo { padding-left: 0;    width: 50%;}	
	header .headlogo img{max-width: 100%; max-height: 100%;}
    
	.global{width:100%; position:fixed; z-index:10; top:0; left:0; overflow-y: hidden; padding-top:0; height:0; background-color:rgba(255,255,255,0.95); box-sizing: border-box; display: inherit;
	 -webkit-transition: 1s ease;  -moz-transition: 0.5s ease;  -o-transition: 0.5s ease;  -ms-transition: 0.5s ease;  transition:0.5s ease;}
	.global li{width: 100%; display:inherit;}
	.nav-active .global{ height:100vh;padding-top:47px;}
	.nav li.sp_top{ display: inherit;}

	.toggle_nav{ height: auto; -webkit-transition: 0.2s ease;  -moz-transition: 0.2s ease;  -o-transition: 0.2s ease;  -ms-transition: 0.2s ease;  transition: 0.2s ease;}
	.nav{ margin-bottom:0; width:100%; height:inherit;}
	.nav li{ padding-right: 0;height: auto;}
	.nav li a:hover,nav li a.at{  border-bottom: none;}
	.nav li a{ width:100%; max-width:inherit; text-align:center; padding: 0.75em 7%; height: auto;}
	.nav li a strong{ font-size:5vw; line-height:1em; margin-bottom:2vw; }
	.nav li a.on{ border-bottom:none;}
	.nav li a span.btm{ display:none;}
	.nav li a:hover,
	.nav li a.active{ color:#000; background-color:rgba(255,255,255,0.7);}
	
	.nav li.sns{ display: inline-block; width: 40px; margin-left: 10px;margin-top: 20px;}	
	.nav li.sns.insta{ margin-left: 7%;}	
	.nav li.sns a{ padding: 0; margin: 0;}

	/* Default navigation icon */
	.nav_trigger { display: block; position: fixed; width: 30px; height: 25px; right:3vw; top: 7px; z-index: 200;}
	.nav-active .nav_trigger { opacity: 0.7;}
	.nav_icon { display: inline-block; position: relative; width: 30px; height: 2px; background-color:var(--keyc); -webkit-transition-property: background-color, -webkit-transform; transition-property: background-color, -webkit-transform; transition-property: background-color, transform; transition-property: background-color, transform, -webkit-transform; -webkit-transition-duration: 300ms; transition-duration: 300ms;}
	.nav_icon:before,
	.nav_icon:after { content: ''; display: block; width: 30px; height: 2px; position: absolute; background:var(--keyc); -webkit-transition-property: margin, -webkit-transform; transition-property: margin, -webkit-transform; transition-property: margin, transform; transition-property: margin, transform, -webkit-transform; -webkit-transition-duration: 300ms; transition-duration: 300ms;}
	.nav_icon:before { margin-top: -9px;}
	.nav_icon:after { margin-top: 9px;}
	.nav-active .nav_icon { background: rgba(0, 0, 0, 0);}
	.nav-active .nav_icon:before { margin-top: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg);background:var(--keyc);}
	.nav-active .nav_icon:after { margin-top: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); background:var(--keyc);}

	.nav li a:hover span.btm,
	.nav li a.active span.btm{ display:none;}
	.nav li a span.jp{ font-size:3vw;}
}


/* =foot
-----------------------------------------------------------------------------------------*/
footer{ padding: 3vw 0 6vw; font-size: 14px; line-height: 1.7em;}
footer small{ font-size: 12px; line-height: 1.5em;}

.foot_sns{ margin-bottom: 5vw;}
.foot_sns .stit{ font-size: 32px;}
.foot_sns ul{ display: flex; justify-content: center;}
.foot_sns li{ width: 60px; margin: 0 15px;}
.foot_sns img{ width: 100%;}

@media only screen and (max-width: 768px){
    footer{ padding: 30px 0 60px; }
	footer small{ font-size: 12px; line-height: 1.5em; width: 94%; margin: 0 auto; display: block;}
	
	.foot_sns{ margin-bottom: 60px;}
	.foot_sns .stit{ font-size: 24px;}
	.foot_sns li{ width: 50px; margin: 0 10px;}
}

/* =ページトップ
------------------------------------------------------------------------------------------*/
.page_top{margin: 0;  text-align:center;position:fixed; right:3vw; bottom:2vw;  z-index:10; transition: 0.3s;}
.page_top a{background-color:#e85799;border-radius: 50%;height:12vw; width:12vw; line-height:1.3em; color:#fff; font-size:1.2vw; text-decoration: none; display: flex; align-items: center; justify-content: center; font-weight: bold;filter: drop-shadow(0px 0px 0.4vw rgba(0,0,0,0.4)); border: 0.4vw solid #fff;}
.page_top a:hover{text-decoration:none; opacity: 1; transform: scale(1.1);}
.page_top.off{bottom: -16vw;}

@media only screen and (max-width: 768px){
	.page_top a{height:22vw; width:22vw; line-height:1.3em;  font-size:2.7vw;}
	.page_top.off{bottom: -24vw;}
}


/********************** ローダー *******************************/
/* アニメーション */
.loader_bg{ background-color:#fff; width:100%; height:100vh; position:fixed; top:0; left:0; z-index: 1000;}

.loader{background-image:url(../images/logo.webp);background-repeat : no-repeat; background-size:16%; background-position : 50% 50%; z-index:1001; position:fixed; top:0; left:0; width: 100%; height: 100%; opacity:.scheblock0; animation: anime_loader 1s; animation-fill-mode:both;}

.top_blur{transition: 1.5s;}

.intro_loader .top_blur{  -ms-filter: blur(40px); filter: blur(40px);}
.intro_loader .main_img{opacity: 0;}
.intro_loader .main_txt{ opacity: 0; transform: translate(0, 50%); }

@keyframes anime_loader {
    0%  { opacity:0;}
    100%  { opacity:1;}
}
.intro_on .loader{ animation:none; animation-fill-mode: inherit;}
.intro_on .main_img{opacity: 1;}
.intro_on .main_txt{opacity: 1;transform: translate(0, 0);}


/* 00 */

@media only screen and (max-width: 768px){
    .loader{ background-size:40%;}
	.intro_loader .main_txt{ transform: translate(0, 30%); }
}

/******* youtube *******/
.youtube{position:relative;width:100%; margin:0 auto;padding-top:56.25%;}
.youtube iframe{position:absolute;top:0;right:0;width:100%;height:100%;}



/* =共通
------------------------------------------------------------------------------------------*/
main{ width: 100%; overflow: hidden; text-align: left;} 
main img{ max-width: 100%; }

.in{padding-top: 170px;}

.container{ width: 90%; max-width: 1300px; margin: 0 auto;}
.block{ margin-bottom: 10vw;}

.imgblock{ position: relative; height: 50vw; width: 100%; margin-bottom: 10vw; z-index: -1;}
.imgblock .imgblock_clip{position:relative;overflow:hidden;clip-path:inset(0 0 0 0); height:100%;}
.imgblock .imgblock_clip .imgfit{ position: fixed;left: 50%; top: 50%; transform: translate(-50%,-50%);pointer-events: none; z-index: -1; width: 100%; height: 100vh;}
.imgblock .imgblock_clip img{ object-fit: cover; width: 100%; height: 100%;}


.imgblock_clip:before{ content: ""; display: block; background-image: url("../images/bg/bg_dots.webp"); width: 100%; height: 100vh; position: fixed; left: 0; top: 0; opacity: 0.3; }

.in .imgblock:last-of-type{ margin-bottom: 0;}

@media only screen and (max-width: 768px){
    main{ padding-top: 0px;}
    .in{ padding-top: 80px;}
    
    .container{ }
	.block{ margin-bottom: 100px;}
	.imgblock{ margin-bottom: 50px; height: 100vw;}
	.imgblock .imgblock_clip img{ height: 100vh;}
}

/******* 見出し *******/
.tit{color: var(--keyc); line-height: 1em; font-size: 9vw; margin-bottom: 0.25em;}
.stit{ font-size: 60px; line-height: 1em; margin-bottom: 1em; font-family: var(--font1); letter-spacing: 0.1em; text-align: center; color: var(--keyc); font-weight: 500;}
.stit span{ font-size: 14px; display: block; letter-spacing: 0;text-indent: -1em; font-weight: 600; left: 1.5em; line-height: 1em; padding-top: 1em; }

/******* ボタン *******/
.btn{ display: block; background-color: #000; font-family: var(--font1); line-height: 1em; font-size: 20px; position: relative; text-align: center; padding: 1em 0; color: #fff;}
.btn::after { content: ""; position: absolute; top: calc(50% - 3px); right: 4%; width: 4px; height: 4px; border: 1px solid; border-color: transparent #fff #fff transparent; transform: rotate(-45deg);}

.btn.btnborder{ background-color: transparent;border: 1px solid var(--keyc);color: var(--keyc); font-size: 20px; font-family: var(--font2); letter-spacing: 0; padding: 1em 0;}
.btn.btnborder:after{ border-color: transparent var(--keyc) var(--keyc)transparent; }

@media only screen and (max-width: 768px){
    .tit{ text-align: center;}
    .stit{ font-size: 36px;}
	.stit span{ padding-top: 0.6em; font-size: 12px;}
    
    .btn.btnborder{ font-size: 16px;}
}


/******* SINGLE *******/
.single{ text-align: left; font-size: 18px; line-height: 1.7em;word-break: break-all;}
.single_head{ border-bottom: 1px solid #fff; padding-bottom: 1.5em; margin-bottom: 1.5em;}
.single_head .singletit{ font-weight: bold; font-size: 24px; line-height: 1.7em;}
.single_head .singledate{ font-weight: bold; font-size: 18px; line-height: 1.7em; color: var(--keyc); margin: 0;}

.single h1{ font-weight: bold; font-size: 1.5em; border-bottom: 1px solid #fff; padding-bottom: 0.5em; margin:2em 0 0.5em; }
.single h2{ border-left: 3px solid var(--keyc); padding: 0.5em 0 0.5em 1em; margin: 2em 0 1em; font-weight: bold; }
.single h3{ font-weight: bold; margin: 2em 0 1em;}
.newslist .newslwrap .news_toptxt blockquote,
.single blockquote{ background-color: rgba(0,0,0,0.2); padding: 1em; margin-bottom: 1em;}
.newslist .newslwrap .news_toptxt blockquote p:last-child,
.single blockquote p:last-child{ margin-bottom: 0;}
.single p{ margin-bottom: 1.7em;}

#news .btn.back{ width: 100%; margin: 100px auto; max-width: inherit;}

@media only screen and (max-width: 768px){
    #news .btn.back{ margin: 50px auto; }
}


/* = page contents
------------------------------------------------------------------------------------------*/

/******* mainimg *******/
.top_main{ margin: 70px 0 8vw; background-color: #f6f6f6; position: relative; height: calc(100vh - 70px); max-height: 60vw;}
.top_main img{ width: 100%;}

.top_main .main_tit{ width:41%; position: absolute;top:40%; left: 32%; transform: translate(-50%,-50%); z-index: 2;}
.top_main .main_img{ width: 50%; height: 100%; margin-left: auto; transition: 3s;}
.top_main .main_img img{ object-fit: cover; height: 100%; width: 100%;}
.top_main .main_txt{ margin: 0; position: absolute; bottom: 3vw; left: 5%; width: 90%; z-index: 2; transition: 1.5s;}

.top_support{ background-color: #ffa800; color: #000; padding: 3vw 4vw;font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',"メイリオ","Meiryo","MS PGothic","Osaka",Arial,sans-serif;}
.top_support h3{ font-weight: bold;  text-align: center; font-size: 2.5vw; line-height: 1.5em; margin-bottom: 1em;}
.top_support .sdate{ font-weight: bold; font-size: 1.5vw; line-height: 1.5em; margin-bottom: 0.5em;}
.top_support .sdate strong{ font-size: 1.4em;}
.top_support .support_wrap{ display: flex;}
.top_support .support_block{ text-align: center; font-weight: bold;}
.top_support .support_block .figure_block{ display: flex;}
.top_support .support_block .figure_block img{ width: 100%; max-width: inherit;}

.top_support .support_block.block1{ width: 32%; margin-right: 4%;}
.top_support .support_block.block2{ width: 64%;}
.top_support .support_block.block1 .figure_block figure{ width: 100%;}
.top_support .support_block.block2 .figure_block figure{ width: 50%;}

@media only screen and (max-width: 768px){
	.top_main{ padding: 65px 0 0; width: 100%; margin:0 0 100px; height: auto; max-height: inherit;}
    .top_main .container{ width: 100%;}
	
	.top_main .main_img{ width: 100%; margin-left: auto;}
	.top_main .main_tit{ width:75%; position: inherit; top:0; left: 0; transform: none; margin: -14vw auto 6vw;}
	.top_main .main_txt{ margin: 0; position: inherit; bottom: 0; left: 0; width: 90%;  margin: 0 auto; width: 75%;} 	
	
	.top_main .top_txt{ margin: -13.5% auto 0; width: 90%; }
    .top_main .catch2{ font-size: 16px; line-height: 1.7em; text-align: left; padding: 0 ; margin: 1em auto 1.5em;}
	.img01{ margin-top: 20px;}
    
    .top_main .enlink {padding: 0 0 1em 0; }
    .top_main .enlink .btn{  font-size: 16px; padding: 1em 0;}
	
	.top_support{ padding: 5% 5%;}
	.top_support .support_wrap{ display: inherit;}
	.top_support .support_block{ padding: 0;}
	.top_support h3{ font-size: 20px;}
	.top_support .sdate{ font-size: 16px;}
	.top_support .support_block.block1,
	.top_support .support_block.block2{ width: 100%;}
	.top_support .support_block.block1 .figure_block figure{ width: 50%; margin: 0 auto;}
    
}


/******* news *******/
.newslist{ margin-bottom: 2em; font-weight: bold; font-size: 20px; line-height: 1.7em;word-break: break-all; }
.newslist .newslwrap { display: flex; border-bottom: 1px solid #999; padding:1.5em 0; color: #000;}
.newslist .newslwrap:first-child{ }
.newslist .newslwrap .date{ width: 8em; text-transform: uppercase;}
.newslist .newslwrap .news_tit{ width: calc(100% - 8em);}
.newslist .newslwrap .news_tit a{ color: #000;}
.newslist .newslwrap .news_toptxt{ font-size: 16px; line-height: 1.7em; padding-top: 0.5em;}

#news .btn{ max-width: 400px; margin: 0 0 0 auto;}
#news .stit{ margin-bottom: 0.5em;}

.news_img{ width: 33%; float: left; margin: 0 2em 1em 0;}

@media only screen and (max-width: 768px){
	.newslist{ margin-bottom: 1em;}
    .newslist .newslwrap{ font-size: 16px; line-height: 1.7em; display: inherit;}    
    .newslist .newslwrap .date{ width: 100%;}
    .newslist .newslwrap .news_tit{ width: 100%;}
	.news_img{ width: 40%;  margin: 0 3% 3% 0;}
	
	.newslist .newslwrap:first-child{ padding-top: 0;}
}

/******* tickets *******/
.livedate{ margin-bottom: 40px;}
.livedate .datewrap{margin-bottom: 40px;}
.livedate .datewrap .dateblock{ font-size: min(4.2vw,52px); font-weight: bold; line-height: 1em; display: flex; flex-wrap: wrap;justify-content: center; align-content: center; margin-bottom: 0.2em;}
.livedate .datewrap .dateblock p{ margin: 0;}
.livedate .datewrap .dateblock .pref{ background-color: #000; color: #fff; align-items: center;font-size: 0.45em; line-height: 1em; display: inline-flex; margin-right: 0.75em; width: 4em; height: 2.1em; justify-content: center;}
.livedate .datewrap .dateblock .date{ margin-right: 0.3em;}
.livedate .datewrap .dateblock .txts{ font-size: 0.7em;}
.livedate .datewrap .time{ text-align: center; margin: 0; font-size: 20px; line-height: 1.7em;}

.livedate .datewrap .support{ text-align: center; font-weight: bold; font-size: 20px; line-height: 1.5em; padding-top: 0.5em;}

.livedate .datewrap .credit{ text-align: center; margin-bottom: 0;}

.ticket2{ display: flex; flex-direction: row-reverse; width: 100%; justify-content: space-between; margin-bottom: 7.5vw;}
.price{ width: 58%;}
.price .price_list{ display: flex; flex-wrap: wrap; border-top: 1px solid #999; font-size: 24px; background: 1em; }
.price .price_list:last-of-type{ border-bottom: 1px solid #999;}
.price .price_list dt{ width: 65%;  padding: 1em 0;}
.price .price_list dt span{ display: block; font-size: 0.55em; line-height: 1.5em;padding-top: 0.5em;}
.price .price_list dd{ width: 35%; text-align: right; padding: 1em 0;}
.price .price_list dd span{ font-size: 0.6em;}

.price .price_list.sold{ color: #666; background-color: #222; position: relative;}
.price .price_list.sold dt{ padding: 1em 0 1em 0.5em;}
.price .price_list.sold dd{ padding: 1em 0.5em 1em 0;}
.price .price_list.sold:after{ content: "SOLD OUT"; display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); font-weight: bold; color: #c00; font-size: 20px;}

.ticket_map{ width: 37%;}
.ticket_map span{ font-size: 12px; line-height: 1.5em; display: block;}
.price .notes{ font-size: 14px; line-height: 1.7em; margin-top: 1em;}

.price .credit{ margin-top: 1em; border: 1px solid #ccc; padding:1em 1.5em; font-size: 13px; line-height: 1.7em; }

.ticket_link{ background-color: #fff; text-align: center; color: #000; margin-bottom: 40px; font-size: 28px; line-height: 1.5em; font-weight: bold; border: 3px solid var(--keyc);}
.ticket_link .link_wrap{padding: 5%; }

.ticket_link .linkname{ background-color: var(--keyc); color: #fff; padding: 1em 0; margin-bottom: 0; font-size: 30px;}
.ticket_link .linkdate{  line-height: 1.7em; margin-bottom: 1.5em;}
.ticket_link .linkdate span{ font-size: 1.5em;}
.ticket_link .linkdate .end{text-decoration: line-through;font-size: 0.8em; line-height: 1.7em;}
.ticket_link .linkdate .active{ font-weight: bold; color: #c00;}
.ticket_link .linkdate .cs{ font-size: 0.8em; line-height: 1.7em;}
.ticket_link .btn{ background-color: #000; color: #fff; padding: 1.5em 0; font-size: 24px; letter-spacing: 0; font-family: var(--font2);margin:0 0 14px 0;}
.ticket_link .btn:last-of-type{ margin-bottom: 0;}
.ticket_link .notes{ font-size: 14px; line-height: 1.7em; text-align: left; margin:14px 0;}

.ticket_link.cs .btn{ pointer-events: none; background-color: #ccc; }

.ticket_link.end{ background-color: #999; color: #555; font-size: 18px; padding: 2% 5%; margin-bottom: 20px;}
.ticket_link.end .btn{ background-color: #666; font-size: 18px; color: #aaa; pointer-events: none; padding: 1em 0;}
.ticket_link.end .btn:after{ display: none;}

.ticket_link_box{ margin-bottom:1em;}
.ticket_link_box .linkdate{ font-size:0.7em;display: block;
    line-height: 1.5em;}
.ticket_link_box .linkname{ margin-bottom:0.5em; font-weight:bold;}

.ticket_link .ippan li{ margin-bottom: 0.5em;}
.ticket_link .ippan .btn{ font-size: 20px; padding: 0; height: 4em; display: flex; justify-content: center; align-items: center; flex-direction: column;}
.ticket_link .ippan .btn span{ font-size: 16px; line-height: 1em; display: block; margin-top: 0.5em;}

.notice{ border: 1px solid #999; padding: 3%; margin-bottom: 3vw;}
.notice h3{ font-weight: bold; text-align: center;  margin-bottom: 1em; font-size: 20px; line-height: 1.5em; color: var(--keyc);}
.notice ul{ list-style: disc; padding-left: 1.5em;}
.notice li{ margin-bottom: 0.5em;}

@media only screen and (max-width: 768px){
    .price .price_list{ font-size: 16px;}
	
	.price .price_list dt{ padding: 0.75em 0;}
	.price .price_list dd{ padding: 0.75em 0;}
    .ticket2{ flex-wrap: wrap-reverse;margin-bottom: 30px;}
    .price{ width: 100%; margin-bottom: 20px;}
	.price .credit{ border: none; border-top: 1px solid #ccc; padding: 1em 0 0 0; line-height: 1.5em;}
    .ticket_map{ width: 100%; margin-bottom: 1em;}
    
    .livedate{ margin-bottom: 10px;}
    .livedate .datewrap{ margin-bottom: 10px;}
    .livedate .datewrap .dateblock{ font-size: 7vw; line-height: 1.2em; justify-content: flex-start;}
    .livedate .datewrap .dateblock .date{}
    .livedate .datewrap .dateblock .venue{ width: 100%; font-size: 5.5vw; line-height: 1.7em; padding: 0.5em 0 0;}
    .livedate .datewrap .time{ text-align: left; font-size: 16px;}
	.livedate .datewrap .dateblock .pref{ height: auto;}
	
	.livedate .datewrap .support{ text-align: left;font-size: 16px;  padding-top: 1em;}
    
    .ticket_link{ font-size: 15px; margin-bottom: 20px; }
	.ticket_link .linkname{ font-size: 20px; line-height: 1em; padding: 0.75em 0;}
    .ticket_link .btn{ font-size: 16px; padding: 1.2em 0;}
    .ticket_link.cs{ font-size: 16px;}
	
	.ticket_link .linkdate{ margin-bottom: 1em;}
    
    .ticket_link.end{ font-size: 16px; padding: 5%; margin-bottom: 10px;}
    .ticket_link.end .btn{ font-size: 16px;}
    
    .ticket_link .ippan .btn{    font-size: 18px;}
	
	
	.notice { padding: 5%; margin-bottom: 20px; font-size: 15px;}
	.notice h3{ text-align: left; font-size: 16px;}
}

/******* movie *******/
#movie{ margin-top: calc(-10vw - 100px); position: relative;}
.movie1{ margin-bottom: 40px;}
.movie2{ display: flex; justify-content: space-between;}
.movie2 .movieblock{ width: 61.5%;}
.movie2 .spotifyblock{ width: 37%;}

@media only screen and (max-width: 768px){
	#movie{margin-top: calc(-10vw - 50px); }
    .movie1{ margin-bottom: 20px;}
    .movie2{ display: inherit;}
    .movie2 .movieblock{ width:100%; margin-bottom: 20px;}
    .movie2 .spotifyblock{ width: 100%;}
}

/******* biography *******/
.bio_txt{ line-height: 1.7em; margin-bottom: 50px;}
.bio_txt .sstit{ font-size: 2em; line-height: 1.7em; margin-bottom: 1em; text-align: center;}
.bio_txt figure{ background-color: #f6f6f6;  margin: 0 auto 2em;; text-align: center;}
.bio_txt img{ width: 100%;max-width: 800px;}

@media only screen and (max-width: 768px){
    .bio_txt{ margin-bottom:2em;}
    .bio_txt .sstit{  margin-bottom: 1em; font-size: 24px;}
}

/******* snslink *******/
.snslink ul{ display: flex; grid-gap: 10px; justify-content: center;}
.snslink ul li{ margin-right: 10px; width: 50%;}
.snslink ul li img{ width: 50px;}

@media only screen and (max-width: 768px){
    .snslink ul{ flex-wrap: wrap; justify-content: center;}
    .snslink ul li.official{ width: 100%; margin:0;}    
    .snslink ul li .btn{ width: 100%;}
}

/******* discography *******/
.disco_list{}
.disco_list .txtc{ text-align: center; margin-bottom: 40px;}
.disco_list ul{ display: flex; flex-wrap: wrap;}
.disco_list li{ width: 32%; margin-right: 2%; margin-bottom: 2%;}
.disco_list li:nth-child(3n){ margin-right: 0;}
.disco_list li figure{ margin-bottom: 0.7em;}

@media only screen and (max-width: 768px){
    .disco_list .txtc{ margin-bottom: 20px; text-align: left;}
    .disco_list li{ width: 48%; margin-right: 4%; margin-bottom: 2%;}
    .disco_list li:nth-child(3n){ margin-right: 4%;}
    .disco_list li:nth-child(2n){ margin-right: 0;}
}

/******* photo *******/
#photo{ line-height: 0;}
#photo img{ transition: 0.5s;}
#photo .swiper-slide-active{transform: scale(1.2);z-index: 5;position: relative;}

.slide{ position: relative;}
.swiper-button-prev:after, 
.swiper-button-next:after{ background-color: rgba(255,255,255,0.7); color: #000; font-size: 1.4vw; padding: 1.4vw 1.8vw; font-weight: bold;}
.swiper-button-prev, .swiper-container-rtl .swiper-button-next{ left: 16.6vw;}
.swiper-button-next, .swiper-container-rtl .swiper-button-prev{ right: 16.6vw;}

#photo a{ display: block;background-color: #fff; position: relative;}

#photo a:after{ display: block; content: ""; background-image: url("../images/play_icon.svg"); background-repeat: no-repeat; background-position: center; width: 5vw; height: 5vw; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); opacity: 0; transition: 0.3s;}

#photo a:hover{ opacity: 1; }
#photo a:hover img{ opacity: 0.7;}
#photo a:hover:after{ opacity: 1;}

@media only screen and (max-width: 768px){
    .swiper-button-prev:after, 
    .swiper-button-next:after{font-size: 3vw; padding: 3vw 4vw;}
    .swiper-button-prev, .swiper-container-rtl .swiper-button-next{ left: 0vw;}
    .swiper-button-next, .swiper-container-rtl .swiper-button-prev{ right: 0vw;}
}

/******* english *******/
#english .livedate .dateblock .pref{ width: 7em;}
#english .livedate .dateblock { font-size: min(3.9vw,48px);}

@media only screen and (max-width: 768px){
    #english .livedate .datewrap .dateblock{ font-size: 26px;}
}

/********************** stick link*******************************/
.stick_link{ position: fixed; bottom: 3%; left: 3%; width: 94%;z-index: 999;background-color: #fff;}
.stick_link a{ display: block; text-align: center; padding: 1.25em 0; font-weight: bold; color: #000; font-size: min(1.7vw,20px); line-height: 1em; letter-spacing: 0;}
.stick_link a:hover{ opacity: 0.9;}

@media only screen and (max-width: 768px){
	.stick_link{ bottom: 2%;}
	.stick_link a{ font-size: 15px; padding: 1em 0;}
}


/******* modal *******/
.modal_box{ text-align: left; padding: 5%;}
.modal_box img{ max-width: 100%;}
.modal_box h2{ font-size: 24px; line-height: 1.5em; font-weight: bold; margin-bottom: 1em; color: var(--keyc);}
.modal_box h3{ font-size: 18px; border-left: 2px solid var(--keyc); padding: 0.25em 0 0.25em 1em; margin: 1.5em 0 1em; font-weight: bold;}

/********************** pagination *******************************/
#pagination{position: relative; overflow: hidden;  display:flex; margin:30px auto 0; justify-content: center;}
#pagination a{ color:var(--keyc);}
#pagination .page-numbers{ border: 1px solid var(--keyc); margin-right: 8px; text-decoration: none; height:40px; line-height: 40px; font-size: 14px; width:40px;  padding: 0 8px !important;  text-align:center;}
#pagination .page-numbers:last-child{ margin-right: 0;}
#pagination .page-numbers.current{color: #646464; background:var(--keyc); border:none;}
#pagination .page-numbers.dots{ padding:0 12px !important;}
#pagination .next.page-numbers,#pagination .prev.page-numbers{ width:75px;}

@media only screen and (max-width: 768px){
    #pagination .page-numbers{ margin-right: 5px;}
}

/********************** 404 *******************************/
.error_404{width: 50%; margin: 0 auto 200px; text-align: center;}
.error_404 .btn{ max-width: 400px; margin: 2em auto;}

@media only screen and (max-width: 768px) { 
	.error_404{ width: 90%; margin: 0 auto; left: 50%; top: 45%;}
}


.alert{ margin: 5vw 0;}
.alert a{ letter-spacing: normal; background-color: #c00; color: #fff; padding: 1em 0 1.2em; color: #fff; width: 80%; margin: 0 auto; font-weight: bold; font-size: 24px; line-height: 1em;}
.alert .btn::after{border-color: transparent #fff #fff transparent;}


@media only screen and (max-width: 768px) { 
	.alert{ margin: 30px 0;}
	.alert a{padding: 1em 0 1.2em; width: 100%; font-size: 16px; }
}

/* =colorbox
------------------------------------------------------------------------------------------*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box;}
/* 
    User Style:
    Change the following styles to modify the appearance of ColorBox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;}
#colorbox{outline:none;}
   /* #cboxContent{margin-bottom:60px; overflow:visible;}*/
    #cboxContent{margin-right:60px; overflow:visible; margin-bottom:0;}
        .cboxIframe{background:#000;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{background:#000; position:relative; z-index:10000;}
        #cboxLoadingGraphic{background:url(../images/loading.gif) no-repeat center center;}
        #cboxLoadingOverlay{background:#000;}
        #cboxTitle{position:absolute; top:-22px; left:0; color:#000;}
        #cboxCurrent{position:absolute; top:-22px; right:205px; text-indent:-9999px;}
        #cboxSlideshow, #cboxClose{text-indent:-9999px; width:40px; height:100%; position:absolute; top:0;background:url(../images/controls2.png) no-repeat 0 0;}
		
        #cboxClose{background-position:7px 0; right:-50px; border:0; outline:none;}
        #cboxClose:hover{background-position:-40px 0;}


@media screen and (max-width: 768px) {
#cboxContent{ margin-right:0; margin-bottom:50px;}
#cboxClose{ right:0; top:inherit; bottom:-35px; height: 22px;}
}




/************* ANIMATIONS ***************/

.anime{ position:relative;  opacity:0;}
@keyframes imageAnimation { 
  0% { opacity: 0; animation-timing-function: ease-in; }
  10% { opacity: 1; animation-timing-function: ease-out; }
  25% { opacity: 1; }
  37% { opacity: 0; }
  100% { opacity: 0; }
}

/* SLIDE BOX ANIMATION */
@keyframes play {
  from {transform: translateX(-100%);opacity: 0;}
  to {transform: translateX(0);opacity: 1;}
}
@keyframes maskOut {
  from {transform: translateX(0); }  
  to {transform: translateX(101%); }
}

.play.blkin { animation-name: play; animation-duration: .4s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(.8,0,.5,1); position: relative;}
.play.blkin:before { animation-name: maskOut; animation-duration: .4s; animation-delay: .4s; animation-fill-mode: forwards; animation-timing-function: cubic-bezier(.8,0,.5,1); content: ''; position: absolute; top: 0; left: 0; z-index: 1000; width: 100%; height: 100%; background: #333;}

.play.fade_up {animation-fill-mode:both; animation-duration:1.5s; animation-name: fadeInUp;visibility: visible !important;}

@-webkit-keyframes fadeInUp { 
    0% { opacity: 0; -webkit-transform: translateY(100px); } 
    100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInUp {
 0% { opacity: 0; -webkit-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

.play.fade_in { animation-fill-mode:both; animation-duration:3s; animation-name: fadeIn; visibility: visible !important;}
@-webkit-keyframes fadeIn {
 0% { opacity: 0;}
 100% { opacity: 1;}
}
@keyframes fadeIn {
 0% { opacity: 0;}
 100% { opacity: 1;}
}