@charset "UTF-8";

#contents {
	padding-top: 17rem;

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

	.article-title {
		font-weight: 700;
		font-size: 5rem;
		line-height: 7.2rem;
		letter-spacing: 0.08em;

		@media screen and (max-width: 767px) {
			font-size: 20px;
			line-height: 1.5;
		}
	}

	.gray-box {
		margin-top: 3.6rem;
		background-color: #F5F5F5;
		padding: 3.6rem 7.9rem;
		display: flex;
		justify-content: space-between;

		@media screen and (max-width: 767px) {
			margin-top: 20px;
			padding: 20px 15px;
			flex-direction: column;
		}

		.left-txt {
			width: 72rem;

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

			.with-square {
				margin-top: 2.4rem;
				font-weight: 700;
				font-size: 2rem;
				letter-spacing: 0.08em;
				padding-left: 2.6rem;
				position: relative;

				&::before {
					content: "";
					background-image: url(../../img/single/success-stories/point.png);
					width: 1.74rem;
					height: 1.5rem;
					background-repeat: no-repeat;
					background-size: contain;
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
				}

				@media screen and (max-width: 767px) {
					margin-top: 0;
					font-size: 16px;
					padding-left: 15px;

					&::before {
						width: 12px;
						height: 11px;
					}
				}
			}

			.company {
				font-weight: 700;
				font-size: 2.4rem;
				letter-spacing: 0.08em;
				margin-top: 0.6rem;

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

			.detail {
				font-size: 1.6rem;
				line-height: 1.75;
				margin-top: 0.5rem;

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

		.right-img {
			width: 36.3rem;

			@media screen and (max-width: 767px) {
				width: 100%;
				margin-top: 15px;
			}
		}
	}

	.passages {
		padding: 12.6rem 0 8.4rem;

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

		.passages-title {
			font-weight: 700;
			font-size: 3.8rem;
			text-align: center;
			letter-spacing: 0.08em;
			margin-bottom: 2.2rem;

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

		.passage {
			margin-bottom: 6.8rem;

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

			.passage-title {
				font-weight: 700;
				font-size: 2.2rem;
				letter-spacing: 0.08em;
				padding-left: 3rem;
				position: relative;

				&::before {
					content: "";
					background-image: url(../../img/single/success-stories/point.png);
					width: 1.74rem;
					height: 1.5rem;
					background-repeat: no-repeat;
					background-size: contain;
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
				}

				@media screen and (max-width: 767px) {
					font-size: 16px;
					padding-left: 15px;

					&::before {
						width: 12px;
						height: 11px;
					}
				}
			}

			.passage-desc {
				margin-top: 0.8rem;
				font-size: 1.6rem;
				line-height: 1.75;

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

			.passage-img {
				margin-top: 4rem;

				@media screen and (max-width: 767px) {
					margin-top: 20px;
				}
			}
		}
	}
}

.posts-list {
	background-color: #F5F5F5;
	padding: 8rem 0;
	margin-bottom: 15rem;

	@media screen and (max-width: 767px) {
		padding: 40px 0;
		margin-bottom: 70px;
	}

	.others {

		.text {
			display: none;
			font-weight: 700;
			font-size: 2.6rem;
			letter-spacing: 0.08em;

			@media screen and (max-width: 767px) {
				font-size: 18px;
				text-align: center;
			}
		}

		.more {
			margin: 0 auto;
			width: 24rem;
			height: 5rem;
			border-radius: 2.5rem;
			background-color: #000;
			display: flex;
			justify-content: center;
			align-items: center;
			font-family: 'Urbanist';
			font-weight: 900;
			font-size: 1.4rem;
			color: #FFFFFF;

			@media screen and (max-width: 767px) {
				width: 200px;
				height: 40px;
				border-radius: 20px;
				font-size: 14px;
			}
		}
	}

	.common-list {
		padding-top: 3.3rem;
		width: 94.8rem;
		/* display: grid; */
		display: none;
		grid-template-columns: repeat(3, 1fr);
		gap: 4.2rem;

		@media screen and (max-width: 767px) {
			padding-top: 30px;
			width: 100%;
			grid-template-columns: 1fr;
			gap: 30px;
		}

		& li {
			width: 28.8rem;

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

			& a {
				display: flex;
				flex-direction: column-reverse;

				.left-texts {
					width: 100%;

					.list-title {
						padding-top: 1.4rem;
						padding-bottom: 1.2rem;
						margin-bottom: 0.9rem;
						border-bottom: 1px solid #000;
						font-weight: 700;
						font-size: 1.6rem;
						line-height: 1.39;
						letter-spacing: 0.08em;

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

					.list-detail {
						font-weight: 500;
						font-size: 1.4rem;
						letter-spacing: 0.08em;

						@media screen and (max-width: 767px) {
							font-size: 12px;
						}
					}

					.btn {
						display: none;
					}
				}

				.wp-post-image {
					width: 100%;
				}
			}
		}
	}
}