@charset "UTF-8";
/* CSS Document */
/* --------------------------------------------------
	section size
-------------------------------------------------- */
/* 初期設定 */
/* 基本設定 */
/* ----------------------------------------------------------------------
ブログ(レイアウト)
---------------------------------------------------------------------- */
#blog-area {
  padding: 16rem 0;
}
@media screen and (max-width: 520px) {
  #blog-area {
    padding: 4rem 0 7rem;
  }
}
#blog-area .inner {
  row-gap: 1em;
  font-size: 1.8rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
  font-weight: 400;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
  align-content: stretch;
}
@media screen and (max-width: 1024px) {
  #blog-area .inner {
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 1024px) and (max-width: 520px) {
  #blog-area .inner {
    flex-direction: column-reverse;
    font-size: 1.4rem;
  }
}
#blog-area .inner .side-bar {
  width: 9em;
  height: auto;
  position: relative;
}
@media screen and (max-width: 840px) {
  #blog-area .inner .side-bar {
    width: 6em;
  }
}
@media screen and (max-width: 840px) and (max-width: 520px) {
  #blog-area .inner .side-bar {
    width: 100%;
  }
}
#blog-area .inner .side-bar .sticky-box {
  position: sticky;
  top: 12em;
}
#blog-area .inner .side-bar .sticky-box .side-item {
  padding-left: 1em;
  margin-bottom: 1em;
  position: relative;
}
#blog-area .inner .side-bar .sticky-box .side-item:last-of-type {
  margin-bottom: 0;
}
#blog-area .inner .side-bar .sticky-box .side-item:hover {
  color: #a62125;
}
#blog-area .inner .side-bar .sticky-box .side-item:hover:before {
  content: "";
  display: block;
  width: 0.4em;
  height: 0.4em;
  border-radius: 50%;
  position: absolute;
  inset: 0 auto 0 0.3rem;
  margin: auto 0;
  background-color: #a62125;
}
#blog-area .inner .side-bar .sticky-box .catebtn-box {
  padding-bottom: 2em;
  border-bottom: 2px solid #808080;
}
#blog-area .inner .side-bar .sticky-box .archive-box {
  padding-top: 1em;
}
#blog-area .inner .side-bar .sticky-box .archive-box .ttl-box {
  font-size: 2rem;
  padding-left: 0.2em;
  margin-bottom: 0.5em;
  color: #808080;
}
#blog-area .inner .side-bar .sticky-box .archive-box li {
  line-height: 1;
}
#blog-area .inner .blog-wrap {
  width: calc(100% - 12em);
}
@media screen and (max-width: 840px) {
  #blog-area .inner .blog-wrap {
    width: calc(100% - 8em);
  }
}
@media screen and (max-width: 840px) and (max-width: 520px) {
  #blog-area .inner .blog-wrap {
    width: 100%;
  }
}

/* ----------------------------------------------------------------------
ブログ(一覧)
---------------------------------------------------------------------- */
.blog-wrap.archive .post-list {
  margin-bottom: 1em;
}
.blog-wrap.archive .post-list .blog-box {
  width: 100%;
  border-bottom: 2px solid #808080;
}
.blog-wrap.archive .post-list .blog-box a {
  padding: 2em 1em;
  position: relative;
  row-gap: 1em;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  align-content: stretch;
}
.blog-wrap.archive .post-list .blog-box a .data {
  width: 13em;
  font-size: 80%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  align-content: stretch;
}
.blog-wrap.archive .post-list .blog-box a .data .cate {
  color: #a62125;
}
.blog-wrap.archive .post-list .blog-box a h4.ttl {
  width: calc(100% - 16em);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media screen and (max-width: 520px) {
  .blog-wrap.archive .post-list .blog-box a h4.ttl {
    width: 100%;
  }
}
.blog-wrap.archive .news-nav {
  padding: 1.8em 1.7em;
  width: fit-content;
  margin-left: auto;
}
.blog-wrap.archive .news-nav .wp-pagenavi {
  display: flex;
  align-items: center;
  gap: 1.5em;
}
.blog-wrap.archive .news-nav .wp-pagenavi a, .blog-wrap.archive .news-nav .wp-pagenavi span {
  border: none;
  padding: 0;
  margin: 0;
}
.blog-wrap.archive .news-nav .wp-pagenavi span.current {
  color: #a62125;
}

/* ----------------------------------------------------------------------
ブログ(シングル)
---------------------------------------------------------------------- */
.blog-wrap.single {
  padding: 2em 1em;
  background-color: #f7f7f7;
}
.blog-wrap.single .txt-area {
  font-size: 1.8rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
  font-weight: 400;
}
@media screen and (max-width: 1024px) {
  .blog-wrap.single .txt-area {
    font-size: 1.6rem;
  }
}
@media screen and (max-width: 1024px) and (max-width: 520px) {
  .blog-wrap.single .txt-area {
    font-size: 1.4rem;
  }
}
.blog-wrap.single .txt-area * {
  letter-spacing: 0.1em;
}
.blog-wrap.single .txt-area > .date {
  margin-top: 0;
  font-size: 80%;
}
.blog-wrap.single .txt-area > h1.ttl {
  font-size: 155%;
  background-color: #a62125;
  color: #fff;
  padding: 0.2em 1em;
}
.blog-wrap.single .txt-area > h2 {
  font-size: 155%;
  font-weight: bold;
  margin-top: 4em;
  padding: 0.2em 0;
  width: 100%;
  position: relative;
  border-bottom: 3px solid #c4c1bf;
}
.blog-wrap.single .txt-area > h2:after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 3em;
  height: 3px;
  background-color: #a62125;
}
.blog-wrap.single .txt-area > h3 {
  font-size: 122%;
  font-weight: bold;
  padding: 0.1em 0.4em;
  margin-top: 4em;
  width: fit-content;
  color: #fff;
  background-color: #333333;
}
.blog-wrap.single .txt-area > h4 {
  margin-top: 4em;
  color: #a62125;
  font-weight: bold;
}
.blog-wrap.single .txt-area > p {
  line-height: 2;
  margin-top: 2em;
}
.blog-wrap.single .txt-area > figure {
  margin-top: 2em;
}
.blog-wrap.single .np-link {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 2rem;
  margin-top: 7em;
}
.blog-wrap.single .np-link .pre-box a, .blog-wrap.single .np-link .next-box a {
  display: inline-block;
  background-color: #a62125;
  border: 1px solid #a62125;
  width: 5rem;
  border-radius: 1.2rem;
  height: 2.4rem;
  position: relative;
}
.blog-wrap.single .np-link .pre-box a .arrow-box, .blog-wrap.single .np-link .next-box a .arrow-box {
  display: block;
  position: absolute;
  inset: 0;
  margin: auto;
  width: 30%;
  aspect-ratio: 386/247;
  padding: 0;
  background-image: url(../img/common/wh-arrow.svg);
}
.blog-wrap.single .np-link .pre-box a .arrow-box.re, .blog-wrap.single .np-link .next-box a .arrow-box.re {
  background-image: url(../img/common/wh-arrow-re.svg);
}
.blog-wrap.single .np-link .pre-box a:hover, .blog-wrap.single .np-link .next-box a:hover {
  background-color: transparent;
}
.blog-wrap.single .np-link .pre-box a:hover .arrow-box, .blog-wrap.single .np-link .next-box a:hover .arrow-box {
  transform: translateX(4%);
  filter: brightness(0) saturate(100%) invert(44%) sepia(79%) saturate(456%) hue-rotate(90deg) brightness(95%) contrast(85%);
}
.blog-wrap.single .np-link .pre-box a:hover .arrow-box.re, .blog-wrap.single .np-link .next-box a:hover .arrow-box.re {
  animation-direction: reverse;
}