@charset "UTF-8";
/*
	Filename: home
	Version: 1.0.1
*/
/*-----------------------------------------------------
	#mv
------------------------------------------------------*/
#mv {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.src {
	position: absolute;
	top: 50%;
	right: 20px;
	z-index: 10;
	transform: translateY(-50%);
}
.mv_swiper,
.mv_swiper .swiper-wrapper,
.mv_swiper .swiper-slide {
  width: 100%;
  height: calc(100vh - 140px);
  min-height: 860px;
}
.swiper-slide {
	position: relative;
}
.swiper-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(0,0,0, .05);
  pointer-events: none;
}
.swiper-slide.none::before {
  display: none;
}
#mv .mv_swiper {
  position: relative;
}
#mv .swiper-pagination {
  position: absolute;
  top: 50%;
  left: 20px;
  right: auto;
  bottom: auto;
  transform: translateY(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: auto;
}
#mv .swiper-pagination-bullet {
  width: 20px;
  height: 20px;
  margin: 0;
  background: #fff;
  opacity: 1;
}
#mv .swiper-pagination-bullet-active {
  background: var(--usugreen-color);
}
.mv_text {
	position: absolute;
	top: calc(50% - 50px);
	left: 50%;
	transform: translateX(-50%) translateY(-50%);
	z-index: 2;
	width: 100%;
	text-align: center;
}
.mv_text h2 {
	margin-bottom: 30px;
	font-family: var(--font-serif);
  font-size: 60px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.1em;
	color: #fff;
	text-shadow:
		0 2px 4px rgba(0, 0, 0, 0.45),
		0 4px 12px rgba(0, 0, 0, 0.25);
}
.mv_text p {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.1em;
	color: #fff;
}
.mv_swiper .swiper-slide picture,
.mv_swiper .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
}
.mv_swiper .swiper-slide img {
	object-position: center center;
  object-fit: cover;
}
.mv_bottom {
	position: absolute;
	bottom: 40px;
	width: 100%;
	z-index: 10;
}
.mv_bottom .wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 1200px;
}
.mv_bottom ul {
	display: grid;
	grid-template-columns: repeat(2, auto);
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mv_bottom li {
	display: flex;
	justify-content: center;
	align-items: center;
	min-width: 100px;
	height: 42px;
	padding: 0 18px;
	background: #E9F5BF;
	font-family: var(--font-serif);
	font-size: 16px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.08em;
	white-space: nowrap;
}
.mv_bottom img {
	display: block;
	width: auto;
	height: auto;
}
@media screen and (max-width: 1280px) {
	.mv_bottom .wrap {
		width: calc(100% - 80px);
		text-align: right;
	}
}
@media screen and (max-width: 1000px) {
  .mv_swiper,
  .mv_swiper .swiper-wrapper,
  .mv_swiper .swiper-slide {
    height: calc(100svh - 60px);
    min-height: 600px;
  }
	#mv .swiper-pagination, .src {
		display: none;
	}
	.mv_text h2 {
		font-size: 50px;
	}
	.mv_text p {
		font-size: 18px;
	}
	.mv_bottom img {
		width: 400px;
	}
}
@media screen and (max-width: 750px) {
	.mv_swiper,
  .mv_swiper .swiper-wrapper,
  .mv_swiper .swiper-slide {
    height: 128vw;
    min-height: auto;
  }
	.mv_text {
		top: 50%;
	}
	.mv_text h2 {
		margin-bottom: 0;
		font-size: 6.667vw;
	}
	.mv_text p {
		display: none;
	}
	.mv_bottom {
		bottom: 20px;
	}
	.mv_bottom .wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 16px;
		width: 100%;
		padding: 0 20px;
	}
	.mv_bottom ul {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 6px;
		width: 100%;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.mv_bottom li {
		flex: 1;
		min-width: 0;
		height: 36px;
		padding: 0 4px;
		font-size: 13px;
		white-space: nowrap;
	}
	.mv_bottom img {
		display: block;
		width: auto;
		max-width: 100%;
		height: auto;
		margin: 0 auto;
	}
}


/*-----------------------------------------------------
	#news
------------------------------------------------------*/
#news {
  position: relative;
	z-index: 1;
  width: 100%;
	margin-top: -30px;
}
.grad_bg {
	position: absolute;
	top: 100px;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 448px;
	background: #FFFDF7;
	background: linear-gradient(180deg, rgba(255, 253, 247, 1) 0%, rgba(255, 255, 255, 1) 100%);
}
.news_illust {
	position: absolute;
	top: 100px;
	right: 0;
	z-index: 0;
}
.post_list {
	justify-content: space-between;
	position: relative;
	z-index: 2;
	width: 1200px;
	min-height: 470px;
	margin: 0 auto;
	padding: 60px 40px;
	background: #fff;
	box-shadow: 0 0 40px 0 rgba(0,0,0,0.06);
}
.post_l {
	width: 321px;
	padding-top: 30px;
	text-align: center;
}
.post_l h2 {
	font-family: var(--font-serif);
  font-size: 36px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.1em;
}
.post_l h2 span {
	display: block;
	margin-top: 20px;
	color: transparent;
  background: linear-gradient(90deg, rgba(162,191,60, 1) 0%, rgba(87,196,107, 1) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
	font-family: "Cormorant Garamond", serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.1em;
}
.post_r {
	width: calc(100% - 321px);
	padding: 0 80px;
}
.post_item a.flex {
	align-items: center;
	gap: 10px 30px;
	position: relative;
	padding: 30px 40px 30px 20px;
	border-bottom: 1px solid #BCBCBC;
}
.post_item a.flex::after {
  content: "";
  display: block;
  position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
  width: 22px;
  height: 8px;
  background: url("../img/common/post_arrow.svg") no-repeat center center;
  background-size: cover;
}
.post_meta {
	align-items: center;
	gap: 12px;
	width: 100%;
}
.post_meta .category_list {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.post_meta .category_list span {
	display: inline-block;
	padding: 3px 10px;
	background-color: var(--usugreen-color);
	font-size: 12px;
	color: #fff;
	line-height: 1.4;
}
.post_item a.flex .date {
	display: block;
	font-family: "Cormorant Garamond", serif;
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.1em;
	color: #BCBCBC;
}
.post_item a.flex p {
	font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.1em;
}
.post_list .center {
	position: relative;
	width: 321px;
	margin-top: -80px;
}
@media screen and (max-width: 1280px) {
	.post_list {
		width: calc(100% - 80px);
	}
	.post_l {
		width: 250px;
	}
	.post_r {
		width: calc(100% - 250px);
		padding: 0;
	}
	.post_list .center {
		width: 250px;
	}
}
@media screen and (max-width: 1000px) {
	.post_list {
		min-height: 200px;
	}
	.post_l {
		width: 100%;
	}
	.post_l h2 {
		margin-bottom: 30px;
	}
	.post_r {
		width: 100%;
	}
	.post_meta {
		flex-direction: row;
		width: 100%;
	}
	.post_list .center {
		width: 100%;
		margin-top: 30px;
	}
}
@media screen and (max-width: 750px) {
	#news {
		margin-top: 0;
	}
	.grad_bg {
		top: 0;
	}
	.news_illust {
		top: 0;
	}
	#news .mv_lead {
		padding: 50px 20px;
	}
	#news .mv_lead p {
		font-size: 14px;
		font-weight: 700;
		line-height: 1.6;
		letter-spacing: 0.1em;
		text-align: center;
	}
	.post_list {
		width: 100%;
		padding: 0 20px;
		background: none;
		box-shadow: none;
	}
	.post_l h2 {
		font-size: 30px;
	}
	.post_l h2 span {
		margin-top: 10px;
		font-size: 14px;
	}
	.post_item a.flex {
		flex-direction: column;
		justify-content: flex-start;
		gap: 10px;
		padding: 20px 40px 20px 20px;
	}
	.post_item a.flex .date {
		font-size: 14px;
	}
	.post_item a.flex p {
		width: 100%;
		font-size: 16px;
	}
	.post_list .center {
		margin-top: 40px;
	}
}
/*-----------------------------------------------------
	#symptom
------------------------------------------------------*/
#symptom {
	padding-top: 140px;
}
.symptom {
	justify-content: space-between;
}
.symptom_child {
	width: 49%;
}
.symptom_child h3.symptom_trigger {
  position: relative;
  cursor: pointer;
	padding: 29px 0;
	background: #E9F5BF;
	font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.1em;
	text-align: center;
}
.symptom_child h3.symptom_trigger::after {
  content: "";
  position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%) rotate(-180deg);
  width: 40px;
  height: 40px;
  background: url("../img/common/aco_arrow.svg") no-repeat center center;
	background-size: cover;
  transition: transform 0.3s ease;
}
.symptom_child.is-open h3.symptom_trigger::after {
  transform: translateY(-50%) rotate(0deg);
}
.symptom_child:last-of-type h3.symptom_trigger {
	background: #DCFFE3;
}
.symptom_content {
  display: none;
	padding: 30px 24px 40px;
	background: #fff;
	box-shadow: 0 0 40px 0 rgba(0,0,0,0.06);
}
.symptom_content ul {
	gap: 14px 30px;
	margin-bottom: 30px;
}
.symptom_content ul li {
	width: calc((100% - 30px) / 2);
}
.symptom_child:last-of-type .symptom_content ul li {
	width: 100%;
}
.symptom_content ul li a {
	display: block;
	position: relative;
	padding: 22px 22px 22px 5px;
	border-bottom: 1px solid #bcbcbc;
	font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.1em;
}
.symptom_content ul li a::after {
  content: "→";
  display: block;
  position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
  color: #bcbcbc;
}
@media screen and (max-width: 1000px) {
	.symptom {
		gap: 20px;
	}
	.symptom_child {
		width: 100%;
	}
}
@media screen and (max-width: 750px) {
	#symptom {
		padding-top: 80px;
	}
	.symptom_child h3.symptom_trigger {
		padding: 34px 0;
		font-size: 24px;
	}
	.symptom_content {
		padding: 30px 20px 40px;
	}
	.symptom_content ul {
		gap: 10px 30px;
	}
	.symptom_content ul li {
		width: 100%;
	}
	.symptom_content ul li a {
		padding: 19px 22px 19px 5px;
		font-size: 16px;
	}
}
/*-----------------------------------------------------
	#disease
------------------------------------------------------*/
#disease {
	position: relative;
	padding-top: 120px;
	padding-bottom: 120px;
}
.disease_illust {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}
.disease {
	justify-content: space-between;
}
.disease_child {
	position: relative;
	width: 32%;
	z-index: 1;
}
.disease_child h3.disease_trigger {
  position: relative;
  cursor: pointer;
	padding: 29px 0;
	background: #E9F5BF;
	font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.1em;
	text-align: center;
}
.disease_child h3.disease_trigger::after {
  content: "";
  position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%) rotate(-180deg);
  width: 40px;
  height: 40px;
  background: url("../img/common/aco_arrow.svg") no-repeat center center;
	background-size: cover;
  transition: transform 0.3s ease;
}
.disease_child.is-open h3.disease_trigger::after {
  transform: translateY(-50%) rotate(0deg);
}
.disease_child:nth-of-type(2) h3.disease_trigger {
	background: #DCFFE3;
}
.disease_child:nth-of-type(3) h3.disease_trigger {
	background: #EAEAEA;
}
.disease_content {
  display: none;
	padding: 30px 24px 40px;
	background: #fff;
	box-shadow: 0 0 40px 0 rgba(0,0,0,0.06);
}
.disease_content ul {
	gap: 14px 30px;
	margin-bottom: 30px;
}
.disease_content ul li {
	width: 100%;
}
.disease_content ul li a {
	display: block;
	position: relative;
	padding: 22px 22px 22px 5px;
	border-bottom: 1px solid #bcbcbc;
	font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.1em;
}
.disease_content ul li a::after {
  content: "→";
  display: block;
  position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
  color: #bcbcbc;
}
@media screen and (max-width: 1000px) {
	.disease {
		gap: 20px;
	}
	.disease_child {
		width: 100%;
	}
}
@media screen and (max-width: 750px) {
	#disease {
		padding-top: 80px;
		padding-bottom: 80px;
	}
	.disease_child h3.disease_trigger {
		padding: 34px 0;
		font-size: 24px;
	}
	.disease_content {
		padding: 30px 20px 40px;
	}
	.disease_content ul {
		gap: 10px 30px;
	}
	.disease_content ul li {
		width: 100%;
	}
	.disease_content ul li a {
		padding: 19px 22px 19px 5px;
		font-size: 16px;
	}
}
/*-----------------------------------------------------
	#feature
------------------------------------------------------*/
#feature {
	position: relative;
	overflow-x: clip;
  overflow-y: visible;
	padding-top: 180px;
}
.feature_illust {
	position: absolute;
	top: -221px;
	right: 0;
}
.feature_illust_02 {
	position: absolute;
	top: 45%;
	left: 0;
	transform: translateY(-50%);
}
.feature_illust_03 {
	position: absolute;
	bottom: -197px;
	right: 0;
}
#feature .flow {
	margin-bottom: 200px;
	text-align: center;
}
#feature .flow img {
	max-width: 100%;
}
.feature_box {
	position: relative;
	width: 895px;
	background: #FBF8F1;
}
.feature_box .num {
	position: relative;
	top: -95px;
}
.feature_box h3 {
	margin-top: -45px;
	margin-bottom: 60px;
	font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.1em;
}
.feature_box p {
  font-size: 20px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.08em;
}
.feature_list_01 {
	margin: 0 auto 138px;
	padding: 0 196px 142px 158px;
}
.feature_list_01::before {
  content: "";
  display: block;
  position: absolute;
	top: -95px;
	left: -273px;
  width: 359px;
  height: 317px;
  background: url("../img/home/01_before.webp") no-repeat center center;
  background-size: cover;
}
.feature_list_01::after {
  content: "";
  display: block;
  position: absolute;
	top: 55%;
	right: -272px;
	transform: translateY(-50%);
  width: 360px;
  height: 436px;
  background: url("../img/home/01_after.webp") no-repeat center center;
  background-size: cover;
}
.feature_list_02 {
	z-index: 0;
	margin-bottom: 138px;
	padding: 0 214px 72px 140px;
}
.feature_list_02::after {
  content: "";
  display: block;
  position: absolute;
	top: -23px;
	right: -457px;
  width: 531px;
  height: 523px;
  background: url("../img/home/02_after.webp") no-repeat center center;
  background-size: cover;
}
.feature_list_03 {
	margin: 0 auto 122px;
	padding: 0 122px 81px 234px;
}
.feature_list_03::before {
  content: "";
  display: block;
  position: absolute;
	top: -44px;
	left: -294px;
  width: 448px;
  height: 557px;
  background: url("../img/home/03_before.webp") no-repeat center center;
  background-size: cover;
}
.feature_list_04 {
	padding: 0 214px 127px 140px;
}
.feature_list_04::after {
  content: "";
  display: block;
  position: absolute;
	top: 7px;
	right: -546px;
  width: 620px;
  height: 433px;
  background: url("../img/home/04_after.webp") no-repeat center center;
  background-size: cover;
}
.num_photo {
	display: none;
}
@media screen and (max-width: 1200px) {
	.feature_list_01::after, .feature_list_01::before, .feature_list_02::after, .feature_list_03::before, .feature_list_04::after {
		display: none;
	}
	.feature_illust_02 {
		display: none;
	}
	.feature_illust_03 {
		bottom: -383px;
	}
	#feature .flow {
		margin-bottom: 250px;
	}
	.num {
		display: flex;
		align-items: center;
	}
	.number {
		width: 50%;
		text-align: center;
	}
	.num_photo {
		display: block;
		width: 50%;
		text-align: center;
	}
	.num_photo img {
		width: 100%;
	}
	.feature_box {
		width: 100%;
	}
	.feature_box .num {
		top: -160px;
	}
	.feature_list_01, .feature_list_02, .feature_list_03, .feature_list_04 {
		margin: 0;
		margin-bottom: 220px;
		padding: 0 40px 50px;
	}
	.feature_box h3 {
		margin-top: -130px;
	}
}
@media screen and (max-width: 750px) {
	#feature {
		overflow: visible;
		padding-top: 80px;
	}
	#feature .midasi_01 {
		margin-bottom: 110px;
	}
	.feature_illust {
		top: -150px;
	}
	.feature_illust_03 {
		bottom: -87px;
	}
	#feature .flow {
		margin-bottom: 100px;
	}
	.feature_box .num {
		top: -58px;
	}
	.number img {
		width: 100px;
	}
	.num_photo img {
		width: 176px;
	}
	.feature_list_01, .feature_list_02, .feature_list_03, .feature_list_04 {
		margin: 0;
		margin-bottom: 120px;
		padding: 0 20px 50px;
	}
	.feature_list_04 {
		margin-bottom: 0;
	}
	.feature_box h3 {
		margin-top: -20px;
		margin-bottom: 30px;
		font-size: 20px;
	}
	.feature_box p {
		font-size: 14px;
	}
}
/*-----------------------------------------------------
	#doctor
------------------------------------------------------*/
#doctor {
	position: relative;
	padding-top: 120px;
	padding-bottom: 120px;
}
.doctor_illust {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: -1;
}
.doctor {
	position: relative;
	z-index: 0;
	justify-content: space-between;
	margin-bottom: 172px;
}
.doctor_l {
	width: 46.2%;
}
.doctor_l img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.doctor_r {
	width: 49%;
}
.doctor_head {
	flex-direction: column;
	gap: 30px;
	margin-bottom: 50px;
}
.doctor_head .katagaki {
	width: fit-content;
	padding: 10px;
	background: linear-gradient(90deg, rgba(162,191,60, 1) 0%, rgba(87,196,107, 1) 100%);
	font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1em;
	color: #fff;
}
.doctor_head h3 {
	font-family: var(--font-serif);
  font-size: 40px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.1em;
}
.doctor_r h4 {
	margin-bottom: 30px;
	font-family: var(--font-serif);
  font-size: 30px;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.1em;
	color: var(--usugreen-color);
}
.doctor_r p {
  font-size: 18px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: 0.08em;
}
@media screen and (max-width: 1000px) {
	.doctor {
		gap: 30px;
	}
	.doctor_l {
		width: 100%;
	}
	.doctor_l img {
		height: auto;
		object-fit: contain;
	}
	.doctor_r {
		width: 100%;
	}
	.doctor_head {
		flex-direction: row;
	}
}
@media screen and (max-width: 750px) {
	#doctor {
		padding-top: 80px;
	}
	.doctor {
		margin-bottom: 30px;
	}
	.doctor_l {
		display: none;
	}
	.doctor_r img {
		width: 100%;
		margin-bottom: 30px;
	}
	.doctor_head {
 		margin-bottom: 30px;
	}
	.doctor_head h3 {
		font-size: 30px;
	}
	.doctor_r h4 {
		font-size: 22px;
	}
	.doctor_r p {
		font-size: 14px;
	}
}

/*-----------------------------------------------------
	#gallery
------------------------------------------------------*/
.gallery {
	gap: 20px;
}
.gallery_child {
	width: calc((100% - 60px) / 4);
	font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.1em;
	text-align: center;
}
.gallery_child img {
	width: 100%;
	margin-bottom: 20px;
}
@media screen and (max-width: 1000px) {
	.gallery {
		gap: 30px 10px;
	}
	.gallery_child {
		width: calc((100% - 10px) / 2);
	}
}
@media screen and (max-width: 750px) {
	.gallery_child {
		font-size: 14px;
	}
}

/*-----------------------------------------------------
	#recruit
------------------------------------------------------*/
#recruit {
	padding: 140px 0;
	text-align: center;
}
#recruit img {
	max-width: 100%;
}
@media screen and (max-width: 750px) {
	#recruit {
		padding: 60px 0 30px;
	}
}

/*-----------------------------------------------------
	#column
------------------------------------------------------*/
#column {
  position: relative;
	z-index: 1;
}
.column_illust {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 0;
}
.insta_link {
	display: inline-block;
	margin: 80px auto;
	padding: 15px;
	font-family: "Cormorant Garamond", serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.1em;
	text-align: center;
}
.insta_link span {
	position: relative;
	padding-left: 57px;
}
.insta_link span::before {
  content: "";
  display: block;
  position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
  width: 42px;
  height: 42px;
  background: url("../img/common/instagram.svg") no-repeat center center;
  background-size: cover;
}
@media screen and (max-width: 750px) {
	.column_illust {
		top: -32px;
		bottom: auto;
	}
	.insta_link {
		width: 300px;
		margin: 60px auto;
		padding: 30px 15px;
		border: 1px solid #bcbcbc;
	}
}