@import "https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600;700&display=swap";
@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";
:root {
  --main-color: #00a1af;
  --hover-color: #006678;
  --inset-space-sp: calc(20 / 390 * 100%);
  --fv-delay: 0.6s;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}
body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  position: relative;
}
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}
input,
button,
textarea,
select {
  font: inherit;
}
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}
#root,
#__next {
  isolation: isolate;
}
ul {
  list-style-type: none;
}
br {
  letter-spacing: 0;
}
html,
body {
  height: 100%;
}
html {
  font-size: 62.5%;
}
@media (min-width: 600px) {
  html {
    font-size: 0.78vw;
  }
}
@media (min-width: 1024px) {
  html {
    font-size: 62.5%;
  }
}
body {
  font-size: clamp(1rem, 3.5897435897vw, 1.4rem);
  font-family: "Inter", "Noto Sans JP", "ヒラギノ角ゴ Pro",
    "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "游ゴシック", YuGothic,
    "ＭＳ Ｐゴシック", sans-serif;
  font-weight: 500;
  overflow-x: hidden;
  color: #303132;
  min-width: 320px;
  position: relative;
}
@media (min-width: 600px) {
  body {
    font-size: clamp(1rem, 1.0248901903vw, 1.4rem);
  }
}
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.6;
}
table,
li,
p,
dl {
  line-height: 1.8;
}
a {
  color: #333;
  text-decoration: none;
}
img {
  max-width: 100%;
  height: auto;
  image-rendering: -webkit-optimize-contrast;
}
i {
  font-style: normal;
}
table {
  border-collapse: collapse;
}
body figure {
  margin: 0;
}
.h {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 7.5rem;
  z-index: 1000;
}
.h__in {
  position: relative;
  padding: 2rem 5.1282051282% 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 10;
}
@media (min-width: 600px) {
  .h {
    height: 12.5rem;
    transition: opacity 0.5s ease;
    transition-delay: var(--fv-delay);
  }
  .h__in {
    padding: 1.3rem 5rem 0;
  }
}
@media (min-width: 600px) {
  .home .h {
    opacity: 0;
  }
}
@media (min-width: 600px) {
  .home .h.on {
    opacity: 1;
  }
}
.barGrad {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #a0a0a0;
  background: linear-gradient(
    180deg,
    rgb(160, 160, 160) 0%,
    rgba(142, 142, 142, 0.5) 40%,
    rgba(162, 162, 162, 0.19) 65%,
    rgba(255, 255, 255, 0) 100%
  );
  mix-blend-mode: multiply;
  z-index: 100;
  height: 7.5rem;
}
@media (min-width: 600px) {
  .barGrad {
    height: 12.5rem;
  }
}
.logo {
  width: 13rem;
  flex-shrink: 0;
}
@media (min-width: 600px) {
  .logo {
    width: 15rem;
  }
}
.nav {
  display: none;
}
@media (min-width: 600px) {
  .nav {
    display: block;
    width: 100%;
    max-width: 93rem;
    margin-left: 4.9048316252vw;
  }
  .nav ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .nav a {
    font-weight: 500;
    color: #fff;
    letter-spacing: 0.225em;
    transition: opacity 0.3s ease;
  }
  .nav a:hover {
    opacity: 0.7;
  }
  .nav__contact a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 15rem;
    height: 5rem;
    background: #fff;
    border-radius: 3em;
    color: var(--main-color);
    transition: letter-spacing 0.3s ease;
  }
  .nav__contact a:hover {
    letter-spacing: 0.35em;
    opacity: 1;
  }
}
.navBtn {
  position: fixed;
  width: 7.5rem;
  height: 2.6rem;
  right: 2rem;
  top: 2rem;
  background-color: #fff;
  border-radius: 3em;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background 100ms ease, transform 100ms ease;
  z-index: 1002;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-indent: 0.1em;
  color: var(--main-color);
}
@media (min-width: 600px) {
  .navBtn {
    display: none;
  }
}
.navBtn::after {
  content: "CLOSE";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 0;
  height: 0;
  visibility: hidden;
}
.isOpen .navBtn {
  background-color: var(--main-color);
  color: #fff;
}
.isOpen .navBtn span {
  width: 0;
  height: 0;
  visibility: hidden;
}
.isOpen .navBtn::after {
  width: inherit;
  height: inherit;
  visibility: visible;
}