@charset "UTF-8";

/*--------------------------------------------------------------
    import 
---------------------------------------------------------------*/
@import url(./font.css);
@import url(./general.css);

/*--------------------------------------------------------------
    Compo Module
---------------------------------------------------------------*/

/* media */
.media.sp { display:none; }

/* width */
.inner_width       { margin:0 auto; }
.inner_width.w1100 { width:1100px; }
.inner_width.w960  { width:960px; }
.inner_width.w860  { width:860px; }

/* column */
.wrap_column              { overflow:hidden; }
.wrap_column > .col_left  { float:left; }
.wrap_column > .col_right { float:right; }
.wrap_column.img_colmun .col_sent { width:600px; }
.wrap_column.img_colmun .col_img { width:200px; }

/* list sns button */
.wrap_list_sns > ul { text-align:left; }
.wrap_list_sns > ul > li { display:inline-block; }
.wrap_list_sns > ul > li + li { margin-left:5px; }
/* list sns button [Browser hack] */
.brwIE .wrap_list_sns > ul > li,
.brwEdge .wrap_list_sns > ul > li { vertical-align:middle; margin-bottom:10px; }

/* list type note */
.wrap_list_note > * > li { font-size:90%; line-height:1.6em; color:#555; }

/* list type mark */
.wrap_list_mark.list_ast > ul > li { margin-left:1em; text-indent:-1em; }
.wrap_list_mark.list_ast > ul > li::before { display:inline; content:"＊"; }
.wrap_list_mark.list_dot > ul > li::before { display:inline; content:"・"; }
.wrap_list_mark.list_squ > ul > li::before { display:inline; content:"■"; }

/* wrap [wire]  */
.wrap_wire { padding:20px 25px; border:solid 2px #ccc; }

/* wrap [wire]  */
.wrap_bg_gray { padding:20px 25px; background-color:#F2F2F2; }

/* title line box */
.ttl_line_box { border-bottom:solid 1px #6181a2; margin-bottom:30px; line-height:1.4em; font-size:105%; }
.ttl_line_box .box { display:inline-block; padding:10px 25px; background-color:#6181a2; color:#FFF; }

/* title side line */
.ttl_side_line { padding-left:5px; border-bottom:solid 1px #333; border-left:solid 6px #333; margin-bottom:30px; font-size:130%; line-height:1.4em; }
.ttl_side_line .s { font-size:75%; }
.ttl_side_line.noteSet { margin-bottom:0; }
.ttl_side_line.noteSet + .note { margin-bottom:30px; }

.line_h1_2 { line-height:1.2em !important; }
.line_h1_3 { line-height:1.3em !important; }
.line_h1_4 { line-height:1.4em !important; }
.line_h1_5 { line-height:1.5em !important; }
.line_h1_6 { line-height:1.6em !important; }

/* color */
.clrTxtWht { color:#FFF; }
.clrBgWht  { background-color:#FFF; }
.clrBgNone  { background-color:transparent; }

/* image */
.box_img img { width:100%; }

.box_img.vtc_img { width:420px; margin:60px auto 0; }
.box_img.large_img { width:630px; margin:60px auto 0; }

.box_img.float_img { overflow:hidden; }
.box_img.float_img > .img { width:340px; }
.box_img.float_img > .img.vtc { width:240px; }
.box_img.float_img > .img.left { float:left; margin-right:10px; }
.box_img.float_img > .img.right { float:right; margin-left:10px; }

.box_img .caption { margin-top:5px; text-align:right; font-size:85%; line-height:1.4em; }
.box_img .credit { margin-top:5px; text-align:right; font-size:65%; line-height:1.4em; color:#777; }
.box_img .caption + .credit { margin-top:1px; }

.icoBlank::after { display:inline-block; content:""; width:16px; height:14px; margin-left:5px; vertical-align:middle; background:url("/concert/compo/2020/common/img/common/ico-blank.png") no-repeat; background-size:cover; }

.btn_ticket { width:240px; }
.btn_ticket img { width:100%; }

.announceRead { margin-bottom:40px; text-align:center; font-size:125%; font-weight:bold; color:#F50105; padding: 16px 0; }

.wrap_spotify { text-align:center; }
.wrap_spotify iframe { display:inline-block; }

/*--------------------------------------------------------------
    Component colors
    @ 2020 colors    Gray        : #888
                     Glay[light] : #f1f1f1
                     Yellow      : #b38417
---------------------------------------------------------------*/
.clrBgAcse      { background-color:#b38417 !important; }
.clrBgAcse      { background-color:#b38417 !important; }
.clrAcse        { color:#b38417 !important; }
.clrNaviWrap    { background-color:#b38417 !important; }
.clrNaviTtl     { color:#b38417 !important; }
.clrHeaderBg    { background-color:#888 !important; }
.clrFooterBg    { background-color:#888 !important; }
.clrContentsBg  { background-color:#f1f1f1 !important; }
.clrRedTxt      { color:#c64040 !important; }

/*--------------------------------------------------------------
    Container | wrapper
---------------------------------------------------------------*/
html, body { height:100%; }

#container { position:relative; margin:0 auto; height:100%; min-height:100%; text-align:left; transition:.3s; }

#footer { bottom:0; width:100%; }

/*--------------------------------------------------------------
    Js Controler
---------------------------------------------------------------*/
.activeGlobalNavi { position:fixed; right:0; left:0; }

/*--------------------------------------------------------------
    Css fixFooter 
---------------------------------------------------------------*/
.fixFooter #footer { position:fixed; bottom:0; width:100%; }

/*--------------------------------------------------------------
    Common: Global navigation
---------------------------------------------------------------*/
/* 
 *   Global navigation -> Button
 */
#global_navigation .hamburger-btn { width:30px; height:30px; cursor:pointer; position:fixed; top:25px; right:35px; z-index: 9999; }
#global_navigation .hamburger-btn::after{ display:block; content:""; position:fixed; top:0; right:20px; width:60px; height:70px; background-color:#FFF; z-index:1000; transition:.1s; }
#global_navigation .hamburger-btn .hamburger-inner { position:relative; z-index:9998; }
#global_navigation .hamburger-btn .hamburger-inner > div { width:30px; height:3px; overflow: hidden; margin-bottom:7px; background:#555; transition:all 0.3s; }

#global_navigation .hamburger-btn.active::after { opacity:0; }
#global_navigation .hamburger-btn.active .hamburger-inner > div {position:absolute; width:100%; margin-bottom:0; background-color:#FFF; }
#global_navigation .hamburger-btn.active .hamburger-inner > div:nth-of-type(1) {-webkit-transform: translateY(11px) rotate(-315deg); transform: translateY(10px) rotate(-315deg); bottom:0; }
#global_navigation .hamburger-btn.active .hamburger-inner > div:nth-of-type(2) { display:none; }
#global_navigation .hamburger-btn.active .hamburger-inner > div:nth-of-type(3) { -webkit-transform: translateY(11px) rotate(315deg); transform: translateY(10px) rotate(315deg); bottom:0;}
#global_navigation .hamburger-btn.changeColor .hamburger-inner > div { background-color:#555 !important; /* background-color:inherit; << default */ } /* js controle color */
#global_navigation .hamburger-btn.active.changeColor .hamburger-inner > div { background-color:#FFF !important; } /* js controle color */
/* 
 *   Global navigation -> Navigation Menu
 */
#navi_menu { position:fixed; top:0; right:-340px; width:340px; font-size:105%; transition:all 0.3s; z-index:9999; }
#navi_menu .inner { padding:80px 20px 20px; transition:.3s; }
#navi_menu #menu .item_wrap > .ttl { padding:10px 20px; margin-bottom:30px; font-weight:bold; background-color:#FFF; }
#navi_menu #menu .item_wrap > ul { padding-left:20px; }
#navi_menu #menu .item_wrap > ul > li { margin-bottom:30px; font-weight:bold; line-height:1.6em; letter-spacing:-.03em; }
#navi_menu #menu .item_wrap > ul > li a { display:inline-block; position:relative; color:#FFF; text-decoration:none; }
#navi_menu #menu .item_wrap > ul > li a::after { display:block; content:''; width:0; height:1px; position:absolute; bottom:-5px; left:0; background:#FFF; transition:width 0.3s; }
#navi_menu #menu .item_wrap.sche_wrap > ul > li .date { display:block; }
#navi_menu #menu .item_wrap.sche_wrap > ul > li .date .l { font-size:140%; }
#navi_menu #menu .item_wrap.essay_wrap > ul > li { font-weight:normal; }
#navi_menu #menu .item_wrap.essay_wrap > ul > li .ttl { display:block; font-size:105%; font-weight:bold; }

#navi_menu #menu .item_wrap ul > li a:hover::after { width:100%; color:#FFF; }
#navi_menu.current { overflow-y:scroll; right:0; height:100%; z-index:9998; }

/*--------------------------------------------------------------
    Common: Header
---------------------------------------------------------------*/
#header > .inner { padding:20px 0px; }
#header #compo_title { width:400px; }
#header #compo_title img { width:100%; }

/*--------------------------------------------------------------
    Common: Footer
---------------------------------------------------------------*/

#footer { padding:30px 0px 100px; }
#footer > .inner { overflow:hidden; }

#footer .footer_box_a { display:inline-block; float:left; list-style-type:none; }
#footer .footer_box_a li { display:inline-block; margin-right:20px; }
	
#footer_copyright { float:right; margin-top:15px; font-size:80%; color:#FFF; }

/*--------------------------------------------------------------
    Common: Lower page
---------------------------------------------------------------*/
.page_low { background:#f1f1f1; }
.page_low #global_navigation .hamburger-btn::after{ display:none; }
.page_low #global_navigation .hamburger-btn .hamburger-inner > div { background:#ddd;}

.page_low #contents > .inner { padding:0 0 120px; }
.page_low .page_title { padding:60px 0; text-align:center; }
.page_low .page_title > .ttl { font-size:170%; }
.page_low .page_title > .ttl .s { display:block; margin-top:5px; font-size:75%; }

.page_low .wrap_article > .inner { border-radius:5px; padding:60px 0; }

.page_low .section + .section { margin-top:80px; }
.page_low .section + .wire_break { padding-top:60px; border-top:solid 1px #ddd; margin-top:60px; }
.page_low .section + .sec_break  { padding-top:80px; border-top:solid 4px #eee; margin-top:80px; }
.page_low .section .sec { margin-top:2em; }
.page_low .section .sec_list { line-height:1.6em; }
.page_low .section .sec_title { margin-bottom:50px; text-align:center; font-weight:bold; }
.page_low .section .sec_title.lang { font-size:140%; line-height:1.3em; }
.page_low .section .sec_title.lang .s { padding-top:5px; font-size:75%; line-height:1.4em; }
.page_low .section .sec_title.left { font-size:145%; text-align:left; }
.page_low .section .sec_title.left .s { font-size:65%; }

/*--------------------------------------------------------------
    Main visual
---------------------------------------------------------------*/
#main_visual { padding:20px 0; background-image:url("../img/index/bg-main.png"); background-repeat:no-repeat; background-size:cover; background-position:center; background-color:#c7c7c7; }
#main_visual img { width:100%; }
#main_visual > .inner { position:relative; min-height:560px; }

#main_visual .visual { position:absolute; top:0; left:0; width:680px; }
#main_visual .visual > .inner { position:relative; }
#main_visual .visual .copy { position:absolute; top:25px; right:-17px; font-size:60%; line-height:1.4em; color:#FFF; transform: rotate(90deg);}
/* [Browser hack] */
.brwChrome #main_visual .visual .copy { top:20px; right:-30px; font-size:100%; transform:scale(0.6) rotate(90deg); }

#main_visual .detail { position:absolute; right:0; bottom:0; width:560px; padding:30px 35px; background-color:rgba(0,0,0,.6); }
#main_visual .detail h1 { width:360px; }
#main_visual .detail .list_schedule { margin:30px auto; font-size:140%; font-weight:bold; }
#main_visual .detail .list_schedule li + li { margin-top:20px; }
#main_visual .detail .list_schedule li dl { display:inline-block; overflow:hidden; }
#main_visual .detail .list_schedule li dl dt { float:left; line-height:1.4em; }
#main_visual .detail .list_schedule li dl dt .l { font-size:150%; }
#main_visual .detail .list_schedule li dl dd { padding-top:.2em; margin-left:7.5em; font-size:105%; line-height:1.3em; }
#main_visual .detail a { display:inline-block; position:relative; color:#FFF; text-decoration:none; }
#main_visual .detail a::after { display:block; content:""; position:absolute; bottom:0; width:0; height:1px; background-color:#fff; }
#main_visual .detail a:hover::after { width:100%; }

#main_visual .title_en { position:absolute; top:0; left:0; width:78px; }
#main_visual .name_en { position:absolute; bottom:90px; left:80px; width:445px; }
/*#main_visual .name_en .announce { display:block; padding:10px 15px; border:solid 3px #F50105; margin-top:20px; text-align:center; font-size:165%; font-weight:bold; color:#F50105; }*/
#main_visual .name_en .announce { 
  display: block;
	position: relative;
	text-align: center;
	text-decoration: none;
	background: #fff;
  background-color: rgb(255,255,255,0.2);
  font-size:165%;
  font-weight:bold;
  padding:10px 15px;
  border:solid 3px #F50105;
  color:#F50105;
}

#main_visual .name_en .announce:hover {
   background-color: rgb(255,255,255,0.6);
  cursor: pointer;
  text-decoration: none;
}


#main_visual .name_en .announce a{ color:#F50105;}

.emergency #main_visual .name_en { bottom:36px; }

/*--------------------------------------------------------------
    Page: front
---------------------------------------------------------------*/
.page_front #contents { padding:60px 0; border-top:solid 4px #b98610; }
.page_front #contents .col_href { width:470px; }
.page_front #contents .col_3 > .col { width:32%; }
.page_front #contents .col_3 > .col + .col { margin-left:2%; }
.page_front #contents > .inner { text-align:center; }

.page_front .wrap_essay { display:inline-block; }
.page_front .wrap_essay .announceRead { background-color: #fff;border: 3px solid #F50105; }
.page_front .wrap_essay .announceRead ul { display: inline-block;padding-top: 20px; }
.page_front .wrap_essay .announceRead ul li { text-align: left; }
.page_front .wrap_essay .announceRead ul li+li { padding-top: 10px; }
.page_front .wrap_essay > .ttl { padding:5px 10px; line-height:1.4em; background-color:#b38417; color:#FFF; }
.page_front .wrap_essay .list_essay { display:inline-block; line-height:1.6em; }
.page_front .wrap_essay .list_essay li { position:relative; float:left; padding:10px; border-left:solid 14px #888; margin-top:5px; text-align:left; background-color:#FFF; }
.page_front .wrap_essay .list_essay li::before { position:absolute; top:50%; left:-14px; content:""; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 7px solid #FFF; transform: translate(50%,-50%) }
.page_front .wrap_essay .list_essay li:nth-child(even) { margin-left:20px; }
.page_front .wrap_essay .list_essay li .ttl { font-weight:bold; }
.page_front .wrap_essay .list_essay li a { text-decoration:none; color:#333; }
.page_front .wrap_essay .list_essay li a:hover { text-decoration:underline; }

.page_front .wrap_sns .list_sns li { padding:20px 0; text-align:center; background-color:#FFF; }
.page_front .wrap_sns .list_sns li iframe { display:inline-block; }

.page_front .wrap_sponsor { margin-top:60px; }
.page_front .wrap_sponsor p { font-size:90%; line-height:1.4em; color:#555; }

/*--------------------------------------------------------------
    Page: Ticket
---------------------------------------------------------------*/
.page_ticket {}

.page_ticket .sec_ticket_date { font-size:115%; font-weight:bold; }
.page_ticket .sec_ticket_date ul li { margin-top:10px; }
.page_ticket .sec_ticket_date ul li dl { overflow:hidden; }
.page_ticket .sec_ticket_date ul li dl dt { float:left; }
.page_ticket .sec_ticket_date ul li dl dd { margin-left:28em; }
.page_ticket .sec_ticket_date ul li dl dd::before { display:inline; content:"："; }

.page_ticket .sec_tel { padding:30px 60px; border:solid 20px #f6f6f6; margin-top:40px; text-align:center; font-weight:bold; }
.page_ticket .sec_tel .place { font-size:145%; }
.page_ticket .sec_tel .tel { margin-top:10px; font-size:105%; }
.page_ticket .sec_tel .tel .l { font-size:165%; }

.page_ticket .sec_buy_ticket { overflow:hidden; margin-top:40px; font-weight:bold; }
.page_ticket .sec_buy_ticket ul li { padding-bottom:30px; border-bottom:solid 1px #ccc; margin-bottom:30px; }
.page_ticket .sec_buy_ticket .box_detail > * { margin-top:5px; }
.page_ticket .sec_buy_ticket .box_detail .date { font-size:120%; }
.page_ticket .sec_buy_ticket .box_detail .concert { font-size:140%; }

.page_ticket .sec_play_guide ul li { line-height:1.6em; }
.page_ticket .sec_play_guide ul li + li { margin-top:15px; }

.page_ticket p.cancel {border:solid 2px #cc0000; padding:5px 10px; color:#cc0000; margin:1em 100px 0 0; width:8em; text-align: center;}

/*--------------------------------------------------------------
    Page: Schedule
---------------------------------------------------------------*/
.page_schedule #contents > .inner { padding-top:80px; }


.page_schedule .wrap_detail.wrap_column > .col_left { width:480px; }
.page_schedule .wrap_detail.wrap_column > .col_right { width:340px; }

.page_schedule .wrap_parts { padding-bottom:30px; border-bottom:solid 1px #ddd; margin-bottom:30px; }
.page_schedule .wrap_parts .name + .name { margin-top:20px; }
.page_schedule .wrap_parts .name .ja { font-size:135%; }
.page_schedule .wrap_parts .name .en { margin-top:5px; line-height:1.4em; }
.page_schedule .wrap_parts .name.sub .ja { font-size:100%; line-height:1.3em; }
.page_schedule .wrap_parts .name.sub .en { font-size:85%; }
.page_schedule .wrap_parts .name .s { font-size:70%; }
.page_schedule .wrap_parts .ttl { margin-bottom:20px; font-size:125%; font-weight:bold; }

.page_schedule .wrap_img_performer { text-align:right; }
.page_schedule .wrap_img_performer img { width:100%; }
.page_schedule .wrap_img_performer .img_large + .img_large { margin-top:20px; }
.page_schedule .wrap_img_performer .wrap_img_small { display:inline-block; overflow:hidden; }
.page_schedule .wrap_img_performer .img_small { float:left; width:160px; margin-top:20px; }
.page_schedule .wrap_img_performer .img_small:nth-child(even) { margin-left:20px; }
.page_schedule .wrap_img_performer .img_small:nth-child(3) { display:inline-block; float:none; }

.page_schedule .wrap_ticket .price { font-size:145%; font-weight:bold; }

.page_schedule .wrap { margin-top:50px; }
.page_schedule .wrap_about .read { margin-bottom:20px; font-size:125%; font-weight:bold; }

.page_schedule .wrap_finalist .wrap_prof + .wrap_prof { margin-top:60px; }
.page_schedule .wrap_finalist .wrap_prof .name { border-bottom:solid 1px #555; margin-bottom:10px; font-size:135%; font-weight:bold; line-height:1.2em; }
.page_schedule .wrap_finalist .wrap_prof .name > * { display:inline; }
.page_schedule .wrap_finalist .wrap_prof .name .en { padding-left:10px; }
.page_schedule .wrap_finalist .wrap_prof .name .s { font-size:70%; }
.page_schedule .wrap_finalist .wrap_prof .title { margin-bottom:10px; font-size:115%; font-weight:bold; }
.page_schedule .wrap_finalist .wrap_prof .title .s { font-size:75%; }
.page_schedule .wrap_finalist .wrap_prof .title .e { font-style:italic; }
.page_schedule .wrap_finalist .wrap_prof .title .n { font-weight:normal; }

.page_schedule .wrap_comment .ttl { font-size:115%; }

/*--------------------------------------------------------------
    Page: Discography (CD)
---------------------------------------------------------------*/
.page_discography .wrap + .wrap { padding-top:40px; border-top:solid 1px #ddd; margin-top:40px; }
.page_discography .wrap_work .label { display:inline-block; padding:5px 10px; border-radius:3px; margin-bottom:10px; font-size:90%; line-height:1.2em; background-color:#000; color:#FFF; }
.page_discography .wrap_work .label + .label { margin-left:5px; }
.page_discography .wrap_work .ttl { margin-bottom:15px; font-size:125%; line-height:1.4em; }
.page_discography .wrap_work .list { line-height:1.8em; }
.page_discography .wrap_work .list + .list { margin-top:15px; }
.page_discography .wrap_work .site { margin-top:15px; }
.page_discography .wrap_work .list_play { padding:20px; background-color:#f6f6f6; }
.page_discography .wrap_work .list_play li + li { margin-top:20px; }
.page_discography .wrap_work .list_play li a { position:relative; }
.page_discography .wrap_work .list_play li a::before { display:inline-block; content:""; width:20px; height:20px; border-radius:3px; margin-right:5px; line-height:1.8em; background-color:#226B94; vertical-align:middle; }
.page_discography .wrap_work .list_play li a::after { display:block; content:""; position:absolute; top:50%; left:5px; width:0; height:0; border-top:solid 4px transparent; border-bottom:solid 4px transparent; border-left:solid 6px #FFF; transform:translate(50%,-50%); }

/*--------------------------------------------------------------
    Page: essay
---------------------------------------------------------------*/
.page_essay .secBox { margin-top:40px; }
.page_essay .secBox .secBoxTtl { font-size:135%; font-weight:bold; color:#b78000; }
.page_essay .secBox .secBoxTtl .s { font-size:65%; }


/*--------------------------------------------------------------
    Page: interview
---------------------------------------------------------------*/
.page_interview .q_txt { color:#b78000; }
.page_interview .q_txt + .a_txt { margin-top:40px; }
.page_interview .a_txt + .q_txt { margin-top:40px; }
.page_interview .a_txt .clrRedTxt { font-weight:bold; }

.page_interview .artwork { width:100%; max-width:300px; margin-right:auto; margin-left:auto; }
.page_interview .artwork img { width:100%; }

/*ページトップ用
----------------------------------------------------------------*/

#page-top {
	position: fixed;
	bottom: 20px;
	right: 20px;
	font-size: 77%;
}
#page-top a {
	background: #000;
	text-decoration: none;
	color: #fff;
	width: 100px;
	padding: 15px 0;
	text-align: center;
	display: block;
	border-radius: 5px;
}
#page-top a:hover {
	text-decoration: none;
	background: #666;
}