@charset "UTF-8";

#title
{
	background-color: rgb(245, 245, 245);
}

#title .title
{
	font-family:  'R-M', 'GG-M', 'YU Gothic UI', 'Hiragino Sans', sans-serif;
	font-weight: 500;
	
	padding: clamp(2rem, 4vw, 4rem) 0;
	display: flex;
	justify-content: flex-start;
}

#title .title > div
{
	padding: clamp(1.5rem, 3vw, 3rem) max(2rem, calc(50vw - 460px + 2rem));
	background-color:white;
	min-width: 50vw;
}

#title .title > div:before
{
	content:"";
	position: absolute;
	top: 0;
	left: 0;
	width:0;
	height: max(50%, 5rem);
	background-image: url(../_img/project_bg.svg);
	background-repeat: repeat-x;
	background-size: contain;

	transition: width 1s ease .5s;
}

#title.end .title > div:before
{
	width: 100%;
}


#title .title h1
{
	display: flex;
	flex-direction:column;
	margin: .5em 0;
}

#title .title .date
{
	margin-top: -1em;
	margin-bottom: 1em;
}

#title .title p.cat > a
{
	font-family:  'R-B', 'GG-B', sans-serif;
	font-weight: 700;
	font-size: clamp(.8rem, 1.2vw, 1.2rem);
	border-bottom-width: 0;
}

#title .title p.subtitle
{
	font-size: clamp(1rem, 1.6vw, 1.4rem);
	margin-top: 1em;
}

#title .tags
{
	margin: -.25em;
}

#title .tags .tag
{
	margin: .25em;
}

body:not(.touch) #title .tags .tag:hover
{
	color: #0000EE;
}