/* ===========================================================
   愛着スタイルのカラートークン（64タイプ設計書 準拠）
   ここを変えればサイト全体の愛着色が変わる
   =========================================================== */
:root{
  --att-s:#F2A93B; --att-s-ink:#c9962f; --att-s-soft:#FFD98A; --att-s-bg:#fff6e3;
  --att-a:#E8698B; --att-a-ink:#c2456f; --att-a-soft:#F6C7DE; --att-a-bg:#fdeef4;
  --att-v:#5BBBAC; --att-v-ink:#2f6f66; --att-v-soft:#A7CED8; --att-v-bg:#eaf7f4;
  --att-f:#8E7CC3; --att-f-ink:#5f4a94; --att-f-soft:#BDC9E3; --att-f-bg:#f1ecfa;
}

/* ===========================================================
   Topics (愛着トピックス) — Hub + Article + Teaser
   =========================================================== */

/* フロントページ用ティーザー */
.ms-topics-teaser__grid{display:grid;grid-template-columns:1fr;gap:16px;margin:24px 0 32px;}
@media(min-width:700px){.ms-topics-teaser__grid{grid-template-columns:repeat(3,1fr);}}
.ms-topics-teaser__card{display:flex;flex-direction:column;gap:12px;background:#fff;border:1px solid #ece5ff;border-radius:16px;padding:20px;text-decoration:none;color:inherit;transition:all .25s;box-shadow:0 2px 8px rgba(80,40,160,.05);}
.ms-topics-teaser__card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(115,73,209,.15);border-color:#b89dff;}
.ms-topics-teaser__thumb{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:14px;font-size:28px;}
.ms-topics-teaser__cat{font-size:11px;font-weight:700;color:#a369ff;margin:0 0 4px;letter-spacing:.05em;}
.ms-topics-teaser__card h3{font-size:15px;font-weight:800;margin:0 0 6px;color:#2a1850;line-height:1.5;}
.ms-topics-teaser__excerpt{font-size:12px;color:#6a5a8a;margin:0;line-height:1.7;}
.ms-topics-teaser__more{text-align:center;}



.ms-container{max-width:980px;margin:0 auto;padding:0 20px;}
.ms-pc-only{display:none;}
@media(min-width:768px){.ms-pc-only{display:inline;}}

/* ---------- Hub ---------- */
.tp-hub{padding-bottom:80px;}
.tp-hub__hero{position:relative;padding:80px 0 60px;overflow:hidden;background:linear-gradient(135deg,#f5e8ff 0%,#ffe8f5 50%,#fff4e6 100%);}
.tp-hub__hero-bg{position:absolute;inset:0;background:radial-gradient(circle at 20% 30%,rgba(172,127,255,.18),transparent 50%),radial-gradient(circle at 80% 70%,rgba(255,127,180,.15),transparent 50%);pointer-events:none;}
.tp-hub__hero .ms-container{position:relative;text-align:center;}
.tp-hub__label{display:inline-block;padding:4px 16px;background:#fff;border-radius:999px;color:#a369ff;font-size:12px;font-weight:700;letter-spacing:.1em;margin-bottom:16px;}
.tp-hub__title{font-size:clamp(28px,6vw,42px);font-weight:800;margin:0 0 16px;color:#2a1850;letter-spacing:.02em;}
.tp-hub__desc{font-size:15px;line-height:1.8;color:#534670;margin:0;}

.tp-hub__nav{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:40px 0 50px;}
.tp-hub__nav-btn{display:inline-block;padding:10px 20px;border:2px solid #e5dbff;border-radius:999px;background:#fff;color:#7349d1;font-size:13px;font-weight:600;text-decoration:none;transition:all .2s;}
.tp-hub__nav-btn:hover{background:#7349d1;color:#fff;border-color:#7349d1;transform:translateY(-2px);}

.tp-hub__section{margin-bottom:60px;}
.tp-hub__section-title{font-size:24px;font-weight:800;margin:0 0 8px;color:#2a1850;}
.tp-hub__section-desc{font-size:14px;color:#6a5a8a;margin:0 0 24px;line-height:1.7;}

.tp-hub__grid{display:grid;grid-template-columns:1fr;gap:20px;}
@media(min-width:640px){.tp-hub__grid{grid-template-columns:1fr 1fr;}}
@media(min-width:960px){.tp-hub__grid{grid-template-columns:repeat(3,1fr);}}

.tp-card{display:flex;flex-direction:column;background:#fff;border:1px solid #ece5ff;border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;transition:all .25s;box-shadow:0 2px 8px rgba(80,40,160,.04);position:relative;}
.tp-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(115,73,209,.15);border-color:#b89dff;}
.tp-card--featured{grid-column:1/-1;}
@media(min-width:960px){.tp-card--featured{grid-column:span 2;flex-direction:row;}.tp-card--featured .tp-card__thumb{width:40%;min-height:240px;font-size:80px;}.tp-card--featured .tp-card__body{flex:1;}}
.tp-card__badge{position:absolute;top:12px;right:12px;background:rgba(255,255,255,.92);color:#8b6cc1;font-size:10.5px;font-weight:900;padding:4px 11px;border-radius:999px;letter-spacing:.14em;z-index:2;border:1.5px solid #d9c7f0;box-shadow:0 3px 10px rgba(139,108,193,.2);backdrop-filter:blur(4px);}
.tp-card__badge::before{content:'✦ ';color:#e8b64c;}
.tp-card__thumb{display:flex;align-items:center;justify-content:center;font-size:60px;min-height:140px;}
.tp-card__thumb--anxious{background:linear-gradient(135deg,#f6c7de,#e8698b);}
.tp-card__thumb--avoidant{background:linear-gradient(135deg,#a7ced8,#5bbbac);}
.tp-card__thumb--self-avoidant{background:linear-gradient(135deg,#c9e6e0,#7fc9bd);}
.tp-card__thumb--fearful{background:linear-gradient(135deg,#bdc9e3,#8e7cc3);}
.tp-card__body{padding:20px;display:flex;flex-direction:column;gap:8px;}
.tp-card__cat{font-size:11px;font-weight:700;color:#a369ff;margin:0;letter-spacing:.05em;}
.tp-card__title{font-size:17px;font-weight:700;margin:0;line-height:1.5;color:#2a1850;}
.tp-card__excerpt{font-size:13px;color:#6a5a8a;margin:0;line-height:1.7;flex:1;}
.tp-card__meta{font-size:12px;color:#9a8ab0;margin:4px 0 0;}

.tp-hub__cta{margin-top:60px;padding:40px 24px;background:linear-gradient(135deg,#7349d1,#a369ff);border-radius:20px;text-align:center;color:#fff;}
.tp-hub__cta h2{font-size:22px;margin:0 0 8px;}
.tp-hub__cta p{font-size:14px;margin:0 0 20px;opacity:.92;}
.tp-hub__cta-btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}
.tp-hub__cta-btn{display:inline-block;padding:14px 28px;border-radius:999px;font-weight:700;text-decoration:none;transition:transform .2s;}
.tp-hub__cta-btn--primary{background:#fff;color:#7349d1;}
.tp-hub__cta-btn--secondary{background:rgba(255,255,255,.15);color:#fff;border:2px solid rgba(255,255,255,.5);}
.tp-hub__cta-btn:hover{transform:translateY(-2px);}

/* ---------- Article ---------- */
.tp-article{background:#fff;color:#2a1850;line-height:1.8;padding-bottom:80px;}
.tp-breadcrumb{background:#faf7ff;padding:12px 0;font-size:12px;color:#6a5a8a;}
.tp-breadcrumb a{color:#7349d1;text-decoration:none;}
.tp-breadcrumb a:hover{text-decoration:underline;}
.tp-breadcrumb__sep{margin:0 8px;color:#b8a8d0;}

.tp-article__hero{position:relative;padding:60px 0 48px;background:linear-gradient(135deg,#2a1850 0%,#4a2d7a 60%,#6a3d9a 100%);color:#fff;overflow:hidden;}
.tp-article__hero-bg{position:absolute;inset:0;background:radial-gradient(circle at 20% 30%,rgba(255,180,220,.15),transparent 50%),radial-gradient(circle at 80% 70%,rgba(150,200,255,.1),transparent 50%);pointer-events:none;}
.tp-article__hero .ms-container{position:relative;}
.tp-article__cat{display:inline-block;padding:4px 14px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.3);border-radius:999px;font-size:12px;font-weight:700;margin:0 0 16px;letter-spacing:.05em;}
.tp-article__title{font-size:clamp(24px,5.5vw,36px);font-weight:800;line-height:1.4;margin:0 0 12px;letter-spacing:.02em;}
.tp-article__sub{font-size:14px;opacity:.85;margin:0 0 20px;line-height:1.6;}
.tp-article__meta{display:flex;gap:12px;align-items:center;font-size:12px;opacity:.75;flex-wrap:wrap;}
.tp-article__meta-sep{opacity:.5;}

.tp-article__body{padding:40px 0;}

.tp-lead{font-size:15px;padding:24px;background:#faf7ff;border-left:4px solid #a369ff;border-radius:8px;margin:0 0 40px;}
.tp-lead p{margin:0 0 12px;line-height:1.9;}
.tp-lead p:last-child{margin-bottom:0;}
.tp-lead strong{color:#7349d1;font-weight:700;}

.tp-section{margin:0 0 48px;}
.tp-section--hilight{padding:32px 24px;background:linear-gradient(135deg,#fff4f9,#f4ebff);border-radius:16px;margin:48px 0;}
.tp-h2{font-size:clamp(20px,4.5vw,26px);font-weight:800;margin:0 0 20px;padding:0 0 12px;border-bottom:3px solid #a369ff;color:#2a1850;}
.tp-h3{font-size:17px;font-weight:700;margin:0 0 10px;color:#4a2d7a;line-height:1.5;}
.tp-section p{font-size:15px;line-height:1.9;margin:0 0 16px;color:#3a2a5a;}
.tp-section strong{color:#7349d1;font-weight:700;}

.tp-check{list-style:none;padding:20px 24px;margin:20px 0;background:#fff8f0;border:1px solid #ffe4c4;border-radius:12px;}
.tp-check li{position:relative;padding:6px 0 6px 28px;font-size:14px;}
.tp-check li::before{content:"☑";position:absolute;left:0;color:#ff8a4a;font-weight:700;}

.tp-mech{padding:24px;margin:16px 0;background:#fff;border:1px solid #ece5ff;border-radius:14px;position:relative;}
.tp-mech__num{display:inline-block;background:linear-gradient(135deg,#7349d1,#a369ff);color:#fff;font-weight:800;font-size:13px;padding:6px 14px;border-radius:999px;margin:0 0 10px;letter-spacing:.08em;}

.tp-step{padding:24px;margin:16px 0;background:#fff;border:2px solid #e5dbff;border-radius:14px;}
.tp-step__num{display:inline-block;background:#7349d1;color:#fff;font-weight:800;font-size:12px;padding:5px 12px;border-radius:6px;margin:0 0 10px;letter-spacing:.08em;}

.tp-inline-cta{margin:40px 0;padding:24px;background:linear-gradient(135deg,#fff4e0,#ffe8f0);border-radius:16px;text-align:center;border:2px dashed #ff8a4a;}
.tp-inline-cta__text{font-size:14px;margin:0 0 14px;color:#4a2d7a;font-weight:600;}
.tp-inline-cta__btn{display:inline-block;padding:14px 32px;background:linear-gradient(135deg,#E8698B,#a369ff);color:#fff;text-decoration:none;border-radius:999px;font-weight:700;font-size:15px;box-shadow:0 4px 16px rgba(163,105,255,.3);transition:transform .2s;}
.tp-inline-cta__btn:hover{transform:translateY(-2px);}

.tp-mbti-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0;}
@media(min-width:640px){.tp-mbti-grid{grid-template-columns:repeat(4,1fr);}}
.tp-mbti-card{display:block;padding:16px 12px;background:#fff;border:1px solid #ece5ff;border-radius:12px;text-align:center;text-decoration:none;color:#4a2d7a;transition:all .2s;}
.tp-mbti-card:hover{background:#faf7ff;border-color:#a369ff;transform:translateY(-2px);}
.tp-mbti-card strong{display:block;font-size:15px;font-weight:800;color:#7349d1;margin-bottom:4px;}
.tp-mbti-card span{display:block;font-size:11px;color:#6a5a8a;line-height:1.4;}

/* ダンス図 */
.tp-dance{display:flex;flex-direction:column;align-items:center;gap:12px;margin:24px 0;padding:24px;background:#faf7ff;border-radius:16px;}
@media(min-width:640px){.tp-dance{flex-direction:row;align-items:stretch;}}
.tp-dance__side{flex:1;padding:20px;background:#fff;border-radius:12px;text-align:center;}
.tp-dance__side--pursuer{border:2px solid #ffb3d1;}
.tp-dance__side--withdrawer{border:2px solid #a9c7ff;}
.tp-dance__icon{font-size:40px;display:block;margin-bottom:8px;}
.tp-dance__side h4{font-size:15px;margin:0 0 12px;color:#4a2d7a;}
.tp-dance__side ul{list-style:none;padding:0;margin:0;font-size:13px;text-align:left;}
.tp-dance__side li{padding:4px 0 4px 16px;position:relative;line-height:1.6;}
.tp-dance__side li::before{content:"•";position:absolute;left:4px;color:#a369ff;}
.tp-dance__arrow{font-size:32px;color:#a369ff;font-weight:700;align-self:center;}

.tp-related{display:grid;grid-template-columns:1fr;gap:12px;margin:20px 0;}
@media(min-width:640px){.tp-related{grid-template-columns:1fr 1fr;}}
.tp-related__card{display:flex;gap:16px;padding:16px;background:#fff;border:1px solid #ece5ff;border-radius:12px;text-decoration:none;color:inherit;align-items:center;transition:all .2s;}
.tp-related__card:hover{background:#faf7ff;border-color:#a369ff;transform:translateX(4px);}
.tp-related__icon{font-size:32px;flex-shrink:0;}
.tp-related__card h3{font-size:14px;margin:0 0 4px;color:#4a2d7a;line-height:1.4;}
.tp-related__card p{font-size:12px;margin:0;color:#6a5a8a;line-height:1.6;}

.tp-final-cta{margin:60px 0 40px;padding:40px 24px;background:linear-gradient(135deg,#7349d1,#E8698B);border-radius:20px;text-align:center;color:#fff;}
.tp-final-cta h2{font-size:22px;margin:0 0 12px;color:#fff;border:none;padding:0;}
.tp-final-cta p{font-size:14px;margin:0 0 24px;opacity:.95;color:#fff;}
.tp-final-cta__btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}
.tp-final-cta__btn{display:inline-block;padding:14px 28px;border-radius:999px;font-weight:700;text-decoration:none;transition:transform .2s;font-size:15px;}
.tp-final-cta__btn--primary{background:#fff;color:#7349d1;}
.tp-final-cta__btn--secondary{background:rgba(255,255,255,.18);color:#fff;border:2px solid rgba(255,255,255,.6);}
.tp-final-cta__btn:hover{transform:translateY(-2px);}

.tp-share{margin:40px 0 0;padding:24px;text-align:center;background:#faf7ff;border-radius:12px;}
.tp-share p{font-size:13px;margin:0 0 14px;color:#6a5a8a;}
.tp-share__btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.tp-share__btn{display:inline-block;padding:10px 22px;border-radius:999px;font-weight:700;text-decoration:none;font-size:13px;transition:opacity .2s;}
.tp-share__btn--x{background:#000;color:#fff;}
.tp-share__btn--line{background:#06c755;color:#fff;}
.tp-share__btn:hover{opacity:.85;}

/* ---------- コラム→診断 共通CTA（get_footerフックで全topicテンプレに自動挿入） ---------- */
.tp-shindan-cta{background:linear-gradient(135deg,#f5e8ff 0%,#ffe8f5 55%,#fff4e6 100%);padding:48px 0 52px;margin-top:40px;}
.tp-shindan-cta__label{display:inline-block;padding:4px 16px;background:#fff;border-radius:999px;color:#a369ff;font-size:11px;font-weight:700;letter-spacing:.12em;margin:0 0 14px;}
.tp-shindan-cta .ms-container{text-align:center;}
.tp-shindan-cta__title{font-size:clamp(20px,5vw,28px);font-weight:900;color:#2a1850;margin:0 0 14px;line-height:1.6;}
.tp-shindan-cta__lead{font-size:13px;line-height:2;color:#534670;margin:0 0 24px;text-align:left;}
@media(min-width:700px){.tp-shindan-cta__lead{text-align:center;}}
.tp-shindan-cta__main{display:flex;flex-direction:column;align-items:center;gap:8px;background:#fff;border:2px solid #8E7CC3;border-radius:22px;padding:26px 20px 24px;text-decoration:none;margin:0 0 18px;position:relative;box-shadow:0 14px 34px rgba(192,106,255,.22);transition:all .2s;}
.tp-shindan-cta__main:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(192,106,255,.32);}
.tp-shindan-cta__main-badge{position:absolute;top:-13px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:5px 18px;border-radius:999px;background:linear-gradient(135deg,#E8698B,#8E7CC3);color:#fff;font-size:11px;font-weight:800;letter-spacing:.05em;box-shadow:0 4px 12px rgba(209,69,133,.35);}
.tp-shindan-cta__main-name{font-size:19px;font-weight:900;color:#2a1850;margin-top:6px;}
.tp-shindan-cta__main-desc{font-size:12px;line-height:1.9;color:#534670;}
.tp-shindan-cta__main-btn{display:inline-block;margin-top:6px;padding:13px 34px;border-radius:999px;background:linear-gradient(135deg,#E8698B,#8E7CC3);color:#fff;font-size:14px;font-weight:800;box-shadow:0 6px 16px rgba(209,69,133,.3);}
.tp-shindan-cta__grid{display:grid;grid-template-columns:1fr;gap:10px;text-align:left;}
@media(min-width:700px){.tp-shindan-cta__grid{grid-template-columns:repeat(2,1fr);}}
.tp-shindan-cta__item{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #ece5ff;border-radius:16px;padding:14px 16px;text-decoration:none;transition:all .2s;}
.tp-shindan-cta__item:hover{transform:translateY(-2px);border-color:#c9a9f5;box-shadow:0 8px 20px rgba(115,73,209,.12);}
.tp-shindan-cta__item-emoji{font-size:24px;flex-shrink:0;}
.tp-shindan-cta__item-body{display:flex;flex-direction:column;gap:2px;min-width:0;}
.tp-shindan-cta__item-name{font-size:13px;font-weight:800;color:#2a1850;}
.tp-shindan-cta__item-desc{font-size:11px;line-height:1.6;color:#8a7aa0;}

/* ---------- 作品別キャラMBTI一覧（page-topic-chars-work.php） ---------- */
.cw-lead{font-size:14px;line-height:2.1;color:#3a2a5a;margin:0 0 14px;}
.cw-lead-sub{font-size:13px;line-height:2;color:#534670;margin:0;}
.cw-dist{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:0 0 12px;}
@media(min-width:700px){.cw-dist{grid-template-columns:repeat(4,1fr);}}
.cw-dist__item{display:flex;flex-direction:column;align-items:center;gap:4px;background:#fff;border:2px solid var(--cw-color);border-radius:14px;padding:14px 8px;}
.cw-dist__label{font-size:12px;font-weight:800;color:var(--cw-color);}
.cw-dist__count{font-size:20px;font-weight:900;color:#2a1850;}
.cw-dist__note{font-size:12px;line-height:1.9;color:#8a7aa0;margin:0;}
.cw-toc{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px;}
@media(min-width:700px){.cw-toc{grid-template-columns:repeat(3,1fr);}}
.cw-toc a{display:flex;flex-direction:column;gap:2px;background:#fff;border:1px solid #ece5ff;border-radius:12px;padding:10px 12px;text-decoration:none;font-size:12px;font-weight:700;color:#2a1850;transition:all .2s;}
.cw-toc a:hover{border-color:#c9a9f5;transform:translateY(-2px);}
.cw-toc a span{font-size:10px;font-weight:600;color:#8a7aa0;}
.cw-char{border-top:1px dashed #e5dbff;padding-top:26px;}
.cw-tags{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px;}
.cw-tag{display:inline-block;padding:5px 12px;border-radius:999px;font-size:12px;font-weight:700;text-decoration:none;}
.cw-tag--mbti{background:#e5dbff;color:#7349d1;letter-spacing:.05em;}
.cw-tag--svaf{color:#fff;}
.cw-tag--b5{background:#f3ecfb;color:#6b3fa0;border:1px solid #d9c7ef;}
.cw-reason{font-size:13px;line-height:2;color:#3a2a5a;margin:0 0 14px;}
.cw-radars{display:grid;grid-template-columns:1fr;gap:10px;margin:0 0 14px;}
@media(min-width:620px){.cw-radars{grid-template-columns:1fr 1fr;}}
.cw-radar-box{background:#fafbff;border:1px solid #ece5ff;border-radius:14px;padding:12px 6px 4px;text-align:center;}
.cw-radar-box p{font-size:11px;font-weight:800;color:#2a1850;margin:0 0 4px;}
.cw-radar-box canvas{max-width:100%;}
.cw-why{background:linear-gradient(135deg,#faf5ff,#fff5f9);border:1px solid #e5dbff;border-radius:14px;padding:16px 18px;}
.cw-why h3{font-size:13px;font-weight:800;color:#7349d1;margin:0 0 10px;}
.cw-why p{font-size:13px;line-height:2;color:#3a2a5a;margin:0;}
.cw-disclaimer{font-size:11px;color:#8a7aa0;text-align:center;line-height:1.8;margin:24px 0 0;}

/* ---------- 診断一覧ページ（page-shindan-list.php） ---------- */
.sd-group__desc{font-size:13px;color:#534670;line-height:1.9;margin:0 0 16px;}
.sd-grid{display:grid;grid-template-columns:1fr;gap:12px;}
@media(min-width:720px){.sd-grid{grid-template-columns:repeat(2,1fr);}}
.sd-card{position:relative;display:flex;align-items:center;gap:14px;background:#fff;border:1.5px solid #ece5ff;border-radius:18px;padding:18px 16px;text-decoration:none;transition:all .2s;}
.sd-card:hover{transform:translateY(-3px);border-color:#c9a9f5;box-shadow:0 12px 26px rgba(115,73,209,.14);}
.sd-card--main{grid-column:1/-1;border:2px solid #8E7CC3;background:linear-gradient(135deg,#faf5ff,#fff5f9);box-shadow:0 10px 26px rgba(192,106,255,.18);}
.sd-card__badge{position:absolute;top:-11px;left:18px;padding:4px 14px;border-radius:999px;background:linear-gradient(135deg,#E8698B,#8E7CC3);color:#fff;font-size:10.5px;font-weight:800;box-shadow:0 4px 10px rgba(209,69,133,.3);}
.sd-card__emoji{font-size:30px;flex-shrink:0;}
.sd-card__body{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;}
.sd-card__name{font-size:14.5px;font-weight:800;color:#2a1850;}
.sd-card--main .sd-card__name{font-size:16.5px;}
.sd-card__desc{font-size:12px;line-height:1.7;color:#534670;}
.sd-card__meta{font-size:11px;font-weight:700;color:#8b6cc1;}
.sd-card__arrow{flex-shrink:0;font-size:16px;font-weight:900;color:#c9a9f5;}

/* ---------- 作品別ページ シェアバー ---------- */
.cw-share{background:linear-gradient(135deg,#f5e8ff,#ffe8f5);border-radius:18px;padding:22px 18px;margin:28px 0 0;text-align:center;}
.cw-share__title{font-size:15px;font-weight:900;color:#2a1850;margin:0 0 4px;}
.cw-share__sub{font-size:11px;color:#8a7aa0;margin:0 0 14px;}
.cw-share__btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.cw-share__btn{display:inline-block;padding:12px 22px;border-radius:999px;font-size:13px;font-weight:800;text-decoration:none;border:none;cursor:pointer;transition:all .2s;font-family:inherit;}
.cw-share__btn:hover{transform:translateY(-2px);}
.cw-share__btn--x{background:#0f1419;color:#fff;box-shadow:0 6px 14px rgba(15,20,25,.3);}
.cw-share__btn--line{background:#06c755;color:#fff;box-shadow:0 6px 14px rgba(6,199,85,.3);}
.cw-share__btn--copy{background:#fff;color:#7349d1;border:2px solid #d3bfef;}


/* ---------- 作品一覧ハブ（page-sakuhin-list.php） ---------- */
.sk-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;}
@media(min-width:700px){.sk-grid{grid-template-columns:repeat(4,1fr);}}
.sk-card{display:flex;flex-direction:column;align-items:center;gap:4px;background:#fff;border:1.5px solid #ece5ff;border-radius:16px;padding:16px 10px;text-decoration:none;transition:all .2s;}
.sk-card:hover{transform:translateY(-3px);border-color:#c9a9f5;box-shadow:0 10px 22px rgba(115,73,209,.13);}
.sk-card__emoji{font-size:28px;line-height:1;}
.sk-card__name{font-size:12.5px;font-weight:800;color:#2a1850;text-align:center;line-height:1.4;}
.sk-card__count{font-size:10.5px;font-weight:700;color:#8b6cc1;}

/* ── 人気ランキング（作品分析・関係性コラム） ── */
.skr-list{margin:0 0 6px;}
.skr-item{display:flex;align-items:center;gap:11px;background:#fff;border:1.5px solid #eee4f8;border-radius:13px;padding:11px 14px;margin:0 0 8px;text-decoration:none;transition:all .2s;}
.skr-item:hover{border-color:#c9a9f5;box-shadow:0 8px 18px rgba(115,73,209,.12);transform:translateY(-2px);}
.skr-rank{width:27px;height:27px;border-radius:50%;background:#b5a3d6;color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center;font-size:.84rem;flex-shrink:0;}
.skr-item--1 .skr-rank{background:linear-gradient(135deg,#f0b429,#e8912a);box-shadow:0 3px 8px rgba(232,145,42,.35);}
.skr-item--2 .skr-rank{background:linear-gradient(135deg,#a8b3bf,#7b8794);}
.skr-item--3 .skr-rank{background:linear-gradient(135deg,#c9803a,#a05a2c);}
.skr-emoji{font-size:21px;flex-shrink:0;line-height:1;}
.skr-name{font-weight:800;color:#3a2a55;font-size:.9rem;flex:1;line-height:1.55;min-width:0;}
.skr-sub{font-size:.73rem;color:#8b7f9d;font-weight:700;flex-shrink:0;}

/* ── 作品ハブ: ジャンルチップナビ・検索・カテゴリ差し色（2026-07 インデックス刷新） ── */
.sk-chipnav{position:sticky;top:var(--header-height,64px);z-index:40;margin:0 -14px 14px;padding:10px 14px;background:rgba(250,247,255,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid #eee4f8;}
.sk-chipnav__inner{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px;}
.sk-chipnav__inner::-webkit-scrollbar{display:none;}
.sk-chip{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;background:#fff;border:1.5px solid color-mix(in srgb,var(--skc) 35%,#fff);border-radius:999px;padding:6px 12px;font-size:12px;font-weight:800;color:#3a2a55;text-decoration:none;white-space:nowrap;transition:all .18s;}
.sk-chip:hover{background:color-mix(in srgb,var(--skc) 10%,#fff);border-color:var(--skc);transform:translateY(-1px);}
.sk-chip__n{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:color-mix(in srgb,var(--skc) 14%,#fff);color:var(--skc);font-size:10.5px;font-weight:900;}
@media(min-width:700px){.sk-chipnav{margin:0 0 18px;border-radius:14px;border:1px solid #eee4f8;}.sk-chipnav__inner{flex-wrap:wrap;overflow:visible;}}
.sk-search{display:flex;align-items:center;gap:9px;background:#fff;border:2px solid #e3d7f7;border-radius:999px;padding:11px 18px;margin:0 0 8px;transition:border-color .2s;}
.sk-search:focus-within{border-color:#9d6fe0;box-shadow:0 6px 18px rgba(115,73,209,.12);}
.sk-search__icon{font-size:15px;line-height:1;}
.sk-search__input{flex:1;border:0;outline:0;background:none;font-size:14px;font-weight:700;color:#2a1850;min-width:0;}
.sk-search__input::placeholder{color:#b3a6cc;font-weight:600;}
.sk-search__none{font-size:12.5px;color:#8b7f9d;font-weight:700;margin:8px 2px 0;}
.sk-genre{scroll-margin-top:calc(var(--header-height,64px) + 62px);}
.sk-genre__title{display:flex;align-items:center;gap:9px;padding-left:12px;border-left:5px solid var(--skc,#b5a3d6);}
.sk-genre__count{font-size:11px;font-weight:900;color:var(--skc,#8b6cc1);background:color-mix(in srgb,var(--skc,#8b6cc1) 11%,#fff);border-radius:999px;padding:3px 9px;}
.sk-genre .sk-card:hover{border-color:var(--skc);box-shadow:0 10px 22px color-mix(in srgb,var(--skc) 20%,transparent);}
.sk-card{position:relative;}
.sk-card--new::after{content:'NEW';position:absolute;top:-7px;right:-4px;background:linear-gradient(135deg,#ff7a59,#e0568f);color:#fff;font-size:9px;font-weight:900;letter-spacing:.06em;border-radius:999px;padding:3px 7px;box-shadow:0 3px 8px rgba(224,86,143,.4);}

/* ── コラムハブ刷新 2026-07: stickyナビ+SP2列コンパクトカード ── */
.tp-hub__nav{position:sticky;top:var(--header-height,64px);z-index:40;background:rgba(250,247,255,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:0 0 14px 14px;padding:10px 12px;margin:24px -12px 34px;}
@media(max-width:639px){
	.tp-hub__nav{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;scrollbar-width:none;-webkit-overflow-scrolling:touch;gap:7px;}
	.tp-hub__nav::-webkit-scrollbar{display:none;}
	.tp-hub__nav-btn{flex-shrink:0;white-space:nowrap;font-size:12px;padding:7px 13px;}
	.tp-hub__section{scroll-margin-top:calc(var(--header-height,64px) + 56px);}
	.tp-hub__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
	.tp-hub__grid > *{min-width:0;}
	.tp-card{min-width:0;overflow:hidden;}
	.tp-card__thumb{min-height:64px;font-size:32px;}
	.tp-card__body{padding:10px 10px 11px;}
	.tp-card__cat{font-size:9.5px;}
	.tp-card__title{font-size:12.5px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
	.tp-card__excerpt{font-size:10.5px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
	.tp-card__meta{font-size:9.5px;}
	.tp-card--featured{grid-column:auto;flex-direction:column;}
	.tp-card--featured .tp-card__thumb{width:auto;min-height:64px;font-size:32px;}
	.tp-card__badge{font-size:9px;padding:3px 8px;}
}

/* キャラで読む愛着セクション（関係性コラム+作品ランキング導線） */
.tp-chars-bridge{background:linear-gradient(135deg,#f4f0fc,#fdf1f7);border:2px solid #ddc9f0;border-radius:20px;padding:20px 16px;margin:0 0 40px;}
.tp-chars-bridge__grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:12px;}
@media(min-width:700px){.tp-chars-bridge__grid{grid-template-columns:1fr 1fr;}}
.tp-chars-bridge__col{background:#fff;border:1.5px solid #ece5ff;border-radius:14px;padding:14px;}
.tp-chars-bridge__col-title{font-size:13.5px;font-weight:900;color:#3a2a55;margin:0 0 8px;}
.tp-chars-bridge__item{display:block;font-size:12.5px;font-weight:700;color:#5b4a7a;text-decoration:none;padding:7px 4px;border-bottom:1px dashed #eee4f8;line-height:1.6;}
.tp-chars-bridge__item:last-of-type{border-bottom:0;}
.tp-chars-bridge__item:hover{color:#7349d1;}
.tp-chars-bridge__more{display:inline-block;margin-top:8px;font-size:12px;font-weight:900;color:#7349d1;text-decoration:none;}

/* 辞典→関係性/ランキング導線バー */
.char-bridge{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:14px 0 0;}
.char-bridge a{display:block;background:#fff;border:1.5px solid #e3d7f7;border-radius:13px;padding:12px 12px;text-decoration:none;font-size:12px;font-weight:900;color:#6b3fa0;line-height:1.6;transition:border-color .2s;}
.char-bridge a:hover{border-color:#c9a9f5;}
.char-bridge a span{display:block;font-size:10px;font-weight:700;color:#8b7f9d;margin-top:2px;}


/* いまの悩みからさがす */
.tp-nayami{margin:14px 0 18px;}
.tp-nayami__title{font-size:14.5px;font-weight:900;color:#3a2a55;margin:0 0 10px;}
.tp-nayami__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
@media(min-width:700px){.tp-nayami__grid{grid-template-columns:repeat(3,1fr);}}
.tp-nayami__card{display:block;min-width:0;background:#fff;border:1.5px solid #e3d7f7;border-radius:14px;padding:13px 13px;text-decoration:none;font-size:13px;font-weight:900;color:#3a2a55;line-height:1.55;transition:all .18s;}
.tp-nayami__card:hover{border-color:#c9a9f5;transform:translateY(-2px);box-shadow:0 8px 18px rgba(115,73,209,.12);}
.tp-nayami__card span{display:block;font-size:10.5px;font-weight:700;color:#8b7f9d;margin-top:3px;line-height:1.6;}


/* 悩み別絞り込み */
.tp-nayami__hint{font-size:10.5px;font-weight:700;color:#a294b8;margin-left:6px;}
.tp-nayami__card{cursor:pointer;text-align:left;width:100%;font-family:inherit;-webkit-appearance:none;appearance:none;}
.tp-nayami__card.is-active{border-color:#7349d1;background:linear-gradient(135deg,#f6f0ff,#fdf2fa);box-shadow:0 6px 16px rgba(115,73,209,.18);}
.tp-nayami-result{margin:0 0 22px;}
.tp-nayami-result__bar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 12px;flex-wrap:wrap;}
.tp-nayami-result__label{font-size:15px;font-weight:900;color:#3a2a55;margin:0;}
.tp-nayami-result__reset{cursor:pointer;font-family:inherit;font-size:11.5px;font-weight:800;color:#7349d1;background:#f3ecff;border:1.5px solid #d9c8f5;border-radius:999px;padding:7px 13px;-webkit-appearance:none;appearance:none;}
.tp-nayami-result__hub{display:flex;align-items:center;gap:10px;min-width:0;background:linear-gradient(135deg,#3a2a55,#5b3a8e);border-radius:14px;padding:14px 15px;margin:0 0 14px;text-decoration:none;color:#fff;}
.tp-nayami-result__hub-badge{flex-shrink:0;font-size:10px;font-weight:900;background:#f6cf49;color:#3a2a55;border-radius:999px;padding:4px 9px;}
.tp-nayami-result__hub-title{flex:1;min-width:0;font-size:12.5px;font-weight:800;line-height:1.5;}
.tp-nayami-result__hub-arrow{flex-shrink:0;font-weight:900;}

/* ══════════════════════════════════════════
   可読性の作り込み（2026-07-27）
   実物をスクショで確認したところ、本文15px・行間1.9では
   日本語の長文が詰まって見え、見出しの階層も判別しにくかった。
   ここは後勝ちで既定値を上書きする。
   ══════════════════════════════════════════ */
.tp-article__body{padding:32px 0 40px;}
.tp-section p{font-size:15.5px;line-height:2.05;margin:0 0 20px;letter-spacing:.012em;color:#3a2f52;}
.tp-lead{font-size:15.5px;}
.tp-lead p{line-height:2.0;margin:0 0 14px;}

/* 見出しの階層を目で分かるようにする */
.tp-h2{margin:0 0 18px;padding:0 0 12px;letter-spacing:.01em;line-height:1.55;}
.tp-h3{font-size:17.5px;line-height:1.6;margin:26px 0 12px;padding-left:12px;border-left:5px solid #a369ff;}
.tp-section > .tp-h3:first-child{margin-top:0;}

/* 強調は色だけだと地の文に埋もれるので、下半分に淡いマーカーを敷く */
.tp-section strong,.tp-lead strong{color:#4a2d7a;font-weight:800;
	background:linear-gradient(transparent 62%,rgba(196,150,255,.35) 62%);}

/* 本文中リンクに下線を出す（色の違いだけでは気づかれない） */
.tp-section p a,.tp-lead p a,.tp-check a{color:#7349d1;text-decoration:underline;
	text-underline-offset:3px;text-decoration-thickness:1.5px;text-decoration-color:rgba(115,73,209,.45);}
.tp-section p a:hover,.tp-lead p a:hover{text-decoration-color:#7349d1;}

/* チェックリスト */
.tp-check li{font-size:14.5px;line-height:1.95;padding:9px 0 9px 30px;}
.tp-check li+li{border-top:1px dashed #ffe0c0;}
.tp-check li::before{top:9px;}

/* カード内の余白調整 */
.tp-mech,.tp-step{padding:22px 20px;}
.tp-mech p:last-child,.tp-step p:last-child{margin-bottom:0;}

/* 見出しから自動生成する目次 */
.tp-toc{background:#fff;border:1.5px solid #ece5ff;border-radius:14px;padding:16px 18px;margin:0 0 36px;
	box-shadow:0 3px 14px rgba(115,73,209,.06);}
.tp-toc__h{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:900;letter-spacing:.12em;
	color:#7349d1;margin:0 0 10px;}
.tp-toc__time{margin-left:auto;font-size:11px;font-weight:800;color:#a093b5;letter-spacing:0;}
.tp-toc ol{margin:0;padding-left:1.35em;}
.tp-toc li{margin:0 0 7px;}
.tp-toc li.is-hidden{display:none;}
.tp-toc a{font-size:13.5px;line-height:1.7;color:#4a2d7a;text-decoration:none;}
.tp-toc a:hover{text-decoration:underline;}
.tp-toc__more{display:block;margin:10px 0 0;font-size:12.5px;font-weight:800;color:#7349d1;
	background:none;border:0;padding:0;cursor:pointer;font-family:inherit;}
.tp-toc__more:hover{text-decoration:underline;}

@media (max-width:360px){
	.tp-section p{font-size:15px;line-height:2.0;}
	.tp-h3{font-size:16.5px;}
	.tp-toc{padding:14px 15px;}
}

/* 本文中盤の「次に読む」。読了前に離脱する層への出口 */
.tp-midread{background:linear-gradient(135deg,#fdf8ec,#fbf1f7);border:1.5px solid #f0dcc4;
	border-radius:14px;padding:15px 17px;margin:26px 0;}
.tp-midread__h{font-size:12px;font-weight:900;letter-spacing:.08em;color:#b07a2a;margin:0 0 9px;}
.tp-midread ul{list-style:none;margin:0;padding:0;}
.tp-midread li{margin:0;padding:8px 0;}
.tp-midread li+li{border-top:1px dashed #eddcc4;}
.tp-midread a{font-size:13.5px;font-weight:800;line-height:1.65;color:#7349d1;
	text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(115,73,209,.4);}
.tp-midread a::before{content:'▸ ';color:#c99a4a;}

/* ===========================================================
   愛着タイプ別ガイド記事（tp-topic__系）の視覚ブロック
   =========================================================== */
.ms-tiercard{max-width:820px;margin:26px auto;padding:22px 18px 20px;background:linear-gradient(180deg,var(--tcbg,#f3edff),#fff);border:1px solid #ece5ff;border-radius:20px;box-shadow:0 4px 18px rgba(80,40,160,.07);text-align:center;}
.ms-tiercard__label{margin:0 0 14px;font-size:13px;font-weight:800;color:var(--tc,#4d2f91);letter-spacing:.02em;}
.ms-tiercard__label strong{color:var(--tc2,#7349d1);}
.ms-tiercard__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 16px;}
.ms-tiercard__item{display:flex;flex-direction:column;align-items:center;gap:5px;text-decoration:none;color:inherit;background:#fff;border:1px solid #ece5ff;border-radius:14px;padding:8px 4px 7px;transition:transform .2s,box-shadow .2s,border-color .2s;}
.ms-tiercard__item:hover{transform:translateY(-3px);border-color:var(--tc2,#7349d1);box-shadow:0 8px 20px rgba(80,40,160,.14);}
.ms-tiercard__item img{width:100%;max-width:96px;height:auto;display:block;}
.ms-tiercard__item span{display:flex;align-items:center;justify-content:center;min-height:2.7em;font-size:10px;font-weight:800;color:var(--tc,#4d2f91);line-height:1.35;letter-spacing:-.03em;text-align:center;}
.ms-tiercard__lead{margin:0 0 16px;font-size:13.5px;line-height:1.95;color:#4a3f63;text-align:left;}
.ms-tiercard__lead strong{color:var(--tc,#4d2f91);font-weight:900;}
.ms-tiercard__btn{display:inline-block;background:linear-gradient(135deg,var(--tc,#4d2f91),var(--tc2,#7349d1));color:#fff;font-weight:900;font-size:13px;padding:12px 24px;border-radius:999px;text-decoration:none;box-shadow:0 8px 22px rgba(80,40,160,.24);}
@media(max-width:345px){
.ms-tiercard{padding:18px 12px 16px;}
.ms-tiercard__grid{gap:5px;}
.ms-tiercard__item{padding:6px 2px 5px;border-radius:11px;}
.ms-tiercard__item span{font-size:9px;}
.ms-tiercard__btn{font-size:12px;padding:11px 16px;}
}

.ms-sibling{max-width:820px;margin:30px auto;padding:24px 18px;background:#fff;border:1px solid #ece5ff;border-radius:20px;box-shadow:0 2px 12px rgba(80,40,160,.06);}
.ms-sibling__h{margin:0 0 8px;font-size:17px;font-weight:900;color:#2a1850;}
.ms-sibling__lead{margin:0 0 16px;font-size:13px;line-height:1.9;color:#6a5a8a;}
.ms-sibling__grid{display:grid;grid-template-columns:1fr;gap:12px;}
@media(min-width:640px){.ms-sibling__grid{grid-template-columns:1fr 1fr;}}
.ms-sibling__card{display:flex;flex-direction:column;gap:7px;padding:16px 16px 14px;background:#faf8ff;border:1px solid #ece5ff;border-left:5px solid var(--sc,#7349d1);border-radius:14px;text-decoration:none;transition:transform .2s,box-shadow .2s;}
.ms-sibling__card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(80,40,160,.13);}
.ms-sibling__badge{font-size:11px;font-weight:900;color:var(--sc,#7349d1);letter-spacing:.04em;}
.ms-sibling__title{font-size:14.5px;font-weight:800;color:#2a1850;line-height:1.6;}
.ms-sibling__go{font-size:12px;font-weight:800;color:var(--sc,#7349d1);}

/* ===========================================================
   関係性コラム「2人をデータで見る」
   =========================================================== */
.ms-kpair{max-width:820px;margin:30px auto;padding:24px 18px 20px;background:#fff;border:1px solid #ece5ff;border-radius:20px;box-shadow:0 2px 12px rgba(80,40,160,.06);}
.ms-kpair__h{margin:0 0 8px;font-size:17px;font-weight:900;color:#2a1850;}
.ms-kpair__lead{margin:0 0 18px;font-size:13px;line-height:1.95;color:#6a5a8a;}
.ms-kpair__grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;margin:0 0 20px;}
.ms-kpair__card{display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 6px 10px;background:#faf8ff;border:1px solid #ece5ff;border-top:4px solid var(--kc,#7349d1);border-radius:14px;text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s;}
.ms-kpair__card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(80,40,160,.14);}
.ms-kpair__card img{width:100%;max-width:104px;height:auto;display:block;}
.ms-kpair__name{font-size:13px;font-weight:900;color:#2a1850;line-height:1.4;text-align:center;}
.ms-kpair__type{font-size:10.5px;font-weight:800;color:var(--kc,#7349d1);letter-spacing:-.02em;}
.ms-kpair__x{font-size:15px;font-weight:900;color:#b9a9d6;}
.ms-kpair__bars{margin:0 0 14px;}
.ms-kpair__row{margin:0 0 14px;}
.ms-kpair__rowh{margin:0 0 7px;font-size:12.5px;font-weight:900;color:#2a1850;}
.ms-kpair__rowh small{display:block;font-size:11px;font-weight:600;color:#9a8ab0;margin-top:2px;}
.ms-kpair__bar{display:flex;align-items:center;gap:7px;margin:0 0 5px;}
.ms-kpair__bn{flex:0 0 88px;font-size:11px;font-weight:800;color:#6a5a8a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ms-kpair__btrack{flex:1;height:11px;background:#f1ebfb;border-radius:999px;overflow:hidden;}
.ms-kpair__bfill{display:block;height:100%;border-radius:999px;}
.ms-kpair__bv{flex:0 0 26px;text-align:right;font-size:11px;font-weight:900;color:#6a5a8a;}
.ms-kpair__link{margin:0 0 10px;font-size:13px;font-weight:800;}
.ms-kpair__link a{color:#7349d1;}
.ms-kpair__note{margin:0;font-size:11px;line-height:1.85;color:#9a8ab0;}
@media(max-width:345px){
.ms-kpair{padding:18px 12px 16px;}
.ms-kpair__card img{max-width:88px;}
.ms-kpair__name{font-size:12px;}
.ms-kpair__type{font-size:9.5px;}
.ms-kpair__bn{flex:0 0 66px;font-size:10px;}
}

/* ===========================================================
   生きづらさ／型別ページの「4タイプの出方」
   =========================================================== */
.ms-tv{max-width:820px;margin:30px auto;padding:24px 18px 20px;background:#fff;border:1px solid #ece5ff;border-radius:20px;box-shadow:0 2px 12px rgba(80,40,160,.06);}
.ms-tv__h{margin:0 0 8px;font-size:16.5px;font-weight:900;color:#2a1850;line-height:1.55;}
.ms-tv__lead{margin:0 0 16px;font-size:13px;line-height:1.95;color:#6a5a8a;}
.ms-tv__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:0 0 18px;}
.ms-tv__card{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 3px 7px;background:#faf8ff;border:1px solid #ece5ff;border-top:3px solid var(--tvc,#7349d1);border-radius:12px;text-decoration:none;transition:transform .2s,box-shadow .2s;}
.ms-tv__card:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(80,40,160,.14);}
.ms-tv__card img{width:100%;max-width:92px;height:auto;display:block;}
.ms-tv__t{font-size:10.5px;font-weight:900;color:var(--tvc,#7349d1);letter-spacing:-.03em;}
.ms-tv__bars{margin:0 0 18px;padding:14px 14px 10px;background:#faf8ff;border:1px solid #ece5ff;border-radius:14px;}
.ms-tv__barh{margin:0 0 10px;font-size:12px;font-weight:900;color:#2a1850;}
.ms-tv__bar{display:flex;align-items:center;gap:8px;margin:0 0 6px;}
.ms-tv__bn{flex:0 0 74px;font-size:11.5px;font-weight:900;}
.ms-tv__bt{flex:1;height:12px;background:#efe8fb;border-radius:999px;overflow:hidden;}
.ms-tv__bf{display:block;height:100%;border-radius:999px;}
.ms-tv__bv{flex:0 0 34px;text-align:right;font-size:11.5px;font-weight:900;color:#6a5a8a;}
.ms-tv__note{margin:8px 0 0;font-size:10.5px;color:#9a8ab0;}
.ms-tv__hints{display:grid;grid-template-columns:1fr;gap:9px;margin:0 0 16px;}
@media(min-width:640px){.ms-tv__hints{grid-template-columns:1fr 1fr;}}
.ms-tv__hint{padding:12px 13px;background:#fff;border:1px solid #ece5ff;border-left:4px solid var(--tvc,#7349d1);border-radius:0 12px 12px 0;}
.ms-tv__hn{margin:0 0 5px;font-size:12px;font-weight:900;color:var(--tvc,#7349d1);}
.ms-tv__hb{margin:0;font-size:12.5px;line-height:1.9;color:#4a3f63;}
.ms-tv__cta{margin:0;text-align:center;}
.ms-tv__cta a{display:inline-block;background:linear-gradient(135deg,#7349d1,#a369ff);color:#fff;font-weight:900;font-size:13px;padding:12px 24px;border-radius:999px;text-decoration:none;box-shadow:0 8px 22px rgba(115,73,209,.28);}
@media(max-width:345px){
.ms-tv{padding:18px 12px 16px;}
.ms-tv__grid{gap:4px;}
.ms-tv__card img{max-width:78px;}
.ms-tv__t{font-size:9.5px;}
.ms-tv__bn{flex:0 0 62px;font-size:10.5px;}
.ms-tv__cta a{font-size:12px;padding:11px 16px;}
}

/* ===========================================================
   辞典のキャラ文脈CTA
   =========================================================== */
.ms-ccta{margin:30px 0;padding:24px 18px 20px;background:linear-gradient(170deg,#fff,#faf8ff);border:2px solid var(--cc,#7349d1);border-radius:20px;box-shadow:0 6px 22px rgba(80,40,160,.10);text-align:center;}
.ms-ccta__eye{margin:0 0 8px;font-size:11px;font-weight:900;letter-spacing:.14em;color:var(--cc,#7349d1);}
.ms-ccta__h{margin:0 0 12px;font-size:18px;font-weight:900;color:#2a1850;line-height:1.6;}
.ms-ccta__h b{color:var(--cc,#7349d1);}
.ms-ccta__stat{margin:0 0 16px;font-size:13px;line-height:1.95;color:#4a3f63;text-align:left;}
.ms-ccta__stat b{color:#2a1850;}
.ms-ccta__pct{font-size:1.35em;color:var(--cc,#7349d1);}
.ms-ccta__btns{display:flex;flex-direction:column;gap:9px;margin:0 0 14px;}
.ms-ccta__b1{display:block;background:linear-gradient(135deg,var(--cc,#7349d1),#a369ff);color:#fff;font-weight:900;font-size:14px;padding:15px 18px;border-radius:999px;text-decoration:none;box-shadow:0 8px 22px rgba(80,40,160,.26);}
.ms-ccta__b2{display:block;background:#fff;border:2px solid var(--cc,#7349d1);color:var(--cc,#7349d1);font-weight:900;font-size:13px;padding:13px 18px;border-radius:999px;text-decoration:none;}
.ms-ccta__sub{margin:0;font-size:11.5px;line-height:1.9;color:#8b7f9d;}
.ms-ccta__sub a{color:var(--cc,#7349d1);font-weight:800;}
@media(max-width:345px){
.ms-ccta{padding:18px 12px 16px;}
.ms-ccta__h{font-size:16px;}
.ms-ccta__b1{font-size:13px;padding:14px 12px;}
.ms-ccta__b2{font-size:12px;padding:12px 12px;}
}

/* ===========================================================
   作品ページの文脈CTA
   =========================================================== */
.ms-wcta{margin:34px 0;padding:0;background:none;border:0;border-radius:0;box-shadow:none;text-align:left;}  /* 記事の一部として読ませる（2026-08-01）。囲み・中央揃えは使わない */
.ms-wcta__eye{margin:0 0 8px;font-size:11px;font-weight:900;letter-spacing:.14em;color:var(--wc,#7349d1);}
.ms-wcta__h{margin:0 0 12px;font-size:17px;font-weight:900;color:#2a1850;line-height:1.6;}
.ms-wcta__h b{color:var(--wc,#7349d1);}
.ms-wcta__stat{margin:0 0 16px;font-size:13px;line-height:1.95;color:#4a3f63;text-align:left;}
.ms-wcta__stat b{color:#2a1850;}
.ms-wcta__b{color:var(--wc,#7349d1);font-size:1.1em;}
.ms-wcta__btns{display:flex;flex-direction:column;gap:9px;margin:0 0 14px;}
.ms-wcta__b1{display:block;background:linear-gradient(135deg,var(--wc,#7349d1),#a369ff);color:#fff;font-weight:900;font-size:14px;padding:15px 18px;border-radius:999px;text-decoration:none;box-shadow:0 8px 22px rgba(80,40,160,.26);}
.ms-wcta__b2{display:block;background:#fff;border:2px solid var(--wc,#7349d1);color:var(--wc,#7349d1);font-weight:900;font-size:13px;padding:13px 18px;border-radius:999px;text-decoration:none;}
.ms-wcta__sub{margin:0;font-size:11.5px;line-height:1.9;color:#8b7f9d;}
.ms-wcta__sub a{color:var(--wc,#7349d1);font-weight:800;}
@media(max-width:345px){
.ms-wcta{padding:0;}
.ms-wcta__h{font-size:15.5px;}
.ms-wcta__b1{font-size:13px;padding:14px 12px;}
.ms-wcta__b2{font-size:12px;padding:12px 12px;}
}

/* ===========================================================
   愛着ペア「2タイプを実在キャラで見る」
   =========================================================== */
.ms-av{max-width:820px;margin:30px auto;padding:24px 18px 20px;background:#fff;border:1px solid #ece5ff;border-radius:20px;box-shadow:0 2px 12px rgba(80,40,160,.06);}
.ms-av__h{margin:0 0 8px;font-size:17px;font-weight:900;color:#2a1850;}
.ms-av__lead{margin:0 0 18px;font-size:13px;line-height:1.95;color:#6a5a8a;}
.ms-av__side{margin:0 0 18px;padding:14px 12px 12px;background:#faf8ff;border:1px solid #ece5ff;border-left:5px solid var(--avc,#7349d1);border-radius:0 14px 14px 0;}
.ms-av__st{margin:0 0 10px;font-size:13.5px;font-weight:900;color:var(--avc,#7349d1);}
.ms-av__st small{display:block;font-size:11.5px;font-weight:600;color:#8b7f9d;margin-top:3px;line-height:1.8;}
.ms-av__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.ms-av__card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px 7px;background:#fff;border:1px solid #ece5ff;border-radius:12px;text-decoration:none;transition:transform .2s,box-shadow .2s;}
.ms-av__card:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(80,40,160,.14);}
.ms-av__card img{width:100%;max-width:96px;height:auto;display:block;}
.ms-av__cn{font-size:11.5px;font-weight:900;color:#2a1850;line-height:1.35;text-align:center;}
.ms-av__cw{font-size:9.5px;color:#9a8ab0;line-height:1.3;text-align:center;}
.ms-av__cta{margin:0 0 8px;text-align:center;}
.ms-av__cta a{display:inline-block;background:linear-gradient(135deg,#7349d1,#a369ff);color:#fff;font-weight:900;font-size:13px;padding:12px 22px;border-radius:999px;text-decoration:none;box-shadow:0 8px 22px rgba(115,73,209,.28);}
.ms-av__note{margin:0;font-size:10.5px;color:#9a8ab0;text-align:center;}
@media(max-width:345px){
.ms-av{padding:18px 12px 16px;}
.ms-av__grid{gap:5px;}
.ms-av__card img{max-width:80px;}
.ms-av__cn{font-size:10.5px;}
.ms-av__cw{font-size:9px;}
}

/* ===========================================================
   辞典キャラの「2つの診断のキャラ」カード
   =========================================================== */
.ms-twin{margin:26px 0;padding:22px 16px 18px;background:#fff;border:1px solid #ece5ff;border-top:4px solid var(--tw,#7349d1);border-radius:20px;box-shadow:0 2px 12px rgba(80,40,160,.06);}
.ms-twin__h{margin:0 0 8px;font-size:16px;font-weight:900;color:#2a1850;line-height:1.55;}
.ms-twin__lead{margin:0 0 16px;font-size:12.5px;line-height:1.95;color:#6a5a8a;}
.ms-twin__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 16px;}
.ms-twin__card{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 6px 9px;background:#faf8ff;border:1px solid #ece5ff;border-radius:14px;text-decoration:none;transition:transform .2s,box-shadow .2s;}
.ms-twin__card:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(80,40,160,.14);}
.ms-twin__card img{width:100%;max-width:120px;height:auto;aspect-ratio:1/1;object-fit:contain;display:block;background:#fff;border-radius:10px;}
.ms-twin__tag{font-size:9.5px;font-weight:900;letter-spacing:.08em;color:#fff;background:var(--tw,#7349d1);border-radius:999px;padding:2px 10px;}
.ms-twin__card--b5 .ms-twin__tag{background:#c0418a;}
.ms-twin__name{font-size:12px;font-weight:900;color:#2a1850;line-height:1.35;text-align:center;letter-spacing:-.03em;}
.ms-twin__type{font-size:10px;font-weight:800;color:#8b7f9d;}
.ms-twin__btns{display:flex;flex-direction:column;gap:8px;}
.ms-twin__b1{display:block;text-align:center;background:linear-gradient(135deg,var(--tw,#7349d1),#a369ff);color:#fff;font-weight:900;font-size:13px;padding:13px 14px;border-radius:999px;text-decoration:none;box-shadow:0 8px 20px rgba(80,40,160,.24);}
.ms-twin__b2{display:block;text-align:center;background:#fff;border:2px solid #c0418a;color:#c0418a;font-weight:900;font-size:12.5px;padding:11px 14px;border-radius:999px;text-decoration:none;}
@media(max-width:345px){.ms-twin{padding:16px 11px 14px;}.ms-twin__card img{max-width:98px;}.ms-twin__name{font-size:11px;}}


/* ── MBTI×愛着 専用記事のヘッダーカード ── */
.ms-ta{max-width:820px;margin:26px auto;padding:22px 18px 20px;background:#fff;border:1px solid #ece5ff;border-radius:20px;box-shadow:0 2px 12px rgba(80,40,160,.06);}
.ms-ta__top{display:flex;align-items:center;gap:16px;margin:0 0 16px;}
.ms-ta__img{width:112px;height:112px;flex:0 0 112px;object-fit:contain;border-radius:16px;background:#fff;border:2px solid var(--taa);padding:5px;}
.ms-ta__id{display:flex;flex-direction:column;gap:5px;min-width:0;}
.ms-ta__badge{align-self:flex-start;background:var(--taa);color:#fff;font-size:12px;font-weight:900;padding:5px 12px;border-radius:999px;letter-spacing:.02em;}
.ms-ta__name{font-size:20px;font-weight:900;color:#2a1850;line-height:1.35;}
.ms-ta__code{font-size:12px;font-weight:800;color:var(--tac);letter-spacing:.08em;}
.ms-ta__stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 10px;}
.ms-ta__stat{background:#faf7ff;border:1px solid #ece5ff;border-radius:14px;padding:12px 6px;text-align:center;min-width:0;}
.ms-ta__stat b{display:block;font-size:24px;font-weight:900;color:var(--tac);line-height:1.15;}
.ms-ta__stat b i{font-size:13px;font-style:normal;margin-left:1px;}
.ms-ta__stat span{display:block;margin-top:4px;font-size:10.5px;line-height:1.5;color:#7a6a94;}
.ms-ta__note{margin:0 0 16px;font-size:11px;line-height:1.7;color:#9b8db5;text-align:center;}
.ms-ta__barh{margin:0 0 8px;font-size:13px;font-weight:900;color:#2a1850;}
.ms-ta__bars{display:flex;flex-direction:column;gap:7px;margin:0 0 18px;}
.ms-ta__bar{display:grid;grid-template-columns:76px 1fr 40px;align-items:center;gap:8px;}
.ms-ta__bl{font-size:12px;font-weight:700;color:#6a5a8a;}
.ms-ta__bt{display:block;height:11px;background:#f1ecfa;border-radius:999px;overflow:hidden;min-width:0;}
.ms-ta__bt i{display:block;height:100%;background:var(--bc);border-radius:999px;}
.ms-ta__bv{font-size:12px;font-weight:800;color:#6a5a8a;text-align:right;}
.ms-ta__bar.is-on .ms-ta__bl,.ms-ta__bar.is-on .ms-ta__bv{color:var(--tac);font-weight:900;}
.ms-ta__bar.is-on .ms-ta__bt{box-shadow:0 0 0 2px color-mix(in srgb,var(--bc) 40%,#fff);}
.ms-ta__cta{display:block;text-align:center;background:linear-gradient(135deg,var(--taa),var(--tac));color:#fff;font-size:13.5px;font-weight:900;line-height:1.6;padding:14px 16px;border-radius:999px;text-decoration:none;box-shadow:0 4px 14px rgba(80,40,160,.18);}
@media (max-width:420px){
	.ms-ta__top{gap:12px;}
	.ms-ta__img{width:88px;height:88px;flex:0 0 88px;}
	.ms-ta__name{font-size:17px;}
	.ms-ta__stat b{font-size:20px;}
	.ms-ta__bar{grid-template-columns:66px 1fr 36px;gap:6px;}
	.ms-ta__cta{font-size:12.5px;}
}


/* ==========================================================================
   恐れ回避型（MBTI×愛着）記事の図解パーツ
   長文が続くので、要所に図を置いて読み進められるようにする
   ========================================================================== */

/* ── 2軸マップ：不安 × 回避 の4象限 ── */
.osk-map{max-width:520px;margin:26px auto 30px;}
.osk-map__grid{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:26px 0 26px 26px;}
.osk-map__cell{position:relative;border-radius:14px;padding:14px 12px;min-height:96px;display:flex;flex-direction:column;justify-content:center;gap:4px;border:2px solid;}
.osk-map__cell b{font-size:14.5px;font-weight:900;line-height:1.4;}
.osk-map__cell span{font-size:11.5px;line-height:1.6;color:#5f5470;}
.osk-map__cell--s{background:#fff8ea;border-color:#F2A93B;}
.osk-map__cell--s b{color:#c9962f;}
.osk-map__cell--a{background:#fdeef4;border-color:#E8698B;}
.osk-map__cell--a b{color:#c2456f;}
.osk-map__cell--v{background:#eaf7f4;border-color:#5BBBAC;}
.osk-map__cell--v b{color:#2f6f66;}
.osk-map__cell--f{background:#f1ecfa;border-color:#8E7CC3;box-shadow:0 0 0 3px rgba(142,124,195,.22);}
.osk-map__cell--f b{color:#5f4a94;}
.osk-map__cell--f::after{content:"あなた";position:absolute;top:-11px;right:8px;background:#8E7CC3;color:#fff;font-size:10px;font-weight:900;padding:3px 9px;border-radius:999px;}
.osk-map__yl,.osk-map__xl{position:absolute;font-size:11px;font-weight:800;color:#7a6a94;letter-spacing:.04em;}
.osk-map__yl{left:1px;top:50%;writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg);white-space:nowrap;line-height:1;}
.osk-map__xl{bottom:2px;left:50%;transform:translateX(-50%);white-space:nowrap;}
.tp-article__body .osk-map__cap{margin:0;font-size:11.5px;line-height:1.7;color:#8b7fa0;text-align:center;}

/* ── 4段階のサイクル図 ── */
.osk-cyc{max-width:560px;margin:26px auto 30px;display:flex;flex-direction:column;gap:0;}
.osk-cyc__step{position:relative;display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:start;padding:0 0 20px;}
.osk-cyc__step:last-child{padding-bottom:0;}
.osk-cyc__step::before{content:"";position:absolute;left:21px;top:40px;bottom:0;width:2px;background:linear-gradient(180deg,#d3bfef,#efe7fb);}
.osk-cyc__step:last-child::before{display:none;}
.osk-cyc__n{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:17px;font-weight:900;color:#fff;background:linear-gradient(135deg,#8E7CC3,#5f4a94);box-shadow:0 3px 10px rgba(95,74,148,.3);}
.osk-cyc__b{background:#fff;border:1.5px solid #e6dcf7;border-radius:14px;padding:13px 15px;}
.tp-article__body .osk-cyc__t{margin:0 0 5px;font-size:14.5px;font-weight:900;color:#3a2f52;line-height:1.5;}
.tp-article__body .osk-cyc__d{margin:0;font-size:12.8px;line-height:1.85;color:#5f5470;}
.osk-cyc__seen{display:block;margin-top:8px;padding-top:8px;border-top:1px dashed #e0d4f3;font-size:12px;line-height:1.7;color:#c2456f;}
.osk-cyc__seen b{color:#c2456f;}

/* ── 心理機能カード ── */
.osk-fn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:22px 0 26px;}
.osk-fn__c{border:1.5px solid #e6dcf7;border-radius:14px;padding:13px 13px 14px;background:#fff;min-width:0;}
.osk-fn__c--main{background:linear-gradient(160deg,#f6f1fc,#fff);border-color:#c9a9f5;}
.osk-fn__k{display:inline-block;font-size:16px;font-weight:900;color:#5f4a94;letter-spacing:.04em;}
.tp-article__body .osk-fn__r{display:block;font-size:10.5px;font-weight:800;color:#a093b5;margin:2px 0 6px;}
.tp-article__body .osk-fn__d{margin:0;font-size:12.3px;line-height:1.8;color:#5f5470;}

/* ── 週次タイムライン ── */
.osk-wk{margin:24px 0 28px;display:flex;flex-direction:column;gap:10px;}
.osk-wk__row{display:grid;grid-template-columns:78px 1fr;gap:12px;align-items:stretch;}
.osk-wk__lab{display:grid;place-items:center;text-align:center;background:linear-gradient(160deg,#8E7CC3,#5f4a94);color:#fff;border-radius:12px;font-size:12.5px;font-weight:900;line-height:1.4;padding:8px 4px;}
.osk-wk__b{background:#faf7ff;border:1.5px solid #e6dcf7;border-radius:12px;padding:12px 14px;min-width:0;}
.tp-article__body .osk-wk__t{margin:0 0 4px;font-size:14px;font-weight:900;color:#3a2f52;}
.tp-article__body .osk-wk__d{margin:0;font-size:12.6px;line-height:1.85;color:#5f5470;}

/* ── チェックリスト ── */
.osk-chk{margin:20px 0 24px;background:#fff;border:2px solid #d3bfef;border-radius:16px;padding:18px 16px;}
.osk-chk__g{margin:0 0 16px;}
.osk-chk__g:last-child{margin-bottom:0;}
.tp-article__body .osk-chk__h{margin:0 0 9px;font-size:13px;font-weight:900;color:#5f4a94;padding-left:10px;border-left:4px solid #8E7CC3;line-height:1.4;}
.osk-chk__l{list-style:none;margin:0;padding:0;}
.osk-chk__l li{position:relative;padding:6px 0 6px 27px;font-size:13px;line-height:1.8;color:#463c52;border-bottom:1px dashed #efe7fb;}
.osk-chk__l li:last-child{border-bottom:none;}
.osk-chk__l li::before{content:"";position:absolute;left:2px;top:11px;width:15px;height:15px;border:2px solid #c9a9f5;border-radius:4px;background:#fff;}

@media (max-width:420px){
	.osk-fn{grid-template-columns:1fr;}
	.osk-map__grid{padding:22px 0 22px 22px;}
	.osk-map__cell{min-height:88px;padding:12px 10px;}
	.osk-wk__row{grid-template-columns:64px 1fr;gap:9px;}
	.osk-wk__lab{font-size:11.5px;}
}


/* ===== 回避型と体の関係：判定表と段階図（/kaihi-karada-kankei/） ===== */
.tp-article__body .kkk-hantei{
	margin:16px 0 20px;background:#fff;border:2px solid #ece3f8;border-radius:16px;padding:14px 14px 12px;
}
.tp-article__body .kkk-hantei__h{
	font-size:14px;font-weight:900;color:#6b3fa0;margin:0 0 10px;
}
/* 表は横に長いので、狭い画面では枠の中だけを横スクロールさせる */
.tp-article__body .kkk-hantei__t{
	width:100%;border-collapse:separate;border-spacing:0 6px;font-size:12.5px;
}
.tp-article__body .kkk-hantei__t thead th{
	font-size:11.5px;font-weight:900;color:#8b7f9d;text-align:left;padding:4px 8px;white-space:nowrap;
}
.tp-article__body .kkk-hantei__t thead th.is-x{color:#b8536f;}
.tp-article__body .kkk-hantei__t thead th.is-o{color:#2f7f6a;}
.tp-article__body .kkk-hantei__t tbody th{
	font-size:12.5px;font-weight:900;color:#4a2f7a;text-align:left;padding:8px;white-space:nowrap;
	background:#faf7ff;border-radius:8px 0 0 8px;
}
.tp-article__body .kkk-hantei__t tbody td{padding:8px;line-height:1.7;color:#3c3155;vertical-align:top;}
.tp-article__body .kkk-hantei__t tbody td:nth-of-type(1){background:#fdeef4;}
.tp-article__body .kkk-hantei__t tbody td:nth-of-type(2){background:#eaf7f4;border-radius:0 8px 8px 0;}
.tp-article__body .kkk-hantei__note{
	font-size:12px;color:#8b7f9d;line-height:1.85;margin:10px 0 0;
}

.tp-article__body .kkk-steps{margin:16px 0 20px;}
.tp-article__body .kkk-steps__item{
	display:grid;grid-template-columns:34px 1fr;grid-template-rows:auto auto;gap:2px 10px;
	background:#fff;border:2px solid #ece3f8;border-radius:14px;padding:12px 14px;
}
.tp-article__body .kkk-steps__no{
	grid-row:1 / span 2;align-self:start;
	display:flex;align-items:center;justify-content:center;
	width:34px;height:34px;border-radius:50%;background:#8b6cc1;color:#fff;
	font-size:15px;font-weight:900;
}
.tp-article__body .kkk-steps__item b{font-size:15px;font-weight:900;color:#4a2f7a;}
.tp-article__body .kkk-steps__item span:not(.kkk-steps__no){font-size:12.5px;color:#3c3155;line-height:1.8;}
.tp-article__body .kkk-steps__arrow{text-align:center;color:#c4b5e0;font-size:14px;margin:4px 0;}

/* 狭い画面では横スクロールにせず、1項目ずつ縦に積む
   （横スクロールだと「本命に近い」列に気づかれない） */
@media (max-width:600px){
	.tp-article__body .kkk-hantei__t thead{display:none;}
	.tp-article__body .kkk-hantei__t,
	.tp-article__body .kkk-hantei__t tbody,
	.tp-article__body .kkk-hantei__t tr,
	.tp-article__body .kkk-hantei__t tbody th,
	.tp-article__body .kkk-hantei__t tbody td{display:block;width:auto;}
	.tp-article__body .kkk-hantei__t tr{
		background:#fff;border:1.5px solid #ece3f8;border-radius:12px;padding:9px 10px;margin:0 0 9px;
	}
	.tp-article__body .kkk-hantei__t tbody th{
		background:none;border-radius:0;padding:0 0 7px;font-size:13px;white-space:normal;
	}
	.tp-article__body .kkk-hantei__t tbody td{
		border-radius:8px;margin:0 0 5px;padding:7px 9px 7px 52px;position:relative;font-size:12.5px;
	}
	.tp-article__body .kkk-hantei__t tbody td:nth-of-type(2){border-radius:8px;}
	.tp-article__body .kkk-hantei__t tbody td::before{
		position:absolute;left:9px;top:7px;font-size:10.5px;font-weight:900;
	}
	.tp-article__body .kkk-hantei__t tbody td:nth-of-type(1)::before{content:"都合";color:#b8536f;}
	.tp-article__body .kkk-hantei__t tbody td:nth-of-type(2)::before{content:"本命";color:#2f7f6a;}
}


/* ===== 作品ページの愛着スタイル分布グラフ ===== */
.tp-article__body .cw-bar{
	display:flex;width:100%;height:30px;border-radius:999px;overflow:hidden;
	margin:0 0 12px;background:#f3ecfb;
}
.tp-article__body .cw-bar__seg{
	display:flex;align-items:center;justify-content:center;
	font-size:11px;font-weight:900;color:#fff;letter-spacing:.02em;
	text-shadow:0 1px 2px rgba(0,0,0,.18);
	min-width:0;
}
.tp-article__body .cw-dist__count{display:flex;align-items:baseline;gap:5px;}
.tp-article__body .cw-dist__count small{font-size:12px;font-weight:800;color:#8a7aa0;}
.tp-article__body .cw-dist__gauge{
	display:block;width:100%;height:6px;border-radius:999px;background:#f1ecfa;overflow:hidden;
}
.tp-article__body .cw-dist__gauge i{display:block;height:100%;border-radius:999px;}
.tp-article__body .cw-dist__dif{
	font-size:10.5px;font-weight:800;color:#8a7aa0;letter-spacing:0;
}
.tp-article__body .cw-dist__dif[data-up="1"]{color:#b8536f;}
.tp-article__body .cw-dist__base{
	font-size:11.5px;line-height:1.85;color:#8a7aa0;margin:10px 0 0;
}


/* ===== 突き放しの4段階（/tsukihanasu/） ===== */
.tp-article__body .tsk-phase{margin:16px 0 18px;display:grid;gap:10px;}
.tp-article__body .tsk-phase__item{
	background:#fff;border:2px solid #ece3f8;border-radius:14px;padding:13px 15px;
	border-left-width:6px;
}
.tp-article__body .tsk-phase__item[data-p="1"]{border-left-color:#5BBBAC;}
.tp-article__body .tsk-phase__item[data-p="2"]{border-left-color:#F2A93B;}
.tp-article__body .tsk-phase__item[data-p="3"]{border-left-color:#E8698B;}
.tp-article__body .tsk-phase__item[data-p="4"]{border-left-color:#8E7CC3;}
.tp-article__body .tsk-phase__no{
	display:inline-block;font-size:10.5px;font-weight:900;letter-spacing:.06em;
	color:#6b3fa0;background:#f3ecfb;border-radius:999px;padding:3px 10px;margin:0 0 6px;
}
.tp-article__body .tsk-phase__item b{display:block;font-size:15px;font-weight:900;color:#3a2a55;margin:0 0 6px;}
.tp-article__body .tsk-phase__item p{font-size:13px;line-height:1.95;color:#3c3155;margin:0;}


/* ===== MBTI群別の突き放し方（/tsukihanasu/） ===== */
.tp-article__body .tsk-mbti{margin:16px 0 18px;display:grid;gap:10px;}
.tp-article__body .tsk-mbti__item{
	background:linear-gradient(180deg,#fff,#faf7ff);
	border:2px solid #ece3f8;border-radius:14px;padding:13px 15px;
}
.tp-article__body .tsk-mbti__g{
	display:inline-block;font-size:10.5px;font-weight:900;letter-spacing:.02em;
	color:#fff;background:#8b6cc1;border-radius:999px;padding:3px 11px;margin:0 0 7px;
}
.tp-article__body .tsk-mbti__item b{display:block;font-size:15px;font-weight:900;color:#3a2a55;margin:0 0 6px;}
.tp-article__body .tsk-mbti__item p{font-size:13px;line-height:1.95;color:#3c3155;margin:0;}


/* ===== キャラページの分析メモ（判定手順・情報源・確認日） ===== */
.cdmeta{margin:22px auto 8px;max-width:760px;}
.cdmeta__box{
	background:#faf8fd;border:1.5px solid #e8e0f4;border-radius:16px;
	padding:16px 18px;font-size:12.5px;line-height:1.9;color:#5a4e6d;
}
.cdmeta__head{
	display:flex;align-items:center;justify-content:space-between;gap:10px;
	cursor:pointer;list-style:none;font-size:13.5px;color:#4a3560;
}
.cdmeta__head::-webkit-details-marker{display:none;}
.cdmeta__head::after{content:"開く ▾";font-size:11px;font-weight:800;color:#8b7fa0;white-space:nowrap;}
.cdmeta__box[open] .cdmeta__head::after{content:"閉じる ▴";}
.cdmeta__box[open] .cdmeta__head{margin-bottom:12px;}
.cdmeta__lead{margin:0 0 10px;}
.cdmeta__steps{margin:0 0 12px;padding-left:20px;}
.cdmeta__steps li{margin:0 0 7px;}
.cdmeta__row{margin:0 0 10px;}
.cdmeta__refs{margin:0 0 10px;}
.cdmeta__refs summary{cursor:pointer;font-weight:800;color:#6b5a86;}
.cdmeta__refs ul{margin:8px 0 8px;padding-left:18px;}
.cdmeta__refs li{margin:0 0 4px;font-size:12px;}
.cdmeta__note{font-size:12px;color:#8b7fa0;margin:0;}
.cdmeta__date{font-weight:800;color:#4a3560;}
.cdmeta__caution{background:#fff6f2;border:1px solid #f5d9c8;border-radius:10px;padding:10px 12px;margin:0;}


/* ===== キャラページ：診断データとの照合（当サイト固有の情報） ===== */
.cwdata__row{
	background:#fff;border:2px solid #ece3f8;border-radius:16px;padding:14px 15px;margin:0 0 10px;
}
.cwdata__h{font-size:13.5px;font-weight:800;color:#4a3560;margin:0 0 9px;line-height:1.8;}
.cwdata__h b{font-size:19px;font-weight:900;color:#6b3fa0;margin:0 3px;}
.cwdata__gauge{height:12px;border-radius:999px;background:#f3ecfb;overflow:hidden;margin:0 0 9px;}
.cwdata__gauge i{display:block;height:100%;border-radius:999px;}
.cwdata__bar{display:flex;height:26px;border-radius:999px;overflow:hidden;background:#f3ecfb;margin:0 0 9px;}
.cwdata__bar span{
	display:flex;align-items:center;justify-content:center;min-width:0;
	font-size:10.5px;font-weight:900;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.2);
}
.cwdata__legend{display:grid;grid-template-columns:1fr 1fr;gap:5px 10px;margin:0 0 9px;padding:0;list-style:none;}
.cwdata__legend li{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#4a3560;}
.cwdata__legend i{width:10px;height:10px;border-radius:3px;flex-shrink:0;}
.cwdata__legend b{margin-left:auto;font-weight:900;color:#3a2a55;}
.cwdata__note{font-size:12.5px;line-height:1.9;color:#5b4a75;margin:0;}
.cwdata__note strong{color:#6b3fa0;}
.cwdata__src{font-size:11.5px;line-height:1.8;color:#8b7f9d;margin:8px 0 0;}
@media (min-width:600px){ .cwdata__legend{grid-template-columns:repeat(4,1fr);} }

/* =========================================================================
   作品別ページ: キャラ一覧のギャラリー化（2026-07-31）
   これまで作品ページは全155本が画像ゼロで、テキストとレーダーだけだった。
   64タイプ画像（type-thumbs・約24KB/枚）を使うので新規素材は要らない。
   ========================================================================= */
.cw-gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:12px 0 0;}
@media(min-width:560px){.cw-gal{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media(min-width:820px){.cw-gal{grid-template-columns:repeat(5,minmax(0,1fr));}}
.cw-gal__item{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;
	background:#fff;border:1.5px solid #ece5ff;border-top:4px solid var(--cwsv,#8E7CC3);border-radius:14px;
	padding:9px 6px 8px;text-decoration:none;transition:transform .18s,box-shadow .18s,border-color .18s;}
.cw-gal__item:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(80,40,120,.13);border-color:var(--cwsv,#c9a9f5);}
.cw-gal__item[data-sv="S"]{--cwsv:#F2A93B;}
.cw-gal__item[data-sv="A"]{--cwsv:#E8698B;}
.cw-gal__item[data-sv="V"]{--cwsv:#5BBBAC;}
.cw-gal__item[data-sv="F"]{--cwsv:#8E7CC3;}
.cw-gal__thumb{display:block;width:100%;max-width:78px;aspect-ratio:1/1;border-radius:50%;overflow:hidden;
	background:linear-gradient(160deg,#fbf7ff,#f2ebff);box-shadow:0 0 0 2px var(--cwsv,#e5dbff) inset;}
.cw-gal__thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.cw-gal__thumb--emoji{display:flex;align-items:center;justify-content:center;font-size:30px;}
.cw-gal__name{font-size:11.5px;font-weight:900;color:#2a1850;text-align:center;line-height:1.35;
	word-break:break-word;margin-top:3px;}
.cw-gal__type{font-size:10px;font-weight:800;color:#6b4aa8;letter-spacing:.04em;}
.cw-gal__sv{font-size:9.5px;font-weight:800;color:#fff;background:var(--cwsv,#8E7CC3);border-radius:999px;padding:1px 7px;}

/* キャラ節のアイキャッチ（本文の左に回り込ませる） */
.cw-figure{float:right;width:96px;margin:0 0 10px 12px;text-align:center;}
.cw-figure img{width:96px;height:96px;object-fit:cover;border-radius:50%;display:block;
	box-shadow:0 0 0 3px var(--cwfsv,#e5dbff),0 4px 12px rgba(80,40,120,.12);}
.cw-figure figcaption{font-size:9.5px;font-weight:800;color:#8a7aa0;margin-top:5px;letter-spacing:.04em;}
.cw-figure[data-sv="S"]{--cwfsv:#F2A93B;}
.cw-figure[data-sv="A"]{--cwfsv:#E8698B;}
.cw-figure[data-sv="V"]{--cwfsv:#5BBBAC;}
.cw-figure[data-sv="F"]{--cwfsv:#8E7CC3;}
.cw-char::after{content:"";display:block;clear:both;}
@media(max-width:360px){.cw-figure{width:78px;margin-left:9px;}.cw-figure img{width:78px;height:78px;}}

/* 作品一覧ハブ: カードの愛着分布バー・ランキングの代表キャラ画像（2026-07-31） */
.sk-card__bar{display:flex;width:100%;max-width:120px;height:6px;border-radius:999px;overflow:hidden;
	background:#f1ecfb;margin-top:6px;}
.sk-card__bar i{display:block;height:100%;}
.sk-card__top{font-size:9.5px;font-weight:800;color:#8a7aa0;margin-top:3px;letter-spacing:.02em;}
.sk-card__top b{font-weight:900;}
.skr-thumb{flex-shrink:0;width:38px;height:38px;border-radius:50%;overflow:hidden;
	background:linear-gradient(160deg,#fbf7ff,#f2ebff);box-shadow:0 0 0 2px var(--skrsv,#e5dbff);}
.skr-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.skr-thumb[data-sv="S"]{--skrsv:#F2A93B;}
.skr-thumb[data-sv="A"]{--skrsv:#E8698B;}
.skr-thumb[data-sv="V"]{--skrsv:#5BBBAC;}
.skr-thumb[data-sv="F"]{--skrsv:#8E7CC3;}

/* 関係性コラム: 5因子比較と認知機能（2026-07-31） */
.ms-kpair__h3{font-size:15px;font-weight:900;color:#2a1850;margin:22px 0 10px;padding-left:10px;
	border-left:4px solid #8E7CC3;}
.ms-kpair__facets{display:grid;gap:10px;}
.ms-kpair__facet{background:#fff;border:1.5px solid #efe8fb;border-radius:14px;padding:11px 12px 9px;}
.ms-kpair__facet.is-gap{border-color:#e0c8ff;background:linear-gradient(180deg,#fff,#faf5ff);
	box-shadow:0 4px 14px rgba(107,63,160,.09);}
.ms-kpair__fh{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;font-size:12.5px;font-weight:900;
	color:#3a2a55;margin:0 0 7px;}
.ms-kpair__fh small{font-size:10.5px;font-weight:700;color:#8a7aa0;}
.ms-kpair__fdiff{margin-left:auto;font-size:10px;font-weight:900;color:#6b4aa8;background:#f3ecff;
	border-radius:999px;padding:2px 9px;}
.ms-kpair__gap{font-size:13px;line-height:1.95;color:#3c3155;background:#faf6ff;border:1.5px dashed #ddcbf5;
	border-radius:14px;padding:12px 14px;margin:12px 0 0;}
.ms-kpair__gap b{color:#6b3fa0;}
.ms-kpair__cog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
.ms-kpair__cogcol{background:#fff;border:1.5px solid #efe8fb;border-top:4px solid var(--kc,#8E7CC3);
	border-radius:14px;padding:10px 10px 11px;min-width:0;}
.ms-kpair__cogname{font-size:12.5px;font-weight:900;color:#2a1850;margin:0 0 8px;line-height:1.4;}
.ms-kpair__cogname small{display:block;font-size:10px;font-weight:800;color:var(--kc,#8E7CC3);letter-spacing:.06em;}
.ms-kpair__cogchip{display:block;font-size:11px;font-weight:800;color:#3c3155;background:#f7f3ff;
	border-radius:9px;padding:5px 8px;margin-bottom:5px;}
.ms-kpair__cogchip b{display:inline-block;font-size:9.5px;color:#8a7aa0;margin-right:5px;}
.ms-kpair__cogchip small{display:block;font-size:9.5px;font-weight:700;color:#8a7aa0;}
.ms-kpair__cognote{font-size:13px;line-height:1.95;color:#3c3155;margin:10px 0 0;}
.ms-kpair__cognote b{color:#6b3fa0;}

/* 愛着タイプ別キャラ一覧の顔ぶれギャラリー（2026-07-31） */
.ms-svgal{max-width:720px;margin:34px auto;padding:22px 16px 24px;background:linear-gradient(180deg,#fff,#fdfbff);
	border:2px solid #efe8fb;border-top:5px solid var(--sgc,#8E7CC3);border-radius:20px;}
.ms-svgal__h{font-size:17px;font-weight:900;color:#2a1850;margin:0 0 8px;}
.ms-svgal__h3{font-size:15px;font-weight:900;color:#2a1850;margin:22px 0 10px;padding-left:10px;border-left:4px solid var(--sgc,#8E7CC3);}
.ms-svgal__lead{font-size:13px;line-height:1.95;color:#5b4f72;margin:0 0 14px;}
.ms-svgal__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;}
@media(min-width:560px){.ms-svgal__grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
.ms-svgal__item{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;text-decoration:none;
	background:#fff;border:1.5px solid #ece5ff;border-radius:14px;padding:9px 6px 8px;transition:transform .18s,box-shadow .18s;}
.ms-svgal__item:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(80,40,120,.13);}
.ms-svgal__thumb{width:100%;max-width:76px;aspect-ratio:1/1;border-radius:50%;overflow:hidden;
	background:linear-gradient(160deg,#fbf7ff,#f2ebff);box-shadow:0 0 0 2px var(--sgc,#e5dbff) inset;}
.ms-svgal__thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.ms-svgal__name{font-size:11.5px;font-weight:900;color:#2a1850;text-align:center;line-height:1.35;margin-top:3px;word-break:break-word;}
.ms-svgal__mbti{font-size:10px;font-weight:800;color:var(--sgi,#6b4aa8);letter-spacing:.04em;}
.ms-svgal__work{font-size:9.5px;font-weight:700;color:#9c8fb5;text-align:center;line-height:1.3;}
.ms-svgal__bars{display:grid;gap:7px;}
.ms-svgal__bar{display:flex;align-items:center;gap:8px;}
.ms-svgal__bl{flex:0 0 52px;font-size:11.5px;font-weight:900;color:var(--sgi,#6b4aa8);text-decoration:none;}
.ms-svgal__bt{flex:1 1 auto;height:11px;background:#f1ecfb;border-radius:999px;overflow:hidden;}
.ms-svgal__bf{display:block;height:100%;background:var(--sgc,#8E7CC3);border-radius:999px;}
.ms-svgal__bv{flex:0 0 40px;font-size:11px;font-weight:800;color:#8a7aa0;text-align:right;}
.ms-svgal__note{font-size:12.5px;line-height:1.9;color:#5b4f72;margin:12px 0 0;}

/* 相性ハブ・相性診断の視覚ブロック（2026-07-31） */
.ms-ahub{max-width:720px;margin:34px auto;padding:22px 16px 24px;background:linear-gradient(180deg,#fff,#fdfbff);
	border:2px solid #efe8fb;border-top:5px solid #d65c9a;border-radius:20px;}
.ms-ahub--sv{border-top-color:#8E7CC3;}
.ms-ahub__h{font-size:17px;font-weight:900;color:#2a1850;margin:0 0 8px;}
.ms-ahub__lead{font-size:13px;line-height:1.95;color:#5b4f72;margin:0 0 14px;}
.ms-ahub__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}
.ms-ahub__item{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;text-decoration:none;
	background:#fff;border:1.5px solid #ece5ff;border-radius:13px;padding:8px 4px 7px;transition:transform .18s,box-shadow .18s;}
.ms-ahub__item:hover{transform:translateY(-2px);box-shadow:0 6px 14px rgba(80,40,120,.12);}
.ms-ahub__thumb{width:100%;max-width:60px;aspect-ratio:1/1;border-radius:50%;overflow:hidden;background:#f6f1ff;}
.ms-ahub__thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.ms-ahub__code{font-size:11px;font-weight:900;color:#6b4aa8;letter-spacing:.03em;margin-top:3px;}
.ms-ahub__jp{font-size:9px;font-weight:700;color:#9c8fb5;text-align:center;line-height:1.25;}
.ms-ahub__matrix{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;}
.ms-ahub__cell{background:#fff;border:1.5px solid #ece5ff;border-radius:14px;padding:11px 12px;min-width:0;
	border-left:5px solid var(--c1,#8E7CC3);}
.ms-ahub__cell.is-hot{background:linear-gradient(180deg,#fff,#fff4f9);border-color:#f0c8dd;box-shadow:0 4px 14px rgba(214,92,154,.12);}
.ms-ahub__pair{font-size:11px;font-weight:900;margin:0 0 4px;color:#5b4f72;}
.ms-ahub__title{font-size:13.5px;font-weight:900;color:#2a1850;margin:0 0 4px;}
.ms-ahub__desc{font-size:11.5px;line-height:1.8;color:#6d5f88;margin:0;}
.ms-ahub__note{font-size:12.5px;line-height:1.9;color:#5b4f72;margin:12px 0 0;}
@media(max-width:360px){.ms-ahub__grid{grid-template-columns:repeat(3,minmax(0,1fr));}.ms-ahub__matrix{grid-template-columns:1fr;}}

/* 診断ツールページの「わかること」ブロック（2026-07-31） */
.ms-tool{max-width:720px;margin:34px auto;padding:22px 16px 24px;background:linear-gradient(180deg,#fff,#fbf8ff);
	border:2px solid #efe8fb;border-top:5px solid #6b4aa8;border-radius:20px;}
.ms-tool__h{font-size:17px;font-weight:900;color:#2a1850;margin:0 0 14px;}
.ms-tool__specs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin:0 0 16px;}
.ms-tool__spec{background:#fff;border:1.5px solid #ece5ff;border-radius:12px;padding:9px 4px;text-align:center;min-width:0;}
.ms-tool__sl{display:block;font-size:9.5px;font-weight:800;color:#9c8fb5;letter-spacing:.04em;}
.ms-tool__sv{display:block;font-size:13px;font-weight:900;color:#4d2f91;margin-top:2px;line-height:1.3;}
.ms-tool__list{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px;}
.ms-tool__list li{position:relative;font-size:13.5px;line-height:1.85;color:#2f2545;background:#fff;
	border:1.5px solid #ece5ff;border-left:4px solid #8E7CC3;border-radius:12px;padding:10px 12px 10px 32px;}
.ms-tool__list li::before{content:"◎";position:absolute;left:11px;top:10px;color:#8E7CC3;font-weight:900;font-size:12px;}
.ms-tool__target{font-size:13px;line-height:1.9;color:#3c3155;background:#f6f1fc;border:1.5px dashed #ddcbf5;
	border-radius:12px;padding:11px 13px;margin:0 0 10px;}
.ms-tool__target b{display:block;font-size:11px;font-weight:900;color:#6b3fa0;letter-spacing:.06em;margin-bottom:3px;}
.ms-tool__note{font-size:12px;line-height:1.9;color:#7d708f;margin:0;}
@media(max-width:360px){.ms-tool__specs{grid-template-columns:repeat(2,minmax(0,1fr));}}

/* 2026-08-10: 診断を3つ横並びにすると選べず、実測でも1.9〜8.3%と低かった。
   文脈に一番合う1つだけを大きく見せ、残りは細い行にする。 */
.tp-shindan-cta__pick{display:flex;align-items:center;gap:12px;background:linear-gradient(135deg,#fff6fb,#f6efff);border:2px solid #e6cdf5;border-radius:16px;padding:15px;margin:0 0 10px;text-decoration:none;}
.tp-shindan-cta__pick-emoji{flex:none;font-size:26px;line-height:1;}
.tp-shindan-cta__pick-body{flex:1;min-width:0;}
.tp-shindan-cta__pick-name{display:block;font-size:15px;font-weight:900;color:#2a1850;line-height:1.55;}
.tp-shindan-cta__pick-desc{display:block;font-size:11.5px;color:#6b5f7d;line-height:1.7;margin-top:3px;}
.tp-shindan-cta__pick-go{flex:none;font-size:12px;font-weight:900;color:#fff;background:linear-gradient(135deg,#8a5cf0,#c86bd6);border-radius:999px;padding:9px 14px;white-space:nowrap;}
.tp-shindan-cta__rows{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;}
.tp-shindan-cta__row{font-size:12px;color:#5b4d70;background:#fff;border:1px solid #ece0f8;border-radius:999px;padding:8px 13px;text-decoration:none;}
.tp-shindan-cta__pick-art{flex:none;width:56px;height:56px;border-radius:14px;}

/* 章扉写真 */
.tp-photo{margin:0 0 22px;border-radius:14px;overflow:hidden;background:#efe9fb;
	box-shadow:0 6px 22px rgba(60,30,110,.13);}
.tp-photo img{display:block;width:100%;height:auto;}
@media(max-width:430px){.tp-photo{margin:0 0 16px;border-radius:11px;}}

/* ===== 解説記事用の部品（2026-08-13） ===== */
.tp-callout{margin:22px 0;padding:20px 22px;border-radius:14px;background:#f7f4fc;border:1px solid #e4dcf2;border-left:5px solid #a369ff}
.tp-callout p{margin:0 0 10px;font-size:14.5px;line-height:2}
.tp-callout p:last-child{margin-bottom:0}
.tp-callout ul{margin:0 0 10px;padding-left:1.3em}
.tp-callout li{font-size:14px;line-height:1.95;margin:0 0 5px}
.tp-callout--warn{background:#fdf6f2;border-color:#f0dcc9;border-left-color:#e07a2f}
.tp-note{font-size:12px;line-height:1.85;color:#7d7288}

.tp-table-wrap{overflow-x:auto;margin:20px 0;-webkit-overflow-scrolling:touch}
.tp-table{width:100%;min-width:520px;border-collapse:collapse;font-size:13.5px}
.tp-table th,.tp-table td{border:1px solid #e6ddf0;padding:11px 13px;text-align:left;line-height:1.8;vertical-align:top}
.tp-table th{background:#f4effb;font-weight:900;color:#3f3349;white-space:nowrap}
.tp-table td{background:#fff;color:#544a63}

.tp-steps{display:grid;gap:11px;margin:20px 0}
.tp-steps .tp-step{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;background:#fff;border:1px solid #ece4f4;border-radius:14px;padding:17px 19px}
.tp-steps .tp-step>span{width:30px;height:30px;border-radius:50%;background:#a369ff;color:#fff;display:grid;place-items:center;font-weight:900;font-size:14px;flex:none}
.tp-steps .tp-step b{display:block;font-size:15px;margin-bottom:6px;color:#3f3349}
.tp-steps .tp-step p{margin:0;font-size:13.5px;line-height:1.95;color:#5b5065}

.tp-list{margin:16px 0;padding-left:1.3em}
.tp-list li{font-size:14.5px;line-height:2;margin:0 0 8px}

.tp-faq details{border-top:1px solid #eae2f2;padding:17px 2px}
.tp-faq details:last-child{border-bottom:1px solid #eae2f2}
.tp-faq summary{font-size:15px;font-weight:800;cursor:pointer;line-height:1.6;color:#3f3349}
.tp-faq p{margin:11px 0 0;font-size:14px;line-height:2;color:#544a63}
@media(max-width:520px){.tp-table{min-width:460px;font-size:12.5px}.tp-table th,.tp-table td{padding:9px 10px}}


/* ──────────────────────────────────────────────────────────
   2026-08-17 追加：図・表・出典・課金ティーザー
   既存のトピック記事は図表がゼロで、tp-box も10箇所で使われながら
   スタイルが当たっていなかった。ここでまとめて定義する。
   ────────────────────────────────────────────────────────── */

.tp-article__body .tp-box{
	background:#faf6ff;border:1px solid #e3d5f7;border-left:5px solid #8b6cc1;
	border-radius:10px;padding:16px 18px;margin:22px 0}
.tp-article__body .tp-box p{margin:0 0 8px}
.tp-article__body .tp-box p:last-child{margin-bottom:0}
.tp-article__body .tp-box--warn{background:#fff7f4;border-color:#f0d2c6;border-left-color:#d9714b}

/* 図（SVG）。既存記事に無かった要素なので、余白と枠を明示する */
.tp-article__body .tp-figure{
	margin:26px 0;padding:14px 12px 10px;background:#fff;
	border:1px solid #e9e1f4;border-radius:12px;overflow-x:auto}
.tp-article__body .tp-figure svg{display:block;width:100%;height:auto;min-width:320px}
.tp-article__body .tp-figure__cap{
	margin:10px 2px 0;font-size:.78rem;line-height:1.7;color:#8c839b;text-align:center}

/* 関連リンクの一覧 */
.tp-article__body .tp-links{list-style:none;margin:16px 0;padding:0;display:grid;gap:8px}
.tp-article__body .tp-links li{margin:0}
.tp-article__body .tp-links a{
	display:block;background:#fff;border:1px solid #e9e1f4;border-radius:10px;
	padding:12px 14px;font-size:.88rem;font-weight:700;color:#6b3fa0;text-decoration:none;line-height:1.6}
.tp-article__body .tp-links a::after{content:' →';color:#b9a8d6}
.tp-article__body .tp-links a:hover{background:#faf6ff;border-color:#d9c8f0}

/* 出典・執筆者 */
.tp-article__body .tp-meta-block{
	background:#fbfafd;border:1px solid #eae5f2;border-radius:12px;padding:18px 18px 14px;margin-top:30px}
.tp-article__body .tp-meta-dl{margin:0}
.tp-article__body .tp-meta-dl dt{
	font-size:.78rem;font-weight:800;color:#6b3fa0;margin-top:12px;letter-spacing:.04em}
.tp-article__body .tp-meta-dl dt:first-child{margin-top:0}
.tp-article__body .tp-meta-dl dd{margin:4px 0 0;font-size:.84rem;line-height:1.85;color:#544a63}
.tp-article__body .tp-refs{margin:8px 0 0;padding-left:1.2em;font-size:.8rem;line-height:1.9;color:#6d6280}
.tp-article__body .tp-refs li{margin:0 0 4px}
.tp-article__body .tp-refs i{font-style:italic}

/* 課金ティーザー。冒頭文 → ぼかし → 「続きを読む」だけ。価格は出さない */
.tp-article__body .tz-teaser{
	position:relative;background:#fff;border:2px dashed #d9c8f0;border-radius:14px;
	padding:20px 20px 18px;margin:28px 0}
.tp-article__body .tz-teaser__eyebrow{
	display:inline-block;background:#6b3fa0;color:#fff;font-size:.7rem;font-weight:800;
	letter-spacing:.08em;border-radius:999px;padding:4px 12px;margin:0 0 12px}
.tp-article__body .tz-teaser__lead{margin:0 0 12px;font-size:.95rem;line-height:1.9;font-weight:700;color:#3c3348}
.tp-article__body .tz-teaser__body{margin:0;font-size:.9rem;line-height:1.9;color:#544a63}
.tp-article__body .tz-teaser__blur{position:relative;max-height:76px;overflow:hidden;margin-top:6px}
.tp-article__body .tz-teaser__blur p{
	margin:0;font-size:.9rem;line-height:1.9;color:#544a63;filter:blur(3.4px);user-select:none}
.tp-article__body .tz-teaser__blur::after{
	content:'';position:absolute;left:0;right:0;bottom:0;height:56px;
	background:linear-gradient(180deg,rgba(255,255,255,0),#fff)}
.tp-article__body .tz-teaser__cta{margin:16px 0 0;text-align:center}
.tp-article__body .tz-teaser__cta a{
	display:inline-block;background:linear-gradient(135deg,#d65c9a,#8b6cc1);color:#fff;
	font-size:.92rem;font-weight:800;border-radius:999px;padding:13px 30px;text-decoration:none;
	box-shadow:0 8px 20px rgba(139,108,193,.28)}
.tp-article__body .tz-teaser__cta a:hover{opacity:.92}

/* ===== 2026-08-28: テンプレートが使っているのに定義が無かった別名を補う =====
   207ファイルのHTMLを書き換えるより、CSS側で受けるほうが安全で差分も小さい。
   ・tp-table-scroll  … /fuan-tabesugi/ だけが使用。定義が無いため表が枠外へあふれ、
     390pxでページ全体が502pxまで横スクロールしていた（実測）。4列目が読めない状態だった
   ・tp-faq__item/__q/__a … 79ファイルが使用。FAQがカードにならず素のテキストだった
   ・tp-related__grid … 127ファイルが使用。関連カードの並びと余白が効いていなかった
   いずれも既存の .tp-table-wrap / .tp-related / .tp-related__card に合わせてある。 */
.tp-table-scroll{overflow-x:auto;margin:20px 0;-webkit-overflow-scrolling:touch}
.tp-related__grid{display:grid;grid-template-columns:1fr;gap:12px;margin:20px 0}
@media(min-width:640px){.tp-related__grid{grid-template-columns:1fr 1fr}}
.tp-faq__item{background:#fff;border:1px solid #ece5ff;border-radius:12px;padding:15px 17px;margin:0 0 11px}
.tp-faq__q{font-size:15px;font-weight:800;line-height:1.65;color:#3f3349;margin:0 0 9px}
.tp-faq__a{font-size:14px;line-height:2;color:#544a63}
.tp-faq__a p{margin:0 0 8px}
.tp-faq__a p:last-child{margin-bottom:0}

/* 2026-08-28: ラッパーの無い表。4テンプレート26個が .tp-table-wrap に包まれておらず、
   min-width:520px がそのまま効いて390pxでページごと横スクロールしていた
   （/fuan-ketsudan/ /aichaku-pet/ /fuan-kaihi-sex/ /aichaku-shokuba/ で実測480〜564px）。
   包まれている表は親が .tp-table-wrap なので、この2セレクタには当たらない。 */
.tp-section > .tp-table,
.tp-box > .tp-table{display:block;overflow-x:auto;min-width:0;max-width:100%;-webkit-overflow-scrolling:touch}
/* min-width は max-width に優先するため、min-width:0 で解除しないと縮まない。 */
