@charset "utf-8";

/* --------------------------------------------
temlplate by pipi
https://pipi.noor.jp/t/
release date: 2024-07-12
-------------------------------------------- */
h2 {
margin : 0;
}

:root {
	--main-font-family: "Noto Sans JP", "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Segoe UI", "Meiryo", sans-serif;
	--main-text-color: #333;
	--main-text-rgb: 51, 51, 51;
	--sub-text-color: #fff;
	--main-bg-design: #fff;

	--text-color-01: rgba(var(--main-text-rgb),0.1);
	--text-color-02: rgba(var(--main-text-rgb),0.2);
	--text-color-03: rgba(var(--main-text-rgb),0.3);
	--text-color-05: rgba(var(--main-text-rgb),0.5);
	--text-color-07: rgba(var(--main-text-rgb),0.7);
	--text-color-08: rgba(var(--main-text-rgb),0.8);

	--padding-btn: 0.6em 1em 0.7em;
	--radius:5px;
	--red: #c00;
	--shadow: 2px 2px 5px var(--text-color-03);
	--width-moderate: 900px;

	--radius:30px; /* ボタンなどの角丸サイズ。0～30pxくらい推奨 */
}

/* BOOKS
-------------------------------------------- */
div.books{
	display: grid;
	grid-gap: 5rem 3rem;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	margin-bottom: 5rem;
}
article{
	display: grid;
	grid-template-rows: subgrid;
	grid-row: span 3;
	gap: 1rem;
}
.cover{
	display: flex;
	justify-content: center;
	align-items: end;
}
.cover img{
	box-shadow: var(--shadow);
	max-width: 300px;
	width: 100%;
}
.title{
	border-bottom: 1px solid var(--text-color-03);
	line-height: 1.4;
	margin-bottom: 2px;
	padding-bottom: 0.25em;
	text-align:center;
}
.chara{
	color: var(--text-color-07);
	margin-bottom: 1em;
	text-align:center;
}
.r18{
	color: var(--red);
}
.theme{
	margin-top: 1em;
}
article p{
	margin-bottom: 1em;
}
.buttons{
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	padding-top: 5px;
}
.buttons > *{
	border-radius: var(--radius);
	flex-grow: 1;
	line-height: 1.4em;
	padding: 0.5em 1em 0.6em;
	text-align: center;
}
.buttons a{
	background-color: var(--main-text-color);
	color: var(--sub-text-color);
	text-decoration: none;
	opacity: 0.8;
}
.buttons a:hover{
	opacity: 1;
}
.buttons span{
	background-color: var(--text-color-02);
}
.buttons a.alice{	background-color: #1387cd;	color: #fff;}
.buttons a.booth{	background-color: #DC3C3F;	color: #fff;}
.buttons a.froma{	background-color: #FF8297;	color: #fff;}
.buttons a.melon{	background-color: #18BD67;	color: #fff;}
.buttons a.tora{	background-color: #F08000;	color: #fff;}
.buttons a.pixiv{	background-color: #0096FA;	color: #fff;}


details{
	margin: 5px 0 0;
}
details summary{
	line-height: 1.4;
}
div.books article ul{
	margin: 0;
	padding-left: 1.5em;
	position: relative;
}
div.books article li{
	list-style: none;
}
div.books article li::before{
	content: "⚠";
	left: 0;
	position: absolute;
}



/* BOOKS｜説明長め
-------------------------------------------- */
div.books.long{
	display: block;
	margin: 0 auto 5rem;
	max-width: var(--width-moderate);
}
div.books.long article{
	display: flex;
	gap: 2rem;
	margin-bottom: 5rem;
}
div.books.long .cover{
	display: block;
	flex-basis: 300px;
}
div.books.long .detail{
	flex-basis: 600px;
}
div.books.long .title,
div.books.long .chara{
	text-align: left;
}
div.books.long ul{
	clear: both;
	margin-top: 1rem;
}
div.books.long .buttons{
	clear: both;
	margin-top: 1rem;
}
div.books.rv article:nth-child(even){
	flex-direction: row-reverse;
}


/* 不具合対応
-------------------------------------------- */
p#fuwaimg_caption_text {
	width: unset;
}


/* responsive｜スマホ表示時の調整
-------------------------------------------- */
@media (max-width: 600px) {
	.palette{
		grid-template-columns: 1fr 1fr;
	}
	.books.resp{
		grid-gap: 5rem;
	}
	.books.resp article{
		display: grid;
		grid-gap: 15px;
		grid-template-columns: 5fr 8fr;
		grid-template-rows: unset;
		grid-row: unset;
	}
	.books.resp .cover{
		align-items: start;
		grid-area: 1 / 1 / 2 / 2;
	}
	.books.resp .title,
	.books.resp .chara{
		text-align: left;
	}
	.books.resp .detail{
		grid-area: 1 / 2 / 2 / 3;
	}
	.books.resp .buttons{
		grid-area: 2 / 1 / 3 / 3;
	}

	div.books.long article{
		display: block;
	}
	div.books.long .cover{
		float: left;
		width: 40%;
		padding: 0 1rem 1rem 0;
	}
	div.books.rv article:nth-child(even) .cover{
		float: right;
		width: 40%;
		padding: 0 0 1rem 1rem;
	}
}


/* embeds -------------------------------------------- */
img{
	height: auto;
	max-width:100%;
	object-fit: cover;
	transition: transform 0.1s ease-in-out;
	vertical-align: bottom;
}
img.circle,
.circle img{
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	object-position: 50% 0%;
	width: 100%;
}
img.square,
.square img{
	aspect-ratio: 1 / 1;
	object-position: 50% 0%;
	width: 100%;
}
img.landscape,
.landscape img{
	aspect-ratio: 1.9 / 1;
	object-position: 50% 0%;
	width: 100%;
}
img.book,
.book img{
	aspect-ratio: 1 / 1.41;
	object-position: 50% 0%;
	width: 100%;
}
img.emoji{
	width: 1em;
	height: 1em;
	vertical-align: middle;
	margin: 0 3px 3px;
}
svg{
	fill: currentColor;
	height: auto;
	max-width: 100%;
	transition: all 0.3s ease-in-out;
	vertical-align: bottom;
}
.svg-symbol{
	display: none;
}
picture,video,canvas{
	display:block;max-width:100%;
}


/* responsive -------------------------------------------- */
@media (max-width: 600px) {
	main{
		font-size: ;
	}
	br.mobile{
		display: inline-block;
	}
	.mobile_hidden{
		display:none;
	}
}