@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;

  z-index: 1;

  background: #fff;

}



:root {

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

  --color_regular: #727272;

  --color_01: #EAB5C4;

  --color_02: #D098A8;

  --color_03: #FDF2F5;

  --color_04: #EEF2BC;

  --color_05: #FEFFF5;

  --color_06: #98A871;

  --color_07: #F8E1E7;

  --color_08: #F5F7E1;

}



.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 input {

  display: none;

}



.LP_page_inner {

  background: #fff;

}



.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 sup {

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

}



.LP_page .activePoint.fadein01 {

  opacity: 0;

  transition: opacity 1s;

}



.LP_page .activePoint.fadein01.active {

  opacity: 1;

}



.LP_page .activePoint.fadein02 {

  mask-image: linear-gradient(-90deg, transparent, transparent 39.6666666667%, rgba(0, 0, 0, .02) 43.3333333333%, rgba(0, 0, 0, .08) 45%, rgba(0, 0, 0, .18) 46.6666666667%, rgba(0, 0, 0, .32) 48.3333333333%, rgba(0, 0, 0, .5) 50%, rgba(0, 0, 0, .68) 51.6666666667%, rgba(0, 0, 0, .82) 53.3333333333%, rgba(0, 0, 0, .92) 55%, rgba(0, 0, 0, .98) 56.6666666667%, #000 58.3333333333%, #000);

  mask-size: max(100vw, 300%) 120%;

  mask-position: 100% center;

  mask-repeat: none;

  -webkit-mask-image: linear-gradient(-90deg, transparent, transparent 39.6666666667%, rgba(0, 0, 0, .02) 43.3333333333%, rgba(0, 0, 0, .08) 45%, rgba(0, 0, 0, .18) 46.6666666667%, rgba(0, 0, 0, .32) 48.3333333333%, rgba(0, 0, 0, .5) 50%, rgba(0, 0, 0, .68) 51.6666666667%, rgba(0, 0, 0, .82) 53.3333333333%, rgba(0, 0, 0, .92) 55%, rgba(0, 0, 0, .98) 56.6666666667%, #000 58.3333333333%, #000);

  -webkit-mask-size: max(100vw, 300%) 120%;

  -webkit-mask-position: 100% center;

  -webkit-mask-repeat: none;

  transform: translateZ(0);

  transition: mask-position 1.4s linear, -webkit-mask-position 1.4s linear;

}



.LP_page .activePoint.fadein02.active {

  mask-position: 0 center;

  -webkit-mask-position: 0 center;

}



.LP_page .activePoint.fadein03 {

  opacity: 0;

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

  transition: opacity 1s, translate 1s;

}



.LP_page .activePoint.fadein03.active {

  opacity: 1;

  translate: unset;

}

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



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

.heading_area {

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

}



.heading_area .lead_wrap {

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

  background: url(../img/floraSeries.jpg) top center / 100% auto no-repeat;

}



.main_lead {

  position: relative;

  width: fit-content;

  margin: 0 auto;

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

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

  font-weight: 600;

  line-height: 1.75;

  text-align: center;

  color: var(--color_02);

}



.main_lead::before,

.main_lead::after {

  position: absolute;

  bottom: 0;

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

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

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

  background: var(--color_02);

  content: "";

}



.main_lead::before {

  left: 0;

}



.main_lead::after {

  right: 0;

}



.main_lead span {

  position: relative;

  display: block;

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

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

}



.main_lead span::before {

  position: absolute;

  bottom: 100%;

  left: 50%;

  translate: -50% 0;

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

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

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

  rotate: 30deg;

  background: var(--color_02);

  content: "";

}



.heading_area .lead_wrap h2 {

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

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

  font-weight: 600;

  line-height: 1.2;

  letter-spacing: .15em;

  color: var(--color_01);

}



.heading_area .lead_wrap h2 span {

  display: block;

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

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

}



.heading_area .lead_wrap .link_list {

  position: relative;

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

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

}



.heading_area .lead_wrap .link_list li {

  position: absolute;

  top: 0;

  left: 0;

}



.heading_area .lead_wrap .link_list li:nth-of-type(1) {

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

}



.heading_area .lead_wrap .link_list li:nth-of-type(2) {

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

}



.heading_area .lead_wrap .link_list li:nth-of-type(3) {

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

}



.heading_area .lead_wrap .link_list li:nth-of-type(4) {

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

}



.heading_area .lead_wrap .link_list li a {

  position: relative;

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

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

}



.heading_area .lead_wrap .link_list li a::before {

  position: absolute;

  top: 50%;

  left: 50%;

  translate: -50% -50%;

  width: 100%;

  height: 100%;

  border-radius: 50%;

  background: #fff;

  content: "";

  animation: dotScale 2s infinite;

}



@keyframes dotScale {

  0% {

    scale: 0;

    opacity: .7;

  }



  80% {

    opacity: .7;

  }



  100% {

    scale: 1;

    opacity: 0;

  }

}



.sub_lead_wrap dt {

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

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

  font-weight: 600;

  line-height: 1.5;

  text-align: center;

  color: var(--color_02);

}



.sub_lead_wrap dd p {

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

  line-height: 1.75;

  text-align: center;

}



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

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

}



.sub_lead_wrap dd p.notes {

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

  line-height: 1.4;

  letter-spacing: .05em;

}



.itemIntroduction_wrap h3 {

  position: relative;

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

}



.itemIntroduction_wrap h3 span {

  opacity: 0;

}



.itemIntroduction_wrap h3::before {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: url(../img/txt_001.svg) center left / auto 100% repeat-x;

  content: "";

  animation: loop1 10s linear infinite;

}



@keyframes loop1 {

  0% {

    background-position: 0 0;

  }

  100% {

      background-position: calc(-300 * (60rem / 390)) 0;

  }

}



.itemIntroduction_list {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  perspective: calc(10000 * (60rem / 390));

}



.itemIntroduction_list li {

  position: relative;

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

  animation: rotateZ 10s infinite;

  transform-style: preserve-3d;

}



@keyframes rotateZ {

  0%, 30%, 70%, 100% {

    transform: rotateY(0);

  }



  50% {

    transform: rotateY(180deg);

  }



}



.itemIntroduction_list li .card_front {

  position: relative;

  z-index: 1;

  border: solid #fff calc(1.5 * (60rem / 390));

  backface-visibility: hidden;

  -webkit-backface-visibility: hidden;

}



.itemIntroduction_list li .card_back {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: #fff;

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

  scale: -1 1;

}



.itemIntroduction_list li p {

  position: absolute;

  top: 50%;

  left: 0;

  translate: 0 -50%;

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

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

  color: var(--color_01);

  opacity: .4;

  writing-mode: vertical-lr;

  white-space: nowrap;

}



/*item detail--------------------*/

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(0, 0, 0, .4);

  backdrop-filter: blur(5px);

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

  content: "";

}



.modal_overlay {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}



.modal_wrap {

  display: block;

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

  margin: 0 auto;

  max-height: 100%;

  padding: calc(40 * (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(36 * (60rem / 390));

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

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

  border: none;

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

  background: var(--color_08);

  cursor: pointer;

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

}



.btn_modalClose::before,

.btn_modalClose::after {

  position: absolute;

  top: 50%;

  left: 50%;

  translate: -50% -50%;

  background: var(--color_06);

  content: "";

  rotate: 45deg;

  transition: rotate .3s;

}



.btn_modalClose::before {

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

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

}



.btn_modalClose::after {

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

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

}



.btn_modalClose:hover::before,

.btn_modalClose:hover::after {

  rotate: 135deg;

}



.modal_product .modal_content {

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

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

  background: #fff;

}



.thumbnail_list {

  display: flex;

  justify-content: center;

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

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

}



.thumbnail_list li label {

  position: relative;

  display: block;

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

  cursor: pointer;

}



.thumbnail_list li label:before {

  position: absolute;

  bottom: 0;

  left: 50%;

  translate: -50% 0;

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

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

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

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

  box-sizing: border-box;

  content: "";

}



.thumbnail_list li label:after {

  position: absolute;

  bottom: 0;

  left: 50%;

  translate: -50% 0;

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

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

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

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

  content: "";

  opacity: 0;

  transition: opacity .5s;

}



.thumbnail_list li.selected label:after {

  opacity: 1;

}



.thumbnail_list li label figure {

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

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

}



.thumbnail_list li label figure img {

  width: auto;

  height: 100%;

}



.product_list .slick-list {

  padding-top: calc(30 * (60rem / 390)) !important;

}



.product_list .slick-track {

  display: flex;

}



.product_list .each_product {

  position: relative;

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

  height: auto;

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

  border-top: solid var(--color_01) calc(2 * (60rem / 390));

  border-bottom: solid var(--color_01) calc(2 * (60rem / 390));

  background: #fff;

}



.product_list .each_product:nth-of-type(1) {

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

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

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

  border-left: solid var(--color_01) calc(2 * (60rem / 390));

}



.product_list .each_product:nth-last-of-type(1) {

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

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

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

  border-right: solid var(--color_01) calc(2 * (60rem / 390));

}



.product_list .each_product:nth-of-type(n+2)::before {

  position: absolute;

  top: 50%;

  left: 0;

  translate: 0 -50%;

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

  height: calc(100% - calc(60 * (60rem / 390)));

  border-left: dotted var(--color_07) calc(1.5 * (60rem / 390));

  box-sizing: border-box;

  content: "";

}



.product_list .each_product .product_phrase {

  position: absolute;

  top: 0;

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

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

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

  background: var(--color_05);

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

  line-height: 1.5;

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

}



.product_list .each_product .product_phrase::before {

  position: absolute;

  top: 0;

  left: 0;

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

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

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

  background: url(../img/clip.png) center center / cover no-repeat;

  content: "";

}



.product_list .each_product .product_img {

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

}



.product_list .each_product .product_name {

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

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

  font-weight: 400;

  line-height: 1.5;

  text-align: center;

}



.product_list .each_product .product_price_wrap {

  display: flex;

  justify-content: center;

  align-items: center;

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

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

}



.product_list .each_product .product_price {

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

  letter-spacing: .05em;

}



.product_list .each_product .product_price .txt_S {

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

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

  letter-spacing: .05em;

}



.product_list .each_product .product_link {

  position: relative;

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

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

  font-weight: 600;

  letter-spacing: .05em;

  text-decoration: underline;

  text-decoration-skip-ink: none;

  color: var(--color_01);

}



.product_list .each_product .product_link::before {

  position: absolute;

  top: 50%;

  right: 0;

  translate: 0 -50%;

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

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

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

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

  rotate: 45deg;

  content: "";

}



.product_list .each_product .product_addCart {

  margin: 0 auto;

}



.product_list .each_product .feature_list_wrap {

  position: relative;

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

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

}



.product_list .each_product .feature_list_wrap p {

  position: absolute;

  z-index: 1;

  top: 0;

  left: 0;

  display: grid;

  place-items: center;

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

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

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

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

  font-weight: 600;

  rotate: -2deg;

}



.product_list .each_product .feature_list_wrap p::before {

  position: absolute;

  z-index: -1;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: var(--color_04);

  opacity: .5;

  content: "";

}



.product_list .each_product .feature_list {

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

  background: #fff;

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

}



.product_list .each_product .feature_list li {

  position: relative;

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

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

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

  line-height: 1.5;

  letter-spacing: .05em;

}



.product_list .each_product .feature_list li .txt_onsensui {

  display: inline-block;

  vertical-align: -.2em;

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

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

}



.product_list .each_product .feature_list li::before {

  position: absolute;

  top: 0;

  left: 0;

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

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

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

  border-radius: 50%;

  background: var(--color_04);

  content: "";

}



.product_list .each_product .feature_list li:nth-of-type(n+2) {

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

}



.product_list .each_product .notes {

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

  text-align: right;

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

  line-height: 1.5;

}



/*--------------------item detail*/



/*pickup------------------------*/

#PickUp {

  position: relative;

  z-index: 1;

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

}



#PickUp::before,

#PickUp::after {

  position: absolute;

  z-index: -2;

  top: 0;

  left: 0;

  width: 100%;

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

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

  opacity: .5;

  content: "";

}



#PickUp::before {

  background: linear-gradient(var(--color_04) calc(1 * (60rem / 390)), transparent calc(1 * (60rem / 390)) calc(15 * (60rem / 390))) top left / 100% calc(16 * (60rem / 390)) repeat-y;

}



#PickUp::after {

  background: linear-gradient(to right, var(--color_04) calc(1 * (60rem / 390)), transparent calc(1 * (60rem / 390)) calc(15 * (60rem / 390))) top center / calc(16 * (60rem / 390)) 100% repeat-x;

}



.area_ttl {

  position: relative;

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

  margin: 0 auto;

}



#PickUp .area_ttl {

  width: auto;

  margin: 0;

}



.area_ttl::before,

.area_ttl::after {

  position: absolute;

  top: 50%;

  translate: 0 -50%;

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

  background: var(--color_01);

  content: "";

}



.area_ttl::before {

  left: 0;

}



.area_ttl::after {

  right: 0;

}



#PickUp .area_ttl::before {

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

}



#PickUp .area_ttl::after {

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

}



.area_ttl span {

  position: relative;

  display: block;

  width: fit-content;

  margin: 0 auto;

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

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

  font-weight: 700;

  color: var(--color_01);

}



.area_ttl span::before,

.area_ttl span::after {

  position: absolute;

  top: 50%;

  translate: 0 -50%;

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

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

  background: url(../img/parentheses.svg) center center / 100% auto no-repeat;

  content: "";

}



.area_ttl span::before {

  left: 0;

}



.area_ttl span::after {

  right: 0;

  scale: -1 1;

}



#PickUp .area_ttl span {

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

}



.pickupItem_outside {

  position: relative;

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

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

}



.pickupItem_outside::before {

  position: absolute;

  z-index: -1;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: url(../img/bg_note_001.svg) top left / 100% auto no-repeat;

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

  content: "";

}



.pickupItem_wrap {

  display: flex;

  align-items: center;

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

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

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

}



.pickupItem_wrap .product_img {

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

}



.pickupItem_wrap .txt_wrap {

  flex: 1;

}



.pickupItem_wrap .product_name {

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

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

  font-weight: 400;

  line-height: 1.8;

}



.pickupItem_wrap .product_price_wrap {

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.pickupItem_wrap .product_price {

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

  letter-spacing: .05em;

}



.pickupItem_wrap .product_price .txt_S {

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

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

  letter-spacing: .05em;

}



.LP_page .product_addCart {

  display: grid;

  place-items: center;

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

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

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

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

  background: #fff;

}



.LP_page .product_addCart span {

  position: relative;

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

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

  font-weight: 700;

  letter-spacing: .05em;

  color: var(--color_01);

}



.LP_page .product_addCart span::before {

  position: absolute;

  top: 50%;

  left: 0;

  translate: 0 -50%;

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

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

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

  content: "";

}



.pickupItem_wrap .product_caption1 {

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

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

  line-height: 1.75;

  text-align: justify;

}



.pickupItem_outside .product_caption2 {

  position: relative;

  z-index: 1;

  display: grid;

  place-items: center;

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

  background: url(../img/bg_flower.jpg) center center / cover no-repeat;

}



.pickupItem_outside .product_caption2::before {

  position: absolute;

  z-index: -1;

  top: 50%;

  left: 50%;

  translate: -50% -50%;

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

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

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

  background: #fff;

  content: "";

  opacity: .75;

}



.pickupItem_outside .product_caption2 p {

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

  line-height: 1.75;

  text-align: center;

}



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

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

}



#PickUp .product_feature_wrap {

  position: relative;

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

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

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

}



#PickUp .product_feature_wrap::before {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: calc(100% - calc(25 * (60rem / 390)));

  background: #fff;

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

  content: "";

}



#PickUp .product_feature_wrap h3 {

  position: relative;

  z-index: 1;

  width: fit-content;

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

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

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

  font-weight: 700;

  rotate: -2deg;

}



#PickUp .product_feature_wrap h3::before {

  position: absolute;

  z-index: -1;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: var(--color_04);

  opacity: .5;

  content: "";

}



#PickUp .feature_list li {

  position: relative;

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

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

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

  line-height: 1.5;

}



#PickUp .feature_list li:nth-of-type(n+2) {

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

}



#PickUp .feature_list li::before {

  position: absolute;

  top: 0;

  left: 0;

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

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

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

  border-radius: 50%;

  background: var(--color_04);

  content: "";

}



#PickUp .feature_list li .txt_highlight {

  line-height: 1.5;

  text-decoration: underline;

  text-decoration-color: var(--color_08);

  text-decoration-skip-ink: none;

  text-decoration-thickness: calc(15 * (60rem / 390));

  text-underline-offset: calc(-12 * (60rem / 390));

}



.buyer_comment_wrap {

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

}



.buyer_intro_wrap {

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

}



.buyer_intro_wrap .buyer_comment {

  position: relative;

  width: fit-content;

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

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

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

  background: var(--color_03);

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

  font-weight: 600;

  line-height: 1.5;

  letter-spacing: .175em;

  font-feature-settings: "palt";

}



.buyer_intro_wrap .buyer_comment::before {

  position: absolute;

  top: 100%;

  left: 0;

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

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

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

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

  mask-image: url(../img/shape_speech.svg);

  mask-position: center center;

  mask-size: cover;

  mask-repeat: no-repeat;

  -webkit-mask-image: url(../img/shape_speech.svg);

  -webkit-mask-position: center center;

  -webkit-mask-size: cover;

  -webkit-mask-repeat: no-repeat;

  background: var(--color_03);

  content: "";

}



.buyer_intro_wrap .buyer_intro {

  display: flex;

  justify-content: center;

  align-items: center;

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

}



.buyer_intro_wrap .buyer_img {

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

}



.buyer_intro_wrap .buyer_name {

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

  line-height: 1.5;

  white-space: nowrap;

}



.buyer_comment_wrap .comment_list {

  display: grid;

  grid-template-columns: repeat(3, calc(280 * (60rem / 390)));

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

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

  overflow: scroll;

   -ms-overflow-style: none;

  scrollbar-width: none;

}



.buyer_comment_wrap .comment_list::-webkit-scrollbar {

  display:none;

}



.buyer_comment_wrap .comment_list li {

  position: relative;

  padding: calc(35 * (60rem / 390))  calc(20 * (60rem / 390)) calc(30 * (60rem / 390));

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

  background: #fff;

}



.buyer_comment_wrap .comment_list li::before {

  position: absolute;

  top: 0;

  left: 50%;

  translate: -50% 0;

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

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

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

  mask-image: url(../img/shape_pin.svg);

  mask-position: center center;

  mask-size: cover;

  mask-repeat: no-repeat;

  -webkit-mask-image: url(../img/shape_pin.svg);

  -webkit-mask-position: center center;

  -webkit-mask-size: cover;

  -webkit-mask-repeat: no-repeat;

  background: var(--color_01);

  content: "";

}



.buyer_comment_wrap .comment_list li h4 {

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

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

  font-weight: 600;

  letter-spacing: .05em;

}



.buyer_comment_wrap .comment_list li p {

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

  line-height: 1.75;

  letter-spacing: .175em;

  font-feature-settings: "palt";

}



#PickUp .product_point_wrap {

  position: relative;

  z-index: 1;

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

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

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

}



#PickUp .product_point_wrap::before {

  position: absolute;

  z-index: -1;

  bottom: 0;

  left: 0;

  width: 100%;

  height: calc(100% - calc(25 * (60rem / 390)));

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

  border: solid var(--color_04) calc(2 * (60rem / 390));

  border-right: none;

  background: #fff;

  content: "";

}



#PickUp .product_point_wrap h3 {

  position: relative;

  z-index: 1;

  width: fit-content;

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

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

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

  font-weight: 700;

  rotate: -2deg;

}



#PickUp .product_point_wrap h3::before {

  position: absolute;

  z-index: -1;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: var(--color_04);

  opacity: .5;

  content: "";

}



#PickUp .point_list li {

  position: relative;

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

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

  line-height: 1.5;

}



#PickUp .point_list li:nth-of-type(n+2) {

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

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

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

}



#PickUp .point_list li::before {

  position: absolute;

  left: 0;

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

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

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

  content: "";

}



#PickUp .product_ingredient_wrap {

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

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

}



#PickUp .product_ingredient_wrap h3 {

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

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

}



#PickUp .product_ingredient_wrap h3 .txt_S {

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

}



#PickUp .product_ingredient_wrap h3 .txt_jpn {

  display: block;

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

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

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

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

}



#PickUp .product_ingredient_wrap .ingredient_list {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

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

}



#PickUp .product_ingredient_wrap .ingredient_list .ingredient_name {

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

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

  line-height: 1.5;

  letter-spacing: .03em;

  text-align: center;

  white-space: nowrap;

}



.commonIngredient_wrap {

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

}



.commonIngredient_wrap h3 {

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

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

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

  font-weight: 600;

}



.accordion_outside {

  position: relative;

  background: #fff;

}



.accordion_outside::before {

  position: absolute;

  z-index: 2;

  top: 0;

  left: 0;

  width: 100%;

  height: calc(100% + calc(5 * (60rem / 390)));

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

  content: "";

  transition: opacity .5s;

  pointer-events: none;

}



.open.accordion_outside::before {

  opacity: 0;

}



.accordion_wrap {

  display: grid;

  grid-template-rows: 0fr;

  transition: grid-template-rows .6s;

}



.open .accordion_wrap {

  grid-template-rows: 1fr;

}



.accordion_inner {

  overflow: hidden;

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

  filter: blur(3px);

  transition: filter .3s;

}



.open .accordion_inner {

  filter: unset;

}



.accordion_btn {

  width: fit-content;

  margin: 0 auto;

}



.accordion_btn {

  position: absolute;

  z-index: 2;

  top: 50%;

  left: 50%;

  translate: -50% -50%;

  cursor: pointer;

}



.open .accordion_btn {

  position: static;

  translate: unset;

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

}



.accordion_btn .to_open {

  display: block;

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

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

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

  background: #fff;

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

  font-weight: 600;

}



.open .accordion_btn .to_open {

  display: none;

}



.accordion_btn .to_open span {

  position: relative;

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

}



.accordion_btn .to_open span::before {

  position: absolute;

  top: 50%;

  right: 0;

  translate: 0 -50%;

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

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

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

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

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

  box-sizing: border-box;

  rotate: 45deg;

  content: "";

}



.accordion_btn .to_close {

  position: relative;

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

  font-weight: 600;

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

  display: none;

}



.open .accordion_btn .to_close {

  display: block;

}



.accordion_btn .to_close::before {

  position: absolute;

  top: 50%;

  right: 0;

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

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

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

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

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

  box-sizing: border-box;

  rotate: 45deg;

  content: "";

}



.commonIngredient_wrap .each_category {

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

}



.commonIngredient_wrap .each_category.cat_flower {

  background: #F4E9EC;

}



.commonIngredient_wrap .each_category.cat_fermentation {

  background: #E6D3D0;

}



.commonIngredient_wrap .each_category.cat_science {

  background: #FCFDE8;

}



.commonIngredient_wrap .each_category h4 {

  position: relative;

  z-index: 1;

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

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

  font-weight: 600;

}



.commonIngredient_wrap .each_category.cat_flower h4 {

  color: #D098A8;

}



.commonIngredient_wrap .each_category.cat_fermentation h4 {

  color: #BB7B71;

}



.commonIngredient_wrap .each_category.cat_science h4 {

  color: #C6C9A5;

}



.commonIngredient_wrap .each_category h4 span {

  position: relative;

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

}



.commonIngredient_wrap .each_category.cat_flower h4 span {

  background: #F4E9EC;

}



.commonIngredient_wrap .each_category.cat_fermentation h4 span {

  background: #E6D3D0;

}



.commonIngredient_wrap .each_category.cat_science h4 span {

  background: #FCFDE8;

}



.commonIngredient_wrap .each_category h4::before {

  position: absolute;

  top: 50%;

  left: 0;

  translate: 0 -50%;

  width: 100%;

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

  content: "";

}



.commonIngredient_wrap .each_category.cat_flower h4::before {

  background: #D098A8;

}



.commonIngredient_wrap .each_category.cat_fermentation h4::before {

  background: #BB7B71;

}



.commonIngredient_wrap .each_category.cat_science h4::before {

  background: #C6C9A5;

}



.commonIngredient_wrap .ingredient_list {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: calc(12 * (60rem / 390)) calc(20 * (60rem / 390));

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

}



.commonIngredient_wrap .ingredient_list li {

  display: flex;

  align-items: center;

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

}



.commonIngredient_wrap .ingredient_img {

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

}



.commonIngredient_wrap .ingredient_name {

  flex: 1;

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

  line-height: 1.5;

  letter-spacing: .05em;

}

/*------------------------pickup*/



/*Diagnostic Chart--------------*/

#DiagnosticChart {

  position: relative;

  z-index: 1;

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

}



#DiagnosticChart::before {

  position: absolute;

  z-index: -1;

  bottom: 0;

  left: 0;

  width: 100%;

  height: calc(100% - calc(400 * (60rem / 390)));

  background: linear-gradient(transparent, var(--color_08));

  content: "";

}



#DiagnosticChart .area_ttl::before,

#DiagnosticChart .area_ttl::after {

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

}



.area_lead_ttl {

  width: fit-content;

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

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

  background: var(--color_05);

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

  font-weight: 600;

  letter-spacing: .175em;

  font-feature-settings: "palt";

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

}



.area_lead_ttl span {

  letter-spacing: .175em;

}



.area_lead_ttl .dotted {

  text-decoration: underline;

  text-decoration-style: dotted;

  text-decoration-color: var(--color_01);

  text-decoration-skip-ink: none;

  text-decoration-thickness: calc(2 * (60rem / 390));

  text-underline-offset: calc(3 * (60rem / 390));

}



.area_lead_ttl .solid {

  text-decoration: underline;

  text-decoration-color: var(--color_07);

  text-decoration-skip-ink: none;

  text-decoration-thickness: calc(8 * (60rem / 390));

  text-underline-offset: calc(-4 * (60rem / 390));

}



.product_photo_outside {

  position: relative;

  display: flex;

  justify-content: center;

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

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

}



.product_photo_outside::before,

.product_photo_outside::after {

  position: absolute;

  top: 50%;

  left: 50%;

  translate: -50% -50%;

  background: var(--color_01);

  content: "";

  rotate: 45deg;

}



.product_photo_outside::before {

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

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

}



.product_photo_outside::after {

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

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

}



.product_photo_wrap {

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

}



.product_photo_outside .each_photo {

  position: relative;

  z-index: 1;

  display: grid;

  place-items: center;

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

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

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

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

  background: #fff;

}



.product_photo_outside .each_photo::before {

  position: absolute;

  z-index: -1;

  top: 50%;

  left: 50%;

  translate: -50% -50%;

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

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

  background: var(--color_07);

  content: "";

}



.product_photo_outside .each_photo .product_img {

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

}



.product_photo_outside .each_photo .product_img img {

  width: auto;

  height: 100%;

}



.area_lead {

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

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

  line-height: 1.75;

  text-align: center;

}



.question_list_wrap {

  position: relative;

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

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

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

}



.question_list_wrap::before {

  position: absolute;

  top: 0;

  left: 50%;

  translate: -50% 0;

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

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

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

  content: "";

}



.question_list_wrap > p {

  position: relative;

  width: fit-content;

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

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

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

  font-weight: 600;

  color: var(--color_01);

}



.question_list_wrap > p::before,

.question_list_wrap > p::after {

  position: absolute;

  bottom: 0;

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

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

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

  background: var(--color_01);

  content: "";

}



.question_list_wrap > p::before {

  left: 0;

  rotate: -30deg;

}



.question_list_wrap > p::after {

  right: 0;

  rotate: 30deg;

}



.each_question {

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

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

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

  background: #fff;

  transition: opacity .3s;

}



.each_question.hidden {

  opacity: 0;

  overflow: hidden;

  height: 0;

  padding: 0;

}



.each_question:not(.hidden):nth-of-type(n+2) {

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

}



.each_question dt {

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

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

  line-height: 1.5;

  text-indent: -1.8em;

  padding-left: 1.8em;

  letter-spacing: .05em;

}



.each_question dt .txt_mark {

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

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

  font-weight: 600;

  color: var(--color_01);

}



.each_question dt .txt_S {

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

  letter-spacing: .05em;

  vertical-align: .1em;

}



.answer_list {

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

}



.notTouched .answer_list {

  pointer-events: none;

}



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

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

}



.answer_list li label {

  position: relative;

  display: block;

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

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

  letter-spacing: .05em;

  cursor: pointer;

}



.answer_list li label::before {

  position: absolute;

  top: 0;

  left: 0;

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

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

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

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

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

  box-sizing: border-box;

  content: "";

}



.answer_list li label::after {

  position: absolute;

  top: 0;

  left: 0;

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

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

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

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

  content: "";

  opacity: 0;

  transition: opacity .2s;

}



.answer_list li input:checked + label::after {

  opacity: 1;

}



.answer_list li label .txt_S {

  display: block;

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

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

}



.each_question .btn_wrap {

  display: flex;

  justify-content: space-between;

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

  transition: opacity .3s;

}



.each_question .btn_wrap p {

  position: relative;

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

  font-weight: 600;

  letter-spacing: .05em;

  color: var(--color_01);

  cursor: pointer;

}



.each_question .btn_wrap p::before {

  position: absolute;

  top: 50%;

  translate: 0 -50%;

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

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

  box-sizing: border-box;

  rotate: 45deg;

  content: "";

}



.each_question .btn_wrap .btn_prev {

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

}



.notTouched .btn_wrap {

  pointer-events: none;

  opacity: .3;

}



.notTouched .btn_wrap.touchEnabled {

  pointer-events: auto;

  opacity: 1;

}



.each_question .btn_wrap .btn_prev::before {

  left: 0;

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

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

}



.each_question .btn_wrap .btn_next {

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

  transition: opacity .3s;

}



.each_question .btn_wrap .btn_next.notTouched {

  pointer-events: none;

  opacity: .3;

}



.each_question .btn_wrap .btn_next::before {

  right: 0;

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

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

}



.question_01 .answer_list {

  display: flex;

  justify-content: center;

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

  margin: 0;

}



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

  margin-top: 0;

}



.question_01 .answer_list li label {

  display: grid;

  place-items: center;

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

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

  padding: 0;

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

  border-radius: 50%;

  background: #fff;

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

  font-weight: 600;

  letter-spacing: 0;

  transform: background-color .2s, color .2s;

}



.question_01 .answer_list li:nth-of-type(1) label {

  border-color: var(--color_01);

  color: var(--color_01);

}



.question_01 .answer_list li:nth-of-type(2) label {

  border-color: var(--color_06);

  color: var(--color_06);

}



.question_01 .answer_list li label::before,

.question_01 .answer_list li label::after {

  display: none;

}



.question_01 .answer_list li:nth-of-type(1) input:checked + label {

  background: var(--color_01);

  color: #fff;

}



.question_01 .answer_list li:nth-of-type(2) input:checked + label {

  background: var(--color_06);

  color: #fff;

}



.switching_area {

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

}



.each_result {

  transition: opacity .5s;

}



.each_result.hidden {

  opacity: 0;

  height: 0;

  overflow: hidden;

}



.result_wrap {

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

  margin: 0 auto;

}



.result_wrap dt {

  position: relative;

  z-index: 1;

  width: fit-content;

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

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

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

  font-weight: 600;

  color: #fff;

  rotate: -2deg;

}



.result_wrap dt::before {

  position: absolute;

  z-index: -1;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: var(--color_01);

  opacity: .8;

  content: "";

}



.result_wrap dd {

  position: relative;

  display: grid;

  place-items: center;

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

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

  background: #fff;

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

  font-weight: 600;

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

}



.result_cleansing .result_wrap dd {

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

}



.result_wrap dd::before {

  position: absolute;

  top: 50%;

  left: 50%;

  translate: -50% -50%;

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

  height: calc(100% - calc(10 * (60rem / 390)));

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

  pointer-events: none;

  content: "";

}



.result_wrap dd span {

  position: relative;

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

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

}



.result_wrap dd span::before,

.result_wrap dd span::after {

  position: absolute;

  top: 50%;

  left: 0;

  translate: 0 -50%;

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

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

  background: var(--color_01);

  content: "";

}



.result_wrap dd span::before {

  rotate: 45deg;

}



.result_wrap dd span::after {

  rotate: -45deg;

}



.result_lead {

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

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

  line-height: 1.75;

  text-align: center;

}



.result_lead .txt_mark {

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

  font-weight: 600;

  color: var(--color_01);

}



.combination_list_outside {

  position: relative;

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

}



.combination_list_outside::before {

  position: absolute;

  top: 0;

  left: 0;

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

  height: 100%;

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

  background: #fff;

  content: "";

}



.combination_list_outside::after {

  position: absolute;

  top: 50%;

  left: 0;

  translate: 0 -50%;

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

  height: calc(100% - calc(85 * (60rem / 390)));

  background: url(../img/notering.svg) top left / 100% calc(40 * (60rem / 390)) repeat-y;

  content: "";

}



.combination_list_wrap {

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

  margin: 0 0 0 auto;

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

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

  background: #fff;

}



.combination_list_wrap > p {

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

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

  font-weight: 600;

  letter-spacing: .05em;

  text-align: right;

  color: var(--color_04);

}



.combination_ttl {

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

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

  padding: calc(8 * (60rem / 390)) calc(5 * (60rem / 390));

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

  font-weight: 600;

  color: #CACE94;

}



.product_wrap {

  position: relative;

  z-index: 1;

}



.product_wrap::before {

  position: absolute;

  z-index: -1;

  top: 50%;

  left: 0;

  translate: 0 -50%;

  width: 100%;

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

  background: linear-gradient(var(--color_regular) calc(1 * (60rem / 390)), transparent calc(1 * (60rem / 390)) calc(14 * (60rem / 390))) top left / 100% calc(15 * (60rem / 390)) repeat-y;

  content: "";

  opacity: .05;

}



.product_wrap::after {

  position: absolute;

  z-index: -2;

  bottom: 0;

  left: 0;

  width: 100%;

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

  background: var(--color_04);

  content: "";

}



.combination_list {

  position: relative;

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

}



.result_lotion .combination_list {

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

}



.result_lotion .combination_list::before {

  position: absolute;

  bottom: 0;

  left: 0;

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

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

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

  content: "";

}



.combination_list li {

  display: flex;

  justify-content: center;

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

}



.combination_list li:nth-of-type(2) {

  align-items: flex-end;

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

}



.combination_list li .product_img {

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

}



.combination_list li .product_img a {

  height: 100%;

}



.combination_list li .product_img img {

  width: auto;

  height: 100%;

}



.combination_list li:nth-of-type(1) .product_img {

  rotate: -6deg;

}



.combination_list li:nth-of-type(2) .product_img {

  rotate: 6deg;

  order: 2;

}



.combination_list li:nth-of-type(1) .txt_wrap {

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

}



.combination_list li:nth-of-type(2) .txt_wrap {

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

}



.combination_list li .product_name {

  position: relative;

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

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

  font-weight: 400;

  line-height: 1.5;

}



.combination_list li:nth-of-type(2) .product_name {

  text-align: right;

}



.combination_list li .product_name::before {

  position: absolute;

  top: 0;

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

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

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

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

  background: var(--color_regular);

  content: "";

}



.combination_list li:nth-of-type(1) .product_name::before {

  right: 100%;

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

}



.combination_list li:nth-of-type(2) .product_name::before {

  left: 100%;

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

}



.combination_list li .product_name::after {

  position: absolute;

  z-index: 1;

  top: 0;

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

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

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

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

  background: var(--color_regular);

  content: "";

}



.combination_list li:nth-of-type(1) .product_name::after {

  right: 100%;

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

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

  transform-origin: center right;

  rotate: -30deg;

}



.combination_list li:nth-of-type(2) .product_name::after {

  left: 100%;

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

  transform-origin: center left;

}



.result_lotion .combination_list li:nth-of-type(2) .product_name::after {

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

  rotate: -32deg;

}



.result_milk .combination_list li:nth-of-type(2) .product_name::after {

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

  rotate: -25deg;

}



.result_cleansing .combination_list li:nth-of-type(1) .product_name::after {

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

  rotate: -42deg;

}



.result_cleansing .combination_list li:nth-of-type(2) .product_name::after {

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

  rotate: -45deg;

}





.combination_list li .product_price {

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

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

  letter-spacing: .05em;

}



.combination_list li .product_price .txt_S {

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

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

  letter-spacing: .05em;

}



.combination_list li:nth-of-type(2) .product_price {

  text-align: right;

}



.combination_list li .product_link {

  position: relative;

  width: fit-content;

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

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

  font-weight: 600;

  letter-spacing: .05em;

  text-decoration: underline;

  text-decoration-skip-ink: none;

  color: var(--color_01);

}



.combination_list li:nth-of-type(2) .product_link {

  margin: 0 0 0 auto;

}



.combination_list li .product_link::before {

  position: absolute;

  top: 50%;

  right: 0;

  translate: 0 -50%;

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

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

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

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

  rotate: 45deg;

  content: "";

}



.limitedKit_wrap {

  position: relative;

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

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

}



.limitedKit_wrap .product_img {

  position: absolute;

  top: 0;

  right: 0;

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

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

}



.limitedKit_wrap .product_feature {

  width: fit-content;

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

  padding: calc(5 * (60rem / 390)) calc(12 * (60rem / 390)) calc(4 * (60rem / 390));

  background: var(--color_01);

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

  font-weight: 600;

  color: #fff;

}



.limitedKit_wrap .product_name {

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

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

  line-height: 1.5;

}



.limitedKit_wrap .product_price_wrap {

  display: flex;

  align-items: center;

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

}



.limitedKit_wrap .product_price {

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

  letter-spacing: .05em;

}



.limitedKit_wrap .product_price .txt_S {

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

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

  letter-spacing: .05em;

}



.product_addCartAll_wrap {

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

}



.product_addCartAll_wrap > p {

  position: relative;

  width: fit-content;

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

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

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

  font-weight: 600;

  color: var(--color_01);

}



.product_addCartAll_wrap > p::before {

  position: absolute;

  top: 50%;

  right: 0;

  translate: 0 -50%;

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

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

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

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

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

  box-sizing: border-box;

  rotate: 45deg;

  content: "";

}



.product_addCartAll {

  position: relative;

  display: grid !important;

  place-items: center;

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

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

  margin: 0 auto;

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

  background: var(--color_01);

  color: #fff;

}



.product_addCartAll::before {

  position: absolute;

  top: 50%;

  right: 0;

  translate: 0 -50%;

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

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

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

  mask-image: url(../img/icon_cart.svg);

  mask-position: center center;

  mask-size: cover;

  mask-repeat: no-repeat;

  -webkit-mask-image: url(../img/icon_cart.svg);

  -webkit-mask-position: center center;

  -webkit-mask-size: cover;

  -webkit-mask-repeat: no-repeat;

  background: #fff;

  content: "";

}



.product_addCartAll p {

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

  font-weight: 600;

  letter-spacing: .05em;

  text-align: center;

}



.product_addCartAll p .txt_S {

  display: block;

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

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

}

/*--------------Diagnostic Chart*/



/*Limited Kit-------------------*/

#LimitedKit {

  position: relative;

  z-index: 1;

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

}



#LimitedKit::before,

#LimitedKit::after {

  position: absolute;

  z-index: -2;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  opacity: .5;

  content: "";

}



#LimitedKit::before {

  background: linear-gradient(var(--color_04) calc(1 * (60rem / 390)), transparent calc(1 * (60rem / 390)) calc(15 * (60rem / 390))) top left / 100% calc(16 * (60rem / 390)) repeat-y;

}



#LimitedKit::after {

  background: linear-gradient(to right, var(--color_04) calc(1 * (60rem / 390)), transparent calc(1 * (60rem / 390)) calc(15 * (60rem / 390))) top center / calc(16 * (60rem / 390)) 100% repeat-x;

}



.area_img {

  position: relative;

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

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

}



.area_img img {

  opacity: 0;

  width: auto;

  height: 100%;

}



.area_img::before {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: url(../img/limitedKit.jpg) center left / auto 100% repeat-x;

  content: "";

  animation: loop2 20s linear infinite;

}



@keyframes loop2 {

  0% {

    background-position: 0 0;

  }

  100% {

      background-position: calc(-600 * (60rem / 390)) 0;

  }

}



#LimitedKit .area_ttl::before, 

#LimitedKit .area_ttl::after {

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

}



.limitedKit_list {

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

}



.limitedKit_list li {

  position: relative;

  z-index: 1;

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

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

}



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

  margin: 0 0 0 auto;

}



.limitedKit_list li::before {

  position: absolute;

  z-index: -1;

  bottom: 0;

  left: 0;

  width: 100%;

  height: calc(100% - calc(20 * (60rem / 390)));

  border: solid var(--color_04) calc(2 * (60rem / 390));

  box-sizing: border-box;

  background: #fff;

  content: "";

}



.limitedKit_list li:nth-of-type(odd)::before {

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

  border-right: none;

}



.limitedKit_list li:nth-of-type(even)::before {

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

  border-left: none;

}



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

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

}



.limitedKit_list li .kit_phrase {

  width: fit-content;

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

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

}



.limitedKit_list li .kit_phrase p {

  width: fit-content;

  max-width: calc(315 * (60rem / 390));

  padding: calc(12 * (60rem / 390)) calc(22 * (60rem / 390));

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

  line-height: 1.5;

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

  background: var(--color_05);

}



.limitedKit_list li:nth-of-type(odd) .kit_phrase {

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

}



.limitedKit_list li:nth-of-type(even) .kit_phrase {

  margin-left: auto;

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

}



.limitedKit_list li .kit_img_wrap {

  display: flex;

}



.limitedKit_list li .kit_img_wrap .txt_wrap {

  flex: 1;

  display: flex;

  flex-direction: column;

  align-items: center;

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

  color: var(--color_01);

}



.limitedKit_list li:nth-of-type(even) .kit_img_wrap .txt_wrap {

  order: 2;

}



.limitedKit_list li .kit_img {

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

}



.limitedKit_list li .kit_num {

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

  font-weight: 600;

  letter-spacing: 0;

}



.limitedKit_list li .kit_img_wrap .kit_name {

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

  line-height: 1.2;

  writing-mode: vertical-rl;

  opacity: .6;

}



.limitedKit_list li > .txt_wrap {

  display: flex;

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

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

}



.limitedKit_list li:nth-of-type(odd) > .txt_wrap {

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

}



.limitedKit_list li:nth-of-type(even) > .txt_wrap {

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

}



.limitedKit_list li .kit_feature {

  display: grid;

  place-items: center;

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

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

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

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

  border-radius: 50%;

  background: var(--color_02);

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

  font-weight: 600;

  line-height: 1.15;

  text-align: center;

  color: #fff;

}



.limitedKit_list li:nth-of-type(odd) .kit_feature {

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

}



.limitedKit_list li .kit_feature span {

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

  line-height: 1.1;

}



.limitedKit_list li .kit_feature .txt_S {

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

}



.limitedKit_list li .kit_detail {

  flex: 1;

}



.limitedKit_list li .kit_detail .kit_name {

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

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

  font-weight: 400;

  line-height: 1.5;

}



.limitedKit_list li .kit_detail .kit_price_wrap {

  display: flex;

  align-items: center;

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

}



.limitedKit_list li .kit_detail .kit_price {

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

  letter-spacing: .05em;

}



.limitedKit_list li .kit_detail .kit_price .txt_S {

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

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

  letter-spacing: .05em;

}



/*-------------------Limited Kit*/



/*Limited Items-----------------*/

#LimitedItems {

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

}



#LimitedItems .area_ttl::before,

#LimitedItems .area_ttl::after {

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

}



.limitedItems_list {

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

}



.limitedItems_list li {

  position: relative;

  z-index: 1;

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

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

}



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

  margin: 0 0 0 auto;

}



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

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

}



.limitedItems_list li::before {

  position: absolute;

  z-index: -1;

  bottom: 0;

  left: 0;

  width: 100%;

  height: calc(100% - calc(20 * (60rem / 390)));

  border: solid var(--color_04) calc(2 * (60rem / 390));

  box-sizing: border-box;

  background: #fff;

  content: "";

}



.limitedItems_list li:nth-of-type(odd)::before {

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

  border-right: none;

}



.limitedItems_list li:nth-of-type(even)::before {

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

  border-left: none;

}



.limitedItems_list li .item_phrase {

  width: fit-content;

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

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

}



.limitedItems_list li .item_phrase p {

  width: fit-content;

  max-width: calc(315 * (60rem / 390));

  padding: calc(12 * (60rem / 390)) calc(22 * (60rem / 390));

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

  line-height: 1.5;

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

  background: var(--color_05);

}



.limitedItems_list li:nth-of-type(odd) .item_phrase {

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

}



.limitedItems_list li .item_detail {

  display: flex;

  align-items: center;

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

}



.limitedItems_list li:nth-of-type(even) .item_detail {

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

}



.limitedItems_list li .item_img_list {

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

} 



.limitedItems_list li .item_img {

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

}



.limitedItems_list li .item_img a {

  height: 100%;

}



.limitedItems_list li .item_img img {

  width: auto;

  height: 100%;

}



.limitedItems_list li .item_feature {

  width: fit-content;

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

  padding: calc(4 * (60rem / 390)) calc(8 * (60rem / 390));

  background: var(--color_01);

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

  font-weight: 600;

  color: #fff;

}



.limitedItems_list li .item_name {

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

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

  font-weight: 400;

  line-height: 1.5;

}



.limitedItems_list li .item_price {

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

  letter-spacing: .05em;

}



.limitedItems_list li .item_price .txt_S {

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

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

  letter-spacing: .05em;

}



.limitedItems_list li .notes {

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

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

  line-height: 1.5;

  letter-spacing: .05em;

}



.limitedItems_list li .product_addCart {

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

}



.buyerRecommended_wrap {

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

}



.buyerRecommended_wrap .speech_user {

  position: relative;

  width: fit-content;

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

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

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

  background: var(--color_04);

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

  line-height: 1.5;

}



.buyerRecommended_wrap .speech_user::before {

  position: absolute;

  top: 0;

  left: 100%;

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

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

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

  rotate: 90deg;

  scale: 1 -1;

  mask-image: url(../img/shape_speech.svg);

  mask-position: center center;

  mask-size: cover;

  mask-repeat: no-repeat;

  -webkit-mask-image: url(../img/shape_speech.svg);

  -webkit-mask-position: center center;

  -webkit-mask-size: cover;

  -webkit-mask-repeat: no-repeat;

  background: var(--color_04);

  content: "";

}



.speech_buyer_outside {

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

}



.buyerRecommended_wrap .buyer_wrap {

  display: flex;

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

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

}



.buyerRecommended_wrap .buyer_wrap .buyer_img {

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

}



.buyerRecommended_wrap .buyer_wrap .buyer_name {

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

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

  font-weight: 600;

  letter-spacing: .05em;

}



.buyerRecommended_wrap .speech_buyer_wrap {

  position: relative;

  width: fit-content;

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

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

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

  background: var(--color_03);

}



.buyerRecommended_wrap .speech_buyer_wrap::before {

  position: absolute;

  top: 0;

  right: 100%;

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

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

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

  rotate: 90deg;

  mask-image: url(../img/shape_speech.svg);

  mask-position: center center;

  mask-size: cover;

  mask-repeat: no-repeat;

  -webkit-mask-image: url(../img/shape_speech.svg);

  -webkit-mask-position: center center;

  -webkit-mask-size: cover;

  -webkit-mask-repeat: no-repeat;

  background: var(--color_03);

  content: "";

}



.buyerRecommended_wrap .speech_buyer_wrap h5 {

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

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

  font-weight: 500;

  line-height: 1.5;

}



.buyerRecommended_wrap .speech_buyer_wrap .speech_buyer {

  max-width: calc(230 * (60rem / 390));

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

  line-height: 1.5;

}



.recommendedItem_list {

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

}



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

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

}



.recommendedItem_list .buyer_wrap {

  display: flex;

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

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

}



.recommendedItem_list .buyer_wrap .buyer_img {

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

}



.recommendedItem_list .buyer_wrap .buyer_comment {

  position: relative;

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

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

  background: var(--color_03);

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

}



.recommendedItem_list .buyer_wrap .buyer_comment::before {

  position: absolute;

  top: 0;

  right: 100%;

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

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

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

  rotate: 90deg;

  mask-image: url(../img/shape_speech.svg);

  mask-position: center center;

  mask-size: cover;

  mask-repeat: no-repeat;

  -webkit-mask-image: url(../img/shape_speech.svg);

  -webkit-mask-position: center center;

  -webkit-mask-size: cover;

  -webkit-mask-repeat: no-repeat;

  background: var(--color_03);

  content: "";

}



.recommendedItem_detail {

  position: relative;

  display: flex;

  align-items: center;

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

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

  margin: 0 auto;

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

  background: #fff;

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

}



.recommendedItem_detail::before {

  position: absolute;

  top: 50%;

  left: 50%;

  translate: -50% -50%;

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

  height: calc(100% - calc(10 * (60rem / 390)));

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

  content: "";

  pointer-events: none;

}



.recommendedItem_detail .item_img {

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

}



.recommendedItem_detail .txt_wrap {

  flex: 1;

}



.recommendedItem_detail .item_caption {

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

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

  line-height: 1.5;

}



.recommendedItem_detail .item_name {

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

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

  font-weight: 600;

  line-height: 1.5;

}



.recommendedItem_detail .item_price_wrap {

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.recommendedItem_detail .item_price {

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

  letter-spacing: .05em;

}



.recommendedItem_detail .item_price .txt_S {

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

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

  letter-spacing: .05em;

}



/*-----------------Limited Items*/



/*ReviewList--------------------*/

.review_area {

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

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

}



.review_area {

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

}



.review_area h2 {

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

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

  font-weight: 700;

  text-align: center;

  color: var(--color_01);

}



.review_list.swiper-wrapper {

  transition-timing-function: linear;

}



.review_list .each_review {

  position: relative;

  width: calc(230 * (60rem / 390)) !important;

  height: auto;

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

}



.review_list .each_review > a {

  height: 100%;

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

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

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

  background: #fff;

}



.review_list .each_review figure {

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

}



.review_list .each_review figure img {

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

  object-fit: cover;

}



.review_list .each_review .staff_detail_wrap {

  display: flex;

  align-items: center;

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

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

}



.review_list .each_review .staff_detail_wrap .staff_img {

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

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

  border-radius: 50%;

  overflow: clip;

}



.review_list .each_review .staff_detail_wrap .staff_img img {

  height: 100%;

  object-fit: cover;

}



.review_list .each_review .staff_detail_wrap .txt_wrap {

  flex: 1;

}



.review_list .each_review .staff_detail_wrap .txt_wrap p {

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

  line-height: 1.5;

}



.review_list .each_review .staff_comment {

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

  line-height: 1.5;

  overflow: hidden;

  display: -webkit-box;

  text-overflow: ellipsis;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;

}



.review_list .each_review .link_detail {

  position: absolute;

  bottom: 0;

  right: 0;

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

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

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

  font-weight: 700;

  color: var(--color_01);

}



.review_list .each_review .link_detail::before {

  position: absolute;

  top: 50%;

  right: 0;

  translate: 0 -50%;

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

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

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

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

  box-sizing: border-box;

  rotate: 45deg;

  content: "";

}

/*--------------------ReviewList*/



/*campaign----------------------*/

.campaign_area .only_modal {

  display: none;

}



.campaign_area h3 {

  position: relative;

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

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

  background: var(--color_02);

}



.campaign_area h3::before {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: url(../img/txt_002.svg) center left / auto 100% repeat-x;

  content: "";

  animation: loop1 10s linear infinite;

}



.campaign_area h3 span {

  opacity: 0;

}



.campaign_period {

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

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

  font-weight: 600;

  text-align: center;

}



.campaign_period .txt_L {

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

}



.campaign_area .campaign_list {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

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

}



.campaign_area .campaign_list li {

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

}



.campaign_area .campaign_list li:nth-of-type(even) {

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

}



.campaign_area .campaign_list li:nth-of-type(n+3) {

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

}



.campaign_list li .campaign_num {

  position: relative;

  z-index: 1;

  display: grid;

  place-items: center;

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

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

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

  overflow: clip;

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

  font-weight: 600;

  letter-spacing: 0;

  color: #fff;

}



.campaign_list li .campaign_num::before {

  position: absolute;

  z-index: -1;

  bottom: 0;

  left: 50%;

  translate: -50% 0;

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

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

  border-radius: 50%;

  background: var(--color_01);

  content: "";

}



.campaign_list li .campaign_ttl {

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

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

  font-weight: 600;

  line-height: 1.5;

  letter-spacing: .05em;

  text-align: center;

  color: var(--color_02);

}



.campaign_list li .campaign_img {

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

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

}



.campaign_area .campaign_list li .btn_modalOpen {

  width: fit-content;

  margin: 0 auto;

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

  font-weight: 600;

  text-decoration: underline;

  text-decoration-skip-ink: none;

  cursor: pointer;

}



.campaign_area .notes_list {

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

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

}



.campaign_area .notes_list li {

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

  line-height: 1.3;

}



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

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

}



.modal_campaign .modal_content {

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

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

  background: #fff;

}



.modal_campaign .only_summary {

  display: none;

}



.modal_campaign h3 {

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

  text-align: center;

}



.modal_campaign h3 span {

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

  font-weight: 600;

  line-height: 1.3;

  color: var(--color_02);

}



.modal_campaign .campaign_period {

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

}



.modal_campaign .campaign_list > li {

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

  border-top: solid var(--color_01) calc(2 * (60rem / 390));

}



.modal_campaign .campaign_list > li:nth-last-of-type(1) {

  padding-bottom: 0;

}



.modal_campaign .campaign_list li .campaign_num {

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

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

}



.modal_campaign .campaign_list li .campaign_num::before {

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

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

}



.modal_campaign .campaign_list li .campaign_ttl {

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

  letter-spacing: .1em;

}



.modal_campaign .campaign_list li .campaign_img {

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

}



.modal_campaign .campaign_list li .campaign_detail {

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

  line-height: 1.5;

}



.modal_campaign .campaign_list li .campaign_detail .txt_S {

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

  vertical-align: .1em;

  letter-spacing: 0;

}



.modal_campaign .campaign_list li .campaign_notes {

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

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

  line-height: 1.5;

  letter-spacing: .05em;

}



.modal_campaign .campaign_list li .targetItem_list_wrap {

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

}



.modal_campaign .campaign_list li .targetItem_list_wrap p {

  position: relative;

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

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

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

  letter-spacing: .05em;

}



.modal_campaign .campaign_list li .targetItem_list_wrap p::before {

  position: absolute;

  top: 50%;

  left: 0;

  translate: 0 -50%;

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

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

  background: var(--color_regular);

  rotate: 45deg;

  content: "";

}



.modal_campaign .campaign_list li .targetItem_list li {

  position: relative;

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

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

}



.modal_campaign .campaign_list li .targetItem_list li:nth-of-type(n+2) {

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

}



.modal_campaign .campaign_list li .targetItem_list li::before {

  position: absolute;

  top: 0;

  left: 0;

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

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

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

  border-radius: 50%;

  background: var(--color_regular);

  content: "";

}



.modal_campaign .campaign_list li .targetItem_list li a {

  text-decoration: underline;

  text-decoration-skip-ink: none;

  line-height: 1.3;

  letter-spacing: .05em;

}



.modal_campaign .campaign_list li .btn_allItem_wrap {

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

}



.btn_allItem_wrap p {

  position: relative;

  width: fit-content;

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

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

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

  font-weight: 600;

  color: var(--color_02);

}



.btn_allItem_wrap p::before {

  position: absolute;

  top: 50%;

  right: 0;

  translate: 0 -50%;

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

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

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

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

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

  box-sizing: border-box;

  rotate: 45deg;

  content: "";

}



.btn_allItem_wrap a {

  display: grid;

  place-items: center;

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

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

  margin: 0 auto;

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

  background: var(--color_02);

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

  font-weight: 600;

  color: #fff;

}



/*----------------------campaign*/



/*lastly------------------------*/

.lastly_area {

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

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

}



.seriesAbout_wrap {

  position: relative;

  z-index: 1;

  padding: calc(80 * (60rem / 390)) calc(35 * (60rem / 390));

  background: url(../img/bg_floraSeries.jpg) center center / cover no-repeat;

}



.seriesAbout_wrap::before {

  position: absolute;

  z-index: -1;

  top: 50%;

  left: 50%;

  translate: -50% -50%;

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

  height: calc(100% - calc(80 * (60rem / 390)));

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

  background: #fff;

  content: "";

  opacity: .75;

}



.seriesAbout p {

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

  line-height: 2.2;

  text-align: center;

}



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

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

}



.link_floraSeries {

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

}



.link_floraSeries p {

  position: relative;

  width: fit-content;

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

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

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

  font-weight: 600;

  color: var(--color_01);

}



.link_floraSeries p::before {

  position: absolute;

  top: 50%;

  right: 0;

  translate: 0 -50%;

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

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

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

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

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

  box-sizing: border-box;

  rotate: 45deg;

  content: "";

}



.link_floraSeries a {

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

}



.lastly_area .btn_allItem_wrap {

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

}



.lastly_area .btn_allItem_wrap a {

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

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

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

  font-weight: 500;

}

/*------------------------lastly*/



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

.fixed_nav {

  position: fixed;

  z-index: 3;

  bottom: 0;

  width: 100%;

  translate: 0 100%;

  transition: translate .5s;

}



.fixed_nav.active {

  translate: 0 0;

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

}



.fixed_nav .nav_list {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

}



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

  position: absolute;

  top: 50%;

  left: 0;

  translate: 0 -50%;

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

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

  background: #fff;

  content: "";

}



.fixed_nav .nav_list li a {

  position: relative;

  z-index: 1;

  display: grid;

  place-items: center;

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

  background: var(--color_01);

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

  font-weight: 600;

  line-height: 1.2;

  letter-spacing: .05em;

  text-align: center;

  color: #fff;

}



.fixed_nav .nav_list li:nth-of-type(2) a {

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

}



.btn_campaign {

  position: fixed;

  z-index: 3;

  bottom: 0;

  right: 0;

  display: grid;

  place-items: center;

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

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

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

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

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

  background: var(--color_02);

  writing-mode: vertical-rl;

  color: #fff;

  translate: 100% 0;

  transition: translate .5s;

}



.btn_campaign.active {

  translate: 0 0;

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

}



.btn_campaign::before,

.btn_campaign::after {

  position: absolute;

  bottom: 0;

  left: 50%;

  translate: -50% 0;

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

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

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

  background: #fff;

  content: "";

}



.btn_campaign::before {

  animation: rotate1 10s infinite;

}



.btn_campaign::after {

  animation: rotate2 10s infinite;

  rotate: 90deg;

}



@keyframes rotate1 {

  0% {

    rotate: 0deg;

  }

  10% {

      rotate: 180deg;

  }

  55% {

      rotate: 180deg;

  }

  65% {

      rotate: 360deg;

  }

  100% {

      rotate: 360deg;

  }

}



@keyframes rotate2 {

  0% {

    rotate: 90deg;

  }

  10% {

      rotate: 270deg;

  }

  55% {

      rotate: 270deg;

  }

  65% {

      rotate: 450deg;

  }



  100% {

      rotate: 450deg;

  }

}



.btn_campaign p,

.btn_campaign p span {

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

  font-weight: 600;

  line-height: 1.2;

  letter-spacing: .09em;

}



.btn_campaign p span {

  letter-spacing: .05em;

}



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





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

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

#share {

  right: auto !important;

  left: 5%;

  z-index: 10 !important;

  transition: translate .5s;

}



#share.move {

  translate: 0 calc(-60 * (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;

    width: 60rem;

    min-height: 100vh;

    margin: -100vh auto 0;

    overflow: clip;

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

  }



  .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_08);

  }

  

  .fixed_left,

  .fixed_right {

    display: grid;

    place-items: center;

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

    height: 100%;

  }



  .fixed_left .ttl_pc {

    width: 40rem;

    margin-bottom: 4rem;

  }



  .fixed_left .icon_campaign {

    width: 17rem;

    margin: 0 auto 2rem;

    cursor: pointer;

  }



  .fixed_left .notes {

    font-size: 1rem;

    text-align: center;

  }



  .pc_nav {

    position: relative;

    padding: 4.5rem 5rem 4.5rem 3.5rem;

    border-radius: 2rem;

    background: #fff;

  }



  .pc_nav::before {

    position: absolute;

    top: 0;

    left: 50%;

    translate: -50% 0;

    width: 3rem;

    height: 3rem;

    margin-top: 1rem;

    mask-image: url(../img/shape_pin.svg);

    mask-position: center center;

    mask-size: cover;

    mask-repeat: no-repeat;

    -webkit-mask-image: url(../img/shape_pin.svg);

    -webkit-mask-position: center center;

    -webkit-mask-size: cover;

    -webkit-mask-repeat: no-repeat;

    background: var(--color_01);

    content: "";

  }



  .pc_nav .nav_list {

    position: relative;

    padding: 4rem 0;

  }



  .pc_nav .nav_list::before {

    position: absolute;

    top: 0;

    left: 0;

    width: .2rem;

    height: 100%;

    margin-left: 2.6rem;

    background: var(--color_01);

    content: "";

  }



  .pc_nav .nav_list li {

    position: relative;

    padding-left: 7.5rem;

  }



  .pc_nav .nav_list li::before {

    position: absolute;

    top: 50%;

    left: 0;

    translate: 0 -50%;

    width: 5.4rem;

    height: .2rem;

    background: var(--color_01);

    content: "";

    opacity: 0;

    transition: opacity .5s;

  }



    .pc_nav .nav_list li.selected::before {

      opacity: 1;

    }



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

    margin-top: 3rem;

  }



   .pc_nav .nav_list li a {

    font-size: 2rem;

    font-weight: 600;

    letter-spacing: .05em;

    color: var(--color_01);

   }





}

/*------------------------------------------------------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));

  }

}

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