@charset "UTF-8";

body{
	line-height: 1.7;
	letter-spacing: 0.1em;
}

#app{
	padding: calc(var(--header-height) + var(--margin-base) * 1) calc(var(--margin-base) * 1) calc(var(--margin-base) * 1);
}

header,
header.fixed{
	background-color: #fff;
}

header{
	height: var(--top-header-height);
	padding: 0 calc(var(--margin-base));
	display: flex;
	align-items: center;
}

header.fixed{
	height: fit-content;
	padding: 0 calc(var(--margin-base)) 0;
}

header > div{
	flex-wrap: wrap;
	justify-content: center;
	height: fit-content;
	gap: 2.4em;
}

header.fixed > div{
	flex-wrap: nowrap;
	justify-content: space-between;
}

header > div > *{
	width: fit-content;
}

header a p{
	display: none;
}

header a span{
	display: block;
	margin-top: 0;
	letter-spacing: 0.06em;
}

header nav a.material-symbols-outlined,
header nav a i.material-symbols-outlined{
	display: block;
	font-size: 3.2em !important;
	line-height: 1;
    font-variation-settings:'GRAD' -25, 'FILL' 0, 'wght' 300;
}

header.fixed nav a.material-symbols-outlined,
header.fixed nav a i.material-symbols-outlined{
	font-size: 1.6em !important;
}

header #logo{
	height: 2.3em;
	padding-top: 0.6em;
}

header.fixed #logo{
	width: fit-content;
}

header #logo svg{
	display: block;
	margin: 0 auto;
	width: auto;
	height: 2.3em;
}

header #logo svg [fill="rgb(51,51,51)"] {
	fill: rgb(51,51,51);
}

header #logo svg [fill="rgb(182,51,79)"] {
	fill: rgb(182,51,79);
}

header.fixed #logo svg{
	margin: 0;
	width: auto;
	height: 1.3em;
}

header nav{
	gap: 1.5em;
}

header.fixed nav{
	gap: 0.5em;
}

header nav a{
	color: var(--color-text);
}

.content{
	max-width: 100%;
}

#top #first{
	height: fit-content;
}

#top #bg{
	margin-top: calc(var(--top-header-height) - var(--header-height));
}

#top #bg > img{
	object-position: 5% 100%;
}

#top #bg > p{
	padding-bottom: 3em;
	font-size: 0.9em;
	line-height: 2;
	letter-spacing: 0.1em;
}

#info{
	text-align: left;
}

#info h3{
	font-size: 1.2em;
}

#info #site{
	flex-direction: column;
	margin: 0 0 2em;
}

#info #site #banner{
	margin: 0.6em 0 1em;
}

#info #contact > #res_list .res{
	margin-top: calc(var(--margin-base) * 1);
	padding: calc(var(--margin-base) * 1);
}

#info #contact > #res_list .res .date{
	bottom: 1.2em;
	right: 1.2m;
	font-size: 0.8em;
}

#works #genre_list{
	gap: 0.5em;
}

#works #genre_list a{
	padding: 0 0.8em 0 0.8em;
	letter-spacing: 0.1em;
	font-size: 0.8em;
	line-height: 2em;
	border-radius: 2em;
}

#gallery .tmbs{
    max-width: var(--max-width);
    gap: calc(var(--margin-base) * 0.7) calc(var(--margin-base) * 1);
}

#gallery .tmbs .tmb{
	width: calc(100% / 3 - calc(var(--margin-base) * 1) * 2 / 3);
}

@media screen and (max-width: 500px) {
    #gallery .tmbs .tmb{
    	width: calc(100% / 2 - calc(var(--margin-base) * 1) * 1 / 2);
    }
}

#gallery .tmbs .tmb h3{
	font-size: 0.9em;
	letter-spacing: 0.1em;
}

#blog{
	flex-direction: column;
}

#blog_side{
	order: 2;
	width: 100%;
}

#blog_side #backnumber{
	letter-spacing: 0.2em;
	line-height: 2.4;
}

#blog_side #backnumber.router-link-active,
#blog_side #backnumber.hidden{
	display: none;
}

#blog_side #tag{
	justify-content: flex-start;
}

#blog_main article{
	margin-top: 2.5rem;
	padding: 0;
	background-color: transparent;
}

#blog_main article .jouhou{
	position: absolute;
	top: -2.3rem;
	left: 0;
	padding: 0;
	height: 2rem;
	display: flex;
	line-height: 2rem;
	background-color: transparent;
}

#blog_main article .jouhou::after{
    content: none;
}

#blog_main article .jouhou .article_date{
	padding: 0 0.8em 0 0;
}

#blog_main article .jouhou .category{
	line-height: 2rem;
}

#blog_main article h1{
	margin: -0.4em 0 1em;
	padding-bottom: 0.5em;
	font-size: 1em;
	border-bottom: solid 1px var(--color-main);
}

.article_images.thum1{
	margin: 0.5em 1.5em 1.2em 0;
	max-width: 45%;
}

article .prevnext{
	margin-bottom: 0;
}

#blog_list #article_list{
	flex-direction: column;
}

#blog_list #article_list article{
    width: 100%;
}

#blog_list #article_list article > a{
	padding: calc(var(--margin-base) * 0.7);
	gap: calc(var(--margin-base) * 0.6);
}

#blog_list #article_list article .tmb img{
	width: 8rem;
}

#blog_list #article_list article .tmb .noimage{
	width: 8rem;
}

#blog_list #article_list article .info{
	width: calc(100% - var(--margin-base) * 0.6 - 8rem);
}

#blog_list #article_list article .info h3{
	font-size: 1em;
}

#blog_list #article_list article .text{
	line-height: 1.4;
}

#off p#setsumei{
	margin: 1em 0 calc(var(--margin-base) * 0.8);
}

#off #book_list{
	flex-direction: column;
}

#off #book_list .book{
	display: block;
	width: 100%;
	padding: calc(var(--margin-base) * 0.8);
}

#off #book_list .book::after {
  content: "";
  display: block;
  clear: both;
}

#off #book_list .book .hyoushi{
	float: left;
	margin-right: 1.5em;
	width: 20%;
}

#off #book_list .book p.cp{
	padding-bottom: 1.4em;
}

#off #book_list .book p.summary{
	font-size: 0.98em;
	line-height: 1.7;
}