@charset "UTF-8";
/* imayomu-kentiku.jp 静的サイト用スタイル
   2026-07-28 作成。WordPress(Cocoon)からの移植に合わせて新規に起こした。
   方針＝構造設計の実務記事が主役。本文の可読性を最優先し、装飾は最小限にする。
   本文HTMLはWordPress時代のものを無改変で流し込むため、
   ここではタグ単位（h3/p/table/img/ul）で受けられるようにしてある。 */

:root{
  --main:#2f4858;        /* 構造・鉄骨のイメージで青灰。本丸群の紺(#1e3a6a)と差をつける */
  --main-dark:#22333e;
  --accent:#c0563a;      /* 見出しの罫とリンクホバー */
  --link:#1a5f9e;
  --text:#2b2b2b;
  --sub:#6b7580;
  --line:#d9dee3;
  --bg-soft:#f5f7f8;
}

*{box-sizing:border-box;}
body{
  margin:0; color:var(--text); background:#fff;
  font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  font-size:17px; line-height:1.9; /* 実務記事は読み込まれるので行間を広めに取る */
  -webkit-text-size-adjust:100%;
}
.wrapper{max-width:1120px; margin:0 auto; padding:0 16px;}

/* ── 2カラム（本文 + 右サイドバー）───────────────────
   移植元（Cocoon）が sidebar-right の2カラムだったのに合わせる。
   本文760px＋サイドバー320px。モバイルは1カラムでサイドバーを本文の下へ回す。 */
.main-area{display:flex; gap:32px; align-items:flex-start;}
.main-area .contents1{flex:1 1 auto; min-width:0; max-width:760px; margin:0 0 48px;}
.sidebar{flex:0 0 320px; width:320px;}
@media screen and (max-width:900px){
  .main-area{display:block;}
  .main-area .contents1{max-width:none;}
  .sidebar{width:auto; margin:32px 0 0;}
}

/* サイドバーの中身＝普通の箇条書きにする（枠・背景・区切り線を付けない） */
.side-box{margin:0 0 32px;}
.side-box h2{
  margin:0 0 10px; padding:0 0 6px; font-size:15px; font-weight:700;
  color:var(--main-dark); border-bottom:2px solid var(--main);
  background:none;
}
.side-box ul{margin:0; padding-left:1.2em;}
.side-box li{margin-bottom:.6em; line-height:1.6;}
.side-box li a{font-size:14px; color:var(--link); text-decoration:none;}
.side-box li a:hover{color:var(--accent); text-decoration:underline;}
/* サイドバー広告は追従させる（実測で視認率が最も高い形） */
.side-ad{position:sticky; top:16px;}

/* ── ヘッダー ───────────────────────── */
.header{padding:22px 0 14px; border-bottom:3px solid var(--main);}
.header a{
  font-size:22px; font-weight:700; color:var(--main-dark);
  text-decoration:none; letter-spacing:.02em;
}
.header .tagline{margin:6px 0 0; font-size:13px; color:var(--sub);}

/* ── ナビ ─────────────────────────── */
.site-nav{
  display:flex; flex-wrap:wrap; gap:2px;
  margin:0 0 14px; padding:8px 0; border-bottom:1px solid var(--line);
}
.site-nav a{
  padding:6px 14px; font-size:14px; color:var(--main-dark);
  text-decoration:none; border-radius:3px;
}
.site-nav a:hover{background:var(--bg-soft); color:var(--accent);}

/* ── パンくず ───────────────────────── */
ol.pan{
  list-style:none; display:flex; flex-wrap:wrap; gap:6px;
  margin:0 0 18px; padding:0; font-size:12px; color:var(--sub);
}
ol.pan li:not(:last-child)::after{content:"＞"; margin-left:6px; color:var(--line);}
ol.pan a{color:var(--sub);}

/* ── 本文 ─────────────────────────── */
.contents1{max-width:760px; margin:0 auto 48px;}
h1{
  font-size:26px; line-height:1.5; margin:0 0 10px;
  color:var(--main-dark); border-left:6px solid var(--main); padding-left:14px;
}
.dates{margin:0 0 22px; font-size:12px; color:var(--sub);}

.entry{overflow-wrap:break-word;}
.entry p{margin:0 0 1.5em;}

/* ★移植した本文は h3 から始まる（WordPress時代の構造をそのまま使うため昇格させていない）。
   見た目上は h3 を節見出しとして扱う。 */
.entry h2{
  font-size:22px; margin:2.4em 0 .9em; padding:10px 14px;
  background:var(--main); color:#fff; border-radius:3px; line-height:1.5;
}
.entry h3{
  font-size:20px; margin:2.2em 0 .8em; padding:0 0 8px 12px;
  border-left:5px solid var(--main); border-bottom:1px solid var(--line);
  color:var(--main-dark); line-height:1.5;
}
.entry h4{
  font-size:17px; margin:1.8em 0 .6em; padding-left:10px;
  border-left:3px solid var(--accent); color:var(--main-dark);
}

.entry a{color:var(--link);}
.entry a:hover{color:var(--accent);}

/* ── 装飾4色（正典 _統合知見_記事制作.md §1 に準拠）──────────
   .marker(黄背景)     核心の定義・結論文        1記事1〜2・表内不可
   .marker-under(黄下線) 覚える数値・許容値・公式   数値ごと可・表内可
   .bold-red(赤太字)    引っかけ・落とし穴        1記事1〜3・1か所に集約
   <strong>            検索意図の核心語          0〜2
   <b>                 一般強調                 自由
   ★色(marker/bold-red)が0＝装飾不足。<b>や<strong>だけでは色アンカーにならない。 */
.entry .marker{
  background:linear-gradient(transparent 62%, #ffe9a8 62%);
  font-weight:700; padding:0 1px;
}
.entry .marker-under{
  background:linear-gradient(transparent 88%, #ffd966 88%);
  font-weight:700;
}
.entry .bold-red{color:#c0392b; font-weight:700;}
.entry strong{color:var(--main-dark); font-weight:700;}
.entry b{font-weight:700;}

.entry ul,.entry ol{margin:0 0 1.6em; padding-left:1.6em;}
.entry li{margin-bottom:.5em;}

.entry img{max-width:100%; height:auto; display:block; margin:1.6em auto;}
.entry figure{margin:1.6em 0;}
.entry figcaption{font-size:13px; color:var(--sub); text-align:center; margin-top:6px;}

/* 表は横スクロールさせる（実務記事はメーカー比較表が入るため） */
.entry table{
  border-collapse:collapse; width:100%; margin:1.6em 0; font-size:15px;
  display:block; overflow-x:auto; white-space:nowrap;
}
.entry th,.entry td{border:1px solid var(--line); padding:8px 12px; text-align:left;}
.entry th{background:var(--main); color:#fff; font-weight:600;}
.entry tr:nth-child(even) td{background:var(--bg-soft);}

.entry blockquote{
  margin:1.6em 0; padding:14px 18px;
  background:var(--bg-soft); border-left:4px solid var(--line); color:#4a4a4a;
}

/* ── 広告枠（テンプレ側に置いてある。ここを触れば全記事の広告位置を一括で変えられる）── */
.ad-slot{margin:28px 0; min-height:0;}
.ad-slot:empty{display:none;}

/* ── 関連リンク（全件移植後に機械生成して差し込む）───────── */
.related-slot{margin:40px 0 0;}
.related-slot:empty{display:none;}
.related-slot h2{
  font-size:18px; margin:0 0 12px; padding:8px 12px;
  background:var(--bg-soft); border-left:5px solid var(--main); color:var(--main-dark);
}
.related-slot ul{list-style:none; margin:0; padding:0;}
.related-slot li{border-bottom:1px dotted var(--line);}
.related-slot li a{display:block; padding:10px 4px; color:var(--link); text-decoration:none; font-size:15px;}
.related-slot li a:hover{background:var(--bg-soft); color:var(--accent);}

/* ── フッター ───────────────────────── */
.footer{
  margin-top:56px; padding:20px 0; border-top:3px solid var(--main);
  font-size:13px; color:var(--sub); text-align:center;
}
.footer a{color:var(--sub);}

/* ── index系（一覧ページ用）─────────────────── */
.hub-list{list-style:none; margin:0 0 2em; padding:0;}
.hub-list li{border-bottom:1px solid var(--line);}
.hub-list li a{display:block; padding:12px 4px; color:var(--link); text-decoration:none; font-weight:600;}
.hub-list li a:hover{background:var(--bg-soft); color:var(--accent);}
.hub-list .desc{display:block; font-size:13px; color:var(--sub); font-weight:400; padding:0 4px 12px;}

/* ── スマホ ───────────────────────── */
@media screen and (max-width:768px){
  body{font-size:16px; line-height:1.85;}
  .wrapper{padding:0 12px;}
  .header a{font-size:19px;}
  h1{font-size:22px; padding-left:10px; border-left-width:5px;}
  .entry h2{font-size:19px; padding:8px 11px;}
  .entry h3{font-size:17px;}
  .entry table{font-size:14px;}
  .site-nav a{padding:5px 10px; font-size:13px;}
}

/* ── ヨメレバ／カエレバ（書籍・商品リンク）─────────────────
   出所＝移植元WordPressの Cocoon テーマ style.css から抽出（2026-07-28）。
   移植時に本文HTMLだけ持ってきてCSSを落としていたため、カードが縦積みになっていた。
   ★自作していない。元サイトの見た目をそのまま再現するためのもの。 */
.booklink-box,
.kaerebalink-box,
.tomarebalink-box,
.product-item-box {
  padding: 22px 25px;
  width: 96%;
  margin: 1.6em auto;
  border: 3px solid #dfdfdf;
  box-sizing: border-box;
  position: relative;
}
.booklink-image,
.kaerebalink-image,
.tomarebalink-image,
.product-item-thumb {
  width: 160px;
  min-width: 160px;
  margin: 0 auto 1em !important;
  float: none !important;
  text-align: center;
}
.booklink-image *,
.kaerebalink-image *,
.tomarebalink-image *,
.product-item-thumb * {
  display: block;
}
.booklink-image > a > img,
.kaerebalink-image > a > img,
.tomarebalink-image > a > img,
.product-item-thumb > a > img {
  margin: 0 auto;
}
.booklink-info,
.kaerebalink-info,
.tomarebalink-info,
.product-item-content {
  line-height: 125%;
  width: 100%;
}
.booklink-powered-date, .kaerebalink-powered-date, .tomarebalink-powered-date {
  font-size: 12px;
}
.booklink-detail, .kaerebalink-detail, .tomarebalink-address {
  color: #333;
  font-size: 12px;
  margin: 0 0 10px;
}
.kaerebalink-link1 > *,
.booklink-link2 > *,
.tomarebalink-link1 > *,
.product-item-buttons > * {
  background: none !important;
  padding: 0 !important;
  display: block !important;
}
.kaerebalink-link1 a,
.booklink-link2 a,
.tomarebalink-link1 a,
.product-item-buttons a {
  width: 90%;
  display: block;
  margin: 0px auto 8px;
  padding: 6px 12px;
  text-decoration: none;
  font-size: 13px;
  font-weight: bold;
  text-align: center;
  color: #fff;
}
.kaerebalink-link1 a:hover,
.booklink-link2 a:hover,
.tomarebalink-link1 a:hover,
.product-item-buttons a:hover {
  opacity: 0.6;
}
@media screen and (min-width: 769px) {

  .booklink-box,
  .kaerebalink-box,
  .tomarebalink-box,
  .product-item-box {
    text-align: left;
    display: flex;
    font-size: inherit !important;
  }


  .booklink-image,
  .kaerebalink-image,
  .tomarebalink-image,
  .product-item-thumb {
    vertical-align: top;
    box-sizing: border-box;
    min-width: auto !important;
  }


  .booklink-info,
  .kaerebalink-info,
  .tomarebalink-info,
  .product-item-content {
    line-height: 125%;
    vertical-align: top;
    box-sizing: border-box;
    padding-left: 25px;
    width: 100%;
  }


  .booklink-powered-date, .kaerebalink-powered-date, .tomarebalink-powered-date {
    margin: 6px 0 0;
  }


  .booklink-detail, .kaerebalink-detail {
    margin: 0 0 14px;
  }


  .booklink-link2,
  .kaerebalink-link1,
  .tomarebalink-link1,
  .product-item-buttons {
    display: flex;
    flex-wrap: wrap;
  }

  .booklink-link2 a,
  .kaerebalink-link1 a,
  .tomarebalink-link1 a,
  .product-item-buttons a {
    width: auto;
    text-align: center;
    border-radius: 3px;
  }

  .booklink-link2 a img,
  .kaerebalink-link1 a img,
  .tomarebalink-link1 a img,
  .product-item-buttons a img {
    position: absolute;
    bottom: 0;
    right: 0;
  }

  .booklink-link2 > *,
  .kaerebalink-link1 > *,
  .tomarebalink-link1 > *,
  .product-item-buttons > * {
    margin: 0.5%;
    box-sizing: border-box;
  }
}
.shoplinkbtn {
  position: relative;
}
.shoplinkbtn img {
  position: absolute;
}
.shoplinkbtn1 a {
  background: #192f60;
}
.shoplinkbtn2 a {
  background: #007b43;
}
.shoplinkbtn3 a {
  background: #522f60;
}
.shoplinkamazon a {
  background: #f79901;
}
.shoplinkrakuten a {
  background: #bf0000;
}
.shoplinkyahoo a {
  background: #e60033;
  position: relative;
}
.shoplinkseven a {
  background: #008837;
}
.shoplinkbellemaison a {
  background: #80bd22;
}
.shoplinkcecile a {
  background: #8d124b;
}
.shoplinkkakakucom a {
  background: #051d93;
}
.shoplinkkindle a {
  background: #0074c1;
}
.shoplinkrakukobo a {
  background: #bf0000;
}
.shoplinkbk1 a {
  background: #0085cd;
}
.shoplinkehon a {
  background: #000066;
}
.shoplinkkino a {
  background: #004097;
}
.shoplinktoshokan a {
  background: #15b0e7;
}
.shoplinkjalan a {
  background: #ff5600;
}
.shoplinkjtb a {
  background: #C71628;
}
.shoplinkikyu a {
  background: #1C4678;
}
.shoplinkrurubu a {
  background: #000066;
}
.shoplinkwowma a {
  background: #FF6100;
}
.nwa .booklink-box, .nwa .kaerebalink-box, .nwa .tomarebalink-box, .nwa .product-item-box {
  padding: 10px 10px 24px;
  display: block;
}
.nwa .booklink-image, .nwa .kaerebalink-image, .nwa .tomarebalink-image, .nwa .product-item-thumb {
  width: 120px;
  min-width: 120px;
  margin-right: 3% !important;
  float: left !important;
  height: 100% !important;
}
.nwa .booklink-link2,
.nwa .kaerebalink-link1,
.nwa .tomarebalink-link1,
.nwa .product-item-buttons {
  display: flex;
  flex-wrap: wrap;
}
.nwa .booklink-link2 > *,
.nwa .kaerebalink-link1 > *,
.nwa .tomarebalink-link1 > *,
.nwa .product-item-buttons > * {
  width: auto;
  margin: 0 .5% !important;
}
.nwa .booklink-link2 > * > a,
.nwa .kaerebalink-link1 > * > a,
.nwa .tomarebalink-link1 > * > a,
.nwa .product-item-buttons > * > a {
  width: auto;
  font-size: 11px;
}
.nwa .booklink-image, .nwa .kaerebalink-image, .nwa .tomarebalink-image, .nwa .product-item-thumb {
  width: 80px;
  min-width: 80px;
}
.nwa .booklink-info, .nwa .kaerebalink-info, .nwa .tomarebalink-info, .nwa .product-item-content {
  width: auto !important;
  overflow: visible !important;
  text-align: center !important;
  padding: 0 !important;
}
.nwa .booklink-link2 > *,
.nwa .kaerebalink-link1 > *,
.nwa .tomarebalink-link1 > *,
.nwa .product-item-buttons > * {
  width: 100%;
  margin: 0 .5% !important;
}
@media screen and (max-width: 834px) {

  .booklink-box, .kaerebalink-box, .tomarebalink-box, .product-item-box {
    padding: 10px 10px 24px;
    display: block;
  }


  .booklink-image, .kaerebalink-image, .tomarebalink-image, .product-item-thumb {
    width: 120px;
    min-width: 120px;
    margin-right: 3% !important;
    float: left !important;
    height: 100% !important;
  }


  .booklink-link2,
  .kaerebalink-link1,
  .tomarebalink-link1,
  .product-item-buttons {
    display: flex;
    flex-wrap: wrap;
  }

  .booklink-link2 > *,
  .kaerebalink-link1 > *,
  .tomarebalink-link1 > *,
  .product-item-buttons > * {
    width: auto;
    margin: 0 .5% !important;
  }

  .booklink-link2 > * > a,
  .kaerebalink-link1 > * > a,
  .tomarebalink-link1 > * > a,
  .product-item-buttons > * > a {
    width: auto;
    font-size: 11px;
  }
}
@media screen and (max-width: 480px) {

  .booklink-image, .kaerebalink-image, .tomarebalink-image, .product-item-thumb {
    width: 80px;
    min-width: 80px;
  }


  .booklink-info, .kaerebalink-info, .tomarebalink-info, .product-item-content {
    width: auto !important;
    overflow: visible !important;
    text-align: center !important;
    padding: 0 !important;
  }


  .booklink-link2 > *,
  .kaerebalink-link1 > *,
  .tomarebalink-link1 > *,
  .product-item-buttons > * {
    width: 100%;
    margin: 0 .5% !important;
  }
}
#wpforo-wrap .anchor-icon,
.gallery .anchor-icon,
.amazonjs_item .anchor-icon,
.kaerebalink-box .anchor-icon,
.booklink-box .anchor-icon,
.tomarebalink-box .anchor-icon,
.wpf-sbtn-wrap .anchor-icon,
.btn .anchor-icon,
.ranking-item-link-buttons a .anchor-icon,
.btn-wrap a .anchor-icon,
.no-icon .anchor-icon {
  display: none !important;
}

/* ── 前後の記事（同じカテゴリ内・公開日順）───────────────── */
.post-nav{display:flex;gap:12px;margin:36px 0 0;}
.post-nav a{flex:1 1 0;min-width:0;display:block;padding:12px 14px;border:1px solid var(--line);
  border-radius:4px;text-decoration:none;background:#fff;transition:background .15s,border-color .15s;}
.post-nav a:hover{background:var(--bg-soft);border-color:var(--main);}
.post-nav .pn-label{display:block;font-size:12px;color:var(--sub);margin-bottom:4px;}
.post-nav .pn-prev .pn-label::before{content:"\2190 ";}
.post-nav .pn-next .pn-label::after{content:" \2192";}
.post-nav .pn-next{text-align:right;}
.post-nav .pn-title{display:block;font-size:14px;line-height:1.5;color:var(--link);}
.post-nav a:hover .pn-title{color:var(--accent);}
/* 次だけのとき（＝最古の記事）に右へ寄せる */
.post-nav .pn-next:only-child{margin-left:auto;flex:0 1 60%;}
@media screen and (max-width:600px){
  .post-nav{flex-direction:column;gap:8px;}
  .post-nav .pn-next{text-align:left;}
  .post-nav .pn-next .pn-label::after{content:" \2192";}
  .post-nav .pn-next:only-child{flex:1 1 auto;}
}