@charset "UTF-8";

body > .page-header{height:220px;}
body > .page-header > .title-image{background-image:url(../img/blog/title.png);}
body > .page-header > .title-image a{display:block;width:120px;height:100%;margin:0 auto;}
body > .page-header > .description{font-size:18px;margin-top:60px;line-height:1;}

main .main-inner section.body article h1{margin-bottom:20px;}
main .main-inner section.body article .tags{margin-bottom:20px;}
main .main-inner section.body article .tags a{font-size:12px;color:#222;}

main .main-inner section.body aside{width:250px;box-sizing:border-box;}
main .main-inner section.body aside .aside-box{padding:27px 17px;border:4px solid #eeeeee;margin-bottom:40px;}
main .main-inner section.body aside .aside-box *{color:#222;}
main .main-inner section.body aside .aside-box h3{margin-bottom:1.5em;font-size:16px;line-height:1;text-align:center;}
main .main-inner section.body aside .aside-box dl{margin-top:1em;font-size:14px;line-height:1.6;}
main .main-inner section.body aside .aside-box dl *{line-height:1.6;}
main .main-inner section.body aside .aside-box dt{font-weight:bold;}
main .main-inner section.body aside .aside-box dd a{display:block;text-decoration:none;}

main .main-inner section.body aside .aside-box.wpp_list{counter-reset:wpp_list;}
main .main-inner section.body aside .aside-box.wpp_list dl dt:before{counter-increment:wpp_list;content:counter(wpp_list);}

main .main-inner section.body aside .aside-box.tag_list{font-size:14px;}
main .main-inner section.body aside .aside-box.tag_list li{display:inline;margin-right:5px;}
main .main-inner section.body aside .aside-box.tag_list li a{text-decoration:underline}

main .main-inner section.body aside .aside-box.month_list{font-size:14px;}
main .main-inner section.body aside .aside-box.month_list > ul li.year{padding-left:18px;position:relative;}
main .main-inner section.body aside .aside-box.month_list > ul li.year.open::before{content:'';position:absolute;top:10px;left:0;width:0;height:0;border:7px solid rgba(0,0,0,0);border-top:7px solid #aaa;}
main .main-inner section.body aside .aside-box.month_list > ul li.year::before{content:'';position:absolute;top:6px;left:6px;width:0;height:0;border:7px solid rgba(0,0,0,0);border-left:7px solid #aaa;}
main .main-inner section.body aside .aside-box.month_list > ul li.year > ul{display:none;}

#RELATED-POST{margin-top:80px;padding:40px 30px 20px 30px;background-color:#edf4f5;}
#RELATED-POST h2{font-size:18px;line-height:1;text-align:center;}
#RELATED-POST .post{display:flex;justify-content:space-between;padding-bottom:20px;text-decoration:none;color:#222;}
#RELATED-POST .post .left-col{width:130px;min-height:80px;font-size:0;}
#RELATED-POST .post .left-col .thumb:empty{background-color:white;width:130px;height:80px;}
#RELATED-POST .post .right-col{width:465px;flex-shrink:0;}
#RELATED-POST .post .right-col .date{font-size:14px;line-height:1;margin-bottom:5px;}
#RELATED-POST .post .right-col .title{font-size:16px;line-height:1.6;font-weight:bold;}

#AUTHOR-SECTION{position:relative;display:flex;flex-flow:column wrap;padding:32px 28px;margin-top:44px;border:4px solid #eee;font-size:14px;}
#AUTHOR-SECTION .avatar{position:absolute;left:28px;top:32px;width:90px;height:90px;}
#AUTHOR-SECTION .avatar img{position:absolute;left:0;top:0;}
#AUTHOR-SECTION .title,
#AUTHOR-SECTION .description,
#AUTHOR-SECTION .link{margin-left:110px;}
#AUTHOR-SECTION .title{font-weight:bold;font-size:16px;}
#AUTHOR-SECTION .description{line-height:1.4;}
#AUTHOR-SECTION .link a{color:#222;}

@media (max-width:750px) {
    body > .page-header{height:57.3333vw;}
    body > .page-header > .title-image a{width:30vw;}
    body > .page-header > .description{font-size:3.7333vw;margin-top:8vw;line-height:1.8;}

    main .main-inner section.body{font-size:4vw;display:block;padding-bottom:5.0666vw;}
    main .main-inner section.body article h1{font-size:4.8vw;}
    main .main-inner section.body article .tags{font-size:0;}
    main .main-inner section.body article .tags a{display:inline-block;margin:0 0.8vw 1.8666vw 0;padding:0 1.3333vw;line-height:6.2666vw;text-decoration:none;font-size:3.2vw;color:#222;background-color:#eee;}

    main .main-inner section.body aside{width:100%;}
    main .main-inner section.body aside .aside-box{padding:6.6666vw 4vw;border:1.0666vw solid #eeeeee;}
    main .main-inner section.body aside .aside-box h3{font-size:5.3333vw;}
    main .main-inner section.body aside .aside-box dl{font-size:3.2vw;}

    main .main-inner section.body aside .aside-box.tag_list{font-size:4vw;}
    main .main-inner section.body aside .aside-box.tag_list li{margin-right:2vw;}
    main .main-inner section.body aside .aside-box.tag_list li a{text-decoration:none;}

    main .main-inner section.body aside .aside-box.month_list{font-size:4vw;}
    main .main-inner section.body aside .aside-box.month_list > ul li.year{padding-left:5vw;}
    main .main-inner section.body aside .aside-box.month_list > ul li.year.open::before{top:3vw;left:0;border:2vw solid rgba(0,0,0,0);border-top:2vw solid #aaa;}
    main .main-inner section.body aside .aside-box.month_list > ul li.year::before{top:2vw;left:2vw;border:2vw solid rgba(0,0,0,0);border-left:2vw solid #aaa;}

    main .main-inner section.body aside .aside-box.author_list{margin-bottom:0;}

    #RELATED-POST{margin-top:14vw;padding:9.3333vw 6.6666vw 5.3333vw 6.6666vw;}
    #RELATED-POST h2{font-size:5.3333vw;line-height:1;}
    #RELATED-POST .post{padding-bottom:5.3333vw;}
    #RELATED-POST .post .left-col{width:20vw;min-height:12vw;}
    #RELATED-POST .post .left-col .thumb:empty{width:20vw;height:12vw;}
    #RELATED-POST .post .right-col{width:42.6666vw;flex-shrink:0;}
    #RELATED-POST .post .right-col .date{font-size:3.7333vw;}
    #RELATED-POST .post .right-col .title{font-size:3.7333vw;line-height:1.34;}

    #AUTHOR-SECTION{position:static;display:flex;flex-flow:row wrap;padding:6.2666vw 5.6vw;margin-top:10.6666vw;margin-bottom:8vw;border:1.0666vw solid #eee;font-size:3.2vw;}
    #AUTHOR-SECTION .avatar{position:static;width:21.3333vw;height:21.3333vw;}
    #AUTHOR-SECTION .avatar img{position:static;}
    #AUTHOR-SECTION .title{margin-left:2.6666vw;width:41.3333vw;font-weight:bold;font-size:4vw;line-height:1.2;}
    #AUTHOR-SECTION .title span{margin-left:0;}
    #AUTHOR-SECTION .description{margin-left:0;width:65.3333vw;}
    #AUTHOR-SECTION .link{margin-left:0;width:65.3333vw;}
}