@charset "utf-8";
/* CSS Document */

#subpage_ttl {
  background-image: url("../images/product/subpage_img.png");
}

/*-- #sec01 ----------------------------------------------------------*/
#sec01 { text-align: center; }

#sec01 > p { margin-top: 30px; }
#sec01 > p:first-of-type { margin-top: 15px; }

#sec01 ul {
  margin-top: 30px;
  font-size: 16px;
}

.point_wrap {
  background: url("../images/product/sec01_point_bg.png") repeat;
  width: 100%;
  margin-top: 30px;
  padding-bottom: 40px;
  position: relative;
}

.point_wrap h4 {
  width: 100%;
  padding-top: 40px;
  position: relative;
  box-sizing: border-box;
}

.point_wrap:before,
.point_wrap:after,
.point_wrap h4:before,
.point_wrap h4:after {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  background-color: #c80050;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
}
.point_wrap:before { left: 10px; bottom: 10px; }
.point_wrap:after { right: 10px; bottom: 10px; }
.point_wrap h4:before { left: 10px; top: 10px; }
.point_wrap h4:after { right: 10px; top: 10px; }

.point_wrap_inner {
  padding: 0 20px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  box-sizing: border-box;
}

.point_box {
  width: 47%;
  padding-top: 20px;
  box-sizing: border-box;
  display: flex;
  text-align: left;
}

.point_box .point_dtl {
  margin: 10px 0 0 10px;
}

.point_box .point_dtl h5 {
  padding: 10px 20px;
  border: 1px solid #c80050;
  display: inline-block;
}

.point_box .point_dtl p { margin-top: 10px; }

.point_box:last-child { align-self: flex-end; text-align: center; }
.point_box:last-child p { width: 100%; }

.point_box > img {
  width: 27%;
  max-width: 120px;
  align-self: center;
}

.point_wrap h4 img,
.point_box .point_dtl img,
.point_box:last-child img {
  max-width: 100%;
}


/*--Retina--*/
@media screen and (max-width: 1000px) {  
  .point_wrap { display: block; padding-bottom: 20px; }
  .point_wrap h4 { padding: 20px 20px 0; }
  .point_wrap:before,
  .point_wrap:after,
  .point_wrap h4:before,
  .point_wrap h4:after { width: 8px; height: 8px; }
  .point_wrap_inner { padding: 0 15px; }
  .point_box { width: 100%; padding: 15px 0 0; }
  .point_box .point_dtl { margin: 0 0 0 10px; }
  .point_box .point_dtl h5 { padding: 5px 10px; }
  .point_box > img { width: 20%; }
}


/*-- #sec02 ----------------------------------------------------------*/
#sec02 .contents_inner { padding-top: 0; }
#sec02 .contents_inner > p { text-align: center; }

.dtl_wrap {
  width: 100%;
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.dtl_box {
  margin-bottom: 30px;
  width: 47%;
  box-sizing: border-box;
  background-color: #fff;
}

.dtl_box img {
  width: 100%;
}

.dtl_box dl { margin: 10px; }

.dtl_box dl dt {
  float: left ;
  padding: 5px 0 0;
}

.dtl_box dl dd {
  padding: 5px 0;
  margin-left: 70px;
}

.dtl_box dl dd:after {
  content: '';
  display: block;
  clear: both;
}

#sec02 .btn_red {
  margin-top: 10px;
}

/*--Retina--*/
@media screen and (max-width: 1000px) {
  .dtl_wrap { display: block; }
  .dtl_box { width: 100%; }
}