@charset "UTF-8";

/*----------------------------------------フォント----------------------------------------*/
body {
  /******ゴシック******/
  font-family: "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN W3",
    "Arial", "Yu Gothic", "Meiryo", sans-serif;
  /* font-family: "游ゴシック体", "YuGothic", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; */
  /******明朝体******/
  /* font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN W3", "Yu Mincho", "MS PMincho", serif; */
  /* font-family: "游明朝", "YuMincho", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif; */
  color: var(--font-color);
  background: #000;
  font-size: 1.8rem;
}

h1 {
  font-size: 3.6rem;
}

h2 {
  font-size: 2.8rem;
}

h3 {
  font-size: 2.4rem;
}

h4 {
  font-size: 2rem;
}

@media screen and (max-width: 768px) {
  body {
    font-size: 1.6rem;
    line-height: 1.5;
  }

  h1 {
    font-size: 3.2rem;
  }

  h2 {
    font-size: 2.4rem;
  }

  h3 {
    font-size: 2rem;
  }

  h4 {
    font-size: 1.8rem;
  }
}

@media screen and (max-width: 480px) {
  h1 {
    font-size: 2.8rem;
  }

  h2 {
    font-size: 2rem;
  }

  h3 {
    font-size: 1.8rem;
  }

  h4 {
    font-size: 1.6rem;
  }
}

/*----------------------------------------共通----------------------------------------*/
.inner {
  width: 100%;
  max-width: var(--inner);
  /* padding: var(--side-padding); */
  margin: 0 auto;
}

section {
  padding: var(--section-margin) var(--side-padding);
}

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

/*----------------------------------------header----------------------------------------*/
header {
  --nav-width: 50px;
  padding: 2em 0;
  background: var(--theme-color);
}

header .inner {
  padding: 0 var(--side-padding);
}

header h1 {
  /* width: calc(100% - var(--nav-width) - 1em); */
}

header h1 img {
  max-height: 25px;
}

header .nav_a {
  padding: 0 calc(var(--nav-width) + 1em) 0 0;
}

header .nav_a img {
  width: 30px;
  margin: 0 5px 0 0;
}

header .nav_btn {
  position: fixed;
  top: 12px;
  right: calc((100vw - var(--inner)) / 2);
  z-index: 100;
}

header .nav_btn .box {
  position: relative;
  width: var(--nav-width);
  aspect-ratio: 1;
  border: 1px solid #fff;
  transition: ease-in 0.3s;
}

header .nav_btn.active .box {
  transform: rotate(90deg);
}

header .nav_btn .box span {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #fff;
  transition: ease-in 0.3s;
}

header .nav_btn span:nth-child(1) {
  top: calc(var(--nav-width) / 5 * 1 + 2px);
  left: calc(var(--nav-width) / 5 * 1 + 2px);
}

header .nav_btn span:nth-child(2) {
  top: calc(var(--nav-width) / 5 * 1 + 2px);
  left: calc(var(--nav-width) / 5 * 2 + 2px);
}

header .nav_btn span:nth-child(3) {
  top: calc(var(--nav-width) / 5 * 1 + 2px);
  left: calc(var(--nav-width) / 5 * 3 + 2px);
}

header .nav_btn span:nth-child(4) {
  top: calc(var(--nav-width) / 5 * 2 + 2px);
  left: calc(var(--nav-width) / 5 * 1 + 2px);
}

header .nav_btn span:nth-child(5) {
  top: calc(var(--nav-width) / 5 * 2 + 2px);
  left: calc(var(--nav-width) / 5 * 2 + 2px);
}

header .nav_btn span:nth-child(6) {
  top: calc(var(--nav-width) / 5 * 2 + 2px);
  left: calc(var(--nav-width) / 5 * 3 + 2px);
}

header .nav_btn span:nth-child(7) {
  top: calc(var(--nav-width) / 5 * 3 + 2px);
  left: calc(var(--nav-width) / 5 * 1 + 2px);
}

header .nav_btn span:nth-child(8) {
  top: calc(var(--nav-width) / 5 * 3 + 2px);
  left: calc(var(--nav-width) / 5 * 2 + 2px);
}

header .nav_btn span:nth-child(9) {
  top: calc(var(--nav-width) / 5 * 3 + 2px);
  left: calc(var(--nav-width) / 5 * 3 + 2px);
}

header .nav_btn.active .box span:nth-child(2),
header .nav_btn.active .box span:nth-child(4),
header .nav_btn.active .box span:nth-child(6),
header .nav_btn.active .box span:nth-child(8) {
  opacity: 0;
}

header .nav_btn p {
  line-height: 100%;
  text-align: center;
}

header nav {
  --nav_box-width: calc(15em + (100vw - var(--inner)) / 2);
  position: fixed;
  top: 0;
  right: calc(-1 * var(--nav_box-width));
  width: var(--nav_box-width);
  height: 100%;
  padding: 2em;
  background: rgb(from var(--theme-color) r g b / 90%);
  transition: ease-in 0.3s;
}

header nav.active {
  right: 0;
}

header nav ul {}

header nav ul li {
  margin: 0 auto 1em;
}

@media screen and (max-width: 1200px) {
  header .nav_btn {
    right: var(--side-padding);
  }

  header nav {
    --nav_box-width: 15em;
    right: calc(-1 * var(--nav_box-width));
    width: var(--nav_box-width);
  }
}

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

/*----------------------------------------footer----------------------------------------*/
footer {
  padding: 4em 0;
  background: var(--theme-color);
  text-align: center;
}

footer .inner {
  padding: var(--side-padding);
}

footer .color {
  color: var(--base-color);
  font-size: min(4.5vw, 1.5em);
  font-weight: bold;
}

footer .line {
  margin: var(--section-margin) auto;
  border-top: 1px solid #fff;
}

footer h1 img {
  margin: var(--section-margin) auto 0;
}

@media screen and (max-width: 768px) {
  footer .color {
    text-align: left;
  }
}