@charset "UTF-8";



/*//////////////////////////////////////////////////

Title : LP CSS

//////////////////////////////////////////////////*/


/* ========================================================
                      * Layout style *
========================================================= */

html {
  font-size: 62.5%;
}

main {
  max-width: 100%;
}

#footer {
  position: relative;
  z-index: 2;
  margin-top: 0;
}

body.no_scroll{
  overflow: hidden;
}

:root {
  --main-color:#d19490;
  --white-color:#ffffff;
  --black-color:#1f1f1f;
  --purple-color:#c095c2;
  --orange-color:#dfa261;
  --gray-color:#666666;
  --orangeRed-color:#b97671;
  --background-color:#faf5f2;
  --ryo-gothic-font: "ryo-gothic-plusn", sans-serif;
  --lato-font: "lato", sans-serif;
  --amandine-font: "amandine", sans-serif;
}

header .header_inner {
  z-index: 100 !important;
}

.lp_contents {
  overflow: scroll;
  /*IE(Internet Explorer)・Microsoft Edgeへの対応*/
  -ms-overflow-style: none;
  /*Firefoxへの対応*/
  scrollbar-width: none;
}
/*Google Chrome、Safariへの対応*/
.lp_contents::-webkit-scrollbar{
  display: none;
}

/* ===================
  LP Contents
=================== */

.lp_contents {
  position: relative;
  z-index: 0;
  margin: 0 auto;
  /* margin-top: -.8rem; */
  padding-bottom: 15rem;
  font-family: "lato", "ryo-gothic-plusn", sans-serif;
  font-weight: 400;
  letter-spacing: 0.125em;
  background-color: var(--background-color);
  color: #1f1f1f;
  font-size: 1.4rem;
  font-feature-settings: "palt";
}

#FooterWrap {
  position: relative;
  z-index: 2;
}

.lp_contents *,
.lp_contents *:before,
.lp_contents *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.lp_contents ul,
.lp_contents li {
  list-style: none;
}

.lp_contents img {
  max-width: 100%;
  height: auto;
}

.lp_contents a,
.lp_contents a:before,
.lp_contents a:after {
  transition: opacity .3s cubic-bezier(0.51, 0.21, 0.41, 1),
  color .3s cubic-bezier(0.51, 0.21, 0.41, 1),
  background-color .3s cubic-bezier(0.51, 0.21, 0.41, 1),
  background-image .3s cubic-bezier(0.51, 0.21, 0.41, 1),
  border-color .3s cubic-bezier(0.51, 0.21, 0.41, 1),
  text-shadow .3s cubic-bezier(0.51, 0.21, 0.41, 1),
  text-weight .3s cubic-bezier(0.51, 0.21, 0.41, 1);
}

.lp_contents h1 {
  padding: 0;
}

.ttl_section {
  position: relative;
  /* color: var(--main-color); */
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.125em;
  text-align: center;
  z-index: 0;
}

.ttl_section::after {
  content: '';
  position: absolute;
  top: 29.5%;
  left: 0;
  width: 100vw;
  height: 1px;
  border-bottom: 1px solid var(--gray-color);
  z-index: -1;
}

.ttl_section .sec_titleImg {
  display: block;
  margin-inline: auto;
  /* padding-inline: 2.4rem; */
  /* padding-bottom: 1.7rem; */
  background-color: var(--background-color);
  box-sizing: content-box;
}

.section p {
  text-align: center;
}

/* -- List -- */

.list ul {
  letter-spacing: -0.4em;
}

.list ul li {
  display: inline-block;
  letter-spacing: 0.08em;
  vertical-align: top;
}


/* -- List Dot -- */

.list_dot,
.list.list_dot {
  margin: 1em 0;
}

.list_dot .list_dot {
  margin: 0 0 .5em;
}

.list_dot ul,
.list.list_dot ul {
  margin: 0;
  padding-left: 1.5em !important;
}

.list_dot ul li {
  margin-top: 0;
  margin-right: 0;
  margin-left: 0;
  list-style-type: none;
  line-height: 1.8;
}

.list_dot ul li ul {
  padding-top: 2px;
  padding-left: 2.5em !important;
}

.list_dot ul li:before {
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-left: -1em;
  margin-right: 14px;
  background: #555;
  border-radius: 100%;
  vertical-align: middle;
  content: "";
}


/* ===================
  　　 General
=================== */

.lp_contents .txt_center {
  text-align: center;
}

.lp_contents .txt_bold {
  font-weight: bold;
}

.lp_contents .txt_mincho {
  font-family: 'Noto Serif JP', serif;
}

.lp_contents a {
  color: inherit;
}


/* ===================
  　　　Animation
=================== */


/* -- keyframes -- */

@keyframes opa0 {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes opa1 {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes opa2 {
  0% {
    opacity: 0;
    filter: blur(10px);
  }

  100% {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes tra1 {
  100% {
    transform: translateX(0);
  }
}

@keyframes tra2 {
  100% {
    transform: translateY(0);
  }
}

@keyframes tra3 {
  0% {
    transform: translateY(30px);
  }

  100% {
    transform: translateY(0);
  }
}


@keyframes tra3_2 {
  0% {
    transform: translateY(2px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes tra4 {
  0% {
    transform: translateX(6%);
  }

  100% {
    transform: translateX(0);
  }
}


@keyframes tra5 {
  0% {
    transform: translateX(-30%);
  }

  100% {
    transform: translateX(0);
  }
}


@keyframes tra6 {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes tra7 {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.ef {
  opacity: 0;
}

.ef.effect {
  animation: opa1 1.2s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
}

.ef2 {
  opacity: 0;
}

.ef2.effect {
  animation: opa2 1.5s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
}

.ef-top {
  opacity: 0;
  transform: translateY(50px);
}

.ef-top.effect {
  animation: opa1 .8s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards, tra3 1s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
}

.ef-top2 {
  opacity: 0;
  transform: translateY(40px);
}

.ef-top2.effect {
  animation: opa2 1.5s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards, tra3_2 1.5s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
}

.ef-right {
  opacity: 0;
  transform: translateX(6%);
}

.ef-right.effect {
  animation: opa1 1.2s ease-in 0s 1 forwards, tra4 1.2s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
}

.ef-left {
  opacity: 0;
}

.ef-left.effect {
  animation: opa1 1.5s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards, tra5 1.5s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
}

.ef-lg.effect {
  animation: opa1 1.5s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards, tra6 1.5s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
}


/* ===================
  Section Common
=================== */
.section .contents_wrap .text_blk {
  text-align: center;
  width: 100%;
}

.section .contents_wrap .sub-title {
  display: inline-block;
}

.float_left {
  float: left;
}

.float_right {
  float: right;
}

.inner {
  margin: 0 auto;
  text-align: left;
}

.contents_wrap .text_blk .sub-title {
  margin-inline: auto;
}


/* ===================
    Text Setting
=================== */

.txt_cont {
  text-align: center;
  line-height: 1.7;
}


/* ===================
  Button Setting
=================== */

.btn_wrap {
  text-align: center;
}

.section .btn_link {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  color: #fff;
}

/* ===================
    INTRO
=================== */

.intro_title {
  margin-inline: auto;
  /* width: 75rem; */
}

.intro_cont p {
  /* font-size: 1.3rem; */
  font-weight: 400;
  /* line-height: 2.4; */
  letter-spacing: 0.125em;
  /* margin-top: 5.1rem; */
  text-align: center;
}


/* ===================
    MENU LIST
=================== */

.lp_menu,
.re-lp_menu  {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  font-size: 1.4rem;
  transform: translateY(100%);
  transition: .5s;
}

.lp_menu.fixed,
.re-lp_menu.fixed {
  transform: translateY(0);
}


.re-lp_menu_list {
  background: var(--main-color);
  color: #fff;
  font-size: 1.6rem;
}

.re-lp_menu_list ul {
  display: flex;
  align-items: center;
  justify-content: center;
  align-content: center;
  margin: 0 auto;
}

.re-lp_menu_list ul li {
  position: relative;
  padding: 0;
  width: auto;
  text-align: center;
}

.re-lp_menu_list ul li::before {
  position: absolute;
  top: 50%;
  left: 0;
  height: 3rem;
  transform: translateY(-50%);
  border-left: 1px solid var(--white-color);
  content: "";
}

.re-lp_menu_list ul li:first-child::before {
  display: none;
}

.re-lp_menu_list ul li a {
  display: block;
  letter-spacing: .125em;
}

.re-lp_menu_list .txt_inner {
  padding: 1.7rem 2rem;
}

.re-lp_menu_list ul li a:hover {
  opacity: .7;
}

.re-lp_menu_list ul li span {
  display: block;
}

.re-lp_menu_list .txt_en {
  margin: 0;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
}

.re-lp_menu_list .txt_ja {
  font-size: 1.6rem;
  line-height: 1.4;
  font-weight: 400;
}

/* -- lp_menu_top -- */
.lp_menu_top .js-efpoint {
  opacity: 0;
}

.lp_menu_top .js-efpoint.effect {
  animation: tra7 1.2s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
}

.lp_menu_top .js-efpoint:nth-child(2) {
  animation-delay: .3s;
}

.lp_menu_top .js-efpoint:nth-child(3) {
  animation-delay: .6s;
}

.lp_menu_top .js-efpoint:nth-child(4) {
  animation-delay: .9s;
}

.lp_menu_top .js-efpoint:nth-child(5) {
  animation-delay: 1.2s;
}

.lp_menu_top .js-efpoint:nth-child(6) {
  animation-delay: 1.5s;
}

.lp_menu_top ul {
  margin: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* gap: 2rem; */
}

.lp_menu_top ul li a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* padding-block: 9.3rem 2.8rem; */
  /* font-size: 1.5rem; */
  font-weight: 400;
  text-align: center;
  /* width: 12rem; */
  height: 100%;
}

.lp_menu_top ul li a:hover {
  color: var(--main-color);
}

.lp_menu_top ul li a:hover .icon {
  background-color: var(--main-color);
}

.lp_menu_top ul li a .icon {
  content: "";
  display: block;
  /* width: 8rem; */
  /* height: 8rem; */
  margin-inline: auto;
  margin-bottom: calc(18 * var(--rem));
  /* top: 0; */
  background-color: var(--black-color);
  mask-repeat: no-repeat;
  mask-size: 100%;
  /* z-index: 1; */
  transition: background-color .3s var(--transition-timing);
}

.lp_menu_top {
  .--giftFinder {
    & a {
      &::before {
        content: "";
        display: block;
        width: calc(103.268 * var(--rem));
        height: calc(33.7617 * var(--rem));
        margin-left: calc(-22 * var(--rem));
        background: url(../img4/icon_pick_up.svg) no-repeat center center/contain;
      }
      .icon {
        mask-image: url(../img4/icon_giftFinder.svg);
      }
    }
  }
  .--ranking {
    & a {
      .icon {
        mask-image: url(../img4/icon_Ranking.svg);
      }
    }
  }
  .--cost {
    & a {
      .icon {
        mask-image: url(../img4/icon_Cost.svg);
      }
    }
  }
  .--scene {
    & a {
      .icon {
        mask-image: url(../img4/icon_Scene.svg);
      }
    }
  }
  .--scent {
    & a {
      .icon {
        mask-image: url(../img4/icon_Scent.svg);
      }
    }
  }
  .--wrappingAndService {
    & a {
      .icon {
        mask-image: url(../img4/icon_WrappingAndService.svg);
      }
    }
  }
   .adjust-top {
    margin-top: calc(33.7617 * var(--rem));
   }
  .adjust-line {
    margin-top: .75em;
  }
}

.lp_menu_top ul li a::after {
  position: absolute;
  display: block;
  content: "";
  margin: auto;
  left: 0;
  right: 0;
  mask-size: 100%;
  z-index: 1;
}

.lp_menu_top ul li a::after {
  /* background: url(../img3/arrow_pc.svg) no-repeat; */
  background-size: 100%;
  bottom: 0;
  /* width: 2.5rem; */
  /* height: 1.1rem; */
}


/*  */
.lp_menu_top .js-efpoint:nth-child(4) {
  animation-delay: .3s;
}

.lp_menu_top .js-efpoint:nth-child(5) {
  animation-delay: .6s;
}

.lp_menu_top .js-efpoint:nth-child(6) {
  animation-delay: .9s;
}

.lp_menu_top ul {
  gap: calc(60 * var(--rem)) calc(30 * var(--rem));
}

.lp_menu_top ul li a {
  /* padding-block: calc(133 * var(--rem)) calc(36 * var(--rem)); */
  font-size: calc(26 * var(--rem));
  width: calc(190 * var(--rem));
  padding-bottom: calc(36 * var(--rem));
}

.lp_menu_top ul li a .icon {
  width: calc(120 * var(--rem));
  height: calc(120 * var(--rem));
}

.lp_menu_top ul li a::after {
  background: url(../img3/arrow_sp.svg) no-repeat;
  width: calc(40 * var(--rem));
  height: calc(18 * var(--rem));
}


/* ===================
      RANKING
=================== */


/* ===================
      SCENE
=================== */

.tab-list {
  display: flex;
  justify-content: center;
  /* column-gap: 2rem; */
}

.tab-list-item ,
.tab-list-item_butget{
  text-align: center;
  cursor: pointer;
}

.tab-contents,
.tab-contents_butget {
  visibility: hidden;
  opacity: 0;
  max-height: 0;
}

.tab-list-item_ranking {
  display: flex;
  cursor: pointer;
}

.tab-list-item_ranking .img {
  display: block;
  margin-top: .1rem;
  /* width: 15rem; */
}

.tab-list-item_ranking.is-active {
  color: var(--main-color);
}

.tab-contents.is-contents-active,
.tab-contents_butget.is-contents-active {
  transition: all .8s .2s ease-out;
  /* opacity: 1; */
  /* visibility: visible; */
  /* max-height: 100%; */
}

.tab figure {
  position: relative;
  width: 3rem;
  margin: auto;
}

.tab figure::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2rem;
  mask-repeat: no-repeat;
  mask-position: center center;
  mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  -webkit-mask-size: cover;
  content: "";
}

.tab .icon img {
  opacity: 0;
}

.tab .ttl_en {
  font-family: var(--lato-font);
  font-size: 2.2rem;
}

.tab .ttl_jp {
  font-size: 1.5rem;
  margin-top: -0.3rem;
}

.ttl_num {
  font-family: var(--amandine-font);
  font-size: 3.4rem;
  font-weight: 500;
  letter-spacing: .1em;
}

/* ==== tab 中身 ==== */
.tab-contents_ranking .item_wrap {
  width: 46.1rem;
  border: 1px solid var(--main-color);
  border-radius: 0 16rem 0 0;
  padding: 2.5rem 2rem 5rem;
}

.tab-contents_ranking .item_wrap .num {
  font-family: var(--amandine-font);
  font-size: 3.4rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .1em;
  text-align: left;
}

.tab-contents_ranking .tab-inner .name_en {
  margin-top: 1.6rem;
  font-family: var(--amandine-font);
  font-size: 2.8rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .1em;
  text-align: right;
  width: 46.1rem;
}

.tab-contents .tab-inner,
.tab-contents_butget .tab-inner {
  display: flex;
  justify-content: center;
  column-gap: 3rem;
}

.tab-contents .item_wrap ,
.tab-contents_butget .item_wrap {
  width: 32rem;
  background: var(--white-color);
  border-radius: 16rem 16rem 0 0;
  padding: 6rem 3rem 4rem;
}

.tab-contents_ranking .item_img {
  margin-bottom: 2.4rem;
}

.tab-contents_ranking .item_img a {
  display: block;
  margin: 1.5rem auto 0;
  width: 24rem;
}

.tab-contents .item_img,
.tab-contents_butget .item_img {
  width: 20rem;
  margin: auto;
}

.tab-contents_ranking .name {
  font-size: 2rem;
  letter-spacing: .125em;
  line-height: 1;
  margin-top: 2.3rem;
}

.tab-contents_ranking .variation {
  font-size: 1.2rem;
  letter-spacing: .1em;
  line-height: 1;
  margin-top: 1.1rem;
}

.tab-contents_ranking .tax {
  font-size: 1.6rem;
  letter-spacing: .1em;
  line-height: 1;
  margin-top: 1.8rem;
}

.tab-contents .name,
.tab-contents_butget .name {
  font-size: 1.3rem;
  letter-spacing: .125em;
  line-height: 2.2;
  margin-top: 2.3rem;
}

.tab-contents .tax ,
.tab-contents_butget .tax {
  font-size: 1.3rem;
  font-family: var(--lato-font);
  letter-spacing: 0.1em;
  margin-top: 1.6rem;
}

.tab-contents_ranking .btn ,
.tab-contents .btn,
.tab-contents_butget .btn {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--white-color);
  background-color: var(--main-color);
  border: 1px solid var(--main-color);
  letter-spacing: .1em;
}

.tab-contents_ranking .btn:hover ,
.tab-contents .btn:hover ,
.tab-contents_butget .btn:hover {
  color: var(--main-color);
  background-color: transparent;
}

.tab-contents_ranking .btn {
  width: 16.1rem;
  height: 3.5rem;
  font-size: 1.6rem;
  margin: 2.1rem auto 0;
}

.tab-contents .btn,
.tab-contents_butget .btn {
  width: 13rem;
  height: 3rem;
  font-size: 1.3rem;
  margin: 2.6rem auto 0;
}


/* ===================
      COST
=================== */
.tab-butget-contents.tab-butget.is-contents-active{
  display: block;
}


/* ===================
      SCENT
=================== */
.scent_section .text_en.main {
  font-size: 2.4rem;
  margin-top: 4.3rem;
  font-family: var(--lato-font);
  letter-spacing: 0.075em;
}

.scent_section .text_ja {
  /* margin-top: 2rem; */
  /* font-size: 1.3rem; */
  letter-spacing: 0.1em;
  line-height: 2.4;
}

.scent_section .txt_mincho {
  font-size: 1.8rem;
  margin-top: 3rem;
  color: var(--main-color);
  text-align: center;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.scent_section .contents_wrap {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3.5rem 8rem;
  align-items: stretch;
  background: var(--white-color);
  width: 95rem;
  border-radius: 20rem 20rem 0 0;
  padding: 0 0 4.8rem;
  z-index: 0;
}

.scent_section .contents_wrap.first {
  margin: 9rem auto 0;
}

.scent_section .contents_wrap.second,
.scent_section .contents_wrap.third,
.scent_section .contents_wrap.fourth {
  margin: 7rem auto 0;
}

.scent_section .contents_title {
  margin-top: 8rem;
  margin-inline: auto;
  width: 63rem;
}

.scent_section .contents_wrap.first .sub-title {
  margin-top: -4.4rem;
  width: 20.4rem;
}

.scent_section .contents_wrap.first .text_ja {
  color: var(--purple-color);
}

.scent_section .contents_wrap.first .btn {
  background-color: var(--purple-color);
}

.scent_section .contents_wrap.second .sub-title {
  margin-top: -2rem;
  width: 14rem;
}

.scent_section .contents_wrap.second .text_ja {
  color: var(--orange-color);
}

.scent_section .contents_wrap.second .btn {
  background-color: var(--orange-color);
}

.scent_section .contents_wrap.third .sub-title {
  margin-top: -2rem;
  width: 21.6rem;
}

.scent_section .contents_wrap.third .text_ja {
  color: var(--gray-color);
}

.scent_section .contents_wrap.third .btn {
  background-color: var(--gray-color);
}

.scent_section .contents_wrap.fourth .sub-title {
  margin-top: -2rem;
  width: 13.8rem;
}

.scent_section .contents_wrap.fourth .text_ja {
  color: var(--orangeRed-color);
}

.scent_section .contents_wrap.fourth .btn {
  background-color: var(--orangeRed-color);
}

.scent_section .first .head_wrap {
  width: 30rem;
}

.scent_section .second .head_wrap,
.scent_section .third .head_wrap,
.scent_section .fourth .head_wrap {
  width: 26rem;
}

.scent_section .head_wrap .text_blk .text_en {
  font-size: 2.8rem;
  font-weight: 400;
  font-family: var(--garamond-font);
  color: #666666;
  line-height: 1;
  letter-spacing: 0.075em;
}

.scent_section .head_wrap .text_blk .text_ja {
  font-size: 1.5rem;
  line-height: 2;
  color: #666666;
  margin-top: 2rem;
  letter-spacing: 0.1em;
}

.scent_section .item_wrap {
  display: flex;
  gap: 4rem;
}

.scent_section .item_wrap .item_img {
  width: auto;
  height: 17rem;
  margin: auto;
}

.scent_section .item_wrap .item_img img {
  width: auto;
  height: 100%;
}

.scent_section .item_wrap .name {
  font-size: 1.3rem;
  line-height: 2.2;
  margin-top: 2.1rem;
}

.scent_section .item_wrap .tax {
  font-size: 1.3rem;
  font-family: var(--lato-font);
  letter-spacing: 0.1em;
  margin-top: 1.6rem;
}

.scent_section .item_wrap .btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 13rem;
  height: 3rem;
  font-size: 1.3rem;
  color: var(--white-color);
  margin: 2.4rem auto 0;
}

/* contents_wrap second */
.scent_section .contents_wrap.second,
.scent_section .contents_wrap.fourth {
  flex-direction: row-reverse;
}

.scent_section .contents_wrap.second::before {
  left: unset;
  right: 17.5rem;
}


/* ===================
      SERVICE
=================== */
.service_section .text_ja {
  font-size: 1.3rem;
  margin-top: 3.8rem;
  line-height: 2.4;
}

.service_section .contents_wrap {
  position: relative;
  background: var(--white-color);
  /* width: 82rem; */
  /* margin: 6.5rem auto 0; */
  /* border-radius: 18rem 18rem 0 0; */
  /* padding: 0 0 3rem; */
  z-index: 0;
  text-align: center;
}

.section .contents_wrap h4 {
  /* margin-top: 1rem; */
  /* font-size: 1.3rem; */
  color: var(--black-color);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.125em;
}

.service_section .contents_wrap .name {
  /* font-size: 1.5rem; */
  letter-spacing: .125em;
  /* line-height: 2; */
  /* margin-top: 2.3rem; */
}

.service_section .contents_wrap .btn {
  /* position: relative; */
  /* display: flex; */
  /* justify-content: center; */
  /* align-items: center; */
  /* width: 20rem; */
  /* height: 3.6rem; */
  /* font-size: 1.3rem; */
  /* color: var(--white-color); */
  /* background: var(--main-color); */
  border: 1px solid var(--main-color);
  /* margin: 1.9rem auto 0; */
  /* z-index: 0; */
}

.service_section .contents_wrap .btn:hover {
  color: var(--main-color);
  background: transparent;
}

.service_section .contents_wrap .btn:hover::before {
  background-color: var(--main-color);
}

.service_section .contents_wrap .btn::before {
  /* position: absolute; */
  /* display: flex; */
  /* content: ""; */
  mask-image: url(../img3/service_icon.svg);
  -webkit-mask-image: url(../img3/service_icon.svg);
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: 100%;
  -webkit-mask-size: 100%;
  background-color: var(--white-color);
  /* width: 1.4rem; */
  /* height: 1.4rem; */
  /* top: 1rem; */
  /* right: 1rem; */
  /* z-index: 1; */
}

/* ===================
      WRAPPING
=================== */
.wrapping_section .sec_titleImg {
  width: 38.6rem;
}

.wrapping_section .contents_wrap {
  position: relative;
  background: var(--white-color);
  width: 82rem;
  border-radius: 18rem 18rem 0 0;
  padding: 0 0 3.8rem;
  z-index: 0;
  text-align: center;
}

.wrapping_section .contents_wrap.first {
  margin: 6.3rem auto 0;
}

.wrapping_section .contents_wrap.second {
  margin: 7rem auto 0;
}

.wrapping_section .contents_wrap.first .sub-title {
  width: 15rem;
}

.wrapping_section .contents_wrap.second .sub-title {
  width: 26.4rem;
}

.wrapping_section .wrapping_wrap {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 3rem;
  margin-top: 3.2rem;
}

.wrapping_section .contents_wrap .blk {
  width: 18rem;
}

.wrapping_section .contents_wrap .name {
  font-size: 1.5rem;
  line-height: 2;
  margin-top: 2.3rem;
}

.wrapping_section .contents_wrap .tax {
  font-size: 1.3rem;
  font-family: var(--lato-font);
  letter-spacing: 0.1em;
  margin-top: .5rem;
}

.wrapping_section .contents_wrap .subtext {
  font-size: 1.2rem;
  color: #666666;
  margin-top: 1.1rem;
  letter-spacing: 0.1em;
}

.wrapping_section .text_last {
  font-size: 1.3rem;
  margin-top: 3.7rem;
  color: var(--main-color);
}

/* wrapping_wrap__02 */

.wrapping_section .contents_wrap.second .blk {
  width: 72rem;
  margin: 3rem auto 0;
}

.wrapping_section .contents_wrap.second .item_img {
  width: 60rem;
  margin: auto;
}

.wrapping_section .contents_wrap.second .blk:nth-of-type(2) {
  padding: 4rem 0 3.9rem;
  margin: 4rem auto 0;
  border: dashed 0.1rem #8D8D8D;
  border-left: unset;
  border-right: unset;
}

.wrapping_section .contents_wrap.second .blk:nth-of-type(3) {
  margin: 3.8rem auto 0;
}

.wrapping_section .wrapping_wrap__02 .name {
  font-size: 1.5rem;
  letter-spacing: .125em;
  line-height: 2;
  margin-top: 3.2rem;
}

.wrapping_section .wrapping_wrap__02 .tax {
  font-size: 1.3rem;
  font-family: var(--lato-font);
  letter-spacing: 0.1em;
  margin-top: .5rem;
}

.wrapping_section .contents_wrap.second .btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  /* width: 22rem; */
  height: 3.6rem;
  font-size: 1.3rem;
  color: var(--white-color);
  background: var(--main-color);
  border: 1px solid var(--main-color);
  margin: 4.1rem auto 0;
  z-index: 0;
}

.wrapping_section .contents_wrap.second .btn:hover {
  color: var(--main-color);
  background: transparent;
}

.wrapping_section .contents_wrap.second .btn:hover::before {
  background-color: var(--main-color);
}

.wrapping_section .contents_wrap.second .btn::before {
  position: absolute;
  display: flex;
  content: "";
  mask-image: url(../img3/service_icon.svg);
  -webkit-mask-image: url(../img3/service_icon.svg);
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-size: 100%;
  -webkit-mask-size: 100%;
  background-color: var(--white-color);
  width: 1.4rem;
  height: 1.4rem;
  top: 1rem;
  right: 1rem;
  z-index: 1;
}

.wrapping_section .contents_wrap.second .subtext {
  font-size: 1rem;
  color: #666666;
  margin-top: 1.7rem;
}

.contents_wrap.third .subttl {
  /* font-size: 1.3rem; */
  color: #666666;
  /* letter-spacing: .125em; */
  /* line-height: 2.4; */
  /* margin-top: 2.4rem; */
}

.contents_wrap.third .text {
  /* font-size: 1.3rem; */
  color: #666666;
  line-height: 2.4;
  /* margin-top: 2.5rem; */
}

/* ===================
      STAFF
=================== */


/*=======================================
                    SERCH
========================================*/

.lp_contents.active {
  /* position: relative; */
  z-index: 1000;
}

.lp_contents.active .drawer__button.m_fixed span {
  display: block;
}

.lp_contents .menu-sec h3 {
  /* font-size: 3rem; */
  /* margin-bottom: 2.2rem; */
  /* text-align: center; */
  /* font-weight: 400; */
  /* font-family: var(--lato-font); */
  letter-spacing: .1em;
}

.lp_contents .menu-sec h3::before, .lp_contents .menu-sec h3::after {
  height: 1.5rem;  width: 1.3rem;
}

.lp_contents .menu-sec h3::before {
  left: -3rem;
}

.lp_contents .menu-sec h3::after {
  right: -3rem;
}

.lp_contents .menu-sec .brand-menu.menu-list {
  border-bottom: none;
}

.lp_contents .menu-sec .brand-menu .dropdown-menu {
  width: 26rem;
  height: 30rem;
  margin: -1px 0 0 1px;
}

.lp_contents .menu-sec h4 {
  font-size: 1.6rem;
  font-weight: 500;
  text-align: center;
}

.lp_contents .menu-sec .menu-list .scene li:after {
  height: 0.1rem;
  width: 100%;
  top: 5rem;
}

.lp_contents .drawer__button.active {
  display: none;
  position: fixed;
  /* background: none; */
  /* width: 3rem; */
  /* height: 3rem; */
  /* right: 2rem; */
  /* top: 2rem; */
  z-index: 1000;
  /* animation: fade 1.2s ease-in-out; */
  /* transition: opacity 1.2s ease-in-out; */

  opacity: 0;
  animation-name: fadein;
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}

@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.lp_contents .drawer__button {
	/* position: fixed; */
  display: none;
	/* width: 7.6rem; */
	/* height: 7.6rem; */
	/* cursor: pointer; */
	/* z-index: 9999; */
	/* top: 20rem; */
	/* right: 4rem; */
	/* background: url(../img3/ico_search_v2.svg) no-repeat; */
	/* background-size: cover; */
  /* filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, .2)); */
  opacity: 0;
  animation-name: fadein;
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  /* transition: opacity 1.2s ease-in-out; */
}
.lp_contents .drawer__button.m_fixed {
  display: block;
  position: fixed;
  opacity: 1;
  animation-name: fadein;
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  /* transition: opacity 1.2s ease-in-out; */
}

.lp_contents .drawer__button > span:nth-child(2) {
  /* transform: translate(-50%, -50%); */
  /* transition: opacity 0.3s ease; */
}
/* 展開時のデザイン */
.lp_contents .drawer__button.active > span:nth-child(2) {
  /* opacity: 0; */
}
/* メニューのデザイン */
.lp_contents .drawer__nav {
  /* position: fixed; */
  /* top: 0; */
  /* left: 0; */
  /* width: 100%; */
  /* height: 100vh; */
  background-color: rgba(225, 225, 225, 0.6);
  /* transition: opacity 0.6s ease; */
  /* opacity: 0; */
  /* visibility: hidden; */
  /* z-index: 999; */
  /*IE(Internet Explorer)・Microsoft Edgeへの対応*/
  -ms-overflow-style: none;
  /*Firefoxへの対応*/
  scrollbar-width: none;
}
/*Google Chrome、Safariへの対応*/
.drawer__nav::-webkit-scrollbar{
display: none;
}

.lp_contents .drawer__nav__inner {
  /* position: relative; */
  /* width: 40rem; */
  /* height: 100%; */
  background-color: #faf5f2;
  /* padding: 3rem 7rem; */
  /* margin: 0 0 0 auto; */
  /* overflow: scroll; */
  /* transform: translateX(100%); */
  /* transition: transform 0.6s ease; */
  /* color: var(--main-color); */
  /* z-index: 9999; */
  overflow-x: hidden;
}


/*=======================================
                    PC
========================================*/

@media screen and (min-width: 769px) {

  #Wrap,
  .wrapBottom,
  .wrapTop,
  #Contents {
    width: 100%;
  }

  .lp_contents {
    overflow: hidden;
  }
}

/*=======================================
              Responsive
========================================*/


/* Only for tablet */

@media screen and (min-width: 768px) and (max-width: 1400px) and (-webkit-min-device-pixel-ratio: 1) {
  html {
    font-size: calc(10* (100vw / 1400)) !important;
  }

  header,
  #Contents,
  .contents,
  footer {
    min-width: 0;
  }


}

/*=======================================
                    SP
========================================*/


/* only SP */

/* @media only screen and (max-width: 768px) { */
.pc_only {
  display: none;
}

.contents_inner {
  overflow: visible;
}

#share {
  right: auto !important;
  left: 5%;
  z-index: 5 !important;
}


/* ===================
  LP Contents
=================== */
.lp_contents {
  padding-bottom: calc(160 * var(--rem));
  overflow: visible;
  font-size: calc(14 * var(--rem));
}

.ttl_section {
  font-size: calc(28 * var(--rem));
}

.ttl_section::after {
  top: 26%;
}

/* ===================
  Section Common
=================== */
.contents {
  padding-top: 0;
}

/* ===================
      ANIME
=================== */
@keyframes tra3 {
  0% {
    transform: translateY(30px);
  }

  100% {
    transform: translateY(0);
  }
}

/* ===================
  Button Setting
=================== */


/* ===================
    INTRO
=================== */

.intro_section {
  font-size: calc(30 * var(--rem));
  padding-bottom: 0;
}

.intro_section .inner {
  padding-bottom: calc(70 * var(--rem));
}

.intro_title {
  margin-left: calc(65 * var(--rem));
  width: calc(660 * var(--rem));
}

.intro_title picture {
  margin-left: calc(0 * var(--rem));
}

.intro_txt {
  font-size: calc(30 * var(--rem));
}

.intro_txt .intro_img {
  width: 100%;
  margin-bottom: calc(60 * var(--rem));
}

.intro_txt p {
  margin-bottom: calc(60 * var(--rem));
}

.intro_txt p:last-child {
  margin-bottom: 0;
}

.intro_cont p {
  margin-top: calc(63 * var(--rem));
  font-size: calc(24 * var(--rem));
  line-height: 2.4;
}



/* ===================
    MENU LIST
=================== */

.lp_menu {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  font-size: 1.4rem;
  transform: translateY(100%);
  transition: .5s;
}

.lp_menu.fixed {
  transform: translateY(0);
}

.lp_menu.fixed {
  opacity: 1;
}

.re-lp_menu_list {
  font-size: calc(28 * var(--rem));
}

.re-lp_menu_list ul {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  align-content: center;
  margin: 0 auto;
  overflow-x: scroll;

  /*IE(Internet Explorer)・Microsoft Edgeへの対応*/
  -ms-overflow-style: none;
  /*Firefoxへの対応*/
  scrollbar-width: none;
}

  /*Google Chrome、Safariへの対応*/
  .re-lp_menu_list ul::-webkit-scrollbar{
  display: none;
}

.re-lp_menu_list ul li {
  position: relative;
  padding: 0;
  width: auto;
  text-align: center;
}

.re-lp_menu_list ul li::before {
  position: absolute;
  top: 50%;
  left: 0;
  height: calc(58 * var(--rem));
  transform: translateY(-50%);
  border-left: calc(2 * var(--rem)) solid var(--white-color);
  content: "";
}

.re-lp_menu_list ul li:first-child::before {
  display: none;
}

.re-lp_menu_list ul li {
  padding: calc(27 * var(--rem)) calc(19 * var(--rem)) calc(28 * var(--rem));
}

.re-lp_menu_list ul li a {
  display: block;
  color: #fff;
  letter-spacing: .125em;
}

.re-lp_menu_list .txt_inner {
  padding: 0;
}

.re-lp_menu_list ul li a:hover {
  opacity: .7;
}

.re-lp_menu_list ul li span {
  display: block;
}

.re-lp_menu_list .txt_en {
  margin: 0;
  font-size: calc(28 * var(--rem));
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  letter-spacing: 0.075em;
}

.re-lp_menu_list .txt_ja {
  font-size: calc(24 * var(--rem));
  line-height: 1.4;
  white-space: nowrap;
  letter-spacing: 0.125em;
}


/* ===================
      RANKING
=================== */
.ranking_section {
  margin-top: calc(156 * var(--rem));
}

.ranking_section .sec_titleImg {
  width: calc(380 * var(--rem));
}

.ranking_section .ttl_section .sec_titleImg {
  padding-bottom: calc(33 * var(--rem));
}

.ranking_section .tab {
  margin: calc(48 * var(--rem)) auto 0;
}


/* ===================
      SCENE
=================== */
.scene_section {
  margin-top: calc(160 * var(--rem));
}

.scene_section .sec_titleImg {
  width: calc(480 * var(--rem));
}

.scene_section .ttl_section .sec_titleImg {
  padding-bottom: calc(33 * var(--rem));
}

.ranking_section .tab {
  display: block;
}

.scene_section .tab {
  margin: calc(53 * var(--rem)) auto 0;
}

.scene_section .tab-list{
  column-gap: calc(20 * var(--rem));
}

.scene_section .tab-contents .tab-inner {
  padding-top: calc(72 * var(--rem));
}

.scene_section .tab-contents .item_wrap {
  padding-top: calc(57 * var(--rem));
}

.ranking_section .tab-listWrap {
  margin-bottom: calc(50 * var(--rem));
  padding-bottom: calc(30 * var(--rem));
  overflow-x: scroll;
  width: 100%;
  scrollbar-width: none;
  -webkit-appearance: none;
  -ms-overflow-style: none;
}

.ranking_section .tab-listWrap::-webkit-scrollbar{
  display: none;
}

.ranking_section .tab-list__inner {
  display: flex;
  justify-content: flex-start;
  /* column-gap: calc(30*(100vw / 780)); */
  padding-inline: calc(30 * var(--rem));
  animation: infinity-scroll 20s linear infinite .5s both;
  width: 100%;
}

:root {
  --item-count: 6;
  --primary-item-count: 3;
  --secondary-item-count: 1;
  --tertiary-item-count: 1;
  --quaternary-item-count: 1;
  --primary-width: 189;/*画像幅150*/
  --secondary-width: 168;/*画像幅130*/
  --tertiary-width: 158;/*画像幅120*/
  --quaternary-width: 139;/*画像幅100*/
  --no1-item-gap: 10;
  --container-width: calc(var(--no1-item-gap) + var(--primary-width) * var(--primary-item-count) + var(--secondary-width) * var(--secondary-item-count) + var(--tertiary-width) * var(--tertiary-item-count) + var(--quaternary-width) * var(--quaternary-item-count) + var(--gap-width) * var(--item-count));
  --gap-width: 30;
}
.ranking_section .tab-listWrap .tab-list {
  justify-content: flex-start;
  column-gap: calc(var(--gap-width) * var(--rem));
  min-width: calc(var(--container-width) * var(--rem));
}

@keyframes infinity-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-1 * var(--container-width) * var(--rem)));
  }
}

.tab-list-item_ranking {
  flex-shrink: 0;
}

.tab-list-item_ranking.ranking-No1 {
  column-gap: calc(var(--no1-item-gap) * var(--rem));
  /* min-width: calc(141*(100vw / 780)); */
}

.tab-list-item_ranking .img {
  width: auto;
  height: calc(150 * var(--rem));
}

.tab-list-item_ranking img {
  width: auto;
  height: 100%;
}

.tab-contents,
.tab-contents_butget {
  visibility: hidden;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}

.tab-contents .tab-inner,
.tab-contents_butget .tab-inner {
  padding-top: calc(65 * var(--rem));
}

/* .tab-contents_ranking.js-tab-target.is-active, */
.tab-contents.is-contents-active,
.tab-contents_butget.is-contents-active {
  opacity: 1;
  visibility: visible;
  max-height: 100%;
}

.tab figure {
  position: relative;
  width: calc(60 * var(--rem));
  margin: auto;
}

.tab figure::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(40 * var(--rem));
  mask-repeat: no-repeat;
  mask-position: center center;
  mask-size: cover;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  -webkit-mask-size: cover;
  content: "";
}

.tab .icon img {
  opacity: 0;
}

.tab .ttl_en {
  font-size: calc(38 * var(--rem));
  letter-spacing: .2rem;
}

.tab .ttl_jp {
  font-size: calc(26 * var(--rem));
  margin-top: calc(12 * var(--rem));
}

.ttl_num {
  font-size: calc(40 * var(--rem));
}

/* ==== tab 中身 ==== */
.tab-inner {
  margin: auto;
  width: fit-content;
}

.tab-contents_ranking .item_wrap {
  width: calc(552 * var(--rem));
  border-radius: 0 calc(160 * var(--rem)) 0 calc(160 * var(--rem));
  padding: calc(36 * var(--rem)) calc(30 * var(--rem)) calc(80 * var(--rem));
}

.tab-contents_ranking .item_wrap .num {
  font-size: calc(48 * var(--rem));
}

.tab-contents_ranking .tab-inner .name_en {
  margin-top: calc(22 * var(--rem));
  font-size: calc(40 * var(--rem));
  letter-spacing: .1em;
  width: calc(550 * var(--rem));
}

.tab-contents .tab-inner,
.tab-contents_butget .tab-inner {
  display: block;
}

.tab-contents .item_wrap,
.tab-contents_butget .item_wrap {
  display: flex;
  align-items: center;
  column-gap: calc(25 * var(--rem));
  width: calc(720 * var(--rem));
  border-radius: calc(160 * var(--rem)) calc(160 * var(--rem)) 0 0;
  padding: calc(60 * var(--rem)) calc(30 * var(--rem)) calc(60 * var(--rem));
  overflow: hidden;
}

.tab-contents .item_wrap:nth-child(n+2) ,
.tab-contents_butget .item_wrap:nth-child(n+2) {
  margin-top: calc(30 * var(--rem));
}

.tab-contents_ranking .item_img {
  margin-bottom: calc(0 * var(--rem));
}

.tab-contents_ranking .item_img a {
  display: block;
  margin: calc(23 * var(--rem)) auto calc(33 * var(--rem));
  width: calc(360 * var(--rem));
}

.tab-contents .item_img ,
.tab-contents_butget .item_img {
  width: calc(280 * var(--rem));
  margin: calc(8 * var(--rem)) 0 0;
}

.tab-contents_ranking .text_blk {
  margin-inline: auto;
}

.tab-contents .text_blk,
.tab-contents_butget .text_blk {
  width: calc(345 * var(--rem));
}

.tab-contents_ranking .name {
  font-size: calc(34 * var(--rem));
  margin-top: calc(32 * var(--rem));
}

.tab-contents .name ,
.tab-contents_butget .name {
  font-size: calc(24 * var(--rem));
  line-height: 2.1;
  text-align: left;
  margin-top: calc(0 * var(--rem));
}

.tab-contents_ranking .variation {
  font-size: calc(24 * var(--rem));
  margin-top: calc(22 * var(--rem));
}

.tab-contents_ranking .tax {
  font-size: calc(26 * var(--rem));
  margin-top: calc(30 * var(--rem));
}

.tab-contents .tax,
.tab-contents_butget .tax {
  font-size: calc(24 * var(--rem));
  text-align: left;
  margin-top: calc(28 * var(--rem));
}

.tab-contents_ranking .btn  {
  width: calc(261 * var(--rem));
  height: calc(57 * var(--rem));
  font-size: calc(26 * var(--rem));
  margin: calc(37 * var(--rem)) auto 0;
}

.tab-contents .btn,
.tab-contents_butget .btn {
  width: calc(200 * var(--rem));
  height: calc(48 * var(--rem));
  font-size: calc(24 * var(--rem));
  margin: calc(37 * var(--rem)) 0 0;
}

/* ===================
      COST
=================== */
.Cost_section {
  margin-top: calc(149 * var(--rem));
}

.Cost_section .sec_titleImg {
  width: calc(440 * var(--rem));
}

.Cost_section .ttl_section .sec_titleImg {
  padding-bottom: calc(33 * var(--rem));
}

.Cost_section .tab-list{
  column-gap: calc(30 * var(--rem));
}

.Cost_section .tab {
  margin: calc(53 * var(--rem)) auto 0;
}

.Cost_section .tab .ttl_en {
  line-height: 1;
}

.tab-butget-contents.tab-butget.is-contents-active{
  display: block;
}


/* ===================
      Scent
=================== */
.scent_section {
  margin-top: calc(160 * var(--rem));
}

.scent_section .sec_titleImg {
  width: calc(480 * var(--rem));
}

.scent_section .ttl_section {
  margin-bottom: calc(54 * var(--rem));
}

.scent_section .ttl_section .sec_titleImg {
  padding-bottom: calc(33 * var(--rem));
}

.scent_section .text_en.main {
  font-size: calc(40 * var(--rem));
  margin-top: calc(50 * var(--rem));
  font-family: var(--lato-font);
}

.scent_section .text_ja {
  font-size: calc(26 * var(--rem));
  margin-top: calc(59 * var(--rem));
}

.scent_section .txt_mincho {
  font-size: calc(34 * var(--rem));
  margin-top: calc(44 * var(--rem));
}

.scent_section .contents_wrap {
  display: block;
  width: calc(720 * var(--rem));
  border-radius: calc(160 * var(--rem)) calc(160 * var(--rem)) 0 0;
  padding: 0 0 calc(82 * var(--rem));
}

.scent_section .contents_wrap.first {
  margin: calc(133 * var(--rem)) auto 0;
}

.scent_section .contents_wrap.second,
.scent_section .contents_wrap.third,
.scent_section .contents_wrap.fourth {
   margin: calc(110 * var(--rem)) auto 0;
}

.scent_section .contents_title {
  margin-top: calc(120 * var(--rem));
  width: calc(700 * var(--rem));
}

.scent_section .contents_wrap.first .sub-title {
  margin-top: calc(-82 * var(--rem));
  width: calc(360 * var(--rem));
}

.scent_section .contents_wrap.second .sub-title {
  margin-top: calc(-30 * var(--rem));
  width: calc(245 * var(--rem));
}

.scent_section .contents_wrap.third .sub-title {
  margin-top: calc(-30 * var(--rem));
  width: calc(370 * var(--rem));
}

.scent_section .contents_wrap.fourth .sub-title {
  margin-top: calc(-30 * var(--rem));
  width: calc(230 * var(--rem));
}

.scent_section .head_wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: calc(47 * var(--rem)) auto 0;
}

.scent_section .first .head_wrap {
  width: calc(520 * var(--rem));
}

.scent_section .second .head_wrap,
.scent_section .third .head_wrap,
.scent_section .fourth .head_wrap {
  width: calc(520 * var(--rem));
}

.scent_section .head_wrap .text_blk {
  order: 2;
  margin-top: calc(50 * var(--rem));
}

.scent_section .head_wrap .text_blk .text_en {
  font-size: calc(50 * var(--rem));
}

.scent_section .head_wrap .text_blk .text_ja {
  font-size: calc(28 * var(--rem));
  line-height: 2;
  color: #666666;
  margin-top: calc(28 * var(--rem));
  letter-spacing: 0.1em;
  white-space: nowrap;
}

.scent_section .item_wrap {
  display: flex;
  justify-content: center;
  gap: calc(30 * var(--rem));
  margin-top: calc(50 * var(--rem));
  padding-inline: calc(60 * var(--rem));
}

.scent_section .item_wrap > div {
  min-width: 50%;
}

.scent_section .item_wrap .item_img {
  height: calc(300 * var(--rem));
}

.scent_section .item_wrap .name {
  font-size: calc(24 * var(--rem));
  letter-spacing: .125em;
  line-height: 2.1;
  margin-top: calc(26 * var(--rem));
}

.scent_section .item_wrap .tax {
  font-size: calc(24 * var(--rem));
  font-family: var(--lato-font);
  letter-spacing: 0.125em;
  margin-top: calc(25 * var(--rem));
}

.scent_section .item_wrap .btn {
  width: calc(200 * var(--rem));
  height: calc(48 * var(--rem));
  font-size: calc(24 * var(--rem));
  margin: calc(35 * var(--rem)) auto 0;
}

/* ===================
      SERVICE
=================== */
.service_section .ttl_section::after {
  top: 36%;
}

.service_section .sec_titleImg {
  width: calc(450 * var(--rem));
}

.service_section .text_ja {
  font-size: calc(24 * var(--rem));
  margin-top:  calc(37 * var(--rem));
}

.service_section .contents_wrap {
  width: calc(720 * var(--rem));
  margin: calc(118 * var(--rem)) auto 0;
  border-radius: calc(160 * var(--rem)) calc(160 * var(--rem)) 0 0;
  padding: 0 calc(80 * var(--rem)) calc(80 * var(--rem));
}

.service_section .contents_wrap .sub-title {
  margin-top: calc(-40 * var(--rem));
  width: calc(542 * var(--rem));
}

.section .contents_wrap h4 {
  margin-top: calc(28 * var(--rem));
  margin-left: calc(-6 * var(--rem));
  font-size: calc(26 * var(--rem));
}

.service_section .contents_wrap .contents_inner {
  display: block;
  margin-top: calc(26 * var(--rem));
}

.service_section .contents_wrap .item_img {
  width: calc(400 * var(--rem));
  margin: calc(60 * var(--rem)) auto 0;
}

.service_section .contents_wrap .name {
  font-size: calc(28 * var(--rem));
  line-height: 2.1;
  margin-top: calc(30 * var(--rem));
}

.service_section .contents_wrap .tax {
  font-size: calc(24 * var(--rem));
  font-family: var(--lato-font);
  letter-spacing: 0.125em;
  margin-top: calc(24 * var(--rem));
}

.service_section .contents_wrap .btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(422 * var(--rem));
  height: calc(76 * var(--rem));
  font-size: calc(28 * var(--rem));
  color: var(--white-color);
  background: var(--main-color);
  margin: calc(34 * var(--rem)) auto 0;
  z-index: 0;
  letter-spacing: 0.125em;
}

.service_section .contents_wrap .btn::before {
  position: absolute;
  display: flex;
  content: "";
  /* background: url(../img3/service_icon.svg) no-repeat; */
  /* background-size: 100%; */
  width: calc(30 * var(--rem));
  height: calc(30 * var(--rem));
  top: calc(21 * var(--rem));
  right: calc(12 * var(--rem));
  z-index: 1;
}

.service_section .contents_wrap .subtext {
  font-size: calc(20 * var(--rem));
  color: #666666;
  margin-top: calc(30 * var(--rem));
  letter-spacing: 0.125em;
}


/* ===================
      WRAPPING
=================== */
.wrapping_section .sec_titleImg {
  width: calc(580 * var(--rem));
}

.wrapping_section .contents_wrap {
  width: calc(720 * var(--rem));
  border-radius: calc(160 * var(--rem)) calc(160 * var(--rem)) 0 0;
  padding: 0 calc(13 * var(--rem)) calc(70 * var(--rem)) calc(22 * var(--rem));
}

.wrapping_section .contents_wrap.first {
  margin: calc(100 * var(--rem)) auto 0;
}

.wrapping_section .contents_wrap.second {
  margin: calc(126 * var(--rem)) auto 0;
}

.wrapping_section .contents_wrap.third {
  margin: calc(106 * var(--rem)) auto 0;
}

.wrapping_section .contents_wrap .sub-title {
  margin-top: calc(-41 * var(--rem));
}

.wrapping_section .contents_wrap.first .sub-title {
  margin-left: calc(-6 * var(--rem));
  width: calc(260 * var(--rem));
}

.wrapping_section .contents_wrap.second .sub-title {
  width: calc(542 * var(--rem));
}

.wrapping_section .contents_wrap.third .sub-title {
  width: calc(380 * var(--rem));
}

.wrapping_section .wrapping_wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: calc(0 * var(--rem));
  margin-top: calc(55 * var(--rem));
}

.wrapping_section .contents_wrap .blk {
  position: relative;
  width: calc(620 * var(--rem));
  height: calc(300 * var(--rem));
  z-index: 0;
}

.wrapping_section .contents_wrap .item_img {
  position: absolute;
  width: calc(300 * var(--rem));
  top: calc(-9 * var(--rem));
  left: calc(-12 * var(--rem));
  z-index: 1;
}

.wrapping_section .contents_wrap .blk:nth-of-type(2) .item_img {
  top: calc(15 * var(--rem));
  left: calc(-15 * var(--rem));
}

.wrapping_section .contents_wrap .blk:nth-of-type(3) .item_img {
  top: calc(21 * var(--rem));
  left: calc(-20 * var(--rem));
}

.wrapping_section .contents_wrap .name {
  font-size: calc(26 * var(--rem));
  line-height: 2;
  padding-left: calc(260 * var(--rem));
  letter-spacing: 0.125em;
}

.wrapping_section .contents_wrap .blk:nth-child(1) .name {
  margin-top: calc(55 * var(--rem));
}

.wrapping_section .contents_wrap .blk:nth-child(2) .name {
  margin-top: calc(77 * var(--rem));
}

.wrapping_section .contents_wrap .blk:nth-child(3) .name {
  margin-top: calc(93 * var(--rem));
}

.wrapping_section .contents_wrap .tax {
  font-size: calc(24 * var(--rem));
  font-family: var(--lato-font);
  letter-spacing: 0.075em;
  margin-top: calc(14 * var(--rem));
  padding-left: calc(264 * var(--rem));
  letter-spacing: 0.125em;
}

.wrapping_section .contents_wrap .subtext {
  font-size: calc(24 * var(--rem));
  color: #666666;
  margin-top: calc(16 * var(--rem));
  letter-spacing: 0.075em;
  padding-left: calc(262 * var(--rem));
}

.wrapping_section .text_last {
  font-size: calc(24 * var(--rem));
  margin-top: calc(68 * var(--rem));
  color: var(--main-color);
  line-height: 2.3;
  letter-spacing: 0.125em;
}

/* wrapping_wrap__02 */
.wrapping_section .contents_wrap.second {
  padding-inline: calc(25 * var(--rem));
}

.wrapping_section .contents_wrap.second .blk {
  width: 100%;
  height: calc(670 * var(--rem));
  margin: calc(91 * var(--rem)) auto 0;
}

.wrapping_section .contents_wrap.second .item_img {
  width: 100%;
  top: calc(-27 * var(--rem));
  left: calc(0 * var(--rem));
}

.wrapping_section .contents_wrap.second .blk:nth-of-type(2) .item_img {
  top: calc(84 * var(--rem));
  left: calc(-6 * var(--rem));
}

.wrapping_section .contents_wrap.second .blk:nth-of-type(3) .item_img {
  top: calc(-10 * var(--rem));
  left: calc(-4 * var(--rem));
}

.wrapping_section .contents_wrap.second .blk:nth-of-type(2) {
  width: calc(660 * var(--rem));
  height: calc(841 * var(--rem));
  padding: calc(49 * var(--rem)) 0 calc(20 * var(--rem));
  margin: calc(41 * var(--rem)) auto 0;
  border: dashed calc(3 * var(--rem)) #8D8D8D;
  border-left: unset;
  border-right: unset;
}

.wrapping_section .contents_wrap.second .blk:nth-of-type(3) {
  width: calc(660 * var(--rem));
  height: calc(710 * var(--rem));
  margin: calc(0 * var(--rem)) auto 0;
}

.wrapping_section .wrapping_wrap__02 .name {
  font-size: calc(30 * var(--rem));
  line-height: 2;
  padding-left: calc(4 * var(--rem));
  padding-top: calc(516 * var(--rem));
}

.wrapping_section .wrapping_wrap__02 .blk:nth-of-type(3) .name {
  padding-top: calc(572 * var(--rem));
}

.wrapping_section .wrapping_wrap__02 .tax {
  font-size: calc(24 * var(--rem));
  font-family: var(--lato-font);
  letter-spacing: 0.075em;
  margin-top: calc(19 * var(--rem));
  padding-left: calc(0 * var(--rem));
}

.wrapping_section .contents_wrap.second .btn {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  /* width: calc(460 * var(--rem)); */
  height: calc(76 * var(--rem));
  font-size: calc(28 * var(--rem));
  color: var(--white-color);
  background: var(--main-color);
  margin: calc(27 * var(--rem)) auto 0;
  z-index: 0;
  letter-spacing: 0.125em;
}

.wrapping_section .contents_wrap.second .btn::before {
  position: absolute;
  display: flex;
  content: "";
  /* background: url(../img3/service_icon.svg) no-repeat; */
  /* background-size: 100%; */
  width: calc(30 * var(--rem));
  height: calc(30 * var(--rem));
  top: calc(22 * var(--rem));
  right: calc(14 * var(--rem));
  z-index: 1;
}

.wrapping_section .contents_wrap.second .subtext {
  font-size: calc(20 * var(--rem));
  color: #666666;
  margin-top: calc(27 * var(--rem));
  padding-left: 0;
}

.wrapping_section .contents_wrap.third {
  padding-inline: calc(10 * var(--rem));
}

.contents_wrap.third .subttl {
  font-size: calc(24 * var(--rem));
  line-height: 2.4;
  margin-top: calc(46 * var(--rem));
  letter-spacing: 0.125em;
}

.contents_wrap.third .bag_img {
  width: calc(480 * var(--rem));
  margin: calc(28 * var(--rem)) auto 0;
}

.contents_wrap.third h3 {
  font-size: calc(32 * var(--rem));
  margin-top: calc(63 * var(--rem));
  font-weight: 500;
  letter-spacing: 0.125em;
}

.contents_wrap.third .text {
  font-size: calc(24 * var(--rem));
  margin-top: calc(37 * var(--rem));
  letter-spacing: 0.125em;
}

.contents_wrap.third .text.second ,
.contents_wrap.third .text.third {
  margin-top: calc(31 * var(--rem));
}

.contents_wrap.third .wrapping_wrap__02 .name {
  padding-top: calc(551 * var(--rem));
}

/* ===================
      STAFF
=================== */


/*=======================================
                    SERCH
========================================*/

.lp_contents.active {
  position: relative;
}

.lp_contents.active .drawer__button.m_fixed{
  opacity: 1;
  position: fixed;
  background: none;
  width: 2.8rem;
  height: 2.8rem;
  right: 1.5rem;
  top: 1.8rem;
  z-index: 1000;
}

.lp_contents .drawer__button.m_fixed span {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4rem;
  height: 0.1rem;
  background-color: #666666;
}

.lp_contents.active .drawer__button.m_fixed span {
  display: block;
}

.lp_contents .drawer__button.m_fixed span:first-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.lp_contents .drawer__button.m_fixed > span:last-child {
  transform: translate(-50%, -50%) rotate(45deg);
}





.lp_contents .menu-sec h3 {
  font-size: calc(50 * var(--rem));
  margin-bottom: calc(31 * var(--rem));
  text-align: center;
  font-weight: 400;
  font-family: var(--lato-font);
}

.lp_contents .menu-sec h3::before, .lp_contents .menu-sec h3::after {
  height: 1.5rem;  width: 1.3rem;
}

.lp_contents .menu-sec h3::before {
  left: -3rem;
}

.lp_contents .menu-sec h3::after {
  right: -3rem;
}

.lp_contents .menu-sec .menu-list {
  width: calc(380 * var(--rem));
  margin-left: auto;
  margin-right: auto;
  margin-bottom: calc(40 * var(--rem));
  border-bottom: solid calc(2 * var(--rem)) #C7A9A1;
  @media (768px <= width) {
    width: calc(400 * var(--rem));
  }
}

.lp_contents .menu-sec .menu-list li {
  background: var(--white-color);
}

.lp_contents .menu-sec .menu-list h4 {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: calc(26 * var(--rem));
  font-weight: 400;
  width: 100%;
  height: calc(72 * var(--rem));
  background: var(--main-color);
  color: var(--white-color);
  letter-spacing: 0.125em;
}

.lp_contents .menu-sec .brand-menu .select-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: calc(26 * var(--rem));
  background: var(--main-color);
  height: calc(68 * var(--rem));
  color: #fff;
  letter-spacing: 0.125em;
}

.lp_contents .menu-sec .brand-menu .select-btn.text_en {
  font-size: calc(26 * var(--rem));
}

.lp_contents .price-menu li a {
  display: block;
  text-align: center;
  color: #1f1f1f;
  font-size: calc(28 * var(--rem));
  padding: calc(26 * var(--rem)) 0 calc(28 * var(--rem));
  border-bottom: solid calc(2 * var(--rem)) #C7A9A1;
  border-left: solid calc(2 * var(--rem)) #C7A9A1;
  border-right: solid calc(2 * var(--rem)) #C7A9A1;
  letter-spacing: 0.075em;
}

.lp_contents .price-menu li:nth-last-of-type(1) a {
  border-bottom: unset;
}

.lp_contents .price-menu.smell li a {
  font-family: var(--lato-font);
  font-weight: 400;
}


.lp_contents .menu-sec .brand-menu .dropdown-menu {
  width: 26rem;
  height: 30rem;
  margin: -1px 0 0 1px;
}

.lp_contents .menu-sec h4 {
  font-size: 1.6rem;
  font-weight: 500;
  text-align: center;
}

.lp_contents .menu-sec .menu-list .scene {
  display: block;
  height: auto;
}

.lp_contents .menu-sec .menu-list .scene li:after {
  height: 0.1rem;
  width: 100%;
  top: 5rem;
}

.lp_contents .menu-sec .menu-list .scene li a {
  position: relative;
  display: block;
  padding: calc(15 * var(--rem)) 0 calc(18 * var(--rem)) calc(110 * var(--rem));
  text-align: center;
  border-bottom: calc(2 * var(--rem)) solid #C7A9A1;
  border-right: calc(2 * var(--rem)) solid #C7A9A1;
  border-left: calc(2 * var(--rem)) solid #C7A9A1;
  color: #1f1f1f;
  z-index: 0;
}

.lp_contents .menu-sec .menu-list .scene li .menu_icon {
  position: absolute;
  width: calc(63 * var(--rem));
  z-index: 1;
  top: calc(28 * var(--rem));
  left: calc(56 * var(--rem));
}

.lp_contents .menu-sec .menu-list .scene li .text_en {
  font-size: calc(28 * var(--rem));
  letter-spacing: 0.075em;
}

.lp_contents .menu-sec .menu-list .scene li .text_jp {
  font-size: calc(20 * var(--rem));
  margin-top: calc(4 * var(--rem));
  letter-spacing: 0.125em;
}

.lp_contents .menu-sec .menu-list .scene li:last-child a {
  border-bottom: unset;
}

.lp_contents .drawer__button.active {
  background: none;
  width: calc(40 * var(--rem));
  height: calc(40 * var(--rem));
  right: calc(40 * var(--rem));
  top: calc(40 * var(--rem));
  /* transition: opacity 0.6s ease; */
}

.lp_contents .drawer__button span {
  display: none;
}

.lp_contents .drawer__button {
  width: calc(140 * var(--rem));
  height: calc(140 * var(--rem));
  cursor: pointer;
  z-index: 9999;
  top: auto;
  bottom: 9%;
  right: calc(30 * var(--rem));
  background: url(../img3/ico_search_v2.svg) no-repeat;
  background-size: cover;
  filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, .2));
  @media (768px <= width) {
    bottom: calc(30 * var(--rem-pc));
    right: calc(30 * var(--rem-pc));
  }
}

.lp_contents .drawer__button.m_fixed {
   position: fixed;
}

.lp_contents  .drawer__button.active span {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(60 * var(--rem));
  height: calc(2 * var(--rem));
  background-color: #666666;
}

.lp_contents .drawer__button > span:first-child {
  transform: translate(-50%, calc(-50% - 0.5rem));
  transition: transform 0.3s ease;
}

.lp_contents .drawer__button > span:last-child {
  transform: translate(-50%, calc(-50% + 0.5rem));
  transition: transform 0.3s ease;
}

/* 展開時のデザイン */
.lp_contents .drawer__button.active span:first-child {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.lp_contents .drawer__button.active > span:last-child {
  transform: translate(-50%, -50%) rotate(45deg);
}

/* メニューのデザイン */
.lp_contents .drawer__nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  transition: opacity 0.6s ease;
  opacity: 0;
  visibility: hidden;
  z-index: 999;
}

.lp_contents .drawer__nav.active {
  opacity: 1;
  visibility: visible;
  max-height: 100%;
}

.lp_contents .drawer__nav__inner {
  position: relative;
  width: calc(500 * var(--rem));
  height: 100dvh;
  padding: calc(88 * var(--rem)) 0 calc(80 * var(--rem));
  margin: 0 0 0 auto;
  overflow: scroll;
  transform: translateX(100%);
  transition: transform 0.6s ease;
  color: var(--main-color);
  z-index: 9999;
  @media (768px <= width) {
    width: calc(600 * var(--rem));
  }
}
.lp_contents .drawer__nav.active .drawer__nav__inner {
  transform: translateX(0);
}

.lp_contents .drawer__bg {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
}

body.active {
  height: 100%;
  overflow: hidden;
}



#share {
  bottom: 10% !important;
}

.ttl_section .sec_titleImg {
  padding-inline: calc(30 * var(--rem));
  padding-bottom: calc(38 * var(--rem));
}

/* } */


/* ========================================================
                      * 20251120 *
========================================================= */
:root {
  --pw: 1400; /* PC幅 */
  --sw: 780; /* SP幅 */
  --artboard-pw: 468; /* PCアートボード幅 */
  --artboard-sw: 780; /* SPアートボード幅 */
  --rem: calc(var(--variable) * var(--ratio));
  --rem-pc: var(--variable);
  --transition-timing: cubic-bezier(0.51, 0.21, 0.41, 1);
}

@media (768px <= width) {
  :root {
    --ratio: calc(var(--artboard-pw) / var(--artboard-sw));
    --variable: calc(100vw / var(--pw));
  }
}
@media (1400px <= width) {
  :root {
    --variable: 1px;
  }
}
@media (width < 768px) {
  :root {
    --ratio: 1;
    --variable: calc(100vw / var(--sw));
  }
}


.l-mobile-first {
  position: relative;
  @media (768px <= width) {
    display: flex;
  }
}
.l-mobile-first__left,
.l-mobile-first__right {
  position: relative;
  width: calc((100vw - (var(--artboard-pw) * var(--rem-pc))) / 2);
}
.l-mobile-first__sticky {
  position: sticky;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
}
.l-mobile-first__main {
  overflow-x: clip;
  @media (768px <= width) {
    width: calc(var(--artboard-pw) * var(--rem-pc));
  }
}

.p-logo-box {
  width: calc(302.5 * var(--rem-pc));
  & img {
    display: block;
    width: 100%;
  }
}

.p-anchor__item {
  & + & {
    margin-top: calc(15 * var(--rem-pc));
  }
}
.p-anchor__item-box {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--rem-pc));
}
.p-anchor__item-box__icon {
  width: calc(40 * var(--rem-pc));
  height: calc(40 * var(--rem-pc));
  background-color: #000;
  mask: no-repeat center center/contain;
  transition: background-color .3s var(--transition-timing);
  &.--giftfinder {
    mask-image: url(../img4/icon_giftFinder.svg);
  }
  &.--ranking {
    mask-image: url(../img4/icon_Ranking.svg);
  }
  &.--cost {
    mask-image: url(../img4/icon_Cost.svg);
  }
  &.--scene {
    mask-image: url(../img4/icon_Scene.svg);
  }
  &.--scent {
    mask-image: url(../img4/icon_Scent.svg);
  }
  &.--wrappingandservice {
    mask-image: url(../img4/icon_WrappingAndService.svg);
  }
  .p-anchor__item-box:hover & {
    background-color: var(--main-color);
  }
}
.p-anchor__item-main {
  font-size: calc(14 * var(--rem-pc));
  letter-spacing: .125em;
}


/* ===================
      Gift Finder
=================== */
.giftFinder_section {
  margin-top: calc(161 * var(--rem));
  .sec_titleImg {
    width: calc(492.861 * var(--rem));
  }
}
.p-gift-finder__contents-lead {
  margin-top: calc(37 * var(--rem));
  font-size: calc(24 * var(--rem));
  line-height: calc(57.6 / 24);
  letter-spacing: .1em;
}
.p-gift-finder {
  margin-top: calc(46 * var(--rem));
}
.p-gift-finder__label {
  position: relative;
  z-index: 10;
  margin-bottom: calc(115 * var(--rem));
  color: var(--main-color);
  font-size: calc(24 * var(--rem));
  line-height: calc(57.6 / 24);
  letter-spacing: .1em;
  &.effect {
    &::after {
      transform: rotateX(0);
    }
  }
  .js-result & {
    margin-bottom: calc(43 * var(--rem));
  }
  .js-result.is-visible & {
    &::after {
      transform: rotateX(0);
    }
  }
  &::after {
    content: '';
    position: absolute;
    bottom: calc(-72 * var(--rem));
    left: 50%;
    width: 1px;
    height: calc(70 * var(--rem));
    background-color: currentColor;
    translate: -50% 0;
    transform: rotateX(-90deg);
    transform-origin: top;
    transition: transform .8s ease-in-out .5s;
  }
}
.js-result {
  opacity: 0;
  height: 0;
  margin: 0;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 1.2s ease-in-out;
  &.is-visible {
    opacity: 1;
    height: auto;
    margin-top: calc(84 * var(--rem));
    pointer-events: auto;
  }
}
.p-gift-finder__box {
  & + & {
    margin-top: calc(82 * var(--rem));
    .c-viewmore {
      margin-bottom: calc(8 * var(--rem));
    }
  }
  .c-viewmore {
    margin-bottom: calc(140 * var(--rem));
  }
}
.p-gift-finder__q {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(37 * var(--rem));
  margin-bottom: calc(43 * var(--rem));
  font-size: calc(34 * var(--rem));
  letter-spacing: .125em;
  .num {
    height: calc(61.37 * var(--rem));
    & img {
      display: block;
      width: auto;
      height: 100%;
    }
  }
}
.p-gift-finder__box-container {
  width: fit-content;
  max-height: calc(320 * var(--rem));
  margin-inline: auto;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 100%);
  overflow: hidden;
  &.is-open {
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 100%);
  }
}
.js-accordion--body {
  transition: max-height .6s ease-in-out;
}
.c-answer {
  position: relative;
  display: flex;
  align-items: center;
  width: calc(600 * var(--rem));
  height: calc(90 * var(--rem));
  border: 1px solid var(--main-color);
  cursor: pointer;
  & + & {
    margin-top: calc(20 * var(--rem));
  }
  & input {
    position: absolute;
    top: 50%;
    left: calc(36 * var(--rem));
    width: calc(50 * var(--rem));
    height: calc(50 * var(--rem));
    margin: 0;
    padding: 0;
    background: none;
    border: none;
    appearance: none;
    translate: 0 -50%;
    &::before {
      content: '';
      display: block;
      width: 100%;
      height: 100%;
      background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2050%2050%22%3E%3Cdefs%3E%3CclipPath%20id%3D%22a%22%3E%3Cpath%20d%3D%22M0%200h50v50H0z%22%20style%3D%22fill%3Anone%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg%20style%3D%22clip-path%3Aurl(%23a)%22%3E%3Cpath%20d%3D%22m46.69%206.62-24.53%2032L4.69%2018.43%22%20style%3D%22stroke%3A%23d19490%3Bstroke-miterlimit%3A10%3Bstroke-width%3A5px%3Bfill%3Anone%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E') no-repeat center / contain;
      opacity: 0;
    }
    &:checked::before {
      opacity: 1;
    }
    &:checked + span {
      background: #f0e3e3;
    }
  }
  & span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #fff;
    font-size: calc(26 * var(--rem));
    letter-spacing: .1em;
  }
}

.c-viewmore {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(15 * var(--rem));
  margin-top: calc(30 * var(--rem));
  margin-inline: auto;
  background: none;
  border: none;
  color: var(--main-color);
  font-size: calc(24 * var(--rem));
  letter-spacing: .1em;
  cursor: pointer;
  &::before {
    content: "";
    display: block;
    width: calc(20 * var(--rem));
    height: calc(10 * var(--rem));
    background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2021.41%2012.12%22%3E%3Cpath%20d%3D%22m20.71.71-10%2010-10-10%22%20style%3D%22fill%3Anone%3Bstroke%3A%23d19490%3Bstroke-miterlimit%3A10%3Bstroke-width%3A2px%22%2F%3E%3C%2Fsvg%3E') no-repeat center / contain;
  }
  /* &.is-open {
    &::after {
      rotate: 180deg;
    }
  } */
}

.p-result__container {
  position: relative;
  z-index: 1;
  padding-inline: calc(30 * var(--rem));
}
.p-result__block {
  height: 0;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  overflow: hidden;
  padding-block: 0;
  padding-inline: calc(30 * var(--rem));
  background: #fff;
  border-radius: calc(160 * var(--rem)) calc(160 * var(--rem)) 0 0;
  transition: opacity 1.2s ease .3s;
  &.is-active {
    height: auto;
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    padding-block: calc(69 * var(--rem)) calc(60 * var(--rem));
  }
  .item_wrap {
    display: flex;
    align-items: center;
    gap: calc(25 * var(--rem));
    margin-top: calc(35 * var(--rem));
    & + & {
      margin-top: calc(53 * var(--rem));
    }
    .item_img {
      width: calc(280 * var(--rem));
      & img {
        display: block;
        width: 100%;
      }
    }
    .text_blk {
      .name {
        font-size: calc(24 * var(--rem));
        line-height: calc(50.4 / 24);
        letter-spacing: .125em;
        text-align: left;
      }
      .tax {
        margin-top: calc(25 * var(--rem));
        font-family: var(--lato-font);
        font-size: calc(24 * var(--rem));
        letter-spacing: .1em;
        text-align: left;
      }
      .btn {
        margin-top: calc(36 * var(--rem));
        & a {
          display: flex;
          justify-content: center;
          align-items: center;
          width: calc(209 * var(--rem));
          height: calc(50 * var(--rem));
          background-color: var(--main-color);
          border: 1px solid var(--main-color);
          font-family: var(--lato-font);
          color: var(--white-color);
          font-size: calc(25 * var(--rem));
          letter-spacing: .1em;
          &:hover {
            color: var(--main-color);
            background-color: transparent;
          }
        }
      }
    }
  }
}
.p-result__block-lead {
  color: var(--main-color);
  font-size: calc(28 * var(--rem));
  line-height: calc(67.2 / 28);
  letter-spacing: .125em;
}

.tab-contents_ranking {
  .tab-inner {
    .name_en {
      margin-top: calc(26 * var(--rem));
      width: 100%;
    }
  }
  .item_wrap {
    width: calc(660 * var(--rem));
    padding: calc(37 * var(--rem)) calc(30 * var(--rem)) calc(80 * var(--rem));
  }
}
.p-slick {
  /* .slick-track {
    display: flex;
  }
  .slick-slide {
    height: auto;
  } */
  .slick-prev,
  .slick-next {
    top: calc(349 * var(--rem));
    width: calc(26 * var(--rem));
    height: calc(80 * var(--rem));
    z-index: 5;
    transform: translate(0, 0);
    &::before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20id%3D%22txt%22%20viewBox%3D%220%200%2027.68%2081.09%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3Anone%3Bstroke%3A%23666%3Bstroke-miterlimit%3A10%3Bstroke-width%3A2px%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20d%3D%22m26.84%2040.54-26%2040M.84.54l26%2040%22%20class%3D%22cls-1%22%2F%3E%3C%2Fsvg%3E') no-repeat center / contain;
    }
  }
  .slick-prev {
    left: calc(50% - (300 * var(--rem)));
    &::before {
      transform: rotate(180deg);
    }
  }
  .slick-next {
    right: calc(50% - (300 * var(--rem)));
  }
}

.c-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(200 * var(--rem));
  height: calc(48 * var(--rem));
  margin-inline: auto;
  background-color: var(--main-color);
  border: 1px solid var(--main-color);
  font-family: var(--lato-font);
  color: var(--white-color) !important;
  font-size: calc(24 * var(--rem));
  letter-spacing: .1em;
  &:hover {
    color: var(--main-color) !important;
    background-color: transparent;
  }
}

.c-tab-list {
  gap: calc(20 * var(--rem)) !important;
  color: var(--main-color);
}
.c-tab-list__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-inline: calc(27 * var(--rem));
  border: solid var(--main-color);
  border-width: calc(2 * var(--rem)) calc(2 * var(--rem)) 0 calc(2 * var(--rem));
  &.is-btn-active {
    color: #fff;
    .icon {
      &::after {
        background-color: #fff;
      }
    }
  }
  .--cost & {
    height: calc(90 * var(--rem));
    font-size: calc(30 * var(--rem));
    letter-spacing: .1em;
  }
  .--scene & {
    width: calc(228 * var(--rem));
    height: calc(186 * var(--rem));
    padding-inline: 0;
    font-size: calc(26 * var(--rem));
    letter-spacing: .125em;
  }
  .--scent & {
    height: calc(165 * var(--rem));
    padding-inline: 0;
    font-size: calc(26 * var(--rem));
    letter-spacing: .125em;
    &.--1 {
      width: calc(204.555 * var(--rem));
    }
    &.--2 {
      width: calc(263.555 * var(--rem));
    }
    &.--3 {
      width: calc(214.555 * var(--rem));
    }
    .ttl_en {
      font-size: calc(30 * var(--rem));
      line-height: calc(45 / 30);
      letter-spacing: .1em;
    }
    .ttl_jp {
      margin-top: calc(6 * var(--rem));
    }
  }
  .--service & {
    width: calc(351.333 * var(--rem));
    height: calc(90 * var(--rem));
    font-size: calc(30 * var(--rem));
    letter-spacing: .1em;
    .ttl_jp {
      margin-top: 0;
      font-size: calc(30 * var(--rem));
    }
  }
  .ttl_en {
    font-size: inherit;
    letter-spacing: inherit;
  }
  .icon {
    position: relative;
    width: calc(118 * var(--rem));
    height: calc(100 * var(--rem));
    margin: 0 auto 0;
    z-index: 0;
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: calc(118 * var(--rem));
      height: calc(100 * var(--rem));
      mask-size: contain;
      -webkit-mask-size: mask-size;
      mask-repeat: no-repeat;
      -webkit-mask-repeat: no-repeat;
      background-color: var(--main-color);
      z-index: 0;
    }
  }
}
.c-tab-list__item-bg {
  position: absolute;
  top: calc(4 * var(--rem));
  left: calc(4 * var(--rem));
  z-index: -1;
  width: 100%;
  height: 100%;
  background: #fff;
  .is-btn-active & {
    background: linear-gradient(135deg, #f0d5d5 0%, #d19490 100%);
    &::after {
      opacity: 1;
    }
  }
  &::after {
    position: absolute;
    content: "";
    bottom: calc(-20 * var(--rem));
    left: 50%;
    width: calc(20 * var(--rem));
    height: calc(20 * var(--rem));
    /* background: linear-gradient(180deg, #e7c3c2 0%, #e0b6b4 100%); */
    background: #e1b5b3;
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    opacity: 0;
    translate: -50% 0;
  }
}
.c-tab-list__item-border {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  .is-btn-active & {
    &::before,
    &::after {
      width: calc(50% - (10 * var(--rem)));
    }
  }
  &::before,
  &::after {
    content: "";
    position: absolute;
    width: 50%;
    height: calc(2 * var(--rem));
    background: var(--main-color);
  }
  &::before {
    bottom: 0;
    left: 0;
  }
  &::after {
    bottom: 0;
    right: 0;
  }
  .arrow {
    position: absolute;
    bottom: calc(-20 * var(--rem));
    left: 50%;
    width: calc(22 * var(--rem));
    height: calc(22 * var(--rem));
    background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC%202%22%20viewBox%3D%220%200%2020.71%2021.64%22%3E%3Cpath%20d%3D%22M10.36%2021.64%200%20.89%201.79%200l8.58%2017.18L18.92.19l1.79.89-10.35%2020.56z%22%20style%3D%22fill%3A%23d19490%22%2F%3E%3C%2Fsvg%3E') no-repeat center / contain;
    translate: -50% 0;
    opacity: 0;
    .is-btn-active & {
      opacity: 1;
    }
  }
}

.scene_section .tab-list-item:nth-child(1) .icon::after {
  mask-image: url(../img3/Scene_PutitGift.svg);
  -webkit-mask-image: url(../img3/Scene_PutitGift.svg);
}

.scene_section .tab-list-item:nth-child(2) .icon::after {
  mask-image: url(../img3/Scene_Birthday.svg);
  -webkit-mask-image: url(../img3/Scene_Birthday.svg);
}

.scene_section .tab-list-item:nth-child(3) .icon::after {
  mask-image: url(../img3/Scene_GiftForMe.svg);
  -webkit-mask-image: url(../img3/Scene_GiftForMe.svg);
}


.c-tab-contents__label {
  margin-block: calc(73 * var(--rem)) calc(-20 * var(--rem));
  color: var(--main-color);
  font-size: calc(28 * var(--rem));
  letter-spacing: .1em;
}


/* ===================
      Pick Up Scene
=================== */
.pickUpScene_section {
  margin-top: calc(100 * var(--rem));
}
.p-pickup {
  margin-inline: calc(30 * var(--rem));
  padding-block: calc(76 * var(--rem)) calc(80 * var(--rem));
  background: #fff;
  border: 1px solid var(--main-color);
}
.p-pickup__head {
  margin-bottom: calc(76 * var(--rem));
  text-align: center;
}
.p-pickup__ttl-img {
  width: calc(501 * var(--rem));
  margin-inline: auto;
  & img {
    display: block;
    width: 100%;
  }
}
.p-pickup__ttl {
  margin-top: calc(23 * var(--rem));
  font-size: calc(26 * var(--rem));
}
.p-pickup__label {
  margin-top: calc(47 * var(--rem));
  color: var(--main-color);
  font-size: calc(28 * var(--rem));
  letter-spacing: 0.125em;
}
.p-pickup__lead {
  margin-top: calc(17 * var(--rem));
  font-size: calc(24 * var(--rem));
  line-height: calc(57.6 / 24);
  letter-spacing: 0.1em;
}
.p-pickup-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: calc(80 * var(--rem)) calc(30 * var(--rem));
}
.p-pickup-list__item {
  width: calc(315 * var(--rem));
  text-align: center;
  opacity: 0;
  .p-pickup.effect & {
    animation: tra7 1.2s cubic-bezier(0.51, 0.21, 0.41, 1) 0s 1 forwards;
    &:nth-child(1) {
      animation-delay: .3s;
    }
    &:nth-child(2) {
      animation-delay: .6s;
    }
    &:nth-child(3) {
      animation-delay: .9s;
    }
    &:nth-child(4) {
      animation-delay: 1.2s;
    }
    &:nth-child(5) {
      animation-delay: 1.5s;
    }
    &:nth-child(6) {
      animation-delay: 1.8s;
    }
    &:nth-child(7) {
      animation-delay: 2.1s;
    }
    &:nth-child(8) {
      animation-delay: 2.4s;
    }
  }
}
.p-pickup-list__item-color {
  width: calc(197.142 * var(--rem));
  margin-inline: auto;
  margin-bottom: calc(30 * var(--rem));
  & img {
    display: block;
    width: 100%;
  }
}
.p-pickup-list__item-img {
  width: calc(250 * var(--rem));
  margin-inline: auto;
  & img {
    display: block;
    width: 100%;
  }
}
.p-pickup-list__item-name {
  margin-top: calc(11 * var(--rem));
  font-size: calc(24 * var(--rem));
  line-height: calc(50.4 / 24);
  letter-spacing: .125em;
}
.p-pickup-list__item-price {
  margin-top: calc(6 * var(--rem));
  font-family: var(--lato-font);
  font-size: calc(24 * var(--rem));
  letter-spacing: .1em;
}
.p-pickup-list__item-btn__wrap {
  margin-top: calc(20 * var(--rem));
}


/* ===================
      SCENT
=================== */
.scent_section .contents_wrap.default {
  margin: calc(125 * var(--rem)) auto 0;
}
.scent_section .contents_wrap.default .text_ja {
  color: var(--main-color);
}
.scent_section .contents_wrap.default .btn {
  background-color: var(--main-color);
}
.scent_section .contents_wrap.default .sub-title {
  margin-top: calc(-37 * var(--rem));
  width: calc(400 * var(--rem));
}

.p-scent-img {
  margin-top: calc(64 * var(--rem));
  margin-inline: auto;
  &.--1 {
    width: calc(650 * var(--rem));
  }
  &.--2 {
    width: calc(490 * var(--rem));
  }
  & img {
    display: block;
    width: 100%;
  }
}
.p-scent-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: calc(104 * var(--rem));
}
.p-scent-list__item {
  width: 47.5%;
  text-align: center;
}
.p-scent-list__item-img {
  width: calc(240 * var(--rem));
  margin-inline: auto;
  & img {
    display: block;
    width: 100%;
  }
}
.p-scent-list__item-name {
  margin-top: calc(16 * var(--rem));
  font-size: calc(24 * var(--rem));
  line-height: calc(50.4 / 24);
  letter-spacing: .125em;
}
.p-scent-list__item-price {
  margin-top: calc(17 * var(--rem));
  font-family: var(--lato-font);
  font-size: calc(24 * var(--rem));
  letter-spacing: .1em;
}
.p-scent-list__item-btn__wrap {
  margin-top: calc(33 * var(--rem));
}


/* ===================
  WRAPPING & SERVICE
=================== */
.wrappingAndService_section {
  margin-top: calc(179 * var(--rem));
  .ttl_section {
    margin-bottom: calc(52 * var(--rem));
  }
  .ttl_section {
    &::after {
      top: 36%;
    }
  }
  .sec_titleImg {
    width: calc(460 * var(--rem));
    padding-bottom: calc(33 * var(--rem));
  }
}
.p-contents-head {
  padding-bottom: calc(77 * var(--rem));
  border-bottom: dashed calc(3 * var(--rem)) #8D8D8D;
  .service_section & {
    padding-bottom: calc(65 * var(--rem));
  }
  .btn {
    width: calc(460 * var(--rem));
    margin-top: calc(40 * var(--rem));
  }
}
.p-contents-head__ttl {
  margin-top: calc(24 * var(--rem));
  font-size: calc(28 * var(--rem));
  font-weight: normal;
  letter-spacing: .125em;
}
.p-contents-head__txt {
  margin-top: calc(37 * var(--rem));
  font-size: calc(24 * var(--rem));
  line-height: calc(57.6 / 24);
  letter-spacing: .1em;
}

.p-contents-section {
  padding-top: calc(80 * var(--rem));
  text-align: center;
  .name,
  .tax {
    text-align: center;
  }
}
.p-contents-section__heading {
  margin-block: calc(28 * var(--rem)) calc(43 * var(--rem));
  font-size: calc(26 * var(--rem));
  letter-spacing: .125em;
}
.p-contents-section__heading-img {
  width: fit-content;
  height: calc(60 * var(--rem));
  margin-inline: auto;
  & img {
    display: block;
    width: auto;
    height: 100%;
  }
}
.p-contents-section__note {
  color: var(--main-color);
  font-size: calc(24 * var(--rem));
  line-height: calc(57.6 / 24);
  letter-spacing: .125em;
  .p-wrapping-box + & {
    margin-top: calc(-17 * var(--rem));
  }
}
.p-wrapping-box {
  padding-bottom: calc(79 * var(--rem));
  & + & {
    padding-top: calc(80 * var(--rem));
    border-top: dashed calc(3 * var(--rem)) #8D8D8D;
  }
}
.p-wrapping-box__img {
  /* margin-inline: calc(25 * var(--rem)); */
  & img {
    display: block;
    width: 100%;
  }
}
.p-wrapping-box__txt {
  margin-top: calc(34 * var(--rem));
  color: var(--gray-color);
  font-size: calc(22 * var(--rem));
  line-height: calc(52.8 / 22);
  letter-spacing: .125em;
}
.p-wrapping-box__name {
  margin-top: calc(31 * var(--rem));
  font-size: calc(30 * var(--rem));
  letter-spacing: .125em;
}
.p-wrapping-box__price {
  margin-top: calc(26 * var(--rem));
  font-family: var(--lato-font);
  font-size: calc(24 * var(--rem));
  letter-spacing: .1em;
}



/*=======================================
                    PC
========================================*/
@media (768px <= width) {
  .u-d-md {
    display: none !important;
  }
}


/*=======================================
                    SP
========================================*/
@media (width < 768px) {
  .u-d-lg {
    display: none !important;
  }
}