/* ==========================================
   schedule
   ========================================== */
@charset "utf-8";

.sp {
  display: none;
}

@media (max-width: 768px) {
  .sp {
    display: block;
  }
  .pc {
    display: none;
  }
}

.main-visual {
  background-image: none;
}

.main-content {
   position: relative;
   z-index: 0;
   margin: 20px 0 auto;
   padding: 40px 0;
}

.section-block {
  max-width: 1200px;
  padding: 70px 100px;
  background-color: transparent;
  border: none;
}

@media (max-width: 768px) {
  .section-block {
    max-width: 98%;
    padding: 4%;
  }
}

#event {
  & h2.section-title {
    color: #fff;
    padding: 0;
    font-size: 2.125rem;
    font-weight: normal;
    position: relative;
    margin-bottom: 70px;
    text-align: center;
  }

  & h2.section-title::after {
    content: "";
    background-image: url(../../img/neon-line.png);
    width: 60%;
    height: 14px;
    display: block;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
  }
}

#event .event-content {
  & h3 {
    text-align: center;
    font-size: 1.75rem;
    margin-bottom: 70px;
  }
}

@media (max-width: 768px) {
  #event .event-content {
    & h3 {
      font-size: 1.5rem;
      margin-bottom: 20px;
    }
  }
}

#event .event-content {
  & .gradient-background {
    width: 100%;
    height: auto;
  
    /* ベースの色（中央付近の紫） */
    background-color: #743a99;
    
    /* 4つの角から放射状に色を重ねる */
    background-image:
      /* 左上: 鮮やかなマゼンタピンク */
      radial-gradient(circle at 0% 0%, rgba(213, 16, 122, 0.9) 0%, rgba(213, 16, 122, 0) 60%),
      /* 右上: 深い青紫 */
      radial-gradient(circle at 100% 0%, rgba(58, 28, 123, 0.9) 0%, rgba(58, 28, 123, 0) 60%),
      /* 左下: 明るい水色 */
      radial-gradient(circle at 0% 100%, rgba(92, 187, 240, 0.9) 0%, rgba(92, 187, 240, 0) 65%),
      /* 右下: 淡いラベンダーピンク */
      radial-gradient(circle at 100% 100%, rgba(212, 190, 226, 0.8) 0%, rgba(212, 190, 226, 0) 60%);

    /* グラデーションが滑らかに馴染むように調整 */
    background-blend-mode: normal;
  }
}

#event .event-content {
  font-family: "LINE Seed JP", sans-serif;
}

#event .event-content .item-content {
  margin-bottom: 60px;
}

#event .event-content .item-content .recommend {
  padding: 75px 4%;
}

@media (max-width: 768px) {
  #event .event-content .item-content .recommend {
    padding: 36px 4%;
  }
}

#event .event-content .item-content .recommend .item-list {
  & .item {
  background-color: transparent;
  display: flex;
  justify-content: space-between;
  border-bottom: solid 1px #fff;
  border-radius: 0;
  padding-bottom: 60px;

    & .left {
      width: 50%;
    }
    & .right {
      width: 50%;
      
      & p {
        color: #fff;
      }
    }
  }
}

@media (max-width: 768px) {
  #event .event-content .item-content .recommend .item-list {
    & .item {
    flex-direction: column;
    padding-bottom: 40px;
    padding-left: 0;
    padding-right: 0;

      & .left {
        width: 100%;
        text-align: center;
      }
      & .right {
        width: 100%;
      }
    }
  }
}

#event .event-content .item-content .recommend .item-list {
  padding-top: 0;

  & .item {
    & .right {
      & .img {
        margin-bottom: 20px;
      }
      & .txt .txt-title {
        font-size: 1.25rem;
        margin-bottom: 20px;
        & span {
          font-size: 1.75rem;
        }
      }
      & .flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        & .local {
          border: solid 3px #fff;
          border-radius: 50px;
          padding: 2px 32px;
          line-height: 1.3;
          font-size: 1.125rem;
        }
        & .time {
          font-size: 1rem;
        }
      }
      & .attention {
        background-color: #ff0;
        padding: 4px 12px;
        & p {  
          color: #000;
        }
      }
    }
  }

  & .item02 {
    & .right {
      & .txt {
        & .txt01 {
          font-size: 1.25rem;
          margin-bottom: 10px;
        }
        & .txt02 {
          font-size: 1.75rem;
          margin-bottom: 10px;
        }
      }
      & .flex {
        & .local {
          padding: 12px 32px;
        }
      }
    }
  }

  & .item03 {
    & .left {
      width: 30%;
    }
    & .right {
      width: 70%;
      padding-left: 4%;
      & .txt02 {
        font-size: 1.5rem;
        margin-bottom: 20px;
      }
      & .flex {
        justify-content: flex-start;
        & .local {
          padding: 12px 32px;
          margin-right: 20px;
        }
      }
    }
  }

  & .item04 {
    & .left {
      width: 30%;
    }
    & .right {
      width: 70%;
      padding-left: 4%;
      & .txt02 {
        font-size: 1.5rem;
        margin-bottom: 20px;
      }
      & .flex {
        justify-content: flex-start;
        & .local {
          padding: 12px 32px;
          margin-right: 20px;
          position: relative;
        }
      }
    }
  }

  & .item05 {
    & .left {
      width: 30%;
    }
    & .right {
      width: 70%;
      padding-left: 4%;
      & .txt02 {
        font-size: 1.5rem;
        margin-bottom: 20px;
      }
      & .flex {
        justify-content: flex-start;
        & .local {
          padding: 12px 32px;
          margin-right: 20px;
          position: relative;
        }
      }
    }
  }

  & .item06 {
    & .left {
      width: 50%;
      & img {
        margin-bottom: 20px;
      }
      & p {
        color: #fff;
      }
      & p.txt01 {
        font-size: 1.25rem;
        margin-bottom: 8px;
      }
      & p.txt02 {
        font-size: 1.5rem;
        line-height: 1.2;
        margin-bottom: 12px;
      }
      & .local {
        border: solid 3px #fff;
        border-radius: 50px;
        padding: 12px 32px;
        line-height: 1.3;
        font-size: 1.125rem;
        display: inline-block;
        margin-bottom: 12px;
      }
    }
    & .right {
      width: 50%;
      padding-left: 4%
    }
  }

  & .item07 {
    display: block;
    border-bottom: none;
    padding-bottom: 0;
    & .img {
      margin-bottom: 20px;
    }
    & .txt {
      & .txt01 {
        font-size: 1.25rem;
        color: #fff;
      }
      & .txt02 {
        font-size: 1.5rem;
        color: #fff;
        margin-bottom: 12px;
      }
    }

    & .flex {
      display: flex;
      & .local {
        border: solid 3px #fff;
        border-radius: 50px;
        padding: 12px 32px;
        font-size: 1.125rem;
        & p {
          color: #fff;
        }
      }
      & .time {
        padding-left: 4%;
        & p {
          color: #fff;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  #event .event-content .item-content .recommend .item-list {
    & .item {
      & .left {
        margin-bottom: 20px;
      }
      & .right {
        text-align: center;

        & .img {
          margin-top: 10px;
          margin-left: auto;
          margin-right: auto;
          margin-bottom: 20px;
          text-align: center;
          & img.day {
            width: 80px;
          }
        }
        & .txt .txt-title {
          font-size: 1rem;
          & span {
            font-size: 1.5rem;
          }
        }
        & .flex {
          flex-direction: column;
          & .local {
            font-size: 1rem;
            margin-bottom: 10px;
          }
        }
        & .attention {
          & p {  
            font-size: .875rem;
          }
        }
      }
    }

    & .item02 {
      & .right {
        & .txt {
          & .txt01 {
            font-size: 1rem;
          }
          & .txt02 {
            font-size: 1.5rem;
          }
        }
      }
    }

    & .item03 {
      & .left {
        width: 100%;
      }
      & .right {
        width: 100%;
        padding-left: 4%;
        & .txt02 {
          font-size: 1.5rem;
          margin-bottom: 20px;
        }
        & .flex {
          justify-content: flex-start;
          & .local {
            padding: 12px 32px;
            margin-right: 20px;
          }
        }
      }
    }

    & .item04 {
      & .left {
        width: 100%;
      }
      & .right {
        width: 100%;
        padding-left: 0;
        & .flex {
          & .local {
            margin-right: 0;
            margin-bottom: 30px;
          }
        }
      }
    }

    & .item05 {
      & .left {
        width: 100%;
      }
      & .right {
        width: 100%;
        padding-left: 0;
        & .flex {
          & .local {
            margin-right: 0;
            margin-bottom: 30px;
          }
        }
      }
    }

    & .item06 {
      & .left {
        width: 100%;
        text-align: center;
        & p.txt01 {
          font-size: 1rem;
        }
        & p.txt02 {
          font-size: 1.5rem;
        }
        & .imgsp {
          margin-bottom: 0;
        }
      }
      & .right {
        width: 100%;
        padding-left: 0;
      }
    }

    & .item07 {
      text-align: center;
      & .txt {
        & .txt01 {
          font-size: 1rem;
        }
      }

      & .flex {
        flex-direction: column;
        & .local {
          display: inline-block;
          margin-bottom: 10px;
        }
        & .time {
          text-align: left;
          padding-left: 0;
        }
      }
    }
  }
}

#event .event-content .item-content .recommend .item-list {
  & .item04 .right .flex .local::after {
    content: "※雨天時1F中央ステージ";
    display: block;
    position: absolute;
    font-size: .75rem;
    width: 100%;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (max-width: 768px) {
  #event .event-content .item-content .recommend .item-list {
    & .item04 .right .flex .local::after {
      font-size: .75rem;
      width: 100vw;
      bottom: -22px;
      display: inline-block;
    }
  }
}

#event .event-content .item-content .recommend .item-list {
  & .item05 .right .flex .local::after {
    content: "※雨天時1F中央ステージ";
    display: block;
    position: absolute;
    font-size: .75rem;
    width: 100%;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (max-width: 768px) {
  #event .event-content .item-content .recommend .item-list {
    & .item05 .right .flex .local::after {
      font-size: .75rem;
      width: 100vw;
      bottom: -22px;
      display: inline-block;
    }
  }
}

#event .event-content .item-content .day {
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  #event .event-content .item-content .item-flex {
    flex-direction: column;
  }
}

#event .event-content .item-content .item-list {
  display: flex;
  flex-direction: column;
  padding-top: 70px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;

  & .item {
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;

    & h4 {
      color: #000;
      border-bottom: solid 2px #435CB1;
      margin-bottom: 10px;
      font-size: 1.25rem;
      font-weight: bold;
    }

    & dl {
      color: #000;
      display: flex;
      flex-wrap: wrap;
      width: 100%;

      & dt {
        background-color: #435CB1;
        color: #fff;
        padding: 0px 6px;
        border-radius: 4px;
        text-align: center;
        width: 15%;
        margin-bottom: 10px;
        height: 24px;
        line-height: 1.5;
      }

      & dd {
        width: 85%;
        margin-bottom: 10px;
        padding-left: 2%;
        font-size: .875rem;

        & span {
          color: #023793;
          margin-right: 4px;
        }
      }
    }

    & p {
      color: #000;
    }
  }
}

@media (max-width: 768px) {
  #event .event-content .item-content .item-list {
    & .item {
      & dl {
        & dt {
          width: 30%;
        }
        & dd {
          width: 70%;
        }
      }

      & p {
        color: #000;
      }
    }
  }
}

@media (max-width: 768px) {
  #event .event-content .item-content .item-list {
    padding-left: 0;
    padding-right: 0;

    & .item .flex-column {
      flex-direction: column;
      
        & dl {
        & dt {
          width: 30% !important;
        }
        & dd {
          width: 70% !important;;
        }
      }
      & .img {
        width: 100%;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
      }
    }
  }
}

@media (max-width: 768px) {
  #event .event-content .item-content .item-list {
    & .item .flex-column {
      & div.width {
        width: 100% !important;
      }
    }
  }
}

@media (max-width: 768px) {
  #event .event-content .item-content .item-list.right {
    padding-top: 0;
  }
}
#event .event-content .item-content .item-list.left {
  padding-right: 10px;
  width: 50%;
}
#event .event-content .item-content .item-list.right {
  padding-left: 10px;
  width: 50%;
}

@media (max-width: 768px) {
  #event .event-content .item-content .item-list.left {
    padding-right: 0;
    width: 100%;
  }
  #event .event-content .item-content .item-list.right {
    padding-left: 0;
    width: 100%;
  }
}

#event .event-content .item-content .item-list .item:last-child {
  margin-bottom: 0;
}

#event .event-content .item-content .item-list {
  & .item {
    & dl.list-food {
      font-size: 0.875rem;

      & dt.midashi {
        background-color: #D2D8EF;
        font-size: 1rem;
        padding-top: 4px;
        padding-bottom: 4px;
      }

      & dd.midashi {
        background-color: #D2D8EF;
        text-align: center;
        font-size: 1rem;
        padding-top: 4px;
        padding-bottom: 4px;
      }

      & dt {
        background-color: transparent;
        color: #000;
        font-weight: normal;
        width: 30%;
        height: auto;
        border-left: solid 1px #333;
        border-top: solid 1px #333;
        border-radius: 0;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      & dd {
        width: 70%;
        border: solid 1px #333;
        border-right: solid 1px #333;
        border-top: solid 1px #333;
        border-bottom: 0;
        border-radius: 0;
        margin-bottom: 0;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-right: 10px;
        display: flex;
        align-items: center;
      }
    }
  }
}

#event .event-content .item-content .item-list .item dl.list-food:last-child {
  border-bottom: solid 1px #000;
}