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


#nohgaku{
.wrapper{
  background: url(../img/nohgaku/img-mv-sp.webp) no-repeat center 73px;
  background-size: contain;
  @media screen and (min-width: 769px) {
  background: url(../img/nohgaku/img-mv.webp) no-repeat center 73px;
  background-size: contain;
  }
    .about{
      padding-top: calc(1115 / 746 * 100%);
    
      margin: 0 auto;
      @media screen and (min-width: 769px) {
        padding-top: calc(1363 / 1363 * 100%);
          width:calc(700 / 1363 * 100%);
      }
      .inner{
                max-width: calc(1240 / 1363 * 100%);
                @media screen and (min-width: 769px) {
                max-width: 60.3081vw;
            }
      }
      .title{
        margin-top: calc(220 / 1363 * 100%);
        font-size: clamp(18px, 0.41vw + 16px, 24px);
        @media screen and (min-width: 769px) {
      font-size: clamp(32px, 0.61vw + 17.72px, 40px);
        }
      }
      .list{
        li{
          margin-bottom: calc(80 / 1363 * 100%);
          .number{
            font-size: clamp(14px, 0.61vw + 17.72px, 16px);
            span{
              color: var(--gold-sub);
            }
            @media screen and (min-width: 769px) {
            font-size: clamp(18px, 0.61vw + 17.72px, 20px);
            }
          }
          h3{
            text-align: justify;
            font-size: clamp(16px, 0.61vw + 17.72px, 20px);
            font-weight: 700;
            line-height: 1.4;
            margin: calc(10 / 1363 * 100%) 0;
            @media screen and (min-width: 769px) {
              font-size: clamp(20px, 0.61vw + 17.72px, 26px);
            }
          }
          .text{
            line-height: 2;
            strong{
              font-weight: 700;
              font-size: clamp(16px, 0.61vw + 17.72px, 18px);
              @media screen and (min-width: 769px) {
             font-size: clamp(18px, 0.61vw + 17.72px, 20px);
              }
            }
          }
        }

      }
    }
    .program{
padding-top: calc(50 / 700 * 100%);
     width: 100%;
      margin: 0 auto;
      @media screen and (min-width: 769px) {
  width: calc(700 / 1363 * 100%);
      }
      /* .inner{
                max-width: calc(1240 / 1363 * 100%);
                @media screen and (min-width: 769px) {
                max-width: 60.3081vw;
         
                }
              } */
    .title-sub{
      font-size:clamp(16px, 0.81vw + 20.96px, 18px);
      font-weight: 700;
      line-height: 1.4;
        margin-bottom:calc(80 / 1363 * 100%);
        border-top: 4px solid var(--black);
        border-bottom: 1px solid var(--black);
        position: relative;
        padding: calc(30 / 1363 * 100%) 0;
        @media screen and (min-width: 769px) {
       font-size:clamp(18px, 0.61vw + 15.72px, 24px);
        line-height: 1.0;
        }
        &::before{
          content: "";
          display: block;
          width:100%;
          position: absolute;
          top: 0;
          height:  1px;
          background-color: var(--black);
          margin: calc(10 / 1363 * 100%) auto 0;
        }
    }
    .notes{
      text-align: center;
       font-size:clamp(10px, 0.61vw + 17.72px, 12px);
      @media screen and (min-width: 769px) {
        font-size:clamp(12px, 0.61vw + 17.72px, 15px);
      }
    }
     .overview-list{
        text-align: left;
      ul{
        li{
         
          margin-bottom: calc(50 / 815 * 100%);
          line-height: 1.6;
          @media screen and (min-width: 769px) {
      display: grid;
          grid-template-columns: 180px 1fr;
          gap: calc(10 / 1363 * 100%);
            line-height: 1.8;
          }
          h4{
            font-size:clamp(14px, 0.61vw + 17.72px, 15px);
            font-weight: 700;
            line-height: 1.6;
            @media screen and (min-width: 769px) {
          font-size:clamp(16px, 0.61vw + 17.72px, 18px);
            }
            span{
              font-size:clamp(10px, 0.61vw + 17.72px, 12px);
              font-weight: 400;
              @media screen and (min-width: 769px) {
                font-size:clamp(12px, 0.61vw + 17.72px, 14px);
              }
            }
          }
        }
        p{
          font-size:clamp(14px, 0.61vw + 17.72px, 15px);
          @media screen and (min-width: 769px) {
          font-size:clamp(16px, 0.61vw + 17.72px, 18px);
            }
            span{
              font-size:clamp(14px, 0.61vw + 17.72px, 16px);
            }
            
        }
      }
      .programme{
        p{
          padding-left: 4rem;
          line-height: 1.8;
          @media screen and (min-width: 769px) {
            padding-left: 0;
          }
        }
      }
      .info{
        padding-top: calc(50 / 700 * 100%);
        @media screen and (min-width: 769px) {
          padding-top: calc(100 / 700 * 100%);
        }
        li{
            display: grid;
            grid-template-columns: 100px 1fr;
            gap: calc(10 / 1363 * 100%);
            align-items: baseline;
            @media screen and (min-width: 769px) {grid-template-columns: 180px 1fr;
        }
      }
        p{
          font-weight: 700;
          
          .small{
            font-weight: 400;
            font-size:clamp(13px, 0.61vw + 17.72px, 14px);
@media screen and (min-width: 769px) {
    font-size:clamp(14px, 0.61vw + 17.72px, 15px);
        }
        }
      }
    }
      .credits{
          li{
            display: grid;
            grid-template-columns: 100px 1fr;
            gap: calc(10 / 1363 * 100%);
            align-items: baseline;
            h4,
            p{
              font-size:clamp(12px, 0.61vw + 17.72px, 14px);
              font-weight: 400;
              align-items: anchor-center;
              @media screen and (min-width: 769px) {
                font-size:clamp(14px, 0.61vw + 17.72px, 16px);
              }
            }
          }
      }
    }
    .ticket{
    .title-line{
      background-color: #666666;
      text-align: justify;
      padding:calc(20 / 1363 * 100%);
      font-size:clamp(15px, 0.61vw + 17.72px, 17px);
      font-weight: 700;
      color: var(--white);
      line-height: 1.4;
      margin-bottom: calc(30 / 700 * 100%);
      @media screen and (min-width: 769px) {
        padding: calc(10 / 1363 * 100%) calc(20 / 1363 * 100%);
  font-size:clamp(20px, 0.61vw + 17.72px, 22px);
      }
      &.color1{
      border-left: 13px solid #ff80a8;
      }
      &.color2{
        border-left: 13px solid #7694bc;
      }
      &.color3{
        border-left: 13px solid #9fd7af;
      }
      &.color4{
        border-left: 13px solid #fde474;
      }
      &.color5{
        border-left: 13px solid #af87c9;
      }
      &.color6{
        border-left: 13px solid #f6bba7;
      }
      &.mb50{
        margin-bottom: calc(50 / 700 * 100%);
      }
      &.mb70{
        margin-bottom: calc(70 / 700 * 100%);
      }
    }
    .overview-list{
      ul{
        @media screen and (min-width: 769px) {
       padding-left: 1rem;
        }
        li{
          line-height: 1.8;
          div{
            .marker{
              margin-left: 2.5rem;
              text-indent: -2.2rem;
              &::before{
                content: "◉";
                margin-right: 0.5rem;
              }
            }
            span{
              font-size:clamp(12px, 0.61vw + 17.72px, 14px);
              @media screen and (min-width: 769px) {
                font-size:clamp(14px, 0.61vw + 17.72px, 16px);
              }
            }
          }
        }
      }
      
    }
    
  }
  .btn-ticket{
      display: block;
      width: 100%;
    max-width: 80%;
      margin: 0 auto;
      text-align: center;
      padding:2rem;
      background-color: var(--gold-sub);
   border: solid 1px #bebebe;
  box-shadow: inset 0 0 0 5px #fff;
  font-size:clamp(13px, 0.61vw + 17.72px, 16px);
  font-weight: 700;
  color: var(--white);
  position: relative;
  @media screen and (min-width: 769px) {
  font-size:clamp(18px, 0.61vw + 17.72px, 20px);
     max-width: 340px;
  }
  &:after{
    content: "";
    display: block;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background: url(../img/nohgaku/icon-arrow.svg) no-repeat center center;
    background-size: 18px 18px;
    @media screen and (min-width: 769px) {
       width: 24px;
    height: 24px;
  background-size: 24px 24px;
    }
  }
    }
    }
}
}