@charset "utf-8";


#blog_box{/*ブログ全体が入ってるボックス*/
    grid-template-columns: 220px 1fr;
    gap:30px;
    align-items: start;
    grid-template-areas: 
        "A B";
    @media (max-width: 768px) {
        grid-template-columns: 1fr;
        grid-template-areas: 
        "B"
        "A";
    }
}


.cate{/*カテゴリリスト*/
    ul{
        background:white;
        border-radius:10px;
        border:2px solid rgb(var(--mainColor));
        overflow: hidden;
        li{
            a{
                display:block;
                padding:.5em 1em;
                text-align: left;
                border-top:1px dotted gray;
            }
            &:nth-of-type(1){
                a{
                    padding-top:.7em;
                    border-top:none;
                }
            }
            &:last-of-type{
                a{
                    padding-bottom:.7em;
                }
                
            }
        }
    }
}

#archives{/*アーカイブ*/
    background:white;
    padding:20px;
    border-radius:10px;
    border:2px solid rgb(var(--mainColor));
    > ul{
        > li{
            margin:10px auto 0 auto;
            > h3{
                position:relative;
                @include font-size(13);
                font-family: 'M PLUS 1p', sans-serif;
                font-weight: 500;
                text-align: left;
                cursor: pointer;
                &::before,&::after{
                    position: absolute;
                    content:'';
                    width: 10px;
                    height: 1px;
                    background-color: #333;
                }
                &::before{
                    top:48%;
                    right: 10px;
                    transform: rotate(0deg);
                    
                }
                &::after{    
                    top:48%;
                    right: 10px;
                    transform: rotate(90deg);
                
                }
                &.close{
                    &::before{
                        transform: rotate(45deg);
                    }
                    &::after{
                        transform: rotate(-45deg);
                    }
                }
            }
            > div{
                display: none;
                > ul{
                    display:grid;
                    grid-template-columns: repeat(4,1fr);
                    li{
                        @include font-size(11);
                        a{
                            color:rgb(var(--baceFontColor));
                            &:hover{
                                text-decoration: none;
                            }
                        }
                    }
                }
            }
            &:nth-of-type(1){//最初の年の分だけ開き、＋✕の処理を反転させる！
                margin-top:0;
                > h3{
                    &::before{
                        transform: rotate(45deg);
                        
                    }
                    &::after{    
                        transform: rotate(-45deg);
                    
                    }
                    &.close{
                        &::before{
                            transform: rotate(90deg);
                        }
                        &::after{
                            transform: rotate(0deg);
                        }
                    }
                }
                > div{
                    display:block;
                }
            }
        }
       
    }
    @media (max-width: 768px) {
        &::after{
            content:"";
        }
        > ul{
            height:300px;
            overflow-y: scroll;
            > li{
                > div{
                    > ul{
                        @include flexSet(stretch, flex-start, row, wrap);
                        li{
                            margin:0 0 0 1em
                        }
                    }
                }
            }
        }
    }
}

#kiji_box{/*記事*/
    grid-area:B;
    section{
        margin-top:30px;
        background:white;
        padding:20px;
        border-radius:10px;
        border:2px solid rgb(var(--mainColor));
        h2{
            font-weight: 500;
            font-size: 1.3em;
            text-align: left;
            a{
                &:hover{
                    text-decoration: underline;
                }
            }
            span{
                @include font-size(20,20);
                margin:0 .5em 0 0;
                a{
                    display:inline-block;
                    padding:.3em .5em .1em .5em;
                    @include border-radius(3px);
                    background:rgb(var(--mainColor));
                    color:white;
                }
            }
        }
        time{
            display:block;
            margin:10px auto 0 auto;
            text-align: left;
            font-size: .9em;
        }
        div{
            margin-top:10px;
            &.entry_body{
                text-align: left;
            }
        }
        aside{
            margin-top:20px;
            > ul{
                display:grid;
                grid-template-columns: repeat(auto-fill,minmax(250px,1fr));
                gap:20px;
                li{
                    figure{
                        aspect-ratio: 1 / 1;
                        position:relative;
                        overflow: hidden;
                        background:#eee;
                        border-radius:5px;
                        img{
                            max-width:100%;
						    max-height:100%;
						    object-fit: cover;
						    position: absolute;
						    top: 50%;
						    transform: translate(-50%, -50%);
                        }
                    }
                    &:empty{/*中身ががない時*/
                        display:none;
                    }
                }
            }
        }
        &:nth-of-type(1){
            margin-top:0;
            position:relative;
        }
    }
    @media (max-width: 768px) {
        section{
            aside{
                > ul{
                    grid-template-columns: repeat(2,1fr);
                }
            }
            &:nth-of-type(1){
                content:"";
            }
        }
    }
}