@charset "utf-8";

.sub-main-visual {
	>.inner {
		background: url("../img/drip/img_sub_mainview.webp") no-repeat center center / cover #ededed;
	}
}

.drip-catch {
	position: relative;
	overflow: hidden;
	margin: 0 auto 40px;

	&::before {
		content: "";
		position: absolute;
		width: 600px;
		height: 600px;
		border-radius: 50%;
		background-color: rgba(255, 255, 255, .9);
		z-index: 3;
		left: -280px;
		top: 50%;
		transform: translateY(-50%);
	}

	.image {
        width: 100%;
        height: auto;
		aspect-ratio: 2/1;

		> img {
			width: 100%;
			height: auto;
			display: block;
			aspect-ratio: 2/1;
			object-fit: cover;
			object-position: top right;
		}
	}

	.catch {
		position: absolute;
		left: min(4vw, 40px);
		top: 50%;
		transform: translateY(-50%);
		z-index: 5;

		p {
			font-size: min(5.33vw, 32px);
			text-align: center;
			font-family: "Yu Mincho", "YuMincho", 'Noto Serif JP', serif;
			line-height: 1.4;
			color: #F18D1E;
			position: relative;
			margin-bottom: 40px;

			&::before {
				content: "・・・";
				position: absolute;
				left: 50%;
				font-size: min(3.73vw, 18px);
				transform: translateX(-50%);
				z-index: 5;
				bottom: -20px;
			}
		}

		span {
			position: relative;
			text-align: center;
			font-size: min(3.2vw, 15px);
			font-family: "Yu Mincho", "YuMincho", 'Noto Serif JP', serif;
			display: block;
			line-height: 1.6;

			&::before {
				content: "";
				position: absolute;
				width: min(4.26vw, 16px);
				height: min(4.26vw, 16px);
				border-radius: 50%;
				top: -2px;
				left: 8px;
				background-color: #F18D1E;
				opacity: .4;
				z-index: -1;
			}
		}
	}
}

@media screen and (max-width: 767px) {
	.drip-catch {
		&::before {
			width: 80vw;
			height: 80vw;
			left: -30vw;
		}

		.image {
			aspect-ratio: 141/100;

			> img { aspect-ratio: 141/100; }
		}



		.catch {
			p { margin-bottom: min(5.86vw, 40px); }

			span {
				&::before { top: -4px; left: -6px; }
			}
		}
	}
}

.drip-table-list {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 16px;

	li {
		padding-left: min(3.73vw, 15px);
		position: relative;

		&::before {
			content: "・";
			left: 0;
			top: 0;
			position: absolute;
			z-index: 1;
		}
	}
}

.drip-table {

	table,
	th,
	td {
		border-collapse: collapse;
	}

	table {
		border: .5px solid #ccc;
		width: 100%;
	}

	th,
	td {
		padding: 8px;
		font-size: min(3.73vw, 15px);
		line-height: 1.4;
	}

	th {
		background-color: #f0f0f1;
	}
}

@media screen and (min-width: 768px) {
	.drip-table {

		th,
		td {
			padding: 12px 16px;
			line-height: 1.4;
		}

		th {
			width: 30%;
			border-right: .5px solid #ccc;
			font-weight: 500;
			border-bottom: .5px solid #ccc;
			vertical-align: top;
		}

		td {
			border-bottom: .5px solid #ccc;
			text-align: left;
		}

		tr {
			&:last-child {

				th,
				td {
					border-bottom: 0;
				}
			}
		}
	}
}

@media screen and (max-width: 767px) {
	.drip-table {

		th,
		td {
			display: block;
			padding: 12px min(4.26vw, 16px);
			border-bottom: .5px solid #ccc;
		}

		th {
			font-weight: 600;
		}

		tr {
			&:last-child {
				td {
					border-bottom: 0;
				}
			}
		}
	}
}

.drip-table-scroll {
	padding: 0 !important;
}

.drip-table-scroll-item {
	overflow-y: scroll;
	height: 120px;
	padding: 12px min(4.26vw, 16px);

	p {
		font-size: min(3.73vw, 14px);
		margin-bottom: 16px;

		&:last-child {
			margin-bottom: 0;
		}
	}
}