@charset "UTF-8";
/*==============================================
 Mixin/Variable

================================================*/
.taR { text-align: right; }

/*==============================================
 Reset

================================================*/
body { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HiraKakuPro-W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック" !important; font-size: 15px !important; color: #555 !important; line-height: 1.7 !important; }

/* Modern browser */
html > body { font-size: 15px; }

input, textarea { font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "HiraKakuPro-W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック" !important; }

/* Reset
-------------------------*/
html, body, div, th, td, p, a, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, input, textarea { margin: 0; padding: 0; }

img { border: none; vertical-align: middle; }

table { border-collapse: collapse; }

li { list-style: none; }

/* Clearfix
-------------------------*/
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

.clearfix { display: inline-table; zoom: 1; }

/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }

.clearfix { display: block; }

/* End hide from IE-mac */
/* Common
-------------------------*/
.container { width: 990px !important; padding: 0 15px !important; }

@media screen and (max-width: 768px) { .container { width: 100% !important; } }
#header, #main, #footer { min-width: 960px; }

@media screen and (max-width: 768px) { #header, #main, #footer { min-width: 100%; } }
p { margin: 0 !important; }

.btn { padding: 0 !important; display: block !important; border: 0 !important; }
.btn img:hover { opacity: 0.8; }

::-webkit-input-placeholder { color: #bbb; }

:-moz-placeholder { color: #bbb; }

::-moz-placeholder { color: #bbb; }

:-ms-input-placeholder { color: #bbb; }

/*==============================================
 Header

================================================*/
#header .container header { position: relative; padding: 10px 0; height: 74px; }
#header .container header h1 { margin: 5px 0 0; }
#header .container header .btn { position: absolute; top: 10px; right: 0; }
@media screen and (max-width: 768px) { #header .container header { height: auto; }
  #header .container header h1 { text-align: center; }
  #header .container header h1 a { display: inline-block; }
  #header .container header .btn { display: none !important; } }
#header .container nav ul { margin: 0; }
#header .container nav ul li { display: inline-block; border-right: 1px dotted #bbb; height: 50px; line-height: 50px; width: 144px; padding: 0 1px; color: #bbb; font-size: 114%; text-align: center; }
#header .container nav ul li a { display: inline-block; color: #555; width: 100%; position: relative; }
#header .container nav ul li a:hover { color: #2495C6; text-decoration: none; border-bottom: 3px solid #2495C6; }
#header .container nav ul li a:hover:before { content: ""; position: absolute; bottom: 0; left: 45%; border: 4px solid transparent; border-bottom-color: #2495C6; }
#header .container nav ul li p { position: relative; }
#header .container nav ul li.on p { color: #2495C6; text-decoration: none; border-bottom: 3px solid #2495C6; }
#header .container nav ul li.on p:before { content: ""; position: absolute; bottom: 0; left: 45%; border: 4px solid transparent; border-bottom-color: #2495C6; }
#header .container nav ul li:first-child { border-left: 1px dotted #bbb; width: 226px; }
#header .container nav ul li:nth-child(5) { width: 174px; }
#header .container nav ul li:last-child { width: 126px; }
@media screen and (max-width: 768px) { #header .container nav ul li { width: 50% !important; font-size: 90%; }
  #header .container nav ul li:nth-child(odd) { border-left: 1px dotted #bbb; } }

/*==============================================
 Main

================================================*/
#main { padding: 30px 0 90px; }
#main .container #bread { margin-bottom: 15px; }
#main .container #bread li { display: inline; padding-right: 15px; font-size: 87%; position: relative; }
#main .container #bread li a { color: #555; text-decoration: underline; }
#main .container #bread li a:hover { text-decoration: none; }
#main .container #bread li a:after { content: ">"; position: absolute; right: 0; }
#main .container h2.title { margin-bottom: 30px; padding: 0 35px; background: url("../img/common/bg_h2.png") no-repeat; width: 960px; height: 80px; line-height: 80px; color: #fff; font-size: 166%; font-weight: bold; text-shadow: -1px -1px 1px #0D6AA2; -moz-text-shadow: -1px -1px 1px #0D6AA2; -webkit-text-shadow: -1px -1px 1px #0D6AA2; }
@media screen and (max-width: 768px) { #main .container h2.title { width: 100%; padding: 25px; background: #2495C6; background-image: none; height: auto; line-height: 1.2; } }
#main .container .contactArea { margin-top: 60px; }
@media screen and (max-width: 768px) { #main .container .contactArea { margin-top: 20px; } }
#main .container .linkArea .clm { border: 1px solid #ddd; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; box-shadow: 1px 1px 3px #aaa; -moz-box-shadow: 1px 1px 3px #aaa; -webkit-box-shadow: 1px 1px 3px #aaa; }
#main .container .linkArea .clm h3 { margin: 0 0 15px 0; padding: 5px 0 20px; border-bottom: 1px dotted #bbb; font-size: 114%; font-weight: bold; }
#main .container .linkArea .clm h3 a { color: #2495C6; }
#main .container .linkArea .clm h3 a:hover { color: #CFE1EC; text-decoration: none; }

@media screen and (max-width: 768px) { #main { padding: 30px 0 45px; } }
/*==============================================
 Footer

================================================*/
#footer .pagetop { text-align: right; }
#footer footer { padding: 30px 0; background-color: #0D6AA2; }
#footer footer .container { color: #fff; text-align: center; }
#footer footer .container ul { margin-bottom: 30px; }
#footer footer .container ul li { display: inline; color: #CFE1EC; border-right: 1px solid #6EA6C7; padding: 0 10px; }
#footer footer .container ul li:first-child { border-left: 1px solid #6EA6C7; }
#footer footer .container ul li a { color: #fff; text-decoration: underline; }
#footer footer .container ul li a:hover { text-decoration: none; }
#footer footer .container address { margin: 0; font-size: 87%; line-height: 2.0; }
#footer .copyright { padding: 10px 0; background-color: #CFE1EC; color: #0D6AA2; font-size: 87%; text-align: center; }
