@charset "UTF-8";
/* ==========================================================================
   article.css — O-DINARY 記事詳細（single.php）／記事一覧（archive.php）
   --------------------------------------------------------------------------
   一次資料:
     記事詳細の設計ツリー : pageviews/c4f54e94-bdb7-4f52-9c6b-431d16f36689.json
     一覧・カード・フィルタ: specs/F_media.md §4-3 / §4-4 / §4-9 / §4-11
     BP正本               : specs/_確定事項_ブレークポイント.md
     基盤                 : assets/css/base.css（リセット／トークン／ユーティリティ）

   ブレークポイント規約（base.css §0 と同じ）:
     @media screen and (max-width: 1140px)  ... @small
     @media screen and (max-width:  840px)  ... @tablet
     @media screen and (max-width:  540px)  ... @mobile
     @media screen and (max-width:  320px)  ... @mini
   すべて max-width 単独。ソース順は必ず 1140 → 840 → 540 → 320。
   display の切替は狭い側にも明示的に書く（継承・ソース順に頼らない）。

   base.css が list-style / h* の font-weight / margin をリセットしているため、
   記事本文（.o-article__body）だけは §5 で明示的に戻している。
   ========================================================================== */

/* ==========================================================================
   1. ページ地
   --------------------------------------------------------------------------
   設計ツリーの Base ノード: background #f9fafb / width 100% / height 100%
   背景の浮遊ドット（iframe）が z-index:-1 で敷かれるため、body 側を塗る。
   ========================================================================== */
body.single-post{ background-color: #f9fafb; }

/* ==========================================================================
   2. ヒーロー（キャッチ ＋ O-DINARY ロゴ）
   --------------------------------------------------------------------------
   Section: width 1080px / margin-top 80px / padding 40px 0 / gap 10px 0 / 中央寄せ
   ※ margin-top:80px は固定ヘッダー（--o-header-h）分のオフセットを兼ねている。
     .o-has-fixed-header は併用しないこと（80px が二重に効く）。
   ========================================================================== */
.o-article-hero{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 10px 0;
  width: 100%;
  max-width: 1080px;
  height: auto;
  margin: 80px auto 0;
  padding: 40px 0;
  background: transparent;
}
.o-article-hero__inner{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 15px 0;
  margin: 0 0 30px;
  padding: 0;
}
.o-article-hero__catch{
  width: auto;
  height: auto;
  color: #14314a;
  font-family: var(--s-font-f88553ee);
  font-size: 24px;
  font-weight: 700;  /* 500→700: 細い欧文/和文を1段階上げる（CEO指示 2026-09-01） */
  line-height: normal;
  letter-spacing: 0.08em;
  text-align: left;
}
.o-article-hero__logo{
  flex: none;
  width: 600px;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0 0 25px;
}
@media screen and (max-width: 540px){
  .o-article-hero__catch{ font-size: 12px; }
  .o-article-hero__logo{
    flex: none;
    width: 80%;
    padding: 0;
  }
}

/* ==========================================================================
   3. パンくず
   --------------------------------------------------------------------------
   Section: width 1080px / margin-top 30px / padding 30px 0 / align flex-start
   Box    : row nowrap / center / overflow hidden
   項目   : 11px / 500 / #333 / letter-spacing 0.05em / hover opacity 0.5
   ========================================================================== */
.o-article-breadcrumb-section{
  display: flex;
  /* 設計ツリーの Section は縦並び（alignItems:flex-start＝左寄せ）。
     flex-direction 未指定だと row になり justify-content:center が横に効いて
     中央寄せになっていた（1440実測 x=527／現行 x=180＝記事カードの左端）。2026-09-14 */
  flex-direction: column;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: center;
  width: 100%;
  max-width: 1080px;
  height: auto;
  margin: 30px auto 0;
  padding: 30px 0;
  background: transparent;
}
.o-breadcrumb{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  background: rgba(0,0,0,0.0);
}
.o-breadcrumb__item{
  width: auto;
  height: auto;
  padding: 6px 6px;
  color: #333;
  font-family: var(--s-font-f88553ee);
  font-size: 11px;
  font-weight: 700;  /* 500→700: 細い欧文/和文を1段階上げる（CEO指示 2026-09-01） */
  letter-spacing: 0.05em;
  text-align: center;
}
/* 先頭の HOME だけ左パディングを持たない（設計ツリー実測） */
.o-breadcrumb__item:first-child{ padding: 6px 6px 6px 0; }
a.o-breadcrumb__item:hover{ opacity: 0.5; }
.o-breadcrumb__item--current{ cursor: default; }
.o-breadcrumb__sep{
  display: inline-flex;
  align-items: center;
  color: #333;
  font-size: 12px;
}
.o-breadcrumb__sep svg{ display: block; }
/* 左寄せにすると、枠が画面より狭くなる幅ではパンくずが画面端に貼り付く
   （現行サイトの768実測 x=0）。記事カードの左端＝.o-article-section の
   padding と同じ値を入れて縦のラインを揃える。2026-09-14 */
@media screen and (max-width: 1140px){
  .o-article-breadcrumb-section{ padding: 30px 20px; }
}
@media screen and (max-width: 840px){
  .o-article-breadcrumb-section{ padding: 30px 50px; }
}
@media screen and (max-width: 540px){
  .o-article-breadcrumb-section{
    margin: 0 auto;
    padding: 30px 30px 10px;
  }
  .o-breadcrumb{
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    overflow-x: visible;
    overflow-y: visible;
  }
  .o-breadcrumb__item--current{
    padding: 6px 0 6px;
    text-align: left;
  }
}

/* ==========================================================================
   4. 本体レイアウト（左65% ＋ 右35% sticky）
   ========================================================================== */
.o-article-section{
  width: 100%;
  max-width: 1080px;
  height: auto;
  margin-inline: auto;
  padding: 0 0 50px;
  background: transparent;
}
.o-article-layout{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: center;
  gap: 20px;
  width: auto;
  margin: 0;
  padding: 0;
}
.o-article{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: center;
  gap: 10px;
  flex: none;
  /* 65%+35% に gap 20px を足すと枠（1080px）を20px超え、中央寄せで左右に10pxずつ
     はみ出していた（1440実測 card x=170／枠 x=180。現行は x=180 w=695）。
     gap の半分ずつを両カラムから引いて枠内に収める。2026-09-14 */
  width: calc(65% - 10px);
  padding: 20px 40px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 3px 3px 5px 3px rgba(0,0,0,0.2);
}
.o-article-side{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  gap: 20px;
  flex: none;
  /* .o-article と同じ理由で gap の半分を引く（2026-09-14）。 */
  width: calc(35% - 10px);
  height: auto;
  margin: 0;
  padding: 0;
  /* 設計ツリー実測は top:0。ヘッダーは下スクロールで退避するためこのままでよい。 */
  position: sticky;
  top: 0;
}
@media screen and (max-width: 1140px){
  .o-article-section{ padding: 0 20px 50px; }
  .o-article-layout{ flex-direction: row; flex-wrap: nowrap; }
}
@media screen and (max-width: 840px){
  .o-article-section{ padding: 50px 50px; }
  .o-article-layout{ flex-direction: column; flex-wrap: nowrap; }
  .o-article{ flex: none; width: 100%; }
  .o-article-side{
    flex: none;
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    position: static;
  }
}
@media screen and (max-width: 540px){
  .o-article-section{ padding: 0 20px 50px; }
  .o-article{ padding: 20px 20px; }
}

/* ---- ジャンルバッジ ------------------------------------------------------
   背景色はジャンルごとの色（term meta `color`）を PHP がインラインで当てる。
   TODO: 実値は未取得（F_media §4-11-5）。未設定のあいだは #eeeeee で出る。
   -------------------------------------------------------------------------- */
.o-article__genre{
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  margin: 5px;
  padding: 10px 20px 10px;
  border-radius: 32px;
  color: #082b34;
  font-family: var(--s-font-f88553ee);
  font-size: 15px;
  font-weight: 700;  /* 500→700: 細い欧文/和文を1段階上げる（CEO指示 2026-09-01） */
  text-align: center;
  transition: scale 300ms ease-in-out;
}
.o-article__genre:hover{ scale: 1.1 1.1; }
@media screen and (max-width: 540px){
  .o-article__genre{
    margin: 0;
    font-size: 12px;
  }
}

/* ---- タイトル ------------------------------------------------------------ */
.o-article__title{
  flex: none;
  /* width:100% ＋ 左右 margin 20px だと本文より40px広くなり、右端だけカードの
     padding にはみ出していた（1440実測 w=622／現行 575＝本文幅-40）。
     align-self:stretch にして margin の分だけ内側に収める。2026-09-14 */
  width: auto;
  align-self: stretch;
  height: auto;
  margin: 20px 20px 20px;
  color: #333;
  font-family: var(--s-font-f88553ee);
  font-size: 28px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.05em;
  /* 2行見出しの最終行が1〜2文字だけ落ちるのを均す（非対応ブラウザは無視）。2026-09-14 */
  text-wrap: balance;
  text-align: left;
}
@media screen and (max-width: 840px){
  .o-article__title{ font-size: 36px; }
}
@media screen and (max-width: 540px){
  .o-article__title{
    /* 実測は width:440px。375px 幅では溢れるため max-width として解釈している。 */
    width: 100%;
    max-width: 440px;
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.03em;
  }
}

/* ---- 公開日 ／ 記事作成者 ------------------------------------------------- */
.o-article__meta{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: center;
  gap: 5px;
  padding: 0;
}
.o-article__meta-row{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: center;
  gap: 10px;
  padding: 0;
}
.o-article__meta-label,
.o-article__meta-value{
  width: auto;
  height: auto;
  color: #757575;
  font-family: var(--s-font-f88553ee);
  font-size: 13px;
  font-weight: 500;  /* 400→500: 細い欧文/和文を1段階上げる（CEO指示 2026-09-01） */
  line-height: 1.4;
  text-align: left;
}

/* ---- カバー画像 ---------------------------------------------------------- */
.o-article__cover-wrap{ width: 100%; }
.o-article__cover,
.o-article__cover-img{
  flex: none;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* ==========================================================================
   5. 記事本文（RichText の再現）
   --------------------------------------------------------------------------
   設計ツリー /2/0/0/4 の RichText スタイルをそのまま移植したもの。
   base.css のリセット（list-style:none / h* の font-weight:inherit / margin:0）を
   ここで打ち消している。
   ========================================================================== */
.o-article__body{
  width: 100%;
  height: auto;
  padding: 0;
  color: #212121;
  font-family: var(--s-font-3d9f8c45);
  font-size: 16px;
  font-weight: 500;  /* 400→500: 細い欧文/和文を1段階上げる（CEO指示 2026-09-01） */
  line-height: 1.80;
  letter-spacing: 0.05em;
  text-align: left;
}

.o-article__body p{
  margin: 15px 0 15px 0;
  letter-spacing: 0.05em;
}

/* h2。border-left と、グラデーションを文字に載せる指定。
   --s-color-3cac48cf は linear-gradient のため color: では使えず、
   background-clip: text ＋ text-fill-color: transparent で文字に載せる。 */
.o-article__body h2{
  margin: 20px 0;
  padding: 0 10px 0 10px;
  border-top: 0 solid #0893b7;
  border-right: 0 solid #0893b7;
  border-bottom: 0 solid #0893b7;
  border-left: 5px solid #0893b7;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.4;
  /* 2行見出しの最終行が1〜2文字だけ落ちるのを均す。2026-09-14 */
  text-wrap: balance;
  background: var(--s-color-3cac48cf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* background-clip 非対応環境では単色に落とす */
@supports not ((-webkit-background-clip: text) or (background-clip: text)){
  .o-article__body h2{
    background: none;
    color: #0893b7;
    -webkit-text-fill-color: currentColor;
  }
}

.o-article__body h3{
  font-size: 1.1rem;
  /* STUDIO の RichText 定義は h3 に font-size しか持たないが、現行サイトの実測は
     font-weight:700 / margin:10px 0（375〜1440 全幅で同値）。暫定値（600 /
     20px 0 10px）を実測値に合わせた。2026-09-14 */
  font-weight: 700;
  line-height: 1.5;
  margin: 10px 0;
  text-wrap: balance;
}
.o-article__body h4{
  /* TODO: STUDIO 側に h4 の定義は無い（本文中に32件出現）。実機確認のうえ調整すること。 */
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.5;
  margin: 18px 0 8px;
}

.o-article__body strong{
  padding: 0 0 0 5px;
  color: #082b34;
  font-family: var(--s-font-f88553ee);
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* リストの復活（base.css §2 の申し送り事項） */
.o-article__body ul,
.o-article__body ol{
  margin: 15px 0;
  padding-left: 1.6em;
}
.o-article__body ul{ list-style: disc; }
.o-article__body ol{ list-style: decimal; }
.o-article__body li{ margin: 6px 0; }
/* エディタ出力は <li><p>…</p></li> の入れ子。li 内の p は余白を持たせない */
.o-article__body li > p{ margin: 0; }

/* リンク色は現行サイト実測 #007cff（375〜1440 全幅同値）。#0893b7 は h2 の罫線色を
   流用した推定値だった（設計ツリーの RichText に a の定義は無い）。2026-09-14
   ★2026-09-15 コントラスト調整（CEO決定「直してOK」）: 実測原値 #007cff は白地で
     比 3.94（14px・要 4.5）。記事2本で 24件検出。色相そのままに 8% 暗くした
     派生 var(--o-c-link-blue-d) #0072eb へ（4.56）。tokens.css は元値を持たない
     直値だったため、派生トークン側に原値の出自を書いてある。 */
.o-article__body a{
  color: var(--o-c-link-blue-d);
  text-decoration: underline;
  overflow-wrap: anywhere;
}
.o-article__body a:hover{ opacity: 0.7; }

.o-article__body figure{
  margin: 24px 0;
}
.o-article__body figure img{
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.o-article__body figcaption{
  margin-top: 8px;
  color: #757575;
  font-size: 13px;
  line-height: 1.6;
}
/* エディタが空の figcaption を必ず吐くため、中身が無いものは詰めない */
.o-article__body figcaption:empty{ display: none; }

/* 設計ツリーに定義が無く暫定値だった。現行サイト実測（全幅同値）に合わせる。
   罫線 3px rgba(0,0,0,.15) / padding 10px 15px / 文字は本文と同色。2026-09-14 */
.o-article__body blockquote{
  margin: 20px 0;
  padding: 10px 15px;
  border-left: 3px solid rgba(0,0,0,0.15);
  color: inherit;
}

.o-article__body hr{
  margin: 32px 0;
  border: 0;
  border-top: 1px solid #e0e0e0;
}

/* 表（div[data-type="table"] > table）。横に溢れる場合はラッパ側で送る */
.o-article__body div[data-type="table"]{
  width: 100%;
  margin: 20px 0;
  overflow-x: auto;
}
/* 幅・文字サイズ・罫線は現行サイト実測に合わせた（table width:auto／14px／
   padding 12px／罫線 1px #f2f2f2。375〜1440 全幅同値）。移行時の暫定値
   （width:100%／15px／10px 12px／#e0e0e0）は現行より1段階大きく、7列の表
   （5q69zdpw）が 768/1440 で余計に折り返していた（高さ 748→680 / 694→655）。
   ※375px で「4,500 / 円」と分断されるのは列幅が1px足りないためで、現行も同様に
     折り返す。word-break:keep-all や min-width:max-content は7列の表を 965〜1260px
     まで広げてしまうので採らない（計測済み）。2026-09-14 */
.o-article__body table{
  width: auto;
  border-collapse: collapse;
  font-size: 14px;
}
.o-article__body th,
.o-article__body td{
  padding: 12px;
  border: 1px solid #f2f2f2;
  text-align: left;
  vertical-align: top;
}
.o-article__body th{ background: #f6f6f6; }
.o-article__body td > p,
.o-article__body th > p{ margin: 0; }

@media screen and (max-width: 540px){
  .o-article__body p{
    color: #212121;
    font-size: 15px;
  }
  .o-article__body strong{ letter-spacing: 0.03em; }
}

/* ---- 目次 ----------------------------------------------------------------
   STUDIO は <div data-type="table_of_contents"></div> を置いてクライアント側で
   生成していた（WXRに入っているのは空のdiv）。WP側は inc/article.php の
   ordinary_article_render_toc() が実体に差し替える。
   TODO: 文字色は STUDIO 定義が `color: {{X7mZHYpR}}`（バインド・実値未取得）。
     padding も定義が無い。下記は実機確認までの暫定値。
   -------------------------------------------------------------------------- */
.o-article__toc{
  margin: 30px 0 30px 0;
  padding: 20px 24px;
  border-radius: 8px;
  background: var(--s-color-2c90be8a);
  color: #082b34;
  font-family: var(--s-font-f88553ee);
}
.o-article__toc-title{
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.o-article__toc-list{
  margin: 0;
  padding-left: 1.4em;
  list-style: decimal;
}
.o-article__toc-sub{
  margin: 4px 0 4px;
  padding-left: 1.2em;
  list-style: disc;
}
.o-article__toc-item{
  margin: 4px 0;
  font-size: 15px;
  line-height: 1.6;
}
.o-article__toc-item--sub{ font-size: 14px; }
.o-article__toc a{
  color: inherit;
  text-decoration: none;
}
.o-article__toc a:hover{ text-decoration: underline; }

/* ---- 出典 ----------------------------------------------------------------
   54件中19件に「出典」または「出典（2026年6月 再確認済み）」の h2 セクションがある。
   原稿ではURLが素のテキストで置かれているため、PHP側でリンク化している。
   -------------------------------------------------------------------------- */
.o-article__sources{
  display: block;
  margin-top: 32px;
}
.o-article__sources p{
  font-size: 14px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}
.o-article__sources p:empty{ display: none; }
.o-article__sources a{
  /* 本文リンクと同じ現行実測色。URL はラベルと同じ行に続けると行末でハイフン折れして
     項目ごとに不揃いになるため、1行に落とす。2026-09-14
     色は本文リンクと同じ理由で派生トークンへ（2026-09-15・上の .o-article__body a 参照）。 */
  display: block;
  color: var(--o-c-link-blue-d);
  text-decoration: underline;
  overflow-wrap: anywhere;
}

/* ==========================================================================
   6. サービス紹介ブロック（記事にサービス種別が付いているときだけ描画）
   --------------------------------------------------------------------------
   設計ツリー /2/0/0/5。背景色・見出し・本文・バナー・リンク先は
   service_type の term meta から供給する（inc/article.php の TODO 参照）。
   ========================================================================== */
.o-service-cta{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 0;
}
.o-service-cta__head{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: center;
  gap: 10px;
  margin: 30px 0 0 0;
  padding: 10px;
  border-radius: 12px;
}
.o-service-cta__heading{
  width: auto;
  height: auto;
  color: #082b34;
  font-family: var(--s-font-f88553ee);
  font-size: 28px;
  font-weight: 500;  /* 400→500: 細い欧文/和文を1段階上げる（CEO指示 2026-09-01） */
  line-height: 1.4;
  text-align: left;
}
.o-service-cta__text{
  width: auto;
  height: auto;
  color: #082b34;
  font-family: var(--s-font-f88553ee);
  font-size: 18px;
  font-weight: 500;  /* 400→500: 細い欧文/和文を1段階上げる（CEO指示 2026-09-01） */
  line-height: 1.4;
  text-align: left;
}
.o-service-cta__banner{
  display: block;
  position: relative;
  margin: 10px;
  padding: 0;
  box-shadow: none;
  transition: scale 600ms ease-in-out;
}
.o-service-cta__banner:hover{ scale: 1.05 1.05; }
.o-service-cta__banner img{
  flex: none;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 3px 3px 5px rgba(0,0,0,0.2) inset;
}
.o-service-cta__label{
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  position: absolute;
  right: 0;
  bottom: 26px;
  left: auto;
  top: auto;
  width: 200px;
  height: 50px;
  margin: 0;
  border-radius: 24px 0 0 24px;
  box-shadow: -3px 3px 0 rgba(0,0,0,0.2);
  color: #082b34;
  font-family: var(--s-font-f88553ee);
  font-size: 18px;
  font-weight: 500;  /* 400→500: 細い欧文/和文を1段階上げる（CEO指示 2026-09-01） */
  line-height: 1.4;
  text-align: left;
}
@media screen and (max-width: 840px){
  .o-service-cta__head{ flex: none; width: 100%; }
}
@media screen and (max-width: 540px){
  .o-service-cta__head{ margin: 10px 0 0 0; }
  .o-service-cta__heading{ font-size: 20px; }
  .o-service-cta__text{
    color: #212121;
    font-size: 16px;
  }
  .o-service-cta__banner{ margin: 0; }
  .o-service-cta__banner img{
    border: 1px solid #14314a;
  }
  .o-service-cta__label{
    right: 0;
    bottom: 26px;
    left: auto;
    top: auto;
    width: 159px;
    height: 32px;
    font-size: 16px;
  }
}

/* ==========================================================================
   7. 著者ボックス
   ========================================================================== */
.o-author{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  gap: 20px;
  flex: none;
  width: 100%;
  height: auto;
  margin: 10px;
  padding: 15px;
  border: 0 solid #EEEEEE;
  border-radius: 6px;
  background: #fff2eaff;
}
.o-author__head{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 0;
}
.o-author__head-icon{
  display: inline-flex;
  color: #333333;
  font-size: 24px;
}
.o-author__head-icon svg{ display: block; }
.o-author__head-text{
  width: auto;
  height: auto;
  color: #333333;
  font-family: var(--s-font-f88553ee);
  font-size: 20px;
  font-weight: 500;  /* 400→500: 細い欧文/和文を1段階上げる（CEO指示 2026-09-01） */
  line-height: 1.4;
  text-align: left;
}
.o-author__body{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 0;
  width: 100%;
}
.o-author__profile{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  flex: none;
  width: 30%;
  padding: 0;
}
.o-author__avatar{
  flex: none;
  width: 80px;
  height: 80px;
  margin: 0;
  border-radius: 50%;
  object-fit: cover;
}
.o-author__names{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: none;
  width: 300px;
  max-width: 100%;
  margin: 25px 0 0 0;
}
.o-author__name{
  width: auto;
  height: auto;
  margin: 0 0 10px 0;
  color: #333333;
  font-family: var(--s-font-f88553ee);
  font-size: 14px;
  font-weight: 700;
  text-align: left;
}
.o-author__role{
  width: auto;
  height: auto;
  color: #333333;
  font-family: var(--s-font-f88553ee);
  font-size: 15px;
  font-weight: 500;  /* 400→500: 細い欧文/和文を1段階上げる（CEO指示 2026-09-01） */
  line-height: 1.2;
  text-align: center;
}
.o-author__bio{
  flex: none;
  width: 70%;
  height: auto;
  color: #333333;
  font-family: var(--s-font-f88553ee);
  font-size: 11px;
  font-weight: 500;  /* 400→500: 細い欧文/和文を1段階上げる（CEO指示 2026-09-01） */
  line-height: 1.5;
  text-align: left;
}
@media screen and (max-width: 540px){
  .o-author{
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    align-content: center;
    justify-content: flex-start;
    margin: 0;
    border-radius: 12px;
  }
  .o-author__head{ flex-direction: row; flex-wrap: nowrap; }
  .o-author__body{ flex-direction: column; }
  .o-author__profile{
    flex: none;
    flex-direction: column;
    width: auto;
  }
  .o-author__avatar{ margin: 0; }
  .o-author__names{
    align-items: center;
    align-content: center;
    margin: 9px 0 0 0;
  }
  .o-author__name{
    margin: 0 0 5px 0;
    font-size: 15px;
  }
  .o-author__role{
    font-size: 12px;
    text-align: center;
  }
  .o-author__bio{
    flex: none;
    width: 100%;
  }
}
@media screen and (max-width: 320px){
  .o-author{ margin: 0; }
  .o-author__profile{ flex: none; width: auto; }
}

/* ==========================================================================
   8. 右カラム（広告バナー ／ おすすめ ／ 記事をもっと見る）
   ========================================================================== */
.o-article-side__banner{
  display: block;
  position: relative;
  flex: none;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  border-radius: 12px;
  background: transparent;
  box-shadow: 3px 3px 5px rgba(0,0,0,0.2);
  transition: scale 600ms ease-in-out;
}
.o-article-side__banner:hover{ scale: 1.05 1.05; }
.o-article-side__banner img{
  flex: none;
  width: 100%;
  height: auto;
  box-shadow: 3px 3px 5px rgba(0,0,0,0.2);
}
@media screen and (max-width: 840px){
  .o-article-side__banner{ flex: none; margin: 0; }
}
@media screen and (max-width: 540px){
  .o-article-side__banner{ flex: none; width: 100%; }
}

/* ---- おすすめ記事 -------------------------------------------------------- */
.o-related{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  gap: 20px;
  width: 100%;
  padding: 0;
}
.o-related__title{
  width: auto;
  height: auto;
  padding: 5px 0 5px 10px;
  border-top: 0 solid var(--s-color-96b774ed);
  border-right: 0 solid var(--s-color-96b774ed);
  border-bottom: 0 solid var(--s-color-96b774ed);
  border-left: 3px solid var(--s-color-96b774ed);
  font-family: var(--s-font-f88553ee);
  font-size: 18px;
  font-weight: 700;  /* 500→700: 細い欧文/和文を1段階上げる（CEO指示 2026-09-01） */
  line-height: 1.4;
  text-align: left;
  background: var(--s-color-3cac48cf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)){
  .o-related__title{
    background: none;
    color: #0893b7;
    -webkit-text-fill-color: currentColor;
  }
}
.o-related__list{
  /* 設計ツリーの実測は width:960px。35%カラムの中では成立しないため 100% で解釈している。 */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-content: flex-start;
  justify-content: flex-start;
  width: 100%;
}
.o-related__item{
  width: 100%;
}
.o-related__link{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  flex: none;
  width: 100%;
  height: auto;
  margin: 0 0 10px 0;
  padding: 5px;
  background: #FFFFFF;
}
.o-related__thumb-wrap{
  flex: none;
  width: 80px;
  height: 80px;
}
.o-related__thumb{
  flex: none;
  width: 80px;
  height: 80px;
  border-radius: 4px;
  object-fit: cover;
}
.o-related__text{
  flex: 1;
  margin: 0 0 10px 20px;
  color: #333333;
  font-family: var(--s-font-f88553ee);
  font-size: 16px;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: 0.04em;
  /* 記事タイトルの最終行が1〜2文字だけ落ちるのを均す。2026-09-14 */
  text-wrap: balance;
  text-align: left;
}
@media screen and (max-width: 840px){
  .o-related__title{ font-size: 24px; }
  .o-related__link{
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    margin: 0 15px 30px;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .o-related__thumb-wrap,
  .o-related__thumb{
    flex: none;
    width: 100px;
    height: 100px;
  }
  .o-related__text{
    margin: 0;
    font-size: 20px;
  }
}
@media screen and (max-width: 540px){
  .o-related__title{ font-size: 18px; }
  .o-related__list{ flex: none; margin: 0; width: 100%; }
  .o-related__link{
    margin: 0 0 20px;
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .o-related__thumb-wrap,
  .o-related__thumb{
    flex: none;
    width: 80px;
    height: 80px;
  }
  .o-related__text{ font-size: 14px; }
}

/* ---- 「記事をもっと見る」ボタン ------------------------------------------- */
.o-article-side__more{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  gap: 20px;
  margin: 0;
  padding: 0;
}
.o-more-button{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: none;
  width: auto;
  height: auto;
  margin: 0;
  padding: 8px 30px 8px;
  border: 1px solid #ffffff;
  border-radius: 36px;
  background: var(--s-color-5993f4bc);
  box-shadow: none;
  transition-duration: 300ms;
  transition-property: scale, box-shadow;
}
.o-more-button:hover{
  scale: 1.05 1.05;
  box-shadow: 1px 3px 20px rgba(0, 0, 0, 0.1);
}
.o-more-button__label{
  width: auto;
  height: auto;
  margin: 0;
  color: #ffffff;
  font-family: var(--s-font-3d9f8c45);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.10em;
  text-align: center;
}
.o-more-button__icon{
  display: inline-flex;
  color: #ffffff;
  font-size: 28px;
}
.o-more-button__icon svg{ display: block; }
@media screen and (max-width: 1140px){
  .o-more-button{ display: flex; }
}
@media screen and (max-width: 840px){
  .o-article-side__more{ flex: none; }
  .o-more-button{ display: flex; }
}
@media screen and (max-width: 540px){
  .o-article-side__more{
    align-items: center;
    align-content: center;
    justify-content: center;
    flex: none;
    width: 100%;
    margin: 40px 0 40px 0;
  }
  .o-more-button{
    display: flex;
    flex: none;
    height: 48px;
  }
  .o-more-button__label{ font-size: 18px; }
  .o-more-button__icon{ font-size: 24px; }
}
@media screen and (max-width: 320px){
  .o-more-button{ display: flex; }
}

/* ==========================================================================
   9. 背景の浮遊ドット（sandbox iframe）
   --------------------------------------------------------------------------
   設計ツリー /3。position:fixed / top:0 / left:0 / width:100% / height:100vh /
   z-index:-1 / background:transparent。
   装飾専用なのでポインタは透過させる（base.css の .o-embed--bg と同じ考え方）。
   ========================================================================== */
.o-article-dots{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1;
  flex: none;
  border: 0;
  background: transparent;
  pointer-events: none;
}

/* ==========================================================================
   10. 右下の追従バナー
   --------------------------------------------------------------------------
   設計ツリー /7（type: toggle）。&appear = opacity 0 → 表示（delay 6000ms /
   duration 1600ms）。閉じるボタンで折り畳む。
   データ（ragJIp3t 相当）未投入のあいだは PHP 側で描画自体を止めている。
   ========================================================================== */
.o-floating-banner{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: flex-end;
  position: fixed;
  right: 30px;
  bottom: 0;
  left: auto;
  top: auto;
  flex: none;
  width: 350px;
  height: auto;
  margin: 0;
  padding: 0 0 30px 0;
  border-radius: 0;
  background: transparent;
  z-index: 900;
  opacity: 0;
  animation: o-floating-banner-appear 1600ms ease-in-out 6000ms forwards;
}
@keyframes o-floating-banner-appear{
  from{ opacity: 0; }
  to{ opacity: 1; }
}
@media (prefers-reduced-motion: reduce){
  .o-floating-banner{
    animation: none;
    opacity: 1;
  }
}
.o-floating-banner.is-closed{
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px);
  transition: opacity 300ms ease-in-out, transform 300ms ease-in-out, visibility 0s linear 300ms;
  animation: none;
}
.o-floating-banner__close{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: flex-end;
  position: relative;
  flex: none;
  width: 100%;
  height: 30px;
  margin: 0;
  padding: 0;
  border-radius: 0;
  z-index: 1;
}
.o-floating-banner__close-mark{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  position: absolute;
  right: 11px;
  bottom: -16px;
  left: auto;
  top: auto;
  flex: none;
  width: 35px;
  height: 35px;
  margin: 0;
  padding: 0;
  border: 1px solid #ffffff;
  border-radius: 50%;
  background: #14314a;
  color: #ffffff;
  font-size: 24px;
}
.o-floating-banner__close-mark svg{ display: block; }
.o-floating-banner__link{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex: none;
  width: 100%;
  margin: 0;
  padding: 0;
  border-radius: 8px;
  overflow-x: hidden;
  overflow-y: hidden;
  background: #EEEEEE;
  box-shadow: 10px 10px 10px rgba(0,0,0,0.2);
}
.o-floating-banner__img{
  flex: none;
  width: 100%;
  height: auto;
}
/* PC/SP の出し分け。狭い側にも display を明示する（BP規約 R2） */
.o-floating-banner__img--pc{ display: block; }
.o-floating-banner__img--sp{ display: none; }
@media screen and (max-width: 1140px){
  .o-floating-banner__img--pc{ display: block; }
  .o-floating-banner__img--sp{ display: none; }
}
@media screen and (max-width: 840px){
  .o-floating-banner__img--pc{ display: block; }
  .o-floating-banner__img--sp{ display: none; }
}
@media screen and (max-width: 540px){
  .o-floating-banner{
    right: 0;
    bottom: 0;
    left: 0;
    flex: none;
    width: 100%;
    padding: 0;
  }
  .o-floating-banner__link{ border-radius: 0; }
  .o-floating-banner__img--pc{ display: none; }
  .o-floating-banner__img--sp{ display: block; }
}
@media screen and (max-width: 320px){
  .o-floating-banner__img--pc{ display: none; }
  .o-floating-banner__img--sp{ display: block; }
}

/* ==========================================================================
   11. 記事一覧（archive.php）
   --------------------------------------------------------------------------
   F_media §4-4 の「新着記事」セクションの見た目を踏襲する。
   ========================================================================== */
.o-archive{
  width: 100%;
  background: #FFFFFF;
}
.o-archive__inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  gap: 40px 0;
  width: 100%;
  padding: 100px 48px 48px;
  border-top: 1px solid #d1d1d1;
}
@media screen and (max-width: 1140px){
  .o-archive__inner{ padding: 48px; }
}
@media screen and (max-width: 840px){
  .o-archive__inner{
    margin-top: 96px;
    padding: 48px 24px;
  }
}
@media screen and (max-width: 540px){
  .o-archive__inner{ padding: 48px 24px; }
}

.o-archive__header{
  display: flex;
  flex-direction: column;
  align-items: center;
  align-content: center;
  justify-content: center;
  width: 100%;
  max-width: 1180px;
}
.o-archive__title{
  color: var(--s-color-e89cf142);
  font-family: var(--s-font-3d9f8c45);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
}
.o-archive__bar{
  display: block;
  width: 14px;
  height: 5px;
  margin-top: 6px;
  border-radius: 4px;
  background: var(--o-c-orange-bar, #f0620f);
}
.o-archive__desc{
  margin-top: 16px;
  color: #333333;
  font-size: 15px;
  line-height: 1.8;
  text-align: center;
}
@media screen and (max-width: 840px){
  .o-archive__title{ font-size: 20px; }
}

/* ---- 絞り込みピル -------------------------------------------------------- */
.o-filter{
  display: flex;
  flex-direction: column;
  gap: 30px;
  width: 100%;
  max-width: 992px;
}
.o-filter__row{
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.o-filter__label{
  flex: none;
  width: 150px;
  color: #333333;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.6;
}
.o-filter__pills{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
  flex: 1;
}
.o-filter__pill{
  border: 1px solid #fcfcfcff;
  border-radius: 40px;
  background: #ffffffff;
  transition: scale 300ms ease-in-out;
}
.o-filter__pill:hover{ scale: 1.02; }
.o-filter__pill-link{
  display: block;
  padding: 10px 20px;
  border-radius: 24px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}
.o-filter__pill-text{
  color: var(--s-color-e89cf142);
  font-size: 15px;
  font-weight: 700;  /* 500→700: 細い欧文/和文を1段階上げる（CEO指示 2026-09-01） */
  line-height: 1.00;
}
/* 選択中（現行の &url-query-partial 相当） */
.o-filter__pill.is-active .o-filter__pill-link{
  background: var(--s-color-e89cf142);
  box-shadow: 0 2px 5px rgba(0,0,0,0.2) inset;
}
.o-filter__pill.is-active .o-filter__pill-text{ color: #ffffffff; }
@media screen and (max-width: 840px){
  .o-filter__row{ flex-direction: column; }
  .o-filter__label{ width: auto; margin-bottom: 10px; }
}
@media screen and (max-width: 540px){
  .o-filter{ width: 100%; }
  .o-filter__row{ flex-direction: column; }
}

/* ---- グリッド ------------------------------------------------------------
   実測どおり card 幅 25% ＋ gap 40px 30px。この組み合わせは算術上4枚が
   1行に収まらず3枚で折り返す。
   TODO: 現行サイトが実際に3列で描画されているか実機で確認すること。
     4列が正なら width を calc(25% - 22.5px) に直す（実測値の書き換えになるため
     確認前に変えないこと）。
   -------------------------------------------------------------------------- */
.o-archive__grid{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 40px 30px;
  flex: none;
  width: 100%;
  height: auto;
  padding: 0;
  border: 0 solid transparent;
  border-radius: 24px;
}
@media screen and (max-width: 840px){
  .o-archive__grid{ margin: 0; }
}
@media screen and (max-width: 320px){
  .o-archive__grid{ border-radius: 16px; }
}

.o-archive__empty{
  width: 100%;
  color: #333;
  font-size: 20px;
  font-weight: 900;
  text-align: center;
}

.o-archive__more{
  display: flex;
  justify-content: center;
  width: 100%;
}
.o-load-more{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 282px;
  max-width: 100%;
  height: 40px;
  padding-bottom: 2px;
  border-radius: 20px;
  background: var(--s-color-5993f4bc);
  color: #ffffffff;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  transition: scale 300ms ease-in-out;
}
.o-load-more:hover{ scale: 1.1; }

.o-pagination{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}
.o-pagination .page-numbers{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #ebebeb;
  border-radius: 18px;
  color: var(--s-color-e89cf142);
  font-size: 14px;
  font-weight: 600;
}
.o-pagination .page-numbers.current{
  background: var(--s-color-e89cf142);
  border-color: var(--s-color-e89cf142);
  color: #ffffff;
}

/* ==========================================================================
   12. 記事カード（template-parts/card-article.php）
   --------------------------------------------------------------------------
   F_media §4-4-3 の実測値。
   ========================================================================== */
.o-card-article{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  flex: none;
  width: calc((100% - 90px) / 4);  /* 列gap30px を引いた4等分。25% のままだと1行3枚で折り返す（2026-09-13 訂正） */
  height: 421px;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  border: 2px solid #ebebebff;
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow: 3px 3px 3px rgba(0,0,0,0.2);
  transition: scale 600ms ease-in-out;
}
.o-card-article:hover{ scale: 1.05; }
.o-card-article__link{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
}
.o-card-article__thumb-wrap{ width: 100%; }
.o-card-article__thumb{
  width: 100%;
  height: auto;
}
.o-card-article__body{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px 0;
  padding: 16px;
}
.o-card-article__genre{
  padding: 3px 8px;
  border-radius: 24px;
  color: var(--s-color-e89cf142);
  font-size: 13px;
  font-weight: 600;
}
.o-card-article__title{
  margin: 5px 0 10px;
  color: #333333;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
}
.o-card-article__tags{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 5px;
}
.o-card-article__tag{
  color: #666666;
  font-size: 12px;
  font-weight: 500;  /* 400→500: 細い欧文/和文を1段階上げる（CEO指示 2026-09-01） */
}
@media screen and (max-width: 1140px){
  .o-card-article{
    flex: none;
    height: 300px;
  }
  .o-card-article__title{ font-size: 14px; }
}
@media screen and (max-width: 840px){
  .o-card-article{
    flex: none;
    flex-direction: column;
    width: 50%;
    height: 331.19px;
    margin: 0 10px 0;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .o-card-article__thumb{ height: 150px; object-fit: cover; }
  .o-card-article__title{ font-size: 20px; }
}
@media screen and (max-width: 540px){
  .o-card-article{
    flex: none;
    width: 100%;
    height: auto;
    margin: 0 0 0;
    overflow-x: hidden;
    overflow-y: auto;
  }
  .o-card-article__body{ padding: 15px; }
}