fz@charset "utf-8";
/*--****************************************

@ style.css

(c) ULM Co.,Ltd. - https://www.ulm-design.com
*****************************************--*/
/* reset */
article,aside,details,figcaption,figure,footer,header,hgroup,hr,menu,nav,section{display:block}a,hr{padding:0}abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:0 0}ins,mark{background-color:#ff9;color:#000}body{line-height:1}li,ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}a{margin:0;font-size:100%;vertical-align:baseline;background:0 0}ins{text-decoration:none}mark{font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{height:1px;border:0;border-top:1px solid #ccc;margin:1em 0}input,select{vertical-align:middle}

*, *:before, *:after {
	box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
}

/*------------------------

html,body

-------------------------*/
html,body{
	width:100%;
  font: 13px/1em "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	letter-spacing:1px;

	background:#fff;
}

/*------------------------

wrapper

-------------------------*/
#wrapper{
	width:100%;
	overflow: hidden;
}

@media screen and (max-width:800px){
	#wrapper{
	}
}

.pc {
	display: block;
}

.sp {
  display: none;
}


/*------------------------

@ main

-------------------------*/
#main{
	width: 962px;
	margin: 0 auto;
	margin-bottom: 2%;
	padding: 30px;
	background: rgba(199,228,243,0.4);
	border-radius: 15px;
}

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

.sp {
	display: block;
	}

.pc {
	display: none;
	}

#main{
	width:100%;
	border-radius: 0px;
	padding: 10px;
	}
}


/*------------------------

@ header

-------------------------*/
#header {
	width:100%;
	padding-top:30px;
	margin: 0 auto;
}

#ttl{
	text-align:center;
}

@media screen and (max-width:800px){
	#header {
		margin: 0 auto;
	}

	#ttl .header {
		width: 100%;
		margin-bottom: 5%;
	}
}


/*------------------------

@ maeuri

-------------------------*/
#jyouei {
	padding: 30px;
	margin-bottom: 10px;
	background-color: #ffff;
	width: 80%;
	margin: 0 auto 30px;
	border-radius: 15px;
}


.title {
	padding-bottom: 20px;
	width: 100%;
}


.info {
	text-align: left;
	font-size: 1em;
	line-height: 1.5;
}

@media screen and (max-width:800px){
	#jyouei{
	width: 97%;
	padding: 10px;
	margin: 10px auto 20px;
	}

	.title {
		width: 100%;
		padding-bottom: 0;
	}



	.info {
		font-size: 0.8em;
		margin-left: 20px;
		margin-bottom: 20px;
	}
}

/*------------------------

@ notes

-------------------------*/
#notes {
  font-size: 12px;
  line-height: 1.5em;
  padding: 15px 0px 30px 0px;
  text-align:left;
  color:#444;
}

@media screen and (max-width:800px){
	#notes {
			width:96%;
			margin:0 auto;
	}
}

/*------------------------

@ navigation

-------------------------*/
.navigation{
	margin:0 0 50px 0;
}

.arealist{
  width: 902px;
  height: 52px;
  line-height: 50px;
  margin: 0 auto;
  border-bottom: none;
  text-align: center;
  color: #C3C3C3;
  border:1px solid #ccc;
  display: flex;
  flex-wrap: wrap;
}

.arealist a{
  width:150px;
  height:50px;
  position:relative;
  display: inline-block;
  color: #000;
  text-decoration: none;
  border-left: 1px solid #ccc;
  border-right: 1px solid #fff;
  text-shadow:1px 1px 1px #fff;
  background: -webkit-linear-gradient(#ffffff, #DCDCDC);
  background: linear-gradient(#ffffff, #DCDCDC);
}

.arealist a:nth-child(1){
	border-left:1px solid #fff;
}

.arealist a:hover{
	background: -webkit-linear-gradient(#DCDCDC, #ffffff);
	background: linear-gradient(#DCDCDC, #ffffff);
	text-decoration:none;
}

.arealist a span{
  width: 16px;
  height: 16px;
  display: inline-block;
  background: #9b8231;
  border-radius: 50%;
  position: absolute;
  z-index: 1;
  top: 17px;
  right: 8px;
}

.arealist a span:before{
  content: "";
  width: 6px;
  height: 2px;
  background: #fff;
  position: absolute;
  top: 5px;
  left: 6px;
  transform: rotate(45deg);
  -webkit-transform:rotate(45deg);
}

.arealist a span:after{
  content: "";
  width: 6px;
  height: 2px;
  background: #fff;
  position: absolute;
  top: 9px;
  left: 6px;
  transform: rotate(-45deg);
  -webkit-transform:rotate(-45deg);
}


@media screen and (max-width:800px){
	.navigation{
		width:98%;
		margin:0 auto 10% auto;
	}

	.arealist{
		width: 100%;
		height: auto;
		border:none;
	}

	.arealist a{
		width:48%;
		height:50px;
		position:relative;
		display: inline-block;
		color: #000;
		text-decoration: none;
		height: 52px;
		line-height: 50px;
		margin: 1%;
		border-bottom: none;
		text-align: center;

		border:1px solid #ccc;
	}

	.arealist a:nth-child(1){
		border:1px solid #ccc;
	}

	.arealist a:hover{
	}

	.arealist a span{
	}

	.arealist a span:before{
	}

	.arealist a span:after{
	}

}


/*---------------------------------------------

section

----------------------------------------------*/
#section-container {
	width:100%;
	margin: 0 auto;
	text-align:left;
}

#section-container h1{
	font-size: 93%;
	font-weight: bold;
	padding:10px 0 3px;

	color:#a63b9e;
	border-bottom: solid #a63b9e;
}


.theater-block{
	padding: 10px 0 0;
	margin:0;
}

@media screen and (max-width:800px){
	#section-container {
	}

	#section-container h1{
	}


	.theater-block{
	}
}


/*---------------------------------------------

@ article

----------------------------------------------*/
.area-wrap{
	padding:0 0 50px 0;
}

.area-name{
	font-size:24px;
	color:#444;
	padding:10px 0;
}


.article{
	padding:15px 0 8px;
}

.article-container{
	padding:0px 0px 0px 0px;
	color:#555;
}

.top-header{
  width:100%;
  height:40px;
  line-height:40px;
  color:#FFF;
  background-color:#80c7ee;
  display: flex;
  flex-wrap: wrap;
}

.area-wrap .list-all{
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  display: flex;
  flex-wrap: wrap;
  -webkit-justify-content: flex-end; /* Safari */
  justify-content: flex-end;
}

.area-wrap .list-all:nth-last-child(1){
	border-bottom:1px solid #ccc;
}

.area-wrap .list-all:hover{
	background:#f0f0f0;
}


.top-header .area-ttl{
  width:10%;
  height:40px;
  line-height:40px;
  padding: 0 0 0 25px;
}

.top-header .list{
  border-bottom:1px dotted #D0D0D0;
  width : -webkit-calc(100% - 10%);
  width : calc(100% - 10%);
  height:40px;
  line-height:40px;
  display: flex;
}

.list-all .area-ttl{
  width:10%;
  height:50px;
  line-height:50px;
  padding: 0 0 0 25px;
}


.list-all .list{
	background:#fff;
	border-left:1px solid #ccc;
	border-bottom:1px dotted #ccc;
	width : -webkit-calc(100% - 10%);
	width : calc(100% - 10%);
	line-height:50px;
	height: auto;
  display: flex;
}

.list-all .list:hover{
	background:#f0f0f0;
}

.list-all .list:nth-last-child(1){
	border-bottom:none;
}

.article-container p{
	padding: 0 0 0 20px;
}

.area-ttl{
}

.t1{
	width: 30%;
}
.t1 a{
	display:block;
}

.t2{
	width:20%;
	padding:0 !important;
	text-align:center;
	border-left:1px solid #ccc;
}

.t3{
	width:60%;
	padding:0px !important;
	text-align:center;
	border-left:1px solid #ccc;
}





.areatxt{
	font-weight:bold;
	font-size:16px;
}

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

	.area-wrap{
		padding:0 0 5% 0;
	}

	.area-name{
		font-size: 24px;
		color: #444;
		width: 94%;
		padding: 10px 0;
		margin: 0 auto;
	}


	.article{
		padding:15px 0 8px;
	}


	.article-container{
		width:94%;
		margin:0 auto;
		padding:0px 0px 0px 0px;
		color:#555;
	}


	.top-header{
		width:100%;
		height:40px;
		line-height:40px;
		color:#FFF;
		background-color:#cccccc;
		display:none;
	}


	.area-wrap .list-all{
		border-top: none;
		border-left: none;
		border-right: none;
    margin: 0 auto 4% auto;
	}


	.area-wrap .list-all:nth-last-child(1){
		border-bottom:none;
	}


	.area-wrap .list-all:hover{
		background:#f0f0f0;
	}


	.top-header .area-ttl{
		width:100%;
		height:40px;
		line-height:40px;
		padding: 0px;
	}


	.top-header .list{
		border-bottom:1px dotted #D0D0D0;
		width : -webkit-calc(100% - 15%);
		width : calc(100% - 15%);
		height:40px;
		line-height:40px;
	}


	.list-all .area-ttl{
		width:100%;
		height:40px;
		line-height:40px;
   		margin: 0 0 4% 0;
		padding: 0px;
		color:#FFF;
		background-color:#81c7ee;
		text-align:center;
	}


	.list-all .list{
		background:#fff;
		border:1px solid #cccccc !important;
		width : 100%;
		height:auto;
		margin:0 0 4% 0;
		line-height:inherit;
    display: block;
	}

	.list-all .list:hover{}

	.list-all .list:nth-last-child(1){}

	.article-container p{
		padding: 0px;
		min-height:30px;
		line-height:25px;
		padding:0 0 0 33% !important;
		position:relative;
		border-bottom:1px dotted #cccccc;
	}

	.article-container p:nth-child(1){
		border-bottom:1px solid #cccccc;
	}

	.article-container p:nth-last-child(1){
		border-bottom:none;
	}

	.area-ttl{
	}

	.article-container p.t1{
    width: 100%;
    padding: 10px 0 0 0 !important;
    min-height: 40px;
    line-height: 1.5em;
	}

	.t1 a{
		display:block;
    text-align: center;
    color: #9b8231;
	}

	.t1:before {
    display: none !important;
		content: "劇場名";
	}


	.t2{
		width: 100%;
		text-align:left;
		border-left:none;
	}

	.t2:before {
		content: "電話番号";
	}

	.t3{
		width: 100%;
		text-align:left;
		border-left:none;
	}

	.t3:before {
		content: "備考";
	}


	.list-all .list p:before{
		background: #a8a8a8;
		color: #fff;
		text-align: center;
		display: block;
		width: 30%;
		position: absolute;
		height: 100%;
		line-height: 30px;
		top: 0px;
		left: 0px;
		font-size: 12px;
	}


	.areatxt{
	}

}



/*------------------------

@ footer

-------------------------*/
footer {
	width:100%;
	margin:0 auto;
	text-align:center;
	padding-bottom: 5%;
	color: #848484;
	font-size: 0.5em
}

@media screen and (max-width:800px){
	footer{
	color: #848484;
	padding-bottom: 10%;

	}
}


/*---------------------------------------------
@ a
----------------------------------------------*/
a {
	color: #606060;
	text-decoration: none;
}


a:hover { text-decoration: underline; }