@charset "utf-8";

* {
	margin: 0;
	padding: 0;
}
html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }
html {
    color: #333;
    font-size: 1em;
    line-height: 1.4;
}

html,body{ 
	height: 100%;
	font-family: 'Arial',helvetica, arial, 'hiragino kaku gothic pro', 'ms pgothic', sans-serif;
}

::-moz-selection {
	background-color:aquamarine;
}

::selection {
	background-color:aquamarine;
}
audio,
canvas,
iframe,
img,
svg,
video {
    vertical-align: middle;
}

i.en{
    font-family: serif;
}
fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}
textarea {
    resize: vertical;
}
ul,ol{
	list-style: none;
	margin: 0;
	padding: 0;
}

.hidden {
    display: none !important;
}
.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}
.inner {
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
}
.inner:after {
	content: "";
	clear: both;
	display: block;
}

#wrapper{
	width: 100%;
	position: relative;
	height: auto;
	height: 100%;
	min-height: 100%;
}

#header{ 
	position: relative;
	overflow: hidden;
	padding: 30px;
	border-bottom:1px solid #333;
}

#header h1{
	width: 400px;
	height: 63px;
	background-image: url(../img/mograg/logo.png);
	background-repeat: no-repeat;
	text-indent: -9999px;
	margin: 0;
	padding: 0;
	float: left;
	display: block;
}
#header h1.logo_sp{ display: none;}
#header h1 img{ width: 100%;}

/*外部リンク*/
#nav_m{
	position: absolute;
	right: 160px;
	display: block;
}
#nav_m ul{
	margin: 0;
	padding: 0;
	overflow: hidden;
}
#nav_m ul li{
	width: 70px;
	height: 70px;
	float: left;
	text-indent: -99999px;
}
#nav_m ul li.nav_m1{
	background-image: url(../img/mograg/icon_komajan.jpg);
	background-repeat: no-repeat;
	background-size: 100%;
}
#nav_m ul li.nav_m2{
	background-image: url(../img/mograg/icon_shop.jpg);
	background-repeat: no-repeat;
	background-size: 100%;
}
#nav_m ul li.nav_m3{
	background-image: url(../img/mograg/icon_momurag.jpg);
	background-repeat: no-repeat;
	background-size: 100%;
}
#nav_m ul li a{
	width: 70px;
	height: 70px;
	display: block;
}
#nav_m ul li a:hover{
	opacity: 0.3;
	background-color: #FFF;
}
#sns{
	position: absolute;
	top: 48px;
	right: 30px;
	display: block;
}
#sns ul{
	margin: 0;
	padding: 0;
	overflow: hidden;
}
#sns ul li{
	width: 35px;
	height: 35px;
	float: left;
	text-indent: -99999px;
	margin-left: 5px;
}
#sns ul li.fb{
	background-image: url(../img/mograg/icon_fb.png);
	background-repeat: no-repeat;
	background-size: 100%;
}
#sns ul li.twitter{
	background-image: url(../img/mograg/icon_twitter.jpg);
	background-repeat: no-repeat;
	background-size: 100%;
}
#sns ul li.insta{
	background-image: url(../img/mograg/icon_insta.jpg);
	background-repeat: no-repeat;
	background-size: 100%;
}
#sns ul li a{
	width: 35px;
	height: 35px;
	display: block;
}
#sns ul li a:hover{
	opacity: 0.3;
	background-color: #FFF;
}

#container{ 
	overflow: hidden;
	margin-bottom: 60px;
	position: relative;
}

/*sidemenu*/
#side_menu{
	float: left;
	width: 15%;
	height: 100%;
	display: block;
	margin: 1.2em 0;
	padding: 0 2.0em;
}
#side_menu li{
	padding: 5px;
	text-decoration: none;
	font-weight: bold;
	color: #000;
}
#side_menu li a{
	display: block;
	text-decoration: none;
	background-color: #fff;
	-webkit-transition: 0.5s;
	-moz-transition: 0.5s;
	-o-transition: 0.5s;
	-ms-transition: 0.5s;
	transition: 0.5s;
}
#side_menu li a:hover{
	color: #E81068;
}
.other_link{
	border-bottom: 1px solid #000;
	margin-bottom: 30px;
}



/*contents*/
#contents{
	float: right;
	width: 85%;
	padding: 0 2.0em;
}
#main{ overflow: hidden;}
#main_s{ width: 70%; overflow: hidden;} 
.ex_img,.ex_info{ float: left; width: 50%;}
.ex_img img{ width: 100%;}
.dm { margin-bottom: 2.0em;}
.dm_one { margin-bottom: 0em;}
.ex_info{ padding: 0 2.0em;}
.ttl,.day{ font-weight: bold;}
.day-out{font-weight: bold;text-decoration: line-through; color: deeppink;}
.subttl{ font-weight: bold; margin-bottom: 1em; font-size: 0.8em;}
.txt{ margin:1em 0; font-size: 0.8em;}
.txt a{ color:#E81068;;}
.attention{
    margin: 1.0em 0;
    font-size: 0.8em;
    /*background-color: #eeeeee;*/
    background-color: deeppink;
    color: #fff;
    padding: 1.0em;
    font-weight: bold;
}
.event{ 
	margin: 1.0em 0;
	padding: 1.0em;
	font-size: 0.8em;
	background-color: #99ffcc;
    word-break: break-word;
}
.event_gray{ 
	margin: 1.0em 0;
	padding: 1.0em;
	font-size: 0.8em;
	background-color: #ccc;
    word-break: break-word;
}
.red{ color:red;}
.gray{ color:dimgray;}

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
.banner{ padding-top: 2.0em; width: 100%; height: auto; display: block;}
.banner img {width: 100%;}


/*共通*/
.border-top{ border-top: 1px solid #000;}
.border-bottom{ border-bottom: 1px solid #000; padding-bottom: 2.0em;}
.border{border: 1px solid #000;}
.margin-bottom{ margin-bottom: 2.0em;}
h2 { padding: 0.4em 0;}
.margin-topbottom{ margin: 2.0em 0; border-bottom: 1px solid #000;}

/*トップ*/
.info{margin: 20px; padding: 20px; font-size: 14px; border: solid 1px #000; color: darkred;}
.ev_info{width: 80%;float: left;padding: 0 2.0em;}
.ev_thumb{float: left;width: 20%;}
.ev_thumb img{ width:100%;}
figure{
	overflow: hidden;
	position: relative;
	width: 100%;
	margin: 0;
}
figcaption {
	position: absolute;
	top: -100%;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background-image: url(../img/mograg/thumb_bg.png);
	background-size: contain;
	-webkit-transition: .3s;
	transition: .3s;
	opacity: 1;
}
figure:hover figcaption{
	top: 0;
	left: 0;
}
/*statement*/
.statement{
	background-image: url(../img/mograg/statement.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	padding-top: 240px;
	background-size: 14%;
	text-align: left;
}
.statement p{ margin-bottom: 1.0em; font-size: 0.8em;}
.translate{ 
	margin: 0; 
	float: right; 
	padding: 0.8em; 
	background-color: #000; 
	color: #fff; 
	font-weight: bold; 
	margin-left: 0.8em; 
	width: 40px;
	height: 40px;
	display: block;
}

.translate a{ color: #fff; text-decoration: none;}
.translate a:hover{ color: #ccc;}
.statement p.s_ttl{ font-weight: bold; font-size: 1.0em;}

/*artist*/
.artist{ width: 100%; overflow: hidden; margin-bottom: 30px;}
.a_thumb{ float: left; margin-right: 30px; width: 17%;}
.a_thumb:nth-child(5){ margin: 0;}
.a_thumb > *:first-child + * + * + * + *{ margin: 0;}
.a_thumb img{ width: 100%;}
.a_thumb figure{
	overflow: hidden;
	position: relative;
	width: 100%;
}
.a_thumb figcaption {
	position: absolute;
	top: -100%;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6);
	-webkit-transition: .3s;
	transition: .3s;
	opacity: 1;
}
.a_thumb figure:hover figcaption{
	top: 0;
	left: 0;
}
.a_thumb figure p {
	color: #fff;
	text-align: left;
	font-family: 'Roboto', sans-serif;
	font-weight: 900;
	position: absolute;
	bottom: 0;
	padding: 10px 20px;
}
.photo{ padding: 2.0em 0;}
.photo img{ width:100%;}
.photo p{ margin-bottom: 2.0em;}
.e_comment{ background-color: #ccc; padding: 1em; overflow: hidden; margin-bottom: 1em; font-size: 0.8em;}

/*access*/
.map{
	width: 100%;
	margin-bottom: 1.0em;
}
.map img{ width: 100%;}
.address_left{
	float: left;
	width: 50%;
}
.address_right{
	float: right;
	width: 50%;
	text-align: right;
}
.address_left p,
.address_right
{ font-size: 0.8em;}
.contact{width: 100%; text-align: center; margin-bottom: 100px; padding: 4.0em 0;}

/*radio*/
.radio{ width: 100%; overflow: hidden; margin-bottom: 30px;}
.radio p{ margin-bottom: 1.0em; font-size: 0.8em;}
.radio p img{ width: 100%;}
.radio p a{color: #e81068}
.r_thumb{ float: left; margin-right: 30px; width: 21%;}
.r_thumb:nth-child(4){ margin: 0;}
.r_thumb > *:first-child + * + * + * + *{ margin: 0;}
.r_thumb img{ width: 100%;}
.r_thumb figure{
	overflow: hidden;
	position: relative;
	width: 100%;
}
.r_thumb figcaption {
	position: absolute;
	top: -100%;
	left: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6);
	-webkit-transition: .3s;
	transition: .3s;
	opacity: 1;
}
.r_thumb figure:hover figcaption{
	top: 0;
	left: 0;
}
.r_thumb figure p {
	color: #fff;
	text-align: left;
	font-family: 'Roboto', sans-serif;
	font-weight: 900;
	position: absolute;
	bottom: 0;
	padding: 10px 20px;
}

.radio_list{ 
	width: 100%; 
	overflow: hidden; 
	margin-bottom: 30px;
	background-color: #ccffcc;
	font-size: 0.8em;
	padding: 1.0em;
}
.radio_list dt{ font-weight: bold;}
.radio_list dd {margin-bottom: 0.5em;}
.radio_list dd a{text-decoration: none; color: #E81068;}
.radio_list dd a:hover{text-decoration: underline;}

#radio_archive{
	width: 100%;
	overflow: hidden;
	margin-bottom: 30px;
	font-size: 0.8em;
	padding: 1.0em;
}
#radio_archive dt{ font-weight: bold;}
#radio_archive dd {margin-bottom: 0.5em;}
#radio_archive dd a{text-decoration: none; color: #E81068;}
#radio_archive dd a:hover{text-decoration: underline;}

/* radioタブ */
#radio_tabmenu{
    padding:0px;
	margin-bottom: 30px;
    color:#333;
    font-size: 11px;
    position:relative;
}
#radio_tabmenu .tab{overflow:hidden;}
#radio_tabmenu .tab li{background:#ccc; padding:5px 25px; float:left; margin-right:1px; cursor:pointer;}
#radio_tabmenu .tab li.select{background:#eee;}
#radio_tabmenu .content li{background:#eee; padding:20px;}
#radio_tabmenu .content li dl{
	margin: 0 0 10px 0;
	padding: 0;
	overflow: hidden;
	}
#radio_tabmenu .content li h1{ font-size: 18px; margin-bottom: 5px; font-weight: bold; color: #E81068;}
#radio_tabmenu .content li h2{ font-size: 18px; margin-bottom: 5px; font-weight: bold; color: rgb(17,142,255);}
#radio_tabmenu .content li p{ margin-bottom: 10px;}
#radio_tabmenu .content li dl dt{ width: 4%; font-weight: bold; float: left; margin-bottom:5px;}
#radio_tabmenu .content li dl dd{ width: 96%; float: left; margin-bottom:5px;}

.hide {display:none;}
.point{ color: #999;}


/*footer*/
#footer{
	width: 100%;
	position:relative;
	background-color:#fff;
	font-size: 0.8em;
    padding: 2.0em;
}
#footer p,#footer_contact p{ text-align: center;}

#left-menu{ display: none;}

#footer_contact{
	width: 100%;
	position:absolute;
	background-color:#fff;
	font-size: 0.8em;
	bottom: 0;
}

@media only screen and (max-width: 871px){
	#header h1{ background-size: 100%;}
	#main_s{ width: 100%;}
	#nav_m,#sns,#side_menu{ display: none;}
	#left-menu{ display: block;}
	/*leftMenu*/
	#left-menu{
		background: #E81068;
		padding: 0.6em;
		text-decoration: none;
		position:relative;
		width:52px;
		color: #fff;
		font-size: 0.8em;
	}
	#left-menu:hover{
		background:#E81068;
	}
	/*header*/
	#header{ padding: 0.8em;}
	#header h1{ width: 40%; height: 43px;}

	#contents{ width: 100%; padding: 0 1.0em;}
	.ex_img, .ex_info,.ev_info,.ev_thumb{ width: 100%;}
	.ex_info,.ev_info{ padding: 0; margin-top: 1.0em;}
	.statement{background-size: 50%;}
	.a_thumb{ width: 15%;}

	#footer p,#footer_contact p{padding: 0.8em;}
	}

	@media only screen and (max-width: 640px){
	#header h1{ width: 80%; height: 43px;}
	/*artist*/
	.a_thumb,.r_thumb{ width: 100%; margin-bottom: 30px;}
	.a_thumb:nth-child(5){ margin: 0;}
	.r_thumb:nth-child(4){ margin: 0;}
	.a_thumb > *:first-child + * + * + * + *{ margin: 0;}
	.r_thumb > *:first-child + * + * + * + *{ margin: 0;}
	/*access*/
	.address_left,.address_right{ width: 100%;}
	.address_left{ margin-bottom: 1.0em;}
	.address_right{ text-align: left;}
	}

.pagetop {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 15px;
}
.pagetop a {
    display: block;
    background-color: #ccc;
    text-align: center;
    color: #222;
    font-size: 12px;
    text-decoration: none;
    padding: 5px 10px;
	filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
.pagetop a:hover {
    display: block;
    background-color: #E81068;
    text-align: center;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    padding:5px 10px;
	filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}