/* tinderjp.com — 伝言板（掲示板型）専用スタイル。他サイトと共有しない。 */
:root{
  --cream:#f4ecdc;
  --paper:#fffdf7;
  --cork:#d8bd97;
  --cork-deep:#c4a37a;
  --ink:#2b2723;
  --ink-2:#4d463d;
  --ink-3:#7b7163;
  --coral:#dd5c48;
  --coral-d:#bf4534;
  --line:rgba(43,39,35,.16);
  --soft:rgba(43,39,35,.08);
  --shadow:3px 4px 0 rgba(196,163,122,.26);
  --round:"M PLUS Rounded 1c","Hiragino Maru Gothic ProN","Noto Sans JP",sans-serif;
  --jp:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
  --mono:"Space Mono","JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;color:var(--ink);font-family:var(--jp);font-size:16px;line-height:1.92;
  background-color:var(--cream);
  background-image:radial-gradient(rgba(43,39,35,.055) 1px,transparent 1px);
  background-size:22px 22px;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p{margin:0 0 14px}
h1,h2,h3{font-family:var(--round);font-weight:800;letter-spacing:.01em;line-height:1.4;margin:0}
.tb-wrap{max-width:1160px;margin:0 auto;padding:0 26px}
.tb-skip{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.tb-skip:focus{position:fixed;left:12px;top:12px;width:auto;height:auto;margin:0;clip:auto;background:var(--coral);color:#fff;padding:10px 14px;z-index:99}

/* 上部の細い帯 */
.tb-topline{background:var(--ink);color:#f0e6d3;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em}
.tb-topline .tb-wrap{display:flex;justify-content:space-between;gap:14px;padding-top:7px;padding-bottom:7px}
.tb-topline b{color:#f6b6a6;font-weight:400}

/* 中央の看板 */
.tb-mast{padding:18px 0 4px;text-align:center}
.tb-sign{
  display:inline-block;position:relative;background:var(--paper);
  border:1px solid var(--line);box-shadow:6px 7px 0 rgba(196,163,122,.3);
  padding:12px 30px 10px;transform:rotate(-.7deg);
}
.tb-sign::before,.tb-sign::after{
  content:"";position:absolute;width:52px;height:15px;background:rgba(216,189,151,.62);
  border-left:1px solid rgba(43,39,35,.08);border-right:1px solid rgba(43,39,35,.08);
}
.tb-sign::before{left:-16px;top:8px;transform:rotate(-32deg)}
.tb-sign::after{right:-16px;bottom:6px;transform:rotate(-28deg)}
.tb-sign b{display:block;font-family:var(--round);font-weight:800;font-size:27px;letter-spacing:.19em;line-height:1.1}
.tb-sign span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.24em;color:var(--ink-3);margin-top:6px}

/* ナビ：紙のラベルを貼った列 */
.tb-nav{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;padding:12px 0 4px}
.tb-nav a{
  position:relative;background:var(--paper);border:1px solid var(--line);border-radius:2px;
  padding:8px 13px 7px;font-size:13px;line-height:1.2;box-shadow:2px 2px 0 rgba(196,163,122,.22);
  transform:rotate(-.35deg);white-space:nowrap;
}
.tb-nav a:nth-child(2n){transform:rotate(.45deg)}
.tb-nav a:nth-child(3n){transform:rotate(-.1deg)}
.tb-nav a i{font-family:var(--mono);font-size:9.5px;font-style:normal;color:var(--coral);margin-right:5px;letter-spacing:.04em}
.tb-nav a:hover{border-color:var(--cork-deep)}
.tb-nav a.on{background:var(--coral);border-color:var(--coral-d);color:#fff}
.tb-nav a.on i{color:#ffd9cf}
.tb-nav .tb-go{border-color:var(--coral);color:var(--coral-d);font-weight:700}
.tb-nav .tb-go:hover{background:var(--coral);color:#fff}

/* ヒーロー：左に書き置き、右にポラロイド */
.tb-hero{display:grid;grid-template-columns:minmax(0,1.03fr) minmax(0,.97fr);gap:40px;align-items:center;padding:14px 0 28px}
.tb-hero-note{position:relative;background:var(--paper);border:1px solid var(--line);box-shadow:7px 8px 0 rgba(196,163,122,.28);padding:24px 30px 20px;transform:rotate(-.35deg)}
.tb-hero-note::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--coral);opacity:.75}
.tb-kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:var(--coral-d);margin:0 0 14px}
.tb-hero h1{font-size:clamp(28px,3.7vw,45px);line-height:1.36;margin:0 0 15px}
.tb-hero h1 em{font-style:normal;background:linear-gradient(transparent 62%,rgba(221,92,72,.26) 62%)}
.tb-lede{font-size:14.6px;line-height:1.86;color:var(--ink-2);margin:0 0 11px}
.tb-lede.small{font-size:13.1px;color:var(--ink-3);line-height:1.8}
.tb-acts{display:flex;flex-wrap:wrap;gap:10px;margin:17px 0 15px}
.tb-btn{display:inline-block;background:var(--coral);color:#fff;font-weight:700;font-size:14px;padding:12px 22px;border:1px solid var(--coral-d);box-shadow:3px 3px 0 rgba(43,39,35,.16)}
.tb-btn:hover{background:var(--coral-d)}
.tb-btn.ghost{background:var(--paper);color:var(--ink);border-color:var(--line);font-weight:500;box-shadow:3px 3px 0 rgba(196,163,122,.26)}
.tb-btn.ghost:hover{border-color:var(--cork-deep);color:var(--coral-d)}

.tb-mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);margin-top:4px}
.tb-mini div{padding:9px 0 7px}
.tb-mini div+div{border-left:1px dashed var(--line);padding-left:14px}
.tb-mini dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--ink-3);margin:0 0 2px}
.tb-mini dd{margin:0;font-family:var(--round);font-weight:800;font-size:21px;line-height:1.2}
.tb-mini dd small{font-size:11px;font-weight:500;color:var(--ink-2);margin-left:3px}

.tb-polaroid{position:relative;background:#fff;padding:13px 13px 60px;box-shadow:0 16px 28px rgba(88,64,36,.24);transform:rotate(1.5deg);border:1px solid rgba(43,39,35,.1)}
.tb-polaroid:hover{transform:rotate(.4deg);transition:transform .35s ease}
.tb-polaroid img{width:100%;height:auto;border:1px solid rgba(43,39,35,.1)}
.tb-polaroid figcaption{position:absolute;left:15px;right:15px;bottom:11px;font-family:var(--mono);font-size:10px;line-height:1.65;color:var(--ink-3)}
.tb-pin{position:absolute;top:-9px;left:50%;width:20px;height:20px;margin-left:-10px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#ff9d86,#c94232 72%);box-shadow:0 3px 5px rgba(60,30,20,.4);z-index:3}
.tb-pin::after{content:"";position:absolute;left:8px;top:6px;width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.75)}

/* 提携サイト：ヒーロー直後、3×2、ロゴ高さ60px */
.tb-partners{background:rgba(216,189,151,.34);border-top:1px dashed var(--cork-deep);border-bottom:1px dashed var(--cork-deep);padding:16px 0 18px}
.tb-partners-head{display:flex;align-items:baseline;gap:12px;margin-bottom:13px}
.tb-partners-head h2{font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.26em;color:var(--ink-2)}
.tb-partners-head span{font-size:11.5px;color:var(--ink-3)}
.tb-pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px}
.tb-pgrid a{display:flex;align-items:center;justify-content:center;height:88px;background:#17151a;border:1px solid rgba(23,21,26,.9);box-shadow:2px 3px 0 rgba(120,92,60,.28)}
.tb-pgrid a:hover{outline:2px solid var(--coral);outline-offset:1px}
.tb-pgrid img{height:60px;width:auto;max-width:88%;object-fit:contain;display:block}

/* ブロック見出し */
.tb-block{padding:50px 0 6px}
.tb-head{display:flex;align-items:center;gap:14px;margin-bottom:24px;flex-wrap:wrap}
.tb-tag{display:inline-flex;align-items:center;gap:7px;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--ink-3);white-space:nowrap}
.tb-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--coral)}
.tb-head h2{font-size:clamp(22px,2.7vw,30px)}
.tb-rule{flex:1;height:1px;background:var(--line);min-width:30px}
.tb-intro{font-size:14.4px;color:var(--ink-2);max-width:48em;margin:-8px 0 22px}

/* ノートカード */
.tb-cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.tb-card{position:relative;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);padding:22px 22px 18px}
.tb-card::before{content:"";position:absolute;left:20px;top:-7px;width:44px;height:12px;background:rgba(216,189,151,.72);transform:rotate(-3deg)}
.tb-card .tb-no{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--coral-d);display:block;margin-bottom:6px}
.tb-card h3{font-size:17.5px;margin-bottom:8px}
.tb-card p{font-size:13.6px;line-height:1.85;color:var(--ink-2);margin:0}
.tb-card p+p{margin-top:8px}

/* プラン */
.tb-tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.tb-tier{background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);padding:20px 20px 18px;position:relative}
.tb-tier.gold{background:#fdf4e0}
.tb-tier.plat{background:#f7efe6}
.tb-badge{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.18em;padding:3px 9px;border:1px solid var(--coral);color:var(--coral-d);border-radius:2px}
.tb-tier h3{font-size:21px;margin:9px 0 4px}
.tb-tier .tb-sub{font-size:12.6px;color:var(--ink-3);margin:0 0 12px}
.tb-tier ul{list-style:none;margin:0 0 14px;padding:0}
.tb-tier li{position:relative;padding:5px 0 5px 16px;font-size:13.2px;border-top:1px dotted var(--soft);color:var(--ink-2)}
.tb-tier li::before{content:"";position:absolute;left:0;top:14px;width:5px;height:5px;border-radius:50%;background:var(--cork-deep)}
.tb-tier .tb-take{font-size:12.4px;color:var(--ink-3);border-top:1px dashed var(--line);padding-top:10px;margin:0}
.tb-fine{font-size:12px;color:var(--ink-3);margin:14px 0 0;font-family:var(--jp)}

/* 数字 */
.tb-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,253,247,.55)}
.tb-stats div{padding:18px 16px 16px}
.tb-stats div+div{border-left:1px dashed var(--line)}
.tb-stats dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:var(--ink-3);margin:0 0 4px}
.tb-stats dd{margin:0;font-family:var(--round);font-weight:800;font-size:clamp(24px,3vw,32px);line-height:1.15}
.tb-stats dd small{font-size:11px;font-weight:500;color:var(--ink-2);margin-left:2px}

/* 安全：2×2 */
.tb-safety{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.tb-safe{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;background:var(--paper);border:1px solid var(--line);padding:16px 18px}
.tb-safe .tb-dot{width:10px;height:10px;border-radius:50%;background:var(--coral);margin-top:8px;box-shadow:0 0 0 4px rgba(221,92,72,.14)}
.tb-safe h3{font-size:15.5px;margin-bottom:3px}
.tb-safe p{font-size:13.2px;color:var(--ink-2);margin:0}

/* Q&A 抜粋 */
.tb-asks{border-top:1px dashed var(--line)}
.tb-ask{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:20px;padding:16px 0;border-bottom:1px dashed var(--line)}
.tb-ask h3{font-size:14.8px}
.tb-ask h3 span{color:var(--coral-d);font-family:var(--mono);font-size:11px;margin-right:6px}
.tb-ask p{margin:0;font-size:13.4px;color:var(--ink-2)}
.tb-more{display:inline-block;margin-top:16px;font-size:13.4px;font-weight:700;color:var(--coral-d);border-bottom:1px solid var(--coral)}
.tb-more:hover{color:var(--ink)}

/* 下位ページの見出し */
.tb-phead{padding:34px 0 18px;border-bottom:1px dashed var(--line)}
.tb-phead h1{font-size:clamp(26px,3.4vw,38px);margin:10px 0 10px}
.tb-phead p{max-width:46em;font-size:14.2px;color:var(--ink-2);margin:0}
.tb-crumb{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--ink-3)}
.tb-crumb a{color:var(--coral-d)}

/* ノート一覧（10枚） */
.tb-notes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;padding:30px 0 10px}
.tb-note{position:relative;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);padding:22px 22px 18px}
.tb-note:nth-child(odd){transform:rotate(-.3deg)}
.tb-note:nth-child(even){transform:rotate(.35deg)}
.tb-note::after{content:"";position:absolute;right:18px;top:-6px;width:38px;height:11px;background:rgba(216,189,151,.7);transform:rotate(4deg)}
.tb-note-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;border-bottom:1px dashed var(--line);padding-bottom:8px;margin-bottom:10px}
.tb-note-top b{font-family:var(--round);font-size:17px;font-weight:800}
.tb-note-top time{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);letter-spacing:.06em;white-space:nowrap}
.tb-note p{font-size:13.4px;color:var(--ink-2);margin:0 0 10px;line-height:1.85}
.tb-note .tb-meta{display:flex;flex-wrap:wrap;gap:6px;font-family:var(--mono);font-size:9.8px;letter-spacing:.06em;color:var(--ink-3)}
.tb-note .tb-meta span{border:1px solid var(--soft);padding:2px 7px;background:rgba(216,189,151,.16)}
.tb-no-big{font-family:var(--mono);font-size:11px;color:var(--coral-d)}

/* ボード（分類） */
.tb-boards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;padding:30px 0 10px}
.tb-board{background:rgba(216,189,151,.45);border:1px solid var(--cork-deep);padding:16px;position:relative;box-shadow:4px 5px 0 rgba(196,163,122,.34)}
.tb-board-in{background:var(--paper);border:1px solid rgba(43,39,35,.1);padding:20px 20px 16px}
.tb-board-code{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--coral-d)}
.tb-board h2{font-size:19px;margin:5px 0 8px}
.tb-board p{font-size:13.3px;color:var(--ink-2);margin:0 0 8px;line-height:1.85}
.tb-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.tb-chips span{font-size:10.5px;border:1px solid var(--line);padding:2px 8px;color:var(--ink-3);background:rgba(244,236,220,.6)}

/* ガイド */
.tb-guide{padding:26px 0 8px;max-width:880px}
.tb-ch{display:grid;grid-template-columns:76px minmax(0,1fr);gap:22px;padding:24px 0;border-bottom:1px dashed var(--line)}
.tb-ch-no{font-family:var(--mono);font-size:26px;color:var(--coral);line-height:1;padding-top:4px}
.tb-ch-no small{display:block;font-size:9.5px;letter-spacing:.14em;color:var(--ink-3);margin-top:5px}
.tb-ch h2{font-size:20px;margin:0 0 10px}
.tb-ch p{font-size:14.2px;color:var(--ink-2);margin:0 0 10px}
.tb-tip{background:var(--paper);border-left:4px solid var(--cork-deep);padding:12px 16px;font-size:13.2px;color:var(--ink-2);margin-top:6px}
.tb-tip b{font-family:var(--round);color:var(--ink)}

/* FAQ */
.tb-faq{padding:28px 0 10px;max-width:900px}
.tb-faq details{background:var(--paper);border:1px solid var(--line);margin-bottom:10px;box-shadow:2px 2px 0 rgba(196,163,122,.2)}
.tb-faq summary{cursor:pointer;list-style:none;padding:15px 44px 15px 18px;position:relative;font-family:var(--round);font-weight:800;font-size:15px}
.tb-faq summary::-webkit-details-marker{display:none}
.tb-faq summary::after{content:"+";position:absolute;right:18px;top:12px;font-family:var(--mono);font-size:18px;color:var(--coral)}
.tb-faq details[open] summary::after{content:"-"}
.tb-faq summary .tb-qn{font-family:var(--mono);font-size:11px;color:var(--coral-d);margin-right:8px}
.tb-faq .tb-a{padding:0 18px 16px 18px;font-size:13.6px;color:var(--ink-2);line-height:1.9;border-top:1px dashed var(--soft);padding-top:12px;margin-top:2px}
.tb-faq .tb-a p{margin:0 0 8px}
.tb-faq .tb-a p:last-child{margin:0}

/* about */
.tb-about{padding:28px 0 6px;max-width:900px}
.tb-sec{display:grid;grid-template-columns:150px minmax(0,1fr);gap:24px;padding:22px 0;border-bottom:1px dashed var(--line)}
.tb-sec h2{font-size:17.5px}
.tb-sec p{font-size:14px;color:var(--ink-2);margin:0 0 10px}
.tb-sec p:last-child{margin:0}
.tb-sec .tb-lab{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--coral-d);display:block;margin-bottom:5px}
.tb-facts{border:1px solid var(--line);background:var(--paper)}
.tb-facts div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;padding:10px 14px;font-size:13px;border-bottom:1px dashed var(--soft)}
.tb-facts div:last-child{border-bottom:0}
.tb-facts dt{font-family:var(--mono);font-size:10.5px;color:var(--ink-3);letter-spacing:.05em}
.tb-facts dd{margin:0;color:var(--ink-2)}

/* 404 */
.tb-404{padding:64px 0 80px;text-align:center}
.tb-404 .tb-slip{display:inline-block;background:var(--paper);border:1px solid var(--line);box-shadow:8px 9px 0 rgba(196,163,122,.3);padding:40px 46px 36px;transform:rotate(-.8deg);position:relative;max-width:640px}
.tb-404 .tb-code{font-family:var(--mono);font-size:58px;line-height:1;color:var(--coral);letter-spacing:.08em}
.tb-404 h1{font-size:24px;margin:14px 0 10px}
.tb-404 p{font-size:13.8px;color:var(--ink-2)}
.tb-404 .tb-acts{justify-content:center}

/* フッター */
.tb-foot{margin-top:46px;border-top:2px dashed var(--cork-deep);background:rgba(216,189,151,.3);padding:30px 0 24px}
.tb-foot-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr) minmax(0,.85fr);gap:30px}
.tb-foot h2{font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.22em;color:var(--ink-2);margin-bottom:9px}
.tb-foot p{font-size:12.4px;line-height:1.85;color:var(--ink-2);margin:0 0 8px}
.tb-foot ul{list-style:none;margin:0;padding:0;font-size:12.4px}
.tb-foot li{margin-bottom:5px}
.tb-foot a:hover{color:var(--coral-d);text-decoration:underline}
.tb-age{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--coral);color:var(--coral-d);font-family:var(--mono);font-size:10px;letter-spacing:.1em;padding:3px 9px;margin-bottom:10px}
.tb-copy{margin-top:22px;padding-top:14px;border-top:1px dashed var(--line);font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--ink-3);display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

@media (max-width:900px){
  .tb-hero{grid-template-columns:minmax(0,1fr);gap:34px;padding-top:18px}
  .tb-polaroid{transform:rotate(.8deg)}
  .tb-cols3,.tb-tiers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tb-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tb-stats div:nth-child(3){border-left:0}
  .tb-stats div:nth-child(n+3){border-top:1px dashed var(--line)}
  .tb-foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .tb-sec{grid-template-columns:minmax(0,1fr);gap:8px}
}
@media (max-width:640px){
  body{font-size:15px}
  .tb-topline{font-size:9px;letter-spacing:.1em}
  .tb-wrap{padding:0 18px}
  .tb-sign{padding:12px 20px 10px}
  .tb-sign b{font-size:24px;letter-spacing:.14em}
  .tb-nav{gap:6px;padding-top:14px}
  .tb-nav a{font-size:12px;padding:7px 10px}
  .tb-hero-note{padding:22px 20px 20px}
  .tb-cols3,.tb-tiers,.tb-notes,.tb-boards,.tb-safety{grid-template-columns:minmax(0,1fr)}
  .tb-pgrid{grid-template-columns:minmax(0,1fr)}
  .tb-pgrid a{height:88px}
  .tb-ask{grid-template-columns:minmax(0,1fr);gap:6px}
  .tb-ch{grid-template-columns:minmax(0,1fr);gap:10px}
  .tb-ch-no{font-size:20px}
  .tb-ch-no small{display:inline;margin-left:6px}
  .tb-404 .tb-slip{padding:28px 20px}
  .tb-404 .tb-code{font-size:44px}
  .tb-foot-grid{grid-template-columns:minmax(0,1fr)}
  .tb-facts div{grid-template-columns:minmax(0,1fr);gap:2px}
  .tb-hero h1{font-size:29px}
}