/** @format */
@charset "shift-JIS";

.container_ {
  font-family: "M PLUS 2", sans-serif;
  font-style: normal;
  width: 100%;
  max-width: auto;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;

  .xl, .lg, .md, .sm {
    display: none;
  }

  .xxl {
    display: block;
  }
}

.section {
  .section__inner {
    margin: 0 auto;
    width: 100%;
    max-width: 1240px;
    box-sizing: border-box;

    &.section__inner--mv {
      max-width: 1560px;
      width: 100%;
      padding: 0 20px;
    }

    &.section__inner--measures {
      max-width: 1560px;
      width: 100%;
      padding: 0 20px;
    }

    &.section__inner--caution-win10 {
      padding: clamp(80px, 9.3125vw, 149px) 20px clamp(30px, 5.1vw, 86px);

      &::after {
        content: '';
        display: block;
        width: clamp(75px, 17.3125vw, 277px);
        height: clamp(200px, 29.4375vw, 471px);
        display: block;
        position: absolute;
        bottom: 0;
        right: 3%;
        background-image: url(./img/girl.png);
        background-repeat: no-repeat;
        background-size: contain;
      }
    }

    &.section__inner--dangerous-point {
      padding: clamp(100px, 17.8vw, 178px) 0 clamp(80px, 12vw, 120px);
    }
  }
}

.mv {
  margin-top: 30px;

  .mv__body {
    background-image: url(./img/mv.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    height: 0;
    padding-top: calc(620 / 1560* 100%);
    position: relative;
  }

  .mv__text {
    text-align: center;
    line-height: 1.3;
    position: absolute;
    top: clamp(10px, 0.64vw, 178px);
    left: 51%;
    top: 8%;
    font-weight: bold;
    letter-spacing: 0.1em;
  }

  .mv__text-main {
    color: #ffff00;
    font-size: clamp(18px, 4.9vw, 79px);
  }

  .mv__text-sub {
    color: #fff;
    font-size: clamp(10px, 3.06vw, 49px);
    margin-top: 4px;
    line-height: 1.4;
    transform: translateX(-18px);
  }

  .mv__text-dots {
    background-image: radial-gradient(circle at center, #ffff00 10%, transparent 10%);
    background-position: top right;
    background-repeat: repeat-x;
    background-size: clamp(10px, 5.56vw, 89px) clamp(10px, 1.87vw, 30px);
    padding-top: clamp(5px, 1vw, 10px);
    display: inline-block;
  }

  .font-80per {
    font-size: 80%;
  }

  .font-110per {
    font-size: 110%;
  }
}


.caution {
  margin-top: clamp(30px, 6.4375vw, 103px);
  position: relative;
  z-index: 2;

  .caution__title {
    position: relative;
    font-size: clamp(14px, 4.4vw, 44px);
    font-weight: bold;
    text-align: center;
    font-family: "Noto Sans JP", sans-serif;
    line-height: 1.7;
  }

  .caution__emphasis {
    text-emphasis: filled;
    color: #e60012;
  }
  
  .caution__body {
    background-color: #fdf7d5;
      border-radius: 34px;
      padding: clamp(16px, 2vw, 32px) clamp(20px, 3.9vw, 62px) clamp(25px, 3.1vw, 50px) clamp(20px, 2.9vw, 47px);
      margin: clamp(20px, 2.4vw, 39px) auto 0;
      max-width: 1240px;
      box-sizing: border-box;
  }

  .caution__image-wrapper {
    text-align: center;
  }

  .caution__your-pc {
    font-size: clamp(14px, 2.4vw, 24px);
    color: #fff;
    background-color: #111;
    text-align: center;
    padding: 5px;
    position: relative;
    width: calc(100% - 150px);
    min-width: 82%;
    margin-top: clamp(30px, 3.2vw, 56px);
    margin-left: auto;
    background-image: repeating-linear-gradient(45deg, #ffe113, #ffe113 10px, #000000 10px, #000000 20px);
    display: none;

    &.is-visible {
      display: block;
    }

    &::before {
      content: '';
      width: clamp(90px, 13.7vw, 220px);
      height: clamp(125px, 13.1vw, 210px);
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      transform: translateX(-92%);
      background-image: url(./img/pc.png);
      background-repeat: no-repeat;
      background-size: 100%; 
    }
  }

  .caution__your-pc-inner {
    background-color: #e60012;
    margin: 2px;
    padding: 10px 0;
  }

  .caution__your-pc-text {
    margin-left: 12px;
    letter-spacing: .1em;
  }

  .caution__your-pc-emphasis {
    font-weight: bold;
    font-size: clamp(20px, 2.25vw, 32px);
  }
  
  .caution__your-pc-emphasis-yellow {
    color: #ffff00;
    font-size: clamp(28px, 3.375vw, 54px);
  }
}

.caution-win10 {
  background-image: url(./img/cautionWin10.png);
  background-size: cover;
  position: relative;
  margin-top: -40px;
  z-index: 1;

  .caution-win10__title {
    position: relative;
    font-size: clamp(14px, 1.9375vw, 31px);
    font-weight: bold;
    text-align: center;
    font-family: "Noto Sans JP", sans-serif;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;

    &::before {
        content: '';
        width: clamp(50px, 11.3vw, 113px);
        height: clamp(50px, 11.3vw, 100px);
        background-image: url(./img/caution.png);
        background-repeat: no-repeat;
        background-size: contain;
        margin-bottom: 20px;
    }
  }

  .caution-win10__title-emphasis {
    color: #ffff00;
    font-size: clamp(16px, 3.4375vw, 55px);
  }

  .caution-win10__text {
    font-size: clamp(12px, 1.25vw, 20px);
    text-align: center;
    color: #fff;
    font-weight: bold;
    margin-top: 8px;
    line-height: 2;
  }
}

.dangerous-point {
  background-color: #e60012;

  .dangerous-point__image-wrapper {
    position: relative;
    z-index: 2;
    max-height: 100%;
    margin-left: 4%;
    text-align: center;
  }

  .dangerous-point__image {
    max-width: 100%;
  }

  .dangerous-point-list__item {
    background-color: #fff;
    border-radius: 40px;
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    background-image: url(./img/caution01Bg.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left;
    padding-top: 30px;

    &::before {
      content: '';
      width: clamp(263px, 90.5vw, 1123px);
      height: clamp(42px, 14.4vw, 179px);
      display: block;
      position: absolute;
      top: -17%;
      left: 50%;
      transform: translateX(-50%);
      background-image: url(./img/caution01_title.png);
      background-repeat: no-repeat;
      background-size: 100%;
      z-index: 1;
    }

    &:nth-of-type(even) {
      flex-direction: row-reverse;
      background-image: url(./img/caution02Bg.png);
      background-position: right;
    }

    &:nth-of-type(2) {
      .dangerous-point__image-wrapper {
        margin-left: 0;
        margin-right: 4%;
      }
      
      .dangerous-point-list__text-wrapper {
        left: 5%;
      }
      
      &::before {
        background-image: url(./img/caution02_title.png);
      }
    }

    &:nth-of-type(3) {
      background-image: url(./img/caution03Bg.png);

      &::before {
        background-image: url(./img/caution03_title.png);
      }

      .dangerous-point__image-wrapper {
        margin-left: 8%;
      }

      .dangerous-point-list__text-wrapper {
        left: 54%;
        top: 22%;
      }
    }

    & + & {
      margin-top: clamp(40px, 7.5vw, 120px);
    }
  }

  .dangerous-point-image-wrapper {
    &::before {
      content: '';
      max-width: 506px;
      max-height: 444px;
      width: 100%;
      height: 100%;
      display: block;
      position: absolute;
      bottom: 0;
      left: 4%;
      background-image: url(./img/caution01Person.png);
      background-repeat: no-repeat;
    }
  }

  .dangerous-point-list__text-wrapper {
    position: absolute;
    left: 49%;
    top: 19%;
    line-height: 1.8;
  }

  .dangerous-point-list__text {
    font-size: clamp(16px, 1.5vw, 24px);
    font-weight: bold;
  }

  .dangerous-point-list__emphasis {
    color: #e60012;
    border-bottom: 2px solid #e60012;
  }

  .dangerous-point-list__text-sub {
    font-size: clamp(12px, 1.25vw, 19px);
    font-weight: bold;
    line-height: 2;
    margin-top: clamp(10px, 1.25vw, 25px);
  }
}

.measures {
  .measures__body {
    margin-top: clamp(40px, 12vw, 120px);
    background-image: url(./img/replace.png);
    background-repeat: no-repeat;
    background-size: 100%;
    height: 0;
    display: flex;
    justify-content: end;
    position: relative;
    padding-top: calc(620 / 1560 * 100%);
  }

  .measures__body-inner {
    position: static;
  }

  .measures__title {
    font-size: clamp(10px, 4.5vw, 72px);
    color: #e60012;
    font-weight: 800;
    text-align: center;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: clamp(2px, 1vw, 16px);
    position: absolute;
    top: 15%;
    left: 41%;
  }

  .measures__title-fukidashi {
    width: clamp(50px, 11.25vw, 180px);
    height: clamp(50px, 11.25vw, 180px);
    color: #fff;
    background-color: #e60012;
    border-radius: 50%;
    font-size: clamp(10px, 2vw, 32px);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;

    &::after {
      content: '';
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      right: -10px;
      border: clamp(5px, 0.68vw, 10px) solid transparent;
      border-left: clamp(5px, 0.93vw, 15px) solid #e60012;
      z-index: 0;
    }
  }

  .measures__detail {
    font-size: clamp(10px, 2.625vw, 42px);
    font-weight: bold;
    text-align: center;
    position: absolute;
    bottom: 21%;
    left: 44%;
  }

  .measures__detail-list {
    margin-top: clamp(0, 0.8vw, 13px);
    display: inline-block;
    text-align: left;
  }

  .measures__detail-item {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: clamp(10px, 2vw, 32px);

    & + & {
      margin-top: clamp(5px, 0.625vw, 10px);
    }

    &::before {
      content: '';
      width: clamp(20px, 2.4375vw, 39px);
      height: clamp(20px, 2.375vw, 38px);
      display: block;
      background-image: url(./img/check.png);
      background-repeat: no-repeat;
      background-size: contain;
    }
  }

  .measures__detail-emphasis {
    color: #e60012;
  }
}

.top_event {
  margin-top: 104px;

    .top-event__title {
      font-size: clamp(14px, 4.4vw, 44px);
      text-align: center;
      font-weight: bold;
      display: flex;
      flex-direction: column;
      align-items: center;

      &::after {
        content: '';
        width: 90px;
        height: 4px;
        background-color: #e60012;
        margin-top: 30px;
      }
    }

    .StyleW_Frame_ {
      width: auto;
    }
}

div.container_ div.contents_ #block_of_event {
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  div.StyleW_Frame_ {
    width: auto;
  }

  div.StyleW_Item_ {
    margin: 0;
    width: calc(100% / 3 - 9.8vw * 2 / 3);
  }

  div.StyleW_Line_ {
    gap: clamp(10px, 9.8vw, 158px);
  }

  div.StyleW_Item_ div.img_ img, div.StyleW_Item_ div.replace_img_ img {
    width: 100%;
    max-width: 330px;
  }

  div.StyleW_Item_ div.img_ {
    width: 100%;
  }

  div.StyleW_Item_ div.desc_ .desc2_ .orignal_price_ .orignal_p_ {
    font-size: clamp(16px, 2vw, 32px);
  }

   div.StyleW_Item_ .goods_detail_btn_ a {
    width: 100%;
  }

  .features_txt_link_ {
    width: 100%;
  }
}

@media(max-width: 1599px) {
  .xl, .lg, .md, .sm {
    display: none;
  }

  .xxl {
    display: block;
  }

  .mv {
    .mv__text {
      top: 50%;
      transform: translateY(-50%);
    }
  }

  .dangerous-point {
    .dangerous-point-list {
      width: calc(100% - 40px);
      margin: 0 auto;
    }
  }

  .measures {
    position: relative;

    .measures__body-inner {
      position: absolute;
      top: 50%;
      left: 38%;
      width: 60%;
      transform: translateY(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .measures__title {
      position: relative;
      left: auto;
      bottom: auto;
    }

    /* .measures__title-fukidashi {
      width: 160px;
      height: 160px;
    } */

    .measures__detail {
      position: relative;
      left: auto;
      bottom: auto;
      margin-top: clamp(5px, 1.25vw, 20px);
    }
  }
}

@media(max-width: 1300px) {
  .caution {
    .caution__image {
      width: 100%;
    }
  }
}


@media(max-width: 1200px) {
  .container_ {
    .xxl {
      display: none;
    }
    
    .lg {
      display: none;
    }
    
    .md {
      display: none;
    }
    
    .sm {
      display: none;
    }

    .xl {
      display: block;
    }
  }

  .dangerous-point-list {

    .dangerous-point-list__text-wrapper {
      left: 55%;
    }

    .dangerous-point__image-wrapper {
      width: 40vw;
    }
  }

}

@media(max-width: 992px) {
  .container_ {
    .xxl {
      display: none;
    }

    .md {
        display: none;
    }

    .sm {
      display: none;
    }

    .lg {
      display: block;
    }

  }

  .section {
    .section__inner {
        &.section__inner--caution-win10 {
           &::after {
            right: 0;
           }
        }
    }
  }

  .caution {
    .caution__your-pc {
        width: calc(100% - 100px);
        min-width: 70%;
    }
  }

  .dangerous-point-list {
      .dangerous-point-list__text-wrapper {
          left: 53%;
      }
  }
}


@media(max-width: 768px) {
  .container_ {
    .xxl {
      display: none;
    }

    .lg {
      display: none;
    }
    
    .sm {
      display: none;
    }

    .md {
        display: block;
    }
  }

  .section {
    .section__inner {
      &.section__inner--mv {
        padding: 0 5px;
      }

      &.section__inner--caution-win10 {
        &::after {
          display: none;
        }
      }

      &.section__inner--measures {
        padding-left: 5px;
        padding-right: 5px;
      }
    }
  }

  .mv {
    .mv__text-sub {
      transform: translateX(0);
    }
  }

  .caution-win10 {

    .caution-win10__text-wrapeer {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .caution-win10__text {
      text-align: left;
    }

    .caution-win10__image-wrapper {
      transform: translateY(clamp(30px, 5.1vw, 86px));
    }

    .caution-win10__image {
      width: clamp(100px, 17.3125vw, 277px);
      height: clamp(150px, 29.4375vw, 471px);
    }
  }

  .dangerous-point-list {
    .dangerous-point-list__item {
      background-position: bottom;
      background-image: url(./img/cautionspbg.png?1);
      
      &:nth-of-type(even),
      &:nth-of-type(3) {
        background-image: url(./img/cautionspbg.png?1);
        background-position: bottom;
      }

      &::before {
        top: -4%;
      }
    }

    .dangerous-point__image-wrapper {
      width: 80%;
      margin: 20px auto 0;
    }

    .dangerous-point-list__text-wrapper {
      position: static;
      width: 80vw;
      padding: clamp(30px, 7.8vw, 60px) 0 0;
      box-sizing: border-box;
    }

    .dangerous-point-list__text-sub {
      margin-top: 20px;
    }

    .dangerous-point-list__item,
    .dangerous-point-list__item:nth-of-type(even) {
      flex-direction: column;
      flex-direction: column-reverse;
      align-items: center;
    }
  }

  .caution {
    .caution__your-pc {
        width: calc(100% - 19.5vw);

        &::before {
          content: '';
          width: clamp(100px, 20.8vw, 160px);
          height: clamp(125px, 19.5vw, 150px);
          display: block;
          position: absolute;
          bottom: 0;
          left: 0;
          transform: translateX(-92%);
          background-image: url(./img/pc.png);
          background-repeat: no-repeat;
          background-size: 100%;
      }
    }
  }

  .measures {
    .measures__body {
      background-image: url(./img/replacesp.png);
      padding-top: calc(740 / 1560* 100%);
    }  
  }

  div.container_ div.contents_ #block_of_event {
      div.StyleW_Item_ {
      width: calc(50% - 40px / 2);
    }
  
    div.StyleW_Line_ {
      gap: 40px;
    }
  
    div.StyleW_Item_ div.img_ img, div.StyleW_Item_ div.replace_img_ img {
      width: 100%;
    }

    div.StyleW_Item_ div.img_ {
      width: 100%;
      height: auto !important;
    }
  }
  
}

@media(max-width: 576px) {
  .container_ {
    .sm {
      display: block;
    }
  }
}

@media(max-width: 375px) {
  .caution {
    .caution__your-pc {
      width: calc(100% - 200px);
    }
  }

  .dangerous-point-list {
    .dangerous-point-list__text-wrapper {
      padding-top: 10px;
    }
  }
}