:root{
  --blue:#1A73E8; --red:#EA4335; --yellow:#F9AB00; --green:#1E8E3E;
  --bg:#FFFFFF; --surface:#F8F9FA; --border:#DADCE0;
  --text:#202124; --text2:#5F6368;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Noto Sans JP',sans-serif;line-height:1.9;}
a{color:var(--blue);text-decoration:none;}

/* ---- Top bar ---- */
.topbar{
  display:flex;align-items:center;gap:16px;padding:14px 24px;border-bottom:1px solid var(--border);
  position:sticky;top:0;background:var(--bg);z-index:30;
}
.logo{display:flex;align-items:center;text-decoration:none;}
.logo-img{height:40px;display:block;}
.logo-tagline{font-size:12px;color:var(--text2);white-space:nowrap;}
.topbar-spacer{flex:1;}
@media(max-width:640px){
  .logo-tagline{display:none;}
  .logo{margin-left:-8px;}
  .hamburger-btn svg{width:34px;height:34px;}
}
.hamburger-wrap{position:relative;}
.hamburger-btn{
  width:44px;height:44px;border-radius:8px;border:none;background:none;
  display:flex;align-items:center;justify-content:center;color:var(--text2);cursor:pointer;
}
.hamburger-btn svg{display:block;}
.hamburger-btn:hover{background:var(--surface);}
.hamburger-menu{
  position:absolute;top:48px;right:0;background:#fff;border:1px solid var(--border);border-radius:10px;
  box-shadow:0 4px 16px rgba(32,33,36,.15);min-width:180px;padding:6px;display:none;z-index:20;
}
.hamburger-menu.open{display:block;}
.hamburger-menu a{
  display:block;padding:10px 12px;border-radius:6px;font-size:14px;color:var(--text);text-decoration:none;
}
.hamburger-menu a:hover{background:rgba(26,115,232,.08);}
.crumb{font-size:13px;color:var(--text2);}
.crumb a{color:var(--text2);}

/* ---- サイト共通の2カラムレイアウト（本文 + 右サイドバー） ---- */
.page-body{display:flex;align-items:flex-start;max-width:1400px;margin:0 auto;}
.page-main{flex:1;min-width:0;}
.site-sidebar{
  flex-shrink:0;width:300px;padding:32px 24px 32px 8px;
  display:flex;flex-direction:column;gap:32px;
}
.sidebar-block .page-eyebrow{display:block;margin-bottom:8px;}
.sidebar-block h3{font-size:15px;font-weight:700;margin:-6px 0 2px;}
.sidebar-block h3 a{color:inherit;}
.sidebar-block h3 a:hover{color:var(--blue);}
.sidebar-feature-list{display:flex;flex-direction:column;gap:12px;margin-top:10px;}
.sidebar-more-wrap{margin-top:10px;text-align:right;}
.sidebar-more-link{display:inline-block;font-size:12.5px;color:var(--blue);}
.sidebar-more-link:hover{text-decoration:underline;}
.sidebar-more-link .more-arrow{display:inline-block;font-size:10px;margin-right:2px;}
.banner-card{
  background:var(--surface);border-radius:12px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;color:var(--text2);font-size:20px;
  transition:box-shadow .15s ease, transform .15s ease;
}
.banner-card:hover{box-shadow:0 4px 14px rgba(32,33,36,.15);transform:translateY(-2px);}
.banner-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease;}
.banner-card:hover img{transform:scale(1.05);}
.sidebar-banner{aspect-ratio:2.7/1;width:100%;}
.ad-label{font-size:11px;color:var(--text2);letter-spacing:.04em;text-align:center;margin-bottom:8px;}
.ad-slot{
  width:100%;max-width:300px;aspect-ratio:300/250;margin:0 auto;
  border:1.5px dashed var(--border);background:var(--surface);border-radius:8px;
  display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;
  color:var(--text2);font-size:12px;text-align:center;padding:12px;
}

/* ---- Top page: 特集記事の下のインライン広告（横長） ---- */
.ad-slot-inline{
  width:100%;max-width:728px;aspect-ratio:728/90;margin:8px auto 0;
  border:1.5px dashed var(--border);background:var(--surface);border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  color:var(--text2);font-size:12px;text-align:center;padding:12px;
}
.sidebar-genre-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:0;}
.sidebar-genre-list a{display:block;padding:3px 4px 3px 0;font-size:13px;line-height:1.3;color:var(--text);border-radius:6px;}
.sidebar-genre-list a:hover{background:rgba(26,115,232,.08);color:var(--blue);}
@media(max-width:1150px){
  .site-sidebar{display:none;}
}

/* ---- Article / genre page wrap ---- */
.wrap{max-width:700px;margin:0 auto;padding:0 24px 80px;}

/* ---- お問い合わせフォーム ---- */
.contact-form{display:flex;flex-direction:column;gap:18px;margin:28px 0 8px;}
.contact-field{display:flex;flex-direction:column;gap:6px;font-size:13.5px;font-weight:500;color:var(--text);}
.contact-field input,.contact-field textarea{
  border:1px solid var(--border);border-radius:8px;padding:10px 12px;
  font-size:14px;font-family:inherit;color:var(--text);resize:vertical;
}
.contact-field input:focus,.contact-field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(26,115,232,.12);}
.contact-submit{align-self:flex-start;}

h1{font-size:36px;font-weight:700;margin:0 0 2px;}
.column-title{line-height:1.3;}
.catch{color:var(--blue);font-size:16px;font-weight:500;margin:0 0 14px;}
.article-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;}
.article-tag-chip{border:1px solid var(--border);border-radius:16px;padding:4px 12px;font-size:12.5px;color:var(--text2);background:var(--surface);}
.lead{color:var(--text2);font-size:15.5px;margin:0 0 28px;}

.photo-slot{
  border:1.5px dashed var(--border);background:var(--surface);border-radius:12px;
  aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;color:var(--text2);font-size:13.5px;text-align:center;padding:16px;margin:40px 0 20px;
}
.photo-slot strong{color:var(--blue);font-size:12.5px;}

.column-banner{display:block;width:100%;aspect-ratio:2.6/1;object-fit:cover;border-radius:12px;margin:40px 0 20px;}

.column-date{font-size:12px;color:var(--text2);margin:0 0 24px;font-variant-numeric:tabular-nums;}

.insta-btn{
  display:inline-flex;align-items:center;gap:8px;padding:9px 18px;border-radius:20px;
  background:#fff;border:1px solid var(--border);color:var(--text);font-size:13.5px;font-weight:500;
  margin-top:6px;
}
.insta-btn:hover{background:rgba(26,115,232,.08);box-shadow:0 1px 6px rgba(32,33,36,.12);}

section{padding:28px 0;border-top:1px solid var(--border);}
section:first-of-type{border-top:none;}
.hidden-section{display:none;}
.eyebrow{
  display:inline-block;position:relative;background:#E8F0FE;color:var(--blue);
  font-size:12px;font-weight:700;letter-spacing:.04em;padding:5px 12px;border-radius:14px;margin-bottom:0;
}
.eyebrow::after{
  content:"";position:absolute;left:16px;bottom:-4px;width:0;height:0;
  border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid #E8F0FE;
}
h2{font-size:19px;font-weight:700;margin:6px 0 14px;}
p{margin:0 0 12px;font-size:15px;}
ul,ol{margin:0 0 12px;padding-left:20px;}
li{margin-bottom:8px;font-size:15px;}
mark{background:rgba(26,115,232,.15);color:inherit;padding:0 3px;border-radius:3px;}

table{width:100%;border-collapse:collapse;margin:10px 0 16px;font-size:14px;}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);}
th{color:var(--text2);font-weight:700;background:var(--surface);}

.callout{
  background:var(--surface);border-radius:10px;padding:14px 16px;font-size:13.5px;color:var(--text2);margin:12px 0;
}
/* ---- 生の声（コメント）ボックス：本文と区別したい一言を挿入するための再利用パーツ。記事内のどのセクションにも使える ---- */
.voice-note{background:rgba(26,115,232,.06);border-radius:10px;padding:14px 16px;margin:26px 0 20px;}
.voice-note-label{display:block;font-size:11px;font-weight:700;color:var(--blue);letter-spacing:.06em;margin-bottom:6px;}
.voice-note p{margin:0;font-size:14px;line-height:1.7;color:var(--text);}
.fillin{background:#FEF7E0;color:#B06000;padding:1px 5px;border-radius:4px;font-size:.95em;}

.link-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 6px;}
@media(max-width:520px){.link-grid{grid-template-columns:1fr;}}
.link-card{
  display:flex;flex-direction:column;gap:3px;padding:14px 16px;border:1px solid var(--border);
  border-radius:10px;background:#fff;
}
.link-card:hover{background:rgba(26,115,232,.06);box-shadow:0 1px 6px rgba(32,33,36,.1);}
.link-card .site{display:flex;align-items:center;gap:4px;font-weight:700;font-size:14px;color:var(--text);}
.link-card .site .arrow{color:var(--blue);font-size:13px;font-weight:500;}
.link-card .desc{font-size:12px;color:var(--text2);}

.tieup-slot{
  border:1.5px dashed var(--border);border-radius:12px;padding:26px 18px;text-align:center;
  color:var(--text2);font-size:13.5px;background:var(--surface);
}
.tieup-slot strong{display:block;color:var(--blue);font-size:12.5px;margin-bottom:6px;}

.creator-spotlight{
  border:1.5px solid var(--blue);border-radius:14px;padding:22px 22px 24px;
  background:linear-gradient(135deg,rgba(26,115,232,.07),rgba(26,115,232,.02));
}
.creator-spotlight h2{margin:0 0 12px;}
.creator-spotlight p{margin:0 0 16px;font-size:14.5px;line-height:1.8;}
.creator-spotlight .creator-name{color:var(--blue);font-weight:700;}
.creator-spotlight-btn{
  display:inline-flex;align-items:center;gap:4px;padding:9px 18px;border-radius:20px;
  background:#fff;border:1px solid var(--border);color:var(--text);font-size:13.5px;font-weight:500;
}
.creator-spotlight-btn:hover{background:rgba(26,115,232,.08);}
.creator-spotlight-btn .arrow{color:var(--blue);font-size:13px;font-weight:500;}

footer{border-top:1px solid var(--border);font-size:12px;color:var(--text2);}
.wrap footer, .genre-wrap footer{margin-top:30px;padding-top:18px;}
.page-footer{max-width:1040px;margin:64px auto 0;padding:24px;}

/* ---- サイト共通のサイトマップフッター（全ページ下部） ---- */
.site-footer{border-top:1px solid var(--border);margin-top:56px;padding:40px 24px 24px;background:var(--surface);}
.site-footer-inner{max-width:1200px;margin:0 auto;display:flex;gap:48px;flex-wrap:wrap;}
.site-footer-col{display:flex;flex-direction:column;gap:9px;min-width:160px;}
.site-footer-col a{font-size:13px;color:var(--text);}
.site-footer-col a:hover{color:var(--blue);}
.site-footer-genres{flex:2;min-width:280px;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px 20px;}
.site-footer-genres h4{grid-column:1/-1;font-size:12px;font-weight:700;color:var(--text2);margin:0 0 2px;letter-spacing:.04em;}
.site-footer-genres a{font-size:12px;color:var(--text);}
.site-footer-genres a:hover{color:var(--blue);}
.site-footer-copy{max-width:1200px;margin:32px auto 0;padding-top:16px;border-top:1px solid var(--border);font-size:12px;color:var(--text2);text-align:right;}
.site-footer-copy a{color:var(--text2);}
.site-footer-copy a:hover{color:var(--blue);}

/* ---- Top page: hero ---- */
.hero{max-width:680px;margin:84px auto 8px;text-align:center;padding:0 20px;}
.hero-logo{height:90px;margin-bottom:32px;}
.hero h1{font-size:22px;font-weight:700;margin:0;color:var(--blue);}
.hero-lead{margin:14px 0 0;font-size:17px;color:var(--text2);}

/* ---- Top page: search box (inside #genre-grid, above the chips) ---- */
.search-box{max-width:560px;margin:0 auto 20px;}
.searchbar{
  display:flex;align-items:center;gap:12px;
  border:1px solid var(--border);border-radius:24px;padding:12px 20px;
  box-shadow:0 1px 6px rgba(32,33,36,.08);background:#fff;
}
.searchbar input{
  border:none;outline:none;flex:1;font-size:15px;font-family:inherit;color:var(--text);background:transparent;
}
.searchbar .icon{color:var(--text2);flex-shrink:0;display:block;}

/* ---- Top page: genre filter chips (placed right after the "ジャンルから探す" heading) ---- */
.chips-block{margin:0 0 24px;text-align:center;}
.chips{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0;}
.chip{
  border:1px solid var(--border);border-radius:16px;padding:6px 14px;font-size:13px;color:var(--text2);
  cursor:pointer;user-select:none;transition:background .15s,color .15s,border-color .15s;
}
.chip:hover{background:rgba(26,115,232,.08);}
.chip.active{background:var(--blue);border-color:var(--blue);color:#fff;}
.chip-clear{
  font-size:13px;color:var(--blue);cursor:pointer;user-select:none;
  padding:6px 4px;align-self:center;
}
.chip-clear:hover{text-decoration:underline;}
.chip-hint{font-size:12px;color:var(--text2);margin:10px 0 0;}

/* ---- Top page: diagnosis ---- */
#diagnosis, #genre-grid{scroll-margin-top:76px;}
#genre-grid{margin-top:32px;}
.diagnosis{max-width:1040px;margin:56px auto 0;padding:0 24px;}
.diagnosis-panel{
  display:flex;gap:28px;align-items:flex-start;
  border-radius:16px;background:linear-gradient(120deg,#E8F0FE,#FCE8E6);padding:32px 28px;
}
.diagnosis-illust{
  flex-shrink:0;width:240px;aspect-ratio:1/1;overflow:hidden;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:44px;color:var(--text2);
}
.diagnosis-illust img{width:100%;height:100%;object-fit:cover;display:block;}
.diagnosis-content{flex:1;min-width:0;}
.diagnosis-head{margin-bottom:28px;}
.diagnosis-head h2{margin:0 0 2px;font-size:20px;}
.diagnosis-head p{margin:0;font-size:14px;color:var(--text2);}
.quiz-progress{font-size:12px;color:var(--blue);font-weight:700;margin-bottom:4px;}
.quiz-q{font-size:17px;font-weight:700;margin-bottom:16px;}
.quiz-options{display:flex;gap:12px;flex-wrap:wrap;}
.quiz-opt{
  flex:1;min-width:200px;display:flex;align-items:center;
  padding:14px 16px;border-radius:10px;border:1px solid var(--border);
  background:#fff;font-size:14px;font-family:inherit;cursor:pointer;text-align:left;color:var(--text);
}
.quiz-opt:hover{background:rgba(26,115,232,.06);box-shadow:0 2px 10px rgba(32,33,36,.12);}
.quiz-opt-text{flex:1;}
.quiz-opt-neutral{flex-basis:100%;justify-content:center;text-align:center;color:var(--text2);border-style:dashed;}
.quiz-opt-neutral:hover{background:rgba(0,0,0,.03);}
@media(max-width:640px){
  .diagnosis-panel{flex-direction:column;}
  .diagnosis-illust{width:100%;aspect-ratio:16/9;}
}

/* ---- Diagnosis result（最大6件をカードで表示） ---- */
.quiz-result-multi{margin-top:24px;}
.quiz-result-heading{font-size:15px;font-weight:400;margin:0 0 12px;}
.quiz-result-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:18px;}
.quiz-retry{
  display:inline-block;background:none;border:none;color:var(--blue);font-size:13px;
  font-family:inherit;cursor:pointer;padding:0;text-decoration:none;white-space:nowrap;
}
.quiz-retry:hover{text-decoration:underline;}
.diagnosis-btn{
  display:inline-block;background:var(--blue);color:#fff;border:none;border-radius:20px;padding:11px 24px;
  font-size:14px;font-weight:500;font-family:inherit;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background .15s ease, transform .15s ease;
}
.diagnosis-btn:hover{background:#1558B0;transform:translateY(-2px);}

/* ---- Shared: section headers / card grid (top page + genre pages) ---- */
.section{max-width:1040px;margin:0 auto;padding:56px 24px 8px;}
.section.section-gap{padding-top:72px;}
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px;}
.section-head h2{font-size:20px;font-weight:700;margin:0;}
.section-head a{font-size:13px;color:var(--blue);font-weight:500;text-decoration:none;}
.section-head a:hover{text-decoration:underline;}
.section-head.center{flex-direction:column;align-items:center;justify-content:center;text-align:center;}
.page-eyebrow{color:var(--blue);font-size:12px;font-weight:700;letter-spacing:.04em;margin-bottom:0;}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-top:14px;}
#pickupGrid{grid-template-columns:repeat(auto-fit,minmax(220px,260px));justify-content:center;}
.quiz-result-grid{grid-template-columns:repeat(3,1fr);}
.quiz-result-grid .thumb-slot{aspect-ratio:2/1;}
.quiz-result-grid .card .name{line-height:1.3;margin-bottom:-4px;}
@media(max-width:640px){
  .quiz-result-grid{grid-template-columns:repeat(2,1fr);}
  #hobbyListGrid,#genreGrid,#childGrid{grid-template-columns:repeat(2,1fr);}
}

/* ---- Top page: 特集記事（3枚表示・右から左へ自動で1枚ずつスクロール） ---- */
.feature-carousel{overflow:hidden;margin:-6px -20px -20px;padding:6px 20px 20px;}
.feature-carousel-track{display:flex;gap:16px;}
.feature-carousel-card{flex:0 0 calc((100% - 32px)/3);aspect-ratio:2.6/1;}
@media(max-width:640px){.feature-carousel-card{flex:0 0 100%;}}

/* ---- 特集記事一覧ページ：トップページの特集記事枠と同じ比率・同じサイズ感のバナー ---- */
.featured-list-banner{aspect-ratio:2.6/1;width:100%;}
.intro-banner{max-width:700px;margin:0 auto;}
#featuredListGrid{grid-template-columns:repeat(3,1fr);}
@media(max-width:640px){#featuredListGrid{grid-template-columns:1fr;}}

/* ---- Top page: 絞り込んでみる の一覧を最初は2行だけ見せる ---- */
.grid-collapse{position:relative;overflow:hidden;max-height:640px;transition:max-height .3s ease;}
.grid-collapse.expanded{max-height:none;}
.grid-fade{
  position:absolute;left:0;right:0;bottom:0;height:140px;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:20px;
  background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, #fff 75%);
  pointer-events:none;
}
.grid-more-btn{
  pointer-events:auto;display:inline-block;background:#fff;border:1px solid var(--border);border-radius:20px;
  padding:11px 24px;font-size:14px;font-weight:500;font-family:inherit;color:var(--text);cursor:pointer;
  box-shadow:0 2px 10px rgba(32,33,36,.12);
}
.grid-more-btn:hover{background:rgba(26,115,232,.06);}

/* ---- Top page: news list (compact, one line per item) ---- */
.news-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--border);}
.news-list li{border-bottom:1px solid var(--border);margin:0;}
.news-list a{
  display:flex;align-items:center;gap:12px;padding:12px 4px;
  color:var(--text);text-decoration:none;
}
.news-list a:hover{background:rgba(26,115,232,.05);}
.news-list .news-row{display:flex;align-items:center;gap:12px;padding:12px 4px;color:var(--text);}
.news-list .news-date{font-size:12px;color:var(--text2);flex-shrink:0;font-variant-numeric:tabular-nums;}
.news-list .news-name{font-size:14px;font-weight:700;flex-shrink:0;}
.news-list .news-catch{
  font-size:13px;color:var(--text2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.news-badge{
  font-size:11px;font-weight:700;flex-shrink:0;padding:2px 8px;border-radius:10px;
}
.news-badge-article{background:rgba(26,115,232,.1);color:var(--blue);}
.news-badge-update{background:rgba(30,142,62,.1);color:var(--green);}
.news-badge-topic{background:rgba(249,171,0,.15);color:#a06800;}

.card{
  border:1px solid var(--border);border-radius:12px;padding:16px;
  text-decoration:none;color:var(--text);display:flex;flex-direction:column;gap:10px;
  transition:box-shadow .15s, transform .15s, background .15s;background:#fff;
}
.card.active:hover{background:rgba(26,115,232,.05);box-shadow:0 4px 14px rgba(32,33,36,.12);transform:translateY(-2px);}
.card.soon{opacity:.55;cursor:default;}

.thumb-slot{
  border:1.5px dashed var(--border);background:var(--surface);border-radius:10px;
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  font-size:22px;color:var(--text2);
}
/* 関連記事セクションのみ、写真枠の縦幅を通常の2/3程度に抑える */
#relatedGrid .thumb-slot{aspect-ratio:2/1;}
/* トップページの記事カード（ピックアップ・絞り込んでみる）は、写真枠の縦幅を少し抑える */
#pickupGrid .thumb-slot, #genreGrid .thumb-slot{aspect-ratio:3/2;}

.card .name{font-size:16px;font-weight:700;}
.card .catch{font-size:12.5px;color:var(--text2);line-height:1.6;margin:0;}
/* 「絞り込んでみる」「こんな趣味もいいかも？」の趣味名：2行になった時の行間と、名前の下の余白だけを詰める（写真との間隔は変えない） */
#pickupGrid .card .name, #genreGrid .card .name, #relatedGrid .card .name{line-height:1.3;margin-bottom:-6px;}

/* ---- Top page: ジャンルから探す（写真なし、タイトルと概文のみ） ---- */
.card.genre-card{padding:11px 18px;justify-content:center;gap:3px;}
.card.genre-card .name{font-size:16px;}
.card.genre-card .catch{font-size:12.5px;line-height:1.4;}

/* ---- Genre page ---- */
.genre-wrap{max-width:1040px;margin:0 auto;padding:0 24px 80px;}
.genre-wrap h1{font-size:32px;margin:24px 0 8px;}
.genre-wrap .lead{margin:0 0 8px;}

/* ---- Top page: ダーツで趣味（演出用ホイール＋ダーツ投擲） ---- */
.darts-mobile-break{display:none;}
@media(max-width:640px){
  .darts-mobile-break{display:inline;}
}
.darts-game{display:flex;flex-direction:column;align-items:center;margin-top:24px;gap:32px;}
.darts-play{display:flex;flex-direction:column;align-items:center;margin-top:32px;}
.darts-wheel-wrap{position:relative;top:-10px;width:180px;height:180px;margin:0 auto;}
.darts-wheel{
  width:100%;height:100%;border-radius:50%;
  background:conic-gradient(
    #669DF6 0deg 30deg, #EE675C 30deg 60deg, #FCC934 60deg 90deg, #57BB8A 90deg 120deg,
    #669DF6 120deg 150deg, #EE675C 150deg 180deg, #FCC934 180deg 210deg, #57BB8A 210deg 240deg,
    #669DF6 240deg 270deg, #EE675C 270deg 300deg, #FCC934 300deg 330deg, #57BB8A 330deg 360deg
  );
  border:6px solid #fff;box-shadow:0 4px 20px rgba(32,33,36,.18);
  transform:rotate(0deg);
}
.darts-wheel-hub{
  position:absolute;top:50%;left:50%;width:30px;height:30px;border-radius:50%;
  background:#fff;border:3px solid var(--border);transform:translate(-50%,-50%);
  box-shadow:0 1px 4px rgba(32,33,36,.15);
}
.darts-dart{
  position:absolute;top:50%;left:50%;line-height:1;
  transform:translate(90px,-112px) rotate(35deg) scale(.85);
  opacity:0;pointer-events:none;z-index:5;
}
.darts-dart.throwing{
  transition:transform .55s cubic-bezier(.25,.8,.35,1.15),opacity .15s ease;
  transform:translate(-50%,-50%) rotate(-35deg) scale(1);
  opacity:1;
}
.darts-controls{display:flex;gap:12px;margin-top:28px;}
.darts-stop-btn{background:var(--red);}
.darts-stop-btn:hover{background:#C5221F;}
.diagnosis-btn:disabled{opacity:.4;cursor:default;transform:none;background:var(--blue);}
.darts-stop-btn:disabled{background:var(--red);}
.darts-result{margin-top:0;width:100%;max-width:280px;text-align:center;}
.darts-result-heading{font-size:15px;color:var(--text2);margin-bottom:12px;}
.darts-result-grid{display:block;width:220px;margin:0 auto;}
.darts-result-grid .card{margin:0 auto;width:100%;}
.darts-result-grid .thumb-slot{aspect-ratio:2/1;}
.darts-result-grid .name{min-height:20px;line-height:1.3;}
.darts-result-grid .catch{min-height:40px;}
.darts-placeholder-card{cursor:default;}
.darts-placeholder-thumb{background:var(--border);border-style:solid;}
.darts-placeholder-mark{font-size:36px;font-weight:700;color:var(--text2);opacity:.65;}
/* ---- ダーツの結果表示：ポップイン＋光が横切る演出 ---- */
.darts-reveal{position:relative;overflow:hidden;animation:dartsPop .4s ease;}
.darts-reveal::after{
  content:"";position:absolute;top:-60%;left:-10%;width:35%;height:220%;
  background:linear-gradient(120deg, transparent, rgba(255,255,255,.95), transparent);
  opacity:0;pointer-events:none;
  animation:dartsShine .9s ease-out .05s forwards;
}
@keyframes dartsPop{
  0%{transform:scale(.92);opacity:0;}
  60%{transform:scale(1.03);opacity:1;}
  100%{transform:scale(1);}
}
@keyframes dartsShine{
  0%{transform:translateX(-40%) rotate(20deg);opacity:0;}
  15%{opacity:1;}
  70%{opacity:1;}
  100%{transform:translateX(500%) rotate(20deg);opacity:0;}
}
@media(min-width:860px){
  .darts-game{flex-direction:row;align-items:flex-start;justify-content:center;gap:64px;}
}