@charset 'utf-8';

/* ---------------------------------
	Main Visual
--------------------------------- */

.main-visual {
	height: 100vh;
	position: relative;
}

.main-visual::before {
	width: 1rem;
	height: 5rem;
	border-bottom: 1px solid var(--color-text);
	border-left: 1px solid var(--color-text);
	position: absolute;
	bottom: 2.5rem;
	left: 50%;
	transform: skewY(-45deg);
	content: '';
	display: block;
}

.main-visual::after {
	width: 100%;
	height: 100vh;
	content: '';
	display: block;
	background: url('img/main-visual.jpg') center center / cover no-repeat;
}

.main-visual-content {
	width: 100%;
	max-width: 960px;
	padding: 1rem;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: grid;
	gap: 1rem;
	color: var(--color-logo);
	text-align: center;
	background: rgba(255, 255, 255, 0.75);
}

.main-visual-content p {
	font-size: 1.25em;
}

.main-visual-content em {
	font-size: 1.25em;
}

.main-visual-content img {
	width: 10rem;
}

.main-visual-content ul {
	display: grid;
	gap: 0.5rem;
	grid-template-columns: repeat(2, 1fr);
}

.main-visual-content li {
	padding: 0.5rem;
	background: var(--color-main);
}

@media (min-width: 641px) {
	
.main-visual-content {
	padding: 2.5rem;
}
	
.main-visual-content p {
	font-size: 1.5em;
}

.main-visual-content img {
	width: 20rem;
}

.main-visual-content li {
	padding: 1rem;
	font-size: 1.25em;
}

}

/* ---------------------------------
	Site Links
--------------------------------- */

.site-link-list {
	display: grid;
	gap: 0.5rem;
	grid-template-columns: repeat(2, 1fr);
}

.site-link-list svg {
	height: 2.5rem;
	margin: 0 auto 1rem;
	display: block;
	fill: var(--color-logo);
}

/* ---------------------------------
	Treatment Menus
--------------------------------- */

.treatment-menu-list {
	display: grid;
	gap: 0.5rem;
	grid-template-columns: repeat(2, 1fr);
}

.treatment-menu-list a {
	position: relative;
	display: block;
}

.treatment-menu-list img {
	width: 100%;
	display: block;
}

.treatment-menu-content {
	width: 100%;
	padding: 0.5rem 1rem;
	position: absolute;
	bottom: 0;
	left: 0;
	background: rgba(255, 255, 255, 0.75);
}

.treatment-menu-content h3 {
	padding: 0.5rem;
	position: relative;
}

.treatment-menu-content h3::after {
	width: 100%;
	height: 50%;
	border-right: 1px solid var(--color-text);
	border-bottom: 1px solid var(--color-text);
	position: absolute;
	bottom: 0;
	left: -0.5rem;
	transform: skewX(45deg);
	content: '';
	display: block;
}

/* ---------------------------------
	Clinic Introduction
--------------------------------- */

.clinic-introduction .content-columns {
	align-items: center;
}

.clinic-introduction img {
	width: 100%;
	display: block;
}

.introduction-content {
	padding: 2.5rem;
}

.introduction-content h2 {
	margin-bottom: 2.5rem;
	position: relative;
	font-size: 2em;
	text-align: center;
}

.introduction-content h2::before {
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	content: attr(data-title);
	display: block;
	opacity: 0.1;
	color: var(--color-logo);
	font-size: 7.5rem;
	letter-spacing: 1rem;
}

.introduction-content p:not(:last-child) {
	margin-bottom: 1rem;
}

/* ---------------------------------
	Recommend Menus
--------------------------------- */

.recommend-list a {
	position: relative;
	display: block;
}

.recommend-list a::after {
	width: calc(100% - 5rem);
	height: calc(100% - 5rem);
	content: '';
	display: block;
	position: absolute;
	top: 2.5rem;
	left: 2.5rem;
	z-index: 1;
	background: rgba(255, 255, 255, 0.75);
}

.recommend-list img {
	width: 100%;
	display: block;
	opacity: 0.5;
}

.recommend-content {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	transform: translate(-50%, -50%);
	text-align: center;
}

.recommend-content p:not(:last-child) {
	margin-bottom: 1rem;
}

.recommend-content h3 {
	margin-bottom: 1rem;
	font-size: 1.5em;
}

.recommend-content em {
	font-size: 1.5em;
}

/* ---------------------------------
	Gallery
--------------------------------- */

.gallery-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.gallery-list img {
	width: 100%;
	display: block;
}

@media (min-width: 961px) {
	
	.gallery-list li:nth-of-type(1) {
		grid-column: 1 / 4;
	}

	.gallery-list li:nth-of-type(4) {
		grid-column: 2 / 3;
		grid-row: 2 / 4;
	}

	.gallery-list li:nth-of-type(7) {
		grid-column: 1 / 4;
	}

}

@media (max-width: 960px) {
	
	.gallery-list {
		grid-template-columns: repeat(2, 1fr);
	}
	
	.gallery-list li:nth-of-type(1) {
		grid-column: 1 / 3;
	}
	
	.gallery-list li:nth-of-type(4) {
		min-height: 25vh;
		grid-column: 1 / 3;
	}

	.gallery-list li:nth-of-type(7) {
		grid-column: 1 / 3;
	}
	
}

.gallery-content {
	position: relative;
	background: var(--color-background);
}

.gallery-content-inner {
	width: calc(100% - 5rem);
	padding: 5rem 2.5rem;
	position: absolute;
	top: 50%;
	left: 2.5rem;
	transform: translateY(-50%);
	display: grid;
	gap: 2.5rem;
	color: var(--color-white);
	text-align: center;
	background: var(--color-dark);
}

.gallery-content h2 {
	font-size: 1.5em;
	line-height: 1.5;
}

/* ---------------------------------
	News
--------------------------------- */

.news-columns {
	display: grid;
	gap: 1rem;
}

.news-list {
	display: grid;
	gap: 1rem;
}

.news-list li:not(:last-of-type) {
	border-bottom: 1px solid var(--color-text);
}

.news-list a {
	display: block;
}

.news-list p {
	margin-bottom: 0.5rem;
}

.news-list time {
	margin-right: 0.5rem;
}

.news-list em {
	padding: 0.25rem 0.5rem;
	display: inline-block;
	font-size: 0.9em;
	background: var(--color-background);
}

/* ---------------------------------
	Clinic Information & Access
--------------------------------- */

.clinic-info .content-columns {
	gap: 1rem;
	align-items: center;
}

.clinic-info img {
	width: 100%;
	display: block;
}

.clinic-info-content h3 {
	margin-bottom: 1rem;
	line-height: 1.5;
}

.clinic-info-content h3::after {
	content: attr(data-title);
	display: block;
	font-size: 1.5em;
	letter-spacing: 0.25em;
}

.clinic-info-list {
	display: grid;
	grid-template-columns: max-content 1fr;
}

.clinic-info-list dt,
.clinic-info-list dd {
	padding: 0.75rem 0.5rem;
	border-top: 1px solid var(--color-accent);
	line-height: 1.5;
}

.clinic-info-list dt {
	display: grid;
	gap: 0.5rem;
	grid-template-columns: max-content 1fr;
	align-items: center;
}

.clinic-info-list svg {
	width: 1rem;
	fill: var(--color-accent);
}

/* ---------------------------------
	Media Query
--------------------------------- */

@media (max-width: 1280px) {
	
	.gallery-content-inner {
		padding: 2.5rem 1rem;
	}
	
}

@media (min-width: 641px) {

	/* Main Visual */

	.main-visual-content ul {
		grid-template-columns: repeat(4, 1fr);
	}

	/* Site Menus */
	
	.site-link-list {
		grid-template-columns: repeat(4, 1fr);
	}
	
	/* Treatment Menus */
	
	.treatment-menu-list {
		grid-template-columns: repeat(4, 1fr);
	}
	
	/* Recommend Menus */

	.recommend-list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
	
	/* News */

	.news-columns {
		gap: 5rem;
		grid-template-columns: 1fr 2fr 1fr;
		align-items: center;
	}

	.news .content-headline {
		margin-bottom: 0;
	}

}