@charset "utf-8";
html,body{
	width: 100%
}
#logo {
	height: 68px;
	width: 1136px;
	margin-right: auto;
	margin-left: auto;
}
body footer {
	width: 1136px;
	margin-right: auto;
	margin-left: auto;
	height: 240px;
	background-image: url(../img/qr.png);
	background-repeat: no-repeat;
	background-position: left bottom;
}
#menu {
	height: 80px;
}
.cero {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: bolder;
	text-align: left;
	background-image: url(../img/cero_icon.png);
	background-repeat: no-repeat;
	background-position: right center;
	border: 3px solid #000000;
	border-radius: 10px;
	width: 450px;
	margin-left: auto;
	margin-right: 15px;
	color: #000000;
	font-size: 15px;
}



#logo a .intense {
	width: 278px;
	margin-right: 15px;
	margin-left: auto;
}

body {
	background-image: url(../img/bg.jpg);
	background-repeat: no-repeat;
	text-align: center;
	background-position: center bottom;
}
#top {
	margin-top: 92px;
	height: 560px;
	background-image: url(../img/title_logo.png);
	background-repeat: no-repeat;
	width: 1136px;
	background-position: center center;
	margin-left: auto;
	margin-right: auto;
}
#logo .title img {
	width: 1020px;
	margin-right: auto;
	height: 52px;
	margin-left: 0px;



}
.movie_title {
	width: 1136px;
	height: 52px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 13px;
}
#movie .movthum {
	height: 222px;
}

#movie {
	width: 1136px;
	height: 222px;
	margin-right: auto;
	margin-left: auto;
}


#screen {
	height: 365px;
	width: 1136px;
	margin-right: auto;
	margin-left: auto;
}
#gs {
	width: 1136px;
	height: 652px;
	margin-right: auto;
	margin-left: auto;
}
#page1 {
}
#page2 {
}
#gallery {
	position: relative;
	width: 650px;
	height: 652px;
	margin: 0px auto;
	padding: 0px 0;
	background-image: url(../img/bg_gallery.png);
	background-repeat: no-repeat;
	background-position: center 0%;
}
#gallery .slideFrame {
	position: relative;
	height: 614px;
	overflow: hidden;
	margin-bottom: 10px;
	font-size: 0%;
}

/* slide images */
#gallery .slideFrame ul {
	position: absolute;
	top: 0;
	left: 85px;
	width: 3100px;
	margin: 0;
}
#gallery .slideFrame ul li {
	float: left;
	width: 400px;
	margin-right: 135px;
}
#gallery .slideFrame ul li:last-child {
	margin-right: 0;
}
#gallery ul.nav li {
	float: left;
	margin-left: 44px;
	background-position: -647px 0;
}
#gallery .slideFrame ul li a {
	background: none;
}

/* gallery items */
#gallery ul li,
#gallery ul li a,
#gallery p,
#gallery p i {
	background: url(../img/gallery_item.png);
}

/* gallery list button */
#gallery ul.nav {
	width: 442px;
	margin: 0 auto;
	padding: 0;
}
#gs #gallery .nav {
	font-size: 0%;
	font-style: oblique;
}

#gallery ul.nav li:last-child {
	margin-right: 0;
}
#gallery ul.nav li a {
	display: block;
	width: 23px;
	height: 23px;
	background-position: -647px -28px;
}
#gallery ul.nav li a:hover { opacity: 0; }

/* slider arrow button */
#gallery p,
#gallery p a {
	position: absolute;
	top: 0px;
	margin-top: 0;
	margin-right: 0px;
	margin-left: 0;
	margin-bottom: 0;
	width: 100px;
	height: 652px;
	cursor: pointer;
}
#gallery .prev {
	background-position: -400px 0;
	left: 0px;
	text-align: left;
}
#gallery .next {
	right: 0;
	background-position: -452px 0;
	text-align: left;
}
#gallery p i {
	display: block;
	width: 88px;
	height: 88px;
	margin: 310px 0 0 12px;
	background-position: -556px 0;
}
#gallery p:hover i {
	margin: 310px 0 0 4px;
}
#gallery .next i {
	margin-left: 0px;
	background-position: -556px -88px;
}
#gallery .next:hover i {
	margin-left: 8px;
}

/* CSS Programming */
#gallery #switch01:target ~ .slideFrame ul {
	left: 85px;
}
#gallery #switch02:target ~ .slideFrame ul {
	left: -450px;
}
#gallery #switch03:target ~ .slideFrame ul {
	left: -985px;
}
#gallery #switch04:target ~ .slideFrame ul {
	left: -1520px;
}
#gallery #switch05:target ~ .slideFrame ul {
	left: -2055px;
}
#gallery #switch06:target ~ .slideFrame ul {
	left: -2590px;
}
#gallery #switch01:target ~ .nav li a[href="#switch01"],
#gallery #switch02:target ~ .nav li a[href="#switch02"],
#gallery #switch03:target ~ .nav li a[href="#switch03"],
#gallery #switch04:target ~ .nav li a[href="#switch04"],
#gallery #switch05:target ~ .nav li a[href="#switch05"],
#gallery #switch06:target ~ .nav li a[href="#switch06"] {
	opacity: 0;
}
#gallery .switch {
	display: none;
}
#gallery .next a[href="#switch02"] {
	z-index: 1;
}
#gallery #switch01:target ~ .prev a:not([href="#switch06"]),
#gallery #switch02:target ~ .prev a:not([href="#switch01"]),
#gallery #switch03:target ~ .prev a:not([href="#switch02"]),
#gallery #switch04:target ~ .prev a:not([href="#switch03"]),
#gallery #switch05:target ~ .prev a:not([href="#switch04"]),
#gallery #switch06:target ~ .prev a:not([href="#switch05"]), 
#gallery #switch01:target ~ .next a:not([href="#switch02"]),
#gallery #switch02:target ~ .next a:not([href="#switch03"]),
#gallery #switch03:target ~ .next a:not([href="#switch04"]),
#gallery #switch04:target ~ .next a:not([href="#switch05"]),
#gallery #switch05:target ~ .next a:not([href="#switch06"]),
#gallery #switch06:target ~ .next a:not([href="#switch01"]){
	pointer-events: none;
}

/* transition */
#gallery ul.nav li a {
	transition: all 0.5s ease 0s;
	-webkit-transition: all 0.5s ease 0;
}
#gallery i {
	transition: all 0.3s ease 0s;
	-webkit-transition: all 0.3s ease 0;
}
#gallery .slideFrame ul {
	transition: left 1s cubic-bezier(0.85, 0.03, 0.15, 0.96) 0s;
	-webkit-transition: left 1s cubic-bezier(0.85, 0.03, 0.15, 0.96) 0;
}

/* clearfix */
#gallery ul:before, #gallery ul:after {
	content: ""; display: table;
}
#gallery ul:after {
	clear: both;
}
#gallery ul {
	*zoom: 1;
}
#screen .thum {
	width: 850px;
	margin-right: auto;
	margin-left: auto;
	height: 365px;
	margin-top: 0px;
}