@charset "UTF-8";
/* menespark LP - lp_ranking.css
   本体は縦に並べたセクション画像。CSSはガワ（ヘッダ・エリア選択・CTA・追従バー）だけ。
   画像側の世界観に合わせて黒×ゴールド基調。 */

:root{
  --lpr-bg:      #0b0709;   /* 画像の下端に合わせた黒 */
  --lpr-panel:   #150e11;
  --lpr-line:    rgba(201,168,108,.28);
  --lpr-gold:    #c9a86c;
  --lpr-gold-lt: #e6d3a8;
  --lpr-txt:     #f4efe8;
  --lpr-sub:     #b9aba0;
  --lpr-red:     #1e0204;   /* 3.webp 下端の実測値。継ぎ目を消すため */
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--lpr-bg);
  color:var(--lpr-txt);
  font-family:"Noto Sans JP","Zen Kaku Gothic New",sans-serif;
  line-height:1.7;
  -webkit-text-size-adjust:100%;
}

.lp-wrap{ width:min(100%,1100px); margin-inline:auto; padding-inline:16px; }

/* ---------- ヘッダ ---------- */
.lp-hdr{
  position:sticky; top:0; z-index:30;
  background:rgba(11,7,9,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--lpr-line);
}
.lp-nav{ display:flex; align-items:center; justify-content:space-between; height:56px; }
.lp-brand{
  color:var(--lpr-txt); text-decoration:none;
  font-weight:500; font-size:18px; letter-spacing:.02em;
}
.lp-brand b{ color:var(--lpr-gold); font-weight:700; }
.lp-nav__cta{
  display:inline-block; padding:8px 16px; border-radius:999px;
  background:linear-gradient(180deg,var(--lpr-gold-lt),var(--lpr-gold));
  color:#2a1c10; text-decoration:none;
  font-weight:700; font-size:13px; white-space:nowrap;
}

/* ---------- 本文（セクション画像） ---------- */
.lp-main{ width:min(100%,860px); margin-inline:auto; }

/* 画像は隙間なく縦に並べる。vertical-align を消さないと下に隙間が出る。 */
.lp-shot{ display:block; width:100%; height:auto; vertical-align:top; }

/* ---------- エリア選択 ---------- */
.lp-area{
  padding:32px 16px 40px;
  background:linear-gradient(180deg,var(--lpr-red) 0%,var(--lpr-bg) 30%);
}
.lp-area__ttl{
  margin:0 0 20px;
  font-family:"Zen Kaku Gothic New",sans-serif;
  font-size:19px; font-weight:900; text-align:center; letter-spacing:.04em;
}
.lp-area__ttl::after{
  content:""; display:block; width:44px; height:2px; margin:10px auto 0;
  background:linear-gradient(90deg,transparent,var(--lpr-gold),transparent);
}

.lp-blocks{ display:flex; flex-direction:column; gap:10px; }

.lp-block{
  border:1px solid var(--lpr-line); border-radius:10px;
  background:var(--lpr-panel); overflow:hidden;
}
.lp-block__btn{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  width:100%; padding:15px 16px;
  background:none; border:0; cursor:pointer;
  color:var(--lpr-txt); font:inherit; font-weight:700; font-size:15px;
  text-align:left;
}
.lp-block__mark{
  flex:none; width:9px; height:9px;
  border-right:2px solid var(--lpr-gold); border-bottom:2px solid var(--lpr-gold);
  transform:rotate(45deg) translateY(-2px);
  transition:transform .2s;
}
.lp-block__btn[aria-expanded="true"] .lp-block__mark{
  transform:rotate(-135deg) translateY(-2px);
}

.lp-block__body{
  display:grid; grid-template-columns:repeat(2,1fr); gap:1px;
  padding:1px; background:var(--lpr-line);
  border-top:1px solid var(--lpr-line);
}
.lp-pref{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:13px 14px;
  background:var(--lpr-bg); color:var(--lpr-txt); text-decoration:none;
}
.lp-pref:active{ background:#1d1418; }
.lp-pref__name{ font-size:14px; font-weight:500; }
.lp-pref__num{ font-size:11px; color:var(--lpr-sub); white-space:nowrap; }

/* ---------- CTA ---------- */
.lp-cta{ margin-top:26px; text-align:center; }
.lp-btn{
  display:inline-block; min-width:260px; padding:16px 28px; border-radius:999px;
  background:linear-gradient(180deg,var(--lpr-gold-lt),var(--lpr-gold));
  box-shadow:0 6px 18px rgba(0,0,0,.45);
  color:#2a1c10; text-decoration:none;
  font-weight:900; font-size:16px; letter-spacing:.03em;
}
.lp-btn--sm{ min-width:0; width:100%; padding:13px 20px; font-size:15px; }
.lp-cta__sub{ margin:10px 0 0; color:var(--lpr-sub); font-size:12px; }

/* ---------- 追従CTA（SPのみ） ---------- */
.lp-fixed{
  position:fixed; left:0; right:0; bottom:0; z-index:40;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(11,7,9,.94);
  backdrop-filter:blur(8px);
  border-top:1px solid var(--lpr-line);
}
.lp-fixed[hidden]{ display:none; }

/* ---------- フッタ ---------- */
.lp-foot{
  padding:26px 0 84px; border-top:1px solid var(--lpr-line);
  text-align:center; font-size:12px;
}
.lp-foot a{ color:var(--lpr-gold); text-decoration:none; }
.lp-foot__c{ margin:8px 0 0; color:var(--lpr-sub); }

/* ---------- PC ---------- */
@media (min-width:768px){
  .lp-area{ padding:44px 24px 56px; }
  .lp-area__ttl{ font-size:23px; }
  .lp-blocks{
    display:grid; grid-template-columns:repeat(2,1fr);
    align-items:start; gap:12px;
  }
  .lp-block__body{ grid-template-columns:repeat(2,1fr); }
  .lp-fixed{ display:none; }   /* PCはヘッダのCTAで足りる */
  .lp-foot{ padding-bottom:30px; }
}

/* hidden 属性が display:grid に負けるので明示的に打ち消す */
.lp-block__body[hidden]{ display:none; }