@charset "utf-8";

/* ==========ヘッダー============ */

header {
  width: 100%;
  height: var(--header-height);
}

.header-box {
  max-width: var(--meaningful-max-width);
  height: var(--header-height);
  margin-inline: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px;
}

.header-name {
  width: fit-content;
  height: auto;
  max-height: 100%;
  display: flex;
  font-size: 2rem;
  font-weight: bold;
}

.header-name-logo img {
  width: 5rem;
  height: fit-content;
}

.header-name .sub-text {
  font-size: 1.25rem;
  font-weight: bold;
}
.header-name a {
  text-decoration: none;
  color: white;
}

header .text-mail {
  display: block;
}
header .image-mail {
  display: none;
}

header .text-mail a {
  text-decoration: none;
  color: black;
}
header .text-mail a:hover {
  text-decoration: underline;
  color: var(--header-color);
}
/* ======================================== */
.nav-box {
  width: 100%;
  height: var(--header-height);
  margin-inline: auto;
  /* display: flex;
  justify-content: space-between;
  align-items: center; */
  padding: 4px;
  background-color: var(--header-color);
  color: white;
}

.nav-box nav {
  max-width: var(--meaningful-max-width);
  margin-inline: auto;
  display: flex;
  align-items: center;
  height: 100%;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.nav-box ul {
  display: flex;
  width: fit-content;
  list-style: none;
}

.nav-box nav li > a {
  display: flex;
  height: calc(var(--header-height) * 0.75);
  align-items: center;
  text-decoration: none;
  color: white;
}
.nav-box nav li > a > div {
  height: fit-content;
  padding-inline: 1rem;
  font-size: 1rem;
  text-decoration: none;
  color: var(--header-deep);
  text-align: center;
  /* vertical-align: middle; */
}
.nav-box nav li > a:hover {
  /* background-color: var(--sub-color); */
  text-decoration: underline;
}

.page-hide-behind-header {
  margin-top: var(--header-height);
  background-color: var(--base-color);
}
/* ヘッダーの裏に隠すための大きなコンテナ。主にmainなどの親。 */

/* liとdivはフローコンテンツなのでaを挟める */

/* ================スマホ用=========================================================== */
@media screen and (orientation: portrait), screen and (max-width: 767px) {
  /*=================ヘッダー=============================*/

  .header-name {
    height: var(--header-height);
    font-size: min(2em, calc(64 * 100vw / 1024));
  }

  .header-name-logo {
    max-width: calc(160 * 100vw / 1024);
  }
  .header-name-logo img {
    max-width: calc(160 * 100vw / 1024);
    height: fit-content;
  }

  .header-name .sub-text {
    height: var(--header-height);
    font-size: min(1.25em, calc(40 * 100vw / 1024));
  }

  header .text-mail {
    display: none;
  }
  header .image-mail {
    display: block;
  }
  header .image-mail img {
    object-fit: contain;
    /* height: 4rem; */
    width: fit-content;
    max-width: calc(160 * 100vw / 1024);
    height: fit-content;
  }

  /* =================== */
  .nav-box ul {
    margin-inline: auto;
  }

  .nav-box nav li > a:hover {
    background-color: transparent;
  }
}