@charset "utf-8";

/*---------------------------------------------------------
index_activities
---------------------------------------------------------*/
#index_activities {
	/*padding: 60px 0 90px 0;*/
	padding: 60px 0 150px 0;
	background: #fff;
	position:relative;
}

.activities_area {
	/*max-width: 1080px;*/
	max-width:1180px;
	padding: 0 20px;
	margin: 0 auto;
	position:relative;
}


#index_activities:after{
	content:"";
	position:absolute;
	width:282px;
	height:74px;
	background: url(../../../img/activities_bg02.svg) no-repeat center / contain;
	right:209px;;
	bottom:40px;
}

* {
	box-sizing: border-box
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	display: block
}


/* ====== Section ====== */
.activities {
	padding: 72px 20px
}

.activities__inner {
	max-width: var(--max);
	margin: auto
}

.activities_area .top_ttl{
	text-align:left;
}

/* セクション見出し */
.section-head {
	margin-bottom: 56px
}

.section-head__eyebrow {
	color: #269339;
	font-size: 14px;
	letter-spacing: .08em;
	font-weight: 700;
}

.section-head__title {
	font-size: 32px;
	margin-top: 6px;
	font-weight: 700;
}

.section-head__lead {
	margin-top: 18px;
	font-size: 16px;
	max-width: 816px;
}

/* ====== 大きいブロック ====== */
.block {
	padding: 50px 0;
	border-top: 1px solid #ccc;
}

.block:first-of-type {
	border-top: 0
}

.block__head {
	display: grid;
	grid-template-columns: 1fr 600px;
	gap: 40px;
	align-items: start;
	/*margin-bottom: 30px;*/
	margin-bottom:50px;
}

.block__head.block__cafe {
	grid-template-columns: 1fr 750px;
}

.block__title {
	color: #269339;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: .03em;
	margin-bottom: 8px;
}

.block__thumb {
	margin: 0;
}

.block__desc {
	margin-bottom: 18px
}

/* 画像グリッド */
.gallery {
	display: grid;
	gap: 45px
}

.grid-3 {
	grid-template-columns: repeat(3, 1fr)
}

.gallery__item {
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
	margin: 0;
}

.gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	aspect-ratio: 4 / 3
}

/* ====== 下段3カード ====== */
.cards {
	display: grid;
	border-top: 1px solid #ccc;
	padding-top: 50px;
}

.grid-3 {
	grid-template-columns: repeat(3, 1fr)
}

.card {
	/*padding: 0 30px;*/
	/*border-right: 1px solid #ccc;*/
	position:relative;
	display: flex;
    flex-direction: column;
}

.card:last-child {
	border: none;
}

.card__title {
	font-size: 26px;
	font-weight: 700;
	color: #269339;
	margin-bottom: 8px;
}

.cards.grid-3{
	gap:60px;
}
.card:after{
	content:"";
	position:absolute;
	width:1px;
	height:100%;
	background:#ccc;
	right:-30px;
	top:0;
}

.card:last-child:after{
	content:none;
}

.card__desc {
	margin-bottom: 14px
}

.card__thumb {
	/*margin: 0;*/
	margin:auto 0 0 0;
}

.card__thumb img {
	width: 100%;
	aspect-ratio: 4/3;
	object-fit: cover;
	border-radius: 10px;
}

/* ====== Responsive ====== */
@media (max-width: 1100px) {
	.grid-4 {
		grid-template-columns: repeat(3, 1fr)
	}
	
	#index_activities:after{
		right:30px;
	}
}

@media (max-width: 900px) {
	.block__head {
		grid-template-columns: 1fr;
		gap: 12px
	}

	.block__thumb {
		justify-self: start;
		/*width: 180px*/
	}

	.grid-4 {
		grid-template-columns: repeat(2, 1fr)
	}

	.grid-3 {
		grid-template-columns: repeat(2, 1fr)
	}
	
	
}

@media (max-width: 767px) {
	
	#index_activities{
		padding:40px 0 80px 0;
	}
	
	#index_activities:after{
		right:20px;
		width:180px;
		bottom:15px;
	}
	
	.gallery.grid-3{
		gap:15px;
	}
	
	.section-head__lead{
		font-size:14px;
	}
	
	.block__head{
		margin-bottom:30px;
	}
	
	.block__title{
		font-size:20px;
	}
	
	.block{
		padding:30px 0;
	}
	
	.block__head.block__cafe{
		display: flex;
        flex-direction: column;
		margin-bottom:30px;
	}
	
	
	.cards{
		padding-top:30px;
	}
	.cards.grid-3{
		gap:50px;
	}
	
	.card__title{
		font-size:18px;
	}
}

@media (max-width: 560px) {
	.section-head__title {
		font-size: 26px
	}

	.cards {
		gap: 16px
	}

	.grid-4,
	.grid-3 {
		grid-template-columns: 1fr
	}

	.activities {
		padding: 56px 16px
	}
	
	.card:after{
		width:100%;
		height:1px;
		top:unset;
		bottom:-25px;
		right:0;
		left:0;
	}
}