/*
 * Shared menu toggle and drawer (every theme-owned page), ported from the saved Before and After v5
 * theme (style.css "Navigation", "Toggle button", "Marquee"). v5 rem sizes (10px root) are written
 * in px so the drawer renders the same on the front page and on every other page.
 * navigation.js keeps its hidden/is-open/is-closing/toggled state handling.
 */
#site-navigation{
	--nav-blue:#00f;--nav-orange:#ff643c;
	--nav-line:linear-gradient(90deg,rgb(0 0 255/.3) 6px,transparent 6px,transparent 7px) left bottom/8px 1px repeat-x;
	--nav-line-vw:linear-gradient(90deg,rgb(0 0 255/.3) .44vw,transparent .44vw,transparent .51vw) left bottom/.58vw 1px repeat-x;
	--nav-blank:url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cpath%20d%3D%22m12.38%2C8.09H1.91c-1.05%2C0-1.91.85-1.91%2C1.9v5.71c0%2C1.05.85%2C1.91%2C1.91%2C1.91h10.47c1.05%2C0%2C1.91-.85%2C1.91-1.91h0v-5.71c0-1.05-.85-1.91-1.91-1.91h0m0%2C1.43c.26%2C0%2C.48.21.48.48v5.71c0%2C.26-.21.48-.48.48H1.91c-.26%2C0-.48-.21-.48-.48v-5.71c0-.26.21-.48.48-.48h10.47m7.62-5.23v5.71c0%2C1.05-.85%2C1.91-1.91%2C1.91h-2.38v-1.44h2.38c.26%2C0%2C.48-.21.48-.48h0v-5.71c0-.26-.21-.48-.48-.48H7.62c-.26%2C0-.48.21-.48.48h0v2.38h-1.43v-2.38c0-1.05.85-1.91%2C1.9-1.91h10.47c1.05%2C0%2C1.91.85%2C1.91%2C1.91%2C0%2C0%2C0%2C0%2C0%2C0%22%2F%3E%3C%2Fsvg%3E');
	--nav-size-12:calc(12px + 5 * (100vw - 1280px) / 640);
	--nav-size-16:calc(16px + 6 * (100vw - 1280px) / 640);
	--nav-size-30:calc(30px + 12 * (100vw - 1280px) / 640);
	--nav-size-32:calc(32px + 13 * (100vw - 1280px) / 640);
	--nav-size-180:calc(180px + 78 * (100vw - 1280px) / 640);
	display:block;width:100%;
}
#site-navigation .icon{fill:currentColor}
#site-navigation .en{font-family:Fahkwang,sans-serif}

/* Toggle button (v5 .menu-toggle.button): one circular button opens and closes the drawer */
#site-navigation .menu-toggle{position:fixed;top:20px;right:20px;z-index:1100;display:grid;place-content:center;width:50px;height:50px;padding:0;border:0;border-radius:50%;color:var(--nav-blue);background:#fff;box-shadow:0 0 0 2px var(--nav-orange) inset;cursor:pointer;transition:.2s linear}
#site-navigation .menu-toggle[hidden]{display:none}
#site-navigation .menu-toggle .icon{width:20px;height:20px}
#site-navigation .menu-toggle .icon>*{transform-origin:center;transition:.2s linear}
#site-navigation.toggled .menu-toggle .icon-menu-1{transform:rotate(45deg)}
#site-navigation.toggled .menu-toggle .icon-menu-2{transform:rotate(-45deg)}

/* Drawer */
#site-navigation .navigation-container[hidden]{display:none!important}
#site-navigation .navigation-container:not([hidden]){position:fixed;inset:0;z-index:1050;display:block;overflow-y:auto;overscroll-behavior:contain;padding:0;color:var(--nav-blue);background:rgb(255 245 230/.95);font-family:"IBM Plex Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;font-size:14px;font-weight:400;line-height:1.8;letter-spacing:.04em}
#site-navigation a{color:var(--nav-blue);text-decoration:none;transition:.2s linear}
#site-navigation .navigation-container a:hover{color:var(--nav-orange)}
#site-navigation .navigation-inr{position:relative;padding:110px 20px 60px}
#site-navigation .navigation-container ul{list-style:none;padding:10px 0;margin:0}
#site-navigation .search-toggle{position:fixed;top:20px;left:20px;z-index:1;display:grid;place-content:center;width:50px;height:50px;color:var(--nav-blue);background:#fff;border-radius:50%;box-shadow:0 0 0 2px var(--nav-orange) inset}
#site-navigation .search-toggle .icon{width:20px;height:20px;transition:.2s linear}
#site-navigation .navigation-area{position:relative;padding-left:80px}
#site-navigation .saved-navigation-group{margin:0;font-size:16px}
#site-navigation .saved-navigation-group .menu{position:relative}
#site-navigation .saved-navigation-group .menu::after{content:"";position:absolute;bottom:0;left:0;display:block;width:40px;height:1px;background:var(--nav-line)}
#site-navigation .small-menu,#site-navigation .small-menu .widget_nav_menu{font-size:12px}
#site-navigation .small-menu .menu::after{content:none}
#site-navigation .saved-navigation-block{margin-bottom:1.5em}
#site-navigation .menu li{margin:20px 0}
#site-navigation .small-menu .menu li{margin:10px 0}
#site-navigation .menu a{display:flex;align-items:center;gap:5px}
#site-navigation .menu a[target="_blank"]::after{content:"";display:inline-block;width:22px;height:22px;background:var(--nav-blue);mask:var(--nav-blank) center/contain no-repeat;-webkit-mask:var(--nav-blank) center/contain no-repeat}
#site-navigation .language-switcher{padding:10px 0 0;margin-left:80px}
#site-navigation .language-switcher .translate-link{display:inline-flex}
#site-navigation .language-switcher .translate-link img{display:block;width:41px;height:auto}
#site-navigation .language-switcher .en{font-size:12px;margin:0}
#site-navigation .copyright{position:absolute;bottom:-75px;left:0;font-size:10px;margin:0;transform:rotate(90deg) translateX(-100%);transform-origin:bottom left}
#site-navigation .sns-links{position:absolute;top:30px;left:0;display:flex;flex-direction:column;gap:20px;width:32px;padding:0;margin:0}
#site-navigation .sns-link{display:flex;color:var(--nav-blue)}
#site-navigation .sns-links .icon{width:32px;height:32px}
#site-navigation .category-nav{display:block;padding:0;margin:0}
#site-navigation .category-nav li{padding:10px 0;margin:0 0 10px;background:var(--nav-line)}
#site-navigation .category-nav a{display:flex;justify-content:space-between;align-items:center;gap:20px}
#site-navigation .category-nav .thumbnail{flex:none;width:60px;height:40px;border-radius:5px;overflow:hidden;border:1px solid var(--nav-orange);box-sizing:border-box}
#site-navigation .category-nav .thumbnail img{display:block;width:100%;height:100%;object-fit:cover;transition:.2s linear}
#site-navigation .category-nav .title{flex:1;font-size:30px;line-height:1}
#site-navigation .category-nav .en .title{font-size:32px;font-weight:300;letter-spacing:0}
#site-navigation .category-nav .icon{flex:none;width:20px;height:20px;color:var(--nav-orange)}
#site-navigation .title-marquee{display:flex;gap:.5em;white-space:nowrap;overflow:hidden;color:var(--nav-blue);font-size:50px;font-weight:300;line-height:1}
#site-navigation .title-marquee-inner{flex:none;animation:mta-nav-marquee 20s linear infinite}
@keyframes mta-nav-marquee{0%{translate:0}100%{translate:calc(-100% - .5em)}}
@media (max-width:959px){
	#site-navigation .category-nav .count{display:none}
}
@media (min-width:960px){
	#site-navigation .menu-toggle:hover,#site-navigation .search-toggle:hover{box-shadow:0 0 0 3px var(--nav-orange) inset}
	#site-navigation .menu-toggle:hover .icon,#site-navigation .search-toggle:hover .icon{transform:scale(1.1)}
	#site-navigation .navigation-container:not([hidden]){display:grid;place-content:center;overflow:hidden;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
	#site-navigation .navigation-inr{display:grid;grid-template-columns:64% 1fr;gap:5.9vw;width:55vw;padding:0;margin-top:-2.2vw}
	#site-navigation .category-area{position:relative;padding-top:1.5vw}
	#site-navigation .category-nav li{background:var(--nav-line-vw)}
	#site-navigation .search-toggle{position:absolute;top:auto;bottom:0;left:0}
	#site-navigation .navigation-area{position:static;padding:0}
	#site-navigation .sns-links{position:static;flex-direction:row;gap:1.5vw;width:auto;margin:4.4vw 0 .7vw}
	#site-navigation .copyright{display:none}
	#site-navigation .language-switcher{position:absolute;bottom:1.2vw;left:6.6vw;display:flex;align-items:center;gap:1.1vw;padding:0;margin:0}
	#site-navigation .category-nav a:hover img{transform:scale(1.1)}
	#site-navigation .category-nav .count{font-size:12px}
	#site-navigation .category-nav .icon{width:1.5vw}
	#site-navigation .saved-navigation-group .menu::after{background:var(--nav-line-vw)}
	#site-navigation .title-marquee{position:fixed;top:0;right:auto;bottom:0;left:0;font-size:180px;transform:rotate(90deg) translateY(-.85em);transform-origin:top left}
	#site-navigation .title-marquee-inner{animation-duration:40s}
}
@media (min-width:1280px){
	#site-navigation .menu-toggle{top:2.9vw;right:4vw;width:3.7vw;height:3.7vw}
	#site-navigation .search-toggle{width:3.7vw;height:3.7vw}
	#site-navigation .menu-toggle .icon{width:1.5vw;height:1.5vw}
	#site-navigation .search-toggle .icon{width:1.32vw;height:1.32vw}
	#site-navigation .category-nav li{padding:.7vw 0;margin:0 0 .7vw}
	#site-navigation .category-nav a{gap:1.5vw}
	#site-navigation .category-nav .thumbnail{width:4.4vw;height:2.9vw}
	#site-navigation .category-nav .title{font-size:var(--nav-size-30)}
	#site-navigation .category-nav .en .title{font-size:var(--nav-size-32)}
	#site-navigation .category-nav .count{font-size:var(--nav-size-12)}
	#site-navigation .saved-navigation-group{font-size:var(--nav-size-16)}
	#site-navigation .saved-navigation-group .menu::after{width:2.9vw}
	#site-navigation .navigation-container ul{padding:.7vw 0}
	#site-navigation .menu li{margin:1.5vw 0}
	#site-navigation .small-menu .menu li{margin:.7vw 0}
	#site-navigation .small-menu,#site-navigation .small-menu .widget_nav_menu{font-size:var(--nav-size-12)}
	#site-navigation .menu a[target="_blank"]::after{width:1.6vw;height:1.6vw}
	#site-navigation .sns-links .icon{width:2.3vw;height:2.3vw}
	#site-navigation .sns-links .icon-x{transform:scale(.9)}
	#site-navigation .language-switcher .translate-link{width:3vw}
	#site-navigation .language-switcher .translate-link img{width:100%}
	#site-navigation .language-switcher .en{font-size:var(--nav-size-12)}
	#site-navigation .title-marquee{font-size:var(--nav-size-180)}
}
@media (prefers-reduced-motion:reduce){
	#site-navigation .menu-toggle .icon>*{transition:none}
	#site-navigation .navigation-container:not([hidden]){transition:none;transform:none;will-change:auto}
	#site-navigation .title-marquee-inner{animation:none}
}