@charset "utf-8";html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height: 1}
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block}
nav ul{list-style:none}
ul, ol{list-style: none}
:focus{outline: 0}
html{margin-left:-1px;overflow-y:scroll}
/*
-----------------------------------
Link
-----------------------------------
*/
a, a:link, a:visited{color:#065d83}
a:hover, a:active{text-decoration: none}
/*
-----------------------------------
Body
-----------------------------------
*/
body{background:url(/images/bg-header.png) no-repeat center top;color:#000;font:62.5%/1.6 "Lucida Grande","Hiragino Kaku Gothic Pro","30D230E930AE30CE89D230B420Pro20W3","30e130a430ea30aa","FF2DFF3320FF3030B430B730C330AF","Osaka",verdana, arial, sans-serif;letter-spacing:.03em}
p,ul,ol,table,label,input,textarea{font-size:1.2em}
h2,h3,h4,label,caption,button{font-weight:700}
p,ol{margin-bottom:12px;text-align:justify;text-justify:distribute}
h2{margin-bottom:20px;line-height:2;font-size: 3em;border-bottom: 2px dotted #ccc}
ol li{background:url(/images/arrw.gif) no-repeat left .4em;padding-left:10px}
/*
-----------------------------------
Header
-----------------------------------
*/
header#banner{margin:0 auto;padding:0;width:980px;height:210px;position:relative}
header#banner h1{width:269px;height:70px;position: relative;top:30px}
header#banner h1 a{position:absolute;width:320px;height:70px;text-indent:-9999px;background:url(/images/logo.png) no-repeat left top}
header#banner a,a:link,header#banner a:visited{border-bottom:none}
/*
-----------------------------------
Navigation
-----------------------------------
*/
nav{width:980px;height:83px;margin:0 auto;position:relative;overflow:hidden;}
ul#menu{list-style:none;position:absolute;bottom:0;left:20px;font-size:18px;font-family:Helvetica,Arial,sans-serif;color:#999;letter-spacing:.01em}
ul#menu li{float:left;margin:0 20px 0 0}
ul#menu a{cursor:pointer;position:relative;float:left;bottom:-95px;line-height:20px;width:160px;text-decoration:none}
.icon_home,.icon_intro,.icon_blog,.icon_another,.icon_access{width:48px;height:48px;display:block;left:120px;top:50px;position:absolute}
.icon_home{background:url(/images/icon-navi.png) no-repeat top left}
.icon_intro{background:url(/images/icon-navi.png) no-repeat -48px top}
.icon_blog{background:url(/images/icon-navi.png) no-repeat -96px top}
.icon_another{background:url(/images/icon-navi.png) no-repeat -144px top}
.icon_access{background:url(/images/icon-navi.png) no-repeat -192px top}
ul#menu span.title{display:block;height:20px;text-shadow:1px 1px 1px #000;color:#B7B7B6;text-indent:10px}
ul#menu span.description{width:130px;height:85px;background-color:#B7B7B6;border:3px solid #fff;color:#fff;display:block;font-size:12px;padding:7px;-moz-box-shadow:1px 1px 4px #000;-webkit-box-shadow:1px 1px 4px #000;box-shadow:1px 1px 4px #000;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
ul#menu a:hover span.description{background-color:#54504F}
ul#menu a:hover span.title{color:#54504F}
.sponsor{position:absolute;top:120px;right:0;width:226px;height:49px}
.sponsor a{border:none}
/*
-----------------------------------
Content
-----------------------------------
*/
#wrapper{width:980px;margin:0 auto}
#content_wrap{margin-bottom:50px;overflow:hidden}
#content_main{padding-right:50px;float:left;width:620px}
aside{float:right;width:310px}
.content_activity,.content_center{float:left;width:306px}
.content_center{margin:0 30px}
/*
-----------------------------------

-----------------------------------
*/
h3{margin-bottom:12px;clear:both;font-size:1.5em}
h4{font-size:1.2em}
article{margin-bottom:12px;padding-bottom:12px;overflow:hidden}
#blog article{border-bottom:1px dotted #efefef}
.news_listing{border-bottom:1px dotted #efefef;overflow:hidden}
img.right{margin-left:20px;float:right}
img.left{margin-right:20px;float:left}
small{margin:12px 0 0; display:block; color:#999}
#content_wrap img{margin-bottom:20px;padding:2px;border:1px solid #efefef}
p.more{padding-left:22px;height:16px;line-height:16px;background:url(/images/icon.png) no-repeat left -47px;font-weight:bold}
em{font-size:.9em;font-weight:normal;font-style:normal;}
/*
-----------------------------------
Content sub
-----------------------------------
*/
aside ul{margin-bottom:20px}
aside ul li{border-bottom:1px dotted #efefef;margin-bottom:0;overflow:auto}
aside ul li img{margin:0;margin-left:-105px;float:left}
#home aside ul li{margin-bottom:15px;padding-bottom:15px;padding-left:105px}
aside ul li a{border-bottom:none}
#home aside ul li a{background:none}
aside ul li a.here,aside ul li a:hover,a:active{color:#3B715C}
.subnav a{border-bottom:none}
/*
-----------------------------------
Footer
-----------------------------------
*/
#footer-wrap{width:100%;overflow:hidden;background:#eee url(/images/bg-footer.png) repeat-x left top}
#footer-inner{margin:0 auto;width:980px;color:#666}
section#one,section#two{margin-right:40px;padding:20px 0;float:left}
section#one{width:370px}
section#two{width:240px}
section#three{padding:20px 0;width:290px;float:left;font-size:1.1em}
#footer-inner ul{width:250px;line-height:25px;float:left}
#footer-inner h5{margin-bottom:10px;font-size:1.5em}
ul.pdf li{margin-bottom:6px;padding-left:28px;background: url(/images/icon-pdf.png) no-repeat left top}
#two ul li{margin-right:10px;float:left;text-indent:-9999px;}
.twitter a{display:block;height:32px;width:32px;background:url(/images/twitter.png) no-repeat left top;}
.facebook a{display:block;height:32px;width:32px;background:url(/images/facebook.png) no-repeat left top;}
.twitter a:hover{display:block;height:32px;width:32px;background:url(/images/twitter.png) no-repeat left bottom;}
.facebook a:hover{display:block;height:32px;width:32px;background:url(/images/facebook.png) no-repeat left bottom;}
address{font-size:1.2em;font-style:normal}
#copyright{position:relative;clear:both;width:100%;margin:0 auto 0px;background:#2d2d2d}
#copyright ul{margin:0 auto;padding:20px 0;overflow:hidden;width:980px;color:#666}
#copyright ul li{float:left}
#copyright ul li.siteby{float:right}
#copyright a{color:#ccc;}
/*
-----------------------------------
Top
-----------------------------------
*/
#report{padding:10px;border-top:2px solid #CCC;border-bottom:2px solid #CCC;background:#f0f0f0}
p.report_button{margin:0 auto;padding:3px;border:1px solid #CCC;width:13em;text-align:center;background:#fff}
#mapheader{display: block;background: #0475a6;text-align: right;padding:10px}
#mapheader h3,#mapheader h4{color: #fff;margin:0}
#home iframe{padding:0;border:none}
.topmap p{margin:6px 0 0}
#paper{padding:12px;overflow:hidden;background:#e6f1fa}
/*
-----------------------------------
Sub_navi
-----------------------------------
*/
.subnav ul li a{padding:6px 10px 6px 15px;display:block;background:url(/images/arrw.gif) no-repeat 5px center;color:#000}
/*
-----------------------------------
Flow
-----------------------------------
*/
ul.flow{list-style:none;width:310px;height:522px;background: url(/images/content-bg.gif) no-repeat left top}
ul.flow li{padding:15px;border:none;width:280px;height:76px;font-size:12px}
ul.flow li h3{font-size:14px}
/*
-----------------------------------
Table
-----------------------------------
*/
table{margin-bottom:12px;border-left:1px solid #b8b8b8;width:620px;border-collapse:collapse}
caption{padding:0 0 5px;text-align:left;font-size:1.1em}
thead th,tbody th{border-right:1px solid #b8b8b8;border-bottom:1px solid #b8b8b8;border-top:1px solid #b8b8b8;text-align:left;padding:5px;background:#0475a6}
thead th{color:#fff}
thead th{border-right:1px solid #b8b8b8}
td{border-right:1px solid #b8b8b8;border-bottom:1px solid #b8b8b8;padding:5px}
tbody th{border-top:0;background:none}
span{display:block;font-size:0.8em;font-weight:normal}
/*
-----------------------------------
Slider
-----------------------------------
*/
div#feature_list h2{margin:0;padding:17px 0 0;border-bottom:none;font:700 16px/1.4 "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;text-transform:uppercase}
div#feature_list{margin-bottom:20px;border:1px solid #999;width:978px;height:300px;overflow:hidden;position:relative}
div#feature_list ul{margin:0;padding:0;position:absolute;top:0;list-style:none}
ul#tabs{left:0;z-index:2;width:343px}
ul#tabs li{font-size:14px}
ul#tabs li img{margin:18px 10px 0 0;padding:5px;border:none;float:left}
ul#tabs li a{padding:10px;border:none;color:#222;text-decoration:none;display:block;height:80px;outline:none}
ul#tabs li a:hover{color:#888}
ul#tabs li a.current{background:url('../images/feature-tab-current.png');color:#fff}
ul#tabs li a.current:hover{text-decoration: none;cursor: default}
ul#output{right: 0;width: 683px;height: 300px;position: relative}
ul#output li{position: absolute;width: 683px;height: 300px}
ul#output li img{position: absolute;top:1px;}
ul#output li a{border-bottom:none;position:absolute;bottom:10px;right: 10px;padding:8px 12px;text-decoration: none;font-size: 11px;color:#fff;background:#000;-moz-border-radius:5px;-webkit-border-radius:5px}
ul#output li a:hover{background: #D33431}
/*
-----------------------------------
Contact
-----------------------------------
*/
#contact #content_main{padding-right:50px;float:left;width:600px}
#contact aside{float:right;width:330px}
input,
textarea{font-size: 1.2em}
label {font-size: 1em}
input[type=text],
input[type=email],
textarea {width:380px;background: #eee;border: 2px solid #dae5ed;padding: 6px 5px;-webkit-box-shadow: inset -1px 1px 1px rgba(255, 255, 255, 0.65);-moz-box-shadow: inset -1px 1px 1px rgba(255, 255, 255, 0.65);box-shadow: inset -1px 1px 1px rgba(255, 255, 255, 0.65);behavior: url(/ie-css3.htc);}
textarea { overflow: auto; }
input[type=text]:hover, input[type=text]:focus,
input[type=email]:hover, input[type=email]:focus,
textarea:hover, textarea:focus {background: #ddd;border: 2px solid #b8c1c8}
#contact form input[type=submit] {margin-left:170px;border: none;cursor: pointer;padding: 8px 16px}
form label strong { color:#f60; }

/* When a form input is invalid - Used on the email type field */
input:invalid { border: 2px solid red;-webkit-transform: rotate(1deg);-moz-transform: rotate(1deg);transform: rotate(1deg);}

/* Contactform */
#contactform {overflow: hidden;}
#contactform p {overflow: hidden;}
#contactform label {float: left;padding-top: 6px;width:170px;}

.success {margin-left:170px;padding: 20px 0 20px 80px;border: 1px solid #6c3;background: #e7f7d3 url(/images/accepted.png) no-repeat 10px center;background: rgba(231, 247, 211, 0.4) url(/images/accepted.png) no-repeat 10px center;width:310px;behavior: url(/ie-css3.htc);}
.error {margin-left:170px;padding: 10px 0 10px 80px;border: 1px solid #C00;background: #ffebe8 url(/images/cancel.png) no-repeat 10px center;background: rgba(255,235,232,0.4) url(/images/cancel.png) no-repeat 10px center;color: #C00;line-height: 1.5;width:310px;behavior: url(/ie-css3.htc);}
/* Misc */
#contact input[type=submit]  {background: #444;color: #fff;padding: 5px 16px;border-radius: 10px;-webkit-border-radius: 6px;-moz-border-radius: 6px;behavior: url(/ie-css3.htc);}
#contact input[type=submit]:hover {background: #222}

.hide { display: none; }
/*
-----------------------------------
Tabs
-----------------------------------
*/
@media projection, screen{.ui-tabs-hide{display: none}}
@media print{.ui-tabs-nav{display: none}}
/* Skin */
.ui-tabs-nav{list-style: none;margin: 20px 0 0;padding: 0 0 0 4px}
.ui-tabs-nav:after{/* clearing without presentational markup, IE gets extra treatment */display: block;clear: both;content: " "}
.ui-tabs-nav li{float: left;margin: 0 0 0 1px;min-width: 84px;/* be nice to Opera */}
.ui-tabs-nav a, .ui-tabs-nav a span{display: block;padding: 0 14px;background: url(/images/tab.png) no-repeat;font-weight:700}
.ui-tabs-nav a{margin: 1px 0 0;/* position: relative makes opacity fail for disabled tab in IE */padding-left: 0;color: #27537a;font-size:1.2em;font-weight: bold;line-height: 1.2;text-align: center;text-decoration: none;white-space: nowrap;/* required in IE 6 */outline: 0;/* prevent dotted border in Firefox */}
.ui-tabs-nav .ui-tabs-selected a{position: relative;top: 1px;z-index: 2;margin-top: 0;color: #000}
.ui-tabs-nav a span{width: 64px;/* IE 6 treats width as min-width */min-width: 64px;height: 18px;/* IE 6 treats height as min-height */min-height: 18px;padding-top: 6px;padding-right: 0}
*>.ui-tabs-nav a span{/* hide from IE 6 */width: auto;height: auto}
.ui-tabs-nav .ui-tabs-selected a span{padding-bottom: 1px}
.ui-tabs-nav .ui-tabs-selected a, .ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active{background-position: 100% -150px}
.ui-tabs-nav a, .ui-tabs-nav .ui-tabs-disabled a:hover, .ui-tabs-nav .ui-tabs-disabled a:focus, .ui-tabs-nav .ui-tabs-disabled a:active{background-position: 100% -100px}
.ui-tabs-nav .ui-tabs-selected a span, .ui-tabs-nav a:hover span, .ui-tabs-nav a:focus span, .ui-tabs-nav a:active span{background-position: 0 -50px}
.ui-tabs-nav a span, .ui-tabs-nav .ui-tabs-disabled a:hover span, .ui-tabs-nav .ui-tabs-disabled a:focus span, .ui-tabs-nav .ui-tabs-disabled a:active span{background-position: 0 0}
.ui-tabs-nav .ui-tabs-selected a:link, .ui-tabs-nav .ui-tabs-selected a:visited, .ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited{/* @ Opera, use pseudo classes otherwise it confuses cursor... */cursor: text}
.ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active, .ui-tabs-nav .ui-tabs-deselectable a:hover, .ui-tabs-nav .ui-tabs-deselectable a:focus, .ui-tabs-nav .ui-tabs-deselectable a:active{/* @ Opera, we need to be explicit again here now... */cursor: pointer}
.ui-tabs-disabled{opacity: .4;filter: alpha(opacity=40)}
.ui-tabs-panel{border-top: 1px solid #97a5b0;padding: 2em 8px;background: #fff;}
/* Additional IE specific bug fixes... */
* html .ui-tabs-nav{/* auto clear, @ IE 6 & IE 7 Quirks Mode */display: inline-block}
*:first-child+html .ui-tabs-nav{/* @ IE 7 Standards Mode*/display: inline-block}
/*
-----------------------------------
Gallery
-----------------------------------
*/
.gallery-thum{width:144px;float:left}
.gallery-thum ul{float:left}
.gallery-thum ul li{width:144px;float:left}
.gallery-thum ul li img{margin-bottom:15px}
.gallery-thum a{border-bottom:none}
.gallery-main{width:450px;float:right}
.gallery-main img{float:right}
#content_wrap .gallery-thum img{margin-bottom:16px}
/*
-----------------------------------
PHP
-----------------------------------
*/
.prev{margin-right:20px;float:left}
#btn-box input{margin-top:10px;padding: 4px;border:1px solid #818181;width: 7em;background:#cbe5e5;font-size:1em;cursor:pointer;-webkit-border-radius: 6px;-moz-border-radius: 6px}
#btn-box input:hover{background:#eff5f5}
p.link_back{margin-top:20px;padding-left:12px;background:url(/images/arrw.gif) no-repeat 5px center;font-size:1em}
#twitterbtn{float:left;}
