@charset "UTF-8";

.header {
  position: absolute;
  width: 100%;
  z-index: 9;
top:0;
}

/*------------------------------------*/
/*-----------PCメニュー（第一階層）----------*/
/*-------------------------------------*/
/* PCメニュー 全体囲み */
.header .header_nav {
  height: var(--hamburger-size);
  display: grid;
  place-content: center;
  grid-template-columns: 150px 1fr var(--hamburger-size);
  /*◎768px以下*/
}
@media screen and (max-width: 768px) {
  .header .header_nav {
    height: var(--hamburger-size-sp);
    grid-template-columns: 100px 1fr var(--hamburger-size-sp);
  }
}

/* logo */
.header .header__inner .header__logo {
  padding-left: 10px;
}

.header .header__inner .header__logo h2 a {
  display: block;
}

/*--------------------------*/
/* 50thとメニューの囲み */
.header_nav_pc {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
}

/*50th bt*/
.header_nav_pc .header__apro50 {
  width: 120px;
  margin-right: 15px;
}

/*--------------------------*/
/* PCメニューリスト */
.header_nav .header_nav_pc .header_nav_pc_group {
  display: flex;
  /*◎768px以下*/
}
@media screen and (max-width: 768px) {
  .header_nav .header_nav_pc .header_nav_pc_group {
    display: none;
  }
}

.header_nav .header_nav_pc .header_nav_pc_group .header_nav_pc_item {
  margin: 0 20px;
  cursor: pointer;
}
.header_nav .header_nav_pc .header_nav_pc_group .header_nav_pc_item:hover {
  opacity: 0.5;
}
.header_nav .header_nav_pc .header_nav_pc_group .header_nav_pc_item a {
  display: block;
  color: var(--color-black);
}
.header_nav .header_nav_pc .header_nav_pc_group .header_nav_pc_item span {
  display: block;
  text-align: center;
}
.header_nav .header_nav_pc .header_nav_pc_group .header_nav_pc_item .txt-ja {
  font-size: var(--s16);
}
.header_nav .header_nav_pc .header_nav_pc_group .header_nav_pc_item .txt-en {
  font-size: var(--s12);
  font-family: var(--font-en);
  color: var(--color-blue);
}

/* ------------------------------------- */
/* --------PCメニュー展開（第二階層）-------- */
/* -------------------------------------- */
.header .drop-menu {
  position: absolute;
  top: var(--hamburger-size);
  left: 0;
  width: calc(100% - var(--hamburger-size));
  background-color: rgba(255, 255, 255, 0.9);
}
@media screen and (max-width: 768px) {
  .header .drop-menu {
    top: var(--hamburger-size-sp);
    width: calc(100% - var(--hamburger-size-sp));
  }
}

.header .drop-menu .drop-menu-inner {
  padding: 30px 10%;
}

/*タイトル */
.header .drop-menu .drop-menu-title {
  margin-bottom: 20px;
  opacity: 0;
  transform: translate(0, 10px);
  transition: all 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}
.header .drop-menu .drop-menu-title .txt-ja {
  font-size: var(--s24);
  margin-right: 10px;
}
.header .drop-menu .drop-menu-title .txt-en {
  font-family: var(--font-en);
  font-size: var(--s14);
  color: var(--color-blue);
}

.header .drop-menu.active .drop-menu-title {
  opacity: 1;
  transform: translate(0, 0);
}

/*メニューボタン*/
.header .drop-menu .drop-menu-group {
  display: flex;
  flex-wrap: wrap;
}

.header .drop-menu .drop-menu-group .drop-menu-group-item {
  margin: 7px 40px 7px 0;
}
.header .drop-menu .drop-menu-group .drop-menu-group-item a {
  color: var(--color-black);
}

/* 非表示 */
.header .drop-menu#drop-menu-about,
.header .drop-menu#drop-menu-service {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  /*表示*/
}
.header .drop-menu#drop-menu-about.active, .header .drop-menu#drop-menu-about.active,
.header .drop-menu#drop-menu-service.active,
.header .drop-menu#drop-menu-service.active {
  opacity: 1;
  transition: opacity 0.3s, visibility 0.3s;
  visibility: visible;
}

/* -------------------------- */
/* --------ハンバーガー-------- */
/* -------------------------- */
.header_global_nav {
  z-index: 50;
}

/* 全部囲み */
.header_global_nav_content {
  position: fixed;
  padding: 10px 40px;
  z-index: 1000;
  width: 100%;
  height: 100svh;
  top: 0;
  background-color: var(--color-blue);
  transition: all 0.5s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 非表示*/
  opacity: 0;
  visibility: hidden;
  right: -100%;
  /* 表示*/
}
.header_global_nav_content.active {
  right: 0;
  opacity: 1;
  visibility: visible;
}
@media screen and (max-width: 768px) {
  .header_global_nav_content {
    padding: 0 10%;
  }
}

/* スクロールさせる*/
.header_global_nav_content__inner {
  padding: 30px 0;
  max-height: 100%;
  overflow-y: auto;
  /* IE, Edge 対応 */
  -ms-overflow-style: none;
  /* Firefox 対応 */
  scrollbar-width: none;
}

/* Chrome, Safari 対応 */
.header_global_nav_content__inner::-webkit-scrollbar {
  display: none;
}

/*50th*/
.header_global_nav_content .header_global_nav_50th {
  width: 150px;
  margin-bottom: 20px;
}

/* ロゴ周りとメニューの囲み*/
.header_global_nav_content .header_global_nav_content_wrap {
  display: grid;
  grid-template-columns: 300px 1fr;
  column-gap: 35px;
}
@media screen and (max-width: 768px) {
  .header_global_nav_content .header_global_nav_content_wrap {
    width: 100%;
    display: block;
  }
}

/* ロゴ周り*/
.global_nav_corporate {
  padding-right: 35px;
  border: 1px solid #22CCE7;
  border-width: 0 1px 0 0;
}
@media screen and (max-width: 768px) {
  .global_nav_corporate {
    border: none;
  }
}

.global_nav_corporate .logo {
  width: 80%;
  margin-bottom: 20px;
}
@media screen and (max-width: 768px) {
  .global_nav_corporate .logo {
    display: none;
  }
}

.global_nav_corporate p {
  color: var(--color-white);
}
@media screen and (max-width: 768px) {
  .global_nav_corporate p {
    display: none;
  }
}

.global_nav_corporate .tel {
  font-size: var(--s30);
  letter-spacing: 0.1rem;
  margin: 20px 0 30px 0;
}
.global_nav_corporate .tel a {
  display: block;
  color: var(--color-white);
}
.global_nav_corporate .tel span {
  font-size: var(--s18);
}

/* メールとマップアイコン */
.global_nav_corporate .icon_bt {
  width: 60%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
}

.global_nav_corporate .icon_bt li{
transition: 0.3s;
}
.global_nav_corporate .icon_bt li:hover {
opacity: 0.7;
}
.global_nav_corporate .icon_bt li a {
  display: block;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 30% 5%;
}
.global_nav_corporate .icon_bt li.icon_bt_item01 {
  background-color: var(--color-blue-rich);
}
.global_nav_corporate .icon_bt li.icon_bt_item01 img {
  width: 40%;
}
.global_nav_corporate .icon_bt li.icon_bt_item02 {
  background-color: var(--color-blue-murky-dark);
}
.global_nav_corporate .icon_bt li.icon_bt_item02 img {
  width: 25%;
}
@media screen and (max-width: 768px) {
  .global_nav_corporate .icon_bt {
    width: 45%;
    column-gap: 20px;
  }
}

/*ハンバーガーメニューリスト*/
.header_global_nav_list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 40px;
}
@media screen and (max-width: 768px) {
  .header_global_nav_list {
    display: block;
    margin-top: 30px;
  }
}

@media screen and (max-width: 768px) {
  .header_global_nav_list .header_global_nav_group {
    margin-bottom: 30px;
  }
}

.header_global_nav_group .header_global_nav_item {
  margin: 10px 0;
  color: var(--color-white);
}
.header_global_nav_group .header_global_nav_item a {
  color: var(--color-white);
}

/*プライバーなどメニュー*/
.header_global_sub_list .header_global_nav_group {
  display: flex;
  flex-wrap: wrap;
  margin-left: -20px;
  margin-top: 20px;
}
.header_global_sub_list .header_global_nav_group .header_global_nav_item {
  margin: 10px 20px;
}
@media screen and (max-width: 768px) {
  .header_global_sub_list .header_global_nav_group {
    display: block;
  }
}

/*--------------------------*/
/*ハンバーガーアイコン*/
.header_global_nav_btn {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1001;
  display: flex;
  justify-content: center;
align-items: center;
background-color: var(--color-blue);
  width: var(--hamburger-size);
  height: var(--hamburger-size);
}
@media screen and (max-width: 768px) {
  .header_global_nav_btn {
    width: var(--hamburger-size-sp);
    height: var(--hamburger-size-sp);
  }
}

.header_global_nav_btn .btn{
  width: 30px;
  height: 30px;
  position: relative;
  transition: .1s;
  cursor: pointer;
  display: inline-block;
}
@media screen and (max-width: 768px) {
.header_global_nav_btn .btn{
transform: scale(0.7);
  }
}


.header_global_nav_btn .btn span{
  width: 4px;
  height: 4px;
  background-color: #fff;
  display: block;
  border-radius: 50%;
  position: absolute;
}
.header_global_nav_btn .btn:hover span{
  transform: scale(1.2);
  transition: 350ms cubic-bezier(.8, .5, .2, 1.4);
}

.header_global_nav_btn .btn span:nth-child(1){
  left: 0;
  top: 0;
}
.header_global_nav_btn .btn span:nth-child(2){
  left: 13px;
  top: 0;
}
.header_global_nav_btn .btn span:nth-child(3){
  right: 0;
  top: 0;
}
.header_global_nav_btn .btn span:nth-child(4){
  left: 0;
  top: 13px;
}
.header_global_nav_btn .btn span:nth-child(5){
  position: absolute;
  left: 13px;
  top: 13px;
}
.header_global_nav_btn .btn span:nth-child(6){
  right: 0px;
  top: 13px;
}
.header_global_nav_btn .btn span:nth-child(7){
  left: 0px;
  bottom: 0px;
}
.header_global_nav_btn .btn span:nth-child(8){
  position: absolute;
  left: 13px;
  bottom: 0px;
}
.header_global_nav_btn .btn span:nth-child(9){
  right: 0px;
  bottom: 0px;
}
.header_global_nav_btn .btn.active{
  transform: rotate(180deg);
  cursor: pointer;
  transition: .2s cubic-bezier(.8, .5, .2, 1.4);
}
@media screen and (max-width: 768px) {
.header_global_nav_btn .btn.active{
transform: scale(0.7) rotate(180deg);
  }
}

.header_global_nav_btn .btn.active span{
  border-radius: 50%;
  transition-delay: 200ms;
  transition: .5s cubic-bezier(.8, .5, .2, 1.4);
}

.header_global_nav_btn .btn.active span:nth-child(2) {
  left: 6px;
  top: 6px;
}
.header_global_nav_btn .btn.active span:nth-child(4) {
  left: 6px;
  top: 18px;
}
.header_global_nav_btn .btn.active span:nth-child(6) {
  right: 6px;
  top: 6px;
}
.header_global_nav_btn .btn.active span:nth-child(8) {
  left: 18px;
  bottom: 6px;
}



/*--------------------------*/
/*メールアイコン*/
.header .header_mail {
  position: fixed;
  top: var(--hamburger-size);
  right: 0;
  width: var(--hamburger-size);
  height: var(--hamburger-size);
  background-color: var(--color-blue-rich);
  /*◎768px以下*/
}
@media screen and (max-width: 768px) {
  .header .header_mail {
    top: var(--hamburger-size-sp);
    right: 0;
    width: var(--hamburger-size-sp);
    height: var(--hamburger-size-sp);
  }
}

.header .header_mail a {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.header .header_mail img {
  width: 35%;
}