/* 水色基調の「水上バイク」風デザイン */
:root{
  --bg:#00bfff; /* miyako blue */
  --panel:#005f99; /* darker miyako blue */
  --muted:#d0d8e8;
  --text:#ffffff;
  --primary:#3ec7ff; /* aqua */
  --accent:#7cf5c6; /* mint */
  --warning:#ffd166; /* amber */
  --danger:#ff6b6b;
  --shadow:0 10px 30px rgba(0,0,0,.25);
  --radius:18px;
}
 
body {
  font-family:"Noto Sans JP","Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg) !important;
  background-image: url('../images/miyako-parallax.jpg');
  background-repeat: no-repeat;
/* 本文の可読性向上：pタグと.mutedの文字色を白で強制 */
p, .muted {
  color: #ffffff !important;
  opacity: 1 !important;
}
  background-position: center center;
  background-attachment: fixed;
  background-size: cover;
  color: #ffffff !important;
  margin: 0;
  padding: 0;
  padding-bottom: 6rem;
}

header {
  position:sticky;
  top:0;
  z-index:50;
  background: var(--panel) !important;
  backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
  color:var(--text);
/* ハンバーガーメニューボタンの背景とコントラスト強化 */
header .menu-toggle {
  background: rgba(255,255,255,0.9);
  color: var(--accent);
/* メニューを下に開く（全画面） */
header .header-links {
  position: absolute;
  top: 100%;
  right: 20px;
  background: rgba(255,255,255,0.9);
  padding: 8px 12px;
  border-radius: var(--radius);
  flex-direction: column;
  display: none;
  z-index: 100;
}
header.open .header-links {
  display: flex;
  flex-direction: column;
}
  padding: 8px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  z-index: 101;
}
header .menu-toggle:hover {
  filter: brightness(1.2);
}
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:1rem;
}
header {
  position: sticky;
  top: 0;
  z-index: 50;
}
header .menu-toggle {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}
/* Ensure hamburger menu stays rightmost */
header .menu-toggle {
  margin-left: auto;
}
/* ロゴサイズとメニューフォント調整（全ページ） */
header .brand svg {
  width: 48px;
  height: 48px;
}
header .brand span {
  font-size: 2rem;
}
header .header-links {
  position: absolute;
  top: 64px;
  right: 20px;
  background: var(--panel);
  padding: 8px 12px;
  border-radius: var(--radius);
  flex-direction: column;
  display: none;
}
header .header-links a {
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
}
header .header-links {
  display: none;
}
header.open .header-links {
  display: flex;
  flex-direction: column;
}

nav a {
  color: var(--text);
  margin-left: 1rem;
  text-decoration: none;
}

main {
  padding: 2rem;
}

.landing {
  text-align: center;
  padding: 3rem 1rem;
}

.landing h2 {
  font-size: 2rem;
  color: var(--text);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 1rem;
  padding: 14px 20px;
  background: linear-gradient(135deg,var(--primary),#6be3ff);
  color: #e3e7eb;
  font-weight:700;
  text-decoration:none;
  border-radius:12px;
  box-shadow:var(--shadow);
  transition:transform .2s ease,filter .2s ease;
}

.btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

h2 {
  color: var(--text);
}

label {
  font-weight: bold;
}

select, button {
  margin: 0.5rem 0;
  padding: 0.5rem;
  border: 1px solid var(--primary);
  border-radius: 4px;
}

button {
  background: linear-gradient(135deg,var(--primary),#6be3ff);
  color: #00152b;
  font-weight:700;
  text-decoration:none;
  padding:14px 20px;
  border:none;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  cursor:pointer;
  transition:transform .2s ease,filter .2s ease;
}

button:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}
/* エラーメッセージを赤文字に */
.text-danger,
.alert-danger,
.errorlist,
.errorlist li {
  color: var(--danger);
}

/* allauth の non_field_errors 用 */
ul.errorlist {
  list-style: none;
  padding: 0;
  margin: 0 0 1em 0;
}
/* frontend/static/frontend/css/style.css */
.auth-form {
  max-width: 400px;
  margin: 2rem auto;
  padding: 1.5rem;
  background: rgba(0,95,153,0.6) !important; /* var(--panel) with more transparency */
  border-radius: 4px;
}
.auth-form h2 {
  margin-bottom: 1rem;
}
.auth-form p a {
  color: var(--primary);
}
/* Responsive mobile styles */
@media (max-width: 600px) {
  /* Center landing-hero content on mobile (360px–600px) */
  .landing-hero .inner,
  .landing-hero .inner > *,
  .hero-landing-brand,
  .landing-hero h1,
  .landing-hero p,
  .landing-hero .cta,
  .landing-hero .cta .btn,
  .landing-hero .cta-band,
  .landing-hero .cta-band > div,
  .landing-hero .cta-band a,
  .landing-hero .cta-band a.period-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
  /* Center landing-hero content on mobile (360px–600px) */
  .landing-hero .inner,
  .landing-hero .inner > *,
  .hero-landing-brand,
  .landing-hero h1,
  .landing-hero p,
  .landing-hero .cta,
  .landing-hero .cta .btn,
  .landing-hero .cta-band,
  .landing-hero .cta-band > div,
  .landing-hero .cta-band a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
  /* Center landing-hero elements on mobile (360px–600px) */
  .landing-hero .inner,
  .landing-hero .inner > *,
  .hero-landing-brand,
  .landing-hero h1,
  .landing-hero p,
  .landing-hero .cta,
  .landing-hero .cta .btn,
  .landing-hero .cta-band,
  .landing-hero .cta-band > div,
  .landing-hero .cta-band a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
  /* Center landing-hero elements on mobile (360px–600px) */
  .landing-hero .inner,
  .landing-hero .inner > *,
  .hero-landing-brand,
  .landing-hero h1,
  .landing-hero p,
  .landing-hero .cta,
  .landing-hero .cta .btn,
  .landing-hero .cta-band,
  .landing-hero .cta-band > div,
  .landing-hero .cta-band a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
  header .header-actions {
    display: flex !important;
    align-items: center !important;
    margin-left: auto !important;
  }
  header {
  /* Center landing-hero elements on mobile (≤600px) */
  .landing-hero .inner,
  .landing-hero .inner > *,
  .hero-landing-brand,
  .landing-hero .cta,
  .landing-hero .cta .btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
  /* Center landing-hero on narrower mobile screens (360–600px) */
  .landing-hero .inner,
  .landing-hero .inner > *,
  .hero-landing-brand,
  .landing-hero h1,
  .landing-hero p,
  .landing-hero .cta,
  .landing-hero .cta .btn,
  .landing-hero .cta-band,
  .landing-hero .cta-band > div,
  .landing-hero .cta-band a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
  }
    margin: 0 auto !important;
    text-align: center !important;
  }
    flex-direction: column;
    align-items: flex-start;
    padding: 0.75rem;
  }
  header h1 a {
    font-size: 1.25rem;
    display: block;
    margin-bottom: 0.5rem;
  }
  nav a {
    margin-left: 0;
    margin-right: 0.5rem;
    font-size: 0.9rem;
  }
  main {
    padding: 1rem;
  }
  select, button {
    width: 100%;
    padding: 0.75rem;
    font-size: 1rem;
  }
  header .menu-toggle {
    width: auto !important;
    max-width: 3rem !important;
    margin: 0 !important;
  }
  .auth-form, .landing, .confirm-list, dl, .btn, .mypage img {
    width: 100%;
    box-sizing: border-box;
    padding: 0;
  }
  /* Make images on Myページ responsive */
  .mypage img {
    display: block;
    margin: 0 auto;
    height: 400px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: center;
  }
  /* Override subscription tile images on mobile: shrink to container width */
  .subscription-grid .subscription-tile img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }
  /* Center CTA band on mobile (≤600px) */
  /* Ensure CTA band centering on mobile (≤600px) */
  .landing-hero .cta-band,
  .landing-hero .cta-band > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .landing-hero .cta-band a.period-btn,
  .landing-hero .cta-band a.btn {
    display: block !important;
    margin: 0.5rem auto !important;
    width: auto !important;
  }
  .landing-hero .cta-band,
  .landing-hero .cta-band > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .landing-hero .cta-band a.period-btn,
  .landing-hero .cta-band a.btn {
    display: block !important;
    margin: 0.5rem auto !important;
    width: auto !important;
  }
}
/* Enhanced button and menu styles */
button, .btn {
  border: none;
  background: linear-gradient(135deg,var(--primary),#6be3ff);
  color: #00152b;
  box-shadow: var(--shadow);
  transition: transform .2s ease,filter .2s ease;
}

button:hover, .btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}

#subscribe-btn {
  padding: 0.75rem 1.5rem;
  font-weight: bold;
  width: auto;
}

nav a {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.5rem 1rem;
  background: transparent;
  color: var(--text);
  text-decoration: none;
  transition: transform .2s ease,filter .2s ease;
}

nav a:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}
/* Mobile bottom navigation styles */
.mobile-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
  background: var(--panel);
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 0.5rem 0;
  box-shadow: 0 -1px 4px rgba(0, 0, 0, 0.1);
}
.mobile-nav a {
  flex: 1;
  text-align: center;
  color: var(--text);
  text-decoration: none;
  font-size: 0.85rem;
}
.mobile-nav a i {
  display: block;
  font-size: 1.25rem;
  margin-bottom: 0.25rem;
}
.mobile-nav a:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}
/* Tile grid and tile styles */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.5rem;
  margin: 1rem 0;
}
.tile {
    background: rgba(0,95,153,0.6) !important;
    padding: 1rem;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    text-align: center;
    cursor: pointer;
    transition: transform 0.1s ease,box-shadow 0.2s ease;
}
.tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.subscription-tile img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto 1rem;
}

.tile img {
    width: 100%;
    height: auto;
    max-height: 300px;
    object-fit: cover;
    display: block;
    margin-bottom: 1rem;
}
/* Override after generic .tile img to ensure subscription tiles shrink */
.tile.subscription-tile img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
}

/* Override for subscription tiles: shrink image to tile width */
.tile.subscription-tile img {
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto 1rem !important;
}
.hidden {
    display: none;
}
.tile-grid.subscription-grid {
    grid-template-columns: 1fr !important;
}

#slider-tabs {
     list-style: none;
     display: flex;
     border-bottom: 1px solid rgba(255,255,255,.06);
     padding: 0;
     margin: 0 0 1rem 0;
     flex-wrap: wrap;
}
#slider-tabs li {
     flex: 1 1 auto;
     text-align: center;
     font-size: 0.9rem;
     padding: 0.5rem 0.25rem;
}
#slider-tabs li {
    margin-right: 1rem;
    padding: 0.5rem;
    cursor: pointer;
    color: #006064;
}
#slider-tabs li.active {
    border-bottom: 2px solid var(--primary);
}
/* Final override: ensure subscription-tile images shrink to tile width */
.subscription-grid .subscription-tile img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
}
#slider-content {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
}
.slider-item {
    flex: 0 0 100%;
    scroll-snap-align: start;
    padding: 1rem;
    box-sizing: border-box;
}
.slider-item img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto 1rem;
}
/* Override subscription-tile image cropping */
.tile.subscription-tile img {
  max-height: none !important;
  object-fit: contain !important;
  width: auto !important;
  height: auto !important;
}
/* Tile container height adjusts to image plus text */
.tile.subscription-tile img {
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
/* Ensure subscription grid rows size to content */
.tile-grid.subscription-grid {
  grid-auto-rows: min-content;
}

/* Final override: subscription-tile images shrink to tile width */
.tile-grid.subscription-grid .subscription-tile img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
}
}
/* Override generic .tile img for subscription tiles */
.tile.subscription-tile img {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
}
/* Ensure subscription images always shrink to tile width */
.subscription-tile img {
  width: 100% !important;
  height: auto !important;
}
/* subscription-grid タイル内の画像を幅に合わせて縮小 */
.tile-grid.subscription-grid .tile img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}
/* Ensure subscription-tile images shrink to container width (last override) */
.tile.subscription-tile img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  object-fit: contain !important;
/* Avatar styles */
.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin-bottom: 1rem;
}

.avatar-nav {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 0.5rem;
}

/* プロフィール情報の水平線セパレーター */
.profile-info hr {
  border: none;
  border-top: 1px solid var(--muted);
  margin: 0.5rem 0;
}
/* Profile page styling */
.profile-page {
    max-width: 800px;
    margin: 2rem auto;
    background: rgba(0,95,153,0.6) !important;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.profile-header {
  display: flex;
  align-items: center;
  margin-bottom: 1.5rem;
}

.profile-header .avatar {
  width: 48px !important;
  height: 48px !important;
  margin-right: 0.5rem;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.profile-info dt {
  font-weight: bold;
  margin-top: 1rem;
}

.profile-info dd {
  margin-left: 0;
  margin-bottom: 0.5rem;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: linear-gradient(135deg,var(--primary),#6be3ff);
  color: #00152b;
  font-weight:700;
  text-decoration:none;
  border-radius:12px;
  box-shadow:var(--shadow);
  transition:transform .2s ease,filter .2s ease;
}

.button:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}
}
/* Override avatar-nav size (small circular icon) */
.avatar-nav {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
}
/* Mobile header hamburger menu and avatar */
@media (max-width: 600px) {
  header {
    position: relative;
  }
  header .menu-toggle {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: white;
    cursor: pointer;
    margin-left: auto;
  }
  header .header-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    right: 0;
    background: #00bcd4;
    min-width: 150px;
    z-index: 1000;
  }
  header.open .header-links {
    display: flex;
  }
  header .header-links a,
  header.open .header-links .avatar-nav {
    display: block;
    padding: 0.5rem 1rem;
    color: white;
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.2);
  }
/* Mobile header layout override: keep avatar and menu on right */
@media (max-width: 600px) {
  header {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
  }
  .header-right {
    display: flex !important;
    align-items: center !important;
    margin-left: auto !important;
  }
}
}
/* Profile license preview styling */
.license-preview {
  display: block;
  width: 33%;
  max-width: none;
  height: auto;
  margin: 0.5rem 0;
}
/* Subscription page: display equipment tiles vertically */
#equipment-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
}
/* Subscription page: fix equipment image height like MyPage */
#equipment-grid .tile {
  overflow: hidden !important;
}
#equipment-grid .tile img {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  display: block !important;
  margin: 0 auto !important;
}
  
/* Main equipment image on detail page */
.equipment-main-image {
   display: block;
   width: 100% !important;
   height: auto !important;
   max-width: 100%;
   margin: 1rem auto;
   object-fit: contain !important;
}
/* MyPage subscription and equipment images fixed height like subscription page */
.tile-grid.subscription-grid .tile img {
    height: 400px !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto 1rem !important;
}
/* Floating select button */
#select-equipment-btn {
  display: block;
  margin: 2rem auto;
  background-color: var(--danger);
  padding: 1.5rem 2rem;
  font-size: 1.25rem;
  border-radius: 4px;
}
/* Equipment detail: make main and slider images responsive */
.equipment-main-image {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    display: block !important;
    margin: 1rem auto !important;
    object-fit: contain !important;
}
.slider-item img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto 1rem !important;
}
/* Equipment detail responsive images */
.equipment-main-image, .slider-item img {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}
/* メニューを下に開く（全画面） */
header {
  position: sticky;
}
header .header-links {
  position: absolute;
  top: 100%;
  right: 20px;
  background: var(--panel);
  padding: 8px 12px;
  border-radius: var(--radius);
  display: none;
  flex-direction: column;
  z-index: 100;
}
header.open .header-links {
  display: flex;
}:root{
  --bg:#00bfff; /* miyako blue */
  --panel:#005f99; /* darker miyako blue */
  --muted:#8ea0c2;
  --text:#ffffff;
  --primary:#3ec7ff; /* aqua */
  --accent:#7cf5c6; /* mint */
  --warning:#ffd166; /* amber */
  --danger:#ff6b6b;
  --shadow:0 10px 30px rgba(0,0,0,.25);
  --radius:18px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{
  margin: 0;
  padding: 0;
  background: var(--bg) !important;
  color: var(--text);
  font-family: "Noto Sans JP","Inter",system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
}
a{color:inherit}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,var(--primary),#6be3ff);
  color:#00152b;font-weight:700;text-decoration:none;padding:14px 20px;border-radius:12px;box-shadow:var(--shadow);
  transition:transform .2s ease,filter .2s ease;
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn-outline{background:transparent;color:var(--text);border:1px solid rgba(255,255,255,.18);}

/* Header */
header{position:sticky;top:0;z-index:50;position:relative;background:rgba(7,16,33,.6);backdrop-filter:blur(8px);border-bottom:1px solid rgba(255,255,255,.06)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:64px;}
header .menu-toggle{position:static; margin-left:auto; transform:none;}
header .menu-toggle {
/* ランディングページ専用: ヘッダー内のメニューを右端に配置 */
header .header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
}
  background: var(--panel);
  color: var(--accent);
  padding: 8px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  z-index: 101;
}
header .menu-toggle:hover {
  filter: brightness(1.2);
}
header .menu-toggle {
  background: rgba(255,255,255,0.1);
  color: var(--accent);
  padding: 8px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  z-index: 101;
}
header .menu-toggle:hover {
  filter: brightness(1.2);
}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px}

/* ロゴサイズとメニューフォント調整（全ページ） */
header .brand svg {
  width: 48px;
  height: 48px;
}
header .brand span {
  font-size: 2rem;
}
/* ロゴとメニューフォントをトップに合わせる */
header .brand svg {
  width: 48px;
  height: 48px;
}
header .brand span {
  font-size: 2rem;
}
/* メニュー背景と文字色を強化 */
header .header-links {
  position: absolute;
  top: 100%;
  right: 20px;
  background: var(--panel);
  padding: 8px 12px;
  border-radius: var(--radius);
  flex-direction: column;
  display: none;
}
header.open .header-links {
  display: flex;
  flex-direction: column;
}
header .header-links a {
  color: var(--text);
}
.badge-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-size:12px;background:rgba(0,0,0,0.5)!important;color:var(--accent);border:1px solid rgba(255,255,255,0.8)!important;}

/* Hero */
.hero{position:relative;overflow:hidden}
@media(max-width:600px){
  .hero{overflow:visible!important;}
}
.hero .inner{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;padding:64px 0 32px}
.landing-hero .inner{grid-template-columns:1fr !important;align-items:start;}
.landing-hero .inner {
  grid-template-columns: 1fr !important;
}
.hero h1{font-size:clamp(28px,5vw,48px);line-height:1.1;margin:.2em 0 .3em}
.hero p{color:var(--muted);font-size:18px}
.landing-hero p{
  font-size: clamp(0.5rem, 4vw, 1rem)!important;
  line-height: 1.4!important;
}
.hero .cta{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}

/* Decorative wave */
.wave{position:absolute;inset:auto 0 -1px 0;height:140px;background:radial-gradient(100% 180% at 50% 0%,rgba(62,199,255,.4),rgba(62,199,255,0) 60%),radial-gradient(100% 180% at 30% 20%,rgba(124,245,198,.25),rgba(124,245,198,0) 65%);filter:blur(24px);opacity:.6}

/* Sections */
section{padding:56px 0}
.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}
.section-title h2{font-size:28px;margin:0}
.muted{color:var(--muted)}

/* Cards */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:linear-gradient(180deg,rgba(0,0,0,0.15),rgba(0,0,0,0.10))!important;border:1px solid rgba(255,255,255,0.5)!important;border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;position:relative;overflow:hidden}
.card h3{margin:0 0 8px;font-size:20px}
.chip{display:inline-flex;gap:6px;align-items:center;background:rgba(0,0,0,0.2)!important;border:1px solid rgba(255,255,255,0.5)!important;padding:6px 10px;border-radius:999px;font-size:12px;color:var(--muted)!important}
.price-rows{margin:16px 0 12px;border-top:1px dashed rgba(255,255,255,.12);padding-top:12px}
.price-rows .row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px dashed rgba(255,255,255,.06)}
.price-rows .row:last-child{border-bottom:none}
.yen{font-weight:800;font-size:20px}
.note{font-size:12px;color:var(--muted)}
.coming{position:absolute;inset:0;background:rgba(7,16,33,.6);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;text-align:center}
.coming .tag{background:rgba(255,209,102,.15);color:var(--warning);border:1px solid rgba(255,209,102,.45);padding:10px 14px;border-radius:999px;font-weight:700}

/* Feature list */
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.feature{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:16px;display:flex;gap:12px;align-items:flex-start}
.feature svg{flex:0 0 22px}

/* CTA band */
.cta-band{background:linear-gradient(90deg,rgba(62,199,255,0.60),rgba(124,245,198,0.60));border:1px solid rgba(255,255,255,0.30);border-radius:16px;padding:18px;display:flex;align-items:center;justify-content:space-between;gap:14px}

  /* メニューを下に開く */
    header .header-links {
      position: absolute;
      top: 100%;
      right: 20px;
      background: rgba(255,255,255,0.9);
    padding: 8px 12px;
    border-radius: var(--radius);
    flex-direction: column;
    display: none;
  }
  header.open .header-links {
    display: flex;
    flex-direction: column;
  }
/* FAQ */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:14px}
details{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:12px}
details summary{cursor:pointer;font-weight:700}
details[open]{background:rgba(255,255,255,.06)}

/* Footer */
footer{padding:40px 0;color:var(--muted);font-size:14px;border-top:1px solid rgba(255,255,255,.06)}

/* Responsive */
@media(max-width:980px){.hero .inner{grid-template-columns:1fr}.grid{grid-template-columns:1fr 1fr}.features{grid-template-columns:1fr 1fr}.faq{grid-template-columns:1fr}}
@media(max-width:640px){.grid{grid-template-columns:1fr}.cta{flex-direction:column}.cta .btn{width:100%;justify-content:center}.cta-band{flex-direction:column;align-items:flex-start}}
@media(max-width:600px){
  header .header-links {
    background: var(--panel)!important;
  }
  header .header-links a {
    color: var(--text)!important;
  }
}
/* Avatar と ハンバーガーメニューをヘッダー右端に配置 */
/* Final override at end: floating hamburger menu always visible and auto-sized */
header .menu-toggle {
  position: fixed !important;
  top: 1rem !important;
  right: 1rem !important;
  width: auto !important;
  max-width: none !important;
  z-index: 9999 !important;
}

/* Mobile override to prevent full-width on smallest screens */
@media (max-width: 600px) {
  header .menu-toggle {
    width: auto !important;
    max-width: none !important;
  }
}
header .header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
}
/* Final override: ensure floating hamburger menu stays visible and auto-sized */
header .menu-toggle {
  position: fixed !important;
  top: 1rem !important;
  right: 1rem !important;
  width: auto !important;
  height: auto !important;
  padding: 0.5rem !important;
  z-index: 1001 !important;
}
/* Floating hamburger menu */
header .menu-toggle {
  position: fixed !important;
  top: 1rem;
  right: 1rem;
  z-index: 1001 !important;
}
/* Override: Fixed floating hamburger menu stays visible and auto-sized */
header .menu-toggle {
  position: fixed !important;
  top: 1rem !important;
  right: 1rem !important;
  width: auto !important;
  height: auto !important;
  padding: 0.5rem !important;
  z-index: 1001 !important;
}
@media (max-width: 600px) {
  /* Floating hamburger menu override on mobile: prevent full-width expansion */
  header .menu-toggle {
    width: auto !important;
    display: inline-block !important;
    position: fixed !important;
    top: 1rem !important;
    right: 1rem !important;
    padding: 0.5rem !important;
    z-index: 1001 !important;
  }
}
/* Final override: force fixed floating hamburger menu */
header .menu-toggle {
  position: fixed !important;
  top: 1rem !important;
  right: 1rem !important;
  width: auto !important;
  height: auto !important;
  padding: 0.5rem !important;
  z-index: 1001 !important;
}
/* Ultimate override: floating hamburger menu always fixed and correctly sized */
header .menu-toggle {
  position: fixed !important;
  top: 1rem !important;
  right: 1rem !important;
  width: auto !important;
  height: auto !important;
  padding: 0.5rem !important;
  z-index: 9999 !important;
}
/* Ensure floating menu fixed relative to viewport and auto-sized */
header .menu-toggle {
  position: fixed !important;
  top: 1rem !important;
  right: 1rem !important;
  width: auto !important;
  max-width: 3rem !important;
  z-index: 9999 !important;
}

/* Override mobile select, button width affecting menu-toggle */
@media (max-width: 600px) {
  header .menu-toggle {
    width: auto !important;
    max-width: 3rem !important;
  }
}
/* Landingページ専用: ヒーローロゴを大きく表示 */
.hero-landing-brand {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2rem;
}
.hero-landing-brand svg {
  width: 240px;
  height: 240px;
}
.hero-landing-brand span {
  font-size: 10rem;
  color: var(--text);
}
/* Landingページ専用: ロゴを約5倍表示 */
.hero-landing-brand svg {
  width: clamp(100px, 50vw, 180px) !important;
  max-width: 100% !important;
  height: auto !important;
}

/* Tagline below logo: match ShimaRIDE text width */
.hero-landing-brand {
  display: inline-grid !important;
  grid-template-columns: max-content;
  grid-template-rows: auto auto auto;
  justify-items: center !important;
}
.hero-landing-brand .hero-tagline {
  display: block !important;
  width: 100% !important;
  margin-top: 0.5rem !important;
}
.hero-landing-brand span {
  font-size: clamp(2rem, 10vw, 7.5rem) !important;
}
/* Header: wrap items on narrow screens */
@media (max-width: 600px) {
  header .wrap {
    flex-wrap: wrap;
  }
  header .wrap .badge-pill,
  header .wrap .header-right {
    margin-top: 0.5rem;
  }
}
/* Landingページ: Heroセクションのモバイルレイアウト */
@media (max-width: 600px) {
  .hero .inner {
    grid-template-columns: 1fr !important;
    row-gap: 1rem !important;
  }
  .hero .inner > * {
    width: 100% !important;
  }
  .hero .inner .cta {
    justify-content: center !important;
  }
  .hero .cta .btn {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
}
/* Mobile: Hero CTAボタン全幅表示 */
@media (max-width: 600px) {
  .hero .cta .btn {
    width: 100% !important;
    margin: 0.5rem 0 !important;
    box-sizing: border-box !important;
  }
}
/* Mobile: Prevent cut-off on narrow screens */
@media (max-width: 600px) {
  header .wrap {
    flex-wrap: wrap !important;
  }
  header .wrap .badge-pill,
  header .wrap .header-right {
    margin-top: 0.5rem !important;
  }
  .hero {
    overflow: visible !important;
  }
  .hero .inner {
    grid-template-columns: 1fr !important;
    row-gap: 1rem !important;
  }
  .hero .inner > * {
    width: 100% !important;
  }
  .hero .cta {
    justify-content: center !important;
  }
  .hero .cta .btn {
    width: 100% !important;
    margin: 0.5rem 0 !important;
    box-sizing: border-box !important;
  }
}
/* Landingページ: プラン一覧を二段表示 */
.landing .section-title {
  flex-direction: column !important;
  align-items: flex-start !important;
}
/* 透明背景上のテキスト可読性向上 */
.badge-pill,
.chip,
.card h3,
.card p,
.cta-band,
.section-title h2,
.grid article .muted {
  color: #ffffff !important;
}
/* 最終: 全テキストカラーを白で強制 */
*:not(svg):not(path) {
  color: #ffffff !important;
}
/* 強制的にテキスト色を調整：白でコントラスト向上 */
body, h1, h2, h3, h4, h5, h6, p, a, li, span, button, .btn, .badge-pill, .chip, .section-title h2, .price-rows span, .note, .card h3, .card p {
  color: #ffffff !important;
}
.muted, .note {
  color: rgba(255,255,255,0.8) !important;
}
.landing .section-title .muted {
  margin-top: 0.5rem !important;
}
/* Landingページ: プラン一覧を二段表示 */
#plans .section-title {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}
#plans .section-title .muted {
  margin-top: 0.5rem !important;
}
/* 宮古ブルー背景の完全上書き */
html, body {
  background: var(--bg) !important;
}
/* 最後に背景カラーを宮古ブルーで上書き */
body {
  background: #00bfff !important;
}
/* 最終オーバーライド: HTML要素のグラデーションを解除し、宮古ブルー背景を適用 */
html {
  background: var(--bg) !important;
  background-image: none !important;
}
/* Parallax背景: 宮古島の画像 */
html, body {
  background-image: url("https://source.unsplash.com/featured/?Miyako-Island") !important;
  background-attachment: fixed !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
}
/* Parallax final overrides */
html, body {
  background: none !important;
}
body {
  background: none !important;
}
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('../images/miyako-parallax.jpg') no-repeat center center fixed;
  background-size: cover !important;
  z-index: -1;
}
/* 全体の文字を読みやすくするためのテキストシャドウ */
body, h1, h2, h3, h4, h5, h6, p, a, li, span, label {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important;
}
/* カード説明文を白くする */
.card p,
.card .muted {
  color: #ffffff !important;
}
/* Center hero landing text */
.landing-hero .inner {
  justify-items: center !important;
  text-align: center !important;
}

/* Ensure hero description never wraps at very narrow widths */
@media (max-width: 150px) {
  .landing-hero p {
    font-size: 4px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }
  /* Remove container padding to truly center */
  .landing-hero .container {
    padding: 0 !important;
  }
  /* Center all grid items (logo, text, button) */
  .landing-hero .inner > * {
    flex: 0 0 auto !important;
    margin: 0 auto !important;
  }
  /* Ensure logo and button centered in extreme narrow view */
  .landing-hero .inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .hero-landing-brand,
  .landing-hero .brand {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 auto !important;
    width: auto !important;
  }
  /* Center the signup button contents */
  .btn {
    justify-content: center !important;
    text-align: center !important;
  }
  .landing-hero .inner,
  .hero-landing-brand {
    align-items: center !important;
    justify-content: center !important;
  }
  .landing-hero .cta {
    justify-content: center !important;
  }
/* Login form centering at fixed 320px */
.auth-form {
  max-width: 320px !important;
  margin: 2rem auto !important;
  padding: 1rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.auth-form .form-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  margin-bottom: 1rem !important;
}

.auth-form .form-group label {
  display: block !important;
  width: 100% !important;
  margin-bottom: 0.5rem !important;
  text-align: center !important;
}

.auth-form .form-group input {
  display: block !important;
  width: 100% !important;
  margin: 0 auto 1rem !important;
  font-size: 1.2rem !important;
  padding: 0.75rem !important;
  line-height: 1.4 !important;
}
.auth-form .form-group {
  width: 100% !important;
/* Override to stack form fields vertically in login form */
.auth-form .form-group {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  margin-bottom: 1rem !important;
}
.auth-form .form-group label {
  text-align: center !important;
  width: 100% !important;
  margin-bottom: 0.5rem !important;
}
.auth-form .form-group input {
  display: block !important;
  width: 90% !important;
  margin: 0 auto 1rem !important;
}
/* Ensure button fits within auth-form */
.auth-form button {
  display: block !important;
  width: auto !important;
  align-self: center !important;
  margin: 1rem auto 0 !important;
}
.auth-form .form-group label {
  display: block !important;
  margin-bottom: 0.5rem !important;
  text-align: center !important;
}
.auth-form .form-group input {
  display: block !important;
  width: 100% !important;
  margin-bottom: 1rem !important;
}
.auth-form button {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}
}
.auth-form input {
  width: 100% !important;
  padding: 0.75rem !important;
  font-size: 1rem !important;
  box-sizing: border-box !important;
}
.auth-form button {
  align-self: center !important;
  padding: 0.75rem 1.5rem !important;
  margin: 1rem auto 0 !important;
  width: 100% !important;
}
/* Login form: center and enlarge text boxes */
form[action$="/accounts/login/"] {
  max-width: 360px !important;
  margin: 2rem auto !important;
  padding: 1rem !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
form[action$="/accounts/login/"] .form-group {
  width: 100% !important;
}
form[action$="/accounts/login/"] input {
  width: 100% !important;
  padding: 0.75rem !important;
  font-size: 1rem !important;
  box-sizing: border-box !important;
}
form[action$="/accounts/login/"] button {
  align-self: center !important;
  padding: 0.75rem 1.5rem !important;
}
  .btn,
  button {
  /* Ensure all hero elements span full width and center */
  .landing-hero .inner,
  .landing-hero .inner > *,
  .hero-landing-brand,
  .landing-hero .cta {
    width: 100% !important;
    margin: 0 auto !important;
  }
    justify-content: center !important;
    text-align: center !important;
  }
}
/* Enlarge CTA band announcement text for landing hero */
.landing-hero .cta-band div {
  font-size: clamp(1.5rem, 3vw, 2.5rem) !important;
  line-height: 1.2 !important;
}

.landing-hero .cta {
  justify-content: center !important;
}

/* Disable period-based registration buttons when inactive */
.period-btn.disabled {
  opacity: 0.5 !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
}
/* Center logo and button text at extreme narrow widths */
/* Extreme-narrow unified centering override */
/* Final extreme-narrow override: ensure full centering at ≤150px */
@media (max-width: 150px) {
  .landing-hero .container,
  .landing-hero .inner,
  .landing-hero .inner > *,
  .hero-landing-brand,
  .landing-hero h1,
  .landing-hero p,
  .landing-hero .cta,
  .landing-hero .cta .btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
    padding: 0 !important;
  }
  .landing-hero p {
    font-size: 4px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }
}
@media (max-width: 150px) {
  .landing-hero .inner > * {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .landing-hero .container,
  .landing-hero .inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 auto !important;
    width: 100% !important;
  }
  .landing-hero .inner > *,
  .hero-landing-brand,
  .landing-hero .brand,
  .landing-hero .cta,
  .landing-hero .cta .btn {
    width: 100% !important;
    margin: 0 auto 1rem !important;
    text-align: center !important;
  }
  .landing-hero p {
    font-size: 4px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
  }
}
  /* Center CTA band elements at extreme-narrow widths */
  .landing-hero .cta-band,
  .landing-hero .cta-band > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 auto 1rem !important;
    text-align: center !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  /* Center CTA band buttons */
  .landing-hero .cta-band a {
    display: block !important;
    margin: 0.5rem auto !important;
    width: auto !important;
  }
@media (max-width: 150px) {
  .landing-hero .inner,
  .hero-landing-brand {
    justify-items: center !important;
    justify-self: center !important;
    margin: 0 auto !important;
  }
  .btn,
  button {
    text-align: center !important;
  }
}
/* Ultimate override for extreme-narrow centering (should be last in file) */
@media (max-width: 150px) {
  /* Center CTA band and its buttons in extreme-narrow view */
  .landing-hero .cta-band,
  .landing-hero .cta-band > div,
  .landing-hero .cta-band a,
  .landing-hero .cta-band a.period-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0.5rem auto !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
  /* Center CTA band elements in extreme-narrow view */
  .landing-hero .cta-band,
  .landing-hero .cta-band > div,
  .landing-hero .cta-band a,
  .landing-hero .cta-band a.period-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0.5rem auto !important;
    text-align: center !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  /* Center CTA band elements at extreme-narrow widths */
  .landing-hero .cta-band,
  .landing-hero .cta-band > div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 auto 1rem !important;
    text-align: center !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  .landing-hero .cta-band a.period-btn,
  .landing-hero .cta-band a.btn {
    display: block !important;
    margin: 0.5rem auto !important;
    width: auto !important;
  }
  /* Center period buttons in CTA band */
  .landing-hero .cta-band a.btn {
    align-self: center !important;
    margin: 0 auto !important;
  }
  .landing-hero .inner,
  .landing-hero .inner > *,
  .hero-landing-brand,
  .hero-landing-brand .hero-tagline,
  .landing-hero h1,
  .landing-hero p,
  .landing-hero .cta,
  .landing-hero .cta .btn {
    display: flex !important;
    flex-direction: column !important;
  /* Target CTA-band inner wrapper for extreme-narrow centering */
  @media (max-width: 150px) {
    .landing-hero .cta-band > div {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      justify-content: center !important;
    }
    .landing-hero .cta-band > div a.period-btn {
      align-self: center !important;
      margin: 0.25rem 0 !important;
      width: auto !important;
    }
  }
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    text-align: center !important;
    box-sizing: border-box !important;
    padding: 0 !important;
  }

  .hero-landing-brand svg,
  .hero-landing-brand span {
    display: block !important;
    margin: 0 auto !important;
  }

  .landing-hero p {
    font-size: 4px !important;
  /* Center period buttons within CTA band */
  .landing-hero .cta-band a.period-btn {
    align-self: center !important;
    margin: 0 auto !important;
    width: auto !important;
  }
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }
}
/* Extreme-narrow: CTAバンドも完全中央揃え */
@media (max-width: 150px) {
  .landing-hero .cta-band,
  .landing-hero .cta-band div {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 auto 1rem !important;
    text-align: center !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* Center CTA band buttons */
  .landing-hero .cta-band a,
  .landing-hero .cta-band a.period-btn {
    display: block !important;
    margin: 0.5rem auto !important;
    width: auto !important;
  }

  /* Ensure CTA band container full width and center contents */
  .landing-hero .cta-band > div {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .landing-hero .cta-band > div a {
    width: auto !important;
    margin: 0.5rem auto !important;
  }

  /* Center period buttons fully */
  .landing-hero .cta-band a.period-btn,
  .landing-hero .cta-band a.btn {
    display: block !important;
    margin: 0.5rem auto !important;
    width: auto !important;
  }
}
/* Login form enhancements: stack fields under labels and size consistently */
.auth-form .form-group {
  display: block !important;
  text-align: center !important;
  margin-bottom: 1rem !important;
}
.auth-form .form-group label {
  display: block !important;
  margin-bottom: 0.5rem !important;
  text-align: center !important;
}
.auth-form .form-group input {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 auto 1rem !important;
  font-size: 1.2rem !important;
  padding: 0.75rem !important;
  line-height: 1.4 !important;
}
/* Ensure hamburger menu toggle is always visible */
header .menu-toggle {
  display: block !important;
}
.auth-form button {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 1rem auto 0 !important;
}
/* Increase auth-form container padding for better spacing */
.auth-form {
  padding: 2rem !important;
}
/* Dropdown menu link styling */
header .header-links a {
  display: block !important;
  padding: 0.75rem 1rem !important;
  margin: 0.25rem 0 !important;
  color: var(--text) !important;
  text-decoration: none !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
}
header .header-links a:hover {
  background: rgba(255,255,255,0.2) !important;
}
/* Override dropdown menu background to black transparent */
header .header-links {
  background: rgba(0, 0, 0, 0.7) !important;
}
@media (max-width: 600px) {
  header .header-links {
    background: rgba(0, 0, 0, 0.7) !important;
  }
}
/* Post-login header avatar adjustments */
header .menu-toggle {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 50% !important;
}
header .menu-toggle .avatar-nav {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  margin: 0 !important;
}
/* Brand link no underline and circular avatar override */
header .brand {
  text-decoration: none !important;
}
header .menu-toggle .avatar-nav {
  border-radius: 50% !important;
}
/* Final header overrides */
header .brand {
  text-decoration: none !important;
}
header .menu-toggle .avatar-nav {
  border-radius: 50% !important;
}
/* プロフィールページ情報をセンタリング用CSS */
.profile-page {
  text-align: center !important;
}
.profile-header {
  justify-content: center !important;
}
.profile-info {
  text-align: center !important;
}
/* プロフィール写真、免許証画像のセンタリング */
.profile-avatar {
  display: flex !important;
  justify-content: center !important;
}
.profile-avatar .avatar {
  margin: 0 auto !important;
}
.license-preview {
  display: block !important;
  margin: 0 auto !important;
}
/* 免許証プレビュー拡大 */
.license-preview {
  width: 50% !important;
  max-width: 600px !important;
  height: auto !important;
}
/* 契約詳細ページの画像拡大防止と中央配置 */
.equipment-main-image,
.slider-item img {
  display: block !important;
  width: auto !important;     /* 横幅は元画像を超えない */
  max-width: 100% !important; /* コンテナ幅を超えない */
  height: auto !important;    /* 縦サイズは元画像を超えない */
  margin: 0 auto !important;  /* 左右中央配置 */
}
/* ========== Profile Edit Page Customization ========== */
.profile-edit-container {
  max-width: 600px;
  margin: 2rem auto !important;
  padding: 2rem !important;
  background: rgba(0,95,153,0.6) !important;
  border-radius: 12px;
  box-shadow: var(--shadow);
  text-align: center !important;
}
.profile-edit-container h2 {
  margin-bottom: 1.5rem !important;
  color: #ffffff !important;
}
.profile-edit-container label {
  display: block !important;
  margin-bottom: 0.5rem !important;
  font-weight: bold !important;
  color: #ffffff !important;
  text-align: center !important;
}
.profile-edit-container input,
.profile-edit-container select,
.profile-edit-container textarea {
  width: 100% !important;
  font-size: 1.1rem !important;
  padding: 0.75rem !important;
  margin-bottom: 1rem !important;
  border: 1px solid var(--primary) !important;
  border-radius: 8px !important;
  box-sizing: border-box !important;
  text-align: center !important;
}
.profile-edit-container button {
  background: linear-gradient(135deg,var(--primary),#6be3ff) !important;
  color: #00152b !important;
  font-weight: bold !important;
  padding: 14px 20px !important;
  border: none !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
  cursor: pointer !important;
  transition: transform .2s ease,filter .2s ease !important;
  width: 100% !important;
}
.profile-edit-container button:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
}
/* 入力文字の色を黒に変更 */
input, textarea {
  color: #000 !important;
  background-color: #fff !important;
}
/* 入力文字を黒に強制し、プレースホルダーも視認性を改善 */
input, textarea {
  color: #000 !important;
  background-color: #fff !important;
}

input::placeholder,
textarea::placeholder {
  color: #666 !important;
}
/* 強制的に入力テキストを黒にする（全ブラウザ対応） */
input, textarea, .form-control {
  color: #000 !important;
  background-color: #fff !important;
  -webkit-text-fill-color: #000 !important; /* Safari/Chrome対策 */
  appearance: none !important;
}
/* ログイン画面を含む全フォームの文字色を黒に強制 */
input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=tel],
input[type=url],
input[type=search],
textarea {
  color: #000 !important;
  -webkit-text-fill-color: #000 !important;
  background-color: #fff !important;
}
/* Profile form styling */
form input[type="text"],
form input[type="email"],
form input[type="tel"],
form input[type="file"],
form input[type="date"],
form select,
form textarea {
  font-size: 18px;
  padding: 12px;
  width: 100%;
  box-sizing: border-box;
}
/* 横並び用クラス */
.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 10px;
}
.form-row .form-group {
  flex: 1;
  min-width: 200px;
}