@charset "utf-8";

/* common */
#main .img_wrap {
  display: block;
  overflow: hidden;
}
#main img {
  vertical-align: middle;
}
#main .mainvisual p,
#main .lp_contents p {
  margin-top: 0;
}

/* header */
#header.simple {
  position: fixed;
  top: 0;
  z-index: 25;
  width: 100%;
  height: 55px;
  background: #fff;
}
#header .lp_hd_cv {
  float: right;
  padding-top: 2px;
}
#header .lp_hd_cv a.cv_catalog {
  position: relative;
  padding: 10px 19px 8px 49px;
  background: #df3939;
  background: -webkit-linear-gradient(top, #df3939 0%,#ce1a1b 100%);
  background: linear-gradient(to bottom, #df3939 0%,#ce1a1b 100%);
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  line-height: 1.4em;
}
#header .lp_hd_cv a.cv_catalog:before {
  position: absolute;
  top: 11px;
  left: 17px;
  display: inline-block;
  width: 16px;
  height: 22px;
  background: url("/img/ss/products/measure-sys/vl/002/bg_1118_01_009.png") no-repeat center center;
  background-size: 100% auto;
  content: "";
}
#header .lp_hd_cv a.cv_models {
  position: relative;
  box-sizing: border-box;
  margin-right: 10px;
  padding: 9px 50px 7px;
  border: 1px solid #3e8ad7;
  background: #fff;
  color: #3e8ad7;
  font-weight: bold;
  font-size: 16px;
  line-height: 1.4em;
}

/* mainvisual */
#main .mainvisual {
  margin-top: 55px;
  height: 400px;
  background: url("/img/ss/products/measure-sys/vl/002/bg_1118_01_001.jpg") no-repeat center bottom #fff;
}
#main .mainvisual .right_box {
  margin: 0 0 0 auto;
  padding-top: 53px;
  width: 460px;
  text-align: left;
}
#main .mainvisual .right_box h1 {
  margin-bottom: 30px;
}

/* section01 */
.section01 {
  background: #148454;
}
.section01 .lp_contents_inner {
  position: relative;
  padding: 32px 0;
}
.section01 .lp_contents_inner:after {
  position: absolute;
  bottom: -24px;
  left: 50%;
  display: inline-block;
  margin-left: -65px;
  width: 130px;
  height: 25px;
  background: url("/img/ss/products/measure-sys/vl/002/bg_1118_01_002.png") no-repeat center top;
  content: "";
}

/* section02 */
.section02 {
  background: #f1f1f1;
}
.section02 .lp_contents_inner {
  position: relative;
}
.section02 .lp_contents_inner:after {
  position: absolute;
  bottom: -24px;
  left: 50%;
  display: inline-block;
  margin-left: -65px;
  width: 130px;
  height: 25px;
  background: url("/img/ss/products/measure-sys/vl/002/bg_1118_01_003.png") no-repeat center top;
  content: "";
}

/* section03 */
.section03 .bottom_read {
  margin: 40px auto 30px;
  text-align: center;
  font-size: 28px;
  line-height: 1.4em;
}

/* select_comic */
.select_comic_wrap {
  padding: 50px 0;
  height: 335px;
  background: url("/img/ss/products/measure-sys/vl/002/bg_1118_01_004.jpg") no-repeat center top #1b785f;
}
.select_comic {
  overflow: hidden;
  margin-top: 25px;
}
.select_comic li {
  float: left;
  cursor: pointer;
  transition: opacity 0.2s;
}
.select_comic li:hover {
  opacity: 0.8;
}
.select_comic li:nth-child(2) {
  margin: 0 8px;
}

/* comic */
.comic_wrap {
  position: relative;
  overflow: hidden;
  height: 0;
  transition: height 0.5s ease-in 0s,
  background-color 1s ease-in 0s;
}
.comic_wrap:before {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 0;
  margin: 0 auto;
  margin-left: -485px;
  width: 970px;
  height: calc(100% - 80px);
  background: #fff;
  content: "";
}
.comic_wrap .comic_inner {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 0;
  margin: 0 auto;
  margin-left: -485px;
  width: 970px;
  background: #fff;
  opacity: 0;
  transition: opacity 1s ease 0s;
}
.comic_wrap.show_1 {
  background: #dfecf8;
}
.comic_wrap.show_2 {
  background: #e1f3e4;
}
.comic_wrap.show_3 {
  background: #faebd7;
}
.comic_wrap .comic_inner h2 {
  padding: 35px 0 0;
  height: 250px;
}
.comic_wrap .comic_inner .comic {
  overflow: hidden;
  height: 0;
  transition: height 1s cubic-bezier(0.8,0.01,1,0.1) 0s;
}
.comic_wrap .comic_inner:after {
  position: absolute;
  bottom: -40px;
  left: 50%;
  display: block;
  margin-left: -600px;
  width: 1200px;
  height: 85px;
  background: url("/img/ss/products/measure-sys/vl/002/bg_1118_01_005.jpg") repeat-x 0 center;
  box-shadow: 0 2px 3px rgba(0,0,0,0.4);
  content: "";
  opacity: 0;
}
.comic_wrap.show_1 .comic_01:after,
.comic_wrap.show_2 .comic_02:after,
.comic_wrap.show_3 .comic_03:after {
  -webkit-animation: animation_measure 3s ease-in-out forwards 1s;
  animation: animation_measure 3s ease-in-out forwards 1s;
}
@-webkit-keyframes animation_measure {
  0% {
    opacity: 0;
  }
  10%,
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes animation_measure {
  0% {
    opacity: 0;
  }
  10%,
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.comic_wrap + .select_comic_wrap {
  display: none;
  position: relative;
}
.comic_wrap + .select_comic_wrap:after {
  position: absolute;
  top: -1px;
  left: 50%;
  display: inline-block;
  margin-left: -65px;
  width: 130px;
  height: 25px;
  content: "";
}
.comic_wrap.show_1 + .select_comic_wrap:after {
  background: url("/img/ss/products/measure-sys/vl/002/bg_1118_01_006.png") no-repeat center top;
}
.comic_wrap.show_2 + .select_comic_wrap:after {
  background: url("/img/ss/products/measure-sys/vl/002/bg_1118_01_007.png") no-repeat center top;
}
.comic_wrap.show_3 + .select_comic_wrap:after {
  background: url("/img/ss/products/measure-sys/vl/002/bg_1118_01_008.png") no-repeat center top;
}
.flex_box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-pack: center;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.flex_box p {
  margin-left: 5px;
  padding-bottom: 4px;
  font-weight: bold;
  font-size: 45px;
  line-height: 1;
}
.contact_txt {
  font-size: 20px;
}