@charset "shift_jis";


/*######################################

Page
======================================*/



/* �p���N�Y
========================*/




/* �������A
========================*/
#about #content_in h2{
	line-height:0;
	font-size:0;
}

#about #gold_back{
	width:606px;
	height:262px;
	background:url(../img/professor/title_back.png) no-repeat;
}

#about #gold_back div{
	padding:0 20px 20px 20px;
	width:173px;
	float:left;
}

#about #gold_back section{
	width:353px;
	float:left;
}

#about #gold_back section h3{
	padding:40px 0 0 0;
	font-size:14px;
	color:#66A008;
}

#about #gold_back section p{
	padding-top:20px;
}

#about .about_p01{
	width:295px;
	float:right;
	padding-left:20px;
	padding-top:10px;
}

/* ���j�E���v
========================*/

#history table{
	margin-top:20px;
}

#history table th{
	height:50px;
	background: url(../img/base/green_dot.png) repeat-x 0 50px;
	color:#669F07;}
	
#history table td{
	height:50px;
	background: url(../img/base/grey_dot.png) repeat-x 0 50px;
	padding-left:20px;}
	
/* ��Lj��Љ�
========================*/

#staff .staff_box{
	width:570px;
	margin:50px auto 0;
}

#staff .staff_box:after{
		content: "";
	display: block;
	clear: both;
}

#staff .box_pic{
	width:150px;
	float:left;
}

#staff .box_profile{
	width:420px;
	float:left;
}

#staff .box_profile hgroup{
	width:400px;
	height:60px;
	padding-top:15px;
	padding-left:20px;
	background:url(../img/staff/back.png) no-repeat 0 20px;
}

#staff .box_profile h3{
	color:#DA6785;
}

#staff .box_profile h4{
	color:#A49266;
	font-size:14px;
}

#staff .box_profile dl{
	padding-left:20px;
}

#staff .box_profile dl:after{
	content: "";
	display: block;
	clear: both;
}

#staff .box_profile dt{
	font-weight:bold;
	width:55px;
	float:left;
}

#staff .box_profile dd{
	width:330px;
	float:left;
}

/* �Ɛ�
========================*/

#result dl{
	padding:5px 20px;
}

#result dfn{
	font-style:normal;
	font-weight:bold;
	color:#DC6886;
}

#result dd{
	padding-left:15px;
}


/* �f�Èē�
========================*/

#medical table{
	width:555px;
	margin:30px auto 0;
	border-color:#CBC2AB;
}

#medical tr{
	height:50px;
	border-color:#CBC2AB;	
}

#medical th{
	background:url(../img/medical/back.png);
	border-color:#CBC2AB;
	font-weight:normal;
}

#medical td{
	font-size:20px;
}

#medical th{
	font-size:16px;
}

#medical td{
	background-color:#FFF;
	text-align:center;
	border-color:#CBC2AB;
	}

#medical .p02{
	padding:20px 40px 10px;
}

#medical .detail{
	width:257px;
	float:right;
	padding-right:50px;
	padding-top:20px;
}

#medical .detail:after{
		content: "";
	display: block;
	clear: both;
}

/* �֘A�a�@
========================*/

#hospital h4{
	padding-bottom:10px;
}

#hospital ol li{
	padding-left:20px;
}

#hospital .hospital_list01{
	width:320px;
	float:left;
}

#hospital .hospital_list02{
	width:240px;
	float:left;
}


/* �����N
========================*/

#link #content_in ul{
	padding-left:70px;
}

#link #content_in ul li{
	padding-left:20px;
	background:url(../img/link/left.png) no-repeat 5px;
	font-weight:bold;
	line-height:2.0em;
}

/* ���ǂ̂��ē�
========================*/
#career #contact{
	width:606px;
	height:113px;
	background:url(../img/career/back.png) no-repeat;
	margin:20px auto;
}

#career #contact dl{
	padding:50px 0 0 120px; 
	*padding:35px 0 0 120px; 
}

#career #contact dl:after{
	content: "";
	display: block;
	clear: both;
}

#career #contact dt{
	float:left;
	font-size:14px;
	font-weight:bold;

}

#career #contact dfn{
		color:#669F06;
}

#career #contact dd{
	float:left;
	padding-left:20px;
	font-weight:bold;

}

#career #contact dd a{
		*display:inline;
}

/* ��W�����畆��w������̂��ē�
========================*/

#studies #map01{
	width:417px;
	margin:20px auto;
}

#studies #map02{
		width:425px;
	margin:0px auto 20px;
}

#studies #access{
	width:424px;
	padding:20px;
	margin:20px auto;
	background:#FAEEDE;
	border-radius: 6px;        /* CSS3���� */  
    -webkit-border-radius: 6px;    /* Safari,Google Chrome�p */  
    -moz-border-radius: 6px;   /* Firefox�p */
	margin-top:30px;
	}

#studies #access dl{
	padding-bottom:10px;
}

#studies #access dt{
	padding-left:20px;
	font-weight:bold;
	background:url(../img/base/book.png) no-repeat 0 3px;
}

#studies  #access dd{
	padding-left:10px;
}

/* �����Љ�
========================*/

.sec02{
	padding-bottom:30px;
	margin-bottom:30px;
	border-bottom: #DDD 1px solid;
}

.sec02 h3{
	width:600px;
	background: url(../img/research/back.png) no-repeat 0 bottom;
	padding:30px 0 10px 15px;
	margin-bottom:20px;
	color:#3572B0;
}

#research #side nav ul li{
	padding:5px 0px;
	background:none;
}

#research .pic{
	padding-top:20px;
	margin:0 auto;	
}

#research #re01 .pic{width:554px;}
#research #re02 .pic{width:570px;}
#research #re03 .pic{width:571px;}
#research #re04 .pic{width:540px;}
#research #re05 .pic{width:571px;}
#research #re06 .pic{width:494px;}
#research #re07 .pic{width:543px;}
#research #re09 .pic02{width:105px;}
#research #re10 .pic{width:327px;}
#research #re11 .pic{width:572px;}
#research #re12 .pic{width:407px;}
#research #re13 .pic{width:503px;}
#research #re14 .pic{width:466px;}
#research #re15 .pic{width:389px;}
#research #re16 .pic02{width:125px;}
#research #re17 .pic{width:379px;}
#research #re18 .pic{width:px;}

#research #re09 .pic02{float:left;}

#research #re09 p{
	float:left;
	width:480px;
}

#research #re16 .pic02{float:left;}

#research #re16 p{
	float:left;
	width:430px;
}


/* ���e�畆�O��
========================*/

#beauty h4{
	padding: 0 0 5px 0;
}

#beauty .beauty_p01{
	width: 245px;
	float: left;
}

#beauty p{
	margin-bottom: 15px;
}

#beauty h3.long_width{
	width: 280px;
}

#beauty .detail{
	width:257px;
	float:right;
	padding-right:50px;
	padding-top:40px;
}

#beauty .detail:after{
		content: "";
	display: block;
	clear: both;
}

#beauty h5{
	color: #66A008;
}


/*�w��E������
========================*/

#workshop h2.gakkai{
	background:url(../img/workshop/title01.png) 0 0 no-repeat;
	padding: 10px 0 0 60px;
	font-size: 14px;
	font-weight: bold;
	color: #4E8BC8;
	height: 30px;
}

#workshop h2.kenkyukai{
	background:url(../img/workshop/title02.png) 0 0 no-repeat;
	padding: 10px 0 0 60px;
	font-size: 14px;
	font-weight: bold;
	color: #6CAD0A;
	height: 30px;
}

#workshop .details{
	padding: 20px 0 0 40px;
	margin-bottom: 50px;
}

#workshop .details p{
	margin-bottom: 10px;
}

#triage .ttl-tag {
	position: relative;
	padding: 6px;
	background: #e0edff;
	font-size: 16px;
}

#triage .ttl-tag::after {
	position: absolute;
 	 content: '';
	top: 100%;
	left: 30px;
	border: 10px solid transparent;
	border-top: 10px solid #e0edff;
	width: 0;
	height: 0;
}

#triage button {
	border: none;
	background: none;
	padding: 0;
}

#triage .check-thumb-list {
	display: flex;
	margin-top: 25px;
}

#triage .check-thumb-list li {
	margin-right: 28px;
}
.modal-open {
	cursor: pointer;
}
.modal-open:hover {
	filter: drop-shadow(0px 0px 4px rgba(0,0,0,0.6));
	transition: .1s;
	opacity: .8;
}

.modal {
	position: fixed;
	display: flex;
	align-items: center;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	border: none;
	opacity: 0;
	z-index: -1;
  }
  
  .modal-cover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
  }
  
  .modal-inner {
	width: 480px;
	border-radius: 10px;
	margin: auto;
	background: #fff;
	overflow-y: auto;
	z-index: 1;
  }

  .modal-ttl {
	  text-align: center;
	  font-size: 18px;
	  color: #fff;
	  background: #57483E;
	  padding: 10px 0;
  }

  .img-area {
	  padding: 20px 30px;
	  text-align: center;
  }

  .img-area>img {
	max-width: 100%;
  }	
  .description {
	padding: 0 35px;
  } 

  .disease-name {
	  font-size: 20px;
	  font-weight: bold;
	  background: #E1F3FD;
	  padding: 10px 0;
	  border-radius: 9999px;
	  text-align: center;
  }

  .text {
	  margin-top: 25px;
	  border: solid 1px #707070;
	  padding: 20px 40px;
	  border-radius: 5px;
	  position: relative;
  }

  .text::after {
	content: "";
	background: url(../img/triage/doctor-female.png) 0 0 / contain no-repeat;
	width: 81px;
	height: 67px;
	position: absolute;
	right: -30px;
	bottom: -25px;
  }

  .btn-wrap {
	text-align: center;
	margin: 30px 0;
}

.btn-wrap .btn {
	display: inline-block;
  background: #3D6B84;
  padding: 8px 25px;
  border-radius: 13px;
}   

.btn-wrap .btn button {
	color: #fff;
}   



  .modal.is-open {
	animation: modal_open 0.5s ease forwards;
  }
  .modal.is-open .modal-inner {
	animation: modal_inner_open 0.5s ease forwards;
  }
  .modal.is-close {
	animation: modal_close 0.5s ease forwards;
  }
  .modal.is-close .modal-inner {
	animation: modal_inner_close 0.5s ease forwards;
  }
  
  @keyframes modal_open {
	0% {
	  opacity: 0;
	}
	100% {
	  opacity: 1;
	  z-index: 10000;
	}
  }
  @keyframes modal_inner_open {
	0% {
	  opacity: 0;
	  transform: translateY(-20px);
	}
	100% {
	  opacity: 1;
	  transform: translateY(0);
	}
  }
  @keyframes modal_close {
	0% {
	  z-index: 10000;
	  opacity: 1;
	}
	100% {
	  opacity: 0;
	}
  }
  @keyframes modal_inner_close {
	0% {
	  opacity: 1;
	  transform: translateY(0);
	}
	100% {
	  transform: translateY(-20px);
	  opacity: 0;
	}
  }