@import "parts/page.css";
@import "parts/footer.css";

.page_contents {
  padding-bottom:var(--size50);
}
/*-------------------------
  一覧ページ
  -------------------------*/
.item_voice a {
    display: block;
    text-decoration: none;
    color:var(--black01);
    background-color: transparent;
    transition: background-color .3s var(--ease);
}
.item_voice a:hover {
    background-color: var(--orange04);
}
.item_voice a figure {
  width:100%;
  height:auto;
  aspect-ratio:321/181;
}
.item_voice a figure img {
  width: 100%;height:100%;
  object-fit: cover;
}
.item_voice .box_tit {
  padding:var(--size10) 0;
}
.item_voice .box_tit h3 {
    font-weight:400;
    font-size:calc(1.1111*var(--fsizeM));
    margin-top:var(--size10);
    line-height: 1.5;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis " [..]";
    padding-inline: 0.5em;
}

time {
    margin-inline: 0.5em;
}

@media (max-width:1024px) {

}
@media (max-width:799px)  {


}
/*-------------------------
  pager
  -------------------------*/
  .wp-pagenavi {
    display: flex;
    justify-content: center;
    align-items: center;
    gap:var(--size10);
    margin-top:var(--size40);
  }
  .wp-pagenavi > * {
    width:var(--size40);
    height:var(--size40);
    aspect-ratio:1/1;
    border-radius: 50%;
    color:var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    background-color: var(--gley05);
  }
  .wp-pagenavi a {
    transition:all .3s var(--ease);
  }
  .wp-pagenavi >.current,.wp-pagenavi a:hover {
    background-color: var(--blue01);
  }
  .page-nav {
    justify-content: space-between;
    align-items: center;
    gap:var(--size20);
    margin-top:var(--size80);
    width:100%;
    border:1px dashed var(--gley04);
    border-width: 1px 0;
    padding:var(--size20) 0;
  }
  .page-nav li {
    list-style: none;
  }
  .page-nav li a {
    text-decoration: none;
    color:var(--black01);
    padding-inline: 0.5em;
    line-height: 1;
    transition:.3s var(--ease);
  }
  .page-nav li.disabled a, .page-nav li.disabled {
    pointer-events: none;
    opacity:0.3;
  }
  .page-nav li:hover a{
    text-decoration:underline;
    text-underline-offset: 5px;
    text-decoration-color: var(--orange01); 
  }
  .page-nav li.prev:before {
    content:"＜";
    font-size:10px;
    color:var(--white);
    background-color: var(--gley05);
    width:30px;
    height:30px;
    display:inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    vertical-align: middle;
  }
  .page-nav li.next:after {
    content:"＞";
    font-size:10px;
    color:var(--white);
    background-color: var(--gley05);
    width:30px;
    height:30px;
    display:inline-flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    vertical-align: middle;
    transition:.3s var(--ease);
  }
  .page-nav li:hover:after, .page-nav li:hover:before{
    background-color: var(--blue01);
  }

  @media (max-width:799px)  {
    .page-nav li {
      font-size:var(--fsizeXS);
    }

  }
  /*-------------------------
  voie　詳細ページ
  -------------------------*/

.article_post {
    flex:1;
}
.article_cont .box_tit {
    padding-bottom:var(--size10);
    border-bottom:3px var(--orange02) solid;
    margin-bottom:var(--size60);
} 
.article_cont .box_tit .info_post {
    justify-content: space-between;
    align-items: center;
    gap:var(--size10);
}
.article_cont .box_tit .info_post .catname {
  padding: 0.25em 0.5em 0.25em 0;
  line-height:2;
  display: inline-block;
}
.mv_post {
    margin-bottom:var(--size60);
}
.mv_post img {
    width:100%;
    height:auto;
    display: block;
}
.box_content {
    background-color: #FFF;
    border-radius: 20px;
    padding: var(--size40) 5%;
    box-shadow: var(--shadow02);
}

.article_cont h2 {
    background-color: var(--orange01);
    color:var(--white);
    padding:var(--size10);
    padding-inline: 0.5em;
    text-align: left;
    font-size:calc(0.75*var(--fsizeXXL))
}
.article_cont * + h2 {
  margin-top:var(--size40);
}
.article_cont h2 + *,.article_cont * + h3,.article_cont * + h4{
    margin-top:var(--size30);
}
.article_cont h3 {
    position:relative;
    padding-left:0.75em;
    font-size:var(--fsizeXL)
}

.article_cont h3 + * {
    margin-top:var(--size20); 
}
.article_cont h3:before{
    content:"";
    width:2px;
    height:100%;
    background-color: var(--orange01);
    display: block;
    position:absolute;
    left:0;
    top:0;
}
.article_cont h4 {
    font-size:calc(1.125*var(--fsizeM));
    padding:calc(var(--size10)/2) 0;
    padding-inline: 1em;
    background-color: var(--gley02);
    font-weight:600;
    border-left:2px solid var(--orange01);
}
.article_cont h4 + * {
    margin-top:var(--size10); 
}
.article_cont .baloon_box {
    border-radius: var(--size10);
    padding:var(--size20) 0;
}
.article_cont .baloon_box p {
    padding-inline: 1.5em;
}

@media (max-width:799px)  {

  .article_cont .box_tit .info_post{
    flex-flow: column-reverse;
  }
  .article_cont .box_tit .info_post time {
    display: block;
    text-align: right;
    width:100%;
  }
}