@charset "utf-8";
/* CSS Document */
/*====================
 - 1280px〜：大型PC
 - 960px〜1279px：小型PC
 - 600px〜959px：タブレット
 - 480px〜599px：スマートフォン横
 - 〜479px：スマートフォン縦
====================*/
/*---front-------------------------------------------------------*/
/***** home_common ******/
.home section {
  padding: 10rem 0;
  position: relative;
}
@media screen and (min-width:900px) {
  .home section {
    padding: 12rem 0;
  }
}
.hero .catch_wrap{
  position: absolute;
  bottom: 24%;
  left: calc( 2vw + 40px );
  padding-top:1px;
}
.hero .catch{
  position: relative;
  color: #fefefe;
  top: 0;
  left: 0;
  margin: 0;
  font-size: clamp(2.8rem, 4vw, 6rem);
}
@media screen and (max-width:899px) {
  .hero .catch_wrap{
    position: absolute;
    bottom: 22%;
    left: 4vw;
    padding-top:1px;
  }
}
/*** home_products ***/
#home_products h2::before{
  content: 'EMULSION PAINT';
  position: absolute;
  width: 80vw;
  height: 60px;
  top: 2rem;
  left: 2rem;
  color: #fefefe;
  z-index: -1;
}
#home_products .img_outer{
  margin-top: 4rem;
}
@media screen and (max-width:899px) {
  #home_products .text_box{
    margin-bottom: 4rem;
  }
}
@media screen and (min-width:900px) {
  #home_products .grid_area {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 20% 80%;
    grid-column-gap: 40px;
  }
  #home_products .text_box { grid-area: 1 / 1 / 2 / 2; }
  #home_products .home_products_list { grid-area: 1 / 2 / 3 / 3; }
  #home_products .img_outer { grid-area: 2 / 1 / 3 / 2; }
}
/*** home_service ***/
#home_service .img_outer{
  position: relative;
  width: 90%; /* 必要に応じて調整 */
}
#home_service img{
  width: 60%;
  height: auto;
  display: block;
}
#home_service .img_left{
  position: relative;
  z-index: 2;
}
#home_service .img_right{
  position: absolute;
  right: -40px;
  bottom: -60px;
  z-index: 1;
}
.home_service_list{
  margin-top: 2.8rem;
}
@media screen and (max-width:899px) {
  #home_service .img_outer{
    margin-bottom: 10rem;
  }
  #home_service #home_service .text_box{
    margin-top: 10rem;
  }
}
@media screen and (min-width:900px) {
  #home_service .grid_area {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 24% 76%;
    grid-column-gap: 60px;
  }
  #home_service h2 { grid-area: 1 / 2 / 2 / 3; }
  #home_service .img_outer { grid-area: 1 / 1 / 3 / 2; }
  #home_service .text_area { grid-area: 2 / 2 / 3 / 3; }
}
@media screen and (max-width:1100px) and (min-width:900px) {
  #home_service img{
    width: 68%;
  }
}

/*** home_company ***/
#home_company img{
  height: 36vh;
  object-position: 64% 50%;
}
@media screen and (max-width:899px){
  #home_company .home_company_list{
    margin-top: 4rem;
  }
}
@media screen and (min-width:900px) {
#home_company .grid_area {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 24% 76%;
  grid-column-gap: 60px;
  grid-row-gap: 0px;
  }
  #home_company h2 { grid-area: 1 / 1 / 2 / 2; }
  #home_company .img_outer { grid-area: 1 / 2 / 3 / 3; }
  #home_company .home_company_list { grid-area: 2 / 1 / 3 / 2; }
}

/*** home_recruit ***/
.banner_recruit{
  position: relative;
  display: block;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.banner_recruit img{
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
  overflow: hidden;
  filter:grayscale(90%);
  border-radius: 0;
}

.banner_recruit .text_area{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.banner_recruit .en,.banner_recruit .banner_title {
  text-align: center;
}
.banner_recruit .banner_title,.banner_recruit .banner_btn{
  position: relative;
}
.banner_recruit .banner_title{
  position: relative;
  font-weight: bold;
  letter-spacing: 0.1em;
  font-size: clamp(3.6rem, 4vw, 4.8rem);
}
.banner_recruit .banner_btn{
  font-size: 1.8rem;
  text-align: center;
  width: 180px;
  left: -.8rem;
}
.banner_recruit .arrow {
  position: absolute;
  top: 51%;
  right: 0.8rem;
  transform: translateY(-50%);
  transition: transform 0.3s;
}
.banner_recruit .en{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(4rem,6vw, 10rem);
  color: #2E3F55;
  opacity: .6;
}
.banner_recruit .banner_btn .arrow::before {
  top: .1rem;
}
.banner_recruit:hover img{
  filter:none;
}
@media screen and (max-width:1299px){
  .banner_recruit img {
    height: 36vh;
  }
}
@media screen and (min-width:900px) {

}