@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@500;600;700&display=swap');

/* =====================================================================
   youpace /media/ (ライバーラボ) — 脱SANGO 上書き層
   土台(サーバー上のSANGOのCSS)の後に読み込まれ、上書きする。
   方針: 装飾を削ってシンプルに（影・角丸・色帯・ポップ感を抑える）
   少しずつ進める。各ステップは見出しコメントで区切る。
   バージョン: v1  (2026-06-22 Step1: 装飾削減の第一歩)
   ===================================================================== */

/* ---- Step1-a: 影をやめる(コンテンツ領域の箱・カード・関連記事) ---- */
.sng-box,
.cardtype__article,
.cardtype__link,
.related-posts .related-entry-card,
.kanren,
.entry-card,
.a-wrap,
#inner-content .wp-block-group.has-background {
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

/* ---- Step1-b: 角丸を抑える(丸すぎる→軽い4px) ---- */
.sng-box,
.cardtype__article,
.cardtype__img img,
.related-posts .related-entry-card,
.entry-card,
.kanren {
  border-radius: 4px !important;
}

/* ---- Step1-c: 装飾見出しをフラット化 ----
   .sgb-heading__inner--type1/type4 等が背景色・枠・グラデを持つ。
   背景と枠を外し、黒文字＋左の細いアクセント罫だけの落ち着いた見出しに。 */
.sgb-heading__inner[class*="--type"] {
  background: none !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #1a1a1a !important;
  padding: .1em 0 .35em .7em !important;
  border-left: 4px solid #2b2b2b !important;
  border-radius: 0 !important;
}
/* h3相当(type4等)は少し弱く */
.sgb-heading__inner--type4 {
  border-left-width: 3px !important;
  border-left-color: #9aa0a6 !important;
}

/* ---- Step1-d: ボックスの背景色帯を淡く、枠は細い罫線に ---- */
.sng-box {
  background-color: #fafafa !important;
  border: 1px solid #e6e6e6 !important;
}

/* ---- Step1-e: カード(トップ一覧)を罫線ベースの素朴な見た目に ---- */
.cardtype__article {
  border: 1px solid #ececec !important;
  background: #fff !important;
}

/* ---- Step1-f: 右下の丸い浮遊ボタン(FAB)を非表示 ---- */
.fab-btn.extended-fab,
.go-to-top-fb,
#fixed-bottom-menu .fab-btn {
  display: none !important;
}

/* =====================================================================
   Step2 (2026-06-22): 記事ページをワンカラム化
   body.single(個別記事)限定。サイドバーを消し、本文を中央寄せ1カラムに。
   全幅は間延びするので読みやすい横幅にとどめる。
   ===================================================================== */
body.single #sidebar1 {
  display: none !important;
}
body.single #main {
  width: 100% !important;
  max-width: 840px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
}
/* グリッドのガター由来のズレを防ぐ保険 */
body.single #inner-content.wrap {
  display: block !important;
}

/* =====================================================================
   Step3 (2026-06-22): 本体 youpace.co.jp とトンマナ統一 + ヘッダー/フッター
   本体= 游ゴシック / 英字Dosis / 白黒グレー基調+ミント#c8f8ef・コーラル#f69b91
   ===================================================================== */

/* --- SANGO標準のグローバルヘッダー/フッターを隠す(記事タイトル部.article-headerは残す) --- */
header.header,
footer.footer,
#footer-menu,
#footer-widgets {
  display: none !important;
}

/* --- トーン: 本文を游ゴシックへ。SANGOの丸ゴシック見出し(dfont)も寄せる --- */
body,
#main, .article, .entry-content,
.dfont, #logo, .widgettitle, .sgb-heading__inner {
  font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic",
    "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif !important;
  letter-spacing: .04em;
}
.yp-en { font-family: "Dosis", sans-serif !important; font-weight: 600; }

/* ===== YOUPACE ヘッダー ===== */
.yp-header {
  background: #fff;
  border-bottom: 1px solid #ececec;
  position: sticky; top: 0; z-index: 9999;
}
.yp-header__inner {
  max-width: 1120px; margin: 0 auto;
  display: flex; align-items: center; gap: 1.2em;
  padding: .55em 1.1em;
}
.yp-header__logo img { height: 34px; width: auto; display: block; }
.yp-nav { display: flex; gap: 1.15em; margin-left: auto; flex-wrap: wrap; }
.yp-nav a {
  display: flex; flex-direction: column; align-items: center;
  text-decoration: none; color: #222; line-height: 1.25;
}
.yp-nav .yp-ja { font-size: 13px; }
.yp-nav .yp-en { font-size: 10px; color: #9aa0a6; letter-spacing: .1em; }
.yp-nav a:hover .yp-ja { color: #f69b91; }
.yp-header__cta {
  display: flex; flex-direction: column; align-items: center; line-height: 1.15;
  background: #f69b91; color: #fff !important; text-decoration: none;
  padding: .5em 1.15em; border-radius: 4px;
}
.yp-header__cta .yp-en { font-size: 10px; color: #fff; }

/* ハンバーガー（PCでは非表示・スマホで表示） */
.yp-nav-toggle { display: none; }
.yp-burger { display: none; }

/* ===== YOUPACE フッター（本体youpace.co.jpを忠実再現）=====
   珊瑚ピンク背景#F8B2AD + 巨大円オーバーレイ + 白ロゴ/タグライン/SNS + 7カラム白罫線ナビ */
.yp-footer {
  position: relative; overflow: hidden;
  background: rgba(248, 178, 173, 0.9);
  padding: 60px 20px 40px; margin-top: 40px;
  border: none;
}
.yp-footer::before {
  content: ''; position: absolute; left: -6.5%; bottom: -6.5%;
  width: 300%; height: 300%; background: #F8B2AD; border-radius: 50%; z-index: 0;
}
.yp-footer__inner { position: relative; z-index: 1; max-width: 1300px; margin: 0 auto; }
.yp-footer, .yp-footer * { color: #fff; }
.yp-footer__head { display: flex; align-items: flex-start; margin-bottom: 50px; }
.yp-footer__logo img {
  width: 200px; height: auto; display: block;
  filter: brightness(0) invert(1);   /* ロゴを白に */
}
.yp-footer__tagline { font-size: 1.5em; font-weight: 700; line-height: 1.35; margin: 0 0 0 50px; }
.yp-footer__sns { list-style: none; display: flex; gap: 16px; margin-left: auto; padding: 0; align-items: center; }
.yp-footer__sns a { display: inline-flex; }
.yp-footer__sns svg { width: 22px; height: 22px; fill: #fff; }
.yp-footer__sitemap ul { list-style: none; display: flex; flex-wrap: wrap; column-gap: 30px; padding: 0; margin: 0; }
.yp-footer__sitemap li { width: calc((100% - 180px) / 7); border-top: solid 1px #fff; padding-top: 14px; margin-bottom: 10px; }
.yp-footer__sitemap li.yp-footer__contact { margin-left: auto; margin-top: 30px; }
.yp-footer__sitemap a { text-decoration: none; display: block; }
.yp-footer__sitemap .t { display: block; font-weight: 700; font-size: 14px; line-height: 1.4; }
.yp-footer__sitemap .en { display: block; font-family: "Dosis", sans-serif; font-size: 11px; letter-spacing: .06em; margin-top: 4px; opacity: .9; }
.yp-footer__sitemap a:hover { opacity: .5; }
.yp-footer__copy { text-align: center; font-family: "Dosis", sans-serif; font-size: 12px; margin-top: 50px; }

/* ===== モバイル：ハンバーガーメニュー ===== */
@media (max-width: 820px) {
  .yp-header__inner { flex-wrap: nowrap; align-items: center; gap: .6em; }
  .yp-header__brand { margin-right: auto; }

  /* 黒い丸ハンバーガーボタン（本体踏襲） */
  .yp-burger {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 50%; background: #14142b;
    cursor: pointer; flex: 0 0 auto; gap: 5px;
  }
  .yp-burger span {
    display: block; width: 22px; height: 2px; background: #fff;
    transition: transform .25s ease, opacity .25s ease;
  }
  /* 開いたら×に */
  .yp-nav-toggle:checked ~ .yp-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .yp-nav-toggle:checked ~ .yp-burger span:nth-child(2) { opacity: 0; }
  .yp-nav-toggle:checked ~ .yp-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* ナビはドロップダウン化（既定は閉じる） */
  .yp-nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: #fff; border-top: 1px solid #ececec;
    box-shadow: 0 10px 24px rgba(0,0,0,.10); padding: 6px 0; margin: 0;
    z-index: 9998;
  }
  .yp-nav-toggle:checked ~ .yp-nav { display: flex; }
  .yp-nav a {
    width: 100%; padding: 15px 22px; font-size: 15px;
    border-bottom: 1px solid #f2f2f2;
  }
  .yp-nav a:last-child { border-bottom: none; }

  /* ヘッダーのJOINボタンはスマホでは隠す（フッターにJOIN YOUPACEあり） */
  .yp-header__cta { display: none; }
}

/* ---- Step3-b (2026-06-22): ブランド表記「ライバーラボ powered by YOUPACE」 ---- */
.yp-header__brand {
  display: flex; flex-direction: column; text-decoration: none; line-height: 1.1;
}
.yp-brand__name {
  font-size: 19px; font-weight: 700; color: #222; letter-spacing: .04em;
}
.yp-brand__by {
  display: flex; align-items: center; gap: .35em; margin-top: 3px;
  font-size: 10px; color: #9aa0a6; font-family: "Dosis", sans-serif; letter-spacing: .06em;
}
.yp-brand__logo { height: 11px; width: auto; display: inline-block; vertical-align: middle; }
.yp-footer__copy .yp-brand__name-sm { font-weight: 700; color: #666; }
@media (max-width: 820px){ .yp-brand__name{ font-size: 17px; } }

/* ---- Step3-c (2026-06-22): ライバーラボ ロゴ画像を使用 ---- */
.yp-brand__img {
  height: 30px; width: auto; display: block;
}
.yp-header__brand .yp-brand__by { margin-top: 4px; }
@media (max-width: 820px){ .yp-brand__img { height: 26px; } }

/* ---- Step3-d (2026-06-22): powered by YOUPACE を独立リンク化 ---- */
.yp-brand__home { display: block; text-decoration: none; }
a.yp-brand__by { text-decoration: none; cursor: pointer; }
a.yp-brand__by:hover { color: #f69b91; }

/* ---- Step3-e (2026-06-22): ヘッダーナビを本体youpace.co.jpに合わせる ----
   日本語のみ・太字ゴシック・黒・1行・広めの字間（英語サブラベル廃止） */
.yp-nav { gap: 1.7em; align-items: center; }
.yp-nav a {
  display: inline-block; flex-direction: row;
  font-weight: 700; font-size: 15px; color: #1a1a1a; letter-spacing: .06em;
  line-height: 1.4;
}
.yp-nav a:hover { color: #f69b91; }
@media (max-width: 820px){
  .yp-nav { gap: .7em 1.1em; }
  .yp-nav a { font-size: 13px; }
}

/* ---- Step3-f (2026-06-22): コンテンツ内の装飾を本体トンマナへ ----
   ピンク帯ウィジェット見出し→フラット / 青いカードリンク→落ち着いた黒 */
.widgettitle {
  color: #1a1a1a !important;
  background-color: transparent !important;
  border: none !important;
  border-bottom: 2px solid #f69b91 !important;
  border-radius: 0 !important;
  padding: .1em 0 .4em !important;
  box-shadow: none !important;
}
.widgettitle.has-fa-before:before { color: #f69b91 !important; }

/* カード/ウィジェット/関連記事の青リンク→黒、ホバーでコーラル */
.cardtype__link,
.cardtype__article-info a,
.widget a, .blogcard a, .blog-card a,
.related-entry-card a, .kanren a {
  color: #1a1a1a !important;
}
.cardtype__link:hover,
.widget a:hover, .blogcard a:hover,
.related-entry-card a:hover { color: #f69b91 !important; }

/* カードのサムネ帯/枠の角丸・影もうっすらに(Step1の補強) */
.cardtype__article { box-shadow: none !important; }

/* ---- Step3-g (2026-06-22): PRIME募集ウィジェットはバナー画像だけ表示 ----
   タイトル「PRIME所属ライバー募集中！」と白枠を消す（id=custom_html-7 / -14） */
#custom_html-7 > .widgettitle,
#custom_html-14 > .widgettitle { display: none !important; }
#custom_html-7, #custom_html-14 {
  border: none !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
#custom_html-7 .wp-block-image, #custom_html-14 .wp-block-image,
#custom_html-7 figure, #custom_html-14 figure { margin: 0 !important; }

/* ===== フッター モバイル ===== */
@media (max-width: 820px) {
  .yp-footer__head { flex-wrap: wrap; }
  .yp-footer__logo img { width: 150px; }
  .yp-footer__tagline { margin: 16px 0 0; font-size: 1.25em; width: 100%; }
  .yp-footer__sns { margin: 20px 0 0; width: 100%; }
  .yp-footer__sitemap li { width: calc((100% - 30px) / 2); }
  .yp-footer__sitemap li.yp-footer__contact { margin-left: 0; margin-top: 10px; }
}

/* ---- Step3-h (2026-06-22): サイドバーのおすすめ記事ウィジェット2つを削除 ----
   custom_html-2(Pococha収益) / custom_html-15(人気ライバーのノウハウ) */
#custom_html-2,
#custom_html-15 { display: none !important; }

/* ---- Step3-i (2026-06-22): サイドバー「人気記事」ウィジェット ---- */
.yp-popular .widgettitle { margin: 0 !important; padding: 14px 14px 12px !important; }
.yp-popular__list { list-style: none; margin: 0; padding: 4px 14px 10px; }
.yp-popular__list li { border-bottom: 1px solid #eee; }
.yp-popular__list li:last-child { border-bottom: none; }
.yp-popular__list a {
  display: block; padding: 11px 0; color: #1a1a1a !important;
  text-decoration: none; font-size: 13.5px; line-height: 1.55;
}
.yp-popular__list a:hover { color: #f69b91 !important; }

/* ---- Step3-j (2026-06-22): ページネーションをトンマナ(コーラル)へ ---- */
.pagination .page-numbers {
  color: #f69b91 !important;
  border-color: #f4c9c2 !important;
}
.pagination .page-numbers.current {
  background: #f69b91 !important;
  color: #fff !important;
  border-color: #f69b91 !important;
}
.pagination a.page-numbers:hover {
  background: #fdeceA !important;
  color: #f69b91 !important;
}
.pagination .page-numbers.dots { color: #c8c8c8 !important; background: none !important; }
.pagination .next, .pagination .prev { color: #f69b91 !important; }

/* ---- Step4 (2026-06-22): 終了サービス記事の冒頭「終了告知＋代替」ボックス ---- */
.yp-ended {
  border: 1px solid #f4c9c2; background: #fff6f4; border-left: 4px solid #f69b91;
  border-radius: 4px; padding: 16px 18px; margin: 0 0 24px;
}
.yp-ended__head { font-weight: 700; color: #c0473a; margin: 0 0 8px; font-size: 15px; line-height: 1.5; }
.yp-ended__body { margin: 0 0 8px; font-size: 14px; line-height: 1.7; }
.yp-ended__alts { margin: 0; padding-left: 1.2em; }
.yp-ended__alts li { margin: 5px 0; line-height: 1.6; }
.yp-ended__alts a { color: #1a1a1a; font-weight: 700; text-decoration: none; }
.yp-ended__alts a:hover { color: #f69b91; text-decoration: underline; }

/* ---- Step5 (2026-06-23): 静的化で機能しない検索・コメントを非表示 ---- */
.header-search, .searchform, .search-form,
.wp-block-search, .widget_search { display: none !important; }
#comments, #comment-area, .comments-area,
#respond, .comment-respond, .comment-form, .commentbox { display: none !important; }

/* ---- Step6 (2026-06-23): トップ＝ライバーの教科書(STEP別ガイド) ---- */
.yp-guide { margin: 0 0 10px; }
.yp-guide__intro { text-align: center; padding: 4px 0 30px; }
.yp-guide__intro h2 { font-size: 1.7em; font-weight: 700; margin: 0 0 12px; color: #1a1a1a; }
.yp-guide__intro p { color: #555; font-size: 14px; line-height: 1.85; margin: 0; }
.yp-step { margin: 0 0 30px; }
.yp-step__head { display: flex; align-items: center; gap: 12px; border-bottom: 2px solid #f69b91; padding-bottom: 10px; margin-bottom: 12px; }
.yp-step__num {
  font-family: "Dosis", sans-serif; font-weight: 700; font-size: 13px; letter-spacing: .1em;
  color: #fff; background: #f69b91; border-radius: 999px; padding: 4px 13px; flex: 0 0 auto;
}
.yp-step__head h3 { font-size: 1.15em; font-weight: 700; margin: 0; color: #1a1a1a; }
.yp-step__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
.yp-step__list li { border-bottom: 1px solid #f0f0f0; }
.yp-step__list a { display: block; padding: 12px 4px 12px 20px; position: relative; color: #1a1a1a; text-decoration: none; font-size: 14px; line-height: 1.55; }
.yp-step__list a::before {
  content: ""; position: absolute; left: 3px; top: 1.25em; width: 6px; height: 6px;
  border-right: 2px solid #f69b91; border-bottom: 2px solid #f69b91; transform: rotate(-45deg);
}
.yp-step__list a:hover { color: #f69b91; }
.yp-guide__cta { text-align: center; background: #fff6f4; border: 1px solid #f4c9c2; border-radius: 8px; padding: 30px 20px; margin-top: 34px; }
.yp-guide__cta p { margin: 0 0 16px; font-weight: 700; font-size: 1.05em; color: #1a1a1a; }
.yp-guide__cta a { display: inline-block; background: #f69b91; color: #fff !important; text-decoration: none; font-weight: 700; padding: 14px 38px; border-radius: 6px; }
.yp-guide__cta a:hover { background: #f3897d; }
@media (max-width: 680px) { .yp-step__list { grid-template-columns: 1fr; } .yp-guide__intro h2 { font-size: 1.4em; } }