@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.11
*/

/************************************
** 子テーマ用のスタイルを書く
** デザイン：ダーク基調＋ピンク・パープルのアクセント、1カラム
************************************/

/* ===== デザインの基本値 ===== */
:root {
  --mf-bg: #0d0d12;
  --mf-surface: #16161e;
  --mf-surface-2: #1e1e29;
  --mf-surface-3: #272734;
  --mf-border: #2b2b38;
  --mf-text: #ececf1;
  --mf-text-sub: #a8a8b8;
  --mf-text-mute: #74748a;
  --mf-accent: #ff4d8d;
  --mf-accent-soft: #ff8ab4;
  --mf-accent-2: #a855f7;
  --mf-gradient: linear-gradient(135deg, #ff4d8d 0%, #a855f7 100%);
  --mf-star: #fbbf24;
  --mf-radius: 14px;
  --mf-radius-s: 8px;
  --mf-width: 1120px;
  --mf-width-article: 820px;
  --mf-font: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

  /* Cocoonの色変数をダーク用に置き換える（白の変数は文字色にも使われるため変えない） */
  --cocoon-default-font: var(--mf-font);
  --cocoon-text-color: var(--mf-text);
  --cocoon-pallid-text-color: var(--mf-text-sub);
  --cocoon-x-pallid-text-color: var(--mf-text-mute);
  --cocoon-basic-border-color: var(--mf-border);
  --cocoon-middle-thickness-color: #4a4a5c;
  --cocoon-thin-color: var(--mf-border);
  --cocoon-x-thin-color: #23232e;
  --cocoon-xx-thin-color: var(--mf-surface-2);
  --cocoon-xxx-thin-color: #191921;
  --cocoon-current-background-color: var(--mf-surface-3);
  --cocoon-select-background-color: #3b2340;
  --cocoon-tab-label-color: var(--mf-surface-2);
  --cocoon-three-d-border-colors: #333 #2b2b38 #222 #2b2b38;
  --cocoon-custom-border-color: var(--mf-border);
  --cocoon-default-text-size: 16px;
}

/* ===== 全体 ===== */
/* 見出しは文節の区切りで改行する（対応ブラウザのみ） */
h1, h2, h3,
.creator-card__name,
.front-ranking__name,
.review-list__title {
  word-break: auto-phrase;
}
html body {
  background: var(--mf-bg);
  color: var(--mf-text);
  font-family: var(--mf-font);
  font-size: 16px;
  font-feature-settings: "palt";
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
}
a {
  color: var(--mf-accent-soft);
  transition: color 0.2s, background-color 0.2s, border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
a:hover {
  color: var(--mf-accent);
}
::selection {
  background: rgba(255, 77, 141, 0.35);
  color: #fff;
}
input,
textarea,
select {
  background: var(--mf-surface-2);
  border: 1px solid var(--mf-border);
  border-radius: var(--mf-radius-s);
  color: var(--mf-text);
}

/* 1カラム：サイドバーを消して本文を広げる */
.no-sidebar .sidebar {
  display: none;
}
.no-sidebar .content-in {
  display: block;
}
.no-sidebar .content .main {
  width: 100%;
  margin: 0;
}

/* 横幅 */
.wrap,
.content-in.wrap,
.footer-in.wrap {
  width: auto;
  max-width: var(--mf-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}
.content {
  margin-top: 28px;
}
.main {
  padding: 0;
  background: transparent;
  border: none;
}
/* 個別ページは読みやすい幅に絞る */
.single .main .article,
.page .main .article,
.single .main .under-entry-content,
.single .main .mfgc-breadcrumb,
.single .main .breadcrumb {
  max-width: var(--mf-width-article);
  margin-left: auto;
  margin-right: auto;
}

/* ===== ヘッダー ===== */
.header-container {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(13, 13, 18, 0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--mf-border);
}
.admin-bar .header-container {
  top: 32px;
}
.header-container-in,
.header-container-in.hlt-center-logo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--mf-width);
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}
.header {
  background: transparent;
  height: auto;
}
.header-in,
.header-in.wrap {
  display: block;
  min-height: 0;
  height: auto;
  padding: 14px 0;
  max-width: none;
}
.tagline {
  display: none;
}
.logo-header,
.logo-header.logo-text {
  margin: 0;
  padding: 0;
  font-size: 22px;
  line-height: 1.2;
  text-align: left;
}
.logo-header .site-name-text-link,
.logo-footer .site-name-text-link {
  text-decoration: none;
}
.site-name-text {
  font-weight: 900;
  letter-spacing: 0.01em;
  background: var(--mf-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* グローバルメニュー */
.navi {
  width: auto;
  background: transparent;
}
.navi-in,
.navi-in.wrap {
  width: auto;
  padding: 0;
}
.mfgc-nav {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.navi-in > ul.mfgc-nav {
  flex-wrap: nowrap;
  /* Cocoon側の中央寄せの指定を打ち消す。中央寄せは、下の最初・最後の項目の自動余白で行う */
  justify-content: flex-start;
}
/* Cocoonはメニュー項目の幅・高さを固定しているため解除する */
.navi-in > ul.mfgc-nav li {
  width: auto;
  height: auto;
  flex-shrink: 0;
}
.mfgc-nav a {
  display: block;
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--mf-text-sub);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.mfgc-nav a:hover,
.mfgc-nav a[aria-current="page"] {
  background: var(--mf-surface-2);
  color: var(--mf-text);
}
/* 「外観 → メニュー」で設定したメニューの見た目も合わせる */
.navi-in > ul.menu-header {
  display: flex;
  gap: 4px;
}
.navi-in > ul.menu-header li {
  width: auto;
  height: auto;
}
.navi-in > ul.menu-header a {
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--mf-text-sub);
  font-size: 14px;
}
.navi-in > ul.menu-header a:hover {
  background: var(--mf-surface-2);
  color: var(--mf-text);
}
.navi-in > ul .sub-menu {
  background: var(--mf-surface);
}

/* ===== パンくずリスト ===== */
.mfgc-breadcrumb,
.breadcrumb {
  margin: 0 0 20px;
  font-size: 12px;
  color: var(--mf-text-mute);
  background: transparent;
}
.mfgc-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mfgc-breadcrumb li + li::before {
  content: "›";
  margin: 0 8px;
  color: var(--mf-text-mute);
}
.mfgc-breadcrumb a,
.breadcrumb a {
  color: var(--mf-text-sub);
  text-decoration: none;
}
.mfgc-breadcrumb a:hover,
.breadcrumb a:hover {
  color: var(--mf-accent-soft);
}

/* ===== 記事（Cocoon標準部分） ===== */
.article {
  color: var(--mf-text);
}
.entry-title,
.article h1 {
  font-size: 28px;
  font-weight: 900;
  line-height: 1.45;
  letter-spacing: 0.01em;
}
.article h2 {
  position: relative;
  margin: 48px 0 20px;
  padding: 0 0 0 16px;
  background: none;
  border: none;
  border-radius: 0;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.5;
}
.article h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  bottom: 0.2em;
  width: 4px;
  border-radius: 4px;
  background: var(--mf-gradient);
}
.article h3 {
  margin: 32px 0 14px;
  padding: 0 0 8px;
  border: none;
  border-bottom: 1px solid var(--mf-border);
  font-size: 18px;
  font-weight: 700;
}
.article h4 {
  border: none;
  font-size: 16px;
  color: var(--mf-accent-soft);
}
.entry-content {
  line-height: 1.95;
}
.entry-content a {
  text-decoration: underline;
  text-decoration-color: rgba(255, 138, 180, 0.4);
  text-underline-offset: 3px;
}
.article blockquote {
  background: var(--mf-surface);
  border-color: var(--mf-border);
  color: var(--mf-text-sub);
}

/* 表 */
.article table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  border: 1px solid var(--mf-border);
  border-radius: var(--mf-radius-s);
  overflow: hidden;
  background: var(--mf-surface);
}
.article th,
.article td {
  border: none;
  border-bottom: 1px solid var(--mf-border);
  padding: 12px 14px;
  vertical-align: middle;
}
.article tr:last-child th,
.article tr:last-child td {
  border-bottom: none;
}
.article thead th {
  background: var(--mf-surface-2);
  color: var(--mf-text-sub);
  font-size: 13px;
  font-weight: 500;
}
.article tbody th {
  background: transparent;
  font-weight: 700;
}
.article tr:nth-of-type(2n+1) {
  background: transparent;
}

/* 投稿日・カテゴリーなど */
.date-tags,
.post-date,
.post-update {
  color: var(--mf-text-mute);
}
.cat-link,
.tag-link {
  background: var(--mf-surface-2);
  border: 1px solid var(--mf-border);
  border-radius: 999px;
  color: var(--mf-text-sub);
}
.author-info,
.under-entry-content .related-entries,
.blogcard-wrap {
  background: var(--mf-surface);
  border-color: var(--mf-border);
}

/* 記事一覧（Cocoonのアーカイブ） */
.entry-card-wrap,
.related-entry-card-wrap {
  background: var(--mf-surface);
  border: 1px solid var(--mf-border);
  border-radius: var(--mf-radius);
  overflow: hidden;
}
.entry-card-wrap:hover,
.related-entry-card-wrap:hover {
  border-color: rgba(255, 77, 141, 0.5);
  background: var(--mf-surface-2);
}
.entry-card-title,
.related-entry-card-title {
  color: var(--mf-text);
}
.entry-card-snippet,
.related-entry-card-snippet,
.entry-card-meta {
  color: var(--mf-text-sub);
}
.list-title,
.archive-title {
  font-size: 24px;
  font-weight: 900;
}
.pagination .page-numbers,
.pager-links a,
.pager-links > span {
  background: var(--mf-surface);
  border: 1px solid var(--mf-border);
  border-radius: var(--mf-radius-s);
  color: var(--mf-text-sub);
}
.pagination .current {
  background: var(--mf-gradient);
  border-color: transparent;
  color: #fff;
}

/* Cocoonの「NO IMAGE」画像（白）を暗い背景になじませる */
img.no-image,
img[src*="no-image"] {
  filter: invert(0.9) hue-rotate(180deg) brightness(0.8);
}

/* 関連記事・前後の記事 */
.under-entry-content .related-entries {
  padding: 0;
  background: transparent;
}
.related-entry-heading,
.under-entry-content .related-entries .related-entry-heading {
  background: none;
}
.pager-post-navi a {
  background: var(--mf-surface);
  border: 1px solid var(--mf-border);
  border-radius: var(--mf-radius-s);
  color: var(--mf-text);
}

/* 目次 */
.toc {
  padding: 16px 24px;
  border: 1px solid var(--mf-border);
  border-radius: var(--mf-radius);
  background: var(--mf-surface);
  color: var(--mf-text);
}
.toc a {
  color: var(--mf-text-sub);
  text-decoration: none;
}
.toc a:hover {
  color: var(--mf-accent-soft);
}

/* 投稿者の表示
   投稿者名は functions.php で非表示にしている。代わりにCocoonがサイト名を出すが、
   検索エンジン向けの作成者情報（マイクロデータ）なのでHTMLは残し、画面上だけ隠す */
.footer-meta .author-info {
  display: none;
}

/* FAQブロック */
.faq-wrap {
  --cocoon-custom-text-color: var(--mf-text);
  --cocoon-custom-question-color: var(--mf-accent);
  --cocoon-custom-answer-color: var(--mf-accent-2);
  margin: 0 0 12px;
  padding: 16px 20px;
  background: var(--mf-surface);
  border: 1px solid var(--mf-border);
  border-radius: var(--mf-radius);
}

/* ===== フッター ===== */
.footer {
  margin-top: 64px;
  padding: 24px 0 32px;
  background: var(--mf-bg);
  border-top: 1px solid var(--mf-border);
  color: var(--mf-text-mute);
}
.footer-bottom {
  margin-top: 0;
  color: var(--mf-text-mute);
}
.logo-footer .site-name-text {
  font-size: 18px;
}
.navi-footer-in > .menu-footer li a {
  color: var(--mf-text-sub);
}
.copyright {
  color: var(--mf-text-mute);
  font-size: 12px;
}

/* スマホ下部のボタン・トップへ戻る */
.mobile-menu-buttons {
  background: rgba(22, 22, 30, 0.95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--mf-border);
  box-shadow: none;
  color: var(--mf-text-sub);
}
.mobile-menu-buttons .menu-button > a,
.mobile-menu-buttons .menu-button-in {
  color: var(--mf-text-sub);
}
.menu-content,
.search-menu-content {
  background: var(--mf-surface);
  color: var(--mf-text);
}
.go-to-top-button {
  background: var(--mf-surface-2);
  border: 1px solid var(--mf-border);
  border-radius: 999px;
  color: var(--mf-text);
}

/* ===== プラグインの共通部品（ダーク用に上書き） ===== */

/* 年齢確認ゲート */
.mfgc-age-gate {
  background: rgba(8, 8, 12, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.mfgc-age-gate__box {
  padding: 40px 28px;
  border: 1px solid var(--mf-border);
  border-radius: 20px;
  background: var(--mf-surface);
  color: var(--mf-text);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 80px rgba(255, 77, 141, 0.12);
}
.mfgc-age-gate__site {
  font-size: 15px;
  font-weight: 900;
  background: var(--mf-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.mfgc-age-gate__title {
  color: var(--mf-text);
}
.mfgc-age-gate__text,
.mfgc-age-gate__note {
  color: var(--mf-text-sub);
}
.mfgc-age-gate__yes {
  background: var(--mf-gradient);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(255, 77, 141, 0.3);
}
.mfgc-age-gate__no {
  border-color: var(--mf-border);
  border-radius: 999px;
  background: transparent;
  color: var(--mf-text-sub);
}

/* 広告表記（PR） */
.mfgc-pr-notice {
  margin: 0 0 20px;
  padding: 10px 14px;
  border: 1px solid var(--mf-border);
  border-radius: var(--mf-radius-s);
  background: var(--mf-surface);
  color: var(--mf-text-mute);
  font-size: 12px;
  line-height: 1.7;
}
.mfgc-pr-label {
  background: var(--mf-surface-3);
  color: var(--mf-text-sub);
  font-size: 11px;
}

/* フッターの共通表記 */
.mfgc-footer-notice {
  padding: 32px 20px;
  border-top: 1px solid var(--mf-border);
  background: #0a0a0e;
  color: var(--mf-text-mute);
}
.mfgc-footer-notice__in {
  max-width: var(--mf-width);
}
.mfgc-footer-notice strong {
  color: var(--mf-text-sub);
}
.mfgc-footer-notice__links a {
  color: var(--mf-text-sub);
  text-decoration: none;
}
.mfgc-footer-notice__links a:hover {
  color: var(--mf-accent-soft);
}
.mfgc-footer-notice + .footer {
  margin-top: 0;
}

/* ===== 共通部品 ===== */

/* Cocoonの記事内リストの余白（.article ul / ol）を、独自のリストでは打ち消す */
.article .creator-tags,
.article .creator-cards,
.article .creator-recommended,
.article .review-list,
.article .front-ranking,
.article .front-guides,
.article .front-hero__tags,
.article .mfgc-breadcrumb ol {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}
.article .creator-tags li,
.article .creator-cards li,
.article .review-list li,
.article .front-ranking li,
.article .front-hero__tags li {
  margin: 0;
}
.creator-section {
  margin: 56px 0 0;
}
.creator-note {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.7;
  color: var(--mf-text-mute);
}

/* タグのチップ */
.creator-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.creator-tags a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border: 1px solid rgba(255, 77, 141, 0.28);
  border-radius: 999px;
  background: rgba(255, 77, 141, 0.08);
  color: var(--mf-accent-soft);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
}
.creator-tags a:hover {
  border-color: var(--mf-accent);
  background: rgba(255, 77, 141, 0.18);
  color: #fff;
}
.creator-tags__more {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--mf-surface-3);
  color: var(--mf-text-sub);
  font-size: 11px;
  font-weight: 500;
}
.creator-tags--large a {
  padding: 8px 16px;
  font-size: 14px;
}

/* 公式ページへのボタン */
.creator-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
}
.creator-button a {
  display: inline-block;
  min-width: 280px;
  padding: 15px 28px;
  border-radius: 999px;
  background: var(--mf-gradient);
  color: #fff;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 10px 28px rgba(255, 77, 141, 0.28);
}
.creator-button a:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(255, 77, 141, 0.4);
}
.creator-button__pr {
  padding: 1px 7px;
  border-radius: 4px;
  background: var(--mf-surface-3);
  color: var(--mf-text-sub);
  font-size: 11px;
}

/* 星評価 */
.creator-stars {
  color: var(--mf-star);
  letter-spacing: 2px;
}
.creator-stars__off {
  color: #3a3a4a;
}

/* 画像がないときの代わり（名前の頭文字） */
.mfgc-noimage {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 77, 141, 0.45), transparent 60%),
    radial-gradient(circle at 80% 90%, rgba(168, 85, 247, 0.45), transparent 60%),
    var(--mf-surface-3);
  color: rgba(255, 255, 255, 0.92);
  font-weight: 900;
  line-height: 1;
}

/* ===== クリエイター個別ページ ===== */
.creator-summary {
  margin: 0 0 36px;
  padding: 24px;
  border: 1px solid var(--mf-border);
  border-radius: var(--mf-radius);
  background:
    radial-gradient(circle at 100% 0%, rgba(168, 85, 247, 0.12), transparent 50%),
    var(--mf-surface);
}
.creator-summary__text {
  margin: 0 0 12px;
  line-height: 1.9;
}

/* プロフィール（アイコン＋要約＋SNS） */
.creator-profile {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 4px 0 20px;
}
.creator-profile__icon {
  flex-shrink: 0;
  padding: 3px;
  border-radius: 50%;
  background: var(--mf-gradient);
  box-shadow: 0 8px 28px rgba(255, 77, 141, 0.25);
}
.creator-profile__image {
  display: flex;
  width: 112px;
  height: 112px;
  object-fit: cover;
  border: 3px solid var(--mf-surface);
  border-radius: 50%;
  font-size: 44px;
  box-sizing: border-box;
}
.creator-profile__body {
  flex: 1;
  min-width: 0;
}

/* SNSボタン */
.creator-sns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.article .creator-sns {
  margin: 0;
  padding: 0;
}
.article .creator-sns li {
  margin: 0;
}
.creator-sns__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--mf-border);
  border-radius: 999px;
  background: var(--mf-surface-2);
  color: var(--mf-text);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
}
.creator-sns__link svg {
  width: 16px;
  height: 16px;
}
.creator-sns__link:hover {
  color: #fff;
  transform: translateY(-1px);
}
.creator-sns__link--x:hover {
  border-color: #fff;
  background: #000;
}
.creator-sns__link--instagram:hover {
  border-color: transparent;
  background: linear-gradient(45deg, #f9ce34, #ee2a7b 50%, #6228d7);
}
.creator-sns__link--tiktok:hover {
  border-color: #25f4ee;
  background: #000;
  box-shadow: 2px 2px 0 #fe2c55;
}
.creator-sns-wrap {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}
.creator-summary__facts {
  display: grid;
  grid-template-columns: 8em 1fr;
  gap: 12px 16px;
  margin: 0 0 24px;
  padding: 16px 0;
  border-top: 1px solid var(--mf-border);
  border-bottom: 1px solid var(--mf-border);
}
.creator-summary__facts dt {
  color: var(--mf-text-mute);
  font-size: 13px;
}
.creator-summary__facts dd {
  margin: 0;
  font-weight: 500;
}
.creator-summary__facts dd a {
  color: var(--mf-text);
}
.creator-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.creator-plans,
.creator-ratings {
  width: 100%;
}
/* プラン料金表：長いプラン名・内容で行が縦に伸びないよう、プラン名は2行・内容は3行までで省略する */
/* 省略したものには「全文を見る」ボタンが付く（assets/creator-plans.js） */
.creator-plans {
  min-width: 560px;
}
.creator-plans__name {
  min-width: 9em;
  max-width: 15em;
  font-weight: 700;
}
.creator-plans__note {
  min-width: 220px;
  color: var(--mf-text-sub);
  font-size: 14px;
}
.creator-plans__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.creator-plans__note .creator-plans__text {
  -webkit-line-clamp: 3;
}
.creator-plans__text.is-open {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.creator-plans__more {
  margin-top: 4px;
  padding: 0;
  border: none;
  background: none;
  color: var(--mf-accent-soft);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.creator-plans__more::after {
  content: " ▼";
  font-size: 10px;
}
.creator-plans__more[aria-expanded="true"]::after {
  content: " ▲";
}
.creator-plans__more:hover,
.creator-plans__more:focus-visible {
  text-decoration: underline;
}
/* スマホ：表の横スクロールをやめ、プランごとのカードにする（プラン名→数字→内容の順） */
@media (max-width: 600px) {
  .creator-plans {
    min-width: 0;
  }
  .article .creator-plans thead {
    display: none;
  }
  .article .creator-plans,
  .article .creator-plans tbody {
    display: block;
  }
  .article .creator-plans tr {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 14px;
    border-bottom: 1px solid var(--mf-border);
  }
  .article .creator-plans tr:last-child {
    border-bottom: none;
  }
  .article .creator-plans td {
    display: block;
    padding: 0;
    border: none;
  }
  .creator-plans__name,
  .creator-plans__note {
    flex: 1 1 100%;
    min-width: 0;
    max-width: none;
  }
  .creator-plans__name {
    font-size: 15px;
  }
  .creator-plans__price,
  .creator-plans__posts,
  .creator-plans__unit {
    flex: 1 1 0;
  }
  .creator-plans__price::before,
  .creator-plans__posts::before,
  .creator-plans__unit::before {
    content: attr(data-label);
    display: block;
    color: var(--mf-text-mute);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
  }
}
.creator-plans__price {
  white-space: nowrap;
  font-weight: 700;
  color: var(--mf-text);
}
.creator-plans__posts,
.creator-plans__unit,
.creator-compare__unit {
  white-space: nowrap;
}
.creator-plans__unit {
  font-weight: 700;
  color: var(--mf-accent-soft);
}
/* ===== 開閉できるセクション（トップページの「目的別に探す」） ===== */
.front-fold__summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid var(--mf-border);
  border-radius: var(--mf-radius);
  background: var(--mf-surface);
  cursor: pointer;
  list-style: none; /* 標準の三角形は消して、自前の矢印を出す */
  transition: border-color 0.2s, background-color 0.2s;
}
.front-fold__summary::-webkit-details-marker {
  display: none;
}
.front-fold__summary:hover {
  border-color: rgba(255, 77, 141, 0.5);
  background: var(--mf-surface-2);
}
.front-fold__summary:focus-visible {
  outline: 2px solid var(--mf-accent-soft);
  outline-offset: 2px;
}
.front-fold__summary h2 {
  flex: 1;
  margin: 0;
}
.front-fold__hint {
  color: var(--mf-text-mute);
  font-size: 13px;
}
.front-fold__hint--open,
.front-fold[open] .front-fold__hint--closed {
  display: none;
}
.front-fold[open] .front-fold__hint--open {
  display: inline;
}
.front-fold__summary::after {
  content: "";
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  margin: 0 4px 3px 0;
  border-right: 2px solid var(--mf-text-sub);
  border-bottom: 2px solid var(--mf-text-sub);
  transform: rotate(45deg);
  transition: transform 0.2s;
}
.front-fold[open] .front-fold__summary::after {
  margin-bottom: -3px;
  transform: rotate(-135deg);
}
.front-fold__body {
  padding: 4px 4px 0;
}
.front-fold__body > .front-tag-group:first-child {
  margin-top: 20px;
}
/* おすすめの組み合わせ：人数は、チップの中に小さく表示する */
.front-recommend .front-tag-count {
  min-width: 0;
  padding: 0 8px;
}

/* ===== タグの組み合わせ検索（トップページ・クリエイター一覧） ===== */
.front-section__lead {
  margin: -8px 0 16px;
  color: var(--mf-text-sub);
}
.tag-picker {
  padding: 22px;
  border: 1px solid var(--mf-border);
  border-radius: var(--mf-radius);
  background:
    radial-gradient(circle at 0% 0%, rgba(255, 77, 141, 0.1), transparent 45%),
    var(--mf-surface);
}
.tag-picker__group {
  margin: 0 0 18px;
  padding: 0;
  border: none;
  min-width: 0;
}
.tag-picker__legend {
  margin: 0 0 8px;
  padding: 0;
  color: var(--mf-text-mute);
  font-size: 13px;
  font-weight: 500;
}
.tag-picker__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tag-chip {
  position: relative;
  display: inline-block;
  margin: 0;
  cursor: pointer;
}
/* チェックボックスは見えなくして、文字の部分をボタンのように見せる（キーボードでは操作できる） */
.tag-chip__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.tag-chip__text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid var(--mf-border);
  border-radius: 999px;
  background: var(--mf-surface-2);
  color: var(--mf-text-sub);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s, transform 0.15s;
}
.tag-chip:hover .tag-chip__text {
  border-color: rgba(255, 77, 141, 0.5);
  color: var(--mf-text);
}
.tag-chip__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 11px;
}
.tag-chip__input:checked + .tag-chip__text {
  border-color: transparent;
  background: var(--mf-gradient);
  color: #fff;
  box-shadow: 0 6px 18px rgba(255, 77, 141, 0.3);
}
.tag-chip__input:checked + .tag-chip__text .tag-chip__count {
  background: rgba(255, 255, 255, 0.25);
}
.tag-chip__input:focus-visible + .tag-chip__text {
  outline: 2px solid var(--mf-accent-soft);
  outline-offset: 2px;
}
/* 選ぶと0人になるタグ、上限に達したときの残りのタグ */
.tag-chip.is-disabled,
.tag-chip.is-disabled .tag-chip__input {
  cursor: not-allowed;
}
.tag-chip.is-disabled .tag-chip__text {
  opacity: 0.35;
  border-style: dashed;
}
.tag-chip.is-disabled:hover .tag-chip__text {
  border-color: var(--mf-border);
  color: var(--mf-text-sub);
}
.tag-picker__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--mf-border);
}
.tag-picker__status {
  flex: 1 1 260px;
  margin: 0;
  color: var(--mf-text);
  font-size: 14px;
  line-height: 1.6;
}
.tag-picker__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tag-picker__clear {
  padding: 9px 16px;
  border: 1px solid var(--mf-border);
  border-radius: 999px;
  background: transparent;
  color: var(--mf-text-sub);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}
.tag-picker__clear:hover {
  border-color: var(--mf-accent);
  color: var(--mf-text);
}
.tag-picker__clear[hidden] {
  display: none;
}
.tag-picker__submit {
  min-width: 200px;
  padding: 12px 24px;
  border: none;
  border-radius: 999px;
  background: var(--mf-gradient);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(255, 77, 141, 0.28);
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.tag-picker__submit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(255, 77, 141, 0.4);
}
.tag-picker__submit:disabled {
  background: var(--mf-surface-3);
  color: var(--mf-text-mute);
  box-shadow: none;
  cursor: not-allowed;
}
.creator-list-page__count {
  margin-left: 8px;
  color: var(--mf-text-sub);
  font-size: 0.7em;
  font-weight: 500;
}
.creator-list-page__picker {
  margin-top: 28px;
}

/* ===== お問い合わせフォーム ===== */
.mfgc-form {
  margin: 24px 0 8px;
  padding: 24px;
  border: 1px solid var(--mf-border);
  border-radius: var(--mf-radius);
  background: var(--mf-surface);
}
.mfgc-form__field {
  margin: 0 0 22px;
}
.mfgc-form__field > label {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
  font-size: 14px;
}
.mfgc-form__req {
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 4px;
  background: rgba(255, 77, 141, 0.16);
  color: var(--mf-accent-soft);
  font-size: 11px;
  font-weight: 500;
}
.mfgc-form input[type="text"],
.mfgc-form input[type="email"],
.mfgc-form input[type="url"],
.mfgc-form select,
.mfgc-form textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  border: 1px solid var(--mf-border);
  border-radius: var(--mf-radius-s);
  background: var(--mf-bg);
  color: var(--mf-text);
  font: inherit;
  font-size: 16px; /* スマホで入力時に画面が拡大されないよう16px以上にする */
}
.mfgc-form textarea {
  min-height: 180px;
  line-height: 1.7;
  resize: vertical;
}
.mfgc-form input:focus,
.mfgc-form select:focus,
.mfgc-form textarea:focus {
  outline: none;
  border-color: var(--mf-accent);
  box-shadow: 0 0 0 3px rgba(255, 77, 141, 0.2);
}
.mfgc-form__hint {
  margin: 6px 0 0;
  color: var(--mf-text-mute);
  font-size: 12px;
}
.mfgc-form__consent label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-weight: 400;
}
.mfgc-form__consent input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--mf-accent);
}
.mfgc-form__submit {
  margin: 8px 0 0;
  text-align: center;
}
.mfgc-form__button {
  min-width: 260px;
  padding: 15px 28px;
  border: none;
  border-radius: 999px;
  background: var(--mf-gradient);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(255, 77, 141, 0.28);
  transition: transform 0.2s, box-shadow 0.2s;
}
.mfgc-form__button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(255, 77, 141, 0.4);
}
/* 迷惑メール対策の見えない欄（人には見えず、画面の外に置く） */
.mfgc-form__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.mfgc-form-notice {
  margin: 20px 0;
  padding: 14px 18px;
  border-radius: var(--mf-radius-s);
  line-height: 1.8;
}
.mfgc-form-notice ul {
  margin: 8px 0 0;
  padding-left: 1.2em;
}
.mfgc-form-notice--ok {
  border: 1px solid rgba(74, 222, 128, 0.4);
  background: rgba(74, 222, 128, 0.08);
}
.mfgc-form-notice--error {
  border: 1px solid rgba(255, 77, 141, 0.5);
  background: rgba(255, 77, 141, 0.08);
}

/* 情報確認日から60日以上たっているときの注意書き */
.creator-stale-notice {
  margin: 12px 0 0;
  padding: 10px 14px;
  border: 1px solid rgba(251, 191, 36, 0.4);
  border-radius: var(--mf-radius-s);
  background: rgba(251, 191, 36, 0.08);
  color: var(--mf-text);
  font-size: 13px;
  line-height: 1.7;
}
.creator-stale-notice strong {
  color: var(--mf-star);
}
.creator-summary__sub {
  margin-left: 4px;
  color: var(--mf-text-mute);
  font-size: 12px;
  font-weight: 400;
}
.creator-compare__unit {
  color: var(--mf-accent-soft);
  font-weight: 700;
}
.creator-ratings th {
  width: 12em;
  font-weight: 500;
  text-align: left;
  color: var(--mf-text-sub);
}
.creator-summary__facts .creator-tags {
  margin: 0;
}
.creator-ratings__note {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: var(--mf-text-mute);
}
.creator-recommended {
  margin: 0;
  padding: 0;
  list-style: none;
}
.creator-recommended li {
  position: relative;
  margin: 0 0 8px;
  padding: 12px 16px 12px 40px;
  border-radius: var(--mf-radius-s);
  background: var(--mf-surface);
}
.creator-recommended li::before {
  content: "✓";
  position: absolute;
  left: 16px;
  color: var(--mf-accent);
  font-weight: 900;
}

/* ===== タグ別一覧・掛け合わせページ ===== */
.creator-list-page__intro {
  margin: 0 0 8px;
  color: var(--mf-text-sub);
}
.creator-compare {
  width: 100%;
  min-width: 600px;
}
.creator-compare th,
.creator-compare td {
  white-space: nowrap;
}
.creator-compare tbody th {
  white-space: normal;
  text-align: left;
}
/* 名前の列：狭くなって1文字ずつ折り返さないよう幅を確保し、2行までで省略する */
/* 表は列幅を中身から自動で決めるため、幅は th ではなく名前のリンク自体に持たせる */
.creator-compare__name {
  min-width: 13em;
  max-width: 18em;
}
.creator-compare__name-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.45;
  word-break: normal;
  overflow-wrap: anywhere;
}
@media (max-width: 600px) {
  .creator-compare__name-head,
  .creator-compare tbody th {
    padding-left: 10px;
    padding-right: 8px;
  }
  .creator-compare__name {
    gap: 8px;
    min-width: 10.5em;
    max-width: 12em;
  }
  .creator-compare__name-text {
    -webkit-line-clamp: 3;
    font-size: 13px;
  }
  .creator-compare__icon {
    width: 28px;
    height: 28px;
  }
}
/* 並べ替えのボタン（見出し） */
.creator-compare__sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.creator-compare__sort:hover,
.creator-compare__sort:focus-visible {
  color: var(--mf-accent-soft);
}
.creator-compare__sort-mark::after {
  content: "⇅";
  color: var(--mf-text-mute);
  font-size: 0.85em;
}
.creator-compare th[aria-sort="descending"] .creator-compare__sort-mark::after {
  content: "▼";
  color: var(--mf-accent);
}
.creator-compare th[aria-sort="ascending"] .creator-compare__sort-mark::after {
  content: "▲";
  color: var(--mf-accent);
}
.creator-compare__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.creator-compare__note {
  margin: 6px 0 0;
  color: var(--mf-text-mute);
  font-size: 12px;
}
.creator-compare tbody th a {
  color: var(--mf-text);
  text-decoration: none;
}
.creator-compare__name {
  display: flex;
  align-items: center;
  gap: 10px;
}
.creator-compare__icon {
  display: flex;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 50%;
  font-size: 15px;
}
.creator-compare tbody th a:hover {
  color: var(--mf-accent-soft);
}
/* 比較表は枠の中で縦横にスクロールし、1行目の見出しとクリエイター名の列を固定する
   （行が増えても項目名が見え、横に動かしても誰の行かわかるように） */
.creator-table-wrap--compare {
  overflow: auto;
  max-height: 75vh;
  max-height: 75svh;
  border: 1px solid var(--mf-border);
  border-radius: var(--mf-radius-s);
  overscroll-behavior-x: contain;
}
.creator-table-wrap--compare .creator-compare {
  border: 0;
  border-radius: 0;
  overflow: visible; /* 表自体が枠になると固定が効かなくなるため、枠は外側の div に持たせる */
}
.creator-compare thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--mf-surface-2);
}
.creator-compare tbody th {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--mf-surface);
}
/* 左上の「クリエイター」は縦にも横にも固定し、いちばん手前に出す */
.creator-compare thead th:first-child {
  left: 0;
  z-index: 3;
}
/* 固定した名前の列の右端に区切り線（横に動かしたとき、数字が下に潜っていくのがわかるように） */
.creator-compare tbody th,
.creator-compare thead th:first-child {
  box-shadow: inset -1px 0 0 var(--mf-border);
}
@media (max-width: 600px) {
  .creator-table-wrap--compare {
    max-height: 70vh;
    max-height: 70svh;
  }
}
.creator-compare__price {
  font-weight: 700;
}
.creator-compare__rating {
  text-align: center;
}
.creator-compare .creator-stars {
  letter-spacing: 0;
}

/* クリエイターのカード */
.creator-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.creator-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--mf-border);
  border-radius: var(--mf-radius);
  background: var(--mf-surface);
  overflow: hidden;
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
}
.creator-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 77, 141, 0.5);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 77, 141, 0.15);
}
.creator-card__link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.creator-card__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  margin: 0;
  border-radius: 0;
}
.mfgc-noimage.creator-card__image {
  display: flex;
  font-size: 56px;
}
.creator-card__name {
  display: block;
  padding: 12px 14px 0;
  color: var(--mf-text);
  font-weight: 700;
  line-height: 1.5;
}
.creator-card__link:hover .creator-card__name {
  color: var(--mf-accent-soft);
}
.creator-card__price {
  margin: 4px 14px 0;
  color: var(--mf-accent-soft);
  font-size: 13px;
  font-weight: 700;
}
.creator-card__summary {
  margin: 8px 14px 0;
  color: var(--mf-text-sub);
  font-size: 12px;
  line-height: 1.7;
}
.creator-card > .creator-tags {
  margin: auto 14px 0;
  padding: 12px 0 14px;
}
.creator-card .creator-tags a {
  padding: 2px 9px;
  font-size: 11px;
}

.creator-card__facts {
  margin: 8px 14px 0;
  padding: 5px 8px;
  border-radius: var(--mf-radius-s);
  background: var(--mf-surface-2);
  color: var(--mf-text);
  font-size: 12px;
}
.creator-card__popularity {
  margin: 6px 14px 0;
  color: var(--mf-text-sub);
  font-size: 12px;
}
.creator-card__popularity .creator-stars {
  letter-spacing: 1px;
}
.creator-card__popularity-none {
  color: var(--mf-text-sub);
}

/* ===== 関連記事（似ているクリエイター） ===== */
.creator-card__shared {
  margin: 6px 14px 0;
  color: var(--mf-text-sub);
  font-size: 12px;
  line-height: 1.6;
}
.creator-card__shared-label {
  display: block;
  margin-bottom: 1px;
  color: var(--mf-text-mute);
  font-size: 11px;
}
.creator-card__shared-more {
  color: var(--mf-text-mute);
}
.creator-related {
  margin-top: 56px;
}

/* ===== お気に入り（❤ボタン） ===== */
html .mfgc-fav {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  background: rgba(13, 13, 18, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  transition: transform 0.2s, background-color 0.2s, color 0.2s, border-color 0.2s;
}
html .mfgc-fav:hover {
  background: rgba(13, 13, 18, 0.85);
  transform: scale(1.1);
}
html .mfgc-fav:focus-visible {
  outline: 2px solid var(--mf-accent-soft);
  outline-offset: 2px;
}
.mfgc-fav__icon {
  display: block;
  width: 20px;
  height: 20px;
}
/* 未登録は白い輪郭、登録済みはピンクで塗りつぶす */
.mfgc-fav__icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linejoin: round;
  transition: fill 0.2s;
}
html .mfgc-fav[aria-pressed="true"] {
  color: var(--mf-accent);
  border-color: rgba(255, 77, 141, 0.55);
}
.mfgc-fav[aria-pressed="true"] .mfgc-fav__icon path {
  fill: currentColor;
}
.mfgc-fav.is-pop .mfgc-fav__icon {
  animation: mfgc-fav-pop 0.35s ease-out;
}
@keyframes mfgc-fav-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.45); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .mfgc-fav.is-pop .mfgc-fav__icon { animation: none; }
  html .mfgc-fav { transition: none; }
}
/* 作品記事のサムネイル（タイル）の右上に重ねる小さめの❤ */
html .mfgc-fav--thumb {
  top: 6px;
  right: 6px;
  left: auto;
  width: 28px;
  height: 28px;
}
.mfgc-fav--thumb .mfgc-fav__icon {
  width: 15px;
  height: 15px;
}
/* ランキング：行の右端に並べる */
html .mfgc-fav--inline {
  position: static;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: var(--mf-surface-2);
}
/* 個別ページ：文字付きのボタン */
html .mfgc-fav--label {
  position: static;
  width: auto;
  height: auto;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--mf-surface-2);
  font-size: 14px;
  font-weight: 500;
}
.creator-summary__fav {
  margin: 14px 0 0;
  text-align: center;
}
html .mfgc-fav--label[aria-pressed="true"] {
  background: rgba(255, 77, 141, 0.14);
}

/* ヘッダーメニューの「お気に入り」 */
.mfgc-nav__fav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mfgc-nav__fav svg {
  color: var(--mf-accent);
}
.mfgc-fav-count {
  min-width: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--mf-gradient);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.mfgc-fav-count[hidden] {
  display: none;
}

/* お気に入り一覧ページ（本文のリンクの下線は、カードやタイトルには付けない） */
.entry-content .mfgc-favorites a {
  text-decoration: none;
}
.mfgc-favorites__note {
  padding: 10px 14px;
  border: 1px solid var(--mf-border);
  border-radius: var(--mf-radius-s);
  background: var(--mf-surface);
  color: var(--mf-text-mute);
  font-size: 12px;
  line-height: 1.7;
}
.mfgc-favorites__status,
.mfgc-favorites__empty {
  padding: 32px 0;
  color: var(--mf-text-sub);
  text-align: center;
}
.mfgc-favorites__status:empty {
  display: none;
}
.mfgc-favorites__actions {
  margin: 32px 0 0;
  text-align: center;
}
.mfgc-favorites__clear {
  padding: 8px 18px;
  border: 1px solid var(--mf-border);
  border-radius: 999px;
  background: transparent;
  color: var(--mf-text-sub);
  font-size: 13px;
  cursor: pointer;
}
.mfgc-favorites__clear:hover {
  border-color: var(--mf-accent);
  color: var(--mf-text);
}
.mfgc-favorites__section[hidden],
.mfgc-favorites [hidden] {
  display: none;
}

/* ===== 作品記事 ===== */
/* インスタグラムのプロフィール風：同じ大きさの縦長タイル（3:4）を3列で、細いすき間で並べる。左上から新しい順 */
.review-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.review-list__item {
  position: relative;
  min-width: 0;
}
.review-list__link {
  display: block;
  color: inherit;
  text-decoration: none;
}
/* サムネイル：枠は3:4にそろえ、画像は枠いっぱいに切り抜く（顔が残りやすいよう少し上寄せ）。右下に再生時間、右上に❤を重ねる */
.review-list__thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--mf-surface-3);
}
.review-list__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  border-radius: 0;
  transition: transform 0.25s ease;
}
/* PC：マウスを乗せると少し暗くして拡大（インスタの一覧と同じく「押せる」合図） */
.review-list__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.2s ease;
  pointer-events: none;
}
.review-list__link:hover .review-list__thumb::after,
.review-list__link:focus-visible .review-list__thumb::after {
  background: rgba(0, 0, 0, 0.18);
}
.review-list__link:hover .review-list__image {
  transform: scale(1.03);
}
@media (prefers-reduced-motion: reduce) {
  .review-list__image { transition: none; }
  .review-list__link:hover .review-list__image { transform: none; }
}
/* アイキャッチがない動画記事：動画の最初のコマをサムネイルにする */
.review-list__video {
  pointer-events: none;
}
.mfgc-noimage.review-list__image {
  display: flex;
  font-size: 30px;
}
/* 動画の再生時間バッジ */
.mfgc-duration {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.82);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.review-creator {
  display: flex;
  gap: 20px;
  padding: 20px;
  border: 1px solid var(--mf-border);
  border-radius: var(--mf-radius);
  background: var(--mf-surface);
}
.review-creator__image {
  flex-shrink: 0;
  text-decoration: none;
}
.review-creator__image img,
.review-creator__image .mfgc-noimage {
  display: flex;
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 50%;
  font-size: 36px;
}
.review-creator__body {
  flex: 1;
}
.review-creator__name {
  color: var(--mf-text);
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
}
.review-creator .creator-card__price,
.review-creator .creator-card__summary {
  margin-left: 0;
  margin-right: 0;
}
.review-creator .creator-tags {
  margin-top: 12px;
}

/* ===== トップページ ===== */
.front-page {
  max-width: none;
}
.front-hero {
  position: relative;
  margin: 0 0 8px;
  padding: 64px 24px 56px;
  border: 1px solid var(--mf-border);
  border-radius: 24px;
  background:
    radial-gradient(ellipse at 15% 0%, rgba(255, 77, 141, 0.32), transparent 55%),
    radial-gradient(ellipse at 90% 100%, rgba(168, 85, 247, 0.32), transparent 55%),
    var(--mf-surface);
  text-align: center;
  overflow: hidden;
}
.front-hero__site {
  display: inline-block;
  margin: 0 0 16px;
  padding: 4px 14px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--mf-text-sub);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.front-hero__title {
  margin: 0 0 16px;
  font-size: 34px;
  font-weight: 900;
  line-height: 1.4;
  letter-spacing: 0.01em;
  color: #fff;
}
.front-hero__lead {
  margin: 0 auto;
  max-width: 34em;
  color: var(--mf-text-sub);
  line-height: 1.8;
}
.front-hero__tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.front-hero__tags a {
  display: inline-block;
  padding: 9px 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(13, 13, 18, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--mf-text);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.front-hero__tags a:hover {
  border-color: var(--mf-accent);
  background: rgba(255, 77, 141, 0.2);
  color: #fff;
  transform: translateY(-2px);
}
.front-tag-group {
  margin: 24px 0 10px;
  padding: 0;
  border: none;
  font-size: 13px;
  font-weight: 500;
  color: var(--mf-text-mute);
}
.article .front-tag-group {
  border: none;
  padding: 0;
}
.front-tag-group a {
  color: var(--mf-text-sub);
  text-decoration: none;
}
.front-tag-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--mf-text-sub);
  font-size: 11px;
}

/* ランキング */
.front-ranking {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.front-ranking__item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border: 1px solid var(--mf-border);
  border-radius: var(--mf-radius);
  background: var(--mf-surface);
  transition: border-color 0.2s, background-color 0.2s;
}
.front-ranking__item:hover {
  border-color: rgba(255, 77, 141, 0.45);
  background: var(--mf-surface-2);
}
.front-ranking__rank {
  flex-shrink: 0;
  width: 2.6em;
  color: var(--mf-text-mute);
  font-size: 18px;
  font-weight: 900;
  text-align: center;
}
.front-ranking__item:nth-child(1) .front-ranking__rank { color: #fbbf24; }
.front-ranking__item:nth-child(2) .front-ranking__rank { color: #cbd5e1; }
.front-ranking__item:nth-child(3) .front-ranking__rank { color: #e08a4a; }
.front-ranking__item:nth-child(1) {
  border-color: rgba(251, 191, 36, 0.35);
  background:
    linear-gradient(90deg, rgba(251, 191, 36, 0.08), transparent 40%),
    var(--mf-surface);
}
.front-ranking__image {
  flex-shrink: 0;
  text-decoration: none;
}
.front-ranking__image img,
.front-ranking__image .mfgc-noimage {
  display: flex;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 50%;
  font-size: 22px;
}
.front-ranking__body {
  flex: 1;
  min-width: 0;
}
.front-ranking__name {
  display: block;
  color: var(--mf-text);
  font-weight: 700;
  text-decoration: none;
}
.front-ranking__name:hover {
  color: var(--mf-accent-soft);
}
.front-ranking__meta {
  font-size: 12px;
  color: var(--mf-text-mute);
}
.front-ranking__score {
  flex-shrink: 0;
  color: var(--mf-text-mute);
  font-size: 12px;
}
.front-ranking__score strong {
  margin-right: 2px;
  background: var(--mf-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 24px;
  font-weight: 900;
}

/* ガイド */
.front-guides {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.front-guides li {
  position: relative;
  margin: 0;
  padding: 18px 40px 18px 18px;
  border: 1px solid var(--mf-border);
  border-radius: var(--mf-radius);
  background: var(--mf-surface);
  transition: border-color 0.2s, background-color 0.2s;
}
.front-guides li:hover {
  border-color: rgba(168, 85, 247, 0.5);
  background: var(--mf-surface-2);
}
.front-guides li::after {
  content: "→";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--mf-accent-2);
}
.front-guides li + li {
  margin-top: 0;
}
.front-guides a {
  color: var(--mf-text);
  font-weight: 700;
  text-decoration: none;
}
/* カード全体をクリックできるようにする */
.front-guides a::before {
  content: "";
  position: absolute;
  inset: 0;
}
.front-guides__excerpt {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--mf-text-mute);
}

/* 「すべて見る」 */
.front-more {
  margin: 16px 0 0;
  text-align: right;
}
.front-more a {
  display: inline-block;
  padding: 6px 16px;
  border: 1px solid var(--mf-border);
  border-radius: 999px;
  color: var(--mf-text-sub);
  font-size: 13px;
  text-decoration: none;
}
.front-more a::after {
  content: " →";
}
.front-more a:hover {
  border-color: var(--mf-accent);
  color: var(--mf-text);
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /* ヘッダー：ロゴの下にメニューを横スクロールで並べる */
  .header-container-in,
  .header-container-in.hlt-center-logo {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 16px;
  }
  .header-in,
  .header-in.wrap {
    padding: 12px 0 6px;
  }
  .logo-header,
  .logo-header.logo-text {
    text-align: center;
  }
  .navi,
  .navi-in {
    display: block;
  }
  /* メニューは横スクロールにせず、収まらないときは折り返して中央に並べる
     （スクロール式だと、右端の「お気に入り」がスワイプしないと見えない） */
  .mfgc-nav,
  .navi-in > ul.mfgc-nav {
    flex-wrap: wrap;
    justify-content: center;
    padding-bottom: 8px;
  }
  .mfgc-nav a {
    padding: 6px 12px;
    font-size: 13px;
  }
}

/*834px以下*/
@media screen and (max-width: 834px){
  .wrap,
  .content-in.wrap,
  .footer-in.wrap {
    padding-left: 16px;
    padding-right: 16px;
  }
  .admin-bar .header-container {
    top: 46px;
  }
  .entry-title,
  .article h1 {
    font-size: 23px;
  }
  .article h2 {
    margin-top: 40px;
    font-size: 19px;
  }
  .front-hero {
    padding: 44px 18px 40px;
    border-radius: 18px;
  }
  .front-hero__title {
    font-size: 25px;
  }
  .creator-section {
    margin-top: 44px;
  }
}

/*480px以下*/
@media screen and (max-width: 480px){
  .front-hero__title {
    font-size: 22px;
  }
  .front-hero__br {
    display: none;
  }
  .front-hero__tags a {
    padding: 7px 14px;
    font-size: 13px;
  }
  .creator-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .creator-card__summary {
    display: none;
  }
  .creator-summary {
    padding: 18px;
  }
  .tag-picker {
    padding: 16px;
  }
  .tag-picker__actions {
    width: 100%;
  }
  .tag-picker__submit {
    flex: 1;
    min-width: 0;
  }
  /* プロフィールはアイコンを上、要約とSNSを下に中央ぞろえで並べる */
  .creator-profile {
    flex-direction: column;
    gap: 14px;
    text-align: center;
  }
  .creator-profile__image {
    width: 96px;
    height: 96px;
    font-size: 38px;
  }
  .creator-profile .creator-sns {
    justify-content: center;
  }
  .creator-summary__text {
    text-align: left;
  }
  .creator-summary__facts {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .creator-summary__facts dd {
    margin-bottom: 10px;
  }
  /* ボタンを横幅いっぱいにし、PR表記はボタンの下に回す */
  .creator-button {
    flex-direction: column;
    gap: 6px;
  }
  .creator-button a {
    display: block;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    padding: 15px 16px;
  }
  .creator-ratings th {
    width: auto;
  }
  /* 作品記事のタイルはスマホでも3列。すき間をさらに細くし、再生時間と❤を小さくする */
  .review-list {
    gap: 2px;
  }
  .review-list .mfgc-duration {
    right: 3px;
    bottom: 3px;
    padding: 0 4px;
    font-size: 10px;
  }
  html .review-list .mfgc-fav--thumb {
    top: 3px;
    right: 3px;
    width: 24px;
    height: 24px;
  }
  .review-list .mfgc-fav--thumb .mfgc-fav__icon {
    width: 13px;
    height: 13px;
  }
  .review-creator {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .review-creator .creator-tags {
    justify-content: center;
  }
  .front-ranking__item {
    gap: 10px;
    padding: 12px;
  }
  .front-ranking__rank {
    width: 2em;
    font-size: 15px;
  }
  .front-ranking__image img,
  .front-ranking__image .mfgc-noimage {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
  .front-ranking__score strong {
    font-size: 20px;
  }
}

/* ===== クリエイター個別：選ぶ前にチェック（1本あたり・更新頻度・サンプル動画・いいねで見る人気） ===== */
.creator-check {
  margin: 0 0 24px;
}
.creator-check__title {
  margin: 0 0 12px;
  font-size: 20px;
}
.creator-check__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.creator-check__fact,
.creator-check__likes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--mf-border);
  border-radius: var(--mf-radius);
  background: var(--mf-surface);
}
.creator-check__label {
  color: var(--mf-text-sub);
  font-size: 13px;
}
.creator-check__value {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.3;
}
.creator-check__value--accent {
  color: var(--mf-accent-soft);
}
.creator-check__value--none {
  color: var(--mf-text-sub);
  font-size: 15px;
  font-weight: 500;
}
.creator-check__sub {
  color: var(--mf-text-sub);
  font-size: 12px;
  line-height: 1.6;
}
a.creator-check__sub {
  color: var(--mf-accent-soft);
}
.creator-check__stars {
  margin-top: 2px;
  color: var(--mf-text-sub);
  font-size: 12px;
}
.creator-check__stars .creator-stars {
  letter-spacing: 1px;
}
.creator-check__likes {
  gap: 12px;
  margin-top: 12px;
}
.creator-check__likes-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 12px;
}
.creator-check__likes-head h3 {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font-size: 16px;
}
.creator-check__likes-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.creator-check__like {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border-radius: var(--mf-radius-s);
  background: var(--mf-surface-2);
  font-size: 14px;
}
.creator-check__big-stars {
  font-size: 20px;
}
.creator-check .creator-note {
  margin-top: 10px;
}
@media screen and (max-width: 834px) {
  .creator-check__facts,
  .creator-check__likes-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .creator-check__value {
    font-size: 22px;
  }
}

/* ===== タグ一覧・掛け合わせ：結論（迷ったらこの人） ===== */
.creator-picks__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.creator-picks__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
  border: 1px solid var(--mf-border);
  border-radius: var(--mf-radius);
  background: var(--mf-surface);
}
.creator-picks__card--top {
  grid-column: 1 / -1;
  border-color: var(--mf-accent);
  background: linear-gradient(135deg, rgba(255, 77, 141, 0.12) 0%, rgba(168, 85, 247, 0.12) 100%), var(--mf-surface);
}
.creator-picks__label {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
}
.creator-picks__badge {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--mf-gradient);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.creator-picks__badge--sub {
  background: var(--mf-surface-3);
  color: var(--mf-text-sub);
  font-weight: 500;
}
.creator-picks__name {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--mf-text);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
}
.creator-picks__card--top .creator-picks__name {
  font-size: 20px;
}
.creator-picks__icon {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
}
.creator-picks__card--top .creator-picks__icon {
  width: 64px;
  height: 64px;
}
.creator-picks__reasons {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--mf-text-sub);
  font-size: 14px;
  line-height: 1.7;
}
.creator-picks__reasons li {
  margin: 0;
}
.creator-picks__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}
.creator-picks__btn {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--mf-gradient);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.creator-picks__btn:hover {
  color: #fff;
  opacity: 0.9;
}
.creator-picks__btn--sub {
  border: 1px solid var(--mf-border);
  background: var(--mf-surface-2);
  color: var(--mf-text);
}
.creator-picks__btn--sub:hover {
  color: var(--mf-text);
}