@charset "utf-8";





/*==========================================================================

	            #top-mv  メインビジュアル
	
============================================================================*/

#top-mv {
	background: url(../img/top/mv-bg.jpg) no-repeat center center / cover;
	position: relative;
	overflow: hidden;
	padding: 15% 3% 8%;
	border-bottom: #c9a86c 4px solid;
}

@media screen and (max-width: 768px){
	#top-mv {
		background: url(../img/top/mv-bg-sp.jpg) no-repeat center center / cover;
		padding: 25% 3% 5%;
	}
}


.top-mv-logo {
	width: 92%;
	max-width: 918px;
	max-height: 260px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 20%;
	margin: auto;
}
.top-mv-title {
	width: 90%;
	max-width: 814px;
	margin: 0 auto;
	border-bottom: #c9a86c 1px solid;
	margin-bottom: 1.5em;
}
.top-mv-txt {
	font-size: clamp(16px, 3.5vw, 26px);
	text-align: center;
	color: #fff;
	line-height: 1.5;
	letter-spacing: 0.03em;
	margin-bottom: 1em;
}
.top-mv-txt2 {
	font-size: clamp(13px, 3vw, 15px);
	text-align: center;
	color: #3e3a39;
	line-height: 1.5;
	letter-spacing: 0.05em;
}
.top-mv-txt2 span {
	background-color: rgba(255,255,255,0.4);
	padding: 0.5em 1.2em;
}
.top-mv-btn {
	max-width: 790px;
	margin: 5% auto 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.top-mv-btn li {
	max-width: 380px;
	width: 49%;
	font-size: clamp(14px, 2.5vw, 20px);
	line-height: 1.5;
	letter-spacing: 0.03em;
}
.top-mv-btn li a {
	display: block;
	background-color: rgba(28,26,24,0.6);
	color: #c9a86c;
	padding: 0.5em 1em 0.8em;
	text-decoration: none;
	transition: .5s;
}
.top-mv-btn li a span {
	display: block;
	width: 100%;
	border-bottom: #c9a86c 1px solid;
	padding-bottom: 0.2em;
}
.top-mv-btn li a em {
	float: right;
}
.top-mv-btn a:hover {
	filter:alpha(opacity=80);
	-moz-opacity: 0.80;
	opacity: 0.80;
	transition: .5s;
}

@media screen and (max-width: 768px){
	.top-mv-btn {
		margin: 20% auto 0;
	}
}
@media screen and (max-width: 481px){
	.top-mv-btn li {
		width: 90%;
		margin: 0 auto 3%;
		font-size: clamp(14px, 2.5vw, 16px);
	}
}

/*----------------------------------- 
      スライダー
-----------------------------------*/

/* #top-mv .swiper {
	padding-bottom: 40px;
    position: relative;
}
#top-mv .slide-img .sp {
	display: none;
}

@media screen and (max-width: 768px){
	#top-mv .swiper {
		padding-bottom: 0;
	}
	#top-mv .slide-img .pc {
		display: none;
	}
	#top-mv .slide-img .sp {
		display: block;
	}
} */


/*--------------------------------
   　　次へ・前へ　ボタン
--------------------------------*/

/* #top-mv .swiper-button-next ,#top-mv .swiper-button-prev {
	width: 80px;
	height: 80px;
	top: calc(50% - 40px);
}
#top-mv .swiper-button-next {
	background: url(../img/common/swiper-next.png) center center no-repeat;
	background-size: contain;
}
#top-mv .swiper-button-prev {
	background: url(../img/common/swiper-prev.png) center center no-repeat;
	background-size: contain;
}
#top-mv .swiper-button-next:after ,#top-mv .swiper-button-prev:after {
	display: none;
}

@media screen and (max-width: 768px){
	#top-mv .swiper-button-next ,#top-mv .swiper-button-prev {
		width: 50px;
		height: 50px;
		top: 50%;
	}
} */

/*--------------------------------
   　　ページネーション
--------------------------------*/

/* #top-mv .swiper-pagination {
    width: 100%;
	text-align: right;
    position: absolute;
    bottom: 0;
    left: inherit;
    right: 0;
	z-index: 99;
}
#top-mv .swiper-pagination-bullet {
    margin: 0 5px;
    width: 11px;
    height: 11px;
	border-radius: 50%;
    background: #d1d1d1;
	opacity: 1;
}
#top-mv .swiper-pagination-bullet-active {
    background: #6ec34a;
}

@media screen and (max-width: 768px){
	#top-mv .swiper-pagination {
		display: none;
	}
} */

/*==========================================================================

	            共通  サブタイトル
	
============================================================================*/

.sub-en {
	color: #c9a86c;
	font-size: clamp(10px, 2vw, 13px);
	letter-spacing: 0.5em;
	margin-bottom: 1em;
}

.sub-jp {
	font-size: clamp(18px, 4vw, 40px);
	color: #3e3a39;
	letter-spacing: 0.05em;
	line-height: 1.4;
	margin-bottom: 0.6em;
}

/*==========================================================================

	            共通  ボタン
	
============================================================================*/

.btn-black a ,.btn-gold a {
	display: inline-block;
	font-size: 14px;
	color: #3e3a39;
	text-decoration: none;
	transition: .5s;
	margin-top: 1.2em;
	margin-bottom: 2em;
}
.btn-black a {
	color: #3e3a39;
}
.btn-gold a {
	color: #c9a86c;
}
.btn-black a span ,.btn-gold a span {
	border-bottom: #c9a86c 1px solid;
	padding-bottom: 0.5em;
}
.btn-black a em ,.btn-gold a em {
	color: #c9a86c;
}
.btn-black a:hover ,.btn-gold a:hover {
	filter:alpha(opacity=50);
	-moz-opacity: 0.50;
	opacity: 0.50;
	transition: .5s;
}


/*==========================================================================

	            #top-sec1  CONCEPT
	
============================================================================*/

#top-sec1 {
	background: linear-gradient(125deg, #eeeae0 0%, #eeeae0 40%, #f7f4eb 40%, #f7f4eb 100%);
	padding: 120px 5% 120px 0;
	overflow: hidden;
}
@media screen and (max-width: 1024px){
	#top-sec1 {
		padding: 10% 5% 10%;
	}
}
@media screen and (max-width: 768px){
	#top-sec1 {
		background: linear-gradient(125deg, #eeeae0 0%, #eeeae0 35%, #f7f4eb 35%, #f7f4eb 100%);
		padding: 12% 5% 12%;
	}
}

/*----------------------------------- 
     .top-sec1-box1
-----------------------------------*/

.top-sec1-box1 dl {
    display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.top-sec1-box1 dt {
	width: 55%;
	line-height: 0;
}
.top-sec1-box1 dt img {
	max-width: 1140px;
	float: right;
}
.top-sec1-box1 dd {
	width: 40%;
	position: relative;
	z-index: 2;
}
.top-sec1-box1 .number {
	/* width: 50%; */
	max-width: 340px;
	line-height: 0;
	position: absolute;
	top: 0;
	left: 13em;
	z-index: -1;
}
.top-sec1-box1 ul {
	margin-top: 1em;
}
.top-sec1-box1 ul li {
	display: inline-block;
	background-color: #ece6cf;
	color: #a58447;
	font-size: clamp(10px, 2.5vw, 14px);
	line-height: 1.5;
	padding: 0.5em 1em;
}

@media screen and (max-width: 1024px){
	.top-sec1-box1 dt {
		width: 100%;
	}
	.top-sec1-box1 dt img {
		float: inherit;
		margin: 0 auto 8%;
	}
	.top-sec1-box1 dd {
		width: 100%;
		padding: 0 10%;
		box-sizing: content-box;
	}
	.top-sec1-box1 .number {
		width: 45%;
		left: 32%;
	}
}
@media screen and (max-width: 768px){
	.top-sec1-box1 dd {
		padding: 0 5%;
	}
	.top-sec1-box1 .number {
		left: 27%;
	}
}
@media screen and (max-width: 481px){
	.top-sec1-box1 dd {
		padding: 0;
	}
}

/*==========================================================================

	            #top-sec2  TREATMENTS
	
============================================================================*/

#top-sec2 {
	background-color: #fbfbf4;
	padding: 80px 5% 120px;
	overflow: hidden;
}
@media screen and (max-width: 768px){
	#top-sec2 {
		padding: 8% 5% 12%;
	}
}

/*----------------------------------- 
     .top-sec2-box1
-----------------------------------*/

.top-sec2-box1 {
	max-width: 900px;
	margin: 0 auto 3em;
	padding-top: 2em;
	position: relative;
	z-index: 2;
	text-align: center;
}
.top-sec2-box1 .number {
	width: 45%;
	max-width: 340px;
	line-height: 0;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}

/*----------------------------------- 
     .top-sec2-box2
-----------------------------------*/

.top-sec2-box2 {
	max-width: 1200px;
	margin: 0 auto;
}
.top-sec2-box2 ol {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.top-sec2-box2 ol > li {
	width: 48%;
	margin: 0 1% 2%;
	padding: 2em 1em;
	border: #e2ded5 1px solid;
	box-sizing: border-box;
	text-align: center;
}
.top-sec2-box2 ol > li:last-child {
	margin-bottom: 0;
}
/* .top-sec2-box2 ol li a {
	display: block;
	padding: 2em 1em;
	text-decoration: none;
	transition: .5s;
}
.top-sec2-box2 ol li a:hover {
	filter:alpha(opacity=50);
	-moz-opacity: 0.50;
	opacity: 0.50;
	transition: .5s;
} */
.top-sec2-box2 h3 {
	font-size: clamp(16px, 3vw, 20px);
	color: #3e3a39;
	line-height: 1.5;
	margin-bottom: 0.3em;
}
.top-sec2-box2 p {
	font-size: clamp(15px, 3vw, 18px);
}
.top-sec2-box2 p a {
	color: #c9a86c;
}
/* .top-sec2-box2 .top-sec2-btn {
	color: #c9a86c;
	font-size: 11px;
} */

 /* .top-sec2-box2 ol > li {
	width: 48%;
	margin: 0 1% 2%;
	padding: 2em 1em;
	border: #e2ded5 1px solid;
	box-sizing: border-box;
	text-align: center;
}
.top-sec2-box2 .top-sec2-btn a {
	color: #c9a86c;
	font-size: 11px;
	text-decoration: none;
	transition: .5s;
}
.top-sec2-box2 .top-sec2-btn a:hover {
	filter:alpha(opacity=50);
	-moz-opacity: 0.50;
	opacity: 0.50;
	transition: .5s;
} */

@media screen and (max-width: 1024px){
	.top-sec2-box2 ol > li {
		width: 100%;
		max-width: 600px;
		margin: 0 auto 4%;
	}
}


/*==========================================================================

	            #top-sec3  CASES
	
============================================================================*/

#top-sec3 {
	background-color: #312f2e;
	padding: 90px 5% 80px;
	overflow: hidden;
}
@media screen and (max-width: 768px){
	#top-sec3 {
		padding: 10% 5% 8%;
	}
}

/*----------------------------------- 
     .top-sec3-box1
-----------------------------------*/

.top-sec3-box1 {
    max-width: 1200px;
	margin: 0 auto 2em;
	padding-top: 1em;
	color: #c8c4bc;
	position: relative;
	z-index: 2;
}
.top-sec3-box1 .number {
	width: 45%;
	max-width: 340px;
	line-height: 0;
	position: absolute;
	top: 0;
	left: 12%;
	z-index: -1;
}
.top-sec3-box1 .sub-jp {
	color: #fff;
	margin-bottom: 0.4em;
}
.top-sec3-box1 p {
	font-size: clamp(12px, 2.5vw, 15px);
}
.top-sec3-box1 dl {
	font-size: clamp(10px, 1.5vw, 13px);
	position: absolute;
	bottom: 0;
	right: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: right;
}
.top-sec3-box1 dt {
	color: #fff;
	border-right: #393838 1px solid;
	padding-right: 1em;
	margin-right: 1em;
}
.top-sec3-box1 dt h3 {
	font-size: clamp(20px, 4vw, 53px);
	line-height: 1.3;
}
.top-sec3-box1 dd h4 {
	font-size: clamp(15px, 3vw, 22px);
	color: #c9a86c;
}

/*----------------------------------- 
     .top-sec3-box2
-----------------------------------*/

.top-sec3-box2 .btn-gold {
	text-align: center;
}
.top-sec3-box2 .btn-gold a {
	margin: 2.5em 0 0;
}


/*----------------------------------- 
      スライダー
-----------------------------------*/

#top-sec3 .swiper2 {
    position: relative;
	z-index: 3;
}

#top-sec3 .swiper-slide h2 {
	font-size: clamp(13px, 2vw, 15px);
	line-height: 1.4;
	padding: 1em 1em 0;
}

/*==========================================================================

	            #top-sec4  DOCTOR
	
============================================================================*/

#top-sec4 {
	background: linear-gradient(125deg, #f2f0e4 0%, #f2f0e4 65%, #e1dfd6 65%, #e1dfd6 100%);
	padding: 100px 5% 80px;
	overflow: hidden;
	position: relative;
}
@media screen and (max-width: 1024px){
	#top-sec4 {
		background: none;
		padding: 0;
	}
}

/*----------------------------------- 
     .top-sec4-box1
-----------------------------------*/

.top-sec4-box1 {
    max-width: 1000px;
	margin: 0 auto 2.5em;
	position: relative;
	z-index: 2;
}
.top-sec4-box1 .number {
	width: 45%;
	max-width: 340px;
	line-height: 0;
	position: absolute;
	top: 0;
	left: 35%;
	z-index: -1;
}
.top-sec4-box1 h4 {
	font-size: clamp(15px, 3vw, 18px);
	line-height: 1.5;
	color: #3e3a39;
	margin-bottom: 1em;
}
.top-sec4-name {
	font-size: clamp(18px, 3vw, 30px);
	line-height: 1.5;
	color: #3e3a39;
	letter-spacing: 0.1em;
	margin-bottom: 0.5em;
}
.top-sec4-name span {
	font-size: clamp(12px, 3vw, 15px);
	margin-left: 1em;
}
.top-sec4-box1 ul {
	display: flex;
	flex-wrap: wrap;
}
.top-sec4-box1 ul li {
	width: 14em;
	border: #c8c4bc 1px solid;
	font-size: clamp(12px, 3vw, 14px);
	text-align: center;
	margin-right: 10px;
}
.top-sec4-img {
	max-width: 287px;
	line-height: 0;
	position: absolute;
	top: 30px;
	right: 5%;
}

@media screen and (max-width: 1024px){
	.top-sec4-box1 {
		width: 100%;
		padding: 10% 30% 7% 10%;
		box-sizing: border-box;
		background-color: #f2f0e4;
		margin-bottom: 0;
		overflow: hidden;
	}
	.top-sec4-box1 .number {
		width: 40%;
		top: 10%;
		left: 28%;
	}
	.top-sec4-box1 h4 {
		font-size: clamp(15px, 4vw, 20px);
		line-height: 1.7;
		margin-bottom: 1em;
	}
	.top-sec4-name {
		font-size: clamp(20px, 5vw, 40px);
		line-height: 1.8;
		margin-bottom: 1em;
	}
	.top-sec4-name span {
		display: block;
		font-size: clamp(12px, 3vw, 15px);
		margin-left: 0;
	}
	.top-sec4-box1 ul li {
		margin-bottom: 5px;
	}
	.top-sec4-img {
		width: 30%;
		top: 10%;
	}
}
@media screen and (max-width: 481px){
	.top-sec4-img {
		width: 35%;
	}
}

/*----------------------------------- 
     .top-sec4-box2
-----------------------------------*/

.top-sec4-box2 {
    max-width: 1000px;
	margin: 0 auto;
}

@media screen and (max-width: 1024px){
	.top-sec4-box2 {
		background-color: #e1dfd6;
		padding: 8% 5% 5%;
	}
}


/*==========================================================================

	            #top-sec5  CASES
	
============================================================================*/

#top-sec5 {
	background-color: #4b4645;
	padding: 100px 5% 70px;
	overflow: hidden;
}
@media screen and (max-width: 768px){
	#top-sec5 {
		padding: 10% 5% 8%;
	}
}

/*----------------------------------- 
     .top-sec5-box1
-----------------------------------*/

.top-sec5-box1 {
    max-width: 1200px;
	margin: 0 auto 3em;
	padding-top: 2em;
	color: #c8c4bc;
	text-align: center;
	position: relative;
	z-index: 2;
}
.top-sec5-box1 .number {
	width: 45%;
	max-width: 340px;
	line-height: 0;
	position: absolute;
	top: 0;
	right: 5%;
	z-index: -1;
}
.top-sec5-box1 .sub-jp {
	color: #fff;
	margin-bottom: 0.4em;
}

@media screen and (max-width: 768px){
	.top-sec5-box1 .number {
		right: 0;
	}
}

/*----------------------------------- 
     .top-sec5-box2
-----------------------------------*/

.top-sec5-box2 {
    max-width: 1200px;
	margin: 0 auto;
	color: #c8c4bc;
}
.top-sec5-box2 ul {
    display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.top-sec5-box2 ul li {
	max-width: 342px;
	width: 31%;
	margin: 0 1% 3em;
}
.top-sec5-box2 ul li h3 {
	border: #c9a86c 1px solid;
	line-height: 0;
	margin-bottom: 1em;
}
.top-sec5-box2 ul li h3 img {
	aspect-ratio: 7 / 5;
	object-fit: cover;
}
.top-sec5-box2 ul li h2 {
	font-size: clamp(15px, 3vw, 17px);
	line-height: 1.4;
}
.top-sec5-box2 ul li p {
	font-size: 12px;
}
.top-sec5-box2 ul li a {
	text-decoration: none;
	color: #c8c4bc;
	transition: .5s;
}
.top-sec5-box2 ul li a:hover {
	filter:alpha(opacity=70);
	-moz-opacity: 0.70;
	opacity: 0.70;
	transition: .5s;
}
.top-sec5-box2 .btn-gold {
	text-align: center;
}

@media screen and (max-width: 768px){
	.top-sec5-box2 ul li {
		width: 90%;
		margin: 0 auto 6%;
	}
}


/*==========================================================================

	            #top-sec6  CASES
	
============================================================================*/

#top-sec6 {
	background: url(../img/top/sec6-bg.jpg) no-repeat center center / cover;
	padding: 100px 5% 70px;
	overflow: hidden;
}
@media screen and (max-width: 768px){
	#top-sec6 {
		background: url(../img/top/sec6-bg-sp.jpg) no-repeat center center / cover;
		padding: 10% 5% 8%;
	}
}

/*----------------------------------- 
     .top-sec6-box1
-----------------------------------*/

.top-sec6-box1 {
    max-width: 1200px;
	margin: 0 auto 10%;
	/* padding-top: 2em; */
	color: #fff;
	/* text-align: center; */
	position: relative;
	z-index: 2;
}
.top-sec6-box1 .number {
	width: 45%;
	max-width: 340px;
	line-height: 0;
	position: absolute;
	top: 0;
	left: 30%;
	z-index: -1;
}
.top-sec6-box1 .sub-jp {
	font-size: clamp(18px, 4vw, 47px);
	color: #fff;
	display: inline-block;
	border-bottom: #c9a86c 1px solid;
	padding-bottom: 0.4em;
	margin-bottom: 0.4em;
}

@media screen and (max-width: 768px){
	.top-sec6-box1 {
		padding-left: 5%;
		margin-bottom: 15%;
	}
	.top-sec6-box1 .number {
		left: 35%;
	}
}

/*----------------------------------- 
     .top-sec6-box2
-----------------------------------*/

.top-sec6-box2 {
    max-width: 1200px;
	margin: 0 auto;
}
.top-sec6-box2 ul {
	margin-bottom: 1em;
    display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.top-sec6-box2 ul li {
	max-width: 224px;
	/* width: 18%;
	margin: 0 1% 2%; */
	margin-right: 20px;
	margin-bottom: 20px;
	line-height: 0;
}
.top-sec6-box2 ul li:last-child {
	margin-right: 0;
}
.top-sec6-box2 .btn-gold {
	text-align: right;
}

@media screen and (max-width: 768px){
	.top-sec6-box2 ul li {
		width: 31%;
		margin: 0 1% 2%;
	}
}