@charset "UTF-8";

/* blog & archive
---------------------------------------- */
.single header,
.archive header {
  width: 100%;
  height: 33vh;
  background: url("../images/crown/blog/blog-main.webp") no-repeat top left transparent;
  background-size: cover;
  position: relative;
}
.single header h1,
.archive header h1 {
  position: absolute;
  top: 20vw;
  right: 14vw;
  line-height: 2em;
  writing-mode: horizontal-tb;
  color: #fff;
  font-family: var(--font-shipporMincho);
  font-weight: 700;
  font-size: var(--f-46);
}
/* blog & archive
---------------------------------------- */
.category-annex.single header,
.category-annex.archive header {
  width: 100%;
  height: 33vh;
  background: url("../images/annex/contacts/contacts-main.webp") no-repeat top left transparent;
  background-size: cover;
  position: relative;
}
.category-annex.single header h1,
.category-annex.archive header h1 {
  position: absolute;
  top: 20vw;
  right: 14vw;
  line-height: 2em;
  writing-mode: horizontal-tb;
  color: #fff;
  font-family: var(--font-shipporMincho);
  font-weight: 700;
  font-size: var(--f-46);
}

/* blog & archive main
---------------------------------------- */
.archive main,
.single main {
  display: flex;
  justify-content: space-between;
  max-width: 1150px;
  width: auto;
  margin: 0 auto;
  gap: 3vw;
  padding-top: 3vw;
  margin-bottom: 3vw;
}

/* blog & archive main
---------------------------------------- */
.archive main .main-kizi,
.single main .main-kizi {
  width: 900px;
}

/* blog & archive main 記事部分
---------------------------------------- */
.archive main h1,
.single main h1 {
  text-align: center;
  margin: 0 0 3vw;
  font-size: var(--f-26);
  color: var(--green01);
}
.archive main h1::before {
  font-family: var(--icon-font);
  content: "\f521";
  font-weight: 900;
  margin-right: 0.5em;
}
.archive main h1::after {
  font-family: var(--icon-font);
  content: "\f521";
  font-weight: 900;
  margin-left: 0.5em;
}
.single main h1 {
  margin: 0 0 3vw;
  font-size: var(--f-26);
  color: var(--green01);
  text-align: left;
  padding: 0;
}
.single main p {
  margin: 0 0 1em;
  font-size: var(--f-16);
  line-height: 1.5em;
  padding: 0;
}
.single main p.day {
  margin: 0 0 2vw;
  font-size: var(--f-14);
  line-height: 1.5em;
  padding: 0;
}
.single main img {
  margin: 0 auto 2vw;
  padding: 0;
  display: block;
  max-width: 600px;
  width: auto;
}
.archive main h2,
.single main h2 {
  margin: 2vw 0;
  font-size: var(--f-24);
  color: var(--green01);
  text-align: left;
}
.archive .archiveBox,
.single .archiveBox {
  max-width: 1150px;
  width: auto;
  margin: 0 auto 5vw;
  display: flex;
  justify-content: space-between;
  gap: 2vw;
  padding: 2vw 0 0;
  border-top: 1px solid #999;
}
.archive .archiveBox figure,
.single .archiveBox figure {
  width: 30vw;
}
.archive .archiveBox .archiveTxt,
.single .archiveBox .archiveTxt {
  width: 100%;
}
.post-categories {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 1em;
  flex-wrap: wrap;
  line-height: 2em;
}
.post-categories a {
  background-color: var(--orange);
  padding: 0.3em 1em;
  text-decoration: none;
  font-size: var(--f-15);
  line-height: 1.2em;
  color: #fff;
  border: 1px solid var(--orange);
  border-radius: 3px;
  white-space: nowrap;
}
.archive nav h2,
.single nav h2 {
  margin: 0 0 1vw;
  font-size: var(--f-14);
  color: var(--green01);
  text-align: left;
  color: #fff;
  background-color: var(--green01);
  padding: 0.3em 1em;
  border-radius: 3px;
}
nav .entries,
.recentCategories ul,
.recentArchives ul {
  margin-bottom: 1.5em;
}
.recentCategories li,
.recentArchives li {
  margin-bottom: 0.5em;
}
.recentCategories li::before,
.recentArchives li::before {
  font-family: var(--icon-font);
  content: "\f521";
  font-weight: 900;
  margin-right: 0.5em;
}
nav .entries p {
  font-size: var(--f-13);
}
nav .entries h3 {
  margin-bottom: 0.5em;
  font-size: var(--f-16);
  border-bottom: 1px dotted #666;
  padding-bottom: 0.5em;
}

/* カテゴリアネックスの時だけ色変更 */
.category-annex footer {
  background-color: var(--khaki01);
}
.category-annex .footerBox {
  background-color: var(--khaki01);
}

@media only screen and (max-width: 900px) {
  .archive main .main-kizi,
  .single main .main-kizi {
    width: auto;
  }
}
@media only screen and (max-width: 820px) {
  .archive main,
  .single main {
    margin: 0 10px;
  }
}
@media only screen and (max-width: 500px) {
  .archive main,
  .single main {
    flex-direction: column;
  }
  .archive .archiveBox,
  .single .archiveBox {
    flex-direction: column;
  }
  .archive .archiveBox figure,
  .single .archiveBox figure {
    width: 100%;
  }
}