@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: #59ACBC;
  --color-lp_secondary: #DDEEF2;
  --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_2511 * {
  box-sizing: border-box;
}

#giovanniBB_2511 {
  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_2511: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_2511 .sp_only {
  display: none;
}

#giovanniBB_2511 img {
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

#giovanniBB_2511 a {
  display: block;
  width: 100%;
  cursor: pointer;
  transition: all 0.5s;
  color: inherit;
}

#giovanniBB_2511 a:hover {
  opacity: .8
}

#giovanniBB_2511 ul li,
#giovanniBB_2511 ol li {
  list-style: none;
}

/*------------ Text ------------*/
#giovanniBB_2511 h1,
#giovanniBB_2511 h2,
#giovanniBB_2511 h3 {
  padding: 0;
  float: none;
  font-weight: normal;
}

#giovanniBB_2511 p {
  display: block;
  margin: 0;
  font-size: calc(13 * (60rem / 430));
  line-height: 2;
}

#giovanniBB_2511 sup {
  font-size: 50%;
  margin-top: -0.6rem;
}

#giovanniBB_2511 .note_wrap {
  margin-top: calc(15 * (60rem / 430));
}

#giovanniBB_2511 .note {
  display: inline-block;
  font-size: calc(10 * (60rem / 430));
}

#giovanniBB_2511 p .note {
  margin-top: 0;
}

#giovanniBB_2511 .bold {
  font-weight: bold;
}

#giovanniBB_2511 .small {
  font-size: 1rem;
  font-size: calc(10 * (60rem / 430));
}

#giovanniBB_2511 .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_2511 .sec_ttl .small {
  display: inline-block;
  font-size: calc(17 * (60rem / 430));
  margin-top: calc(10 * (60rem / 430));
}


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

#giovanniBB_2511 .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_2511 .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_2511 .left_area {
  left: 0;
}

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

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

#giovanniBB_2511 .right_area {
  right: 0;
}

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


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

#giovanniBB_2511 .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_2511 .sec_mv .main_note {
  font-size: calc(10 * (60rem / 430));
  background: var(--color-lp_primary);
  color: #fff;
  margin-bottom: calc(15 * (60rem / 430));
  padding: calc(10 * (60rem / 430)) calc(15 * (60rem / 430));
  line-height: 1.2;
  text-align: justify;
}

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

#giovanniBB_2511 .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_2511 .sec_mv .day_txt_wrap {
  background-color: var(--color-lp_primary);
  width: 100%;
  padding: calc(20 * (60rem / 430));
  color: #fff;
  margin-top: calc(60 * (60rem / 430));
}

#giovanniBB_2511 .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));
  width: fit-content;
  margin: 0 auto;
}

#giovanniBB_2511 .sec_mv .day_txt_area {}


#giovanniBB_2511 .sec_mv .day_txt {
  font-size: calc(18 * (60rem / 430));
  font-weight: 500;
  line-height: 1;
  display: block;
  margin-top: calc(15 * (60rem / 430));
  text-align: center;
}

#giovanniBB_2511 .sec_mv .small {
  font-size: calc(14 * (60rem / 430));
  margin-top: calc(10 * (60rem / 430));
}


/* sec_cmpn
==================================*/
#giovanniBB_2511 .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_2511 .sec_cmpn .cmpn_txt_wrap {
  display: grid;
  gap: calc(5 * (60rem / 430));
}

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

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


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

#giovanniBB_2511 .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_2511 .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_2511 .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_2511 .sec_chart .x_ttl_blk {
  position: relative;
  display: flex;
  justify-content: space-between;

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

#giovanniBB_2511 .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_2511 .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_2511 .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_2511 .sec_chart .item_img {
  width: calc(72 * (60rem / 430));
  margin: 0 auto calc(5 * (60rem / 430));
}

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

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

/*------------ item_1 ------------*/
#giovanniBB_2511 .sec_chart .item_1 {
  top: calc(76 * (60rem / 430));
  left: 0;
  right: 0;
  margin: auto;
  z-index: 3 !important;
}

#giovanniBB_2511 .sec_chart .item_1 .item_name {
  color: #6CA0CB;
}

/*------------ item_2 ------------*/
#giovanniBB_2511 .sec_chart .item_2 {
  top: calc(115 * (60rem / 430));
  left: calc(75 * (60rem / 430));
}

#giovanniBB_2511 .sec_chart .item_2 .item_name {
  color: #BE818E;
}

/*------------ item_3 ------------*/
#giovanniBB_2511 .sec_chart .item_3 {
  top: calc(76 * (60rem / 430));
  right: calc(72 * (60rem / 430));
  z-index: 3 !important;
}

#giovanniBB_2511 .sec_chart .item_3 .item_name {
  color: #2A275C;
}

/*------------ item_4 ------------*/
#giovanniBB_2511 .sec_chart .item_4 {
  top: calc(140 * (60rem / 430));
  right: calc(15 * (60rem / 430));
}

#giovanniBB_2511 .sec_chart .item_4 .item_name {
  color: #667F49;
}

/*------------ item_5 ------------*/
#giovanniBB_2511 .sec_chart .item_5 {
  top: calc(200 * (60rem / 430));
  right: calc(90 * (60rem / 430));
  z-index: 3 !important;
}

#giovanniBB_2511 .sec_chart .item_5 .item_name {
  color: #46192C;
}

/*------------ item_6 ------------*/
#giovanniBB_2511 .sec_chart .item_6 {
  top: calc(280 * (60rem / 430));
  left: 0;
  right: 0;
  margin: auto;
}

#giovanniBB_2511 .sec_chart .item_6 .item_name {
  color: #BA6186;
}

/*------------ item_7 ------------*/
#giovanniBB_2511 .sec_chart .item_7 {
  top: calc(340 * (60rem / 430));
  left: calc(65 * (60rem / 430));
}

#giovanniBB_2511 .sec_chart .item_7 .item_name {
  color: #D7501F;
}


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

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

#giovanniBB_2511 .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_2511 .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_2511 .sec_set .detail_blk {
  display: flex;
}

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

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

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

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

#giovanniBB_2511 .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_2511 .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_2511 .sec_set .price_lead {
  font-size: calc(17 * (60rem / 430));
  font-weight: 700;
  line-height: 1;
  margin-top: calc(5 * (60rem / 430));
}

#giovanniBB_2511 .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_2511 .sec_set .special_price img {
  width: calc(63 * (60rem / 430));
}

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

/*------------ set_1 ------------*/
#giovanniBB_2511 .sec_set li.set_1 {
  border-color: var(--color-lp_navy);
}

#giovanniBB_2511 .sec_set li.set_1 .series_ttl {
  border-color: var(--color-lp_navy);
  color: var(--color-lp_navy);
}

#giovanniBB_2511 .sec_set li.set_1 .link_btn {
  background-color: var(--color-lp_navy);
}

/*------------ set_2 ------------*/
#giovanniBB_2511 .sec_set li.set_2 {
  border-color: var(--color-lp_green);
}

#giovanniBB_2511 .sec_set li.set_2 .series_ttl {
  border-color: var(--color-lp_green);
  color: var(--color-lp_green);
}

#giovanniBB_2511 .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_2511 {}

  #giovanniBB_2511 .sp_only {
    display: block;
  }

  #giovanniBB_2511 .pc_only {
    display: none;
  }

  #giovanniBB_2511 a:hover {
    opacity: 1
  }

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

}