@charset "UTF-8";
div#hero{
  picture,img{
    width: 100%;
    max-width: auto;
  }
}
.h2-wrap{
  display: flex;
  align-items: flex-end;

  width: min(1120px, 100%);
  padding: 0 16px;
  margin-bottom: 32px;
  margin-inline: auto;

  .h2-ENG{
    padding-right: .6em;

    font-size: var(--fs-page-heading-ENG);
    font-family: var(--ff-Copperplate);
    font-weight: 700;
    line-height: 0.8;
  }
  h2{
    font-size: var(--fs-page-heading);
    line-height: 1.6;
  }
}
section#news{
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 32px 40px;

  h2{
    display: inline-block;

    font-family: var(--ff-Copperplate);
  }
  .news-wrap{
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 24px;
    align-items: center;

    time{
      display: inline-block;

      font-size: 17px;
      font-family: var(--ff-Copperplate);
      line-height: 0.8;
    }
  }
}
section#aboutus{
  margin-bottom: 120px;

  div.intro{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    column-gap: 120px;
    row-gap: 48px;
    width: min(1120px, 100%);
    padding: 0 16px;
    margin-bottom: 96px;
    margin-inline: auto;

    div.textContent{
      padding: 24px;
      
      >p{
        padding-bottom: 32px;

        line-height: 3;
      }
    }
    div.textContent.hasLink{
      padding-left: 32px;
    }
    .img-wrap{
      picture{
        img{
          border-radius: 16px;
          box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
        }
      }
    }
    .img-wrap:nth-child(5){
      display: none;
    }
  }
}
section#strength{
  margin-bottom: 120px;

  ul.strengthCON{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    width: 100%;

    border-top: solid 2px #333;
    border-bottom: solid 2px #333;

    li.item{
      display: grid;
      grid-template-columns: 1fr 92px;

      border-left: solid 2px #333;

      picture{
        grid-column: 1/2;
        grid-row: 1/2;

        img{
          border-radius: 0 0 16px 0;
        }
      }
      .label-wrap{
        grid-column: 2/3;
        grid-row: 1/2;

        display: flex;
        justify-content: center;
        padding: 24px 0;

        p.item-label{
          font-size: 30px;
          font-family: var(--ff-Copperplate);
          font-weight: 700;
          writing-mode: vertical-rl;
        }
      }
      .textContent{
        grid-column: 1/3;
        grid-row: 2/3;

        padding: 64px 40px 80px;

        h3{
          margin-bottom: 16px;

          font-size: 17px;
          font-weight: 700;
          line-height: 1.4;
        }
      }
    }
    li:first-child{
      border-left: solid 0px;
    }
  }
  ul.linkCON{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    margin-bottom: 56px;

    border-bottom: solid 2px #333;

    li.item{
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 24px 16px;

      border-left: solid 2px #333;

      picture{
        img{
          border-radius: 24px;
        }
      }
      div.textContent{
        position: absolute;
        top: 50%;
        left: 20%;
        transform: translateY(-50%);

        p.heading-ENG{
          padding-left: .2em;

          font-size: min(56px,7vw);
          font-weight: 500;
          font-family: var(--ff-Copperplate);
          font-weight: 700;
        }
        p.heading{
          font-size: 18px;
          font-weight: 700;
        }
      }
    }
    li:first-child{
      border-left: solid 0px;
    }
  }
}
#gallerySlider{
  width: 100%;

  picture{
    img{
      border-radius: 16px;
    }
  }
}
.bx-wrapper{
  background: transparent !important;
}
section#interview{
  width: min(1120px, 100%);
  margin-bottom: 120px;
  margin-inline: auto;
  ul.list-interview{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    padding: 0 16px;
    column-gap: 24px;
    margin-bottom: 24px;

    li.item img{
      border-radius: 16px;
    }
  }

}

@media (min-width : 1200px){
}
@media (max-width : 1200px){
  .h2-wrap{
    width: min(1120px, 100%);
    padding: 0 16px;
    margin-bottom: 32px;
    margin-inline: auto;
  }
  section#aboutus{
    margin-bottom: 120px;
  
    div.intro{
      display: grid;
      grid-template-columns: repeat(1,1fr);
      width: 100%;
      column-gap: min(5vw,120px);
      row-gap: min(2vw,48px);
      margin-bottom: 96px;
  
      .img-wrap{
        picture,img{
          max-width: 100%;
          aspect-ratio: 16/9;
          object-fit: cover;
        }
      }
      div.textContent:nth-child(2){
        grid-row: 1/2;
      }
      div.textContent:nth-child(3){
        grid-row: 2/3;
      }
      .img-wrap:nth-child(1),
      .img-wrap:nth-child(4){
        display: none;
      }
      .img-wrap:nth-child(5){
        display: block;
        grid-row: 3/4;
      }
      div.textContent{
        padding: 0;
        
        >p{
          width: 100%;
          padding: 0;

          font-size: 14px;
  
          line-height: 1.6;
        }
      }
      
      div.textContent.hasLink{
        padding-left: 0px;

        div.jcc{
          padding-top: 16px;
          padding-bottom: 32px;
        }
      }
    }
  }
  section#strength{
    ul.strengthCON{
      display: grid;
      grid-template-columns: repeat(1,1fr);
  
      border-top: solid 2px #333;
      border-bottom: solid 0px #333;
  
      li.item{
        display: grid;
        grid-template-columns: 1fr 92px;
  
        border-left: solid 0px #333;
        border-bottom: solid 2px #333;

        .label-wrap{
          padding: 24px 0;
  
          p.item-label{
            font-size: 30px;
          }
        }
        .textContent{
          padding: 24px 16px 32px;
  
          h3{
            margin-bottom: 16px;
  
            font-size: 17px;
          }
        }
      }
    }
    ul.linkCON{
      display: grid;
      grid-template-columns: repeat(1,1fr);
      margin-bottom: 56px;
  
      li.item{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 24px 16px;
  
        border-left: solid 0px #333;
  
        picture{
          img{
            border-radius: 24px;
          }
        }
        div.textContent{
          position: absolute;
          top: 50%;
          left: 20%;
          transform: translateY(-50%);
        }
      }
    }
  }
}
@media (max-width : 599px){
  .h2-wrap{
    display: flex;
    flex-direction: column;
    align-items: initial;
  
    .h2-ENG{
      padding-right: .6em;
      line-height: 1;
    }
  }
  section#news{
    display: flex;
    flex-direction: column;
    align-items: initial;
    gap: 16px;
    padding: 8px 16px;
    padding-bottom: 24px;
    margin-bottom: 24px;

    border-bottom: solid 2px #333;
  
    h2{
      display: inline-block;
  
      font-family: var(--ff-Copperplate);
    }
    .news-wrap{
      display: grid;
      grid-template-columns: 1fr;
      row-gap: 8px;
      align-items: center;
  
      time{
        display: inline-block;
  
        font-size: 17px;
        font-family: var(--ff-Copperplate);
        line-height: 0.8;
      }
    }
  }
  section#strength{
    ul.strengthCON{
      display: grid;
      grid-template-columns: repeat(1,1fr);
  
      border-top: solid 2px #333;
      border-bottom: solid 0px #333;
  
      li.item{
        display: grid;
        grid-template-columns: 1fr 72px;
        width: 100%;
  
        border-left: 0px;
        border-bottom: solid 2px #333;  

        .label-wrap{
          padding: 24px 0;
  
          p.item-label{
            font-size: 30px;
          }
        }
        .textContent{
          grid-column: 1/3;
          grid-row: 2/3;
  
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding: 24px 16px;
    
          h3{
            margin-bottom: 16px;
  
            font-size: 17px;
          }
        }
        div.label-wrap{
          grid-column: 2/3;
          grid-row: 1/2;
  
          display: flex;
          justify-content: center;
          padding: 24px 0;
    
          border-left: solid 2px #333;
          border-bottom: solid 2px #333;
    
          p.item-label{
            font-size: 30px;
            writing-mode: vertical-rl;
          }
        }
        picture{
          grid-column: 1/2;
          grid-row: 1/2;
  
          border-bottom: solid 2px #333;
  
          img{
            width: 100%;
            height: 100%;
            object-fit: cover;
            max-width: unset;
            border-radius: 0px;
          }
        }
      }
    }
}