@charset "UTF-8";



/* --ブラウザの互換初期化------------------------ */
html{ overflow:scroll; }
* {margin: 0; padding: 0;}
body,div,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:normal;}
ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
q:before,q:after{content:'';}

input[type="checkbox"],input[type="radio"] {margin: 0 2px 0 0; padding: 0; vertical-align: -2px; }

/* --clearfix------------- */
.clearfix:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }
.clearfix { min-height: 1px; }
* html .clearfix { height: 1px; /*¥*//*/ height: auto; overflow: hidden; /**/ }

/* 基本枠組み 
-------------------------- */
body {
	font: 12px "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;
	background: #f2f2f2;
	margin:0;
	padding:0;
	height:30000px; /*高さの数値を変えるとスクロール量を調整できる*/ }

#wrapper {
	position:fixed; /*大枠はfixedに*/
	width:100%;
	height:100%;}

#contents {
	position:relative; /* コンテンツ中央配置 */
	width: 960px;
	height:100%;
	margin: auto;
	z-index: 10; }


/* gnav
-------------------------- */
/*
#gnav {
	background: url(images/hero/gnav.webp) repeat-x 0 0;
	position:absolute;
	height: 50px;
	width:100%;
	bottom:0px;
	z-index: 110; }

	#gnav span {
		display: block;
		width:960px;
		text-align: left;
		margin: auto; }

		#gnav a{ float: left;
			width: 192px;
			margin: 0; }
*/

/* hero
-------------------------- */
#hero{
	background: url(images/hero/hero.webp) no-repeat 100% 0;
	position:absolute;
	height: 768px;
	width:393px;
	top:10px;
	right: -34px;
	z-index: 100; }


/* 言語選択
-------------------------- */
/*
#menu{
	position:absolute;
	top:0;
	right:10px;
	width:89px;
	padding: 13px 0 0 1px;
	z-index: 101;}

	#menu a {
		display: block;
		width: 66px;
		height: 18px;
		background: url(images/hero/lang1.webp) no-repeat 0 0; }
	#menu a.lang2 { background: url(images/hero/lang2.webp) no-repeat 0 0; }
	#menu a.lang3 { background: url(images/hero/lang3.webp) no-repeat 0 0; }

		#menu a.curent,
		#menu a:hover {
			background: none; }

		#menu a img{
			opacity: 0;
			filter:Alpha(opacity=0); }
		#menu a.curent img,
		#menu a:hover img{
			opacity: 1;
			filter:Alpha(opacity=100); }
*/


/* section1
-------------------------- */
#section1{
	top:0;
	right: 0;
	background: url(images/hero/section1.webp) no-repeat 0 0;
	position:absolute;
	height: 723px;
	width: 970px;
	z-index: 10; }

#section1 .next,
#section2 .next,
#section3 .next{
	position: absolute;
	bottom: 17px;
	right: 0; }

/* ヘッダーメニュー */
#section1 ul{
	position: relative;
	width:100%;
	list-style: none;
	padding: 0;
	margin: 0; }

	#section1 ul li{
		display: block;
		position: absolute;
		top:0;
		width:auto;
		list-style: none;
		padding: 0;
		margin: 0; }

		#section1 ul li a{
			display: block;
			padding: 0;
			margin: 0; }

		#section1 ul li a img{
			display: block;
			opacity: 0;
			filter:Alpha(opacity=0);}

		#section1 ul li a:hover img{
			display: block;
			opacity: 1;
			filter:Alpha(opacity=100);}

		#section1 li.nav1{
			top: 44px;
			left:-5px;
			width:267px;
			height: 203px;
			z-index: 3; }

			#section1 li.nav1　a{
				width:267px;
				height: 203px; }

		#section1 li.nav2{
			top: 44px;
			left:181px;
			width:325px;
			height: 225px;
			z-index: 1; }

			#section1 li.nav2 a{
				width:325px;
				height: 225px;}

		#section1 li.nav3{
			top: 44px;
			right:0;
			width:529px;
			height: 225px;
			z-index: 2; }

			#section1 li.nav3 a{
				width:529px;
				height: 225px;}



/* 新着一覧 */
#section1 .news{
	position: absolute;
	top:350px;
	left: 205px;
	display: grid;
	place-content: center;
	height: 260px;
	padding: 0;
	margin: 0;
}

#section1 .hero-news-title {
	padding: 0 0 0 2em;
	margin: 0;
	font-size: 2em;
}
#section1 .company-move dt {
	color: #f15a24;
}
/*

#section1 .news table th,
#section1 .news table td {
	padding:10px 0 0 0; margin: 0;
	vertical-align: top;
	text-align: left;
	font-size: 13px; 
}

#section1 .news table th {
	width: 9em;
	padding-right: 0; 
	color: #f15a24;
}
*/







/* section2
-------------------------- */
#section2 {
	top:610px;
	background: url(images/hero/section2.webp) no-repeat 0 0;
	position:absolute;
	height: 982px;
	width:100%;
	z-index: 9;
	overflow: hidden; }

	#section2 img{
		display: block;
		position:absolute; }

	#section2 img#section2_1{
		top: 157px;
		opacity: 0;
		filter:Alpha(opacity=0); }

	#section2 img#section2_2{
		top: 191px;
		opacity: 0;
		filter:Alpha(opacity=0); }

	#section2 img#section2_3{
		top: 303px;
		opacity: 0;
		filter:Alpha(opacity=0); }

	#balloon1,
	#balloon2,
	#balloon3,
	#balloon4,
	#balloon5,
	#balloon6 {
		position:absolute; /*要素はabsoluteに*/
		padding: 0;
		text-align: left;
		opacity:0; /*初期値を設定*/
		filter:Alpha(opacity=0);
		left:0; }


	#logo { z-index:10; top:220px;}
	#balloon1 { z-index:10; top:-14px; }
	#balloon2 { z-index:13; top:68px; }
	#balloon3 { z-index:12; top:131px; }
	#balloon4 { z-index:13; top:215px; }
	#balloon5 { z-index:12; top:296px; }
	#balloon6 { z-index:15; top:525px; }



/* section3
-------------------------- */
#section3 {
	position:absolute;
	top: 1592px;
	height: 1950px;
	width:100%;
	z-index: 8;
	opacity:0;
	filter:Alpha(opacity=0);
}

	#section3 div {
		position:absolute;
		height: 630px;
		width:4100px;
		z-index: 4;}

	#section3 div#comic1 {
		top: 0;
		background: url(images/hero/story1.webp) no-repeat 0 0px;
		z-index: 5;}

	#section3 div#comic2 {
		top: 630px;
		background: url(images/hero/story2.webp) no-repeat 0 0px;
		z-index: 4;}

	#section3 div#comic3 {
		top: 1260px;
		background: url(images/hero/story3.webp) no-repeat 0 0px;
		z-index: 3;}

	#section3 .next {
		z-index: 5;}




/* section4
-------------------------- */
#section4 {
	bottom:-1450px;
	background: url(images/hero/section4.webp) no-repeat 0 -53px;
	position:absolute;
	height: 720px;
	width:1002px;
	z-index: 9;}

	#section4 .form{
		top:165px;
		left: 35px;
		position:absolute;
		width:560px; }

		#section4 .form th{
			padding: 7px 10px 0 0;
			vertical-align: top; }

		#section4 .form td {
			width:390px;
			padding: 0 0 13px 0;
			vertical-align: top; }

		*+html #section4 .form td { padding: 0 0 13px 0;}


		#section4 .form td input,
		#section4 .form td textarea{ height:20px; width:98%;}

		#section4 .form td textarea{ height:60px; }


		#section4 .red{ color:#ff0000; }

		#section4 .form span { display: block; text-align: center;}


/* section5 @調整レイヤー
-------------------------- */

#section5 {
	display: none;
	top:50%;
	background: url(images/hero/section5.webp) no-repeat center center;
	position:absolute;
	margin-top: -100px;
	height: 199px;
	width:892px;
	z-index: 1;
	opacity: 0;}

		#section5 #dash{
		display: none;
		left:892px;
		position:absolute;
		height: 166px;
		width:325px;
		opacity: 0;}


/* footer
-------------------------- */
#footer {
	display:none;
	bottom:-250px;
/* 	background: url(images/hero/footer.webp) repeat-x 0 0; */
	position:absolute;
	width: 100%;
	height: 250px;
	z-index: 10;
	font-size: 0.95em;
	color: #000;}

	#footer span {
		display: block;
		position: relative;
		width:960px;
		text-align: left;
		margin: auto;
		padding: 21px 0 0 0; }

		#footer span small{ display: block; }

	#footer span a {
		display: block;
		position: absolute;
		top: -32px;
		right: 0;
		width:102px;
		height:116px;
		margin: auto; 
		padding: 0; }


h1,p {
	margin:0 auto;
	padding:0;
	width:720px;
	display:block;
	}


.error {
	color: #ff0000;
}


/* ----------------------------------
    移転CMS
---------------------------------- */
#section1 .relocation{
    position: absolute;
    bottom: 95px;
    left: -15px;
    width: 315px;
    height: 206px;
    padding: 0 340px 50px 330px;
    margin: 0;
    text-align: left;
    background: url(images/hero/bg_relocation.webp) no-repeat 0 0;}

#section1 .relocation .inner{
    position: relative;
    padding: 0;
    margin: 0;
}

#section1 .relocation em{
    display: block;
    height: 115px;
    padding: 0;
    margin: 0;
    text-indent: -9999em;
}

#section1 .relocation span{
    display: block;
    color: #f15a24;
}

#section1 .relocation .itensimasita{
    position: absolute;
    top: 95px;
    left: 200px;
    text-decoration: none;
    color: #585858;
    font-weight: bold;
    font-size: 1.1em;
}


#section1 .relocation .relocation_image{
    display: block;
    position: absolute;
    top: 47px;
    left: -276px;
    width: 196px;
    height: 146px;
    overflow: hidden;
    text-align: center;
}

#section1 .relocation .relocation_image img{
    display: block;
    max-width: 196px;
    height: auto;
    margin: auto;
}


/* 移転CMS追加 */

#section1{ height: 950px; } /*追加した分高さ（227px）も追加*/

#section2 { top: 837px;} /*追加した分 位置調整*/
#section3 { top: 1752px; }