/* ===================================================================
CSS / elephant studio 2011
=================================================================== */

@charset "utf-8";

html {  overflow-y:scroll;}

/*theater********************************/

body {
	margin: 0px;
	padding: 0px;
	text-align: center;
	background-color: #FFF;
	font-size: 14px;
	color: #666666;
	line-height: 150%;
	font-family: Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	background-image: url(images/teaser_bg.gif);
	background-repeat: repeat;
	background-position: 50% 0px;
}
img {
	margin: 0px;
	padding:0px;
	border:none
}
h1,h2,h3,p {
	margin:0px;
	padding:0px;
	font-size:14px;
}
ul{
	margin:0;
	padding:0;
	list-style-type:none;
}
li{
	margin:0;
	padding:0;
}
a{
	color: #666666;
	font-style: normal;
	text-decoration: underline;
}

dl{
  display:flex;
  flex-wrap: wrap;
  border-top: none;
  border-right: 1px solid #999;
  border-bottom: 1px solid #999;
}
dd{
  padding: 0px;
  margin: 0;
  border-left: 1px solid #999;
  border-top: 1px solid #999;
  background: #fff;
  box-sizing: border-box;
}

.clear { clear:both; }

#theater_wrapper {
	width: 850px;
	margin-right: auto;
	margin-left: auto;
	text-align: left;
	background-color: #FFF;
	margin-top: 0px;
	padding-top: 20px;
	padding-bottom: 30px;
}
#theater_title {
	margin-left: auto;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 20px;
	text-align: left;
	width: 850px;
	font-family: vdl-v7marugothic,sans-serif;
	font-weight: 300;
	font-style: normal;
}
#theater_title .txt1 {
	font-size: 20px;
	margin-bottom: 15px;
}
#theater_title .txt1 {
	display:flex;
	align-items:center;
}

#theater_title .txt1:after {
	margin-left:5px;
	border-top:1px solid#999;
	content:"";
	flex-grow:1;
}

#theater_title .txt2 {
	font-size: 28px;
}

#theater-txt {
	margin-left: auto;
	margin-top: 10px;
	width: 800px;
	margin-right: auto;
	margin-bottom: 10px;
}

#theater-list_wrap {
	width: 850px;
	margin-bottom: 450px;
}

/*エリア選択ボタン********************************/
#theater_area {
	width: 850px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 60px;
	margin-bottom: 15px;
	border-top:solid 1px #444;
	padding-top:20px;
	list-style: none;
	overflow: hidden;
}
#theater_area li {
	font-size: 16px;
	width: 116px;
	margin-right: 5px;
	background: #113253;
	float: left;
	border-radius: 5px;
}
#theater_area li a {
	display: block;
	padding: 5px;
	text-align: center;
	text-decoration: none;
	color: #fff;
	transition: all  0.3s ease;
}
#theater_area li a:hover {
	background: #109eec;
	border-radius: 5px;
	color: #fff;
}

/*各項目名********************************/
.area1_w {
	width: 13%;
}
.area2_w {
	width: 7%;
}
.theatername_w {
	width: 35%;
}
.date_w {
	width: 25%;
}
.remark_w {
	width: 20%;
}

.area1 {
	background-color: #555;
	color: #fff;
	height: 26px;
	text-align: center;
}
.area2 {
	background-color: #555;
	color: #fff;
	height: 26px;
	text-align: center;
}
.theatername {
	background-color: #555;
	color: #fff;
	height: 26px;
	text-align: center;
}
.theater_name {
	text-indent: 1em;
}
.date {
	background-color: #555;
	color: #fff;
	text-indent: 1em;
	height: 26px;
	text-align: center;
}
.remark {
	background-color: #555;
	color: #fff;
	height: 26px;
	text-align: center;
}
.remark_txt {
	/* font-size: 12px; */
}
.txt_center {
	text-align: center;
}

/*エリアid********************************/
#kanto, #hokkaido, #hokuriku, #tokai, #kansai, #chugoku, #kyushu {
	background-color: #999;
	height: 26px;
	font-size: 14px;
	color: #fff;
	text-align: center;
	line-height: 26px;
}
.area_bg {
	background-color: #999;
	height: 26px;
}


/*ローディング********************************/
#loading-wrapper { 
  position: fixed;
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
  background: #fff; 
  color: #ccc;
  display: flex; 
  flex-direction: column; 
  justify-content: center; 
  align-items: center; 
  transition: all 0.3s; 
  z-index: 9999;
}

.completed {
  opacity: 0;
  visibility: hidden;
}

.sk-cube-grid {
  width: 84px;
  height: 84px;
  margin: 40px auto;
}

.sk-cube-grid .sk-cube {
  width: 33%;
  height: 33%;
  background-color: #ccc;
  float: left;
  -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
          animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; 
}
.sk-cube-grid .sk-cube1 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }
.sk-cube-grid .sk-cube2 {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s; }
.sk-cube-grid .sk-cube3 {
  -webkit-animation-delay: 0.4s;
          animation-delay: 0.4s; }
.sk-cube-grid .sk-cube4 {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s; }
.sk-cube-grid .sk-cube5 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }
.sk-cube-grid .sk-cube6 {
  -webkit-animation-delay: 0.3s;
          animation-delay: 0.3s; }
.sk-cube-grid .sk-cube7 {
  -webkit-animation-delay: 0s;
          animation-delay: 0s; }
.sk-cube-grid .sk-cube8 {
  -webkit-animation-delay: 0.1s;
          animation-delay: 0.1s; }
.sk-cube-grid .sk-cube9 {
  -webkit-animation-delay: 0.2s;
          animation-delay: 0.2s; }

@-webkit-keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
            transform: scale3D(1, 1, 1);
  } 35% {
    -webkit-transform: scale3D(0, 0, 1);
            transform: scale3D(0, 0, 1); 
  }
}

@keyframes sk-cubeGridScaleDelay {
  0%, 70%, 100% {
    -webkit-transform: scale3D(1, 1, 1);
            transform: scale3D(1, 1, 1);
  } 35% {
    -webkit-transform: scale3D(0, 0, 1);
            transform: scale3D(0, 0, 1);
  } 
}