:root {
  --color-white: #fff;
  --color-blue: #457FBD;
  --color-blue-rgb: 69 127 189;
  --color-green: #9AFF6D;
  --color-green-rgb: 154 255 109;
  --color-bg: var(--color-white);
  --color-text: var(--color-blue);
  --font-gothic: "Zen Kaku Gothic Antique", sans-serif;
  --font-outfit: "Outfit", sans-serif;
  --design-sp: 375;
  --design-pc: 1440;
  --vw-sp: calc(100vw / var(--design-sp));
  --vw-pc: calc(100vw / var(--design-pc));
  --min-rate: 0.7;
}

body {
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--color-bg);
  color: var(--color-blue);
  font-family: var(--font-gothic);
  font-size: 16px;
  font-weight: 700;
  font-style: normal;
  font-optical-sizing: auto;
  line-height: 1.8;
}

img, svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

a {
  text-decoration: none;
}

/*
  utility
  =====================================================================
*/
.u-pc {
  @media (max-width: 767px) {
    display: none;
  }
}

.u-sp {
  @media (min-width: 768px) {
    display: none;
  }
}

.fadeIn,
.fadeIn_stag {
  opacity: 0;
  transform: translate(0, 40px);
}


/*
  layout
  =====================================================================
*/
.l-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  container-type: inline-size;
  z-index: 10;

  @media (max-width: 767px) {
    height: calc(clamp(60px, calc(60 * var(--vw-sp)), 100px) + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) clamp(calc(10px * var(--min-rate)), calc(10 * var(--vw-sp)), 10px) clamp(18px, calc(18 * var(--vw-sp)), 36px);
  }
  @media (min-width: 768px) {
    height: calc(100px + env(safe-area-inset-top, 0px));
    padding: env(safe-area-inset-top, 0px) clamp(calc(20px * var(--min-rate)), calc(20 * var(--vw-pc)), 20px) 36px;
  }

  &::before {
    position: absolute;
    inset: 0;
    content: "";
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
    z-index: -1;
    @media (max-width: 767px) {
      background-image: url("../images/bg_header_cross_sp.png.webp");
    }
    @media (min-width: 768px) {
      background-image: url("../images/bg_header_cross_pc.png.webp");
    }
  }

  &::after {
    position: absolute;
    inset: 0;
    content: "";
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1;
    @media (max-width: 767px) {
      background-position: center bottom;
      background-image: url("../images/bg_header_white_sp.png.webp");
    }
    @media (min-width: 768px) {
      background-position: center bottom;
      background-image: url("../images/bg_header_white_pc.png.webp");
    }
  }
}

.l-main {
  min-height: 100vh;
}

.l-footer {
  display: grid;
  place-content: center;
  @media (max-width: 767px) {
    height: 60px;
    padding-top: 14px;
    background: url("../images/bg_wave_white_top_sp.png.webp") no-repeat center top / cover;
  }
  @media (min-width: 768px) {
    height: 100px;
    padding-top: 44px;
    background: url("../images/bg_wave_white_top_pc.png.webp") no-repeat center top / cover;
  }
}

/* --------------------------------------------------------
  header
  ------------------------------------------------------ */

.p-header {
  display: flex;
  align-items: center;
  height: 100%;
  @container (max-width: 850px) {
    justify-content: space-between;
  }
  @container (min-width: 851px) {

  }
}

/* logo */
.p-logo {
  z-index: 10;
  @container (max-width: 850px) {
    order: 2;
    width: clamp(calc(140px * var(--min-rate)), calc(140 * var(--vw-sp)), 140px);
  }
  @container (min-width: 851px) {
    width: clamp(calc(188px * var(--min-rate)), calc(188 * var(--vw-pc)), 188px);
  }

  svg {
    fill: var(--color-blue);
  }
}

/* nav */
.p-nav {
  @container (max-width: 850px) {
    order: 3;
  }
  @container (min-width: 851px) {
    margin-left: auto;
  }

  &.is-open {
    @container (max-width: 850px) {
      .p-nav_btn {
        span:first-child {
          rotate: 45deg;
          margin: 0;
        }
        span:nth-child(2) {
          opacity: 0;
        }
        span:last-child {
          rotate: -45deg;
          margin: 0;
        }
      }

      .p-nav_list {
        translate: 0 0;
      }
    }
  }
}

.p-nav_btn {
  @container (max-width: 850px) {
    position: relative;
    width: 22px;
    height: 22px;
    z-index: 10;

    span {
      position: absolute;
      top: 50%;
      left: 50%;
      translate: -50% -50%;
      content: "";
      display: block;
      width: 100%;
      height: 2px;
      background: var(--color-blue);
      transition: opacity 0.3s ease-in-out, rotate 0.3s ease-in-out, margin 0.3s ease-in-out;
    }

    span:first-child {
      margin-top: -7px;
    }
    span:last-child {
      margin-top: 7px;
    }
  }
  @container (min-width: 851px) {
    display: none;
  }
}

.p-nav_list {
  @container (max-width: 850px) {
    position: absolute;
    top: 0;
    right: 0;
    translate: 0 calc((100% + 60px) * -1);
    width: 100%;
    background: var(--color-white);
    padding: 62px clamp(70px * var(--min-rate), calc(70 * var(--vw-pc)), 70px) 4px;
    z-index: 0;
    transition: translate 0.4s ease-out;

    &::after {
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      content: "";
    }
  }
  @container (min-width: 851px) {
    position: relative;
    display: flex;
    align-items: center;
    z-index: 10;
  }

  @media (max-width: 767px) {
    padding: 80px clamp(calc(35px * var(--min-rate)), calc(35 * var(--vw-sp)), 35px) 4px;

    &::after {
      height: 60px;
      background: url("../images/bg_wave_white_bottom_sp.png.webp") no-repeat center top / cover;
    }
  }
  @media (min-width: 768px) {
    &::after {
      height: 100px;
      background: url("../images/bg_wave_white_bottom_pc.png.webp") no-repeat center top / cover;
    }
  }
}

.p-nav_listItem {
  @container (max-width: 850px) {
    border-bottom: 1px solid rgb(var(--color-blue-rgb) / 0.5);
  }
  @container (min-width: 851px) {
    position: relative;
    padding: 0 clamp(calc(12px * var(--min-rate)), calc(12 * var(--vw-pc)), 12px);

    &::after {
      position: absolute;
      top: 50%;
      right: 0;
      content: "";
      width: 1px;
      height: clamp(calc(12px * var(--min-rate)), calc(12 * var(--vw-pc)), 12px);
      margin-top: -0.3em;
      background: rgb(var(--color-blue-rgb) / 0.5);
    }
  }
}

.p-nav_listItem_link {
  display: block;
  font-weight: 700;
  line-height: 1;
  @container (max-width: 850px) {
    position: relative;
    padding: clamp(calc(18px * var(--min-rate)), calc(18 * var(--vw-sp)), 18px) 0;
    padding-left: 17px;
    font-size: clamp(calc(16px * var(--min-rate)), calc(16 * var(--vw-sp)), 16px);

    &::before {
      position: absolute;
      top: 50%;
      left: 0;
      translate: 0 -50%;
      content: "";
      width: 12px;
      aspect-ratio: 12 / 14;
      background: url("../images/ico_diamond.svg") no-repeat center center / contain;
    }

    &::after {
      position: absolute;
      top: 50%;
      right: 0;
      translate: 0 -50%;
      content: "";
      width: 5px;
      aspect-ratio: 5 / 11;
      background: url("../images/ico_arrow_right.svg") no-repeat center center / contain;
    }
  }
  @container (min-width: 851px) {
    font-size: clamp(calc(14px * var(--min-rate)), calc(14 * var(--vw-pc)), 14px);
  }

  @media (any-hover: hover) {
    transition: color 0.3s ease-in-out;

    &:hover {
      color: var(--color-green);
    }
  }
}

/* insta links */
.p-instaLinks {
  z-index: 10;
  @container (max-width: 850px) {
    order: 1;
  }
  @container (min-width: 851px) {
    margin-left: clamp(calc(24px * var(--min-rate)), calc(24 * var(--vw-pc)), 24px);
  }
}

.p-instaLinks_btn {
  display: block;
  width: 22px;
  cursor: pointer;

  svg {
    fill: var(--color-blue);
    transition: fill 0.3s ease-in-out;
  }

  @media (any-hover: hover) {
    &:hover {
      svg {
        fill: var(--color-green);
      }
    }
  }
}


/* --------------------------------------------------------
  Section
  ------------------------------------------------------ */
.section_white,
.section_blue {
  position: relative;
  z-index: 2;
  @media (max-width: 767px) {
    padding-top: 10px;
    padding-bottom: 20px;
  }
  @media (min-width: 768px) {
    padding-top: 20px;
    padding-bottom: 20px;
  }

  &::before,
  &::after {
    position: absolute;
    left: 50%;
    translate: -50% 0;
    content: "";
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    @media (max-width: 767px) {
      height: 60px;
    }
    @media (min-width: 768px) {
      height: 100px;
    }
  }

  &::before {
    bottom: 100%;
    background-position: center top;
    /* margin-bottom: -1px; */
  }

  &::after {
    top: 100%;
    background-position: center bottom;
    /* margin-top: -1px; */
  }
}

.section_white {
  background: var(--color-bg);

  &::before {
    @media (max-width: 767px) {
      background-image: url("../images/bg_wave_white_top_sp.png.webp");
    }
    @media (min-width: 768px) {
      background-image: url("../images/bg_wave_white_top_pc.png.webp");
    }
  }
  &::after {
    @media (max-width: 767px) {
      background-image: url("../images/bg_wave_white_bottom_sp.png.webp");
    }
    @media (min-width: 768px) {
      background-image: url("../images/bg_wave_white_bottom_pc.png.webp");
    }
  }
}

.section_blue {
  background: var(--color-blue);

  &::before {
    @media (max-width: 767px) {
      background-image: url("../images/bg_wave_blue_top_sp.png.webp");
    }
    @media (min-width: 768px) {
      background-image: url("../images/bg_wave_blue_top_pc.png.webp");
    }
  }
  &::after {
    @media (max-width: 767px) {
      background-image: url("../images/bg_wave_blue_bottom_sp.png.webp");
    }
    @media (min-width: 768px) {
      background-image: url("../images/bg_wave_blue_bottom_pc.png.webp");
    }
  }
}

.section_title {
  display: flex;
  flex-direction: column;
  width: fit-content;
  margin: 0 auto;
  @media (max-width: 767px) {
    gap: clamp(calc(10px * var(--min-rate)), calc(10 * var(--vw-sp)), 10px);
  }
  @media (min-width: 768px) {
    gap: clamp(calc(10px * var(--min-rate)), calc(10 * var(--vw-pc)), 10px);
  }

  .ja {
    position: relative;
    letter-spacing: 0.06em;
    text-align: center;
    @media (max-width: 767px) {
      padding: 0 clamp(calc(43px * var(--min-rate)), calc(43 * var(--vw-sp)), 43px);
      line-height: 1.3;
    }
    @media (min-width: 768px) {
      padding: 0 clamp(calc(52px * var(--min-rate)), calc(52 * var(--vw-pc)), 52px);
      font-size: clamp(calc(34px * var(--min-rate)), calc(34 * var(--vw-pc)), 34px);
      line-height: 1;
    }

    &.no-space {
      @media (max-width: 767px) {
        padding-right: clamp(calc(23px * var(--min-rate)), calc(23 * var(--vw-sp)), 23px);
      }
      @media (min-width: 768px) {
        padding-right: clamp(calc(24px * var(--min-rate)), calc(24 * var(--vw-pc)), 24px);
      }
    }

    &::before,
    &::after {
      position: absolute;
      top: 50%;
      translate: 0 -50%;
      content: "";
      aspect-ratio: 32 / 36;
      background: url("../images/ico_diamond.svg") no-repeat center center / contain;

      @media (max-width: 767px) {
        width: clamp(calc(23px * var(--min-rate)), calc(23 * var(--vw-sp)), 23px);
      }
      @media (min-width: 768px) {
        width: clamp(calc(32px * var(--min-rate)), calc(32 * var(--vw-pc)), 32px);
      }
    }

    &::before { left: 0 }
    &::after { right: 0 }
  }

  .en {
    font-family: var(--font-outfit);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.05em;
    text-align: center;
    text-transform: uppercase;
    @media (max-width: 767px) {
      font-size: clamp(calc(14px * var(--min-rate)), calc(14 * var(--vw-sp)), 14px);
    }
    @media (min-width: 768px) {
      font-size: clamp(calc(16px * var(--min-rate)), calc(16 * var(--vw-pc)), 16px);
    }
  }

  .section_blue & {
    color: var(--color-white);
  }
}

.section_lead {
  text-align: center;
  @media (max-width: 767px) {
    margin-top: clamp(calc(30px * var(--min-rate)), calc(30 * var(--vw-sp)), 30px);
    font-size: clamp(calc(14px * var(--min-rate)), calc(14 * var(--vw-sp)), 14px);
    line-height: 1.6;
  }
  @media (min-width: 768px) {
    margin-top: clamp(calc(42px * var(--min-rate)), calc(42 * var(--vw-pc)), 42px);
    font-size: clamp(calc(16px * var(--min-rate)), calc(16 * var(--vw-pc)), 16px);
    line-height: 1.8;
  }

  .section_blue & {
    color: var(--color-white);
  }
}


/* --------------------------------------------------------
  KV
  ------------------------------------------------------ */
.p-kv {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  color: var(--color-white);
  @media (max-width: 767px) {
    height: 100svh;
  }
  @media (min-width: 768px) {
    height: 100vh;
  }

  &.is-show {
    .p-kv_lead,
    .p-kv_logo,
    .p-kv_note {
      translate: 0 0;
      opacity: 1;
    }
  }
}

.p-kv_top {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: 100%;
  text-align: center;
}

.p-kv_bottom {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  text-align: center;
  width: 100%;
  opacity: 0;
  visibility: hidden;

  &.is-hidden {
    visibility: hidden !important;
  }
}

.p-kv_lead {
  line-height: 1.4;
  letter-spacing: 0.06em;
  translate: 0 50px;
  opacity: 0;
  transition: translate 0.8s ease-out 0.2s, opacity 0.8s ease-out 0.2s;
  @media (max-width: 767px) {
    font-size: clamp(calc(20px * var(--min-rate)), calc(20 * var(--vw-sp)), 20px);
  }
  @media (min-width: 768px) {
    font-size: clamp(calc(30px * var(--min-rate)), calc(30 * var(--vw-pc)), 30px);
  }
}

.p-kv_logo {
  translate: 0 50px;
  opacity: 0;
  transition: translate 0.8s ease-out 0.4s, opacity 0.8s ease-out 0.4s;
  @media (max-width: 767px) {
    width: clamp(calc(317px * var(--min-rate)), calc(317 * var(--vw-sp)), 317px);
    margin-top: clamp(calc(22px * var(--min-rate)), calc(22 * var(--vw-sp)), 22px);
    margin-right: auto;
    margin-bottom: clamp(calc(20px * var(--min-rate)), calc(20 * var(--vw-sp)), 20px);
    margin-left: auto;
  }
  @media (min-width: 768px) {
    width: clamp(calc(831px * var(--min-rate)), calc(831 * var(--vw-pc)), 831px);
    margin-top: clamp(calc(40px * var(--min-rate)), calc(40 * var(--vw-pc)), 40px);
    margin-right: auto;
    margin-bottom: clamp(calc(30px * var(--min-rate)), calc(30 * var(--vw-pc)), 30px);
    margin-left: auto;
  }

  svg {
    fill: var(--color-white);
  }
}

.p-kv_note {
  font-family: var(--font-outfit);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.05em;
  translate: 0 50px;
  opacity: 0;
  transition: translate 0.8s ease-out 0.6s, opacity 0.8s ease-out 0.6s;
  @media (max-width: 767px) {
    font-size: clamp(calc(14px * var(--min-rate)), calc(14 * var(--vw-sp)), 14px);
  }
  @media (min-width: 768px) {
    font-size: clamp(calc(22px * var(--min-rate)), calc(22 * var(--vw-pc)), 22px);
  }

  img {
    display: inline-block;
    @media (max-width: 767px) {
      width: clamp(calc(119px * var(--min-rate)), calc(119 * var(--vw-sp)), 119px);
    }
    @media (min-width: 768px) {
      width: clamp(calc(164px * var(--min-rate)), calc(164 * var(--vw-pc)), 164px);
    }
  }
}

.p-kv_sub {
  line-height: 1;
  letter-spacing: 0.06em;
  @media (max-width: 767px) {
    margin-bottom: clamp(calc(28px * var(--min-rate)), calc(28 * var(--vw-sp)), 28px);
    font-size: clamp(calc(32px * var(--min-rate)), calc(32 * var(--vw-sp)), 32px);
  }
  @media (min-width: 768px) {
    margin-bottom: clamp(calc(38px * var(--min-rate)), calc(38 * var(--vw-pc)), 38px);
    font-size: clamp(calc(44px * var(--min-rate)), calc(44 * var(--vw-pc)), 44px);
  }
}

.p-kv_text {
  line-height: 1.8;
  @media (max-width: 767px) {
    font-size: clamp(calc(16px * var(--min-rate)), calc(16 * var(--vw-sp)), 16px);
  }
  @media (min-width: 768px) {
    font-size: clamp(calc(20px * var(--min-rate)), calc(20 * var(--vw-pc)), 20px);
  }

  & + & {
    @media (max-width: 767px) {
      margin-top: clamp(calc(12px * var(--min-rate)), calc(12 * var(--vw-sp)), 12px);
    }
    @media (min-width: 768px) {
      margin-top: clamp(calc(18px * var(--min-rate)), calc(18 * var(--vw-pc)), 18px);
    }
  }
}

.p-kv_left,
.p-kv_right {
  @media (min-width: 768px) {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    rotate: 90deg;
    font-family: var(--font-outfit);
    font-weight: 600;
    font-size: clamp(calc(14px * var(--min-rate)), calc(14 * var(--vw-pc)), 14px);
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
  }
}

.p-kv_left {
  @media (min-width: 768px) {
    left: -5.5em;
  }
}
.p-kv_right {
  @media (min-width: 768px) {
    right: -3em;
  }
}


/* --------------------------------------------------------
  ABOUT
  ------------------------------------------------------ */
.p-about {
  @media (max-width: 767px) {
    margin-bottom: 160px;
  }
  @media (min-width: 768px) {
    margin-bottom: 270px;
  }
}

.p-about_inner {
  margin: 0 auto;
  @media (max-width: 767px) {
    margin-top: clamp(calc(30px * var(--min-rate)), calc(30 * var(--vw-sp)), 30px);
  }
  @media (min-width: 768px) {
    display: flex;
    gap: clamp(calc(64px * var(--min-rate)), calc(64 * var(--vw-pc)), 64px);
    width: clamp(calc(1100px * var(--min-rate)), calc(1100 * var(--vw-pc)), 1100px);
    max-width: calc(100% - 40px);
    margin-top: clamp(calc(75px * var(--min-rate)), calc(75 * var(--vw-pc)), 75px);
  }
}

.p-about_img {
  @media (max-width: 767px) {
    width: 100%;
    margin-bottom: clamp(calc(40px * var(--min-rate)), calc(40 * var(--vw-sp)), 40px);
  }
  @media (min-width: 768px) {
    flex-shrink: 0;
    width: clamp(calc(526px * var(--min-rate)), calc(526 * var(--vw-pc)), 526px);
  }
}

.p-about_textarea {
  @media (max-width: 767px) {
    margin: 0 clamp(calc(25px * var(--min-rate)), calc(25 * var(--vw-sp)), 25px);
  }
  @media (min-width: 768px) {
    flex-grow: 1;
  }
}

.p-about_subtitle {
  line-height: 1.5;
  letter-spacing: 0.06em;
  @media (max-width: 767px) {
    margin-bottom: clamp(calc(16px * var(--min-rate)), calc(16 * var(--vw-sp)), 16px);
    font-size: clamp(calc(24px * var(--min-rate)), calc(24 * var(--vw-sp)), 24px);
  }
  @media (min-width: 768px) {
    margin-bottom: clamp(calc(28px * var(--min-rate)), calc(28 * var(--vw-pc)), 28px);
    font-size: clamp(calc(26px * var(--min-rate)), calc(26 * var(--vw-pc)), 26px);
  }
}

.p-about_text {
  line-height: 1.8;
  @media (max-width: 767px) {
    font-size: clamp(calc(14px * var(--min-rate)), calc(14 * var(--vw-sp)), 14px);
  }
  @media (min-width: 768px) {
    font-size: clamp(calc(16px * var(--min-rate)), calc(16 * var(--vw-pc)), 16px);
  }

  & + & {
    @media (max-width: 767px) {
      margin-top: clamp(calc(10px * var(--min-rate)), calc(10 * var(--vw-sp)), 10px);
    }
    @media (min-width: 768px) {
      margin-top: clamp(calc(18px * var(--min-rate)), calc(18 * var(--vw-pc)), 18px);
    }
  }
}


/* --------------------------------------------------------
  WORK ON & HOW TO
  ------------------------------------------------------ */
.p-workon,
.p-howto {
  @media (max-width: 767px) {
    margin-bottom: 160px;
    scroll-margin-top: 80px;
  }
  @media (min-width: 768px) {
    margin-bottom: 270px;
    scroll-margin-top: 120px;
  }

  .section_lead img {
    display: inline-block;
    vertical-align: text-bottom;
    @media (max-width: 767px) {
      width: clamp(calc(138px * var(--min-rate)), calc(138 * var(--vw-sp)), 138px);
    }
    @media (min-width: 768px) {
      width: clamp(calc(151px * var(--min-rate)), calc(151 * var(--vw-pc)), 151px);
    }
  }
}

.p-workon_list,
.p-howto_list {
  display: grid;
  margin: 0 auto;
  @media (max-width: 767px) {
    grid-template-rows: repeat(3, auto);
    gap: clamp(calc(30px * var(--min-rate)), calc(30 * var(--vw-sp)), 30px);
    width: clamp(calc(325px * var(--min-rate)), calc(325 * var(--vw-sp)), 325px);
    margin-top: clamp(calc(40px * var(--min-rate)), calc(40 * var(--vw-sp)), 40px);
  }
  @media (min-width: 768px) {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(calc(31px * var(--min-rate)), calc(31 * var(--vw-pc)), 31px);
    width: clamp(calc(1160px * var(--min-rate)), calc(1160 * var(--vw-pc)), 1160px);
    max-width: calc(100% - 40px);
    margin-top: clamp(calc(70px * var(--min-rate)), calc(70 * var(--vw-pc)), 70px);
  }
}

.p-workon_list_item,
.p-howto_list_item {
  position: relative;
  @media (min-width: 768px) {
    display: flex;
    flex-direction: column;
  }

  &::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-image: url("../images/bg_mesh_white.png.webp");
    background-repeat: repeat;
    background-position: center center;
    background-size: 8.5px 8.5px;
    z-index: -1;
    @media (max-width: 767px) {
      bottom: clamp(calc(-8px * var(--min-rate)), calc(-8 * var(--vw-sp)), -8px);
      right: clamp(calc(-8px * var(--min-rate)), calc(-8 * var(--vw-sp)), -8px);
      border-radius: clamp(calc(50px * var(--min-rate)), calc(50 * var(--vw-sp)), 50px);
    }
    @media (min-width: 768px) {
      bottom: clamp(calc(-9px * var(--min-rate)), calc(-9 * var(--vw-pc)), -9px);
      right: clamp(calc(-9px * var(--min-rate)), calc(-9 * var(--vw-pc)), -9px);
      border-radius: clamp(calc(60px * var(--min-rate)), calc(60 * var(--vw-pc)), 60px);
    }
  }
}

.p-workon_badge,
.p-howto_badge {
  position: absolute;
  display: grid;
  place-content: center;
  aspect-ratio: 1 / 1;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  font-family: var(--font-outfit);
  @media (max-width: 767px) {
    top: clamp(calc(-15px * var(--min-rate)), calc(-15 * var(--vw-sp)), -15px);
    width: clamp(calc(81px * var(--min-rate)), calc(81 * var(--vw-sp)), 81px);
    padding-top: clamp(calc(5px * var(--min-rate)), calc(5 * var(--vw-sp)), 5px);
  }
  @media (min-width: 768px) {
    top: clamp(calc(-25px * var(--min-rate)), calc(-25 * var(--vw-pc)), -25px);
    width: clamp(calc(90px * var(--min-rate)), calc(90 * var(--vw-pc)), 90px);
    padding-top: clamp(calc(6px * var(--min-rate)), calc(6 * var(--vw-pc)), 6px);
  }

  .en {
    font-weight: 700;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    @media (max-width: 767px) {
      font-size: clamp(calc(9px * var(--min-rate)), calc(9 * var(--vw-sp)), 9px);
    }
    @media (min-width: 768px) {
      font-size: clamp(calc(10px * var(--min-rate)), calc(10 * var(--vw-pc)), 10px);
    }
  }

  .num {
    font-weight: 500;
    line-height: 1;
    text-align: center;
    @media (max-width: 767px) {
      font-size: clamp(calc(36px * var(--min-rate)), calc(36 * var(--vw-sp)), 36px);
    }
    @media (min-width: 768px) {
      font-size: clamp(calc(40px * var(--min-rate)), calc(40 * var(--vw-pc)), 40px);
    }
  }
}

.p-workon_badge {
  background-image: url("../images/bg_workon_num.png.webp");
  @media (max-width: 767px) {
    left: clamp(calc(-15px * var(--min-rate)), calc(-15 * var(--vw-sp)), -15px);
  }
  @media (min-width: 768px) {
    left: clamp(calc(-17px * var(--min-rate)), calc(-17 * var(--vw-pc)), -17px);
  }
}

.p-howto_badge {
  background-image: url("../images/bg_howto_num.png.webp");
  @media (max-width: 767px) {
    right: clamp(calc(-15px * var(--min-rate)), calc(-15 * var(--vw-sp)), -15px);
  }
  @media (min-width: 768px) {
    right: clamp(calc(-17px * var(--min-rate)), calc(-17 * var(--vw-pc)), -17px);
  }
}

.p-workon_image {
  display: grid;
  place-content: center;
  background: var(--color-green);
  overflow: hidden;
  @media (max-width: 767px) {
    aspect-ratio: 325 / 195;
    border-radius: clamp(calc(50px * var(--min-rate)), calc(50 * var(--vw-sp)), 50px) clamp(calc(50px * var(--min-rate)), calc(50 * var(--vw-sp)), 50px) 0 0;
  }
  @media (min-width: 768px) {
    flex-shrink: 0;
    aspect-ratio: 366 / 220;
    border-radius: clamp(calc(60px * var(--min-rate)), calc(60 * var(--vw-pc)), 60px) clamp(calc(60px * var(--min-rate)), calc(60 * var(--vw-pc)), 60px) 0 0;
  }

  img {
    @media (max-width: 767px) {
      width: clamp(calc(264px * var(--min-rate)), calc(264 * var(--vw-sp)), 264px);
    }
    @media (min-width: 768px) {
      width: clamp(calc(294px * var(--min-rate)), calc(294 * var(--vw-pc)), 294px);
    }
  }
}

.p-howto_image {
  overflow: hidden;
  @media (max-width: 767px) {
    aspect-ratio: 325 / 248;
    border-radius: clamp(calc(50px * var(--min-rate)), calc(50 * var(--vw-sp)), 50px) clamp(calc(50px * var(--min-rate)), calc(50 * var(--vw-sp)), 50px) 0 0;
  }
  @media (min-width: 768px) {
    flex-shrink: 0;
    aspect-ratio: 366 / 280;
    border-radius: clamp(calc(60px * var(--min-rate)), calc(60 * var(--vw-pc)), 60px) clamp(calc(60px * var(--min-rate)), calc(60 * var(--vw-pc)), 60px) 0 0;
  }

  img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}

.p-workon_textarea,
.p-howto_textarea {
  background: var(--color-white);
  overflow: hidden;
  @media (max-width: 767px) {
    padding: clamp(calc(20px * var(--min-rate)), calc(20 * var(--vw-sp)), 20px) clamp(calc(25px * var(--min-rate)), calc(25 * var(--vw-sp)), 25px);
    border-radius: 0 0 clamp(calc(50px * var(--min-rate)), calc(50 * var(--vw-sp)), 50px) clamp(calc(50px * var(--min-rate)), calc(50 * var(--vw-sp)), 50px);
  }
  @media (min-width: 768px) {
    flex-grow: 1;
    padding: clamp(calc(20px * var(--min-rate)), calc(20 * var(--vw-pc)), 20px) clamp(calc(30px * var(--min-rate)), calc(30 * var(--vw-pc)), 30px);
    border-radius: 0 0 clamp(calc(60px * var(--min-rate)), calc(60 * var(--vw-pc)), 60px) clamp(calc(60px * var(--min-rate)), calc(60 * var(--vw-pc)), 60px);
  }
}

.p-workon_textarea {
  width: 100%;
  @media (max-width: 767px) {
    min-height: clamp(calc(148px * var(--min-rate)), calc(148 * var(--vw-sp)), 148px);
  }
  @media (min-width: 768px) {
    min-height: clamp(calc(190px * var(--min-rate)), calc(190 * var(--vw-pc)), 190px);
  }
}

.p-howto_textarea {
  @media (max-width: 767px) {
    padding-bottom: clamp(calc(35px * var(--min-rate)), calc(35 * var(--vw-sp)), 35px);
  }
  @media (min-width: 768px) {
    min-height: clamp(calc(270px * var(--min-rate)), calc(270 * var(--vw-pc)), 270px);
  }
}

.p-workon_head,
.p-howto_head {
  line-height: 1.5;
  letter-spacing: 0.06em;
  @media (max-width: 767px) {
    margin-bottom: clamp(calc(8px * var(--min-rate)), calc(8 * var(--vw-sp)), 8px);
    font-size: clamp(calc(24px * var(--min-rate)), calc(24 * var(--vw-sp)), 24px);
  }
  @media (min-width: 768px) {
    margin-bottom: clamp(calc(8px * var(--min-rate)), calc(8 * var(--vw-pc)), 8px);
    font-size: clamp(calc(26px * var(--min-rate)), calc(26 * var(--vw-pc)), 26px);
  }
}

.p-howto_head {
  position: relative;
  @media (max-width: 767px) {
    padding-left: clamp(calc(26px * var(--min-rate)), calc(26 * var(--vw-sp)), 26px);
  }
  @media (min-width: 768px) {
    padding-left: clamp(calc(26px * var(--min-rate)), calc(26 * var(--vw-pc)), 26px);
  }

  &::before {
    position: absolute;
    top: 50%;
    left: 0;
    translate: 0 -50%;
    content: "";
    aspect-ratio: 18 / 23;
    background: url("../images/ico_map.svg") no-repeat center center / contain;
    @media (max-width: 767px) {
      width: clamp(calc(18px * var(--min-rate)), calc(18 * var(--vw-sp)), 18px);
    }
    @media (min-width: 768px) {
      width: clamp(calc(18px * var(--min-rate)), calc(18 * var(--vw-pc)), 18px);
    }
  }
}

.p-workon_text,
.p-howto_text {
  line-height: 1.6;
  @media (max-width: 767px) {
    font-size: clamp(calc(14px * var(--min-rate)), calc(14 * var(--vw-sp)), 14px);
  }
  @media (min-width: 768px) {
    font-size: clamp(calc(16px * var(--min-rate)), calc(16 * var(--vw-pc)), 16px);
  }
}

.p-howto_link {
  display: flex;
  align-items: center;
  width: fit-content;
  border-radius: 100vmax;
  border: 2px solid var(--color-blue);
  background: var(--color-green);
  line-height: 1;
  @media (max-width: 767px) {
    gap: clamp(calc(10px * var(--min-rate)), calc(10 * var(--vw-sp)), 10px);
    height: clamp(calc(43px * var(--min-rate)), calc(43 * var(--vw-sp)), 43px);
    margin-top: clamp(calc(16px * var(--min-rate)), calc(16 * var(--vw-sp)), 16px);
    padding: 0 clamp(calc(18px * var(--min-rate)), calc(18 * var(--vw-sp)), 18px);
    font-size: clamp(calc(14px * var(--min-rate)), calc(14 * var(--vw-sp)), 14px);
  }
  @media (min-width: 768px) {
    gap: clamp(calc(10px * var(--min-rate)), calc(10 * var(--vw-pc)), 10px);
    height: clamp(calc(43px * var(--min-rate)), calc(43 * var(--vw-pc)), 43px);
    margin-top: clamp(calc(20px * var(--min-rate)), calc(20 * var(--vw-pc)), 20px);
    padding: 0 clamp(calc(18px * var(--min-rate)), calc(18 * var(--vw-pc)), 18px);
    font-size: clamp(calc(14px * var(--min-rate)), calc(14 * var(--vw-pc)), 14px);
  }

  &:has(img) {
    @media (max-width: 767px) {
      padding-right: clamp(calc(18px * var(--min-rate)), calc(18 * var(--vw-sp)), 18px);
      padding-left: clamp(calc(14px * var(--min-rate)), calc(14 * var(--vw-sp)), 14px);
    }
    @media (min-width: 768px) {
      padding-right: clamp(calc(18px * var(--min-rate)), calc(18 * var(--vw-pc)), 18px);
      padding-left: clamp(calc(14px * var(--min-rate)), calc(14 * var(--vw-pc)), 14px);
    }
  }

  img {
    @media (max-width: 767px) {
      width: clamp(calc(125px * var(--min-rate)), calc(125 * var(--vw-sp)), 125px);
    }
    @media (min-width: 768px) {
      width: clamp(calc(125px * var(--min-rate)), calc(125 * var(--vw-pc)), 125px);
    }
  }

  .icon {
    aspect-ratio: 1 / 1;
    margin-top: 2px;
    mask-image: url("../images/ico_arrow.svg");
    background: var(--color-blue);
    @media (max-width: 767px) {
      width: clamp(calc(12px * var(--min-rate)), calc(12 * var(--vw-sp)), 12px);
    }
    @media (min-width: 768px) {
      width: clamp(calc(12px * var(--min-rate)), calc(12 * var(--vw-pc)), 12px);
    }
  }

  & + & {
    @media (max-width: 767px) {
      margin-top: clamp(calc(10px * var(--min-rate)), calc(10 * var(--vw-sp)), 10px);
    }
    @media (min-width: 768px) {
      margin-top: clamp(calc(10px * var(--min-rate)), calc(10 * var(--vw-pc)), 10px);
    }
  }

  @media (any-hover: hover) {
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;

    .icon {
      transition: background-color 0.3s ease-in-out;
    }

    &:hover {
      background: rgb(var(--color-green-rgb) / 0.3);
      color: var(--color-green);

      .icon {
        /* background: var(--color-green); */
      }
    }
  }
}


/* --------------------------------------------------------
  PRODUCT
  ------------------------------------------------------ */
.p-product {
  @media (max-width: 767px) {
    margin-bottom: 160px;
    scroll-margin-top: 80px;
  }
  @media (min-width: 768px) {
    margin-bottom: 270px;
    scroll-margin-top: 120px;
  }
}

.p-product_inner {
  position: relative;
  margin: 0 auto;
  @media (max-width: 767px) {
    width: fit-content;
    margin-top: clamp(calc(40px * var(--min-rate)), calc(40 * var(--vw-sp)), 40px);
  }
  @media (min-width: 768px) {
    width: 100%;
    margin-top: clamp(calc(4px * var(--min-rate)), calc(4 * var(--vw-pc)), 4px);
    padding-top: clamp(calc(56px * var(--min-rate)), calc(56 * var(--vw-pc)), 56px);
    overflow-x: hidden;
  }
}

.p-product_swiper {
  @media (max-width: 767px) {
    margin-left: clamp(calc(6px * var(--min-rate)), calc(6 * var(--vw-sp)), 6px);
  }
  @media (min-width: 768px) {
    padding-right: clamp(calc(205px * var(--min-rate)), calc(205 * var(--vw-pc)), 205px);
    padding-left: clamp(calc(205px * var(--min-rate)), calc(205 * var(--vw-pc)), 205px);
  }
}

.p-product_swiper_wrapper {
  @media (max-width: 767px) {
    display: grid;
    grid-template-columns: repeat(2, clamp(calc(176px * var(--min-rate)), calc(176 * var(--vw-sp)), 176px));
    gap: clamp(calc(15px * var(--min-rate)), calc(15 * var(--vw-sp)), 15px) clamp(calc(10px * var(--min-rate)), calc(10 * var(--vw-sp)), 10px);
  }
}

.p-product_card {
  @media (max-width: 767px) {
    padding-right: clamp(calc(6px * var(--min-rate)), calc(6 * var(--vw-sp)), 6px);

    &.is-hidden {
      display: none;
    }
  }
}

.p-product_card_image_wrapper {
  position: relative;
  @media (max-width: 767px) {
    margin-bottom: clamp(calc(10px * var(--min-rate)), calc(10 * var(--vw-sp)), 10px);
  }
  @media (min-width: 768px) {
    margin-bottom: clamp(calc(14px * var(--min-rate)), calc(14 * var(--vw-pc)), 14px);
  }

  &::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background: url("../images/bg_mesh_blue.png.webp") repeat center center / 8.5px 8.5px;
    z-index: -1;
    @media (max-width: 767px) {
      bottom: clamp(calc(-6px * var(--min-rate)), calc(-6 * var(--vw-sp)), -6px);
      right: clamp(calc(-6px * var(--min-rate)), calc(-6 * var(--vw-sp)), -6px);
    }
    @media (min-width: 768px) {
      bottom: clamp(calc(-9px * var(--min-rate)), calc(-9 * var(--vw-pc)), -9px);
      right: clamp(calc(-9px * var(--min-rate)), calc(-9 * var(--vw-pc)), -9px);
    }
  }

  .image {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 100%;
    overflow: hidden;

    img {
      object-fit: cover;
      width: 100%;
      height: 100%;
    }

    @media (any-hover: hover) {
      cursor: pointer;

      + .icon {
        transition: background-color 0.3s ease-in-out;
        &::before, &::after {
          transition: background-color 0.3s ease-in-out;
        }
      }

      &:hover {
        + .icon {
          background: var(--color-blue);

          &::before, &::after {
            background: var(--color-green);
          }
        }
      }
    }
  }

  .label {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    display: grid;
    place-content: center;
    aspect-ratio: 1 / 1;
    background: url("../images/bg_label.svg") no-repeat center center / contain;
    line-height: 1.2;
    text-align: center;
    @media (max-width: 767px) {
      width: clamp(calc(70px * var(--min-rate)), calc(70 * var(--vw-sp)), 70px);
      font-size: clamp(calc(13px * var(--min-rate)), calc(13 * var(--vw-sp)), 13px);
    }
    @media (min-width: 768px) {
      width: clamp(calc(100px * var(--min-rate)), calc(100 * var(--vw-pc)), 100px);
      font-size: clamp(calc(18px * var(--min-rate)), calc(18 * var(--vw-pc)), 18px);
    }
  }

  @media (any-hover: hover) {
    .icon:hover {
      cursor: pointer;
      background: var(--color-blue);

      &::before, &::after {
        background: var(--color-green);
      }
    }
  }

  .icon {
    position: absolute;
    display: block;
    aspect-ratio: 1 / 1;
    border-radius: 100%;
    border: 2px solid var(--color-blue);
    background: var(--color-green);
    @media (max-width: 767px) {
      bottom: clamp(calc(4px * var(--min-rate)), calc(4 * var(--vw-sp)), 4px);
      right: clamp(calc(4px * var(--min-rate)), calc(4 * var(--vw-sp)), 4px);
      width: clamp(calc(38px * var(--min-rate)), calc(38 * var(--vw-sp)), 38px);
    }
    @media (min-width: 768px) {
      bottom: min(calc(24 * var(--vw-pc)), 24px);
      right: min(calc(24 * var(--vw-pc)), 24px);
      width: clamp(calc(46px * var(--min-rate)), calc(46 * var(--vw-pc)), 46px);
    }

    &::before, &::after {
      position: absolute;
      top: 50%;
      left: 50%;
      translate: -50% -50% ;
      content: "";
      height: 2px;
      background: var(--color-blue);
      pointer-events: none;

      @media (max-width: 767px) {
        width: clamp(calc(16px * var(--min-rate)), calc(16 * var(--vw-sp)), 16px);
      }
      @media (min-width: 768px) {
        width: clamp(calc(18px * var(--min-rate)), calc(18 * var(--vw-pc)), 18px);
      }
    }

    &::after {
      rotate: 90deg;
    }

    @media (any-hover: hover) {
      cursor: pointer;
      transition: background-color 0.3s ease-in-out;
      &::before, &::after {
        transition: background-color 0.3s ease-in-out;
      }

      &:hover {
        background: var(--color-blue);

        &::before, &::after {
          background: var(--color-green);
        }
      }
    }
  }
}

.p-product_card_title_ja {
  letter-spacing: 0.06em;
  text-align: center;
  @media (max-width: 767px) {
    margin-bottom: clamp(calc(3px * var(--min-rate)), calc(3 * var(--vw-sp)), 3px);
    font-size: clamp(calc(18px * var(--min-rate)), calc(18 * var(--vw-sp)), 18px);
    line-height: 1.2;
  }
  @media (min-width: 768px) {
    margin-bottom: clamp(calc(6px * var(--min-rate)), calc(6 * var(--vw-pc)), 6px);
    font-size: clamp(calc(26px * var(--min-rate)), calc(26 * var(--vw-pc)), 26px);
    line-height: 1.5;
  }
}

.p-product_card_title_en {
  font-family: var(--font-outfit);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: center;
  text-transform: uppercase;
  @media (max-width: 767px) {
    font-size: clamp(calc(10px * var(--min-rate)), calc(10 * var(--vw-sp)), 10px);
  }
  @media (min-width: 768px) {
    font-size: clamp(calc(14px * var(--min-rate)), calc(14 * var(--vw-pc)), 14px);
  }
}

.p-product_control {
  @media (min-width: 768px) {
    position: absolute;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    top: 0;
    left: 50%;
    translate: -50% 0;
    gap: clamp(calc(20px * var(--min-rate)), calc(20 * var(--vw-pc)), 20px);
    width: clamp(calc(1170px * var(--min-rate)), calc(1170 * var(--vw-pc)), 1170px);
    max-width: calc(100% - 40px);
    aspect-ratio: 1170 / 16;
    margin: 0 auto;
  }
}

.p-product_pagination {
  @media (min-width: 768px) {
    width: fit-content;
    font-family: var(--font-outfit);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.05em;
    white-space: nowrap;
    font-size: clamp(calc(16px * var(--min-rate)), calc(16 * var(--vw-pc)), 16px);
  }
}

.p-product_prev,
.p-product_next {
  @media (min-width: 768px) {
    position: relative;
    width: 16px;
    height: 16px;

    &::after {
      position: absolute;
      top: 50%;
      left: 50%;
      translate: -50% -50%;
      content: "";
      width: clamp(calc(12px * var(--min-rate)), calc(12 * var(--vw-pc)), 12px);
      height: clamp(calc(12px * var(--min-rate)), calc(12 * var(--vw-pc)), 12px);
      border-top: 2px solid var(--color-blue);
      border-right: 2px solid var(--color-blue);
    }
  }
}

.p-product_prev::after { rotate: -135deg; }
.p-product_next::after { rotate: 45deg; }

.p-product_more {
  @media (max-width: 767px) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(calc(10px * var(--min-rate)), calc(10 * var(--vw-sp)), 10px);
    width: clamp(calc(127px * var(--min-rate)), calc(127 * var(--vw-sp)), 127px);
    aspect-ratio: 127 / 38;
    margin: clamp(calc(30px * var(--min-rate)), calc(30 * var(--vw-sp)), 30px) auto 0;
    border-radius: 100vmax;
    border: 2px solid var(--color-blue);
    background: var(--color-green);
    font-size: clamp(calc(14px * var(--min-rate)), calc(14 * var(--vw-sp)), 14px);
    line-height: 1;

    .icon {
      position: relative;
      width: clamp(calc(11px * var(--min-rate)), calc(11 * var(--vw-sp)), 11px);

      &::after {
        position: absolute;
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        content: "";
        width: clamp(calc(8px * var(--min-rate)), calc(8 * var(--vw-sp)), 8px);
        height: clamp(calc(8px * var(--min-rate)), calc(8 * var(--vw-sp)), 8px);
        border-right: 2px solid var(--color-blue);
        border-bottom: 2px solid var(--color-blue);
        rotate: 45deg;
      }
    }

    &.is-hidden {
      display: none;
    }
  }
}


/* --------------------------------------------------------
  SNS
  ------------------------------------------------------ */
.p-sns {
  @media (max-width: 767px) {
    margin-bottom: 160px;
    scroll-margin-top: 80px;
  }
  @media (min-width: 768px) {
    margin-bottom: 270px;
    scroll-margin-top: 120px;
  }
}

.p-sns_inner {
  margin: 0 auto;
  @media (max-width: 767px) {
    width: clamp(calc(335px * var(--min-rate)), calc(335 * var(--vw-sp)), 335px);
    margin-top: clamp(calc(40px * var(--min-rate)), calc(40 * var(--vw-sp)), 40px);
  }
  @media (min-width: 768px) {
    width: clamp(calc(1160px * var(--min-rate)), calc(1160 * var(--vw-pc)), 1160px);
    max-width: calc(100% - 80px);
    margin-top: clamp(calc(60px * var(--min-rate)), calc(60 * var(--vw-pc)), 60px);
  }

  #sb_instagram {
    padding-bottom: 0 !important;
  }
  #sbi_images {
    padding: 0 !important;
  }
  #sb_instagram .sbi_type_video .sbi_playbtn {
    left: 0 !important;
    margin-left: 0 !important;
  }
}

.p-sns_link {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 216 / 43;
  margin: 0 auto;
  border-radius: 100vmax;
  border: 2px solid var(--color-blue);
  background: var(--color-green);
  line-height: 1;
  letter-spacing: 0.05em;
  @media (max-width: 767px) {
    width: clamp(calc(216px * var(--min-rate)), calc(216 * var(--vw-sp)), 216px);
    margin-top: clamp(calc(30px * var(--min-rate)), calc(30 * var(--vw-sp)), 30px);
    font-size: clamp(calc(18px * var(--min-rate)), calc(18 * var(--vw-sp)), 18px);
  }
  @media (min-width: 768px) {
    width: clamp(calc(216px * var(--min-rate)), calc(216 * var(--vw-pc)), 216px);
    margin-top: clamp(calc(45px * var(--min-rate)), calc(45 * var(--vw-pc)), 45px);
    font-size: clamp(calc(18px * var(--min-rate)), calc(18 * var(--vw-pc)), 18px);
  }

  .icon_insta {
    aspect-ratio: 1 / 1;
    mask-image: url("../images/ico_instagram.svg");
    background: var(--color-blue);
    @media (max-width: 767px) {
      width: clamp(calc(20px * var(--min-rate)), calc(20 * var(--vw-sp)), 20px);
      margin-right: clamp(calc(6px * var(--min-rate)), calc(6 * var(--vw-sp)), 6px);
    }
    @media (min-width: 768px) {
      width: clamp(calc(20px * var(--min-rate)), calc(20 * var(--vw-pc)), 20px);
      margin-right: clamp(calc(6px * var(--min-rate)), calc(6 * var(--vw-pc)), 6px);
    }
  }

  .icon_arrow {
    aspect-ratio: 1 / 1;
    mask-image: url("../images/ico_arrow.svg");
    background: var(--color-blue);
    @media (max-width: 767px) {
      width: clamp(calc(12px * var(--min-rate)), calc(12 * var(--vw-sp)), 12px);
      margin-left: clamp(calc(10px * var(--min-rate)), calc(10 * var(--vw-sp)), 10px);
    }
    @media (min-width: 768px) {
      width: clamp(calc(12px * var(--min-rate)), calc(12 * var(--vw-pc)), 12px);
      margin-left: clamp(calc(10px * var(--min-rate)), calc(10 * var(--vw-pc)), 10px);
    }
  }

  @media (any-hover: hover) {
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
    .icon_insta,
    .icon_arrow {
      transition: background-color 0.3s ease-in-out;
    }

    &:hover {
      background-color: var(--color-blue);
      color: var(--color-green);

      .icon_insta,
      .icon_arrow {
        background: var(--color-green);
      }
    }
  }
}


/* --------------------------------------------------------
  NEWS
  ------------------------------------------------------ */
.p-news {
  @media (max-width: 767px) {
    margin-bottom: 160px;
    scroll-margin-top: 80px;
  }
  @media (min-width: 768px) {
    margin-bottom: 270px;
    scroll-margin-top: 120px;
  }
}

.p-news_inner {
  position: relative;
  width: 100%;
  margin: 0 auto;
  overflow-x: hidden;
  @media (max-width: 767px) {
    margin-top: clamp(calc(25px * var(--min-rate)), calc(25 * var(--vw-pc)), 25px);
  }
  @media (min-width: 768px) {
    margin-top: clamp(calc(-11px * var(--min-rate)), calc(-11 * var(--vw-pc)), -11px);
    padding-top: clamp(calc(56px * var(--min-rate)), calc(56 * var(--vw-pc)), 56px);
  }
}

.p-news_swiper {
  @media (max-width: 767px) {
    padding-top: clamp(calc(15px * var(--min-rate)), calc(15 * var(--vw-sp)), 15px);
    padding-bottom: clamp(calc(8px * var(--min-rate)), calc(8 * var(--vw-sp)), 8px);
  }
  @media (min-width: 768px) {
    padding-top: clamp(calc(15px * var(--min-rate)), calc(15 * var(--vw-pc)), 15px);
    padding-bottom: clamp(calc(9px * var(--min-rate)), calc(9 * var(--vw-pc)), 9px);
  }
}

.p-news_swiper_wrapper {
  align-items: stretch;
}

.p-news_card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: auto;
  background: var(--color-white);
  @media (max-width: 767px) {
    padding: clamp(calc(20px * var(--min-rate)), calc(20 * var(--vw-sp)), 20px);
    border-radius: clamp(calc(40px * var(--min-rate)), calc(40 * var(--vw-sp)), 40px);
  }
  @media (min-width: 768px) {
    padding: clamp(calc(20px * var(--min-rate)), calc(20 * var(--vw-pc)), 20px);
    border-radius: clamp(calc(40px * var(--min-rate)), calc(40 * var(--vw-pc)), 40px);
  }

  &::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: url("../images/bg_mesh_white.png.webp") repeat center center / 8.5px 8.5px;
    z-index: -1;
    @media (max-width: 767px) {
      bottom: clamp(calc(-8px * var(--min-rate)), calc(-8 * var(--vw-pc)), -8px);
      right: clamp(calc(-8px * var(--min-rate)), calc(-8 * var(--vw-pc)), -8px);
      border-radius: clamp(calc(40px * var(--min-rate)), calc(40 * var(--vw-sp)), 40px);
    }
    @media (min-width: 768px) {
      bottom: clamp(calc(-9px * var(--min-rate)), calc(-9 * var(--vw-pc)), -9px);
      right: clamp(calc(-9px * var(--min-rate)), calc(-9 * var(--vw-pc)), -9px);
      border-radius: clamp(calc(40px * var(--min-rate)), calc(40 * var(--vw-pc)), 40px);
    }
  }

  @media (any-hover: hover) {
    cursor: pointer;

    .p-product_card_image_wrapper .icon {
      transition: background-color 0.3s ease-in-out;
      &::before, &::after {
        transition: background-color 0.3s ease-in-out;
      }
    }

    &:hover {
      .p-product_card_image_wrapper .icon {
        background: var(--color-blue);

        &::before, &::after {
          background: var(--color-green);
        }
      }
    }
  }
}

.p-news_info {
  flex: 1;
}

.p-news_badge {
  position: absolute;
  display: grid;
  place-content: center;
  aspect-ratio: 1 / 1;
  background: url("../images/bg_hot.png.webp") no-repeat center center / contain;
  font-family: var(--font-outfit);
  font-weight: 700;
  line-height: 1;
  @media (max-width: 767px) {
    top: clamp(calc(-15px * var(--min-rate)), calc(-15 * var(--vw-sp)), -15px);
    right: clamp(calc(-10px * var(--min-rate)), calc(-10 * var(--vw-sp)), -10px);
    width: clamp(calc(58px * var(--min-rate)), calc(58 * var(--vw-sp)), 58px);
    font-size: clamp(calc(14px * var(--min-rate)), calc(14 * var(--vw-sp)), 14px);
  }
  @media (min-width: 768px) {
    top: clamp(calc(-15px * var(--min-rate)), calc(-15 * var(--vw-pc)), -15px);
    right: clamp(calc(-10px * var(--min-rate)), calc(-10 * var(--vw-pc)), -10px);
    width: clamp(calc(58px * var(--min-rate)), calc(58 * var(--vw-pc)), 58px);
    font-size: clamp(calc(14px * var(--min-rate)), calc(14 * var(--vw-pc)), 14px);
  }
}

.p-news_image_wrapper {
  overflow: hidden;
  @media (max-width: 767px) {
    aspect-ratio: 247 / 180;
    margin-bottom: clamp(calc(20px * var(--min-rate)), calc(20 * var(--vw-sp)), 20px);
    border-radius: clamp(calc(25px * var(--min-rate)), calc(25 * var(--vw-sp)), 25px);
  }
  @media (min-width: 768px) {
    aspect-ratio: 247 / 180;
    margin-bottom: clamp(calc(20px * var(--min-rate)), calc(20 * var(--vw-pc)), 20px);
    border-radius: clamp(calc(25px * var(--min-rate)), calc(25 * var(--vw-pc)), 25px);
  }

  img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}

.p-news_card_text {
  line-height: 1.6;
  text-align: justify;
  text-justify: inter-character;
  @media (max-width: 767px) {
    margin-bottom: clamp(calc(10px * var(--min-rate)), calc(10 * var(--vw-sp)), 10px);
    font-size: clamp(calc(14px * var(--min-rate)), calc(14 * var(--vw-sp)), 14px);
  }
  @media (min-width: 768px) {
    margin-bottom: clamp(calc(10px * var(--min-rate)), calc(10 * var(--vw-pc)), 10px);
    font-size: clamp(calc(14px * var(--min-rate)), calc(14 * var(--vw-pc)), 14px);
  }
}

.p-news_date {
  display: block;
  line-height: 1.6;
  @media (max-width: 767px) {
    font-size: clamp(calc(14px * var(--min-rate)), calc(14 * var(--vw-sp)), 14px);
  }
  @media (min-width: 768px) {
    font-size: clamp(calc(14px * var(--min-rate)), calc(14 * var(--vw-pc)), 14px);
  }
}

.p-news_control {
  display: flex;
  align-items: center;
  @media (max-width: 767px) {
    width: fit-content;
    margin: clamp(calc(30px * var(--min-rate)), calc(30 * var(--vw-sp)), 30px) auto 0;
    justify-content: space-between;
    gap: clamp(calc(20px * var(--min-rate)), calc(20 * var(--vw-sp)), 20px);
  }
  @media (min-width: 768px) {
    position: absolute;
    justify-content: flex-end;
    top: 0;
    left: 50%;
    translate: -50% 0;
    gap: clamp(calc(20px * var(--min-rate)), calc(20 * var(--vw-pc)), 20px);
    width: clamp(calc(1170px * var(--min-rate)), calc(1170 * var(--vw-pc)), 1170px);
    max-width: calc(100% - 40px);
    aspect-ratio: 1170 / 16;
    margin: 0 auto;
  }
}

.p-news_pagination {
  width: fit-content;
  color: var(--color-white);
  font-family: var(--font-outfit);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
  @media (max-width: 767px) {
    font-size: clamp(calc(16px * var(--min-rate)), calc(16 * var(--vw-sp)), 16px);
  }
  @media (min-width: 768px) {
    font-size: clamp(calc(16px * var(--min-rate)), calc(16 * var(--vw-pc)), 16px);
  }
}

.p-news_prev,
.p-news_next {
  position: relative;
  width: 16px;
  height: 16px;

  &::after {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    content: "";
    border-top: 2px solid var(--color-white);
    border-right: 2px solid var(--color-white);
    @media (max-width: 767px) {
      width: clamp(calc(12px * var(--min-rate)), calc(12 * var(--vw-sp)), 12px);
      height: clamp(calc(12px * var(--min-rate)), calc(12 * var(--vw-sp)), 12px);
    }
    @media (min-width: 768px) {
      width: clamp(calc(12px * var(--min-rate)), calc(12 * var(--vw-pc)), 12px);
      height: clamp(calc(12px * var(--min-rate)), calc(12 * var(--vw-pc)), 12px);
    }
  }
}

.p-news_prev::after { rotate: -135deg; }
.p-news_next::after { rotate: 45deg; }


/* --------------------------------------------------------
  PARTNERS
  ------------------------------------------------------ */
.p-partners {
  @media (max-width: 767px) {
    margin-bottom: 160px;
    scroll-margin-top: 80px;
  }
  @media (min-width: 768px) {
    margin-bottom: 270px;
    scroll-margin-top: 120px;
  }
}

.p-partners_detail {
  position: relative;
  @media (max-width: 767px) {
    margin-top: clamp(calc(40px * var(--min-rate)), calc(40 * var(--vw-sp)), 40px);
  }
  @media (min-width: 768px) {
    width: clamp(calc(905px * var(--min-rate)), calc(905 * var(--vw-pc)), 905px);
    max-width: calc(100% - 40px);
    margin: clamp(calc(60px * var(--min-rate)), calc(60 * var(--vw-pc)), 60px) auto 0;
  }

  &::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-image: url("../images/bg_mesh_blue.png.webp");
    background-repeat: repeat;
    background-position: left top;
    background-size: 8.5px 8.5px;
    z-index: -1;
    @media (max-width: 767px) {
      bottom: clamp(calc(-8px * var(--min-rate)), calc(-8 * var(--vw-sp)), -8px);
      right: 0;
      border-radius: clamp(calc(50px * var(--min-rate)), calc(50 * var(--vw-sp)), 50px);
    }
    @media (min-width: 768px) {
      bottom: clamp(calc(-9px * var(--min-rate)), calc(-9 * var(--vw-pc)), -9px);
      right: clamp(calc(-9px * var(--min-rate)), calc(-9 * var(--vw-pc)), -9px);
      border-radius: clamp(calc(60px * var(--min-rate)), calc(60 * var(--vw-pc)), 60px);
    }
  }
}

.p-partners_list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  background: var(--color-green);
  @media (max-width: 767px) {
    gap: clamp(calc(9px * var(--min-rate)), calc(9 * var(--vw-sp)), 9px);
    padding: clamp(calc(40px * var(--min-rate)), calc(40 * var(--vw-sp)), 40px) clamp(calc(25px * var(--min-rate)), calc(25 * var(--vw-sp)), 25px);
    border-radius: clamp(calc(50px * var(--min-rate)), calc(50 * var(--vw-sp)), 50px);
  }
  @media (min-width: 768px) {
    gap: clamp(calc(20px * var(--min-rate)), calc(20 * var(--vw-pc)), 20px);
    padding: clamp(calc(60px * var(--min-rate)), calc(60 * var(--vw-pc)), 60px) clamp(calc(80px * var(--min-rate)), calc(80 * var(--vw-pc)), 80px);
    border-radius: clamp(calc(60px * var(--min-rate)), calc(60 * var(--vw-pc)), 60px);
  }
}

.p-partners_list_item {
  background: var(--color-white);
  @media (max-width: 767px) {
    width: clamp(calc(158px * var(--min-rate)), calc(158 * var(--vw-sp)), 158px);
    aspect-ratio: 158 / 67;
    border-radius: clamp(calc(15px * var(--min-rate)), calc(15 * var(--vw-sp)), 15px);
  }
  @media (min-width: 768px) {
    width: clamp(calc(235px * var(--min-rate)), calc(235 * var(--vw-pc)), 235px);
    aspect-ratio: 235 / 100;
    border-radius: clamp(calc(25px * var(--min-rate)), calc(25 * var(--vw-pc)), 25px);
  }

  &:not(:has(.p-partners_list_item_link)) {
    display: grid;
    place-content: center;
  }
}

.p-partners_list_item_link {
  display: grid;
  place-content: center;
  width: 100%;
  height: 100%;
  @media (max-width: 767px) {
    border-radius: clamp(calc(15px * var(--min-rate)), calc(15 * var(--vw-sp)), 15px);
  }
  @media (min-width: 768px) {
    border-radius: clamp(calc(25px * var(--min-rate)), calc(25 * var(--vw-pc)), 25px);
  }

  @media (any-hover: hover) {
    transition: opacity 0.3s ease-in-out;

    &:hover {
      opacity: 0.7;
    }
  }
}

.p-partners_tokyoto {
  @media (max-width: 767px) {
    width: clamp(calc(60px * var(--min-rate)), calc(60 * var(--vw-sp)), 60px);
  }
  @media (min-width: 768px) {
    width: clamp(calc(92px * var(--min-rate)), calc(92 * var(--vw-pc)), 92px);
  }
}

.p-partners_poppoya {
  @media (max-width: 767px) {
    width: clamp(calc(64px * var(--min-rate)), calc(64 * var(--vw-sp)), 64px);
  }
  @media (min-width: 768px) {
    width: clamp(calc(96px * var(--min-rate)), calc(96 * var(--vw-pc)), 96px);
  }
}

.p-partners_seek {
  @media (max-width: 767px) {
    width: clamp(calc(93px * var(--min-rate)), calc(93 * var(--vw-sp)), 93px);
  }
  @media (min-width: 768px) {
    width: clamp(calc(138px * var(--min-rate)), calc(138 * var(--vw-pc)), 138px);
  }
}

.p-partners_futurek {
  @media (max-width: 767px) {
    width: clamp(calc(90px * var(--min-rate)), calc(90 * var(--vw-sp)), 90px);
  }
  @media (min-width: 768px) {
    width: clamp(calc(133px * var(--min-rate)), calc(133 * var(--vw-pc)), 133px);
  }
}

.p-partners_mate {
  @media (max-width: 767px) {
    width: clamp(calc(108px * var(--min-rate)), calc(108 * var(--vw-sp)), 108px);
  }
  @media (min-width: 768px) {
    width: clamp(calc(160px * var(--min-rate)), calc(160 * var(--vw-pc)), 160px);
  }
}


/* --------------------------------------------------------
  WANTED
  ------------------------------------------------------ */
.p-wanted {
  @media (max-width: 767px) {
    margin-bottom: 100px;
    scroll-margin-top: 80px;
  }
  @media (min-width: 768px) {
    margin-bottom: 170px;
    scroll-margin-top: 120px;
  }
}

.p-wanted_contents {
  margin: 0 auto;
  @media (max-width: 767px) {
    width: clamp(calc(325px * var(--min-rate)), calc(325 * var(--vw-sp)), 325px);
    margin-top: clamp(calc(40px * var(--min-rate)), calc(40 * var(--vw-sp)), 40px);
  }
  @media (min-width: 768px) {
    width: clamp(calc(1160px * var(--min-rate)), calc(1160 * var(--vw-pc)), 1160px);
    max-width: calc(100% - 40px);
    margin-top: clamp(calc(70px * var(--min-rate)), calc(70 * var(--vw-pc)), 70px);
  }
}

.p-wanted_list {
  @media (max-width: 767px) {

  }
  @media (min-width: 768px) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto 1fr;
    gap: 0 clamp(calc(50px * var(--min-rate)), calc(50 * var(--vw-pc)), 50px);
  }
}

.p-wanted_list_inner {
  display: grid;
  border-bottom: 1px solid var(--color-white);
  @media (max-width: 767px) {
    grid-template-columns: clamp(calc(70px * var(--min-rate)), calc(70 * var(--vw-sp)), 70px) 1fr;
    padding: clamp(calc(10px * var(--min-rate)), calc(10 * var(--vw-sp)), 10px) 0;
  }
  @media (min-width: 768px) {
    grid-template-columns: clamp(calc(100px * var(--min-rate)), calc(100 * var(--vw-pc)), 100px) 1fr;
    padding: clamp(calc(20px * var(--min-rate)), calc(20 * var(--vw-pc)), 20px) 0;

    &:nth-child(1) {
      grid-column: 1 / 2;
      grid-row: 1 / 2;
      border-top: 1px solid var(--color-white);
    }
    &:nth-child(2) {
      grid-column: 1 / 2;
      grid-row: 2 / 3;
    }
    &:nth-child(3) {
      grid-column: 1 / 2;
      grid-row: 3 / 4;
    }
    &:nth-child(4) {
      grid-column: 2 / 3;
      grid-row: 1 / 2;
      border-top: 1px solid var(--color-white);
    }
    &:nth-child(5) {
      grid-column: 2 / 3;
      grid-row: 2 / 4;
    }
  }
}

.p-wanted_list_title,
.p-wanted_list_detail {
  color: var(--color-white);
  @media (max-width: 767px) {
    font-size: clamp(calc(14px * var(--min-rate)), calc(14 * var(--vw-sp)), 14px);
    line-height: 1.5;
  }
  @media (min-width: 768px) {
    font-size: clamp(calc(16px * var(--min-rate)), calc(16 * var(--vw-pc)), 16px);
    line-height: 1.6;
  }

  a {
    color: var(--color-white);
    text-decoration: underline;
    text-underline-offset: 0.2em;

    @media (any-hover: hover) {
      transition: opacity 0.3s ease-in-out;

      &:hover {
        opacity: 0.7;
      }
    }
  }
}

.p-wanted_list_detailList {
  @media (max-width: 767px) {

  }
  @media (min-width: 768px) {

  }

  &.list-dot {
    padding-left: 1em;
    list-style-type: disc;
  }
}

.p-wanted_list_detailList_item {
  @media (max-width: 767px) {

  }
  @media (min-width: 768px) {

  }
}


/* --------------------------------------------------------
  footer
  ------------------------------------------------------ */
.p-copyright {
  font-family: var(--font-outfit);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.05em;
  @media (max-width: 767px) {
    font-size: 10px;
  }
  @media (min-width: 768px) {
    font-size: 12px;
  }
}


/* --------------------------------------------------------
  Video
  ------------------------------------------------------ */
.p-movie {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh; /* fallback */
  height: 100lvh; /* iOS Safari: large viewport = full screen incl. behind toolbar */
  z-index: -1;

  video {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }
}


/* --------------------------------------------------------
  Modal
  ------------------------------------------------------ */
.p-modal_overlay {
  position: fixed;
  inset: 0;
  background: rgb(var(--color-blue-rgb) / 0.9);
  z-index: 1000;
  display: grid;
  place-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

html.has-modal {
  background-color: var(--color-blue);
}

.p-modal_overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

.p-modal_container {
  position: relative;
}

/* insta Modal
  ------------------------------------------------------ */
.insta_modal_content {
  background: var(--color-white);
  overflow: hidden;
  @media (max-width: 767px) {
    width: clamp(calc(325px * var(--min-rate)), calc(325 * var(--vw-sp)), 325px);
    border-radius: clamp(calc(25px * var(--min-rate)), calc(25 * var(--vw-sp)), 25px);
  }
  @media (min-width: 768px) {
    width: clamp(calc(400px * var(--min-rate)), calc(400 * var(--vw-pc)), 400px);
    border-radius: clamp(calc(25px * var(--min-rate)), calc(25 * var(--vw-pc)), 25px);
  }
}

.insta_modal_head {
  line-height: 1;
  text-align: center;
  @media (max-width: 767px) {
    padding: clamp(calc(14px * var(--min-rate)), calc(14 * var(--vw-sp)), 14px) 0 clamp(calc(18px * var(--min-rate)), calc(18 * var(--vw-sp)), 18px);
    font-size: clamp(calc(16px * var(--min-rate)), calc(16 * var(--vw-sp)), 16px);
  }
  @media (min-width: 768px) {
    padding: clamp(calc(14px * var(--min-rate)), calc(14 * var(--vw-pc)), 14px) 0 clamp(calc(18px * var(--min-rate)), calc(18 * var(--vw-pc)), 18px);
    font-size: clamp(calc(16px * var(--min-rate)), calc(16 * var(--vw-pc)), 16px);
  }
}

.insta_modal_list {
  @media (max-width: 767px) {

  }
  @media (min-width: 768px) {

  }
}

.insta_modal_list_item {
  border-top: 1px solid var(--color-blue);
  @media (max-width: 767px) {

  }
  @media (min-width: 768px) {

  }
}

.insta_modal_list_item_link {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: repeat(2, auto);
  @media (max-width: 767px) {
    row-gap: clamp(calc(6px * var(--min-rate)), calc(6 * var(--vw-sp)), 6px);
    padding: clamp(calc(18px * var(--min-rate)), calc(18 * var(--vw-sp)), 18px) clamp(calc(20px * var(--min-rate)), calc(20 * var(--vw-sp)), 20px);
  }
  @media (min-width: 768px) {
    row-gap: clamp(calc(6px * var(--min-rate)), calc(6 * var(--vw-pc)), 6px);
    padding: clamp(calc(18px * var(--min-rate)), calc(18 * var(--vw-pc)), 18px) clamp(calc(20px * var(--min-rate)), calc(20 * var(--vw-pc)), 20px);
  }

  .text {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
    line-height: 1;
    @media (max-width: 767px) {
      font-size: clamp(calc(16px * var(--min-rate)), calc(16 * var(--vw-sp)), 16px);
    }
    @media (min-width: 768px) {
      font-size: clamp(calc(16px * var(--min-rate)), calc(16 * var(--vw-pc)), 16px);
    }
  }

  .account {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.05em;
    @media (max-width: 767px) {
      font-size: clamp(calc(12px * var(--min-rate)), calc(12 * var(--vw-sp)), 12px);
    }
    @media (min-width: 768px) {
      font-size: clamp(calc(12px * var(--min-rate)), calc(12 * var(--vw-pc)), 12px);
    }
  }

  .icon_arrow {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    align-self: center;
    aspect-ratio: 1 / 1;
    margin-top: 2px;
    mask-image: url("../images/ico_arrow.svg");
    background: var(--color-blue);
    @media (max-width: 767px) {
      width: clamp(calc(12px * var(--min-rate)), calc(12 * var(--vw-sp)), 12px);
    }
    @media (min-width: 768px) {
      width: clamp(calc(12px * var(--min-rate)), calc(12 * var(--vw-pc)), 12px);
    }
  }

  @media (any-hover: hover) {
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;

    .icon_arrow {
      transition: background-color 0.3s ease-in-out;
    }

    &:hover {
      background: var(--color-blue);
      color: var(--color-green);

      .icon_arrow {
        background: var(--color-green);
      }
    }
  }
}

.p-instaModal_close_btn {
  position: absolute;
  aspect-ratio: 1 / 1;
  @media (max-width: 767px) {
    top: clamp(calc(17px * var(--min-rate)), calc(17 * var(--vw-sp)), 17px);
    right: clamp(calc(20px * var(--min-rate)), calc(20 * var(--vw-sp)), 20px);
    width: clamp(calc(13px * var(--min-rate)), calc(13 * var(--vw-sp)), 13px);
  }
  @media (min-width: 768px) {
    top: clamp(calc(17px * var(--min-rate)), calc(17 * var(--vw-pc)), 17px);
    right: clamp(calc(20px * var(--min-rate)), calc(20 * var(--vw-pc)), 20px);
    width: clamp(calc(13px * var(--min-rate)), calc(13 * var(--vw-pc)), 13px);
  }

  &::before, &::after {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    content: "";
    height: 2px;
    background: var(--color-blue);

    @media (max-width: 767px) {
      width: clamp(calc(16px * var(--min-rate)), calc(16 * var(--vw-sp)), 16px);
    }
    @media (min-width: 768px) {
      width: clamp(calc(16px * var(--min-rate)), calc(16 * var(--vw-pc)), 16px);
    }
  }

  &::before { rotate: 45deg }
  &::after { rotate: -45deg }

  @media (any-hover: hover) {
    transition: background-color 0.3s ease-in-out;
    &::before, &::after {
      transition: background-color 0.3s ease-in-out;
    }

    &:hover {
      background-color: var(--color-blue);
      &::before, &::after {
        background-color: var(--color-green);
      }
    }
  }
}

/* product Modal
  ------------------------------------------------------ */
.product_modal_container {
  @media (max-width: 767px) {
    width: calc(315 * var(--vw-sp));
    max-height: 80vh;
  }
  @media (min-width: 768px) {
    width: clamp(calc(1120px * var(--min-rate)), calc(1120 * var(--vw-pc)), 1120px);
    max-width: calc(100% - 80px);
    min-height: clamp(calc(500px * var(--min-rate)), calc(500 * var(--vw-pc)), 500px);
    margin: 0 auto;
  }
}

.product_modal_grid {
  position: relative;
  height: 100%;
  background: var(--color-white);
  overflow: hidden;
  @media (max-width: 767px) {
    display: flex;
    flex-direction: column;
    border-radius: clamp(calc(50px * var(--min-rate)), calc(50 * var(--vw-sp)), 50px);
  }
  @media (min-width: 768px) {
    display: flex;
    border-radius: clamp(calc(60px * var(--min-rate)), calc(60 * var(--vw-pc)), 60px);
  }

  &::after {
    @media (max-width: 767px) {
      position: absolute;
      bottom: 0;
      left: 50%;
      translate: -50% 0;
      content: "";
      width: 100%;
      height: clamp(calc(35px * var(--min-rate)), calc(35 * var(--vw-sp)), 35px);
      background: linear-gradient(180deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 75%, rgba(255, 255, 255, 1) 100%);
    }
  }
}

.modal_image_wrapper {
  position: relative;
  @media (max-width: 767px) {
    width: 100%;
    aspect-ratio: 325 / 248;
  }
  @media (min-width: 768px) {
    flex-shrink: 0;
    width: 50%;
    aspect-ratio: 560 / 500;
  }

  img {
    object-fit: cover;
    width: 100%;
    height: 100%;
  }

  .modal_label {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    display: grid;
    place-content: center;
    aspect-ratio: 1 / 1;
    background: url("../images/bg_label.svg") no-repeat center center / contain;
    line-height: 1.2;
    text-align: center;
    @media (max-width: 767px) {
      width: clamp(calc(100px * var(--min-rate)), calc(100 * var(--vw-sp)), 100px);
      font-size: clamp(calc(18px * var(--min-rate)), calc(18 * var(--vw-sp)), 18px);
    }
    @media (min-width: 768px) {
      width: clamp(calc(130px * var(--min-rate)), calc(130 * var(--vw-pc)), 130px);
      font-size: clamp(calc(23px * var(--min-rate)), calc(23 * var(--vw-pc)), 23px);
    }

    &.is-hidden {
      display: none;
    }
  }
}

.modal_info_wrapper {
  position: relative;
  @media (max-width: 767px) {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding: clamp(calc(20px * var(--min-rate)), calc(20 * var(--vw-sp)), 20px) clamp(calc(25px * var(--min-rate)), calc(25 * var(--vw-sp)), 25px) clamp(calc(35px * var(--min-rate)), calc(35 * var(--vw-sp)), 35px);

    &::-webkit-scrollbar {
      display: none;
    }
  }
  @media (min-width: 768px) {
    display: grid;
    place-content: center;
    flex-grow: 1;
    padding: clamp(calc(40px * var(--min-rate)), calc(40 * var(--vw-pc)), 40px) clamp(calc(80px * var(--min-rate)), calc(80 * var(--vw-pc)), 80px);
  }
}

.modal_title {
  line-height: 1.5;
  letter-spacing: 0.06em;
  word-break: auto-phrase;
  @media (max-width: 767px) {
    margin-bottom: clamp(calc(10px * var(--min-rate)), calc(10 * var(--vw-sp)), 10px);
    font-size: clamp(calc(22px * var(--min-rate)), calc(22 * var(--vw-sp)), 22px);
  }
  @media (min-width: 768px) {
    margin-bottom: clamp(calc(18px * var(--min-rate)), calc(18 * var(--vw-pc)), 18px);
    font-size: clamp(calc(26px * var(--min-rate)), calc(26 * var(--vw-pc)), 26px);
  }
}

.modal_content_body {
  @media (max-width: 767px) {
    font-size: clamp(calc(14px * var(--min-rate)), calc(14 * var(--vw-sp)), 14px);
    line-height: 1.6;
  }
  @media (min-width: 768px) {
    line-height: 1.8;
    font-size: clamp(calc(16px * var(--min-rate)), calc(16 * var(--vw-pc)), 16px);
  }
}

.p-productModal_close_btn {
  position: absolute;
  content: "";
  aspect-ratio: 1 / 1;
  border-radius: 100%;
  border: 2px solid var(--color-blue);
  background: var(--color-green);
  z-index: 1;

  @media (max-width: 767px) {
    top: clamp(calc(-5px * var(--min-rate)), calc(-5 * var(--vw-sp)), -5px);
    right: clamp(calc(-5px * var(--min-rate)), calc(-5 * var(--vw-sp)), -5px);
    width: clamp(calc(38px * var(--min-rate)), calc(38 * var(--vw-sp)), 38px);
  }
  @media (min-width: 768px) {
    top: clamp(calc(-6px * var(--min-rate)), calc(-6 * var(--vw-pc)), -6px);
    right: clamp(calc(-6px * var(--min-rate)), calc(-6 * var(--vw-pc)), -6px);
    width: clamp(calc(46px * var(--min-rate)), calc(46 * var(--vw-pc)), 46px);
  }

  &::before, &::after {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    content: "";
    height: 2px;
    background: var(--color-blue);

    @media (max-width: 767px) {
      width: clamp(calc(16px * var(--min-rate)), calc(16 * var(--vw-sp)), 16px);
    }
    @media (min-width: 768px) {
      width: clamp(calc(18px * var(--min-rate)), calc(18 * var(--vw-pc)), 18px);
    }
  }

  &::before { rotate: 45deg }
  &::after { rotate: -45deg }

  @media (any-hover: hover) {
    transition: background-color 0.3s ease-in-out;
    &::before, &::after {
      transition: background-color 0.3s ease-in-out;
    }

    &:hover {
      background-color: var(--color-blue);
      &::before, &::after {
        background-color: var(--color-green);
      }
    }
  }
}

/* Product modal navigation (prev / next)
  ------------------------------------------------------ */
.product_modal_nav {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  @media (max-width: 767px) {
    width: 100vw;
  }
  @media (min-width: 768px) {
    width: clamp(calc(1160px * var(--min-rate)), calc(1160 * var(--vw-pc)), 1160px);
    max-width: calc(100% - 20px);
  }
}

.product_modal_nav_btn {
  position: relative;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
  @media (max-width: 767px) {
    width: clamp(calc(36px * var(--min-rate)), calc(36 * var(--vw-sp)), 36px);
  }
  @media (min-width: 768px) {
    width: clamp(calc(40px * var(--min-rate)), calc(40 * var(--vw-pc)), 40px);
  }

  &::after {
    position: absolute;
    top: 50%;
    left: 50%;
    content: "";
    border-top: 2px solid var(--color-green);
    border-right: 2px solid var(--color-green);
    @media (max-width: 767px) {
      width: clamp(calc(20px * var(--min-rate)), calc(20 * var(--vw-sp)), 20px);
      height: clamp(calc(20px * var(--min-rate)), calc(20 * var(--vw-sp)), 20px);
    }
    @media (min-width: 768px) {
      width: clamp(calc(24px * var(--min-rate)), calc(24 * var(--vw-pc)), 24px);
      height: clamp(calc(24px * var(--min-rate)), calc(24 * var(--vw-pc)), 24px);
    }
  }

  &.product_modal_nav_prev::after {
    translate: -35% -50%;
    rotate: -135deg;
  }

  &.product_modal_nav_next::after {
    translate: -65% -50%;
    rotate: 45deg;
  }
}