@charset "utf-8";
/* CSS Document */


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	margin: 0;
	padding: 0;
	vertical-align: top;
	color:#655665;
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", sans-serif;
	letter-spacing:0.5px;
}
.link_name{font-family: 'EB Garamond', serif; font-size:17px; letter-spacing:1px;}
.link_name2{ font-family:"ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif; font-size:16px; letter-spacing:1px;}


::selection {
	background:#FF6682;
	color:#D334FF;
}

::-moz-selection {
	background:#FF6682;
	color:#D334FF;
}


body {
	line-height: 1;
}
h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
}
ol, ul {
	list-style: none;
}
blockquote {
	quotes: none;
}
blockquote:before, blockquote:after {
	content: '';
	content: none;
}
del {
	text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

a{outline:none;}
a:hover{}



a img {
	border: none;
	border-style:none;
}
img {
border-style:none;
}

img{ vertical-align: top;}

strong{ font-weight: normal;}


.sp_head figure,
#near_news figure,
#movie_list figure,
#sp_bio_area,#sp_link_area,#sp_aside,
#nav_open, .sp_head .scroll{
	display:none;
}
	
.bdr_none{
	border-bottom:0px !important;
	}
	
.clearfix {
	zoom: 1;
}
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}

.clear{
	clear:both;
	}




body {
	background: url(../images/bg.gif) repeat;
	height: 100%;
	width: 100%;
}



.screen{
background-image:url(../images/top.webp);
background-position:center;
background-repeat:no-repeat;
-moz-background-size:cover;
background-size:cover;	
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 9999;
}

.screen h1{
	width:119px;
	height:305px;
	position:absolute;
	top:30%;
	left:50%;
	margin-top:-152px;
	margin-left:-78px;
	}
	
.screen h1 a{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	display:block;
	-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
-ms-transition: all 0.1s linear;
transition: all 0.1s linear;
	}
	
.screen h1 a:hover{
	-webkit-transform: scale(1.02);
-moz-transform: scale(1.02);
-o-transform: scale(1.02);
-ms-transform: scale(1.02);
transform: scale(1.02);
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
padding:0 !important;
}	
	
	
#kumo_left{
	position:absolute;
	bottom:0;
	left:0;
	transition:1s all ease-out;
	transform: translateX(-1000px); 
}
#kumo_left.load{
	transform: translateX(0); 
}
	
#kumo_right{
	position:absolute;
	top:0;
	right:0;
	transition:1s all ease-out;
	transform: translateX(1000px); 
}
#kumo_right.load{
	transform: translateX(0); 
}
	

#con_wrap{
	opacity: 0;
	transition:1s all ease-out;
}
#con_wrap.load{
	opacity: 1;
}


#koushi_head {
	width: 100%;
	height: 10px;
	position: fixed;
	top: 0;
	left: 0;
	background: url(../images/patarn_koushi.jpg) repeat-x;
	background-size: 10px;
	z-index: 100;
}
#koushi_foot {
	width: 100%;
	height: 10px;
	position: fixed;
	bottom: 0;
	left: 0;
	background: url(../images/patarn_koushi.jpg) repeat-x;
	background-size: 10px;
	z-index: 100;
}
#wrapper {
	width: 2950px;
	height: 1940px;
	background:url(../images/bg_kumo.png) repeat-x ;
}

#index_area{
	width:1475px;
	height:912px;
	float:left;
	position:relative;
	z-index:3;
	}
	
#link_area{
	width:1475px;
	height:912px;
	float:left;
	position:relative;
	}
	
#link{
	position: absolute;
    right: 310px;
    top: 400px;
	z-index:3;
	}
	
#link h3 {
	padding-bottom: 20px;
}
#link ul{
padding-bottom: 10px;
}
#link ul li {
	padding-bottom: 15px;
}

#link ul li a{
	text-decoration:none;
	border-bottom:0px solid #655665;
	-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
-ms-transition: all 0.1s linear;
transition: all 0.1s linear;
	}
	
#link ul li a:hover{
	text-decoration:none;
	border-bottom:1px solid #655665;
-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
-ms-transition: all 0.1s linear;
transition: all 0.1s linear;
	}
	
	
	
#bio_area{
	width:1475px;
	height:1028px;
	float:left;
	position:relative;
		}
		
#bio {
	left: 710px;
    position: absolute;
    top: 40px;
    width: 350px;
	z-index:3;
}
#bio h3 {
	padding-bottom: 20px;
}
#bio h4 {
	padding-bottom: 15px;
}
#bio p {
	font-size: 12px;
	line-height: 22px;
	padding-bottom: 20px;
}

#movie_btn{
	left:290px;
    position: absolute;
    top: 3px;
	z-index:10;
	}
	
#movie_btn a{
		opacity: 1; /* Standard: FF gt 1.5, Opera, Safari */
	filter: alpha(opacity=1); /* IE lt 8 */
	-ms-filter: "alpha(opacity=1)"; /* IE 8 */
	-khtml-opacity: 1; /* Safari 1.x */
	-moz-opacity: 1; /* FF lt 1.5, Netscape */
	-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.3s linear;
	}	
#movie_btn a:hover{
	opacity: .2; /* Standard: FF gt 1.5, Opera, Safari */
	filter: alpha(opacity=.2); /* IE lt 8 */
	-ms-filter: "alpha(opacity=20)"; /* IE 8 */
	-khtml-opacity: .2; /* Safari 1.x */
	-moz-opacity: .2; /* FF lt 1.5, Netscape */
	-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
-ms-transition: all 0.1s linear;
transition: all 0.1s linear;
	}	
	
	
	
	
#movie_chui{
	left: 530px;
    position: absolute;
    top: 12px;
	font-size:11px;
	z-index:10;
	}
	
	
#movie_chui a{
		opacity: 1; /* Standard: FF gt 1.5, Opera, Safari */
	filter: alpha(opacity=1); /* IE lt 8 */
	-ms-filter: "alpha(opacity=1)"; /* IE 8 */
	-khtml-opacity: 1; /* Safari 1.x */
	-moz-opacity: 1; /* FF lt 1.5, Netscape */
	-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.3s linear;
	}	
#movie_chui a:hover{
	opacity: .2; /* Standard: FF gt 1.5, Opera, Safari */
	filter: alpha(opacity=.2); /* IE lt 8 */
	-ms-filter: "alpha(opacity=20)"; /* IE 8 */
	-khtml-opacity: .2; /* Safari 1.x */
	-moz-opacity: .2; /* FF lt 1.5, Netscape */
	-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
-ms-transition: all 0.1s linear;
transition: all 0.1s linear;
	}	
	
	
	

#movie_list_area{
	width:1475px;
	height:1028px;
	float:left;
	position:relative;
	}
	
#movie_list_area h3.movie{
	left: 180px;
    position: absolute;
    top: 0px;
	left: 150px;
}	
#movie_list_area h3.cm{
	left: 150px;
    position: absolute;
    top: 400px;
    width: 42px;
}
#movie_list_area h3.cm img{
	width:100%;
	height: auto;
}
	
#movie_list_area .pagetop{
	left: 960px;
    position: absolute;
    top: -17px;
    z-index: 5;
	}

#movie_list_big{
	width: 950px;
	left: 150px;
    position: absolute;
    top: 50px;
	z-index:3;
	background:#FFF;
}



#m_list_big{
	width:860px;
	margin: 0 auto;
	padding: 40px 0;
}
#m_list_big li{
	width:420px;
	margin:0 10px;
	position: relative;
}
#m_list_big li img{
	width:100%;
	height: auto;
}
#m_list_big li a div.overlay{
	display:table;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:#1450a4;
	opacity: 0; /* Standard: FF gt 1.5, Opera, Safari */
	filter: alpha(opacity=0); /* IE lt 8 */
	-ms-filter: "alpha(opacity=0)"; /* IE 8 */
	-khtml-opacity: 0; /* Safari 1.x */
	-moz-opacity: 0; /* FF lt 1.5, Netscape */
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	transition: all 0.3s linear;
}
	
#m_list_big a div.overlay:hover{
	opacity: .85; /* Standard: FF gt 1.5, Opera, Safari */
	filter: alpha(opacity=.85); /* IE lt 8 */
	-ms-filter: "alpha(opacity=85)"; /* IE 8 */
	-khtml-opacity: .85; /* Safari 1.x */
	-moz-opacity: .85; /* FF lt 1.5, Netscape */
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	transition: all 0.3s linear;
}
	
#m_list_big a div.overlay p{
	display:table-cell;
    text-align:center;
    vertical-align:middle;
	font-size:12px;
	line-height:16px;
	letter-spacing:0.5px;
	color:#FFF;
}


.modal{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index:999;
}
.modal__bg{
    background: rgba(35,24,21,0.8);
    height: 100vh;
    position: absolute;
    width: 100%;
}
.modal__content{
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%,-50%);
    background: url(../images/modal_bg.jpg) no-repeat;
    background-size: cover;
    width:650px;
}
.modal__content .inner{
	width:550px;
	margin: 0 auto;
	padding: 50px 0;
}


.modal__content img{
	width: 100%;
	height: auto;
}
.modal__content .inner h3,
.modal__content .inner p{
font-family: a-otf-futo-min-a101-pr6n, serif;
font-weight: 400;
font-style: normal;
}

.modal__content .inner h3{
	font-size: 22px;
	letter-spacing:0.1em;
	padding: 30px 0 25px;
	text-align: center;
}
.modal__content .inner p{
	font-size: 13px;
	line-height: 22px;
	letter-spacing:0.05em;
	text-align: center;
}
.modal__content .inner h3 br.sp_br,
.modal__content .inner p br.sp_br{
	display: none;
}



.modal__content .modal-close{
	width: 40px;
    position: absolute;
    right: -70px;
    top: 0;
    display: block;
}

.modal__content .modal-close img{
	width: 100%;
	height: auto;

}
	
#movie_list{
	width:950px;
	left: 150px;
    position: absolute;
    top:440px;
	z-index:3;
	background:#FFF;
}
	
#movie_list .wrap{
	width:860px;
	margin: 0 auto;
	padding: 40px 0;
}
#m_list li{
	width:195px;
	margin:0 10px;
}
#m_list li img{
	width:100%;
	height: auto;
}
#m_list li .mgn20{
	margin-bottom: 20px;
}
#m_list li .listBlock{
	position:relative;
}

#m_list li div.overlay{
	display:table;
	position:absolute;
	top:0;
	left:0;
	width:195px;
	height:109px;
	background:#1450a4;
	opacity: 0; /* Standard: FF gt 1.5, Opera, Safari */
	filter: alpha(opacity=0); /* IE lt 8 */
	-ms-filter: "alpha(opacity=0)"; /* IE 8 */
	-khtml-opacity: 0; /* Safari 1.x */
	-moz-opacity: 0; /* FF lt 1.5, Netscape */
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	transition: all 0.3s linear;
}
	
#m_list li div.overlay:hover{
	opacity: .85; /* Standard: FF gt 1.5, Opera, Safari */
	filter: alpha(opacity=.85); /* IE lt 8 */
	-ms-filter: "alpha(opacity=85)"; /* IE 8 */
	-khtml-opacity: .85; /* Safari 1.x */
	-moz-opacity: .85; /* FF lt 1.5, Netscape */
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	transition: all 0.3s linear;
}
	
#m_list li div.overlay p{
	display:table-cell;
    text-align:center;
    vertical-align:middle;
	font-size:12px;
	line-height:16px;
	letter-spacing:0.5px;
	color:#FFF;
}
.pagetop a{
		opacity: 1; /* Standard: FF gt 1.5, Opera, Safari */
	filter: alpha(opacity=1); /* IE lt 8 */
	-ms-filter: "alpha(opacity=1)"; /* IE 8 */
	-khtml-opacity: 1; /* Safari 1.x */
	-moz-opacity: 1; /* FF lt 1.5, Netscape */
	-webkit-transition: all 0.2s linear;
	-moz-transition: all 0.2s linear;
	-o-transition: all 0.2s linear;
	-ms-transition: all 0.2s linear;
	transition: all 0.3s linear;
}	
.pagetop a:hover{
	opacity: .2; /* Standard: FF gt 1.5, Opera, Safari */
	filter: alpha(opacity=.2); /* IE lt 8 */
	-ms-filter: "alpha(opacity=20)"; /* IE 8 */
	-khtml-opacity: .2; /* Safari 1.x */
	-moz-opacity: .2; /* FF lt 1.5, Netscape */
	-webkit-transition: all 0.1s linear;
-moz-transition: all 0.1s linear;
-o-transition: all 0.1s linear;
-ms-transition: all 0.1s linear;
transition: all 0.1s linear;
}	
	
	

#wrapper h1{
	padding:30px 45px 0 17px;
	float:left;
}

#near_news {
	padding-top: 50px;
	float: left;
}

#near_news h3 {
	padding-bottom:18px
	}

#news_lineup {
	border-top:1px solid #655665;
	width:284px;
}
#news_lineup li {
	font-size: 12px;
	line-height: 18px;
	border-bottom:1px solid #655665;
}
#news_lineup li dl {
		zoom: 1;
		padding:8px 0;
}

#news_lineup li dl:after {
	content: "";
	display: block;
	clear: both;
}

#news_lineup li dl dt{
	float:left;
	width:55px;
	padding-right:26px;
	letter-spacing:1.5px;
	font-family: 'Domine', serif !important;
	font-size:11px;
	}
	
#news_lineup li dl dd{
	float:left;
	}
	
#news_lineup li dl dd a{
	text-decoration:none;
	
		}
	

#news_lineup li dl dd a:hover{
	text-decoration: underline;
	}
#sp_aside{
	display: none;
}

#aside {
	width: 140px;
	height:261px;
	background:#FFF;
	position:fixed;
	top:0;
	right:30px;
	z-index:105;
	text-align: center;
	}


#aside #nav {
	width: 140px;
	padding-top: 30px;
	clear: both;
}
#aside #nav li {
	padding-bottom: 16px;
	text-align: center;
}

#aside #nav li a:hover img{
	padding-left:3px;
	}

#aside #aside p {
	padding-left: 10px;
	padding-top: 5px;
	text-align: center;
}
#contents {
	width: 400px;
	padding-top: 60px;
	float: left;
}

#parts{
	width:2950px;
	height:1940px;
	position:absolute;
	top:0;
	left:0;
	}

#kids01 {
	left: 2600px;
    position: absolute;
    top: 1510px;
}
#kids02 {
	left: 2380px;
    position: absolute;
    top: 32px;
}
#kids03 {
	left: 1120px;
    position: absolute;
    top: 45px;
}
#kids04 {
	left: 1560px;
    position: absolute;
    top: 355px;
}
#kids05 {
	left: 485px;
    position: absolute;
    top: 1560px;
	z-index:-2;
}
#kids06 {
	left: 60px;
	position: absolute;
	top: 510px;
}
#kids07 {
	left: 1210px;
    position: absolute;
    top: 920px;
	z-index:-2;

}
#grad01 {
	left: 493px;
    position: absolute;
    top: 48px;
}
#grad02{
left: 2710px;
    position: absolute;
    top: 246px;
	}
#grad03 {
	left: 105px;
    position: absolute;
    top: 398px;
}
#grad04 {
	left: 590px;
    position: absolute;
    top: 589px;
	z-index: 3;
}
#grad05 {
	left: 170px;
    position: absolute;
    top: 803px;
}
#grad06 {
	left: 10px;
    position: absolute;
    top: 1097px;
	z-index: -1;
}
#grad07 {
	left: 1004px;
    position: absolute;
    top: 1420px;
    z-index: 6;
}
#grad08 {
	left: 1190px;
    position: absolute;
    top: 1380px;
}
#grad09 {
	left: 1460px;
    position: absolute;
    top: 90px;
}
#grad10 {
	left: 1840px;
    position: absolute;
    top: 80px;
	z-index:1;
}
#grad11 {
	left: 2620px;
    position: absolute;
    top: 890px;
}


#grad13 {
	left: 1460px;
    position: absolute;
    top: 696px;
    z-index: 3;
}

#grad_tarzan {
	left: 2770px;
    position: absolute;
    top: 326px;
}
#grad14 {
	left: 562px;
    position: absolute;
    top: 204px;
}
#grad15 {
	left: 528px;
    position: absolute;
    top: 334px;
}

#grad16 {
	left: 2760px;
    position: absolute;
    top: 1124px;
}

#mov01{
	left: 750px;
    position: absolute;
    top: 400px;
	background:url(../images/movie_btn01_bg.png) no-repeat;
	padding: 0 17px;
		    z-index: 5;
	}
	
#mov02{
	left: 80px;
    position: absolute;
    top: 1190px;
	background:url(../images/movie_btn02_bg.png) no-repeat;
	padding: 0 8px;
		    z-index: 5;
	}
	
#mov03{
	left: 1020px;
    position: absolute;
    top: 1650px;
	background:url(../images/movie_btn03_bg.png) no-repeat;
	padding: 0 21px;
		    z-index: 5;
	}
	
#mov04{
	left: 1815px;
    position: absolute;
    top: 50px;
	background:url(../images/movie_btn04_bg.png) no-repeat;
	padding: 0 8px;
		    z-index: 5;
	}
	
#mov05{
	left: 2550px;
    padding: 0 8px;
    position: absolute;
    top: 710px;
	background:url(../images/movie_btn05_bg.png) no-repeat;
	    z-index: 5;
	}
	
.play_btn a{
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	display:block;
	-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
	}
	
.play_btn a img{
	position:absolute;
	top:50%;
	left:50%;
	margin-left:-36px;
	margin-top:-32px;
	

	}
.play_btn a:hover{
	-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
transition: all 0.2s linear;
}



.swing {
	-moz-animation: swing linear 2s infinite;
	-moz-transform-origin: center -1px 0;
	-webkit-animation: swing linear 2s infinite;
	-webkit-transform-origin: center -1px 0;
	-ms-animation: swing linear 2s infinite;
	-ms-transform-origin: center 0px 0;
	-o-animation: swing linear 2s infinite;
	-o-transform-origin: center 0px 0;
	animation: swing linear 2s infinite;
	transform-origin: center 0px 0;
	display: block;
	float: left;
	left: 50%;
	position: absolute;
	top: 20%;
}
.swing img {
	z-index: 2;
	display: block;
}
.swing:after {
	content: '';
	top: -10px;
	z-index: 0;
	left: 50%;
	width: 20px;
	height: 20px;
	border-bottom: none;
	border-right: none;
	-moz-transform: rotate(5deg);
	-webkit-transform: rotate(5deg);
	-ms-transform: rotate(5deg);
	-o-transform: rotate(5deg);
	transform: rotate(5deg);
	position: absolute;
}
.swing:before {
	content: '';
	top: -14px;
	z-index: 5;
	left: 54%;
	width: 5px;
	height: 5px;
	position: absolute;
}
 @-moz-keyframes swing {
 0% {
-moz-transform: rotate(0deg)
}
 25% {
-moz-transform: rotate(5deg);
}
 50% {
-moz-transform: rotate(0deg);
}
 75% {
-moz-transform: rotate(-5deg);
}
 100% {
-moz-transform: rotate(0deg);
}
}
@-webkit-keyframes swing {
 0% {
-webkit-transform: rotate(0deg);
}
 25% {
-webkit-transform: rotate(5deg);
}
 50% {
-webkit-transform: rotate(0deg);
}
 75% {
-webkit-transform: rotate(-5deg);
}
 100% {
-webkit-transform: rotate(0deg);
}
}
@-o-keyframes swing {
 0% {
-o-transform: rotate(0deg);
}
 25% {
-o-transform: rotate(5deg);
}
 50% {
-o-transform: rotate(0deg);
}
 75% {
-o-transform: rotate(-5deg);
}
 100% {
-o-transform: rotate(0deg);
}
}
@-ms-keyframes swing {
 0% {
-ms-transform: rotate(0deg);
}
 25% {
-ms-transform: rotate(10deg);
}
 50% {
-ms-transform: rotate(0deg);
}
 75% {
-ms-transform: rotate(-5deg);
}
 100% {
-ms-transform: rotate(0deg);
}
}
@keyframes swing {
 0% {
transform: rotate(0deg);
}
 25% {
transform: rotate(10deg);
}
 50% {
transform: rotate(0deg);
}
 75% {
transform: rotate(-5deg);
}
 100% {
transform: rotate(0deg);
}
}