@charset "UTF-8";



/*all----------------------------*/

html {

  font-size: 62.5%;

  -ms-overflow-style: none;

  scrollbar-width: none;

}



html::-webkit-scrollbar {

  display:none;

}



body {

  -webkit-tap-highlight-color: transparent;

}



#Wrap {

  width: auto;

}



#FooterWrap {

  position: relative;

  background: #fff;

  z-index: 2;

}



:root {

  --font_regular: "itc-avant-garde-gothic-pro", "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN", "ヒラギノ角ゴ Pro", 'Noto Sans JP', "メイリオ", "Meiryo", sans-serif;

  --font_jpn: "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ ProN", "ヒラギノ角ゴ Pro", 'Noto Sans JP', "メイリオ", "Meiryo", sans-serif;

  --font_ttl: "condor-condensed", sans-serif;

  --color_regular: #050100;

  --color_01: #DE983B;

  --color_02: #E5B16D;

  --color_03: #9CAF93;

  --color_04: #C4D6BB;

  --color_05: #EA5040;

  --color_06: #F27C70;

  --color_bg: #FFFCF9;

}



.LP_page * {

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  line-height: 1;

  letter-spacing: .1em;

}



.LP_page {

  width: 100%;

  font-family: var(--font_regular);

  color: var(--color_regular);

  overflow-x: clip;

  opacity: 0;

  transition: opacity 1s;

}



.LP_page_inner {

  background: var(--color_bg);

}



.LP_page.active {

  opacity: 1;

}



.LP_page a {

  display: block;

}



.LP_page a:hover {

  opacity: 1 !important;

}



.LP_page img {

  width: 100%;

  height: auto;

  vertical-align: bottom;

}



.LP_page .activePoint,

.LP_page .activeDelay {



}



.LP_page .activeDelay.delay1 {

  transition-delay: .2s;

}



.LP_page .activeDelay.delay2 {

  transition-delay: .4s;

}



.LP_page .activeDelay.delay3 {

  transition-delay: .6s;

}



.LP_page .activeDelay.delay4 {

  transition-delay: .8s;

}



.LP_page .activeDelay.delay5 {

  transition-delay: 1s;

}



.LP_page .activePoint.active,

.LP_page .activePoint.active > .activeDelay {

}

/*----------------------------all*/



/*heading------------------------*/

.heading_area {

  padding-bottom: calc(50 * (60rem / 390));

}



.main_ttl {

  margin-bottom: calc(50 * (60rem / 390));

  box-shadow: 0 calc(10 * (60rem / 390)) calc(10 * (60rem / 390)) rgba(80, 59, 39, .1);

}



.main_lead_wrap {

  position: relative;

  width: calc(314 * (60rem / 390));

  height: calc(360 * (60rem / 390));

  margin: 0 auto;

  padding-top: calc(100 * (60rem / 390));

  text-align: center;

  opacity: 0;

  filter: blur(5px);

  transition: opacity 1s, filter 2s;

}



.main_lead_outside.active .main_lead_wrap {

  opacity: 1;

  filter: unset;

}



.catch {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  font-size: calc(16 * (60rem / 390));

  font-weight: 600;

  writing-mode: vertical-lr;

  white-space: nowrap;

}



.catch span {

  position: absolute;

  letter-spacing: .2em;

  transition: left 1.5s, right 1.5s, top 1.5s, bottom 1.5s, translate 1.5s, margin 1.5s, right 1.5s;

}



.main_lead_outside.active .catch span {

  transition-delay: 2s;

}



.catch span:nth-of-type(1) {

  top: 8%;

  left: 50%;

  translate: -50% 0;

}



.main_lead_outside.active .catch span:nth-of-type(1) {

  top: 0;

  left: 100%;

  translate: 0 0;

  margin-left: calc(10 * (60rem / 390));

}



.catch span:nth-of-type(2) {

  bottom: 8%;

  right: 45%;

  translate: -50% 0;

}



.main_lead_outside.active .catch span:nth-of-type(2) {

  bottom: 0;

  right: 100%;

  translate: 0 0;

  margin-right: calc(10 * (60rem / 390));

}



.pathFrame {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  overflow: visible;

  pointer-events: none;

}



.pathFrame path {

  stroke-dasharray: 1100;

  stroke-dashoffset: 1100;

  stroke-width: calc(1 * (60rem / 390));

  fill: none;

  stroke: var(--color_regular);

}



@keyframes line-stroke {

  0% {

    stroke-dashoffset: 1100;

  }

  100% {

    stroke-dashoffset: 0;

  }

}



.main_lead_outside.active .pathFrame path {

  animation: line-stroke 1s 3s linear forwards;

}



.main_lead_wrap h2 {

  opacity: 0;

  margin-bottom: calc(30 * (60rem / 390));

  font-weight: 700;

  transition: opacity .8s, filter 1s;

  filter: blur(5px);

  transition-delay: 4.2s;

}



.main_lead_outside.active .main_lead_wrap h2 {

  opacity: 1;

  filter: unset

}



.main_lead_wrap h2 .txt_eng {

  font-family: var(--font_ttl);

  font-size: calc(32 * (60rem / 390));

}



.typewriting {

  opacity: 0;

}



.typewriting.active {

  opacity: 1;

}



.for_spanAddition .each_txt {

  display: inline-block;

  opacity: 0;

  translate: 0 calc(12 * (60rem / 390));

  transition: opacity 1s, translate .5s;

}



.for_spanAddition .each_txt.active {

  opacity: 1;

  translate: 0 0;

}



.main_lead_wrap h2 .txt_S {

  display: block;

  margin-top: calc(10 * (60rem / 390));

  font-size: calc(14 * (60rem / 390));

  letter-spacing: .4em;

}



.main_lead {

  opacity: 0;

  font-size: calc(13 * (60rem / 390));

  font-weight: 600;

  line-height: 2;

  transition: opacity 1s;

  transition-delay: 4.8s;

}



.main_lead_outside.active .main_lead {

  opacity: 1;

}



.accordion_outside {

  margin-top: calc(15 * (60rem / 390));

  opacity: 0;

  transition: .5s;

}



.main_lead_outside.active .accordion_outside {

  transition-delay: 5s;

  opacity: 1;

  pointer-events: auto;

}



.accordion_wrap {

  display: grid;

  grid-template-rows: 0fr;

  transition: grid-template-rows .5s;

}



.open .accordion_wrap {

  grid-template-rows: 1fr;

}



.accordion_inner {

  overflow: hidden;

  transition: padding .5s;

}



.open .accordion_inner {

  padding: calc(25 * (60rem / 390)) 0;

}



.sub_lead p {

  font-size: calc(14 * (60rem / 390));

  line-height: 2;

  text-align: center;

}



.sub_lead p:nth-of-type(n+2) {

  margin-top: calc(25 * (60rem / 390));

}



.accordion_btn {

  position: relative;

  width: fit-content;

  margin: 0 auto;

  padding-right: calc(15 * (60rem / 390));

  cursor: pointer;

}



.accordion_btn::before,

.accordion_btn::after {

  position: absolute;

  top: 50%;

  right: 0;

  translate: 0 -50%;

  width: calc(10 * (60rem / 390));

  height: calc(1.5 * (60rem / 390));

  border-radius: calc(10 * (60rem / 390));

  background: var(--color_regular);

  content: "";

  transition: rotate .5s;

}



.accordion_btn::after {

  rotate: 90deg;

}



.open .accordion_btn::before {

  rotate: 225deg;

}



.open .accordion_btn::after {

  rotate: 315deg;

}



.accordion_btn span {

  letter-spacing: .05em;

}



.accordion_btn .to_open,

.open .accordion_btn .to_close {

  display: block;

}



.accordion_btn .to_close,

.open .accordion_btn .to_open {

  display: none;

}

/*------------------------heading*/



/*feature------------------------*/

.mainContent_area {

  padding: calc(40 * (60rem / 390)) 0 calc(70 * (60rem / 390));

  background: var(--color_bg);

  box-shadow: 0 calc(-10 * (60rem / 390)) calc(10 * (60rem / 390)) rgba(80, 59, 39, .1);

}



.feature_list {

  padding-bottom: calc(45 * (60rem / 390));

  overflow: hidden;

}



.feature_list .slick-list {

  overflow: visible;

}



.each_feature {

  margin-left: calc(15 * (60rem / 390));

}



.each_feature a {

  position: relative;

  width: calc(330 * (60rem / 390));

  height: calc(300 * (60rem / 390));

  border-radius: calc(10 * (60rem / 390));

  box-shadow: calc(3 * (60rem / 390)) calc(3 * (60rem / 390)) 0 rgba(0, 0, 0, .1);

  overflow: clip;

}



.each_feature a::before {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: calc(90 * (60rem / 390));

  background: linear-gradient(transparent, #000);

  opacity: .4;

  content: "";

  pointer-events: none;

}



.each_feature img {

  height: 100%;

  object-fit: cover;

}



.each_feature p {

  position: absolute;

  bottom: 0;

  left: 0;

  bottom: 0;

  margin: 0 0 calc(10 * (60rem / 390)) calc(15 * (60rem / 390));

  font-size: calc(15 * (60rem / 390));

  font-weight: 600;

  line-height: 1.5;

  white-space: nowrap;

  color: #fff;

  filter: drop-shadow(0 0 calc(5 * (60rem / 390)) rgba(0, 0, 0, .3));

}



.feature_list .slick-arrow {

  z-index: 2;

  top: auto;

  bottom: 0;

  left: auto;

  right: 0;

  width: calc(30 * (60rem / 390));

  height: calc(30 * (60rem / 390));

  margin-top: calc(15 * (60rem / 390));

  border-radius: 50%;

  background: var(--color_01);

  transform: unset;

}



.feature_list .slick-next {

  margin-right: calc(15 * (60rem / 390));

}



.feature_list .slick-prev {

  margin-right: calc(55 * (60rem / 390));

}



.feature_list .slick-arrow::before {

  top: 50%;

  left: 50%;

  translate: -50% -50%;

  position: absolute;

  width: calc(15 * (60rem / 390));

  height: calc(15 * (60rem / 390));

  background: url(../img/arrow_001.svg) center center / cover no-repeat;

  opacity: 1;

  content: "";

}



.feature_list .slick-prev::before {

  scale: -1 1;

}



/*------------------------feature*/



/*ranking------------------------*/

.each_area {

  padding-top: calc(20 * (60rem / 390));

}



.area_ttl {

  font-weight: 700;

  margin: 0 0 calc(15 * (60rem / 390)) calc(15 * (60rem / 390));

}



.area_ttl .txt_eng {

  font-family: var(--font_ttl);

  font-size: calc(40 * (60rem / 390));

}



.area_ttl .txt_S {

  margin-left: calc(15 * (60rem / 390));

  font-size: calc(14 * (60rem / 390));

  font-weight: 500;

  opacity: 0;

  transition: opacity 1s;

  transition-delay: 1s;

}



.active.area_ttl .txt_S {

  opacity: 1;

}



.ranking_area {

  margin-top: calc(40 * (60rem / 390));

}



.item_list_wrap {

  position: relative;

}



.scrlBar_wrap {

  position: absolute;

  bottom: 0;

  left: 50%;

  translate: -50% 0;

  width: calc(290 * (60rem / 390));

  height: calc(3 * (60rem / 390));

  margin-bottom: calc(30 * (60rem / 390));

  border-radius: calc(100 * (60rem / 390));

  background: #fff;

  box-shadow: inset calc(1 * (60rem / 390)) calc(1 * (60rem / 390)) calc(2 * (60rem / 390)) rgba(0, 0, 0, .1);

  pointer-events: none;

}



.scrlBar_wrap .scrlBar {

  width: calc(126 * (60rem / 390));

  height: 100%;

  border-radius: calc(100 * (60rem / 390));

  background: var(--color_regular);

}



.item_list__inner {

  display: flex;

  gap: calc(25 * (60rem / 390));

  padding: 0 calc(15 * (60rem / 390)) calc(65 * (60rem / 390));

  overflow: scroll;

  -ms-overflow-style: none;

  scrollbar-width: none;

}



.item_list__inner::-webkit-scrollbar {

  display: none;

}



.item_list__item a {

  position: relative;

  width: calc(240 * (60rem / 390));

  height: 100%;

  padding-bottom: calc(25 * (60rem / 390));

}



.item_list__img {

  height: calc(240 * (60rem / 390));

  margin-bottom: calc(12 * (60rem / 390));

  overflow: hidden;

  box-shadow: calc(1 * (60rem / 390)) calc(1 * (60rem / 390)) calc(3 * (60rem / 390)) rgba(0, 0, 0, .05);

}



.item_list__cat {

  width: fit-content;

  margin-bottom: calc(5 * (60rem / 390));

  padding: calc(3 * (60rem / 390)) calc(10 * (60rem / 390));

  border: solid calc(1 * (60rem / 390));

  border-radius: calc(2 * (60rem / 390));

  font-size: calc(12 * (60rem / 390));

  font-weight: 600;

}



.item_list__item .icn_rank {

  position: absolute;

  top: 0;

  left: 0;

  display: grid;

  place-items: center;

  width: calc(50 * (60rem / 390));

  height: calc(50 * (60rem / 390));

  background: rgba(255, 255, 255, .5);

  box-shadow: calc(2 * (60rem / 390)) calc(2 * (60rem / 390)) calc(2 * (60rem / 390)) rgba(0, 0, 0, .1);

  font-family: var(--font_ttl);

  font-size: calc(30 * (60rem / 390));

  font-weight: 700;

}



.item_rank1 .icn_rank,

.item_rank2 .icn_rank,

.item_rank3 .icn_rank {

  height: calc(40 * (60rem / 390));

  color: #fff;

  box-shadow: unset

}



.item_rank1 .icn_rank {

  background: #CB8D01;

}



.item_rank2 .icn_rank {

  background: #B7B7B7;

}



.item_rank3 .icn_rank {

  background: #6F3F10;

}



.item_rank1 .icn_rank::before,

.item_rank2 .icn_rank::before,

.item_rank3 .icn_rank::before {

  position: absolute;

  top: 100%;

  left: 0;

  margin-top: calc(-1 * (60rem / 390));

  border-top: solid calc(6 * (60rem / 390));

  border-left: solid calc(14 * (60rem / 390));

  border-bottom: solid calc(6 * (60rem / 390)) transparent;

  border-right: solid calc(14 * (60rem / 390)) transparent;

  content: "";

}



.item_rank1 .icn_rank::before {

  border-top-color: #CB8D01;

  border-left-color: #CB8D01;

}



.item_rank2 .icn_rank::before {

  border-top-color: #B7B7B7;

  border-left-color: #B7B7B7;

}



.item_rank3 .icn_rank::before {

  border-top-color: #6F3F10;

  border-left-color: #6F3F10;

}



.item_rank1 .icn_rank::after,

.item_rank2 .icn_rank::after,

.item_rank3 .icn_rank::after {

  position: absolute;

  top: 100%;

  right: 0;

  margin-top: calc(-1 * (60rem / 390));

  border-top: solid calc(6 * (60rem / 390)) red;

  border-right: solid calc(14 * (60rem / 390)) red;

  border-bottom: solid calc(6 * (60rem / 390)) transparent;

  border-left: solid calc(14 * (60rem / 390)) transparent;

  content: "";

}



.item_rank1 .icn_rank::after {

  border-top-color: #CB8D01;

  border-right-color: #CB8D01;

}



.item_rank2 .icn_rank::after {

  border-top-color: #B7B7B7;

  border-right-color: #B7B7B7;

}



.item_rank3 .icn_rank::after {

  border-top-color: #6F3F10;

  border-right-color: #6F3F10;

}



.ranking_area .item_list__cat {

  border-color: var(--color_01);

  color: var(--color_01);

}



.item_list__title {

  font-feature-settings: "palt";

  font-size: calc(15 * (60rem / 390));

  line-height: 1.5;

  letter-spacing: .15em;

}



.item_list__price {

  position: absolute;

  bottom: 0;

  left: 0;

  font-size: calc(15 * (60rem / 390));

  font-weight: 500;

}



.item_list__price span {

  letter-spacing: .05em;

}



.item_list__price .txt_tax {

  font-family: var(--font_jpn);

  font-size: calc(10 * (60rem / 390));

  font-weight: 400;

}



.item_list__link {

  position: absolute;

  top: 0;

  right: 0;

  display: flex;

  align-items: center;

  width: calc(100 * (60rem / 390));

  height: calc(28 * (60rem / 390));

  margin: calc(220 * (60rem / 390)) calc(-10 * (60rem / 390)) 0 0;

  padding-left: calc(15 * (60rem / 390));

  border-radius: calc(100 * (60rem / 390));

  font-size: calc(13 * (60rem / 390));

}



.item_list__link::before {

  position: absolute;

  top: 50%;

  right: 0;

  translate: 0 -50%;

  width: calc(14 * (60rem / 390));

  height: calc(14 * (60rem / 390));

  margin-right: calc(10 * (60rem / 390));

  background: url(../img/arrow_001.svg) center center / cover no-repeat;

  content: "";

  transition: margin .3s;

}



.item_list__link:hover::before {

  margin-right: calc(5 * (60rem / 390));

}



.ranking_area .item_list__link {

  background: var(--color_02);

}



.item_list__review,

.item_list__cicon,

.soldout {

  display: none;

}



/*------------------------ranking*/



/*Pick up------------------------*/

.pickup_area {

  margin-top: calc(30 * (60rem / 390));

}



.pickup_area .item_list__cat {

  border-color: var(--color_03);

  color: var(--color_03);

}



.pickup_area .item_list__item .icn_rank {

  display: none;

}



.pickup_area .item_list__link {

  background: var(--color_04);

}

/*------------------------Pick up*/



/*gift---------------------------*/

.gift_area {

  margin-top: calc(40 * (60rem / 390));

}



.gift_list li {

  position: relative;

  width: calc(350 * (60rem / 390));

  height: calc(164 * (60rem / 390));

  overflow: clip;

  box-shadow: inset calc(3 * (60rem / 390)) calc(5 * (60rem / 390)) calc(5 * (60rem / 390)) rgba(0, 0, 0, .4);

  background-position: center center;

  background-size: cover;

  background-repeat: no-repeat;

  cursor: pointer;

}



.gift_list li:nth-of-type(odd) {

  border-radius: 0 calc(200 * (60rem / 390)) calc(200 * (60rem / 390)) 0;

  margin-left: calc(-8 * (60rem / 390));

}



.gift_list li:nth-of-type(even) {

  margin-left: auto;

  margin-right: calc(-8 * (60rem / 390));

  border-radius: calc(200 * (60rem / 390)) 0 0 calc(200 * (60rem / 390));

}



.gift_list li::before {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 50%;

  background: linear-gradient(transparent, #000);

  opacity: .3;

  content: "";

  pointer-events: none;

}



.gift_list li:nth-of-type(n+2) {

  margin-top: calc(15 * (60rem / 390));

}



.gift_list li h4 {

  position: absolute;

  bottom: 0;

  margin-bottom: calc(5 * (60rem / 390));

  font-size: calc(13 * (60rem / 390));

  line-height: 1.3;

  font-weight: 600;

  color: #fff;

}



.gift_list li:nth-of-type(odd) h4 {

  left: 0;

  margin-left: calc(20 * (60rem / 390));

}



.gift_list li:nth-of-type(even) h4 {

  right: 0;

  margin-right: calc(20 * (60rem / 390));

}



.gift_list li .btn_opan {

  position: absolute;

  bottom: 0;

  width: calc(50 * (60rem / 390));

  height: calc(50 * (60rem / 390));

  margin-bottom: calc(20 * (60rem / 390));

}



.gift_list li:nth-of-type(odd) .btn_opan {

  right: 0;

  margin-right: calc(40 * (60rem / 390));

}



.gift_list li:nth-of-type(even) .btn_opan {

  left: 0;

  margin-left: calc(40 * (60rem / 390));

}



.gift_list li .btn_opan::before {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  border-radius: 50%;

  background: #fff;

  box-shadow: 0 calc(3 * (60rem / 390)) calc(6 * (60rem / 390)) rgba(0, 0, 0, .16);

  content: "";

  animation: circle 3s infinite;

}



@keyframes circle {

  0% {

    scale: 1;

  }



  50% {

    scale: .85;

  }



  100% {

    scale: 1;

  }

}



.gift_list li .btn_opan span::before,

.gift_list li .btn_opan span::after {

  position: absolute;

  top: 50%;

  left: 50%;

  translate: -50% -50%;

  width: calc(16 * (60rem / 390));

  height: calc(2 * (60rem / 390));

  border-radius: calc(10 * (60rem / 390));

  background: var(--color_regular);

  content: "";

  transition: rotate .3s;

}



.gift_list li .btn_opan span::after {

  rotate: 90deg;

}



.gift_list li:hover .btn_opan span::before {

  rotate: 90deg;

}



.gift_list li:hover .btn_opan span::after {

  rotate: 180deg;

}





body.no_scroll {

  height: 100vh;

  overflow: hidden;

}



#HeaderWrap.hidden {

  opacity: 0;

  pointer-events: none;

}



.modal_outside.hidden {

  opacity: 0;

  pointer-events: none;

  overflow-y: auto;

}



.modal_outside {

  position: fixed;

  z-index: 1000;

  top: 0;

  left: 50%;

  translate: -50% 0;

  display: flex;

  align-items: center;

  width: 100%;

  height: 100%;

  transition: opacity .5s;

  overflow-y: scroll;

  -ms-overflow-style: none;

  scrollbar-width: none;

}



.modal_outside::-webkit-scrollbar {

  display:none;

}



.modal_outside::before {

  position: absolute;

  z-index: -1;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(255, 252, 249, .9);

  backdrop-filter: blur(5px);

  -webkit-backdrop-filter: blur(5px);

  content: "";

}



.modal_overlay {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}



.modal_outside input {

  display: none;

}



.modal_wrap {

  display: block;

  width: 100%;

  margin: 0 auto;

  max-height: 100%;

  padding: calc(50 * (60rem / 390)) 0;

  overflow-y: scroll;

  -ms-overflow-style: none;

  scrollbar-width: none;

}



.modal_wrap::-webkit-scrollbar {

  display:none;

}



.modal_inner {

  position: relative;

}



.btn_modalClose {

  position: fixed;

  z-index: 2;

  width: calc(32 * (60rem / 390));

  height: calc(32 * (60rem / 390));

  margin: calc(-35 * (60rem / 390)) 0 0 calc(340 * (60rem / 390));

  rotate: 45deg;

  border: none;

  background: none;

  cursor: pointer;

  transition: rotate .3s;

}



.btn_modalClose:hover {

  rotate: 135deg;

}



.btn_modalClose::before,

.btn_modalClose::after {

  position: absolute;

  top: 0;

  left: 50%;

  translate: -50% 0;

  width: calc(2 * (60rem / 390));

  border-radius: calc(100 * (60rem / 390));

  height: 100%;

  background: var(--color_regular);

  content: "";

}



.btn_modalClose::before {

  rotate: 90deg;

}



.thumbnail_list {

  display: flex;

  justify-content: center;

  gap: calc(8 * (60rem / 390));

  margin-bottom: calc(20 * (60rem / 390));

}



.thumbnail_list li input {

  display: none;

}



.thumbnail_list li label {

  position: relative;

  display: block;

  width: calc(50 * (60rem / 390));

  height: calc(50 * (60rem / 390));

  border-radius: 50%;

  overflow: clip;

  cursor: pointer;

}



.thumbnail_list li label::before {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  border-radius: 50%;

  border: solid calc(1.5 * (60rem / 390)) var(--color_05);

  box-sizing: border-box;

  content: "";

  pointer-events: none;

  opacity: 0;

  transition: opacity .3s;

}



.thumbnail_list li.selected label::before {

  opacity: 1;

}



.gift_area .item_list .each_item {

  width: calc(330 * (60rem / 390));

  margin-left: calc(15 * (60rem / 390));

}



.gift_area .item_list .each_item .item_img {

  margin-bottom: calc(-14 * (60rem / 390));

}



.gift_area .item_list .each_item .item_img a {

  height: calc(330 * (60rem / 390));

  border-radius: calc(70 * (60rem / 390));

  overflow: clip;

}



.gift_area .item_list .each_item .item_img a img {

  height: 100%;

  object-fit: cover;

}



.gift_area .item_list .each_item .txt_wrap {

  padding: 0 calc(15 * (60rem / 390));

}



.gift_area .item_list .each_item .item_link {

  position: relative;

  display: flex;

  align-items: center;

  width: calc(100 * (60rem / 390));

  height: calc(28 * (60rem / 390));

  margin: 0 auto calc(15 * (60rem / 390));

  padding-left: calc(15 * (60rem / 390));

  border-radius: calc(100 * (60rem / 390));

  background: var(--color_06);

  font-size: calc(13 * (60rem / 390));

}



.gift_area .item_list .each_item .item_link::before {

  position: absolute;

  top: 50%;

  right: 0;

  translate: 0 -50%;

  width: calc(14 * (60rem / 390));

  height: calc(14 * (60rem / 390));

  margin-right: calc(10 * (60rem / 390));

  background: url(../img/arrow_001.svg) center center / cover no-repeat;

  content: "";

  transition: margin .3s;

}



.gift_area .item_list .each_item .item_link:hover::before {

  margin-right: calc(5 * (60rem / 390));

}



.gift_area .item_list .each_item .item_name {

  margin-bottom: calc(10 * (60rem / 390));

  font-size: calc(16 * (60rem / 390));

  font-weight: 600;

  line-height: 1.5;

  text-align: center;

}



.gift_area .item_list .each_item .item_name .item_brand {

  display: block;

  margin-bottom: calc(8 * (60rem / 390));

  font-size: calc(14 * (60rem / 390));

}



.gift_area .item_list .each_item .item_price {

  margin-bottom: calc(15 * (60rem / 390));

  font-size: calc(15 * (60rem / 390));

  font-weight: 500;

  text-align: center;

}



.gift_area .item_list .each_item .txt_S {

  margin-left: calc(4 * (60rem / 390));

  font-family: var(--font_jpn);

  font-size: calc(10 * (60rem / 390));

  font-weight: 400

}



.gift_area .item_list .each_item .item_caption {

  font-size: calc(13 * (60rem / 390));

  line-height: 1.75;

}



/*---------------------------gift*/



/*brand--------------------------*/

.brand_area {

  margin-top: calc(70 * (60rem / 390));

}



.brand_list {

  padding: 0 calc(15 * (60rem / 390));

}



.brand_list li:nth-of-type(n+2) {

  margin-top: calc(15 * (60rem / 390));

}



.brand_list li a {

  position: relative;

  height: calc(70 * (60rem / 390));

  border-radius: calc(10 * (60rem / 390));

  background: #fff;

  box-shadow: 0 calc(3 * (60rem / 390)) calc(6 * (60rem / 390)) rgba(0, 0, 0, .16);

  text-align: center;

}



.brand_list li a::before {

  position: absolute;

  top: 50%;

  right: 0;

  translate: 0 -50%;

  width: calc(15 * (60rem / 390));

  height: calc(15 * (60rem / 390));

  margin-right: calc(15 * (60rem / 390));

  background: url(../img/arrow_001.svg) center center / cover no-repeat;

  content: "";

  transition: margin .3s;

}



.brand_list li a:hover::before {

  margin-right: calc(8 * (60rem / 390));

}



.brand_list li a img {

  width: auto;

  height: 100%;

}

/*--------------------------brand*/



/*allItem------------------------*/

.btn_allItem_wrap {

  padding: calc(40 * (60rem / 390)) 0 calc(60 * (60rem / 390));

  background: var(--color_bg);

  box-shadow: 0 calc(-10 * (60rem / 390)) calc(10 * (60rem / 390)) rgba(80, 59, 39, .1);

}



.btn_allItem_wrap p {

  margin-bottom: calc(20 * (60rem / 390));

  font-size: calc(14 * (60rem / 390));

  font-weight: 600;

  text-align: center;

}



.btn_allItem_wrap p .txt_eng {

  display: block;

  margin-bottom: calc(10 * (60rem / 390));

  font-family: var(--font_ttl);

  font-size: calc(32 * (60rem / 390));

}



.btn_allItem_wrap p .txt_S {

  opacity: 0;

  transition: opacity .8s;

}



.btn_allItem_wrap p.active .txt_S {

  transition-delay: 1.2s;

  opacity: 1;

}



.btn_allItem {

  position: relative;

  display: flex !important;

  align-items: center;

  width: calc(270 * (60rem / 390));

  height: calc(54 * (60rem / 390));

  margin: 0 auto;

  padding-left: calc(20 * (60rem / 390));

  border-radius: calc(100 * (60rem / 390));

  background: var(--color_01);

  font-size: calc(17 * (60rem / 390));

  font-weight: 700;

}



.btn_allItem::before {

  position: absolute;

  top: 50%;

  right: 0;

  translate: 0 -50%;

  width: calc(15 * (60rem / 390));

  height: calc(15 * (60rem / 390));

  margin-right: calc(15 * (60rem / 390));

  background: url(../img/arrow_001.svg) center center / cover no-repeat;

  content: "";

  transition: margin .3s;

}



.btn_allItem:hover::before {

  margin-right: calc(8 * (60rem / 390));

}

/*------------------------allItem*/



/*fixed nav----------------------*/

.fixed_nav {

  position: fixed;

  bottom: 0;

  z-index: 3;

  width: 100%;

  border-top: solid var(--color_regular) calc(1.5 * (60rem / 390));

  background: var(--color_bg);

  filter: drop-shadow(0 calc(-5 * (60rem / 390)) calc(5 * (60rem / 390)) rgba(0, 0, 0, .1));

  translate: 0 100%;

  transition: translate .3s;

}



.fixed_nav.active {

  translate: 0 0;

  filter: drop-shadow(0 calc(-5 * (60rem / 390)) calc(5 * (60rem / 390)) rgba(0, 0, 0, .1));

}



.fixed_nav .nav_list {

  display: flex;

}



.fixed_nav .nav_list li {

  position: relative;

}



.fixed_nav .nav_list li a {

  display: flex;

  align-items: center;

  height: calc(50 * (60rem / 390));

  padding: 0 calc(9.5 * (60rem / 390));

  font-family: var(--font_ttl);

  font-size: calc(16 * (60rem / 390));

  font-weight: 700;

  white-space: nowrap;

}



.fixed_nav .nav_list li:nth-of-type(n+2)::before {

  position: absolute;

  top: 50%;

  left: 0;

  translate: 0 -50%;

  width: calc(1 * (60rem / 390));

  height: calc(15 * (60rem / 390));

  background: var(--color_regular);

  content: "";

}

/*----------------------fixed nav*/



/*shareボタン、shareテキスト---------------------------*/

@media screen and  (max-width:768px) {

#share {

  z-index: 10 !important;

  transition: translate .3s;

}



#share.move {

  translate: 0 calc(-50 * (60rem / 390));

}



.share-txt {

  display: none;

}



.only_pc {

  display: none;

}







}

/*---------------------------shareボタン、shareテキスト*/





/*PC------------------------------------------------------*/

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

  .only_sp {

    display: none !important;

  }



  .LP_page_inner {

    position: relative;

    z-index: 1;

    min-height: 100vh;

    margin: -100vh auto 0;

    overflow: clip;

    box-shadow: 0 0 10px rgba(0, 0, 0, .2);

  }



  .LP_page_inner,

  .modal_outside {

    width: 60rem;

  }



  .fixed_area {

    position: sticky;

    top: 0;

    z-index: 1;

    display: flex;

    justify-content: space-between;

    width: 100%;

    height: 100vh;

    margin: 0 auto;

    background: var(--color_bg);

  }

  

  .fixed_left,

  .fixed_right {

    display: grid;

    place-items: center;

    width: calc((100% - 60rem) / 2);

    height: 100%;

  }



  .ttl_pc {

    width: 40rem;

  }



  .fixed_left .btn_allItem {

    width: 32rem;

    height: 5.8rem;

    margin: 4rem auto 0;

    padding-left: 2rem;

    font-size: 2rem;

  }



  .pc_nav .nav_list li {

    width: fit-content;

  }



  .pc_nav .nav_list li:nth-of-type(n+2) {

    margin-top: 3.5rem;

  }



  .pc_nav .nav_list li a {

    font-family: var(--font_ttl);

    font-size: 3.2rem;

    font-weight: 600;

  }



  .pc_nav .nav_list li a .txt_S {

    margin-left: 1rem;

    font-family: var(--font_regular);

    font-size: 1.3rem;

    font-weight: 500;

  }





}

/*------------------------------------------------------PC*/





/*レスポンシブ対応-------------------------------*/

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

  html {

    font-size: calc(10 * (100vw / 1600));

  }

}



@media screen and (max-width: 768px) {

  html {

    font-size: calc(10 * (100vw / 600));

  }

}

/*-------------------------------レスポンシブ＆タブレット対応*/