@charset "utf-8";
/* ============================================================
   common.css — 全ページ共通
   ファクタリングで資金調達デキタ／デザイン規定 v1.1 準拠
   ------------------------------------------------------------
   §02 カラー ／ §03 タイポ ／ §04 見出し3種 ／ §05 背景2段階
   §06 余白 ／ §07 カード4種 ／ §08 会話 ／ §09 ボタン ／ §10 表
   ここに無い型は使わない。必要になったら規定を更新してから足すこと。
   ============================================================ */

/* ============ §02 トークン ============ */
:root{
  --ground:#04101F;
  --band:#08182A;
  --card:#102338;
  --card-2:#16304A;
  --deep:#020A14;
  --line:#1E3A57;
  --line-soft:#17304A;
  --ink:#E8F0F8;
  --ink-mid:#A9BED3;
  --ink-dim:#7C93AB;
  --accent:#7FD1F5;
  --accent-deep:#3FA9DC;
  --accent-soft:rgba(127,209,245,.08);
  --gold:#F0C674;
  --alert:#EF7A6A;
  --f-head:"Zen Kaku Gothic New",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --f-body:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Noto Sans CJK JP",Meiryo,"Yu Gothic UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px; --s6:48px; --s7:64px; --s8:96px;
  --wrap:1160px;
  --gut:24px;
}

/* ============ ベース ============ */
*{box-sizing:border-box;}
html{width:100%;}
body{
  margin:0;
  overflow-x:hidden;
  overflow-x:clip;
  background:var(--ground);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto;}
a{color:var(--accent);text-decoration:none;}
a:hover{color:#B9E7FB;}
p{margin:0;}
h1,h2,h3,h4{font-family:var(--f-head);font-weight:700;margin:0;}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important;}}

/* ============ 器 ============ */
.inner{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);position:relative;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s7);align-items:start;padding:var(--s7) 0 var(--s8);}
.layout > *{min-width:0;}
@media (max-width:1023px){.layout{grid-template-columns:1fr;gap:var(--s7);padding:var(--s6) 0 var(--s7);}}
@media (max-width:640px){:root{--gut:16px;}}

/* §05 セクションは背景2段階だけ。区切り線・斜め境界・写真背景は使わない */
.section{padding:var(--s8) 0;}
.section--alt{background:var(--band);}
@media (max-width:640px){.section{padding:56px 0;}}

/* 規定§04でウォーターマークは廃止。旧マークアップが残っていても出さない */
.watermark{display:none !important;}

/* ============ §04 見出し（型は3つだけ） ============ */
.head,.head-row{text-align:left;margin-bottom:var(--s6);}
.head__en,.eyebrow{
  display:inline-block;
  font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.2em;
  color:var(--accent);text-transform:uppercase;
  border-top:3px solid var(--gold);padding-top:8px;margin:0 0 12px;
}
.head h2,.head-row h2{
  font-family:var(--f-head);font-weight:700;
  font-size:clamp(22px,3.4vw,30px);line-height:1.4;letter-spacing:.01em;
  color:var(--ink);margin:0 0 var(--s4);text-wrap:balance;
}
.head p,.head-row p{color:var(--ink-mid);font-size:15px;max-width:64ch;margin:0;}
.head-row{display:flex;align-items:flex-end;gap:var(--s4);flex-wrap:wrap;}
.head-row__body{flex:1 1 320px;}
.head-row__chara{display:none;} /* §11 H2の直下にキャラは置かない */
.more{margin-left:auto;font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;color:var(--accent);white-space:nowrap;}
.more a{color:inherit;}
@media (max-width:640px){.head,.head-row{margin-bottom:var(--s5);}}

.h3{
  font-family:var(--f-head);font-weight:700;font-size:19px;line-height:1.55;
  color:var(--ink);padding-left:12px;border-left:3px solid var(--accent);
  margin:var(--s6) 0 var(--s3);
}
.h4{
  font-family:var(--f-head);font-weight:700;font-size:15px;color:var(--gold);
  margin:var(--s4) 0 var(--s2);padding:0;border:0;
}

/* ============ §09 ボタン ============ */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--f-head);font-weight:700;font-size:15px;line-height:1.4;
  padding:14px 26px;border-radius:3px;border:1px solid transparent;
  background:var(--accent);color:#04101F;cursor:pointer;text-align:left;
}
.btn:hover{background:#A2E0FA;color:#04101F;}
.btn::after{content:"→";font-family:var(--f-mono);font-size:13px;}
.btn--ghost{background:transparent;border-color:var(--accent);color:var(--accent);}
.btn--ghost:hover{background:var(--accent-soft);color:var(--accent);}
.btn--sm{font-size:13px;padding:10px 18px;}
/* 朱色のボタンは作らない。朱色は注意喚起の色（§02） */

/* ============ ユーティリティバー ============ */
.utility{
  background:var(--deep);border-bottom:1px solid var(--line-soft);
  font-size:12px;color:var(--ink-dim);
  display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;
  padding:7px var(--gut);
}
.utility__pr{display:flex;align-items:center;gap:10px;line-height:1.7;}
.utility__pr .tag{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;color:var(--gold);
  border:1px solid var(--line);border-radius:2px;padding:1px 6px;flex:none;
}
.utility__nav{margin-left:auto;display:flex;gap:var(--s3);}
.utility__nav a,.utility__menu a{color:var(--ink-dim);font-size:12px;}
.utility__nav a:hover,.utility__menu a:hover{color:var(--accent);}
.utility__menu{display:flex;gap:var(--s3);list-style:none;margin:0;padding:0;}
@media (max-width:820px){.utility{font-size:11px;}.utility__nav{display:none;}}

/* ============ ヘッダー ============ */
.header{
  position:sticky;top:0;z-index:50;
  background:rgba(4,16,31,.94);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:20px;
  padding:0 var(--gut);min-height:64px;
}
.logo{display:flex;align-items:center;gap:10px;flex:1 1 auto;min-width:0;}
.logo > div{min-width:0;}
.logo__mark img{width:34px;height:34px;flex:none;}
.logo__name{font-family:var(--f-head);font-weight:900;font-size:15px;line-height:1.25;overflow-wrap:anywhere;}
.logo__name a{color:var(--ink);}
.logo__en{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.22em;color:var(--ink-dim);}

.gnav-panel{display:flex;align-items:center;gap:var(--s3);margin-left:auto;}
.gnav__menu{display:flex;list-style:none;margin:0;padding:0;}
.gnav a{font-size:12.5px;color:var(--ink-mid);padding:8px 8px;border-radius:2px;white-space:nowrap;display:block;}
.gnav a:hover{color:var(--accent);background:var(--accent-soft);}
.header__side{display:flex;align-items:center;gap:12px;flex:none;}
.search{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:3px;padding:5px 10px;background:rgba(255,255,255,.02);}
.search label{color:var(--ink-dim);font-size:14px;line-height:1;}
.search input{background:none;border:0;color:var(--ink);font-family:var(--f-body);font-size:12.5px;width:118px;outline:none;}
.search input::placeholder{color:var(--ink-dim);}
.header__cta{
  font-family:var(--f-head);font-weight:700;font-size:13px;
  background:var(--accent);color:#04101F;padding:9px 16px;border-radius:3px;white-space:nowrap;
}
.header__cta:hover{background:#A2E0FA;color:#04101F;}
.gnav-toggle{display:none;}
.gnav-overlay{display:none;}
/* PCのヘッダーには検索窓を置かない。
   ロゴ＋メニュー7項目＋CTAで横幅を使い切るため、入れると必ず溢れる。
   検索は「1180px以下＝メニューパネル内」「PC＝フッター」に置いている。 */
@media (min-width:1181px){
  .header .search{display:none;}
}

/* 小さい画面ではロゴを詰める。メニューボタンが画面外に出るため */
@media (max-width:420px){
  .header{gap:12px;}
  .logo__mark img{width:30px;height:30px;}
  .logo__name{font-size:13px;}
  .logo__en{display:none;}
  .gnav-toggle{padding:9px 10px;}
}

@media (max-width:1180px){
  .gnav-toggle{
    display:inline-flex;flex-direction:column;justify-content:center;gap:4px;
    margin-left:auto;background:transparent;border:1px solid var(--line);border-radius:3px;
    padding:9px 12px;cursor:pointer;position:relative;
  }
  .gnav-toggle span:not(.gnav-toggle__label){display:block;width:16px;height:1.5px;background:var(--ink-mid);}
  .gnav-toggle__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
  .gnav-panel{
    position:fixed;inset:64px 0 auto 0;margin:0;z-index:45;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--band);border-bottom:1px solid var(--line);
    padding:var(--s3) var(--gut) var(--s4);
    max-height:calc(100dvh - 64px);overflow:auto;
    transform:translateY(-8px);opacity:0;visibility:hidden;transition:.18s;
  }
  .gnav-panel.is-open{transform:none;opacity:1;visibility:visible;}
  .gnav__menu{flex-direction:column;}
  .gnav a{font-size:15px;padding:13px 4px;border-bottom:1px solid var(--line-soft);}
  .header__side{flex-direction:column;align-items:stretch;gap:12px;margin-top:var(--s3);}
  .search input{width:100%;}
  .header__cta{text-align:center;}
  body.fd-nav-open{overflow:hidden;}
  .gnav-overlay{display:block;position:fixed;inset:0;background:rgba(2,10,20,.6);opacity:0;visibility:hidden;transition:.18s;z-index:40;}
  .gnav-overlay.is-open{opacity:1;visibility:visible;}
}

/* ============ パンくず ============ */
.breadcrumb{border-bottom:1px solid var(--line-soft);background:var(--ground);}
.breadcrumb ol{
  max-width:var(--wrap);margin:0 auto;padding:10px var(--gut);
  list-style:none;display:flex;flex-wrap:wrap;gap:8px;
  font-size:12px;color:var(--ink-dim);
}
.breadcrumb li+li::before{content:"/";margin-right:8px;color:var(--line);}
.breadcrumb a{color:var(--ink-mid);}
.breadcrumb [aria-current]{color:var(--ink-dim);}

/* ============ §07-A 記事カード ============ */
.column{background:var(--card);border:1px solid var(--line);border-radius:4px;overflow:hidden;display:flex;flex-direction:column;}
.column:hover{border-color:var(--accent-deep);}
.column > a{display:flex;flex-direction:column;height:100%;color:inherit;}
.column__eye{
  aspect-ratio:16/9;background:linear-gradient(135deg,#16304A,#0B1E33);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;color:var(--ink-dim);
}
.column__eye img{width:100%;height:100%;object-fit:cover;}
.column__body{padding:14px 16px 18px;display:flex;flex-direction:column;gap:8px;}
.column__meta{display:flex;gap:12px;align-items:baseline;font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;color:var(--ink-dim);}
.column__meta span{color:var(--accent);}
.column h3{font-family:var(--f-head);font-weight:700;font-size:14.5px;line-height:1.65;color:var(--ink);border:0;padding:0;margin:0;}

/* ============ §07-B 機能カード ============ */
.fcard{
  background:var(--card);border:1px solid var(--line);border-radius:4px;padding:22px;
  display:flex;flex-direction:column;gap:10px;color:inherit;
}
.fcard:hover{border-color:var(--accent-deep);background:#12283F;color:inherit;}
.fcard__no{
  width:34px;height:34px;flex:none;border:1px solid var(--accent);border-radius:2px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:13px;color:var(--accent);
}
.fcard__ttl{font-family:var(--f-head);font-weight:700;font-size:16px;margin:0;border:0;padding:0;color:var(--ink);}
.fcard__desc{font-size:13px;color:var(--ink-mid);line-height:1.75;margin:0;}
.fcard__go{margin-top:auto;padding-top:10px;font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:var(--accent);}
.fcard--lead{background:linear-gradient(160deg,#153A55,#0E2438);border-color:var(--accent-deep);}

/* ============ §07-C 会社カード ============ */
.review{
  background:var(--card);border:1px solid var(--line);border-radius:4px;padding:22px;
  display:flex;flex-direction:column;gap:14px;color:inherit;
}
.review:hover{border-color:var(--accent-deep);color:inherit;}
.review__name{font-family:var(--f-head);font-weight:700;font-size:18px;margin:0;border:0;padding:0;color:var(--ink);}
.review__lead{font-size:13px;color:var(--ink-mid);line-height:1.75;margin:0;}
.review__lead small{display:block;color:var(--ink-dim);font-size:12px;}
.review__spec{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0;font-size:13px;align-items:baseline;}
.review__spec dt{color:var(--ink-dim);font-size:12px;white-space:nowrap;}
.review__spec dd{margin:0;font-family:var(--f-mono);font-variant-numeric:tabular-nums;color:var(--gold);font-size:13px;}
.review__spec dd.is-text{font-family:var(--f-body);color:var(--ink);}
.review .btn{margin-top:auto;align-self:flex-start;}
/* 数値の性質ラベル（下限／平均）。性質の違う数字を同じ列に並べない */
.unit{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;color:var(--ink-dim);
  border:1px solid var(--line);border-radius:2px;padding:1px 5px;margin-left:6px;vertical-align:1px;
}

/* ============ §07-D 業種カード（v1.1で追加） ============ */
.icard{
  background:var(--card);border:1px solid var(--line);border-radius:4px;
  padding:14px 12px 16px;display:flex;flex-direction:column;align-items:center;gap:8px;
  text-align:center;color:inherit;
}
.icard:hover{border-color:var(--accent-deep);background:#12283F;color:inherit;}
.icard img{height:120px;width:auto;}
.icard b{font-family:var(--f-head);font-weight:700;font-size:14px;}
.icard span{font-size:11.5px;color:var(--ink-mid);line-height:1.6;}

/* ============ 本文の中でも使う部品 ============ */
/* TOPの固定ページ本文・投稿・固定ページのどこに置いても同じ見た目になるよう
   common.css に置いている（top.css に置くと本文で使えない） */
/* ============ ステップ図（順序があるので番号を付けてよい） ============ */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);margin-top:var(--s5);}
@media (max-width:760px){.steps{grid-template-columns:1fr;}}
.step{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:20px;}
.step__no{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;color:var(--gold);margin-bottom:10px;}
.step h4{font-family:var(--f-head);font-weight:700;font-size:16px;color:var(--ink);margin:0 0 8px;padding:0;border:0;}
.step p{font-size:13px;color:var(--ink-mid);line-height:1.75;margin:0;}

/* ============ 2列の対比（メリット／デメリット・注意点） ============ */
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);margin-top:var(--s5);}
@media (max-width:760px){.two{grid-template-columns:1fr;}}
.listbox{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:24px;}
.listbox h4{font-family:var(--f-head);font-weight:700;font-size:15px;color:var(--gold);margin:0 0 14px;padding:0;border:0;}
.listbox--caution{border-left:3px solid var(--alert);}
.listbox--caution h4{color:var(--alert);}
.listbox ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px;}
.listbox li{display:flex;gap:12px;font-size:14px;line-height:1.75;}
.listbox li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;margin-top:10px;}
.listbox--caution li::before{background:var(--alert);}
.listbox li b{display:block;font-weight:700;}
.listbox li span{color:var(--ink-mid);font-size:13px;}

/* ============ 必要書類 ============ */
.docs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px var(--s3);margin-top:var(--s5);}
@media (max-width:640px){.docs{grid-template-columns:1fr;}}
.doc{display:flex;gap:12px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:4px;padding:14px 16px;font-size:14px;}
.doc__mark{font-family:var(--f-mono);font-size:11px;color:var(--accent);border:1px solid var(--line);border-radius:2px;padding:2px 6px;flex:none;margin-top:3px;}
.doc--must .doc__mark{color:#04101F;background:var(--gold);border-color:var(--gold);}
.doc b{font-weight:700;}
.doc span{display:block;color:var(--ink-mid);font-size:12.5px;line-height:1.7;}

/* ============ 引き継ぎメモ（実装時に消す枠） ============ */
.slotline{
  font-family:var(--f-mono);font-size:12px;color:var(--ink-dim);
  border:1px dashed var(--line);border-radius:3px;padding:14px 16px;margin-top:var(--s4);line-height:1.9;
}

/* ============ FAQ ============ */
.faq{margin-top:var(--s5);border:1px solid var(--line);border-radius:4px;overflow:hidden;}
.faq details{border-bottom:1px solid var(--line-soft);background:var(--card);}
.faq details:last-child{border-bottom:0;}
.faq summary{
  cursor:pointer;list-style:none;padding:16px 20px;
  font-family:var(--f-head);font-weight:700;font-size:15px;
  display:flex;gap:14px;align-items:flex-start;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::before{content:"Q";font-family:var(--f-mono);font-size:12px;color:var(--gold);margin-top:3px;flex:none;}
.faq summary::after{content:"+";font-family:var(--f-mono);color:var(--accent);margin-left:auto;flex:none;}
.faq details[open] summary::after{content:"−";}
.faq__a{padding:0 20px 18px 54px;font-size:14px;color:var(--ink-mid);line-height:1.85;}
@media (max-width:520px){.faq__a{padding-left:20px;}}

/* ============ 会社カード列 ============ */
.co-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);margin-top:var(--s5);}
@media (max-width:880px){.co-grid{grid-template-columns:1fr;}}


/* ============ §08 会話 ============ */
/* 左＝資金調達する側（業種別事業者）／右＝説明する側（ナビ・会社の3人）。固定 */
.talk-panel{background:var(--band);border:1px solid var(--line);border-radius:4px;padding:36px 32px;margin:var(--s6) 0 0;}
/* ★ .talk は既存記事の吹き出しでも使われているクラス名。
   必ず .talk-panel の中だけに限定すること（限定しないと既存の吹き出しが崩れる）。 */
.talk-panel .talk{display:flex;flex-direction:column;gap:20px;max-width:680px;margin:0 auto;}
/* ★キャラクターは全員「立ち姿・幅110px」で統一する（パターンA）。
   丸く切り抜かず、背景も枠も付けない。画像そのものを置く。
   吹き出しは縦中央に合わせる。 */
.turn{display:flex;gap:16px;align-items:center;}
.turn--r{flex-direction:row-reverse;}
.turn__who{flex:none;width:var(--chara-slot,140px);}
.turn .face{width:100%;height:auto;border-radius:0;overflow:visible;background:none;border:0;}
/* ★クラス2つで書くこと。.face img だと「旧本文の後始末」の
   .entry__body img（height:auto）に後から上書きされて高さが揃わない。 */
.turn .face img{
  height:var(--chara-h,200px);width:auto;max-width:100%;max-height:none;
  object-fit:contain;display:block;margin:0 auto;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.5));
}
.turn__name{font-family:var(--f-mono);font-size:10px;letter-spacing:.04em;color:var(--ink-dim);text-align:center;margin-top:6px;}
.bubble{
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:6px;
  padding:14px 18px;font-size:15px;line-height:1.85;max-width:38ch;min-width:16ch;
}
.bubble::before{content:"";position:absolute;top:20px;width:0;height:0;border:8px solid transparent;}
.turn:not(.turn--r) .bubble::before{left:-16px;border-right-color:var(--line);}
.turn--r .bubble::before{right:-16px;border-left-color:var(--line);}
.turn--r .bubble{background:var(--card-2);}
/* ナビゲーター＝媒体側。会社側と見分けが付かないと中立性の仕掛けが機能しない */
.bubble--nav{border-left:3px solid var(--gold);background:#0B1E33;}
@media (max-width:640px){
  .talk-panel{padding:24px 16px;}
  .talk-panel .talk{gap:16px;}
  .turn{gap:10px;}
  .bubble{max-width:100%;min-width:0;font-size:14.5px;}
}

/* ============ §10 表 ============ */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:4px;margin:var(--s4) 0 0;}
.tablewrap table{border-collapse:collapse;width:100%;min-width:720px;font-size:14px;}
.tablewrap th,.tablewrap td{padding:13px 14px;text-align:left;border-bottom:1px solid var(--line-soft);white-space:nowrap;vertical-align:middle;}
.tablewrap thead th{
  background:var(--card-2);font-family:var(--f-mono);font-size:11px;font-weight:500;
  letter-spacing:.14em;color:var(--accent);
}
.tablewrap tbody tr{background:var(--card);}
.tablewrap tbody tr:last-child td{border-bottom:0;}
.tablewrap td.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;color:var(--gold);}
.tablenote{font-size:12.5px;color:var(--ink-dim);line-height:1.85;margin:14px 0 0;}
.tablenote b{color:var(--ink-mid);font-weight:700;}
.asof{font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;}
.slot{font-family:var(--f-mono);font-size:11px;color:var(--ink-dim);border:1px dashed var(--line);padding:1px 6px;border-radius:2px;}

/* ============ 帯CTA（L2） ============ */
.strip{
  border:1px solid var(--line);border-radius:4px;
  background:linear-gradient(120deg,#0F2C45,#0A1D30);
  padding:var(--s5);margin-top:var(--s6);
  display:flex;gap:var(--s4);align-items:center;justify-content:space-between;flex-wrap:wrap;
}
.strip__ttl{font-family:var(--f-head);font-weight:700;font-size:18px;margin:0;}
.strip__sub{font-size:13px;color:var(--ink-mid);margin:4px 0 0;}

/* ============ 常設の控えめな導線（L3） ============ */
/* それとなく出す枠。ボタンにしない。主導線と競合する */
.quiet{border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);background:rgba(127,209,245,.03);}
.quiet .inner{display:flex;gap:var(--s3) var(--s4);align-items:baseline;flex-wrap:wrap;padding-top:18px;padding-bottom:18px;}
.quiet p{font-size:13.5px;color:var(--ink-mid);margin:0;}
.quiet a{font-size:13.5px;border-bottom:1px solid rgba(127,209,245,.4);white-space:nowrap;}

/* ============ 記事本文（single / page 共通） ============ */
.entry__head{margin-bottom:var(--s5);}
.entry__cat{
  display:inline-block;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;
  color:var(--accent);border:1px solid var(--line);border-radius:2px;padding:3px 10px;margin-bottom:var(--s3);
}
.entry__title{
  font-family:var(--f-head);font-weight:900;
  font-size:clamp(24px,4vw,34px);line-height:1.45;color:var(--ink);
  margin:0 0 var(--s4);
	/*text-wrap:balance;*/
}
.entry__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4);font-family:var(--f-mono);font-size:11.5px;color:var(--ink-dim);letter-spacing:.04em;}
.entry__author{display:flex;align-items:center;gap:8px;font-family:var(--f-body);font-size:12.5px;color:var(--ink-mid);letter-spacing:0;}
.entry__author img{width:30px;height:30px;border-radius:50%;object-fit:cover;background:var(--card-2);border:1px solid var(--line);}
.entry__author b{color:var(--ink);font-weight:700;}
.entry__thumb{margin:0 0 var(--s6);border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--card);}
.entry__thumb img{width:100%;}
.no-thumb{
  display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--ink-dim);
  background:linear-gradient(135deg,#16304A,#0B1E33);
}

/* 広告表記。本文より小さく、右寄せ、枠で囲む。
   本文中のどこにあっても同じ見た目になるよう、幅の制限より前に置く。 */
.ad-note,
.entry__body .ad-note,
.front-body .ad-note{
  display:block;width:fit-content;max-width:100%;
  margin:0 0 var(--s5) auto;
  padding:5px 12px;border:1px solid var(--line);border-radius:3px;
  background:var(--band);
  font-size:11.5px;line-height:1.6;color:var(--ink-dim);
  letter-spacing:.02em;text-align:right;
}

/* ★要素ごとに幅を止めない。
   文章だけ70chで止めると、表や画像は幅いっぱいまで伸びるため、
   右端が揃わず本文の右側に余白が残る（1280pxで105px空いていた）。
   幅を止めるときは、要素ごとではなく入れ物（.entry__body 自体）に
   max-width を当てること。そうすれば表も画像も右端が揃う。

   ★2026-09 可読性調整。実測では本文カラムが約780pxあり、
   1行が48文字前後まで伸びて行末から行頭へ目線が戻りにくかった。
   入れ物を40em（約40文字）で止め、そのぶん字を1px上げて行間を広げている。 */
.entry__body{
  max-width:40em;
  font-size:17px;
  line-height:2;
  letter-spacing:.02em;
  color:var(--ink);
}
/* 段落間は1.4em。行間が2なので、これ以上空けると一文ずつが孤立して見える */
.entry__body p{margin:0 0 1.4em;text-wrap:pretty;line-break:strict;}
.entry__body h2{
  font-family:var(--f-head);font-weight:700;font-size:clamp(20px,3vw,26px);line-height:1.45;
  color:var(--ink);margin:var(--s8) 0 var(--s4);padding-top:var(--s2);
  border-top:3px solid var(--gold);
}
.entry__body h3{
  font-family:var(--f-head);font-weight:700;font-size:19px;line-height:1.55;color:var(--ink);
  padding-left:12px;border-left:3px solid var(--accent);margin:var(--s6) 0 var(--s3);
}
.entry__body h4{
  font-family:var(--f-head);font-weight:700;font-size:15px;color:var(--gold);
  margin:var(--s5) 0 var(--s2);padding:0;border:0;
}
.entry__body ul,.entry__body ol{margin:0 0 var(--s4);padding-left:1.4em;}
.entry__body li{margin-bottom:8px;}
.entry__body a{border-bottom:1px solid rgba(127,209,245,.4);}
.entry__body strong,.entry__body b{font-weight:700;color:#fff;}
.entry__body blockquote{
  margin:var(--s4) 0;padding:16px 20px;background:var(--card);
  border:1px solid var(--line);border-left:3px solid var(--ink-dim);border-radius:0 4px 4px 0;
  color:var(--ink-mid);font-size:14.5px;
}
.entry__body img{border-radius:4px;margin:var(--s4) 0;}
.entry__body table{width:100%;border-collapse:collapse;font-size:14px;margin:var(--s4) 0;}
.entry__body th,.entry__body td{border:1px solid var(--line);padding:11px 13px;text-align:left;}
.entry__body thead th{background:var(--card-2);color:var(--accent);font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;font-weight:500;}
.entry__body tbody tr{background:var(--card);}

/* 囲み。朱色を使ってよいのは注意・デメリットだけ */
.box{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:22px;margin:var(--s4) 0;}
.box__ttl{font-family:var(--f-head);font-weight:700;font-size:15px;color:var(--gold);margin-bottom:10px;}
.box--caution{border-left:3px solid var(--alert);}
.box--caution .box__ttl{color:var(--alert);}

.entry__foot{
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);align-items:center;
  margin-top:var(--s7);padding-top:var(--s4);border-top:1px solid var(--line-soft);
}
.post-item__tags{display:flex;flex-wrap:wrap;gap:8px;}
.post-item__tags a{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;color:var(--ink-mid);
  border:1px solid var(--line);border-radius:3px;padding:5px 10px;background:var(--card);
}
.post-item__tags a:hover{color:var(--accent);border-color:var(--accent-deep);}
.entry__share{margin-left:auto;display:flex;gap:8px;}
.entry__share a{
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:3px;color:var(--ink-mid);
  font-family:var(--f-mono);font-size:12px;background:var(--card);
}
.entry__share a:hover{color:var(--accent);border-color:var(--accent-deep);}

/* ============ TOPに読み込む固定ページ本文 ============ */
/* front-page.php が「ホームページの表示」で選んだ固定ページの本文を出す枠 */
/* ★TOPにはサイドバーが無く、本文の器が1112pxまで広がる。
   そのままだと1行69文字になって読みにくい。記事本文と同じ728pxに揃える。
   ただし要素ごとに止めると右端が揃わないので、
   入れ物ごと止めて中央に置く。表も画像も同じ右端で揃う。 */
.front-body{max-width:728px;margin-left:auto;margin-right:auto;}
.front-body > h2:first-child{margin-top:0;}

/* ============ 旧本文（既存の固定ページ・記事）の後始末 ============ */
/* 何年も前にエディタで作った本文が、規定の見た目で表示されるようにする。
   ここを削ると、古いページのレイアウトが崩れる。 */

/* --- 表 --- */
.entry__body table,.front-body table{
  width:100%;border-collapse:collapse;font-size:14px;margin:var(--s4) 0;
  background:var(--card);
}
.entry__body table th,.entry__body table td,
.front-body table th,.front-body table td{
  border:1px solid var(--line);padding:11px 13px;text-align:left;vertical-align:middle;
}
.entry__body table th,.front-body table th{
  background:var(--card-2);color:var(--ink);font-weight:700;
}
/* Cocoonの表クラスの打ち消し（親テーマの白背景が勝ってしまうため） */
.entry__body .table01,.entry__body .table02,.entry__body .table03,
.front-body .table01,.front-body .table02,.front-body .table03{
  background:var(--card) !important;color:var(--ink) !important;
}
.entry__body .table01 th,.front-body .table01 th,
.entry__body .table02 th,.front-body .table02 th,
.entry__body .table03 th,.front-body .table03 th{
  background:var(--card-2) !important;color:var(--ink) !important;border-color:var(--line) !important;
}
.entry__body .table01 td,.front-body .table01 td,
.entry__body .table02 td,.front-body .table02 td,
.entry__body .table03 td,.front-body .table03 td{
  background:transparent !important;color:var(--ink) !important;border-color:var(--line) !important;
}
/* スマホでは表を横スクロールさせる（列を削らない） */
@media (max-width:760px){
  .entry__body table,.front-body table{display:block;overflow-x:auto;white-space:nowrap;}
  .entry__body .scrollable-table,.front-body .scrollable-table{overflow-x:auto;}
}

/* ============ 自前の比較表（.tablewrap）を旧本文用の指定から守る ============ */
/* ★上の「旧本文の後始末」の .entry__body table は、
   §10の .tablewrap table と強さが同じ。CSSは後に書いたほうが勝つため、
   本文の中に置いた比較表が旧本文用の余白と罫線に乗っ取られていた。
   （表の下に24pxの空白が出て、縦の罫線が入っていたのはこれが原因）

   ★クラス名を2回書いて強さだけを上げている。誤記ではない。
     .entry__body を前提にすると、その入れ物が無い場所で効かなくなる。
     どこに置かれた比較表でも必ず効くように、親に依存しない形にしている。
   ★ここは必ず「旧本文の後始末」より後ろに置くこと。上に動かすと再発する。 */
.tablewrap.tablewrap table{
  width:100%;min-width:720px;font-size:14px;
  margin:0;background:transparent;border-collapse:collapse;
}
.tablewrap.tablewrap th,
.tablewrap.tablewrap td{
  border:0;border-bottom:1px solid var(--line-soft);
  padding:13px 14px;text-align:left;vertical-align:middle;white-space:nowrap;
}
.tablewrap.tablewrap thead th{
  background:var(--card-2);color:var(--accent);
  font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.14em;
}
.tablewrap.tablewrap tbody tr{background:var(--card);}
.tablewrap.tablewrap tbody tr:last-child td{border-bottom:0;}
.tablewrap.tablewrap td.num{
  font-family:var(--f-mono);font-variant-numeric:tabular-nums;color:var(--gold);
}
/* 横スクロールは外側の .tablewrap が持っている。
   中の table まで display:block にすると幅が崩れる。 */
@media (max-width:760px){
  .tablewrap.tablewrap table{display:table;overflow:visible;}
}

/* --- 画像・配置 --- */
.entry__body img,.front-body img{max-width:100%;height:auto;border-radius:4px;}
.entry__body figure,.front-body figure{margin:var(--s4) 0;max-width:100%;}
.entry__body .aligncenter,.front-body .aligncenter{margin-left:auto;margin-right:auto;display:block;text-align:center;}
.entry__body .alignright,.front-body .alignright{float:right;margin:0 0 var(--s3) var(--s4);max-width:48%;}
.entry__body .alignleft,.front-body .alignleft{float:left;margin:0 var(--s4) var(--s3) 0;max-width:48%;}
.entry__body .alignwide,.entry__body .alignfull,
.front-body .alignwide,.front-body .alignfull{max-width:100%;margin-left:0;margin-right:0;}
.entry__body::after,.front-body::after{content:"";display:block;clear:both;}
@media (max-width:640px){
  .entry__body .alignright,.entry__body .alignleft,
  .front-body .alignright,.front-body .alignleft{float:none;margin:var(--s4) 0;max-width:100%;}
}
.entry__body .wp-caption-text,.front-body .wp-caption-text,
.entry__body figcaption,.front-body figcaption{
  font-size:12.5px;color:var(--ink-dim);margin-top:8px;line-height:1.7;
}

/* --- 既存の吹き出し（hukidashi / faceimg / talk / balloon） --- */
/* 実際の本文は次の形。1記事も書き換えずに規定§08の見た目にする。
   <div class="hukidashi left">
     <p class="faceimg"><img src="/images/face/face1.jpg" alt="">事業者</p>
     <div class="talk"><div class="balloon">…</div></div>
   </div>
   ※話者名は img の直後の文字（タグで囲まれていない）なので、
     .faceimg を縦並びのflexにして受けている。 */
.hukidashi{
  display:flex;gap:16px;align-items:center;
  margin:0 0 24px;padding:0;background:none;border:0;
}
.hukidashi.right,.hukidashi.hukidashi-right{flex-direction:row-reverse;}
.hukidashi .faceimg{
  flex:none;width:var(--chara-slot,140px);margin:0;padding:0;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  font-family:var(--f-mono);font-size:10px;line-height:1.5;
  color:var(--ink-dim);text-align:center;word-break:keep-all;
}
/* ★立ち姿を丸く切り抜かない。枠も背景も付けない */
.hukidashi .faceimg img{
  height:var(--chara-h,200px);width:auto;max-width:100%;max-height:none;
  object-fit:contain;border-radius:0;
  background:none;border:0;
  margin:0 auto;display:block;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.5));
}
.hukidashi .talk{flex:1 1 auto;min-width:0;margin:0;padding:0;display:flex;}
.hukidashi.right .talk,.hukidashi.hukidashi-right .talk{justify-content:flex-end;}
.hukidashi .balloon{
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:6px;
  padding:14px 18px;font-size:15px;line-height:1.85;color:var(--ink);
  max-width:70ch;min-width:16ch;margin:0;
}
.hukidashi .balloon::before{
  content:"";position:absolute;top:20px;width:0;height:0;border:8px solid transparent;
}
.hukidashi.left .balloon::before,
.hukidashi:not(.right):not(.hukidashi-right) .balloon::before{
  left:-16px;border-right-color:var(--line);
}
.hukidashi.right .balloon,.hukidashi.hukidashi-right .balloon{background:var(--card-2);}
.hukidashi.right .balloon::before,.hukidashi.hukidashi-right .balloon::before{
  right:-16px;border-left-color:var(--line);
}
.hukidashi .balloon p{margin:0;}
.hukidashi .balloon p + p{margin-top:10px;}
@media (max-width:640px){
  .hukidashi{gap:10px;}
  .hukidashi .balloon{max-width:100%;min-width:0;font-size:14.5px;padding:12px 14px;}
}


/* ★キャラクターの表示サイズはここ1か所で決める。
   3系統（.turn / .hukidashi / .speech-wrap）すべてがこの値を見る。
   大きさを変えたくなったら、この数字だけを直すこと。 */
/* 高さで揃える。幅で揃えるとキャラごとに縦横比が違うため
   大きさが揃わない（建設業229px／相談員165pxになっていた）。
   --chara-slot は置き場所の幅。一番横幅のあるキャラが収まる値にすること。 */
:root{--chara-h:200px;--chara-slot:140px;}
@media (max-width:640px){:root{--chara-h:140px;--chara-slot:100px;}}

/* ============ 既存の「流れ」（flow / flow-content / flow_label …） ============ */
/* 実際の本文は次の形。1記事も書き換えずに規定の見た目にする。
   <div class="flow">
     <div class="flow-content main-bdr">
       <div class="flow_label">STEP.1</div>
       <div class="flow_tiflowe">問い合わせ</div>
       <div class="flow_main"><p>…</p></div>
       <div class="flow_marker main-bdr main-bc"></div>
     </div>
   </div>
   ※flow_tiflowe は flow_title の打ち間違いと思われる。
     記事側は直さず、両方のクラス名を受けている。
   ※main-bdr / main-bc はCocoonの色クラス。中では打ち消す。 */
.flow{position:relative;padding-left:34px;margin:var(--s5) 0;}

.flow .flow-content{
  position:relative;
  background:var(--card);
  border:1px solid var(--line) !important;
  border-radius:4px;
  padding:18px 22px;
  margin:0 0 14px;
}
.flow .flow-content:last-child{margin-bottom:0;}

/* 左の線。次の丸まで引いて、最後の1つには引かない */
.flow .flow-content::before{
  content:"";position:absolute;
  left:-28px;top:34px;bottom:-15px;width:1px;
  background:var(--line);
}
.flow .flow-content:last-child::before{content:none;}

/* 丸（空のdivをそのまま使う） */
.flow .flow_marker{
  position:absolute;left:-34px;top:22px;
  width:13px;height:13px;border-radius:50%;
  background:var(--accent) !important;
  border:1px solid var(--accent) !important;
  box-shadow:0 0 0 4px var(--ground);
  padding:0;margin:0;
}

.flow .flow_label{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;
  color:var(--gold);margin:0 0 8px;padding:0;border:0;
}
.flow .flow_tiflowe,
.flow .flow_title{
  font-family:var(--f-head);font-weight:700;font-size:16px;line-height:1.6;
  color:var(--ink);margin:0 0 6px;padding:0;border:0;
}
.flow .flow_main{
  font-size:13.5px;line-height:1.85;color:var(--ink-mid);
  margin:0;padding:0;border:0;
}
.flow .flow_main p{margin:0;font-size:inherit;color:inherit;line-height:inherit;}
.flow .flow_main p + p{margin-top:8px;}

@media (max-width:640px){
  .flow{padding-left:26px;}
  .flow .flow-content{padding:15px 16px;}
  .flow .flow-content::before{left:-21px;top:31px;bottom:-15px;}
  .flow .flow_marker{left:-26px;top:20px;width:11px;height:11px;}
  .flow .flow_tiflowe,.flow .flow_title{font-size:15px;}
}

/* ============ FAQプラグイン（[sc_fs_multi_faq] / [sc_fs_faq]） ============ */
/* functions.php の fd_wrap_faq_shortcode() が出力を .fd-faq で包んでいる。
   プラグイン側のクラス名には一切触れず、中の背景と文字色を全部消してから
   ここで塗り直す。プラグインが更新されても崩れない。 */
.fd-faq{
  background:var(--card);border:1px solid var(--line);border-radius:4px;
  padding:8px 26px 24px;margin:var(--s5) 0;
  color:var(--ink-mid);
}
/* プラグインが付けている白背景・影・角丸を消す */
.fd-faq *{
  background:none !important;background-color:transparent !important;
  box-shadow:none !important;border-radius:0 !important;
  color:inherit !important;
  max-width:none;
}
.fd-faq script,.fd-faq style{display:none !important;}
/* 他所（プラグイン）の入れ物が持っている余白だけを消す。
   自前のマークアップ（fd-faq__ で始まるクラス）は対象外にしている。 */
.fd-faq div:not([class^="fd-faq"]),
.fd-faq section,.fd-faq article,.fd-faq dl,.fd-faq figure{
  margin:0 !important;padding:0 !important;border:0 !important;
}

/* 自前マークアップ（[sc_fs_multi_faq] / [fd_faq]）の1問1答 */
.fd-faq .fd-faq__item + .fd-faq__item{
  margin-top:24px;padding-top:24px;border-top:1px solid var(--line-soft);
}
.fd-faq .fd-faq__q{margin:0;}
.fd-faq .fd-faq__a{margin:10px 0 0;}
.fd-faq .fd-faq__a > :first-child{margin-top:0;}

/* 質問（headline-N で h2〜h4 のどれになるか変わるため全部受ける） */
.fd-faq h2,.fd-faq h3,.fd-faq h4,.fd-faq h5,.fd-faq dt{
  position:relative;
  font-family:var(--f-head);font-weight:700;font-size:16px;line-height:1.7;
  color:var(--ink) !important;
  margin:26px 0 0;padding:0 0 0 34px;
  border:0 !important;
}
.fd-faq h2::before,.fd-faq h3::before,.fd-faq h4::before,
.fd-faq h5::before,.fd-faq dt::before{
  content:"Q";position:absolute;left:0;top:2px;
  width:24px;height:24px;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:12px;font-weight:400;
  color:#04101F;background:var(--accent) !important;border-radius:2px !important;
}

/* 回答 */
.fd-faq p,.fd-faq dd,.fd-faq li{
  position:relative;
  font-size:14.5px;line-height:1.9;color:var(--ink-mid) !important;
  margin:10px 0 0;padding-left:34px;
}
.fd-faq p::before,.fd-faq dd::before{
  content:"A";position:absolute;left:0;top:3px;
  width:24px;height:24px;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:12px;
  color:var(--ink-dim);border:1px solid var(--line) !important;border-radius:2px !important;
}
.fd-faq li{padding-left:0;margin:6px 0 0;}
.fd-faq li::before{content:none;}
.fd-faq a{color:var(--accent) !important;border-bottom:1px solid rgba(127,209,245,.4);}
.fd-faq img{margin:10px 0 0 34px;border-radius:4px !important;}

@media (max-width:640px){
  .fd-faq{padding:6px 16px 18px;}
  .fd-faq h2,.fd-faq h3,.fd-faq h4,.fd-faq h5,.fd-faq dt{font-size:15px;padding-left:30px;}
  .fd-faq p,.fd-faq dd{padding-left:30px;font-size:14px;}
  .fd-faq h2::before,.fd-faq h3::before,.fd-faq h4::before,
  .fd-faq h5::before,.fd-faq dt::before,
  .fd-faq p::before,.fd-faq dd::before{width:21px;height:21px;font-size:11px;}
}

/* ============ 記事内の広告ボタン（ショートコード [fd_cta]） ============ */
/* これから書く記事はこちら。既存記事の class="ad" 版は下に別で用意している。
   クラス名を fd- にしているのは、ad というクラス名が
   広告ブロッカーに消される事故を避けるため。 */
.fd-cta{
  max-width:600px;margin:var(--s5) auto;
  padding:22px 20px 20px;
  background:var(--card);border:1px solid var(--line);border-radius:4px;
  text-align:center;
}
.fd-cta .fd-cta__lead{
  font-family:var(--f-head);font-weight:700;
  font-size:14px;line-height:1.6;letter-spacing:.03em;
  color:var(--gold);margin:0 0 12px;max-width:none;
}
.fd-cta .fd-cta__btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;margin:0;
  padding:17px 24px;
  font-family:var(--f-head);font-weight:700;font-size:16px;line-height:1.4;
  background:var(--accent);color:#04101F;
  border:1px solid transparent;border-radius:3px;
  text-decoration:none;
}
.fd-cta .fd-cta__btn::after{content:"→";font-family:var(--f-mono);font-size:13px;}
.fd-cta .fd-cta__btn:hover{background:#A2E0FA;color:#04101F;}
.fd-cta .fd-cta__note{
  font-size:11.5px;line-height:1.7;color:var(--ink-dim);
  margin:12px 0 0;max-width:none;
}
@media (max-width:640px){
  .fd-cta{padding:18px 14px 16px;}
  .fd-cta .fd-cta__lead{font-size:13px;}
  .fd-cta .fd-cta__btn{font-size:15px;padding:16px 18px;}
}

/* ---- キャラクター付き（[fd_cta_chara]） ----
   枠の右上にキャラクターが手をかけて覗く形。指先だけが枠に乗る。
   ★大きさを変えるときは --cta-chara-h だけを直すこと。
     上の余白（margin-top）もこの値から計算しているため、
     height を別の場所に書くと絵が前の段落に重なる。 */
.fd-cta--chara{
  --cta-chara-h:72px;   /* キャラクターの高さ */
  --cta-chara-dip:4px;  /* 枠に食い込ませる量。増やすと指以外も枠に入る */
  position:relative;
  /* 枠の上に出る分（高さ − 食い込み）だけ余白を確保する */
  margin-top:calc(var(--s5) + var(--cta-chara-h) - var(--cta-chara-dip));
}
/* ★クラス2つで書くこと。.fd-cta__chara だけだと
   「画像・配置」の .entry__body img（height:auto）に詳細度で負け、
   画像が原寸（300px）で表示される。margin と border-radius も
   同じ行で付けられるため、ここで打ち消しておく。 */
.fd-cta--chara .fd-cta__chara{
  position:absolute;right:14px;bottom:100%;
  margin:0 0 calc(var(--cta-chara-dip) * -1) 0;
  height:var(--cta-chara-h);width:auto;max-width:none;
  border-radius:0;
  z-index:2;pointer-events:none;
  filter:drop-shadow(0 4px 12px rgba(4,16,31,.5));
}
@media (max-width:640px){
  .fd-cta--chara{--cta-chara-h:60px;}
  .fd-cta--chara .fd-cta__chara{right:10px;}
}

/* --- 既存の広告ボタン（ad-small / ad / buttonhalf / ad-smallbottom） --- */
/* 実際の本文は次の形。1記事も書き換えずに規定の見た目にする。
   <div align="center"><span class="ad-small">＼　…　／</span></div>
   <div class="ad"><a href="…" class="buttonhalf al-c">公式サイトはコチラ</a></div>
   <div align="center"><span class="ad-smallbottom">※…</span></div>
   ※3つが兄弟要素で並ぶ形のため、共通の親が無い。
     幅と中央寄せを3つそれぞれに同じ値で持たせて1つの塊に見せている。 */

.entry__body .ad,
.front-body .ad{
  max-width:560px;margin:0 auto;padding:0;text-align:center;
}

.ad-small,
.ad-smallbottom{
  display:block;max-width:560px;margin:0 auto;text-align:center;
}
.ad-small{
  font-family:var(--f-head);font-weight:700;
  font-size:14px;line-height:1.6;letter-spacing:.03em;
  color:var(--gold);
  padding-bottom:12px;
}
.ad-smallbottom{
  font-size:11.5px;line-height:1.7;color:var(--ink-dim);
  padding-top:12px;
}

/* ボタン本体。規定§09の .btn と同じ型。色も同じ（朱色は使わない） */
.entry__body .buttonhalf,
.front-body .buttonhalf{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;max-width:560px;margin:0 auto;
  padding:17px 24px;
  font-family:var(--f-head);font-weight:700;font-size:16px;line-height:1.4;
  background:var(--accent);color:#04101F;
  border:1px solid transparent;border-radius:3px;
  text-decoration:none;
}
/* 本文中のaに付く下線を、このボタンだけ打ち消す */
.entry__body .buttonhalf{border-bottom:1px solid transparent;}
.entry__body .buttonhalf::after,
.front-body .buttonhalf::after{content:"→";font-family:var(--f-mono);font-size:13px;}
.entry__body .buttonhalf:hover,
.front-body .buttonhalf:hover{background:#A2E0FA;color:#04101F;}

/* 3つをまとめて広告の枠に見せる。:has()が効かない古い環境では
   枠が付かないだけで、上のフラットな見た目のまま崩れない。 */
.entry__body div:has(> .ad-small),
.front-body div:has(> .ad-small){
  max-width:600px;margin:var(--s5) auto 0;padding:22px 20px 0;
  background:var(--card);border:1px solid var(--line);border-bottom:0;
  border-radius:4px 4px 0 0;
}
.entry__body .ad:has(.buttonhalf),
.front-body .ad:has(.buttonhalf){
  max-width:600px;padding:0 20px;
  background:var(--card);
  border-left:1px solid var(--line);border-right:1px solid var(--line);
}
.entry__body div:has(> .ad-smallbottom),
.front-body div:has(> .ad-smallbottom){
  max-width:600px;margin:0 auto var(--s5);padding:0 20px 20px;
  background:var(--card);border:1px solid var(--line);border-top:0;
  border-radius:0 0 4px 4px;
}

@media (max-width:640px){
  .entry__body .buttonhalf,
  .front-body .buttonhalf{font-size:15px;padding:16px 18px;}
  .ad-small{font-size:13px;}
  .entry__body div:has(> .ad-small),
  .front-body div:has(> .ad-small){padding:18px 14px 0;}
  .entry__body .ad:has(.buttonhalf),
  .front-body .ad:has(.buttonhalf){padding:0 14px;}
  .entry__body div:has(> .ad-smallbottom),
  .front-body div:has(> .ad-smallbottom){padding:0 14px 16px;}
}

/* ============ Cocoonの吹き出しを規定§08の見た目に合わせる ============ */
/* 編集画面のCocoon「吹き出し」ボタンで入れた会話を、規定の型で表示する。
   左＝資金調達する側（業種別事業者）／右＝説明する側（ナビ・会社の3人） */
.speech-wrap{
  display:flex;gap:16px;align-items:center;
  margin:0 0 24px;padding:0;background:none;border:0;
}
.speech-wrap.sbp-r{flex-direction:row-reverse;}
.speech-person{flex:none;width:var(--chara-slot,140px);margin:0;border:0;background:none;}
.speech-icon{
  width:100%;height:auto;margin:0;border-radius:0;overflow:visible;
  background:none;border:0;
}
.speech-icon img,.speech-icon-image{
  height:var(--chara-h,200px);width:auto;max-width:100%;max-height:none;
  object-fit:contain;border-radius:0;margin:0 auto;display:block;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.5));
}
.speech-name{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.04em;color:var(--ink-dim);
  text-align:center;margin-top:6px;border:0;background:none;padding:0;width:auto;
}
.speech-balloon{
  position:relative;background:var(--card);border:1px solid var(--line);border-radius:6px;
  padding:14px 18px;font-size:15px;line-height:1.85;color:var(--ink);
  max-width:38ch;min-width:16ch;margin:0;
}
.speech-balloon p{margin:0;}
.speech-balloon p+p{margin-top:10px;}
.speech-balloon::before,.speech-balloon::after{
  content:"";position:absolute;top:20px;width:0;height:0;border:8px solid transparent;
}
.sbp-l .speech-balloon::before{left:-16px;border-right-color:var(--line);}
.sbp-l .speech-balloon::after{left:-14px;border-right-color:var(--card);}
.sbp-r .speech-balloon{background:var(--card-2);}
.sbp-r .speech-balloon::before{right:-16px;border-left-color:var(--line);}
.sbp-r .speech-balloon::after{right:-14px;border-left-color:var(--card-2);}
@media (max-width:640px){
  .speech-balloon{max-width:100%;min-width:0;font-size:14.5px;}
}

/* ============ サイドバー ============ */
.aside{display:flex;flex-direction:column;gap:var(--s4);position:sticky;top:88px;}
@media (max-width:1023px){.aside{position:static;}}
.widget{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:20px;}
.widget__ttl{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;color:var(--accent);
  border-top:3px solid var(--gold);padding-top:8px;display:inline-block;margin-bottom:var(--s3);
}
.side-rank a{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line-soft);color:var(--ink);}
.side-rank a:last-child{border-bottom:0;}
.side-rank a:hover{color:var(--accent);}
.side-rank__no{
  flex:none;width:22px;height:22px;border-radius:2px;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:11px;color:var(--ink-dim);border:1px solid var(--line);margin-top:3px;
}
.side-rank__no--1,.side-rank__no--2,.side-rank__no--3{color:#04101F;background:var(--gold);border-color:var(--gold);}
.side-rank__ttl{font-size:13px;line-height:1.7;}
.side-cat a{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-soft);font-size:13px;color:var(--ink-mid);}
.side-cat a:last-child{border-bottom:0;}
.side-cat a:hover{color:var(--accent);}
.side-cat span{font-family:var(--f-mono);font-size:11px;color:var(--ink-dim);}
.widget--chara{text-align:center;background:var(--band);}
.widget--chara img{height:150px;width:auto;margin:0 auto 12px;}
.widget--chara p{font-size:13px;color:var(--ink-mid);line-height:1.8;margin-bottom:var(--s3);}
.widget--chara .btn{width:100%;justify-content:center;font-size:13px;padding:11px 16px;}

/* ============ ページャ ============ */
.pager{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:var(--s7);}
.pager a,.pager span{
  min-width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 12px;border:1px solid var(--line);border-radius:3px;background:var(--card);
  font-family:var(--f-mono);font-size:13px;color:var(--ink-mid);
  /* ★「次へ ▶」は日本語なのでどこでも改行できてしまう。
     折り返すと高さ40pxの枠から文字がはみ出す。必ず1行に保つこと。 */
  white-space:nowrap;flex:0 0 auto;width:auto;box-sizing:border-box;
}
/* 「◀ 前へ」「次へ ▶」は文字数が多いので左右を広めに */
.pager .pager__nav{padding:0 16px;letter-spacing:.02em;}
.pager a:hover{color:var(--accent);border-color:var(--accent-deep);}
.pager .is-current{color:#04101F;background:var(--accent);border-color:var(--accent);}
.pager .is-dots{background:none;border-color:transparent;}

/* ============ 前後・関連 ============ */
.prevnext{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);margin-top:var(--s6);}
@media (max-width:640px){.prevnext{grid-template-columns:1fr;}}
.prevnext a{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:16px 18px;display:flex;flex-direction:column;gap:6px;color:var(--ink);}
.prevnext a:hover{border-color:var(--accent-deep);}
.prevnext__dir{font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;color:var(--accent);}
.prevnext__ttl{font-family:var(--f-head);font-weight:700;font-size:14px;line-height:1.65;}

.related{margin-top:var(--s8);}
.related__head{display:flex;align-items:center;gap:14px;margin-bottom:var(--s4);}
.related__head .avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--card-2);border:1px solid var(--line);flex:none;}
.related__head h2{
  font-family:var(--f-head);font-weight:700;font-size:20px;color:var(--ink);
  padding-top:8px;border-top:3px solid var(--gold);
}
.related__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);}
@media (max-width:860px){.related__grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:520px){.related__grid{grid-template-columns:1fr;}}

/* ============ スマホのタップ領域 ============ */
/* 指で押す前提。テキストリンクは高さ36px以上を確保する */
@media (max-width:768px){
  .logo__name a{display:inline-block;padding:5px 0;}
  .quiet .inner a{display:inline-block;padding:7px 0;}
  .more a{display:inline-block;padding:9px 0;}
  .footer__menu a{display:inline-block;padding:7px 0;}
  .footer__areas .list{gap:2px 14px;}
  .footer__areas a{display:inline-block;padding:8px 0;}
  .breadcrumb a{display:inline-block;padding:7px 0;}
  .tablewrap td a{display:inline-block;padding:9px 0;}
  .search{padding:9px 12px;}
  .search input{font-size:16px;padding:8px 0;} /* iOSの自動ズームを防ぐ */
  .unit{font-size:11px;}
  .entry__cat{padding:7px 13px;}
  .post-item__tags a{padding:8px 12px;}
  .areas a,.chips a,.tag-cloud a,.sortbar__opts a{padding:10px 14px;}
}

/* ============ フッター ============ */
.footer{background:var(--deep);border-top:1px solid var(--line);padding:var(--s8) 0 var(--s5);}
@media (max-width:640px){.footer{padding:56px 0 32px;}}
.footer__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s6) var(--s5);}
@media (max-width:900px){.footer__grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:520px){.footer__grid{grid-template-columns:1fr;}}
.footer__ttl{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;color:var(--accent);margin-bottom:14px;}
.footer .search{margin-top:var(--s4);background:var(--card);}
.footer .search input{width:100%;}
.footer__menu{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.footer__menu a{font-size:13px;color:var(--ink-mid);}
.footer__menu a:hover{color:var(--accent);}
.footer__areas{max-width:var(--wrap);margin:var(--s6) auto 0;padding:var(--s5) var(--gut) 0;border-top:1px solid var(--line-soft);}
.footer__areas .list{display:flex;flex-wrap:wrap;gap:6px 14px;}
.footer__areas a{font-size:12px;color:var(--ink-dim);}
.footer__areas a:hover{color:var(--accent);}
.copyright{
  max-width:var(--wrap);margin:var(--s6) auto 0;padding:var(--s4) var(--gut) 0;
  border-top:1px solid var(--line-soft);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.05em;color:var(--ink-dim);
}


.wpcf7-spinner{display:block !important;margin:12px auto 0 !important;}

/* ============ ページトップへ戻る ============ */
/* Cocoon側のボタンは使わない。念のため隠しておく。
   「Cocoon設定 > 本文 > トップへ戻るボタン」もオフにすること。 */
#go-to-top,.go-to-top{display:none !important;}

.fd-totop{
  position:fixed;right:16px;bottom:16px;z-index:60;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  width:76px;padding:0;border:0;background:none;
  /* 出るまでは触れないようにする（見えない物を押せてしまうのを防ぐ） */
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .2s,transform .2s,visibility .2s;
}
.fd-totop.is-visible{opacity:1;visibility:visible;transform:none;}
.fd-totop img{
  width:76px;height:auto;display:block;
  filter:drop-shadow(0 6px 16px rgba(0,0,0,.6));
}
.fd-totop span{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;
  color:var(--accent);line-height:1;
}
.fd-totop:hover span{color:#B9E7FB;}

/* ふわふわ浮かせる。上下だけだと機械的に見えるので、
   わずかな傾きを混ぜている。3秒で1往復。
   ★transform を使うので、:hover で translateY を足さないこと。打ち消し合う。
     速さで反応させている。 */
@keyframes fd-float{
  0%   {transform:translateY(0)    rotate(-1.5deg);}
  50%  {transform:translateY(-8px) rotate(1.5deg);}
  100% {transform:translateY(0)    rotate(-1.5deg);}
}
/* ボタンが出ているときだけ動かす（隠れている間は動かさない） */
.fd-totop.is-visible img{
  animation:fd-float 3s ease-in-out infinite;
  transform-origin:50% 70%;
}
.fd-totop:hover img{animation-duration:1.6s;}

@media (max-width:640px){
  .fd-totop{right:10px;bottom:10px;width:58px;}
  .fd-totop img{width:58px;}
  .fd-totop span{font-size:9px;}
}

/* ============ 出典・参照リンク（span.migi / span.right） ============ */
/* ★.right は既存の吹き出し（div.hukidashi.right）でも使っている名前。
   必ず span.right と要素名まで書くこと。.right だけだと吹き出しが壊れる。
   migi は新しく使う名前。置換が終わったら span.right の行は消してよい。 */
.entry__body span.migi,
.front-body span.migi,
.entry__body span.right,
.front-body span.right{
  display:block;              /* spanは行内要素。これが無いと右寄せが効かない */
  text-align:right;
  clear:both;                 /* 上に回り込み画像があっても重ならない */
  margin:16px 0 40px;         /* この下の余白が &nbsp; の代わり */
  font-size:13px;
  line-height:1.8;
  color:var(--ink-dim);
}
.entry__body span.migi a,
.front-body span.migi a,
.entry__body span.right a,
.front-body span.right a{
  color:var(--accent);
  border-bottom:1px solid rgba(127,209,245,.4);
}
.entry__body span.migi i,
.front-body span.migi i,
.entry__body span.right i,
.front-body span.right i{
  margin:0 3px;
  font-size:11px;
  color:var(--gold);
}

/* ============ 広告ボタンの枠の底を必ず閉じる ============ */
/* 枠は3つの兄弟要素で作っている。注記（.ad-smallbottom）が無い記事では
   底のパーツが存在せず、枠が開いたままになる（ボタンの下に余白が無い状態）。
   注記が無いときは、ボタンの入れ物（.ad）に底を持たせる。 */
.entry__body .ad:has(.buttonhalf),
.front-body .ad:has(.buttonhalf){
  padding:0 20px 20px;
  border-bottom:1px solid var(--line);
  border-radius:0 0 4px 4px;
  margin-bottom:var(--s5);
}
/* 注記が続くときは底を開ける（下のパーツが閉じるため） */
.entry__body .ad:has(.buttonhalf):has(+ div .ad-smallbottom),
.front-body .ad:has(.buttonhalf):has(+ div .ad-smallbottom){
  padding-bottom:0;border-bottom:0;border-radius:0;margin-bottom:0;
}

/* ============ 会話を前後のコンテンツから離す ============ */
/* 会話が続いている間は詰めたまま、前後だけ広げる */
.hukidashi,.speech-wrap{margin:40px 0;}
.hukidashi:has(+ .hukidashi),
.speech-wrap:has(+ .speech-wrap){margin-bottom:22px;}
.hukidashi + .hukidashi,
.speech-wrap + .speech-wrap{margin-top:22px;}
.talk-panel{margin:var(--s6) 0;}
@media (max-width:640px){
  .hukidashi,.speech-wrap{margin:30px 0;}
  .hukidashi:has(+ .hukidashi),
  .speech-wrap:has(+ .speech-wrap){margin-bottom:18px;}
  .hukidashi + .hukidashi,
  .speech-wrap + .speech-wrap{margin-top:18px;}
}




/* ============ 既存の囲みリスト（box1/box2/box3 + check-list） ============ */
/* ※box1〜3 と box-title は親テーマ側にも指定があるため、
     クラス2つ分の強さで書いて確実に打ち消している。 */
.entry__body .box1,.entry__body .box2,.entry__body .box3,
.front-body .box1,.front-body .box2,.front-body .box3{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:4px;
  padding:22px 24px;
  margin:var(--s5) 0;
  color:var(--ink);
  box-shadow:none;
}
.entry__body .box1 .box-title,.entry__body .box2 .box-title,.entry__body .box3 .box-title,
.front-body .box1 .box-title,.front-body .box2 .box-title,.front-body .box3 .box-title{
  display:block;
  font-family:var(--f-head);font-weight:700;font-size:15px;line-height:1.6;
  color:var(--gold);
  margin:0 0 14px;padding:0;border:0;background:none;
}
/* リストは箱の外で使われていても同じ見た目にする */
.entry__body .check-list,
.front-body .check-list{
  list-style:none;
  margin:0;padding:0;
  display:flex;flex-direction:column;gap:12px;
}
.entry__body .check-list li,
.front-body .check-list li{
  position:relative;
  margin:0;padding-left:28px;
  font-size:14.5px;line-height:1.8;color:var(--ink);
}
.entry__body .check-list li::before,
.front-body .check-list li::before{
  content:"✓";position:absolute;left:0;top:4px;
  width:18px;height:18px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:11px;line-height:1;
  color:#04101F;background:var(--accent);border-radius:2px;
}
@media (max-width:640px){
  .entry__body .box1,.entry__body .box2,.entry__body .box3,
  .front-body .box1,.front-body .box2,.front-body .box3{padding:18px 16px;}
  .entry__body .check-list li,.front-body .check-list li{font-size:14px;padding-left:26px;}
}

/* ============ 番号付きの囲みリスト（box3--num） ============
   使い方（HTMLは既存のまま、クラスを1つ足すだけ）

     <div class="box3 box3--num">
     <span class="box-title">6つの強み</span>
     <ul class="check-list">
     <li>最短即日入金</li>
     …
     </ul>
     </div>

   ★番号は counter で自動採番する。項目を増減しても書き換え不要。
   ★英字ラベルと項目数（06 など）は入れていない。
     box3 は他の記事でも使うため、中身に依存する飾りを持たせないこと。
   ★クラス2つ分の強さで書いているのは、上の box1〜3 の指定と
     親テーマ側の指定を確実に打ち消すため。 */

/* 見出し：金色の文字を金色の下線で受ける */
.entry__body .box3--num .box-title,
.front-body .box3--num .box-title{
  font-size:16px;line-height:1.6;color:var(--gold);
  padding-bottom:12px;margin-bottom:4px;
  border-bottom:2px solid var(--gold);
}

/* リスト本体。チェックマークをやめ、counter に切り替える */
.entry__body .box3--num .check-list,
.front-body .box3--num .check-list{
  counter-reset:fdnum;
  gap:0;                      /* 罫線で区切るので gap は使わない */
}
.entry__body .box3--num .check-list li,
.front-body .box3--num .check-list li{
  counter-increment:fdnum;
  display:flex;align-items:baseline;gap:14px;
  padding:15px 2px;
  border-bottom:1px solid var(--line-soft);
  font-family:var(--f-head);font-weight:700;
  font-size:15px;line-height:1.65;color:var(--ink);
}
/* ::before を「✓」から番号に差し替える。
   position:absolute をやめて flex の1つ目の子として置くため、
   left / top / width / height をすべて打ち消す。 */
.entry__body .box3--num .check-list li::before,
.front-body .box3--num .check-list li::before{
  content:counter(fdnum,decimal-leading-zero);
  position:static;left:auto;top:auto;
  width:auto;height:auto;flex:none;
  border:0;border-radius:0;background:none;
  font-family:var(--f-mono);font-weight:400;
  font-size:12px;letter-spacing:.08em;color:var(--ink-dim);
}
/* li の padding-left は ::before が絶対配置だった頃の名残なので消す */
.entry__body .box3--num .check-list li,
.front-body .box3--num .check-list li{padding-left:2px;}

@media (max-width:640px){
  .entry__body .box3--num .check-list li,
  .front-body .box3--num .check-list li{
    font-size:14.5px;gap:11px;padding:13px 2px;
  }
}



/* ============ おススメ会社の表（.osusumerank）============ */
/* 表が3つ並ぶが、それぞれが独立に列幅を決めるため揃わない。
   table-layout:fixed で列幅を固定し、3表を必ず同じ幅にする。
   ★.table01 側の指定が !important なので、こちらも !important が要る。 */
.osusumerank{display:flex;flex-direction:column;gap:16px;margin:var(--s5) 0;}

.entry__body .osusumerank table,
.front-body .osusumerank table{
  table-layout:fixed;width:100%;margin:0;
  border:1px solid var(--line) !important;border-radius:4px;
  border-collapse:separate;border-spacing:0;overflow:hidden;
  background:var(--card) !important;
}
.entry__body .osusumerank th,.entry__body .osusumerank td,
.front-body .osusumerank th,.front-body .osusumerank td{
  border:0 !important;border-bottom:1px solid var(--line-soft) !important;
  padding:12px 14px;vertical-align:middle;white-space:normal;
  background:transparent !important;color:var(--ink) !important;
}
/* 見出し行。1列目＝会社名、2〜4列目＝項目名 */
.entry__body .osusumerank thead th,
.front-body .osusumerank thead th{
  background:var(--card-2) !important;
  font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.12em;
  color:var(--accent) !important;text-align:left;
}
.entry__body .osusumerank thead th:first-child,
.front-body .osusumerank thead th:first-child{
  font-family:var(--f-head);font-size:15px;font-weight:700;letter-spacing:0;
  color:var(--ink) !important;
  width:220px;
}

/* ロゴとボタンの列 */
.entry__body .osusumerank tbody th,
.front-body .osusumerank tbody th{
  text-align:center;border-right:1px solid var(--line-soft) !important;
}
.entry__body .osusumerank tbody th img,
.front-body .osusumerank tbody th img{
  width:100%;max-width:190px;height:auto;margin:0 auto;border-radius:3px;
}
.entry__body .osusumerank tbody td p,
.front-body .osusumerank tbody td p{margin:0;font-size:14px;line-height:1.7;}
/* 説明文の行 */
.entry__body .osusumerank tbody tr:last-child td,
.front-body .osusumerank tbody tr:last-child td{
  font-size:13.5px;line-height:1.85;color:var(--ink-mid) !important;
  border-bottom:0 !important;
}

/* 詳細／公式サイトのボタン。今は2つが繋がって1行に見えている */
.entry__body .osusumerank .ad,
.front-body .osusumerank .ad{
  max-width:none;margin:12px 0 0;padding:0;
  display:flex;flex-direction:column;gap:8px;
  background:none !important;border:0 !important;
}
.entry__body .osusumerank .buttonrank,
.front-body .osusumerank .buttonrank{
  display:flex;align-items:center;justify-content:center;
  padding:9px 12px;border-radius:3px;
  font-family:var(--f-head);font-weight:700;font-size:13px;line-height:1.4;
  text-decoration:none;border:1px solid transparent;
}
/* 1つ目＝詳細（サイト内）は枠線だけ。2つ目＝公式サイトは塗り */
.entry__body .osusumerank .buttonrank:nth-child(1),
.front-body .osusumerank .buttonrank:nth-child(1){
  background:transparent;border-color:var(--accent);color:var(--accent) !important;
}
.entry__body .osusumerank .buttonrank:nth-child(2),
.front-body .osusumerank .buttonrank:nth-child(2){
  background:var(--accent);color:#04101F !important;
}

/* --- スマホ：表をやめて縦積みのカードにする --- */
@media (max-width:760px){
  .entry__body .osusumerank table,.front-body .osusumerank table,
  .entry__body .osusumerank thead,.front-body .osusumerank thead,
  .entry__body .osusumerank tbody,.front-body .osusumerank tbody,
  .entry__body .osusumerank tr,.front-body .osusumerank tr,
  .entry__body .osusumerank th,.front-body .osusumerank th,
  .entry__body .osusumerank td,.front-body .osusumerank td{
    display:block;width:auto !important;overflow:visible;white-space:normal;
  }
  .entry__body .osusumerank thead th:not(:first-child),
  .front-body .osusumerank thead th:not(:first-child){display:none;}
  .entry__body .osusumerank tbody th,
  .front-body .osusumerank tbody th{border-right:0 !important;}
  /* 値の行にラベルを付ける */
  .entry__body .osusumerank tbody tr:first-child td,
  .front-body .osusumerank tbody tr:first-child td{
    display:flex;align-items:flex-start;gap:14px;padding:10px 14px;
  }
  .entry__body .osusumerank tbody tr:first-child td::before,
  .front-body .osusumerank tbody tr:first-child td::before{
    flex:none;width:5.5em;padding-top:3px;
    font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;color:var(--accent);
  }
  .entry__body .osusumerank tbody tr:first-child td:nth-of-type(1)::before,
  .front-body .osusumerank tbody tr:first-child td:nth-of-type(1)::before{content:"対象";}
  .entry__body .osusumerank tbody tr:first-child td:nth-of-type(2)::before,
  .front-body .osusumerank tbody tr:first-child td:nth-of-type(2)::before{content:"契約形態";}
  .entry__body .osusumerank tbody tr:first-child td:nth-of-type(3)::before,
  .front-body .osusumerank tbody tr:first-child td:nth-of-type(3)::before{content:"スピード";}
  .entry__body .osusumerank tbody th img,
  .front-body .osusumerank tbody th img{max-width:220px;}
}

/* ============ 記事冒頭の「このページで分かること」（.firstframe） ============ */
/* 記事の先頭に置く要約。目次（.article-toc）と同じ型に合わせて、
   記事の入り口の見た目を揃えている。新しい型は作っていない。 */
.entry__body .firstframe,
.front-body .firstframe{
  background:var(--band);
  border:1px solid var(--line);
  border-radius:4px;
  padding:24px 28px;
  margin:var(--s5) 0 var(--s6);
}
.entry__body .firstframe:first-child,
.front-body .firstframe:first-child{margin-top:0;}

.entry__body .firstframe-title,
.front-body .firstframe-title{
  display:inline-block;
  font-family:var(--f-head);font-weight:700;font-size:16px;line-height:1.5;
  color:var(--ink);
  border-top:3px solid var(--gold);
  padding:8px 0 0;margin:0 0 14px;
  background:none;
}
.entry__body .firstframe ul,
.front-body .firstframe ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:10px;
}
.entry__body .firstframe li,
.front-body .firstframe li{
  position:relative;margin:0;padding-left:20px;
  font-size:14.5px;line-height:1.8;color:var(--ink);
}
/* 印は規定の丸（.listbox と同じ）。新しい記号は増やさない */
.entry__body .firstframe li::before,
.front-body .firstframe li::before{
  content:"";position:absolute;left:0;top:11px;
  width:6px;height:6px;border-radius:50%;background:var(--accent);
}
@media (max-width:640px){
  .entry__body .firstframe,.front-body .firstframe{padding:20px 16px;}
  .entry__body .firstframe li,.front-body .firstframe li{font-size:14px;}
}

/* ============================================================
   ファクタリング診断ツール  CSS  v2
   貼り付け先: cocoon-child-master/common.css の末尾
   ------------------------------------------------------------
   サイト実測値に合わせています（2026-09-07 実測）
     本文        18px / line-height 1.85 / Noto Sans JP
     見出し      Zen Kaku Gothic New（未使用だった500ウェイトを使用）
     コンテンツ幅 .inner が max-width:1160px / padding:0 24px で確保
     背景        body = #04101F
   → .fd-sd 自身は padding も背景も持ちません。既存の .inner に委ねます。
   ============================================================ */
.fd-sd{
  --fd-panel:#0D1E33; --fd-panel2:#12293F; --fd-line:#22405F;
  --fd-blue:#7FD1F5; --fd-gold:#F0C674; --fd-text:#E8EFF7; --fd-dim:#9DB2CA;
  --fd-ok:#5BD6A4; --fd-ng:#FF8A8A;
  color:var(--fd-text);
  font-size:18px; line-height:1.85;
  scroll-margin-top:80px;   /* 固定ヘッダーに潜らないように */
  font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
}
.fd-sd *{box-sizing:border-box; min-width:0}
.fd-sd h2,.fd-sd h3,.fd-sd h4,.fd-sd p,.fd-sd ul,.fd-sd ol{margin:0}
.fd-sd h2,.fd-sd h3,.fd-sd h4,
.fd-sd .fd-q__ttl,.fd-sd .fd-pr__name,.fd-sd .fd-card__name,.fd-sd .fd-opt b{
  font-family:"Zen Kaku Gothic New",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
}

/* --- ヘッダ --- */
.fd-sd__eyebrow{font-size:12px;letter-spacing:.18em;color:var(--fd-gold);font-weight:700;
  border-top:2px solid var(--fd-gold);display:inline-block;padding-top:8px;margin-bottom:14px}
.fd-sd__title{font-size:30px;font-weight:700;line-height:1.45;margin-bottom:12px !important}
.fd-sd__lead{font-size:16px;color:var(--fd-dim);margin-bottom:20px !important}
.fd-sd__clock{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--fd-blue);
  background:rgba(127,209,245,.08);border:1px solid rgba(127,209,245,.25);
  border-radius:999px;padding:6px 15px;margin-bottom:24px;line-height:1.6}
@media(max-width:767px){.fd-sd__title{font-size:22px}.fd-sd__lead{font-size:15px}.fd-sd__clock{font-size:13px}}

/* --- 進捗 --- */
.fd-sd__bar{display:flex;gap:5px;margin-bottom:28px}
.fd-sd__bar span{flex:1;height:3px;background:#17293F;border-radius:2px;transition:background .25s}
.fd-sd__bar span.is-on{background:var(--fd-blue)}

/* --- 設問 --- */
.fd-q{display:none}
.fd-q.is-active{display:block}
.fd-q__no{font-size:12px;letter-spacing:.14em;color:var(--fd-blue);font-weight:700;margin-bottom:6px}
.fd-q__ttl{font-size:24px;font-weight:700;line-height:1.5;margin-bottom:6px !important}
.fd-q__sub{font-size:15px;color:var(--fd-dim);margin-bottom:20px !important;line-height:1.8}
@media(max-width:767px){.fd-q__ttl{font-size:20px}.fd-q__sub{font-size:14px}}

.fd-opts{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:22px}
@media(min-width:600px){.fd-opts--2{grid-template-columns:1fr 1fr}}
.fd-opt{display:block;width:100%;text-align:left;background:var(--fd-panel);color:var(--fd-text);
  border:1px solid var(--fd-line);border-radius:6px;padding:16px 18px;cursor:pointer;
  font-family:inherit;font-size:17px;line-height:1.6;position:relative;
  transition:border-color .15s,background .15s}
.fd-opt:hover,.fd-opt:focus-visible{border-color:var(--fd-blue);background:var(--fd-panel2);outline:none}
.fd-opt.is-sel{border-color:var(--fd-blue);background:var(--fd-panel2);box-shadow:inset 0 0 0 1px var(--fd-blue)}
.fd-opt b{display:block;font-weight:700;font-size:17px;padding-right:56px}
.fd-opt small{display:block;color:var(--fd-dim);font-size:14px;margin-top:4px;line-height:1.7}
.fd-opt.is-sel::after{content:"選択中";position:absolute;top:16px;right:16px;font-size:12px;color:var(--fd-blue)}

.fd-nav{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.fd-btn{border:none;border-radius:5px;padding:14px 28px;font-size:16px;font-weight:700;cursor:pointer;
  font-family:inherit;line-height:1.4;transition:opacity .15s}
.fd-btn--go{background:var(--fd-blue);color:#04101F}
.fd-btn--go:disabled{opacity:.3;cursor:not-allowed}
.fd-btn--back{background:transparent;color:var(--fd-dim);border:1px solid var(--fd-line);padding:14px 22px}
.fd-btn:hover:not(:disabled){opacity:.85}

/* --- 結果 --- */
.fd-res{display:none}
.fd-res.is-active{display:block}
.fd-cond{background:var(--fd-panel);border:1px solid var(--fd-line);border-radius:6px;padding:18px 20px;margin-bottom:24px}
.fd-cond h3{font-size:13px;letter-spacing:.1em;color:var(--fd-blue);font-weight:700;margin-bottom:11px !important}
.fd-cond ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px}
.fd-cond li{font-size:14px;background:var(--fd-panel2);border:1px solid var(--fd-line);
  border-radius:4px;padding:5px 12px;line-height:1.6}

/* PR枠 */
.fd-pr{border:1px solid var(--fd-gold);border-radius:6px;padding:20px;margin-bottom:28px;
  background:linear-gradient(180deg,rgba(240,198,116,.09),rgba(240,198,116,.02))}
.fd-pr__tag{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.1em;color:#04101F;
  background:var(--fd-gold);border-radius:3px;padding:3px 10px;margin-bottom:11px;line-height:1.6}
.fd-pr__name{font-size:21px;font-weight:700;margin-bottom:4px !important;line-height:1.5}
.fd-pr__corp{font-size:13px;color:var(--fd-dim);margin-bottom:13px !important}
.fd-pr__pts{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 13px !important}
.fd-pr__pts li{font-size:13.5px;background:rgba(240,198,116,.14);border:1px solid rgba(240,198,116,.3);
  border-radius:4px;padding:4px 11px;color:var(--fd-gold);line-height:1.6}
.fd-pr__warn{font-size:14.5px;color:var(--fd-ng);background:rgba(255,138,138,.08);
  border:1px solid rgba(255,138,138,.28);border-radius:4px;padding:12px 14px;
  margin-bottom:13px !important;line-height:1.75}
.fd-pr__link{display:inline-block;font-size:16px;font-weight:700;color:var(--fd-gold);
  text-decoration:none;border-bottom:1px solid currentColor}

/* 見出し */
.fd-grp{margin-bottom:32px}
.fd-grp__h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  border-bottom:1px solid var(--fd-line);padding-bottom:10px;margin-bottom:16px}
.fd-grp__h h3{font-size:19px;font-weight:700;line-height:1.5}
.fd-grp__h span{font-size:15px;color:var(--fd-blue);font-weight:700}
.fd-grp__note{font-size:14.5px;color:var(--fd-dim);margin-bottom:16px !important;line-height:1.85}

/* カード */
.fd-card{background:var(--fd-panel);border:1px solid var(--fd-line);border-radius:6px;padding:16px 18px;margin-bottom:12px}
.fd-card--ng{background:transparent;opacity:.72}
.fd-card__name{font-size:18px;font-weight:700;line-height:1.5}
.fd-card__corp{font-size:13px;color:var(--fd-dim);font-weight:400;margin-left:8px}
.fd-card__badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.fd-bdg{font-size:13px;border-radius:3px;padding:3px 10px;border:1px solid;line-height:1.7}
.fd-bdg--open{color:var(--fd-ok);border-color:rgba(91,214,164,.35);background:rgba(91,214,164,.1)}
.fd-bdg--shut{color:var(--fd-dim);border-color:var(--fd-line);background:transparent}
.fd-bdg--doc{color:var(--fd-blue);border-color:rgba(127,209,245,.32);background:rgba(127,209,245,.08)}
.fd-bdg--info{color:var(--fd-dim);border-color:var(--fd-line);background:transparent}
.fd-card__spec{font-size:14px;color:var(--fd-dim);margin-top:10px !important;line-height:1.85}
.fd-card__spec b{color:var(--fd-text);font-weight:700}
.fd-card__why{font-size:14px;color:var(--fd-ng);margin-top:9px !important;line-height:1.8}
.fd-card__why--ask{color:var(--fd-gold)}
.fd-card__link{font-size:15px;color:var(--fd-blue);text-decoration:none;
  border-bottom:1px solid currentColor;display:inline-block;margin-top:11px}

/* 折りたたみ */
.fd-fold{margin-bottom:16px}
.fd-fold>summary{cursor:pointer;font-size:16px;color:var(--fd-blue);padding:13px 0;list-style:none;
  border-top:1px solid var(--fd-line);border-bottom:1px solid var(--fd-line);line-height:1.6}
.fd-fold>summary::-webkit-details-marker{display:none}
.fd-fold>summary::before{content:"＋ ";font-weight:700}
.fd-fold[open]>summary::before{content:"− "}
.fd-fold>div{padding-top:16px}

/* 注記 */
.fd-note{font-size:14.5px;color:var(--fd-dim);line-height:1.9;background:var(--fd-panel);
  border-left:2px solid var(--fd-line);border-radius:0 4px 4px 0;padding:16px 18px;margin-top:26px}
.fd-note b{color:var(--fd-text)}
.fd-note a{color:var(--fd-blue)}
.fd-stop{border:1px solid var(--fd-ng);background:rgba(255,138,138,.07);border-radius:6px;
  padding:18px 20px;margin-bottom:24px}
.fd-stop h3{font-size:17px;color:var(--fd-ng);font-weight:700;margin-bottom:8px !important;line-height:1.5}
.fd-stop p{font-size:15px;line-height:1.85}
.fd-again{margin-top:28px}

/* ============================================================
   トップページ用ミニ版（Q1をその場で開く）
   ------------------------------------------------------------
   .top-grid3 は grid-template-columns:360px 360px 360px（実測）。
   カードの中で展開すると3枚とも縦に伸びて余白が出るため、
   グリッドの「下」に全幅パネルを開きます。02カードは <a> のまま
   なので既存CSSはそのまま効き、JSが無効でも診断ページへ飛べます。
   ============================================================ */
.fd-mini{display:none;margin-top:16px;border:1px solid #22405F;border-radius:6px;
  background:#0D1E33;padding:20px 22px}
.fd-mini.is-open{display:block}
.fd-mini__q{font-size:18px;font-weight:700;color:#E8EFF7;margin:0 0 4px !important;line-height:1.6;
  font-family:"Zen Kaku Gothic New",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif}
.fd-mini__sub{font-size:14px;color:#9DB2CA;margin:0 0 14px !important;line-height:1.8}
.fd-mini__opts{display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:600px){.fd-mini__opts{grid-template-columns:1fr 1fr}}
.fd-mini__opt{display:block;width:100%;text-align:left;cursor:pointer;font-family:inherit;
  background:#12293F;color:#E8EFF7;border:1px solid #22405F;border-radius:5px;
  padding:14px 16px;font-size:16px;font-weight:700;line-height:1.5;
  transition:border-color .15s,background .15s}
.fd-mini__opt:hover,.fd-mini__opt:focus-visible{border-color:#7FD1F5;background:#173350;outline:none}
.fd-mini__opt span{display:block;font-weight:400;font-size:13.5px;color:#9DB2CA;margin-top:3px}
.fd-mini__foot{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin-top:14px}
.fd-mini__skip{font-size:14px;color:#9DB2CA;text-decoration:none;border-bottom:1px solid currentColor}
.fd-mini__skip:hover{color:#7FD1F5}
.fd-mini__close{background:none;border:none;color:#9DB2CA;font-size:14px;cursor:pointer;
  font-family:inherit;padding:0;text-decoration:underline}
.fd-mini__close:hover{color:#7FD1F5}

/* ============================================================
   おすすめランキング（カード＋ランキング表）  2026-09-11
   貼り付け先: css/common.css の いちばん下
   ------------------------------------------------------------
   ★このファイルの中身を、common.css の末尾にそのまま貼ってください。
     途中を書き換える必要はありません。
   ★クラス名を2回書いている箇所（.tablewrap--rank.tablewrap--rank）は
     詳細度を上げるためです。誤記ではないので消さないでください。
   ============================================================ */

/* --- カード上部の「第◯位」 --- */
.review__rank{
  align-self:flex-start;
  font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.14em;
  color:var(--ink-dim);background:var(--card-2);
  border:1px solid var(--line);border-radius:2px;
  padding:3px 9px;
}
.co-grid .review:nth-child(1) .review__rank{color:var(--gold);border-color:var(--gold);}
.co-grid .review:nth-child(2) .review__rank,
.co-grid .review:nth-child(3) .review__rank{color:var(--accent);border-color:var(--accent-deep);}

/* --- ランキング表 --- */
/* 列が9つに増えたため、横幅の下限を広げる。
   足りないと文字が潰れる。横スクロールは外側の .tablewrap が持っている。 */
.tablewrap--rank.tablewrap--rank table{min-width:940px;}

/* 順位の丸 */
.tablewrap--rank.tablewrap--rank td.rank{width:56px;text-align:center;padding-left:10px;padding-right:10px;}
.rank__no{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  font-family:var(--f-mono);font-size:12px;font-variant-numeric:tabular-nums;
  color:var(--ink-dim);background:var(--card-2);border:1px solid var(--line);
}
.rank__no--1{color:var(--ground);background:var(--gold);border-color:var(--gold);font-weight:700;}
.rank__no--2{color:var(--ground);background:var(--ink-mid);border-color:var(--ink-mid);font-weight:700;}
.rank__no--3{color:var(--ground);background:#C08A5A;border-color:#C08A5A;font-weight:700;}

/* 長い文字が入る列だけ、折り返しを許す。
   ★表の中は既定で white-space:nowrap。そのままだと
     「2社間4%〜／3社間2%〜（2024年度平均10.3%／6.8%）」のような
     長い手数料が1行に伸び、PCでも横スクロールが必要になる。 */
.tablewrap--rank.tablewrap--rank .col-fd_fee,
.tablewrap--rank.tablewrap--rank .col-fd_speed{
  white-space:normal;min-width:170px;max-width:240px;line-height:1.65;
}
.tablewrap--rank.tablewrap--rank .col-fd_limit{
  white-space:normal;min-width:120px;max-width:180px;line-height:1.65;
}

/* 会社名の列 */
.tablewrap--rank.tablewrap--rank td.co{
  font-weight:700;white-space:normal;min-width:150px;max-width:230px;line-height:1.55;
}
.tablewrap--rank.tablewrap--rank td.co a{color:var(--ink);text-decoration:none;}
.tablewrap--rank.tablewrap--rank td.co a:hover{color:var(--accent);text-decoration:underline;}

/* --- ○ × 未入力 --- */
/* ★朱色（--alert）は注意・デメリット用。× にだけ使い、ボタンには使わない。 */
.ox{font-family:var(--f-body);font-size:14px;line-height:1;}
.ox--yes{color:var(--accent);}
.ox--no{color:var(--alert);}
.ox--none{color:var(--ink-dim);}
.review__spec .ox{font-size:13px;}

/* --- スマホ --- */
@media (max-width:640px){
  .review__rank{font-size:10px;padding:2px 8px;}
  .tablewrap--rank.tablewrap--rank td.rank{width:46px;}
  .rank__no{width:22px;height:22px;font-size:11px;}
}

/* ============ 監修者プロフィール ============
   投稿（single.php）と固定ページ（page.php）の両方で使うため common に置く。
   2026-09 に single.css から移設。single.css 側には残していない。 */
.profile{
  display:flex;gap:var(--s4);align-items:flex-start;
  background:var(--card);border:1px solid var(--line);border-radius:4px;
  padding:26px 28px;margin-top:var(--s7);
}
@media (max-width:640px){.profile{flex-direction:column;gap:var(--s3);padding:22px 18px;}}
.profile > img{
  width:88px;height:88px;flex:none;border-radius:50%;object-fit:cover;object-position:center top;
  background:var(--card-2);border:1px solid var(--line);
}
.profile > div{min-width:0;}
.profile__role{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;color:var(--accent);margin-bottom:6px;}
.profile h3{
  font-family:var(--f-head);font-weight:700;font-size:18px;color:var(--ink);
  margin:0 0 10px;padding:0;border:0;
}
.profile p{font-size:13.5px;color:var(--ink-mid);line-height:1.9;margin:0;max-width:66ch;}
/* 肩書き・実績。名前の直下に1行で置く。
   .profile p より後に書いてあるので !important は不要。
   （page.css に置いていたときの名残で付いていたものを外した） */
.profile__title{
  font-size:12px;color:var(--accent);
  letter-spacing:.04em;margin:-6px 0 10px;
}
/* 固定ページは公開日を出さないので、最終更新と掲載基準をここで補う */
.profile__meta{margin-top:12px;font-size:12px;color:var(--ink-dim);}
.profile__meta a{color:var(--ink-mid);border-bottom:1px solid var(--line);}
.profile__meta a:hover{color:var(--accent);}

/* ============ サイドバー：まず知っておきたい6つのこと ============
   全ページに出るため、高さを取らない番号付きの縦リストにしている。 */
.side-basics{display:flex;flex-direction:column;}
.side-basics > a{
  display:flex;align-items:baseline;gap:10px;
  padding:11px 0;border-top:1px solid var(--line-soft);
}
.side-basics > a:first-child{border-top:0;}
.side-basics > a:hover .side-basics__ttl{color:var(--accent);}
.side-basics__no{
  flex:none;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;
  color:var(--accent);padding-top:1px;
}
.side-basics__ttl{
  font-size:13.5px;line-height:1.6;color:var(--ink);
  transition:color .15s;
}

.demo01 th{
	width:20%;
}

/* ============ ランキングカード [fd_rank_list] ============
   左：画像＋ボタン／右：対象・契約形態・スピード＋説明文。
   本文内のh3・img・pの装飾に負けないよう、divとspanで組んでいる。 */
.rk{display:flex;flex-direction:column;gap:18px;margin:32px 0;}
.rk__item{border:1px solid var(--line);border-radius:4px;background:var(--card);overflow:hidden;}
.rk__head,.rk__body{display:grid;grid-template-columns:220px repeat(3,minmax(0,1fr));}
.rk__head{background:var(--card-2);align-items:center;min-height:54px;}
.rk__name{padding:14px;font-family:var(--f-head);font-weight:700;font-size:17px;line-height:1.4;color:var(--ink);display:flex;flex-direction:column;gap:2px;}
.rk__no{font-family:var(--f-mono);font-size:12px;color:var(--gold);letter-spacing:.04em;}
.rk__lbl{padding:0 14px;font-size:13px;color:var(--accent);letter-spacing:.06em;}
.rk__side{padding:14px;border-right:1px solid var(--line-soft);display:flex;flex-direction:column;gap:8px;}
.rk__img{display:block;margin-bottom:4px;}
.rk__img img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;margin:0;border-radius:0;box-shadow:none;}
.rk__btn{display:flex;align-items:center;justify-content:center;min-height:38px;padding:8px 12px;background:var(--accent);color:#04101F !important;font-family:var(--f-head);font-weight:700;font-size:14px;border-radius:3px;text-decoration:none !important;}
.rk__btn:hover{background:#A2E0FA;}
.rk__btn--ghost{background:transparent;border:1px solid var(--accent);color:var(--accent) !important;}
.rk__btn--ghost:hover{background:var(--accent-soft);}
.rk__main{grid-column:2 / -1;display:flex;flex-direction:column;}
.rk__spec{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line-soft);flex:1 1 auto;align-items:center;}
.rk__cell{padding:22px 14px;}
.rk__dt{display:none;}
.rk__dd{display:block;font-weight:700;font-size:15px;line-height:1.7;color:var(--ink);}
.rk__dd a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent);}
.rk__desc{margin:0 !important;padding:22px 20px;font-size:14px;line-height:1.9;color:var(--ink-mid);max-width:none;text-wrap:pretty;}
@media (max-width:760px){
  .rk__head,.rk__body{display:block;}
  .rk__lbl{display:none;}
  .rk__side{border-right:0;border-bottom:1px solid var(--line-soft);display:grid;grid-template-columns:1fr 1fr;}
  .rk__img{grid-column:1 / -1;}
  .rk__cell{padding:14px 12px;}
  .rk__dt{display:block;font-size:12px;color:var(--accent);margin-bottom:4px;letter-spacing:.06em;}
  .rk__dd{font-size:14px;}
  .rk__desc{padding:16px 14px;}
}

/* ============ 記事内の2連ボタン（案2b：1本のバーを2分割） ============
   既存記事の <div align="center"><a class="button">さらに詳しく</a> <a class="button">公式サイト</a></div>
   をそのまま使う。記事の書き換えは不要。
   1つ目＝REVIEW（サイト内の詳細）／2つ目＝OFFICIAL（公式サイト）。
   スマホでも横2列のまま。
   ★矢印は「→」で統一。書体は本文と同じ（等幅書体だと↗などが崩れるため）。 */
.entry__body div[align="center"]:has(> a.button),
.front-body div[align="center"]:has(> a.button){
  display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));
  max-width:560px;margin:28px auto;
  border:1px solid var(--accent-deep);border-radius:3px;overflow:hidden;
  font-size:0; /* ボタン間の空白（改行・スペース）を消す */
}
.entry__body div[align="center"] > a.button,
.front-body div[align="center"] > a.button{
  display:block !important;margin:0 !important;padding:12px 10px !important;
  min-height:60px;box-sizing:border-box;
  background:var(--card) !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;
  color:var(--ink) !important;text-decoration:none !important;text-align:center;
  font-family:var(--f-head);font-weight:700;font-size:15px;line-height:1.5;letter-spacing:0;
  width:auto !important;max-width:none !important;
}
.entry__body div[align="center"] > a.button + a.button,
.front-body div[align="center"] > a.button + a.button{border-left:1px solid var(--accent-deep) !important;}
.entry__body div[align="center"] > a.button::before,
.front-body div[align="center"] > a.button::before{
  content:"REVIEW";display:block;margin-bottom:2px;
  font-family:var(--f-mono);font-weight:500;font-size:10.5px;letter-spacing:.2em;color:var(--accent);
}
.entry__body div[align="center"] > a.button::after,
.front-body div[align="center"] > a.button::after{
  content:"→";margin-left:6px;font-family:var(--f-body);font-weight:500;
}
.entry__body div[align="center"] > a.button:hover,
.front-body div[align="center"] > a.button:hover{background:var(--card-2) !important;}
/* 2つ目＝公式サイト */
.entry__body div[align="center"] > a.button:last-of-type:not(:first-of-type),
.front-body div[align="center"] > a.button:last-of-type:not(:first-of-type){background:var(--accent) !important;color:#04101F !important;}
.entry__body div[align="center"] > a.button:last-of-type:not(:first-of-type)::before,
.front-body div[align="center"] > a.button:last-of-type:not(:first-of-type)::before{content:"OFFICIAL";color:#0F2E4A;}
.entry__body div[align="center"] > a.button:last-of-type:not(:first-of-type):hover,
.front-body div[align="center"] > a.button:last-of-type:not(:first-of-type):hover{background:#A2E0FA !important;}
@media (max-width:640px){
  .entry__body div[align="center"] > a.button,
  .front-body div[align="center"] > a.button{font-size:14px;min-height:56px;padding:10px 6px !important;}
  .entry__body div[align="center"] > a.button::before,
  .front-body div[align="center"] > a.button::before{font-size:10px;letter-spacing:.18em;}
}

/* ============ 会社の概要表 [fd_spec_table] ============ */
/* 2列の表なので、スマホでも横スクロールにせず折り返す */
.entry__body .fd-spec-table table{display:table;white-space:normal;}
.entry__body .fd-spec-table th{width:26%;white-space:nowrap;}
.entry__body .fd-spec-table td{word-break:break-word;}
.fd-spec-table__note{font-size:12.5px;color:var(--ink-2,#9fb0c4);margin:-8px 0 var(--s4);}