@charset "utf-8";

/* lineup
-------------------------------------------------------------------------------*/

#header ul + ul + ul li small {
    font-size: 12px;
    padding-right: .5em;
}

#footer {
	padding-top: 6.5em;
}

#primary {
	width: 68em;
	float: right;
	position: relative;
}

#primary h2 {
	font-size: 10px;
	margin: 0;
	border-bottom: #cbcbcb 1px solid;
}

.en #primary h2 {
	padding-bottom: .5em;
}

#primary h2 img {
	width: 68em;
	height: 24em;
	margin-bottom: 3.5em;
}

#primary h2 > small {
	font-size: 16px;
	display: block;
	margin-bottom: -.5em;
}

#primary h2 > small {
	font-size: 18px;
	margin-bottom: 0;
	padding-top: 0;
}

#primary h2 span {
	font-size: 25px;
}

#primary h2 span small {
	font-size: 25px;
	padding-right: .5em;
}

#container {
	margin: 0 -2.5em 8em 0;
	padding-top: 3.9em;
	min-height: 39.3em;
}

/* items
-------------------------------------------------------------------------------*/

#container .items {
	font-size: 0;
}

#container .items > li {
	display: inline-block;
	vertical-align: top;
	font-size: 10px;
	margin-right: 2.5em;
}

#container .items dl {
	width: 21em;
	padding-bottom: 3.5em;
}

#container .items dl:after {
	content: "くわしく見る";
	display: inline-block;
	border: #98b5c2 1px solid;
	border-radius: .4em;
	font-size: 10px;
	font-weight: bold;
	width: 7.8em;
	line-height: 2.2;
	color: #316b86;
	margin-top: .6em;
	text-align: center;
}

.en #container .items dl:after {
	content: "See More";
	font-size: 13px;
	width: 6em;
	line-height: 1.7;
	margin-top: .46em;
	border-radius: .31em;
}

.ie #container .items a:hover dl:after{
	border: #eaf0f2 1px solid;
	color: #98b5c2;
}

#container .items dd:first-child {
	height: 18.2em;
	position: relative;
	opacity: 0;
}

/* pagenation
-------------------------------------------------------------------------------*/

ul[role="pagenation"] {
	text-align: center;
	font-size: 0;
	display: none;
}

ul[role="pagenation"] li {
	display: inline-block;
	vertical-align: top;
	font-size: 10px;
	width: 3em;
	height: 3em;
	overflow: hidden;
	text-align: center;
}

ul[role="pagenation"]:first-child li {
	margin-bottom: 2em;
}

ul[role="pagenation"]:first-child + ul + ul li {
	margin-top: .6em;
}

ul[role="pagenation"] a {
	display: block;
	font-size: 14px;
	line-height: 2.36;
	width: 2.36em;
	height: 2.36em;
	color: #000;
}

ul[role="pagenation"] a:hover {
	color: #7f7f7f;
}

ul[role="pagenation"] li.current a:hover {
	color: #000;
}

ul[role="pagenation"] li.current a,
ul[role="pagenation"] a[href*="#prev"],
ul[role="pagenation"] a[href*="#next"] {
	background: #f4c848;
}

.ie ul[role="pagenation"] a[href*="#prev"]:hover,
.ie ul[role="pagenation"] a[href*="#next"]:hover {
	background: #fae4a4;
}

ul[role="pagenation"] a[href*="#prev"]:before,
ul[role="pagenation"] a[href*="#next"]:before {
	font-family: techoicons;
    color: #fff;
    font-size: 20px;
    width: 1.5em;
    height: 1.5em;
    line-height: 1.6;
}

ul[role="pagenation"] a[href*="#prev"]:before {
	content: "\e602";
}

ul[role="pagenation"] a[href*="#next"]:before {
	content: "\e603";
}

ul[role="pagenation"] li.current a {
	cursor: default;
}

ul[role="pagenation"] li.disable a {
	display: none;
}

/* navigation
-------------------------------------------------------------------------------*/

.en ul[role="navigation"] li:first-child + li + li,
.en ul[role="navigation"] li:first-child + li + li + li {
	display: none;
}

/* fixed
-------------------------------------------------------------------------------*/

ul[role="navigation"].fixed {
	position: fixed;
	top: 0;
	width: 23.5em;
	z-index: 2;
	left: -9999px;
	border: none!important;
	border-radius: 0!important;
	margin-bottom: 0!important;
}

ul[role="navigation"].fixed.active {
	left: inherit;
}

ul[role="navigation"].fixed li {
	border-top: none!important;
	margin-top: 1em;
}

.en ul[role="navigation"].fixed li {
	margin-top: .7em;
}

ul[role="navigation"].fixed a,
.en ul[role="navigation"].fixed a {
	padding: 0!important;
}