@charset "UTF-8";
/* グロナビに初めから下線 */
#campaign{
  .u-line {
      background-size: 100% 1px !important;
  }
}

.wrap {
  padding: 0 var(--spacing-3);
  width: 100%;
  display: flex;
  justify-content: center;
  @media screen and (max-width:768px) {
  padding: 0 10px;
  }
}

.section__inner {
  padding: var(--spacing-9) 0 96px 0;
  display: flex;
  justify-content: center;
}

.section__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: var(--spacing-7);
  max-width: 960px;
  width: 100%;
}

.section-wrapper {
  margin: var(--spacing-10) 0;
  display: flex;
  flex-direction: column;
  row-gap: var(--spacing-10);
}

/* section-01
----------------------------------- */
.section-01 {
  padding-top: calc(96px + var(--header-height));
}

/* section-02
----------------------------------- */
.section-02 {
  border-radius: var(--radius-xxxl);
  background-color: var(--color-white);
  .section-02__inner{
    display: flex;
    flex-direction: column;
    row-gap: var(--spacing-3);
    justify-content: center;
  }
}

.logo_wrap {
  display: flex;
  gap: var(--spacing-1) 0;
  justify-content: center;
  flex-wrap: wrap;
}

.logoBox {
  width: 200px;

  @media screen and (max-width:768px) {
    width: 150px;
  }

  .logo__img {
    height: 176px;
    display: grid;
    place-content: center;

    img {
      height: auto;
    }

    img:nth-child(1) {
      max-width: 136px;
    }

    img:nth-child(2) {
      max-width: 140px;
    }

    img:nth-child(3) {
      max-width: 154px;
    }

    img:nth-child(4) {
      max-width: 131px;
    }

    img:nth-child(5) {
      max-width: 98px;
    }
  }

  .logo__name {
    font-size: var(--typo-fz-16);
    text-align: center;
    line-height: 1.4;
    color: #001222;
    font-weight: bold;
    padding: var(--spacing-0_5) var(--spacing-1);
  }
}

/* section-03
----------------------------------- */
.section-03 {
  background-image: url(/10th-anniversary/img/campaign/section-present_bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: var(--radius-xxxl);
}

.present-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-4);

  @media screen and (max-width:768px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media screen and (max-width:500px) {
    grid-template-columns: 1fr;
  }

  .present__item {
    background-color: var(--color-white);
    box-shadow: 0px 12px 20px 0px rgba(58, 175, 197, 0.15);
    border-radius: 80px;
    padding: var(--spacing-5) var(--spacing-2);
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 12px;

    .present__name {
      font-size: var(--typo-fz-18);
      font-weight: bold;
      color: var(--color-primary);
      line-height: 1.4;
      letter-spacing: 0;
      display: inline-flex;
      align-items: baseline;

      small {
        font-size: var(--typo-fz-14);
        margin-left: 0.2rem;
      }
    }

    .present__image{
      height: 180px;
      display: grid;
      place-content: center;
    }

    .present__detail {
      font-weight: bold;
      line-height: 1.4;
      letter-spacing: 0;
      text-align: center;
    }
  }
}

/* section-04
----------------------------------- */
.section-04 {
  background-color: var(--color-white);
  border-radius: var(--radius-xxxl);
}

.text_underline {
  text-decoration: underline;
}

.flow-wrap {
  display: flex;
  justify-content: center;
  gap: var(--spacing-7);
  align-items: center;

  @media screen and (max-width:940px) {
    flex-direction: column;
    gap: var(--spacing-4);
  }

  .flow {
    margin-top: 58px;
    background-color: var(--color-gray-100);
    width: 320px;
    height: 168px;
    display: grid;
    place-content: center;
    place-items: center;
    row-gap: 12px;
    border-radius: 40px;
    flex-shrink: 0;
    position: relative;

    img {
      position: absolute;
      top: -58px;
      left: 50%;
      transform: translateX(-50%);
      width: 80px;
      height: 80px;
    }
  }

  .arrow {
    width: 38px;
    height: 24px;
    flex-shrink: 0;

    @media screen and (max-width:940px) {
      transform: rotate(90deg);
      height: 40px;
    }
  }
}

.x-wrap {
  background: rgba(0, 91, 172, 0.1);
  padding: var(--spacing-3);
}


.x-embed-container iframe {
  @media screen and (min-width:601px) {
    min-width: 477px;
  }

  @media screen and (max-width:600px) {
    width: 100% !important;
  }
}

.note {
  width: 100%;
  background-color: var(--color-gray-100);
  border-radius: 80px;
  padding: var(--spacing-5) var(--spacing-6);
  @media screen and (max-width:768px) {
    padding: var(--spacing-3) var(--spacing-3) var(--spacing-8) var(--spacing-3);
  }

  >ul {
    margin-top: 28px;

    li {
      font-size: var(--typo-fz-14);
      line-height: 1.4;
      letter-spacing: 0;

      >ul {
        padding-left: 1rem;
      }
    }
  }
}

.banner_wrapper {
  margin: var(--spacing-10) 0;
}

.banner {
  box-shadow: 0px 20px 45px 0px rgba(0, 91, 172, 0.25);
  overflow: hidden;
  background-color: var(--color-white);
  background-color: var(--color-white);
  border-radius: var(--radius-xxxl);
  padding: 108px var(--spacing-3) var(--tab-height) var(--spacing-3);
  width: 100%;
  position: relative;

  .accentHeader {
    top: 40px;
  }

  .banner-img {
    position: absolute;

    &.hukidashi {
      width: 20%;
      top: 80px;
      right: 2%;

      @media screen and (min-width:1281px) {
        right: 81px;
        width: 165px;
      }

      @media screen and (max-width:768px) {
        top: 140px;
      }
    }

    &.ribbon {
      width: 523px;
      right: -37px;
      bottom: 0;
    }
  }

  small {
    width: 70%;
    max-width: 648px;
    margin-inline: auto;

    @media screen and (max-width:768px) {
      width: 100%;
    }
  }
}

.accentHeader {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);

  img {
    width: 521px;
  }
}

:root {
  --tab-width: 472px;
  --tab-text-width: 224px;
  --tab-height: 165px;
  --tab-position: 12%;

  @media screen and (max-width:1100px) {
    --tab-position: 3%;
  }
  @media screen and (max-width:930px) {
    --tab-width: 300px;
    --tab-text-width: 170px;
    --tab-height: 120px;
    --tab-position: 10%;
  }
  @media screen and (max-width:660px) {
    --tab-width: 196px;
    --tab-text-width: 120px;
    --tab-height: 80px;
    --tab-position: 8%;
  }
    @media screen and (max-width:430px) {
    --tab-position: 3%;
  }
}

.tab-wrap {
  .tab {
    width: var(--tab-width);
    height: var(--tab-height);
    background: linear-gradient(90deg, #005BAC -23.73%, #3AAFC5 103.39%);
    clip-path: url(#tab-clip-shape);
    display: grid;
    place-content: center;
    position: absolute;
    bottom: 0;

    img {
      width: var(--tab-text-width);
    }

    &.day1 {
      left: var(--tab-position);
    }

    &.day2 {
      right: var(--tab-position);
    }
  }
}

[class*="decoration-"] {
  position: absolute;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  mix-blend-mode: multiply;

  &.decoration-01 {
    top: 20.8%;
    right: -305px;
    width: 910px;
    height: 910px;
    background-image: url(/10th-anniversary/img/common/gmosign_10th_kazari1.png);
  }

  &.decoration-02 {
    top: 33.7%;
    left: -184px;
    width: 1214px;
    height: 1214px;
    background-image: url(/10th-anniversary/img/common/gmosign_10th_kazari2.png);
  }

  @media screen and (max-width:1030px) {
    &.decoration-02 {
      right: 10px;
      left: initial;
    }
  }
  @media screen and (max-width:600px) {
    &.decoration-01{
      top: 22%;
      left: 30%;
      width: 600px;
      height: 600px;
    }
    &.decoration-02 {
      right: 5%;
      width: 700px;
      height: 700px;
    }
  }
}