@charset "UTF-8";
/* =========================================================
 * nav.css — サイドメニュー（PC）／スマホメニュー／ハンバーガー
 *   マークアップ: footer.php の <aside id="sidebar" class="yoko-nav">
 *   メニュー: 外観 → メニュー「main_menu」（親子階層でサブメニュー）
 *   開閉: assets/js/theme.js（body に .close を付け外し）
 * ========================================================= */

/* =========================================================
 * Sidebar frame (PC)
 * ========================================================= */
@media print, screen and (min-width: 1000px)
{
#sidebar {
	position: fixed;
        left:0;
	top: 0;
        height:100%;
	width: 260px;
        border:1px solid #fff;
        overflow-x: hidden;
        overflow-y: auto;
	color: #fff;
	background: var(--color-b);
}
}


/* =========================================================
 * Global navigation base
 * ========================================================= */
#global-nav ul{
	list-style:none;
	margin:0;
	padding-left:0;
}
#global-nav > ul > li{
	position:relative;
	padding-bottom:0;
}
#global-nav a{
	position:relative;
	display:block;
	color:#fff;
	text-decoration:none;
}
#global-nav .menu-item-has-children.is-active > a,
#global-nav a:hover{
	opacity:.8;
}
#global-nav li.menu-item-has-children > a::after{
	content:"";
	position:absolute;
	top:0;
	bottom:0;
	right:18px;
	margin:auto;
	width:8px;
	height:8px;
	border:2px solid #fff;
	border-left:0;
	border-bottom:0;
	transform:translateY(-25%) rotate(135deg);
}
#global-nav .menu-item-has-children.is-active > a::after,
#global-nav li.menu-item-has-children > a:hover::after{
	opacity:.8;
}
#global-nav .sub-menu{
	display:none;
}
#global-nav .sub-menu li{
	padding-bottom:0;
}

/* =========================================================
 * Side menu
 * ========================================================= */
@media print, screen and (min-width:1000px){
#sidebar.yoko-nav{
	padding:0 16px;
	border:0;
	background:
		url("images/side-left.jpg") left center/16px 100% no-repeat,
		url("images/side-right.jpg") right center/16px 100% no-repeat;
	box-shadow:10px 0 28px rgba(7,42,29,.16);
	scrollbar-width:none;
}
#sidebar.yoko-nav::-webkit-scrollbar{display:none;}
#sidebar.yoko-nav .toplogopc{
	position:relative;
	inset:auto;
	display:block;
	width:calc(100% - 28px);
	height:auto;
	max-height:205px;
	object-fit:contain;
	margin:22px auto 10px;
	padding:10px;
	border:0;
	border-radius:8px;
	background:#fff;
}
#sidebar.yoko-nav #global-nav{padding-top:0;}
}

#sidebar.yoko-nav{background-color:var(--color-a);}
#sidebar.yoko-nav::before{
	content:"";
	position:absolute;
	z-index:-1;
	inset:0 16px;
	background:linear-gradient(180deg,var(--color-a),var(--color-b) 62%,var(--color-c));
}
#sidebar.yoko-nav #global-nav > ul{
	display:grid;
	margin:8px 0 18px;
}
#sidebar.yoko-nav #global-nav li{
	margin:0;
	padding:0;
}
#sidebar.yoko-nav #global-nav > ul > li{border-bottom:1px dotted rgba(255,255,255,.24);}
#sidebar.yoko-nav #global-nav a{
	position:relative;
	display:flex;
	align-items:center;
	min-height:62px;
	padding:11px 38px 11px 18px;
	border:0;
	font-size:.92rem;
	font-weight:700;
	letter-spacing:.05em;
	line-height:1.55;
	transition:background-color .24s ease,padding .24s ease,opacity .24s ease;
}
#sidebar.yoko-nav #global-nav > ul > li > a::before{
	content:"";
	position:absolute;
	left:-6px;
	top:11px;
	bottom:11px;
	width:4px;
	border-radius:0 4px 4px 0;
	background:var(--color-e);
	opacity:0;
	transform:scaleY(.25);
	transition:.25s ease;
}
#sidebar.yoko-nav #global-nav > ul > li > a:hover,
#sidebar.yoko-nav #global-nav > ul > li.current-menu-item > a,
#sidebar.yoko-nav #global-nav > ul > li.yoko-current > a{
	padding-left:24px;
	background:rgba(255,255,255,.09);
	opacity:1;
}
#sidebar.yoko-nav #global-nav > ul > li.current-menu-item > a::before,
#sidebar.yoko-nav #global-nav > ul > li.yoko-current > a::before{
	opacity:1;
	transform:scaleY(1);
}

/* =========================================================
 * Sub menu
 * ========================================================= */
#sidebar.yoko-nav #global-nav li.menu-item-has-children > a::after{
	right:17px;
	width:9px;
	height:9px;
	border-width:2px;
	transition:transform .25s ease;
}
#sidebar.yoko-nav #global-nav li.menu-item-has-children.is-active > a::after{
	transform:translateY(25%) rotate(-45deg);
}
#sidebar.yoko-nav #global-nav .sub-menu{
	margin:0 5px 10px 12px;
	padding:3px 0;
	border-radius:10px;
	background:rgba(255,255,255,.055);
	overflow:hidden;
}
#sidebar.yoko-nav #global-nav .sub-menu a{
	min-height:46px;
	margin:3px 4px;
	padding:8px 13px 8px 17px;
	border:0;
	border-radius:8px;
	font-size:.78rem;
	font-weight:600;
	letter-spacing:.03em;
	background:transparent;
}
#sidebar.yoko-nav #global-nav .sub-menu a:hover,
#sidebar.yoko-nav #global-nav .sub-menu .current-menu-item > a{
	padding-left:21px;
	background:rgba(255,255,255,.12);
	opacity:1;
}

/* =========================================================
 * Mobile menu
 * ========================================================= */
@media screen and (max-width:999.9px){
#sidebar{
	display:none;
}
#nav-toggle{
	position:fixed;
	border:1px solid rgba(255,255,255,.55);
	border-radius:50%;
	background:var(--color-a);
	box-shadow:0 8px 22px rgba(0,0,0,.18);
	z-index:925;
}
#nav-toggle > div.toggle-in{
	display:block;
	position:relative;
	top:0;
	left:0;
}
#nav-toggle span{
	display:block;
	position:absolute;
	height:2px;
	background:#fff;
	transition:.35s ease-in-out;
}
#nav-toggle span:nth-child(1),
#nav-toggle span:nth-child(3){
	transform:rotate(0);
}
.close #nav-toggle span:nth-child(1){
	transform:rotate(45deg);
}
.close #nav-toggle span:nth-child(2){
	width:0;
}
.close #nav-toggle span:nth-child(3){
	transform:rotate(-45deg);
}
.close #main{
	margin-left:0;
}
.close #sidebar.yoko-nav{
	display:block;
	position:fixed;
	top:68px;
	right:10px;
	left:auto;
	z-index:910;
	width:min(330px,calc(100vw - 28px));
	height:calc(100svh - 80px);
	padding:12px 16px 18px;
	border-radius:16px;
	color:#fff;
	background:linear-gradient(180deg,var(--color-a),var(--color-b) 62%,var(--color-c));
	box-shadow:0 18px 50px rgba(0,0,0,.30);
	overflow-y:auto;
	transition:.35s ease-in-out;
	animation:yokoMenuIn .26s ease both;
}
.close #sidebar.yoko-nav::before{display:none;}
#sidebar.yoko-nav .toplogopc{display:none;}
#sidebar.yoko-nav #global-nav a{min-height:54px;}
#sidebar.yoko-nav .widget,
#sidebar.yoko-nav .sns-link{
	margin-left:4px;
	margin-right:4px;
}
}

@media screen and (max-width:999.9px){
#nav-toggle{
	top:17px;
	right:5px;
	width:34px;
	height:34px;
}
#nav-toggle > div.toggle-in{
	width:34px;
	height:34px;
}
#nav-toggle span{
	left:8px;
	width:18px;
}
#nav-toggle span:nth-child(1){top:10px;}
#nav-toggle span:nth-child(2){top:16px;}
#nav-toggle span:nth-child(3){top:22px;}
.close #nav-toggle span:nth-child(1),
.close #nav-toggle span:nth-child(3){top:16px;}
}

@media screen and (min-width:540.1px) and (max-width:999.9px){
#nav-toggle{
	top:8px;
	right:10px;
	width:52px;
	height:52px;
}
#nav-toggle > div.toggle-in{
	width:52px;
	height:52px;
}
#nav-toggle span{
	left:14px;
	width:24px;
}
#nav-toggle span:nth-child(1){top:16px;}
#nav-toggle span:nth-child(2){top:24px;}
#nav-toggle span:nth-child(3){top:32px;}
.close #nav-toggle span:nth-child(1),
.close #nav-toggle span:nth-child(3){top:24px;}
}

@keyframes yokoMenuIn{
from{opacity:0;transform:translateY(-10px);}
to{opacity:1;transform:none;}
}

/* ロゴ画像が未設定のときはサイト名を表示 */
.toplogopc-link{text-decoration:none;}
#sidebar.yoko-nav .toplogopc-text{
	font-weight:700;
	text-align:center;
	color:var(--color-a);
}