@charset "UTF-8";

:root {
  --font-lp_base: "Poppins","Noto Sans JP","ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN,HiraKakuProN-W3, 游ゴシック, "Yu Gothic", メイリオ, Meiryo, Verdana, Helvetica, Arial, sans-serif;
  --color-lp_bg: #fff;
  --color-lp_font: #000;
  --color-lp_primary: #DB8587;
  --color-lp_secondary: #FAEDEE;
  --color-lp_tertiary: #8E8E8E;
  --color-lp_navy: #392F8E;
  --color-lp_green: #789D4B;
}

/*--------------------------------
                共 通
 --------------------------------*/

main,#Wrap,.wrapBottom,.wrapTop{
  width: 100%;
  max-width: 100%;
}
#FooterWrap{
  position: relative;
  z-index: 100;
  background-color: #fff;
}
#header_txt_slider {
  position: relative;
  z-index: 100;
}
.group-detail-area{
  width: 100%;
}

#giovanniBB_2505 *{
  box-sizing: border-box;
}
#giovanniBB_2505{
  font-family: var(--font-lp_base);
  /*font-feature-settings: "palt";*/
  font-size: calc(13 * (60rem / 430));
  letter-spacing: 0.025em;
  line-height: 2;
  text-align: center;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--color-lp_font);
  background-color: var(--color-lp_secondary);
  position: relative;
  /*overflow: hidden;*/
}
#giovanniBB_2505:before{
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(../img/bg.png);
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}
#giovanniBB_2505 .sp_only{display: none;}
#giovanniBB_2505 img{width: 100%;display: block;height: auto;}
#giovanniBB_2505 a{display: block;width: 100%;cursor: pointer;transition: all 0.5s;color: inherit;}
#giovanniBB_2505 a:hover{opacity: .8}
#giovanniBB_2505 ul li,#giovanniBB_2505 ol li{list-style: none;}

/*------------ Text ------------*/
#giovanniBB_2505 h1,#giovanniBB_2505 h2,#giovanniBB_2505 h3{padding: 0;float: none;font-weight: normal;}
#giovanniBB_2505 p {
  display: block;
  margin: 0;
  font-size: calc(13 * (60rem / 430));
  line-height: 2;
}
#giovanniBB_2505 sup{
  font-size: 50%;
  margin-top: -0.6rem;
}
#giovanniBB_2505 .note{
  display: inline-block;
  font-size: calc(10 * (60rem / 430));
  margin-top: calc(10 * (60rem / 430));
}
#giovanniBB_2505 p .note{
  margin-top: 0;
}
#giovanniBB_2505 .bold{
  font-weight: bold;
}
#giovanniBB_2505 .small{
  font-size: 1rem;
  font-size: calc(10 * (60rem / 430));
}
#giovanniBB_2505 .sec_ttl{
  font-size: calc(30 * (60rem / 430));
  font-weight: 700;
  line-height: 1;
  color: var(--color-lp_primary);
  margin-bottom: calc(25 * (60rem / 430));
}

#giovanniBB_2505 .sec_ttl .small{
  display: inline-block;
  font-size: calc(17 * (60rem / 430));
  margin-top: calc(10 * (60rem / 430));
}


/* section
==================================*/
#giovanniBB_2505 section{
  position: relative;
}

#giovanniBB_2505 .lp_inner{
  position: relative;
  z-index: 3;
  width: 60rem;
  background-color: var(--color-lp_bg);
  /*box-shadow: 0 0 3rem rgba(0, 0, 0, 0.16);*/
  display: grid;
  gap: calc(60 * (60rem / 430));
  padding-bottom: calc(60 * (60rem / 430));
}

#giovanniBB_2505 .full_area{
  position: sticky;
  top: 0;
  bottom: 0;
  margin: auto;
  padding: 3rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(calc(100% - 60rem) / 2);
  height: 100svh;
}

#giovanniBB_2505 .left_area{
  left: 0;
}

#giovanniBB_2505 .left_area a{
  width: fit-content;
}

#giovanniBB_2505 .left_area img{
  max-width: 32rem;
}

#giovanniBB_2505 .right_area{
  right: 0;
}

#giovanniBB_2505 .right_area img{
  max-width: 40rem;
}


/* sec_mv
==================================*/
/*------------ main_ttl_wrap ------------*/
#giovanniBB_2505 .sec_mv .main_ttl_wrap{
  margin-top: calc(40 * (60rem / 430));
}

#giovanniBB_2505 .sec_mv .main_ttl{
  font-size: calc(25 * (60rem / 430));
  font-weight: 700;
  color: var(--color-lp_primary);
  margin-bottom: calc(15 * (60rem / 430));
}

#giovanniBB_2505 .sec_mv .main_ttl .big{
  display: inline-block;
  font-size: calc(36 * (60rem / 430));
  margin-top: calc(10 * (60rem / 430));
}

#giovanniBB_2505 .sec_mv .lead{
  font-size: calc(16 * (60rem / 430));
  font-weight: 700;
  color: var(--color-lp_primary);
  margin-bottom: calc(25 * (60rem / 430));
}

/*------------ day_txt_wrap ------------*/
#giovanniBB_2505 .sec_mv .day_txt_wrap{
  background-color: var(--color-lp_primary);
  width: 100%;
  padding: calc(10 * (60rem / 430));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(15 * (60rem / 430));
  color: #fff;
  margin-top: calc(60 * (60rem / 430));
}

#giovanniBB_2505 .sec_mv .day_ttl{
  font-size: calc(15 * (60rem / 430));
  line-height: 1;
  padding: calc(5 * (60rem / 430));
  border: 1px solid #fff;
  border-radius: calc(5 * (60rem / 430));
}

#giovanniBB_2505 .sec_mv .day_txt{
  font-size: calc(22 * (60rem / 430));
  font-weight: 500;
  line-height: 1;
}

#giovanniBB_2505 .sec_mv .day_txt .small{
  font-size: calc(14 * (60rem / 430));
}


/* sec_cmpn
==================================*/
#giovanniBB_2505 .sec_cmpn{
  width: calc(390 * (60rem / 430));
  border-radius: calc(50 * (60rem / 430));
  background-color: var(--color-lp_secondary);
  padding: calc(40 * (60rem / 430)) 0;
  margin: auto;
}

#giovanniBB_2505 .sec_cmpn .cmpn_txt_wrap{
  display: grid;
  gap: calc(5 * (60rem / 430));
}

#giovanniBB_2505 .cmpn_txt{
  font-size: calc(18 * (60rem / 430));
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-lp_primary);
}

#giovanniBB_2505 .cmpn_txt b{
  font-size: calc(26 * (60rem / 430));
  background: linear-gradient(transparent 50%, #F4DCDD 50%);
}


/* sec_chart
==================================*/
#giovanniBB_2505 .sec_chart .sec_ttl .small{
  font-size: calc(25 * (60rem / 430));
  margin-bottom: calc(25 * (60rem / 430));
  margin-top: 0;
}

#giovanniBB_2505 .sec_chart .chart_wrap{
  position: relative;
  width: calc(390 * (60rem / 430));
  border-radius: calc(50 * (60rem / 430));
  background-color: var(--color-lp_bg);
  padding: calc(20 * (60rem / 430)) calc(10 * (60rem / 430));
  margin: auto;
  box-shadow: 0 0 calc(15 * (60rem / 430)) #00000029;
}

#giovanniBB_2505 .sec_chart .y_ttl{
  width: calc(120 * (60rem / 430));
  height: calc(30 * (60rem / 430));
  border-radius: calc(100 * (60rem / 430));
  background-color: var(--color-lp_tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(10 * (60rem / 430));
  font-weight: 700;
  color: #fff;
  margin: auto;
  position: relative;
  z-index: 2;
}

#giovanniBB_2505 .sec_chart .x_ttl{
  width: calc(56 * (60rem / 430));
  height: calc(56 * (60rem / 430));
  border-radius: 100%;
  background-color: var(--color-lp_tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(10 * (60rem / 430));
  font-weight: 700;
  color: #fff;
  position: relative;
  z-index: 2;
}

#giovanniBB_2505 .sec_chart .x_ttl_blk{
  position: relative;
  display: flex;
  justify-content: space-between;

  margin: calc(255 * (60rem / 430)) auto calc(155 * (60rem / 430));
}

#giovanniBB_2505 .sec_chart .chart_wrap:before{
  content: '';
  width: 1px;
  height: calc(100% - calc(40 * (60rem / 430)));
  background-color: var(--color-lp_tertiary);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 1;
}

#giovanniBB_2505 .sec_chart .x_ttl_blk:before{
  content: '';
  width: 100%;
  height: 1px;
  background-color: var(--color-lp_tertiary);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 1;
}

#giovanniBB_2505 .sec_chart .item_list li{
  position: absolute;
  width: fit-content;
  background-color: var(--color-lp_bg);
  z-index: 2;
  padding: calc(5 * (60rem / 430));
}

#giovanniBB_2505 .sec_chart .item_img{
  width: calc(72 * (60rem / 430));
  margin: 0 auto calc(5 * (60rem / 430));
}

#giovanniBB_2505 .sec_chart .item_txt{
  font-size: calc(8 * (60rem / 430));
  line-height: 1.4;
}

#giovanniBB_2505 .sec_chart .item_name{
  display: block;
  font-weight: 700;
}

/*------------ item_1 ------------*/
#giovanniBB_2505 .sec_chart .item_1{
  top: calc(76 * (60rem / 430));
  left: 0;
  right: 0;
  margin: auto;
  z-index: 3 !important;
}
#giovanniBB_2505 .sec_chart .item_1 .item_name{
  color: #6CA0CB;
}
/*------------ item_2 ------------*/
#giovanniBB_2505 .sec_chart .item_2{
  top: calc(115 * (60rem / 430));
  left: calc(75 * (60rem / 430));
}
#giovanniBB_2505 .sec_chart .item_2 .item_name{
  color: #BE818E;
}
/*------------ item_3 ------------*/
#giovanniBB_2505 .sec_chart .item_3{
  top: calc(76 * (60rem / 430));
  right: calc(72 * (60rem / 430));
  z-index: 3 !important;
}
#giovanniBB_2505 .sec_chart .item_3 .item_name{
  color: #2A275C;
}
/*------------ item_4 ------------*/
#giovanniBB_2505 .sec_chart .item_4{
  top: calc(140 * (60rem / 430));
  right: calc(15 * (60rem / 430));
}
#giovanniBB_2505 .sec_chart .item_4 .item_name{
  color: #667F49;
}
/*------------ item_5 ------------*/
#giovanniBB_2505 .sec_chart .item_5{
  top: calc(200 * (60rem / 430));
  right: calc(90 * (60rem / 430));
  z-index: 3 !important;
}
#giovanniBB_2505 .sec_chart .item_5 .item_name{
  color: #46192C;
}
/*------------ item_6 ------------*/
#giovanniBB_2505 .sec_chart .item_6{
  top: calc(280 * (60rem / 430));
  left: 0;
  right: 0;
  margin: auto;
}
#giovanniBB_2505 .sec_chart .item_6 .item_name{
  color: #BA6186;
}
/*------------ item_7 ------------*/
#giovanniBB_2505 .sec_chart .item_7{
  top: calc(340 * (60rem / 430));
  left: calc(65 * (60rem / 430));
}
#giovanniBB_2505 .sec_chart .item_7 .item_name{
  color: #D7501F;
}


/* sec_set
==================================*/
#giovanniBB_2505 .sec_set .sec_ttl .small{
  font-size: calc(17 * (60rem / 430));
}

#giovanniBB_2505 .sec_set .lead{
  font-size: calc(17 * (60rem / 430));
  font-weight: 700;
}

#giovanniBB_2505 .sec_set .set_list li{
  position: relative;
  width: calc(390 * (60rem / 430));
  border-radius: calc(50 * (60rem / 430));
  padding: calc(40 * (60rem / 430)) calc(20 * (60rem / 430));
  margin: calc(50 * (60rem / 430)) auto 0;
  border: 1px solid;
  display: grid;
  gap: calc(20 * (60rem / 430));
}

#giovanniBB_2505 .sec_set .series_ttl{
  width: calc(200 * (60rem / 430));
  height: calc(36 * (60rem / 430));
  border-radius: calc(100 * (60rem / 430));
  border: 1px solid;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  transform: translateY(-50%);
  font-size: calc(15 * (60rem / 430));
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-lp_bg);
}

#giovanniBB_2505 .sec_set .detail_blk{
  display: flex;
}

#giovanniBB_2505 .sec_set .item_detail{
  width: 50%;
}

#giovanniBB_2505 .sec_set .item_name{
  font-size: calc(11 * (60rem / 430));
  line-height: 1.75;
}

#giovanniBB_2505 .sec_set .item_price{
  font-size: calc(15 * (60rem / 430));
  line-height: 1;
  margin-top: calc(5 * (60rem / 430));
}

#giovanniBB_2505 .sec_set .item_price .small{
  font-size: calc(10 * (60rem / 430));
}

#giovanniBB_2505 .sec_set .txt_link{
  font-size: calc(11 * (60rem / 430));
  line-height: 1;
  width: fit-content;
  border-bottom: 1px solid var(--color-lp_tertiary);
  padding-bottom: calc(3 * (60rem / 430));
  margin: calc(10 * (60rem / 430)) auto 0;
}

#giovanniBB_2505 .sec_set .link_btn{
  width: calc(250 * (60rem / 430));
  height: calc(40 * (60rem / 430));
  border-radius: calc(100 * (60rem / 430));
  font-size: calc(15 * (60rem / 430));
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  background-color: var(--color-lp_tertiary);
  color: #fff;
}

#giovanniBB_2505 .sec_set .price_lead{
  font-size: calc(17 * (60rem / 430));
  font-weight: 700;
  line-height: 1;
  margin-top: calc(5 * (60rem / 430));
}

#giovanniBB_2505 .sec_set .special_price{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(5 * (60rem / 430));
  font-size: calc(27 * (60rem / 430));
  font-weight: 700;
  line-height: 1;
  margin-top: calc(10 * (60rem / 430));
}

#giovanniBB_2505 .sec_set .special_price img{
  width: calc(63 * (60rem / 430));
}

#giovanniBB_2505 .sec_set .special_price .small{
  font-size: calc(17 * (60rem / 430));
}

/*------------ set_1 ------------*/
#giovanniBB_2505 .sec_set li.set_1{
  border-color: var(--color-lp_navy);
}
#giovanniBB_2505 .sec_set li.set_1 .series_ttl{
  border-color: var(--color-lp_navy);
  color: var(--color-lp_navy);
}
#giovanniBB_2505 .sec_set li.set_1 .link_btn{
  background-color: var(--color-lp_navy);
}

/*------------ set_2 ------------*/
#giovanniBB_2505 .sec_set li.set_2{
  border-color: var(--color-lp_green);
}
#giovanniBB_2505 .sec_set li.set_2 .series_ttl{
  border-color: var(--color-lp_green);
  color: var(--color-lp_green);
}
#giovanniBB_2505 .sec_set li.set_2 .link_btn{
  background-color: var(--color-lp_green);
}

/*--------------------------------
            Responsive
 --------------------------------*/

@media screen and (max-width: 1600px){
  html {
    font-size: calc(10 * (100vw / 1600));
  }
}

@media (min-width: 768px) and (max-width: 1200px) {
  html {
    font-size: calc(10 * (100vw / 1200));
  }
}

/*--------------------------------
            Layout  SP
 --------------------------------*/
@media (max-width: 767px) {

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

  .page-share-btn{
    height: 0;
  }

  #FooterWrap {
    margin-top: -3rem;
  }

  #giovanniBB_2505{
  }
  #giovanniBB_2505 .sp_only{display: block;}
  #giovanniBB_2505 .pc_only{display: none;}

  #giovanniBB_2505 a:hover{opacity: 1}

  #giovanniBB_2505 .lp_inner{
    box-shadow: none;
  }

}