@charset "UTF-8";

:root {
	--bg-color--primary: #ffffff;
}

body {
	background-color: var(--bg-color--primary);
}

@media screen and (min-width: 768px) {
	.main_container {
		padding-top: 115px;
		padding-bottom: 95px;
	}
}
@media screen and (max-width: 767px) {
	.main_container {
		padding-top: 55px;
		padding-bottom: 55px;
	}
}
.icon-icon_jabank {
	font-size: 22px;
}
.icon-icon_insurance {
	font-size: 22px;
}
.icon-icon_auto {
	font-size: 22px;
}
/*******************************************************************************
	ビジュアル
*******************************************************************************/
.lifestyle_nav-container {
	display: block;
	max-width: 1920px;
	width: 100%;
	margin: 0 auto;
}
.lifestyle_list {
	display: flex;
	width: 100%;
	flex-direction: column;

	row-gap: 100px;
}
.lifestyle_item {
	display: flex;
	position: relative;
	max-width: 1545px;
	width: 97.5%;
	column-gap: 20px;
	justify-content: space-between;
	align-items: center;
}

.lifestyle_jabank-wind {
	max-width: 92px;
	min-width: 47px;
	width: 5.9547%;
}

.lifestyle_item-img {
	display: block;
	position: relative;
	max-width: 800px;
}
.lifestyle_item-img img:not(.lifestyle_img-move) {
	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;
}

.lifestyle_img-move {
	position: absolute;
}

.lifestyle_jabank-leaf {
	bottom: calc(0px - clamp(1.875rem, -3.413rem + 11.02vw, 7.5rem));
	max-width: 200px;
	min-width: 63px;
	width: 25%;

	aspect-ratio: 2/3;
}
.lifestyle_insurance-leaf {
	bottom: calc(0px - clamp(0.313rem, -5.856rem + 12.85vw, 6.875rem));
	max-width: 299px;
	min-width: 37.375%;
	min-width: 84px;
	width: 37.375%;

	aspect-ratio: 299/239;
}
.lifestyle_insurance-windR {
	max-width: 66px;
	min-width: 34px;
	width: 4.2719%;
}
.lifestyle_auto-wind {
	max-width: 118px;
	min-width: 39px;
	width: 14.75%;
}
.lifestyle_auto-leaf {
	bottom: calc(0px - clamp(1.563rem, -4.313rem + 12.24vw, 7.813rem));
	max-width: 150px;
	min-width: 75px;
	width: 18.75%;
}

.lifestyle_item-contents {
	position: relative;
	max-width: 685px;
	width: 100%;
}

#lifestyle_item-jabank,
#lifestyle_item-insurance,
#lifestyle_item-auto {
	scroll-margin-top: 140px;
}

.lifestyle_item-title {
	display: flex;
	width: 100%;
	color: #006252;
	font-size: clamp(1.563em, 1.269em + 0.61vw, 1.875em);
	justify-content: flex-start;
	align-items: center;
}

#lifestyle_item-jabank .lifestyle_item-title i {
	font-size: clamp(2.125em, 1.126em + 2.08vw, 3.188em);
}

#lifestyle_item-insurance .lifestyle_item-title i {
	font-size: clamp(2em, 1.06em + 1.96vw, 3em);
}

#lifestyle_item-auto .lifestyle_item-title i {
	font-size: clamp(1.5em, 0.854em + 1.35vw, 2.188em);
}


.lifestyle_item-subtitle {
	display: block;
	width: 100%;
	font-size: clamp(1.188em, 0.894em + 0.61vw, 1.5em);
	line-height: clamp(1.875rem, 1.17rem + 1.47vw, 2.625rem);
	word-break: auto-phrase;
}
.lifestyle_item-text {
	font-size: clamp(0.875em, 0.581em + 0.61vw, 1.188em);
	line-height: clamp(1.563rem, 0.857rem + 1.47vw, 2.313rem);
	text-align: justify;
}
#lifestyle_item-auto .lifestyle_item-text {
	margin-bottom: 0 !important;
}
.lifestyle_item-link {
	display: flex;
	position: relative;
	max-width: clamp(9.688rem, 7.044rem + 5.51vw, 12.5rem);
	width: 100%;
	padding: clamp(0.5rem, 0.324rem + 0.37vw, 0.688rem) 5px;
	border: 2px solid #006252;
	background-color: #006252;
	color: #ffffff;
	font-weight: bold;
	font-size: clamp(0.875em, 0.757em + 0.24vw, 1em);
	justify-content: center;
	align-items: center;
	transition: all 0.4s;
}
.lifestyle_item-link:hover {
	background-color: #ffffff;
	color: #006252;
}
.lifestyle_item-link i {
	position: absolute;
	right: 20px;
	font-size: clamp(0.688em, 0.511em + 0.37vw, 0.875em);
}
@media screen and (min-width: 768px) {
	.display_mb {
		display: none;
	}
	.common_page-text br , .lifestyle_item-subtitle br {
		display: none;
	}
	.lifestyle_list {
		row-gap: 100px;
	}
	.lifestyle_item {
		width: 97.5%;
	}
	.lifestyle_item:nth-of-type(odd) {
		margin-left: auto;
		flex-direction: row-reverse;
	}

	.lifestyle_jabank-wind {
		top: -5px;
		right: calc(100% + 30px);
	}
	.lifestyle_jabank-windY {
		display: none;
	}
	.lifestyle_item-img {
		width: 51.78%;
		min-height: 330px;

		aspect-ratio: 80/49;
	}
	.lifestyle_item:nth-of-type(odd) .lifestyle_item-img img:not(.lifestyle_img-move) {
		border-top-left-radius: 30px;
		border-bottom-left-radius: 30px;
	}
	.lifestyle_item:nth-of-type(even) .lifestyle_item-img img:not(.lifestyle_img-move) {
		border-top-right-radius: 30px;
		border-bottom-right-radius: 30px;
	}


	.lifestyle_jabank-leaf {
		right: clamp(0.313rem, -5.269rem + 11.63vw, 6.25rem);
	}
	.lifestyle_insurance-wind {
		bottom: calc(100% - 5.0989%);
		left: 15%;
		max-width: 118px;
		width: 14.75%;
	}
	.lifestyle_insurance-leaf {
		left: clamp(0.313rem, -4.681rem + 10.4vw, 5.625rem);
	}
	.lifestyle_insurance-windR {
		bottom: 10px;
		left: calc(100% + clamp(0.313rem, -3.8rem + 8.57vw, 4.688rem));
	}
	.lifestyle_auto-wind {
		top: -5px;
		left: clamp(0.313rem, -8.794rem + 18.97vw, 10rem);
	}
	.lifestyle_auto-leaf {
		right: 100px;
		right: clamp(0.313rem, -8.206rem + 17.75vw, 9.375rem);

		aspect-ratio: 150/271;
	}
	.lifestyle_item-contents::before {
		display: block;
		position: absolute;
		z-index: -1;
		max-width: 1163px;
		width: 169.7811%;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100%;
		opacity: 0.25;
		content: "";

		aspect-ratio: 1163/792;
	}


	.lifestyle_item:nth-of-type(odd) .lifestyle_item-contents::before {
		top: 62%;
		left: 68%;
		transform: translate(-68% , -62%);
		background-image: url(../images/lifestyle/lifestyle_content-oddbg.webp);
	}
	.lifestyle_item:nth-of-type(odd):not(:first-of-type) .lifestyle_item-contents::before {
		top: 47.5%;
		left: 68%;
		transform: translate(-68% , -47.5%);
	}

	.lifestyle_item:nth-of-type(even) .lifestyle_item-contents::before {
		top: -245px;
		left: 28.2%;
		transform: translate(-28.2% , -46.5%);
		background-image: url(../images/lifestyle/lifestyle_content-evenbg.webp);
	}

	.lifestyle_item-title {
		margin-bottom: 20px;
		padding-bottom: 10px;
		padding-left: 15px;
		border-bottom: 3px solid #006252;
		column-gap: 10px;
	}
	.lifestyle_item-subtitle , .lifestyle_item-text {
		padding-left: clamp(0.313rem, -0.275rem + 1.22vw, 0.938rem);
	}
	.lifestyle_item-subtitle {
		margin-bottom: 15px;
	}.lifestyle_item-text {
		margin-bottom: 30px;
	}
	.lifestyle_item-link {
		margin-left: clamp(0.313rem, -0.275rem + 1.22vw, 0.938rem);
	}
	.lifestyle_item-link i {
		right: 20px;
	}
}

@media screen and (max-width: 767px) {
	.display_pc {
		display: none;
	}
	.lifestyle_list {
		row-gap: 65px;
	}
	.lifestyle_item {
		width: 100%;
		padding: 0 30px;
		flex-direction: column;
	}
	#lifestyle_item-jabank,
	#lifestyle_item-insurance,
	#lifestyle_item-auto {
		scroll-margin-top: 88px;
	}
	.lifestyle_jabank-wind {
		bottom: calc(100% + 50px);
		left: 5px;
	}
	.lifestyle_jabank-windY {
		top: 33.3334%;
		left: -20px;
		max-width: 52px;
		width: 100%;

		aspect-ratio: 52/43;
	}
	.lifestyle_item-img {
		width: 100%;
		min-height: 225px;
		margin-bottom: 15px;

		aspect-ratio: 7/5;
	}
	.lifestyle_jabank-leaf {
		right: -7px;
	}
	.lifestyle_insurance-leaf {
		left: -20px;
	}
	.lifestyle_insurance-wind {
		display: none;
	}
	.lifestyle_insurance-windR {
		right: 40px;
		bottom: calc(100% + 20px);
	}
	.lifestyle_auto-wind {
		top: 35.5556%;
		left: -15px;
	}
	.lifestyle_auto-leaf {
		right: -10px;

		aspect-ratio: 2/3;
	}


	.lifestyle_item::before {
		display: block;
		position: absolute;
		left: 50%;
		z-index: -1;
		width: 142.6667%;
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100%;
		opacity: 0.2;
		content: "";

		aspect-ratio: 535/696;
	}
	.lifestyle_item:nth-of-type(odd)::before {
		top: 26%;
		transform: translate(-50%, -26%);
		background-image: url(../images/lifestyle/lifestyle_content-oddbgm.webp);
	}
	.lifestyle_item:nth-of-type(odd):not(:first-of-type)::before {
		top: 37%;
		transform: translate(-50%, -37%);
	}

	.lifestyle_item:nth-of-type(even)::before {
		top: 21.5%;
		transform: translate(-50%, -21.5%);
		background-image: url(../images/lifestyle/lifestyle_content-evenbgm.webp);
	}
	.lifestyle_item-title {
		margin-bottom: 10px;
		column-gap: 5px;
	}
	.lifestyle_item-title::after {
		display: block;
		width: 45px;
		height: 2px;
		margin-left: 5px;
		background-color: #006252;
		content: "";
	}
	.lifestyle_item-subtitle {
		margin-bottom: 10px;
	}
	.lifestyle_item-text {
		margin-bottom: 10px;
	}
	.lifestyle_item-link i {
		right: 25px;
	}
}