@charset "UTF-8";

body{
	margin:0;
	padding:0;
	position: absolute;
    width: 100%;
    height: 100%;
	font-family:"游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif
}

h1,h2,h3,h4,h5{
	margin:0;
	padding:0;
	font-weight:normal; font-style:normal;
}
ol,ul{list-style:none;}
fieldset,img{border:0;}
li{display:block;}
a{text-decoration:none;}
a img {border:none;}



#wrapper{
	position:relative;
	width: 100%;
	height:auto;
	overflow:hidden;
	min-width:1200px;
}

h1{
	position:relative;
	z-index:1;
	color:#000;
	text-align:center;
}

#preload_wrap{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	-webkit-transition:opacity 0.2s ease-out;
	transition:opacity 0.2s ease-out;
}

#preloader{
	display:block;
	position:absolute;
	left:50%;
	top:50%;
	margin-top:-16px;
	margin-left:-16px;
	/*-webkit-animation:preloaderlotate 1s ease-out infinite;
	animation: preloaderlotate 1s ease-out infinite;*/
}

@-webkit-keyframes preloadermove{
	0%{-webkit-transform:scale(0.01)}
	100%{-webkit-transform:scale(1)}
}
@keyframes preloadermove{
	0%{transform:scale(0.01)}
	100%{transform:scale(1)}
}

@keyframes preloaderlotate{
	0%{transform:rotate(180deg)}
	100%{transform:rotate(360deg)}
}

@-webkit-keyframes preloaderlotate{
	0%{-webkit-transform:rotate(180deg)}
	100%{-webkit-transform:rotate(360deg)}
}

#sceen_frame{
	position:relative;
	width:100% !important;
	visibility:hidden;
	min-width:1200px;
	min-height:600px;
	overflow:hidden;
}

#sceen_frame{

}

#sceen_frame canvas{
	position:absolute;
	width:2600;
	height:1500;
	left:50%;
	margin-left:-1300px;
	top:50%;
	margin-top:-750px;
}

#sceen_frame.show{
	visibility:visible;
}

#sceen_frame canvas{
	background-color:white;
}

#texture_video{
	display:none;
}
#texture_video2{
	display:none;
}

#texture_video3{
	display:none;
}

#content{
	width:1160px;
	margin:0 auto;
	position:relative;
	padding-left:20px;
	padding-right:20px;
	opacity:0;
	-webkit-transition:0.2s ease-out;
	transition:0.2s ease-out;
}

#content.show{
	opacity:1;
}

#content div{
	position:relative;
}

#block1{
	margin-top:155px;
	margin-bottom:410px;
}

#block1 #p1{
	height:1375px;

	position:relative;
}

#block1 h2{
	position:absolute;
	right:0;
	top:0;
}
#block1 h2 img{
display: inline-block;
}

#page_navi{
	position:absolute;
	width:64px;
	padding-top:422px;
	right:40px;
}

.mobile #page_navi{
	display:none;
}

#page_navi .number_block{
	margin-bottom:13px;
	cursor:pointer;
}

#page_navi img{
	display:block;
	padding:0;
	margin:0;
}

#page_navi .marker .bar{

	-webkit-transform-origin:right;
	transform-origin:right;
	-webkit-transform:scaleX(0.42);
	transform:scaleX(0.42);
	-webkit-transition:background-color 0.2s ease-out,-webkit-transform 0.2s ease-out;
	transition:background-color 0.2s ease-out,transform 0.2s ease-out;
	background-color:rgb(201,201,201);
	height:3px;
	width:36px;
}

#page_navi .marker{
	height:12px;
	width:36px;
	padding-top:9px;

}

#page_navi .marker .bar{


}

#page_navi .marker,
#page_navi .num{
	float:left;
}

#page_navi .number_block:hover  .marker .bar,
#page_navi .number_block.active  .marker .bar{

	-webkit-transform:scaleX(1);
	transform:scaleX(1);
	background-color:rgb(228,0,127);
}

#page_navi .number_block:hover  .marker{
	background-image:none;
}

#content .title{
	position:absolute;
	left:0;
	top:0;
	z-index:2;
}

#content .title.fix{
	position:fixed;
}



.title .a,
.title .b .inner,
.title .c div,
.title .d div,
.title .e div{
	background-image:url(../img/title01.svg);
	background-repeat:no-repeat;
	background-size:210px 180px;
}
.title .a,
.title .b,
.title .c,
.title .d,
.title .e{
	position:absolute;
}

.title .a{
	opacity:0;
	-webkit-transition:opacity 1s ease-out;
	transition:opacity 1s ease-out;
}

.show .title .a{
	opacity:1;
}

.title .c>div,
.title .d>div,
.title .e>div{
	visibility:hidden;
}
.title .c>div.show,
.title .d>div.show,
.title .e>div.show{
	visibility:visible;
}

.title .b{
	opacity:0;
	transition:transform .5s ease-out,opacity .5s ease-out;
	-webkit-transition:-webkit-transform .5s ease-out,opacity .5s ease-out;
	-webkit-transform:translateX(-50px);
	transform:translateX(-50px);
}

.show .title .b{
	opacity:1;
	-webkit-transform:none;
	transform:none;
}

.title .b>div{

	height:21px;
	float:left;
	opacity:0;
	transition:transform .5s ease-out,opacity .5s ease-out;
	-webkit-transition:-webkit-transform .5s ease-out,opacity .5s ease-out;
}

/*
.title .b .b1{transform:translate(60px,-120px)  rotate(-200deg);
-webkit-transform:translate(60px,-120px)  rotate(-200deg);
}
.title .b .b2{transform:translate(60px,-120px)  rotate(200deg);
-webkit-transform:translate(60px,-120px)  rotate(200deg);
}
.title .b .b3{transform:translate(60px,-120px)  rotate(-200deg) ;
-webkit-transform:translate(60px,-120px)  rotate(-200deg) ;}
.title .b .b4{transform:translate(60px,-120px)  rotate(200deg) ;
-webkit-transform:translate(60px,-120px)  rotate(200deg) ;}
.title .b .b5{transform:translate(55px,-110px)  rotate(-190deg) ;
-webkit-transform:translate(55px,-110px)  rotate(-190deg) ;}
.title .b .b6{transform:translate(50px,-100px)  rotate(-180deg) ;
-webkit-transform:translate(50px,-100px)  rotate(-180deg) ;}
.title .b .b7{transform:translate(45px,-90px)  rotate(170deg) ;
-webkit-transform:translate(45px,-90px)  rotate(170deg) ;}
.title .b .b8{transform:translate(40px,-80px)  rotate(-160deg) ;
-webkit-transform:translate(40px,-80px)  rotate(-160deg) ;}
.title .b .b9{transform:translate(40px,-70px)  rotate(150deg) ;
-webkit-transform:translate(40px,-70px)  rotate(150deg) ;}
.title .b .b10{transform:translate(30px,-60px)  rotate(-140deg) ;
-webkit-transform:translate(30px,-60px)  rotate(-140deg) ;}


.title .b .inner{transition:transform .5s ease-out;
-webkit-transition:-webkit-transform .5s ease-out;}
.title .b .b1 .inner{
	transform: scale(0.5,1.3) skewX(-45deg) rotate(160deg) translate(35px,-70px);
-webkit-transform: scale(0.5,1.3) skewX(-45deg) rotate(160deg) translate(35px,-70px);}
.title .b .b2 .inner{
	transform: scale(0.5,1.3) skewX(-35deg) rotate(-180deg) translate(30px,-75px);
-webkit-transform: scale(0.5,1.3) skewX(-35deg) rotate(-180deg) translate(30px,-75px);}
.title .b .b3 .inner{
	transform: scale(0.5,1.3) skewX(-45deg) rotate(180deg) translate(35px,-70px);
-webkit-transform: scale(0.5,1.3) skewX(-45deg) rotate(180deg) translate(35px,-70px);}
.title .b .b4 .inner{
	transform: scale(0.5,1.3) skewX(-35deg) rotate(-200deg) translate(30px,-70px);
-webkit-transform: scale(0.5,1.3) skewX(-35deg) rotate(-200deg) translate(30px,-70px);}
.title .b .b5 .inner{
	transform: scale(0.5,1.3) skewX(-45deg) rotate(180deg) translate(30px,-75px);
-webkit-transform: scale(0.5,1.3) skewX(-45deg) rotate(180deg) translate(30px,-75px);}
.title .b .b6 .inner{
	transform: scale(0.5,1.3) skewX(-35deg) rotate(170deg) translate(25px,-75px);
-webkit-transform: scale(0.5,1.3) skewX(-35deg) rotate(170deg) translate(25px,-75px);}
.title .b .b7 .inner{
	transform: scale(0.5,1.3) skewX(-45deg) rotate(-180deg) translate(30px,-65px);
-webkit-transform: scale(0.5,1.3) skewX(-45deg) rotate(-180deg) translate(30px,-65px);}
.title .b .b8 .inner{
	transform: scale(0.5,1.3) skewX(-35deg) rotate(180deg) translate(25px,-70px);
-webkit-transform: scale(0.5,1.3) skewX(-35deg) rotate(180deg) translate(25px,-70px);}
.title .b .b9 .inner{
	transform: scale(0.5,1.3) skewX(-45deg) rotate(-190deg) translate(20px,-65px);
-webkit-transform: scale(0.5,1.3) skewX(-45deg) rotate(-190deg) translate(20px,-65px);}
.title .b .b10 .inner{
	transform: scale(0.5,1.3) skewX(-35deg) rotate(180deg) translate(15px,-70px);
-webkit-transform: scale(0.5,1.3) skewX(-35deg) rotate(180deg) translate(15px,-70px);}

*/

.title .b .b1,.title .b .b1 .inner{transition-delay:0.1s;-webkit-transition-delay:0.1s;}
.title .b .b2,.title .b .b2 .inner{transition-delay:0.2s;-webkit-transition-delay:0.2s;}
.title .b .b3,.title .b .b3 .inner{transition-delay:0.3s;-webkit-transition-delay:0.3s;}
.title .b .b4,.title .b .b4 .inner{transition-delay:0.4s;-webkit-transition-delay:0.4s;}
.title .b .b5,.title .b .b5 .inner{transition-delay:0.5s;-webkit-transition-delay:0.5s;}
.title .b .b6,.title .b .b6 .inner{transition-delay:0.6s;-webkit-transition-delay:0.6s;}
.title .b .b7,.title .b .b7 .inner{transition-delay:0.7s;-webkit-transition-delay:0.7s;}
.title .b .b8,.title .b .b8 .inner{transition-delay:0.8s;-webkit-transition-delay:0.8s;}
.title .b .b9,.title .b .b9 .inner{transition-delay:0.9s;-webkit-transition-delay:0.9s;}
.title .b .b10,.title .b .b10 .inner{transition-delay:1s;-webkit-transition-delay:1s;}



.show .title .b>div{
	transform:none;
	-webkit-transform:none;
	opacity:1;
}
.show .title .b .inner{
	transform:none;
	-webkit-transform:none;
}

.title .a{
	left:0;
	top:0;
	background-position:0 0;
	width:47px;height:40px;
	opacity:0;
	-webkit-transition:opacity 0.3s ease-out;
	transition:opacity 0.3s ease-out;
}

.show .title .a{
	opacity:1;
}

#content .title .b{
	position:absolute;
	left:0;
	height:21px;
	top:85px;
	width:100%;
}

.title .b .inner{
	height:100%;
}


#content .title .c,
#content .title .d,
#content .title .e{
	position:absolute;
	left:0;
	height:13px;
	top:127px;
}
#content .title .d{
	top:147px;
}
#content .title .e{
	top:167px;
}

.title .c>div,
.title .d>div,
.title .e>div{
	height:13px;
	float:left;
}

#title1{
	width:210px;height:180px;
}


#title1 .b1 .inner{width:20px;background-position:0 -85px;}
#title1 .b2 .inner{width:24px;background-position:-20px -85px;}
#title1 .b3 .inner{width:13px;background-position:-44px -85px;}
#title1 .b4 .inner{width:19px;background-position:-57px -85px;}
#title1 .b5 .inner{width:24px;background-position:-76px -85px;}
#title1 .b6 .inner{width:19px;background-position:-100px -85px;}
#title1 .b7 .inner{width:26px;background-position:-119px -85px;}
#title1 .b8 .inner{width:21px;background-position:-145px -85px;}
#title1 .b9 .inner{width:21px;background-position:-166px -85px;}
#title1 .b10 .inner{width:23px;background-position:-187px -85px;}

#title1 .c1{width:11px;background-position:0 -127px;}
#title1 .c2{width:9px;background-position:-11px -127px;}
#title1 .c3{width:8px;background-position:-20px -127px;}
#title1 .c4{width:6px;background-position:-28px -127px;}
#title1 .c5{width:10px;background-position:-34px -127px;}
#title1 .c6{width:12px;background-position:-44px -127px;}

#title1 .d1{width:11px;background-position:0 -147px;}
#title1 .d2{width:9px;background-position:-12px -147px;}

#title1 .e1{width:8px;background-position:0 -167px;}
#title1 .e2{width:11px;background-position:-8px -167px;}
#title1 .e3{width:9px;background-position:-19px -167px;margin-right:4px;}
#title1 .e4{width:8px;background-position:-32px -167px;}
#title1 .e5{width:10px;background-position:-40px -167px;}
#title1 .e6{width:5px;background-position:-50px -167px;}
#title1 .e7{width:9px;background-position:-55px -167px;}
#title1 .e8{width:8px;background-position:-64px -167px;}
#title1 .e9{width:8px;background-position:-72px -167px;}

.big_text{
	opacity:0;
	/*-webkit-transform:translateY(100px);
	transform:translateY(100px);*/
	-webkit-transition:-webkit-transform 1s ease-out 0.5s,opacity 1s ease-out 0.5s;
	transition:transform 1s ease-out 0.5s,opacity 1s ease-out 0.5s;
}

#block1 .show .big_text{
	opacity:1;
	-webkit-transform:none;
	transform:none;
}


.big_text .sub img{
	opacity:0;
	/*-webkit-transform:translateX(-60px);
	transform:translateX(-60px);*/
	-webkit-transition:-webkit-transform 0.5s ease-out 1.25s,opacity 1s ease-out 1s;
	transition:transform 0.5s ease-out 1.25s,opacity 1s ease-out 1s;
}

.big_text .sub img:last-child{
	-webkit-transition-delay:2s;
	transition-delay:2s;
}

#block1 .show .big_text .sub img{
	opacity:1;
	-webkit-transform:none;
	transform:none;
}


#p1 .gif_anim{
	position:absolute;
	display:block;
	top:160px;
	width:760px;
	right:0;
	z-index:0;
}
/*---------------------------*/
#p1 .gif_anim .back{
	width:100%;
	height:auto;
	position:relative;
	margin-top:14%;
}

#p1 .gif_anim .part2{
	width: 24%;
	height: auto;
	position: absolute;
	top: 0;
	margin-top: 46.5%;
	left: 33.7%;
}
#p1 .gif_anim .part2.cssanim{
	-webkit-animation:anim1_2 1.8s ease-out infinite;
	animation:anim1_2 1.8s ease-out infinite;
}
@-webkit-keyframes anim1_2 {
	0% { -webkit-transform:scale(1); }
	15% { -webkit-transform:scale(1.04); }
	55% { -webkit-transform:scale(0.97); }
	100% { -webkit-transform:scale(1); }
}
@keyframes anim1_2 {
	0% { transform:scale(1); }
	15% { transform:scale(1.04); }
	55% { transform:scale(0.97); }
	100% { transform:scale(1); }
}
#p1 .gif_anim .part3{
	width: 29.6%;
	height: auto;
	position: absolute;
	top: 0;
	margin-top: 41.4%;
	left: 31.6%;
}
#p1 .gif_anim .part4{
	width: 33%;
	height: auto;
	position: absolute;
	top: 0;
	margin-top: 43%;
	left: 8%;
}
#p1 .gif_anim .part5{
	width: 19%;
	height: auto;
	position: absolute;
	top: 0;
	margin-top: 41%;
	left: 42%;
}
#p1 .gif_anim .part6{
	width: 41.5%;
	height: auto;
	position: absolute;
	top: 0;
	margin-top: 56.2%;
	left: 56.5%;
}
#p1 .gif_anim .part7{
	width: 27.5%;
	height: auto;
	position: absolute;
	top: 0;
	margin-top: 62.3%;
	left: 12.2%;
}
#p1 .gif_anim .part0{
	width: 54%;
	width: 453px;
	height: auto;
	position: absolute;
	top: 0;
	margin-top: 0%;
	left: 26%;
}
.mobile #p1 .gif_anim .part0{
	left: 29%;
}
/*---------------------------*/

#p1 .big_text{
	width:391px;height:314px;
	left:100px;top:494px;
	position:absolute;
}

#p1 .big_text .sub{
	position:absolute;
	top:126px;
	width:181px;
}

#p1 .big_text .sub img{
	display:block;
}

#p1 .big_text>img{
	display:block;
	position:absolute;
	right:0;top:0;
}

#p1 p{
	width:65.8%;
	padding-left:100px;
	line-height:3.75;
	position:absolute;
	bottom:0;
}
#p1,
#p2,
#p3,
#block1,
#block2,
#block3,
#block4{
	opacity:0;
	-webkit-transition:opacity 1s ease-out;
	transition:opacity 1s ease-out;
}
#p1.show,
#p2.show,
#p3.show,
#block1.show,
#block2.show,
#block3.show,
#block4.show{
	opacity:1;
}




/**********************
#p2
************************/

#p2 {
	height: 1030px;
	margin-top: 170px;
}

#p2 .gif_anim {
    position: absolute;
    display: block;
    top: -10px;
    right: -26px;
	width:695px;
}

/*-----------------------*/
#p2 .gif_anim .back{
	width:100%;
	height:auto;
}

#p2 .gif_anim .part2{
	width:3.7%;
	height:auto;
	position:absolute;
	top: 0;
	margin-top:39%;
	left: 63.6%;
	opacity:0;
}
#p2 .gif_anim .part2.cssanim{
	-webkit-transform-origin:bottom center;
	-webkit-animation:anim2_2 2s ease-out infinite;
	transform-origin:bottom center;
	animation:anim2_2 2s ease-out infinite;
}
@-webkit-keyframes anim2_2 {
	0% {opacity:0; -webkit-transform:scale(0.4) translateY(0%);}
	66% {opacity:1; -webkit-transform:scale(1) translateY(-20%);}
	100% {opacity:0; -webkit-transform:scale(1.3) translateY(-30%);}
}
@keyframes anim2_2 {
	0% {opacity:0; transform:scale(0.4) translateY(0%);}
	66% {opacity:1; transform:scale(1) translateY(-20%);}
	100% {opacity:0; transform:scale(1.3) translateY(-30%);}
}

#p2 .gif_anim .part3{
	width:12.5%;
	height:auto;
	position:absolute;
	top:0;
	margin-top: 55.5%;
	left: 22.2%;
}
#p2 .gif_anim .part4{
	width: 6%;
	height: auto;
	position: absolute;
	top: 0;
	margin-top: 65.7%;
	left: 48.1%;
}
#p2 .gif_anim .part5{
	width:17%;
	height:auto;
	position:absolute;
	top:0;
	margin-top: 62.6%;
	left: 59.8%;
}
#p2 .gif_anim .part6{
	width:8%;
	width:56px;
	height:auto;
	position:absolute;
	top:0;
	margin-top: 47.2%;
	left: 35.5%;
}
.mobile #p2 .gif_anim .part6{
	width:8%;
}
#p2 .gif_anim .part0{
	width:46%;
	width:321px;
	height:auto;
	position:absolute;
	top:0;
	margin-top: 1.5%;
	left: 16.5%;
}
.mobile #p2 .gif_anim .part0{
	width:46%;
}
/*-----------------------*/

#p2 p{
	width:65.8%;
	padding-left:100px;
	line-height:3.75;
	position:absolute;
	bottom:0;
}

#p2 .big_text {
    width: 391px;
    height: 315px;
    left: 100px;
    top: 164px;
    position: absolute;
}

#p2 .big_text .sub {
    position: absolute;
    top: 126px;
    width: 283px;}

#p2 .big_text>img{
	display: block;
	position: absolute;
	right: 0;
	top: 17px;
}



/**********************
#p3
************************/

#p3 {
	height: 1030px;
	margin-top: 170px;
}

#p3 .gif_anim {
    position: absolute;
    display: block;
    top: -10px;
    right: -46px;
	width:715px;
}


/*-----------------------*/
#p3 .gif_anim .back{
	width:100%;
	height:auto;
	position:relative;
}
#p3 .gif_anim .part1{
	width:45%;
	height:auto;
	position:absolute;
	top:0;
	margin-top: 2.5%;
	left: 27.5%;
}
#p3 .gif_anim .part2{
	width: 23.7%;
	height: auto;
	position: absolute;
	top: 0;
	margin-top: 27.6%;
	left: 62.5%;
}
#p3 .gif_anim .part3{
	width:9.9%;
	height:auto;
	position:absolute;
	top:0;
	margin-top: 32.2%;
	left: 67.3%;
}
#p3 .gif_anim .part3.cssanim{
	-webkit-transform-origin: top center;
	-webkit-animation:anim3_1 20s ease-out infinite;
	transform-origin: top center;
	animation:anim3_1 20s ease-out infinite;
}
@-webkit-keyframes anim3_1 {
	0% { -webkit-transform:translate(0,0) scale(1);}
	10% { -webkit-transform:translate(0,0) scale(1);}
	50% { -webkit-transform:translate(-62%,3%) scale(0.95); }
	60% { -webkit-transform:translate(-62%,3%) scale(0.95); }
	100% { -webkit-transform:translate(0,0) scale(1);}
}
@keyframes anim3_1 {
	0% { transform:translate(0,0) scale(1);}
	10% { transform:translate(0,0) scale(1);}
	50% { transform:translate(-62%,3%) scale(0.95); }
	60% { transform:translate(-62%,3%) scale(0.95); }
	100% { transform:translate(0,0) scale(1);}
}
#p3 .gif_anim .part4{
	width:20%;
	height:auto;
	position:absolute;
	top:0;
	margin-top: 75.5%;
	left: 50.5%;
}
#p3 .gif_anim .part5{
	width: 29.6%;
	height: auto;
	position: absolute;
	top: 0;
	margin-top: 80.1%;
	left: 15.2%;
}
#p3 .gif_anim .part5.cssanim{
	-webkit-animation:anim3_5 10s ease-in-out infinite;
	animation:anim3_5 10s ease-in-out infinite;
}
@-webkit-keyframes anim3_5 {
	0% { -webkit-transform:translate(0,0);}
	30% { -webkit-transform:translate(9%,6%) ; }
	50% { -webkit-transform:translate(9%,6%) ; }
	80% { -webkit-transform:translate(0,0);}
	100% { -webkit-transform:translate(0,0);}
}
@keyframes anim3_5 {
	0% { transform:translate(0,0);}
	30% { transform:translate(9%,6%) ; }
	50% { transform:translate(9%,6%) ; }
	80% { transform:translate(0,0);}
	100% { transform:translate(0,0);}
}
#p3 .gif_anim .part6{
	width: 11%;
	height: auto;
	position: absolute;
	top: 0;
	margin-top: 46.6%;
	left: 36.6%;
}
#p3 .gif_anim .part7{
	width:11%;
	height:auto;
	position:absolute;
	top:0;
	margin-top: 39.2%;
	left: 50.6%;
}
#p3 .gif_anim .part8{
	width: 50.4%;
	height: auto;
	position: absolute;
	top: 0;
	margin-top: 41.2%;
	left: 12%;
}
#p3 .gif_anim .part0{
	width: 53.8%;
	height: auto;
	position: absolute;
	top: 0;
	margin-top: 21.6%;
	left: 8.7%;
}
#p3 .gif_anim .part9{
	width: 29.6%;
	height: auto;
	position: absolute;
	top: 0;
	margin-top: 80.1%;
	left: 15.2%;
}
/*-----------------------*/

#p3 p{
	width:65.8%;
	padding-left:100px;
	line-height:3.75;
	position:absolute;
	bottom:0;
	margin-bottom: -1.4em
}

#p3 .big_text {
    width: 391px;
    height: 315px;
    left: 100px;
    top: 164px;
    position: absolute;
}

#p3 .big_text .sub {
    position: absolute;
    top: 126px;
    width: 283px;}

#p3 .big_text>img{
	display: block;
	position: absolute;
	right: 0;
	top: 17px;
}

.linkbox{
	line-height: 0;
}

.mobile #p3 .big_text {
    width: auto;
}



/**********************
block2
************************/

#block2{
	margin-bottom: 410px;
	height: 1316px;
}

#title2{
	width:113px;height:180px;
}


#title2.title .a,
#title2.title .c div,
#title2.title .d div,
#title2.title .e div{
	background-image:url(../img/title02.svg);
	background-repeat:no-repeat;
	background-size:113px 180px;
}

#title2.title .b .inner{
	background-image:url(../img/title02.svg);
	background-repeat:no-repeat;
	background-size:113px 180px;
}

#title2.title .a{width: 57px;height: 40px;}


#title2 .b1 .inner{width:25px;background-position:0 -85px;}
#title2 .b2 .inner{width:25px;background-position:-25px -85px;}
#title2 .b3 .inner{width:23px;background-position:-50px -85px;}
#title2 .b4 .inner{width:22px;background-position:-73px -85px;}
#title2 .b5 .inner{width:18px;background-position:-95px -85px;}

#title2 .c1{width:11px;background-position:0 -127px;}
#title2 .c2{width:13px;background-position:-12px -127px;}
#title2 .c3{width:9px;background-position:-26px -127px;}
#title2 .c4{width:10px;background-position:-35px -127px;}
#title2 .c5{width:8px;background-position:-45px -127px;}

#title2 .d1{width:11px;background-position:0 -147px;}
#title2 .d2{width:8px;background-position:-11px -147px;}

#title2 .e1{width:4px;background-position:0 -167px;}
#title2 .e2{width:11px;background-position:-4px -167px;}
#title2 .e3{width:10px;background-position:-15px -167px;margin-right:1px;}
#title2 .e4{width:6px;background-position:-26px -167px;}
#title2 .e5{width:11px;background-position:-31px -167px;}
#title2 .e6{width:11px;background-position:-42px -167px;}
#title2 .e7{width:11px;background-position:-53px -167px;}



.works_wrap{
	width: 1200px;
	padding-top: 278px;
}

.works_wrap .linkbox a{
	display: inline-block;
	float: left;
	line-height: 0;
	cursor: pointer;
	position:relative;
	background-size:100% 100%;
}

.works_wrap .linkbox a img{
	/*transition:transform 0.6s ease-out;*/
	position:relative;
	top:0;left:0;
	z-index:1;
}

.works_wrap .linkbox a .shadow{
	width:300px;
	height:auto;
	display:block;
	position:absolute;
	transition:transform 0.6s ease-out,opacity 0.2s ease-out;
	z-index:0;
	opacity:0;
}

.works_wrap .linkbox a.zoomin .shadow{
	transform:scale(1.1);
	opacity:0.3;
z-index:3;
}
.works_wrap .linkbox a.zoomin{
	z-index:3;
	/*animation:bound ease-in-out 2s forwards;*/

}

.works_wrap .linkbox a.forwards{
		z-index:1;
}
.works_wrap .linkbox a.tr{
	transition:transform 0.6s ease-in;
}

.works_wrap .linkbox a.zoomout{
	transition:transform 0.6s ease-in;
	transform:scale(1);
}



.works_wrap .linkbox a.zoomin img{
	z-index:3;

}

.works_wrap .linkbox a.zoomout img{
	/*transition:none;*/

}

@keyframes bound{
	0%{transform:scale(1);}
	16.66%{transform:scale(1.15);}
	33.33%{transform:scale(1.05);}
	50%{transform:scale(1.12);}
	66.66%{transform:scale(1.085);}
	83.33%{transform:scale(1.11);}
	100%{transform:scale(1.1);}

}




/**********************
block3
************************/

#block3{
	height: 2131px;
	margin-bottom: 410px;
}

#title3{
	width:108px;height:180px;
}


#title3.title .a,
#title3.title .c div,
#title3.title .d div,
#title3.title .e div{
	background-image:url(../img/title03.svg);
	background-repeat:no-repeat;
	background-size:108px 180px;
}

#title3.title .b div.inner{
	background-image:url(../img/title03.svg);
	background-repeat:no-repeat;
	background-size:108px 180px;
}


#title3.title .a{width: 57px;height: 40px;}

#title3 .b1 .inner{width:18px;background-position:0 -85px;}
#title3 .b2 .inner{width:23px;background-position:-18px -85px;}
#title3 .b3 .inner{width:25px;background-position:-41px -85px;}
#title3 .b4 .inner{width:22px;background-position:-67px -85px;}
#title3 .b5 .inner{width:20px;background-position:-89px -85px;}

#title3 .c1{width:10px;background-position:0 -127px;}
#title3 .c2{width:8px;background-position:-10px -127px;}
#title3 .c3{width:12px;background-position:-18px -127px;}
#title3 .c4{width:9px;background-position:-30px -127px;}
#title3 .c5{width:11px;background-position:-39px -127px;}

#title3 .d1{width:10px;background-position:0 -147px;}
#title3 .d2{width:10px;background-position:-10px -147px;}

#title3 .e1{width:5px;background-position:0 -167px;}
#title3 .e2{width:10px;background-position:-5px -167px;}
#title3 .e3{width:10px;background-position:-16px -167px;}
#title3 .e4{width:6px;background-position:-26px -167px;}
#title3 .e5{width:10px;background-position:-32px -167px;}
#title3 .e6{width:12px;background-position:-42px -167px;}
#title3 .e7{width:11px;background-position:-54px -167px;}



table#about{
	width: 65.8%;
	padding-left: 100px;
	line-height: 3.75;
	position: absolute;
	top: 270px;
	text-align: left;
	position: relative;
}


table#about .tsume{
	margin-left: -0.5em;
}

table#about th{
	width: 196px;
		vertical-align: top;
}
table#about td p{
	line-height: 2.5em;
	margin-top: 6px;
}
#block3 .map{
	width: 779px;
	position: relative;
	left: 327px;
	top: 365px;
}




	.googlemap {
	display: block;
	position: relative;

  left: 327px;
  top: 385px;
}
.googlemap a{
	color: #000;
}

#content .map_point{
	position: absolute;
    right: 177px;
    top: 218px;
	width:31px;height:26px;
	-webkit-animation:mapRotate linear 2s infinite;
}


#content .map_point img{
	-webkit-animation:mapInnerRotate linear 2s infinite;
}

@-webkit-keyframes mapRotate{
	0%{-webkit-transform: rotate(0) translateX(3px);}
	50%{-webkit-transform: rotate(-180deg) translateX(3px);}
	100%{-webkit-transform: rotate(-360deg) translateX(3px);}
}

@-webkit-keyframes mapInnerRotate{
	0%{-webkit-transform:rotate(0);}
	50%{-webkit-transform:rotate(180deg);}
	100%{-webkit-transform:rotate(360deg);}
}




/**********************
block4
************************/

#block4{
	margin-bottom: 280px;
	height: 1225px;
}

#title4{
	width:149px;height:180px;
}


#title4.title .a,
#title4.title .c div,
#title4.title .d div,
#title4.title .e div{
	background-image:url(../img/title04.svg);
	background-repeat:no-repeat;
	background-size:149px 180px;
}
#title4.title .b div{
	background-image: none;
}
#title4.title .b .inner{
	background-image:url(../img/title04.svg);
	background-repeat:no-repeat;
	background-size:149px 180px;
}
#title4.title .a{width: 60px;height: 40px;}


#title4 .b1 .inner{width:20px;background-position:0 -85px;}
#title4 .b2 .inner{width:26px;background-position:-20px -85px;}
#title4 .b3 .inner{width:23px;background-position:-46px -85px;}
#title4 .b4 .inner{width:20px;background-position:-70px -85px;}
#title4 .b5 .inner{width:20px;background-position:-91px -85px;}
#title4 .b6 .inner{width:24px;background-position:-112px -85px;}
#title4 .b7 .inner{width:14px;background-position:-136px -85px;}

#title4 .c1{width:9px;background-position:0 -127px;}
#title4 .c2{width:12px;background-position:-10px -127px;}
#title4 .c3{width:11px;background-position:-22px -127px;}
#title4 .c4{width:8px;background-position:-33px -127px;}
#title4 .c5{width:9px;background-position:-42px -127px;}
#title4 .c6{width:10px;background-position:-51px -127px;}
#title4 .c7{width:8px;background-position:-62px -127px;}

#title4 .d1{width:7px;background-position:0 -147px;}
#title4 .d2{width:11px;background-position:-8px -147px;}

#title4 .e1{width:5px;background-position:0 -167px;}
#title4 .e2{width:10px;background-position:-5px -167px;}
#title4 .e3{width:10px;background-position:-15px -167px;}
#title4 .e4{width:6px;background-position:-25px -167px;}
#title4 .e5{width:10px;background-position:-32px -167px;}
#title4 .e6{width:12px;background-position:-42px -167px;}
#title4 .e7{width:11px;background-position:-54px -167px;}

#block4 .comment{
	width: 65.8%;
	padding-left: 100px;
	line-height: 3.75;
	position: absolute;
	top: 360px;
}


#block4 form{
		width: 100%;
    padding-left: 100px;
    line-height: 3;
    position: absolute;
    top:  714px;
}

form input{
	width:336px;
	height: 14px;
	padding:10px;
	background-color:#eeeeef;
	border:none;
	font-size:14px;
}


#block4 dt{
	width:200px;
	font-weight:bold;
	display:inline-block;
	float:left;
	vertical-align: top;
}
#block4 dt .kome{
	font-size: 4px;
	vertical-align: super;
	color: red;
}

#block4 .area_2{
	padding-bottom: 8px;
}
.area_3{
	padding-bottom:12px;
}

#block4 dt .kome {
    font-size: 8px;
	}

form .area_3 textarea{
	padding: 10px;
	width:759px;height:197px;
	background-color:#eeeeee;
	border:none;
	font-size:14px;
	resize: vertical;
  overflow: auto;
}

.button_area{
	width:210px;height:48px;
	margin-left:200px;
}


.button_area input{
	background-color: #000;
	width:398px;
	height:96px;
	padding:0;
	font-size: 22px;
	letter-spacing: 0.12em;

	color: #fff;
	cursor:pointer;
	-webkit-transition:background-color 0.3s ease-out;
	-ms-transition:background-color 0.3s ease-out;
	transition:background-color 0.3s ease-out;
}

.button_area input:hover{

	background-color: #e4007f;

}


button{
	width:210px;height:48px;
	padding:0;
	border:none;
	cursor:pointer;
	background-image:url(../images/button.jpg);
	-webkit-transition:background-image 0.3s ease-out;
	-ms-transition:background-image 0.3s ease-out;
	transition:background-image 0.3s ease-out;
}

button:hover{
	background-image:url(../images/button_hover.jpg);
}






footer{
	/*margin-top: 280px;*/
}





/**********************
footer
************************/
#gotop{

	width: 37px;
	position: relative;
	left: 50%;
	margin-left: -18px;
	cursor: pointer;
	margin-bottom: 160px;
}



#copyright{

	margin: 30px auto;
	display: block;
}

/**********************
mobile
************************/

.mobile #sceen_frame{
	/*width:668px !important;*/
	min-width:initial;
	min-height:initial;
}

.mobile #sceen_frame canvas{

	/*width:668px;
	height:1200px;*/
}

.mobile #wrapper{
	min-width:initial;
	min-width:none;
}

.mobile #content{
    width: 660px;
    padding-left: 10px;
    padding-right: 10px;
}


.mobile #gotop {
	margin-bottom: 125px;
}

.mobile #content{
    width: 480px;
    padding-left: 10px;
    padding-right: 10px;
}



.mobile #block1{
	margin-bottom:1265px;
}

.mobile #p1{
	padding-top:290px;
}

.mobile_gif_anim{
	display:none;
}

.mobile .mobile_gif_anim{
	display:block;
	width: 100%;
	height: auto;
}

.mobile #p1 .gif_anim,
.mobile #p2 .gif_anim,
.mobile #p3 .gif_anim{
	width:800px;
	left: -140px;
	top: auto;
	bottom: -1277px;
}
.mobile #p2 .gif_anim{
	left:-148px;
}
.mobile #p3 .gif_anim{
	bottom:-1150px;
}

.mobile #p1,
.mobile #p2,
.mobile #p3{

}

.mobile h2,
 h2.sp{
	display:none;
}

.mobile h2.sp{
	display:block;
	position: relative !important;
	padding-top: 95px;
	margin-bottom: 160px;
}

.mobile #block1 .big_text{
	position: relative;
	left: 0px;top: 0;
}

.mobile #p1 .big_text>img{
	position: absolute;
	left: 200px;top: 40px;
}

.mobile #p2 .big_text>img{
	position: absolute;
	left: 200px;top: 17px;
}

.mobile #p2 .big_text>img{
	position: absolute;
	left: 200px;
}

.mobile #p2 {
	margin-top: 1220px;
}

.mobile #p2 .big_text .sub{
	top: 152px;
}

.mobile #p3 .big_text .sub{
	top: 161px;
}

.mobile #block1 .mobile_h2{
	display:block !important;
	position: initial;
	clear:both;
	padding-left: 100px;
	margin-bottom: 200px;
}

.mobile #p3{
	margin-top: 1150px;
	height: 1065px;
}

.mobile #p1 p,
.mobile #p2 p,
.mobile #p3 p{
	width: 480px;
	margin:0 auto;
	margin-top:120px;
	margin-bottom: 0;
	padding-left:0;
	padding-bottom: 70px;
	line-height:2.72;
	position:relative;
}

.mobile #p1 p,
.mobile #p2 p,
.mobile #p3 p{
	margin-top:120px;
	font-size: 22px;
}

.mobile #block2{
	height: auto;
	margin-bottom: 300px;
}


.mobile .works_wrap{
	width: 480px;
	margin: 0 auto;
}

.mobile .works_wrap .linkbox a{
	float: left;
	clear: both;
}

.mobile .works_wrap .linkbox a img{
	width: 100%;
	height: auto;
}



/*-------------
#block1
-------------*/
.mobile #title1.title .a,
.mobile #title1.title .c div,
.mobile #title1.title .d div,
.mobile #title1.title .e div,
.mobile #title1.title .b .inner
{background-image:none;}

.mobile #title1 {
    width: 210px;
    height: 180px;
		background-image: url(../img/title01.svg);
		background-repeat: no-repeat;
}


/*-------------
#block2
-------------*/
.mobile #title2.title .a,
.mobile #title2.title .c div,
.mobile #title2.title .d div,
.mobile #title2.title .e div,
.mobile #title2.title .b .inner
{background-image:none;}

.mobile #title2 {
    width: 113px;
    height: 180px;
		background-image: url(../img/title02.svg);
		background-repeat: no-repeat;
}



/*-------------
#block3
-------------*/


.mobile #title3.title .a,
.mobile #title3.title .c div,
.mobile #title3.title .d div,
.mobile #title3.title .e div,
.mobile #title3.title .b .inner
{background-image:none;}

.mobile #title3 {
    width: 108px;
    height: 180px;
		background-image: url(../img/title03.svg);
		background-repeat: no-repeat;
}


.mobile #block3{
	height: 3327px;
	margin-bottom: 370px;
}

.mobile table#about{
	line-height: 60px;
	top: 360px;
}

.mobile table#about td p {
 line-height: 2em;
 margin-top: 6px;
}


.mobile #block3 table{
	font-size: 22px;
	width: 480px;
	padding: 0;
	margin: 0 auto;
	margin-bottom: 40px
}
.mobile #block3 tr{
	display: block;
	margin-bottom: 40px;
}
.mobile #block3 th{
		width: 480px;
		line-height: 30px;
    display: block;}
.mobile #block3 td{
		width: 480px;
    display: block;
}

.mobile #block3 .map {
  transform: scale(0.96);
	transform-origin: left top;
	left: -117px;
	top: 320px;
	margin-bottom: -0px
}

.mobile .googlemap{
	width: 245px;
	left: 0px;
	top: 335px;
	font-size: 22px;
}



/*-------------
#block4
-------------*/



.mobile #block4
{
	/*width: 480px;*/
	margin: 0 auto;
	height: 2160px;
}

.mobile #title4.title .a,
.mobile #title4.title .c div,
.mobile #title4.title .d div,
.mobile #title4.title .e div,
.mobile #title4.title .b .inner
{background-image:none;}

.mobile #title4 {
    width: 149px;
    height: 180px;
		background-image: url(../img/title04.svg);
		background-repeat: no-repeat;
}

.mobile #block4 .comment {
	width: 480px;
		margin: 0 auto;
		position: relative;
    /*width: 100%;*/
    padding-left: 0;
		font-size: 22px;
    line-height: 60px;
		text-align: justify;
		padding-top: 360px;
		top:0;
}

.mobile #block4 .comment span {
    margin-left: -4.0px;
}

.mobile #block4 form {
	width: 480px;
	margin: 0 auto;
    padding-left: 0px;
	margin-top: 150px;
		font-size: 22px;
		}

.mobile #block4 dt {
		width: 100%;
				}

.mobile #block4 dd {
		margin-left: 0;
	  width: 100%;
	}

.mobile	form input {
	width: 100%;
	height: 96px;
	font-size: 22px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	padding: 10px 30px;
}

.mobile form .area_3 textarea {
	width: 100%;
  height: 380px;
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	padding: 10px 30px;
}

.mobile .button_area {
    width: 100%;
    margin-left: 0;
}

input[type="button"],input[type="submit"] {
	border-radius: 0;
		-webkit-appearance: none;
}

#sp_navi{
	/*display:none;*/
	width:640px;
	background-color:transparent;

	position:fixed;
	width:100%;
	height:100%;
	top:0;
	left:0;
	z-index:10;
	-webkit-transition:background-color 0.3s ease-out;
	transition:background-color 0.3s ease-out;
	visibility:hidden;
}

.mobile #sp_navi.show{
		background-color:#e4007f;
		visibility:visible;
}

.mobile #sp_navi{
	display:block;
	visibility:hidden;
}

.mobile #sp_navi.hide{
	background-color:transparent;
	visibility:visible;
}

#sp_navi .links{
	width:640px;
	height:712px;
	left:50%;
	margin-left:-320px;
	top:50%;
	margin-top:-356px;

	opacity:0;
	-webkit-transition:opacity 0.3s ease-out;
	transition:opacity 0.3s ease-out;
}

#sp_navi.show .links{

	display:block;
	opacity:1;
}

#sp_navi.hide .links{
	display:block;
	opacity:0;
}

#sp_navi .links a{
	display:block;
	-webkit-transform:translateY(20px);
	transform:translateY(20px);
	-webkit-transition:-webkit-transform 0.5s ease-out;
	transition:transform 0.5s ease-out;
}

#sp_navi.show .links a{
	-webkit-transform:translateY(0px);
	transform:translateY(0px);
}

#sp_navi .links a:nth-child(2){
	-webkit-transition-delay:0.3s;
	transition-delay:0.2s;
}

#sp_navi .links a:nth-child(3){
	-webkit-transition-delay:0.45s;
	transition-delay:0.4s;
}

#sp_navi .links a:nth-child(4){
	-webkit-transition-delay:0.5s;
	transition-delay:0.6s;
}

#sp_navi .links a img{
	display:block;
}



.mobile #sp_navi .btn{
	width:48px;
	height:48px;
	position:absolute;
	top:40px;
	left:50%;
	margin-left:190px;
	visibility:visible;
	cursor:pointer;
	/*margin-top:-541px;*/
}

.ipad #sp_navi .btn{
	width:36px;
	height:36px;

}

#sp_navi .btn img{
	position:absolute;
	display:block;
	top:0;
	left:0;
	opacity:0;
}

.ipad #sp_navi .btn img{
	width:40px;
	height:40px;
}

#sp_navi .btn img.open{
	opacity:1;
}

#sp_navi.show img.open{
	visibility:hidden;
}
#sp_navi.show img.close{
	opacity:1;
}

#gotop.mouseover{
	-webkit-animation:gotop 0.5s ease-out;
	animation:gotop 0.5s ease-out;
}

@-webkit-keyframes gotop{
	0%{-webkit-transform:translateY(0px);}
 33%{-webkit-transform:translateY(-7px);}
 66%{-webkit-transform:translateY(4px);}
100%{-webkit-transform:translateY(0px);}
}

@keyframes gotop{
	0%{transform:translateY(0px);}
 33%{transform:translateY(-7px);}
 66%{transform:translateY(4px);}
100%{transform:translateY(0px);}
}



/* -----------------------------------
		clearFix
 ----------------------------------- */
.clear_fix{
	zoom:1;
}
.clear_fix:after{
	content:"";
	display:block;
	clear:both;
	font-size:0;
	line-height:0;
	visibility:hidden;
}