@charset "utf-8";


/* --------ヘッダー-------- */

.bouquet_header {
  width: 100%;
  height: 0;
  font-family: var(--NotoSans);
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #ffffff00;
  z-index: 100;
}

.scrolling {
  width: 0;
  height: 0;
  overflow: hidden;
}

.scrolled {
  animation: slide_down .3s ease;
}

@keyframes slide_down {
  0% {
    transform: translateY(-7rem);
  }

  100% {
    transform: translateY(0);
  }
}

/* ----ロゴ画像---- */
.header_logo_link {
  width: fit-content;
  height: fit-content;
}

.header_logo_wrapper {
  width: 32rem;
  height: fit-content;
  position: relative;
  z-index: 1000;
  top: -.2rem;
}

/* ----ページリンク---- */
.header_page_navigation {
  width: fit-content;
  height: 100%;
  margin-right: 5rem;
  padding-top: 2.5rem;
}

.header_page_links {
  display: flex;
  align-items: start;
  justify-content: end;
  gap: 8rem;
}

.header_page_links li {
  font-size: 1.6rem;
  line-height: 1.5em;
  font-weight: 600;
  display: flex;
  flex-direction: column;
}

.header_page_link {
  width: fit-content;
  height: fit-content;
  position: relative;
  color: #122444;
  letter-spacing: .135rem;
}

.header_under_line {
  width: 100%;
  height: .2rem;
  background-color: #F5B2B2;
  margin-top: .15rem;
  display: none;
}

.header_underline_active{
  display: block;
}


/* --------下層FV-------- */

.bouquet_lower_fv {
  width: 100%;
  height: 46.7rem;
  color: #333333;
  font-family: var(--NotoSans);
  position: relative;
  margin-top: 18rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* ----ページタイトル---- */
.page_headline_box {
  position: absolute;
  top: 8.1rem;
  left: 19.2rem;
}

.page_headline_en {
  font-size: 4rem;
  line-height: 1em;
  font-weight: bold;
  margin-left: 6.9rem;
  margin-top: 1rem;
  letter-spacing: .4rem;
}

.page_headline_jp {
  font-size: 2.6rem;
  line-height: 4rem;
  display: flex;
  align-items: center;
  justify-content: start;
  font-weight: bold;
  padding-left: .5rem;
  margin-top: .7rem;
  letter-spacing: .26rem;
}

.page_headline_jp::before {
  content: "";
  width: .5rem;
  height: 2.5rem;
  background-color: #F5B2B2;
  margin-right: .5rem;
}

/* ----左上の画像---- */
.about_fv_image1 {
  width: 18.3rem;
  height: 10.9rem;
  margin-left: 7.5rem;
  background-image: url(../img/two_bird.png);
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  top: 1.1rem;
}

.service_fv_image1 {
  width: 13.4rem;
  height: 14.1rem;
  margin-left: 10.4rem;
  background-image: url(../img/yellow_flower.png);
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  top: -2.2rem;
}

.flow_fv_image1 {
  width: 15rem;
  height: 13.9rem;
  margin-left: 9rem;
  position: relative;
  top: -1.2rem;
  background: url(../img/pink_flower.png);
  background-repeat: no-repeat;
  background-size: cover;
}

.contact_fv_image1 {
  width: 18.2rem;
  height: 18.85rem;
  margin-left: 7.3rem;
  position: relative;
  top: -3rem;
  background: url(../img/ring.png) center no-repeat;
  background-size: cover;
}

/* ----FVの下部の画像群---- */
.fv_bottom_box {
  width: 100%;
  height: 25.2rem;
  overflow-y: hidden;
  justify-self: end;
  position: relative;
}

.fv_green_wave {
  width: 71.825rem;
  height: 23.517rem;
  background: url(../img/front_wave_g.png) no-repeat;
  background-size: cover;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -2;
}

.fv_flowers {
  width: 14.1rem;
  height: 9.7rem;
  background: url(../img/two_flower.png) no-repeat;
  background-size: cover;
  position: relative;
  left: 26rem;
  top: 5.2rem;
}

.fv_yellow_wave {
  width: 81.794rem;
  height: 23.517rem;
  background: url(../img/front_wave_y.png) no-repeat;
  background-size: contain;
  background-position: center 60%;
  position: absolute;
  right: 0;
  bottom: -1.5rem;
  z-index: -3;
  margin-top: auto;
}

.fv_pink_flower {
  width: 8.9rem;
  height: 8.3rem;
  background: url(../img/pink_flower.png) no-repeat;
  background-size: cover;
  position: absolute;
  right: 26.1rem;
  top: 2rem;
}

.fv_bottom_wave {
  width: 100%;
  height: 40rem;
  background: url(../img/front_wave.png) no-repeat;
  background-position: center top;
  background-size: cover;
  position: absolute;
  z-index: -1;
  bottom: -31rem;
}

/* ----アニメーション---- */
.fv_image_animation1 {
  animation: fuwafuwa_header1 3s ease-in-out infinite alternate;
}

@keyframes fuwafuwa_header1 {
  0% {
    transform: translate(0, 0) rotate(-7deg);
  }

  50% {
    transform: translate(0, -.7rem) rotate(0deg);
  }

  100% {
    transform: translate(0, 0) rotate(7deg);
  }
}

.fv_image_animation2 {
  animation: fuwafuwa_header2 2s ease-in-out infinite alternate;
}

@keyframes fuwafuwa_header2 {
  0% {
    transform: translate(0, 0) rotate(-5deg);
  }

  50% {
    transform: translate(0, -.7rem) rotate(0deg);
  }

  100% {
    transform: translate(0, 0) rotate(5deg);
  }
}

.fv_image_animation3 {
  animation: fuwafuwa_header3 4s ease-in-out infinite alternate;
}

@keyframes fuwafuwa_header3 {
  0% {
    transform: translate(0, 0) rotate(-9deg);
  }

  50% {
    transform: translate(0, -.7rem) rotate(0deg);
  }

  100% {
    transform: translate(0, 0) rotate(9deg);
  }
}

.header_sp_only {
  display: none;
}




/* ----------メディアクエリ---------- */

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


  /* --------ヘッダー-------- */

  .bouquet_header {
    width: 100%;
    height: fit-content;
    font-family: var(--NotoSans);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #ffffff00;
    z-index: 100;
  }

  .header_pc_only {
    display: none;
  }

  .header_sp_only {
    display: block;
  }

  .scrolling {
    width: 100%;
    height: fit-content;
  }

  .scrolled {
    animation: none;
  }

  /* ----ロゴ画像---- */
  .header_logo_wrapper {
    width: 12.5rem;
    height: 7rem;
    position: relative;
    z-index: 1000;
  }

  /* 暫定措置 */
  .header_logo_image {
    object-fit: contain;
    object-position: top;
  }


  /* --------ページリンク-------- */

  .header_page_navigation {
    width: 100vw;
    height: 100vh;
    margin-right: 0;
    padding-top: 0;
    padding-bottom: 7.5rem;
    background-image: url(../img/front_bg.png);
    position: fixed;
    top: -100vh;
    display: flex;
    justify-content: center;
    align-items: start;
    overflow-x: hidden;
    overflow-y: scroll;
    z-index: 500;
    transition-duration: .5s;
  }

  .opened .header_page_navigation {
    top: 0;
  }

  .header_page_links {
    width: 34.5rem;
    height: 50rem;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    padding-top: 14.6rem;
    gap: 2.5rem;
    border-radius: 1rem;
    position: relative;
    top: 10.2rem;
  }

  .header_page_links li {
    width: 100%;
    font-size: 1.6rem;
    line-height: 1.5em;
    font-weight: bold;
    display: flex;
    flex-direction: column;
  }

  .header_page_links li:first-of-type {
    display: none;
  }

  .header_page_link {
    width: 100%;
    padding-left: 11.2rem;
    height: fit-content;
    position: relative;
    color: #333333;
    letter-spacing: .135rem;
    text-align: left;
  }

  .header_under_line {
    display: none;
  }

  .text_color_pink{
    color: #F86E6E;
  }

  /* ----SP版ナビゲーション画像群---- */
  .header_navigation_image1 {
    animation: fuwafuwa_header_lists 3s ease-in-out infinite alternate;
    width: 7.895rem;
    height: 4.7rem;
    background: url(../img/two_bird.png) no-repeat;
    background-size: cover;
    position: absolute;
    z-index: 700;
    top: -2.6rem;
    left: 4.6rem;
  }

  .header_navigation_image2 {
    animation: fuwafuwa_header_lists 5s ease-in-out infinite alternate;
    width: 8.462rem;
    height: 8.566rem;
    background: url(../img/ring.png) no-repeat;
    background-size: cover;
    position: absolute;
    top: 0;
    right: .734rem;
  }

  .header_navigation_image3 {
    animation: fuwafuwa_header_lists 4s ease-in-out infinite alternate;
    width: 7rem;
    height: 7.35rem;
    background: url(../img/yellow_flower.png) no-repeat;
    background-size: cover;
    position: absolute;
    top: 11.5rem;
    left: 0;
  }

  .header_navigation_image4 {
    animation: fuwafuwa_header_lists 4.5s ease-in-out infinite alternate;
    width: 6.5rem;
    height: 5.943rem;
    background: url(../img/front_flower.png) no-repeat;
    background-size: cover;
    position: absolute;
    right: .5rem;
    bottom: 6.8rem;
  }

  .header_navigation_image5 {
    animation: fuwafuwa_header_lists 3.5s ease-in-out infinite alternate;
    width: 7rem;
    height: 4.699rem;
    background: url(../img/two_flower.png) no-repeat;
    background-size: cover;
    position: absolute;
    left: 3.75rem;
    bottom: -3.2rem;
  }

  .header_navigation_image6 {
    animation: fuwafuwa_header_lists 2.5s ease-in-out infinite alternate;
    width: 7rem;
    height: 6.6rem;
    background: url(../img/pink_flower.png) no-repeat;
    background-size: cover;
    position: absolute;
    right: .5rem;
    bottom: -4.2rem;
  }

  @keyframes fuwafuwa_header_lists {
    0% {
      transform: translate(0, 0) rotate(-7deg);
    }

    50% {
      transform: translate(0, -.7rem) rotate(0deg);
    }

    100% {
      transform: translate(0, 0) rotate(7deg);
    }
  }

  @keyframes fuwafuwa_header_lists {
    0% {
      transform: translate(0, 0) rotate(-7deg);
    }

    50% {
      transform: translate(0, -.7rem) rotate(0deg);
    }

    100% {
      transform: translate(0, 0) rotate(7deg);
    }
  }

  /* ----ハンバーガーメニュー---- */
  .hamburger_wrapper {
    width: 5rem;
    height: 5rem;
    padding: 1.7rem 1.5rem;
    border-radius: 50%;
    background-color: #53B2A4;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-self: center;
    position: relative;
    z-index: 1000;
    right: 1rem;
  }

  .hamburger_line {
    width: 2rem;
    height: .1rem;
    background-color: white;
    transition-duration: .5s;
  }

  .active .hamburger_line1 {
    transform: translateY(.75rem) rotate(45deg);
  }

  .active .hamburger_line2 {
    transform: rotate(45deg);
  }

  .active .hamburger_line3 {
    transform: translateY(-.75rem) rotate(-45deg);
  }


  /* --------下層FV-------- */

  .bouquet_lower_fv {
    width: 100%;
    height: 16.272rem;
    color: #333333;
    font-family: var(--NotoSans);
    position: relative;
    margin-top: 7rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  /* ----ページタイトル---- */
  .page_headline_box {
    position: absolute;
    top: 2.3rem;
    left: 8.237rem;
    background-color: #ffffff00;
  }

  .page_headline_en {
    font-size: 2.4rem;
    line-height: 1.5em;
    font-weight: bold;
    margin-left: 0;
    margin-top: 0;
    letter-spacing: .24rem;
  }

  .page_headline_jp {
    font-size: 1.8rem;
    line-height: 2.7rem;
    display: flex;
    align-items: center;
    justify-content: start;
    font-weight: bold;
    padding-left: 0;
    margin-top: 0;
    letter-spacing: .18rem;
  }

  .page_headline_jp::before {
    content: "";
    width: .5rem;
    height: 2.7rem;
    background-color: #F5B2B2;
    margin-right: .5rem;
  }

  /* ----左上の画像---- */
  .about_fv_image1 {
    width: 5rem;
    height: 3rem;
    margin-left: 3.5rem;
    margin-top: -2.2rem;
  }

  .service_fv_image1 {
    width: 4rem;
    height: 4.3rem;
    margin-left: 3.8rem;
    top: -1rem;
  }

  .flow_fv_image1 {
    width: 4rem;
    height: 3.707rem;
    margin-left: 4.237rem;
    position: relative;
    top: -.8rem;
  }

  .contact_fv_image1 {
    width: 5.5rem;
    height: 5.7rem;
    margin-left: 3rem;
    position: relative;
    top: -1.8rem;
  }

  /* ----FVの下部の画像群---- */
  .fv_bottom_box {
    height: 6.367rem;
  }

  .fv_green_wave {
    width: 18.9rem;
    height: 6.367rem;
    background: url(../img/front_wave_g.png) no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -2;
  }

  .fv_flowers {
    width: 4rem;
    height: 2.7rem;
    background: url(../img/two_flower.png) no-repeat;
    background-size: cover;
    position: relative;
    left: 7rem;
    top: 2.1rem;
  }

  .fv_yellow_wave {
    width: 20.642rem;
    height: 3.478rem;
    background: url(../img/front_wave_y.png) no-repeat;
    background-size: contain;
    background-position: center 60%;
    position: absolute;
    right: 0;
    bottom: .2rem;
    z-index: -3;
    margin-top: auto;
  }

  .fv_pink_flower {
    width: 3.5rem;
    height: 3.3rem;
    background: url(../img/pink_flower.png) no-repeat;
    background-size: cover;
    position: absolute;
    right: 6.8rem;
    top: -2.2rem;
  }

  .fv_bottom_wave {
    width: 100%;
    height: 35rem;
    background: url(../img/front_wave.png) no-repeat;
    background-position: center top;
    background-size: contain;
    position: absolute;
    z-index: -1;
    bottom: -32.9rem;
  }

  /* ----アニメーション---- */
  .fv_image_animation1 {
    animation: fuwafuwa_header1 3s ease-in-out infinite alternate;
  }

  @keyframes fuwafuwa_header1 {
    0% {
      transform: translate(0, 0) rotate(-7deg);
    }

    50% {
      transform: translate(0, -.3rem) rotate(0deg);
    }

    100% {
      transform: translate(0, 0) rotate(7deg);
    }
  }

  .fv_image_animation2 {
    animation: fuwafuwa_header2 2s ease-in-out infinite alternate;
  }

  @keyframes fuwafuwa_header2 {
    0% {
      transform: translate(0, 0) rotate(-5deg);
    }

    50% {
      transform: translate(0, -.3rem) rotate(0deg);
    }

    100% {
      transform: translate(0, 0) rotate(5deg);
    }
  }

  .fv_image_animation3 {
    animation: fuwafuwa_header3 4s ease-in-out infinite alternate;
  }

  @keyframes fuwafuwa_header3 {
    0% {
      transform: translate(0, 0) rotate(-9deg);
    }

    50% {
      transform: translate(0, -.3rem) rotate(0deg);
    }

    100% {
      transform: translate(0, 0) rotate(9deg);
    }
  }
}