@charset "utf-8";

@import url("../../style/variables.css");/*変数定義*/
	
:root{
}

main{
  display:grid !important;
  grid-template-columns: 230px 1fr;
  gap:30px;
  h1{
    grid-column: 1 / -1; 
    margin-bottom:0 !important;
  }
  @media (max-width: 860px) {
    display:block !important;
    h1{
      margin-bottom:20px !important;
    }
  }
}

.side_box{/*サイド*/
   
  nav{
    > * + *{
      margin:20px auto 0 auto;
    }
    > section{
      background:white;
      border-radius:10px;
      border:2px solid rgb(var(--mainColor));
      > h3{
          background:rgb(var(--mainColor));
          color:white;
          padding:.3em 0;
          font-size: 1.2rem;
          font-weight: 600;
      }
  }
  }
  @media (max-width: 860px) {
  }
  nav{
    > section{
      > h3{
        display:none;
      }
    }
  }
}

.cate{/*カテゴリリスト*/
ul{
  > * + *{
    border-top:1px dotted gray;
  }
  li{
    a{
      display:block;
      padding:.5em 1em;
      text-align: left;
      color:rgb(var(--baceFontColor));
      &:hover{
        color:rgb(var(--mainColor));
      }
    }
  }
}
@media (max-width: 860px) {
  ul{
    display:flex;
    justify-content: start;
    gap:.3em 10px;
    flex-wrap:wrap;
    padding:10px;
    > * + *{
      border-top:none;
    }
    li{
      a{
        font-weight: 500;
        padding:0;
        &::before{
          content:"■";
          margin:0 .3em 0 0;
          color:rgb(var(--mainColor));
        }
      }
    }
  }
}
}

#archives{
> ul {
  list-style: none;
  padding: 0;
  > * + *{
    border-top:1px dotted silver;
  }
  > li{
    > h3 {
      text-align: left;
      margin: 0;
      padding: 10px 10px 10px calc(10px + 1.3em);
      cursor: pointer;
      position: relative;
      &::before {
        display: block;
        content: "";
        background-color: rgb(var(--mainColor));
                
        -webkit-mask-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z"/></svg>');
        -webkit-mask-size: contain;
        mask-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M246.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-128-128c-9.2-9.2-22.9-11.9-34.9-6.9s-19.8 16.6-19.8 29.6l0 256c0 12.9 7.8 24.6 19.8 29.6s25.7 2.2 34.9-6.9l128-128z"/></svg>');
        mask-size: contain;
        mask-repeat: no-repeat;
                
        height: 1em;
        width: 1em;
                
        position: absolute;
        top: 50%;
        left: 10px;
        margin-top:-.5em;
      }
    }
    > ul {
      display: none;
      justify-content: start;
      gap:.3em .5em;
      padding: 0 10px 10px calc(10px + 1.3em);
      &.open {
        display: flex;
        flex-wrap:wrap;
      }
      > li{
        font-size: .9rem;
        a{
          color:rgb(var(--baceFontColor));
          &:hover{
            color:rgb(var(--mainColor));
          }
        }
      }
    }
  }
}
@media (max-width: 860px) {
  > ul{
    display:grid;
    grid-template-columns: repeat(auto-fill,minmax(min(7em,100%),1fr));
   
    > li{
      position:relative;
      > ul{
        &.open {
          display: flex;
          flex-wrap:wrap;
          position:absolute;
          top:2em;
          left:1.5rem;
          width:auto;
          background:white;
          border:1px solid gray;
          padding:10px;
          z-index: 10;
        }
      }
    }
  }
}
@media (max-width: 480px) {
  display:none;
}
}





#kiji_box{/*記事*/
  > * + *{
  margin-top:30px;
  }
  div.pager{
  display:flex;
  justify-content:space-between;
  a{
    display:inline-block;
    background:white;
    border:2px solid rgb(var(--mainColor));
    border-radius: 10px;
    color:rgb(var(--mainColor));
    padding:.3em .5em;
    svg{
      fill:rgb(var(--mainColor));
      margin:0 .3em;
      vertical-align: middle;
      padding-bottom:2px;
    }
    &:hover{

    }
  }
  }
  section{
  background:white;
  padding:20px;
  border-radius:10px;
  border:3px solid rgb(var(--mainColor));
  h2{
    font-size: 1.8rem;
    text-align: left;
    a{
      color:rgb(var(--baceFontColor));
      &:hover{
        text-decoration: underline;
      }
    }
    span{
      font-size: 1.3rem;
      margin:0 .5em 0 0;
      display:none;
      a{
        display:inline-block;
        padding:.1em .5em;
        border-radius:3px;
        background:rgb(var(--mainColor));
        color:white;
        }
      }
    }
    time{
      display:block;
      margin:10px auto 0 auto;
      text-align: left;
      font-size: .9rem;
    }
    > figure{
      width:min(640px,100%);
      margin:20px auto 0 auto;
      a{
        display:block;
      }
      &:empty{/*中身ががない時*/
        display:none;
      }
    }
    div{
      margin-top:10px;
      &.entry_body{
        text-align: left;
      }
      > p:last-of-type:has([target="_blank"]){
        margin:20px auto 0 auto;
        text-align: right;
        a{
          padding:.3em .5em;
          display:inline-block;
          border:1px solid rgb(var(--mainColor));
            border-radius: 10px;
            
          &:before{
            content:"参照URL：";
            
          }
          &:hover{
            background:rgb(var(--mainColor));
            color:white;
          }
        }
      }
    }
    aside{
      margin-top:20px;
      > ul{
        display:grid;
        grid-template-columns: repeat(auto-fill,minmax(230px,1fr));
        gap:20px;
        li{
          figure{
            a{
              display:block;
              aspect-ratio: 1 / 1;
              position:relative;
              overflow: hidden;
              border-radius:10px;
              img{
                min-width:100%;
                min-height:100%;
                object-fit: cover;
                position: absolute;
                top: 50%;
                transform: translate(-50%, -50%);
              }
            }
          }
          &:empty{/*中身ががない時*/
            display:none;
          }
        }
      }
    }
    
    img {
      & + img{
        margin-top:10px;
      }
      & + br + p{
        margin-top:10px;
      }
    }
  }
  @media (max-width: 860px) {
    margin-top:30px;
    section{
      aside{
        > ul{
          grid-template-columns: repeat(2,1fr);
        }
      }
      &:nth-of-type(1){
        content:"";
      }
    }
  }
}