@charset "utf-8";

/* =Reset default browser CSS.
Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
:focus {outline: 0;}

ol, ul {list-style: none;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after, q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img{border: 0;}
figure{margin:0}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
/* -------------------------------------------------------------- */

/*----------------------------------------------------------
- Common Styles
------------------------------------------------------------*/
html {
  font-size: 62.5%;
}
html, body {
  min-height: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  background: #fff;
}

body {
width: 100%;
color:#333;
font-size:14px;
font-family:verdana,"ヒラギノ丸ゴ ProN W4","Hiragino Maru Gothic ProN","メイリオ","Meiryo","ＭＳ Ｐゴシック","MS PGothic",Sans-Serif;
line-height:1.5;
-webkit-text-size-adjust: 100%;
}
/*
- Clear
------------------------------------------------------------*/
.cf::after, .content section::after {
  content: "";
  display: block;
  clear: both;
}

/* リンク設定
------------------------------------------------------------*/
a{color:#666666;text-decoration:none;}
a:hover{color:#666666;}
a:active, a:focus {outline:0;}

.btn a {
  display: inline-block;
  font-size: 14px;
  line-height: 1;
  text-align: center;
}

.btn a:hover {transition: all .3s;}

/*
- Elements
------------------------------------------------------------*/
img {
  vertical-align: top;
  max-width: 100%;
  height: auto;
}
ul, ol, dl, p {
  margin: 0 0 16px;
  margin: 0 0 1.6rem;
  padding: 0;
}
ul, ol {
  padding-left: 1.8em;
}
ul {
  list-style-type: disc;
}
ol {
  list-style-type: decimal;
}
dd {
  margin: 0;
}
.ul, nav ul {
  list-style: none;
  padding-left: 0;
}
pre {
  margin: 0;
  white-space: pre-wrap;
}
code, kbd, pre, samp {
  font-family: monospace, serif;
  font-size: 1em;
}
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
figure {
  margin: 0;
}



/* 全体
------------------------------------------------------------*/
#wrapper{
margin:0 auto;
padding:0 1%;
width:98%;
position:relative;
background:#fff;
}

.inner{
margin:0 auto;
width:100%;
}

/* ヘッダー
------------------------------------------------------------*/
#header{
position: relative;
}

/*************
/* ロゴ
*************/
.logo{
  text-align: left;
  margin: 0 40px 10px;
  padding-top: 24px;
  font-size: 22px;
  line-height: 1;
  color: #fff;
}
.logo a {color: #fff;}
.logo span{display:block;}

/*************
/* 電話番号
*************/
.info{
margin:0 40px;
font-size:20px;
color:#FFFFFF;
}
.info .btn a {padding: 6px 16px 6px 12px;border: 1px solid #333;font-size: 18px;color: #fff;}
.info .btn a::before {content: "";display: inline-block;width: 0;height: 0;margin: -4px 6px 0 0;border-style: solid;border-width: 4px 0 4px 5px;border-color: transparent transparent transparent #fff;vertical-align: middle;}
.info .tel{text-align:right;}
.info .open{font-size:11px;}

/*************
/* ロゴ+電話番号
*************/
.logo span, .info span{
font-size:.6em;
font-weight:normal;
}


/**************************
/* メイン画像（トップページ+サブページ）
**************************/
#mainBanner{
margin:0 auto 20px;
padding:0;
position:relative;
line-height:0;
}

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

.slogan{
position:absolute;
max-width:100%;
height:auto;
bottom:10px;
left:0;
padding:5px 10px;
line-height:1.4;
color:#fff;
}

.slogan h2{
padding-bottom:5px;
font-size:20px;
}


/**************************
/* グリッド
**************************/
.grid {
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
    flex-wrap: wrap;
-js-display: -ms-flexbox;
-js-display: flex;
margin-bottom: 20px;
box-sizing: border-box;
}

.box{
  position: relative;
}

.box img {max-width:100%;height:auto;}

.box h3 {padding:10px 0 5px;}

.box h3, .box p {text-align:left;}

.box p.readmore{padding:10px 5px 5px;text-align:right;}

.box p.readmore a {padding:3px 5px;border-radius:3px;background:#fff;}


/*************
メイン コンテンツ
*************/
.content section{margin-bottom: 48px;}
.content .title{margin:24px auto;padding: 0 0 .4em;border-bottom: 2px solid #ebebeb;font-size:20px;line-height: 1.2;}
.content .title span{font-size:.6em;font-weight:normal;}
.content .pic figcaption {padding-top: 6px;font-size: 13px;}
.notes {
  font-size: 13px;
}
.text-red, .required, .error_messe {
  color: #f00;
}
.text-large {
  font-size: 20px;
}

h3.heading{
font-weight:normal;
padding:0 10px;
line-height:36px;
color:#fff;
background:#2b5e92;
border-top:3px solid #666666;
border-bottom:3px solid #666666;
}

section.content img{
max-width:90%;
height:auto;
}

.alignleft{
float:left;
clear:left;
margin: 0 20px 10px 0;
}

.alignright{
float:right;
clear:right;
margin: 0 0 10px 20px;
}

.border {
  border: 1px solid #D4D4D4;
}

.principle a:hover {text-decoration: underline;}

.principle dt {text-indent: -4em;margin-left: 4em;}

.principle dd {margin: 0 0 8px 4em;margin: 0 0 .8rem 4em;}

.principle dd:last-child {margin-bottom: -16px;margin-bottom: -1.6rem;}

.banner {
  clear: both;
  margin-bottom: 48px;
}
.pageNav{
  clear: both;
  margin: 0 0 24px;
  display: -ms-flexbox;
  display: flex;
  -js-display: -ms-flexbox;
  -js-display: flex;
  -ms-flex-pack: justify;
      justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-align: stretch;
      align-items: stretch;
}
.pageNav a{display: inline-block;padding: 8px 8px;border: 1px solid #333;color: #333;line-height: 1;position: relative;}
.pageNav a:hover{background: #666;color: #fff;transition: all .3s;}
.pageNav a::after{content: "";display: inline-block;position: absolute;top: 50%;width: 8px;height: 8px;margin-top: -5px;transform: rotate(45deg);}
.pageNav .prev a {padding-left: 24px;}
.pageNav .prev a::after{left: 8px;border-left: 1px solid #666;border-bottom: 1px solid #666;}
.pageNav .prev a:hover::after{border-left-color: #fff;border-bottom-color: #fff;}
.pageNav .next a {padding-right: 24px;}
.pageNav .next a::after{right: 8px;border-right: 1px solid #666;border-top: 1px solid #666;}
.pageNav .next a:hover::after{border-right-color: #fff;border-top-color: #fff;}

/*************
テーブル
*************/
table.table{
  border-collapse:collapse;
  width: 880px;
  margin: 0 auto;
  border-top: 1px solid #666;
  border-left: 1px solid #666;
}
table.table th{padding:8px;background-color:#B3B3B3;border-right: 1px solid #666;border-bottom: 1px solid #666;text-align: center;font-weight:normal;letter-spacing:1px;line-height: 1.4;color: #151515;}
table.table td{padding:8px;background-color:#F9F9F9;border-right: 1px solid #666;border-bottom: 1px solid #666;text-align:left;line-height: 1.4;}

/*************
/* サイドバー
*************/
#sidebar ul{padding:10px;}

#sidebar li{
margin-bottom:10px;
padding-bottom:10px;
list-style:none;
border-bottom:1px dashed #ebebeb;
}

#sidebar li:last-child{
border:0;
margin-bottom:0px;
}

#sidebar li a{
display:block;
}

#sidebar ul.list li{
clear:both;
margin-bottom:5px;
padding:5px 0;
overflow:hidden;
border:0;
}

ul.list li{height:1%;}

ul.list li img{
float:left;
margin-right:10px;
}

ul.list li{
font-size:12px;
line-height:1.35;
}


/*************
/* フッター
*************/
#footer{
clear:both;
color:#fff;
margin-top: 1em;
padding-top: .5em;
}

#footer .inner{
background:#2b5e92;
overflow:hidden;
}

.copyright{
clear:both;
display: block;
padding:5px;
text-align:center;
font-style:normal;
font-size:12px;
color:#333;
}
/*---------------------------------------------
- Forms
-----------------------------------------------*/
fieldset {
  border: 1px solid #ccc;
  margin: 0;
  padding: 16px;
}
legend {
  border: 0;
  padding: 0;
}
button, input, select, textarea {
  font-family: inherit;
  font-size: 16px;
  margin: 0;
  box-sizing: border-box;
}
input {
  line-height: normal;
}
button, select {
  text-transform: none;
}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  min-width: 8em;
  padding: 12px;
  background: #666;
  border: none;
  color: #fff;
  line-height: 1;
  text-align: center;
}
button:hover, html input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover {opacity: .8;transition: all .3s;}
button[disabled], html input[disabled] {
  cursor: default;
}
input[type="checkbox"], input[type="radio"] {
  box-sizing: border-box;
  margin-right: 12px;
  padding: 0;
}
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], textarea, select {
  padding: 6px 10px;
  background-color: #fff;
  border: 1px solid #ccc;
  transition: all .3s;
  line-height: 1.5;
  box-sizing: border-box;
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="tel"]:focus, textarea:focus, select:focus {outline: none;background-color: #f1f1f1;border: 1px solid #666;}
input[type="text"]:focus::-webkit-input-placeholder, input[type="password"]:focus::-webkit-input-placeholder, input[type="email"]:focus::-webkit-input-placeholder, input[type="tel"]:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder, select:focus::-webkit-input-placeholder {color: transparent;}
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 0;
}
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], select {
  width: 100%;
}
select {
  border-radius: 5px;
}
input[type="search"] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
  box-sizing: content-box;
}
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
          appearance: none;
}
button::-moz-focus-inner, input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
textarea {
  width: 100%;
  height: 10em;
  overflow: auto;
  vertical-align: top;
  resize: vertical;
}
#formWrap{
  margin-bottom: 48px;
}
#formWrap .btn {text-align: center;}
#formWrap .btn input[type="button"], #formWrap .btn input[type="reset"], #formWrap .btn input[type="submit"] {margin: 0 16px;}
.form-content dt {margin-bottom: 4px;}
.form-content dd {margin-bottom: 16px;}
.form-content dd.form-postal, .form-content dd.form-region {width: 50%;}
table.formTable {
  margin-bottom: 32px;
}
table.formTable tbody, table.formTable tr, table.formTable th, table.formTable td {display: block;}
table.formTable th {padding-bottom: 4px;}
table.formTable td {padding-bottom: 16px;}

/* PC用
------------------------------------------------------------*/
@media only screen and (min-width: 960px){
  #header, #wrapper, .inner{
  width:960px;
  padding:0;
  margin:0 auto;
  }
  .mobile{display: none;}
  
  #wrapper{padding-bottom:20px;}
  #header{height:150px;}
  .info {
  position: absolute;
  bottom: 10px;
  right: 0;
  }
  
  nav#mainNav{
  clear:both;
  overflow:hidden;
  position:relative;
  }
  
  nav#mainNav ul {display: -ms-flexbox;display: flex;-js-display: -ms-flexbox;-js-display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;margin-bottom: 0;}
  
  nav#mainNav li{width:192px;}
  
  nav#mainNav li:nth-child(-n + 5){border-bottom: 1px solid #ebebeb;}
  
  nav#mainNav li a{display: block;height: 54px;text-align: center;font-size:13px;padding:10px 0;color:#333;background:#f1f1f1;border-left:1px solid #ebebeb;overflow: hidden;box-sizing: border-box;display: -ms-flexbox;display: flex;-js-display: -ms-flexbox;-js-display: flex;-ms-flex-pack: center;justify-content: center;-ms-flex-align: center;align-items: center;}
  
  nav#mainNav li a:hover{color:#000000;background:#B3B3B3;border-color:#B3B3B3;}
  
  nav#mainNav li a span{display:block;color:#cdcdcd;font-size:10px;}
  nav#mainNav li.active a, nav#mainNav li.active a:hover{
  color:#fff;
  background:#666666;
  border-color:#666666;
  }

  nav div.panel{
  display:block !important;
  
  }
  a#menu{display:none;}

  
  #main{
  float:right;
  width:680px;
  padding:15px 0 0 0;
  }
  
  #sidebar{
  float:left;
  width:250px;
  padding:15px 0 0 0;
  overflow:hidden;
  }
  
  #sidebar article{
  padding:7px;
  margin-bottom:20px;
  border:1px solid #ebebeb;
  overflow:hidden;
  }
  
  /* グリッド */
  .grid{
  -ms-flex-pack: justify;
      justify-content: space-between;
  }
  .grid.column2 > div {width: 460px;}
  
  #footer .inner{
  width:940px;
  padding:10px;
  }
  /* - Forms
  -----------------------------------------------*/
  button, input, select, textarea {
    font-size: 100%;
  }
  input[type="text"], input[type="password"], input[type="email"], input[type="tel"], select {
    width: 400px;
  }
  select {
    height: 35px;
  }
  textarea{
    width: 480px;
  }
  .form-content {
    width: 720px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -ms-flex-line-pack: start;
        align-content: flex-start;
    margin-left: auto;
    margin-right: auto;
  }
  .form-content dt {width: 15em;margin-right: 16px;}
  .form-content dt.sublabel {text-indent: 2em;}
  .form-content dd {min-width: 400px;}
  .form-content dd.form-postal input, .form-content dd.form-postal select, .form-content dd.form-region input, .form-content dd.form-region select {width: 200px;}
  table.formTable th, table.formTable td {display: table-cell;}
  table.formTable th {width: 15em;padding-right: 16px;padding-bottom: 16px;}
  table.formTable td {}


}


@media only screen and (max-width:959px){
  *{
    box-sizing: border-box;
  }
  .pc {display: none;}
  
  #header{padding:0 10px;}
  .info .btn {text-align: right;}
  
  nav#mainNav{
  clear:both;
  width:100%;
  margin:0 auto;
  padding:0;
  background: linear-gradient(to bottom, #f7f7f7 0%, #f0f0f0 50%, #f5f5f5 100%);
  border:1px solid #e4e4e4;
  }
  
  nav#mainNav ul{margin-bottom: 0;}

  nav#mainNav a.menu{
  width:100%;
  display:block;
  height:40px;
  line-height:40px;
  font-weight: bold;
  text-align:left;
  }

  nav#mainNav a#menu span{padding-left:10px;}
  nav#mainNav a.menu span:before{content: "→ ";}
  nav#mainNav a.menuOpen span:before{content: "↓ ";}

  nav#mainNav a#menu:hover{cursor:pointer;}

  nav .panel{
  display: none;
  width:100%;
  position: relative;
  right: 0;
  top:0;
  z-index: 1;
  }

  nav#mainNav ul li{
  float: none;
  clear:both;
  width:100%;
  height:auto;
  line-height:1.2;
  }

  nav#mainNav ul li a, nav#mainNav ul li.current-menu-item li a{
  display: block;
  padding:15px 10px;
  text-align:left;
  border-bottom:1px dashed #ccc;
  }
  
  nav#mainNav ul li a span{padding-left:10px;}
  
  nav#mainNav ul li:first-child a{
  border-top:1px solid #e4e4e4;
  }
  
  nav#mainNav ul li:last-child a{border:0;}
  
  nav#mainNav ul li.active a{color:#666666;}

  nav div.panel{float:none;}
  
  #mainBanner{margin-top:20px;}
  #subpage #mainBanner{max-width:668px;}
  
  #sidebar{padding-bottom:30px;}
  
  #sidebar article{padding:7px 0;}
  
  ul.footnav li{float:none;display:inline-block;}
  
  .grid.column2 {display: block;}
  table.table {
    width: 90%;
  }
  table.table td {width: auto;}

}


/* スマートフォン 横(ランドスケープ) */
@media only screen and (max-width:640px){
  #header{
  height:auto;
  }
  #header h1, .logo, .info{text-align:center;}
  
  .logo{
  margin: 0 auto 20px;
  font-size: 20px;
  }
  
  info{
  clear:both;
  width:100%;
  margin:0;
  }
  
  .box img{
  float:left;
  margin-right:5px;
  }
  
  .box h3{padding-top:0;}

  .alignleft, .alignright{
  float:none;
  display:block;
  margin:0 auto 10px;
  }
  
  table.table {
    width: 100%;
  }
  
  table.table th {display: block;text-align: left;}
  
  table.table tr {display: block;}
  
  table.table td {display: block;width: 100%;}
  table.table-label thead {display: none;}
  table.table-label td::after{
  	content: "";
  	display: block;
  	clear: both;}
  table.table-label td::before {content: attr(aria-label);display: block;float: left;width: 40%;margin-right: 8px;padding: 4px;background-color:#B3B3B3;color: #151515;box-sizing: border-box;}
  .pageNav .prev, .pageNav .next{-ms-flex-preferred-size: 100%;flex-basis: 100%;}
  .pageNav a{width: 100%;margin-bottom: 4px;}
}


/* スマートフォン 縦(ポートレート) */
@media only screen and (max-width:480px){
  .box img{max-width:100px;}
  #mainBanner h2, #mainBanner p{font-size:80%;}
  #sidebar p{text-align:center;}
}

/*==========================================================
サイト個別設定
一般社団法人全日本非常用発電機協会
============================================================*/

/* リンク設定
------------------------------------------------------------*/
a{color:#006837;text-decoration:none;}
a:hover{color:#006837;}
/*************
/* ヘッダー
*************/
#header {
  background:#d9e021;
}
/*************
/* ロゴ
*************/
.logo, .logo a, .info{
  color: #333;
}
/*************
/* 電話番号
*************/
.info .btn a {background: #006837;border-color: #333;}
.info .btn a:hover {background: #04B431;}
/*************
/* メイン コンテンツ
*************/
.content .title {border-bottom-color: #d9e021;}
div.item0 {
  color:#ff0000;
  padding: 0;
}
div.item1 {
  padding: 30px;
}
ol {
  margin-left:50px;
  margin-right: 30px;
  list-style-type: decimal-leading-zero;
}
.pageNav a:hover{background: #006837;}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
  background: #006837;
}
button:hover, html input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover {opacity: 1;background: #04B431;}
button, html input[type="button"], input[type="reset"], input[type="submit"] {
  background: #006837;
}
button:hover, html input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover {opacity: 1;background: #04B431;}

/* PC用
------------------------------------------------------------*/
@media only screen and (min-width: 960px){
  nav#mainNav li.active a, nav#mainNav li.active a:hover{background:#006837;border-color:#006837;}
  nav#mainNav li a:hover{color: #fff;background:#04B431;border-color:#04B431;}
  .content .pic {width: 470px;}
  .content .picM {width: 750px;}
}
@media only screen and (max-width:959px){
  nav#mainNav li.active a{color:#006837;}
  .content .pic, .content .picM {width: 100%;}
}

/*************
/* フッター
*************/
#footer {
  border-top: 1px solid #d9e021;
}