@charset "utf-8";

@media screen and (min-width:768px){
/*pc・タブレットcss*/
    
    #page-blog {
        width: 1100px;
        margin: 0 auto 100px;
        justify-content: space-between;
    }
    
    #page-blog #leftcolumn {
        width: 260px;
        order: -1;
    }
    #page-blog #leftcolumn #wp-calendar {
        border: 1px solid #dddddd;
        margin: 0 5px;
        width: 100%;
    }
    #page-blog #leftcolumn #wp-calendar caption {
        background: #fafafa;
        padding: 15px 0;
        border: 1px solid #dddddd;
        border-bottom: none;
        font-weight: bold;
    }
    #page-blog #leftcolumn #wp-calendar th , #page-blog #leftcolumn #wp-calendar td {
        border: 1px solid #dddddd;
        padding: 4px;
        text-align: center;
        vertical-align: middle;
        height: 35px;
    }
    #page-blog #leftcolumn #wp-calendar td a {
        background: #fef0c3;
        display: block;
        padding: 6px 0;
    }
    #page-blog #leftcolumn .calendar, #page-blog #leftcolumn .new-column, #page-blog #leftcolumn .category-column, #page-blog #leftcolumn .contributor-column, #page-blog #leftcolumn .archive-column { 
        margin-bottom: 45px;
        line-height: 1;
    }
    #page-blog #leftcolumn .ttl {
        line-height: 1.5;
        font-size: 24px;
        font-weight: bold;
        font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック","Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",  Verdana, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
        color: #231815;
        border-bottom: 1px solid #231815;
        padding-bottom: 10px;
        margin-bottom: 10px;
        text-align: center;
    }
    #page-blog #leftcolumn .txt02 {
        font-size: 13px;
    }
    #page-blog #leftcolumn ul.list li {
        border-bottom: 1px dotted #000000;
        font-size: 14px;
        line-height: 1.5;
        letter-spacing: 0.05em;
        text-indent: -1.3em;
        padding-left: 1.5em;
    }
    #page-blog #leftcolumn ul.list li a {
        padding: 15px;
        display: block;
    }
    #page-blog #leftcolumn ul.list li a::before {
        content: "";
        margin-right: 1em;
        border-left: 4px solid #000;
        height: 10px;
    }
    
    #page-blog #rightcolumn {
        width: 800px;
    }
    #page-blog #rightcolumn h3 {
        margin: 0 0 55px;
    }
    #page-blog #rightcolumn .box {
        background: url(../images/blog/bg-detail.jpg) repeat;
        padding: 20px;
    }
    #page-blog #rightcolumn .box article {
        position: relative;
        background: #fff;
        border: 20px solid #fff;
        justify-content: space-between;
    }
    #page-blog #rightcolumn .box article:after {
        position: absolute;
        left: 0;
        bottom: -20px;
        border-top: 1px dotted #b2b2b2;
        content: '';
        width: 720px;
        height: 1px;
    }
    #page-blog #rightcolumn .box article .pic {
        width: 180px;
        text-align: center;
    }
    #page-blog #rightcolumn .box article .pic img {
        max-width: 180px;
        max-height: 145px;
        margin: 0 auto;
    }
    #page-blog #rightcolumn .box article .rightBox {
        width: 500px;
        font-size: 16px;
    }
    #page-blog #rightcolumn .box .cate {
        font-size: 14px;
        color: #fff;
        text-align: center;
        margin: 0 0 10px;
    }
    #page-blog #rightcolumn .box .cate span {
        display: block;
        width: 150px;
    }
    #page-blog #rightcolumn .box .cate .cate01 {
        background: #0099ba;
    }
    #page-blog #rightcolumn .box .cate .cate02 {
        background: #0d2c55;
    }
    #page-blog #rightcolumn .box .cate .cate03 {
        background: #c6aa63;
    }
    #page-blog #rightcolumn .box .cate .cate04 {
        background: #9d140e;
    }
    #page-blog #rightcolumn .box .cate .cate05 {
        background: #e07a00;
    }
    #page-blog #rightcolumn .box .cate .cate06 {
        background: #31618e;
    }
    #page-blog #rightcolumn .box .cate .cate07 {
        background: #cd383f;
    }
    #page-blog #rightcolumn .box .date {
        color: #727171;
    }
    
    #page-blog #rightcolumn .detail {
        border: 20px solid #fff;
        background: #fff;
    }
    #page-blog #rightcolumn .detail .date {
        font-size: 16px;
        margin: 0 0 8px;
    }
    #page-blog #rightcolumn .detail h4.ttl {
        font-size: 22px;
        font-weight: bold;
        margin: 0 0 20px;
        padding: 0 0 5px;
        border-bottom: 2px dotted #a0a0a0;
    }
    #page-blog #rightcolumn .detail .pic {
        text-align: center;
        margin: 0 0 20px;
    }
    #page-blog #rightcolumn .detail .pic img {
        max-width: 100%;
    }
    
    
    
    
}
@media screen and (max-width:767px){
/*pc・タブレット用cssを丸々コピーしたものを編集していく（スマホ用css）*/
    
    #page-blog {
        margin: 0 0 15%;
        justify-content: space-between;
    }
    
    #page-blog #leftcolumn {
        order: 0;
        
    }
    #page-blog #leftcolumn #wp-calendar {
        border: 1px solid #dddddd;
        margin: 0 2%;
        width: 96%;
    }
    #page-blog #leftcolumn #wp-calendar caption {
        background: #fafafa;
        padding: 15px 0;
        border: 1px solid #dddddd;
        border-bottom: none;
        font-weight: bold;
    }
    #page-blog #leftcolumn #wp-calendar th , #page-blog #leftcolumn #wp-calendar td {
        border: 1px solid #dddddd;
        padding: 4px;
        text-align: center;
        vertical-align: middle;
        height: 35px;
    }
    #page-blog #leftcolumn #wp-calendar td a {
        background: #fef0c3;
        display: block;
        padding: 6px 0;
    }
    #page-blog #leftcolumn .calendar, #page-blog #leftcolumn .new-column, #page-blog #leftcolumn .category-column, #page-blog #leftcolumn .contributor-column, #page-blog #leftcolumn .archive-column { 
        margin-bottom: 10%;
        line-height: 1;
    }
    #page-blog #leftcolumn .ttl {
        line-height: 1.5;
        font-size: 24px;
        font-weight: bold;
        font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック","Yu Gothic", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",  Verdana, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
        color: #231815;
        border-bottom: 1px solid #231815;
        padding-bottom: 10px;
        margin-bottom: 10px;
        text-align: center;
    }
    #page-blog #leftcolumn .txt02 {
        font-size: 13px;
    }
    #page-blog #leftcolumn ul.list li {
        border-bottom: 1px dotted #000000;
        font-size: 14px;
        line-height: 1.5;
        letter-spacing: 0.05em;
        text-indent: -1.3em;
        padding-left: 1.5em;
    }
    #page-blog #leftcolumn ul.list li a {
        padding: 15px;
        display: block;
    }
    #page-blog #leftcolumn ul.list li a::before {
        content: "";
        margin-right: 1em;
        border-left: 4px solid #000;
        height: 10px;
    }
    
    #page-blog #rightcolumn {
        order: -1;
        margin: 0 0 15%;
    }
    #page-blog #rightcolumn h3 {
        margin: 0 5% 8%;
    }
    #page-blog #rightcolumn .box {
        background: url(../images/blog/bg-detail.jpg) repeat;
        padding: 20px;
    }
    #page-blog #rightcolumn .box article {
        position: relative;
        background: #fff;
        border: 20px solid #fff;
        justify-content: space-between;
    }
    #page-blog #rightcolumn .box article:after {
        position: absolute;
        left: 0;
        bottom: -20px;
        border-top: 1px dotted #b2b2b2;
        content: '';
        width: 720px;
        height: 1px;
    }
    #page-blog #rightcolumn .box article .pic {
        width: 180px;
        text-align: center;
    }
    #page-blog #rightcolumn .box article .pic img {
        max-width: 180px;
        max-height: 145px;
        margin: 0 auto;
    }
    #page-blog #rightcolumn .box article .rightBox {
        width: 500px;
        font-size: 16px;
    }
    #page-blog #rightcolumn .box .cate {
        font-size: 0.95em;
        color: #fff;
        text-align: center;
        margin: 0 0 10px;
    }
    #page-blog #rightcolumn .box .cate span {
        display: block;
        width: 150px;
        padding: 5px 0;
    }
    #page-blog #rightcolumn .box .cate .cate01 {
        background: #0099ba;
    }
    #page-blog #rightcolumn .box .cate .cate02 {
        background: #0d2c55;
    }
    #page-blog #rightcolumn .box .cate .cate03 {
        background: #c6aa63;
    }
    #page-blog #rightcolumn .box .cate .cate04 {
        background: #9d140e;
    }
    #page-blog #rightcolumn .box .cate .cate05 {
        background: #e07a00;
    }
    #page-blog #rightcolumn .box .cate .cate06 {
        background: #31618e;
    }
    #page-blog #rightcolumn .box .cate .cate07 {
        background: #cd383f;
    }
    #page-blog #rightcolumn .box .date {
        color: #727171;
    }
    
    #page-blog #rightcolumn .detail {
        border: 20px solid #fff;
        background: #fff;
    }
    #page-blog #rightcolumn .detail .date {
        font-size: 1.0em;
        margin: 0 0 4%;
    }
    #page-blog #rightcolumn .detail h4.ttl {
        font-size: 1.1em;
        font-weight: bold;
        margin: 0 0 20px;
        padding: 0 0 5px;
        line-height: 1.3;
        border-bottom: 2px dotted #a0a0a0;
    }
    #page-blog #rightcolumn .detail .pic {
        text-align: center;
        margin: 0 0 20px;
    }
    #page-blog #rightcolumn .detail .pic img {
        max-width: 100%;
    }
    
}