@charset "utf-8";

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

img{
  max-width:100%;
  height:auto;
}

#preamble{
  @media (max-width: 860px) {
    background:url(../grp/body_yama.png) center bottom repeat-x scroll;
  }
}
main:has(> div:nth-of-type(1) > nav) {
  & > div {
      &:nth-of-type(1) {
          > nav {
              position: static;
              top: 0;
          }
      }
  }
}


main:has(> div:nth-of-type(1) > nav) {
  & > div {
      &:nth-of-type(2) {
        padding:0;
        border:none;
        background:none;
      }
  }
}


.side_box{/*サイド*/
  nav{
    display:none;
  }
  > * + *{
    margin-top:20px;
  }
  > 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) {
    }
    > 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;
        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;
          border-radius: 10px;
          overflow: hidden;
        }
        &:empty{/*中身ががない時*/
          display:none;
        }
      }
      div{
        margin-top:10px;
        &.entry_body{
          text-align: left;
        }
      }
      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;
        }
      }
      &:nth-of-type(1){
        margin-top:20px;
      }
    }
    @media (max-width: 768px) {
      section{
        aside{
          > ul{
            grid-template-columns: repeat(2,1fr);
          }
        }
        &:nth-of-type(1){
          content:"";
        }
      }
    }
}