﻿@charset "UTF-8";
@import "reset5.css";

body { color:#000; line-height:1; background-color: #fff; padding: 0; position: relative; min-height: 100%; text-align: center; overflow: hidden }
html { min-height: 100%; }

/** html body { font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif }
*:first-child+html body { font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif }*/
* html body { font-family: Georgia, "Times New Roman", Times, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif }
*:first-child+html body { font-family: Georgia, "Times New Roman", Times, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif }
html:not(:target) body { font-family: serif; }

* {word-wrap: break-word; }
img { -ms-interpolation-mode: bicubic; }
/* !font-size 12px default setting */
body { font-size:12px; line-height: 1 }
body p { line-height: 1.73em }
*:first-child+html body { font-size:77%;}
* html body { font-size:77%;}

iframe { overflow: hidden }

/* !clearfix */
hr { display: none; }

.cfix { /zoom : 1; }
.cfix:after { content : ''; display : block; clear : both; }

/* スクロールバーの有無によるズレ対策 */
html {
	overflow-y: scroll;
}

#wrapper { position: relative; width: 100%; height: 100% }

#wrap1 { position: absolute; left: 0; top: 0; width: 100%; }

#lang_sel { position: absolute; left: 50%; top: 50%; padding: 30px 0 0; margin: -45px 0 0 -107px; background:url(../img/top_t.png) no-repeat 22px 0 }
#lang_sel li { float: left; cursor: pointer }
#lang_sel li.ja { background:url(../img/top_lang_line.png) no-repeat 93px 20px }

#symbol { position: absolute; left: 0; top: 0;  width: 100%; }
#symbol span { width: 33%; display: block; float: left; background-color: #b5b6b6 }
#symbol span.bl { width: 33%; background-color: #02328d }
#symbol span.wh { width: 0%; background-color: #fff }

#symbol_cv { position: absolute; left: 0; top: 0; width: 100%; height: 34%; background-color: #fff }



#wrap2 { position: absolute; left: 0; top: 0; display: none }
#sym1 { width: 300px; height: 100%; position: absolute; left: 0; top: 0; background-color: #b5b6b6; overflow: hidden }
#sym1 span.sq { background-color: #02328d }

#sym2 { width: 300px; height: 100%; position: absolute; left: 300px; top: 0; background-color: #b5b6b6; overflow: hidden }
#sym2 span.sq { background-color: #e4007f }

#sym3 { width: 300px; height: 100%; position: absolute; right: 0; top: 0; background-color: #b5b6b6; overflow: hidden }
#sym3 span.sq { background-color: #fff100 }

span.sq { width: 300px; height: 300px; position: absolute; left: 0; top: 33.3%; display: block }
span.sqw1 { width: 300px; height: 300px; position: absolute; left: 0; top: 33.3%; display: block }
span.sqw2 { width: 300px; height: 300px; position: absolute; left: 0; top: 33.3%; display: block }
div.sym_cv { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #fff }


#wrap3 { position: absolute; left: 0; top: 0; width: 100%; }
#wrap3 .symLine { width: 100px; height: 3200px; position: absolute; left: 0; top: 0 }
#wrap3 .sl1 { background: url(../img/top_sym_bg01.png) repeat-y 0 0 }
#wrap3 .sl2 { background: url(../img/top_sym_bg02.png) repeat-y 0 0 }
#wrap3 .sl3 { background: url(../img/top_sym_bg03.png) repeat-y 0 0 }

#wrap3 .symLine_cv { width: 100px; height: 100px; position: absolute; left: 0; top: 0; background-color: #fff }

#top_bd { width: 390px; height: 436px; background: url(../img/top_bd.png) no-repeat 0 0; position: absolute; left: 50%; top: -466px; margin-left: -195px; padding: 30px 0 0; text-align: center; }

#topNav { width: 240px; margin: 55px auto 0; }
#topNav li { margin: 0 0 25px; }
#topNav li a { padding: 5px; display: block; text-align: center }