@charset "utf-8";

/* ---------------------------------------
* ベース
------------------------------------------ */


.s-blogMain{
	width: 100%;
	padding: 8rem 11.1rem 10rem;
	background-color: #fff;
	border-radius: 20px;
}

.s-bloglistMeta{
	justify-content: center;
	column-gap: 1rem;
}

.s-bloglistTag{
	display: inline-block;
	background-color: #008E66;
	color: #fff; 
	padding: .2rem 1rem;
	font-size: clamp(10px,1.2rem,14px);
	line-height: 1.6;
	border-radius: 5px;
}

.s-bloglistDay{
	color: #A6A6A6;
}

.s-blogHeadTtl{
	font-size: clamp(12px,2.8rem,32px);
	font-weight: 500;
	line-height: 1.6;
	padding-top: 1rem;
}

.s-blogDetail{
	margin: 6rem auto 0;
}

.s-blogDetail h2{
	font-size: clamp(18px,2.8rem,32px);
	font-weight: 500;
	line-height: 1.6;
	padding-bottom: 3rem;
	margin: 6rem 0 4rem;
	border-bottom: solid 1px #EBEFF0;
}

.s-blogDetail h3{
	font-size: clamp(13px,2.2rem,24px);
	font-weight: 500;
	line-height: 1.6;
	margin: 4rem 0 3rem;
}

.s-blogDetail p{
	margin-top: 3rem;
	line-height: 1.8;
}

.s-blogDetail a{
	text-decoration: underline;
}

.s-blogDetail img,.s-blogDetail02 img{
	margin-top: 4rem;
}

/* ---------------------------------------
* 共通
------------------------------------------ */


.wp-block-image,.wp-block-group .wp-block-image,.article figure{
	margin: 4rem auto 0;
}

img{
	width: 100%;
	height: auto;
	text-align: center;
}

.wp-block-image :where(figcaption),figcaption{
	font-size: clamp(12px,1.4rem,14px);
	color: #999999;
	line-height: 1.6;
	margin-bottom: unset;
	text-align: center;
}

.col-gray{
	background-color: #F7FAFC;
}

.s-blogMain02{
	position: relative;
	background: #008E66;
	background: linear-gradient(180deg, rgba(0, 142, 102, 1) 0%, rgba(0, 142, 102, 1) 65%, rgba(255, 255, 255, 1) 65%, rgba(255, 255, 255, 1) 100%);
	padding-top: 14rem;
}

.s-activity .s-blogMain02{
	background: #008E66;
	background: linear-gradient(180deg, rgba(0, 142, 102, 1) 0%, rgba(0, 142, 102, 1) 70%, rgba(255, 255, 255, 1) 70%, rgba(255, 255, 255, 1) 100%);
}

.blogBar{
	position: absolute;
	left: 0;
	bottom: 18.1rem;
}

.s-blogMainHead{
	position: relative;
	z-index: 1;
}

.s-bloglistMeta02 .s-bloglistDay{
	color: rgba(255,255,255,.6);
}

.s-bloglistMeta02 .s-bloglistTag{
	border: solid 1px #fff;
	background-color: #fff;
	color: #008E66;
}

.s-blogDetail02{
	margin-top: 8rem;
	padding: 0 11.1rem;
}

.s-blogDetail02 h3{
	font-size: clamp(16px,2rem,24px);
	position: relative;
	line-height: 1.6;
	font-weight: 500;
	color: #fff;
	background-color: #008E66;
	padding: 1.6rem 1.6rem 1.6rem 4.8rem;
	margin: 8rem 0 3rem;
	border-radius: 10px;
}

.s-blogDetail02 h3::before{
	content: "";
	display: block;
	width: 2px;
	height: 2.4rem;
	background-color: #fff;
	border-radius: 10px;
	position: absolute;
	left: 3rem;
	top: 2.1rem;
}

.s-blogDetail02 p{
	line-height: 1.8;
	margin-top: 3rem;
    font-weight: 400;
    letter-spacing: -0.02em;
}

/* ---------------------------------------
* イベント
------------------------------------------ */

.s-eventTtl h4{
	color: #008E66;
	font-size: clamp(16px,3.2rem,40px);
	line-height: 1;
	font-weight: 700;
}

.s-eventTtl p{
	font-weight: 700;
	font-size: clamp(12px,1.4rem,14px);
	line-height: 1.6;
	margin-top: 0.6rem;
}

.s-eventDetail h2{
	font-size: clamp(16px,2.4rem,24px);
	margin: 4rem 0 2rem;
	font-weight: 500;
}

.s-eventDetail>p{
	margin-top: 2rem;
}

.eventOutline{
	margin-top: 4rem;
	border-radius: 20px;
	padding: 4rem;
	background-color: #F7FAFC;
}

.eventOut-defList:not(:last-of-type){
	padding-bottom: 1.6rem;
	margin-bottom: 1.6rem;
	border-bottom: solid 1px #EBEFF0;
}

.eventOut-defTtl{
	width: 21%;
	flex: 0 0 21%;
	font-weight: 500;
	color: #008E66;
	line-height: 1.6;
}

.eventOut-defDesc{
	flex: 1 1 auto;
	line-height: 1.6;
    font-weight: 400;
    letter-spacing: -0.02em;
}

/* ---------------------------------------
* 活動紹介
------------------------------------------ */

.activityPurpose{
	width: 74.3%;
	padding: 3rem 4rem;
	margin: 2rem auto 0;
	background-color: #fff;
	border-radius: 10px;
}

.activityPurpose p{
	flex: 0 0 10.5%;
	width: 10.5%;
	font-size: clamp(12px,1.4rem,14px);
	font-weight: 700;
	color: #008E66;
	text-align: left;
}

.activityPurpose-list{
	column-gap: 1rem;
	row-gap: .8rem;
}

.activityPurpose-listItem{
	display: inline-block;
	color: #A6A6A6;
	background-color: #F7FAFC;
	padding: .2rem 1rem;
	border-radius: 2px;
	font-size: clamp(12px,1.4rem,14px);
}

@media screen and (max-width:768px){

	/* ---------------------------------------
	* ベース
	------------------------------------------ */
	.s-blogMain{
		padding: 6rem 2.4rem 6rem;
		border-radius: 10px;
	}

	.s-bloglistTag{
		padding: .3rem .8rem .4rem;
		font-size: 1.2rem;
	}

	.s-blogHeadTtl{
		font-size: 2.4rem;
		padding-top: .8rem;
		font-weight: 500;
	}

	.s-blogDetail{
		margin: 6rem auto 0;
	}

	.s-blogDetail h2{
		font-size: 2rem;
		padding-bottom: 2rem;
		margin: 6rem 0 3rem;
	}

	.s-blogDetail h3{
		font-size: 1.8rem;
		margin: 3rem 0 2.4rem;
	}

	.s-blogDetail p{
		margin-top: 2.4rem;
	}

	.s-blogDetail img,.s-blogDetail02 img{
		margin-top: 3rem;
	}

	/* ---------------------------------------
	* 共通
	------------------------------------------ */


	.wp-block-image,.wp-block-group .wp-block-image,.article figure{
		margin: 4rem auto 0;
	}

	img{
		width: 100%;
		height: auto;
		text-align: center;
	}

	.wp-block-image :where(figcaption),figcaption{
		font-size: clamp(12px,1.4rem,14px);
		color: #999999;
		line-height: 1.6;
		margin-bottom: unset;
		text-align: center;
	}

	.s-blogMain02{
		background: linear-gradient(180deg, rgba(0, 142, 102, 1) 0%, rgba(0, 142, 102, 1) 80%, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 1) 100%);
		padding-top: 12rem;
	}

	.s-activity .s-blogMain02{
        background: linear-gradient(180deg, rgba(0, 142, 102, 1) 0%, rgba(0, 142, 102, 1) 80%, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 1) 100%);
	}

	.blogBar{
		bottom: 8.8rem;
	}

	.s-blogMainHead{
		position: relative;
		z-index: 1;
	}

	.s-bloglistMeta02 .s-bloglistDay{
		color: rgba(255,255,255,.6);
	}

	.s-bloglistMeta02 .s-bloglistTag{
		border: solid 1px #fff;
		background-color: #fff;
		color: #008E66;
	}

	.s-blogDetail02{
		margin-top: 6rem;
		padding: 0 2rem;
	}

	.s-blogDetail02 h3{
		font-size: 1.8rem;
		padding: 1.2rem 1rem 1.2rem 3rem;
		margin: 6rem 0 2.4rem;
	}

	.s-blogDetail02 h3::before{
		width: 2px;
		height: 2rem;
		left: 2rem;
		top: 1.8rem;
	}

	.s-blogDetail02 p{
		line-height: 1.8;
		margin-top: 2.4rem;
	}

	/* ---------------------------------------
	* イベント
	------------------------------------------ */

	.s-eventTtl h4{
		font-size: 2.8rem;
	}

	.s-eventTtl p{
		font-size: 1.2rem;
		margin-top: .2rem;
	}

	.s-eventDetail h2{
		font-size: 2rem;
		margin: 4rem 0 2rem;
	}

	.s-eventDetail>p{
		margin-top: 2rem;
	}

	.eventOutline{
		margin-top: 3rem;
		border-radius: 10px;
		padding: 2rem;
	}

	.eventOut-defList:not(:last-of-type){
		padding-bottom: 1.6rem;
		margin-bottom: 1.6rem;
	}

	.eventOut-defTtl{
		width: 100%;
	}

	.eventOut-defDesc{
		padding-top: .4rem;
	}

	/* ---------------------------------------
	* 活動紹介
	------------------------------------------ */

	.activityPurpose{
		width: 100%;
		padding: 2rem;
		margin: 1.6rem auto 0;
	}

	.activityPurpose p{
		width: 100%;
		font-size: 1.2rem;
	}

	.activityPurpose-list{
		padding-top: 0.8rem;
		display: flex;
		flex-wrap: wrap;
		column-gap: .6rem;
		row-gap: .4rem;
	}

	.activityPurpose-listItem{
		font-size: 1.1rem;
	}


}