@charset "utf-8";

/*===================================================================
    common
===================================================================*/
.under-page-mv {
	background-image: url(../img/index/mv-bg.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	height: 320px;
	position: relative;
}

.contents-01 {
	padding: 120px 20px;
}

.bg-detail-black {
	background: #282828;
}

.contents-border {
	border: 1px solid #d1cec0;
}


/*--  h1-ttl  --*/
.h1-01 {
	width: 100%;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	text-align: center;
	color: #161616;
	font-size: 4.6rem;
}

/*--  h2-ttl  --*/
.h2-01 {
	font-size: 4rem;
	margin-bottom: 70px;
	text-align: center;
	position: relative;
}

.bg-detail-black .h2-01 {
	color: #fff;
}

.h2-01 span.deco {
	display: inline-block;
	position: relative;
}

.h2-01 span.deco::before {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	background: url(/img/common/ico_dia_gold.png) no-repeat;
	background-size: contain;
	position: absolute;
	top: 51%;
	transform: translateY(-50%);
	left: -32px;
}

.h2-01 span.deco::after {
	content: "";
	display: inline-block;
	width: 10px;
	height: 10px;
	background: url(/img/common/ico_dia_gold.png) no-repeat;
	background-size: contain;
	position: absolute;
	top: 51%;
	transform: translateY(-50%);
	right: -32px;
}

/*--  h3-ttl  --*/
.h3-01 {
	font-size: 2.8rem;
	margin-bottom: 60px;
	text-align: center;
	position: relative;
}

.bg-detail-black .h3-01 {
	color: #fff;
}

.h3-01 span.deco {
	display: inline-block;
	position: relative;
}

.h3-01 span.deco::before {
	content: "";
	display: inline-block;
	width: 54px;
	height: 23px;
	background: url(/img/common/deco_head_left.png) no-repeat;
	background-size: contain;
	position: absolute;
	top: 51%;
	transform: translateY(-50%);
	left: -82px;
}

.h3-01 span.deco::after {
	content: "";
	display: inline-block;
	width: 54px;
	height: 23px;
	background: url(/img/common/deco_head_right.png) no-repeat;
	background-size: contain;
	position: absolute;
	top: 51%;
	transform: translateY(-50%);
	right: -82px;
}

/*--  h4-ttl  --*/
.h4-01 {
	font-size: 2.4rem;
	margin-bottom: 60px;
	text-align: center;
	position: relative;
}

.h4-01:before {
	content: '';
	position: absolute;
	bottom: -6px;
	display: inline-block;
	width: 60px;
	height: 3px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	background-color: #e1dfd5;
	border-radius: 2px;
}

/*--  h5-ttl  --*/
.h5-01 {
	font-size: 2rem;
	margin-bottom: 40px;
	text-align: center;
	position: relative;
}

/*===================================================================
    menu
===================================================================*/
.menu-img-wrap-00 {
	width: 280px;
	margin: 0 40px 0 0;
}

.menu-img-wrap-01,
.menu-img-wrap-02 {
	width: 320px;
	margin: 12px 0 0 40px;
}

.menu-img-01,
.menu-img-02 {
	padding: 32px;
	border: 1px solid #878683;
}

.flex-1 {
	flex: 1;
}

.stress-img-wrap {
	width: 100%;
	justify-content: center;
}

.menu-img-wrap-05 {
	width: 420px;
	margin-left: 40px;
}

.menu-img-05 {
	padding: 32px;
	border: 1px solid #878683;
}

.bg-wrap-gray-01 {
	padding: 24px;
	background: #f7f7f7;
}

.bg-wrap-gray-02 {
	padding: 24px;
	background: #efefef;
}

.table-bg-gray-01 {
	background: #f7f7f7;
}

.table-bg-gray-02 {
	background: #efefef;
}

.menu-table {
	border: none !important;
}

.menu-table th {
	width: 50%;
	border: none !important;
	border-right: 2px solid #f7f7f7 !important;
}

.menu-table td {
	text-align: right;
	border: none !important;
}

.case-wrap {
	padding: 24px 0;
	background: #efefef;
}

.case-img-contents {
	text-align: center;
  padding: 20px;
}

.qa-contents dt {
	font-size: 2.8rem;
	margin-bottom: 24px;
	padding: 0 10px 0 40px;
	position: relative;
}

.qa-contents dt:after {
	content: "Q";
    position: absolute;
    top: 18px;
    left: 0;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 25px;
    background: #262626;
    color: #fff;
    font-size: 1.6rem;
    font-weight: normal;
    border-radius: 25px;
}

.qa-contents dd {
	color: #a99c77;
	margin-bottom: 60px;
	padding: 0 10px 0 40px;
	position: relative;
}

.qa-contents dd:after {
	content: "A";
    position: absolute;
    top: 6px;
    left: 0;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 25px;
    background: #a99c77;
    color: #fff;
    border-radius: 25px;
}

.qa-contents dd:last-child {
	margin-bottom: 0;
}

/*===================================================================
    stem-cell-therapy
===================================================================*/
.stem-cell-therapy-table th {
	background: #f2f1eb;
}

/*===================================================================
    labo
===================================================================*/
.labo-img-wrap-00 {
	width: 46%;
}

.labo-img {
    padding: 32px;
    border: 1px solid #878683;
}

.grandsoul-img-wrap {
	width: 264px;
	margin: 0 auto 40px;
}

/*===================================================================
    flow
===================================================================*/
.flow-img-01 {
	width: 614px;
	margin: 0 auto;
}

.flow-img-wrap-02 {
	width: 46%;
	border: 1px solid #878683;
	padding: 32px;
}

.flow-img-wrap-03 {
	width: 46%;
	border: 1px solid #878683;
	padding: 32px;
}

.flow-flex-contents-03 {
	flex-wrap: wrap;
}

.flow-flex-contents-03 .contents-one {
	flex-grow: 0;
	margin: 0 auto 40px;
	border: 1px solid #878683;
	padding: 32px;
}

.flow-img-wrap-04 {
	width: 46%;
	border: 1px solid #878683;
	padding: 32px;
	margin: 0 0 40px;
}

.flow-flex-contents-04 {
	flex-wrap: wrap;
}

.flow-flex-contents-04 .contents-one {
	width: 400px;
	flex-grow: 0;
	margin: 0 auto 40px;
	border: 1px solid #878683;
	padding: 32px;
}



/*===================================================================
    clinic
===================================================================*/
.doctor-img-wrap {
	max-width: 360px;
	margin-right: 60px;
}

.doctor-img-wrap img {
	margin-bottom: 16px;
}

.doctor-name {
	text-align: center;
}

.clinic-info-wrap a {
	color: #fff;
	text-decoration: underline;
}

.clinic-info-wrap a:hover {
	color: #fff;
	text-decoration: none;
}

.clinic-img-wrap {
	max-width: 320px;
	border: 1px solid #878683;
	margin-right: 40px;
	padding: 32px;
}

.clinic-wrap p {
	color: #fff;
	text-align: left;
}

.clinic-contents-wrap {
	align-items: flex-start;
}

.access-wrap {
	padding: 120px 0;
}

.google-map-wap {
	height: 500px;
}


/*===================================================================
    column
===================================================================*/
.page-link {
  background: #f5f5f5;
}

.link-btn-list{
  flex-wrap: wrap;
}

.link-btn-list li {
  width: 49%;
  margin-bottom: 2%;
}

.link-btn-list li:last-child {
  margin-bottom: 0;
}

.link-btn-list li a {
  display: flex;
  padding: 10px 4px;
  text-align: center;
  background: #9e9a85;
  color: #fff;
  position: relative;
  border: double 4px #fff;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.list-area {
  flex-wrap: wrap;
  gap: 2%;
}

.list-area li{
  width: 48%;
  text-align: center;
  background: #fff;
  padding: 14px;
  margin-bottom: 2%;
  font-weight: bold;
  font-size: 1.8rem;
}

.compile-text {
  padding: 40px;
  background: #f5f5f5;
}

/*===================================================================
    width 1024px
===================================================================*/
@media(max-width:1024px) {}

/*===================================================================
    width 1000px
===================================================================*/
@media(max-width:1000px) {}

/*===================================================================
    width 800px
===================================================================*/
@media(max-width:800px) {
	.menu-img-wrap-00 {
		width: 240px;
	}

	.menu-img-wrap-01,
	.menu-img-wrap-02 {
		width: 280px;
	}

	.menu-img-wrap-05 {
		width: 380px;
	}
}

/*===================================================================
    width 768px
===================================================================*/
@media(max-width:768px) {

	/*--  common  --*/
	.h2-01 {
		font-size: 3.2rem;
		margin: 0 40px 70px;
	}

	.h3-01 {
		font-size: 2.4rem;
		padding: 0 80px;
	}

	/*--  menu  --*/
	.qa-contents dt {
		font-size: 2.4rem;
	}

	.qa-contents dt:after {
		top: 14px;
	}

	/*--  flow  --*/
	.medical-treatment-wrap {
		flex-wrap: wrap;
		gap: 40px;
		justify-content: center;
		align-items: center;
		margin-bottom: 40px;
	}

	.flow-img-wrap-00 {
		width: 40%;
	}

	/*--  stem-cell-therapy  --*/
	.table-wrap {
		overflow-x: scroll;
	}
	.table-wrap table {
		width: 100%;
		border-collapse: collapse !important;
		white-space: nowrap !important;
	}
}

/*===================================================================
    width 700px
===================================================================*/
@media(max-width:700px) {

	/*--  common  --*/
	.under-page-mv {
		height: 300px;
	}

	.h1-01 {
		font-size: 4.2rem;
	}

	/*--  clinic  --*/
	.doctor-wrap {
		flex-flow: column;
	}

	.doctor-img-wrap {
		max-width: 60%;
		margin: 0 auto 60px;
	}

	.clinic-img-wrap {
		max-width: 260px;
		padding: 20px;
	}

	/*--  menu  --*/
	.endogenous-flex-wrap,
	.stress-img-wrap {
		flex-direction: column;
	}

	.menu-img-wrap-00 {
		margin: 0 auto 40px;
	}

	.uv-wrap,
	.treatment-wrap {
		flex-direction: column-reverse;
	}

	.menu-img-wrap-01,
	.menu-img-wrap-02 {
		margin: 0 auto 40px;
	}

	.menu-img-wrap-03,
	.menu-img-wrap-04 {
		width: 80%;
		margin: 0 auto 40px;
	}

	.menu-img-wrap-05 {
		width: 80%;
		margin: 0 auto 40px;
	}
}

/*===================================================================
    width 650px
===================================================================*/
@media(max-width:650px) {

	/*--  clinic  --*/
	.clinic-contents-wrap {
		flex-flow: column;
	}

	.clinic-img-wrap {
		max-width: 50%;
		margin: 0 auto 60px;
	}

	/*--  labo  --*/
	.labo-img-wrap {
		flex-flow: column;
		gap: 40px;
	}
	.labo-img-wrap-00 {
		width: 80%;
		margin: 0 auto;
	}

	/*--  flow  --*/
	.flow-img-01 {
		width: 100%;
	}

	.harvesting-wrap,
	.adjustment-wrap,
	.dosing-wrap {
		flex-flow: column;
		gap: 40px;
	}

	.flow-img-wrap-02,
	.flow-img-wrap-03,
	.flow-img-wrap-04 {
		width: 80%;
		margin: 0 auto;
	}

	.flow-flex-contents-03 .contents-one {
		width: 80%;
		margin: 0 auto;
	}

	.flow-flex-contents-04 .contents-one {
		width: 80%;
		margin: 0 auto;
	}
}

/*===================================================================
    width 600px
===================================================================*/
@media(max-width:600px) {}

/*===================================================================
    width 540px
===================================================================*/
@media(max-width:540px) {
	.under-page-mv {
		height: 280px;
	}

	.h1-01 {
		font-size: 3.8rem;
	}
  
  /*===================================================================
    column
  ===================================================================*/
  .link-btn-list li {
    width: 100%;
  }
  .list-area {
    gap: 0;
  }

  .list-area li{
    width: 100%;
    font-size: 1.6rem;
  }
  
}

/*===================================================================
    width 500px
===================================================================*/
@media(max-width:500px) {

	.h3-01 {
		padding: 0;
	}

	.h3-01 span.deco::before,
	.h3-01 span.deco::after {
		display: none;
	}

	.h3-01 span.deco {
		padding: 0 46px;
	}
	.h3-01::before {
		content: "";
		display: inline-block;
		width: 54px;
		height: 23px;
		background: url(/img/common/deco_head_left.png) no-repeat;
		background-size: contain;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: -16px;
	}
	
	.h3-01::after {
		content: "";
		display: inline-block;
		width: 54px;
		height: 23px;
		background: url(/img/common/deco_head_right.png) no-repeat;
		background-size: contain;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: -16px;
	}
	

	/*--  clinic  --*/
	.clinic-img-wrap {
		max-width: 60%;
	}
}

/*===================================================================
    width 450px
===================================================================*/
@media(max-width:450px) {}

/*===================================================================
    width 414px
===================================================================*/
@media(max-width:414px) {

	/*--  common  --*/
	.under-page-mv {
		height: 200px;
	}

	.h1-01 {
		font-size: 3rem;
	}

	.h2-01 {
		font-size: 2.8rem;
		margin: 0 32px 70px;
	}

	/*--  menu  --*/
	.case {
		flex-flow: column;
	}

	.case-img-contents:first-child {
		margin-bottom: 40px;
	}

	.menu-img-wrap-01,
	.menu-img-wrap-02,
	.menu-img-wrap-05 {
		width: 90%;
	}

	.menu-img-01,
	.menu-img-02,
	.menu-img-05 {
		padding: 20px;
	}

	.menu-table th {
		width: 65%;
	}

	/*--  clinic  --*/
	.doctor-img-wrap {
		max-width: 80%;
	}

	.clinic-img-wrap {
		max-width: 80%;
	}

	/*--  labo  --*/
	.labo-img-wrap-00 {
		width: 90%;
	}

	/*--  flow  --*/
	.medical-treatment-wrap {
		gap: 20px;
	}

	.flow-img-wrap-00 {
		width: 46%;
	}

	.harvesting-wrap,
	.adjustment-wrap,
	.dosing-wrap {
		flex-flow: column;
		gap: 24px;
	}

	.flow-img-wrap-02,
	.flow-img-wrap-03,
	.flow-img-wrap-04 {
		width: 90%;
	}

	.flow-flex-contents-03 .contents-one {
		width: 100%;
		margin: 0 auto 32px;
		border: none;
		padding: 0;
	}

	.flow-flex-contents-04 .contents-one {
		width: 90%;
	}
}

/*===================================================================
    width 375px
===================================================================*/
@media(max-width:375px) {

	/*--  menu  --*/
	.menu-table th {
		width: 60%;
	}
}

/*===================================================================
    width 374px
===================================================================*/
@media(max-width:374px) {}

/*===================================================================
    width 350px
===================================================================*/
@media(max-width:350px) {}

/*===================================================================
    width 320px
===================================================================*/
@media(max-width:320px) {

	/*--  menu  --*/
	.menu-table th {
		width: 50%;
	}
}