@charset "UTF-8";
/* CSS Document */
/* PC HEADER */
#header { width:100%; padding: 0; box-sizing: border-box; margin: 0 auto; background-color: #0a3e6f; position: relative; color: #fff;}
#header .inBox{padding: 0 30px; box-sizing: border-box; display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; margin: 0 auto; position: relative; width: 100%; min-height: 90px;}
#header h1{ font-weight: bold; font-size: 20px; padding: 20px 0;}
#header a{ color: #fff;}
#gNavi { margin: 0 0 0 auto;}
#gNavi ul { display: flex; justify-content:flex-end; align-items: center; flex-wrap: wrap; }
#gNavi ul li { float:left; font-size: 15px; padding: 10px } 

#gNavi ul li a{ text-decoration: none; line-height: 18px; font-weight: normal; display: flex; align-items: center; color: #fff; transition: all 0.5s;}
#gNavi ul li a:after{ font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f0a9"; margin-left: 0.2em;}
#gNavi ul li a:hover { opacity: 0.6; }
#gNavi ul li a.active { color: #a5d1fb; }
#gNavi ul li a.active:after{content: "\f0ab"; }
#gNavi ul li a.active:hover{ opacity: 1;}
#gNavi ul li a.comingSoon { position: relative; color: hsla(0,0%,100%,0.50);}
#gNavi ul li a.comingSoon:hover{ opacity: 1;}
#gNavi ul li a.comingSoon:hover:before{ position: absolute; content: 'coming soon' ; color: #fff; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); font-size: 10px; text-align: center; line-height: 18px; pointer-events: none; }

/* SP HEADER for CONTENT PAGE */
/*ハンバーガーメニューアニメーション*/
.menu-trigger,.menu-trigger span { display: inline-block;transition: all .4s; box-sizing: border-box; }
.menu-trigger { position: relative; width: 40px; height: 34px; cursor: pointer;}
.menu-trigger span { position: absolute; left: 0; width: 100%;  height: 4px; background-color: #fff;  border-radius: 4px; }
.menu-trigger span:nth-of-type(1) { top: 0; }
.menu-trigger span:nth-of-type(2) { top: 15px; }
.menu-trigger span:nth-of-type(3) { bottom: 0; }
.menu-trigger.active span { background-color: #fff;}
.menu-trigger.active span:nth-of-type(1) { -webkit-transform: translateY(15px) rotate(-38deg); transform: translateY(15px) rotate(-38deg); }
.menu-trigger.active span:nth-of-type(2) { opacity: 0; }
.menu-trigger.active span:nth-of-type(3) { -webkit-transform: translateY(-15px) rotate(38deg); transform: translateY(-15px) rotate(38deg); }

#spHeader{ display:none; position:fixed; width:100%; top:0; left:0; z-index:99999999; overflow:visible; }
#spHeader #spHeaderBox { padding:80px 0 0 0; position:relative; background-color: #0a3e6f; z-index:99999999; }
#spHeader #spHeaderBox .spMenu {position:absolute; display:block; top:50%; right:20px; width: 40px; height: 40px; transform: translateY(-50%);}
#spHeader #spHeaderBox h2 a { color: #fff; position: absolute; top:50%; transform: translateY(-50%); left: 20px; max-width: calc( 100% - 90px); font-size: 18px; font-weight: bold;}
#spHeader #spNavi { top:0; left:0; width:100%; height:0px; margin:0 0 0 0; overflow:hidden; position:fixed; transition:opacity 0.5s ease-in 0s; z-index:99999998; padding:0 0 0 0; box-sizing:border-box; opacity:0; background-color: hsla(212,68%,29%,0.90); }
#spHeader #spNavi.active { height:100%; padding:16.25% 0 0 0; opacity:1; }
#spHeader #spNavi ul { box-sizing:border-box; padding:20px; height:100%;overflow:auto; }
#spHeader #spNavi ul li { display:block; width:100%; float:none; margin-bottom: 2px; box-sizing:border-box; position:relative; z-index:99999999;  }
#spHeader #spNavi ul li a { display:block; font-size:4vw; text-align:center; color:#fff; line-height:1.2em; padding:1em 0; text-decoration:none; }
#spHeader #spNavi ul li a:after{ font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f0a9"; margin-left: 0.2em;}
#spHeader #spNavi ul li a.active{ color: #a5d1fb;}
#spHeader #spNavi ul li a.active:after{content: "\f058"; }
#spHeader #spNavi ul li a.comingSoon { color:hsla(0,0%,100%,0.30); /*pointer-events: none;*/ position: relative;}
#spHeader #spNavi ul li a.comingSoon:hover:before{ position: absolute; content: 'Coming Soon' ; color: #fff; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); font-size: 12px; text-align: center; }
#spHeader #spNavi ul li a.comingSoon:hover { background-color:hsla(0,0%,100%,0); color:hsla(0,0%,100%,0.50); }

#spHeader #spNavi ul li.spMenu { display:block; position:absolute; background:none; width:100%; height:100%; z-index:99999998; border:none; float:none; text-indent:-9999px;}

/* FOOTER */
#page-top {  margin: 0 auto; position: fixed; bottom: 60px; right: 20px; }
#page-top a{ display: block; transition: all .3s; background-color: #333333; width: 40px; height: 40px;}
#page-top a:after{ content: ''; background-image: url("../img/pagetop.svg"); background-repeat: no-repeat; background-size: 25px auto; background-position: center; height: 100%; width: 100%; display: block;}
#page-top a:hover{ background-color: #000;}
#page-top span{ display: table-cell; vertical-align: middle;}
#footer { width: 100%; padding: 30px 0; font-size: 12px; text-align: center; background-color: #a688bd; box-sizing: border-box; margin: 40px 0 0 0; color: #fff; }
#footer .title{ width: 498px; margin: 0 auto 20px; max-width: 60%;}
#footer a{ color: #fff; margin: 0 0 0 30px;}
#footer a:hover{ opacity: 0.6}
.bnr_evesemi{ max-width: 400px; width: 60%; margin: 0 auto 80px;}


/* COMMON PAGE */
h3{ }
.commonContent { width: 100%; max-width: 1100px; padding:0px 50px; box-sizing: border-box; margin: 0 auto; position: relative;}
#pageTitle{ color: #0a3e6f; font-size: 20px; margin: 0 0 50px 0; border-top: 1px solid #0a3e6f; padding: 10px 0 0 0; font-weight: bold;}

.item_event{ border-top: 1px solid #333; padding: 4px 0 0; margin-bottom: 60px; position: relative; }
.item_event p{ margin-bottom: 10px;}
.item_event p.tit{ font-weight: bold; font-size: 19px; line-height: 1.4}
.item_event p.tit span.sub{ font-size: 80%;}
.item_event p.tit span.sub_p{ font-size: 14px; display: block; margin-top: 5px }
.item_event p.tit .logoImg{ margin-right: 10px; max-width: calc(100% - 10px); margin-bottom: 5px; display: inline-block; vertical-align: text-top; line-height: 1;}
.item_event p.tit .logoImg.logo231029{ width: 233px;}
.item_event p.date{ color: #888888; font-weight: bold; margin-top: 10px; margin-bottom: 5px;}
.item_event p.date .venue{ color: #888888; font-weight: normal; display: block; font-size: 13px;}
.item_event p.btn_more{margin: 20px 0 0 0; /*z-index: 9;*/}
.item_event p.btn_more { color: #000; padding: 1em 1.5em; border: 1px solid #000; display: inline-block; transition: transform .3s; position: relative; font-size: 13px; box-sizing: border-box;}
.item_event p.btn_more:after{ font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f061"; margin-left: 1em;}
.item_event:hover p.btn_more{ color: #fff;}
.item_event p.btn_more::before {position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; content: ''; background: #000; transform-origin: right top; transform: scale(0, 1);  transition: transform .5s;}
.item_event:hover p.btn_more::before { transform-origin: left top; transform: scale(1, 1); }
.item_event:hover .txtArea,.item_event:hover .imgArea{ opacity: 0.5;}
.item_event a.pagelink{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: hsla(0,0%,0%,0.00); z-index: 1; /*background-color: hsla(0,0%,100%,0);*/}
/*.item_event:hover a.pagelink{ background-color: hsla(0,0%,100%,0.50);}*/
.item_event.henkou .inner{ padding-bottom: 40px; }
.item_event.noLink:hover .txtArea,.item_event.noLink:hover .imgArea{ opacity: 1;}
.link_henkou{ color: #fff; display: block; z-index: 2; position: absolute; background-color: #333; border-radius: 4px; width: fit-content; padding:3px 10px; left: 0; bottom: 92px; border: 1px solid #333; font-weight: normal; font-size: 14px;}
.link_henkou:after{font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f101"; margin-left: 0.3em;  }
.link_henkou:hover{ color: #333; background-color: #fff;}

/*ステータスの設定*/
.item_event span.status{ font-weight: bold; color: #fff; font-size: 10px; padding: 0.5em 1em; background-color: #990000; border-radius: 3px; display: inline-block; margin-top: 10px;}
.item_event span.status.soldOut:after{ content: '完売御礼！'}
.item_event span.status.onSale{ background-color: #b15757; }
.item_event span.status.onSale:after{ content: '前売券好評発売中'}
.item_event span.status.cancel{ background-color: #b15757; }
.item_event span.status.cancel:after{ content: '公演中止'}

.item_event.wide1{ width: 100%;}
.item_event.wide3{ width: calc((100% - 70px)/3); margin-right: 35px;}
.item_event.wide3.last_child{ margin-right: 0; }
.item_event .inner{ display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; position: relative;}
.item_event.wide1 .inner{ flex-direction: row-reverse;}
.item_event.wide1 .inner .txtArea{ width: 40%; display: flex; justify-content: center; align-items:flex-start; flex-direction: column; margin-bottom: 70px;}
.item_event.wide1 .inner .btn_more{ position: absolute; bottom: 0; left: 0;}
.item_event.wide1 .inner .imgArea{ width: 55%; margin-left: auto;}
.item_event.wide3 .inner{ height: 100%; align-items: flex-start; align-content: flex-start}
.item_event.wide3 .inner .txtArea{ width: 100%; position: relative; margin: 20px 0 0 0; padding-bottom: 70px;}
.item_event.wide3 .inner .btn_more{ position: absolute; bottom: 0; left: 0; margin: 0;}
.item_event.wide3 .inner .imgArea{ width: 100%; margin-left: auto; aspect-ratio: 660 / 490; display: flex; align-items: center;}
.item_event.wide3 .inner .imgArea.img_virtical{ justify-content: center;}
.item_event.wide3 .inner .imgArea.img_virtical img{ height: 100%;}

/*イベントのカテゴリーの設定*/
.category:before{ content: ''; font-weight: bold; font-size: 10px; padding: 0 0 0 17px; margin: 0 0 10px 0; display: block; background-repeat: no-repeat; background-size: 12px auto; background-position: left center; min-height: 15px; }
.item_event.category.opera{ border-top-color: #9f8418;}
.category.opera:before{ content: 'オペラ'; color:#9f8418; background-image: url("../img/icon_opera.svg");}
.item_event:hover.category.opera{ border-top-color: hsla(48,74%,36%,0.50);}

.item_event.category.concert{ border-top-color: #166140;}
.category.concert:before{ content: 'コンサート'; color:#166140; background-image: url("../img/icon_concert.svg"); background-size: auto 12px; }
.item_event:hover.category.concert{ border-top-color:hsla(154,64%,23%,0.50);}

.item_event.category.muse{ border-top-color: #1271a2;}
.category.muse:before{ content: 'ミューズサロン'; color:#1271a2; background-image: url("../img/icon_muse.svg"); }
.item_event:hover.category.muse{border-top-color:hsla(200,81%,35%,0.50);}

.item_event.category.ballet{ border-top-color: #810a69;}
.category.ballet:before{ content: 'バレエ'; color:#810a69; background-image: url("../img/icon_ballet.svg");  }
.item_event:hover.category.ballet{border-top-color:hsla(312,87%,27%,0.50);}

.item_event.category.nou{ border-top-color: #9e3004;}
.category.nou:before{ content: '能楽'; color:#9e3004; background-image: url("../img/icon_nou.svg"); background-size: auto 9px; }
.item_event.category.nou{border-top-color:hsla(17,95%,32%,0.50);}

.item_event.category.ootemachiza{ border-top-color: #fd8e34;}
.category.ootemachiza:before{ content: '大手町座'; color:#fd8e34; background-image: url("../img/icon_ootemachiza.svg"); background-size: auto 12px; }
.item_event:hover.category.ootemachiza{border-top-color:hsla(27,97%,60%,0.50)}

.item_event.category.stage{ border-top-color: #f47d7d;}
.category.stage:before{ content: '舞台'; color:#f47d7d; background-image: url("../img/icon_stage.svg"); /*background-size: auto 12px;*/ }
.item_event:hover.category.stage{border-top-color:hsla(0,83%,72%,0.50);}
.item_event:hover:before{opacity: 0.5; }

/*ボタン*/
a.btn_website{ background-color: #333333; padding: 0.5em 1em 0.5em !important; border-radius: 12px; font-size: 11px; line-height: 1.2; color: #fff; display: inline-block; margin: 5px 1em 2px 0; vertical-align: baseline; text-decoration: none !important;}
a.btn_website:after{font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f35d"; margin-left: 0.2em; }
a.btn_website:hover{ background-color: #0a3e6f;}

a.btn_officialsite{ color: #444; border: 2px solid #444; background-color: #fff; font-size: 13px; border-radius: 16px; font-weight: bold; padding: 0.5em 1em 0.5em !important; line-height: 1.2; display: inline-block; margin: 5px 1em 2px 0; vertical-align: baseline; text-decoration: none !important;}
a.btn_officialsite:after{font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f35d"; margin-left: 0.2em; }
a.btn_officialsite:hover{ color: #0a3e6f; border: 2px solid #0a3e6f;}

a.btn_access{ background-color: #333333; padding: 0.4em 1.5em; border-radius: 18px; color: #fff; margin: 5px 0 0 0; display: inline-block;}
a.btn_access:after{font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f35d"; margin-left: 0.2em; }
a.btn_access:hover{ background-color: #0a3e6f;}

a.local_link{ color: #333;}
a.local_link:after{font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f0c1"; margin-left: 0.3em; font-size: 85% }
a.local_link:hover{ color: #0a3e6f;}

/*SNSシェア*/
.snsArea{ max-width: 200px; position: absolute; top: 0; right: 50px; display: flex; justify-content: center; align-items: center; }
.snsArea .tit{ font-size: 10px; line-height: 1; padding: 4px 0 0 0; margin-right: 10px }
.snsArea .iconBox{ display: flex; justify-content: center; align-items: center;}
.snsArea .iconBox li{ width: 25px; height: 27px; margin: 0 0 0 10px;/* border: 2px solid #0a3e6f; border-radius: 15px; */display: flex; justify-content: center; align-items: center; line-height: 1; text-align: center; box-sizing:border-Box; transition: all 0.5s ease-in 0s}
.snsArea .iconBox li a i{ color: #0a3e6f; font-size: 18px;}
.snsArea .iconBox li.twitter{ }
.snsArea .iconBox li.facebook{ }
.snsArea .iconBox li:hover{ opacity: 0.8; }

/*動画用*/
.video{ width:100%; padding-bottom: 56%; height:0px; position: relative; border: 1px solid hsla(0,0%,100%,0); }
.video video{ position: absolute; top: 0; left: 0; width: 100% !important; height: 100%;}
.video iframe{ position: absolute; top: 0; left: 0; width: 100% !important; height: 100%;}

@media screen and (max-width:1059px) {
/*.link_henkou{ bottom: 162px; }*/
}

@media screen and (max-width:1000px) {
#gNavi ul { justify-content:flex-start}
#gNavi { }
#header h1{  }

}
@media screen and (max-width:768px) {
body { padding:80px 0 0 0; }

/* HEADER */
#header { display:none; }	

/* SP HEADER for CONTENT PAGE */
#spHeader { display:block; }

/* COMMON PAGE */
.commonContent { padding:30px 20px 30px 20px; min-width: auto; max-width: 100%; box-sizing: border-box; width: 100%; }
.snsArea{ position: static; margin: -30px auto 50px}
.snsArea .iconBox li a i{ font-size: 20px;}



/* FOOTER */
#page-top { bottom: 20px; }
#footerCaption{ padding:30px 20px 50px 20px;}
#footer { width: 100%; }
#footer a{ display: block; margin: 0;}
}
@media screen and (max-width:640px) {
	
.item_event.wide3{ width:100%; margin-right:0; margin-bottom: 50px;}
.item_event.wide3.last_child{ margin-bottom: 50px; }
	
.item_event.wide1 .inner{ flex-direction: column;}
.item_event.wide1 .inner .txtArea{ width: 100%; }
.item_event.wide1 .inner .imgArea{ width: 80%; margin: 0 auto 20px;}
.item_event.wide3 .inner{ flex-direction: row; }
.item_event.wide3 .inner .txtArea{ width: calc( 60% - 20px); margin: 0 0 0 auto;}
.item_event.wide3 .inner .imgArea{ width: 40%; margin: 0; aspect-ratio:auto;}
.item_event.wide3 .inner .btn_more{ left: calc( 40% + 20px);; margin: 0;}
.item_event p.tit{ font-size: 18px;}
.item_event p.btn_more a{ font-size: 12px;}
	
.item_event.henkou .inner{ padding-bottom: 0; }
.link_henkou{ position: relative; left:calc(40% + 20px); bottom: 78px;}
	
.bnr_evesemi{margin: 0 auto 50px;}

}
@media screen and (max-width:480px) {
#spHeader #spHeaderBox h2 a { font-size: 3.8vw;}
.item_event.wide3 .inner .txtArea{ width: calc( 100% - 120px); }
.item_event.wide3 .inner .imgArea{ width: 100px;}
.item_event.wide3 .inner .btn_more{ left:120px;}
.link_henkou{ left:120px;}

}
@media screen and (max-width:320px) {
.item_event.wide3 .inner .txtArea{ width: 100%; margin: 0;}
.item_event.wide3 .inner .imgArea{ width: 60%; margin: 0 auto 20px;}
.item_event.wide3 .inner .btn_more{ left:0px;}
}