@charset "utf-8";

.edit-area {
	&.insights {

		.point-list {
			display: flex;
			flex-wrap: wrap;
			gap: 32px 24px;
			margin-bottom: 64px;

			@media screen and (max-width: 767px) {
				margin-bottom: 32px;
				gap: 16px;
			}

			& li {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				gap: 24px;
				width: calc(100% / 3 - 24px * 2 / 3);

				background: #ffffff;
				box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
				border-radius: 8px;
				overflow: hidden;

				@media screen and (max-width: 767px) {
					gap: 10px;
					width: 100%;
				}
			}

			& a {
				display: block;
				position: relative;
				height: 100%;
				text-decoration: none;

				@media (hover: hover) and (pointer: fine) {
					&:hover {
						.list-text {
							.text-btn {
								background: #009f6d;

								& span {
									color: #fff;

									&:after {
										background-size:
											100% auto,
											0;
									}
								}
							}
						}
					}
				}
			}

			.list-photo {
				& img {
					width: 100%;
					height: auto;
				}
			}

			.list-text {
				padding: 24px 24px calc(32px + 42px);

				@media screen and (max-width: 767px) {
					padding: 15px;
				}

				.text-title {
					margin-bottom: 16px;
					font-weight: 700;
					font-size: 20px;
					line-height: 150%;
					letter-spacing: 0.05em;
					color: #000000;

					@media screen and (max-width: 767px) {
						margin-bottom: 10px;
						font-size: 18px;
					}
				}

				.text-detail {
					margin-bottom: 28px;
					font-weight: 400;
					font-size: 16px;
					line-height: 160%;
					letter-spacing: 0.05em;
					color: #000000;

					@media screen and (max-width: 767px) {
						margin-bottom: 15px;
						font-size: 14px;
					}
				}

				.text-btn {
					position: absolute;
					bottom: 24px;
					left: 50%;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					width: calc(100% - 48px);
					height: 42px;
					background: #ffffff;
					border: 2px solid #009f6d;
					border-radius: 21px;
					line-height: 1;
					transform: translateX(-50%);
					transition: ease 0.25s background-color;

					@media screen and (max-width: 767px) {
						position: static;
						width: 100%;
						height: 36px;
						transform: none;
					}

					& span {
						position: relative;
						display: inline-block;
						padding-right: 22px;
						font-weight: 700;
						font-size: 16px;
						text-align: center;
						letter-spacing: 0.05em;
						color: #009f6d;
						transition: ease 0.25s color;

						@media screen and (max-width: 767px) {
							padding-right: 16px;
							padding-left: 11px;
							font-size: 14px;
						}

						&:after {
							content: "";
							position: absolute;
							right: 0;
							top: calc(50% + 1px);
							z-index: 1;
							display: block;
							width: 7px;
							height: 14px;
							transform: translateY(-50%);
							background:
								url(../img/index/renewal02/icon_arrow01_white.svg) no-repeat center center / 0,
								url(../img/index/renewal02/icon_arrow01_green.svg) no-repeat center center / 100% auto;
						}

						@media screen and (max-width: 767px) {
							&:after {
								width: 5px;
							}
						}
					}
				}
			}
		}
	}
}