@charset "utf-8";
.pages{
  /* ======================
    #info
  ======================= */
  &#info{    
    .pageTtl{    
      span::before{
        background-image: url(../img/info/ttl_img.png);
      }
    }
  /* ---------------------
        wrapInfoContent
    --------------------- */
    .wrapInfoContent{
      width: min(100%,1480px);
      display: flex;
      align-items: flex-start;
      gap: 4em;
      background: none;
      padding: 0;
      @media (max-width: 1240px) {
        flex-direction: column;
        gap: 3em 0;
      }
      /* --- aside.sideNav --- */
      .sideNav{
        width: 100%;
        padding: 2em;
        margin: 0 auto;
        background: #fbfbfa;
        border-radius: 10px;
        @media (min-width:1241px){
          width: min(30% , 360px);
        }
        /* sideNav_inner */
        .sideNav_inner{   
          h3{
            text-align: center;
            position: relative;
            margin-bottom: 20px;
            &::before{
              content: "";
              width: 100%;
              height: 0.1em;
              background: rgba(70, 46, 46, 0.8);
              border-radius: 3px;
              position: absolute;
              top: 50%;
              bottom: 50%;
              left: 0;
              z-index: 200;    
              transform: translateY(-50%);
            }
            @media (max-width: 1240px) {
              &::before{
                width: 100%;
                height: 0.05em;
              }
            }
            span{
              background: #fbfbfa;
              position: relative;
              z-index: 250;
              padding: 0 2.5em;
              font-weight: bold;
              
            }
          }
          ul{
            margin-bottom: 40px;
            display: flex;
            flex-direction: column;
            gap: 0.8em;
            li{
              a{
                font-size: clamp(1.4rem, 1.365rem + 0.17vw, 1.5rem);
                &:hover{
                  text-decoration: underline;
                }
              }
            }
            &.list_recent{
              li{
                border-bottom: 1px solid rgba(70, 46, 46, 0.2);
                padding-bottom: 0.8em;
              }
            }
            &.list_category{
              li{
                a{
                  position: relative;
                  padding-left: 1.5em;
                  &:before{
                    content: "";
                    width: 1.0em;
                    height: 12px;
                    background: rgba(70, 46, 46, 0.2);
                    clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%);
                    position: absolute;
                    left: 0;
                    top: 50%;
                    bottom: 50%;
                    transform: translateY(-50%);
                  }
                }
              }
            }
          }
          @media (max-width: 1240px){
            ul:not(.list_recent){
              flex-direction: row;
              flex-wrap: wrap;
              gap: 1em 2em;
            }
          }
          @media (max-width: 580px){
            gap: 0 3em;
            & > div {
              width: 100%;
              &:first-of-type{
                width: 100%;
              }
            }
          }
        }
      }
      section{
        width: 100%;
        flex: 1;
        background: none;
        padding: 0;
        .inner{
          .wrapArticleList{
            display: flex;
            flex-direction: column;
            gap: 1.5em;
            margin: 0 auto 30px;
            @media (max-width: 980px) {
              margin-bottom: 20px;
            }
            @media (max-width: 980px) {
              margin-bottom: 10px;
            }
            li a{
              background: rgba(255, 255, 255, 1);
              border-radius: 10px;
              padding: 1em 1.5em;
              display: flex;
              flex-direction: column;
              gap: 0.3em ;
              transition: background-color 0.5s;
              &:hover{
                transition: background-color 0.5s;
                background: rgba(255, 255, 255, 0.5);
              }
              p{
                flex: 1;
              }
              time{
                font-size: 1.3rem;
              }
              @media (max-width: 1240px) {
                border-radius: 10px;
              }
              @media (max-width: 980px) {
                gap: 1em;
                padding: 1em 1.5em;
              }
              @media (max-width: 768px) {
                border-radius: 10px;
              }
              @media (max-width: 580px) {
                border-radius: 5px;
                flex-direction: column;
                gap: 0.5em;
                align-items: flex-start;
              }
            }
          }
          @media (max-width: 1240px) {
            margin: 0 auto;
          }
          @media (max-width: 1240px) and (min-width: 981px){
            width: 80%;
          }
          
          .pagination{
            width: 100%;
            margin: 3em auto;
            @media (max-width: 768px) {
              margin: 2em auto;
            }
            ul{
              display: flex;
              justify-content: center;
              gap: 1em;
              @media (max-width: 768px) {
                flex-wrap: wrap;
              }
              li{
                a,span{
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  background: #462E2E;
                  border: 1px solid #462E2E;
                  border-radius: 3px;
                  color: #FFF;
                  padding: 1.5em;
                  width: 1em;
                  height: 1em;
                  line-height: 1.0;
                  @media (max-width: 768px) {
                    width: 0.5em;
                    height: 0.5em;
                    padding: 1.2em;;
                  }
                }
                a{
                  background: #FAFAFA;
                  color: #462E2E; 
                  transition: 0.5s;
                  &:hover{
                    border-radius: 3px;
                  }
                }
                &.prv,
                &.nxt{
                  a{
                    border: none;
                    background: none;
                    position: relative;
                    &::before{
                      content: ">";
                      font-size: 1.8rem;
                      width: 30px;
                      height: 1.8rem;
                      position: absolute;
                      top: 50%;
                      bottom: 50%;
                      left: 50%;
                      right: 50%;
                      transform: translate(-50%, -50%) scale(0.7);
                    }
                  }
                }
                &.prv{
                  a{
                    &::before{
                      transform: translate(-50%, -50%) scale(-0.7, 0.7);
                    }
                  }
                  + li{
                    display: none;
                  }
                }
              }
            }
          } /* /pagination */
        }
      }
    }

  }/*//#info */  

  /* =====================================
        お知らせ詳細　#info.detail
  ===================================== */

}/* //#pages */
#info.detail{
  .wrapInfoContent{
    /* wrapArticle */
    .wrapArticle{
      background: #fbfbfa;
      border-radius: 10px;
      padding: 2em;
      flex: 1;
      width: 100%; 
      article{ 
        width: 100%;        
        .articleTtl{
          font-size: clamp(1.5rem, 1.117rem + 1.91vw, 2.6rem);
          margin-bottom: 0.8em;
          padding-bottom: 0.5em;
          position: relative;
          @media (max-width: 580px) {
            margin-bottom: 0.5em;
          }
          &::before,
          &::after{
            content: "";
            height: 2px;
            position: absolute;
            left: 0;
            bottom: 0;
          }
          &::before{
            width: 100%;
            background: #EFEFEF;
          }
          &::after{        
            width: 1em;
            background: #C68337;
          }

        }
        .article_info{
          display: flex;
          justify-content: space-between;
          margin-bottom: 2em;
          padding: 0 ;
          letter-spacing: 0.05em;
          @media (max-width: 580px) {
            margin-bottom: 1.2em;
          }
          time{
            font-size: clamp(1rem, 0.93rem + 0.35vw, 1.2rem);
          }
          .category{
            .post-categories{
              display: flex;
              gap: 0 1em;
              li a{
                font-size: clamp(1rem, 0.93rem + 0.35vw, 1.2rem);
              }
            }
          }
        }
        /* wrap_content */
        .wrap_content{    
          padding: 0 1em;
          @media (max-width: 580px) {
            padding: 0;
          }
          p{
            margin-bottom: 1.5em;
          }
          .sttl_h2,h2.wp-block-heading{
            font-size: clamp(1.6rem, 1.53rem + 0.35vw, 1.8rem);
            font-weight: 600;
            color: #FFF;
            margin-bottom: 1.8em;
            background: #c68437;
            border-radius: 3px;
            padding: 0.15em 0.8em;
            &::before{
              display: none;
            }
            @media (max-width: 980px) {
              border-radius: 5px;
              margin-bottom: 1.2em;
            }
          }
          .sttl_h3,h3.wp-block-heading{
            font-size: clamp(1.5rem, 1.427rem + 0.36vw, 1.7rem);
            font-weight: bold;
            margin-bottom: 1.5em;
            padding: 0.25em;
            position: relative;
            @media (max-width: 980px) {
              margin-bottom: 0.8em;
            }
            &::before{
              content: "";
              width: 100%;
              height: 1px;
              background: rgba(70, 46, 46, 0.3);
              position: absolute;
              top: 0;
              left: 0;
            }
            &::after{
              content: "";
              width: 100%;
              height: 1px;
              background: rgba(70, 46, 46, 0.3);
              position: absolute;
              bottom: 0;
              left: 0;
            }
          }
          .sttl_h4,h4.wp-block-heading{
            font-size: clamp(1.4rem, 1.33rem + 0.35vw, 1.6rem);
            font-weight: 600;
            margin-bottom: 1.5em;
            padding: 0 0 0 1em;
            position: relative;
            @media (max-width: 980px) {
              border-radius: 5px;
              margin-bottom: 1.0em;
            }
            &::before{
              content: "";
              width: 3px;
              height: 1.3em;
              background: #C68337;
              border-radius: 30px;
              position: absolute;
              top: 50%;
              bottom: 50%;
              transform: translateY(-50%);
              left: 0;
            }
          }
          
          /* ttl_h5 */
          h5{
            font-size: clamp(1.4rem, 1.364rem + 0.18vw, 1.5rem);
            font-weight: 600;
            margin-bottom: 1.2em;
            background: #f2f0ee;
            padding: 0.15em 0.8em;
          }
          /* ttl_h6 */
          h6{
            font-size: clamp(1.3rem, 1.264rem + 0.18vw, 1.4rem);
            font-weight: 600;
            margin-bottom: 1.2em;
            color: #C68337;
          }
          /* wp-block-list */
          .wp-block-list{
            margin-bottom: 30px;
            li{
              padding-left: 1.2em;
              position: relative;
              &::after{
                content: "";
                width: 0.4em;
                height: 0.4em;
                background: rgba(198, 131, 55, 0.6);
                border-radius: 100%;
                position: absolute;
                top: 1.2em;
                transform: translateY(-0.4em);
                left: 0;
              }
            }
          }

          .has-small-font-size{
            font-size: 0.7em !important;
          }
          .has-medium-font-size{
            font-size: 1em !important;
          }
          .has-large-font-size{
            font-size: 1.4em !important;
          }
          .has-x-large-font-size{
            font-size: 1.6em !important;
          }

        }
      }
      .post-navigation{
        width: 100%;
        margin: 3em auto;
        .nav-links{
          display: flex;
          justify-content: space-between;
          gap: 2em;
          @media (max-width: 980px) {
            gap: 1em;
          }
          @media (max-width: 768px) {
            gap: 0.6em;
          }
          div{
            width: 100%;
            a{
              display: flex;
              align-items: center;
              border-left: 3px solid rgba(70, 46, 46, 0.6);
              color: #462E2E;
              padding: 0.8em 2em;
              width: 100%;
              height: 100%;
              line-height: 1.4;
              transition: 0.5s;
              font-size: clamp(1.1rem, 0.996rem + 0.52vw, 1.4rem);
              
              @media (max-width: 980px) {
                padding: 0.6em 1em;
              }
              @media (max-width: 480px) {
                border-left: 4px solid rgba(70, 46, 46, 0.6);
              }
              &:hover{
                background: #FFF;
              }
            }
            &:last-of-type a{
              border-left: none;
              border-right: 3px solid rgba(70, 46, 46, 0.6);
              justify-content: flex-end;
              text-align: right;
              @media (max-width: 480px) {
                border-right: 4px solid rgba(70, 46, 46, 0.6);
              }
            }
          }
        }
      } /* /pagination */
      .btnLink{
        text-align: center;
        margin-bottom: 2em;
        a{
          border-radius: 3px;
          font-size: clamp(1.2rem, 1.13rem + 0.35vw, 1.4rem);
          @media (max-width: 580px) {
            padding: 0.8em 2em;
            width: 80%;
          }
        }
      }
    }

  }


  }/* //#info.detail */