@charset "UTF-8";

/* Infomation 
---------------------------------------------------------------------
File Name :  feature-data.css
Create date :  2025/10/22

// Braek Points
// PC
@media screen and (max-width: 979px) {
}
// Phone
@media screen and (max-width: 767px) {
}
---------------------------------------------------------------------
*/


/* --------------------------------
	ind-grid
-------------------------------- */
/* .ind-grid-01 */
.ind-grid-01 {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, 50%);
	grid-template-rows: repeat(2, auto);
	grid-auto-flow: column;
}
.ind-grid-01 .grid-box-01 {
	position: relative;
}
.ind-grid-01 .grid-box-01:nth-child(4n):before {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 2px;
	height: calc(100% - var(--px48));
	background-color: var(--color-glb-gray-03);
}
@media screen and (max-width: 767px) {
	.ind-grid-01 {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	.ind-grid-01 .grid-box-01 {
		width: 100%;
	}
	.ind-grid-01 .grid-box-01:nth-child(4n):before {
		content: none;
	}
	.ind-grid-01 .grid-box-01:nth-child(4n - 1) {
		margin-top: var(--px40);
		padding-top: var(--px40);
		border-top: 2px solid var(--color-glb-gray-03);
	}
}

/* .ind-grid-02 */
.ind-grid-02 {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, 50%);
	grid-template-rows: repeat(3, auto);
}
.ind-grid-02 .grid-box-01 { grid-area: 1 / 1 / 2 / 3; }
.ind-grid-02 .grid-box-02 { grid-area: 2 / 1 / 4 / 2; }
.ind-grid-02 .grid-box-03 { grid-area: 2 / 2 / 3 / 3; }
.ind-grid-02 .grid-box-04 { grid-area: 3 / 2 / 4 / 3; }
@media screen and (max-width: 767px) {
	.ind-grid-02 {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	.ind-grid-02 [class^="grid-box-"] {
		width: 100%;
	}
}

/* .ind-grid-03 */
.ind-grid-03 {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(2, 50%);
	grid-template-rows: repeat(2, auto);
}
.ind-grid-03 .grid-box-01 { grid-area: 1 / 1 / 2 / 2; }
.ind-grid-03 .grid-box-02 { grid-area: 2 / 1 / 3 / 2; }
.ind-grid-03 .grid-box-03 { grid-area: 1 / 2 / 3 / 3; }
@media screen and (max-width: 767px) {
	.ind-grid-03 {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	.ind-grid-03 [class^="grid-box-"] {
		width: 100%;
	}
}

/* .ind-grid-04 */
.ind-grid-04 {
	width: 100%;
	display: grid;
	grid-template-columns: 41.7% 58.3%;
	grid-template-rows: repeat(2, auto);
}
.ind-grid-04 .grid-box-01 { grid-area: 1 / 1 / 2 / 3; }
.ind-grid-04 .grid-box-02 { grid-area: 2 / 1 / 3 / 2; }
.ind-grid-04 .grid-box-03 { grid-area: 2 / 2 / 3 / 3; }
@media screen and (max-width: 767px) {
	.ind-grid-04 {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
	}
	.ind-grid-04 [class^="grid-box-"] {
		width: 100%;
	}
}

[class^="ind-grid-"] + [class^="ind-grid-"] {
	margin-top: var(--px64);
	padding-top: var(--px48);
	border-top: 2px solid var(--color-glb-gray-03);
}
@media screen and (max-width: 767px) {
	[class^="ind-grid-"] + [class^="ind-grid-"] {
		margin-top: var(--px40);
		padding-top: var(--px40);
		border-top: 2px solid var(--color-glb-gray-03);
	}
}

/* .ind-grid-btn-box */
.ind-btn-box-01 {
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
}
.ind-flex-btn-box-01 {
	width: 100%;
	display: flex;
	justify-content: center;
	padding-top: var(--px40);
}
.ind-flex-btn-box-02 {
	width: 100%;
	display: flex;
	justify-content: center;
	padding-top: var(--px64);
}
@media screen and (max-width: 767px) {
	.ind-flex-btn-box-02 {
		padding-top: var(--px40);
	}
}