@charset "utf-8";
#topappointment{
display:block;
margin-top:280px;
position:relative;
}
#topappointment p{}
#appcal-sp{
text-align: center;
}
.appcalendar{
	width:50vw;
	overflow-y: hidden;
	overflow-x: hidden;
	height: 300px;
	margin-left: 14vw;
	border-collapse:collapse;
	border:0px;
	
}
.appcalendar thead,
.appcalendar tbody{
  display: block;
   /*width:120%;*/
   width:100%;
}
.appcalendar th,.appcalendar td{
min-width: 5vw;

/*

white-space: nowrap;
*/
text-align:center;
}
#topappointment .box a{
background:#333333;
color: #FFFFFF;
display: block;
padding: 10px;
width:60vw;
z-index: 200;
margin: 20px auto;
position: relative;
}
#page-ndatail .submit-button{
	margin-right:140px;
}
.calnplink-sp{
width:60vw;
text-align: center;
font-family: 'BellL';
font-size: 26px;
margin: 0 auto;
}
.calnplink-sp #calnen{
width:100%;
text-align: left;
display:block;
font-size: 50px;
}
.calnplink-sp .konsyu{
clear:both;
}
.caldesc-sp{
width:90%;
text-align:left;
margin: 3vw auto 0;
}
.nowrap{
white-space: nowrap;
}
.caldesc-sp a{ z-index: 100;}


.appcalendar thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
}
.appcalendar tbody {
	display: block;
    overflow-y: scroll;
	overflow-x: hidden;
	height: 344px;
    table-layout: fixed;
}

.appcalendar button{
	width: 100%;
	line-height: 1;
	height: 25px;
	font-size: 22px;
	cursor: pointer;
	background:none;
	border: none;
	position: relative;
	padding: 0;margin:0;
	z-index:100;
	outline:0;
}
.appcalendar button span{
	font-size: 12px;
}

.cal-border-ccc{
	border:1px solid #999;
}
.cal-bg-red{
	/*background:#FFDDDD;*/
	background-color:rgba(254,220,220,0.5);
}
.cal-bg-blue{
	/*background:#87CEEB;*/
	background-color:rgba(135,206,235,0.5);
}
.cal-bg-white{
	background-color:rgba(255,255,255,0.5);
}
.cal-bg-green{background-color:rgba(171,255,127,0.5);}
.appcalendar th{
	background-color:rgba(0,0,0,0.8);
	color: #fff;
}
.cal-border-3{
border:1px solid #999;
border-top:3px solid #999;
}
.cal-border-4{
border-right:4px solid #999;
}


/*スクロールバー全体*/
#topappointment ::-webkit-scrollbar {
    width: 10px;
}

/*スクロールバーの軌道*/
#topappointment ::-webkit-scrollbar-track {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
}

/*スクロールバーの動く部分*/
#topappointment ::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 50, .5);
  border-radius: 10px;
  box-shadow:0 0 0 1px rgba(255, 255, 255, .3);
}
@media only screen and (max-width:1350px){
.appcalendar th,.appcalendar td{width: 4vw;}
}
@media only screen and (max-width:1020px){
#topappointment{
padding-top:200px;
}
}
@media only screen and (max-width:900px){
/*.appcalendar{width:86vw;margin-left: 6vw;}
.appcalendar th,.appcalendar td{width: 5vw;}*/
.appcalendar th,.appcalendar td{width: 34x;}
.tht{min-width: 60px !important;}
.appcalendar button{
	font-size: 18px;
}
}
@media only screen and (max-width:650px){

/*.appcalendar{width:90vw;margin: auto;}*/
.appcalendar{width:500px;margin: auto;}
.appcalendar th,.appcalendar td{width: 32x;}

.calnplink-sp{
width:90vw;
}
#topappointment .box a{
font-size:18px;
}
}
@media only screen and (max-width:580px){

.appcalendar{width:500px;}
.appcalendar th,.appcalendar td{width: 30px;}
}
@media only screen and (max-width:520px){

.appcalendar{
width:370px;
height: 200px;
}
.appcalendar tbody {
height: 244px;
}
.appcalendar th,.appcalendar td{width: 24px;}
}
@media only screen and (max-width:430px){
.appcalendar th,.appcalendar td{width: 20px;}
}
@media only screen and (max-width:400px){
.appcalendar{
width:300px;
}
.appcalendar th,.appcalendar td{width: 14px;}
.tht{min-width: 40px !important;}
.appcalendar button{
	font-size: 14px;
}
.calnplink-sp{
font-size: 20px;
}
}