@charset 'utf-8';
/* ---------------------------------
	0. Reset
--------------------------------- */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, a, blockquote,
pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small,
strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label,
input, select, textarea, button, legend, table, caption, tbody, tfoot, thead,
tr, th, td, article, aside, canvas, details, figcaption, figure, footer,
header, hgroup, menu, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	font-style: normal;
	font-weight: inherit;
	vertical-align: baseline;
	background: transparent;
	box-sizing: border-box;
}

html {
	font-size: 16px;
}

body {
	font-size: 16px;
	line-height: 1;
}

article, aside, details, figcaption, figure, picture,
footer, header, hgroup, menu, nav, section {
	display: block;
}

ul, ol {
	list-style: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

input, button, textarea, select {
	border-radius: 0;
	font-family: inherit;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

label, button {
	cursor: pointer;
	user-select: none;
}

/* ---------------------------------
	1. Common
--------------------------------- */

:root {
	--color-main: #ef7b38;
	--color-lightorange: #ffac59;
	--color-accent: #004b96;
	--color-lightblue: #a2c5c9;
	--color-yellow: #f3c262;
	--color-pink: #ec9a86;
	--color-text: #383838;
	--font-english: 'M PLUS Rounded 1c';
}

body {
	color: var(--color-text);
	font-family: "Noto Sans JP", sans-serif;
	background: #f7f8fb;
}

a {
	display: inline-block;
	color: inherit;
	text-decoration: none;
	transition: opacity 0.3s;
}

a:hover {
	opacity: 0.7;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

p:not(:last-child) {
	margin-bottom: 0.75em;
}

@media (max-width: 767px) {

	body {
		font-size: 14px;
	}

}

/* ---------------------------------
	2. Parts
--------------------------------- */

.content {
	line-height: 1.5;
	letter-spacing: 0.2px;
}

.content-inner {
	max-width: 1280px;
	width: 100%;
	margin:  0 auto;
	padding: 5rem 0;
}

.content-block:not(:last-child) {
	margin-bottom: 5rem;
}

@media (max-width: 1279px) {

	.content-inner {
		padding: 5rem 1rem;
	}

}

@media (max-width: 1023px) {

	.content-inner {
		padding: 3.5rem 1rem;
	}

	.content-block:not(:last-child) {
		margin-bottom: 3.5rem;
	}

}

/* Headline */
.content-headline {
	margin-bottom: 2.5rem;
	font-size: 1.5em;
}

.content-headline span {
	display: flex;
	align-items: center;
	gap: 1rem;
	font-size: 0.5em;
}

.content-headline span::before {
	width: 2.5rem;
	height: 1px;
	display: inline-block;
	content: '';
	background: var(--color-text);
}

/* Button */
.button-wrap {
	max-width: 360px;
	width: 100%;
	margin: 0 auto;
}

.button-wrap a {
	width: 100%;
	padding: 0.75rem 1rem;
	position: relative;
	transition: 0.3s ease-in-out;
	color: #fff;
	text-align: center;
	background: var(--color-accent);
}

.button-wrap a::before {
	width: 100%;
	height: 2px;
	position: absolute;
	bottom: -0.5rem;
	right: -0.5rem;
	content: '';
	transition: 0.2s ease 0s;
	background: var(--color-accent);
}

.button-wrap a::after {
	width: 2px;
	height: 100%;
	position: absolute;
	top: 0.5rem;
	right: -0.5rem;
	content: '';
	transition: 0.2s ease 0.2s;
	background: var(--color-accent);
}

.button-wrap a:hover::before {
	width: 0%;
}

.button-wrap a:hover::after {
	height: 0%;
}

.button-wrap a:hover {
	opacity: 1;
	text-decoration: none;
	background: var(--color-lightblue);
}

/* Breadcrumbs */
.breadcrumbs {
	border-bottom: 1px solid var(--color-text);
}

.breadcrumbs ol {
	max-width: 1280px;
	width: 100%;
	margin: 0 auto;
	padding: 0.5rem 1rem;
	display: flex;
	gap: 0.5rem;
	overflow-x: auto;
	font-size: 0.75em;
	line-height: 1.5;
	white-space: nowrap;
}

.breadcrumbs li:not(:last-child)::after {
	padding-left: 0.5rem;
	content: '>';
}

/* Text Link */
.text-link {
	text-decoration: underline;
	color: var(--color-main);
}

/* Post List */
.post-list li {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.5rem;
}

.post-list li::before {
	width: 0.25rem;
	height: 0.25rem;
	border-radius: 100px;
	position: relative;
	top: 0.75rem;
	content: '';
	display: block;
	background: var(--color-text);
}

/* Clinic Info */
.clinic-info {
	display: grid;
	gap: 2.5rem;
}

.clinic-data h2 {
	margin-bottom: 1rem;
	font-size: 1.25em;
}

.clinic-data h2 span {
	display: block;
	font-size: 0.75em;
}

.clinic-data-list {
	display: grid;
	grid-template-columns: max-content 1fr;
}

.clinic-data-list dt,
.clinic-data-list dd {
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--color-text);
}

.clinic-data-list dt {
	padding-right: 1.5rem;
}

.time-table {
	width: 100%;
	margin-bottom: 1rem;
	table-layout: fixed;
	text-align: center;
}

.time-table thead tr th:first-child {
	width: 10rem;
}

.time-table thead {
	color: #fff;
	background: var(--color-lightblue);
}

.time-table tbody tr {
	border-bottom: 1px solid var(--color-text);
}

.time-table th,
.time-table td {
	padding: 0.75rem 0;
}

.clinic-time-table p {
	margin-bottom: 0;
}

@media (min-width: 768px) {

	.clinic-info {
		grid-template-columns: repeat(2, 1fr);
	}

}

/* ---------------------------------
	3. Header
--------------------------------- */

.site-header {
	width: 100%;
	padding: 0 1rem 1rem;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 998;
	box-shadow: 0 0 0.5rem #777;
	background: #fff;
}

.header-inner {
	display: flex;
	justify-content: space-between;
	letter-spacing: 0.5px;
}

.header-logo-area {
	padding-top: 1rem;
}

.header-title {
	margin-bottom: 1rem;
	font-size: 10px;
	line-height: 1.5;
}

.header-logo img {
	width: 100%;
	max-width: 240px;
}

.header-menu-button {
	margin-bottom: 1rem;
	display: flex;
	justify-content: end;
	gap: 0.5rem;
	color: #fff;
	font-size: 1.1em;
}

.header-menu-button svg {
	width: 1rem;
}

.header-menu-button li a {
	padding: 1rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.header-menu-button li:first-child a {
	background: var(--color-main);
}

.header-menu-button li:not(:first-child) a {
	background: var(--color-accent);
}

.header-menu-list {
	display: flex;
	gap: 1rem;
	font-size: 14px;
}

.header-menu-list img {
	width: 3rem;
	margin: 0 auto 0.25rem;
}

@media (min-width: 1240px) {

	.header-title-break {
		display: none;
	}

	.header-logo img {
		max-width: 320px;
	}

	.header-menu-button li a {
		padding: 1rem 2rem;
	}

	.header-menu-list {
		gap: 2rem;
	}

}

@media (max-width: 767px) {

	.header-inner {
		align-items: center;
	}

	.header-menu {
		display: none;
	}

}

/* ---------------------------------
	4. Global menu
--------------------------------- */

.global-menu-button {
	width: 2rem;
	height: 2rem;
	position: relative;
	display: block;
	cursor: pointer;
}

.global-menu-button span {
	position: absolute;
	left: 0;
	transition: 0.3s;
	display: block;
	font-family: var(--font-english);

}

.global-menu-button span:nth-of-type(1) {
	width: 100%;
	height: 1px;
	top: 0;
	background: var(--color-text);
}

.global-menu-button span:nth-of-type(2) {
	width: 100%;
	height: 1px;
	top: 40%;
	background: var(--color-text);
}

.global-menu-button span:nth-of-type(3) {
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	text-align: center;
	line-height: 0.75;
	font-size: 0.8em;
}

.global-menu .global-menu-button {
	margin-left: auto;
}

.global-menu .global-menu-button span:nth-of-type(1) {
	top: 0.5rem;
	transform: rotate(25deg);
}

.global-menu .global-menu-button span:nth-of-type(2) {
	top: 0.5rem;
	transform: rotate(-25deg);
}

@media (min-width: 768px) {

	.global-menu-button {
		display: none;
	}

}

.global-menu {
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	right: -100%;
	z-index: 999;
	transition: 0.4s;
}

.global-menu::after {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	content: '';
	display: none;
	background: rgba(51, 51, 51, 0.3);
}

.global-menu.open {
	right: 0;
}

.global-menu.open::after {
	display: block;
}

.global-menu-inner {
	width: 90%;
	height: 100%;
	margin-left: auto;
	padding: 1rem 1.5rem;
	overflow-y: auto;
	background: #fff;
}


/* ---------------------------------
	5. Footer
--------------------------------- */

.corporation {
	position: relative;
	color: #fff;
	background: url(/wp-content/themes/kn-clinic/image/common/footer-background.jpg) center center / cover no-repeat;
}

.corporation::before {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	content: '';
	background: rgba(0, 0, 0, 0.3);
}

.corporation-inner {
	padding: 5rem 5%;
	position: relative;
	text-align: center;
}

.corporation-inner h2 {
	margin-bottom: 2rem;
	font-size: 1.5em;
}

.corporation-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

.corporation-list li {
	border: 1px solid #fff;
}

.corporation-list li a {
	height: 7.5rem;
	padding: 1.5rem 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.corporation-list li a::before {
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0 0 2rem 2rem;
	border-color: transparent transparent #fff transparent;
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
}

.footer-wrap {
	max-width: 1280px;
	width: 100%;
	margin: 0 auto;
	padding: 2.5rem 1rem;
}

.footer-wrap:not(:last-child) {
	border-bottom: 1px solid var(--color-text);
}

.footer-wrap h2 {
	margin-bottom: 1rem;
}

.footer-wrap ul {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2.5rem;
	font-size: 14px;
}

.footer-introduction-list a {
	padding-left: 1rem;
	border-left: 1px solid var(--color-text);
}

.footer-medical-list a::before {
	margin-right: 0.25rem;
	content: '〉';
	display: inline-block;
}

.footer-content {
	display: grid;
	gap: 2rem;
}

.footer-logo-area p {
	font-size: 0.75em;
}

.footer-clinic-data {
	font-size: 0.9em;
}

.footer-clinic-data a:not(:last-child) {
	margin-right: 1rem;
}

.footer-button a {
	padding: 1rem 0;
	display: block;
	color: #fff;
	text-align: center;
}

.footer-tel {
	margin-bottom: 0.5rem;
	background: var(--color-main);
}

.footer-tel svg {
	width: 1rem;
	margin-right: 0.5rem;
}

.footer-external {
	background: var(--color-lightblue);
}

.copy-right {
	padding: 1rem 0;
	color: #fff;
	font-size: 10px;
	text-align: center;
	background: var(--color-main);
}

@media (min-width: 768px) {

	.corporation-list {
		grid-template-columns: repeat(3, 1fr);
	}

	.footer-info {
		display: flex;
		gap: 2rem;
	}

}

@media (min-width: 1024px) {

	.corporation-list {
		grid-template-columns: repeat(6, 1fr);
	}

	.footer-content {
		grid-template-columns: 2fr 1fr;
	}

}

@media (max-width: 767px) {

	.site-footer {
		margin-bottom: 4rem;
	}

	.footer-logo-area {
		margin-bottom: 1rem;
	}

}

/* Fixed menu */
.fixed-menu {
	width: 100%;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 997;
}

.fixed-menu-list {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
}

.fixed-menu-list li:first-child {
	background: var(--color-main);
}

.fixed-menu-list li:not(:first-child) {
	background: var(--color-accent);
}

.fixed-menu-list li:last-child {
	border-left: 1px solid #fff;
}

.fixed-menu-list a {
	padding: 1rem 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	color: #fff;
}

.fixed-menu-list svg {
	width: 1rem;
}

@media (min-width: 768px) {

	.fixed-menu {
		display: none;
	}

}

/* ---------------------------------
	6. Post & Page
--------------------------------- */

/* Post Header */
.post-header {
	background: var(--color-lightorange);
}

.post-header.group-background {
	background: var(--color-accent);
}

.post-header-inner {
	max-width: 1280px;
	width: 100%;
	height: 10rem;
	margin: 0 auto;
	padding: 0 1rem;
	display: flex;
	flex-flow: column;
	justify-content: end;
	gap: 1.5rem;
}

.post-title {
	color: #fff;
	font-size: 1.5em;
}

.post-title::after {
	width: 2.5rem;
	height: 1px;
	margin-top: 1rem;
	content: '';
	display: block;
	background: #fff;
}

.post-header-inner span {
	display: block;
	color: #fff;
	font-family: var(--font-english);
	font-size: 3em;
	font-weight: 100;
	letter-spacing: 0.25rem;
	line-height: 1;
	text-transform: uppercase;
}

@media (min-width: 768px) {

	.post-header-inner {
		height: 20rem;
	}

	.post-title {
		font-size: 2em;
	}

	.post-header-inner span {
		font-size: 120px;
	}

}

/* Poat Headline */
.post-headline {
	margin-bottom: 2.5rem;
	font-size: 2em;
	text-align: center;
}

.post-headline::after {
	content: attr(data-title);
	display: block;
	color: var(--color-main);
	font-family: var(--font-english);
	font-size: 0.75em;
	font-weight: lighter;
}

.post-sub-headline {
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--color-text);
	font-size: 1.25em;
}

.post-sub-headline span {
	margin-bottom: 0.5rem;
	padding-left: 1rem;
	border-left: 4px solid var(--color-accent);
	display: block;
}

.post-small-headline {
	margin-bottom: 0.25rem;
	font-weight: bold;
}

/* Content Column */
.content-column {
	margin-bottom: 1rem;
	display: grid;
	gap: 1.5rem;
}

@media (min-width: 768px) {

	.content-column {
		grid-template-columns: repeat(2, 1fr);
	}

}

@media (max-width: 767px) {

	.content-column > div {
		order: 2;
	}

}

/* 診療メニューと自費診療メニュー */
.medical-menu-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

.medical-menu-list li {
	margin: 0 0 -1px -1px;
	border: 1px solid var(--color-text);
}

.medical-menu-list li a {
	width: 100%;
	padding: 1.5rem;
	cursor: pointer;
	text-align: center;
}

.medical-menu-list li a img {
	margin: 0 auto 1rem;
}

.medical-menu-list li a h3 {
	margin-bottom: 1rem;
	color: var(--color-main);
	font-size: 1.25em;
}

.medical-menu-list li a h3::after {
	margin-top: 1rem;
	content: attr(data-title);
	display: block;
	color: var(--color-text);
	font-family: var(--font-english);
	font-size: 0.5em;
}

.medical-menu-list li a span::after {
	content: '→';
	display: block;
	color: var(--color-text);
}

@media (min-width: 768px) {

	.medical-menu-list {
		grid-template-columns: repeat(3, 1fr);
	}

}

/* others */
.page-introduction {
	max-width: 960px;
	width: 100%;
	margin: 0 auto;
}

/* 診療詳細ページ */
.medical-info-list {
	margin-bottom: 2.5rem;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.medical-info-list li {
	border-bottom: 1px solid #fff;
	background: var(--color-pink);
}

.medical-info-list li:not(:last-child) {
	border-right: 1px solid #fff;
}

.medical-info-list li a {
	width: 100%;
	padding: 1rem 0.5rem;
	color: #fff;
	text-align: center;
}

.medical-wrap:not(:last-child) {
	margin-bottom: 2.5rem;
}

.disease-list dt {
	padding: 1rem;
	position: relative;
	cursor: pointer;
	color: #fff;
	background: var(--color-lightblue);
}

.disease-list dt::before,
.disease-list dt::after {
	width: 1rem;
	height: 1px;
	content: "";
	position: absolute;
	top: 50%;
	transition: 0.5s;
	right: 1rem;
	background: #fff;
}

.disease-list dt::before {
	transform: rotate(90deg);
}

.disease-list dt.open::before {
	transform: rotate(0deg);
}

.disease-list dt.open::after {
	background: transparent;
}

.disease-list dt:not(:first-child) {
	margin-top: 1rem;
}

.disease-list dd {
	padding: 1rem;
	display: none;
	background: #fff;
}

.disease-detail {
	display: grid;
	gap: 1rem;
	counter-reset: number;
}

@media (min-width: 768px) {

	.disease-detail {
		grid-template-columns: 2fr 1fr;
		gap: 1.5rem;
	}

}

@media (max-width: 767px) {

	.disease-detail > div {
		order: 2;
	}

}

/* 自費診療下層ページのメニューリスト */
.treatment-list {
	display: grid;
	gap: 2.5rem;
}

.treatment-list li {
	padding: 1.5rem 1rem 1rem;
	box-shadow: 0px 0px 8px 0px rgba(24, 94, 135, 0.3);
	background: #fff;
}

.treatment-column {
	margin-bottom: 1rem;
	display: grid;
	gap: 1rem;
}

.treatment-column img {
	margin: 0 auto;
}

.show-more {
	text-align: right;
}

.show-more span {
	padding: 0 2.5rem 0 0.5rem;
	border-bottom: 1px solid var(--color-text);
	display: inline-block;
	position: relative;
}

.show-more span::after {
	width: 0.25rem;
	height: 0.25rem;
	border-right: 1px solid var(--color-text);
	border-bottom: 1px solid var(--color-text);
	position: absolute;
	top: 50%;
	right: 0.5rem;
	z-index: 2;
	transform: translateY(-50%) rotate(-45deg);
	content: '';
	display: block;
}

@media (min-width: 768px) {

	.treatment-list li {
		padding: 1.5rem 2.5rem 1rem;
	}

	.treatment-column {
		grid-template-columns: 1fr 2fr;
	}

}

/* 自費診療の施術の詳細ページ */
.worries {
	padding: 0 1rem;
	background: linear-gradient(180deg, #f7f8fb 0%, #f7f8fb 50%, var(--color-pink) 50%, var(--color-pink) 100%);
}

.worries-content {
	max-width: 960px;
	width: 100%;
	margin: 0 auto;
	padding: 2rem 1rem;
	border-radius: 0.5rem;
	display: grid;
	gap: 1rem;
	box-shadow: 0px 0px 8px 0px rgba(24, 94, 135, 0.3);
	background: #fff;
}

.worries-content div {
	text-align: center;
}

.worries-content div h3 {
	margin-bottom: 0.5rem;
	font-size: 1.5em;
}

.treatment-feature {
	color: #fff;
	background: var(--color-pink);
}

.treatment-feature .post-headline::after {
	color: #fff;
}

.treatment-feature-list > li {
	display: grid;
	gap: 1rem;
}

.treatment-feature-list > li:not(:last-child) {
	margin-bottom: 1.5rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px dotted #fff;
}

.treatment-feature-list h3 {
	margin-bottom: 1rem;
	font-size: 1.25em;
}

.treatment-feature-list h3::before {
	content: attr(data-title);
	display: block;
	font-family: var(--font-english);
	font-size: 0.75em;
	font-weight: 100;
	letter-spacing: 2px;
}

.treatment-feature-list img {
	margin: 0 auto;
}

.treatment-detail-lidt {
	width: 100%;
	border-top: 1px solid var(--color-text);
	display: grid;
	grid-template-columns: max-content 1fr;
}

.treatment-detail-lidt dt,
.treatment-detail-lidt dd {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--color-text);
}

.price-table {
	width: 100%;
	table-layout: fixed;
	text-align: center;
}

.price-table thead th {
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--color-text);
	font-size: 0.9em;
}

.price-table tbody th,
.price-table tbody td {
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--color-text);
}

.price-table tbody th {
	border-right: 1px solid var(--color-text);
}

.faq-list dt {
	align-items: baseline;
	cursor: pointer;
	color: #fff;
	background: var(--color-lightblue);
}

.faq-list dt:not(:first-child) {
	margin-top: 1.5rem;
}

.faq-list dt,
.faq-list dd {
	padding: 1rem;
	display: grid;
	grid-template-columns: max-content 1fr;
	align-items: baseline;
	gap: 0.5rem;
}

.faq-list dt::before,
.faq-list dd::before {
	font-family: var(--font-english);
	font-size: 1.25em;
	font-weight: 100;
}

.faq-list dt::before {
	content: 'Q.';
}

.faq-list dt span {
	padding: 0 2rem 0 0;
	position: relative;
	display: block;
}

.faq-list dt span::before,
.faq-list dt span::after {
	width: 0.75rem;
	height: 1px;
	content: "";
	position: absolute;
	top: 50%;
	right: 1rem;
	transition: 0.5s;
	background: #fff;
}

.faq-list dt span::before {
	transform: rotate(90deg);
}

.faq-list dt.open span::before {
	transform: rotate(0deg);
}

.faq-list dt.open span::after {
	background: transparent;
}

.faq-list dd {
	border: 1px solid var(--color-lightblue);
}

.faq-list dd::before {
	content: 'A.';
}

@media (min-width: 768px) {

	.worries-content {
		grid-template-columns: repeat(2, 1fr);
	}

	.treatment-feature-list > li {
		grid-template-columns: 2fr 1fr;
		gap: 1.5rem;
	}

	.faq-list dt,
	.faq-list dd {
		padding: 1rem 2rem;
	}

}

@media (max-width: 767px) {

	.treatment-feature-list div {
		order: 2;
	}

}

/* ---------------------------------
	7. Unique CSS
--------------------------------- */
.only-sp {
	display: none;
}

@media (max-width: 767px) {

	.only-sp {
		display: block;
	}

	.only-pc {
		display: none;
	}

}

/* 追加 */