@charset "UTF-8";

/*CSS reset*/
h1, h2, h3, h4, h5, h6, p, address,
ul, ol, li, dl, dt, dd,
table, th, td, img, form { margin:0; padding:0; border:0; list-style-type:none;}
img { vertical-align: bottom; }

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

/*clear fix*/
.clearfix:after {content: "."; display: block; clear: both; height: 0; visibility: hidden;}
.clearfix { min-height: 1px;}
* html .clearfix { height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}

/*html*/
a:link {color:#005799; text-decoration: none;}
a:visited {color: #005799; text-decoration: none;}
a:hover {color:#005799; text-decoration: underline;}
a img{ border:0;}

h1,h2,h3,h4,h5{ margin:0; padding:0;}

/*contents*/
body { font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; margin:0; padding:0; color:#444; border-top:10px solid #0366b5}


header{ width:960px; margin:0 auto; font-size:80%}
header div#logo{ display:block;background:url(images/logo.gif) no-repeat left center/100%; width:153px; height:46px; margin:7px 0 5px 0; text-indent:-9999px}

#wrapper{ font-size:80%; width:960px; padding:0; margin:0 auto; line-height:1.6em; background:white;}
#wrapper h1{ }

#contents { width:960px; padding:0; margin:0 auto; line-height:1.6em;}

#contents #main{ margin:20px 20px 40px 20px;}
#contents #main h2{ margin-bottom:30px; font-size:140%;}

#contents #main p.lead{ padding:0 10px 30px 10px}
#contents #main p.close{ padding:10px; text-align:center;}

#contents #main #clapBox{ width:584px; margin:0 auto;}
#contents #main #clapBox h2{ background:url(images/boxhead.gif) no-repeat; width:584px; height:50px; text-indent:-9999px}
#contents #main #clapBox p{ width:420px; margin:20px auto 10px auto}
#contents #main #clapBox p.by{ text-align:right; margin:5px auto}
#contents #main #clapBox form{ width:420px; margin:20px auto;}
#contents #main #clapBox form span{ padding-right:10px; vertical-align:top}
#contents #main #clapBox form input{ padding:5px; border:none; width:210px; margin:0 5px 10px 0; border:1px solid #ddd}
#contents #main #clapBox form textarea{ padding:5px; border:none; width:300px; margin-right:5px; border:1px solid #ddd}
#contents #main #clapBox form div.submit{ text-align:center; padding:10px}


/*footer*/
footer{ border-top:3px solid #0366b5; text-align:center; padding:10px; font-size:80%}

@media (max-width: 768px) {
  header div#logo{
    width: 103px;
    height: 31px;
  }
  header,
  #wrapper,
  #contents #main #clapBox form,
  #contents {width:100%;}
  #contents #main #clapBox{ width:96%; margin:0 auto;}
  #contents #main #clapBox p{ width:100%;}
}