@charset "UTF-8";

body{
	font-size: 1.4rem;
	line-height: 1.6;
	letter-spacing: 0.15rem;
}



/* ↓各セクションの余白 */

section{
	padding: 4rem 4rem 5rem;
}

section h2{
	margin-bottom: 4rem;
	font-size: 2rem;
	letter-spacing: 0.3rem;
}

section h2::before{
	bottom: -1rem;
	width: 5rem;
	height: 0.2rem;
}



/* ↓背景がなんかぼんやりするやつ */
#me,
#off,
#about{
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter:blur(4px);
}



/* ↓top */

#top{
	padding: 5rem 0;
	justify-content: center;
	align-items: center;
	align-content: center;
}

#top:before{
	content: '';
	display: block;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 13rem;
	background: linear-gradient( to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
}

#top::after{
	background-position: 50% 50%;
}

#top h1{
	position: absolute;
	bottom: 5rem;
	left: 0;
	right: 0;
	margin: auto;
	width: fit-content;
	font-size: 6rem;
	letter-spacing: 0.6rem;
}


#top nav{
	position: absolute;
	top: 0;
	margin: 0;
	width: 100vw;
	padding: 1rem 0;
	background: linear-gradient( to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
}

#top nav a{
	margin: 0 1.5rem;
	font-size: 1.6rem;
	line-height: 1;
}

#top nav a i{
	font-size: 0.6em;
}

#top nav a span{
	letter-spacing: 0.2rem;
}

#scroll{
	bottom: 2rem;
	letter-spacing: 0.3rem;
	font-size: 1.6rem;
}

#scroll i{
	margin-right: 1rem;
}



/* ↓me */

#aboutme{
}

img#icon{
	margin: 0 auto 2rem;
	width: 12rem;
	height: 12rem;
}

#aboutme h3{
	margin-bottom: 1rem;
	font-size: 1.8rem;
	letter-spacing: 0.3rem;
	text-align: center;
}

#link{
	margin: 3rem auto 0;
	justify-content: space-between;
	gap: 0.7rem 1rem;
}

#link a i{
	width: calc((100vw - 8rem) * 0.16);
	height: calc((100vw - 8rem) * 0.16);
	line-height: calc((100vw - 8rem) * 0.16);
	font-size: 2rem;
	border-width: 0.2rem;
}

#link::before,
#link::after{
	content: '';
	display: block;
	order: 1;
}

#link::before,
#link::after,
#adjust{
	width: calc((100vw - 8rem) * 0.167);
	height: 0;
}

#link a span{
	font-size: 1rem;
	letter-spacing: 0.1rem;
}

/* ↓テキスト関連 */

#aboutme h4{
	margin-bottom: 0.3rem;
}

#aboutme p + h4,
#aboutme ul + h4{
	margin-top: 1.8rem;
}

#aboutme p + ul,
#aboutme ul + p,
#text p + ul,
#text ul + p{
	margin-top: 1rem;
}

#aboutme ul,
#text ul{
	padding-left: 1.8rem;
}

#aboutme ul li,
#text ul li{
	padding: 0.3rem 0;
	line-height: 1.5;
}

#aboutme ul li::before,
#text ul li::before{
	left: -1.8rem;
}
	


/* ↓illust */

section#illust{
	padding: 5rem 2.5rem;
}

.imgbox{
	margin: -1.5rem auto 0;
	padding-bottom: 3.5rem;
}

.pic{
	width: calc(50% - 1.4rem);
	margin: 0.7rem;
}

.pic::before {
	padding-top: 70%;
}

.thum_caption{
	bottom: 0.5rem;
	right: 0;
	padding: 0 0.5rem;
	font-size: 1rem;
	line-height: 1.4rem;
}

summary.next{
	font-size: 1.6rem;
	letter-spacing: 0.2rem;
}

summary.next::before,
summary.next::after{
	margin: 0 1rem;
}



/* ↓offline */

#off > p{
	max-width: 120rem;
	margin: 2rem auto 3rem;
}

.book{
	width: calc(100% + 2rem);
	margin: 4rem -1rem 0;
	padding: 0.5rem;
	border-bottom-width: 0.2rem;
	}

.book::before, .book::after {
	content: '';
	width: 4rem;
	height: 4rem;
	position: absolute;
	border-style: solid;
	border-width: 0;
	border-color: #000;
}

.book::before {
	border-left-width: 0.1rem;
	border-top-width: 0.1rem;
	top: 0;
	left: 0;
}

.book::after {
	border-right-width: 0.1rem;
	border-bottom-width: 0.1rem;
	bottom: 0;
	right: 0;
}

.hyoushi{
	margin-right: 1.5rem;
	width: 35%;
	}

.info{
	padding-bottom: 3.5rem;
	}

.book h4{
	line-height: 1;
	}

.price{
	margin: 0.8rem 0 0;
	font-size: 1.1rem;
	}

.summary{
	font-size: 1.3rem;
	line-height: 1.4;
}

.sample{
	bottom: 0.5rem;
}

.sample a.btn{
	padding: 0 1rem;
	font-size: 1.2rem;
	line-height: 2.5rem;
	letter-spacing: 0.15rem;
}

.new::before{
	top: 0;
	left: 0;
	width: 2.5rem;
	height: 2.5rem;
	font-size: 1rem;
	line-height: 2.5rem;
	font-size: 1rem;
	letter-spacing: 0.1rem;
	font-weight: normal;
}



/* ↓about */

#site{
	margin-bottom: 3.5rem;
}

#site ul li{
	line-height: 3rem;
}

#site ul li span{
	border-bottom-width: 0.1rem;
	padding-top: 0.6rem;
}

#site ul li span:last-child{
	padding: 0 1rem 0 2rem;
	font-size: 1.6rem;
	letter-spacing: 0.2rem;
}

#text > *{
	margin-top: 3rem;
}

#text > *:first-child{
	margin-top: 0;
}

#text h3{
	font-size: 1.6rem;
	margin-bottom: 0.3rem;
}

#bkm h3 i{
	margin-right: 0.6rem;
}

#bkm a{
	font-size: 1.5rem;
}

#bkm a::after{
	margin-left: 0.5rem;
	font-size: 0.9em;
}

#bkm span{
	display: block;
	margin-bottom: 1rem;
}

#bkm span:last-child{
	margin-bottom: 0;
}



/* ↓トップに戻るボタン */

#page_top {
	bottom: 1rem;
	right: 1rem;
}

#page_top a {
	width: 3rem;
	height: 3rem;
	font-size: 1rem;
	line-height: 3rem;
}