@charset "UTF-8";
/* ////////////////////////////////////////////////////////////////////
///// LOG 記事ページ共通
///// ・八木×今野（HTML 直書き）と、配列＋レンダラー（log/inc/article.php）の記事で共用
///// ・設計書：docs/specs/2026-10-08-log-articles-design.md
////////////////////////////////////////////////////////////////////// */
/* ヒーローはヘッダーの下まで詰める（ヘッダーは fixed で重なる） */
#cntsSct {
  padding-top: 0;
}

/* ==================================================
LogDetailArea
================================================== */
.LogDetailArea {
  text-align: left;
}
/* PC は記事の終わりからフッターまで 20vw（下層共通：2026-10-13 ユーザー指定。lib.css の XlPdnB は !important のため同じく !important） */
@media screen and (min-width: 961px) {
  .LogDetailArea.XlPdnB {
    padding-bottom: 20vw !important;
  }
}
.LogDetailArea .heroImg img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.LogDetailArea .cntsWrapper {
  width: 88%;
  max-width: 960px;
  margin: 0 auto;
}

.metaGlp {
  margin: 8% auto 0;
  display: flex;
  gap: 1.5em;
  opacity: 0.7;
}

.LogDetailArea .ttlObj {
  margin: 4% auto 0;
  line-height: 1.6;
}

.leadObj {
  margin: 6% auto 0;
  line-height: 1.9;
}

.areaBlk {
  margin: 15% auto 0;
}
.areaBlk .imgObj {
  overflow: hidden;
  filter: grayscale(1);
}
.areaBlk .imgObj img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.areaBlk .txtGlp {
  margin: 6% 0 0;
}
.areaBlk .sTtlObj {
  font-weight: bold;
  line-height: 1.7;
}
.areaBlk .txtSet {
  margin: 6% 0 0;
  line-height: 1.9;
}
.areaBlk .txtSet p + p {
  margin-top: 1.5em;
}

.pullQuote {
  margin: 12% auto;
  background: rgba(217, 217, 217, 0.5);
  padding: 2em 1.5em;
  text-align: center;
  font-weight: bold;
  line-height: 1.7;
}

@media screen and (min-width: 769px) {
  .areaBlk {
    display: flex;
    align-items: center;
    gap: 8%;
  }
  .areaBlk .imgObj {
    width: 42%;
  }
  .areaBlk .txtGlp {
    width: 50%;
    margin: 0;
  }
  .areaBlk.is-reverse {
    flex-direction: row-reverse;
  }
}
@media screen and (min-width: 961px) {
  .areaBlk {
    margin: 10% auto 0;
  }
  .pullQuote {
    margin: 2% auto;
  }
}
@media screen and (min-width: 1281px) {
}

@media screen and (min-width: 769px) {
  .areaBlk.typeA {
  }
  .areaBlk.typeA .imgObj {
    width: 45%;
  }
  .areaBlk.typeA .txtGlp {
    width: 50%;
  }

  .areaBlk.typeB {
  }
  .areaBlk.typeB .imgObj {
    width: 100%;
  }
  .areaBlk.typeB .txtGlp {
    width: 100%;
  }
}

/* ==================================================
配列＋レンダラーの記事（log/inc/article.php）用
================================================== */
/* ヒーローのグレー枠 */
.LogDetailArea .heroImg .phObj.is-hero {
  width: 100%;
  aspect-ratio: var(--ar, 3 / 2);
}

/* 頭：サブタイトル・英文・リード */
.LogDetailArea .subTtlObj {
  margin: 3% auto 0;
  font-size: 1.1em;
  font-weight: bold;
  line-height: 1.8;
}
.LogDetailArea .enSubObj {
  margin: 2% auto 0;
  font-size: 0.9em;
  line-height: 1.8;
  opacity: 0.7;
}
.LogDetailArea .heroCap {
  margin: 1em auto 0;
  line-height: 1.7;
  opacity: 0.7;
}
.LogDetailArea .leadObj p + p {
  margin-top: 1.5em;
}

/* 本文：ブロック間の間隔 */
.artBody {
  margin: 10% auto 0;
}
.artBody > * + * {
  margin-top: 2em;
}
.artBody > * + .secTtlObj {
  margin-top: 4em;
}
.artBody > * + .subSecTtlObj {
  margin-top: 3em;
}
.artBody > * + .qObj {
  margin-top: 2.5em;
}

/* 見出し */
.artBody .secTtlObj .en {
  display: block;
  font-size: 0.8em;
  letter-spacing: 0.08em;
  opacity: 0.6;
}
.artBody .secTtlObj .jp {
  display: block;
  margin-top: 0.3em;
  font-size: 1.4em;
  font-weight: bold;
  line-height: 1.6;
}
.artBody .subSecTtlObj {
  font-weight: bold;
  line-height: 1.7;
}

/* 段落・Q&A・箇条書き */
.artBody .txtObj,
.artBody .aObj p {
  line-height: 1.9;
}
.artBody .qObj {
  font-weight: bold;
  line-height: 1.8;
}
.artBody .aObj .who {
  margin-bottom: 0.3em;
  font-weight: bold;
}
.artBody .aObj p + p {
  margin-top: 1em;
}
.artBody .aObj .listObj {
  margin-top: 1em;
}
.artBody .listObj {
  padding-left: 1.4em;
  list-style: disc;
  line-height: 1.9;
}
.artBody .listObj li + li {
  margin-top: 0.4em;
}

/* データ表・話し手 */
.artBody .dataBlk,
.artBody .speakerBlk {
  padding: 1.5em 0;
  border-top: 1px solid rgba(38, 34, 34, 0.2);
  border-bottom: 1px solid rgba(38, 34, 34, 0.2);
}
.artBody .dataTtl {
  margin-bottom: 1em;
  font-size: 0.8em;
  letter-spacing: 0.08em;
  opacity: 0.6;
}
.artBody .dataList > div {
  display: flex;
  flex-flow: column;
  line-height: 1.8;
}
.artBody .dataList > div + div {
  margin-top: 0.6em;
}
.artBody .dataList dt {
  opacity: 0.7;
}
.artBody .dataList dd {
  margin: 0;
}
.artBody .speakerList li + li {
  margin-top: 1em;
}
.artBody .speakerList .name {
  font-weight: bold;
}
.artBody .speakerList .role {
  font-weight: normal;
  opacity: 0.7;
}
.artBody .speakerList .desc {
  line-height: 1.8;
}

/* 引用・コールアウト */
.artBody .pullQuote {
  margin: 0;
}
.artBody .pullQuote .by,
.artBody .enQuote .by,
.artBody .calloutObj .by {
  margin-top: 1em;
  font-size: 0.85em;
  font-weight: normal;
  opacity: 0.7;
}
.artBody .enQuote {
  padding: 2em 1.5em;
  border-left: 2px solid #262222;
}
.artBody .enQuote .en {
  line-height: 1.8;
}
.artBody .enQuote .jp {
  line-height: 1.9;
}
.artBody .enQuote .en + .en,
.artBody .enQuote .jp + .jp {
  margin-top: 0.8em;
}
.artBody .enQuote .en + .jp {
  margin-top: 1.5em;
}
.artBody .calloutObj {
  padding: 2em 1.5em;
  background: rgba(217, 217, 217, 0.5);
}
.artBody .calloutObj .note {
  font-size: 0.8em;
  opacity: 0.7;
}
.artBody .calloutObj .txt {
  margin-top: 0.8em;
  font-weight: bold;
  line-height: 1.9;
}

/* 写真・グレー枠 */
.artBody .figObj {
  margin: 0;
}
.artBody .figObj img {
  display: block;
  width: 100%;
  height: auto;
}
.artBody .figObj figcaption {
  margin-top: 0.8em;
  line-height: 1.7;
  opacity: 0.7;
}
.phObj {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: var(--ar, 3 / 2);
  padding: 1.5em;
  box-sizing: border-box;
  background: #d9d9d9;
}
.phObj .labelObj {
  font-size: 0.8em;
  line-height: 1.7;
  text-align: center;
  opacity: 0.8;
}
.artBody .pairGrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5em;
}
.artBody .pairNote {
  margin-top: 0.8em;
  opacity: 0.7;
}

/* リンク・一覧へ戻る */
.artBody .linkObj a {
  font-weight: bold;
  text-decoration: underline;
}
.LogDetailArea .backLink {
  margin: 12% auto 0;
  letter-spacing: 0.08em;
}
.LogDetailArea .backLink a {
  text-decoration: underline;
}

@media screen and (min-width: 769px) {
  .artBody .dataList > div {
    flex-flow: row;
    gap: 1em;
  }
  .artBody .dataList dt {
    flex: 0 0 9em;
  }
  .artBody .dataList dd {
    flex: 1;
  }
  .artBody > .figObj .phObj.is-tall {
    width: 50%;
    margin: 0 auto;
  }
  .artBody > .figObj > img.is-tall {
    width: 50%;
    margin: 0 auto;
  }
  .artBody .pairGrid {
    grid-template-columns: 1fr 1fr;
    gap: 4%;
  }
}