/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

/* General Styles */
html {
    scroll-behavior: smooth; /* Enable smooth scrolling */
}

body {
    font-family: 'Noto Sans JP', sans-serif; /* Apply Noto Sans JP */
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4; /* Light Gray */
    color: #333;
}

.container {
    width: 80%;
    margin: auto;
    overflow: hidden;
    padding: 20px 0;
}

/* Header */
header {
    background: #2c3e50; /* Dark Blue */
    color: #fff;
    padding: 10px 0; /* Adjust padding */
    border-bottom: #1abc9c 3px solid; /* Teal Green */
    position: relative; /* Add position relative for z-index context */
    z-index: 100; /* Ensure header is above other content */
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: visible; /* Allow dropdown to be visible */
}

header h1 {
    margin: 0;
    padding: 0;
}

header .logo img {
    height: 40px; /* Adjust as needed */
}

header nav {
    margin-top: 0; /* Remove margin */
}

header ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

header li {
    display: inline-block; /* Changed from inline to inline-block */
    padding: 0 15px;
}

header a {
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 16px;
}

header a:hover {
    color: #1abc9c; /* Teal Green */
    font-weight: bold;
}

/* Hamburger Menu */
.hamburger-btn {
    display: none; /* Hidden by default */
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

.hamburger-btn span {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px 0;
    background-color: white;
    transition: 0.4s;
}

/* Dropdown Menu */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #2c3e50; /* Dark Blue */
    min-width: 220px; /* Adjust as needed */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #34495e;}

.dropdown:hover .dropdown-content {
    display: block;
}

/* Hero Section (Slideshow) */
.slideshow-container {
    position: relative;
    width: 100%; /* Full width */
    height: 60vh; /* Use viewport height for responsiveness */
    margin: 0; /* Remove auto margin to ensure full width */
    overflow: hidden; /* Hide overflowing slides */
    padding-top: 0; /* Remove top padding to close gap */
}

.slides-wrapper {
    display: flex; /* Arrange slides in a row */
    width: 500%; /* 100% * number of slides (5 in this case) */
    height: 100%;
    transition: transform 1s ease-in-out; /* Smooth sliding transition */
}

.mySlides {
    flex: 1; /* Each slide takes 100% of the container's width */
    flex-shrink: 0; /* Prevent slides from shrinking */
    position: relative;
    height: 100%;
}

.mySlides img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the entire container */
}

.mySlides::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Black overlay with 70% opacity */
    z-index: 1;
}

.hero-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white; /* Ensure all text inside is white */
    text-align: center;
    z-index: 2; /* Ensure text is above overlay */
    padding: 20px;
    max-width: 80%;
}

.hero-text h2 {
    font-size: 3.5em;
    margin-bottom: 15px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
    color: white; /* Explicitly set to white */
}

.hero-text p {
    font-size: 1.5em;
    margin-bottom: 30px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
    color: white; /* Explicitly set to white */
}

.btn {
    display: inline-block;
    color: #fff;
    background: #1abc9c; /* Teal Green */
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    transition: background 0.3s ease;
    border: none; /* Ensure it looks like a button */
    cursor: pointer; /* Indicate it's clickable */
}

.btn:hover {
    background: #16a085;
}

/* Next & previous buttons */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 24px; /* Larger arrows */
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    z-index: 3; /* Ensure buttons are above text and overlay */
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
    background-color: rgba(0,0,0,0.8);
}

/* Dots */
.dot-container {
    text-align: center;
    position: absolute;
    bottom: 50px; /* Position over the image */
    width: 100%;
    z-index: 3;
}

.dot {
    cursor: pointer;
    height: 10px; /* Smaller size */
    width: 10px; /* Smaller size */
    margin: 0 3px;
    background-color: #f1f1f1; /* Initial color white */
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.dot.active, .dot:hover {
    background-color: #888; /* Active/hover color gray */
}

/* Sections */
section {
    padding: 40px 0;
    margin-bottom: 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

section h2 {
    text-align: center;
    font-size: 2.5em;
    margin-bottom: 30px;
    color: #2c3e50; /* Dark Blue */
}

/* Service Section Specific Styles */
.service-section {
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

.service-section:last-child {
    border-bottom: none;
}

.service-section h3 {
    text-align: center;
    font-size: 2em;
    margin-bottom: 20px;
    color: #1abc9c; /* Teal Green */
}

/* Feature Grid */
.feature-grid, .service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.single-item-grid {
    grid-template-columns: 1fr; /* Single column */
    max-width: 500px; /* Adjust as needed */
    margin: 30px auto; /* Center the grid */
}

.feature-item, .service-item {
    background: #f9f9f9;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add transition for hover effect */
}

.feature-item:hover, .service-item:hover {
    transform: translateY(-5px); /* Move card up on hover */
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); /* Increase shadow on hover */
}

.feature-item h4, .service-item h4 {
    color: #2c3e50; /* Dark Blue */
    margin-bottom: 10px;
}

/* How To Use */
.how-to-use ol {
    list-style: decimal;
    margin-left: 20px;
}

.how-to-use ul {
    list-style: disc;
    margin-left: 20px;
}

.how-to-use li {
    margin-bottom: 10px;
}

.how-to-use .note {
    font-style: italic;
    color: #666;
    margin-top: 20px;
}

/* Company Info Table */
.company-info table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.company-info th,
.company-info td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.company-info th {
    background-color: #f2f2f2;
    width: 30%;
}

/* Contact Form */
.contact form {
    max-width: 600px;
    margin: auto;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.form-group textarea {
    resize: vertical;
}

.g-recaptcha-container {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
}

/* Footer */
footer {
    background: #2c3e50; /* Dark Blue */
    color: #fff;
    text-align: center;
    padding: 20px 0;
    margin-top: 20px;
}

.footer-link {
    color: #1abc9c;
    text-decoration: none;
}

.footer-link:hover {
    text-decoration: underline;
}

/* Back to Top Button */
#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button at the right side */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #1abc9c; /* Teal Green */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 50%; /* Make it round */
    font-size: 24px; /* Increase font size for arrow */
    line-height: 0; /* Adjust line height for perfect circle */
    width: 50px; /* Fixed width for circle */
    height: 50px; /* Fixed height for circle */
    display: flex; /* Use flexbox for centering arrow */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
}

#myBtn:hover {
    background-color: #16a085;
}

/* Page Content Styles */
.page-content {
    background: #fff;
    padding: 40px;
    margin-top: 20px;
    border-radius: 8px;
}

.page-content h2 {
    color: #2c3e50;
}

.page-content h3 {
    color: #1abc9c;
    margin-top: 30px;
}

.page-content .date {
    text-align: right;
    color: #777;
    margin-bottom: 20px;
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        width: 95%;
    }

    header .container {
        flex-wrap: nowrap; /* Prevent wrapping */
        align-items: center; /* Vertically center items */
    }

    header nav {
        display: none; /* Hide nav by default on mobile */
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #2c3e50;
        text-align: center; /* Center menu items */
    }

    header nav.active {
        display: block; /* Show nav when active */
    }

    header ul {
        flex-direction: column;
    }

    header li {
        display: block; /* Make menu items block level */
        padding: 10px 0;
        text-align: center;
        border-top: 1px solid #444;
    }

    .dropdown-content {
        position: static; /* Remove absolute positioning */
        display: none; /* Hide by default */
        background-color: #3a536b;
        box-shadow: none;
    }

    .dropdown:hover .dropdown-content {
        display: none; /* Disable hover effect on mobile */
    }

    .dropdown.active .dropdown-content {
        display: block; /* Show on active */
    }

    .hamburger-btn {
        display: block; /* Show hamburger button on mobile */
    }

    header .logo img {
        height: 35px; /* Smaller logo for mobile */
    }

    .hero-text h2 {
        font-size: 1.8em; /* Smaller font size for mobile */
    }

    .hero-text p {
        font-size: 1.1em; /* Smaller font size for mobile */
    }

    section h2 {
        font-size: 2em;
    }

    .service-section h3 {
        font-size: 1.7em;
    }

    .feature-item h4 {
        font-size: 1.2em;
    }

    .btn {
        padding: 8px 15px; /* Smaller padding for mobile buttons */
        font-size: 0.9em; /* Smaller font size for mobile buttons */
    }

    .slideshow-container {
        height: 50vh; /* Adjust height for smaller screens */
    }
}