@charset "utf-8";
/*BASE*/


/*SP*/
@media screen and (max-width: 767.98px) {

/*BASE*/
section {
	padding:4rem 2rem;
}
section .hgroup {
	margin-bottom:1rem;
}

/*どんなところ*/
#museum {
	padding:2rem 2rem  1rem;
}
#museum .container .content-box {
	background: url(../images/about/museum_bgimg.jpg) no-repeat;
	background-size:cover;
	border-radius:10px;
	padding:2rem;
}
#museum .content-box .img-box img {
	width:100%;
}
#museum .content-box .txt-box {
	color:#FFF;
	font-size:16px;
	margin-bottom:1rem;
}

/*待合室・診療室*/
#room .content-box > div:not(:last-of-type) {
	margin-bottom:2rem;
}
#room .content-box > div > .img-box {
	margin-bottom:1rem;
	border-radius:10px;
	overflow:clip;
}

/*取り組み*/
#initiative {
	background-color:rgba(246, 236, 227,1)
}
#initiative .key .img-box {
	background-color:#9bad53;
	border:solid 4px #9bad53;
	border-radius:10px;
	overflow:clip;
	box-shadow:4px 4px 6px rgba(0,0,0,.15);
}
#initiative .key .img-box img {
	border-radius:10px;
	border:solid 1px #728526;
}
#initiative .key .txt-box {
	padding:2rem 0;
}
#initiative .key .txt-box h2 {
	font-size:16px;
	text-align:center;
}
#initiative .special {
	border-radius:10px;
	overflow:clip;
	box-shadow:0 0 10px rgba(0,0,0,.15);
	position:relative;
	z-index:0;
}
#initiative .special::before,
#initiative .special::after {
	content:"SPECIAL";
	font-size:14px;
	line-height:1;
	text-align:center;
	color:#fffadf;
	background:#68a189;
	width:140px;
	border-top:solid 2px #FFF;
	border-bottom:solid 2px #FFF;
	padding:6px 0;
	position:absolute;
	z-index:1;
}
#initiative .special::before {
	top:18px;
	left:-40px;
	transform:rotate(-45deg);
}
#initiative .special::after {
	bottom:18px;
	right:-40px;
	transform:rotate(-45deg);
}
#initiative .special .content-box {
	padding:60px 6%;
	background-color:rgba(235,206,206,1);
	border:solid 4px #FFF;
	border-radius:10px;
	overflow:clip;
}
#initiative .special ul {
	color:#650330;
	font-size:16px;
}
#initiative .special ul li {
	text-align:justify;
	padding-bottom:calc(1rem + 4px);
	margin-bottom:1rem;
	position:relative;
}
#initiative .special ul li::before,
#initiative .special ul li::after {
	content:"";
	display:block;
	width:100%;
	height:4px;
	position:absolute;
	left:0;
}
#initiative .special ul li::before {
	background: linear-gradient(90deg,rgba(217, 32, 32, 1) 0%, rgba(222, 204, 67, 1) 100%);
	bottom:0px;
}
#initiative .special ul li::after {
	background:url(../images/tmpl/line_dot_pink.svg) left center repeat-x;
	bottom:0;
}
#initiative .special .img-box .instax {
	background-color:#FFF;
	padding:10px;
	box-shadow:0 0 10px rgba(0,0,0,.15);
}
#initiative .special .img-box .instax img {
	width:100%;
}
#initiative .special .img-box .instax p {
	text-align:center;
	padding:28px 0;
}

/*診療の流れ*/
#flow .hgroup {
	margin-bottom:2rem;
}
#flow .hgroup h1 {
	padding-right:48px;
}
#flow .chart {
	font-size:12px;
	padding-left:40px;
	counter-reset: chart;
}
#flow .chart > li {
	counter-increment: chart;
	position: relative;
	padding-left: 2.5em;
	padding-bottom:1rem;
	margin-bottom:1rem;
}
#flow .chart > li:last-child {
	padding-bottom:0;
	margin-bottom:0;
}
.chart > li::before {
	content: counter(chart);
	position: absolute;
	left: 0;
	top: 0.2em;
	width: 1.8em;
	height: 1.8em;
	line-height: 1.8em;
	text-align: center;
	background: #99adf4;
	color: #fff;
	border-radius: 50%;
	font-weight: bold;
}
#flow .chart > li h2 {
	font-size:16px;
	padding-top:.25em;
	margin-bottom:.5rem;
}

/*診療日*/
#hours {
	background-color:#f0f8e3;
}
#hours .schedule {
	font-size:12px;
	margin-bottom:2rem;
}
#hours .schedule table {
	background-color:#FFF;
	width:100%;
	border-top:solid 1px #c2c268;
	border-left:solid 1px #c2c268;
	margin-bottom:1rem;
}
#hours .schedule table th, #hours .schedule table td {
	font-weight:normal;
	text-align:center;
	vertical-align:middle;
	padding:10px;
	border-bottom:solid 1px #c2c268;
	border-right:solid 1px #c2c268;
	width: calc((100% - 1%) / 8);
}
#hours .schedule table th {
	background-color:#eef1d4;
}
#hours .schedule table th.am, #hours .schedule table th.pm {
	white-space:nowrap;
	width: 1%;
}
#hours .schedule table th p.time {
	display:flex;
	justify-content:space-between;
	column-gap:.25em;
}
#hours .schedule ul.note {
	padding-left:10px;
	margin-bottom:1rem;
}
#hours .schedule ul.note li {
	display:inline-block;
	margin-bottom:.5em;
}
#hours .schedule ul.note li:not(:last-child) {
	margin-right:1rem;
}
#hours .schedule > dl {
	display:grid;
	grid-template-columns:auto 1fr;
	gap:1rem 1rem;
	width:100%;
	padding-left:10px;
}
#hours .schedule > dl > dt {
	text-align:justify;
	text-align-last:justify;
	padding-right:1rem;
	border-right:dotted 2px #CCC;
}
#hours .schedule > dl > dd ul li:not(:last-child) {
	margin-bottom:1rem;
}
#hours .schedule > dl > dd .title {
	display:block;
}
#hours .calendar {
	background-color:#f0f4f9;
	padding:4px;
	border:solid 1px #7986cb;
	overflow:clip;
}
#hours .calendar iframe {
	width:100%;
	height:auto;
	aspect-ratio:3 / 4;
}

}


/*PC NPC TAB*/
@media screen and (min-width: 768px), print {

/*BASE*/
section {
	padding:80px 60px;
}
section .container {
	max-width:1440px;
	margin:auto;
}
section .hgroup {
	margin-bottom:40px;
}
section .hgroup h1 {
	text-align:center;
	padding-right:90px;
}

/*どんなところ*/
#museum .container .content-box {
	display:flex;
	justify-content:center;
	align-items:center;
	gap:0 40px;
	padding:80px 60px;
	background: url(../images/about/museum_bgimg.jpg) no-repeat;
	background-size:cover;
	aspect-ratio: 16 / 6;
	border-radius:10px;
}
#museum .content-box .img-box,
#museum .content-box .txt-box {
	width: calc(100% / 2 - 40px);
}
#museum .content-box .img-box img {
	width:100%;
}
#museum .content-box .txt-box {
	color:#FFF;
	font-size:clamp(16px, 1.6vw, 18px);
}

/*待合室・診療室*/
#room .content-box > div {
	display:flex;
}
#room .content-box > div:nth-of-type(even) {
	flex-direction:row-reverse;
}
#room .content-box > div > .img-box,
#room .content-box > div > .txt-box {
	flex: 1 0 50%;
}
#room .content-box > div > .img-box img {
	object-fit: cover;
}
#room .content-box > div > .txt-box {
	display:flex;
	align-items:center;
	padding:40px;
	text-align:justify;
}
#room .content-box > div:nth-of-type(odd) > .txt-box {
	padding-right:0;
}
#room .content-box > div:nth-of-type(even) > .txt-box {
	padding-left:0;
}

/*取り組み*/
#initiative {
	background-color:rgba(246, 236, 227,1)
}
#initiative .key .img-box {
	background-color:#9bad53;
	border:solid 4px #9bad53;
	border-radius:10px;
	overflow:clip;
	box-shadow:4px 4px 6px rgba(0,0,0,.15);
}
#initiative .key .img-box img {
	border-radius:10px;
	border:solid 1px #728526;
}
#initiative .key .txt-box {
	padding:50px 0;
}
#initiative .key .txt-box h2 {
	font-size:clamp(24px, 2.4vw, 26px);
	text-align:center;
}
#initiative .special {
	border-radius:10px;
	overflow:clip;
	box-shadow:0 0 10px rgba(0,0,0,.15);
	position:relative;
	z-index:0;
}
#initiative .special::before,
#initiative .special::after {
	content:"SPECIAL";
	font-size:14px;
	line-height:1;
	text-align:center;
	color:#fffadf;
	background:#68a189;
	width:140px;
	border-top:solid 2px #FFF;
	border-bottom:solid 2px #FFF;
	padding:6px 0;
	position:absolute;
	z-index:1;
}
#initiative .special::before {
	top:18px;
	left:-40px;
	transform:rotate(-45deg);
}
#initiative .special::after {
	bottom:18px;
	right:-40px;
	transform:rotate(-45deg);
}
#initiative .special .content-box {
	display:flex;
	justify-content:center;
	align-items:center;
	gap:0 40px;
	padding:60px 6%;
	background-color:rgba(235,206,206,1);
	border:solid 4px #FFF;
	border-radius:10px;
	overflow:clip;
}
#initiative .special .content-box > ul{
	flex: 1 1 calc(100% - 280px - 40px);
}
#initiative .special .content-box > .img-box {
	flex: 0 0 280px;
}
#initiative .special ul {
	color:#650330;
	font-size:clamp(16px, 1.6vw, 18px);
}
#initiative .special ul li {
	text-align:justify;
	padding-bottom:calc(1rem + 4px);
	margin-bottom:1rem;
	position:relative;
}
#initiative .special ul li::before,
#initiative .special ul li::after {
	content:"";
	display:block;
	width:100%;
	height:4px;
	position:absolute;
	left:0;
}
#initiative .special ul li::before {
	background: linear-gradient(90deg,rgba(217, 32, 32, 1) 0%, rgba(222, 204, 67, 1) 100%);
	bottom:0px;
}
#initiative .special ul li::after {
	background:url(../images/tmpl/line_dot_pink.svg) left center repeat-x;
	bottom:0;
}
#initiative .special .img-box .instax {
	background-color:#FFF;
	padding:10px;
	box-shadow:0 0 10px rgba(0,0,0,.15);
}
#initiative .special .img-box .instax img {
	width:100%;
}
#initiative .special .img-box .instax p {
	text-align:center;
	padding:28px 0;
}

/*診療の流れ*/
#flow .hgroup {
	margin-bottom:80px;
}
#flow .hgroup h1 {
	padding-right:98px;
}
#flow .chart {
	font-size:clamp(10px, 1.2vw, 16px);
	background:url(../images/about/flow_bgimg_v2.svg) no-repeat;
	background-size:auto 100%;
	width:calc(100% - 200px);
	max-width:1280px;
	height:auto;
	margin:auto;
	aspect-ratio:880 / 1280;
	overflow: visible;
	position:relative;
}
#flow .chart > li {
	position:absolute;
	left:13.5%;
}
#flow .chart > li:nth-child(1) { top:1%; }
#flow .chart > li:nth-child(2) { top:14%; }
#flow .chart > li:nth-child(3) { top:25%; }
#flow .chart > li:nth-child(4) { top:36%; }
#flow .chart > li:nth-child(5) { top:48%; }
#flow .chart > li:nth-child(6) { top:60.6%; }
#flow .chart > li:nth-child(7) { top:72.4%; }
#flow .chart > li:nth-child(8) { top:84%; }
#flow .chart > li:nth-child(9) { top:96%; }

#flow .chart > li > h2 {
	font-size:clamp(15px, 1.6vw, 24px);
	font-weight:bold;
	white-space:nowrap;
}
#flow .chart > li > ul {
	padding-top:.5em;
}
#flow .chart > li > ul li {
	display:inline-block;
	margin-bottom:.25em;
	margin-right:1em;
}
#flow .chart > li:nth-child(1) h2,
#flow .chart > li:nth-child(3) h2 {
	letter-spacing:2em;
}

/*診療日*/
#hours {
	background-color:#f0f8e3;
}
#hours .content-box {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:0 40px;
	max-width:1440px;
	margin:auto;
}
#hours .content-box .schedule {
	grid-row: 1 / 2;
	grid-column: 1 / 2;
}
#hours .content-box .calendar {
	grid-row: 1 / 2;
	grid-column: 2 / 3;
}
#hours .schedule {
	font-size:14px;
	margin-bottom:2rem;
}
#hours .schedule table {
	background-color:#FFF;
	width:100%;
	border-top:solid 1px #c2c268;
	border-left:solid 1px #c2c268;
	margin-bottom:1rem;
}
#hours .schedule table th, #hours .schedule table td {
	font-weight:normal;
	text-align:center;
	vertical-align:middle;
	padding:10px;
	border-bottom:solid 1px #c2c268;
	border-right:solid 1px #c2c268;
	width: calc((100% - 1%) / 8);
}
#hours .schedule table th {
	background-color:#eef1d4;
}
#hours .schedule table th.am, #hours .schedule table th.pm {
	white-space:nowrap;
	width: 1%;
}
#hours .schedule table th p.time {
	display:flex;
	justify-content:space-between;
	column-gap:.25em;
}
#hours .schedule ul.note {
	padding-left:10px;
	margin-bottom:1rem;
}
#hours .schedule ul.note li {
	display:inline-block;
	margin-bottom:.5em;
}
#hours .schedule ul.note li:not(:last-child) {
	margin-right:1rem;
}
#hours .schedule > dl {
	display:grid;
	grid-template-columns:auto 1fr;
	gap:1rem 1rem;
	width:100%;
	padding-left:10px;
}
#hours .schedule > dl > dt {
	text-align:justify;
	text-align-last:justify;
	padding-right:1rem;
	border-right:dotted 2px #CCC;
}
#hours .schedule > dl > dd .title {
	display:inline-block;
	margin-right:1rem;
}
#hours .calendar {
	background-color:#f0f4f9;
	padding:4px;
	border:solid 1px #7986cb;
	overflow:clip;
}
#hours .calendar iframe {
	width:100%;
	height:auto;
	min-height:360px;
	max-height:400px;
	aspect-ratio:4 / 3;
}

}