@charset "UTF-8";
/*======================
base
====================== */
* {
  min-inline-size: 0;
  text-decoration: none;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
ul {
  list-style-type: none;
}
footer {
  margin-top: 0;
}
@media screen and (max-width: 834px) {
  div > p {
    font-size: inherit;
  }
}

/*======================
汎用クラス
====================== */
.subaruevent {
  & .pcView {
    display: block;
  }
  @media screen and (max-width: 768px) {
    & .pcView {
      display: none;
    }
  }

  & .spView {
    display: none;
  }
  @media screen and (max-width: 768px) {
    & .spView {
      display: block;
    }
  }

  & .dib {
    display: inline-block;
  }

  & .main__inner {
    width: min(100%, 1440px);
    margin: 0 auto;
  }
}

/*======================
メインビジュアル
====================== */
.subaruevent .mainvl picture {
  display: block;
}
@media screen and (max-width:480px) {
  .mainvl {
    aspect-ratio: 1/1;
  }
}

/*======================
セクション・コンテンツ
====================== */
.subaruevent .section {
  width: 100%;
}

/*======================
ページ固有CSS
====================== */
.subaruevent {
  & .main__inner {
    position: relative;
    &::before,
    &::after {
      position: absolute;
      bottom: 0;
      width: 10%;
      height: 100%;
      z-index: 10;
      content: "";
    }
    &::before {
      left: 0;
      background: url(./img/bg_balloon_left.webp) no-repeat left bottom / contain;
    }
    &::after {
      right: 0;
      background: url(./img/bg_balloon_right.webp) no-repeat right bottom / contain;
    }
    & .section__lead {
      background: #E8F2FB;
      margin: 0 auto !important;
      padding: min(80/1440*100dvw,80px) 0;
      & .lead__inner {
        width: min(80%, 1000px);
        margin: 0 auto;
        & .lead__txt {
          padding-bottom: min(60/1440*100dvw,60px);
          text-align: center;
          font-size: clamp(10px,24/1440*100dvw,24px);
          font-weight: 600;
          line-height: 2;
          & span {
            background: linear-gradient(transparent 60%, #FFE400 0%);
            font-size: clamp(10px,24/1440*100dvw,24px);
            color: #0068D5;
          }
        }
        & .lead__event {
          width: 80%;
          margin: auto;
          margin-bottom: min(60/1440*100dvw,60px);
          padding: min(20/1440*100dvw,20px) 0;
          text-align: center;
          background-color: #fff;
          border: 4px solid #0068D5;
          & p {
            font-size: clamp(10px,24/1440*100dvw,24px);
            font-weight: 600;
            margin-bottom: min(20/1440*100dvw,20px);
          }
          & dl {
            display: inline-grid;
            grid-template-columns: auto 1fr;
            grid-template-rows: auto auto;
            gap: 0 1em;
            text-align: left;
            font-size: clamp(10px,20/1440*100dvw,20px);
            & dt {
              font-weight: 600;
            }
            & dd {
              margin-bottom: min(10/1440*100dvw,10px);
              & span {
                display: inline-block;
                font-size: clamp(10px,20/1440*100dvw,20px);
              }
            }
          }
        }
        & .lead__img {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: min(26/1440*100dvw,26px);
          margin-bottom: min(60/1440*100dvw,60px);
          & img {
            border: min(8/1440*100dvw,8px) solid #fff;
          }
        }
        & .btn {
          & a {
            display: block;
            width: 80%;
            margin: auto;
            & .btn__txt {
              width: 100%;
              margin: auto;
              padding: min(10/1440*100dvw,10px) min(50/1440*100dvw,50px);
              background-color: #0068D5;
              text-align: center;
              font-size: clamp(10px,24/1440*100dvw,24px);
              font-weight: 600;
              color: #fff;
            }
          }
        }
      }
    }
    & .section__present {
      & [class^="present__0"] {
        padding: min(60/1440*100dvw,60px) 0 min(80/1440*100dvw,80px);
        background-image: repeating-linear-gradient(45deg, #ffffff1f, #ffffff1f 10px, transparent 10px, transparent 20px);
        & .present__inner {
          width: min(80%, 1000px);
          margin: auto;
          & .btn {
            width: 100%;
            padding-bottom: min(60/1440*100dvw,60px);
            background-color: #fff;
            & a {
              display: block;
              width: 80%;
              margin: auto;
              text-align: center;
              & .btn__txt {
                width: 100%;
                padding: min(10/1440*100dvw,10px) min(50/1440*100dvw,50px);
                text-align: center;
                font-size: clamp(10px,24/1440*100dvw,24px);
                font-weight: 600;
                color: #fff;
                & span {
                  display: inline-block;
                  font-size: clamp(10px,24/1440*100dvw,24px);
                }
              }
            }
          }
        }
      }
      & .present__01 {
        background-color: #0068D5;
      }
      & .present__02 {
        background-color: #FF76A1;
        & .present__inner {
          & .btn {
            position: relative;
            & a {
              & .btn__txt {
                background-color: #FFF338;
                color: #0068D5;
              }
            }
            & [class^="btn__deco-"] {
              position: absolute;
              bottom: 10%;
              width: min(95/768*100dvw,95px);
            }
            & .btn__deco-left {
              left: 5%;
            }
            & .btn__deco-right {
              right: 5%;
            }
          }
        }
      }
      & .present__03 {
        background-color: #FFF338;
        & .present__inner {
          & .btn {
            & a {
              & .btn__txt {
                display: inline-flex;
                justify-content: center;
                align-items: center;
                background-color: #0068D5;
                color: #fff;
                & img {
                  width: min(56/1440*100dvw,56px);
                }
              }
            }
          }
        }
      }
    }
  }
  @media screen and (max-width: 768px) {
    & .main__inner {
      &::before,
      &::after {
        width: 14%;
      }
      & .section__lead {
        padding: min(80/768*100dvw,80px) 0;
        & .lead__inner {
          & .lead__txt {
            padding-bottom: min(60/768*100dvw,60px);
            font-size: clamp(10px,24/768*100dvw,24px);
            & span {
              font-size: clamp(10px,24/768*100dvw,24px);
            }
          }
          & .lead__event {
            width: 100%;
            margin-bottom: min(40/768*100dvw,40px);
            padding: min(20/768*100dvw,20px);
            & p {
              font-size: clamp(10px,24/768*100dvw,24px);
              margin-bottom: min(20/768*100dvw,20px);
            }
            & dl {
              font-size: clamp(10px,20/768*100dvw,20px);
              & dt {
                font-size: clamp(10px,20/768*100dvw,20px);
              }
              & dd {
                font-size: clamp(10px,20/768*100dvw,20px);
                margin-bottom: min(10/768*100dvw,10px);
                & span {
                  font-size: clamp(10px,20/768*100dvw,20px);
                }
              }
            }
          }
          & .lead__img {
            grid-template-columns: repeat(2, 1fr);
            gap: min(26/768*100dvw,26px);
            margin-bottom: min(60/768*100dvw,60px);
            & img {
              border: min(8/768*100dvw,8px) solid #fff;
            }
          }
          & .btn {
            & a {
              & .btn__txt {
                width: 100%;
                padding: min(10/768*100dvw,10px) min(50/768*100dvw,50px);
                font-size: clamp(10px,20/768*100dvw,20px);
              }
            }
          }
        }
      }
      & .section__present {
        & [class^="present__0"] {
          padding: min(60/768*100dvw,60px) 0 min(80/768*100dvw,80px);
          & .present__inner {
            & .btn {
              padding-bottom: min(60/768*100dvw,60px);
              & a {
                & .btn__txt {
                  padding: min(10/768*100dvw,10px) min(50/768*100dvw,50px);
                  font-size: clamp(10px,20/768*100dvw,20px);
                  & span {
                    font-size: clamp(10px,20/768*100dvw,20px);
                  }
                }
              }
            }
          }
        }
        & .present__03 {
          & .present__inner {
            & .btn {
              & a {
                & .btn__txt {
                  padding: min(10/768*100dvw,10px) 0;
                  & img {
                    width: min(56/768*100dvw,56px);
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}