@charset "utf-8";
#info{
  /* ========================
            MAIN  
  ======================== */

  /* ---------------------
        pageTtl 
  --------------------- */
  .pageTtl{
    h2{   
      text-align: left;
      @media (max-width: 980px) {
        text-align: center;
        display: flex;
        justify-content: center;
      }
      span{
        padding-left: 0;
        padding-left: 1.3em;
        position: relative;
        z-index: 200;
        display: flex;
        align-items: center;
        &::before{
          content: "";
          width: 24px;
          height: 24px;
          clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
          background: var(--color-orange,#E8B001);
          position: absolute;
          z-index: 210;
          top: 50%;
          bottom: 50%;
          left: 0;
          transform-origin: center;
        }
        @media (max-width: 1240px) {
          &::before{
            width: 0.85em;
            height: 0.85em;
          }
        }
        em{
          font-size: clamp(1.6rem, 1.322rem + 1.39vw, 2.4rem);
          padding-left: 0.4em;
          display: flex;
          align-items: center;
          gap: 0.4em;
          &::before{
            content: "";
            width: 1em;
            height: 1px;
            transform: rotate(-65deg);
            background: rgba(80, 52, 0,0.4);
            
          }
        }
      }
    }
  }

  /* ---------------------
        mainContents 
  --------------------- */
  .mainContents{
    display: flex;
    align-items: flex-start;
    gap: 5em;
    @media (max-width: 1240px) {
      flex-direction: column;
      gap: 3em;
    }
  }
  .mainContents > div, 
  .mainContents > section{
    margin-bottom: 0;
    border-radius: 0.8em;
  }
  .mainContents article{
    width: calc((100% - 2em) / 2);
    background: #fff;
    border-radius: 10px;
    padding: 3em 4em 2.5em;
    @media (max-width: 1480px) {
      padding: 3em;
    }
    @media (max-width: 1240px) {
      padding: 2em;
    }
    @media (max-width: 768px) {
      width: 100%;
    }
  }


  /* --- aside.sideNav --- */
  .sideNav{
    @media (min-width:1241px){
      width: min(30% , 320px);
    }
    /* sideNav_inner */
    .sideNav_inner{   
      h3{
        text-align: center;
        position: relative;
        margin-bottom: 20px;
        &::before,
        &::after{
          content: "";
          width: 100%;
          height: 3px;
          background: var(--color-yellow);
          border-radius: 30px;
          position: absolute;
          top: 50%;
          bottom: 50%;
          left: 50%;
          right: 50%;
          z-index: 200;
          
        }
        &::before{      
          transform: translate(-50% ,-3px);
        }
        &::after{      
          transform: translate(-50% ,3px);
        }
        @media (max-width: 1240px) {
          &::before,
          &::after{
            width: 100%;
            height: 2px;
          }
        }
        span{
          background: #FFFCED;
          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 #DDD;
            padding-bottom: 0.8em;
          }
        }
        &.list_category{
          li{
            a{
              position: relative;
              padding-left: 1.5em;
              &:before{
                content: "";
                width: 1em;
                height: 10px;
                background: var(--color-l-yellow);
                clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 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%;
          }
        }
      }
    }
  }

} /* //#info */


/* =====================================
　      お知らせ一覧　#info.info_index
===================================== */
#info.info_index{
  
  /* --- wrapArticleList --- */
  .wrapArticleList{
    background: none;
    flex: 1;  
    display: flex;
    flex-wrap: wrap;
    gap: 2em 2em;
    padding: 0;
    article{      
      a{
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        gap: 1em 2em;
        .wrapImg{
          margin: 0 auto;
        }
        .wrapTxt{
          flex: 1;
          display: flex;
          flex-direction: column;
          time{
            font-size: clamp(1.1rem, 1.03rem + 0.35vw, 1.3rem);
          }
          h1{
            font-size: clamp(1.7rem, 1.665rem + 0.17vw, 1.8rem);
            margin-bottom: 0.5em;
          }
          .wrap_content{
            font-size: clamp(1.3rem, 1.23rem + 0.35vw, 1.5rem);
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            display: -webkit-box;
            overflow: hidden;
          display: none;          
          }
        }
        .wrapImg{
          img{
            width: 100%;
            height: auto;
            object-fit: cover;
          }
        }
        @media (max-width: 1240px) {
          flex-direction: column;
          .wrapImg{
            width: 80%;
          }
        }
      }
    } /* article */
    .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: var(--color-yellow);
            border: 1px solid var(--color-yellow);
            border-radius: 3px;
            color: var(--color-brown);
            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: #FFF;
            color: var(--color-brown); 
            /* border: 1px solid var(--color-brown);  */
            transition: 0.5s;
            &:hover{
              background: var(--color-yellow);
              /* border: 1px solid var(--color-brown); */
              border-radius: 3px;
            }
          }
          &.prv,
          &.nxt{
            a{
              border: none;
              background: none;
              position: relative;
              &::before{
                content: "";
                width: 30px;
                height: 10px;
                background: url(/assets/img/arrow_s01.svg) 0 0;
                background-size: 100%;
                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 */
  }  /* //wrapArticleList */


}/* //#info.info_index */

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

  /* wrapArticle */
.wrapArticle{
  padding: 0;
  flex: 1;
  background: none;
  article{ 
    width: 100%;
    
    .articleTtl{
      font-size: clamp(1.5rem, 1.117rem + 1.91vw, 2.6rem);
      font-weight: bold;
      margin-bottom: 0.8em;
      padding-bottom: 1em;
      position: relative;
      @media (max-width: 580px) {
        margin-bottom: 0.5em;
      }
      &::before,
      &::after{
        content: "";
        height: 4px;
        position: absolute;
        left: 0;
        bottom: 0;
      }
      &::before{
        width: 100%;
        background: #EFEFEF;
      }
      &::after{        
        width: 3em;
        background: var(--color-yellow);
      }

    }
    .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{    
      p{
        margin-bottom: 1.5em;
      }
      .sttl_h2,h2.wp-block-heading{
        font-size: clamp(1.6rem, 1.53rem + 0.35vw, 1.8rem);
        font-weight: bold;
        margin-bottom: 1.8em;
        background: #FDF490;
        border-radius: 30px;
        padding: 0.15em 1.2em;
        @media (max-width: 980px) {
          border-radius: 5px;
          margin-bottom: 1.2em;
        }
      }
      .sttl_h3,h3.wp-block-heading{
        font-size: clamp(1.4rem, 1.33rem + 0.35vw, 1.6rem);
        font-weight: bold;
        margin-bottom: 1.5em;
        padding: 0 0 0 1em;
        position: relative;
        @media (max-width: 980px) {
          border-radius: 5px;
          margin-bottom: 1.0em;
        }
        &::after{
          content: "";
          width: 4px;
          height: 1.5em;
          background: var(--color-orange);
          border-radius: 30px;
          position: absolute;
          top: 50%;
          bottom: 50%;
          transform: translateY(-50%);
          left: 0;
        }
      }
      .sttl_h4,h4.wp-block-heading{
        font-size: clamp(1.4rem, 1.33rem + 0.35vw, 1.6rem);
        font-weight: bold;
        margin-bottom: 1.0em;
        padding-left: 1.2em;
        position: relative;
        @media (max-width: 980px) {
          margin-bottom: 0.8em;
        }
        &::after{
          content: "";
          width: 0.6em;
          height: 0.6em;
          background: var(--color-orange);
          border-radius: 100%;
          position: absolute;
          top: 50%;
          bottom: 50%;
          transform: translateY(-50%);
          left: 0;
        }
      }
      /* list01 */
      .list01{
        margin-bottom: 30px;
        li{
          padding-left: 1em;
          position: relative;
          &::after{
            content: "";
            width: 0.5em;
            height: 0.5em;
            background: var(--color-orange);
            border-radius: 100%;
            position: absolute;
            top: 1em;
            transform: translateY(-0.4em);
            left: 0;
          }
        }
      }

    }

  }
  .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: 6px solid var(--color-l-yellow);
          color: var(--color-brown);
          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 var(--color-l-yellow);
          }
          &:hover{
            background: #FFF;
          }
        }
        &:last-of-type a{
          border-left: none;
          border-right: 6px solid var(--color-l-yellow);
          justify-content: flex-end;
          text-align: right;
          @media (max-width: 480px) {
            border-right: 4px solid var(--color-l-yellow);
          }
        }
      }
    }
  } /* /pagination */
  .backBtn{
    text-align: center;
    margin-bottom: 2em;
    a{
      padding: 0.3em 2em;
      font-size: clamp(1.2rem, 1.13rem + 0.35vw, 1.4rem);
      @media (max-width: 580px) {
        padding: 0.8em 2em;
        width: 80%;
      }
    }
  }
}


}/* //#info.detail */