@font-face {
  font-family: "Space Colony";
  src: url("https://seikenstudio.com/wp-content/themes/cloudy/assets/fonts/SpaceColony-Regular.ttf") format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: "Space Colony";
  src: url("https://seikenstudio.com/wp-content/themes/cloudy/assets/fonts/SpaceColony-Medium.ttf") format("truetype");
  font-weight: 700;
}
@font-face {
  font-family: "Space Colony";
  src: url("https://seikenstudio.com/wp-content/themes/cloudy/assets/fonts/SpaceColony-SemiBold.ttf") format("truetype");
  font-weight: 1000;
}
@font-face {
  font-family: "Impact";
  font-style: normal;
  font-weight: normal;
  src: url("https://seikenstudio.com/wp-content/themes/cloudy/assets/fonts/impact.woff") format("woff");
}

* {
  font-family: "Arial", sans-serif;
  color: var(--color-text);
  font-size: 18px;
  box-sizing: border-box;
  transition: all 0.5s ease;
  user-select: none;
  -webkit-user-select: none;
}

h1 { font-size: 1.9rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.4rem; line-height: 1.5; }
h4 { font-size: 1.2rem; }
h5 { font-size: 1.1rem; }
h6 { font-size: 1rem; }
b, strong, span { font-size: inherit; }
p { margin-bottom: 0em; }

.container {
  max-width: 1600px;
}

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-button { display: none; }
::-webkit-scrollbar-thumb { background: var(--color-seiken); }
::-webkit-scrollbar-track { background: var(--color-banner); }

a { text-decoration: none; }
a:hover { text-decoration: none; }

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(var(--scroll-width)); }
}
@keyframes move-diagonal {
  0% { background-position: var(--move-diagonal-pos-0); }
  100% { background-position: var(--move-diagonal-pos-100); }
}

svg * { transition: none; }

:root {
  --svg-size: 130px;
  --svg-size-mixed: 95px;
  --svg-size-footer: 50px;
  --font-size: 16px;
  --font-size-menu: 30px;
  --font-size-title: 30px;
  --font-size-description: 18px;
  --nav-container-height: 120px;
  --carousel-height: 550px;
  --border-white: 5px solid white;
  --border-radius: 2rem;
  --footer-spacing: 10vh;
  --move-diagonal-pos-0: 0 0, 12.5% 50%;
  --move-diagonal-pos-100: -50% 100%, -37.5% 150%;
}

* { font-size: var(--font-size); }

.nav-container {
  padding: .75rem 2rem;
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: space-between;
  z-index: 100;
  transition: none;
  height: var(--nav-container-height);
}
.nav-container .nav-background { background: var(--color-banner); width: 100%; position: absolute; height: 100%; top: 0; left: 0; z-index: -99; }
.nav-container .nav-background.svg { height: 100%; }
.nav-container.sticky { position: fixed; background: var(--color-banner); z-index: 999; }
.nav-container .logo { width: 50vw; }
.nav-container .logo a { height: 100%; display: block; }
.nav-container .logo svg { height: 100%; max-width: 300px; }

.nav-container .menu {
  position: initial;
  transform: none;
  background-color: initial;
  flex-direction: row;
  width: initial;
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  transform-origin: top;
}
.nav-container .menu.active { transform: scaleY(1); }
.nav-container .menu li { padding: 0 1.5rem; margin: auto; }
.nav-container .menu li:last-child {
  background: var(--color-normal);
  padding: 0rem 1.25rem;
  border-radius: var(--border-radius);
  border: 5px solid white;
  margin: auto;
}
.nav-container .menu li:last-child.current-menu-item { background: var(--color-click); }
.nav-container .menu li:last-child:hover { background: var(--color-over); }
.nav-container .menu li:last-child:active { background: var(--color-click); }
.nav-container .menu li:last-child:hover a { color: white; }
.nav-container .menu li a { color: white; font-size: var(--font-size-menu); }
.nav-container .menu li.current-menu-item:not(:last-child) a {
  color: var(--color-click);
}
.nav-container .menu li:hover a { color: var(--color-normal); }

.menu-button {
  display: none;
  width: 30px;
  height: 15px;
  position: relative;
  cursor: pointer;
  margin: auto 5px auto;
}
.menu-button span { display: inline-block; width: 70%; height: 2px; background: white; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -webkit-transition: 0.5s all ease; transform: translateX(-50%); transition: 0.5s all ease; }
.menu-button span:nth-child(1) { top: 0px; }
.menu-button span:nth-child(2) { top: 50%; transform: translate(-50%, -50%); }
.menu-button span:nth-child(3) { bottom: 0px; }
.menu-button.active span:nth-child(1) { top: 50%; transform: translate(-50%, -50%) rotate(45deg); transition: 0.25s all ease; }
.menu-button.active span:nth-child(2) { display: none; }
.menu-button.active span:nth-child(3) { top: 50%; transform: translate(-50%, -50%) rotate(-45deg); transition: 0.25s all ease; }

.shadow-div, .shadow-svg svg, .shadow-img img { filter: var(--shadow-type-1); }
.shadow-div-2, .shadow-svg-2 svg, .shadow-img-2 img { filter: var(--shadow-type-2); }
.shadow-div-3, .shadow-svg-3 svg, .shadow-img-3 img { filter: var(--shadow-type-3); }

.divider {
  display: flex;
  padding: 2rem;
  margin: auto;
  width: 50%;
}

.title.title-svg {
  display: flex;
}
.title.title-svg svg {
  height: 50px;
  margin: auto;
}

.page-content-default { position: relative; display: flex; flex-direction: column; text-align: center; z-index: 2; }
.page-content-default .page-content-inner .title { width: 50%; margin: auto; margin-bottom: 5%; }
.page-content-default .background-image { z-index: -99; position: absolute; height: 100%; width: 100%; }
.page-content-default .divider { margin: 5% auto; }
.page-content-default .title {
  color: var(--color-topic);
  text-transform: uppercase;
  font-family: "Arial";
  font-weight: bold;
  font-size: 3rem;
  margin-bottom: 1rem;
}
.page-content-default .content * { line-height: 1.5; }
.page-content-default .page-content-inner { width: 60%; display: flex; flex-direction: column; margin: auto; }
.page-content-inner .content * { font-size: 1.3rem; color: #fff; }
.page-content-default .title-content * { color: var(--color-seiken); margin-bottom: 1rem; font-weight: bold; }

.page-content-carousel-container { display: flex; overflow: hidden; width: 200%; animation: scroll calc(15s * var(--length) / 6) linear infinite; }
.page-content-carousel-container .logo-container { margin: 1rem; }
.page-content-carousel-container .logo-container svg { width: 100px; }
.page-content-carousel-container .logo-container img { width: 100%; margin: auto; }

.background { background-color: var(--color-background); }
.background-cloudy { background-color: var(--color-seiken); }

.button-primary { margin: 1rem auto; width: fit-content; padding: 0.25rem 2rem; border: var(--border-white); border-radius: 2rem; background: var(--color-normal); text-transform: uppercase; color: white; font-weight: bold; font-size: 1.5rem; filter: drop-shadow(var(--local-shadow-color) var(--local-shadow-params)); }
.button-primary:hover { background: var(--color-over); }
.button-primary a { color: white; font-weight: bold; font-size: 1.5rem; }
.button-primary.loading { --loading-color: white; color: transparent; }

.logo-container.has-overlay-svg svg { width: var(--svg-size); height: var(--svg-size); }
.has-overlay-svg { display: flex; position: relative; }
.has-overlay-svg:hover > svg { opacity: 0; transform: scale(1.25); }
.has-overlay-svg:hover .svg-overlay, .has-overlay-svg:hover .img-overlay { opacity: 1; transform: scale(1.25); }
.has-overlay-svg:not(.no-color) > svg * { fill: white; }
.has-overlay-svg .svg-overlay, .has-overlay-svg .img-overlay { position: absolute; opacity: 0; width: 100%; height: 100%; display: flex; }

main.single.standard:before { content: ''; height: calc(var(--nav-container-height) + 10px); background: var(--color-banner); position: absolute; width: 100%; }
main.single.standard .container { padding-top: calc(var(--nav-container-height) * 1.5); }

.page-title { height: 400px; background: var(--color-seiken); display: flex; position: relative; }
.page-title .page-title-background { position: relative; height: 100%; width: 100%; }
.page-title .page-title-background .background-image { width: 100%; height: 100%; }
.page-title .page-title-background .background-image img { width: 100%; height: 100%; object-fit: cover; }
.page-title .page-title-content { position: absolute; top: 0; left: 0; margin: auto; font-family: Calibri; text-transform: uppercase; color: white; width: 100%; height: 100%; display: flex; }
.page-title .page-title-content * { margin: auto; font-size: 3.25rem; }

.footer { display: flex; flex-direction: column; align-items: center; position: relative; }
.footer .background-image { position: absolute; width: 100%; height: 100%; z-index: -1; }
.footer-container { padding: 2% 0; }
.footer-container .footer-logo { display: flex; flex-direction: row; width: 75%; margin: auto; }
.footer-container .footer-logo > * { width: 50%; }
.footer-container .footer-logo .logo-container { display: flex; }
.footer-container .seiken-logo { display: flex; }
.footer-container .seiken-logo svg { height: 65%; margin: auto; }
.footer-container .follow-contact { width: 50%; margin: auto; }
.footer-container .follow-contact > * { margin: 5% 0; }
.footer-container * { color: white; font-size: 1.25rem; }
.footer-container .follow-contact-text { text-align: center; }
.footer-container .icon-container { display: flex; justify-content: center; margin: auto; flex-wrap: wrap; }
.footer-container .icon-container a { margin: 5px; }
.footer-container .icon-container svg { width: var(--svg-size-footer); height: var(--svg-size-footer); }
.footer-container .tc-pp { width: 75%; margin: 2% auto; text-transform: uppercase; display: flex; }
.footer-container .tc-pp > * { width: 50%; display: flex; }
.footer-container .tc-pp a { margin: auto; }
.footer-container .footer-text { text-align: center; }

.footer-icon-container { width: initial; }
.footer-icon-container a { width: initial; margin: 0 .25rem; }
.footer-icon-container .logo-container { margin: 0; }
.footer-icon-container .logo-container svg { width: 50px; height: 50px; }

.loading:after {
  content: ''; width: 2rem; --b: 8px; aspect-ratio: 1; border-radius: 50%; padding: 1px; background: conic-gradient(#0000 10%, var(--loading-color)) content-box; -webkit-mask: repeating-conic-gradient(#0000 0deg,#000 1deg 20deg,#0000 21deg 36deg), radial-gradient(farthest-side,#0000 calc(100% - var(--b) - 1px),#000 calc(100% - var(--b))); -webkit-mask-composite: destination-in; mask-composite: intersect; animation: l4 1s infinite steps(10); display: block; position: absolute; top: calc(50% - 1rem); left: calc(50% - 1rem);
}

.page-static-image img {
  width: 100%;
}

.title-text-component:first-of-type {
  padding: var(--nav-container-height) 0;
}
.title-text-component .page-content-inner .content * {
  color: var(--color-text);
}
.title-text-component .page-content-default { text-align: unset; }
.title-text-component .page-content-default .divider svg *{ fill: var(--color-text); }
.title-text-component .page-content-default h3 { font-size: 1.4rem; line-height: 1.5; font-weight: bold; margin: 1rem 0; }

@keyframes l4 {to{transform: rotate(1turn)}}

@media (min-width: 2160px) {
  :root {
    --svg-size: 150px;
  }
}

@media (max-width: 1679px) {
  .container { max-width: none; }
}

@media (max-width: 1199px) {
  :root {
    --font-size-title: 20px;
  }
  .nav-container:has(> .menu.active) { z-index: 130; }
  .nav-container .menu {
    position: absolute;
    transform: scaleY(0);
    background: radial-gradient(circle, var(--color-in) 0%, var(--color-out) 100%);
    flex-direction: column;
    width: 100%;
    top: var(--nav-container-height);
    left: 0;
    padding-bottom: 1rem;
  }
  .nav-container .menu li { padding: 0.5rem; }
  .nav-container .menu li:hover a { color: white; }
  .nav-container .menu li:last-child {
    border: var(--border-white);
    margin-top: .5rem;
    margin-bottom: 1rem;
  }
  .menu-button { display: initial; }
  .page-content-default .page-content-inner { width: 80%; }
  .cloudy-header .background-image img { width: auto; height: auto; margin-top: 0; }
}

@media (max-width: 991px) {
  :root {
    --svg-size: 75px;
    --carousel-height: 250px;
    --font-size-menu: 20px;
    --border-white: 4px solid white;
  }
  .nav-container { padding: 1rem; }
  .nav-container .logo svg { max-width: none; }
  .divider { width: 100%; }
  .page-content-default .title { font-size: 2rem; }
  
  .title.title-svg svg {
    height: 40px;
  }
  
  .page-content-default .page-content-inner { width: 90%; }
  .page-content-carousel-container .logo-container svg { width: var(--svg-size); }
  .page-content-carousel-container .logo-container img { width: var(--svg-size-mixed); margin: auto; }
  .footer-icon-container .logo-container { margin: initial; }
  .footer-icon-container .logo-container svg { width: initial; height: initial; }
}

@media (max-width: 575px) {
  :root {
    --nav-container-height: 70px;
    --svg-size: 60px;
    --svg-size-mixed: 100px;
    --move-diagonal-pos-0: 0 0, 13% 13%;
    --move-diagonal-pos-100: -50% 50%, -37% 63%;
  }
  h3 { font-size: 1rem; line-height: 1.5; }
  .button-primary { padding: 0.25rem 1.25rem; }
  .button-primary a { font-size: 1.3rem; }
  .page-content-inner .content * { font-size: 1rem; }
  .page-content-default .divider { margin: auto; }
  .page-content-default .page-content-inner { margin: 0 3em; width: initial; }
  .page-content-default .page-content-inner .title { width: 70%; }
  .title.title-svg svg { height: 20px; }
  .page-title { height: 200px; }
  .page-title .page-title-background { width: initial; }
  .footer .footer-logo { flex-direction: column; width: 100%; }
  .footer .footer-logo > * { width: 100%; margin: auto; }
  .footer-container { padding: unset; margin-top: 2em; }
  .footer-container * { font-size: 1rem; }
  .footer-container .seiken-logo svg { width: 25%; height: unset; margin: auto; }
  .footer-container .tc-pp { flex-direction: column; margin: 1em auto; gap: 1em; }
  .footer-container .tc-pp > * { width: unset; }
  .footer-container .footer-text { margin: 1em; }
  .footer-icon-container { width: initial; }
  .footer-icon-container a { width: initial; margin: 5px; }
  .footer-container .icon-container svg {
    width: 35px;
  }
}