/* ============================================
   EACUS - Common Base Stylesheet
   Shared across all pages
   ============================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --color-black: #1a1a1a;
  --color-white: #ffffff;
  --color-gray-100: #f7f7f7;
  --color-gray-200: #eeeeee;
  --color-gray-300: #d0d0d0;
  --color-gray-500: #888888;
  --color-gray-700: #555555;
  --color-accent: #c8102e;
  --font-display: 'Oswald', sans-serif;
  --font-body: 'Noto Sans JP', sans-serif;
  --max-width: 1300px;
  --content-width: 1100px;
}

html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: var(--font-body); color: var(--color-black); background: var(--color-white); line-height: 1.8; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.site-wrapper { max-width: var(--max-width); margin: 0 auto; background: var(--color-white); position: relative; min-height: 100vh; }

/* --- Header --- */
.site-header { display: flex; justify-content: space-between; align-items: center; padding: 28px 40px 10px; position: relative; z-index: 100; }
.header-logo { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: 0.15em; }
.header-logo a { display: flex; align-items: center; }
.site-title { font-family: var(--font-display); font-size: 42px; font-weight: 300; letter-spacing: 0.3em; text-align: right; }
.header-nav { display: flex; align-items: center; gap: 22px; padding: 15px 40px 25px; background: var(--color-white); border-bottom: 1px solid var(--color-gray-100); }
.header-nav a { font-family: var(--font-display); font-size: 14px; font-weight: 400; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-black); transition: opacity 0.3s; }
.header-nav a:hover { opacity: 0.5; }
.header-nav a.active { border-bottom: 2px solid var(--color-black); }
.header-nav .nav-instagram { display: flex; align-items: center; }
.header-nav .nav-instagram svg { width: 18px; height: 18px; }

/* --- Dropdown Menu --- */
.nav-item-dropdown { position: relative; display: flex; align-items: center; }
.dropdown-menu { position: absolute; top: 100%; left: -20px; background: var(--color-white); min-width: 240px; padding: 15px 0; box-shadow: 0 10px 30px rgba(0,0,0,0.08); opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 1000; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--color-gray-100); }
.nav-item-dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; top: calc(100% - 5px); }
.dropdown-menu a { padding: 8px 25px !important; font-size: 13px !important; text-transform: none !important; letter-spacing: 0.05em !important; color: var(--color-gray-700) !important; display: block; }
.dropdown-menu a:hover { background: var(--color-gray-100); opacity: 1 !important; color: var(--color-black) !important; }

/* --- Footer --- */
.site-footer { padding: 50px 40px 35px; text-align: center; border-top: 1px solid var(--color-gray-200); margin: 0 40px; }
.footer-logo img { height: 24px; width: auto; display: block; margin: 0 auto 20px; }
.footer-nav { display: flex; justify-content: center; align-items: center; gap: 22px; margin-bottom: 16px; }
.footer-nav a { font-family: var(--font-display); font-size: 10px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-black); transition: opacity 0.3s; }
.footer-nav a:hover { opacity: 0.5; }
.footer-copyright { font-size: 10px; color: var(--color-gray-500); letter-spacing: 0.05em; }

/* --- Fixed Contact Button --- */
.fixed-contact { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 999; writing-mode: vertical-rl; text-orientation: mixed; background: var(--color-black); color: var(--color-white); padding: 20px 12px; font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; cursor: pointer; transition: background 0.3s; text-decoration: none; }
.fixed-contact:hover { background: var(--color-gray-700); }

/* --- Back to Top Button --- */
.back-to-top { position: fixed; right: 30px; bottom: 30px; width: 48px; height: 48px; background: var(--color-black); color: var(--color-white); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-decoration: none; opacity: 0; visibility: hidden; transition: all 0.4s ease; z-index: 1000; border-radius: 50%; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.back-to-top.show { opacity: 1; visibility: visible; }
.back-to-top:hover { background: var(--color-gray-700); transform: translateY(-3px); color: var(--color-white); }

/* --- Hamburger Menu --- */
.hamburger-btn { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 38px; height: 38px; background: none; border: none; cursor: pointer; padding: 4px; z-index: 200; }
.hamburger-btn span { display: block; width: 24px; height: 1.5px; background: var(--color-black); transition: all 0.3s ease; transform-origin: center; }
.hamburger-btn.active span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger-btn.active span:nth-child(2) { opacity: 0; }
.hamburger-btn.active span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.mobile-nav-overlay { display: none; position: fixed; inset: 0; background: var(--color-white); z-index: 150; flex-direction: column; align-items: flex-start; justify-content: center; padding: 80px 40px 60px; }
.mobile-nav-overlay.open { display: flex; }
.mobile-nav-overlay a { font-family: var(--font-display); font-size: 28px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--color-black); text-decoration: none; padding: 14px 0; border-bottom: 1px solid var(--color-gray-200); width: 100%; transition: opacity 0.2s; }
.mobile-nav-overlay a:last-child { border-bottom: none; }
.mobile-nav-overlay a:hover { opacity: 0.5; }
.mobile-nav-close { position: absolute; top: 24px; right: 24px; background: none; border: none; font-size: 30px; cursor: pointer; color: var(--color-black); line-height: 1; }

/* --- Mobile Bottom Bar --- */
.mobile-bottom-bar { display: none; position: fixed; bottom: 0; left: 0; width: 100%; height: 56px; z-index: 998; }
.mobile-bottom-bar a { display: flex; align-items: center; justify-content: center; width: 50%; height: 100%; font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-decoration: none; transition: opacity 0.2s; }
.mobile-bottom-bar a:hover { opacity: 0.85; }
.mobile-bottom-bar .btn-contact { background: var(--color-black); color: var(--color-white); }
.mobile-bottom-bar .btn-inquiry { background: #856859; color: var(--color-white); }

@media (max-width: 768px) {
  .site-title { display: none; }
  .site-header { padding: 18px 20px 8px; }
  .header-logo { font-size: 18px; }
  .header-nav { display: none !important; }
  .hamburger-btn { display: flex; }
  .mobile-bottom-bar { display: flex; }
  body { padding-bottom: 56px; }
  .site-footer { margin: 0 20px; padding: 35px 20px 25px; }
  .fixed-contact { padding: 16px 9px; font-size: 10px; }
}