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


.no-scroll{
.header-common{
 height: 100vh !important;
        background: white !important;
}
}
#home{
  position: relative;
   
.header-common{
  height: auto;
}
 .header-nav.active{
  top: 106px;
 }
.header-nav-box{
  border-left:1px solid var(--black);
  border-right:1px solid var(--black);
}
.header-nav-inner {
                width: 97% !important;
                margin: 0 auto;
                padding: 0 calc(30 / 1424 * 100%) !important;
            }
/* バーガーメニューのスタイル */
.toggle {
  position: fixed;
  top: 50px;
  right:35px;
  width: 30px;
  height: 30px;
  z-index: 9996;
  cursor: pointer;
 display: block;
 opacity: 0;
 transform: translateX(20px);
 @media screen and (min-width: 769px) {
  display: none;

 }
 .toggle-bg{
  position: absolute;
  top: -10px;
  left: -10px;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  padding: 25px;
  
 background-color: white;
 z-index: -1;
 }
 &.active{
  .toggle-bg{
  left: -14px;
  }
 }
}

.toggle span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #d7ae33;
  margin: 6px 0;
  transition: 0.3s;
  border-radius: 2px;
}

.toggle.active span:nth-child(1) {
  transform: rotate(-45deg) translate(-8.5px, 3px);
  @media screen and (min-width: 769px) {
    transform: rotate(-45deg) translate(-8.5px, 3px);
  }
}

.toggle.active span:nth-child(2) {
  opacity: 0;
}

.toggle.active span:nth-child(3) {
  transform: rotate(45deg) translate(-8px, -3px);
  @media screen and (min-width: 769px) {
    transform: rotate(45deg) translate(-8px, -4px);
  }
}
  .wrapper-home{
    width: 100%;
    position: relative;
    padding: 1.5rem 1.5rem 0;
    height: 100%;
    @media screen and (min-width: 769px) {
      padding: 3rem 3rem 0;
    }
     &:before{
      content: "";
      position: absolute;
      top: 0;
      left:0;
      width: 100%;
      height:100%;
      background: url(../img/home/bg-mv-all.png) no-repeat center top;
        background-size: cover;
        aspect-ratio:1424 /2075;
    }
   

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

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

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

.wrapper-inner-home::after {
  right: 0;            /* 右側の線 */
}

}
.mv{
.header-home {
  position: relative;
  aspect-ratio: 1363 / 829;
  .header-nav {
    position: absolute;
    top:calc(497 / 1363 * 100%);
    left : calc(972 / 1363 * 100%);
    z-index: 1;
    display: none;
    @media screen and (min-width: 769px) {
      display: block;
    }
    .header-nav-item {
      opacity: 0;
      transform: translateY(20px);
    }
  }
  .main-visual{
 position: absolute;
 top: 4.11vw;
 left: 50%;
 transform: translate(-50%, 0);
 width: 100%;
 height: 100%;
 text-align: center;
  h1{
    opacity: 0;
    transform: translateY(20px);
    img{
    width: calc(395 / 1363 * 100%);
    @media screen and (min-width: 769px) {
      width: calc(295 / 1363 * 100%);
    }
  }
}
 .stamp{
  position: absolute;
  top:calc(607 / 1363 * 100%);
  left : calc(106 / 1363 * 100%);
    width: calc(345/ 1363 * 100%);
    opacity: 0;
    transform: translateY(20px);
    @media screen and (min-width: 769px) {
        top:calc(407 / 1363 * 100%);
      left : calc(256 / 1363 * 100%);
      width: calc(245 / 1363 * 100%);
    }
  }
  }
}
  .history{
    padding-bottom:calc(100 / 1363 * 100%);
    .inner{
    position: relative;
    width: 100%;
    max-width: 1040px;
    margin: calc(50 / 1363 * 100%) auto 0;
    background: url(../img/home/bg-history.png) repeat-y center center;
    background-size: cover;
                   aspect-ratio: 1090 / 970;
    padding: 106px 6vw;
    text-align: center;
    h2{
      font-size: clamp(24px, 1.32vw + 19.07px, 37px);
      font-weight: 700;
      line-height: 1.5;
      text-align: justify;
                    margin: 0 auto;
                    display: inline-block;
      &:after {
      content: "";
      display: block;
      width: 80px;
      height: 2px;
       background-color: var(--gold);
      margin: calc(40 / 1040 * 100%) auto;
    }
    }
    
    
    
    p{
      font-size:clamp(16px, 0.6vw + 13.74px, 20px);
      font-weight: 400;
      line-height: 2;
     
      &:last-child{
        margin-top: calc(40 / 1040 * 100%);
      }
      @media screen and (min-width: 769px) {
         text-align: center;
      }
      br{ display: none;
        @media screen and (min-width: 769px) {
          display: block;
        }
      }
    }
  
  }
}
}
.header-home{
.header-nav{
  .header-nav-list{
    margin-bottom: calc(40 / 1363 * 100%);
    .header-nav-item{
      position: relative;
              padding-left: 2rem;
              &::before{
                content:"";
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                left: 0;
                width: 14px;
                height: 14px;
                background: url(../img/ic-spacer.svg) no-repeat left center;
                background-size: 14px 14px;
                
              }
      a{
        font-size:clamp(16px, 0.61vw + 13.72px, 22px);
        line-height: 2;
        font-weight: 700;
        span{
          font-weight: 400;
          font-size: clamp(16px, 0.2vw + 15.24px, 18px);
        }
        
      }
    }
  }
  .header-nav-sns{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: calc(80 / 1363 * 100%);
    img{
          width:100%;
          max-width: 62px;
          height: auto;
        }
  }
}
}

.wrapper{
  padding: 0 1.5rem;
  overflow: hidden;
  margin-top: -3rem !important;
  @media screen and (min-width: 769px) {
    padding: 0 3rem;
  }
  .wrapper-inner{
    border-top: none !important;
    position: relative;
  width: 100%;
  }

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

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

.wrapper-inner::after {
  right: 0;            /* 右側の線 */
}
}
main{
  text-align: center;
  width: 100%;
  .news{
    .news-inner{
      text-align: left;
      width: 100%;
      max-width: 1030px;
      margin: 0 auto;
      padding: calc(240 / 1363 * 100%) calc(100 / 1363 * 100%) calc(50 / 1363 * 100%);
      @media screen and (min-width: 769px) {
          padding: calc(100 / 1363 * 100%) 0 calc(50 / 1363 * 100%);
     display: grid;
      grid-template-columns: 220px 1fr;
      }
      h2{
        font-size: clamp(20px, 0.4vw + 18.48px, 24px);
        font-weight: 700;
        line-height: 1.5;
        text-align: center;
        margin-bottom: calc(50 / 1363 * 100%);
        @media screen and (min-width: 769px) {
        text-align: justify;
        margin-bottom: 0;
        }
       
      }
      ul{
          border-bottom: 1px solid var(--gray);
          @media screen and (min-width: 769px) {
            border-bottom: none;
          }
        li{
          border-top: 1px solid var(--gray);
          padding: 2rem 0;
         
          .time{
            font-size: clamp(14px, 0.4vw + 12.2px, 16px);
            font-weight: 700;
            line-height: 1.5;
            color: var(--gray-dark);
            padding-bottom: 1rem;
            display: inline-block;
          }
        }
      }
    }
  }
  .about{
    .about-inner{
      width: 100%;
      max-width: 1040px;
      margin: 0 auto;
          padding: calc(100 / 1363 * 100%) ;
      @media screen and (min-width: 769px) {
      padding: calc(50 / 1363 * 100%) 0;
      }
      p{
        padding-top: calc(30 / 1363 * 100%);
        line-height: 2;
        font-size: clamp(16px, 0.6vw + 13.74px, 20px);
              text-align: justify;
        @media screen and (min-width: 769px) {
 
             text-align: center;
        }
        &:last-child{
          padding-top: calc(30 / 1363 * 100%);
        }
        br{
          display: none;
          @media screen and (min-width: 769px) {
            display: block;
          }
        }
      }
    }
  }
  .date{
    .date-inner{
      width: 100%;
      max-width: 1040px;
      margin: 0 auto;
      color: var(--red);
        padding: calc(100 / 1363 * 100%) 0 0;
     
      .box{
        display: inline-block;
         border-bottom: 2px solid var(--red);
      }
      h2{
          display:block;
        font-size:clamp(24px, 2.02vw + 16.41px, 44px);
        @media screen and (min-width: 769px) {
          font-size:clamp(28px, 1.53vw + 22.28px, 44px);
        }
        strong{
          font-size:clamp(32px, 2.83vw + 21.37px, 60px);
          @media screen and (min-width: 769px) {
            font-size:clamp(36px, 2.43vw + 26.89px, 60px);
          }
        }
      }
      p{
        font-size: clamp(30px, 2.19vw + 21.8px, 51.6px);
        font-weight: 700;
        line-height: 1.5;
        text-align: center;
      }
      .yotei{
          font-size:clamp(20px, 0.65vw + 17.57px, 26.4px);
          font-weight: 400;
          line-height: 1.5;
          text-align: center;
     
        }
    }
  }
  .event{
    .event-inner{
      width: 100%;
      max-width: 1040px;
      margin: 0 auto;
  padding: calc(100 / 1363 * 100%) ;
      @media screen and (min-width: 769px) {
      padding: calc(50 / 1363 * 100%) 0;
      }
      .title{
     margin-bottom: calc(30 / 1363 * 100%);
      }
      p{
        font-size: clamp(16px, 0.6vw + 13.74px, 20px);
        line-height: 2;
          text-align: center;
    
        @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%);
      }
    }
  }
  .support{
    .support-inner{
      width: 100%;
      max-width: 1040px;
      margin: 0 auto;
    padding: calc(100 / 1363 * 100%) ;
      @media screen and (min-width: 769px) {
      padding: calc(50 / 1363 * 100%) 0;
      }
    }
    .title{
      margin-bottom: calc(30 / 1363 * 100%);
    }
    h3{
      font-size:clamp(18px, 1.21vw + 13.45px, 30px);
      font-weight: 500;
      line-height: 1.5;
      margin-bottom: calc(30 / 1363 * 100%);
    }
    p{
      font-size: clamp(16px, 0.6vw + 13.74px, 20px);
      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;
        }
      }
    }
  }
}
}