@charset "UTF-8";

.PE-business01{
  background: url(../img/eyecatch/PE-business01.png);
}
.PE-business02{
  background: url(../img/eyecatch/PE-business02.png);
}
.PE-business03{
  background: url(../img/eyecatch/PE-business03.png);
}
.PE-business04{
  background: url(../img/eyecatch/PE-business04.png);
}

/*トップページと同じ物*/
section#business{
  margin-bottom: 6.4rem;

  line-height: 1.4;
}
#business .cardContainer{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;

  border-top: solid 1px #DEDEDE;
  border-left: solid 1px #DEDEDE;
}
#business .cardContainer .card{
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .8rem;

  padding: 3.2rem 6.4rem;

  border-right: solid 1px #DEDEDE;
  border-bottom: solid 1px #DEDEDE;
}
#business h3{
  font-size: var(--business-heading3-fs);
  font-weight: 600;
  color: #34B4FF;
}
#business .text{
  font-size: var(--business-text-fs);
  font-weight: 400;
}
#business a{
  position: absolute;
  right: 1.6rem;
  bottom: 1.6rem;
  width: 4rem;
}

/*page01用*/
section#sec-PR{
  padding: 6.4rem 0;

  background: #FAFAFA;
  border-image-source: linear-gradient(#FAFAFA,#FAFAFA);
  border-image-slice: 0 fill;
  border-image-outset: 0 100vw;
}
#newProduct{
  line-height: 1.4;
  margin-bottom: 6.4rem;
}
#newProduct img{
  margin: 3.2rem 0;
}
#newProduct .detail-list{
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}
#newProduct .detail-list .title{
  width: 100%;
  margin-bottom: 1.6rem;

  font-size: 1.8rem;
  color: var(--CON-color);
  line-height: 1.4;

  border-bottom: solid 1px #B5B5B5;
}
#newProduct .detail-list .content ol{
  display: flex;
  flex-direction: column;
  gap: 1.6rem;

  margin-left: 2.4rem;

  list-style-type: decimal;
}
table{
  border-top: solid 1px #B5B5B5;
  border-left: solid 1px #B5B5B5;
}
table *{
  min-width: 12rem;
  padding: 2rem;

  text-align: center;

  border-right: solid 1px #B5B5B5;
  border-bottom: solid 1px #B5B5B5;
}
table th,
table tr td:nth-child(1){
  background: #EFEFEF;
}
#newMethod .detail{
  display: flex;
  align-items: center;
  padding: 4rem 0;
  gap: 2.4rem;
}
#newMethod ul >*+*{
  margin-block-start: 2.4rem;
}
#newMethod p.heading{
  margin-bottom: .8rem;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.6;
}
#newMethod .text-red{
  font-size: 1.8rem;
  color: #f00;
}
#newMethod .circleContainer{
  display: flex;
  align-items: center;
}
#newMethod .circleContainer .circle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 5em;
  height: 5em;
  color: #fff;
  background: #2959DD;
  border-radius: 50%;
}
#newMethod .circleContainer >*+*{
  margin-inline-start: 1.6rem;
}


/*page03用*/
#sec-institution .intro{
  display: grid;
  grid-template-columns: repeat(2,1fr);
  column-gap: 3.2rem;
  row-gap: 2.4rem;

  margin-bottom: 6.4rem;
}
#sec-institution .intro img{
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;

  box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
#sec-institution .intro .text-content{
  padding-top: 3.2rem;
}
#sec-institution .intro .title{
  font-size: 2.2rem;
  font-weight: 600;

  margin-bottom: 1.6rem;
}
#sec-institution .intro .text{
  line-height: 1.6;
}
#sec-institution ul{
  display: flex;
  flex-direction: column;
}
#sec-institution ul li{
  display: grid;
  grid-template-columns: 1fr 4fr 2fr;
  column-gap: 2.4rem;
}
#sec-institution ul li:not(:last-child){
  margin-bottom: 4rem;
}
#sec-institution ul li img{
  width: 100%;
}
#sec-institution ul li .img-numbered{
  padding-top: 3.2rem;
}
#sec-institution h4{
  padding-top: 4.8rem;
  margin-bottom: 1.2rem;

  font-size: 2.4rem;
  font-weight: 600;
}
#sec-institution ul .description{
  line-height: 1.6;
}
@media (max-width : 1024px){
}
@media (max-width : 599px){
  #sec-institution .intro{
    display: grid;
    grid-template-columns: repeat(1,1fr);
  }
  #business .cardContainer{
    grid-template-columns: repeat(1, 1fr);
  }

  table *{
    min-width: auto;
    padding: .4rem;
  
    text-align: center;
  
    border-right: solid 1px #B5B5B5;
    border-bottom: solid 1px #B5B5B5;
  }

  #sec-institution ul li{
    display: grid;
    grid-template-columns: 1fr 4fr;
    column-gap: 0;
  }
  #sec-institution ul li .img-numbered{
    grid-column: 1 / 2;
    grid-row: 1 / 2;

    z-index: 2;

    padding-top: 1.6rem;
    padding-left: 1.6rem;
  }
  #sec-institution ul .description{
    grid-column: 1 / 3;
    grid-row: 2 / 3;

    line-height: 1.6;
  }
  #sec-institution ul .thumbnail{
    grid-column: 1 / 3;
    grid-row: 1 / 2;

    z-index: 1;

    aspect-ratio: 16/9;
  }
  #sec-institution h4{
    padding-top: 0;
    margin-bottom: 0;
  
    font-size: 2rem;
    font-weight: 600;
  }
}