* {
	margin: 0;
	padding: 0;
	font-size: 100%;
}

html,body {
	min-width: 1140px;
	height: 100%;
	font-family: serif;
	line-height: 1;
	background: #000;
}

img {
	vertical-align: bottom;
}

a {
  color: #000;
	transition: 0.2s all ease;
}

a:hover {
  color: #f88e00;
}

::-moz-selection {
  background: #000;
  color: #fff100;
}

::selection {
  background: #000;
  color: #fff100;
}

.sp {
  display: none;
}








.main {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 720px;
	background: url(images/main_bg.jpg) no-repeat center top;
	background-size: cover;
	opacity: 0;
	animation: 0.7s open 0.5s ease forwards;
}

.mainSp {
	display: none;
}

.mainSp img {
	width: 100%;
	height: auto;
}

.anim {
	opacity: 0;
	animation: 0.7s open 1.8s ease forwards;
}

@keyframes open {
	0% { opacity: 0;}
	100% { opacity: 1;}
}

.topWrap {
  position: absolute;
	top: 10px;
	left: 10px;
}

h1 {
  margin: 0 0 15px 0;
	box-sizing: border-box;
}

h1 img {
}

.date {
  margin: 0 0 15px 0;
}

.bottomWrap {
	position: absolute;
	left: 10px;
	bottom: 10px;
}

.cast {
	margin: 0 0 10px 0;
}

.navi {
  display: inline-block;
  width: 172px;
  box-sizing: border-box;
	margin: 0 0 10px 0;
	padding: 8px 0px;
	border: 2px solid #FFF;
	line-height: 1;
	text-align: center;
}

.navi:hover {
  border: 2px solid #fff100;
  cursor: pointer;
}

.btn {
	display: inline-block;
	margin: 0 0 10px 0;
	padding: 8px 40px;
	border: 2px solid #FFF;
	line-height: 1;
}

.btn:hover {
	border: 2px solid #fff100;
}

.catch {
	position: absolute;
	top: 55px;
	right: 66px;
}

.sns {
	margin: 0 0 6px 0;
}

.twitter,
.facebook {
  position: relative;
  display: inline-block;
  margin: 0 6px 0 0;
  width: 50px;
  height: 50px;
  background: #fff100;
  border-radius: 25px;
  color: #000;
  font-size: 1.5em;
}

.twitter:hover,
.facebook:hover {
  background: #FFF;
  transition: 0.2s all ease;
}

.twitter i,
.facebook i {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-45%, -49%);
}

.snsSp {
  overflow: hidden;
}

.snsSp .twitter,
.snsSp .facebook {
  position: relative;
  display: block;
  margin: 0;
  width: 50%;
  height: 80px;
  background: #fff;
  border-radius: 0;
  color: #000;
  font-size: 1.5em;
  float: left;
}






.qa {
  padding: 100px 0 150px 0;
  background: #fff100;
}

.qaContents {
	max-width: 960px;
  margin: 0 auto 0 auto;
  padding: 0 10px;
}

.qa h2 {
  margin: 0 0 100px 0;
  font-size: 2.4em;
  font-weight: normal;
}

.qa h2 span {
  font-size: 0.8em;
}

.txt {
  margin: 0 0 150px 0;
  text-align: justify;
  letter-spacing: 0.1em;
}

.txt h3 {
  margin: 0 0 35px 0;
  /*font-size: 240%;*/
  font-weight: normal;
  line-height: 1.3;
}

.txt h3 span {
  font-size: 2.4em;
}

.txt h4 {
  margin: 0 0 7px 0;
  line-height: 1.5;
}

.txt .clm {
  margin: 0 0 30px 0;
}

.txt .clm p {
  margin: 0 0 18px 0;
  color: #666;
  font-size: 88%;
  line-height: 1.76;
}

.txt:last-child {
  margin: 0;
}





.theater {
  padding: 100px 0 150px 0;
  background: #eee53e;
}

.theaterContents {
	max-width: 960px;
  margin: 0 auto 0 auto;
  padding: 0 10px;
}

.theater h2 {
  margin: 0 0 100px 0;
  font-size: 2.4em;
  font-weight: normal;
}

.ticketInfo {
  margin: 0 0 30px 0;
  padding: 10px 20px 0 20px;
  border: 3px solid #000;
  text-align: center;
}

.ticketInfo img {
  max-width: 100%;
  height: auto;
}

.theaterList {
  width: 100%;
  border-collapse:collapse;
}

.theaterList th,
.theaterList td {
  text-align: left;
  line-height: 1.4;
}

.theaterList th {
  padding: 6px 20px;
  background: #FFF;
  font-weight: normal;
}

.theaterList th:nth-of-type(1) {
  width: 4em;
}

.theaterList th:nth-of-type(3) {
  width: 13em;
}

.theaterList th:nth-of-type(4) {
  width: 4em;
}

.theaterList td {
  padding: 16px 20px;
  border-bottom: 1px solid #707070;
}

.theaterList td:nth-of-type(4) {
  text-align: center;
}




.trailer {
  text-align: center;
  background: none;
}

.movieContainer {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  overflow: hidden;
  background: #000;
}

.movieContainer iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}





@media screen and (max-width: 640px) {
  html,body {
    min-width: 100%;
  }
  
  .sp {
    display: block;
  }
  
  .pc {
    display: none;
  }
  
  .main {
    display: none;
  }
  
  .mainSp {
    display: block;
    background: #FFF url(images/main_bg_sp02.jpg) no-repeat;
    background-size: contain;
  }
  
  .spBtn {
    display: block;
    padding: 20px 20px;
    background: #FFF;
    border-bottom: 1px solid #000;
    font-size: 120%;
    text-align: center;
    text-decoration: none;
  }
  
  .spBtn:hover {
    cursor: pointer;
  }
  
  .qa {
    padding: 70px 0 70px 0;
    background: #fff100;
  }
  
  .qa h2,
  .theater h2 {
    margin: 0 0 70px 0;
    font-size: 2em;
    font-weight: normal;
  }
  
  .txt {
    margin: 0 0 70px 0;
    text-align: justify;
    letter-spacing: 0.1em;
  }
  
  .theater {
    padding: 70px 0 70px 0;
    background: #eee53e;
  }
  
  .theaterList th {
    padding: 4px 0 4px 10px;
  }
  
  .theaterList th:last-of-type {
    padding: 4px 10px;
  }
  
  .theaterList td {
    padding: 10px 10px;
  }
  
  .theaterList th:nth-of-type(1) {
    width: 3em;
  }
  
  .theaterList th:nth-of-type(3) {
    width: 5.5em;
  }
  
  .theaterList th:nth-of-type(4) {
    width: 2em;
  }
}