@charset "UTF-8";
/* =========================================================
   採用ブログ（ソメスのひとのこと）座談会記事用スタイル
   読み込み条件：functions/_recruit_blog.php（カテゴリ recruit の記事だけ）
   使い方は リクルート/articles/ のひな形を参照
     .zd-lead     … 冒頭のリード文
     .zd-members  … メンバー紹介（.zd-member を人数分。--a / --b / --c / --d で色分け）
     .zd-q        … 質問（左に Q マーク）
     .zd-talk     … 発言（左に名前の丸、右に吹き出し。色は .zd-member と同じ --a〜--d）
     .zd-photo    … 写真枠（中に img を入れると写真、空なら仮の枠）
     .zd-links    … 記事末のボタン
   ========================================================= */
.c-editor .zd-lead { margin: 0 0 3.2rem; font-size: 1.5rem; line-height: 2.1; }

/* 発言者の色（メンバー紹介と発言で共通） */
.c-editor .zd-member,
.c-editor .zd-talk { --zd-c: #0c652a; }
.c-editor .zd-member--b, .c-editor .zd-talk--b { --zd-c: #8a6a3f; }
.c-editor .zd-member--c, .c-editor .zd-talk--c { --zd-c: #4f6670; }
.c-editor .zd-member--d, .c-editor .zd-talk--d { --zd-c: #a3543a; }

/* メンバー紹介 */
.c-editor .zd-members {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 3.2rem 2.4rem;
  margin: 2.4rem 0 4.8rem; padding: 3.6rem 3.2rem; background: #f1efe8;
}
.c-editor .zd-member { text-align: center; }
.c-editor .zd-member__ph {
  width: 12rem; aspect-ratio: 1 / 1; margin: 0 auto 1.6rem; overflow: hidden; border-radius: 50%;
  border: 3px solid var(--zd-c);
  background: repeating-linear-gradient(135deg, #e3dfd3 0 10px, #ebe8de 10px 20px);
}
.c-editor .zd-member__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c-editor .zd-member__name { margin: 0; font-size: 1.7rem; font-weight: 700; letter-spacing: .14em; color: #333; line-height: 1.6; }
.c-editor .zd-member__role { margin: .4rem 0 0; font-size: 1.2rem; letter-spacing: .08em; color: var(--zd-c); line-height: 1.7; }
.c-editor .zd-member__text { margin: 1.2rem 0 0; font-size: 1.3rem; line-height: 1.9; text-align: left; }

/* 質問 */
.c-editor .zd-q {
  position: relative; margin: 4.8rem 0 2.4rem; padding: .2rem 0 0 4.6rem;
  font-size: 1.6rem; font-weight: 700; line-height: 1.8; color: #0c652a;
}
.c-editor .zd-q::before {
  content: "Q"; position: absolute; left: 0; top: 0;
  width: 3.4rem; height: 3.4rem; border-radius: 50%; background: #0c652a; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: "Crimson Text", serif; font-size: 1.9rem; font-weight: 400; letter-spacing: 0;
}
.c-editor h2 + .zd-q { margin-top: 2.4rem; }

/* 発言 */
.c-editor .zd-talk { display: grid; grid-template-columns: 6.4rem 1fr; gap: 0 2rem; align-items: start; margin: 2rem 0; }
.c-editor .zd-talk__name {
  margin: 0; width: 6.4rem; height: 6.4rem; border-radius: 50%;
  background: var(--zd-c); color: #fff;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 1.25rem; font-weight: 700; letter-spacing: .04em; line-height: 1.3;
}
.c-editor .zd-talk__body {
  position: relative; padding: 1.6rem 2.2rem; background: #fff;
  border: 1px solid #e3e0d6; border-radius: 6px;
}
.c-editor .zd-talk__body::before,
.c-editor .zd-talk__body::after {
  content: ""; position: absolute; top: 2.2rem; width: 0; height: 0;
  border-style: solid; border-width: 7px 10px 7px 0;
}
.c-editor .zd-talk__body::before { left: -10px; border-color: transparent #e3e0d6 transparent transparent; }
.c-editor .zd-talk__body::after  { left: -8px;  border-color: transparent #fff transparent transparent; }
.c-editor .zd-talk__body p { margin: 0 0 .8em; }
.c-editor .zd-talk__body p:last-child { margin-bottom: 0; }

/* 写真枠（img が無いあいだは仮の枠を表示） */
.c-editor .zd-photo { margin: 4.8rem 0; }
.c-editor .zd-photo img { width: 100%; height: auto; display: block; }
.c-editor .zd-photo:not(:has(img)) {
  aspect-ratio: 16 / 9; display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(135deg, #e3dfd3 0 12px, #ebe8de 12px 24px);
}
.c-editor .zd-photo:not(:has(img))::after {
  content: attr(data-label); font-size: 1.2rem; letter-spacing: .14em; color: #8f8a7c;
}
.c-editor .zd-photo figcaption { margin-top: .8rem; font-size: 1.2rem; color: #777; }

/* 記事末のボタン */
.c-editor .zd-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.6rem; margin: 6.4rem 0 0; }
.c-editor .zd-links a {
  display: inline-block; min-width: 22rem; padding: 1.4rem 3.2rem; text-align: center;
  border: 1px solid #0c652a; color: #0c652a; background: #fff;
  font-size: 1.3rem; font-weight: 700; letter-spacing: .14em; text-decoration: none; transition: .2s;
}
.c-editor .zd-links a.is-fill { background: #0c652a; color: #fff; }
.c-editor .zd-links a:hover { opacity: .75; }

@media (max-width: 767px) {
  .c-editor .zd-members { grid-template-columns: 1fr 1fr; gap: 2.4rem 1.6rem; padding: 2.8rem 2rem; }
  .c-editor .zd-member__ph { width: 9.6rem; }
  .c-editor .zd-talk { grid-template-columns: 4.8rem 1fr; gap: 0 1.4rem; }
  .c-editor .zd-talk__name { width: 4.8rem; height: 4.8rem; font-size: 1.05rem; }
  .c-editor .zd-talk__body { padding: 1.4rem 1.6rem; }
  .c-editor .zd-talk__body::before,
  .c-editor .zd-talk__body::after { top: 1.6rem; }
  .c-editor .zd-links { flex-direction: column; align-items: stretch; }
}