@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

/*
  固定ページID50「個別企業分析」限定の調整。
  Query Loop(wp:query)が生成する<ul class="wp-block-post-template">は、
  ページ本文(.post_content)の内側に出力されるため、SWELL本体のCSS
  (.post_content :where(ul:not([type])){list-style:disc} および
  .post_content ul{padding-left:var(--swl-list-padding--left)})が
  そのまま適用され、本来カード型リストであるはずのQuery Loopに
  ブラウザ標準の黒丸(・のように見える)リストマーカーと左インデントが
  出ていた。WordPressコア側は.wp-block-post-templateにlist-style:none/
  padding:0を指定済みだが、SWELL側のセレクタと詳細度が同等または
  それ以上のため上書きされてしまっていた。
  .page-id-50 .wp-block-post-template はクラス2つ分でSWELL側の
  どちらのセレクタよりも詳細度が高いため、確実に上書きできる。
  他ページ・他のwp-block-post-templateには一切影響しない。
*/
.page-id-50 .wp-block-post-template {
  list-style: none;
  padding-left: 0;
}

/*
  固定ページID50「個別企業分析」限定・PC表示の調整。
  Query Loop内の各記事カードで、アイキャッチ(figure.wp-block-post-featured-image)の
  下端とタイトル(h2.wp-block-post-title)の上端の余白について、WordPressコアは
  figureのmargin-left/rightのみを0にし、margin-top/bottomやh2のmarginには
  一切触れていない(SWELL本体のCSSにも.wp-block-post関連のルールは存在しない)。
  そのためブラウザ既定のfigure/h2の余白がそのまま残り、PC表示で間隔が
  目立って広く見えていた。ここではPC表示向けに既定値よりやや詰めた値へ
  調整する(スマホ表示ほど詰めない、モバイル用ルールは下記に維持)。
  他ページ・他のwp-block-post-featured-image/post-titleには一切影響しない。
*/
.page-id-50 .wp-block-post-template .wp-block-post-featured-image {
  margin-bottom: 0.75em;
}
.page-id-50 .wp-block-post-template .wp-block-post-title {
  margin-top: 0.6em;
}

/*
  固定ページID50「個別企業分析」限定・スマートフォン表示限定の調整。
  Query Loop内の各記事カードで、アイキャッチ(figure.wp-block-post-featured-image)の
  下端とタイトル(h2.wp-block-post-title)の上端に、ブラウザ既定のマージン(figureの
  margin-bottom、h2のmargin-top)がそのまま残っており、PC/SPとも同じ絶対値のため、
  カード幅が狭くなるスマホでは相対的に余白が大きく見えていた。
  SWELL本体・Gutenbergコアともこの2要素に対する明示的な余白制御を行っていないため
  (SWELL側のCSSに.wp-block-post関連のルールは存在しない)、標準機能の範囲では
  スマホ限定の調整ができず、子テーマCSSで最小限の上書きを行う。
  PC表示・他ページ・他のwp-block-post-featured-image/post-titleには一切影響しない。
*/
@media screen and (max-width: 600px) {
  .page-id-50 .wp-block-post-template .wp-block-post-featured-image {
    margin-bottom: 0.5em;
  }
  .page-id-50 .wp-block-post-template .wp-block-post-title {
    margin-top: 0.4em;
  }
}

/*
  固定ページID50「個別企業分析」限定・冒頭の隊長吹き出し(loos/balloon)の
  丸型アイコン表示調整。

  【背景について】
  使用画像 captain-talk-basic-right-v1.png(メディアID231、横向き会話素材Ver.1・
  基本会話用)は、2026-09-08の調査でPNGにアルファチャンネルが存在せず
  (hasAlpha:false)、透明に見せるための市松模様がRGBの不透明ピクセルとして
  そのまま焼き込まれていることが判明した(ペン隊員ライブラリで過去にあった
  ものと同種の問題)。これは背景ピクセルのみをアルファ透過する処理で
  画像ファイル自体を修正済み(キャラクター本体には一切手を加えていない。
  修正前の原本はサーバー側backup_20260908_captain_talk_basic/、
  ローカルはcharacters/captain/_backup_20260908_captain_talk_basic_before_transparency_fix/
  に保存済み)。このCSS変更とは別に、WordPressメディアID231の元画像・
  各生成サイズ(150/300/768/1024)も同日付で透過修正版に置き換え・再生成済み。

  【顔を大きく見せる調整について】
  captain-talk-basic-right-v1.pngは1254x1254の正方形キャンバスに、
  ヘルメット～脚まで全身が収まる構図のため、SWELL標準の丸型アイコン
  (60px/80px)にそのまま表示すると顔が小さく表情が分かりにくかった。
  画像ファイルを新規にトリミングするのではなく、表示側のみで
  「ヘルメット+顔+肩の一部」にズームする。具体的には、
  .c-balloon__iconImg(実画像)を非表示にし、代わりに
  .c-balloon__icon.-circle自体にbackground-imageとして同画像を敷き、
  background-size/background-positionで元画像中央上部(顔がある範囲、
  おおよそx:18.2%-58.1%, y:0.8%-40.7%の正方形領域)だけを丸の中に
  拡大表示している(right向き=画面右の吹き出しを見る向きは維持)。
  背景の再生成サイズのうちlarge(1024x1024)を使用し、60px/80px表示でも
  ぼやけないだけの解像度を確保している。

  他ページ、および今後別の場所でcaptain-talk-basic-right-v1.pngを
  そのまま(このズームなしで)使う場合には一切影響しない
  (このルールは.page-id-50配下の丸型アイコンにのみ適用される)。
*/
.page-id-50 .c-balloon__icon.-circle {
  width: 60px;
  height: 60px;
  border: solid 2px #ececec;
  border-radius: 50%;
  background-image: url("https://shisan-boueitai.com/wp-content/uploads/2026/09/captain-talk-basic-right-v1-1024x1024.png");
  background-repeat: no-repeat;
  background-size: 250.8% 250.8%;
  background-position: 30.24% 1.33%;
}
@media screen and (min-width: 600px) {
  .page-id-50 .c-balloon__icon.-circle {
    width: 80px;
    height: 80px;
  }
}
.page-id-50 .c-balloon__icon.-circle > .c-balloon__iconImg {
  display: none;
}

/*
  上記の丸型アイコンズーム調整の副作用の修正。
  loos/balloonブロックはballoonName("隊長")が設定されている場合、
  .c-balloon__icon内に<span class="c-balloon__iconName">隊長</span>を
  imgの次の要素として出力する(SWELL標準仕様、padding-top:4pxで通常は
  img(60/80px)の下に表示される)。上のルールでc-balloon__iconImgを
  display:noneにした結果、img分の高さが無くなり、このiconNameが
  丸アイコンの一番上(=顔の位置)に重なって表示されてしまっていた。
  対象balloon(.-circle)配下のiconNameだけを非表示にする
  (他ページ・他balloonのballoonName表示には一切影響しない)。
*/
.page-id-50 .c-balloon__icon.-circle > .c-balloon__iconName {
  display: none;
}

/*
  固定ページID66「隊長スクリーニング」限定のデザイン調整。
  「資産防衛隊本部」という一つの施設の中でコンテンツが展開している世界観を
  表現するため、3箇所のセクション(ファーストビュー+企業発掘プロセス／
  ジャンルから探す／さらに詳しく確認した40社)に背景写真を敷いている。
  背景写真はメディアライブラリではなく、本子テーマ内の
  /assets/images/backgrounds/ に静的ファイルとして保存したものを
  background-imageで直接参照している(SWELL親テーマ・他ページには影響しない)。
  文字の可読性を最優先し、写真の上に紺色の半透明グラデーションオーバーレイ
  (::before疑似要素)を重ね、実コンテンツは直接の子要素をposition:relative+
  z-index:1にして常にオーバーレイより手前に表示させている。
  他ページのwp-block-groupには一切影響しない(.page-id-66限定のクラスのみに適用)。
*/
.page-id-66 .sb66-band {
  position: relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 14px;
  overflow: hidden;
  color: #fff;
}
.page-id-66 .sb66-band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.page-id-66 .sb66-band > * {
  position: relative;
  z-index: 1;
}
.page-id-66 .sb66-band--office {
  background-image: url("https://shisan-boueitai.com/wp-content/themes/swell_child/assets/images/backgrounds/web-bg-fire-station-office-v1.png");
  background-position: center 30%;
}
.page-id-66 .sb66-band--office::before {
  background: linear-gradient(180deg, rgba(10, 20, 38, 0.72) 0%, rgba(10, 20, 38, 0.86) 100%);
}
.page-id-66 .sb66-band--garage {
  background-image: url("https://shisan-boueitai.com/wp-content/themes/swell_child/assets/images/backgrounds/web-bg-fire-station-garage-v1.png");
  background-position: center 45%;
}
.page-id-66 .sb66-band--garage::before {
  background: linear-gradient(180deg, rgba(10, 20, 38, 0.66) 0%, rgba(10, 20, 38, 0.82) 100%);
}
.page-id-66 .sb66-band--command {
  background-image: url("https://shisan-boueitai.com/wp-content/themes/swell_child/assets/images/backgrounds/web-bg-command-center-v1.png");
  background-position: center center;
}
.page-id-66 .sb66-band--command::before {
  background: linear-gradient(180deg, rgba(8, 14, 28, 0.8) 0%, rgba(8, 14, 28, 0.9) 100%);
}
@media screen and (max-width: 782px) {
  .page-id-66 .sb66-band--office { background-position: 38% center; }
  .page-id-66 .sb66-band--garage { background-position: 22% center; }
  .page-id-66 .sb66-band--command { background-position: center center; }
  .page-id-66 .sb66-band { border-radius: 0; }
}

/*
  固定ページID66限定・ヒーロー部の隊長キャラクター表示。
  公式素材captain-02-point.png(全身・縦長)をそのまま全身表示すると
  背景写真の情報量と競合し窮屈に見えるため、Webデザイン側の表示調整として
  上半身～顔にズームし、セクション下端から「覗き込む」構図にしている。
  画像ファイル自体は一切加工していない(トリミング・変形はCSS表示側のみ、
  object-fit:containで縦横比を維持したまま、拡大位置をbottom/centerに
  寄せて上半身のみを枠内に見せている)。禁止されている画像の変形・引き伸ばしは
  行っていない。他ページには一切影響しない。
*/
.page-id-66 .sb66-hero-char {
  position: relative;
  height: 100%;
  min-height: 300px;
  overflow: hidden;
}
.page-id-66 .sb66-hero-char img {
  position: absolute;
  left: 50%;
  bottom: -8%;
  transform: translateX(-50%);
  width: auto;
  height: 118%;
  max-width: none;
  object-fit: contain;
}
@media screen and (max-width: 782px) {
  .page-id-66 .sb66-hero-char {
    min-height: 220px;
  }
  .page-id-66 .sb66-hero-char img {
    height: 105%;
    bottom: -5%;
  }
}
@media screen and (max-width: 480px) {
  .page-id-66 .sb66-hero-char {
    min-height: 180px;
  }
  .page-id-66 .sb66-hero-char img {
    height: 96%;
  }
}

/*
  固定ページID66限定・2026-09-11 レイアウト全面調整。
  【背景】
  「中央に細いブログ記事が続く」印象を解消するため、以下3点を実施:
  1) functions.php側でPage66のみ`swell_is_show_sidebar`フィルターを
     falseに固定(他ページのサイドバー設定には一切影響しない)。これにより
     SWELL標準の本文コンテナ幅が記事用の900pxから通常コンテナの1200pxへ拡張される。
  2) 背景3バンド(office/garage/command)をalignwide(サイドバーオン時基準の
     やや狭い拡張)からalignfullへ変更し、画面幅いっぱいに広げたうえで
     内側にmin-heightのある大型セクションとして「場所」感を強調する。
  3) 220社カード・40社カード・ジャンルカードを、これまでの縦積みリスト
     (wp:paragraphを1件ずつ縦に並べる形)から、CSS Gridによる複数列カード
     グリッドに変更する(PC3〜4列/タブレット2列/スマホ1列)。データ・リンク・
     件数は一切変更していない。
  他ページのwp-block-group、他ページのカード表示には一切影響しない
  (.page-id-66限定のクラスのみに適用)。
*/

/* alignfullの背景バンドは角丸なし、内側コンテンツのみ1200px中央寄せにする */
.page-id-66 .sb66-band.alignfull {
  border-radius: 0;
}
.page-id-66 .sb66-band__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 600px) {
  .page-id-66 .sb66-band__inner {
    padding: 0 16px;
  }
}

/* 背景バンドを「場所」として感じさせるための最低高さ */
.page-id-66 .sb66-band--office {
  min-height: 560px;
  display: flex;
  align-items: center;
}
.page-id-66 .sb66-band--garage {
  min-height: 480px;
  display: flex;
  align-items: center;
}
.page-id-66 .sb66-band--command {
  min-height: 420px;
  display: flex;
  align-items: center;
}
.page-id-66 .sb66-band--office > .sb66-band__inner,
.page-id-66 .sb66-band--garage > .sb66-band__inner,
.page-id-66 .sb66-band--command > .sb66-band__inner {
  width: 100%;
  padding-top: 40px;
  padding-bottom: 40px;
}
@media screen and (max-width: 782px) {
  .page-id-66 .sb66-band--office { min-height: 460px; }
  .page-id-66 .sb66-band--garage { min-height: 0; }
  .page-id-66 .sb66-band--command { min-height: 0; }
}

/* ヒーローの隊長をより大胆に(PC) */
@media screen and (min-width: 783px) {
  .page-id-66 .sb66-hero-char {
    min-height: 460px;
  }
  .page-id-66 .sb66-hero-char img {
    height: 145%;
    bottom: -10%;
  }
}

/* 220社企業図鑑・重点分析40社: カードグリッド。
   2026-09-11修正: PCは4列を優先(reference準拠)、タブレット2列、スマホ1列。 */
.page-id-66 .sb66-cardgrid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 20px 0;
}
@media screen and (min-width: 561px) {
  .page-id-66 .sb66-cardgrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (min-width: 901px) {
  .page-id-66 .sb66-cardgrid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }
}
.page-id-66 .sb66-card {
  background: #fff;
  border: 1px solid #e3e8ee;
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 14px;
}
.page-id-66 .sb66-card--top10 {
  border-left: 3px solid #D62828;
}
.page-id-66 .sb66-card--focus40 {
  border-left: 3px solid #FFC107;
}
.page-id-66 .sb66-card__name {
  color: #0D182A;
  font-weight: 700;
  display: block;
  margin-bottom: 4px;
}
.page-id-66 .sb66-card__desc {
  color: #45566b;
  font-size: 13px;
  display: block;
}
.page-id-66 .sb66-card__link {
  display: inline-block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
}
.page-id-66 .sb66-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}
.page-id-66 .sb66-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.page-id-66 .sb66-badge--top10 {
  background-color: #D62828;
  color: #fff;
}
.page-id-66 .sb66-badge--focus40 {
  background-color: #FFC107;
  color: #0D182A;
}

.page-id-66 .sb66-card--dark {
  background: rgba(255, 255, 255, 0.96);
}

/* ジャンルから探すカードグリッド */
.page-id-66 .sb66-genregrid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  margin-top: 16px;
}
@media screen and (max-width: 1023px) {
  .page-id-66 .sb66-genregrid {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (max-width: 560px) {
  .page-id-66 .sb66-genregrid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.page-id-66 .sb66-genrecard {
  display: block;
  background-color: #fff;
  border: 1px solid #e3e8ee;
  border-radius: 10px;
  padding: 18px 8px;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.page-id-66 .sb66-genrecard__icon {
  font-size: 28px;
  display: block;
  margin-bottom: 6px;
  line-height: 1;
}
.page-id-66 .sb66-genrecard__label {
  font-size: 13px;
  color: #0D182A;
  font-weight: 700;
  display: block;
}
.page-id-66 .sb66-genrecard__count {
  font-size: 11px;
  color: #5a6b7d;
}

/*
  2026-09-11 修正: 数字で見る企業発掘プロセスを、referenceに合わせて
  「白い浮遊カードの中に、水色の円アイコン+矢印でつながる横並びステップ」
  のトーンへ変更(濃紺の重い箱から変更)。
*/
.page-id-66 .sb66-flow-panel {
  background: #fff;
  border-radius: 16px;
  padding: 28px 24px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}
.page-id-66 .sb66-flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  align-items: start;
}
@media screen and (max-width: 900px) {
  .page-id-66 .sb66-flow {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 8px;
  }
  .page-id-66 .sb66-flow-panel {
    padding: 20px 16px;
  }
}
.page-id-66 .sb66-flow__step {
  text-align: center;
  padding: 4px 6px;
}
.page-id-66 .sb66-flow__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #e9f3fb;
  color: #0D182A;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px;
  font-size: 24px;
}
.page-id-66 .sb66-flow__label {
  font-size: 13px;
  font-weight: 700;
  color: #0D182A;
  line-height: 1.4;
}
.page-id-66 .sb66-flow__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c3cbd4;
  font-size: 22px;
  padding-top: 16px;
}
@media screen and (max-width: 900px) {
  .page-id-66 .sb66-flow__arrow {
    display: none;
  }
}

/*
  220社/40社の全件展開: ネイティブdetails/summaryのみで実装(JS不要、
  SEO上は初期HTMLに全データが存在したまま)。
  開閉の文言は、summary内に「閉じている時」「開いている時」の2つの
  テキストをそれぞれHTMLとして用意し、details[open]の有無に応じて
  CSSでdisplay切り替えする方式(content疑似要素への文言依存を避ける)。
*/
.page-id-66 .sb66-expand {
  margin: 28px 0;
  text-align: center;
}
.page-id-66 .sb66-expand > summary {
  cursor: pointer;
  list-style: none;
  display: inline-block;
  padding: 14px 36px;
  background: #FFC107;
  color: #0D182A;
  border-radius: 30px;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
.page-id-66 .sb66-expand > summary::-webkit-details-marker {
  display: none;
}
.page-id-66 .sb66-expand > summary::marker {
  content: "";
}
.page-id-66 .sb66-expand__open-text {
  display: none;
}
.page-id-66 .sb66-expand[open] .sb66-expand__closed-text {
  display: none;
}
.page-id-66 .sb66-expand[open] .sb66-expand__open-text {
  display: inline;
}
.page-id-66 .sb66-expand__body {
  margin-top: 28px;
  text-align: left;
}
.page-id-66 .sb66-genre-heading {
  font-size: 18px;
  font-weight: 700;
  color: #0D182A;
  border-left: 4px solid #FFC107;
  padding-left: 10px;
  margin: 32px 0 4px;
}
.page-id-66 .sb66-genre-heading:first-child {
  margin-top: 0;
}

/* TOP10 CTAのトロフィーアイコン */
.page-id-66 .sb66-trophy {
  font-size: 40px;
  line-height: 1;
}

/* ヒーロー+プロセス+ジャンルの統合メガセクション(ガレージ背景)は
   コンテンツ量が可変のためmin-heightを固定せず、内側パディングで
   「場所」としての余白を確保する。 */
.page-id-66 .sb66-band--mega {
  min-height: 0;
}
.page-id-66 .sb66-band--mega > .sb66-band__inner {
  padding-top: 48px;
  padding-bottom: 56px;
}
@media screen and (max-width: 782px) {
  .page-id-66 .sb66-band--mega > .sb66-band__inner {
    padding-top: 32px;
    padding-bottom: 32px;
  }
}

/*
  2026-09-11 v6修正: 幅問題の根本対応。
  【原因】
  functions.php側でswell_is_show_sidebarをfalseにしてもSWELL側の本文コンテナは
  <main class="l-mainContent l-article">のままで、実際に効いているのは
  .l-article{max-width:var(--article_size)}であり、--article_sizeはサイドバー
  表示/非表示に関わらず常に900px固定だった(--container_size:1200pxは
  アーカイブ等の.l-container用で、単一ページのl-articleには使われない)。
  そのため、alignfullで背景ごと画面幅いっぱいに広げたヒーロー等のバンド内部
  (.sb66-band__inner max-width:1240pxで自前に幅を確保)は正しく広く表示されて
  いたが、alignwideのみのバンド(40社セクション・TOP10 CTA)や、どのバンドにも
  属さない220社企業図鑑セクション(見出し・代表4社カード・全220社の展開リスト)は
  alignwide{width:100%}の「100%」の基準そのものが900pxしかなく、狭いままだった。
  【対応】
  --article_sizeはmain.css内で.l-articleとwp-block-group__inner-containerの
  幅計算にのみ使用されており(フォントサイズ等の他用途では未使用)、Page66限定で
  値を1200pxへ上書きしても副作用がないことを本番CSSを直接確認して検証済み。
  CSSカスタムプロパティの上書きのみで、body/SWELL全体への!important等は
  一切使用していない(body.page-id-66限定のスコープのみ)。他ページの
  --article_sizeやレイアウトには一切影響しない。
*/
body.page-id-66 {
  --article_size: 1200px;
}

/*
  2026-09-11 v6修正: ヒーロー隊長をより大胆に(PC)。
  画像ファイル自体は無加工。object-fit:containのまま拡大率とbottom位置を
  さらに強めることで、下半身がsb66-hero-charのoverflow:hiddenで自然に
  クロップされ、肩から上のシルエットがより大きく前に出る構図にする
  (縦横比は維持したまま拡大しているだけで、変形・再生成は行っていない)。
  他ページには一切影響しない。
*/
@media screen and (min-width: 783px) {
  .page-id-66 .sb66-hero-char {
    min-height: 540px;
  }
  .page-id-66 .sb66-hero-char img {
    height: 195%;
    bottom: -28%;
  }
}

/*
  2026-09-11 v6修正: ジャンル12カードをreferenceに近い密度へ(PC/タブレット共通)。
  列数(PC6列/タブレット3列/スマホ2列)は変更せず、パディングとアイコンのみ拡大。
*/
.page-id-66 .sb66-genrecard {
  padding: 22px 12px;
}
.page-id-66 .sb66-genrecard__icon {
  font-size: 36px;
}

/*
  2026-09-11 v6修正: 「さらに詳しく確認した40社」セクションを、referenceの
  明るい水色CTA帯へ変更。sb66-band--commandクラスはPage66内でこの40社
  セクションのみに使用されているため、暗い指令室風の背景写真・暗いオーバーレイを
  このクラスに限って明るい水色グラデーションへ置き換えても他箇所への影響はない。
  本文テキストの色(白文字)は読みやすさのためpost_content側のインライン
  スタイルを直接#0D182A系へ変更済み(このCSSファイルとあわせて対応)。
*/
.page-id-66 .sb66-band--command {
  background-image: none;
  background: linear-gradient(135deg, #eaf7ff 0%, #bfe8fb 100%);
  color: #0D182A;
}
.page-id-66 .sb66-band--command::before {
  background: none;
}

/*
  2026-09-11 v7修正(polish-guide準拠): ヒーロー隊長のクロップ位置を修正。
  【問題】v6で拡大率(height:195%)とbottom:-28%を強めすぎた結果、下端基準の
  位置合わせでは頭部がsb66-hero-charのoverflow:hiddenで上に切れてしまい、
  胴体〜脚だけが大きく表示される状態になっていた。
  【対応】位置の基準をbottom(下端合わせ)からtop(上端合わせ)に変更し、
  画像の上端をコンテナ上端に固定(top:0)することで、頭部(ヘルメット)が
  必ず枠内に収まるようにした。拡大率(height)はやや控えめの180%に調整し、
  はみ出す下端(脚)側だけがoverflow:hiddenで自然にクロップされる構図にした。
  画像ファイル自体は無加工、object-fit:containのまま拡大率と基準位置のみ変更。
  他ページには一切影響しない。
*/
@media screen and (min-width: 783px) {
  .page-id-66 .sb66-hero-char {
    min-height: 560px;
  }
  .page-id-66 .sb66-hero-char img {
    top: 0;
    bottom: auto;
    height: 180%;
  }
}

/*
  2026-09-11 v7修正(polish-guide②準拠): 5ステップパネルの情報密度を強化。
  STEP1〜5の番号ラベルをpost_content側に追加した(HTML構造の追加のみ、
  企業データ・リンクには一切触れていない)のに合わせて、アイコン・文字・
  余白を全体的に一段階大きくし、「5段階の企業発掘プロセス」であることが
  一目で分かるようにした。
*/
.page-id-66 .sb66-flow-panel {
  padding: 32px 28px;
}
.page-id-66 .sb66-flow {
  gap: 10px;
}
.page-id-66 .sb66-flow__step {
  padding: 10px 8px;
}
.page-id-66 .sb66-flow__num {
  display: inline-block;
  background: #0D182A;
  color: #FFC107;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 3px 12px;
  border-radius: 10px;
  margin-bottom: 10px;
}
.page-id-66 .sb66-flow__icon {
  width: 76px;
  height: 76px;
  font-size: 34px;
  margin: 0 auto 12px;
}
.page-id-66 .sb66-flow__label {
  font-size: 15px;
}
.page-id-66 .sb66-flow__arrow {
  font-size: 26px;
}
@media screen and (max-width: 900px) {
  .page-id-66 .sb66-flow__icon {
    width: 56px;
    height: 56px;
    font-size: 24px;
  }
}

/*
  2026-09-11 v7修正(polish-guide③⑤⑦⑧準拠): フロー下/ジャンル下/40社/
  TOP10の4箇所で使っている隊長バルーン挿絵(captain-05-thinking,
  captain-01-guide, captain-03-check, captain-08-good、いずれも
  wp:image標準ブロック・size-medium)を、「小さな全身画像」から
  「顔がしっかり見える上半身中心」の見せ方に変更する。
  対象は.page-id-66内のfigure.wp-block-image.size-mediumのみで、
  該当4箇所以外にはこのクラスの組み合わせは存在しないことをpost_content
  全文から確認済み(他ページのwp:image、他ページのsize-mediumには
  一切影響しない)。
  画像ファイル自体は無加工。object-fit:coverは縦横比を保ったまま
  はみ出す部分をクロップする表示方法であり、変形・引き伸ばしではない
  (禁止されている「縦横比を崩す」「横に太らせる」には該当しない)。
  object-position:top寄りにすることで、コンテナ形状に関わらず
  顔・ヘルメットが常に枠内上部に収まるようにしている。
  あわせてpost_content側でこれら4箇所の画像カラム幅を
  18〜22%から28〜32%へ広げ(テキスト側カラムはその分縮小)、
  キャラクターがより大きく見えるようにした。
*/
.page-id-66 figure.wp-block-image.size-medium {
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  aspect-ratio: 4 / 5;
}
.page-id-66 figure.wp-block-image.size-medium img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 8%;
}

/*
  2026-09-11 v7修正(polish-guide④準拠): ジャンル12カードをさらに一段大きく。
  列数(PC6列/タブレット3列/スマホ2列)はv6から変更しない。
*/
.page-id-66 .sb66-genregrid {
  gap: 16px;
}
.page-id-66 .sb66-genrecard {
  padding: 26px 14px;
}
.page-id-66 .sb66-genrecard__icon {
  font-size: 42px;
}
.page-id-66 .sb66-genrecard__label {
  font-size: 14px;
}
.page-id-66 .sb66-genrecard__count {
  font-size: 12px;
}

/*
  2026-09-11 v7修正(polish-guide⑥準拠): 220社代表カードの微調整のみ
  (大改造はしない方針)。列数(PC4列)・データ・リンクは変更なし。
*/
.page-id-66 .sb66-cardgrid {
  gap: 18px;
}
.page-id-66 .sb66-card {
  padding: 18px 20px;
}
.page-id-66 .sb66-card__desc {
  font-size: 14px;
}

/*
  2026-09-11 v8修正(page66-v8-image-fix-guide準拠その1): 5STEPがPCでも
  2段に折り返っていた問題への対応。
  【原因】v6由来の`@media (max-width:900px){grid-template-columns:repeat(2,1fr)}`
  が、900px未満の一般的なノートPC幅・縮小ブラウザ幅でも発動し、5列を維持
  できていなかった(実画面はこの状態だった)。
  【対応】681〜900pxの範囲を引き続き「PC相当」として5列・矢印表示を維持する
  ルールを追加。900px以下という元のルール自体は変更せず、480px以下の
  スマホ相当にだけ確実に効くよう、481〜680pxのタブレット2列／480px以下の
  スマホ1列という3段階に再整理した。他ページには影響しない。
*/
@media screen and (min-width: 681px) and (max-width: 900px) {
  .page-id-66 .sb66-flow {
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
  }
  .page-id-66 .sb66-flow__arrow {
    display: flex;
  }
  .page-id-66 .sb66-flow__icon {
    width: 56px;
    height: 56px;
    font-size: 22px;
  }
  .page-id-66 .sb66-flow__label {
    font-size: 12px;
  }
}
@media screen and (max-width: 480px) {
  .page-id-66 .sb66-flow {
    grid-template-columns: 1fr;
  }
}

/*
  2026-09-11 v8修正(page66-v8-image-fix-guide準拠その2): ヒーロー隊長の
  透過不良への対応。
  【調査結果】現在ヒーローで使用しているcaptain-02-point.png(全身)を
  ローカルのマスターファイル自体で目視確認したところ、右脇(時計の少し上、
  腕と胴の間)に実際に透過されていない格子柄の領域が存在することを確認した。
  これはCSSやobject-fitの問題ではなく、画像ファイル自体の透過処理漏れが
  原因である。
  【対応方針】CLAUDE.mdの「公式PNGを破壊的に加工しない」原則に従い、
  captain-02-point.pngへの直接修正は行わなかった。character-assets-map-v1.md
  ・captain-official-library-v1.mdを確認し、透過が正常でヒーローの用途
  (指差し・注目)にも意味的に合致する既存公式素材captain-talk-point-right-v1.png
  (横向き会話素材Ver.1、上半身構図)を目視確認のうえ採用し、差し替えることで
  解決した(透過不良を隠すための不自然な位置調整は行っていない)。
  画像自体は無加工、透過の空白部分を自動トリミングしたうえで長辺900pxへ
  等倍縮小しただけ(character-assets-map-v1.md記載のルールの範囲内)。
  旧.sb66-hero-charのルールは今後の別用途のために削除せず残し、新規に
  .sb66-hero-char-v8を追加した(無理なクロップを行わず、素材本来の上半身
  構図をそのままcontain表示する)。
*/
.page-id-66 .sb66-hero-char-v8 {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
  min-height: 320px;
}
.page-id-66 .sb66-hero-char-v8 img {
  width: 100%;
  height: auto;
  max-width: 480px;
  object-fit: contain;
}
@media screen and (min-width: 783px) {
  .page-id-66 .sb66-hero-char-v8 {
    min-height: 440px;
  }
  .page-id-66 .sb66-hero-char-v8 img {
    max-width: 600px;
  }
}
@media screen and (max-width: 480px) {
  .page-id-66 .sb66-hero-char-v8 img {
    max-width: 300px;
  }
}

/*
  2026-09-11 v8修正(page66-v8-image-fix-guide準拠その3): 「大きい隊長＋丸型
  隊長アイコン＋吹き出し」の三重表示を解消。
  対象はフロー下・ジャンル下・TOP10 CTAの3箇所。post_content側で
  wp:loos/balloonのballoonIcon(丸型アイコン、隊長入口.png)を削除し、
  各箇所の隊長画像自体を、character-assets-map-v1.mdの分析に基づき
  最初から上半身構図の公式会話用素材(captain-talk-think/explain/good-
  right-v1)へ差し替えた。これにより「大きい隊長＋吹き出し」のみのシンプルな
  構成になる。全身ポーズをCSSでクロップする方式(v6/v7)はここでは使用しない。
  40社セクションの隊長(captain-03-check、全身)のみ、talk系列に完全一致する
  ポーズが存在しないため据え置き、v7のfigure.wp-block-image.size-medium
  クロップ設定をそのまま使用する(このセレクタに一致する画像は本セクションのみ
  になった)。
*/
.page-id-66 .sb66-talk-portrait {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-id-66 .sb66-talk-portrait img {
  width: 100%;
  height: auto;
  max-width: 300px;
  object-fit: contain;
}
.page-id-66 .sb66-talk-portrait--lg img {
  max-width: 380px;
}
@media screen and (max-width: 782px) {
  .page-id-66 .sb66-talk-portrait img {
    max-width: 220px;
  }
}

/*
  2026-09-11 v9修正(実画面ベース): 5STEPが実際のPC画面で「STEP1-2-3」
  「STEP4-5」の2段になっていた真因を特定した。
  .sb66-flowの実際の子要素は、STEP(5個)と矢印(4個)を交互に並べた
  合計9個のdiv/spanであり(post_content参照)、v6〜v8で指定していた
  grid-template-columns:repeat(5,1fr)は5トラックしか作らないため、
  6個目以降(矢印3個目以降)が暗黙的に2行目へ送られていた
  (1行目=STEP1,矢印,STEP2,矢印,STEP3の5個/2行目=矢印,STEP4,矢印,STEP5の4個)。
  v8で追加した「681-900pxをPC相当として5列を維持する」ブレークポイントは、
  実際にはこの真因(トラック数不足)を解決するものではなく、同じ
  repeat(5,1fr)を使っていたため実画面では改善しなかった(v8時点の誤診断)。
  なお、矢印は max-width:900px で display:none になり以降グリッドの
  レイアウト計算から完全に除外されるため、900px以下のrepeat(2,1fr)
  フォールバック(v6)自体はもともと正しく機能していた。
  対応：矢印が可視になる範囲(900px超、および681-900pxのPC相当範囲)の
  grid-template-columnsを、STEP用の5トラック(1fr)と矢印用の4トラック(auto)を
  交互に明示した合計9トラック指定へ修正した。他ページには影響しない。
*/
.page-id-66 .sb66-flow {
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
}
@media screen and (min-width: 681px) and (max-width: 900px) {
  .page-id-66 .sb66-flow {
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr auto 1fr;
  }
}

/*
  2026-09-11 v15修正: 5STEP下の「隊長+吹き出し」削除(v14)後、白パネル下部に
  なお大きな余白が残っている件を再調査した。
  【調査結果】.sb66-flow-panel/.sb66-flow/.sb66-flow__*関連の全CSS(v6〜v14、
  計30箇所)を洗い出したが、height/min-heightを明示指定している箇所は
  見つからなかった。post_content側にも空のwp-block-column・空段落・
  余分な<br>等の残存は確認できなかった(v14の削除は隊長figure+balloon
  ブロックのみをきれいに除去できている)。padding-bottomの最終値も
  v9→v11の上書きの結果20pxまで詰まっており、この値自体は既に大きくない。
  以上より、CSS側に単一の「大きな余白の原因」となる特定のルールは
  発見できなかった(この調査結果を正直に報告する)。
  【対応】v9・v11で断片化していたpadding-bottom指定(24px→20pxの
  2段階上書き)を1つに整理し、ユーザー指示どおりheight:auto/min-height:0を
  明示することで、今後何らかの理由で暗黙のheightが付与された場合の
  安全策とした。padding-bottomは目標(30〜50px)の範囲内である32px
  (パネル上部のpadding-topと同じ値)に統一し、上下対称の自然な余白とした。
  段落マージンの!important上書きはそのまま維持。
*/
.page-id-66 .sb66-flow-panel {
  height: auto;
  min-height: 0;
  padding-bottom: 32px;
}
.page-id-66 .sb66-flow-panel p {
  margin-top: 8px;
  margin-bottom: 8px;
}
.page-id-66 .sb66-flow-panel > p {
  margin: 4px 0 !important;
}
.page-id-66 .sb66-flow-panel .sb66-flow {
  height: auto;
  min-height: 0;
  margin-bottom: 0;
}

/*
  2026-09-11 v11修正(page66-v10-spacing-final-guide準拠): 40社セクションを
  「隊長(左)＋吹き出し・説明文・CTA(右)」の2カラム情報ブロックへ再構成した
  (post_content側)のに合わせたスタイル調整。
  高解像度版captain-03-check-web-v2(346x800、縦長)をそのまま表示すると
  非常に縦長になり、水色BOXの高さがコンテンツ量に対して不自然に伸びてしまう
  ため、この40社セクション内に限り、v7で設定した汎用クロップ
  (aspect-ratio:4/5 + object-fit:cover)を解除し、max-height基準の
  自然なcontain表示に変更した(トリミング・変形は行わず、表示サイズの
  上限を設定しているだけ)。詳細展開ボタン(sb66-expand)もテキスト列に
  馴染むよう左寄せに変更(220社側の中央寄せには影響しない、
  .sb66-band--command限定のスコープ)。
*/
.page-id-66 .sb66-band--command {
  min-height: 0;
}
.page-id-66 .sb66-band--command figure.wp-block-image.size-medium {
  aspect-ratio: auto;
  overflow: visible;
  border-radius: 0;
  margin: 0;
}
.page-id-66 .sb66-band--command figure.wp-block-image.size-medium img {
  width: auto;
  height: auto;
  max-width: 260px;
  max-height: 420px;
  object-fit: contain;
  object-position: center;
}
.page-id-66 .sb66-band--command .sb66-expand {
  margin: 16px 0 0;
  text-align: left;
}
@media screen and (max-width: 782px) {
  .page-id-66 .sb66-band--command figure.wp-block-image.size-medium img {
    max-width: 200px;
    max-height: 320px;
    margin: 0 auto;
  }
  .page-id-66 .sb66-band--command .sb66-expand {
    text-align: center;
  }
}

/*
  2026-09-11 v14修正: 5STEP下にあった「隊長+吹き出し」の行をpost_content
  側からHTMLごと削除した(見出し・5STEP本体・矢印・STEP番号・アイコンは
  無変更、直下の説明段落も維持)。これに伴い、v12(この行のalign-items調整)
  ・v13(隊長画像の表示サイズ調整)で追加していたCSSは対象要素が
  存在しなくなったため削除した(ジャンル下・TOP10で共用している
  sb66-talk-portraitの基本ルールには影響しない)。
*/

/* ============================================================
   2026-09-11 Page 66 スマホ版レイアウト最適化(mobile-v1)
   【調査結果】WordPressコア自身が全wp:columnsブロックに対し、
   インラインの<style id="wp-block-columns-inline-css">経由で
   @media(min-width:782px){flex-wrap:nowrap!important}
   @media(max-width:781px){...>.wp-block-column{flex-basis:100%!important}}
   を提供していることを確認した。これにより、ヒーロー・ジャンル下・
   40社・TOP10の各2カラムは、実は781px以下で既に自動的に縦積みに
   なっている(「PC版を縮小しただけ」という見た目の主因は、横並びの
   ままであることではなく、縦積み後の①隊長画像サイズが小さいまま
   ②5STEPが専用grid(wp:columnsではない)のため自動縦積みの対象外
   ③40社/TOP10で「隊長→テキスト」の順のまま表示され、案内文より
   先にキャラクターが来てしまう、の3点であると特定した)。
   このブロックはすべて.page-id-66限定・max-widthメディアクエリ限定
   であり、783px以上のPC表示・他ページには一切影響しない。
   HTML側の変更は、TOP10 CTAの外枠に"sb66-top10-cta"クラスを1つ
   追加しただけ(見た目・構造・データは無変更、CSSでの並び替えの
   スコープ用)。
   ============================================================ */

/* ヒーロー：隊長をスマホでもう一段大きく(アスペクト比維持、拡大率と
   位置のみ調整。画像ファイル自体は無加工)。 */
@media screen and (max-width: 600px) {
  .page-id-66 .sb66-hero-char {
    min-height: 260px;
  }
  .page-id-66 .sb66-hero-char img {
    height: 118%;
    bottom: -6%;
  }
}

/* 5STEP：600px以下ではPCの5列/タブレットの2列グリッドをやめ、縦1列の
   「流れ」に変更する。矢印は削除せず90度回転させて縦方向の矢印として
   再利用する(アイコン・STEP番号・工程名・explanationは無変更)。
   PC(783px以上)・タブレット(601〜900px)の挙動は一切変更しない。 */
@media screen and (max-width: 600px) {
  .page-id-66 .sb66-flow {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .page-id-66 .sb66-flow__step {
    padding: 16px 12px;
  }
  .page-id-66 .sb66-flow__arrow {
    display: flex !important;
    transform: rotate(90deg);
    font-size: 22px;
    padding: 6px 0;
  }
  .page-id-66 .sb66-flow-panel {
    padding: 24px 20px;
  }
}

/* ジャンル12カード：2列構造(既存の max-width:560px ルール)は維持し、
   より狭い画面(400px以下)だけpadding/アイコン/文字をわずかに詰めて
   窮屈さを軽減する。列数は変更しない。 */
@media screen and (max-width: 400px) {
  .page-id-66 .sb66-genrecard {
    padding: 18px 8px;
  }
  .page-id-66 .sb66-genrecard__icon {
    font-size: 32px;
  }
  .page-id-66 .sb66-genrecard__label {
    font-size: 12px;
  }
}

/* 220社/40社カード：既に1列(.sb66-cardgrid、max-width:560pxで確定済み)。
   スマホでの可読性のため、カード内側のpaddingのみ少し広げる。 */
@media screen and (max-width: 600px) {
  .page-id-66 .sb66-card {
    padding: 16px 16px;
  }
}

/* 40社セクション：スマホでは「見出し＋説明＋CTA」を先に、隊長を最後に
   表示する。HTMLの並び順(隊長カラムが先)は変更せず、flexのorderのみで
   表示順を入れ替える(データ・リンク・detailsには一切影響しない)。
   隊長のサイズは通常のtalk-portrait/40社共通クロップより少し大きくし、
   CTAのアクセントとして存在感を持たせる。 */
@media screen and (max-width: 782px) {
  .page-id-66 .sb66-band--command .wp-block-columns > .wp-block-column:first-child {
    order: 2;
  }
  .page-id-66 .sb66-band--command .wp-block-columns > .wp-block-column:last-child {
    order: 1;
  }
  .page-id-66 .sb66-band--command figure.wp-block-image.size-medium img {
    max-width: 220px;
    max-height: 300px;
    margin: 16px auto 0;
  }
}

/* TOP10 CTA：スマホでは「トロフィー＋見出し＋説明＋CTAボタン」を先に、
   隊長を下部に表示する。HTMLの並び順(隊長カラムが先)は変更せず、
   flexのorderのみで入れ替える(スコープ用に付与したsb66-top10-cta
   クラスを使用。ゴールド背景・ボタン・文言・PC表示は無変更)。 */
@media screen and (max-width: 782px) {
  .page-id-66 .sb66-top10-cta .wp-block-columns > .wp-block-column:first-child {
    order: 2;
  }
  .page-id-66 .sb66-top10-cta .wp-block-columns > .wp-block-column:last-child {
    order: 1;
  }
  .page-id-66 .sb66-top10-cta .sb66-talk-portrait img {
    max-width: 240px;
    margin: 16px auto 0;
  }
}

/* 下部ナビ(気になった企業を、さらに詳しく見る の2ボタン)：
   WordPressコア自身が提供する.wp-block-columns{gap:1.5em!important}が
   縦積み時のrow-gapとしてもそのまま機能し、既に十分なボタン間隔
   (約24px相当)が確保されていることを確認した。追加のCSSは不要と判断し、
   ここでは変更しない。 */

/* ============================================================
   2026-09-11 トップページ(Page ID 10)再構成 Phase 2-A
   基盤・横幅・動画保護
   すべて body.page-id-10 限定でスコープしており、Page66/50/67、
   learn/chart/protect-assets、投稿ページ等の他ページには一切影響しない。
   動画メインビジュアル(#main_visual以下、.p-mainVisual__video等)は
   post_content領域の外側でテーマが出力しているため、このCSSブロックは
   一切触れていない(セレクタも意図的にpost_content以下のみを対象とする)。
   ============================================================ */

/*
  【調査結果】HOMEは-sidebar-offが既に付与されているが、メインエリアは
  Page66と同じ<main class="l-mainContent l-article">のままであり、
  実際に効いているのは.l-article{max-width:var(--article_size)}。
  --article_sizeはサイドバー有無に関わらず常に900px固定(カスタマイザーの
  全体設定)であり、HOME本文もこの900pxに閉じ込められていた。
  Page66と同様、--article_sizeは.l-articleと
  .wp-block-group__inner-container の幅計算にのみ使用され、他の用途
  (フォントサイズ等)には使われていないことを確認済みのため、
  Page66と同じ手法(CSSカスタムプロパティの上書きのみ、functions.php
  変更なし)でHOME限定に1200pxへ拡張する。他ページの--article_sizeには
  一切影響しない。
*/
body.page-id-10 {
  --article_size: 1200px;
}

/*
  HOME専用のfull-width背景セクション基盤(v2デザイン実装用の土台)。
  Page66の.sb66-band/.sb66-band__innerと同じ「画面いっぱいの背景＋
  中央max-width固定のコンテンツ」という考え方をHOME用に用意する。
  今回はクラスの受け皿のみを準備し、実際にこのクラスを使う新セクションは
  Phase 2-B以降で追加する(現時点のpost_contentにはまだ使用箇所なし)。
*/
.page-id-10 .home-defense-band {
  position: relative;
  width: 100%;
}
.page-id-10 .home-defense-band__inner {
  /* 2026-09-11 Phase 2-C: 今後のHOME主要セクション共通の
     内側コンテンツ幅の基準として1200pxへ統一(旧1240pxから調整) */
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 600px) {
  .page-id-10 .home-defense-band__inner {
    padding: 0 16px;
  }
}

/*
  HOME専用の共通カード基盤(v2デザインの各種カード群で今後共通利用する
  土台のみ)。既存のSWELL標準カード(.wp-block-column等)を上書きするもの
  ではなく、新規に追加するカードへ適用する新しいクラスとして用意する。
  具体的な配色・レイアウトは各セクション実装時(Phase 2-B以降)に追記する。
*/
.page-id-10 .home-card {
  box-sizing: border-box;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
.page-id-10 .home-card img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.page-id-10 .home-card-grid {
  display: grid;
  gap: 20px;
}
@media screen and (max-width: 600px) {
  .page-id-10 .home-card-grid {
    gap: 14px;
  }
}

/* ============================================================
   2026-09-11 トップページ(Page ID 10)再構成 Phase 2-B
   動画メインビジュアル直下｜企業発掘プロセス
   ============================================================ */
.page-id-10 .home-process {
  background: linear-gradient(180deg, #f4f7fb 0%, #eef3f9 100%);
  padding: 64px 0 72px;
}
.page-id-10 .home-process__heading {
  text-align: center;
  margin: 0 0 14px;
}
.page-id-10 .home-process__lead {
  color: #33404f;
  font-size: 15px;
  line-height: 1.8;
  text-align: center;
  max-width: 820px;
  margin: 0 auto 40px;
}
.page-id-10 .home-process__flow {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 16px;
  margin: 0 auto 44px;
}
.page-id-10 .home-process__step {
  flex: 1 1 0;
  min-width: 0;
  background: #e7f1fc;
  border-radius: 16px;
  padding: 30px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 4px 14px rgba(13, 24, 42, 0.06);
}
.page-id-10 .home-process__stepnum {
  font-size: 12px;
  font-weight: 700;
  color: #4a7fc4;
  letter-spacing: 0.05em;
}
.page-id-10 .home-process__icon {
  font-size: 34px;
  line-height: 1;
}
.page-id-10 .home-process__value {
  font-size: 21px;
  font-weight: 800;
  color: #0D182A;
  line-height: 1.25;
}
.page-id-10 .home-process__label {
  font-size: 13px;
  font-weight: 600;
  color: #4d5b6b;
  line-height: 1.4;
}
.page-id-10 .home-process__arrow {
  flex: 0 0 auto;
  align-self: center;
  font-size: 28px;
  color: #b9c9de;
  padding: 0 2px;
  line-height: 1;
}
.page-id-10 .home-process__caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  max-width: 720px;
  margin: 0 auto 40px;
}
.page-id-10 .home-process__caption-img {
  width: 140px;
  height: auto;
  flex: 0 0 auto;
  display: block;
}
.page-id-10 .home-process__caption-text {
  background: #fff;
  border-radius: 16px;
  padding: 16px 22px;
  font-size: 15px;
  color: #0D182A;
  line-height: 1.6;
  margin: 0;
  box-shadow: 0 2px 8px rgba(13, 24, 42, 0.08);
}
.page-id-10 .home-process__cta {
  text-align: center;
  margin: 0;
}
.page-id-10 .home-process__cta-link {
  display: inline-block;
  padding: 14px 40px;
  background-color: #0D182A;
  color: #fff;
  border-radius: 28px;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(13, 24, 42, 0.18);
}
.page-id-10 .home-process__cta-link:hover {
  background-color: #1a2c47;
}
@media screen and (max-width: 782px) {
  .page-id-10 .home-process {
    padding: 36px 0 40px;
  }
  .page-id-10 .home-process__heading {
    padding: 0 16px;
    font-size: 21px;
  }
  .page-id-10 .home-process__lead {
    padding: 0 16px;
    font-size: 14px;
    margin-bottom: 24px;
  }
  .page-id-10 .home-process__flow {
    flex-direction: column;
    align-items: stretch;
    padding: 0 16px;
    gap: 0;
    margin-bottom: 24px;
  }
  .page-id-10 .home-process__step {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 14px;
    row-gap: 2px;
    text-align: left;
    padding: 16px 16px;
  }
  .page-id-10 .home-process__stepnum {
    display: none;
  }
  .page-id-10 .home-process__icon {
    grid-column: 1;
    grid-row: 1 / 3;
    font-size: 30px;
  }
  .page-id-10 .home-process__value {
    grid-column: 2;
    grid-row: 1;
    font-size: 17px;
  }
  .page-id-10 .home-process__label {
    grid-column: 2;
    grid-row: 2;
    font-size: 13px;
  }
  .page-id-10 .home-process__arrow {
    transform: rotate(90deg);
    padding: 2px 0;
    font-size: 20px;
  }
  .page-id-10 .home-process__caption {
    flex-direction: column;
    padding: 0 16px;
    gap: 10px;
  }
  .page-id-10 .home-process__caption-img {
    width: 120px;
  }
}

/* ============================================================
   2026-09-11 トップページ(Page ID 10)再構成 Phase 2-C
   3部門カード(旧「何を知りたい？」の再構成)
   ============================================================ */
.page-id-10 .home-departments {
  background: #fff;
  padding: 64px 0 72px;
}
.page-id-10 .home-departments__heading {
  text-align: center;
  margin: 0 0 12px;
}
.page-id-10 .home-departments__lead {
  text-align: center;
  color: #33404f;
  font-size: 15px;
  line-height: 1.8;
  max-width: 640px;
  margin: 0 auto 40px;
}
.page-id-10 .home-departments__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.page-id-10 .home-department-card {
  position: relative;
  background: linear-gradient(180deg, #0D182A 0%, #182842 100%);
  border-radius: 20px;
  padding: 32px 24px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
.page-id-10 .home-department-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
}
.page-id-10 .home-department-card--captain::before {
  background: #4a7fc4;
}
.page-id-10 .home-department-card--pen::before {
  background: #5ec2e0;
}
.page-id-10 .home-department-card--pan::before {
  background: #3fae7a;
}
.page-id-10 .home-department-card__character {
  width: 100%;
  height: 200px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 16px;
}
.page-id-10 .home-department-card__character img {
  max-width: 100%;
  max-height: 200px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.page-id-10 .home-department-card__title {
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  margin: 0 0 10px;
}
.page-id-10 .home-department-card__text {
  color: #cdd7e6;
  font-size: 13px;
  line-height: 1.7;
  margin: 0 0 20px;
}
.page-id-10 .home-department-card__cta {
  margin: 0;
}
.page-id-10 .home-department-card__cta-link {
  display: inline-block;
  padding: 10px 28px;
  border-radius: 24px;
  background-color: #FFC107;
  color: #0D182A;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.page-id-10 .home-department-card__cta-link:hover {
  background-color: #ffd54f;
}
/* 2026-09-11 隊長カードのみ画像差し替え(captain-hero系, 上半身で顔が
   大きく見える構図)に伴い、PCでは共通の.home-department-card__character
   の高さ(200px)は変更せず、隊長カードだけ画像を少し拡大表示して
   ペン隊員・パン隊員との存在感を揃える。カード自体のoverflow:hiddenで
   はみ出しをクリップするため、カード高さ・レイアウトには影響しない。 */
@media screen and (min-width: 783px) {
  .page-id-10 .home-department-card--captain .home-department-card__character img {
    transform: scale(1.15);
    transform-origin: bottom center;
  }
}
@media screen and (max-width: 782px) {
  .page-id-10 .home-departments {
    padding: 40px 0 48px;
  }
  .page-id-10 .home-departments__heading {
    padding: 0 16px;
    font-size: 21px;
  }
  .page-id-10 .home-departments__lead {
    padding: 0 16px;
    font-size: 14px;
    margin-bottom: 28px;
  }
  .page-id-10 .home-departments__grid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 16px;
  }
  .page-id-10 .home-department-card {
    padding: 28px 20px 24px;
  }
  .page-id-10 .home-department-card__character {
    height: 160px;
    margin-bottom: 14px;
  }
  .page-id-10 .home-department-card__character img {
    max-height: 160px;
  }
  .page-id-10 .home-department-card__title {
    font-size: 19px;
  }
  .page-id-10 .home-department-card__text {
    font-size: 13px;
    margin-bottom: 18px;
  }
}

/* ============================================================
   2026-09-11 HOME(Page ID 10) PC版メインビジュアル横幅調整
   動画ファイル・SWELLカスタマイザー設定・videoタグ・source属性・
   autoplay/loop/muted/playsinline・set_mv.min.jsは一切変更しない。
   #main_visual(.p-mainVisual)は元々width:100%で全幅表示され、
   内部の.p-mainVisual__video/.p-mainVisual__imgLayerはheight:autoで
   動画自身のアスペクト比に従って高さが決まる構造(SWELL標準)。
   そのため、外側のコンテナ幅をmax-widthで制限するだけで、
   動画は縦横比を保ったまま比例縮小され、クロップや歪みは発生しない。
   PC(783px以上)限定・HOME(page-id-10)限定でスコープし、
   スマホ表示・他ページのメインビジュアルには一切影響しない。
   ============================================================ */
@media screen and (min-width: 783px) {
  body.page-id-10 #main_visual.p-mainVisual {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ============================================================
   2026-09-11 トップページ(Page ID 10)再構成 Phase 2-D
   220社ジャンル紹介
   ============================================================ */
.page-id-10 .home-genres {
  background: #eef4fb;
  padding: 56px 0 64px;
}
.page-id-10 .home-genres__heading {
  text-align: center;
  margin: 0 0 12px;
}
.page-id-10 .home-genres__lead {
  text-align: center;
  color: #33404f;
  font-size: 15px;
  line-height: 1.8;
  max-width: 680px;
  margin: 0 auto 32px;
}
.page-id-10 .home-genres__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  margin: 0 auto 32px;
}
.page-id-10 .home-genre-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: #fff;
  border-radius: 14px;
  padding: 20px 8px;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(13, 24, 42, 0.08);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.page-id-10 .home-genre-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(13, 24, 42, 0.14);
}
.page-id-10 .home-genre-card__icon {
  font-size: 26px;
  line-height: 1;
}
.page-id-10 .home-genre-card__label {
  font-size: 12.5px;
  font-weight: 700;
  color: #0D182A;
  line-height: 1.4;
}
.page-id-10 .home-genre-card__count {
  font-size: 11px;
  font-weight: 600;
  color: #6d84a3;
}
.page-id-10 .home-genres__cta {
  text-align: center;
  margin: 0;
}
.page-id-10 .home-genres__cta-link {
  display: inline-block;
  padding: 13px 36px;
  background-color: #0D182A;
  color: #fff;
  border-radius: 26px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(13, 24, 42, 0.16);
}
.page-id-10 .home-genres__cta-link:hover {
  background-color: #1a2c47;
}
@media screen and (max-width: 782px) {
  .page-id-10 .home-genres {
    padding: 36px 0 40px;
  }
  .page-id-10 .home-genres__heading {
    padding: 0 16px;
    font-size: 21px;
  }
  .page-id-10 .home-genres__lead {
    padding: 0 16px;
    font-size: 14px;
    margin-bottom: 24px;
  }
  .page-id-10 .home-genres__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0 16px;
    margin-bottom: 24px;
  }
  .page-id-10 .home-genre-card {
    padding: 18px 10px;
  }
  .page-id-10 .home-genre-card__label {
    font-size: 13px;
  }
}

/* ============================================================
   2026-09-11 トップページ(Page ID 10)再構成 Phase 2-D
   企業ピックアップ
   ============================================================ */
.page-id-10 .home-company-pickup {
  background: #fff;
  padding: 56px 0 64px;
}
.page-id-10 .home-company-pickup__heading {
  text-align: center;
  margin: 0 0 12px;
}
.page-id-10 .home-company-pickup__lead {
  text-align: center;
  color: #33404f;
  font-size: 15px;
  line-height: 1.8;
  max-width: 680px;
  margin: 0 auto 32px;
}
.page-id-10 .home-company-pickup__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.page-id-10 .home-company-card {
  background: #fff;
  border: 1px solid #e3e9f2;
  border-radius: 14px;
  padding: 22px 20px 20px;
  box-shadow: 0 3px 10px rgba(13, 24, 42, 0.06);
  display: flex;
  flex-direction: column;
}
.page-id-10 .home-company-card__code {
  font-size: 12px;
  font-weight: 700;
  color: #6d84a3;
  letter-spacing: 0.05em;
  margin: 0 0 4px;
}
.page-id-10 .home-company-card__name {
  font-size: 17px;
  font-weight: 800;
  color: #0D182A;
  margin: 0 0 8px;
  line-height: 1.35;
}
.page-id-10 .home-company-card__genre {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: #2a5c9e;
  background: #eaf1fb;
  border-radius: 12px;
  padding: 3px 10px;
  margin: 0 0 12px;
  align-self: flex-start;
}
.page-id-10 .home-company-card__desc {
  font-size: 13px;
  color: #4d5b6b;
  line-height: 1.7;
  margin: 0 0 16px;
  flex-grow: 1;
}
.page-id-10 .home-company-card__cta {
  margin: 0;
}
.page-id-10 .home-company-card__cta-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: #0D182A;
  text-decoration: none;
  border-bottom: 2px solid #FFC107;
  padding-bottom: 2px;
}
.page-id-10 .home-company-card__cta-link:hover {
  color: #4a7fc4;
}
@media screen and (max-width: 782px) {
  .page-id-10 .home-company-pickup {
    padding: 36px 0 40px;
  }
  .page-id-10 .home-company-pickup__heading {
    padding: 0 16px;
    font-size: 21px;
  }
  .page-id-10 .home-company-pickup__lead {
    padding: 0 16px;
    font-size: 14px;
    margin-bottom: 24px;
  }
  .page-id-10 .home-company-pickup__grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 16px;
  }
}

/* ============================================================
   2026-09-11 トップページ(Page ID 10)再構成 Phase 2-E
   重点分析40社CTA
   ============================================================ */
.page-id-10 .home-selection-40 {
  background: linear-gradient(135deg, #12233f 0%, #1b3560 100%);
  padding: 56px 0;
}
.page-id-10 .home-selection-40__inner {
  display: flex;
  align-items: center;
  gap: 40px;
}
.page-id-10 .home-selection-40__content {
  flex: 1 1 55%;
}
.page-id-10 .home-selection-40__eyebrow {
  color: #9fc4ff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 0 0 8px;
}
.page-id-10 .home-selection-40__heading {
  color: #fff !important;
  background: none !important;
  padding: 0 !important;
  font-size: 30px;
  font-weight: 800;
  margin: 0 0 16px;
}
.page-id-10 .home-selection-40__number {
  color: #FFC107;
  font-size: 1.3em;
}
.page-id-10 .home-selection-40__text {
  color: #d7e3f5;
  font-size: 14px;
  line-height: 1.8;
  margin: 0 0 24px;
  max-width: 480px;
}
.page-id-10 .home-selection-40__cta {
  margin: 0;
}
.page-id-10 .home-selection-40__cta-link {
  display: inline-block;
  padding: 13px 34px;
  background-color: #fff;
  color: #12233f;
  border-radius: 26px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
}
.page-id-10 .home-selection-40__cta-link:hover {
  background-color: #e7edf5;
}
.page-id-10 .home-selection-40__character {
  flex: 0 0 260px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.page-id-10 .home-selection-40__character img {
  max-width: 100%;
  max-height: 320px;
  width: auto;
  height: auto;
  display: block;
  transform: scaleX(-1);
}
@media screen and (max-width: 782px) {
  .page-id-10 .home-selection-40 {
    padding: 40px 0;
  }
  .page-id-10 .home-selection-40__inner {
    flex-direction: column;
    gap: 20px;
    padding: 0 16px;
  }
  .page-id-10 .home-selection-40__content {
    flex: none;
    text-align: center;
  }
  .page-id-10 .home-selection-40__text {
    margin-left: auto;
    margin-right: auto;
  }
  .page-id-10 .home-selection-40__heading {
    font-size: 24px;
  }
  .page-id-10 .home-selection-40__character {
    flex: none;
  }
  .page-id-10 .home-selection-40__character img {
    max-height: 220px;
  }
}

/* ============================================================
   2026-09-11 トップページ(Page ID 10)再構成 Phase 2-E
   厳選TOP10 CTA
   ============================================================ */
.page-id-10 .home-top10 {
  background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
  padding: 56px 0;
}
.page-id-10 .home-top10__inner {
  display: flex;
  align-items: center;
  gap: 40px;
}
.page-id-10 .home-top10__content {
  flex: 1 1 55%;
}
.page-id-10 .home-top10__eyebrow {
  color: #8a6d1a;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 0 0 8px;
}
.page-id-10 .home-top10__heading {
  color: #0D182A !important;
  background: none !important;
  padding: 0 !important;
  font-size: 34px;
  font-weight: 800;
  margin: 0 0 10px;
}
.page-id-10 .home-top10__copy {
  color: #0D182A;
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 12px;
}
.page-id-10 .home-top10__text {
  color: #5c4a12;
  font-size: 14px;
  line-height: 1.8;
  margin: 0 0 24px;
  max-width: 480px;
}
.page-id-10 .home-top10__cta {
  margin: 0;
}
.page-id-10 .home-top10__cta-link {
  display: inline-block;
  padding: 13px 34px;
  background-color: #0D182A;
  color: #fff;
  border-radius: 26px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(13, 24, 42, 0.2);
}
.page-id-10 .home-top10__cta-link:hover {
  background-color: #1a2c47;
}
.page-id-10 .home-top10__character {
  flex: 0 0 260px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.page-id-10 .home-top10__character img {
  max-width: 100%;
  max-height: 320px;
  width: auto;
  height: auto;
  display: block;
  transform: scaleX(-1);
}
@media screen and (max-width: 782px) {
  .page-id-10 .home-top10 {
    padding: 40px 0;
  }
  .page-id-10 .home-top10__inner {
    flex-direction: column;
    gap: 20px;
    padding: 0 16px;
  }
  .page-id-10 .home-top10__content {
    flex: none;
    text-align: center;
  }
  .page-id-10 .home-top10__text {
    margin-left: auto;
    margin-right: auto;
  }
  .page-id-10 .home-top10__heading {
    font-size: 26px;
  }
  .page-id-10 .home-top10__character {
    flex: none;
  }
  .page-id-10 .home-top10__character img {
    max-height: 220px;
  }
}

/* ============================================================
   2026-09-11 トップページ(Page ID 10)再構成 Phase 2-E
   資産を守る導線(旧バナーの再配置)
   ============================================================ */
.page-id-10 .home-protect {
  background: #f4f6f9;
  padding: 44px 0;
}
.page-id-10 .home-protect__content {
  text-align: center;
  max-width: 640px;
  margin: 0 auto;
}
.page-id-10 .home-protect__heading {
  color: #0D182A;
  font-size: 24px;
  font-weight: 800;
  margin: 0 0 10px;
}
.page-id-10 .home-protect__text {
  color: #4d5b6b;
  font-size: 14px;
  line-height: 1.8;
  margin: 0 0 20px;
}
.page-id-10 .home-protect__cta {
  margin: 0;
}
.page-id-10 .home-protect__cta-link {
  display: inline-block;
  padding: 12px 34px;
  background-color: #0D182A;
  color: #fff;
  border-radius: 26px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.page-id-10 .home-protect__cta-link:hover {
  background-color: #1a2c47;
}
@media screen and (max-width: 782px) {
  .page-id-10 .home-protect {
    padding: 32px 0;
  }
  .page-id-10 .home-protect__content {
    padding: 0 16px;
  }
  .page-id-10 .home-protect__heading {
    font-size: 20px;
  }
}

/* ============================================================
   2026-09-11 トップページ(Page ID 10)再構成 Phase 2-F
   新着記事(見出しのみ新デザイン。wp:loos/post-listの動的ブロック
   本体はHTML構造・ブロック設定を一切変更せず、CSSのみ当てる)
   ============================================================ */
.page-id-10 .home-latest {
  background: #fff;
  padding: 56px 0 8px;
}
.page-id-10 .home-latest__heading {
  text-align: center;
  margin: 0 0 10px;
}
.page-id-10 .home-latest__lead {
  text-align: center;
  color: #33404f;
  font-size: 14px;
  margin: 0 0 8px;
}
/* wp:loos/post-list(動的ブロック)自体は変更せず、HOME限定で
   見た目だけ調整する。他ページのpostListには影響しない。 */
.page-id-10 .p-postListWrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 56px;
  box-sizing: border-box;
}
.page-id-10 .p-postList.-type-card {
  /* 2026-09-11 修正: SWELL標準の.-type-cardはdisplay:flex(flex-wrap:wrap)
     ＋各アイテムwidth:33.3333%(パーセンテージ指定)。flexboxのgapは
     column-gap分がこの33.3333%の外側に加算されるため、column-gapを
     指定すると3カード分の合計幅が100%を超えてしまい、3個目が次の行へ
     折り返されて2列表示になっていた(実際の原因)。横方向の間隔は
     SWELL標準の.p-postList__item{padding:0 .75em}に既に含まれている
     ため、ここではrow-gap(段間の縦方向のみ)だけを指定する。 */
  row-gap: 24px;
}
.page-id-10 .p-postList__item {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(13, 24, 42, 0.08);
}
.page-id-10 .p-postList__link {
  display: block;
  height: 100%;
}
.page-id-10 .p-postList__title {
  font-size: 15px;
  font-weight: 700;
  color: #0D182A;
  line-height: 1.6;
}
@media screen and (max-width: 782px) {
  .page-id-10 .home-latest {
    padding: 36px 0 4px;
  }
  .page-id-10 .home-latest__heading {
    font-size: 21px;
    padding: 0 16px;
  }
  .page-id-10 .home-latest__lead {
    padding: 0 16px;
    font-size: 13px;
  }
  .page-id-10 .p-postListWrap {
    padding: 0 16px 36px;
  }
  .page-id-10 .p-postList.-type-card {
    row-gap: 16px;
  }
}

/* ============================================================
   2026-09-11 トップページ(Page ID 10)再構成 Phase 2-F
   X導線
   ============================================================ */
.page-id-10 .home-social {
  background: linear-gradient(135deg, #0D182A 0%, #1b3560 100%);
  padding: 44px 0;
}
.page-id-10 .home-social__content {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}
.page-id-10 .home-social__heading {
  color: #fff !important;
  background: none !important;
  padding: 0 !important;
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 10px;
}
.page-id-10 .home-social__text {
  color: #cdd7e6;
  font-size: 14px;
  line-height: 1.8;
  margin: 0 0 20px;
}
.page-id-10 .home-social__cta {
  margin: 0;
}
.page-id-10 .home-social__cta-link {
  display: inline-block;
  padding: 12px 32px;
  background-color: #fff;
  color: #0D182A;
  border-radius: 26px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.page-id-10 .home-social__cta-link:hover {
  background-color: #e7edf5;
}
@media screen and (max-width: 782px) {
  .page-id-10 .home-social {
    padding: 32px 0;
  }
  .page-id-10 .home-social__content {
    padding: 0 16px;
  }
  .page-id-10 .home-social__heading {
    font-size: 19px;
  }
}

/* ============================================================
   2026-09-11 ペン隊員教室(Page ID 51) 再構築 Phase 2
   サイドバー非表示化(CSS限定・functions.php不使用)

   【背景】/learn/はHOME・Page66と異なり、標準の固定ページとして
   サイドバーが有効(-sidebar-on)になっている。Page66は既存の
   functions.php内フィルター(swell_is_show_sidebar, is_page(66)限定)
   でサイドバーを非表示にしているが、今回のPhase 2ではfunctions.php
   の変更が禁止されているため、同じ視覚効果をCSSのみで実現する。

   【方法】.l-mainContentの実幅は
   width:calc(100% - var(--swl-sidebar_width) - var(--swl-sidebar_margin))
   という計算式(SWELL標準)になっている。sidebar_width/marginの2変数を
   page-id-51限定で0に上書きすることで、計算結果が自動的に100%になる。
   あわせて#sidebar要素をdisplay:noneで非表示にし、隊長スクリーニング
   (Page66)と同様に--article_sizeも1200pxへ拡張する。
   他ページのsidebar関連変数・#sidebar表示には一切影響しない
   (.page-id-51（bodyタグ自体ではなく#body_wrap側）限定のスコープのため)。
   ============================================================ */
.page-id-51 {
  --article_size: 1200px;
  --swl-sidebar_width: 0px;
  --swl-sidebar_margin: 0px;
}
.page-id-51 #sidebar {
  display: none;
}

.page-id-51 .pen-classroom-band {
  position: relative;
  width: 100%;
}
.page-id-51 .pen-classroom-band__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 782px) {
  .page-id-51 .pen-classroom-band__inner {
    padding: 0 16px;
  }
}

/* ヒーロー */
.page-id-51 .pen-classroom-hero {
  background-image: linear-gradient(135deg, rgba(13, 24, 42, 0.72) 0%, rgba(13, 24, 42, 0.5) 55%, rgba(13, 24, 42, 0.28) 100%), url('https://shisan-boueitai.com/wp-content/themes/swell_child/assets/images/backgrounds/web-bg-pen-training-room-v1-web-v1-1600x900.jpg');
  background-size: cover;
  background-position: center;
  padding: 64px 0;
}
.page-id-51 .pen-classroom-hero__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 320px;
}
.page-id-51 .pen-classroom-hero__text {
  flex: 1 1 55%;
  color: #fff;
}
.page-id-51 .pen-classroom-hero__title {
  font-size: 40px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 14px;
  line-height: 1.2;
}
.page-id-51 .pen-classroom-hero__copy {
  font-size: 19px;
  font-weight: 700;
  color: #FFC107;
  margin: 0 0 10px;
}
.page-id-51 .pen-classroom-hero__lead {
  font-size: 14px;
  line-height: 1.8;
  color: #e7ecf3;
  max-width: 480px;
  margin: 0;
}
.page-id-51 .pen-classroom-hero__character {
  flex: 0 0 260px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.page-id-51 .pen-classroom-hero__character img {
  max-width: 100%;
  max-height: 320px;
  width: auto;
  height: auto;
  display: block;
}
@media screen and (max-width: 782px) {
  .page-id-51 .pen-classroom-hero {
    padding: 40px 0;
  }
  .page-id-51 .pen-classroom-hero__inner {
    flex-direction: column;
    text-align: center;
    min-height: 0;
    gap: 20px;
  }
  .page-id-51 .pen-classroom-hero__text {
    flex: none;
  }
  .page-id-51 .pen-classroom-hero__title {
    font-size: 28px;
  }
  .page-id-51 .pen-classroom-hero__lead {
    margin-left: auto;
    margin-right: auto;
  }
  .page-id-51 .pen-classroom-hero__character {
    flex: none;
  }
  .page-id-51 .pen-classroom-hero__character img {
    max-height: 220px;
  }
}

/* 導入セクション:「ペン隊員教室とは？」 */
.page-id-51 .pen-classroom-intro {
  background: #eef4fb;
  padding: 56px 0;
}
.page-id-51 .pen-classroom-intro__heading {
  text-align: center;
  margin: 0 0 28px;
}
.page-id-51 .pen-classroom-intro__card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(13, 24, 42, 0.08);
  padding: 32px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.page-id-51 .pen-classroom-intro__character {
  flex: 0 0 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-id-51 .pen-classroom-intro__character img {
  max-width: 100%;
  height: auto;
  display: block;
}
.page-id-51 .pen-classroom-intro__body {
  flex: 1 1 auto;
}
.page-id-51 .pen-classroom-intro__text {
  font-size: 15px;
  line-height: 1.9;
  color: #33404f;
  margin: 0 0 18px;
}
.page-id-51 .pen-classroom-intro__themes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-id-51 .pen-classroom-intro__theme {
  background: #eaf1fb;
  color: #2a5c9e;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 20px;
}
@media screen and (max-width: 782px) {
  .page-id-51 .pen-classroom-intro {
    padding: 36px 0;
  }
  .page-id-51 .pen-classroom-intro__heading {
    font-size: 21px;
    padding: 0 16px;
  }
  .page-id-51 .pen-classroom-intro__card {
    flex-direction: column;
    padding: 24px 20px;
    gap: 16px;
    text-align: center;
  }
  .page-id-51 .pen-classroom-intro__character {
    flex: none;
    max-width: 140px;
  }
  .page-id-51 .pen-classroom-intro__themes {
    justify-content: center;
  }
}

/* ============================================================
   2026-09-12 ペン隊員教室(Page ID 51) 再構築 Phase 3
   6STEP学習ロードマップ

   【SWELL標準との競合確認】.post_content h3にはmargin:3em 0 2em
   と::before装飾(位置:absolute)がデフォルトで付与されるため、
   カード内で使用する.pen-learning-step__titleはmargin/beforeを
   明示的にリセットする。.post_content ul/liのデフォルト余白・
   list-styleも同様にリセットしてからチップ style を適用する。
   HOME新着記事で発生したflex width+追加gapの事故を踏まえ、
   ここではCSS Gridを使用し、gapをgrid本来の仕組みで指定する
   (flexboxのgap事故は発生しない)。
   ============================================================ */
.page-id-51 .pen-learning-roadmap {
  background: #fff;
  padding: 56px 0;
}
/* Phase W1.2: 配置基準を「見出し帯(__head)内部」から
   「6STEPセクション全体(__inner)」へ変更。__headへのmin-height指定は
   見出しテキストと比べて不自然な余白を生む原因になっていたため廃止し、
   代わりに__headのmargin-bottomのみを広げてペン隊員の分の
   縦スペースを確保する(見出しボックス自体は本来の高さのまま)。 */
.page-id-51 .pen-learning-roadmap__inner {
  position: relative;
}
.page-id-51 .pen-learning-roadmap__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 80px;
}
/* Phase W1.3: SWELL標準の見出し2装飾
   (.post_content h2:where(...){background:var(--color_htag);...})
   により、この紺色帯の実体はh2要素自身の背景である。
   headtextにpadding-rightを付けるとh2の描画幅そのものが縮み、
   帯がペン隊員の手前で途切れて右側が白く見える原因になっていたため、
   headtext側のpadding-rightは廃止し、紺色背景を持たないリード文
   (__lead)側だけにpadding-rightを移して文字の重なりのみ回避する。
   これによりh2の紺色背景はセクション幅いっぱいまで連続する。 */
.page-id-51 .pen-learning-roadmap__headtext {
  flex: 1 1 auto;
}
.page-id-51 .pen-learning-roadmap__heading {
  width: 100%;
  margin: 0 0 10px;
}
.page-id-51 .pen-learning-roadmap__lead {
  font-size: 14px;
  line-height: 1.8;
  color: #33404f;
  margin: 0;
  padding-right: 150px;
}
.page-id-51 .pen-learning-roadmap__character {
  position: absolute;
  top: -16px;
  right: 28px;
  width: 110px;
  z-index: 2;
}
.page-id-51 .pen-learning-roadmap__character img {
  width: 100%;
  height: auto;
  display: block;
}
.page-id-51 .pen-learning-roadmap__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  align-items: stretch;
}
.page-id-51 .pen-learning-step {
  background: #f7faff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 3px 10px rgba(13, 24, 42, 0.06);
  position: relative;
  border-top: 4px solid #9fc4ff;
}
.page-id-51 .pen-learning-step--1 {
  border-top-color: #bcdcff;
}
.page-id-51 .pen-learning-step--2 {
  border-top-color: #6fa8dc;
}
.page-id-51 .pen-learning-step--3 {
  border-top-color: #0D182A;
}
.page-id-51 .pen-learning-step--4 {
  border-top-color: #16223a;
}
.page-id-51 .pen-learning-step--5 {
  border-top-color: #e3c265;
}
.page-id-51 .pen-learning-step--6 {
  border-top-color: #8ea0b8;
}
.page-id-51 .pen-learning-step__num {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #2a5c9e;
  background: #eaf1fb;
  border-radius: 12px;
  padding: 4px 12px;
  margin-bottom: 12px;
}
.page-id-51 .pen-learning-step__title {
  font-size: 17px;
  font-weight: 800;
  color: #0D182A;
  margin: 0 0 8px;
  padding: 0;
}
.page-id-51 .pen-learning-step__title::before {
  content: none;
}
.page-id-51 .pen-learning-step__desc {
  font-size: 13px;
  line-height: 1.7;
  color: #4d5b6b;
  margin: 0 0 14px;
}
.page-id-51 .pen-learning-step__keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}
.page-id-51 .pen-learning-step__keywords li {
  font-size: 11px;
  font-weight: 700;
  color: #2a5c9e;
  background: #fff;
  border: 1px solid #cfe0f5;
  border-radius: 14px;
  padding: 3px 10px;
  margin: 0;
  line-height: 1.6;
}
.page-id-51 .pen-learning-step__status {
  font-size: 12px;
  color: #7a889c;
  margin: 0;
  font-style: normal;
}
.page-id-51 .pen-learning-step__link {
  margin: 12px 0 0;
}
.page-id-51 .pen-learning-step__link a {
  font-size: 13px;
  font-weight: 700;
  color: #0D182A;
  text-decoration: none;
  border-bottom: 2px solid #FFC107;
  padding-bottom: 2px;
}
.page-id-51 .pen-learning-step__link a:hover {
  color: #4a7fc4;
}
.page-id-51 .pen-learning-step__future-link {
  font-size: 12px;
  color: #7a889c;
  margin: 12px 0 0;
  font-style: italic;
}
.page-id-51 .pen-learning-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b9c9de;
  font-size: 22px;
  line-height: 1;
}
.page-id-51 .pen-learning-arrow--minor {
  display: none;
}
.page-id-51 .pen-learning-arrow--major {
  grid-column: 1 / -1;
  font-size: 26px;
}
@media screen and (max-width: 782px) {
  .page-id-51 .pen-learning-roadmap {
    padding: 40px 0;
  }
  .page-id-51 .pen-learning-roadmap__head {
    flex-direction: column;
    text-align: center;
    gap: 16px;
    margin-bottom: 24px;
    min-height: 0;
  }
  .page-id-51 .pen-learning-roadmap__heading {
    font-size: 21px;
    padding: 0 16px;
  }
  .page-id-51 .pen-learning-roadmap__lead {
    padding: 0 16px;
    font-size: 13px;
  }
  /* mobileでは絶対配置を解除し、見出し下へ通常フローで中央配置 */
  .page-id-51 .pen-learning-roadmap__character {
    position: static;
    width: auto;
    display: flex;
    justify-content: center;
  }
  .page-id-51 .pen-learning-roadmap__character img {
    width: auto;
    max-height: 130px;
  }
  .page-id-51 .pen-learning-roadmap__grid {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0 16px;
  }
  .page-id-51 .pen-learning-step {
    padding: 20px;
  }
  .page-id-51 .pen-learning-arrow {
    padding: 6px 0;
  }
  .page-id-51 .pen-learning-arrow--minor {
    display: flex;
  }
  .page-id-51 .pen-learning-arrow--major {
    grid-column: auto;
  }
}

/* ============================================================
   2026-09-12 ペン隊員教室(Page ID 51) 再構築 Phase 3
   新しい授業(既存wp:queryブロックの見た目調整のみ。
   ブロック本体・動的取得機能は無変更)
   ============================================================ */
.page-id-51 .pen-lessons {
  background: #eef4fb;
  padding: 56px 0;
}
.page-id-51 .pen-lessons__heading {
  text-align: center;
  margin: 0 0 10px;
}
.page-id-51 .pen-lessons__lead {
  text-align: center;
  font-size: 14px;
  color: #33404f;
  margin: 0;
}
.page-id-51 .wp-block-query {
  max-width: 1200px;
  margin: 32px auto 0;
  padding: 0 24px;
  box-sizing: border-box;
}
.page-id-51 .wp-block-query-no-results {
  text-align: center;
  background: #fff;
  border-radius: 16px;
  padding: 32px 24px;
  box-shadow: 0 3px 10px rgba(13, 24, 42, 0.06);
}
.page-id-51 .wp-block-query-no-results p {
  color: #4d5b6b;
  font-size: 14px;
  margin: 0;
}
.page-id-51 .wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.page-id-51 .wp-block-post-template > li {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(13, 24, 42, 0.08);
  padding: 0 0 16px;
  margin: 0;
}
.page-id-51 .wp-block-post-template > li > * {
  padding-left: 16px;
  padding-right: 16px;
}
@media screen and (max-width: 782px) {
  .page-id-51 .pen-lessons {
    padding: 36px 0;
  }
  .page-id-51 .pen-lessons__heading {
    font-size: 21px;
    padding: 0 16px;
  }
  .page-id-51 .pen-lessons__lead {
    padding: 0 16px;
    font-size: 13px;
  }
  .page-id-51 .wp-block-query {
    padding: 0 16px;
  }
  .page-id-51 .wp-block-post-template {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ============================================================
   2026-09-12 ペン隊員教室(Page ID 51) 再構築 Phase 4
   最終導線(次はどこへ行く？)
   ============================================================ */
.page-id-51 .pen-next-steps {
  background: #f4f6f9;
  padding: 56px 0 64px;
}
.page-id-51 .pen-next-steps__heading {
  text-align: center;
  margin: 0 0 10px;
}
.page-id-51 .pen-next-steps__lead {
  text-align: center;
  color: #33404f;
  font-size: 14px;
  margin: 0 0 32px;
}
.page-id-51 .pen-next-steps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.page-id-51 .pen-next-step-card {
  background: #fff;
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
  box-shadow: 0 3px 10px rgba(13, 24, 42, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-id-51 .pen-next-step-card__character {
  width: 100%;
  height: 140px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 14px;
}
.page-id-51 .pen-next-step-card__character img {
  max-width: 100%;
  max-height: 140px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.page-id-51 .pen-next-step-card__character--icon {
  font-size: 56px;
  line-height: 1;
  height: 140px;
  align-items: center;
}
.page-id-51 .pen-next-step-card__title {
  font-size: 16px;
  font-weight: 800;
  color: #0D182A;
  margin: 0 0 8px;
}
.page-id-51 .pen-next-step-card__text {
  font-size: 13px;
  line-height: 1.7;
  color: #4d5b6b;
  margin: 0 0 18px;
}
.page-id-51 .pen-next-step-card__cta {
  margin: auto 0 0;
}
.page-id-51 .pen-next-step-card__cta-link {
  display: inline-block;
  padding: 10px 26px;
  background-color: #0D182A;
  color: #fff;
  border-radius: 22px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.page-id-51 .pen-next-step-card__cta-link:hover {
  background-color: #1a2c47;
}
@media screen and (max-width: 980px) {
  .page-id-51 .pen-next-steps__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .page-id-51 .pen-next-step-card--protect {
    grid-column: 1 / -1;
    max-width: 360px;
    margin: 0 auto;
  }
}
@media screen and (max-width: 782px) {
  .page-id-51 .pen-next-steps {
    padding: 36px 0 40px;
  }
  .page-id-51 .pen-next-steps__heading {
    font-size: 21px;
    padding: 0 16px;
  }
  .page-id-51 .pen-next-steps__lead {
    padding: 0 16px;
    font-size: 13px;
    margin-bottom: 20px;
  }
  .page-id-51 .pen-next-steps__grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 16px;
  }
  .page-id-51 .pen-next-step-card--protect {
    grid-column: auto;
    max-width: none;
  }
  .page-id-51 .pen-next-step-card {
    padding: 24px 20px;
  }
  .page-id-51 .pen-next-step-card__cta-link {
    padding: 12px 30px;
    font-size: 14px;
  }
}

/* ============================================================
   2026-09-12 パン隊員 チャート分析室(Page ID 53) 再構築 Phase 2
   サイドバー非表示化(CSS限定・functions.php不使用)

   【背景】/chart/も/learn/と同様、標準の固定ページとしてサイドバーが
   有効(-sidebar-on)。functions.php変更が禁止されているため、/learn/
   Phase 2で確立した手法と同じCSS限定の方法で同じ視覚効果を実現する。
   .l-mainContentの実幅はwidth:calc(100% - var(--swl-sidebar_width)
   - var(--swl-sidebar_margin))という計算式(SWELL標準)になっている。
   sidebar_width/marginの2変数をpage-id-53限定で0に上書きすることで、
   計算結果が自動的に100%になる。あわせて#sidebar要素を非表示にし、
   --article_sizeも1200pxへ拡張する。他ページには一切影響しない
   (.page-id-53限定のスコープのため)。

   【2026-09-12 Phase W1追記】SWELLは実際にはページ固有クラスを
   <body>タグ自体ではなく内側の#body_wrap divに付与する構造であるため、
   body.page-id-53というセレクタは一度も一致せず、この上書きが機能して
   いなかった(Page51/Page52で発見・修正済みと同じ構造的バグ)。
   body.page-id-53 → .page-id-53 に修正し、正しく機能させる。
   ============================================================ */
.page-id-53 {
  --article_size: 1200px;
  --swl-sidebar_width: 0px;
  --swl-sidebar_margin: 0px;
}
.page-id-53 #sidebar {
  display: none;
}

.page-id-53 .pan-chart-band {
  position: relative;
  width: 100%;
}
.page-id-53 .pan-chart-band__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 782px) {
  .page-id-53 .pan-chart-band__inner {
    padding: 0 16px;
  }
}

/* ヒーロー */
.page-id-53 .pan-chart-hero {
  background-image: linear-gradient(135deg, rgba(6, 12, 24, 0.82) 0%, rgba(10, 20, 38, 0.6) 55%, rgba(13, 24, 42, 0.35) 100%), url('https://shisan-boueitai.com/wp-content/themes/swell_child/assets/images/backgrounds/web-bg-pan-chart-analysis-room-v1-web-v1-1600x900.jpg');
  background-size: cover;
  background-position: center;
  padding: 64px 0;
}
.page-id-53 .pan-chart-hero__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 320px;
}
.page-id-53 .pan-chart-hero__text {
  flex: 1 1 55%;
  color: #fff;
}
.page-id-53 .pan-chart-hero__title {
  font-size: 40px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 14px;
  line-height: 1.2;
}
.page-id-53 .pan-chart-hero__copy {
  font-size: 19px;
  font-weight: 700;
  color: #6fc2ff;
  margin: 0 0 10px;
}
.page-id-53 .pan-chart-hero__lead {
  font-size: 14px;
  line-height: 1.8;
  color: #e7ecf3;
  max-width: 480px;
  margin: 0;
}
.page-id-53 .pan-chart-hero__character {
  flex: 0 0 280px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.page-id-53 .pan-chart-hero__character img {
  max-width: 100%;
  max-height: 560px;
  width: auto;
  height: auto;
  display: block;
}
@media screen and (max-width: 782px) {
  .page-id-53 .pan-chart-hero {
    padding: 40px 0;
  }
  .page-id-53 .pan-chart-hero__inner {
    flex-direction: column;
    text-align: center;
    min-height: 0;
    gap: 20px;
  }
  .page-id-53 .pan-chart-hero__text {
    flex: none;
  }
  .page-id-53 .pan-chart-hero__title {
    font-size: 26px;
  }
  .page-id-53 .pan-chart-hero__lead {
    margin-left: auto;
    margin-right: auto;
  }
  .page-id-53 .pan-chart-hero__character {
    flex: none;
  }
  .page-id-53 .pan-chart-hero__character img {
    max-height: 240px;
  }
}

/* 導入セクション:「チャート分析室とは？」 */
.page-id-53 .pan-chart-intro {
  background: #eef4fb;
  padding: 56px 0;
}
.page-id-53 .pan-chart-intro__heading {
  text-align: center;
  margin: 0 0 28px;
}
.page-id-53 .pan-chart-intro__card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(13, 24, 42, 0.08);
  padding: 32px;
  display: flex;
  align-items: center;
  gap: 32px;
}
.page-id-53 .pan-chart-intro__character {
  flex: 0 0 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.page-id-53 .pan-chart-intro__character img {
  max-width: 100%;
  height: auto;
  display: block;
}
.page-id-53 .pan-chart-intro__body {
  flex: 1 1 auto;
}
.page-id-53 .pan-chart-intro__text {
  font-size: 15px;
  line-height: 1.9;
  color: #33404f;
  margin: 0 0 14px;
}
.page-id-53 .pan-chart-intro__risk {
  font-size: 13px;
  line-height: 1.8;
  color: #7a889c;
  margin: 0 0 18px;
}
.page-id-53 .pan-chart-intro__themes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.page-id-53 .pan-chart-intro__theme {
  background: #eaf1fb;
  color: #2a5c9e;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 20px;
}
@media screen and (max-width: 782px) {
  .page-id-53 .pan-chart-intro {
    padding: 36px 0;
  }
  .page-id-53 .pan-chart-intro__heading {
    font-size: 21px;
    padding: 0 16px;
  }
  .page-id-53 .pan-chart-intro__card {
    flex-direction: column;
    padding: 24px 20px;
    gap: 16px;
    text-align: center;
  }
  .page-id-53 .pan-chart-intro__character {
    flex: none;
    max-width: 140px;
  }
  .page-id-53 .pan-chart-intro__themes {
    justify-content: center;
  }
}

/* ============================================================
   2026-09-12 パン隊員 チャート分析室(Page ID 53) 再構築 Phase 3
   6STEP学習ロードマップ

   【SWELL標準との競合確認】.post_content h3のmargin:3em 0 2em・
   ::before装飾、.post_content ul/liのデフォルト余白・list-styleを
   /learn/ Phase 3と同様にリセットしてから独自スタイルを適用する。
   HOME新着記事のflex width+gap事故を踏まえ、ここでもCSS Gridの
   gapのみを使用し、flexboxへ子要素パーセンテージ幅+gapを組み合わせない。
   ============================================================ */
.page-id-53 .pan-chart-roadmap {
  background: #fff;
  padding: 56px 0;
}
/* 2026-09-12 Phase W1: パン隊員の配置基準は「見出し帯(__head)内部の
   フレックス横並び」ではなく「6STEPセクション全体(__inner)」とする
   (position:relativeを__innerに設定)。/learn/ Phase W1.1〜W1.3で
   判明した教訓を反映し、以下を最初から回避している:
   1) __headにmin-heightを設定して不自然な余白を作らない
      (__headのmargin-bottomのみを広げて縦スペースを確保する)
   2) SWELL標準の見出し2装飾(.post_content h2:where(...){
      background:var(--color_htag);...})はheading要素自身の背景の
      ため、親のheadtextにpadding-rightを設定するとh2の描画幅(=紺色
      帯の幅)そのものが縮んでしまう。したがってpadding-rightは紺色
      背景を持たないlead/flow側にのみ設定し、heading(h2)はwidth:100%
      でセクション幅いっぱいに背景が連続するようにする。 */
.page-id-53 .pan-chart-roadmap__inner {
  position: relative;
}
.page-id-53 .pan-chart-roadmap__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 80px;
}
.page-id-53 .pan-chart-roadmap__headtext {
  flex: 1 1 auto;
}
.page-id-53 .pan-chart-roadmap__heading {
  width: 100%;
  margin: 0 0 10px;
}
.page-id-53 .pan-chart-roadmap__lead {
  font-size: 14px;
  line-height: 1.8;
  color: #33404f;
  margin: 0 0 8px;
  padding-right: 150px;
}
.page-id-53 .pan-chart-roadmap__flow {
  font-size: 13px;
  font-weight: 700;
  color: #2a5c9e;
  margin: 0;
  padding-right: 150px;
}
.page-id-53 .pan-chart-roadmap__character {
  position: absolute;
  top: -16px;
  right: 28px;
  width: 110px;
  z-index: 2;
}
.page-id-53 .pan-chart-roadmap__character img {
  width: 100%;
  height: auto;
  display: block;
}
.page-id-53 .pan-chart-roadmap__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  align-items: stretch;
}
.page-id-53 .pan-chart-step {
  background: #f7faff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 3px 10px rgba(13, 24, 42, 0.06);
  position: relative;
  border-top: 4px solid #9fc4ff;
}
.page-id-53 .pan-chart-step--1 {
  border-top-color: #bcdcff;
}
.page-id-53 .pan-chart-step--2 {
  border-top-color: #6fa8dc;
}
.page-id-53 .pan-chart-step--3 {
  border-top-color: #0D182A;
}
.page-id-53 .pan-chart-step--4 {
  border-top-color: #16223a;
}
.page-id-53 .pan-chart-step--5 {
  border-top-color: #4a7fc4;
}
.page-id-53 .pan-chart-step--6 {
  border-top-color: #8ea0b8;
}
.page-id-53 .pan-chart-step__num {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #2a5c9e;
  background: #eaf1fb;
  border-radius: 12px;
  padding: 4px 12px;
  margin-bottom: 12px;
}
.page-id-53 .pan-chart-step__title {
  font-size: 17px;
  font-weight: 800;
  color: #0D182A;
  margin: 0 0 8px;
  padding: 0;
}
.page-id-53 .pan-chart-step__title::before {
  content: none;
}
.page-id-53 .pan-chart-step__desc {
  font-size: 13px;
  line-height: 1.7;
  color: #4d5b6b;
  margin: 0 0 14px;
}
.page-id-53 .pan-chart-step__keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
}
.page-id-53 .pan-chart-step__keywords li {
  font-size: 11px;
  font-weight: 700;
  color: #2a5c9e;
  background: #fff;
  border: 1px solid #cfe0f5;
  border-radius: 14px;
  padding: 3px 10px;
  margin: 0;
  line-height: 1.6;
}
.page-id-53 .pan-chart-step__status {
  font-size: 12px;
  color: #7a889c;
  margin: 0;
}
.page-id-53 .pan-chart-step__future-link {
  font-size: 12px;
  color: #7a889c;
  margin: 12px 0 0;
  font-style: italic;
}
.page-id-53 .pan-chart-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b9c9de;
  font-size: 22px;
  line-height: 1;
}
.page-id-53 .pan-chart-arrow--minor {
  display: none;
}
.page-id-53 .pan-chart-arrow--major {
  grid-column: 1 / -1;
  font-size: 26px;
}
.page-id-53 .pan-chart-roadmap__note {
  text-align: center;
  font-size: 13px;
  color: #7a889c;
  margin: 32px 0 0;
}
@media screen and (max-width: 782px) {
  .page-id-53 .pan-chart-roadmap {
    padding: 40px 0;
  }
  .page-id-53 .pan-chart-roadmap__head {
    flex-direction: column;
    text-align: center;
    gap: 16px;
    margin-bottom: 24px;
  }
  .page-id-53 .pan-chart-roadmap__heading {
    font-size: 21px;
    padding: 0 16px;
  }
  .page-id-53 .pan-chart-roadmap__lead {
    padding: 0 16px;
    font-size: 13px;
  }
  .page-id-53 .pan-chart-roadmap__flow {
    padding: 0 16px;
  }
  /* mobileでは絶対配置を解除し、見出し下へ通常フローで中央配置 */
  .page-id-53 .pan-chart-roadmap__character {
    position: static;
    width: auto;
    display: flex;
    justify-content: center;
  }
  .page-id-53 .pan-chart-roadmap__character img {
    width: auto;
    max-height: 130px;
  }
  .page-id-53 .pan-chart-roadmap__grid {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0 16px;
  }
  .page-id-53 .pan-chart-step {
    padding: 20px;
  }
  .page-id-53 .pan-chart-arrow {
    padding: 6px 0;
  }
  .page-id-53 .pan-chart-arrow--minor {
    display: flex;
  }
  .page-id-53 .pan-chart-arrow--major {
    grid-column: auto;
  }
  .page-id-53 .pan-chart-roadmap__note {
    padding: 0 16px;
  }
}

/* ============================================================
   2026-09-12 パン隊員 チャート分析室(Page ID 53) 再構築 Phase 3
   新しい分析(既存wp:queryブロックの見た目調整のみ。
   ブロック本体・動的取得機能は一切変更しない)
   ============================================================ */
.page-id-53 .pan-chart-lessons {
  background: #eef4fb;
  padding: 56px 0;
}
.page-id-53 .pan-chart-lessons__heading {
  text-align: center;
  margin: 0 0 10px;
}
.page-id-53 .pan-chart-lessons__lead {
  text-align: center;
  font-size: 14px;
  color: #33404f;
  margin: 0;
}
.page-id-53 .wp-block-query {
  max-width: 1200px;
  margin: 32px auto 0;
  padding: 0 24px;
  box-sizing: border-box;
}
.page-id-53 .wp-block-query-no-results {
  text-align: center;
  background: #fff;
  border-radius: 16px;
  padding: 32px 24px;
  box-shadow: 0 3px 10px rgba(13, 24, 42, 0.06);
}
.page-id-53 .wp-block-query-no-results p {
  color: #4d5b6b;
  font-size: 14px;
  margin: 0;
}
.page-id-53 .wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.page-id-53 .wp-block-post-template > li {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(13, 24, 42, 0.08);
  padding: 0 0 16px;
  margin: 0;
}
.page-id-53 .wp-block-post-template > li > * {
  padding-left: 16px;
  padding-right: 16px;
}
@media screen and (max-width: 782px) {
  .page-id-53 .pan-chart-lessons {
    padding: 36px 0;
  }
  .page-id-53 .pan-chart-lessons__heading {
    font-size: 21px;
    padding: 0 16px;
  }
  .page-id-53 .pan-chart-lessons__lead {
    padding: 0 16px;
    font-size: 13px;
  }
  .page-id-53 .wp-block-query {
    padding: 0 16px;
  }
  .page-id-53 .wp-block-post-template {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ============================================================
   2026-09-12 パン隊員 チャート分析室(Page ID 53) 再構築 Phase 4
   最終導線(次はどこへ行く？)
   ============================================================ */
.page-id-53 .pan-chart-next {
  background: #eef2f7;
  padding: 56px 0 64px;
}
.page-id-53 .pan-chart-next__heading {
  text-align: center;
  margin: 0 0 10px;
}
.page-id-53 .pan-chart-next__lead {
  text-align: center;
  color: #33404f;
  font-size: 14px;
  margin: 0 0 32px;
}
.page-id-53 .pan-chart-next__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.page-id-53 .pan-chart-next-card {
  background: #fff;
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
  box-shadow: 0 3px 10px rgba(13, 24, 42, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-id-53 .pan-chart-next-card__character {
  width: 100%;
  height: 140px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 14px;
}
.page-id-53 .pan-chart-next-card__character img {
  max-width: 100%;
  max-height: 140px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.page-id-53 .pan-chart-next-card__character--icon {
  font-size: 56px;
  line-height: 1;
  height: 140px;
  align-items: center;
}
.page-id-53 .pan-chart-next-card__title {
  font-size: 16px;
  font-weight: 800;
  color: #0D182A;
  margin: 0 0 8px;
}
.page-id-53 .pan-chart-next-card__text {
  font-size: 13px;
  line-height: 1.7;
  color: #4d5b6b;
  margin: 0 0 18px;
}
.page-id-53 .pan-chart-next-card__cta {
  margin: auto 0 0;
}
.page-id-53 .pan-chart-next-card__cta-link {
  display: inline-block;
  padding: 10px 26px;
  background-color: #0D182A;
  color: #fff;
  border-radius: 22px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.page-id-53 .pan-chart-next-card__cta-link:hover {
  background-color: #1a2c47;
}
@media screen and (max-width: 980px) {
  .page-id-53 .pan-chart-next__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .page-id-53 .pan-chart-next-card--protect {
    grid-column: 1 / -1;
    max-width: 360px;
    margin: 0 auto;
  }
}
@media screen and (max-width: 782px) {
  .page-id-53 .pan-chart-next {
    padding: 36px 0 40px;
  }
  .page-id-53 .pan-chart-next__heading {
    font-size: 21px;
    padding: 0 16px;
  }
  .page-id-53 .pan-chart-next__lead {
    padding: 0 16px;
    font-size: 13px;
    margin-bottom: 20px;
  }
  .page-id-53 .pan-chart-next__grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 16px;
  }
  .page-id-53 .pan-chart-next-card--protect {
    grid-column: auto;
    max-width: none;
  }
  .page-id-53 .pan-chart-next-card {
    padding: 24px 20px;
  }
  .page-id-53 .pan-chart-next-card__cta-link {
    padding: 12px 30px;
    font-size: 14px;
  }
}


/* ============================================================
   /protect-assets/（Page ID 52）「資産を守る」 Phase 2
   生活防衛司令室ヒーロー実装

   【全幅化・サイドバー非表示】
   /learn/（page-id-51）・/chart/（page-id-53）Phase 2で確立した
   手法をそのまま踏襲。.l-mainContentの実幅はSWELL標準の
   width:calc(100% - var(--swl-sidebar_width) - var(--swl-sidebar_margin))
   という計算式になっており、page-id-52限定でこの2変数を0に上書きする
   ことで結果が自動的に100%になる。#sidebarはdisplay:noneで非表示にし、
   --article_sizeも1200pxへ拡張する。functions.phpは変更していない。
   他ページのsidebar関連変数・#sidebar表示には一切影響しない
   （.page-id-52（bodyタグ自体ではなく#body_wrap側）限定のスコープのため）。
   ============================================================ */
.page-id-52 {
  --article_size: 1200px;
  --swl-sidebar_width: 0px;
  --swl-sidebar_margin: 0px;
}
.page-id-52 #sidebar {
  display: none;
}

.page-id-52 .protect-band {
  position: relative;
  width: 100%;
}
.page-id-52 .protect-band__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 782px) {
  .page-id-52 .protect-band__inner {
    padding: 0 16px;
  }
}

/* ヒーロー：生活防衛司令室 */
.page-id-52 .protect-hero {
  background-image: linear-gradient(135deg, rgba(13, 24, 42, 0.72) 0%, rgba(13, 24, 42, 0.5) 55%, rgba(13, 24, 42, 0.28) 100%), url('https://shisan-boueitai.com/wp-content/themes/swell_child/assets/images/backgrounds/web-bg-life-defense-command-room-v1-web-v1-1600x900.jpg');
  background-size: cover;
  background-position: center;
  padding: 64px 0;
}
.page-id-52 .protect-hero__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 320px;
}
.page-id-52 .protect-hero__text {
  flex: 1 1 55%;
  color: #fff;
}
.page-id-52 .protect-hero__title {
  font-size: 40px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 14px;
  line-height: 1.2;
}
.page-id-52 .protect-hero__copy {
  font-size: 19px;
  font-weight: 700;
  color: #FFC107;
  margin: 0 0 10px;
}
.page-id-52 .protect-hero__lead {
  font-size: 14px;
  line-height: 1.8;
  color: #e7ecf3;
  max-width: 480px;
  margin: 0;
}
.page-id-52 .protect-hero__character {
  flex: 0 0 260px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.page-id-52 .protect-hero__character img {
  max-width: 100%;
  max-height: 320px;
  width: auto;
  height: auto;
  display: block;
}
@media screen and (max-width: 782px) {
  .page-id-52 .protect-hero {
    padding: 40px 0;
    background-position: 70% center;
  }
  .page-id-52 .protect-hero__inner {
    flex-direction: column;
    text-align: center;
    min-height: 0;
    gap: 20px;
  }
  .page-id-52 .protect-hero__text {
    flex: none;
  }
  .page-id-52 .protect-hero__title {
    font-size: 28px;
  }
  .page-id-52 .protect-hero__lead {
    margin-left: auto;
    margin-right: auto;
  }
  .page-id-52 .protect-hero__character {
    flex: none;
  }
  .page-id-52 .protect-hero__character img {
    max-height: 220px;
  }
}

/* ============================================================
   /protect-assets/（Page ID 52）「資産を守る」 Phase 3
   新隊長差し替え＋4本柱カード実装

   隊長画像はcaptain-01-guide-hero-web-v2.png（目の透過不具合修正版の
   captain-01-guide.pngから再生成）へ差し替え。ヒーロー自体のCSSは
   Phase 2のものをそのまま使用し、画像URLのみpost_content側で変更。

   4本柱セクションは新規追加。他ページ・他セクションへの影響を避けるため
   .page-id-52スコープ内に閉じている（Phase 2で判明したSWELLの構造上、
   ページ固有クラスは<body>ではなく#body_wrap側につくため、
   bodyセレクタは付けない）。
   ============================================================ */

/* 4つの視点セクション */
.page-id-52 .protect-fields {
  background: #f7f9fc;
  padding: 56px 0;
}
.page-id-52 .protect-fields__head {
  text-align: center;
  margin: 0 0 32px;
}
.page-id-52 .protect-fields__heading {
  margin: 0 0 12px;
}
.page-id-52 .protect-fields__lead {
  font-size: 14px;
  line-height: 1.8;
  color: #4a5568;
  margin: 0;
}
.page-id-52 .protect-fields__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.page-id-52 .protect-field-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(13, 24, 42, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.page-id-52 .protect-field-card__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 900 / 506;
  overflow: hidden;
  background: #eef4fb;
}
.page-id-52 .protect-field-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.page-id-52 .protect-field-card__body {
  padding: 18px 18px 22px;
}
.page-id-52 .protect-field-card__icon {
  display: block;
  font-size: 26px;
  line-height: 1;
  margin: 0 0 8px;
}
.page-id-52 .protect-field-card__title {
  font-size: 16px;
  font-weight: 700;
  color: #0d182a;
  margin: 0 0 8px;
}
.page-id-52 .protect-field-card__desc {
  font-size: 13px;
  line-height: 1.75;
  color: #4a5568;
  margin: 0;
}
@media screen and (max-width: 980px) {
  .page-id-52 .protect-fields__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}
@media screen and (max-width: 782px) {
  .page-id-52 .protect-fields {
    padding: 40px 0;
  }
  .page-id-52 .protect-fields__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .page-id-52 .protect-fields__head {
    margin-bottom: 24px;
  }
}

/* ============================================================
   /protect-assets/（Page ID 52）「資産を守る」 Phase 4 FINAL
   資産防衛隊全体への導線（team集合＋3CTA）

   /learn/(page-id-51)・/chart/(page-id-53)の「次はどこへ行く？」
   セクションと同じ設計言語（白カード・角丸16px・薄い影・
   ナビー系ボタン）を踏襲しつつ、カード全体をクリック可能な
   1つの<a>要素にしている点のみ異なる（STEP9要件）。
   .page-id-52スコープのみ。他ページへ影響しない。
   ============================================================ */
.page-id-52 .protect-network {
  background: #eef2f7;
  padding: 56px 0 64px;
}
.page-id-52 .protect-network__visual {
  text-align: center;
  margin: 0 0 28px;
}
.page-id-52 .protect-network__visual img {
  max-width: 100%;
  width: 560px;
  height: auto;
  display: inline-block;
}
.page-id-52 .protect-network__head {
  text-align: center;
  margin: 0 0 32px;
}
.page-id-52 .protect-network__heading {
  margin: 0 0 10px;
}
.page-id-52 .protect-network__lead {
  font-size: 14px;
  line-height: 1.8;
  color: #4a5568;
  margin: 0;
}
.page-id-52 .protect-network__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.page-id-52 .protect-network-card {
  background: #fff;
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
  box-shadow: 0 3px 10px rgba(13, 24, 42, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.page-id-52 .protect-network-card:hover,
.page-id-52 .protect-network-card:focus-visible {
  box-shadow: 0 6px 18px rgba(13, 24, 42, 0.14);
  transform: translateY(-2px);
}
.page-id-52 .protect-network-card__icon {
  display: block;
  font-size: 40px;
  line-height: 1;
  margin: 0 0 14px;
}
.page-id-52 .protect-network-card__title {
  font-size: 16px;
  font-weight: 800;
  color: #0D182A;
  margin: 0 0 8px;
}
.page-id-52 .protect-network-card__text {
  font-size: 13px;
  line-height: 1.7;
  color: #4d5b6b;
  margin: 0 0 18px;
}
.page-id-52 .protect-network-card__cta {
  display: inline-block;
  padding: 10px 26px;
  background-color: #0D182A;
  color: #fff;
  border-radius: 22px;
  font-size: 13px;
  font-weight: 700;
  margin-top: auto;
}
.page-id-52 .protect-network-card:hover .protect-network-card__cta,
.page-id-52 .protect-network-card:focus-visible .protect-network-card__cta {
  background-color: #1a2c47;
}
@media screen and (max-width: 980px) {
  .page-id-52 .protect-network__visual img {
    width: 440px;
  }
  .page-id-52 .protect-network__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .page-id-52 .protect-network-card:last-child {
    grid-column: 1 / -1;
    max-width: 360px;
    margin: 0 auto;
  }
}
@media screen and (max-width: 782px) {
  .page-id-52 .protect-network {
    padding: 36px 0 40px;
  }
  .page-id-52 .protect-network__visual {
    margin-bottom: 20px;
  }
  .page-id-52 .protect-network__visual img {
    width: 280px;
  }
  .page-id-52 .protect-network__heading {
    font-size: 21px;
    padding: 0 16px;
  }
  .page-id-52 .protect-network__lead {
    padding: 0 16px;
  }
  .page-id-52 .protect-network__grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 16px;
  }
  .page-id-52 .protect-network-card:last-child {
    grid-column: auto;
    max-width: none;
  }
  .page-id-52 .protect-network-card {
    padding: 24px 20px;
  }
}

/* ============================================================
   「企業を分析する」（Page ID 47）Phase 2
   全幅化＋企業分析指令室ヒーロー実装

   【全幅化・サイドバー非表示】
   /learn/・/chart/・/protect-assets/で確立した手法をそのまま踏襲。
   .l-mainContentの実幅はSWELL標準のwidth:calc(100% -
   var(--swl-sidebar_width) - var(--swl-sidebar_margin))という計算式に
   なっており、page-id-47限定でこの2変数を0に上書きすることで結果が
   自動的に100%になる。#sidebarはdisplay:noneで非表示にし、
   --article_sizeも1200pxへ拡張する。functions.phpは変更していない。
   SWELLは実際にはページ固有クラスを<body>タグ自体ではなく内側の
   #body_wrap divに付与する構造であるため(Page51/52/53で確認済み)、
   bodyセレクタは付けず.page-id-47のみでスコープする。
   他ページのsidebar関連変数・#sidebar表示には一切影響しない。
   ============================================================ */
.page-id-47 {
  --article_size: 1200px;
  --swl-sidebar_width: 0px;
  --swl-sidebar_margin: 0px;
}
.page-id-47 #sidebar {
  display: none;
}

.page-id-47 .company-band {
  position: relative;
  width: 100%;
}
.page-id-47 .company-band__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 782px) {
  .page-id-47 .company-band__inner {
    padding: 0 16px;
  }
}

/* ヒーロー：企業分析指令室 */
.page-id-47 .company-hero {
  background-image: linear-gradient(135deg, rgba(13, 24, 42, 0.68) 0%, rgba(13, 24, 42, 0.42) 55%, rgba(13, 24, 42, 0.22) 100%), url('https://shisan-boueitai.com/wp-content/themes/swell_child/assets/images/backgrounds/web-bg-company-analysis-command-room-v1-web-v1-1600x900.jpg');
  background-size: cover;
  background-position: center;
  padding: 64px 0;
}
.page-id-47 .company-hero__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 480px;
}
.page-id-47 .company-hero__text {
  flex: 1 1 55%;
  color: #fff;
}
.page-id-47 .company-hero__title {
  font-size: 40px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 14px;
  line-height: 1.2;
}
.page-id-47 .company-hero__copy {
  font-size: 19px;
  font-weight: 700;
  color: #FFC107;
  margin: 0 0 10px;
}
.page-id-47 .company-hero__lead {
  font-size: 14px;
  line-height: 1.8;
  color: #e7ecf3;
  max-width: 480px;
  margin: 0;
}
/* Phase 2.1: 全身立ち絵(324x900)を頭〜上半身のみのクロップ画像
   (captain-05-thinking-upper-hero-web-v2.png, 528x704)へ差し替え。
   全身表示時はmax-height制約により実効幅が約115pxまで縮んでいたため、
   上半身クロップ(縦横比0.75)にすることで同じ高さでも大幅に幅広く
   表示できるようにした。align-self:flex-endでヒーロー下端に接地させ、
   下端が多少切れても顔・ヘルメットは常に全体表示される。 */
.page-id-47 .company-hero__character {
  flex: 0 0 380px;
  align-self: flex-end;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.page-id-47 .company-hero__character img {
  max-width: 100%;
  max-height: 480px;
  width: auto;
  height: auto;
  display: block;
}
@media screen and (max-width: 782px) {
  .page-id-47 .company-hero {
    padding: 40px 0;
    background-position: 65% center;
  }
  .page-id-47 .company-hero__inner {
    flex-direction: column;
    text-align: center;
    min-height: 0;
    gap: 20px;
  }
  .page-id-47 .company-hero__text {
    flex: none;
  }
  .page-id-47 .company-hero__title {
    font-size: 28px;
  }
  .page-id-47 .company-hero__lead {
    margin-left: auto;
    margin-right: auto;
  }
  .page-id-47 .company-hero__character {
    flex: none;
    align-self: center;
  }
  .page-id-47 .company-hero__character img {
    max-height: 220px;
  }
}

/* 既存3導線ブロック(wp:paragraph + wp:loos/box-menu)はPhase 2では
   HTML構造を変更せず、--article_size修正により自動的に1200px幅で
   表示される(.l-articleのmax-width経由)。追加CSSは不要。
   カードデザイン強化はPhase 4で行う。 */

/* ============================================================
   「企業を分析する」（Page ID 47）Phase 3
   「企業分析でわかること」＋「企業分析の基本的な流れ」実装

   SWELL標準の見出し2装飾(.post_content h2:where(...){
   background:var(--color_htag);...})への対応：新規H2はキャラクター
   等を避けるためのpadding-rightを親要素へ設定しておらず、width:100%を
   明示してセクション幅いっぱいに紺色背景が連続するようにしている
   (/learn/ Phase W1.3の教訓を踏襲)。
   .page-id-47スコープのみ。ヒーロー・既存3導線のCSSは無変更。
   ============================================================ */

/* セクション①：企業分析でわかること */
.page-id-47 .company-analysis-overview {
  background: #f7fafd;
  padding: 56px 0;
}
.page-id-47 .company-analysis-overview__heading {
  width: 100%;
  text-align: center;
  margin: 0 0 12px;
}
.page-id-47 .company-analysis-overview__lead {
  text-align: center;
  font-size: 14px;
  line-height: 1.8;
  color: #4a5568;
  margin: 0 0 36px;
}
.page-id-47 .company-analysis-overview__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.page-id-47 .company-analysis-overview__card {
  background: #fff;
  border: 1px solid #e6ebf2;
  border-radius: 14px;
  box-shadow: 0 3px 10px rgba(13, 24, 42, 0.05);
  padding: 28px 22px 24px;
  display: flex;
  flex-direction: column;
}
.page-id-47 .company-analysis-overview__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: #eef4fb;
  font-size: 22px;
  line-height: 1;
  margin: 0 0 16px;
}
.page-id-47 .company-analysis-overview__title {
  font-size: 16px;
  font-weight: 800;
  color: #0D182A;
  margin: 0 0 8px;
}
.page-id-47 .company-analysis-overview__desc {
  font-size: 13px;
  line-height: 1.75;
  color: #4a5568;
  margin: 0 0 16px;
  flex: 1 0 auto;
}
.page-id-47 .company-analysis-overview__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}
.page-id-47 .company-analysis-overview__tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  color: #8a6d00;
  background: #FFF6DA;
  border: 1px solid #F5DE8C;
  border-radius: 12px;
  padding: 3px 10px;
  white-space: nowrap;
}
@media screen and (max-width: 980px) {
  .page-id-47 .company-analysis-overview__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 782px) {
  .page-id-47 .company-analysis-overview {
    padding: 40px 0;
  }
  .page-id-47 .company-analysis-overview__heading {
    font-size: 21px;
    padding: 0 16px;
  }
  .page-id-47 .company-analysis-overview__lead {
    padding: 0 16px;
    font-size: 13px;
    margin-bottom: 24px;
  }
  .page-id-47 .company-analysis-overview__grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 16px;
  }
}

/* セクション②：企業分析の基本的な流れ */
.page-id-47 .company-analysis-flow {
  background: #eef2f7;
  padding: 56px 0 64px;
}
.page-id-47 .company-analysis-flow__heading {
  width: 100%;
  text-align: center;
  margin: 0 0 12px;
}
.page-id-47 .company-analysis-flow__lead {
  text-align: center;
  font-size: 14px;
  line-height: 1.8;
  color: #4a5568;
  margin: 0 0 40px;
}
.page-id-47 .company-analysis-flow__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.page-id-47 .company-analysis-flow__step {
  position: relative;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 3px 10px rgba(13, 24, 42, 0.06);
  padding: 24px 20px;
}
.page-id-47 .company-analysis-flow__step:not(:last-child)::after {
  content: "\2192";
  position: absolute;
  top: 50%;
  right: -26px;
  transform: translateY(-50%);
  font-size: 18px;
  line-height: 1;
  color: #9fb3c8;
}
.page-id-47 .company-analysis-flow__num {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  color: #fff;
  background: #0D182A;
  border-radius: 12px;
  padding: 3px 12px;
  margin: 0 0 12px;
}
.page-id-47 .company-analysis-flow__title {
  font-size: 16px;
  font-weight: 800;
  color: #0D182A;
  margin: 0 0 8px;
}
.page-id-47 .company-analysis-flow__desc {
  font-size: 13px;
  line-height: 1.75;
  color: #4a5568;
  margin: 0;
}
@media screen and (max-width: 980px) {
  .page-id-47 .company-analysis-flow__grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 40px;
  }
  .page-id-47 .company-analysis-flow__step::after {
    display: none;
  }
}
@media screen and (max-width: 782px) {
  .page-id-47 .company-analysis-flow {
    padding: 40px 0;
  }
  .page-id-47 .company-analysis-flow__heading {
    font-size: 21px;
    padding: 0 16px;
  }
  .page-id-47 .company-analysis-flow__lead {
    padding: 0 16px;
    font-size: 13px;
    margin-bottom: 28px;
  }
  .page-id-47 .company-analysis-flow__grid {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0 16px;
  }
  .page-id-47 .company-analysis-flow__step {
    margin-bottom: 28px;
  }
  .page-id-47 .company-analysis-flow__step:not(:last-child)::after {
    content: "\2193";
    display: block;
    position: static;
    transform: none;
    text-align: center;
    margin-top: 16px;
    font-size: 20px;
  }
}

/* ============================================================
   「企業を分析する」（Page ID 47）Phase 4 FINAL
   既存3導線強化＋最下部CTA＋レスポンシブ最終調整

   3導線は既存のSWELL swell-block-box-menuブロックのHTML構造・
   リンク・画像を維持したまま、Page47限定のCSSで見た目を強化する
   方式(STEP7の案A)を採用。ブロックに新規クラス`.company-analysis-main`
   を追加しているが、既存のswell-block-box-menu*クラスは一切変更して
   いないため、他ページの同ブロックへは影響しない。
   .page-id-47スコープのみ。
   ============================================================ */

/* 見出し：メインコンテンツから探す */
.page-id-47 .company-analysis-main-head {
  background: #fff;
  padding: 56px 0 8px;
}
.page-id-47 .company-analysis-main-head__heading {
  width: 100%;
  text-align: center;
  margin: 0 0 12px;
}
.page-id-47 .company-analysis-main-head__lead {
  text-align: center;
  font-size: 14px;
  line-height: 1.8;
  color: #4a5568;
  margin: 0 0 40px;
}

/* 既存box-menuブロックの幅を他セクションと揃える */
.page-id-47 .swell-block-box-menu.company-analysis-main {
  max-width: 1200px;
  margin: 0 auto 64px;
  padding: 0 24px;
  box-sizing: border-box;
}
@media screen and (max-width: 782px) {
  .page-id-47 .swell-block-box-menu.company-analysis-main {
    padding: 0 16px;
    margin-bottom: 40px;
  }
}

/* カード強化 */
.page-id-47 .company-analysis-main .swell-block-box-menu__item {
  background: #fff;
  border: 1px solid #e6ebf2;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(13, 24, 42, 0.06);
  transition: box-shadow .2s ease, transform .2s ease;
}
.page-id-47 .company-analysis-main .swell-block-box-menu__item:hover {
  box-shadow: 0 10px 22px rgba(13, 24, 42, 0.14);
  transform: translateY(-3px);
}
.page-id-47 .company-analysis-main .swell-block-box-menu__link {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  height: 100%;
  padding: 0;
  text-decoration: none;
  color: inherit;
}
.page-id-47 .company-analysis-main .swell-block-box-menu__link img {
  width: 100%;
  aspect-ratio: 800 / 450;
  object-fit: cover;
  display: block;
  margin: 0;
  border-radius: 0;
}
.page-id-47 .company-analysis-main .swell-block-box-menu__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 20px 20px 24px;
  flex: 1;
}
.page-id-47 .company-analysis-main__label {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  color: #8a6d00;
  background: #FFF6DA;
  border: 1px solid #F5DE8C;
  border-radius: 12px;
  padding: 3px 10px;
  margin: 0 0 10px;
}
.page-id-47 .company-analysis-main__title {
  font-size: 16px;
  font-weight: 800;
  color: #0D182A;
  margin: 0 0 8px;
  line-height: 1.4;
}
.page-id-47 .company-analysis-main__desc {
  display: block;
  font-size: 13px;
  line-height: 1.75;
  color: #4a5568;
}
/* 列数の切り替え自体は既存ブロック(colPC:3/colTab:1/colMobile:1)の
   SWELL標準レスポンシブ機構にそのまま委ねる(今回変更しない)。
   ここではカードの縦積み時にも余白が崩れないよう最小限だけ補強する。 */
.page-id-47 .company-analysis-main .swell-block-box-menu__item {
  margin-bottom: 20px;
}

/* 最下部CTA */
.page-id-47 .company-analysis-final-cta {
  background: #16233a;
  padding: 56px 0;
}
.page-id-47 .company-analysis-final-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 320px;
}
.page-id-47 .company-analysis-final-cta__content {
  flex: 1 1 55%;
  color: #fff;
}
.page-id-47 .company-analysis-final-cta__title {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  line-height: 1.4;
  margin: 0 0 14px;
}
.page-id-47 .company-analysis-final-cta__text {
  font-size: 14px;
  line-height: 1.8;
  color: #d7dee8;
  max-width: 460px;
  margin: 0 0 24px;
}
.page-id-47 .company-analysis-final-cta__button {
  display: inline-block;
  background: #FFC107;
  color: #16233a;
  font-size: 16px;
  font-weight: 800;
  padding: 14px 32px;
  border-radius: 26px;
  text-decoration: none;
  transition: background-color .2s ease;
}
.page-id-47 .company-analysis-final-cta__button:hover {
  background: #ffcf3d;
}
.page-id-47 .company-analysis-final-cta__character {
  flex: 0 0 260px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.page-id-47 .company-analysis-final-cta__character img {
  max-width: 100%;
  max-height: 320px;
  width: auto;
  height: auto;
  display: block;
}
@media screen and (max-width: 782px) {
  .page-id-47 .company-analysis-final-cta {
    padding: 40px 0;
  }
  .page-id-47 .company-analysis-final-cta__inner {
    flex-direction: column;
    text-align: center;
    min-height: 0;
    gap: 20px;
  }
  .page-id-47 .company-analysis-final-cta__content {
    flex: none;
  }
  .page-id-47 .company-analysis-final-cta__title {
    font-size: 22px;
  }
  .page-id-47 .company-analysis-final-cta__text {
    margin-left: auto;
    margin-right: auto;
  }
  .page-id-47 .company-analysis-final-cta__character {
    flex: none;
  }
  .page-id-47 .company-analysis-final-cta__character img {
    max-height: 220px;
  }
}

/* ============================================================
   「企業を分析する」（Page ID 47）最終追加
   「次はどこへ行く？」共通ナビ

   /learn/(page-id-51 .pen-next-steps)・/chart/(page-id-53
   .pan-chart-next)で確立済みの共通ナビデザインをそのまま踏襲し、
   Page47向けに新規クラス名で実装した(既存クラスは一切変更していない
   ため他ページへ影響しない)。「メインコンテンツから探す」(企業分析
   部門内の深掘り導線)とは役割が異なり、こちらは資産防衛隊の
   別部門(ペン隊員/パン隊員/資産防衛)へ移動するための導線。
   .page-id-47スコープのみ。
   ============================================================ */
.page-id-47 .company-analysis-next {
  background: #eef2f7;
  padding: 56px 0 64px;
}
.page-id-47 .company-analysis-next__heading {
  width: 100%;
  text-align: center;
  margin: 0 0 10px;
}
.page-id-47 .company-analysis-next__lead {
  text-align: center;
  color: #33404f;
  font-size: 14px;
  margin: 0 0 32px;
}
.page-id-47 .company-analysis-next__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.page-id-47 .company-analysis-next-card {
  background: #fff;
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
  box-shadow: 0 3px 10px rgba(13, 24, 42, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-id-47 .company-analysis-next-card__character {
  width: 100%;
  height: 140px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 14px;
}
.page-id-47 .company-analysis-next-card__character img {
  max-width: 100%;
  max-height: 140px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
.page-id-47 .company-analysis-next-card__character--icon {
  font-size: 56px;
  line-height: 1;
  height: 140px;
  align-items: center;
}
.page-id-47 .company-analysis-next-card__title {
  font-size: 16px;
  font-weight: 800;
  color: #0D182A;
  margin: 0 0 8px;
}
.page-id-47 .company-analysis-next-card__text {
  font-size: 13px;
  line-height: 1.7;
  color: #4d5b6b;
  margin: 0 0 18px;
}
.page-id-47 .company-analysis-next-card__cta {
  margin: auto 0 0;
}
.page-id-47 .company-analysis-next-card__cta-link {
  display: inline-block;
  padding: 10px 26px;
  background-color: #0D182A;
  color: #fff;
  border-radius: 22px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.page-id-47 .company-analysis-next-card__cta-link:hover {
  background-color: #1a2c47;
}
@media screen and (max-width: 980px) {
  .page-id-47 .company-analysis-next__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .page-id-47 .company-analysis-next-card--protect {
    grid-column: 1 / -1;
    max-width: 360px;
    margin: 0 auto;
  }
}
@media screen and (max-width: 782px) {
  .page-id-47 .company-analysis-next {
    padding: 36px 0 40px;
  }
  .page-id-47 .company-analysis-next__heading {
    font-size: 21px;
    padding: 0 16px;
  }
  .page-id-47 .company-analysis-next__lead {
    padding: 0 16px;
    font-size: 13px;
    margin-bottom: 20px;
  }
  .page-id-47 .company-analysis-next__grid {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 0 16px;
  }
  .page-id-47 .company-analysis-next-card--protect {
    grid-column: auto;
    max-width: none;
  }
  .page-id-47 .company-analysis-next-card {
    padding: 24px 20px;
  }
  .page-id-47 .company-analysis-next-card__cta-link {
    padding: 12px 30px;
    font-size: 14px;
  }
}


/* ============================================================
   2026-09-28 パン隊員のデイトレ道場 基盤（追記のみ・既存ルールは変更しない）
   1) /chart/（page-id-53）への道場入口 .pan-chart-dojo*（6STEPと新しい分析の間）
   2) 道場専用ページ /chart/daytrade-dojo/（page-id-526）.pan-dojo-*
   3) 戦績ブログパーツ（ID525）.pan-dojo-record*
   サイドバー非表示は/chart/と同じCSS限定の手法（functions.php不使用）。
   ロールバック：この区切りコメントから末尾までを削除すれば元に戻る。
   ============================================================ */

/* ---- 1) /chart/ 道場入口 ---- */
.page-id-53 .pan-chart-dojo {
  background: #f8f3ea;
  padding: 56px 0;
}
.page-id-53 .pan-chart-dojo__heading {
  width: 100%;
  margin: 0 0 24px;
}
.page-id-53 .pan-chart-dojo__grid {
  display: grid;
  grid-template-columns: 56% 1fr;
  gap: 32px;
  align-items: center;
}
.page-id-53 .pan-chart-dojo__visual {
  margin: 0;
}
.page-id-53 .pan-chart-dojo__visual a {
  display: block;
}
.page-id-53 .pan-chart-dojo__visual img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(43, 33, 24, 0.18);
}
.page-id-53 .pan-chart-dojo__copy {
  font-size: 18px;
  font-weight: 800;
  line-height: 1.6;
  color: #0D182A;
  margin: 0 0 12px;
}
.page-id-53 .pan-chart-dojo__text {
  font-size: 14px;
  line-height: 1.9;
  color: #33404f;
  margin: 0 0 14px;
}
.page-id-53 .pan-chart-dojo__points {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.page-id-53 .pan-chart-dojo__point {
  font-size: 12px;
  font-weight: 700;
  color: #5b3a1e;
  background: #fff;
  border: 1px solid #e3d5bd;
  border-radius: 999px;
  padding: 4px 12px;
  margin: 0;
}
.page-id-53 .pan-chart-dojo__cta {
  margin: 0 0 10px;
}
.page-id-53 .pan-chart-dojo__cta-link {
  display: inline-block;
  padding: 12px 32px;
  background-color: #0D182A;
  color: #fff;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.page-id-53 .pan-chart-dojo__cta-link:hover {
  background-color: #1a2c47;
  color: #fff;
}
.page-id-53 .pan-chart-dojo__note {
  font-size: 12px;
  color: #6b5a47;
  margin: 0;
}
@media screen and (max-width: 782px) {
  .page-id-53 .pan-chart-dojo {
    padding: 36px 0;
  }
  .page-id-53 .pan-chart-dojo__heading {
    font-size: 21px;
    margin-bottom: 18px;
  }
  .page-id-53 .pan-chart-dojo__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .page-id-53 .pan-chart-dojo__copy {
    font-size: 16px;
  }
  .page-id-53 .pan-chart-dojo__text {
    font-size: 13px;
  }
  .page-id-53 .pan-chart-dojo__cta-link {
    display: block;
    text-align: center;
    padding: 14px 20px;
  }
}

/* ---- 2) 道場専用ページ（page-id-526） ---- */
.page-id-526 {
  --article_size: 1200px;
  --swl-sidebar_width: 0px;
  --swl-sidebar_margin: 0px;
}
.page-id-526 #sidebar {
  display: none;
}
.page-id-526 .pan-dojo-band {
  position: relative;
  width: 100%;
}
.page-id-526 .pan-dojo-band__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}
.page-id-526 .pan-dojo-hero {
  background: #f8f3ea;
  padding: 32px 0 40px;
}
.page-id-526 .pan-dojo-hero__visual {
  margin: 0 0 20px;
}
.page-id-526 .pan-dojo-hero__visual img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(43, 33, 24, 0.2);
}
.page-id-526 .pan-dojo-hero__copy {
  text-align: center;
  font-size: 20px;
  font-weight: 800;
  color: #0D182A;
  margin: 0 0 8px;
}
.page-id-526 .pan-dojo-hero__lead {
  text-align: center;
  font-size: 14px;
  line-height: 1.8;
  color: #33404f;
  max-width: 720px;
  margin: 0 auto;
}
.page-id-526 .pan-dojo-intro,
.page-id-526 .pan-dojo-howto,
.page-id-526 .pan-dojo-stats {
  background: #fff;
  padding: 56px 0 24px;
}
.page-id-526 .pan-dojo-howto {
  padding-bottom: 56px;
}
.page-id-526 .pan-dojo-intro__heading,
.page-id-526 .pan-dojo-stats__heading,
.page-id-526 .pan-dojo-howto__heading,
.page-id-526 .pan-dojo-list__heading,
.page-id-526 .pan-dojo-next__heading {
  width: 100%;
  margin: 0 0 20px;
}
.page-id-526 .pan-dojo-intro__card {
  display: flex;
  gap: 28px;
  align-items: center;
  background: #f7faff;
  border-radius: 16px;
  padding: 28px;
}
.page-id-526 .pan-dojo-intro__character {
  flex: 0 0 150px;
}
.page-id-526 .pan-dojo-intro__character img {
  width: 100%;
  height: auto;
  display: block;
}
.page-id-526 .pan-dojo-intro__body {
  flex: 1 1 auto;
}
.page-id-526 .pan-dojo-intro__text {
  font-size: 14px;
  line-height: 1.9;
  color: #33404f;
  margin: 0 0 14px;
}
.page-id-526 .pan-dojo-intro__roles {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}
.page-id-526 .pan-dojo-intro__role {
  font-size: 13px;
  line-height: 1.8;
  color: #33404f;
  background: #fff;
  border-radius: 10px;
  padding: 10px 14px;
  margin: 0 0 8px;
}
.page-id-526 .pan-dojo-intro__role-name {
  display: inline-block;
  font-weight: 800;
  color: #0D182A;
  margin-right: 10px;
}
.page-id-526 .pan-dojo-intro__risk {
  font-size: 12px;
  line-height: 1.8;
  color: #5a6b7d;
  margin: 0;
}
.page-id-526 .pan-dojo-flow {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.page-id-526 .pan-dojo-flow__step {
  background: #f8f3ea;
  border: 1px solid #e3d5bd;
  border-radius: 12px;
  padding: 14px 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #2b2118;
  margin: 0;
}
.page-id-526 .pan-dojo-flow__num {
  display: block;
  font-size: 12px;
  color: #8a6a44;
  margin-bottom: 4px;
}
.page-id-526 .pan-dojo-howto__lead,
.page-id-526 .pan-dojo-list__lead {
  font-size: 14px;
  line-height: 1.8;
  color: #33404f;
  margin: 0 0 20px;
}
.page-id-526 .pan-dojo-howto__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  counter-reset: dojo-howto;
}
.page-id-526 .pan-dojo-howto__item {
  counter-increment: dojo-howto;
  background: #f7faff;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 13px;
  line-height: 1.7;
  color: #4d5b6b;
  margin: 0;
}
.page-id-526 .pan-dojo-howto__label {
  display: block;
  font-weight: 800;
  color: #0D182A;
  font-size: 14px;
  margin-bottom: 4px;
}
.page-id-526 .pan-dojo-howto__label::before {
  content: counter(dojo-howto) ". ";
  color: #8a6a44;
}
.page-id-526 .pan-dojo-list {
  background: #eef4fb;
  padding: 56px 0 0;
  margin-bottom: 0;
}
.page-id-526 .pan-dojo-band.pan-dojo-stats {
  margin-bottom: 0;
}
.page-id-526 .wp-block-query.pan-dojo-query {
  background: #eef4fb;
  max-width: none;
  margin: 0;
  padding: 0 max(24px, calc((100% - 1152px) / 2)) 56px;
  box-sizing: border-box;
}
.page-id-526 .pan-dojo-query .wp-block-query-no-results {
  text-align: center;
  background: #fff;
  border-radius: 16px;
  padding: 32px 24px;
  box-shadow: 0 3px 10px rgba(13, 24, 42, 0.06);
}
.page-id-526 .pan-dojo-query .wp-block-query-no-results p {
  color: #4d5b6b;
  font-size: 14px;
  margin: 0;
}
.page-id-526 .pan-dojo-query .wp-block-post-template {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.page-id-526 .pan-dojo-query .wp-block-post-template > li {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(13, 24, 42, 0.08);
  padding: 0 0 16px;
  margin: 0;
}
.page-id-526 .pan-dojo-query .wp-block-post-template > li > * {
  padding-left: 16px;
  padding-right: 16px;
}
.page-id-526 .pan-dojo-query .wp-block-post-template > li > .wp-block-post-featured-image {
  padding: 0;
}
.page-id-526 .pan-dojo-next {
  background: #eef2f7;
  padding: 56px 0 64px;
}
.page-id-526 .pan-dojo-next__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 820px;
  margin: 0 auto;
}
.page-id-526 .pan-dojo-next-card {
  background: #fff;
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
  box-shadow: 0 3px 10px rgba(13, 24, 42, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-id-526 .pan-dojo-next-card__character {
  height: 140px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 14px;
}
.page-id-526 .pan-dojo-next-card__character img {
  max-height: 140px;
  width: auto;
  height: auto;
  display: block;
}
.page-id-526 .pan-dojo-next-card__title {
  font-size: 16px;
  font-weight: 800;
  color: #0D182A;
  margin: 0 0 8px;
}
.page-id-526 .pan-dojo-next-card__text {
  font-size: 13px;
  line-height: 1.7;
  color: #4d5b6b;
  margin: 0 0 18px;
}
.page-id-526 .pan-dojo-next-card__cta {
  margin: auto 0 0;
}
.page-id-526 .pan-dojo-next-card__cta-link {
  display: inline-block;
  padding: 10px 26px;
  background-color: #0D182A;
  color: #fff;
  border-radius: 22px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.page-id-526 .pan-dojo-next-card__cta-link:hover {
  background-color: #1a2c47;
  color: #fff;
}
.page-id-526 .pan-dojo-next__disclaimer {
  text-align: center;
  font-size: 12px;
  color: #5a6b7d;
  margin: 28px 0 0;
}
@media screen and (max-width: 980px) {
  .page-id-526 .pan-dojo-howto__list {
    grid-template-columns: repeat(2, 1fr);
  }
  .page-id-526 .pan-dojo-query .wp-block-post-template {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 782px) {
  .page-id-526 .pan-dojo-band__inner {
    padding: 0 16px;
  }
  .page-id-526 .pan-dojo-hero {
    padding: 16px 0 28px;
  }
  .page-id-526 .pan-dojo-hero__visual img {
    border-radius: 10px;
  }
  .page-id-526 .pan-dojo-hero__copy {
    font-size: 17px;
  }
  .page-id-526 .pan-dojo-hero__lead {
    font-size: 13px;
    text-align: left;
  }
  .page-id-526 .pan-dojo-intro,
  .page-id-526 .pan-dojo-howto,
  .page-id-526 .pan-dojo-stats {
    padding: 36px 0 16px;
  }
  .page-id-526 .pan-dojo-howto {
    padding-bottom: 36px;
  }
  .page-id-526 .pan-dojo-intro__heading,
  .page-id-526 .pan-dojo-stats__heading,
  .page-id-526 .pan-dojo-howto__heading,
  .page-id-526 .pan-dojo-list__heading,
  .page-id-526 .pan-dojo-next__heading {
    font-size: 21px;
  }
  .page-id-526 .pan-dojo-intro__card {
    flex-direction: column;
    padding: 20px 16px;
    gap: 12px;
  }
  .page-id-526 .pan-dojo-intro__character {
    flex: none;
    width: 120px;
  }
  .page-id-526 .pan-dojo-flow {
    grid-template-columns: repeat(2, 1fr);
  }
  .page-id-526 .pan-dojo-howto__list {
    grid-template-columns: 1fr;
  }
  .page-id-526 .pan-dojo-list {
    padding-top: 36px;
  }
  .page-id-526 .wp-block-query.pan-dojo-query {
    padding: 0 16px 36px;
  }
  .page-id-526 .pan-dojo-query .wp-block-post-template {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .page-id-526 .pan-dojo-next {
    padding: 36px 0 40px;
  }
  .page-id-526 .pan-dojo-next__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .page-id-526 .pan-dojo-next-card__cta-link {
    padding: 12px 30px;
    font-size: 14px;
  }
}

/* ---- 3) 戦績ブログパーツ（記録簿） ---- */
.pan-dojo-record {
  max-width: 1104px;
  margin: 0 auto 56px;
  background: #fbf8f1;
  border: 2px solid #2b2118;
  border-radius: 6px;
  padding: 24px 28px 20px;
  box-sizing: border-box;
}
.pan-dojo-record__title {
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  font-size: 18px;
  font-weight: 700;
  color: #2b2118;
  text-align: center;
  letter-spacing: 0.2em;
  border-bottom: 1px solid #2b2118;
  padding-bottom: 10px;
  margin: 0 0 16px;
}
.pan-dojo-record__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin: 0;
  border-top: 1px solid #d8c9ae;
  border-left: 1px solid #d8c9ae;
}
.pan-dojo-record__item {
  border-right: 1px solid #d8c9ae;
  border-bottom: 1px solid #d8c9ae;
  padding: 12px 10px;
  text-align: center;
  background: #fff;
}
.pan-dojo-record__item dt {
  font-size: 12px;
  font-weight: 700;
  color: #6b5a47;
  margin: 0 0 6px;
}
.pan-dojo-record__item dd {
  font-size: 18px;
  font-weight: 700;
  color: #2b2118;
  margin: 0;
}
.pan-dojo-record__note {
  font-size: 12px;
  line-height: 1.8;
  color: #5a4a38;
  margin: 14px 0 4px;
}
.pan-dojo-record__updated {
  font-size: 12px;
  color: #8a7a66;
  text-align: right;
  margin: 0;
}
@media screen and (max-width: 782px) {
  .pan-dojo-record {
    margin: 0 16px 36px;
    padding: 18px 14px 14px;
  }
  .pan-dojo-record__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pan-dojo-record__item dd {
    font-size: 16px;
  }
}


/* ============================================================
   2026-09-28 パン隊員のデイトレ道場 追記2（「1戦」の定義カード）
   道場ページ（page-id-526）のみ。既存ルールは変更しない。
   ロールバック：この区切りコメントから末尾までを削除する。
   ============================================================ */
.page-id-526 .pan-dojo-record {
  margin-bottom: 20px;
}
.page-id-526 .pan-dojo-rule {
  background: #fff;
  padding: 0 0 56px;
}
.page-id-526 .pan-dojo-rule__card {
  max-width: 1104px;
  margin: 0 auto;
  background: #f7faff;
  border-left: 4px solid #0D182A;
  border-radius: 0 12px 12px 0;
  padding: 18px 22px;
  box-sizing: border-box;
}
.page-id-526 .pan-dojo-rule__heading {
  font-size: 16px;
  font-weight: 800;
  color: #0D182A;
  margin: 0 0 8px;
}
.page-id-526 .pan-dojo-rule__text {
  font-size: 14px;
  line-height: 1.8;
  color: #33404f;
  margin: 0 0 4px;
}
@media screen and (max-width: 782px) {
  .page-id-526 .pan-dojo-record {
    margin-bottom: 16px;
  }
  .page-id-526 .pan-dojo-rule {
    padding-bottom: 36px;
  }
  .page-id-526 .pan-dojo-rule__card {
    padding: 14px 16px;
  }
  .page-id-526 .pan-dojo-rule__text {
    font-size: 13px;
  }
}


/* ============================================================
   2026-09-29 パン隊員のデイトレ道場 追記3（トレード記録一覧カードのタイトル）
   道場ページ（page-id-526）の一覧（.pan-dojo-query）内だけ、SWELL標準の見出し2装飾を
   外してカード用のタイトル表示にする。他ページ・記事本文の見出しには影響しない。
   ロールバック：この区切りコメントから末尾までを削除する。
   ============================================================ */
.page-id-526 .pan-dojo-query .wp-block-post-title {
  background: none;
  color: #0D182A;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.6;
  padding: 0 16px;
  margin: 14px 0 6px;
  border: none;
  box-shadow: none;
}
.page-id-526 .pan-dojo-query .wp-block-post-title::before,
.page-id-526 .pan-dojo-query .wp-block-post-title::after {
  content: none;
  display: none;
}
.page-id-526 .pan-dojo-query .wp-block-post-title a {
  color: #0D182A;
  text-decoration: none;
}
.page-id-526 .pan-dojo-query .wp-block-post-title a:hover {
  color: #2a5c9e;
  text-decoration: underline;
}
.page-id-526 .pan-dojo-query .wp-block-post-featured-image {
  margin: 0;
}
.page-id-526 .pan-dojo-query .wp-block-post-date {
  font-size: 12px;
  color: #5a6b7d;
  margin: 0 0 6px;
}
.page-id-526 .pan-dojo-query .wp-block-post-excerpt {
  font-size: 13px;
  line-height: 1.7;
  color: #33404f;
  margin: 0;
}
.page-id-526 .pan-dojo-query .wp-block-post-excerpt__excerpt {
  margin: 0;
}