@charset "utf-8";
/*----------------------------------------------
	.l_header
---------------------------------------------*/
.l_header {
	position: sticky;
	top: 0;
	background: #fff;
	padding: 10px 0;
	z-index: 999;
	box-shadow: 0 0 5px #3333333d;
}

/* クリックされた後の動き */
.l_header.clicked {
	position: fixed;
	align-items: baseline;
	width: 100%;
	height: 450px;
	background: #fff;
}

/*----------------------------------------------
	.l_nav
---------------------------------------------*/
.l_nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: var(--wrap);
}


/*----------------------------------------------
	.l_menu
---------------------------------------------*/
.l_menu {
	display: grid;
	grid-auto-flow: column;
	gap: 0 30px;
	margin-bottom: 0!important;
}
.l_menu li a {
	color: #333;
}
.l_menu li a:hover {
	opacity: 0.7;
}

/* クリックされた後の動き */
.clicked .l_menu {
	position: absolute;
	top: 100px;
	display: grid;
	width: 100%;
	grid-auto-flow: row;
	gap: 30px 0;
}
.clicked .l_menu li a {
	display: block;
}


/*----------------------------------------------
	.l_ham
---------------------------------------------*/
.l_ham {
	position: relative;
	width: 30px;
	height: 20px;
	cursor: pointer;
}
.l_ham span {
	position: absolute;
	width: 100%;
	height: 2px;
	background: #333;
	transition: .2s;
}
.l_ham span:nth-child(1) {
	top: 0;
}
.l_ham span:nth-child(2) {
	top: 50%;
}
.l_ham span:nth-child(3) {
	top: 100%;
}

/* クリックされた後の動き */
.l_ham.clicked span:nth-child(1) {
	top: 50%;
	rotate: 45deg;
}
.l_ham.clicked span:nth-child(2) {
	display: none;
}
.l_ham.clicked span:nth-child(3) {
	top: 50%;
	rotate: -45deg;
}


/*----------------------------------------------
	.l_link_area
---------------------------------------------*/
:root { --link_area_grid: 1fr 1fr 1fr; }
.l_link_area {
	display: grid;
	grid-template-columns: var(--link_area_grid);
	gap: 15px;
}
@media (max-width: 1100px){ :root { --link_area_grid: 1fr 1fr; } }
@media (max-width: 768px){ :root { --link_area_grid: 1fr; } }



/*----------------------------------------------
	.l_mv
---------------------------------------------*/
.l_mv {
	margin-bottom: 70px;
}
.l_mv img {
	width: 100%;
}


/*----------------------------------------------
  .l_copyright
---------------------------------------------*/
.l_copyright {
	margin-bottom: 0!important;
	padding: 10px;
	text-align: center;
	background: linear-gradient(90deg, #2d00aa, #0088b9);
	color: #fff;
	font-size: 14px;
}