@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.3
*/

/************************************
** ねこぴん デザイン
** palette: teal #2A9D8F / ink #264653 / orange #E9A15B / bg #F7F4EE
************************************/
:root {
  --np-teal: #2a9d8f;
  --np-teal-d: #1f7a6f;
  --np-teal-l: #e8f6f4;
  --np-ink: #264653;
  --np-orange: #e9a15b;
  --np-orange-l: #fbebdd;
  --np-bg: #f7f4ee;
  --np-line: #e6dfd2;
  --np-radius: 16px;
  --np-shadow: 0 4px 18px rgba(38, 70, 83, .08);
}

body {
  background-color: var(--np-bg);
  /* faint paw prints */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='%23ece6da'%3E%3Cellipse cx='40' cy='52' rx='11' ry='9'/%3E%3Cellipse cx='28' cy='38' rx='4' ry='5'/%3E%3Cellipse cx='36' cy='32' rx='4' ry='5'/%3E%3Cellipse cx='45' cy='32' rx='4' ry='5'/%3E%3Cellipse cx='53' cy='38' rx='4' ry='5'/%3E%3Cellipse cx='118' cy='128' rx='9' ry='7'/%3E%3Cellipse cx='108' cy='117' rx='3.5' ry='4'/%3E%3Cellipse cx='115' cy='112' rx='3.5' ry='4'/%3E%3Cellipse cx='122' cy='112' rx='3.5' ry='4'/%3E%3Cellipse cx='129' cy='117' rx='3.5' ry='4'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 160px 160px !important;
  background-repeat: repeat !important;
  background-attachment: scroll !important;
  line-height: 1.9;
}

/* ---------- header ---------- */
#header-container {
  box-shadow: 0 2px 12px rgba(38, 70, 83, .06);
  border-top: 4px solid var(--np-teal);
}
.logo-header .site-name-text {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-weight: 800;
  color: var(--np-ink);
  letter-spacing: .04em;
}
.logo-header .site-name-text::before {
  content: "";
  width: 1.5em;
  height: 1.5em;
  flex: none;
  border-radius: 22%;
  background: url("/wp-content/uploads/2026/09/site-icon-512.png") center / cover no-repeat;
}
#navi .navi-in a {
  font-weight: 700;
  border-radius: 999px;
  transition: background-color .2s, color .2s;
}
#navi .navi-in a:hover {
  background-color: var(--np-teal-l);
  color: var(--np-teal-d);
}
#navi .item-description { display: none; }

/* ---------- hero (appeal area) ---------- */
.appeal {
  background: linear-gradient(135deg, #e8f6f4 0%, #f7f4ee 55%, #fbebdd 100%) !important;
}
.appeal-in { padding: 2.2em 0; }
.appeal-content {
  background: rgba(255, 255, 255, .88);
  border-radius: 24px;
  box-shadow: var(--np-shadow);
  padding: 2em 2.4em;
}
.appeal-title {
  font-size: 1.5em;
  font-weight: 800;
  color: var(--np-ink);
}
.appeal-title::before {
  content: "";
  display: block;
  width: 64px;
  height: 64px;
  margin: 0 auto .5em;
  border-radius: 22%;
  background: url("/wp-content/uploads/2026/09/site-icon-512.png") center / cover no-repeat;
}
.appeal-message { color: #4a5b63; }
.appeal-button {
  border-radius: 999px !important;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(233, 161, 91, .35);
  transition: transform .2s;
}
.appeal-button:hover { transform: translateY(-2px); }

/* ---------- recommended cards (hub guides) ---------- */
.recommended { padding: 1.2em 0 .4em; }
.recommended .navi-entry-card-link {
  border-radius: var(--np-radius);
  overflow: hidden;
  box-shadow: var(--np-shadow);
  transition: transform .2s, box-shadow .2s;
}
.recommended .navi-entry-card-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(38, 70, 83, .14);
}

/* ---------- main / cards ---------- */
.main, .sidebar {
  border-radius: var(--np-radius);
  box-shadow: var(--np-shadow);
  border: none;
}
.entry-card-wrap {
  background: #fff;
  border-radius: var(--np-radius);
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.ect-vertical-card .entry-card-wrap {
  box-shadow: 0 2px 10px rgba(38, 70, 83, .07);
}
.entry-card-wrap:hover {
  background: #fff;
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(38, 70, 83, .13);
}
.entry-card-title, .related-entry-card-title {
  font-weight: 700;
  color: var(--np-ink);
}
.entry-card-thumb img, .related-entry-card-thumb img { border-radius: 12px; }
.cat-label {
  border-radius: 999px;
  padding: 2px 10px;
  font-weight: 700;
  border: none;
  top: .5em;
  left: .5em;
}
.cat-label.cat-label-3, .category-game-network .cat-label { background-color: var(--np-orange); }

/* ---------- article ---------- */
.article h2 {
  background: var(--np-teal);
  color: #fff;
  border-radius: 12px;
  padding: .7em 1em;
  position: relative;
  font-weight: 800;
}
.article h2::after {
  content: "";
  position: absolute;
  left: 28px;
  bottom: -10px;
  border: 10px solid transparent;
  border-top-color: var(--np-teal);
  border-bottom: 0;
}
.article h3 {
  border: none;
  border-left: 6px solid var(--np-orange);
  background: var(--np-orange-l);
  border-radius: 0 10px 10px 0;
  padding: .55em .9em;
  font-weight: 800;
}
.article h4 {
  border-bottom: 2px dotted var(--np-teal);
  padding-bottom: .3em;
}
.article strong { background: linear-gradient(transparent 62%, #fde2c3 62%); }
.article table th, .article .wp-block-table th {
  background: var(--np-teal-l);
  color: var(--np-ink);
}
.article table { border-radius: 10px; overflow: hidden; }
.article .wp-block-table { overflow-x: auto; }

/* conclusion list right after the first h2 feels like a summary box */
.article .toc {
  border: 2px solid var(--np-teal-l);
  border-radius: var(--np-radius);
  background: #fff;
}

/* figures (inline SVG diagrams) */
.np-figure {
  margin: 1.6em 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(38, 70, 83, .07);
}

/* product box */
.np-product {
  border: 2px solid var(--np-teal-l) !important;
  border-radius: var(--np-radius) !important;
  background: #fff !important;
  box-shadow: var(--np-shadow);
  padding: 1.1em 1.3em !important;
}
.np-product > p:first-child strong {
  background: none;
  font-size: 1.08em;
  color: var(--np-ink);
}
.np-product a {
  display: inline-block;
  background: var(--np-orange);
  color: #fff !important;
  font-weight: 700;
  text-decoration: none;
  border-radius: 999px;
  padding: .5em 1.6em;
  box-shadow: 0 3px 10px rgba(233, 161, 91, .35);
  transition: transform .2s, background-color .2s;
}
.np-product a:hover { background: #dd8f44; transform: translateY(-2px); }

/* PR notice */
.pr-label, .pr-label-s, .pr-label-l {
  border-radius: 10px;
  background: var(--np-orange-l);
  border: none;
  color: #8a5a2b;
}

/* ---------- sidebar ---------- */
.sidebar h3 {
  background: none;
  color: var(--np-ink);
  border-bottom: 3px solid var(--np-teal);
  padding: .4em 0;
  font-weight: 800;
}
.sidebar .search-edit { border-radius: 999px 0 0 999px; }
.sidebar .search-submit { border-radius: 0 999px 999px 0; background: var(--np-teal); }

.np-profile { text-align: center; padding: .4em .2em; font-size: .92em; color: #4a5b63; }
.np-profile img { border-radius: 22%; box-shadow: var(--np-shadow); }
.np-profile .np-profile-name { font-weight: 800; font-size: 1.15em; color: var(--np-ink); margin: .4em 0 .2em; }
.np-profile a { color: var(--np-teal-d); font-weight: 700; }

/* share buttons: calmer, smaller */
.sns-share .sns-buttons a { border-radius: 10px; }

/* ---------- footer ---------- */
.footer { border-top: 4px solid var(--np-teal); }
.footer a { color: #fff; }
.go-to-top-button { border-radius: 50%; }

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  .main, .sidebar { border-radius: 0; box-shadow: none; }
}

/*834px以下*/
@media screen and (max-width: 834px){
  .appeal-content { padding: 1.4em 1.2em; }
  .appeal-title { font-size: 1.25em; }
}

/*480px以下*/
@media screen and (max-width: 480px){
  .article h2 { font-size: 1.15em; }
}