@charset "utf-8";

/* Common
----------------------------------------------------*/
.row {
	position: relative;
	font-size: 0;
}

.row:after {
	content: "";
	clear: both;
	display: table;
}

.column {
	position: relative;
	width: 100%;
	display: inline-block;
	vertical-align: top;
	font-size: 12px;
}

.col1 {
	width: 100%;
}

.col2 {
	width: 75%;
}

.col3 {
	width: 66.66%;
}

.col4 {
	width: 50%;
}

.col5 {
	width: 33.33%;
}

.col6 {
	width: 25%;
}

.black {
	color: #343536;
}

.section {
	padding-top: 90px;
	padding-bottom: 90px;
	overflow: hidden;
	background-color: var(--mainBg);
	color: #fff;
}

.section.sectionAbout,.section.sectionStaff{
	padding-top: 30px;
	padding-bottom: 30px;
}
.about h5{padding: 20px 0 5px; font-weight:700;}

.block{padding:40px 0; border-bottom:1px solid #FFF;}
.block:last-of-type{ border-bottom:none;}
.block .caption{padding:40px 0 20px; max-width:700px; margin:0 auto;}
.block .captionLeft{padding:40px 0;text-align: left;max-width:700px; margin:0 auto;}
.topic .block .captionLeft,.topic .block ul.attention,.ticketBlock ul.attention{padding:0 0 40px;}
.block h4:not(.castName){padding:30px 0 5px;text-align: left;max-width:700px; margin:0 auto;}
.block ul{max-width:700px; text-align: left; list-style:disc;list-style-position: outside;margin:0 auto;font-size:1.5rem;}
.block ul li,.caption ul li{margin-left:1em;}
.block a{color:#eee; border-bottom:1px solid;}
.block ul.attention,.ticketBlock ul.attention{list-style-type: none;}
.block ul.attention li::before{content: '●';	margin-left:-1em; }
.ticketBlock ul.attention.kome li{font-size:1.2rem}
.caption ul{width:60%; text-align: left; list-style-position: outside; font-size:1.5rem; margin:0 auto;}
.caption ul.attention.kome li::before{content: '※'; margin-left:-1em;}
.block ul.attention.kome li::before,.ticketBlock ul.attention.kome li::before{content: '※';	margin-left:-1em; }
.ticketBlock ul.attention {text-align: left;font-size:1.5rem; max-width: 300px; margin: 0 auto;}

.block ul li h4{font-weight:800;}
.block img{width:100%; margin:0 auto;}
.about .block{padding:0 0 40px; border-bottom:none; max-width:100%;}
.about .block .title{font-family: "Zen Maru Gothic"; font-weight: 500;margin-left:0;}

#goods .block,#goods .block h4{ max-width: 500px; text-align:left; margin:0 auto;padding: 15px 0; border:none;}
#goods .block h5{font-weight: bold; border-bottom: 1px solid;}
.sectionNews .block .title {padding-bottom: 20px;}
.sectionNews .block a{border-bottom:1px solid red; color:red;}
.sectionNews .block {max-width: 500px; margin: 0 auto;}
.sectionNews .block .date {text-align: right;}

.goodsList {
	padding-top: 20px;
	display: -webkit-box; /* old */
	display: -moz-box; /* old */
	display: -ms-flexbox; /* ie10 */
	display: -webkit-flex;
	display: flex;
	-webkit-box-lines: multiple; /* old */
	-moz-box-lines: multiple; /* old */
	-ms-flex-wrap: wrap; /* ie10 */
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-left: -7.5px;
	margin-right: -7.5px;
}

.goodsList > .item {
	display: block;
	width: 30%;
	margin-bottom: 50px;
	padding-left: 7.5px;
	padding-right: 7.5px;

}

.goodsList > .item .image:not(.slide) {
	position: relative;	
	padding: 20px 0 0;
	width: 100%;
	display:flex;
	align-items:center;
}
.goodsList > .item .caption{padding: 0 0 20px;}
.goodsList > .item .image .swiper-container,.goodsList > .item .image .swiper-wrapper{height:100%;width: 100%;padding: 0;}
.goodsList > .item .image .swiper-slide{width: 100%;height:100%;display:flex;
	align-items:center;}

.goodsList > .item .image img {
	display: block;
	width: 100%;
	height:auto;
}

.goodsList > .item .caption h3{font-size: 2rem; line-height: 1.2;padding-top: 5px;}
.goodsList .item .caption p.price{padding-bottom: 15px;}
.goodsList .item .caption p.itemInfo{font-size: 1.2rem;}
.goodsList .item .caption p.description{font-size: 1.5rem;}
p.description a{border-bottom:1px solid red; color:red;}
.goodsList .links {
	text-align: right;
	margin-top: 15px;
}
 

.small {
	font-size: 11px;
}

.overlay {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	display: none;
	width: 100%;
	height: 100%;
	background: rgba(3,4,5,0.5);
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
	z-index: 50;
}

.smallFont{font-stretch: semi-condensed;}
.btnBox{padding: 10px 0;}



.button {
	transition: 0.5s;
   max-width:500px; 
   margin:0 auto;
   min-width: 130px;
   color: var(#FFF);
   padding: 5px 10px;
   font-weight: bold;
   cursor: pointer;
   transition: all 0.3s ease;
   position: relative;
   display: inline-block;
   outline: none;
   border: 1px solid var(#FFF);
   background: transparent;
   z-index: 0;
   
}
.button a {
	color: var(#FFF);
   display: block;
	font-size:1.5rem;
	font-weight: 800;
	line-height: 2.3;
}
.button:hover {
   color: var(#FFF);
	background-position: right center; 
}

.button:hover:after {
   top: 0;
   left: 0;
   color: var(--btnMain);
 }
 .button:after {
   content: "";
   width: 100%;
   z-index: -1;
   position: absolute;
   height: 100%;
   top: 5px;
   left: 5px;
   transition: 0.5s;
   background-color: var(--main);
 }

.mobileOnly{display: none;}
.pcOnly{display: inline;}
.flexBox,.flexRow,.prof,.white-popup{
	display: -webkit-box; /* old */
	display: -moz-box; /* old */
	display: -ms-flexbox; /* ie10 */
	display: -webkit-flex;
	display: flex;
	flex-wrap:wrap;
	justify-content: center;
}
.flexRow{flex-wrap:nowrap;}

.boxWht{
	padding: 80px 10px;
		width: 100%;
		max-width:1080px;
		background-color: rgba(255,255,255,0.9);
		color:#222;
		box-shadow: 8px 8px 0px -2px var(--main),-8px -8px 0px -2px var(#FFF);
}
.boxWht.item2{width: 50%; max-width:450px; margin:20px; padding: 40px 5px;}
.boxWht.item2 .sectionContents{padding:0 20px;}

.boxWht::before,
.boxWht::after {
    position: absolute;
    top: 50%;
    left: 50%;
	width: 100%;
	max-width: 1080px;
    height: 100%;
    content: '';
}

.boxWht::before {
    border: 7px solid var(--btnBgColor-g1);
	transform: translate(-50%,-50%) rotate(8deg);
    z-index: -1;
}

.boxWht::after {
    border: 5px solid var(--btnBgColor-g2);
	transform:translate(-50%,-50%) rotate(-8deg);
	z-index: -2;
}

.section:nth-child(2n) .boxWht::before {
	border: 5px solid var(--btnBgColor-g2);
	transform: translate(-50%,-50%) rotate(5deg);
}

.section:nth-child(2n) .boxWht::after {
	border: 7px solid var(--btnBgColor-g2);
	transform:translate(-50%,-50%) rotate(-5deg);
}

/* Alert
----------------------------------------------------*/
.alertOverlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(4,5,6,0.8);
	z-index: 1000;
}

.alertBox {
	position: fixed;
	top: 50%;
	left: 50%;
	width: 90%;
	max-width: 600px;
	background: #ffe;
	border: 5px solid #fc0;
	text-align: left;
	padding: 15px;
	z-index: 1001;
	transform: translate(-50%, -50%);
}

.alertBox p {
	font-size: 14px;
	font-size: 1.4rem;
}

/* Header Hero
----------------------------------------------------*/
.headerHero {
	position: relative;		
	background:#222;
    background-image: url(../img/bg.jpg);
	background-size: cover;
	background-position: center 0;
	height: 30%;
	z-index: 60;
}
.headerHero .hhContents {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.headerHero .hhContents .flexBox{justify-content: center; align-items: center; width: auto;}
.headerHero .hhContents .flexBox .inner{padding: 30px;}

.headerHero .hhLogo a,.headerHero .hhPost a{display: block;}
.headerHero .hhLogo img {
	width: 100%;
	max-width: 400px;
	filter: drop-shadow(2px 8px 5px rgba(0,0,0,0.3));
}
.headerHero .hhPost{height: 100%;}
.headerHero .hhPost a{display: block;height: 100%;}
.headerHero .hhPost img{height: 100%; width: auto;}
.headerHero .caption p{
	padding:5px;
	font-size: 1.84rem;
	line-height: 28px;
	margin-top: 5px;
	font-weight: 500;
	color:var(--btnMain);
}
.headerHero .hhCopy ,.caption p.hhCopy{color:var(--keyColor-sub);
	text-shadow:
    1px 1px 0 #FFF,
    -1px 1px 0 #FFF,
    -1px -1px 0 #FFF,
    1px -1px 0 #FFF;}
.headerHero .caption p.date{padding-top: 5px;line-height: 1.1;}
.headerHero .caption p.acsess{padding-top: 0;
	margin-top: 0;
	line-height: 1.5;}
.headerHero .caption p .small{font-size: 1.5rem; font-weight: 500;}
.headerHero .audioPlayer {
	position: absolute;
	bottom: 0;
	color: #fff;
	width: 100%;
	padding: 5px 15px;
}
.headerHero .button a:not(:hover ){color: #fff; text-shadow: none;}

.headerHero .audioPlayer .title {
	font-size: 12px;
	font-size: 1.2rem;
	margin-bottom: 10px;
}

.headerHero .audioPlayer audio {
	width: 100%;
	max-width: 360px;
	height: 30px\9;
	border-radius: 3px;
}


/* IE10 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.headerHero .audioPlayer audio:not(:target) {
	height: 30px;
}
}


/* Global Header
----------------------------------------------------*/
.globalHeader{position: relative;}

.globalHeader .ghContents {
	display: -webkit-box; /* old */
	display: -moz-box; /* old */
	display: -ms-flexbox; /* ie10 */
	display: -webkit-flex;
	display: flex;
	position: fixed;
	width: 100%;
	margin: 0 auto;
	padding-right: 15px;
	padding-left: 15px;
	z-index: 100;
	justify-content: space-around;
	top:auto;
	bottom: 15px;
	left: 0;
	width: 100%;
	z-index: 100;
	border-bottom: none;}
.globalHeader.sticky .ghContents {position: fixed; top:0;bottom: auto; justify-content: space-between;
	background: var(--btnMain);
	align-items: center;
}

.globalHeader .ghLogo {
	width: 160px;
	height: auto;
	text-align: left;
}
.globalHeader.sticky .ghLogo{display:block;}

.globalHeader .ghLogo img {
	height: 50px;
	width: auto;
	margin-top: 5px;
}

.globalHeader.sticky .ghSpacer ,.sectionStaff .sectionHeader .spacer{
	-webkit-box-flex: 1; /* old */
	-moz-box-flex: 1; /* old */
	-ms-flex: 1; /* ie10 */
	-webkit-flex-grow: 1;
	flex-grow: 1;
}

.globalHeader .ghNavButton {
	display: none;
	width: 75px;
	height: 100%;
	text-align: center;
	cursor: pointer;
	z-index: 99;
}

.globalHeader .ghNavButton .zmdi {
	font-size: 24px;
	font-size: 2.4rem;
	line-height: 74px;
	color: #373374;
}

.globalHeader .ghNav {
	display: flex;
}

.globalHeader .ghNav .navItem {
	display: inline-block;
	text-align: center;
	color: inherit;
	padding:5px 10px;
}


.globalHeader.sticky .ghNav .navItem{padding: 0;}
.globalHeader .ghNav .navItem  .label{display: inline-block;
	outline: 0;
	border: 0;
	cursor: pointer;
	font-size: 1.5rem;
	width: 100%;
	text-decoration: none;
	line-height: 1;
	font-weight: 500;
	position: relative;
	padding: 10px;
	background: var(--btnMain);
	background-size: 300px,300px,100%;
	color: #fff;
	border-bottom: 5px solid var(--btnYel);
	box-shadow: 0 0 3px 3px rgba(255, 230, 66, 0.35);
	text-shadow: 0 0 3px rgb(0 0 0 / 30%);
	transition: all .3s;
	}
	.globalHeader .ghNav .navItem  .label:hover{
		box-shadow: 0 0 3px 3px rgb(0 0 0 / 8%);
	}
.globalHeader.sticky .ghNav .navItem .label{box-shadow:none;text-shadow:none;background: transparent;
	border: none;
	color: var(--btnYel);
}
.globalHeader .ghNav .navItem .label.currentPage{color: #ECECEC;}


.globalHeader .ghNav .navItem .caption {
	font-size: 1.1rem;
	color: #A8A8A8;
	text-shadow: 1px 1px 2px #222;
}


/* Contents
----------------------------------------------------*/
.popup-gallery {margin:0 auto;}
.popup-gallery img{max-height:500px; width:auto; border:1px solid #222; box-shadow:9px 11px 9px 1px rgba(0,0,0,0.5);margin:0 auto;} 
#prof .flexBox:nth-child(2n+1){justify-content: space-around;}
	.white-popup{align-items: center; height: 100%;}
	.mfp-inline-holder .mfp-content {height: 100%;}
	.white-popup .prof{padding: 20px 10px;max-width: 750px;border-radius: 5px;width: 80%;}

.main .section,.main h2{
	color: var(--keyColor);
	
	font-weight:700;
	font-size:4rem;
}
.main .sectionHeader .title{font-size:2.3rem ;}

.sectionHeader {
	margin-bottom: 45px;
	margin-bottom: 1px solid #222;
}

.sectionAbout .sectionHeader,.sectionStaff .sectionHeader{margin-top: 45px;}
.sectionStaff .sectionHeader{max-width:850px; margin: 0 auto; display: flex; vertical-align: middle; padding: 25px;}
.sectionStaff .sectionHeader h2{text-align:left;}
.sectionStaff .sectionHeader i{font-size: 28px; padding: 5px; color:#FFF;}
.sectionStaff .sectionHeader img{width:33px; height: auto;  padding: 0 5px;}
.sectionAbout .sectionContents,.sectionStaff .sectionContents{max-width:800px; text-align: left; }
.sectionAbout .sectionContents p{font-size:1.5rem;letter-spacing: 0.001em;}

.commentBox {color:#FFF;}
.commentBox p{font-size:1.3rem;line-height:1.2;text-align:left;}
.commentBox .sectionHeader{margin-bottom: 25px; }

.sectionCover {
}

.sectionCover .coverImage img {
	width: 100%;
	max-width: 300px;
	box-shadow: 0 0 30px rgba(3,4,5,0.1);
}

.sectionVideo .videoFrame {}

.sectionVideo .videoFrame .inner {
	position: relative;
	width: 100%;
	max-width: 560px;
	max-height: 315px;
	margin: 0 auto;
	padding-top: 56.25%;
}

.sectionVideo .videoFrame iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: 560px;
}

.sectionVideo .credit {
	font-size: 14px;
	font-size: 1.4rem;
	margin-top: 15px;
}

.sectionNotice {
}

.sectionNotice .sectionCopy {
	text-align: left;
}

.sectionNotice .block {
	margin-top: 30px;
}

.sectionNotice .block:first-child {
	margin-top: 0;
}

.sectionNotice .block > .title {
	margin-bottom: 5px;
}

.sectionSummary {
}

.sectionSummary .caption {
	text-align: left;
}

.sectionSchedule {
}

.sectionSchedule .caption {
	text-align: left;
}

.scheduleContainer {
	text-align:center;
	margin:0 auto;
}

.scheduleContainer .scheduleBlock {
	padding:30px 20px 30px;
	border-bottom: 2px solid ;
	color: #222;
}

.scheduleContainer .scheduleBlock:first-child{border-top: 2px solid ;}
.scheduleContainer .scheduleBlock .inner{background: #FFF; margin:50px 0 10px;}
.scheduleBlock .flexBox .item2{padding:20px 10px; }
.scheduleBlock .flexBox .item2 .header{padding:10px 0 20px; font-weight:700;}

.scheduleBlock .flexBox .item2 .header .subTitle{
	font-size: 1.4rem;
	margin-top: -15px;
	margin-bottom: 15px;}
.scheduleBlock .flexBox .item2 .inner{background: rgba(255,255,255,0.7); padding:20px 10px;}
.scheduleBlock .flexBox .item2.cast .inner{padding:20px 40px;}
.scheduleBlock .flexBox .item2.cast .inner .icon{margin-left: 1rem; margin-right:1rem;}
.scheduleBlock .flexBox .item2.character {min-width:500px;}
.scheduleBlock .flexBox .item2.character input[name="tab_item"],.scheduleBlock .flexBox .item2.character label{display: none;}
.scheduleBlock .flexBox .item2.character .item3{padding: 5px 10px;text-align: left; }
.scheduleBlock .flexBox .item2.character p{font-size:1rem;}


.scheduleContainer .scheduleBlock:first-child {
	margin-top: 0;
}

.scheduleBlock .area {
	display: inline-block;
	font-size: 13px;
	font-size: 1.3rem;
	border: 1px solid var(--btnMain);
	background:var(--btnYel);
	color:var(--btnMain);
	padding: 0 10px;
	line-height: 24px;
	margin-bottom: 10px;
}

.scheduleBlock > .title {
	font-size: 32px;
	font-size: 3.2rem;
	margin-bottom: 15px;
}

.scheduleBlock .theaterInfo {
}

.scheduleBlock .theaterInfo .phone {
	display: inline-block;
	font-size: 20px;
	font-size: 2rem;
	color: inherit;
	margin: 0 15px;
}

.scheduleBlock .theaterInfo .phone .zmdi {
	font-size: 24px;
	font-size: 2.4rem;
	vertical-align: middle;
	margin-right: 10px;
}

.scheduleBlock .theaterInfo .mapNav {
	display: inline-block;
	font-size: 16px;
	font-size: 1.6rem;
	color: inherit;
	margin: 0 15px;
}

.scheduleBlock .theaterInfo .mapNav .zmdi {
	font-size: 24px;
	font-size: 2.4rem;
	vertical-align: middle;
	margin-right: 10px;
}

.scheduleBlock .theaterInfo .mapDetail {
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
}

.scheduleBlock .theaterInfo .mapDetail.opened {
	opacity: 1;
}

.scheduleBlock .theaterInfo .mapDetail .map {
	display: none;
	width: 100%;
	max-width: 600px;
	height: 400px;
	margin: 15px auto 0;
}

.scheduleBlock .theaterInfo .mapDetail.opened .map {
	display: block;
}

.scheduleBlock .date {
	font-size: 20px;
	font-size: 2rem;
	padding: 30px 0 0;
}
.scheduleBlock .date .small{font-size: 1.7rem; font-weight: 500;}
.scheduleBlock .table {
	margin-top: 15px;
}

.scheduleBlock .table img {
	width: 100%;
	max-width: 400px;
}


.releaseDate{	width: 100%;
	margin: 30px auto;
}
.releaseDate .title{ margin: 0 !important;; font-size: 12px;font-size: 1.2rem; font-family: "Zen Maru Gothic";}
.releaseDate .date{font-size:2px;  font-size:2rem; color:rgba(185,0,3,1.00); padding: 0px; margin:0; font-weight: 500;line-height: 1.3;}
.tategaki{writing-mode: vertical-rl;
	line-height: 0;
	padding: 3px 0 0;;}


.scheduleBlock .price{
	display: inline-block;
	background: #FFF;
	width: 100%;
	max-width: 600px;
	margin: 30px auto;
	padding: 10px 30px 35px;
}

.scheduleBlock .price .title {
	display: inline-block;
	border: 1px solid #343536;
	border-radius: 15px;
	font-size: 12px;
	font-size: 1.2rem;
	padding: 0 15px;
	line-height: 20px;
	margin-bottom: 10px;
}

.scheduleBlock .price .priceList {
}

.scheduleBlock .price .priceList li {
	display: inline;
	margin: 0 15px;
}

.scheduleBlock .price .priceList li .label {
	display: inline-block;
	font-size: 14px;
	font-size: 1.4rem;
	background: #343536;
	padding: 0 15px;
	margin-right: 10px;
	line-height: 24px;
	color: #fff;
	vertical-align: middle;
}

.scheduleBlock .price .priceList li .num {
	display: inline-block;
	font-size: 24px;
	font-size: 2.4rem;
	vertical-align: middle;
}

.scheduleBlock .price .priceList li .tax {
	display: inline-block;
	font-size: 12px;
	font-size: 1.2rem;
	vertical-align: middle;
	margin-top: 5px;
	margin-left: 5px;
}

.scheduleBlock .price .nb {
	font-size: 13px;
	font-size: 1.3rem;
	margin-top: 5px;
}

.scheduleBlock .ticketContainer {
	display: -webkit-box; /* old */
	display: -moz-box; /* old */
	display: -ms-flexbox; /* ie10 */
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center; /* old */
	-moz-box-pack: center; /* old */
	-ms-flex-pack: center; /* ie10 */
	-webkit-justify-content: center;
	justify-content: center;
}

.scheduleBlock .ticketContainer .ticketBlock {
	border: 1px solid #e4e5e6;
	background: rgba(255,255,255,0.7);
	width: 50%;
	padding: 30px 15px;
	margin: 15px;
}

.scheduleBlock .ticketContainer .ticketBlock .title {
	margin-bottom: 15px;
}

.scheduleBlock .ticketContainer .ticketBlock .subTitle {
	margin-top: -15px;
	margin-bottom: 15px;
}

.scheduleBlock .ticketContainer .ticketBlock ul {
}

.scheduleBlock .ticketContainer .ticketBlock ul:not(.attention) li {
	margin-top: 30px;
}

.scheduleBlock .ticketContainer .ticketBlock ul li h4 {
	display: inline-block;
	border: 1px solid #343536;
	font-size: 15px;
	font-size: 1.5rem;
	margin-bottom: 15px;
	padding: 0 10px;
}

.scheduleBlock .ticketContainer .ticketBlock ul li h5 {
	font-size: 13px;
	font-size: 1.3rem;
	margin-top: -5px;
}

.scheduleBlock .ticketContainer .ticketBlock ul li a {
	display: block;
}

.scheduleBlock .ticketContainer .ticketBlock ul li p {
	display: block;
	font-size: 14px;
	font-size: 1.4rem;
}

.sectionSchedule .acsess {
	padding-bottom:60px;
}

.sectionSchedule .table,.block .table{text-align: center; padding: 20px 0 40px; }
.sectionSchedule .table table,.sectionSchedule .tableMobile,.block .table table{margin: 0 auto;}
.sectionSchedule table th,
.sectionSchedule table td,.block .table th,.block .table td{border: 1px solid var(--btnMain); border-bottom: 2px solid var(--btnMain); padding: 5px;  text-align: center; vertical-align: middle; font-size: 1.3rem;}
.sectionSchedule table td:last-child{border-right: 2px solid var(--btnMain)}
.sectionSchedule .table table th{width: 52px; border: 2px solid var(--btnMain);}
.sectionSchedule table td{font-size: 1.3rem;width: 52px;}
.sectionSchedule table td span,.sectionSchedule table th span{font-size: 0.89rem;}
.sectionSchedule .table  table tr:first-child th,.sectionSchedule .table  table tr:nth-child(2) td
{line-height: 1.2;padding: 3px; color: #fff; background: #1a98be; border-bottom: 2px solid var(--btnMain);}
.saturday{color: #5683ff;}
.sunday{color: #ff5353;}

i.icon-red{color:#db3636;}
i.icon-or{color:#ff8f3a;}
i.icon-pa{color:#c58add;}
i.icon-blue{color:#569fff;}
i.icon-p{color:#ff27c7;}
i.icon-y{color:#ffd771;}
i.icon-green{color:#1ddd4d;}
.cast-annotation{padding-top:20px;}


.sectionSns {
}

.sectionSns .snsContainer {
	display: -webkit-box; /* old */
	display: -moz-box; /* old */
	display: -ms-flexbox; /* ie10 */
	display: -webkit-flex;
	display: flex;
	margin-top: 30px;
}

.sectionSns .snsContainer:first-child {
	margin-top: 0;
}
.sectionSns .snsContainer img{
	max-width: 500px;
	width: 100%;
	margin: 0 auto;
   }
   
.sectionSns .snsBlock {
	width: 100%;
	margin: 0 15px;
	padding: 30px 20px 20px;
}

.sectionSns .snsBlock .header {
	margin-bottom: 15px;
	color: #444;
}

.sectionSns .snsBlock .header .subTitle {
	color: #A8A8A8;
}

.sectionSns .confetti .article {
	display: table;
	width: 100%;
	background: #fff;
	color: inherit;
	height: 220px;
}

.sectionSns .confetti .article .image {
	display: table-cell;
	width: 40%;
	max-width: 400px;
	height: 100%;
}

.sectionSns .confetti .article .image .imageFrame {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.sectionSns .confetti .article .image .imageFrame img {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	height: 100%;
	-webkit-transform:translate(-50%, -50%);
	transform:translate(-50%, -50%);
}

.sectionSns .confetti .article .image .imageFrame.leftAlign img {
	left: 0;
	-webkit-transform:translate(0, -50%);
	transform:translate(0, -50%);
}

.sectionSns .confetti .article .detail {
	position: relative;
	display: table-cell;
	text-align: left;
	vertical-align: top;
	padding: 30px;
}

.sectionSns .confetti .article .detail:before {
	content: "";
	position: absolute;
	top: 30px;
	left: -30px;
	border-width: 15px;
	border-style: solid;
	border-color: transparent #fff transparent transparent;
}

.sectionSns .confetti .article .detail .date {
	font-size: 14px;
	font-size: 1.4rem;
	color: #646566;
	margin-bottom: 5px;
}

.sectionSns .confetti .article .detail .title {
	margin-bottom: 15px;
}

.sectionSns .confetti .article .detail .caption {
	font-size: 14px;
	font-size: 1.4rem;
}

.sectionMusician .gridContainer {
	text-align: left;
}

.sectionMusician .column {
	padding-right: 15px;
	padding-left: 15px;
	margin-bottom: 60px;
}

.sectionMusician .part {
	text-align: center;
	font-size: 14px;
	color: #343536;
}

.sectionMusician .sectionCopy .title {
	text-align: center;
	font-size: 18px;
	font-size: 1.8rem;
	margin-bottom: 15px;
}

.sectionMusician .staffImage {
	text-align: center;
	margin-bottom: 15px;
}

.sectionMusician .staffImage img {
	width: 100%;
	max-width: 180px;
}

.sectionMusician .caption {
	text-align: left;
}

.sectionStaff {
}

.sectionStaff .gridContainer {
	text-align: left;
}

.sectionStaff .column {
	padding-right: 15px;
	padding-left: 15px;
	margin-bottom: 60px;
}

.sectionStaff .part {
	text-align: center;
	font-size: 14px;
	color: #A8A8A8;
}

.sectionStaff .sectionCopy .title {
	text-align: center;
	font-size: 18px;
	font-size: 1.8rem;
	margin-bottom: 15px;
}

.sectionStaff .staffImage {
	text-align: center;
	margin-bottom: 15px;
}

.sectionStaff .staffImage img{
	width: 100%;
	max-width: 180px;
}

.sectionStaff .caption {
	text-align: left;
}

.sectionContact {
	/*background: #F4F5F6*/
}

.sectionContact .contactContainer {
	display: -webkit-box; /* old */
	display: -moz-box; /* old */
	display: -ms-flexbox; /* ie10 */
	display: -webkit-flex;
	display: flex;
	justify-content: center;
}

.sectionContact .contactBox {
	width: 50%;
	border: 1px solid #fff;
	border-radius: 5px;
	margin: 0 15px;
	padding: 30px;
	background: rgba(25,25,25,0.5);
}

.sectionContact .contactBox .link {
	display: inline-block;
	color: inherit;
	margin: 15px 15px 0;
}

.sectionContact .contactBox .link .zmdi {
	font-size: 24px;
	font-size: 2.4rem;
	vertical-align: middle;
	margin-right: 10px;
}

.sectionCredit {
}

.creditList {
	max-width: 540px;
	margin-left: auto;
	margin-right: auto;
}

.creditList dt {
	width: 280px;
	float: left;
	clear: both;
	text-align: right;
	padding-top: 1px;
	padding-right: 30px;
	margin-bottom: 5px;
	color: var(--keyColor-sub);
	font-size: 14px;
	font-size: 1.4rem;
}

.creditList dd {
	margin-left: 280px;
	text-align: left;
	margin-bottom: 5px;
	font-size: 16px;
	font-size: 1.6rem;
}


.creditList a {
	color: inherit;
}

.creditList dd img.icon{width:30px; margin-bottom:5px;vertical-align:middle;}


.sectionVideo {min-height: 100vh;}

.castList{width: 100%; display:-webkit-box; display:-moz-box;	display:-webkit-flexbox;display:-moz-flexbox;display:-ms-flexbox;display:-webkit-flex;	display:-moz-flex;display:flex;	-webkit-box-lines:multiple;	-moz-box-lines:multiple;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;	-ms-flex-wrap:wrap;flex-wrap:wrap; margin-left:0;justify-content:center;align-content:flex-start;padding:20px 0;}
/*.castList .cast:hover{ box-shadow: 0px 0px 3px 3px rgba(255,255,255,0.50); }
.castList a{color:#fff;}
.castList a:hover{opacity: 1.0; color:#fff;}*/
.castList .cast{padding: 10px;width: 33%;text-align: center;}
.castList .cast img{width: 100%; border: 5px solid #FFF;max-width: 200px;}
.cast .snsNav .label.button{
	border:1px solid var(--keyColor);
	border-bottom: 5px solid var(--keyColor);
	font-size: 1.2rem;
	padding: 2px 5px 0;
	margin: 0.8rem 0.5rem 0;}
.cast .snsNav {font-size: 2.5rem; justify-content: middle;}
.cast .snsNav .navItem{margin:0 5px;}

/* Status Badge
------------------------------------------------- */
.iStatusBadge {
	position: absolute;
	top: 0;
	left: 0;
}

.iStatusBadge > .badge {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	border-style: solid;
	width: 0;
	height: 0;
}

.iStatusBadge > .badge:nth-child(1) {
	border-width: 20px;
	z-index: 4;
}

.iStatusBadge > .badge:nth-child(2) {
	border-width: 32px;
	z-index: 3;
}

.iStatusBadge > .badge.new {
	border-color: #f2e122 transparent transparent #f2e122;
	color: #040506;
}

.iStatusBadge > .badge.sale {
	border-color: #c30d23 transparent transparent #c30d23;
	color: #FFF;
}

.iStatusBadge > .badge .badgeText {
	position: absolute;
	font-size: 10px;
	font-size: 1rem;
	font-weight: bold;
	line-height: 16px;
	text-align: center;
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.iStatusBadge > .badge:nth-child(1) .badgeText {
	top: -14px;
	right: -10px;
	width: 32px;
}

.iStatusBadge > .badge:nth-child(2) .badgeText {
	top: -14px;
	right: -26px;
	width: 64px;
}

.goodsList {
	display: -webkit-box; /* old */
	display: -moz-box; /* old */
	display: -ms-flexbox; /* ie10 */
	display: -webkit-flex;
	display: flex;
	-webkit-box-lines: multiple; /* old */
	-moz-box-lines: multiple; /* old */
	-ms-flex-wrap: wrap; /* ie10 */
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-left: -7.5px;
	margin-right: -7.5px;
}

.goodsList > .item {
	display: block;
	width: 25%;
	margin-bottom: 50px;
	padding-left: 7.5px;
	padding-right: 7.5px;
}
.goodsList > .item .inner{
	box-shadow: 0px 8px 10px -2px rgba(0,0,0,0.5), 0px 0px 0px 1px rgba(0,0,0,0.02);
	padding:10px;
	color:#222;
	background:rgba(255,255,255,1);
}
.goodsList > .item > .image {
	position: relative;	
	background: #fff;
	padding: 20px 0;
	width: 100%;
	height:31.2vw;
	display:flex;
	align-items:center;
}

.goodsList > .item > .image .swiper-container{height:100%;}
.goodsList > .item > .image .swiper-slide{padding:20px; height:100%;display:flex;
	align-items:center;}

.goodsList > .item > .image img {
	display: block;
	width: 100%;
	height:auto;
}


.goodsList .links {
	text-align: right;
	margin-top: 15px;
}

.itemInfo{font-size:14px;}

.merchandise .links .link {
	display: inline-block;
	font-size: 12px;
	font-size: 1.2rem;
}

.past {padding: 20px 10px; max-width: 500px; text-align: center; margin: 0 auto; width: 32%;}
.past p{font-size: 14px;}
.past a{color: var(--linkTextColor);}
.past h4{font-weight: bold;font-size: 1.4rem;}
.past h5{padding: 0; font-weight: 700; font-size: 1.7rem;}
.past a:hover p{opacity: 0.5;}
.past img{width: 100%;}
.cast .button a{border-bottom:none;font-size:1.4rem;color:var(--linkTextColor); text-shadow:none;}
.cast .button{max-width:120px; margin:0 auto; background:transparent; margin-top:10px; border-top: 1px solid var(--keyColor);border-left: 1px solid var(--keyColor);border-right: 1px solid var(--keyColor);}
.cast .button:hover{border-color: var(--keyColor-sub);background:var(--keyColor); }
.cast .button:hover a{color:#FFF;}

.profList .cast,.popupProf .cast{max-width:800px; margin:20px auto; padding:20px;width: 100%; display:-webkit-box; display:-moz-box;	display:-webkit-flexbox;display:-moz-flexbox;display:-ms-flexbox;display:-webkit-flex;	display:-moz-flex;display:flex;	-webkit-box-lines:multiple;	-moz-box-lines:multiple;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;	-ms-flex-wrap:wrap;flex-wrap:wrap; justify-content:center; align-items:top; background:var(--keyColor);}
.profList .cast p:not(.castName){font-size:14px; text-align:left; padding:0 5px;}
.profList .cast .imageFrame,.popupProf .cast .imageFrame{width:240px;padding:8px;}
.profList .cast .imageFrame img,.popupProf .cast .imageFrame img{width:100%;  border:4px solid #F4F5F6;}
.profList .cast .caption,.popupProf .cast .caption{width: 500px; padding:0 8px 8px 8px; display:flex; -webkit-box; display:-moz-box;display:-webkit-flexbox;display:-moz-flexbox;display:-ms-flexbox;display:-webkit-flex;	display:-moz-flex;display:flex;	-webkit-box-lines:multiple;	-moz-box-lines:multiple;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;	-ms-flex-wrap:wrap;flex-wrap:wrap; align-items:center; }
.profList .cast .caption p,.popupProf .cast .caption p{width:100%;}
.profList .cast .caption p.castName.long,.popupProf .cast .caption p.long{width:80%;}
.profList .castName,.popupProf .castName{font-size:2rem;padding:8px 3px 9px; border-top: 1px solid #FFF;border-bottom: 1px solid #FFF;width:100%;color:#FFF;}
.profList .smallFont,.smallFont,.popupProf .smallFont{font-size:1.2rem}
.profList .smallFont,.popupProf .smallFont{margin-left:10px;}
.popupProf .cast .caption{color:#FFF;text-align: left;}
.profList .cast .caption h5,.popupProf .cast .caption h5{ width:100%; padding:10px 0 0; text-align:left;}
.profList .cast .caption .profContent,.popupProf .cast .caption .profContent
{height: 240px; width: 500px; line-height:1.5;overflow-y: scroll;position: relative;font-size:1.0rem;font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif"; background:rgba(255,243,175,0.2);}
.profList .cast .caption .profContent .ps__rail-y,.popupProf .cast .caption .profContent .ps__rail-y {
  opacity: 0.6;
}
.profList .profHeader,.popupProf .profHeader{flex-wrap:nowrap; width: 100%; justify-content:space-between;padding:0;}
.profList .profHeader h5,.popupProf .profHeader h5{max-width: 120px;}
.profList .profHeader .snsNav{max-width: 120px;font-size: 1.5rem;margin:0; justify-content: right;}
.profList .profHeader .snsNav .label,.popupProf .profHeader .snsNav .label{padding:0 5px;}
.profList .profHeader .snsNav .label img,.popupProf .profHeader .snsNav .label img{width:20px; margin-top:8px;}
.profList .profHeader .snsNav i,.popupProf .profHeader .snsNav .label i{margin:0.5em 0.2rem 0;	font-size:1.8rem; color: #FFF;}

.team{width: 50%;}
.prof .imgBox img{width: 100%;height: auto; vertical-align: middle;}
.prof{
	display: -webkit-box;
	/* old */
	display: -moz-box;
	/* old */
	display: -ms-flexbox;
	/* ie10 */
	display: -webkit-flex;
	display: flex;
	-webkit-box-lines: multiple;
	/* old */
	-moz-box-lines: multiple;
	/* old */
	-ms-flex-wrap: wrap;
	/* ie10 */
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-left: -7.5px;
	margin-right: -7.5px;
	justify-content: center;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
}
.prof {
	padding: 0 20px;
}
.prof .imgBox {
	width: 30%;
	border-radius: 20px;
}

.prof .caption{width: 60%; flex-grow: 1; padding-left: 20px; color: var(--abcMain-wht);}
.prof .caption h4{font-family: var(--labelFont); font-size: 3rem; text-align: left;}
.prof .caption h5 {
	font-family: var(--labelFont-jp);
	font-size: 2rem;text-align: left;
}
.prof .caption h5 .fontSmall{font-size: 1.6rem;}
.prof .profHeader {
	text-align: left;
}

.prof .profHeader .snsNav {
	max-width: 120px;
	font-size: 1.5rem;
	margin: 0;
	justify-content: left;
}

.prof .profHeader .snsNav .label {
	padding: 0 5px;
}

.prof .profHeader .snsNav .label img {
	width: 20px;
	margin-top: 8px;
}

.prof .profHeader .snsNav .label i {
	margin: 0.5em 0.2rem 0;
	font-size: 1.8rem;
	color: var(--abcMain-wht);
}

.prof p {
	padding-top: 20px;
	font-size: 1.4rem;
}

.prof .btnBox{
	padding-top: 40px;
	text-align: right;
	
}
.prof .btnBox .button{width:100px; margin-right:10px;}
.prof .btnBox .button a{
	text-align: center;
}

.profLinkBox{justify-content: center; padding-top: 30px;}
.profLink{max-width:150px; width: 30%; padding: 10px;}
.profLink img{width: 100%; box-shadow: 0px 8px 16px -2px rgba(0,0,0,0.5), 0px 0px 0px 1px rgba(0,0,0,0.02);}
.profLink.selected img,.profLink:not(.selected) a:hover,.profLink:not(.selected) a:hover img{filter: saturate(30%)brightness(50%); opacity: 1;box-shadow: none;}

/* Footer
----------------------------------------------------*/
.globalFooter {
	position: relative;
		color: #fff;
	margin-top: - var(--ghHeight);
	-moz-box-shadow:inset 0px 0px 2px var(--btnMain);
	-webkit-box-shadowinset:inset 0px 0px 2px var(--btnMain);
	-ms-box-shadow:inset 0px 0px 2px var(--btnMain);
	box-shadow:inset 0px 0px 2px var(--btnMain);
	background: var(--btnMain);
}

.globalFooter .gfContents {
	padding-top: 25px;
	padding-bottom: 30px;
}

.globalFooter .designer {
	text-align: center;
	font-size: 12px;
	font-size: 1.2rem;
}

.globalFooter .copyright {
	text-align: center;
	font-size: 14px;
	font-size: 1.4rem;
}

.globalFooter .designer a,.globalFooter .copyright a{
	color: #fff;
}

.globalFooter .copyright .logoNo4{width: 30px;vertical-align:middle;}

.globalFooter .gfContents .toTop {display: none; position: fixed;  bottom: 20px;  right: 20px;  z-index: 9999;}
.globalFooter .gfContents .toTop  a { display: block; z-index: 999; padding-top: 3px; width: 55px; height: 55px; background-color: var(--abcMain-wht); color:var(--abcMain-red);text-decoration: none;  text-align: center;} 
.globalFooter .gfContents .toTop:hover {
	opacity: 1;
}

.globalFooter .gfContents .toTop i {
	font-size: 48px;
	font-size: 4.8rem;
	-webkit-transition: all 0.3s;
	transition: all 0.3s;
}

.globalFooter .gfContents .toTop:hover i {
	opacity: 0.6;
}
.globalFooter .gfContents .gfNav {display: none; position: fixed;  width: 100%;bottom: 0;  left: 0;  z-index: 9999;}
.globalFooter .gfContents .gfNav .inner{padding: 0; width: 100%;}
.globalFooter .gfContents .gfNav .navItem{width: 20%;background: var(--btnMain);color:var(--btnYel); padding: 10px 0 20px;border: 1px solid var(--btnYel);}
.globalFooter .gfContents .gfNav .navItem i{font-size: 1.8rem; padding: 5px 0 8px; }

/* other
----------------------------------------------------*/
.card{background: #FFFEFD; max-width:800px;  min-height: 300px; color:#222; margin: 0 auto;
display: flex;  flex-wrap: wrap; align-items: center;
	 box-shadow: 0 4px 0 rgba(0, 0, 0, 0.5), 0 0 40px rgba(128, 128, 128, 0.1) inset;
  border-color: #dedede;
}
.card {
    position: relative;
    -webkit-box-sizing: border-box;
    border-bottom-right-radius: 60px 5px;
 -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.1) inset,0 0 4px rgba(128, 128, 128, 0.1) ;
  -moz-box-shadow: 0 0 40px rgba(0, 0, 0, 0.1) inset,0 0 4px rgba(128, 128, 128, 0.1) ;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.1) inset,0 0 4px rgba(128, 128, 128, 0.1) ;
}
.card:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.3);
}

.cardInner {width:100%; padding:20px;}
.cardHeader{padding:40px 0 20px 0;text-align: center; margin: 0 auto;}
.cardHeader h2{color:#222!important;}

.hide{display:none;}
@media screen and (min-width: 961px) {.globalFooter .gfContents .gfNav {display: none!important;}}
@media screen and (max-width: 960px) {
	.boxWht{width: 90%;}

/* Global Header
----------------------------------------------------
*/
.headerHero .hhContents{ max-width:100%; }
.headerHero .hhContents .inner{max-width: 90%; margin: 0 auto;}
.headerHero .caption p.date,.headerHero .caption p.acsess{line-height: 1.2;
    padding-top: 10px;}
.headerHero .hhLogo img{max-width: 350px;}
.headerHero .caption .hhCopy{font-size: 1.35rem;}
/*.headerHero .inner {display: none;}
.headerHero .hhLogo,.headerHero .caption{display: none;}*/
.headerHero .hhPost{height: auto;
    align-content: center;
    align-self: center;}
.headerHero .hhPost img{max-width: 650px; width: 100%;  height: auto; padding: 0 10px;}
.headerHero > .flexBox{align-items: baseline; flex-wrap: wrap-reverse;}
.headerHero .hhContents .flexBox .inner {
	padding:0;
  }

.globalHeader .ghContents{position: relative;-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;bottom: 20px; background: var(--btnMain);
	border-bottom: 5px solid var(--btnYel);}
.globalHeader.sticky .ghContents{padding-right: 0;}

.globalHeader .ghNavButton {
	display: block;
	padding: 5px;
	font-size: 3rem;
	background: var(--btnMain);
	background-size: 300px,300px,100%;
	color: #fff;
	
}
.globalHeader.sticky .ghNavButton{display: block; position: sticky; top: 0; right: 0;}
.globalHeader .ghNav{display: none;}
/* .globalHeader .ghNav{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox; 
	display: -webkit-flex;
	display: flex;
	flex-wrap: wrap;
}*/
.globalHeader.sticky .ghNav {
	display: none;top: 60px;
	left: 0;
	width: 100%;
	padding-bottom: 15px;
	background:var(--btnMain);
	background-image: var(--btn-gradient);
	box-shadow: 0 3px 5px rgba(4,5,6,0.1);
	z-index: 100;}
.globalHeader.sticky .ghNav {
	display: none;
	position: absolute;
	
}
.globalHeader .ghNav.opened{
	display: flex!important;
	flex-wrap: wrap;
	height: 100vh;
	justify-content: flex-start;
	align-content: baseline;
	-webkit-transition: all .3s;
	transition: all .3s;
	
}

.globalHeader .ghNav .navItem {
	width: 50%;
	text-align: center;
	color: inherit;
	padding: 10px 20px;
}
.globalHeader.sticky .ghNav.opened .navItem{padding: 15px 0px;}
.globalHeader .ghNav .navItem .label {
	font-size: 16px;
	font-size: 1.6rem;
	color:#FFF;
}

.globalHeader .ghNav .navItem .caption {
	font-size: 12px;
	font-size: 1.2rem;
	color: #646566;
}


/* Contents
----------------------------------------------------*/

	.boxWht.item2{width:100%}
.scheduleBlock .ticketContainer {
	display: block;
}

.scheduleBlock .ticketContainer .ticketBlock {
	width: 100%;
	margin: 15px 0 0;
}
.ticketBlock ul.attention{max-width: 200px;}


/* Footer
----------------------------------------------------*/
.globalFooter .gfContents {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	padding: 20px 0 100px;
}

.globalFooter .copyright {
	text-align: center;
}

.globalFooter .designer {
	text-align: center;
	margin-top: 15px;
}

.globalFooter .gfContents .toTop {display: none!important;}

}

@media screen and (max-width:850px){

	
	.mobileOnly{display:inline;}
	.pcOnly{display: none;}
	.sectionAbout img,.sectionStaff img,.sectionImg img {width:100%;height: auto;}
	.scheduleBlock .flexBox .item2 .header .title{margin-bottom: -35px;}
}

@media screen and (max-width: 768px){

	.goodsList > .item {width: 33.33%;}
	.goodsList > .item > .image {height:43.29vw;}
	

/* Common
----------------------------------------------------*/
.col1,.col2,.col3,.col4,.col5,.col6 {
	width: 100%;
}

.section {
	padding-top: 45px;
	padding-bottom: 45px;
}


/* Header
----------------------------------------------------*/

.headerHero .hhLogo img{max-width: 270px;}


/* Global Header
----------------------------------------------------*/
.globalHeader .ghLogo {
	width: 120px;
}


/* Contents
----------------------------------------------------*/
.sectionEntry {
	padding-top: 0;
}

.sectionEntry .caption {
	text-align: left;
}

.sectionEntry .entryInfo .sectionCopy {
	padding: 15px;
}

.scheduleBlock {
	margin-top: 30px;
	padding: 30px 20px 20px;
}

.scheduleBlock .date {
	font-size: 16px;
	font-size: 1.6rem;
}
.scheduleBlock .flexBox .item2{width:100%;}
.scheduleBlock > .title {
	font-size: 24px;
	font-size: 2.4rem;
}

.scheduleBlock .theaterInfo .phone {
	display: block;
	margin: 15px 0 0;
}

.scheduleBlock .theaterInfo .mapNav {
	display: block;
	margin: 15px 0 0;
}

.scheduleBlock .price .title {
	margin-bottom: 0;
}

.scheduleBlock .price .priceList li {
	display: block;
	margin: 5px 0 0;
}

.scheduleBlock .ticketContainer {
	display: block;
}

.scheduleBlock .ticketContainer .ticketBlock {
	width: 100%;
	padding: 30px 15px;
	margin: 15px 0 0;
}
.cast-annotation{font-size:1.3rem;}

.sectionSchedule .advance {
	margin-top: 30px
}

.sectionSchedule .advance .title {
	font-size: 16px;
	font-size: 1.6rem;
}

.sectionSchedule .advance p {
	font-size: 18px;
	font-size: 1.8rem;
}

.sectionSns .snsContainer {
	display: block;
}

.sectionSns .snsBlock {
	width: 100%;
	margin: 30px 0 0;
}

.sectionSns .confetti .article {
	display: block;
	height: auto;
}

.sectionSns .confetti .article .image {
	display: block;
	width: 100%;
	max-width: none;
	height: 240px;
}

.sectionSns .confetti .article .image .imageFrame img {
}

.sectionSns .confetti .article .detail {
	display: block;
	text-align: left;
	padding: 30px;
}

.sectionSns .confetti .article .detail:before {
	top: -30px;
	left: 30px;
	margin-top: 0;
	border-color: transparent transparent #fff transparent;
}

.sectionSns .confetti .article .detail .date {
	font-size: 14px;
	font-size: 1.4rem;
	color: #646566;
	margin-bottom: 5px;
}

.sectionSns .confetti .article .detail .title {
	margin-bottom: 15px;
}

.sectionSns .confetti .article .detail .caption {
	font-size: 14px;
	font-size: 1.4rem;
}

.sectionCast .column,
.sectionCast .header .column,
.sectionCast .gridHeadContainer .column,
.sectionMusician .column,
.sectionStaff .column {
	/*padding: 0;*/
}

.creditList {
	max-width: 350px;
}

.creditList dt {
	width: 140px;
	padding-right: 15px;
	font-size: 11px;
}

.creditList dd {
	margin-left: 140px;
	font-size: 13px;
}

.sectionContact .contactContainer {
	display: block;
}

.sectionContact .contactBox {
	width: 100%;
	margin: 15px 0 0;
}

.sectionContact .contactBox .link {
	display: block;
	margin: 15px 0 0;
}

	.goodsList > .item {width: 33.33%;}
	.goodsList > .item > .image {height:43.29vw;}
	.sectionSchedule table td{font-size: 1.4rem;}
	
	.profList .cast,.popupProf .cast{padding: 30px 0px 20px;
max-width: 350px;}
.profList .cast .imageFrame,.popupProf .cast .imageFrame{width:240px;}
.profList .cast .caption p.castName,.popupProf .cast .caption p{width:100%;text-align:center}
.popupProf .cast .content p{text-align: left;}
.castList > .cast{padding: 50px 0;}

.prof .caption,.prof .imgBox,.team{width: 100%; padding-bottom: 0;}

/* Footer
----------------------------------------------------*/
.globalFooter .gfContents {
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
}

.globalFooter .copyright {
	text-align: center;
}

.globalFooter .designer {
	text-align: center;
	margin-top: 15px;
}

}


@media screen and (max-width: 768px) {

	.flexBox .past{width: 100%;}
	.headerHero{background-position:top; }
.sectionNews .sectionCopy {
	text-align: left;
}
.sectionNews .sectionCopy .button {
	text-align: center;
}

.sectionSns .snsBlock iframe.twitter-timeline-rendered {
	width: 668px !important;
}

.sectionVideo {min-height: 0;}
.sectionVideo .videoFrame {height: 500px;}
	
}

@media screen and (max-width: 767px) {

.sectionSns .snsBlock iframe.twitter-timeline-rendered {
	width: 330px !important;
}
.sectionSchedule .tableMobile{display: inline-block;}
.scheduleContainer .scheduleBlock{padding:30px 10px;}
.scheduleBlock .flexBox .item2.character{
		min-width: 100px;
	}
	.scheduleBlock .flexBox .item2{padding:20px 0;}
	.scheduleBlock .flexBox .item2.cast .inner{padding:20px 10px;}
.scheduleBlock .flexBox .item2.character label{display:block;}
.tab_container {
	width:95%;
  padding-bottom: 1em;
  margin: 0 auto;}
.tab_item {
  float: left;
  width: 33.3%;
  padding:5px 0;
  border: 1px solid var(--btnMain);
  border-bottom: 3px solid var(--btnMain);
  background-color: var(--btnYel);
  text-align: center;
  color: var(--btnMain);
  display: block;
  text-align: center;
  transition: all 0.2s ease;
	font-size:1.8rem;
}
.tab_item:hover {
  opacity: 0.75;
}
input[name="tab_item"] {
  display: none;
}
.tab_content {
  display: none;
  clear: both;
  overflow: hidden;
	width:100%
}
#tab1:checked ~ #tab1_content,
#tab2:checked ~ #tab2_content,
#tab3:checked ~ #tab3_content,
#tab4:checked ~ #tab4_content {
  display: block;
	border:2px solid var(--btnMain);
	padding:20px 15px;
}
.tab_container input:checked + .tab_item {
  font-weight: bold;
  background: var(--btnMain);
  color:  var(--btnYel);
  font-size: 2rem;
	margin-top: -5px;
	padding-top: 5px;
	box-shadow:0 0 3px rgba(0,0,0,0.3);
}
}

@media screen and (max-width: 670px){
	.castList .cast{width:100%;}

	.goodsList > .item {width: 100%;}
	.goodsList > .item > .image {height:65vw;}
	.goodsList > .item h3{font-size:18px; font-size:1.8rem;}
}
@media screen and (max-width: 480px) {
	.sectionVideo .videoFrame {height: 300px;}
	.goodsList > .item {width: 100%;}
	.goodsList > .item > .image {height:65vw;}
	.past img{width: 80%;}
	.goodsList > .item h3{font-size:18px; font-size:1.8rem;}
	.itemInfo{font-size:12px;}
	.swiper-button-prev,.swiper-button-next{width:15px; background-size:contain;}
.scheduleBlock .flexBox .item2.cast p{font-size:1.4rem;}
.profList .cast .caption,.profList .cast .caption .profContent,.popupProf .cast .caption,.popupProf .cast .caption .profContent{width:300px; }
}
@media screen and (max-width: 413px) {
	
.sectionSns .snsBlock iframe.twitter-timeline-rendered {
	width: 296px !important;
}
@media screen and (max-width: 413px) and (max-height: 670px) {
}

	
}

@media screen and (max-width: 374px) {
	
.sectionSns .snsBlock iframe.twitter-timeline-rendered {
	width: 248px !important;
}
.sectionVideo .videoFrame {height: 250px;}
.sectionSchedule table th, .sectionSchedule table td{font-size:12px;}
.sectionSchedule table td {font-size: 14px;}

}
@media screen and (max-width: 321px) {
	.sectionSchedule .table table th {width:auto;}
	.cast-annotation{font-size:1.2rem;}
}
@media screen and (max-width: 319px) {
	
.sectionSns .snsBlock iframe.twitter-timeline-rendered {
	width: 220px !important;
}

}