@charset "UTF-8";
/*============================================================

  CONTENT ARCHIVE 共通

============================================================*/
/* Option B: コンテンツページの罫線をグローバルから消す */
body.openatelier .container,
body.teaparty .container,
body.watching .container {
  border-left: none;
  border-right: none;
}
body.openatelier .post_list[data-list-type=card] li,
body.teaparty .post_list[data-list-type=card] li,
body.watching .post_list[data-list-type=card] li {
  border-right: none;
  border-bottom: none;
  padding: 0;
}
body.openatelier .post_list[data-list-type=card] .postBody,
body.teaparty .post_list[data-list-type=card] .postBody,
body.watching .post_list[data-list-type=card] .postBody {
  padding: 2rem 0 2rem;
}
body.openatelier .post_list[data-list-type=card] .post_date,
body.teaparty .post_list[data-list-type=card] .post_date,
body.watching .post_list[data-list-type=card] .post_date {
  color: var(--color-primary);
}
body.openatelier .post_list[data-list-type=card],
body.teaparty .post_list[data-list-type=card],
body.watching .post_list[data-list-type=card] {
  /* NEWバッジ: li(--is-new)基準の位置・サイズに揃える（liはこのコンテキストでpadding:0のため.postImgと同サイズ）。.postImgはoverflow:hiddenのため親にはしない（バッジが左上にはみ出せるように） */
}
body.openatelier .post_list[data-list-type=card] li.--is-new,
body.teaparty .post_list[data-list-type=card] li.--is-new,
body.watching .post_list[data-list-type=card] li.--is-new {
  position: relative;
}
body.openatelier .post_list[data-list-type=card] li.--is-new::before, body.openatelier .post_list[data-list-type=card] li.--is-new::after,
body.teaparty .post_list[data-list-type=card] li.--is-new::before,
body.teaparty .post_list[data-list-type=card] li.--is-new::after,
body.watching .post_list[data-list-type=card] li.--is-new::before,
body.watching .post_list[data-list-type=card] li.--is-new::after {
  content: "";
  position: absolute;
  top: -3rem;
  left: -3rem;
  width: 120px;
  aspect-ratio: 108.173/62.858;
  -webkit-mask: url("/assets/images/new_mask_star.svg") no-repeat center/contain;
          mask: url("/assets/images/new_mask_star.svg") no-repeat center/contain;
  z-index: 2;
  transform: rotate(-20deg);
  pointer-events: none;
  transition: background-color 0.3s ease;
}
body.openatelier .post_list[data-list-type=card] li.--is-new::before,
body.teaparty .post_list[data-list-type=card] li.--is-new::before,
body.watching .post_list[data-list-type=card] li.--is-new::before {
  background-color: #000;
}
body.openatelier .post_list[data-list-type=card] li.--is-new::after,
body.teaparty .post_list[data-list-type=card] li.--is-new::after,
body.watching .post_list[data-list-type=card] li.--is-new::after {
  -webkit-mask-image: url("/assets/images/new_mask_text.svg");
          mask-image: url("/assets/images/new_mask_text.svg");
  background-color: #fff;
}
body.openatelier .post_list[data-list-type=card] li.--is-new,
body.teaparty .post_list[data-list-type=card] li.--is-new,
body.watching .post_list[data-list-type=card] li.--is-new {
  /* ホバー時: .generalページと同じく黒文字+黄色背景にふわっと切り替え */
}
@media (any-hover: hover) {
  body.openatelier .post_list[data-list-type=card] li.--is-new:has(a:hover)::before,
  body.teaparty .post_list[data-list-type=card] li.--is-new:has(a:hover)::before,
  body.watching .post_list[data-list-type=card] li.--is-new:has(a:hover)::before {
    background-color: #FFFE54;
  }
  body.openatelier .post_list[data-list-type=card] li.--is-new:has(a:hover)::after,
  body.teaparty .post_list[data-list-type=card] li.--is-new:has(a:hover)::after,
  body.watching .post_list[data-list-type=card] li.--is-new:has(a:hover)::after {
    background-color: #000;
  }
}
@media screen and (max-width: 812px) {
  body.openatelier .post_list[data-list-type=card] li.--is-new::before, body.openatelier .post_list[data-list-type=card] li.--is-new::after,
  body.teaparty .post_list[data-list-type=card] li.--is-new::before,
  body.teaparty .post_list[data-list-type=card] li.--is-new::after,
  body.watching .post_list[data-list-type=card] li.--is-new::before,
  body.watching .post_list[data-list-type=card] li.--is-new::after {
    top: -2rem;
    left: 0;
    width: 70px;
  }
}

/* NEWバッジ SP時の左位置: watchingのみ左にはみ出す量を変える */
@media screen and (max-width: 812px) {
  body.watching .post_list[data-list-type=card] li.--is-new::before, body.watching .post_list[data-list-type=card] li.--is-new::after {
    left: -1.5rem;
  }
}

/* テーマカラー変数 */
.openatelier {
  --content-accent: #12a355;
  --content-bg: #faf3e2;
  --content-text: #1a1a1a;
}

.teaparty {
  --content-accent: #1a1a1a;
  --content-bg: #e8695e;
  --content-text: #1a1a1a;
}

.watching {
  --content-accent: #1a1a1a;
  --content-bg: #f5f5f5;
  --content-text: #1a1a1a;
}

/*--------------------------------
  main padding（main はglobal から var(--height-header) が入る）
--------------------------------*/
body.openatelier {
  background-color: var(--content-bg);
}
body.openatelier main {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 500;
}
body.openatelier .post_list[data-list-type=card] {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Arial, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  font-weight: normal;
}
body.openatelier #content_author .author_name {
  font-weight: 700;
}
body.openatelier #content_list .content_list_head {
  font-weight: 700;
}

body.teaparty {
  background-color: var(--content-bg);
}
body.teaparty main {
  font-family: "Zen Old Mincho", "游明朝", "Yu Mincho", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "HGS明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
  font-weight: 600;
}
@media screen and (max-width: 812px) {
  body.teaparty .post_list[data-list-type=card] {
    gap: 3rem;
  }
}
body.teaparty #content_list .post_list[data-list-type=card],
body.teaparty #post_recommend .post_list[data-list-type=card] {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", Arial, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
  font-weight: normal;
}

body.watching {
  background-color: var(--content-bg);
}

/* watching 一覧ページ: 背景画像を敷き詰め（PC/SPで画像を切替。どちらもRetina対応の2倍サイズなので、表示は元画像の50%で指定） */
body.watching.archive {
  background-image: url("/assets/images/bg_watching.png");
  background-repeat: repeat;
  background-size: 720px 350px;
}
@media screen and (max-width: 812px) {
  body.watching.archive {
    background-image: url("/assets/images/bg_watching_sp.png");
    background-size: 196px 250px;
  }
}

/*============================================================
  #content_hero
============================================================*/
#content_hero {
  width: 100%;
  overflow: hidden;
  position: relative;
}
#content_hero .hero_inner {
  position: relative;
  display: flex;
}
#content_hero .hero_bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
#content_hero .hero_bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/* ---- openatelier ヒーロー ---- */
body.openatelier #content_hero {
  padding-top: 0;
  padding-bottom: 0;
  background-color: transparent;
}
body.openatelier #content_hero .hero_inner {
  min-height: 80vh;
}
@media screen and (max-width: 812px) {
  body.openatelier #content_hero .hero_inner {
    min-height: 0;
  }
}
body.openatelier #content_hero .hero_visual {
  width: 100%;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 812px) {
  body.openatelier #content_hero .hero_visual {
    min-height: 40vh;
  }
}
body.openatelier #content_hero .hero_visual img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/* ---- teaparty ヒーロー ---- */
body.teaparty #content_hero {
  padding-top: 0;
  padding-bottom: 0;
  background-color: transparent;
}
body.teaparty #content_hero .hero_inner {
  min-height: 80vh;
}
@media screen and (max-width: 812px) {
  body.teaparty #content_hero .hero_inner {
    min-height: 0;
  }
}
body.teaparty #content_hero .hero_visual {
  width: 100%;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 812px) {
  body.teaparty #content_hero .hero_visual {
    min-height: 40vh;
  }
}
body.teaparty #content_hero .hero_visual img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}

/* ---- watching ヒーロー ---- */
body.watching #content_hero {
  padding-top: 0;
  padding-bottom: 0;
  background-color: transparent;
}
body.watching #content_hero .hero_inner {
  min-height: 80vh;
}
@media screen and (max-width: 812px) {
  body.watching #content_hero .hero_inner {
    min-height: 0;
  }
}
body.watching #content_hero .hero_visual {
  width: 100%;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 812px) {
  body.watching #content_hero .hero_visual {
    min-height: 40vh;
  }
}
body.watching #content_hero .hero_visual img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
body.watching #content_hero .hero_text {
  position: absolute;
  right: 6%;
  bottom: 18%;
  z-index: 1;
  text-align: right;
  color: #1a1a1a;
}
@media screen and (max-width: 812px) {
  body.watching #content_hero .hero_text {
    right: 5%;
    bottom: 8%;
  }
}
body.watching #content_hero .hero_text strong {
  display: block;
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(18px, 2.2vw, 26px);
  line-height: 1.5;
}
@media screen and (max-width: 812px) {
  body.watching #content_hero .hero_text strong {
    font-size: 16px;
  }
}
body.watching #content_hero .hero_text span {
  display: block;
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 1.3rem;
  color: rgba(26, 26, 26, 0.7);
  margin-top: 0.6rem;
}

/*============================================================
  #content_author
============================================================*/
#content_author {
  padding: 8rem 0;
}
@media screen and (max-width: 812px) {
  #content_author {
    padding: 5rem 0;
  }
}
#content_author {
  /* デフォルト: 縦並び中央寄せ (openatelier) */
}
#content_author .author_label {
  display: none; /* watching以外では非表示 */
}
#content_author .author_inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2rem;
  max-width: 640px;
  margin: 0 auto;
}
#content_author .author_img {
  width: 140px;
  flex: 0 0 auto;
}
@media screen and (max-width: 812px) {
  #content_author .author_img {
    width: 110px;
  }
}
#content_author .author_img img {
  width: 100%;
  border-radius: 50%;
  aspect-ratio: 1/1;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
#content_author .author_body {
  flex: 1;
}
#content_author .author_name {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: bold;
  letter-spacing: 0.06em;
  margin-bottom: 0.4rem;
}
#content_author .author_name_en {
  font-size: 1.3rem;
  color: #888;
  letter-spacing: 0.12em;
  margin-bottom: 1.6rem;
}
#content_author .author_bio {
  font-size: 1.4rem;
  line-height: 1.9;
  color: #555;
  text-align: left;
  margin-bottom: 1.6rem;
}
#content_author .author_sns {
  display: flex;
  gap: 1.6rem;
  align-items: center;
  justify-content: center;
}
#content_author .author_sns a {
  display: flex;
  align-items: center;
  color: var(--color-primary);
}
#content_author .author_sns a svg {
  width: 24px;
  height: 24px;
  display: block;
}
@media (any-hover: hover) {
  #content_author .author_sns a:hover {
    opacity: 0.6;
  }
}

/* teaparty: ボーダーBOX・横並び・正方形写真 */
body.teaparty #content_author .content_author_head {
  text-align: center;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 600;
  letter-spacing: 0.15em;
  margin-bottom: 2rem;
}
body.teaparty #content_author .author_inner {
  flex-direction: row;
  align-items: flex-start;
  text-align: left;
  gap: 3rem;
  max-width: none;
  border: 4px solid #1a1a1a;
  outline: 2px solid #1a1a1a;
  outline-offset: -10px;
  padding: 5rem;
}
@media screen and (max-width: 812px) {
  body.teaparty #content_author .author_inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 4rem 2rem;
    gap: 2rem;
  }
}
body.teaparty #content_author .author_img {
  flex: 3;
}
@media screen and (max-width: 812px) {
  body.teaparty #content_author .author_img {
    flex: none;
    width: 120px;
  }
}
body.teaparty #content_author .author_img img {
  border-radius: 0;
}
body.teaparty #content_author .author_body {
  flex: 7;
}
body.teaparty #content_author .author_name,
body.teaparty #content_author .author_name_en,
body.teaparty #content_author .author_bio {
  color: #1a1a1a;
}
body.teaparty #content_author .author_bio {
  text-align: left;
}
body.teaparty #content_author .author_sns {
  justify-content: flex-end;
}
body.teaparty #content_author .author_sns a {
  color: #1a1a1a;
}
@media screen and (max-width: 812px) {
  body.teaparty #content_author .author_sns {
    justify-content: center;
  }
}

/* watching: DIRECTOR縦書きラベル + 横並び */
body.watching #content_author {
  padding-bottom: 0;
}
body.watching #content_author .author_label {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: 0.06em;
  font-size: 1.8rem;
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: italic;
  color: #1a1a1a;
}
@media screen and (max-width: 812px) {
  body.watching #content_author .author_label {
    font-size: 1.5rem;
  }
}
body.watching #content_author .author_inner {
  position: relative;
  align-items: flex-start;
  text-align: left;
  max-width: none;
  margin: 0;
  padding-left: 8rem;
  padding-right: 8rem;
}
@media screen and (max-width: 812px) {
  body.watching #content_author .author_inner {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
body.watching #content_author .author_wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 3rem;
  max-width: 900px;
  margin: 0 auto;
}
@media screen and (max-width: 812px) {
  body.watching #content_author .author_wrapper {
    flex-direction: column;
    gap: 1.6rem;
  }
}
body.watching #content_author .author_img {
  flex: 0 0 260px;
  width: 260px;
  order: 2;
  margin-top: 8.6rem;
}
@media screen and (max-width: 812px) {
  body.watching #content_author .author_img {
    flex: none;
    width: 150px;
    order: initial;
    margin: 0 auto;
  }
}
body.watching #content_author .author_img img {
  border-radius: 0;
  aspect-ratio: 1/1;
  -o-object-fit: cover;
     object-fit: cover;
}
body.watching #content_author .author_body {
  order: 1;
}
body.watching #content_author .author_name,
body.watching #content_author .author_name_en {
  color: #1a1a1a;
}
@media screen and (max-width: 812px) {
  body.watching #content_author .author_name,
  body.watching #content_author .author_name_en {
    text-align: center;
  }
}
body.watching #content_author .author_name_en {
  color: #666;
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: italic;
}
body.watching #content_author .author_bio {
  color: #444;
  text-align: left;
}
@media screen and (max-width: 812px) {
  body.watching #content_author .author_bio {
    font-size: 1.3rem;
  }
}
body.watching #content_author .author_sns {
  justify-content: flex-start;
}
body.watching #content_author .author_sns a {
  color: #1a1a1a;
}
@media screen and (max-width: 812px) {
  body.watching #content_author .author_sns {
    justify-content: center;
  }
}
body.watching #content_author .container {
  padding-bottom: 8rem;
  border-bottom: 1px solid #ccc;
}
@media screen and (max-width: 812px) {
  body.watching #content_author .container {
    padding-bottom: 4rem;
  }
}

/*============================================================
  #content_list
============================================================*/
#content_list {
  padding: 8rem 0;
}
@media screen and (max-width: 812px) {
  #content_list {
    padding: 5rem 0;
  }
}
#content_list .content_list_head {
  font-size: 1.4rem;
  font-weight: bold;
  letter-spacing: 0.15em;
  padding: 2rem 0;
  text-align: center;
}
#content_list .content_list_body {
  /* デフォルトは通常フロー */
}
#content_list .pagination {
  padding: 3rem 0;
}
#content_list .pagination ul li:first-child {
  margin-right: 2rem;
}
#content_list .pagination ul li:last-child {
  margin-left: 2rem;
}
#content_list .pagination a.prev span svg,
#content_list .pagination a.next span svg {
  margin: 0;
}

/* watching: CONTENTSラベル縦書き + 1カラム横並び */
body.watching #content_list {
  padding-bottom: 0;
}
body.watching #content_list .container {
  padding-bottom: 8rem;
  border-bottom: 1px solid #ccc;
}
@media screen and (max-width: 812px) {
  body.watching #content_list .container {
    padding-bottom: 4rem;
  }
}
body.watching #content_list .content_list_inner {
  position: relative;
  display: flex;
  gap: 12rem;
  align-items: flex-start;
  padding-left: 8rem;
  padding-right: 8rem;
}
@media screen and (max-width: 812px) {
  body.watching #content_list .content_list_inner {
    gap: 2rem;
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
body.watching #content_list .content_list_head {
  position: absolute;
  left: 0;
  top: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: 0.06em;
  font-size: 1.8rem;
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: italic;
  color: #1a1a1a;
  border-bottom: none;
  padding: 0;
  padding-top: 1rem;
}
@media screen and (max-width: 812px) {
  body.watching #content_list .content_list_head {
    font-size: 1.5rem;
  }
}
body.watching #content_list .content_list_head {
  text-align: left;
}
body.watching #content_list .content_list_body {
  flex: 1;
}
body.watching #content_list {
  /* 1カラム + 横長サムネイル */
}
body.watching #content_list .post_list[data-list-type=card] {
  grid-template-columns: 1fr;
  max-width: 600px;
}
body.watching #content_list .post_list[data-list-type=card] li + li {
  margin-top: 4rem;
}
@media screen and (max-width: 812px) {
  body.watching #content_list .post_list[data-list-type=card] .postImg {
    width: 100%;
  }
}
body.watching #content_list .post_list[data-list-type=card] .postImg img {
  aspect-ratio: 1/1;
}
body.watching #content_list .post_list[data-list-type=card] .postInfo {
  margin: 0.5em 0 0;
}
body.watching #content_list .post_list[data-list-type=card] .postInfo a {
  color: #1a1a1a;
}
body.watching #content_list .post_list[data-list-type=card] .postTitle a {
  color: #1a1a1a;
}
body.watching #content_list .post_list[data-list-type=card] .post_date {
  color: #666;
  margin-bottom: 0;
}
body.watching #content_list .post_list[data-list-type=card] .post_author_name {
  color: #1a1a1a;
}
body.watching #content_list .pagination {
  padding-top: 2rem;
}

/*============================================================
  #content_about
============================================================*/
#content_about {
  padding: 8rem 0;
}
@media screen and (max-width: 812px) {
  #content_about {
    padding: 5rem 0;
  }
}
#content_about .about_label {
  display: none; /* watching以外では非表示 */
}
#content_about .about_inner {
  display: flex;
  gap: 6rem;
  align-items: flex-start;
}
@media screen and (max-width: 812px) {
  #content_about .about_inner {
    flex-direction: column;
    gap: 3rem;
  }
}
#content_about .about_text_area {
  flex: 1;
}
#content_about .about_title {
  font-size: clamp(17px, 2vw, 22px);
  font-weight: bold;
  letter-spacing: 0.06em;
  margin-bottom: 2.4rem;
}
#content_about .about_text {
  font-size: 1.6rem;
  line-height: 2;
  color: #555;
}
@media screen and (max-width: 812px) {
  #content_about .about_text {
    font-size: 1.4rem;
  }
}
#content_about .about_text p + p {
  margin-top: 1.2em;
}
#content_about .about_visual {
  flex: 0 0 240px;
}
@media screen and (max-width: 812px) {
  #content_about .about_visual {
    flex: none;
    width: 100%;
  }
}
#content_about .about_visual img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
}

/* watching: What is Watching? 縦書きラベル + テキスト */
body.watching #content_about .about_inner {
  position: relative;
  gap: 12rem;
  align-items: flex-start;
  padding-left: 8rem;
  padding-right: 8rem;
}
@media screen and (max-width: 812px) {
  body.watching #content_about .about_inner {
    gap: 2rem;
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
body.watching #content_about .about_label {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: 0.06em;
  font-size: 1.8rem;
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: italic;
  color: #1a1a1a;
}
@media screen and (max-width: 812px) {
  body.watching #content_about .about_label {
    letter-spacing: 0.1em;
    font-size: 1.5rem;
  }
}
body.watching #content_about .about_text_area {
  flex: 1;
  max-width: 900px;
  margin: 0 auto;
}
body.watching #content_about .about_text {
  color: #333;
  font-size: 1.4rem;
}
body.watching #content_about .about_text p + p {
  margin-top: 1.6em;
}
@media screen and (max-width: 812px) {
  body.watching #content_about .about_text {
    font-size: 1.3rem;
  }
}

/* teaparty: aboutセクション 中央見出し + 白背景ボックス */
body.teaparty #content_about {
  background-color: var(--content-bg);
}
body.teaparty #content_about .about_inner {
  flex-direction: column;
  align-items: center;
  gap: 3rem;
}
body.teaparty #content_about .about_text_area {
  flex: none;
  width: 100%;
}
body.teaparty #content_about .about_title {
  text-align: center;
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: 0.15em;
}
body.teaparty #content_about .about_text {
  background-color: #fff;
  padding: 5rem 6rem;
}
@media screen and (max-width: 812px) {
  body.teaparty #content_about .about_text {
    padding: 3rem 2rem;
  }
}
body.teaparty #content_about .about_text > * {
  max-width: 660px;
  margin-left: auto;
  margin-right: auto;
}
body.teaparty #content_about .about_visual {
  display: none;
}

/*--------------------------------
  teaparty: 記事一覧 白背景 + メディアオブジェクトレイアウト
--------------------------------*/
body.teaparty #content_list .content_list_head {
  text-align: center;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 600;
  letter-spacing: 0.15em;
  margin-bottom: 2rem;
}
body.teaparty #content_list .content_list_inner {
  background-color: #fff;
  padding: 10rem 3%;
}
@media screen and (max-width: 812px) {
  body.teaparty #content_list .content_list_inner {
    padding: 4rem 3%;
  }
}
body.teaparty #content_list .post_list[data-list-type=card] {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
body.teaparty #content_list .post_list[data-list-type=card] {
  grid-template-columns: 1fr;
}
body.teaparty #content_list .post_list[data-list-type=card] li {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 2.4rem;
}
@media screen and (max-width: 812px) {
  body.teaparty #content_list .post_list[data-list-type=card] li {
    display: block;
    gap: 0;
    padding: 0;
  }
}
body.teaparty #content_list .post_list[data-list-type=card] li + li {
  margin-top: 4.8rem;
}
body.teaparty #content_list .post_list[data-list-type=card] .postImg {
  flex: 0 0 35%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
body.teaparty #content_list .post_list[data-list-type=card] .postImg img {
  aspect-ratio: 1/1;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (max-width: 812px) {
  body.teaparty #content_list .post_list[data-list-type=card] .postImg {
    flex: none;
    width: calc(100% - 4.8rem);
    margin: 0 auto;
  }
}
body.teaparty #content_list .post_list[data-list-type=card] .postBody {
  flex: 1;
  padding: 0;
}
@media screen and (max-width: 812px) {
  body.teaparty #content_list .post_list[data-list-type=card] .postBody {
    padding: 2rem 2.4rem 2.4rem;
  }
}

/*--------------------------------
  teaparty: フッター前の3人の手
--------------------------------*/
body.teaparty #content_closing {
  padding: 0;
}
body.teaparty #content_closing .closing_visual {
  display: block;
  width: 600px;
  height: auto;
  margin: 0 auto -1px;
}
@media screen and (max-width: 812px) {
  body.teaparty #content_closing .closing_visual {
    width: 80%;
  }
}

/*--------------------------------
  コンテンツページ: フッターマーキー非表示
--------------------------------*/
body.openatelier .footer_marquee,
body.teaparty .footer_marquee,
body.watching .footer_marquee {
  display: none;
}

/*--------------------------------
  ページネーション現在地: コンテンツ別カラー上書き
--------------------------------*/
body.teaparty .pagination span.current {
  color: #D54F43;
}

/*--------------------------------
  openatelier: author_name_en 非表示
--------------------------------*/
body.openatelier .author_name_en {
  display: none;
}

/*--------------------------------
  openatelier: 記事一覧 カード調整
--------------------------------*/
body.openatelier .post_list[data-list-type=card] {
  gap: 8rem;
}
@media screen and (max-width: 812px) {
  body.openatelier .post_list[data-list-type=card] {
    gap: 3rem;
  }
}

/*--------------------------------
  openatelier: About セクション
--------------------------------*/
body.openatelier #content_about {
  text-align: center;
}
body.openatelier #content_about .about_title {
  color: var(--content-accent);
  font-size: 3rem;
  font-weight: 700;
}
@media screen and (max-width: 812px) {
  body.openatelier #content_about .about_title {
    font-size: clamp(17px, 2vw, 22px);
  }
}
body.openatelier #content_about .about_text {
  text-align: center;
}
body.openatelier #content_about .about_visual {
  display: none;
}
body.openatelier #content_about .about_inner {
  justify-content: center;
}
body.openatelier #content_about .about_text_area {
  flex: none;
  max-width: 640px;
}

/*--------------------------------
  openatelier: フッター前のひらくキャラクター（archive/single 共通）
--------------------------------*/
body.openatelier #content_closing {
  padding: 0;
  border-bottom: 6rem solid var(--content-accent);
}
@media screen and (max-width: 812px) {
  body.openatelier #content_closing {
    border-bottom-width: 3rem;
  }
}
body.openatelier #content_closing .closing_visual {
  display: block;
  width: 100px;
  height: auto;
  margin: 0;
}
@media screen and (max-width: 812px) {
  body.openatelier #content_closing .closing_visual {
    width: 64px;
  }
}

/*--------------------------------
  検索結果・記事一覧: 該当なし
--------------------------------*/
.noResult {
  margin: 0;
  padding: 5rem 2rem;
}

/*============================================================

  CONTENT SINGLE 共通

============================================================*/
/*--------------------------------
  #post_header（openatelier / teaparty 共通）
--------------------------------*/
#post_header {
  padding: 16rem 0 8rem;
}
@media screen and (max-width: 812px) {
  #post_header {
    padding-top: 8rem;
    padding-bottom: 0;
  }
}
#post_header .post_header_inner {
  display: flex;
  gap: 10rem;
  align-items: center;
}
@media screen and (max-width: 812px) {
  #post_header .post_header_inner {
    flex-direction: column;
    gap: 0;
  }
}
#post_header {
  /* 左: テキスト（パンくず・タイトル・日付・リード） */
}
#post_header .post_header_text {
  flex: 1;
}
@media screen and (max-width: 812px) {
  #post_header .post_header_text {
    order: 2;
    margin-top: 3rem;
    padding-bottom: 2.4rem;
  }
}
#post_header .post_breadcrumb {
  font-size: 1.2rem;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  margin-bottom: 1rem;
}
#post_header .post_breadcrumb a:link, #post_header .post_breadcrumb a:visited {
  color: var(--color-primary);
}
@media (any-hover: hover) {
  #post_header .post_breadcrumb a:hover {
    opacity: 0.6;
  }
}
#post_header .post_title {
  font-size: clamp(20px, 2.6vw, 32px);
  font-weight: bold;
  line-height: 1.5;
  letter-spacing: 0.03em;
  margin-bottom: 1.2rem;
}
#post_header .post_date {
  font-size: 1.2rem;
  color: var(--color-primary);
  letter-spacing: 0.08em;
  margin-bottom: 2rem;
}
#post_header .post_lead {
  font-size: max(15px, 1.6rem);
  line-height: 1.9;
  color: var(--color-primary);
}
@media screen and (max-width: 812px) {
  #post_header .post_lead {
    font-size: 1.4rem;
  }
}
#post_header {
  /* 右: ナンバー付きサムネイル */
}
#post_header .post_header_visual {
  flex: 0 0 45%;
  position: relative;
  overflow: hidden;
  align-self: center;
  min-height: 400px;
}
@media screen and (max-width: 812px) {
  #post_header .post_header_visual {
    order: 1;
    width: 100%;
    min-height: 0;
    aspect-ratio: 1/1;
    flex: none;
  }
}
#post_header .post_header_visual img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
#post_header .post_header_visual .post_series_no {
  position: absolute;
  top: 1.6rem;
  left: 1.6rem;
  font-size: clamp(48px, 5vw, 80px);
  font-weight: bold;
  color: #fff;
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  z-index: 1;
}

/*--------------------------------
  #post_body（openatelier / teaparty 共通）
--------------------------------*/
#post_body {
  max-width: 1280px;
  margin: 0 auto;
  padding: 6rem 0;
  position: relative;
}
@media screen and (max-width: 812px) {
  #post_body {
    padding: 4rem 0;
  }
}
#post_body {
  /* インタビュイー プロフィール */
}
#post_body .post_author_profile {
  display: flex;
  gap: 3rem;
  align-items: flex-start;
  margin-bottom: 5rem;
}
@media screen and (max-width: 812px) {
  #post_body .post_author_profile {
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 3rem;
  }
}
#post_body .post_author_profile .profile_img {
  flex: 0 0 40%;
}
@media screen and (max-width: 812px) {
  #post_body .post_author_profile .profile_img {
    flex: none;
    width: 80px;
    margin: 0 auto;
  }
}
#post_body .post_author_profile .profile_img img {
  width: 100%;
  aspect-ratio: 1/1;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
#post_body .post_author_profile .profile_name {
  font-size: 1.8rem;
  font-weight: bold;
  margin-bottom: 0.4rem;
}
#post_body .post_author_profile .profile_name_en {
  font-size: 1.2rem;
  color: #888;
  letter-spacing: 0.1em;
  margin-bottom: 1.2rem;
}
#post_body .post_author_profile .profile_bio {
  font-size: max(15px, 1.6rem);
  line-height: 1.85;
  color: #555;
  overflow-wrap: anywhere;
}
@media screen and (max-width: 812px) {
  #post_body .post_author_profile .profile_bio {
    font-size: 1.3rem;
  }
}
#post_body .post_author_profile .profile_url {
  font-size: 1.2rem;
  margin-top: 0.8rem;
}
#post_body .post_author_profile .profile_url a:link, #post_body .post_author_profile .profile_url a:visited {
  color: #888;
}
#post_body {
  /* 本文（WordPressクラシックエディタ対応: h2/strong/em/p/imgのみで構成） */
}
#post_body .post_content {
  overflow-wrap: anywhere;
}
#post_body .post_content h2 {
  font-size: clamp(16px, 2vw, 24px);
  font-weight: bold;
  line-height: 1.5;
  margin: 4rem 0 2rem;
}
#post_body .post_content strong {
  font-weight: bold;
}
#post_body .post_content em {
  font-style: normal;
  font-size: 1.2rem;
  color: #888;
}
#post_body .post_content p {
  font-size: max(15px, 1.6rem);
  line-height: 2;
  margin-bottom: 1.6em;
}
@media screen and (max-width: 812px) {
  #post_body .post_content p {
    font-size: 1.4rem;
  }
}
#post_body .post_content p:has(> img) {
  margin: 3rem 0;
}
#post_body .post_content img {
  display: block;
  border-radius: 2px;
}

/*--------------------------------
  #post_body（watching）
--------------------------------*/
body.watching #post_body {
  padding-top: 8rem;
  padding-bottom: 0;
}
@media screen and (max-width: 812px) {
  body.watching #post_body {
    padding-top: 4rem;
    padding-bottom: 0;
  }
}
body.watching #post_body .container {
  padding-bottom: 8rem;
  border-bottom: 1px solid #848484;
}
@media screen and (max-width: 812px) {
  body.watching #post_body .container {
    padding-bottom: 4rem;
  }
}
body.watching #post_body .post_content p {
  font-size: 1.4rem;
}
@media screen and (max-width: 812px) {
  body.watching #post_body .post_content p {
    font-size: 1.3rem;
  }
}
body.watching #post_body .post_content img {
  width: 100%;
  height: auto;
}

/*--------------------------------
  #post_share（openatelier / teaparty 共通）
--------------------------------*/
#post_share {
  padding: 3rem 0;
}
#post_share .share_inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}
#post_share .share_label {
  font-size: 1.3rem;
  font-weight: bold;
  margin: 0;
  letter-spacing: 0.1em;
}
#post_share .share_btns {
  display: flex;
  gap: 1.2rem;
  align-items: center;
}
#post_share .share_btns a {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}
#post_share .share_btns a svg {
  width: 22px;
  height: 22px;
  display: block;
}
@media (any-hover: hover) {
  #post_share .share_btns a:hover {
    opacity: 0.6;
  }
}

/*--------------------------------
  #post_recommend（3コンテンツ共有）
--------------------------------*/
#post_recommend {
  padding: 8rem 0;
}
#post_recommend .recommend_head {
  font-size: 1.6rem;
  font-weight: bold;
  letter-spacing: 0.2em;
  padding: 2.4rem 0;
  text-align: center;
  /* \ RECOMMEND / スタイル */
}
#post_recommend .recommend_head::before {
  content: "＼ ";
}
#post_recommend .recommend_head::after {
  content: " ／";
}
#post_recommend .post_list[data-list-type=card] {
  grid-template-columns: repeat(2, 1fr);
}
@media screen and (max-width: 812px) {
  #post_recommend .post_list[data-list-type=card] {
    grid-template-columns: 1fr;
  }
}
#post_recommend .post_list[data-list-type=card] li {
  padding: 0;
  border-right: none;
  border-bottom: none;
  /* 番号バッジ */
}
#post_recommend .post_list[data-list-type=card] li .post_series_badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: bold;
  z-index: 2;
  pointer-events: none;
}
@media screen and (max-width: 812px) {
  #post_recommend .post_list[data-list-type=card] li .post_series_badge {
    width: 36px;
    height: 36px;
    font-size: 1.3rem;
  }
}

/* watching のpost_recommend */
body.watching #post_recommend {
  padding-top: 8rem;
  padding-bottom: 0;
}
@media screen and (max-width: 812px) {
  body.watching #post_recommend {
    padding-top: 4rem;
    padding-bottom: 0;
  }
}
body.watching #post_recommend .container {
  padding-bottom: 8rem;
  border-bottom: 1px solid #848484;
}
@media screen and (max-width: 812px) {
  body.watching #post_recommend .container {
    padding-bottom: 4rem;
  }
}
body.watching #post_recommend .recommend_inner {
  position: relative;
  padding-left: 8rem;
  padding-right: 8rem;
}
@media screen and (max-width: 812px) {
  body.watching #post_recommend .recommend_inner {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
body.watching #post_recommend .recommend_head {
  position: absolute;
  left: 0;
  top: 0;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  font-size: 1.8rem;
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.06em;
  color: #fff;
  padding: 0;
  text-align: left;
  border-bottom: none;
}
@media screen and (max-width: 812px) {
  body.watching #post_recommend .recommend_head {
    font-size: 1.5rem;
  }
}
body.watching #post_recommend .recommend_head::before, body.watching #post_recommend .recommend_head::after {
  content: none;
}
body.watching #post_recommend .post_list[data-list-type=card] {
  flex: 0 1 auto;
  grid-template-columns: 1fr;
  margin: 0 auto;
}
body.watching #post_recommend .post_list[data-list-type=card] li {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  -moz-column-gap: 2.4rem;
       column-gap: 2.4rem;
  align-items: start;
  padding: 0;
  border: none;
}
@media screen and (max-width: 812px) {
  body.watching #post_recommend .post_list[data-list-type=card] li {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
  }
}
body.watching #post_recommend .post_list[data-list-type=card] .postImg {
  grid-column: 2;
  width: 240px;
  padding: 0;
}
@media screen and (max-width: 812px) {
  body.watching #post_recommend .post_list[data-list-type=card] .postImg {
    width: 100%;
  }
}
body.watching #post_recommend .post_list[data-list-type=card] .postImg img {
  aspect-ratio: 1/1;
}
body.watching #post_recommend .post_list[data-list-type=card] .postBody {
  grid-column: 3;
  padding-top: 0.4rem;
}
body.watching #post_recommend .post_list[data-list-type=card] .postInfo a,
body.watching #post_recommend .post_list[data-list-type=card] .postTitle a,
body.watching #post_recommend .post_list[data-list-type=card] .post_author_name {
  color: #fff;
}
body.watching #post_recommend .post_list[data-list-type=card] .post_date {
  color: rgba(255, 255, 255, 0.6);
}

/* watching: RECOMMENDはPC時、liが3カラムグリッド（1fr auto 1fr）でpostImgが中央列にあり、
   li基準のNEWバッジ位置がサムネイルとズレるため、PCのみpostImg基準に付け替える
   （SPはliとpostImgの位置が一致するため既存のまま） */
@media screen and (min-width: 813px) {
  body.watching #post_recommend .post_list[data-list-type=card] li.--is-new::before, body.watching #post_recommend .post_list[data-list-type=card] li.--is-new::after {
    content: none;
  }
  body.watching #post_recommend .post_list[data-list-type=card] li.--is-new .postImg {
    position: relative;
    overflow: visible;
  }
  body.watching #post_recommend .post_list[data-list-type=card] li.--is-new .postImg::before, body.watching #post_recommend .post_list[data-list-type=card] li.--is-new .postImg::after {
    content: "";
    position: absolute;
    top: -2rem;
    left: -2rem;
    width: 80px;
    aspect-ratio: 108.173/62.858;
    -webkit-mask: url("/assets/images/new_mask_star.svg") no-repeat center/contain;
            mask: url("/assets/images/new_mask_star.svg") no-repeat center/contain;
    z-index: 2;
    transform: rotate(-20deg);
    pointer-events: none;
    transition: background-color 0.3s ease;
  }
  body.watching #post_recommend .post_list[data-list-type=card] li.--is-new .postImg::before {
    background-color: #000;
  }
  body.watching #post_recommend .post_list[data-list-type=card] li.--is-new .postImg::after {
    -webkit-mask-image: url("/assets/images/new_mask_text.svg");
            mask-image: url("/assets/images/new_mask_text.svg");
    background-color: #fff;
  }
}
@media screen and (min-width: 813px) and (any-hover: hover) {
  body.watching #post_recommend .post_list[data-list-type=card] li.--is-new:has(a:hover) .postImg::before {
    background-color: #FFFE54;
  }
  body.watching #post_recommend .post_list[data-list-type=card] li.--is-new:has(a:hover) .postImg::after {
    background-color: #000;
  }
}

/*--------------------------------
  #post_author（openatelier / teaparty: シリーズ著者紹介）
--------------------------------*/
#post_author {
  padding: 5rem 0;
}
#post_author .post_author_inner {
  display: flex;
  gap: 4rem;
  align-items: flex-start;
}
@media screen and (max-width: 812px) {
  #post_author .post_author_inner {
    flex-direction: column;
    gap: 2rem;
    align-items: center;
    text-align: center;
  }
}
#post_author .post_author_img {
  flex: 0 0 120px;
}
@media screen and (max-width: 812px) {
  #post_author .post_author_img {
    flex: none;
    width: 100px;
  }
}
#post_author .post_author_img img {
  width: 100%;
  border-radius: 50%;
  aspect-ratio: 1/1;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
}
#post_author .post_author_body {
  flex: 1;
}
#post_author .post_author_name {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: bold;
  letter-spacing: 0.06em;
  margin-bottom: 1.4rem;
}
#post_author .post_author_bio {
  font-size: max(14px, 1.4rem);
  line-height: 1.9;
  color: #555;
  margin-bottom: 1.4rem;
  text-align: justify;
  overflow-wrap: anywhere;
}
#post_author .post_author_sns {
  display: flex;
  gap: 1.6rem;
  align-items: center;
}
@media screen and (max-width: 812px) {
  #post_author .post_author_sns {
    justify-content: center;
  }
}
#post_author .post_author_sns a {
  display: flex;
  align-items: center;
  color: var(--color-primary);
}
#post_author .post_author_sns a svg {
  width: 22px;
  height: 22px;
  display: block;
}
@media (any-hover: hover) {
  #post_author .post_author_sns a:hover {
    opacity: 0.6;
  }
}

/*--------------------------------
  #post_nav（3コンテンツ共有）
--------------------------------*/
#post_nav {
  padding: 8rem 0;
}
#post_nav .post_nav_inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#post_nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.3rem;
  font-weight: bold;
  letter-spacing: 0.1em;
}
#post_nav a:link, #post_nav a:visited {
  color: var(--color-primary);
}
@media (any-hover: hover) {
  #post_nav a:hover {
    color: var(--color-highlight);
  }
}
#post_nav a svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  fill: currentColor;
}
#post_nav .post_nav_top {
  text-align: center;
}
#post_nav .post_nav_next svg,
#post_nav .post_nav_back svg {
  transition: transform 0.3s;
}
@media (any-hover: hover) {
  #post_nav .post_nav_next:hover svg {
    transform: translateX(4px);
  }
  #post_nav .post_nav_back:hover svg {
    transform: translateX(-4px);
  }
}

/* watching single: ダーク背景 */
body.watching.single {
  background-color: #2E2E2E;
  color: #fff;
}

body.watching #post_nav a {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}
body.watching #post_nav a:link, body.watching #post_nav a:visited {
  color: #fff;
}
body.watching #post_nav a:hover {
  color: rgba(255, 255, 255, 0.7);
}

/*============================================================

  WATCHING? SINGLE 独自セクション

============================================================*/
/*--------------------------------
  #post_hero（watching 独自）
--------------------------------*/
#post_hero {
  position: relative;
  width: 100%;
  aspect-ratio: 2880/1618;
  overflow: hidden;
  background-color: #444;
}
@media screen and (max-width: 812px) {
  #post_hero {
    aspect-ratio: 784/1000;
  }
}
#post_hero .post_hero_bg {
  position: absolute;
  inset: 0;
}
#post_hero .post_hero_bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  opacity: 0.75;
}
#post_hero {
  /* WATCH MOVIE ボタン */
}
#post_hero .post_hero_btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  color: #fff;
  font-size: 1.4rem;
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.15em;
  padding: 1.2rem 3rem;
  white-space: nowrap;
  z-index: 1;
}
#post_hero .post_hero_btn:link, #post_hero .post_hero_btn:visited {
  color: #fff;
}
@media (any-hover: hover) {
  #post_hero .post_hero_btn:hover {
    background-color: rgba(255, 255, 255, 0.15);
    border-color: #fff;
  }
}
#post_hero {
  /* タイトル（右下） */
}
#post_hero .post_hero_text {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
  text-align: right;
  padding: 3rem 4rem;
}
@media screen and (max-width: 812px) {
  #post_hero .post_hero_text {
    padding: 2rem;
  }
}
#post_hero .post_hero_title {
  font-size: clamp(48px, 8vw, 120px);
  font-weight: bold;
  color: #fff;
  line-height: 1;
  letter-spacing: 0.04em;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
#post_hero .post_hero_title_en {
  display: block;
  font-size: clamp(14px, 1.6vw, 20px);
  letter-spacing: 0.2em;
  margin-top: 0.4rem;
  font-weight: normal;
}

/*--------------------------------
  WATCH MOVIEモーダル（Fancybox / watching 独自）
--------------------------------*/
body.watching .fancybox-bg {
  background: #000 !important;
}
body.watching .fancybox-infobar {
  color: #fff !important;
}
body.watching .fancybox-toolbar .fancybox-button,
body.watching .fancybox-navigation .fancybox-button {
  color: #fff !important;
}

/*--------------------------------
  #post_intro（watching 独自）
--------------------------------*/
#post_intro {
  padding-top: 8rem;
  padding-bottom: 0;
}
@media screen and (max-width: 812px) {
  #post_intro {
    padding-top: 4rem;
    padding-bottom: 0;
  }
}
#post_intro .container {
  padding-bottom: 8rem;
  border-bottom: 1px solid #848484;
}
@media screen and (max-width: 812px) {
  #post_intro .container {
    padding-bottom: 4rem;
  }
}
#post_intro .post_intro_title {
  font-size: clamp(22px, 3vw, 40px);
  font-weight: bold;
  letter-spacing: 0.06em;
  color: #fff;
  text-align: center;
  margin-bottom: 0.4rem;
}
#post_intro .post_intro_en {
  font-size: 1.4rem;
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  margin-bottom: 3rem;
}
#post_intro .post_intro_text {
  font-size: 1.4rem;
  line-height: 2;
  color: rgba(255, 255, 255, 0.9);
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  overflow-wrap: anywhere;
}
@media screen and (max-width: 812px) {
  #post_intro .post_intro_text {
    font-size: 1.3rem;
  }
}

/*--------------------------------
  #post_creative_note（watching 独自）
--------------------------------*/
#post_creative_note {
  padding-top: 8rem;
  padding-bottom: 0;
}
@media screen and (max-width: 812px) {
  #post_creative_note {
    padding-top: 4rem;
    padding-bottom: 0;
  }
}
#post_creative_note .container {
  padding-bottom: 8rem;
  border-bottom: 1px solid #848484;
}
@media screen and (max-width: 812px) {
  #post_creative_note .container {
    padding-bottom: 4rem;
  }
}
#post_creative_note .creative_note_head {
  font-size: clamp(18px, 2.5vw, 30px);
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.2em;
  color: #fff;
  text-align: center;
  margin-bottom: 4rem;
}
#post_creative_note .creative_note_text {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
  overflow-wrap: anywhere;
}
#post_creative_note .creative_note_text p {
  font-size: 1.4rem;
  line-height: 2;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 1.6em;
}
#post_creative_note .creative_note_text p:last-child {
  margin-bottom: 0;
}
@media screen and (max-width: 812px) {
  #post_creative_note .creative_note_text p {
    font-size: 1.3rem;
  }
}

/*--------------------------------
  #post_architect（watching 独自）
--------------------------------*/
#post_architect {
  padding-top: 8rem;
  padding-bottom: 0;
}
@media screen and (max-width: 812px) {
  #post_architect {
    padding-top: 4rem;
    padding-bottom: 0;
  }
}
#post_architect .container {
  padding-bottom: 8rem;
  border-bottom: 1px solid #848484;
}
@media screen and (max-width: 812px) {
  #post_architect .container {
    padding-bottom: 4rem;
  }
}
#post_architect .architect_inner {
  position: relative;
  align-items: flex-start;
  text-align: left;
  padding-left: 8rem;
  padding-right: 8rem;
}
@media screen and (max-width: 812px) {
  #post_architect .architect_inner {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
#post_architect .architect_wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 3rem;
  max-width: 900px;
  margin: 0 auto;
}
@media screen and (max-width: 812px) {
  #post_architect .architect_wrapper {
    flex-direction: column;
    gap: 1.6rem;
  }
}
#post_architect .architect_label {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 1.8rem;
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.06em;
  color: #fff;
}
@media screen and (max-width: 812px) {
  #post_architect .architect_label {
    font-size: 1.5rem;
  }
}
#post_architect .architect_img {
  flex: 0 0 260px;
  width: 260px;
}
@media screen and (max-width: 812px) {
  #post_architect .architect_img {
    flex: none;
    width: 150px;
    margin: 0 auto;
  }
}
#post_architect .architect_img img {
  width: 100%;
  aspect-ratio: 1/1;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  border-radius: 0;
}
#post_architect .architect_body {
  flex: 1;
}
#post_architect .architect_name {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: bold;
  letter-spacing: 0.06em;
  color: #fff;
  margin-bottom: 0.4rem;
}
@media screen and (max-width: 812px) {
  #post_architect .architect_name {
    text-align: center;
  }
}
#post_architect .architect_name_en {
  font-size: 1.3rem;
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: italic;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.12em;
  margin-bottom: 1.6rem;
}
@media screen and (max-width: 812px) {
  #post_architect .architect_name_en {
    text-align: center;
  }
}
#post_architect .architect_bio {
  font-size: 1.4rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.85);
  text-align: left;
  overflow-wrap: anywhere;
}
@media screen and (max-width: 812px) {
  #post_architect .architect_bio {
    font-size: 1.3rem;
  }
}

/*--------------------------------
  watching: #post_author を #post_architect と同じレイアウトに
--------------------------------*/
body.watching #post_author {
  padding-top: 8rem;
  padding-bottom: 0;
}
@media screen and (max-width: 812px) {
  body.watching #post_author {
    padding-top: 4rem;
    padding-bottom: 0;
  }
}
body.watching #post_author .container {
  padding-bottom: 8rem;
  border-bottom: 1px solid #848484;
}
@media screen and (max-width: 812px) {
  body.watching #post_author .container {
    padding-bottom: 4rem;
  }
}
body.watching #post_author .post_author_inner {
  position: relative;
  align-items: flex-start;
  text-align: left;
  padding-left: 8rem;
  padding-right: 8rem;
}
@media screen and (max-width: 812px) {
  body.watching #post_author .post_author_inner {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}
body.watching #post_author .post_author_wrapper {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 3rem;
  max-width: 900px;
  margin: 0 auto;
}
@media screen and (max-width: 812px) {
  body.watching #post_author .post_author_wrapper {
    flex-direction: column;
    gap: 1.6rem;
  }
}
body.watching #post_author .post_author_label {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 1.8rem;
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.06em;
  color: #fff;
}
@media screen and (max-width: 812px) {
  body.watching #post_author .post_author_label {
    font-size: 1.5rem;
  }
}
body.watching #post_author .post_author_img {
  flex: 0 0 260px;
  width: 260px;
}
@media screen and (max-width: 812px) {
  body.watching #post_author .post_author_img {
    flex: none;
    width: 150px;
    margin: 0 auto;
  }
}
body.watching #post_author .post_author_img img {
  width: 100%;
  aspect-ratio: 1/1;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  border-radius: 0;
}
body.watching #post_author .post_author_body {
  flex: 1;
}
body.watching #post_author .post_author_name {
  font-size: clamp(18px, 2vw, 24px);
  font-weight: bold;
  letter-spacing: 0.06em;
  color: #fff;
  margin-bottom: 0.4rem;
}
@media screen and (max-width: 812px) {
  body.watching #post_author .post_author_name {
    text-align: center;
  }
}
body.watching #post_author .post_author_name_en {
  font-size: 1.3rem;
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: italic;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.12em;
  margin-bottom: 1.6rem;
}
@media screen and (max-width: 812px) {
  body.watching #post_author .post_author_name_en {
    text-align: center;
  }
}
body.watching #post_author .post_author_bio {
  font-size: 1.4rem;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.85);
  text-align: left;
}
@media screen and (max-width: 812px) {
  body.watching #post_author .post_author_bio {
    font-size: 1.3rem;
  }
}
@media screen and (max-width: 812px) {
  body.watching #post_author .post_author_sns {
    justify-content: center;
  }
}
body.watching #post_author .post_author_sns a {
  color: #fff;
}

/*--------------------------------
  teaparty: #post_body 全体に罫線
--------------------------------*/
body.teaparty #post_body .container {
  max-width: none;
}
@media screen and (max-width: 812px) {
  body.teaparty #post_body .container {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }
}
body.teaparty #post_body .post_body_inner {
  background-color: #fff;
  outline: 4px solid var(--content-bg);
  outline-offset: -48px;
  padding: 8rem;
}
@media screen and (max-width: 812px) {
  body.teaparty #post_body .post_body_inner {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 4rem 2rem;
    outline-offset: -16px;
  }
}

/*--------------------------------
  teaparty: 冒頭の人物紹介
--------------------------------*/
body.teaparty #post_body .post_guests_head {
  text-align: center;
  font-size: 3.6rem;
  letter-spacing: 0.2em;
  margin-bottom: 2rem;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 812px) {
  body.teaparty #post_body .post_guests_head {
    font-size: 2.4rem;
  }
}
body.teaparty #post_body .post_guests {
  margin-bottom: 10rem;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 3%;
  padding-right: 3%;
}
@media screen and (max-width: 812px) {
  body.teaparty #post_body .post_guests {
    margin-bottom: 3rem;
    padding-left: 5%;
    padding-right: 5%;
  }
}
body.teaparty #post_body .post_author_profile {
  padding: 3rem 0;
  margin-bottom: 0;
}
@media screen and (max-width: 812px) {
  body.teaparty #post_body .post_author_profile {
    padding: 1.5rem 0;
  }
}
body.teaparty #post_body .post_author_profile:first-child {
  padding-top: 0;
}
body.teaparty #post_body .post_author_profile:last-child {
  padding-bottom: 0;
}
body.teaparty #post_body .profile_img {
  flex: 2;
}
@media screen and (max-width: 812px) {
  body.teaparty #post_body .profile_img {
    flex: none;
    width: 100px;
  }
}
body.teaparty #post_body .profile_img img {
  border-radius: 50%;
}
body.teaparty #post_body .profile_body {
  flex: 8;
}
body.teaparty #post_body .profile_name_area {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1rem;
}
body.teaparty #post_body .profile_role {
  display: block;
  width: 100%;
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  color: #1a1a1a;
}
body.teaparty #post_body .profile_name {
  font-size: 1.8rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 0;
}
body.teaparty #post_body .profile_bio {
  color: #1a1a1a;
}
body.teaparty #post_body .post_content {
  max-width: 660px;
  margin-left: auto;
  margin-right: auto;
}
@media screen and (max-width: 812px) {
  body.teaparty #post_body .post_content {
    padding-left: 5%;
    padding-right: 5%;
  }
}
body.teaparty #post_body .post_content {
  /* WordPressクラシックエディタ対応: h2/strong/em/p/imgのみで構成 */
}
body.teaparty #post_body .post_content h2 {
  font-size: clamp(24px, 3vw, 28px);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.5;
  margin: 4rem 0 2rem;
}
@media screen and (max-width: 812px) {
  body.teaparty #post_body .post_content h2 {
    font-size: 1.8rem;
  }
}
body.teaparty #post_body .post_content strong {
  display: block;
  letter-spacing: 0.06em;
}
@media screen and (max-width: 812px) {
  body.teaparty #post_body .post_content strong {
    font-size: 1.4rem;
  }
}
body.teaparty #post_body .post_content em {
  font-style: normal;
  font-size: 1.2rem;
  color: #888;
}
body.teaparty #post_body .post_content p:has(> img) {
  margin: 3rem 0;
}
body.teaparty #post_body .post_content img {
  display: block;
  border-radius: 2px;
}
@media screen and (max-width: 812px) {
  body.teaparty #post_body .post_content img {
    width: 100%;
    height: auto;
  }
}

/*--------------------------------
  RECOMMEND: カードpadding不要
--------------------------------*/
#post_recommend .post_list[data-list-type=card] .postBody {
  padding: 2rem 0 2rem;
}

/*--------------------------------
  openatelier: #post_body 白背景・上下三角トランジションを.post_body_innerへ移設
--------------------------------*/
body.openatelier #post_body {
  max-width: none;
  margin: 0;
  background-color: transparent;
  padding: 0;
  position: static;
}
body.openatelier #post_body .post_body_inner {
  max-width: 1280px;
  margin: 0 auto;
  background-color: #fff;
  padding-top: 15rem;
  padding-bottom: 15rem;
  padding-left: 3%;
  padding-right: 3%;
  position: relative;
}
@media screen and (max-width: 812px) {
  body.openatelier #post_body .post_body_inner {
    padding-top: 8rem;
    padding-bottom: 8rem;
    padding-left: 5%;
    padding-right: 5%;
  }
}
body.openatelier #post_body .post_body_inner::before, body.openatelier #post_body .post_body_inner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 10rem;
  pointer-events: none;
  z-index: 1;
}
body.openatelier #post_body .post_body_inner::before {
  top: 0;
  background: linear-gradient(to bottom left, var(--content-bg) 50%, transparent 50%);
}
body.openatelier #post_body .post_body_inner::after {
  bottom: 0;
  background: linear-gradient(to top left, var(--content-bg) 50%, transparent 50%);
}
@media screen and (max-width: 812px) {
  body.openatelier #post_body .post_body_inner::before, body.openatelier #post_body .post_body_inner::after {
    height: 5rem;
  }
}
body.openatelier #post_body {
  /* テキストカラムの幅（.post_body_innerの直下子要素それぞれに指定） */
}
body.openatelier #post_body .post_author_profile,
body.openatelier #post_body .post_content {
  max-width: 660px;
  margin: 0 auto;
}
@media screen and (max-width: 812px) {
  body.openatelier #post_body .post_author_profile .profile_img {
    width: 140px;
  }
}
body.openatelier #post_body .post_author_profile .profile_name {
  font-weight: 700;
  margin-bottom: 1.5rem;
}
@media screen and (max-width: 812px) {
  body.openatelier #post_body .post_author_profile .profile_name {
    text-align: center;
  }
}
body.openatelier #post_body .post_author_profile .profile_bio {
  color: #000;
}
body.openatelier #post_body .post_content h2,
body.openatelier #post_body .post_content strong {
  font-weight: 700;
}
body.openatelier #post_body .post_content img {
  width: 100%;
  height: auto;
}

body.openatelier #post_header .post_title {
  font-weight: 700;
}

body.openatelier #post_recommend .recommend_head {
  font-weight: 700;
}

/*--------------------------------
  openatelier: #post_share マイナスマージン（白エリアに入り込む）
--------------------------------*/
body.openatelier #post_share {
  position: relative;
  z-index: 2;
  margin-top: -5rem;
}
@media screen and (max-width: 812px) {
  body.openatelier #post_share {
    margin-top: -3rem;
  }
}
body.openatelier #post_share .share_label {
  font-weight: 700;
}

/*--------------------------------
  openatelier: #post_author 白背景・三角・大写真・カラム調整
--------------------------------*/
body.openatelier #post_author {
  max-width: none;
  margin: 0;
  background-color: transparent;
  position: static;
  padding: 0;
}
body.openatelier #post_author .post_author_name {
  font-weight: 700;
}
body.openatelier #post_author .post_author_inner {
  display: block;
  max-width: 1280px;
  margin: 0 auto;
  background-color: #fff;
  position: relative;
  padding-top: 14rem;
  padding-bottom: 14rem;
  padding-left: 3%;
  padding-right: 3%;
}
@media screen and (max-width: 812px) {
  body.openatelier #post_author .post_author_inner {
    padding-top: 8rem;
    padding-bottom: 8rem;
    padding-left: 5%;
    padding-right: 5%;
  }
}
body.openatelier #post_author .post_author_inner {
  /* 上下の三角トランジション（#post_bodyと同じ） */
}
body.openatelier #post_author .post_author_inner::before, body.openatelier #post_author .post_author_inner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 10rem;
  pointer-events: none;
  z-index: 1;
}
body.openatelier #post_author .post_author_inner::before {
  top: 0;
  background: linear-gradient(to bottom left, var(--content-bg) 50%, transparent 50%);
}
body.openatelier #post_author .post_author_inner::after {
  bottom: 0;
  background: linear-gradient(to top left, var(--content-bg) 50%, transparent 50%);
}
@media screen and (max-width: 812px) {
  body.openatelier #post_author .post_author_inner::before, body.openatelier #post_author .post_author_inner::after {
    height: 5rem;
  }
}
body.openatelier #post_author {
  /* テキストカラムの幅（.post_author_innerの直下に設置し、画像+テキストのflex行を内包） */
}
body.openatelier #post_author .post_author_contents {
  display: flex;
  gap: 4rem;
  align-items: center;
  max-width: 660px;
  margin: 0 auto;
}
@media screen and (max-width: 812px) {
  body.openatelier #post_author .post_author_contents {
    flex-direction: column;
    gap: 2rem;
    text-align: center;
  }
}
body.openatelier #post_author .post_author_img {
  /* gap: 4rem 分を比率で差し引き、38:62の比率を保ったまま合計100%に収める */
  flex: 0 0 calc(38% - 1.52rem);
}
@media screen and (max-width: 812px) {
  body.openatelier #post_author .post_author_img {
    flex: none;
    width: 160px;
  }
}
body.openatelier #post_author .post_author_body {
  flex: 0 0 calc(62% - 2.48rem);
}

/*============================================================

  TEAPARTY SINGLE 独自スタイル

============================================================*/
/*--------------------------------
  #post_header: 3カラム縦書きレイアウト
--------------------------------*/
body.teaparty #post_header {
  position: relative;
  overflow: hidden;
  padding: var(--height-header) 0 0;
}
@media screen and (max-width: 1700px) {
  body.teaparty #post_header {
    padding-top: 17rem;
  }
}
@media screen and (max-width: 812px) {
  body.teaparty #post_header {
    padding-top: 6rem;
  }
}
body.teaparty #post_header .post_header_hand {
  position: absolute;
  top: 0;
  left: 0;
  width: 14vw;
  height: auto;
  pointer-events: none;
  z-index: 0;
}
@media screen and (max-width: 812px) {
  body.teaparty #post_header .post_header_hand {
    width: 13rem;
  }
}
body.teaparty #post_header .container {
  position: relative;
  z-index: 1;
}
body.teaparty #post_header .post_header_inner {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 4rem;
  padding: 4rem 0 6rem;
}
@media screen and (max-width: 812px) {
  body.teaparty #post_header .post_header_inner {
    flex-wrap: wrap;
    gap: 1rem;
    padding: 12rem 0 3rem;
    align-items: flex-start;
  }
}
body.teaparty #post_header {
  /* 左カラム: 縦書きテキスト */
}
body.teaparty #post_header .post_header_text {
  flex: 1;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-self: flex-end;
  gap: 1.6rem;
  align-items: flex-start;
  max-height: 44rem;
  overflow-x: auto;
  overflow-y: hidden;
}
@media screen and (min-width: 1280px) {
  body.teaparty #post_header .post_header_text {
    max-height: 40.7rem;
  }
}
@media screen and (max-width: 812px) {
  body.teaparty #post_header .post_header_text {
    order: 2;
    flex: 0 0 100%;
    writing-mode: horizontal-tb;
    align-self: auto;
    justify-content: flex-start;
    gap: 0.4rem;
    padding-top: 1rem;
    padding-bottom: 0;
    max-height: none;
    overflow: visible;
  }
}
body.teaparty #post_header .post_breadcrumb {
  font-size: 1.3rem;
  letter-spacing: 0.1em;
}
body.teaparty #post_header .post_breadcrumb a:link, body.teaparty #post_header .post_breadcrumb a:visited {
  color: var(--color-primary);
}
@media screen and (max-width: 812px) {
  body.teaparty #post_header .post_breadcrumb {
    margin-bottom: 0;
  }
}
body.teaparty #post_header .post_title {
  font-size: clamp(16px, 2.2vw, 28px);
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 1.4;
  margin-bottom: 0;
}
@media screen and (max-width: 812px) {
  body.teaparty #post_header .post_title {
    font-size: 2.4rem;
  }
}
body.teaparty #post_header .post_date {
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  transform: rotate(180deg);
}
@media screen and (max-width: 812px) {
  body.teaparty #post_header .post_date {
    transform: none;
    margin-bottom: 0;
  }
}
body.teaparty #post_header {
  /* 中央カラム: サムネイル画像 */
}
body.teaparty #post_header .post_header_visual {
  flex: 0 0 38%;
  min-height: 0;
  align-self: center;
}
body.teaparty #post_header .post_header_visual img {
  width: 100%;
  height: auto;
  display: block;
}
body.teaparty #post_header .post_header_visual .post_series_no {
  display: none;
}
@media screen and (max-width: 812px) {
  body.teaparty #post_header .post_header_visual {
    order: 1;
    flex: 0 0 80%;
    width: 80%;
    margin: 0 auto;
  }
  body.teaparty #post_header .post_header_visual img {
    aspect-ratio: 1/1;
    -o-object-fit: cover;
       object-fit: cover;
  }
}
body.teaparty #post_header {
  /* 右カラム: リード文 */
}
body.teaparty #post_header .post_header_lead {
  flex: 1;
  align-self: flex-start;
  max-height: 44rem;
  overflow-y: auto;
}
@media screen and (min-width: 1280px) {
  body.teaparty #post_header .post_header_lead {
    max-height: 40.7rem;
  }
}
body.teaparty #post_header .post_header_lead .post_lead {
  font-size: max(14px, 1.5rem);
  line-height: 2;
  color: var(--color-primary);
}
@media screen and (max-width: 812px) {
  body.teaparty #post_header .post_header_lead {
    order: 3;
    flex: 0 0 100%;
    align-self: auto;
    max-height: none;
    overflow-y: visible;
  }
  body.teaparty #post_header .post_header_lead .post_lead {
    font-size: 1.4rem;
  }
}

/*--------------------------------
  #post_recommend: 関連記事
--------------------------------*/
body.teaparty #post_recommend .recommend_head {
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: 0.15em;
  padding: 0;
  margin-bottom: 2rem;
}
body.teaparty #post_recommend .recommend_head::before, body.teaparty #post_recommend .recommend_head::after {
  content: none;
}
body.teaparty #post_recommend .post_recommend_inner {
  background-color: #fff;
  padding: 10rem 3%;
}
@media screen and (max-width: 812px) {
  body.teaparty #post_recommend .post_recommend_inner {
    padding: 4rem 3%;
  }
}
body.teaparty #post_recommend .post_list[data-list-type=card] {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
body.teaparty #post_recommend .post_list[data-list-type=card] {
  grid-template-columns: 1fr;
}
body.teaparty #post_recommend .post_list[data-list-type=card] li {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 2.4rem;
  border-right: none;
  border-bottom: none;
}
@media screen and (max-width: 812px) {
  body.teaparty #post_recommend .post_list[data-list-type=card] li {
    display: block;
    gap: 0;
    padding: 0;
  }
}
@media screen and (min-width: 813px) {
  body.teaparty #post_recommend .post_list[data-list-type=card] li + li {
    margin-top: 4.8rem;
  }
}
body.teaparty #post_recommend .post_list[data-list-type=card] .postImg {
  flex: 0 0 35%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
body.teaparty #post_recommend .post_list[data-list-type=card] .postImg img {
  aspect-ratio: 1/1;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
@media screen and (max-width: 812px) {
  body.teaparty #post_recommend .post_list[data-list-type=card] .postImg {
    flex: none;
    width: calc(100% - 4.8rem);
    margin: 0 auto;
  }
}
body.teaparty #post_recommend .post_list[data-list-type=card] .postBody {
  flex: 1;
  padding: 0;
}
@media screen and (max-width: 812px) {
  body.teaparty #post_recommend .post_list[data-list-type=card] .postBody {
    padding: 2rem 2.4rem 2.4rem;
  }
}

/*--------------------------------
  #post_author: 著者紹介（#content_authorと同デザイン）
--------------------------------*/
body.teaparty #post_author .post_author_head {
  text-align: center;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 600;
  letter-spacing: 0.15em;
  margin-bottom: 2rem;
}
body.teaparty #post_author .post_author_inner {
  display: block;
  max-width: none;
  border: 4px solid #1a1a1a;
  outline: 2px solid #1a1a1a;
  outline-offset: -10px;
  padding: 5rem;
}
@media screen and (max-width: 812px) {
  body.teaparty #post_author .post_author_inner {
    padding: 4rem 2rem;
  }
}
body.teaparty #post_author .post_author_contents {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  text-align: left;
  gap: 3rem;
}
@media screen and (max-width: 812px) {
  body.teaparty #post_author .post_author_contents {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2rem;
  }
}
body.teaparty #post_author .post_author_img {
  flex: 3;
}
@media screen and (max-width: 812px) {
  body.teaparty #post_author .post_author_img {
    flex: none;
    width: 120px;
  }
}
body.teaparty #post_author .post_author_img img {
  border-radius: 0;
}
body.teaparty #post_author .post_author_body {
  flex: 7;
}
body.teaparty #post_author .post_author_name,
body.teaparty #post_author .post_author_bio {
  color: #1a1a1a;
}
body.teaparty #post_author .post_author_sns {
  justify-content: flex-end;
}
body.teaparty #post_author .post_author_sns a {
  color: #1a1a1a;
}
@media screen and (max-width: 812px) {
  body.teaparty #post_author .post_author_sns {
    justify-content: center;
  }
}

/* ==========================================================================

  BLOG - 全体一覧

========================================================================== */
/*--------------------------------
  ページタイトル
--------------------------------*/
#archive_head {
  padding: 0;
  margin-top: var(--height-header);
  border-top: 1px solid var(--bordercolor-primary);
}
#archive_head .section_head {
  width: 100%;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-bottom: 1px solid var(--bordercolor-primary);
}
#archive_head .section_head img {
  display: block;
  height: auto;
  max-width: 100%;
  margin: 0;
}
#archive_head .section_head .section_head_keyword {
  display: block;
  font-size: clamp(28px, 3.6vw, 52px);
  font-weight: bold;
  letter-spacing: 0.03em;
  line-height: 1.2;
  color: var(--color-primary);
  margin: 0;
}
#archive_head .section_head .section_head_jp {
  font-size: 1.3rem;
  letter-spacing: 0.15em;
  color: var(--color-primary);
  margin-top: 0.6rem;
  margin-bottom: 0;
}

/*--------------------------------
  記事一覧
--------------------------------*/
#archive_list {
  padding: 0;
  border-bottom: 1px solid var(--bordercolor-primary);
}

/*--------------------------------
  ページネーション
--------------------------------*/
.archive .pagination {
  padding: 3rem 0;
}
.archive .pagination ul li:first-child {
  margin-right: 2rem;
}
.archive .pagination ul li:last-child {
  margin-left: 2rem;
}
.archive .pagination a.prev span svg {
  margin: 0;
}
.archive .pagination a.next span svg {
  margin: 0;
}