@charset "utf-8";

/* プライバシーポリシー
------------------------------------------------------------*/
.pryvacy{margin-bottom: 0;}

/* ブログ
------------------------------------------------------------*/
.category{width: 246px;}
.category > p{
	padding-bottom: 15px;
	border-bottom: solid 1px #e2e2e2;
	margin-bottom: 25px;
}
.category li:not(:last-child){margin-bottom: 10px;}
.category li > *{
	font-size: 18px;
	padding: 5px 25px;
	border: solid 1px #1768ff;
	display: block;
	width: fit-content;
	border-radius: 20px;
}
.category li p{
	color: #fff;
	background-color: #1768ff;
}
.category li a{color: #1768ff;}
.blog-li{
	width: calc(100% - 246px - 80px);
	margin-bottom: 95px;
}
.blog-li > li{
	padding-bottom: 55px;
	border-bottom: dashed 1px #f4e051;
}
.blog-li > li:not(:last-child){margin-bottom: 55px;}
.blog-li > li div{
	display: flex;
	margin-bottom: 15px;
}
.blog-li > li div p:first-child{
	color: #1768ff;
	margin-right: 15px;
}
.blog-li > li div p:last-child{color: #999999;}
.blog-li > li div p:first-child,.blog-li li h3{font-family: 'NotoSansJP-Bold';}
.blog-li > li h3{
	font-size: 18px;
	margin-bottom: 20px;
	letter-spacing: 0.1em;
	transition: 0.3s;
	padding: 0 40px 0 35px;
}
.blog-li > li a > p{
	line-height: 1.8;
	padding-left: 35px;
}
.blog-li > li h3,.blog-li > li a > p{position: relative;}
.blog-li > li h3::before,.blog-li > li h3::after,.blog-li > li a > p::before{
	content: "";
    position: absolute;
}
.blog-li > li h3::before,.blog-li > li a > p::before{
	left: 0;
	width: 25px;
	top: 0.3rem
}
.blog-li > li h3::before{
	height: 20px;
	background: url("../images/faq_Q.webp") center / contain no-repeat;
}
.blog-li > li a > p::before{
	height: 16px;
	background: url("../images/faq_A.webp") center / contain no-repeat;
}
.blog-li > li h3::after{
    width: 9px;
    height: 18px;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    -webkit-mask: url(../images/arrow.svg) no-repeat center;
    -webkit-mask-size: contain;
    mask: url(../images/arrow.svg) no-repeat center;
    mask-size: contain;
	background-color: #1768ff;
}
.blog-li > li a:hover h3{color: #1768ff;}

#pager{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 364px;
	margin: 0 auto;
}
#pager li{margin: 0 10px;}
#pager > .prev{margin-right: 20px;}
#pager > .next{margin-left: 20px;}
#pager li:not(.first):not(.prev):not(.next):not(.last){width: 8%;}
#pager li:not(.first):not(.prev):not(.next):not(.last) > *{
	display: block;
	text-align: center;
	font-size: 20px;
	font-family: 'NotoSansJP-Bold';
	padding-bottom: 10px;
}
#pager li span{
	color: #1768ff;
	border-bottom: solid 1px #1768ff;
}
.first a,.prev a,.next a,.last a{
	display: flex!important;
	align-items: center;
}
#pager > .prev,#pager > .last{transform: scale(-1);}

/* 詳細
------------------------------------------------------------*/
.detail-box{
	padding: 65px 70px;
	border: solid 3px #f2f7f9;
	border-radius: 20px;
	margin-bottom: 75px;
}
.detail_title ul{
	display: flex;
	align-items: center;
}
.detail_title h2,.entry h3,.entry h4{font-family: 'NotoSansJP-Bold';}
.detail_title ul li:first-child{margin-right: 25px;}
.detail_title ul li:last-child{color: #999;}
.detail_title h2{
	font-size: 24px;
	letter-spacing: 0.1em;
	position: relative;
	padding: 0 0 25px 50px;
	border-bottom: dotted 2px #f4e051;
}
.entry{
	padding-left: 50px;
	position: relative;
}
.detail_title h2::before,.entry::before{
	content: "";
	position: absolute;
	width: 35px;
	left: 0;
	top: 0.4rem;
}
.detail_title h2::before{
	height: 27px;
	background: url(../images/faq_Q.webp) center / contain no-repeat;
}
.entry::before{
	height: 23px;
	background: url(../images/faq_A.webp) center / contain no-repeat;
}
.entry > *:first-child{padding-top: 0 !important;}
.entry > *:last-child{margin-bottom: 0!important;}
.entry h3,.entry h4{
	margin-bottom: 30px;
	position: relative;
	letter-spacing: 0.08em;
	padding-top: 35px;
}
.entry h3{font-size: 22px;}
.entry h4{font-size: 20px;}
.entry > h4:first-child::before{top: 0.5rem;}
.entry p{
	line-height: 1.8;
	margin-bottom: 20px;
}
.entry ul,.entry ol{margin: 30px 0;}
.entry ul li:not(:last-child),.entry ol li:not(:last-child){margin-bottom: 5px;}
.entry ul li {
    position: relative;
	padding-left: 20px;
}
.entry ul li::before {
    content: "";
    background: #1768ff;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: absolute;
    top: .55rem;
    left: 0;
}
.entry ol{
	list-style-type:decimal;
	padding-left: 15px;
}
.entry ol li::marker{color: #1768ff;}
.entry a{
	color: #1768ff;
    text-decoration: underline;
    transition: .3s;
}
.detail .btn{
	max-width: 400px;
	background: linear-gradient(to right,#1768ff,#22a9f4);
	color: #fff;
	border-radius: 40px;
	text-align: center;
	margin: 0 auto;
	padding: 20px 0;
}
.detail .btn::after{background: #fff;}
	
/* 1025px以下から
------------------------------------------------------------*/
@media only screen and (max-width:1025px){
	
	/* ブログ
	------------------------------------------------------------*/
	.category{width: 25%;}
	.category > p{
		padding-bottom: 10px;
		margin-bottom: 15px;
	}
	.category li:not(:last-child){margin-bottom: 5px;}
	.category li > *{
		font-size: 16px;
		padding: 3px 20px;
	}
	.blog-li{
		width: 70%;
		margin-bottom: 60px;
	}
	.blog-li > li{padding-bottom: 40px;}
	.blog-li > li:not(:last-child){margin-bottom: 40px;}
	.blog-li > li div{margin-bottom: 10px;}
	.blog-li > li div p:first-child{margin-right: 10px;}
	.blog-li > li h3{
		font-size: 15px;
		margin-bottom: 15px;
		padding: 0 20px 0 30px;
	}
	.blog-li > li a > p{padding-left: 30px;}
	.blog-li > li h3::before,.blog-li > li a > p::before{
		width: 20px;
		top: 0.4rem;
	}
	.blog-li > li h3::before{height: 16px;}
	.blog-li > li h3::after{
		width: 7px;
		height: 14px;
	}
	.blog-li > li a > p::before{height: 13px;}
	#pager{width: 280px;}
	#pager li{margin: 0 6px;}
	#pager > .prev{margin-right: 10px;}
	#pager > .next{margin-left: 10px;}
	#pager li:not(.first):not(.prev):not(.next):not(.last) > *{
		font-size: 16px;
		padding-bottom: 5px;
	}
	.first a{
		width: 9px;
		height: 10px;
	}
	
	/* 詳細
	------------------------------------------------------------*/
	.detail-box{
		padding: 60px 40px;
		border-radius: 10px;
		margin-bottom: 65px;
	}
	.detail_title ul li:first-child{margin-right: 15px;}
	.detail_title h2{
		font-size: 22px;
		padding: 0 0 20px 45px;
	}
	.entry{padding-left: 45px;}
	.detail_title h2::before,.entry::before{width: 30px;}
	.detail_title h2::before{height: 23px;}
	.entry::before{height: 19px;}
	.entry h3,.entry h4{
		margin-bottom: 20px;
		padding-top: 25px;
	}
	.entry h3{font-size: 20px;}
	.entry h4{font-size: 18px;}
	.entry p{margin-bottom: 15px;}
	.entry ul,.entry ol{margin: 20px 0;}
	.entry ul li {padding-left: 15px;}
	.entry ul li::before {
		width: 7px;
		height: 7px;
	}
	.detail .btn{
		max-width: 300px;
		padding: 15px 0;
	}
}

/* 750px以下から
------------------------------------------------------------*/
@media only screen and (max-width:750px){
	
	/* ブログ
	------------------------------------------------------------*/
	.category,.blog-li{width: 100%;}
	.category{margin-bottom: 50px;}
	.category-li{
		display: flex;
		flex-wrap: wrap;
	}
	.category li{
		width: fit-content;
		margin: 0.5%;
	}
	.category li > *{padding: 3px 15px;}
}

/* 500px以下から
------------------------------------------------------------*/
@media only screen and (max-width:500px){
	
	/* 詳細
	------------------------------------------------------------*/
	.detail-box{padding: 30px 20px 30px 15px;}
	.detail_title ul{
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.detail_title ul li,.detail_title ul li > a{font-size: 14px;}
	.detail_title ul li:first-child{margin-right: 0;}
	.detail_title h2,.entry h3{font-size: 18px;}
	.entry h4{font-size: 16px;}
}