#archive_blog{width:800px;margin:0 auto;padding:100px 0 150px}.search_result_headline{margin:0 0 40px;font-size:16px;font-weight:700}#blog_list{margin:0 0 -10px}#blog_list .item{margin:0 0 90px;position:relative}#blog_list .item:last-of-type{margin:0}#blog_list .link{z-index:2;width:100%;height:485px;display:block;position:relative;overflow:hidden}#blog_list .image{z-index:2;backface-visibility:hidden;background-position:50%;background-size:cover;width:100%;display:block;position:absolute;overflow:hidden;height:100%!important}#blog_list .title_area{z-index:5;box-sizing:border-box;color:#fff;padding:25px 30px;transition:color .2s;position:absolute;bottom:0;left:0}#blog_list a:hover .title_area{color:#ccc}#blog_list .overlay{z-index:3;background:linear-gradient(#0000,#000c);width:100%;height:50%;position:absolute;bottom:0;left:0}#blog_list .category{z-index:10;position:absolute;top:30px;left:-20px}#blog_list .category a{color:#fff;text-align:center;box-sizing:border-box;background:#0b0a0b;min-width:130px;height:35px;padding:0 15px;font-size:12px;line-height:35px;display:none}#blog_list .category a:hover{background:#13161b}#blog_list .category a:first-child{display:inline-block}#blog_list .category:before{content:"";border-top:0 solid #0000;border-bottom:20px solid #0000;border-left:0 solid #0000;border-right:20px solid #aaa;width:0;height:0;display:block;position:absolute;bottom:-20px;left:0}#blog_list .title{max-height:3em;font-size:26px;font-weight:700;line-height:1.5;overflow:hidden}#blog_list .title span{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box}#blog_list .date{margin:0 0 10px;padding-left:18px;font-size:14px;line-height:1;position:relative}#blog_list .date:before{content:"";font-family:design_plus;font-size:14px;position:absolute;top:1px;left:0}#blog_list .excerpt{color:#000;max-height:5em;margin:20px 0 0;font-size:16px;line-height:2.5;overflow:hidden}#blog_list .excerpt span{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box}.page_navi{z-index:10;margin:100px 0 -4px;position:relative}.page_navi ul{text-align:center;margin:0;font-size:0}.page_navi li{margin:0 4px 4px 0;display:inline-block}.page_navi a,.page_navi a:hover,.page_navi span{color:#000;text-align:center;box-sizing:border-box;background:#fff;border:1px solid #ddd;width:45px;height:45px;margin:0;font-size:14px;line-height:45px;display:inline-block}.page_navi a:hover{color:#fff;background:#13161b;border-color:#13161b}.page_navi span.dots{color:#333;background:0 0}.page_navi span.current{color:#fff;background:#13161b;border-color:#13161b}.page_navi .next span,.page_navi .prev span{display:none}.page_navi .next:before,.page_navi .prev:before{font-family:design_plus;font-size:11px;line-height:11px;position:relative;top:0}.page_navi .prev:before{content:""}.page_navi .next:before{content:""}.page_navi .prev:hover:before,.page_navi .next:hover:before{color:#fff}@media (width<=900px){#archive_blog{width:auto;padding:100px 30px 150px}.page_navi{margin:0 26px -4px;padding:50px 0 0}}@media (width<=750px){.page_navi{margin:0 0 -4px;padding:40px 0 0}.page_navi .next,.page_navi .prev{display:none}.page_navi a,.page_navi a:hover,.page_navi span{width:40px;height:40px;line-height:40px}.page_navi li:first-child,.page_navi li:last-child,.page_navi li:nth-last-child(2){margin:0}}@media (width<=650px){#archive_blog{padding:40px 20px}#blog_list .item{margin:0 0 30px}#blog_list .link{height:300px}#blog_list .title_area{padding:16px 20px}#blog_list .title{font-size:20px}#blog_list .category{top:20px;left:-10px}#blog_list .category:before{border-width:0 10px 10px 0;bottom:-10px}#blog_list .excerpt{max-height:6.9em;margin:10px 0 0;font-size:14px;line-height:2.3}#blog_list .excerpt span{-webkit-line-clamp:3}}@media (width<=450px){#blog_list .link{height:195px}}@media (width<=650px){#blog_list .item{grid-template-areas:"title""image""excerpt";margin:0 0 50px;display:grid}#blog_list .link{display:contents}#blog_list .title_area{color:#000;grid-area:title;padding:0 0 15px;position:static}#blog_list a:hover .title_area{color:#666}#blog_list .date{color:#999;margin:0 0 10px}#blog_list .title{max-height:none;font-size:20px;font-weight:500;line-height:1.3}#blog_list .title span{display:inline}#blog_list .image{grid-area:image;position:relative;height:300px!important}#blog_list .overlay{display:none}#blog_list .category{grid-area:image;place-self:start;position:relative;top:20px;left:-10px}#blog_list .excerpt{grid-area:excerpt}}@media (width<=450px){#blog_list .image{height:200px!important}}.animate_background .image{transition:transform .75s}.animate_background:hover .image{transform:scale(1.2)}