@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){
  /*必要ならばここにコードを書く*/
}

/* ==== SIZE Pro custom start ==== */
/************************************
** SIZE Pro カスタマイズ
** Cocoon 子テーマ用スタイル
************************************/

/* ==========================================================
   1. フォント
   英数字は Helvetica、日本語は Noto Sans JP。
   先に Helvetica を書くことで、欧文グリフだけ Helvetica が使われ、
   日本語は次の Noto Sans JP にフォールバックする。
   ========================================================== */
body,
.entry-content,
input, button, select, textarea,
.article h1, .article h2, .article h3, .article h4,
.entry-card-title, .site-name-text, .navi-in a {
  font-family: Helvetica, "Helvetica Neue", Arial,
               "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
}

/* ==========================================================
   2. ヘッダー
   高さを従来の約半分にして、ロゴを左上へ
   ========================================================== */
#header-container .header-in,
.header-container-in.hlt-center-logo .header-in {
  padding: 14px 0 !important;
  min-height: 0 !important;
}
.hlt-center-logo .logo-header,
#header .logo-header {
  text-align: left !important;
  margin: 0 !important;
  line-height: 1 !important;
}
.tagline { display: none !important; }

/* ロゴ画像。テキストは検索エンジン向けに残したまま視覚的に置き換える */
.logo-header .site-name-text {
  display: inline-block;
  width: 200px;
  height: 51px;              /* 500×127 の比率 */
  text-indent: -9999px;
  overflow: hidden;
  white-space: nowrap;
  background: url(https://okerukadev.xwp.jp/wp-content/uploads/2026/08/logo.png)
              no-repeat left center / contain;
}
@media screen and (max-width: 600px) {
  .logo-header .site-name-text { width: 150px; height: 38px; }
  #header-container .header-in { padding: 10px 0 !important; }
}

/* ==========================================================
   3. サイドバーを外して1カラムに
   ========================================================== */
#sidebar,
.sidebar { display: none !important; }
#main,
.main {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
  margin: 0 !important;
}
#content-in,
.content-in { display: block !important; }
#content .wrap,
.content-in.wrap { max-width: 1240px; }

/* PV・閲覧数の類は出さない */
.post-views, .views, .entry-card-info .post-view,
.wpp-views, .e-card-info .views { display: none !important; }

/* ==========================================================
   4. 記事一覧をグリッドに
   PC 3カラム / タブレット 2カラム / スマホ 1カラム
   ========================================================== */
#list.ect-entry-card,
.list.ect-entry-card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px 26px;
  border: 0 !important;
}
.entry-card-wrap {
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  border: 0 !important;
  display: block;
  border-radius: 16px;
  overflow: visible;
  transition: transform .2s ease;
}
.entry-card-wrap:hover { transform: translateY(-3px); }
.entry-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

/* サムネイルを上、本文を下のカード型に */
.entry-card-thumb {
  position: relative;
  width: 100% !important;
  float: none !important;
  margin: 0 0 22px 0 !important;
  border-radius: 14px;
  overflow: visible;
}
.entry-card-thumb img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}
.entry-card-content {
  margin-left: 0 !important;
  min-height: 0 !important;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.entry-card-title {
  font-size: 16px !important;
  font-weight: 700;
  line-height: 1.55;
  margin: 0 0 8px !important;
}
.entry-card-snippet {
  font-size: 13px;
  line-height: 1.75;
  color: #6e6e73;
  max-height: 5.3em;
  overflow: hidden;
}
.entry-card-meta { margin-top: auto; padding-top: 10px; }
.entry-card-info { font-size: 12px; color: #9a9aa4; }

/* ==========================================================
   5. カテゴリラベル
   サムネイルの下端に置くことで、記事タイトルのすぐ上に来る
   ========================================================== */
.cat-label {
  position: absolute !important;
  left: 12px;
  top: auto !important;
  right: auto !important;
  bottom: -13px !important;
  z-index: 2;
  padding: 6px 16px !important;
  border: 0 !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff !important;
  background: linear-gradient(135deg, #0A84FF, #5E5CE6) !important;
  box-shadow: 0 4px 12px rgba(10, 132, 255, .30);
}
/* カテゴリごとに色を変える（cat-label-<term_id>）。
   未定義のカテゴリは上の .cat-label の青紫がそのまま当たる。 */
.cat-label-9  { background: linear-gradient(135deg, #0A84FF, #5E5CE6) !important;
                box-shadow: 0 4px 12px rgba(10,132,255,.30); }   /* 家電 */
.cat-label-8  { background: linear-gradient(135deg, #FF9F0A, #FF5F1F) !important;
                box-shadow: 0 4px 12px rgba(255,120,30,.30); }   /* 調理家電 */
.cat-label-10 { background: linear-gradient(135deg, #34C759, #16A34A) !important;
                box-shadow: 0 4px 12px rgba(52,199,89,.30); }
.cat-label-11 { background: linear-gradient(135deg, #FF375F, #C026D3) !important;
                box-shadow: 0 4px 12px rgba(255,55,95,.30); }
.cat-label-12 { background: linear-gradient(135deg, #5AD1F0, #2D7FF9) !important;
                box-shadow: 0 4px 12px rgba(45,127,249,.30); }

/* ==========================================================
   6. ファーストビュー
   最新1件を全幅の大きなカードにする
   ========================================================== */
#list.ect-entry-card > .entry-card-wrap:first-child { grid-column: 1 / -1; }
#list.ect-entry-card > .entry-card-wrap:first-child .entry-card {
  flex-direction: row;
  align-items: center;
  gap: 34px;
}
#list.ect-entry-card > .entry-card-wrap:first-child .entry-card-thumb {
  width: 58% !important;
  flex: 0 0 58%;
  margin: 0 !important;
}
#list.ect-entry-card > .entry-card-wrap:first-child .entry-card-thumb img {
  border-radius: 18px;
}
#list.ect-entry-card > .entry-card-wrap:first-child .cat-label {
  left: 16px;
  bottom: 16px !important;
  font-size: 13px !important;
  padding: 8px 20px !important;
}
#list.ect-entry-card > .entry-card-wrap:first-child .entry-card-content {
  flex: 1;
  justify-content: center;
}
#list.ect-entry-card > .entry-card-wrap:first-child .entry-card-title {
  font-size: 27px !important;
  line-height: 1.5;
  margin-bottom: 14px !important;
}
#list.ect-entry-card > .entry-card-wrap:first-child .entry-card-snippet {
  font-size: 15px;
  max-height: none;
}

/* ==========================================================
   6b. 記事末尾の関連リンク
   本文の <style> を持たない古い記事にもスタイルが当たるよう、
   同じ定義をテーマ側にも置いておく
   ========================================================== */
.sp-related{border:1px solid #e3e3e8;border-radius:20px;padding:22px 24px;margin:30px 0}
.sp-related h3{font-size:17px;font-weight:800;margin:0 0 14px;letter-spacing:.02em}
.sp-related ul{list-style:none;margin:0;padding:0;display:grid;
 grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px}
.sp-related li{margin:0}
.sp-related a{display:block;text-decoration:none;color:#1d1d1f;background:#f5f5f7;
 border-radius:14px;padding:13px 16px;transition:.18s}
.sp-related a:hover{background:#eaf3ff}
.sp-related-cat{display:block;font-size:15px;font-weight:800;line-height:1.4}
.sp-related-hook{display:block;font-size:12.5px;color:#6e6e73;line-height:1.6;margin-top:3px}
@media screen and (max-width: 760px){
  .sp-related{padding:18px 16px;border-radius:16px}
  .sp-related ul{grid-template-columns:1fr}
}

/* ==========================================================
   7. レスポンシブ
   ========================================================== */
@media screen and (max-width: 1023px) {
  #list.ect-entry-card,
  .list.ect-entry-card { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 640px) {
  #list.ect-entry-card,
  .list.ect-entry-card { grid-template-columns: 1fr; gap: 30px; }
  #list.ect-entry-card > .entry-card-wrap:first-child .entry-card {
    flex-direction: column;
    gap: 0;
  }
  #list.ect-entry-card > .entry-card-wrap:first-child .entry-card-thumb {
    width: 100% !important;
    flex: none;
    margin: 0 0 22px 0 !important;
  }
  #list.ect-entry-card > .entry-card-wrap:first-child .cat-label {
    bottom: -13px !important;
  }
  #list.ect-entry-card > .entry-card-wrap:first-child .entry-card-title {
    font-size: 20px !important;
  }
}

/* ==== SIZE Pro custom end ==== */