main {
  .mv {
    margin-bottom: 24px;
    .headline{
      position: relative;
      h1{
        padding: 8px 12px;
        font-size: calc(14 / 375 * 100vw);
        font-weight: 900;
        font-feature-settings: 'palt' on;
        line-height: 100%;
        background-color: var(--Yellow-YE1);
        border-radius: 100px;
        position: absolute;
        top: calc(20 / 400 * 100%);
        left: calc(12 / 375 * 100vw);
        &::after{
          content: "";
          display: block;
          width: calc(7 / 375 * 100vw);
          height: calc(8 / 375 * 100vw);
          background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="7" height="8" viewBox="0 0 7 8" fill="none"><path d="M7 8L0 0L7 0V8Z" fill="%23FDD835"/></svg>');
          background-size: contain;
          background-repeat: no-repeat;
          position: absolute;
          top: 100%;
          left: 40px;
        }
      }
    }
  }
  .popular-items {
    h4 {
      color: var(--Blue-BL1);
      margin-bottom: 12px;
      &::before,
      &::after {
        background-color: var(--Blue-BL1);
      }
    }
  }
  #ranking {
    h2 {
      margin-bottom: 36px;
    }
  }
  .sect_example_content {
    padding-bottom: 24px;
    &:last-of-type {
      border-bottom: none;
    }
    .box_images {
    }
    .box_summary {
      dl {
        dt {
          position: relative;
          color: var(--Black-BK1);
          &::after {
            position: absolute;
            content: "：";
            right: -1em;
          }
        }
      }
    }
  }
  #flow {
    .fukidashi {
      max-width: 230px;
      margin: 0 auto 40px;
      padding: 20px 18px;
      text-align: center;
      border: 1px solid var(--Blue-BL1);
      border-radius: 10px;
      color: #000;
      color: var(--Blue-BL1);
      font-weight: 700;
      position: relative;
      em {
        text-decoration: none;
        color: var(--Red-RD1);
        display: block;
      }
      &::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        border-style: solid;
        border-width: 8px 8px 0 8px;
        border-color: var(--Blue-BL1) transparent transparent;
        translate: -50% 100%;
      }

      &::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        border-style: solid;
        border-width: 6.6px 6.6px 0 6.6px;
        border-color: var(--White-WH1) transparent transparent;
        translate: -50% 100%;
      }
    }
  }
}

@media (min-width: 576px) and (max-width: 1023px) {
  /* タブレット用（必要に応じて） */
}
@media (min-width: 576px) {
  main {
    .mv {
      max-width: 1120px;
      margin: 0 auto 48px;
      .headline{
        h1{
          padding: calc(12 / 1120 * 100vw) calc(16 / 1120 * 100vw);
          font-size: calc(18 / 1024 * 100vw);
          top: calc(40 / 380 * 100%);
          left: calc(40 / 1120 * 100vw);
          &::after{
            width: calc(12 / 1120 * 100vw);
            height: calc(14 / 1120 * 100vw);
            top: 99%;
          }
        }
      }
    }
    .popular-items {
      h4 {
        margin-bottom: 20px;
      }
    }
    #ranking {
      h2 {
        margin-bottom: 40px;
      }
    }
    .sect_example_content {
      padding-bottom: 24px;
      &:last-of-type {
        border-bottom: none;
      }
      .inner_content {
        width: 41.52%;
      }
      .inner_detail {
        width: 55.63%;
      }
      .box_images {
        [class*="box_images"] .label {
          font-size: 16px;
        }
      }
      .box_summary {
        dl {
          dt {
            position: relative;
            color: var(--Black-BK1);
            &::after {
              position: absolute;
              content: "：";
              right: -1em;
            }
          }
        }
      }
    }
    #flow {
      .fukidashi {
        max-width: 552px;
        margin-bottom: 45px;
        padding: 18px 52px;
        em {
          display: inline;
        }
      }
    }
  }
}

@media (min-width: 1024px){
  main{
    .mv{
      .headline{
        h1{
          padding: 12px 16px;
          font-size: 18px;
          top: 40px;
          left: 40px;
          &::after{
            width: 12px;
            height: 14px;
          }
        }
      }
    }
  }
}