/* sculptured landing page styles (white/black base) */
body {
  display: flex !important;
  flex-direction: column;
  min-height: 100vh;
}
.content-center,
.main-content {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.landing-hero {
  max-width: 700px;
  padding: 48px 28px 36px 28px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
  text-align: center;
  border: 1px solid #e0e0e0;
}
.landing-title {
  font-size: 2.8rem;
  font-weight: 500;
  color: #111;
  letter-spacing: 0.04em;
  margin-bottom: 36px;
}

.landing-logo {
  width: 320px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* 左右マージンがなくなる場合のみロゴを縮小 */
@media (max-width: 499px) {
  .landing-logo {
    width: calc(100vw - 179px); /* 499px時に320pxになるよう調整 (499 - 179 = 320) */
    max-width: calc(100vw - 179px);
  }
}

@media (max-width: 450px) {
  .landing-logo {
    width: calc(100vw - 130px); /* 450px時に320pxになるよう調整 (450 - 130 = 320) */
    max-width: calc(100vw - 130px);
  }
  
  .landing-hero {
    padding: 48px 16px 28px 16px; /* 上側はpadding-topを固定値(48px)に保持 */
  }
  
  .landing-title {
    font-size: 2rem;
  }
  
  .landing-desc {
    font-size: 0.98rem;
  }
  
  .landing-tag {
    font-size: 0.92rem;
  }
}

@media (max-width: 360px) {
  .landing-logo {
    width: calc(100vw - 128px); /* 360px時に232px、359px時に231pxでシームレス */
    max-width: calc(100vw - 128px);
  }
  
  .landing-hero {
    padding: 48px 12px 24px 12px; /* 上側はpadding-topを固定値(48px)に保持 */
  }
}

@media (max-width: 320px) {
  .landing-logo {
    width: calc(100vw - 40px); /* 極小画面ではマージンを優先して表示性を保持 */
    max-width: calc(100vw - 40px);
  }
}
.landing-desc {
  font-size: 1.08rem;
  color: #333;
  line-height: 1.7;
  margin-bottom: 10px;
}
.landing-tag {
  /* 空のスタイル - 600px境界を削除 */
}

body .main-header {
  background: rgba(255, 255, 255, 0.1) !important;
}

.login-button {
  background: rgba(255, 255, 255, 0.4) !important;
  color: #000 !important;
  border: 1px solid #000 !important;
}
.login-button:hover {
  background: rgba(128, 128, 128, 0.8) !important;
  color: #000 !important;
}

.register-button {
  background: rgba(0, 0, 0, 0.4) !important;
  color: #fff !important;
  border: 1px solid #000 !important;
}
.register-button:hover {
  background: rgba(128, 128, 128, 0.8) !important;
  color: #000 !important;
}

.hamburger-menu-wrapper:hover {
  background: rgba(0, 0, 0, 0.15) !important;
}
.hamburger-dropdown-menu a:hover {
  background: rgba(0, 0, 0, 0.15) !important;
}

body {
  display: flex !important;
  flex-direction: column;
  min-height: 100vh;
}
.content-center,
.main-content {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.landing-hero {
  margin: 0 auto !important;
}

.user-icon {
  background: rgba(255, 255, 255, 0.4) !important;
}

.flash-message {
  background: #f8f9fa !important;
  color: #212529 !important;
  border: 1px solid #e0e0e0 !important;
}