@charset "utf-8";

:root {
	--main-color: #4d2909;
	--sub-color: #ffe9d1;
	--accent-color: #c2a890;
	--invert-color: #fff;
}

.hero-header {
	width: 100%;
	background-color: var(--main-color);
	padding: 3% 0;
}
.hero-copyarea {
	width: 100%;
	max-width: 900px;
	padding: 1%;
	margin: 0 auto;
	background-color: var(--invert-color);
	text-align: center;
	letter-spacing: 0.05em;
}

.hero-title {
	font-size: min(3vw, 26px);
	font-weight: 700;
	color: var(--main-color);
}
.hero-description {
	font-size: min(1.6vw, 18px);
	font-weight: 700;
	color: var(--main-color);
	margin-top: 0.2em;
}

.hero-swiper {
	margin-top: 40px;
}

.swiper-pagination-bullet-active {
	background-color: var(--main-color);
}

.gallery-item {
	width: 100%;
	max-width: 900px;
	position: relative;
}
.gallery-item figure {
	width: 100%;
	height: 0;
	padding-bottom: 61.8%;
	position: relative;
}
.gallery-item figure img {
	width: 100%;
	height: 100%;
	position: absolute;
	object-fit: cover;
	top: 0;
	left: 0;
}
.bg-color {
	width: 100%;
	background-color: var(--sub-color);
}
.main-wrapper {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding-top: 80px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6.25%;
}

.main {
	width: calc(100% - 440px - 80px);
}
.sidebar {
	width: 440px;
	max-width: 100%;
	padding: 4%;
	background-color: var(--main-color);
}

.main-title {
	position: relative;
	font-size: min(2vw, 22px);
	font-weight: 700;
	color: var(--main-color);
	padding-bottom: 0.5em;
	margin-bottom: 1em;
	letter-spacing: 0.05em;
}

.main-title::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 1px;
	background-color: var(--main-color);
	left: 0;
	bottom: 0;
}
.subtitle {
	display: inline-block;
	position: relative;
	padding-left: 3em;
	font-size: min(1.5vw, 16px);
}

.subtitle::before {
	content: "";
	position: absolute;
	width: 1em;
	height: 2px;
	background-color: var(--main-color);
	left: 1.5em;
	top: 50%;
	transform: translate(-50%, -50%);
}

.mission-wrapper,
.style-wrapper,
.price-wrapper,
.staff-wrapper,
.faq-wrapper,
.blog-wrapper {
	margin-bottom: 60px;
}

.mission-text {
	letter-spacing: 0.06em;
	line-height: 1.8;
	font-size: min(1.1vw, 16px);
}

.director-name {
	margin: 1em 0;
	font-weight: 600;
	text-align: center;
}

.style-swiper-wrapper {
	padding-bottom: 50px;
}

.style-swiper .swiper-scrollbar-drag {
	background-color: var(--main-color);
}

.style-container {
	padding: 6% 8%;
	background-color: var(--invert-color);
	border-radius: 10px;
}
.style-title {
	display: inline-block;
	background-color: var(--main-color);
	padding: 7px 20px 6px;
	margin-bottom: 16px;
	border-radius: 5px;
	font-weight: 700;
	color: var(--invert-color);
	letter-spacing: 0.05em;
}

.style-imagewrapper {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 65%;
	margin: 0 auto 20px;
	border-radius: 10px;
	overflow: hidden;
}
.style-image {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	top: 0;
	left: 0;
}
.style-text {
	letter-spacing: 0.05em;
}

.price-card {
	width: 100%;
	background-color: var(--main-color);
	padding: 5%;
	border-radius: 10px;
	margin-bottom: 16px;
}
.price-titleflex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 40px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--invert-color);
	margin-bottom: 24px;
}

.price-title {
	width: calc(100% - 140px);
	font-size: min(1.7vw, 18px);
	font-weight: 700;
	color: var(--invert-color);
}

.price {
	width: 100px;
	font-size: min(1.7vw, 18px);
	font-weight: 700;
	color: var(--invert-color);
}
.price.sp {
	display: none;
}
.price-descriptionflex {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 24px;
	margin-bottom: 24px;
}

.price-imagewrapper {
	position: relative;
	width: 12%;
	height: 0;
	padding-bottom: 12%;
	overflow: hidden;
	border-radius: 5px;
}

.price-image {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	top: 0;
	left: 0;
}

.price-text {
	width: calc(100% - 12% - 24px);
	color: var(--invert-color);
}

.price-announce {
	font-size: min(1.4vw, 13px);
	color: var(--invert-color);
	opacity: 0.6;
}

.staff-lists {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
}

.staff-member {
	width: calc((100% - 40px * 2) / 3);
}

.staff-imagewrapper {
	position: relative;
	width: 80%;
	height: 0;
	padding-bottom: 80%;
	overflow: hidden;
	border-radius: 10px;
	margin: 0 auto 10px;
}

.staff-image {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	top: 0;
	left: 0;
}

.name {
	font-weight: 600;
	text-align: center;
}

.faq-item {
	width: 100%;
	background-color: var(--invert-color);
	padding: 5%;
	border-radius: 10px;
	margin-bottom: 16px;
}

.hover-post {
	width: calc((100% - 10px) / 2);
}

.article-wrapper {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.post-item {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	background-color: var(--invert-color);
	padding: 4%;
	border-radius: 10px;
}

.post-eyecatch-wrapper {
	position: relative;
	width: 35%;
	height: 0;
	padding-bottom: 35%;
	overflow: hidden;
	border-radius: 5px;
}
.post-eyecatch {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	top: 0;
	left: 0;
}

.post-group {
	width: calc(65% - 10px);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.post-title {
	font-size: min(1.2vw, 16px);
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.8;
}
.published-date {
	margin-top: auto;
	color: var(--accent-color);
	font-size: min(1vw, 14px);
}

/*サイドバー*/
.info-panel {
	position: -webkit-sticky;
	position: sticky;
	top: 4%;
}
.info-title {
	position: relative;
	font-size: min(2vw, 22px);
	font-weight: 700;
	color: var(--invert-color);
	padding-bottom: 0.5em;
	margin-bottom: 1em;
	letter-spacing: 0.05em;
}

.info-title::before {
	content: "";
	position: absolute;
	width: 100%;
	height: 1px;
	background-color: var(--invert-color);
	left: 0;
	bottom: 0;
}
.info-title .subtitle::before {
	background-color: var(--invert-color);
}

.clinic-imagewrapper {
	position: relative;
	width: 100%;
	height: 0;
	padding-bottom: 65%;
	overflow: hidden;
	border-radius: 5px;
	margin-bottom: 1.6em;
}

.clinic-image {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	top: 0;
	left: 0;
}

.info-datalist {
	display: flex;
	color: var(--invert-color);
	flex-wrap: wrap;
	gap: 6%;
}

.info-datalist dt {
	width: 25%;
	padding-bottom: 1.6em;
	border-bottom: 1px dashed var(--invert-color);
	margin-bottom: 1.6em;
}
.info-datalist dd {
	width: 69%;
	padding-bottom: 1.6em;
	border-bottom: 1px dashed var(--invert-color);
	margin-bottom: 1.6em;
}

.button-viewmore {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 80%;
	text-align: center;
	padding: 16px 0;
	font-weight: 700;
	color: var(--main-color);
	background-color: #fff;
	border: 2px solid var(--main-color);
	border-radius: 50px;
	margin: 60px auto 0;
	cursor: pointer;
}

@media screen and (max-width: 1023px) {
	body {
		overflow-x: hidden;
	}
	.hero-header {
		padding: 0;
		background-color: var(--sub-color);
	}
	.hero-copyarea {
		padding: 5% 2%;
	}
	.hero-title {
		font-size: min(18px, 5vw);
	}
	.hero-description {
		font-size: min(13px, 3vw);
	}

	.hero-swiper {
		margin-top: 0;
		padding-bottom: 40px;
	}
	.main {
		width: 100%;
	}

	.main-wrapper {
		padding-top: 30px;
	}

	.main-title {
		width: 88%;
		margin: 0 auto 1em;
		font-size: min(4vw, 16px);
	}
	.subtitle {
		font-size: min(3vw, 12px);
	}
	.mission-flex {
		width: 88%;
		margin: 0 auto;
	}
	.name {
		font-size: min(4vw, 16px);
		margin-bottom: 0.8em;
	}
	.name span {
		font-size: 60%;
	}
	.director-name {
		font-size: min(4vw, 16px);
		margin-bottom: 0.8em;
		margin-top: 0.8em;
	}
	.mission-text {
		font-size: min(3vw, 12px);
	}
	.faq-question {
		display: flex;
		gap: 6px;
		margin-bottom: 4px;
		font-weight: 600;
	}
	.faq-question span {
		display: flex;
		background-color: var(--main-color);
		padding: 7px;
		border-radius: 4px;
	}
	.faq-question span svg {
		fill: #fff;
	}
	.faq-answer {
		display: flex;
		gap: 6px;
	}
	.faq-answer span {
		display: flex;
		background-color: transparent;
		padding: 7px;
	}

	.sidebar {
		width: 100%;
		padding: 8% 6%;
	}
	.style-swiper {
		width: 88%;
		margin: auto;
		padding: 4% 0;
	}
	.price-titleflex {
		gap: 0px;
	}
	.price-title {
		width: 100%;
		font-size: min(4vw, 16px);
		margin-bottom: 0.6em;
	}
	.price-card {
		width: 88%;
		margin: 0 auto 16px;
	}
	.price.pc {
		display: none;
	}
	.price.sp {
		display: block;
		width: 100%;
		text-align: right;
		font-size: min(4vw, 16px);
		margin-bottom: 0.8em;
	}
	.price-announce {
		font-size: min(3vw, 12px);
	}
	.staff-lists {
		width: 88%;
		margin: 0 auto;
		gap: 20px;
	}
	.staff-member {
		width: calc((100% - 20px * 2) / 3);
	}
	.faq-container {
		width:88%;
		margin: 0 auto;
	}

	.article-wrapper {
		flex-direction: column;
		width: 88%;
		margin: 0 auto;
	}
	.hover-post {
		width: 100%;
	}
	.post-title {
		font-size: min(4vw, 16px);
	}
	.published-date {
		font-size: min(3vw, 12px);
	}

	.info-title {
		font-size: min(4vw, 16px);
		margin-bottom: 1.6em;
	}
}