@charset "utf-8";

main a:hover {
  cursor: pointer;
  text-decoration: none;
}

#gift {
  color: #3d3027;
}

/* ------------------
        共通
------------------ */
.font-capitalize {
  text-transform: capitalize;
}

.common__title {
  color: #613c18;
  font-feature-settings: "palt";
  font-size: 4rem;
  line-height: 1;
  text-align: center;
}

.common__title--en {
  font-size: 7.2rem;
}

.common__catch {
  font-feature-settings: "palt";
  font-size: 2.6rem;
  line-height: 1.2;
}

.cart__btn,
.bcs {
  text-align: center;
  margin-top: 20px;
}

.wrapping-lp__btn {
  text-align: center;
  margin-top: 40px;
}

.detail__btn {
  text-align: center;
  margin-top: 29px;
}

.cart__btn a,
.wrapping-lp__btn a,
.detail__btn a {
  width: 210px;
  display: inline-block;
  background-color: #a18b4f;
  color: #fff;
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1.4rem;
  text-align: center;
  text-decoration: none;
  padding: 16px 0 18px;
  position: relative;
}

.bcs .bbg {
  display: inline-block;
  width: 165px;
  background: #FFF;
  border: 1px solid #a1976a;
  color: #a1976a;
  font-size: 1.4rem;
  line-height: 1.4rem;
  margin: 0px;
  padding: 16px 0 18px;
  text-align: center;
  text-decoration: none;
  position: relative;
}


.wrapping-lp__btn a {
  width: 300px;
  background-color: #B99747;
}

.cart__btn--s a,
.detail__btn a {
  width: 165px;
}

.cart__btn a svg,
.wrapping-lp__btn a svg,
.detail__btn a svg {
  font-size: 1rem;
  position: absolute;
  top: 50%;
  right: 7px;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

.obj {
  position: absolute;
}

/* ------------------
        kv
------------------ */
.kv-text__wrapper {
  width: 54vw;
  position: absolute;
  top: 4vw;
}

#gift .kv h1 {
  width: 100%;
  color: #3d3027;
  font-size: 4.2vw;
  position: relative;
  top: 0;
  right: 0;
  left: 0;
}

#gift .kv .kv-text {
  width: 100%;
  color: #3d3027;
  font-size: 1.3vw;
  line-height: 1.3;
  margin-top: 5.4vw;
  position: relative;
  top: 0;
  right: 0;
  left: 0;
}

/* lead */
.lead__inner {
  padding: 50px 0;
}

.nav-anchor__wrapper {
  margin-top: 0;
}

/* ------------------
    ランキング
------------------ */
.ranking {
  width: 100%;
  background: url(../../images/gift/20260416/bg_flower.jpg);
  background-repeat: repeat;
  background-size: 554px 842px;
  padding: 85px 0 80px;
  position: relative;
}

.ranking-slider {
  background-image: url(../../images/gift/20241118/frame_ranking.png);
}

#gift .ranking h2 {
  text-align: center;
}

.ranking-slider {
  max-width: 1110px;
  height: 409px;
  margin: 37px auto 0;
  background-size: cover;
  background-repeat: no-repeat;
}

.ranking__list {
  width: 915px;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  padding: 70px 0;
}

.ranking__item {
  width: 158px;
}

.ranking__item .img {
  position: relative;
}

.num {
  margin: 0px auto;
  padding: 0px;
  width: 30px;
  position: absolute;
  top: -24px;
  left: 0px;
}

.name-and-price {
  font-size: 1.4rem;
  text-align: center;
  margin-top: 15px;
  margin-top: 0;
}

.item-slider ul li .btn,
.item-slider ul li .bcs {
  margin: 0px;
  padding: 14px 0px 0px;
}

.item-slider ul li .btn a {
  margin: 0px;
  padding: 14px 0px;
  text-align: center;
  color: #FFF;
  font-size: 1.2rem;
  line-height: 1;
  text-decoration: none;
  position: relative;
  display: inline-block;
  background: #a18b4f;
  width: 150px;
}

.item-slider ul li .btn a span svg {
  margin: 0px;
  padding: 0px;
  display: inline-block;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  font-size: 1rem;
}

/* ------------------
        予算
------------------ */
.tab-area {
  width: 820px;
  display: flex;
  column-gap: 8px;
  margin: 42px auto 0;
  cursor: pointer;
}

.tab {
  width: calc(100%/4);
  background: -webkit-gradient(linear, left top, left bottom, from(#f4efe5), to(#ddd0b7));
  background: -webkit-linear-gradient(top, #f4efe5, #ddd0b7);
  background: -moz-linear-gradient(top, #f4efe5, #ddd0b7);
  background: -o-linear-gradient(top, #f4efe5, #ddd0b7);
  background: linear-gradient(#f4efe5, #ddd0b7);
  color: #372a22;
  font-size: 1.8rem;
  padding: 15px;
  text-align: center;
}

.tab.active {
  background: none;
  background-color: #372a22;
  color: #fff;
}

.panel {
  display: none;
  text-align: center;
}

.panel.active {
  display: block;
}

#gift .gift-price {
  padding-bottom: 0;
}

#gift .gift-price .gift-price-in {
  padding: 95px 0px 70px;
}

/* ------------------
オンライン
------------------ */
.other {
  background: #f4efe5 url(../../images/sp/gift/202010/line_bg_1_1.png) repeat-x;
  background-size: 15px auto;
  background-position: left 0px top 25px;
  position: relative;
  z-index: 0;
}

.other-bg {
  padding: 97px 0 110px;
}

.online-service__title {
  width: 50vw;
  font-size: 8rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-align: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.online-service__title--ja {
  display: block;
  font-size: 2.6rem;
  font-weight: 400;
}

.order-made-text {
  font-size: 1.6rem;
  margin-top: 30px;
}

.service__list {
  display: flex;
  column-gap: 51px;
  max-width: 1040px;
  margin: 63px auto 0;
}

.other__text {
  font-size: 2.2rem;
  line-height: 1.3;
  text-align: center;
}

.service-item__text {
  font-size: 1.4rem;
  line-height: 1.3;
  text-align: center;
  margin-top: 17px;
}

/* 追従アンカー */
.tracking-nav {
  width: 100%;
  background-color: #9a8954;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  opacity: 0;
  transition: all .8s ease;
}

.tracking-nav.show {
  top: 122px;
  opacity: 1;
}

.tracking-nav__list {
  display: flex;
  width: 996px;
  height: 45px;
  margin: 0 auto;
}

.tracking-nav__item {
  width: 166px;
  background-image: linear-gradient(#b0a071 10%, #96844f 50%, #867238 90%);
  border: 2px solid #756331;
  color: #fff;
  font-size: 1.3rem;
  letter-spacing: 0.01em;
  text-align: center;
  outline: 1px solid #fff;
  outline-offset: -3px;
  padding: 7px 0 20px;
}

.tracking-nav__item a {
  color: #fff;
  position: relative;
}

.tracking-nav__item a svg {
  font-size: 1rem;
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
}

@media screen and (max-width: 990px) {
  .tracking-nav.show {
    top: 89px;
  }
}

/* ギフトにおすすめ */
.kit-block {
  margin: 0px auto;
  padding: 65px 0px 0px;
  width: 1030px;
}

.kit-block ul {
  width: 940px;
  margin-top: 20px;
  position: relative;
  padding: 0;
}

.kit-block ul li {
  width: 190px;
  text-align: center;
  margin: 0 auto;
  /* padding-left: 30px; */
}

.kit-block ul li .img img {
  width: 170px;
  border-radius: 30px;
  margin: 0 auto;
}

.kit-block ul li .name {
  margin-top: 10px;
}

.kit-block .slick-prev svg {
  font-size: 3rem;
  text-decoration: none;
  position: absolute;
  top: 50%;
  left: 0px;
  transform: translateY(-50%);
}

.kit-block .slick-next svg {
  font-size: 3rem;
  text-decoration: none;
  position: absolute;
  top: 50%;
  right: 0px;
  transform: translateY(-50%);
}

.kit-block .slick-track {
  margin-left: 0;
  margin-right: 0;
}

.kit-block .slick-arrow.slick-prev {
  left: -30px;
}

.kit-block .slick-arrow.slick-next {
  right: -30px;
}

.kit-block .slick-arrow.slick-prev::after,
.kit-block .slick-arrow.slick-next::after {
  display: none;
}

.kit-block__title {
  width: 400px;
  margin: 0 auto;
  /* font-size: 3rem;
  text-align: center; */
}

.kit-block .price-slide {
  margin-left: 40px;
}

.ranking__list .name-and-price {
  font-size: 1.3rem;
  margin-top: 0;
}

/* 香り */
/* =========================
    アイテムラインナップ
========================= */
.fragrance {
  position: relative;
}

.fragrance__inner {
  padding: 102px 0 98px;
}

.gen-text__wrapper {
  display: flex;
  column-gap: 7px;
  justify-content: center;
  margin-top: 50px;
}

.gen__icon {
  line-height: 1;
}

.gen__text {
  color: #6186a2;
  font-feature-settings: "palt";
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1;
}

.graph__img {
  width: 799px;
  margin: 28px auto 0;
  position: relative;
  z-index: 10;
}

.js-open-fragrance {
  background: none;
  border: none;
  position: absolute;
}

.fragrance__btn {
  border-radius: 50px;
  font-feature-settings: "palt";
  font-size: 1.6rem;
  line-height: 1;
  box-shadow: 6px 6px #dfdaca;
  padding: 10px 0 12px;
}

.fragrance__btn::after {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 1px solid #3d3027;
  border-right: 1px solid #3d3027;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.fragrance-type__btn-text {
  font-feature-settings: "palt";
  font-weight: 600;
}

.fragrance-type__wrapper {
  display: flex;
  align-items: center;
  column-gap: 4px;
  justify-content: center;
  margin-top: 5px;
}

.fragrance-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, .6);
  display: none;
}

.fragrance-modal__inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 30px;
}

.fragrance-modal__close {
  width: 30px;
  height: 30px;
  background: none;
  border: none;
  position: absolute;
  top: 21px;
  right: 23px;
  z-index: 100000;
}

.fragrance-modal__close::before,
.fragrance-modal__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  /* 棒の幅（太さ） */
  height: 28px;
  /* 棒の高さ */
  background: #3d3027;
}

.fragrance-modal__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.fragrance-modal__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.fragrance-slider .slick-dots {
  margin-top: 18px;
}

.fragrance-slider .slick-dots>li>button::before {
  width: 8px;
  height: 8px;
  background: #faf3e4;
  opacity: 0.4;
}

.fragrance-slider .slick-dots>li.slick-active>button::before {
  opacity: 1;
}

.slick-arrow.slick-prev::after,
.slick-arrow.slick-next::after {
  display: none;
}

.fragrance-slider .fragrance-prev,
.fragrance-slider .fragrance-next {
  background-repeat: no-repeat;
  background-position: 0px 0px;
  background-size: 100% 100%;
  transition: unset;
  border-width: 0px;
  border-style: none;
  opacity: 1;
}

.fragrance-slider .fragrance-prev {
  left: -18px;
  background-image: url(../../images/gift/20260416/prev.svg);
}

.fragrance-slider .fragrance-next {
  right: -18px;
  background-image: url(../../images/gift/20260416/next.svg);
}

/* .fragrance__list .slick-list {
  overflow: visible;
} */

/* .fragrance__list .slick-track {
  width: 473px !important;
} */

.fragrance__list {
  width: 473px;
  height: 400px;
  background-color: transparent;
}

.fragrance__item {
  width: 473px !important;
  height: 430px;
  background-color: #fff;
  border-radius: 30px;
  margin: 0 auto;
  text-align: center;
  padding: 50px 0 38px;
  position: relative;
  overflow: hidden;
}

.fragrance-name__title {
  font-feature-settings: "palt";
  font-size: 3.8rem;
  line-height: 1;
}

.recommend__text {
  width: 181px;
  background-color: #6186a2;
  border-radius: 50px;
  color: #fff;
  font-feature-settings: "palt";
  font-size: 1.8rem;
  line-height: 1;
  margin: 22px auto 0;
  padding: 12px 0;
}

.type__text {
  width: fit-content;
  font-feature-settings: "palt";
  font-size: 2.8rem;
  line-height: 1;
  margin: 29px auto 0;
  position: relative;
}

.type__text::before,
.type__text::after {
  content: "";
  width: 35px;
  height: 9px;
  background-repeat: no-repeat;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}

.type__text::before {
  left: -47px;
}

.type__text::after {
  right: -47px;
}

.fragrance-detail__text {
  font-feature-settings: "palt";
  font-size: 1.8rem;
  line-height: 1.4;
  margin-top: 17px;
}

.fragrance-detail__btn {
  width: 210px;
  margin: 20px auto 0;
  position: relative;
}

.fragrance-detail__btn::after {
  content: "";
  width: 6px;
  height: 6px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.fragrance-detail__btn a {
  display: inline-block;
  color: #fff;
  font-feature-settings: "palt";
  font-size: 1.6rem;
  line-height: 1;
  padding: 20px 0 20px;
}

.fragrance__obj {
  z-index: 50;
}

.fra__line {
  width: 326px;
  line-height: 1;
  margin: 29px auto 0;
}

/* ホワイトティー */
.fragrance__btn--wt {
  width: 229px;
  background-color: #dcedd9;
  top: 56px;
  left: 128px;
}

.fragrance-type__btn-text--wt {
  color: #509072;
}

.fragrance-name__title--wt,
.type__text--wt {
  color: #39927c;
}

.type__text--wt::before {
  background-image: url(../../images/gift/20260416/obj_title_wt_l.svg);
}

.type__text--wt::after {
  background-image: url(../../images/gift/20260416/obj_title_wt_r.svg);
}

.fragrance-detail__btn--wt {
  background-color: #8dc184;
}

.wt__obj--l {
  width: 132px;
  top: -37px;
  left: -22px;
}

.wt__obj--r {
  width: 76px;
  bottom: 17px;
  right: -32px;
}

/* ジャスミン */
.fragrance__btn--dj {
  width: 223px;
  background-color: #daecf2;
  top: 56px;
  right: 164px;
}

.fragrance-type__btn-text--dj {
  color: #4199b7;
}

.fragrance-name__title--dj,
.type__text--dj {
  color: #44b7b4;
}

.type__text--dj::before {
  background-image: url(../../images/gift/20260416/obj_title_dj_l.svg);
}

.type__text--dj::after {
  background-image: url(../../images/gift/20260416/obj_title_dj_r.svg);
}

.fragrance-detail__btn--dj {
  background-color: #86bdcf;
}

.dj__obj--l {
  width: 132px;
  top: -12px;
  left: -52px;
}

.dj__obj--r {
  width: 134px;
  bottom: 42px;
  right: -65px;
}

/* グリーン・ローズ */
.fragrance__btn--gr {
  width: 214px;
  background-color: #ffdce5;
  top: 137px;
  left: 137px;
}

.fragrance-type__btn-text--gr {
  color: #eb6487;
}

.fragrance-name__title--gr,
.type__text--gr {
  color: #ef4e78;
}

.type__text--gr::before {
  background-image: url(../../images/gift/20260416/obj_title_gr_l.svg);
}

.type__text--gr::after {
  background-image: url(../../images/gift/20260416/obj_title_gr_r.svg);
}

.fragrance-detail__btn--gr {
  background-color: #f4a3b8;
}

.gr__obj--l {
  width: 118px;
  top: -20px;
  left: -40px;
}

.gr__obj--r {
  width: 114px;
  right: -48px;
  bottom: 30px;
}

/* パチュリ・ラベンダー・バニラ */
.fragrance__btn--plv {
  width: 211px;
  background-color: #ede3f7;
  bottom: 108px;
  left: 140px;
}

.fragrance-type__btn-text--plv {
  color: #8958ba;
}

.fragrance-name__title--plv,
.type__text--plv {
  color: #865498;
}

.type__text--plv::before {
  background-image: url(../../images/gift/20260416/obj_title_plv_l.svg);
}

.type__text--plv::after {
  background-image: url(../../images/gift/20260416/obj_title_plv_r.svg);
}

.fragrance-detail__btn--plv {
  background-color: #bf9ecc;
}

.plv__obj--l {
  width: 225px;
  top: -20px;
  left: -110px;
}

.plv__obj--r {
  width: 133px;
  right: -53px;
  bottom: 56px;
}

/* ローズ・ティー */
.fragrance__btn--rt {
  width: 191px;
  background-color: #f7d2ca;
  bottom: 122px;
  right: 178px;
}

.fragrance-type__btn-text--rt {
  color: #e65536;
}

.fragrance-name__title--rt,
.type__text--rt {
  color: #dc5656;
}

.type__text--rt::before {
  background-image: url(../../images/gift/20260416/obj_title_rt_l.svg);
}

.type__text--rt::after {
  background-image: url(../../images/gift/20260416/obj_title_rt_r.svg);
}

.fragrance-detail__btn--rt {
  background-color: #f09898;
}

.rt__obj--l {
  width: 151px;
  top: -20px;
  left: -40px;
}

.rt__obj--r {
  width: 132px;
  right: -48px;
  bottom: 30px;
}

/* TOKYO */
.fragrance__btn--tk {
  width: 189px;
  background-color: #ffdcf4;
  top: 137px;
  right: 181px;
}

.fragrance-type__btn-text--tk {
  color: #e366dc;
}

.fragrance-name__title--tk,
.type__text--tk {
  color: #ef4292;
}

.type__text--tk::before {
  background-image: url(../../images/gift/20260416/obj_title_tk_l.svg);
}

.type__text--tk::after {
  background-image: url(../../images/gift/20260416/obj_title_tk_r.svg);
}

.fragrance-detail__btn--tk {
  background-color: #f098d2;
}

.tk__obj--l {
  width: 113px;
  top: -20px;
  left: -40px;
}

.tk__obj--r {
  width: 111px;
  right: -35px;
  bottom: 30px;
}

.wrapping-service,
.service-contents {
  background-image: url(../../images/gift/20260416/bg_flower.jpg);
  background-repeat: repeat;
  background-size: 554px 842px;
}

.wrapping-service__inner {
  padding: 80px 0 96px;
}

.wrapping-accordion {
  width: 849px;
  margin: 0 auto;
}

.wrapping-service__title {
  width: 100%;
  background: none;
  border: none;
  color: #613c18;
  cursor: pointer;
  font-feature-settings: "palt";
  font-size: 32px;
  line-height: 1;
  text-align: center;
  padding-top: 22px;
  position: relative;
}

.accordion__item {
  border-top: 1px solid #613c18;
}

.accordion__item:not(:first-child) {
  margin-top: 65px;
}

.accordion__header::after {
  content: "+";
  color: #613c18;
  position: absolute;
  right: 16px;
}

.accordion__item.active .accordion__header::after {
  content: "−";
}

.accordion__content {
  display: none;
}

.wrapping-accordion__content {
  margin-top: 55px;
}

.wrapping__label {
  width: 414px;
  margin: 55px auto 0;
}

.wrapping__wrapper {
  display: flex;
  column-gap: 30px;
  justify-content: center;
  margin-top: 31px;
}

.wrapping__img {
  width: 285px;
}

.paper-bag-detail__wrapper {
  width: 600px;
  height: 212px;
  background: linear-gradient(to bottom, #fff 0%, #f5f0e9 100%);
  margin: 76px auto 0;
  position: relative;
}

.paper-bag__img {
  width: 139px;
  position: absolute;
  top: -36px;
  right: 96px;
}

.paper-bag__text {
  font-feature-settings: "palt";
  font-size: 2rem;
  line-height: 1.8;
  padding: 81px 0 0 119px;
}

.paper-bag__obj--l {
  top: -10px;
  left: 3px;
}

.paper-bag__obj--r {
  bottom: 20px;
  right: -13px;
}

.order-made__img {
  width: 378px;
}

.order-made__wrapper {
  display: flex;
  align-items: center;
  column-gap: 35px;
  justify-content: center;
  font-size: 1.6rem;
  line-height: 1.6;
  text-align: center;
}

/* ギフトを選ぶアンカーリンク */
.gift-select-anchor {
  position: relative;
}

.gift-select-anchor__inner {
  padding: 64px 0 83px;
}

.nav-anchor__wrapper--gift-select {
  margin-top: 68px;
}

.nav-anchor__list {
  display: flex;
  justify-content: center;
  column-gap: 12px;
}

.nav-anchor__item {
  width: 193px;
  height: 75px;
  background-image: url(../../images/gift/20260416/bg_nav.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  text-align: center;
  position: relative;
}

.nav-anchor__link {
  width: 100%;
  height: 100%;
  display: block;
  color: #fff;
  font-feature-settings: "palt";
  font-size: 1.6rem;
  letter-spacing: -0.025em;
  padding-top: 14px;
}

.gift-select-anchor__obj--l {
  left: 0;
}

.gift-select-anchor__obj--r {
  right: 0;
}

.service-contents__inner {
  padding: 105px 0 109px;
}

.service-contents__wrapper {
  display: flex;
  column-gap: 58px;
  justify-content: center;
  margin-top: 56px;
}

.banner__img {
  width: 501px;
  margin: 0 auto;
}

.gf__img {
  position: relative;
}

.gf__obj1 {
  top: -2px;
  right: 0;
}

.gf__obj2 {
  left: -27px;
  bottom: -11px;
}

.gf__obj3 {
  right: 0;
  bottom: -40px;
}

/* 刻印サービス */
.engraving-servise {
  background-color: #faf7f4;
}

.engraving-servise__inner {
  padding: 88px 0 91px;
}

.es__img {
  width: 706px;
  margin: 0 auto;
}

.long__line {
  width: 930px;
  line-height: 1;
  margin: 56px auto 39px;
}