@charset "UTF-8";
:root {
  --leading-trim: calc((1em - 1lh) / 2);
}

/*
======== table of content. ===============

summary:ヘッダー、フッター設定

==========================================
*/
.header {
  display: block grid;
  grid-template-columns: 17.125em 1fr;
  gap: 4.5em;
  position: sticky;
  inset-inline-start: 0;
  inset-block-start: 0;
  padding: 4.5em 3.75em 1.5em 8.5em;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 10;
  transition: padding 0.5s cubic-bezier(0.23, 1, 0.32, 1), height 0.5s cubic-bezier(0.23, 1, 0.32, 1), block-size 0.5s cubic-bezier(0.23, 1, 0.32, 1), max-block-size 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .header {
    padding-inline: 2.5em;
  }
}
@media screen and (min-width: 768px) and (max-width: 926px) {
  .header {
    gap: 1.5em;
    padding-inline: 1.5em;
  }
}
@media screen and (max-width: 767px) {
  .header {
    grid-template-columns: 1fr 3.375em;
    padding: 0;
  }
}
@media screen and (min-width: 768px) {
  .header.scrolled {
    padding-block: 2em 0.5em;
  }
}
@media screen and (min-width: 768px) {
  .header.scrolled .header__logo a img {
    block-size: 2.8em;
  }
}
.header__logo a {
  display: block;
}
@media screen and (max-width: 767px) {
  .header__logo a {
    display: inline-block;
    padding: 1em 1em 0.6875em 1em;
  }
}
.header__logo a img {
  inline-size: auto;
  block-size: 3.75em;
  transition: block-size 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
@media screen and (max-width: 767px) {
  .header__logo a img {
    block-size: 1.75em;
  }
}

.footer {
  margin-block-start: 6.5em;
  padding-block: 3.75em 1.875em;
  background-color: #f4f4f3;
}
@media screen and (max-width: 767px) {
  .footer {
    padding-block-end: 6em;
  }
}
.footer .inner {
  display: block grid;
  grid-template-columns: 8.375em 1fr;
  gap: 3.25em;
}
@media screen and (max-width: 767px) {
  .footer .inner {
    position: relative;
    grid-template-columns: none;
    grid-auto-flow: row;
    padding-inline: 1em;
  }
}
.footer__logo {
  inline-size: 8.375em;
}
@media screen and (max-width: 767px) {
  .footer__logo {
    inline-size: 5.375em;
  }
}
.footer__copyright {
  margin-block: calc(3.3333em + var(--leading-trim)) var(--leading-trim);
  font-family: "Barlow", sans-serif !important;
  font-size: 75%;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .footer__copyright {
    margin-block-start: calc(1.25em + var(--leading-trim));
  }
}/*# sourceMappingURL=headerfooter.css.map */