@charset "utf-8";

.post-article .page-content-inner,
.category-menu-blog-article .page-content-inner{
	margin: 0 auto;
}

.blog-content{
	padding: 0 30px;
}
.blog-content-inner{
	max-width: 1080px;
	width: 100%;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 260px;
	grid-gap: 50px;
}

@media screen and (max-width: 1023px) and (min-width: 768px) {
	.blog-content-inner{
		max-width: 1080px;
		width: 100%;
		margin: 0 auto;
		display: grid;
		grid-template-columns: 1fr;
		grid-gap: 50px;
	}
}

@media screen and (max-width: 767px) {
	.blog{
        padding-block: 63px 0;
	}
	.blog-content{
		padding: 0 20px;
		margin-block: -68px 0;
	}
	.blog-content-inner{
		display: grid;
		grid-template-columns: 1fr;
		grid-gap: 80px;
	}
}

.blog-h2-title{
	font-weight: 700;
	font-size: 3.4rem;
	line-height: 1.5;
	letter-spacing: .05em;
}

@media screen and (max-width: 767px) {
	.blog-h2-title{
		font-weight: 700;
		font-size: 2.4rem;
		line-height: 1.5;
		letter-spacing: .1em;
	}
}

/***************

SESブログ

***************/

.blog-block{
	font-family: var(--font-noto);
	margin-block: 40px 0;
}
.blog-block-list > li a{
	display: grid;
	grid-template-columns: 125px 1fr;
	grid-gap: 33px;
	border-bottom: dotted 2px #adadad;
	padding-block: 0 22px;
	transition: all .3s;
}
.blog-block-list > li a:hover{
	opacity: .7;
}
.blog-block-list > li + li{
	margin-block: 22px 0;
}
.blog-block-thumb img{
	width: 100%;
	height: 85px;
	border-radius: 10px;
	object-fit: cover;
}
.blog-block-post{
	padding-block: 13px 0;
}
.blog-block-post-data{
	display: flex;
	align-items: center;
}
.blog-block-post-ymd{
	margin-inline: 0 12px;
}
.blog-block-post-ymd p{
	font-weight: 500;
	font-size: 1.3rem;
	line-height: 1;
	color: #adadad;
}
.blog-block-post-category p{
	position: relative;
	padding: 5px 13px;
	z-index: 3;
}
.blog-block-post-category p{
	font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Noto Sans JP", sans-serif;
	font-weight: bold;
	font-size: 1.0rem;
	line-height: 1;
	color: #fff;
}
.blog-block-post-category p::after{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(
		to bottom right,
		#d85d62 0%,
		#dc5d3c 75%,
		#de5d2e 100%
	);
	border-radius: 9999px;
	z-index: -1;
}
.blog-block-post-title{
	margin-block: 10px 0;
}
.blog-block-post-title p{
	font-weight: 700;
	line-height: 2;
	color: var(--color-black);
}

@media screen and (max-width: 767px) {
	.blog-block{
		margin-block: 20px 0;
	}
	.blog-block-list > li a{
		display: grid;
		grid-template-columns: 98px 1fr;
		grid-gap: 14px;
		padding-block: 0 18px;
	}
	.blog-block-list > li a:hover{
		opacity: 1;
	}
	.blog-block-list > li + li{
		margin-block: 18px 0;
	}
	.blog-block-thumb img{
		height: 67px;
	}
	.blog-block-post{
		padding-block: 0;
	}
	.blog-block-post-ymd{
		margin-inline: 0 8px;
	}
	.blog-block-post-ymd p{
		font-weight: 500;
		font-size: 1.1rem;
		line-height: 1;
		color: #adadad;
	}
	.blog-block-post-category p{
		position: relative;
		padding: 4px 12px;
		z-index: 3;
	}
	.blog-block-post-title{
		margin-block: 5px 0;
	}
	.blog-block-post-title p{
		font-weight: 700;
		line-height: 1.5;
		color: var(--color-black);
	}
}

/***************

SESブログ - カテゴリー

***************/

.ses-blog{
	position: absolute;
	top: -10px;
	left: 0;
	width: 100%;
}
.ses-blog::before{
	content: 'SESブログ';
	position: absolute;
	top: 0;
	left: 0;
	font-weight: 700;
	font-size: 2.1rem;
	line-height: 1;
	letter-spacing: .1em;
	color: #fff;
}
.blog-category-block-list{
	font-family: var(--font-noto);
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 46px 19px;
}
.blog-category-block-list > li a{
	display: block;
	height: 100%;
	transition: all 0.3s;
}
.blog-category-block-list > li a:hover{
	opacity: .7;
}
.blog-category-block-thumb img{
	width: 100%;
	height: 166px;
	border-radius: 10px;
	object-fit: cover;
}
.blog-category-block-post-ymd{
	margin-block: 11px 0;
}
.blog-category-block-post-ymd p{
	font-weight: 400;
	line-height: 1;
	color: var(--color-black);
}
.blog-category-block-post-title{
	margin-block: 8px 0;
}
.blog-category-block-post-title p{
	font-weight: 700;
	font-size: 1.8rem;
	line-height: 1.77;
	color: var(--color-black);
}

@media screen and (max-width: 767px) {
	.blog-category{
		padding-block: 63px 0;
	}
	.ses-blog{
		position: absolute;
		top: -10px;
		left: 0;
		width: 100%;
	}
	.ses-blog::before{
		content: 'SESブログ';
		position: absolute;
		top: 0;
		left: 0;
		font-weight: 700;
		font-size: 2.0rem;
		line-height: 1;
		letter-spacing: .1em;
		color: #fff;
	}
	.blog-category-block-list{
		font-family: var(--font-noto);
		display: block;
	}
	.blog-category-block-list > li a{
		display: grid;
		grid-template-columns: 98px 1fr;
		grid-gap: 14px;
		padding-block: 0 18px;
		border-bottom: dotted 2px #adadad;
	}
	.blog-category-block-list > li a:hover{
		opacity: .7;
	}
	.blog-category-block-list > li + li{
		margin-block: 18px 0;
	}
	.blog-category-block-thumb img{
		height: 67px;
	}
	.blog-category-block-post-ymd{
		margin-block: 0;
		padding-block: 3px;
	}
	.blog-category-block-post-ymd p{
		font-weight: 400;
		font-size: 1.1rem;
		line-height: 1;
		color: var(--color-black);
	}
	.blog-category-block-post-title{
		margin-block: 5px 0;
	}
	.blog-category-block-post-title p{
		font-weight: 700;
		font-size: 1.3rem;
		line-height: 1.5;
		color: var(--color-black);
	}
}


/***************

SESブログ - 記事

***************/

.article-blog-head{
	display: grid;
	grid-template-columns: 1fr 34.858%;
	grid-gap: 7.08%;
}
.article-title-blog-ymd{
	margin-block: 0 20px;
}
.article-title-blog-ymd p{
	font-family: var(--font-noto);
	font-weight: 500;
	font-size: 1.8rem;
	line-height: 1;
	color: #707070;
}
.article-blog-img{
	margin-block: -127px 0;
}
.article-blog-img img{
	width: 100%;
	height: 380px;
	border-radius: 10px;
	object-fit: cover;
}
.article-content-blog{
	font-family: var(--font-noto);
	font-weight: 300;
}
.article-content-blog p{
	line-height: 2;
	margin-block: 0 32px;
}
.article-content-blog p:last-child{
	margin-block: 0;
}

.blog-post-all{
	display: flex;
	justify-content: center;
	margin-block: 40px 0;
}
.category-menu-blog-article{
	margin-block: 100px 0;
}

@media screen and (max-width: 1023px) and (min-width: 768px) {
	.article-blog-img img{
		height: 280px;
	}
}

@media screen and (max-width: 767px) {
	.article-blog-head{
		display: grid;
		grid-template-columns: 1fr;
		grid-gap: 21px;
		grid-template-areas:
		"thumb"
		"ttl";
	}
	.article-title{
		grid-area: ttl;
	}
	.article-thumbnail{
		grid-area: thumb;
	}
	.article-title-blog-ymd{
		margin-block: 0 6px;
	}
	.article-blog-img{
		margin-block: -38px 0;
	}
	.article-blog-img img{
		height: 200px;
	}
}


/***************

カテゴリーメニュー

***************/

.category-menu-blog-pickup-search #searchform {
    position: relative;
	z-index: 3;
}
.category-menu-blog-pickup-search #s {
    height: 50px;
    width: 100%;
    padding-inline: 14px 52px;
    border: solid 1px #d9d2d0;
	border-radius: 9999px;
    font-size: 1.3rem;
    color: var(--color-black);
    background: #fff;
}

.category-menu-blog-pickup-search .search-icon::before {
	content: '';
    position: absolute;
	top: 0;
    right: 20px;
    top: 50%;
	transform: translateY(-50%);
	width: 23px;
	height: 23px;
	background-image: url(/wp-content/themes/renew_cloudsoft_theme/img/common/search-icon.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	z-index: 1;
}
.category-menu-blog-pickup-search #searchsubmit {
    position: absolute;
    top: 50%;
    right: 20px;
	transform: translateY(-50%);
    width: 23px;
    height: 23px;
    border: none;
    font-size: 0;
    background: none;
    cursor: pointer;
	z-index: 2;
}
.category-menu-blog-content{
	margin-block: 45px 0;
}
.category-menu-blog-h2{
	display: flex;
	align-items: flex-end;
}
.category-menu-blog-h2-title{
	font-weight: 700;
	font-size: 2.4rem;
	line-height: 1;
	letter-spacing: .05em;
}
.category-menu-blog-listbox{
	margin-block: 22px 0;
}
.category-menu-blog-list > li + li{
	margin-block: 12px 0;
}
.category-menu-blog-list > li a{
	position: relative;
	padding-inline: 11px 0;
}
.category-menu-blog-list > li a{
	font-family: var(--font-noto);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .05em;
	color: var(--color-black);
	transition: all 0.3s;
}
.category-menu-blog-list > li a:hover{
	opacity: .7;
}
.category-menu-blog-list > li a::before{
	content: '-';
	position: absolute;
	top: 0;
	left: 0;
	color: var(--color-red);
}
.category-menu-blog-pickup{
	margin-block: 53px 0;
}
.category-menu-blog-pickup-sns{
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 10px;
	margin-block: 21px 0;
}
.category-menu-blog-pickup-sns a{
	position: relative;
	min-height: 93px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	z-index: 3;
}
.category-menu-blog-pickup-sns a::after{
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	border-radius: 10px;
	z-index: -1;
}
.category-menu-blog-pickup-sns a.sns-line{
	padding-inline: 74px 18px;
}
.category-menu-blog-pickup-sns a.sns-line{
	font-family: var(--font-noto);
	font-weight: 700;
	font-size: 2.0rem;
	line-height: 1.3;
	color: var(--color-black);
}
.category-menu-blog-pickup-sns a.sns-line .sns-sub{
	font-size: 1.2rem;
	line-height: 1.3;
	margin-block: 3px 0;
}
.category-menu-blog-pickup-sns a.sns-line::before{
	content: '';
	position: absolute;
	top: 50%;
	left: 19px;
	transform: translateY(-50%);
	width: 45px;
	height: 45px;
	background-image: url(/wp-content/themes/renew_cloudsoft_theme/img/common/line-icon.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	z-index: 1;
}
.category-menu-blog-pickup-sns a.sns-x{
	padding-inline: 87px 16px;
}
.category-menu-blog-pickup-sns a.sns-x{
	font-family: var(--font-noto);
	font-weight: 700;
	font-size: 1.6rem;
	line-height: 1.3;
	color: var(--color-black);
}
.category-menu-blog-pickup-sns a.sns-x .sns-sub{
	font-size: 1.2rem;
	line-height: 1.3;
	color: #adadad;
	margin-block: 0 3px;
}
.category-menu-blog-pickup-sns a.sns-x::before{
	content: '';
	position: absolute;
	top: 50%;
	left: 19px;
	transform: translateY(-50%);
	width: 59px;
	height: 59px;
	background-image: url(/wp-content/themes/renew_cloudsoft_theme/img/common/x-icon.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	z-index: 1;
}
.category-menu-blog-pickup-sns a.sns-x.matsushita::before{
	background-image: url(/wp-content/themes/renew_cloudsoft_theme/img/common/x-icon-m.png);
}

@media screen and (max-width: 1023px) and (min-width: 768px) {
	.category-menu-blog{
		display: grid;
		grid-template-columns: 1fr 58.573%;
		grid-gap: 28px 5.56%;
		grid-template-areas: 
		"a a"
		"b c";
		padding: 53px 40px 58px;
	}
	.category-menu-blog-pickup-search{
		grid-area: a;
	}
	.category-menu-blog-content{
		grid-area: b;
	}
	.category-menu-blog-pickup{
		grid-area: c;
	}
	.category-menu-blog-content{
		margin-block: 0;
	}
	.category-menu-blog-pickup{
		margin-block: 0;
	}
}

@media screen and (max-width: 767px) {
	.category-menu-blog{
		padding-inline: 20px;
	}
	.category-menu-blog-content{
		margin-block: 42px 0;
	}
	.category-menu-blog-listbox{
		margin-block: 24px 0;
	}
	.category-menu-blog-list > li a:hover{
		opacity: 1;
	}
	.category-menu-blog-pickup{
		margin-block: 48px 0;
	}
	.category-menu-blog-pickup-sns{
		display: grid;
		grid-template-columns: 1fr;
		grid-gap: 10px;
		margin-block: 22px 0;
	}
	.category-menu-blog-pickup-sns a.sns-line{
		padding: 16px 16px 16px 83px;
	}
	.category-menu-blog-pickup-sns a.sns-line{
		font-family: var(--font-noto);
		font-weight: 700;
		font-size: 2.2rem;
		line-height: 1.3;
		color: var(--color-black);
	}
	.category-menu-blog-pickup-sns a.sns-line .sns-sub{
		font-size: 1.4rem;
		line-height: 1.3;
		margin-block: 5px 0;
	}
	.category-menu-blog-pickup-sns a.sns-x{
		padding: 16px 16px 16px 85px;
	}
	.category-menu-blog-pickup-sns a.sns-x{
		font-family: var(--font-noto);
		font-weight: 700;
		font-size: 2.0rem;
		line-height: 1.3;
		color: var(--color-black);
	}
	.category-menu-blog-pickup-sns a.sns-x .sns-sub{
		font-size: 1.5rem;
		line-height: 1.3;
		color: #adadad;
		margin-block: 0 4px;
	}
	.category-menu-blog-pickup-sns a.sns-x::before{
		content: '';
		position: absolute;
		top: 50%;
		left: 15px;
		transform: translateY(-50%);
		width: 59px;
		height: 59px;
		background-image: url(/wp-content/themes/renew_cloudsoft_theme/img/common/x-icon.png);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		z-index: 1;
	}
	.category-menu-blog-pickup-sns a.sns-x.matsushita::before{
		background-image: url(/wp-content/themes/renew_cloudsoft_theme/img/common/x-icon-m.png);
	}
}