@charset "UTF-8";

/*--------------------------------------------------------------
.market-text
--------------------------------------------------------------*/
.market-text{
  font-size: 2.8rem;
  line-height: 1.5;
  margin: 0 0 4rem 0;
  text-align: center;
}

/*--------------------------------------------------------------
.market-main
--------------------------------------------------------------*/
.market-main{
  background-color: #0068b7;
  padding: 8rem 10rem;
  margin: 0 0 8rem 0;
}

.market-main-inner{
  position: relative;
  max-width: 118rem;
  margin: 0 auto 5rem;
}

.market-main-inner figure img{
  width: 100%;
  height: auto;
}

.market-main-inner a span{
  position: absolute;
  display: block;
  width: 9.2rem;
  height: 11.4rem;
}
    @media (max-width: 1500px) {
    .market-main {
      padding: 6rem 6rem;}
    .market-main-inner a span{
      /*width: 4.8vw;
      height: 6.4vw;*/
      width: 6vw;
      height: 7vw;
      }
    }


.market-main-inner a.h-construction span{
  top:43%;
  left:40%;
}

.market-main-inner a.h-waterTreatment span{
  top:52%;
  left:13%;
}

.market-main-inner a.h-factory span{
  top:62%;
  left:24%;
}

.market-main-inner a.h-powerPlant span{
  top: 54%;
  left: 32%;
}

.market-main-inner a.h-tunnel span{
  top:16%;
  left:29%;
}

.market-main-inner a.h-catchment span{
  top: 34%;
  left: 32%;
}

.market-main-inner a.h-agriculture span{
  top:25%;
  left:40%;
}

.market-main-inner a.h-flood span{
  top:18%;
  left:91%;
}

.market-main-inner a.h-stockbreeding span{
  top:19%;
  left:58%;
}

.market-main-inner a.h-fishery span{
  top:51%;
  left:66%;
}

.market-main-inner a.h-shipbuilding span{
  top:64%;
  left:5%;
}

.market-main-inner a.h-landscape span{
  top:61%;
  left:76%;
}

.market-main-inner a.h-pumpStation span{
  top:49%;
  left:52%;
}

.market-main p{
  font-size: 1.6rem;
  color: #fff;
  line-height: 2;
}


/*--------------------------------------------------------------
.market
--------------------------------------------------------------*/
.market{
  max-width: 118rem;
  display: flex;
  flex-wrap:wrap;
  gap:8rem 6rem;
  margin: 0 auto 8rem;
}
  .market-inner{
    width: calc((100% - 6rem)/2);
  }

  .market-inner figure img{
    width: 100%;
    height: auto;
    margin: 0 0 4rem 0;
  }

  .market-name{
    font-size: 2.4rem;
    font-weight: bold;
    margin: 0 0 4rem 0;
  }

.market-list{
  display: flex;
  flex-direction: column;
  flex-wrap:wrap;
  gap:4rem 3rem;
}

  .market-list-inner{
    /*width: calc((100% - 3rem)/2);*/
  }

.market-list-name{
  font-size: 1.6rem;
  font-weight: bold;
  margin: 0 0 2rem 0;
}

.market-item li:not(:last-child){
  margin: 0 0 2rem 0;
}

.market-item li{
  font-size: 1.6rem;
  line-height: 1.5;
}
  .market-item a.hover{
    color: #0068b7;
    text-decoration: underline;
  }

  .market-item a span{
    width: calc(100% - 2rem); 
  }

.market-item a{
  position: relative;
  left: 2rem;
}

.market-item a .Arrow{
  display: inline-block;
  width: 0.7rem;
  aspect-ratio: 1;
  border-right: 1px solid #0068b7;
  border-bottom: 1px solid #0068b7;
  transform: rotate(-45deg);
  position: absolute;
  top: calc(50% - 3.5px);
  left: -2rem;
  transition-property: border-color;
  transition-duration: 0.12s;
} 




/*--------------------------------------------------------------
#m-factory
--------------------------------------------------------------*/
#m-factory{
  width: auto;
}

#m-factory .market-list{
  display: flex;
  flex-direction: initial;
  flex-wrap:wrap;
  gap:4rem 3rem;
}
  #m-factory .market-list-inner{
      width: calc((100% - 6rem)/3);
  }

/*--------------------------------------------------------------
.js-accordion
--------------------------------------------------------------*/
dl.js-accordion > dt .btnStyle{
 display:none;
}


/*--------------------------------------------------------------
.btn-content 
--------------------------------------------------------------*/
.btn-content{
  margin: 4rem 0 0 0;
}

.btn-content a{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #0068b7;
  max-width: 30rem;
  min-height: 5rem;
  font-size: 1.6rem;
  font-weight: bold;
  border: 1px solid #e9ecee;
  background-color: #fff;
  border-radius: 90rem;
  padding: 1rem 1.5rem;
}

.btn-content a::after{
  content: "";
  position: absolute;
  top: 50%;
  right: 2rem;
  width: 0.7rem;
  aspect-ratio: 1;
  border-top: 1px solid #0068b7;
  border-right: 1px solid #0068b7;
  transform: translateY(-50%) rotate(45deg);
  
}

.btn-content a.hover {
  border: 1px solid #0068b7;
  background-color: #0068b7;
  color: #fff;
}
.btn-content a.hover::after {
  border-color: #fff;
}