@charset "UTF-8";



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

html {

  font-size: 62.5%;

}



html {

  -ms-overflow-style: none;

  scrollbar-width: none;

}



html::-webkit-scrollbar {

  display:none;

}



body {

  -webkit-tap-highlight-color: transparent;

}



#Wrap {

  width: auto;

  padding: 0 !important;

}



#header {

  position: fixed;

  top: 0 !important;

  right: 0;

  left: 0;

  z-index: 999;

  animation: none !important;

}



header {

  white-space: nowrap;

}



#FooterWrap {

  display: none;

}



:root {

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

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

  --color_regular: #231814;

  --color_01: #FFAA00;

  --color_02: #A4CFC2;

  --color_03: #0F8E6F;

  --color_04: #957E60;

}



.LP_page * {

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  line-height: 1;

  font-feature-settings: "palt";

}



.LP_page {

  width: 100%;

  background: var(--color_02);

  font-family: var(--font_regular);

  color: var(--color_regular);

  overflow-x: clip;

}



.LP_page.fixed {

  position: fixed;

}



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

}



.fade.activePoint,

.fade.activeDelay {

  opacity: 0;

  transition: opacity 1s;

}



.fade.activePoint.active,

.fade.activePoint.active > .activeDelay {

  opacity: 1;

}

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

.fixed_area_01,

.fixed_area_02 {

  position: fixed;

  left: 50%;

  translate: -50% 0;

  z-index: 5;

  width: 100%;

}



.fixed_area_01 {

  height: calc(545 * (50rem / 1170));

  opacity: 0;

  pointer-events: none;

  transition: opacity .3s;

}



.fixed_area_01.background {

  animation: bg_fade .1s .6s steps(1) forwards;



}



@keyframes bg_fade {

  0% {

    background: transparent;

  }



  100% {

    background: var(--color_02);

  }

}



.fixed_area_01.active {

  opacity: 1;

  pointer-events: auto;

}



.fixed_area_01 .logo_giovanni {

  position: absolute;

  bottom: 0;

  left: 0;

  width: calc(416 * (50rem / 1170));

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

}



.btn_about_wrap {

  margin: 0 auto;

}



.btn_about {

  position: fixed;

  z-index: 10;

  margin: calc(227 * (50rem / 1170)) 0 0 calc(875 * (50rem / 1170));

  opacity: 0;

  pointer-events: none;

  transition: opacity .3s;

}



.btn_about.active {

  opacity: 1;

  pointer-events: auto;

}



.btn_about a {

  display: grid;

  place-items: center;

  width: calc(268 * (50rem / 1170));

  height: calc(268 * (50rem / 1170));

  border-radius: 50%;

  background: var(--color_01);

  font-size: calc(26 * (50rem / 1170));

  font-weight: 700;

  letter-spacing: .05em;

  text-align: center;

}



.btn_about a .txt_eng {

  display: block;

  margin-bottom: calc(10 * (50rem / 1170));

  font-family: var(--font_eng);

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

  font-weight: 600;

}



.fixed_area_02 {

  margin-top: calc(1715 * (50rem / 1170));

  padding-bottom: calc(30 * (50rem / 1170));

  opacity: 0;

  transition: opacity .3s;

  pointer-events: none;

}



.fixed_area_02.active {

  opacity: 1;

  pointer-events: auto;

}



.fixed_area_02::before {

  position: absolute;

  top: 0;

  left: 50%;

  translate: -50% 0;

  margin-top: calc(110 * (50rem / 1170));

  font-family: var(--font_eng);

  font-weight: 500;

  font-size: calc(48 * (50rem / 1170));

  color: var(--color_03);

  white-space: nowrap;

  content: "scroll";

  pointer-events: none;

}



.fixed_area_02::after {

  position: absolute;

  top: 0;

  left: 50%;

  translate: -50% 0;

  margin-top: calc(200 * (50rem / 1170));

  width: calc(3 * (50rem / 1170));

  height: calc(124 * (50rem / 1170));

  background: var(--color_03);

  content: "";

  animation: flush 3s infinite;

  pointer-events: none;

}



@keyframes flush {

  0% {

    scale: 1 0;

    transform-origin: top center;

  }



  45% {

    scale: 1 1;

    transform-origin: top center;

  }



  55% {

    scale: 1 1;

    transform-origin: bottom center;

  }



  100% {

    scale: 1 0;

    transform-origin: bottom center;

  }

}



.fixed_area_02 .btn_buy {

  position: absolute;

  top: 0;

  left: 0;

  margin: calc(40 * (50rem / 1170)) 0 0 calc(70 * (50rem / 1170));

  animation: float 3s ease-in-out infinite reverse;

  pointer-events: none;

}



.fixed_area_02.active .btn_buy {

  pointer-events: auto;

}



.fixed_area_02 .btn_buy a {

  display: grid;

  place-items: center;

  width: calc(250 * (50rem / 1170));

  height: calc(250 * (50rem / 1170));

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

  font-family: var(--font_eng);

  font-size: calc(60 * (50rem / 1170));

  font-weight: 600;

  letter-spacing: .05em;

  content: "";

  rotate: -10deg;

}



.fixed_area_02 .btn_buy a span {

  padding-top: calc(30 * (50rem / 1170));

}



.fixed_area_02 .btn_kit {

  width: calc(450 * (50rem / 1170));

  margin: calc(40 * (50rem / 1170)) calc(40 * (50rem / 1170))0 auto;

  transform: translateX(100%);

  opacity: 0;

  transition: transform .8s, opacity .8s;

  pointer-events: none;

  animation: float 3.5s ease-in-out infinite;

}



@keyframes float {

  0% {

    translate: 0 calc(8 * (50rem / 1170));

  }



  50% {

    translate: 0 calc(-8 * (50rem / 1170));

  }



  100% {

    translate: 0 calc(8 * (50rem / 1170));

  }

}



.fixed_area_02 .btn_kit.active {

  transform: unset;

  opacity: 1;

}



.fixed_area_02.active .btn_kit.active {

  pointer-events: auto;

}



.fixed_area_02 .btn_kit figure {

  position: relative;

  z-index: 1;

  width: calc(260 * (50rem / 1170));

  margin: calc(15 * (50rem / 1170)) auto 0;

  border-radius: 50%;

}



.fixed_area_02 .btn_kit figure::before,

.fixed_area_02 .btn_kit figure::after {

  position: absolute;

  z-index: -1;

  top: 50%;

  left: 50%;

  translate: -50% -50%;

  border-radius: 50%;

  content: "";

}



.fixed_area_02 .btn_kit figure::before {

  width: calc(100% + calc(40 * (50rem / 1170)));

  height: calc(100% + calc(40 * (50rem / 1170)));

  background: #fff;

}



.fixed_area_02 .btn_kit figure::after {

  width: calc(100% + calc(15 * (50rem / 1170)));

  height: calc(100% + calc(15 * (50rem / 1170)));

  background: var(--color_04);

}



.LP_page_inner {

  margin: 0 auto;

}



.story_img_outside {

  position: relative;

  z-index: 2;

  width: 50rem;

  height: 100lvh;

  transition: margin 2s;

}



.story_img_outside::before {

  position: fixed;

  z-index: -1;

  top: 0;

  left: 50%;

  translate: -50% 0;

  width: 100%;

  height: 100vh;

  background: var(--color_02);

  content: "";

  pointer-events: none;

}



.story_img_outside::after {

  position: fixed;

  z-index: -1;

  bottom: 0;

  left: 50%;

  translate: -50% 0;

  width: 100%;

  height: calc(1170 * (50rem / 1170));

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

  content: "";

  pointer-events: none;

}



.story_img_outside.finish {

  margin-bottom: calc(-100lvh + calc(515 * (50rem / 1170)));

  transition: margin 2s;

}



.story_img_outside.finish.restart {

  margin-bottom: 0;

}



.story_img_list {

  height: 100%;

}



.story_img {

  height: 100% !important;

  padding-top: calc(545 * (50rem / 1170));

}



.each_slide {

  position: relative;

}



.each_slide.mv::before {

  position: absolute;

  z-index: 1;

  top: 0;

  width: 100%;

  margin-top: calc(1815 * (50rem / 1170));

  font-family: var(--font_eng);

  font-weight: 500;

  font-size: calc(48 * (50rem / 1170));

  text-align: center;

  color: #fff;

  white-space: nowrap;

  content: "scroll";

  opacity: 0;

  pointer-events: none;

}



.swiper-slide-active.each_slide.mv::before {

  animation: fade_in 1s 4s forwards, to_up 1s 4s forwards;

}



.each_slide.mv::after {

  position: absolute;

  z-index: 1;

  top: 0;

  left: 50%;

  margin-top: calc(1905 * (50rem / 1170));

  width: calc(3 * (50rem / 1170));

  height: calc(124 * (50rem / 1170));

  background: #fff;

  content: "";

  opacity: 0;

  pointer-events: none;

}



.swiper-slide-active.each_slide.mv::after {

  animation: fade_in 1s 4s forwards, to_up 1s 4s forwards, flush 3s infinite;

}



.each_slide img {

  position: absolute;

  opacity: 0;

}



.swiper-slide-prev.each_slide img {

  opacity: 1;

  animation: fade_out 1s forwards;

}



.swiper-slide-active.each_slide.mv img.mv_01,

.swiper-slide-active.each_slide.story_01 img,

.swiper-slide-active.each_slide.story_02 img.img_01,

.swiper-slide-active.each_slide.story_03 img.img_02,

.swiper-slide-active.each_slide.story_04 img,

.swiper-slide-active.each_slide.story_05 img,

.swiper-slide-active.each_slide.story_06 img.img_01,

.swiper-slide-active.each_slide.story_06 img.img_02,

.swiper-slide-active.each_slide.story_07 img,

.swiper-slide-active.each_slide.story_08 img.img_01,

.swiper-slide-active.each_slide.story_08 img.img_06 {

  animation: fade_in 1s forwards, to_up 1s forwards;

}



.swiper-slide-active.each_slide.story_01 img.img_02,

.swiper-slide-active.each_slide.story_04 img.img_02,

.swiper-slide-active.each_slide.story_05 img.img_02,

.swiper-slide-active.each_slide.story_06 img.img_02,

.swiper-slide-active.each_slide.story_07 img.img_02 {

  animation-delay: 1s;

}



.swiper-slide-active.each_slide.mv img.mv_02,

.swiper-slide-active.each_slide.mv img.mv_04 {

  animation: fade_in 2s 1s forwards, to_right 1s 1s forwards

}



.swiper-slide-active.each_slide.mv img.mv_03 {

  animation: fade_in 2s 1s forwards, to_left 1s 1s forwards

}



.swiper-slide-active.each_slide.mv img.mv_05 {

  animation: fade_in 2s 1.6s forwards, to_left 1s 1.6s forwards

}



.swiper-slide-active.each_slide.mv img.mv_06 {

  animation: fade_in 2s 1.6s forwards, to_right 1s 1.6s forwards

}



.swiper-slide-active.each_slide.mv img.mv_07 {

  animation: fade_in 2s 2s forwards, to_up 1s 2s forwards

}



.swiper-slide-active.each_slide.mv img.mv_08 {

  animation: fade_in 2s 2.4s forwards, to_up 1s 2.4s forwards

}



.swiper-slide-active.each_slide.mv img.mv_09 {

  animation: fade_in 2s 2.8s forwards, to_up 1s 2.8s forwards

}



.swiper-slide-active.each_slide.mv img.mv_10 {

  animation: fade_in 2s 3.2s forwards, to_up 1s 3.2s forwards

}



.swiper-slide-active.each_slide.story_02 img.img_02 {

  animation: fade_in 1s 1s forwards

}



.swiper-slide-active.each_slide.story_02 img.img_03 {

  animation: fade_in 1s 2s forwards

}



.swiper-slide-active.each_slide.story_03 img.img_01 {

  animation: fade_in 1s forwards, to_up 1s forwards, to_left2 1s 1s forwards;

}



.each_slide.story_03 img.img_01 {

  left: auto;

  right: 0;

  width: auto;

  height: calc(1170 * (50rem / 1170));

}



.swiper-slide-prev.each_slide.story_03 img.img_01 {

  right: auto;

  left: 0;

}



.swiper-slide-active.each_slide.story_03 img.img_02 {

  animation-delay: 2s;

}



.swiper-slide-active.each_slide.story_06 img.img_03 {

  animation: fade_in 1s 1.5s forwards

}



.swiper-slide-active.each_slide.story_06 img.img_04 {

  animation: fade_in 1s 2s forwards

}



.swiper-slide-active.each_slide.story_06 img.img_05 {

  animation: fade_in 1s 2.6s forwards

}



.swiper-slide-active.each_slide.story_06 img.img_06 {

  animation: fade_in 1s 3.2s forwards

}



.swiper-slide-active.each_slide.story_06 img.img_07 {

  animation: fade_in 1s 3.8s forwards

}



.swiper-slide-active.each_slide.story_08 img.img_02 {

  animation: fade_in 1s .5s forwards

}



.swiper-slide-active.each_slide.story_08 img.img_03 {

  animation: fade_in 1s 1s forwards

}



.swiper-slide-active.each_slide.story_08 img.img_04 {

  animation: fade_in 1s 1.5s forwards

}



.swiper-slide-active.each_slide.story_08 img.img_05 {

  animation: fade_in 1s 2s forwards

}



.swiper-slide-active.each_slide.story_08 img.img_06 {

  animation-delay: 2.5s;

}



.swiper-slide-active.each_slide.story_08 img.img_07 {

  animation: fade_in 1s 2.8s forwards

}



.swiper-slide-active.each_slide.story_08 img.img_08 {

  animation: fade_in 1s 3s forwards

}



.swiper-slide-active.each_slide.story_08 img.img_09 {

  animation: fade_in 1s 3.2s forwards

}



.swiper-slide-active.each_slide.story_08 img.img_10 {

  animation: fade_in 1s 3.4s forwards

}



.swiper-slide-active.each_slide.story_08 img.img_11 {

  animation: fade_in 1s 3.8s forwards

}



.swiper-slide-active.each_slide.story_08 img.img_12 {

  animation: fade_in 1s 4s forwards

}





@keyframes fade_out {

  0% {

    opacity: 1;

  }



  100% {

    opacity: 0;

  }

}



@keyframes fade_in {

  0% {

    opacity: 0;

  }



  100% {

    opacity: 1;

  }

}



@keyframes to_up {

  0% {

    translate: 0 calc(400 * (50rem / 1170));

  }



  100% {

    translate: 0 0;

  }

}



@keyframes to_left2 {

  0% {

    transform: translateX(0);

  }



  100% {

    transform: translateX(calc(870 * (50rem / 1170)));

  }

}



@keyframes to_left {

  0% {

    transform: translateX(-50%);

  }



  100% {

    transform: translateX(0);

  }

}



@keyframes to_right {

  0% {

    transform: translateX(50%);

  }



  100% {

    transform: translateX(0);

  }

}



.normalScroll_area {

  position: relative;

  z-index: 3;

  padding-top: calc(1180 * (50rem / 1170));

}



.normalScroll_area.pointerNone {

  pointer-events: none;

}



.btn_list {

  position: relative;

  z-index: 1;

  display: flex;

  justify-content: center;

  align-items: center;

  gap: calc(80 * (50rem / 1170));

}



.btn_list li:nth-of-type(1) {

  animation: float 3s infinite;

}



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

  animation: float 3s infinite reverse;

}



.btn_list li a {

  width: calc(490 * (50rem / 1170));

}



.lineup_area {

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

}



.accordion_outside {

  position: relative;

  z-index: 1;

  padding: calc(30 * (50rem / 1170)) 0 calc(250 * (50rem / 1170));

  transition: padding .3s;

  will-change: transform;

}



.accordion_outside.open {

  padding: calc(30 * (50rem / 1170)) 0 calc(400 * (50rem / 1170));

}



.accordion_outside::before {

  position: absolute;

  z-index: -1;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: linear-gradient(transparent, var(--color_02) 40%);

  content: "";

  opacity: 0;

  transition: opacity 1s;

}



.accordion_outside.open::before {

  opacity: 1;

}



.accordion_btn {

  width: fit-content;

  margin: 0 auto;

  font-family: var(--font_eng);

  font-weight: 500;

  text-align: center;

  cursor: pointer;

}



.open .accordion_btn {

  position: absolute;

  bottom: 0;

  left: 50%;

  translate: -50% 0;

  margin-bottom: calc(150 * (50rem / 1170));

}



.accordion_btn .to_open {

  display: grid;

  place-items: center;

  width: calc(700 * (50rem / 1170));

  height: calc(90 * (50rem / 1170));

  border-radius: calc(100 * (50rem / 1170));

  background: var(--color_regular);

  font-size: calc(56 * (50rem / 1170));

  letter-spacing: .15em;

  color: #fff;

}



.accordion_btn .to_close {

  display: inline-block;

  position: relative;

  padding-right: calc(60 * (50rem / 1170));

  font-size: calc(90 * (50rem / 1170));

  letter-spacing: .15em;

}



.accordion_btn .to_close::before,

.accordion_btn .to_close::after {

  position: absolute;

  bottom: 0;

  right: 0;

  width: calc(10 * (50rem / 1170));

  height: calc(50 * (50rem / 1170));

  margin-bottom: calc(10 * (50rem / 1170));

  border-radius: calc(100 * (50rem / 1170));

  background: var(--color_regular);

  content: "";

  transform-origin: top center;

}



.accordion_btn .to_close::before {

  rotate: 30deg;

  margin-right: calc(-2 * (50rem / 1170));

}



.accordion_btn .to_close::after {

  rotate: -30deg;

  margin-right: calc(2 * (50rem / 1170));

}



.open .accordion_btn .to_open,

.accordion_btn .to_close {

  display: none;

}



.open .accordion_btn .to_close {

  display: block;

}



.accordion_wrap {

  display: grid;

  grid-template-rows: 0fr;

  transition: grid-template-rows .8s;

  will-change: transform;

}



.open .accordion_wrap {

  grid-template-rows: 1fr;

}



.accordion_inner {

  overflow: hidden;

}



.lineup_img {

  margin-bottom: calc(80 * (50rem / 1170));

}



.lineup_lead {

  margin-bottom: calc(100 * (50rem / 1170));

  font-size: calc(52 * (50rem / 1170));

  line-height: 2.2;

  letter-spacing: .025em;

  text-align: center;

}



.lineup_list .slick-arrow {

  z-index: 2;

  top: 0;

  transform: unset;

  width: calc(140 * (50rem / 1170));

  height: calc(140 * (50rem / 1170));

  margin-top: calc(650 * (50rem / 1170));

  border-radius: 50%;

  background: #fff;

}



.lineup_list .slick-prev {

  left: 0;

  margin-left: calc(40 * (50rem / 1170));

}



.lineup_list .slick-next {

  right: 0;

  margin-right: calc(40 * (50rem / 1170));

}



.lineup_list .slick-arrow::before,

.lineup_list .slick-arrow::after {

  position: absolute;

  top: 50%;

  left: 50%;

  translate: -50% -50%;

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

  height: calc(10 * (50rem / 1170));

  border-radius: calc(100 * (50rem / 1170));

  background: var(--color_regular);

  opacity: 1;

  content: "";

}



.lineup_list .slick-prev::before {

  transform-origin: bottom left;

  rotate: -38deg;

  margin-top: calc(1.5 * (50rem / 1170));

}



.lineup_list .slick-prev::after {

  transform-origin: top left;

  rotate: 38deg;

  margin-top: calc(-1.5 * (50rem / 1170));

}



.lineup_list .slick-next::before {

  transform-origin: bottom right;

  rotate: 38deg;

  margin-top: calc(1.5 * (50rem / 1170));

}



.lineup_list .slick-next::after {

  transform-origin: top right;

  rotate: -38deg;

  margin-top: calc(-1.5 * (50rem / 1170));

}



.each_itm {

  position: relative;

  z-index: 1;

  width: calc(840 * (50rem / 1170));

}



.itm_catch {

  position: relative;

  z-index: 2;

  margin-bottom: calc(-130 * (50rem / 1170));

  opacity: 0;

  transition: opacity .8s;

  pointer-events: none !important;

}



.each_itm .itm_img {

  position: relative;

  z-index: 1;

  background: var(--color_02);

}



.each_itm .itm_img::before {

  position: absolute;

  z-index: -1;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  mix-blend-mode: multiply;

  content: "";

}



.each_itm .itm_img.itm_001::before {

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

}



.each_itm .itm_img.itm_002::before {

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

}



.each_itm .itm_img.itm_003::before {

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

}



.each_itm .itm_img.itm_004::before {

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

}



.each_itm .txt_wrap {

  width: calc(1170 * (50rem / 1170));

  margin: 0 calc(50% - calc(585 * (50rem / 1170)));

  text-align: center;

  opacity: 0;

  transition: opacity .8s;

  pointer-events: none;

}



.slick-center.each_itm .txt_wrap,

.slick-center.each_itm .itm_catch {

  opacity: 1;

  pointer-events: auto;

  transition-delay: .2s;

}



.each_itm .itm_name {

  margin-bottom: calc(30 * (50rem / 1170));

  font-size: calc(40 * (50rem / 1170));

  font-weight: 500;

  letter-spacing: .025em;

}



.each_itm .itm_price {

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

  font-family: var(--font_eng);

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

  font-weight: 500;

  letter-spacing: .05em;

}



.each_itm .itm_price .txt_S {

  margin-left: calc(20 * (50rem / 1170));

  font-family: var(--color_regular);

  font-size: calc(33 * (50rem / 1170));

}



.itm_link {

  width: fit-content;

  margin: 0 auto;

}



.itm_link a {

  display: grid;

  place-items: center;

  width: calc(890 * (50rem / 1170));

  height: calc(200 * (50rem / 1170));

  background: var(--color_regular);

  font-family: var(--font_eng);

  font-size: calc(70 * (50rem / 1170));

  font-weight: 600;

  letter-spacing: .8em;

  color: #fff;

}



.profile_area {

  position: relative;

  z-index: 1;

  height: 100vh;

  max-height: calc(3000 * (50rem / 1170));

  padding-top: calc(545 * (50rem / 1170));

}



.profile_area::before,

.profile_area::after {

  position: absolute;

  z-index: -1;

  width: 100%;

  content: "";

}



.profile_area::before {

  top: 0;

  left: 0;

  height: calc(600 * (50rem / 1170));

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

}



.profile_area::after {

  bottom: 0;

  left: 0;

  height: calc(100% - calc(600 * (50rem / 1170)));

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

}



.profile_wrap {

  max-height: 74%;

  overflow: hidden scroll;

  padding: calc(100 * (50rem / 1170)) 0;

  background: #fff;

  -ms-overflow-style: none;

  scrollbar-width: none;

}



.profile_wrap::-webkit-scrollbar {

  display:none;

}



.profile_img {

  width: calc(220 * (50rem / 1170));

  height: calc(220 * (50rem / 1170));;

  margin: 0 auto calc(40 * (50rem / 1170));

  border-radius: 50%;

  overflow: clip;

}



.profile_name {

  margin-bottom: calc(40 * (50rem / 1170));

  font-size: calc(60 * (50rem / 1170));

  font-weight: 500;

  letter-spacing: .2em;

  text-align: center;

}



.profile_txt {

  width: calc(850 * (50rem / 1170));

  margin: 0 auto;

  font-size: calc(40 * (50rem / 1170));

  line-height: 1.75;

  letter-spacing: .1em;

  text-align: justify;

}



.txt_work {

  margin-top: calc(100 * (50rem / 1170));

  font-size: calc(30 * (50rem / 1170));

  letter-spacing: .1em;

  text-align: center;

}



.sns_list {

  display: flex;

  justify-content: center;

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

  margin-top: calc(100 * (50rem / 1170));

}



.sns_list li a {

  width: calc(80 * (50rem / 1170));

}



body.no_scroll {

  height: 100vh;

  overflow: hidden;

}



body.scrollStop {

  animation: noscroll 1s steps(1) forwards;

}



@keyframes noscroll {

  0% {

    height: 100vh;

    overflow: hidden;

  }



  100% {

    height: auto;

    overflow: visible;

  }

}



.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: clip;

  -ms-overflow-style: none;

  scrollbar-width: none;

}



.modal_outside::-webkit-scrollbar {

  display:none;

}



.modal_outside::before {

  position: absolute;

  z-index: -1;

  bottom: 100%;

  left: 100%;

  width: calc(300 * (50rem / 1170));

  height: calc(300 * (50rem / 1170));

  border-radius: 50%;

  background: var(--color_01);

  content: "";

  transition: height .8s, width .8s, bottom .8s, left .8s;

}



.modal_outside.active::before {

  width: 200vh;

  height: 200%;

  bottom: -50%;

  left: -100%;

}



#WinterKit.modal_outside::before {

  background: var(--color_04);

}



.modal_outside::after {

  position: fixed;

  z-index: -1;

  bottom: 0;

  left: 50%;

  translate: -50% 0;

  width: 100%;

  height: calc(1170 * (50rem / 1170));

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

  content: "";

  pointer-events: none;

}



#WinterKit.modal_outside::after {

  opacity: .6;

}



.modal_overlay {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

}



.modal_wrap {

  width: 100%;

  margin: 0 auto;

  max-height: 100%;

  padding: calc(100 * (50rem / 1170)) 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;

  top: 0;

  z-index: 2;

  display: grid;

  place-items: center;

  width: calc(268 * (50rem / 1170));

  height: calc(268 * (50rem / 1170));

  margin: calc(227 * (50rem / 1170)) 0 0 calc(875 * (50rem / 1170));

  border-radius: 50%;

  background: #fff;

  font-family: var(--font_eng);

  font-size: calc(48 * (50rem / 1170));

  font-weight: 600;

  letter-spacing: .05em;

  cursor: pointer;

}



#WinterKit .btn_modalClose {

  color: var(--color_04);

}



#SpecialCampaign .btn_modalClose {

  color: var(--color_01);

}



.about_area {

  padding-top: calc(400 * (50rem / 1170));

  text-align: center;

}



.about_area .logo_giovanni {

  width: calc(460 * (50rem / 1170));

  margin: 0 auto calc(80 * (50rem / 1170));

}



.about_area h3 {

  margin-bottom: calc(80 * (50rem / 1170));

  font-size: calc(100 * (50rem / 1170));

  font-weight: 500;

  letter-spacing: .07em;

}



.about_lead {

  margin-bottom: calc(100 * (50rem / 1170));

  font-size: calc(50 * (50rem / 1170));

  line-height: 2;

  letter-spacing: .025em;

}



.link_brandPage {

  width: fit-content;

  margin: 0 auto calc(140 * (50rem / 1170));

}



.link_brandPage a {

  position: relative;

  padding-right: calc(50 * (50rem / 1170));

  font-family: var(--font_eng);

  font-size: calc(52 * (50rem / 1170));

  font-weight: 500;

  letter-spacing: .1em;

}



.commonArrow a::before,

.commonArrow a::after {

  position: absolute;

  top: 50%;

  right: 0;

  translate: 0 -50%;

  width: calc(30 * (50rem / 1170));

  height: calc(6 * (50rem / 1170));

  border-radius: calc(100 * (50rem / 1170));

  background: var(--color_regular);

  content: "";

}



.commonArrow a::before {

  transform-origin: bottom right;

  rotate: 38deg;

  margin-top: calc(1 * (50rem / 1170));

}



.commonArrow a::after {

  transform-origin: top right;

  rotate: -38deg;

  margin-top: calc(-1 * (50rem / 1170));

}



.link_itemDetail_wrap {

  overflow: clip;

}



.link_itemDetail_inner {

  display: flex;

  width: fit-content;

}



.link_itemDetail {

  margin-left: calc(-150 * (50rem / 1170));

  animation: float 3s ease-in-out infinite;

}



.link_itemDetail a {

  width: calc(860 * (50rem / 1170));

}



.link_itemDetail_wrap figure {

  position: relative;

  width: calc(780 * (50rem / 1170));

  margin: calc(50 * (50rem / 1170)) 0 0 calc(-250 * (50rem / 1170));

}



.winterKit_area {

  padding-top: calc(150 * (50rem / 1170));

  text-align: center;

  color: #fff;

}



.winterKit_area figure {

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

}



.winterKit_area h4 {

  margin-bottom: calc(30 * (50rem / 1170));

  font-size: calc(58 * (50rem / 1170));

  font-weight: 600;

  line-height: 1.5;

  letter-spacing: .075em;

}



.winterKit_area .winterKit_lead {

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

  font-size: calc(34 * (50rem / 1170));

  line-height: 2;

  letter-spacing: .025em;

}



.campaign_area {

  padding-top: calc(100 * (50rem / 1170));

}



.campaign_area h3 {

  position: relative;

  margin-bottom: calc(70 * (50rem / 1170));

}



.campaign_area h3::before {

  position: absolute;

  bottom: 0;

  left: 0;

  width: calc(300 * (50rem / 1170));

  height: calc(300 * (50rem / 1170));

  margin: 0 0 calc(50 * (50rem / 1170)) calc(120 * (50rem / 1170));

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

  content: "";

}



.campaign_area .link_allLineup {

  width: fit-content;

  margin: 0 auto;

}



.campaign_area .link_allLineup a {

  position: relative;

  padding-right: calc(70 * (50rem / 1170));

  font-family: var(--font_eng);

  font-size: calc(66 * (50rem / 1170));

  font-weight: 600;

  letter-spacing: .2em;

}

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

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

#share {

  z-index: 15 !important;

  opacity: 0;

  pointer-events: none;

  transition: opacity .3s;

}



#share.active {

  opacity: 1;

  pointer-events: auto;

}



.share-txt {

  display: none;

}



.only_pc {

  display: none;

}



#header_bottom .inner,

#header_bottom {

  display: none !important;

}

}

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





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

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

  .LP_page {

    position: relative;

    z-index: 1;

    background: #FFC026;

  }



  .LP_page::before {

    position: fixed;

    z-index: -1;

    top: 0;

    left: 0;

    width: 100%;

    height: 100vh;

    background: url(../img/deco_002.svg) top center / .5rem .5rem repeat;

    content: "";

  }



  .LP_page_inner,

  .fixed_area_01,

  .fixed_area_02,

  .btn_about_wrap,

  .modal_outside,

  .story_img_outside::before,

  .story_img_outside::after,

  .modal_outside::before,

  .modal_outside::after {

    width: 50rem;

    overflow: clip;

  }



  

  .fixed_area {

    position: fixed;

    left: 50%;

    translate: -50% 0;

    z-index: 1;

    display: flex;

    justify-content: space-between;

    width: 100%;

    max-width: 168rem;

    height: 100%;

    margin: 0 auto;

  }

  

  .fixed_left,

  .fixed_right {

    display: grid;

    place-items: center;

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

    max-width: calc((168rem - 50rem) / 2);

    height: 100%;

    padding-top: 15rem;

  }



  .fixed_left .logo_giovanni {

    position: relative;

    width: 18.6rem;

  }



  .fixed_left .logo_giovanni img {

    opacity: 0;

  }



  .fixed_left .logo_giovanni::before {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

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

    mask-size: 100% auto;

    mask-repeat: no-repeat;

    mask-position: top left;

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

    -webkit-mask-size: 100% auto;

    -webkit-mask-repeat: no-repeat;

    -webkit-mask-position: top left;

    background: #fff;

    content: "";

  }



  .fixed_right .navigation_list {

    position: relative;

    width: 23.4rem;

  }



  .fixed_right .navigation_list::before {

    position: absolute;

    top: 0;

    right: 0;

    width: 3.6rem;

    height: 4.6rem;

    margin: -3rem 9rem 0 0;

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

    content: "";

  }



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

    margin-top: 5rem;

  }



  .fixed_right .navigation_list > li.list_campaign {

    margin-top: 2.5rem;

  }

  

  .fixed_right .navigation_list > li a {

    position: relative;

    padding-bottom: 1.5rem;

    font-family: var(--font_eng);

    font-size: 3rem;

    font-weight: 500;

    letter-spacing: .1em;

    color: #fff;

  }



  .fixed_right .navigation_list > li a::before {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: .3rem;

    border-radius: 10rem;

    background: #fff;

    content: "";

  }



  .fixed_right .navigation_list > li a .icon_wrap {

    display: flex;

    gap: 1rem;

    margin-bottom: 1rem;

  }



  .fixed_right .navigation_list > li a .icon_wrap p {

    width: 7.6rem;

  }



  .fixed_right .navigation_list > li a .icon_wrap p:nth-of-type(1) {

    animation: float 3s infinite;

  }



  .fixed_right .navigation_list > li a .icon_wrap p:nth-of-type(2) {

    animation: float 3s infinite reverse;

  }



  #header_bottom .inner.hidden,

  #header_bottom.hidden {

    pointer-events: none;

    height: 0;

    overflow: hidden;

  }



  #header_bottom {

    display: none;

  }



}

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





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

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

  html {

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

  }

}



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

  html {

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

  }

}



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

  html {

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

  }

}

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