@charset "UTF-8";

body{
	font-size: 1.6rem;
	line-height: 1.8;
	letter-spacing: 0.2rem;
}


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

section{
	padding: 10rem 12rem 12rem;
}

section h2{
	margin-bottom: 7rem;
	font-size: 2.5rem;
	letter-spacing: 0.5rem;
}

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



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



/* ↓top */

section#top{
	padding: 6rem 7rem;
}

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

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

#top h1{
	font-size: 8rem;
	letter-spacing: 0.6rem;
}


#top nav{
	flex-direction: column;
	width: fit-content;
	align-items: start;
	font-size: 2rem;
	letter-spacing: 0.6rem;
}


#top nav a{
	margin-top: 2.5rem;
	padding: 0 2rem;
	width: 100%;
	line-height: 3.5rem;
	text-align: left;
}


#top nav.view{
	flex-direction: row;
	position: fixed;
	top: 2rem;
	right: 0;
	padding-bottom: 0.5rem;
	font-size: 1.8rem;
	letter-spacing: 0.2rem;
	border-bottom-width: 0.1rem;
	z-index: 10;
}

#top nav.view,
#top nav.view a,
#top nav.view a i{
    animation: fade .3s;
}

#top nav.view a{
	margin: 0 2.5rem 0 0;
	padding: 0;
	width: fit-content;
	line-height: 1;
}

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

#scroll{
	bottom: 3rem;
	letter-spacing: 0.4rem;
}

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



/* ↓me */

#aboutme,
#about > div{
	display: flex;
	justify-content: center;
	}

#aboutme{
	margin-top: -2rem;
}

img#icon{
	margin-right: 5rem;
	width: 20rem;
	height: 20rem;
}

#aboutme h3{
	margin-bottom: 1rem;
	font-size: 2.3rem;
	letter-spacing: 0.3rem;
}

#link{
	margin: 5rem auto 0;
	gap: 2rem 2.5rem;
	max-width: 120rem;
}

#link a i{
	width: 7rem;
	height: 7rem;
	line-height: 7rem;
	font-size: 3rem;
	border-width: 0.2rem;
}

#link a span{
	font-size: 1.3rem;
}

/* ↓テキスト関連 */

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

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

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

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

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


/* ↓illust */

.imgbox{
	max-width: 120rem;
	margin: -1.5rem auto 0;
	padding-bottom: 5rem;
}

.pic,
details .pic:nth-child(2){
	width: calc(25% - 3rem);
	margin: 1.5rem;
}

.pic::before,
details .pic:nth-child(2)::before {
	padding-top: 60%;
}

.pic:first-child,
.pic:nth-child(2){
	width: calc(50% - 3rem);
}

.pic:first-child::before {
	padding-top: calc((100% - 3rem) * 0.6 + 3rem);
}

.pic:nth-child(2)::before{
	padding-top: calc((100% - 3rem) * 0.3);
}

.pic img{
	filter: sepia(40%);
	transition: 0.5s;
}

.pic:hover img{
	transform: scale(1.1, 1.1);
	filter: sepia(0%);
	}

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

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

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



/* ↓offline */

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

.booklist{
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
	max-width: 120rem;
	margin: -5rem auto 0;
}

.book{
	width: 47%;
	margin: 7rem 0 0;
	padding: 1.5rem 2rem 1.5rem 1.5rem;
}

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

.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: 2.5rem;
	width: 33%;
}

.info{
	margin-bottom: 3.5rem;
}

.book h4{
	font-size: 1.7rem;
	line-height: 1.2;
}

.price{
	margin: 0.5rem 0;
	font-size: 1.4rem;
}

.sample{
	bottom: 1rem;
}

.sample a.btn{
	padding: 0 2rem;
	font-size: 1.3rem;
	line-height: 2.5rem;
}

.book .btn a{
	letter-spacing: 0.2rem;
	margin-top: 0.6rem;
	font-size: 1.2rem;
	line-height: 3rem;
	border-width: 0.2rem;
}

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



/* ↓about */

#site{
	margin-right: 7rem;
}

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

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

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

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

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

#text h3{
	font-size: 1.8rem;
	margin-bottom: 0.5rem;
}

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

#bkm a{
	font-size: 1.7rem;
	line-height: 2;
}

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



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

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

#page_top a {
	width: 4rem;
	height: 4rem;
	font-size: 1.5rem;
	line-height: 4rem;
}