@charset "UTF-8";
/*
Template: arkhe
Theme Name: arkhe-child
Theme URI: https://arkhe-theme.com/ja/
Description: Arkhe用子テーマ
Version: 1.0.0
Text Domain: arkhe
License: GNU General Public License
License URI: http://www.gnu.org/licenses/gpl.html
*/

/* サイドバー付きのメインレイアウト */
.l-content__body--with-sidebar {
    display: flex;
    gap: 32px;
}

/* サイドバーのスタイル */
.l-sidebar {
    flex-shrink: 0;
    width: 250px;
    background-color: #fff;
    padding: 20px 0;
    border-right: 1px solid var(--ark-color--border);
}

/* サイドバー付きのメインコンテンツエリア */
.l-content__body--with-sidebar .l-main {
    flex: 1;
}

/* サイドナビゲーションのスタイル */
.c-sideNav__list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: var(--ark-menulist_border, 1px solid rgba(200, 200, 200, 0.5));
}

.c-sideNav__list > li {
    border-bottom: var(--ark-menulist_border, 1px solid rgba(200, 200, 200, 0.5));
    line-height: 1.5;
    margin: 0;
    position: relative;
}

.c-sideNav__list a {
    color: inherit;
    display: block;
    font-size: var(--ark-nav_fz, 1em);
    padding: 0.75rem 1rem;
    position: relative;
    text-decoration: none;
    transition: background-color 0.2s, color 0.2s;
}

.c-sideNav__list a:hover {
    background-color: var(--ark-color--gray--hover, rgba(150, 150, 150, 0.05));
    color: var(--ark-color--main);
}

.c-sideNav__list .current-menu-item > a {
    background-color: var(--ark-color--gray--hover, rgba(150, 150, 150, 0.05));
    color: var(--ark-color--main);
    border-left: 3px solid var(--ark-color--main);
    padding-left: calc(1rem - 3px);
}

/* サブメニューのスタイリング */
.c-sideNav__list .sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px dashed var(--ark-color--border, rgba(200, 200, 200, 0.5));
}

.c-sideNav__list .sub-menu > li {
    border-bottom: none;
}

.c-sideNav__list .sub-menu:last-child {
    border-bottom: none;
}

.c-sideNav__list .sub-menu a {
    padding-left: 2rem;
    font-size: 0.9em;
}

/* モバイル用のメディアクエリ */
@media (max-width: 768px) {
    .l-content__body--with-sidebar {
        flex-direction: column;
    }
    
    .l-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--ark-color--border, rgba(200, 200, 200, 0.5));
        margin-bottom: 20px;
    }
}