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

/*Main Visual*/
#mainvisual {
	background: linear-gradient(126deg,rgba(193,226,255,.6) 0%, rgba(236,255,227, 1) 40%, rgba(193,226,255,.32) 100%);
	width:100%;
}
#bgimg {
	position:relative;
	top:0;
	left:0;
}
#bgimg .video-box {
	position:absolute;
	overflow:clip;
	width: 100%;
	height:100vh;
	z-index:-1;
}
#bgimg .video {
	position:absolute;
	top:50%;
	left:50%;
	min-width:100%;
	min-height:100%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
#mainvisual .container {
	width:100%;
}
#mainvisual .container .main-slider img {
	width:100%;
}
#mainvisual .container .main-slider,
#mainvisual .container .menu-box {
	height:auto;
	aspect-ratio:72 / 45;
	position:relative;
}
#mainvisual .menu-box .bgimg,
#mainvisual .menu-box .navimg {
	display:flex;
	justify-content:center;
	align-items:center;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
}
#mainvisual .menu-box .navimg svg a path {
	fill:rgba(47,142,92,0);
	stroke:rgba(47,142,92,0);
	transition:stroke ease-in-out .2s;
}

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

/*BASE*/

/*Main Visual*/
#mainvisual {
	position:relative;
	width:100%;
	height: auto;
	overflow:hidden;	
}
#mainvisual .main-slider {
	position:relative;
	width:100%;
	height:100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
#mainvisual .menu-box img,
#mainvisual .menu-box svg {
	width:90%;
}


/*簡単ネット予約*/
#online-appointment {
	background-color:#fdf5eb;
	padding:4rem 2rem;
}
#online-appointment .container {
}
#online-appointment .container h1 {
	margin-bottom:1rem;
}
#online-appointment .container h1 a {
	display:flex;
	justify-content:center;
	align-items:center;
	padding:1rem;
	background-color:#ffdd99;
	border-radius:6px;
}
#online-appointment .container .txt-box h2 {
	font-size:16px;
	margin-bottom:1rem;
}

/*施設認定*/
#certification {
	background-color:#ceffdb;
	padding:4rem 2rem;
}
#certification .container {
}
#certification .container h1 {
	font-size:18px;
	color:#378b6d;
	background:#9bdfb4;
	text-align:center;
	padding:1rem 0;
	margin-bottom:2rem;
	border-radius:6px;
}

/*スマイルプラザの紹介*/
#about {
	padding:4rem 2rem;
}
#about .point {
	font-size:16px;
	padding:2rem 0;
}
#about .point ul {
	margin-bottom:2rem;
}
#about .point ul li {
	text-align:justify;
	padding-bottom:calc(1rem + 4px);
	margin-bottom:1rem;
	position:relative;
}
#about .point ul li::before,
#about .point ul li::after {
	content:"";
	display:block;
	width:100%;
	height:4px;
	position:absolute;
	left:0;
}
#about .point ul li::before {
	background: linear-gradient(90deg,rgba(92, 204, 139, 1) 0%, rgba(222, 204, 67, 1) 100%);
	bottom:0px;
}
#about .point ul li::after {
	background:url(../images/tmpl/line_dot.svg) left center repeat-x;
	bottom:0;
}
#about .point .hospital a {
	display:block;
	font-size:16px;
	text-align:center;
	color:#FFF;
	background-color:rgba(120,210,103,1);
	border-radius:6px;
	padding:1rem;
}

#about .director {
	padding:1rem 0 0;
}
#about .director li a {
	display:block;
	overflow:clip;
	border-radius:6px;
	border:solid 1px #2b8e38;
	opacity:1;
	transition:opacity ease-in .2s;
}
#about .director li a img {
	width:100%;
	height:auto;
}

/*診療日*/
#hours {
	background-color:#f0f8e3;
	padding:4rem 2rem;
}
#hours .hgroup {
	margin-bottom:2rem;
}
#hours .schedule {
	font-size:12px;
	margin-bottom:2rem;
}
#hours .schedule table {
	width:100%;
	border-top:solid 1px #CCC;
	border-left:solid 1px #CCC;
	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 #CCC;
	border-right:solid 1px #CCC;
}
#hours .schedule table th {
	background-color:#f0fbde;
}
#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;
}
#hours .schedule ul.note li {
	display:inline-block;
	margin-bottom:.5em;
}
#hours .schedule ul.note li:not(:last-child) {
	margin-right:1rem;
}
#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*/
article > .layout_2column {
	background-color:#FFF;
	padding:80px 60px;
}
article > .layout_2column > .container {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:0 80px;
	max-width:1440px;
	margin:auto;
	background-color:#FFF;
}
article > .layout_2column > .container #about {
	grid-row: 1 / 2;
	grid-column: 1 / 2;
}
article > .layout_2column > .container #hours {
	grid-row: 1 / 2;
	grid-column: 2 / 3;
}

/*Main Visual*/
#mainvisual {
	background: linear-gradient(126deg,rgba(193,226,255,.6) 0%, rgba(236,255,227, 1) 40%, rgba(193,226,255,.32) 100%);
	width:100%;
}
#mainvisual .container {
	display:flex;
	flex-direction:row-reverse;
	max-width:1440px;
	height:auto;
	aspect-ratio:144 / 45;
	margin:auto;
	position:relative;
	overflow:clip;
}
#mainvisual .container .main-slider,
#mainvisual .container .menu-box {
	width:calc(100% / 2);
}
#mainvisual .menu-box img,
#mainvisual .menu-box svg {
	width:90%;
	max-width:720px;
}
#mainvisual .menu-box .navimg svg a:hover path {
	stroke:rgba(47,142,92,1);
}

/*簡単ネット予約*/
#online-appointment {
	background-color:#fdf5eb;
	padding:80px 60px;
}
#online-appointment .container {
	display:flex;
	justify-content:center;
	gap:0 20px;
	max-width:1440px;
	margin:auto;
}
#online-appointment .container h1 {
	display:flex;
}
#online-appointment .container h1 a {
	display:flex;
	justify-content:center;
	align-items:center;
	padding:1rem calc(1rem + 2vw);
	background-color:#ffdd99;
	border-radius:6px;
	transition:background-color ease-in .2s;
}
#online-appointment .container h1 a:hover {
	background-color:#FFC244;
}
#online-appointment .container .txt-box h2 {
	font-size:clamp(24px, 2.4vw, 26px);
	margin-bottom:1rem;
}

/*施設認定*/
#certification {
	background-color:#ceffdb;
	padding:80px 60px;
}
#certification .container {
	display:flex;
	justify-content:center;
	gap:0 20px;
	max-width:1440px;
	margin:auto;
}
#certification .container h1 {
	display:flex;
}
#certification .container h1 span {
	display:flex;
	justify-content:center;
	align-items:center;
	padding:2rem calc(1rem + 4vw);
	font-size:clamp(24px, 2.4vw, 26px);
	font-weight:700;
	letter-spacing:.1em;
	text-indent:-0.1em;
	color:#13694a;
	/*background-color:#9bdfb4;*/
	background: linear-gradient(180deg, #9bdfb4 0%, #9bdfb4 100%);
	border-radius:6px;
}
#certification .container .txt-box {
	font-size:clamp(16px, 1.8vw, 20px);
	font-weight:700;
	color:#13694a;
}

/*スマイルプラザの紹介*/
#about .point {
	font-size:clamp(14px, 1.4vw, 16px);
	padding:2rem 0 2rem 2rem;
}
#about .point ul {
	margin-bottom:2rem;
}
#about .point ul li {
	text-align:justify;
	padding-bottom:calc(1rem + 4px);
	margin-bottom:1rem;
	position:relative;
}
#about .point ul li::before,
#about .point ul li::after {
	content:"";
	display:block;
	width:100%;
	height:4px;
	position:absolute;
	left:0;
}
#about .point ul li::before {
	background: linear-gradient(90deg,rgba(92, 204, 139, 1) 0%, rgba(222, 204, 67, 1) 100%);
	bottom:0px;
}
#about .point ul li::after {
	background:url(../images/tmpl/line_dot.svg) left center repeat-x;
	bottom:0;
}
#about .point .hospital a {
	display:block;
	font-size:clamp(20px, 2.1vw, 24px);
	text-align:center;
	color:#FFF;
	background-color:rgba(120,210,103,1);
	border-radius:6px;
	padding:1rem;
	transition:background-color ease-in .2s;
}
#about .point .hospital a:hover {
	background-color:rgba(90,176,74,1);
}

#about .director {
	padding:2rem 0 2rem 2rem;
}
#about .director li a {
	display:block;
	overflow:clip;
	border-radius:6px;
	border:solid 1px #2b8e38;
	opacity:1;
	transition:opacity ease-in .2s;
}
#about .director li a:hover {
	opacity:.75;
}
#about .director li a img {
	width:100%;
	height:auto;
}

/*診療日*/
#hours .hgroup {
	margin-bottom:2rem;
}
#hours .schedule {
	font-size:14px;
	margin-bottom:2.5rem;
}
#hours .schedule table {
	width:100%;
	border-top:solid 1px #CCC;
	border-left:solid 1px #CCC;
	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 #CCC;
	border-right:solid 1px #CCC;
	width: calc((100% - 1%) / 7);
}
#hours .schedule table th {
	background-color:#f0fbde;
}
#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;
}
#hours .schedule ul.note li {
	display:inline-block;
	margin-bottom:.5em;
}
#hours .schedule ul.note li:not(:last-child) {
	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;
}

}