/* ============================================
   Common CSS for all pages - Shared UI Components
   Header, Navigation, Hamburger Menu, Entry Button, Join Us Banner, Footer
   ============================================ */

/* ============================================
   HEADER & NAVIGATION - Base Styles
   ============================================ */

/* Header base styles */
header {
  padding: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
}

nav {
  padding: 0 !important;
  margin: 0 !important;
}

/* Navigation list container */
.nav {
  display: flex;
  align-items: center !important;
  height: 100%;
  min-height: 60px !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Navigation items */
.nav li {
  display: flex !important;
  align-items: center !important;
  height: 100%;
  min-height: 40px !important;
  margin-right: 30px;
}

/* Navigation links */
.nav li a.gradation {
  line-height: 1.4 !important;
  padding: 8px 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* Entry button container (last nav item) */
.nav li:last-child {
  display: flex !important;
  align-items: stretch !important;
  height: 100% !important;
  margin-right: 0 !important;
  padding: 0 !important;
}

/* 採用サイトテキストの位置調整 - ロゴ内「SOU-GOU Inc.」の下側に揃える（デフォルト位置から3px下） */
.nav li:nth-child(2) span {
  transform: translateY(3px) !important;
  display: inline-block !important;
}

/* Navigation and Entry Button - Common Styles */
.nav li a {
  font-family: 'Roboto', sans-serif !important;
  font-weight: bold !important;
  font-size: 14px !important;
  white-space: nowrap !important;
  line-height: 1;
  padding: 0;
  margin: 0;
  display: block;
}

.nav li span,
.recruit-site-text,
.nav-ex span {
  font-family: 'Roboto', sans-serif !important;
  font-weight: bold !important;
  font-size: 14px !important;
  white-space: nowrap !important;
  line-height: 1;
  padding: 0;
  margin: 0;
  display: block;
}

/* ============================================
   ENTRY BUTTON - Base Styles
   ============================================ */

.entry-link {
  display: flex !important;
  align-items: stretch !important;
  height: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.entry-rectangle {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  width: 100% !important;
  min-height: 60px !important;
  padding: 0 20px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.entry-text {
  line-height: 1.4 !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* ============================================
   RESPONSIVE STYLES - Desktop (1920px to 1100px)
   ============================================ */

@media (max-width: 1920px) and (min-width: 1101px) {
  header nav {
    padding-right: 0 !important;
    margin-right: 0 !important;
    overflow: visible !important;
  }
  
  .entry-rectangle {
    width: auto !important;
    min-width: clamp(160px, 1.24vw + 89px, 213px) !important;
    max-width: clamp(160px, 1.24vw + 89px, 213px) !important;
    height: 80px !important;
    padding: 0 clamp(8px, 0.6vw + 2px, 12px) 0 clamp(20px, 1.2vw + 10px, 28px) !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
    margin-right: 0 !important;
  }
  
  .entry-rectangle .entry-text {
    font-size: 25px !important;
    letter-spacing: 2px !important;
  }
  
  .entry-rectangle .entry-icon {
    height: 54px !important;
    width: auto !important;
    flex-shrink: 0 !important;
  }
  
  /* Navigation menu text shrink */
  .nav li a {
    font-size: clamp(12px, 0.244vw + 9.32px, 14px) !important;
    white-space: nowrap !important;
  }
  
  .nav li span {
    font-size: clamp(12px, 0.244vw + 9.32px, 14px) !important;
    white-space: nowrap !important;
  }
  
  .nav li {
    margin-right: clamp(15px, 0.75vw + 15px, 30px) !important;
  }
  
  .nav li:last-child {
    margin-right: 0 !important;
    margin-left: clamp(10px, 0.5vw + 10px, 20px) !important;
    flex-shrink: 0 !important;
  }
  
  .nav {
    padding-right: 0 !important;
    margin-right: 0 !important;
    overflow: visible !important;
  }
  
  header {
    padding-right: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  header nav {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ============================================
   MOBILE NAVIGATION - 1100px and below
   ============================================ */

@media (max-width: 1100px) {
  .nav {
    display: none !important;
  }
  
  .nav-ex {
    display: block !important;
  }
  
  /* Hide "採用サイト" text in mobile navigation */
  .nav-ex > span[style*="採用サイト"],
  .nav-ex > span:not(.menu-under):not(.menu__line) {
    display: none !important;
  }
  
  .nav-ex span {
    display: none !important;
  }
  
  /* Fix header spacing on SP version - align with content */
  header {
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .nav-ex {
    padding: 15px 20px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .nav-ex .logo {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .nav-ex .logo img {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Hamburger Menu Button */
  .menu-under {
    display: block !important;
    position: fixed !important;
    right: 20px !important;
    top: 20px !important;
    width: 30px !important;
    height: 20px !important;
    z-index: 9999999 !important;
    cursor: pointer !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  /* Hamburger Menu Lines */
  .menu-under .menu__line {
    background: #111 !important;
    background-color: #111 !important;
    display: block !important;
    height: 2px !important;
    min-height: 2px !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-sizing: border-box !important;
  }
  
  .menu-under .menu__line--top {
    top: 0 !important;
    bottom: auto !important;
  }
  
  .menu-under .menu__line--center {
    top: 9px !important;
    bottom: auto !important;
  }
  
  .menu-under .menu__line--bottom {
    top: auto !important;
    bottom: 0 !important;
  }
  
  /* Active state for X button when menu is open */
  .menu-under .menu__line--top.active {
    top: 9px !important;
    bottom: auto !important;
    transform: rotate(45deg) !important;
    transform-origin: center center !important;
  }
  
  .menu-under .menu__line--center.active {
    transform: scaleX(0) !important;
    opacity: 0 !important;
  }
  
  .menu-under .menu__line--bottom.active {
    top: 9px !important;
    bottom: auto !important;
    transform: rotate(-45deg) !important;
    transform-origin: center center !important;
  }
  
  /* ============================================
     HAMBURGER MENU OVERLAY (nav-cover)
     ============================================ */
  
  /* Simple white background hamburger menu - no overlay, no animations, clean design */
  /* Note: display property is controlled by tablet.css (display: none) and jQuery fadeToggle() - don't override */
  .nav-cover {
    background: #fff !important;
    background-image: none !important;
    background-size: auto !important;
    background-position: 0 0 !important;
    box-shadow: none !important;
    height: 100vh !important;
    position: fixed !important;
    width: 100% !important;
    z-index: 99999 !important;
    top: 0 !important;
    left: 0 !important;
    overflow-y: auto !important;
    /* Don't set display here - let tablet.css (display: none) and jQuery fadeToggle() control it */
  }
  
  .nav-cover__wrap {
    background: #fff !important;
    background-image: none !important;
    transition: none !important;
    display: flex !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100vh !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    position: relative !important;
    padding: 0 !important;
  }
  
  /* Simple menu list - clean and minimal, positioned lower for balance */
  .nav-cover__menu {
    width: 100% !important;
    text-align: left !important;
    padding: 80px 30px 40px 30px !important;
    box-sizing: border-box !important;
  }
  
  .nav-cover__menu__item {
    margin-bottom: 35px !important;
    text-align: left !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }
  
  /* Copyright item - different styling */
  .nav-cover__menu__item:last-child {
    margin-top: 60px !important;
    padding-top: 40px !important;
    border-top: 1px solid #e0e0e0 !important;
    font-size: 11px !important;
    color: #999 !important;
    line-height: 1.6 !important;
  }
  
  /* Override tablet.css styles for menu item links - ensure flex layout works */
  .nav-cover__menu__item a,
  .nav-cover__menu__toggle {
    text-decoration: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 0 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    transition: color 0.2s ease !important;
    cursor: pointer !important;
    position: relative !important;
    text-align: left !important;
    letter-spacing: 0 !important;
    color: inherit !important;
  }
  
  /* Override tablet.css .nav-cover__menu__item span styles - remove margin-left: 10px and font-size: 15px */
  .nav-cover__menu__item a > span.menu-label-en,
  .nav-cover__menu__item a > span.menu-label-ja,
  .nav-cover__menu__toggle > span.menu-label-en,
  .nav-cover__menu__toggle > span.menu-label-ja {
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: block !important;
  }
  
  /* English label - small, light gray, above - override tablet.css span styles */
  .nav-cover__menu__item a .menu-label-en,
  .nav-cover__menu__toggle .menu-label-en {
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #999 !important;
    line-height: 1.4 !important;
    margin-bottom: 4px !important;
    display: block !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    letter-spacing: 0 !important;
    width: auto !important;
  }
  
  /* Japanese label - larger, bold, black, below - override tablet.css span styles */
  .nav-cover__menu__item a .menu-label-ja,
  .nav-cover__menu__toggle .menu-label-ja {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #000 !important;
    line-height: 1.4 !important;
    display: block !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-right: 0 !important;
    padding: 0 !important;
    letter-spacing: 0 !important;
    width: auto !important;
  }
  
  .nav-cover__menu__item a:hover .menu-label-en,
  .nav-cover__menu__toggle:hover .menu-label-en {
    color: #999 !important;
  }
  
  .nav-cover__menu__item a:hover .menu-label-ja,
  .nav-cover__menu__toggle:hover .menu-label-ja {
    color: #003E8F !important;
  }
  
  /* Accordion dropdown container */
  .nav-cover__menu__item--has-dropdown {
    position: relative;
  }
  
  /* Simple indicator (caret) - positioned on the right, aligned with Japanese text line */
  .nav-cover__menu__toggle {
    position: relative;
    padding-right: 25px !important;
  }
  
  .nav-cover__menu__toggle::after {
    content: '\f078'; /* Font Awesome chevron-down */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 0;
    top: 22px;
    font-size: 12px;
    transition: transform 0.3s ease;
    line-height: 1;
    color: #000;
  }
  
  /* Vertical flip: arrow points down initially, flips to point up when opened - simple */
  .nav-cover__menu__item--has-dropdown.active .nav-cover__menu__toggle::after {
    transform: scaleY(-1);
    transition: transform 0.3s ease;
  }
  
  /* Dropdown list - simple show/hide, no complex animations */
  .nav-cover__menu__dropdown {
    list-style: none !important;
    padding: 0 !important;
    margin: 8px 0 0 0 !important;
    overflow: hidden !important;
    display: none !important;
    max-height: none !important;
    opacity: 1 !important;
    transition: none !important;
    will-change: auto !important;
  }
  
  /* Show dropdown when active - simple display */
  .nav-cover__menu__item--has-dropdown.active .nav-cover__menu__dropdown {
    display: block !important;
    max-height: none !important;
    opacity: 1 !important;
    margin-top: 8px !important;
    transition: none !important;
  }
  
  /* Dropdown items - simple, no animations */
  .nav-cover__menu__dropdown li {
    margin: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    padding-left: 20px !important;
    padding-right: 0 !important;
    list-style: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Ensure last item has no extra margin */
  .nav-cover__menu__dropdown li:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* Dropdown links - simple clean style */
  .nav-cover__menu__dropdown li a {
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #666 !important;
    text-decoration: none !important;
    display: block !important;
    padding: 10px 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: color 0.25s ease-out, padding-left 0.25s ease-out !important;
    line-height: 1.5 !important;
  }
  
  /* Ensure last link has consistent padding */
  .nav-cover__menu__dropdown li:last-child a {
    padding-bottom: 10px !important;
    margin-bottom: 0 !important;
  }
  
  /* Hover effect - subtle and calm */
  .nav-cover__menu__dropdown li a:hover {
    color: #003E8F !important;
    padding-left: 4px !important;
  }
  
  /* Ensure last item hover doesn't break alignment */
  .nav-cover__menu__dropdown li:last-child a:hover {
    padding-left: 4px !important;
  }
}

/* Hide mobile navigation above 1100px */
@media (min-width: 1101px) {
  .nav-ex {
    display: none !important;
  }
}

/* ============================================
   DESKTOP HAMBURGER MENU (Tablet/Desktop viewport)
   ============================================ */

@media (min-width: 1101px) {
  .nav-cover__wrap {
    background: #fff !important;
  }
  
  /* Accordion dropdown container */
  .nav-cover__menu__item--has-dropdown {
    position: relative;
  }
  
  /* Toggle link - clean style */
  .nav-cover__menu__toggle {
    cursor: pointer;
    position: relative;
    display: inline-block;
    transition: color 0.25s ease-out;
  }
  
  /* Toggle link hover - subtle */
  .nav-cover__menu__toggle:hover {
    color: #003E8F;
  }
  
  /* Simple indicator (caret) - positioned on the right, aligned with Japanese text line */
  .nav-cover__menu__toggle::after {
    content: '\f078'; /* Font Awesome chevron-down */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 0;
    top: 22px;
    font-size: 12px;
    transition: transform 0.3s ease;
    line-height: 1;
    color: #000;
  }
  
  /* Vertical flip: arrow points down initially, flips to point up when opened - simple */
  .nav-cover__menu__item--has-dropdown.active .nav-cover__menu__toggle::after {
    transform: scaleY(-1);
    transition: transform 0.3s ease;
  }
  
  /* Dropdown list - calm expansion animation */
  .nav-cover__menu__dropdown {
    list-style: none;
    padding: 0;
    margin: 12px 0 0 0;
    overflow: hidden;
    display: none !important;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.1s, margin-top 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: max-height, opacity;
  }
  
  /* Show dropdown when active - smooth expansion */
  .nav-cover__menu__item--has-dropdown.active .nav-cover__menu__dropdown {
    display: block !important;
    max-height: 500px;
    opacity: 1;
    margin-top: 12px;
    transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1) 0.15s, margin-top 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* Dropdown items - clean spacing with subtle fade-in */
  .nav-cover__menu__dropdown li {
    margin: 0;
    margin-bottom: 0;
    padding: 0;
    padding-left: 20px;
    padding-right: 0;
    list-style: none;
    opacity: 0;
    transform: translateY(-2px);
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  
  /* Ensure last item has no extra margin */
  .nav-cover__menu__dropdown li:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0;
  }
  
  /* Fade in dropdown items when parent is active */
  .nav-cover__menu__item--has-dropdown.active .nav-cover__menu__dropdown li {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* Stagger animation for each item - more subtle delays */
  .nav-cover__menu__item--has-dropdown.active .nav-cover__menu__dropdown li:nth-child(1) {
    transition-delay: 0.2s;
  }
  .nav-cover__menu__item--has-dropdown.active .nav-cover__menu__dropdown li:nth-child(2) {
    transition-delay: 0.25s;
  }
  .nav-cover__menu__item--has-dropdown.active .nav-cover__menu__dropdown li:nth-child(3) {
    transition-delay: 0.3s;
  }
  .nav-cover__menu__item--has-dropdown.active .nav-cover__menu__dropdown li:nth-child(4) {
    transition-delay: 0.35s;
  }
  
  /* Dropdown links - clean style with consistent alignment */
  .nav-cover__menu__dropdown li a {
    font-size: 16px;
    font-weight: 400;
    color: #666;
    text-decoration: none;
    display: block;
    padding: 10px 0;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    transition: color 0.25s ease-out, padding-left 0.25s ease-out;
    line-height: 1.5;
  }
  
  /* Ensure last link has consistent padding */
  .nav-cover__menu__dropdown li:last-child a {
    padding-bottom: 10px;
    margin-bottom: 0;
  }
  
  /* Hover effect - subtle and calm */
  .nav-cover__menu__dropdown li a:hover {
    color: #003E8F;
    padding-left: 4px;
  }
  
  /* Ensure last item hover doesn't break alignment */
  .nav-cover__menu__dropdown li:last-child a:hover {
    padding-left: 4px;
  }
}

/* ============================================
   ENTRY BUTTON - Desktop Base Styles
   ============================================ */

.entry-link {
  text-decoration: none;
  display: block;
}

.entry-rectangle {
  width: auto;
  min-width: 213px;
  height: 80px;
  background: #002F6B;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 0 12px 0 28px;
  box-sizing: border-box;
  margin: 0;
  border: none;
  transition: all 0.3s ease;
  cursor: pointer;
}

.entry-link:hover .entry-rectangle {
  background: #00408F;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 47, 107, 0.4);
}

.entry-rectangle .entry-text {
  color: #FFD31B;
  font-size: 25px;
  font-weight: 700;
  font-family: 'Roboto', sans-serif;
  letter-spacing: 2px;
  transition: color 0.3s ease;
}

.entry-link:hover .entry-rectangle .entry-text {
  color: #FFE066;
}

.entry-rectangle .entry-icon {
  width: auto;
  height: 54px;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.entry-link:hover .entry-rectangle .entry-icon {
  transform: translateX(3px);
}

/* Mobile Entry Button - 850px and below */
@media (max-width: 850px) {
  .entry-rectangle {
    min-width: 150px;
    padding: 0 12px 0 28px;
  }
  
  .entry-rectangle .entry-text {
    font-size: 22px !important;
  }
  
  .entry-rectangle .entry-icon {
    height: 48px;
  }
}

/* ============================================
   JOIN US BANNER (contact-wrap) - Shared Styles
   ============================================ */

/* Join Us banner icon styles */
.contact-wrap .btn.ex i,
.contact-wrap .btn.ex .fa-solid,
.contact-wrap .btn.ex .fas {
  font-size: 28px !important;
  margin-right: 12px !important;
  vertical-align: middle !important;
}

/* Join Us banner button font sizes - ensure consistent 16px across all breakpoints */
.contact-wrap .btn.ex {
  font-size: 16px !important;
  white-space: nowrap !important;
  padding: 12px 20px !important;
  font-style: normal !important;
}

.contact-wrap .btn.ex.mail {
  font-size: 16px !important;
  font-style: normal !important;
}

/* Mobile: maintain 16px font-size for mail button (override any 12px shrink) */
@media (max-width: 420px) {
  .contact-wrap .btn.ex.mail {
    font-size: 16px !important; /* Overriding previous 12px shrink */
    padding: 0 15px !important;
    white-space: normal !important;
    line-height: 1.4 !important;
  }
  .contact-wrap .btn.ex.mail .btn-text-line1,
  .contact-wrap .btn.ex.mail .btn-text-line2 {
    line-height: 1.3 !important;
  }
}

/* ============================================
   FOOTER - Shared Styles
   ============================================ */

footer {
  padding: 30px !important;
}

footer .logo {
  width: 300px !important;
}

.nav-footer {
  display: flex !important;
  margin-top: 10px !important;
}

.nav-footer li {
  margin-right: 20px !important;
}

.nav-footer a {
  text-decoration: none !important;
  font-weight: 700 !important;
  color: #111 !important;
}

.copyright {
  display: block !important;
  font-size: 12px !important;
  margin-top: 30px !important;
}

footer .center {
  padding: 0 !important;
  margin-top: 20px;
}

footer .center img {
  height: auto;
  max-width: 100%;
}

/* ============================================
   BREADCRUMB LEGACY LAYOUT - Restore original position/width
   For: index.html, interviewHS.html, interviewNK.html, interviewRY.html, interviewYO.html
   ============================================ */

/* Restore original breadcrumb layout to match sogo-kappa.vercel.app/recruit/ */
body.breadcrumb-legacy .pankuzu {
  width: 700px !important;
  max-width: 100% !important;
  margin: 30px auto 0 auto !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 !important;
  padding-top: 30px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  box-sizing: border-box !important;
}

/* Ensure first span starts at the same position as h1 */
body.breadcrumb-legacy .pankuzu span:first-child {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Override mobile styles from sp.css - must come after sp.css loads */
@media screen and (max-width: 750px) {
  body.breadcrumb-legacy .pankuzu {
    width: 100% !important;
    max-width: 100% !important;
    margin: 30px auto 0 auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 20px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
  }
}