@charset "utf-8";
body {background:#deedf1 url('/clinic/img/main/bg.jpg') no-repeat center top; background-size:cover;}


#contents {padding:30px 0 50px; z-index:0;}
#contents .wrap {display:flex; gap:8px; flex-wrap:wrap;}

#visual {position:relative; flex:0 1 calc(100% - 468px);}
#visual>img {position:absolute; max-width:48%;}
#visual>ul {display:flex; flex-wrap:wrap; gap:8px; text-align:center;}
#visual>ul>li {flex:0 0 calc(25% - 6px);}
#visual>ul>li:first-child {margin-left:calc(50% + 4px);}
#visual>ul>li>a {position:relative;display:block; padding-top:53%; height:182px; color:#fff; font-size:22px; line-height:120%; font-weight:bold;}
#visual>ul>li.l1>a, #visual>ul>li.l3>a, #visual>ul>li.l7>a {padding-top:46%;}
#visual>ul>li.l1>a {background:#f07070;}
#visual>ul>li.l2>a {background:#ed9955;}
#visual>ul>li.l3>a {background:#936de0;}
#visual>ul>li.l4>a {background:#6c85d7;}
#visual>ul>li.l5>a {background:#83bf5b;}
#visual>ul>li.l6>a {background:#497fff;}
#visual>ul>li>a:before {display:block; content:""; position:absolute; left:0; top:15px; width:100%; height:100px; background:no-repeat center center; background-size:auto 60px;}
#visual>ul>li.l1>a:before {background-image:url('/clinic/img/main/visual_ic01.png');}
#visual>ul>li.l2>a:before {background-image:url('/clinic/img/main/visual_ic02.png');}
#visual>ul>li.l3>a:before {background-image:url('/clinic/img/main/visual_ic03.png');}
#visual>ul>li.l4>a:before {background-image:url('/clinic/img/main/visual_ic04.png');}
#visual>ul>li.l5>a:before {background-image:url('/clinic/img/main/visual_ic05.png');}
#visual>ul>li.l6>a:before {background-image:url('/clinic/img/main/visual_ic06.png?v2');}

#visual>ul>li.l2.on>a { z-index:11; background:none; }
#visual>ul>li.l2.on>div { display:block; z-index:10; }
#visual>ul>li.l2>div { display:none; position:absolute; overflow:hidden; text-align:left; top:0; left:0; bottom:0; width:calc(50% - 4px); padding:1.3%; background:#ed9955; }
#visual>ul>li.l2>div>ul {padding-left:48%;}
#visual>ul>li.l2>div>ul>li { position:relative; margin:0.6% 0; padding-left:8px; z-index:12; }
#visual>ul>li.l2>div>ul>li a{ color:#fff; letter-spacing:-2px; font-size:14px; word-break:keep-all;}
#visual>ul>li.l2>div>ul>li:before { position:absolute; left:0; top:8px; width:2px; height:2px; border:1px solid #fff; background:#c87633; content:""; }
#visual>ul>li.l2>div>a.close { position:absolute; overflow:hidden; left:10px; top:10px; width:60px; height:60px; font-size:0; text-indent:-5000px; background:#c87633; z-index:13; }
#visual>ul>li.l2>div>a.close:after { position:absolute; top:50%; left:0; width:60px; height:1px; background:#fff; transform:rotate(45deg); content:""; }
#visual>ul>li.l2>div>a.close:before { position:absolute; top:50%; left:0; width:60px; height:1px; background:#fff; transform:rotate(-45deg); content:""; }

#pZone {position:relative; overflow:hidden; flex:0 0 460px;}
#pZone>div {overflow:hidden;}
#pZone ul.list {position:relative; white-space:nowrap; font-size:0; line-height:0;}
#pZone ul.list>li {display:inline-block;}
#pZone .control {position:absolute; right:30px; top:30px; z-index:10;}
#pZone .control>li {display:inline-block;}
#pZone .control a.prev {display:block; width:15px; height:15px; border-right:2px solid #333; border-bottom:2px solid #333; transform:rotate(135deg); -webkit-transform:rotate(135deg);}
#pZone .control a.next {display:block; width:15px; height:15px; border-right:2px solid #333; border-bottom:2px solid #333; transform:rotate(-45deg); -webkit-transform:rotate(-45deg);}
#pZone .control a.stop {display:block; width:8px; height:15px; border-right:2px solid #333; border-left:2px solid #333; }

#about, #info {flex:1 1 calc(25% - 8px); padding:30px 20px 38px; background:#fff;}
#about h3, #info h3 {font-size:25px;}
#about h3 span, #info h3 span {font-weight:normal;}
#info h3:nth-of-type(2) {margin-top:42px;}

#about {padding-top: 28px; padding-bottom: 38px;}
#about h3 {margin-top:14px; letter-spacing:-2px;}
#about h3:first-of-type {margin-top:0;}
#about dl {overflow:hidden; margin-top:7px;}
#about dt, #about dd {float:left; margin-right:10px;}
#about dt {width:78px; padding-bottom:2px; padding-top:1px; padding-left:10px; color:#fff; font-size:15px; border-radius:3px;}
#about dd {font-size:14px;}
#about dl.time dt {background:#4086ee;}
#about dl.holiday dt {letter-spacing:5.5px; background:#ff6969;}
#about dl+dl {margin-top:5px;}
#about ul {display:flex; gap:3px; flex-wrap:wrap; flex:1 1 auto; margin-top:7px;}
#about ul>li {flex:1 1 auto; display:flex;}
#about ul>li>a {display:block; text-align:center; width:100%; padding:8px 18px 10px; color:#fff; font-size:13px; border-radius:6px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#about ul>li:first-child>a {background:#3e9669;}
#about ul>li:nth-child(2)>a {background:#f07070;}
#about ul>li:nth-child(3)>a {background:#c87633;}
#about ul>li:nth-child(4)>a {background:#497fff;}
#about>div {display: flex; align-items: center; gap: 10px; margin-top: 14px;}
#about ul>li>a.e-btn {background:#5c4ace;}

#info h3 {color:#2e436e;}
#info .vaccination {margin-top:20px; margin-left:3px;}
#info .vaccination input[type=text], #info .vaccination select {height:43px; padding:0 10px; font-size:18px; color:#fff; border:0; background:#2e436e;}
#info .vaccination input[type=text] {width:70px;}
#info .vaccination input[type=submit] {position:relative; left:50%; margin-top:5px; padding:8px 0 10px; width:100%; color:#fff; font-size:14px; border-radius:6px; border:0; background:#383e4d; cursor:pointer; transform:translateX(-50%); -webkit-transform:translateX(-50%);}
#info ul {margin-top:10px;}
#info ul>li {position:relative; display:inline-block; min-width:32%; padding-left:8px; margin-top:15px;}
#info ul>li:before {display:block; content:""; position:absolute; left:0; top:9px; width:5px; height:5px; border-radius:50%;}
#info ul>li:nth-child(1):before {background:#f07070;}
#info ul>li:nth-child(2):before {background:#ed9955;}
#info ul>li:nth-child(3):before {background:#ed9955;}
#info ul>li:nth-child(4):before {background:#6c85d7;}
#info ul>li:nth-child(5 ):before {background:#83bf5b;}

.rCon {flex:0 0 49.6%; width:49.6%;}
#board {position:relative; padding-top:47px;}
#board>div>h3 {position:absolute; top:0; text-align:center; width:25%;}
#board>div:nth-child(2)>h3 {left:25.5%;}
#board>div:nth-child(3)>h3 {left:51%; width:30%;}
#board>div>h3>a {display:block; height:47px; font-size:18px; line-height:47px; font-weight:normal; background:rgba(255,255,255,.8);}
#board>div.on>h3>a {color:#fff; font-weight:bold; background:#2e436e;}
#board>div>ul {display:none; padding:18px 25px 35px; background:#2e436e;}
#board>div.on>ul {display:block;}
#board>div>ul>li, #board>div>ul>li>a {color:#fff;}
#board>div>ul>li {position:relative; margin-top:18px; padding-left:10px;}
#board>div>ul>li:before {display:block; content:""; position:absolute; left:0; top:9px; width:5px; height:5px; border-radius:50%; background:#fff;}
#board>div>ul>li>span {position:absolute; right:0;}
#board>div>a {display:none; position:absolute; right:0; top:10px; padding-right:15px; background:url('/clinic/img/main/board_more.gif') no-repeat right center;}
#board>div.on>a {display:block;}

#ban {position:relative; margin-top:1.2%; padding:22px 20px; background:#383e4d;}
#ban>div {margin-right:50px; overflow:hidden;}
#ban>div>ul {white-space:nowrap;}
#ban>div>ul>li {display:inline-block; margin-right:15px;}
#ban>div>ul>li>a {color:#fff; font-size:14px;}
#ban>a {position:absolute; top:28px; right:40px; width:14px; height:13px; margin-left:10px; background:url('/clinic/img/main/prev.gif') no-repeat;}
#ban>a.next {right:15px; transform:rotate(180deg); -webkit-transform:rotate(180deg);}

/*pc_min*/
@media all and (max-width:1280px){
	/*
	#visual {width:66%;}
	#pZone {width:34%; height:347px;}
	*/
}


/*tablet*/
@media all and (max-width:800px){
	#contents {max-width:460px; margin:0 auto; padding:15px 0;}
	.wrap {flex-wrap:nowrap; flex-direction:column; gap:15px;}
	.wrap>div {flex:1 1 100% !important;}
	#pZone {order:1;}
	#visual {order:2;}
	#visual>img {display:none;}
	#visual>ul>li {flex:0 0 calc(50% - 4px);}
	#visual>ul>li:first-child {margin-left:0;}
	#visual>ul>li.l2.on>a {display:none;}
	#about {order:4; padding-left:30px; /* background-image:url('/clinic/img/main/about_bg_mb.gif'); */ background-repeat:no-repeat; background-position:right 20px top 20px;}
	#about ul {margin-top:10px;}
	#about>div {flex-wrap: wrap; gap: 0;}
	#about>div h3 {width: 100%;}
	#info {display:none;}
	.rCon {order:3; width:100%;}
	#board>div>h3>a {font-size:17px;}
	#board>div.hospital>h3 {width:35%;}
	#board>div.hospital>h3>a {letter-spacing:-1px;}
	#board>div>ul>li>span {display:none;}
	#ban {display:none;}
	#visual>ul>li.l2>div { right:0%; width:100%; padding:1.6% 15px; }
	#visual>ul>li.l7.on>a {display:none; }
}



/*mobile*/
@media all and (max-width:480px){
	#contents {padding:0;}
	#visual {margin-top:5px;}
	#visual>ul {margin:2%;}
	#visual>ul>li {width:48%; height:auto;}
	#visual>ul>li>a {text-align:left; height:70px; padding:25px 10px 15px 70px !important; font-size:15px;}
	#visual>ul>li.l1>a, #visual>ul>li.l3>a, #visual>ul>li.l7>a {padding-top:17px !important;}
	#visual>ul>li.l3>a span {display:block;}
	#visual>ul>li>a:before {left:10px; top:15px; max-width:50px; height:40px; background-size:auto 100% !important;}
	#pZone .control {right:20px; top:20px;}
	#board, #about {margin:2%; width:auto;}
	#board>div.hospital>h3 {width:42%;}
	#board>div>a {text-align:center; position:static; padding:10px; font-size:16px; color:#fff; background:#08122f;}

	
	#visual>ul>li.l2.on>a {display:block; position:absolute; left:0; width:100%; background:#ed9955; }
	#visual > ul > li.l2 > div { overflow-y:scroll; top:70px; height:170px; background:#c87633; }
	#visual > ul > li.l2 > div > a.close { display:none; }
	#visual>ul>li.l2>div>ul {padding-left:0;}

	#visual>ul>li.l7.on>a { position:absolute; left:0; width:100%; background:#01a7a7; display:block; }
	#visual > ul > li.l7 > div { overflow-y:scroll; top:74px; width:100%; height:170px; background:#008282; }
	#visual > ul > li.l7 > div > a.close { display:none; }
	#visual>ul>li.l7>div>ul>li {margin:10px 0; font-size:16px;}

	.dp_pc {display:none;}

}


@media all and (min-height:1170px){ /*QHD UP*/
	html, body {position:relative; height:100%;}
	footer {position:absolute; bottom:0; left:0; right:0;}
}