@charset "utf-8";

.color--accent {
	color: var(--color-accent);
}

/* ---------------------------------------------------------------------------------------------
 * Unified catch heading
 * --------------------------------------------------------------------------------------------- */

.summer-afternoon {

	& .section-header__catch,
	& .discount__catch,
	& .message__catch,
	& .lounge__catch {
		font-family: var(--serif);
		font-weight: 500;
		font-size: clamp(1.8rem, 4vw, 2.4rem);
		line-height: 1.65;
		text-align: left;
		margin: 0;
	}

	& .section-header__catch {
		font-weight: 600;
	}

}

.summer-afternoon {

	& .intro {

		& .section-header__txt {
			display: flex;
			flex-direction: column;
			gap: 20px;
			text-align: left;
		}

		& .section-header__read {
			text-align: left;
			line-height: 1.9;
			margin: 0;
		}

		& .intro__divider {
			border: none;
			border-top: 1px solid rgba(0, 0, 0, 0.2);
			margin: clamp(24px, 4vw, 40px) 0;
			width: 100%;
		}
	}

	& .intro__terms {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		gap: 12px;
		text-align: left;
	}

	& .intro__terms-item {
		padding-left: 1.2em;
		position: relative;
		font-size: clamp(1.4rem, 2vw, 1.6rem);
		line-height: 1.6;

		&:before {
			content: "";
			width: 8px;
			height: 8px;
			background-color: var(--color-accent);
			border-radius: 50%;
			position: absolute;
			left: 0;
			top: 0.55em;
		}

		& dt,
		& dd {
			display: inline;
			margin: 0;
		}
	}

	& .intro__terms-lbl {
		font-weight: 600;

		&:after {
			content: "：";
		}
	}
}

/* ---------------------------------------------------------------------------------------------
 * Discount section (MRI / Tumor marker)
 * --------------------------------------------------------------------------------------------- */

.summer-afternoon {

	& .discount__img {
		max-width: 900px;
		margin-inline: auto;
		border-radius: 5px;
		overflow: hidden;

		& img {
			width: 100%;
			height: auto;
			display: block;
		}
	}

	& .discount__catch {
		margin-top: clamp(20px, 3vw, 32px);
		font-weight: 500;
		font-feature-settings: "palt";

		& strong {
			font-weight: 700;
			font-size: 1.4em;
			letter-spacing: 0.02em;
			margin-inline-start: 0.25em;
		}
	}

	& .discount__list {
		border-top: 1px solid rgba(0, 0, 0, .2);
		margin-top: clamp(20px, 3vw, 32px);
	}

	& .discount__item {
		display: flex;
		flex-direction: row;
		align-items: stretch;
		justify-content: space-between;
		gap: 16px;
		padding: 20px 0;
		border-bottom: 1px solid rgba(0, 0, 0, .2);
	}

	& .discount__item-main {
		flex: 1;
		min-width: 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: 12px;
	}

	& .discount__item-name {
		font-weight: 600;
		font-size: clamp(1.5rem, 2.4vw, 1.9rem);
		line-height: 1.4;
		margin: 0;
	}

	& .discount__markers {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		row-gap: 4px;
		column-gap: 0;
		margin: 0;

		& .marker {
			border: 1px solid rgba(100, 91, 91, .2);
			border-radius: 20px;
			text-align: center;
			line-height: 1.3;
			padding: 2px 10px;
			background-color: #fff;
			box-sizing: border-box;
			position: relative;
			margin-left: 1em;
			font-size: clamp(1.0rem, 3vw, 1.2rem);
			white-space: nowrap;

			&:first-child {
				margin-left: 0;
			}

			&:before {
				content: "＋";
				color: var(--color-txt);
				font-size: inherit;
				line-height: 1;
				position: absolute;
				right: 100%;
				top: 50%;
				transform: translateY(-50%);
			}

			&:first-child:before {
				content: none;
			}
		}
	}

	& .discount__link {
		margin: 0;

		& .btn {
			font-size: 1.4rem;
			padding: 10px 20px;
			min-height: 44px;
			display: inline-flex;
			align-items: center;
		}
	}

	& .discount__price {
		flex-shrink: 0;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		justify-content: space-between;
		gap: 2px;
		margin: 0;
		padding: 0.6em 0 0;
		text-align: right;

		& dt,
		& dd {
			margin: 0;
		}

		& .price__lbl {
			color: var(--color-accent);
			font-weight: 600;
			font-size: clamp(1.2rem, 2vw, 1.4rem);
			letter-spacing: 0.05em;
			line-height: 1.3;
		}

		& .price__default {
			font-size: clamp(1.1rem, 2vw, 1.3rem);
			opacity: 0.7;
			line-height: 1.3;

			& s {
				text-decoration-thickness: 1.5px;
			}
		}

		& .price__sale {
			display: flex;
			align-items: baseline;
			justify-content: flex-end;
			line-height: 1.2;

			&.-large {
				font-weight: 600;
				gap: 0.1em;

				& .ib {
					font-size: clamp(1.1rem, 2vw, 1.3rem);
					font-weight: 400;
					margin-right: 0.3em;
				}

				& strong {
					font-size: clamp(2.4rem, 5vw, 3.4rem);
					font-weight: 600;
					line-height: 1;
					letter-spacing: -0.02em;
				}

				& .ext {
					font-size: clamp(1.1rem, 2vw, 1.3rem);
					font-weight: 400;
					margin-left: 0.25em;
				}
			}
		}
	}
}

@media all and (min-width: 768px) {

	.summer-afternoon {

		& .discount__item {
			gap: 24px;
			padding: 24px 5px;
		}
	}
}

@media all and (min-width: 1280px) {

	.summer-afternoon {

		& .discount__item {
			padding: 28px 10px;
		}
	}
}

/* ---------------------------------------------------------------------------------------------
 * Message section
 * --------------------------------------------------------------------------------------------- */

.summer-afternoon {

	& .message__catch,
	& .lounge__catch {
		margin-bottom: 1em;
	}

	& .message {

		& .message__txt {
			font-size: clamp(1.3rem, 2vw, 1.5rem);
			line-height: 1.9;

			& + .message__txt {
				margin-top: 1.5em;
			}
		}
	}
}

/* ---------------------------------------------------------------------------------------------
 * Lounge section (1 main + 2 sub)
 * --------------------------------------------------------------------------------------------- */

.summer-afternoon {

	& .lounge {

		& .lounge__imgs {
			display: grid;
			grid-template-columns: 2fr 1fr;
			gap: 10px;
			margin-bottom: clamp(20px, 3vw, 32px);
		}

		& .lounge__img {
			margin: 0;
			border-radius: 5px;
			overflow: hidden;

			&.-main {
				grid-column: 1;
				grid-row: 1 / span 2;
			}

			&.-sub {
				grid-column: 2;
				aspect-ratio: 3 / 2;
			}

			& img {
				width: 100%;
				height: 100%;
				object-fit: cover;
				display: block;
			}
		}

		& .lounge__txt {
			font-size: clamp(1.3rem, 2vw, 1.5rem);
			line-height: 1.9;
			margin: 0;
		}
	}
}

@media all and (min-width: 768px) {

	.summer-afternoon {

		& .lounge .lounge__imgs {
			gap: 15px;
		}
	}
}

@media all and (min-width: 1280px) {

	.summer-afternoon {

		& .lounge .lounge__imgs {
			gap: 20px;
		}
	}
}