@charset "UTF-8";

/* ----------------------------------
  common
------------------------------------ */
@font-face {
  font-family: 'SoDoSans';
  font-style: normal;
  font-weight: 400;
  src: url("/common/fonts/SoDoSans/SoDoSans-Regular.woff") format("woff2");
}

@font-face {
  font-family: 'SoDoSans';
  font-style: normal;
  font-weight: 700;
  src: url("/common/fonts/SoDoSans/SoDoSans-Bold.woff") format("woff2");
}

.mod-en {
  font-family: 'SoDoSans';
}


body {
  height: 100%;
  overflow: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

.breadcrumb-wrap {
  position: relative;
  z-index: 2;
}

@media print,
screen and (min-width: 1024px) {
  .mod-pc {
    display: block;
  }

  .mod-sp {
    display: none;
  }

  .pageInner {
    width: 315px;
    margin: 0 auto;
  }
}

@media print,
screen and (max-width: 1023px) {
  .mod-pc {
    display: none;
  }

  .mod-sp {
    display: block;
  }

}

/* ----------------------------------
  mainContents
------------------------------------ */

.mainContents {
  font-family: "Noto Sans JP", sans-serif;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
.mainContents p {
  margin: 0;
}
.ContentInner a {
  opacity: 1;
  transition: .3s all;
}
.ContentInner a:hover {
  opacity: .8;
}

@media print, screen and (min-width: 1024px) {

  /* ----------------------------------
    mainContents
  ------------------------------------ */
  .mainContents {
    position: relative;
  }
  .mainContentsIn {
    position: relative;
    background-color: #f2f0ea;
    overflow: hidden;
  }
  /*----------------------------------
    ContentInner
  ------------------------------------*/
  .ContentInner {
    position: relative;
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
    height: 100%;
  }
  /*----------------------------------
    KvArea
  ------------------------------------*/
  .KvContent {
    width: 100%;
    max-height: 600px;
    height: calc(600 / 1440 * 100vw);
    position: relative;
    top: max(-3px, calc(-3 / 1440 * 100vw));
    overflow: hidden;
  }
  .KvBnr {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    max-height: 42.5px;
    height: calc(42.5 / 1440 * 100vw);
    background-color: #1E3932;
    z-index: 2;
  }
  .KvContent ._bnr {
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
    height: 100%;
  }
  .KvContent ._kv {
    background-image: url(/rewards/u24/images/kv/kv_bg.webp);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    display: block;
    height: 100%;
    transform: scale(1.001);
  }
  .KvContent ._title {
    position: absolute;
    top: min(106px, calc(106 / 1440 * 100vw));
    left: min(148px, calc(148 / 1440 * 100vw));
    max-width: 683px;
    width: calc(683 / 1440 * 100vw);
  }
  .KvContent ._txt {
    position: absolute;
    top: min(96px, calc(96 / 1440 * 100vw));
    right: min(346px, calc(346 / 1440 * 100vw));
    max-width: 170px;
    width: calc(170 / 1440 * 100vw);
  }
  .KvContent ._note {
    position: absolute;
    bottom: min(27px, calc(106 / 1440 * 100vw));
    left: min(281px, calc(281 / 1440 * 100vw));
    font-size: min(10px, calc(10 / 1440 * 100vw));
    line-height: 1.7;
    font-weight: 400;
  }

  /*----------------------------------
    LeadContent
  ------------------------------------*/
  .LeadContent {
    width: 100%;
    max-height: 1172px;
    height: calc(1172 / 1440 * 100vw);
    position: relative;
    background-color: #F2F0EB;
  }
  .LeadContent::before {
    content: "";
    display: block;
    position: absolute;
    top: max(-18px, calc(-18 / 1440 * 100vw));
    left: 50%;
    transform: translateX(-50%);
    max-width: 1430.5px;
    width: calc(1430.5 / 1440 * 100vw);
    height: 100%;
    background-image: url(/rewards/u24/images/lead/accent.webp);
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat;
    z-index: 2;
  }
  .LeadContent ._lead {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
    height: 100%;
  }
  .LeadContent ._lead .LeadBlock {
    max-width: 962px;
    width: calc(962 / 1440 * 100vw);
    margin: min(24px, calc(24 / 1440 * 100vw)) auto 0;
    height: 100%;
    position: relative;
    background-image: url(/rewards/u24/images/lead/lead_bg.webp);
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat;
  }
  .LeadContent ._lead .LeadBlock ._ttl {
    font-size: min(34px, calc(34 / 1440 * 100vw));
    line-height: calc(56/34);
    letter-spacing: 1.5px;
    font-weight: 700;
    color: #016f3f;
    text-align: center;
    position: absolute;
    top: min(121px, calc(121 / 1440 * 100vw));
    left: 50%;
    transform: translateX(-50%);
  }
  .LeadContent ._lead .LeadBlock ._txt {
    font-size: min(24px, calc(24 / 1440 * 100vw));
    line-height: calc(43/24);
    font-weight: 500;
    color: #000000;
    text-align: center;
    position: absolute;
    top: min(268px, calc(268 / 1440 * 100vw));
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
  }

  /*----------------------------------
    MyStoreContent
  ------------------------------------*/
  .MyStoreContent {
    width: 100%;
    max-height: 2210px;
    height: calc(2210 / 1440 * 100vw);
    position: relative;
    background-color: #d4e9e2;
  }
  .MyStoreAnchor {
    position: absolute;
    top: max(-275px, calc(-275 / 1440 * 100vw));
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
  }
  .MyStoreContent::before {
    content: "";
    position: absolute;
    top: max(-275px, calc(-275 / 1440 * 100vw));
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-height: 403px;
    height: calc(403 / 1440 * 100vw);
    background-color: #d4e9e2;
    clip-path: ellipse(55% 100% at 50% 100%);
    z-index: 0;
  }
  .MyStoreContent::after {
    content: "";
    position: absolute;
    top: max(-330px, calc(-330 / 1440 * 100vw));
    left: 50%;
    transform: translateX(-50%);
    max-width: 1430.5px;
    width: calc(1430.5/1440*100vw);
    max-height: 2305.5px;
    height: calc(2305.5/1440*100vw);
    background: url(/rewards/u24/images/mystore/accent.webp) no-repeat center top / contain;
    z-index: 2;
  }
  .MyStoreContent ._myStore {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
    height: 100%;
  }
  .MyStoreContent ._myStore ._ttl {
    font-size: min(40px, calc(40 / 1440 * 100vw));
    letter-spacing: 1.5px;
    font-weight: 700;
    color: #016f3f;
    text-align: center;
    position: absolute;
    top: max(-171px, calc(-171 / 1440 * 100vw));
    left: 49.4%;
    transform: translateX(-50%);
  }

  .MyStoreBlock {
    max-width: 793px;
    width: calc(793 / 1440 * 100vw);
    margin: 0 auto;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .MyStoreBlock._01 {
    top: max(-4px, calc(-4 / 1440 * 100vw));
  }
  .MyStoreBlock._02 {
    top: min(710px, calc(710 / 1440 * 100vw));
  }
  .MyStoreBlock._03 {
    top: min(1459px, calc(1459 / 1440 * 100vw));
  }
  .MyStoreBlock._01::before {
    content: "";
    position: absolute;
    top: min(599px, calc(599 / 1440 * 100vw));
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-height: 2px;
    height: calc(2 / 1440 * 100vw);
    background-color: #006f3f;
    z-index: 2;
  }
  .MyStoreBlock._02::before {
    content: "";
    position: absolute;
    top: min(627px, calc(627 / 1440 * 100vw));
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-height: 2px;
    height: calc(2 / 1440 * 100vw);
    background-color: #006f3f;
  }
  .MyStoreBlock._01 .sub_ttl {
    max-width: 343.5px;
    width: calc(343.5/1440*100vw);
    text-align: center;
  }
  .MyStoreBlock._01 .sub_ttl span {
    font-size: min(33px, calc(33 / 1440 * 100vw));
    font-weight: 700;
    color: #036140;
  }
  .MyStoreBlock._02 .sub_ttl {
    max-width: 228px;
    width: calc(228/1440*100vw);
  }
  .MyStoreBlock._03 .sub_ttl {
    max-width: 330.5px;
    width: calc(330.5/1440*100vw);
  }
  .MyStoreBlock._01 .block_img {
    position: relative;
    top: max(-19px, calc(-19 / 1440 * 100vw));
    left: min(29px, calc(29 / 1440 * 100vw));
  }
  .MyStoreBlock._01 .block_img ._frame {
    position: relative;
    top: 0;
    left: max(-55px, calc(-55 / 1440 * 100vw));
    max-width: 497.5px;
    width: calc(497.5/1440*100vw);
  }
  .MyStoreBlock._01 .block_img ._img {
    position: absolute;
    top: min(50px, calc(50 / 1440 * 100vw));
    left: min(5px, calc(5 / 1440 * 100vw));
    max-width: 430px;
    width: calc(430/1440*100vw);
    border: min(2px, calc(2 / 1440 * 100vw)) solid #006f3f;
  }
  .MyStoreBlock._01 .block_img ._badge {
    position: absolute;
    bottom: max(-39px, calc(-39 / 1440 * 100vw));
    right: max(-57px, calc(-57 / 1440 * 100vw));
    max-width: 133.5px;
    width: calc(133.5/1440*100vw);
  }
  .MyStoreBlock._02 .block_img {
    position: relative;
    top: min(12px, calc(12 / 1440 * 100vw));
    left: min(29px, calc(29 / 1440 * 100vw));
  }
  .MyStoreBlock._02 .block_img ._frame {
    position: relative;
    top: 0;
    left: max(-55px, calc(-55 / 1440 * 100vw));
    max-width: 497.5px;
    width: calc(497.5/1440*100vw);
  }
  .MyStoreBlock._02 .block_img ._img {
    position: absolute;
    top: min(50px, calc(50 / 1440 * 100vw));
    left: min(5px, calc(5 / 1440 * 100vw));
    max-width: 430px;
    width: calc(430/1440*100vw);
    border: min(2px, calc(2 / 1440 * 100vw)) solid #006f3f;
  }
  .MyStoreBlock._02 .block_img ._badge {
    position: absolute;
    bottom: max(-39px, calc(-39 / 1440 * 100vw));
    right: max(-57px, calc(-57 / 1440 * 100vw));
    max-width: 133.5px;
    width: calc(133.5/1440*100vw);
  }
  .MyStoreBlock .block_txt {
    font-size: min(24px, calc(24 / 1440 * 100vw));
    line-height: calc(42 / 24);
    font-weight: 500;
    color: #000000;
    text-align: center;
    position: relative;
    top: min(15px, calc(15 / 1440 * 100vw));
  }
  .MyStoreBlock._02 .block_txt {
    top: min(46px, calc(46 / 1440 * 100vw));
  }
  .MyStoreBlock._03 .block_txt {
    top: min(56px, calc(56 / 1440 * 100vw));
  }
  .MyStoreBlock .block_note {
    font-size: min(20px, calc(20 / 1440 * 100vw));
    line-height: calc(30 / 20);
    font-weight: 500;
    color: #016f3f;
    text-align: left;
    position: relative;
    top: min(44px, calc(44 / 1440 * 100vw));
    left: max(-28px, calc(-28 / 1440 * 100vw));
  }
  .MyStoreBlock._02 .block_note {
    top: min(76px, calc(76 / 1440 * 100vw));
    left: max(-9px, calc(-9 / 1440 * 100vw));
    max-width: 724px;
    width: calc(724/1440*100vw);
  }
  .MyStoreBlock._03 .block_icon {
    max-width:569.5px;
    width: calc(569.5/1440*100vw);
    position: relative;
    top: min(155px, calc(155 / 1440 * 100vw));
    left: min(20px, calc(20 / 1440 * 100vw));
  }
  /*----------------------------------
    EnjoyContent
  ------------------------------------*/
  .EnjoyContent {
    width: 100%;
    max-height: 3160px;
    height: calc(3160 / 1440 * 100vw);
    position: relative;
    background-color: #f2f0ea;
  }
  .EnjoyAnchor {
    position: absolute;
    top: max(-260px, calc(-260 / 1440 * 100vw));
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
  }
  .EnjoyContent::before {
    content: "";
    position: absolute;
    top: max(-260px, calc(-260 / 1440 * 100vw));
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-height: 403px;
    height: calc(403 / 1440 * 100vw);
    background-color: #f2f0ea;
    clip-path: ellipse(55% 100% at 50% 100%);
    z-index: 0;
  }
  .EnjoyContent::after {
    content: "";
    position: absolute;
    top: max(-210px, calc(-210 / 1440 * 100vw));
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-height: 3158px;
    height: calc(3158/1440*100vw);
    background: url(/rewards/u24/images/enjoy/accent.webp) no-repeat center top / contain;
    z-index: 2;
  }
  .EnjoyContent ._enjoy {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
    height: 100%;
  }
  .EnjoyContent ._enjoy ._ttl {
    font-size: min(40px, calc(40 / 1440 * 100vw));
    letter-spacing: 1.5px;
    font-weight: 700;
    color: #016f3f;
    text-align: center;
    position: absolute;
    top: max(-126px, calc(-126 / 1440 * 100vw));
    left: 50%;
    transform: translateX(-50%);
  }
  .EnjoyBlock {
    max-width: 959.5px;
    width: calc(959.5/1440*100vw);
    margin: 0 auto;
    height: 100%;
    position: absolute;
    z-index: 3;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat;
  }
  .EnjoyBlock._01 {
    background-image: url(/rewards/u24/images/enjoy/content_01.webp);
    top: max(-13px, calc(-13 / 1440 * 100vw));
  }
  .EnjoyBlock._02 {
    background-image: url(/rewards/u24/images/enjoy/content_02.webp);
    top: min(1410px, calc(1410 / 1440 * 100vw));
  }
  .EnjoyBlockInner {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .EnjoyBlockInner .sub_ttl {
    font-size: min(32px, calc(32 / 1440 * 100vw));
    font-weight: 700;
    color: #fff;
    text-align: center;
    position: absolute;
    top: min(33px, calc(33 / 1440 * 100vw));
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
  }
  .EnjoyBlock .block_img {
    position: absolute;
    width: 100%;
    top: 0;
    left: 47.5%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }
  .EnjoyBlock .block_img._01 {
    top: min(181px, calc(181 / 1440 * 100vw));
  }
  .EnjoyBlock .block_img._02 {
    flex-direction: row-reverse;
    top: min(808px, calc(808 / 1440 * 100vw));
    left: 54.5%;
  }
  .EnjoyBlock .block_img .block_ttl {
    max-width: 416.5px;
    width: calc(416.5/1440*100vw);
    position: relative;
    top: min(104px, calc(104 / 1440 * 100vw));
  }
  .EnjoyBlock .block_img .image_monitor {
    max-width: 285px;
    width: calc(285/1440*100vw);
  }

  .EnjoyBlock .block_lead {
    max-width: 861.5px;
    width: calc(861.5/1440*100vw);
    position: absolute;
    top: min(180px, calc(180 / 1440 * 100vw));
    left: 50%;
    transform: translateX(-50%);
  }
  .EnjoyBlock .block_headline {
    max-width: 801.5px;
    width: calc(801.5/1440*100vw);
    position: absolute;
    top: min(487px, calc(487 / 1440 * 100vw));
    left: 50%;
    transform: translateX(-50%);
  }
  .EnjoyBlock .block_txt {
    font-size: min(22px, calc(22 / 1440 * 100vw));
    line-height: calc(40 / 22);
    font-weight: 500;
    color: #000000;
    position: absolute;
    top: min(1108px, calc(1108 / 1440 * 100vw));
    left: 43.5%;
    transform: translateX(-50%);
    white-space: nowrap;
  }
  .EnjoyBlock .block_txt span {
    font-size: min(26px, calc(26 / 1440 * 100vw));
    line-height: calc(36 / 26);
    font-weight: 700;
    color: #016f3f;
    display: block;
    margin-bottom: min(15px, calc(15 / 1440 * 100vw));
  }

  .EnjoyBlock .img_slider {
    position: absolute;
    z-index: 4;
    max-width: 520px;
    width: calc(520 / 1440 * 100vw);
    top: min(645px, calc(645 / 1440 * 100vw));
    left: 50%;
    transform: translateX(-50%);
  }
  .img_slider {
    position: relative;
    padding-bottom: 50px; 
  }
  .img_slider img {
    margin: 0 10px;
    max-width: 520px;
    width: calc(520 / 1440 * 100vw);
  }
  .img_slider .image_monitor {
    position: relative;
  }
  .img_slider .image_monitor .item_detail {
    width: 100%;
  }
  .img_slider .image_monitor .item_detail p {
    font-size: min(20px, calc(20 / 1440 * 100vw));
    line-height: calc(32 / 20);
    font-weight: 400;
    color: #000000;
    position: absolute;
    right: min(53px, calc(53 / 1440 * 100vw));
    top: min(44px, calc(44 / 1440 * 100vw));
    max-width: 266px;
    width: calc(266 / 1440 * 100vw);
  }
  .img_slider .image_monitor._02 .item_detail p {
    line-height: calc(34 / 20);
    right: min(54px, calc(54 / 1440 * 100vw));
    top: min(60px, calc(60 / 1440 * 100vw));
  }
  .img_slider .image_monitor._03 .item_detail p {
    line-height: calc(34 / 20);
    right: min(54px, calc(54 / 1440 * 100vw));
    top: min(60px, calc(60 / 1440 * 100vw));
  }
  .img_slider .image_monitor._04 .item_detail p {
    line-height: calc(34 / 20);
    right: min(54px, calc(54 / 1440 * 100vw));
    top: min(74px, calc(74 / 1440 * 100vw));
  }
  .img_slider .image_monitor._05 .item_detail p {
    line-height: calc(34 / 20);
    right: min(54px, calc(54 / 1440 * 100vw));
    top: min(60px, calc(60 / 1440 * 100vw));
  }
  .img_slider .image_monitor .item_detail a {
    font-size: min(19px, calc(19 / 1440 * 100vw));
    color: #fff;
    background-color: #00754a;
    padding: min(14px, calc(14 / 1440 * 100vw)) min(20px, calc(20 / 1440 * 100vw));
    border-radius: min(25px, calc(25 / 1440 * 100vw));
    white-space: nowrap;
    position: absolute;
    right: min(72px, calc(72 / 1440 * 100vw));
    top: min(184px, calc(184 / 1440 * 100vw));
    max-width: 210px;
    width: calc(210 / 1440 * 100vw);
  }

  .slick-prev, .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    border: none;
    background: none;
    color: #1e5c3f; 
    font-size: 40px;
    font-family: serif;
    cursor: pointer;
    outline: none;
  }

  .slick-prev {
    left: 10px;
  }
  .slick-next {
    right: 10px;
  }
  .slick-dots {
    position: absolute;
    bottom: 0;
    display: flex !important;
    justify-content: center;
    width: 100%;
    list-style: none;
    padding: 0;
  }
  .slick-dots li {
    margin: 0 8px;
  }
  .slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 12px;
    height: 12px;
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: #d4e3db; 
    border-radius: 50%;
    transition: background 0.3s;
  }
  .slick-dots li.slick-active button {
    background: #006f3f; 
  }
  .slick-prev, .slick-next {
    position: absolute;
    top: min(352px, calc(352 / 1440 * 100vw));
    cursor: pointer;
    outline: none;
    border: none;
    background: transparent;
    width: 40px;
    height: 40px;
    z-index: 2;
    transform: translateY(-50%);
  }
  .slick-prev { 
    left: min(57px, calc(57 / 1440 * 100vw));
  }
  .slick-next { 
    right: min(57px, calc(57 / 1440 * 100vw));
  }
  .slick-prev::before, .slick-next::before {
    content: '';
    display: block;
    width: 15px;
    height: 15px;
    border-top: 2px solid #006f3f; 
    border-left: 2px solid #006f3f; 
    position: absolute;
    top: 50%;
    left: 50%;
  }
  .slick-prev::before {
    transform: translate(-30%, -50%) rotate(-45deg);
  }
  .slick-next::before {
    transform: translate(-70%, -50%) rotate(135deg);
  }
  .slick-dots {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    position: relative;
    top: min(55px, calc(55 / 1440 * 100vw));
    gap: min(26px, calc(26 / 1440 * 100vw));
  }
  .slick-dots li {
    margin: 0;
  }
  .slick-dots li button {
    font-size: 0;
    max-width: 20px;
    width: calc(20 / 1440 * 100vw);
    max-height: 20px;
    height: calc(20 / 1440 * 100vw);
    padding: 0;
    cursor: pointer;
    border: none;
    border-radius: 50%;
    background-color: #e1eee57d; 
    transition: background-color 0.3s;
  }
  .slick-dots li.slick-active button {
    background-color: #006f3f; 
  }

  /*----------------------------------
    ParticipantContent
  ------------------------------------*/
  .ParticipantContent {
    width: 100%;
    max-height: 1050px;
    height: calc(1050 / 1440 * 100vw);
    position: relative;
    background-color: #d4e9e2;
  }
  .ParticipantAnchor {
    position: absolute;
    top: max(-265px, calc(-265 / 1440 * 100vw));
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
  }
  .ParticipantContent::before {
    content: "";
    position: absolute;
    top: max(-265px, calc(-265 / 1440 * 100vw));
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-height: 403px;
    height: calc(403 / 1440 * 100vw);
    background-color: #d4e9e2;
    clip-path: ellipse(55% 100% at 50% 100%);
    z-index: 0;
  }
  .ParticipantContent::after {
    content: "";
    position: absolute;
    top: min(49px, calc(49 / 1440 * 100vw));
    left: 50%;
    transform: translateX(-50%);
    max-width: 1427px;
    width: calc(1427/1440*100vw);
    max-height: 771px;
    height: calc(771/1440*100vw);
    background: url(/rewards/u24/images/participant/accent.webp) no-repeat center top / contain;
    z-index: 2;
  }
  .ParticipantContent ._participant {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
    height: 100%;
  }
  .ParticipantContent ._participant ._ttl {
    font-size: min(40px, calc(40 / 1440 * 100vw));
    letter-spacing: 9px;
    font-weight: 700;
    color: #016f3f;
    text-align: center;
    position: absolute;
    top: max(-132px, calc(-132 / 1440 * 100vw));
    left: 50.3%;
    transform: translateX(-50%);
  }
  .participantWrap {
    position: absolute;
    display: flex;
    gap: min(20px, calc(20 / 1440 * 100vw));
    top: min(10px, calc(10 / 1440 * 100vw));
    left: 49.9%;
    transform: translateX(-50%);
    z-index: 3;
  }
  .participantBlock {
    position: relative;
    max-width: 370px;
    width: calc(370 / 1440 * 100vw);
    max-height: 658.5px;
    height: calc(658.5 / 1440 * 100vw);
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat;
  }
  .participantBlock._01 {
    background-image: url(/rewards/u24/images/participant/content_01.webp);
  }
  .participantBlock._02 {
    background-image: url(/rewards/u24/images/participant/content_02.webp);
  }
  .participantBlock._03 {
    background-image: url(/rewards/u24/images/participant/content_03.webp);
  }
  .participantBlock .sub_ttl {
    max-width: 92px;
    width: calc(92 / 1440 * 100vw);
    position: absolute;
    top: max(-40px, calc(-40 / 1440 * 100vw));
    left: 50%;
    transform: translateX(-50%);
  }
  .participantBlock .block_txt {
    font-size: min(22px, calc(22 / 1440 * 100vw));
    line-height: calc(37 / 22);
    font-weight: 700;
    white-space: nowrap;
    color: #000000;
    text-align: center;
    position: absolute;
    top: min(91px, calc(91 / 1440 * 100vw));
    left: 50%;
    transform: translateX(-50%);
  }
  .participantBlock .block_subtxt {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
  }
  ._02 .block_subtxt {
    max-width: 317px;
    width: calc(317 / 1440 * 100vw);
    top: min(188px, calc(188 / 1440 * 100vw));
  }
  ._03 .block_subtxt {
    max-width: 303px;
    width: calc(303 / 1440 * 100vw);
    top: min(224px, calc(224 / 1440 * 100vw));
  }
  .participantBlock .block_btn {
    font-size: min(24px, calc(24 / 1440 * 100vw));
    font-weight: 500;
    color: #fff;
    background-color: #1e3932;
    padding: min(17px, calc(17 / 1440 * 100vw)) min(48px, calc(48 / 1440 * 100vw));
    border-radius: min(30px, calc(30 / 1440 * 100vw));
    white-space: nowrap;
    position: absolute;
    bottom: min(60px, calc(60 / 1440 * 100vw));
    left: 50%;
    transform: translateX(-50%);
  }

  /*----------------------------------
    HowtoContent
  ------------------------------------*/
  .HowtoContent {
    width: 100%;
    max-height: 770px;
    height: calc(770 / 1440 * 100vw);
    position: relative;
    background-color: #fff6b3;
  }
  .HowtoAnchor {
    position: absolute;
    top: max(-265px, calc(-265 / 1440 * 100vw));
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
  }
  .HowtoContent::before {
    content: "";
    position: absolute;
    top: max(-265px, calc(-265 / 1440 * 100vw));
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-height: 403px;
    height: calc(403 / 1440 * 100vw);
    background-color: #fff6b3;
    clip-path: ellipse(55% 100% at 50% 100%);
    z-index: 0;
  }
  .HowtoContent::after {
    content: "";
    position: absolute;
    top: max(-86px, calc(-86 / 1440 * 100vw));
    left: 50%;
    transform: translateX(-50%);
    max-width: 1441.5px;
    width: calc(1441.5/1440*100vw);
    max-height: 686px;
    height: calc(686/1440*100vw);
    background: url(/rewards/u24/images/howto/accent.webp) no-repeat center top / contain;
    z-index: 2;
  }
  .HowtoContent ._howto {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    width: 100%;
    height: 100%;
  }
  .HowtoContent ._howto ._ttl {
    font-size: min(40px, calc(40 / 1440 * 100vw));
    letter-spacing: 1.5px;
    font-weight: 700;
    color: #016f3f;
    text-align: center;
    position: absolute;
    top: max(-131px, calc(-131 / 1440 * 100vw));
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
  }
  .HowtoContent ._howto .howtoWrap {
    position: absolute;
    display: flex;
    gap: min(29px, calc(29 / 1440 * 100vw));
    top: min(3px, calc(3 / 1440 * 100vw));
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
  }
  .howtoBlock {
    position: relative;
    max-width: 542px;
    width: calc(542 / 1440 * 100vw);
    max-height: 380.5px;
    height: calc(380.5 / 1440 * 100vw);
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat;
  }
  .howtoBlock._01 {
    background-image: url(/rewards/u24/images/howto/content_01.webp);
  }
  .howtoBlock._02 {
    background-image: url(/rewards/u24/images/howto/content_02.webp);
  }
  .howtoBlock .sub_ttl {
    font-size: min(25px, calc(25 / 1440 * 100vw));
    font-weight: 700;
    color: #000000;
    text-align: center;
    position: absolute;
    top: min(30px, calc(30 / 1440 * 100vw));
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
  }
  .howtoBlock .block_txt {
    font-size: min(20px, calc(20 / 1440 * 100vw));
    line-height: calc(34 / 20);
    font-weight: 400;
    white-space: nowrap;
    color: #000000;
    text-align: left;
    position: absolute;
    top: min(274px, calc(274 / 1440 * 100vw));
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
  }

  /*----------------------------------
    FaqContent
  ------------------------------------*/
  .FaqContent {
    width: 100%;
    max-height: 420px;
    height: calc(420 / 1440 * 100vw);
    position: relative;
    background-color: #f2f0ea;
  }
  .FaqAnchor {
    position: absolute;
    top: max(-255px, calc(-255 / 1440 * 100vw));
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
  }
  .FaqContent::before {
    content: "";
    position: absolute;
    top: max(-255px, calc(-255 / 1440 * 100vw));
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-height: 403px;
    height: calc(403 / 1440 * 100vw);
    background-color: #f2f0ea;
    clip-path: ellipse(55% 100% at 50% 100%);
    z-index: 0;
  }
  .FaqContent::after {
    content: "";
    position: absolute;
    top: max(-114px, calc(-114 / 1440 * 100vw));
    left: 50%;
    transform: translateX(-50%);
    max-width: 1441.5px;
    width: calc(1441.5/1440*100vw);
    max-height: 686px;
    height: calc(686/1440*100vw);
    background: url(/rewards/u24/images/faq/accent.webp) no-repeat center top / contain;
    z-index: 2;
  }
  .FaqContent ._faq {
    width: 100%;
    max-width: 1440px;
    height: 100%;
    margin: 0 auto;
    width: 100%;
    position: relative;
  }
  .FaqContent ._faq::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: 125px;
    width: calc(125 / 1440 * 100vw);
    max-height: 176px;
    height: calc(176 / 1440 * 100vw);
    background: url(/rewards/u24/images/faq/icon.webp) no-repeat center top / contain;
    z-index: 1;
  }
  .FaqContent ._faq ._ttl {
    font-size: min(40px, calc(40 / 1440 * 100vw));
    letter-spacing: 1.5px;
    font-weight: 700;
    color: #016f3f;
    text-align: center;
    position: absolute;
    top: max(-121px, calc(-121 / 1440 * 100vw));
    left: 50%;
    transform: translateX(-50%);
  }
  .FaqContent ._faq .faqWrap {
    position: absolute;
    display: flex;
    gap: min(29px, calc(29 / 1440 * 100vw));
    top: min(15px, calc(15 / 1440 * 100vw));
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
  }
  .faqBtn {
    max-width: 465px;
    width: calc(465 / 1440 * 100vw);
    max-height: 60px;
    height: calc(60 / 1440 * 100vw);
    font-size: min(24px, calc(24 / 1440 * 100vw));
    font-weight: 500;
    color: #fff;
    background-color: #1e3932;
    border-radius: min(30px, calc(30 / 1440 * 100vw));
    white-space: nowrap;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /*----------------------------------
    BnrContent
  ------------------------------------*/
  .BnrContent {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #1e3932;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .BnrContent ._bnr { 
    display: flex;
    justify-content: center;
    align-items: center;
    width: 155px;
    height: 112px;
  }
}
@media print, screen and (max-width: 1023px) {
  img {
    width: 100%;
  }
  /* ----------------------------------
    mainContents
  ------------------------------------ */
  .mainContents {
    position: relative;
  }
  .mainContentsIn {
    position: relative;
    background-color: #F2F0EB;
    overflow: hidden;
  }

  /*----------------------------------
    ContentArea
  ------------------------------------*/
  .ContentArea {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
    width: 100%;
    background-color: #F2F0EB;
    padding-bottom: calc(130/750*100vw);
  }
  .ContentArea::before {
    content: "";
    display: block;
    position: absolute;
    top: calc(-255 / 750 * 100vw);
    left: 0;
    width: 100%;
    height: calc(100% + calc(255 / 750 * 100vw));
    background-image: url(/youkou/mystore-u24/images/sp/bg_pattern.webp);
    background-size: cover;
    background-position: center top;
    z-index: 1;
  }
  /*----------------------------------
    KvArea
  ------------------------------------*/
  .KvContent {
    width: 100%;
    height: calc(1000 / 750 * 100vw);
    position: relative;
  }
  .KvBnr {
    position: absolute;
    top: calc(-24 / 750 * 100vw);
    left: 0;
    width: 100%;
    z-index: 2;
  }
  .KvContent ._bnr {
    margin: 0 auto;
    width: 100%;
    height: 100%;
  }
  .KvContent ._kv {
    display: block;
    background-image: url(/rewards/u24/images/kv/sp/kv_bg.webp);
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    height: 100%;
    transform: scale(1.001);
  }
  .KvContent ._txt {
    position: absolute;
    top: calc(87 / 750 * 100vw);
    right: calc(171 / 750 * 100vw);
    width: calc(126 / 750 * 100vw);
  }
  .KvContent ._note {
    position: absolute;
    bottom: calc(60 / 750 * 100vw);
    right: calc(44 / 750 * 100vw);
    font-size: calc(10 / 750 * 100vw);
    line-height: 1.7;
    font-weight: 400;
    text-indent: -1em;
    padding-left: 1em;
  }

  /*----------------------------------
    LeadContent
  ------------------------------------*/
  .LeadContent {
    width: 100%;
    height: calc(1040 / 750 * 100vw);
    position: relative;
    background-color: #F2F0EB;
  }
  .LeadContent::before {
    content: "";
    display: block;
    position: absolute;
    top: calc(-18 / 750 * 100vw);
    left: 50%;
    transform: translateX(-50%);
    width: calc(747.5 / 750 * 100vw);
    height: calc(820.5 / 750 * 100vw);
    background-image: url(/rewards/u24/images/lead/sp/accent.webp);
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat;
    z-index: 2;
  }
  .LeadContent ._lead {
    width: 100%;
    margin: 0 auto;
    width: 100%;
    height: 100%;
  }
  .LeadContent ._lead .LeadBlock {
    width: calc(674.5 / 750 * 100vw);
    margin: min(24px, calc(24 / 750 * 100vw)) auto 0;
    height: 100%;
    position: relative;
    top: calc(-102/750*100vw);
    background-image: url(/rewards/u24/images/lead/sp/lead_bg.webp);
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat;
    z-index: 3;
  }
  .LeadContent ._lead .LeadBlock ._ttl {
    white-space: nowrap;
    font-size: calc(34 / 750 * 100vw);
    line-height: calc(56/34);
    letter-spacing: 1.5px;
    font-weight: 700;
    color: #016f3f;
    text-align: center;
    position: absolute;
    top: calc(121 / 750 * 100vw);
    left: 50%;
    transform: translateX(-50%);
  }
  .LeadContent ._lead .LeadBlock ._txt {
    font-size: calc(27 / 750 * 100vw);
    line-height: calc(46.5 / 27);
    font-weight: 500;
    color: #000000;
    text-align: center;
    position: absolute;
    top: calc(287 / 750 * 100vw);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
  }

  /*----------------------------------
    MyStoreContent
  ------------------------------------*/
  .MyStoreContent {
    width: 100%;
    height: calc(2215 / 750 * 100vw);
    position: relative;
    background-color: #d4e9e2;
  }
  .MyStoreAnchor {
    position: absolute;
    top: calc(-160 / 750 * 100vw);
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
  }
  .MyStoreContent::before {
    content: "";
    position: absolute;
    top: calc(-160 / 750 * 100vw);
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: calc(372 / 750 * 100vw);
    background-color: #d4e9e2;
    clip-path: ellipse(68% 100% at 50% 100%);
    z-index: 0;
  }
  .MyStoreContent::after {
    content: "";
    position: absolute;
    top: calc(-202 / 750 * 100vw);
    left: 50%;
    transform: translateX(-50%);
    width: calc(747.5/750*100vw);
    height: calc(1889.5/750*100vw);
    background: url(/rewards/u24/images/mystore/sp/accent.webp) no-repeat center top / contain;
    z-index: 2;
  }
  .MyStoreContent ._myStore {
    width: 100%;
    margin: 0 auto;
    width: 100%;
    height: 100%;
  }
  .MyStoreContent ._myStore ._ttl {
    font-size: calc(34 / 750 * 100vw);
    letter-spacing: 1.5px;
    font-weight: 700;
    color: #016f3f;
    text-align: center;
    position: absolute;
    top: calc(-77 / 750 * 100vw);
    left: 49.4%;
    transform: translateX(-50%);
    white-space: nowrap;
  }

  .MyStoreBlock {
    width: calc(793 / 750 * 100vw);
    margin: 0 auto;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 3;
  }
  .MyStoreBlock._01 {
    top: calc(98 / 750 * 100vw);
  }
  .MyStoreBlock._02 {
    top: calc(775 / 750 * 100vw);
  }
  .MyStoreBlock._03 {
    top: calc(1404 / 750 * 100vw);
  }
  .MyStoreBlock._01::before {
    content: "";
    position: absolute;
    top: calc(599 / 750 * 100vw);
    left: 50%;
    transform: translateX(-50%);
    width: 62%;
    height: calc(2 / 750 * 100vw);
    background-color: #006f3f;
    z-index: 2;
  }
  .MyStoreBlock._02::before {
    content: "";
    position: absolute;
    top: calc(550 / 750 * 100vw);
    left: 50%;
    transform: translateX(-50%);
    width: 62%;
    height: calc(2 / 750 * 100vw);
    background-color: #006f3f;
  }
  .MyStoreBlock._01 .sub_ttl {
    width: calc(315.5/750*100vw);
    text-align: center;
  }
  .MyStoreBlock._01 .sub_ttl span {
    font-size: calc(30 / 750 * 100vw);
    font-weight: 700;
    color: #036140;
  }
  .MyStoreBlock._02 .sub_ttl {
    width: calc(210/750*100vw);
  }
  .MyStoreBlock._03 .sub_ttl {
    width: calc(274.5/750*100vw);
  }
  .MyStoreBlock._01 .block_img {
    position: relative;
    top: calc(-17 / 750 * 100vw);
    left: calc(-19 / 750 * 100vw);
  }
  .MyStoreBlock._01 .block_img ._frame {
    width: calc(411/750*100vw);
  }
  .MyStoreBlock._01 .block_img ._img {
    width: calc(352 / 750 * 100vw);
    position: absolute;
    top: calc(40 / 750 * 100vw);
    left: calc(49 / 750 * 100vw);
    border: calc(2 / 750 * 100vw) solid #006f3f;
  }
  .MyStoreBlock._01 .block_img ._badge {
    width: calc(120 / 750 * 100vw);
    position: absolute;
    bottom: calc(-34/750*100vw);
    right: calc(-102/750*100vw);
  }
  .MyStoreBlock._02 .block_img {
    position: relative;
    top: calc(4 / 750 * 100vw);
    left: calc(-21 / 750 * 100vw);
  }
  .MyStoreBlock._02 .block_img ._frame {
    width: calc(411/750*100vw);
  }
  .MyStoreBlock._02 .block_img ._img {
    width: calc(352 / 750 * 100vw);
    position: absolute;
    top: calc(40 / 750 * 100vw);
    left: calc(49 / 750 * 100vw);
    border: calc(2 / 750 * 100vw) solid #006f3f;
  }
  .MyStoreBlock._02 .block_img ._badge {
    width: calc(120 / 750 * 100vw);
    position: absolute;
    bottom: calc(-34/750*100vw);
    right: calc(-102/750*100vw);
  }
  .MyStoreBlock .block_txt {
    font-size: calc(24 / 750 * 100vw);
    line-height: calc(42 / 24);
    font-weight: 500;
    color: #000000;
    text-align: center;
    position: relative;
    top: calc(20 / 750 * 100vw);
  }
  .MyStoreBlock._02 .block_txt {
    top: calc(43 / 750 * 100vw);
  }
  .MyStoreBlock._03 .block_txt {
    top: calc(13 / 750 * 100vw);
  }
  .MyStoreBlock .block_note {
    font-size: calc(20 / 750 * 100vw);
    line-height: calc(30 / 20);
    font-weight: 500;
    color: #016f3f;
    text-align: left;
    position: relative;
    top: calc(48 / 750 * 100vw);
    left: calc(-11 / 750 * 100vw);
    width: calc(436 / 750 * 100vw);
  }
  .MyStoreBlock._02 .block_note {
    top: calc(55 / 750 * 100vw);
    left: calc(-9 / 750 * 100vw);
    width: calc(436 / 750 * 100vw);
  }
  .MyStoreBlock._03 .block_icon {
    width: calc(569.5/750*100vw);
    position: relative;
    top: calc(50 / 750 * 100vw);
    left: calc(20 / 750 * 100vw);
  }
  /*----------------------------------
    EnjoyContent
  ------------------------------------*/
  .EnjoyContent {
    width: 100%;
    height: calc(4255 / 750 * 100vw);
    position: relative;
    background-color: #f2f0ea;
  }
  .EnjoyAnchor {
    position: absolute;
    top: calc(-412 / 750 * 100vw);
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
  }
  .EnjoyContent::before {
    content: "";
    position: absolute;
    top: calc(-412 / 750 * 100vw);
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: calc(472 / 750 * 100vw);
    background-color: #f2f0ea;
    clip-path: ellipse(73% 100% at 50% 100%);
    z-index: 0;
  }
  .EnjoyContent::after {
    content: "";
    position: absolute;
    top: calc(-408 / 750 * 100vw);
    left: 50%;
    transform: translateX(-50%);
    width: calc(747.5/750*100vw);
    height: calc(4021.5/750*100vw);
    background: url(/rewards/u24/images/enjoy/sp/accent.webp) no-repeat center top / contain;
    z-index: 2;
  }
  .EnjoyContentBg {
    position: absolute;
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
  }
  .EnjoyContentBg._01 {
    background-image: url(/rewards/u24/images/enjoy/sp/content_01.webp);
    width: calc(622.5/750*100vw);
    height: calc(2325/750*100vw);
    top: calc(-234 / 750 * 100vw);
  }
  .EnjoyContentBg._02 {
    background-image: url(/rewards/u24/images/enjoy/sp/content_02.webp);
    width: calc(622.5/750*100vw);
    height: calc(1627/750*100vw);
    top: calc(2129 / 750 * 100vw);
  }
  .EnjoyContent ._enjoy {
    width: 100%;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    position: relative;
    top: calc(-200 / 750 * 100vw);
  }
  .EnjoyContent ._enjoy ._ttl {
    font-size: calc(34 / 750 * 100vw);
    letter-spacing: 1.5px;
    font-weight: 700;
    color: #016f3f;
    text-align: center;
    position: absolute;
    top: calc(-122 / 750 * 100vw);
    left: 50%;
    transform: translateX(-50%);
  }
  .EnjoyBlock {
    width: calc(622.5/750*100vw);
    margin: 0 auto;
    height: 100%;
    position: absolute;
    z-index: 3;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat;
  }
  .EnjoyBlock._01 {
    top: calc(-34 / 750 * 100vw);
  }
  .EnjoyBlock._02 {
    top: calc(2329 / 750 * 100vw);
  }
  .EnjoyBlockInner {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .EnjoyBlockInner .sub_ttl {
    font-size: calc(32 / 750 * 100vw);
    line-height: 1.5;
    font-weight: 700;
    color: #fff;
    text-align: center;
    position: absolute;
    top: calc(40 / 750 * 100vw);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
  }
  .EnjoyBlock .block_img {
    position: absolute;
    width: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .EnjoyBlock .block_img._01 {
    top: calc(100 / 750 * 100vw);
  }
  .EnjoyBlock .block_img._02 {
    top: calc(1175 / 750 * 100vw);
    left: 50%;
  }
  .EnjoyBlock .block_img .block_ttl {
    width: calc(400/750*100vw);
    position: relative;
    top: calc(104 / 750 * 100vw);
  }
  .EnjoyBlock .block_img .image_monitor {
    width: calc(511 / 750 * 100vw);
    position: relative;
  }
  .block_img._01 .image_monitor {
    top: calc(-97 / 750 * 100vw);
  }
  .block_img._02 .image_monitor {
    top: calc(-97 / 750 * 100vw);
  }

  .EnjoyBlock .block_lead {
    width: calc(554.5/750*100vw);
    position: absolute;
    top: calc(221 / 750 * 100vw);
    left: 50%;
    transform: translateX(-50%);
  }
  .EnjoyBlock .block_headline {
    width: calc(715.5 / 750 * 100vw);
    position: absolute;
    top: calc(658 / 750 * 100vw);
    left: 50%;
    transform: translateX(-50%);
  }
  .EnjoyBlock .block_txt {
    font-size: calc(20 / 750 * 100vw);
    line-height: calc(33 / 20);
    font-weight: 500;
    color: #000000;
    position: absolute;
    top: calc(1334 / 750 * 100vw);
    left: 37.5%;
    transform: translateX(-50%);
    white-space: nowrap;
  }
  .EnjoyBlock .block_txt span {
    font-size: calc(26 / 750 * 100vw);
    line-height: calc(36 / 26);
    font-weight: 700;
    color: #016f3f;
    display: block;
    margin-bottom: calc(15 / 750 * 100vw);
    white-space: nowrap;
  }

  .EnjoyBlock .img_slider {
    position: absolute;
    z-index: 4;
    width: calc(520 / 750 * 100vw);
    top: calc(821 / 750 * 100vw);
    left: 50%;
    transform: translateX(-50%);
  }
  .img_slider {
    position: relative;
    padding-bottom: 50px; 
  }
  .img_slider img {
    margin: 0 10px;
    width: calc(520 / 750 * 100vw);
  }
  .img_slider .image_monitor {
    position: relative;
  }
  .img_slider .image_monitor .item_detail {
    width: 100%;
  }
  .img_slider .image_monitor .item_detail p {
    font-size: calc(20 / 750 * 100vw);
    line-height: calc(32 / 20);
    font-weight: 400;
    color: #000000;
    position: absolute;
    top: calc(46/750*100vw);
    right: calc(62/750*100vw);
    width: calc(270 / 750 * 100vw);
  }
  .img_slider .image_monitor._02 .item_detail p {
    line-height: calc(35 / 20);
    right: calc(61 / 750 * 100vw);
    top: calc(57 / 750 * 100vw);
  }
  .img_slider .image_monitor._03 .item_detail p {
    line-height: calc(35 / 20);
    right: calc(62/750*100vw);
    top: calc(57 / 750 * 100vw);
  }
  .img_slider .image_monitor._04 .item_detail p {
    line-height: calc(35 / 20);
    right: calc(62/750*100vw);
    top: calc(71 / 750 * 100vw);
  }
  .img_slider .image_monitor._05 .item_detail p {
    line-height: calc(35 / 20);
    right: calc(62/750*100vw);
    top: calc(60/750*100vw);
  }
  .img_slider .image_monitor .item_detail a {
    font-size: calc(19 / 750 * 100vw);
    color: #fff;
    background-color: #00754a;
    padding: calc(14 / 750 * 100vw) calc(20 / 750 * 100vw);
    border-radius: calc(25 / 750 * 100vw);
    white-space: nowrap;
    position: relative;
    position: absolute;
    bottom: calc(55 / 750 * 100vw);
    right: calc(80 / 750 * 100vw);
    width: calc(213 / 750 * 100vw);
  }

  .slick-prev, .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    border: none;
    background: none;
    color: #1e5c3f; 
    font-size: 40px;
    font-family: serif;
    cursor: pointer;
    outline: none;
  }

  .slick-prev {
    left: 10px;
  }
  .slick-next {
    right: 10px;
  }
  .slick-dots {
    position: absolute;
    bottom: 0;
    display: flex !important;
    justify-content: center;
    width: 100%;
    list-style: none;
    padding: 0;
  }
  .slick-dots li {
    margin: 0 8px;
  }
  .slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 12px;
    height: 12px;
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    background: #d4e3db; 
    border-radius: 50%;
    transition: background 0.3s;
  }
  .slick-dots li.slick-active button {
    background: #006f3f; 
  }
  .slick-prev, .slick-next {
    position: absolute;
    top: calc(356 / 750 * 100vw);
    cursor: pointer;
    outline: none;
    border: none;
    background: transparent;
    width: 40px;
    height: 40px;
    z-index: 2;
    transform: translateY(-50%);
  }
  .slick-prev { 
    left: calc(39 / 750 * 100vw);
  }
  .slick-next { 
    right: calc(39 / 750 * 100vw);
  }
  .slick-prev::before, .slick-next::before {
    content: '';
    display: block;
    width: 7.5px;
    height: 7.5px;
    border-top: 1px solid #006f3f;
    border-left: 1px solid #006f3f;
    position: absolute;
    top: 50%;
    left: 50%;
  }
  .slick-prev::before {
    transform: translate(-30%, -50%) rotate(-45deg);
  }
  .slick-next::before {
    transform: translate(-70%, -50%) rotate(135deg);
  }
  .slick-dots {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    position: relative;
    top: calc(60 / 750 * 100vw);
    gap: calc(26 / 750 * 100vw);
  }
  .slick-dots li {
    margin: 0;
  }
  .slick-dots li button {
    font-size: 0;
    width: calc(20 / 750 * 100vw);
    height: calc(20 / 750 * 100vw);
    padding: 0;
    cursor: pointer;
    border: none;
    border-radius: 50%;
    background-color: #e1eee57d; 
    transition: background-color 0.3s;
  }
  .slick-dots li.slick-active button {
    background-color: #006f3f; 
  }

  /*----------------------------------
    ParticipantContent
  ------------------------------------*/
  .ParticipantContent {
    width: 100%;
    height: calc(1005 / 750 * 100vw);
    position: relative;
    background-color: #d4e9e2;
    top: calc(-190 / 750 * 100vw);
  }
  .ParticipantAnchor {
    position: absolute;
    top: calc(-230 / 750 * 100vw);
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
  }
  .ParticipantContent::before {
    content: "";
    position: absolute;
    top: calc(-230 / 750 * 100vw);
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: calc(372 / 750 * 100vw);
    background-color: #d4e9e2;
    clip-path: ellipse(68% 100% at 50% 100%);
    z-index: 0;
  }
  .ParticipantContent::after {
    content: "";
    position: absolute;
    top: calc(-284 / 750 * 100vw);
    left: 50%;
    transform: translateX(-50%);
    width: calc(715/750*100vw);
    height: calc(1855.5/750*100vw);
    background: url(/rewards/u24/images/participant/sp/accent.webp) no-repeat center top / contain;
    z-index: 0;
  }
  .ParticipantContent ._participant {
    width: 100%;
    margin: 0 auto;
    width: 100%;
    height: 100%;
  }
  .ParticipantContent ._participant ._ttl {
    font-size: calc(34 / 750 * 100vw);
    letter-spacing: 4.5px;
    font-weight: 700;
    color: #016f3f;
    text-align: center;
    position: absolute;
    top: calc(-142 / 750 * 100vw);
    left: 50.4%;
    transform: translateX(-50%);
  }
  .participantWrap {
    position: absolute;
    top: calc(-56 / 750 * 100vw);
    left: 49.9%;
    transform: translateX(-50%);
    width: calc(520.5 / 750 * 100vw);
    z-index: 3;
  }
  .participantBlock {
    position: relative;
    width: calc(520.5 / 750 * 100vw);
    height: calc(655.5 / 750 * 100vw);
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
    margin: 0 10px;
  }
  .participantBlock._01 {
    background-image: url(/rewards/u24/images/participant/sp/content_01.webp);
  }
  .participantBlock._02 {
    background-image: url(/rewards/u24/images/participant/sp/content_02.webp);
  }
  .participantBlock._03 {
    background-image: url(/rewards/u24/images/participant/sp/content_03.webp);
  }
  .participantBlock .sub_ttl {
    width: calc(92 / 750 * 100vw);
    position: absolute;
    top: calc(1 / 750 * 100vw);
    left: 50%;
    transform: translateX(-50%);
  }
  .participantBlock .block_txt {
    font-size: calc(24 / 750 * 100vw);
    line-height: calc(37 / 22);
    font-weight: 700;
    white-space: nowrap;
    color: #000000;
    text-align: center;
    position: absolute;
    top: calc(142 / 750 * 100vw);
    left: 50%;
    transform: translateX(-50%);
  }
  .participantBlock .block_subtxt {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
  }
  ._02 .block_subtxt {
    width: calc(419.5 / 750 * 100vw);
    top: calc(236 / 750 * 100vw);
  }
  ._03 .block_subtxt {
    width: calc(374 / 750 * 100vw);
    top: calc(232 / 750 * 100vw);
  }
  .participantBlock .block_btn {
    font-size: calc(24 / 750 * 100vw);
    font-weight: 500;
    color: #fff;
    background-color: #1e3932;
    padding: calc(17 / 750 * 100vw) calc(48 / 750 * 100vw);
    border-radius: calc(30 / 750 * 100vw);
    white-space: nowrap;
    position: absolute;
    bottom: calc(60 / 750 * 100vw);
    left: 50%;
    transform: translateX(-50%);
  }
  .participantWrap .slick-prev, .participantWrap .slick-next {
    top: calc(726 / 750 * 100vw);
  }
  .participantWrap .slick-prev {
    left: calc(82 / 750 * 100vw);
  }
  .participantWrap .slick-next {
    right: calc(82 / 750 * 100vw);
  }
  .participantWrap .slick-dots li button {
    background-color: #beddd1;
  }
  .participantWrap .slick-dots li.slick-active button {
    background-color: #006f3f;
  }

  /*----------------------------------
    HowtoContent
  ------------------------------------*/
  .HowtoContent {
    width: 100%;
    height: calc(1100 / 750 * 100vw);
    position: relative;
    background-color: #fff6b3;
    top: calc(-106 / 750 * 100vw);
  }
  .HowtoAnchor {
    position: absolute;
    top: calc(-308 / 750 * 100vw);
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
  }
  .HowtoContent::before {
    content: "";
    position: absolute;
    top: calc(-308 / 750 * 100vw);
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: calc(372 / 750 * 100vw);
    background-color: #fff6b3;
    clip-path: ellipse(68% 100% at 50% 100%);
    z-index: 0;
  }
  .HowtoContent::after {
    content: "";
    position: absolute;
    top: calc(-410 / 750 * 100vw);
    left: 50%;
    transform: translateX(-50%);
    width: calc(715/750*100vw);
    height: calc(838.5/750*100vw);
    background: url(/rewards/u24/images/howto/sp/accent.webp) no-repeat center top / contain;
    z-index: 2;
  }
  .HowtoContent ._howto {
    width: 100%;
    margin: 0 auto;
    width: 100%;
    height: 100%;
  }
  .HowtoContent ._howto ._ttl {
    font-size: calc(34 / 750 * 100vw);
    letter-spacing: 1.5px;
    line-height: 1.5;
    font-weight: 700;
    color: #016f3f;
    text-align: center;
    position: absolute;
    top: calc(-224 / 750 * 100vw);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    white-space: nowrap;
  }
  .HowtoContent ._howto .howtoWrap {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: calc(34 / 750 * 100vw);
    top: calc(-88 / 750 * 100vw);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
  }
  .howtoBlock {
    position: relative;
    width: calc(542 / 750 * 100vw);
    height: calc(381 / 750 * 100vw);
    background-size: contain;
    background-position: center top;
    background-repeat: no-repeat;
  }
  .howtoBlock._01 {
    background-image: url(/rewards/u24/images/howto/sp/content_01.webp);
  }
  .howtoBlock._02 {
    background-image: url(/rewards/u24/images/howto/sp/content_02.webp);
  }
  .howtoBlock .sub_ttl {
    font-size: calc(25 / 750 * 100vw);
    font-weight: 700;
    color: #000000;
    text-align: center;
    position: absolute;
    top: calc(30 / 750 * 100vw);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
  }
  .howtoBlock .block_txt {
    font-size: calc(20 / 750 * 100vw);
    line-height: calc(34 / 20);
    font-weight: 400;
    white-space: nowrap;
    color: #000000;
    text-align: left;
    position: absolute;
    top: calc(274 / 750 * 100vw);
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
  }

  /*----------------------------------
    FaqContent
  ------------------------------------*/
  .FaqContent {
    width: 100%;
    height: calc(214 / 750 * 100vw);
    position: relative;
    background-color: #f2f0ea;
    top: calc(-272 / 750 * 100vw);
  }
  .FaqAnchor {
    position: absolute;
    top: calc(-155 / 750 * 100vw);
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
  }
  .FaqContent::before {
    content: "";
    position: absolute;
    top: calc(-155 / 750 * 100vw);
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: calc(372 / 750 * 100vw);
    background-color: #f2f0ea;
    clip-path: ellipse(68% 100% at 50% 100%);
    z-index: 0;
  }
  .FaqContent::after {
    content: "";
    position: absolute;
    top: calc(-255 / 750 * 100vw);
    left: 50%;
    transform: translateX(-50%);
    width: calc(696.5/750*100vw);
    height: calc(659.5/750*100vw);
    background: url(/rewards/u24/images/faq/sp/accent.webp) no-repeat center top / contain;
    z-index: 2;
  }
  .FaqContent ._faq {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    width: 100%;
    position: relative;
  }
  .FaqContent ._faq::before {
    content: "";
    position: absolute;
    bottom: calc(-272 / 750 * 100vw);
    left: 50%;
    transform: translateX(-50%);
    width: calc(125 / 750 * 100vw);
    height: calc(176 / 750 * 100vw);
    background: url(/rewards/u24/images/faq/icon.webp) no-repeat center top / contain;
    z-index: 1;
  }
  .FaqContent ._faq ._ttl {
    font-size: calc(34 / 750 * 100vw);
    letter-spacing: 1.5px;
    font-weight: 700;
    color: #016f3f;
    text-align: center;
    position: absolute;
    top: calc(-66 / 750 * 100vw);
    left: 50%;
    transform: translateX(-50%);
  }
  .FaqContent ._faq .faqWrap {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: calc(29 / 750 * 100vw);
    top: calc(36 / 750 * 100vw);
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
  }
  .faqBtn {
    width: calc(460 / 750 * 100vw);
    height: calc(60 / 750 * 100vw);
    font-size: calc(24 / 750 * 100vw);
    font-weight: 500;
    color: #fff;
    background-color: #1e3932;
    border-radius: calc(30 / 750 * 100vw);
    white-space: nowrap;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /*----------------------------------
    BnrContent
  ------------------------------------*/
  .BnrContent {
    width: 100%;
    height: 112px;
    background-color: #1e3932;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .BnrContent ._bnr { 
    display: flex;
    justify-content: center;
    align-items: center;
    width: 155px;
    height: 112px;
  }
}