@charset "utf-8";
/* CSS Document */
.month{display:block;width: 100%;padding: 0.5em 0;}
.month::after{content:" ";clear: both;display: block;}
.month form{display: flex;flex-wrap: wrap;width: 100%;}
.month label{display:block;margin: 0 0 0.5em 0.5%;flex: 1 1 4em;}
.month label.year{flex: 2 2 6em;}

.month label.year span{display: block}
.month label span.newyear{display:none;}
.month label span.thisyear::after,
.month label span.newyear::before{content:" ";display: inline-block;border-top:2px solid #000;border-left:2px solid #000;width:0.5em;height:0.5em;margin: 0 0 0.05em 0;line-height: 0}
.month label span.thisyear::after{transform: rotate(135deg)}
.month label span.newyear::before{transform: rotate(-45deg)}
.month input[type='radio'],
.month input[type='checkbox']{display: none}
.month label > span,
.month label > span{color:#999;opacity: 0.6;display: block;padding: 0.2em 0; width: 100%;text-align: center;border: 1px solid #CCC;background: #FFF}

.month input[type='radio'] + span,
.month input[type='checkbox'] + span{cursor: pointer;color:#000;opacity:1;border: 1px solid #CCC;background: #FFF}
.month label:hover input[type='radio'] + span,
.month label:hover input[type='checkbox'] + span{background: #EEE}
#cse-search-box input[type='radio']:checked + span{border: 1px solid #Fa0;background: #FC0}
.inhere input[type='radio'] + span, .inhere input[type='checkbox'] + span{
    border: 1px solid #Fa0;
    background: #FC0;
}
.month label.year input[type='checkbox'] + span{background: #EEE}
.month label.year input[type='checkbox']:checked + span span{display:none}
.month label input[type='checkbox']:checked + span span.newyear{display:block;}

.timeline{position: relative;line-height: 1.5em}
.timeline::before{content:" "; position: absolute; background: #FC0;width:5px; height: 100%;top: 0;bottom: 0; left: 240px;z-index: 3}

.timeline .list{position: relative; padding:2.5em 0 0 0;opacity: 0;display: none;transition:opacity 1.5s}
.timeline .list img{}
.timeline .list.up1 {opacity: 1;}
.timeline .list.up2 {display:block;}
.timeline .list::before{content:" ";clear: both;display: block;}

.timeline .list::after,
.day,
.txt{display:block;vertical-align: top;position: relative;}
.timeline .list::after{content:" ";}
.day{margin:0 83px 0 0;float: left;width:200px;text-align: right;z-index:4;}
.day::before{display:block;vertical-align: top;float:right;position:absolute;top:0.15em;right: -53px; font-size:21px;content:" ";width: 1em; height: 1em; border-radius: 50%;border:5px solid #FC0;background: #FFF;}
.txt{overflow: hidden; padding: 0 0 2.5em 0;margin: 0 1.5em 0 0;border-bottom: 1px dashed #ccc}
.txt h3{margin: 0 0 0.3em;}
.txt p{margin: 0 0 0.8em;}
.txt img{display: block;width: auto;max-width: 100%;}
.timeline .s_link{display: block; position: absolute;top: 0;left:240px;right: 0; height: 100%;z-index: 2;background-color: rgba(255, 255, 10, 0);transition:background-color 0.5s; }
.timeline .list:hover .s_link{background-color: rgba(255, 255, 10, 0.1)}
.timeline .list:hover .day{color: #c00;}



@media screen and (max-width:768px) {
.timeline{padding: 0 2%}
.timeline::before{left:4%;}
.timeline .s_link{left:0;}
.day{float: inherit; text-align: left;width: auto;margin: 0 0 0 8%;}
	.day::before{left: -6%;margin:0 0 0 -10px}
.txt{padding: 0.3em 0 2.5em 0;margin: 0 0.6em 0 8%;}
.month label{margin: 0 0  0.5em 1%;}
.month label:first-child{margin: 0 0 1% 1%;}
}
@media screen and (max-width:500px) {
.month label{margin: 0 0  0.5em 1.5%;}
.month label:first-child{margin: 0 0 0.5em 1.5%;}
}