﻿
/*================================================
 *   製品案内（product） 共通
 ================================================*/
/*===============見出し説明===============*/
#intro_area {
  padding-top: 102px;
  padding-bottom: 119px;
}
#intro_area .ttl_wrap {
  width: 84.2%;
  min-width: 1150px;
  margin: 0 0 84px auto;
}
#intro_area h2 {
  width: 100%;
  height: 550px;
  background: no-repeat 50%/cover;
  padding: 67px 70px;
  color: #fff;
}
.industrial #intro_area h2 {
  background-image: url(../image/product_industrial_main.jpg);
}
.conveyor #intro_area h2 {
  background-image: url(../image/product_conveyor_main.jpg);
}
.equipment #intro_area h2 {
  background-image: url(../image/product_equipment_main.jpg);
}
#intro_area h2 .ja {
  font-size: 68px;
  letter-spacing: 0.08em;
}
#intro_area h2 .ff_english {
  font-size: 30px;
  letter-spacing: .14em;
  margin-top: 1.2em;
  padding-left: 3px;
}
#intro_area p.text {
  font-size: 22px;
  line-height: 2.5;
  padding: 0 68px;
  margin-bottom: 85px;
}
#intro_area ol {
  counter-reset: number;
}
#intro_area ol.move {
  animation-name: fadeInUp30;
}
#intro_area ol li {
  width: 344px;
  height: 344px;
  border-radius: 50%;
  border: 2px solid #67b944;
  text-align: center;
  padding: 125px 10px 10px;
  position: relative;
  margin: 0 8px;
}
.equipment #intro_area ol li, .conveyor #intro_area ol li {
  padding-top: 137px;
}
.equipment #intro_area ol li:first-child, .conveyor #intro_area ol li:first-child {
  padding-top: 154px;
}
#intro_area ol li > span {
  position: absolute;
  left: 0;
  top: 40px;
  width: 100%;
  font-size: 23px;
  color: #67b944;
}
#intro_area ol li > span::after {
  counter-increment: number;
  content: "0"counter(number);
  display: block;
  font-size: 46px;
}
#intro_area ol li p.point_text {
  line-height: 1.64;
  font-size: 28px;
}
/*===============製品===============*/
#product_list_area {
  padding-top: 138px;
  padding-bottom: 120px;
  opacity: 1;
  position: relative;
}
#product_list_area.move > .wrap1100.move {
  animation-name: fadeIn;
  animation-delay: 0.5s;
}
#product_list_area::after {
  content: "";
  width: 100vw;
  min-width: 1500px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 5.2vw;
  background-color: #f2f2f2;
  z-index: -1;
  clip-path: inset(0 100% 0 0);
  transition: 1s cubic-bezier(0.8, 0, 0.1, 1);
  transition-property: clip-path;
}
@media screen and (max-width: 1400px) {
  /*画面幅狭い時用*/
  #product_list_area::after {
    right: calc(50% - 630px);
  }
}
#product_list_area.move::after {
  clip-path: inset(0);
}
#product_list_area h2 {
  text-align: center;
  margin-bottom: 56px;
}
#product_list_area h2 .ja {
  font-size: 48px;
  letter-spacing: .08em;
}
#product_list_area h2 .ff_english {
  font-size: 24px;
  letter-spacing: .14em;
  display: block;
  color: #B3B3B3;
  margin-top: 1.2em;
}
#product_list_area ul.list {
  margin-bottom: -100px;
}
.equipment #product_list_area ul.list {
  margin-bottom: -120px;
}
#product_list_area ul.list > li {
  max-width: 520px;
  margin-bottom: 100px;
}
.equipment #product_list_area ul.list > li {
  max-width: 100%;
  margin-bottom: 120px;
}
#product_list_area ul.list > li img {
  max-width: 100%;
}
#product_list_area ul.list > li h3 {
  font-size: 38px;
  letter-spacing: .08em;
  margin: 1em 0 0.8em;
}
.equipment #product_list_area ul.list > li h3 {
  margin: 1.1em 0 0.55em;
  ;
}
#product_list_area ul.list > li p.text {
  font-size: 20px;
  line-height: 2;
  margin-bottom: 1.35em;
}
#product_list_area ul.list ul {
  margin-bottom: -10px;
}
.equipment #product_list_area ul.list ul {
  margin: 0 -20px -20px 0;
}
#product_list_area ul.list ul li {
  min-width: 255px;
  text-align: center;
  font-size: 20px;
  padding: 12px 10px;
  background-color: #fff;
  line-height: 1.75;
  margin-bottom: 10px;
}
.equipment #product_list_area ul.list ul li {
  min-width: 260px;
  margin: 0 20px 20px 0;
}
.equipment #product_list_area ul.list ul li.br2 {
  padding: 15px 1vw;
}
#product_list_area ul.list ul li.stretch {
  flex-basis: 100%;
}
#product_list_area a.dl_btn {
  width: 535px;
  height: 120px;
  border-radius: 120px;
  padding: 15px 30px;
  margin: 120px auto 0;
  font-size: 30px;
  letter-spacing: .02em;
}
#product_list_area a.dl_btn .icon {
  display: inline-block;
  width: 32px;
  height: 32px;
  background: url(../image/product_dl.svg) no-repeat 50%/contain;
  margin-right: 25px;
}
/******* modaal *******/
.modaal-inner-wrapper {
  padding: 50px 25px !important;
  min-width: 1100px;
}
.modaal-container {
  max-width: 1100px !important;
}
.modaal-close {
  background-color: #67b944 !important;
}
.modaal-close:after, .modaal-close:before {
  top: 50% !important;
  left: 50% !important;
}
.modaal-close:before {
  -webkit-transform: translate(-50%, -50%) rotate(-45deg) !important;
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}
.modaal-close:after {
  -webkit-transform: translate(-50%, -50%) rotate(45deg) !important;
  transform: translate(-50%, -50%) rotate(45deg) !important;
}
.modaal-close:focus, .modaal-close:hover {
  background-color: #fff !important;
}
.modaal-close:focus:after, .modaal-close:focus:before, .modaal-close:hover:after, .modaal-close:hover:before {
  background: #67b944 !important;
}
/*ポップアップ*/
.modaal-content-container {
  padding: 112px 0 100px;
  max-height: calc(100vh - 110px);
  overflow-y: scroll;
}
.catalog_box {
  width: 940px;
  margin: 0 auto;
}
.catalog_box p.text {
  text-align: center;
  font-size: 20px;
  line-height: 1.75;
  letter-spacing: 0.08em;
  margin-bottom: 75px;
}
.catalog_box p.text span {
  color: #c1272d;
}
.catalog_box p.ttl {
  font-size: 34px;
  color: #67b944;
  letter-spacing: 0.08em;
  margin-bottom: 28px;
}
.catalog_box .btns_wrap + p.ttl {
  margin-top: 59px;
}
.catalog_box .btns_wrap {
  display: flex;
  flex-wrap: wrap;
  margin-right: -20px;
  margin-bottom: -20px;
}
.catalog_box .btns_wrap a {
  font-size: 20px;
  line-height: 1.25;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 300px;
  height: 70px;
  border: 1px solid #67b944;
  border-radius: 1000px;
  color: #67b944;
  padding: 5px 35px;
  margin-right: 20px;
  margin-bottom: 20px;
  position:relative;
}
.catalog_box .btns_wrap a.h_80 {
  height: 80px;
}
.catalog_box .btns_wrap a:hover {
  background-color: #67b944;
  color: #fff;
  opacity: 1;
}
.catalog_box .btns_wrap a::after {
  content:"\e908";
  font-family: 'icomoon' !important;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  position:absolute;
  right: 1.5em;
  top:calc(50% - 0.5em);
  font-size: 0.8em;
}
/*================================================================================================
 *  スマートフォン向けデザイン
 ================================================================================================*/
@media screen and (max-width: 900px) {
  /*================================================
 *   製品案内（product） 共通
 ================================================*/
  .wrap1100 {
    padding: 0 7.3333vw;
  }
  /*===============見出し説明===============*/
  #intro_area {
    padding-top: 12vw;
    padding-bottom: 16vw;
  }
  #intro_area .ttl_wrap {
    width: 93.3%;
    min-width: auto;
    margin: 0 0 11.5vw auto;
  }
  #intro_area h2 {
    height: 106.667vw;
    padding: 8.8vw 8vw;
  }
  .industrial #intro_area h2 {
    background-image: url(../image/product_industrial_main_sp.jpg);
  }
  .conveyor #intro_area h2 {
    background-image: url(../image/product_conveyor_main_sp.jpg);
  }
  .equipment #intro_area h2 {
    background-image: url(../image/product_equipment_main_sp.jpg);
  }
  #intro_area h2 .ja {
    font-size: 9.867vw;
    line-height: 1.5;
  }
  #intro_area h2 .ff_english {
    font-size: 4vw;
    margin-top: 3vw;
    padding-left: 0;
  }
  #intro_area p.text {
    font-size: 4.267vw;
    line-height: 2;
    padding: 0;
    margin-bottom: 5.8vw;
  }
  #intro_area ol {
    margin: 0 -7.3333vw;
    width: auto;
  }
  #intro_area ol li {
    width: 45.333vw;
    height: 45.333vw;
    border-width: 0.267vw;
    padding: 16vw 1vw 3vw;
    margin: 0 1.5vw;
  }
  .equipment #intro_area ol li, .conveyor #intro_area ol li {
    padding-top: 16vw;
  }
  .equipment #intro_area ol li:first-child, .conveyor #intro_area ol li:first-child {
    padding-top: 18.7vw;
  }
  .equipment #intro_area ol li:nth-child(3) {
    letter-spacing: -0.04em;
  }
  #intro_area ol li:nth-child(1) {
    margin: 0 5vw -1.8vw;
  }
  #intro_area ol li > span {
    top: 5.333vw;
    font-size: 3.467vw;
  }
  #intro_area ol li > span::after {
    font-size: 6.133vw;
  }
  #intro_area ol li p.point_text {
    line-height: 1.5;
    font-size: 4.267vw;
  }
  /*===============製品===============*/
  #product_list_area {
    padding-top: 18.667vw;
    padding-bottom: 16vw;
  }
  #product_list_area::after {
    min-width: auto;
    right: 0;
  }
  #product_list_area h2 {
    margin-bottom: 7.2vw;
  }
  #product_list_area h2 .ja {
    font-size: 6.4vw;
  }
  #product_list_area h2 .ff_english {
    font-size: 3.733vw;
    margin-top: 3.733vw;
  }
  #product_list_area ul.list {
    margin-bottom: -12.533vw;
  }
  .equipment #product_list_area ul.list {
    margin-bottom: -13vw;
  }
  #product_list_area ul.list > li {
    width: 100%;
    max-width: 100%;
    margin-bottom: 12.533vw;
  }
  .equipment #product_list_area ul.list > li {
    margin-bottom: 13vw;
  }
  #product_list_area ul.list > li p.img {
    width: 100%;
  }
  #product_list_area ul.list > li img {
    width: 100%;
  }
  #product_list_area ul.list > li h3 {
    font-size: 6.4vw;
    margin: 5vw 0 0.8em;
  }
  .equipment #product_list_area ul.list > li h3 {
    margin: 4.8vw 0 3.733vw;
  }
  #product_list_area ul.list > li p.text {
    font-size: 4vw;
    line-height: 1.75;
    margin-bottom: 4vw;
  }
  #product_list_area ul.list ul {
    margin-bottom: -1.701vw;
  }
  .equipment #product_list_area ul.list ul {
    margin: 0 0 -1.701vw 0;
    justify-content: space-between;
  }
  #product_list_area ul.list ul li {
    min-width: 49%;
    width: 49%;
    font-size: 4vw;
    padding: 3vw 0;
    line-height: 1.28;
    margin-bottom: 1.701vw;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    min-height: 13.333vw;
  }
  .equipment #product_list_area ul.list ul li {
    min-width: auto;
    margin: 0 0 1.701vw 0;
    padding: 3vw 0;
    min-height: 13.333vw;
  }
  .equipment #product_list_area ul.list ul li.br2 {
    padding: 3vw 0;
  }
  #product_list_area a.dl_btn {
    width: 100%;
    height: 18.667vw;
    padding: 4vw 9vw 4vw 6vw;
    margin: 16vw auto 0;
    font-size: 5.067vw;
  }
  #product_list_area a.dl_btn .icon {
    width: 5.6vw;
    height: 5.6vw;
    margin-right: 6.667vw;
  }
  /******* modaal *******/
  .modaal-inner-wrapper {
    padding: 10vw 4.667vw !important;
    min-width: auto;
  }
  .modaal-close {
    top: 3vw !important;
    right: 3vw !important;
    width: 10vw !important;
    height: 10vw !important;
  }
  .modaal-close:after, .modaal-close:before {
    height: 5vw !important;
    width: 1vw !important;
    border-radius: 1vw !important;
  }
  .modaal-overlay {
    z-index: 1000;
  }
  /*ポップアップ*/
  .modaal-content-container {
    padding: 17.333vw 0 17.333vw;
    max-height: calc((var(--my_vh, 1vh) * 100) - 32vw);
  }
  .catalog_box {
    width: 84vw;
  }
  .catalog_box p.text {
    font-size: 4vw;
    line-height: 1.75;
    margin-bottom: 11.867vw;
    margin-left: -3.333vw;
    margin-right: -3.333vw;
    font-feature-settings: "palt";
  }
  .catalog_box p.ttl {
    font-size: 5.333vw;
    margin-bottom: 3.733vw;
    padding: 0 3.2vw;
  }
  .catalog_box .btns_wrap + p.ttl {
    margin-top: 10.667vw;
  }
  .catalog_box .btns_wrap {
    margin-right: 0;
    margin-bottom: -4vw;
    padding: 0 3.2vw;
  }
  .catalog_box .btns_wrap a {
    font-size: 4.267vw;
    width: 100%;
    height: 13.333vw;
    padding: 1.333vw 8vw;
    margin-right: 0;
    margin-bottom: 4vw;
  }
  .catalog_box .btns_wrap a.h_80 {
    height: 13.333vw;
  }
  .catalog_box .btns_wrap a.sp_16 {
    height: 16vw;
  }
}