@charset "UTF-8";
.article{
	padding: 50px 0 100px;
}

.article .cont-inn{
	display: flex;
	gap:0 60px
	
}
.article .side-box{
	width:26%
}
.article .main-box{
	width:calc(100% - 60px - 26%)
}

.side-ttl{
	font-size:2.1rem;
	font-weight: 600;
	padding-left: 2em;
	margin-bottom: 0;
	border-bottom:1px solid #282828;
	position: relative
}
.side-ttl::before{
	position: absolute;
	content:'';
	width:1.4em;
	height:1.4em;
	background: #e3e3e3;
	border-radius: 50%;
	top:0;
	bottom:0;
	left:0;
	margin: auto
}
.side-ttl::after{
	position: absolute;
	content:'';
	width:0.3em;
	height:0.3em;
	border-right:2px solid #282828;
	border-bottom:2px solid #282828;
	transform: rotate(45deg);
	top:-0.1em;
	bottom:0;
	left:0.5em;
	margin: auto
	
}

.cat-wrap{
	margin-bottom: 50px
}
.cat-wrap .cat-item{
	width:100%;
	padding:0.8em 0;
	border-bottom:#dfdedb 1px solid
}
.cat-wrap a{
	padding:0 0.5em;
	width:100%;
	height:100%;
	color:#282828;
	font-size:1.6rem;
	line-height: 1.2;
	font-weight: 600;
}

.cat-wrap a span{
	display: inline-block
}

.search-wrap{
	margin-top: 20px;
	margin-bottom: 60px
}
.search-box form{
	width:100%;
	margin: inherit
}
.search-box input{
	width:calc(100% - 60px);
}
.search-box button{
	width:60px;
}
.search-box button img{
	width:50%;
}

/*-- main --*/
.article-ttl{
	margin-bottom: 10px;
	border-bottom:1px solid #282828;
	font-family: "Noto Serif JP", serif;
}
.article-ttl span{
	display: block;
	font-size:3.0rem;
	font-weight: 500;
	line-height: 1.4;
	padding: 0 0.5em;
	margin-bottom: 0.3em;
	border-left:4px solid #ec7033;
}
.article-date{
	text-align: right;
	font-size:1.4rem
}
.article-top-box{
	display: flex;
	align-items: center;
	margin:20px 0 70px
}
.article-top-box .img{
	width:45%;
	padding: 0 6%;
}
.article-top-box .txt{
	width:55%
}
.article-top-box .article-red-txt{
	font-size:2.6rem;
	line-height: 1.2;
	color:#c81e32;
	font-weight: 600;
	border-bottom:1px solid #282828;
	  text-indent: -1em;
  padding-left: 1em;
}
.article-top-box .article-note{
	font-size:1.4rem;
	margin: 1em 0 2em;
	text-indent: -1em;
  padding-left: 1em;
}
.article-top-box .btn-page-cta-contact p{
	font-size:2.5rem;
}

.article-bottom-box {
	background: #f9f7f3;
	padding: 40px;
	font-size:1.6rem;
}
.article-bottom-box span{
	font-weight: 600
}
.article-bottom-box p+p{
	margin-top: 1em
}

.article-bottom-box a{
	color:#ec7033;
	text-decoration: underline;
	font-weight: 600
}

.end-box{
	margin-top: 60px;
	font-size:1.6rem;
}
.end-box .end-ttl{
	font-size:2.2rem;
	border-bottom:double 3px #282828;
	color:#ec7033;
	font-weight: 600;
}
.end-box ul{
	margin: 1em 0
}
.end-box li::before{
	content:'・';
	color:#ec7033;
}



@media (max-width: 1080px){

	.article-top-box .btn-page-cta-contact p{
		font-size:2.4vw;
		border: 0.4vw solid #ec7033;
	}
}
@media (max-width: 768px){
	.article{
		padding: 10vw 0
	}
	
	.article .cont-inn{
		display: flex;
		flex-direction: column;
		gap:8vw 0

	}
	.article .side-box{
		width:100%
	}
	.article .main-box{
		width:100%
	}

	.side-ttl{
		font-size:4.8vw;
		margin-bottom: 2vw;
	}

	.side-ttl::after{
		border-right:0.3vw solid #282828;
		border-bottom:0.3vw solid #282828;
	}
	.cat-wrap{
		display: flex;
		flex-wrap: wrap;
		margin-bottom:6vw
	}
	.cat-wrap .cat-item{
		width:50%;
		}
	.cat-wrap a{
			display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
		font-size:3.2vw;
	}
	.cat-wrap .cat-item:not(:nth-child(4n)) a{
		border-right:none
	}
	.cat-wrap .cat-item:nth-child(odd) a{
		border-right:#dfdedb 1px solid
	}
	
	.search-wrap{
		margin-top: 4vw;
		margin-bottom:0
	}
	.search-box input{
		width:calc(100% - 18vw);
	}

	.search-box button{
		width:18vw;
	}
	.search-box button img{
		width:30%;
	}
	/*-- main --*/
	.article-ttl{
		margin-bottom: 2vw;
	}
	.article-ttl span{
		font-size:4.2vw;
		border-left:1vw solid #ec7033;
	}
	.article-date{
		text-align: right;
		font-size:3vw
	}
	.article-top-box{
		display: flex;
		align-items: center;
		flex-direction: column;
		margin:4vw 0 6vw;
		gap:6vw 0
	}
	.article-top-box .img{
		width:100%;
		padding: 0 15%;
	}
	.article-top-box .txt{
		width:100%
	}
	.article-top-box .article-red-txt{
		font-size:5vw;
	}
	.article-top-box .article-note{
		font-size:3.4vw;
	}
	.article-top-box .btn-page-cta-contact{
		display: block;
		margin: 0 auto;
		width:90%;
	}
	.article-top-box .btn-page-cta-contact p{
		font-size: 4.26vw;
		border: 0.6vw solid #ec7033;
	}		


	.article-bottom-box {
		padding: 6vw;
		font-size:3.4vw;
	}
	.end-box{
		margin-top: 6vw;
		font-size:3.4vw;
	}
	.end-box .end-ttl{
		font-size:4.4vw;
		border-bottom:double 3px #282828;
		color:#ec7033;
		font-weight: 600;
	}

}