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


#sponsorship{
.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;
                        }
                    }
                  }
  
  .text{
      font-size:clamp(16px, 0.4vw + 14.48px, 18px);
      font-weight: 400;
      line-height: 2;
    margin: 0 auto;
    margin-bottom:calc(80 / 1363 * 100%);
    }
    .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;
        }
    }
     .title-subcolor{
      background-color: #39804a;
      font-size:clamp(20px, 0.61vw + 17.72px, 26px);
      font-weight: 700;
      line-height: 1.4;
      color: var(--white);
      padding: calc(20 / 1363 * 100%) calc(20 / 1363 * 100%);
      text-align: center;
      margin-bottom: calc(40 / 1363 * 100%);
  
    }
    .title-common{
      font-size:clamp(20px, 1.01vw + 16.2px, 30px);
      color: var(--white);
      background-color: var(--black-sub);
      display: flex;
       justify-content: center;
      align-items: center;
      height: 67px;
      line-height: 1;
      overflow: clip;
       margin-bottom: calc(90 / 1363 * 100%);
        @media screen and (min-width: 641px) {
    justify-content: space-between;
        }
      @media screen and (min-width: 769px) {
      justify-content: space-between;
      overflow: hidden;
      }
    
      &::before{
        content:url(../img/ill-title-sc.svg);
        height: 68px;
        display: block;
      }
      &::after{
        content:url(../img/ill-title-sc.svg);
        height: 68px;
        display: block;
        transform: scaleX(-1);
      }
      h3{
        white-space: nowrap;
        line-height: .8;
        @media screen and (min-width: 769px) {
          white-space: normal;
        }
      }
      span{
        font-size:clamp(16px, 0.4vw + 14.48px, 20px);
        display: block;
        line-height: 1.2;
        @media screen and (min-width: 769px) {
          display: inline-block;
        }
      }
    }
 .about{
      margin-bottom: calc(150 / 1363 * 100%);
      .lead{
        text-align: center;
          font-size:clamp(18px, 0.4vw + 14.48px, 24px);
        margin-bottom: calc(40 / 1363 * 100%);
        strong{
            font-size:clamp(24px, 0.81vw + 20.96px, 32px);
            vertical-align: sub;
      
        }
      }
      .red{
        color: var(--red);
        font-weight: 700;
      }
      .overview-color{
          .overview-title{
            font-size: clamp(14px, 0.45vw + 12.32px, 16px);
            margin-bottom: calc(30 / 822 * 100%);
            display: inline-block;
            text-align: center;
            @media screen and (min-width: 769px) {
              margin-bottom: 0;
            }
            strong{
            font-size:clamp(18px, 0.61vw + 17.72px, 24px);
            display: inline-block;
            margin-bottom: calc(15 / 822 * 100%);
           }
          }
          .overview-table{
            width: 100%;
            border-top: solid 4px var(--gold-sub);
            border-bottom: solid 4px var(--gold-sub);
            margin: calc(20 / 822 * 100%) auto calc(50 / 822 * 100%);
            th,td{
              font-size:clamp(16px, 0.61vw + 17.72px, 18px);
              font-weight: 700;
              line-height: 1.5;
              padding: calc(15 / 822 * 100%) calc(30 / 822 * 100%);
              border-bottom: solid 1px var(--gold-sub);
              text-align: left;
            }
      }
    }
       .giftbox{
        background:url(../img/giftbox-bg.png) no-repeat center center;
        background-size: 100% 100%;
        padding: calc(30 / 822 * 100%) auto;
        @media screen and (min-width: 769px) {
              aspect-ratio: 814 / 267;
        display: flex;
        align-items: center;
        justify-content: center;
        }
                         
        .giftbox-item{
                             
                    text-align: left;
                       width: 90%;
                       margin:0 auto;
                       display: table;
                       padding: calc(30 / 822 * 100%) ;
                       @media screen and (min-width: 769px) {
                  display: grid;
                    grid-template-columns: 40% 60%;
                    gap: calc(30 / 822 * 100%);
                    align-items: center;
                       }
          .giftbox-title{
            text-align: center;
            font-size:clamp(18px, 1.34vw + 12.97px, 24px);
            span{
              font-size:clamp(14px, 0.4vw + 14.48px, 16px);
            }
          }
          .disc{
            padding-left: 2.5rem;
            
            @media screen and (min-width: 769px) {
              padding-left: 0;
            }
          }

        }
      }
      .recruitment{
        font-weight: 700;
        line-height: 1.0;
        color: var(--white);
        background-color: var(--gold-sub);
        padding: 3rem 5rem;
        display: table;
        margin-left: auto;
        margin-right: auto;
        border-radius: 100px;
        p{
          font-size:clamp(22px, 2.68vw + 11.93px, 34px);
        }
      }
      .gift{
        .gift-item{
   
          text-align: left;
          @media screen and (min-width: 769px) {
           display: grid;
          grid-template-columns: 30% 70%;
          gap: calc(40 / 1363 * 100%);
          }
          .gift-title{
            font-size:clamp(16px, 0.61vw + 17.72px, 20px);
            &::before{
              content: "◆";
              color: var(--gold-sub);
              margin-right: .5rem;
            }
          }

        }
        .disc{
          padding-left: 2.5rem;
          @media screen and (min-width: 769px) {
            padding-left: 0;
          }
        }
      }
      .use{
      .use-list{
        width: 100%;
        margin: 0 auto;
        text-align: left;
      dt{
        font-size:clamp(18px, 1.34vw + 12.97px, 24px);
        color: #c32414;
        font-weight: 700;
        line-height: 1.5;
        margin-bottom: calc(10 / 822 * 100%);
      }
      dd{
        font-size:clamp(16px, 0.4vw + 14.48px, 20px);
          margin-bottom: calc(30 / 822 * 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;
              }
            }
          }
        }
      }
      .title-sub--min{
        font-size:clamp(20px, 0.61vw + 17.72px, 24px);
        font-weight: 700;
        line-height: 1.4;
        margin-bottom: calc(40 / 822 * 100%);
        border-bottom: solid 4px var(--gold-sub);
        border-top: solid 4px var(--gold-sub);
        padding: calc(15 / 822 * 100%) 0;
      }
      }
      .form{
        .inner{
        border: solid 4px #c49b4b;
        
       padding:0 0;
        .title{
          margin-top: calc(110 / 1363 * 100%);
          font-size:clamp(22px, 0.81vw + 20.96px, 28px);
          &:after {
            content:none;
          }
        }
        form{
          text-align: left;
          .required{
            color: var(--red);
            display: inline-block;
            margin-left: 5px;
          }
          ul{
            @media screen and (min-width: 769px) {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: calc(30 / 822 * 100%);
            }
       
          }
          .hr{
               border-top: solid 1px #e6e6e6;
            padding-top: calc(50 / 822 * 100%);
            width: 100%;
          }
          label{
          margin-bottom: calc(10 / 822 * 100%);
          display: inline-block;
          width: 100%;
        }
        .wpcf7-form-control-wrap{
          display: inline-block;
              margin-bottom:1rem;
                 width: 100%;
            @media screen and (min-width: 769px) {
            margin-bottom:4rem;
            }
        }
        input[type="text"],input[type="email"],input[type="tel"],select{
            width: 100%;
            height: 50px;
            border: 1px solid #bcbcbc;
            padding:1rem;
          }
          textarea{
            width: 100%;
            height: 15rem;
            border: 1px solid #bcbcbc;
         
          }
          .wpcf7-response-output{
            display: none;
          }
        }
        .privacy{
        max-width: 100%;
        margin: calc(80 / 822 * 100%) auto;
        background-color: #f4f4f4;
        padding: calc(15 / 814 * 100%) calc(5 / 814 * 100%);
        @media screen and (min-width: 769px) {
        max-width:500px;
        }
        p{
          padding: 0 calc(30 / 1363 * 100%);
          @media screen and (min-width: 769px) {
           text-align: center;
           padding: 0;
          }
          a{
            text-decoration: underline;
          }
        }
      }
      }
      }
    }
  }