@charset "utf-8";
/* CSS Document */
/* =====================================
   下層ページ用グローバルナビ
===================================== */
.lower-nav {
	--main-color:#313f4f;
	--accent-color:#1c90a3;
	--bg-light:#f4f6f8;
	position:relative;
	width:100%;
	background:#fff;
	z-index:1000;
}
/* PCではSPメニュー非表示 */
.lower-sp-menu {
	display:none;
}

/* =====================================
   PC navigation
===================================== */
.lower-nav {
	background-color: var(--bg-light);
	border-top: 1px solid #eee;
}
.lower-nav-inner {
	max-width:1200px;
	margin:0 auto;
}
.lower-nav-list {
	display:flex;
	align-items:center;
	justify-content:center;
	list-style:none;
	padding:0;
	margin:0;
}
.lower-nav-item {
	position:static;
}
.lower-nav-item>a {
	display:flex;
	align-items:center;
	justify-content:center;
	padding:15px 20px;
	font-size:14px;
	font-weight:bold;
	text-decoration:none;
	white-space:nowrap;
	transition:.3s;
	border-right: 1px solid #ddd;
}
.lower-nav-item:first-child>a {
	border-left: 1px solid #ddd;
}
.lower-nav-item>a:hover {
	color:var(--accent-color);
}

/* =====================================
   Mega Menu
===================================== */
.lower-mega {
	position:absolute;
	top:53px;
	left:0;
	width:100%;
	background:#fff;
	padding: 40px max(calc((100vw - 1200px) / 2),30px);
	display:flex;
	gap:50px;
	box-shadow: 0 15px 35px rgba(49,63,79,.15);
	border-top: 3px solid var(--accent-color);
	opacity:0;
	visibility:hidden;
	transform: translateY(15px);
	transition:.25s;
}
.lower-nav-item:hover .lower-mega {
	opacity:1;
	visibility:visible;
	transform:
	translateY(0);
}
.lower-mega-column {
	flex:1;
	min-width:220px;
}
.lower-mega-column h3 {
	margin:0 0 20px;
	font-size:18px;
}
.lower-mega-column h3 a {
	color:var(--main-color);
	text-decoration:none;
}
.lower-mega-column h3 a:hover {
	color:var(--accent-color);
}
.lower-mega-column ul {
	list-style:none;
	margin:0;
	padding:0;
}
.lower-mega-column li {
	margin-bottom:12px;
}
.lower-mega-column li a {
	color:#555;
	font-size:14px;
	text-decoration:none;
	transition:.2s;
}
.lower-mega-column li a:hover {
	color:var(--accent-color);
	padding-left:5px;
}

/* =====================================
   hamburger
===================================== */
.lower-nav-toggle {
	display:none;
}
.lower-nav-burger {
	display:none;
}

/* =====================================
   SP
===================================== */
@media screen and (max-width:768px){
	header {
		position: relative;
	}
	.lower-nav{
		position: absolute;
		top: 0;
		right: 0;
		width: 70px;
		height: 70px;
		background: none;
		z-index: 3000;
	}
	.lower-nav-inner{
		display:none;
	}
	.lower-nav-toggle{
		display:none;
	}
	.lower-nav-burger{
		display:flex;
		position:absolute;
		top:15px;
		right:15px;
		width:42px;
		height:42px;
		flex-direction:column;
		justify-content:center;
		align-items:center;
		gap:6px;
		z-index:5000;
		cursor:pointer;
	}
	.lower-nav-burger span{
		display:block;
		width:28px;
		height:2px;
		background:var(--main-color);
	}
	/* SP menu */
	.lower-sp-menu{
		display:block;
		position:fixed;
		top:0;
		right:0;
		width:100%;
		height:100vh;
		background:#fff;
		transform:translateX(100%);
		transition:.35s;
		overflow:hidden;
		z-index:2000;
		padding-top: 0;
	}
	.lower-nav-toggle:checked ~ .lower-sp-menu{
		transform:translateX(0);
	}
	.lower-sp-panel{
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		padding-top:80px;
		background:#fff;
		transform:translateX(100%);
		transition:.3s;
	}
	.lower-sp-panel.active{
		transform:translateX(0);
	}
	.lower-sp-panel ul{
		list-style:none;
		padding:0;
		margin:0;
	}
	.lower-sp-panel li{
		display:flex;
		justify-content:space-between;
		align-items:center;
		padding:18px 25px;
		border-bottom:1px solid #ddd;
		font-size:16px;
		color:var(--main-color);
	}
	.lower-sp-panel li a{
		width:100%;
		color:var(--main-color);
		text-decoration:none;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.lower-sp-panel li[data-open]::after,
	.lower-sp-panel li a::after {
		content:"\203A";
		font-size:24px;
	}
	.lower-sp-back{
		width:100%;
		padding:18px 25px;
		border:0;
		background:var(--bg-light);
		color:var(--main-color);
		font-size:15px;
		text-align:left;
		cursor: pointer;
		display: flex;
		align-items: center;
		gap: 8px;
	}
	.lower-sp-back::before{
		content:"\2039";
		font-size:24px;
		line-height:1;
	}
	.lower-nav-toggle:checked + .lower-nav-burger span:nth-child(1){
		transform:
		translateY(8px)
		rotate(45deg);
	}
	.lower-nav-toggle:checked + .lower-nav-burger span:nth-child(2){
		opacity:0;
	}
	.lower-nav-toggle:checked + .lower-nav-burger span:nth-child(3){
		transform:
		translateY(-8px)
		rotate(-45deg);
	}
.lower-nav-burger span{
		transition:.3s;
	}
}