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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}


/* HAKULAB 2026-06-13 HEADER MENU DESCRIPTION FIX START */
#navi .item-description,
#navi .sub-caption {
  display: none;
}
/* HAKULAB 2026-06-13 HEADER MENU DESCRIPTION FIX END */


/* HAKULAB MODERN DESIGN 2026-06-13 START */
:root {
  --haku-bg: #f6f5fa;
  --haku-surface: #ffffff;
  --haku-text: #1a1a2e;
  --haku-muted: #666477;
  --haku-purple: #7b5ea7;
  --haku-purple-dark: #4a3b6e;
  --haku-purple-soft: #eee9f7;
  --haku-border: #e7e3ee;
  --haku-shadow: 0 14px 40px rgba(48, 36, 75, .09);
  --haku-radius: 20px;
}

html { scroll-behavior: smooth; }
body {
  color: var(--haku-text) !important;
  background: var(--haku-bg) !important;
  background-image:
    radial-gradient(circle at 8% 5%, rgba(123,94,167,.12), transparent 24%),
    radial-gradient(circle at 92% 18%, rgba(162,139,207,.10), transparent 26%) !important;
  font-family: -apple-system, BlinkMacSystemFont, "Noto Sans JP", "Yu Gothic UI", "Yu Gothic", sans-serif !important;
  line-height: 1.85;
}
a { transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
a:hover { color: var(--haku-purple); }
.wrap { width: min(1180px, calc(100% - 40px)); }

/* Header */
#header-container {
  background: rgba(255,255,255,.92) !important;
  border: 0 !important;
  box-shadow: none !important;
}
#header-container .header-in { min-height: 154px; display: flex; flex-direction: column; justify-content: center; }
#header-container .logo-text { padding: 24px 0 6px; }
#header-container .site-name-text {
  color: var(--haku-text) !important;
  font-size: clamp(30px, 3vw, 46px) !important;
  font-weight: 700 !important;
  letter-spacing: .18em;
}
#header-container .site-name-text:after {
  content: "";
  display: block;
  width: 42px;
  height: 4px;
  margin: 12px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--haku-purple), #b49cdd);
}
#header-container .tagline {
  max-width: 760px;
  margin: 12px auto 20px !important;
  color: var(--haku-muted) !important;
  font-size: 13px !important;
  letter-spacing: .03em;
}

/* Navigation */
#navi {
  position: sticky;
  top: 32px;
  z-index: 20;
  background: rgba(255,255,255,.88) !important;
  border-top: 1px solid rgba(231,227,238,.8);
  border-bottom: 1px solid rgba(231,227,238,.9);
  box-shadow: 0 8px 24px rgba(48,36,75,.06);
  backdrop-filter: blur(16px);
}
#navi .navi-in > ul { display: flex; justify-content: center; gap: 4px; }
#navi .navi-in > ul > li > a {
  min-height: 58px;
  padding: 0 16px;
  color: #343146 !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  border-radius: 12px;
}
#navi .navi-in > ul > li > a:hover {
  color: var(--haku-purple-dark) !important;
  background: var(--haku-purple-soft) !important;
}
#navi .item-description, #navi .sub-caption { display: none !important; }

/* Layout */
#content { margin-top: 44px; }
#content-in { gap: 32px; }
#main, #sidebar { background: transparent !important; border: 0 !important; }
#main { padding: 0 !important; }
#sidebar { padding: 0 !important; }

/* Start guide */
#custom_html-2 section {
  position: relative;
  overflow: hidden;
  margin-bottom: 34px !important;
  padding: 38px !important;
  border: 1px solid rgba(123,94,167,.16) !important;
  border-radius: 28px !important;
  background: linear-gradient(135deg,#fff 0%,#faf8ff 56%,#f1ebfb 100%) !important;
  box-shadow: var(--haku-shadow) !important;
}
#custom_html-2 section:after {
  content: "";
  position: absolute;
  width: 240px;
  height: 240px;
  right: -90px;
  top: -110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(123,94,167,.19), transparent 68%);
  pointer-events: none;
}
#custom_html-2 section > p:first-child {
  color: var(--haku-purple) !important;
  font-size: 12px;
  letter-spacing: .18em !important;
}
#custom_html-2 h2 {
  padding: 0 0 14px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--haku-border) !important;
  background: none !important;
  font-size: clamp(25px,3vw,36px) !important;
  font-weight: 750;
  letter-spacing: .03em;
}
#custom_html-2 section > div { position: relative; z-index: 1; gap: 14px !important; }
#custom_html-2 section > div > a {
  min-height: 118px;
  padding: 20px !important;
  border: 1px solid var(--haku-border) !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.88) !important;
  color: var(--haku-text) !important;
  box-shadow: 0 8px 22px rgba(48,36,75,.05);
}
#custom_html-2 section > div > a:hover {
  transform: translateY(-4px);
  border-color: rgba(123,94,167,.48) !important;
  box-shadow: 0 14px 30px rgba(74,59,110,.13);
}
#custom_html-2 section > div > a strong { color: var(--haku-purple) !important; margin-bottom: 7px; }
#custom_html-2 section > div > a:last-child {
  background: linear-gradient(135deg,var(--haku-purple-dark),var(--haku-purple)) !important;
  color: #fff !important;
}
#custom_html-2 section > div > a:last-child strong { color: #fff !important; }

/* Post grid */
#list.ect-entry-card { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
#list .entry-card-wrap {
  display: block;
  overflow: hidden;
  margin: 0 !important;
  border: 1px solid var(--haku-border) !important;
  border-radius: var(--haku-radius) !important;
  background: var(--haku-surface) !important;
  box-shadow: 0 10px 28px rgba(48,36,75,.07);
}
#list .entry-card-wrap:hover {
  transform: translateY(-5px);
  border-color: rgba(123,94,167,.38) !important;
  box-shadow: 0 20px 42px rgba(48,36,75,.13);
}
#list .entry-card { display: flex; height: 100%; flex-direction: column; padding: 0 !important; }
#list .entry-card-thumb { width: 100% !important; margin: 0 !important; aspect-ratio: 16/9; overflow: hidden; }
#list .entry-card-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }
#list .entry-card-wrap:hover img { transform: scale(1.035); }
#list .entry-card-content { width: 100% !important; flex: 1; display: flex; flex-direction: column; padding: 22px 22px 18px !important; }
#list .entry-card-title { margin: 0 0 12px; font-size: 18px; line-height: 1.55; font-weight: 750; color: var(--haku-text); }
#list .entry-card-snippet { color: var(--haku-muted); font-size: 13px; line-height: 1.8; }
#list .entry-card-meta { margin-top: auto; padding-top: 16px; color: #8a8798; font-size: 12px; }
#list .admin-pv { display: none !important; }
.cat-label, .entry-category {
  padding: 5px 10px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(74,59,110,.88) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700;
}

/* Sidebar */
#sidebar .widget {
  margin: 0 0 22px !important;
  padding: 26px !important;
  border: 1px solid var(--haku-border) !important;
  border-radius: var(--haku-radius) !important;
  background: rgba(255,255,255,.9) !important;
  box-shadow: 0 10px 28px rgba(48,36,75,.06);
}
#sidebar .widget-title, #sidebar h2 {
  margin: 0 0 18px !important;
  padding: 0 0 13px !important;
  border: 0 !important;
  border-bottom: 2px solid var(--haku-purple-soft) !important;
  background: none !important;
  color: var(--haku-text) !important;
  font-size: 17px !important;
  text-align: left !important;
  letter-spacing: .05em;
}
.wp-block-search__input {
  border: 1px solid var(--haku-border) !important;
  border-radius: 12px !important;
  background: #faf9fc !important;
}
.wp-block-search__button {
  border: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg,var(--haku-purple),var(--haku-purple-dark)) !important;
  color: #fff !important;
}
#sidebar li { padding: 9px 0; border-bottom: 1px solid #f0edf4; }

/* Article pages */
.single #main, .page #main, .archive #main {
  padding: clamp(24px,4vw,46px) !important;
  border: 1px solid var(--haku-border) !important;
  border-radius: 24px !important;
  background: #fff !important;
  box-shadow: var(--haku-shadow);
}
.article h1 { font-size: clamp(28px,4vw,42px); line-height: 1.45; letter-spacing: .01em; }
.article h2 {
  margin-top: 2.6em;
  padding: 16px 20px !important;
  border: 0 !important;
  border-left: 5px solid var(--haku-purple) !important;
  border-radius: 0 12px 12px 0;
  background: linear-gradient(90deg,var(--haku-purple-soft),rgba(238,233,247,.22)) !important;
  color: var(--haku-text) !important;
}
.article h3 {
  padding: 0 0 10px !important;
  border: 0 !important;
  border-bottom: 2px solid var(--haku-purple-soft) !important;
  background: none !important;
  color: var(--haku-text) !important;
}
.article blockquote {
  border: 1px solid #ded6ec !important;
  border-left: 5px solid var(--haku-purple) !important;
  border-radius: 14px;
  background: #faf8fd !important;
}
.article table { border-radius: 12px; overflow: hidden; box-shadow: 0 6px 20px rgba(48,36,75,.06); }
.article table th { background: var(--haku-purple-dark) !important; color: #fff !important; }
.article table td { border-color: var(--haku-border) !important; }
.article img { border-radius: 14px; }
.toc { border: 1px solid var(--haku-border) !important; border-radius: 16px !important; background: #faf9fc !important; }

/* Pagination and footer */
.pagination a, .pagination span { border: 0 !important; border-radius: 10px !important; }
.pagination .current { background: var(--haku-purple) !important; color: #fff !important; }
#footer { margin-top: 64px; background: linear-gradient(135deg,#272039,#4a3b6e) !important; color: rgba(255,255,255,.82) !important; }
#footer a { color: #fff !important; }
.footer-bottom { padding: 34px 0; }

@media screen and (max-width: 1023px) {
  #navi { top: 0; }
  #content { margin-top: 28px; }
  #list.ect-entry-card { gap: 16px; }
}
@media screen and (max-width: 834px) {
  .wrap { width: min(100% - 28px, 720px); }
  #header-container .header-in { min-height: 126px; }
  #custom_html-2 section { padding: 28px !important; border-radius: 22px !important; }
  #list.ect-entry-card { grid-template-columns: 1fr; }
  #sidebar { margin-top: 28px; }
  .single #main, .page #main, .archive #main { padding: 26px !important; border-radius: 20px !important; }
}
@media screen and (max-width: 480px) {
  .wrap { width: calc(100% - 20px); }
  #header-container .site-name-text { font-size: 30px !important; }
  #header-container .tagline { display: none; }
  #custom_html-2 section { padding: 22px !important; }
  #custom_html-2 h2 { font-size: 24px !important; }
  #custom_html-2 section > div { grid-template-columns: 1fr !important; }
  #custom_html-2 section > div > a { min-height: auto; }
  #list .entry-card-content { padding: 18px !important; }
  #list .entry-card-title { font-size: 17px; }
  .single #main, .page #main, .archive #main { padding: 20px !important; border-radius: 16px !important; }
  .article h2 { padding: 13px 15px !important; }
}
/* HAKULAB MODERN DESIGN 2026-06-13 END */

/* HAKULAB NAV DUPLICATE FIX */
#navi .navi-in > ul.menu-mobile { display: none !important; }

/* HAKULAB HEADER HEIGHT FIX */
#header-container .header-in { height: auto !important; }
#header-container .logo-header,
#header-container .logo-text { height: auto !important; min-height: 0 !important; line-height: 1 !important; }
#header-container .site-name-text { line-height: 1.25 !important; }

/* HAKULAB HEADER COMPACT FIX */
#header-container .header-in { min-height: 0 !important; padding: 24px 0 18px !important; }
#header-container .logo-text { padding: 0 !important; }
#header-container .site-name-text-link { display: block !important; padding: 0 !important; line-height: 1 !important; }
#header-container .site-name-text { display: inline-block !important; line-height: 1.2 !important; }
#header-container .tagline { margin: 10px auto 0 !important; }


/* HAKULAB PC TWO-COLUMN LAYOUT FIX 2026-06-13 START */
@media screen and (min-width: 835px) {
  #content-in {
    flex-wrap: nowrap;
  }
  #content-in > #main {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    margin-left: 0;
    margin-right: 0;
  }
  #content-in > #sidebar {
    flex: 0 0 320px;
    width: 320px;
    margin-left: 0;
    margin-right: 0;
  }
}
/* HAKULAB PC TWO-COLUMN LAYOUT FIX 2026-06-13 END */


/* HAKULAB CARD CONTENT OFFSET FIX 2026-06-14 START */
#list .entry-card-content {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* HAKULAB CARD CONTENT OFFSET FIX 2026-06-14 END */


/* HAKULAB 2026-06-18 HEADER BACKGROUND ONLY START */
#header .logo-header {
  display: none;
}
/* HAKULAB 2026-06-18 HEADER BACKGROUND ONLY END */