:root { --glay: #636363; }

.breadcrumb-content { padding: 5px 0;
  @media screen and (min-width: 768px) { padding: 10px 0; } }

.kome { margin-bottom: 20px; font-size: 11px; color: var(--glay); }
.expired { color: red; text-align: center; font-weight: 500; background-color: #FAE0E0; padding: 10px; }
.ctr { text-align: center; }
.w90 { width: 90%; margin: 1% 5% 0%; }
.w100 { width: 100%; margin: 5px 0px; }

@media (min-width: 768px) {
  .sponly { display: none !important; }
}

.main413 { font-size: 100%;
  --t-xs: clamp(0.50rem, 0.350vw + 0.457rem, 0.72rem);
  --t-sm: clamp(0.6rem, 0.388vw + 0.509rem, 0.8rem);
  --t-base: clamp(0.75rem, 0.485vw + 0.636rem, 1rem);
  --t-md: clamp(0.938rem, 0.606vw + 0.795rem, 1.2rem);
  --t-lg: clamp(1.172rem, 0.758vw + 0.994rem, 1.563rem);
  --t-xl: clamp(1.465rem, 0.947vw + 1.243rem, 1.953rem);
  --t-2xl: clamp(1.831rem, 1.184vw + 1.554rem, 2.441rem);
  --t-3xl: clamp(2.289rem, 1.480vw + 1.942rem, 3.052rem);
  --t-4xl: clamp(2.861rem, 1.850vw + 2.428rem, 3.815rem);
  background-image: url("../../../../../images/pages/f-static/campaign/413/413_bg_001s.png"), url("../../../../../images/pages/f-static/campaign/413/413_bg_002s.jpg");
  background-repeat: no-repeat, no-repeat; background-position: top center, center; background-size: 100% auto, 100% 100%;
  @media screen and (min-width: 768px) {
    background-image: url("../../../../../images/pages/f-static/campaign/413/413_bg_001.png"), url("../../../../../images/pages/f-static/campaign/413/413_bg_002.jpg");
  }
}


.main413 .mvsection { width: 100%;
  & .mvsection_ttlbox { width: 96%; max-width: 1200px; margin: auto; position: relative;
    & .yokoku { position: absolute; width: 25%; top: 10px; left: -3px; transform: rotate(-10deg);
      @media screen and (min-width: 768px) { width: 170px; top: 70px; left: 120px; } }
    & .ttlimg { width: 74%; display: block; margin: auto; padding-top: 40px;
      @media screen and (min-width: 768px) { width: 470px; padding-top: 70px; } }
    & p { width: 70%; margin: auto; margin-top: 40px; padding-bottom: 10px; font-size: var(--t-base); line-height: 2; letter-spacing: 0.12em; font-weight: 500; color: #fff; text-align: center;
      @media screen and (min-width: 768px) { width: 490px; display: block; margin-top: 0; padding-top: 10px; } }
    & .coution { display: block; margin: 20px auto; font-size: var(--t-xs); line-height: 1.5; text-align: center; }
  }
}


.main413 .mainsection { margin: 60px 0; padding-bottom: 60px;
  & .point500, & .gift7dy { position: relative; width: 88%; margin: 10px auto; padding: 0; box-sizing: border-box; border: 7px solid #8b90b8; border-radius: 20px; background: #fff;
    @media screen and (min-width: 768px) { width: 740px; margin: 15px auto; }
    & .nowon { position: absolute; width: 18%; top: -14vw; left: 27%; transform: rotate(-22deg);
      @media screen and (min-width: 768px) { width: 100px; top: -80px; left: -50px; transform: rotate(-5deg); } }
    & .icon { position: absolute; width: 28%; top: -13vw; left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%);
      @media screen and (min-width: 768px) { width: 140px; top: -40px; left: 30px; } }
    & .limit { padding: 4px; background-color: #fbeaa7; 
      & img { width: 67%; margin: 10px auto; display: block; } }
    & .txtbox { width: 100%; margin-top: 10px; padding: 20px; background-color: #ececec; font-size: var(--t-sm); line-height: 1.5; }
  }

  & .gift7dy {
    @media screen and (min-width: 768px) { width: 900px; }
    & .gift7dy_inner { width: 100%; border-radius: 10px; overflow: hidden;
      & img { width: 85%; margin: 10px auto; display: block;
        @media screen and (min-width: 768px) { margin: 25px auto 10px; } } }
    & .limit img { width: 80%; @media screen and (min-width: 768px) {  width: 65%;} }
  }

  & .point500 .point500_inner { width: 100%; border-radius: 10px; overflow: hidden;
    & img { width: 88%; margin: 10px auto; display: block;
      @media screen and (min-width: 768px) { width: 88%; margin: 20px auto; } }
      & .limit img { width: 80%; @media screen and (min-width: 768px) {  width: 75%;} }
  }


  & .gift7dy .probox { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; width: 90%; margin: auto;
    @media screen and (min-width: 768px) { width: 100%; gap: 7px; }
    & .probox_inbox { width: 48%; margin: 0; padding: 0; background: #fff;
      @media screen and (min-width: 768px) { width: 190px; }
      & img { width: 101%; margin: 15px 2px;
        @media screen and (min-width: 768px) { width: 100%; } }
      & p { font-size: var(--t-xs); font-weight: 700; line-height: 1.5; letter-spacing: 0.5px; text-align: center; }
    }
  }


  & .mainsection__inner { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; width: 90%; margin: auto;
    @media screen and (min-width: 768px) { width: 1300px; gap: 30px; }
    & .itembox { position: relative; width: 100%; margin: 10px; padding: 0; padding-bottom: 5px; box-sizing: border-box; border: 7px solid #8b90b8; border-radius: 20px; background: #fff;
      @media screen and (min-width: 768px) { width: 470px; margin: 15px; }
      & .commingsoon { position: absolute; z-index: 1; width: 50%; top: -35px; left: 20%;
        @media screen and (min-width: 768px) { width: 200px; top: -35px; left: 60px; } }
      & .icon { position: absolute; width: 25%; top: -20%; left: -10%;
        @media screen and (min-width: 768px) { width: 100px; top: -40px; left: -40px; } }
      & .itembox_inbox { width: 100%; height: 100%; border-radius: 10px; overflow: hidden;
        & .limit { padding: 10px; background-color: #fbeaa7;}
      }
    }
  }
}