@charset "utf-8";
/* CSS Document */
/*
========================================================
EDFC series
========================================================
*/
/* 対応アイテム一覧エリア */
.compatible-product {
  background-color: #DEEDD1;
  width: 100%;
	box-sizing: border-box;
  text-align: left;
  margin: 15px auto 15px;
  padding: 25px 0 12px 25px;
  border-radius: 15px;
  -webkit-border-radius: 15px;
	float: left;
}
.compatible-product p {
  margin-bottom: 8px;
}
/* 緑の角丸ボタン（小） */
.compatible-product a {
  display: inline-block;
  position: relative;
  /* 子要素にabsoluteを使うときは、親要素にこれを入れる */
  padding: 8px 10px 8px 20px;
  margin: 0 15px 8px 0;
  color: #FFF;
	text-decoration: none;
  font-weight: bold;
  background-color: #009245;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
.compatible-product a:hover {
  color: #ccc;
  background-color: #007531;
}
/* ボタン左の三角 */
.compatible-product a:before {
  display: block;
  content: "";
  /* これがないと表示されません */
  position: absolute;
  top: 50%;
  left: 10px;
  width: 0;
  height: 0;
  margin-top: -5px;
  border: 5px solid transparent;
  border-left: 5px solid #fff;
}
/* EAP価格表・シリーズ機能一覧リンクボタン */
.eap-btn-area img {
  padding: 0 2px 10px;
}

/* 価格表テーブル */
.price-list {
  border-collapse: collapse;
  margin: 20px auto 40px;
  border-top: 1px solid #999999;
  border-left: 1px solid #999999;
  width: 700px;
	table-layout: fixed;
}
.price-list td {
  border-bottom: 1px solid #999999;
  border-right: 1px solid #999999;
  text-align: center;
  background-color: #ffffff;
  padding: 5px;
  /*font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", sans-serif;*/
  font-size: 12px;
}
.price-list th {
  border-bottom: 1px solid #999999;
  border-right: 1px solid #999999;
  text-align: center;
  background-color: #DEEDD1;
  padding: 5px 0;
}
.price-list th:nth-child(1) {
  width: 310px;
}
.price-list th:nth-child(2), .price-list th:nth-child(3) {
  width: 100px;
}
.price-list td.biko {
  text-align: left;
}
.annotation {
  text-align: left;
  padding-left: 35px;
  padding-top: 10px;
  color: #F33;
}
/*動画挿入*/
button.btn-area02 {
  background: none;
  color: #009245;
  font-weight: bold;
	font-size: 1.6rem;
  border: solid 5px #009245;
  border-radius: 5px;
  cursor: pointer;
  padding: 0;
  appearance: none;
  display: block;
  text-align: center;
  width: 760px;
  height: 50px;
  margin-left: 25px;
  position: relative;
}
button.btn-area02::before {
  content: "";
  position: absolute;
  top: 40%;
  left: 5%;
  width: 7px;
  height: 7px;
  border-top: solid 2px #009245;
  border-right: solid 2px #009245;
  transform: rotate(45deg);
  transition: transform .3s ease-out;
}
button.btn-area03 {
  background: none;
  color: #006837;
  font-weight: bold;
	font-size: 1.6rem;
  border: solid 5px #006837;
  border-radius: 5px;
  cursor: pointer;
  padding: 0;
  appearance: none;
  display: block;
  text-align: center;
  width: 760px;
  height: 50px;
  margin-left: 25px;
  position: relative;
}
button.btn-area03::before {
  content: "";
  position: absolute;
  top: 40%;
  left: 5%;
  width: 7px;
  height: 7px;
  border-top: solid 2px #006837;
  border-right: solid 2px #006837;
  transform: rotate(45deg);
  transition: transform .3s ease-out;
}
button.is-open::before {
  transform: rotate(135deg);
  transition: transform .3s ease-out;
}
button.is-openA::before {
  transform: rotate(135deg);
  transition: transform .3s ease-out;
}
ul.movie-areaA {
  width: 730px;
  margin-left: 40px;
  margin-right: 40px;
}
.movie-areaA li {
  padding-bottom: 0;
  transition: padding-bottom .3s ease-out;
  padding-left: 10px;
  float: left;
}
.movie-areaA li iframe {
  opacity: 0;
  visibility: hidden;
  height: 0;
  transition: opacity .1s linear, visibility .1s linear, height .3s ease-out;
}
ul.movie-areaB {
  width: 730px;
  margin-left: 40px;
  margin-right: 40px;
  margin-top: 0;
}
.movie-areaB li {
  padding-bottom: 0;
  transition: padding-bottom .3s ease-out;
  padding-left: 15px;
  float: left;
}
.movie-areaB li iframe {
  opacity: 0;
  visibility: hidden;
  height: 0;
  transition: opacity .1s linear, visibility .1s linear, height .3s ease-out;
}
ul.movie-areaC {
  width: 730px;
  margin-left: 40px;
  margin-right: 40px;
  margin-top: 30px;
  display: flex;
}
.movie-areaC li {
  padding-bottom: 0;
  padding-left: 10px;
}
ul.is-open {
  margin-top: 30px;
}
.is-open li {
  padding-bottom: 20px;
  transition: padding-bottom .3s ease-out;
}
.is-open li iframe {
  opacity: 1;
  visibility: visible;
  height: 197px;
  transition: opacity .1s linear, visibility .1s linear, height .3s ease-out;
}
.is-openA li {
  padding-bottom: 20px;
  transition: padding-bottom .3s ease-out;
}
.is-openA li iframe {
  opacity: 1;
  visibility: visible;
  height: 394px;
  transition: opacity .1s linear, visibility .1s linear, height .3s ease-out;
}
/* 横並びの写真＋キャプション（画像にwidthを指定すること） */
.listfield {
  position: relative;
	float: left;
	width: 100%;
  overflow: hidden;
  margin-top: 40px;
}
.listfield ul {
  float: left;
  position: relative;
  left: 50%;
}
.listfield li {
  position: relative;
  left: -50%;
  display: table-cell;
  vertical-align: middle;
  float: left;
  padding: 0 15px;
  font-size: 14px;
}
.listfield li p {
  padding: 3px 0 15px;
  text-align: center;
}
/*追加された機能*/
ul.new_add {
	font-weight: bold;
	border: double 6px #009245;
	box-sizing: border-box;
	padding: 10px;
}
ul.new_add li:before {
	content: "-";
	margin-right: 5px; 
}