.ml-heart-stroke::before,
.ml-heart-fill::after {
  content:"";
  width:2.4rem;
  height:auto;
  aspect-ratio: 1/1;
  background-color:var(--my-color);
  -webkit-mask-size: contain;
  mask-size:contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat:no-repeat;
  pointer-events: none;
  transition-property: opacity;
  transition-duration: .5s;
  @media (width <= 767px) {/* SP */
    width:2rem;/*1.6rem;*/
  }
}
.ml-heart-stroke::before {
  -webkit-mask-image: url("../img/dress/heart_stroke.svg");
  mask-image: url("../img/dress/heart_stroke.svg");
}
.ml-heart-fill::after {
  -webkit-mask-image: url("../img/dress/heart_fill.svg");
  mask-image: url("../img/dress/heart_fill.svg");
}

.mylist_button-wrap {
  position:relative;

  .js-mylist_button {
    position:absolute;
    bottom:0;
    right:0;
  }
}

.js-mylist_button {
  display:flex;
  justify-content: center;
  align-items: center;
  --my-color:#fff;
  width:5.4rem;
  height:5.4rem;
  z-index: 10;
  cursor: pointer;
  @media (width <= 767px) {/* SP */
    width:4.0rem;
    height:4.0rem;
  }

  &[aria-pressed="true"] {
    &::after {
      opacity:1;
    }
  }
  &[aria-pressed="false"] {
    &::after {
      opacity:0;
    }
  }

  &::before,
  &::after {
    position:absolute;
  }
}

/* Modal
----------------------------------------------------------------------------- */

:where(dialog) {
  all: revert;
  box-sizing: border-box;
  margin:0;
  padding:0;
  border:0;
  background: unset;
  max-width:unset;
  max-height:unset;
}

body.is-modal-lock {
  overflow: hidden;

  @media (width > 767px) {
    padding-right:var(--scrollbar);
    .mod_header > .header_inner {
      width:calc(100% - var(--scrollbar));
    }
    .menu_btn {
      right:var(--scrollbar);
    }
  }
}

.js-mylist_add-modal {
  opacity: 0;
  transition-property: opacity;
  transition-duration:.5s;
  width:100%;
  max-height:100dvh;
  overflow-y:auto;
  position:fixed;
  top:0;
  left:0;
  z-index: 10000000;

  &[open] {
    display:flex;
    justify-content: center;
    align-items: flex-start;
  }

  &.is-open {
    opacity: 1;
    background: rgb(from #000 r g b / .8);
    &::backdrop {
      opacity:1;
    }
  }

  &::backdrop {
    background: rgb(from #000 r g b / .8);
    opacity:0;
    transition-property: opacity;
    transition-duration:.5s;
  }

  .modal_inner {
    display:flex;
    justify-content: center;
    flex-direction: column;
    min-height:100dvh;
    @media (width <= 767px) {
      width:calc(100% - 4.0rem);
    }
  }

  .modal_contents {
    margin-inline:auto;
    color:#fff;
    text-align: center;
    @media (width > 767px) {
      width:76.0rem;
    }
    @media (width <= 767px) {
      width:100%;
    }

    > .text {
      padding-block:5.6rem;
      border-block:1px solid;
    }
    .heading {
      margin-bottom:1.6rem;
      font-family:var(--ff_min);
      line-height:1.5;
      font-size:2.4rem;
      @media (width <= 767px) {
        font-size:2.0rem;
      }

      &::before {
        background-color:#fff;
        display:block;
        margin-inline:auto;
        margin-bottom:2.4rem;
        width:3.0rem;
        @media (width <= 767px) {
          width:2.8rem;
        }
      }
    }
    .desc {
      font-family:var(--ff_min);
      font-size:1.8rem;
      line-height:1.7;
      @media (width <= 767px) {
      font-size:1.5rem;
      }

      > span {
        display:inline-flex;
        align-items: center;
        font-size:2.4rem;
        @media (width <= 767px) {
          font-size:1.8rem;
        }
        &::before {
          content:"「";
        }
        &::after {
          content:"」";
        }
        > a {
          display:flex;
          justify-content: center;
          align-items: center;
          transition-property: opacity;
          transition-duration:.3s;
          @media (hover:hover) {
            &:hover {
              opacity:.7;
            }
          }
          &::before {
            display:inline-block;
            width:2.0rem;
            margin-inline:.4rem;
            background-color:#fff;
            @media (width <= 767px) {
              margin-inline:.2rem;
              width:1.6rem;
            }
          }
		  &:focus {
			outline: none;
		  }
        }
      }
    }
    .hidden_check {
      display:flex;
      align-items: center;
      margin-inline:auto;
      width:fit-content;
      gap:.8rem;
      margin-top:7.6rem;
      font-size:1.3rem;
      line-height:1;
      letter-spacing: .05em;
      position: relative;
      cursor: pointer;
      position:relative;

      @media (width <=767px) {
        margin-top:5.6rem;
      }

      &:has(input:checked) {
        > i::after {
          opacity: 1;
        }
      }

      > i {
        display:flex;
        justify-content: center;
        align-items: center;
        margin-top:-1px;
        width: 1.1em;
        height: 1.1em;
        border: 1px solid;
        position:relative;

        &::after {
          content: "";
          width: 100%;
          height: 100%;
          position: absolute;
        }
        &::after {
          background-color: #fff;
          clip-path: polygon(1px 60%, 45% 90%, 100% 5%, 45% 60%);
          opacity: 0;
          transition-property: opacity;
          transition-duration: .5s;
        }
      }
    }
  }

  .js-modal-close {
    display:flex;
    align-items: center;
    justify-content: space-between;
    gap:1.2rem;
    margin-inline:auto;
    margin-top:4.0rem;
    border:1px solid;
    padding:.8rem 1.6rem;
    width:18.0rem;
    font-family:var(--ff_min);
    font-size:1.5rem;
    line-height:1.8;
    letter-spacing: 0;
    background-color:var(--bc_black);
    cursor:pointer;
    > i {
      display:flex;
      justify-content: center;
      align-items: center;
      width:1.2rem;
      height:1.2rem;
      transform:rotate(45deg);
      &::before,
      &::after {
        content:"";
        background-color:#fff;
        position:absolute;
      }
      &::before {
        width:100%;
        height:2px;
      }
      &::after {
        width:2px;
        height:100%;
      }
    }
  }
}