/* ============================================================
   Home (Top) — Light theme
   トップページ専用レイアウト。body.home でスコープ。
   色はサイト共通のライトパレット(style.css :root)を継承し、
   ここでは構造・装飾と一部のローカル変数のみ定義する。
   ============================================================ */

body.home{
  /* home専用のサイズ（角丸はやや大きめ）と補助変数 */
  --radius:18px; --radius-sm:12px;
  --accent-bright:var(--accent-light);
  --shadow:0 2px 14px rgba(20,28,60,.06);
  --shadow-lg:0 16px 44px rgba(20,28,60,.14);
  --mono:ui-monospace,'SF Mono','Menlo','Roboto Mono',monospace;
  --maxw:1180px;

  background:var(--bg);
  color:var(--text);
  background-image:
    radial-gradient(ellipse 60% 50% at 50% -8%,rgba(108,58,237,.06),transparent 65%),
    radial-gradient(ellipse 40% 40% at 92% 18%,rgba(7,135,90,.05),transparent 60%),
    radial-gradient(ellipse 45% 45% at 6% 30%,rgba(21,88,192,.05),transparent 60%);
  background-attachment:fixed;
}

/* ── Layout ── */
body.home .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ── Hero ── */
body.home .hero{
  position:relative;overflow:hidden;border-bottom:1px solid var(--border);text-align:center;
  padding:20px 24px 56px;
  background:
    radial-gradient(ellipse 55% 70% at 18% 8%,rgba(217,82,0,.06),transparent 60%),
    radial-gradient(ellipse 50% 65% at 50% -5%,rgba(108,58,237,.08),transparent 60%),
    radial-gradient(ellipse 55% 70% at 84% 12%,rgba(7,135,90,.06),transparent 60%),
    var(--surface);
}
/* spinning ring motif behind logo */
body.home .hero-ring{
  position:absolute;top:-180px;left:50%;width:660px;height:660px;margin-left:-330px;border-radius:50%;
  border:1.5px dashed rgba(108,58,237,.16);animation:home-spin 60s linear infinite;pointer-events:none
}
body.home .hero-ring::after{content:"";position:absolute;inset:70px;border-radius:50%;border:1px solid rgba(108,58,237,.10)}
body.home .hero-ring::before{content:"";position:absolute;inset:150px;border-radius:50%;
  background:radial-gradient(circle,rgba(108,58,237,.07),transparent 70%)}
@keyframes home-spin{to{transform:rotate(360deg)}}

body.home .hero-logo{width:min(820px,100%);max-width:100%;margin:0 auto 4px;position:relative;display:block;
  filter:drop-shadow(0 6px 22px rgba(108,58,237,.18))}
body.home .hero-tag{font-size:clamp(15px,2.4vw,19px);color:var(--text-soft);font-weight:700;
  max-width:640px;margin:0 auto 28px;position:relative}
body.home .hero-tag em{font-style:normal;color:var(--accent);font-weight:900}

body.home .hero-search{
  position:relative;display:flex;max-width:560px;margin:0 auto;
  background:#fff;border:1.5px solid var(--border);border-radius:999px;
  box-shadow:var(--shadow);overflow:hidden;transition:.18s
}
body.home .hero-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-glow),var(--shadow)}
body.home .hero-search input{flex:1;border:0;outline:0;padding:15px 22px;font-size:15px;background:transparent;color:var(--text)}
body.home .hero-search input::placeholder{color:var(--text-muted)}
body.home .hero-search button{border:0;background:linear-gradient(135deg,var(--accent),var(--accent-dark));
  color:#fff;font-weight:800;font-size:14.5px;padding:0 28px;cursor:pointer;transition:.18s}
body.home .hero-search button:hover{filter:brightness(1.08)}

/* ── Section frame ── */
body.home section.block{padding:56px 0 8px}
body.home .eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.22em;color:var(--accent);
  font-weight:700;text-transform:uppercase}
body.home .sec-head{display:flex;align-items:baseline;justify-content:center;gap:14px;margin-bottom:6px}
body.home .sec-title{font-size:clamp(22px,3.4vw,28px);font-weight:900;letter-spacing:.02em;color:var(--text);text-align:center}
/* タイトル下のアクセント下線 */
body.home .sec-title::after{content:"";display:block;width:46px;height:3px;margin:10px auto 0;border-radius:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent-light))}
body.home .sec-sub{color:var(--text-soft);font-size:14px;line-height:1.7;margin:10px auto 28px;max-width:600px;text-align:center}

/* ── Section CTA button (above each section) ── */
body.home .section-cta{
  /* --cta:強調色RGB / --cta-strong:濃い見出し色（各ボタンで上書き） */
  --cta:108,58,237; --cta-strong:#4c1d95;
  position:relative;display:flex;align-items:center;justify-content:center;gap:16px;margin:0 0 26px;padding:26px 56px;
  border-radius:var(--radius);border:1.5px solid rgba(var(--cta),.26);text-align:center;
  background:linear-gradient(120deg,rgba(var(--cta),.16),rgba(var(--cta),.05));
  box-shadow:var(--shadow);transition:.2s
}
body.home .section-cta:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:rgba(var(--cta),.6);
  background:linear-gradient(120deg,rgba(var(--cta),.24),rgba(var(--cta),.08))}
body.home .section-cta-l{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}
body.home .section-cta-ico{font-size:26px;flex:none}
body.home .section-cta-t{display:block;font-size:clamp(21px,3.2vw,28px);font-weight:900;letter-spacing:.04em;line-height:1.2;color:var(--cta-strong)}
body.home .section-cta-s{display:block;font-size:clamp(12.5px,1.4vw,14px);font-weight:600;color:var(--text-soft)}
body.home .section-cta-arrow{position:absolute;right:28px;top:50%;transform:translateY(-50%);font-size:24px;font-weight:700;color:rgb(var(--cta));flex:none;transition:transform .2s}
body.home .section-cta:hover .section-cta-arrow{transform:translate(4px,-50%)}

/* 各ボタンの配色 */
body.home .section-cta--beys{--cta:124,58,237;--cta-strong:#4c1d95}     /* 紫 */
body.home .section-cta--parts{--cta:21,110,212;--cta-strong:#114a9e}    /* 青 */
body.home .section-cta--colors{--cta:200,70,150;--cta-strong:#9d2c6e}   /* マゼンタ＋虹背景 */
body.home .section-cta--colors{
  background:linear-gradient(120deg,rgba(217,82,0,.13),rgba(212,160,23,.11) 28%,rgba(7,135,90,.11) 52%,rgba(21,88,192,.11) 76%,rgba(112,32,204,.14));
  border-color:rgba(112,32,204,.26)
}
body.home .section-cta--colors:hover{
  background:linear-gradient(120deg,rgba(217,82,0,.2),rgba(212,160,23,.17) 28%,rgba(7,135,90,.17) 52%,rgba(21,88,192,.17) 76%,rgba(112,32,204,.22));
  border-color:rgba(112,32,204,.5)
}
/* 「カラー別一覧」のタイトルは虹色グラデ文字 */
body.home .section-cta--colors .section-cta-t{
  background:linear-gradient(90deg,#d95200,#d4a017 25%,#07875a 50%,#1558c0 72%,#7020cc);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent
}

/* ── Series rail (シリーズから探す) ── */
body.home .ser-rail{position:relative}
body.home .ser-line{position:absolute;left:0;right:0;top:18px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--s-bakuten),var(--s-metal) 34%,var(--s-burst) 66%,var(--s-x));
  opacity:.55}
body.home .ser-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;position:relative}
body.home .ser{position:relative;padding-top:40px}
body.home .ser-node{position:absolute;top:11px;left:0;width:16px;height:16px;border-radius:50%;
  background:#fff;border:3px solid var(--c);box-shadow:0 0 0 4px var(--bg)}
body.home .ser-no{position:absolute;top:6px;left:26px;font-family:var(--mono);font-size:13px;font-weight:700;color:var(--c)}

body.home .ser-card{
  position:relative;display:block;overflow:hidden;height:100%;min-height:172px;
  padding:20px 120px 20px 20px;border-radius:var(--radius);
  background:var(--card);border:1px solid var(--border);border-top:3px solid var(--c);
  box-shadow:var(--shadow);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease
}
body.home .ser-card::after{content:"";position:absolute;right:-34px;bottom:-34px;width:190px;height:190px;
  border-radius:50%;background:radial-gradient(circle,var(--tint),transparent 68%);pointer-events:none}
body.home .ser-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-color:var(--c)}
/* 背景透過済みの正方形ベイ画像を、右下からはみ出して自然に配置 */
body.home .ser-img{
  position:absolute;right:-20px;bottom:-22px;width:138px;height:138px;object-fit:contain;
  opacity:.95;pointer-events:none;filter:drop-shadow(0 6px 14px rgba(20,28,60,.18));
  transition:opacity .22s ease,transform .22s ease;z-index:1
}
body.home .ser-card:hover .ser-img{opacity:1;transform:scale(1.07) rotate(8deg)}
body.home .ser-year{position:relative;z-index:2;font-family:var(--mono);font-size:12px;color:var(--c);font-weight:700}
body.home .ser-name{position:relative;z-index:2;font-size:16px;font-weight:900;margin:6px 0 6px;letter-spacing:.01em;line-height:1.35;color:var(--text)}
body.home .ser-desc{position:relative;z-index:2;font-size:12.5px;color:var(--text-soft);line-height:1.6}
body.home .ser-go{position:relative;z-index:2;display:inline-block;margin-top:12px;font-size:12.5px;font-weight:800;color:var(--c)}

/* ── Category grid（項目ごとに色分け・中央寄せ） ── */
body.home .cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
body.home .cat{
  --cat:108,58,237;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  text-align:center;min-height:84px;
  background:linear-gradient(135deg,rgba(var(--cat),.15),rgba(var(--cat),.05));
  border:1.5px solid rgba(var(--cat),.32);
  border-radius:var(--radius);padding:18px 16px;transition:.18s;box-shadow:var(--shadow);
  text-decoration:none;color:var(--text)
}
body.home .cat:hover{
  transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:rgba(var(--cat),.65);
  background:linear-gradient(135deg,rgba(var(--cat),.24),rgba(var(--cat),.09))
}
body.home .cat-name{font-size:16px;font-weight:900;line-height:1.3;color:rgb(var(--cat))}
body.home .cat-sub{font-size:12px;color:var(--text-soft);line-height:1.4}

/* ── More / discover ── */
body.home .more-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
body.home .more{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px;transition:.18s;display:flex;flex-direction:column;gap:4px;box-shadow:var(--shadow)}
body.home .more:hover{border-color:var(--border-hover);box-shadow:var(--shadow-lg);transform:translateY(-3px);background:var(--card-hover)}
body.home .more-t{font-size:14.5px;font-weight:800;color:var(--text)}
body.home .more-s{font-size:11.5px;color:var(--text-muted)}

/* ── Guide / Notes (使い方・注意点) ── */
body.home .guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:stretch}
body.home .guide{
  --g:108,58,237;
  position:relative;display:flex;flex-direction:column;height:100%;
  padding:24px 24px 22px;border-radius:var(--radius);
  background:var(--card);border:1px solid var(--border);border-top:3px solid rgb(var(--g));
  box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease
}
body.home a.guide:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgb(var(--g))}
body.home .guide--usage{--g:124,58,237}   /* 紫 */
body.home .guide--note{--g:200,120,7}      /* アンバー（注意色）*/
body.home .guide-badge{
  display:inline-flex;align-self:flex-start;gap:6px;font-size:12px;font-weight:800;letter-spacing:.02em;
  color:rgb(var(--g));background:rgba(var(--g),.10);border:1px solid rgba(var(--g),.24);
  padding:5px 12px;border-radius:999px
}
body.home .guide-title{font-size:clamp(17px,2.4vw,20px);font-weight:900;color:var(--text);margin:14px 0 6px;letter-spacing:.01em}
body.home .guide-desc{font-size:13px;color:var(--text-soft);line-height:1.7;margin:0 0 12px}
body.home .guide-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
body.home .guide-list li{position:relative;padding-left:20px;font-size:12.5px;color:var(--text-soft);line-height:1.6}
body.home .guide-list li::before{content:"";position:absolute;left:2px;top:8px;width:7px;height:7px;border-radius:50%;background:rgb(var(--g));opacity:.7}
body.home .guide-go{margin-top:auto;padding-top:14px;font-size:13px;font-weight:800;color:rgb(var(--g))}

/* ブログ・小ネタ／管理人情報／フッターは再設計前の元デザインに戻したため、
   それらのスタイルは style.css 側（.home-blog-section / .admin-card / 元フッター）を使用する。 */

/* ── Responsive ── */
@media(max-width:880px){
  body.home .cat-grid{grid-template-columns:repeat(3,1fr)}
  body.home .ser-grid{grid-template-columns:repeat(2,1fr);gap:26px 16px}
  body.home .ser-line{display:none}
  body.home .more-grid{grid-template-columns:repeat(2,1fr)}
  body.home .guide-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  body.home .cat-grid{grid-template-columns:repeat(2,1fr)}
  body.home .ser-grid{grid-template-columns:1fr;gap:14px}
  body.home .section-cta-s{display:none}
}
@media(prefers-reduced-motion:reduce){
  body.home .hero-ring{animation:none}
}