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


#executive{
.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%);
    &.center{
      @media screen and (min-width: 769px) {
      text-align: center;
      }
    }
    br{
      display: none;
      @media screen and (min-width: 769px) {
        display: block;
      }
    }
    }
    .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(60 / 1363 * 100%);
         width:calc(170 / 720 * 100%);
         white-space: nowrap;
      }
      td{
        font-size:clamp(16px, 0.4vw + 14.48px, 20px);
        font-weight: 400;
        line-height: 2;
         padding-bottom: calc(60 / 1363 * 100%);
      }
    }
    .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;
      background-size: 50% 25%, 100% 100%;
      height: 54px;
      width: 100%;
      max-width: 254px;
      line-height: 54px;
      text-align: center;
      margin: calc(60 / 1363 * 100%) auto 0;
      font-size: clamp(14px, 0.2vw + 13.24px, 16px);
     
    }
    .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%;
      border-bottom: 1px solid var(--white);
    
      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;
      }
     
    }
    .about{
      margin-bottom: calc(150 / 1363 * 100%);
      .lead{
        text-align: center;
        font-size:clamp(24px, 0.81vw + 20.96px, 32px);
        margin-bottom: calc(40 / 1363 * 100%);
      }
      .list{
        width: 100%;
        margin: 0 auto;
             
              display: table;
              @media screen and (min-width: 769px) {
           max-width: calc(573 / 822 * 100%);
              }
        .item{
          margin: 0 auto;
           margin-bottom: calc(100 / 1363 * 100%);
            display: flex;
            align-items: center;
            justify-content: center;
             aspect-ratio: 573 / 167;
             &:last-child{
              margin-bottom: 0;
             }

            padding:0 calc(80 / 1363 * 100%);
          &.item1{
            background: url(../img/executive/bg-executive-01.jpg) no-repeat center center;
             background-size: 100% 100%;
           
          }
          &.item2{
            background: url(../img/executive/bg-executive-02.jpg) no-repeat center center;
            background-size: 100% 100%;
          }
          a{
            font-size:clamp(18px, 1.21vw + 13.45px, 30px);
            font-weight: 700;
            line-height: 1.2;
            display: inline-block;
            width: 100%;
            color: var(--white);
            background: var(--gold-sub);
            border: 3px solid var(--white);
            aspect-ratio: 473 / 127;
            display: grid;
            align-items: center;
            justify-content: center;
            position: relative;
            &:after{
              content: "";
              display: block;
              position: absolute;
              right: calc(100 / 1363 * 100%);
              top: 50%;
              transform: translateY(-50%);
              width: 12px;
              height: 14px;
              background: url(../img/executive/icon-arrow.svg) no-repeat center right;
              @media screen and (min-width: 769px) {
                width: 14px;
              height: 16px;
              }
            }
          }
        }
      }
    }
      
        
      }
    }
    .table-executive{
      text-align: left;
      th{
       width:calc(250/ 822 * 100%);
        font-size:clamp(16px, 0.89vw + 12.64px, 20px);
        font-weight: 700;
        line-height: 1.5;
        vertical-align: top;
        padding-bottom: calc(30 / 822 * 100%);
                            text-indent: -26px;
                            padding-left: 26px;
                            white-space: nowrap;
            &::before{
            content: "◆";
            color: var(--gold-sub);
            margin-right: .5rem;
            }
      }
      td{
        width:calc(750 / 822 * 100%);
        vertical-align: top;
        font-size:clamp(16px, 0.45vw + 14.32px, 18px);
        font-weight: 400;
        line-height: 2;
        padding-bottom: calc(30 / 822 * 100%);
      }
      th, td {
        @media screen and (max-width: 768px) {
 display: block;
 width: 100%; 
}
}
      .btn-pdf{
        margin: calc(20 / 822 * 100%) 0;
      }
    }
    .table-executive2{
      text-align: left;
      th{
        width:calc(250/ 822 * 100%);
        font-size:clamp(16px, 0.89vw + 12.64px, 20px);
        font-weight: 700;
      line-height: 1.5;
        vertical-align: top;
            padding-bottom: calc(30 / 822 * 100%);
                            text-indent: -25px;
                            padding-left: 25px;
                            white-space: nowrap;
            &::before{
            content: "◆";
            color: var(--gold-sub);
            margin-right: .5rem;
            }
      }
      td{
         width:calc(750 / 822 * 100%);
        vertical-align: top;
        font-size:clamp(16px, 0.45vw + 14.32px, 18px);
        font-weight: 400;
        line-height: 2;
        padding-bottom: calc(30 / 822 * 100%);
        @media screen and (min-width: 769px) {
        
        }
      }
       th, td {
        @media screen and (max-width: 768px) {
 display: block;
 width: 100%; 
}
}
      .btn-pdf{
        margin: calc(20 / 822 * 100%) 0;
      }
    }
    }
}