@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: "EB Garamond", "Zen Old Mincho", sans-serif;
  --color_regular: #623726;
}

.LP_page * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 1;
  letter-spacing: .05em;
}

.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 {
  position: relative;
  z-index: 1;
  padding-bottom: calc(50 * (60rem / 390));
}

.LP_page_inner::before {
  position: fixed;
  z-index: -1;
  top: 0;
  width: calc(390 * (60rem / 390));
  height: 100lvh;
  background: url(../img/bg_plaidPattern.jpg) center center / cover no-repeat;
  content: "";
}

.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));
}

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

/*letter------------------------*/
.letter_wrap {
  position: fixed;
  top: 0;
  left: 50%;
  translate: -50% 0;
  width: calc(390 * (60rem / 390));
  height: 100lvh;
  pointer-events: none;
  transition: opacity 2s;
}

.letter_parts {
  position: absolute;
  bottom: 0;
  width: calc(390 * (60rem / 390));
  height: 100%;
}

.letter_bg::before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(220 * (60rem / 390));
  margin-bottom: calc(-60 * (60rem / 390));
  background: url(../img/letter_bg.jpg) center center / cover no-repeat;
  content: "";
}

.letter_front {
  z-index: 2;
}

.letter_front::before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(220 * (60rem / 390));
  margin-bottom: calc(-60 * (60rem / 390));
  background: url(../img/letter_front.png) center center / cover no-repeat;
  content: "";
}

.letter_turn {
  z-index: 2;
  overflow: clip;
}

.letter_wrap.upperLayer {
  z-index: 2;
  opacity: 0;
  transition: opacity .5s;
}

.letter_wrap.upperLayer.open {
  opacity: 1;
  transition-delay: .5s;
}

.letter_turn.open {
  z-index: 0;
  transition-delay: 1s;
}

.letter_turn.open_first {
  z-index: 0;
  transition-delay: unset;
}

.letter_turn::before,
.letter_turn .for_back::before {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(125 * (60rem / 390));
  margin-bottom: calc(34 * (60rem / 390));
  content: "";
  transform-origin: top center;
  transform: rotateX(0);
  transition: transform 1.5s;
}

.letter_turn.open_first:before
.letter_turn.open_first .for_back::before {
  transform: rotateX(180deg);
  transition: unset ;
}

.letter_turn::before {
  background: url(../img/letter_turn.png) center center / cover no-repeat;
  filter: drop-shadow(0 calc(3 * (60rem / 390)) calc(6 * (60rem / 390)) rgba(0, 0, 0, .3));
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.letter_turn .for_back::before {
  z-index: -1;
  background: url(../img/letter_turnback.png) center center / cover no-repeat;
}

.letter_turn.open::before,
.letter_turn.open .for_back::before {
  transform: rotateX(180deg)
}

.letter_wrap .txt_scrl {
  z-index: 2;
  color: #fff;
}

.letter_wrap .txt_scrl::before {
  background: #fff;
}

/*------------------------letter*/

/*heading------------------------*/
#Wrap,
.header_wrap {
  padding-top: 0 !important;
}

header {
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s;
}

header.visible {
  opacity: 1;
  pointer-events: auto;
}

#header_txt_slider,
#header_img_slider {
  display: none;
}

.heading_area {
  position: relative;
  z-index: 3;
  padding-bottom: calc(60 * (60rem / 390));
}

.heading_area::before {
  position: fixed;
  z-index: -1;
  top: 0;
  width: calc(390 * (60rem / 390));
  height: 100lvh;
  background: url(../img/bg_mv.jpg) center center / cover no-repeat;
  content: "";
  pointer-events: none;
}

.mv_outside {
  display: grid;
  place-items: center;
  min-height: 100lvh;
  padding-top: calc(50 * (60rem / 390));
  padding-bottom: calc(50 * (60rem / 390));
}

.mv_outside > div {
  width: 100%;
}

.heading_area .main_ttl {
  margin-bottom: calc(5 * (60rem / 390));
}


.main_ttl .logo_kurahashirei {
  display: block;
  width: calc(236 * (60rem / 390));
  margin: 0 auto calc(15 * (60rem / 390));
}

.main_ttl .logo_cosmekitchen {
  display: block;
  width: calc(174 * (60rem / 390));
  margin: 0 auto;
}

.mv_wrap {
  position: relative;
  height: calc(450 * (60rem / 390));
}

.mv_wrap .each_mv {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 1s;
}

.LP_page.active .mv_wrap .each_mv {
  opacity: 1;
}

.mv_wrap .each_mv:nth-of-type(1) {
  animation: bound1 7s 4s ease infinite;
}

@keyframes bound1 {
  0%, 100%, 50%, 56%, 62% {
    transform: none;
  }
  53%, 59% {
    transform: translateY(calc(-3 * (60rem / 390)));
  }
}

.mv_wrap .each_mv:nth-of-type(2) {
  z-index: 2;
  transition-delay: .5s;
}

.mv_wrap .each_mv:nth-of-type(3) {
  transition-delay: 1s;
}

.mv_wrap .each_mv:nth-of-type(4) {
  z-index: 3;
  transition-delay: 1.5s;
}

.mv_wrap .each_mv:nth-of-type(5) {
  transition-delay: 1.5s;
}

.mv_wrap .each_mv:nth-of-type(6) {
  transition-delay: 2s;
}

.txt_scrl {
  position: fixed;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  width: fit-content;
  margin-bottom: calc(15 * (60rem / 390));
  padding-bottom: calc(35 * (60rem / 390));
  font-size: calc(13 * (60rem / 390));
  font-weight: 500;
  letter-spacing: .1em;
  pointer-events: none;
  transition: opacity 1s;
}

.txt_scrl::before {
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  width: calc(1 * (60rem / 390));
  height: calc(30 * (60rem / 390));
  border-radius: calc(10 * (60rem / 390));
  background: var(--color_regular);
  content: "";
  animation: arrow 2s infinite;
  transform-origin: bottom center;
}

@keyframes arrow {
  0% {
    scale: 1 1;
    transform-origin: bottom center;
}
49% {
    scale: 1 0;
    transform-origin: bottom center;
}
51% {
    scale: 1 0;
    transform-origin: top center;
}
100% {
    scale: 1 1;
    transform-origin: top center;
}
}

.heading_area .txt_scrl {
  z-index: 3;
}

.heading_area .txt_scrl.hidden {
  opacity: 0;
}

.main_lead_wrap {
  position: relative;
  padding-bottom: calc(160 * (60rem / 390));
  overflow: clip;
}

.main_lead_wrap::before {
  position: absolute;
  bottom: calc(45 * (60rem / 390));
  left: 100%;
  width: calc(90 * (60rem / 390));
  height: calc(104 * (60rem / 390));
  background: url(../img/illust_kuroneko.png) top center / 100% auto no-repeat;
  content: "";
}

.main_lead_wrap.move_illust::before {
  animation: bound2 .5s ease infinite, move_x 20s linear infinite;
}

@keyframes bound2 {
  0%, 100% {
    margin-bottom: 0;
  }
  50% {
    margin-bottom: calc(4 * (60rem / 390));
  }
}

@keyframes move_x {
  0% {
    translate: 0 0;
  }
  100% {
    translate: calc(-600 * (60rem / 390)) 0;
  }
}

.main_lead_wrap .main_lead {
  font-size: calc(14 * (60rem / 390));
  font-weight: 700;
  line-height: 2;
  text-align: center;
  opacity: 0;
  translate: 0 calc(10 * (60rem / 390));
  transition: opacity 1s, translate 1s;
}

.main_lead_wrap.active .main_lead {
  opacity: 1;
  translate: unset
}

.main_lead_wrap .main_lead:nth-of-type(n+2) {
  margin-top: calc(35 * (60rem / 390));
}

.main_lead_wrap.active .main_lead:nth-of-type(2) {
  transition-delay: .5s;
}

.main_lead_wrap.active .main_lead:nth-of-type(3) {
  transition-delay: 1s;
}

.main_lead_wrap.active .main_lead:nth-of-type(4) {
  transition-delay: 1.5s;
}

.schedule_wrap {
  width: calc(370 * (60rem / 390));
  margin: 0 auto;
  padding: calc(35 * (60rem / 390)) calc(20 * (60rem / 390)) calc(45 * (60rem / 390));
  background: #fffcf6;
  opacity: 0;
  transition: opacity 1s;
}

.schedule_wrap.active {
  opacity: 1;
}

.each_schedule {
  position: relative;
}

.each_schedule::before,
.each_schedule::after {
  position: absolute;
  top: 0;
  width: calc(115 * (60rem / 390));
  height: calc(1 * (60rem / 390));
  margin-top: calc(6 * (60rem / 390));
  background: var(--color_regular);
  content: "";
}

.each_schedule::before {
  left: 0;
}

.each_schedule::after {
  right: 0;
}

.each_schedule:nth-of-type(n+2) {
  margin-top: calc(35 * (60rem / 390));
}

.each_schedule h4 {
  width: fit-content;
  margin: 0 auto calc(15 * (60rem / 390));
  font-size: calc(17 * (60rem / 390));
  font-weight: 700;
}

.each_schedule .txt_schedule_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}

.each_schedule .txt_highlight {
  margin-right: calc(5 * (60rem / 390));
  border-radius: calc(2 * (60rem / 390));
  padding: calc(4 * (60rem / 390)) calc(8 * (60rem / 390));
  background: var(--color_regular);
  font-size: calc(11 * (60rem / 390));
  font-weight: 700;
  color: #fff;
}

.txt_schedule {
  font-size: calc(24 * (60rem / 390));
  font-weight: 500;
  letter-spacing: 0;
  text-align: center;
}

.txt_schedule .txt_SS {
  margin-left: calc(5 * (60rem / 390));
  font-size: calc(18 * (60rem / 390));
  letter-spacing: 0;
}

.txt_schedule .txt_M {
   margin-left: calc(5 * (60rem / 390));
  font-size: calc(22 * (60rem / 390));
  letter-spacing: 0;
}

.txt_schedule .txt_S {
   margin-left: calc(12 * (60rem / 390));
  font-size: calc(18 * (60rem / 390));
  letter-spacing: 0;
}

.txt_schedule .txt_hyphen {
  position: relative;
  display: inline-block;
  width: calc(10 * (60rem / 390));
  height: calc(1 * (60rem / 390));
  margin: 0 calc(5 * (60rem / 390));
}

.txt_schedule .txt_hyphen::before {
  position: absolute;
  top: 50%;
  left: 0;
  translate: 0 -50%;
  width: 100%;
  height: 100%;
  margin-top: calc(-6 * (60rem / 390));
  background: var(--color_regular);
  content: "";
}

.campaign_wrap {
  position: relative;
  z-index: 1;
  margin-top: calc(18 * (60rem / 390));
  padding-bottom: calc(15 * (60rem / 390));
}

.campaign_wrap::before {
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 0;
  width: 100%;
  height: calc(100% - calc(10 * (60rem / 390)));
  background: var(--color_regular);
  opacity: .06;
  content: "";
}

.campaign_wrap dt {
  width: fit-content;
  margin: 0 auto calc(10 * (60rem / 390));
  padding: calc(4 * (60rem / 390)) calc(20 * (60rem / 390));
  border-radius: calc(100 * (60rem / 390));
  background: #7a0217;
  font-size: calc(12 * (60rem / 390));
  font-weight: 700;
  filter: drop-shadow(0 0 calc(2 * (60rem / 390)) rgba(0, 0, 0, .2));
  color: #fff;
}

.campaign_wrap dd p {
  font-size: calc(14 * (60rem / 390));
  font-weight: 700;
  line-height: 1.75;
  text-align: center;
}

.campaign_wrap dd p .txt_M {
  font-size: calc(17 * (60rem / 390));
  font-weight: 800;
}

.campaign_wrap dd p .txt_L {
  font-size: calc(20 * (60rem / 390));
  font-weight: 800;
}

.campaign_wrap dd p .txt_LL {
  margin: 0 calc(2 * (60rem / 390));
  font-size: calc(26 * (60rem / 390));
  letter-spacing: 0;
  font-weight: 800;
}

.each_schedule .notes {
  width: fit-content;
  margin: calc(15 * (60rem / 390)) auto 0;
  font-size: calc(11 * (60rem / 390));
  line-height: 1.5;
}

.shop_list {
  width: fit-content;
  margin: calc(18 * (60rem / 390)) auto 0;
}

.shop_list li {
  font-size: calc(14 * (60rem / 390));
  font-weight: 500;
}

.shop_list li:nth-of-type(n+2) {
  margin-top: calc(8 * (60rem / 390));
}

.shop_list li .txt_S {
  margin-left: calc(5 * (60rem / 390));
  font-size: calc(11 * (60rem / 390));
}

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

/*product------------------------*/
.product_area {
  position: relative;
  padding: calc(400 * (60rem / 390)) calc(15 * (60rem / 390)) 0;
}

.product_area .area_inner {
  padding-top: calc(200 * (60rem / 390));
}

.product_list {
  position: relative;
  z-index: 1;
  opacity: 0;
  transition: opacity .5s;
}

.product_list.open {
  transition-delay: .5s;
  opacity: 1;
}

.each_product {
  position: relative;
  background: url(../img/bg_paper.jpg) top center / 100% auto no-repeat;
}

.each_product:nth-of-type(n+2) {
  margin-top: calc(80 * (60rem / 390));
}

.each_product > div::before,
.each_product > div::after {
  position: absolute;
  top: 0;
  right: 0;
  width: calc(280 * (60rem / 390));
  height: calc(185 * (60rem / 390));
  margin-right: calc(-30 * (60rem / 390));
  content: "";
  transform-origin: bottom center;
  transform: rotateX(90deg);
  transition: transform 1s;
}

.each_product.active > div::before,
.each_product.active > div::after {
  transform: rotateX(0)
}

#FEILER.each_product > div::before {
  margin-top: calc(-40 * (60rem / 390));
  background: url(../img/illust_001.png) center center / cover no-repeat;
}

#FEILER.each_product.active > div::before {
  animation: bound1 6s 3s ease infinite;
}

#FEILER.each_product > div::after {
  margin-top: calc(-40 * (60rem / 390));
  background: url(../img/illust_002.png) center center / cover no-repeat;
}

#EnglishTeaShop.each_product > div::before {
  margin-top: calc(-45 * (60rem / 390));
  background: url(../img/illust_003.png) center center / cover no-repeat;
  rotate: 2deg;
}

#EnglishTeaShop.each_product.active > div::before {
  animation: sway 6s .5s ease infinite;
}

@keyframes sway {
  0%, 100% {
    rotate: 2deg;
  }
  40% {
    rotate: -2deg;
  }
}

#EnglishTeaShop.each_product > div::after {
  margin-top: calc(-45 * (60rem / 390));
  background: url(../img/illust_004.png) center center / cover no-repeat;
}

#Galler.each_product > div::before {
  margin-top: calc(-43 * (60rem / 390));
  background: url(../img/illust_005.png) center center / cover no-repeat;
}

#Galler.each_product.active > div::before {
  animation: bound1 6s .5s ease infinite;
}

#Galler.each_product > div::after {
  margin-top: calc(-43 * (60rem / 390));
  background: url(../img/illust_006.png) center center / cover no-repeat;
}

#RoseLabo.each_product > div::before {
  margin-top: calc(100 * (60rem / 390));
  background: url(../img/illust_007.png) center center / cover no-repeat;
  rotate: 2deg;
}

#RoseLabo.each_product.active > div::before {
  animation: sway 6s .5s ease infinite;
}

#RoseLabo.each_product > div::after {
  margin-top: calc(-33 * (60rem / 390));
  background: url(../img/illust_008.png) center center / cover no-repeat;
}

#ObyF.each_product > div::before {
  margin-top: calc(-45 * (60rem / 390));
  background: url(../img/illust_009.png) center center / cover no-repeat;
}

#ObyF.each_product.active > div::before {
  animation: bound1 6s .5s ease infinite;
}

#CosmeKitchenProducts.each_product > div::before {
  margin-top: calc(-65 * (60rem / 390));
  background: url(../img/illust_010.png) center center / cover no-repeat;
}

#CosmeKitchenProducts.each_product.active > div::before {
  animation: bound1 6s .5s ease infinite;
}

#CosmeKitchenProducts.each_product > div::after {
  margin-top: calc(23 * (60rem / 390));
  background: url(../img/illust_011.png) center center / cover no-repeat;
  rotate: 2deg;
}

#CosmeKitchenProducts.each_product.active > div::after {
  animation: sway 8s .5s ease infinite;
}

#Goods001.each_product > div::before {
  height: calc(240 * (60rem / 390));
  margin-top: calc(-60 * (60rem / 390));
  background: url(../img/illust_012.png) center center / cover no-repeat;
}

#Goods001.each_product.active > div::before {
  animation: bound1 6s .5s ease infinite;
}

#Goods002.each_product > div::before {
  margin-top: calc(-80 * (60rem / 390));
  background: url(../img/illust_013.png) center center / cover no-repeat;
}

#Goods002.each_product.active > div::before {
  animation: bound1 6s .5s ease infinite;
}

#Goods002.each_product > div::after {
  margin-top: calc(50 * (60rem / 390));
  background: url(../img/illust_014.png) center center / cover no-repeat;
}

#Goods002.each_product::before {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(120 * (60rem / 390));
  height: calc(290 * (60rem / 390));
  margin: calc(340 * (60rem / 390)) 0 0 calc(-50 * (60rem / 390));
  background: url(../img/illust_017.png) center center / cover no-repeat;
  content: "";
  transform: rotateY(90deg);
  transition: transform 1s;
}

#Goods002.each_product.active::before {
  transform: rotateY(0);
}

#Goods003.each_product > div::before {
  margin-top: calc(-70 * (60rem / 390));
  background: url(../img/illust_015.png) center center / cover no-repeat;
}

#Goods003.each_product.active > div::before {
  animation: bound1 6s .5s ease infinite;
}

#Goods003.each_product > div::after {
  margin-top: calc(-70 * (60rem / 390));
  background: url(../img/illust_016.png) center center / cover no-repeat;
}

.each_product::after {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(390 * (60rem / 390));
  height: calc(240 * (60rem / 390));
  margin-top: calc(-20lvh - calc(80 * (60rem / 390)));
  margin-left: calc(-15 * (60rem / 390));
  background: url(../img/deco_particle.png) top center / 100% auto no-repeat;
  content: "";
  transition: top 3s linear, margin 3s linear, opacity .3s;
  pointer-events: none;
  opacity: 0;
}

.each_product.active::after {
  top: 100%;
  margin-top: 0;
  opacity: 1;
  animation: fadeout 1.5s 1.5s forwards;
  transition-delay: .3s;
}

.each_product .for_particle {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: calc(390 * (60rem / 390));
  height: calc(200 * (60rem / 390));
  margin-top: calc(-20lvh - calc(80 * (60rem / 390)));
  margin-left: calc(-15 * (60rem / 390));
  transition: top 3s linear, margin 3s linear, opacity .3s;
  transition-delay: .3s;
  pointer-events: none;
  opacity: 0;
}

.each_product.active .for_particle {
  top: 100%;
  margin-top: 0;
  opacity: 1;
  animation: fadeout 1.5s 1.8s forwards;
}

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

  100% {
    opacity: 0;
  }
}

.each_product .for_particle::before,
.each_product .for_particle::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
}

.each_product .particle1::before {
  background: url(../img/deco_particle1.png) top center / 100% auto no-repeat;
  animation: particle .8s infinite ease-in-out;
}

.each_product .particle1::after {
  background: url(../img/deco_particle2.png) top center / 100% auto no-repeat;
  animation: particle .8s .5s infinite ease-in-out;
}

.each_product .particle2::before {
  background: url(../img/deco_particle3.png) top center / 100% auto no-repeat;
  animation: particle 1.2s .2s infinite ease-in-out;
}

.each_product .particle2::after {
  background: url(../img/deco_particle4.png) top center / 100% auto no-repeat;
  animation: particle .3s .4s infinite ease-in-out;
}

@keyframes particle {
  0%, 100% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}

.each_product .sec_inner {
  padding: calc(40 * (60rem / 390)) 0 calc(50 * (60rem / 390));
  mask-image: linear-gradient(0deg, 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: 100% max(300%, 100vh);
  mask-position: center 100%;
  mask-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(0deg, 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: 100% max(300%, 100vh);
  -webkit-mask-position: center 100%;
  -webkit-mask-repeat: no-repeat;
  transform: translateZ(0);
  transition: mask-position 2.8s .3s linear, -webkit-mask-position 2.8s .3s linear;
}


.each_product.active .sec_inner {
  mask-position: center 0;
  -webkit-mask-position: center 0;
}

.product_summary {
  position: relative;
  z-index: 2;
  padding-left: calc(25 * (60rem / 390));
}

.product_summary .product_category {
  margin-bottom: calc(20 * (60rem / 390));
}

.product_summary .product_category.CosmeKitchenProducts {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(85 * (60rem / 390));
  height: calc(85 * (60rem / 390));
  cursor: pointer;
}

.product_summary .product_category.CosmeKitchenProducts::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: solid var(--color_regular) calc(1 * (60rem / 390));
  box-sizing: border-box;
  content: "";
  animation: scale1 3s infinite;;
}

@keyframes scale1 {
  0% {
      scale: 1;
  }
  50%{
      scale: 1.05;
  }
  100% {
      scale: 1;
  }
}

.product_summary .product_category.CosmeKitchenProducts span {
  position: relative;
  padding: calc(10 * (60rem / 390)) 0 calc(15 * (60rem / 390));
  font-size: calc(11 * (60rem / 390));
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-align: center;
}

.product_summary .product_category.CosmeKitchenProducts span::before,
.product_summary .product_category.CosmeKitchenProducts span::after {
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  width: calc(1 * (60rem / 390));
  height: calc(10 * (60rem / 390));
  background: var(--color_regular);
  content: "";
  animation: rotate1 10s infinite;
}

@keyframes rotate1 {
  0% {
      rotate: 0deg;
  }
  10% ,55%{
      rotate: 180deg;
  }
  65%, 100% {
      rotate: 360deg;
  }
}

.product_summary .product_category.CosmeKitchenProducts span::after {
  rotate: 90deg;
  animation: rotate2 10s infinite;
}

@keyframes rotate2 {
  0% {
      rotate: 90deg;
  }
  10% ,55%{
      rotate: 270deg;
  }
  65%, 100% {
      rotate: 450deg;
  }
}

#FEILER .product_brand {
  width: calc(90 * (60rem / 390));
}

#EnglishTeaShop .product_brand {
  width: calc(140 * (60rem / 390));
}

#Galler .product_brand {
  width: calc(80 * (60rem / 390));
}

#RoseLabo .product_brand {
  width: calc(116 * (60rem / 390));
}

#ObyF .product_brand {
  width: calc(58 * (60rem / 390));
}

.product_summary .product_name {
  font-size: calc(28 * (60rem / 390));
  font-weight: 800;
}

#EnglishTeaShop .product_name {
  font-size: calc(22 * (60rem / 390));
}

#Galler .product_name {
  font-size: calc(22 * (60rem / 390));
}

.product_summary .product_name .txt_S {
  display: block;
  margin-bottom: calc(10 * (60rem / 390));
  font-size: calc(13 * (60rem / 390));
  font-weight: 500;
}

.product_variation {
  margin-top: calc(10 * (60rem / 390));
  font-size: calc(13 * (60rem / 390));
  font-weight: 500;
  line-height: 1.5;
}

.product_price {
  margin-top: calc(12 * (60rem / 390));
  font-size: calc(12 * (60rem / 390));
  font-weight: 500;
  line-height: 2;
}

.product_price .txt_L {
  font-size: calc(18 * (60rem / 390));
}

.product_price .txt_S {
  margin-left: calc(5 * (60rem / 390));
  font-size: calc(10 * (60rem / 390));
  vertical-align: .1em;
}

.product_link {
  width: fit-content;
  margin-top: calc(8 * (60rem / 390));
}

.product_link a {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(90 * (60rem / 390));
  height: calc(22 * (60rem / 390));
  padding-right: calc(3 * (60rem / 390));
  border-radius: calc(100 * (60rem / 390));
  border: solid var(--color_regular) calc(1 * (60rem / 390));
  background: var(--color_regular);
  font-size: calc(14 * (60rem / 390));
  font-weight: 500;
  color: #fff;
  transition: background-color .5s, color .5s;
}

.product_link a:hover {
  background: transparent;
  color: var(--color_regular);
}

.product_link a::before {
  position: absolute;
  top: 50%;
  right: 0;
  translate: 0 -50%;
  width: calc(6 * (60rem / 390));
  height: calc(6 * (60rem / 390));
  margin-right: calc(8 * (60rem / 390));
  border-top: solid #fff calc(1 * (60rem / 390));
  border-right: solid #fff calc(1 * (60rem / 390));
  box-sizing: border-box;
  rotate: 45deg;
  content: "";
  transition: border-color .5s, margin .5s;
}

.product_link a:hover::before {
  border-color: var(--color_regular);
  margin-right: calc(5 * (60rem / 390));
}

.txt_releaseDay {
  position: absolute;
  bottom: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: calc(58 * (60rem / 390));
  height: calc(58 * (60rem / 390));
  margin: 0 calc(25 * (60rem / 390)) calc(-3 * (60rem / 390)) 0;
  border-radius: 50%;
  border: solid var(--color_regular) calc(1 * (60rem / 390));
  font-size: calc(13 * (60rem / 390));
  font-weight: 700;
  text-align: center;
}

.txt_releaseDay .txt_L {
  margin-bottom: calc(5 * (60rem / 390));
  font-size: calc(16 * (60rem / 390));
  vertical-align: .3em;
}

.product_img {
  position: relative;
  z-index: 1;
}

#FEILER .product_img {
  margin-top: calc(-60 * (60rem / 390));
}

#EnglishTeaShop .product_img {
  margin-top: calc(-5 * (60rem / 390));
}

#Galler .product_img {
  margin-top: calc(15 * (60rem / 390));
}

#RoseLabo .product_img {
  margin-top: calc(50 * (60rem / 390));
}

#ObyF .product_img {
  margin-top: calc(-50 * (60rem / 390));
}

#CosmeKitchenProducts .product_img {
  margin-top: calc(20 * (60rem / 390));
}

#Goods002 .product_img {
  margin-top: calc(30 * (60rem / 390));
}

#Goods003 .product_img {
  margin-top: calc(50 * (60rem / 390));
}

.product_img::before {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(470 * (60rem / 390));
  content: "";
}

#FEILER .product_img::before {
  margin-top: calc(30 * (60rem / 390));
  background: url(../img/star_002.png) top center / 100% auto no-repeat;
  content: "";
}

#EnglishTeaShop .product_img::before {
  margin-top: calc(5 * (60rem / 390));
  background: url(../img/star_003.png) top center / 100% auto no-repeat;
  content: "";
}

#Galler .product_img::before {
  margin-top: calc(-40 * (60rem / 390));
  background: url(../img/star_004.png) top center / 100% auto no-repeat;
  content: "";
}

#RoseLabo .product_img::before {
  margin-top: calc(-30 * (60rem / 390));
  background: url(../img/star_005.png) top center / 100% auto no-repeat;
  content: "";
}

#ObyF .product_img::before {
  margin-top: calc(-55 * (60rem / 390));
  background: url(../img/star_006.png) top center / 100% auto no-repeat;
  content: "";
}

#CosmeKitchenProducts .product_img::before {
  margin-top: calc(-20 * (60rem / 390));
  background: url(../img/star_007.png) top center / 100% auto no-repeat;
  content: "";
}

#Goods001 .product_img::before {
  margin-top: calc(50 * (60rem / 390));
  background: url(../img/star_008.png) top center / 100% auto no-repeat;
  content: "";
}

#Goods002 .product_img::before {
  margin-top: calc(-50 * (60rem / 390));
  background: url(../img/star_009.png) top center / 100% auto no-repeat;
  content: "";
}

#Goods003 .product_img::before {
  margin-top: calc(-50 * (60rem / 390));
  background: url(../img/star_010.png) top center / 100% auto no-repeat;
  content: "";
}

.product_img a {
  position: absolute;
  top: 0;
  left: 0;
}

#FEILER .product_img a:nth-of-type(1) {
  width: calc(180 * (60rem / 390));
  height: calc(180 * (60rem / 390));
  margin: calc(110 * (60rem / 390)) 0 0 calc(30 * (60rem / 390));
}

#FEILER .product_img a:nth-of-type(2) {
  width: calc(180 * (60rem / 390));
  height: calc(180 * (60rem / 390));
  margin: 0 0 0 calc(155 * (60rem / 390));
}

#EnglishTeaShop .product_img a {
  width: calc(310 * (60rem / 390));
  height: calc(370 * (60rem / 390));
  margin: calc(-5 * (60rem / 390)) 0 0 calc(20 * (60rem / 390));
}

#Galler .product_img a:nth-of-type(1) {
  width: calc(230 * (60rem / 390));
  height: calc(270 * (60rem / 390));
  margin: 0 0 0 calc(25 * (60rem / 390));
}

#Galler .product_img a:nth-of-type(2) {
  width: calc(190 * (60rem / 390));
  height: calc(270 * (60rem / 390));
  margin: calc(150 * (60rem / 390)) 0 0 calc(150 * (60rem / 390));
}

#RoseLabo .product_img a {
  width: calc(230 * (60rem / 390));
  height: calc(240 * (60rem / 390));
  margin: 0 0 0 calc(70 * (60rem / 390));
}

#ObyF .product_img a {
  width: calc(150 * (60rem / 390));
  height: calc(370 * (60rem / 390));
  margin: 0 0 0 calc(110 * (60rem / 390));
}

#CosmeKitchenProducts .product_img a:nth-of-type(1) {
  width: calc(170 * (60rem / 390));
  height: calc(350 * (60rem / 390));
  margin: calc(50 * (60rem / 390)) 0 0 calc(30 * (60rem / 390));
}

#CosmeKitchenProducts .product_img a:nth-of-type(2) {
  width: calc(170 * (60rem / 390));
  height: calc(320 * (60rem / 390));
  margin: 0 0 0 calc(180 * (60rem / 390));
}

#Goods001 .product_img a {
  width: calc(290 * (60rem / 390));
  height: calc(290 * (60rem / 390));
  margin: 0 0 0 calc(20 * (60rem / 390));
}

#Goods002 .product_img a {
  width: calc(280 * (60rem / 390));
  height: calc(400 * (60rem / 390));
  margin: 0 0 0 calc(50 * (60rem / 390));
}

#Goods003 .product_img a:nth-of-type(1) {
  width: calc(120 * (60rem / 390));
  height: calc(190 * (60rem / 390));
  margin: calc(90 * (60rem / 390)) 0 0 calc(30 * (60rem / 390));
}

#Goods003 .product_img a:nth-of-type(2) {
  width: calc(200 * (60rem / 390));
  height: calc(200 * (60rem / 390));
  margin: 0 0 0 calc(160 * (60rem / 390));
}

.product_caption_wrap {
  margin-top: calc(30 * (60rem / 390));
  font-weight: 700;
  text-align: center;
}

.product_caption_ttl {
  position: relative;
  padding-bottom: calc(40 * (60rem / 390));
  font-size: calc(20 * (60rem / 390));
  line-height: 1.5;
}

.product_caption_ttl::before {
  position: absolute;
  bottom: 0;
  left: 50%;
  translate: -50% 0;
  width: calc(30 * (60rem / 390));
  height: calc(30 * (60rem / 390));
  margin-bottom: calc(5 * (60rem / 390));
  content: "";
}

.each_product:nth-of-type(1) .product_caption_ttl::before,
.each_product:nth-of-type(6) .product_caption_ttl::before {
  background: url(../img/star_yellow.png) center center / cover no-repeat;
}

.each_product:nth-of-type(2) .product_caption_ttl::before,
.each_product:nth-of-type(7) .product_caption_ttl::before  {
  background: url(../img/star_red.png) center center / cover no-repeat;
}

.each_product:nth-of-type(3) .product_caption_ttl::before,
.each_product:nth-of-type(8) .product_caption_ttl::before {
  background: url(../img/star_green.png) center center / cover no-repeat;
}

.each_product:nth-of-type(4) .product_caption_ttl::before,
.each_product:nth-of-type(9) .product_caption_ttl::before {
  background: url(../img/star_pink.png) center center / cover no-repeat;
}

.each_product:nth-of-type(5) .product_caption_ttl::before {
  background: url(../img/star_blue.png) center center / cover no-repeat;
}

.product_caption {
  font-size: calc(13 * (60rem / 390));
  line-height: 2;
}

.each_product .notes {
  margin-top: calc(25 * (60rem / 390));
  margin-bottom: calc(-20 * (60rem / 390));
  font-size: calc(10 * (60rem / 390));
  line-height: 1.4;
  text-align: center;
}

#EnglishTeaShop.each_product .notes {
  font-weight: 800;
  color: #760F07;
}

#RoseLabo.each_product .notes {
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.variation_list {
  display: flex;
  gap: calc(30 * (60rem / 390));
  margin-top: calc(15 * (60rem / 390));
}

.variation_list dt {
  padding-bottom: calc(5 * (60rem / 390));
  border-bottom: solid calc(1 * (60rem / 390)) var(--color_regular);
  font-size: calc(13 * (60rem / 390));
  font-weight: 500;
}

.variation_list dd .product_price {
  margin-top: calc(8 * (60rem / 390));
  line-height: 1.5;
}

.variation_list dd .variation_detail {
  display: block;
  margin-bottom: calc(6 * (60rem / 390));
  line-height: 1.5;
  white-space: nowrap;
}

body.no_scroll {
  height: 100vh;
  overflow: hidden;
}

body.on_scroll {
  height: auto !important;
  overflow: visible !important;
}

#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%;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  content: "";
}

.abotu_CosmeKitchenProducts::before {
  background: rgba(116, 16, 17, .8);
}

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

.modal_wrap {
  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;
}

.modal_content {
  padding-bottom: calc(35 * (60rem / 390));
  background: url(../img/bg_paper.jpg) top center / 100% auto no-repeat;
}

.abotu_CosmeKitchenProducts .modal_content {
  padding-top: calc(45 * (60rem / 390))
}

.abotu_CosmeKitchenProducts {
  text-align: center;
}

.abotu_CosmeKitchenProducts .about_ttl {
  margin-bottom: calc(25 * (60rem / 390));
  font-size: calc(20 * (60rem / 390));
  font-weight: 700;
  letter-spacing: .1em;
}

.abotu_CosmeKitchenProducts .sub_ttl {
  margin-bottom: calc(35 * (60rem / 390));
  font-size: calc(18 * (60rem / 390));
  font-weight: 800;
  line-height: 1.6;
}

.about_lead_wrap .about_lead {
  font-size: calc(13 * (60rem / 390));
  font-weight: 700;
  line-height: 2;
}

.about_lead_wrap .about_lead:nth-of-type(n+2) {
  margin-top: calc(25 * (60rem / 390));
}

.about_lead_wrap .about_lead .txt_L {
  position: relative;
  display: block;
  margin-top: calc(8 * (60rem / 390));
  padding-top: calc(12 * (60rem / 390));
  font-size: calc(22 * (60rem / 390));
  font-weight: 600;
}

.about_lead_wrap .about_lead .txt_L .txt_kana {
  position: absolute;
  top: 0;
  left: 50%;
  translate: -50% 0;
  font-size: calc(10 * (60rem / 390));
  white-space: nowrap;
}

.btn_modalClose {
  position: relative;
  width: fit-content;
  margin: 0 auto;
  padding: calc(5 * (60rem / 390)) 0 calc(5 * (60rem / 390)) calc(12 * (60rem / 390));
  font-size: calc(13 * (60rem / 390));
  cursor: pointer;
}

.abotu_CosmeKitchenProducts .btn_modalClose {
  margin-top: calc(25 * (60rem / 390));
}

.btn_modalClose::before,
.btn_modalClose::after {
  position: absolute;
  top: 50%;
  left: 0;
  translate: 0 -50%;
  width: calc(10 * (60rem / 390));
  height: calc(1 * (60rem / 390));
  border-radius: calc(10 * (60rem / 390));
  background: var(--color_regular);
  content: "";
}

.btn_modalClose::before {
  rotate: 45deg;
}

.btn_modalClose::after {
  rotate: -45deg;
}

.btn_modalClose span {
  vertical-align: .2em;
}

#Goods001 .product_img_wrap {
  position: relative;
  margin-top: calc(-20 * (60rem / 390));
  padding-bottom: calc(100 * (60rem / 390));
}

.subItem_list_wrap {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  width: calc(174 * (60rem / 390));
  height: calc(174 * (60rem / 390));
  margin: 0 calc(5 * (60rem / 390)) 0 0;
}

.subItem_list {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  width: calc(134 * (60rem / 390));
  height: calc(134 * (60rem / 390));
}

.subItem_list li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: clip;
  background: #fff;
}

.subItem_list li:nth-of-type(1) {
  animation: switch1 8s infinite;
}

.subItem_list li:nth-of-type(2) {
  animation: switch2 8s infinite;
}

@keyframes switch1 {
  0%, 100% {
    opacity: 0;
  }

  20%, 50% {
    opacity: 1;
  }
}

@keyframes switch2 {
  0%, 100% {
    opacity: 1;
  }

  20%, 50% {
    opacity: 0;
  }
}

.btn_allProduct {
  margin-top: calc(70 * (60rem / 390));
}

.btn_allProduct > p {
  margin-bottom: calc(10 * (60rem / 390));
  font-size: calc(15 * (60rem / 390));
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: center;
  color: #F1EBD9;
}

.btn_allProduct a {
  display: grid;
  place-items: center;
  width: calc(330 * (60rem / 390));
  height: calc(74 * (60rem / 390));
  margin: 0 auto;
  border-radius: calc(100 * (60rem / 390));
  background: #F1EBD9;
  border: solid #F1EBD9 calc(1 * (60rem / 390));
  font-size: calc(26 * (60rem / 390));
  font-weight: 700;
  text-align: center;
  transition: background-color .5s, color .5s;
}

.btn_allProduct a:hover {
  background: var(--color_regular);
  color: #F1EBD9;
}

.btn_allProduct a .txt_S {
  display: block;
  margin-bottom: calc(5 * (60rem / 390));
  font-size: calc(16 * (60rem / 390));
  font-weight: 500;
}
/*------------------------product*/

/*profile------------------------*/
.profile_area {
  width: calc(360 * (60rem / 390));
  margin: calc(80 * (60rem / 390)) auto 0;
  padding: calc(35 * (60rem / 390)) 0 calc(40 * (60rem / 390));
  background: url(../img/bg_paper.jpg) top center / 100% auto no-repeat;
  opacity: 0;
  transition: opacity 1s;
}

.profile_area.active {
  opacity: 1;
}

.artist_img {
  width: calc(130 * (60rem / 390));
  margin: 0 auto calc(20 * (60rem / 390));
}

.artist_name {
  width: calc(128 * (60rem / 390));
  margin: 0 auto calc(20 * (60rem / 390));
}

.profile_txt {
  margin-bottom: calc(30 * (60rem / 390));
  font-size: calc(13 * (60rem / 390));
  font-weight: 700;
  line-height: 2;
  text-align: center;
}

.work_list_wrap {
  width: fit-content;
  margin: 0 auto;
}

.work_list_wrap dt {
  margin-bottom: calc(15 * (60rem / 390));
  font-size: calc(15 * (60rem / 390));
  font-weight: 700;
  text-align: center;
}

.work_list {
  width: fit-content;
  margin: 0 auto;
}

.work_list li {
  margin-top: calc(8 * (60rem / 390));
  font-size: calc(12 * (60rem / 390));
  line-height: 1.4;
  font-weight: 700;
  text-indent: -4em;
  padding-left: 4em;
}

.work_list_wrap dd > p {
  margin-top: calc(10 * (60rem / 390));
  font-size: calc(12 * (60rem / 390));
  font-weight: 500;
  text-align: right;
}
/*------------------------profile*/

/*index-------------------------*/
.btn_index {
  position: fixed;
  z-index: 2;
  bottom: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: calc(100 * (60rem / 390));
  height: calc(40 * (60rem / 390));
  margin-bottom: calc(30 * (60rem / 390));
  border-radius: calc(100 * (60rem / 390)) 0 0 calc(100 * (60rem / 390));
  background: #000B42;
  font-size: calc(20 * (60rem / 390));
  font-weight: 500;
  color: #fff;
  cursor: pointer;
}

.btn_index span {
  position: relative;
  padding: 0 0 calc(3 * (60rem / 390)) calc(25 * (60rem / 390));
}

.btn_index span::before,
.btn_index span::after {
  position: absolute;
  top: 50%;
  left: 0;
  translate: 0 -50%;
  width: calc(15 * (60rem / 390));
  height: calc(1 * (60rem / 390));
  border-radius: calc(10 * (60rem / 390));
  background: #fff;
  content: "";
}

.btn_index span::before {
  margin-top: calc(-2 * (60rem / 390));
}

.btn_index span::after {
  margin: calc(2 * (60rem / 390)) 0 0 calc(4 * (60rem / 390));
}

.index_wrap::before {
  background: rgba(0, 11, 66, .8);
}

.index_wrap .modal_content {
  padding: calc(20 * (60rem / 390)) calc(20 * (60rem / 390));
}

.index_wrap .modal_content h3 {
  border-bottom: solid calc(1 * (60rem / 390)) var(--color_regular);
  padding-bottom: calc(10 * (60rem / 390));
  font-size: calc(24 * (60rem / 390));
  font-weight: 500;
}

.nav_list li {
  border-bottom: dotted var(--color_regular) calc(1 * (60rem / 390));
}

.nav_list li a {
  display: flex;
  align-items: center;
  gap: calc(10 * (60rem / 390));
  height: calc(50 * (60rem / 390));
}

.nav_list li a .product_category {
  display: grid;
  place-items: center;
  width: calc(88 * (60rem / 390));
  font-size: calc(11 * (60rem / 390));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: center;
}

.nav_list li a .brand_feiler {
  width: calc(65 * (60rem / 390));
}

.nav_list li a .brand_englishTeaShop {
  width: calc(76 * (60rem / 390));
}

.nav_list li a .brand_galler {
  width: calc(40 * (60rem / 390));
}

.nav_list li a .brand_roselabo {
  width: calc(68 * (60rem / 390));
}

.nav_list li a .brand_obyf {
  width: calc(24 * (60rem / 390));
}

.nav_list li a .product_name {
  flex: 1;
  font-size: calc(15 * (60rem / 390));
  font-weight: 800;
}

.index_wrap .btn_modalClose {
  margin-top: calc(20 * (60rem / 390));
}
/*------------------------index*/

.txt_copyright {
  width: calc(204 * (60rem / 390));
  margin: calc(50 * (60rem / 390)) auto 0;
}

/*shareボタン、shareテキスト---------------------------*/
@media screen and  (max-width:768px) {
#share {
  z-index: 10 !important;
  right: auto !important;
  left: 5%;
}

.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: #023317;
  }
  
  .fixed_left,
  .fixed_right {
    display: grid;
    place-items: center;
    width: calc((100% - 60rem) / 2);
    height: 100%;
  }

  .fixed_left .main_ttl .logo_kurahashirei {
    width: 26rem;
  }

  .fixed_left .main_ttl .logo_cosmekitchen {
    width: 20rem;
  }

  .fixed_left .main_ttl span {
    position: relative;
  }

  .fixed_left .main_ttl span::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    mask-position: center left;
    mask-size: 100% auto;
    mask-repeat: no-repeat;
    -webkit-mask-position: center left;
    -webkit-mask-size: 100% auto;
    -webkit-mask-repeat: no-repeat;
    background: #fff;
    content: "";
  }

  .fixed_left .main_ttl .logo_kurahashirei::before {
    mask-image: url(../img/logo_kurahashirei.svg);
    -webkit-mask-image: url(../img/logo_kurahashirei.svg);
  }

   .fixed_left .main_ttl .logo_cosmekitchen::before {
    mask-image: url(../img/logo_cosmekitchen.svg);
    -webkit-mask-image: url(../img/logo_cosmekitchen.svg);
  }

  .fixed_left .main_ttl span img {
    opacity: 0;
  }

  .pc_nav .nav_list li {
    border-bottom: none;
  }

  .pc_nav .nav_list li:nth-of-type(n+2) {
    margin-top: 1rem;
  }

  .pc_nav .nav_list li a {
    height: 5rem;
    color: #fff;
  }

  .pc_nav .nav_list li a {
    gap: 1.5rem;
  }

  .pc_nav .nav_list li a .product_category {
    width: 10rem;
    font-size: 1.5rem;
  }

  .pc_nav .nav_list li a .product_brand span {
    position: relative;
  }

  .pc_nav .nav_list li a .product_brand span::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    mask-position: center left;
    mask-size: 100% auto;
    mask-repeat: no-repeat;
    -webkit-mask-position: center left;
    -webkit-mask-size: 100% auto;
    -webkit-mask-repeat: no-repeat;
    background: #fff;
    content: "";
  }

  .pc_nav .nav_list li a .product_brand .brand_feiler::before {
    mask-image: url(../img/logo_feiler.svg);
    -webkit-mask-image: url(../img/logo_feiler.svg);
  }

  .pc_nav .nav_list li a .product_brand .brand_englishTeaShop::before {
    mask-image: url(../img/logo_englishTeaShop.svg);
    -webkit-mask-image: url(../img/logo_englishTeaShop.svg);
  }

  .pc_nav .nav_list li a .product_brand .brand_galler::before {
    mask-image: url(../img/logo_galler.svg);
    -webkit-mask-image: url(../img/logo_galler.svg);
  }

  .pc_nav .nav_list li a .product_brand .brand_roselabo::before {
    mask-image: url(../img/logo_roselabo.svg);
    -webkit-mask-image: url(../img/logo_roselabo.svg);
  }

  .pc_nav .nav_list li a .product_brand .brand_obyf::before {
    mask-image: url(../img/logo_obyf.svg);
    -webkit-mask-image: url(../img/logo_obyf.svg);
  }

  .pc_nav .nav_list li a .product_brand span img {
    opacity: 0;
  }

  .pc_nav .nav_list li a .product_name {
    font-size: 1.8rem;
  }

  .pc_nav .nav_list li a .brand_feiler {
    width: 6.8rem;
  }

  .pc_nav .nav_list li a .brand_englishTeaShop {
    width: 7.9rem;
  }

  .pc_nav .nav_list li a .brand_galler {
    width: 4.3rem;
  }

  .pc_nav .nav_list li a .brand_roselabo {
    width: 7.1rem;
  }

  .pc_nav .nav_list li a .brand_obyf {
    width: 2.7rem;
  }



}
/*------------------------------------------------------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));
  }
}
/*-------------------------------レスポンシブ＆タブレット対応*/