@charset "UTF-8";
/* ----関数設定---- */
/* ----------------------------------------------------------------------
トップページ
---------------------------------------------------------------------- */
.more_btn {
  display: block;
  position: absolute;
  bottom: 0;
  right: 1em;
  max-width: 225px;
  width: 100%;
  z-index: 1;
}
.more_btn a {
  display: inline-block;
  font-family: "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", "メイリオ", sans-serif;
  letter-spacing: 0.15em;
  padding: 15px 45px 15px 15px;
  font-size: max(1.6rem, 14px);
  background-color: #fff;
  border: 1px solid #000;
  width: 100%;
  transition: opacity 0.3s;
}
.more_btn a::after {
  content: "";
  width: 6px;
  height: 12px;
  background-image: url("../images/more_btn_arrow.svg");
  background-position: center right;
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 48%;
  right: 15px;
  translate: 0 -50%;
  transition: translate 0.3s;
}
@media (hover: hover) and (pointer: fine) {
  .more_btn a:hover {
    opacity: 0.7;
  }
  .more_btn a:hover::after {
    translate: 4px -50%;
  }
}
@media screen and (max-width: 820px) {
  .more_btn {
    position: relative;
    margin: 4rem 0 0 auto;
  }
}
@media screen and (max-width: 820px) and (max-width: 520px) {
  .more_btn {
    margin-top: 10rem;
  }
}

.bg_color {
  position: relative;
}
.bg_color::before {
  content: "";
  width: calc(100% + 14rem);
  height: 49rem;
  background-color: #f4f9f6;
  position: absolute;
  top: -8.5rem;
  z-index: -1;
}

.bottom_deco {
  width: 20.5rem;
  top: 0;
  right: 0;
  left: 31%;
  margin: auto;
  z-index: 1;
}

/*  TOPメイン   ---------------------------------------------------------------------- */
#index {
  overflow-x: hidden;
  overflow-y: clip;
}
#index .mainvisual {
  width: 100%;
  aspect-ratio: 192/89;
  padding: 9rem;
  margin-bottom: 14rem;
}
#index .mainvisual .copy_wrapper {
  display: flex;
  gap: 1rem;
  flex-direction: row-reverse;
  align-items: flex-start;
  color: #fff;
  filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.75));
  white-space: nowrap;
}
#index .mainvisual .copy_wrapper .copy {
  font-size: 7rem;
  text-align: right;
  line-height: 1.1;
}
#index .mainvisual .copy_wrapper .copy_description {
  font-size: 3.4rem;
  line-height: 1.6;
}
#index .section_hero {
  margin-bottom: 40rem;
  position: relative;
}
#index .section_hero .sec_copy_wrapper {
  display: flex;
  gap: 4rem;
  flex-direction: row-reverse;
  letter-spacing: 0.15em;
  position: relative;
  justify-content: center;
  white-space: nowrap;
}
#index .section_hero .sec_copy_wrapper .copy_title {
  font-size: 6rem;
  line-height: 1.3;
}
#index .section_hero .sec_copy_wrapper .sec_copy {
  font-size: 3.4rem;
  line-height: 1.5;
}
#index .section_hero .sec_copy_wrapper .pic_wrapper {
  position: relative;
  top: -2rem;
  right: -4rem;
}
#index .section_hero .sec_copy_wrapper .pic_wrapper picture:nth-child(1) {
  width: 50rem;
}
#index .section_hero .sec_copy_wrapper .pic_wrapper picture.pic_deco {
  width: 51rem;
  position: absolute;
  top: 76%;
  left: 9%;
}
#index .section_hero .deco_en {
  position: absolute;
  right: 16%;
  top: 41rem;
  width: 23rem;
}
#index .section_hero.hero02 {
  margin-bottom: 20rem;
}
#index .section_hero.hero02 .sec_copy_wrapper .copy_title {
  letter-spacing: 0.17em;
}
#index .section_hero.hero02 .sec_copy_wrapper .sec_copy {
  font-size: 3.8rem;
  line-height: 1.7;
}
#index .section_hero.hero02 .sec_copy_wrapper .pic_wrapper {
  top: 18rem;
  margin-right: -10rem;
}
#index .section_hero.hero02 .sec_copy_wrapper .pic_wrapper picture:nth-child(1) {
  width: 47rem;
}
#index section {
  margin-bottom: 20rem;
}
#index section .overflow_left {
  margin-left: calc(50% - 50vw);
  display: flex;
  gap: 7rem;
}
#index section .overflow_left picture {
  width: 76rem;
  flex-shrink: 0;
}
#index section .overflow_right {
  margin-right: calc(50% - 50vw);
  display: flex;
  gap: 7rem;
}
#index section .overflow_right picture {
  width: 76rem;
  flex-shrink: 0;
}
#index section .sec_copy {
  position: relative;
}
#index section .sec_copy .copy_title {
  font-size: 6rem;
  margin-bottom: 3rem;
  line-height: 1.3;
}
#index section .sec_copy p {
  font-size: 2.6rem;
}
#index .gallery_scroll {
  margin-bottom: 20rem;
}
#index .deco_sec picture {
  width: 32rem;
  width: 32rem;
  right: -50%;
  margin-top: -7%;
  position: relative;
  margin-bottom: 7.5rem;
}
#index .section02 {
  position: relative;
}
#index .section02 .pic_deco {
  width: 52rem;
  position: absolute;
  right: 65%;
  top: 70%;
}
#index .section04 .bg_color::before {
  right: 0;
}
#index .section05 .bg_color::before {
  left: 0;
}
#index .pic_band {
  width: 100%;
  aspect-ratio: 192/54;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-bottom: 18rem;
}
#index .pic_band.band01 {
  background-image: image-set(url("../images/index_bandimg01.webp") 1x, url("../images/index_bandimg01@2x.webp") 2x);
}
#index .pic_band.band02 {
  background-image: image-set(url("../images/index_bandimg02.webp") 1x, url("../images/index_bandimg02@2x.webp") 2x);
}
@media screen and (max-width: 820px) {
  #index .mainvisual {
    padding: 3rem;
    aspect-ratio: 192/110;
    margin-bottom: 8rem;
  }
  #index .mainvisual .copy_wrapper .copy {
    font-size: 4.6rem;
  }
  #index .mainvisual .copy_wrapper .copy_description {
    font-size: 2.8rem;
  }
  #index .section_hero .sec_copy_wrapper .copy_title {
    font-size: 4rem;
  }
  #index .section_hero .sec_copy_wrapper .sec_copy {
    font-size: 2.8rem;
  }
  #index .section_hero .sec_copy_wrapper .pic_wrapper {
    top: 17rem;
    right: auto;
    margin-right: -28rem;
    right: 5rem;
  }
  #index .section_hero .sec_copy_wrapper .pic_wrapper picture:nth-child(1) {
    width: 28rem;
  }
  #index .section_hero .sec_copy_wrapper .pic_wrapper picture.pic_deco {
    top: 56%;
    left: 11%;
    width: 27rem;
  }
  #index .section_hero .deco_en {
    right: 5rem;
    top: 29rem;
    width: 19rem;
  }
  #index .section_hero.hero02 .sec_copy_wrapper .pic_wrapper {
    top: 21rem;
    margin-right: -30rem;
  }
  #index .section_hero.hero02 .sec_copy_wrapper .pic_wrapper picture:nth-child(1) {
    width: 28rem;
  }
  #index .section_hero.hero02 .sec_copy_wrapper .sec_copy {
    font-size: 2.8rem;
  }
  #index section {
    margin-bottom: 16rem;
  }
  #index section .overflow_left {
    gap: 4rem;
  }
  #index section .overflow_left picture {
    width: 35rem;
  }
  #index section .overflow_right {
    gap: 4rem;
  }
  #index section .overflow_right picture {
    width: 35rem;
  }
  #index section .sec_copy .copy_title {
    font-size: max(3.4rem, 22px);
  }
  #index section .sec_copy p {
    font-size: max(1.8rem, 14px);
  }
  #index .deco_sec picture {
    width: 28rem;
  }
  #index .gallery_scroll {
    margin-bottom: 16rem;
  }
  #index .pic_band.band02 {
    margin-bottom: 10rem;
  }
}
@media screen and (max-width: 820px) and (max-width: 520px) {
  #index section .overflow_left {
    flex-direction: column;
  }
  #index section .overflow_left picture {
    width: 85%;
    max-height: 260px;
  }
  #index section .overflow_left .sec_copy {
    margin-left: 5%;
  }
  #index section .overflow_right {
    flex-direction: column-reverse;
  }
  #index section .overflow_right picture {
    width: 85%;
    margin: 0 0 0 auto;
    max-height: 260px;
  }
  #index section .overflow_right .sec_copy {
    margin-right: 5%;
  }
  #index .section02 .pic_deco {
    width: 27rem;
    top: 98%;
  }
  #index .section_hero.hero01 {
    margin-bottom: 30rem;
  }
  #index .section_hero.hero02 {
    margin-bottom: 12rem;
  }
}