@charset "utf-8";
img { max-width: 100%; height: auto; }
.mt3em { margin-top: 3em; }
.mt2em { margin-top: 2em; }
.mt1em { margin-top: 1em; }
em { font-style: italic; font-weight: normal; }

@media screen and (min-width: 768px) {
  .sp-only { display: none; }
}


.page-title { margin-top: 1em; }


.home-main-post { margin: 42px 0 20px; }
.home-main-post .title { font-size: .625rem; font-style: italic; margin-top: 2em; }


.post-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 35px 20px;}
.post-list .item { border-top: 1px solid #8E8E8E; padding-top: .5em; }
.post-list .title { margin-bottom: .3em;  }
.post-list .title-sub { font-size: .625rem; font-style: italic; margin-bottom: 1em; }
.post-list em { font-weight: normal; font-style: italic; }

.post-list .thumbnail { width: 100%; aspect-ratio: 16 / 9; position: relative; }
.post-list .thumbnail img { width: 100%; height: 100%;  object-fit: cover; }


.post-archive { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 35px 20px; margin-top: 40px; }
.post-archive .item { border-bottom: 1px solid #EEEEEE; padding-bottom: 1em;  }
.post-archive .title { margin-bottom: 1em; }

.post-archive .thumbnail { width: 100%; aspect-ratio: 16 / 9; position: relative; }
.post-archive .thumbnail img { width: 100%; height: 100%;  object-fit: cover; }

.post-archive .excerpt { font-size: .625rem; line-height: 1.6; margin-top: 1em; }
.post-archive .view { font-size: .625rem; text-decoration: underline; margin-top: .5em; }

@media screen and (max-width:600px) {
  .post-archive { grid-template-columns: 1fr; }
}


.wp-pagenavi { margin-top: 1.5em; font-size: .6875rem; }
.wp-pagenavi a { text-decoration: underline; }
.wp-pagenavi .page,
.wp-pagenavi .current,
.wp-pagenavi .previouspostslink,
.wp-pagenavi .nextpostslink { margin-left: .5em; }


.single-head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; font-size: .85rem; margin: 17px 0 30px; }
.single-head .title { font-size: 1rem; margin-bottom: 1em; }

@media screen and (max-width:900px) {
  .single-head { grid-template-columns: 1fr; gap: 2rem; }
}
.single-body .thumbnail { width: 100%; aspect-ratio: 16 / 9; }
.single-body .thumbnail img { width: 100%; height: 100%; object-fit: cover; }


.single-body .body { margin: 0 0 40px; font-size: .85rem; }
.single-body .body .wp-block-image img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.single-body .body .wp-block-image { margin-bottom: 2em; }

.single-body .body h2 { font-weight: bold; }
.single-body .body h3 { font-weight: bold; }
.single-body .body h4 { font-weight: bold; }
.single-body .body a { text-decoration: underline; font-style: italic; }


.post-share { display: flex; justify-content: flex-end; font-size: 0.625rem; margin-top: 30px; }
.post-share a { text-decoration: underline; }
.post-share a + a::before { content: '|'; margin: 0 .5em; }


.wp-block-embed-youtube { width: 100%; aspect-ratio: 16 / 9; position: relative; margin-bottom: 2em; }
.wp-block-embed-youtube .wp-block-embed__wrapper { width: 100%; height: 100%; }
.wp-block-embed-youtube iframe { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; margin: auto; }


/* 画像 */
.wp-block-image.alignwide,
.wp-block-video.alignwide,
.wp-block-embed.alignwide {
  max-width: 940px;
}

a.back-to-list { text-decoration: underline; font-size: .625rem; margin-top: 3em; font-style: italic; display: block; width: fit-content; }


.single-body {
  --content-width: 720px;
}

.single-body .body p,
.single-body .body .wp-block-paragraph,
.single-body .body .wp-block-heading,
.single-body .body .wp-block-list,
.single-body .body .wp-block-quote {
  max-width: var(--content-width);
  margin-inline: auto;
  margin-bottom: 1em;
}

.single-body .body { margin-top: 70px; }
.single-body .body p + .wp-block-image ,
.single-body .body p + .wp-block-embed {
  margin-top: 70px; 
}

@media screen and (max-width:900px) {
  .single-body .body { margin-top: 40px; }
  .single-body .body p + .wp-block-image ,
  .single-body .body p + .wp-block-embed {
    margin-top: 40px; 
  }
}

.single-body .end { margin-top: 7em; width: 100%; font-size: .85rem; }
.single-body .end > * { width: 100%; max-width: none; }