@charset "UTF-8";
main{
  padding-top: var(--header-height);
  background: #F0EFE2;
}
div#page-eyecatch{
  position: relative;

  width: 100%;
  padding: 40px 16px;

  picture{
    img{
      width: 100%;
      max-width: unset;
      border-radius: 16px;
    }
  }
  .h2-wrap{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

    color: #fff;

    .h2-ENG{
      font-size: min(40px,7vw);
      font-family: var(--ff-Copperplate);
      text-align: center;
    }
    h2{
      font-size: min(18px,3.6vw);
      text-align: center;
    }
  }
}
.h3-wrap{
  display: flex;
  align-items: flex-end;

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

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

    font-size: var(--fs-page-heading-ENG);
    font-family: var(--ff-Copperplate);
    line-height: 0.8;
  }
  h3{
    font-size: var(--fs-page-heading);
    line-height: 1.6;
  }
}
.labeledBlockCON{
  width: 100%;

  border-top: solid 2px #333;

  .labeledBlockCON-item{
    display: grid;
    grid-template-columns: 1fr 72px 40%;
    width: 100%;

    border-bottom: solid 2px #333;

    .textContent{
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 16px 0;
      padding-right: 80px;

      width: 100%;
      padding-left: calc(calc(calc(100dvw - 1120px) / 2) + 8px);

      h4{
        padding-left: 16px;
        margin-bottom: 32px;

        font-size: 24px;
        font-weight: 700;
        line-height: 1.4;
      }
      p.text{
        padding-left: 16px;
        line-height: 1.6;
      }
    }
    div.label-wrap{
      display: flex;
      justify-content: center;
      padding: 24px 0;

      border-left: solid 2px #333;

      p.item-label{
        font-size: 30px;
        font-family: var(--ff-Copperplate);
        font-weight: 700;
        writing-mode: vertical-rl;
      }
    }
    picture{
      img{
        width: 100%;
        max-width: unset;
      }
    }
  }
}
@media (min-width : 1200px){
}
@media (max-width : 1200px){
  div#page-eyecatch{
  
    picture{
      height: 16dvh;

      img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 16px;
      }
    }
  }
}
@media (max-width : 599px){
  .h3-wrap{
    flex-direction: column;
    align-items: start;

    .h3-ENG{
      line-height: 1;
    }
  }
  .labeledBlockCON{
    width: 100%;
  
    border-top: solid 2px #333;
  
    .labeledBlockCON-item{
      display: grid;
      grid-template-columns: 1fr 72px;
      width: 100%;
  
      border-bottom: solid 2px #333;
  
      .textContent{
        grid-column: 1/3;
        grid-row: 2/3;

        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 24px 16px;
  
        h4{
          padding-left: 0px;
          margin-bottom: 16px;
  
          font-size: 16px;
        }
        p.text{
          padding-left: 0px;
        }
      }
      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;
        }
      }
    }
  }
}