@charset "UTF-8";
/*! サイトベース */
.cl, #head .head-inr, #head-config-balloon ul { display: inline-block; min-height: 1%; display: block; *zoom: 1; }
.cl:after, #head .head-inr:after, #head-config-balloon ul:after { content: " "; display: block; height: 0; clear: both; visibility: hidden; font-size: 0; }
* html .cl, * html #head .head-inr, #head * html .head-inr, * html #head-config-balloon ul { height: 1%; }

/*----------------------------------
reset
----------------------------------*/
dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote { margin: 0; padding: 0; }

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

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

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

fieldset, img { border: 0; vertical-align: top; }

ol, ul { list-style: none; }

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

abbr, acronym { border: 0; }

a:link { color: #424242; text-decoration: none; }

a:visited { color: #424242; text-decoration: none; }

a:hover { color: #424242; cursor: pointer; }

a:active { color: #424242; text-decoration: underline; }

a:active, a:focus { outline: none; }

li img, dt img, dd img { vertical-align: top; }

input[type="text"], input[type="password"], input[type="submit"] { appearance: none; -moz-appearance: none; -ms-appearance: none; -webkit-appearance: none; }

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

body { min-width: 960px; margin: 0; padding: 0; text-align: center; font: 12px/1.6 "ヒラギノ角ゴ Pro W3" , "Hiragino Kaku Gothic Pro" , "メイリオ" , Meiryo , "Meiryo UI" , "ＭＳ Ｐゴシック" , "MS PGothic" , sans-serif; color: #424242; height: 100%; box-sizing: border-box; }

body.open { overflow-x: hidden; }

body.fix { position: relative; }

html,body { height: 100%; }

article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; }

/*----------------------------------
haeder
----------------------------------*/
.open #head { left: -30%; }

#head { position: fixed; top: 0; left: 0; z-index: 10000000; width: 100%; background: #fff; box-sizing: border-box; -ms-transition: .4s; -moz-transition: .4s; -webkit-transition: .4s; transition: .4s; border-bottom: 1px solid #D6D6D6; }
#head img { max-width: 100%; height: auto; vertical-align: middle; }
#head .head-inr { min-width: 960px; padding: 5px 16px; box-sizing: border-box; }
#head #logo { float: left; height: 30px; }
#head .head-r { float: right; width: 800px; text-align: right; letter-spacing: -.40em; }
#head .head-r p,#head-config { margin-left: 10px; display: inline-block; vertical-align: middle; letter-spacing: normal; }
#head .head-r input[type="search"] { width: 180px; box-sizing: border-box; padding: 7px 5px; border: 1px solid #e6e6e6; border-radius: 16px; -moz-border-radius: 16px; -ms-border-radius: 16px; -o-border-radius: 16px; -webkit-border-radius: 16px; background: #fff url(../images/ico-search.png) 95% 50% no-repeat; background-size: 14px auto; }
#head .head-r .signout-btn { width: 100px; color: #fff; }
#head .head-r .signout-btn a { display: block; height: 30px; font-weight: bold; background: #d9534f; text-align: center; color: #fff; line-height: 30px; }
#head .head-r .signout-btn a span { display: inline-block; padding-right: 25px; background: #d9534f url(../images/ico-signin.png) 100% 50% no-repeat; background-size: 14px auto; }
#menu { border: 1px solid #d6d6d6; }
#menu a { display: block; padding: 5px; }
#menu img { display: block; }

/*----------------------------------
haeder headConfig
----------------------------------*/
#head-config { position: relative; }
#head-config .head-narrow { position: relative; }
#head-config .head-narrow:before { content: " "; position: absolute; top: 50%; right: 7px; width: 0; height: 0; border: 4px solid transparent; border-top: 4px solid #fff; }
#head-config .head-narrow input { display: inline-block; width: 100px; height: 30px; padding-right: 10px; font-weight: bold; color: #fff; line-height: 30px; text-align: center; border: none; line-height: 1; background: #007dc5; box-sizing: border-box; }
#head-config .head-free {
  display: inline-block;
  vertical-align: middle;
  letter-spacing: normal;
  margin-right: 20px;
}
#head-config .head-free input:first-child {
  width: 270px;
  padding: 6px 8px;
  box-sizing: border-box;
  border-width: 0 0 1px 0;
  border-style: solid;
  border-color: #d6d6d6;
}
#head-config .head-free > input {
  display: inline-block;
  vertical-align: middle;
  width: 60px;
  height: 30px;
  font-weight: bold;
  line-height: 30px;
  text-align: center;
  border: none;
  line-height: 30px;
  background: #d6d6d6;
  box-sizing: border-box;
}
#head-config .head-free span {
  display: inline-block;
  width: 270px;
  position: relative;
  top: -0.15em;
  letter-spacing: -.40em;
}
#head-config .head-free span:before {
  content: " ";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 1px;
  background: #007dc5;
  transition: 0.4s;
}
#head-config .head-free .in-for:before {
  width: 100%; height: 1px; background: #08ae9e;
}
#head-config-balloon { display: none; position: absolute; top: 100%; right: 0; z-index: 998; width: 500px; margin-top: 15px; padding: 20px; text-align: left; box-sizing: border-box; background: rgba(0,0,0,.7); }
#head-config-balloon:before { content: " "; position: absolute; top: -20px; right: 8px; border: 10px solid transparent; border-bottom: 10px solid rgba(0,0,0,.7) }
#head-config-balloon ul { margin-bottom: 20px; color: #fff; }
#head-config-balloon li { float: left; margin-right: 15px; }
#head-config-balloon li:last-child { margin-left: 0; }
#head-config-balloon dl { width: 100%; margin-top: 25px; letter-spacing: -.40em; }
#head-config-balloon dt,#head-config-balloon dd { display: inline-block; vertical-align: middle; letter-spacing: normal; }
#head-config-balloon dt { width: 36%; color: #fff; }
#head-config-balloon dd { width: 64%; }
#head-config-balloon select { width: 100%; padding: 8px; }
#head-config-balloon input[type=checkbox] { position: relative; top: 0.1em; margin-right: 5px; }
#head-config-balloon input[type=text] { width: 100%; padding: 4px 8px; text-align: left; color: #fff; border: solid #fff; border-width: 0 0 1px 0; box-sizing: border-box; background: transparent; }
#head-config-balloon .config-date { margin-top: 20px; color: #fff; }
#head-config-balloon .config-date dt { width: 15%; }
#head-config-balloon .config-date dd { width: 82%; margin-left: 10px; }
#head-config-balloon .config-date input { width: 34%; color: #fff; font-size: 100%; }
#head-config-balloon .config-date img { width: 20px; height: auto; margin-left: 5px; }
#head-config-balloon #config-submit { margin: 40px 0 0 0; display: block; }
#head-config-balloon #config-submit input { width: 100%; border: none; height: 40px; background: #d9534f; color: #fff; font-weight: bold; }


/*----------------------------------
wrapper
----------------------------------*/
#wrapper { position: relative; z-index: 1; height: 100%; padding-top: 41px; box-sizing: border-box; background: #fff; left: 0; text-align: left; font-size: 100%; -ms-transition: .4s; -moz-transition: .4s; -webkit-transition: .4s; transition: .4s; }
#wrapper a img { width: 26px; height: auto; -moz-transition: .7s; -webkit-transition: .7s; transition: .7s; }
#wrapper a:hover img { opacity: 0.8; filter: alpha(opacity=80); -ms-filter: "alpha(opacity=80)"; }
#wrapper.fix { height: 100%; }
#wrapper.no-header { padding-top: 0; }
.open #wrapper { left: -30%; }
#logo a img { width: auto; height: 100%; }

/*----------------------------------
main
----------------------------------*/
#main { position: relative; z-index: 1;  min-height: -moz-calc(100% - 41px); min-height: -webkit-calc(100% - 41px); min-height: calc(100% - 41px); padding-bottom: 40px; box-sizing: border-box; }

/*----------------------------------
gnav
----------------------------------*/
.open #gnav { opacity: 1; }

#gnav { opacity: 0; position: fixed; width: 30%; top: 0; right: 0; height: 100%; -ms-transition: .4s; -moz-transition: .4s; -webkit-transition: .4s; transition: .4s; }
#gnav .gnav-inr { height: 100%; overflow: hidden; background: #e6e6e6; }
#gnav .gnav-inr > ul > li { text-align: left; border-bottom: 1px solid #fff; }
#gnav .gnav-inr > ul > li > a { position: relative; display: block; padding: 10px 0 10px 20px; }
#gnav .gnav-inr > ul > li > a:before { content: " "; position: absolute; top: 50%; margin-top: -7.5px; right: 30px; width: 8px; height: 8px; border-top: 2px solid #424242; border-right: 2px solid #424242; transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); }
#gnav .gnav-inr > ul > li ul { display: none; }
#gnav .gnav-inr > ul > li ul li { background: #efefef; border-top: 1px solid #fff; }
#gnav .gnav-inr > ul > li ul li a { position: relative; display: block; padding: 10px 0 10px 40px; }
#gnav .gnav-inr > ul > li ul li a:before { content: " "; position: absolute; top: 50%; margin-top: -7.5px; right: 30px; width: 8px; height: 8px; border-top: 2px solid #424242; border-right: 2px solid #424242; transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); -webkit-transform: rotate(45deg); }
#gnav .gnav-inr > ul > li ul li:first-child { border-top: none; }
#gnav .gnav-inr .slide-menu > a:before { content: " "; transition: all 0.2s; -ms-transition: all 0.2s; position: absolute; top: 50%; margin-top: -7.5px; right: 30px; width: 8px; height: 8px; border-top: 2px solid #424242; border-right: 2px solid #424242; transform: rotate(135deg); -moz-transform: rotate(135deg); -ms-transform: rotate(135deg); -o-transform: rotate(135deg); -webkit-transform: rotate(135deg); }
#gnav .gnav-inr .slide-menu.active > a:before { transform: rotate(-45deg); -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); }

/*----------------------------------
footer
----------------------------------*/
footer { -ms-transition: .4s; -moz-transition: .4s; -webkit-transition: .4s; transition: .4s; background: #d71920; text-align: center; color: #fff; height: 40px; line-height: 1; }

.foot-inr { min-width: 960px; letter-spacing: -.40em; text-align: center; padding-top: 7px; }
.foot-inr p { display: inline-block; vertical-align: middle; letter-spacing: normal; }
.foot-inr p:first-child { margin-right: 20px; }
.foot-inr small { font-size: 94%; }

footer.fix { position: fixed; width: 100%; bottom: 0; right: 0; }

.open footer.fix { left: -30%; }