/*
Theme Name: YOSOU
Description: YOSOU.NET（みんなの予想）テーマ。要 yosou-core プラグイン。
Version: 0.8.7
Text Domain: yosou
*/
:root{--bg:#f7f8fa;--navy:#2b2147;--blue:#6b52b8;--green:#16a34a;--text:#111827;--muted:#6b7280;--line:#e5e7eb;--card:#fff}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Hiragino Sans","Noto Sans JP",Meiryo,system-ui,sans-serif;line-height:1.7}
a{color:var(--blue)}img{max-width:100%;height:auto}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
.site-header{background:var(--navy);color:#fff;position:sticky;top:0;z-index:10}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;flex-wrap:wrap}
.brand{color:#fff;text-decoration:none;font-weight:800;font-size:1.15rem}.brand small{font-weight:400;opacity:.7;margin-left:6px}
.nav-toggle{display:none;background:none;border:1px solid #fff5;color:#fff;border-radius:6px;padding:6px 10px}
.main-nav ul{list-style:none;margin:0;padding:0;display:flex;gap:2px;flex-wrap:wrap}
.main-nav a{color:#e6e0f5;text-decoration:none;padding:8px 10px;display:block;font-size:.9rem;border-radius:6px}
.main-nav a:hover{background:#ffffff1a;color:#fff}
@media(max-width:820px){.nav-toggle{display:block}.main-nav{display:none;width:100%}.main-nav.open{display:block}.main-nav ul{flex-direction:column}}
.hero{background:linear-gradient(135deg,#2b2147,#4a3790);color:#fff;padding:56px 0 48px}
.hero h1{margin:0;font-size:clamp(2rem,6vw,3rem);letter-spacing:.02em}.hero .ja{opacity:.8;margin:0 0 12px}
.hero .catch{font-size:clamp(1.2rem,4vw,1.6rem);font-weight:700;margin:16px 0 8px}.hero .sub{opacity:.85;max-width:560px}
.y-btn{display:inline-block;background:var(--blue);color:#fff;border:0;border-radius:8px;padding:11px 20px;font-weight:700;text-decoration:none;cursor:pointer;font-size:1rem}
.y-btn-sub{background:#fff;color:var(--navy);border:1px solid var(--line);padding:6px 12px;font-size:.85rem;font-weight:500}
.hero .y-btn-sub{border-color:#fff;padding:11px 20px;font-size:1rem;font-weight:700}.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
section.block{padding:36px 0}section.block h2{font-size:1.35rem;margin:0 0 16px;color:var(--navy)}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;text-decoration:none;color:var(--text);display:block}
.card:hover{border-color:var(--blue)}.card h3{margin:0 0 6px;color:var(--navy)}.card p{margin:0;color:var(--muted);font-size:.9rem}
.card.big{padding:32px 20px;text-align:center;font-size:1.2rem}
.y-tablewrap{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:12px}
.y-table{width:100%;border-collapse:collapse;min-width:520px}.y-table th,.y-table td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.y-table th{background:#f0f3f8;font-size:.8rem;color:var(--muted)}.y-table img{border-radius:50%;vertical-align:middle;margin-right:6px}
.y-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px}.y-tabs a{padding:6px 14px;border-radius:99px;background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--text);font-size:.9rem}
.y-tabs a.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.y-small{font-size:.8rem;color:var(--muted)}.y-notice{background:#ecfdf5;border:1px solid #a7f3d0;padding:10px 14px;border-radius:8px;margin-bottom:12px}
.y-form label{display:block;margin-bottom:14px;font-weight:600}.y-form input,.y-form select,.y-form textarea{display:block;width:100%;max-width:520px;padding:9px;border:1px solid #cbd5e1;border-radius:8px;font:inherit;margin-top:4px}
.y-panel{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin:16px 0}
.y-badge{display:inline-block;background:#eef2ff;border-radius:99px;padding:2px 10px;font-size:.8rem}.y-hit{background:#dcfce7;color:var(--green);font-weight:700}.y-miss{background:#f3f4f6;color:var(--muted)}
.y-inline{display:inline-block;margin:4px 8px 0 0}.y-inline input{padding:5px;border:1px solid var(--line);border-radius:6px}
.content{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:22px;margin:24px 0}
.notice-rp{background:#f5f2fc;border-top:1px solid var(--line);padding:14px 0;font-size:.85rem;color:#4a3790}
.site-footer{background:var(--navy);color:#cbd5e1;padding:28px 0;font-size:.85rem;margin-top:0}.site-footer a{color:#e2e8f0}
.site-footer ul{list-style:none;padding:0;display:flex;gap:16px;flex-wrap:wrap}

/* =====================================================================
   トップページ (hp-*)  ネイビー基調。熱量は「動き」と「リアルタイム性」で出す。
   競技色: 競馬=ティール / 競輪=インディゴ / ボート=スカイ / オート=グリーン
   ===================================================================== */
:root{--hp-teal:#14b8a6;--hp-indigo:#6366f1;--hp-sky:#8b6fe0;--hp-green:#22c55e;--hp-blue:#3b82f6}
.hp-c-horse{--c:var(--hp-teal)}.hp-c-keirin{--c:var(--hp-indigo)}.hp-c-boat{--c:var(--hp-sky)}.hp-c-auto{--c:var(--hp-green)}

/* --- HERO --- */
.hp-hero{position:relative;overflow:hidden;color:#fff;background:radial-gradient(1200px 500px at 85% -10%,#5a43a6 0%,transparent 60%),radial-gradient(900px 500px at -10% 110%,#0e7490 0%,transparent 55%),linear-gradient(160deg,#071428,#2b2147 55%,#0f2a52);padding:64px 0 40px}
.hp-hero::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);mask-image:linear-gradient(180deg,#000,transparent 85%);pointer-events:none}
.hp-lanes{position:absolute;inset:0;transform:skewY(-6deg) scale(1.2);pointer-events:none;z-index:0}
.hp-lane{position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.14),transparent)}
.hp-lane i{position:absolute;top:-2px;left:-10%;width:90px;height:5px;border-radius:99px;background:linear-gradient(90deg,transparent,var(--l,#a493e0));box-shadow:0 0 8px var(--l,#a493e0);will-change:transform;animation:hpRun var(--d,7s) linear infinite;animation-delay:var(--w,0s)}
.hp-lane-1{top:18%;--l:#b7a6f0;--d:6.5s}.hp-lane-2{top:30%;--l:#2dd4bf;--d:8s;--w:-2s}.hp-lane-3{top:42%;--l:#818cf8;--d:7s;--w:-4s}
.hp-lane-4{top:54%;--l:#4ade80;--d:9s;--w:-1s}.hp-lane-5{top:66%;--l:#b7a6f0;--d:7.5s;--w:-5s}.hp-lane-6{top:78%;--l:#a78bfa;--d:6s;--w:-3s}
@keyframes hpRun{from{transform:translateX(0)}to{transform:translateX(125vw)}}
.hp-hero-in{position:relative;z-index:1}
.hp-eyebrow{display:inline-flex;align-items:center;gap:8px;margin:0 0 18px;padding:6px 14px;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);font-size:.82rem;letter-spacing:.04em;color:#d9cff2}
.hp-live{width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 0 rgba(74,222,128,.7);animation:hpPulse 1.8s infinite}
@keyframes hpPulse{70%{box-shadow:0 0 0 10px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}}
.hp-title{margin:0;font-size:clamp(2.3rem,8.4vw,4.4rem);line-height:1.18;font-weight:800;letter-spacing:.01em;text-wrap:balance}
.hp-title em{font-style:normal;background:linear-gradient(90deg,#7dd3fc,#5eead4 55%,#86efac);-webkit-background-clip:text;background-clip:text;color:transparent}
.hp-sub{margin:18px 0 0;max-width:34em;font-size:clamp(1rem,2.6vw,1.2rem);color:#d9cff2;line-height:1.8}
.hp-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.hp-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border-radius:12px;font-weight:700;font-size:1rem;text-decoration:none;transition:transform .15s,box-shadow .15s,background .15s}
.hp-btn-main{background:linear-gradient(135deg,#6b52b8,#8b6fe0);color:#fff;box-shadow:0 8px 24px rgba(37,99,235,.45)}
.hp-btn-main:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(37,99,235,.55)}
.hp-btn-ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.28)}
.hp-btn-ghost:hover{background:rgba(255,255,255,.16)}
.hp-btn:focus-visible,.hp-race:focus-visible,.hp-sport:focus-visible,.hp-rank a:focus-visible{outline:3px solid #93c5fd;outline-offset:3px}
.hp-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:34px 0 0;padding:0}
.hp-stats>div{padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.hp-stats dt{font-size:.74rem;color:#b8aadc;letter-spacing:.04em}
.hp-stats dd{margin:2px 0 0;display:flex;align-items:baseline;gap:5px}
.hp-stats b{font-size:clamp(1.7rem,6vw,2.3rem);font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.hp-stats small{color:#b8aadc;font-size:.8rem}
@media(min-width:760px){.hp-hero{padding:92px 0 56px}.hp-stats{grid-template-columns:repeat(4,1fr);max-width:820px}}

/* --- 共通 --- */
.hp-sec{padding:44px 0}.hp-sec-alt{background:#eef2f8}
.hp-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.hp-head h2{margin:0;font-size:clamp(1.3rem,4.4vw,1.75rem);color:var(--navy);position:relative;padding-left:14px}
.hp-head h2::before{content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:5px;border-radius:3px;background:linear-gradient(180deg,#6b52b8,#14b8a6)}
.hp-head a{font-size:.92rem;font-weight:600;text-decoration:none}
.hp-head a:hover{text-decoration:underline}
.hp-empty{display:flex;flex-direction:column;gap:6px;align-items:flex-start;padding:22px;border-radius:14px;background:#fff;border:1px dashed #b6c3d8;color:var(--muted)}
.hp-empty b{color:var(--navy);font-size:1.05rem}
.hp-note{margin:14px 0 0;font-size:.82rem;color:var(--muted)}

/* --- まもなく締切 --- */
.hp-races{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:1fr}
.hp-race{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"s n l" "s t c";gap:2px 14px;align-items:center;padding:14px 16px 14px 18px;border-radius:14px;background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--text);position:relative;overflow:hidden;transition:transform .15s,box-shadow .15s,border-color .15s}
.hp-race::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--c,#6b52b8)}
.hp-race:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(11,31,58,.12);border-color:var(--c,#6b52b8)}
.hp-race-sport{grid-area:s;align-self:center;font-size:.72rem;font-weight:700;color:var(--c,#6b52b8);background:color-mix(in srgb,var(--c,#6b52b8) 12%,#fff);padding:4px 10px;border-radius:99px;white-space:nowrap}
.hp-race-name{grid-area:n;font-weight:700;color:var(--navy)}.hp-race-name b{font-size:1.25rem}
.hp-race-time{grid-area:t;font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums}
.hp-race-left{grid-area:l;justify-self:end;font-weight:800;font-size:1.05rem;color:var(--navy);font-variant-numeric:tabular-nums}
.hp-race-left.is-soon{color:#b45309}
.hp-race-n{grid-area:c;justify-self:end;font-size:.78rem;color:var(--muted)}
@media(min-width:760px){.hp-races{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.hp-races{grid-template-columns:repeat(3,1fr)}}

/* --- 競技カード --- */
.hp-sports{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
.hp-sport{position:relative;display:flex;flex-direction:column;gap:4px;min-height:170px;padding:18px;border-radius:18px;text-decoration:none;color:#fff;overflow:hidden;background:linear-gradient(150deg,color-mix(in srgb,var(--c) 85%,#000) 0%,color-mix(in srgb,var(--c) 40%,#2b2147) 100%);transition:transform .2s,box-shadow .2s}
.hp-sport:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(11,31,58,.28)}
.hp-sport-art{position:absolute;right:-30px;bottom:-30px;width:150px;height:150px;border-radius:50%;background:repeating-radial-gradient(circle,rgba(255,255,255,.18) 0 2px,transparent 2px 14px);transition:transform .4s}
.hp-sport:hover .hp-sport-art{transform:scale(1.15) rotate(12deg)}
.hp-sport-name{position:relative;font-size:clamp(1.15rem,4.6vw,1.5rem);font-weight:800}
.hp-sport-desc{position:relative;font-size:.8rem;color:rgba(255,255,255,.82)}
.hp-sport-n{position:relative;margin-top:auto;font-size:.82rem;color:rgba(255,255,255,.9)}
.hp-sport-n b{font-size:1.6rem;margin:0 3px;font-variant-numeric:tabular-nums}
@media(min-width:900px){.hp-sports{grid-template-columns:repeat(4,1fr)}.hp-sport{min-height:200px}}

/* --- ランキング(表彰台) --- */
.hp-podium{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:1fr}
.hp-rank a{display:grid;grid-template-columns:auto auto 1fr;grid-template-areas:"n a name" "n a meta" "v v v";gap:2px 12px;align-items:center;padding:14px 16px;border-radius:16px;background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--text);transition:transform .15s,box-shadow .15s}
.hp-rank a:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(11,31,58,.12)}
.hp-rank-no{grid-area:n;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#e8eef8;color:var(--navy);font-weight:800}
.hp-rank-1 .hp-rank-no{background:linear-gradient(135deg,#fde68a,#f59e0b);color:#5b3a00}
.hp-rank-2 .hp-rank-no{background:linear-gradient(135deg,#e5e7eb,#9ca3af);color:#1f2937}
.hp-rank-3 .hp-rank-no{background:linear-gradient(135deg,#fed7aa,#c2753a);color:#4a2400}
.hp-rank a img{grid-area:a;border-radius:50%}
.hp-rank-name{grid-area:name;font-weight:700;color:var(--navy);overflow-wrap:anywhere}
.hp-rank-meta{grid-area:meta;font-size:.78rem;color:var(--muted)}
.hp-rank-vals{grid-area:v;display:flex;gap:16px;flex-wrap:wrap;margin-top:8px;padding-top:8px;border-top:1px solid var(--line);font-size:.82rem;color:var(--muted)}
.hp-rank-vals b{color:var(--navy);font-size:1.05rem;font-variant-numeric:tabular-nums}
@media(min-width:760px){.hp-podium{grid-template-columns:repeat(5,1fr)}.hp-rank a{grid-template-columns:1fr;grid-template-areas:"n" "a" "name" "meta" "v";justify-items:center;text-align:center}.hp-rank-vals{flex-direction:column;gap:2px;align-items:center;width:100%}}
.hp-empty-rank{align-items:flex-start;background:linear-gradient(135deg,#fff,#f3effc)}

/* --- しくみ --- */
.hp-sec-dark{background:linear-gradient(160deg,#2b2147,#10294d);color:#ece6fa}
.hp-sec-dark .hp-head h2{color:#fff}
.hp-loop{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:1fr}
.hp-loop li{position:relative;display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12)}
.hp-loop-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:linear-gradient(135deg,#6b52b8,#14b8a6);color:#fff}
.hp-loop b{font-size:1.08rem;color:#fff}.hp-loop li>span:last-child{font-size:.88rem;color:#cbbfe8}
@media(min-width:760px){.hp-loop{grid-template-columns:repeat(4,1fr)}.hp-loop li:not(:last-child)::after{content:"";position:absolute;right:-13px;top:40px;width:14px;height:2px;background:linear-gradient(90deg,#a493e0,transparent)}}

/* --- コミュニティ / 現地 --- */
.hp-two{display:grid;gap:30px;grid-template-columns:1fr}
@media(min-width:900px){.hp-two{grid-template-columns:1fr 1fr}}
.hp-comment{display:flex;flex-direction:column;gap:2px;margin-bottom:10px;padding:14px 16px;border-radius:14px;background:#fff;border:1px solid var(--line);text-decoration:none;color:var(--text)}
.hp-comment:hover{border-color:var(--hp-blue)}.hp-comment b{color:var(--navy)}.hp-comment span{font-size:.9rem;color:var(--muted)}
.hp-places{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
.hp-place{display:flex;flex-direction:column;gap:2px;min-height:96px;padding:16px;border-radius:14px;text-decoration:none;color:var(--navy);background:linear-gradient(145deg,#fff,#f3effc);border:1px solid var(--line);transition:transform .15s}
.hp-place:hover{transform:translateY(-2px)}.hp-place b{font-size:1.05rem}.hp-place span{font-size:.8rem;color:var(--muted)}

/* --- 責任ある楽しみ方 --- */
.hp-rp{background:#efeafb;border-top:1px solid #d9cff2;border-bottom:1px solid #d9cff2;padding:18px 0;color:#4a3790;font-size:.9rem}
.hp-rp .wrap{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}.hp-rp b{font-size:1rem}

/* --- 動きを減らす設定の人には止める --- */
@media (prefers-reduced-motion:reduce){
  .hp-lane i,.hp-live{animation:none}.hp-lane i{left:60%}
  .hp-btn,.hp-race,.hp-sport,.hp-sport-art,.hp-rank a,.hp-place{transition:none}
}

.y-credit{margin:0 0 6px;font-size:.8rem;color:#cbbfe8}.y-credit a{color:#e6dff8}

/* ロゴ: ヘッダーを白地にして、ロゴの紺・青をそのまま見せる */
.site-header{background:#fff;color:var(--navy);border-bottom:3px solid var(--navy);box-shadow:0 1px 8px #2b214714}
.site-header .wrap{min-height:64px}
.brand{display:flex;align-items:center;padding:6px 0}.brand img{display:block;height:46px;width:auto}
.nav-toggle{border:1px solid var(--navy);color:var(--navy);background:#fff}
.main-nav a{color:#2b2147}.main-nav a:hover{background:#efeafb;color:#2b2147}
.main-nav .current-menu-item>a,.main-nav .current_page_item>a{background:#efeafb;color:#2b2147;font-weight:700}


/* ===== みんなの予想(お題) ===== */
:root{--tp-bg:#f6f3fd;--tp-line:#e1daf4;--tp-blue:#6b52b8;--tp-sky:#efeafb}
.tp-wrap{padding-top:24px;padding-bottom:40px}
.tp-hero{background:linear-gradient(180deg,#f3effc 0%,#fbf9fe 70%,#fff 100%);padding:44px 0 36px;border-bottom:1px solid var(--tp-line)}
.tp-hero-kicker{margin:0 0 8px;color:var(--tp-blue);font-weight:700;letter-spacing:.06em;font-size:.85rem}
.tp-hero h1{margin:0;font-size:clamp(1.7rem,6.2vw,2.7rem);line-height:1.35;color:var(--navy)}
.tp-hero-sub{max-width:640px;margin:14px 0 22px;color:#334155}
.sp-br{display:none}@media(max-width:560px){.sp-br{display:inline}}
.tp-entries{display:grid;gap:12px;grid-template-columns:1fr 1fr;max-width:640px}
@media(max-width:560px){.tp-entries{grid-template-columns:1fr}}
.tp-entry{display:block;text-decoration:none;border-radius:16px;padding:18px 20px;color:#fff;box-shadow:0 6px 18px #5a43a633}
.tp-entry strong{display:block;font-size:1.2rem}.tp-entry span{display:block;font-size:.85rem;opacity:.92;margin-top:2px}
.tp-entry-make{background:linear-gradient(135deg,#6b52b8,#5a43a6)}.tp-entry-join{background:linear-gradient(135deg,#8b6fe0,#6b52b8)}
.tp-entry:hover{transform:translateY(-1px)}
.tp-section{padding:30px 0}.tp-section h2{margin:0 0 14px;font-size:1.3rem;color:var(--navy)}
.tp-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}.tp-section-head h1,.tp-section-head h2{margin:0}
.tp-section-head a{font-size:.9rem}
.tp-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.tp-card{display:block;background:#fff;border:1px solid var(--tp-line);border-radius:16px;padding:16px 18px;text-decoration:none;color:var(--text);box-shadow:0 2px 8px #2b21470d}
a.tp-card:hover{border-color:var(--tp-blue);box-shadow:0 4px 14px #6b52b822}
.tp-card h3{margin:8px 0 6px;font-size:1.05rem;line-height:1.45;color:var(--navy)}
.tp-card-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.tp-desc{margin:0 0 8px;color:var(--muted);font-size:.88rem}.tp-meta{margin:0;color:#475569;font-size:.82rem}
.tp-cat{display:inline-block;background:var(--tp-sky);color:#4a3790;border-radius:999px;padding:2px 10px;font-size:.78rem;text-decoration:none;font-weight:600}
.tp-state{display:inline-block;border-radius:999px;padding:2px 10px;font-size:.78rem;font-weight:700;background:#e2e8f0;color:#334155}
.tp-state.tp-open{background:#dcfce7;color:#166534}.tp-state.tp-closed{background:#e2e8f0;color:#475569}.tp-state.tp-resolved{background:#e6dff8;color:#4a3790}.tp-state.tp-void{background:#f1f5f9;color:#64748b}.tp-state.tp-sampletag{background:#fef3c7;color:#92400e}
.tp-sample{border-style:dashed;background:#fbfdff}
.tp-chips{margin:6px 0 0;display:flex;gap:6px;flex-wrap:wrap}.tp-chip{display:inline-block;background:#f1f5f9;border-radius:8px;padding:2px 9px;font-size:.82rem;color:#334155}
.tp-empty{background:#fff;border:1px dashed var(--tp-line);border-radius:12px;padding:14px 16px;color:#475569}
.tp-center{text-align:center;margin-top:20px}.tp-btn-lg{padding:14px 28px;font-size:1.05rem}
.tp-how{background:var(--tp-bg)}
.tp-steps{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.tp-steps li{background:#fff;border:1px solid var(--tp-line);border-radius:16px;padding:18px}
.tp-steps h3{margin:8px 0 6px;color:var(--navy)}.tp-steps p{margin:0;color:#475569;font-size:.92rem}
.tp-step-no{display:inline-flex;width:32px;height:32px;border-radius:50%;background:var(--tp-blue);color:#fff;font-weight:800;align-items:center;justify-content:center}
.tp-catlist{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.tp-catchip{display:inline-block;background:#fff;border:1px solid var(--tp-line);border-radius:999px;padding:7px 16px;text-decoration:none;color:#4a3790;font-weight:600;font-size:.9rem}
.tp-catchip:hover,.tp-catchip.on{background:var(--tp-blue);border-color:var(--tp-blue);color:#fff}
.tp-filter{margin:10px 0 18px}.tp-filter-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0}.tp-filter-row>span{font-size:.8rem;color:#64748b;min-width:4.5em}
.tp-filter .tp-catchip{padding:5px 13px;font-size:.85rem}
/* 詳細 */
.tp-article{max-width:760px;margin:0 auto}
.tp-head h1{margin:6px 0 4px;font-size:clamp(1.4rem,5vw,1.9rem);line-height:1.4;color:var(--navy)}.tp-head-top{margin:0;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tp-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
@media(max-width:560px){.tp-facts{grid-template-columns:1fr 1fr}.tp-facts div:first-child{grid-column:1/-1}}
.tp-facts div,.tp-stats div{background:#fff;border:1px solid var(--tp-line);border-radius:14px;padding:10px 14px}
.tp-facts span,.tp-stats span{display:block;font-size:.75rem;color:#64748b}.tp-facts strong{display:inline-block;font-size:1.05rem;color:var(--navy)}.tp-facts em{font-style:normal;color:#6b52b8;font-size:.85rem;margin-left:6px;font-weight:700}
.tp-text{background:#fff;border:1px solid var(--tp-line);border-radius:14px;padding:14px 16px;margin:10px 0;line-height:1.8}
.tp-note{background:#fff7e6;border:1px solid #fde4b0;border-radius:12px;padding:10px 14px;margin:10px 0;font-size:.92rem}
.tp-box{background:#fff;border:1px solid var(--tp-line);border-radius:16px;padding:16px 18px;margin:14px 0}
.tp-box h2{margin:0 0 10px;font-size:1.1rem;color:var(--navy)}
.tp-pickbox{border-color:#cdbff0;background:#faf8fe}
.tp-choices{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px}
.tp-choices label,.tp-readonly li span{display:flex;gap:10px;align-items:center;background:#fff;border:2px solid var(--tp-line);border-radius:12px;padding:12px 14px;cursor:pointer;font-size:1rem;min-height:48px}
.tp-readonly li span{cursor:default;opacity:.85}
.tp-choices input[type=radio]{width:20px;height:20px;accent-color:#6b52b8;flex:none}
.tp-choices label:has(input:checked){border-color:var(--tp-blue);background:#efeafb;font-weight:700}
.tp-lbl{display:block;margin:8px 0 12px;font-size:.88rem;color:#334155}.tp-lbl input{display:block;width:100%;margin-top:4px;padding:10px;border:1px solid #cbd5e1;border-radius:10px;font-size:1rem}
.tp-ref{background:#eef2ff;border-radius:10px;padding:8px 12px;font-size:.88rem;color:#3730a3}
.tp-dist{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:10px}.tp-dist-row{display:flex;justify-content:space-between;gap:10px;font-size:.95rem}
.tp-bar{height:12px;background:#ece6fa;border-radius:999px;overflow:hidden;margin-top:4px}.tp-bar i{display:block;height:100%;background:linear-gradient(90deg,#a493e0,#6b52b8);border-radius:999px}
.tp-dist .is-correct .tp-bar i{background:linear-gradient(90deg,#34d399,#16a34a)}.tp-dist .is-correct .tp-dist-row{font-weight:800;color:#166534}
.tp-sub{margin:16px 0 8px;font-size:1rem}.tp-reasons{list-style:none;margin:0;padding:0;display:grid;gap:8px}.tp-reasons li{background:#fff;border:1px solid var(--tp-line);border-radius:12px;padding:8px 12px;font-size:.92rem}
.tp-hit{color:#166534;font-weight:800}.tp-miss{color:#64748b;font-weight:700}
.tp-result-resolved{border-color:#bbf7d0;background:#f0fdf4}.tp-result-void{background:#f8fafc}.tp-answer{font-size:1.15rem;margin:0 0 8px}
.tp-history{margin-top:8px;font-size:.88rem}
.tp-owner details{margin:10px 0}.tp-owner summary,.tp-report summary{cursor:pointer;font-weight:700;color:#4a3790}
.tp-actions{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;margin:14px 0}
.tp-flash{border-radius:12px;padding:10px 14px;margin:0 0 14px;font-weight:600}.tp-flash.ok{background:#dcfce7;color:#14532d}.tp-flash.ng{background:#fee2e2;color:#7f1d1d}
/* フォーム */
.tp-form{max-width:680px}.tp-form label{display:block;margin:12px 0;font-weight:600;font-size:.92rem}
.tp-form input[type=text],.tp-form input[type=datetime-local],.tp-form select,.tp-form textarea{display:block;width:100%;margin-top:4px;padding:10px;border:1px solid #cbd5e1;border-radius:10px;font-size:1rem;font-weight:400;background:#fff}
.tp-optset{border:1px solid var(--tp-line);border-radius:12px;padding:10px 12px;margin:12px 0}.tp-optset legend{font-weight:600;font-size:.92rem;padding:0 6px}.tp-optset input{margin:6px 0 !important}
.tp-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:560px){.tp-two{grid-template-columns:1fr}}
.tp-rules{background:#f6f3fd;border-radius:12px;padding:10px 14px;margin:14px 0;font-size:.88rem}.tp-rules ul{margin:6px 0;padding-left:1.2em}.tp-agree{font-weight:600}.tp-agree input{width:auto !important;display:inline !important}
/* マイページ・実績 */
.tp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:8px 0}@media(max-width:560px){.tp-stats{grid-template-columns:1fr 1fr 1fr}.tp-stats strong{font-size:1.2rem}}
.tp-stats strong{font-size:1.6rem;color:var(--navy)}.tp-stats small{font-size:.75rem;margin-left:2px;color:#64748b}.tp-stats em{display:block;font-style:normal;font-size:.75rem;color:#64748b}
.tp-badges{display:flex;gap:8px;flex-wrap:wrap}.tp-badge{background:#fff7e6;border:1px solid #fcd9a1;color:#9a3412;border-radius:999px;padding:3px 12px;font-size:.82rem;font-weight:700}


/* ===== トップのイラスト ===== */
.tp-hero{overflow:hidden}
.tp-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:20px;align-items:center}
.tp-hero-art{display:flex;justify-content:center}.tp-hero-img{width:100%;max-width:470px;height:auto;filter:drop-shadow(0 8px 18px #6b52b822)}
@media(max-width:820px){.tp-hero-grid{grid-template-columns:1fr}.tp-hero-art{order:-1}.tp-hero-img{max-width:300px}.tp-hero{padding-top:20px}}
.tp-step-ico{width:72px;height:72px;display:block;margin:0 0 4px}
.tp-steps li{position:relative}.tp-steps .tp-step-no{position:absolute;top:14px;right:16px;width:28px;height:28px;font-size:.9rem}
.tp-cta{background:linear-gradient(180deg,#fff 0%,#f3effc 100%);padding:34px 0 44px;text-align:center;border-top:1px solid var(--tp-line)}
.tp-cta-img{display:block;width:100%;max-width:560px;height:auto;margin:0 auto 6px}
.tp-cta h2{margin:6px 0 8px;font-size:1.35rem;color:var(--navy)}.tp-cta p{margin:0 auto 18px;max-width:520px;color:#475569}
.tp-cta .y-btn{margin:4px 6px}
.tp-section{position:relative}
.tp-hero::after{content:"";display:block;height:0}
.tp-grid .tp-card{transition:transform .15s ease,box-shadow .15s ease}a.tp-card:hover{transform:translateY(-2px)}

.y-sites{border-top:1px solid #ffffff22;margin:16px 0 14px;padding-top:14px}
.y-sites-title{margin:0 0 8px;font-size:.8rem;color:#cbbfe8;font-weight:700;letter-spacing:.04em}
.y-sites ul{display:flex;flex-wrap:wrap;gap:6px 14px;list-style:none;margin:0;padding:0}
.y-sites a{font-size:.82rem;color:#e6e0f5;text-decoration:none;border-bottom:1px dotted #ffffff55}
.y-sites a:hover{color:#fff;border-bottom-color:#fff}


/* ===== Googleでログイン ===== */
.yg-box{margin:10px 0 14px}
.yg-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:#fff;border:1px solid #cdbff0;border-radius:10px;padding:11px 18px;color:#2b2147;font-weight:700;font-size:1rem;text-decoration:none;box-shadow:0 1px 3px #2b214712;min-height:46px}
.yg-btn:hover{border-color:#6b52b8;background:#faf8fe}.yg-icon{flex:none}
.yg-note{margin:8px 2px 0;font-size:.8rem;line-height:1.6;color:#64748b;max-width:520px}

/* ===== お題ページ: ワクワクする！/気になる！ と共有リンク ===== */
.tp-react{text-align:center}
.tp-react-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:6px 0 4px}
.tp-rbtn{display:inline-flex;align-items:center;gap:7px;background:#fff;border:2px solid var(--blue);color:var(--blue);border-radius:999px;padding:8px 16px;font-size:1rem;font-weight:700;cursor:pointer;font-family:inherit;line-height:1.2}
.tp-rbtn b{background:#f3effc;border-radius:999px;padding:1px 9px;font-size:.9rem;min-width:1.8em}
.tp-rbtn:hover:not(:disabled){background:#f3effc}
.tp-rbtn-kini{border-color:#0e7490;color:#0e7490}.tp-rbtn-kini b{background:#e0f2f7}.tp-rbtn-kini:hover:not(:disabled){background:#e0f2f7}
.tp-rbtn.is-on{background:var(--blue);color:#fff;cursor:default}.tp-rbtn.is-on b{background:#ffffff33;color:#fff}
.tp-rbtn-kini.is-on{background:#0e7490}
.tp-rbtn:focus-visible,.tp-sbtn:focus-visible{outline:3px solid #6b52b866;outline-offset:2px}
.tp-share-label{margin:14px 0 6px;font-size:.8rem;color:var(--muted)}
.tp-share{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.tp-sbtn{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);color:var(--navy);border-radius:8px;padding:6px 12px;font-size:.85rem;font-weight:500;text-decoration:none;cursor:pointer;font-family:inherit}
.tp-sbtn:hover{border-color:var(--blue);color:var(--blue)}
.tp-sbtn[hidden]{display:none}
.tp-ic{flex:none;display:block}

/* ===== お題ページ: アイキャッチ(カテゴリー別イラスト) ===== */
.tp-eyecatch{max-width:520px;margin:0 auto 12px}
.tp-eyecatch img{display:block;width:100%;height:auto;border-radius:16px;border:1px solid var(--tp-line,#e5e7eb)}

/* ===== 一覧カードのイラスト ===== */
.tp-card{overflow:hidden}
.tp-card-img{display:block;width:calc(100% + 36px);max-width:none;height:auto;aspect-ratio:16/7;object-fit:cover;margin:-16px -18px 12px;background:#f3effc}