/* コラム（single.php）＝トップの色と書体に合わせる */
.p-column{padding-block:160px 120px;color:#424245}
.p-column__inner{max-width:800px}
.p-column__head{margin-bottom:56px;padding-bottom:32px;border-bottom:1px solid #e5e5e7}

.p-column__ttl{font-size:30px;line-height:1.5;font-weight:700}

.p-column__body{font-size:16px;line-height:2;font-weight:500}
.p-column__body > * + *{margin-top:24px}
.p-column__body h2{margin-top:72px;padding-left:16px;border-left:4px solid #3ab7fe;font-size:22px;line-height:1.6;font-weight:700}
.p-column__body h3{margin-top:40px;font-size:18px;line-height:1.6;font-weight:700}
.p-column__body strong{font-weight:700}
.p-column__body ul,.p-column__body ol{padding-left:1.5em}
.p-column__body ul{list-style:disc}
.p-column__body ol{list-style:decimal}
.p-column__body li + li{margin-top:8px}
.p-column__body .wp-block-table table{width:100%;border-collapse:collapse}
.p-column__body .wp-block-table th,.p-column__body .wp-block-table td{padding:14px 16px;border-bottom:1px solid #e5e5e7;text-align:left;vertical-align:top}
.p-column__body .wp-block-table thead th{background:#FBFBFB;font-weight:700;border-bottom:2px solid #3ab7fe}
.p-column__cta{margin-top:80px;padding:48px 40px;background:#FBFBFB;text-align:center}
.p-column__cta-ttl{font-size:22px;font-weight:700}
.p-column__cta-txt{margin-top:12px;font-size:16px;line-height:1.8}
.p-column__cta-btn{margin-top:28px}
.p-column__cta-btn a{display:inline-block;padding:18px 48px;border-radius:999px;background:#e84566;color:#fff;font-weight:700;text-decoration:none}
@media (max-width:767px){
.p-column{padding-block:110px 80px}
.p-column__ttl{font-size:22px}
.p-column__body{font-size:17px;line-height:1.8}
.p-column__head{margin-bottom:32px;padding-bottom:20px}
.p-column__body h2{margin-top:56px;font-size:20px}
.p-column__cta{padding:36px 20px}
.p-column__cta-ttl{font-size:19px}
}
.p-column__crumb{margin-bottom:24px;font-size:13px;color:#86868b}
.p-column__crumb a{color:#86868b;text-decoration:underline}
.p-column__crumb span{margin-inline:8px}
.p-column__meta{display:flex;gap:16px;margin-top:16px;font-size:14px;color:#86868b}
.p-column__meta time{font-family:"Montserrat",sans-serif}
.p-column__body .is-conclusion{padding:24px 28px;background:#FBFBFB;border-left:4px solid #3ab7fe}
.p-column__body .is-note{font-size:13px;line-height:1.8;color:#86868b}
.p-column__body .is-num td:not(:first-child),.p-column__body .is-num th:not(:first-child){text-align:right;white-space:nowrap}
.p-column__body details{border-bottom:1px solid #e5e5e7;padding-block:20px}
.p-column__body details + details{margin-top:0}
.p-column__body summary{cursor:pointer;font-weight:700;list-style:none;position:relative;padding-right:32px}
.p-column__body summary::-webkit-details-marker{display:none}
.p-column__body summary::after{content:"＋";position:absolute;right:0;top:0;color:#3ab7fe}
.p-column__body details[open] summary::after{content:"−"}
.p-column__body details p{margin-top:12px}
.p-column__updated{margin-top:48px;font-size:13px;color:#86868b;text-align:right}
/* 本文の地は白・ヘッダーの帯だけテーマの青を残す */
.p-column{background:#fff;border-top:100px solid #3ab7fe;padding-top:64px}
.p-column .p-column__body h2{padding-left:16px;border-left:4px solid #3ab7fe}
.p-column .p-column__body .wp-block-table td,.p-column .p-column__body .wp-block-table th{border:0;border-bottom:1px solid #e5e5e7}
.p-column .p-column__body .wp-block-table thead th{border-bottom:2px solid #3ab7fe}
@media (max-width:767px){.p-column{border-top-width:64px;padding-top:40px}}
/* 強調＝太字＋薄い青のマーカー（SF のコラムと同じく要点と数字を太字に） */
.p-column .p-column__body strong{font-weight:700;background:linear-gradient(transparent 62%,rgba(58,183,254,.28) 62%)}
.p-column .p-column__body .is-conclusion strong:first-child{background:none;color:#0a6ca8}
.p-column .p-column__body h3 strong,.p-column .p-column__body li strong{background:none}
.p-column .p-column__body tr.is-em td{font-weight:700;color:#e84566}
/* 要点の箱＝本文の主張を1文で（「何に掛けるか」の節） */
.p-column .p-column__body .is-point{padding:20px 24px;border:2px solid #e84566;border-radius:8px;font-size:18px;line-height:1.8;font-weight:700}
.p-column .p-column__body .is-point strong{background:none;color:#e84566}
.p-column .p-column__body .is-num th:first-child{color:#424245}
.p-column .p-column__body td.is-up{color:#424245}
.p-column .p-column__body td.is-down{color:#e84566;font-weight:700}
.p-column .p-column__body tr.is-em td{background:#fff3f5}
.p-column .p-column__body .wp-block-table + .wp-block-table{margin-top:32px}
.p-column .p-column__body .is-num table{table-layout:fixed}
.p-column .p-column__body .is-num th:nth-child(1){width:34%}
.p-column .p-column__body .is-num th:nth-child(2){width:18%}
.p-column .p-column__body .is-num th:nth-child(3){width:30%}
.p-column .p-column__body tr.is-em.is-good td{color:#0a6ca8;background:#f0f9ff}
/* コラム一覧（page-column.php） */
.p-column-list{margin-top:-56px}
.p-column-list__item{border-bottom:1px solid #e5e5e7}
.p-column-list__item a{display:block;padding:32px 8px;color:#424245;text-decoration:none;transition:background .2s}
.p-column-list__item a:hover{background:#f0f9ff}
.p-column-list__item time{font-family:"Montserrat",sans-serif;font-size:14px;color:#86868b}
.p-column-list__ttl{margin-top:8px;font-size:20px;line-height:1.6;font-weight:700}
.p-column-list__txt{margin-top:8px;font-size:15px;line-height:1.8;color:#6e6e73}
/* 図＝掛け算の式（.c-formula）とファネル（.c-funnel）（2026-11-04 2本目で追加） */
.p-column .p-column__body .c-formula{padding:28px 24px;background:#f0f9ff;border-radius:8px;text-align:center}
.c-formula__row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 14px}
.c-formula__row + .c-formula__row{margin-top:18px;padding-top:18px;border-top:1px dashed #b9e3fb}
.c-formula__term{padding:10px 18px;background:#fff;border:2px solid #3ab7fe;border-radius:8px;font-size:22px;line-height:1.4;font-weight:700;color:#424245}
.c-formula__term.is-goal{background:#3ab7fe;color:#fff}
.c-formula__op{font-size:28px;font-weight:700;color:#3ab7fe;line-height:1}
.c-formula__rhs{display:inline-flex;align-items:center;gap:14px;white-space:nowrap}
.p-column .p-column__body .c-funnel{padding:8px 0}
.c-funnel__bar{margin-inline:auto;padding:14px 20px;border-radius:8px;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:12px}
.c-funnel__bar:nth-of-type(1){width:100%;background:#3ab7fe}
.c-funnel__bar:nth-of-type(2){width:86%;background:#2a9fe2}
.c-funnel__bar:nth-of-type(3){width:72%;background:#1f86c4}
.c-funnel__bar:nth-of-type(4){width:58%;background:#176ea3}
.c-funnel__step{font-size:17px;font-weight:700;line-height:1.4}
.c-funnel__item{display:block;font-size:12px;font-weight:500;opacity:.9}
.c-funnel__n{font-size:20px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.c-funnel__rate{margin:6px auto;width:72%;display:flex;align-items:center;gap:12px;font-size:14px;line-height:1.6;color:#6e6e73}
.c-funnel__rate b{flex:none;font-size:18px;color:#0a6ca8;white-space:nowrap}
.c-funnel__note{margin-top:12px;font-size:13px;color:#86868b;text-align:right}
.p-column .p-column__body .is-num.is-cols4 th:nth-child(1){width:28%}
.p-column .p-column__body .is-num.is-cols4 th:nth-child(2){width:18%}
.p-column .p-column__body .is-num.is-cols4 th:nth-child(3){width:27%}
@media (max-width:767px){
.c-formula__term{font-size:15px;padding:6px 10px}
.c-formula__op{font-size:20px}
.c-formula__rhs{flex-basis:100%;justify-content:center;gap:8px}
.c-formula__row{gap:8px}
.p-column .p-column__body .c-formula{padding:20px 12px}
.c-funnel__bar{padding:12px 14px}
.c-funnel__bar:nth-of-type(2){width:92%}.c-funnel__bar:nth-of-type(3){width:84%}.c-funnel__bar:nth-of-type(4){width:76%}
.c-funnel__step{font-size:15px}.c-funnel__n{font-size:17px}
.c-funnel__rate{width:100%}
.p-column .p-column__body .is-num.is-cols4{overflow-x:auto}
.p-column .p-column__body .is-num.is-cols4 table{min-width:560px}
}
/* 結論を箇条書きで置く形（div.is-conclusion）＋スマホの式は縦（2026-11-04 Tom「結論も箇条書きに」「売上／＝（縦）／単価×数量」） */
.p-column .p-column__body div.is-conclusion > * + *{margin-top:8px}
.p-column .p-column__body div.is-conclusion li{font-weight:500}
.p-column .p-column__body div.is-conclusion li strong{background:linear-gradient(transparent 62%,rgba(58,183,254,.28) 62%)}
@media (max-width:767px){
.c-formula__row{flex-direction:column;gap:6px}
.c-formula__row > .c-formula__op{transform:rotate(90deg)}
.c-formula__rhs{flex-basis:auto}
}
/* ファネルの ↓% の行も帯と同じく中央に（2026-11-04 Tom「中心に揃えてほしい」） */
.c-funnel__rate{justify-content:center;text-align:center}
/* 式をツリーで（.c-tree）＝売上 → 注文の数×客単価 → お店を見る人×注文まで進む割合（2026-11-04 Tom「売上／└注文数*単価／└見る人*」・機種の幅で崩れないよう左揃え） */
.p-column .p-column__body .c-tree{padding:28px 32px;background:#f0f9ff;border-radius:8px}
.c-tree__lv{position:relative;display:flex;align-items:center;gap:14px}
.c-tree__lv + .c-tree__lv{margin-top:16px}
.c-tree__lv.is-2{margin-left:44px}
.c-tree__lv.is-3{margin-left:88px}
.c-tree__lv.is-2::before,.c-tree__lv.is-3::before{content:"";position:absolute;left:-28px;top:-16px;width:20px;height:calc(50% + 16px);border-left:2px solid #3ab7fe;border-bottom:2px solid #3ab7fe;border-bottom-left-radius:6px}
.c-formula__term.is-mid{background:#d9f0fe}
@media (max-width:767px){
.p-column .p-column__body .c-tree{padding:20px 12px}
.c-tree .c-formula__term{font-size:14px;padding:6px 8px}
.c-tree .c-formula__op{font-size:18px}
.c-tree__lv{gap:6px}
.c-tree__lv + .c-tree__lv{margin-top:12px}
.c-tree__lv.is-2{margin-left:22px}
.c-tree__lv.is-3{margin-left:44px}
.c-tree__lv.is-2::before,.c-tree__lv.is-3::before{left:-16px;top:-12px;width:12px;height:calc(50% + 12px)}
}
/* 式は A 案（中央寄せの式）に戻す＝スマホは「売上 ＝」の下に右辺・2か所の「注文の数」は同じ色（2026-11-04 Tom「Aにしよう」＝codex の比較を見て・ツリー .c-tree は使わない） */
.c-formula .c-formula__term.is-mid{background:#d9f0fe}
@media (max-width:767px){
.c-formula__row{flex-direction:row;gap:6px 8px}
.c-formula__row > .c-formula__op{transform:none}
.c-formula__rhs{flex-basis:100%}
.c-formula__row + .c-formula__row{margin-top:14px;padding-top:14px}
}
/* 項を短くして（注文数・見る人の数・注文率）スマホでも式を1行に（2026-11-04 Tom「注文数とかにすれば1列に入るんちゃう？」） */
@media (max-width:767px){
.c-formula__rhs{flex-basis:auto;gap:6px}
.c-formula__row{flex-wrap:nowrap;gap:6px}
.c-formula .c-formula__term{font-size:14px;padding:6px 8px}
.c-formula__op{font-size:18px}
}
/* 式の2行を「＝」の位置でそろえ、右辺の枠の始まりを左でそろえる（2026-11-04 Tom「枠のスタートを左寄せにして」）＝全体は中央・中は表の列 */
.p-column .p-column__body .c-formula{display:grid;grid-template-columns:auto auto auto;justify-content:center;text-align:left}
.c-formula__row{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;align-items:center;column-gap:14px}
.c-formula__row > .c-formula__term:first-child{justify-self:end}
.c-formula__rhs{justify-self:start}
@media (max-width:767px){.c-formula__row{column-gap:6px}}
/* ファネルの ↓% を縦一列にそろえる（2026-11-04 Tom「矢印揃えたいね」）＝左に ↓% の列・右に原因の列 */
.c-funnel__rate{display:grid;grid-template-columns:5em 1fr;column-gap:12px;justify-content:stretch;text-align:left;width:60%}
.c-funnel__rate b{justify-self:start}
@media (max-width:767px){.c-funnel__rate{width:100%;grid-template-columns:4.5em 1fr;padding-left:8px}}
/* ↓% の列を少し右へ（2026-11-04 Tom「ちょい右」）＝PC は左から28%（一番細い帯④の内側） */
@media (min-width:768px){.c-funnel__rate{width:auto;margin-left:28%;margin-right:0}}
/* 箇条書きの結論は太字を全部同じ見た目に（行の最初の太字だけ青くなっていた＝「結論：」用の first-child の規則が当たっていた） */
.p-column .p-column__body div.is-conclusion li strong:first-child{color:inherit;background:linear-gradient(transparent 62%,rgba(58,183,254,.28) 62%)}
@media (max-width:767px){.p-column .p-column__body .wp-block-table:not(.is-num) td:first-child:nth-last-child(-n+3){width:calc(5em + 32px)}}
.p-column .p-column__body p a,.p-column .p-column__body li a{text-decoration:underline;text-underline-offset:3px}
/* コラムの下の CTA にフォームをそのまま置く（トップのお問い合わせと同じ Contact Form 7・2026-11-04 Tom「コラムの下共通でそのままフォーム入力になったらいいなぁ」） */
.p-column__cta-form{max-width:760px;margin:32px auto 0;text-align:left}
/* 見出しの Q. に続く答えの1文＝枠なし・Q と同じ字の大きさ・A. と要点を赤（2026-11-04 Tom「赤枠いらない／Aを赤くする／文字サイズQと同じ？」） */
.p-column .p-column__body .is-answer{margin-top:16px;padding-left:20px;font-size:22px;line-height:1.6;font-weight:700}
.p-column .p-column__body .is-answer .is-a{color:#e84566}
.p-column .p-column__body .is-answer strong{background:none;color:#e84566}
@media (max-width:767px){.p-column .p-column__body .is-answer{font-size:20px}}
/* LP の導線（2026-11-05 Tom「いいじゃん」）＝結論の下のボタン・スマホで下に付いてくるボタン・フォームへのページ内リンク */
.p-column .p-column__body .p-column__jump{margin:24px 0 8px;text-align:center}
.p-column .p-column__body .p-column__jump a{display:inline-block;padding:16px 40px;border-radius:999px;background:#0a6ca8;color:#fff;font-weight:700;font-size:17px;text-decoration:none}
.p-column__float{display:none}
#column-cta{scroll-margin-top:96px}
@media (max-width:767px){
.p-column__float{display:block;position:fixed;left:15px;right:15px;line-height:1.4;bottom:16px;z-index:50;padding:16px;border-radius:999px;background:#0a6ca8;color:#fff;font-weight:700;font-size:16px;text-align:center;text-decoration:none;box-shadow:0 4px 16px rgba(10,42,61,.25);transition:opacity .2s}
.p-column__float.is-hidden{opacity:0;pointer-events:none}
.p-column .p-column__body .p-column__jump a{display:block;padding:16px;font-size:16px;line-height:1.4}
.p-column{padding-bottom:88px}
}
/* 数字の表（4列の is-cols4 以外）はスマホで見出しを折り返し、列幅を中身で決める＝見出しの重なりと右の列の切れを防ぐ */
@media (max-width:767px){
.p-column .p-column__body .is-num:not(.is-cols4) table{table-layout:auto}
.p-column .p-column__body .is-num:not(.is-cols4) th{width:auto!important;white-space:normal}
.p-column .p-column__body .is-num:not(.is-cols4) th,.p-column .p-column__body .is-num:not(.is-cols4) td{padding:12px 6px}
.p-column .p-column__body .is-num:not(.is-cols4) th:first-child{width:calc(5em + 12px)!important}
}
.p-column .p-column__body h2 .is-q,.p-column .p-column__body h2 strong{color:#0a6ca8;background:none}
.c-bars{margin:24px 0;padding:20px 16px;background:#f0f9ff;border-radius:8px}
.c-bars__cap{margin:0 0 8px!important;font-size:14px;font-weight:700;color:#424245}
.c-bars__row{display:grid;grid-template-columns:5em 1fr 4.5em;align-items:center;gap:8px;margin-top:10px}
.c-bars__label{font-size:14px;font-weight:700;color:#424245;line-height:1.3}
.c-bars__bar{height:24px;border-radius:6px;background:#3ab7fe;width:var(--w)}
.c-bars__bar.is-bad{background:#e84566}
.c-bars__val{text-align:right;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;color:#424245}
.c-bars__val.is-bad{color:#e84566}
.c-bars__track{position:relative;height:24px}
.c-bars__track .c-bars__bar{position:relative;z-index:1}
.c-bars__line{position:absolute;z-index:2;top:-7px;bottom:-7px;left:var(--x);border-left:2px dashed #0a6ca8}
.c-bars__row.is-mark{margin-top:4px}
.c-bars__mark{position:relative;height:18px;font-size:12px;font-weight:700;color:#0a6ca8;white-space:nowrap}
.c-bars__mark span{position:absolute;bottom:0;left:var(--x)}
.c-bars__mark.is-end span{left:auto;right:calc(100% - var(--x))}
.c-bars__val.is-good{color:#0a6ca8}
.c-bars__note{margin:12px 0 0!important;font-size:13px;color:#424245}
.c-bars__row{grid-template-columns:4.8em 1fr 6.2em}
.c-bars__val{font-size:15px}
.c-vbars{margin:24px 0;padding:20px 16px;background:#f0f9ff;border-radius:8px}
.c-vbars__plot{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:8px;max-width:300px;margin:12px auto 0}
.c-vbars__col{display:flex;flex-direction:column;align-items:center}
.c-vbars__bar{display:block;width:64px;height:calc(var(--h) * 1.4px);background:#3ab7fe;border-radius:6px 6px 0 0}
.c-vbars__bar.is-bad{background:#e84566}
.c-vbars__label{margin-top:8px;font-size:14px;font-weight:700;color:#424245;white-space:nowrap}
.c-vbars__arrow{align-self:center;padding-bottom:30px;text-align:center;font-size:18px;font-weight:700;line-height:1.2;color:#0a6ca8;white-space:nowrap}
.c-vbars__arrow span{display:block;font-size:28px}
.c-vbars__plot.is-jump{position:relative;display:block;width:300px;height:220px;max-width:none;margin:8px auto 0}
.c-vbars__plot.is-jump svg{position:absolute;inset:0;width:300px;height:220px;z-index:2;overflow:visible}
.c-vbars__plot.is-jump .c-vbars__col{position:absolute;bottom:0;width:120px;margin-left:-60px}
.c-vbars__plot.is-jump .c-vbars__bar{width:72px}
.c-vbars__bar.is-dim{background:#b8c4ce}
.c-vbars__plot.is-jump .c-vbars__bar{width:64px}
.p-column .p-column__body th,.p-column .p-column__body td,.p-column .p-column__body li,.p-column .p-column__body summary,.p-column .p-column__body h2,.p-column .p-column__body .is-answer,.c-bars__label,.c-vbars__label,.c-bars__cap{word-break:keep-all;overflow-wrap:anywhere}
@media (max-width:767px){.p-column .p-column__body .wp-block-table th,.p-column .p-column__body .wp-block-table td{padding:12px 8px;font-size:15px}.p-column .p-column__body .wp-block-table:not(.is-num) td:first-child:nth-last-child(-n+3){width:calc(5em + 16px)}}

/* アイキャッチと A/B（2026-11-06）＝B はタイトルを画面に出さず HTML に残す */
.p-column__eye{margin:0 0 16px}
.p-column__eye img{display:block;width:100%;height:auto;border-radius:4px}
.p-column__eye .is-b{display:none}
.ab-b .p-column__eye .is-a{display:none}
.ab-b .p-column__eye .is-b{display:block}
.ab-b .p-column__ttl{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.p-column__head:has(.p-column__eye){border-bottom:0;padding-bottom:0;margin-bottom:24px}
.p-column__head.is-notitle .p-column__ttl{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}