@charset "UTF-8";

/* =========================================================
   特注クラウド — /media/ pages (templates/*.html, built by scripts/build.mjs)
   Loaded after style.css and art-direction.css, by the media pages only.
   Every rule is scoped to main.page-media: the shared header and footer stay as on the LP.
   Colours, radii and spacing use the existing custom properties only.
   ========================================================= */

/* 書体: LP の Zen Kaku Gothic New は LP の文字だけのサブセット（assets/fonts/README.md）なので、
   記事本文に使うと未収録の字だけ OS 書体に落ち、1文字ごとに書体が混ざる。記事は OS 書体にする。
   --font-jp を当てているのは style.css の body だけで（style.css:51）、見出しは継承、.btn は
   font-family: inherit（style.css:195）、.btn-big も継承なので、main に指定すれば配下はすべてこの書体になる。
   英字の .kicker と FAQ の Q/A バッジは style.css のとおり --font-en のまま。 */
main.page-media {
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  padding-block: 40px 96px;
}

/* ---------- パンくず ---------- */

.page-media .breadcrumb {
  margin-bottom: 32px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}

.page-media .breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-media .breadcrumb li + li::before {
  content: "›";
  margin-right: 0.5em;
}

.page-media .breadcrumb a {
  color: var(--muted);
}

/* ---------- 記事の頭 ---------- */

.page-media .article-head {
  margin-bottom: 32px;
}

.page-media .article-head h1 {
  margin: 0 0 16px;
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 700;
  line-height: 1.5;
}

.page-media .article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}

.page-media .article-eyecatch {
  margin: 0 0 40px;
}

/* 縦横比は width/height 属性に任せる（style.css の img は height: auto） */
.page-media .article-eyecatch img {
  width: 100%;
  border-radius: var(--radius-card);
}

.page-media .article-lead p {
  font-size: 17px;
  line-height: 1.9;
}

/* ---------- 本文 ---------- */

.page-media .article-body h2 {
  margin: 56px 0 20px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.02em;
}

.page-media .article-body h3 {
  margin: 32px 0 12px;
  font-size: 19px;
  line-height: 1.6;
}

.page-media .article-body p,
.page-media .article-body li {
  font-size: 16px;
  line-height: 1.9;
}

.page-media .article-body ul,
.page-media .article-body ol {
  margin: 0 0 1.2em;
  padding-left: 1.5em;
}

.page-media .article-body li + li {
  margin-top: 0.4em;
}

.page-media .article-body blockquote {
  margin: 0 0 1.2em;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--line);
  color: var(--muted);
}

.page-media .article-body .table-scroll {
  margin: 0 0 1.2em;
}

.page-media .article-body table {
  font-size: 14px;
}

.page-media .article-body .source {
  margin-top: -0.4em;
}

/* ---------- 中間 CTA（無料サンプル） ---------- */

.page-media .article-cta {
  margin: 48px 0;
  text-align: center;
}

.page-media .article-cta-head {
  margin-bottom: 16px;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}

.page-media .article-cta .note {
  margin-top: 12px;
}

/* ---------- よくあるご質問 ---------- */

.page-media .article-faq .faq {
  margin-top: 8px;
}

/* 回答が2段落以上のとき、style.css の .faq details > p（罫線と「A」バッジ、style.css:1301-1320）が
   2段落目にも付くので、2段落目以降は罫線とバッジを外して1つの回答として見せる */
.page-media .article-faq .faq details > p + p {
  border-top: 0;
  padding-top: 0;
}

.page-media .article-faq .faq details > p + p::before {
  content: none;
}

/* 記事の FAQ も id="faq"（JSON-LD の {url}#faq の飛び先）。art-direction.css:190-204,220-223,355-361 の
   LP 用の #faq（重ね合わせ用の position/isolation と ::before の背景画像）が付くので打ち消す */
.page-media #faq {
  position: static;
  isolation: auto;
}

.page-media #faq::before {
  content: none;
}

/* ---------- 末尾 CTA（現場診断） ---------- */

/* .cta-band-inner は2列の grid（style.css:930-934）。記事末尾はボタン1つなので1列にし、
   幅は LP の1列分（(1200−48−32)/2 = 560px）にとどめて中央に置く */
.page-media .cta-band-inner.is-single {
  grid-template-columns: minmax(0, 560px);
  justify-content: center;
}

.page-media .article-cta-end {
  margin-top: 64px;
}

/* ---------- 定義文・著者欄 ---------- */

.page-media .article-end {
  margin-top: 56px;
}

.page-media .article-define {
  margin-bottom: 24px;
  font-size: 15px;
}

.page-media .article-define a {
  margin-left: 0.5em;
}

.page-media .author-box {
  font-size: 15px;
}

.page-media .author-name {
  margin-bottom: 4px;
  font-weight: 700;
  color: var(--ink);
}

/* ---------- 関連記事 ---------- */

.page-media .related {
  margin-top: 56px;
}

.page-media .related h2 {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 700;
}

.page-media .related-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-media .related-list .card {
  padding: 20px;
}

.page-media .related-title {
  margin-bottom: 8px;
  font-weight: 700;
  line-height: 1.6;
}

.page-media .related-desc {
  font-size: 13px;
  line-height: 1.8;
  color: var(--muted);
}

/* ---------- 一覧 ---------- */

.page-media .sec-head h1 {
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 700;
  line-height: 1.5;
}

.page-media .sec-head .more {
  margin-top: 16px;
}

.page-media .media-list {
  display: grid;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-media .media-item {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  padding: 24px;
}

.page-media .media-thumb img {
  width: 100%;
  border-radius: var(--radius);
}

.page-media .media-item-title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.6;
}

.page-media .media-item-title a {
  text-decoration: none;
}

.page-media .media-item-title a:hover {
  text-decoration: underline;
}

.page-media .media-item-desc {
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.8;
}

.page-media .media-empty {
  color: var(--muted);
}

/* ---------- スマホ ---------- */

@media (max-width: 767px) {
  main.page-media {
    padding-block: 24px 72px;
  }

  .page-media .article-body h2 {
    margin-top: 48px;
    font-size: 21px;
  }

  .page-media .related-list,
  .page-media .media-item {
    grid-template-columns: 1fr;
  }

  .page-media .media-item {
    gap: 16px;
    padding: 20px;
  }
}

/* ---------- 印刷 ---------- */

@media print {
  .page-media .article-cta,
  .page-media .article-cta-end {
    display: none !important;
  }
}