/* ═══ catapultsuplex main.css(第三弾統合・2026-07-19)══════════════
 * 旧: header.css / layout-fixes.css / components.css / orbit-animation.css
 * 機能単位はセクションコメントで維持。編集はこのファイルへ(旧7本は廃止予定) */

/* ═══════════ header ═══════════ */
/* ヘッダーを画面上部に固定(デスクトップのみ。モバイルは通常スクロール)
   テーマページでは template-part のラッパー(header.wp-block-template-part)が
   cs-header を包むため、ラッパー側を sticky にする。
   プラグインページ(/docs/)はラッパーなしで cs-header が直接出力されるため両方指定。 */
@media (min-width: 681px) {
  .wp-site-blocks > header.wp-block-template-part,
  body > header.cs-header,
  .csdocs-standalone header.cs-header {
    position: sticky;
    top: 0;
    z-index: 100;
  }
  /* 管理バー表示中(ログイン時)は管理バーの高さ分だけ下げる */
  body.admin-bar .wp-site-blocks > header.wp-block-template-part,
  body.admin-bar > header.cs-header,
  body.admin-bar.csdocs-standalone header.cs-header {
    top: 46px;
  }
}
@media (min-width: 783px) {
  body.admin-bar .wp-site-blocks > header.wp-block-template-part,
  body.admin-bar > header.cs-header,
  body.admin-bar.csdocs-standalone header.cs-header {
    top: 32px;
  }
}

.cs-header a {
  color: #0A0A0A;
  text-decoration: none;
}
.cs-header a:hover,
.cs-header a:focus {
  color: #0F6E56;
}
.cs-header .wp-block-site-logo:empty {
  display: none;
}

/* モバイル: タイトルを縮小して1行に、余白をコンパクトに */
@media (max-width: 680px) {
  header.cs-header {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 14px !important;
    padding-bottom: 14px !important;
  }
  .cs-header .wp-block-site-title {
    font-size: 16px !important;
  }
  .cs-header .wp-block-site-title a {
    white-space: nowrap;
  }
}

/* モバイルのハンバーガーメニュー(開いた状態)の背景をサイトのトーンに合わせる */
.cs-header .wp-block-navigation__responsive-container.is-menu-open {
  background-color: #FDF1EA;
}
.cs-header .wp-block-navigation__responsive-container.is-menu-open a {
  font-size: 18px;
  color: #0A0A0A;
}

/* ═══════════ layout-fixes ═══════════ */
/* ヘッダーとコンテンツの間のテーマデフォルト余白を除去 */
/* main要素のmargin-top(70px)を打ち消す */
.wp-site-blocks main.wp-block-group {
  margin-block-start: 0 !important;
}

/* mainの直下のラッパーグループのpadding-top(70px)を打ち消す */
main.wp-block-group > .wp-block-group.has-global-padding:first-child {
  padding-top: 0 !important;
}

/* ═══════════ components ═══════════ */
/* 浮遊カード */
.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;
}


/* ブログ一覧(/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;
}

/* カテゴリータブ(セクション別。動的ブロック 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;
}


/* 著者ボックス(本文末尾・カテゴリーで二面出し分け)。
   浮遊カード様式に準拠(背景ページ同色・罫線なし・角丸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%;
}

.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行の横スクロールにする */


/* 視覚的に隠す(スクリーンリーダー・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);
}

/* ── ヒーローCTA(トップページ id=7 の csx-hero-ctas ブロック): モバイルは中央寄せ ──
 * ボタンは内容幅のまま列中央に。アンカーをflex化してアイコンとテキストの間隔を制御。
 * padding/margin の !important はDB側インラインstyle(32px/0.55em)への上書きに必要 */

/* ── モバイル(≤680px)集約 ── */
@media (max-width: 680px) {
.csx-card { padding: 32px 24px; }

ul.csx-blog-grid > li {
    flex-basis: 100%;
  }

.csx-related-grid {
    grid-template-columns: repeat(2, 1fr);
  }

.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;
  }
}

/* ── 狭幅(≤480px)集約 ── */
@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-hero-ctas { justify-content: center; }
  .csx-hero-ctas .wp-block-button__link {
    display: inline-flex;
    align-items: center;
    padding-left: 22px !important;
    padding-right: 22px !important;
  }
  .csx-hero-ctas .wp-block-button__link svg { margin-right: 0.4em !important; }
}

/* ═══════════ orbit-animation ═══════════ */
.o-scene {
  width: min(100%, 600px);
  aspect-ratio: 1 / 1;
  perspective: 1100px;
  position: relative;
  margin: 0 auto;
}
.o-stack {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(62deg) rotateZ(-12deg);
}
.o-unit, .o-enter, .o-bob, .o-flip {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}
.o-unit.r2 { inset: 12%; }
.o-unit.r3 { inset: 24%; }

.o-enter {
  transform: rotateZ(-150deg) scale(.01);
  animation: o-enter 1.3s cubic-bezier(.5, 0, .15, 1) forwards;
}
.r1 .o-enter { animation-delay: 0s; }
.r2 .o-enter { animation-delay: .22s; }
.r3 .o-enter { animation-delay: .44s; }

.o-bob { animation: o-ripple 2.2s ease-in-out infinite; }
.r3 .o-bob { animation-delay: 1.6s; }
.r2 .o-bob { animation-delay: 1.97s; }
.r1 .o-bob { animation-delay: 2.34s; }

.o-flip { animation: cubic-bezier(.6, 0, .25, 1) infinite; }
.r1 .o-flip { animation-name: o-flip-a; animation-duration: 12s; animation-delay: 3.2s; }
.r2 .o-flip { animation-name: o-flip-b; animation-duration: 9.5s; animation-delay: 5.6s; }
.r3 .o-flip { animation-name: o-flip-c; animation-duration: 8s; animation-delay: 7.4s; }

.o-ringsvg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.o-ring {
  fill: none;
  stroke: #0A0A0A;
  stroke-width: 1.6;
}
.o-orb {
  transform-origin: 100px 100px;
  animation: o-spin linear infinite;
}
.r1 .o-orb { animation-duration: 15s; }
.r2 .o-orb { animation-duration: 10s; animation-direction: reverse; }
.r3 .o-orb { animation-duration: 7s; }
.o-dot { fill: #0A0A0A; }
.o-dot.blue { fill: #0F6E56; }

.o-tag {
  position: absolute;
  left: -999px;
  top: -999px;
  transform: translate(-50%, -100%);
  font-family: var(--wp--preset--font-family--body-font, sans-serif);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .1em;
  color: #0A0A0A;
  background: #FDF1EA;
  padding: 2px 8px;
  white-space: nowrap;
  opacity: 0;
  animation: o-fade .5s ease 1.8s forwards;
  pointer-events: none;
}

@keyframes o-enter { to { transform: rotateZ(0deg) scale(1); } }
@keyframes o-ripple {
  0%, 100% { transform: translateZ(0px); }
  20% { transform: translateZ(48px); }
  50% { transform: translateZ(-20px); }
  75% { transform: translateZ(8px); }
}
@keyframes o-flip-a { 0%, 55% { transform: rotate3d(1, .35, 0, 0deg); } 80%, 100% { transform: rotate3d(1, .35, 0, 360deg); } }
@keyframes o-flip-b { 0%, 58% { transform: rotate3d(.4, 1, 0, 0deg); } 84%, 100% { transform: rotate3d(.4, 1, 0, -360deg); } }
@keyframes o-flip-c { 0%, 60% { transform: rotate3d(1, -.6, 0, 0deg); } 86%, 100% { transform: rotate3d(1, -.6, 0, 360deg); } }
@keyframes o-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes o-fade { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .o-enter, .o-bob, .o-flip, .o-orb { animation: none !important; }
  .o-enter { transform: none; }
  .o-tag { animation: none !important; opacity: 1 !important; }
}