/* Base Styles */
html, body { height: 100%; }
body {
    font-family: 'Zen Kaku Gothic New', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #F2F3F4;
    color: #444C55;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Header (shared across all pages) */
.site-header {
    background-color: #FFFFFF;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 50;
    position: -webkit-sticky;
}

/* container for nav; note: the logo and recruit button are positioned outside via absolute */
.header-content {
    display: flex;
    justify-content: flex-end; /* push nav to the right side of the container */
    align-items: center;
    padding: 15px 0;
    /* reserve space for the absolutely positioned recruit button */
    /* reduced from 160px to bring the nav closer to the recruit button */
    padding-right: 90px;
}

/* Logo block flush-left of the page (outside centered container) */
.site-header { position: relative; }
.logo-outside {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    padding-left: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.logo-outside a { display: flex; align-items: center; gap: 12px; }
.header-logo-icon { height: 45px; width: auto; }
.company-text { display: flex; flex-direction: column; line-height: 1.2; }
.company-name-en { font-size: 13px; font-weight: 500; }
.company-type { font-size: 11px; font-weight: 400; }

/* Navigation */
.top-nav ul { display: flex; gap: 0; }
.top-nav li a {
    display: block;
    padding: 10px 20px;
    font-size: 14px;
    color: #444C55;
    position: relative;
    font-weight: 500;
    transition: color 0.3s ease;
}
.top-nav li a::after {
    content: '';
    position: absolute; left: 50%; bottom: 5px; transform: translateX(-50%);
    width: 0; height: 3px; background-color: #154994; transition: width 0.3s ease;
}
.top-nav li a:hover, .top-nav li a.active { color: #154994; }
.top-nav li a:hover::after, .top-nav li a.active::after { width: 70%; }

/* Recruit button pinned to the far right of the header */
.recruit-btn {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    background-color: #218CD9;
    color: #FFFFFF;
    padding: 12px 25px;
    border-radius: 3px;
    font-size: 14px;
    white-space: nowrap;
    font-weight: 500;
    transition: background-color 0.3s ease;
}
.recruit-btn:hover { background-color: #154994; }

/* -------- Mobile Navigation (home page only) -------- */
/* Base button (hidden on desktop) */
.hamburger{display:none}
.hamburger{position:relative; width:48px; height:48px; border-radius:50%; border:2px solid #154994; background:#fff; color:#154994; display:inline-flex; align-items:center; justify-content:center; margin-left:10px}
.hamburger .bar, .hamburger .bar::before, .hamburger .bar::after{content:""; display:block; width:20px; height:2px; background:#154994; position:absolute; transition:.2s ease}
.hamburger .bar{transform:translateY(0)}
.hamburger .bar::before{transform:translateY(-6px)}
.hamburger .bar::after{transform:translateY(6px)}
.hamburger.is-open .bar{background:transparent}
.hamburger.is-open .bar::before{transform:rotate(45deg)}
.hamburger.is-open .bar::after{transform:rotate(-45deg)}

/* Fullscreen overlay menu */
.mobile-menu{position:fixed; inset:0; background:linear-gradient(180deg,#154994 0%, #2061B3 100%); z-index:60; display:none}
.mobile-menu .mobile-menu-inner{padding:76px 18px 22px}
.mobile-menu ul{list-style:none; margin:0; padding:0}
.mobile-menu li{padding:18px 8px; position:relative}
.mobile-menu li+li{border-top:1px solid rgba(255,255,255,.35)}
.mobile-menu a{color:#fff; text-decoration:none; display:block; text-align:center; font-weight:800; font-size:20px; letter-spacing:.06em}
.mobile-menu .mobile-cta{display:block; margin:24px auto 0; max-width:320px; text-align:center; color:#154994; background:#fff; border-radius:999px; padding:14px 22px; font-weight:800; position:relative}
.mobile-menu .mobile-cta .arrow{position:absolute; right:16px; display:inline-grid; place-items:center; width:28px; height:28px; border-radius:50%; border:2px solid #c7d6ef}

/* Only enable mobile nav on the home page and small screens */
@media (max-width: 768px){
    body#top .top-nav{display:none}
    body#top .recruit-btn{display:none}
    body#top .hamburger{display:inline-flex}
    body.menu-open{overflow:hidden}
    body.menu-open #mobile-menu{display:block}
}

/* Hero Section */
.hero-section {
    background: url('images/hero-bg.jpg') no-repeat center center;
    background-size: cover;
    text-align: center;
    padding: 100px 20px;
}

/* Products Section */
.products-section {
    background-color: #FFFFFF;
    padding: 50px 20px;
}

/* Back to Top Button (match reference) */
.back-to-top-btn {
    /* position set when placed inside footer */
    width: 60px;
    height: 60px;
    background-color: #154994; /* deep navy */
    border: 3px solid #FFFFFF; /* thin bright ring */
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 12px; /* TOP text */
    font-weight: 600;
    letter-spacing: 0.5px;
    /* Use a subtle drop shadow and an outline so we don't extend the page height */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.28);
    outline: 5px solid rgba(255, 255, 255, 0.25);
    outline-offset: 0;
    z-index: 3;
}

/* Upward arrow above TOP text */
.back-to-top-btn::before { 
    content: '\2191'; /* ↑ */
    display: block;
    font-size: 18px;
    line-height: 1;
    margin-bottom: 2px;
}

.back-to-top-btn:hover { filter: brightness(1.05); }

/* Pin the TOP button to the footer's top-right and make it overlap slightly */
.site-footer { position: relative; }
.site-footer .back-to-top-btn {
    position: absolute;
    right: 22px;
    top: -30px; /* center of the 60px circle sits exactly on the section boundary */
}

/* Footer */
.site-footer {
    background-color: #154994;
    color: #FFFFFF;
    padding: 50px 20px;
    position: relative;
    margin-top: auto; /* ensure footer pins to bottom when page content is short */
    overflow: visible; /* allow TOP button to overlap above footer */
}

.site-footer::before {
    content: 'G';
    position: absolute;
    bottom: 0; /* avoid extending below footer to prevent extra page space */
    left: 50px;
    font-size: 450px;
    color: rgba(255, 255, 255, 0.03);
    z-index: 1;
}

/* Safety overlay: extend footer color a few pixels beyond the bottom
   to mask any sub-pixel gaps from device rounding/zoom */
.site-footer::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -26px; /* overlap into page background */
    height: 26px;
    background-color: #154994;
    z-index: 1;
    pointer-events: none;
}

.footer-content {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 50px 0;
}

.company-info {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.footer-logo-g {
    width: 60px;
    height: auto;
    margin-bottom: 10px;
}

.company-name {
    font-size: 16px;
    font-weight: 500;
    margin: 0;
}

.company-address,
.company-tel-fax {
    font-size: 14px;
    margin: 0;
    line-height: 1.6;
}

.footer-nav ul {
    display: flex;
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-nav a {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 14px;
    transition: opacity 0.3s;
}

.footer-nav a:hover {
    opacity: 0.8;
}

.copyright-bar {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.privacy-policy {
    color: #FFFFFF;
    text-decoration: none;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.privacy-policy::after {
    content: '□';
    font-size: 10px;
}

.copyright {
    color: #FFFFFF;
    font-size: 12px;
    margin: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .header-content { justify-content: space-between; padding-right: 0; flex-wrap: wrap; }
    .logo-outside { position: static; transform: none; padding-left: 0; margin-bottom: 8px; }
    .top-nav ul { flex-wrap: wrap; gap: 12px; }
    .recruit-btn { position: static; transform: none; margin-left: 8px; margin-top: 6px; }
    .back-to-top-btn { width: 56px; height: 56px; font-size: 11px; }
    .back-to-top-btn::before { width: 10px; height: 10px; }
    .back-to-top-btn::after { height: 12px; margin-top: -7px; }
}

/* Make the main content take available space so footer sticks to bottom */
main { flex: 1 0 auto; }