@import url('./common.css');



#event{
.wrapper{
  .title{
        margin-top: calc(220 / 1363 * 100%);
                            &:after {
                        content: "";
                        display: block;
                        width: 80px;
                        height: 2px;
                        background-color: var(--gold);
                        margin: calc(70 / 1363 * 100%) auto;
                        @media screen and (min-width: 769px) {
                        height: 4px;
                        }
                    }
                  }
      .title-sub{
      font-size:clamp(24px, 0.81vw + 20.96px, 32px);
      font-weight: 700;
      line-height: 1.4;
        margin-bottom:calc(80 / 1363 * 100%);
        border-top: 6px solid var(--gold-sub);
        border-bottom: 4px solid var(--gold-sub);
        position: relative;
        padding: calc(40 / 1363 * 100%) 0;
        @media screen and (min-width: 769px) {
        line-height: 1.0;
        }
        span{
          font-size:clamp(18px, 0.61vw + 15.72px, 24px);
        }
        &::before{
          content: "";
          display: block;
          width:100%;
          position: absolute;
          top: 0;
          height:  1px;
          background-color: var(--gold-sub);
          margin: calc(10 / 1363 * 100%) auto 0;
        }
    }
  .text{
      font-size:clamp(16px, 0.4vw + 14.48px, 20px);
      font-weight: 400;
      line-height: 2;
    margin: 0 auto;
    margin-bottom:calc(80 / 1363 * 100%);
    }
    .inner-sub{
      max-width: calc(753 / 822 * 100%);
      margin: 0 auto;
      padding-bottom: calc(40 / 1363 * 100%);
    }
    .table{
      width: 100%;
      margin: 0 auto;
      text-align: justify;
      
      th{
        font-size:clamp(18px, 0.61vw + 15.72px, 24px);
        font-weight: 700;
        line-height: 1.5;
        color: var(--gold-sub);
         padding-bottom: calc(30 / 1363 * 100%);
         width:100%;
         display: block;
         white-space: nowrap;
         vertical-align: baseline;
         @media screen and (min-width: 769px) {
           padding-bottom: calc(60 / 1363 * 100%);
          width:calc(170 / 720 * 100%);
         display: table-cell;
         }
      }
      td{
        font-size:clamp(16px, 0.4vw + 14.48px, 20px);
        font-weight: 400;
        line-height: 2;
        padding-bottom: calc(30 / 1363 * 100%);
         
           width:100%;
         display: block;
         @media screen and (min-width: 769px) {
          padding-bottom: calc(60 / 1363 * 100%);
          width: auto;
          display: table-cell;
         }
      }
    }
    .btn-link{
      font-weight: 700;
      display: inline-block;
      background:url(../img/icon-arrow.svg) no-repeat 94% center, url(../img/btn-bg-link.png)no-repeat center center;
      height: 54px;
      width: 100%;
      line-height: 54px;
      text-align: center;
      margin: calc(60 / 1363 * 100%) auto 0;
      font-size: clamp(14px, 0.2vw + 13.24px, 16px);
      @media screen and (min-width: 769px) {
        background: url(../img/icon-arrow.svg) no-repeat 94% center, url(../img/btn-bg-link.png)no-repeat center center;
        max-width: 254px;
      }
     
    }
     .btn-pdf{
      font-weight: 700;
      display: inline-block;
      background:url(../img/executive/icon-pdf.svg) no-repeat 94% center, var(--gold-sub);
      background-size: 25px;
      color: var(--white);
      height: 45px;
      width: 100%;
    
      line-height: 45px;
      text-align: left;
      padding:0 calc(20 / 822 * 100%);
      margin:0 auto;
      font-size: clamp(16px, 0.89vw + 12.64px, 20px);
      @media screen and (min-width: 769px) {
        max-width: 266px;
      }
     
    }
    .overview{
       margin-bottom: calc(40 / 1363 * 100%) ;
    }
    .reproduction{
      .img-reproduction{
        margin-bottom: calc(120 / 1363 * 100%) ;
      }
    }
    .lead{
      font-size: clamp(20px, 1.82vw + 13.17px, 38px);
      font-weight: 700;
      line-height: 1.5;
      margin-bottom: calc(20 / 1363 * 100%);
      text-align: left;
      @media screen and (min-width: 769px) {
        font-size: clamp(24px, 1.42vw + 18.69px, 38px);
      }
    }
    .img-map{
      max-width: 100%;
      margin: 0 auto;
      margin-bottom: calc(100 / 1363 * 100%) ;
      @media screen and (min-width: 769px) {
        max-width: calc(460 / 822 * 100%);
      }
    }
    .content{
      margin-bottom: calc(60 / 1363 * 100%) ;
    }
    .project{
      margin-bottom: calc(60 / 1363 * 100%) ;
    }
.project-list{
      text-align: left;
  dt{
    color: var(--gold-sub);
    font-size:clamp(20px, 0.61vw + 17.72px, 26px);
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: calc(20 / 1363 * 100%);

  }
  dd{
    font-size: clamp(16px, 0.4vw + 14.48px, 20px);
    font-weight: 400;
    line-height: 2;
    margin-bottom: calc(40 / 1363 * 100%);
    padding-left: calc(80 / 1363 * 100%);
    &:last-child{
      margin-bottom: 0;
    }
  }
}
.collaboration{
  .img-collaboration{
    max-width: calc(718 / 822 * 100%);
    margin-bottom: calc(60 / 1363 * 100%);
  }
  .list{
   
    margin-bottom: calc(40 / 1363 * 100%);
    @media screen and (min-width: 769px) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: stretch;
    gap: calc(10 / 1363 * 100%);
    }
   li{
    border: 1px solid var(--gold-sub);
    h4{
      font-size: clamp(18px, 0.89vw + 14.64px, 22px);
      background-color: var(--black-sub);
      color: var(--white);
      padding: calc(15 / 1363 * 100%) calc(20 / 1363 * 100%);
      text-align: center;
      margin-bottom: calc(10 / 1363 * 100%);
    }
    p{
      text-align: center;
      font-size: clamp(18px, 1.34vw + 12.97px, 24px);
      font-weight: 600;
      margin: calc(60 / 1363 * 100%) auto;
    }
    img{
      max-width: 90%;
      margin: 0 auto calc(40 / 1363 * 100%) ;
    }
    &:last-child{
      margin-top: calc(40 / 1363 * 100%);
      @media screen and (min-width: 769px) {
        margin-top: 0;
      }
    }
   }
  }
  .lead{
    font-size:clamp(16px, 0.79vw + 13.04px, 20px);
    font-weight: 400;
    line-height: 2;
    margin-bottom: calc(20 / 1363 * 100%);
    text-align: center;
  }
  .external-link{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    margin-bottom: calc(40 / 1363 * 100%);
    text-align: center;
    @media screen and (min-width: 769px) {
      grid-template-columns: repeat(3, 1fr);
    }
    h4{
      font-size: clamp(16px, 0.4vw + 14.48px, 20px);
      margin-top: calc(20 / 1363 * 100%);
    }
.btn-link{
      max-width: 100%;
      line-height: 54px;
  
      margin-bottom: calc(120 / 1363 * 100%);
      border-right: 1px solid var(--white);
     
      @media screen and (min-width: 769px) {
        max-width: 234px;
        margin-bottom: 0;
      }
    }
  }
}
.committee{
  margin-top: calc(100 / 1363 * 100%);
}
    .members{
      width: 100%;
      margin: calc(100 / 1363 * 100%) auto 0;
      ul{
        width: 100%;
        margin: 0 auto;
          display: flex;
        align-items: center;
        justify-content: space-between;
        @media screen and (min-width: 769px) {
        }
        li{
          font-size:clamp(14px, 0.4vw + 12.48px, 18px);
        }
        
      }
      .board{
        width: 100%;
        text-align: left;
        font-size:clamp(14px, 0.4vw + 12.48px, 18px);
        line-height: 1.5;
        margin-top:5px;
        border-collapse: collapse;
        letter-spacing: 0;
         
        @media screen and (min-width: 769px) {
    
        }
        .col-1{
   width: 16%;
   white-space: nowrap;
   min-width: 110px;
   @media screen and (min-width: 769px) {
      min-width: 140px;
           }
        }
        .col-2{
          width: 32%;
        }
        .col-3{
          width: 34%;
        }
        .col-4{
          width: 18%;
        }
        .col-5{
          width: 4%;
          min-width: 20px;
           @media screen and (min-width: 769px) {
           min-width: 30px;
           }
        }
        .col-6{
          width: 12%;
           white-space: nowrap;
           min-width: 90px;
           @media screen and (min-width: 769px) {
            min-width: 110px;
           }
        }
        thead{
          tr{
          th{
          text-align: center;
          background: var(--gold-sub);
          color: var(--white);
          font-weight: 700;
          line-height: 1.5;
          padding: calc(10 / 1363 * 100%) calc(15 / 1363 * 100%) ;
        
        }
        }
        }
        tbody{
          margin-top: 2px;
          tr{
             border-bottom: 1px solid var(--gold-sub);
              }
            &:first-child{
            border-top: 3px solid var(--gold-sub);
            
          }
             th{
              background-color: #f9f5ed;
               padding: calc(10 / 1363 * 100%) calc(15 / 1363 * 100%) ;
        }
            }
            td{
              padding: calc(10 / 1363 * 100%) calc(15 / 1363 * 100%) ;
        }
           
      }
        }

    }
}