.chronology{position:relative;display:flex;flex-direction:row;background:#eee;width:100%;padding-right:100px;aspect-ratio:16 / 9;overflow-y:scroll;overflow-x:hidden}.chronology_wrap{overflow:scroll;position:relative}.arrow{content:"";position:absolute;width:10px;height:20px;background:#666;clip-path:polygon(100% 0%,100% 100%,0% 50%)}.years{padding:0 20px;font-size:12px;position:relative;border-right:#66666666 solid 1px;z-index:2;background-color:#eee}.years.history{padding:0 26px;z-index:1}.year:after{content:"";position:absolute;top:9px;left:36px;width:calc(100vw + 100px);height:1px;background-color:#6666;z-index:2}.years.history .year:after{left:48px}.works{display:flex}.work{writing-mode:vertical-rl;white-space:nowrap;display:flex;align-items:center;cursor:pointer}.work:after{content:"";width:1px;height:100%;background-color:#dc2128}.work.active:after{box-shadow:0 0 2px 1px #dc2128}.work_content{display:flex;flex-direction:row;align-items:center;background:#eeeeee9e}.work_content:before{content:"";position:absolute;top:-10px;width:10px;height:10px;background-color:#dc2128;border-radius:5px}.detail{background:#fff;border:solid 1px #66666666;box-shadow:2px 2px 1px #6666;writing-mode:horizontal-tb;position:absolute;top:100px;z-index:10;padding:5px}.detail p{margin:0;padding:0}.comment_area{display:flex;margin-top:10px;align-items:center}.comment_area input{width:200px;height:40px;padding:5px;box-sizing:border-box;border:solid 1px #eee;border-radius:5px 0 0 5px}.comment_area button{display:flex;justify-content:center;align-items:center;padding:0 5px}.comment_area button.send{width:50px;height:40px;border:solid 1px #eee;border-radius:0 5px 5px 0;background-color:#eee}.comment_area button.send img{width:30px;height:30px}.comment_area button.birthday,.comment_area button.x_share,.comment_area button.toggle_comments{min-width:30px;height:30px}.comment_area button.birthday{background-color:#fff;border:solid 1px #000;border-radius:5px;margin-right:8px}.comment_area button.birthday img{width:24px}.comment_area button.x_share{background-color:#000;border-radius:5px;margin-right:8px}.comment_area button.x_share img{width:15px}.comment_area button.toggle_comments{background-color:#999;border-radius:5px}.comment_area button.toggle_comments img{width:20px}.comment_layer{position:absolute;top:0;left:0;width:100%;pointer-events:none;z-index:99;overflow:hidden}.floating_comment{color:#fff;font-weight:700;font-size:20px;pointer-events:none;-webkit-text-stroke:2px black;paint-order:stroke}@keyframes move-left{0%{transform:translate(100vw)}50%{transform:translate(-100%)}to{transform:translate(-200vw)}}.loading_overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#dc2128;z-index:1000;display:flex;justify-content:center;align-items:center;transition:opacity .5s;opacity:1}.birthday_modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:999}.birthday_modal .modal_content{width:80vw;max-width:500px;display:flex;background:#fff;padding:1rem;flex-direction:column;align-items:center;position:relative;border-radius:10px}.birthday_modal .modal_content h2{margin:0;font-size:24px;color:#333}.birthday_modal .modal_content .discription p{margin:0}.birthday_modal .modal_content select{width:90px;margin:0 5px;padding:8px;border-radius:5px;color:#666}.birthday_modal .modal_content .close_button{position:absolute;top:10px;right:10px}.birthday_modal .modal_content .close_button button{background:none;font-size:24px;cursor:pointer;color:#777;border:solid 2px #777;border-radius:50%;padding:0 7px}.birthday_modal .modal_content .button_area{display:flex;justify-content:center;margin-top:30px}.birthday_modal .modal_content .button_area button{height:40px;padding:10px 20px;border-radius:20px;cursor:pointer}.birthday_modal .modal_content .cancel_button button{background:#fff;color:#666;border:solid 1px #666;margin-right:20px}.birthday_modal .modal_content .ok_button button{background:#dc2128;color:#fff;border:solid 1px #DC2128}small.note{color:#666;font-size:12px}