@charset "UTF-8";

/*  
-------------------------------------------------------------*/
#wrapper { padding: 0; }

/* top_main
-------------------------------------------------------------*/
#top_main {
  height: 100vh;
  top: 0 ;
  left: 0;
  background: url(../../img/top/main.png) no-repeat center;
  background-attachment: fixed;
  background-size: cover;
  overflow: hidden;
  position: relative;
}

#top_main .catch {
  font-size: 22px;
  font-weight: 900;
  text-align: right;
  margin: auto;
  width: 1100px;
  top: 45vh;
  right: 0;
  left: 0;
  position: absolute ;
}

#top_main .catch strong {
  font-size: 45px;
  display: block;
  opacity:0;
  transform: translate(0, 20px);
}

#top_main .catch span {
  opacity:0;
  transform: translate(-30px, 0);
  display: block;
  padding: 10px 0 0;
}

#top_main .catch small {
  font-size: 16px;
  color: #68b848;
  padding: 3px 0 0;
  display: block;
  opacity:0;
  transform: translate(-30px, 0);
}

#top_main.main_open .catch strong {
    animation: 1s ease-in-out op_trs forwards;
    animation-delay: .1s;
}

#top_main.main_open .catch span {
    animation: 0.8s ease-in-out op_trs forwards;
    animation-delay: 1.1s;
}
#top_main.main_open .catch small {
    animation: 0.8s ease-in-out op_trs forwards;
    animation-delay: 1.5s;
}

#top_main .scroll {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .2em;
  text-align: center;
  margin: auto;
  width: 100px;
  height: 90px;
  right: 0;
  left: 0;
  bottom: 0;
  position: absolute ;
}

#top_main .scroll::after, #top_main .scroll::before {
  margin: auto;
  width: 1px;
  z-index: 0;
  right: 0;
  left: 0;
  bottom: 0;
  content: "";
  position: absolute;
}

#top_main .scroll::after {
  animation: scroll 2s ease infinite;
  background: #000;
}

#top_main .scroll::before {
  height: 60px;
  background: rgba(0, 0, 0, .2);
}

@keyframes scroll {
  0% {
  height: 0;
  top: 30px;
  bottom: auto;
  }
  49% {
    height: 60px;
    top: 30px;
    bottom: auto;
  }
  50% {
    height: 60px;
    top: auto;
    bottom: 0;
  }
  100% {
    height: 0;
    top: auto;
    bottom: 0;
  }
}

@keyframes op_trs {
  100% {
    transform: translate(0);
    opacity:1;
  }
}

/* top_news
-------------------------------------------------------------*/
#top_news {
  padding: 55px 0 65px;
  background: url(../../img/top/bg_stripe.gif);
}

#top_news .title { text-align: center; }

#top_news .btn_wrap {
  text-align: center;
  padding: 40px 0 0;
}

#top_news .btn_wrap a { width: 205px; }

/* top_feature
-------------------------------------------------------------*/
#top_feature {
  padding: 0 0 75px;
  overflow: hidden;
  position: relative;
}

#top_feature::before {
  width: calc(50vw + 620px);
  height: 74%;
  z-index: -1;
  top: 20%;
  left: 0;
  background: #eef3ec;
  content: "";
  position: absolute;
}

#top_feature .line {
  height: 1px;
  z-index: -2;
  background: #e7e7e7;
  content: "";
  position: absolute;
}

#top_feature .line01 {
  transform: rotate(-45deg);
  width: 22vw;
  top: 7.7vw;
  left: -4vw;
}

#top_feature .line02 {
  transform: rotate(45deg);
  width: 150vw;
  top: 55vw;
  left: -28.2vw;
}

#top_feature .line03 {
  transform: rotate(45deg);
  width: 52vw;
  top: 17.4vw;
  right: -8vw;
}

#top_feature .line04 {
  transform: rotate(-45deg);
  width: 22vw;
  right: -4vw;
  bottom: 7.7vw;
}

#top_feature .feature01 {
  padding: 75px 0 0;
  display: flex;
}

#top_feature .dtl_wrap {
  flex-direction: column;
  justify-content: center ;
  width: calc(50vw - 135px);
  display: flex;
}

#top_feature .feature01 .dtl_wrap {
  padding-left: calc(50vw - 550px);
  padding-right: 80px;
}

#top_feature .feature02 .dtl_wrap {
  align-items: center;
  padding-left: 80px;
  padding-right: calc(50vw - 550px);
}

#top_feature .feature01 .dtl_wrap h3 { color: #68b848; }
#top_feature .dtl_wrap .reed_text { padding: 15px 0 0; }
#top_feature .pic { width: calc(50vw + 135px); }
#top_feature .pic img { width: 100%; }

#top_feature .feature02 {
  padding: 60px 0 0;
  display: flex;
}

#top_feature .feature02 .dtl_wrap .reed_text { text-align: center; }

#top_feature .feature_list {
  margin: 0 auto;
  padding: 60px 0 0;
  width: 1100px;
  display: flex;
}

#top_feature .feature_list li {
  text-align: center;
  margin: 0 27px;
  padding: 0 0 25px;
  width: calc(50% - 55px);
  background: #fff;
}

#top_feature .feature_list .list_pic img { width: 100%; }

#top_feature .feature_list i {
  border-radius: 50%;
  margin: -50px auto 0;
  width: 100px;
  height: 100px;
  display: block;
  background: #fff;
  position: relative;
}

#top_feature .feature_list h3 {
  font-size: 26px;
  padding: 10px 0 0;
}

#top_feature .feature_list h3 span {
  font-size: 14px;
  color: #c9e3c0;
  display: block;
}

#top_feature .feature_list .list_text {
  font-weight: 500;
  padding: 10px 0 0;
}

#top_feature .feature_list .list_text {
  font-weight: 500;
  padding: 10px 0 0;
}

#top_feature .btn_wrap {
  text-align: center;
  padding: 60px 0 0;
}

#top_feature .btn_wrap a {
  font-size: 20px;
  color: #fff;
  padding: 15px 0;
  border-color: #68b848;
  width: 300px;
  background: #fff;
}

#top_feature .btn_wrap a::after { background: #fff; }
#top_feature .btn_wrap a:before { background: #68b848; }
#top_feature .btn_wrap a:hover, #top_feature .btn_wrap a:focus, #top_feature .btn_wrap a:active { color: #68b848; }
#top_feature .btn_wrap a:hover::after, #top_feature .btn_wrap a:focus::after, #top_feature .btn_wrap a:active::after { background: #68b848; }

/* top_iso
-------------------------------------------------------------*/
#top_iso {
  text-align: center;
  padding: 80px 0;
  background: url(../../img/top/iso_bg.png) no-repeat center;
  background-size: cover;
}

#top_iso .iso_mark { padding: 20px 0 0 ; }

#top_iso .dtl {
  text-align: left;
  margin: 20px auto 0;
  padding: 15px 25px 30px;
  width: 525px;
  background: #fff;
}

#top_iso .dtl dt {
  font-weight: 700;
  padding: 15px 0 0 25px;
  position: absolute;
}

#top_iso .dtl dt::before {
  width: 16px;
  height: 1px;
  top: 28px;
  left: 0;
  background: #6cba4c;
  content: "";
  position: absolute;
}

#top_iso .dtl dd { padding: 15px 0 0 152px; }

#top_iso .message {
  font-size: 18px;
  font-weight: 700;
  padding: 20px 0 0 ;
}