@charset "UTF-8";

body, div, p,
dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
pre,
form, input, textarea,
table, th, td{  
margin: 0px; 
padding: 0px; 
}

ul, ol{
list-style-type: none;
}

img{
border: 0px;
vertical-align: bottom;
}

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


/* common
------------------------------------*/

a {
}

body {
background-color: #E8E8E8;
color: #1F1F1F;
font-size: 80%;
text-align: center;
line-height: 1.5;
background-image: url(/img/bg.jpg);
background-repeat: repeat-y;
background-position: center top;
font-family: 'Avenir','Helvetica Neue','Helvetica','Arial','Hiragino Sans','ヒラギノ角ゴシック',YuGothic,'Yu Gothic','メイリオ', Meiryo,'ＭＳ Ｐゴシック','MS PGothic';
}

#container {
width: 950px;
margin: 0px auto;
background-color: #ffffff;
border-top: 4px solid #EA5503;
text-align: left;
}

.pagetop {
text-align: right;
}


/* layout
------------------------------------*/

#header {
padding: 27px 33px 55px;
background-image: url(/img/index/header_bg.jpg);
background-repeat: no-repeat;
background-position: right top;
}

#header h1 .leftColumn {
width: 84px;
float: left;
}

#header h1 .rightColumn {
width: 780px;
float: right;
color: #585858;
font-size:70%;
line-height: 1;
}

#header h1 .rightColumn img {
margin: 15px 0 0;
}

#contents {
padding: 0 25px 0;
}

#contents #mainArea {
float: left;
width: 650px;
background-color: #FFFFFF;
margin: 0 0 27px;
}

#contents #menu {
float: right;
width: 220px;
font-size: 90%;
margin: 0 0 27px;
}

#contents #menu p#explain {
margin: 0 0 13px;
background-color: #E8E8E8;
padding: 15px;
}

#contents #menu div#login div {
background-image: url(/img/bg01.gif);
padding: 8px;
text-align: center;
}

#contents #menu div#login div form {
background-color: #FFFFFF;
padding: 8px 0;
font-size: 90%;
}

#contents #menu div#login div form ul {
margin: 13px 0 3px;
}

#contents #menu div#login div form ul li {
padding: 0 9px 7px;
}

#contents #menu div#login div form ul li span.leftColumn {
width: 55px;
float: left;
text-align: left;
margin:4px 0 0;
}

#contents #menu div#login div form ul li span.rightColumn {
width: 130px;
float: right;
text-align: left;
}

#contents #menu div#login div form ul li span.rightColumn input {
width: 126px;
}

#menu div#login p {
margin: 5px 0 0;
font-size: 85%;
}

#footer {
padding: 14px 32px 14px;
background-color: #EA5503;
color: #FFFFFF;
line-height: 1;
}

#footer img {
margin: 0 10px 0 0;
vertical-align: bottom;
}

#footer span {
display: block;
margin: 7px 0 0;
}


/* indexPage
------------------------------------*/

.indexPage h2 {
margin: 0 0 20px;
}

.indexPage #message p#leader {
float: left;
width: 185px;
font-size:90%;
}

.indexPage #message p#leader span {
display: block;
margin: 5px 0;
text-align: center;
}

.indexPage #message div {
float: right;
width: 440px;
}

.indexPage #message div p {
margin: 0 0 15px;
}

.indexPage #bannerList {
clear: both;
margin: 0 0 17px;
}

.indexPage #bannerList li {
float: left;
width: 145px;
margin: 0 6px 0 0;
}

.indexPage #bannerList li.endLi {
margin: 0;
}


/* logIn
------------------------------------*/
#contents.logIn {
padding: 0 25px 40px;
}
.logIn {
text-align: center;
}

.logIn div {
width: 550px;
margin: 0 auto;
background-image: url(/img/bg01.gif);
padding: 10px;
}

.logIn div form {
display: block;
background-color: #FFFFFF;
padding: 18px 0 24px;
}

.logIn div form h2 {
padding: 0 0 26px;
}

.logIn div form ul {
margin: 0 0 0 55px;
font-size:170%;
}

.logIn div form ul li {
margin: 0 0 15px;
}

.logIn div form ul li span.leftColumn {
width: 124px;
display: block;
float: left;
text-align: left;
font-weight: bold;
margin: 8px 0 0;
}

.logIn div form ul li span.rightColumn {
width: 296px;
display: block;
float: left;
text-align: left;
}

.logIn div form ul li span.rightColumn input {
width: 282px;
font-size:170%;
}


/* float
------------------------------------*/

#header h1:after,
#contents:after,
.indexPage #bannerList:after,
#contents #menu div#login div form ul li:after,
.logIn div form ul li:after,
.clearfix:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}


#header h1,
#contents,
.indexPage #bannerList,
#contents #menu div#login div form ul li,
.logIn div form ul li,
.clearfix {
display: inline-block;
}

/* exlude MacIE5 \*/

* html #header h1,
* html #contents,
* html .indexPage #bannerList,
* html #contents #menu div#login div form ul li,
* html .logIn div form ul li,
* html .clearfix {
height: 1%;
}

#header h1,
#contents,
.indexPage #bannerList,
#contents #menu div#login div form ul li,
.logIn div form ul li,
.clearfix {
display: block;
}
/* end MacIE5 */

@media screen and (max-width: 480px) {
body {
	font-size: 90%;
	line-height: 1.7;
}
#container {
	width: auto;
}
#header {
	padding: 10px;
	background-image: none;
}
#header h1 {
	display: flex;
}
#header h1 .leftColumn img {
	width: 60px;
}
#header h1 .rightColumn {
	float: left;
	width: auto;
	font-size: 50%;
}
#header h1 .rightColumn img {
	width: 90%;
	margin-top: 5px;
}

#contents {
	padding: 15px;
}
#contents #mainArea {
	width: auto;
}
.indexPage #message div {
	width: auto;
	float: left;
}
.indexPage #message p#leader {
	width: 100%;
}
#leader img {
	margin: 0 auto;
	display: block;
}
.h2-message {
	width: 100%;
}
#contents #menu {
	width: auto;
	margin: 0 20px 30px;
}
#contents #bannerArea {
	float: left;
	width: 100%;
}
.indexPage #bannerList {
	margin: 0 auto;
	width: 310px;
}
.indexPage #bannerList li, .indexPage #bannerList li.endLi {
	margin: 5px;
}
#footer img {
	margin-bottom: 10px;
}
}