@charset 'UTF-8';

/* ------------------------------------
*
*Since: 2012-05-26
*Modified: 
*Editor: 
*
-------------------------------------*/

/* Style Index ========================

	01: reset
	02: common
	03: header
	04: contents
	05: topics
	06: footer
	07: clearfix

==================================== */



/*
01. reset
-------------------------------------*/
* {margin: 0; padding: 0;}

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;
    vertical-align: bottom;
    background: transparent;
}

html {
	height: 100%;
	overflow-y: scroll;
}

body {
	height: 100%;
	background-color: #fff;
	font-size: 62.5%;
}

article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary {
	display: block;
}

p, h1, h2, h3, h4, h5, h6, li, dt, dd, th, td, address {
	color: #333;
	line-height: 1;
}

ul, ol {list-style: none;}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

br {letter-spacing: 0;}

a:link {color: #0d4994; text-decoration:underline;}
a:visited {color: #666; text-decoration:underline;}
a:hover {color: #d71f2a; text-decoration:underline;}
a:active {color: #d71f2a; text-decoration:underline;}



/*
02. common
-------------------------------------*/
div#wrapper {
	position: relative;
	width: 100%;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto;
	padding: 0;
	text-align: center;
}

div.inner {
	width: 880px;
	margin: 0 auto;
}

.mb10 {
	margin-bottom: 10px;
}

.mb30 {
	margin-bottom: 30px;
}

.fLeft {
	float: left;
}

.fRight {
	float: right;
}



/*
03. header
-------------------------------------*/
header {
	position: fixed;
	_position: absolute;
	_top: expression(eval(document.documentElement.scrollTop));
	top: 0;
	left: 0;
	width: 100%;
	height: 100px;
	background-color: #fff;
	border-bottom: 4px solid #0d4994;
	z-index: 100;
}

header div.inner {
	position: relative;
	height: 100px;
	border-bottom: 4px solid #d71f2a;
}

header h1 {
	position: absolute;
	top: 20px;
	left: 0;
}

header nav {
	position: absolute;
	top: 66px;
	right: 0;
	width: 364px;
	height: 14px;
}

header nav ul li {
	float: left;
	margin-right: 30px;
}

header nav ul li:last-child {
	margin-right: 0;
}

header nav ul li.last-child {
	margin-right: 0;
}

header div#social {
	position: absolute;
	top: 20px;
	left: 240px;
	width: 170px;
	height: 65px;
}

header div#social ul li {
	float: left;
	margin-right: 12px;
}

iframe.twitter-share-button {
	width: 65px!important;
}



/*
04. contents
-------------------------------------*/
div#contents {
	width: 880px;
	margin: 0 auto;
	padding: 164px 0 0;
	text-align: left;
}

div#contents h2 {
	margin-bottom: 20px;
}

div#contents h3 {
	margin-bottom: 16px;
	font-size: 1.6em;
}

div#contents h4 {
	margin-bottom: 12px;
	font-size: 1.4em;
}

div#contents p {
	margin-bottom: 15px;
	font-size: 1.2em;
	line-height: 1.4;
}

div#contents section {
	padding-bottom: 45px;
}

div#contents section div.fLeft,
div#contents section div.fRight {
	width: 430px;
}

div#contents section ul {
	width: 880px;
}

div#contents section ul li {
	width: 430px;
}

div#contents section ul li:nth-child(odd) {
	float: left;
}

div#contents section ul li:nth-child(even) {
	float: right;
}

div#contents section ul li.odd {
	float: left;
}

div#contents section ul li.even {
	float: right;
}

div#contents section ul li p.btn {
	padding-top: 15px;
}

div#contents div#logoMark {
	width: 430px;
	padding: 15px 0;
}

div#contents div#logoMark div#logoImg {
	float: left;
	width: 44px;
	margin-right: 16px;
}

div#contents div#logoMark dl {
	float: left;
	width: 370px;
}

div#contents div#logoMark dl dt {
	margin-bottom: 12px;
	font-size: 1.4em;
	font-weight: bold;
}

div#contents div#logoMark dl dd {
	font-size: 1.2em;
	line-height: 1.4;
}



/*
05. topics
-------------------------------------*/
div#contents section#topics {
	position: relative;
	height: 320px;
	margin-bottom: 15px;
}

div#contents section#topics div#slideshow {
	position: relative;
	width: 880px;
	height: 320px;
	overflow: scroll;
	z-index: 5;
}

div#contents section#topics div#slideshow ul#nav {
	position: relative;
	width: 880px;
	top: 120px;
	z-index: 15;
}

div#contents section#topics div#slideshow ul#nav li#prev {
	float: left;
}

div#contents section#topics div#slideshow ul#nav li#next {
	float: right;
}

div#contents section#topics div#slideshow ul#nav li {
	width: 50px;
}

div#contents section#topics div#slideshow ul#slides {
	position: absolute;
	top: 0;
	left: 120px;
}

div#contents section#topics div#slideshow div#topicsFrame {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
}

div#contents section#topics div#slideshow h2 {
	position: absolute;
	top: 110px;
	left: 230px;
	z-index: 20;
}



/*
06. footer
-------------------------------------*/
footer {
	clear: both;
	width: 100%;
	margin: 0 auto;
	padding: 30px 0;
	background-color: #e9e9e9;
	text-align: center;
}



/*
07. clearfix
-------------------------------------*/
.clearfix:after,
nav:after,
div#contents:after,
div#contents section:after,
div#contents section ul:after,
div#contents div#logoMark:after,
div#footer:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix,
nav,
div#contents,
div#contents section,
div#contents section ul,
div#contents div#logoMark,
div#footer {
	display: inline-block;
}

/* Hides from IE-mac \*/
* html .clearfix,
* html nav,
* html div#contents,
* html div#contents section,
* html div#contents section ul,
* html div#contents div#logoMark,
* html div#footer {
	height: 1%;
}

.clearfix,
nav,
div#contents,
div#contents section,
div#contents section ul,
div#contents div#logoMark,
div#footer {
	display: block;
}
/* End hide from IE-mac */