@charset "utf-8";
/* CSS Document */
/*
=====================================
sub infomation
=====================================
*/
.breadcrumb {
  display: flex;
  width: 100%;
  margin-top: 1em;
}
.breadcrumb li {
  font-size: 1.3rem;
  margin-right: 3px;
}
.breadcrumb li::before {
  content: ">>";
}
.breadcrumb li a {
  color: #009245;
}
.page_trans {
  width: 100%;
  float: left;
  margin-top: 16px;
}
p.trans {
  float: left;
  font-weight: bold;
  font-size: 1.8rem;
}
p.trans a {
  color: #009245;
}
p.trans::before {
  content: "\f0a4";
  font-family: FontAwesome;
  display: inline-block;
  margin-right: 10px;
}
ul.sns-area {
  float: right;
  list-style-type: none;
}
ul.sns-area li {
  display: inline-block;
}
/*
=====================================
separation
=====================================
*/
.arrow-spec {
  float: left;
  width: 100%;
  background: #DEF1E6 url(../products/img/spec/img_arrow_spec.png) no-repeat center 60px;
  color: #009245;
  font-weight: bold;
  font-size: 2.4rem;
  padding: 20px 0 55px;
  margin: 40px 0;
}
.arrow-spec p {
  text-align: center;
}
/*
=====================================
head design
=====================================
*/
h2.headdecoA {
  box-sizing: border-box;
  float: left;
  border-left: solid 10px #009245;
  padding-left: 20px;
  margin-top: 24px;
}
h3.headdecoA {
  width: 100%;
  float: left;
  display: flex;
  justify-content: center;
  margin-top: 16px;
}
h3.no_img {
  width: 90%;
  float: left;
  font-size: 2.0rem;
  margin: 16px 5% auto;
  padding: 0.5em 0;
  border-bottom: solid 3px #009245;
  border-top: solid 3px #009245;
}
h4.headdecoA {
  width: 90%;
  float: left;
  font-size: 2.0rem;
  margin: 16px 5% auto;
  border-bottom: solid 2px #009245;
}
h5.headdecoA {
  width: 90%;
  float: left;
  font-size: 1.8rem;
  margin: 16px 5% auto;
  color: #009245;
}
/*
=====================================
img
=====================================
*/
.hero_img {
  margin-top: 16px;
  float: left;
}
/*
=====================================
unit
=====================================
*/
.unitA {
  width: 80%;
  padding: 0 10%;
  float: left;
  margin: 10px 0;
}
.unitA p, .unitC p {
  line-height: 1.8em;
  float: left;
}
.unitA-1 {
  width: 65%;
  padding: 0 17.5%;
  float: left;
  margin: 10px 0;
}
.unitA-1 p {
  line-height: 1.8em;
}
.unitA-2 {
  width: 95%;
  padding: 0 2.5%;
  float: left;
  margin: 10px 0;
}
.unitB {
  margin-top: 16px;
  width: 100%;
  display: flex;
  justify-content: center;
}
.unitC {
  width: 80%;
  padding: 0 10%;
  float: left;
  margin: 10px 0;
}
.unitC .img-area {
  width: 45%;
  float: left;
}
.unitC .img-area img {
  float: left;
}
.unitC .img-area img:first-of-type {
  margin-right: 5px;
}
.unitC .txt-area {
  float: left;
  width: 55%;
  box-sizing: border-box;
}
.unitD {
  width: 80%;
  padding: 0 10%;
  margin: 10px 0;
  float: left;
  /*background: #71CCA6;*/
}
.unitD .img-area {
  width: 40%;
  margin-right: 5%;
  float: left;
}
.unitD .txt-area {
  width: 55%;
  float: left;
}
.unitD .txt-area img {
  float: left;
  margin-bottom: 10px;
}
.unitD .txt-area p {
  float: left;
  width: 100%;
  margin-bottom: 5px;
}
.unitD .txt-area ul {
  float: left;
  width: 100%;
}
.unitD .txt-area li {
  font-size: 1.3rem;
  display: inline-block;
  border: solid 2px #009245;
  border-radius: 3px;
  padding: 4px;
  margin-bottom: 8px;
}
.unitE {
  width: 80%;
  padding: 0 10%;
  float: left;
  margin: 10px 0;
}
.unitE ul {
  float: left;
  padding-left: 1em;
  position: relative;
}
.unitE ul li::before {
  font-family: FontAwesome;
  content: "\f00c";
  position: absolute;
  left: -0.3em;
  color: #009245;
}
.unitE a {
  color: #009245;
  font-weight: bold;
}
.qa-001 {
  max-width: 830px;
	clear: both;
  margin-bottom: 5px;
  border: 1px solid #d6dde3;
  border-radius: 5px;
}
.qa-001 summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 1em 2em 1em 3em;
  color: #333333;
  font-weight: 600;
  cursor: pointer;
}
.qa-001 summary::before, .qa-001 div::before {
  position: absolute;
  left: 1em;
  font-weight: 600;
  font-size: 1.3em;
}
.qa-001 summary::before {
  color: #009245;
  content: "Q";
}
.qa-001 summary::after {
  transform: translateY(-25%) rotate(45deg);
  width: 7px;
  height: 7px;
  margin-left: 10px;
  border-bottom: 3px solid #777;
  border-right: 3px solid #777;
  content: '';
  transition: transform .5s;
}
.qa-001[open] summary::after {
  transform: rotate(225deg);
}
.qa-001 div {
  position: relative;
  transform: translateY(-10px);
  opacity: 0;
  margin: 0;
  padding: .3em 3em 1.5em;
  color: #333;
  transition: transform .5s, opacity .5s;
	overflow-x: auto;
}
.qa-001 ol {
  counter-reset: ansset;
}
.qa-001 ol li::before {
  counter-increment: ansset;
  content: counter(ansset)".";
}
.qa-001 ol li, .ban li {
  text-indent: -1em;
  padding-left: 1em;
}
.qa-001[open] div {
  transform: none;
  opacity: 1;
}
.qa-001 div::before {
  color: #f15a24;
  line-height: 1.2;
  content: "A";
}
.warning li::before {
  content: "\f071";
  font-family: FontAwesome;
  color: #fbb03b;
}
.ban li::before {
  content: "\f05e";
  font-family: FontAwesome;
  color: red;
}
dl.IPcomment {
  display: flex;
  flex-wrap: wrap;
}
dl.IPcomment dt {
  width: 5%;
}
dl.IPcomment dt::after {
  content: ":";
}
dl.IPcomment dd {
  width: 95%;
  margin-left: 0;
}
.tribox {
  margin: 60px 0 60px;
  width: 100%;
}
.tribox p {
  text-align: center;
  position: relative;
}
.tribox p::after {
  content: "";
  position: absolute;
  border: 20px solid transparent;
  border-top: 20px solid #009245;
  top: 120%;
  left: 47.5%;
}
.link_con {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
}
.link_con a {
  width: 48%;
  height: auto;
}


/*
=====================================
table
=====================================
*/
.tableA P {
  width: 100%;
}
.tableA figure {
  float: left;
  width: 100%;
  margin: 0;
}
.tableA table {
  float: left;
  width: 300px;
  margin: 0 12px;
  box-sizing: border-box;
  border-collapse: collapse;
}
.tableA th {
  border: solid 1px #333;
  padding: 3px;
}
.tableA td {
  border: solid 1px #333;
  padding: 3px;
  width: 100px;
}
.tableA td:not(:first-child) {
  text-align: center;
}
.tableA colgroup.tgrA {
  background: #fff;
}
.tableA colgroup.tgrB {
  background: #DEF1E6;
}
.tableB table {
  width: 100%;
  box-sizing: border-box;
  border-collapse: collapse;
  font-size: 1.2rem;
}
.tableB thead th {
  border: solid 2px #fff;
  background: #009245;
  color: #fff;
  padding: 3px;
}
.tableB tbody td {
  border: solid 2px #fff;
  text-align: center;
  padding: 5px 3px;
}
.tableB tbody tr {
  background: #B5B5B6;
}
.split td {
  width: calc(100% / 3);
}
caption.tcap {
  font-weight: bold;
  text-align: left;
  font-size: 1.6rem;
}
.tableC table {
  width: 680px;
  border-collapse: collapse;
  margin: auto;
}
.tableC th {
  text-align: center;
  border: solid 2px #333;
}
.tableC td {
  border: solid 2px #333;
}
.tb01, .tb02 {
  border-collapse: collapse;
  border: solid 2px #333;
  margin-bottom: 1em;
}
.tb01 th, .tb01 td, .tb02 th, .tb02 td {
  border: solid 1px #333;
  padding: 3px;
}
.tb01 caption, .tb02 caption {
  text-align: left;
}
.tb01 th, .tb02 th {
  font-weight: normal;
  background: #e6e6e6;
}
.tb01 tr:nth-of-type(3) {
  background: #feedd9;
}
.tb01 tr:nth-of-type(4) {
  background: #fcdbb4;
}
.tb01 tr:nth-of-type(5) {
  background: #fbc98f;
}
.tb01 tr:nth-of-type(6) {
  background: #fab769;
}
.tb01 tr:nth-of-type(7) {
  background: #f8a544;
}
.tb01 tr:nth-of-type(8) {
  background: #f7931e;
}
.tb02 tr:nth-of-type(3) {
  background: #dfedf7;
}
.tb02 tr:nth-of-type(4) {
  background: #bfdcee;
}
.tb02 tr:nth-of-type(5) {
  background: #9fcae6;
}
.tb02 tr:nth-of-type(6) {
  background: #80b8de;
}
.tb02 tr:nth-of-type(7) {
  background: #60a6d5;
}
.tb02 tr:nth-of-type(8) {
  background: #4094cd;
}
.tb02 tr:nth-of-type(9) {
  background: #2083c4;
}
.tb02 tr:nth-of-type(10) {
  background: #0071bc;
}
.tb01 tr td:nth-of-type(1), .tb02 tr td:nth-of-type(1) {
  text-align: right;
}
.tb01 tr td:nth-of-type(3), .tb01 tr td:nth-of-type(4), .tb02 tr td:nth-of-type(3) {
  background: #fff;
}