hr{
	background:rgba(255, 255, 255, 0.5);
	margin:0;
	border:none;
	height:2px;
}
.予定{
	color:#aaa;
}
.土曜{
	color:blue;
}
.日曜{
	color:red;
}
.event{
	margin-top:30px;
	width:200px;
	position:relative;
}
.event:after{
	content:"";
	border-top:6px solid rgba(0, 0, 0, 0.3);
	border-left:6px solid transparent;
	border-right:6px solid transparent;
	top:20px;
	right:12px;
	position:absolute;
	pointer-events:none;
}
.event select{
	font-size:18px;
	font-weight:bold;
	color:#0172d3;
	background:#fff;
	line-height:40px;
	padding:0 10px;
	border:none;
	border-bottom:1px solid rgba(0, 0, 0, 0.3);
	width:100%;
	border-radius:0;
	appearance:none;
	-webkit-appearance:none
}
.event select:focus{
	outline:none;
	border-bottom:1px solid rgba(0,0,0, 0);
}
.event select:focus ~ .event_label, .event select:valid ~ .event_label{
	font-size:13px;
	color:#555;
	top:-17px;
	left:0;
	transition:0.2s ease all;
}
.event_label{
	font-size:15px;
	color:#0172d3;
	line-height:25px;
	top:10px;
	left:10px;
	position:absolute;
	transition:0.2s ease all;
	pointer-events:none;
}
.event_reset{
	text-align:right;
	padding-right:5px;
}
.event_reset a{
	font-size:14px;
	color:tomato;
}
.timeline{
	margin-top:30px;
	position:relative;
}
.timeline:before{
	content:"";
	background:#ddd;
	top:15px;
	bottom:0;
	left:110px;
	width:10px;
	position:absolute;
	border-radius:50px;
}
.timeline li{
	position:relative;
}
.timeline li:not(:last-child){
	margin-bottom:60px;
}
.月{
	font-size:25px;
	font-weight:bold;
	color:#333;
	background:#fff;
	text-align:center;
	letter-spacing:5px;
	border:10px solid #ddd;
	padding:28px 0 28px 5px;
	width:100px;
	border-radius:100px;
}
.月 div{
	font-size:15px;
	font-weight:normal;
	color:#777;
}
.旧表示{
	font-weight:bold;
	padding-top:15px;
}
.timeline .date{
	text-align:right;
	margin-top:12px;
	position:absolute;
}
.timeline .date div:nth-of-type(1){
	font-size:20px;
}
.timeline .date div:nth-of-type(2){
	font-size:14px;
}
.timeline .milestone{
	background:#377dbf;
	margin:0 0 0 -15px;
	left:120px;
	width:20px;
	height:20px;
	position:absolute;
	border-radius:50%;
	box-shadow:0 0 0 6px #ddd;
}
.timeline .list{
	color:#fff;
	background:#377dbf;
	margin-left:160px;
	padding:5px 10px;
	display:flow-root;
	position:relative;
	border-radius:10px;
}
.timeline .list_img img{
	position:absolute;
}
.timeline .list_title{
	font-size:20px;
	font-weight:bold;
}
.timeline .list_title .cancel{
	font-size:18px;
	color:#fff;
	background:#ff0000;
	margin-right:10px;
	border:2px solid #dd0000;
	padding:3px 6px;
	border-radius:5px;
	text-shadow:-1px -1px 0 #aa0000;
	box-shadow:1px 1px 0 #990000;
}
.timeline .list:after{
	content:"";
	border-style:solid;
	border-color:transparent #377dbf transparent transparent;
	border-width:8px 15px 8px 0;
	top:18px;
	right:100%;
	position:absolute;
}
.timeline .list a{
	background:#fff;
	line-height:100%;
	margin:0 3px;
	padding:3px 8px;
	display:inline-block;
	border-radius:5px;
}
.detail{
	margin:15px 0 0 25px;
}
.detail:before{
	content:"\e154";
	font-family:"Material Icons";
	font-size:20px;
	color:#fff;
	line-height:25px;
	left:30px;
	position:absolute;
}
.group{
	font-size:12px;
	bottom:5px;
	right:10px;
	position:absolute;
	opacity:0.75;
}
#旧{
	display:none;
}
#旧 img{
	filter:grayscale(100%);
	-moz-filter:grayscale(100%);
	-webkit-filter:grayscale(100%);
}
#旧 .milestone, #旧 .list{
	color:#999;
	background:#eee;
}
#旧 .list:after{
	border-color:transparent #eee transparent transparent;
}
@media (max-width:767px){
	hr{
		width:calc(100% - 30px);
	}
	.timeline:before{
		left:0;
	}
	.timeline ul{
		margin-left:30px;
	}
	.旧表示{
		text-align:right;
	}
	.timeline .date{
		text-align:left;
		padding:0 0 20px 0;
		position:relative;
	}
	.timeline .date > div:nth-child(-n + 2){
		display:inline-block;
	}
	.timeline .date > div:nth-of-type(2){
		margin-left:2px;
	}
	.timeline .date > div:nth-of-type(3){
		line-height:22px;
		margin-left:115px;
		top:0;
		position:absolute;
	}
	.timeline .milestone{
		top:3px;
		left:-20px;
	}
	.timeline .list{
		margin:0;
	}
	.timeline .list:after{
		border-width:8px 8px 15px 8px;
		border-color:transparent transparent #377dbf transparent;
		top:-22px;
		left:20px;
	}
	.timeline .list_img img{
		top:-35px;
		right:-15px;
		width:75px;
	}
	.timeline .list_title{
		padding:10px 5px 12px 10px;
	}
	.timeline .list_msg{
		padding:10px 20px 20px 20px;
	}
	.timeline #旧 .list:after{
		border-color:transparent transparent #eee transparent;
	}
}
@media (min-width:768px){
	hr{
		width:calc(100% - 100px);
	}
	.月{
		margin-left:50px;
	}
	.旧表示{
		margin-left:130px;
	}
	.timeline .date{
		width:92px;
	}
	.timeline .date div:nth-of-type(3) div{
		font-size:13px;
	}
	.timeline .milestone{
		top:17px;
	}
	.timeline .list_img img{
		top:-25px;
		right:10px;
		width:100px;
		-webkit-filter:drop-shadow(2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 -2px 0 #fff);
	}
	.timeline .list_title{
		padding:10px 5px 15px 10px;
	}
	.timeline .list_msg{
		padding:10px 100px 10px 20px;
	}
}