@charset "UTF-8";

html{
	scroll-behavior: smooth;
}

body{
	position: relative;
	min-width: 100vw;
	min-height: 100dvh;
	font-family: var(--font-primary);
	letter-spacing: 0.1em;
	line-height: 1.9;
	font-weight: 400;
	overflow-x: hidden;
	background-color: var(--color-base);
	color: var(--color-text);
}

#app{
	position: relative;
	padding: calc(var(--margin-base));
	max-width: 100%;
	min-height: 100dvh;
}

header{
	position: fixed;
	top: 0;
	left: 0;
	padding: 0 var(--margin-base) 0;
	width: 100vw;
	transition : all 0.5s;
	z-index: 9;
}

header *{
	transition : all 0.5s;
}

header > div > *{
	width: calc(100% / 3);
}

@media screen and (max-width: 930px) {
	header > div > *{
		width: fit-content;
	}

	header #logo{
		order: -1;
	}
}

header > div{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
	width: 100%;
	height: var(--top-header-height);
}

header #logo{
	order: -1;
}

header #logo svg{
	width: auto;
	height: 2em;
}

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

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

header nav{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 2em;
}

header nav a{
    text-align: center;
	line-height: 1;
	color: #fff;
}

header nav a i.material-symbols-outlined{
    font-size: 2.5em;
    font-variation-settings:'GRAD' -25, 'FILL' 0, 'wght' 200;
}

header nav a p{
    font-family: var(--font-alphanumeric);
	font-size: 1.2em;
	letter-spacing: 0.12em;
	font-weight: bold;
}

header nav a p.ls_min{
	letter-spacing: 0.07em;
}

header nav a span{
    font-size: 0.7em;
}

header nav a i.sideicon{
    display: none;
}

header.fixed{
	padding: 0 2.5em 0;
}

header.fixed > div{
	height: var(--header-height);
}

header.fixed #logo svg{
	height: 1.2em;
}

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

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

header.fixed nav{
	gap: 1.5em;
}

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

header.fixed nav a.material-symbols-outlined{
    font-size: 1.6em;
    font-variation-settings:'GRAD' -25, 'FILL' 0, 'wght' 300;
}

header.fixed nav a p{
	font-size: 1em;
}

header.fixed nav a span{
	display: none;
}

.content{
	margin: 0 auto;
	width: 100%;
	max-width: var(--max-width);
	min-height: 100%;
}

#top{
	margin: calc(var(--margin-base) * -1);
}

#top #first{
	width: 100vw;
	max-width: 100vw;
	background-color: #fff;
}

#top #bg{
	position: relative;
	margin: 0 auto;
	width: 100%;
	aspect-ratio: 16/9;
	z-index: 0;
}

#top #bg > p{
	position: absolute;
	inset: 0;
	margin: auto;
	width: fit-content;
	height: fit-content;
	color: #fff;
	font-size: 0.9em;
	font-weight: 500;
	line-height: 2.4;
	letter-spacing: 0.15em;
	text-align: center;
	z-index: 2;
}

#top #bg > p a#first_info{
	text-decoration: underline;
	cursor: pointer;
}

#top #bg > img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 0% 100%;
}

#info #about > div,
#info #contact > *{
	width: fit-content;
	max-width: var(--max-width);
	margin: 0 auto;
}

#info a{
	color: var(--color-main);
	text-decoration: underline;
}

#info h3{
	font-size: 1.4em;
	font-weight: bold;
}

#info #about{
	padding: calc(var(--margin-base) * 1.5) var(--margin-base);
	background-color: #fff;
}

#info #about p{
	margin: 1.5em 0;
}

#info #site{
	margin: 2em 0;
	width: fit-content;
}

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

#info #site ul {
	margin: 0 auto;
	width: fit-content;
}

#info #site ul li{
	display: flex;
	gap: 0.8em;
}

#info #site ul li#site span{
	font-family: var(--font-alphanumeric);
}

#info #site ul li span:first-child{
	display: flex;
	align-items: center;
	gap: 0.8em;
	width: 5.5em;
	font-size: 1.1em;
	font-weight: bold;
	color: var(--color-main);
}

#info #site ul li span:first-child::after{
	content: '';
	display: block;
	flex-grow: 1;
	height: 1px;
	background-color: var(--color-main);
	opacity: 0.35;
}

#info #site ul li span:last-child{
	font-size: 1.2em;
	font-weight: 500;
}

#contact{
	padding: var(--margin-base);
}

#contact h3{
	margin-bottom: 1em;
}

#contact form{
	margin-top: 1.5em;
}

#contact form > *{
	display: block;	
	border: none;
}

#contact form textarea{
	display: block;
	resize: none;
	padding: 0.5em 0.8em;
	width: 70rem;
	max-width: 100%;
	height: 7em;
	background-color: #fff;
}

#contact form input{
	background-color: #fff;
}

#contact form label{
	font-weight: 500;
}

#contact form label small{
	letter-spacing: 0.05em;
}

#contact form label.name{
	font-size: 0.9em;
}

#contact form input.name{
	padding: 0.2em 0.8em;
}

#contact form label#henfuyo{
	margin: 0.8em 0;
}

#contact input[type="checkbox"]{
	margin-right: 0.5em;
	padding: 0;
	position: relative;
	width: 1.5em;
	height: 1.5em;
	vertical-align: -5px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	vertical-align: middle;
}

#contact form input[type="checkbox"]:checked:before {
  position: absolute;
  top: 0.2em;
  left: 0.5em;
  transform: rotate(50deg);
  width: 0.5em;
  height: 1em;
  border-right: 3px solid var(--color-main);
  border-bottom: 3px solid var(--color-main);
  content: '';
}

#contact form button{
	display: block;
	margin-top: 1em;
	padding: 0 1.5em;
	line-height: 2.6em;
	letter-spacing: 0.2em;
	color: var(--color-light);
	background-color: rgba(0,0,0,0.2);
	font-family: var(--font-alphanumeric);
	transition : all 0.5s;
}

#contact form button:hover{
	color: var(--color-base);
	background-color: var(--color-text);
}

#info #contact > #res_list{
	margin-top: var(--margin-base);
	max-width: 70rem;
	width: 100%;
	transition : all 0.5s;
}

#info #contact > #res_list .res{
	position: relative;
	margin-top: calc(var(--margin-base) * 0.6);
	padding: calc(var(--margin-base) * 0.8);
	background-color: #fff;
}

#info #contact > #res_list .res:first-of-type{
	margin-top: 0;
}

#info #contact > #res_list .res h5{
	margin-bottom: 1em;
	font-weight: bold;
	color: var(--color-main);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 1;
}

#info #contact > #res_list .res h5::before{
    content:'\e158';
	margin-right: 0.1em;
	font-family: var(--font-icon);
    font-variation-settings:'wght' 300;
	font-size: 1.3em;
	vertical-align: -0.2em;
}

#info #contact > #res_list .res .date{
	position: absolute;
	bottom: 1.6em;
	right: 1.6em;
	font-size: 0.9em;
	line-height: 1;
	font-family: var(--font-alphanumeric);
	opacity: 0.4;
}

#works{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
    gap: calc(var(--margin-base) * 0.7);
}

#works #genre_list{
	display: flex;
	gap: 1em;
	flex-wrap: wrap;
	width: 100%;
	font-family: var(--font-alphanumeric);
	border-radius: 0.6rem;
}

#works #genre_list *{
	transition : all 0.5s;
}

#works #genre_list a{
	position: relative;
	display: block;
	padding: 0 0.8em 0 1em;
	font-size: 1.3rem;
	line-height: 2.4rem;
	letter-spacing: 0.2em;
	border: solid 1px var(--color-text);
	border-radius: 2.4rem;
	text-align: center;
}

#gallery{
    position: relative;
	flex: 1;
}

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

#gallery .tmbs .tmb{
    position: relative;
    width: calc(100% / 5 - calc(var(--margin-base) * 0.7) * 4 / 5);
    height: auto;
	animation: fadein 1.5s ease-out;
    cursor: pointer;
}

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

#works #genre_list a.router-link-exact-active{
	background-color: var(--color-text);
	color: var(--color-base) !important;
}

#gallery .tmbs .tmb i{
    font-variation-settings:'GRAD' -25, 'FILL' 0, 'wght' 300;
	vertical-align: -0.25em;
}

#gallery .tmbs .tmb .tmb_img{
	position: relative;
	z-index: -1;
}

#gallery .tmbs .tmb .tmb_img img{
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1.2;
    object-fit: cover;
    pointer-events: none;
    -webkit-touch-callout:none;
    -webkit-user-select:none;
    -moz-touch-callout:none;
    -moz-user-select:none;
    user-select:none;
}

#gallery .tmbs .tmb .tmb_img .tmb_length{
	position: absolute;
	top: 0;
	right: 0;
	padding: 0 0.4em;
	font-size: 0.7em;
	line-height: 1.6;
    font-family: var(--font-alphanumeric);
	color: #fff;
	background-color: var(--color-text);
}

#gallery .tmbs .tmb h3{
	margin: -0.4em 0 0 -1em;
	padding: 0 0.5em 0.1em;
	line-height: 1.7;
	letter-spacing: 0.13em;
	font-weight: 500;
	z-index: 100;
}

#gallery .tmbs .tmb h3 span{
	background-color: #fff;
}

#gallery .tmbs .tmb .tags{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.2em 0.7em;
	margin: 0.1em 0 0 -0.5em;
}

#gallery .tmbs .tmb .tags > p{
	display: block;
	width: fit-content;
	font-size: 0.9em;
	color: var(--color-text);
	font-weight: 500;
	text-align: center;
	line-height: 1;
	z-index: 1;
}

#gallery .tmbs .tmb .tags > p.img_cp{
	font-size: 0.8em;
	letter-spacing: 0;
}

#gallery .tmbs .tmb .tags > p.img_cp::first-letter{
	font-size: 1.1em;
}

#blog{
	position: relative;
	display: flex;
	align-items: flex-start;
    gap: calc(var(--margin-base) * 0.7);
}

#blog_side{
	position: sticky;
	top: var(--margin-base);
	width: 10em;
}

#blog_side #backnumber{
	display: block;
	line-height: 2.2;
	text-align: center;
	background-color: var(--color-text);
	color: var(--color-base);
	font-family: var(--font-alphanumeric);
}

#blog_side #tag{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.6em;
	margin-top: 1em;
}

#blog_side #tag a{
	display: inline-block;
	padding: 0 0.7em;
	border: solid 1px var(--color-text);
	border-radius: 0.2em;
}

#blog_side #tag a.router-link-exact-active{
	border: solid 1px var(--color-main);
	color: var(--color-base);
	background-color: var(--color-main);
}

#blog_main{
	flex: 1;
	position: relative;
}

#blog_main article{
	position: relative;
	background-color: #fff;
	margin-top: 3rem;
	padding: var(--margin-base);
}

#blog_main article .jouhou{
	position: absolute;
	top: -3rem;
	left: 0;
	padding: 0 1em 0 0.5em;
	height: 3.1rem;
	display: flex;
	line-height: 4.2rem;
	background-color: #fff;
}

#blog_main article .jouhou::after{
    content: '';
    display: block;
    position: absolute;
    right: -2.5rem;
    top: 0;
    background: #fff;
    height: 100%;
    width: 2.52rem;
    clip-path: polygon(0 100%, 100% 100%, 0 0);
	z-index: -1;
}

#blog_main article .jouhou .article_date{
	padding: 0 1em;
	font-family: var(--font-alphanumeric);
	color: var(--color-main);
}

#blog_main article .jouhou .category{
	font-size: 0.8em;
	line-height: 4rem;
}

#blog_main article .jouhou .category::after{
	content: '｜';
}

#blog_main article .jouhou .category:last-child::after{
	content: none;
}

#blog_main article h1{
	margin: -1em 0 2em;
	padding-bottom: 0.8em;
	font-size: 1.3em;
	font-weight: bold;
	border-bottom: solid 1px var(--color-main);
}

#blog_main article h1{
	font-size: 1.2em;
	font-weight: bold;
}

.article_text{
	margin-bottom: 3em;
	text-align:justify;
}

.article_text > *{
	margin-bottom: 1.5em;
}

.article_text > *:last-child{
	margin-bottom: 0;
}

.article_text h2{
	margin-bottom: 0.8em;
	font-weight: 500;
	text-decoration: underline;
}

.article_text a{
	text-decoration: underline;
	color: var(--color-main);
}

.article_text ul{
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	padding-left: 2.4rem;
}

.article_text ul li{
    position: relative;
	font-weight: 500;
}

.article_text ul li::before{
    content:'\e2e6';
	display: block;
	position: absolute;
	left: -2.4rem;
	top: 0.3em;
	font-family: var(--font-icon);
    font-variation-settings:'wght' 300;
	font-size: 1.2em;
	line-height: 1;
	color: var(--color-main);
}

.article_images.thum1{
	float: left;
	margin: 0.5em 2.5em 1.5em 0;
	max-width: 30%;
}

.article_images.thum1.yoko{
	float: none;
	width: 100%;
	max-width: 100%;
	margin-right: 0;
}

.article_images{
	display: flex;
	gap: 1em;
	margin-bottom: 3em;
}

.article_images.thum2{
	aspect-ratio: 10 / 4;
}

.article_images.thum3{
	aspect-ratio: 10 / 5;
}

.article_images.thum4{
	aspect-ratio: 10 / 7;
}

.article_images img{
	object-fit: cover;
	object-position: 50% 20%;
	width: 100%;
	height: 100%;
}

.article_images.thum4 img,
.article_images.thum3 > img,
.article_images.thum2 img{
	width: calc(50% - 0.5em);
}

.article_images.thum8 img{
	width: calc(25% - 3em / 4);
	aspect-ratio: 1 / 1;
}

.article_images.thum6 img{
	width: calc(100% / 3 - 2em / 3);
	aspect-ratio: 1 / 1;
}

.article_images.thum4 img,
.article_images.thum3 div img{
	height: calc(50% - 0.5em);
}

.article_images.thum4,
.article_images.thum6,
.article_images.thum8{
	flex-wrap: wrap;
}

.article_images.thum3 > div{
	width: calc(50% - 0.5rem);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1em;
}

.article_images.thum3 > div img{
	width: 100%;
}

article .prevnext{
	display: flex;
	justify-content: space-between;
	gap: 2em;
	margin-bottom: -0.8em;
}

article .prevnext > *{
	display: block;
}

article .prevnext .off{
	opacity: 0.5;
}

article .prevnext .prev,
article .prevnext .next{
	background-color: rgba(0,0,0,0.05);
	line-height: 3.6rem;
	border-radius: 1.8rem;
}

article .prevnext .prev{
	padding: 0 1.4em 0 1em;
}

article .prevnext .next{
	padding: 0 0.6em 0 1.4em;
}

article .prevnext .prev::before,
article .prevnext .next::after{
	font-family: var(--font-icon);
    font-variation-settings:'wght' 300;
	font-size: 1.2em;
	vertical-align: -0.2em;
	color: var(--color-main);
}

article .prevnext .prev::before{
    content:'\e5e0';
}

article .prevnext .next::after{
    content:'\e5e1';
	margin-left: 0.1em;
}

#blog_list{
	flex: 1;
	max-width: 100%;
}

#blog_list button#more{
	display: block;
	margin: var(--margin-base) auto 0;
	padding: 0 3em;
	font-size: 1.1em;
	line-height: 2.5;
	letter-spacing: 0.3em;
	font-family: var(--font-alphanumeric);
	background-color: rgba(0,0,0,0.1);
}

#blog_list #article_list{
	position: relative;
	display: flex;
	flex-wrap: wrap;
    gap: calc(var(--margin-base) * 0.7);
}

#blog_list #article_list article{
    position: relative;
    width: calc(100% / 2 - calc(var(--margin-base) * 0.7) * 1 / 2);
    height: auto;
	animation: fadein 1.5s ease-out;
    cursor: pointer;
	margin-top: 1.9rem;
	background-color: #fff;
}

@keyframes fadein {
	0% {opacity: 0}
	100% {opacity: 1}
}

#blog_list #article_list article > a{
	display: block;
	padding: calc(var(--margin-base) / 2);
	display: flex;
	align-items: center;
	gap: calc(var(--margin-base) * 0.4);
}

#blog_list #article_list article .date{
	position: absolute;
	top: -1.9rem;
	left: 0;
	padding: 0 0.7em 0 1.5em;
	height: 2rem;
	font-family: var(--font-alphanumeric);
	font-size: 0.9em;
	line-height: 3.1rem;
	color: var(--color-main);
	background-color: #fff;
}

#blog_list #article_list article .date::after{
    content: '';
    display: block;
    position: absolute;
    right: -2rem;
    top: 0;
    background: #fff;
    height: 100%;
    width: 2.02rem;
    clip-path: polygon(0 100%, 100% 100%, 0 0);
	z-index: -1;
}

#blog_list #article_list article .tmb img{
	width: 10rem;
	height: auto;
	aspect-ratio: 1/1;
	object-fit: cover;
	object-position: center 20%;
}

#blog_list #article_list article .tmb .noimage{
	position: relative;
	width: 10rem;
	height: auto;
	aspect-ratio: 1/1;
	background-color: var(--color-base);
	display: flex;
	align-items: center;
	justify-content: center;
}

#blog_list #article_list article .tmb .noimage i.material-symbols-outlined{
	display: block;
	font-size: 3em;
	color: rgba(0,0,0,0.3);
}

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

#blog_list #article_list article .info h3{
	flex: 1;
	margin: 0 0 0.6em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 1.1em;
	line-height: 1;
	font-weight: 500;
}

#blog_list #article_list article .text{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	text-align: justify;
	font-size: 0.9em;
	line-height: 1.6;
}

#off h2{
	font-size: 1.6em;
	letter-spacing: 0.2em;
	font-weight: bold;
}

#about h3,
#contact h3,
#off h2{
	position: relative;
	width: fit-content;
}

#about h3::after,
#contact h3::after,
#off h2::after{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	right: -2.3em;
	margin: auto 0;
	width: 1.8em;
	height: 2px;
	background-color: var(--color-main);
}

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

#off #book_list{
	display: flex;
	flex-wrap: wrap;
    gap: calc(var(--margin-base) * 0.7);
}

#off #book_list .book{
	display: flex;
    gap: calc(var(--margin-base) * 0.5);
    padding: calc(var(--margin-base) * 0.5);
	width: calc(100% / 2 - var(--margin-base) * 0.7 * 1 / 2);
	background-color: #fff;
}

#off #book_list .book .hyoushi{
	width: 30%;
}

#off #book_list .book .hyoushi img{
	width: 100%;
}

#off #book_list .book .book_info{
    flex: 1;
}

#off #book_list .book h4{
	font-size: 1.2em;
	line-height: 1.5;
	font-weight: bold;
}

#off #book_list .book p.price{
	margin: 0.5em 0;
	font-size: 0.95em;
	font-family: var(--font-alphanumeric);
	color: var(--color-main);
}

#off #book_list .book p.cp{
	margin: 0.3em 0 0.8em;
	padding-bottom: 1em;
	line-height: 1.4;
	border-bottom: solid 1px #dadada;
}

#off #book_list .book p.cp span{
	display: inline-block;
	margin-right: 0.5em;
	padding: 0 0.5em;
	font-size: 0.9em;
	background-color: rgba(0,0,0,0.1);
}

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