body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
}


header {
    background-color: #093232;
    box-shadow: 0 2px 4px rgba(11, 11, 11, 0.504);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transition: transform 0.3s ease-in-out;
    z-index: 10; /* Ensures header/footer stay above the image */

    
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    height: 100px;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.menu {
    list-style-type: none;
    display: flex;
    margin: 0;
    padding: 0;
}

.menu-logo {
    width: 200px;
    height: auto;
    object-fit: contain;
}

.menu-item {
    position: relative;
    margin-left: 50px;
    white-space: nowrap;
}

.menu-item > a {
    text-decoration: none;
    color: #c5a9a9;
    font-size: 1.2em; /* Increase font size */
    padding: 10px 0; /* Add padding for a larger clickable area */
    transition: color 0.3s;
}

.menu-item > a:hover, .menu-item > a.active {
    color: #f68c3b;
}

.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    padding: 10px 0;
    min-width: 180px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.3s, display 0.3s;
}

.submenu.show {
    display: block !important;  /* 明示的に display: block を指定 */
    opacity: 1 !important;      /* opacity も確実に変更 */
}

.submenu-item {
    display: block;
    padding: 5px 20px;
    color: #333;
    text-decoration: none;
    transition: background-color 0.3s;
}

.submenu-item:hover {
    background-color: #f0f0f0;
    color: #f68c3b;
}


/* Show the mobile menu toggle button only on mobile screens */
.menu-toggle {
    display: none;
    font-size: 1.5em;
    background: none;
    border: none;
    color: #c5a9a9;
    cursor: pointer;
}

/* Hide the mobile menu by default */
.mobile-menu {
    display: none;
}

main {
    flex-grow: 1; /* Main content takes up the remaining space */
    display: flex;
    flex-direction: column;
}

footer {
    background-color: #406e79;
    padding: 40px 20px; /* Added horizontal padding for better spacing on smaller screens */
    margin-top: auto;
    z-index: 5;
    color: #fff; /* Ensure text is visible on dark background */
    font-family: Arial, sans-serif; /* Optional: Set a font for consistency */
}

/* Main Footer Content */
.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between; /* Distribute space between left and right */
    align-items: center;
    flex-wrap: wrap; /* Allow items to wrap on smaller screens */
}

/* Left and Right Sections */
.left, .right {
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* Allow items to wrap if necessary */
}

/* Logo Container Adjustments */
.company-logo {
    width: 200px; /* Adjusted width for better responsiveness */
    height: auto;
    object-fit: contain;
    margin-right: 15px; /* Space between logos */
}

.rikadai {
    width: 100px;
    height: auto;
    object-fit: contain;
    margin-left: 15px; /* Space before Rikadai logo */
}

/* Social Icons */
.social-icon {
    width: 40px;
    height: 40px;
    margin: 0 10px;
    object-fit: contain;
}

@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        align-items: center;
    }

    .left, .right {
        justify-content: center;
        margin-bottom: 20px;
    }

    .company-logo, .rikadai, .social-icon {
        margin: 5px;
    }
}

.footer-bottom {
    text-align: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #8e8381;
    color: #8e8381;
    
}
.footer-bottom a {
    color: #bc918a; /* 黄色のリンク */
    text-decoration: none;
}

a:hover {
    color: #e5ada4; /* マウスオーバー時、少し濃い黄色 */
    text-decoration: underline;
  }

.header-hidden {
    transform: translateY(-100%);
}

/*以下layout2

/* Banner */
.banner {
    
    position: relative;
    width: 100%;
    padding-top: 100px ;
    box-sizing: border-box; /* パディングを含めたサイズ計算 */
}

.banner img {
    width: 100%;
    height: auto;
    object-fit: cover; /* Makes sure the image covers the whole banner area */
    display: block;
}

/* Navbar (from menu.html) */
.navbar ul {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 10px;
    background-color: #fceae0;
}

.navbar a {
    text-decoration: none;
    color: #d94f2b;
    padding: 10px 20px;
}

/* Sidebar Container */
.sidebar-container {
    display: flex;
    align-items: flex-start;
    padding: 20px;
}

/* Sidebar */
.sidebar {
    position: sticky;
    top: 110px; /* Space between the top of the viewport and the sidebar */
    min-width: 200px;
    max-width: 300px;
    padding: 10px; /* Adjust padding to ensure proper text alignment */
    margin-right: 80px;
    margin-left: 30px;
    height: 400px; /* Set a fixed height to ensure the scrollbar appears */
    overflow-y: auto; /* Add a vertical scrollbar if content overflows */
    word-wrap: break-word;
    background-color: #406e79;
    border-radius: 4px; /* Optional: add border radius */

}
/* Optional: Add custom scrollbar styling for WebKit browsers (Chrome, Safari) */
.sidebar::-webkit-scrollbar {
    width: 8px;
}

.sidebar::-webkit-scrollbar-track {
    background: #bc918a;
}

.sidebar::-webkit-scrollbar-thumb {
    background-color: #ffffff7f;
    border-radius: 4px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background-color: #093232;
}

/* Sidebar List */
.sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar .main-link a {
    display: block;
    font-size: 1.2em;
    font-weight: bold;
    color: #e8b1a9; /* Darker color for main links */
    padding: 8px;
    border-radius: 4px;
    margin-bottom: 5px;
    line-height: 1.2; /* Reduce line height */
    text-decoration: none;
}

/* Sub-links */
.sidebar .sub-links {
    list-style: none; /* Remove default bullet points */
    padding: 0;
    margin: 0 0 0 20px; /* Indent sub-links */
}

.sidebar .sub-links li a {
    display: block;
    font-size: 1em;
    color: #bc918a; /* Lighter color for sub-links */
    padding: 3px 0;
    line-height: 1.2; /* Reduce line height */
    text-decoration: none;
}


.sidebar .main-link a:hover {
    color: #fcc4bce3;
}

/* Hover effect for sub-links */
.sidebar .sub-links li a:hover {
    color: #fcc4bce3;
}



/*スマホ版 */
@media (max-width: 1136px) {
    nav {
        height: 70px;
    }
    .nav-container {
        justify-content: space-between;
        padding: 0 10px; /* Adjust padding for mobile */
    }
    
    .menu {
        display: none;
    }
    .menu-logo {
        width: 150px; /* Adjust the logo size for mobile */
    }
    .menu-toggle {
        display: block;
    }

    .mobile-menu {
        display: none;
        flex-direction: column;
        background-color: #093232;
        position: absolute;
        top: 76%;
        left: 0;
        right: 0;
        width: 100%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        z-index: 20; /* Ensure it appears above other content */
    }

    .mobile-menu.active {
        display: flex;
    }

    .mobile-menu .menu-item {
        border-bottom: none; /* 下側の線を削除 */
        list-style-type: none; /* 黒丸を消す */
        margin: 0;
        padding: 10px 20px;
        border-top: 1px solid rgba(197, 169, 169, 0.2);
    }

    .mobile-menu .menu-item > a {
        color: #c5a9a9;
        font-size: 1em;
        display: block;
        width: 100%;
    }

    .mobile-menu .submenu {
        display: none;
        position: relative; /* モバイル版では絶対位置ではなく相対位置に */
        background-color: #0b4545;
        border: 1px solid #f78700f0; /* 枠線を追加 */
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        padding: 10px 0;
        margin-top: 10px; /* 上部に余白を追加 */
        border-radius: 5px; /* 角を丸くする */
        list-style-type: none; /* サブメニューの黒丸を消す */
        padding-left: 0; /* サブメニューの左側の余白を削除 */
        max-width: 90%; /* 横幅が大きくなりすぎないように制限 */
    }
    .mobile-menu .submenu.active {
        display: block;
    }

    .mobile-menu .submenu-item {
        border-bottom: none; /* 下側の線を削除 */
        list-style-type: none; /* サブメニュー項目の黒丸を消す */
        padding: 10px 20px; /* 余白を調整 */
        color: #d3d2d2;
        text-decoration: none;
        transition: background-color 0.3s;
    }

    .sidebar {
        display: none; /* Hides the sidebar on mobile screens */
    }

    .banner {
        padding-top: 70px;
    }
    .banner img {
        width: 100%; /* 画像の幅をコンテナに合わせる */
        height: 300px; /* スマホ版での高さを制限 */
        object-fit: cover; /* 画像をコンテナ全体に収める */
    }
    .sidebar-container {
        margin-top: 0;
    }
}