@charset "UTF-8";


/* ================================================================================
hero
================================================================================ */
@media print, screen
{

#hero > .inner
{
	display: flex;	align-items: center;
	min-height: calc(388 * var(--v));
	padding: calc(var(--headerH) + 50 * var(--v)) 0 calc(50 * var(--v));
}

#hero p
{
	font-size: 3.5rem;
	font-weight: 600;
	line-height: 1.2;
}
#hero h1
{
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.5;
}


}
@media screen and (max-width: 767px)
{

}


/* ================================================================================
archive
================================================================================ */
@media print, screen
{

#archive{	background: var(--Cgray3);	}
#archive ul
{
	display: flex;	flex-direction: column;
	gap: calc(15 * var(--v));
}
#archive li a
{
	display: flex;	align-items: center;
	width: fit-content;

	transition: var(--T02);
}
#archive li p
{
	flex-shrink: 0;
	width: 7em;
	padding: 0.2em 0;

	font-weight: 600;
	line-height: 1.3;

	transition: var(--T02);
}
#archive h3
{
	flex: 1;
	padding: 0 0 0 1.5em;
	border-left: 2px solid var(--Cgray1);
	font-weight: 600;
	line-height: 1.3;

	transition: var(--T02);
}


}
@media screen and (min-width: 768px)
{

#archive li a:hover{	transform: translateX(0.5rem);	}
#archive li a:hover p,
#archive li a:hover h3
{	color: var(--Ctheme1);	}

}
@media screen and (max-width: 767px)
{

}



/* ======================================== end ======================================== */