@charset "utf-8";


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

.h3_header {
  width: 100%;
  height: 0;
  padding: 2rem 0 0;
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
}

.header_buttons_wrapper {
  display: flex;
  justify-content: space-between;
  height: 0;
}

/* ----ロゴ画像---- */
.header_logo_link {
  width: fit-content;
  height: fit-content;
  position: relative;
  left: 2.05rem;
  top: -.9rem;
}

.h3_header_logo {
  height: 13.5rem;
  width: 12.4rem;
  transition-duration: .5s;
  transform-origin: left top;
}
/* 下層ページロゴ */
.lower_layer {
  width: 8.074rem;
  height: 8.76rem;
}

/* ----縦に並んだリンクアイコン---- */
.header_links_wrapper {
  width: 3.6rem;
  height: 100vh;
  position: absolute;
  right: .9rem;
  top: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
  z-index: 15000;
}

.header_link_icon {
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  border: .1rem solid #000000;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mail_icon {
  background-color: #81B4F8;
}

.insta_icon {
  background-color: #70C7D5;
}

.x_icon {
  background-color: #61B4E6;
}

.header_mail_image {
  width: 2.333rem;
  height: 1.832rem;
}

.header_insta_image {
  width: 2.175rem;
  height: 2.174rem;
}

.header_x_image {
  width: 2.16rem;
  height: 2.208rem;
}

/* ----ハンバーガーボタン---- */
.hamburger_wrapper {
  width: 6rem;
  height: 6rem;
  background-color: #F5BB1B;
  border-radius: 50%;
  border: .1rem solid #1B1B1B;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 2.2rem 0;
  z-index: 15000;
  position: relative;
  right: 4rem;
  cursor: pointer;
}

.hamburger_line {
  width: 3.3rem;
  height: 1px;
  background-color: #1B1B1B;
  transition-duration: .2s;
  transform-origin: center center;
}

.active .hamburger_line1 {
  transform: translateY(.68rem) rotate(20deg);
}

.active .hamburger_line2 {
  display: none;
}

.active .hamburger_line3 {
  transform: translateY(-.68rem) rotate(-20deg);
}

/* ----ハンバーガーメニュー---- */
.header_hamburger_menu {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: -100vh;
  left: 0;
  background-color: #EAECEF;
  z-index: 10000;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow-y: hidden;
}

.header_hamburger_menu.open {
  height: 100vh;
  top: 0;
}

/* ----スライドショー---- */
.header_menu_slide {
  width: 100%;
  height: 100%;
  border-radius: 0 5rem 0 0;
  position: relative;
}

.header_slide_image {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 3s ease;
  border-radius: 0 5rem 0 0;
  width: 100%;
  height: 100vh;
}

.header_slide_image.active {
  opacity: 1;
}

/* ----リンク一覧---- */
.header_menu_container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  top: .5rem;
}


.header_menu_navigation {
  width: 100%;
  height: 100%;
  overflow: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.header_menu_navigation.scroll {
  overflow: scroll;
}

.header_menu_navigation::-webkit-scrollbar{
  display: none;
}

.header_menu_links {
  width: fit-content;
  height: 100vh;
  margin-top: 7rem;
  margin-left: 7.5rem;
  display: grid;
  grid-template-columns: 13rem 18rem;
  grid-template-rows: repeat(6, 4.3rem);
  row-gap: 3rem;
  column-gap: 5.5rem;
}

.slide_down {
  grid-template-rows: repeat(6, min-content);
}

/* ----アニメーション用---- */
.top_page_link,
.header_delay {
  transform: translateY(4.3rem);
  opacity: 0;
  transition: all 0.1s cubic-bezier(0.23, 1, 0.32, 1);
}

.open .header_delay {
  transform: translateY(0);
  opacity: 1;
  transition-duration: .5s;
}

.open .header_delay1,
.open .header_delay2 {
  transition-delay: 0.1s;
}

.open .header_delay3,
.open .header_delay4 {
  transition-delay: 0.2s;
}

.open .header_delay5,
.open .header_delay6 {
  transition-delay: 0.3s;
}

.open .header_delay7,
.open .header_delay8 {
  transition-delay: 0.4s;
}

.open .header_delay9,
.open .header_delay10 {
  transition-delay: 0.5s;
}

.header_menu_links li {
  width: 13rem;
  height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.header_menu_link {
  color: #000000;
  font-family: var(--NotoSans);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  height: fit-content;
  width: fit-content;
  text-align: center;
  font-size: 1.2rem;
  letter-spacing: .06rem;
}

.header_menu_en {
  width: 100%;
  height: 2.4rem;
  font-size: 1.6rem;
  line-height: 1em;
  text-align: center;
  font-weight: 500;
}

.header_menu_jp {
  width: 100%;
  height: 1.9rem;
  font-size: 1.3rem;
  line-height: 1em;
  text-align: center;
  font-weight: 300;
}

/* ----プラスボタン---- */
.has_under_menu {
  position: relative;
  height: fit-content;
}

.header_plus_button {
  width: 2.223rem;
  height: 2.223rem;
  cursor: pointer;
  position: absolute;
  right: 0;
  top: .5rem;
}

.header_plus_button::before {
  content: "";
  width: 2.223rem;
  height: .2rem;
  background-color: #000000;
  position: absolute;
  transform: translate(0, calc((2.223rem - (2.223rem - 2rem)) /2));
}

.header_plus_button::after {
  content: "";
  width: .2rem;
  height: 2.223rem;
  background-color: #000000;
  position: absolute;
  transform: translate(calc((2.223rem - (2.223rem - 2rem)) /2), 0%);
}

.header_plus_button.open::after {
  opacity: 0;
  transition-duration: .2s;
}

/* ----隠れてるリンク一覧---- */
.header_under_menu {
  text-align: center;
  transform: scaleY(0);
  height: 0;
  transform-origin: center top;
  transition: all .3s ease;
  width: 17.6rem;
  position: relative;
  left: 2.4rem;
  z-index: 15000;
}

.header_under_menu.open {
  height: 12rem;
  width: 18rem;
  transition-duration: .5s;
  transform: scaleY(1);
  overflow: hidden;
  transition: height 0.3s ease;
}

.header_under_menu.animating {
  text-align: center;
  overflow: hidden;
  transform: scaleY(0);
  height: fit-content;
  transform-origin: center top;
  transition: all .3s ease;
}

.header_under_menu li {
  font-size: 1.2rem;
  font-weight: normal;
  line-height: 1.5rem;
  height:fit-content;
  overflow: hidden;
  width: 18rem;
  display: flex;
  margin-top: .3rem;
  margin-left: .6rem;
  letter-spacing: .05rem;
  position: relative;
  z-index: 17000;
}

.header_under_menu.open li {
  font-size: 1.2rem;
  line-height: 1.5em;
  height: fit-content;
  transition-duration: .5s;
}

.header_under_menu.open li:last-of-type{
  height: 4rem;
}

.header_undermenu_link {
  width: 100%;
  text-align: start;
}


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

.header_fv_wrapper {
  width: 100%;
  height: 47.4rem;
  position: relative;
  background-color: #D9EAF2;
}

.header_fv_contact {
  background-color: #F1F7FA;
}

.header_fv_gray {
  background-color: #EAECEF;
}

.header_fv_image {
  width: 100%;
  height: 40rem;
  border-radius: 0 0 5rem 5rem;
  border: .1rem solid black;
}

.header_title_wrapper {
  width: 70.3rem;
  height: 14.8rem;
  border-radius: 7.7rem;
  background-color: #70C7D5;
  border: .1rem solid #000000;
  margin: 0 auto;
  position: relative;
  top: -7.4rem;
}

.header_page_title_en {
  font-family: var(--Alegreya);
  color: #FFFFFF;
  font-size: 10rem;
  line-height: 7rem;
  letter-spacing: .15rem;
  -webkit-text-stroke-width: .2rem;
  -webkit-text-stroke-color: black;
  text-align: center;
  height: fit-content;
  font-weight: 500;
  margin-top: 2.9rem;
}

.header_page_title_jp {
  font-family: var(--NotoSans);
  font-size: 2.5rem;
  line-height: 1em;
  font-weight: 400;
  color: #1B1B1B;
  -webkit-text-stroke-width: 0;
  text-align: center;
  margin-top: .3rem;
}

/* ----下層FVの画像---- */
.company_fv_image {
  background-image: url(../img/4623562_m.jpg);
  background-size: cover;
  background-position: center 80%;
}

.explanation_fv_image {
  background-image: url(../img/32250452_m.jpg);
  background-size: cover;
  background-position: center;
}

.about_fv_image,
.report_fv_image,
.archive_fv_image {
  background-image: url(../img/flower02.jpg);
  background-size: cover;
  background-position: center;
}

.client_work_fv_image {
  background-image: url(../img/flower04.jpg);
  background-size: cover;
  background-position: center 25%;
}

.contact_fv_image {
  background-image: url(../img/flower03.jpg);
  background-size: cover;
}

.single_fv_image {
  background-image: url(../img/flower05.jpg);
  background-size: cover;
}

.single_works_fv_image,
.recruit_fv_image,
.works_fv_image {
  background-image: url(../img/flower01.jpg);
  background-size: cover;
  background-position: center 55%;
}

.header_links_wrapper.sp_only {
  display: none;
}



/* ---------メディアクエリ---------- */
@media screen and (max-width: 699.98px) {

  .header_links_wrapper.sp_only {
    display: block;
  }


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

  .h3_header {
    width: 100%;
    height: 0;
    padding: 1rem 0 0;
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
  }

  .header_buttons_wrapper {
    display: flex;
    justify-content: space-between;
  }

  /* ----ロゴ画像---- */
  .header_logo_link {
    width: fit-content;
    height: fit-content;
    position: relative;
    left: 1rem;
    top: -.6rem;
    z-index: 10000;
  }

  .h3_header_logo {
    height: 9rem;
    width: 7.7rem;
    transition-duration: 0;
  }

  /* ----ハンバーガーボタン---- */
  .hamburger_wrapper {
    width: 4rem;
    height: 4rem;
    background-color: #F5BB1B;
    border-radius: 50%;
    border: .1rem solid #1B1B1B;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0;
    z-index: 16000;
    position: relative;
    right: 2rem;
    cursor: pointer;
  }

  .hamburger_line {
    width: 2.2rem;
    height: 1px;
    background-color: #1B1B1B;
    transition-duration: .2s;
    transform-origin: center center;
  }

  .active .hamburger_line1 {
    transform: translateY(.4rem) rotate(20deg);
  }

  .active .hamburger_line2 {
    display: none;
  }

  .active .hamburger_line3 {
    transform: translateY(-.4rem) rotate(-20deg);
  }

  /* ----ハンバーガーメニュー---- */
  .header_hamburger_menu {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: -100vh;
    left: 0;
    background-color: #EAECEF;
    z-index: 15000;
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
  }

  .header_hamburger_menu.open {
    height: 100vh;
    top: 0;
  }

  /* ----縦に並んだリンクアイコン---- */
  .header_links_wrapper.sp_only {
    width: 3.6rem;
    height: fit-content;
    position: absolute;
    right: 1rem;
    top: 11.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    z-index: 15000;
  }

  .header_link_icon {
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    border: .1rem solid #000000;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .mail_icon {
    background-color: #81B4F8;
  }

  .insta_icon {
    background-color: #70C7D5;
  }

  .x_icon {
    background-color: #61B4E6;
  }

  .header_mail_image {
    width: 2.333rem;
    height: 1.832rem;
  }

  .header_insta_image {
    width: 2.175rem;
    height: 2.174rem;
  }

  .header_x_image {
    width: 2.16rem;
    height: 2.208rem;
  }

  .header_links_wrapper.pc_only {
    display: none;
  }

  /* ----スライドショー---- */
  .header_menu_slide {
    display: none;
  }

  /* ----リンク一覧---- */
  .header_menu_container {
    width: 100%;
    height: 100vh;
    position: relative;
  }

  .header_menu_navigation {
    width: 100%;
    height: 100%;
    padding-bottom: 8.8rem;
    overflow-y: auto;
  }

  .header_menu_links {
    width: fit-content;
    height: fit-content;
    margin-top: 7.8rem;
    margin-left: 3rem;
    display: flex;
    flex-direction: column;
    gap: 2.2rem;
  }

  .header_menu_links .pc_only {
    display: none;
  }

  /* ----アニメーション用---- */
  .header_delay {
    transform: translateY(3.8rem);
    opacity: 0;
    transition: all 0.1s cubic-bezier(0.23, 1, 0.32, 1);
  }

  .open .header_delay {
    transform: translateY(0);
    opacity: 1;
    transition-duration: .5s;
  }

  .open .header_delay1 {
    transition-delay: 0.15s;
  }

  .open .header_delay3 {
    transition-delay: 0.2s;
  }

  .open .header_delay5 {
    transition-delay: 0.25s;
  }

  .open .header_delay7 {
    transition-delay: 0.3s;
  }

  .open .header_delay2 {
    transition-delay: 0.35s;
  }

  .open .header_delay4 {
    transition-delay: 0.4s;
  }

  .open .header_delay6 {
    transition-delay: 0.45s;
  }

  .open .header_delay8 {
    transition-delay: 0.5s;
  }

  .open .header_delay9 {
    transition-delay: 0.55s;
  }

  .open .header_delay10 {
    transition-delay: 0.6s;
  }


  .header_menu_links li {
    width: 100%;
    height: fit-content;
    display: block;
  }

  .header_menu_link {
    color: #000000;
    font-family: var(--NotoSans);
    text-align: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    height: fit-content;
    width: fit-content;
    font-size: 1.2rem;
    gap: 0;
  }

  .header_menu_en {
    width: fit-content;
    height: 2.4rem;
    font-size: 1.5rem;
    line-height: 1em;
    text-align: center;
    font-weight: 500;
  }

  .header_menu_jp {
    width: fit-content;
    height: 1.9rem;
    font-size: 1.2rem;
    line-height: 1em;
    margin-left: 1rem;
  }

  .header_delay2,
  .header_delay4,
  .header_delay6,
  .header_delay8 {
    order: 2;
  }

  .header_delay9 {
    order: 3;
  }

  .header_delay10 {
    order: 4;
  }

  /* ----プラスボタン---- */
  .header_plus_button {
    width: 1.692rem;
    height: 1.692rem;
    position: absolute;
    right: 9.5rem;
    top: -.2rem;
    cursor: pointer;
  }

  .header_plus_button::before {
    content: "";
    width: 1.692rem;
    height: 0.2rem;
    background-color: #000000;
    position: absolute;
    transform: translate(0, calc((1.692rem - 0.2rem) / 2));
  }

  .header_plus_button::after {
    content: "";
    width: 0.2rem;
    height: 1.692rem;
    background-color: #000000;
    position: absolute;
    transform: translate(calc((1.692rem - 0.2rem) / 2), 0);
  }

  .header_plus_button.open::after {
    opacity: 0;
    transition-duration: .2s;
  }

  /* ----隠れてるリンク一覧---- */
  .header_under_menu {
    text-align: center;
    overflow: hidden;
    transform: scaleY(0);
    height: 0;
    transform-origin: center top;
    transition: all .3s ease;
    width: fit-content;
    position: relative;
    left: 0;
  }

  .header_under_menu li {
    font-size: 1.2rem;
    line-height: 1.5em;
    width: 100%;
    display: flex;
    margin-top: 1.2rem;
    align-items: center;
    margin-left: 0;
  }

  .header_under_menu li:first-of-type{
    margin-top: 1.5rem;
  }

  .header_under_menu.open li {
    font-size: 1.2rem;
    line-height: 1.5rem;
    height: fit-content;
    transition-duration: .5s;
  }

  .header_under_menu li:first-of-type {
    margin-top: 1rem;
  }


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

  .header_fv_wrapper {
    width: 100%;
    height: 29.25rem;
    position: relative;
  }

  .header_fv_image {
    height: 25.5rem;
    border-radius: 0 0 2.5rem 2.5rem;
    border: .1rem solid black;
  }

  .header_title_wrapper {
    width: 33.5rem;
    height: 7.5rem;
    border-radius: 3.8rem;
    margin: 0 auto;
    top: -3.75rem;
  }

  .header_page_title_en {
    font-size: 5rem;
    line-height: 1em;
    letter-spacing: .05rem;
    font-weight: 500;
    margin-top: .5rem;
    -webkit-text-stroke-width: .1rem;
  }

  .header_page_title_jp {
    font-size: 1.7rem;
    line-height: 1em;
    font-weight: 400;
    margin-top: -.8rem;
  }

}