/*
Theme Name: Cocoon Child
Template: cocoon-master
Description: Cocoon用子テーマ（av-ranking.jp）
Author: yuya
Version: 2.0
*/

/* AVランキング.jp DESIGN SYSTEM 2.0 */
:root {
  --av-bg: #f3f4f7;
  --av-card: #ffffff;
  --av-ink: #171920;
  --av-muted: #66707e;
  --av-navy: #10131a;
  --av-red: #d92d50;
  --av-line: #dfe2e8;
}

body:not(.wp-admin) {
  background: var(--av-bg);
  color: var(--av-ink);
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}

.header-tagline,
#header-in .site-description {
  display: none !important;
}

#header-container,
#header-container .header-container,
#header {
  background: var(--av-navy) !important;
  border-bottom: 1px solid #292d37 !important;
}

#header-in .site-name-text,
#header-in .site-name-text a {
  color: #ffffff !important;
  font-size: clamp(1.2rem, 2.4vw, 1.55rem) !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em;
}

#navi,
.navi {
  background: #ffffff !important;
  border-bottom: 1px solid var(--av-line);
  box-shadow: 0 8px 24px rgba(15, 18, 26, 0.06);
}

#navi .navi-in > ul > li > a,
#navi .navi-in a {
  color: #252932 !important;
  font-size: 14px;
  font-weight: 900;
}

#navi .navi-in > ul > li > a:hover,
#navi .navi-in a:hover {
  background: #fff1f4 !important;
  color: #ad203f !important;
}

#content,
#container {
  background: transparent !important;
}

body:not(.home) #content {
  padding-top: 34px;
}

.main,
.sidebar {
  background: var(--av-card) !important;
  border: 1px solid var(--av-line);
  border-radius: 14px;
  box-shadow: none;
}

.article {
  background: var(--av-card) !important;
  border: 0;
  border-radius: 14px;
}

.entry-title,
.list-title,
.archive-title {
  color: var(--av-ink) !important;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.4;
  letter-spacing: -0.025em;
}

.entry-content,
.entry-content p,
.entry-content li {
  color: #30343d !important;
  line-height: 1.95;
}

.entry-content a:not(.avra-fanza) {
  color: #a72240 !important;
}

.entry-content h2 {
  margin-top: 2.6em;
  padding: 15px 18px !important;
  border: 0 !important;
  border-left: 5px solid var(--av-red) !important;
  border-radius: 0 8px 8px 0;
  background: #fff2f5 !important;
  color: #2b1a1f !important;
  font-size: clamp(23px, 3vw, 31px) !important;
  line-height: 1.5;
}

.entry-content h3 {
  margin-top: 2em;
  padding: 0 0 10px !important;
  border: 0 !important;
  border-bottom: 2px solid #f0dce1 !important;
  color: #8d233b !important;
  font-size: 22px;
}

.entry-content table {
  overflow: hidden;
  border-radius: 10px;
  background: #ffffff;
}

.entry-content th {
  background: #171920 !important;
  color: #ffffff !important;
}

.entry-content td {
  color: #30343d !important;
}

.entry-card-wrap,
.article-card-wrap {
  margin-bottom: 16px;
  border: 1px solid var(--av-line);
  border-radius: 14px;
  background: #ffffff !important;
  box-shadow: 0 12px 28px rgba(21, 25, 37, 0.05);
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.entry-card-wrap:hover,
.article-card-wrap:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(21, 25, 37, 0.09);
}

.entry-card,
.article-card {
  background: #ffffff !important;
  border: 0 !important;
  box-shadow: none !important;
}

.entry-card-title,
.entry-card-title a {
  color: #20232b !important;
  font-weight: 800;
  line-height: 1.5;
}

.entry-snippet,
.entry-card-snippet,
.entry-card-meta,
.entry-card-meta * {
  color: var(--av-muted) !important;
}

.sidebar,
.sidebar p,
.sidebar li,
.sidebar a,
.widget,
.widget p,
.widget li,
.widget a {
  color: #333842 !important;
}

.widget-title,
.sidebar h2,
.sidebar h3 {
  border: 0 !important;
  border-left: 4px solid var(--av-red) !important;
  background: #fff2f5 !important;
  color: #2b1a1f !important;
}

.breadcrumb,
.breadcrumb a,
.date-tags,
.entry-date,
.updated,
.author-info,
.entry-category,
.entry-tags {
  color: var(--av-muted) !important;
}

.pagination-next-link,
.page-numbers {
  border-color: #d4d8df !important;
  border-radius: 8px !important;
  color: #30343d !important;
}

#footer,
.footer {
  background: var(--av-navy) !important;
  border-top: 1px solid #292d37 !important;
  color: #c9cdd6 !important;
}

#footer *,
.footer *,
#footer a,
.footer a {
  color: #f1f2f5 !important;
}

body.home #content {
  margin-top: 0 !important;
  padding: 0 !important;
}

body.home .content-in,
body.home #main,
body.home .main,
body.home .article,
body.home .entry-content {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

body.home #sidebar {
  display: none !important;
}

#content .avra-home,
#content .avra-home .avra-section,
#content .avra-home .avra-section * {
  color: var(--av-ink) !important;
}

#content .avra-home .avra-heading > p,
#content .avra-home .avra-cats p,
#content .avra-home .avra-posts p,
#content .avra-home .avra-posts small {
  color: var(--av-muted) !important;
}

#content .avra-home .avra-heading small,
#content .avra-home .avra-cats span,
#content .avra-home .avra-posts b {
  color: var(--av-red) !important;
}

#content .avra-home .avra-hero,
#content .avra-home .avra-hero h1,
#content .avra-home .avra-hero li,
#content .avra-home .avra-pick,
#content .avra-home .avra-pick h2,
#content .avra-home .avra-pick li b,
#content .avra-home .avra-policy,
#content .avra-home .avra-policy h2,
#content .avra-home .avra-age,
#content .avra-home .avra-age h2,
#content .avra-home .avra-age button,
#content .avra-home .avra-age a {
  color: #ffffff !important;
}

#content .avra-home .avra-hero p,
#content .avra-home .avra-pick p,
#content .avra-home .avra-policy p,
#content .avra-home .avra-pick li span {
  color: #aeb5c1 !important;
}

#content .avra-home .avra-hero > .avra-wrap > span,
#content .avra-home .avra-pick small,
#content .avra-home .avra-policy small,
#content .avra-home .avra-age small {
  color: #ff8098 !important;
}

.avra-fanza,
.avra-fanza * {
  color: #ffffff !important;
}

.sns-follow {
  display: none !important;
}

@media (max-width: 834px) {
  body:not(.home) #content {
    padding-top: 0;
  }

  .main,
  .sidebar,
  .article {
    border-radius: 0;
  }

  #navi .navi-in > ul {
    flex-wrap: wrap;
  }
}