/* クリティカルCSS - FOUC防止 */
:root {
  --c-black: #222;
  --c-white: #FFF;
  --c-gray-100: #F9F9F9;
  --c-gray-200: #efefef;
  --c-gray-300: #D8D8DB;
  --c-gray-400: #949497;
  --c-gray-500: #626264;
  --c-cyan-100: #C5F5F5;
  --c-cyan-200: #5DD5D5;
  --c-cyan-300: #3AAFAF;
  --c-magenta-100: #F5C5F5;
  --c-magenta-200: #D555D5;
  --c-magenta-300: #AF3AAF;
  --c-gold: #F5A623;
  --c-neon-blue: #00D9FF;
  --c-pink: #FF6B9D;
  --c-green-100: var(--c-cyan-100);
  --c-green-200: var(--c-cyan-200);
  --c-green-300: var(--c-cyan-300);
  --c-yellow: var(--c-gold);
  --c-red: #EC0000;
  --c-text: var(--c-black);
  --c-link: var(--c-cyan-200);
  --c-link-hover: var(--c-cyan-300);
  --c-link-current: var(--c-gray-500);
  --c-focus: var(--c-magenta-200);
  --c-hairline: var(--c-gray-300);
  --z-fixed: 1030;
  --z-modal: 1050;
  --f-default: YakuHanJPs_Noto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-family: var(--f-default);
  color: var(--c-text);
}

.page-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--c-white);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.page-loader.loaded {
  opacity: 0;
  visibility: hidden;
}

.loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.loader-spinner {
  width: 50px;
  height: 50px;
  border: 4px solid var(--c-gray-200);
  border-top: 4px solid var(--c-green-200);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.loader-text {
  font-size: 16px;
  font-weight: 500;
  color: var(--c-gray-500);
  margin: 0;
  letter-spacing: 0.5px;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#root {
  position: relative;
  width: 100%;
  height: 100%;
}

#map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 601px) {
  #map {
    height: calc(100% - 180px);
  }
}

@media (max-width: 600px) {
  #map {
    height: calc(100% - 60px);
  }
}