nav.document-menu { min-width: 240px; position: fixed; left: -240px; top: calc(var(--headerHeight) + var(--snbHeight)); bottom : auto; background-color: rgb(255, 255, 255); z-index: 2; height: calc(100vh - calc(var(--headerHeight) + var(--snbHeight))); border-right: 1px solid rgb(222, 223, 226); }
nav.document-menu.opend {left: 0;}
nav.document-menu .document-menu-container { width: 240px; display: flex; flex-direction: column; padding-top: 12px; height: 100%; left: -240px; position: relative; top: 0; overflow-y: visible;}
nav.document-menu.opend .document-menu-container {overflow-y: auto; left: 0;}
nav.document-menu .document-menu-container::-webkit-scrollbar{width : 6px;}
nav.document-menu .document-menu-container::-webkit-scrollbar-thumb{background-color: #ccc; border-radius: 3px;}
nav.document-menu .document-menu-container > dl { display: flex; flex-direction: column; align-items: stretch; padding: 0 15px;}
nav.document-menu .document-menu-container > dl ~ dl {margin-top: 10px; border-top: solid 1px #F0F0F0; padding-top: 10px;}
nav.document-menu .document-menu-container > dl > dt a {display: flex; align-items: center; height: 28px; padding: 3px 10px 4px 9px; font-weight: 700; font-size: 14px; letter-spacing: -0.03em; line-height: 1.3; color: #404040; position: relative;}
nav.document-menu .document-menu-container > dl > dt a::before {content: ''; display: block; position: absolute; width: 4px; height: 4px; left: 0; top: 9px; background: #f5551d;}
nav.document-menu .document-menu-container > dl > dt a::after  {content: ''; display: block; position: absolute; width: 4px; height: 4px; left: 0; bottom: 9px; background: #253b8f;}
nav.document-menu .document-menu-container > dl > dd a {display: flex; align-items: center; height: 32px; padding: 3px 10px 4px; font-size: 15px; letter-spacing: -0.03em; line-height: 1.3; color: #333; border-radius: 4px;}
nav.document-menu .document-menu-container > dl > dd a.active {background: #EFF3F9; font-weight: 700; color: #2A6EED;}
nav.document-menu .document-menu-container > *:last-child {margin-bottom: 20px;}

nav.document-menu .document-menu-container > .sdk-banner {position: relative; margin-top: 30px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) -2.35%, #FFF 11.07%); padding: 0 10px 0 16px;}
nav.document-menu .document-menu-container > .sdk-banner a {position: relative; display: flex; width: 208px; padding: 15px 16px; flex-direction: column; gap: 2px; border-radius: 5px; background: url("/images/common/document/bg_img.webp") center/cover no-repeat; font-weight: 600; font-size: 12px; letter-spacing: -0.03em; line-height: 1.3; color: #3E475E; }
nav.document-menu .document-menu-container > .sdk-banner::after {content: ''; background: url("/images/common/document/icon-sdk.svg") no-repeat; position: absolute; top: 50%; right: 26px; transform: translateY(-50%); display: block; width: 40px; height: 40px; user-select: none; pointer-events: none;}
nav.document-menu .document-menu-container > .sdk-banner a strong {position: relative; align-self: flex-start; font-weight: 700; font-size: 16px; letter-spacing: -0.03em; line-height: 1.3; background: linear-gradient(90deg, #0062FF 0%, #005FDC 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
nav.document-menu .document-menu-container > .sdk-banner a strong::after {content: ''; background: url("/images/common/document/ic_right-blue.svg") no-repeat; width: 11px; height: 22px; display: block; position: absolute; top: 50%; right: -15px; transform: translateY(-50%);}

nav.document-menu .document-menu-close-button { width: 42px; height: 42px; border-radius: 0 100% 100% 0; left: 0; background-image: url("/images/common/document/icon_nav_toggle_arrow_open.png"); background-color: rgb(101, 100, 100); background-position: center; background-size: 17px; background-repeat: no-repeat; position: fixed; bottom: 25px; cursor: pointer; z-index: 2;}
nav.document-menu.opend .document-menu-close-button {border-radius: 100%; background-image: url("/images/common/document/icon_nav_toggle_arrow.png"); left: 218px;}
nav.document-menu div.hometax-select-box {margin-top: 20px;}
nav.document-menu div.hometax-select-box ul {display : flex; justify-content : center;}
nav.document-menu div.hometax-select-box ul li a {display: inline-block; font-size : 15px; color : #333; padding : 7px 13px 8px; background-color : #f5f5f5;}
nav.document-menu div.hometax-select-box ul li.active a {background-color : #f85c46; color : #fff;}

nav.document-menu .document-menu-container > dl dt a:has(#tooltip) {display: flex; align-items: center;}
nav.document-menu .document-menu-container > dl dt a #tooltip {display: inline-block; margin-top: 1px; width: 14px; height: 14px; margin-left: 5px; background: url("/images/common/document/tooltip-icon.svg") center no-repeat;}
nav.document-menu .document-menu-container > dl dt a #tooltip b {position: fixed; display: none; width: 248px; font-weight: 400; font-size: 13px; line-height: 1.38; letter-spacing: -0.03em; color: #282828; background-color: #f0f3fa; border-radius: 4px; padding: 9px 12px 7px; text-align: left;}
nav.document-menu .document-menu-container > dl dt a #tooltip.over b {display: block;}
nav.document-menu .document-menu-container > dl dt a #tooltip.over b:before {content: ''; position: absolute; bottom: 11px; left: -12px; width: 0; height: 0; border-top: solid 10px #eceff7; border-left: solid 7px transparent; border-right: solid 7px transparent; transform: rotate(90deg);}

@media (max-width: 980px) {
    nav.document-menu{width : 0; height: 0; min-width : auto; position: static; border : none; z-index: 9999; top : var(--headerHeight);}
    nav.document-menu .document-menu-close-button{z-index: 99999; left: 0; border-radius: 0 100% 100% 0; background-image: url("/images/common/document/icon_nav_toggle_arrow_open.png"); transition: left 0.25s ease-out;}
    nav.document-menu .document-menu-container{background-color : #fff; height: 100dvh; position: fixed; overflow-y: auto; left: -100%; transition: left 0.25s ease-out; z-index: 99998; top : 0;}
    nav.document-menu .document-menu-container > .sdk-banner {transform: translate(-100%); transition: unset;}
    nav.document-menu .document-menu-mobile-background{opacity: 0; visibility: hidden;}
    nav.document-menu.opend .document-menu-close-button{left : 218px; border-radius: 100%; background-image: url("/images/common/document/icon_nav_toggle_arrow.png");}
    nav.document-menu.opend .document-menu-mobile-background{width : 100vw; height: 100vh; background-color : rgba(0,0,0,0.4); z-index: 99997; position: fixed; top :0; left : 0; opacity: 1; visibility: visible;}
    nav.document-menu.opend .document-menu-container{left : 0;}
}
@media print {
    nav.document-menu{display: none;}
}