@charset "utf-8";

/*======================================================
新着情報に関するcss
======================================================*/

/*-----------------------------------------------------
見出し
-----------------------------------------------------*/

.c-heading-page{
    text-align: center;
    color:var(--main-blue);
    margin-bottom:1em;
}

.heading-top-news{
    background: var(--grad-blue-horizon);
    text-align: center;
    color:#fff;
    /* padding:0.5em; */
    font-size:clamp(2.0rem,4.0vw,4.0rem);
    margin-bottom:2em;
    span{
        font-size:clamp(1.4rem,2.0vw,2.0rem);
        margin-left:10px;
        font-weight: normal;
    }
}

/*-----------------------------------------------------
TOPページ新着情報
-----------------------------------------------------*/

.news-wrapper{
    display: grid;
    @media(min-width:768px){
        grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
    }
    gap:1em;
}


/*-----------------------------------------------------
カード型レイアウト内の設定
-----------------------------------------------------*/

.heading-card-news a{
    color:#333;
    font-size:1.8rem;
    margin-bottom:0.5em;
    text-decoration: none;
}

.card-news-box{
    border:1px solid var(--border-blue);
    border-radius: 6px;
    padding:1em;
    grid-row:span 3;
    display:grid;
    grid-template-rows: subgrid;
}

.card-news-img{
    margin-bottom:1em;
    text-align: center;
    img{
    border-radius: 20px;
    max-width:400px;
    width: 100%;
    height: 200px; /* 画像の高さを指定 */
    object-fit: cover; /* アスペクト比を維持しつつ、中央部分を切り取って表示 */
}
}

.card-news-main-text{
    margin-bottom:2em;
}

.card-news-btn{
    text-align: center;
    button{
        border:1px solid;
        color:var(--main-blue);
        border-radius: 20px;
        padding:0.5em 2em;
        background: linear-gradient(50deg, var(--gray-light) 70%, var(--gray-mid) 0);
        a{
            color:var(--main-blue);
            font-weight: bold;
            &::after{
                font: var(--fa-font-solid);
                content:"\f101";
                margin-left:0.5em;
            }
        }
    }
}

.new-mark{
    color:var(--red-new);
    font-weight: bold;
    margin-left: 0.5em;
}

/*-----------------------------------------------------
一覧を見るボタン
-----------------------------------------------------*/

.btn-news-all{
    margin: 3em auto;
    text-align: center;
    button{
        border:none;
        background: none;
        a:link,a:visited{
            color:#fff;
        }
        a::after{
                font: var(--fa-font-solid);
                content:"\f101";
                margin-left:0.5em;
            }
    }
}

/*-----------------------------------------------------
ボタン自体のstyle
-----------------------------------------------------*/

.btn-news-all button a{
  color: #fff;
  background: linear-gradient(50deg, #3D67AE 70%, #30539F 0);
  font-size: 16px;
  border-radius: 40px;
  text-decoration: none;
  padding: 1em 3em;
  display: inline-block;
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
    &::before{
    content: "";
    animation: shine 3s cubic-bezier(0.25, 0, 0.25, 1) infinite;
    background: #fff;
    width: 140%;
    height: 100%;
    transform: skewX(-135deg);
    top: 0;
    left: -160%;
    opacity: 0.5;
    position: absolute;
    }
}
/* 光の動き */
@keyframes shine{
  0% {
    left: -160%;
    opacity: 0;
  }
  70% {
    left: -160%;
    opacity: 0.5;
  }
  71% {
    left: -160%;
    opacity: 1;
  }
  100% {
    left: -20%;
    opacity: 0;
  }
}

/*-----------------------------------------------------
新着情報詳細ページ
-----------------------------------------------------*/

.p-post-cont{
    max-width:1000px;
    margin:3em auto;
    padding:3em;
    box-shadow: 4px 4px 4px 4px hsla(0, 0%, 60%, 0.2);
}

article.p-post-wrapper{
    padding:0;
    padding-inline:1em;
}

/* .p-post-cont{
    padding:2em;
} */

.p-post-pager{
    box-shadow: 4px 4px 4px 4px hsla(0, 0%, 20%, 0.2);
    max-width:1000px;
    margin:3em auto;
    display: grid;
    grid-template-columns: 3fr 2fr 3fr;
    /* border-top:1px solid; */
    align-items:center;
    padding:1em;
    font-size: clamp(1.2rem,1.5vw,1.5rem);
}

.p-pager-previous{
    text-align: left;
     border-right:1px solid #999;
    a::before{
    font: var(--fa-font-solid);
    content:"\f100";
    margin-right:0.5em;   
    }
    span{
        font-size:1.3rem;
    }
}

.p-pager-all{    
    text-align: center;    
    a{
        color:var(--text-main);
    }
}

.p-pager-next{
    text-align: right;
    border-left:1px solid #999;
    a::after{
    font: var(--fa-font-solid);
    content:"\f101";
    margin-left:0.5em;
    }
    span{
        font-size:1.3rem;
    }
}

/*----------------------------------------------------------
新着情報一覧ページ
----------------------------------------------------------*/

.news-all-wrapper{
    max-width:1000px;
    @media(min-width:768px){
    margin-inline: auto;
    }
}

.news-all-list{
    display: grid;
    @media(min-width:768px){
        grid-template-columns: 1fr 4fr;
        gap: 2em;
    }
    margin-bottom:2em;
}

.news-all-thumb{
    text-align: center;
}

.news-all-date{
    font-size:1.3rem;
}

.news-all-title{
    font-weight: bold;
}


/*----------------------------------------------------------
WP-PageNavi の設定
----------------------------------------------------------*/

.wp-pagenavi {
    clear: both;
    text-align: center;
    margin:2em auto;
  }
  
  .wp-pagenavi a, .wp-pagenavi span {
    color: #333;
    background-color: #FFFFFF;
    padding: 8px 15px !important;
    margin: 0 2px;
    white-space: nowrap;
    -webkit-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
    text-align: center;
    text-decoration: none;
    border: thin dotted #e5f2fa;
  }
  
  .wp-pagenavi a:hover {
    color: #fff;
    background-color: #a1c3e0;
  }
  
  .wp-pagenavi span.current {
    color: #fff;
    background-color: #a1c3e0;
  }
  
  .wp-pagenavi a:hover, .wp-pagenavi span.current {
    border-color: #e5f2fa;
  }
  
  @media (max-width: 600px) {
    .wp-pagenavi a, .wp-pagenavi span {
      padding: 4px 8px;
    }
  }
  span.extend {
    border: none !important;
  }
  
  [aria-label="First Page"],
  [aria-label="Last Page"] {
    font-size: 1.2rem;
  }