@charset "utf-8";

/* Birth Hospital Tmp Ver1.0 */

:root {
    --main-color01: #EF7689;
    --main-color02:#EF93A2;
    --main-color03:#f8c1ca;
    --main-color04:#FBE0E4;	
    --base-color01: #fff0f0;
    --accent-color01: #4D3333;
	--accent-color02: #6FA8DC;
	--accent-color02_base: #E2EDF8;
    --background-gray: #f3f3f3;
    --background-gray-dark: #818d8f;
    --text-gray: #666;
	--text-black: #333;
}
/*Header--------------------------------------------------------------*/		
@media print, screen and (min-width:1617px){	
	header .Tel{width:230px;}
	header .Tel i{font-size:3.5rem;}
	header .Tel p{font-size:2.9rem; line-height:1.5; font-weight: 500;}
	header .Tel p span{font-size:1.6rem;}
	header .nav {display:flex !important; margin:0 16px 0 0;}
	header p.iconInstagram {position: absolute; right:467px !important; top:24px !important;}
	header .nav ul li.iconInstagram {}
	header .nav ul li.iconInstagram a img {width:30px; height:auto;}
	header p.iconInstagram a img {width:26px !important; height:auto;}
}

@media print, screen and (min-width:1514px) and (max-width: 1616px) {
	.none01{display: none;}
	header .nav {display:flex !important; margin:0 10px 0 0!important;}
	header p.iconInstagram {position: absolute; right:376px !important; top:24px !important;}
	header .nav ul li.iconInstagram {}
	header .nav ul li.iconInstagram a img {width:30px; height:auto;}
	header p.iconInstagram a img {width:22px !important; height:auto;}
	header .Tel{width:210px;}
	header .Tel i{font-size:3rem;padding-top: 5px;}
	header .Tel p{font-size:2.6rem; line-height:2.5rem;font-weight: 500;}
	header .Tel p span{font-size:1.5rem;}
	
}


@media print, screen and (min-width: 1340px) {
header,.header_inner,header .Tel{height: 90px;}
#MainContent{padding-top:90px;}	
header .Logo a{width: 375px;display: flex;align-items: center;}	
header dl{ display:none !important;}
header .nav ul{margin-right: 35px;}	
header .nav ul li:not(:first-child){margin-left: 30px;}	

.drop_menu{position: relative;}	
#menu {
  display: none;
  }
#toggle:checked ~ #menu {
  display: block;
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 220px;
  background: var(--base-color01);
  border: 2px solid #FFF;
}
	
#toggle:checked ~ #menu .green {
  background: var(--accent-color02_base)!important;
}	
	
.drop_menu label{transition:0.6s;}
.drop_menu label:hover{opacity: 0.6; transition:0.6s;}	
	
.menu_inner{width:100%!important;margin: 0!important;}
.menu_inner a{display: block; padding: 15px; border-bottom: 1px solid var(--main-color01);position: relative;transition: 0.2s;}		
.menu_inner a::after{
	content: ""; 
	display: block;
	width: 8px;
	height: 8px;
	border-right: 1px solid var(--main-color01);
	border-bottom: 1px solid var(--main-color01);
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	position: absolute;
	top:0; right: 20px; bottom: 0;margin: auto 0; 
	transition: 0.2s;
	}
	
.menu_inner a:hover{display: block; padding: 15px; border-bottom: 1px solid #fff; background:var(--main-color01);color: #fff;transition: 0.2s;}	
.menu_inner a:hover::after{
	content: ""; 
	display: block;
	width: 8px;
	height: 8px;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	position: absolute;
	top:0; right: 20px; bottom: 0;margin: auto 0; 
	transition: 0.2s;
	}
	
.menu_inner.green  a{display: block; padding: 15px; border-bottom: 1px solid var(--accent-color02);position: relative;transition: 0.2s;}		
.menu_inner.green  a::after{
	content: ""; 
	display: block;
	width: 8px;
	height: 8px;
	border-right: 1px solid var(--accent-color02);
	border-bottom: 1px solid var(--accent-color02);
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	position: absolute;
	top:0; right: 20px; bottom: 0;margin: auto 0; 
	transition: 0.2s;
	}
	
.menu_inner.green  a:hover{display: block; padding: 15px; border-bottom: 1px solid #fff; background:var(--accent-color02);color: #fff;transition: 0.2s;}	
.menu_inner.green  a:hover::after{
	content: ""; 
	display: block;
	width: 8px;
	height: 8px;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	position: absolute;
	top:0; right: 20px; bottom: 0;margin: auto 0; 
	transition: 0.2s;
	}	
	
}

@media print, screen and (min-width: 854px) and (max-width: 1513px) {
header,.header_inner,header .HeadTel{height: 80px;padding: 0 15px;}	
#MainContent{padding-top:80px;}	
header .Logo a{width: 330px;}	
header .nav {display:none !important;}	
header dl{ display:block !important;}
header .Tel{width:200px; margin-right: 56px;}
header .Tel i{font-size:3.4rem;padding-top: 5px;}
header .Tel p{font-size:2.5rem; line-height:2.2rem; font-weight: 500;}
header .Tel p span{font-size:1.5rem;}	
.header_inner{width: 100%!important;}	
header p.iconInstagram {position: absolute; right:495px !important; top:21px !important;}
header .nav ul li.iconInstagram {}
header .nav ul li.iconInstagram a img {width:30px; height:auto;}
header p.iconInstagram a img {width:26px !important; height:auto;}
	
}

@media print, screen and (min-width: 769px) and (max-width: 853px) {
.none01{display: none;}	
header,.header_inner,header .HeadTel{height: 80px;padding: 0 15px;}	
#MainContent{padding-top:80px;}	
header .Logo a{width: 330px;}	
header .nav {display:none !important;}	
header dl{ display:block !important;}
header .Tel{width:200px; margin-right: 60px;}
header .Tel i{font-size:3rem;}
header .Tel p{font-size:2.4rem; line-height:2.2rem; font-weight: 500;}
header .Tel p span{font-size:1.5rem;}	
.header_inner{width: 100%!important;}	
header p.iconInstagram {position: absolute; right:422px !important; top:21px !important;}
header .nav ul li.iconInstagram {}
header .nav ul li.iconInstagram a img {width:30px; height:auto;}
header p.iconInstagram a img {width:26px !important; height:auto;}
	
}


header dl dd ul li a:hover{ color:#000 !important; background-color:var(--main-color03);}
header dl dd ul li a:hover::before{	border-right: 1px solid #000;border-bottom: 1px solid #000;}
.Tel i,.Tel p{color:var(--main-color01); }
header .ContactPhone a{background-color:var(--accent-color01);}


/*Footer--------------------------------------------------------------*/
@media print, screen and (min-width: 769px) and (max-width: 1000px) {
.InnerBox.footer_inner{display: block;}	
.footer_l{margin:0 auto 50px;}	
.footer_r{width: 100%;}
.footer_logo{margin-left: auto; margin-right: auto;}
.footer_l p{text-align: center;}	

	
.footer_inner__lists li{width:140px;margin-right: 30px;border-bottom: 1px solid #fff;}
}




footer {border-top-color: var(--main-color01);}
footer .Tel{margin-left: auto; margin-right: auto;}	
footer p.Kamoku span{background-color:var(--main-color01); color: #fff;}	
footer p.kyushin span:first-child{background-color:#7F7F7F; color: #fff;}	
.FooterBottom{background-color:var(--accent-color01);}

.FooterBottom,.FooterBottom p,.FooterBottom a{color: #fff;}

@media print, screen and (max-width: 768px) {
header p.iconInstagram {position: absolute; right:60px; top:24px;}
.FooterBottom,.FooterBottom p,.FooterBottom a{color: var(--text-gray);}
.footer_small,.footer_small p,.footer_small a{color: #fff;}	
}

/*common--------------------------------------------------------*/
.OddBox{background-color:var(--base-color01); }
.OddBox_blue{background-color:var(--accent-color02_base); }
.EditColor{color:var(--main-color01) !important; }
.PageTitle{background-color:var(--main-color01);}
.PageTitle.green{background-color:var(--accent-color02);}
.Pankuzu ul li:first-child a:before{color:var(--main-color01); }
.Pankuzu.green ul li:first-child a:before{color:var(--accent-color02); }

/*Box-----------------------------------------------------------------*/
.BoxStyle01{background-color:var(--background-gray);}
/*Table-----------------------------------------------------------------*/
.TableStyle01 th{background-color:var(--background-gray);}
.TableStyle02 thead th{background-color:var(--main-color04);}
.TableStyle02 thead td{background-color:var(--main-color02);color: #fff;}
.TableStyle02 tbody th{background-color:var(--main-color03);}
.TableStyle02 tbody td{background-color:var(--background-gray);}
.Circle,.Wcircle{color:var(--main-color01); font-weight: bold;}
.TableStyle03 th{background-color:var(--main-color02);color: #fff;}
.TableStyle03 td{background-color:var(--background-gray);}
.TableStyle04 th{color:var(--main-color01); }
.TableStyle05 th{background-color:var(--main-color02);color: #fff;}
.TableStyle05 td{background-color:var(--background-gray);}
/*Title----------------------------------------------*/
.TitleStyle01{color:var(--text-black);}
.TitleStyle02{color:var(--text-black);}
.TitleStyle06{}



/*Link--------------------------------------------------------------*/	
a.LinkStyle01,li.LinkStyle01 a,ul.LinkStyle01 li a,a.GoogleMapApp,a.ContactTxt{background-color:var(--main-color01); color: #fff;}
a.ContactTxt i{color:#fff;}

/*Category_nav-----------------------------------------------------*/

.category_Lists li a:hover{opacity: 0.6;transition: 0.3s;}
@media print, screen and (min-width: 1082px){
.category_Lists{width: 100%;display: grid; grid-template-columns: repeat(4, 1fr); gap:25px;margin-top: 60px;}	
.category_Lists li {
  flex: 1; /* 各liを等分 */
}

.category_Lists li a {
	display: flex;
	align-items: center;
  	justify-content: flex-start;
  	width: 100%;        /* 親liの幅に追従 */		
	max-width: 260px;   /* これ以上小さくならない */
  	max-height: 100px;
  	font-size: 2.1rem;
 	background: #fff;
  	border: 2px solid var(--main-color02);
 	padding: 25px;
 	border-radius: 15px;
	line-height: 1.4;
	flex-grow: 1;
	transition: 0.3s;
}
.category_Lists li a img{width: 100%; max-width: 60px; display: block;margin-right: 10px;}		
}

.category_Lists li.green a {

  	border: 2px solid var(--accent-color02)!important;

}


@media print, screen and (min-width: 903px) and (max-width: 1081px){
.category_Lists{width: 100%;max-width: 830px; margin: 60px auto 0; display: flex;justify-content: flex-start;align-items: flex-start; gap:25px;flex-wrap: wrap;}	
.category_Lists li {width: 260px; }
.category_Lists li a {
	display: flex;
	align-items: center;
  	justify-content: flex-start;      
	width: 260px; 
  	max-height: 100px;
  	font-size: 2.1rem;
 	background: #fff;
  	border: 2px solid var(--main-color02);
 	padding: 25px;
 	border-radius: 15px;
	line-height: 1.4;
	flex-grow: 1;
	transition: 0.3s;
}	
	
	
	
.category_Lists li a img{width: 100%; max-width: 60px; display: block;margin-right: 10px;}		
}

@media print, screen and (min-width:354px) and (max-width: 904px){
.category_Lists{width: 100%;max-width: 467px; margin: 60px auto 0; display: grid; grid-template-columns: repeat(2,0.5fr);gap:10px;}	
.category_Lists li a {
	display: flex;
	align-items: center;
  	justify-content: flex-start;      
    width: 100%; 
    max-width: 230px;  
    min-width: 0; 
  	max-height: 100px;
  	font-size: 1.7rem;
 	background: #fff;
  	border: 2px solid var(--main-color02);
 	padding: 15px 10px;
 	border-radius: 15px;
	line-height: 1.4;
	flex-grow: 1;
	transition: 0.3s;
}	
.category_Lists li a img{width: 100%; max-width: 40px; display: block;margin-right: 8px;}		
		
}

@media print, screen and (max-width: 353px){
.category_Lists{width: 100%;max-width: 467px; margin: 60px auto 0; display: grid; grid-template-columns: repeat(2,0.5fr);gap:10px;}	
.category_Lists li a {
	display: flex;
	align-items: center;
  	justify-content: flex-start;      
    width: 100%; 
    max-width: 230px;  
    min-width: 0; 
  	max-height: 100px;
  	font-size: 1.6rem;
 	background: #fff;
  	border: 2px solid var(--main-color02);
 	padding: 15px 8px;
 	border-radius: 15px;
	line-height: 1.4;
	flex-grow: 1;
	transition: 0.3s;
}	
.category_Lists li a img{width: 100%; max-width: 30px; display: block;margin-right: 8px;}		
		
}




/*Top page--------------------------------------------------------------*/
.flex-control-paging li a.flex-active{background-color:var(--main-color01); }
.NewsBox h2:before,.NewsBox h2 span a:after{color:var(--main-color01);}

#nasal_endoscope , #varicose_veins{
	padding-top: 100px;
    margin-top: -100px;
}
/*News------------------------------------------------------------------------*/
.NewsBox .Cate span.cate01{background-color: var(--main-color01);}
.NewsBox .Cate span.cate02{background-color: var(--accent-color);}
/*Access--------------------------------------*/
div.AccessPage div.AccessDetail{background-color:var(--base-color01);}
div.AccessPage div.AccessDetail:before
{background-color:var(--main-color02);}
div.AccessPage div.AccessDetail h3{color:var(--text-gray);}
/*Recruit-----------------------------------------*/
.recruit_area01_l .ttl{color:var(--main-color01);}


/*clinic-----------------------------------------*/
@media print, screen and (min-width: 769px) and (max-width: 1020px){
	
.clinic_flexBox01{ display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: clamp(20px, 3vw, 28px);margin-top: 50px;}		
}


/*vaccination編集ここから-----------------------------------------*/
@media print, screen and (max-width: 430px) {
.header_br_tb-only{display: none;}
}
@media print, screen and (min-width: 853px) and (max-width: 1010px){
.header_br_tb-only{display: none;}
}

@media print, screen and (max-width: 406px) {
.footer_br_tb-only{display: none;}
}
@media print, screen and (min-width: 1082px){
.category_Lists{width: 100%;display: grid; grid-template-columns: repeat(4, 1fr); gap:20px;margin-top: 60px;}	
	.category_Lists li a{font-size: 1.9rem;}	
.category_Lists li a img{width: 20%; max-width: 60px; display: block;margin-right: 10px;}
}
.scroll-hint-icon-wrap,
.scroll-hint-text {
  z-index: 9 !important; /* 数値は環境に合わせて調整してください */
}