@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP:wght@300;400;500;600;700&display=swap");

:root {
  --koe-rmd-font: "IBM Plex Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

body {
  font-family: var(--koe-rmd-font);
}

body :where(
  p,
  a,
  span,
  li,
  button,
  input,
  textarea,
  select,
  label,
  figcaption,
  blockquote,
  .elementor-heading-title,
  .elementor-button,
  .elementor-item
):not(.koe-layered-hero-text):not(.koe-layered-hero-text *):not(.koe-layered-jp):not(.koe-layered-jp *):not(.koe-work-overlay):not(.koe-work-overlay *) {
  font-family: var(--koe-rmd-font) !important;
}

h1:not(.koe-layered-hero-text *),
h2:not(.koe-layered-hero-text *),
h3:not(.koe-layered-hero-text *),
h4:not(.koe-layered-hero-text *),
h5:not(.koe-layered-hero-text *),
h6:not(.koe-layered-hero-text *) {
  font-family: var(--koe-rmd-font) !important;
}

.elementor-widget-text-editor,
.elementor-widget-heading,
.elementor-widget-button,
.elementor-widget-nav-menu {
  font-family: var(--koe-rmd-font) !important;
}

.koe-sukima-menu {
  position: fixed;
  top: clamp(40px, 3.1vw, 58px);
  right: clamp(36px, 3.65vw, 70px);
  z-index: 1002;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  font-family: var(--koe-rmd-font);
  font-size: clamp(11px, 0.8vw, 14px);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.1em;
  text-align: right;
  pointer-events: auto;
  transition: top 220ms ease, gap 220ms ease, opacity 220ms ease, transform 220ms ease;
}

.koe-sukima-menu a {
  color: #1c1c1c;
  text-decoration: none;
  transition: opacity 180ms ease, transform 180ms ease;
}

.koe-sukima-menu.is-on-dark a {
  color: #f7f7f7;
}

.koe-sukima-menu a:hover,
.koe-sukima-menu a:focus-visible {
  opacity: 0.5;
  transform: translateX(-3px);
}

.koe-sukima-menu a:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

.koe-menu-lines {
  display: none;
  position: relative;
  width: 42px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #1c1c1c;
  cursor: pointer;
  appearance: none;
  transition: opacity 180ms ease;
}

.koe-menu-lines span {
  position: absolute;
  left: 8px;
  right: 8px;
  height: 1px;
  background: currentColor;
  transition: transform 180ms ease, top 180ms ease;
}

.koe-menu-lines span:first-child {
  top: 10px;
}

.koe-menu-lines span:last-child {
  top: 17px;
}

.koe-menu-lines:hover,
.koe-menu-lines:focus-visible {
  opacity: 0.48;
}

.koe-menu-lines:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 4px;
}

.koe-sukima-menu.is-open .koe-menu-lines span:first-child {
  top: 14px;
  transform: rotate(28deg);
}

.koe-sukima-menu.is-open .koe-menu-lines span:last-child {
  top: 14px;
  transform: rotate(-28deg);
}

.koe-sukima-menu.is-scrolled {
  top: clamp(24px, 2vw, 38px);
  gap: 0;
  opacity: 1;
}

.koe-sukima-menu.is-scrolled .koe-menu-lines {
  display: block;
}

.koe-sukima-menu.is-scrolled a {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 134px;
  padding: 8px 0;
  background: rgb(255 255 255 / 0.88);
  color: #1c1c1c;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  backdrop-filter: blur(10px);
}

.koe-sukima-menu.is-scrolled a:nth-of-type(2) {
  top: calc(100% + 42px);
}

.koe-sukima-menu.is-scrolled a:nth-of-type(3) {
  top: calc(100% + 72px);
}

.koe-sukima-menu.is-scrolled a:nth-of-type(4) {
  top: calc(100% + 102px);
}

.koe-sukima-menu.is-scrolled.is-open a {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

@media (max-width: 767px) {
  .koe-sukima-menu,
  .koe-sukima-menu.is-scrolled,
  .koe-sukima-menu.is-open {
    display: none !important;
  }
}

@media (min-width: 768px) {
  .elementor-location-header .elementor-widget-nav-menu,
  .elementor-location-header .elementor-widget-button,
  .elementor-widget-nav-menu.header-menu-link,
  .elementor-widget-button.elementor-mobile-align-right,
  .elementor-element-16b7285.elementor-widget-social-icons {
    display: none !important;
  }
}
