@charset "utf-8";

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, 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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;  }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
html { overflow-x: scroll; overflow-y: hidden;}
html, body {
	height: 100%;
	cursor: default;
	background: #ffffff;
	font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", 'メイリオ' , Meiryo , Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif;
	font-size: 12px;
	line-height: 1.3;
	color: #8A8A8A;
	margin: 0px auto 0px auto;
}
a img { border: none; outline: none; }
var { display: none; }
img { display: block; }

a {color:#1f436a;text-decoration: none;outline: none;}
a:hover {color: #3A6B9D;}
.opacityOver:hover{filter: alpha(opacity: 70);opacity: 0.7;-moz-opacity: 0.7;}
::selection {background: #FFF258;}
::-moz-selection {background: #FFF258;}

#ook-preloaden img { position: absolute; left: 0; top: 0; z-index: -30; }

#debug { position: fixed; top: 0; left: 0; z-index: 2; background: #000; color: #fff; font-weight: bold; }

#loading { position: fixed; left: 0; top: 0; width: 100%; height: 100%; background-color: #fff; z-index: 100; }

/*せつめい*/
#info { position: absolute; left: 50%; margin-left: -250px; top: 50%; margin-top: -250px; }

/*go*/
#go {
	position: absolute;
	left: 50%;
	margin-left: -130px;
	top: 50%;
	margin-top: 160px;
	background-image: url(../img/btn_go.png);
	background-repeat: no-repeat;
	height: 180px;
	width: 200px;
	cursor:pointer;
}

#go:active {
	position: absolute;
	left: 50%;
	margin-left: -130px;
	top: 50%;
	margin-top: 160px;
	background-image: url(../img/btn_go_h.png);
	background-repeat: no-repeat;
	height: 180px;
	width: 200px;
}


#tap {/*のびるやつの枠*/
	width: 113px;
	height: 165px;
	position: fixed;
	left: 50%;
	top: 50%;
	margin: -70px 0 0 -90px;
	background: url("../img/tap.png") no-repeat;
}

#water {/*のびるやつ*/
	width: 113px;
	height: 91px;
	margin: 74px 0 0 0;
	background-image: url(../img/water.png);
	background-repeat: no-repeat;
}

#percentage {/*パーセンテージ*/
	position: absolute;
	top: 50%;
	left: 50%;
	color: #999999;
	font-weight: bold;
	font-size: 120%;
	margin: 130px 0 0 -46px;
}

#browser{
	position: absolute;
	left: 50%;
	margin-left: 80px;
	top: 50%;
	margin-top: 160px;

}

#top { position: fixed; top: 0; left: 1%; margin-left: 0px; z-index: 11; }
#top a { position: relative; }

#footer-bnr { position: fixed; bottom: 0%; width: 490px; left: 5px; z-index: 11; }

#bottom { position: fixed; bottom: 0%; z-index: 11; left: 50%; margin-left:-80px;}
#bottom ul { width: 500px; position: relative; left: -100px; margin-left:-30px;}
#bottom li { float: left; margin-left:3px; }
#bottom li a {
	display: block;
	width: 34px;
	height: 35px;
	background: url("../img/nav.png") no-repeat;
	text-align: center;
	color: #fff;
	font-size: 13px;
	text-decoration: none;
	padding-top: 6px;
	padding-right: 5px;
}
#bottom li a:hover { background-position: 0 -40px; }
#bottom li a.active { background-position: 0 -80px; }
#bottom li a.prev, #bottom li a.next { width: 33px; height: 32px; background: url("../img/nav-prev-next.png"); padding: 0; }
#bottom li a.prev:hover, #bottom li a.next:hover { background-position: 0 -32px; }
#bottom li a.next { background-position: 0 -64px; }
#bottom li a.next:hover { background-position: 0 -96px; }

#bottom li div { /*thumbnail*/
	width: 175px;
	height: 47px;
	position: absolute;
	top: -60px;
	margin-left: -68px;
	display: none;
}

#copyright {
	position: fixed;
	bottom: 17px;
	width: auto;
	z-index: 11;
	right: 10px;
	font-size:85%;
}

#bottombg {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 10;
	background-image: url(../img/bg_footer.png);
	background-repeat: repeat-x;
	background-attachment: fixed;
	background-position: bottom;
	height: 59px;
	width: 100%;
}

#parallax { width: 30000px; height: 100%; }

div.abs { position: absolute; }

div.middle { top: 50%; }

div.content h1 { font-size: 52px; line-height: 49px; font-weight: bold; margin-bottom: 18px; font-family: "MalagaOTBold", sans-serif; }
div.content h2 { font-size: 42px; line-height: 35px; font-weight: normal; text-transform: uppercase; font-family: "BlockBertholdRegular", sans-serif; }
div.content p { font-size: 12px; line-height: 20px; }

#line1 { left: 3000px; margin-top: -220px; pointer-events: none; z-index: 2; }
#line1-btn { left: 5235px; margin-top: 100px; z-index: 3; width:240px; }
#line2 { left: 5680px; margin-top: -370px; pointer-events: none; z-index: 2; }
#line3 { left: 8920px; margin-top: -350px; pointer-events: none; z-index: 2; }
#line4 { left: 11140px; margin-top: -400px; pointer-events: none; z-index: 2; }
#line5 { left: 12750px; margin-top: -330px; pointer-events: none; z-index: 2; }
#line6 { left: 15520px; margin-top: 10px; pointer-events: none; z-index: 2; }

#sns{ left: -400px; bottom: 80px; }

/*==== 1 ====*/

#scherm1-bg { position: absolute; width: 1722px; left: -800px; height: 100%; top: 0%; background:url("../img/bg_1.jpg") 0px top no-repeat; }
#s1-content { left: 30px; width: 400px; margin-top: -220px; color:#000;}
.win #s1-content {font-weight:bold;}

#s1-1 { left: 500px; margin-top: -80px; top: 55%; }
#s1-3 { left: 300px; margin-top: 25px; top: 55%; }
#s1-2 { left: 440px; margin-top: -65px; top: 55%; }
#s1-4 { left: 150px; margin-top: 75px; top: 55%; }

#s1-cloud1 { left: -500px; top: 0; }
#s1-cloud2 { left: 600px; margin-top: 80px; top: 55%;}
#s1-pineB { left: -200px; margin-top: -50px; top: 55%; }
#s1-pineS { left: 350px; margin-top: -170px; top: 55%; }

#s1-start { top: 40%; left: 720px; margin-top: 0px; }


/*==== 2 ====*/

#scherm2-bg { left: 900px; width: 1600px; height: 100%; background: #7fd2ff; z-index: 3;}

#scherm2-bg img { position: absolute; margin-top: 0px; left: 900px; }

#s2-cloud { left: 1200px; top: 5%;}

#s2-bird-back1 { left: 1200px; top: 10%;}
#s2-bird-back2 { left: 2000px; top: 80%;}
#s2-bird-back3 { left: 2780px; top: 22%;}

#s2-bird-front1 { left: 1380px; top: 55%;}
#s2-bird-front2 { left: 2600px; top: 8%;}

#s2-airship-body { left: 2100px; margin-top: -320px; }
#s2-airship-propelle { left: 2001px; margin-top: -149px; }

#s2-topics { width: 350px; left: 2199px; margin-top: 60px; font-size:90%; }
#s2-topics .news {
	color: #FFF;
	margin-bottom:10px;
}

#s2-topics a {
	color: #FFFF9B;
	text-decoration: none;
}
#s2-topics a:hover {
	text-decoration: underline;
}

/*==== 3 ====*/

#scherm3-bg { left: 2500px; margin-top: 0px; }

#s3-view { left: 2200px; margin-top: 250px; }

#s3-works1 { top: 60%; left: 4230px; margin-top: 0px; }/*映像*/
#s3-works2 { top: 60%; left: 4800px; margin-top: 100px; z-index: 3;}/*3D*/
#s3-works3 { top: 60%; left: 4920px; margin-top: 30px;  z-index: 2;}/*グラフィック*/
#s3-works4 { top: 60%; left: 4530px; margin-top: -300px; }/*PC*/
#s3-works5 { top: 60%; left: 4900px; margin-top: -200px; }/*MBL*/
#s3-works6 { top: 60%; left: 5500px; margin-top: 10px; }/*APP*/

#s3-list { left: 4200px; margin-top: -370px; color: #666; width: 950px;}
.win #s3-list {font-weight:bold;}
#s3-list .list-tit{
	margin: 0px 0px 10px 570px;
}

#s3-list table { width: 1350px; margin-bottom:5px; }
#s3-list table tr td{ padding: 2px 3px; width:270px }
#s3-list table tr td:first-child { text-align: left; }

#s3-list p {
	width: 1280px;
	text-align: right;
}

/*==== 4 ====*/

#scherm4-bg {
	position: absolute;
	width: 1720px;
	height: 100%;
	left: 4400px;
	background-image: url(../img/bg_4.png);
	background-repeat: no-repeat;
	background-position: center;
}

#s4-star  { left: 5710px; bottom: 0; margin-bottom:-100px; }

#s4-bnr1 { left: 6610px; width: 300px; top: 30%; }
#s4-bnr1 .bannertit { margin-left: 75px; }
#s4-bnr1 a img { margin-top: 5px; }

#s4-bnr2 { left: 7160px; width: 234px; top: 41%; }
#s4-bnr2 .bannertit { margin-left:50px; }
#s4-bnr2 a img { margin-top: 5px; margin-right: 5px; }
#s4-bnr2 img { margin-top: 5px; margin-right: 5px; }

#s4-bnr3 { left: 7660px; width: 234px; top: 35%; }
#s4-bnr3 .bannertit { margin-left: 20px; }
#s4-bnr3 a img { margin-top: 5px; }

/*==== 5 ====*/
#scherm5-bg { width: 1722px; height: 100%; left: 7450px; background:url("../img/bg_1.jpg") 0px top no-repeat; }

#s5-river { left: 7860px; margin: 100px 0px 0px 300px; }

#s5-ii { left: 8800px; top:75%; }

#s5-taiyaki1 { left: 8244px; margin-top:314px; }
#s5-taiyaki2 { left: 8600px; margin-top:510px; }

#s5-tai { left: 11460px; bottom:0; }

#s5-content1 { left: 9350px; width: 600px; margin-top: -50px; color:#000;}
#s5-content2 { left: 10200px; width: 600px; margin-top: -300px; color:#000;}
.win #s5-content1, .win #s5-content2  {font-weight:bold;}
/*==== 6 ====*/
#scherm6-bg { width: 2100px; height: 100%; left: 9900px; background:url("../img/bg_6.jpg") 0px top no-repeat; }

#s6-cast { left: 11300px; width:1530px; top:40%;}

#s6-cast .cast01 { margin-right: 30px; width:210px; float:left }
#s6-cast .cast02 { margin-right:  0px; width:260px; float:left }

.cast01 img, .cast02 img { margin-bottom: 10px; }
.cast01 h4, .cast02 h4   { font-size: 70%; color: #FFF; }
.cast01 h3, .cast02 h3   { font-size: 150%; font-weight: bold; color: #f5be25; }
.cast01 p, .cast02 p     { color: #FFF; }

/*==== 7 ====*/
#scherm7-bg { width: 1900px; height: 100%; left: 14100px; background:url("../img/bg_7.jpg") 0px top no-repeat; }

/* 印 */
#s7-text1-1 { left: 15610px; top:0%; } /*8*/
#s7-text1-2 { left: 16880px; top:0%; } /*9*/

/* 象 */
#s7-text2-1 { left: 14577px; top:0%; } /*7*/
#s7-text2-2 { left: 17080px; top:0%; } /*9*/

/* を */
#s7-text3-1 { left: 16040px; top:0%; } /*8*/
#s7-text3-2 { left: 14878px; top:0%; } /*7*/

/* 創 */
#s7-text4-1 { left: 16170px; top:0%; } /*8*/
#s7-text4-2 { left: 17470px; top:0%; } /*9*/
#s7-text4-3 { left: 15070px; top:0%; } /*7*/

/* る */
#s7-text5-1 { left: 17640px; top:0%; } /*9*/
#s7-text5-2 { left: 15280px; top:0%; } /*7*/

/* 。 */
#s7-text6-1 { left: 16600px; top:0%; } /*8*/
#s7-text6-2 { left: 17832px; top:0%; } /*9*/

#s7-light1 { left: 14500px; bottom:0%; }
#s7-people { left: 15840px; bottom:0%; }
#s7-light2 { left: 17300px; bottom:0%; }

#s7-content { width: 600px; left: 17600px; margin-top:140px; color:#000; }
.win #s7-content {font-weight:bold;}

/*==== 8 ====*/
#scherm8-bg { width: 2073px; height: 100%; left: 13000px; background:url("../img/bg_8.jpg") 0px top no-repeat; }


#s8-island { left: 14650px; bottom:0%; margin-bottom:-50px}

#s8-content { width: 660px; left: 18250px; color:#FFF; margin-top:-340px; z-index: 10; }

#s8-content table tbody tr td p { margin-bottom: 10px; }
.win #s8-content table a {font-weight:bold;}

/*==== 9 ====*/
#scherm9-bg { width: 1200px; height: 100%; left: 15000px; background: #b5eeff; z-index: 3;}

/*==== NEXT btn ====*/
#s2-next { left: 2710px; margin-top: -244px; z-index: 11; }

#s3-next { left: 5565px; margin-top: 105px; z-index: 11; }

#s4-1-next { left: 7920px; margin-top: 45px; z-index: 11; }
#s4-2-next { left: 8540px; margin-top: 130px; z-index: 11; }
#s4-3-next { left: 9200px; margin-top: 25px; z-index: 11; }

#s5-1-next { left: 10160px; margin-top: -135px; z-index: 11; }
#s5-3-next { left: 11100px; margin-top: -105px; z-index: 11; }

#s6-1-next { left: 12570px; margin-top: -195px; z-index: 11; }

#s7-2-next { left: 17575px; margin-top: 60px; z-index: 11; }

#s8-next { left: 17500px; margin-top: -65px; z-index: 11; }

/*==== end ====*/

@media screen and (max-height: 700px) {
	div.middle { top: 55%; }
	#s8-island { left: 14650px; bottom:0%; margin-bottom:-250px}
	
	#s4-bnr1 { left: 6610px; width: 234px; top: 25%; }
	#s4-1-next { left: 7920px; margin-top: 20px; }
	#s4-2-next { left: 8540px; margin-top: 110px;}
	#s4-3-next { left: 9200px; margin-top: 20px;}
	
	#s7-light1 { left: 14500px; bottom:0%; margin-bottom:-50px }
	#s7-people { left: 15840px; bottom:0%; margin-bottom:-40px }
	#s7-light2 { left: 17300px; bottom:0%; margin-bottom:-50px }
	
	#s7-content { width: 600px; left: 17600px; margin-top:0px; color:#000; }
	.win #s7-content {font-weight:bold;}
	#s7-2-next { left: 17535px; margin-top: -95px; }
	
	#s3-list { left: 4200px; margin-top: -320px; color: #666; width: 950px;}
	.win #s3-list {font-weight:bold;}
	
	#s5-content1 { left: 9350px; width: 600px; margin-top: -100px; color:#000;}
	#s5-content2 { left: 10200px; width: 600px; margin-top: -250px; color:#000;}
	.win #s5-content1, .win #s5-content2  {font-weight:bold;}
	#s7-content { width: 600px; left: 17600px; margin-top:-30px; color:#000; }
	#s6-cast { left: 11300px; width:1530px; top:37%;}
	#s5-3-next { left: 11040px; margin-top: -50px; z-index: 11; }
	#s5-1-next { left: 10120px; margin-top: -200px; z-index: 11; }
	#s7-2-next { left: 17575px; margin-top: -100px; z-index: 11; }
}

@media screen and (max-width: 1500px) {
	
#s1-cloud1 { left: -400px; top: 0; }
#s1-pineB { left: -190px; margin-top: -50px; top: 55%; }

}

@media screen and (max-width: 1200px) {
	
#s1-cloud1 { display:none;}
#s1-pineB { display:none;}

}
@media screen and (max-width: 850px) {

#s1-content { left: 200px; width: 400px; margin-top: -220px; color:#000; }
.win #s1-content {font-weight:bold;}
#copyright  { display:none;}
#footer-bnr  { display:none;}

}

@media screen and (max-device-width: 480px)  {

#s1-fk { left: 650px; margin-top: 20px; top: 55%; }
#s1-ur { left: 450px; margin-top: 125px; top: 55%; }
#s1-hs { left: 490px; margin-top: 35px; top: 55%; }
#s1-ii { left: 340px; margin-top: 180px; top: 55%; }

#s1-cloud2 { left: 600px; margin-top: 100px; top: 55%;}
#s1-pineS { left: 400px; margin-top: -170px; top: 55%; }

#s1-cloud1 { display:none;}
#s1-pineB { display:none;}

#s2-topics  { width: 400px; left: 2192px; margin-top: 60px; font-size:70%; }

#scherm6-bg { width: 1900px; height: 100%; left: 9960px; background:url("../img/bg_6min.jpg") 0px top no-repeat;}
#scherm8-bg { width: 1900px; height: 100%; left: 13000px; background:url("../img/bg_8min.jpg") 0px top no-repeat;}

#copyright  { display:none;}
#footer-bnr  { display:none;}

#s5-tai { left: 11460px; bottom:-50px; }
}
/*==== float ====*/
.fltL{ float:  left; }
.fltR{ float: right; }
.fltN{ float:  none; }

/*==== padding margin ====*/

.pl40 { padding-left:  40px   !important;}
.pl20 { padding-left:  20px   !important;}
.pl05 { padding-left:   5px   !important;}
.pl10 { padding-right: 10px   !important;}

.mt00 { margin-top:  0   !important;}
.mt05 { margin-top:  5px !important;}
.mt10 { margin-top: 10px !important;}
.mt12 { margin-top: 12px !important;}
.mt15 { margin-top: 15px !important;}
.mt20 { margin-top: 20px !important;}
.mt25 { margin-top: 25px !important;}
.mt30 { margin-top: 30px !important;}
.mt35 { margin-top: 35px !important;}
.mt40 { margin-top: 40px !important;}

.mr00 { margin-right:  0   !important;}
.mr05 { margin-right:  5px !important;}
.mr10 { margin-right: 10px !important;}
.mr12 { margin-right: 12px !important;}
.mr15 { margin-right: 15px !important;}
.mr20 { margin-right: 20px !important;}
.mr25 { margin-right: 25px !important;}
.mr30 { margin-right: 30px !important;}
.mr35 { margin-right: 35px !important;}
.mr40 { margin-right: 40px !important;}

.mb00 { margin-bottom:  0   !important;}
.mb05 { margin-bottom:  5px !important;}
.mb10 { margin-bottom: 10px !important;}
.mb12 { margin-bottom: 12px !important;}
.mb15 { margin-bottom: 15px !important;}
.mb20 { margin-bottom: 20px !important;}
.mb25 { margin-bottom: 25px !important;}
.mb30 { margin-bottom: 30px !important;}
.mb35 { margin-bottom: 35px !important;}
.mb40 { margin-bottom: 40px !important;}

.ml00 { margin-left:  0   !important;}
.ml05 { margin-left:  5px !important;}
.ml10 { margin-left: 10px !important;}
.ml12 { margin-left: 12px !important;}
.ml15 { margin-left: 15px !important;}
.ml20 { margin-left: 20px !important;}
.ml25 { margin-left: 25px !important;}
.ml30 { margin-left: 30px !important;}
.ml35 { margin-left: 35px !important;}
.ml40 { margin-left: 40px !important;}
.ml400 { margin-left: 400px !important;}