@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@500;700&display=swap");
/*------------------------------------------------------------
top用body
------------------------------------------------------------*/
body {
  font-size: 2rem;
  background: url("../images/top/ptn_bg.png") repeat top center;
}
@media screen and (max-width: 834px) {
  body {
    font-size: 1.7rem;
  }
}

@media screen and (max-width: 834px) {
  body {
    background-size: auto 1650px;
  }
}
/*------------------------------------------------------------
top用header
------------------------------------------------------------*/
#header {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

/*------------------------------------------------------------
top用共通class
------------------------------------------------------------*/
.section_title {
  font-size: 2.8rem;
  letter-spacing: 0.12em;
  text-align: center;
  padding: 20px 0;
  margin-bottom: 40px;
}
@media screen and (max-width: 834px) {
  .section_title {
    font-size: 2.4rem;
  }
}

.section_head {
  overflow-x: clip;
}
.section_head .inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.section_head .inner div {
  width: 50%;
}
.section_head .inner div p:not(.bt_black) {
  font-weight: bold;
  width: 340px;
  margin: 0 auto;
}
.section_head .inner figure {
  width: 0;
}
.section_head .inner figure img {
  border-radius: 60px;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}
.section_head.img_left .inner {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}
.section_head.img_left .inner figure img {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}

.inview {
  opacity: 0;
  -webkit-transform: translateY(30px);
          transform: translateY(30px);
  -webkit-transition: opacity 0.8s, -webkit-transform 0.8s;
  transition: opacity 0.8s, -webkit-transform 0.8s;
  transition: opacity 0.8s, transform 0.8s;
  transition: opacity 0.8s, transform 0.8s, -webkit-transform 0.8s;
}
.inview.is_inview {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition-delay: 0.12s;
          transition-delay: 0.12s;
}

@media screen and (max-width: 834px) {
  .section_head .inner {
    display: block;
  }
  .section_head .inner div {
    width: auto;
  }
  .section_head .inner div p:not(.bt_black) {
    width: auto;
  }
  .section_head .inner figure {
    width: auto;
    margin-top: 30px;
  }
  .section_head .inner figure img {
    border-radius: 30px;
    width: 100%;
    height: auto;
  }
  .section_head.img_left .inner figure img {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
}
/*------------------------------------------------------------
mv
------------------------------------------------------------*/
#mv {
  height: 75vh;
  min-height: 640px;
  position: relative;
}
#mv .img {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#mv .img li {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
#mv .img li img {
  opacity: 0;
  width: 100%;
  height: auto;
}
#mv .img div {
  height: 100%;
}
#mv .txt {
  position: absolute;
  bottom: 80px;
  right: 60px;
  width: 100%;
  text-align: right;
}
#mv .txt li {
  opacity: 0;
  font-size: 6rem;
  color: #f29c97;
  line-height: 80px;
  letter-spacing: 0.1em;
  text-shadow: 0px 0px 8px #fff;
  white-space: nowrap;
}
#mv .txt li.purple {
  color: #4f4590;
}
#mv .txt li.red {
  color: #ed1e79;
}
#mv .txt li.blue {
  color: #0071bc;
}
#mv .txt li.orange {
  color: #f15a24;
}
#mv .txt li.green {
  color: #009245;
}
#mv .arrow_left, #mv .arrow_right {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  z-index: 1;
  cursor: pointer;
}
#mv .arrow_left {
  left: 30px;
}
#mv .arrow_right {
  right: 30px;
}
#mv .slick-dots {
  bottom: 20px;
}
#mv .slick-dots li {
  margin: 0 10px;
}
#mv .slick-dots li button:before {
  font-size: 14px;
  color: #fff;
  opacity: 1;
}
#mv .slick-dots li.slick-active button:before {
  color: #f29c97;
}

@media screen and (max-width: 834px) {
  #mv {
    height: 320px;
    min-height: 0;
  }
  #mv .txt {
    bottom: 30px;
    right: 20px;
  }
  #mv .txt li {
    font-size: 2.4rem;
    line-height: 40px;
  }
  #mv .arrow_left, #mv .arrow_right {
    width: 20px;
  }
  #mv .arrow_left img, #mv .arrow_right img {
    width: 100%;
    height: auto;
  }
  #mv .arrow_left {
    left: 15px;
  }
  #mv .arrow_right {
    right: 15px;
  }
  #mv .slick-dots {
    bottom: 10px;
  }
  #mv .slick-dots li button:before {
    font-size: 12px;
  }
}
/*------------------------------------------------------------
かんでんエルハートについて
------------------------------------------------------------*/
#about_us {
  padding-top: 60px;
}
#about_us h2 {
  font-size: 2.2rem;
  letter-spacing: 0.28em;
  text-align: center;
  background: url("../images/top/icon_about_us.png") no-repeat center top, url("../images/top/ttl_about_us.png") no-repeat center bottom;
  padding: 40px 0 20px;
  margin-bottom: 60px;
}
@media screen and (max-width: 834px) {
  #about_us h2 {
    font-size: 1.9rem;
  }
}
#about_us dl {
  overflow-x: clip;
}
#about_us dl dt {
  text-align: center;
  margin-bottom: 30px;
}
#about_us dl dt img {
  max-width: 100%;
  height: auto;
}
#about_us dl dd {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
#about_us dl dd div {
  width: 580px;
}
#about_us dl dd figure {
  width: 0;
}
#about_us dl dd figure img {
  border-radius: 60px;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

@media screen and (max-width: 834px) {
  #about_us {
    padding-top: 30px;
  }
  #about_us h2 {
    margin-bottom: 30px;
  }
  #about_us dl dt {
    margin-bottom: 25px;
    padding-left: 25px;
    padding-right: 25px;
  }
  #about_us dl dd {
    display: block;
  }
  #about_us dl dd div {
    width: auto;
  }
  #about_us dl dd figure {
    width: auto;
    margin-top: 30px;
  }
  #about_us dl dd figure img {
    border-radius: 30px;
    width: 100%;
    height: auto;
  }
}
/*------------------------------------------------------------
事業
------------------------------------------------------------*/
#service {
  padding-top: 180px;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}
#service .section_title {
  background: url("../images/top/ttl_service.png") no-repeat center top, url("../images/top/dot_ttl.png") no-repeat center bottom;
  margin-bottom: 90px;
}
#service div {
  width: 960px;
  margin-bottom: 120px;
  background: #fff;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  border-radius: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
}
#service div:before {
  display: block;
  content: "";
  width: 100%;
  height: 40px;
  position: absolute;
  bottom: 30px;
  background: -webkit-gradient(linear, left top, right top, color-stop(0, #f1c19b), color-stop(75%, #f1c19b), to(#f1ced4));
  background: linear-gradient(to right, #f1c19b 0, #f1c19b 75%, #f1ced4 100%);
}
#service div section {
  width: 440px;
  text-align: center;
}
#service div section h3 {
  font-size: 3.2rem;
}
@media screen and (max-width: 834px) {
  #service div section h3 {
    font-size: 2.7rem;
  }
}
#service div section h3 img {
  margin: 0 5px 3px 0;
}
#service div section p {
  margin-bottom: 30px;
}
#service div section p a {
  display: block;
  width: 160px;
  margin: 0 auto;
  border: 2px solid #f5b26b;
  border-radius: 20px;
  font-size: 1.6rem;
  line-height: 36px;
  color: #f5b26b;
  font-weight: bold;
  text-decoration: none;
  background: url("../images/top/arrow_orange.png") no-repeat right 10px center;
}
@media screen and (max-width: 834px) {
  #service div section p a {
    font-size: 1.4rem;
  }
}
#service div section p a:hover {
  color: #fff;
  background: #f5b26b url("../images/common/arrow_white.png") no-repeat right 10px center;
}
#service div figure {
  position: relative;
  bottom: 50px;
}
#service div figure img {
  border-radius: 20px;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}
#service div:nth-of-type(odd) figure {
  right: 40px;
}
#service div:nth-of-type(even) {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
  margin-left: auto;
}
#service div:nth-of-type(even) figure {
  left: 40px;
}
#service div.mail:before {
  background: -webkit-gradient(linear, left top, right top, color-stop(0, #f1c19b), color-stop(75%, #f1c19b), to(#f1ced4));
  background: linear-gradient(to right, #f1c19b 0, #f1c19b 75%, #f1ced4 100%);
}
#service div.mail section p a {
  border-color: #f5b26b;
  color: #f5b26b;
  background-image: url("../images/top/arrow_orange.png");
}
#service div.mail section p a:hover {
  color: #fff;
  background: #f5b26b url("../images/common/arrow_white.png") no-repeat right 10px center;
}
#service div.health:before {
  background: -webkit-gradient(linear, left top, right top, color-stop(0, #f1ced4), color-stop(75%, #f1ced4), to(#e4acab));
  background: linear-gradient(to right, #f1ced4 0, #f1ced4 75%, #e4acab 100%);
}
#service div.health section p a {
  border-color: #f29c97;
  color: #f29c97;
  background-image: url("../images/top/arrow_pink.png");
}
#service div.health section p a:hover {
  color: #fff;
  background: #f29c97 url("../images/common/arrow_white.png") no-repeat right 10px center;
}
#service div.novelty:before {
  background: -webkit-gradient(linear, left top, right top, color-stop(0, #e5c1c5), color-stop(75%, #e5c1c5), to(#d2cce6));
  background: linear-gradient(to right, #e5c1c5 0, #e5c1c5 75%, #d2cce6 100%);
}
#service div.novelty section p a {
  border-color: #cc87a8;
  color: #cc87a8;
  background-image: url("../images/top/arrow_red.png");
}
#service div.novelty section p a:hover {
  color: #fff;
  background: #cc87a8 url("../images/common/arrow_white.png") no-repeat right 10px center;
}
#service div.print:before {
  background: -webkit-gradient(linear, left top, right top, color-stop(0, #d2cce6), color-stop(75%, #d2cce6), to(#afa8ca));
  background: linear-gradient(to right, #d2cce6 0, #d2cce6 75%, #afa8ca 100%);
}
#service div.print section p a {
  border-color: #af8fd9;
  color: #af8fd9;
  background-image: url("../images/top/arrow_purple.png");
}
#service div.print section p a:hover {
  color: #fff;
  background: #af8fd9 url("../images/common/arrow_white.png") no-repeat right 10px center;
}
#service div.pc:before {
  background: -webkit-gradient(linear, left top, right top, color-stop(0, #a5abd0), color-stop(75%, #a5abd0), to(#bad4ef));
  background: linear-gradient(to right, #a5abd0 0, #a5abd0 75%, #bad4ef 100%);
}
#service div.pc section p a {
  border-color: #8997ff;
  color: #8997ff;
  background-image: url("../images/top/arrow_blue.png");
}
#service div.pc section p a:hover {
  color: #fff;
  background: #8997ff url("../images/common/arrow_white.png") no-repeat right 10px center;
}
#service div.clean:before {
  background: -webkit-gradient(linear, left top, right top, color-stop(0, #afc7e9), color-stop(75%, #afc7e9), to(#acd9d4));
  background: linear-gradient(to right, #afc7e9 0, #afc7e9 75%, #acd9d4 100%);
}
#service div.clean section p a {
  border-color: #73acff;
  color: #73acff;
  background-image: url("../images/top/arrow_water.png");
}
#service div.clean section p a:hover {
  color: #fff;
  background: #73acff url("../images/common/arrow_white.png") no-repeat right 10px center;
}
#service div.recycle:before {
  background: -webkit-gradient(linear, left top, right top, color-stop(0, #a1d6dc), color-stop(75%, #a1d6dc), to(#8ac998));
  background: linear-gradient(to right, #a1d6dc 0, #a1d6dc 75%, #8ac998 100%);
}
#service div.recycle section p a {
  border-color: #44b3c1;
  color: #44b3c1;
  background-image: url("../images/top/arrow_bluegreen.png");
}
#service div.recycle section p a:hover {
  color: #fff;
  background: #44b3c1 url("../images/common/arrow_white.png") no-repeat right 10px center;
}
#service div.solution:before {
  background: -webkit-gradient(linear, left top, right top, color-stop(0, #89c997), color-stop(75%, #89c997), to(#d5e7ad));
  background: linear-gradient(to right, #89c997 0, #89c997 75%, #d5e7ad 100%);
}
#service div.solution section p a {
  border-color: #00cc97;
  color: #00cc97;
  background-image: url("../images/top/arrow_green.png");
}
#service div.solution section p a:hover {
  color: #fff;
  background: #00cc97 url("../images/common/arrow_white.png") no-repeat right 10px center;
}
#service div.horticulture:before {
  background: -webkit-gradient(linear, left top, right top, color-stop(0, #d8e7ae), color-stop(75%, #d8e7ae), to(#f5e3b4));
  background: linear-gradient(to right, #d8e7ae 0, #d8e7ae 75%, #f5e3b4 100%);
}
#service div.horticulture section p a {
  border-color: #8fc22d;
  color: #8fc22d;
  background-image: url("../images/top/arrow_greenyellow.png");
}
#service div.horticulture section p a:hover {
  color: #fff;
  background: #8fc22d url("../images/common/arrow_white.png") no-repeat right 10px center;
}

@media screen and (max-width: 834px) {
  #service {
    padding-top: 60px;
    padding-left: 15px;
    padding-right: 15px;
  }
  #service .section_title {
    margin-bottom: 30px;
  }
  #service div {
    width: auto;
    margin-bottom: 30px;
    border-radius: 15px;
    display: block;
  }
  #service div section {
    width: auto;
    padding: 20px 0 60px;
  }
  #service div section h3 img {
    margin: 0 5px -3px 0;
  }
  #service div section p {
    margin-bottom: 15px;
  }
  #service div figure {
    bottom: 50px;
    padding: 0 15px;
  }
  #service div figure img {
    border-radius: 10px;
    width: 100%;
    height: auto;
  }
  #service div:nth-of-type(odd) figure {
    right: 0;
  }
  #service div:nth-of-type(even) figure {
    left: 0;
  }
}
/*------------------------------------------------------------
環境
------------------------------------------------------------*/
#work_place {
  padding-top: 180px;
  overflow-x: clip;
}
#work_place .section_title {
  background: url("../images/top/ttl_workplace.png") no-repeat center top, url("../images/top/dot_ttl.png") no-repeat center bottom;
}
#work_place .work_place_detail {
  margin-top: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  position: relative;
}
#work_place .work_place_detail:after {
  display: block;
  content: "";
  width: 737px;
  height: 352px;
  background: url("../images/top/img_workplace_detail.png") no-repeat center center;
  position: absolute;
  bottom: 30px;
  left: 400px;
}
#work_place .work_place_detail a {
  display: block;
  width: calc((100% - 60px) / 3);
  background: #fff url("../images/top/arrow_pink_l.png") no-repeat center bottom 20px;
  border-radius: 20px;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  padding: 30px 30px 90px;
  margin-bottom: 30px;
  text-decoration: none;
  text-align: center;
}
#work_place .work_place_detail a figure {
  margin-bottom: 15px;
}
#work_place .work_place_detail a dl dt {
  font-weight: bold;
  margin-bottom: 15px;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}
#work_place .work_place_detail a dl dd {
  font-size: 1.6rem;
  text-align: left;
  -webkit-transition: all 0.25s;
  transition: all 0.25s;
}
@media screen and (max-width: 834px) {
  #work_place .work_place_detail a dl dd {
    font-size: 1.4rem;
  }
}
#work_place .work_place_detail a:hover dl dt, #work_place .work_place_detail a:hover dl dd {
  color: #f29c97;
}

@media screen and (max-width: 834px) {
  #work_place {
    padding-top: 60px;
  }
  #work_place .work_place_detail {
    margin-top: 30px;
    display: block;
  }
  #work_place .work_place_detail:after {
    width: auto;
    height: 170px;
    position: static;
    background-size: contain;
  }
  #work_place .work_place_detail a {
    width: auto;
    border-radius: 10px;
    padding: 15px 30px 15px 0;
    margin-bottom: 15px;
    background-position: right 10px center;
    background-size: 17px auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  #work_place .work_place_detail a figure {
    margin-bottom: 0;
    width: 80px;
  }
  #work_place .work_place_detail a figure img {
    width: 75%;
    max-width: 100%;
    height: auto;
  }
  #work_place .work_place_detail a dl {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
  }
  #work_place .work_place_detail a dl dt {
    margin-bottom: 5px;
    text-align: left;
  }
}
/*------------------------------------------------------------
企業情報
------------------------------------------------------------*/
#about {
  padding-top: 180px;
}
#about .section_title {
  background: url("../images/top/ttl_about.png") no-repeat center top, url("../images/top/dot_ttl.png") no-repeat center bottom;
}

@media screen and (max-width: 834px) {
  #about {
    padding-top: 60px;
  }
}
/*------------------------------------------------------------
お知らせ
------------------------------------------------------------*/
#news {
  padding-top: 180px;
}
#news .section_title {
  background: url("../images/top/ttl_news.png") no-repeat center top, url("../images/top/dot_ttl.png") no-repeat center bottom;
}
#news ul {
  background: #fff;
  border-radius: 20px;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  padding: 15px 30px;
}
#news ul li {
  clear: both;
  overflow: hidden;
  padding: 20px 0;
}
#news ul li + li {
  border-top: 1px solid #ddd;
}
#news ul li dl dt {
  float: left;
  width: 120px;
  margin-top: 3px;
  font-size: 1.4rem;
  text-align: center;
  line-height: 26px;
  color: #4d4d4d;
  border: 1px solid #999;
  border-radius: 14px;
}
@media screen and (max-width: 834px) {
  #news ul li dl dt {
    font-size: 1.2rem;
  }
}
#news ul li dl dt.topics {
  color: #00aa9f;
  border-color: #00aa9f;
}
#news ul li dl dt.other {
  color: #29abe2;
  border-color: #29abe2;
}
#news ul li dl dd {
  float: left;
  margin-left: 20px;
}
#news ul li dl dd.day {
  width: 140px;
  color: #808080;
}
#news ul li dl dd.title {
  width: calc(100% - 120px - 140px - 20px - 20px);
}
#news ul li dl dd.title a:hover {
  text-decoration: none;
}
#news .bt_black {
  width: 25%;
}

@media screen and (max-width: 834px) {
  #news {
    padding-top: 60px;
  }
  #news ul {
    border-radius: 10px;
    padding: 5px 15px;
  }
  #news ul li dl dt {
    margin-top: 0;
  }
  #news ul li dl dd {
    margin-left: 10px;
  }
  #news ul li dl dd.day {
    width: auto;
  }
  #news ul li dl dd.title {
    width: auto;
    margin-left: 0;
    margin-top: 5px;
    clear: both;
  }
  #news .bt_black {
    width: 80%;
  }
}
/*------------------------------------------------------------
バナー
------------------------------------------------------------*/
#bnr {
  padding-top: 30px;
}
#bnr ul {
  text-align: center;
}
#bnr ul li {
  display: inline-block;
  margin: 60px 30px 0;
}
#bnr ul li a:hover {
  opacity: 0.65;
}
#bnr ul li a img {
  border-radius: 15px;
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
          box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
}

@media screen and (max-width: 834px) {
  #bnr {
    padding-top: 15px;
  }
  #bnr ul li {
    display: block;
    margin: 30px 0 0;
  }
  #bnr ul li a:hover {
    opacity: 1;
  }
  #bnr ul li a img {
    border-radius: 10px;
    max-width: 100%;
    height: auto;
  }
}
/*------------------------------------------------------------
採用情報
------------------------------------------------------------*/
#recruit {
  padding-top: 180px;
}
#recruit .section_title {
  background: url("../images/top/ttl_recruit.png") no-repeat center top, url("../images/top/dot_ttl.png") no-repeat center bottom;
}

@media screen and (max-width: 834px) {
  #recruit {
    padding-top: 60px;
  }
}/*# sourceMappingURL=top.css.map */