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

  padding-top: 0 !important;

}



header {

  opacity: 0;

  pointer-events: none;

  transition: opacity .3s;

}



header.active {

  opacity: 1;

  pointer-events: auto;

}



#FooterWrap {

  position: relative;

  background: #fff;

  z-index: 4;

}



:root {

  --font_regular: "Noto Sans JP", sans-serif;

  --font_mokoko: "mokoko", serif;

  --font_futura: "futura-pt", sans-serif;

  --color_regular: #231815;

  --color_01: #0168AA;

  --color_02: #FCF8F2;

  --color_bg_01: #ebf1f8;

  --color_bg_02: #fff;

}



.LP_page * {

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  line-height: 1;

  font-feature-settings: "palt";

}



.LP_page {

  width: 100%;

  font-family: var(--font_regular);

  color: var(--color_regular);

  overflow-x: clip;

}



.LP_page picture {

  display: block;

  font-size: 0;

}



.LP_page a {

  display: block;

}



.LP_page a:hover {

  opacity: 1 !important;

}



.LP_page img {

  width: 100%;

  height: auto;

  vertical-align: bottom;

}



.LP_page_inner {

  padding-bottom: calc(200 * (55rem / 750));

  background: #fff;

}



.LP_page .activePoint,

.LP_page .activeDelay {

  opacity: 0;

  transform: translateY(calc(30 * (55rem / 750)));

  transition: opacity 1s, transform 1s;

}



.LP_page .activeDelay.delay1 {

  transition-delay: .2s;

}



.LP_page .activeDelay.delay2 {

  transition-delay: .4s;

}



.LP_page .activeDelay.delay3 {

  transition-delay: .6s;

}



.LP_page .activeDelay.delay4 {

  transition-delay: .8s;

}



.LP_page .activePoint.active,

.LP_page .activePoint.active > .activeDelay {

  opacity: 1;

  transform: unset;

}

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



/*ローディング---------------------*/

.animation_area {

  position: fixed;

  z-index: 300;

  top: 0;

  width: 100%;

  height: 100lvh;

  background: #fff;

  transition: opacity .3s;

  overflow: clip;

}



.animation_area:not(.hide) {

  animation: fadein 1s 7.5s forwards reverse;

}



.animation_area.hide {

  opacity: 0;

  pointer-events: none;

}



.animation_area .btn_skip {

  position: absolute;

  z-index: 1;

  top: 0;

  right: 0;

  margin: calc(40 * (55rem / 750)) calc(40 * (55rem / 750)) 0 0;

  padding-right: calc(20 * (55rem / 750));

  font-family: var(--font_mokoko);

  font-size: calc(30 * (55rem / 750));

  font-weight: 900;

  letter-spacing: 0;

  color: var(--color_01);

  cursor: pointer;

  mix-blend-mode: multiply;

}



.animation_area .btn_skip::before {

  position: absolute;

  top: 50%;

  right: 0;

  translate: 0 -50%;

  border-left: solid calc(12 * (55rem / 750)) var(--color_01);

  border-top: solid calc(10 * (55rem / 750)) transparent;

  border-bottom: solid calc(10 * (55rem / 750)) transparent;

  content: "";

}



.animation_area .each_frame {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}



.animation_area .each_frame.frame1 {

  background: #f8f8f9;

}



.animation_area .each_frame.frame1::after,

.animation_area .each_frame.frame2::after,

.animation_area .each_frame.frame3::after {

  position: absolute;

  top: 50%;

  left: 0;

  translate: 0 -50%;

  width: 100%;

  height: calc(400 * (55rem / 750));

  margin-top: calc(250 * (55rem / 750));

  content: "";

  opacity: 0;

  animation: fadein .7s forwards;

}



.animation_area .each_frame.frame1::after {

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

  animation-delay: 1s;

}



.animation_area .each_frame.frame2::after {

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

  animation-delay: 1.9s;

}



.animation_area .each_frame.frame3::after {

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

  animation-delay: 2.8s;

}



.animation_area .each_frame.frame1::before,

.animation_area .each_frame.frame2::before,

.animation_area .each_frame.frame3::before {

  position: absolute;

  top: 50%;

  left: 0;

  transform: translateY(-50%);

  width: 100%;

  margin-top: calc(-250 * (55rem / 750));

  font-family: var(--font_mokoko);

  font-size: calc(415 * (55rem / 750));

  font-weight: 900;

  text-align: center;

  color: var(--color_01);

  opacity: 0;

  animation: poyoyon2 .9s ease-in-out forwards;

}



.animation_area .each_frame.frame1::before {

  content: "3";

  animation-delay: 1s;

}



.animation_area .each_frame.frame2::before {

  content: "2";

  animation-delay: 1.9s;

}



.animation_area .each_frame.frame3::before {

  content: "1";

  animation-name: poyoyon;

  animation-delay: 2.8s;

}





.animation_area .each_frame.frame4 {

  background: #fff;

  opacity: 0;

  animation: fadein .8s 4s forwards;

}



.animation_area .each_frame.frame5 {

  opacity: 0;

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

  animation: fadein 2s 4.2s forwards;

}



.animation_area .each_frame.frame6::before {

  position: absolute;

  top: 50%;

  left: 50%;

  translate: -50% -50%;

  width: calc(850 * (55rem / 750));

  height: calc(1300 * (55rem / 750));

  margin: auto;

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

  content: "";

  scale: 0;

  animation: expansion .8s 5.5s ease-in-out forwards;

}



.animation_area .each_frame.frame7 {

  position: absolute;

  top: 50%;

  left: 50%;

  translate: -50% -50%;

  width: calc(100% * 2);

  height: calc(100% * 1.5);

}



.animation_area .each_frame.frame7 > div {

  display: block;

  width: 100%;

  height: calc(275 * (55rem / 750));

  margin-top: calc(250 * (55rem / 750));

  background: var(--color_01);

  rotate: -18.3deg;

  content: "";

  transform: translateX(-100%);

  animation: slidein_fromLeft .5s 7s linear forwards, border 1s 8s forwards;

}



.animation_area .each_frame.frame7::before {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: #fff;

  rotate: -18.3deg;

  content: "";

  transform: translateX(100%);

  animation: slidein_fromRight .5s 7.3s linear forwards;

}



.animation_area .each_frame.frame8 {

  opacity: 0;

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

  animation: fadein 1s 5s forwards;

}



@keyframes poyoyon {

  0%  {

    scale: 1 1;

    translate: 0 0;

    opacity: 0;

  }



  15% {

    scale: .7 .8;

    translate: 0 3%;

    opacity: 0;

  }

  

  30% {

    scale: 1.4 .9;

    translate: 0 6%;

    opacity: 1;

  }

  

  50% {

    scale: .9 1.2;

    translate: 0 -4%;

  }



  70% {

    scale: 1.1 .8;

    translate: 0 1%;

  }



  100% {

    scale: 1 1;

    translate: 0 0;

    opacity: 1;

  }

}



@keyframes poyoyon2 {

  0%  {

    scale: 1 1;

    translate: 0 0;

    opacity: 0;

  }



  15% {

    scale: .7 .8;

    translate: 0 3%;

    opacity: 0;

  }

  

  30% {

    scale: 1.4 .9;

    translate: 0 6%;

    opacity: 1;

  }

  

  50% {

    scale: .9 1.2;

    translate: 0 -4%;

  }



  70% {

    scale: 1.1 .8;

    translate: 0 1%;

  }



  93% {

    opacity: 1;

  }



  100% {

    scale: 1 1;

    translate: 0 0;

    opacity: 0;

  }

}



@keyframes fadein {

  0%  {

    opacity: 0;

  }



  100% {

    opacity: 1;

  }

}



@keyframes expansion {

  0%  {

    scale: 0 0;

    transform: translateY(0);

  }

  

  30% {

    scale: 1.2 .9;

    transform: translateY(6%);

  }

  

  50% {

    scale: .8 1.2;

    transform: translateY(-4%);

  }



  70% {

    scale: 1.1 .8;

    transform: translateY(1%);

  }



  100% {

    scale: 1 1;

    transform: translateY(0);

  }

}



@keyframes border {

  0%  {

    scale: 1;

    margin-top: calc(250 * (55rem / 750));

    translate: 0 0;

  }



  100% {

    scale: 2.2;

    margin-top: calc(700 * (55rem / 750));

    translate: 0 calc(-150 * (55rem / 750));

  }

}



@keyframes slidein_fromLeft {

  0%  {

   transform: translateX(-100%);

  }



  100% {

    transform: unset;

  }

}



@keyframes slidein_fromRight {

  0%  {

    transform: translateX(100%);

  }



  100% {

    transform: unset;

  }

}



.main_area {

  opacity: 0;

  transition: opacity 1s;

}



.main_area.active {

  opacity: 1;

}

/*---------------------ローディング*/



/*beginning----------------------*/



.mv {

  height: 100lvh;

}



.mv img {

  height: 100%;

  object-fit: cover;

}



.fixed_nav {

  position: fixed;

  z-index: 200;

  bottom: 0;

  width: 100%;

  translate: 0 100%;

  transition: translate .5s;

}



.fixed_nav.active {

  translate: 0 0;

}



.nav_list {

  display: grid;

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

}



.nav_list li {

  position: relative;

}



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

  position: absolute;

  top: 50%;

  left: 0;

  translate: 0 -50%;

  width: calc(2 * (55rem / 750));

  height: calc(100% - calc(40 * (55rem / 750)));

  background: #fff;

  content: "";

}



.nav_list li a {

  display: grid;

  place-items: center;

  height: calc(110 * (55rem / 750));

  background: var(--color_01);

  font-family: var(--font_mokoko);

  font-size: calc(33 * (55rem / 750));

  letter-spacing: .1em;

  color: #fff;

}



.beginning_area {

  padding: calc(120 * (55rem / 750)) 0;

}



.main_lead_wrap {

  margin-bottom: calc(160 * (55rem / 750));

}



.main_lead_img {

  width: calc(310 * (55rem / 750));

  margin: 0 auto calc(60 * (55rem / 750));

}



.main_lead {

  font-size: calc(30 * (55rem / 750));

  line-height: 2.1;

  letter-spacing: .1em;

  text-align: center;

}



.main_lead_wrap .main_lead:nth-of-type(n+2) {

  margin-top: calc(70 * (55rem / 750));

}



.schedule_list {

  width: fit-content;

  margin: 0 auto;

}



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

  margin-top: calc(28 * (55rem / 750));

}



.schedule_list li dl {

  display: flex;

  align-items: center;

  gap: calc(25 * (55rem / 750));

}



.schedule_list li dl dt {

  display: grid;

  place-items: center;

  width: calc(184 * (55rem / 750));

  height: calc(67 * (55rem / 750));

  border-radius: calc(6 * (55rem / 750));

  background: var(--color_01);

  font-size: calc(30 * (55rem / 750));

  letter-spacing: .2em;

  color: #fff;

}



.schedule_list li dl dd {

  font-family: var(--font_futura);

  font-size: calc(64 * (55rem / 750));

  font-weight: 500;

  letter-spacing: .02em;

  color: var(--color_01);

}



.schedule_list li dl dd span {

  margin: 0 calc(8 * (55rem / 750));

  vertical-align: calc(8 * (55rem / 750));

}



.schedule_list li dl dd .txt_S {

  font-size: calc(21 * (55rem / 750));

  vertical-align: calc(15 * (55rem / 750));

}



.beginning_area .LP_logo {

  width: calc(290 * (55rem / 750));

  margin: calc(110 * (55rem / 750)) auto 0;

}



/*----------------------beginning*/



/*lineup-------------------------*/

.lineup_area .each_product {

  padding: calc(140 * (55rem / 750)) 0;

}



.lineup_area .each_product:nth-of-type(odd) {

  background: var(--color_bg_01);

}



.lineup_area .each_product .itm_num {

  position: relative;

  width: fit-content;

  margin: 0 auto calc(70 * (55rem / 750));

  padding-bottom: calc(45 * (55rem / 750));

  font-family: var(--font_mokoko);

  font-size: calc(138 * (55rem / 750));

  font-weight: 900;

  letter-spacing: .05em;

  text-align: center;

  color: var(--color_01);

}



.lineup_area .each_product .itm_num::before {

  position: absolute;

  z-index: 1;

  bottom: 0;

  left: 0;

  width: calc(200 * (55rem / 750));

  height: calc(80 * (55rem / 750));

  margin-left: calc(-20 * (55rem / 750));

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

  content: "";

}



.lineup_area .each_product .itm_num svg {

  display: block;

  width: calc(288 * (55rem / 750));

  margin-bottom: calc(-25 * (55rem / 750));

}



.lineup_area .each_product .itm_num svg path {

  opacity: 0;

  transition: opacity .3s;

}



.lineup_area .each_product .itm_num .num_animation {

  display: block;

  opacity: 0;

}



.lineup_area .each_product .itm_num.active .num_animation {

  animation: poyoyon 1s .6s ease-in-out forwards;

}



.lineup_area .each_product .itm_name .itm_brand {

  display: block;

  margin-bottom: calc(10 * (55rem / 750));

  font-family: var(--font_mokoko);

  font-size: calc(38 * (55rem / 750));

  font-weight: 900;

  letter-spacing: .005em;

  text-align: center;

}



.lineup_area .each_product .itm_name {

  margin-bottom: calc(30 * (55rem / 750));

  font-size: calc(26 * (55rem / 750));

  font-weight: 400;

  letter-spacing: .2em;

  text-align: center;

}



.lineup_area .each_product .itm_name .txt_eng {

  display: block;

  margin-bottom: calc(20 * (55rem / 750));

  font-family: var(--font_futura);

  font-size: calc(138 * (55rem / 750));

  font-weight: 100;

  letter-spacing: .05em;

}



.lineup_area #Product05.each_product .itm_name .txt_eng,

.lineup_area #Product12.each_product .itm_name .txt_eng {

  font-size: calc(114 * (55rem / 750));

}



.lineup_area .each_product .itm_img_wrap {

  position: relative;

}



.lineup_area .each_product .itm_img_wrap .itm_feature {

  position: absolute;

  top: 0;

  right: 0;

  width: fit-content;

}



.lineup_area .each_product .itm_img_wrap .itm_feature a {

  position: relative;

  z-index: 1;

  display: grid;

  place-items: center;

  width: calc(230 * (55rem / 750));

  height: calc(230 * (55rem / 750));

  margin: calc(30 * (55rem / 750)) calc(50 * (55rem / 750)) 0 0;

  border-radius: 50%;

  background: var(--color_01);

  animation: circle 3s infinite;

}



@keyframes circle {

  0% {

    scale: 1;

  }



  50% {

    scale: 1.05;

  }



  100% {

    scale: 1;

  }

}



.lineup_area .each_product .itm_img_wrap .itm_feature a::before {

  position: absolute;

  z-index: -1;

  bottom: 0;

  left: 50%;

  translate: -50% 0;

  width: calc(238 * (55rem / 750));

  height: calc(55 * (55rem / 750));

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

  pointer-events: none;

  content: "";

}



.lineup_area .each_product .itm_img_wrap .itm_feature a p {

  position: relative;

  padding-top: calc(20 * (55rem / 750));

  font-family: var(--font_mokoko);

  font-size: calc(30 * (55rem / 750));

  line-height: 1.3;

  letter-spacing: .09em;

  text-align: center;

  color: #fff;

}



.lineup_area .each_product .itm_img_wrap .itm_feature a p .txt_S {

  font-family: var(--font_regular);

  font-size: calc(22 * (55rem / 750));

}



.lineup_area .each_product .itm_caption {

  margin-top: calc(30 * (55rem / 750));

  font-size: calc(36 * (55rem / 750));

  line-height: 1.8;

  letter-spacing: .025em;

  text-align: center;

}



.lineup_area .each_product .itm_caption span {

  display: block;

  letter-spacing: .1em;

}



.lineup_area .each_product .itm_caption .txt_S {

  margin-top: calc(25 * (55rem / 750));

  font-size: calc(22 * (55rem / 750));

  line-height: 1.8;

}



.lineup_area .each_product .itm_caption .notes {

  margin-top: calc(20 * (55rem / 750));

  font-size: calc(18 * (55rem / 750));

}



.lineup_area .each_product .itm_link {

  width: fit-content;

  margin: calc(50 * (55rem / 750)) auto 0;

}



.lineup_area .each_product .itm_link a {

  display: grid;

  place-items: center;

  width: calc(688 * (55rem / 750));

  height: calc(140 * (55rem / 750));

  border-radius: calc(200 * (55rem / 750));

  background: var(--color_regular);

}



.lineup_area .each_product .itm_link a .itm_price {

  font-family: var(--font_futura);

  font-size: calc(67 * (55rem / 750));

  font-weight: 500;

  letter-spacing: .05em;

  color: #fff;

}



.lineup_area .each_product .itm_link a .itm_price .txt_tax {

  margin-left: calc(20 * (55rem / 750));

  font-family: var(--font_regular);

  font-size: calc(37 * (55rem / 750));

  font-weight: 400;

  letter-spacing: .12em;

  vertical-align: calc(8 * (55rem / 750));

}



.lineup_area .each_product .itm_link a .itm_price .txt_S {

  margin-right: calc(30 * (55rem / 750));

  font-family: var(--font_regular);

  font-size: calc(37 * (55rem / 750));

  font-weight: 400;

  letter-spacing: .12em;

  vertical-align: calc(8 * (55rem / 750));

}



/*-------------------------lineup*/



/*フッター-------------------------*/

.btn_allitem {

  width: fit-content;

  margin: 0 auto

}



.btn_allitem a {

  display: grid;

  place-items: center;

  width: calc(688 * (55rem / 750));

  height: calc(140 * (55rem / 750));

  border-radius: calc(200 * (55rem / 750));

  background: var(--color_01);

  font-family: var(--font_mokoko);

  font-size: calc(55 * (55rem / 750));

  letter-spacing: .06em;

  color: #fff;

}



.logo_peanuts {

  width: calc(250 * (55rem / 750));

  margin: calc(200 * (55rem / 750)) auto 0;

}



/*-------------------------フッター*/





/*TOPへ戻る------------------------*/

.btn_toPageTop {

  position: fixed;

  z-index: 5;

  top: 0;

  width: fit-content;

  margin-left: calc(520 * (55rem / 750));

  padding-top: calc(40 * (55rem / 750));

  scale: 0;

  transition: scale .3s;

}



.btn_toPageTop.active {

  scale: 1;

}



.btn_toPageTop a {

  display: grid;

  place-items: center;

  width: calc(180 * (55rem / 750));

  height: calc(180 * (55rem / 750));

  padding-top: calc(10 * (55rem / 750));

  border-radius: 50%;

  background: var(--color_01);

  font-family: var(--font_mokoko);

  font-size: calc(35 * (55rem / 750));

  line-height: 1.3;

  letter-spacing: .1em;

  text-align: center;

  color: #fff;

}



/*------------------------TOPへ戻る*/



/*モーダル--------------------------*/

body.no_scroll {

  height: 100vh;

  overflow: hidden;

}



header.hide,

#share.hide {

  opacity: 0;

  pointer-events: none;

  transition: opacity 0s !important;

}



.modal_outside.hide {

  opacity: 0;

  pointer-events: none;

  overflow-y: auto;

}



.modal_outside {

  position: fixed;

  z-index: 100;

  top: 0;

  display: flex;

  align-items: center;

  width: 100%;

  height: 100%;

  transition: opacity .5s;

  overflow-y: scroll;

}



.modal_outside::before {

  position: absolute;

  z-index: -1;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: #fff;

  content: "";

}



.modal_overlay {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}



.modal_wrap {

  width: 100%;

  margin: 0 auto;

  max-height: 100%;

  padding: 6rem 0;

  overflow-y: scroll;

  -ms-overflow-style: none;

  scrollbar-width: none;

}



.modal_wrap::-webkit-scrollbar {

  display:none;

}



.modal_inner {

  position: relative;

}



.modal_close_wrap {

  position: fixed;

  top: 0;

  width: fit-content;

  margin: calc(40 * (55rem / 750)) 0 0 calc(40 * (55rem / 750));

}



.modal_close_wrap button {

  width: calc(70 * (55rem / 750));

  padding-top: calc(85 * (55rem / 750));

  border: none;

  background: transparent;

  font-family: var(--font_futura);

  font-size: calc(18 * (55rem / 750));

  font-weight: 500;

  letter-spacing: .2em;

  color: var(--color_01);

  cursor: pointer;

}



.modal_close_wrap button::before,

.modal_close_wrap button::after {

  position: absolute;

  top: 0;

  left: 50%;

  translate: -50% 0;

  width: calc(2 * (55rem / 750));

  height: calc(85 * (55rem / 750));

  background: var(--color_01);

  content: "";

}



.modal_close_wrap button::before {

  rotate: 45deg;

}



.modal_close_wrap button::after {

  rotate: -45deg;

}



.CosmeKitchenProducts_area h3 {

  margin-bottom: calc(40 * (55rem / 750));

  font-family: var(--font_mokoko);

  font-size: calc(43 * (55rem / 750));

  font-weight: 900;

  letter-spacing: .005em;

  text-align: center;

  color: var(--color_01);

}



.CosmeKitchenProducts_area .area_lead {

  font-size: calc(22 * (55rem / 750));

  line-height: 1.8;

  letter-spacing: .025em;

  text-align: center;

}



.CosmeKitchenProducts_area .area_lead:nth-of-type(n+2) {

  margin-top: calc(40 * (55rem / 750));

}





.feature_list_wrap {

  margin-top: calc(70 * (55rem / 750));

  padding: 0 calc(40 * (55rem / 750));

}



.feature_list_wrap dt {

  position: relative;

  margin: 0 calc(25 * (55rem / 750)) calc(40 * (55rem / 750));

  font-family: var(--font_futura);

  font-size: calc(40 * (55rem / 750));

  font-weight: 500;

  letter-spacing: .15em;

  text-align: center;

  color: var(--color_01);

}



.feature_list_wrap dt::before,

.feature_list_wrap dt::after {

  position: absolute;

  top: 50%;

  translate: 0 -50%;

  width: calc(200 * (55rem / 750));

  height: calc(2 * (55rem / 750));

  background: var(--color_01);

  content: "";

}



.feature_list_wrap dt::before {

  left: 0;

}



.feature_list_wrap dt::after {

  right: 0;

}



.feature_list_wrap dd {

  width: fit-content;

  margin: 0 auto;

}



.feature_list_wrap li span {

  position: absolute;

  top: 0;

  left: 0;

  display: grid;

  place-items: center;

  width: calc(40 * (55rem / 750));

  height: calc(40 * (55rem / 750));

  border-radius: 50%;

  background: var(--color_01);

  font-family: var(--font_futura);

  font-size: calc(20 * (55rem / 750));

  font-weight: 500;

  color: #fff;

}



.feature_list_wrap li span::before {

  position: absolute;

  right: 0;

  bottom: 0;

  width: calc(63 * (55rem / 750));

  height: calc(63 * (55rem / 750));

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

  content: "";

}



.feature_list_wrap li {

  position: relative;

  padding-left: calc(50 * (55rem / 750));

  font-size: calc(25 * (55rem / 750));

  font-weight: 500;

  line-height: 1.5;

  letter-spacing: .03em;

  color: var(--color_01);

}



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

  margin-top: calc(40 * (55rem / 750));

}



/*--------------------------モーダル*/



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

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

#share {

  z-index: 10 !important;

  transition: translate .5s;

  scale: 0;

  transition: scale .3s;

  background: var(--color_regular) !important;

}



#share.active {

  scale: 1;

}



#share.move {

  translate: 0 calc(-110 * (55rem / 750));

}



.share-txt {

  display: none;

}



.only_pc {

  display: none;

}



}

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





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

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

  .only_sp {

    display: none;

  }



  .LP_page {

    position: relative;

    z-index: 1;

    background: #c8ddf0;

  }



  .LP_page_inner {

    position: relative;

    z-index: 1;

    min-height: 100vh;

    margin: 0 auto;

    overflow: clip;

  }



  .LP_page_inner,

  .fixed_nav,

  .modal_outside,

  .animation_area {

    width: 55rem;

  }



  .mv,

  .animation_area {

    max-height: 120rem;

  }



  .fixed_area {

    position: fixed;

    top: 0;

    left: 50%;

    translate: -50% 0;

    z-index: 1;

    display: flex;

    justify-content: space-between;

    width: 100%;

    max-width: 160rem;

    height: 100%;

    margin: 0 auto;

  }

  

  .fixed_left,

  .fixed_right {

    display: grid;

    place-items: center;

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

    max-width: calc((160rem - 55rem) / 2);

    height: 100%;

  }



  #BrandID_CK .fixed_left,

  #BrandID_CK .fixed_right {

    padding-top: 7rem;

  }



  #BrandID_BP .fixed_left,

  #BrandID_BP .fixed_right {

    padding-top: 20rem;

  }



  .main_ttl_pc {

    width: 18.8rem;

  }



  .PCnavigation_list > li {

    position: relative;

  }



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

    margin-top: 7rem;

  }



  .PCnavigation_list > li a {

    font-family: var(--font_mokoko);

    font-size: 2.3rem;

    font-weight: 900;

    letter-spacing: .1em;

    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 / 550));

  }

}

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