@charset "UTF-8";

/* モバイルレイアウト : 480 px およびそれ以下. */
/* --------------------------------------------------------
main  -  single
-------------------------------------------------------- */
/* 記事タイトルとはみ出しそうなテキストに適用 */
.newsTitle h3,
.newsTxt {
  overflow-wrap: break-word; /* 枠の端で折り返す */
  word-break: break-all;     /* 長い英単語なども強制的に折る */
}
/* 背景色あり 基本形 */
.bgBox{
  background-color: var(--bg-color-accent-02);
  margin-top: 10%;
}

/* section 見出し */
.sectionTitle{
  h2{
    background-color: var(--accent-color-02);
  }
}
h3{
  color: var(--accent-color-02);
  font-size: 2.2rem;
}

.whiteBox{
  max-width: 1200px;
  margin: 0 auto 5%;
}
.date{
  color: #565653;
  text-align: right;
}
.news .pcFlexBox{
  border-bottom: var(--accent-color-02) 1px dashed;
  margin-bottom: 0.3em;
  margin-bottom: 5%;
}
.next_prev{
  display: flex;
  gap: 1em;
  align-items: center;
  justify-content: center;
}
.next_prev a, .center a{
  color: var(--color-navy);
}
.center{
  text-align: center;
  margin-top: 3%;
}
.whiteBox a{
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-all;
}
/* タグ */
.post-category{
  background-color: var(--accent-color-02);
  padding: 1px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  color: #fff;
  width: fit-content;
  font-size: 1.5rem;
}
/* --------------------------------------------------------
main  -  archive
-------------------------------------------------------- */
.blogItem{
  margin-bottom: 5%;
}
.blogItem:last-of-type{
  margin-bottom: 0;
}
.archive .newsTitle{
  text-decoration: none;
}
.archive h3{
  border-bottom: var(--accent-color-02) 1px dashed;
  padding-bottom: 0.3em;
  margin-bottom: 5%;
}
.archive h3::before{
  content: "■";
  margin-right: 0.3em;
}
.archive .date{
  margin-top: 5%;
  margin-bottom: 0;
  line-height: 1;
}
.archive a{
  color: var(--color-navy);
}
.archive .nav-links{
  text-align: center;
}
/* カテゴリー */
.categoryMenu ul{
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.categoryMenu ul li a{
  color: var(--accent-color-02);
  font-weight: 600;
}
.categoryMenu ul li::before{
  color: var(--accent-color-02);
  content: "＃";
  font-weight: 600;
}
/* アイキャッチ*/
.thumbnail {
  width: 100%;
  max-width: 300px;
  margin: 0 auto 5%;
  position: relative;
  aspect-ratio: 3 / 2; /* 3:2の比率を維持 */
  overflow: hidden;
  display: block;      /* flexを解除してシンプルに */
}

/* 中間のaタグを親いっぱいに広げる */
.thumbnail a {
  display: block;
  width: 100%;
  height: 100%;
}

/* 画像を枠いっぱいに広げてトリミング */
.thumbnail img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;    /* 縦長画像でも中央で切り取って埋める */
  object-position: center;
  display: block;
}

@media print, screen and (min-width: 768px) {
  /* --------------------------------------------------------
main  -  single
-------------------------------------------------------- */
.whiteBox {
    margin-bottom: 50px;
  }
.bgBox{
  margin-top: 120px;
}


.news .pcFlexBox{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 30px;
  padding-bottom: 1.63em;
}
.news h3{
  margin-bottom: 0;
}
.news .date{
  margin-bottom: 0;
}
.center{
  text-align: center;
  margin-top: 30px;
}

/* --------------------------------------------------------
main  -  archive
-------------------------------------------------------- */
.blogItem{
  margin-bottom: 30px;
}
.blogItem:last-of-type{
  margin-bottom: 0;
}
.archive h3{
  margin-bottom: 20px;
}
.archive .date{
  margin-top: 20px;
}
.thumbnail{
  margin-bottom: 30px;
}
}
@media print, screen and (min-width: 981px) {
/* --------------------------------------------------------
main  -  archive
-------------------------------------------------------- */
.blogItem{
  display: flex;
  align-items: center;
  gap: 50px;
  width: 100%;
  margin-bottom: 30px;
}
.blogItem:last-of-type{
  margin-bottom: 0;
}
.thumbnail{
  margin-bottom: 0;
}
.newsTxt{
  width: 100%;
}
}