@charset "utf-8";

html {
  visibility: hidden;
}
html.wf-active,
html.loading-delay {
    visibility: visible;
}
html.lenis, html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}
/* =========================================== */
/*    共通
/* =========================================== */
.pc-only {
  display: block;
}

@media screen and (max-width: 767px) {
  .pc-only {
    display: none;
  }
}

.sp-only {
  display: none;
}

@media screen and (max-width: 767px) {
  .sp-only {
    display: block;
  }
}

.det-narumiya {
  font-family: "noto-sans-cjk-jp", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #333;
  /* letter-spacing: 0.1em; */
}

.sec__inner {
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: 40px;
}

@media screen and (max-width: 767px) {
  .sec__inner {
    padding-inline: 15px;
  }
}

.text__note {
  font-size: 10px;
}

sup {
  font-size: clamp(10px, .6em, 13px);
}

.copy__right {
  font-size: min(2.5vw, 13px);
  font-weight: 700;
  text-align: center;
}


/* =========================================== */
/*    kv
/* =========================================== */

.det-narumiya .kv {
  position: relative;
  z-index: 0;
  background-color: #FCDCB7;
  padding: 0 0 min(4.5vw, 28px);
}
.det-narumiya .kv::before {
  content: "";
  width: 50%;
  height: 100%;
  background: url(../img/bg_star.webp) repeat center right/auto;
  position: absolute;
  top: 0;
  left: 0;
  opacity: .6;
}
.det-narumiya .kv::after {
  content: "";
  width: 50%;
  height: 100%;
  background: url(../img/bg_heart.webp) repeat center left/auto;
  position: absolute;
  top: 0;
  right: 0;
  opacity: .6;
}
.det-narumiya .kv__inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 40px;
}
.det-narumiya .kv__title {
  text-align: center;
}
.det-narumiya .obi {
  content: "";
  width: 100%;
  height: min(8.4vw, 84px);
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  background: url(../img/obi.webp) no-repeat top -20px center/cover;
  z-index: 2;
}

@media screen and (max-width: 767px) {
  .det-narumiya .kv__inner {
    padding-inline: 15px;
  }
    .det-narumiya .obi {
    height: 14vw;
    background: url(../img/obi.webp) no-repeat top center/cover;
  }
}

/* =========================================== */
/*    no1
/* =========================================== */
.det-narumiya .no1 {
  background-color: #FFF9CC;
  border-top: 4px solid #F08300;
  border-bottom: 4px solid #F08300;
  padding: min(6vw, 42px) 0 min(14vw, 27px);
  color: #3F3532;
}

.det-narumiya .no1__title {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: min(7vw, 28px);
  row-gap: 4px;
  justify-content: center;
  align-items: center;
  justify-items: center;
}

.det-narumiya .no1__body {
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  column-gap: min(5vw, 28px);
  row-gap: min(5vw, 20px);
  grid-template-areas: "no1__copy-block no1__design"
                        "no1__note no1__design";
}

.det-narumiya .no1__copy-block {
  display: grid;
  grid-template-columns: auto;
  row-gap: min(4.5vw, 20px);
  grid-area: no1__copy-block;
}

.det-narumiya .no1__copy-s {
  font-size: min(4.5vw, 25px);
  font-weight: 500;
  line-height: 1.5;
}

.det-narumiya .no1__copy-s span {
  font-size: .8em;
}

.det-narumiya .no1__copy-m {
  font-size: min(5vw, 28px);
  font-weight: 700;
  line-height: 1.2;
}

.det-narumiya .no1__design {
  grid-area: no1__design;
}

.det-narumiya .no1__body .text__note {
  grid-area: no1__note;

}

@media screen and (max-width: 767px) {
  .det-narumiya .no1__title {
    grid-template-columns: auto;
    margin-bottom: 3vw;
  }
  
  .det-narumiya .no1__body {
    display: grid;
    grid-template-columns: auto;
    align-items: center;
    column-gap: min(5vw, 28px);
    row-gap: min(5vw, 20px);
    grid-template-areas: "no1__copy-block"
                          "no1__design"
                          "no1__note";
  }
}

/* =========================================== */
/*    point
/* =========================================== */
.det-narumiya .point {
  background-color: #AAE5FF;
  padding: min(11vw, 80px) 0;
  position: relative;
  z-index: 1;
}

.det-narumiya .point::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 100%;
  height:100%;
  top: 0;
  left: 0;
  background: url(../img/bg_star.webp) repeat top center/auto;
  opacity: 0.4;
}

.det-narumiya .point .sec__inner {
  position: relative;
  z-index: 3;
}

.det-narumiya .point__title {
  text-align: center;
  margin-bottom: min(4vw, 35px);
}

.det-narumiya .nakamurakun {
  position: absolute;
  top: -30px;
  right: 0;
  text-align: center;
  width: min(22vw, 247px);
  z-index: 4;
}

.det-narumiya .bl-line__box  {
  border-radius: 31px;
  border: 4px solid #002870;
  background: #D9F4FF;
  box-shadow: 10px 10px 0 0 rgba(0, 40, 112, 0.35);
  padding: min(9vw, 36px) min(5vw, 80px) min(10vw, 55px);
}

.det-narumiya .bl-line__box + .bl-line__box {
  margin-top: min(6.5vw, 36px);
}

.det-narumiya .point__no {
  display: grid;
  grid-template-columns: auto;
  justify-content: center;
  justify-items: center;
  margin-bottom: min(6.5vw, 28px);
  width: min(12vw, 60px);
  margin-inline: auto;
}

.det-narumiya .point__grid {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  justify-items: center;
  row-gap: min(4.5vw, 18px);
}

.det-narumiya .point__copy {
  color: #E75B42;
  font-size: min(5vw, 28px);
  font-weight: 900;
  line-height: 1.5;
  margin-bottom: min(3.5vw, 12px);
}

.det-narumiya .point__text {
  font-size: min(4vw, 18px);
  font-weight: 500;
  line-height: 1.6;
}

.det-narumiya .point__text + .text__note {
  margin-top: min(5vw, 50px);
}

@media screen and (max-width: 900px) {
  .det-narumiya .nakamurakun {
    top: 28px;
  }
}
@media screen and (max-width: 767px) {
  .det-narumiya .nakamurakun {
    position: relative;
    top: 0;
    right: 0;
    width: 32.5vw;
    margin: 0 auto 11vw;
  }

  .det-narumiya .bl-line__box  {
    border: 3px solid #002870;
    box-shadow: 0 10px 0 0 rgba(0, 40, 112, 0.35);
  }

  .det-narumiya .point__grid {
    grid-template-columns: auto;
    justify-content: center;
  }
}

/* =========================================== */
/*    step
/* =========================================== */

.det-narumiya .step {
  background-color: #FFBDDD;
  padding: min(11vw, 80px) 0;
  position: relative;
  z-index: 1;
}

.det-narumiya .step::after {
  content: "";
  position: absolute;
  z-index: 2;
  width: 100%;
  height:100%;
  top: 0;
  left: 0;
  background: url(../img/bg_heart.webp) repeat top center/auto;
  opacity: 0.4;
}

.det-narumiya .step .sec__inner {
  position: relative;
  z-index: 3;
}

.det-narumiya .step__title {
  text-align: center;
  margin-bottom: min(4vw, 35px);
}

.det-narumiya .berrie {
  position: absolute;
  top: 0;
  left: 38px;
  text-align: center;
  width: min(18vw, 192px);
  z-index: 4;
}

.det-narumiya .step__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: min(5vw, 20px);
  row-gap: min(6vw, 24px);
}

.det-narumiya .pk-line__box {
  border-radius: 31px;
  border: 4px solid #E61A69;
  background: #FFDBEF;
  box-shadow: 0 10px 0 0 rgba(230, 26, 105, 0.35);
  padding: min(7.5vw, 30px) min(3.5vw, 15px) min(6vw, 24px);
  text-align: center;
}

.det-narumiya .step__no {
  margin-bottom: min(1.75vw, 7px);
  width: min(6.8vw, 68px);
  margin-inline: auto;
}

.det-narumiya .step__no img {
  width: 100%;
}

@media screen and (max-width: 900px) {
  .det-narumiya .berrie {
    top: 70px;
    left: 16px;
  }
}
@media screen and (max-width: 767px) {
  .det-narumiya .berrie {
    position: relative;
    top: 0;
    left: 0;
    width: 32.5vw;
    margin: 0 auto 6vw;
  }

  .det-narumiya .step__grid {
    grid-template-columns: 1fr;
  }

  .det-narumiya .pk-line__box  {
    border: 3px solid #E61A69;
    max-width: 480px;
    margin-inline: auto;
  }

  .det-narumiya .step__no {
    width: 14vw;
  }

  .det-narumiya .pk-line__box > figure img  {
    width: 100%;
  }
  
}

/* =========================================== */
/*    jikkan
/* =========================================== */

.det-narumiya .jikkan {
  background-color: #FFF9CB;
  padding: min(13vw, 72px) 0 min(14vw, 90px);
}

.det-narumiya .jikkan__title {
  text-align: center;
  margin-bottom: min(6.5vw, 36px);
}

.det-narumiya .or-line__box {
  border-radius: 31px;
  border: 4px solid #E75B42;
  background: #FFFDF0;
  box-shadow: 0 10px 0 0 rgba(231, 91, 66, 0.35);
  padding: min(5vw, 30px) min(3.5vw, 56px) min(9vw, 72px) min(3.5vw, 80px);
}

.det-narumiya .jikkan__fig {
  text-align: center;
  display: flex;
  justify-content: center;
  column-gap: min(40px, 3vw);
  row-gap: min(10px, 3vw);
  padding-top: min(40px, 5vw);
  margin-bottom: min(10vw, 36px);
}

.det-narumiya .jikkan__copy {
  color: #E75B42;
  font-size: min(5.25vw, 28px);
  font-weight: 900;
  line-height: 1.7;
  letter-spacing: 3.64px;
  text-align: center;
  text-decoration: underline .7px;
  text-underline-offset: 6px;
  margin-bottom: min(12.5vw, 36px);
}

.det-narumiya .jikkan__test {
  margin-bottom: min(7.5vw, 45px);
}

@media screen and (max-width: 980px) {
  .det-narumiya .jikkan__fig {
    flex-direction: column;
    padding-top: 0;
  }
}

@media screen and (max-width: 767px) {
  .det-narumiya .jikkan__fig {
    margin-bottom: min(20px, 5vw);
  }
}

.det-narumiya .jikkan__poroporo {
  text-align: center;
  margin-bottom: min(30px, 10vw);
}



/* =========================================== */
/*    narumiya-footer
/* =========================================== */

.det-narumiya .narumiya-footer {
  position: relative;
  z-index: 0;
  text-align: center;
  background-color: #FCDCB7;
  padding: min(21vw, 120px) 0 min(11vw, 56px);
}

.det-narumiya .narumiya-footer::before {
  content: "";
  width: 50%;
  height: 100%;
  background: url(../img/bg_star.webp) repeat center right/auto;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.4;
}
.det-narumiya .narumiya-footer::after {
  content: "";
  width: 50%;
  height: 100%;
  background: url(../img/bg_heart.webp) repeat center left/auto;
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0.4;
}

.det-narumiya .footer__inner {
  position: relative;
  z-index: 1;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 40px;
  margin-bottom: min(13.5vw, 84px);
}

.det-narumiya .narumiya-footer__sns {
  margin-bottom: min(50px, 5vw);
  width: min(67.5vw, 380px);
  margin-inline: auto;
}

.det-narumiya .narumiya-footer__main {
  position: relative;
  text-align: center;
  max-width: 680px;
  padding-top: min(115px, 17vw);
  padding-bottom: min(80px, 10vw);
  margin-inline: auto;
  margin-bottom: min(50px, 5vw);
}
.det-narumiya .narumiya-footer__main a {
  transition: all 0.3s ease-out;
}
.det-narumiya .narumiya-footer__main a:hover {
  filter: brightness(120%);
}

.det-narumiya .narumiya-footer__main--insta {
  position: absolute;
  bottom: 0;
  left: 0;
  max-width: min(100px, 15vw);
}

.det-narumiya .narumiya-footer__main--x {
  position: absolute;
  top: 0;
  right: 0;
  max-width: min(100px, 15vw);
}

.det-narumiya .narumiya-footer__product-grid {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: min(7vw, 28px);
  row-gap: min(5vw, 20px);
  justify-content: center;
}

.det-narumiya .narumiya-footer__product-whbox {
  background-color: rgba(255, 255, 255, .6);
  padding: min(7vw, 28px) min(4vw, 16px) min(5vw, 20px);
  display: grid;
  grid-template-columns: auto;
  row-gap: min(4vw, 16px);
}

.narumiya-footer__product-name {
  font-size: min(3.5vw, 15px);
  font-weight: 500;
  text-align-last: left;
}

.det-narumiya .narumiya-footer__product a {
  transition: all 0.3s ease-out;
}

.det-narumiya .narumiya-footer__product a:hover {
  filter: brightness(110%);
}

.det-narumiya .narumiya-footer__shop a {
  transition: all 0.3s ease-out;
}

.det-narumiya .narumiya-footer__shop a:hover {
  filter: brightness(110%);
}

.det-narumiya .narumiya-footer__copyright {
  font-weight: bold;
  margin-top: min(100px, 15vw);
  font-size: min(16px, 3vw);
}

@media screen and (max-width: 767px) {
  .det-narumiya .footer__inner {
    padding-inline: 15px;
  }

  .det-narumiya .narumiya-footer__product-grid {
    grid-template-columns: auto;
  }
}