#header {
  background-color: var(--white-color);
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start
}

#header #logo {
  display: flex;
  padding-left: var(--side-margin)
}

@media print {
  #header #logo {
    width: 18.75vw
  }
}

#header #logo {
    width: 18.75vw
  }

#header #nav-site {
  width: calc(81.25vw - var(--side-margin)*5)
}

#header #nav-site > ul {
  display: flex
}

#header #nav-site > ul > li {
  display: flex;
  width: 6.25vw;
}

.trp-language-switcher-container {
  width: 24pt !important;

}

.menu-cart {
  width: auto !important;
  position: absolute;
  right: var(--side-margin);
}

@media only screen and (min-width: 601px)and (max-width: 992px) {
  #header #nav-site > ul > li {
    width: 12.5vw
  }
}

@media only screen and (max-width: 600px) {
  #header #nav-site > ul > li {
    width: 12.5vw
  }
}

@media only screen and (min-width: 601px)and (max-width: 992px) {
  #header #nav-site > ul > li.menu-projects {
    width: 25vw
  }
}

@media only screen and (max-width: 600px) {
  #header #nav-site > ul > li.menu-projects {
    width: 37.5vw
  }
}

@media print {
  #header #nav-site > ul > li.menu-index {
    width: 12.5vw
  }
}

@media only screen and (min-width: 993px) {
  #header #nav-site > ul > li.menu-index {
    width: 12.5vw
  }
}

@media print {
  #header #nav-site > ul > li.menu-info {
    width: 18.75vw
  }
}

@media only screen and (min-width: 993px) {
  #header #nav-site > ul > li.menu-info {
    width: 12vw
  }
}

body.page-projects.dcore-scaff-mode-view #header #extra-nav {
  display: none
}

body.page-info #header #extra-nav,
body.page-contact #header #extra-nav {
  display: none
}

#header #extra-nav > ul {
  display: flex
}

#header #extra-nav > ul > li {
  display: flex
}

@media print {
  #header #extra-nav > ul > li.year {
    width: 6.25vw;
    margin-left: 6.25vw
  }
}

@media only screen and (min-width: 993px) {
  #header #extra-nav > ul > li.year {
    width: 6.25vw;
    margin-left: 6.25vw
  }
}

@media only screen and (min-width: 601px)and (max-width: 992px) {
  #header #extra-nav > ul > li.year {
    width: 12.5vw;
    margin-left: 12.5vw
  }
}

@media only screen and (max-width: 600px) {
  #header #extra-nav > ul > li.year {
    width: 12.5vw;
    padding-left: var(--side-margin);
    position: relative;
    z-index: 10
  }
}

#header #extra-nav > ul > li.type-of-client {
  white-space: nowrap;
}

body.page-projects.dcore-scaff-mode-list #header #extra-nav > ul > li.type-of-client {
  visibility: visible
}

@media print {
  #header #extra-nav > ul > li.type-of-client {
    overflow-y: hidden;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none
  }

  #header #extra-nav > ul > li.type-of-client::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none
  }

  #header #extra-nav > ul > li.type-of-client::-webkit-scrollbar,
  #header #extra-nav > ul > li.type-of-client::-webkit-scrollbar-thumb,
  #header #extra-nav > ul > li.type-of-client::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0)
  }
}

@media only screen and (min-width: 601px) {
  #header #extra-nav > ul > li.type-of-client {
    overflow-y: hidden;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none
  }

  #header #extra-nav > ul > li.type-of-client::-webkit-scrollbar {
    width: 0;
    height: 0;
    display: none
  }

  #header #extra-nav > ul > li.type-of-client::-webkit-scrollbar,
  #header #extra-nav > ul > li.type-of-client::-webkit-scrollbar-thumb,
  #header #extra-nav > ul > li.type-of-client::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0)
  }
}

@media print {
  #header #extra-nav > ul > li.type-of-client {
    width: 87.5vw;
    padding-left: 6.25vw
  }
}

@media only screen and (min-width: 993px) {
  #header #extra-nav > ul > li.type-of-client {
    width: 87.5vw;
    padding-left: 6.25vw
  }
}

@media only screen and (min-width: 601px)and (max-width: 992px) {
  #header #extra-nav > ul > li.type-of-client {
    width: 75vw;
    padding-left: 12.5vw
  }
}

@media only screen and (max-width: 600px) {
  #header #extra-nav > ul > li.type-of-client {
    width: 25vw;
    margin-left: 12.5vw
  }
}

@media print {
  #header #extra-nav > ul > li.type-of-client > .type-of-client-opener {
    display: none
  }
}

@media only screen and (min-width: 601px) {
  #header #extra-nav > ul > li.type-of-client > .type-of-client-opener {
    display: none
  }
}

@media only screen and (max-width: 600px) {
  #header #extra-nav > ul > li.type-of-client > .type-of-client-opener {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5ch
  }

  #header #extra-nav > ul > li.type-of-client > .type-of-client-opener::after {
    content: "";
    display: block;
    width: calc(var(--default-line-height) * .3333);
    height: calc(var(--default-line-height) * .3333);
    margin-right: calc(var(--default-line-height) * .25);
    border-right: 1px solid var(--foreground-color);
    border-bottom: 1px solid var(--foreground-color);
    transform: rotate(45deg) translate(-25%, -25%)
  }
}

@media print {
  #header #extra-nav > ul > li.type-of-client > ul {
    display: flex;
    gap: calc(var(--default-line-height));
    padding-right: calc(var(--side-margin))
  }
}

@media only screen and (min-width: 601px) {
  #header #extra-nav > ul > li.type-of-client > ul {
    display: flex;
    gap: calc(var(--default-line-height));
    padding-right: calc(var(--side-margin))
  }
}

@media only screen and (max-width: 600px) {
  #header #extra-nav > ul > li.type-of-client > ul {
    display: none;
    background-color: var(--background-color);
    position: absolute;
    z-index: 1;
    top: calc(var(--default-line-height) * 2);
    left: 0;
    right: 0;
    padding-left: 25vw;
    padding-right: 50vw
  }

  #header #extra-nav > ul > li.type-of-client > ul::after {
    position: absolute;
    top: calc(var(--default-line-height) * .25);
    right: 50vw;
    content: "";
    display: block;
    width: calc(var(--default-line-height) * .3333);
    height: calc(var(--default-line-height) * .3333);
    margin-right: calc(var(--default-line-height) * .25);
    border-right: 1px solid var(--foreground-color);
    border-bottom: 1px solid var(--foreground-color);
    transform: rotate(225deg) translate(-25%, -25%)
  }
}

#header #extra-nav > ul > li.type-of-client > ul > li {
  display: block
}

@media (pointer: fine)and (hover: hover) {
  #header #extra-nav > ul > li.type-of-client > ul > li > a:hover:not(:disabled) {
    color: var(--hover-color)
  }
}

#header #extra-nav > ul > li.type-of-client > ul > li > a.active,
#header #extra-nav > ul > li.type-of-client > ul > li > a.hover-,
#header #extra-nav > ul > li.type-of-client > ul > li > a.current-,
#header #extra-nav > ul > li.type-of-client > ul > li > a:focus {
  color: var(--hover-color)
}

@media only screen and (max-width: 600px) {
  #header #extra-nav > ul > li.type-of-client:hover > ul {
    display: block
  }
}

#header #extra-nav > ul > li > a.active {
  color: var(--hover-color)
}

#header #logo a,
#header #nav-site > ul > li > a {
  display: block
}

#body {
  margin-top: calc(var(--header-height));
  min-height: calc(100vh - var(--footer-height))
}

#footer {
  background-color: var(--white-color);
  position: relative
}

@media print {
  #footer {
    display: flex;
    flex-wrap: wrap
  }
}

@media only screen and (min-width: 993px) {
  #footer {
    display: flex;
    flex-wrap: wrap
  }
}

@media only screen and (max-width: 600px) {
  #footer {
    height: calc(var(--footer-height))
  }
}

@media print {
  #footer > div {
    width: 6.25vw
  }
}

@media only screen and (min-width: 993px) {
  #footer > div {
    width: 6.25vw
  }
}

@media only screen and (max-width: 992px) {
  #footer > div {
    width: 12.5vw
  }
}

#footer > div.about {
  padding-left: var(--side-margin)
}

@media print {
  #footer > div.about {
    width: 37.5vw
  }
}

@media only screen and (min-width: 993px) {
  #footer > div.about {
    width: 37.5vw
  }
}

@media only screen and (min-width: 993px)and (max-width: 1280px) {
  #footer > div.about {
    width: 50vw
  }
}

@media only screen and (max-width: 992px) {
  #footer > div.about {
    width: 100vw
  }
}

@media print {
  #footer > div.copyright {
    width: 50vw
  }
}

@media only screen and (min-width: 993px) {
  #footer > div.copyright {
    width: 50vw
  }
}

@media only screen and (min-width: 993px)and (max-width: 1280px) {
  #footer > div.copyright {
    width: 31.25vw
  }
}

@media only screen and (max-width: 992px) {
  #footer > div.copyright {
    padding-left: var(--side-margin)
  }
}

@media only screen and (min-width: 601px)and (max-width: 992px) {
  #footer > div.copyright {
    width: 75vw
  }
}

@media only screen and (max-width: 600px) {
  #footer > div.copyright {
    width: 100vw
  }
}

#footer > div.sns {
  position: absolute;
  bottom: 0;
  width: auto;
  right: calc(var(--side-margin))
}

@media only screen and (max-width: 600px) {
  body.dcore-scaff-mode-view #footer {
    display: none
  }
}

body.page-index #footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0
}

.content-area {
  margin-top: calc(var(--default-line-height) * 3);
}