/*
Theme Name: Cocoon Child
Template: cocoon-master
*/

/*
 * cocoon-custom.css v3
 * juku-marketing.jp — worksight.jp 完全準拠レイアウト
 */

/* === 1. ベース === */

body {
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "Yu Gothic Medium", "游ゴシック Medium", sans-serif;
  color: #333;
  background: #fff;
  font-size: 14px !important;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

a {
  color: #000;
  text-decoration: none;
  transition: opacity .2s ease;
}

a:hover {
  opacity: .7;
  color: #000;
}

::selection {
  background: #000;
  color: #fff;
}

/* === 2. コンテナ幅 === */

.wrap {
  max-width: 960px;
  margin: 0 auto;
}

#content-in {
  max-width: 960px;
}

/* === 3. ヘッダー === */

/* hlt-top-menuの横並びを解除 → ヘッダー上・ナビ下の2段構成に */
.header-container-in.hlt-top-menu {
  display: block !important;
}
.header-container-in.hlt-top-menu > header {
  width: 100% !important;
  display: block !important;
  text-align: left !important;
}
.header-container-in.hlt-top-menu .navi {
  width: 100% !important;
  display: block !important;
}
/* header内のwrapコンテナ幅 */
.header-container-in.hlt-top-menu .wrap {
  width: 960px !important;
  margin: 0 auto !important;
}

.header, #header {
  background: #fff;
  border-bottom: none;
}

#header-in.header-in.wrap {
  max-width: 960px !important;
  width: 960px !important;
  margin: 0 auto !important;
  padding: 24px 20px 16px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
}
#header-in.cf::before,
#header-in.cf::after {
  display: none !important;
}
.header-container-in.hlt-top-menu .logo-text {
  display: block !important;
  padding: 0 !important;
}

/* タグラインを右、ロゴを左（同じ行・垂直中央揃え） */
.header-in > .tagline {
  order: 2;
  flex-shrink: 0;
  text-align: right !important;
}
.header-in > .logo-jukumaku-wrap {
  order: 1;
  flex-shrink: 0;
}

/* サイト名 */
.logo-text, .site-name-text, .logo-header a {
  font-size: 22px;
  font-weight: 900;
  color: #000;
  letter-spacing: .08em;
  text-align: left !important;
}
.header-container-in.hlt-top-menu .logo-header {
  max-height: none !important;
}
.header-container-in.hlt-top-menu .site-name-text-link {
  margin: 0 !important;
  text-align: left !important;
}

/* [ジュクマク]ラベル — サイト名幅に対して中央、全体は左寄せ */
#header-in > .logo-jukumaku-wrap {
  text-align: center;
}
.jukumaku-label {
  font-size: 12px;
  color: #999;
  font-weight: 400;
  letter-spacing: .06em;
  margin-top: 4px;
}

/* タグライン（右上表示）— 親テーマのdisplay:noneを上書き */
.header-container-in.hlt-top-menu .tagline {
  display: block !important;
  font-size: 13px;
  color: #333;
  letter-spacing: .03em;
  line-height: 1.6;
  text-align: right;
  white-space: normal;
}


/* ナビ */

#navi {
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.15);
  border-bottom: 1px solid rgba(0,0,0,.15);
}

#navi .navi-in {
  max-width: 960px;
  margin: 0 auto;
}

#navi .navi-in > ul {
  display: flex !important;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0;
}
.hlt-tm-right .navi-in > ul {
  justify-content: center !important;
}

#navi .navi-in > ul > li > a {
  font-size: 13px;
  font-weight: 700;
  color: #000;
  padding: 12px 16px;
  letter-spacing: .04em;
  white-space: nowrap;
}

#navi .navi-in > ul > li > a:hover {
  background: transparent;
  opacity: .7;
}

#navi .navi-in > ul > li > a::after {
  display: none;
}

#navi .item-label {
  font-size: 13px;
}

#navi .item-description {
  display: none;
}

/* === 4. フロントページ === */

.front-top-page .entry-title {
  display: none;
}

.front-top-page .sns-share,
.front-top-page .sns-follow {
  display: none !important;
}

.front-top-page .date-tags,
.front-top-page .toc,
.front-top-page .author-info,
.front-top-page .post-date,
.front-top-page .post-update {
  display: none;
}

.front-top-page #sidebar {
  display: none;
}

.front-top-page .main {
  width: 100%;
  max-width: 100%;
  float: none;
  margin: 0 auto;
}

.front-top-page .pickup-image img,
.front-top-page .wp-block-image img {
  width: 100%;
  height: auto;
}

/* ============================================
   ALL ARTICLES: worksight.jp風レイアウト
   WP core の flex + width:calc(50%) を完全上書き
   ============================================ */

/* flexをgridに強制変換 + li幅リセット */
ul.wp-block-latest-posts.wp-block-latest-posts.is-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 40px 36px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-wrap: unset !important;
}
ul.wp-block-latest-posts.is-grid > li,
ul.wp-block-latest-posts.is-grid.columns-2 > li {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(0,0,0,.12);
}

/* --- サムネイル: フル幅 --- */
.wp-block-latest-posts__featured-image,
.wp-block-latest-posts__featured-image.alignleft,
.wp-block-latest-posts__featured-image.alignright,
.wp-block-latest-posts__featured-image.aligncenter {
  float: none !important;
  margin: 0 0 12px 0 !important;
  max-width: none !important;
  width: 100% !important;
  display: block !important;
  position: relative;
}
.wp-block-latest-posts__featured-image a {
  display: block !important;
}
.wp-block-latest-posts__featured-image img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block !important;
  transition: opacity .3s;
}
ul.wp-block-latest-posts.is-grid > li:hover img {
  opacity: .75;
}

/* --- カテゴリラベル（サムネ左上） --- */
.wp-block-latest-posts__featured-image .cat-label {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background: #fff !important;
  color: #000 !important;
  font-size: 10px !important;
  font-weight: 700;
  padding: 4px 8px !important;
  border-radius: 0;
  line-height: 1;
}

/* --- 日付 --- */
.wp-block-latest-posts__post-date {
  font-family: "Lato", sans-serif;
  font-size: 11px;
  color: #999;
  display: block;
  margin: 4px 0 6px;
}

/* --- タイトル（上位2記事は大きく） --- */
a.wp-block-latest-posts__post-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #000 !important;
  line-height: 1.55 !important;
  display: block !important;
  text-decoration: none !important;
}

/* --- 抜粋文（上位2記事のみ3行表示） --- */
.wp-block-latest-posts__post-excerpt {
  font-size: 13px;
  color: #666;
  line-height: 1.75;
  margin-top: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- 「続きを読む」非表示（worksight風） --- */
a.wp-block-latest-posts__read-more {
  display: none !important;
}

/* === 3番目以降: サムネ左 + テキスト右 横並び === */
ul.wp-block-latest-posts__list.is-grid > li:nth-child(n+3),
ul.wp-block-latest-posts.is-grid.columns-2 > li:nth-child(n+3),
.wp-block-latest-posts.is-grid > li:nth-child(n+3) {
  display: grid !important;
  grid-template-columns: 88px 1fr !important;
  grid-template-rows: auto auto auto !important;
  column-gap: 14px !important;
  row-gap: 0 !important;
  align-content: start !important;
  align-items: start !important;
}
ul.wp-block-latest-posts__list.is-grid > li:nth-child(n+3) > .wp-block-latest-posts__featured-image,
ul.wp-block-latest-posts.is-grid.columns-2 > li:nth-child(n+3) > .wp-block-latest-posts__featured-image,
.wp-block-latest-posts.is-grid > li:nth-child(n+3) > .wp-block-latest-posts__featured-image {
  grid-row: 1 / -1 !important;
  grid-column: 1 !important;
  margin: 0 !important;
  width: 88px !important;
}
ul.wp-block-latest-posts__list.is-grid > li:nth-child(n+3) .wp-block-latest-posts__featured-image img,
ul.wp-block-latest-posts.is-grid.columns-2 > li:nth-child(n+3) .wp-block-latest-posts__featured-image img,
.wp-block-latest-posts.is-grid > li:nth-child(n+3) .wp-block-latest-posts__featured-image img {
  width: 88px !important;
  height: 62px !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
}
ul.wp-block-latest-posts.is-grid > li:nth-child(n+3) a.wp-block-latest-posts__post-title {
  font-size: 14px !important;
  line-height: 1.6 !important;
}
ul.wp-block-latest-posts.is-grid > li:nth-child(n+3) .wp-block-latest-posts__post-excerpt {
  display: none !important;
}
ul.wp-block-latest-posts.is-grid > li:nth-child(n+3) .wp-block-latest-posts__post-date {
  margin: 0 0 2px;
  font-size: 10px;
}

/* === レスポンシブ === */
@media (max-width: 768px) {
  ul.wp-block-latest-posts.wp-block-latest-posts.is-grid {
    grid-template-columns: 1fr !important;
  }
  ul.wp-block-latest-posts.is-grid > li:nth-child(n+3) {
    grid-template-columns: 100px 1fr !important;
  }
  ul.wp-block-latest-posts.is-grid > li:nth-child(n+3) > .wp-block-latest-posts__featured-image,
  ul.wp-block-latest-posts.is-grid > li:nth-child(n+3) .wp-block-latest-posts__featured-image img {
    width: 100px !important;
    height: 72px !important;
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  ul.wp-block-latest-posts.wp-block-latest-posts.is-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* === 5. 記事カード === */

.ect-vertical-card .entry-card-wrap {
  border: none;
  border-bottom: 1px solid rgba(0,0,0,.1);
  border-radius: 0;
  padding-bottom: 20px;
  margin-bottom: 20px;
  box-shadow: none;
  background: transparent;
}

.ect-vertical-card .entry-card-wrap:hover {
  box-shadow: none;
  transform: none;
}

.entry-card-thumb {
  border-radius: 0;
  overflow: hidden;
}

.entry-card-thumb img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;
  transition: opacity .3s ease;
}

.entry-card-wrap:hover .entry-card-thumb img {
  opacity: .7;
}

.entry-card-title {
  font-size: 14px;
  font-weight: 700;
  color: #000;
  line-height: 1.6;
}

.entry-card-snippet {
  font-size: 13px;
  color: #555;
  line-height: 1.8;
  margin-top: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cat-label {
  background: transparent !important;
  color: #000 !important;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 0 !important;
  border-radius: 0;
}

.entry-date, .post-date {
  font-family: "Lato", sans-serif;
  font-size: 11px;
  color: #999;
}

/* === 6. 記事本文 === */

.article {
  max-width: 710px;
  margin: 0 auto;
}

.entry-title {
  font-size: 22px;
  font-weight: 700;
  color: #000;
  line-height: 1.5;
  letter-spacing: 0;
}

.entry-content h2 {
  font-size: 20px;
  font-weight: 700;
  color: #000;
  border: none;
  background: none;
  padding: 0;
  margin: 48px 0 16px;
  line-height: 1.5;
}

.entry-content h3 {
  font-size: 16px;
  font-weight: 700;
  color: #000;
  border: none;
  background: none;
  padding: 0;
  margin: 32px 0 12px;
  line-height: 1.5;
}

.entry-content p {
  font-size: 14px;
  line-height: 1.8;
  color: #333;
  margin-bottom: 1.5em;
}

.entry-content ul,
.entry-content ol {
  padding-left: 1.5em;
  margin-bottom: 1.5em;
}

.entry-content li {
  font-size: 14px;
  line-height: 1.8;
  color: #333;
}

.entry-content blockquote {
  border-left: 3px solid rgba(0,0,0,.15);
  padding: 12px 20px;
  margin: 20px 0;
  background: transparent;
  color: #555;
  font-size: 13px;
}

.entry-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.entry-content th {
  background: #f5f5f5;
  color: #000;
  font-weight: 700;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(0,0,0,.12);
}

.entry-content td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(0,0,0,.12);
}

/* === 7. サイドバー === */

#sidebar .widget-title,
.sidebar .widget-title {
  font-size: 13px;
  font-weight: 700;
  color: #000;
  letter-spacing: .04em;
  padding: 0 0 8px;
  margin-bottom: 12px;
  border: none !important;
  border-bottom: 1px solid rgba(0,0,0,.12) !important;
  background: none !important;
}

#sidebar a {
  font-size: 13px;
  color: #333;
}

/* === 8. フッター === */

#footer {
  background: #fff;
  color: #333;
  border-top: 1px solid rgba(0,0,0,.12);
}

.footer-bottom {
  background: #fff;
  border-top: none;
}

.copyright {
  color: #999;
  font-size: 11px;
}

#footer a {
  color: #333;
  font-size: 13px;
}

.footer-menu-in {
  max-width: 960px;
  margin: 0 auto;
}

/* === 9. パンくず・ページネーション === */

.breadcrumb {
  font-size: 11px;
  color: #999;
}

.breadcrumb a {
  color: #999;
}

.pagination .page-numbers {
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 0;
  color: #333;
}

.pagination .current {
  background: #000;
  border-color: #000;
  color: #fff;
}

/* === 10. 目次・ユーティリティ === */

.toc {
  background: #f9f9f9;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 0;
  padding: 20px 24px;
}

.sns-share-message {
  display: none;
}

.main .widget-title {
  border: none;
  background: none;
  padding: 0;
}

.author-box {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 0;
}


/* === 3b. ヘッダー補足（無料診断ボタン・タグライン） === */

/* タグライン（右上表示） */
.tagline {
  font-size: 13px;
  color: #333;
  letter-spacing: .03em;
}

/* 無料診断ボタン（ナビ最後のメニュー項目） */
#navi .navi-in > ul > li:last-child > a {
  background: #000;
  color: #fff !important;
  padding: 12px 28px;
  margin-left: 8px;
  font-weight: 700;
  letter-spacing: .06em;
  transition: opacity .2s;
}

#navi .navi-in > ul > li:last-child > a:hover {
  background: #000;
  opacity: .8;
  color: #fff !important;
}

/* === 3c. モバイル対応 === */
@media screen and (max-width: 834px) {
  .header-in {
    padding: 16px 12px 0;
    text-align: center;
  }
  .logo-text, .site-name-text, .logo-header a {
    font-size: 18px;
  }
  .tagline {
    font-size: 11px;
    text-align: center;
  }
  .jukumaku-label {
    text-align: center;
  }
  #navi .navi-in > ul {
    flex-wrap: wrap;
    justify-content: center;
  }
  #navi .navi-in > ul > li > a {
    font-size: 12px;
    padding: 10px 12px;
  }
}