@charset "utf-8";

/* --------------- css-reset --------------- */
html{
-webkit-text-size-adjust:none;
}

body{
margin:0;
padding:0;
color:#333;
background:#ccc;
letter-spacing:0.00em;
font-size:12px;
font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
}

div,span,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,dialog,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video{
margin:0;
padding:0;
border:0;
background:transparent;
}

input,textarea{
margin:0; 
padding:0;
}

article,aside,dialog,figure,footer,header,hgroup,nav,section{
display:block;
}

nav ul{
list-style:none;
}

blockquote,q{
quotes:none;
}

blockquote:before,
blockquote:after,
q:before,
q:after{
content:'';
content:none;
}

div,h2,h3,h4,h5,h6,p,li,dt,dd,pre,code,blockquote,th,td{
word-break:break-all;
}

br{
letter-spacing:0;
}

fieldset,img{
border:0;
}

li{
list-style:none;
}

caption,th{
text-align:left;
}

h1,h2,h3,h4,h5,h6,th{
font-size:100%;
font-weight:normal;
font-style:normal;
}

input,textarea,select{
font-family:inherit;
font-size:inherit;
font-weight:inherit;
color:#333;
}

mark{
color:inherit;
}

input[type="submit"]{
cursor:pointer;
}

select{
background-color:#ffffff !important;
}

address,caption,cite,code,dfn,var{
font-style:normal;
font-weight:normal;
}

abbr,acronym{
border:0;
font-variant:normal;
}

del,u{
text-decoration:none;
}

/* ---------- text ---------- */
body{
line-height:1.4;
}

.userInput{
line-height:1.2;
word-break:break-all;
}

/* clearFix */
.clearfix:after{
content:"";
display:block;
clear:both;
}

a{
text-decoration:none;
}

a:link{
color:#258fb8;
}

a:visited{
color:#258fb8;
}

a:focus{
color:#996600;
}


/* --------------- frames --------------- */
html,
body{
height:100%;
}

#page{
width:100%;
position:relative;
height:100%;
min-height:100%;
background-color:#fff;
}

/* --- provisional-CSS : screen that is width over 640px --- */
@media screen and (max-width: 641px) {
#page{
width:100%;
margin:0;
border-right:none;
border-left:none;
}
}

@media screen and (min-width: 642px) {
#page{
width:640px;
margin:0 auto;
border-right:1px solid #ccc;
border-left:1px solid #ccc;
}
}


/* --------------- headerArea01 --------------- */
.headerArea01{
position:relative;
height:60px;
background:url(../images/bg_headerArea001.gif) repeat 0 0;
}

.headerArea01 h1{
/*position:absolute;
top:-20px;
left:10px;*/
padding:0 0 0 10px;
}


/* --------------- mainArea01 --------------- */
.mainArea01{
padding:30px 10px;
background:#fff;
}


/* --------------- heading01 --------------- */
.heading01{
background:url(../images/border001.gif) repeat-x 0 50%;
text-align:center;
}

.heading01 h2{
display:inline-block;
padding:0 10px;
background:#fff;
font-size:20px;
font-weight:bold;
}


/* --------------- contents --------------- */

/* ---- rules ---- */
.contents.rules > h3,
.contents.rules > h4,
.contents.rules > h5,
.contents.rules > p{
padding-top:20px;
}

.contents.rules.type01 > h3,
.contents.rules.type01 > h4,
.contents.rules.type01 > h5,
.contents.rules.type01 > p{
text-align:center;
}

.contents.rules .type01{
text-align:center;
}

.contents.rules .text01{
font-weight:bold;
}

.contents.rules .text02{
color:#ff0000;
}


/*---- EOF ----*/