/* 浮遊カード */
.csx-card {
  background: #FDF1EA;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(10, 10, 10, 0.20);
  padding: 48px 40px;
}
/* カード内の箇条書き(ティールのダッシュマーカー) */
.csx-card ul.csx-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.csx-card ul.csx-list li {
  position: relative;
  padding-left: 22px;
  font-size: 16px;
  line-height: 2;
}
.csx-card ul.csx-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95em;
  width: 12px;
  height: 2px;
  background: #0F6E56;
}
@media (max-width: 680px) {
  .csx-card { padding: 32px 24px; }
}

/* ブログ一覧(/blog/・/journal/共通)
   WPのグリッドレイアウトをflexに置き換え、最終行の余りカード(1〜2枚)が
   空白を残さず均等に伸びて行を埋めるようにする */
ul.csx-blog-grid.csx-blog-grid {
  display: flex !important;
  flex-wrap: wrap;
  gap: 24px;
}
ul.csx-blog-grid > li {
  flex: 1 1 calc(33.333% - 16px);
  min-width: min(260px, 100%);
  margin: 0;
}
@media (max-width: 680px) {
  ul.csx-blog-grid > li {
    flex-basis: 100%;
  }
}
/* カテゴリータブ(セクション別。動的ブロック csx/section-tabs が出力) */
.csx-cat-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 0 0 40px;
}
.csx-cat-tab {
  font-size: 15px;
  color: #0A0A0A;
  text-decoration: none;
  padding-bottom: 6px;
  border-bottom: 2px solid transparent;
}
.csx-cat-tab:hover,
.csx-cat-tab:focus {
  color: #0F6E56;
}
.csx-cat-tab.csx-tab-industry:hover,
.csx-cat-tab.csx-tab-industry:focus {
  color: var(--csx-accent-industry);
}
.csx-cat-tab.is-active {
  font-weight: 700;
  border-bottom-color: #0F6E56;
}
.csx-cat-tab.is-active.csx-tab-industry {
  border-bottom-color: var(--csx-accent-industry);
}
/* アイキャッチ主役のカード: 画像を縁までフル表示し、下に小さくタイトル */
.csx-card.csx-blog-card {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.csx-blog-card .wp-block-post-featured-image {
  margin: 0;
}
.csx-blog-card .wp-block-post-featured-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.csx-blog-card .csx-blog-card-title {
  padding: 14px 20px 18px;
  margin: 0;
}

/* 会社概要: ビジュアル側カード(左カードと同じ高さで、画像が全面を覆う) */
.csx-card.csx-about-visual {
  padding: 0;
  overflow: hidden;
  position: relative;
  min-height: 320px;
}
.csx-about-visual .ab-hero {
  position: absolute;
  inset: 0;
  max-width: none;
  margin: 0;
}
.csx-about-visual .ab-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.csx-post-cat a {
  color: #0F6E56;
  text-decoration: none;
}
.csx-post-title a {
  color: #0A0A0A;
  text-decoration: none;
}
.csx-post-title a:hover,
.csx-post-title a:focus {
  color: #0F6E56;
}
.csx-post-date {
  opacity: 0.55;
}
.csx-pagination {
  margin-top: 48px;
}
.csx-pagination a,
.csx-pagination .page-numbers {
  color: #0A0A0A;
  text-decoration: none;
}
.csx-pagination .page-numbers.current {
  font-weight: 700;
  border-bottom: 2px solid #0F6E56;
}

/* カテゴリーアクセント */
:root {
  --csx-accent-industry: #C56A45;  /* 業界動向: テラコッタ */
}

/* アクセントバー(記事タイトル下・カテゴリー一覧見出し下) */
.csx-accent-bar {
  width: 48px;
  height: 4px;
  padding: 0;
  margin: 4px 0 16px;
  background: #0F6E56;
}
.csx-cat-label,
.csx-cat-label a {
  color: #0F6E56;
}

/* 一覧・記事共通: カテゴリーアクセントの適用先 */
.csx-cat-industry .csx-cat-label,
.csx-cat-industry .csx-cat-label a,
.csx-cat-industry .csx-accent-text { color: var(--csx-accent-industry); }
.csx-cat-industry .csx-accent-bg { background: var(--csx-accent-industry); }
.csx-cat-industry .csx-list li::before { background: var(--csx-accent-industry); }

/* ブログ一覧カード: カテゴリーリンクの色をスラッグで切り替え(CSSセレクタ方式) */
.wp-block-post-terms a[href*="industry-trends"] { color: var(--csx-accent-industry); }

/* 関連記事(共有タグベース、本文末尾に自動挿入) */
.csx-related {
  margin-top: 64px;
}
.csx-related-title {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  font-size: 1.25rem;
  color: #0A0A0A;
  margin-bottom: 0;
}
.csx-related-grid {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 24px 20px;
}
.csx-related-card a {
  display: block;
  text-decoration: none;
  color: #0A0A0A;
}
.csx-related-thumb {
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: #FDF1EA;
  box-shadow: 0 12px 30px rgba(10, 10, 10, 0.20);
}
.csx-related-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
}
.csx-related-noimg {
  display: block;
  width: 100%;
  height: 100%;
  background: #FDF1EA;
  border-bottom: 4px solid #0F6E56;
}
.csx-related-name {
  display: block;
  margin-top: 12px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
}
.csx-related-card a:hover .csx-related-name,
.csx-related-card a:focus .csx-related-name {
  color: #0F6E56;
}
@media (max-width: 680px) {
  .csx-related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 著者ボックス(本文末尾・カテゴリーで二面出し分け)。
   浮遊カード様式に準拠(背景ページ同色・罫線なし・角丸12px・box-shadow)。
   人物は単一。面(business/culture)でアクセント色だけを変える。 */
.csx-author-box {
  margin-top: 56px;
  padding: 32px 28px;
  background: #FDF1EA;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(10, 10, 10, 0.20);
}
.csx-author-box .csx-accent-bar {
  margin: 0 0 16px;
  background: #0F6E56;
}
.csx-author-inner {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.csx-author-figure {
  flex: 0 0 auto;
}
.csx-author-text {
  flex: 1;
  min-width: 0;
}
/* ビジネス面=円形の顔写真(透過WebP)。カルチャー面=イラスト(全身・自然比)。 */
.csx-author-avatar {
  display: block;
  width: 88px;
  height: auto;
  border-radius: 8px;
}
.csx-author-business .csx-author-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
}
@media (max-width: 480px) {
  .csx-author-inner { gap: 14px; }
  .csx-author-avatar,
  .csx-author-business .csx-author-avatar { width: 64px; }
  .csx-author-business .csx-author-avatar { height: 64px; }
}
.csx-author-eyebrow {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #0F6E56;
}
.csx-author-name {
  margin: 4px 0 2px;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  font-size: 1.25rem;
  color: #0A0A0A;
}
.csx-author-role {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 700;
  color: #0F6E56;
}
.csx-author-bio {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.9;
  color: #0A0A0A;
}
.csx-author-more {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
}
.csx-author-more a {
  color: #0F6E56;
  text-decoration: none;
}
.csx-author-more a:hover,
.csx-author-more a:focus {
  text-decoration: underline;
}
/* 法務ページ(条>項>号の入れ子・ぶら下げインデント。可視の番号は原本のまま) */
.csx-legal { line-height: 1.9; }
.csx-legal-h {
  margin: 2em 0 0.6em;
  font-size: 1.15rem;
}
.csx-legal-body { margin: 0.5em 0; }
.csx-legal-item {
  display: flex;
  margin: 0.35em 0;
}
.csx-legal-num {
  flex: 0 0 auto;
  white-space: nowrap;
}
.csx-legal-txt { flex: 1; min-width: 0; }
/* 番号項目の直下に続く説明文段落は、テキスト列(csx-legal-txt)の子として番号のテキスト
   開始位置に揃える。段落間はmarginで分け、<br>結合はしない。 */
.csx-legal-txt p { margin: 0 0 0.5em; }
.csx-legal-txt p:last-child { margin-bottom: 0; }
/* 項=条から一段、号=項からさらに一段(番号の位置ごと下げる=ぶら下げは各行内のflexで担保) */
.csx-legal-l1 { padding-left: 1.5em; }
.csx-legal-l2 { padding-left: 3em; }

/* /profile/ の写真(円形・透過WebP)とイラスト(全身・自然比)のサイズ調整 */
.csx-profile-photo { margin: 0; }
.csx-profile-photo img { width: 200px; height: auto; border-radius: 50%; }
.csx-profile-illust { margin: 0; }
.csx-profile-illust img { width: 220px; height: auto; }
.csx-profile-role { font-weight: 700; color: #0F6E56; margin-top: 4px; }

/* カルチャー面はテラコッタのアクセント(=個人の批評の面)。ビジネス面はティール。 */
.csx-author-culture .csx-accent-bar { background: var(--csx-accent-industry); }
.csx-author-culture .csx-author-eyebrow,
.csx-author-culture .csx-author-role,
.csx-author-culture .csx-author-more a { color: var(--csx-accent-industry); }

/* フッター(ロゴ/©/プライバシーポリシー/利用規約の静かな一列) */
.cs-footer {
  border-top: 1px solid rgba(10, 10, 10, 0.08);
}
.cs-footer-row {
  align-items: center;
}
.cs-footer-copy {
  color: rgba(10, 10, 10, 0.65);
}
.cs-footer-link a {
  color: #0F6E56;
  text-decoration: none;
}
.cs-footer-link a:hover,
.cs-footer-link a:focus {
  text-decoration: underline;
}

/* カードサムネイル: contain方式(縦長の書影なども切り抜かずに収める)。
   余白はクリーム背景で埋める */
.csx-blog-card .wp-block-post-featured-image,
.csx-blog-card .csx-card-thumb-fallback {
  background: #FDF1EA;
  border-radius: 8px;
  overflow: hidden;
}
.csx-blog-card .wp-block-post-featured-image img {
  object-fit: contain !important;
}
/* アイキャッチ未設定時のフォールバック(本文先頭画像) */
.csx-blog-card .csx-card-thumb-fallback {
  display: block;
  aspect-ratio: 40 / 21;
}
.csx-blog-card .csx-card-thumb-fallback img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  margin: 0;
}

/* 本文中の画像: はてな移行分のwidth/height固定属性(例: width="1200")が
   コンテンツ幅を超えても、はみ出さないように上書きする */
.wp-block-post-content img {
  max-width: 100%;
  height: auto;
}
/* 関連記事のサムネイルは上記height:autoの対象外(16:9ボックスをcoverで埋める) */
.wp-block-post-content .csx-related-thumb img {
  height: 100%;
  object-fit: cover;
}
/* 大きな埋め込み・テーブルも横スクロールを本文外に漏らさない */
.wp-block-post-content iframe {
  max-width: 100%;
}
.wp-block-post-content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* カードの高さ統一: タイトル2行+抜粋3行にクランプし、行内のカード高を揃える */
ul.csx-blog-grid > li {
  display: flex;
}
ul.csx-blog-grid .csx-card.csx-blog-card {
  width: 100%;
}
/* h2自体はflexアイテムのため-webkit-boxがブロック化されline-clampが効かない。
   flexアイテムでない内側のaにクランプを掛ける */
.csx-blog-card .csx-blog-card-title {
  min-height: calc(2em * 1.6 + 32px); /* 2行分+上下padding。1行タイトルでも高さを揃える */
}
.csx-blog-card .csx-blog-card-title a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.csx-blog-card .csx-blog-card-excerpt {
  padding: 0 20px 18px;
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  opacity: 0.75;
}
.csx-blog-card .csx-blog-card-excerpt p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  min-height: calc(3em * 1.7); /* 抜粋が短くても3行分の高さを確保して行間の高さ差をなくす */
}

/* カードの更新日(抜粋の下、さらに控えめに) */
.csx-blog-card .csx-blog-card-date {
  padding: 6px 20px 16px;
  margin: 0;
  font-size: 11px;
  color: #0A0A0A;
  opacity: 0.45;
}

/* カテゴリータブ: モバイルでは折り返さず1行の横スクロールにする */
@media (max-width: 600px) {
  .csx-cat-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 16px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
    /* 右端フェード: スクロール可能であることを示す */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
  }
  .csx-cat-tabs::-webkit-scrollbar {
    display: none; /* Chrome/Safari */
  }
  .csx-cat-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: 14px;
  }
}

/* 視覚的に隠す(スクリーンリーダー・SEO用のH1などに使用) */
.csx-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* パンくずリスト(最上部・タブの上。控えめな一行) */
.csx-breadcrumbs {
  font-size: 12px;
  line-height: 1.6;
  margin: 0 0 20px;
  color: rgba(10, 10, 10, 0.6);
}
.csx-breadcrumbs a {
  color: #0F6E56;
  text-decoration: none;
}
.csx-breadcrumbs a:hover,
.csx-breadcrumbs a:focus {
  text-decoration: underline;
}
.csx-bc-sep {
  margin: 0 8px;
  color: rgba(10, 10, 10, 0.35);
}
.csx-bc-current {
  color: rgba(10, 10, 10, 0.6);
}