/* +81 HIPHOP トップページ専用（整頓版） */

/* ------------------------- */
/* 基本設定 */
/* ------------------------- */
body{
  background:#000; color:#fff;
  font-family:'Helvetica Neue',sans-serif;
  margin:0; padding:0;
}
a{ color:#c39eff; text-decoration:none; }
a:hover{ opacity:.8; }

/* =========================
   トップ幅の基準はここで一元管理
========================= */
:root{ --home-max: 960px; --home-pad: 16px; }

/* =========================
   トップページのレイアウト調整（.home で限定）
========================= */
/* 1) 2カラム→1カラム化（本文を全幅に） */
.home .content-in{ display:block !important; }   /* Cocoonのflex解除 */
.home #main{ width:100% !important; }
.home #sidebar{ display:none !important; }       /* ← 全ページでは隠さない */

/* 2) 親ラッパの左右paddingが残っている場合の最小限リセット */
.home #content-in.wrap{ padding-left:0 !important; padding-right:0 !important; }

/* 3) RECENT/スライダー と CONTENTS を同じ“器”に揃える */
.home .recent-section,
.home .top-swiper,
.home #contents.contents-section{
  max-width:var(--home-max);
  margin-inline:auto;
  padding-inline:0;           /* PCは左右0 */
  box-sizing:border-box;
}
@media (max-width:1024px){
  .home .recent-section,
  .home .top-swiper,
  .home #contents.contents-section{
    padding-inline:var(--home-pad);   /* タブレット以下は少し余白 */
  }
}

/* =========================
   CONTENTS グリッド
========================= */
#contents .contents-grid{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:28px;
}
@media (max-width:1024px){ #contents .contents-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:640px){  #contents .contents-grid{ grid-template-columns:1fr; gap:20px; } }

/* 古いfloat等の名残を無効化（崩れ防止） */
#contents .contents-grid > *{
  float:none !important; width:auto !important; max-width:none !important;
}

/* 見出しの左インデント抑止 */
#contents.contents-section > h2{
  margin-left:0 !important; padding-left:0 !important; text-align:center;
}


/* ===== Masthead (top page only, single underscore, centered) ===== */
.page-template-page-top .site-masthead{
  background:#111; color:#eee; width:100%;
}

.page-template-page-top .site-masthead .site-mark{
  text-align:center;
  font-weight:800;
  line-height:1;
  margin: 12px 0 8px;
}

.page-template-page-top .site-masthead_line{
  display:block; height:1px; border:0;
  background:rgba(255,255,255,.14);
  margin: 8px 0 16px;
}

/* ナビを横並び・中央寄せ（テーマ側の縦並び/floatを無効化） */
.page-template-page-top .site-masthead_nav{ width:100%; }
.page-template-page-top .site-masthead_nav > ul{
  display:flex !important;
  justify-content:center !important;
  align-items:center;
  gap:48px;
  margin:0 auto;
  padding:0;
  list-style:none;
}
.page-template-page-top .site-masthead_nav > ul > li{ margin:0; list-style:none; float:none !important; }
.page-template-page-top .site-masthead_nav a{
  color:#fff; text-decoration:none;
  font-weight:700; letter-spacing:.04em;
  white-space:nowrap;
}

/* === SPでメニューを1行維持 === */
.page-template-page-top .site-masthead_nav > ul { flex-wrap: nowrap; }
.page-template-page-top .site-masthead_nav a { white-space: nowrap; }

/* 幅に応じて字間・サイズ・ギャップを縮小 */
@media (max-width: 768px){
  .page-template-page-top .site-masthead_nav > ul{ gap: 36px; }
  .page-template-page-top .site-masthead_nav a{ font-size: 13px; letter-spacing: .03em; }
}
@media (max-width: 480px){
  .page-template-page-top .site-masthead_nav > ul{ gap: 22px; }
  .page-template-page-top .site-masthead_nav a{ font-size: 12px; letter-spacing: .02em; }
}
@media (max-width: 360px){
  .page-template-page-top .site-masthead_nav > ul{ gap: 14px; }
  .page-template-page-top .site-masthead_nav a{ font-size: 11.5px; letter-spacing: .01em; }
}



/* ===== VIEW MORE button ===== */
.contents-more{
  display:block;
  margin: 36px auto 0;
  padding: 12px 28px;
  border: 1px solid #666;
  background: transparent;
  color:#fff;
  font-weight:600;
  letter-spacing:.06em;
  border-radius:6px;
  transition: border-color .2s, color .2s, transform .15s, box-shadow .2s;
}
.contents-more:hover{
  border-color:#c39eff;
  color:#c39eff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.contents-more:active{
  transform: translateY(0);
  box-shadow:none;
}
.contents-more[disabled],
.contents-more.is-loading{
  opacity:.45;
  cursor:not-allowed;
  pointer-events:none;
}