@import url("reset.css");
@import url("font-awesome.min.css");

html,body{  font:15px/1.5em 'Microsoft JhengHei','Meiryo',sans-serif; color:#636363;}
html{ position:relative; min-height:100%;background:url(../images/bg.jpg) center 0 no-repeat #e6f1f7 fixed;}
body{ margin-bottom: 60px;}
.container{ width:1000px; margin:0 auto;}
header{ position:fixed; top:0; width:100%; background:#fff; padding:1em 0;}
header .logo{ background:url(../images/logo.png); width:163px; height:47px; display:inline-block;}
header ul.outlink{ float:right; display:inline-block;}
header ul.outlink li{ display:inline-block; background:url(../images/outlink.png); width:23px; height:30px; margin-left:.6em; opacity:.6; transition:all .6s;}
header ul.outlink li:hover{ opacity:1;}
header ul.outlink li.o02{ background-position:-23px 0; width:42px;}
header a{ display:block; width:100%; height:100%; background:url(../images/transparent.png);}

footer{ position:fixed; bottom:0; width:100%; padding:1em 0; font-size:.8em; color:#a6a6a6;}

.main{ margin-top:100px; z-index:1;}
.main .left ,.main .right{ display:inline-block; *display:inline; *zoom:1; vertical-align:top;}
.main .left{ width:47.8%; }
.main .right{ width:51%;}

.main .content .top{ background:url(../images/main_top.png) no-repeat; width:100%; height:404px; margin-bottom:1.5em;}
.main .content .about{ margin-bottom:3.5em;}
.main .content .place{ height:500px;}
.main .content h1{ font-weight:300; color:#5b97aa; font-size:1.33em; border-bottom: dashed 1px #5b97aa; padding-bottom:.4em; margin-bottom:1em;}
.main .content h2 ,.main content p strong{ font-size:1em; font-weight:600; color:#464646;}
.main .content p span{ font-size:.86em;}
.main .content p a{color:#5b97aa; font-weight:600; text-decoration:none;}
.main .content p a:hover{ text-decoration:underline;}
.main .content ul li{ list-style-type:none; margin-bottom:1.5em;}
.main .content .place ul li a{ background:url(../images/gmap.png); width:16px; height:16px; display:inline-block; margin-left:.1em;}
.main .content ol{ margin-left:1.65em;}
.main .content ol li{ list-style-type:decimal; margin-bottom:0;}
.main .content .place p:before{ content:'\f041'; color:#f2766d; font-family:FontAwesome; margin-right:.4em;}
.main .content .place p span{ font-size:.86em; color:#c2c2c2;}

.main .pixma{ background:url(../images/pixma.png); width:301px; height:218px; position:fixed; top:392px; left:50%; margin-left:-360px; }
.main ul.pframe{ margin-left:-54px; margin-top:-6px; position:fixed; z-index:-1;}
.main ul.pframe li{ width:167px; height:256px; position:absolute; top:0; left:0;}
.main ul.pframe li.p01{background:url(../images/pframe_01.png);}
.main ul.pframe li.p02{background:url(../images/pframe_02.png);}
.main ul.pframe li.p03{background:url(../images/pframe_03.png);}
.main ul.pframe li.p04{background:url(../images/pframe_04.png);}

.main ul.menu{ position:fixed; top:192px; left:50%; margin-left:-331px;}
.main ul.menu li{ background:url(../images/menu.png); width:248px; height:18px; margin-bottom:1em; transition:.8s ease-in-out;}
.main ul.menu li a{ display:block; width:100%; height:100%; background:url(../images/transparent.png);}
.main ul.menu li.m01{ background-position:0 0; height:35px;}
.main ul.menu li.m02{ background-position:0 -35px;}
.main ul.menu li.m03{ background-position:0 -53px;}
.main ul.menu li.m04{ background-position:0 -71px;}
.main ul.menu li.m01:hover ,.main ul.menu li.m01.on{ background-position:-248px 0; height:35px;}
.main ul.menu li.m02:hover ,.main ul.menu li.m02.on{ background-position:-248px -35px;}
.main ul.menu li.m03:hover ,.main ul.menu li.m03.on{ background-position:-248px -53px;}
.main ul.menu li.m04:hover{ background-position:-248px -71px;}