@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 .articles > h2{padding-bottom:38px;text-align:center;font-size:26px;color:#2c99a7;line-height:1.2;word-break:normal;}


main .main-inner section.body{display:flex;justify-content:space-between;padding-bottom:38px;font-size:15px;word-break:normal;}

main .main-inner section.body .articles{width:680px;word-break:normal;}
main .main-inner section.body .articles article{display:flex;justify-content:space-between;padding-bottom:30px;margin-bottom:32px;border-bottom:1px solid #ccc;}
main .main-inner section.body .articles article .left-col{width:200px;}
main .main-inner section.body .articles article .left-col .thumb{box-sizing:border-box;width:200px;height:auto;min-height:122px;font-size:0;margin-bottom:15px;}
main .main-inner section.body .articles article .left-col .thumb img{width:200px;height:auto;border:1px solid #d6d6d6;}
main .main-inner section.body .articles article .left-col .tags{font-size:0;}
main .main-inner section.body .articles article .left-col .tags a{display:inline-block;font-size:12px;background-color:#eee;line-height:1;padding:5px;margin-right:3px;margin-bottom:8px;}

main .main-inner section.body .articles article .right-col{width:458px;}
main .main-inner section.body .articles article .right-col .date{font-size:14px;}
main .main-inner section.body .articles article .right-col h2{line-height:1.2;margin-bottom:12px;}
main .main-inner section.body .articles article .right-col h2 a{font-size:22px;line-height:1.2;}
main .main-inner section.body .articles article .right-col .excerpt p{line-height:1.6;}
main .main-inner section.body .articles article .right-col .show-the-post{margin-top:12px;}
main .main-inner section.body .articles article .right-col .show-the-post a{display:block;color:white;width:90px;line-height:29px;background-color:#333;font-size:12px;text-align:center;}

main .main-inner section.body .articles .page-navi{background-color:white;display:flex;justify-content:space-around;}
main .main-inner section.body .articles .page-navi .wp-pagenavi{display:flex;justify-content:flex-start;align-items:center;margin-bottom:62px;font-size:16px;font-weight:bold;}
main .main-inner section.body .articles .page-navi .wp-pagenavi .current,
main .main-inner section.body .articles .page-navi .wp-pagenavi a{line-height:40px;text-align:center;margin:0 3px;padding:0 4px;}
main .main-inner section.body .articles .page-navi .wp-pagenavi .current{color:white;background-color:#2c99a7;}

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;}

@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:10vw;line-height:1.8;}

    /* アーカイブ用 */
    main .main-inner section.body .articles > h2{padding-bottom:5.0666vw;font-size:5.0666vw;}

    main .main-inner section.body{display:block;padding-bottom:15vw;font-size:4vw;}

    main .main-inner section.body .articles{width:100%;}
    main .main-inner section.body .articles article{display:block;padding-bottom:8vw;margin-bottom:8vw;border-bottom:0.5333vw solid #ccc;}
    main .main-inner section.body .articles article .left-col{width:100%;display:flex;}
    main .main-inner section.body .articles article .left-col .thumb{flex-grow:0;flex-shrink:0;width:29.3333vw;height:auto;min-height:18.1333vw;font-size:0;margin-right:2.6666vw;margin-bottom:5.7333vw;}
    main .main-inner section.body .articles article .left-col .thumb img{width:100%;}
    main .main-inner section.body .articles article .left-col .tags{font-size:0;flex-grow:1;}
    main .main-inner section.body .articles article .left-col .tags a{display:inline-block;font-size:3.2vw;background-color:#eee;line-height:1;padding:1.6vw;margin-right:0.8vw;margin-bottom:1.4666vw;}
    
    main .main-inner section.body .articles article .right-col{width:100%;}
    main .main-inner section.body .articles article .right-col .date{font-size:3.7333vw;}
    main .main-inner section.body .articles article .right-col h2{line-height:1.1;margin-bottom:1.6vw;}
    main .main-inner section.body .articles article .right-col h2 a{font-size:4.8vw;line-height:1.1;}
    main .main-inner section.body .articles article .right-col .excerpt p{line-height:1.6;}
    main .main-inner section.body .articles article .right-col .show-the-post{margin-top:5vw;}
    main .main-inner section.body .articles article .right-col .show-the-post a{display:block;margin:0 auto;width:23.7333vw;line-height:7.7333vw;background-color:#333;font-size:3.2vw;text-align:center;color:white;}

    main .main-inner section.body .articles .page-navi .wp-pagenavi{flex-wrap:wrap;margin-bottom:14vw;padding:10vw 6.6666vw 0 6.6666vw;font-size:4.8vw;}
    main .main-inner section.body .articles .page-navi .wp-pagenavi .current,
    main .main-inner section.body .articles .page-navi .wp-pagenavi a{line-height:9vw;text-align:center;margin:0;padding:0 2vw;}
    main .main-inner section.body .articles .page-navi .wp-pagenavi .current{color:white;background-color:#2c99a7;}

    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;}
}