@charset "utf-8";
img { max-width: 100%; height: auto; }
.mt3em { margin-top: 3em; }
.mt2em { margin-top: 2em; }
.mt1em { margin-top: 1em;}

.center { text-align: center;}

.t-gold { color: #B19F6F; }
.t-sm { font-size: 1.125rem; }
.t-semibold { font-weight: 600;}
.t-marker { text-decoration: underline; text-decoration-color: #F2F8FB; text-underline-offset: -.2em; text-decoration-thickness: .6em; }

.breadcrumb { margin: 1em 0 4em; font-size: .875rem; }
.breadcrumb > li { display: inline;}
.breadcrumb > li + li::before { content: '>'; margin: 0 .5em; }

.list-dot > li { padding-left: 1.5em; }
.list-dot > li::before { content: '•'; width: 1.5em; display: inline-block; margin-left: -1.5em; }

.list-std { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); font-size: 1.125rem; }
.list-std > li { border: 1px solid #DDDDDD; border-radius: 10px; text-align: center; padding: 1em; display: flex; align-items: center; justify-content: center; }

.sp-show { display: none; }

@media screen and (max-width: 768px) {
	.sp-hidden { display: none; }
	.sp-show { display: block; }
	.list-std { font-size: 1rem; gap: 10px;}
}

@media screen and (max-width: 450px) {
	.list-std { font-size: .85rem; }
}

.page-head { position: relative; display: block; width: 100%; padding-top: 261px; background-size: cover; background-position: center center; background-repeat: no-repeat; }
.page-head.concept-head { background-image: url("../img/common/head-concept.jpg"); }
.page-head.urology-head { background-image: url("../img/common/head-urology.jpg"); }
.page-head.psychosomatic-head { background-image: url("../img/common/head-psychosomatic.jpg"); }
.page-head.dermatology-head { background-image: url("../img/common/head-dermatology.jpg"); }
.page-head .title { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: clamp(1.75rem,2.375vw,2.375rem); font-weight: 600; white-space: nowrap; text-shadow: 0 0 10px #FFF, 0 0 10px #FFF;}
.deco { position: absolute; top: 0; left: 50%; transform: translate(-50%,-18%); font-family: "Cormorant Garamond", serif; font-size: clamp(6rem,12.5vw,12.5rem); line-height: 1; color: #C2B697; opacity: 0.2; text-transform: uppercase; white-space: nowrap; pointer-events: none;}

@media screen and (max-width: 768px) {
	.page-head { padding-top: 40vw;}
}

.page-main { padding-bottom: 90px; position: relative; overflow: hidden; }

.title-std { display: flex; justify-content: center; align-items: center; gap: 10px; color: #B19F6F; font-size: clamp(1.25rem,1.75vw,1.75rem); margin-bottom: 1em; white-space: nowrap;}
.title-std::before, .title-std::after { content: ''; width: 60px; height: 1px; background: #B19F6F;}
* + .title-std { margin-top: 2em;}
.title-large { margin-bottom: 0.5em; font-size: clamp(1.5rem,2vw,2rem); font-weight: 600; color: #B19F6F;}
.title-index { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; margin-bottom: 1em; text-align: center; font-size: clamp(1.5rem,2.25vw,2.25rem); line-height: 1;}
.title-index::after { content: ''; display: inline-block; width: 60px; height: 2px; background: #B19F6F;}
.title-index .en { color: #C2B697; display: inline-block; font-size: 1rem; font-family: 'Cormorant Garamond', serif; font-weight: 400; text-transform: uppercase; line-height: 1; }

.table-round { border-radius: 10px; border: 1px solid #DDDDDD; overflow: hidden; }
.table-round table { width: 100%; }
.table-round thead { background: #FAFAFA; text-align: center; font-weight: normal; }
.table-round thead th { text-align: center; font-weight: normal; padding: .5em; }
.table-round thead th + th { border-left: 1px solid #DDDDDD; }
.table-round tbody tr { border-top: 1px solid #DDD; }
.table-round tbody th { padding: .5em 1em; font-weight: normal; }
.table-round tbody td { border-left: 1px solid #DDD; padding: .5em 1em; }
.table-round tbody td:last-child { text-align: right; }

@media screen and (max-width: 768px) {
	.table-round thead { display: none; }
	.table-round tr,
	.table-round th,
	.table-round td { display: block; width: 100%; }
	.table-round tbody tr:first-child { border-top: none; }
	.table-round tbody th,
	.table-round tbody td { padding: .5em; border: none; }
	.table-round tbody th { font-size: 1.15rem; }
	.table-round tbody td:not(:last-child) { padding-left: 1.5em; padding-bottom: 0; }
}

.mv { position: relative; display: block; background: url("../img/home/mv.jpg") no-repeat center center / cover; padding: 150px 0; } 
.mv .title { max-width: 70%; margin: 0 auto; font-size: clamp(1.75rem,2.6vw,2.6rem); letter-spacing: 0.15em;}
.mv .access { position: absolute; right: 20px; bottom: 20px;}

.time { position: relative; display: grid; grid-template-columns: 35% 1fr; gap: 40px; margin-top: 20px;}
.time h3 { font-size: 1rem;}
.timetable { width: 100%; border: 1px solid #CCCCCC; text-align: center;  margin-bottom: 1em; }
.timetable .note { display: block; font-size: .6em; }
.timetable th { background: #F8F7F4; text-align: center; vertical-align: middle; padding: 1em; font-weight: 400;}
.timetable th:first-child { width: 10em; }
.timetable td { padding: 1em; text-align: center; color: #B19F6F; }
.timetable thead th + th,
.timetable tbody td { border-left: 1px solid #CCCCCC; vertical-align: middle;}
.timetable tbody tr { border-top: 1px solid #CCCCCC; }
.access { text-align: center;}
.map { margin: 20px 0;}

.concept { position: relative; margin-top: 100px; padding-bottom: 100px; background: url(../img/home/concept.jpg) center no-repeat; background-size: cover; overflow: hidden;}
.concept .title-index::after { display: none;}

.flow { margin-top: 100px; padding-bottom: 100px; background: #F8F7F4;}
.flow ol { display: flex; gap: 25px;}
.flow li { flex: 1; text-align: center;}
.flow li figure { position: relative;}
.flow li:not(:first-child) figure::before { content: ''; position: absolute; top: 50%; right: 100%; width: 25px; height: 3px; background: #E2D6B6;}
.flow li p { margin-top: 1em; font-size: 1rem;}

.list-qa .item { border: 1px solid #DDDDDD; border-radius: 10px; position: relative; cursor: pointer; }
.list-qa .item::before,
.list-qa .item::after { content: ''; width: 1.3em; height: 2px; display: block; position: absolute; right: 1.3em; top: 2em; margin: auto; background: #B19F6F; transition: transform .3s;  }
.list-qa .item::after { transform: rotate(90deg); }
.list-qa .item.open::after { transform: rotate(0); }
.list-qa .item + .item { margin-top: 20px; }
.list-qa .item dt { color: #B19F6F; padding: 1em 3em ; position: relative; min-height: 4em;}
.list-qa .item dt::before { content: 'Q'; font-size: 2rem; font-family: 'Cormorant Garamond', serif; position: absolute; top: .3em; left: .3em; margin: auto; line-height: 1;  }
.list-qa .item dd { display: none; }
.list-qa .item dd .inner { padding: 1em 1em 1em 3em ; position: relative; border-top: 1px solid #DDDDDD; min-height: 4em; }
.list-qa .item dd .inner::before { content: 'A'; font-size: 2rem; font-family: 'Cormorant Garamond', serif; position: absolute; top: .3em; left: .3em; margin: auto; line-height: 1;  color: #BCBECE;  }

@media screen and (max-width: 1000px) {
	.mv .title { max-width: 90%; }
	.time { grid-template-columns: 100%;}
	.timetable th { padding: .5em; font-size: 1rem; }
	.timetable td { padding: .5em; }
	.timetable th:first-child { width: auto; }
	.concept { margin-top: 50px; padding-bottom: 50px; }
	.flow { margin-top: 50px; padding-bottom: 50px; }
	.flow ol { flex-direction: column; align-items: flex-start;}
	.flow li { display: grid; grid-template-columns: 40% 1fr; align-items: center; gap: 20px;}
	.flow li:not(:first-child) figure::before { top: -25px; right: 50%; width: 3px; height: 25px;}
}

/*concept*/
.concept-box { position: relative; margin-top: 230px; padding: 80px 100px; background: rgba(255,255,255,.9);}
.concept-box figure { position: absolute; top: -150px; left: calc(50% - 50vw); width: 100vw; height: 600px; z-index: -1;}
.concept-box figure img { width: 100%; height: 100%; object-fit: cover;}
.concept-box p { line-height: 2;}

@media screen and (max-width: 1000px) {
	.concept-box { position: relative; margin-top: 200px; padding: 30px;}
	.concept-box figure { height: 300px;}
}

/*treatment*/
.col-box { display: grid; gap: 60px;}
.col-box .col { display: flex; gap: 40px;}
.col-box .col figure { width: 40%;}
.col-box .col:nth-child(odd) figure { order: 1;}
.col-box .col .contents { flex: 1;}

@media screen and (max-width: 1000px) {
	.col-box .col { flex-direction: column; gap: 20px;}
	.col-box .col figure { width: 100%; text-align: center;}
	.col-box .col:nth-child(odd) figure { order: -1;}
}

.page-body h2 { color: #B19F6F; font-size: 2rem; border-bottom: 1px solid; padding-bottom: .2em; font-weight: 600; margin: 2em 0 1em;}
.page-body h3 { font-size: 1.8rem; color: #B19F6F; font-weight: 600; margin: 1.5em 0 .5em;}
.page-body h4 { font-size: 1.5rem; color: #B19F6F; font-weight: 600; margin: 1.5em 0 .5em; }
.page-body .wp-block-table { border-radius: 10px; border: 1px solid #DDDDDD; overflow: hidden; }
.page-body table { width: 100%; }
.page-body thead { background: #FAFAFA; text-align: center; font-weight: normal; border: none; }
.page-body thead th { text-align: center; font-weight: normal; padding: .5em; border: none; }
.page-body thead th + th { border-left: 1px solid #DDDDDD; }
.page-body tbody tr { border-top: 1px solid #DDD; }
.page-body tbody th { padding: .5em 1em; font-weight: normal; }
.page-body tbody td { border: none;  border-left: 1px solid #DDD; padding: .5em 1em; }

@media screen and (max-width: 768px) {
	.page-body h2 { font-size: 1.5rem;}
	.page-body h3 { font-size: 1.4rem;}
	.page-body h4 { font-size: 1.3rem; }
}