*, *::before, *::after {
  box-sizing: border-box;
}

body, h1, h2, p, ul, dl, dd {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

body {
  background: #fff;
  color: #111;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-size: 15px;
  line-height: 1.65;
}

a {
  color: inherit;
  text-decoration: none;
}
@media (prefers-reduced-motion: no-preference) {
  a {
    transition: opacity 0.15s ease-in-out;
  }
}
a:hover {
  opacity: 0.68;
}

button {
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.l-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 10;
  background: #fff;
  margin-block: calc(var(--header-space) - 20px) calc(clamp(70px, 9.7vw, 140px) - 20px);
}
@media (max-width: 767px) {
  .l-header {
    margin-block-end: calc(var(--header-space) - 20px);
  }
}
.l-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-block-size: var(--header-height);
}
.l-header-logo {
  width: min(31%, 300px);
}
@media (max-width: 767px) {
  .l-header-logo {
    width: min(68%, 235px);
  }
}
.l-header-logo svg {
  display: block;
  width: 100%;
  height: auto;
}
.l-header-menu {
  display: none;
  padding: 8px;
  margin-inline-end: -8px;
}
@media (max-width: 767px) {
  .l-header-menu {
    display: grid;
    place-items: center;
  }
}

.l-footer {
  padding-block: clamp(110px, 13vw, 190px) clamp(90px, 12vw, 180px);
  font-size: 11px;
}
@media (max-width: 767px) {
  .l-footer {
    padding-block: 120px 70px;
  }
}

.l-header-menu svg,
.l-navigation-close svg {
  display: block;
  width: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}

.l-navigation {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 30px);
  letter-spacing: 0.08em;
}
.l-navigation .item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.l-navigation .item svg {
  width: 17px;
  height: 17px;
}
@media (max-width: 767px) {
  .l-navigation--desktop {
    display: none;
  }
}
.l-navigation--desktop .item--about svg,
.l-navigation--desktop .item--mail svg {
  display: none;
}
.l-navigation--desktop .item--instagram .label,
.l-navigation--desktop .item--facebook .label, .l-navigation--social .item--instagram .label,
.l-navigation--social .item--facebook .label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.l-navigation--mobile {
  display: grid;
  gap: 0;
  width: min(100%, 70vw);
  border-block-start: 1px solid #555;
  counter-reset: menu-item;
  font-size: clamp(22px, 6.7vw, 34px);
  letter-spacing: 0;
}
.l-navigation--mobile .item {
  min-block-size: 68px;
  padding-block: 12px;
  border-block-end: 1px solid #555;
  counter-increment: menu-item;
}
.l-navigation--mobile .item::before {
  content: "(" counter(menu-item, decimal-leading-zero) ")"/"";
  align-self: flex-start;
  margin-block-start: 0.65em;
  color: #aaa;
  font-size: 12px;
}
.l-navigation--mobile .item svg {
  display: none;
}

.l-navigation-bottom {
  margin-block-start: auto;
}

.l-navigation--social {
  margin-block-start: 24px;
}
.l-navigation--social .item {
  display: grid;
  place-items: center;
  min-width: 32px;
  min-height: 32px;
}
.l-navigation--social .item svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.l-navigation-dialog {
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: var(--menu-header-top, 0px) 0 40px;
  border: 0;
  background: #000;
  color: #fff;
}
.l-navigation-dialog > .l-contents {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-block-size: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .l-navigation-dialog[open] {
    animation: menu-open 0.3s ease-out both;
  }
}
.l-navigation-dialog::backdrop {
  background: rgba(0, 0, 0, 0.12);
}

.l-navigation-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-block-size: var(--menu-header-height, var(--header-height));
}
.l-navigation-top .l-header-logo {
  filter: invert(1);
}

.l-navigation-close {
  display: grid;
  place-items: center;
  padding: 8px;
  margin-inline-end: -8px;
}

@keyframes menu-open {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0);
  }
}
body:has(.l-navigation-dialog[open]) {
  overflow: hidden;
}

:root {
  --contents-max-width: 1200px;
  --contents-padding: 5vw;
  --header-height: 72px;
  --header-space: clamp(80px, 12.7vw, 190px);
}
@media (max-width: 767px) {
  :root {
    --header-space: clamp(48px, 17vw, 100px);
  }
}

.l-contents {
  max-width: calc(var(--contents-max-width) + 2 * var(--contents-padding));
  padding-inline: var(--contents-padding);
  margin-inline: auto;
}

@media (prefers-reduced-motion: no-preference) {
  .l-main {
    animation: page-enter 0.85s ease-in-out both;
  }
}
@keyframes page-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}