/* ================================================= */
/* 共通スタイル (PC向けサイドバーと基本設定) */
/* ================================================= */
.main-sidebar {
    width: 240px;
    margin-right: 30px;
	margin-bottom: 40px;
}
.main-sidebar .sidebar-menu a.is-active {
    color: #ffffff !important;
    background-color: #003A79 !important;
}
.main-sidebar .sidebar-menu a.is-active::after{
	content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: .6em;
  display: block;
  margin: auto;
  width: 8px;
  height: 8px;
  background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012%2020%22%3E%3Cpath%20d%3D%22M521.233%2C5815L531%2C5805l-9.767-10L519%2C5797.25l7.564%2C7.75L519%2C5812.74Z%22%20transform%3D%22translate%28-519%20-5795%29%22%20style%3D%22fill%3A%20%23fff%3Bfill-rule%3A%20evenodd%3B%22%2F%3E%3C%2Fsvg%3E') no-repeat center;
  background-size: contain;
}

/* PC環境ではモバイル要素は非表示 */
.mobile-header,
.mobile-menu-overlay {
    display: none;
}
.sidebar-content {
    width: 240px;
    position: sticky;
    top: 20px;
    /* 縦方向のスクロールを有効にする (変更なし) */
    overflow-y: auto; 
    max-height: calc(100vh - 40px); 
    
    /* スクロールバー非表示のための追加 */
    /* 1. Internet Explorer, Edge (旧Edge) */
    -ms-overflow-style: none;
    /* 2. Firefox */
    scrollbar-width: none;
}

/* 3. Chrome, Safari, Opera, Edge (Chromium版) のための擬似要素 */
.sidebar-content::-webkit-scrollbar {
    display: none;
}
.main-sidebar .sidebar-logo {
    margin-left: auto;
    margin-right: auto;
    width: 180px;
    background-color: transparent;
}
.main-sidebar .sidebar-logo .logo-text-top {
    font-size: 1.4em;
    font-weight: bold;
    color: #c90032;
    display: block;
}
.main-sidebar .sidebar-logo .logo-text-sub {
    font-size: 0.7em;
    color: #666;
    display: block;
    margin-top: 3px;
}
.additional-menu {
    margin-top: 5px;
}
.sidebar-menu{
	padding-bottom: .2em;
}
.sidebar-menu a {
    background: #fff;
    display: block;
    padding: .7em 1em .7em 1.2em!important;
    color: #000;
    font-size: 14px!important;
    position: relative;
}
.sidebar-menu a small{
	padding-left: .6em;
    font-size: 13px!important;
}
.sidebar-menu a::after {
	content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: .6em;
  display: block;
  margin: auto;
  width: 8px;
  height: 8px;
  background: url('data:image/svg+xml,%3Csvg%20id%3D%22a%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%207.12%2011.41%22%3E%3Cpath%20id%3D%22b%22%20d%3D%22m.71%2C10.71l5-5L.71.71%22%20style%3D%22fill%3Anone%3B%20stroke%3A%23000%3B%20stroke-width%3A2px%3B%22%2F%3E%3C%2Fsvg%3E') no-repeat center;
  background-size: contain;
}
.sidebar-menu a.is-external::after {
  background: url('data:image/svg+xml,%3Csvg%20id%3D%22a%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2013.19%2013.17%22%3E%3Cpath%20d%3D%22m11.53%2C0h-6.59c-.44%2C0-.86.16-1.17.47-.31.3-.48.72-.47%2C1.15v6.61c0%2C.44.17.86.48%2C1.16.31.32.73.49%2C1.17.48h6.58c.44%2C0%2C.86-.17%2C1.17-.48.32-.3.5-.72.49-1.16V1.64c0-.44-.17-.86-.49-1.16C12.39.17%2C11.97%2C0%2C11.53%2C0Zm0%2C8.23h-6.58V1.64h6.58v6.59ZM1.66%2C6.58H0v4.94c0%2C.44.17.87.49%2C1.17.31.31.73.49%2C1.17.48h4.94v-1.66H1.66v-4.94Z%22%20style%3D%22stroke-width%3A0px%3B%22%2F%3E%3C%2Fsvg%3E') no-repeat center;
  background-size: contain;
}
.sidebar-menu a:hover {
    background-color: #f9f9f9;
}
.menu-link-top a{
    padding-top: .8em!important;
}
.sidebar-menu.menu-support a{
	margin-bottom: 4em;
}

.header-btn {
    width: 150px;
    margin-left: auto;
    margin-right: auto;
}

.header-btn a {
    display: block; 
    text-align: center;
}

/* login btn */
.login-area{
  padding: 30px 0 20px 0;
    text-align: center;
}
.header-login-btn-1 {
    width: 110px;
    display: block;
    margin: 0 auto;
    box-sizing: border-box;
    font-size: 14px;
    border-radius: 5px;
    text-align: center;
    padding: 5px 0;
    color: #fff;
    background: #003A79;
}
.header-login-btn-2 {
    width: 110px;
    display: block;
    margin: 0 auto;
    box-sizing: border-box;
    font-size: 14px;
    border-radius: 5px;
    text-align: center;
    padding: 5px 0;
    border: 1px solid #003A79;
    background: #fff;
    color: #003A79;
}
.login-box {
    background-color: rgb(247, 240, 227); 
    padding: 45px 15px 30px 15px; 
    text-align: center;
    border-bottom: 1px solid #ddd;
}

.login-box button {
    background-color: rgb(1, 1, 89);
    color: #fff;
    border: none;
    padding: 5px 20px; 
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    width: 50%;
}


/* ================================================= */
/* モバイル対応 (768px 以下) */
/* ================================================= */
@media (max-width: 768px) {
    body{
        padding-top: 65px;
    }
    .main-sidebar {
        display: none;
    }
    .main-sidebar, .main-sidebar .sidebar-content {
        position: static !important;
        top: auto !important;
        margin: 0 !important;
    }
    .sidebar-menu a {
        padding: 1.2em 1em 1.2em 1.8em;
        background-color: #fff;
        margin-bottom: 1px;
    }
    
    /* ------------------------------------- */
    /* 1. モバイルヘッダーの表示と固定 */
    /* ------------------------------------- */
    .mobile-header {
        display: flex;
        align-items: center;
        justify-content: space-between;        
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;        
        z-index: 200;
        padding: 10px 20px;
        box-sizing: border-box;
        background: #F5EFEA; 
        border-bottom: 1px solid #fff;
		z-index: 1000;
    }
    
    body.menu-open .mobile-header {
        background: #fff; 
    }

    .mobile-header .sidebar-logo {
        padding: 0;
        margin-right: auto;
        width: 120px;
        height: 35px;
        background-color: transparent; 
    }
    .mobile-header .sidebar-logo-image {
        height: 100%;
        background-position: center left; 
    }
    .mobile-header .login-box {
        padding: 0;
        margin-left: 10px;
        background-color: transparent; 
        border-bottom: none;
    }
    .mobile-header .login-box button {
        padding: 5px 10px;
        font-size: 0.8em;
        width: auto;
    }
    
    /* ------------------------------------- */
    /* 2. ハンバーガーアイコンのアニメーション */
    /* ------------------------------------- */
    .hamburger-menu-icon {
        display: block;
        width: 30px;
        height: 30px;
        position: relative;
        cursor: pointer;
        margin-left: 15px;
        flex-shrink: 0;
        z-index: 101; 
    }
    .hamburger-menu-icon::before,
    .hamburger-menu-icon::after,
    .hamburger-icon-line {
        content: '';
        display: block;
        width: 100%;
        height: 3px;
        background-color: #333; 
        border-radius: 1.5px;
        position: absolute;
        transition: all 0.3s ease; 
    }
    .hamburger-menu-icon::before { top: 0; }
    .hamburger-icon-line { top: 50%; transform: translateY(-50%); }
    .hamburger-menu-icon::after { bottom: 0; }
    
    /* JSが body.menu-open を付与するため、アイコンが変化します */
    .menu-open .hamburger-menu-icon::before { 
        top: 50%; 
        transform: translateY(-50%) rotate(45deg); 
    }
    .menu-open .hamburger-icon-line { 
        opacity: 0; 
    }
    .menu-open .hamburger-menu-icon::after { 
        top: 50%; 
        transform: translateY(-50%) rotate(-45deg); 
    }
    .menu-open .hamburger-menu-icon {
        z-index: 1000; 
    }

    /* login btn */
    .login-area{
        padding: 0;
        text-align: center;
    }

    /* ------------------------------------- */
    /* 3. モバイルメニューオーバーレイ (CSSアニメーションによる縦スライド) */
    /* ------------------------------------- */
    .mobile-menu-overlay {
        /* JSで display: block/none を切り替えるため、高さは max-height で制御 */
        position: fixed;
        top: 65px; 
        left: 0;
        width: 100%;
        bottom: 0;
        max-height: 100vh;
        
        background-color: #fff; 
        z-index: 2000; 
        
        /* 縦スクロールを有効化 */
        overflow-y: auto; 
        overflow-x: hidden;

        padding-bottom: 30px;
        
        /* 初期非表示状態と transition */
        visibility: hidden; 
        opacity: 0; 
        /* 画面上端外側からスタート */
        transform: translateY(-100%); 
        
        /* transition は JSの SLIDE_DURATION = 300ms と同期 */
        transition: transform 0.3s ease-out, 
                    opacity 0.3s ease-out, 
                    visibility 0s 0.3s; /* 非表示時に遅延して visibility: hidden */
    }
    .mobile-menu-overlay .sidebar-menu {
        display: block;
        margin: 0;
		border-top: 1px solid #ddd;
    }
	.mobile-menu-overlay .sidebar-menu.smenu-link-top{
		margin-top: .5em;
		border-top: none;
	}
	.mobile-menu-overlay .sidebar-menu{
		padding: .5em;
		padding-bottom: .5em;		
	}
	.mobile-menu-overlay .sidebar-menu.additional-menu{
		padding: .8em;
	}
	.mobile-menu-overlay .sidebar-menu a{
		padding-top: 1em;
		padding-bottom: 1em;
	}
	.mobile-menu-overlay .sidebar-menu li a span{
		padding-left: 1.5em;
		font-size: 90%;
	}
	.mobile-menu-overlay .sidebar-menu.menu-support{
		border-top: none;
	}
	.mobile-menu-overlay .sidebar-menu.menu-support a{
		border: 1px solid #ddd;
		padding-top: 1.5em;
		padding-bottom: 1.5em;
	}
    
    /* ------------------------------------- */
    /* 4. メニューオープン時のアニメーション */
    /* ------------------------------------- */
    .menu-open .mobile-menu-overlay {
        visibility: visible;
        opacity: 1;
        /* 表示時は元の位置 (top: 65px) へ */
        transform: translateY(0); 
    
        /* transition は JSの SLIDE_DURATION = 300ms と同期 */
        transition: transform 0.3s ease-out, 
                    opacity 0.3s ease-out, 
                    visibility 0s 0s; /* 表示時は visibility の遅延なし */
    }
    
    body.menu-open {
        overflow: hidden; /* 背景のスクロールを禁止 */
    }
    
    /* ------------------------------------- */
    /* 5. モバイルメニューオーバーレイ内の要素レイアウト (リセット状態) */
    /* ------------------------------------- */
    
    /* PC用のサイドバーメニューリストは非表示（元のコードを維持）*/
    .sidebar-menu, .sidebar-content > ul {
        display: none; 
    }

    /* 以前の横並びに関するスタイルは全て削除 (HTML構造に依存) */
    .mobile-menu-overlay .sidebar-logo,
    .mobile-menu-overlay .login-area,
    .mobile-menu-overlay .mobile-menu-header-area {
        display: none; 
    }
    
    /* ログインボタンのサイズ調整 */
    .header-login-btn-1, .header-login-btn-2 {
      width: 100px;
      margin: 10px auto;
    }
    
    /* ログインボタンの調整 */
    .mobile-menu-overlay .header-btn,
    .mobile-menu-overlay .header-no {
        display: block; 
        width: auto;
    }
    
    .mobile-menu-overlay .header-login-btn-1, 
    .mobile-menu-overlay .header-login-btn-2 {
      width: 80px; 
      font-size: 13px;
      padding: 5px 0;
      margin: 0; 
      display: block; 
    }
}