/* =Typography
-----------------------------------------------------------------------------*/
body {
	padding-top: 50px;
	color: #555;
	background: #f0f0f0 url(../img/bg_body.jpg);
	font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Meiryo, sans-serif;
	text-shadow: 1px 1px 1px #fff;
}
h1, h2, h3, h4, h5 {
	color: #555;
}

.attention {
	color: #888;
	font-size: 80%;
}


/* =Common
-----------------------------------------------------------------------------*/
.clearfix:after {
  content: ".";  /* 新しいコンテンツ */
  display: block;
  clear: both;
  height: 0;
  visibility: hidden; /* 非表示に */
}

.textoverflow {
	white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mt0 {
	margin-top: 0;
}

.pt0 {
	padding-top: 0;
}

.mb0 {
	margin-bottom: 0;
}

.mb15em {
	margin-bottom: 1.5em;
}


/* =LinkArea
-----------------------------------------------------------------------------*/
html body p.linkarea a {
	display: block;
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	text-align: left;
	text-indent: -9999px;
}


/* =Layout
-----------------------------------------------------------------------------*/
.wrapper {
	padding: 1.5em 0;
	width: 100%;
	max-width: 1300px;
	margin: auto;
}

.units-row {
	margin-bottom: 1.5em;
}

/* =Header
-----------------------------------------------------------------------------*/
header {
	position: fixed !important;  
    position: absolute;  
    top: 0;  
    left: 0;
	z-index: 1030;
	margin-bottom: 0;
	padding: 10px;
	width: 100%;
	height: 30px;
	background: #333;
	border-bottom: 2px #303030 solid;
	box-shadow: 0 2px 5px #aaa;
}

header h1 {
	float: left;
}

header nav {
	float: right;
	padding-right: 20px;
}


/* =Items
-----------------------------------------------------------------------------*/

div#items {
	padding: 0 30px;
}

div#items div {
	background-color: #fff;
	border-radius: 3px;
	box-shadow: 0 2px 3px #ddd;
}

div#items div.itemlink {
	background: #fff url(../img/arrow_right.png) no-repeat right center;
	position: relative;
}

div#items div.itemlink:hover {
	background: #e9f1f7 url(../img/arrow_right.png) no-repeat right center;
}

div#items dl {
	padding: 2%;
	margin-bottom: 0;
}

div#items dt {
	float: left;
	width: 22%;
	margin-right: 4%;
}

div#items dt img {
	padding: 4px;
}

div#items  dd {
	margin: 0;
	float: left;
	width: 68%;
}
div#items  dd h3 {
	width: 100%;
}

/* =Description
-----------------------------------------------------------------------------*/
.description {
	padding: 32px;
}

.description .icon img {
	padding: 0 5px 5px 0;
}

/* =Console
-----------------------------------------------------------------------------*/
#console {
	word-break: break-all;
}

/* =Copyright
-----------------------------------------------------------------------------*/
.copyright {
	text-align: right;
}

/* =Mobile (Portrait)
-----------------------------------------------------------------------------*/
@media only screen and (max-width: 767px) {
    #partners ul li { padding-bottom: 1em; text-align: center; }
    #feedback { padding: 1.5em; }
    #banner { text-align: center; margin-bottom: 1.5em; }
	#footer section, #footer nav { float: none; }
	#footer nav ul { margin-top: 1em; }
	#footer nav ul li { margin: 0; margin-right: 1em; }
	div#items { padding: 0 10px; margin-bottom: 0; }
	div#items div { padding: 0 15px;}
	div.banner { padding: 0 10px; }
	div.description { padding: 30px 20px; }
}


/* =Mobile (Landscape)
-----------------------------------------------------------------------------*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
	div#items { padding: 0 10px; margin-bottom: 0; }
	div#items div { padding: 0 15px;}
	div.banner { padding: 0 10px; }
	div.description { padding: 30px 20px; }
}


/* =Mobile (old)
-----------------------------------------------------------------------------*/
@media only screen and (max-width: 340px) {
	div#items { padding: 0 10px; margin-bottom: 0; }
	div#items dt, div#items dd { float: none; width: 100%; }
	div#items dt img { margin: 0 auto; }
	div#items div { padding: 0 15px;}
	div.banner { padding: 0 10px; }
	div.description { padding: 30px 20px; }
}