@charset "UTF-8";
@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);
* {
	font-size: 100%;
	font-weight: normal;
	font-style: normal;
	text-align: left;
	line-height: 1.7em;
	font-family: "Noto Sans Japanese", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
	letter-spacing: 0.02em;
}
body {
 *font-size: small; /* IE7およびIE6標準準拠モード用 */
 *font: x-small; /* IE6後方互換モード用 */
}
a {
	outline: none;
}
a:focus {
	outline: none;
}
fieldset, img {
	border: 0;
}
html:not(:target) body {
}/* IE 以外 */
body {
	-webkit-text-size-adjust: 100%;
}/* WebKit */
pre {
}
a:link, a:visited {
	color: #FFCC00;
	text-decoration: underline;
}
a:hover, a:active {
	color: #FFCC00;
	text-decoration: none;
}
input, select, textarea {
	color: #FFCC00;
}
html:not(:target) input, html:not(:target) select, html:not(:target) textarea {
	font-family: sans-serif;
}/* IE 以外 */
html:not(:target) input[type="password"] {
	font-family: "Lucida Grande", sans-serif;
}
textarea {
	border: 1px solid #b7b7b7;
	padding: 2px 3px 2px 3px;
}
*::selection {
	background: #b9e3f9;
}
*::-moz-selection {
background: #b9e3f9;
}
/* --------------------------------
	汎用クラス
-------------------------------- */
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
	font-size: 0;
	line-height: 1;
	overflow: hidden;
}
.clearfix {
	display: inline-block;
}
* html .clearfix {
	height: 1%;
}
.clearfix {
	display: block;
}
/* JavaScriptによるDOM操作用セレクタ -------------------- */
.rollover {
}
.faderollover {
}
/* --------------------------------
	余白
-------------------------------- */

body, h1, h2, h3, h4, h5, h6, p, address, blockquote, pre, div, dl, dt, dd, ol, ul, li, th, td, form, fieldset, input, textarea {
	margin: 0;
	padding: 0;
}
select {
	margin: 0;
}
/* --------------------------------
	アピアランス
-------------------------------- */
html, body {
	height: 100%;
	width: 100%;
}
abbr, acronym {
	border: 0 none;
}
q:before, q:after {
	content: "";
}
ol, ul {
	list-style: none;
}
img {
	border: 0 none;
	vertical-align: bottom;
}
object {
	outline: none;
}
table {
	border-spacing: 0;
}
*:first-child+html table {
	border-collapse: collapse;
}/* IE 7 */
* html table {
	border-collapse: collapse;
}/* IE 6 */
caption {
	text-align: left;
}
th, td {
	text-align: left;
	vertical-align: middle;
	empty-cells: show;
}
hr {
	display: none;
}
fieldset {
	border: 0 none;
}
label {
	cursor: default;
}
/* --------------------------------
	タイポグラフィ
-------------------------------- */

h1, h2, h3, h4, h5, h6 {
	font-style: normal;
	font-weight: normal;
	font-size: 100%;
}
p, address, blockquote, pre, div, abbr, acronym, dfn, cite, q, code, kbd, samp, var, dl, ol, ul, caption, th {
	font-weight: normal;
	font-style: normal;
}
em, strong {
	font-weight: bold;
	font-style: normal;
}
/* --------------------------------
	HTML5
-------------------------------- */
html, body {
    height: 100%;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
	margin: 0;
	padding: 0;
}
.guard {
	pointer-events: none;
	cursor: default;
}
.sp {
	display: none;
}
.R {
	float: right;
}
.L {
	float: left;
}
.loadingWrap {
	width: 100%;
	height: 100%;
	background: #fff;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
}
.loadingWrap img{
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -32px;
	margin-left: -32px;
}
.pattern {
	background-image: url(../img/pattern.png);
	background-repeat: repeat;
	background-attachment: scroll;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	content: "";
	z-index: -1;
	transition: 0.2s;
}
#container {
	z-index: 550;
	width: 100%;
	min-height: 100%;
}
#container.top {
	position: relative;
	overflow: auto;
	min-width: 1200px;
	width: 100%;
	text-align: right;
	display: table;
}
.main-ph {
	position: absolute;
	width: 65%;
	left: -20px;
	top:0;
	height: 100%;
	overflow: hidden;
}
.main {
	width: 40%;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}
.main-icon {
	position: absolute;
	left: 20px;
	bottom: 20px;
	width: 140px;
}
.banner-cp {
	bottom: 80px;
    left: 20px;
    position: absolute;
    width: 260px;
}
.logo,
.billing {
	width: 90%;
	max-width: 550px;
	display: block;
	margin: 0 auto;
	position: relative;
	text-align: center;
}
.logo_pc {
	width: 90%;
	max-width: 550px;
	display: block;
	margin: 6% auto 3%;
	position: relative;
}
.logo .base, 
.logo_pc .base, 
.billing .base {
	width: 100%;
}
.billing .day {
	width: 190px;
	text-align: center;
}
.logo_pc .no3 {
	left: 51%;
    position: absolute;
    top: 0;
}
.logo .no3 {
	width: 24.6%;
	position: absolute;
	left: 24%;
	top: 0;
}
.extra {
	display: block;
	margin: 15px auto;
	background-color: #FD0000;
	padding: 10px 30px;
	color: #030000;
	width: 240px;
	text-align: center;
	font-size: 20px;
	font-weight: 700;
}
.extra:link, .extra:visited {
	color: #030000;
	text-decoration: none;
}
.extra:hover {
	background-color: #fff;
	color: #FD0000;
	-webkit-transition: all .3s;
	transition: all .3s;
}
.menu {
	width: 78%;
	max-width: 550px;
	display: block;
	margin: 20px auto 0;
	border-bottom: 1px solid #030000;
	border-top: 1px solid #030000;
	position: relative;
	text-align: center;
	padding: 8px 0;
}
.menu li {
	display: inline-block;
	margin: 0 4%;
}
.menu li.sp {
	display: none;
}
.snslink {
	width: 90%;
	max-width: 550px;
	display: block;
	margin: 0 auto;
	position: relative;
	text-align: center;
	padding: 8px 0;
}
.snslink li {
	display: inline-block;
	margin: 0 1.5%;
}
.menu li a {
	color: #030000;
	font-weight: bold;
	text-decoration: none;
	font-size: 20px;
}
.menu li a.about {
	font-size: 32px;
	font-weight: bolder;
}
.menu li a:hover {
	color: #fd0000;
}
.snslink li img {
	width: 50px;
}
.snslink li.ticket img {
	width: 250px;
	margin-bottom: -25px;
}
#container .c {
	font-size: 11px;
	color: #030000;
	text-align: center;
	width: 100%;
	clear: both;
	padding: 20px 0 15px;
}
#container .c img {
	max-width: 220px;
	margin: 0 auto;
}
.banner {
	text-align: center;
	margin: 30px auto 0;
	width: 76%;
}
.footer {
	width: 78%;
	max-width: 550px;
	display: block;
	position: relative;
	margin: 30px auto 10px;
}
.tantei-bar-sapporo {
	width: 100%;
	max-width: 640px;
}
.sapporo {
	width: 100%;
	max-width: 160px;
}
.sns {
	font-size: 0;
	display: block;
	line-height: 30px;
}
.sns li {
	display: inline-block;
	vertical-align: bottom;
	margin: 0 2px;
	line-height: 1em;
	font-size: 0;
}
.sp {
	display: none;
}
/* 動画 */
.mov {
  margin: 0 auto;
  padding-top: 50%;
  position: relative;
  width: 100%;
}
.mov iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}
a:hover img {
	-ms-filter: "alpha(opacity=70)";
	filter: alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
	transition: 0.2s;
	text-decoration: none;
}

@media screen and (max-width: 768px) {
.sp {
	display: block;
}
.pc {
	visibility: hidden;
	display: none !important;
}
.R, .L {
	float: none;
	width: 100%;
	text-align: center;
	margin-bottom: 20px;
}
body {
	background-image: none;
	background-color: #030000;
	position: relative;
}
#container {
	min-height: 100%;
	height:auto;
}
#container.top {
	min-width: 100%;
	width: 100%;
	text-align: center;
	display: block;
}
.main {
	width: 100%;
}
.logo {
	width: 80%;
}
.logo .no3 {
	width: 46%;
	position: absolute;
	left: 51%;
	top: 0;
}
.menu {
	width: 76%;
	border-bottom: none;
	border-top: 1px solid #eee;
	padding: 0;
}
.menu li {
	display: inline-block;
	margin: 0;
	padding: 10px 0;
	border-bottom: 1px solid #eee;
	width: 100%;
	text-align: center;
}
.menu li.sp {
	display: inline-block;
}
.menu li a {
	font-size: 15px;
	color: #fff;
}
.extra {
	margin-top: 20px;
	width: 76%;
	padding: 10px 0;
}
.sns {
	width: 100%;
	text-align: center;
	margin-bottom: 0;
}
.snslink li img {
	width: 40px;
}
#container .c {
    padding: 10px 0 15px;
}
#container .c img {
	max-width: 200px;
	margin: 0 auto;
}
.footer {
	width: 100%;
	margin: 20px auto 10px;
}
}
/* ------------------------------
	animation
------------------------------ */
.animated {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
.animated.hinge {
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
}
 @-webkit-keyframes fadeIn {
 0% {
 opacity: 0;
}
 100% {
 opacity: 1;
}
}
 @keyframes fadeIn {
 0% {
 opacity: 0;
}
 100% {
 opacity: 1;
}
}
.fadeIn {
	-webkit-animation-name: fadeIn;
	animation-name: fadeIn;
}
 @-webkit-keyframes fadeOut {
 0% {
 opacity: 1;
}
 100% {
 opacity: 0;
}
}
 @keyframes fadeOut {
 0% {
 opacity: 1;
}
 100% {
 opacity: 0;
}
}
.fadeOut {
	-webkit-animation-name: fadeOut;
	animation-name: fadeOut;
}
 @-webkit-keyframes fadeInDown {
 0% {
 opacity: 0;
 -webkit-transform: translateY(-10px);
 transform: translateY(-10px);
}
 100% {
 opacity: 1;
 -webkit-transform: translateY(0);
 transform: translateY(0);
}
}
 @keyframes fadeInDown {
 0% {
 opacity: 0;
 -webkit-transform: translateY(-10px);
 -ms-transform: translateY(-10px);
 transform: translateY(-10px);
}
 100% {
 opacity: 1;
 -webkit-transform: translateY(0);
 -ms-transform: translateY(0);
 transform: translateY(0);
}
}
.fadeInDown {
	-webkit-animation-name: fadeInDown;
	animation-name: fadeInDown;
}
 @-webkit-keyframes fadeInUp {
 0% {
 opacity: 0;
 -webkit-transform: translateY(20px);
 transform: translateY(20px);
}
 100% {
 opacity: 1;
 -webkit-transform: translateY(0);
 transform: translateY(0);
}
}
 @keyframes fadeInUp {
 0% {
 opacity: 0;
 -webkit-transform: translateY(20px);
 -ms-transform: translateY(20px);
 transform: translateY(20px);
}
 100% {
 opacity: 1;
 -webkit-transform: translateY(0);
 -ms-transform: translateY(0);
 transform: translateY(0);
}
}
.fadeInUp {
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp;
}
 @-webkit-keyframes rotateIn {
 from {
 -webkit-transform-origin: center;
 transform-origin: center;
 -webkit-transform: rotate3d(0, 0, 1, -1200deg);
 transform: rotate3d(0, 0, 1, -1200deg);
 opacity: 0;
}
 to {
 -webkit-transform-origin: center;
 transform-origin: center;
 -webkit-transform: none;
 transform: none;
 opacity: 1;
}
}
 @keyframes rotateIn {
 from {
 -webkit-transform-origin: center;
 transform-origin: center;
 -webkit-transform: rotate3d(0, 0, 1, -1200deg);
 transform: rotate3d(0, 0, 1, -1200deg);
 opacity: 0;
}
 to {
 -webkit-transform-origin: center;
 transform-origin: center;
 -webkit-transform: none;
 transform: none;
 opacity: 1;
}
}
.rotateIn {
	-webkit-animation-name: rotateIn;
	animation-name: rotateIn;
}

/* 動画 ---------------- */
#trailer-wrapper {
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #000;
	z-index: 10000;
}
#trailer-container {
	width: 960px;
	height: 540px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -270px 0 0 -480px;
}
#trailer-inner {
	position: relative;
	width: 100%;
	height: 100%;
}
#trailer {
	width: 100%;
	height: 100%;
	background: #000;
}
#trailer-wrapper .btn-close {
	position: absolute;
	top: 20px;
	right: 20px;
}
#trailer-nav {
	display: block;
	width: 100%;
	height: 33px;
	box-sizing: border-box;
	text-align: center;
	margin-top: 10px;
}
#trailer-nav li {
	width: 20%;
	display: inline-block;
	padding: 0 5px;
	box-sizing: border-box;
}
#trailer-nav a {
	display: block;
	border: 1px solid #cbcbcb;
	height: 33px;
	color: #b8b8b8;
	-webkit-transition: all .25s ease;
	-moz-transition: all .25s ease;
	-ms-transition: all .25s ease;
	-o-transition: all .25s ease;
	transition: all .25s ease;
}
#trailer-nav span {
	display: block;
	height: 33px;
	line-height: 30px;
	box-sizing: border-box;
	font-size: 14px;
	border: 2px solid #fff;
}
#trailer-nav .cur a, #trailer-nav a:hover {
	background: #bbebf7;
}
input[type="checkbox"].on-off + ul{
    height: 0;
    overflow: hidden;
}
input[type="checkbox"].on-off:checked + ul{
    height: 47px;
}
/* 印刷時調整 ---------------- */
@media print {
#corner {
	display: none !important;
}
#intro ul.thumb img {
	opacity: 1 !important;
}
}
/* 動画
================================================== */
.mov {
  margin: 0 auto 20px;
  padding-top: 41%;
  position: relative;
  width: 100%;
}
.txt_mov {
  margin: 0 auto 20px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #000;
}
.txt_mov .new {
	color: #FF0096;
}
.mov iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important;
}
/* ------------------------------
	動画
------------------------------ */
#trailer{
	height:200px;
}
#trailer-slider{
	position: relative;
	height:100%;
	box-sizing:border-box;
	overflow-x:scroll;
	-webkit-overflow-scrolling: touch;
	display: block;
	padding:15px 15px 5px;
}
#trailer-slider ul{
	display: -webkit-box;
	height:100%;
}
#trailer-slider li{
	display: block;
	width:92%;
	height:100%;
	box-sizing:border-box;
	padding-right:10px;
}
#trailer-slider li:last-child{
	padding-right:15px;
}
#trailer-slider .container{
	position: relative;
	height:100%;
	width:100%;
	padding: 0;
	box-sizing:border-box;
}
#trailer-slider .player{
	width:100%;
	height:100%;
	background:#000;
}
#trailer-slider .player video{
	display: block;
	width:100%;
	height:100%;
}
#trailer-slider .thumb{
	position: absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	pointer-events: none;
	opacity: 1;
	background:no-repeat center center;
	background-size:cover;
}
#trailer-slider .mark{
	position: absolute;
	width:88px;
	height:88px;
	left:50%;
	top:50%;
	margin:-44px 0 0 -44px;
	background:url(../mov/img/bt_play.png) no-repeat center center;
	background-size:contain;
}
#trailer-slider .thumb.active .mark{
	opacity: 0.5;
}
#trailer-slider .name{
	width:100%;
	font-size:14px;
	height:50px;
	position: absolute;
	top:0;
	left:0;
	color:#fff;
	padding:6px 10px;
	background-size:100% 100%;
	text-shadow:0 0 5px rgba(0,0,0,0.5);
	letter-spacing: 0.05em;
	box-sizing:border-box;
}
#trailer-slider .container{
	border-color:#999;
}
#trailer-slider .mark{
	top:auto;
	bottom:6px;
	left:10px;
	width:60px;
	height:60px;
	margin:0;
}