@charset "utf-8";

.category_li{
	display: flex;
	flex-wrap: wrap;
}
.category_li li{margin: .5%;}
.category_li li *{
	font-size: 20px;
	padding: .7em 1.5em;
	border-radius: 30px;
	line-height: 1;
}
.category_li li p,.category_li li a:hover{
	color: #fff;
	background: #af1b14;
	border: 1px solid #af1b14;
}
.category_li li a{
	display: block;
	border: 1px solid #ccc;
	transition: .2s;
}
.column_li li:not(:last-child){margin-bottom: 25px;}
.column_li a{
	display: block;
	background: rgba(237, 227, 223, .3);
	padding: 40px 35px;
	border-radius: 20px;
	border: 1px solid rgba(237, 227, 223, 0);
	transition: .2s;
}
.column_li a:hover{
	background: transparent;
	border: 1px solid rgba(237, 227, 223, 1);
}
.column_li .column_title{margin-bottom: 30px;}
.column_title > div{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.column_li .column_title > div{margin-bottom: 20px;}
.column_title > div > p:first-child{
	font-family: 'Montserrat-Regular', sans-serif;
	font-size: 20px;
	margin-right: 1em;
}
.column_title > div > p:last-child{
	color: #af1b14;
	padding: .4em 1.2em;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 30px;
	width: fit-content;
}
.column_li .column_title h2{
	font-size: 24px;
	position: relative;
	padding-right: 2em;
}
.column_li .column_title h2::after{
	content: "";
	width: 1.5em;
	aspect-ratio: 1/1;
	background: url("../images/btn_red.webp") center / contain no-repeat;
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	transition: .2s;
}
.column_li a:hover h2::after{background-image: url("../images/btn_red2.webp");}
.column_li a > p{
	color: #4d4d4d;
	line-height: 1.7em;
}
.nav-links{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
}
.nav-links .prev:hover,.nav-links .next:hover{transform: scale(1.2);}
.nav-links .prev{margin-right: 45px;}
.nav-links .prev img{transform: rotate(180deg);}
.page-numbers{transition: .2s;}
.page-numbers:not(.prev):not(.next):not(.dots){
	width: 75px;
	padding: 15px 0;
	border-radius: 10px;
	font-family: 'Montserrat-Regular', sans-serif;
	text-align: center;
	font-size: 18px;
}
.page-numbers:not(.current):not(.prev):not(.next):not(.dots){
	border: 1px solid #ccc;
	color: #af1b14;
}
.page-numbers:not(.prev):not(.next){margin: .3%;}
.page-numbers.current,.page-numbers:not(.prev):not(.next):not(.dots):hover{
	background: #af1b14;
	color: #fff;
	border: 1px solid #af1b14;
}
.nav-links .next{margin-left: 45px;}

/* 詳細
-------------------------------------------*/
#detail_title{
	padding: 100px 0;
	position: relative;
	margin-bottom: 100px;
}
#detail_title::after{
	content: "";
	max-width: 1670px;
	width: 90%;
	height: 1px;
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	background: #ccc;
}
#detail_title #pankuzu{
	justify-content: flex-start!important;
	margin-bottom: 70px;
}
#detail_title .column_title h2{
	font-size: 35px;
	margin-bottom: .7em;
}
.detail p,.detail a,.detail li{font-size: 18px;}
.detail p{
	line-height: 1.7;
	margin-bottom: 1em;
}
#toc_container{
	max-width: 700px;
	width: 100%!important;
	margin: 60px auto 80px!important;
	background: linear-gradient(145deg,rgba(237,227,223,.3),rgba(244,235,230,.3))!important;
	padding: 55px 45px!important;
	border-radius: 20px;
	border: none!important;
}
#toc_container a{transition: .2s;}
#toc_container a:hover{opacity: .6;}
#toc_container > p{display: none!important;}
#toc_container > ul > li:not(:last-child){margin: 0 0 35px;}
#toc_container > ul > li > a{
	font-size: 20px;
}
#toc_container .toc_number{
	font-size: 1.2em;
	font-family: 'Montserrat-Regular', sans-serif;
	color: #af1b14;
}
#toc_container > ul > li > ul{margin: 20px 0 0 55px!important;}
#toc_container > ul > li > ul > li{padding-left: 1em!important;}
#toc_container > ul > li > ul > li:not(:last-child){margin-bottom: 15px;}
#toc_container > ul > li > ul > li a{
	font-size: 18px;
	color: #4d4d4d;
}
.toc_list > li > ul span{display: none!important;}
.detail h3{
	margin: 3em 0 1.8em;
	font-size: 30px;
	border-bottom: 1px solid #ccc;
	padding-bottom: 1.2em;
}
body{counter-reset: number 0;}
.detail h3::before{
	counter-increment: number 1;
	content: counter(number) "."; 
    margin-right: .3em;
    color: #af1b14;
	font-family: 'Montserrat-Regular', sans-serif;
	font-size: 1.1em;
}
.detail h4{
	margin: 2.5em 0 1.8em;
	font-size: 25px;
	position: relative;
	padding-left: 1em;
}
.detail h4::before{
	content: "";
	width: .2em;
	height: 100%;
	background: #af1b14;
	position: absolute;
	left: 0;
	top: 0;
}
.detail h5{
	font-size: 22px;
	margin: 2em 0 1.5em;
}
.detail ol,.detail ul:not(.toc_list){
	margin: 40px 0;
}
.detail ol li:not(:last-child),.detail ul:not(.toc_list) li:not(:last-child){margin-bottom: 1em;}
.detail ol li::marker{
	font-family: 'Montserrat-Regular', sans-serif;
	color: #ccc;
}
.detail ul:not(.toc_list) li{
	padding-left: 1.1em;
	position: relative;
}
.detail ul:not(.toc_list) li::before{
	content: "";
	width: .5em;
	aspect-ratio: 1 / 1;
	background: linear-gradient(145deg, #ede3df, #f4ebe6);
	border-radius: 50%;
	position: absolute;
	top: .5em;
	left: 0;
}
.detail a{
	color: #af1b14;
	text-decoration: underline;
	transition: .2s;
}
#toc_container a{
	color: inherit!important;
	text-decoration: inherit!important;
}
.detail a:hover{opacity: .6;}
.detail img{
	margin: 0 auto;
	display: block;
}

/* 1025px以下から
------------------------------------------------------------*/
@media only screen and (max-width:1025px){
	
	.category_li li *{font-size: 16px;}
	.column_li li:not(:last-child){margin-bottom: 15px;}
	.column_li a{
		padding: 30px 25px;
		border-radius: 15px;
	}
	.column_li .column_title{margin-bottom: 20px;}
	.column_li .column_title > div{margin-bottom: 15px;}
	.column_title > div > p:first-child{font-size: 16px;}
	.column_li .column_title h2{font-size: 18px;}
	.nav-links .prev img,.nav-links .next img{width: 35px;}
	.nav-links .prev{margin-right: 35px;}
	.page-numbers:not(.prev):not(.next):not(.dots){
		width: 55px;
		padding: 12px 0;
		font-size: 14px;
	}
	.nav-links .next{margin-left: 35px;}
	
	/* 詳細
	-------------------------------------------*/
	#detail_title{
		padding: 70px 0;
		margin-bottom: 70px;
	}
	#detail_title #pankuzu{margin-bottom: 40px;}
	#detail_title .column_title h2{font-size: 25px;}
	.detail p,.detail a,.detail li{font-size: 14px;}
	#toc_container{
		max-width: 550px;
		margin: 40px auto 50px!important;
		padding: 35px 30px!important;
		border-radius: 15px;
	}
	#toc_container > ul > li:not(:last-child){margin-bottom: 25px;}
	#toc_container > ul > li > a{font-size: 16px;}
	#toc_container > ul > li > ul{margin: 15px 0 0 35px!important;}
	#toc_container > ul > li > ul > li:not(:last-child){margin-bottom: 10px;}
	#toc_container > ul > li > ul > li a{font-size: 14px;}
	.detail h3{font-size: 22px;}
	.detail h4{font-size: 20px;}
	.detail h5{font-size: 18px;}
	.detail ol,.detail ul:not(.toc_list){margin: 30px 0;}
}

/* 750px以下から
------------------------------------------------------------*/
@media only screen and (max-width:750px){
	
	.column_li a{padding: 30px 15px;}
	.nav-links .prev{margin-right: 25px;}
	.page-numbers:not(.prev):not(.next):not(.dots){width: 45px;}
	.nav-links .next{margin-left: 25px;}
	
	/* 詳細
	-------------------------------------------*/
	#toc_container{padding: 35px 15px!important;}
	#toc_container > ul > li > ul{margin-left: 20px!important;}
}