@charset "utf-8";

/*---------------------------------------------------------
	index_features
---------------------------------------------------------*/
/* ===============================
   Longrun Features Section
================================ */

#index_features .top_ttl {
	text-align: left;
}

#index_features .top_ttl h2::before {
	color: #FFF101;
}

figure {
	margin: 0;
}

figure img {
	display: block;
	vertical-align: bottom;
}

.lr-features {
	position: relative;
	color: #fff;
	background-color: #3A9C61;
	background-image: url(../../../img/noise-texture.png);
	background-repeat: repeat;
	background-size: 200px 200px;
	padding: 250px 0;
}


.lr-features__inner {
	max-width: 1440px;
	padding: 0 20px;
	margin: 0 auto;
	overflow: visible;
	position: relative;
}

.lr-features__inner::before {
	content: "";
	background-image: url(../../../img/bg_features.svg);
	background-repeat: no-repeat;
	width: 536px;
	height: 475px;
	top: -400px;
	right: -70px;
	position: absolute;
	z-index: 100;
}

#index_ove_acc .top_ttl h2::before {
    color: #FFF101;
}

.lr-features__ttl::before {
	content: "Features";
	position: absolute;
	top: 0;
	left: 0;
	font-size: 25px;
	letter-spacing: .14em;
	color: #FFF101;
}

/* グリッド */
.lr-features__grid {
	display: grid;
	grid-template-columns: repeat(68, 1fr);
	grid-template-rows: repeat(85, 20px);
	column-gap: 0;
	row-gap: 20px;
	align-items: start;
}

/* 各アイテム */
.lr-features__item {
	grid-column: 1 / span 29;
	/* 左列 */
	position: relative;
	overflow: visible;
	z-index: 1;
}

.lr-features__item--right {
	grid-column: 40 / span 29;
	/* 右列 */
}

/* テキスト群 */
.lr-features__eyebrow {
	font-size: 28px;
	font-weight: 600;
	margin: 0 0 18px;
}

/* 白いラベル（吹き出し風の帯） */
.lr-features__tag,
.lr-features__tag-sub {
	display: inline-block;
	background: #fff;
	color: #2b9965;
	border-radius: 999px;
	padding: 10px 16px;
	font-size: 35px;
	font-weight: 600;
	line-height: 1.5;
	margin-bottom: 20px;
	white-space: nowrap;
}

.lr-features__tag-sub {
	font-weight: 600;
}

/* 説明文 */
.lr-features__desc {
	font-size: 28px;
	font-weight: 500;
	line-height: 1.7;
	letter-spacing: 1.5px;
	margin: 6px 0 48px;
	max-width: 34em;
}

/* 画像 */
.lr-features__img {
	margin: 0;
	position: relative;
	z-index: 1;
}

.lr-features__msg {
	margin: 0 0 30px;
}

.lr-features__img img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 16px;
}

/* 画像だけ置くカード用（任意） */
.only-image .lr-features__eyebrow,
.only-image .lr-features__tag,
.only-image .lr-features__tag-sub,
.only-image .lr-features__desc {
	display: none;
}

.lr-features__item:nth-child(1) {
	grid-row: 3 / span 6;
}

.lr-features__item:nth-child(1)::after {
	content: "";
	background-image: url(../../../img/bg_features_1.svg);
	background-repeat: no-repeat;
	background-position: center;
	width: 311px;
	height: 130px;
	bottom: 80px;
	left: -240px;
	position: absolute;
	z-index: -1;
}

.lr-features__img:nth-child(2) {
	grid-column: 1 / span 30;
	grid-row: 13 / span 6;
}

.lr-features__img:nth-child(3) {
	grid-column: 18 / span 17;
	grid-row: 27 / span 6;
}

.lr-features__img:nth-child(4) {
	grid-column: 1 / span 21;
	grid-row: 29 / span 6;
	transform: translateX(-100px);
}

.lr-features__img:nth-child(5) {
	grid-column: 52 / span 17;
	grid-row: 1 / span 6;
	transform: translateX(150px);
}

.lr-features__img:nth-child(6) {
	grid-column: 37 / span 21;
	grid-row: 3 / span 1;
}

.lr-features__img:nth-child(7) {
	grid-column: 41 / span 25;
	grid-row: 12 / span 1;
}

.lr-features__img:nth-child(7)::after {
	content: "";
	background-image: url(../../../img/bg_features_2.svg);
	background-repeat: no-repeat;
	background-position: center;
	width: 292px;
	height: 189px;
	bottom: -110px;
	left: -160px;
	position: absolute;
	z-index: -1;
}

.lr-features__item:nth-child(8) {
	grid-row: 23 / span 6;
}

.lr-features__item:nth-child(8)::before {
	content: "";
	background-image: url(../../../img/bg_features_3.svg);
	background-repeat: no-repeat;
	background-position: center;
	width: 420px;
	height: 110px;
	top: -80px;
	right: -200px;
	position: absolute;
	z-index: -1;
}

.lr-features__item:nth-child(8)::after {
	content: "";
	background-image: url(../../../img/bg_features_6.svg);
	background-repeat: no-repeat;
	background-position: center;
	width: 400px;
	height: 99px;
	bottom: 30px;
	right: -180px;
	position: absolute;
	z-index: -1;
}

.lr-features__img:nth-child(9) {
	grid-column: 40 / span 30;
	grid-row: 33 / span 1;
	transform: translateX(150px);
}

.lr-features__item:nth-child(10) {
	grid-row: 41 / span 6;
}

.lr-features__item:nth-child(10)::after {
	content: "";
	background-image: url(../../../img/bg_features_5.svg);
	background-repeat: no-repeat;
	background-position: center;
	width: 443px;
	height: 80px;
	top: -140px;
	right: 0;
	position: absolute;
	z-index: -1;
}

.lr-features__img:nth-child(11) {
	grid-column: 26 / span 17;
	grid-row: 40 / span 1;
}

.lr-features__img:nth-child(12) {
	grid-column: 1 / span 30;
	grid-row: 50 / span 1;
	transform: translateX(-150px);
}

.lr-features__item:nth-child(13) {
	grid-row: 48 / span 6;
}

.lr-features__item:nth-child(13)::after {
	content: "";
	background-image: url(../../../img/bg_features_3.svg);
	background-repeat: no-repeat;
	background-position: center;
	width: 420px;
	height: 110px;
	top: -45px;
	right: -160px;
	position: absolute;
	z-index: -1;
}

.lr-features__img:nth-child(14) {
	grid-column: 37 / span 30;
	grid-row: 56 / span 1;
}

.lr-features__img:nth-child(15) {
	grid-column: 52 / span 17;
	grid-row: 68 / span 1;
	transform: translateX(100px);
}

.lr-features__img:nth-child(15)::after {
	content: "";
	background-image: url(../../../img/bg_features_9.svg);
	background-repeat: no-repeat;
	background-position: center;
	width: 83px;
	height: 121px;
	bottom: 0;
	left: -150px;
	position: absolute;
	z-index: -1;
}

.lr-features__img:nth-child(16) {
	grid-column: 34 / span 25;
	grid-row: 76 / span 1;
}

.lr-features__img:nth-child(16)::after {
	content: "";
	background-image: url(../../../img/bg_features_7.svg);
	background-repeat: no-repeat;
	background-position: center;
	width: 567px;
	height: 186px;
	bottom: -125px;
	right: -370px;
	position: absolute;
	z-index: -1;
}

.lr-features__item:nth-child(17) {
	grid-row: 63 / span 6;
}

.lr-features__item:nth-child(17)::after {
	content: "";
	background-image: url(../../../img/bg_features_4.svg);
	background-repeat: no-repeat;
	background-position: center;
	width: 380px;
	height: 100px;
	top: -80px;
	right: -100px;
	position: absolute;
	z-index: -1;
}

.lr-features__img:nth-child(18) {
	grid-column: 1 / span 30;
	grid-row: 71 / span 1;
}

.lr-features__img:nth-child(18)::after {
	content: "";
	background-image: url(../../../img/bg_features_8.svg);
	background-repeat: no-repeat;
	background-position: center;
	width: 311px;
	height: 130px;
	bottom: -180px;
	left: -50px;
	position: absolute;
	z-index: -1;
}

/* 既存の .lr-features__img img の角丸／影をそのまま継承 */

/* レスポンシブ */
/*
@media (max-width: 1024px){
  .lr-features__grid{
    grid-template-columns: repeat(6,1fr);
  }
  .lr-features__item{ grid-column: 1 / span 6; }
  .lr-features__item--right{ grid-column: 1 / span 6; }
}
*/


@media (max-width: 767px) {
	.lr-features {
		padding: 180px 20px 90px;
	}
	.lr-features__ttl {
		font-size: 2.2rem;
	}

	.lr-features__grid {
		display: block;
		padding-bottom: 0;
	}

	.lr-features__ttl::before {
		font-size: 1.5rem;
		margin-bottom: 8px;
	}

	.lr-features__inner {
		padding: 0;
	}
	
	.lr-features__inner::before {
		width: 260px;
		height: 230px;
		top: -210px;
		left: 65%;
		transform: translateX(-50%);
		background-size: contain;
	}

	.lr-features__eyebrow {
		font-size: 18px;
		margin-bottom: 10px;
	}

	.lr-features__desc {
		font-size: 20px;
		margin: 0 0 20px;
	}

	.lr-features__item {
		margin-top: 28px;
	}

	.lr-features__item .lr-features__msg {
		margin-bottom: 20px;
	}

	.lr-features__item:nth-child(1) .lr-features__msg {
		width: 80%;
	}

	.lr-features__item:nth-child(1)::after {
		width: 180px;
		height: 75px;
		bottom: 160px;
		left: 220px;
		background-size: contain;
	}

	.lr-features__item:nth-child(8)::before {
		width: 180px;
		height: 49px;
		bottom: 160px;
		left: 220px;
		background-size: contain;
	}

	.lr-features__item:nth-child(8)::after {
		width: 180px;
		height: 49px;
		bottom: 52px;
		left: 0;
		background-size: contain;
	}

	.lr-features__item:nth-child(10) .lr-features__msg {
		width: 69%;
	}

	.lr-features__item:nth-child(10)::after {
		width: 180px;
		height: 49px;
		top: -28px;
		left: 160px;
		background-size: contain;
	}

	.lr-features__item:nth-child(13) .lr-features__msg {
		width: 55%;
	}

	.lr-features__item:nth-child(13)::after {
		width: 180px;
		height: 49px;
		bottom: 160px;
		left: 174px;
		background-size: contain;
	}

	.lr-features__item:nth-child(17) .lr-features__msg {
		width: 85%;
	}

	.lr-features__item:nth-child(17)::after {
		width: 180px;
		height: 49px;
		top: 160px;
		left: 174px;
		background-size: contain;
	}

	.lr-features__img:nth-child(4),
	.lr-features__img:nth-child(5),
	.lr-features__img:nth-child(9),
	.lr-features__img:nth-child(12),
	.lr-features__img:nth-child(15) {
		transform: none;
	}

	.lr-features__img {
		margin-bottom: 10px;
	}

	.lr-features__img:nth-child(3),
	.lr-features__img:nth-child(4),
	.lr-features__img:nth-child(5),
	.lr-features__img:nth-child(6),
	.lr-features__img:nth-child(7),
	.lr-features__img:nth-child(8),
	.lr-features__img:nth-child(11),
	.lr-features__img:nth-child(12),
	.lr-features__img:nth-child(15),
	.lr-features__img:nth-child(16) {
		display: inline-block;
		width: 49%;
		margin-right: 2%;
		vertical-align: bottom;
	}

	.lr-features__img:nth-child(4),
	.lr-features__img:nth-child(6),
	.lr-features__img:nth-child(8),
	.lr-features__img:nth-child(12),
	.lr-features__img:nth-child(16) {
		margin-right: 0;
	}

	.lr-features__img {
		margin-bottom: 10px;
		/* figure のデフォルト余白を消す */
		width: 100%;
		/* グリッドの列幅にフィット */
		overflow: hidden;
		/* はみ出しを隠す（トリミング用） */
		border-radius: 8px;
		/* お好みで */
	}

	.lr-features__img {
		aspect-ratio: 3 / 2;
		/* 正方形なら 1 / 1、横長なら 16 / 9 など */
	}

	.lr-features__img>img {
		display: block;
		/* 画像下のスキマ対策（baseline隙間を消す） */
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* はみ出しをトリミングして“面いっぱい”に見せる */
		border-radius: 10px;
	}
}