@charset "UTF-8";
/* CSS Document */


/*=====================================================================================================
TOP #newsArea
=====================================================================================================*/
#keionWrap #newsArea { width: 100%; margin: 0 auto 2%; position: relative; padding-bottom: 2%;}
#keionWrap #newsArea #newsBox { width: 90%; max-width: 1000px; margin: 1% auto 2%; max-height: 400px; overflow-y: auto; background-color: #F9F9F9; padding: 10px 20px; border: solid 1px #F15A24; box-sizing: border-box;}
#keionWrap #newsArea dl { width: 100%; display: flex; align-items: center; border-bottom: solid 1px #F15A24; margin-top: 10px; padding-bottom: 5px;}


@media (max-width:767px) {
	#keionWrap #newsArea { padding-bottom: 4%;}
	#keionWrap #newsArea #newsBox { max-height: 250px;}
}


/*=====================================================================================================
LIVE個別ページ #liveArea
=====================================================================================================*/
#keionWrap #liveArea { width: 100%; margin: 0 auto 2%; padding: 0 0 2%; position: relative;} 
#keionWrap #liveArea #liveBox { width: 90%; max-width: 1000px; margin: 0 auto 2%;}
#keionWrap #liveArea .liveVisual { width: 100%; margin: 0 auto 2%; border-bottom: solid 5px #F15A24; text-align: center; background-color: #333;}
#keionWrap #liveArea .liveVisual img { width: auto; max-width: 1200px; max-height: 900px;}
#keionWrap #liveArea #liveBox dl { width: 100%; display: flex; align-items: flex-end; margin-top: 10px; padding-bottom: 5px;}
#keionWrap #liveArea #liveBox dl dt { flex: 0 0 200px; width: 200px; margin: 0 auto; font-size: 2rem; font-weight: bold; color:#666; line-height: 170%; box-sizing: border-box;}
#keionWrap #liveArea #liveBox dl dt .days { font-size: 4rem; padding-right: 2px;}
#keionWrap #liveArea #liveBox dl dt .weekSun { background-color: #E30; font-size: 16px; color:#FFF; padding: 4px 6px 2px; border-radius: 30px; text-align: center; vertical-align: text-top; line-height: 90%;}
#keionWrap #liveArea #liveBox dl dt .weekSat { background-color: #07E; font-size: 16px; color:#FFF; padding: 4px 6px 2px; border-radius: 30px; text-align: center; vertical-align: text-top; line-height: 90%;}
#keionWrap #liveArea #liveBox dl dt .weekBlack { background-color: #666; font-size: 16px; color:#FFF; padding: 4px 6px 2px; border-radius: 30px; text-align: center; vertical-align: text-top; line-height: 90%;}
#keionWrap #liveArea #liveBox dl dd { flex-grow: 0; flex-shrink: 0; flex-basis: calc(100% - 205px); width: 100%; color: #F15A24; font-size: 4rem; line-height: 120%;}
#keionWrap #liveArea #liveBox dl dd .smallText { font-size: 2.5rem; color:#666;}
#keionWrap #liveArea #liveBox .liveInfoBox {
	width: 100%;
	color: #666;
	box-sizing: border-box;
	padding: 30px;
    margin-top: 20px;
    background-color: #f6f5f5;
    border-radius: 30px;
    font-feature-settings: "palt";
}
#keionWrap #liveArea #liveBox .liveInfoBox p { font-size: 2rem; line-height: 150%; text-align: center;}
#keionWrap #liveArea #liveBox .liveInfoBox p.notes {
	font-size: 1.4rem;
	padding-top: 20px;
}
/*#keionWrap #liveArea #liveBox .liveInfoBox p:first-of-type { font-size: 2.5rem;}
#keionWrap #liveArea #liveBox .liveInfoBox p img { width: 14px; vertical-align: middle; padding-right: 6px;}*/
#keionWrap .comingsoon { width: 80%; margin: 2% auto; padding: 10% 0; background-color: #666; color: #FFF!important; text-align: center; box-sizing: border-box;}


@media (max-width:767px) {
	#keionWrap #liveArea .liveVisual img { width: 100%; max-width: 100%; max-height: auto;}
	#keionWrap #liveArea #liveBox dl { width: 100%; display: block;}
	#keionWrap #liveArea #liveBox dl dt { flex: none; width: 100%; font-size: 1.5rem; margin-bottom: 2%;}
	#keionWrap #liveArea #liveBox dl dt .days { font-size: 3rem;}
	#keionWrap #liveArea #liveBox dl dt .weekSun { font-size: 14px; color:#FFF; padding: 4px 6px 3px; border-radius: 30px; vertical-align: text-top; line-height: 70%;}
	#keionWrap #liveArea #liveBox dl dt .weekSat { font-size: 14px; color:#FFF; padding: 4px 6px 3px; border-radius: 30px; vertical-align: text-top; line-height: 70%;}
	#keionWrap #liveArea #liveBox dl dt .weekBlack { font-size: 14px; color:#FFF; padding: 4px 6px 3px; border-radius: 30px; vertical-align: text-top; line-height: 70%;}
	#keionWrap #liveArea #liveBox dl dd { flex: none; width: 100%; font-size: 3rem; text-align: center; font-weight: 700;}
	#keionWrap #liveArea #liveBox dl dd .smallText { font-size: 2rem;}
	#keionWrap #liveArea #liveBox .liveInfoBox p { font-size: 1.8rem;}
}


/*=====================================================================================================
LIVE個別ページ #bandArea
=====================================================================================================*/
#keionWrap #bandArea { width: 100%; margin: 1% auto 2%; padding: 2% 0; position: relative; background-color: #fafafa;} 
/*#keionWrap #bandArea h2 { color: #FFF;}
#keionWrap #bandArea h2 span { border-bottom: solid 3px #FFF;}*/
#keionWrap #bandArea .timetable {
	width: 90%;
	max-width: 800px;
	margin: 1% auto 2%;
}
#keionWrap #bandArea #bandBox { width: 90%; margin: 1% auto 2%; display: flex; align-items: flex-start; flex-wrap: wrap; justify-content: space-around;}
#keionWrap #bandArea #bandBox .bandBoxItem { flex: 0 0 40%; padding: 5%; max-width: 500px; margin-bottom: 1%;}
#keionWrap #bandArea #bandBox .bandBoxItem .bandName { padding: 3% 0; margin-bottom: 3%; text-align: center; color: #F15A24; font-size: 3.4rem; font-weight: 700; line-height: 135%;}
#keionWrap #bandArea #bandBox .bandBoxItem .bandVisual { width: 100%; margin-bottom: 3%; border: solid 4px #F15A24; border-radius: 3px;}
#keionWrap #bandArea #bandBox .bandBoxItem .bandMember { width: 90%; margin: 0 auto;/* white-space: pre-wrap; word-break: keep-all; */ font-size: 1.5rem; color: #666; line-height: 150%; text-align: center;
    white-space: nowrap; /* テキストが改行されないようにする */
    overflow-wrap: break-word; /* 必要な場合に単語の途中で改行 */
}

@media (max-width:1500px) {
	#keionWrap #bandArea #bandBox .bandBoxItem .bandName { font-size: 2.5rem;}
}

@media (max-width:1200px) {
	#keionWrap #bandArea #bandBox .bandBoxItem .bandName { font-size: 2rem;}
}

@media (max-width:767px) {
	#keionWrap #bandArea #bandBox { width: 90%; margin: 1% auto 2%; display: block;}
	#keionWrap #bandArea #bandBox .bandBoxItem { flex: none; width: 80%; margin: 2% auto 5%; padding: 2%;}
	#keionWrap #bandArea #bandBox .bandBoxItem .bandName { padding: 4% 0; font-size: 2rem; margin-bottom: 1%;}
	#keionWrap #bandArea #bandBox .bandBoxItem .bandMember { font-size: 1.4rem;}
}


#keionWrap .photoBtnBox { width: 90%; margin: 0 auto; padding: 2% 0; border-top: dotted 1px #F15A24; border-bottom: dotted 1px #F15A24;}
#keionWrap .photoBtnBox .photoBtn { width: 250px; text-align: center; color: #666; font-size: 1.4rem; margin: 0 auto;}
#keionWrap .photoBtnBox .photoBtn a { width: 250px; margin: 4% auto 0; font-size: 1.8rem; background-color: #FFF; border: solid 1px #F15A24; color: #F15A24; display: block; border-radius: 30px; box-sizing: border-box; padding: 14px 20px 10px; text-decoration: none; -webkit-transition: .35s ease-in-out; -moz-transition: .35s ease-in-out; transition: .35s ease-in-out;}
#keionWrap .photoBtnBox .photoBtn a:hover { background-color: #F15A24; border: solid 1px #FFF; color: #FFF;}

@media (max-width:767px) {
	#keionWrap .photoBtnBox { width: 90%; display: block; margin: 0 auto;}
	#keionWrap .photoBtnBox .photoBtn { flex: none; width: 250px; margin: 6% auto;}
}




/*=====================================================================================================
LIVE個別ページ #foodArea
=====================================================================================================*/
#keionWrap #foodArea { width: 100%; background-color: #FFF; margin: 1% auto 2%; padding: 2% 0; position: relative;}
#keionWrap #foodArea .foodVisual { width: 100%; max-width: 1000px; margin: 1% auto 4%; border: solid 4px #F15A24; border-radius: 3px; box-sizing: border-box;}
#keionWrap #foodArea #foodBox { width: 80%; margin: 0 auto; display: flex; justify-content: center; flex-wrap: wrap;}
#keionWrap #foodArea #foodBox .foodItem1 { flex: 0 0 100%; padding: 0;}
#keionWrap #foodArea #foodBox .foodItem2 { flex: 0 0 48%; padding: 0 1%;}
#keionWrap #foodArea #foodBox .foodItem3 { flex: 0 0 31%; padding: 0 1%;}
#keionWrap #foodArea #foodBox p { width: 100%; margin: 2% auto 2%; text-align: center; color: #666; font-size: 1.8rem; line-height: 170%;}
#keionWrap #foodArea #foodBox p .foodName { font-size: 2.5rem; color: #F15A24; line-height: 170%;}

@media (max-width:767px) {
	#keionWrap #foodArea #foodBox { width: 80%; margin: 0 auto; display: block;}
	#keionWrap #foodArea #foodBox p { font-size: 1.4rem;}
	#keionWrap #foodArea #foodBox p .foodName { line-height: 190%;}
}


/*=====================================================================================================
LIVE個別ページ #accessArea
=====================================================================================================*/
#keionWrap #accessArea { width: 100%; background-color: #FFF; margin: 1% auto 2%; padding: 2% 0; position: relative;} 
#keionWrap #accessArea p { width: 80%; margin: 1% auto 2%; text-align: center; color: #666; font-size: 1.8rem; line-height: 150%;}
#keionWrap #accessArea .iframe-wrap { position: relative; width: 80%; margin: 0 auto; padding-top: 50%; /* = height ÷ width × 100 */ border: solid 4px #F15A24; border-radius: 3px;}
#keionWrap #accessArea .iframe-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

@media (max-width:767px) {
	#keionWrap #accessArea p { font-size: 1.4rem;}
}


/*=====================================================================================================
LIVE個別ページ footer
=====================================================================================================*/
.livePageFooter { padding-bottom: 51px!important;}
footer #live-nav { width: 100%; position: fixed; bottom: 0; left: 0; background-color: #FFF; z-index: 900; border-top: 1px solid #F15A24; color: #666;}
/*footer #live-nav { width: 100%; position: fixed; bottom: 0; left: 0; background-color: #FFF; z-index: 900; border-top: 1px solid #F15A24; color: #666; height: 50px;}
footer #live-nav p { width: 300px; text-align: center; font-size: 16px; margin: 0 auto; padding: 18px 0; font-family: source-sans-pro, sans-serif; font-weight: 700; font-style: normal;}
footer #live-nav p a { color: #666; text-decoration: none; -webkit-transition: .35s ease-in-out; -moz-transition: .35s ease-in-out; transition: .35s ease-in-out; padding: 0 5px;}
footer #live-nav p a:hover { color: #F15A24;}*/

#live-nav ul { list-style: none; padding: 0; display: flex; justify-content: space-around; width: 300px; margin: 0 auto;}
#live-nav ul li {
	flex: 0 0 auto;
	width: auto;
	height: 50px;
	text-align: center;
}
#live-nav ul li a {
	display: block;
	text-decoration: none;
    color: #666;
    padding: 18px 20px 0px;
	width: auto;
	height: 50px;
	box-sizing: border-box;
	font-size: 16px;
	-webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
	
	font-family: source-sans-pro, sans-serif;/*WEBフォント source-sans*/
	font-weight: 700;
	font-style: normal;
}

#live-nav ul li a:hover {
    color: #F15A24;
}

.break-here {
    white-space: normal!important; /* 改行を許可する */
    display: inline;  /* インライン要素として表示 */
}