#home{
  position: relative;
   .img-right{
    text-align: right;
         position: relative;
     z-index: 999;
    img{
  width: calc(726 / 1363 * 100%);
   transform: translateX(3.1rem); /* margin-rightの代わり */
   @media screen and (min-width: 769px) {
    width: calc(526 / 1363 * 100%);
   }
   }
  }
  #front_logo{
    img{
      max-width: 52px;
      @media screen and (min-width: 769px) {
      max-width: 132px;
      }
    }
  }
  .toggle {
        position: fixed;
        top: 4.5rem;
        right: 3rem;
        width: 42px;
        height: 42px;
        z-index: 9996;
        cursor: pointer;
        /* background-color: var(--black); */
        padding: .7rem;
        @media screen and (min-width: 769px) {
          top: 7.5rem;
          right: 6rem;
          width: 70px;
          height: 70px;
          padding: 1.5rem;
        }
    }
  .img-building{
    text-align: right;
     position: relative;
     z-index: 999;
    img{
      width: calc(1143 / 1363 * 100%);
        transform: translateX(3.1rem); 
    }
  }
  .under-line{
    position: relative;
    font-size: clamp(20px, 1.32vw + 19.07px, 28px);
    &:after {
      content: "";
      display: block;
      width: 80px;
      height: 2px;
       background-color: var(--gold);
     margin: 2rem auto;
     @media screen and (min-width: 769px) {
      margin: 4rem auto;
     }
    }
  }
   .logo{
    position: fixed;
    top: 45px;
    left: calc(100 / 1363 * 100%);
               z-index: 9993;
    width: calc(230 / 1363 * 100%);
                    max-width: 230px;
    @media screen and (min-width: 769px) {
     top: 80px;
      left: calc(80 / 1363 * 100%);
    }
   }
.main-visual {
    width: 100%;
    position: relative;
    padding: 1.5rem 1.5rem 0;
    height: 100%;
        aspect-ratio:750 /1210;
        @media screen and (min-width: 769px) {
        aspect-ratio:1427 /1357;
           padding: 3rem 3rem 0;
        }
        .main-visual-bg{
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: -1;
          overflow: hidden;
          img{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0;
            transition: opacity 1.5s ease-in-out;
            &.is-active{
              opacity: 1;
            }
          }
        }

  .main-visual-inner {
position: relative;
  border-top: 6px solid var(--black);
  width: 100%;
  height: 100%;
}

.main-visual-inner::before,
.main-visual-inner::after {
  content: "";
  position: absolute;
  top: 10px;           /* 上から10px空ける */
  bottom:0;        /* 下から10px空ける */
  width: 1px;
  background: var(--black);
  z-index: 1;
}

.main-visual-inner::before {
  left: 0;             /* 左側の線 */
}

.main-visual-inner::after {
  right: 0;            /* 右側の線 */
}
  h1{
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -10%);
    width: 100%;
    max-width:25.3333vw;
    text-align: center;
    @media screen and (min-width: 769px) {
 max-width:calc(25.3333vw / 2);
    }
    img{
      width: 100%;
      margin: 0 auto;
    }
  }
}
.header-home{
.header-nav{
  .header-nav-list{
    margin-bottom: calc(40 / 1363 * 100%);
    .header-nav-item{
      position: relative;
              padding-left: 2rem;
              
      a{
        font-size:clamp(16px, 0.61vw + 13.72px, 22px);
        line-height: 2;
        font-weight: 700;
        &::before{
                content:"";
                position: absolute;
               top: 2.5rem;
                transform: translateY(-50%);
                left: 0;
                width: 14px;
                height: 14px;
                background: url(../img/ic-spacer--color.svg) no-repeat left center;
                background-size: 14px 14px;
                
              }
        span{
          font-weight: 400;
          font-size: clamp(16px, 0.2vw + 15.24px, 18px);
        }
        
      }
        &.text-item{
          a{
            &::before{
              background: url(../img/ic-spacer.svg) no-repeat left center;
              background-size: contain;
            }
          }
        } 
      
    }
    .header-nav-sublist{
      li{
        a{
          line-height: 1.8;
          span{
          font-size: clamp(14px, 0.61vw + 13.72px, 16px);
        }
        }
      }
    }
  }
  .header-nav-sns{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: calc(80 / 1363 * 100%);
    margin-top: calc(100 / 1363 * 100%);
    img{
          width:100%;
          max-width: 62px;
          height: auto;
        }
         
  }
}
}

.wrapper{
  .wrapper-inner{
    border-top: none !important;
  }

}
main{
  text-align: center;
  width: 100%;
  position: relative;
  overflow: hidden;
  section{
  padding-left: 3rem;
  padding-right: 3rem;

  @media screen and (min-width: 769px) {
    padding-left: 5rem;
    padding-right: 5rem;
  }
  @media screen and (min-width: 1025px) {
    padding-left: 0;
    padding-right: 0;
  }
}
  
&::before,
&::after {
  content: "";
  position: absolute;
  top: 0;           /* 上から10px空ける */
  bottom:0;        /* 下から10px空ける */
  width: 1px;
  background: var(--black);
}

&::before {
  left: 1.5rem;
  z-index: 1;   
  @media screen and (min-width: 769px) {
  left: 3rem;
  }
            /* 左側の線 */
}

&::after {
  right: 1.5rem;  
  @media screen and (min-width: 769px) {
  right: 3rem;   
  }         /* 右側の線 */
}
.btn-arrow{
  position: relative;
  &::after{
    content:url(../img/front/icon-arrow.svg);
    position: absolute;
    right: -20px;
  }
}
.img-bothends {
.ill-left {
  max-width: 476px;
            }
        }
        .img-right {
        & img {
            @media screen and (min-width: 769px) {
                width: calc(526 / 1363 * 100%);
                max-width: 536px;
            }
        }
      }
.img-left {
            margin-top: calc(-120 / 1363 * 100%);
            @media screen and (min-width: 769px) {
              margin-top: calc(-70 / 1363 * 100%);
            }
            & img {
                @media screen and (min-width: 769px) {
                    width: calc(626 / 1363 * 100%);
                    max-width: 460px;
                }
            }
        }
p{
     font-size: clamp(14px, 1vw, 16px);
  @media screen and (max-width: 768px) {
   font-size: clamp(13px, 1vw, 14px);
  }
}
p.center{
  line-height: 2;
}
.history{
    background: url(../img/front/bg_history.webp) no-repeat center bottom;
    background-size: cover;
    aspect-ratio: 1427 / 1019;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-top: calc(-290 / 1363 * 100%);
    @media screen and (min-width: 769px) {
    margin-top:calc(-130 / 1363 * 100%);
    }
    .inner{
    position: relative;
    width: 100%;
    max-width: 1040px;
    margin:0 auto;
    background: url(../img/front/bg-history.png) repeat-y center center;
    background-size: cover;
    padding: 106px 0;
    text-align: center;
    @media screen and (min-width: 769px) {
    padding: 106px 6vw;
    }
    h2{
      font-size: clamp(20px, 1.32vw + 19.07px, 22px);
      font-weight: 700;
      line-height: 1.5;
      text-align: justify;
      margin: 0 auto;
      display: inline-block;
      @media screen and (min-width: 769px) {
      font-size: clamp(24px, 1.32vw + 19.07px, 34px);
                    }
    }
    p{
      line-height: 2;
       text-align: center;
      strong{
        font-size: clamp(18px, 0.6vw + 13.74px, 22px);
      }
    }
    .history-btn{
      margin-top: calc(50 / 1363 * 100%);
      li{
       margin-bottom: calc(50 / 1363 * 100%);
        &:last-child{
          margin-bottom: 0;
        }
      }
    }
  
  }
}
  .information{
    .information-inner{
      width: 100%;
      max-width: 1018px;
      margin: 0 auto;
      @media screen and (min-width: 769px) {
      padding: calc(50 / 1363 * 100%) 0;
      }
    }
    h2{
      .information-title{
        display: inline-block;
        margin: 0 auto;
        position: relative;
        a{
        font-size: clamp(14px, 1.32vw + 19.07px, 16px);
     display: block;
     margin: 1rem 0;
        @media screen and (min-width: 769px) {
          display: inline-block;
          margin: 0;
    position: absolute;
        top: 6px;
        right: -110px;
        }
      }
      }
      
    }
    .information-tab-list{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: .75rem;
      margin-top: calc(50 / 1363 * 100%);
      border-bottom: 1px solid #c8c8c8;
      padding-bottom: calc(100 / 1363 * 100%);
      @media screen and (min-width: 769px) {
        padding-bottom: calc(30 / 1363 * 100%);
     justify-content: center;
     gap: 1rem;
      }
      li{
        cursor: pointer;
       width: calc(50% - 0.375rem);
        text-align: center;
             font-size: clamp(11px, 0.61vw + 13.72px, 13px);
        @media screen and (min-width: 769px) {
        width: 133px;
        font-size: clamp(14px, 0.61vw + 13.72px, 16px);
        }
        &.is-active{
          font-weight: 700;
        }
        &#information-tab01{
          color: var(--black);
          background-color: var(--white);
          border: 1px solid var(--black);
        }
        &#information-tab02{
          color: var(--white);
          background-color: #4480c2;
        }
        &#information-tab03{
          color: var(--white);
          background-color: #39804a;
        }
        &#information-tab04{
          color: var(--white);
          background-color: #b3463f;
        }
        &#information-tab05{
          color: var(--white);
          background-color: #986633;
        }
      }
    }
    .news-list{
         margin-top: calc(100 / 1363 * 100%);
      border-bottom: 1px solid #c8c8c8;
      @media screen and (min-width: 769px) {
     margin-top: calc(30 / 1363 * 100%);
      }
      li{
        margin-bottom: calc(100 / 1363 * 100%);
        @media screen and (min-width: 769px) {
          margin-bottom:0;
        }
      }
      a{
      margin-bottom: calc(30 / 1363 * 100%);
      @media screen and (min-width: 769px) {
         display: grid;
             gap: 20px;
   grid-template-columns: 270px 1fr;
      }
      .news-col1{
        display: grid;
     grid-template-columns: 105px 140px;
     margin-bottom: calc(30 / 1363 * 100%);
        @media screen and (min-width: 769px) {
          margin-bottom: 0;
          gap: 10px;
       grid-template-columns: 120px 140px;
        }
      }
      .time{
        color: #808080;
      }
      .category{
        span{
          display: inline-block;
          width: 100%;
          text-align: center;
          color: var(--white);
        }
        &.cat01{
          span{
            background-color: #39804a;
          }
        }
        &.cat02{
          span{
            background-color: #b3463f;;
          }
        }
        &.cat03{
          span{
            background-color: #986633;
          }
        }
        &.cat04{
          span{
            background-color: #4480c2;
          }
        }
      }
    }
    }
  }
  .information-content01,
  .information-content02,
  .information-content03,
  .information-content04,
  .information-content05{
    display: none;
    &.is-active{
      display: block;
    }
    .news-item--hidden{
      display: none;
    }
    .more{
      cursor: pointer;
      padding-top: calc(30 / 1363 * 100%);
      text-align: center;
    }
    .more.is-hidden{
      display: none;
    }
    .close{
      cursor: pointer;
       padding-top: calc(30 / 1363 * 100%);
      text-align: center;
    }
    .close.is-hidden{
      display: none;
    }
  }
  .event-bnr{
    background: url(../img/front/bg-grey.webp) repeat center center;
    .event-bnr-title{
     padding-top: calc(100 / 1363 * 100%);
    font-size: clamp(18px, 1.32vw + 19.07px, 20px);
    margin-bottom: calc(50 / 491 * 100%);
    @media screen and (min-width: 769px) {
       font-size: clamp(22px, 0.61vw + 17.72px, 30px);
    }
    }
    .event-bnr-inner{
      width: 100%;
      max-width: 491px;
      margin: 0 auto;
      padding: calc(50 / 491 * 100%) 0;
      @media screen and (min-width: 769px) {
      padding: calc(25 / 491 * 100%) 0 calc(15 / 491 * 100%);
      }
      a{
        display: inline-block;
      }
      .event-bnr-link{
     margin-bottom: calc(50 / 491 * 100%);
      }
      p{
        text-align: center;
        font-size: clamp(11px, 1vw, 13px);
        line-height: 2;
        font-weight: 400;
        color: var(--black);
        margin-top: calc(5 / 491 * 100%);
        @media screen and (min-width: 769px) {
          font-size: clamp(14px, 0.6vw + 13.74px, 16px);
        }
      }
    }
  }
  .eventcalendar{
    .title-news{
       padding-top: calc(100 / 1363 * 100%);
    font-size: clamp(18px, 1.32vw + 19.07px, 20px);
    @media screen and (min-width: 769px) {
       font-size: clamp(22px, 0.61vw + 17.72px, 30px);
    }
    }
  }
  .produce{
    background: url(../img/front/bg-grey.webp) repeat center center;
  margin-top: calc(-300 / 1363 * 100%);
      padding-bottom: calc(300 / 1363 * 100%);
      margin-bottom: calc(-300 / 1363 * 100%);
    @media screen and (min-width: 769px) {
      margin-top: calc(-150 / 1363 * 100%);
      padding-bottom: calc(150 / 1363 * 100%);
      margin-bottom: calc(-150 / 1363 * 100%);
    }
    h2{
      padding-top: calc(450 / 1363 * 100%);
      font-size: clamp(21px, 1.32vw + 19.07px, 28px);
      @media screen and (min-width: 769px) {
          font-size: clamp(28px, 1.32vw + 19.07px, 32px);
        padding-top: calc(150 / 1363 * 100%);
      }
    }
    h3{
      font-size: clamp(16px, 1.5vw + 12.5px, 18px);
      margin-bottom: calc(30 / 1363 * 100%);
      @media screen and (min-width: 769px) {
       font-size: clamp(18px, 1.5vw + 12.5px, 28px);
      }
 
    }
    p{
      max-width: 640px;
      margin: 0 auto;
      line-height: 2;
      text-align: justify;
      @media screen and (min-width: 769px) {
      }
    }
    .producer{
      
      max-width: 640px;
      margin: 0 auto;
      align-items: center;
      padding-top: calc(30 / 1363 * 100%);
      @media screen and (min-width: 769px) {
 display: grid;
      grid-template-columns: 1fr 125px;
      gap: 20px;
      }
      h4{
        text-align: right;
        font-size: clamp(13px, 1vw, 14px);
        font-weight: 400;
        @media screen and (min-width: 769px) {
      font-size: clamp(14px, 1vw, 16px);
        }
   span{
    font-size: clamp(16px, 0.6vw + 13.74px, 18px);
   }
      }
      img{
        display: none;
        @media screen and (min-width: 769px) {
          display: block;
        }
      }
    }
  }
  .date{
    .date-inner{
      width: 100%;
      max-width: 1040px;
      margin: 0 auto;
     
      .box{
        display: inline-block;
        p{
          line-height: 2;
          font-weight: 400;
        font-size: clamp(14px, 1vw, 16px);
  @media screen and (max-width: 768px) {
   font-size: clamp(13px, 1vw, 14px);
  }
          
        }
      }
      h2{
          display:block;
        font-size:clamp(20px, 1vw, 26px);
           color: var(--red);
        @media screen and (min-width: 769px) {
          font-size: clamp(26px, 1vw, 32px);
     
        }
        strong{
          font-size:clamp(32px, 2.43vw + 0px, 44px);
          @media screen and (min-width: 769px) {
            font-size: clamp(44px, 2.43vw + 0px, 48px);
       
          }
        }
      }
     
      p{
        font-size: clamp(30px, 2.19vw + 21.8px, 51.6px);
        font-weight: 700;
        line-height: 1.5;
        text-align: center;
      }
    }
    
  }
  .event{
    .event-inner{
      width: 100%;
      max-width: 1040px;
      margin: 0 auto;
       h3{
        font-size: clamp(22px, 1vw, 32px);
         margin-top: calc(50 / 1363 * 100%);
        @media screen and (min-width: 769px) {
          font-size: clamp(32px, 1vw, 36px);
         
        }
      }
      p{
        line-height: 2;
          text-align: center;
          margin-top: calc(15 / 1363 * 100%);
    
        @media screen and (min-width: 769px) {
      
        }
        br{
          display: none;
          @media screen and (min-width: 769px) {
            display: block;
          }
        }
      }
      img{
        width: 100%;
        max-width: 652px;
        margin-top: calc(50 / 1363 * 100%);
      }
    }
  }

    .priority{
      padding-bottom: calc(120 / 1363 * 100%);
      padding-left:0;
      padding-right:0;
      @media screen and (min-width: 769px) {
        padding-left:3rem;
        padding-right:3rem;
        padding-bottom: calc(100 / 1363 * 100%);
      }
      .priority-img{
        max-width: 1176px;
        margin: calc(60 / 1363 * 100%) auto;
        @media screen and (min-width: 769px) {
          margin: calc(30 / 1363 * 100%) auto;
        }
    }
    .priority-list{
      max-width: 868px;
      margin: 0 auto;
      padding-left:3rem;
      padding-right:3rem;
      @media screen and (min-width: 769px) {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      }
      .priority-btn{
        a{
          &:hover{
            opacity: 0.8;
            cursor: pointer;
          }
          img{
            width: 100%;
          }
        }
      }
    }
  }
  .news{
    &.news2{
      background: url(../img/front/bg-grey.webp) repeat center center;
    }
    h3{
        font-size: clamp(22px, 1vw, 32px);
         margin-top: calc(50 / 1363 * 100%);
         margin-bottom: calc(30 / 1363 * 100%);
        @media screen and (min-width: 769px) {
          font-size: clamp(32px, 1vw, 36px);
        }
      }
      .news-list{
        .news-item{
          .time{
            color: var(--red);
            font-size: clamp(18px, 0.6vw + 13.74px, 20px);
            font-weight: 700;
            line-height: 1.5;
          }
          .news-title{
            font-size: clamp(16px, 0.6vw + 13.74px, 18px);
             font-weight: 700;
            line-height: 1.5;
          }
        }
      }
      .news-btn{
        padding: calc(50 / 491 * 100%) 0 0;
    
      }
  }
  .learn{
    .learn-inner{
      width: 100%;
      max-width: 1040px;
      margin: 0 auto;
      h3{
        font-size: clamp(22px, 1vw, 32px);
         margin-top: calc(50 / 1363 * 100%);
         margin-bottom: calc(30 / 1363 * 100%);
        @media screen and (min-width: 769px) {
          font-size: clamp(32px, 1vw, 36px);
        }
      }
      .learn-list{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        align-items: stretch;
        margin-top: calc(50 / 1363 * 100%);
        margin-bottom: calc(50 / 1363 * 100%);
        @media screen and (min-width: 769px) {
   gap: 20px;
        }
        li{
          border: 1px solid #b4b4b4;
          a{
                                        width: 100%;
                            padding: .5rem;
                            align-items: center;
                            display: block;
            @media screen and (min-width: 769px) {
         display: grid;
            grid-template-columns: 1fr 1fr;
              gap: 1rem;
            }
            h4{
              font-size: clamp(14px, 0.6vw + 13.74px, 18px);
              font-weight: 700;
              line-height: 1.5;
              margin-bottom:1rem;
              @media screen and (min-width: 769px) {
              font-size: clamp(18px, 0.6vw + 13.74px, 20px);
              }
            }
            p{
              text-align: center;
              position: relative;
              display: inline-block;
              &::after{
                content:url(../img/front/icon-arrow.svg);
                position: absolute;
                right: -1rem;
                top: 0;
              }
            }
          }
      }
    }
  }
  }
  .support{
    background: url(../img/front/bg-grey.webp) repeat center center;
    margin-top: -7rem;

    .support-inner{
      width: 100%;
      max-width: 1040px;
      margin: 0 auto;
   padding:calc(300 / 1363 * 100%) 0 calc(150 / 1363 * 100%);
      @media screen and (min-width: 769px) {
      padding: calc(100 / 1363 * 100%) 0;
      }
    }
    h3{
      font-size:clamp(18px, 1.21vw + 13.45px, 30px);
      font-weight: 500;
      line-height: 1.5;
      margin-bottom: calc(30 / 1363 * 100%);
    }
    p{
      line-height: 2;
      text-align: justify;
      @media screen and (min-width: 769px) {
         text-align: center;
      }
      br{
        display: none;
        @media screen and (min-width: 769px) {
          display: block;
        }
      }
    }
    .support-btn{
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 50px;
      margin-top: calc(25 / 1363 * 100%);
      @media screen and (min-width: 769px) {
        gap: 100px;
      }
      li{
        a{
          &:hover{
            opacity: 0.8;
            cursor: pointer;
          }
        }
    }
  }
  .support-img{
    width: 100%;
    max-width: 228px;
    margin: 0 auto;
    margin-top: calc(75 / 1363 * 100%);
    @media screen and (min-width: 769px) {
    margin-top: calc(50 / 1363 * 100%);
    } 
  }
  }
  .other{
    .other-inner{
      width: 100%;
      max-width: 1040px;
      margin: 0 auto;
      text-align: justify;
      padding: calc(50 / 1363 * 100%) ;
      @media screen and (min-width: 769px) {
        display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      padding: calc(100 / 1363 * 100%) calc(50 / 1363 * 100%);
      }
      h3{
        font-size: clamp(16px, 1vw, 18px);
        margin-bottom: calc(30 / 1363 * 100%);
        border-left: 2px solid var(--black);
        padding: calc(50 / 1363 * 100%);
        @media screen and (min-width: 769px) {
        font-size: clamp(18px, 1vw, 20px);
        }
 
      }
      p{
        line-height: 2;
        text-align: justify;
         padding-left: calc(50 / 1363 * 100%);
      }
      .other-list-link{
        margin-top: calc(50 / 1363 * 100%);
        li{
          padding-left: calc(50 / 1363 * 100%);
          a{
            line-height: 2.5;
            &:before{
              content:"・";
            }
          }
    }
  }
  .event-bnr{
    background: url(../img/front/bg-grey.webp) repeat center center;
  }
}
  }
}

}