/* ============================================
   成功ノウハウ集（owned） 単記事ページ 統合版
   依存: body に .is-owned-single / <main> に .p_article--owned
   ============================================ */

/* --- ページ背景（ヘッダー直下も含めグレー） --- */
body.is-owned-single #wrapper,
body.is-owned-single main.p_article--owned {
  background: #EFEFEF !important;
}
body.is-owned-single #header {
  background: #EFEFEF !important;
}

/* --- main 全体の余白（上212 / 下104）--- */
.p_article--owned {
  position: relative;
  background: #EFEFEF;
  padding: 15px 0 104px;
}

/* --- パンくず：ヘッダー直下の左上固定 --- */
body.is-owned-single .p_article--owned .c_breadcrumb {
  position: absolute;
  top: -90px;              /* ヘッダー直下に寄せる */
  left: 0;
  margin: 0;
  padding: 6px 16px;
  background: #EFEFEF;
  border-radius: 0;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  z-index: 100;
  width: auto;
}
body.is-owned-single .p_article--owned .c_breadcrumb a,
body.is-owned-single .p_article--owned .c_breadcrumb li {
  color: #333;
}

/* --- レイアウト：左右 360 / 中央 1200 を実現 --- */
.p_article--owned .container {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  display: flex;
  justify-content: center; /* 記事カードを中央へ */
}

/* --- 記事カード（白背景）--- */
.p_article--owned article.entry-content {
  width: 1200px;          /* 1920px時に中央 1200px */
  max-width: 92vw;        /* 画面が狭いときは縮む */
  background: #fff;
  border: none;
  border-radius: 0;
  padding: 72px 150px;    /* 内側：左右150（依頼） */
  margin: 30px auto 0;    /* 上160pxを30pxに変更 */
  /* box-shadow: 0 10px 24px rgba(0,0,0,.06), 0 2px 6px rgba(0,0,0,.04); */
  box-sizing: border-box;
}

/* --- カテゴリバッジは非表示（安全網）--- */
.p_article--owned .tag_works_cat { display: none !important; }

/* --- タイトル（h1）--- */
.p_article--owned h1,
.p_article--owned .entry-content h1 {
  font: normal normal 700 40px/48px "Source Han Sans JP","Noto Sans JP",sans-serif;
  letter-spacing: 0;
  color: #000;
  margin: 0 0 24px;
}

/* --- 本文（p） --- */
.p_article--owned .entry-content p {
  font-size: 17px;
  line-height: 1.5;  /* 行間は詰め気味 */
  color: #333;
  margin: 0 0 1.2em;
}

/* --- 見出しサイズ --- */
.p_article--owned .entry-content h2 {
  font-size: 32px;
  line-height: 1.4;
  font-weight: 700;
  color: #111;
  margin: 1.4em 0 1.0em;
  position: relative;
  padding-top: 26px; /* 本文中 h2 の上線用スペース */
}
/* 本文中 h2 の“上の黒線” */
.p_article--owned .entry-content h2::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: #000;
}
/* タイトルとして使う h2（wp-block-heading）の上線は消す */
.p_article--owned h2.wp-block-heading {
  margin-top: 0 !important;
  border-top: none !important;
  padding:0 24px 0;
}
.p_article--owned h2.wp-block-heading::before { display: none !important; }

.p_article--owned .entry-content h3 {
  font-size: 24px;
  line-height: 1.5;
  font-weight: 600;
  color: #222;
  margin: 1.1em 0 .9em;
}
.p_article--owned .entry-content h4 {
  font-size: 17px;
  line-height: 1.6;
  font-weight: 600;
  color: #333;
  margin: 1em 0 .5em;
}

/* --- 強調・画像・引用 --- */
.p_article--owned .entry-content strong { color: #000; font-weight: 700; }
.p_article--owned .entry-content span   { color: #A60030; font-weight: 700; }

.p_article--owned .entry-content img {
  display: block;
  max-width: 100%;
  border-radius: 0;
  margin: 1.6em auto;
}

.p_article--owned blockquote {
  background: #fafafa;
  border-left: 4px solid #b5852f;
  padding: 1em 1.5em;
  font-style: italic;
  color: #555;
  margin: 2em 0;
}

/* --- 目次（.om-toc）--- */
.p_article--owned .entry-content .om-toc {
  background: #fff;
  border: 2px solid #CBCBCB;
  border-radius: 0;
  padding: 16px 36px 36px 24px; /* 文字を左に寄せる */
  margin: 60px 0 30px;
  box-sizing: border-box;
}
.p_article--owned .entry-content .om-toc__title {
  font-size: 20px;
  font-weight: 700;
  color: #000;
  margin-bottom: 12px;
}
.p_article--owned .entry-content .om-toc ul {
  list-style-type: disc;
  list-style-position: outside;
  padding-left: 28px; /* マーカーと文字を右へ */
  margin: 0;
}
.p_article--owned .entry-content .om-toc ul li {
  color: #2367b0;          /* 文字：青 */
  line-height: 2.4;
  margin: 4px 0;
}
.p_article--owned .entry-content .om-toc ul li::marker { color: #2367b0; } /* ・：青 */
.p_article--owned .entry-content .om-toc ul li a {
  color: #2367b0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* ホバー時：ほんの少し濃くしてアクセント */
.p_article--owned .entry-content .om-toc a:hover {
  color: #194f8f;
}
/* --- 通常の ul/ol：左マージンを戻す、色は黒 --- */
.p_article--owned .entry-content ul:not(.om-toc ul),
.p_article--owned .entry-content ol:not(.om-toc ol) {
  margin-left: 2em;
  padding-left: 1.2em;
  color: #000;
  line-height: 1.5;
}
.p_article--owned .entry-content ul li::marker { color: #000; }

/* --- om-box（枠付きボックス）--- */
.p_article--owned .entry-content .om-box {
  background: #fff;
  border: 2px solid #CBCBCB;
  border-radius: 0;
  padding: 30px 3% 30px;
  box-sizing: border-box;
}
.p_article--owned .entry-content p.om-box-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #000;
  margin: 0 20px 10px 0;
  line-height: 1.5;
}
/* om-box 内の左右余白（p/ul/ol/table） */
.p_article--owned .entry-content .om-box p,
.p_article--owned .entry-content .om-box ul,
.p_article--owned .entry-content .om-box ol,
.p_article--owned .entry-content .om-box table {
  margin-left: 20px;
  margin-right: 20px;
}
/* om-box の段落とリストの“間”の詰め */
.p_article--owned .entry-content .om-box p { margin-bottom: .6em; }
.p_article--owned .entry-content .om-box p + ul,
.p_article--owned .entry-content .om-box p + ol { margin-top: .4em; }
/* om-box のリスト行間 */
.p_article--owned .entry-content .om-box ul li,
.p_article--owned .entry-content .om-box ol li {
  line-height: 1.5;
  margin-bottom: .4em;
}

/* --- 表（枠なし／下線あり）--- */
/* 通常 */
.table-simple {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 16px;
  line-height: 1.5;
  border-bottom: 1px solid #ccc;
}
.table-simple th,
.table-simple td {
  border: none;
  padding: 8px 0;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
  padding-right: 1em;
  font-weight: 700;
}
.table-simple tr + tr th,
.table-simple tr + tr td { border-top: 1px solid #ccc; }

/* om-box 内の表：左 30px マージン＆追従縮小 */
.p_article--owned .entry-content .om-box .table-simple {
  width: calc(100% - 30px);
  max-width: 100%;
  margin: 1.5em 0 1.5em 30px;   /* ← 30px に統一 */
  table-layout: auto;
  word-break: break-word;
}
.p_article--owned .entry-content .om-box .table-simple th,
.p_article--owned .entry-content .om-box .table-simple td {
  white-space: normal;
}

/* --- 前後ナビの余白 --- */
.p_article--owned .post-prev-next { margin-top: 60px; }

/* --- 記事タイトル直下の画像の上余白（om-article）--- */
.p_article--owned .entry-content .om-article { padding: 0 24px; }

/* --- 見出しブロック .om-content の下余白（70px）--- */
.p_article--owned .entry-content .om-content-70 { margin-bottom: 70px; }

/* --- 見出しブロック .om-content の下余白（50px）--- */
.p_article--owned .entry-content .om-content-50 { margin-bottom: 50px; }

/* --- ul / li の上下マージン 0 --- */
.p_article--owned .entry-content ul,
.p_article--owned .entry-content ol { margin-top: 0; margin-bottom: 0; }
.p_article--owned .entry-content li { margin-top: 0 !important; margin-bottom: 0 !important; }

/* ---------- レスポンシブ ---------- */
@media (max-width: 1024px) {
  .p_article--owned { padding: 0 0 88px; } /* 比率を保って少し縮める */
  .p_article--owned article.entry-content { padding: 56px 56px; }
  .p_article--owned h1,
  .p_article--owned .entry-content h1 { font-size: 34px; line-height: 44px; }
  .p_article--owned .entry-content h2 { font-size: 28px; }
  .p_article--owned .entry-content h3 { font-size: 22px; }
  .p_article--owned .entry-content h4,
  .p_article--owned .entry-content p { font-size: 16px; }
}
@media (max-width: 768px) {
  .p_article--owned { padding: 0 0 72px; }
  .p_article--owned article.entry-content { padding: 10px 0; }
  .p_article--owned h1,
  .p_article--owned .entry-content h1 { font-size: 28px; line-height: 36px; }
  .p_article--owned .entry-content h2 { font-size: 24px; }
  .p_article--owned .entry-content h3 { font-size: 20px; }
  .p_article--owned .entry-content h4,
  .p_article--owned .entry-content p { font-size: 15px; }
}

/* =========================================================
   成功ノウハウ集（owned）パンくずリストをヘッダー直下・左上に固定
   ========================================================= */
body.is-owned-single .p_article--owned {
  position: relative; /* 絶対配置の基準に */
}

body.is-owned-single .p_article--owned .c_breadcrumb {
  position: absolute;
  top: -110px;   /* ← 上方向の位置（ヘッダーすぐ下） */
  left: 0;       /* ← 左端にぴったり寄せる */
  margin: 0;
  padding: 6px 16px;
  background-color: #EFEFEF;
  border-radius: 0;
  box-shadow: none;
  z-index: 120;  /* ヘッダーより上に確実に表示 */
  width: auto;
}

/* 文字色とリンク色の統一 */
body.is-owned-single .p_article--owned .c_breadcrumb a,
body.is-owned-single .p_article--owned .c_breadcrumb li {
  color: #333;
}

/* 注釈（p.om-annotation）は本文pより優先させる */
.p_article--owned .entry-content p.om-annotation {
  font-size: 15px !important;
  color: #8B8B8B !important;
  line-height: 1.5;
  margin-top: 8px;
}

/* =========================================================
   成功ノウハウ集（owned）パンくず・main余白調整
   ========================================================= */

/* パンくず：下方向の余白を広げる */
body.is-owned-single .p_article--owned .c_breadcrumb {
  padding-bottom: 190px; /* ← 必要に応じて 24〜32px に調整可 */
}

/* main要素の上マージンを0にする（ページ全体を上に詰める） */
body.is-owned-single main.p_article--owned {
  margin-top: 102px !important;
}

/* main要素の上マージンを0にする（ページ全体を上に詰める） */
body.is-owned-single main.p_article--owned {
  margin-top: 0 !important;
}

/* =========================================================
   成功ノウハウ集（owned）記事ページ：main上マージンを0に固定
   ========================================================= */

body.is-owned-single main.p_article--owned {
  margin-top: 0 !important; /* ヘッダー下に密着 */
}

/* パンくずの余白はそのまま維持したい場合 */
body.is-owned-single .p_article--owned .c_breadcrumb {
  margin-top: 15px;
  margin-bottom: 190px;
}

/* --- レスポンシブ対応 --- */
@media (max-width: 1024px) {
  body.is-owned-single .p_article--owned .c_breadcrumb {
    margin-top: 12px;
    margin-bottom: 140px;
  }
}
@media (max-width: 767px) {
  body.is-owned-single .p_article--owned .c_breadcrumb {
    margin-top: 10px;
    margin-bottom: 100px;
  }
}

/* スマホ表示時の余白調整 */
@media (max-width: 767px) {
  .p_article--owned article.entry-content {
    margin: 30px auto 0;
  }
}

/* 中間サイズの画面時の余白調整 */
@media (max-width: 1024px) {
  .p_article--owned article.entry-content {
    margin: 30px auto 0;
  }
}

/* om-box内のtableにかかっている左右マージンを打ち消し、中央寄せ */
.p_article--owned .entry-content .om-box table {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* om-boxのタイトル位置の微調整 */
.p_article--owned .entry-content p.om-box-title {
  margin-left: 16px;
  font-size: 18px !important;
}

/* 2つめの om-box の table-simple の最下行だけ下線を非表示にする */
.p_article--owned .entry-content .om-box--main-difference .table-simple {
  border-bottom: none;
}

/* om-box内だけ適用（他の表には影響しない） */
.p_article--owned .entry-content .om-box .table-simple th,
.p_article--owned .entry-content .om-box .table-simple td {
  padding-top: 14px;    /* ← 元8px → 少し広げる */
  padding-bottom: 14px; /* 同じく上下均等に */
}

/* ==== om-toc / om-box 外の ul・ol の左余白をリセット ==== */
.p_article--owned .entry-content ul:not(.om-toc ul):not(.om-box ul),
.p_article--owned .entry-content ol:not(.om-toc ol):not(.om-box ol) {
  padding-left: 0;
}

/* ==== 小画面時の記事レイアウト調整 ==== */

/* PCでは白背景(中央カラム)＋グレー背景(左右)構造を維持。
   768px以下ではグレー帯を非表示・白領域を全幅に広げる。 */
@media screen and (max-width: 768px) {
  /* グレー背景の親レイアウトを打ち消す */
  .l_container,
  .l_main,
  .l_side,
  .l_content,
  .wrap,
  main.p_article--owned {
    max-width: 100% !important;
    padding-left: 0 !important;  /* 白背景の左右余白をやや狭める */
    padding-right: 0 !important;
    margin: 0 auto;
    background: #fff;
  }
}

/* さらにスマホ(768px以下)では余白をより狭める */
@media screen and (max-width: 768px) {
  main.p_article--owned {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 70px;
  }
}

/* ==== スマホ時 見出しタイトルの文字サイズ調整 ==== */
@media screen and (max-width: 768px) {
  .p_article--owned .entry-content h1 {
    font-size: 1.5rem; /* 約24px */
  }
  .p_article--owned .entry-content h2 {
    font-size: 1.25rem; /* 約20px */
  }
  .p_article--owned .entry-content h3 {
    font-size: 1.125rem; /* 約18px */
  }
}

/* ==== 表(table-simple)のレスポンシブ改行対応 ==== */

/* 通常: 表を全幅で表示（PC時） */
.p_article--owned .entry-content .table-simple {
  table-layout: fixed;
  width: 100%;
  word-break: keep-all;
}

/* 小画面時: セル内テキストを改行して読みやすく */
@media screen and (max-width: 768px) {
  .p_article--owned .entry-content .table-simple th,
  .p_article--owned .entry-content .table-simple td {
    white-space: normal !important;  /* 改行許可 */
    word-wrap: break-word;
    word-break: break-word;
  }

  /* セル内の改行を保ちつつ見やすい余白 */
  .p_article--owned .entry-content .table-simple th,
  .p_article--owned .entry-content .table-simple td {
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* ==== オウンドメディアページの .container の左右paddingを0に ==== */
.p_article--owned .container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ==== 表(table-simple)の文字サイズを画面幅に応じて縮小 ==== */

/* PC時：通常サイズ（基準） */
.p_article--owned .entry-content .table-simple th,
.p_article--owned .entry-content .table-simple td {
  font-size: 16px;
}

/* タブレット（～1024px）：やや小さく */
@media screen and (max-width: 1024px) {
  .p_article--owned .entry-content .table-simple th,
  .p_article--owned .entry-content .table-simple td {
    font-size: 15px;
  }
}

/* スマホ（～768px）：さらに小さく */
@media screen and (max-width: 768px) {
  .p_article--owned .entry-content .table-simple th,
  .p_article--owned .entry-content .table-simple td {
    font-size: 14px;
    line-height: 1.6; /* 読みやすくするため行間を少し広げる */
  }
}

/* 特に文字数が多いセルを想定して、スマホ時には自動改行 */
@media screen and (max-width: 768px) {
  .p_article--owned .entry-content .table-simple th,
  .p_article--owned .entry-content .table-simple td {
    white-space: normal;
    word-break: break-word;
  }
}

/* ==== 表（table-simple）スマホ時：縦並び＋見やすく調整 ==== */
@media screen and (max-width: 768px) {
  /* テーブルをブロック化して横スクロール防止 */
  .p_article--owned .entry-content .table-simple {
    display: block;
    width: 100%;
    border-collapse: collapse; /* ← separateから変更（線の重なり防止） */
    border-spacing: 0;
    border: none;
  }

  /* 各行をブロック化して1項目ずつカード風に */
  .p_article--owned .entry-content .table-simple tr {
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
  }

  /* th, tdを縦積み */
  .p_article--owned .entry-content .table-simple th,
  .p_article--owned .entry-content .table-simple td {
    display: block;
    width: 100%;
    text-align: left;
    padding: 6px 0;
    border: none; /* ← 各セルの線を消す（上下重複を防ぐ） */
    line-height: 1.6;
  }

  /* ラベル側（th） */
  .p_article--owned .entry-content .table-simple th {
    font-size: 0.95rem;
  }

  /* 値側（td） */
  .p_article--owned .entry-content .table-simple td {
    font-size: 0.9rem;
  }

  /* 最終行の下線は非表示 */
  .p_article--owned .entry-content .table-simple tr:last-child {
    border-bottom: none;
  }

  /* padding設定 */
  .p_article--owned .entry-content .om-box .table-simple th, .p_article--owned .entry-content .om-box .table-simple td {
    padding-top: 3px;
    padding-bottom: 5px;
  }

  /* tr の下線は外す */
  .p_article--owned .entry-content .table-simple tr {
    display: block;
    padding: 10px 0;
    border-bottom: none;      /* ← 変更：none */
    width: 100%;
    margin: 0;
  }

  /* td 側に下線を付ける（幅100% なので必ずいっぱいに伸びる） */
  .p_article--owned .entry-content .table-simple td {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 0;           /* 少しだけ余白を増やすと見やすい */
    border: none;
    border-bottom: 1px solid #ccc;   /* ← 追加：下線は td に */
    line-height: 1.6;
    box-sizing: border-box;
  }

  /* 2つめの om-box の table-simple の最下行だけ下線を非表示にする */
  .p_article--owned .entry-content .om-box--main-difference .table-simple tr:last-child td:last-child {
    border-bottom: none;
  }

  /* <td>を<tr>の横幅いっぱいに広げる */
  .p_article--owned .entry-content .table-simple td {
    display: block;
    width: 100% !important;       /* ← tr全幅に合わせる */
    box-sizing: border-box;       /* ← padding込みで幅100%維持 */
    text-align: left;
    padding: 8px 0;
    border: none;
    border-bottom: 1px solid #ccc;
    line-height: 1.6;
  }

  .p_article--owned .entry-content .table-simple th {
    display: block;
    width: 100% !important;
  }

  /* 念のため、<tr>自体も全幅指定（環境依存のズレ防止） */
  .p_article--owned .entry-content .table-simple tr {
    display: block;
    width: 100%;
    padding: 10px 0;
    margin: 0;
  }
}