@charset "utf-8";
/* CSS Document */


/* STYLE */
* {
margin: 0;
padding: 0;
}

html,body{
height:100%;
color: #000000;
background: #EEEEEF url(../images/bk.gif) center repeat-y;
font-family: sans-serif;
font-weight: normal;
}

p {
font-size: 11pt;
line-height: 140%;
padding: 0.2em;
}

h1 {
font: bold 20pt sans-serif;
line-height: 120
}

h2 {
font: bold 18pt sans-serif;
line-height: 120%;
}

/* SPACE */
.cr { clear: both; }
.ss { margin-bottom:10px; }
.sm { margin-bottom:30px; }
.sl { margin-bottom:60px; }

/* CONTENTS */
#container {

background-color: #FFFFFF;
margin: 0 auto;
}

/* TOPZOZE */
#topzone {

margin-top: 20px;
margin-bottom: 0px;
}

#topzone img {
  max-width: 100%;
  height: auto;
}

/* HEADER */
#header {

height: 180px;
margin-bottom: 30px;
}

#headertext {
color: #000000;
font: normal 9pt sans-serif;
}

/* PAGE */
#contents {
clear: both;
height: auto;
}

#lb {
float: left;

height: auto;
padding: 0;
margin-bottom: 5px;
}

/* BLOCK */
#infospace {
margin-bottom: 20px;
}

.infospaceL {
float: left;
width: 280px;
padding-bottom: 0.25em;
}

.infospaceC {
float: left;
width: 280px;
margin-left: 40px;
padding-bottom: 0.25em;
}

.infospaceR {
float: right;
width: 280px;
margin-left: 6px;
padding-bottom: 0.25em;
}

.infoPic {margin-left: 8px; margin-top: 8px;}
.infoTtl {color: #FFFFFF; background-color: #383C3C; font: normal 12pt sans-serif; text-align: left; padding: 0.25em;}
.infoTex {color: #000000; font: normal 9pt sans-serif; margin-top: 10px; margin-bottom: 4px; margin-left: 4px; line-height: 150%; text-align: left;}

/* FOOTER */
#footer {
display: block;
bottom: 0;

height: 40px;
color: #000000;
margin: 0 auto 0 auto;
padding-bottom: 0.5em;
font: normal 9pt sans-serif;
}

#footer a {
color: #000000;
text-decoration: underline;
}

#footer a:hover {
color: #FF0000;
text-decoration: underline;
}


/* FONTSTYLE */
.small {
text-align: left;
font-size: 8pt;
font-weight: normal;
}

.medium {
text-align: left;
font-size: 9pt;
font-weight: normal;
line-height: 160%;
}

.bold {
font-weight: bold;
}

.basic {
text-align: left;
font-size: 10pt;
font-weight: normal;
}

.middle {
text-align: left;
font-size: 11pt;
font-weight: 600;
}

.large {
text-align: left;
font-size: 14pt;
font-weight: normal;
}

/* SETTING */
.red {
color: #D40F19;
}

.wht {
color: #FFFFFF;
}

.left {
text-align: left;
padding-left: 2px;
}

.right {
text-align: right;
padding-right: 2px;
}

.table { 
border-collapse: collapse;
border: 1px #CCCCCC solid;
} 

.table TD { 
border: 1px #CCCCCC solid;
padding: 0.2em;
} 

.border {
display: block;

height: 8px;
border-top: 1px dotted #333;
}

/* レスポンシブデザイン用の追加 */
@media screen and (max-width: 768px) {
  #container {
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
  }

  #header {
    height: auto;
  }

  #header img {
    width: 100%;
    height: auto;
  }

  #lb {
    float: none;
    width: 100%;
  }

  .infospaceL, .infospaceC, .infospaceR {
    float: none;
    width: 100%;
    margin-left: 0;
    margin-bottom: 20px;
  }

  table {
    width: 100%;
  }

  .table {
    font-size: 9pt;
  }

  #topzone {
    text-align: center;
  }

  #topzone img {
    max-width: 100%;
    height: auto;
  }
}

@media screen and (max-width: 480px) {
  p, .infoTex {
    font-size: 10pt;
  }

  .table {
    font-size: 8pt;
  }
}