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

:root {
  --hb-ivory: #f7f1ec;
  --hb-paper: #fffdfb;
  --hb-rose: #c9899a;
  --hb-rose-deep: #9a5368;
  --hb-ink: #7a4456;
  --hb-muted: #8d6a74;
  --hb-line: #f0e0e6;
  --hb-shadow: 0 12px 32px rgba(140, 80, 100, 0.08);
}

body {
  background: var(--hb-ivory);
  color: #5d424b;
  font-family: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
}

.header-container,
#header,
#navi,
#content,
#footer {
  background: transparent;
}

.wrap {
  max-width: 1100px;
}

#header-in {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 14px;
  min-height: 0;
  height: auto;
  padding-top: 8px;
  padding-bottom: 8px;
}

#header-in::before,
#header-in::after {
  content: none !important;
  display: none !important;
}

.logo-header {
  margin: 0 !important;
  padding: 0 !important;
  float: none;
}

.logo-header a {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.hb-mark {
  display: block;
  width: auto;
  height: 88px;
  max-width: min(520px, 46vw);
  object-fit: contain;
}

.logo-header .site-name-text,
.hb-brand,
.hb-roman,
.hb-book {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.hb-brand {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.site-name-text {
  font-family: "Shippori Mincho", serif;
  font-size: 34px;
  font-weight: 600;
  color: var(--hb-ink);
}

.hb-roman {
  margin-top: 5px;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: #c4a0ab;
}

.hb-book {
  width: 36px;
  height: 28px;
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'%3E%3Cpath fill='none' stroke='%23c9899a' stroke-width='3' d='M8 10c8 0 14 3 24 3s16-3 24-3v28c-8 0-14 3-24 3S16 38 8 38z'/%3E%3Cpath fill='none' stroke='%23c9899a' stroke-width='3' d='M32 13v28'/%3E%3C/svg%3E");
}

#header .tagline {
  order: 2;
  width: auto;
  max-width: 340px;
  flex: 0 0 auto;
  margin: 0 !important;
  text-align: left;
  font-size: 13px;
  line-height: 1.7;
  color: var(--hb-muted);
}

.hb-search {
  order: 3;
  margin-left: auto;
}

.hb-search input {
  width: 230px;
  height: 42px;
  padding: 0 18px 0 40px;
  border: 1px solid #ead8df;
  border-radius: 999px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10' cy='10' r='6' fill='none' stroke='%23c9899a' stroke-width='2'/%3E%3Cpath d='M15 15l5 5' stroke='%23c9899a' stroke-width='2'/%3E%3C/svg%3E") 14px 50% / 16px no-repeat;
  color: var(--hb-ink);
  font-size: 13px;
}

#navi {
  background: var(--hb-rose-deep);
  border-radius: 0;
}

#navi-in {
  min-height: 54px;
}

#navi .navi-in > .menu-header,
#navi .menu-header {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: flex-start !important;
  gap: 6px;
  margin: 0;
  width: 100%;
}

#navi .menu-header > li {
  width: auto !important;
  flex: 0 0 auto !important;
  float: none !important;
}

#navi .menu-header > li > a {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 54px;
  padding: 0 16px;
  color: #fff;
  font-size: 14px;
}

#navi .navi-in a:hover,
#navi .navi-in a:focus,
#navi .menu-header > li > a:hover,
#navi .menu-header > li > a:focus {
  background-color: #c9899a !important;
  color: #fff !important;
}

#navi .menu-header > li > a::before {
  content: "";
  width: 16px;
  height: 16px;
  background: center / contain no-repeat;
}

#navi .menu-header > li:nth-child(1) > a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='1.8' d='M4 11l8-7 8 7v8a1 1 0 0 1-1 1h-5v-6H10v6H5a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
#navi .menu-header > li:nth-child(2) > a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='1.8' d='M4 16l4-8 4 5 3-6 5 9z'/%3E%3C/svg%3E"); }
#navi .menu-header > li:nth-child(3) > a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='1.8' d='M6 4h9a3 3 0 0 1 3 3v13l-5-3-5 3V7a3 3 0 0 0-3-3z'/%3E%3C/svg%3E"); }
#navi .menu-header > li:nth-child(4) > a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='1.8' d='M5 19l4-1 9-9-3-3-9 9z'/%3E%3C/svg%3E"); }
#navi .menu-header > li:nth-child(5) > a::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='white' stroke-width='1.8' d='M12 19s-7-4.4-7-9a4 4 0 0 1 7-2 4 4 0 0 1 7 2c0 4.6-7 9-7 9z'/%3E%3C/svg%3E"); }

#navi .sub-menu {
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--hb-shadow);
  min-width: 220px;
}

#navi .sub-menu a {
  color: var(--hb-ink);
}

#navi .sub-menu a::before { display: none; }

#content {
  padding-bottom: 48px;
}

.home #main {
  width: 100% !important;
  float: none !important;
}

.home #content,
.home #sidebar,
.home #list,
.home .pagination,
.home .posts-not-found {
  display: none !important;
}

.hb-home {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 292px;
  gap: 22px 26px;
  align-items: start;
  width: min(1100px, calc(100% - 32px));
  margin: 18px auto 36px;
}

.hb-hero,
.hb-rank,
.hb-news { grid-column: 1; }
.hb-side { grid-column: 2; grid-row: 1 / span 3; }

.hb-hero,
.hb-card,
.hb-panel,
.hb-news-card {
  background: var(--hb-paper);
  border-radius: 26px;
  box-shadow: var(--hb-shadow);
}

.hb-hero {
  display: block;
  overflow: hidden;
}

.hb-hero-copy {
  padding: 48px 36px 36px;
}

.hb-hero h2,
.hb-section-title,
.hb-panel h2 {
  margin: 0;
  color: var(--hb-ink);
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
}

.hb-hero h2 {
  font-size: 40px;
  line-height: 1.35;
}

.hb-hero p {
  margin: 18px 0 28px;
  color: var(--hb-muted);
  font-size: 15px;
  line-height: 1.9;
}

.hb-actions { display: flex; flex-wrap: wrap; gap: 12px; padding: 16px 22px 20px; }

.hb-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 14px;
  text-decoration: none;
}

.hb-btn-fill { background: #d9a3b2; color: #fff; }
.hb-btn-line { background: #fff; color: #b57b8c; border: 1px solid #efd5dc; }
.hb-btn-soft { background: #f8eef1; color: var(--hb-ink); }

.hb-thumb img,
.hb-news-card img,
.hb-review img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hb-hero-visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.hb-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-size: 26px;
}

.hb-rank-list,
.hb-news-list {
  display: grid;
  gap: 16px;
}

.hb-rank-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.hb-card { overflow: hidden; }

.hb-thumb {
  position: relative;
  height: 168px;
}

.hb-num {
  position: absolute;
  top: 12px;
  left: 12px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  color: var(--hb-rose-deep);
  font-family: "Shippori Mincho", serif;
  font-weight: 700;
}

.hb-card-body,
.hb-news-body { padding: 14px 16px 18px; }

.hb-card h3,
.hb-news-card h3 {
  margin: 0 0 8px;
  color: var(--hb-ink);
  font-size: 16px;
  line-height: 1.55;
}

.hb-card h3 a,
.hb-news-card h3 a,
.hb-more { color: inherit; text-decoration: none; }

.hb-card p,
.hb-news-card p,
.hb-panel p { margin: 0; color: var(--hb-muted); font-size: 13px; line-height: 1.7; }

.hb-side { display: grid; gap: 16px; }

.hb-panel { padding: 20px 18px; }

.hb-panel h2 { font-size: 20px; }

.hb-genres { display: grid; gap: 8px; margin-top: 14px; }

.hb-genres a,
.hb-tags a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 12px;
  background: #fbf7f8;
  color: var(--hb-ink);
  font-size: 13px;
  line-height: 1.4;
  text-decoration: none;
}

.hb-genres a::after {
  content: "";
  width: 14px;
  height: 14px;
  margin-left: 10px;
  flex: 0 0 auto;
  background: center / 14px 14px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23c9899a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
}

.hb-review { margin-top: 12px; overflow: hidden; border-radius: 16px; }
.hb-review img { height: 120px; }
.hb-review-copy { padding: 12px 4px 0; }
.hb-review .hb-btn { margin-top: 12px; }

.hb-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.hb-tags a { padding: 4px 10px; border-radius: 999px; font-size: 12px; }

.hb-news-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
}

.hb-more { color: var(--hb-rose-deep); font-size: 13px; }

.hb-news-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.hb-news-card { overflow: hidden; }

.hb-news-card img { height: 150px; }

.hb-new {
  display: inline-block;
  margin-bottom: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f8e7ec;
  color: var(--hb-rose-deep);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.hb-date { display: block; margin-top: 10px; color: #b7a0a7; font-size: 12px; }

.hb-page {
  max-width: 760px;
  margin: 10px auto 40px;
  padding: 36px 32px;
  background: var(--hb-paper);
  border-radius: 24px;
  box-shadow: var(--hb-shadow);
}

.hb-page h1,
.archive-title,
.entry-title {
  font-family: "Shippori Mincho", serif;
  color: var(--hb-ink);
}

#footer {
  background: #f3e8e4;
  color: var(--hb-muted);
}

.page #main .entry-content,
.archive #main,
.single #main {
  background: var(--hb-paper);
  border-radius: 24px;
  padding: 28px 26px;
  box-shadow: var(--hb-shadow);
}

.page #main .entry-content h2,
.archive-title,
.entry-title {
  font-family: "Shippori Mincho", serif;
  color: var(--hb-ink);
}

@media screen and (max-width: 1023px) {
  .hb-home,
  .hb-rank-list,
  .hb-news-list,
  .hb-hero { grid-template-columns: 1fr; }
  .hb-side { grid-column: 1; grid-row: auto; }
  .hb-hero-visual img { aspect-ratio: 16 / 9; }
}

@media screen and (max-width: 834px) {
  #header-in { flex-wrap: wrap; gap: 8px 12px; }
  #header .tagline,
  .hb-search,
  .hb-roman,
  .hb-book { display: none; }
  .site-name-text { font-size: 26px; }
  .hb-mark { width: auto; height: 48px; max-width: 68vw; }
  .hb-hero-copy { padding: 28px 22px; }
  .hb-actions { display: grid; }
  .hb-genres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hb-genres a { min-height: 40px; }
  #navi .menu-header > li > a { min-height: 42px; padding: 0 12px; font-size: 13px; }
}