@charset "UTF-8";
/* ***********************************************************************
    Shimura Orthopaedic Clinic - <Calendar>
*********************************************************************** */
table {
	width  : 100%;
	padding: 0;
	border : solid 2px #009de1 !important;
	border-collapse: separate !important;
	overflow: hidden;
} 
#calendar #naika,
#month,
#week {
	background    : #009de1;
	color         : #fff;
	text-align    : center;
	vertical-align: middle;
	font-family   : "Lucida Grande", "segoe UI", "ヒラギノ丸ゴ ProN W4", "Hiragino Maru Gothic ProN", Meiryo, Arial, sans-serif;
}
#week {
	background: #bdbdbd;
}
#calendar #naika {
	width           : 6%;
	vertical-align  : middle;
	text-align      : center;
	font-size       : 20px;
	padding-right   : 1px;
	-ms-writing-mode    : tb-rl;
	-webkit-writing-mode: vertical-rl;
	writing-mode        : vertical-rl;
	margin              : 0;
	line-height         : 1.0;
}
@-moz-document url-prefix() {
#calendar #naika {
		line-height: 2.5;
	}
}

#calendar #naika img {
	display: block;
	max-width: 90%;
	width: auto;
	height: auto;
	vertical-align: middle;
	margin-left: auto;
	margin-right: auto;
}
/********************
	Month
*********************/
#month td,
#month th {
	height        : 32px;
	vertical-align: middle;
}
#month th {
	font-size: 120%;
}
#month td a {
	display       : block;
	width         : 18px;
	height        : 18px;
	text-align    : center;
	color         : #fff;
	font-size     : 10px;
	line-height   : 18px;
	border        : solid 1px #fff;
	border-radius : 9px;
}
#month td:first-child,
#week th:first-child {
	border-left: none;
}

/********************
	Week
*********************/
#week th {
	width      : 12%;
	line-height: 28px;
	border-top : solid 2px #fff;
	border-left: solid 1px #fff;
}

/********************
	Day
*********************/
.day {
	overflow  : hidden;
	min-height: 40px;
}
.day td {
	border-left: solid 1px #bdbdbd;
	border-top : solid 1px #bdbdbd;
	padding    : 4px;
	text-align : left;
	font       : normal 14px Arial, Helvetica, sans-serif;
}
.day td:first-child {
	border-left: none;
}
.day td .schedule{
 display: inline;
}
.day td p {
 display      : block;
 margin-top   : 4px;
 margin-bottom: 0;
 padding      : 4px;
 color        : #fff;
 font-size    : 11px;
 line-height  : 1.25em;
 border-radius: 4px;
 position: relative;
 cursor: pointer;
}
.day td p b{
 font-weight: normal;
}
.day td p .tooltip{
 position: absolute;
 transition: all 0.3s ease 0s;
 opacity: 0;
 bottom: 0;
 left: 0;
 display: block;
 padding      : 6px 4px 4px;
 font-size : 11px;
 line-height  : 1.3em;
 color: #ffffff;
 border-radius: 3px;
 background: #1b2538;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 z-index: 10;
 width: 100%;
}
#calendar .day td p:hover .tooltip{
	bottom: 110%;
	opacity: 1;
}
.day td.other p{
	pointer-events: none;
}
.day td.other p:hover{
 display: none;
}
@media (max-width:700px) {
	.day td p b{
 font-weight: normal;
 word-break: break-all;
 overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-line-clamp: 3;
 -webkit-box-orient: vertical;
 max-height: calc(13px*3);
 }
.day td p .tooltip{
 left: -60%;
 padding: 0.5em 0.4em 0.4em;
 font-size : 1.2em;
 width: 230%;
 z-index: -1;
}
#calendar .day td p:hover .tooltip{
	bottom: 0;
	opacity: 0;
}
#calendar .day td p.active .tooltip,
#calendar .day td p.active:hover .tooltip{
	bottom: 110%;
	opacity: 1;
 z-index: 10;
}
}



/********************
	Style [ td ]
*********************/
/**▼先月・来月**/
.other {
	background: #f8f8f8;
	color     : #ccc;
}
.other .consultation,
.other .consult_attention,
.other .closed,
.other .notice01,
.other .notice02,
.other.holiday .day_str{
	opacity : 0.3;
	filter  : alpha(opacity=30);
}
/**▼今日**/
.today {
	background: #fff8d8;
}
/**▼日曜・祝日**/
.holiday {
	background: #ffecd9;
	color     : #ee7700;
}

/********************
	Style [ p ]
*********************/
/**▼診療日**/
.consultation {
	background: #f3a04d;
	text-align: left;
}
.consult_attention { /* ←220418 追加 */
	color     : #ffff00 !important;
	background: #f3a04d;
	text-align: left;
}
/**▼休診日**/
.closed {
	background: #ccc;
	text-align: center !important;
}
/**▼連絡事項**/
.notice01 {
	background: #90caec;
	text-align: left;
}
.notice02 {
	background: #98cc97;
	text-align: left;
}


/*************************
	開発側で追加
*****************************/
/*-----------------------
	入力モーダル
--------------------------*/
.popup{
	z-index:110;
	position:absolute;
	background-color:#fff;
	display:none;
	border:solid thin #ccc;
	padding:0;
 width: 300px;
}
.popup .popup_header{
	background-color:#4078cd;
	padding:7px 5px 5px 5px;
	height:20px;
}
.popup .popup_header span{
 font-size: 15px;
 line-height: 120%;
 color: #fff;
}
.popup .popup_footer_btn{
 width: 100%;
 text-align: right;
}
.popup .popup_header .popup_close{
	position:absolute;
	top:5px;
	right:5px;
}
.popup .popup_inner{
	overflow:scroll;
	background-color:#fff;
	padding:10px;
	height:100%;
}
.popup .popup_inner select,
.popup .popup_inner .schedule_content{
 padding: 5px;
 width: 100%;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 font-size: 15px;
}
.popup .popup_inner select{
 margin: 5px 0;
}
.popup .popup_inner .schedule_content{
	height:120px;
}
#modal_overlay{
	background-color:black;
	filter:alpha(opacity=50);
	-moz-opacity: 0.5;
	opacity: 0.5;
	z-index:100;
	position:absolute;
	left:0;
	top:0;
}