@charset "UTF-8";
:root {
    --sidebar-width: 250px;
    --sidebar-background-color: #efefef;
    --sidebar-background-color-darken: #dddddd;
}


/* wrapper */

.content_wrapper {
    display: flex;
    flex-wrap: wrap;
    position: relative;
    width: 100%;
}


/* コンテンツ表示領域 */

.page-content {
    transition: width .5s ease .1s;
    width: calc(100% - var(--sidebar-width));
}

.ver2021-sidebar-area {
    background: var(--sidebar-background-color);
    right: 0;
    position: absolute;
    transition: width .5s ease .1s;
    top: 0;
    width: var(--sidebar-width);
}

#ver2021-sidebar {
    /* サイドバー色定義 */
    --sidebar-theme-color: #004b30;
    --sidebar-title-color: black;
    --sidebar-subtitle-color: var(--sidebar-theme-color);
    --sidebar-reverse-text-color: white;
    --sidebar-ver2021-block-menu-background-color: #d4d3d3;
    --sidebar-toggle-background-color: #d9ebda;
    --sidebar-sns-icon-color: #818181;
    --sidebar-sns-icon-color-hover: #a7a7a7;
    --sidebar-search-input-color: black;
    --sidebar-search-input-text-color: white;
    /* サイドバー表示領域 */
    background: var(--sidebar-background-color);
    color: var(--sidebar-title-color);
    height: 100vh;
    height: calc(100 * var(--vh-inner, 1vh));
    position: fixed;
    line-height: 1.5;
    right: 0;
    transition: right .5s ease .1s;
    top: 0;
    width: var(--sidebar-width);
    z-index: 999;
}


/* サイドバーのスクロール追従を止める */

@media (max-height: 639.98px) {
    #ver2021-sidebar {
        height: auto;
        position: absolute;
    }
}
/* サイドバー内部 */


/* サイドバーヘッダ */

#ver2021-sidebar .ver2021-sidebar-header {
    padding: 20px;
    background-color: white;
}

#ver2021-sidebar a.nav-link {
    overflow: hidden;
    padding: 5px 0;
    white-space: normal;
    width: 100%;
    word-break: keep-all;
}

#ver2021-sidebar p {
    margin-left: 30px;
    overflow: hidden;
    padding: 0;
    white-space: normal;
    word-break: keep-all;
}


/* 第一階層言語選択メニュー */

#ver2021-sidebar p.ver2021-language-title {
    color: var(--sidebar-title-color);
    font-size: 14px;
    font-weight: 400;
    margin-left: 15px;
    margin-top: 0;
    margin-bottom: 0;
}


/* 第一階層メインメニュー */

#ver2021-sidebar p.ver2021-menu-title {
    color: var(--sidebar-title-color);
    font-size: 20px;
    margin-top: 0px;
    margin-bottom: 0;
}

#ver2021-sidebar p.ver2021-menu-subtitle {
    color: var(--sidebar-subtitle-color);
    font-size: 12px;
    margin-top: 0;
    margin-bottom: 4px;
}


/* 第二階層以降メニュー */

#ver2021-sidebar p.ver2021-submenu-title {
    color: var(--sidebar-title-color);
    font-size: 14px;
    margin-top: 4px;
    margin-bottom: 4px;
}


/* 第一階層水平線下メニュー */

#ver2021-sidebar p.ver2021-undermenu-title {
    color: var(--sidebar-title-color);
    font-size: 14px;
    margin-top: 0px;
    margin-bottom: 0;
}

#ver2021-sidebar .ver2021-block-menu li {
    background: var(--sidebar-ver2021-block-menu-background-color);
    display: block;
    width: 33.333333%;
}

#ver2021-sidebar .ver2021-block-menu li:not(:last-child) {
    border-right: solid 1px var(--sidebar-background-color);
}

#ver2021-sidebar .ver2021-block-menu a {
    background: transparent;
    display: block;
    height: 70px;
    position: relative;
    width: 100%;
}

#ver2021-sidebar #ver2021-menu-group {
    padding: 0;
}

#ver2021-sidebar .ver2021-block-menu p.ver2021-block-menu-icon {
    top: 10px;
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    position: absolute;
    width: 100%;
}

#ver2021-sidebar .ver2021-block-menu p.ver2021-block-menu-text {
    bottom: 15px;
    font-size: 11px;
    font-weight: 600;
    margin: 0;
    position: absolute;
    width: 100%;
}

#ver2021-sidebar .ver2021-menu-search input {
    background: var(--sidebar-search-input-color);
    border: 0;
    border-radius: 0;
    box-sizing: border-box;
    color: var(--sidebar-search-input-text-color);
    margin: 0;
    padding: 8px 32px 8px 10px;
    width: 100%;
}

#ver2021-sidebar .ver2021-menu-search input:focus {
    outline: none;
}

/* クローム標準のオートコンプリート時の色変更を回避するCSSハック */
/* 影で覆うことで背景色を隠すイメージ */
#ver2021-sidebar .ver2021-menu-search input:-webkit-autofill,
#ver2021-sidebar .ver2021-menu-search input:-webkit-autofill:hover,
#ver2021-sidebar .ver2021-menu-search input:-webkit-autofill:focus,
#ver2021-sidebar .ver2021-menu-search input:-webkit-autofill:active  {
    box-shadow: 0 0 0 30px var(--sidebar-search-input-color) inset !important;
    -webkit-box-shadow: 0 0 0 30px var(--sidebar-search-input-color) inset !important;
}
#ver2021-sidebar .ver2021-menu-search input:-webkit-autofill {
    -webkit-text-fill-color: var(--sidebar-search-input-text-color) !important;
}

#ver2021-sidebar .ver2021-menu-search button {
    background: var(--sidebar-search-input-color);
    border: none;
    color: var(--sidebar-search-input-text-color);
    cursor: pointer;
    height: calc(1rem * 1.5 + 16px);
    position: absolute;
    right: 0;
    top: 0;
    width: 32px;
}

#ver2021-sidebar .ver2021-menu-search button:focus {
    box-shadow: none;
    outline: none;
}

#ver2021-sidebar #ver2021-menu-language li {
    background: var(--sidebar-toggle-background-color);
}

#ver2021-sidebar .ver2021-menu-group li {
    background: var(--sidebar-background-color);
    display: block;
    width: 100%;
}


/* ホバー時, トグルオープン時 */

#ver2021-sidebar li:hover,
#ver2021-sidebar li>a[aria-expanded="true"],
#ver2021-sidebar li.active {
    background: var(--sidebar-theme-color);
}


/* 白文字にする */

#ver2021-sidebar li:hover>a>p,
#ver2021-sidebar li>a[aria-expanded="true"]>p,
#ver2021-sidebar li.active>a>p {
    color: var(--sidebar-reverse-text-color);
}


/* liの子要素のulのみボーダー追加 */

#ver2021-sidebar li:hover>ul {
    border-right: solid 1px white;
}


/* ホバーメニュー */


/* 縦ナビゲーション設定 */

#ver2021-sidebar .ver2021-block-menu {
    flex-direction: row !important;
}

#ver2021-sidebar .ver2021-menu-group {
    flex-direction: column !important;
}

/* 子要素がないul非表示 */
#ver2021-sidebar .ver2021-menu-group ul:empty {
    display: none !important;
}

/* 第二階層以降のレイアウト */

#ver2021-sidebar .ver2021-menu-group .ver2021-dropdown_multilayer ul {
    background: var(--sidebar-background-color);
    opacity: 0;
    padding: 8px 0;
    /*
     * 基準位置はサイドバー左上
     * ※topはjavascriptで決定
     */
    position: absolute;
    right: var(--sidebar-width);
    /* ホバーアウト アニメーション */
    transition: opacity .3s ease-out, width 0s linear .3s, border-right 0s linear .3s;
    width: 0;
}

/* 第三階層 */
#ver2021-sidebar .ver2021-menu-group .ver2021-dropdown_multilayer ul ul {
    /* ボーダー考慮 */
    right: calc(var(--sidebar-width) - 1px);
    top: 0;
}

/* 第四階層 */
#ver2021-sidebar .ver2021-menu-group .ver2021-dropdown_multilayer ul ul ul {
    background: var(--sidebar-background-color-darken);
    opacity: 1;
    padding: 0;
    position: static;
    width: 100%;
}
#ver2021-sidebar .ver2021-menu-group .ver2021-dropdown_multilayer ul ul ul li {
    background: var(--sidebar-background-color-darken);
    padding-left: 1rem;
}
#ver2021-sidebar .ver2021-menu-group .ver2021-dropdown_multilayer ul ul ul li:hover {
    background: var(--sidebar-theme-color);
}

/* ホバー時イベント */

#ver2021-sidebar .ver2021-menu-group li:hover>ul {
    opacity: 1;
    /* ホバーイン アニメーション */
    transition: opacity .3s ease-out .2s, width 0s linear .2s, border-right 0s linear .2s;
    width: var(--sidebar-width);
}

div.ver2021-sidebar-icon-container {
    margin-top: 10px;
}

div.ver2021-sidebar-icon-container a {
    color: var(--sidebar-sns-icon-color);
    font-size: 18px;
    text-align: center;
}

div.ver2021-sidebar-icon-container a:hover {
    color: var(--sidebar-sns-icon-color-hover);
}

div.ver2021-sidebar-icon-container .ver2021-spirit-icon {
    height: 30px;
    width: auto;
}

div.ver2021-sidebar-icon-container a:not(:first-child) {
    margin-left: 20px;
}

/* style.cssと競合するため指定 */
div.ver2021-sidebar-icon-container i.fa-youtube {
    color: var(--sidebar-sns-icon-color);
}
div.ver2021-sidebar-icon-container a:hover i.fa-youtube {
    color: var(--sidebar-sns-icon-color-hover);
}

.ver2021-sidebar-icon-container .fa-lg {
    font-size: 1.7em;
    line-height: .75em;
    vertical-align: -0.0667em;
}

.justify-content-left {
    /* text-align: left; */
    justify-content: left;
    margin-left: 2.6em;
    margin-top: 1.2em !important;
}

/* sp時 */

@media (max-width: 767.98px) {
    .page-content {
        width: 100% !important;
    }
}

/* 印刷時 */
@media print {
    .ver2021-sidebar-area {
        display: none;
    }
    
    .page-content {
       width: 100% !important;

}

}